diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 00000000..6c1047c3
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,26 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "Battleborn Brawlers Compiled (Frontend)",
+      "runtimeExecutable": "bun",
+      "runtimeArgs": ["run", "dev:compiled"],
+      "port": 5000,
+      "autoPort": true
+    },
+    {
+      "name": "Battleborn Brawlers (Frontend)",
+      "runtimeExecutable": "bun",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5000,
+      "autoPort": true
+    },
+    {
+      "name": "Battleborn Brawlers (Backend)",
+      "runtimeExecutable": "bun",
+      "runtimeArgs": ["--cwd", "server", "--watch", "--env-file=.env", "index.js"],
+      "port": 1337,
+      "autoPort": false
+    }
+  ]
+}
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000..ca2d45b0
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,14 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "bash \"$CLAUDE_PROJECT_DIR/scripts/setup-worktree.sh\""
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.githooks/pre-commit b/.githooks/pre-commit
new file mode 100755
index 00000000..e5119e67
--- /dev/null
+++ b/.githooks/pre-commit
@@ -0,0 +1,12 @@
+#!/bin/sh
+files=$(git diff --cached --name-only --diff-filter=ACMR)
+[ -z "$files" ] && exit 0
+
+git diff --cached --name-only --diff-filter=ACMR -z | xargs -0 bunx prettier --write --ignore-unknown --log-level=warn
+git diff --cached --name-only --diff-filter=ACMR -z | xargs -0 git add
+
+# Keep static/images/*.webp current with the /images masters (regenerate changed,
+# prune orphans) and stage them — so committed art always ships, even with no dev
+# server or local build having run.
+bun scripts/images.js
+git add -A static/images
diff --git a/.gitignore b/.gitignore
index ca38523d..396e91ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,26 +1,36 @@
 node_modules
 
 # Output
-.output
 .vercel
-/.svelte-kit
-/build
+dist
+compiled
 
 # OS
 .DS_Store
-Thumbs.db
 
 # Env
 .env
 .env.*
 !.env.example
 !.env.test
-
-# Vite
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
 .env*.local
 
+# Logs
+*.log
+
+# Editor
+.vscode
+.idea
+
+# Claude
+.claude/*
+!.claude/launch.json
+!.claude/settings.json
+
 # Stuff
 _potential
-_unused
\ No newline at end of file
+_unused
+
+# Test artifacts
+test-results
+static/audio/Imported Assets
diff --git a/.nvmrc b/.nvmrc
index 9a7c1e50..b0195acf 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20.0
+24.12
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..2368a972
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,13 @@
+node_modules
+dist
+build
+.vercel
+.output
+test-results
+bun.lockb
+.env*
+.claude/settings.local.json
+static
+*.svg
+_potential
+_unused
diff --git a/.prettierrc b/.prettierrc
index 9f0f7960..5eaff133 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,9 +1,6 @@
 {
   "useTabs": false,
   "singleQuote": true,
-  "trailingComma": "none",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-  "pluginSearchDirs": ["."],
-  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+  "plugins": ["@ape-egg/prettier-plugin-vibe"]
 }
diff --git a/.vercelignore b/.vercelignore
new file mode 100644
index 00000000..187d3623
--- /dev/null
+++ b/.vercelignore
@@ -0,0 +1 @@
+/images
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..9c2802ab
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,96 @@
+# Battleborn Brawlers
+
+The world's websites are overengineered. It doesn't have to be that way. Keep it simple Claude.
+
+Strategy auto-battler. Currently a Multi-Page App with filesystem routing — `pages/x.html` serves `/x`, and a `$param` segment is dynamic (`pages/the-arena/$id.html` serves `/the-arena/:id`). **Subject to change** — could become an SPA later, so don't lean on MPA assumptions in feature code. The game must work responsively down to ~360px wide; reach for Stylecheat's three media queries (`sm:` ≤768px, `md:` 768–1024px, `lg:` >1024px) before any custom `@media`.
+
+Open work — missing assets, content, and roadmap items — lives in [`TODO.md`](TODO.md). Log new gaps there as you hit them.
+
+## Stack
+
+- **Runtime**: Vibe (`@ape-egg/vibe`) — runtime-first reactive framework
+- **CSS**: Stylecheat (hybrid build) — attribute-based CSS framework. We use `ChromeOnlyModifiers.css` (the `[g] { gap: calc(attr(g type(<number>)) * var(--unit)); }` form), **not** `Modifiers.css` (the `g-4`/`p-2` form).
+- **Dev server**: Vite via `vite-plugin-vibe` for HMR. The `mpa-routes` plugin in `vite.config.js` derives routes from the `pages/` tree (a `$param` segment is dynamic, e.g. `pages/the-arena/$id.html` → `/the-arena/:id`, `page.params.id`). It resolves URLs in dev and injects each dynamic page's route template as `window.__ROUTE__` for `boot.js` — no generated file. For prod, add a matching `vercel.json` rewrite by hand when you add a dynamic page (Vercel reads `vercel.json` before it builds).
+- **Vibe source**: Symlinked from `/Users/kortes/Projects/webdev/vibe/nodemodules/@ape-egg/vibe` (also `vite-plugin-vibe`).
+- **`@ape-egg/async-await-websockets` source**: Symlinked from `/Users/kortes/Projects/webdev/async-await-websockets` (root + `server`).
+
+## Dogfooding Vibe & Stylecheat
+
+This project is the **primary dogfood** for `@ape-egg/vibe` and Stylecheat — both live as symlinks (see Stack). Things you'd expect from a mature framework (React/Vue/Svelte) may simply be missing in Vibe.
+
+**When you hit a Vibe quirk or bug, STOP. Do not work around it.** No `setTimeout`, no `queueMicrotask`, no reaching into `window.__vibe*`, no wrapping in a manual signal. Workarounds in app code hide the gap and let it rot.
+
+Instead, report it to me in this exact shape:
+
+1. **The issue** — what Vibe does vs what you expected (one or two sentences).
+2. **What you're trying to do** — the actual code you wanted to write, pasted inline as a code block, even if it doesn't run.
+3. **Proposed solutions** — 1–3 options: the upstream fix in `webdev/vibe`, and (if applicable) a temporary local workaround. Be explicit that the upstream fix is the right one.
+
+Frame it as **"Vibe is missing feature parity with modern frontend frameworks"** — because that's what most of these are. I decide whether we fix it upstream now or accept a workaround for this turn.
+
+The same applies to Stylecheat (but rarer — Stylecheat is more mature).
+
+## Game Server
+
+The WebSocket backend lives in `server/`. Frontend integration:
+
+- Connection lives on `$.socket` (see `js/connectSocket.js`); lifecycle is managed centrally — features should consume `$.socket` rather than open new connections.
+- **Calling backend functions**: every file under `server/events/` is a server function, addressed by its path. Invoke from the client with `await $.socket.sendAsync('<dir>/<file>', payload)` — e.g. `events/user/authenticate.js` is `$.socket.sendAsync('user/authenticate', { token, … })`, `events/pvp/get-random-opponent.js` is `$.socket.sendAsync('pvp/get-random-opponent', …)`. New backend capabilities → drop a `.js` file in `events/<dir>/<file>.js` (server auto-registers) and call it the same way from the client.
+- Game state seeded onto `$` flows from the server through `sendAsync` responses (mainly in `js/boot.js` and `js/connectSocket.js`). New event handlers should plug into the same place so reactive bindings stay coherent.
+- Auth happens via `$.token`; the server validates it on the websocket handshake. Don't store credentials elsewhere.
+- Constants (`js/constants/*`) must match the server's expectations — when the backend renames or adds a key, update the constant file in lockstep.
+- Helpers belong in `/js/helpers.js`. Tiny utilities (formatters, parsers) should not get their own files.
+
+## Guidelines for CLAUDE
+
+`~` = enforce
+`-` = avoid
+`❌` = forbidden
+
+### Testing
+
+- `-` Playwright MCP, unless explicitly asked.
+- `~` Prefer the Claude Desktop App Preview for in-app checks over the Playwright test browser.
+- `~` Rely on manual browser testing — the user runs the game and reports issues; point out what to check.
+- `~` **Preview throttles `requestAnimationFrame`.** The Claude Preview tab runs unfocused, so the browser throttles `rAF` to ~nothing — anything rAF-driven freezes (the combat replay sticks at `elapsedMilliseconds ≈ 166`, animations don't advance). `setTimeout`/`setInterval` still fire, so `preview_eval` and samplers work, but you can't observe rAF-driven UI. To un-throttle for a debugging session, shim it via `preview_eval` **before** the loop starts:
+
+  ```js
+  window.requestAnimationFrame = (cb) => setTimeout(() => cb(performance.now()), 16);
+  window.cancelAnimationFrame = (id) => clearTimeout(id);
+  ```
+
+  Then trigger the fight/animation and sample with a `setInterval`. The shim is ephemeral page state (gone on reload), so re-apply it after each reload. This is how the compiled-only "status chip stuck at 1" bug was finally observed.
+
+### Markup & components
+
+- `❌` HTML comments. The only HTML "comments" allowed are Vibe directives (`<!-- if -->`, `<!-- else -->`, `<!-- /if -->`, `<!-- each -->`, `<!-- /each -->`) — reactive control flow, not comments. Use JS `// TODO:` for "do later".
+- `❌` `<div>`. Use semantic/custom element names: `<page-home>`, `<fight-row>`, `<ability-cell>`, `<xp-bar>`, `<coin-stack>`, etc.
+- `❌` `class=""`. Exception: `<a class="button">` to give a tag a different visual treatment (Stylecheat keys some looks off `class`).
+- `❌` `style=""`. Set CSS custom props via `<element attr="@[value]">`; only acceptable for unavoidable cases like tooltip absolute positioning.
+- `-` `data-*` prefix. Use plain attributes — CSS `chip[stunned]`, HTML `<element @[status]>`. Exception: genuine HTML data semantics like `data-src`.
+- `❌` `@[…]` in an **eager-loading URL attribute** (`<img src>`, `<video src>`/`<source>`, `poster`, `srcset`, preloaded `href`). In runtime mode the page ships the raw `@[…]` literal and the browser's preload scanner fetches it _before_ Vibe hydrates → 404 (e.g. `/static/images/races/`, `/@[cutscene…]`). The browser ignores `data-src`, so bind there instead: `<img data-src="/static/images/races/@[image]">` / `<video data-src="@[…]">`. The sync loop in [`js/boot.js`](js/boot.js) (`img[data-src], video[data-src]`, runs on every `afterUpdate`) copies `data-src` → `src` after hydration, skipping unresolved `@[…]` and filename-less paths. The clean fix is upstream — Vibe's **compiled (hyperspeed)** mode pre-renders values so no raw `@[…]` reaches the browser — but until pages are compiled, `data-src` is the convention.
+- `~` Reuse the wrapper element's name for inner pieces — `<tooltip>`/`<tooltip-content>`/`<tooltip-title>`, `<combatant-card>`/`<combatant-header>`/`<combatant-name>`.
+- `~` Page structure: `<script type="module">` at top, `<page-xxx>` wrapper, `<style>` at bottom.
+- `~` Call functions bare from markup: `onclick="fn()"`, never `onclick="window.fn()"`.
+
+### Styling & CSS
+
+- `~` Prefer Stylecheat attributes (`g="4"`, `p="2"`, `vertical`, `primary`, `absolute`, `flex`, `down`, …) over hand-written CSS. Use ChromeOnly forms — `g="4"`, not `g-4`.
+- `~` Local component styles go in a `<style>` at the bottom of the file, scoped with `[component-name]` (or unscoped when the element name is already unique). Lift shared/theme styles into `css/index.css`.
+- `~` `attr()` is Stylecheat-only. For attribute-driven custom values, set a `--x` custom prop via a Vibe binding + a one-line rule.
+- `-` `z-index`. Stacking should fall out of source order, `position`, and stacking contexts. Reorder the DOM first; in flex/grid use `order: -1` (see `css/stylecheat.css` ~line 1989). Last resort only: a named `var(--z-…)` token, and ask first.
+- `❌` Hex colors outside `css/index.css`. Always `var(--color-name)`; add the var to `index.css` first if it's missing.
+- `❌` `rem`, and raw `px` greater than `1px`. Use `calc(var(--unit) * N)`.
+
+### Reactive state (Vibe)
+
+- `~` Global state via `$` (not `window.$`). Component-local state: `const id = component(state); const s = $[id];`.
+- `❌` Touching `window.__vibe*` internals (`__vibeComponents`, `__vibeGlobalState`, `__vibeManifest`, …). If something seems to need them, that's a missing public API → fix it upstream in `webdev/vibe`.
+- `~` Boolean attributes: a pure `@[expr]` on a non-`data-*`/`aria-*`/`on*` attribute becomes a real boolean attribute (set when truthy, removed when falsy). `<modal-root open="@[when]">` + CSS `modal-root[open]` / `:not([open])` works directly.
+- `~` Name-binding: when an attribute name equals the binding leaf (`name="@[ability.name]"`), use `<element @[ability.name]>` — same pattern as `<icon @[ability.icon]>`.
+- `❌` Baking a loop-derived value into a handler with `@[…]`. A `@[…]` span is stringified once at hydrate, so `@[idx]`/`@[item.x]` goes stale on reorder/removal (this is how `equipItem($.inventory[@[idx]])` broke). Reference the loop alias bare — `onclick="equipItem(item)"` — and read `$.state` live inside the handler. The only `@[…]` that belongs in a handler is component-local `this.X`.
+
+### Files
+
+- `~` Every file ends with a trailing newline.
+- `~` Imports: package imports first, then relative project imports.
diff --git a/README.md b/README.md
index 678d5781..9f476e5b 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,29 @@
-## My personal repo
+# Battleborn Brawlers
 
-This repo is a work in progress and is currently my personal thing. Feel free to fork or ask questions about it, but expect things to change drastically.
+Strategy auto-battler — a per-game branch of the [`webdev-game-stack`](https://github.com/kkortes/webdev-game-stack) monorepo
 
 ## Information
 
-This is a highly opinionated monorepo for game dev using web tech.
-
 The stack is:
 
-- `Svelte` for frontend (https://svelte.dev)
+- `Vibe` for frontend (runtime-first reactive framework via `@ape-egg/vibe`)
+- `Stylecheat` for styling (attribute-based CSS framework)
+- `Vite` + `vite-plugin-vibe` for dev server / HMR
 - `Bun` for backend (https://bun.sh)
 - `MongoDB` for database (https://www.mongodb.com)
 
 ## Run the client locally
 
 ```
-nvm use
 bun install
 bun dev
 ```
 
+The dev server is reachable both at `http://localhost:<port>` (printed on start) and at `https://webdev-game-stack.test` via the local Caddy proxy.
+
 ## Run the server locally
 
-`touch .env` and add:
+`touch server/.env` and add:
 
 ```
 PORT=1337
@@ -34,9 +35,9 @@ PASSWORD_RESET_HASH=<custom_hash>
 ```
 
 ```
-cd svelte-game-server
-npm install
-npm run dev
+cd server
+bun install
+bun run dev
 ```
 
 ## Features
@@ -45,13 +46,62 @@ npm run dev
 - ✅ Account log in
 - ✅ Account creation
 - ✅ Account password recovery
-- ✅ Notification center
 - ✅ Render backend hosting setup (https://render.com)
 - ✅ Vercel frontend hosting setup (https://vercel.com)
-- ✅ Tailwind CSS for styling (https://tailwindcss.com)
+- ✅ Vibe + Stylecheat front-end (formerly Svelte + Tailwind)
 
-## Code base quirks
+## Combat stats budget
+
+Source of truth for balancing races, equipment, racial bonuses, and (eventually) player-allocable specs. Pricing is **linear — no diminishing returns, no soft caps**.
+
+**Baseline anchor:** `1 spec point = 2 damage = 4 health`
+
+### Flat stats — what 1 spec point buys
+
+Armor in this table assumes the **flat-reduction model**: each point of armor subtracts 1 damage from every incoming hit (clamped at 0). It does not deplete.
+
+| Stat                                   | 1 spec point =                                |
+| -------------------------------------- | --------------------------------------------- |
+| Health (`maxHealth`)                   | +4 HP                                         |
+| Armor (`maxArmor`)                     | +1 armor (flat reduction per hit)             |
+| Damage (`damage`)                      | +2 damage                                     |
+| Critical Chance (`criticalChance`)     | +1%                                           |
+| Critical Damage (`criticalDamage`)     | +10%                                          |
+| Block Chance (`blockChance`)           | +1%                                           |
+| Dodge Chance (`dodgeChance`)           | +1%                                           |
+| Magic Chance (`magicChance`)           | TBD — mechanic pending                        |
+| Elemental Resistance (`resistances.*`) | +4% (reduces incoming damage of that element) |
+
+### Modifier stats — what 1 spec point buys
 
-- `.env (development) & .env.production (production)` are injected into `src/constants/ENV_VARS.ts`. Trying to parse `import.meta.X` won't work in Svelte files, due to vite crashing when there is CSS in the files that they parse.
+Modifiers are % multipliers in `combatStats.modifiers`. Rates below are pegged to default base values so the EV roughly matches the flat-stat table.
+
+| Modifier               | 1 spec point =                                          |
+| ---------------------- | ------------------------------------------------------- |
+| `modifiers.maxHealth`  | +15%                                                    |
+| `modifiers.maxArmor`   | +10%                                                    |
+| `modifiers.damage`     | +25%                                                    |
+| `modifiers.resistance` | +2% (scales `wounded`/`concussed`/`exposed` thresholds) |
+
+### Rules
+
+- Linear pricing only. Stats must be honest and easy for the player to calculate.
+- Unimplemented stats (currently `magicChance`) don't render in any UI until they have gameplay.
+- When adding a new stat, give it a row here _before_ it ships. If it can't be priced linearly, it doesn't ship.
+- Racial bonuses, equipment rolls, and spec choices all draw from the same currency — this table is the contract.
+
+### Cost & the coin economy
+
+Because stat scaling is linear, equipment doesn't differentiate by stat _shape_ — a higher-level piece is simply more of the same (e.g. armor = its level, so a higher-level armor is a strict upgrade of a lower one). The differentiator is **coin cost**, spent against a deliberately scarce economy: a player has roughly **25 coins total by level 25, shared across all 6 characters**. You can't gear everyone in top equipment — every purchase is a trade-off.
+
+So when pricing current and future equipment:
+
+- **Cost is the balancing lever, not stats.** A strictly-better item must cost proportionally more coins; price is what gates power, not stat complexity.
+- Cheap, low-level gear stays relevant as the affordable pick when coins are tight.
+- The only stat-shape trade-off we currently make is **heavy armor** (`+10` armor for `−40%` hit chance). Everything else competes purely on cost-vs-power along the linear curve.
+
+## Code base quirks
 
-- This repo utilizes `sveltekit-autoimport` (https://github.com/yuanchuan/sveltekit-autoimport) hence some `.svelte` and `.js` imports seem to magically appear out of nowhere. See `vite.config.js` to see what's going on.
+- Routing is currently MPA-flavored, filesystem-driven by the `mpa-routes` plugin in `vite.config.js`: `pages/x.html` serves `/x`, and a `$param` segment is dynamic (`pages/the-arena/$id.html` → `/the-arena/:id`). It resolves URLs in dev and injects each dynamic page's route as `window.__ROUTE__` for `boot.js`; in prod, a dynamic route needs a matching `vercel.json` rewrite, added by hand. Subject to change — could become an SPA later, so feature code shouldn't lean on MPA assumptions.
+- Vibe is symlinked from `/Users/kortes/Projects/webdev/vibe` for live editing during development. Production builds resolve normally from npm.
+- Global reactive state lives on `$` (no `window.` prefix). Component-local state goes through `component(state)` + `$[id]`.
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 00000000..415498a0
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,52 @@
+# TODO
+
+## Critical & major for-the-future todos
+
+Every item in this section WILL eventually be done — it's a matter of when, not if. All code written until that point must pay respect to that fact: don't bake in assumptions these items will invalidate, and when two approaches cost the same, pick the one that survives them.
+
+- [ ] **First-class small-screen support (smartphones & tablets).** Not just "doesn't break at 360px" — the game should feel designed for touch and small viewports. New UI must work responsively from the start (Stylecheat `sm:`/`md:`/`lg:` first), avoid hover-only affordances, and keep tap targets comfortable.
+- [ ] **MPA → SPA conversion.** The Vite middleware mapping URLs to `pages/*.html` is temporary. Don't lean on full-page loads as a state reset, on per-page `<script>` boot order, or on anything else that assumes navigation re-executes the world. Feature code should stay portable to client-side routing.
+- [ ] **Server validates everything.** All game state changes the client sends today on trust (coins, experience, inventory, fight results, …) will be validated server-side, ideally through one generic, streamlined mechanism rather than per-event checks. Keep client/server constants in lockstep and route state changes through `server/events/` functions so the validation layer has a single choke point to attach to.
+- [x] **Compiled Vibe.** ✅ Done — production now defaults to the Vibe-compiled (hyperspeed) build (`scripts/vercel-build.js`; set `VIBE_MODE=runtime` to opt back into the plain vite build). Dev (`bun run dev`) stays runtime-first for HMR. The guidance below still holds — it's now enforced by the compiler itself: keep markup statically analyzable — declarative `@[…]` bindings and `<!-- each/if -->` regions the compiler can see, no building templates from strings at runtime, no relying on runtime-parsing quirks the compiled path won't reproduce.
+- [ ] **Translations.** Every user-facing string will eventually go through a translation layer. Until then: keep player-visible copy in constants/data files (names, descriptions, tooltips) rather than scattered through markup, don't concatenate sentence fragments in code (word order differs per language), and don't bake English text into images, icons, or CSS `content`.
+
+## Missing assets / content
+
+When adding content or features to the game, if something is missing add it as a todo here.
+
+- [ ] Find a healing/grace-themed SFX for `alorasTouch` (currently using `SFX.chew` as a placeholder — wrong fit for an elven channeled heal).
+- [ ] Find a rallying/cheering SFX for `warcry` (currently reusing `SFX.demoralizingShout`).
+- [ ] Find a roar-style SFX for `intimidatingRoar` (currently reusing `SFX.demoralizingShout`).
+- [ ] Stone-themed SFX for `stoneskin` (currently reusing `SFX.armorHit` as a stand-in).
+- [ ] Smoke-themed SFX for `smokebomb` (currently reusing `SFX.dodge` — fits the whoosh but should have a dedicated puff/pop).
+- [ ] Web/silk-themed icons for the spider kit: `weave` (ability) and `webbed` (threshold status) currently reuse `--icon-smokeBomb`, `cocooned` (effect status) reuses `--icon-spin` — all placeholders in `css/index.css`.
+- [ ] Add the `dazedBlow` status icon (Dazing Blow's accuracy debuff) — referenced by the `dazed` status but no art yet, so the chip renders blank until the SVG lands in the icon set.
+- [ ] The `adrenalized` buff status (Adrenaline's damage-reduction shield) reuses the still-placeholder `adrenaline` icon, so its chip renders blank too — the `adrenaline` art (already tracked above) covers both ability and status once added.
+- [x] Build out the `Palaestra` page (`/palaestra`, unlocks at level 10). ✅ Done — Doctore Varro trains an assigned brawler for +10 account experience every 2 minutes, mirroring the Medicum (`pages/palaestra.html`, `components/PalaestraContent.html` + `PalaestraTrainBar.html`, `$.palaestraTrainer`, the shared refill loop in `components/Sidebar.html`).
+- [ ] Unify the brawler card-hand selector. `components/MedicumBrewBar.html` and `components/PalaestraTrainBar.html` both duplicate the `card-hand-clip`/`card-hand-mount` markup + CSS from `components/FightButton.html` (the shared handlers already live in `js/boot.js`). Extract a `BrawlerCardHand.html` component and have the fight bar, the Medicum brew bar, and the Palaestra train bar all use it.
+- [ ] Wet/sticky projectile SFX for `weave` (currently reusing `SFX.bowShot`).
+- [ ] Frost/ice-themed icon for `shieldWall` (Shield Wall) and the `isWarded` status — both reuse the `block` icon as a placeholder. The `Skjaldborg` shield also has no dedicated equipment icon.
+- [ ] Frost/ice-shatter SFX for `shieldWall` (currently reusing `SFX.block`).
+- [ ] `intimidatingRoar` ability + `isIntimidated` status are now orphaned (troll's signature is `stomp`). Delete them and their references (STATUS_DISPLAY_ORDER, StatusChip color) if not repurposing.
+- [x] Dedicated icon for `wideSwing` (Wide Swing, Denea's signature) — currently reuses the `slash` icon as a placeholder.
+- [ ] Icons for the 11 new blacksmith abilities (Brog/Grukk gear) in `js/constants/ABILITIES.js` — each references a new placeholder icon key with no art yet, so they render blank until added to the icon set (`css/index.css`): `rupture`, `dazingBlow`, `pommelStrike`, `exposeArmor`, `bloodlust`, `bulwark`, `guardian` (weapon/shield) and `warBanner`, `aegis`, `adrenaline`, `unbreakable` (trinket). Their `vfx`/`sfx` deliberately reuse existing assets so combat plays correctly; bespoke vfx/sfx are optional future polish.
+
+## UI / polish
+
+- [ ] Rock-scrape SFX for the achievement deep-link flip. The locked→earned flip on `/achievements` (and `window.achRevealSfx` in `js/boot.js`) currently reuses `Unspecified Impact Layer (1)` (a stomp impact) for the shake phase as a placeholder — it wants a proper stone-grinding/scraping sound. The flip-reveal itself uses `Victory Stinger 1` (fine). Add a dedicated asset to `js/audio.js` and point the `Shake` branch at it.
+- [ ] Achievement catalog is seeded with ~8 placeholder achievements (`js/constants/ACHIEVEMENTS.js`) + 3 placeholder titles (`js/constants/ACCOUNT_TITLES.js`) derived from existing stat paths. Revise titles/thresholds/rewards and expand categories. Title display/selection on the player (visible to others in PvP) is deferred — titles currently just unlock (derived from earned achievements, no separate store).
+- [ ] Minimalistic "blood" animation on the health bar's real-health fill (deferred from the heal-buffer/ghost-bar work). Event-driven (e.g. a brief deepening pulse on hit) rather than constant motion. Also keep in mind future "health bar statuses" (e.g. poisoned turns the bar green) — the bar layers all derive from one hue, so a status can swap the hue in one place.
+
+## Performance / dev tooling
+
+- [ ] **Versioned component URLs for zero-network reloads (interim — superseded by Compiled Vibe).** Component HTML is now served `Cache-Control: no-cache` + content `ETag` (in the symlinked `vite-plugin-vibe` middleware), so reloads revalidate to bodyless `304`s instead of full `200`s — never stale, but still one round trip per component. True zero-network reloads need the deps-style `?v=<hash>` + `max-age, immutable` strategy: runtime appends `?v=` from a `window.__VIBE_COMPONENT_VERSIONS__` map (backward-compatible 4-liner in `vibe/runtime/component.js` fetch), plugin injects the map in `transformIndexHtml` (re-hashed per document → fresh tokens on every reload) and serves `immutable` only when `?v=` is present, prod inlines the map + `vercel.json` headers. Only worth building if Compiled Vibe (which inlines templates → no runtime fetches at all) stays distant; otherwise it's throwaway. Land order if pursued: runtime helper → plugin → prod headers.
+
+## Combat / balance
+
+- [ ] Revise abilities for the level 16–25 elemental foes (creatures pulled from `world-seed-client`: Giant (nature), Owl Bear, Breff, Armorillo, Bullrock, Wyvern, Mammoth, Cerberus, Yeti, Giant (lightning), Ulwar, Herald, Rune Stag, Frigus Mortis, Warrus, Onkh, Vita Deserto, Ragnar, Kyl). All currently seeded with placeholder `Punch ×6` (2 ticks each → 12-tick bar) and only their crit/dodge/block/critDamage + own-element resistance (+8) mapped from the source data. Give them element-appropriate kits and tune HP/damage/armor.
+- [ ] Revise abilities + balance for the imported elemental capstone roster (one per element): the **giants** (Fire/Frost/Earth/Nature/Lightning, lvl 20–25), the **dragons** (Nature + Lightning Dragon, lvl 30, art from `world-seed-classic`), and the **gods** (Elise/earth, Alora/nature, Oskar/lightning, joining Ragnar/fire + Kyl/frost, lvl 40). All seeded with placeholder `Punch ×6` + a single thematic lucky-stat bump + own-element resistance (+8). Give them element-appropriate kits and tune HP/damage/armor. Dragons use `race: creature` (not the fire-locked `dragon` race) so each carries its own element. `ignius` (fire-dragon boss, lvl 20) and `wyvern` (lightning creature) were left as separate existing encounters.
+- [ ] Elemental foe portraits have baked-in backgrounds (framed paintings) rather than the transparent cut-outs used by the gladiator-era roster (under `static/images/races/creature/<element>/`). Extensions were unified `.jpg`→`.png`, but the bytes are still JPEG-encoded with opaque backgrounds — a real transparent cut-out art pass is still needed for visual consistency.
+
+- [ ] Differentiate arena foes' non-core stats. The fight-detail "Best stat" hint (`bestCombatStat` in `js/constants/STATS.js`) currently shows "Critical chance" for 40 of 41 foes because every foe carries the same sword (+2% crit) and sits at baseline on everything else (no dodge/block/magic bumps, no elemental resistances, default limits/provocation). The hint becomes real intel once foes get varied loadouts — e.g. wolves with bleed limits, golems with earth resistance, jesters with dodge.
+
+- [ ] Prevent combats from reaching runaway lengths. Self-sustaining creatures — the Golem (restores armor to full) and the Giant Rat (rapidly regenerates HP) — can stall a fight into a near-stalemate that runs for thousands of ticks. The symptom is rendering lag late in long fights (per-frame work in `enrichCombatant` scales with the ever-growing `combatant.animations` history), but the root cause is the fight not converging. Fix at the source: a hard turn/tick cap, diminishing regen, or a tiebreak/sudden-death rule — not by optimizing playback to tolerate pathologically long combats.
diff --git a/bun.lockb b/bun.lockb
index 14db09f6..f562df72 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/AbilityBar.html b/components/AbilityBar.html
new file mode 100644
index 00000000..531c668a
--- /dev/null
+++ b/components/AbilityBar.html
@@ -0,0 +1,577 @@
+<ability-bar
+  block
+  w="full"
+  px="1"
+  small="@[small]"
+  minimalistic="@[minimalistic]"
+  inverse="@[inverse]"
+  blocked="@[blocked]"
+>
+  <ability-track
+    block
+    position="relative"
+    w="full"
+    small="@[small]"
+    cut="@[abilities.reduce((t, a) => t + a.ticks, 0) > (small ? 12 : 15)]"
+    style="--filled: @[lastTick]; --seg-total: @[abilities.reduce ((t, a) => t + a.ticks, 0)]"
+  >
+    <ability-grid w="full">
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+      <ability-cell></ability-cell>
+    </ability-grid>
+
+    <!-- if !minimalistic && !dndDisabled -->
+      <ability-marker-sequence
+        position="absolute"
+        style="left: calc((100% / var(--grid-cells)) * @[lastTick])"
+      >
+        <ability-marker-label position="absolute" vertical right g="1">
+          <strong>Loop&nbsp;at</strong>
+          <span>@[lastTick]&nbsp;ticks</span>
+        </ability-marker-label>
+      </ability-marker-sequence>
+      <!-- if lastTick !== 15 -->
+        <ability-marker-max position="absolute">
+          <ability-marker-label position="absolute" vertical right g="1">
+            <strong>Max</strong>
+            <span>15&nbsp;ticks</span>
+          </ability-marker-label>
+        </ability-marker-max>
+      <!-- /if -->
+    <!-- /if -->
+
+    <ability-overlay position="absolute" t="0" l="0" r="0" b="0">
+      <!-- each abilities as ability (ability.uuid) -->
+        <ability-segment
+          position="relative"
+          flex
+          f="none"
+          dnd-item="@[!dndDisabled]"
+          basic="@[ability.basic]"
+          overflow="@[ability.overflow]"
+          nature="@[ability.elements?.includes('nature')]"
+          earth="@[ability.elements?.includes('earth')]"
+          fire="@[ability.elements?.includes('fire')]"
+          frost="@[ability.elements?.includes('frost')]"
+          lightning="@[ability.elements?.includes('lightning')]"
+          multi="@[ability.elements?.length > 1]"
+          onmouseenter="showAbilityTooltip(this, ability)"
+          style="
+            --seg-ticks: @[ability.ticks];
+            --spectrum-face: @[elementSpectrum (ability.elements, 'face')];
+            --spectrum-glyph: @[elementSpectrum (ability.elements, 'glyph')];
+          "
+        >
+          <!-- each ability.chainDividers as d -->
+            <chain-divider position="absolute" style="left: @[d]"></chain-divider>
+          <!-- /each -->
+          <stack ability-icon position="relative" w="full" h="full">
+            <icon @[ability.icon] outline></icon>
+            <icon @[ability.icon]></icon>
+          </stack>
+
+          <!-- if ability.damage -->
+            <!-- each ability.chainDividers as d -->
+              <ability-damage position="absolute" fat-number chain style="--at: @[d]">
+                @[ability.damage]
+              </ability-damage>
+            <!-- /each -->
+          <!-- /if -->
+
+          <!-- if ability.healing -->
+            <!-- each ability.chainDividers as d -->
+              <ability-healing position="absolute" fat-number chain style="--at: @[d]">
+                @[ability.healing]
+              </ability-healing>
+            <!-- /each -->
+          <!-- /if -->
+
+          <crow ability-effects position="absolute" g="1">
+            <!-- each ability.statusChips as s (s.statusKey) -->
+              <component src="/components/StatusChip.html" s="@[s]" round></component>
+            <!-- /each -->
+            <!-- if ability.damage -->
+              <ability-damage fat-number>@[ability.damage]</ability-damage>
+            <!-- /if -->
+            <!-- if ability.healing -->
+              <ability-healing fat-number>@[ability.healing]</ability-healing>
+            <!-- /if -->
+          </crow>
+
+          <!-- if !ability.basic && !dndDisabled -->
+            <ability-remove position="absolute" onclick="returnAbility(event, ability)">
+              <component src="/components/buttons/Cross.html" label="Remove"></component>
+            </ability-remove>
+          <!-- /if -->
+
+          <!-- if ability.basic && !dndDisabled -->
+            <ability-lock
+              position="absolute"
+              onmouseenter="showSignatureTooltip(this)"
+              onmouseleave="hideTooltip()"
+            >
+              <button lock-button primary sm aria-label="Equipment signature ability">
+                <icon lock-closed></icon>
+              </button>
+            </ability-lock>
+          <!-- /if -->
+        </ability-segment>
+      <!-- /each -->
+    </ability-overlay>
+
+    <ability-blocked position="absolute" t="0" l="0" r="0" b="0">
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+      <ability-cell><component src="/components/Mystery.html"></component></ability-cell>
+    </ability-blocked>
+
+    <!-- if inverse -->
+      <ability-overlay
+        inverse
+        position="absolute"
+        t="0"
+        l="0"
+        r="0"
+        b="0"
+        style="--progress: @[progress]"
+      >
+        <!-- each abilities as ability (ability.uuid) -->
+          <ability-segment
+            position="relative"
+            flex
+            f="none"
+            overflow="@[ability.overflow]"
+            nature="@[ability.elements?.includes('nature')]"
+            earth="@[ability.elements?.includes('earth')]"
+            fire="@[ability.elements?.includes('fire')]"
+            frost="@[ability.elements?.includes('frost')]"
+            lightning="@[ability.elements?.includes('lightning')]"
+            multi="@[ability.elements?.length > 1]"
+            style="
+              --seg-ticks: @[ability.ticks];
+              --spectrum-face: @[elementSpectrum (ability.elements, 'face')];
+              --spectrum-glyph: @[elementSpectrum (ability.elements, 'glyph')];
+              --spectrum-fill: @[elementSpectrum (ability.elements, 'fill')];
+            "
+          >
+            <!-- each ability.chainDividers as d -->
+              <chain-divider position="absolute" style="left: @[d]"></chain-divider>
+            <!-- /each -->
+            <stack ability-icon position="relative" w="full" h="full">
+              <icon @[ability.icon]></icon>
+            </stack>
+          </ability-segment>
+        <!-- /each -->
+      </ability-overlay>
+    <!-- /if -->
+  </ability-track>
+</ability-bar>
+
+<style>
+  ability-track {
+    --grid-cells: 15;
+    isolation: isolate;
+  }
+
+  ability-blocked {
+    display: none;
+    grid-template-columns: repeat(var(--grid-cells), 1fr);
+    z-index: 14;
+    user-select: none;
+  }
+
+  ability-blocked ability-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--unit) * 1);
+    border: 1px dashed var(--divider);
+    margin-left: -1px;
+  }
+
+  ability-track[small] ability-blocked ability-cell:nth-child(n + 13) {
+    display: none;
+  }
+
+  ability-bar[blocked] ability-blocked {
+    display: grid;
+  }
+
+  ability-bar[blocked] ability-grid,
+  ability-bar[blocked] ability-overlay {
+    visibility: hidden;
+  }
+
+  ability-track[small] {
+    --grid-cells: 12;
+  }
+
+  ability-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-cells), 1fr);
+  }
+
+  ability-grid ability-cell {
+    display: block;
+    aspect-ratio: 2 / 3;
+    border: 1px dashed
+      oklch(
+        from var(--divider) l c h /
+          calc(alpha * clamp(0, calc(sibling-index() - var(--seg-total, 0)), 1))
+      );
+    border-left-color: oklch(
+      from var(--divider) l c h /
+        calc(
+          alpha *
+            clamp(0, calc(sibling-index() - var(--seg-total, 0) - min(var(--seg-total, 0), 1)), 1)
+        )
+    );
+    margin-left: -1px;
+  }
+
+  ability-track[small] ability-cell:nth-child(n + 13) {
+    display: none;
+  }
+
+  ability-marker-sequence {
+    top: calc(var(--unit) * -2);
+    bottom: calc(var(--unit) * -2);
+    width: 1px;
+    border-right: 1px solid oklch(from var(--foreground) 0.5 0 0);
+    transform: translateX(-1px);
+    transition: all 200ms;
+    z-index: 11;
+  }
+
+  ability-marker-max {
+    top: calc(var(--unit) * -2);
+    bottom: calc(var(--unit) * -2);
+    left: calc((100% / var(--grid-cells)) * 15);
+    width: 1px;
+    color: var(--muted-foreground);
+    border-right: 1px solid var(--muted-foreground);
+    transform: translateX(-1px);
+    transition: all 200ms;
+    z-index: 11;
+  }
+
+  ability-marker-max ability-marker-label strong {
+    color: var(--muted-foreground);
+  }
+
+  ability-marker-label {
+    bottom: 100%;
+    right: calc(var(--unit) * 1);
+    align-items: flex-end;
+    text-align: right;
+    font-size: calc(var(--unit) * 3);
+    line-height: 0.9;
+    white-space: nowrap;
+  }
+
+  ability-marker-label strong {
+    color: var(--black);
+    line-height: calc(var(--unit) * 3);
+  }
+
+  ability-overlay {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-start;
+    clip-path: inset(-100% 0 -100% -100%);
+  }
+
+  ability-segment {
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: calc(((100% / var(--grid-cells)) * var(--seg-ticks)) + 1px);
+    margin-left: -1px;
+    border: 1px solid var(--element-color, oklch(0.7 0.0144 85));
+    background: var(--face, linear-gradient(180deg, oklch(0.99 0.006 85), oklch(0.925 0.006 85)));
+    border-radius: calc(var(--unit) * 1);
+    corner-shape: bevel;
+    box-shadow:
+      inset 0 calc(var(--unit) * 0.5) 0 var(--lit, oklch(1 0 0)),
+      inset 0 calc(var(--unit) * -0.5) 0 var(--shade, oklch(0.795 0.006 85 / 0.5));
+    z-index: 10;
+  }
+
+  ability-segment[dnd-item]:not([dnd-item='false']) {
+    cursor: ew-resize;
+  }
+
+  ability-segment[basic] {
+    z-index: auto;
+  }
+
+  ability-bar {
+    will-change: transform;
+  }
+
+  ability-bar:not([minimalistic]) ability-segment[basic] {
+    border-color: oklch(from var(--foreground) 0.85 0 0);
+    background: var(--c-top, oklch(0.95 0.006 85));
+  }
+
+  ability-segment[overflow] {
+    filter: opacity(0.6);
+    box-shadow: none;
+  }
+
+  ability-bar ability-segment[multi] {
+    --element-color: var(--hue-purple);
+    --face: var(--spectrum-face);
+  }
+
+  ability-bar ability-segment[multi] [ability-icon] > icon {
+    background: var(--spectrum-glyph);
+  }
+
+  [ability-icon] > icon {
+    font-size: clamp(calc(var(--unit) * 5), 3.6vw, calc(var(--unit) * 10));
+    background: linear-gradient(
+      180deg,
+      var(--glyph-top, oklch(0.755 0.012 85)),
+      var(--glyph-bot, oklch(0.535 0.0144 85))
+    );
+    filter: drop-shadow(0 calc(var(--unit) * -0.25) 0 var(--lit, oklch(1 0 0)))
+      drop-shadow(
+        0 calc(var(--unit) * 0.25) calc(var(--unit) * 0.4) var(--shade, oklch(0.795 0.006 85 / 0.5))
+      )
+      drop-shadow(0 0 1px var(--glyph-edge, oklch(0.405 0.0144 85 / 0.6)))
+      drop-shadow(0 0 1px var(--glyph-edge, oklch(0.405 0.0144 85 / 0.6)));
+  }
+
+  [ability-icon] > icon[outline] {
+    display: none;
+    background: var(--glyph-edge);
+    transform: scale(1.1);
+    filter: none;
+  }
+
+  ability-bar:not([minimalistic])
+    ability-segment:is([fire], [frost], [earth], [nature], [lightning])
+    [ability-icon]
+    > icon[outline],
+  ability-segment[dnd-ghost]:is([fire], [frost], [earth], [nature], [lightning])
+    [ability-icon]
+    > icon[outline],
+  ability-segment[dnd-preview]:is([fire], [frost], [earth], [nature], [lightning])
+    [ability-icon]
+    > icon[outline] {
+    display: block;
+  }
+
+  ability-track[small] [ability-icon] > icon {
+    font-size: calc(var(--unit) * 3);
+  }
+
+  [ability-effects] {
+    bottom: calc(var(--unit) * 2);
+    right: calc(var(--unit) * 2);
+  }
+
+  [ability-effects] status-chip[round] {
+    transform: none;
+  }
+
+  ability-segment ability-damage[fat-number],
+  ability-segment ability-healing[fat-number] {
+    font-family: var(--font-display, sans-serif);
+    font-size: clamp(calc(var(--unit) * 3), 2.2vw, calc(var(--unit) * 5));
+    line-height: 1;
+    filter: drop-shadow(0 0.5px 0.5px var(--scrim-2));
+    pointer-events: none;
+  }
+
+  ability-segment ability-damage[chain],
+  ability-segment ability-healing[chain] {
+    bottom: calc(var(--unit) * 2);
+    left: var(--at);
+    transform: translateX(calc(-100% - var(--unit) * 2));
+  }
+
+  ability-segment ability-damage[fat-number] {
+    color: var(--white);
+  }
+
+  ability-segment ability-healing[fat-number] {
+    color: oklch(from var(--green) 0.95 calc(c * 0.35) h);
+  }
+
+  ability-remove,
+  ability-lock {
+    top: calc(var(--unit) * 0.75);
+    right: calc(var(--unit) * 0.75);
+    opacity: 0;
+    transform: scale(0.6);
+    transform-origin: top right;
+    pointer-events: none;
+    transition:
+      opacity 120ms ease,
+      transform 120ms ease;
+    z-index: 13;
+  }
+
+  ability-remove [cross-button] {
+    cursor: pointer;
+  }
+
+  [lock-button] {
+    cursor: help;
+    background-color: oklch(from var(--muted-foreground) l c h / 0.12);
+    color: var(--muted-foreground);
+    box-shadow: inset 0 0 0 1px oklch(from var(--muted-foreground) l c h / 0.2);
+  }
+
+  body[input-mode='desktop'] ability-bar:hover ability-overlay[dnd-zone] ability-remove,
+  body[input-mode='desktop'] ability-bar:hover ability-overlay[dnd-zone] ability-lock,
+  body[input-mode='touch'] ability-overlay[dnd-zone] ability-remove,
+  body[input-mode='touch'] ability-overlay[dnd-zone] ability-lock {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+
+  ability-segment chain-divider {
+    top: 0;
+    bottom: 0;
+    width: 0;
+    border-right: 1px dashed oklch(from var(--foreground) 0.85 0 0);
+    pointer-events: none;
+  }
+
+  ability-bar:not([minimalistic]) ability-track::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 11;
+    pointer-events: none;
+    clip-path: inset(0 calc(100% - 100% * var(--filled) / var(--grid-cells)) 0 0);
+    background: repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc(100% / var(--grid-cells) - 1px),
+      oklch(from var(--ink, oklch(0.465 0.0144 85)) l c h / 0.16)
+        calc(100% / var(--grid-cells) - 1px),
+      oklch(from var(--ink, oklch(0.465 0.0144 85)) l c h / 0.16) calc(100% / var(--grid-cells))
+    );
+  }
+
+  ability-bar[minimalistic] {
+    padding-inline: 0;
+  }
+
+  ability-bar[minimalistic] ability-grid {
+    display: none;
+  }
+
+  ability-bar[minimalistic] ability-track {
+    height: calc(var(--unit) * 6);
+  }
+
+  ability-bar[minimalistic] ability-segment {
+    flex: var(--seg-ticks);
+    width: auto;
+    min-width: 0;
+    background: var(--c-top, oklch(0.86 0 0));
+    border-color: oklch(from var(--element-color, oklch(0.72 0 0)) 0.72 calc(c * 0.5) h);
+    border-radius: 0;
+    corner-shape: normal;
+    box-shadow: none;
+  }
+
+  ability-bar[minimalistic] ability-segment:first-child {
+    margin-left: 0;
+  }
+
+  ability-bar[minimalistic] ability-segment[overflow] {
+    display: none;
+  }
+
+  ability-bar[minimalistic] [ability-icon] {
+    container-type: size;
+    min-width: 0;
+  }
+
+  ability-bar[minimalistic] [ability-icon] > icon {
+    font-size: min(78cqh, 100cqw);
+    mask-size: contain;
+    mask-position: center;
+    background: var(--ink, oklch(0.5 0 0));
+    filter: none;
+  }
+
+  ability-bar[minimalistic] ability-damage,
+  ability-bar[minimalistic] ability-healing {
+    display: none;
+  }
+
+  ability-bar[minimalistic] [ability-effects] {
+    display: none;
+  }
+
+  ability-overlay[inverse] {
+    z-index: 12;
+    pointer-events: none;
+    clip-path: inset(0 calc(100% - var(--progress, 0) * 100%) 0 0);
+  }
+
+  ability-overlay[inverse] ability-segment {
+    background: var(--inverse-face, oklch(0.5 0 0));
+  }
+
+  ability-overlay[inverse] ability-segment[fire],
+  ability-overlay[inverse] ability-segment[frost],
+  ability-overlay[inverse] ability-segment[earth],
+  ability-overlay[inverse] ability-segment[nature],
+  ability-overlay[inverse] ability-segment[lightning] {
+    --inverse-face: oklch(from var(--element-color) 0.48 0.08 h);
+    --inverse-glyph: oklch(from var(--element-color) 0.95 0.025 h);
+  }
+
+  ability-overlay[inverse] [ability-icon] > icon {
+    background: var(--inverse-glyph, oklch(0.96 0 0));
+  }
+
+  /* Hybrid abilities sweep the minimalistic bar too: the track reads light and
+     the clipped progress fill reads vivid, each across the ability's hues. */
+  ability-bar[minimalistic] ability-segment[multi] {
+    background: var(--spectrum-face);
+  }
+
+  ability-overlay[inverse] ability-segment[multi] {
+    background: var(--spectrum-fill);
+  }
+
+  ability-overlay[inverse] ability-segment[multi] [ability-icon] > icon {
+    background: var(--spectrum-face);
+  }
+</style>
diff --git a/components/AbilityCell.html b/components/AbilityCell.html
new file mode 100644
index 00000000..20a4a4a0
--- /dev/null
+++ b/components/AbilityCell.html
@@ -0,0 +1,161 @@
+<ability-tile
+  position="relative"
+  flex
+  large="@[large]"
+  nature="@[ability.elements?.includes('nature')]"
+  earth="@[ability.elements?.includes('earth')]"
+  fire="@[ability.elements?.includes('fire')]"
+  frost="@[ability.elements?.includes('frost')]"
+  lightning="@[ability.elements?.includes('lightning')]"
+  multi="@[ability.elements?.length > 1]"
+  onmouseenter="showAbilityTooltip(this, ability)"
+  onmouseleave="hideTooltip()"
+  style="
+    --spectrum-face: @[elementSpectrum (ability.elements, 'face')];
+    --spectrum-glyph: @[elementSpectrum (ability.elements, 'glyph')];
+  "
+>
+  <stack ability-glyph>
+    <icon @[ability.icon] outline></icon>
+    <icon @[ability.icon]></icon>
+  </stack>
+  <ability-tile-ticks position="absolute" px="2">
+    <span>@[ability.ticks]</span>
+  </ability-tile-ticks>
+  <crow vertical ability-tile-stat position="absolute" g="1">
+    <!-- each ability.statusChips as s (s.statusKey) -->
+      <component src="/components/StatusChip.html" s="@[s]" round></component>
+    <!-- /each -->
+    <!-- if ability.damage -->
+      <ability-tile-damage fat-number>@[ability.damage]</ability-tile-damage>
+    <!-- /if -->
+    <!-- if ability.healing -->
+      <ability-tile-healing fat-number>@[ability.healing]</ability-tile-healing>
+    <!-- /if -->
+  </crow>
+</ability-tile>
+
+<style>
+  ability-tile {
+    width: calc(var(--unit) * 10);
+    height: calc(var(--unit) * 10);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    background: var(--face, linear-gradient(180deg, oklch(0.99 0.006 85), oklch(0.925 0.006 85)));
+    border: 1px solid var(--edge, oklch(0.825 0.011 85));
+    border-radius: calc(var(--unit) * 1);
+    corner-shape: bevel;
+    box-shadow:
+      inset 0 calc(var(--unit) * 0.5) 0 var(--lit, oklch(1 0 0)),
+      inset 0 calc(var(--unit) * -0.5) 0 var(--shade, oklch(0.795 0.006 85 / 0.5));
+    cursor: default;
+    transition:
+      transform 90ms ease,
+      box-shadow 90ms ease;
+  }
+
+  ability-tile[pressed] {
+    transform: translateY(calc(var(--unit) * 0.5));
+    box-shadow: inset 0 calc(var(--unit) * 0.5) 0 var(--lit, oklch(1 0 0));
+  }
+
+  ability-tile[large] {
+    width: calc(var(--unit) * 20);
+    height: calc(var(--unit) * 20);
+  }
+
+  ability-tile[multi] {
+    --element-color: var(--hue-purple);
+    --face: var(--spectrum-face);
+  }
+
+  ability-tile[multi] [ability-glyph] icon {
+    background: var(--spectrum-glyph);
+  }
+
+  ability-tile [ability-glyph] icon {
+    font-size: calc(var(--unit) * 6);
+    background: linear-gradient(
+      180deg,
+      var(--glyph-top, oklch(0.755 0.012 85)),
+      var(--glyph-bot, oklch(0.535 0.0144 85))
+    );
+    filter: drop-shadow(0 calc(var(--unit) * -0.25) 0 var(--lit, oklch(1 0 0)))
+      drop-shadow(
+        0 calc(var(--unit) * 0.25) calc(var(--unit) * 0.4) var(--shade, oklch(0.795 0.006 85 / 0.5))
+      )
+      drop-shadow(0 0 1px var(--glyph-edge, oklch(0.405 0.0144 85 / 0.6)))
+      drop-shadow(0 0 1px var(--glyph-edge, oklch(0.405 0.0144 85 / 0.6)));
+  }
+
+  ability-tile [ability-glyph] icon[outline] {
+    display: none;
+    background: var(--glyph-edge);
+    transform: scale(1.1);
+    filter: none;
+  }
+
+  ability-tile[fire] [ability-glyph] icon[outline],
+  ability-tile[frost] [ability-glyph] icon[outline],
+  ability-tile[earth] [ability-glyph] icon[outline],
+  ability-tile[nature] [ability-glyph] icon[outline],
+  ability-tile[lightning] [ability-glyph] icon[outline] {
+    display: block;
+  }
+
+  ability-tile[large] [ability-glyph] icon {
+    font-size: clamp(calc(var(--unit) * 5), 3.6vw, calc(var(--unit) * 10));
+  }
+
+  @media (width <= 768px) {
+    ability-tile[large] {
+      width: calc(var(--unit) * 14);
+      height: calc(var(--unit) * 14);
+    }
+  }
+
+  ability-tile[large] ability-tile-ticks {
+    width: calc(var(--unit) * 5);
+    height: calc(var(--unit) * 5);
+    font-size: calc(var(--unit) * 3);
+  }
+
+  [ability-tile-stat] {
+    bottom: calc(var(--unit) * 1);
+    right: calc(var(--unit) * 1);
+  }
+
+  [ability-tile-stat]:empty {
+    display: none;
+  }
+
+  [ability-tile-stat] status-chip[round] {
+    transform: none;
+  }
+
+  ability-tile:not([large]) [ability-tile-stat] status-chip[round] {
+    display: none;
+  }
+
+  ability-tile-damage[fat-number],
+  ability-tile-healing[fat-number] {
+    font-family: var(--font-display, sans-serif);
+    font-size: calc(var(--unit) * 3);
+    line-height: 1;
+    filter: drop-shadow(0 0.5px 0.5px var(--scrim-2));
+  }
+
+  ability-tile[large] ability-tile-damage[fat-number],
+  ability-tile[large] ability-tile-healing[fat-number] {
+    font-size: calc(var(--unit) * 4.5);
+  }
+
+  ability-tile-damage[fat-number] {
+    color: var(--white);
+  }
+
+  ability-tile-healing[fat-number] {
+    color: oklch(from var(--green) 0.95 calc(c * 0.35) h);
+  }
+</style>
diff --git a/components/AbilityDesignsContent.html b/components/AbilityDesignsContent.html
new file mode 100644
index 00000000..bd5ce371
--- /dev/null
+++ b/components/AbilityDesignsContent.html
@@ -0,0 +1,429 @@
+<script type="module">
+  import { ALL_ABILITIES } from '/js/constants/ABILITIES.js';
+  import { ALL_ELEMENTS } from '/js/constants/ELEMENTS.js';
+  import STATUS_EFFECTS from '/js/constants/STATUS_EFFECTS.js';
+  import { abilityTooltipProps } from '/js/tooltip.js';
+  import { statusEffectCategory } from '/js/helpers.js';
+  import { buildAbilityBarItems, calculateLastTick } from '/js/utils.js';
+
+  const SAMPLE = { damage: 20, maxHealth: 100, maxArmor: 10 };
+
+  const cornerStat = (p, kind) => {
+    if (p.damage) return { type: 'damage', value: String(p.damage.amount) };
+    if (p.healing) return { type: 'healing', value: '+' + p.healing.amount };
+    if (kind) return { type: kind, face: kind };
+    return { type: 'none' };
+  };
+
+  const build = (id) => {
+    const raw = ALL_ABILITIES[id];
+    const p = abilityTooltipProps({ id }, SAMPLE);
+    const kind = statusEffectCategory(raw.statusEffects, STATUS_EFFECTS);
+    return {
+      id,
+      icon: raw.icon,
+      ticks: p.ticks,
+      tickArray: Array.from({ length: p.ticks }, (_, i) => i),
+      corner: cornerStat(p, kind),
+    };
+  };
+
+  const MAX_TICKS = 12;
+  const hydrate = (id, i) => {
+    const raw = ALL_ABILITIES[id];
+    const p = abilityTooltipProps({ id }, SAMPLE);
+    return {
+      uuid: `${id}-${i}`,
+      id,
+      name: raw.name,
+      ticks: p.ticks,
+      icon: raw.icon,
+      basic: !!raw.basic,
+      elements: raw.elements || [],
+      statusEffects: raw.statusEffects || [],
+      damage: p.damage?.amount || 0,
+      healing: p.healing?.amount || 0,
+    };
+  };
+
+  const hero = build('swing');
+  const chosen = ['swing', 'alorasTouch', 'demoralizingShout'].map(hydrate);
+  const barItems = buildAbilityBarItems(chosen, MAX_TICKS).map((it, i) => ({
+    ...it,
+    damage: chosen[i].damage,
+    healing: chosen[i].healing,
+  }));
+  const lastTick = calculateLastTick(barItems, MAX_TICKS);
+
+  const finalists = [
+    { tag: 'sheen', n: 'Top Sheen' },
+    { tag: 'basicgray', n: 'Basic Gray' },
+    { tag: 'cool', n: 'Cool Grey' },
+    { tag: 'coolgloss', n: 'Cool Gloss' },
+    { tag: 'slate', n: 'Slate Tint' },
+  ];
+  const elements = Object.entries(ALL_ELEMENTS).map(([tag, e]) => ({ tag, n: e.name }));
+  // Each visible render carries everything it needs (shared hero/bar data plus
+  // the gloss flag) so the loop never reaches back into component state. The
+  // chosen finalist renders first; the elemental variations always follow.
+  const makeVisible = (colors, gloss) =>
+    colors.map((c) => ({ tag: c.tag, n: c.n, gloss, hero, barItems, lastTick }));
+
+  const chosenList = (color, gloss) =>
+    makeVisible([finalists.find((c) => c.tag === color), ...elements], gloss);
+
+  const s =
+    $[
+      component({
+        finalists,
+        color: 'cool',
+        gloss: false,
+        visible: chosenList('cool', false),
+      })
+    ];
+
+  const refresh = () => {
+    s.visible = chosenList(s.color, s.gloss);
+  };
+
+  window.setGloss = (on) => {
+    s.gloss = on;
+    refresh();
+  };
+  window.setColor = (value) => {
+    s.color = value;
+    refresh();
+  };
+</script>
+
+<ability-designs>
+  <card design-controls>
+    <label control-row>
+      <input
+        type="checkbox"
+        role="switch"
+        onchange="setGloss(this.checked)"
+        checked="@[this.gloss]"
+      />
+      <span>Gloss</span>
+    </label>
+
+    <label control-row>
+      <span>Variation</span>
+      <label>
+        <select onchange="setColor(this.value)">
+          <!-- each this.finalists as f -->
+            <option value="@[f.tag]" selected="@[f.tag === 'cool']">@[f.n]</option>
+          <!-- /each -->
+        </select>
+      </label>
+    </label>
+  </card>
+
+  <design-renders>
+    <!-- each this.visible as c (c.tag) -->
+      <design-render @[c.tag] gloss="@[c.gloss]">
+        <render-label>@[c.n]</render-label>
+        <stack-slot @[c.hero.corner.type] style="--ticks: @[c.hero.ticks]">
+          <stack-layer back></stack-layer>
+          <stack-layer mid></stack-layer>
+          <stack-face>
+            <tile-ticks>
+              <!-- each c.hero.tickArray as t -->
+                <tile-tick></tile-tick>
+              <!-- /each -->
+            </tile-ticks>
+            <tile-glyph><icon @[c.hero.icon]></icon></tile-glyph>
+            <tile-stat>
+              <!-- if c.hero.corner.value -->
+                <stat-val fat-number>@[c.hero.corner.value]</stat-val>
+              <!-- /if -->
+              <!-- if c.hero.corner.face -->
+                <icon buff debuff="@[c.hero.corner.face === 'debuff']"></icon>
+              <!-- /if -->
+            </tile-stat>
+          </stack-face>
+        </stack-slot>
+
+        <ability-bar-demo>
+          <component
+            src="/components/AbilityBar.html"
+            abilities="@[c.barItems]"
+            lastTick="@[c.lastTick]"
+          >
+          </component>
+        </ability-bar-demo>
+
+        <ability-bar-demo minimalistic>
+          <render-label>Minimalistic</render-label>
+          <component
+            src="/components/AbilityBar.html"
+            abilities="@[c.barItems]"
+            lastTick="@[c.lastTick]"
+            minimalistic
+          >
+          </component>
+        </ability-bar-demo>
+      </design-render>
+    <!-- /each -->
+  </design-renders>
+</ability-designs>
+
+<style>
+  ability-designs {
+    display: block;
+    padding: calc(var(--unit) * 6) 0 calc(var(--unit) * 24);
+    --sq: calc(var(--unit) * 27);
+    --step: calc(var(--unit) * 1.5);
+    --corner: calc(var(--unit) * 6);
+  }
+
+  card[design-controls] {
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--unit) * 8);
+    width: fit-content;
+    margin-bottom: calc(var(--unit) * 10);
+  }
+  design-renders {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 12);
+  }
+  design-render {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: calc(var(--unit) * 8);
+  }
+  render-label {
+    font-family: 'Cinzel Decorative', serif;
+    font-kerning: none;
+    letter-spacing: 0.02em;
+    font-size: calc(var(--unit) * 4);
+  }
+
+  [control-row] {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    cursor: pointer;
+    font-size: calc(var(--unit) * 3.5);
+    white-space: nowrap;
+  }
+  [control-row] select {
+    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2.5);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--card);
+    color: var(--foreground);
+    font: inherit;
+    cursor: pointer;
+  }
+  [control-row] select:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  ability-designs [damage] {
+    --stat-c: var(--floater-default);
+  }
+  ability-designs [healing] {
+    --stat-c: var(--floater-heal);
+  }
+  ability-designs [buff] {
+    --stat-c: var(--status-buff);
+  }
+  ability-designs [debuff] {
+    --stat-c: var(--status-debuff);
+  }
+  ability-designs [none] {
+    --stat-c: var(--muted);
+  }
+
+  /* ---- Generic slab tokens, derived from a base L/C/H per colour ---- */
+  design-render {
+    --c-top: oklch(calc(var(--bl) + 0.035) var(--bc) var(--bh));
+    --c-bot: oklch(calc(var(--bl) - 0.03) var(--bc) var(--bh));
+    --edge: oklch(calc(var(--bl) - 0.13) calc(var(--bc) + 0.005) var(--bh));
+    --deep1: oklch(calc(var(--bl) - 0.05) var(--bc) var(--bh));
+    --deep2: oklch(calc(var(--bl) - 0.1) var(--bc) var(--bh));
+    --ink: oklch(calc(var(--bl) - 0.49) calc(var(--bc) * 2.4) var(--bh));
+    --glyph-top: oklch(calc(var(--bl) - 0.2) calc(var(--bc) * 2) var(--bh));
+    --glyph-bot: oklch(calc(var(--bl) - 0.42) calc(var(--bc) * 2.4) var(--bh));
+    --glyph-edge: oklch(calc(var(--bl) - 0.55) calc(var(--bc) * 2.4) var(--bh) / 0.6);
+    --lit: oklch(1 0 0);
+    --shade: oklch(calc(var(--bl) - 0.16) var(--bc) var(--bh) / 0.5);
+    --gloss-top: oklch(0.995 calc(var(--bc) * 0.35) var(--bh));
+    --face: linear-gradient(180deg, var(--c-top), var(--c-bot));
+  }
+  design-render[gloss] {
+    --face: linear-gradient(180deg, var(--gloss-top) 0%, var(--c-top) 38%, var(--c-bot) 100%);
+  }
+
+  design-render[sheen] {
+    --bl: 0.955;
+    --bc: 0.006;
+    --bh: 85;
+  }
+  design-render[cool] {
+    --bl: 0.95;
+    --bc: 0.009;
+    --bh: 250;
+  }
+  design-render[coolgloss] {
+    --bl: 0.95;
+    --bc: 0.011;
+    --bh: 250;
+  }
+  design-render[basicgray] {
+    --bl: 0.82;
+    --bc: 0;
+    --bh: 0;
+    --ink: oklch(0.5 0 0);
+    --glyph-top: oklch(0.58 0 0);
+    --glyph-bot: oklch(0.42 0 0);
+    --glyph-edge: oklch(0.32 0 0 / 0.55);
+  }
+  /* Element tints (nature/fire/…) come from the shared rule in index.css. */
+
+  /* Slate: the dark slab — pale rune, translucent sheen, extra depth cues. */
+  design-render[slate] {
+    --bl: 0.56;
+    --bc: 0.023;
+    --bh: 256;
+    --ink: oklch(0.96 0.018 var(--bh));
+    --glyph-top: oklch(0.92 0.022 var(--bh));
+    --glyph-bot: oklch(0.66 0.03 var(--bh));
+    --glyph-edge: oklch(0.28 0.025 var(--bh) / 0.65);
+    --lit: oklch(0.72 0.03 var(--bh) / 0.6);
+    --shade: oklch(0.38 var(--bc) var(--bh) / 0.6);
+    --gloss-top: oklch(0.78 0.03 var(--bh));
+  }
+  design-render[slate] stack-layer[back] {
+    box-shadow: calc(var(--unit) * 0.75) calc(var(--unit) * 0.75) calc(var(--unit) * 2)
+      var(--scrim-3);
+  }
+  design-render[slate] tile-tick {
+    opacity: 0.16;
+  }
+  /* Raised stone emblem: the glyph is painted with a top-lit gradient through
+     its own mask (so it has a sculpted body, not a flat tint), then ringed with
+     a dark contour and capped with a bright top lip to read as carved relief. */
+  tile-glyph icon {
+    background: linear-gradient(180deg, var(--glyph-top), var(--glyph-bot));
+    filter: drop-shadow(0 calc(var(--unit) * -0.25) 0 var(--lit))
+      drop-shadow(0 calc(var(--unit) * 0.25) calc(var(--unit) * 0.4) var(--shade))
+      drop-shadow(0 0 1px var(--glyph-edge)) drop-shadow(0 0 1px var(--glyph-edge));
+  }
+
+  stack-slot {
+    position: relative;
+    display: block;
+    width: calc(var(--sq) + var(--step) * 2);
+    height: calc(var(--sq) + var(--step) * 2);
+    flex: none;
+    cursor: pointer;
+    color: oklch(0.45 0.012 80);
+    animation: tile-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  }
+  @keyframes tile-rise {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--unit) * 2.5));
+    }
+  }
+
+  stack-layer,
+  stack-face {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--sq);
+    height: var(--sq);
+    border-radius: calc(var(--unit) * 1.25);
+    border: 1px solid var(--edge);
+    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  stack-layer[back] {
+    background: var(--deep2);
+    transform: translate(calc(var(--step) * 2), calc(var(--step) * 2));
+    box-shadow: calc(var(--unit) * 0.75) calc(var(--unit) * 0.75) calc(var(--unit) * 2)
+      var(--scrim-2);
+  }
+  stack-layer[mid] {
+    background: var(--deep1);
+    transform: translate(var(--step), var(--step));
+  }
+  stack-face {
+    overflow: hidden;
+    background: var(--face);
+    color: var(--ink);
+    box-shadow:
+      inset 0 calc(var(--unit) * 0.5) 0 var(--lit),
+      inset 0 calc(var(--unit) * -0.5) 0 var(--shade);
+  }
+
+  ability-designs stack-slot:hover stack-face,
+  ability-designs stack-slot:hover stack-layer[mid] {
+    transform: translate(calc(var(--step) * 2), calc(var(--step) * 2));
+  }
+
+  tile-ticks {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    grid-template-columns: repeat(var(--ticks), 1fr);
+    pointer-events: none;
+  }
+  tile-tick {
+    border-right: 1px solid currentColor;
+    opacity: 0.1;
+  }
+  tile-tick:last-child {
+    border-right: 0;
+  }
+
+  tile-glyph {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+  tile-glyph icon {
+    font-size: calc(var(--unit) * 10);
+  }
+
+  tile-stat {
+    position: absolute;
+    bottom: calc(var(--unit) * 2);
+    right: calc(var(--unit) * 2);
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--unit) * 0.5);
+    color: var(--stat-c);
+  }
+  tile-stat:empty {
+    display: none;
+  }
+  tile-stat stat-val[fat-number] {
+    font-family: var(--font-display, sans-serif);
+    font-size: var(--corner);
+    line-height: 1;
+    color: var(--white);
+    filter: drop-shadow(0 0.5px 0.5px var(--scrim-2));
+  }
+  tile-stat icon {
+    font-size: var(--corner);
+    --color: var(--stat-c);
+  }
+
+  ability-bar-demo {
+    display: block;
+    width: 100%;
+  }
+  ability-bar-demo[minimalistic] render-label {
+    font-size: calc(var(--unit) * 3);
+    opacity: 0.7;
+  }
+</style>
diff --git a/components/AbilityInventory.html b/components/AbilityInventory.html
new file mode 100644
index 00000000..5138e987
--- /dev/null
+++ b/components/AbilityInventory.html
@@ -0,0 +1,67 @@
+<ability-inventory has-abilities="@[abilities.length > 0]" small="@[small]">
+  <span ability-inventory-empty
+    >Abilities are obtained from your race of choice &amp; the equipment this brawler wears</span
+  >
+  <!-- each abilities as ability (ability.uuid) -->
+    <ability-inventory-cell dnd-item flex>
+      <component src="/components/AbilityCell.html" ability="@[ability]" large="@[!small]">
+      </component>
+    </ability-inventory-cell>
+  <!-- /each -->
+</ability-inventory>
+
+<style>
+  ability-inventory {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    min-height: calc(var(--unit) * 45.5);
+    gap: calc(var(--unit) * 2);
+    padding: calc(var(--unit) * 2);
+    border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+    border-radius: calc(var(--unit) * 1);
+    background: oklch(from var(--foreground) 0.96 0 0);
+    box-shadow: inset 0 1px 2px 0 var(--scrim-1);
+    align-items: center;
+    justify-content: center;
+  }
+
+  [dark] ability-inventory:not([small]) {
+    background: oklch(from var(--card) calc(l - 0.08) c h);
+    border-color: oklch(from var(--foreground) l c h / 0.18);
+  }
+
+  ability-inventory[has-abilities],
+  ability-inventory:has([dnd-placeholder]) {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  ability-inventory[has-abilities] [ability-inventory-empty],
+  ability-inventory:has([dnd-placeholder]) [ability-inventory-empty] {
+    display: none;
+  }
+
+  ability-inventory[small] {
+    min-height: 0;
+    width: auto;
+    gap: calc(var(--unit) * 1);
+    padding: 0;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+    justify-content: flex-start;
+  }
+
+  [ability-inventory-empty] {
+    color: var(--muted-foreground);
+  }
+
+  [ability-inventory-cell] {
+    flex: none;
+  }
+
+  body[input-mode='desktop'] [ability-inventory-cell] {
+    cursor: pointer;
+  }
+</style>
diff --git a/components/AbilityScalingContent.html b/components/AbilityScalingContent.html
new file mode 100644
index 00000000..95cee8d8
--- /dev/null
+++ b/components/AbilityScalingContent.html
@@ -0,0 +1,146 @@
+<script type="module">
+  import ABILITIES, { ALL_ABILITIES } from '/js/constants/ABILITIES.js';
+  import { abilityTooltipProps } from '/js/tooltip.js';
+
+  // Reference stats so damage/healing amounts scale visibly without a logged-in brawler.
+  const SAMPLE = { damage: 20, maxHealth: 100, maxArmor: 10 };
+
+  const buildBars = (mode) => {
+    const damage = mode === 'damage';
+    return Object.keys(ALL_ABILITIES)
+      .map((key) => {
+        const h = ABILITIES(key, true);
+        const amount = damage ? h.calc.damage()?.result : h.calc.healing()?.result;
+        if (!amount || amount === Infinity) return null;
+        const perTick = +((amount / h.ticks) * 100).toFixed(1);
+        const pct = Math.round(amount * 100);
+        return {
+          name: h.name || key,
+          value: perTick,
+          color: damage ? 'var(--element-fire)' : 'var(--element-nature)',
+          label: `${h.name || key}: ${pct}% of ${damage ? 'Damage' : 'max health'} over ${h.ticks} tick${h.ticks === 1 ? '' : 's'} = ${perTick}% per tick`,
+          note: `${perTick}%/tick · ${pct}% over ${h.ticks}t`,
+        };
+      })
+      .filter(Boolean)
+      .sort((a, b) => b.value - a.value);
+  };
+
+  const state = {
+    abilityChoices: Object.keys(ALL_ABILITIES),
+    chosenAbility: 'punch',
+    bars: [],
+    graphMode: 'damage',
+    graphBars: [],
+  };
+
+  const compute = (chosen) => {
+    const raw = ALL_ABILITIES[chosen];
+    const chainLink = raw.chainLink || 0;
+    const chainDividers =
+      chainLink > 1
+        ? Array.from(
+            { length: chainLink - 1 },
+            (_, j) => `${(((j + 1) / chainLink) * 100).toFixed(4)}%`,
+          )
+        : [];
+
+    return Array.from({ length: 12 }, (_, i) => {
+      const ticks = i + 1;
+      const p = abilityTooltipProps({ id: chosen, ticks }, SAMPLE);
+      return {
+        uuid: `${chosen}-${ticks}`,
+        id: chosen,
+        name: raw.name,
+        icon: raw.icon,
+        ticks: p.ticks,
+        basic: !!raw.basic,
+        elements: raw.elements || [],
+        statusEffects: raw.statusEffects || [],
+        damage: p.damage?.amount || 0,
+        healing: p.healing?.amount || 0,
+        chainDividers,
+      };
+    });
+  };
+
+  state.bars = compute(state.chosenAbility);
+  state.graphBars = buildBars(state.graphMode);
+  const s = $[component(state)];
+
+  window.changeAbility = (value) => {
+    s.chosenAbility = value;
+    s.bars = compute(value);
+  };
+
+  window.abilityGraphMode = (mode) => {
+    s.graphMode = mode;
+    s.graphBars = buildBars(mode);
+  };
+</script>
+
+<crow vertical g="4" left>
+  <component src="/components/TitleBar.html" title="Ability Scaling"></component>
+  <hr />
+
+  <label>
+    <select onchange="changeAbility(this.value)">
+      <!-- each this.abilityChoices as choice -->
+        <option value="@[choice]" selected="@[choice === this.chosenAbility]">@[choice]</option>
+      <!-- /each -->
+    </select>
+  </label>
+
+  <crow vertical left g="4" w="full" scaling-bars>
+    <!-- each this.bars as bar (bar.uuid) -->
+      <component
+        src="/components/AbilityBar.html"
+        abilities="@[[bar]]"
+        lastTick="@[bar.ticks]"
+        dndDisabled
+      >
+      </component>
+    <!-- /each -->
+  </crow>
+
+  <hr />
+
+  <scaling-graph vertical left g="3" w="full">
+    <h5 m="0">Output per tick</h5>
+    <scaling-controls>
+      <crow g="1">
+        <button
+          secondary
+          sm
+          active="@[this.graphMode === 'damage']"
+          onclick="abilityGraphMode('damage')"
+        >
+          Damage
+        </button>
+        <button
+          secondary
+          sm
+          active="@[this.graphMode === 'healing']"
+          onclick="abilityGraphMode('healing')"
+        >
+          Healing
+        </button>
+      </crow>
+    </scaling-controls>
+    <component src="/components/remote/BarGraph.html" bars="@[this.graphBars]"></component>
+  </scaling-graph>
+</crow>
+
+<style>
+  scaling-controls {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: calc(var(--unit) * 4);
+  }
+
+  scaling-graph button[active] {
+    background-color: oklch(from var(--primary) l c h / 0.25);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.4);
+  }
+</style>
diff --git a/components/AccountNameModal.html b/components/AccountNameModal.html
new file mode 100644
index 00000000..eac45bfb
--- /dev/null
+++ b/components/AccountNameModal.html
@@ -0,0 +1,68 @@
+<script type="module">
+  const s = $[component({ name: '', submitting: false })];
+
+  // Letters only, stripped live as you type — mirrors world-seed-client's account name rule.
+  window.accountNameStrip = (input) => {
+    input.value = input.value.replace(/[^A-Za-z]/g, '');
+    s.name = input.value;
+  };
+
+  window.submitAccountName = async () => {
+    if (!s.name || s.submitting) return;
+    s.submitting = true;
+    try {
+      $.accountName = await $.socket.sendAsync('user/set-account-name', {
+        token: $.token,
+        accountName: s.name.toLowerCase(),
+      });
+    } catch (error) {
+      s.submitting = false;
+      notify.error(error?.error || 'Could not set your name');
+    }
+  };
+</script>
+
+<modal-root open="@[gameStateLoaded && !accountName]" account-name-modal>
+  <kingstone h="20"></kingstone>
+  <modal-panel>
+    <account-name-form>
+      <h3 m="0" cinzel>Account Name</h3>
+      <p>Pick the name other brawlers will see in the arena — 3–8 letters, no spaces or numbers.</p>
+      <input
+        type="text"
+        oninput="accountNameStrip(this)"
+        onkeydown="if (event.key === 'Enter') submitAccountName();"
+        placeholder="Enter a name"
+        autocomplete="off"
+      />
+      <button primary disabled="@[!this.name || this.submitting]" onclick="submitAccountName()">
+        Confirm
+      </button>
+    </account-name-form>
+  </modal-panel>
+  <kingstone h="20"></kingstone>
+</modal-root>
+
+<style>
+  [account-name-modal] account-name-form {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 4);
+    width: calc(var(--unit) * 90);
+    max-width: 100%;
+    padding: calc(var(--unit) * 6);
+    background: var(--c-panel);
+    border-radius: var(--radius);
+    box-shadow: 0 calc(var(--unit) * 2) calc(var(--unit) * 6) calc(var(--unit) * -1) var(--scrim-3);
+  }
+
+  [account-name-modal] account-name-form h3 {
+    color: var(--primary);
+  }
+
+  [account-name-modal] account-name-form p {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: calc(var(--unit) * 3.5);
+  }
+</style>
diff --git a/components/AccountProgression.html b/components/AccountProgression.html
new file mode 100644
index 00000000..bdc84647
--- /dev/null
+++ b/components/AccountProgression.html
@@ -0,0 +1,940 @@
+<script type="module">
+  import { saveNow } from '/js/connectSocket.js';
+  import { isFightOutleveled } from '/js/helpers.js';
+  import { incStat, brawlerLevelReward } from '/js/utils.js';
+
+  // Scroll-to-first-claimable on open lives in js/boot.js — compiled mode runs a
+  // component's script only once per page, so the per-open trigger must come from a
+  // persistent global subscription that survives across overlay opens.
+  component({ levels: Array.from({ length: 25 }, (_, i) => i + 1) });
+
+  // Total progress along the giant XP bar, in card-pitches (0 at level 1 with no
+  // XP, 24 at level 25). The fill width is this × one card pitch (+ the leading
+  // pad), so the filled edge lands exactly on the current level's card.
+  window.accountXpProgress = (experience) => {
+    const lvl = window.getLevelByExperience(experience);
+    if (lvl >= 25) return 24;
+    const cur = window.getCurrentExperienceAtLevel(experience);
+    const next = window.getExperienceForNextLevel(lvl);
+    return lvl - 1 + (next > 0 ? Math.min(1, cur / next) : 0);
+  };
+
+  window.accountUnlockLabel = (lvl) =>
+    ({ 1: '+3 Potion slots', 5: 'Medicum', 10: 'Palaestra' })[lvl];
+
+  window.accountUnlockKey = (lvl) => ({ 1: 'potionSlot', 5: 'medicum', 10: 'palaestra' })[lvl];
+
+  window.brawlerHealthPerLevel = (lvl) => brawlerLevelReward(lvl).maxHealth;
+  window.brawlerDamagePerLevel = (lvl) => brawlerLevelReward(lvl).damage;
+
+  // Every reward icon-cell gets a hover tooltip. When you add a new reward, add its
+  // copy here and wire showRewardTooltip(this, '<key>') onto the icon-cell.
+  const REWARD_TOOLTIPS = {
+    brawlerSlot: {
+      name: 'Brawler Slot',
+      description: 'An extra slot in your ludus to field one more brawler in the arena.',
+    },
+    potionSlot: {
+      name: 'Potion Slot',
+      description: 'Carry an additional healing potion into the arena.',
+    },
+    medicum: {
+      name: 'Medicum',
+      description: 'Unlocks the Medicum, where a brawler brews healing draughts for your ludus.',
+    },
+    palaestra: {
+      name: 'Palaestra',
+      description: 'Unlocks the Palaestra, where a brawler trains to earn account experience.',
+    },
+  };
+
+  window.showRewardTooltip = (el, key) =>
+    REWARD_TOOLTIPS[key] &&
+    window.showTooltip(REWARD_TOOLTIPS[key], el, { direction: 'up', lock: true });
+
+  window.claimAccountReward = async (lvl) => {
+    const accountLevel = window.getLevelByExperience($.experience);
+    if (lvl !== $.accountRewards + 1 || lvl > accountLevel) return;
+
+    // Spring the just-claimed card up from its pressed 0.97 with a big overshoot; it
+    // lands as the reactive `claimed` flip recolours the banner gold (see the card's
+    // --banner-accent transition), so the pop and the colour change read as one beat.
+    [...document.querySelectorAll('[progression-scroll] [progression-card]')]
+      .find((c) => +c.querySelector('progression-level strong')?.textContent === lvl)
+      ?.animate(
+        [
+          { scale: '0.97' },
+          { scale: '1.12', offset: 0.42 },
+          { scale: '0.99', offset: 0.74 },
+          { scale: '1' },
+        ],
+        { duration: 500, easing: 'ease-in-out' },
+      );
+    if (lvl === accountLevel) {
+      setTimeout(() => {
+        $.overlay = {};
+      }, 500);
+    }
+    try {
+      new window.Howl({
+        src: [window.AUDIO['Special Lootbox 13']],
+        volume: $.settings.volume.master * $.settings.volume.sfx,
+      }).play();
+    } catch {}
+    const potionSlotsBefore = window.allowedNumberOfPotions();
+    $.accountRewards += 1;
+    $.coins += 100;
+    incStat('progression.accountRewards.amount');
+    incStat('economy.crystals.earned', { count: 100 });
+
+    const potionSlotsGained = window.allowedNumberOfPotions() - potionSlotsBefore;
+    if (potionSlotsGained > 0)
+      $.potions = Math.min($.potions + potionSlotsGained, window.allowedNumberOfPotions());
+
+    const isMilestone = lvl % 5 === 0 || lvl === 1;
+    const brawlerReward = brawlerLevelReward(lvl);
+    const rewards = [
+      { title: '+1 Crystal', icon: 'crystal' },
+      { title: `+${brawlerReward.maxHealth} Max health to every brawler`, icon: 'maxHealth' },
+      { title: `+${brawlerReward.damage} Damage to every brawler`, icon: 'damage' },
+      ...(isMilestone ? [{ title: '+1 Brawler slot unlocked', icon: 'brawlers' }] : []),
+      ...(potionSlotsGained > 0
+        ? [
+            {
+              title: `+${potionSlotsGained} Potion slot${potionSlotsGained > 1 ? 's' : ''} unlocked`,
+              icon: 'potion',
+            },
+          ]
+        : []),
+      ...(lvl === 5 ? [{ title: 'Medicum unlocked', icon: 'potion' }] : []),
+      ...(lvl === 10 ? [{ title: 'Palaestra unlocked', icon: 'experience' }] : []),
+    ];
+    rewards.forEach((r, i) =>
+      setTimeout(() => window.notify?.info?.(r.title, { icon: r.icon }), i * 75),
+    );
+
+    if (
+      $.currentFight &&
+      window.location.pathname.startsWith('/pve/') &&
+      isFightOutleveled($.currentFight, $.experience, $.bossHighscore)
+    ) {
+      await saveNow();
+      window.location.href = '/pve';
+    }
+  };
+</script>
+
+<carousel
+  progression-scroll
+  premium="@[isPremiumNow]"
+  style="--xp-progress: @[accountXpProgress (experience)]"
+  onclick="$.overlay = {}"
+>
+  <component
+    src="/components/buttons/OverlayClose.html"
+    onclick="
+      event.stopPropagation();
+      $.overlay = {};
+    "
+  >
+  </component>
+
+  <progression-stage>
+    <slides x scrollbar onclick="event.stopPropagation()">
+      <progression-xp>
+        <progression-xp-fill></progression-xp-fill>
+      </progression-xp>
+
+      <!-- each this.levels as lvl (lvl) -->
+        <slide>
+          <slide-center>
+            <card
+              progression-card
+              onclick="event.stopPropagation()"
+              style="--lvl: @[lvl]"
+              claimed="@[lvl <= accountRewards]"
+              reached="@[lvl <= getLevelByExperience(experience)]"
+              milestone="@[lvl % 5 === 0 || lvl === 1]"
+              level-one="@[lvl === 1]"
+              special-unlock="@[lvl === 1 || lvl === 5 || lvl === 10]"
+              premium-potion="@[lvl % 5 === 0]"
+            >
+              <progression-level>
+                <small>Level</small>
+                <strong>@[lvl]</strong>
+              </progression-level>
+
+              <progression-tier free>
+                <tier-label>Always Free</tier-label>
+                <tier-rewards>
+                  <reward-group>
+                    <group-label>Account</group-label>
+                    <reward-line>
+                      <component src="/components/IconCell.html" tip="@[{ crystal: true }]">
+                        <coin>
+                          <stack>
+                            <icon crystal back></icon>
+                            <icon crystal coin-platinum></icon>
+                          </stack>
+                        </coin>
+                      </component>
+                      <span>+1 Crystal</span>
+                    </reward-line>
+                    <reward-line milestone-only>
+                      <component src="/components/IconCell.html" tip="@[{ reward: 'brawlerSlot' }]">
+                        <icon brawlers></icon>
+                      </component>
+                      <span>+1 Brawler</span>
+                    </reward-line>
+                    <reward-line special-unlock-only>
+                      <component
+                        src="/components/IconCell.html"
+                        tip="@[{ reward: accountUnlockKey(lvl) }]"
+                      >
+                        <!-- if lvl === 10 -->
+                          <icon experience></icon>
+                        <!-- else -->
+                          <icon potion></icon>
+                        <!-- /if -->
+                      </component>
+                      <span>@[accountUnlockLabel(lvl)]</span>
+                    </reward-line>
+                  </reward-group>
+                  <reward-group>
+                    <group-label>Brawlers</group-label>
+                    <reward-line>
+                      <component src="/components/IconCell.html" tip="@[{ stat: 'maxHealth' }]">
+                        <icon maxHealth></icon>
+                      </component>
+                      <span>+@[brawlerHealthPerLevel(lvl)]</span>
+                    </reward-line>
+                    <reward-line>
+                      <component src="/components/IconCell.html" tip="@[{ stat: 'damage' }]">
+                        <icon damage></icon>
+                      </component>
+                      <span>+@[brawlerDamagePerLevel(lvl)]</span>
+                    </reward-line>
+                  </reward-group>
+                </tier-rewards>
+                <tier-action>
+                  <icon-cell progression-checkmark>
+                    <icon checkmark></icon>
+                  </icon-cell>
+                </tier-action>
+              </progression-tier>
+
+              <progression-tier premium>
+                <tier-label>Battle Pass</tier-label>
+                <tier-rewards>
+                  <reward-group heirloom-only>
+                    <group-label>Equipment</group-label>
+                    <reward-line>
+                      <eq-name-target
+                        onmouseenter="showEquipmentTooltip(this, { id: 'heirloom' })"
+                        onmouseleave="hideTooltip()"
+                      >
+                        <component
+                          src="/components/EquipmentLink.html"
+                          name="Heirloom"
+                          element="all"
+                        >
+                        </component>
+                      </eq-name-target>
+                    </reward-line>
+                  </reward-group>
+                  <reward-group premium-potion-only>
+                    <group-label>Account</group-label>
+                    <reward-line>
+                      <component src="/components/IconCell.html" tip="@[{ reward: 'potionSlot' }]">
+                        <icon potion></icon>
+                      </component>
+                      <span>+1 Potion slot</span>
+                    </reward-line>
+                  </reward-group>
+                  <tier-wip>Work in progress..</tier-wip>
+                </tier-rewards>
+                <tier-action>
+                  <icon-cell progression-checkmark premium-check>
+                    <icon checkmark></icon>
+                  </icon-cell>
+                  <icon-cell progression-lock animate-bounce-out>
+                    <icon lock-closed></icon>
+                  </icon-cell>
+                </tier-action>
+              </progression-tier>
+
+              <card-xp>
+                <card-xp-fill></card-xp-fill>
+              </card-xp>
+            </card>
+            <claim-mount
+              progression-claim
+              claimed="@[lvl <= accountRewards]"
+              reached="@[lvl <= getLevelByExperience(experience)]"
+            >
+              <component
+                src="/components/buttons/PhysicalButton.html"
+                label="Claim"
+                disabled="@[lvl > accountRewards + 1]"
+                onclick="claimAccountReward(@[lvl])"
+              ></component>
+            </claim-mount>
+          </slide-center>
+        </slide>
+      <!-- /each -->
+    </slides>
+  </progression-stage>
+
+  <!-- if !isPremiumNow -->
+    <progression-bottombar onclick="event.stopPropagation()">
+      <progression-brand>
+        <small>Season @[season] - @[seasonName(season)]</small>
+        <strong>Battle Pass</strong>
+      </progression-brand>
+      <progression-cta>
+        <progression-season-info>
+          @[daysLeftInSeason()] days left of current season.<br />
+          <!-- if passDiscount(clock.now) -->
+            Pass is
+            <mark>@[passDiscount(clock.now)]%</mark>
+            off!
+          <!-- /if -->
+          <a
+            progression-read-more
+            onclick="
+              event.stopPropagation();
+              $.overlay = { name: 'SeasonModal' };
+            "
+          >
+            Read more
+          </a>
+        </progression-season-info>
+        <button progression-purchase onclick="purchasePass()">
+          Purchase Pass — @[formatEUR(passPrice(clock.now))]
+        </button>
+      </progression-cta>
+    </progression-bottombar>
+  <!-- /if -->
+</carousel>
+
+<style>
+  [progression-scroll] {
+    --xp-card: min(calc(var(--unit) * 144), 90vw);
+    --xp-pad: calc(50vw - min(calc(var(--unit) * 72), 45vw));
+    --xp-pitch: calc(var(--xp-card) + var(--unit) * 10);
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background: var(--scrim-2);
+    box-shadow: inset 0 0 10vw var(--scrim-3);
+    backdrop-filter: blur(3px);
+    flex-direction: column;
+  }
+
+  progression-stage {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+  }
+
+  /* Giant experience bar running the length of the carousel at the same line the
+     dashes used to mark. Rendered in two parts: this element is the continuous
+     track under the cards (first in the scroll track, visible in the pad and the
+     gaps), and each card paints its own <card-xp> segment at the same line. The
+     card segment scales with the card during the claim press/pop, which is the only
+     way to keep the bar visible across the card body while the level stripe stays
+     above it — a scaled card is one atomic paint layer, so an external bar could
+     only sit wholly above or wholly below it. Widths derive from the shared --xp-*
+     values on [progression-scroll], so the fill lands exactly on a card's left edge
+     for each whole level. --xp-progress (0–24) is the level-pitch progress. */
+  progression-xp {
+    position: absolute;
+    left: 0;
+    top: calc(50% - var(--progression-sb, 0px) / 2 + var(--unit) * 2);
+    transform: translateY(-50%);
+    height: calc(var(--unit) * 3);
+    width: calc(var(--xp-pad) + 24 * var(--xp-pitch) + var(--xp-card));
+    overflow: hidden;
+    background: var(--scrim-2);
+    box-shadow: inset 0 1px 1px var(--scrim-1);
+    pointer-events: none;
+  }
+
+  progression-xp-fill {
+    display: block;
+    height: 100%;
+    width: calc(var(--xp-pad) + var(--xp-progress, 0) * var(--xp-pitch));
+    background: var(--hue-yellow);
+    transition: width 200ms ease-out;
+  }
+
+  /* Last child of the card so source order paints it above the tier surfaces (the
+     premium tier's disabled veil, top shadow and dashed border would otherwise cut
+     across it); the level stripe and Claim button ride above it via their z-index. */
+  card-xp {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(50% - var(--progression-sb, 0px) / 2 + var(--unit) * 2);
+    transform: translateY(-50%);
+    height: calc(var(--unit) * 3);
+    overflow: hidden;
+    background: var(--scrim-2);
+    box-shadow: inset 0 1px 1px var(--scrim-1);
+  }
+
+  card-xp-fill {
+    display: block;
+    height: 100%;
+    width: clamp(0px, (var(--xp-progress, 0) - var(--lvl, 1) + 1) * var(--xp-pitch), 100%);
+    background: var(--hue-yellow);
+    transition: width 200ms ease-out;
+  }
+
+  [progression-scroll] slides[x] {
+    scrollbar-color: var(--scrim-3) var(--scrim-1);
+  }
+
+  [progression-scroll] slides[x]::-webkit-scrollbar {
+    height: calc(var(--unit) * 5);
+  }
+
+  [progression-scroll] slides[x]::-webkit-scrollbar-track {
+    background: var(--scrim-1);
+    border-top: 1px solid var(--border);
+  }
+
+  [progression-scroll] slides[x]::-webkit-scrollbar-thumb {
+    background: var(--scrim-3);
+    border-radius: calc(var(--unit) * 1);
+    border: calc(var(--unit) * 0.75) solid transparent;
+    background-clip: padding-box;
+  }
+
+  [progression-scroll] slides[x]::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+    background-clip: padding-box;
+  }
+
+  [progression-scroll] slides {
+    position: relative;
+    gap: calc(var(--unit) * 10);
+    padding: 0 calc(50vw - min(calc(var(--unit) * 72), 45vw));
+    align-items: center;
+  }
+
+  [progression-scroll] slides > slide {
+    display: flex;
+    min-width: min(calc(var(--unit) * 144), 90vw);
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: center;
+  }
+
+  /* Registered so the grey→gold banner recolour can transition (a bare custom prop
+     would flip instantly) — the card's background/border read it via oklch(from …). */
+  @property --banner-accent {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: #fdb931;
+  }
+
+  [progression-scroll] [progression-card] {
+    position: relative;
+    display: grid;
+    grid-template-columns: calc(var(--unit) * 16) 1fr;
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    width: min(calc(var(--unit) * 144), 90vw);
+    height: calc(var(--unit) * 76);
+    padding: 0;
+    overflow: hidden;
+    --banner-accent: var(--gold-warm);
+    --surface-alpha: 1;
+    --foreground: oklch(0.96 0.02 85);
+    --muted-foreground: oklch(0.8 0.035 80);
+    --border: oklch(from var(--banner-accent) 0.5 min(c, 0.08) h / 0.5);
+    background: linear-gradient(
+      180deg,
+      oklch(from var(--banner-accent) 0.42 min(c, 0.08) h / var(--surface-alpha)),
+      oklch(from var(--banner-accent) 0.3 min(c, 0.07) h / var(--surface-alpha))
+    );
+    border-radius: calc(var(--unit) * 1);
+    box-shadow:
+      inset 0 0 0 1px oklch(from var(--banner-accent) 0.5 min(c, 0.08) h / var(--surface-alpha)),
+      inset 0 calc(var(--unit) * 0.75) 0
+        oklch(from var(--banner-accent) 0.6 min(c, 0.1) h / var(--surface-alpha)),
+      0 calc(var(--unit) * 1) calc(var(--unit) * 4) var(--scrim-2);
+    transition:
+      --banner-accent 350ms ease,
+      scale 130ms ease;
+  }
+
+  /* Pressing the (enabled) Claim button shrinks its card; releasing hands off to the
+     claimAccountReward spring (a WAAPI pop overrides this scale mid-flight). The card
+     carries its own <card-xp> bar segment, so the scale needs no z-index juggling — the
+     bar, level stripe and Claim button all keep their layering while it animates. */
+  [progression-scroll] slide-center:has([progression-claim] button:active) [progression-card] {
+    scale: 0.97;
+  }
+
+  /* Unclaimed cards wear the muted defeat-banner scheme (neutral grey off --white),
+     so a claimed card's gold reads as the reward earned. */
+  [progression-scroll] [progression-card]:not([claimed]) {
+    --banner-accent: var(--white);
+  }
+
+  /* Levels you don't have the experience for yet recede — the surface and rewards
+     fade to 0.75 while the solid level strip stays fully legible, and they shrink a
+     touch. They render no Claim button (see the claim rule below). */
+  [progression-scroll] [progression-card]:not([reached]) {
+    --surface-alpha: 0.75;
+    scale: 0.9;
+  }
+
+  [progression-scroll] [progression-card]:not([reached]) progression-tier {
+    opacity: 0.75;
+  }
+
+  progression-level {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    position: relative;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--unit) * 0.5);
+    background: var(--sidebar);
+    color: var(--sidebar-foreground);
+    line-height: 1;
+  }
+
+  progression-level small,
+  progression-level strong {
+    color: var(--sidebar-foreground);
+  }
+
+  progression-level small {
+    font-size: calc(var(--unit) * 2.5);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+
+  progression-level strong {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 9);
+    font-weight: 500;
+    color: var(--gold-shine);
+  }
+
+  [progression-card]:not([claimed]) progression-level strong {
+    color: oklch(0.85 0.01 85);
+  }
+
+  progression-tier {
+    display: grid;
+    grid-template-columns: calc(var(--unit) * 16) 1fr calc(var(--unit) * 16);
+    align-items: center;
+    gap: calc(var(--unit) * 3);
+    padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+  }
+
+  /* No battle pass → the bottom tier reads disabled (greyscale + dimmed) and sits in a
+     deep recessed well: a hard dark lip under the experience bar that rides its top
+     edge, plus a wide shadow sinking the whole half. Hovering Purchase Pass lifts both
+     (see below). */
+  progression-tier[premium] {
+    background: oklch(from var(--foreground) l c h / 0.03);
+    border-top: 1px dashed var(--border);
+    color: var(--muted-foreground);
+    filter: grayscale(0.6);
+    opacity: 0.7;
+    box-shadow:
+      inset 0 calc(var(--unit) * 1.5) calc(var(--unit) * 2.5) var(--scrim-3),
+      inset 0 calc(var(--unit) * 7) calc(var(--unit) * 10) calc(var(--unit) * -2) var(--scrim-3);
+    transition:
+      opacity 250ms ease,
+      filter 250ms ease,
+      box-shadow 300ms ease,
+      color 250ms ease,
+      background 250ms ease;
+  }
+
+  tier-label {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 1.5);
+    font-size: calc(var(--unit) * 3);
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted-foreground);
+  }
+
+  tier-label icon {
+    font-size: calc(var(--unit) * 3.5);
+  }
+
+  tier-rewards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--unit) * 4);
+    align-items: start;
+  }
+
+  reward-group {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+    min-width: 0;
+  }
+
+  group-label {
+    font-size: calc(var(--unit) * 2.5);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted-foreground);
+    margin-bottom: calc(var(--unit) * 0.5);
+  }
+
+  reward-line {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    font-size: calc(var(--unit) * 3.5);
+    color: var(--foreground);
+  }
+
+  reward-line[milestone-only],
+  reward-line[special-unlock-only] {
+    visibility: hidden;
+  }
+
+  [progression-card][milestone] reward-line[milestone-only],
+  [progression-card][special-unlock] reward-line[special-unlock-only] {
+    visibility: visible;
+  }
+
+  reward-group[heirloom-only] {
+    display: none;
+  }
+
+  [progression-card][level-one] reward-group[heirloom-only] {
+    display: flex;
+  }
+
+  reward-group[premium-potion-only] {
+    visibility: hidden;
+  }
+
+  [progression-card][premium-potion] reward-group[premium-potion-only] {
+    visibility: visible;
+  }
+
+  tier-wip {
+    grid-column: 1 / -1;
+    color: var(--muted-foreground);
+    font-style: italic;
+    font-size: calc(var(--unit) * 3.5);
+  }
+
+  [progression-card]:is([level-one], [premium-potion]) tier-wip {
+    display: none;
+  }
+
+  progression-tier[premium] icon-cell:not([progression-lock]):not([progression-checkmark]) {
+    background: oklch(from var(--foreground) l c h / 0.05);
+    box-shadow: inset 0 0 0 1px var(--border);
+    transition:
+      background 250ms ease,
+      box-shadow 250ms ease;
+  }
+
+  progression-tier[premium] icon-cell:not([progression-lock]):not([progression-checkmark]) icon {
+    color: var(--muted-foreground);
+    transition: color 250ms ease;
+  }
+
+  tier-action {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  [progression-lock],
+  [progression-checkmark] {
+    width: calc(var(--unit) * 12);
+    height: calc(var(--unit) * 12);
+    margin-right: calc(var(--unit) * 4);
+    background: oklch(from var(--foreground) l c h / 0.05);
+    box-shadow: inset 0 0 0 1px var(--border);
+    color: var(--muted-foreground);
+  }
+
+  [progression-lock] icon,
+  [progression-checkmark] icon {
+    font-size: calc(var(--unit) * 6);
+  }
+
+  [progression-checkmark] {
+    display: none;
+  }
+
+  [progression-card][claimed] [progression-checkmark]:not([premium-check]),
+  [progression-scroll][premium] [progression-card][claimed] [premium-check] {
+    display: flex;
+    background: oklch(from var(--hue-green) calc(l + 0.1) c h / 0.15);
+    box-shadow: inset 0 0 0 1px oklch(from var(--hue-green) l c h / 0.3);
+    color: var(--hue-green);
+  }
+
+  progression-tier[premium] tier-action {
+    position: relative;
+  }
+
+  [premium-check] {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  [progression-scroll] slide-center {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  [progression-claim] {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+    display: inline-flex;
+  }
+
+  [progression-claim][claimed],
+  [progression-claim]:not([reached]) {
+    display: none;
+  }
+
+  /* Owning the pass — or previewing it by hovering Purchase Pass — lifts the disabled
+     veil off the bottom tier: full opacity/colour and the experience-bar shadow eases
+     away. No recolour; it simply stops looking disabled. */
+  [progression-scroll]:has([progression-purchase]:hover) progression-tier[premium],
+  [progression-scroll][premium] progression-tier[premium] {
+    opacity: 1;
+    filter: none;
+    color: var(--foreground);
+    box-shadow: inset 0 0 0 0 transparent;
+  }
+
+  [progression-scroll]:has([progression-purchase]:hover)
+    progression-tier[premium]
+    icon-cell:not([progression-lock]):not([progression-checkmark])
+    icon,
+  [progression-scroll][premium]
+    progression-tier[premium]
+    icon-cell:not([progression-lock]):not([progression-checkmark])
+    icon {
+    color: var(--foreground);
+  }
+
+  [progression-lock] {
+    transition: none;
+  }
+
+  [progression-scroll]:has([progression-purchase]:hover) [progression-lock],
+  [progression-scroll][premium] [progression-lock] {
+    transform: scale(0);
+    opacity: 0;
+    transition:
+      transform 250ms cubic-bezier(0.36, 0, 0.66, -0.56),
+      opacity 250ms cubic-bezier(0.36, 0, 0.66, -0.56);
+  }
+
+  progression-bottombar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--unit) * 4);
+    padding: calc(var(--unit) * 3) calc(var(--unit) * 6);
+    background: oklch(from var(--background) calc(l * 0.98) c h / 0.95);
+    backdrop-filter: blur(8px);
+    border-top: 1px solid var(--border);
+  }
+
+  progression-brand {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.1;
+  }
+
+  progression-brand small {
+    font-size: calc(var(--unit) * 2.75);
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: oklch(from var(--primary) l c h / 0.7);
+  }
+
+  progression-brand strong {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 5);
+    font-weight: 600;
+    color: var(--primary);
+  }
+
+  progression-cta {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 4);
+  }
+
+  progression-season-info {
+    font-size: calc(var(--unit) * 3);
+    line-height: 1.3;
+    text-align: right;
+    color: var(--muted-foreground);
+  }
+
+  progression-season-info mark {
+    background: oklch(from var(--hue-green) l c h / 0.12);
+    color: var(--hue-green);
+    font-weight: 700;
+  }
+
+  [progression-read-more] {
+    color: var(--primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  [progression-read-more]:hover {
+    color: oklch(from var(--primary) calc(l - 0.08) c h);
+  }
+
+  [progression-purchase] {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 1.5);
+    padding: calc(var(--unit) * 2.5) calc(var(--unit) * 5);
+    background: linear-gradient(180deg, var(--gold-warm), var(--gold-deep));
+    color: var(--white);
+    font-weight: 600;
+    font-size: calc(var(--unit) * 3.75);
+    box-shadow:
+      inset 0 1px 0 var(--gold-shine),
+      inset 0 -1px 0 var(--gold-shadow),
+      0 1px 2px var(--scrim-2);
+    cursor: pointer;
+  }
+
+  [progression-purchase]:hover {
+    background: linear-gradient(180deg, var(--gold-shine), var(--gold-warm));
+  }
+
+  @media (width <= 768px) {
+    progression-xp,
+    card-xp {
+      display: none;
+    }
+
+    [progression-scroll] slides {
+      padding: 0 calc(50vw - 35vw);
+    }
+
+    [progression-scroll] slides > slide {
+      min-width: 70vw;
+    }
+
+    [progression-scroll] [progression-card] {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto;
+      width: 70vw;
+      height: auto;
+    }
+
+    progression-level {
+      grid-column: 1;
+      grid-row: 1;
+      flex-direction: row;
+      justify-content: center;
+      gap: calc(var(--unit) * 2);
+      padding: calc(var(--unit) * 2);
+    }
+
+    progression-level strong {
+      font-size: calc(var(--unit) * 6);
+    }
+
+    progression-level [progression-check] {
+      position: static;
+      font-size: calc(var(--unit) * 4);
+    }
+
+    progression-tier {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto;
+      justify-items: stretch;
+      gap: calc(var(--unit) * 3);
+      padding: calc(var(--unit) * 4);
+    }
+
+    progression-tier[free] {
+      grid-row: 2;
+    }
+
+    progression-tier[premium] {
+      grid-row: 3;
+    }
+
+    tier-rewards {
+      gap: calc(var(--unit) * 2);
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    reward-group {
+      min-width: 0;
+      flex: 1;
+    }
+
+    reward-line {
+      font-size: calc(var(--unit) * 3.25);
+      gap: calc(var(--unit) * 1.5);
+    }
+
+    reward-line > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    tier-action {
+      justify-content: stretch;
+    }
+
+    tier-action > button {
+      flex: 1;
+    }
+
+    progression-brand strong {
+      font-size: calc(var(--unit) * 4);
+    }
+
+    progression-bottombar {
+      padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
+    }
+
+    [progression-claim] {
+      top: calc(100% + var(--unit) * 3);
+      transform: translateX(-50%);
+    }
+  }
+</style>
diff --git a/components/ActivityBar.html b/components/ActivityBar.html
new file mode 100644
index 00000000..ba2132de
--- /dev/null
+++ b/components/ActivityBar.html
@@ -0,0 +1,67 @@
+<sticky sticky-bar reverse w="full" sm:b="8" activity-bar>
+  <!-- if combat.duration === 0 && characters.length > selectedBrawlers.length -->
+    <card-hand-clip position="absolute">
+      <card-hand-mount
+        position="absolute"
+        onpointerdown="handCardPress(event)"
+        onpointercancel="handCardCancel()"
+        onclick="handCardClick(event)"
+      >
+        <component
+          src="/components/remote/CardHand.html"
+          cards="@[brawlHandCards(characters, selectedBrawlers)]"
+          flipped="@[selectedBrawlers.length >= maxBrawlers]"
+          angle="16"
+          distance="300"
+          size="58"
+        >
+        </component>
+      </card-hand-mount>
+    </card-hand-clip>
+  <!-- /if -->
+  <crow w="full" py="4" center activity-banner>
+    <activity-hint text-center>
+      <!-- if selectedBrawlers.length -->
+        @[activeHint]
+      <!-- else -->
+        <!-- if characters.length -->
+          @[pickHint]
+        <!-- else -->
+          @[recruitHint]
+        <!-- /if -->
+      <!-- /if -->
+    </activity-hint>
+  </crow>
+</sticky>
+
+<style>
+  [activity-bar] [activity-banner] {
+    z-index: 1;
+    background: var(--bar-bg);
+  }
+
+  [activity-bar] activity-hint {
+    font-family: var(--font-heading);
+    letter-spacing: 0.04em;
+    color: var(--muted-foreground);
+  }
+
+  card-hand-clip {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    height: calc(var(--unit) * 150);
+    overflow: clip;
+    pointer-events: none;
+  }
+
+  card-hand-mount {
+    left: 50%;
+    bottom: calc(var(--unit) * 4);
+    width: calc(var(--unit) * 160);
+    height: calc(var(--unit) * 100);
+    transform: translate(-50%, calc(var(--unit) * 18));
+    pointer-events: none;
+  }
+</style>
diff --git a/components/AuthGate.html b/components/AuthGate.html
new file mode 100644
index 00000000..a970f9fd
--- /dev/null
+++ b/components/AuthGate.html
@@ -0,0 +1,33 @@
+<component src="/components/Modal.html" when="@[!socket || (token && !gameStateLoaded)]" bare>
+  <auth-gate>
+    <auth-gate-spinner>
+      <component src="/components/Spinner.html" big></component>
+    </auth-gate-spinner>
+  </auth-gate>
+</component>
+
+<!-- if socket && !token -->
+  <component src="/components/Authorization.html"></component>
+<!-- /if -->
+
+<!-- if gameStateLoaded -->
+  <slot></slot>
+<!-- /if -->
+
+<style>
+  auth-gate {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background: var(--scrim-2);
+    box-shadow: inset 0 0 10vw var(--scrim-3);
+    backdrop-filter: blur(1px);
+  }
+
+  auth-gate-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>
diff --git a/components/Authorization.html b/components/Authorization.html
new file mode 100644
index 00000000..fb4d1d00
--- /dev/null
+++ b/components/Authorization.html
@@ -0,0 +1,54 @@
+<script type="module">
+  component({
+    mode: 'login',
+    email: config.IS_DEV ? config.AUTO_EMAIL : $.settings.rememberMe ? $.settings.savedEmail : '',
+    password: config.IS_DEV
+      ? config.AUTO_PASSWORD
+      : $.settings.rememberMe
+        ? $.settings.savedPassword
+        : '',
+  });
+</script>
+
+<center-full auth-padding>
+  <auth-scene w="full">
+    <img
+      auth-logo
+      src="/static/images/ui/battleborn-logo-3405x2231.webp"
+      alt="Battleborn Brawlers"
+    />
+    <card auth-form>
+      <!-- if this.mode === 'login' -->
+        <component src="/components/Login.html" email="@[this.email]" password="@[this.password]">
+        </component>
+      <!-- /if -->
+
+      <!-- if this.mode === 'register' -->
+        <component
+          src="/components/Register.html"
+          email="@[this.email]"
+          password="@[this.password]"
+          mode="@[this.mode]"
+        >
+        </component>
+      <!-- /if -->
+
+      <!-- if this.mode === 'forgot' -->
+        <component src="/components/ForgotPassword.html" email="@[this.email]" mode="@[this.mode]">
+        </component>
+      <!-- /if -->
+
+      <crow g="2" mt="4">
+        <!-- if this.mode !== 'login' -->
+          <button primary type="button" onclick="$.this.mode = 'login'">Login</button>
+        <!-- /if -->
+        <!-- if this.mode !== 'register' -->
+          <button primary type="button" onclick="$.this.mode = 'register'">Register</button>
+        <!-- /if -->
+        <!-- if this.mode !== 'forgot' -->
+          <button primary type="button" onclick="$.this.mode = 'forgot'">Forgot password</button>
+        <!-- /if -->
+      </crow>
+    </card>
+  </auth-scene>
+</center-full>
diff --git a/components/BackButton.html b/components/BackButton.html
new file mode 100644
index 00000000..fd995f77
--- /dev/null
+++ b/components/BackButton.html
@@ -0,0 +1,12 @@
+<a back-button g="1" href="@[href]"><icon back></icon> Back</a>
+
+<style>
+  [back-button] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [back-button] icon {
+    font-size: calc(var(--unit) * 3);
+  }
+</style>
diff --git a/components/BasicConfirmation.html b/components/BasicConfirmation.html
new file mode 100644
index 00000000..9f79a8dd
--- /dev/null
+++ b/components/BasicConfirmation.html
@@ -0,0 +1,27 @@
+<component src="/components/Dialog.html">
+  <typography>
+    <p>@[overlay.text || 'Are you sure?']</p>
+  </typography>
+  <!-- if overlay.coins -->
+    <crow justify-center my="3">
+      <component src="/components/Coins.html" amount="@[overlay.coins]"></component>
+    </crow>
+  <!-- /if -->
+  <!-- if overlay.materials -->
+    <crow justify-center mb="3">
+      <component src="/components/MaterialCost.html" materials="@[overlay.materials]"></component>
+    </crow>
+  <!-- /if -->
+  <crow g="2" right mt="4">
+    <button tertiary onclick="$.overlay = {}">Cancel</button>
+    <button
+      primary
+      onclick="
+        if ($.overlay.confirm) $.overlay.confirm();
+        $.overlay = {};
+      "
+    >
+      Confirm
+    </button>
+  </crow>
+</component>
diff --git a/components/BrawlerDetailContent.html b/components/BrawlerDetailContent.html
new file mode 100644
index 00000000..18249c28
--- /dev/null
+++ b/components/BrawlerDetailContent.html
@@ -0,0 +1,381 @@
+<script type="module">
+  import CHARACTERS from '/js/constants/CHARACTERS.js';
+  import ABILITIES from '/js/constants/ABILITIES.js';
+  import {
+    calculateCombatStatsByCharacter,
+    calculateAvailableAbilitiesByCharacter,
+    calculateDefaultAbilitiesByCharacter,
+    buildAbilityBarItems,
+    buildStatGroups,
+    calculateLastTick,
+    abilityStatusChips,
+    incStat,
+  } from '/js/utils.js';
+  import { buildEquipmentSlots, unequip, refundEquipment } from '/js/equipment.js';
+  import { addAbility, removeAbility, setBarAbilities } from '/js/loadout.js';
+  import { getLevelByExperience } from '/js/level.js';
+  import { generateCombat, healFull, prepareTeams } from '/js/combat.js';
+
+  const backParam = new URLSearchParams(location.search).get('back') || '';
+  const state = {
+    currentCharacter: null,
+    currentCoreStats: null,
+    currentStatGroups: null,
+    currentSlots: [],
+    currentAbilities: [],
+    currentAvailableAbilities: [],
+    currentLastTickEnd: 0,
+    backUrl: backParam.startsWith('/') ? backParam : '',
+  };
+
+  const setupCharacter = (target) => {
+    const index = Number($.page.params.index) || 0;
+    const characterRef = $.characters[index];
+
+    if (!characterRef) {
+      if ($.gameStateLoaded) window.location.href = '/brawlers';
+      return;
+    }
+
+    const char = CHARACTERS(characterRef, true);
+    const combatStats = calculateCombatStatsByCharacter(char);
+    const slots = buildEquipmentSlots(char);
+
+    const defaultAbilities = calculateDefaultAbilitiesByCharacter(char);
+
+    const availableAbilities = calculateAvailableAbilitiesByCharacter(char);
+    const availableUuids = new Set(availableAbilities.map((a) => a.uuid));
+
+    const currentOverrides = characterRef.overrides?.abilities || [];
+    const isNonBasic = (a) => {
+      try {
+        return !ABILITIES(a, true).basic;
+      } catch {
+        return false;
+      }
+    };
+
+    // Rebuild the bar preserving where the player placed each ability: walk the
+    // current order keeping every non-basic in place, fill the remaining (basic)
+    // slots with the next default ability, then drop any non-basic whose source
+    // gear is no longer equipped. Without the position-preserving walk, surviving
+    // non-basics get yanked to slot 0 when the set changes — e.g. unequipping one
+    // of two daggers threw the other Lacerate to the front.
+    const defaultQueue = [...defaultAbilities];
+    const merged = currentOverrides
+      .map((a) => (isNonBasic(a) ? JSON.parse(JSON.stringify(a)) : defaultQueue.shift()))
+      .filter((a) => a)
+      .concat(defaultQueue)
+      .filter((a) => !isNonBasic(a) || availableUuids.has(a.uuid));
+
+    const mergedUuids = merged
+      .map((a) => a.uuid)
+      .sort()
+      .join(',');
+    const currentUuids = currentOverrides
+      .map((a) => a.uuid)
+      .sort()
+      .join(',');
+    if (mergedUuids !== currentUuids) {
+      characterRef.overrides.abilities = merged;
+    }
+
+    const activeAbilities = (characterRef.overrides?.abilities || []).map((a) =>
+      ABILITIES(a, true),
+    );
+    const usedUuids = new Set(activeAbilities.map((a) => a.uuid));
+
+    const availableNonBasic = availableAbilities
+      .filter((a) => !ABILITIES(a, true).basic && !usedUuids.has(a.uuid))
+      .map((a) => ABILITIES(a, true))
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort((a, b) => a.ticks - b.ticks)
+      .map((a) => {
+        const dmgResult = a?.calc?.damage?.()?.result;
+        const healResult = a?.calc?.healing?.()?.result;
+        return {
+          ...a,
+          damage: dmgResult ? Math.floor(combatStats.damage * dmgResult) : 0,
+          healing: healResult ? Math.floor(combatStats.maxHealth * healResult) : 0,
+          statusChips: abilityStatusChips(a),
+        };
+      });
+
+    const abilityBarItems = buildAbilityBarItems(activeAbilities, char.maxTicks, combatStats);
+    const lastTickEnd = calculateLastTick(abilityBarItems, char.maxTicks);
+
+    const canRetire = getLevelByExperience($.experience) <= 4;
+
+    target.currentCharacter = { ...char, slots, _canRetire: canRetire };
+    target.currentCoreStats = {
+      hp: combatStats.maxHealth || 0,
+      armor: combatStats.maxArmor || 0,
+      damage: combatStats.damage || 0,
+    };
+    target.currentStatGroups = buildStatGroups(combatStats, char);
+    target.currentSlots = slots;
+    target.currentAbilities = abilityBarItems;
+    target.currentAvailableAbilities = availableNonBasic;
+    target.currentLastTickEnd = lastTickEnd;
+  };
+
+  setupCharacter(state);
+  const s = $[component(state)];
+
+  $.on('afterUpdate', (current, prev) => {
+    if (
+      current.characters !== prev.characters ||
+      current.page !== prev.page ||
+      current.settings !== prev.settings
+    ) {
+      setupCharacter(s);
+    }
+  });
+
+  window.toggleDetailedView = () => {
+    $.settings = {
+      ...$.settings,
+      showDetailedCharacterView: !$.settings.showDetailedCharacterView,
+    };
+  };
+
+  window.retireCharacter = () => {
+    const char = s.currentCharacter;
+    $.overlay = {
+      name: 'confirm',
+      text: `You are retiring ${char.name}. Do you wish to proceed?`,
+      confirm: () => {
+        refundEquipment($.characters[Number($.page.params.index) || 0]);
+        incStat(`brawlers.retired.${char.id}`);
+        $.selectedBrawlers = $.selectedBrawlers.filter((uuid) => uuid !== char.uuid);
+        $.characters = $.characters.filter((c) => c.uuid !== char.uuid);
+        window.location.href = '/brawlers';
+      },
+    };
+  };
+
+  window.tryOutBuild = () => {
+    const selected = $.characters[Number($.page.params.index)];
+    if (!selected) return;
+    const snapshot = JSON.parse(JSON.stringify(selected));
+    const level = getLevelByExperience($.experience);
+    const creature = CHARACTERS('trainingDummy', true, { overrides: { level } });
+    $.combat = generateCombat(prepareTeams(healFull([snapshot]), [creature]));
+    $.overlay = { name: 'Combat' };
+  };
+
+  window.unequipSlot = (slot) => {
+    const characterRef = $.characters[Number($.page.params.index)];
+    const eq = characterRef?.overrides?.equipment?.[slot];
+    if (eq) unequip(eq, slot);
+  };
+
+  import('/js/dnd.js').then(({ default: dnd }) => {
+    dnd.init();
+
+    const characterRef = () => $.characters[Number($.page.params.index)];
+    const zoneType = () => characterRef()?.uuid || 'abilities';
+
+    // Track the actually-registered elements (not just the dnd-zone attribute):
+    // a reactive re-render can swap in a new element that still carries a stale
+    // dnd-zone attribute without being in the zone registry, which left a freshly
+    // equipped ability undraggable until a full reload. Re-register on element
+    // identity change and tear down the old registration.
+    let registeredOverlay = null;
+    let registeredGrid = null;
+    let cleanupOverlay = null;
+    let cleanupGrid = null;
+
+    const registerZones = () => {
+      const abilityOverlay = document.querySelector('ability-overlay');
+      const availableGrid = document.querySelector('ability-inventory');
+
+      if (abilityOverlay && abilityOverlay !== registeredOverlay) {
+        if (cleanupOverlay) cleanupOverlay();
+        registeredOverlay = abilityOverlay;
+        cleanupOverlay = dnd.abilityBarZone(abilityOverlay, {
+          items: () => s.currentAbilities,
+          type: zoneType(),
+          onReorder: (newItems) => setBarAbilities(characterRef()?.uuid, newItems),
+          onReceive: (item, _fromZone, insertIndex) =>
+            addAbility(
+              characterRef()?.uuid,
+              { id: item.id, uuid: item.uuid, overrides: item.overrides },
+              insertIndex,
+            ),
+        });
+      }
+
+      if (availableGrid && availableGrid !== registeredGrid) {
+        if (cleanupGrid) cleanupGrid();
+        registeredGrid = availableGrid;
+        cleanupGrid = dnd.availableAbilityZone(availableGrid, {
+          items: () => s.currentAvailableAbilities,
+          type: zoneType(),
+          onReceive: (item) => removeAbility(characterRef()?.uuid, item.uuid),
+        });
+      }
+    };
+
+    // afterUpdate is the reliable post-render hook: Vibe disconnects its
+    // MutationObserver while patching its own re-renders, so afterDomMutation
+    // (fired only from that observer) never fires for reactive updates like
+    // equipping an item. That left a freshly-revealed ability's zone element
+    // swapped-but-unregistered — undraggable until a full reload re-registered
+    // it. afterUpdate fires after every flush once the DOM is patched, so it
+    // catches zone-element swaps from reactive re-renders.
+    $.on('afterUpdate', registerZones);
+    $.on('afterDomMutation', registerZones);
+    $.on('ready', registerZones);
+    queueMicrotask(registerZones);
+  });
+</script>
+
+<page-content>
+  <!-- if this.currentCharacter -->
+    <crow vertical g="4" sm:g="8" left>
+      <crow left w="full" h="8" name-with-portrait>
+        <size-constraint hide sm:block h="16" ml="-4" mr="2">
+          <component
+            src="/components/BrawlerPortrait.html"
+            image="@[this.currentCharacter.image]"
+            x="@[this.currentCharacter.mugshot.x]"
+            y="@[this.currentCharacter.mugshot.y]"
+            name="@[this.currentCharacter.name]"
+          >
+          </component>
+        </size-constraint>
+        <component
+          src="/components/TitleBar.html"
+          title="@[this.currentCharacter.name]"
+          back="@[this.backUrl]"
+        >
+          <accordion open="@[!settings.showDetailedCharacterView]">
+            <accordion-content>
+              <component
+                src="/components/CoreStats.html"
+                hp="@[this.currentCoreStats.hp]"
+                armor="@[this.currentCoreStats.armor]"
+                damage="@[this.currentCoreStats.damage]"
+              >
+              </component>
+            </accordion-content>
+          </accordion>
+
+          <component
+            src="/components/LabeledSwitch.html"
+            label="Character&nbsp;sheet"
+            checked="@[settings.showDetailedCharacterView]"
+            onchange="toggleDetailedView()"
+          >
+          </component>
+
+          <!-- if this.currentCharacter._canRetire -->
+            <button retire-button primary sm onclick="retireCharacter()">Retire</button>
+          <!-- /if -->
+        </component>
+      </crow>
+      <hr sm:hide />
+
+      <crow left up g="4" w="full" main-content>
+        <crow vertical left f="none" avatar-col>
+          <component
+            src="/components/CharacterAvatar.html"
+            image="@[this.currentCharacter.image]"
+            size="@[this.currentCharacter.size]"
+            name="@[this.currentCharacter.name]"
+          >
+          </component>
+        </crow>
+
+        <crow vertical left f="2" detail-col>
+          <accordion open="@[settings.showDetailedCharacterView]">
+            <accordion-content>
+              <component src="/components/CharacterSheet.html" groups="@[this.currentStatGroups]">
+              </component>
+            </accordion-content>
+          </accordion>
+
+          <equipment-heading open="@[settings.showDetailedCharacterView]">
+            <equipment-heading-content>
+              <kingstone h="10"></kingstone>
+              <h5 mb="4">Equipment</h5>
+            </equipment-heading-content>
+          </equipment-heading>
+
+          <component src="/components/CharacterEquipmentList.html" slots="@[this.currentSlots]">
+          </component>
+        </crow>
+      </crow>
+
+      <kingstone h="4" sm:hide></kingstone>
+
+      <component
+        src="/components/CharacterAbilitiesSection.html"
+        abilities="@[this.currentAbilities]"
+        available="@[this.currentAvailableAbilities]"
+        lastTick="@[this.currentLastTickEnd]"
+      >
+      </component>
+    </crow>
+  <!-- /if -->
+</page-content>
+
+<component src="/components/InventoryDrawer.html"></component>
+
+<style>
+  [retire-button] {
+    background-color: oklch(from var(--destructive) l c h / 0.12);
+    color: oklch(from var(--destructive) calc(l - 0.2 * var(--theme-sign)) c h);
+    box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.2);
+  }
+
+  [retire-button]:not(:disabled):hover {
+    background-color: oklch(from var(--destructive) l c h / 0.2);
+    box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.3);
+  }
+
+  equipment-heading-content {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  [main-content] {
+    display: flex;
+    align-items: flex-start;
+    gap: calc(var(--unit) * 4);
+    width: 100%;
+  }
+
+  [name-with-portrait] {
+    align-items: center;
+  }
+
+  [name-with-portrait] brawler-portrait {
+    display: none;
+  }
+
+  [avatar-col] {
+    width: 200px;
+    flex: none;
+  }
+
+  [detail-col] {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @media (width <=768px) {
+    [main-content] {
+      flex-direction: column;
+    }
+
+    [avatar-col] {
+      display: none;
+    }
+
+    [name-with-portrait] brawler-portrait {
+      display: block;
+    }
+  }
+</style>
diff --git a/components/BrawlerPortrait.html b/components/BrawlerPortrait.html
new file mode 100644
index 00000000..9de83420
--- /dev/null
+++ b/components/BrawlerPortrait.html
@@ -0,0 +1,31 @@
+<brawler-portrait>
+  <brawler-portrait-inner glass>
+    <component
+      src="/components/Mugshot.html"
+      image="@[image]"
+      x="@[x]"
+      y="@[y]"
+      zoom="@[zoom || 4]"
+      name="@[name]"
+    >
+    </component>
+  </brawler-portrait-inner>
+</brawler-portrait>
+
+<style>
+  brawler-portrait {
+    display: block;
+    flex: none;
+    height: 100%;
+    aspect-ratio: 1;
+    padding: calc(var(--unit) * 1);
+  }
+
+  brawler-portrait-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: calc(var(--unit) * 2);
+    overflow: hidden;
+  }
+</style>
diff --git a/components/BrawlerSlot.html b/components/BrawlerSlot.html
new file mode 100644
index 00000000..bc04995d
--- /dev/null
+++ b/components/BrawlerSlot.html
@@ -0,0 +1,272 @@
+<script type="module">
+  component({ open: false });
+</script>
+
+<brawler-slot
+  block
+  w="full"
+  f="none"
+  data-brawler-uuid="@[slot.uuid || '']"
+  data-slot-key="@[slot.key]"
+  filled="@[!slot.empty]"
+  locked="@[locked]"
+>
+  <brawler-slot-card flipped="@[!slot.empty]" just-added="@[slot.justAdded]">
+    <brawler-slot-face back>
+      <crow vertical brawler-slot-empty w="full" f="none" text-center>
+        <h5>@[slot.label]</h5>
+      </crow>
+    </brawler-slot-face>
+
+    <brawler-slot-face front>
+      <crow left brawler-slot-row w="full">
+        <brawler-slot-side position="relative" f="none" sm:sm>
+          <brawler-slot-mugshot position="absolute" t="0" l="0" r="0" b="0">
+            <component
+              src="/components/Mugshot.html"
+              image="@[slot.image]"
+              x="@[slot.mugshotX]"
+              y="@[slot.mugshotY]"
+              zoom="1.4"
+            >
+            </component>
+          </brawler-slot-mugshot>
+          <component
+            src="/components/CoreStats.html"
+            hp="@[slot.hp]"
+            armor="@[slot.armor]"
+            damage="@[slot.damage]"
+            vertical
+          >
+          </component>
+        </brawler-slot-side>
+
+        <crow brawler-slot-bar w="full" position="relative">
+          <component
+            src="/components/AbilityBar.html"
+            abilities="@[slot.abilities]"
+            lastTick="@[slot.lastTick]"
+            blocked="@[blocked]"
+          >
+          </component>
+        </crow>
+
+        <crow brawler-slot-actions f="none" g="1">
+          <component
+            src="/components/buttons/DropdownButton.html"
+            sm
+            flip="@[this.open]"
+            onclick="$.this.open = !$.this.open"
+          >
+          </component>
+          <component
+            src="/components/buttons/Cross.html"
+            label="Remove"
+            onclick="
+              const uuid = event.target.closest('brawler-slot').dataset.brawlerUuid;
+              $.selectedBrawlers = $.selectedBrawlers.filter((u) => u !== uuid);
+              if (window.updateFightSlots) updateFightSlots();
+            "
+          >
+          </component>
+        </crow>
+
+        <brawler-slot-kick
+          onclick="
+            event.stopPropagation();
+            teamplayKickSlot(event);
+          "
+        >
+          <component src="/components/buttons/Cross.html" label="Kick brawler"></component>
+        </brawler-slot-kick>
+      </crow>
+    </brawler-slot-face>
+  </brawler-slot-card>
+
+  <accordion open="@[this.open]">
+    <accordion-content>
+      <crow left justify-between w="full" my="2">
+        <h5>Available abilities</h5>
+        <a
+          class="button"
+          href="/brawlers/@[slot.characterIndex]"
+          secondary
+          sm
+          onclick="
+            event.preventDefault();
+            const uuid = event.target.closest('brawler-slot').dataset.brawlerUuid;
+            const i = $.characters.findIndex((c) => c.uuid === uuid);
+            location.href = '/brawlers/' + i + '?back=' + encodeURIComponent(location.pathname);
+          "
+        >
+          Character sheet
+        </a>
+      </crow>
+      <component src="/components/AbilityInventory.html" abilities="@[slot.availableAbilities]">
+      </component>
+    </accordion-content>
+  </accordion>
+</brawler-slot>
+
+<style>
+  brawler-slot {
+    --slot-h: calc(var(--unit) * 19.5);
+    --slot-flip: 500ms cubic-bezier(0.34, 1.56, 0.5, 1);
+    display: block;
+    width: 100%;
+    perspective: calc(var(--unit) * 300);
+    container-type: inline-size;
+  }
+
+  brawler-slot:not([filled]) accordion {
+    display: none;
+  }
+
+  brawler-slot[locked] [brawler-slot-actions] {
+    display: none;
+  }
+
+  brawler-slot {
+    position: relative;
+  }
+
+  brawler-slot-kick {
+    display: none;
+    position: absolute;
+    top: calc(var(--unit) * 1);
+    right: calc(var(--unit) * 1);
+    z-index: 5;
+  }
+
+  brawler-slot-card {
+    --slot-sides: calc(var(--unit) * 48);
+    --bar-h: min(var(--slot-h), calc((100cqw - var(--slot-sides)) / 10));
+    display: grid;
+    transform-style: preserve-3d;
+  }
+
+  /* Flip-in is a one-shot animation, not a transition: a transition after the
+     entrance keyframe ran on the same `transform` won't reliably start (so the
+     2nd brawler snapped). An animation always runs fresh when newly applied, so
+     every slot flips identically. Removing [flipped] (deselect) drops the
+     animation and reverts to the base instantly — no flip-back. */
+  brawler-slot-card[flipped] {
+    transform: rotateX(180deg);
+    animation: brawler-slot-flip-in var(--slot-flip) forwards;
+  }
+
+  /* `backwards`: fills the start frame so a new invite opens from the edge with
+     no flash, without holding the end state forwards. */
+  brawler-slot-card[just-added] {
+    animation: brawler-slot-open var(--slot-flip) backwards;
+  }
+
+  @keyframes brawler-slot-flip-in {
+    from {
+      transform: rotateX(0deg);
+    }
+    to {
+      transform: rotateX(180deg);
+    }
+  }
+
+  @keyframes brawler-slot-open {
+    from {
+      transform: rotateX(90deg);
+    }
+    to {
+      transform: rotateX(0deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    brawler-slot-card[flipped],
+    brawler-slot-card[just-added] {
+      animation: none;
+    }
+  }
+
+  brawler-slot-face {
+    grid-area: 1 / 1;
+    backface-visibility: hidden;
+  }
+
+  brawler-slot-face[front] {
+    transform: rotateX(180deg);
+  }
+
+  [brawler-slot-empty] {
+    height: var(--slot-h);
+    border: 1px dashed var(--border);
+    justify-content: center;
+  }
+
+  [dark] [brawler-slot-empty] {
+    border-color: oklch(from var(--foreground) l c h / 0.28);
+  }
+
+  [brawler-slot-row] {
+    height: var(--slot-h);
+    align-items: stretch;
+    justify-content: stretch;
+  }
+
+  brawler-slot-side {
+    width: calc(var(--unit) * 24);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 calc(var(--unit) * 1);
+  }
+
+  brawler-slot-mugshot {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  [brawler-slot-bar] {
+    flex: 1;
+    min-width: 0;
+    height: var(--slot-h);
+    align-items: center;
+  }
+
+  [brawler-slot-bar] ability-bar {
+    height: var(--bar-h);
+  }
+
+  [brawler-slot-bar] ability-track,
+  [brawler-slot-bar] ability-grid {
+    height: 100%;
+  }
+
+  [brawler-slot-bar] ability-grid ability-cell {
+    aspect-ratio: auto;
+    height: 100%;
+  }
+
+  [brawler-slot-bar] ability-marker-sequence ability-marker-label,
+  [brawler-slot-bar] ability-marker-max ability-marker-label {
+    bottom: calc(100% - var(--unit) * 1);
+    flex-direction: row;
+  }
+  [brawler-slot-bar] ability-marker-max ability-marker-label span {
+    display: none;
+  }
+
+  [brawler-slot-actions] {
+    width: calc(var(--unit) * 24);
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (width <= 768px) {
+    brawler-slot-card {
+      --slot-sides: calc(var(--unit) * 24);
+    }
+
+    [brawler-slot-actions] {
+      display: none;
+    }
+  }
+</style>
diff --git a/components/BrawlerSlotList.html b/components/BrawlerSlotList.html
new file mode 100644
index 00000000..360293b4
--- /dev/null
+++ b/components/BrawlerSlotList.html
@@ -0,0 +1,10 @@
+<crow vertical w="full" g="2" mt="@[mt]">
+  <!-- each slots as slot (slot.key) -->
+    <component
+      src="/components/BrawlerSlot.html"
+      slot="@[slot]"
+      locked="@[locked]"
+      blocked="@[blocked]"
+    ></component>
+  <!-- /each -->
+</crow>
diff --git a/components/CardHandDemo.html b/components/CardHandDemo.html
new file mode 100644
index 00000000..db4b55e3
--- /dev/null
+++ b/components/CardHandDemo.html
@@ -0,0 +1,141 @@
+<script type="module">
+  const ROSTER = [
+    { name: 'Throk', image: 'troll/male-01.webp', x: 50, y: 15 },
+    { name: 'Helena', image: 'human/female-01.webp', x: 50, y: 15 },
+    { name: 'Evyn', image: 'elf/female-01.webp', x: 50, y: 15 },
+    { name: 'Brakka', image: 'dwarf/male-01.webp', x: 50, y: 15 },
+    { name: 'Nix', image: 'goblin/male-01.webp', x: 50, y: 15 },
+    { name: 'Sael', image: 'elf/male-01.webp', x: 50, y: 15 },
+    { name: 'Mira', image: 'human/male-01.webp', x: 50, y: 15 },
+    { name: 'Grit', image: 'dwarf/female-01.webp', x: 50, y: 15 },
+  ];
+
+  let nextId = 0;
+  const makeCard = (index) => {
+    const unit = ROSTER[index % ROSTER.length];
+    return {
+      id: `demo-${++nextId}`,
+      name: unit.name,
+      image: unit.image,
+      x: unit.x,
+      y: unit.y,
+    };
+  };
+
+  const s =
+    $[
+      component({
+        count: 5,
+        angle: 14,
+        distance: 300,
+        size: 116,
+        flipped: false,
+        cards: Array.from({ length: 5 }, (_, i) => makeCard(i)),
+      })
+    ];
+
+  window.setCount = (value) => {
+    const next = +value;
+    const cur = s.cards.length;
+    if (next > cur)
+      s.cards = [...s.cards, ...Array.from({ length: next - cur }, (_, k) => makeCard(cur + k))];
+    else if (next < cur) s.cards = s.cards.slice(0, next);
+    s.count = next;
+  };
+
+  window.setAngle = (value) => (s.angle = +value);
+  window.setDistance = (value) => (s.distance = +value);
+  window.setSize = (value) => (s.size = +value);
+  window.toggleFlip = () => (s.flipped = !s.flipped);
+</script>
+
+<card-hand-demo>
+  <component src="/components/TitleBar.html" title="Card Hand"></component>
+
+  <card-stage>
+    <component
+      src="/components/remote/CardHand.html"
+      cards="@[this.cards]"
+      angle="@[this.angle]"
+      distance="@[this.distance]"
+      size="@[this.size]"
+      flipped="@[this.flipped]"
+    >
+    </component>
+  </card-stage>
+
+  <card-controls>
+    <label control-row>
+      <span control-label>Cards <strong>@[this.count]</strong></span>
+      <input type="range" min="1" max="8" value="@[this.count]" oninput="setCount(this.value)" />
+    </label>
+    <label control-row>
+      <span control-label>Fan angle <strong>@[this.angle]°</strong></span>
+      <input type="range" min="0" max="24" value="@[this.angle]" oninput="setAngle(this.value)" />
+    </label>
+    <label control-row>
+      <span control-label>Arc radius <strong>@[this.distance]px</strong></span>
+      <input
+        type="range"
+        min="120"
+        max="520"
+        value="@[this.distance]"
+        oninput="setDistance(this.value)"
+      />
+    </label>
+    <label control-row>
+      <span control-label>Disc size <strong>@[this.size]px</strong></span>
+      <input type="range" min="60" max="200" value="@[this.size]" oninput="setSize(this.value)" />
+    </label>
+    <button primary onclick="toggleFlip()">@[this.flipped ? 'Undim' : 'Dim (max reached)']</button>
+  </card-controls>
+</card-hand-demo>
+
+<style>
+  card-stage {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: calc(var(--unit) * 175);
+    border-radius: var(--radius);
+    background:
+      radial-gradient(
+        ellipse at 50% 120%,
+        oklch(from var(--primary) l c h / 0.12),
+        transparent 60%
+      ),
+      var(--bar-bg);
+    box-shadow: inset 0 0 0 1px var(--scrim-1);
+    overflow: hidden;
+  }
+
+  card-controls {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(calc(var(--unit) * 56), 1fr));
+    align-items: end;
+    gap: calc(var(--unit) * 4) calc(var(--unit) * 8);
+    width: 100%;
+    padding: calc(var(--unit) * 4) 0;
+  }
+
+  card-controls [control-row] {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 2);
+  }
+
+  card-controls [control-label] {
+    display: flex;
+    justify-content: space-between;
+    font-size: calc(var(--unit) * 3.5);
+    color: var(--muted-foreground);
+  }
+
+  card-controls [control-label] strong {
+    color: var(--foreground);
+  }
+
+  card-controls button {
+    align-self: end;
+  }
+</style>
diff --git a/components/Caret.html b/components/Caret.html
new file mode 100644
index 00000000..43a66b2e
--- /dev/null
+++ b/components/Caret.html
@@ -0,0 +1 @@
+<icon chevron animate-y toggled="@[open]"></icon>
diff --git a/components/CharacterAbilitiesSection.html b/components/CharacterAbilitiesSection.html
new file mode 100644
index 00000000..0542bc89
--- /dev/null
+++ b/components/CharacterAbilitiesSection.html
@@ -0,0 +1,14 @@
+<crow vertical left w="full" g="3" ability-section>
+  <component small src="/components/TitleBar.html" title="Ability Sequence"></component>
+
+  <component src="/components/AbilityBar.html" abilities="@[abilities]" lastTick="@[lastTick]">
+  </component>
+
+  <kingstone h="2"></kingstone>
+
+  <component small src="/components/TitleBar.html" title="Ability Pool">
+    <button sm secondary onclick="tryOutBuild()">Try out build</button>
+  </component>
+
+  <component src="/components/AbilityInventory.html" abilities="@[available]"></component>
+</crow>
diff --git a/components/CharacterAvatar.html b/components/CharacterAvatar.html
new file mode 100644
index 00000000..53883332
--- /dev/null
+++ b/components/CharacterAvatar.html
@@ -0,0 +1,28 @@
+<char-portrait natural="@[natural]" style="--char-size: @[size || 1]">
+  <img data-src="/static/images/races/@[image]" alt="@[name || '']" portrait-img />
+</char-portrait>
+
+<style>
+  char-portrait {
+    display: flex;
+    align-items: flex-end;
+    aspect-ratio: 11/12;
+    width: calc(var(--unit) * 36);
+    flex: none;
+    overflow: visible;
+  }
+
+  char-portrait[natural] {
+    aspect-ratio: auto;
+    width: 100%;
+  }
+
+  char-portrait [portrait-img] {
+    max-width: 100%;
+    width: auto;
+    height: calc(100% * var(--char-size, 1));
+    object-fit: contain;
+    object-position: bottom;
+    pointer-events: none;
+  }
+</style>
diff --git a/components/CharacterEquipmentList.html b/components/CharacterEquipmentList.html
new file mode 100644
index 00000000..adcbdfca
--- /dev/null
+++ b/components/CharacterEquipmentList.html
@@ -0,0 +1,58 @@
+<script type="module">
+  import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+
+  window.equipmentRowTooltip = (eq, anchor) => {
+    if (!eq.ref) return;
+    try {
+      showTooltip(
+        equipmentTooltipProps(EQUIPMENT(eq.ref, true)),
+        anchor.querySelector('eq-link') || anchor,
+        { direction: 'up', lock: true },
+      );
+    } catch {}
+  };
+</script>
+
+<crow vertical left w="full">
+  <!-- each slots as eq -->
+    <crow left justify-between w="full" g="2" eq-row>
+      <crow left g="2">
+        <span f="none" eq-slot-label>@[eq.prettyName]</span>
+        <!-- if eq.hasItem && !eq.disabled -->
+          <eq-name-target onmouseenter="equipmentRowTooltip(eq, this)">
+            <component
+              src="/components/EquipmentLink.html"
+              level="@[eq.level]"
+              name="@[eq.itemName]"
+              element="@[eq.element]"
+            >
+            </component>
+          </eq-name-target>
+        <!-- else -->
+          <span text-muted two-hand-offhand="@[eq.disabled]">@[eq.itemName]</span>
+        <!-- /if -->
+      </crow>
+      <!-- if eq.hasItem && !eq.disabled && !readonly -->
+        <button secondary sm onclick="unequipSlot(eq.slot)">Unequip</button>
+      <!-- /if -->
+      <!-- if !eq.hasItem && !eq.disabled && !readonly -->
+        <button tertiary sm onclick="openInventory()">...</button>
+      <!-- /if -->
+    </crow>
+  <!-- /each -->
+</crow>
+
+<style>
+  [eq-slot-label] {
+    width: calc(var(--unit) * 20);
+  }
+
+  [eq-row] {
+    min-height: calc(var(--unit) * 7);
+  }
+
+  [two-hand-offhand] {
+    padding-left: calc(var(--unit) * 4);
+    font-size: calc(var(--unit) * 3.5);
+  }
+</style>
diff --git a/components/CharacterScalingContent.html b/components/CharacterScalingContent.html
new file mode 100644
index 00000000..6620035d
--- /dev/null
+++ b/components/CharacterScalingContent.html
@@ -0,0 +1,562 @@
+<script type="module">
+  import CHARACTERS, { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+  import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+  import { ALL_FIGHTS } from '/js/constants/FIGHTS.js';
+  import { STAT_LABELS, LUCKY_STATS, totalPower } from '/js/constants/STATS.js';
+  import { calculateCombatStatsByCharacter } from '/js/utils.js';
+  import { slotsInPrettyName } from '/js/equipment.js';
+  import { seededRandom } from '/js/seededRandom.js';
+  import { seasonLabel } from '/js/seasons.js';
+
+  // The compare graph projects scaling past the level cap to level 40.
+  const LEVELS = Array.from({ length: 40 }, (_, i) => i + 1);
+  const SLOT_KEYS = ['mainHand', 'offHand', 'armor', 'accessory', 'trinket'];
+  const GRAPH_STATS = [
+    'totalPower',
+    'maxHealth',
+    'maxArmor',
+    'damage',
+    'hitChance',
+    'criticalChance',
+    'criticalDamage',
+    'blockChance',
+    'dodgeChance',
+    'armorPenetration',
+    'provocation',
+  ];
+
+  // Picker taxonomy: player brawlers first, then fights bucketed by their authored
+  // minLevel. Every fight in the game is listed under exactly one band.
+  const LEVEL_BUCKETS = [
+    ['Level 1-5', 1, 5],
+    ['Level 6-10', 6, 10],
+    ['Level 11-15', 11, 15],
+    ['Level 16-20', 16, 20],
+    ['Level 21-25', 21, 25],
+    ['Level 26-30', 26, 30],
+    ['Level 31-40', 31, 40],
+  ];
+
+  const FIGHTS_BY_ID = Object.fromEntries(ALL_FIGHTS.map((f) => [f.id, f]));
+  const charPower = (ref) => ALL_CHARACTERS[ref?.id]?.power ?? 1;
+
+  const statLabel = (key) => (key === 'totalPower' ? 'Total power' : STAT_LABELS[key] || key);
+  const statValue = (stats, stat) => (stat === 'totalPower' ? totalPower(stats) : stats[stat] || 0);
+
+  // A fight's distinct enemy types (identical combatants — e.g. the four spiderlings —
+  // collapse to one), tagging the highest-power one as the boss-promotion target.
+  const fightEnemies = (fight) => {
+    const leadIdx = fight.characters.reduce(
+      (best, c, i) => (charPower(c) > charPower(fight.characters[best]) ? i : best),
+      0,
+    );
+    const leadId = fight.characters[leadIdx]?.id;
+    const seen = new Set();
+    return fight.characters
+      .filter((c) => c?.id && !seen.has(c.id) && seen.add(c.id))
+      .map((c) => ({ id: c.id, isLead: c.id === leadId }));
+  };
+  // Team-size balance (P/E) the arena applies to a fight — the "3v1" modifier.
+  const countScaleOf = (fight) => fight.maxBrawlers / fight.characters.length;
+
+  const raceImage = (image) => `/static/images/races/${image}`;
+
+  const buildCategories = () => [
+    {
+      label: 'Player brawlers',
+      entries: ($.characters || []).map((c, i) => {
+        const h = CHARACTERS(c, true);
+        return { value: `brawler:${i}`, name: `★ ${h.name}`, image: raceImage(h.image) };
+      }),
+    },
+    ...LEVEL_BUCKETS.map(([label, min, max]) => ({
+      label,
+      entries: ALL_FIGHTS.filter((f) => f.minLevel >= min && f.minLevel <= max).map((f) => {
+        const leadId = fightEnemies(f).find((e) => e.isLead)?.id || f.characters[0]?.id;
+        return {
+          value: `fight:${f.id}`,
+          name: f.name,
+          image: raceImage(ALL_CHARACTERS[leadId]?.image),
+        };
+      }),
+    })),
+  ];
+
+  // Flatten to one row list for the picker: a header row per non-empty category, then
+  // its portrait rows — avoids a nested each (single loop, direct loop-alias bindings).
+  const buildPickerRows = (categories) =>
+    categories.flatMap((cat) =>
+      cat.entries.length
+        ? [
+            { key: `h:${cat.label}`, header: cat.label },
+            ...cat.entries.map((e) => ({ key: e.value, ...e })),
+          ]
+        : [],
+    );
+
+  // One entry per category, chosen with a per-category season seed so the pick is stable
+  // across reloads yet independent of whether the async brawlers have loaded yet.
+  const seededDefaults = (categories) =>
+    categories
+      .filter((cat) => cat.entries.length)
+      .map((cat) => {
+        const rng = seededRandom(`${seasonLabel($.season || 0)}:${cat.label}`);
+        return cat.entries[Math.floor(rng() * cat.entries.length)].value;
+      });
+
+  const equipmentOverrides = (base, level, equipScaling) =>
+    Object.fromEntries(
+      SLOT_KEYS.filter((slot) => base.equipment?.[slot]?.id).map((slot) => [
+        slot,
+        { overrides: { level: equipScaling ? level : 0 } },
+      ]),
+    );
+
+  const seriesStat = (source, level, stat, charScaling, equipScaling, mods) => {
+    const base = CHARACTERS(source, true);
+    const ref = CHARACTERS(source, false, {
+      overrides: {
+        level: charScaling ? level : 1,
+        equipment: equipmentOverrides(base, level, equipScaling),
+        ...mods,
+      },
+    });
+    return statValue(calculateCombatStatsByCharacter(CHARACTERS(ref, true)), stat);
+  };
+
+  // ── Table (single character, level 1..25) ──────────────────────────────────
+  const computePool = (chosenChar, charScaling, equipScaling, isEnemy) =>
+    Array.from({ length: 25 }, (_, i) => {
+      const level = i + 1;
+      const ref = CHARACTERS(chosenChar, false, {
+        overrides: {
+          npc: isEnemy,
+          level: charScaling ? level : 1,
+          equipment: {
+            mainHand: { overrides: { level: equipScaling ? level : 0 } },
+            offHand: { overrides: { level: equipScaling ? level : 0 } },
+            armor: { overrides: { level: equipScaling ? level : 0 } },
+          },
+        },
+      });
+      const hydrated = CHARACTERS(ref, true);
+      const stats = calculateCombatStatsByCharacter(hydrated);
+      return {
+        level,
+        name: hydrated.name,
+        charLevel: hydrated.level || 0,
+        maxHealth: stats.maxHealth || 0,
+        maxArmor: stats.maxArmor || 0,
+        damage: stats.damage || 0,
+      };
+    });
+
+  const computeSlots = (chosenChar, charScaling, equipScaling) => {
+    const topRef = CHARACTERS(chosenChar, false, {
+      overrides: {
+        level: charScaling ? 25 : 1,
+        equipment: {
+          mainHand: { overrides: { level: equipScaling ? 25 : 0 } },
+          offHand: { overrides: { level: equipScaling ? 25 : 0 } },
+          armor: { overrides: { level: equipScaling ? 25 : 0 } },
+        },
+      },
+    });
+    const top = CHARACTERS(topRef, true);
+    const mainHandHydrated = top.equipment.mainHand
+      ? EQUIPMENT(top.equipment.mainHand, true)
+      : null;
+
+    return Object.entries(top.equipment).map(([slot, eq]) => {
+      const h = eq ? EQUIPMENT(eq, true) : null;
+      const real = !!h?.id;
+      const isTwoHandOff = slot === 'offHand' && mainHandHydrated?.slotsIn === 'twoHand';
+      return {
+        slot,
+        slotLabel: slotsInPrettyName(slot),
+        emptyFist: (slot === 'mainHand' || slot === 'offHand') && !real && !isTwoHandOff,
+        twoHandName: isTwoHandOff ? mainHandHydrated.name : '',
+        hasEquipment: real && !isTwoHandOff,
+        id: h?.id || '',
+        name: h?.name || '',
+        level: h?.level || 0,
+        empty: !real && !isTwoHandOff && slot !== 'mainHand' && slot !== 'offHand',
+      };
+    });
+  };
+
+  // ── Compare graph (fights + brawlers, level 1..40) ─────────────────────────
+  // A checked fight contributes two lines per distinct enemy: the plain character
+  // scaling, and the same enemy under the fight's modifiers (count-scale + boss),
+  // both sharing a colour so the border-dotted "fight" line pairs with its base.
+  const buildSeries = (keys, stat, charScaling, equipScaling) => {
+    const groups = [];
+    (keys || []).forEach((key) => {
+      if (key.startsWith('brawler:')) {
+        const ref = $.characters?.[+key.slice(8)];
+        if (ref) groups.push({ kind: 'brawler', ref });
+      } else if (key.startsWith('fight:')) {
+        const fight = FIGHTS_BY_ID[key.slice(6)];
+        if (fight) fightEnemies(fight).forEach((e) => groups.push({ kind: 'enemy', fight, ...e }));
+      }
+    });
+
+    const series = [];
+    groups.forEach((g, group) => {
+      if (g.kind === 'brawler') {
+        const h = CHARACTERS(g.ref, true);
+        series.push({
+          name: `★ ${h.name}`,
+          group,
+          values: LEVELS.map((l) => seriesStat(g.ref, l, stat, charScaling, equipScaling)),
+        });
+        return;
+      }
+      const enemyName = ALL_CHARACTERS[g.id]?.name || g.id;
+      const countScale = countScaleOf(g.fight);
+      const boss = g.isLead && g.fight.boss;
+      series.push({
+        name: `${g.fight.name} — ${enemyName}`,
+        group,
+        values: LEVELS.map((l) =>
+          seriesStat(g.id, l, stat, charScaling, equipScaling, { npc: true }),
+        ),
+      });
+      series.push({
+        name: `${g.fight.name} — ${enemyName} · fight`,
+        group,
+        border: true,
+        values: LEVELS.map((l) =>
+          seriesStat(g.id, l, stat, charScaling, equipScaling, { npc: true, countScale, boss }),
+        ),
+      });
+    });
+    return series;
+  };
+
+  const initialCategories = buildCategories();
+
+  const state = {
+    charChoices: Object.keys(ALL_CHARACTERS),
+    chosenChar: 'elfMale',
+    charScaling: true,
+    equipScaling: true,
+    isEnemy: false,
+    charPool: [],
+    charEquipmentSlots: [],
+    graphStat: 'totalPower',
+    graphCharScaling: true,
+    graphEquipScaling: true,
+    graphCategories: initialCategories,
+    pickerRows: buildPickerRows(initialCategories),
+    graphKeys: seededDefaults(initialCategories),
+    graphSeries: [],
+    graphPercent: false,
+    statOptions: GRAPH_STATS.map((key) => ({ key, label: statLabel(key) })),
+  };
+
+  state.charPool = computePool(
+    state.chosenChar,
+    state.charScaling,
+    state.equipScaling,
+    state.isEnemy,
+  );
+  state.charEquipmentSlots = computeSlots(state.chosenChar, state.charScaling, state.equipScaling);
+  state.graphSeries = buildSeries(
+    state.graphKeys,
+    state.graphStat,
+    state.graphCharScaling,
+    state.graphEquipScaling,
+  );
+  const s = $[component(state)];
+
+  const recompute = () => {
+    computePool(s.chosenChar, s.charScaling, s.equipScaling, s.isEnemy).forEach((c, i) =>
+      Object.assign(s.charPool[i], c),
+    );
+    computeSlots(s.chosenChar, s.charScaling, s.equipScaling).forEach((slot, i) =>
+      Object.assign(s.charEquipmentSlots[i], slot),
+    );
+  };
+
+  const recomputeGraph = () => {
+    s.graphSeries = buildSeries(s.graphKeys, s.graphStat, s.graphCharScaling, s.graphEquipScaling);
+    s.graphPercent = LUCKY_STATS.includes(s.graphStat);
+  };
+
+  window.changeChar = (value) => {
+    s.chosenChar = value;
+    recompute();
+  };
+  window.toggleCharScaling = (checked) => {
+    s.charScaling = checked;
+    recompute();
+  };
+  window.toggleEquipScaling = (checked) => {
+    s.equipScaling = checked;
+    recompute();
+  };
+  window.toggleEnemyScaling = (checked) => {
+    s.isEnemy = checked;
+    recompute();
+  };
+
+  window.cmpChangeStat = (value) => {
+    s.graphStat = value;
+    recomputeGraph();
+  };
+  window.cmpCharScaling = (checked) => {
+    s.graphCharScaling = checked;
+    recomputeGraph();
+  };
+  window.cmpEquipScaling = (checked) => {
+    s.graphEquipScaling = checked;
+    recomputeGraph();
+  };
+  window.cmpToggleChar = (key, checked) => {
+    s.graphKeys = checked ? [...s.graphKeys, key] : s.graphKeys.filter((k) => k !== key);
+    recomputeGraph();
+  };
+  window.cmpAll = () => {
+    s.graphKeys = s.graphCategories.flatMap((cat) => cat.entries.map((e) => e.value));
+    recomputeGraph();
+  };
+  window.cmpNone = () => {
+    s.graphKeys = [];
+    recomputeGraph();
+  };
+  window.cmpNameHover = (name) =>
+    showTooltip({ description: name, plain: true }, window.event.currentTarget, {
+      direction: 'up',
+      lock: true,
+    });
+
+  // Player brawlers arrive asynchronously after boot; when they land, fold them into
+  // the picker and — on that first arrival — seed the default brawler pick (init had
+  // none to choose from), leaving the already-seeded fight picks untouched.
+  $.on('afterUpdate', (current, prev) => {
+    if (current.characters === prev.characters) return;
+    s.graphCategories = buildCategories();
+    s.pickerRows = buildPickerRows(s.graphCategories);
+    if (
+      !prev.characters?.length &&
+      current.characters?.length &&
+      !s.graphKeys.some((k) => k.startsWith('brawler:'))
+    ) {
+      const brawlers = s.graphCategories.find((c) => c.label === 'Player brawlers');
+      const rng = seededRandom(`${seasonLabel($.season || 0)}:Player brawlers`);
+      s.graphKeys = [
+        brawlers.entries[Math.floor(rng() * brawlers.entries.length)].value,
+        ...s.graphKeys,
+      ];
+    }
+    recomputeGraph();
+  });
+</script>
+
+<crow vertical g="4" left>
+  <component src="/components/TitleBar.html" title="Character Scaling"></component>
+  <hr />
+
+  <crow left g="4">
+    <label crow left g="2" for="charScaling" text-sm>
+      <input type="checkbox" id="charScaling" checked onchange="toggleCharScaling(this.checked)" />
+      Character scaling
+    </label>
+    <label crow left g="2" for="equipScaling" text-sm>
+      <input
+        type="checkbox"
+        id="equipScaling"
+        checked
+        onchange="toggleEquipScaling(this.checked)"
+      />
+      Equipment scaling
+    </label>
+    <label crow left g="2" for="enemyScaling" text-sm>
+      <input type="checkbox" id="enemyScaling" onchange="toggleEnemyScaling(this.checked)" />
+      Enemy (NPC)
+    </label>
+  </crow>
+
+  <label>
+    <select onchange="changeChar(this.value)">
+      <!-- each this.charChoices as choice -->
+        <option value="@[choice]" selected="@[choice === this.chosenChar]">@[choice]</option>
+      <!-- /each -->
+    </select>
+  </label>
+
+  <crow vertical left g="2" w="full">
+    <!-- each this.charPool as ch -->
+      <crow left justify-between g="2" w="full">
+        <crow left g="2">
+          <span>level @[ch.level]</span>
+          <eq-tooltip-target
+            onmouseenter="showCharacterScalingTooltip(this, '@[this.chosenChar]', ch, @[this.charScaling], @[this.equipScaling], @[this.isEnemy])"
+          >
+            <component
+              src="/components/EquipmentLink.html"
+              level="@[ch.charLevel]"
+              name="@[ch.name]"
+            >
+            </component>
+          </eq-tooltip-target>
+        </crow>
+        <component
+          src="/components/CoreStats.html"
+          hp="@[ch.maxHealth]"
+          armor="@[ch.maxArmor]"
+          damage="@[ch.damage]"
+        >
+        </component>
+      </crow>
+    <!-- /each -->
+  </crow>
+
+  <crow vertical left g="2" w="full" p="4" char-equipment-block>
+    <h5>Equipment</h5>
+    <hr />
+    <!-- each this.charEquipmentSlots as s -->
+      <crow left justify-between g="2" w="full">
+        <crow left g="2">
+          <span f="none" slot-label w="20">@[s.slotLabel]</span>
+          <!-- if s.hasEquipment -->
+            <eq-tooltip-target onmouseenter="showEquipmentTooltip(this, s)">
+              <component
+                src="/components/EquipmentLink.html"
+                level="@[s.level]"
+                name="@[s.name]"
+                element="@[s.element]"
+              >
+              </component>
+            </eq-tooltip-target>
+          <!-- /if -->
+          <!-- if s.emptyFist -->
+            <span text-muted>Fist</span>
+          <!-- /if -->
+          <!-- if s.twoHandName -->
+            <span text-muted>@[s.twoHandName]</span>
+          <!-- /if -->
+          <!-- if s.empty -->
+            <span text-muted>-</span>
+          <!-- /if -->
+        </crow>
+      </crow>
+    <!-- /each -->
+  </crow>
+
+  <hr />
+
+  <scaling-graph vertical left g="3" w="full">
+    <h5 m="0">Compare — stat per level</h5>
+    <scaling-controls>
+      <label>
+        <select onchange="cmpChangeStat(this.value)">
+          <!-- each this.statOptions as opt (opt.key) -->
+            <option value="@[opt.key]" selected="@[opt.key === this.graphStat]">
+              @[opt.label]
+            </option>
+          <!-- /each -->
+        </select>
+      </label>
+      <label crow g="2" text-sm>
+        <input
+          type="checkbox"
+          checked="@[this.graphCharScaling]"
+          onchange="cmpCharScaling(this.checked)"
+        />
+        Character scaling
+      </label>
+      <label crow g="2" text-sm>
+        <input
+          type="checkbox"
+          checked="@[this.graphEquipScaling]"
+          onchange="cmpEquipScaling(this.checked)"
+        />
+        Equipment scaling
+      </label>
+      <crow g="1" f="none">
+        <button secondary sm onclick="cmpAll()">Select all</button>
+        <button secondary sm onclick="cmpNone()">Clear all</button>
+      </crow>
+      <scaling-picker>
+        <!-- each this.pickerRows as row (row.key) -->
+          <!-- if row.header -->
+            <scaling-category>@[row.header]</scaling-category>
+          <!-- /if -->
+          <!-- if !row.header -->
+            <label
+              scaling-portrait
+              onmouseenter="cmpNameHover(row.name)"
+              onmouseleave="hideTooltip()"
+            >
+              <input
+                type="checkbox"
+                checked="@[this.graphKeys.includes(row.value)]"
+                onchange="cmpToggleChar(row.value, this.checked)"
+              />
+              <img data-src="@[row.image]" alt="" />
+            </label>
+          <!-- /if -->
+        <!-- /each -->
+      </scaling-picker>
+    </scaling-controls>
+    <component
+      src="/components/remote/LineGraph.html"
+      series="@[this.graphSeries]"
+      percent="@[this.graphPercent]"
+    ></component>
+  </scaling-graph>
+</crow>
+
+<style>
+  scaling-controls {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: calc(var(--unit) * 4);
+  }
+
+  scaling-picker {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--unit) * 1) calc(var(--unit) * 3);
+    max-height: calc(var(--unit) * 72);
+    overflow-y: auto;
+    padding: calc(var(--unit) * 2);
+    border: 1px solid var(--scrim-1);
+    border-radius: calc(var(--unit) * 1);
+    flex: 1;
+    min-width: calc(var(--unit) * 60);
+  }
+
+  scaling-category {
+    flex-basis: 100%;
+    margin-top: calc(var(--unit) * 2);
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 3);
+    color: var(--muted-foreground);
+  }
+
+  scaling-category:first-child {
+    margin-top: 0;
+  }
+
+  [scaling-portrait] {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--unit) * 1);
+  }
+
+  [scaling-portrait] img {
+    width: calc(var(--unit) * 9);
+    height: calc(var(--unit) * 9);
+    object-fit: contain;
+  }
+
+  [scaling-portrait]:not(:has(input:checked)) img {
+    opacity: 0.35;
+    filter: grayscale(1);
+  }
+</style>
diff --git a/components/CharacterSheet.html b/components/CharacterSheet.html
new file mode 100644
index 00000000..014ac176
--- /dev/null
+++ b/components/CharacterSheet.html
@@ -0,0 +1,71 @@
+<stats-panel>
+  <stat-col>
+    <component
+      src="/components/StatGroup.html"
+      title="Base Stats"
+      percentage="@[false]"
+      rows="@[groups.base]"
+    >
+    </component>
+    <component
+      src="/components/StatGroup.html"
+      title="Lucky Stats"
+      percentage="@[true]"
+      rows="@[groups.lucky]"
+      subtitle="Resistances"
+      subrows="@[groups.resistances]"
+    >
+    </component>
+  </stat-col>
+  <stat-col>
+    <component
+      src="/components/StatGroup.html"
+      title="Modifiers"
+      percentage="@[true]"
+      rows="@[groups.modifiers]"
+    >
+    </component>
+    <component
+      src="/components/StatGroup.html"
+      title="Tolerance"
+      percentage="@[false]"
+      rows="@[groups.tolerance]"
+    >
+    </component>
+    <component
+      src="/components/StatGroup.html"
+      title="Other"
+      percentage="@[false]"
+      rows="@[groups.other]"
+    >
+    </component>
+  </stat-col>
+</stats-panel>
+
+<style>
+  stats-panel {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+    column-gap: calc(var(--unit) * 10);
+    width: 100%;
+  }
+
+  stats-panel stat-col {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 8);
+    min-width: 0;
+  }
+
+  @media (width <= 768px) {
+    stats-panel {
+      grid-template-columns: 1fr;
+      row-gap: calc(var(--unit) * 4);
+    }
+
+    stats-panel stat-col {
+      gap: calc(var(--unit) * 4);
+    }
+  }
+</style>
diff --git a/components/CharacterSheetDialog.html b/components/CharacterSheetDialog.html
new file mode 100644
index 00000000..f6d75866
--- /dev/null
+++ b/components/CharacterSheetDialog.html
@@ -0,0 +1,31 @@
+<component src="/components/Dialog.html" title="@[sheetDialog.heading || 'Character sheet']">
+  <sheet-dialog-body>
+    <component src="/components/CharacterSheet.html" groups="@[sheetDialog.groups]"></component>
+    <h5>Equipment</h5>
+    <component
+      src="/components/CharacterEquipmentList.html"
+      slots="@[sheetDialog.slots]"
+      readonly="@[true]"
+    >
+    </component>
+  </sheet-dialog-body>
+</component>
+
+<style>
+  sheet-dialog-mode [dialog-card] {
+    max-width: min(calc(var(--unit) * 190), 94vw);
+  }
+
+  sheet-dialog-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 3);
+    width: min(calc(var(--unit) * 160), 80vw);
+    max-height: 80vh;
+    overflow: auto;
+  }
+
+  sheet-dialog-body h5 {
+    margin: calc(var(--unit) * 5) 0 calc(var(--unit) * 3);
+  }
+</style>
diff --git a/components/CodeOfConduct.html b/components/CodeOfConduct.html
new file mode 100644
index 00000000..21cd05b1
--- /dev/null
+++ b/components/CodeOfConduct.html
@@ -0,0 +1,30 @@
+<component src="/components/Dialog.html" title="Code of Conduct">
+  <typography>
+    <p>By playing the game you agree to the following rules and regulations.</p>
+    <h5 cinzel>Rules:</h5>
+    <ol>
+      <li>Respect everyone and their opinions</li>
+      <li>Don't spam chat</li>
+      <li>No excessive caps</li>
+      <li>No excessive swearing</li>
+      <li>No NSFW Content in chat</li>
+      <li>Always respect a moderators request</li>
+    </ol>
+    <p>
+      We want to promote a sense of community where conversations and discussion is encouraged.
+      Therefore we expect everyone to behave in a civil and respectful manner.
+    </p>
+    <h5 cinzel>Verbal abuse, threatening behaviour, harassment</h5>
+    <p>
+      Remember this is a game where people come to relax and have fun. Although you may disagree
+      with other players and their opinions, this does not mean you need to be abusive or offensive.
+    </p>
+    <h5 cinzel>Racism, discrimination and hate speech</h5>
+    <p>Any kind of racism, discrimination or hate speech will not be tolerated.</p>
+    <h5 cinzel>Moderators discretion</h5>
+    <p>
+      Moderators reserve the right to request conversations to end. Remember everyone is here to
+      have fun.
+    </p>
+  </typography>
+</component>
diff --git a/components/Coins.html b/components/Coins.html
new file mode 100644
index 00000000..2edfd98b
--- /dev/null
+++ b/components/Coins.html
@@ -0,0 +1,64 @@
+<script type="module">
+  window.coinStack = (amount) =>
+    Array.from({ length: Math.max(0, Math.floor(amount / 100)) }, (_, i) => ({ i }));
+</script>
+
+<crow coins stacked="@[stacked]" minimalistic="@[minimalistic]">
+  <crow coins-stack right>
+    <!-- each coinStack(amount) as c (c.i) -->
+      <coin>
+        <stack>
+          <icon crystal back></icon>
+          <icon crystal coin-platinum></icon>
+        </stack>
+      </coin>
+    <!-- /each -->
+  </crow>
+  <crow coin-line f="none" center>
+    <!-- if !minimalistic -->
+      @[Math.floor(amount / 100)]×
+    <!-- /if -->
+    <component src="/components/IconCell.html" tip="@[{ crystal: true }]">
+      <coin>
+        <stack>
+          <icon crystal back></icon>
+          <icon crystal coin-platinum></icon>
+        </stack>
+      </coin>
+      <!-- if minimalistic -->
+        <ability-tile-ticks position="absolute" px="1">
+          <span>@[Math.floor(amount / 100)]</span>
+        </ability-tile-ticks>
+      <!-- /if -->
+    </component>
+  </crow>
+</crow>
+
+<style>
+  [coin-line] {
+    color: var(--muted-foreground);
+  }
+
+  [coins]:not([stacked]) {
+    flex: none;
+  }
+
+  [coins][stacked] [coins-stack] {
+    flex-wrap: wrap;
+    padding-left: calc(var(--unit) * 2);
+    row-gap: calc(var(--unit) * 1);
+  }
+
+  [coins][stacked] [coins-stack] coin {
+    isolation: isolate;
+    margin-left: calc(var(--unit) * -2);
+  }
+
+  [coins]:not([stacked]) [coins-stack] {
+    display: none;
+  }
+
+  [coins][stacked] [coin-line] {
+    display: none;
+  }
+</style>
diff --git a/components/Combat.html b/components/Combat.html
new file mode 100644
index 00000000..1d72f62f
--- /dev/null
+++ b/components/Combat.html
@@ -0,0 +1,208 @@
+<script type="module">
+  import { seasonArena } from '/js/seasonArena.js';
+  import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+  import { incStat } from '/js/utils.js';
+  import { combatFitScale } from '/js/helpers.js';
+  import {
+    combatEnded,
+    combatOutcome,
+    combatResultOutcome,
+    combatResultLabel,
+    combatResultTeamColor,
+  } from '/js/combatResult.js';
+
+  // Shrink the whole fight when the viewport cramps the outermost combat ellipse
+  // (the team-label boundary, --combat-outer-d × 1.2). combat-viewport is sized to
+  // that ellipse, so measuring it against combat-frame yields the fit; the scale
+  // rides combat-viewport (combat-stage keeps the shake transform). Capped at 1, so
+  // a roomy screen renders at natural size. On :root because Vibe re-hydrates the
+  // body subtree and would wipe an inline style on the managed nodes.
+  const fitCombat = () => {
+    const frame = document.querySelector('combat-frame');
+    const viewport = document.querySelector('combat-viewport');
+    const scale = combatFitScale(viewport, frame?.clientWidth, frame?.clientHeight);
+    if (scale == null) return false;
+    document.documentElement.style.setProperty('--combat-fit-scale', scale);
+    return true;
+  };
+
+  // Re-query each fit: Vibe swaps the body subtree, so a captured node detaches.
+  // Observe both the frame (viewport resize) and combat-viewport, whose layout size
+  // IS the boundary (--combat-outer-d tracks the combatant count via --combat-scale):
+  // a re-watch swapping in a fight of a different size resizes it without a frame
+  // resize, so the fit must re-run. A steady per-frame --combat-scale write of the
+  // same value doesn't change its size, so it never fires. Single observer, re-targeted
+  // per mount (disconnect first) so re-opening the overlay never stacks observers.
+  const trackCombat = () => {
+    if (!fitCombat()) return false;
+    window.__combatFitObserver?.disconnect();
+    window.__combatFitObserver = new ResizeObserver(fitCombat);
+    window.__combatFitObserver.observe(document.querySelector('combat-frame'));
+    window.__combatFitObserver.observe(document.querySelector('combat-viewport'));
+    return true;
+  };
+
+  if (!trackCombat()) {
+    const mo = new MutationObserver(() => trackCombat() && mo.disconnect());
+    mo.observe(document.body, { childList: true, subtree: true });
+  }
+
+  const resetCombat = () => {
+    $.overlay = {};
+    $.combat = JSON.parse(JSON.stringify(window.INITIAL_COMBAT));
+    $.liveTeams = [];
+    $.combatCards = [];
+    $.combatLoot = [];
+    $.elapsedMilliseconds = 0;
+  };
+
+  // Bare markup calls (and other components' window.* refs) resolve to these shared
+  // pure helpers; the /_internal preview reuses the same module.
+  window.combatEnded = combatEnded;
+  window.combatOutcome = combatOutcome;
+  window.combatResultOutcome = combatResultOutcome;
+  window.combatResultLabel = combatResultLabel;
+  window.combatResultTeamColor = combatResultTeamColor;
+
+  window.combatRewardXp = (combat) => {
+    if (combat.context === 'teamplay') return combat.teamplayXp || 0;
+    const fight = seasonArena($.season).find((f) => f.id === combat.fightId);
+    if (!fight || combat.winningTeam?.index !== 0) return 0;
+    if (window.getLevelByExperience($.experience) > fight.maxLevel) return 0;
+    const base = window.getExperienceReward(fight.minLevel, fight.maxLevel, fight.boss);
+    // Under-manning pays +50% per missing brawler: the enemies stay scaled to the fight's
+    // intended team size, so bringing fewer is a harder, better-rewarded run.
+    const brought = combat.teamsStartState?.[0]?.combatants?.length || 1;
+    const missing = Math.max(0, fight.maxBrawlers - brought);
+    return Math.round(base * Math.pow(1.5, missing));
+  };
+
+  window.claimCombatReward = () => {
+    const combat = $.combat;
+    if (!combat?.duration || combat._rewarded) return;
+
+    // Teamplay: the server gates the claim (winning-team membership + one-time) and
+    // tells us the xp to grant. Clearing $.pvp.teamplay.active releases the account lock.
+    if (combat.context === 'teamplay') {
+      combat._rewarded = true;
+      $.socket
+        .sendAsync('teamplay/verify-reward', { token: $.token, id: combat.teamplayId })
+        .then(({ reward }) => {
+          if (reward?.xp) {
+            $.experience += reward.xp;
+            incStat('progression.experience.amount', { count: reward.xp });
+          }
+          $.pvp.teamplay.active = null;
+          resetCombat();
+        })
+        .catch((error) => {
+          combat._rewarded = false;
+          notify.error(error?.error || 'Failed to claim reward');
+        });
+      return;
+    }
+
+    const fight = seasonArena($.season).find((f) => f.id === combat.fightId);
+    const defeatedBoss = fight && fight.boss && combat.winningTeam?.index === 0;
+    if (fight) {
+      const xp = window.combatRewardXp(combat);
+      $.experience += xp;
+      if (xp) incStat('progression.experience.amount', { count: xp });
+      if (fight.boss && combat.winningTeam?.index === 0 && fight.minLevel > $.bossHighscore) {
+        $.bossHighscore = fight.minLevel;
+      }
+    }
+
+    // Grant the rolled loot. Equipment goes into the inventory (storage form,
+    // fresh uuid); materials tick up their owned count in the top bar.
+    const loot = $.combatLoot || [];
+    const equipment = loot.filter((drop) => drop.kind === 'equipment');
+    if (equipment.length) {
+      $.inventory = [
+        ...$.inventory,
+        ...equipment.map((drop) => EQUIPMENT(drop.id, false, { overrides: drop.overrides })),
+      ];
+      incStat('loot.equipment.amount', { count: equipment.length });
+    }
+    const materials = loot.filter((drop) => drop.kind === 'materials');
+    if (materials.length) {
+      const next = { ...$.materials };
+      materials.forEach((drop) => (next[drop.id] = (next[drop.id] || 0) + 1));
+      $.materials = next;
+      incStat('loot.materials.amount', { count: materials.length });
+      materials.forEach((drop) => incStat(`economy.${drop.id}.earned`));
+    }
+
+    combat._rewarded = true;
+
+    // Beating a boss raises the level cap. Hand the unlocked level to the arena in
+    // the URL hash and redirect; the arena announces it once its own game state has
+    // loaded — a toast fired during the arena's boot churn gets eaten.
+    if (defeatedBoss) {
+      window.location.href = `/pve#unlocked=${fight.minLevel}`;
+      return;
+    }
+
+    resetCombat();
+  };
+
+  // Full teardown: stop the replay loop (so it stops draining the SFX audio queue) before
+  // wiping combat state. Used when a fight is genuinely done with — a participant closing
+  // the post-result screen, or a spectator bailing out of a watch they no longer want.
+  window.closeCombatOverlay = () => {
+    document.dispatchEvent(new CustomEvent('pauseCombat'));
+    resetCombat();
+  };
+
+  // The defeat/draw screen's button: in teamplay even the losing side claims its
+  // participation xp (and clears the pending state) rather than just retreating.
+  window.combatLossAction = () => {
+    if ($.combat?.context === 'teamplay') claimCombatReward();
+    else closeCombatOverlay();
+  };
+</script>
+
+<combat-viewport>
+  <combat-stage>
+    <component src="/components/CombatArena.html">
+      <!-- if combat?.showTeamLabels || combat?.spectator || combat?.accountsAttending > 2 -->
+        <component
+          src="/components/CombatTeamLabels.html"
+          teams="@[liveTeams]"
+          names="@[combat.teamNames]"
+        ></component>
+      <!-- /if -->
+      <!-- each combatCards as card (card.cardId) -->
+        <component src="/components/CombatantCard.html" card="@[card]"></component>
+      <!-- /each -->
+      <component src="/components/CombatProjectiles.html"></component>
+    </component>
+  </combat-stage>
+</combat-viewport>
+
+<component src="/components/ResultAnnouncement.html"></component>
+
+<style>
+  combat-viewport {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: grid;
+    place-items: center;
+    width: calc(var(--combat-outer-d) * 1.2);
+    height: calc(var(--combat-outer-d) * 1.2 * var(--combat-outer-tilt, 1));
+    transform: translate(-50%, -50%) scale(var(--combat-fit-scale, 1));
+  }
+
+  combat-stage {
+    display: block;
+    position: relative;
+    width: calc(var(--unit) * 175);
+    height: calc(var(--unit) * 175);
+    aspect-ratio: 1 / 1;
+  }
+
+  combat-stage[shaking] {
+    animation: combat-shake 300ms ease-in-out;
+  }
+</style>
diff --git a/components/CombatArena.html b/components/CombatArena.html
new file mode 100644
index 00000000..b96526a1
--- /dev/null
+++ b/components/CombatArena.html
@@ -0,0 +1,9 @@
+<combat-arena position="absolute" t="0" r="0" b="0" l="0" block>
+  <slot></slot>
+</combat-arena>
+
+<style>
+  combat-arena {
+    aspect-ratio: 1 / 1;
+  }
+</style>
diff --git a/components/CombatProjectiles.html b/components/CombatProjectiles.html
new file mode 100644
index 00000000..132e8bb2
--- /dev/null
+++ b/components/CombatProjectiles.html
@@ -0,0 +1,68 @@
+<projectile-field position="absolute">
+  <!-- each combatProjectiles as p (p.id) -->
+    <combat-projectile
+      position="absolute"
+      style="
+        --p-start-x: @[p.startX]px;
+        --p-start-y: @[p.startY]px;
+        --p-end-x: @[p.endX]px;
+        --p-end-y: @[p.endY]px;
+        --p-arc: @[p.arcHeight]px;
+        --p-spin: @[p.spin]deg;
+        --p-duration: @[p.duration]ms;
+      "
+    >
+      <projectile-hop block>
+        <projectile-spin block>
+          <icon @[p.icon]></icon>
+        </projectile-spin>
+      </projectile-hop>
+    </combat-projectile>
+  <!-- /each -->
+</projectile-field>
+
+<style>
+  projectile-field {
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  combat-projectile {
+    top: 0;
+    left: 0;
+    width: calc(var(--unit) * 16);
+    height: calc(var(--unit) * 16);
+    margin: calc(var(--unit) * -8);
+    translate: var(--p-start-x) var(--p-start-y);
+    animation: projectile-travel var(--p-duration, 0ms) linear forwards;
+  }
+
+  projectile-hop {
+    width: 100%;
+    height: 100%;
+    animation: projectile-hop var(--p-duration, 0ms) ease-in-out forwards;
+  }
+
+  projectile-spin {
+    width: 100%;
+    height: 100%;
+    animation: projectile-spin var(--p-duration, 0ms) linear forwards;
+  }
+
+  projectile-spin icon {
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-size: calc(var(--unit) * 16);
+    background: radial-gradient(
+      circle at 50% 50%,
+      oklch(from var(--hue-red) calc(l * 1.1) c h),
+      var(--hue-red) 55%,
+      var(--black)
+    );
+    filter: drop-shadow(0 1px 2px var(--scrim-2));
+  }
+</style>
diff --git a/components/CombatTeamLabels.html b/components/CombatTeamLabels.html
new file mode 100644
index 00000000..d39b45a5
--- /dev/null
+++ b/components/CombatTeamLabels.html
@@ -0,0 +1,104 @@
+<script type="module">
+  import { getGeometry, ringAngleOffset } from '/js/combat-loop.js';
+  import { teamColor } from '/js/helpers.js';
+
+  // Geometry shared with ringPosition (js/utils.js): each team owns a 360/teamCount slice,
+  // its combatants spread inside it. The label line spans the combatants centre-to-centre
+  // plus one card's angular footprint on each end (so a lone combatant still reads as a
+  // segment), capped to the team's own slice so neighbouring teams never overlap. The
+  // centre is read from the combatants' own position.rot, which is already viewer-rotated
+  // (rotateCombatToViewer), so the arcs/labels track the rotation for free; the circular
+  // mean keeps it correct even for a team straddling 0°. RAIL/CARD_HALF are in --unit
+  // multiples, so --unit cancels and the footprint angle is resolution-independent.
+  const RAIL = 62.5;
+  const CARD_HALF = 18;
+  const DEG = 180 / Math.PI;
+
+  const centerRot = (combatants, fallback) => {
+    const rots = combatants.map((c) => c.position?.rot).filter((r) => typeof r === 'number');
+    if (!rots.length) return fallback;
+    const sin = rots.reduce((s, r) => s + Math.sin(r / DEG), 0);
+    const cos = rots.reduce((s, r) => s + Math.cos(r / DEG), 0);
+    return Math.atan2(sin, cos) * DEG;
+  };
+
+  window.combatTeamLabels = (teams, names) => {
+    const teamCount = teams.length;
+    const rotation = 360 / teamCount;
+    const total = teams.reduce((sum, team) => sum + (team.combatants?.length || 0), 0);
+    const { scale } = getGeometry(total);
+    const footprint = Math.atan2(CARD_HALF * scale, RAIL) * 2 * DEG;
+
+    return teams.map((team, index) => {
+      const n = team.combatants?.length || 0;
+      const gap = rotation / (n + 1);
+      const center =
+        centerRot(team.combatants || [], index * rotation + 270) + ringAngleOffset(teamCount);
+      const span = Math.min((n - 1) * gap + footprint, rotation) / 2;
+      return {
+        index,
+        name: names?.[index] || team.name || `Team ${index + 1}`,
+        color: teamColor(index),
+        span,
+        conicStart: 180 - (center + span / 2),
+        labelAngle: 180 - center,
+      };
+    });
+  };
+</script>
+
+<combat-team-labels position="absolute">
+  <!-- each combatTeamLabels(teams, names) as label (label.index) -->
+    <team-arc
+      style="
+        --start: @[label.conicStart]deg;
+        --span: @[label.span]deg;
+        --team-color: @[label.color];
+      "
+    ></team-arc>
+  <!-- /each -->
+  <!-- each combatTeamLabels(teams, names) as label (label.index) -->
+    <team-label style="--angle: @[label.labelAngle]deg">
+      <component
+        src="/components/TeamBadge.html"
+        name="@[label.name]"
+        color="@[label.color]"
+        sm
+      ></component>
+    </team-label>
+  <!-- /each -->
+</combat-team-labels>
+
+<style>
+  combat-team-labels {
+    inset: 0;
+    pointer-events: none;
+    /* The team-label ring sits 10% wider than the combatant ring; labels keep their
+       original 4u offset from it (can't self-reference --combat-outer-d). */
+    --team-rail-d: calc(var(--combat-outer-d) * 1.1);
+  }
+
+  combat-team-labels team-arc {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--team-rail-d);
+    height: var(--team-rail-d);
+    transform: translate(-50%, -50%) scaleY(var(--combat-outer-tilt, 1));
+    border: calc(var(--unit) * 0.5) solid var(--team-color);
+    border-radius: 50%;
+    mask: conic-gradient(
+      from var(--start),
+      var(--black) 0 var(--span),
+      transparent var(--span) 360deg
+    );
+  }
+
+  combat-team-labels team-label {
+    --label-r: calc(var(--team-rail-d) / 2 + var(--unit) * 4);
+    position: absolute;
+    top: calc(50% - cos(var(--angle)) * var(--label-r) * var(--combat-outer-tilt, 1));
+    left: calc(50% + sin(var(--angle)) * var(--label-r));
+    transform: translate(-50%, -50%);
+  }
+</style>
diff --git a/components/CombatantCard.html b/components/CombatantCard.html
new file mode 100644
index 00000000..872709e9
--- /dev/null
+++ b/components/CombatantCard.html
@@ -0,0 +1,252 @@
+<combatant-slot
+  position="absolute"
+  combatant-slot="@[card.cardId]"
+  facing-right="@[card.facingRight]"
+  immobilized="@[card.immobilized]"
+  spawned="@[card.spawned]"
+  style="
+    --c-x: @[card.x]px;
+    --c-y: @[card.y]px;
+    --c-z: @[card.z];
+    --c-scale: @[card.scale];
+    --c-alpha: @[card.glassAlpha];
+    --c-blur: @[card.glassBlur];
+  "
+>
+  <card position="absolute" glass combat-card="@[card.cardId]">
+    <combatant-header flex>
+      <combatant-name>@[card.name]</combatant-name>
+    </combatant-header>
+
+    <component src="/components/HealthBar.html" card="@[card]"></component>
+
+    <combatant-sprite-area block></combatant-sprite-area>
+
+    <combatant-bar block position="relative">
+      <component
+        src="/components/AbilityBar.html"
+        abilities="@[card.abilityCells]"
+        progress="@[card.individualProgress]"
+        minimalistic
+        dndDisabled
+        inverse
+      >
+      </component>
+      <combatant-immobilized position="absolute" fat-number>Immobilized</combatant-immobilized>
+    </combatant-bar>
+
+    <combatant-badge position="absolute" damage-badge active="@[card.damage > 0]">
+      <icon h1h1></icon>
+      <badge-value position="absolute" fat-number>@[card.damage]</badge-value>
+    </combatant-badge>
+
+    <combatant-badge
+      position="absolute"
+      armor-badge
+      active="@[card.currentArmor > 0]"
+      hit="@[card.armorHit]"
+    >
+      <icon maxArmor></icon>
+      <badge-value position="absolute" fat-number>@[card.currentArmor]</badge-value>
+    </combatant-badge>
+  </card>
+
+  <combatant-statuses position="absolute">
+    <!-- each card.statusDisplay as s (s.key) -->
+      <component src="/components/StatusChip.html" s="@[s]"></component>
+    <!-- /each -->
+  </combatant-statuses>
+
+  <component src="/components/CombatantImage.html" card="@[card]"></component>
+</combatant-slot>
+
+<style>
+  combatant-slot {
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    z-index: var(--c-z, 10);
+    transform: translate(-50%, -50%);
+  }
+
+  combatant-slot[spawned] {
+    animation: combatant-spawn-in 300ms ease backwards;
+  }
+
+  @keyframes combatant-spawn-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  card[combat-card] {
+    left: var(--c-x);
+    top: calc(var(--c-y) - calc(var(--unit) * 5));
+    transform: translate(-50%, -50%) scale(var(--c-scale, 1));
+    width: calc(var(--unit) * 36);
+    padding: 0;
+    pointer-events: none;
+    border-radius: calc(var(--unit) * 1);
+    color: var(--foreground);
+    background: oklch(from var(--sheen-3) l c h / var(--c-alpha, 0.5));
+    backdrop-filter: blur(calc(var(--c-blur, 1) * var(--unit)));
+  }
+
+  [dark] card[combat-card] {
+    background: oklch(from var(--card) calc(l * 0.75) c h / var(--c-alpha, 0.6));
+  }
+
+  combatant-header {
+    justify-content: center;
+    align-items: center;
+    padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+    font-size: calc(var(--unit) * 4);
+    font-weight: 700;
+    color: var(--combatant-name-color);
+    text-transform: uppercase;
+  }
+
+  combatant-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  combatant-sprite-area {
+    width: 100%;
+    height: calc(var(--unit) * 40);
+  }
+
+  combatant-immobilized {
+    inset: calc(var(--unit) * 0.5) 0;
+    display: grid;
+    place-items: center;
+    background: oklch(0.5 0 0);
+    color: var(--white);
+    opacity: 0.9;
+    font-size: calc(var(--unit) * 3.75);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    transition:
+      opacity 100ms ease-out,
+      display 100ms allow-discrete;
+    animation: immobilized-in 260ms backwards;
+  }
+
+  combatant-slot:not([immobilized]) combatant-immobilized {
+    display: none;
+    opacity: 0;
+  }
+
+  combatant-slot[immobilized] combatant-bar ability-segment {
+    --impact-center: calc((sibling-count() + 1) / 2);
+    animation: immobilized-ability-impact 180ms ease-out;
+    animation-delay: calc(
+      150ms + max(sibling-index() - var(--impact-center), var(--impact-center) - sibling-index()) *
+        30ms
+    );
+  }
+
+  card[combat-card] ability-overlay:not([inverse]) ability-segment {
+    pointer-events: auto;
+  }
+
+  combatant-statuses {
+    left: var(--c-x);
+    top: calc(var(--c-y) - var(--unit) * 5);
+    scale: var(--c-scale, 1);
+    --status-dir: 1;
+    --status-radius: calc(var(--unit) * 48);
+    --status-apex: calc(var(--unit) * 24);
+  }
+
+  combatant-slot[facing-right] combatant-statuses {
+    --status-dir: -1;
+  }
+
+  combatant-statuses > component {
+    --status-spread: calc(
+      (sibling-index() - (sibling-count() + 1) / 2) * (var(--unit) * 9.5 / var(--status-radius)) *
+        1rad
+    );
+    --chip-x: calc(
+      (
+          cos(var(--status-spread)) * var(--status-radius) + var(--status-apex) -
+            var(--status-radius)
+        ) *
+        var(--status-dir)
+    );
+    --chip-y: calc(sin(var(--status-spread)) * var(--status-radius));
+    --pin-tilt: atan2(calc(-1 * var(--chip-y)), calc(var(--chip-x) * var(--status-dir)));
+    --pin-angle: calc((1 + var(--status-dir)) * 90deg - var(--status-dir) * var(--pin-tilt));
+    position: absolute;
+    display: grid;
+    left: var(--chip-x);
+    top: var(--chip-y);
+    translate: -50% -50%;
+    transition:
+      left 400ms ease,
+      top 400ms ease;
+    animation: status-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
+  }
+
+  combatant-slot[facing-right] combatant-statuses status-meta {
+    flex-direction: row-reverse;
+  }
+
+  combatant-statuses status-announce {
+    animation: status-announce 700ms ease-out forwards;
+  }
+
+  combatant-badge {
+    bottom: calc(var(--unit) * 7);
+    width: calc(var(--unit) * 10);
+    height: calc(var(--unit) * 10);
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+  }
+
+  combatant-badge[damage-badge] {
+    left: 0;
+  }
+  combatant-badge[armor-badge] {
+    right: 0;
+  }
+
+  combatant-slot[facing-right] combatant-badge[damage-badge] {
+    left: auto;
+    right: 0;
+  }
+  combatant-slot[facing-right] combatant-badge[armor-badge] {
+    right: auto;
+    left: 0;
+  }
+
+  combatant-badge icon,
+  combatant-badge icon[maxArmor] {
+    font-size: calc(var(--unit) * 7.5);
+    --color: var(--stone);
+    background: var(--color);
+    filter: none;
+  }
+
+  combatant-badge badge-value {
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-family: var(--font-display, sans-serif);
+    font-size: calc(var(--unit) * 6);
+    color: var(--white);
+  }
+
+  combatant-badge:not([active]) badge-value {
+    display: none;
+  }
+
+  combatant-badge[armor-badge][hit] {
+    animation: combatant-armor-hit 400ms ease-out;
+  }
+</style>
diff --git a/components/CombatantImage.html b/components/CombatantImage.html
new file mode 100644
index 00000000..eb342867
--- /dev/null
+++ b/components/CombatantImage.html
@@ -0,0 +1,220 @@
+<combatant-sprite
+  position="absolute"
+  hurt="@[card.hurtActive]"
+  block="@[card.blockActive]"
+  attack-blocked="@[card.attackBlocked]"
+  whirlwind="@[card.whirlwindActive]"
+  spinning="@[card.spinning]"
+  attack-dodged="@[card.attackDodgedActive]"
+  knocked-out="@[card.knockedOut]"
+  charging="@[card.charging]"
+  recovering="@[card.recovering]"
+  releasing="@[card.releasing]"
+  stomping="@[card.stomping]"
+  catching="@[card.catching]"
+  hatching="@[card.hatching]"
+  style="
+    --charge-progress: @[card.chargeProgress];
+    --recover-progress: @[card.recoverProgress];
+    --position-x: @[card.x]px;
+    --position-y: @[card.y]px;
+    --attack-start-x: @[card.attackStartX]px;
+    --attack-start-y: @[card.attackStartY]px;
+    --attack-end-x: @[card.attackEndX]px;
+    --attack-end-y: @[card.attackEndY]px;
+    --attack-duration: @[card.attackDuration]ms;
+    --attack-anim: @[card.attackAnimationName];
+    --attack-anim-duration: @[card.attackAnimationDuration];
+    --spin-duration: @[card.spinDuration]ms;
+    --stomp-duration: @[card.stompDuration]ms;
+    --catchThrow-duration: @[card.catchDuration]ms;
+    --dir: @[card.dir];
+    --sprite-height: @[card.spriteHeight]px;
+  "
+>
+  <sprite-inner flex down>
+    <sprite-squish block>
+      <img
+        class="combatant-avatar"
+        data-src="@[card.imageUrl]"
+        alt="@[card.name]"
+        onerror="if (!this.src.includes('@[')) this.style.display = 'none';"
+      />
+      <sprite-hurt-mask
+        position="absolute"
+        style="--img: url('@[card.imageUrl]')"
+      ></sprite-hurt-mask>
+      <sprite-dodge-ghost
+        position="absolute"
+        style="--img: url('@[card.imageUrl]')"
+      ></sprite-dodge-ghost>
+      <sprite-block position="absolute">
+        <img src="/static/images/shield-1455x2329.webp" alt="" />
+        <sprite-block-flash position="absolute"></sprite-block-flash>
+      </sprite-block>
+    </sprite-squish>
+  </sprite-inner>
+</combatant-sprite>
+
+<style>
+  combatant-sprite {
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    transform: translate(var(--position-x), var(--position-y));
+    pointer-events: none;
+  }
+
+  combatant-sprite[knocked-out] sprite-inner {
+    filter: grayscale(100%);
+  }
+
+  sprite-inner {
+    align-items: center;
+    width: calc(var(--unit) * 36);
+    height: var(--sprite-height, calc(var(--unit) * 36));
+    transform: translate(-50%, calc(var(--unit) * 17.5 - 100%)) scale(var(--c-scale, 1));
+    transform-origin: 50% calc(100% - calc(var(--unit) * 22.5));
+  }
+
+  sprite-squish {
+    width: 100%;
+    height: 100%;
+    transform: scale(var(--squish-x, 1), var(--squish-y, 1));
+    transform-origin: 50% 100%;
+    transition: transform 150ms ease-out;
+  }
+
+  combatant-sprite[charging] sprite-squish {
+    --squish-x: calc(1 - 0.06 * var(--charge-progress, 1));
+    --squish-y: calc(1 - 0.11 * var(--charge-progress, 1));
+  }
+
+  combatant-sprite[recovering] sprite-squish {
+    --squish-x: calc(1 + 0.05 * (1 - var(--recover-progress, 1)));
+    --squish-y: calc(1 + 0.07 * (1 - var(--recover-progress, 1)));
+  }
+
+  combatant-sprite[releasing] sprite-squish {
+    animation: sprite-ability-release 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition: none;
+  }
+
+  combatant-sprite[stomping] sprite-squish {
+    transform-origin: calc(50% - 20% * var(--dir, 1)) 100%;
+    animation: bb-stomp var(--stomp-duration, 0ms) linear;
+    transition: none;
+  }
+
+  combatant-sprite[catching] sprite-squish {
+    transform-origin: calc(50% - 20% * var(--dir, 1)) 100%;
+    animation: bb-catchThrow var(--catchThrow-duration, 0ms) linear;
+    transition: none;
+  }
+
+  combatant-sprite[hatching] sprite-squish {
+    animation: bb-wiggle 1600ms ease-in-out infinite;
+    transition: none;
+  }
+
+  sprite-inner img.combatant-avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: bottom center;
+    transform: scaleX(var(--dir)) translate(0, 0);
+    transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  combatant-sprite[attack-dodged] sprite-inner img.combatant-avatar {
+    opacity: 0.2;
+    transform: scaleX(var(--dir)) translate(calc(var(--unit) * -2.5), 0);
+  }
+
+  sprite-dodge-ghost {
+    inset: 0;
+    background-color: transparent;
+    mix-blend-mode: multiply;
+    opacity: 0;
+    transform: scaleX(var(--dir));
+    -webkit-mask: var(--img) no-repeat bottom / auto 100%;
+    mask: var(--img) no-repeat bottom / auto 100%;
+    transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  combatant-sprite[attack-dodged] sprite-dodge-ghost {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.15);
+    transform: translate(calc(var(--dir) * var(--unit) * 2.5), 0) scaleX(var(--dir));
+  }
+
+  sprite-hurt-mask {
+    inset: 0;
+    background-color: transparent;
+    mix-blend-mode: multiply;
+    opacity: 0;
+    transform: scaleX(var(--dir));
+    -webkit-mask: var(--img) no-repeat bottom / auto 100%;
+    mask: var(--img) no-repeat bottom / auto 100%;
+  }
+
+  combatant-sprite[hurt] sprite-hurt-mask {
+    animation: sprite-hurt 340ms ease;
+  }
+
+  sprite-block {
+    inset: 0;
+    display: grid;
+    place-items: center;
+    opacity: 0;
+    pointer-events: none;
+    filter: grayscale(100%);
+    transform: translateX(calc(var(--dir) * calc(var(--unit) * 6))) scaleX(var(--dir));
+  }
+
+  sprite-block img {
+    width: 50%;
+  }
+
+  sprite-block-flash {
+    inset: 0;
+    background-color: transparent;
+    mix-blend-mode: multiply;
+    opacity: 0;
+    -webkit-mask: url('/static/images/shield-1455x2329.webp') no-repeat center / 50% auto;
+    mask: url('/static/images/shield-1455x2329.webp') no-repeat center / 50% auto;
+  }
+
+  combatant-sprite[block] sprite-block,
+  combatant-sprite[attack-blocked] sprite-block {
+    opacity: 1;
+    animation: shield-raise 160ms ease-out;
+  }
+
+  @keyframes shield-raise {
+    from {
+      opacity: 0;
+      transform: translateX(calc(var(--dir) * calc(var(--unit) * 6)))
+        translateY(calc(var(--unit) * 6)) scaleX(var(--dir));
+    }
+    to {
+      opacity: 1;
+      transform: translateX(calc(var(--dir) * calc(var(--unit) * 6))) translateY(0)
+        scaleX(var(--dir));
+    }
+  }
+
+  combatant-sprite[attack-blocked] sprite-block-flash {
+    animation: attack-blocked 340ms ease;
+  }
+
+  combatant-sprite {
+    animation: var(--attack-anim, none) var(--attack-anim-duration, 0ms)
+      cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  combatant-sprite[spinning] {
+    animation: bb-whirlwind var(--spin-duration, 300ms) linear;
+  }
+</style>
diff --git a/components/CoreStats.html b/components/CoreStats.html
new file mode 100644
index 00000000..8c10db60
--- /dev/null
+++ b/components/CoreStats.html
@@ -0,0 +1,45 @@
+<core-stats>
+  <core-stat vertical="@[vertical]">
+    <component src="/components/IconCell.html" tip="@[{ stat: 'maxHealth' }]"
+      ><icon maxHealth></icon
+    ></component>
+    <span>@[hp]</span>
+  </core-stat>
+  <core-stat vertical="@[vertical]">
+    <component src="/components/IconCell.html" tip="@[{ stat: 'maxArmor' }]"
+      ><icon maxArmor></icon
+    ></component>
+    <span>@[armor]</span>
+  </core-stat>
+  <core-stat vertical="@[vertical]">
+    <component src="/components/IconCell.html" tip="@[{ stat: 'damage' }]"
+      ><icon damage></icon
+    ></component>
+    <span>@[damage]</span>
+  </core-stat>
+</core-stats>
+
+<style>
+  core-stats {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 3);
+  }
+
+  core-stats:has(core-stat[vertical]) {
+    gap: calc(var(--unit) * 1);
+  }
+
+  core-stat {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 1.5);
+    font-variant-numeric: tabular-nums;
+  }
+
+  core-stat[vertical] {
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+</style>
diff --git a/components/CreateTeamplayModal.html b/components/CreateTeamplayModal.html
new file mode 100644
index 00000000..addf8a0e
--- /dev/null
+++ b/components/CreateTeamplayModal.html
@@ -0,0 +1,448 @@
+<script type="module">
+  import { allowedNumberOfBrawlers, getLevelByExperience } from '/js/level.js';
+  import { incStat } from '/js/utils.js';
+  import { teamplayWinningXp, teamplayParticipationXp } from '/js/teamplay.js';
+
+  const s =
+    $[
+      component({
+        open: false,
+        name: '',
+        randomizedTeams: true,
+        brawlersPerAccount: 1,
+        amountOfTeams: 2,
+        brawlersPerTeam: 2,
+        centerLevel: 1,
+        levelOffset: 0,
+        maxOffset: 0,
+        hostMax: 1,
+        brawlerPerTeamOptions: [2, 3, 4, 5, 6],
+        submitting: false,
+      })
+    ];
+
+  // Full matchup readout: one team size per participating team, e.g. 2 teams of
+  // 2 → "2 vs 2", 4 teams of 2 → "2 vs 2 vs 2 vs 2".
+  const composition = (size, teams) => Array.from({ length: teams }, () => size).join(' vs ');
+
+  // Team size must divide into whole per-account blocks, so a team is filled by an
+  // exact number of accounts. Snap the selection to a valid option when it changes.
+  // Each option carries its written-out label so the <select> each binds a direct
+  // loop-alias property — a function call on this.amountOfTeams inside the each row
+  // wouldn't re-render when the team count changes.
+  const refreshTeamSizes = () => {
+    const opts = [2, 3, 4, 5, 6].filter((n) => n % s.brawlersPerAccount === 0);
+    s.brawlerPerTeamOptions = opts.map((size) => ({
+      size,
+      label: composition(size, s.amountOfTeams),
+    }));
+    if (!opts.includes(s.brawlersPerTeam)) s.brawlersPerTeam = opts[0];
+  };
+
+  // Every picker/toggle selection is mirrored to a single shared global key so it
+  // survives navigation and reopens; restored (clamped to valid ranges) on open.
+  const persistSelections = () => {
+    $.settings.teamplaySettings = {
+      randomizedTeams: s.randomizedTeams,
+      brawlersPerAccount: s.brawlersPerAccount,
+      amountOfTeams: s.amountOfTeams,
+      brawlersPerTeam: s.brawlersPerTeam,
+      levelOffset: s.levelOffset,
+    };
+  };
+
+  window.openCreateTeamplay = () => {
+    const level = getLevelByExperience($.experience);
+    const saved = $.settings.teamplaySettings || {};
+    s.name = '';
+    s.randomizedTeams = saved.randomizedTeams ?? true;
+    // A ludus fields at most 5 brawlers into a teamplay, never 6.
+    s.hostMax = Math.min(allowedNumberOfBrawlers(), 5);
+    s.brawlersPerAccount = Math.min(saved.brawlersPerAccount || 1, s.hostMax);
+    s.amountOfTeams = saved.amountOfTeams || 2;
+    s.brawlersPerTeam = saved.brawlersPerTeam || 2;
+    // Level band is the host's ludus level ± offset; the offset can grow until the band
+    // hits floor (1) or ceiling (25), whichever side is nearest.
+    s.centerLevel = level;
+    s.maxOffset = Math.min(level - 1, 25 - level);
+    s.levelOffset = Math.min(saved.levelOffset ?? 1, s.maxOffset);
+    s.submitting = false;
+    refreshTeamSizes();
+    s.open = true;
+  };
+
+  window.closeCreateTeamplay = () => (s.open = false);
+
+  window.registerEscapeModal?.('createTeamplay', () => s.open, closeCreateTeamplay);
+
+  window.teamplayName = (value) => (s.name = value);
+
+  window.teamplayRandomized = (checked) => {
+    s.randomizedTeams = checked;
+    persistSelections();
+  };
+
+  window.teamplayPerAccount = (value) => {
+    s.brawlersPerAccount = Number(value);
+    refreshTeamSizes();
+    persistSelections();
+  };
+
+  // A different team count rewrites every option's matchup label, so rebuild.
+  window.teamplayAmountTeams = (value) => {
+    s.amountOfTeams = Number(value);
+    refreshTeamSizes();
+    persistSelections();
+  };
+  window.teamplayPerTeam = (value) => {
+    s.brawlersPerTeam = Number(value);
+    persistSelections();
+  };
+
+  window.teamplayLevelOffset = (value) => {
+    s.levelOffset = Number(value);
+    persistSelections();
+  };
+
+  // "10" at offset 0, "9-11" once the band widens.
+  window.teamplayLevelLabel = (center, offset) =>
+    offset === 0 ? `${center}` : `${center - offset}—${center + offset}`;
+
+  // Experience preview — the shared reward model (js/teamplay.js), so what the create
+  // modal promises is exactly what the fight grants: the full value to the winning team,
+  // 10% participation to everyone else.
+  window.teamplayWinningXp = teamplayWinningXp;
+  window.teamplayParticipationXp = teamplayParticipationXp;
+
+  window.submitCreateTeamplay = async () => {
+    if (s.submitting) return;
+    s.submitting = true;
+    try {
+      const { _id } = await $.socket.sendAsync('teamplay/create', {
+        token: $.token,
+        rules: {
+          name: (s.name || '').trim() || `${$.accountName}'s Teamplay`,
+          randomizedTeams: s.randomizedTeams,
+          brawlersPerAccount: s.brawlersPerAccount,
+          amountOfTeams: s.amountOfTeams,
+          brawlersPerTeam: s.brawlersPerTeam,
+          minLevel: s.centerLevel - s.levelOffset,
+          maxLevel: s.centerLevel + s.levelOffset,
+        },
+      });
+      incStat('social.teamplay.created');
+      s.open = false;
+      location.href = `/teamplay/${_id}`;
+    } catch (error) {
+      s.submitting = false;
+      notify.error(error?.error || 'Failed to create teamplay');
+    }
+  };
+</script>
+
+<modal-root open="@[this.open]" onclick="closeCreateTeamplay()">
+  <kingstone h="20"></kingstone>
+  <modal-panel onclick="event.stopPropagation()">
+    <create-teamplay-form>
+      <component src="/components/buttons/Cross.html" label="Close" onclick="closeCreateTeamplay()">
+      </component>
+      <crow center justify-between g="3" teamplay-header>
+        <h3 m="0">Create Teamplay</h3>
+        <span cinzel f="none" teamplay-level
+          >level @[teamplayLevelLabel(this.centerLevel, this.levelOffset)]</span
+        >
+      </crow>
+
+      <teamplay-field>
+        <crow justify-between center>
+          <label>Name</label>
+          <help-mark
+            onmouseenter="
+              showTooltip(
+                {
+                  description:
+                    'The name other ludus owners see in the teamplay lobby list.<br /><br />Leave it empty to go with the suggested name.',
+                  plain: true,
+                },
+                this,
+                { direction: 'up', lock: true },
+              )
+            "
+            onmouseleave="hideTooltip()"
+            >?</help-mark
+          >
+        </crow>
+        <input
+          lg
+          type="text"
+          value="@[this.name]"
+          oninput="teamplayName(this.value)"
+          placeholder="@[$.accountName]'s Teamplay"
+        />
+      </teamplay-field>
+
+      <crow up g="8" w="full">
+        <teamplay-field>
+          <crow justify-between center>
+            <label># Teams</label>
+            <help-mark
+              onmouseenter="
+                showTooltip(
+                  {
+                    name: 'Number of teams',
+                    description:
+                      'How many teams enter the fight.<br /><br />Adds <span text-green>50%</span> winning experience for each team beyond the first two — the largest modifier.',
+                    plain: true,
+                  },
+                  this,
+                  { direction: 'up', lock: true },
+                )
+              "
+              onmouseleave="hideTooltip()"
+              >?</help-mark
+            >
+          </crow>
+          <component
+            src="/components/remote/BoxRange.html"
+            min="2"
+            max="6"
+            value="@[this.amountOfTeams]"
+            onchange="teamplayAmountTeams"
+          ></component>
+        </teamplay-field>
+
+        <teamplay-field disabled="@[this.hostMax <= 1]">
+          <crow justify-between center>
+            <label># Brawlers</label>
+            <help-mark
+              onmouseenter="
+                showTooltip(
+                  {
+                    name: 'Brawlers per Ludus',
+                    description:
+                      'How many brawlers each ludus brings into the fight.<br /><br />Adds <span text-green>10%</span> winning experience for each brawler per ludus beyond the first.',
+                    plain: true,
+                  },
+                  this,
+                  { direction: 'up', lock: true },
+                )
+              "
+              onmouseleave="hideTooltip()"
+              >?</help-mark
+            >
+          </crow>
+          <component
+            src="/components/remote/BoxRange.html"
+            min="1"
+            max="@[this.hostMax]"
+            value="@[this.brawlersPerAccount]"
+            onchange="teamplayPerAccount"
+          ></component>
+        </teamplay-field>
+      </crow>
+
+      <teamplay-field>
+        <crow justify-between center>
+          <field-caption>Composition</field-caption>
+          <help-mark
+            onmouseenter="
+              showTooltip(
+                {
+                  description:
+                    'How many brawlers fight on each team. Only team sizes that split evenly across the participating ludi are available.',
+                  plain: true,
+                },
+                this,
+                { direction: 'up', lock: true },
+              )
+            "
+            onmouseleave="hideTooltip()"
+            >?</help-mark
+          >
+        </crow>
+        <label>
+          <select onchange="teamplayPerTeam(this.value)">
+            <!-- each this.brawlerPerTeamOptions as opt (opt.size) -->
+              <option value="@[opt.size]" selected="@[opt.size === this.brawlersPerTeam]">
+                @[opt.label]
+              </option>
+            <!-- /each -->
+          </select>
+        </label>
+      </teamplay-field>
+
+      <teamplay-field disabled="@[this.maxOffset === 0]">
+        <label>Level offset</label>
+        <component
+          src="/components/remote/BoxRange.html"
+          min="0"
+          max="@[this.maxOffset]"
+          value="@[this.levelOffset]"
+          onchange="teamplayLevelOffset"
+        ></component>
+      </teamplay-field>
+
+      <teamplay-field>
+        <crow justify-between center>
+          <label>Randomized teams</label>
+          <help-mark
+            onmouseenter="
+              showTooltip(
+                {
+                  description:
+                    'Shuffles teams when the fight starts, keeping brawlers from the same ludus together.<br /><br />Enabling randomized teams adds <span text-green>50%</span> winning experience.',
+                  plain: true,
+                },
+                this,
+                { direction: 'up', lock: true },
+              )
+            "
+            onmouseleave="hideTooltip()"
+            >?</help-mark
+          >
+        </crow>
+        <crow left>
+          <input
+            type="checkbox"
+            role="switch"
+            checked="@[this.randomizedTeams]"
+            onchange="teamplayRandomized(this.checked)"
+          />
+        </crow>
+      </teamplay-field>
+
+      <crow justify-between center g="4" mt="2">
+        <winning-xp
+          ><component
+            src="/components/IconCell.html"
+            tip="@[{ info: { name: 'Teamplay experience', description: 'Account experience awarded to every ludus: the full amount to the winning team, and 10% participation to everyone else. Increased by extra brawlers per ludus, extra teams and randomized teams.' } }]"
+            ><icon experience></icon
+          ></component>
+          <xp-lines vertical left>
+            <span
+              ><strong
+                >@[teamplayWinningXp(this.randomizedTeams, this.brawlersPerAccount,
+                this.amountOfTeams)]</strong
+              >
+              XP to winning team</span
+            >
+            <span participation
+              ><strong
+                >@[teamplayParticipationXp(this.randomizedTeams, this.brawlersPerAccount,
+                this.amountOfTeams)]</strong
+              >
+              XP participation</span
+            >
+          </xp-lines></winning-xp
+        >
+        <button primary disabled="@[this.submitting]" onclick="submitCreateTeamplay()">
+          Create
+        </button>
+      </crow>
+    </create-teamplay-form>
+  </modal-panel>
+  <kingstone h="20"></kingstone>
+</modal-root>
+
+<style>
+  create-teamplay-form {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 6);
+    width: calc(var(--unit) * 125);
+    max-width: 100%;
+    padding: calc(var(--unit) * 5);
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: inset 0 0 0 1px var(--c-line);
+  }
+
+  create-teamplay-form h3 {
+    color: var(--primary);
+  }
+
+  /* Reserve room on the right so the level text never slides under the absolute
+     close button (which sits ~24px in from the form's right edge). */
+  create-teamplay-form [teamplay-header] {
+    padding-right: calc(var(--unit) * 6);
+  }
+
+  create-teamplay-form [teamplay-level] {
+    color: var(--muted-foreground);
+  }
+
+  create-teamplay-form help-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--unit) * 4);
+    height: calc(var(--unit) * 4);
+    border-radius: 50%;
+    background: oklch(from var(--foreground) l c h / 0.1);
+    color: var(--muted-foreground);
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 2.75);
+    cursor: help;
+  }
+
+  create-teamplay-form winning-xp {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 1.5);
+    color: var(--c-muted);
+    font-size: calc(var(--unit) * 3.5);
+  }
+
+  create-teamplay-form winning-xp strong {
+    color: var(--c-fg);
+    font-variant-numeric: tabular-nums;
+  }
+
+  create-teamplay-form winning-xp xp-lines {
+    line-height: 1.25;
+  }
+
+  create-teamplay-form winning-xp [participation] {
+    font-size: calc(var(--unit) * 3);
+    opacity: 0.75;
+  }
+
+  create-teamplay-form > component > [cross-button] {
+    position: absolute;
+    top: calc(var(--unit) * 3);
+    right: calc(var(--unit) * 3);
+  }
+
+  create-teamplay-form crow {
+    min-width: 0;
+  }
+
+  create-teamplay-form crow > teamplay-field {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  create-teamplay-form teamplay-field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1.5);
+    min-width: 0;
+  }
+
+  create-teamplay-form teamplay-field[disabled] {
+    display: none;
+  }
+
+  create-teamplay-form label,
+  create-teamplay-form field-caption {
+    color: var(--c-fg);
+    font-family: var(--font-heading);
+  }
+
+  create-teamplay-form select,
+  create-teamplay-form input:not([type='checkbox'], [type='radio']) {
+    width: 100%;
+    min-width: 0;
+  }
+</style>
diff --git a/components/DebugContent.html b/components/DebugContent.html
new file mode 100644
index 00000000..e58a2eb2
--- /dev/null
+++ b/components/DebugContent.html
@@ -0,0 +1,699 @@
+<script type="module">
+  import { generateCombat, prepareTeams, healFull } from '/js/combat.js';
+  import { seededRandom, calculateCombatStatsByCharacter, buildStatGroups } from '/js/utils.js';
+  import CHARACTERS, { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+  import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+  import ABILITIES, { ALL_ABILITIES } from '/js/constants/ABILITIES.js';
+  import { ALL_FIGHTS } from '/js/constants/FIGHTS.js';
+  import { slotsInPrettyName } from '/js/equipment.js';
+  import { INITIAL_COMBAT } from '/js/app.js';
+
+  const STORAGE_KEY = 'debugComposition';
+
+  // Creatures that may never be picked for a random debug fight.
+  const BLACKLIST = ['rat', 'golem'];
+  const npcKeys = Object.keys(ALL_CHARACTERS).filter(
+    (k) => ALL_CHARACTERS[k].race?.name === 'creature' && !BLACKLIST.includes(k),
+  );
+  const randomKey = (t, c) => npcKeys[seededRandom(0, npcKeys.length - 1, `debug_${t}_${c}`)];
+
+  const EQUIP_SLOT_ACCEPTS = {
+    mainHand: ['oneHand', 'twoHand'],
+    offHand: ['offHand', 'oneHand'],
+    armor: ['armor'],
+    accessory: ['accessory'],
+    trinket: ['trinket'],
+  };
+  const equipOptions = Object.fromEntries(
+    Object.keys(EQUIP_SLOT_ACCEPTS).map((slot) => [
+      slot,
+      Object.entries(ALL_EQUIPMENT)
+        .filter(([, e]) => EQUIP_SLOT_ACCEPTS[slot].includes(e.slotsIn))
+        .map(([key, e]) => ({ key, name: e.name })),
+    ]),
+  );
+  const abilityOptions = Object.keys(ALL_ABILITIES).map((key) => ({
+    key,
+    name: ALL_ABILITIES[key].name || key,
+  }));
+  const characterOptions = Object.keys(ALL_CHARACTERS).map((key) => ({ key, name: key }));
+  const fightOptions = ALL_FIGHTS.map(({ id, name }) => ({ id, name }));
+
+  const defaultSlot = (t, c) => ({
+    pick: t === 0 && c === 0 ? 'brawler:0' : 'random',
+    overrides: null,
+  });
+  const defaultSlots = (teamCount, combatantCount, previous = []) =>
+    Array.from({ length: teamCount }, (_, t) =>
+      Array.from({ length: combatantCount }, (_, c) => previous[t]?.[c] || defaultSlot(t, c)),
+    );
+
+  // localStorage is external input — picks and fight ids referencing removed
+  // constants are migrated back to safe values instead of crashing the page
+  // that hosts the "Clear saved" button.
+  const loadSaved = () => {
+    try {
+      const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
+      if (!saved?.slots) return null;
+      const validPick = (p) => p === 'random' || p.startsWith('brawler:') || !!ALL_CHARACTERS[p];
+      return {
+        teamCount: Math.min(8, Math.max(1, saved.teamCount || 2)),
+        combatantCount: Math.min(6, Math.max(1, saved.combatantCount || 1)),
+        fightId: ALL_FIGHTS.some((f) => f.id === saved.fightId) ? saved.fightId : '',
+        slots: saved.slots.map((team, t) =>
+          team.map((slot, c) => (validPick(slot.pick) ? slot : defaultSlot(t, c))),
+        ),
+      };
+    } catch {
+      return null;
+    }
+  };
+
+  // The roster renders from a flat derived list (one row per slot, options and
+  // selected baked in) — nested iterations resolve dot paths of the loop item,
+  // not component-state paths, so the markup stays a single each + row.options.
+  let brawlerOpts = [];
+  const slotOptions = (pick) => [
+    { value: 'random', name: 'Random', selected: pick === 'random' },
+    ...brawlerOpts.map((b) => ({ ...b, selected: pick === b.value })),
+    ...characterOptions.map(({ key }) => ({ value: key, name: key, selected: pick === key })),
+  ];
+  const buildRosterRows = (slots) =>
+    slots.flatMap((team, t) =>
+      team.map((cfg, c) => ({
+        key: `${t}-${c}`,
+        t,
+        c,
+        teamLabel: c === 0 ? `Team ${t + 1}` : '',
+        configured: !!cfg.overrides,
+        options: slotOptions(cfg.pick),
+      })),
+    );
+
+  const saved = loadSaved();
+  const s =
+    $[
+      component({
+        teamCount: saved?.teamCount ?? 2,
+        combatantCount: saved?.combatantCount ?? 1,
+        fightId: saved?.fightId ?? '',
+        slots: saved?.slots ?? defaultSlots(2, 1),
+        rosterRows: [],
+        fightOptions,
+        modal: { open: false },
+      })
+    ];
+
+  const setSlots = (slots) => {
+    s.slots = slots;
+    s.rosterRows = buildRosterRows(slots);
+  };
+
+  const persist = () =>
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        teamCount: s.teamCount,
+        combatantCount: s.combatantCount,
+        fightId: s.fightId,
+        slots: s.slots,
+      }),
+    );
+
+  const resolvePick = (pick, t, c, overrides) => {
+    const meta = overrides ? { overrides } : undefined;
+    if (pick.startsWith('brawler:')) {
+      const ref = $.characters[+pick.slice(8)];
+      if (ref) return meta ? CHARACTERS(ref, false, meta) : ref;
+      return CHARACTERS(randomKey(t, c), false, meta);
+    }
+    if (pick === 'random') return CHARACTERS(randomKey(t, c), false, meta);
+    return CHARACTERS(pick, false, meta);
+  };
+
+  const refreshBrawlerOptions = () => {
+    brawlerOpts = $.characters.map((c, i) => ({
+      value: `brawler:${i}`,
+      name: `★ ${CHARACTERS(c, true).name}`,
+    }));
+    s.rosterRows = buildRosterRows(s.slots);
+  };
+  refreshBrawlerOptions();
+
+  window.debugInitialize = () => {
+    const teams = s.slots
+      .map((team, t) => team.map((cfg, c) => resolvePick(cfg.pick, t, c, cfg.overrides)))
+      .filter((team) => team.length);
+    // Heal every team to full. prepareTeams only heals the opponent side (team 0
+    // keeps its live HP in real combat), but on the debug bench both sides should
+    // start fresh — otherwise a roster brawler picked on the left arrives damaged.
+    $.combat = {
+      ...structuredClone(INITIAL_COMBAT),
+      teamsStartState: prepareTeams(...teams.map((team) => healFull(team))),
+    };
+  };
+
+  window.debugStartCombat = () => {
+    $.combat = generateCombat(
+      JSON.parse(JSON.stringify($.combat.teamsStartState)),
+      'myseed',
+      s.fightId || 'queen-arachnae',
+    );
+  };
+
+  window.debugReset = () => {
+    $.combat = structuredClone(INITIAL_COMBAT);
+    $.liveTeams = [];
+    $.elapsedMilliseconds = 0;
+    debugInitialize();
+  };
+
+  window.debugResizeTeams = (teamCount) => {
+    s.teamCount = teamCount;
+    s.fightId = '';
+    setSlots(defaultSlots(teamCount, s.combatantCount, s.slots));
+    persist();
+    debugInitialize();
+  };
+
+  window.debugResizeCombatants = (combatantCount) => {
+    s.combatantCount = combatantCount;
+    s.fightId = '';
+    setSlots(defaultSlots(s.teamCount, combatantCount, s.slots));
+    persist();
+    debugInitialize();
+  };
+
+  window.debugLoadFight = (fightId) => {
+    if (!fightId) {
+      s.fightId = '';
+      setSlots(defaultSlots(s.teamCount, s.combatantCount));
+      persist();
+      debugInitialize();
+      return;
+    }
+    const fight = ALL_FIGHTS.find((f) => f.id === fightId);
+    s.fightId = fightId;
+    s.teamCount = 2;
+    setSlots([
+      s.slots[0] || [defaultSlot(0, 0)],
+      fight.characters.map((ref) => ({
+        pick: ref.id,
+        overrides: ref.overrides ? JSON.parse(JSON.stringify(ref.overrides)) : null,
+      })),
+    ]);
+    persist();
+    debugInitialize();
+  };
+
+  window.debugPickSlot = (t, c, value) => {
+    const slots = s.slots.map((row) => [...row]);
+    slots[t][c] = { pick: value, overrides: null };
+    setSlots(slots);
+    persist();
+    debugInitialize();
+  };
+
+  window.debugClearSaved = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    s.teamCount = 2;
+    s.combatantCount = 1;
+    s.fightId = '';
+    setSlots(defaultSlots(2, 1));
+    debugInitialize();
+  };
+
+  // --- Combatant configuration modal (session-only overrides on one slot) ---
+  let sheetKey = 0;
+
+  const modalOverrides = (modal) => ({
+    level: modal.level,
+    equipment: Object.fromEntries(
+      modal.equipment.map((r) => [
+        r.slot,
+        r.id ? { id: r.id, ...(r.level ? { overrides: { level: r.level } } : {}) } : null,
+      ]),
+    ),
+    abilities: modal.abilities.map((r) => ({ id: r.id, overrides: { ticks: r.ticks } })),
+  });
+
+  const modalRecompute = (patch) => {
+    const modal = { ...s.modal, ...patch };
+    modal.equipment = modal.equipment.map((row) => ({
+      ...row,
+      options: equipOptions[row.slot].map((opt) => ({ ...opt, selected: opt.key === row.id })),
+    }));
+    modal.abilities = modal.abilities.map((row, i) => ({
+      ...row,
+      key: `ability-${i}`,
+      options: abilityOptions.map((opt) => ({ ...opt, selected: opt.key === row.id })),
+    }));
+    const hydrated = CHARACTERS(
+      resolvePick(modal.pick, modal.team, modal.slot, modalOverrides(modal)),
+      true,
+    );
+    const groups = buildStatGroups(calculateCombatStatsByCharacter(hydrated), hydrated);
+    modal.sheet = [
+      {
+        key: ++sheetKey,
+        rowsMain: [...groups.base, ...groups.lucky],
+        rowsOther: [...groups.resistances, ...groups.other],
+      },
+    ];
+    s.modal = modal;
+  };
+
+  window.debugConfigureSlot = (t, c) => {
+    const cfg = s.slots[t][c];
+    const hydrated = CHARACTERS(resolvePick(cfg.pick, t, c, cfg.overrides), true);
+    modalRecompute({
+      open: true,
+      team: t,
+      slot: c,
+      pick: cfg.pick,
+      name: hydrated.name,
+      level: hydrated.level || 1,
+      equipment: Object.keys(EQUIP_SLOT_ACCEPTS).map((slot) => {
+        const eq = hydrated.equipment?.[slot];
+        const h = eq?.id ? EQUIPMENT(eq, true) : null;
+        return { slot, label: slotsInPrettyName(slot), id: h?.id || '', level: h?.level || 0 };
+      }),
+      abilities: (hydrated.abilities || []).map((a) => ({
+        id: a.id,
+        ticks: ABILITIES(a, true).ticks || ALL_ABILITIES[a.id]?.ticks || 1,
+      })),
+    });
+  };
+
+  window.debugModalLevel = (level) => modalRecompute({ level });
+  window.debugModalEquip = (row, value) =>
+    modalRecompute({
+      equipment: s.modal.equipment.map((r) =>
+        r.slot === row.slot ? { ...r, id: value, level: value ? r.level : 0 } : r,
+      ),
+    });
+  window.debugModalEquipLevel = (row, level) =>
+    modalRecompute({
+      equipment: s.modal.equipment.map((r) => (r.slot === row.slot ? { ...r, level } : r)),
+    });
+  window.debugModalAbility = (index, value) =>
+    modalRecompute({
+      abilities: s.modal.abilities.map((r, i) =>
+        i === index ? { ...r, id: value, ticks: ALL_ABILITIES[value]?.ticks || r.ticks } : r,
+      ),
+    });
+  window.debugModalAbilityTicks = (index, ticks) =>
+    modalRecompute({
+      abilities: s.modal.abilities.map((r, i) => (i === index ? { ...r, ticks } : r)),
+    });
+  window.debugModalRemoveAbility = (index) =>
+    modalRecompute({ abilities: s.modal.abilities.filter((_, i) => i !== index) });
+  window.debugModalAddAbility = () =>
+    modalRecompute({ abilities: [...s.modal.abilities, { id: 'punch', ticks: 2 }] });
+
+  window.debugModalClose = () => (s.modal = { ...s.modal, open: false });
+
+  window.debugModalReset = () => {
+    const { team, slot } = s.modal;
+    const slots = s.slots.map((row) => [...row]);
+    slots[team][slot] = { pick: slots[team][slot].pick, overrides: null };
+    setSlots(slots);
+    s.modal = { ...s.modal, open: false };
+    persist();
+    debugInitialize();
+  };
+
+  window.debugModalApply = () => {
+    const { team, slot } = s.modal;
+    const slots = s.slots.map((row) => [...row]);
+    slots[team][slot] = { pick: s.modal.pick, overrides: modalOverrides(s.modal) };
+    setSlots(slots);
+    s.modal = { ...s.modal, open: false };
+    persist();
+    debugInitialize();
+  };
+
+  debugInitialize();
+
+  $.on('afterUpdate', (current, prev) => {
+    if (current.characters === prev.characters) return;
+    refreshBrawlerOptions();
+    // Skip re-init while combat has been started (running or showing results).
+    // teamsEndState is populated by generateCombat and cleared by resetCombat.
+    const combatStarted =
+      current.combat?.duration > 0 || (current.combat?.teamsEndState?.length || 0) > 0;
+    if (!combatStarted) debugInitialize();
+  });
+</script>
+
+<debug-stage>
+  <!-- if combat.teamsStartState.length -->
+    <component src="/components/Combat.html"></component>
+  <!-- /if -->
+</debug-stage>
+
+<sticky reverse sticky-bar auto-shadow glass debug-sticky>
+  <debug-panel>
+    <debug-group>
+      <dev-label>Arena</dev-label>
+      <span text-sm>Teams @[this.teamCount]</span>
+      <input
+        type="range"
+        secondary
+        min="1"
+        max="8"
+        value="@[this.teamCount]"
+        oninput="debugResizeTeams(+this.value)"
+      />
+      <span text-sm>Combatants @[this.combatantCount]</span>
+      <input
+        type="range"
+        secondary
+        min="1"
+        max="6"
+        value="@[this.combatantCount]"
+        oninput="debugResizeCombatants(+this.value)"
+      />
+      <dev-label>Select fight template</dev-label>
+      <label>
+        <select onchange="debugLoadFight(this.value)">
+          <option value="" selected="@[!this.fightId]">Custom (sliders)</option>
+          <!-- each this.fightOptions as f (f.id) -->
+            <option value="@[f.id]" selected="@[f.id === this.fightId]">@[f.name]</option>
+          <!-- /each -->
+        </select>
+      </label>
+    </debug-group>
+
+    <debug-group roster-group>
+      <dev-label>Roster</dev-label>
+      <debug-roster>
+        <!-- each this.rosterRows as row (row.key) -->
+          <!-- if row.teamLabel -->
+            <roster-team-label>@[row.teamLabel]</roster-team-label>
+          <!-- /if -->
+          <crow g="2" w="full">
+            <label f="1">
+              <select onchange="debugPickSlot(row.t, row.c, this.value)">
+                <!-- each row.options as opt (opt.value) -->
+                  <option value="@[opt.value]" selected="@[opt.selected]">@[opt.name]</option>
+                <!-- /each -->
+              </select>
+            </label>
+            <button
+              secondary
+              f="none"
+              configured="@[row.configured]"
+              onclick="debugConfigureSlot(row.t, row.c)"
+              aria-label="Configure combatant"
+            >
+              <icon cog></icon>
+            </button>
+          </crow>
+        <!-- /each -->
+      </debug-roster>
+    </debug-group>
+
+    <debug-group>
+      <dev-label>Tools</dev-label>
+      <button secondary onclick="debugClearSaved()">Clear saved setup</button>
+      <crow g="2" w="full">
+        <button secondary f="1" onclick="debugReset()">Reset</button>
+        <button secondary f="1" onclick="debugStartCombat()" disabled="@[combat?.duration !== 0]">
+          Start combat
+        </button>
+      </crow>
+      <crow g="2" w="full">
+        <button secondary f="1" onclick="document.dispatchEvent(new CustomEvent('pauseCombat'))">
+          Pause
+        </button>
+        <button secondary f="1" onclick="document.dispatchEvent(new CustomEvent('resumeCombat'))">
+          Resume
+        </button>
+      </crow>
+      <dev-label>Combat speed</dev-label>
+      <label>
+        <select onchange="$.combatSpeed = +this.value">
+          <option value="0.25">0.25×</option>
+          <option value="0.5">0.5×</option>
+          <option value="1" selected>Default</option>
+          <option value="2">2×</option>
+          <option value="4">4×</option>
+        </select>
+      </label>
+      <crow justify-between w="full" text-sm>
+        <strong>@[(elapsedMilliseconds / 1000).toFixed(1)]s</strong>
+        <span>@[(combat.duration / 1000).toFixed(1)]s</span>
+      </crow>
+      <progress
+        value="@[Math.min(elapsedMilliseconds, combat.duration)]"
+        max="@[combat.duration || 1]"
+      ></progress>
+    </debug-group>
+  </debug-panel>
+</sticky>
+
+<modal-root fullscreen open="@[this.modal.open]">
+  <debug-modal>
+    <debug-modal-header>
+      <h3 cinzel m="0">Configure | @[this.modal.name] — Team @[this.modal.team + 1]</h3>
+      <crow g="2" f="none">
+        <button secondary sm onclick="debugModalReset()">Reset overrides</button>
+        <component src="/components/buttons/Cross.html" label="Close" onclick="debugModalClose()">
+        </component>
+      </crow>
+    </debug-modal-header>
+
+    <debug-modal-columns>
+      <debug-modal-pane>
+        <dev-label>Level @[this.modal.level]</dev-label>
+        <input
+          type="range"
+          min="1"
+          max="25"
+          value="@[this.modal.level]"
+          oninput="debugModalLevel(+this.value)"
+        />
+
+        <dev-label>Equipment</dev-label>
+        <!-- each this.modal.equipment as row (row.slot) -->
+          <crow g="1" w="full">
+            <span text-sm f="none" debug-slot-label>@[row.label]</span>
+            <label f="1">
+              <select onchange="debugModalEquip(row, this.value)">
+                <option value="" selected="@[!row.id]">—</option>
+                <!-- each row.options as opt -->
+                  <option value="@[opt.key]" selected="@[opt.selected]">@[opt.name]</option>
+                <!-- /each -->
+              </select>
+            </label>
+            <input
+              type="number"
+              min="0"
+              max="25"
+              debug-number
+              value="@[String(row.level)]"
+              oninput="debugModalEquipLevel(row, +this.value)"
+            />
+          </crow>
+        <!-- /each -->
+
+        <dev-label>Abilities (id · ticks)</dev-label>
+        <!-- each this.modal.abilities as row (row.key), ai -->
+          <crow g="1" w="full">
+            <label f="1">
+              <select onchange="debugModalAbility(ai, this.value)">
+                <!-- each row.options as opt -->
+                  <option value="@[opt.key]" selected="@[opt.selected]">@[opt.name]</option>
+                <!-- /each -->
+              </select>
+            </label>
+            <input
+              type="number"
+              min="1"
+              max="12"
+              debug-number
+              value="@[String(row.ticks)]"
+              oninput="debugModalAbilityTicks(ai, +this.value)"
+            />
+            <button tertiary sm f="none" onclick="debugModalRemoveAbility(ai)" aria-label="Remove">
+              <icon cross></icon>
+            </button>
+          </crow>
+        <!-- /each -->
+        <button secondary sm onclick="debugModalAddAbility()">Add ability</button>
+      </debug-modal-pane>
+
+      <debug-modal-pane>
+        <!-- each this.modal.sheet as sheet (sheet.key) -->
+          <component
+            src="/components/StatGroup.html"
+            title="Stats"
+            rows="@[sheet.rowsMain]"
+          ></component>
+          <component
+            src="/components/StatGroup.html"
+            title="Limits, resistances & other"
+            rows="@[sheet.rowsOther]"
+          ></component>
+        <!-- /each -->
+      </debug-modal-pane>
+    </debug-modal-columns>
+
+    <sticky sticky-bar reverse debug-modal-foot>
+      <crow right w="full" debug-modal-save>
+        <button primary onclick="debugModalApply()">Apply</button>
+      </crow>
+    </sticky>
+  </debug-modal>
+</modal-root>
+
+<style>
+  page-content:has(debug-panel) {
+    padding: 0;
+    gap: 0;
+    min-height: calc(100dvh - var(--unit) * 12);
+  }
+
+  debug-stage {
+    flex: 1;
+    display: grid;
+    place-items: center;
+    min-height: calc(var(--unit) * 150);
+  }
+
+  [debug-sticky] {
+    max-height: 50dvh;
+    overflow-y: auto;
+    border-top: 1px solid var(--scrim-2);
+  }
+
+  debug-panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: calc(var(--unit) * 8);
+    padding: calc(var(--unit) * 5);
+  }
+
+  debug-group {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 2);
+    width: calc(var(--unit) * 64);
+  }
+
+  debug-group[roster-group] {
+    flex: 1;
+    width: auto;
+    min-width: calc(var(--unit) * 64);
+  }
+
+  debug-group dev-label:not(:first-child) {
+    margin-top: calc(var(--unit) * 2);
+  }
+
+  debug-roster {
+    columns: 3;
+    column-gap: calc(var(--unit) * 4);
+  }
+
+  debug-roster > * {
+    break-inside: avoid;
+    margin-bottom: calc(var(--unit) * 2);
+  }
+
+  debug-group > button {
+    width: 100%;
+  }
+
+  debug-roster label {
+    min-width: 0;
+  }
+
+  debug-panel input[type='range'],
+  debug-panel progress {
+    width: 100%;
+    min-width: 0;
+  }
+
+  debug-panel select,
+  debug-modal select {
+    width: 100%;
+    min-width: 0;
+  }
+
+  roster-team-label {
+    font-size: calc(var(--unit) * 2.5);
+    color: var(--muted-foreground);
+  }
+
+  debug-roster button[configured] {
+    background-color: oklch(from var(--primary) l c h / 0.25);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.4);
+  }
+
+  debug-modal {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 4);
+    width: calc(100vw - var(--unit) * 8);
+    height: calc(100dvh - var(--unit) * 8);
+    padding: calc(var(--unit) * 5);
+    background: oklch(from var(--background) calc(l + 0.02) c h);
+    border-radius: calc(var(--unit) * 1);
+    overflow-y: auto;
+  }
+
+  debug-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--unit) * 3);
+  }
+
+  [debug-modal-foot] {
+    margin-top: auto;
+  }
+
+  [debug-modal-save] {
+    padding: calc(var(--unit) * 2) 0;
+    background: oklch(from var(--background) calc(l + 0.02) c h);
+  }
+
+  debug-modal-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--unit) * 6);
+    flex: 1;
+    align-items: start;
+    min-height: 0;
+  }
+
+  debug-modal-pane {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 2);
+    min-width: 0;
+  }
+
+  debug-modal-pane dev-label:not(:first-child) {
+    margin-top: calc(var(--unit) * 3);
+  }
+
+  [debug-slot-label] {
+    width: calc(var(--unit) * 20);
+    color: var(--muted-foreground);
+  }
+
+  input[debug-number] {
+    width: calc(var(--unit) * 16);
+    flex: none;
+  }
+
+  @media (width <= 1024px) {
+    debug-modal-columns {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/components/DevBar.html b/components/DevBar.html
new file mode 100644
index 00000000..099dae2a
--- /dev/null
+++ b/components/DevBar.html
@@ -0,0 +1,257 @@
+<script type="module">
+  import { RECRUITABLE_CHARACTERS } from '/js/constants/RECRUITABLE_CHARACTERS.js';
+  import CHARACTERS from '/js/constants/CHARACTERS.js';
+  import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+  import { calculateDefaultAbilitiesByCharacter } from '/js/utils.js';
+  import { correctHealth } from '/js/equipment.js';
+  import { getExperienceByLevel } from '/js/level.js';
+
+  window.devGainPotion = () => ($.potions = Math.min($.potions + 1, allowedNumberOfPotions()));
+
+  window.devDamageParty = () => {
+    $.characters.forEach((c) => {
+      try {
+        const ch = CHARACTERS(c, true);
+        c.overrides.combatStats.currentHealth = ch.combatStats.currentHealth - 5;
+      } catch {}
+    });
+  };
+
+  window.gainLevel = () => {
+    const level = getLevelByExperience($.experience);
+    $.experience = Math.ceil(getExperienceByLevel(level + 1));
+  };
+
+  // Reset to a brand-new account's state (matches the app.js defaults) and clear
+  // account-level premium server-side. A fresh account is non-premium, so it gets
+  // no Heirloom (a Battle Pass reward) — the pass purchase flow re-grants it.
+  window.devResetToDefault = () => {
+    $.characters = [];
+    $.inventory = [];
+    $.statistics = {};
+    $.achievements = {};
+    $.experience = 0;
+    $.coins = 100;
+    $.accountRewards = 1;
+    $.potions = 3;
+    $.bossHighscore = 0;
+    $.buildings = { medicum: { assignedBrawlers: [] }, palaestra: { assignedBrawlers: [] } };
+    $.seasonPass = { heirloom: false };
+    $.premiumUntil = 0;
+    $.isPremiumNow = false;
+    if ($.socket && $.token)
+      $.socket
+        .sendAsync('user/clear-pass', { token: $.token })
+        .catch((e) => window.notify?.(e?.error || 'Could not clear premium'));
+  };
+
+  // Vendor tiers mirror the Armory: each merchant sells armory gear within its
+  // level band. Blueprints kit brawlers from one merchant — Mira (5), Brog (12),
+  // Grukk (18), Nibsy (25). Nibsy has no stock yet, so it falls back to Grukk.
+  const MERCHANT_TIERS = [1, 5, 12, 18, 25];
+  const BLUEPRINT_TIER = { 5: 5, 10: 5, 15: 12, 20: 18, 25: 25 };
+
+  const vendorStock = (minLevel) => {
+    const next = MERCHANT_TIERS.find((t) => t > minLevel);
+    const max = next ? next - 1 : Infinity;
+    return Object.keys(ALL_EQUIPMENT)
+      .map((id) => ({ id, ...EQUIPMENT(id, true) }))
+      .filter((i) => (i.obtainedFrom ?? ['armory']).includes('armory'))
+      .filter((i) => i.level >= minLevel && i.level <= max);
+  };
+
+  // One of each piece the vendor sells: a one-hand weapon keeps the off-hand free
+  // for its shield, so both hands fill; a two-hander occupies the off-hand alone.
+  const vendorLoadoutIds = (minLevel) => {
+    const stock = vendorStock(minLevel);
+    const firstId = (slotsIn) => stock.find((i) => i.slotsIn === slotsIn)?.id || null;
+    const oneHand = firstId('oneHand');
+    return {
+      mainHand: oneHand || firstId('twoHand'),
+      offHand: oneHand ? firstId('offHand') : null,
+      armor: firstId('armor'),
+      accessory: firstId('accessory'),
+      trinket: firstId('trinket'),
+    };
+  };
+
+  const blueprintItem = (id) => {
+    if (!id) return null;
+    const item = EQUIPMENT(id);
+    item.overrides = { level: EQUIPMENT(id, true).level };
+    return item;
+  };
+
+  // A two-handed slam weapon so calculated abilities come out as Slams (the vendor's
+  // one-hander + shield resolve to Cuts); scaled to the blueprint level.
+  const slamWeapon = (level) => {
+    const item = EQUIPMENT('heavyClub');
+    item.overrides = { level };
+    return item;
+  };
+
+  window.devBlueprint = (n) => {
+    $.experience = getExperienceByLevel(n);
+    $.accountRewards = n;
+    $.bossHighscore = n;
+
+    let ids = vendorLoadoutIds(BLUEPRINT_TIER[n]);
+    if (!Object.values(ids).some(Boolean)) ids = vendorLoadoutIds(18);
+
+    const count = Math.floor(n / 5) + 1; // allowedNumberOfBrawlers at this reward count
+    $.characters = RECRUITABLE_CHARACTERS.slice(0, 5)
+      .slice(0, count)
+      .map((ref) => {
+        const overrides = JSON.parse(JSON.stringify(ref.overrides || {}));
+        overrides.equipment = {
+          mainHand: slamWeapon(n),
+          offHand: null,
+          armor: blueprintItem(ids.armor),
+          accessory: blueprintItem(ids.accessory),
+          trinket: blueprintItem(ids.trinket),
+        };
+        const recruit = { uuid: crypto.randomUUID(), id: ref.id, overrides };
+        recruit.overrides.abilities = calculateDefaultAbilitiesByCharacter(
+          CHARACTERS(recruit, true),
+        );
+        correctHealth(recruit);
+        return recruit;
+      });
+  };
+</script>
+
+<crow up left sm g="6" p="4" pt="8" w="full" sm:vertical dev-bar>
+  <crow vertical up left g="2">
+    <dev-label>State</dev-label>
+    <crow g="2" w="full">
+      <button primary f="1" onclick="devDamageParty()">Damage party</button>
+      <button primary f="1" onclick="devGainPotion()">Gain potion</button>
+    </crow>
+    <crow g="2" w="full">
+      <button primary danger f="1" onclick="$.experience = 0">Reset levels</button>
+      <button primary f="1" onclick="gainLevel()">Increase level</button>
+    </crow>
+    <crow g="2" w="full">
+      <button primary danger f="1" onclick="$.coins = 0">Reset crystals</button>
+      <button primary f="1" onclick="$.coins += 100">Gain crystal</button>
+    </crow>
+    <crow g="2" w="full">
+      <button primary danger f="1" onclick="$.bossHighscore = 0">Reset boss</button>
+      <button primary f="1" onclick="$.bossHighscore += 1">Increase boss</button>
+    </crow>
+    <crow g="2" w="full">
+      <button primary danger f="1" onclick="$.accountRewards = 1">Reset rewards</button>
+      <button primary f="1" onclick="$.accountRewards += 1">Increase reward</button>
+    </crow>
+    <crow g="2" w="full">
+      <button primary danger f="1" onclick="$.characters = []">Reset characters</button>
+      <button primary danger f="1" onclick="$.inventory = []">Reset inventory</button>
+    </crow>
+    <crow g="2" w="full">
+      <button primary danger f="1" onclick="devResetToDefault()">Reset to default</button>
+      <button
+        primary
+        danger
+        f="1"
+        onclick="
+          localStorage.clear();
+          location.reload();
+        "
+      >
+        Clear localStorage
+      </button>
+    </crow>
+    <crow g="2" w="full" blueprints>
+      <button primary f="1" onclick="devBlueprint(5)">Blueprint 5</button>
+      <button primary f="1" onclick="devBlueprint(10)">Blueprint 10</button>
+      <button primary f="1" onclick="devBlueprint(15)">Blueprint 15</button>
+      <button primary f="1" onclick="devBlueprint(20)">Blueprint 20</button>
+      <button primary f="1" onclick="devBlueprint(25)">Blueprint 25</button>
+    </crow>
+  </crow>
+
+  <crow up left g="3" sm:vertical dev-pages>
+    <crow vertical up left g="2">
+      <dev-label>Tools</dev-label>
+      <a href="/admin" primary>Admin</a>
+      <a href="/_internal/sounds" primary>Audio</a>
+      <a href="/_internal/characters" primary>Characters</a>
+      <a href="/_internal/equipment" primary>Equipment</a>
+      <a href="/_internal/imagegen" primary>Imagegen</a>
+      <a href="/_internal/test-combat" primary>Test Combat</a>
+      <a href="/_internal/combat-components" primary>View Combat</a>
+    </crow>
+
+    <crow vertical up left g="2">
+      <dev-label>Balance</dev-label>
+      <a href="/_internal/ability-scaling" primary>Ability Scaling</a>
+      <a href="/_internal/character-scaling" primary>Character Scaling</a>
+      <a href="/_internal/equipment-scaling" primary>Equipment Scaling</a>
+    </crow>
+
+    <crow vertical up left g="2">
+      <dev-label>UI</dev-label>
+      <a href="/_internal/colors" primary>Colors</a>
+      <a href="/_internal/form-elements" primary>Form</a>
+      <a href="/_internal/global-components" primary>Globals</a>
+      <a href="/_internal/icons" primary>Icons</a>
+      <a href="/_internal/rewards-box-designs" primary>Rewards Box</a>
+      <a href="/_internal/tooltips" primary>Tooltips</a>
+    </crow>
+
+    <crow vertical up left g="2">
+      <dev-label>Temp</dev-label>
+      <a href="/_internal/ability-designs" primary>Ability Designs</a>
+      <a href="/_internal/achievements" primary>Achievements</a>
+      <a href="/_internal/card-hand" primary>Card Hand</a>
+      <a href="/_internal/inventory" primary>Inventory</a>
+      <a href="/_internal/spa-testing" primary>SPA Testing</a>
+    </crow>
+  </crow>
+
+  <crow vertical up left g="2">
+    <dev-label>Server clock</dev-label>
+    <span>Synced: <strong>@[new Date(clock.server).toLocaleString()]</strong></span>
+    <span>Now: <strong>@[new Date(clock.now).toLocaleString()]</strong></span>
+    <span>Season <strong>@[season]</strong> · @[seasonName(season)]</span>
+    <label w="full">
+      <select onchange="devJumpToSeason(+this.value)">
+        <!-- each devSeasonOptions as opt -->
+          <option value="@[opt.number]" selected="@[opt.number === season]">@[opt.label]</option>
+        <!-- /each -->
+      </select>
+    </label>
+    <crow g="2" w="full">
+      <button primary f="1" onclick="devJumpToDowntime()">Jump to downtime</button>
+      <button primary danger f="1" onclick="devResetClock()">Reset clock</button>
+    </crow>
+  </crow>
+</crow>
+
+<style>
+  [dev-bar] {
+    flex-wrap: wrap;
+  }
+
+  [dev-bar] > crow,
+  [dev-pages] > crow {
+    flex: 1 1 0;
+    width: auto;
+    height: auto;
+  }
+
+  [dev-bar] > [dev-pages] {
+    flex: 2 1 0;
+  }
+
+  dev-label {
+    font-size: calc(var(--unit) * 2.5);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+
+  [blueprints] {
+    flex-wrap: wrap;
+  }
+</style>
diff --git a/components/Dialog.html b/components/Dialog.html
new file mode 100644
index 00000000..70366970
--- /dev/null
+++ b/components/Dialog.html
@@ -0,0 +1,57 @@
+<card dialog-card p="6" sm:p="2" position="relative">
+  <component src="/components/buttons/Cross.html" label="Close" onclick="$.overlay = {}">
+  </component>
+  <!-- if title -->
+    <crow dialog-header left g="2" w="full">
+      <!-- if back -->
+        <button tertiary f="none" dialog-back onclick="@[back]" aria-label="Back">
+          <icon chevron rotate="90"></icon>
+        </button>
+      <!-- /if -->
+      <h3 cinzel dialog-title>@[title]</h3>
+    </crow>
+  <!-- /if -->
+  <card dialog-content>
+    <slot></slot>
+  </card>
+</card>
+
+<style>
+  [dialog-card] {
+    min-width: calc(var(--unit) * 150);
+    max-width: calc(var(--unit) * 120);
+    border-radius: calc(var(--unit) * 1);
+    background: var(--modal-frame);
+    box-shadow:
+      0 0 0 1px oklch(from var(--foreground) l c h / 0.1),
+      0 calc(var(--unit) * 4) calc(var(--unit) * 10) -2px var(--scrim-2);
+  }
+
+  [dialog-header] {
+    margin-bottom: calc(var(--unit) * 4);
+    padding-right: calc(var(--unit) * 10);
+  }
+
+  [dialog-title] {
+    margin: 0;
+    color: var(--primary);
+  }
+
+  [dialog-back] {
+    margin-left: calc(var(--unit) * -2);
+  }
+
+  [dialog-card] [cross-button] {
+    position: absolute;
+    top: calc(var(--unit) * 2);
+    right: calc(var(--unit) * 2);
+  }
+
+  @media (width <= 768px) {
+    [dialog-card] {
+      width: 100%;
+      min-width: 0;
+      max-width: none;
+    }
+  }
+</style>
diff --git a/components/EmperorCutscene.html b/components/EmperorCutscene.html
new file mode 100644
index 00000000..bc7cdcc2
--- /dev/null
+++ b/components/EmperorCutscene.html
@@ -0,0 +1,104 @@
+<script type="module">
+  const s = $[component({ lit: false })];
+
+  let triggered = false;
+  let started = false;
+
+  window.endEmperorCutscene = () => {
+    if (!$.cutscene) return;
+    s.lit = false;
+    started = false;
+    $.cutscene = null;
+  };
+
+  // Only play when the cutscene is genuinely active. Vibe momentarily mounts the
+  // conditional content while processing the component on page load; without this
+  // guard that transient <video> fires `canplay` and plays its audio detached.
+  // The `started` flag also keeps repeated `canplay` events from restarting it.
+  window.playEmperorCutscene = (el) => {
+    if (started || $.cutscene !== 'emperor') return;
+    started = true;
+    s.lit = true;
+    el.play?.().catch(() => {});
+  };
+
+  window.__emperorCutsceneUnsub?.();
+  window.__emperorCutsceneUnsub = $.on('afterUpdate', (current) => {
+    const ended =
+      current.combat?.duration > 0 && current.elapsedMilliseconds >= current.combat.duration;
+    if (!ended) {
+      triggered = false;
+      return;
+    }
+    // combatOutcome is defined by the Combat component (mounted during a fight).
+    const firstEmperorWin =
+      current.combat?.fightId === 'the-emperor' &&
+      window.combatOutcome?.(current.combat) === 'victory' &&
+      (current.bossHighscore || 0) < 15;
+    if (firstEmperorWin && !triggered) {
+      triggered = true;
+      $.cutscene = 'emperor';
+    }
+  });
+</script>
+
+<!-- if cutscene === 'emperor' -->
+  <emperor-cutscene lit="@[this.lit]" onclick="event.stopPropagation()">
+    <video
+      data-src="@[cutscene === 'emperor' ? '/static/videos/emperor-defeat.mp4' : '']"
+      playsinline
+      oncanplay="playEmperorCutscene(this)"
+      onended="endEmperorCutscene()"
+    ></video>
+    <button skip onclick="endEmperorCutscene()">Skip ›</button>
+  </emperor-cutscene>
+<!-- /if -->
+
+<style>
+  emperor-cutscene {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-cutscene);
+    display: grid;
+    place-items: center;
+    background: var(--black);
+    pointer-events: auto;
+  }
+
+  emperor-cutscene video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0;
+    transition: opacity 600ms ease;
+  }
+
+  emperor-cutscene[lit] video {
+    opacity: 1;
+  }
+
+  emperor-cutscene button[skip] {
+    position: absolute;
+    right: calc(var(--unit) * 4);
+    bottom: calc(var(--unit) * 4);
+    padding: calc(var(--unit) * 2) calc(var(--unit) * 4);
+    border: 1px solid var(--sheen-3);
+    border-radius: var(--radius);
+    background: var(--scrim-2);
+    color: var(--white);
+    font-size: calc(var(--unit) * 3.5);
+    letter-spacing: 0.06em;
+    opacity: 0;
+    animation: cutscene-skip-in 400ms ease 2s forwards;
+  }
+
+  @keyframes cutscene-skip-in {
+    to {
+      opacity: 0.75;
+    }
+  }
+
+  emperor-cutscene button[skip]:hover {
+    opacity: 1;
+  }
+</style>
diff --git a/components/EquipmentCatalogRow.html b/components/EquipmentCatalogRow.html
new file mode 100644
index 00000000..266631bd
--- /dev/null
+++ b/components/EquipmentCatalogRow.html
@@ -0,0 +1,85 @@
+<tr game-table-row even="@[even]">
+  <td>
+    <eq-col-name>
+      <eq-name-target
+        onmouseenter="
+          showTooltip(
+            equipmentTooltipProps(EQUIPMENT(item.id, true)),
+            this.querySelector('eq-link') || this,
+            { direction: 'up', lock: true },
+          )
+        "
+        onmouseleave="hideTooltip()"
+      >
+        <component
+          src="/components/EquipmentLink.html"
+          level="@[item.level]"
+          name="@[item.name]"
+          element="@[item.element]"
+        >
+        </component>
+      </eq-name-target>
+    </eq-col-name>
+  </td>
+  <td><eq-col-level text-sm>@[item.level]</eq-col-level></td>
+  <td><eq-col-slot text-sm text-muted>@[item.slotLabel]</eq-col-slot></td>
+  <td>
+    <eq-col-races>
+      <!-- if item.races.length -->
+        <crow
+          g="1"
+          onmouseenter="
+            showTooltip({ description: equipRaceTooltip(item.races), plain: true }, this, {
+              direction: 'up',
+              lock: true,
+            })
+          "
+          onmouseleave="hideTooltip()"
+        >
+          <!-- each item.races as r (r.race) -->
+            <circle
+              fire="@[r.element === 'fire']"
+              frost="@[r.element === 'frost']"
+              earth="@[r.element === 'earth']"
+              nature="@[r.element === 'nature']"
+              lightning="@[r.element === 'lightning']"
+            ></circle>
+          <!-- /each -->
+        </crow>
+      <!-- /if -->
+    </eq-col-races>
+  </td>
+  <td>
+    <eq-col-ability>
+      <!-- each item.abilityRows as abilityRow, ri -->
+        <crow g="1">
+          <!-- each abilityRow as ability (ability.uuid) -->
+            <component src="/components/AbilityCell.html" ability="@[ability]"></component>
+          <!-- /each -->
+        </crow>
+      <!-- /each -->
+    </eq-col-ability>
+  </td>
+  <td>
+    <eq-col-stats text-sm>
+      <!-- each item.stats as stat -->
+        <eq-stat>
+          <component src="/components/IconCell.html" tip="@[{ stat: stat.icon }]">
+            <icon @[stat.icon]></icon>
+          </component>
+          <span
+            text-green="@[stat.percentage && parseFloat(stat.value) >= 0]"
+            text-red="@[parseFloat(stat.value) < 0]"
+            >@[stat.value]</span
+          >
+        </eq-stat>
+      <!-- /each -->
+    </eq-col-stats>
+  </td>
+  <td><eq-col-obtained text-sm text-muted>@[item.obtainedLabel]</eq-col-obtained></td>
+  <td>
+    <eq-col-action>
+      <button secondary sm onclick="acquireEquipment(item.id)">Acquire</button>
+    </eq-col-action>
+  </td>
+</tr>
diff --git a/components/EquipmentLink.html b/components/EquipmentLink.html
new file mode 100644
index 00000000..f9fbe846
--- /dev/null
+++ b/components/EquipmentLink.html
@@ -0,0 +1,10 @@
+<eq-link @[element]>
+  <!-- if element -->
+    <eq-link-hex>
+      <!-- if element !== 'all' -->
+        <icon @[element]></icon>
+      <!-- /if -->
+    </eq-link-hex>
+  <!-- /if -->
+  <eq-name>@[name]</eq-name>
+</eq-link>
diff --git a/components/EquipmentScalingContent.html b/components/EquipmentScalingContent.html
new file mode 100644
index 00000000..674413a2
--- /dev/null
+++ b/components/EquipmentScalingContent.html
@@ -0,0 +1,177 @@
+<script type="module">
+  import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+  import { STAT_LABELS, LUCKY_STATS, totalPower } from '/js/constants/STATS.js';
+
+  const LEVELS = Array.from({ length: 25 }, (_, i) => i + 1);
+  const GRAPH_STATS = [
+    'totalPower',
+    'damage',
+    'maxArmor',
+    'maxHealth',
+    'criticalChance',
+    'criticalDamage',
+    'blockChance',
+    'dodgeChance',
+    'magicChance',
+    'armorPenetration',
+    'provocation',
+  ];
+  const statLabel = (key) => (key === 'totalPower' ? 'Total power' : STAT_LABELS[key] || key);
+  const statValue = (stats, stat) =>
+    stat === 'totalPower' ? totalPower(stats, { additive: true }) : stats[stat] || 0;
+
+  const buildSeries = (keys, stat) =>
+    keys.map((key) => ({
+      name: ALL_EQUIPMENT[key]?.name || key,
+      values: LEVELS.map((level) => {
+        const stats = EQUIPMENT(EQUIPMENT(key, false, { overrides: { level } }), true).combatStats;
+        return statValue(stats || {}, stat);
+      }),
+    }));
+
+  const state = {
+    equipChoices: Object.keys(ALL_EQUIPMENT),
+    chosenEquip: 'sword',
+    equipPool: [],
+    graphStat: 'totalPower',
+    graphKeys: Object.keys(ALL_EQUIPMENT),
+    graphSeries: [],
+    graphPercent: false,
+    statOptions: GRAPH_STATS.map((key) => ({ key, label: statLabel(key) })),
+    graphOptions: Object.entries(ALL_EQUIPMENT).map(([key, e]) => ({ key, name: e.name })),
+  };
+
+  const compute = (chosen) =>
+    Array.from({ length: 13 }, (_, i) => {
+      const ref =
+        i === 0 ? EQUIPMENT(chosen) : EQUIPMENT(chosen, false, { overrides: { level: i } });
+      const hydrated = EQUIPMENT(ref, true);
+      return {
+        id: chosen,
+        label: i === 0 ? 'base' : `level ${i}`,
+        name: hydrated.name,
+        level: hydrated.level || 0,
+      };
+    });
+
+  state.equipPool = compute(state.chosenEquip);
+  state.graphSeries = buildSeries(state.graphKeys, state.graphStat);
+  const s = $[component(state)];
+
+  const recomputeGraph = () => {
+    s.graphSeries = buildSeries(s.graphKeys, s.graphStat);
+    s.graphPercent = LUCKY_STATS.includes(s.graphStat);
+  };
+
+  window.changeEquip = (value) => {
+    s.chosenEquip = value;
+    compute(value).forEach((eq, i) => Object.assign(s.equipPool[i], eq));
+  };
+
+  window.equipGraphStat = (value) => {
+    s.graphStat = value;
+    recomputeGraph();
+  };
+  window.equipGraphToggle = (key, checked) => {
+    s.graphKeys = checked ? [...s.graphKeys, key] : s.graphKeys.filter((k) => k !== key);
+    recomputeGraph();
+  };
+  window.equipGraphAll = () => {
+    s.graphKeys = s.graphOptions.map((o) => o.key);
+    recomputeGraph();
+  };
+  window.equipGraphNone = () => {
+    s.graphKeys = [];
+    recomputeGraph();
+  };
+</script>
+
+<crow vertical g="4" left>
+  <component src="/components/TitleBar.html" title="Equipment Scaling"></component>
+  <hr />
+
+  <label>
+    <select onchange="changeEquip(this.value)">
+      <!-- each this.equipChoices as choice -->
+        <option value="@[choice]" selected="@[choice === this.chosenEquip]">@[choice]</option>
+      <!-- /each -->
+    </select>
+  </label>
+
+  <crow vertical left g="2" w="full">
+    <!-- each this.equipPool as eq -->
+      <crow left g="2">
+        <span>@[eq.label]</span>
+        <eq-tooltip-target onmouseenter="showEquipmentTooltip(this, eq)">
+          <component
+            src="/components/EquipmentLink.html"
+            level="@[eq.level]"
+            name="@[eq.name]"
+            element="@[eq.element]"
+          >
+          </component>
+        </eq-tooltip-target>
+      </crow>
+    <!-- /each -->
+  </crow>
+
+  <hr />
+
+  <scaling-graph vertical left g="3" w="full">
+    <h5 m="0">Compare — stat per level</h5>
+    <scaling-controls>
+      <label>
+        <select onchange="equipGraphStat(this.value)">
+          <!-- each this.statOptions as opt (opt.key) -->
+            <option value="@[opt.key]" selected="@[opt.key === this.graphStat]">
+              @[opt.label]
+            </option>
+          <!-- /each -->
+        </select>
+      </label>
+      <crow g="1" f="none">
+        <button secondary sm onclick="equipGraphAll()">Select all</button>
+        <button secondary sm onclick="equipGraphNone()">Clear all</button>
+      </crow>
+      <scaling-picker>
+        <!-- each this.graphOptions as eq (eq.key) -->
+          <label crow g="1" text-sm>
+            <input
+              type="checkbox"
+              checked="@[this.graphKeys.includes(eq.key)]"
+              onchange="equipGraphToggle(eq.key, this.checked)"
+            />
+            @[eq.name]
+          </label>
+        <!-- /each -->
+      </scaling-picker>
+    </scaling-controls>
+    <component
+      src="/components/remote/LineGraph.html"
+      series="@[this.graphSeries]"
+      percent="@[this.graphPercent]"
+    ></component>
+  </scaling-graph>
+</crow>
+
+<style>
+  scaling-controls {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: calc(var(--unit) * 4);
+  }
+
+  scaling-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--unit) * 1) calc(var(--unit) * 3);
+    max-height: calc(var(--unit) * 36);
+    overflow-y: auto;
+    padding: calc(var(--unit) * 2);
+    border: 1px solid var(--scrim-1);
+    border-radius: calc(var(--unit) * 1);
+    flex: 1;
+    min-width: calc(var(--unit) * 60);
+  }
+</style>
diff --git a/components/EquipmentStats.html b/components/EquipmentStats.html
new file mode 100644
index 00000000..1cef5d2a
--- /dev/null
+++ b/components/EquipmentStats.html
@@ -0,0 +1,91 @@
+<card
+  text-sm
+  tooltip-card
+  tinted="@[props.element]"
+  @[props.element]
+  multi="@[props.multi]"
+  style="--spectrum-wash: @[elementSpectrum (props.elements, 'wash')]"
+>
+  <crow justify-between w="full" g="4">
+    <crow left g="2" f="1" tooltip-heading>
+      <!-- if props.multi -->
+        <element-hex all ml="-2"></element-hex>
+      <!-- /if -->
+      <!-- if props.element -->
+        <element-hex @[props.element] ml="-2">
+          <icon @[props.element]></icon>
+        </element-hex>
+      <!-- /if -->
+      <crow vertical left g="0">
+        <span tooltip-name equipment-name>@[props.name]</span>
+        <span slot-label>
+          <!-- if props.kind -->
+            <span kind-word @[props.element] multi="@[props.multi]">@[props.kind]</span>
+          <!-- /if -->
+          @[props.slotLabel]
+        </span>
+      </crow>
+    </crow>
+    <!-- if props.basicAbilities.length -->
+      <crow g="1" f="none" mr="-2" equipment-abilities>
+        <!-- each props.basicAbilities as ability (ability.uuid) -->
+          <component src="/components/AbilityCell.html" ability="@[ability]"></component>
+        <!-- /each -->
+      </crow>
+    <!-- /if -->
+  </crow>
+
+  <!-- if props.stats.length -->
+    <kingstone></kingstone>
+    <component src="/components/StatGroup.html" rows="@[props.stats]"></component>
+  <!-- /if -->
+
+  <!-- if props.specialAbilities.length -->
+    <kingstone></kingstone>
+    <!-- each props.specialAbilities as ability (ability.uuid) -->
+      <crow up left g="3">
+        <component src="/components/AbilityCell.html" ability="@[ability]"></component>
+        <crow vertical left g="0.5">
+          <strong @[ability.element] multi="@[ability.multi]">@[ability.name]</strong>
+          <span tooltip-desc>@[$.unsafe(ability.description)]</span>
+        </crow>
+      </crow>
+    <!-- /each -->
+    <!-- if props.description -->
+      <hr />
+    <!-- /if -->
+  <!-- /if -->
+
+  <!-- if props.description -->
+    <kingstone></kingstone>
+    <p tooltip-desc>@[$.unsafe(props.description)]</p>
+  <!-- /if -->
+
+  <!-- if settings.isTester && props.level -->
+    <crow w="full" mt="1">
+      <span cinzel text-xs>LEVEL @[props.level]</span>
+    </crow>
+  <!-- /if -->
+</card>
+
+<style>
+  [slot-label] {
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--unit) * 1);
+    font-size: calc(var(--unit) * 2.8);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+
+  [slot-label] [kind-word]:is([fire], [frost], [earth], [nature], [lightning]) {
+    font-weight: 600;
+    color: oklch(from var(--element-color) calc(l - 0.05 * var(--theme-sign)) c h);
+  }
+
+  [slot-label] [kind-word][multi] {
+    font-weight: 600;
+    color: oklch(from var(--hue-purple) calc(l - 0.05 * var(--theme-sign)) c h);
+  }
+</style>
diff --git a/components/FightButton.html b/components/FightButton.html
new file mode 100644
index 00000000..7a3dd5aa
--- /dev/null
+++ b/components/FightButton.html
@@ -0,0 +1,432 @@
+<script type="module">
+  import SFX from '/js/constants/SFX.js';
+
+  const swing = () => {
+    const variants = SFX.weaponSwing.variants;
+    const variant = variants[Math.floor(Math.random() * variants.length)];
+    try {
+      new window.Howl({
+        src: [window.AUDIO[variant]],
+        volume: ($.settings?.volume?.sfx ?? 1) * ($.settings?.volume?.master ?? 0.5),
+      }).play();
+    } catch {}
+  };
+
+  const swordsIn = (s) =>
+    s.selectedBrawlers.length &&
+    s.combat.duration === 0 &&
+    !anySelectedBrawlerKnockedOut(s.characters)
+      ? 2
+      : s.selectPress
+        ? 1
+        : 0;
+
+  let pressedAt = 0;
+  let swordTwoTimer = null;
+
+  $.on('afterUpdate', (current, prev) => {
+    const cur = swordsIn(current);
+    const was = swordsIn(prev);
+    if (cur === was) return;
+    if (cur > was && was === 0) {
+      pressedAt = performance.now();
+      swing();
+    }
+    if (cur === 2) {
+      clearTimeout(swordTwoTimer);
+      swordTwoTimer = setTimeout(
+        () => {
+          swordTwoTimer = null;
+          $.swordTwoIn = true;
+          swing();
+        },
+        Math.max(0, 250 - (performance.now() - pressedAt)),
+      );
+    } else if (swordTwoTimer || current.swordTwoIn) {
+      clearTimeout(swordTwoTimer);
+      swordTwoTimer = null;
+      $.swordTwoIn = false;
+    }
+  });
+</script>
+
+<sticky sticky-bar reverse w="full" sm:b="8" fight-bar>
+  <!-- if combat.duration === 0 && brawlHandCards(characters, selectedBrawlers).length && teamplayElsewhere() !== 'completed' -->
+    <card-hand-clip position="absolute">
+      <card-hand-mount
+        position="absolute"
+        onpointerdown="handCardPress(event)"
+        onpointercancel="handCardCancel()"
+        onclick="handCardClick(event)"
+      >
+        <component
+          src="/components/remote/CardHand.html"
+          cards="@[brawlHandCards(characters, selectedBrawlers)]"
+          flipped="@[selectedBrawlers.length >= maxBrawlers]"
+          angle="16"
+          distance="300"
+          size="58"
+        >
+        </component>
+      </card-hand-mount>
+    </card-hand-clip>
+  <!-- /if -->
+  <crow w="full" py="4" position="relative" fight-banner onmouseenter="showFightTooltip(this)">
+    <fight-clip>
+      <fight-plate hexagon far></fight-plate>
+      <fight-plate hexagon near></fight-plate>
+      <button
+        primary
+        alfa-slab
+        h="12"
+        onclick="@[onclick]"
+        disabled="@[!selectedBrawlers.length || combat.duration !== 0 || anySelectedBrawlerKnockedOut(characters) || teamplayElsewhere() === 'completed']"
+        armed="@[selectPress]"
+        swords-two="@[swordTwoIn]"
+        hexagon
+      >
+        <fight-sword one>
+          <svg viewBox="0 0 224 40" xmlns="http://www.w3.org/2000/svg">
+            <circle pommel cx="9" cy="20" r="7"></circle>
+            <rect grip x="14" y="16" width="30" height="8" rx="3"></rect>
+            <rect guard x="44" y="4" width="8" height="32" rx="3"></rect>
+            <path blade-hi d="M52 8 180 8 214 20 52 20 Z"></path>
+            <path blade-lo d="M52 20 214 20 180 32 52 32 Z"></path>
+          </svg>
+        </fight-sword>
+        <fight-sword two>
+          <svg viewBox="0 0 224 40" xmlns="http://www.w3.org/2000/svg">
+            <circle pommel cx="9" cy="20" r="7"></circle>
+            <rect grip x="14" y="16" width="30" height="8" rx="3"></rect>
+            <rect guard x="44" y="4" width="8" height="32" rx="3"></rect>
+            <path blade-hi d="M52 8 180 8 214 20 52 20 Z"></path>
+            <path blade-lo d="M52 20 214 20 180 32 52 32 Z"></path>
+          </svg>
+        </fight-sword>
+        <fight-label position="relative">Brawl</fight-label>
+      </button>
+    </fight-clip>
+
+    <!-- if settings.isTester -->
+      <fight-seed>
+        <label>seed</label>
+        <input
+          type="text"
+          spellcheck="false"
+          value="@[testerSeed]"
+          placeholder="@[combat.seed || 'random']"
+          oninput="$.testerSeed = this.value"
+        />
+      </fight-seed>
+    <!-- /if -->
+
+    <!-- if teamplayElsewhere() -->
+      <fight-elsewhere
+        onclick="resumeTeamplayCombat()"
+        concluded="@[teamplayElsewhere() === 'completed']"
+      >
+        <fight-elsewhere-text>
+          <!-- if teamplayElsewhere() === 'completed' -->
+            <strong lg>Fight concluded elsewhere!</strong>
+            <span>Press here to see the outcome</span>
+          <!-- else -->
+            <strong>Fight elsewhere in progress...</strong>
+          <!-- /if -->
+        </fight-elsewhere-text>
+        <fight-elsewhere-badge>!</fight-elsewhere-badge>
+      </fight-elsewhere>
+    <!-- /if -->
+  </crow>
+</sticky>
+
+<style>
+  [fight-banner] {
+    z-index: 1;
+    background: var(--bar-bg);
+  }
+
+  fight-seed {
+    position: absolute;
+    top: 50%;
+    left: calc(var(--unit) * 5);
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+    width: calc(var(--unit) * 42);
+  }
+
+  fight-seed label {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--c-muted);
+  }
+
+  fight-seed input {
+    width: 100%;
+  }
+
+  @media (width <= 768px) {
+    fight-seed {
+      left: calc(var(--unit) * 3);
+      width: calc(var(--unit) * 24);
+    }
+  }
+
+  fight-elsewhere {
+    position: absolute;
+    top: 50%;
+    right: calc(var(--unit) * 5);
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 3);
+    cursor: pointer;
+    text-align: right;
+  }
+
+  fight-elsewhere-text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.25;
+    font-size: calc(var(--unit) * 3.25);
+  }
+
+  fight-elsewhere-text strong {
+    color: var(--c-fg);
+  }
+
+  fight-elsewhere-text span {
+    color: var(--c-muted);
+  }
+
+  fight-elsewhere-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: calc(var(--unit) * 8);
+    height: calc(var(--unit) * 8);
+    border-radius: 50%;
+    background: var(--gold-deep);
+    color: var(--white);
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 5);
+    font-weight: 700;
+    box-shadow: 0 calc(var(--unit) * 0.5) var(--unit) var(--scrim-2);
+  }
+
+  @media (width <= 768px) {
+    fight-elsewhere {
+      right: calc(var(--unit) * 3);
+    }
+
+    fight-elsewhere-text {
+      display: none;
+    }
+  }
+
+  card-hand-clip {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    height: calc(var(--unit) * 150);
+    overflow: clip;
+    pointer-events: none;
+  }
+
+  card-hand-mount {
+    left: 50%;
+    bottom: calc(var(--unit) * 4);
+    width: calc(var(--unit) * 160);
+    height: calc(var(--unit) * 100);
+    transform: translate(-50%, calc(var(--unit) * 18));
+    pointer-events: none;
+  }
+
+  fight-clip {
+    --fight-sat: 1;
+    display: grid;
+    place-items: center;
+    flex: none;
+    overflow: clip;
+    padding: calc(var(--unit) * 40) calc(var(--unit) * 80) calc(var(--unit) * 4);
+    margin: calc(var(--unit) * -40) calc(var(--unit) * -80) calc(var(--unit) * -4);
+    pointer-events: none;
+  }
+
+  fight-clip > * {
+    grid-area: 1 / 1;
+  }
+
+  fight-clip:has(button:disabled) {
+    --fight-sat: 0.3;
+  }
+
+  fight-clip button {
+    pointer-events: auto;
+  }
+
+  fight-plate[near] {
+    width: calc(var(--unit) * 50);
+    height: calc(var(--unit) * 10.8);
+    background: linear-gradient(
+      to bottom,
+      oklch(from var(--primary) calc(l + 0.01) calc(c * var(--fight-sat)) h),
+      oklch(from var(--primary) calc(l - 0.1) calc(c * var(--fight-sat)) h)
+    );
+    box-shadow: inset 0 1px 0 var(--sheen-1);
+  }
+
+  fight-plate[far] {
+    width: calc(var(--unit) * 56);
+    height: calc(var(--unit) * 9.6);
+    background: linear-gradient(
+      to bottom,
+      oklch(from var(--primary) calc(l - 0.05) calc(c * var(--fight-sat)) h),
+      oklch(from var(--primary) calc(l - 0.16) calc(c * var(--fight-sat)) h)
+    );
+  }
+
+  [fight-bar] button {
+    position: relative;
+    min-width: calc(var(--unit) * 44);
+    font-size: calc(var(--unit) * 7);
+    font-weight: 600;
+    font-family: var(--font-heading);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: linear-gradient(
+      to bottom,
+      oklch(from var(--primary) calc(l + 0.06) calc(c * var(--fight-sat)) h),
+      oklch(from var(--primary) calc(l - 0.05) calc(c * var(--fight-sat)) h)
+    );
+    color: var(--primary-foreground);
+    text-shadow:
+      0 1px 0 oklch(from var(--primary) calc(l - 0.25) calc(c * var(--fight-sat)) h),
+      0 calc(var(--unit) * 0.5) var(--unit) var(--scrim-2);
+    box-shadow:
+      inset 0 1px 0 var(--sheen-2),
+      inset 0 0 0 1px oklch(from var(--primary) calc(l - 0.1) calc(c * var(--fight-sat)) h);
+  }
+
+  [fight-bar] button:disabled {
+    pointer-events: none;
+    opacity: 1;
+    color: oklch(from var(--primary-foreground) l c h / 0.75);
+    box-shadow:
+      inset 0 1px 0 var(--sheen-2),
+      inset 0 0 0 1px oklch(from var(--primary) calc(l - 0.1) calc(c * var(--fight-sat)) h);
+  }
+
+  [fight-bar] button:active {
+    transform: translateY(0px);
+  }
+
+  [fight-bar] button:not(:disabled):hover {
+    background: linear-gradient(
+      to bottom,
+      oklch(from var(--primary) calc(l + 0.1) c h),
+      oklch(from var(--primary) calc(l - 0.01) c h)
+    );
+    box-shadow:
+      inset 0 1px 0 var(--sheen-2),
+      inset 0 0 0 1px oklch(from var(--primary) calc(l - 0.15) c h);
+  }
+
+  fight-sword {
+    position: absolute;
+    top: calc(var(--unit) * 3);
+    left: 50%;
+    width: calc(var(--unit) * 33.6);
+    margin: calc(var(--unit) * -3) 0 0 calc(var(--unit) * -16.8);
+    pointer-events: none;
+    filter: drop-shadow(0 1px 1px var(--scrim-2));
+  }
+
+  fight-sword svg {
+    display: block;
+    width: 100%;
+  }
+
+  fight-sword [pommel],
+  fight-sword [guard] {
+    fill: var(--gold-deep);
+  }
+
+  fight-sword [grip] {
+    fill: var(--gold-shadow);
+  }
+
+  fight-sword [blade-hi] {
+    fill: oklch(from var(--coin-silver) calc(l * 1.15) c h);
+  }
+
+  fight-sword [blade-lo] {
+    fill: oklch(from var(--coin-silver) calc(l * 0.85) c h);
+  }
+
+  fight-sword[one] {
+    margin-left: calc(var(--unit) * -14.8);
+    transform: translate(calc(var(--unit) * -75), calc(var(--unit) * 75)) rotate(-45deg);
+  }
+
+  fight-sword[two] {
+    margin-left: calc(var(--unit) * -18.8);
+    transform: translate(calc(var(--unit) * 75), calc(var(--unit) * 75)) scaleX(-1) rotate(-45deg);
+  }
+
+  [fight-bar] button[armed] fight-sword[one],
+  [fight-bar] button:not(:disabled) fight-sword[one] {
+    animation: fight-sword-one-in 180ms forwards;
+  }
+
+  [fight-bar] button[swords-two] fight-sword[two] {
+    animation: fight-sword-two-in 180ms forwards;
+  }
+
+  @keyframes fight-sword-one-in {
+    0% {
+      transform: translate(calc(var(--unit) * -75), calc(var(--unit) * 75)) rotate(-45deg);
+      animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
+    }
+    72% {
+      transform: translate(calc(var(--unit) * 1.5), calc(var(--unit) * -1.5)) rotate(-45deg);
+      animation-timing-function: ease;
+    }
+    100% {
+      transform: rotate(-45deg);
+    }
+  }
+
+  @keyframes fight-sword-two-in {
+    0% {
+      transform: translate(calc(var(--unit) * 75), calc(var(--unit) * 75)) scaleX(-1) rotate(-45deg);
+      animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
+    }
+    72% {
+      transform: translate(calc(var(--unit) * -1.5), calc(var(--unit) * -1.5)) scaleX(-1)
+        rotate(-45deg);
+      animation-timing-function: ease;
+    }
+    100% {
+      transform: scaleX(-1) rotate(-45deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [fight-bar] button[armed] fight-sword[one],
+    [fight-bar] button:not(:disabled) fight-sword[one] {
+      animation: none;
+      transform: rotate(-45deg);
+    }
+
+    [fight-bar] button[swords-two] fight-sword[two] {
+      animation: none;
+      transform: scaleX(-1) rotate(-45deg);
+    }
+  }
+</style>
diff --git a/components/FightDetailContent.html b/components/FightDetailContent.html
new file mode 100644
index 00000000..a9f68114
--- /dev/null
+++ b/components/FightDetailContent.html
@@ -0,0 +1,526 @@
+<script type="module">
+  import { seasonArena } from '/js/seasonArena.js';
+  import CHARACTERS from '/js/constants/CHARACTERS.js';
+  import { generateCombat, prepareTeams } from '/js/combat.js';
+  import {
+    calculateCombatStatsByCharacter,
+    buildAbilityBarItems,
+    buildStatGroups,
+    calculateLastTick,
+    runCombatSimulations,
+  } from '/js/utils.js';
+  import { buildEquipmentSlots } from '/js/equipment.js';
+  import {
+    idCounts,
+    hasOddOneOut,
+    centerOddOneOut,
+    fightLevelText,
+    isFightLocked,
+    isFightOutleveled,
+  } from '/js/helpers.js';
+  import ABILITIES from '/js/constants/ABILITIES.js';
+  import { bestCombatStat } from '/js/constants/STATS.js';
+  import { initFightSlots } from '/js/fightSlots.js';
+  import { getExperienceByLevel } from '/js/level.js';
+  import { resolveLoot } from '/js/loot.js';
+
+  const SIMULATION_COUNT = 10;
+
+  const fightId = $.page.params.id;
+  // Resolve from the seeded season arena (not raw ALL_FIGHTS) so the detail page's level,
+  // count-scale and boss promotion match the list for this season exactly.
+  const seasonFights = seasonArena($.season);
+  const fight = seasonFights.find((f) => f.id === fightId);
+
+  let currentFight = null;
+  let enemyRefs = [];
+
+  if (fight) {
+    const characters = fight.characters;
+
+    enemyRefs = centerOddOneOut(
+      characters.map((ref) => {
+        try {
+          const hydrated = CHARACTERS(ref, true);
+          return { ref, id: ref.id, size: hydrated.size, humanoid: hydrated.type === 'humanoid' };
+        } catch {
+          return { ref, id: ref.id };
+        }
+      }),
+    ).map((m) => m.ref);
+
+    currentFight = {
+      ...fight,
+      characters,
+      levelText: fightLevelText(fight),
+      drops: resolveLoot(fight),
+      descriptionParagraphs: (fight.description || '')
+        .split(/<br\s*\/?>\s*<br\s*\/?>/)
+        .map((p) => p.trim())
+        .filter(Boolean),
+      enemies: characters.map((ref) => {
+        try {
+          const char = CHARACTERS(ref, true);
+          const stats = calculateCombatStatsByCharacter(char);
+          const hydrated = char.abilities
+            .map((a) => {
+              try {
+                return ABILITIES(a, true);
+              } catch {
+                return null;
+              }
+            })
+            .filter(Boolean);
+          const abilities = buildAbilityBarItems(hydrated, char.maxTicks, stats);
+          const lastTick = calculateLastTick(abilities, char.maxTicks);
+          return {
+            id: ref.id,
+            name: char.name,
+            image: char.image,
+            race: char.race,
+            size: char.size,
+            maxHealth: stats.maxHealth,
+            maxArmor: stats.maxArmor,
+            damage: stats.damage,
+            bestStat: bestCombatStat(char.combatStats),
+            abilities,
+            lastTick,
+            sheetGroups: buildStatGroups(stats, char),
+            sheetSlots: buildEquipmentSlots(char),
+          };
+        } catch {
+          return {
+            id: ref.id,
+            name: '?',
+            image: '',
+            race: '',
+            size: 1,
+            maxHealth: 0,
+            maxArmor: 0,
+            damage: 0,
+            bestStat: null,
+            abilities: [],
+            lastTick: 0,
+            sheetGroups: null,
+            sheetSlots: [],
+          };
+        }
+      }),
+    };
+    const counts = idCounts(currentFight.enemies);
+    const hasOdd = hasOddOneOut(counts);
+    currentFight.enemies.forEach((e) => (e.packmate = hasOdd && counts[e.id] > 1));
+    $.maxBrawlers = fight.maxBrawlers;
+    $.selectedBrawlers = [];
+  }
+
+  $.currentFight = currentFight;
+  $.brawlerSlots = [];
+  $.fightWinPercent = null;
+
+  initFightSlots({});
+
+  // Same idle-time win estimate as /pve: simulate against the first
+  // brawler on a plain clone (the sim structuredClones its inputs, which
+  // fails on a reactive proxy).
+  let winPercentHandle = null;
+  const computeWinPercent = () => {
+    if (winPercentHandle !== null) {
+      cancelIdleCallback(winPercentHandle);
+      winPercentHandle = null;
+    }
+    $.fightWinPercent = null;
+    const ally = $.characters[0];
+    if (!ally || !currentFight) return;
+    const allyClone = JSON.parse(JSON.stringify(ally));
+    winPercentHandle = requestIdleCallback(
+      () => {
+        $.fightWinPercent =
+          (runCombatSimulations(SIMULATION_COUNT, [allyClone], enemyRefs, undefined, fightId) /
+            SIMULATION_COUNT) *
+          100;
+        winPercentHandle = null;
+      },
+      { timeout: 200 },
+    );
+  };
+
+  if ($.gameStateLoaded) computeWinPercent();
+  $.on('afterUpdate', (current, prev) => {
+    if (current.gameStateLoaded && current.characters !== prev.characters) computeWinPercent();
+  });
+
+  // Same lock rule as the arena list (shared isFightLocked): within 5 levels of
+  // minLevel, plus bosses gated in order. bossHighscore loads async, so this is
+  // read reactively in the markup; blocking here stops direct-URL cheating.
+  window.canViewFight = (fight, bossHighscore, settings) =>
+    !!fight && !isFightLocked(fight, seasonFights, bossHighscore, settings?.isTester);
+
+  // Exposed for the loot section: greys out once the player passes the fight's
+  // maxLevel (no drops left to earn), mirroring how XP zeroes out.
+  window.isFightOutleveled = isFightOutleveled;
+
+  window.showEnemySheet = (enemy) => {
+    $.sheetDialog = {
+      heading: enemy.name,
+      groups: enemy.sheetGroups,
+      slots: enemy.sheetSlots,
+    };
+    $.overlay = { name: 'characterSheet' };
+  };
+
+  // Tester convenience: jump the account to this fight's level so it plays at-level —
+  // ludus (experience), boss highscore and reward level all matched to where the foe
+  // is actually scaled (overrides.level), not the displayed span.
+  window.mimicFight = () => {
+    if (!fight) return;
+    const level = fight.characters?.[0]?.overrides?.level ?? fight.maxLevel;
+    $.experience = Math.ceil(getExperienceByLevel(level));
+    $.bossHighscore = level;
+    $.accountRewards = level;
+    notify.success(`Mimicked foe level ${level}`);
+  };
+
+  window.startFight = () => {
+    if (!currentFight) return;
+    // Hard gate, not just the render: a locked endgame fight can never be started
+    // (and so never bumps bossHighscore) even if reached by typing its URL.
+    if (isFightLocked(fight, seasonFights, $.bossHighscore, $.settings?.isTester)) return;
+
+    const selected = $.characters.filter((c) => $.selectedBrawlers.includes(c.uuid));
+    if (selected.length === 0) return;
+
+    if (
+      selected.some((c) => {
+        try {
+          return CHARACTERS(c, true).combatStats.currentHealth <= 0;
+        } catch {
+          return false;
+        }
+      })
+    ) {
+      notify.warning('One of your brawlers is knocked out!');
+      return;
+    }
+
+    $.combat = generateCombat(
+      prepareTeams(JSON.parse(JSON.stringify(selected)), enemyRefs),
+      ($.settings?.isTester && $.testerSeed) || undefined,
+      currentFight.id,
+    );
+    $.elapsedMilliseconds = 0;
+    $.overlay = { name: 'Combat' };
+  };
+</script>
+
+<page-content>
+  <!-- if currentFight === undefined -->
+    <crow center py="40">
+      <component src="/components/Spinner.html" big></component>
+    </crow>
+  <!-- else -->
+    <!-- if canViewFight(currentFight, $.bossHighscore, settings) -->
+      <component src="/components/TitleBar.html" title="@[currentFight.name]" back="/pve">
+        <crow right f="1" g="2">
+          <!-- if settings.isTester -->
+            <span cinzel f="none"
+              >@[fightWinPercent === null ? '—' : fightWinPercent + '% win']</span
+            >
+          <!-- /if -->
+          <span cinzel f="none">level @[currentFight.levelText]</span>
+          <component
+            src="/components/MatchupBadge.html"
+            ours="@[currentFight.maxBrawlers]"
+            theirs="@[currentFight.enemies.length]"
+            always
+          ></component>
+          <!-- if currentFight.boss -->
+            <badge red>BOSS FIGHT</badge>
+          <!-- /if -->
+        </crow>
+      </component>
+      <hr />
+      <!-- each currentFight.enemies as enemy, i -->
+        <crow
+          left
+          fight-enemy-row
+          packmate="@[enemy.packmate]"
+          collapsed="@[selectedBrawlers.length > 0 || i > 0]"
+        >
+          <fight-side-stats f="none" overflow-hidden sm:sm>
+            <component
+              src="/components/CoreStats.html"
+              hp="@[enemy.maxHealth]"
+              armor="@[enemy.maxArmor]"
+              damage="@[enemy.damage]"
+              vertical
+            >
+            </component>
+          </fight-side-stats>
+
+          <crow left g="4" w="full" fight-info-image>
+            <crow vertical up left fight-info-col>
+              <accordion fight-info>
+                <accordion-content>
+                  <fight-info-inner block pb="8">
+                    <crow left justify-between g="3" w="full" mb="4">
+                      <crow left text-lg f="none">
+                        <component
+                          src="/components/CoreStats.html"
+                          hp="@[enemy.maxHealth]"
+                          armor="@[enemy.maxArmor]"
+                          damage="@[enemy.damage]"
+                        >
+                        </component>
+                      </crow>
+                      <!-- if enemy.bestStat -->
+                        <crow left g="2" f="none" fight-best-stat>
+                          <h5>High</h5>
+                          <component
+                            src="/components/IconCell.html"
+                            tip="@[{ stat: enemy.bestStat.icon }]"
+                          >
+                            <icon @[enemy.bestStat.icon]></icon>
+                          </component>
+                          <span>@[enemy.bestStat.label]</span>
+                        </crow>
+                      <!-- /if -->
+                    </crow>
+                    <!-- if i === 0 && currentFight.drops.length -->
+                      <fight-loot block mt="9" mb="8">
+                        <crow left justify-between w="full">
+                          <h5>Loot</h5>
+                          <!-- if isFightOutleveled(currentFight, experience, bossHighscore) -->
+                            <badge red f="none">Level too high</badge>
+                          <!-- /if -->
+                        </crow>
+                        <fight-drop-list
+                          block
+                          mt="3"
+                          dimmed="@[isFightOutleveled(currentFight, experience, bossHighscore)]"
+                        >
+                          <!-- each currentFight.drops as drop (drop.key) -->
+                            <crow left g="2" w="full" drop-row>
+                              <!-- if drop.kind === 'equipment' -->
+                                <eq-name-target
+                                  onmouseenter="
+                                    showTooltip(
+                                      equipmentTooltipProps(EQUIPMENT(drop.item.id, true)),
+                                      this.querySelector('eq-link') || this,
+                                      { direction: 'up', lock: true },
+                                    )
+                                  "
+                                  onmouseleave="hideTooltip()"
+                                >
+                                  <component
+                                    src="/components/EquipmentLink.html"
+                                    name="@[drop.item.name]"
+                                    element="@[drop.item.element]"
+                                    level="@[drop.item.level]"
+                                  >
+                                  </component>
+                                </eq-name-target>
+                              <!-- /if -->
+                              <!-- if drop.kind !== 'equipment' -->
+                                <crow left g="2" f="none" drop-named>
+                                  <component
+                                    src="/components/IconCell.html"
+                                    tip="@[{ info: { name: drop.item.name, description: drop.item.description } }]"
+                                  >
+                                    <!-- if drop.kind === 'materials' -->
+                                      <img
+                                        data-src="/static/images/materials/@[drop.item.image]"
+                                        alt="@[drop.item.name]"
+                                        material-img
+                                      />
+                                    <!-- /if -->
+                                    <!-- if drop.kind === 'item' -->
+                                      <icon @[drop.item.icon]></icon>
+                                    <!-- /if -->
+                                  </component>
+                                  <span>@[drop.item.name]</span>
+                                </crow>
+                              <!-- /if -->
+                              <drop-leader></drop-leader>
+                              <!-- if drop.guaranteed -->
+                                <badge gold f="none">@[drop.word]</badge>
+                              <!-- /if -->
+                              <!-- if !drop.guaranteed -->
+                                <drop-word style="--tier: @[drop.color]"
+                                  >@[drop.word] <span text-muted>chance</span></drop-word
+                                >
+                              <!-- /if -->
+                            </crow>
+                          <!-- /each -->
+                        </fight-drop-list>
+                      </fight-loot>
+                    <!-- /if -->
+                    <!-- if i === 0 && currentFight.descriptionParagraphs.length -->
+                      <fight-description block>
+                        <!-- each currentFight.descriptionParagraphs as para -->
+                          <p text-sm>@[$.unsafe(para)]</p>
+                        <!-- /each -->
+                      </fight-description>
+                    <!-- /if -->
+                  </fight-info-inner>
+                </accordion-content>
+              </accordion>
+
+              <crow vertical left g="2" up w="full" position="relative" ability-bar-row>
+                <accordion fight-info>
+                  <accordion-content>
+                    <crow left justify-between w="full">
+                      <h5>Ability sequence</h5>
+                    </crow>
+                  </accordion-content>
+                </accordion>
+                <component
+                  src="/components/AbilityBar.html"
+                  abilities="@[enemy.abilities]"
+                  lastTick="@[enemy.lastTick]"
+                  dndDisabled
+                >
+                </component>
+              </crow>
+            </crow>
+
+            <fight-enemy-portrait block f="none">
+              <fight-enemy-image block>
+                <component
+                  src="/components/CharacterAvatar.html"
+                  image="@[enemy.image]"
+                  size="@[enemy.size]"
+                  name="@[enemy.name]"
+                >
+                </component>
+              </fight-enemy-image>
+              <!-- if settings.isTester -->
+                <fight-enemy-edit>
+                  <button primary onclick="showEnemySheet(enemy)">Sheet</button>
+                  <a href="/_internal/characters/@[enemy.id]" class="button" primary>Edit</a>
+                  <button primary onclick="mimicFight()">Mimic</button>
+                </fight-enemy-edit>
+              <!-- /if -->
+            </fight-enemy-portrait>
+          </crow>
+        </crow>
+      <!-- /each -->
+      <hr />
+      <component src="/components/BrawlerSlotList.html" slots="@[brawlerSlots]" mt="6"></component>
+    <!-- else -->
+      <component src="/components/PageNotFound.html"></component>
+    <!-- /if -->
+  <!-- /if -->
+</page-content>
+
+<!-- if canViewFight(currentFight, $.bossHighscore, settings) -->
+  <component src="/components/FightButton.html" onclick="startFight()"></component>
+<!-- /if -->
+
+<style>
+  fight-enemy-image char-portrait {
+    justify-content: flex-start;
+  }
+
+  fight-info-inner {
+    min-height: calc(var(--unit) * 87.5);
+  }
+
+  fight-enemy-edit {
+    position: absolute;
+    top: calc(var(--unit) * 0);
+    right: calc(var(--unit) * 0);
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: calc(var(--unit) * 1);
+  }
+
+  fight-enemy-edit .button,
+  fight-enemy-edit button {
+    background: var(--white);
+  }
+
+  [fight-best-stat] span {
+    color: oklch(from var(--foreground) l c h / 0.75);
+  }
+
+  [fight-best-stat] span::first-letter {
+    text-transform: uppercase;
+  }
+
+  fight-info-inner core-stat,
+  fight-side-stats core-stat {
+    color: var(--foreground);
+  }
+
+  fight-drop-list[dimmed] {
+    opacity: 0.4;
+  }
+
+  [drop-row] + [drop-row] {
+    margin-top: calc(var(--unit) * 2);
+  }
+
+  [drop-row] > eq-name-target,
+  [drop-named] {
+    flex: none;
+  }
+
+  [drop-named] [material-img] {
+    width: calc(var(--unit) * 5.5);
+    height: calc(var(--unit) * 5.5);
+    object-fit: contain;
+  }
+
+  [drop-named] icon {
+    font-size: calc(var(--unit) * 5);
+    color: var(--muted-foreground);
+  }
+
+  drop-leader {
+    flex: 1;
+    align-self: flex-end;
+    height: 0;
+    border-bottom: 1px dotted var(--divider);
+    opacity: 0.6;
+  }
+
+  drop-word {
+    flex: none;
+    color: var(--tier);
+    font-size: calc(var(--unit) * 3.5);
+  }
+
+  drop-word::first-letter {
+    text-transform: uppercase;
+  }
+
+  drop-word [text-muted] {
+    margin-left: 0.35em;
+  }
+
+  [drop-row] badge {
+    text-transform: uppercase;
+  }
+
+  fight-description {
+    padding: calc(var(--unit) * 3) calc(var(--unit) * 3.5);
+    border-radius: var(--radius);
+    background: linear-gradient(
+      to bottom right,
+      oklch(from var(--foreground) l c h / 0.035),
+      transparent 45%
+    );
+    color: var(--muted-foreground);
+  }
+
+  fight-description p {
+    margin: 0;
+  }
+
+  fight-description p + p {
+    margin-top: calc(var(--unit) * 2);
+  }
+</style>
diff --git a/components/ForgotPassword.html b/components/ForgotPassword.html
new file mode 100644
index 00000000..ad2410e4
--- /dev/null
+++ b/components/ForgotPassword.html
@@ -0,0 +1,46 @@
+<script type="module">
+  window.authForgotPassword = async (email) => {
+    try {
+      await $.socket.sendAsync('user/password/request-reset', {
+        email,
+        url: window.location.origin,
+      });
+      notify.info('If an account was registered on that email address, check your email');
+    } catch ({ error }) {
+      notify.error(error);
+    }
+  };
+</script>
+
+<form
+  onsubmit="
+    event.preventDefault();
+    authForgotPassword($.email).then(() => {
+      $.mode = 'login';
+    });
+  "
+>
+  <crow g="2" mb="3">
+    <input
+      type="email"
+      placeholder="Email"
+      value="@[email]"
+      oninput="$.email = this.value"
+      required
+      auth-input
+    />
+    <button primary type="submit">Submit</button>
+  </crow>
+  <p text-sm text-muted>
+    <a
+      href="#"
+      primary
+      onclick="
+        event.preventDefault();
+        $.mode = 'login';
+      "
+    >
+      Back to login
+    </a>
+  </p>
+</form>
diff --git a/components/GameMenu.html b/components/GameMenu.html
new file mode 100644
index 00000000..30400750
--- /dev/null
+++ b/components/GameMenu.html
@@ -0,0 +1,147 @@
+<component src="/components/Dialog.html" title="Options">
+  <crow up g="6" w="full" menu-body>
+    <card g="5" f="7">
+      <crow justify-between w="full" align-center g="2">
+        <eyebrow>Audio</eyebrow>
+        <button
+          tertiary
+          aria-label="Toggle sound"
+          onclick="
+            $.settings.volume = $.settings.volume.master
+              ? { ...$.settings.volume, master: 0 }
+              : { master: 0.5, ambient: 0.25, sfx: 0.5, combat: 1 }
+          "
+        >
+          <!-- if settings.volume.master -->
+            <icon sound-on></icon>
+          <!-- else -->
+            <icon sound-off></icon>
+          <!-- /if -->
+        </button>
+      </crow>
+
+      <audio-grid>
+        <label>Master</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          value="@[settings.volume.master]"
+          oninput="$.settings.volume.master = +this.value"
+        />
+        <volume-value>@[Math.round(settings.volume.master * 100)]%</volume-value>
+
+        <label>Ambient</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          value="@[settings.volume.ambient]"
+          oninput="$.settings.volume.ambient = +this.value"
+        />
+        <volume-value>@[Math.round(settings.volume.ambient * 100)]%</volume-value>
+
+        <label>Sound effect</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          value="@[settings.volume.sfx]"
+          oninput="$.settings.volume.sfx = +this.value"
+        />
+        <volume-value>@[Math.round(settings.volume.sfx * 100)]%</volume-value>
+
+        <label>Combat</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          value="@[settings.volume.combat]"
+          oninput="$.settings.volume.combat = +this.value"
+        />
+        <volume-value>@[Math.round(settings.volume.combat * 100)]%</volume-value>
+      </audio-grid>
+    </card>
+
+    <crow vertical left g="3" f="3" menu-links>
+      <button primary w="full" onclick="$.overlay = { name: 'releaseNotes' }">Release notes</button>
+      <button primary w="full" onclick="$.overlay = { name: 'SeasonModal' }">Season info</button>
+      <!-- if token -->
+        <button primary w="full" onclick="location.href = '/achievements'">Achievements</button>
+        <button primary w="full" onclick="location.href = '/statistics'">Account statistics</button>
+        <button
+          primary
+          danger
+          w="full"
+          onclick="
+            document.cookie = 'token=; Max-Age=0; path=/';
+            location.href = '/';
+          "
+        >
+          Logout
+        </button>
+      <!-- /if -->
+    </crow>
+  </crow>
+</component>
+
+<style>
+  game-menu-mode [dialog-content] {
+    display: contents;
+  }
+
+  [eyebrow] {
+    display: block;
+    font-size: calc(var(--unit) * 3);
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+
+  audio-grid {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: calc(var(--unit) * 2) calc(var(--unit) * 3);
+    align-items: center;
+    width: 100%;
+  }
+
+  audio-grid label {
+    color: var(--foreground);
+  }
+
+  audio-grid input[type='range'] {
+    width: 100%;
+    min-width: 0;
+    accent-color: var(--primary);
+  }
+
+  volume-value {
+    justify-self: end;
+    min-width: calc(var(--unit) * 9);
+    text-align: right;
+    font-size: calc(var(--unit) * 3.5);
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+  }
+
+  [menu-links] button {
+    justify-content: flex-start;
+  }
+
+  @media (width <= 768px) {
+    [menu-body] {
+      flex-direction: column;
+    }
+
+    [menu-body] > * {
+      width: 100%;
+      flex: none;
+    }
+  }
+</style>
diff --git a/components/HealthBar.html b/components/HealthBar.html
new file mode 100644
index 00000000..af751a99
--- /dev/null
+++ b/components/HealthBar.html
@@ -0,0 +1,137 @@
+<health-bar position="relative" block w="full" left="@[card.facingRight]">
+  <component
+    src="/components/SolidBar.html"
+    current="@[Math.max(0, card.currentHealth)]"
+    max="@[card.maxHealth]"
+    buffer="@[card.bufferedHealth]"
+    ghost="1"
+  >
+  </component>
+
+  <!-- if settings.isTester && card.showProvocation -->
+    <provocation-chance position="absolute" fat-number
+      >@[card.provocationChance]%</provocation-chance
+    >
+  <!-- /if -->
+
+  <!-- each card.floaters as f -->
+    <hp-floater
+      position="absolute"
+      fat-number
+      @[f.vfxName]
+      prevented="@[f.prevented]"
+      crit="@[f.isCritical]"
+      style="
+        --rnd: @[f.random];
+        --dir: @[f.dir];
+        --y-offset: @[f.vfxName === 'armorHurt' ? 'calc(var(--unit) * 40)': '0'];
+        --scale: @[f.sizeScale];
+      "
+    >
+      <hp-floater-x>
+        <hp-floater-y>
+          <!-- if f.isCritical && !['heal', 'mend', 'attackMissed', 'attackDodged', 'attackBlocked'].includes(f.vfxName) -->
+            <icon criticalDamage></icon>
+          <!-- /if -->
+          <!-- if f.vfxName === 'heal' -->+@[f.amount]<!-- /if -->
+          <!-- if f.vfxName === 'mend' -->Mended!<!-- /if -->
+          <!-- if f.vfxName === 'fullHealth' -->FULL<!-- /if -->
+          <!-- if f.vfxName === 'attackMissed' -->MISS<!-- /if -->
+          <!-- if f.vfxName === 'attackDodged' -->DODGED<!-- /if -->
+          <!-- if f.vfxName === 'attackBlocked' -->BLOCKED<!-- /if -->
+          <!-- if f.prevented -->ABSORBED<!-- /if -->
+          <!-- if !['heal', 'mend', 'fullHealth', 'attackMissed', 'attackDodged', 'attackBlocked'].includes(f.vfxName) && !f.prevented -->@[f.amount]<!-- /if -->
+        </hp-floater-y>
+      </hp-floater-x>
+    </hp-floater>
+  <!-- /each -->
+</health-bar>
+
+<style>
+  health-bar bar-track[center] {
+    border-radius: 0;
+  }
+
+  provocation-chance {
+    top: 50%;
+    left: calc(100% + calc(var(--unit) * 1.5));
+    transform: translateY(-50%);
+    font-family: var(--font-display, sans-serif);
+    font-size: calc(var(--unit) * 4);
+    color: var(--white);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  health-bar[left] provocation-chance {
+    left: auto;
+    right: calc(100% + calc(var(--unit) * 1.5));
+  }
+
+  hp-floater {
+    top: calc(var(--unit) * 1);
+    left: 100%;
+    font-family: var(--font-display, sans-serif);
+    font-size: calc(var(--unit) * 4.5);
+    font-weight: 800;
+    pointer-events: none;
+    color: oklch(from var(--red) 0.95 calc(c * 0.35) h);
+    opacity: 0;
+    animation: hp-floater-fade 1000ms ease-in forwards;
+    white-space: nowrap;
+  }
+
+  health-bar[left] hp-floater {
+    left: auto;
+    right: 100%;
+  }
+
+  hp-floater[armorHurt] {
+    color: var(--white);
+  }
+
+  hp-floater[heal],
+  hp-floater[fullHealth],
+  hp-floater[mend] {
+    color: oklch(from var(--green) 0.95 calc(c * 0.35) h);
+    animation: hp-floater-heal-fade 800ms ease-out forwards;
+  }
+
+  hp-floater[fullHealth],
+  hp-floater[mend] {
+    font-size: 0.7em;
+    letter-spacing: 0.1em;
+  }
+
+  hp-floater[attackMissed],
+  hp-floater[attackDodged],
+  hp-floater[attackBlocked],
+  hp-floater[prevented] {
+    color: var(--white);
+    font-size: 0.7em;
+    letter-spacing: 0.1em;
+  }
+
+  hp-floater-x {
+    display: inline-block;
+    animation: hp-floater-x 200ms ease-in forwards;
+  }
+
+  hp-floater-y {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--unit) * 1);
+    animation: hp-floater-y 1000ms linear forwards;
+  }
+
+  hp-floater-y icon[criticalDamage] {
+    font-size: 0.75em;
+    filter: drop-shadow(0 1px 2px var(--scrim-3));
+  }
+
+  hp-floater[heal] hp-floater-y,
+  hp-floater[fullHealth] hp-floater-y,
+  hp-floater[mend] hp-floater-y {
+    animation: hp-floater-heal-y 800ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+  }
+</style>
diff --git a/components/IconCell.html b/components/IconCell.html
new file mode 100644
index 00000000..17bbe4fb
--- /dev/null
+++ b/components/IconCell.html
@@ -0,0 +1,3 @@
+<icon-cell onmouseenter="iconCellTooltip(this, tip)" onmouseleave="hideTooltip()">
+  <slot></slot>
+</icon-cell>
diff --git a/components/InventoryDrawer.html b/components/InventoryDrawer.html
new file mode 100644
index 00000000..f2985cec
--- /dev/null
+++ b/components/InventoryDrawer.html
@@ -0,0 +1,312 @@
+<script type="module">
+  import { equip, dismantle, equipBlockedRace } from '/js/equipment.js';
+  import { incStat } from '/js/utils.js';
+
+  window.equipItem = equip;
+  window.equipBlockedRace = equipBlockedRace;
+
+  window.canSell = (item) => !EQUIPMENT(item, true).protected;
+
+  window.dismantleOrSell = (item) => {
+    const { cost, protected: isProtected } = EQUIPMENT(item, true);
+    if (isProtected) return; // the Heirloom (and other protected gear) can't be sold or dismantled
+    if (cost > 0) {
+      $.overlay = {
+        name: 'confirm',
+        text: 'You will be refunded the following for selling this equipment:',
+        coins: cost,
+        confirm: () => {
+          $.coins += cost;
+          incStat('economy.crystals.earned', { count: cost });
+          dismantle(item);
+        },
+      };
+    } else {
+      $.overlay = {
+        name: 'confirm',
+        text: 'Only gear bought from the Armory can be sold — this piece holds no crystal value. Dismantle it for good?',
+        confirm: () => dismantle(item),
+      };
+    }
+  };
+
+  window.sellLabel = (item) => (EQUIPMENT(item, true).cost > 0 ? 'Sell' : 'Dismantle');
+
+  window.openInventory = () => {
+    $.inventoryOpen = true;
+    hideTooltip();
+  };
+</script>
+
+<sticky reverse w="full" sm:b="12" inventory-drawer>
+  <crow
+    justify-between
+    center
+    inventory-head
+    px="4"
+    onclick="
+      $.inventoryOpen = !$.inventoryOpen;
+      hideTooltip();
+    "
+  >
+    <crow g="2" center inventory-title>
+      <icon armory></icon>
+      <h5>MY EQUIPMENT</h5>
+    </crow>
+    <icon chevron animate-y toggled="@[!inventoryOpen]" inventory-chevron></icon>
+  </crow>
+
+  <accordion open="@[inventoryOpen]">
+    <accordion-content>
+      <equipment-body>
+        <!-- <equipment-rail>
+          <equipment-cat active>⚔️</equipment-cat>
+          <equipment-cat>🛡️</equipment-cat>
+          <equipment-cat>🏹</equipment-cat>
+          <equipment-cat>💍</equipment-cat>
+          <equipment-cat>📜</equipment-cat>
+        </equipment-rail> -->
+
+        <equipment-list>
+          <!-- each inventory as item (item.uuid) -->
+            <equipment-row>
+              <eq-name-target
+                onmouseenter="
+                  showTooltip(
+                    equipmentTooltipProps(EQUIPMENT(item, true)),
+                    this.querySelector('eq-link') || this,
+                    { direction: 'up', lock: true },
+                  )
+                "
+                onmouseleave="hideTooltip()"
+              >
+                <component
+                  src="/components/EquipmentLink.html"
+                  name="@[EQUIPMENT(item, true).name]"
+                  element="@[EQUIPMENT(item, true).element]"
+                >
+                </component>
+              </eq-name-target>
+              <!-- if page.params.index !== undefined -->
+                <button
+                  primary
+                  equipment-action
+                  disabled="@[equipBlockedRace(item)]"
+                  onclick="equipItem(item)"
+                >
+                  Equip
+                </button>
+              <!-- /if -->
+              <!-- if page.name === 'armory' && canSell(item) -->
+                <button primary sell equipment-action onclick="dismantleOrSell(item)">
+                  @[sellLabel(item)]
+                </button>
+              <!-- /if -->
+              <!-- if page.name === 'armory' && !canSell(item) -->
+                <button primary equipment-action disabled>Unsellable</button>
+              <!-- /if -->
+            </equipment-row>
+          <!-- /each -->
+
+          <!-- if inventory.length === 0 -->
+            <inventory-empty>
+              <icon armory></icon>
+              <span>No equipment yet</span>
+            </inventory-empty>
+          <!-- /if -->
+        </equipment-list>
+      </equipment-body>
+    </accordion-content>
+  </accordion>
+</sticky>
+
+<style>
+  [inventory-drawer] > accordion {
+    will-change: grid-template-rows;
+  }
+
+  [inventory-drawer] {
+    background: var(--c-panel);
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+    overflow: hidden;
+    box-shadow:
+      inset 0 -1px 0 var(--scrim-1),
+      0 calc(var(--unit) * -1) calc(var(--unit) * 3) calc(var(--unit) * -0.5) var(--scrim-2);
+  }
+
+  [inventory-drawer] [inventory-head] {
+    min-height: calc(var(--unit) * 13);
+    cursor: pointer;
+    background: oklch(from var(--c-accent) l c h / 0.1);
+    box-shadow:
+      inset 0 2px 0 oklch(from var(--c-accent) l c h / 0.4),
+      inset 0 -1px 0 var(--c-line);
+    transition: filter 160ms ease;
+  }
+
+  [inventory-drawer] [inventory-head]:hover {
+    filter: brightness(1.06);
+  }
+
+  [inventory-drawer] [inventory-head]:active {
+    filter: brightness(0.97);
+  }
+
+  [inventory-drawer] [inventory-title] icon {
+    font-size: calc(var(--unit) * 5);
+    color: var(--c-accent);
+  }
+
+  [inventory-drawer] [inventory-head] h5 {
+    color: var(--c-fg);
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 4);
+    font-weight: 400;
+    letter-spacing: 0.1em;
+  }
+
+  [inventory-drawer] [inventory-chevron] {
+    font-size: calc(var(--unit) * 4.5);
+    color: var(--c-accent);
+  }
+
+  [inventory-drawer] hr {
+    margin: 0;
+  }
+
+  [inventory-drawer] accordion-content {
+    display: block;
+    background: var(--c-panel);
+    box-shadow: inset 0 1px 0 oklch(from var(--c-accent) l c h / 0.25);
+  }
+
+  [inventory-drawer] equipment-body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    height: 38vh;
+  }
+
+  [inventory-drawer] equipment-rail {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1.5);
+    padding: calc(var(--unit) * 2);
+  }
+
+  [inventory-drawer] equipment-cat {
+    display: grid;
+    place-items: center;
+    width: calc(var(--unit) * 9);
+    height: calc(var(--unit) * 9);
+    font-size: calc(var(--unit) * 4.5);
+    border-radius: calc(var(--unit) * 0.75);
+    background: oklch(from var(--c-inset) l c h / 0.6);
+    box-shadow: inset 0 0 0 1px var(--c-line);
+    filter: grayscale(0.5) opacity(0.6);
+    cursor: pointer;
+  }
+
+  [inventory-drawer] equipment-cat[active] {
+    filter: none;
+    box-shadow: inset 0 0 0 1px var(--c-accent);
+    background: oklch(from var(--c-accent) l c h / 0.14);
+  }
+
+  [inventory-drawer] equipment-list {
+    overflow-y: auto;
+    scrollbar-color: oklch(from var(--c-accent) l c h / 0.45) transparent;
+  }
+
+  [inventory-drawer] equipment-list::-webkit-scrollbar {
+    width: calc(var(--unit) * 2.5);
+  }
+
+  [inventory-drawer] equipment-list::-webkit-scrollbar-thumb {
+    background: oklch(from var(--c-accent) l c h / 0.4);
+    border-radius: 9999px;
+    border: calc(var(--unit) * 0.5) solid transparent;
+    background-clip: padding-box;
+  }
+
+  [inventory-drawer] equipment-row {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2.5);
+    padding: calc(var(--unit) * 1.8) calc(var(--unit) * 3);
+    color: var(--c-fg);
+    border-bottom: 1px solid var(--c-line);
+    transition:
+      background 130ms ease,
+      box-shadow 130ms ease;
+  }
+
+  [inventory-drawer] equipment-row:last-child {
+    border-bottom: 0;
+  }
+
+  [inventory-drawer] equipment-row:hover {
+    background: oklch(from var(--c-accent) l c h / 0.1);
+    box-shadow: inset 2px 0 0 oklch(from var(--c-accent) l c h / 0.55);
+  }
+
+  [inventory-drawer] equipment-row component {
+    display: contents;
+  }
+
+  [inventory-drawer] equipment-row eq-name-target {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 0;
+    margin-right: auto;
+  }
+
+  [inventory-drawer] equipment-row eq-link {
+    min-width: 0;
+  }
+
+  [inventory-drawer] equipment-row button[equipment-action] {
+    flex: none;
+    padding: calc(var(--unit) * 1.25) calc(var(--unit) * 3);
+    font-size: calc(var(--unit) * 3);
+  }
+
+  [inventory-drawer] equipment-row button[sell] {
+    background-color: oklch(from var(--destructive) l c h / 0.12);
+    color: oklch(from var(--destructive) calc(l - 0.2 * var(--theme-sign)) c h);
+    box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.2);
+  }
+
+  [inventory-drawer] equipment-row button[sell]:not(:disabled):hover {
+    background-color: oklch(from var(--destructive) l c h / 0.2);
+    box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.3);
+  }
+
+  [inventory-drawer] inventory-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--unit) * 2);
+    height: 100%;
+    color: var(--c-muted);
+  }
+
+  [inventory-drawer] inventory-empty icon {
+    font-size: calc(var(--unit) * 9);
+    color: var(--c-muted);
+    opacity: 0.5;
+  }
+
+  [inventory-drawer] inventory-empty span {
+    font-size: calc(var(--unit) * 3.5);
+    letter-spacing: 0.04em;
+  }
+
+  @media (width <= 768px) {
+    [inventory-drawer] {
+      width: calc(100% + var(--unit) * 6);
+      margin-left: calc(var(--unit) * -3);
+    }
+  }
+</style>
diff --git a/components/Keystrokes.html b/components/Keystrokes.html
new file mode 100644
index 00000000..55b807e5
--- /dev/null
+++ b/components/Keystrokes.html
@@ -0,0 +1,76 @@
+<script type="module">
+  // Seed the key whitelist + disabled flag on mount (not in app.js — these
+  // are owned by this component and only need to exist while it's mounted).
+  // Merge into any pre-seeded keys (e.g. `alt`, which boot.js owns separately)
+  // instead of bailing when $.keys already exists.
+  if (!('keyi' in $.keys)) {
+    $.keys = {
+      ...$.keys,
+      ...[
+        'keyw',
+        'keya',
+        'keys',
+        'keyd',
+        'keyi',
+        'keyq',
+        'keye',
+        'keyz',
+        'keyx',
+        'keyc',
+        'arrowright',
+        'arrowleft',
+        'arrowdown',
+        'arrowup',
+        'escape',
+        'enter',
+        'shiftleft',
+        'shiftright',
+        'digit1',
+        'digit2',
+        'digit3',
+        'digit4',
+        'digit5',
+        'numpad1',
+        'numpad2',
+        'numpad3',
+        'numpad4',
+        'numpad5',
+        'numpad6',
+        'numpad7',
+        'numpad8',
+        'numpad9',
+      ].reduce((a, key) => ({ ...a, [key]: false }), {}),
+    };
+  }
+  if ($.gameKeyboardDisabled === undefined) $.gameKeyboardDisabled = false;
+
+  if (!window.__keystrokesBound) {
+    window.__keystrokesBound = true;
+
+    const toggle = (e) => {
+      if (!(e instanceof KeyboardEvent)) return; // autofill events can lack .code
+      const { type, code, metaKey, ctrlKey } = e;
+      const lcKey = code.toLowerCase();
+
+      // Cmd/Ctrl shortcuts — clear all tracked keys so nothing stays "held"
+      if (metaKey || ctrlKey) {
+        Object.keys($.keys).forEach((k) => {
+          if ($.keys[k]) $.keys[k] = false;
+        });
+        return;
+      }
+
+      // Respect gameKeyboardDisabled, but always allow enter/escape/shift.
+      if ($.gameKeyboardDisabled && !['enter', 'escape', 'shiftleft', 'shiftright'].includes(lcKey))
+        return;
+
+      if (lcKey in $.keys) {
+        const down = type === 'keydown';
+        if ($.keys[lcKey] !== down) $.keys[lcKey] = down;
+      }
+    };
+
+    window.addEventListener('keydown', toggle);
+    window.addEventListener('keyup', toggle);
+  }
+</script>
diff --git a/components/LabeledSwitch.html b/components/LabeledSwitch.html
new file mode 100644
index 00000000..1a6858b1
--- /dev/null
+++ b/components/LabeledSwitch.html
@@ -0,0 +1,4 @@
+<label labeled-switch f="none">
+  @[label]
+  <input type="checkbox" role="switch" checked="@[checked]" onchange="@[onchange]" />
+</label>
diff --git a/components/Layout.html b/components/Layout.html
new file mode 100644
index 00000000..ce05fc0d
--- /dev/null
+++ b/components/Layout.html
@@ -0,0 +1,444 @@
+<game-layout>
+  <component src="/components/AuthGate.html">
+    <!-- if page.name === '_internal-test-combat' -->
+      <slot></slot>
+    <!-- /if -->
+
+    <!-- if page.name !== '_internal-test-combat' -->
+      <!-- if isDowntime(clock.now) && !page.name.startsWith('_internal') -->
+        <component src="/components/SeasonDowntime.html"></component>
+      <!-- /if -->
+      <!-- if !isDowntime(clock.now) || page.name.startsWith('_internal') -->
+        <crow game-shell sm:px="1" sm:pt="1" px="3" pt="3">
+          <crow vertical game-main>
+            <card content-area p="0">
+              <page @[page.name]>
+                <slot></slot>
+              </page>
+
+              <sticky auto-shadow sticky-bar w="full" sm:reverse tab-bar t="11.5">
+                <crow up g="0" tab-row w="full" overflow-hidden>
+                  <a
+                    href="/pve"
+                    class="button"
+                    tertiary="@[!page.name.startsWith('pve')]"
+                    primary="@[page.name.startsWith('pve')]"
+                  >
+                    <icon the-arena hide sm:block></icon>
+                    <span sm:hide>@[bossHighscore >= 15 ? 'The Wild' : 'The Arena']</span>
+                  </a>
+                  <a
+                    href="/pvp"
+                    class="button"
+                    tertiary="@[!page.name.startsWith('pvp')]"
+                    primary="@[page.name.startsWith('pvp')]"
+                  >
+                    <icon dice hide sm:block></icon>
+                    <span sm:hide>Random duel</span>
+                  </a>
+                  <a
+                    href="/teamplay"
+                    class="button"
+                    tertiary="@[!page.name.startsWith('teamplay')]"
+                    primary="@[page.name.startsWith('teamplay')]"
+                  >
+                    <icon users hide sm:block></icon>
+                    <span sm:hide>Teamplay</span>
+                  </a>
+                </crow>
+              </sticky>
+            </card>
+          </crow>
+
+          <component src="/components/Sidebar.html"></component>
+        </crow>
+      <!-- /if -->
+    <!-- /if -->
+  </component>
+
+  <component src="/components/Overlay.html"></component>
+  <component src="/components/EmperorCutscene.html"></component>
+  <component src="/components/remote/AchievementReveal.html"></component>
+  <component src="/components/remote/Tooltip.html">
+    <component src="/components/tooltip/Display.html" props="@[tooltip.props]"></component>
+  </component>
+  <component
+    src="/components/remote/Notifications.html"
+    up="@[$.notifyUp]"
+    down="@[$.notifyDown]"
+    left="@[$.notifyLeft]"
+    right="@[$.notifyRight]"
+    offsetX="@[8]"
+    offsetY="@[44]"
+  >
+  </component>
+  <component src="/components/Topbar.html"></component>
+  <component src="/components/Keystrokes.html"></component>
+  <component src="/components/remote/PromptModal.html"></component>
+  <component src="/components/AccountNameModal.html"></component>
+
+  <!-- if window.isDev -->
+    <component src="/components/StateInspector.html"></component>
+  <!-- /if -->
+
+  <style>
+    @media (width <= 768px) {
+      notifications-viewport {
+        --bottom: 52px;
+      }
+    }
+
+    game-layout {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    game-layout center-full {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+    }
+
+    game-layout [auth-padding] {
+      padding: 0 calc(var(--unit) * 4) calc(var(--unit) * 4);
+    }
+
+    game-layout auth-scene {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--unit) * 4);
+    }
+
+    game-layout [auth-logo] {
+      width: 100%;
+      max-width: calc(var(--unit) * 120);
+      height: auto;
+      filter: drop-shadow(0 calc(var(--unit) * 1) calc(var(--unit) * 4) var(--scrim-3));
+      pointer-events: none;
+      user-select: none;
+    }
+
+    game-layout [auth-form] {
+      position: relative;
+      width: 100%;
+      max-width: calc(var(--unit) * 135);
+      padding: calc(var(--unit) * 8) calc(var(--unit) * 8) calc(var(--unit) * 6);
+      border-radius: var(--radius);
+      background: linear-gradient(
+        180deg,
+        oklch(from var(--c-panel) calc(l + 0.015) c h),
+        var(--c-panel)
+      );
+      color: var(--c-fg);
+      box-shadow:
+        inset 0 0 0 1px var(--c-line),
+        inset 0 1px 0 var(--sheen-2),
+        0 calc(var(--unit) * 6) calc(var(--unit) * 16) -4px var(--scrim-3);
+    }
+
+    game-layout [auth-form]::before {
+      content: '';
+      position: absolute;
+      inset: 0 0 auto 0;
+      height: calc(var(--unit) * 1);
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--gold-warm) 20%,
+        var(--gold-shine) 50%,
+        var(--gold-warm) 80%,
+        transparent
+      );
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    game-layout [auth-form] input:not([type='checkbox'], [type='radio']) {
+      background-color: var(--c-inset);
+      color: var(--c-fg);
+      box-shadow: inset 0 0 0 1px var(--c-line);
+    }
+
+    game-layout [auth-form] input:not([type='checkbox'], [type='radio'])::placeholder {
+      color: var(--c-muted);
+    }
+
+    game-layout [auth-form] input:not([type='checkbox'], [type='radio']):focus-visible {
+      outline: none;
+      box-shadow:
+        inset 0 0 0 1px var(--c-accent),
+        0 0 0 3px oklch(from var(--gold-warm) l c h / 0.3);
+    }
+
+    game-layout [auth-form] a[primary] {
+      color: var(--c-accent);
+    }
+
+    game-layout [auth-form] p {
+      color: var(--c-muted);
+    }
+
+    game-layout [auth-input] {
+      flex: 1;
+      min-width: 0;
+    }
+
+    @media (width <= 768px) {
+      game-layout auth-scene {
+        gap: calc(var(--unit) * 3);
+      }
+
+      game-layout [auth-logo] {
+        max-width: min(calc(var(--unit) * 90), 78vw);
+      }
+
+      game-layout [auth-form] {
+        max-width: none;
+        padding: calc(var(--unit) * 5) calc(var(--unit) * 5) calc(var(--unit) * 4);
+      }
+
+      game-layout [auth-form] crow:has([auth-input]) {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      game-layout [auth-form] crow:has([auth-input]) > * {
+        width: 100%;
+      }
+
+      game-layout [auth-form] crow:has(button):not(:has([auth-input])) {
+        flex-wrap: wrap;
+      }
+    }
+
+    game-layout [game-shell] {
+      align-items: flex-start;
+      display: flex;
+      flex: 1;
+      align-self: stretch;
+      width: 100%;
+      max-width: calc(var(--unit) * 320);
+      margin: 0 auto;
+      gap: calc(var(--unit) * 3);
+    }
+
+    @layer elements {
+      sidebar-content {
+        background-color: var(--sheen-2);
+        border-radius: var(--radius);
+        color: var(--muted-foreground);
+        min-height: calc(100vh - calc(var(--unit) * 15));
+      }
+
+      [dark] sidebar-content {
+        background-color: var(--card);
+      }
+    }
+
+    game-layout [game-main] {
+      flex: 1;
+      min-width: 0;
+      width: 100%;
+      align-self: stretch;
+    }
+
+    game-layout [content-area] {
+      flex: 1;
+      width: 100%;
+      /* background: var(--c-panel); */
+      background: var(--card);
+      border-radius: calc(var(--radius) * 0);
+      box-shadow: none;
+      border-top-left-radius: calc(var(--radius) * 1);
+      border-top-right-radius: calc(var(--radius) * 1);
+    }
+
+    game-layout [tab-bar] {
+      border-top-left-radius: calc(var(--radius) * 1);
+      border-top-right-radius: calc(var(--radius) * 1);
+    }
+
+    game-layout [tab-bar] [tab-row] {
+      height: calc(var(--unit) * 12);
+    }
+
+    game-layout [tab-bar] [tab-row] > a {
+      position: relative;
+      flex: 1;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--unit) * 2);
+      border-radius: 0;
+      background: transparent;
+      color: var(--secondary-foreground);
+      font-family: var(--font-heading);
+      font-size: calc(var(--unit) * 3.5);
+      font-weight: 400;
+      letter-spacing: 0.08em;
+      transition: none;
+    }
+
+    game-layout
+      [tab-bar]
+      [tab-row]
+      > a:not(:last-child):not([primary]):not(:has(+ a[primary]))::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: calc(var(--unit) * 2);
+      bottom: calc(var(--unit) * 2);
+      width: 1px;
+      background: linear-gradient(to bottom, transparent, var(--scrim-2), transparent);
+    }
+
+    game-layout [tab-bar] [tab-row] > a:active {
+      transform: none;
+    }
+
+    game-layout [tab-bar] [tab-row] icon {
+      --color: currentColor;
+    }
+
+    game-layout [tab-bar] [tab-row] > a:not([primary]):hover {
+      background: linear-gradient(
+        to bottom,
+        oklch(from var(--c-accent) l c h / 0.14),
+        oklch(from var(--c-accent) l c h / 0.2)
+      );
+      box-shadow:
+        inset 0 1px 0 oklch(from var(--c-accent) l c h / 0.3),
+        inset 0 -1px 0 var(--scrim-1);
+    }
+
+    @media (width > 768px) {
+      game-layout [tab-bar] [tab-row] > a:first-child {
+        border-top-left-radius: calc(var(--radius) * 1);
+      }
+
+      game-layout [tab-bar] [tab-row] > a:last-child {
+        border-top-right-radius: calc(var(--radius) * 1);
+      }
+    }
+
+    game-layout [tab-bar] [tab-row] > a[primary] {
+      background: oklch(from var(--c-accent) l c h / 0.26);
+      color: var(--foreground);
+    }
+
+    @media (width <= 768px) {
+      game-layout [tab-bar] {
+        width: calc(100% + var(--unit) * 6);
+        margin-left: calc(var(--unit) * -3);
+        border-radius: 0;
+      }
+
+      game-layout [tab-bar] [tab-row] icon {
+        font-size: 1.6em;
+      }
+    }
+
+    overlay-backdrop {
+      z-index: 1;
+      position: fixed;
+      inset: 0;
+      display: grid;
+      grid-template-rows: calc(var(--unit) * 20) 1fr calc(var(--unit) * 20);
+      place-items: center;
+      overflow-x: hidden;
+      overflow-y: auto;
+      background: var(--scrim-2);
+      box-shadow: inset 0 0 10vw var(--scrim-3);
+      backdrop-filter: blur(1px);
+      transform: scale(1.05);
+      animation: overlayIn 200ms ease-out 75ms both;
+    }
+
+    dialog-backdrop {
+      animation: overlayIn 150ms ease-out both;
+    }
+
+    combat-panel,
+    combat-arena,
+    combatant-slot,
+    combatant-card,
+    combatant-sprite,
+    combatant-statuses,
+    combat-result,
+    combat-rewards,
+    combat-floater,
+    progress-track,
+    progress-fill,
+    game-frame,
+    menu-label,
+    dialog-backdrop,
+    progression-panel,
+    progression-scroll,
+    progression-rewards,
+    tooltip-layer,
+    tooltip-stats,
+    combat-status {
+      display: block;
+    }
+
+    overlay-panel {
+      display: block;
+      position: relative;
+      max-width: calc(var(--unit) * 175);
+      min-width: min(calc(var(--unit) * 80), 100%);
+      width: calc(100% - calc(var(--unit) * 24));
+      max-height: 90vh;
+      overflow-y: auto;
+      text-align: left;
+      overflow-x: hidden;
+    }
+
+    game-frame {
+      border: calc(var(--unit) * 0.75) solid;
+      border-image-source: url('/static/images/ui/frame.webp');
+      border-image-slice: 3;
+      border-image-repeat: repeat;
+      background: var(--popover);
+      box-shadow: inset 0 0 calc(var(--unit) * 25) var(--scrim-3);
+      color: var(--muted);
+    }
+
+    menu-label {
+      width: min(calc(var(--unit) * 40), 50%);
+      flex: none;
+    }
+
+    [menu-divider] {
+      border: 0;
+      height: calc(var(--unit) * 0.25);
+      background: linear-gradient(to right, transparent, var(--sheen-2), transparent);
+      margin: calc(var(--unit) * 1) 0;
+      width: 100%;
+    }
+
+    [game-frame-title] {
+      position: relative;
+      margin: calc(var(--unit) * -0.75) 0 0 0;
+      padding: 0 calc(var(--unit) * 2);
+      height: calc(var(--unit) * 8.25);
+      background-image: url('/static/images/ui/frame-header.webp');
+      background-position: left calc(var(--unit) * 0.5);
+      background-repeat: repeat-x;
+      font-family: var(--font-heading);
+      color: var(--muted);
+    }
+
+    [stretch] {
+      align-items: stretch;
+    }
+
+    [range-input] {
+      width: 60%;
+    }
+  </style>
+</game-layout>
diff --git a/components/LoadingBar.html b/components/LoadingBar.html
new file mode 100644
index 00000000..9df11a82
--- /dev/null
+++ b/components/LoadingBar.html
@@ -0,0 +1,31 @@
+<loader smooth="@[smooth]">
+  <loader-fill
+    data-remaining="@[remaining]"
+    style="width: @[Math.max (0, Math.min(100, percentage || 0))]%"
+  ></loader-fill>
+</loader>
+
+<style>
+  loader {
+    display: block;
+    width: 100%;
+    height: calc(var(--unit) * 2);
+    background-color: oklch(from var(--background) calc(l * 0.7) c h);
+    border: 1px solid oklch(from var(--background) calc(l * 0.6) c h);
+    border-radius: calc(var(--unit) * 3);
+    box-shadow: inset 0 1px 1px var(--scrim-1);
+    overflow: hidden;
+  }
+
+  loader-fill {
+    display: block;
+    height: 100%;
+    border-radius: calc(var(--unit) * 3);
+    background-color: var(--white);
+    box-shadow: inset 0 0 0 0.5px oklch(0.2 0 0);
+  }
+
+  loader[smooth] loader-fill {
+    transition: width 1s linear;
+  }
+</style>
diff --git a/components/Login.html b/components/Login.html
new file mode 100644
index 00000000..612833ac
--- /dev/null
+++ b/components/Login.html
@@ -0,0 +1,93 @@
+<script type="module">
+  window.authLogin = async (email, password, rememberMe, codeOfConduct) => {
+    if (!codeOfConduct) {
+      notify.error('You must to agree to the Code of Conduct in order to play');
+      return;
+    }
+    try {
+      const t = await $.socket.sendAsync('user/login', { email, password });
+      let expiration = '';
+      if (rememberMe) {
+        const future = new Date();
+        future.setDate(future.getDate() + 30);
+        expiration = ` Expires=${future.toUTCString()};`;
+      }
+      document.cookie = `token=${t}; path=/;${expiration}`;
+      $.token = t;
+      notify.success('Logged in successfully');
+    } catch ({ error }) {
+      notify.error(error);
+    }
+  };
+</script>
+
+<form
+  onsubmit="
+    event.preventDefault();
+    authLogin($.email, $.password, $.settings.rememberMe, $.settings.codeOfConduct);
+  "
+>
+  <crow g="2" mb="3">
+    <input
+      type="email"
+      placeholder="Email"
+      value="@[email]"
+      oninput="
+        $.email = this.value;
+        if ($.settings.rememberMe) $.settings.savedEmail = this.value;
+      "
+      required
+      auth-input
+    />
+    <input
+      type="password"
+      placeholder="Password"
+      value="@[password]"
+      oninput="
+        $.password = this.value;
+        if ($.settings.rememberMe) $.settings.savedPassword = this.value;
+      "
+      required
+      auth-input
+    />
+    <button primary type="submit">Log in</button>
+  </crow>
+  <crow g="2" mb="2" left>
+    <input
+      type="checkbox"
+      id="codeOfConduct"
+      checked="@[$.settings.codeOfConduct]"
+      onchange="$.settings.codeOfConduct = this.checked"
+    />
+    <label for="codeOfConduct" text-sm>
+      I agree to the
+      <a
+        href="#"
+        primary
+        onclick="
+          event.preventDefault();
+          $.overlay = { name: 'codeOfConduct' };
+        "
+      >
+        Code of Conduct
+      </a>
+    </label>
+  </crow>
+  <crow g="2" mb="2" left>
+    <input
+      type="checkbox"
+      id="rememberMe"
+      checked="@[$.settings.rememberMe]"
+      onchange="
+        $.settings = {
+          ...$.settings,
+          rememberMe: this.checked,
+          ...(this.checked
+            ? { savedEmail: $.email, savedPassword: $.password }
+            : { savedEmail: '', savedPassword: '' }),
+        }
+      "
+    />
+    <label for="rememberMe" text-sm>Remember me</label>
+  </crow>
+</form>
diff --git a/components/MatchupBadge.html b/components/MatchupBadge.html
new file mode 100644
index 00000000..57d3fbc7
--- /dev/null
+++ b/components/MatchupBadge.html
@@ -0,0 +1,11 @@
+<script type="module">
+  // Two-sided by default ("2 VS 2"). With teams > 1 every team is the same size,
+  // so repeat `ours` that many times ("2 VS 2 VS 2 VS 2"). Non-breaking spaces
+  // keep each matchup from wrapping mid-phrase.
+  window.matchupLabel = (ours, theirs, teams) =>
+    (teams > 1 ? Array.from({ length: teams }, () => ours) : [ours, theirs]).join(' VS ');
+</script>
+
+<!-- if always || ours !== 1 || theirs !== 1 -->
+  <badge neutral>@[matchupLabel(ours, theirs, teams)]</badge>
+<!-- /if -->
diff --git a/components/MaterialCost.html b/components/MaterialCost.html
new file mode 100644
index 00000000..d444d764
--- /dev/null
+++ b/components/MaterialCost.html
@@ -0,0 +1,49 @@
+<script type="module">
+  import { ALL_MATERIALS } from '/js/constants/MATERIALS.js';
+
+  // Material entries for a cost object { id: count }, sorted lowest amount first
+  // (so the highest sits nearest the crystals on the right). `short` flags a line
+  // the player can't cover — drives the red highlight in vendor + confirm.
+  window.materialCostList = (materials) =>
+    Object.entries(materials || {})
+      .map(([id, count]) => ({
+        id,
+        count,
+        ...ALL_MATERIALS[id],
+        short: ($.materials?.[id] || 0) < count,
+      }))
+      .sort((a, b) => a.count - b.count);
+</script>
+
+<crow material-cost minimalistic="@[minimalistic]" g="2" center>
+  <!-- each materialCostList(materials) as m (m.id) -->
+    <crow material-cost-line f="none" center>
+      <!-- if !minimalistic -->
+        <span text-red="@[m.short]">@[m.count]×</span>
+      <!-- /if -->
+      <component
+        src="/components/IconCell.html"
+        tip="@[{ info: { name: m.name, description: m.description } }]"
+      >
+        <img data-src="/static/images/materials/@[m.image]" alt="@[m.name]" material-cost-img />
+        <!-- if minimalistic -->
+          <ability-tile-ticks position="absolute" px="1">
+            <span text-red="@[m.short]">@[m.count]</span>
+          </ability-tile-ticks>
+        <!-- /if -->
+      </component>
+    </crow>
+  <!-- /each -->
+</crow>
+
+<style>
+  [material-cost-line] {
+    color: var(--muted-foreground);
+  }
+
+  [material-cost-img] {
+    width: calc(var(--unit) * 5);
+    height: calc(var(--unit) * 5);
+    object-fit: contain;
+  }
+</style>
diff --git a/components/Materials.html b/components/Materials.html
new file mode 100644
index 00000000..ce1bd916
--- /dev/null
+++ b/components/Materials.html
@@ -0,0 +1,44 @@
+<script type="module">
+  import { ALL_MATERIALS } from '/js/constants/MATERIALS.js';
+  import { getLevelByExperience } from '/js/level.js';
+
+  const materialDefs = Object.entries(ALL_MATERIALS).map(([id, m]) => ({ id, ...m }));
+
+  // A material with a minLevel only appears in the top bar once the player reaches it,
+  // so the essences stay hidden until their level-30 content is within reach.
+  window.visibleMaterials = (experience) =>
+    materialDefs.filter((m) => !m.minLevel || getLevelByExperience(experience) >= m.minLevel);
+</script>
+
+<crow materials minimalistic="@[minimalistic]" g="2" sm:g="1" center>
+  <!-- each visibleMaterials($.experience) as m (m.id) -->
+    <crow material-line f="none" center>
+      <!-- if !minimalistic -->
+        @[$.materials?.[m.id] ?? 0]×
+      <!-- /if -->
+      <component
+        src="/components/IconCell.html"
+        tip="@[{ info: { name: m.name, description: m.description } }]"
+      >
+        <img data-src="/static/images/materials/@[m.image]" alt="@[m.name]" material-img />
+        <!-- if minimalistic -->
+          <ability-tile-ticks position="absolute" px="1">
+            <span>@[$.materials?.[m.id] ?? 0]</span>
+          </ability-tile-ticks>
+        <!-- /if -->
+      </component>
+    </crow>
+  <!-- /each -->
+</crow>
+
+<style>
+  [material-line] {
+    color: var(--muted-foreground);
+  }
+
+  [material-img] {
+    width: calc(var(--unit) * 5.5);
+    height: calc(var(--unit) * 5.5);
+    object-fit: contain;
+  }
+</style>
diff --git a/components/MedicumContent.html b/components/MedicumContent.html
new file mode 100644
index 00000000..b9b57f0d
--- /dev/null
+++ b/components/MedicumContent.html
@@ -0,0 +1,79 @@
+<component src="/components/TitleBar.html" title="Medicum"></component>
+
+<medicum-card>
+  <crow medicum-head up g="4" p="6" sm:p="4">
+    <medicum-portrait w="24" h="32" sm:w="20" sm:h="26">
+      <img src="/static/images/races/npc/mother-alora.webp" alt="" />
+    </medicum-portrait>
+    <crow vertical up left g="3" f="1">
+      <h3 m="0">Mother Alora</h3>
+      <medicum-dialog>
+        Welcome to the Medicum, child. Bring me one of your brawlers and I will teach them to brew a
+        healing draught — so the arena need not be the only kindness you know.
+      </medicum-dialog>
+    </crow>
+  </crow>
+</medicum-card>
+
+<medicum-how vertical left g="2" mt="4">
+  <h4 m="0">How the Medicum works</h4>
+  <p text-muted m="0">
+    Assign one of your brawlers below and they will brew a healing potion every 2 minutes. Only one
+    may tend the brewing pot at a time, and they cannot enter the arena while they work. Remove them
+    with the ✕ whenever you need them back.
+  </p>
+</medicum-how>
+
+<component src="/components/BrawlerSlotList.html" slots="@[brawlerSlots]" mt="6"></component>
+
+<style>
+  medicum-card {
+    display: block;
+    margin-inline: calc(var(--unit) * -6);
+  }
+
+  @media (width <= 768px) {
+    medicum-card {
+      margin-inline: calc(var(--unit) * -3);
+    }
+  }
+
+  medicum-portrait {
+    overflow: hidden;
+    border-radius: calc(var(--radius) - (8px - var(--unit)));
+    box-shadow: inset 0 0 0 1px var(--border);
+    flex: none;
+  }
+
+  medicum-portrait img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+    display: block;
+  }
+
+  medicum-dialog {
+    font-style: italic;
+    font-size: calc(var(--unit) * 4);
+    color: var(--muted-foreground);
+    line-height: 1.5;
+  }
+
+  medicum-dialog::before {
+    content: '“';
+  }
+
+  medicum-dialog::after {
+    content: '”';
+  }
+
+  medicum-how h4 {
+    font-family: var(--font-heading);
+    letter-spacing: 0.04em;
+  }
+
+  [brawler-slot-actions] button:has(icon[chevron]) {
+    display: none;
+  }
+</style>
diff --git a/components/MerchantCard.html b/components/MerchantCard.html
new file mode 100644
index 00000000..cf17160d
--- /dev/null
+++ b/components/MerchantCard.html
@@ -0,0 +1,115 @@
+<card
+  merchant-card
+  p="0"
+  mx="-6"
+  sm:mx="-3"
+  locked="@[!settings.isTester && getLevelByExperience(experience) < level]"
+>
+  <crow merchant-head up g="4" p="6" onclick="toggleMerchant(this)">
+    <merchant-portrait w="24" h="32">
+      <img data-src="@[image]" alt="" />
+    </merchant-portrait>
+    <crow vertical up left g="2" f="1">
+      <merchant-name>
+        <h3 m="0">@[name]</h3>
+      </merchant-name>
+      <merchant-description text-sm text-muted>@[description]</merchant-description>
+      <merchant-goods text-sm text-muted
+        >There are currently <goods-count>@[vendorItemsAtLevel(level).length]</goods-count> goods in
+        store.</merchant-goods
+      >
+    </crow>
+    <crow g="3" center f="none" merchant-meta>
+      <span cinzel f="none">Level @[level]@[level < MAX_LEVEL ? '+' : '']</span>
+      <!-- if !settings.isTester && getLevelByExperience(experience) < level -->
+        <icon lock-closed f="none"></icon>
+      <!-- else -->
+        <icon chevron animate-y f="none"></icon>
+      <!-- /if -->
+    </crow>
+  </crow>
+
+  <accordion>
+    <accordion-content>
+      <slot></slot>
+    </accordion-content>
+  </accordion>
+</card>
+
+<style>
+  [merchant-card] {
+    overflow: clip;
+    border-radius: calc(var(--unit) * 1);
+    box-shadow: none;
+    background-color: transparent;
+  }
+
+  [merchant-card] accordion-content {
+    overflow: clip;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    will-change: grid-template-rows;
+  }
+
+  [merchant-head] {
+    cursor: pointer;
+    user-select: none;
+    transition: background 150ms ease;
+  }
+
+  [merchant-head]:has(+ accordion:not([open])):hover {
+    background: oklch(from var(--foreground) l c h / 0.035);
+  }
+
+  [merchant-card][locked] [merchant-head] {
+    cursor: not-allowed;
+  }
+
+  [merchant-card][locked] [merchant-head]:hover {
+    background: transparent;
+  }
+
+  [merchant-card][locked] merchant-portrait img {
+    filter: grayscale(1);
+    opacity: 0.7;
+  }
+
+  [merchant-card][locked] merchant-name,
+  [merchant-card][locked] merchant-description,
+  [merchant-card][locked] merchant-goods {
+    opacity: 0.55;
+  }
+
+  merchant-goods goods-count {
+    color: var(--c-accent);
+    font-weight: 600;
+  }
+
+  [merchant-card] [merchant-meta] icon[lock-closed] {
+    color: var(--muted-foreground);
+  }
+
+  [merchant-head]:has(+ accordion[open]) icon[chevron] {
+    transform: rotateX(180deg);
+  }
+
+  merchant-portrait {
+    overflow: hidden;
+    border-radius: calc(var(--radius) - (8px - var(--unit)));
+    box-shadow: inset 0 0 0 1px var(--border);
+  }
+
+  merchant-portrait img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+    display: block;
+  }
+
+  [merchant-card] [game-table] {
+    width: 100%;
+    margin-inline: 0;
+  }
+</style>
diff --git a/components/Modal.html b/components/Modal.html
new file mode 100644
index 00000000..33626948
--- /dev/null
+++ b/components/Modal.html
@@ -0,0 +1,60 @@
+<modal-root open="@[when]" bare="@[bare]">
+  <kingstone h="20"></kingstone>
+  <modal-panel>
+    <slot></slot>
+  </modal-panel>
+  <kingstone h="20"></kingstone>
+</modal-root>
+
+<style>
+  modal-root {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: grid;
+    grid-template-rows: calc(var(--unit) * 20) 1fr calc(var(--unit) * 20);
+    place-items: center;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: var(--scrim-2);
+    box-shadow: inset 0 0 10vw var(--scrim-3);
+    backdrop-filter: blur(1px);
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(1.05);
+    transition:
+      opacity 200ms ease-out,
+      transform 200ms ease-out;
+  }
+
+  modal-root[open] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+  }
+
+  modal-panel {
+    display: block;
+    position: relative;
+    width: fit-content;
+    max-width: calc(100% - calc(var(--unit) * 4));
+    max-height: 90vh;
+    overflow-y: auto;
+    text-align: left;
+    overflow-x: hidden;
+  }
+
+  modal-root[bare] {
+    display: block;
+    background: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+
+  @media (width <= 768px) {
+    modal-panel {
+      width: 100%;
+      max-width: calc(100% - calc(var(--unit) * 6));
+    }
+  }
+</style>
diff --git a/components/Mugshot.html b/components/Mugshot.html
new file mode 100644
index 00000000..61ec369c
--- /dev/null
+++ b/components/Mugshot.html
@@ -0,0 +1,27 @@
+<mugshot mirror="@[mirror]" style="--mug-x: @[x]; --mug-y: @[y]; --mug-zoom: @[zoom || 1.6]">
+  <img data-src="/static/images/races/@[image]" alt="@[name || '']" mugshot-img />
+</mugshot>
+
+<style>
+  mugshot {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  mugshot[mirror] {
+    transform: scaleX(-1);
+  }
+
+  mugshot [mugshot-img] {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: calc(100% * var(--mug-zoom, 2.6));
+    height: auto;
+    transform: translate(calc(var(--mug-x, 50) * -1%), calc(var(--mug-y, 15) * -1%));
+    pointer-events: none;
+  }
+</style>
diff --git a/components/Mystery.html b/components/Mystery.html
new file mode 100644
index 00000000..80c9e36c
--- /dev/null
+++ b/components/Mystery.html
@@ -0,0 +1,23 @@
+<mystery flex f="none">
+  <mystery-mark>?</mystery-mark>
+</mystery>
+
+<style>
+  mystery {
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    max-width: 100%;
+    max-height: 100%;
+    container-type: size;
+    border-radius: 50%;
+    background: var(--scrim-2);
+    color: var(--white);
+  }
+
+  mystery-mark {
+    font-size: 62cqmin;
+    line-height: 1;
+  }
+</style>
diff --git a/components/Overlay.html b/components/Overlay.html
new file mode 100644
index 00000000..e866de4b
--- /dev/null
+++ b/components/Overlay.html
@@ -0,0 +1,234 @@
+<script type="module">
+  import { historicalBattleTime } from '/js/helpers.js';
+
+  window.historicalBattleTime = historicalBattleTime;
+
+  // A spectator bailing out of a watch tears the fight down for real (closeCombatOverlay
+  // stops the replay loop + its SFX). A participant's fight keeps running in the background
+  // — the sidebar shows "Brawling" and the outcome still writes back — so just hide it.
+  // Every other overlay simply closes.
+  window.closeOverlay = () =>
+    $.overlay.name === 'Combat' && $.combat.spectator ? closeCombatOverlay() : ($.overlay = {});
+</script>
+
+<modal-root
+  open="@[Object.keys(overlay).length]"
+  bare="@[['Combat', 'AccountProgression'].includes(overlay.name)]"
+  onclick="closeOverlay()"
+>
+  <kingstone h="20" hidden="@[['Combat', 'AccountProgression'].includes(overlay.name)]">
+  </kingstone>
+
+  <modal-panel
+    onclick="event.stopPropagation()"
+    hidden="@[['Combat', 'AccountProgression'].includes(overlay.name)]"
+  >
+    <game-menu-mode hidden="@[overlay.name !== 'GameMenu']">
+      <component src="/components/GameMenu.html"></component>
+    </game-menu-mode>
+
+    <dialog-mode hidden="@[!['confirm','codeOfConduct','releaseNotes'].includes(overlay.name)]">
+      <!-- if overlay.name === 'confirm' -->
+        <component src="/components/BasicConfirmation.html"></component>
+      <!-- /if -->
+
+      <!-- if overlay.name === 'codeOfConduct' -->
+        <component src="/components/CodeOfConduct.html"></component>
+      <!-- /if -->
+
+      <!-- if overlay.name === 'releaseNotes' -->
+        <component src="/components/ReleaseNotes.html"></component>
+      <!-- /if -->
+    </dialog-mode>
+
+    <sheet-dialog-mode hidden="@[overlay.name !== 'characterSheet']">
+      <component src="/components/CharacterSheetDialog.html"></component>
+    </sheet-dialog-mode>
+
+    <season-mode>
+      <!-- if overlay.name === 'SeasonModal' -->
+        <component src="/components/SeasonModal.html"></component>
+      <!-- /if -->
+    </season-mode>
+  </modal-panel>
+
+  <kingstone h="20" hidden="@[['Combat', 'AccountProgression'].includes(overlay.name)]">
+  </kingstone>
+
+  <!-- if overlay.name === 'Combat' -->
+    <combat-frame onclick="event.stopPropagation()">
+      <!-- if combat.spectator -->
+        <spectator-strip>
+          <!-- if combat.historical -->
+            <strip-text>Re-watching historical battle</strip-text>
+            <strip-time>@[historicalBattleTime(combat.startedAt)]</strip-time>
+          <!-- else -->
+            <live-dot></live-dot>
+            <strip-text><strong>LIVE</strong> Spectating</strip-text>
+          <!-- /if -->
+        </spectator-strip>
+        <component
+          src="/components/ReWatchButton.html"
+          large="@[true]"
+          tpid="@[combat.teamplayId]"
+        ></component>
+      <!-- /if -->
+      <component src="/components/buttons/OverlayClose.html" onclick="closeOverlay()"> </component>
+      <!-- if settings.isTester -->
+        <combat-dev-controls>
+          <!-- if combat.seed -->
+            <combat-seed onclick="copyCombatSeed()">
+              <seed-key>seed</seed-key>
+              <seed-value>@[combat.seed]</seed-value>
+              <seed-copy>⧉</seed-copy>
+            </combat-seed>
+          <!-- /if -->
+          <combat-perspective>
+            <label>
+              Perspective
+              <input
+                type="checkbox"
+                role="switch"
+                checked="@[combat.perspectiveEnabled !== false]"
+                onchange="
+                  $.combat.perspectiveEnabled = this.checked;
+                  document.dispatchEvent(new Event('redrawCombat'));
+                "
+              />
+            </label>
+          </combat-perspective>
+        </combat-dev-controls>
+      <!-- /if -->
+      <component src="/components/Combat.html"></component>
+    </combat-frame>
+  <!-- /if -->
+
+  <!-- if overlay.name === 'AccountProgression' -->
+    <component src="/components/AccountProgression.html"></component>
+  <!-- /if -->
+</modal-root>
+
+<style>
+  game-menu-mode,
+  dialog-mode,
+  sheet-dialog-mode,
+  season-mode {
+    display: contents;
+  }
+
+  game-menu-mode[hidden],
+  dialog-mode[hidden],
+  sheet-dialog-mode[hidden] {
+    display: none;
+  }
+
+  combat-frame {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    background: url('/static/images/bg/arena-combat-4096x2304.webp') center / cover no-repeat;
+    box-shadow: inset 0 0 10vw black;
+  }
+
+  body[combat-the-wild] combat-frame {
+    background-image: url('/static/images/bg/the-wild-4096x2304.webp');
+  }
+
+  combat-frame spectator-strip {
+    position: absolute;
+    top: calc(var(--unit) * 4);
+    left: calc(var(--unit) * 4);
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    padding: calc(var(--unit) * 2) calc(var(--unit) * 3.5);
+    background: rgb(0 0 0 / 0.8);
+    border-radius: 999px;
+    color: var(--white);
+    font-size: calc(var(--unit) * 3.5);
+    pointer-events: none;
+  }
+
+  combat-frame spectator-strip strip-text strong {
+    color: var(--hue-red);
+    letter-spacing: 0.08em;
+  }
+
+  combat-frame spectator-strip strip-time {
+    color: oklch(from var(--white) calc(l - 0.3) c h);
+  }
+
+  combat-frame live-dot {
+    width: calc(var(--unit) * 2.5);
+    height: calc(var(--unit) * 2.5);
+    border-radius: 50%;
+    background: var(--hue-red);
+    animation: live-pulse 1.5s ease-out infinite;
+  }
+
+  combat-frame [rewatch-btn] {
+    position: absolute;
+    top: calc(var(--unit) * 4);
+    right: calc(var(--unit) * 16.5);
+    z-index: 3;
+  }
+
+  combat-frame combat-dev-controls {
+    position: absolute;
+    top: calc(var(--unit) * 4);
+    left: calc(var(--unit) * 4);
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+  }
+
+  combat-frame:has(spectator-strip) combat-dev-controls {
+    top: calc(var(--unit) * 12);
+  }
+
+  combat-frame combat-seed,
+  combat-frame combat-perspective {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    padding: calc(var(--unit) * 2) calc(var(--unit) * 3.5);
+    background: rgb(0 0 0 / 0.8);
+    border-radius: 999px;
+    color: var(--white);
+    font-size: calc(var(--unit) * 3.5);
+  }
+
+  combat-frame combat-seed {
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  combat-frame combat-perspective label {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2.5);
+    cursor: pointer;
+  }
+
+  combat-frame combat-seed seed-key {
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: oklch(from var(--white) calc(l - 0.35) c h);
+  }
+
+  combat-frame combat-seed seed-value {
+    max-width: calc(var(--unit) * 40);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  combat-frame combat-seed seed-copy {
+    color: oklch(from var(--white) calc(l - 0.2) c h);
+  }
+</style>
diff --git a/components/PageNotFound.html b/components/PageNotFound.html
new file mode 100644
index 00000000..4f2697d6
--- /dev/null
+++ b/components/PageNotFound.html
@@ -0,0 +1,55 @@
+<page-not-found vertical g="6" w="full">
+  <not-found-badge>
+    <!-- if icon -->
+      <icon @[icon]></icon>
+    <!-- else -->
+      <icon shrug></icon>
+    <!-- /if -->
+  </not-found-badge>
+
+  <crow vertical g="2" w="full">
+    <h2 cinzel m="0" text-center>@[heading || 'Page not found']</h2>
+    <p text-muted m="0" text-center not-found-message>
+      <!-- if message -->
+        @[message]
+      <!-- else -->
+        Whatever you were looking for isn't here — it may have moved,<br
+
+        />or never set foot in the arena at all.
+      <!-- /if -->
+    </p>
+  </crow>
+
+  <!-- if onclick -->
+    <button primary f="none" onclick="@[onclick]">@[label || 'Take me home']</button>
+  <!-- else -->
+    <a class="button" primary f="none" href="@[href || '/']">@[label || 'Take me home']</a>
+  <!-- /if -->
+</page-not-found>
+
+<style>
+  page-not-found {
+    min-height: calc(var(--unit) * 80);
+    padding-block: calc(var(--unit) * 16);
+  }
+
+  page-not-found not-found-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--unit) * 36);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: oklch(from var(--primary) l c h / 0.1);
+    box-shadow: inset 0 0 0 calc(var(--unit) * 0.5) oklch(from var(--primary) l c h / 0.18);
+    color: oklch(from var(--primary) calc(l * 0.8) c h / 0.65);
+  }
+
+  page-not-found not-found-badge icon {
+    font-size: calc(var(--unit) * 18);
+  }
+
+  page-not-found not-found-message {
+    max-width: calc(var(--unit) * 90);
+  }
+</style>
diff --git a/components/PalaestraContent.html b/components/PalaestraContent.html
new file mode 100644
index 00000000..79631e35
--- /dev/null
+++ b/components/PalaestraContent.html
@@ -0,0 +1,81 @@
+<component src="/components/TitleBar.html" title="Palaestra">
+  <button primary sm onclick="$.overlay = { name: 'AccountProgression' }">See progress</button>
+</component>
+
+<palaestra-card>
+  <crow palaestra-head up g="4" p="6" sm:p="4">
+    <palaestra-portrait w="24" h="32" sm:w="20" sm:h="26">
+      <img src="/static/images/races/npc/doctore-varro.webp" alt="" />
+    </palaestra-portrait>
+    <crow vertical up left g="3" f="1">
+      <h3 m="0">Doctore Varro</h3>
+      <palaestra-dialog>
+        So you want to grow stronger? Then give me a brawler and the sand. I will drill them until
+        they bleed wisdom — and every drop of their sweat hardens you, the whole ludus, alike.
+      </palaestra-dialog>
+    </crow>
+  </crow>
+</palaestra-card>
+
+<palaestra-how vertical left g="2" mt="4">
+  <h4 m="0">How the Palaestra works</h4>
+  <p text-muted m="0">
+    Assign one of your brawlers below and they will train for 10 account experience every 2 minutes.
+    Only one may take the sand at a time, and they cannot enter the arena while they drill. Remove
+    them with the ✕ whenever you need them back.
+  </p>
+</palaestra-how>
+
+<component src="/components/BrawlerSlotList.html" slots="@[brawlerSlots]" mt="6"></component>
+
+<style>
+  palaestra-card {
+    display: block;
+    margin-inline: calc(var(--unit) * -6);
+  }
+
+  @media (width <= 768px) {
+    palaestra-card {
+      margin-inline: calc(var(--unit) * -3);
+    }
+  }
+
+  palaestra-portrait {
+    overflow: hidden;
+    border-radius: calc(var(--radius) - (8px - var(--unit)));
+    box-shadow: inset 0 0 0 1px var(--border);
+    flex: none;
+  }
+
+  palaestra-portrait img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+    display: block;
+  }
+
+  palaestra-dialog {
+    font-style: italic;
+    font-size: calc(var(--unit) * 4);
+    color: var(--muted-foreground);
+    line-height: 1.5;
+  }
+
+  palaestra-dialog::before {
+    content: '“';
+  }
+
+  palaestra-dialog::after {
+    content: '”';
+  }
+
+  palaestra-how h4 {
+    font-family: var(--font-heading);
+    letter-spacing: 0.04em;
+  }
+
+  [brawler-slot-actions] button:has(icon[chevron]) {
+    display: none;
+  }
+</style>
diff --git a/components/PotionIcon.html b/components/PotionIcon.html
new file mode 100644
index 00000000..0b5ff094
--- /dev/null
+++ b/components/PotionIcon.html
@@ -0,0 +1 @@
+<icon potion></icon>
diff --git a/components/ReWatchButton.html b/components/ReWatchButton.html
new file mode 100644
index 00000000..56c3ddea
--- /dev/null
+++ b/components/ReWatchButton.html
@@ -0,0 +1,67 @@
+<script type="module">
+  import { rewatchTeamplay } from '/js/teamplay.js';
+
+  window.rewatchTeamplay = rewatchTeamplay;
+
+  // Each hover advances the icon another half-turn backward. Accumulating the angle
+  // (never resetting it) means the CSS transition only ever animates toward a smaller
+  // value, so leaving mid-spin completes in the same direction instead of snapping back.
+  window.spinRewatch = (icon) =>
+    icon.style.setProperty('--spin', (icon._spin = (icon._spin || 0) - 180) + 'deg');
+</script>
+
+<button
+  rewatch-btn
+  large="@[large]"
+  data-id="@[tpid]"
+  aria-label="Re-watch fight"
+  onclick="
+    event.stopPropagation();
+    rewatchTeamplay(event.target.closest('[rewatch-btn]').dataset.id);
+  "
+  onmouseenter="
+    spinRewatch(this.querySelector('icon'));
+    showTooltip({ description: 'Re-watch fight', plain: true }, this, {
+      direction: 'up',
+      lock: true,
+    });
+  "
+  onmouseleave="hideTooltip()"
+>
+  <icon rewatch></icon>
+</button>
+
+<style>
+  [rewatch-btn] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--unit) * 7);
+    height: calc(var(--unit) * 7);
+    padding: 0;
+    background: rgb(0 0 0 / 0.8);
+    color: var(--c-accent);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 200ms ease;
+  }
+
+  [rewatch-btn]:hover {
+    background: rgb(0 0 0 / 0.95);
+  }
+
+  [rewatch-btn][large] {
+    width: calc(var(--unit) * 10);
+    height: calc(var(--unit) * 10);
+  }
+
+  [rewatch-btn] icon {
+    font-size: calc(var(--unit) * 4);
+    transform: rotate(var(--spin, 0deg));
+    transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [rewatch-btn][large] icon {
+    font-size: calc(var(--unit) * 4.5);
+  }
+</style>
diff --git a/components/Register.html b/components/Register.html
new file mode 100644
index 00000000..8eace01b
--- /dev/null
+++ b/components/Register.html
@@ -0,0 +1,52 @@
+<script type="module">
+  window.authRegister = async (email, password) => {
+    try {
+      await $.socket.sendAsync('user/register', { email, password });
+      notify.success('Account was created. You can now log in.');
+    } catch ({ error }) {
+      notify.error(error);
+    }
+  };
+</script>
+
+<form
+  onsubmit="
+    event.preventDefault();
+    authRegister($.email, $.password).then(() => {
+      $.mode = 'login';
+    });
+  "
+>
+  <crow g="2" mb="3">
+    <input
+      type="email"
+      placeholder="Email"
+      value="@[email]"
+      oninput="$.email = this.value"
+      required
+      auth-input
+    />
+    <input
+      type="password"
+      placeholder="Password"
+      value="@[password]"
+      oninput="$.password = this.value"
+      required
+      auth-input
+    />
+    <button primary type="submit">Register</button>
+  </crow>
+  <p text-sm text-muted>
+    Already have an account?
+    <a
+      href="#"
+      primary
+      onclick="
+        event.preventDefault();
+        $.mode = 'login';
+      "
+    >
+      Log in
+    </a>
+  </p>
+</form>
diff --git a/components/ReleaseNotes.html b/components/ReleaseNotes.html
new file mode 100644
index 00000000..86f03038
--- /dev/null
+++ b/components/ReleaseNotes.html
@@ -0,0 +1,61 @@
+<component src="/components/Dialog.html" title="Release Notes" back="releaseNotesBack()">
+  <release-notes>
+    <release-notes-scroll>
+      <!-- each releaseNotes.entries as note (note.date + note.title) -->
+        <release-note>
+          <h5 cinzel>@[formatReleaseDate(note.date)]</h5>
+          <strong>@[note.title]</strong>
+          <p text-sm text-muted>@[note.text]</p>
+        </release-note>
+      <!-- /each -->
+    </release-notes-scroll>
+
+    <component
+      src="/components/remote/Pagination.html"
+      page="@[releaseNotes.page]"
+      pageCount="@[releaseNotes.pageCount]"
+      prev="releaseNotesPrev()"
+      next="releaseNotesNext()"
+    ></component>
+  </release-notes>
+</component>
+
+<style>
+  [dialog-card]:has(release-notes) {
+    max-width: calc(var(--unit) * 145);
+  }
+
+  release-notes {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 4);
+    width: 100%;
+  }
+
+  release-notes-scroll {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 4);
+    max-height: min(calc(var(--unit) * 120), 60vh);
+    overflow-y: auto;
+    padding-right: calc(var(--unit) * 2);
+  }
+
+  release-note {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+    padding-bottom: calc(var(--unit) * 4);
+    border-bottom: 1px solid oklch(from var(--foreground) l c h / 0.08);
+  }
+
+  release-note:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+
+  release-note h5 {
+    margin: 0;
+    color: var(--muted-foreground);
+  }
+</style>
diff --git a/components/ResetPasswordContent.html b/components/ResetPasswordContent.html
new file mode 100644
index 00000000..b8c7d021
--- /dev/null
+++ b/components/ResetPasswordContent.html
@@ -0,0 +1,69 @@
+<script type="module">
+  let resetEligible = false;
+  let resetError = '';
+
+  try {
+    await $.socket.sendAsync('user/password/reset-eligibility', { secret: $.page.params.secret });
+    resetEligible = true;
+  } catch ({ error }) {
+    resetError = error || 'This reset link is invalid or expired';
+  }
+
+  component({ resetEligible, resetError });
+
+  window.submitNewPassword = async () => {
+    const pw = document.getElementById('new-password').value;
+    const confirm = document.getElementById('confirm-password').value;
+    if (!pw) return;
+    if (pw !== confirm) return notify.error('Passwords do not match');
+
+    try {
+      await $.socket.sendAsync('user/password/set-new', {
+        secret: $.page.params.secret,
+        password: pw,
+      });
+      notify.success('Password updated successfully');
+      window.location.href = '/';
+    } catch ({ error }) {
+      notify.error(error || 'Failed to reset password');
+    }
+  };
+</script>
+
+<crow vertical g="4" left>
+  <h3 cinzel m="0">Reset Password</h3>
+
+  <!-- if this.resetError -->
+    <span text-sm text-error>@[this.resetError]</span>
+  <!-- /if -->
+
+  <!-- if this.resetEligible -->
+    <label pw-label w="full">
+      <span text-sm text-muted>New password</span>
+      <input
+        type="password"
+        id="new-password"
+        placeholder="Enter new password"
+        pw-input
+        w="full"
+        mt="1"
+      />
+    </label>
+    <label pw-label w="full">
+      <span text-sm text-muted>Confirm password</span>
+      <input
+        type="password"
+        id="confirm-password"
+        placeholder="Confirm new password"
+        pw-input
+        w="full"
+        mt="1"
+      />
+    </label>
+    <button primary onclick="submitNewPassword()">Confirm</button>
+  <!-- /if -->
+
+  <!-- if !this.resetEligible && !this.resetError -->
+    <span text-sm text-muted>Checking reset link...</span>
+  <!-- /if -->
+</crow>
diff --git a/components/ResultAnnouncement.html b/components/ResultAnnouncement.html
new file mode 100644
index 00000000..610a9bd0
--- /dev/null
+++ b/components/ResultAnnouncement.html
@@ -0,0 +1,610 @@
+<script type="module">
+  import { rollLootDetailed, rateTier } from '/js/loot.js';
+  import { seasonArena } from '/js/seasonArena.js';
+  import { incStat } from '/js/utils.js';
+
+  // A concluded fight is real (and logged) when it carries a fight id (PvE) or was
+  // tagged a duel (PvP); build previews and the training dummy carry neither.
+  const logCombatOutcome = (combat, fight) => {
+    const mode = combat.fightId ? 'pve' : combat.context === 'pvp' ? 'pvp' : null;
+    if (!mode) return;
+    const won = window.combatOutcome(combat) === 'victory';
+    incStat('combat.fights');
+    incStat(`combat.${won ? 'wins' : 'losses'}`);
+    if (mode === 'pve') {
+      incStat(['combat', 'pve', won ? 'wins' : 'losses', combat.fightId]);
+      if (won && fight?.boss) incStat('combat.pve.winsBoss');
+    } else {
+      incStat(`combat.pvp.${won ? 'wins' : 'losses'}`);
+      incStat('combat.pvp.fights.randomDuel');
+    }
+    const sum = combat.summary || {};
+    if (sum.damageDealt) incStat('combat.damage.dealt', { count: sum.damageDealt });
+    if (sum.damageReceived) incStat('combat.damage.received', { count: sum.damageReceived });
+    if (sum.largestHitDealt) incStat('combat.largest.damage.dealt', { max: sum.largestHitDealt });
+    if (sum.largestHitReceived)
+      incStat('combat.largest.damage.received', { max: sum.largestHitReceived });
+    if (sum.largestHeal) incStat('combat.largest.heal', { max: sum.largestHeal });
+  };
+
+  const s = $[component({ shown: false, rewardsShown: 0 })];
+
+  // Which reveal tick the action button waits for, so it always lands after the last
+  // reward row: victory after its XP + loot rows; a teamplay defeat after its lone
+  // participation-XP row; every other loss with the flavour line alone.
+  window.resultButtonStep = (combat) =>
+    window.combatOutcome(combat) === 'victory'
+      ? 3 + ($.combatLoot?.length || 0)
+      : window.combatOutcome(combat) === 'defeat' && window.combatRewardXp(combat) > 0
+        ? 4
+        : 2;
+
+  // A stepped reveal: the verdict shows first, then a ~240ms tick counter (rewardsShown)
+  // opens the banner, each reward one by one, and finally the button — every element is
+  // gated on its own tick threshold so the button always lands after the last reward.
+  let revealed = false;
+  let shownTimer = null;
+  let stepTimer = null;
+  window.__resultAnnouncementUnsub?.();
+  window.__resultAnnouncementUnsub = $.on('afterUpdate', (current, prev) => {
+    const ended =
+      current.combat?.duration > 0 && current.elapsedMilliseconds >= current.combat.duration;
+    if (ended && !revealed) {
+      revealed = true;
+      s.shown = false;
+      s.rewardsShown = 0;
+      const fight = seasonArena(current.season).find((f) => f.id === current.combat?.fightId);
+      logCombatOutcome(current.combat, fight);
+      if (fight && window.combatOutcome(current.combat) === 'victory') {
+        const rolled = rollLootDetailed(fight);
+        $.combatLoot = rolled.filter((d) => d.dropped);
+        // Luck: log each non-guaranteed roll under its rarity tier word. The key must
+        // be dot-free — a raw chance like '0.3' is flattened to a Mongo dot-path on save
+        // and nests as 0→3. Leaves are bare counts so each tier shows plain numbers.
+        rolled.forEach(
+          (d) =>
+            !d.guaranteed &&
+            incStat(['loot', 'luck', rateTier(d.chance).word, d.dropped ? 'successes' : 'fails'], {
+              primitive: true,
+            }),
+        );
+      } else {
+        $.combatLoot = [];
+      }
+      clearTimeout(shownTimer);
+      clearInterval(stepTimer);
+      shownTimer = setTimeout(() => {
+        s.shown = true;
+        stepTimer = setInterval(() => {
+          s.rewardsShown += 1;
+          if (s.rewardsShown > 4 + $.combatLoot.length) {
+            clearInterval(stepTimer);
+            stepTimer = null;
+          }
+        }, 240);
+      }, 500);
+      // The Emperor's first defeat hands off to a cutscene with its own audio,
+      // so skip the stinger there — but still reveal the rewards panel above.
+      const emperorCutscene =
+        current.combat?.fightId === 'the-emperor' &&
+        window.combatOutcome(current.combat) === 'victory' &&
+        (current.bossHighscore || 0) < 15;
+      if (!emperorCutscene) {
+        // Spectators have no side to lose, so a decisive result is the upbeat fanfare;
+        // only an actual defeat/draw (a participant, or a spectated tie) gets the dirge.
+        const result = window.combatResultOutcome(current.combat);
+        const stinger =
+          result === 'victory' || result === 'spectator'
+            ? 'Victory Stinger 1'
+            : 'Stinger - Ominous Timpani';
+        try {
+          new window.Howl({
+            src: [window.AUDIO[stinger]],
+            volume:
+              (current.settings?.volume?.sfx ?? 1) * (current.settings?.volume?.master ?? 0.5),
+          }).play();
+        } catch {}
+      }
+    }
+    if (!ended) {
+      revealed = false;
+      s.shown = false;
+      s.rewardsShown = 0;
+      if ($.combatLoot.length) $.combatLoot = [];
+      clearTimeout(shownTimer);
+      clearInterval(stepTimer);
+      stepTimer = null;
+    }
+  });
+</script>
+
+<!-- if combatEnded(combat, elapsedMilliseconds) -->
+  <result-announcement
+    position="absolute"
+    toggled="@[this.shown]"
+    split="@[combat?.accountsAttending > 2]"
+    onclick="event.stopPropagation()"
+  >
+    <result-panel flex down g="3" p="4">
+      <result-banner>
+        <component
+          src="/components/VictoryOrLoss.html"
+          outcome="@[combatResultOutcome(combat)]"
+          label="@[combatResultLabel(combat)]"
+          teamColor="@[combatResultTeamColor(combat)]"
+        >
+        </component>
+      </result-banner>
+
+      <!-- if !combat.spectator -->
+        <result-outcome flex down w="full">
+          <reward-box
+            banner
+            victory="@[combatOutcome(combat) === 'victory']"
+            defeat="@[combatOutcome(combat) === 'defeat']"
+            draw="@[combatOutcome(combat) === 'draw']"
+            open="@[this.rewardsShown >= 1]"
+          >
+            <box-body open="@[this.rewardsShown >= 2]">
+              <!-- if combatOutcome(combat) === 'victory' -->
+                <spoils-title>rewards</spoils-title>
+                <box-rule></box-rule>
+                <spoils-list>
+                  <spoil-row open="@[this.rewardsShown >= 2]">
+                    <spoil-inner>
+                      <component src="/components/IconCell.html" tip="@[null]"
+                        ><icon experience></icon
+                      ></component>
+                      <spoil-label>+@[combatRewardXp(combat)] XP</spoil-label>
+                    </spoil-inner>
+                  </spoil-row>
+                  <!-- each combatLoot as drop (drop.key), i -->
+                    <spoil-row @[drop.kind] open="@[this.rewardsShown >= 3 + i]">
+                      <spoil-inner>
+                        <!-- if drop.kind === 'equipment' -->
+                          <eq-dark dark>
+                            <eq-name-target
+                              onmouseenter="
+                                showTooltip(
+                                  equipmentTooltipProps(EQUIPMENT(drop.item.id, true)),
+                                  this.querySelector('eq-link') || this,
+                                  { direction: 'up', lock: true },
+                                )
+                              "
+                              onmouseleave="hideTooltip()"
+                            >
+                              <component
+                                src="/components/EquipmentLink.html"
+                                name="@[drop.item.name]"
+                                element="@[drop.item.element]"
+                                level="@[drop.item.level]"
+                              ></component>
+                            </eq-name-target>
+                          </eq-dark>
+                        <!-- /if -->
+                        <!-- if drop.kind !== 'equipment' -->
+                          <component
+                            src="/components/IconCell.html"
+                            tip="@[{ info: { name: drop.item.name, description: drop.item.description } }]"
+                          >
+                            <!-- if drop.kind === 'materials' -->
+                              <img
+                                data-src="/static/images/materials/@[drop.item.image]"
+                                alt="@[drop.item.name]"
+                                spoil-img
+                              />
+                            <!-- /if -->
+                            <!-- if drop.kind === 'item' -->
+                              <icon @[drop.item.icon]></icon>
+                            <!-- /if -->
+                          </component>
+                          <spoil-label>@[drop.item.name]</spoil-label>
+                        <!-- /if -->
+                      </spoil-inner>
+                    </spoil-row>
+                  <!-- /each -->
+                </spoils-list>
+              <!-- /if -->
+              <!-- if combatOutcome(combat) === 'defeat' -->
+                <box-flavor>Your side has fallen</box-flavor>
+              <!-- /if -->
+              <!-- if combatOutcome(combat) === 'draw' -->
+                <box-flavor>Neither side yields</box-flavor>
+              <!-- /if -->
+            </box-body>
+
+            <!-- if combatOutcome(combat) === 'defeat' && combatRewardXp(combat) > 0 -->
+              <participation-spoils>
+                <box-rule></box-rule>
+                <spoils-list>
+                  <spoil-row xp open="@[this.rewardsShown >= 3]">
+                    <spoil-inner>
+                      <component
+                        src="/components/IconCell.html"
+                        tip="@[{ info: { name: 'Participation XP', description: 'A little account XP for stepping into the arena, win or lose.' } }]"
+                        ><icon experience></icon
+                      ></component>
+                      <spoil-label
+                        >+@[combatRewardXp(combat)] XP
+                        <spoil-note>(for participating)</spoil-note></spoil-label
+                      >
+                    </spoil-inner>
+                  </spoil-row>
+                </spoils-list>
+              </participation-spoils>
+            <!-- /if -->
+
+            <box-actions open="@[this.rewardsShown >= resultButtonStep(combat)]">
+              <!-- if combatOutcome(combat) === 'victory' -->
+                <component
+                  src="/components/buttons/PhysicalButton.html"
+                  label="claim"
+                  onclick="claimCombatReward()"
+                ></component>
+              <!-- /if -->
+              <!-- if combatOutcome(combat) !== 'victory' -->
+                <component
+                  src="/components/buttons/PhysicalButton.html"
+                  label="@[combat.context === 'teamplay' ? 'Leave' : 'Retreat']"
+                  silver="@[true]"
+                  sm="@[true]"
+                  onclick="combatLossAction()"
+                ></component>
+              <!-- /if -->
+            </box-actions>
+          </reward-box>
+        </result-outcome>
+      <!-- /if -->
+    </result-panel>
+  </result-announcement>
+<!-- /if -->
+
+<style>
+  result-announcement {
+    inset: 0;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+  }
+
+  result-panel {
+    flex-direction: column;
+    height: auto;
+    align-items: center;
+    min-width: calc(var(--unit) * 70);
+    text-align: center;
+    pointer-events: auto;
+  }
+
+  result-outcome {
+    align-items: center;
+  }
+
+  /* A crowded fight (3+ accounts) fills the arena centre, so the result panel overlays
+     the whole screen (it's a sibling of the scaled combat-viewport, not clamped to the ring). The
+     middle row is the ring's on-screen height (outer ellipse × tilt × fit-scale),
+     so the bottom 1fr row is the true gap below it: the rewards/loss block hugs the
+     top of that gap, landing just under the combatants' feet (the card art overflows
+     the ellipse downward, so the ellipse bottom ≈ the feet). */
+  result-announcement[split] result-panel {
+    --ring-h: calc(
+      var(--combat-outer-d) * 1.2 * var(--combat-outer-tilt, 1) * var(--combat-fit-scale, 1)
+    );
+    display: grid;
+    grid-template-rows: 1fr var(--ring-h) 1fr;
+    height: 100%;
+    place-items: center;
+    padding: calc(var(--unit) * 4) 0;
+  }
+
+  /* Transparent by default so it doesn't disturb the centred non-split flex column. */
+  result-banner {
+    display: contents;
+  }
+
+  /* The banner can't ride the ellipse top: on a wide screen the ellipse nearly fills
+     the height, collapsing the top gap and pinning the banner to the very top. Instead
+     centre it (absolute, over the full-screen result-announcement) in the empty band
+     above the combatants — combatants start ~⅓ down, so ~20% sits mid-band. */
+  result-announcement[split] result-panel > result-banner {
+    display: block;
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* 3+ accounts: bottom-anchor the reward banner to the viewport so the ring layout can
+     never push it off-screen, and reveal it as a single fade at full height — its space
+     is reserved from mount (opacity 0), then opacity flips on toggle. No stepped grow, so
+     it never clips and never moves. It may overlap the combatants; that's fine. */
+  result-announcement[split] result-panel > result-outcome {
+    position: absolute;
+    left: 50%;
+    bottom: calc(var(--unit) * 4);
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: min(calc(var(--unit) * 110), 92vw);
+    height: max-content;
+    opacity: 0;
+    transition: opacity 360ms ease;
+  }
+
+  result-announcement[toggled][split] result-panel > result-outcome {
+    opacity: 1;
+  }
+
+  @media (width <= 767px) {
+    result-announcement[split] result-panel > result-outcome {
+      bottom: calc(var(--unit) * 2);
+    }
+  }
+
+  /* Split shows the banner whole, so lay every stepped element out open and visible —
+     the per-row grow/drop animations are gated to :not([split]) below. */
+  result-announcement[split] reward-box,
+  result-announcement[split] reward-box spoil-inner,
+  result-announcement[split] reward-box box-flavor,
+  result-announcement[split] reward-box box-actions {
+    opacity: 1;
+    transform: none;
+  }
+
+  result-announcement[split] reward-box spoil-row,
+  result-announcement[split] reward-box:is([defeat], [draw]) box-body {
+    grid-template-rows: 1fr;
+  }
+
+  /* A touch wider than its content so the banner reads as a proper plaque over the arena. */
+  result-announcement[split] reward-box {
+    padding-inline: calc(var(--unit) * 15);
+  }
+
+  /* ---- reward box (Heraldic Banner) ---- */
+  reward-box {
+    --accent: var(--gold-warm);
+    --accent-soft: oklch(from var(--accent) l c h / 0.35);
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--unit) * 3);
+    padding: calc(var(--unit) * 5);
+    text-align: center;
+    color: var(--white);
+  }
+
+  reward-box[defeat] {
+    --accent: oklch(from var(--white) l c h);
+  }
+
+  reward-box[draw] {
+    --accent: oklch(from var(--white) calc(l - 0.16) c h);
+  }
+
+  reward-box box-rule {
+    width: 80%;
+    height: 1px;
+    margin-block: calc(var(--unit) * 1);
+    background: linear-gradient(to right, transparent, var(--accent-soft), transparent);
+  }
+
+  reward-box box-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    width: 100%;
+  }
+
+  /* A loss opens once: the whole body (its flavour line) grows in together. */
+  reward-box:is([defeat], [draw]) box-body {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+
+  reward-box:is([defeat], [draw]) box-flavor {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  reward-box spoils-title {
+    font-family: var(--font-heading);
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: calc(var(--unit) * 5);
+    color: var(--accent);
+  }
+
+  reward-box spoils-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    padding: 0 calc(var(--unit) * 3);
+  }
+
+  /* Each row is a 0fr→1fr grid so it can open the banner a little more as it reveals;
+     the inner (clipped) element carries the drop-and-bounce. */
+  reward-box spoil-row {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    width: 100%;
+    font-size: calc(var(--unit) * 3.75);
+    font-variant-numeric: tabular-nums;
+  }
+
+  reward-box spoil-inner {
+    overflow: hidden;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: calc(var(--unit) * 2.5);
+    padding-top: calc(var(--unit) * 1.5);
+  }
+
+  reward-box spoil-row icon-cell icon {
+    font-size: calc(var(--unit) * 4.5);
+    --color: var(--muted-foreground);
+  }
+
+  /* Defeat sometimes pays participation XP: a lone row under the flavour, its experience
+     glyph (gold by default) tinted the DEFEAT silver so it reads as a consolation. */
+  reward-box participation-spoils {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  reward-box spoil-note {
+    margin-left: 0.35em;
+    color: var(--muted-foreground);
+  }
+
+  reward-box[banner][defeat] spoil-row icon-cell icon[experience] {
+    --color: oklch(from var(--white) calc(l - 0.12) c h);
+  }
+
+  reward-box [spoil-img] {
+    width: calc(var(--unit) * 5);
+    height: calc(var(--unit) * 5);
+    object-fit: contain;
+  }
+
+  reward-box eq-name-target {
+    display: inline-flex;
+    cursor: help;
+  }
+
+  reward-box box-flavor {
+    font-style: normal;
+    font-weight: 400;
+    font-size: calc(var(--unit) * 5.5);
+    color: oklch(from var(--accent) calc(l + 0.02) c h);
+  }
+
+  reward-box box-actions {
+    margin-top: calc(var(--unit) * 4);
+  }
+
+  reward-box box-actions button {
+    min-width: calc(var(--unit) * 26);
+  }
+
+  /* The banner is a dark surface, so its equipment link renders in dark mode. */
+  reward-box eq-dark {
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  reward-box[banner] {
+    padding-bottom: calc(var(--unit) * 9);
+    color: oklch(0.96 0.02 85);
+    background: linear-gradient(
+      180deg,
+      oklch(from var(--accent) 0.42 min(c, 0.08) h),
+      oklch(from var(--accent) 0.3 min(c, 0.07) h)
+    );
+    border-top: calc(var(--unit) * 2) solid oklch(from var(--accent) 0.6 min(c, 0.1) h);
+    border-left: 1px solid oklch(from var(--accent) 0.5 min(c, 0.08) h);
+    border-right: 1px solid oklch(from var(--accent) 0.5 min(c, 0.08) h);
+    clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
+    filter: drop-shadow(0 calc(var(--unit) * 1) calc(var(--unit) * 2) var(--scrim-3));
+  }
+
+  reward-box[banner] spoils-title,
+  reward-box[banner] box-flavor {
+    color: oklch(0.97 0.02 85);
+  }
+
+  reward-box[banner][victory] spoils-title {
+    color: var(--gold-shine);
+  }
+
+  /* Stepped entrance — every element hides until its own [open] flips (driven by the
+     rewardsShown tick counter): the verdict pops in first, then the banner opens, then
+     victory rewards drop in one by one — each opening the banner a little more with a
+     swift, dramatic overshoot — and the button lands after the last. A loss opens once,
+     showing its line and button together. */
+  result-announcement:not([toggled]) victory-or-loss,
+  reward-box:not([open]),
+  reward-box spoil-inner,
+  reward-box:is([defeat], [draw]) box-flavor,
+  reward-box box-actions:not([open]) {
+    opacity: 0;
+  }
+
+  result-announcement[toggled] victory-or-loss {
+    animation: verdictIn 380ms cubic-bezier(0.34, 1.5, 0.5, 1) forwards;
+  }
+
+  result-announcement:not([split]) reward-box[open] {
+    animation: bannerIn 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  }
+
+  result-announcement:not([split]) reward-box spoil-row[open] {
+    animation: rowOpen 240ms ease forwards;
+  }
+
+  result-announcement:not([split]) reward-box spoil-row[open] spoil-inner {
+    animation: rowDrop 300ms cubic-bezier(0.2, 1.7, 0.4, 1) forwards;
+  }
+
+  result-announcement:not([split]) reward-box:is([defeat], [draw]) box-body[open] {
+    animation: rowOpen 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  }
+
+  result-announcement:not([split]) reward-box:is([defeat], [draw]) box-body[open] box-flavor {
+    animation: rowDrop 340ms cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
+  }
+
+  result-announcement:not([split]) reward-box box-actions[open] {
+    animation: rowDrop 320ms cubic-bezier(0.2, 1.7, 0.4, 1) forwards;
+  }
+
+  @keyframes verdictIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--unit) * -2)) scale(0.85);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes bannerIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--unit) * -3));
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes rowOpen {
+    from {
+      grid-template-rows: 0fr;
+    }
+    to {
+      grid-template-rows: 1fr;
+    }
+  }
+
+  @keyframes rowDrop {
+    from {
+      opacity: 0;
+      transform: translateY(-150%);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+</style>
diff --git a/components/SeasonDowntime.html b/components/SeasonDowntime.html
new file mode 100644
index 00000000..9673f180
--- /dev/null
+++ b/components/SeasonDowntime.html
@@ -0,0 +1,133 @@
+<season-downtime>
+  <downtime-card>
+    <downtime-kicker>Season @[season] has concluded</downtime-kicker>
+    <downtime-title>The arena is being reforged</downtime-title>
+
+    <downtime-next>
+      <span>Season @[season + 1] · @[seasonName(season + 1)] begins in</span>
+      <downtime-countdown>@[formatDuration(msUntilNextSeason(clock.now))]</downtime-countdown>
+    </downtime-next>
+
+    <downtime-note>
+      All account progress resets for the fresh season — a clean slate for everyone.
+    </downtime-note>
+
+    <!-- if !isPremiumNow -->
+      <downtime-pass>
+        <button primary progression-purchase onclick="purchasePass()">
+          Get the Season @[season + 1] Pass — @[formatEUR(passPrice(clock.now))]
+        </button>
+        <downtime-pass-note>Buy now and you're set the moment the gates reopen.</downtime-pass-note>
+      </downtime-pass>
+    <!-- /if -->
+    <!-- if isPremiumNow -->
+      <downtime-premium>
+        <icon checkmark></icon>
+        <span>Season Pass secured — see you on the sand.</span>
+      </downtime-premium>
+    <!-- /if -->
+  </downtime-card>
+</season-downtime>
+
+<style>
+  season-downtime {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: calc(var(--unit) * 320);
+    margin: 0 auto;
+    padding: calc(var(--unit) * 6) calc(var(--unit) * 3);
+  }
+
+  downtime-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--unit) * 4);
+    width: min(calc(var(--unit) * 150), 92vw);
+    padding: calc(var(--unit) * 10) calc(var(--unit) * 8);
+    text-align: center;
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow:
+      inset 0 0 0 1px var(--border),
+      0 calc(var(--unit) * 2) calc(var(--unit) * 8) var(--scrim-2);
+  }
+
+  downtime-kicker {
+    font-size: calc(var(--unit) * 3);
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: var(--muted-foreground);
+  }
+
+  downtime-title {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 8);
+    font-weight: 600;
+    line-height: 1.05;
+    color: var(--primary);
+  }
+
+  downtime-next {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 2);
+    margin-top: calc(var(--unit) * 2);
+    font-size: calc(var(--unit) * 4);
+    color: var(--foreground);
+  }
+
+  downtime-countdown {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 12);
+    font-weight: 700;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--primary);
+  }
+
+  downtime-note {
+    max-width: calc(var(--unit) * 110);
+    font-size: calc(var(--unit) * 3.75);
+    color: var(--muted-foreground);
+  }
+
+  downtime-pass {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    margin-top: calc(var(--unit) * 2);
+  }
+
+  downtime-pass-note {
+    font-size: calc(var(--unit) * 3);
+    color: var(--muted-foreground);
+  }
+
+  downtime-premium {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 2);
+    margin-top: calc(var(--unit) * 2);
+    font-size: calc(var(--unit) * 4);
+    color: var(--hue-green);
+  }
+
+  @media (width <= 768px) {
+    downtime-card {
+      padding: calc(var(--unit) * 7) calc(var(--unit) * 5);
+    }
+
+    downtime-title {
+      font-size: calc(var(--unit) * 6);
+    }
+
+    downtime-countdown {
+      font-size: calc(var(--unit) * 9);
+    }
+  }
+</style>
diff --git a/components/SeasonModal.html b/components/SeasonModal.html
new file mode 100644
index 00000000..646bff0b
--- /dev/null
+++ b/components/SeasonModal.html
@@ -0,0 +1,315 @@
+<script type="module">
+  const n = $.season;
+  const sched = window.seasonSchedule();
+  const meta = window.seasonMeta(n);
+  const fmt = (ms) =>
+    new Date(ms).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+
+  component({
+    n,
+    name: meta.name,
+    tagline: meta.tagline,
+    highlights: meta.highlights,
+    started: fmt(sched.start),
+    ends: fmt(sched.end),
+    nextStarts: fmt(sched.nextStart),
+    daysLeft: window.daysLeftInSeason(),
+  });
+</script>
+
+<component src="/components/Dialog.html" title="Season @[season]">
+  <season-body>
+    <season-header>
+      <season-title>@[this.name]</season-title>
+      <season-tagline>@[this.tagline]</season-tagline>
+    </season-header>
+
+    <season-section>
+      <section-label>This season</section-label>
+      <season-highlights>
+        <!-- each this.highlights as point -->
+          <highlight-row>
+            <icon checkmark></icon>
+            <span>@[point]</span>
+          </highlight-row>
+        <!-- /each -->
+      </season-highlights>
+    </season-section>
+
+    <season-section>
+      <section-label>Schedule</section-label>
+      <schedule-grid>
+        <schedule-cell>
+          <cell-label>Started</cell-label>
+          <cell-value>@[this.started]</cell-value>
+        </schedule-cell>
+        <schedule-cell>
+          <cell-label>Ends</cell-label>
+          <cell-value>@[this.ends]</cell-value>
+        </schedule-cell>
+        <schedule-cell>
+          <cell-label>Next season</cell-label>
+          <cell-value>@[this.nextStarts]</cell-value>
+        </schedule-cell>
+        <schedule-cell>
+          <cell-label>Time left</cell-label>
+          <cell-value>@[this.daysLeft] days</cell-value>
+        </schedule-cell>
+      </schedule-grid>
+    </season-section>
+
+    <!-- if token -->
+      <season-pass premium="@[isPremiumNow]">
+        <!-- if isPremiumNow -->
+          <pass-active>
+            <icon checkmark></icon>
+            <pass-active-text>
+              <strong>Season Pass active</strong>
+              <span>
+                @[seasonNumber(premiumUntil) - season] more season@[seasonNumber(premiumUntil) -
+                season === 1 ? '' : 's'] · expires @[new
+                Date(premiumUntil).toLocaleDateString('en-US', { year: 'numeric', month: 'short',
+                day: 'numeric' })]
+              </span>
+            </pass-active-text>
+          </pass-active>
+        <!-- /if -->
+        <!-- if !isPremiumNow -->
+          <pass-offer>
+            <pass-copy>
+              <strong>Season Pass</strong>
+              <!-- if passDiscount(clock.now) -->
+                <span
+                  ><mark>@[passDiscount(clock.now)]%</mark> off — the season's nearly over.</span
+                >
+              <!-- /if -->
+              <!-- if !passDiscount(clock.now) -->
+                <span>Unlock extra rewards as you level up this season.</span>
+              <!-- /if -->
+            </pass-copy>
+            <pass-buy>
+              <pass-price>
+                <!-- if passDiscount(clock.now) -->
+                  <price-was>@[formatEUR(PASS_PRICE)]</price-was>
+                <!-- /if -->
+                <price-now>@[formatEUR(passPrice(clock.now))]</price-now>
+              </pass-price>
+              <button primary progression-purchase onclick="purchasePass()">Purchase Pass</button>
+            </pass-buy>
+          </pass-offer>
+        <!-- /if -->
+      </season-pass>
+    <!-- /if -->
+  </season-body>
+</component>
+
+<style>
+  season-mode [dialog-content] {
+    display: contents;
+  }
+
+  season-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 6);
+    width: 100%;
+  }
+
+  season-header {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1.5);
+  }
+
+  season-title {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 9);
+    font-weight: 600;
+    color: var(--primary);
+    line-height: 1;
+  }
+
+  season-tagline {
+    font-size: calc(var(--unit) * 4);
+    font-style: italic;
+    color: var(--muted-foreground);
+  }
+
+  section-label {
+    display: block;
+    margin-bottom: calc(var(--unit) * 3);
+    font-size: calc(var(--unit) * 2.75);
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--muted-foreground);
+  }
+
+  season-highlights {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 2);
+  }
+
+  highlight-row {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 3);
+    font-size: calc(var(--unit) * 3.75);
+    color: var(--foreground);
+  }
+
+  highlight-row icon {
+    color: var(--hue-green);
+    font-size: calc(var(--unit) * 4);
+  }
+
+  schedule-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: calc(var(--unit) * 3);
+  }
+
+  schedule-cell {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 0.5);
+    padding: calc(var(--unit) * 3);
+    border-radius: calc(var(--unit) * 1);
+    background: oklch(from var(--foreground) l c h / 0.03);
+    box-shadow: inset 0 0 0 1px var(--border);
+  }
+
+  cell-label {
+    font-size: calc(var(--unit) * 2.75);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted-foreground);
+  }
+
+  cell-value {
+    font-size: calc(var(--unit) * 4);
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  season-pass {
+    display: flex;
+    border-radius: calc(var(--unit) * 1);
+    padding: calc(var(--unit) * 4);
+    background: linear-gradient(
+      180deg,
+      oklch(from var(--hue-yellow) calc(l + 0.05) calc(c * 0.4) h / 0.2),
+      oklch(from var(--hue-yellow) calc(l - 0.05) calc(c * 0.5) h / 0.3)
+    );
+    box-shadow: inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.3);
+  }
+
+  pass-active {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--unit) * 3);
+    color: var(--gold-deep);
+  }
+
+  pass-active icon {
+    font-size: calc(var(--unit) * 5);
+    color: var(--hue-green);
+  }
+
+  pass-active-text {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 0.5);
+  }
+
+  pass-active-text strong {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 4.5);
+    color: var(--gold-deep);
+  }
+
+  pass-active-text span {
+    font-size: calc(var(--unit) * 3.25);
+    color: var(--muted-foreground);
+  }
+
+  pass-offer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--unit) * 4);
+    width: 100%;
+  }
+
+  pass-copy {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+  }
+
+  pass-copy strong {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 5);
+    color: var(--gold-deep);
+  }
+
+  pass-copy span {
+    font-size: calc(var(--unit) * 3.5);
+    color: var(--muted-foreground);
+  }
+
+  pass-copy mark {
+    background: oklch(from var(--hue-green) l c h / 0.12);
+    color: var(--hue-green);
+    font-weight: 700;
+  }
+
+  pass-buy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: calc(var(--unit) * 2);
+  }
+
+  pass-price {
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--unit) * 2);
+  }
+
+  price-was {
+    font-size: calc(var(--unit) * 3.5);
+    color: var(--muted-foreground);
+    text-decoration: line-through;
+  }
+
+  price-now {
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 6);
+    font-weight: 700;
+    color: var(--gold-deep);
+  }
+
+  @media (width <= 768px) {
+    season-title {
+      font-size: calc(var(--unit) * 7);
+    }
+
+    schedule-grid {
+      grid-template-columns: 1fr;
+    }
+
+    pass-offer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    pass-buy {
+      align-items: stretch;
+    }
+
+    pass-buy button {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/components/Sidebar.html b/components/Sidebar.html
new file mode 100644
index 00000000..30072c64
--- /dev/null
+++ b/components/Sidebar.html
@@ -0,0 +1,803 @@
+<script type="module">
+  import CHARACTERS, { DEFAULT_MUGSHOT_COORDINATES } from '/js/constants/CHARACTERS.js';
+  import {
+    calculateCombatStatsByCharacter,
+    buildAbilityBarItems,
+    calculateLastTick,
+    incStat,
+  } from '/js/utils.js';
+  import { getLevelByExperience, MAX_LEVEL } from '/js/level.js';
+
+  const TRAIN_MS = 2 * 60 * 1000;
+  const BREW_MS = 30 * 1000;
+  const EXPERIENCE_PER_TRAIN = 10;
+
+  const s =
+    $[
+      component({
+        brewTimerElapsed: 0,
+        brewTimerTotal: BREW_MS,
+        trainTimerElapsed: 0,
+        trainTimerTotal: TRAIN_MS,
+      })
+    ];
+
+  window.formatCountdown = (ms) => {
+    const total = Math.ceil(Math.max(0, ms || 0) / 1000);
+    const pad = (n) => String(n).padStart(2, '0');
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    if (h > 0) return `${pad(h)}:${pad(m)}:${pad(s)}`;
+    if (m > 0) return `${pad(m)}:${pad(s)}`;
+    return pad(s);
+  };
+
+  let timerTooltipAnchor = null;
+  const rowTimerRemaining = (el) => +(el?.querySelector('loader-fill')?.dataset.remaining || 0);
+
+  window.showRowTimer = (el) => {
+    if (!el.querySelector('loader')) return;
+    timerTooltipAnchor = el;
+    window.showTooltip(
+      { countdown: window.formatCountdown(rowTimerRemaining(el)), plain: true },
+      el,
+      {
+        direction: 'left',
+        lock: true,
+      },
+    );
+  };
+
+  window.hideRowTimer = () => {
+    timerTooltipAnchor = null;
+    window.hideTooltip();
+  };
+
+  window.temporaryAssistants = [{ id: 'motherAlora', uuid: 'temp-mother-alora' }];
+
+  window.hydrateBrawler = (ref) => {
+    try {
+      const char = CHARACTERS(ref, true);
+      const stats = calculateCombatStatsByCharacter(char);
+      const AB = window.ABILITIES_FN;
+      const hydrated = AB
+        ? char.abilities
+            .map((a) => {
+              try {
+                return AB(a, true);
+              } catch {
+                return null;
+              }
+            })
+            .filter(Boolean)
+        : [];
+      const abilities = buildAbilityBarItems(hydrated, char.maxTicks);
+      return {
+        uuid: ref.uuid,
+        name: char.name,
+        image: char.image,
+        mugshot: char.mugshot,
+        currentHealth: char.combatStats?.currentHealth ?? stats.maxHealth ?? 0,
+        maxHealth: stats.maxHealth ?? 0,
+        abilities,
+        lastTick: calculateLastTick(abilities, char.maxTicks),
+      };
+    } catch {
+      return {
+        uuid: ref?.uuid,
+        name: '',
+        image: '',
+        mugshot: DEFAULT_MUGSHOT_COORDINATES,
+        currentHealth: 0,
+        maxHealth: 0,
+        abilities: [],
+        lastTick: 0,
+      };
+    }
+  };
+
+  window.allBrawlersFull = (characters = $.characters) =>
+    characters.every((c) => {
+      try {
+        const ch = CHARACTERS(c, true);
+        return (
+          (ch.combatStats?.currentHealth ?? 0) >= calculateCombatStatsByCharacter(ch).maxHealth
+        );
+      } catch {
+        return true;
+      }
+    });
+
+  // Testers heal for free — ignore potion stock so they can iterate on combat
+  // without farming potions; everyone else needs one in hand.
+  window.hasPotion = () => $.potions > 0 || $.settings?.isTester;
+
+  window.potionDrinkStart = () => {
+    if (!hasPotion() || allBrawlersFull()) return;
+    window.playSoundSegment('Drink Potion', 0, 0.105);
+  };
+
+  window.healParty = () => {
+    $.characters.forEach((c) => {
+      try {
+        const ch = CHARACTERS(c, true);
+        const stats = calculateCombatStatsByCharacter(ch);
+        const heal = Math.ceil(stats.maxHealth * 0.33);
+        c.overrides.combatStats.currentHealth = Math.min(
+          Math.max(0, ch.combatStats.currentHealth) + heal,
+          stats.maxHealth,
+        );
+      } catch {}
+    });
+    $.characters = [...$.characters];
+  };
+
+  window.healNow = () => {
+    if (!hasPotion() || allBrawlersFull()) return;
+    window.playSoundSegment('Drink Potion', 0.125, 1);
+    healParty();
+    if ($.potions > 0) {
+      $.potions -= 1;
+      incStat('medicum.potions.consumed');
+    }
+    // Reflect the heal into any open teamplay I'm in (others see HP rise; gate updates).
+    window.broadcastTeamplayHeal?.();
+  };
+
+  window.showLockTooltip = (el) =>
+    window.showTooltip({ description: 'Level up your ludus to unlock', plain: true }, el, {
+      direction: 'up',
+      lock: true,
+    });
+
+  window.showPotionTooltip = (el) => {
+    const reason = allBrawlersFull()
+      ? "All your brawlers are at max health, can't drink potion now"
+      : !hasPotion()
+        ? "You're out of healing potions"
+        : null;
+    if (reason)
+      window.showTooltip({ description: reason, plain: true }, el, { direction: 'up', lock: true });
+  };
+
+  // Mother Alora brews for free until the player claims Medicum (level 5); after
+  // that a party brawler must be assigned at the Medicum or brewing pauses.
+  window.brewingActive = () =>
+    $.accountRewards < 5 ||
+    $.buildings.medicum.assignedBrawlers.some((uuid) => $.characters.some((c) => c.uuid === uuid));
+
+  // A brawler drilled at the Palaestra (post level-10 unlock) earns the account
+  // experience each refill mark. No free-beginner variant — XP is the account's
+  // own progression, so it only flows once a trainer is assigned.
+  window.palaestraActive = () =>
+    $.accountRewards >= 10 &&
+    $.buildings.palaestra.assignedBrawlers.some((uuid) =>
+      $.characters.some((c) => c.uuid === uuid),
+    );
+
+  // Medicum (brewing) and Palaestra (training) run two independent cadences off the
+  // one synced clock — never a second timer. Each boundary is epoch-aligned to its
+  // period, so the bars resume correctly across reloads; a mark fires once when
+  // crossed (tracked below) and drives its own progress bar.
+  let lastBrewMark = null;
+  let lastTrainMark = null;
+
+  // Sidebar remounts when Layout's auth/downtime gates flip — clear the prior
+  // interval so cadences don't stack and grant N potions/XP per mark.
+  clearInterval(window.__ludusRefillTimer);
+  window.__ludusRefillTimer = setInterval(() => {
+    const nowMs = $.clock.now || Date.now();
+
+    const brewMark = Math.floor(nowMs / BREW_MS);
+    s.brewTimerElapsed = nowMs - brewMark * BREW_MS;
+    if (lastBrewMark === null) {
+      lastBrewMark = brewMark;
+    } else if (brewMark > lastBrewMark) {
+      lastBrewMark = brewMark;
+      if (brewingActive()) {
+        if ($.potions < allowedNumberOfPotions()) {
+          $.potions += 1;
+          incStat('medicum.potions.brewed');
+        } else if (!allBrawlersFull()) {
+          window.playSoundSegment('Drink Potion', 0, 1);
+          healParty();
+        }
+      }
+    }
+
+    const trainMark = Math.floor(nowMs / TRAIN_MS);
+    s.trainTimerElapsed = nowMs - trainMark * TRAIN_MS;
+    if (lastTrainMark === null) {
+      lastTrainMark = trainMark;
+    } else if (trainMark > lastTrainMark) {
+      lastTrainMark = trainMark;
+      if (palaestraActive()) {
+        // Past the level cap the XP is wasted, so the palaestra tally stops there
+        // (the lifetime XP total keeps counting it).
+        if (getLevelByExperience($.experience) < MAX_LEVEL)
+          incStat('palaestra.experience.gained', { count: EXPERIENCE_PER_TRAIN });
+        $.experience += EXPERIENCE_PER_TRAIN;
+        incStat('progression.experience.amount', { count: EXPERIENCE_PER_TRAIN });
+      }
+    }
+
+    if (timerTooltipAnchor) {
+      if (timerTooltipAnchor.isConnected && $.tooltip?.visible) {
+        $.tooltip = {
+          ...$.tooltip,
+          props: {
+            ...$.tooltip.props,
+            countdown: window.formatCountdown(rowTimerRemaining(timerTooltipAnchor)),
+          },
+        };
+      } else {
+        timerTooltipAnchor = null;
+      }
+    }
+  }, 1000);
+</script>
+
+<sidebar sm:t="12" t="15">
+  <input type="checkbox" id="sidebar-toggle" />
+  <sidebar-content sm:bg="var(--background)" h="300">
+    <crow vertical g="2" w="full">
+      <crow left w="full" g="2" ludus-header>
+        <crow vertical left g="0" f="none" ludus-name>
+          <!-- if accountName -->
+            <h5 m="0" ludus-owner>@[accountName]'s</h5>
+          <!-- /if -->
+          <h5 m="0">Ludus</h5>
+        </crow>
+        <crow right g="1" f="1">
+          <span cinzel f="none">level @[getLevelByExperience(experience)]</span>
+        </crow>
+      </crow>
+
+      <crow vertical left w="full" g="2">
+        <!-- if getLevelByExperience(experience) < 25 -->
+          <crow vertical left w="full">
+            <crow justify-between w="full">
+              <span>Experience</span>
+              <button primary sm onclick="$.overlay = { name: 'AccountProgression' }">
+                See progress
+              </button>
+            </crow>
+            <component
+              src="/components/SolidBar.html"
+              center
+              color="yellow"
+              current="@[getCurrentExperienceAtLevel(experience)]"
+              max="@[getExperienceForNextLevel(getLevelByExperience(experience))]"
+            >
+            </component>
+          </crow>
+        <!-- /if -->
+
+        <crow w="full" g="1" nav-placeholder>
+          <a
+            class="button"
+            primary
+            sm
+            w="full"
+            active="@[page.name.startsWith('brawlers')]"
+            current="@[page.name === 'brawlers']"
+            href="/brawlers"
+            >Brawlers<crow center><icon brawlers></icon></crow
+          ></a>
+          <a
+            class="button"
+            primary
+            sm
+            w="full"
+            active="@[page.name.startsWith('armory')]"
+            current="@[page.name === 'armory']"
+            href="/armory"
+            >Armory<crow center><icon armory></icon></crow
+          ></a>
+          <!-- if accountRewards >= 5 -->
+            <a
+              class="button"
+              primary
+              sm
+              w="full"
+              active="@[page.name.startsWith('medicum')]"
+              current="@[page.name === 'medicum']"
+              href="/medicum"
+              >Medicum<crow center><icon potion></icon></crow
+            ></a>
+          <!-- else -->
+            <crow onmouseenter="showLockTooltip(this)" onmouseleave="hideTooltip()">
+              <button primary sm w="full" disabled>—<crow center>?</crow></button>
+            </crow>
+          <!-- /if -->
+          <!-- if accountRewards >= 10 -->
+            <a
+              class="button"
+              primary
+              sm
+              w="full"
+              active="@[page.name.startsWith('palaestra')]"
+              current="@[page.name === 'palaestra']"
+              href="/palaestra"
+              >Palaestra<crow center><icon experience></icon></crow
+            ></a>
+          <!-- else -->
+            <crow onmouseenter="showLockTooltip(this)" onmouseleave="hideTooltip()">
+              <button primary sm w="full" disabled>—<crow center>?</crow></button>
+            </crow>
+          <!-- /if -->
+        </crow>
+      </crow>
+
+      <kingstone h="4"></kingstone>
+
+      <component src="/components/TitleBar.html" small title="My Brawlers">
+        <span cinzel f="none">@[characters.length] / @[allowedNumberOfBrawlers()]</span>
+      </component>
+
+      <brawler-list max-brawlers="@[!!maxBrawlers]">
+        <crow vertical up left>
+          <!-- if characters.length === 0 -->
+            <crow vertical w="full" g="2" text-sm>
+              You have no brawlers yet.
+              <a class="button" href="/brawlers" primary>Recruit brawler</a>
+            </crow>
+          <!-- /if -->
+          <!-- each characters.map(hydrateBrawler) as brawler (brawler.uuid), i -->
+            <brawler-box
+              position="relative"
+              active="@[Number(page.params.index) === i || selectedBrawlers.includes(brawler.uuid)]"
+            >
+              <!-- if isPotionBrewer(brawler.uuid) -->
+                <brawler-activity
+                  position="absolute"
+                  vertical
+                  g="1"
+                  onclick="location.href = '/medicum'"
+                  onmouseenter="showRowTimer(this)"
+                  onmouseleave="hideRowTimer()"
+                >
+                  <crow w="full" activity-label>
+                    <span fat-number>Making&nbsp;potion</span>
+                  </crow>
+                  <component
+                    src="/components/LoadingBar.html"
+                    smooth="1"
+                    remaining="@[this.brewTimerTotal - this.brewTimerElapsed]"
+                    percentage="@[(this.brewTimerElapsed / (this.brewTimerTotal || 1)) * 100]"
+                  ></component>
+                </brawler-activity>
+              <!-- /if -->
+              <!-- if isPalaestraTrainer(brawler.uuid) -->
+                <brawler-activity
+                  position="absolute"
+                  vertical
+                  g="1"
+                  onclick="location.href = '/palaestra'"
+                  onmouseenter="showRowTimer(this)"
+                  onmouseleave="hideRowTimer()"
+                >
+                  <crow w="full" activity-label>
+                    <span fat-number>Training</span>
+                  </crow>
+                  <component
+                    src="/components/LoadingBar.html"
+                    smooth="1"
+                    remaining="@[this.trainTimerTotal - this.trainTimerElapsed]"
+                    percentage="@[(this.trainTimerElapsed / (this.trainTimerTotal || 1)) * 100]"
+                  ></component>
+                </brawler-activity>
+              <!-- /if -->
+              <!-- if combat.duration === 0 && pvp.teamplay.active && teamplayBrawler(brawler.uuid) -->
+                <brawler-activity
+                  position="absolute"
+                  vertical
+                  g="1"
+                  onclick="teamplayBrawlerClick(brawler.uuid)"
+                >
+                  <crow w="full" activity-label>
+                    <span fat-number>@[teamplayBrawlerLabel()]</span>
+                  </crow>
+                </brawler-activity>
+              <!-- /if -->
+              <!-- if combat.duration !== 0 && brawlerActivity(brawler.uuid) -->
+                <brawler-activity
+                  position="absolute"
+                  vertical
+                  g="1"
+                  onclick="brawlerClick(event, brawler.uuid)"
+                  onmouseenter="showRowTimer(this)"
+                  onmouseleave="hideRowTimer()"
+                >
+                  <crow w="full" activity-label>
+                    <span fat-number>
+                      @[elapsedMilliseconds < combat.duration ? 'Brawling' : 'Fight concluded']
+                    </span>
+                  </crow>
+                  <!-- if elapsedMilliseconds < combat.duration -->
+                    <component
+                      src="/components/LoadingBar.html"
+                      remaining="@[combat.duration - elapsedMilliseconds]"
+                      percentage="@[(Math.min(elapsedMilliseconds, combat.duration) / (combat.duration || 1)) * 100]"
+                    ></component>
+                  <!-- /if -->
+                </brawler-activity>
+              <!-- /if -->
+              <a href="/brawlers/@[i]" brawler-link onclick="brawlerClick(event, brawler.uuid)">
+                <crow left brawler-row>
+                  <size-constraint h="15" position="relative">
+                    <component
+                      src="/components/BrawlerPortrait.html"
+                      image="@[brawler.image]"
+                      x="@[brawler.mugshot.x]"
+                      y="@[brawler.mugshot.y]"
+                      name="@[brawler.name]"
+                    >
+                    </component>
+                    <!-- if selectedBrawlers.includes(brawler.uuid) -->
+                      <brawler-selected-overlay position="absolute">
+                        <icon checkmark></icon>
+                      </brawler-selected-overlay>
+                    <!-- /if -->
+                  </size-constraint>
+                  <crow vertical left brawler-info>
+                    <component
+                      src="/components/SolidBar.html"
+                      text="@[brawler.name]"
+                      current="@[brawler.currentHealth]"
+                      max="@[brawler.maxHealth]"
+                      percentage="1"
+                    >
+                    </component>
+                    <accordion>
+                      <accordion-content>
+                        <component
+                          src="/components/AbilityBar.html"
+                          abilities="@[brawler.abilities]"
+                          lastTick="@[brawler.lastTick]"
+                          minimalistic
+                          dndDisabled
+                        >
+                        </component>
+                      </accordion-content>
+                    </accordion>
+                  </crow>
+                </crow>
+              </a>
+            </brawler-box>
+          <!-- /each -->
+        </crow>
+      </brawler-list>
+
+      <beginners-section gone="@[accountRewards >= 5]" vertical g="2" w="full">
+        <kingstone h="4"></kingstone>
+
+        <component src="/components/TitleBar.html" small title="Beginners assistant"></component>
+
+        <brawler-list>
+          <crow vertical up left>
+            <!-- each temporaryAssistants.map(hydrateBrawler) as brawler (brawler.uuid) -->
+              <brawler-box position="relative" busy>
+                <brawler-activity
+                  position="absolute"
+                  vertical
+                  g="1"
+                  onmouseenter="showRowTimer(this)"
+                  onmouseleave="hideRowTimer()"
+                >
+                  <crow w="full" activity-label>
+                    <span fat-number>Making&nbsp;potion</span>
+                  </crow>
+                  <component
+                    src="/components/LoadingBar.html"
+                    smooth="1"
+                    remaining="@[this.brewTimerTotal - this.brewTimerElapsed]"
+                    percentage="@[(this.brewTimerElapsed / (this.brewTimerTotal || 1)) * 100]"
+                  ></component>
+                </brawler-activity>
+                <crow left brawler-row>
+                  <size-constraint h="15">
+                    <component
+                      src="/components/BrawlerPortrait.html"
+                      image="@[brawler.image]"
+                      x="@[brawler.mugshot.x]"
+                      y="@[brawler.mugshot.y]"
+                      name="@[brawler.name]"
+                    >
+                    </component>
+                  </size-constraint>
+                  <crow vertical left brawler-info>
+                    <component
+                      src="/components/SolidBar.html"
+                      text="@[brawler.name]"
+                      current="@[brawler.currentHealth]"
+                      max="@[brawler.maxHealth]"
+                      percentage="1"
+                    >
+                    </component>
+                    <accordion>
+                      <accordion-content>
+                        <component
+                          src="/components/AbilityBar.html"
+                          abilities="@[brawler.abilities]"
+                          lastTick="@[brawler.lastTick]"
+                          minimalistic
+                          dndDisabled
+                        >
+                        </component>
+                      </accordion-content>
+                    </accordion>
+                  </crow>
+                </crow>
+              </brawler-box>
+            <!-- /each -->
+          </crow>
+        </brawler-list>
+      </beginners-section>
+    </crow>
+    <sticky reverse mx="-4" mb="-4" p="2">
+      <crow g="2" right>
+        <crow
+          vertical
+          right
+          g="0"
+          disabled="@[(potions <= 0 && !settings.isTester) || allBrawlersFull(characters)]"
+        >
+          <potion-label fat-number>Potions</potion-label>
+          <potion-count fat-number>@[potions] / @[allowedNumberOfPotions()]</potion-count>
+        </crow>
+        <crow onmouseenter="showPotionTooltip(this)" onmouseleave="hideTooltip()">
+          <button
+            primary
+            heal-now
+            title="Heal now"
+            disabled="@[(potions <= 0 && !settings.isTester) || allBrawlersFull(characters)]"
+            onpointerdown="potionDrinkStart()"
+            onclick="healNow()"
+          >
+            <component src="/components/PotionIcon.html"></component>
+          </button>
+        </crow>
+      </crow>
+    </sticky>
+  </sidebar-content>
+</sidebar>
+
+<style>
+  [ludus-header] {
+    align-items: flex-start;
+  }
+
+  [ludus-name] {
+    width: auto;
+  }
+
+  [ludus-owner] {
+    font-size: calc(var(--unit) * 5);
+    line-height: 1.05;
+  }
+
+  [sidebar-gap] {
+    height: calc(var(--unit) * 4);
+  }
+
+  [heal-now] {
+    min-height: 0;
+    padding-inline: calc(var(--unit) * 4);
+    place-items: center;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+  }
+
+  [heal-now] icon[potion] {
+    width: calc(var(--unit) * 7);
+    height: auto;
+  }
+
+  [heal-now]:not(:disabled):active {
+    transform: scale(0.95);
+  }
+
+  [heal-now]:disabled {
+    pointer-events: none;
+  }
+
+  potion-label[fat-number],
+  potion-count[fat-number] {
+    filter: drop-shadow(0 1px 1px var(--scrim-2));
+  }
+
+  [disabled] potion-label,
+  [disabled] potion-count {
+    color: var(--muted-foreground);
+    opacity: 0.5;
+  }
+
+  potion-label {
+    font-size: calc(var(--unit) * 3.5);
+    text-align: right;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--white);
+    font-family: var(--font-display);
+  }
+
+  potion-count {
+    font-size: calc(var(--unit) * 3.5);
+    color: var(--white);
+    font-family: var(--font-display);
+  }
+
+  @media (width <= 768px) {
+    sidebar-content {
+      border-radius: 0;
+      border-right: none;
+    }
+  }
+
+  beginners-section[gone] {
+    display: none;
+  }
+
+  brawler-list {
+    display: block;
+    align-self: stretch;
+    margin-inline: calc(var(--unit) * -4);
+  }
+
+  brawler-box {
+    display: block;
+    width: 100%;
+  }
+
+  [brawler-link] {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  [brawler-row] {
+    padding: calc(var(--unit) * 1) calc(var(--unit) * 1.5);
+    margin: 0 calc(var(--unit) * -1.5);
+    gap: 0;
+    border-radius: calc(var(--unit) * 0.5);
+    transition:
+      background 150ms,
+      box-shadow 150ms,
+      backdrop-filter 150ms;
+  }
+
+  brawler-box[active] [brawler-row],
+  brawler-box:has(brawler-activity) [brawler-row] {
+    background: var(--sheen-3);
+    box-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 1.5) -1px var(--scrim-1);
+    backdrop-filter: blur(calc(var(--unit) * 1));
+  }
+
+  brawler-box:has(brawler-activity) [brawler-link],
+  brawler-box:has(brawler-activity) > [brawler-row] {
+    opacity: 0.35;
+    filter: grayscale(0.6);
+    pointer-events: none;
+  }
+
+  brawler-activity {
+    inset: 0;
+    z-index: 1;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
+    font-family: var(--font-display, sans-serif);
+    font-size: calc(var(--unit) * 5);
+    cursor: pointer;
+  }
+
+  brawler-activity:has(loader) {
+    transform: translateY(calc(var(--unit) * -1));
+    padding-inline: calc(var(--unit) * 3);
+  }
+
+  brawler-activity:has(loader) [activity-label] {
+    font-size: calc(var(--unit) * 4.5);
+    justify-content: flex-start;
+  }
+
+  brawler-activity:not(:has(loader)) [activity-label] {
+    justify-content: center;
+  }
+
+  brawler-activity [fat-number] {
+    filter: drop-shadow(0 1px 1px var(--scrim-3));
+  }
+
+  [brawler-info] {
+    flex: 1;
+    min-width: 0;
+    padding: calc(var(--unit) * 1);
+    overflow-x: hidden;
+  }
+
+  brawler-list:hover accordion,
+  brawler-list[max-brawlers] accordion,
+  brawler-list brawler-box[active] accordion,
+  brawler-list brawler-box:has(brawler-activity) accordion {
+    grid-template-rows: 1fr;
+  }
+
+  brawler-list:hover bar-track[percentage] [bar-value-pct],
+  brawler-list[max-brawlers] bar-track[percentage] [bar-value-pct],
+  brawler-list brawler-box[active] bar-track[percentage] [bar-value-pct],
+  brawler-list brawler-box:has(brawler-activity) bar-track[percentage] [bar-value-pct] {
+    display: none;
+  }
+
+  brawler-list:hover bar-track[percentage] [bar-value-actual],
+  brawler-list[max-brawlers] bar-track[percentage] [bar-value-actual],
+  brawler-list brawler-box[active] bar-track[percentage] [bar-value-actual],
+  brawler-list brawler-box:has(brawler-activity) bar-track[percentage] [bar-value-actual] {
+    display: inline;
+  }
+
+  brawler-selected-overlay {
+    inset: 0;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+  }
+
+  brawler-selected-overlay::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--scrim-1);
+    border-radius: calc(var(--unit) * 1);
+  }
+
+  brawler-selected-overlay icon[checkmark] {
+    position: relative;
+    z-index: 1;
+    --color: var(--green);
+    font-size: calc(var(--unit) * 10);
+    line-height: 0;
+  }
+
+  [nav-placeholder] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  [nav-placeholder] :is(button, .button) {
+    justify-content: flex-start;
+    gap: calc(var(--unit) * 3);
+  }
+
+  [nav-placeholder] :is(button, .button) crow {
+    aspect-ratio: 1;
+    align-self: stretch;
+    margin-left: auto;
+  }
+
+  [nav-placeholder] :is(button, .button) icon {
+    background: currentColor;
+  }
+
+  [nav-placeholder] button[disabled] {
+    color: var(--muted-foreground);
+    background-color: var(--scrim-1);
+    box-shadow: none;
+  }
+
+  [nav-placeholder] :is(button, .button) icon[potion] {
+    font-size: calc(var(--unit) * 3);
+  }
+
+  [nav-placeholder] :is(button, .button)[active] {
+    background-color: oklch(from var(--primary) l c h / 0.3);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.45);
+  }
+
+  [nav-placeholder] :is(button, .button)[current] {
+    pointer-events: none;
+  }
+</style>
diff --git a/components/SolidBar.html b/components/SolidBar.html
new file mode 100644
index 00000000..a38afdef
--- /dev/null
+++ b/components/SolidBar.html
@@ -0,0 +1,119 @@
+<bar-track
+  position="relative"
+  w="full"
+  overflow-hidden
+  center="@[center]"
+  color="@[color]"
+  percentage="@[percentage]"
+>
+  <!-- if ghost -->
+    <bar-ghost
+      block
+      style="width: @[Math.max (0, Math.min(100, ((current || 0) / Math.max(1, max || 1)) * 100))]%"
+    >
+    </bar-ghost>
+    <bar-buffer
+      block
+      style="width: @[Math.max (0, Math.min(100, ((current || 0) / Math.max(1, max || 1)) * 100))]%"
+    >
+    </bar-buffer>
+  <!-- /if -->
+  <bar-fill
+    block
+    style="
+      width: @[Math.max
+        (0, Math.min(100, (((current || 0) - (buffer || 0)) / Math.max(1, max || 1)) * 100))]%;
+    "
+  >
+  </bar-fill>
+  <!-- if loading -->
+    <crow px="2" bar-text justify-between="@[!center]">
+      <component src="/components/Spinner.html" sm></component>
+    </crow>
+  <!-- /if -->
+  <!-- if !loading && timer -->
+    <crow px="2" bar-text justify-between="@[!center]">
+      <bar-timer>
+        @[String(Math.floor(Math.max(0, (max || 0) - (current || 0)) / 60000)).padStart(2,
+        '0')]:@[String(Math.floor((Math.max(0, (max || 0) - (current || 0)) % 60000) /
+        1000)).padStart(2, '0')]
+      </bar-timer>
+    </crow>
+  <!-- /if -->
+  <!-- if !loading && !timer -->
+    <crow px="2" bar-text justify-between="@[!center]">
+      <span bar-label>@[text || '']</span>
+      <!-- if !percentage -->
+        <span bar-value>@[current] / @[max]</span>
+      <!-- /if -->
+      <!-- if percentage -->
+        <span bar-value bar-value-pct>
+          @[Math.max(0, Math.min(100, ((current || 0) / Math.max(1, max || 1)) * 100)).toFixed(0)]%
+        </span>
+        <span bar-value bar-value-actual>@[current] / @[max]</span>
+      <!-- /if -->
+    </crow>
+  <!-- /if -->
+</bar-track>
+
+<style>
+  bar-track {
+    display: grid;
+    height: calc(var(--unit) * 7);
+    color: var(--white);
+    background: var(--scrim-2);
+    box-shadow: inset 0 1px 1px var(--scrim-1);
+    font-size: calc(var(--unit) * 4);
+  }
+
+  bar-track[center] {
+    height: calc(var(--unit) * 6);
+    border-radius: calc(var(--unit) * 0.5);
+  }
+
+  bar-fill,
+  bar-buffer,
+  bar-ghost {
+    grid-area: 1 / 1;
+    height: 100%;
+    transition: width 100ms ease-out;
+  }
+
+  bar-fill {
+    background: var(--floater-default);
+  }
+
+  bar-buffer {
+    background: var(--health-buffer);
+  }
+
+  bar-ghost {
+    background: var(--health-ghost);
+    transition: width 500ms ease-out 300ms;
+  }
+
+  bar-track[color='yellow'] bar-fill {
+    background: var(--hue-yellow);
+  }
+
+  bar-track[color='stone'] bar-fill {
+    background: var(--hue-brown);
+  }
+
+  bar-track[color='green'] bar-fill {
+    background: var(--hue-green);
+  }
+
+  bar-track[color='blue'] bar-fill {
+    background: var(--hue-blue-frost);
+  }
+
+  [bar-text] {
+    grid-area: 1 / 1;
+    font-weight: 100;
+  }
+
+  bar-track[percentage] [bar-value-actual] {
+    display: none;
+  }
+</style>
diff --git a/components/Spinner.html b/components/Spinner.html
new file mode 100644
index 00000000..36b9144c
--- /dev/null
+++ b/components/Spinner.html
@@ -0,0 +1,23 @@
+<stack spinner sm="@[sm]" big="@[big]">
+  <icon spinner-circle></icon>
+  <icon spinner-inner animate-spin></icon>
+</stack>
+
+<style>
+  [spinner] {
+    font-size: calc(var(--unit) * 5);
+    color: var(--primary);
+  }
+
+  [spinner][sm] {
+    font-size: calc(var(--unit) * 3.5);
+  }
+
+  [spinner][big] {
+    font-size: calc(var(--unit) * 24);
+  }
+
+  [spinner] icon[spinner-circle] {
+    opacity: 0.2;
+  }
+</style>
diff --git a/components/StatGroup.html b/components/StatGroup.html
new file mode 100644
index 00000000..62fb1080
--- /dev/null
+++ b/components/StatGroup.html
@@ -0,0 +1,124 @@
+<stat-group vertical left>
+  <!-- if title -->
+    <h5 mb="6">@[title]</h5>
+  <!-- /if -->
+  <crow stat-list vertical left g="1" w="full">
+    <!-- each rows as row -->
+      <stat-row muted="@[row.value === '-']" category="@[row.category]" sub="@[row.sub]">
+        <component src="/components/IconCell.html" tip="@[{ stat: row.icon }]">
+          <icon @[row.icon]></icon>
+        </component>
+        <stat-label>@[row.label]</stat-label>
+        <stat-leader></stat-leader>
+        <stat-value
+          inactive="@[row.inactive]"
+          text-green="@[!row.inactive && (percentage || row.percentage) && row.value !== '-' && parseFloat(row.value) >= 0]"
+          text-red="@[parseFloat(row.value) < 0]"
+          >@[row.value]</stat-value
+        >
+        <!-- if row.inactive -->
+          <stat-value text-red>0%</stat-value>
+        <!-- /if -->
+      </stat-row>
+    <!-- /each -->
+  </crow>
+
+  <!-- if subtitle -->
+    <kingstone h="4" w="full"></kingstone>
+    <h5 mb="6" mt="6">@[subtitle]</h5>
+    <crow stat-list vertical left g="1" w="full">
+      <!-- each subrows as row -->
+        <stat-row muted="@[row.value === '-']">
+          <component src="/components/IconCell.html" tip="@[{ stat: row.icon }]">
+            <icon @[row.icon]></icon>
+          </component>
+          <stat-label>@[row.label]</stat-label>
+          <stat-leader></stat-leader>
+          <stat-value
+            text-green="@[row.percentage && row.value !== '-' && parseFloat(row.value) >= 0]"
+            text-red="@[parseFloat(row.value) < 0]"
+            >@[row.value]</stat-value
+          >
+        </stat-row>
+      <!-- /each -->
+    </crow>
+  <!-- /if -->
+</stat-group>
+
+<style>
+  stat-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+  }
+
+  stat-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: calc(var(--unit) * 2);
+    padding: calc(var(--unit) * 0.5) 0;
+  }
+
+  stat-label {
+    flex: none;
+    color: oklch(from var(--foreground) l c h / 0.75);
+  }
+
+  stat-leader {
+    flex: 1;
+    align-self: center;
+    height: 0;
+    border-bottom: 1px dotted var(--divider);
+    opacity: 0.6;
+    transform: translateY(calc(var(--unit) * 1.5));
+  }
+
+  stat-value {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+  }
+
+  stat-value:not([text-green]):not([text-red]) {
+    color: var(--foreground);
+  }
+
+  stat-value[inactive]:not([text-red]) {
+    color: oklch(from var(--foreground) l 0 h / 0.4);
+    text-decoration: line-through;
+  }
+
+  stat-row[muted] stat-label,
+  stat-row[muted] stat-value {
+    color: oklch(from var(--foreground) l 0 h / 0.4);
+  }
+
+  stat-row[muted] icon-cell {
+    opacity: 0.4;
+  }
+
+  stat-row[category] {
+    margin-top: calc(var(--unit) * 2);
+  }
+
+  stat-row[category]:first-child {
+    margin-top: 0;
+  }
+
+  stat-row[category] stat-label {
+    color: var(--foreground);
+  }
+
+  stat-row[category] icon {
+    --color: var(--muted-foreground);
+  }
+
+  stat-row[sub] {
+    padding-left: calc(var(--unit) * 6);
+  }
+
+  stat-row[sub] stat-label {
+    color: oklch(from var(--foreground) l c h / 0.6);
+  }
+</style>
diff --git a/components/StateInspector.html b/components/StateInspector.html
new file mode 100644
index 00000000..dd360727
--- /dev/null
+++ b/components/StateInspector.html
@@ -0,0 +1,50 @@
+<script type="module">
+  if ($.vibeStateInspector === undefined) $.vibeStateInspector = false;
+  if ($.vibeStateInspectorEverOpened === undefined) $.vibeStateInspectorEverOpened = false;
+
+  // Latch: once the inspector has been opened, keep the DataInspector
+  // mounted forever so the close animation runs (the conditional that
+  // gates mounting can't unmount mid-CSS-transition). First open pays the
+  // mount cost; subsequent toggles are pure CSS transform on <state-inspector>.
+  const unsub = $.on('afterUpdate', () => {
+    if ($.vibeStateInspector && !$.vibeStateInspectorEverOpened) {
+      $.vibeStateInspectorEverOpened = true;
+    }
+  });
+</script>
+
+<state-inspector open="@[vibeStateInspector]">
+  <state-inspector-panel>
+    <!-- if vibeStateInspectorEverOpened -->
+      <component src="/components/remote/DataInspector.html" data="@[$]"></component>
+    <!-- /if -->
+  </state-inspector-panel>
+</state-inspector>
+
+<style>
+  state-inspector {
+    position: fixed;
+    top: calc(var(--unit) * 12);
+    right: 0;
+    bottom: 0;
+    width: calc(var(--unit) * 100);
+    max-width: 90vw;
+    z-index: 50;
+    pointer-events: none;
+    transform: translateX(100%);
+    transition: transform 200ms ease-out;
+    will-change: transform;
+  }
+
+  state-inspector[open] {
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+
+  state-inspector-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+</style>
diff --git a/components/StatusChip.html b/components/StatusChip.html
new file mode 100644
index 00000000..56bbb0b2
--- /dev/null
+++ b/components/StatusChip.html
@@ -0,0 +1,162 @@
+<status-chip
+  @[s.statusKey]
+  @[s.category]
+  threshold="@[s.max > 0]"
+  standalone="@[s.standalone]"
+  round="@[round]"
+  onmouseenter="showStatusTooltip(this, s)"
+  onmouseleave="hideTooltip()"
+>
+  <stack status-icon>
+    <icon @[s.icon] outline></icon>
+    <icon @[s.icon]></icon>
+  </stack>
+  <status-meta>
+    <!-- if s.max > 0 -->
+      <status-count fat-number>@[s.value]/@[s.max]</status-count>
+    <!-- /if -->
+    <!-- if !(s.max > 0) && s.ticks > 0 -->
+      <status-count fat-number>@[s.ticks]</status-count>
+    <!-- /if -->
+    <status-announce fat-number>@[s.announce || s.name + '!']</status-announce>
+  </status-meta>
+</status-chip>
+
+<style>
+  status-chip {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: calc(var(--unit) * 8);
+    height: calc(var(--unit) * 8);
+    color: var(--foreground);
+    pointer-events: auto;
+    cursor: default;
+    filter: drop-shadow(0 1px 1px var(--scrim-2));
+  }
+
+  status-chip[bleeding] {
+    --status-color: var(--status-bleeding);
+  }
+  status-chip[stunned],
+  status-chip[confused],
+  status-chip[dazed] {
+    --status-color: var(--status-stunned);
+  }
+  status-chip[vulnerable] {
+    --status-color: var(--status-vulnerable);
+  }
+  status-chip[wounded] {
+    --status-color: var(--status-bleeding);
+  }
+  status-chip[poisoned],
+  status-chip[envenomed] {
+    --status-color: var(--status-poisoned);
+  }
+  status-chip[concussed] {
+    --status-color: var(--status-stunned);
+  }
+  status-chip[exposed] {
+    --status-color: var(--status-vulnerable);
+  }
+  status-chip[uninterruptable],
+  status-chip[unstoppable],
+  status-chip[endGame] {
+    --status-color: oklch(0.22 0 0);
+  }
+
+  status-chip {
+    --pin-color: var(--status-color, var(--muted-foreground));
+  }
+
+  status-chip::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      oklch(from var(--pin-color) calc(l + 0.06) c h),
+      oklch(from var(--pin-color) calc(l - 0.04) c h)
+    );
+    border-radius: 50% 0 50% 50%;
+    rotate: calc(var(--pin-angle, 90deg) + 45deg);
+    transition: rotate 400ms ease;
+  }
+
+  status-chip[threshold]::before {
+    background: linear-gradient(
+      to bottom,
+      var(--white),
+      oklch(from var(--white) calc(l - 0.07) c h)
+    );
+  }
+
+  status-chip [status-icon] {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  status-chip [status-icon] icon {
+    font-size: calc(var(--unit) * 6);
+    --color: var(--white);
+  }
+
+  status-chip[threshold] [status-icon] icon:not([outline]) {
+    --color: var(--pin-color);
+  }
+
+  status-chip [status-icon] icon[outline] {
+    --color: var(--scrim-3);
+    transform: scale(1.1);
+  }
+
+  status-chip[round] {
+    width: calc(var(--unit) * 5);
+    height: calc(var(--unit) * 5);
+    display: inline-grid;
+    vertical-align: middle;
+    transform: translateY(calc(var(--unit) * -0.5));
+    pointer-events: none;
+  }
+
+  status-chip[round]::before {
+    border-radius: 50%;
+  }
+
+  status-chip[round] [status-icon] icon {
+    font-size: calc(var(--unit) * 3.75);
+  }
+
+  status-chip[round] status-meta {
+    display: none;
+  }
+
+  status-meta {
+    position: absolute;
+    left: calc(50% + var(--status-dir, 1) * var(--unit) * 6.5);
+    top: 50%;
+    translate: calc((var(--status-dir, 1) - 1) * 50%) -50%;
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--unit) * 2.5);
+  }
+
+  status-count {
+    font-family: var(--font-display);
+    font-size: calc(var(--unit) * 3.75);
+    line-height: 1;
+    color: var(--white);
+  }
+
+  status-announce {
+    opacity: 0;
+    pointer-events: none;
+    white-space: nowrap;
+    font-family: var(--font-accent);
+    font-style: italic;
+    font-size: calc(var(--unit) * 4);
+    line-height: 1;
+    color: var(--white);
+  }
+</style>
diff --git a/components/TeamBadge.html b/components/TeamBadge.html
new file mode 100644
index 00000000..9c8229ff
--- /dev/null
+++ b/components/TeamBadge.html
@@ -0,0 +1 @@
+<team-badge sm="@[sm]" style="--team-color: @[color]">@[name]</team-badge>
diff --git a/components/TeamplayChat.html b/components/TeamplayChat.html
new file mode 100644
index 00000000..7d81bb2a
--- /dev/null
+++ b/components/TeamplayChat.html
@@ -0,0 +1,205 @@
+<script type="module">
+  import { sendTeamplayChat } from '/js/teamplay.js';
+
+  window.teamplaySendChat = (input) => {
+    if (!input.value.trim()) return;
+    sendTeamplayChat(input.value);
+    input.value = '';
+  };
+
+  window.teamplayChatKey = (event) => {
+    if (event.key === 'Enter') teamplaySendChat(event.target);
+  };
+</script>
+
+<sticky reverse w="full" sm:b="12" teamplay-chat>
+  <!-- if pvp.teamplay.canJoin -->
+    <teamplay-hand-clip position="absolute">
+      <teamplay-hand-mount position="absolute" onclick="teamplayHandClick(event)">
+        <component
+          src="/components/remote/CardHand.html"
+          cards="@[pvp.teamplay.cards]"
+          dimUnselected="@[pvp.teamplay.selecting.length >= pvp.teamplay.bpa]"
+          angle="16"
+          distance="300"
+          size="58"
+        >
+        </component>
+      </teamplay-hand-mount>
+    </teamplay-hand-clip>
+  <!-- /if -->
+
+  <teamplay-chat-panel>
+    <!-- if pvp.teamplay.canJoin -->
+      <crow w="full" py="3" center teamplay-hand-banner>
+        <teamplay-hand-prompt text-center>
+          @[pvp.teamplay.selecting.length] / @[pvp.teamplay.bpa] selected — @[pvp.teamplay.bpa === 1
+          ? 'pick a brawler, then an open slot' : 'pick your brawlers, then a team']
+        </teamplay-hand-prompt>
+      </crow>
+    <!-- /if -->
+
+    <crow
+      justify-between
+      center
+      teamplay-chat-head
+      px="4"
+      onclick="$.pvp.teamplay.chatOpen = !$.pvp.teamplay.chatOpen"
+    >
+      <crow g="2" center>
+        <icon chat></icon>
+        <h5>Teamplay Chat</h5>
+      </crow>
+      <icon chevron animate-y toggled="@[!pvp.teamplay.chatOpen]"></icon>
+    </crow>
+
+    <accordion open="@[pvp.teamplay.chatOpen]">
+      <accordion-content>
+        <teamplay-chat-body>
+          <teamplay-chat-messages>
+            <!-- if !pvp.teamplay.viewed?.chat?.length -->
+              <teamplay-chat-empty>No messages yet. Say hello!</teamplay-chat-empty>
+            <!-- /if -->
+            <!-- if pvp.teamplay.viewed?.chat?.length -->
+              <!-- each pvp.teamplay.viewed.chat as msg (msg.at) -->
+                <teamplay-chat-msg mine="@[msg.owner_id === accountId]">
+                  <chat-name>@[msg.name]</chat-name>
+                  <chat-text>@[msg.text]</chat-text>
+                </teamplay-chat-msg>
+              <!-- /each -->
+            <!-- /if -->
+          </teamplay-chat-messages>
+          <crow g="2" center teamplay-chat-input-row>
+            <input
+              type="text"
+              placeholder="Message…"
+              maxlength="500"
+              onkeydown="teamplayChatKey(event)"
+              teamplay-chat-input
+            />
+            <button primary onclick="teamplaySendChat(this.previousElementSibling)">Send</button>
+          </crow>
+        </teamplay-chat-body>
+      </accordion-content>
+    </accordion>
+  </teamplay-chat-panel>
+</sticky>
+
+<style>
+  teamplay-chat-panel {
+    display: flex;
+    flex-direction: column;
+    background: var(--c-panel);
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+    overflow: hidden;
+    box-shadow:
+      inset 0 -1px 0 var(--scrim-1),
+      0 calc(var(--unit) * -1) calc(var(--unit) * 3) calc(var(--unit) * -0.5) var(--scrim-2);
+  }
+
+  [teamplay-hand-banner] {
+    background: var(--bar-bg);
+    box-shadow: inset 0 -1px 0 var(--c-line);
+  }
+
+  [teamplay-hand-prompt] {
+    font-family: var(--font-heading);
+    letter-spacing: 0.04em;
+    color: var(--muted-foreground);
+  }
+
+  teamplay-hand-clip {
+    left: 0;
+    right: 0;
+    bottom: 100%;
+    z-index: 2;
+    height: calc(var(--unit) * 150);
+    overflow: clip;
+    pointer-events: none;
+  }
+
+  teamplay-hand-mount {
+    left: 50%;
+    bottom: calc(var(--unit) * 4);
+    width: calc(var(--unit) * 160);
+    height: calc(var(--unit) * 100);
+    transform: translate(-50%, calc(var(--unit) * 42));
+    pointer-events: none;
+  }
+
+  teamplay-chat-panel [teamplay-chat-head] {
+    cursor: pointer;
+    height: calc(var(--unit) * 12);
+    background: oklch(from var(--c-accent) l c h / 0.1);
+    box-shadow:
+      inset 0 2px 0 oklch(from var(--c-accent) l c h / 0.4),
+      inset 0 -1px 0 var(--c-line);
+  }
+
+  teamplay-chat-body {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 2);
+    padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+  }
+
+  teamplay-chat-messages {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1.5);
+    max-height: calc(var(--unit) * 70);
+    overflow-y: auto;
+  }
+
+  teamplay-chat-empty {
+    color: var(--c-muted);
+    text-align: center;
+    padding: calc(var(--unit) * 4) 0;
+  }
+
+  teamplay-chat-msg {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 0.5);
+    padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+    border-radius: var(--radius);
+    background: var(--c-inset);
+    align-self: flex-start;
+    max-width: 85%;
+  }
+
+  teamplay-chat-msg[mine] {
+    align-self: flex-end;
+    background: oklch(from var(--c-accent) l c h / 0.16);
+  }
+
+  teamplay-chat-msg chat-name {
+    color: var(--c-muted);
+    font-size: calc(var(--unit) * 3);
+  }
+
+  teamplay-chat-msg chat-text {
+    color: var(--c-fg);
+    overflow-wrap: anywhere;
+  }
+
+  [teamplay-chat-input] {
+    flex: 1;
+    min-width: 0;
+  }
+
+  [teamplay-chat-input-row] {
+    align-items: stretch;
+  }
+
+  [teamplay-chat-input-row] button {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    box-shadow: none;
+  }
+
+  [teamplay-chat-input-row] button:not(:disabled):hover {
+    background-color: oklch(from var(--primary) calc(l - 0.05 * var(--theme-sign)) c h);
+  }
+</style>
diff --git a/components/TeamplayListContent.html b/components/TeamplayListContent.html
new file mode 100644
index 00000000..d348b78e
--- /dev/null
+++ b/components/TeamplayListContent.html
@@ -0,0 +1,380 @@
+<script type="module">
+  import { getLevelByExperience } from '/js/level.js';
+  import { fetchRecentTeamplays } from '/js/teamplay.js';
+
+  // Max level and the open-slots toggle persist across reloads; min level doesn't —
+  // it re-seeds to the player's ludus level each visit (see below).
+  const STORAGE_KEY = 'teamplayFilters';
+  const storedFilters = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+
+  const s =
+    $[
+      component({
+        tab: 'active',
+        minLevel: 1,
+        maxLevel: storedFilters.maxLevel ?? 25,
+        onlyOpen: storedFilters.onlyOpen ?? false,
+        minTouched: false,
+        filtered: [],
+        recent: [],
+        recentLoaded: false,
+        pagination: {
+          page: 0,
+          pageCount: 1,
+          perPage: 10,
+          slice: [],
+        },
+        levelOptions: Array.from({ length: 25 }, (_, i) => i + 1),
+      })
+    ];
+
+  // Per-row display fields are denormalised here (not computed in markup) so each
+  // row binds plain properties — function calls inside an each-row abort the render.
+  const decorate = (teamplay) => {
+    let filled = 0;
+    let total = 0;
+    teamplay.teams.forEach((team) =>
+      team.slots.forEach((slot) => {
+        total += 1;
+        if (slot.owner_id) filled += 1;
+      }),
+    );
+    return {
+      ...teamplay,
+      teamsLabel: teamplay.rules.amountOfTeams,
+      slotsLabel: `${filled} / ${total}`,
+      combatantCount: teamplay.rules.amountOfTeams * teamplay.rules.brawlersPerTeam,
+      levelLabel:
+        teamplay.rules.minLevel === teamplay.rules.maxLevel
+          ? `${teamplay.rules.minLevel}`
+          : `${teamplay.rules.minLevel} - ${teamplay.rules.maxLevel}`,
+      openSlots: total - filled,
+    };
+  };
+
+  const saveFilters = () =>
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ maxLevel: s.maxLevel, onlyOpen: s.onlyOpen }),
+    );
+
+  const recompute = () => {
+    const all = ($.pvp.teamplay.list || []).map(decorate);
+    s.filtered = all.filter((t) => {
+      const overlaps = t.rules.minLevel <= s.maxLevel && t.rules.maxLevel >= s.minLevel;
+      if (!overlaps) return false;
+      if (s.onlyOpen) return t.status === 'open' && t.openSlots > 0;
+      return true;
+    });
+  };
+
+  s.minLevel = getLevelByExperience($.experience);
+  if (s.maxLevel < s.minLevel) s.maxLevel = s.minLevel;
+  recompute();
+
+  // $.pvp.teamplay.list is nested, so afterUpdate's deep-cloned snapshot can't ref-diff
+  // it cleanly — track the live leaf, which stays cache-stable until the list reloads.
+  let lastList = $.pvp.teamplay.list;
+  $.on('afterUpdate', (current, prev) => {
+    if ($.pvp.teamplay.list !== lastList) {
+      lastList = $.pvp.teamplay.list;
+      recompute();
+    }
+    // Seed the filter to the player's ludus level once game state lands (a full page
+    // load mounts this before authenticate returns), unless they've changed it.
+    if (current.gameStateLoaded && !prev.gameStateLoaded && !s.minTouched) {
+      s.minLevel = getLevelByExperience($.experience);
+      if (s.maxLevel < s.minLevel) s.maxLevel = s.minLevel;
+      recompute();
+    }
+  });
+
+  // Recent is paginated at perPage rows; the current page is sliced out so the
+  // table binds a plain array, and the last page is padded with skeleton rows
+  // (perPage - slice.length) so every page is the same height.
+  // Reassign the whole pagination object (not a nested mutation) so the @[] bindings
+  // and Pagination component re-render — Vibe only reacts to the top-level key change.
+  const recomputeRecent = (page = s.pagination.page) => {
+    const { perPage } = s.pagination;
+    const pageCount = Math.max(1, Math.ceil(s.recent.length / perPage));
+    const clamped = Math.max(0, Math.min(page, pageCount - 1));
+    s.pagination = {
+      ...s.pagination,
+      page: clamped,
+      pageCount,
+      slice: s.recent.slice(clamped * perPage, clamped * perPage + perPage),
+    };
+  };
+
+  window.teamplayTab = async (tab) => {
+    s.tab = tab;
+    if (tab === 'recent' && !s.recentLoaded) {
+      s.recentLoaded = true;
+      const list = await fetchRecentTeamplays();
+      s.recent = (list || []).map(decorate);
+      recomputeRecent();
+    }
+  };
+
+  window.teamplayRecentPrev = () => recomputeRecent(s.pagination.page - 1);
+  window.teamplayRecentNext = () => recomputeRecent(s.pagination.page + 1);
+
+  window.teamplayFilterMin = (value) => {
+    s.minTouched = true;
+    s.minLevel = Number(value);
+    // Min is the floor: raising it above max drags max up with it (max is never < min).
+    if (s.minLevel > s.maxLevel) s.maxLevel = s.minLevel;
+    saveFilters();
+    recompute();
+  };
+
+  window.teamplayFilterMax = (value) => {
+    // Clamp up to min rather than dragging min down — min stays put.
+    s.maxLevel = Math.max(Number(value), s.minLevel);
+    saveFilters();
+    recompute();
+  };
+
+  window.teamplayFilterOpen = (checked) => {
+    s.onlyOpen = checked;
+    saveFilters();
+    recompute();
+  };
+</script>
+
+<teamplay-list>
+  <tabs secondary>
+    <tab active="@[this.tab === 'active']" onclick="teamplayTab('active')">Active Teamplays</tab>
+    <tab active="@[this.tab === 'recent']" onclick="teamplayTab('recent')">Recent Teamplays</tab>
+  </tabs>
+
+  <!-- if this.tab === 'active' -->
+    <teamplay-filter>
+      <teamplay-filter-field>
+        <field-caption>Min level</field-caption>
+        <label>
+          <select cinzel onchange="teamplayFilterMin(this.value)">
+            <!-- each this.levelOptions as lvl (lvl) -->
+              <option value="@[lvl]" selected="@[lvl === this.minLevel]">@[lvl]</option>
+            <!-- /each -->
+          </select>
+        </label>
+      </teamplay-filter-field>
+      <teamplay-filter-field>
+        <field-caption>Max level</field-caption>
+        <label>
+          <select cinzel onchange="teamplayFilterMax(this.value)">
+            <!-- each this.levelOptions as lvl (lvl) -->
+              <option
+                value="@[lvl]"
+                selected="@[lvl === this.maxLevel]"
+                disabled="@[lvl < this.minLevel]"
+              >
+                @[lvl]
+              </option>
+            <!-- /each -->
+          </select>
+        </label>
+      </teamplay-filter-field>
+      <label crow g="2" center f="none" teamplay-switch>
+        Has empty slots
+        <input
+          type="checkbox"
+          role="switch"
+          checked="@[this.onlyOpen]"
+          onchange="teamplayFilterOpen(this.checked)"
+        />
+      </label>
+    </teamplay-filter>
+    <teamplay-active-table>
+      <component src="/components/remote/Table.html">
+        <tr game-table-header>
+          <td>Name</td>
+          <td>Level</td>
+          <td>Teams</td>
+          <td>Slots</td>
+        </tr>
+        <!-- each this.filtered as t, i (t._id) -->
+          <tr
+            game-table-row
+            teamplay-clickable
+            even="@[i % 2 === 0]"
+            onclick="location.href = '/teamplay/' + t._id"
+          >
+            <td><tp-col-name>@[t.rules.name]</tp-col-name></td>
+            <td><tp-col-level cinzel>@[t.levelLabel]</tp-col-level></td>
+            <td><tp-col-teams>@[t.teamsLabel]</tp-col-teams></td>
+            <td><tp-col-slots>@[t.slotsLabel]</tp-col-slots></td>
+          </tr>
+        <!-- /each -->
+      </component>
+    </teamplay-active-table>
+    <!-- if !this.filtered.length -->
+      <component
+        src="/components/PageNotFound.html"
+        icon="brawlers"
+        heading="No teamplays to join"
+        message="No live teamplays match your filters right now.<br />Start your own and rally challengers to the arena."
+        label="Create teamplay"
+        onclick="openCreateTeamplay()"
+      ></component>
+    <!-- /if -->
+  <!-- /if -->
+
+  <!-- if this.tab === 'recent' -->
+    <component
+      src="/components/remote/Table.html"
+      skeleton="@[this.pagination.perPage - this.pagination.slice.length]"
+    >
+      <tr game-table-header>
+        <td>Name</td>
+        <td>Level</td>
+        <td>Combatants</td>
+        <td></td>
+      </tr>
+      <!-- each this.pagination.slice as t, i (t._id) -->
+        <tr
+          game-table-row
+          teamplay-clickable
+          recent
+          even="@[i % 2 === 0]"
+          onclick="location.href = '/teamplay/' + t._id"
+        >
+          <td><tp-col-name>@[t.rules.name]</tp-col-name></td>
+          <td><tp-col-level cinzel>@[t.levelLabel]</tp-col-level></td>
+          <td>
+            <tp-col-teams>
+              <span combatants-count>@[t.combatantCount]</span>
+              <span combatants-teams>(@[t.teamsLabel] teams)</span>
+            </tp-col-teams>
+          </td>
+          <td>
+            <tp-col-action>
+              <component src="/components/ReWatchButton.html" tpid="@[t._id]"></component>
+            </tp-col-action>
+          </td>
+        </tr>
+      <!-- /each -->
+    </component>
+    <sticky reverse sm:b="8" sticky-foot>
+      <component
+        src="/components/remote/Pagination.html"
+        page="@[this.pagination.page]"
+        pageCount="@[this.pagination.pageCount]"
+        prev="teamplayRecentPrev()"
+        next="teamplayRecentNext()"
+      ></component>
+    </sticky>
+  <!-- /if -->
+</teamplay-list>
+
+<style>
+  teamplay-list {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: calc(var(--unit) * 4);
+  }
+
+  teamplay-filter {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: calc(var(--unit) * 4);
+  }
+
+  teamplay-filter-field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1.5);
+  }
+
+  teamplay-filter-field field-caption {
+    color: var(--foreground);
+    font-family: var(--font-heading);
+  }
+
+  teamplay-filter select {
+    width: calc(var(--unit) * 32);
+    min-width: 0;
+  }
+
+  teamplay-filter [teamplay-switch] {
+    margin-bottom: calc(var(--unit) * 1.5);
+    margin-left: auto;
+  }
+
+  teamplay-list td:first-child {
+    width: 100%;
+  }
+
+  teamplay-list [game-table] td + td {
+    padding-left: calc(var(--unit) * 6);
+  }
+
+  teamplay-active-table {
+    display: block;
+  }
+
+  teamplay-active-table [game-table] td:first-child {
+    width: auto;
+  }
+
+  teamplay-active-table [game-table] td:nth-child(n + 2) {
+    width: calc(var(--unit) * 24);
+    padding-inline: calc(var(--unit) * 2);
+    text-align: center;
+  }
+
+  tp-col-name {
+    min-width: 0;
+  }
+
+  tp-col-level,
+  tp-col-teams,
+  tp-col-slots {
+    white-space: nowrap;
+  }
+
+  tp-col-action {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  [game-table-row][teamplay-clickable] {
+    cursor: pointer;
+  }
+
+  teamplay-list [game-table-row][teamplay-clickable]:hover td {
+    background: oklch(from var(--c-accent) l c h / 0.1);
+  }
+
+  teamplay-list [game-table-row][teamplay-clickable]:hover td:first-child {
+    box-shadow: inset calc(var(--unit) * 0.5) 0 0 oklch(from var(--c-accent) l c h / 0.55);
+  }
+
+  teamplay-list [game-table-row][skeleton] td {
+    height: calc(var(--unit) * 13.25);
+  }
+
+  [game-table-row][recent] tp-col-name,
+  [game-table-row][recent] tp-col-level {
+    color: var(--muted-foreground);
+  }
+
+  [game-table-row][recent] tp-col-teams {
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--unit) * 1);
+    color: var(--muted-foreground);
+  }
+
+  [combatants-count] {
+    color: var(--c-fg);
+  }
+
+  [combatants-teams] {
+    font-size: calc(var(--unit) * 3);
+  }
+</style>
diff --git a/components/TeamplayRoomContent.html b/components/TeamplayRoomContent.html
new file mode 100644
index 00000000..528d1a25
--- /dev/null
+++ b/components/TeamplayRoomContent.html
@@ -0,0 +1,508 @@
+<script type="module">
+  import {
+    teamplayTeamSlots,
+    fetchMyActiveTeamplay,
+    buildTeamplayCombat,
+    teamplayEndState,
+    teamplayWinningOwnerIds,
+  } from '/js/teamplay.js';
+  import { getLevelByExperience } from '/js/level.js';
+  import { teamColor } from '/js/helpers.js';
+  import { calculateCombatStatsByCharacter } from '/js/utils.js';
+  import CHARACTERS from '/js/constants/CHARACTERS.js';
+
+  // Health % of a stored room brawler. maxHealth scales with level, so full health
+  // means overrides.currentHealth === maxHealth; an unset override is a fresh, full
+  // brawler (never the stale base currentHealth on the merged combatStats).
+  const brawlerHpPct = (brawler) => {
+    const max = calculateCombatStatsByCharacter(CHARACTERS(brawler, true)).maxHealth;
+    const cur = brawler.overrides?.combatStats?.currentHealth ?? max;
+    return max > 0 ? Math.min(100, Math.max(0, (cur / max) * 100)) : 100;
+  };
+
+  // Room status badge shown top-right of the title bar. Priority: a finished fight wins,
+  // then an unfilled lobby, then any hurt brawler (which also blocks Start — see canStart),
+  // else the lobby is ready and waiting on the host. `lowest` is the lowest brawler HP %.
+  const roomStatus = (tp, allFilled, lowest) => {
+    if (tp.status === 'completed') return { label: 'Completed', tone: 'green' };
+    if (tp.status === 'live') return { label: 'In progress', tone: 'gold' };
+    if (!allFilled) return { label: 'Needs brawlers', tone: 'neutral' };
+    // Hurt brawler → a badge tinted live by health: HSL hue 0→60→120 (red→yellow→green)
+    // is exactly pct × 1.2, handed to the badge as --health-hue.
+    if (lowest < 100)
+      return { label: `${Math.round(lowest)}%`, tone: 'health', hue: Math.round(lowest * 1.2) };
+    return { label: 'Waiting for host to start', tone: 'green' };
+  };
+
+  const s =
+    $[
+      component({
+        loaded: false,
+        status: 'open',
+        joined: false,
+        isHost: false,
+        teams: [],
+        baseCards: [],
+        bpa: 1,
+        canJoin: false,
+        pickSlot: false,
+        pickTeam: false,
+        canKick: false,
+        canFillBots: false,
+        canCancel: false,
+        canLeave: false,
+        canStart: false,
+      })
+    ];
+
+  // Selection lives in global $ (like the duel's $.selectedBrawlers) and each card
+  // carries its own `selected` flag, reassigned as a whole array — per-card props
+  // threaded into an each don't re-render reliably on change.
+  const paintCards = (selecting) => {
+    $.pvp.teamplay.selecting = selecting;
+    $.pvp.teamplay.cards = s.baseCards.map((c) => ({ ...c, selected: selecting.includes(c.id) }));
+  };
+
+  const recompute = () => {
+    const tp = $.pvp.teamplay.viewed;
+    if (!tp || !tp._id) {
+      s.loaded = false;
+      return;
+    }
+    s.loaded = true;
+    s.status = tp.status;
+    s.bpa = tp.rules.brawlersPerAccount;
+    s.isHost = tp.host === $.accountId;
+    s.joined = tp.teams.some((team) =>
+      team.slots.some((slot) => slot.owner_id && slot.owner_id === $.accountId),
+    );
+    s.teams = tp.teams.map((team, i) => {
+      // With more than one brawler per account a team belongs to its players, so once
+      // any brawler is in it, name it after the owner(s); an empty team stays "Team x".
+      const owners =
+        s.bpa > 1
+          ? [
+              ...new Set(
+                team.slots
+                  .filter((sl) => sl.brawler)
+                  .map((sl) => sl.owner_name)
+                  .filter(Boolean),
+              ),
+            ]
+          : [];
+      return {
+        key: i,
+        // Content-derived render key: Vibe reuses a keyed-each row's component on data
+        // change but doesn't propagate the new prop into its *nested* components, so a
+        // freshly-joined slot kept its empty stat/ability bindings until a reload. Keying
+        // on the roster forces the team's slot subtree to remount when it changes.
+        renderKey: `${i}:${team.slots.map((sl) => sl.brawler?.uuid || '_').join(',')}`,
+        color: teamColor(i),
+        label: owners.length ? `Team ${i + 1} — ${owners.join(', ')}` : `Team ${i + 1}`,
+        // My membership of this team — gates the per-team "Leave" button (the non-host
+        // counterpart to the host's "Kick team", in the same header spot).
+        mine: team.slots.some((slot) => slot.owner_id === $.accountId),
+        // The team owner's ludus level, frozen onto each brawler at join. One number per
+        // single-owner team; a range when players of different levels share a team.
+        level: [...new Set(team.slots.map((sl) => sl.brawler?.level).filter(Boolean))]
+          .sort((a, b) => a - b)
+          .join('–'),
+        slots: teamplayTeamSlots(team),
+      };
+    });
+
+    const myLevel = getLevelByExperience($.experience);
+    const levelOk = myLevel >= tp.rules.minLevel && myLevel <= tp.rules.maxLevel;
+    s.baseCards = window.brawlHandCards ? brawlHandCards($.characters, []) : [];
+    const room =
+      s.bpa === 1
+        ? tp.teams.some((team) => team.slots.some((slot) => !slot.owner_id))
+        : tp.teams.some((team) => team.slots.filter((slot) => !slot.owner_id).length >= s.bpa);
+    s.canJoin = tp.status === 'open' && !s.joined && levelOk && s.baseCards.length >= s.bpa && room;
+    s.canKick = s.isHost && tp.status === 'open';
+    s.canFillBots = s.isHost && tp.status === 'open' && !!$.settings?.isTester;
+    s.canCancel = s.isHost && tp.status === 'open';
+    s.canLeave = s.joined && !s.isHost && tp.status === 'open';
+    // A fight can't start until the lobby is full AND every brawler is rested to full
+    // health — the host waits out (or potions through) any post-fight damage first.
+    const allFilled = tp.teams.every((team) => team.slots.every((slot) => slot.owner_id));
+    const brawlers = tp.teams.flatMap((team) =>
+      team.slots.filter((slot) => slot.brawler).map((slot) => slot.brawler),
+    );
+    const lowestHp = brawlers.length ? Math.min(...brawlers.map(brawlerHpPct)) : 100;
+    s.canStart = s.isHost && tp.status === 'open' && allFilled && lowestHp >= 100;
+
+    const selecting = s.canJoin
+      ? $.pvp.teamplay.selecting.filter((u) => s.baseCards.some((c) => c.id === u))
+      : [];
+    paintCards(selecting);
+    s.pickSlot = s.canJoin && s.bpa === 1 && selecting.length === 1;
+    s.pickTeam = s.canJoin && s.bpa > 1 && selecting.length === s.bpa;
+
+    // The brawler hand floats above the chat (its own sibling bar), so mirror the
+    // gate + per-account count onto $ for it to read.
+    $.pvp.teamplay.canJoin = s.canJoin;
+    $.pvp.teamplay.bpa = s.bpa;
+    // The status badge lives in the title bar (a sibling of this component), so the
+    // computed state rides on $ for the page to bind, like canJoin/bpa above.
+    $.pvp.teamplay.roomStatus = roomStatus(tp, allFilled, lowestHp);
+    // Start/Close live in that title bar too — mirror the gates they read.
+    $.pvp.teamplay.controls = {
+      isHost: s.isHost,
+      status: s.status,
+      canStart: s.canStart,
+      canCancel: s.canCancel,
+      canLeave: s.canLeave,
+    };
+  };
+
+  recompute();
+
+  // afterUpdate's (current, prev) deep-clone the whole $.pvp subtree on any change, so a
+  // nested-ref compare would fire on every teamplay write — including recompute's own
+  // selecting/cards paint, looping forever. Track the live leaf refs instead: the state
+  // proxy returns a cache-stable reference until the value is actually reassigned.
+  let lastViewed = $.pvp.teamplay.viewed;
+  let lastAccount = $.accountId;
+  $.on('afterUpdate', () => {
+    if ($.pvp.teamplay.viewed !== lastViewed || $.accountId !== lastAccount) {
+      lastViewed = $.pvp.teamplay.viewed;
+      lastAccount = $.accountId;
+      recompute();
+    }
+  });
+
+  window.teamplayPickCard = (uuid) => {
+    if (!s.canJoin) return;
+    const cur = $.pvp.teamplay.selecting;
+    const next = cur.includes(uuid)
+      ? cur.filter((u) => u !== uuid)
+      : cur.length < s.bpa
+        ? [...cur, uuid]
+        : cur;
+    paintCards(next);
+    s.pickSlot = s.bpa === 1 && next.length === 1;
+    s.pickTeam = s.bpa > 1 && next.length === s.bpa;
+  };
+
+  window.teamplayHandClick = (e) => {
+    const uuid = e.target.closest('[data-card-id]')?.dataset.cardId;
+    if (uuid) teamplayPickCard(uuid);
+  };
+
+  const joinBrawlers = async (teamIndex, slotIndex) => {
+    const id = $.pvp.teamplay.viewed._id;
+    // Freeze the owner's ludus level onto each snapshot. Brawlers derive their level
+    // from account experience, but a foreign client has no access to my experience —
+    // without this, calculateCombatStatsByCharacter falls back to the *viewer's* level
+    // and every client computes different stats for the same brawler (see utils.js).
+    const myLevel = getLevelByExperience($.experience);
+    const brawlers = $.pvp.teamplay.selecting
+      .map((uuid) => $.characters.find((c) => c.uuid === uuid))
+      .filter(Boolean)
+      .map((c) => ({ ...JSON.parse(JSON.stringify(c)), level: myLevel }));
+    if (brawlers.length !== s.bpa) return;
+    try {
+      await $.socket.sendAsync('teamplay/join', {
+        token: $.token,
+        id,
+        brawlers,
+        teamIndex,
+        ...(s.bpa === 1 ? { slotIndex } : {}),
+      });
+      paintCards([]);
+      s.pickSlot = false;
+      s.pickTeam = false;
+      fetchMyActiveTeamplay();
+    } catch (error) {
+      notify.error(error?.error || 'Failed to join');
+    }
+  };
+
+  // Empty-slot / team picking is delegated from the teams wrapper so the read-only
+  // BrawlerSlot stays untouched; team + slot indices ride on data attributes.
+  window.teamplayTeamsClick = (e) => {
+    const teamEl = e.target.closest('[data-team]');
+    if (!teamEl) return;
+    const teamIndex = Number(teamEl.dataset.team);
+    if (s.pickTeam) return joinBrawlers(teamIndex);
+    if (s.pickSlot) {
+      const slotEl = e.target.closest('brawler-slot');
+      if (slotEl && !slotEl.hasAttribute('filled'))
+        joinBrawlers(teamIndex, Number(slotEl.dataset.slotKey));
+    }
+  };
+
+  window.teamplayStart = async () => {
+    const doc = $.pvp.teamplay.viewed;
+    if (!doc) return;
+    // Compute the authoritative outcome locally, then hand the backend the duration,
+    // winner and final HPs; the room broadcast pops every other attendee's screen.
+    const combat = buildTeamplayCombat(doc);
+    try {
+      await $.socket.sendAsync('teamplay/start', {
+        token: $.token,
+        id: doc._id,
+        duration: combat.duration,
+        winningTeamIndex: combat.winningTeam?.index ?? null,
+        winningOwnerIds: teamplayWinningOwnerIds(combat),
+        endState: teamplayEndState(combat),
+      });
+      $.combat = combat;
+      $.overlay = { name: 'Combat' };
+    } catch (error) {
+      notify.error(error?.error || 'Failed to start');
+    }
+  };
+
+  window.teamplayLeave = async () => {
+    try {
+      const res = await $.socket.sendAsync('teamplay/leave', {
+        token: $.token,
+        id: $.pvp.teamplay.viewed._id,
+      });
+      if (res?.deleted) return (location.href = '/teamplay');
+      fetchMyActiveTeamplay();
+    } catch (error) {
+      notify.error(error?.error || 'Failed to leave');
+    }
+  };
+
+  // Both paths confirm first: closing the lobby (host) destroys it for everyone; a
+  // non-host leaving pulls their brawlers out of the lobby. Same teamplay/leave call.
+  window.teamplayLeavePrompt = () => {
+    $.overlay = {
+      name: 'confirm',
+      text: s.canCancel
+        ? 'Close this teamplay for everyone?'
+        : 'Leave this teamplay? Your brawlers will be removed from the lobby.',
+      confirm: () => teamplayLeave(),
+    };
+  };
+
+  const kick = async (payload) => {
+    try {
+      await $.socket.sendAsync('teamplay/kick', {
+        token: $.token,
+        id: $.pvp.teamplay.viewed._id,
+        ...payload,
+      });
+    } catch (error) {
+      notify.error(error?.error || 'Failed to kick');
+    }
+  };
+
+  window.teamplayKickTeam = (e) => {
+    const teamEl = e.target.closest('[data-team]');
+    if (!teamEl) return;
+    // Capture the index now — the click event is gone by the time Confirm fires.
+    const teamIndex = Number(teamEl.dataset.team);
+    $.overlay = {
+      name: 'confirm',
+      text: 'Kick this team? Their brawlers will be removed from the lobby.',
+      confirm: () => kick({ teamIndex, mode: 'team' }),
+    };
+  };
+
+  window.teamplayFillBots = async (e) => {
+    const teamEl = e.target.closest('[data-team]');
+    if (!teamEl) return;
+    try {
+      await $.socket.sendAsync('teamplay/fill-bots', {
+        token: $.token,
+        id: $.pvp.teamplay.viewed._id,
+        teamIndex: Number(teamEl.dataset.team),
+      });
+    } catch (error) {
+      notify.error(error?.error || 'Failed to fill with bots');
+    }
+  };
+
+  window.teamplayKickSlot = (e) => {
+    const teamEl = e.target.closest('[data-team]');
+    const slotEl = e.target.closest('brawler-slot');
+    if (teamEl && slotEl)
+      kick({
+        teamIndex: Number(teamEl.dataset.team),
+        slotIndex: Number(slotEl.dataset.slotKey),
+        mode: 'brawler',
+      });
+  };
+</script>
+
+<teamplay-room
+  blocked="@[!this.joined]"
+  picking-slot="@[this.pickSlot]"
+  picking-team="@[this.pickTeam]"
+  can-kick="@[this.canKick]"
+  can-leave="@[this.canLeave]"
+  can-fill-bots="@[this.canFillBots]"
+  multi="@[this.bpa > 1]"
+>
+  <!-- if this.loaded -->
+    <teamplay-teams onclick="teamplayTeamsClick(event)">
+      <!-- each this.teams as team (team.renderKey) -->
+        <!-- if team.key -->
+          <hr mx="-6" sm:mx="-3" mt="3" />
+        <!-- /if -->
+        <teamplay-team
+          data-team="@[team.key]"
+          mine="@[team.mine]"
+          mx="-6"
+          sm:mx="-3"
+          px="6"
+          sm:px="3"
+          py="3"
+        >
+          <crow justify-between center>
+            <crow center g="2">
+              <team-dot style="--team-color: @[team.color]"></team-dot>
+              <h4 m="0">@[team.label]</h4>
+            </crow>
+            <crow center g="2" f="none">
+              <!-- if team.level -->
+                <span cinzel f="none">level @[team.level]</span>
+              <!-- /if -->
+              <button
+                secondary
+                sm
+                fill-bots-btn
+                onclick="
+                  event.stopPropagation();
+                  teamplayFillBots(event);
+                "
+              >
+                Fill with bots
+              </button>
+              <button
+                primary
+                danger
+                sm
+                kick-team-btn
+                onclick="
+                  event.stopPropagation();
+                  teamplayKickTeam(event);
+                "
+              >
+                Kick team
+              </button>
+              <button
+                primary
+                danger
+                sm
+                leave-team-btn
+                onclick="
+                  event.stopPropagation();
+                  teamplayLeavePrompt();
+                "
+              >
+                Leave
+              </button>
+            </crow>
+          </crow>
+          <component
+            src="/components/BrawlerSlotList.html"
+            slots="@[team.slots]"
+            locked="@[true]"
+          ></component>
+        </teamplay-team>
+      <!-- /each -->
+    </teamplay-teams>
+  <!-- /if -->
+
+  <!-- if !this.loaded -->
+    <teamplay-loading>Loading teamplay…</teamplay-loading>
+  <!-- /if -->
+</teamplay-room>
+
+<style>
+  teamplay-room {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 5);
+  }
+
+  teamplay-teams {
+    display: flex;
+    flex-direction: column;
+  }
+
+  team-dot {
+    width: calc(var(--unit) * 2.5);
+    height: calc(var(--unit) * 2.5);
+    border-radius: 50%;
+    background: var(--team-color);
+    flex-shrink: 0;
+  }
+
+  teamplay-team {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+    transition: background 160ms ease;
+  }
+
+  teamplay-loading {
+    display: block;
+    padding: calc(var(--unit) * 10) 0;
+    text-align: center;
+    color: var(--c-muted);
+  }
+
+  /* Until you've joined, every brawler's ability bar is masked with the "?" stripe.
+     Driven by one attribute on the room root so it flips reliably for all slots at
+     once (threading the flag through each nested slot doesn't re-propagate). */
+  teamplay-room[blocked] ability-blocked {
+    display: grid;
+  }
+
+  teamplay-room[blocked] ability-grid,
+  teamplay-room[blocked] ability-overlay {
+    visibility: hidden;
+  }
+
+  teamplay-room[blocked] ability-marker-sequence,
+  teamplay-room[blocked] ability-marker-max {
+    display: none;
+  }
+
+  [kick-team-btn],
+  [leave-team-btn],
+  [fill-bots-btn] {
+    display: none;
+  }
+
+  teamplay-room[can-kick] teamplay-team:has(brawler-slot[filled]) [kick-team-btn] {
+    display: inline-flex;
+  }
+
+  teamplay-room[can-leave] teamplay-team[mine] [leave-team-btn] {
+    display: inline-flex;
+  }
+
+  teamplay-room[can-fill-bots] teamplay-team:has(brawler-slot:not([filled])) [fill-bots-btn] {
+    display: inline-flex;
+  }
+
+  teamplay-room[can-kick]:not([multi]) teamplay-team brawler-slot[filled] brawler-slot-kick {
+    display: block;
+  }
+
+  /* Pick-a-slot (1 per account): empty slots light up and invite a click. */
+  teamplay-room[picking-slot] teamplay-team brawler-slot:not([filled]) {
+    cursor: pointer;
+  }
+
+  teamplay-room[picking-slot] teamplay-team brawler-slot:not([filled]) [brawler-slot-empty] {
+    border-color: var(--c-accent);
+    border-style: solid;
+    background: oklch(from var(--c-accent) l c h / 0.12);
+    box-shadow: 0 0 0 1px var(--c-accent);
+  }
+
+  /* Pick-a-team (multiple per account): teams with room light up and are clickable. */
+  teamplay-room[picking-team] teamplay-team:has(brawler-slot:not([filled])) {
+    cursor: pointer;
+    background: oklch(from var(--c-accent) l c h / 0.08);
+  }
+</style>
diff --git a/components/TitleBar.html b/components/TitleBar.html
new file mode 100644
index 00000000..3939918c
--- /dev/null
+++ b/components/TitleBar.html
@@ -0,0 +1,26 @@
+<crow left w="full" g="2">
+  <!-- if back -->
+    <a class="button" title-back tertiary f="none" href="@[back]">
+      <icon chevron rotate="90"></icon>
+    </a>
+  <!-- /if -->
+  <crow vertical down left g="1" f="none" titlebar-heading>
+    <!-- if small -->
+      <h5 m="0">@[title]</h5>
+    <!-- else -->
+      <h3 m="0">@[title]</h3>
+    <!-- /if -->
+    <!-- if description -->
+      <span>@[description]</span>
+    <!-- /if -->
+  </crow>
+  <crow right g="1" f="1">
+    <slot></slot>
+  </crow>
+</crow>
+
+<style>
+  crow[titlebar-heading] {
+    width: auto;
+  }
+</style>
diff --git a/components/Topbar.html b/components/Topbar.html
new file mode 100644
index 00000000..1476b782
--- /dev/null
+++ b/components/Topbar.html
@@ -0,0 +1,204 @@
+<sticky sticky-bar topbar-stay py="2">
+  <crow justify-between topbar>
+    <crow center g="3" topbar-brand>
+      <a href="/" logo-link pl="3" aria-label="Home">
+        <circle logo-mark hide sm:flex></circle>
+        <logo sm:hide>Battleborn Brawlers</logo>
+      </a>
+      <version-tag sm:hide>ALPHA v@[version]</version-tag>
+      <!-- if settings.isTester && worktree -->
+        <a worktree-link secondary sm:hide href="https://@[worktree].test" target="_blank"
+          >@[worktree]</a
+        >
+      <!-- /if -->
+      <!-- if season -->
+        <season-tag onclick="$.overlay = { name: 'SeasonModal' }">
+          <season-num>Season @[season]</season-num>
+          <season-flavor>@[seasonName(season)]</season-flavor>
+          <!-- if settings.isTester -->
+            <season-seed>@[seasonLabel(season)]</season-seed>
+          <!-- /if -->
+        </season-tag>
+      <!-- /if -->
+      <!-- if !compiled -->
+        <badge neutral sm:hide>Non-compiled</badge>
+      <!-- /if -->
+      <!-- if token && (isPremiumNow || settings.isTester) -->
+        <badge
+          gold="@[isPremiumNow]"
+          neutral="@[!isPremiumNow]"
+          clickable="@[settings.isTester]"
+          onclick="$.settings.isTester && devTogglePremium()"
+        >
+          @[isPremiumNow ? 'Battle Pass' : 'No Battle Pass']
+        </badge>
+      <!-- /if -->
+      <!-- if canTest -->
+        <badge
+          sm:hide
+          neutral="@[!settings.isTester]"
+          red="@[settings.isTester]"
+          onclick="$.settings = { ...$.settings, isTester: !$.settings.isTester }"
+        >
+          @[settings.isTester ? 'Test Mode' : 'Normal Mode']
+        </badge>
+      <!-- /if -->
+    </crow>
+    <crow g="2" px="2" sm:g="0" sm:px="1" center>
+      <!-- if token && gameStateLoaded -->
+        <component src="/components/Materials.html" minimalistic></component>
+        <component src="/components/Coins.html" amount="@[coins]" minimalistic></component>
+        <hr vertical mx="4" sm:mx="2" />
+      <!-- /if -->
+      <button
+        tertiary
+        onclick="
+          $.settings.darkMode = !$.settings.darkMode;
+          document.body.toggleAttribute('dark', $.settings.darkMode);
+          document.body.toggleAttribute('light', !$.settings.darkMode);
+        "
+      >
+        <!-- if settings.darkMode -->
+          <icon light></icon>
+        <!-- else -->
+          <icon dark></icon>
+        <!-- /if -->
+      </button>
+      <button tertiary onclick="$.overlay = { name: 'GameMenu' }">
+        <icon cog></icon>
+      </button>
+      <!-- if token -->
+        <label class="button" tertiary for="sidebar-toggle" hide sm:flex aria-label="Open sidebar">
+          <icon menu></icon>
+        </label>
+      <!-- /if -->
+    </crow>
+  </crow>
+
+  <!-- if window.isDev || settings.isTester -->
+    <accordion open="@[settings.devbarOpen]">
+      <accordion-content>
+        <component src="/components/DevBar.html"></component>
+      </accordion-content>
+    </accordion>
+  <!-- /if -->
+</sticky>
+
+<style>
+  [topbar-stay] {
+    min-height: calc(var(--unit) * 12);
+    justify-content: center;
+    z-index: 1;
+  }
+
+  [topbar-stay] > accordion {
+    will-change: grid-template-rows;
+  }
+
+  [topbar] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  [topbar] > crow:last-child > button {
+    height: calc(var(--unit) * 8);
+    width: calc(var(--unit) * 8);
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [logo-link] {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    border-radius: calc(var(--unit) * 0.5);
+    transition: opacity 150ms;
+  }
+
+  [logo-link]:hover {
+    opacity: 0.7;
+  }
+
+  logo {
+    font-size: calc(var(--unit) * 4);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--primary);
+  }
+
+  [logo-mark] {
+    width: calc(var(--unit) * 8);
+    height: calc(var(--unit) * 8);
+    background: var(--primary);
+  }
+
+  version-tag {
+    align-self: center;
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.05em;
+    color: oklch(from var(--primary) l c h / 0.5);
+  }
+
+  [worktree-link] {
+    display: inline-block;
+    max-width: 12ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.05em;
+  }
+
+  season-tag {
+    align-self: center;
+    display: inline-flex;
+    align-items: baseline;
+    gap: calc(var(--unit) * 1.5);
+    padding: calc(var(--unit) * 1) calc(var(--unit) * 2.5);
+    border-radius: calc(var(--unit) * 0.5);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.2);
+    cursor: pointer;
+    transition:
+      background 150ms,
+      box-shadow 150ms;
+  }
+
+  season-tag:hover {
+    background: oklch(from var(--primary) l c h / 0.08);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.4);
+  }
+
+  season-num {
+    font-size: calc(var(--unit) * 3);
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    color: var(--primary);
+  }
+
+  season-flavor {
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.05em;
+    color: var(--muted-foreground);
+  }
+
+  season-seed {
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.05em;
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  season-seed::before {
+    content: '|';
+    margin-right: calc(var(--unit) * 1.5);
+    opacity: 0.5;
+  }
+
+  @media (width <= 768px) {
+    season-tag {
+      display: none;
+    }
+  }
+</style>
diff --git a/components/VendorContent.html b/components/VendorContent.html
new file mode 100644
index 00000000..d82dde9f
--- /dev/null
+++ b/components/VendorContent.html
@@ -0,0 +1,157 @@
+<script type="module">
+  component({ filter: 'oneHand' });
+
+  window.raceTooltip = (races) => `<span capitalize>${races.map((r) => r.title).join(', ')}</span>`;
+</script>
+
+<component
+  src="/components/remote/Table.html"
+  skeleton="@[maxVendorRows - filterVendorItems(this.filter, minLevel).length]"
+>
+  <tr game-table-header>
+    <td>Name</td>
+    <td>Slots in</td>
+    <td>Race</td>
+    <td>Ability</td>
+    <td text-right>Stats</td>
+    <td text-right>Cost</td>
+    <td></td>
+  </tr>
+
+  <!-- each filterVendorItems(this.filter, minLevel) as item, i -->
+    <tr game-table-row even="@[i % 2 === 0]">
+      <td>
+        <vendor-col-name>
+          <eq-name-target
+            onmouseenter="
+              showTooltip(
+                equipmentTooltipProps(EQUIPMENT(item.id, true)),
+                this.querySelector('eq-link') || this,
+                { direction: 'up', lock: true },
+              )
+            "
+            onmouseleave="hideTooltip()"
+          >
+            <component
+              src="/components/EquipmentLink.html"
+              level="@[item.level]"
+              name="@[item.name]"
+              element="@[item.element]"
+            >
+            </component>
+          </eq-name-target>
+        </vendor-col-name>
+      </td>
+      <td><vendor-col-slot text-sm text-muted>@[item.slotLabel]</vendor-col-slot></td>
+      <td>
+        <vendor-col-races>
+          <!-- if item.races.length -->
+            <crow
+              g="1"
+              onmouseenter="
+                showTooltip({ description: raceTooltip(item.races), plain: true }, this, {
+                  direction: 'up',
+                  lock: true,
+                })
+              "
+              onmouseleave="hideTooltip()"
+            >
+              <!-- each item.races as r (r.race) -->
+                <circle
+                  fire="@[r.element === 'fire']"
+                  frost="@[r.element === 'frost']"
+                  earth="@[r.element === 'earth']"
+                  nature="@[r.element === 'nature']"
+                  lightning="@[r.element === 'lightning']"
+                ></circle>
+              <!-- /each -->
+            </crow>
+          <!-- /if -->
+        </vendor-col-races>
+      </td>
+      <td>
+        <vendor-col-ability>
+          <!-- each item.abilityRows as abilityRow, ri -->
+            <crow g="1">
+              <!-- each abilityRow as ability (ability.uuid) -->
+                <component src="/components/AbilityCell.html" ability="@[ability]"></component>
+              <!-- /each -->
+            </crow>
+          <!-- /each -->
+        </vendor-col-ability>
+      </td>
+      <td>
+        <vendor-col-stats text-sm>
+          <!-- each item.stats as stat -->
+            <eq-stat>
+              <component src="/components/IconCell.html" tip="@[{ stat: stat.icon }]">
+                <icon @[stat.icon]></icon>
+              </component>
+              <span
+                text-green="@[stat.percentage && parseFloat(stat.value) >= 0]"
+                text-red="@[parseFloat(stat.value) < 0]"
+                >@[stat.value]</span
+              >
+            </eq-stat>
+          <!-- /each -->
+        </vendor-col-stats>
+      </td>
+      <td>
+        <vendor-col-cost>
+          <crow right g="2">
+            <!-- if item.materials -->
+              <component
+                src="/components/MaterialCost.html"
+                materials="@[item.materials]"
+                minimalistic
+              ></component>
+            <!-- /if -->
+            <component src="/components/Coins.html" amount="@[item.cost]" minimalistic></component>
+          </crow>
+        </vendor-col-cost>
+      </td>
+      <td>
+        <vendor-col-action>
+          <button secondary sm onclick="vendorAcquire(item.id)" disabled="@[!canAcquire(item)]">
+            Acquire
+          </button>
+        </vendor-col-action>
+      </td>
+    </tr>
+  <!-- /each -->
+</component>
+
+<sticky sticky-bar t="23.5" sm:t="12" vendor-stay>
+  <tabs secondary vendor-filters>
+    <!-- if vendorCount('oneHand', minLevel) -->
+      <tab active="@[this.filter === 'oneHand']" onclick="$.this.filter = 'oneHand'">
+        One-Handed <tab-count>@[vendorCount('oneHand', minLevel)]</tab-count>
+      </tab>
+    <!-- /if -->
+    <!-- if vendorCount('offHand', minLevel) -->
+      <tab active="@[this.filter === 'offHand']" onclick="$.this.filter = 'offHand'">
+        Off-Hand <tab-count>@[vendorCount('offHand', minLevel)]</tab-count>
+      </tab>
+    <!-- /if -->
+    <!-- if vendorCount('twoHand', minLevel) -->
+      <tab active="@[this.filter === 'twoHand']" onclick="$.this.filter = 'twoHand'">
+        Two-Handed <tab-count>@[vendorCount('twoHand', minLevel)]</tab-count>
+      </tab>
+    <!-- /if -->
+    <!-- if vendorCount('armor', minLevel) -->
+      <tab active="@[this.filter === 'armor']" onclick="$.this.filter = 'armor'">
+        Armor <tab-count>@[vendorCount('armor', minLevel)]</tab-count>
+      </tab>
+    <!-- /if -->
+    <!-- if vendorCount('accessory', minLevel) -->
+      <tab active="@[this.filter === 'accessory']" onclick="$.this.filter = 'accessory'">
+        Accessory <tab-count>@[vendorCount('accessory', minLevel)]</tab-count>
+      </tab>
+    <!-- /if -->
+    <!-- if vendorCount('trinket', minLevel) -->
+      <tab active="@[this.filter === 'trinket']" onclick="$.this.filter = 'trinket'">
+        Trinket <tab-count>@[vendorCount('trinket', minLevel)]</tab-count>
+      </tab>
+    <!-- /if -->
+  </tabs>
+</sticky>
diff --git a/components/VictoryOrLoss.html b/components/VictoryOrLoss.html
new file mode 100644
index 00000000..b5df4ac7
--- /dev/null
+++ b/components/VictoryOrLoss.html
@@ -0,0 +1,176 @@
+<victory-or-loss
+  position="relative"
+  w="full"
+  victory="@[outcome === 'victory']"
+  defeat="@[outcome === 'defeat']"
+  draw="@[outcome === 'draw']"
+  spectator="@[outcome === 'spectator']"
+>
+  <stack>
+    <!-- if outcome === 'victory' || outcome === 'spectator' -->
+      <victory-halo position="absolute">
+        <halo-inner block animate-spin></halo-inner>
+      </victory-halo>
+    <!-- /if -->
+    <outcome-icon block>
+      <!-- if outcome === 'victory' || outcome === 'spectator' -->
+        <icon victory></icon>
+      <!-- else -->
+        <icon defeat></icon>
+      <!-- /if -->
+    </outcome-icon>
+    <outcome-label>
+      <!-- if outcome === 'victory' || outcome === 'spectator' -->VICTORY<!-- /if -->
+      <!-- if outcome === 'defeat' -->DEFEAT<!-- /if -->
+      <!-- if outcome === 'draw' -->DRAW<!-- /if -->
+    </outcome-label>
+    <!-- if outcome === 'spectator' -->
+      <team-name>
+        <component
+          src="/components/TeamBadge.html"
+          name="@[label]"
+          color="@[teamColor]"
+        ></component>
+      </team-name>
+    <!-- /if -->
+  </stack>
+</victory-or-loss>
+
+<style>
+  victory-halo {
+    pointer-events: none;
+    width: 200%;
+    aspect-ratio: 1 / 1;
+  }
+
+  halo-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    opacity: 0.25;
+    animation-duration: 10000ms;
+    background: repeating-conic-gradient(
+      from 0deg at 50% 50%,
+      transparent 0deg 10deg,
+      var(--hue-yellow) 15deg 25deg,
+      transparent 30deg 45deg
+    );
+    -webkit-mask: radial-gradient(circle at 50% 50%, black 0%, transparent 50%);
+    mask: radial-gradient(circle at 50% 50%, black 0%, transparent 50%);
+  }
+
+  outcome-icon {
+    font-size: calc(var(--unit) * 20);
+    line-height: 1;
+  }
+
+  outcome-icon icon {
+    font-size: calc(var(--unit) * 24);
+    --color: var(--muted);
+  }
+
+  victory-or-loss[victory] outcome-icon icon,
+  victory-or-loss[spectator] outcome-icon icon {
+    background:
+      radial-gradient(
+        ellipse farthest-corner at right bottom,
+        var(--gold-shine) 0%,
+        var(--gold-warm) 15%,
+        var(--gold-deep) 45%,
+        var(--gold-shadow) 65%,
+        transparent 90%
+      ),
+      radial-gradient(
+        ellipse farthest-corner at left top,
+        var(--white) 0%,
+        var(--gold-shine) 12%,
+        var(--gold-warm) 35%,
+        var(--gold-shadow) 75%,
+        var(--gold-shadow) 100%
+      );
+  }
+
+  outcome-label {
+    isolation: isolate;
+    font-family: var(--font-accent, var(--font-heading, sans-serif));
+    font-size: calc(var(--unit) * 10);
+    letter-spacing: 0.05em;
+    color: var(--scrim-1);
+    -webkit-text-stroke: 1px var(--muted);
+    text-shadow: 0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) var(--scrim-2);
+  }
+
+  victory-or-loss[victory] outcome-label,
+  victory-or-loss[spectator] outcome-label {
+    color: oklch(from var(--hue-yellow) calc(l + 0.15) calc(c * 0.4) h);
+    -webkit-text-stroke: 1px var(--hue-yellow);
+  }
+
+  victory-or-loss[defeat] {
+    --outcome-glow: oklch(from var(--white) l c h / 0.5);
+  }
+
+  victory-or-loss[draw] {
+    --outcome-glow: oklch(from var(--white) calc(l - 0.1) c h / 0.45);
+  }
+
+  victory-or-loss[defeat] outcome-icon icon,
+  victory-or-loss[draw] outcome-icon icon {
+    filter: drop-shadow(0 0 calc(var(--unit) * 2) var(--outcome-glow));
+  }
+
+  victory-or-loss[defeat] outcome-icon icon {
+    background:
+      radial-gradient(
+        ellipse farthest-corner at right bottom,
+        var(--white) 0%,
+        oklch(from var(--white) calc(l - 0.08) c h) 30%,
+        oklch(from var(--white) calc(l - 0.3) c h) 75%,
+        transparent 92%
+      ),
+      radial-gradient(
+        ellipse farthest-corner at left top,
+        var(--white) 0%,
+        oklch(from var(--white) calc(l - 0.05) c h) 40%,
+        oklch(from var(--white) calc(l - 0.35) c h) 100%
+      );
+  }
+
+  victory-or-loss[defeat] outcome-label {
+    color: var(--white);
+    -webkit-text-stroke: 1px var(--scrim-2);
+  }
+
+  victory-or-loss[draw] outcome-icon icon {
+    background:
+      radial-gradient(
+        ellipse farthest-corner at right bottom,
+        oklch(from var(--white) calc(l - 0.05) c h) 0%,
+        oklch(from var(--white) calc(l - 0.15) c h) 30%,
+        oklch(from var(--white) calc(l - 0.4) c h) 75%,
+        transparent 92%
+      ),
+      radial-gradient(
+        ellipse farthest-corner at left top,
+        oklch(from var(--white) calc(l - 0.03) c h) 0%,
+        oklch(from var(--white) calc(l - 0.12) c h) 40%,
+        oklch(from var(--white) calc(l - 0.45) c h) 100%
+      );
+  }
+
+  victory-or-loss[draw] outcome-label {
+    color: oklch(from var(--white) calc(l - 0.12) c h);
+    -webkit-text-stroke: 1px var(--scrim-2);
+  }
+
+  victory-or-loss[spectator] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  victory-or-loss[spectator] team-name {
+    align-self: center;
+    transform: translateY(calc(var(--unit) * 11));
+  }
+</style>
diff --git a/components/buttons/Cross.html b/components/buttons/Cross.html
new file mode 100644
index 00000000..6d9da9fe
--- /dev/null
+++ b/components/buttons/Cross.html
@@ -0,0 +1,16 @@
+<button cross-button primary sm onclick="@[onclick]" aria-label="@[label]">
+  <icon cross></icon>
+</button>
+
+<style>
+  [cross-button] {
+    background-color: oklch(from var(--destructive) l c h / 0.12);
+    color: oklch(from var(--destructive) calc(l - 0.2 * var(--theme-sign)) c h);
+    box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.2);
+  }
+
+  [cross-button]:not(:disabled):hover {
+    background-color: oklch(from var(--destructive) l c h / 0.2);
+    box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.3);
+  }
+</style>
diff --git a/components/buttons/DropdownButton.html b/components/buttons/DropdownButton.html
new file mode 100644
index 00000000..2389e80c
--- /dev/null
+++ b/components/buttons/DropdownButton.html
@@ -0,0 +1,6 @@
+<button g="3" sm secondary sm="@[sm]" onclick="@[onclick]">
+  <icon chevron animate-y toggled="@[flip]"></icon>
+  <!-- if text -->
+    <span sm:hide>@[text]</span>
+  <!-- /if -->
+</button>
diff --git a/components/buttons/OverlayClose.html b/components/buttons/OverlayClose.html
new file mode 100644
index 00000000..a88fd9b2
--- /dev/null
+++ b/components/buttons/OverlayClose.html
@@ -0,0 +1,31 @@
+<button overlay-close onclick="@[onclick]" aria-label="Close">
+  <icon cross></icon>
+</button>
+
+<style>
+  [overlay-close] {
+    position: absolute;
+    top: calc(var(--unit) * 4);
+    right: calc(var(--unit) * 4);
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--unit) * 10);
+    height: calc(var(--unit) * 10);
+    padding: 0;
+    background: rgb(0 0 0 / 0.8);
+    color: var(--hue-red);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 200ms ease;
+  }
+
+  [overlay-close]:hover {
+    background: rgb(0 0 0 / 0.95);
+  }
+
+  [overlay-close] icon {
+    font-size: calc(var(--unit) * 4.5);
+  }
+</style>
diff --git a/components/buttons/PhysicalButton.html b/components/buttons/PhysicalButton.html
new file mode 100644
index 00000000..e6d4a5c9
--- /dev/null
+++ b/components/buttons/PhysicalButton.html
@@ -0,0 +1,37 @@
+<button
+  physical-button
+  golden-btn
+  silver="@[silver]"
+  sm="@[sm]"
+  disabled="@[disabled]"
+  onclick="@[onclick]"
+>
+  @[label]
+</button>
+
+<style>
+  /* The gold state IS the shared golden-btn face (css/index.css) — chamfered, minted
+     gold. The silver state keeps the same type and heft but drops the gradient for a
+     solid silver and takes a shallower chamfer (sharp edges like the gold, less deep),
+     with no drop shadow — for the neutral Retreat / Leave actions. */
+  [physical-button][silver] {
+    border: none;
+    clip-path: polygon(
+      calc(var(--unit) * 1.25) 0,
+      calc(100% - var(--unit) * 1.25) 0,
+      100% calc(var(--unit) * 1.25),
+      100% calc(100% - var(--unit) * 1.25),
+      calc(100% - var(--unit) * 1.25) 100%,
+      calc(var(--unit) * 1.25) 100%,
+      0 calc(100% - var(--unit) * 1.25),
+      0 calc(var(--unit) * 1.25)
+    );
+    color: oklch(0.3 0.005 255);
+    text-shadow: 0 1px 0 oklch(0.94 0.004 255 / 0.5);
+    background: oklch(0.75 0.006 255);
+    box-shadow:
+      inset 0 1px 0 oklch(0.94 0.005 255 / 0.85),
+      inset 0 -2px 3px oklch(0.46 0.008 255 / 0.4);
+    filter: none;
+  }
+</style>
diff --git a/components/remote/AchievementReveal.html b/components/remote/AchievementReveal.html
new file mode 100644
index 00000000..2d0f4357
--- /dev/null
+++ b/components/remote/AchievementReveal.html
@@ -0,0 +1,102 @@
+<achievement-reveal-root open="@[achievementReveals.length]">
+  <achievement-reveal-stack>
+    <!-- each achievementReveals as r (r.id) -->
+      <achievement-reveal-card
+        onclick="followAchievementReveal(r.id)"
+        onanimationend="event.animationName === 'revealFade' && dismissAchievementReveal(r.id)"
+      >
+        <reveal-eyebrow>Achievement unlocked</reveal-eyebrow>
+        <achievement-card royal>
+          <ac-corner tl></ac-corner>
+          <ac-corner tr></ac-corner>
+          <ac-corner bl></ac-corner>
+          <ac-corner br></ac-corner>
+          <ac-icon><icon @[r.icon]></icon></ac-icon>
+          <ac-body>
+            <ac-eyebrow>Earned</ac-eyebrow>
+            <ac-title>@[r.title]</ac-title>
+            <ac-desc>@[r.description]</ac-desc>
+          </ac-body>
+        </achievement-card>
+        <reveal-hint>Tap to view it in your achievements</reveal-hint>
+      </achievement-reveal-card>
+    <!-- /each -->
+  </achievement-reveal-stack>
+</achievement-reveal-root>
+
+<style>
+  achievement-reveal-root {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-cutscene, 60);
+    pointer-events: none;
+  }
+
+  achievement-reveal-root:not([open]) {
+    display: none;
+  }
+
+  achievement-reveal-stack {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+
+  achievement-reveal-card {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--unit) * 3);
+    padding: calc(var(--unit) * 6);
+    pointer-events: none;
+    cursor: pointer;
+    background: radial-gradient(ellipse at center, oklch(0 0 0 / 0.55), transparent 70%);
+    animation:
+      revealPop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
+      revealFade 480ms ease 2000ms forwards;
+  }
+
+  achievement-reveal-card > * {
+    pointer-events: auto;
+  }
+
+  achievement-reveal-card:not(:last-child) {
+    filter: brightness(0.7);
+  }
+
+  reveal-eyebrow {
+    font-family: var(--font-sans);
+    font-size: calc(var(--unit) * 4);
+    font-weight: 600;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+    color: oklch(from var(--gold-warm) calc(l + 0.08) c h);
+    text-shadow: 0 calc(var(--unit) * 0.5) calc(var(--unit) * 1.5) oklch(0 0 0 / 0.7);
+  }
+
+  reveal-hint {
+    font-size: calc(var(--unit) * 3.75);
+    color: oklch(0.95 0.015 85);
+  }
+
+  @keyframes revealPop {
+    from {
+      transform: scale(0.85);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes revealFade {
+    to {
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/components/remote/BarGraph.html b/components/remote/BarGraph.html
new file mode 100644
index 00000000..a0a2b996
--- /dev/null
+++ b/components/remote/BarGraph.html
@@ -0,0 +1,60 @@
+<script type="module">
+  const escape = (text) =>
+    String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+
+  // Horizontal bars sorted by the caller. Each bar carries its own colour, hover
+  // label and right-side note; width is value relative to the largest value.
+  window.barGraphSvg = (bars = []) => {
+    const W = 1000;
+    const ROW = 28;
+    const L = 220;
+    const R = 200;
+    const T = 8;
+    const H = T + bars.length * ROW + 8;
+    const max = Math.max(...bars.map((b) => b.value), 0.0001);
+    return (
+      `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">` +
+      bars
+        .map((bar, i) => {
+          const yMid = T + i * ROW + ROW / 2;
+          const width = (bar.value / max) * (W - L - R);
+          return (
+            `<text x="${L - 10}" y="${yMid + 5}" text-anchor="end" fill="var(--foreground)" font-size="15">${escape(bar.name)}</text>` +
+            `<rect x="${L}" y="${yMid - 9}" width="${Math.max(width, 2)}" height="18" rx="4" fill="${bar.color}" data-label="${escape(bar.label)}" />` +
+            `<text x="${L + Math.max(width, 2) + 10}" y="${yMid + 5}" fill="var(--muted-foreground)" font-size="14">${escape(bar.note)}</text>`
+          );
+        })
+        .join('') +
+      '</svg>'
+    );
+  };
+
+  window.chartDotHover = (event) => {
+    const label = event.target.dataset?.label;
+    if (label)
+      showTooltip({ description: label, plain: true }, event.target, {
+        direction: 'up',
+        lock: true,
+      });
+  };
+  window.chartDotOut = (event) => {
+    if (event.target.dataset?.label) hideTooltip();
+  };
+</script>
+
+<bar-graph onmouseover="chartDotHover(event)" onmouseout="chartDotOut(event)">
+  @[$.unsafe(barGraphSvg(bars))]
+</bar-graph>
+
+<style>
+  bar-graph {
+    display: block;
+    width: 100%;
+  }
+
+  bar-graph svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+</style>
diff --git a/components/remote/BoxRange.html b/components/remote/BoxRange.html
new file mode 100644
index 00000000..a9ec325a
--- /dev/null
+++ b/components/remote/BoxRange.html
@@ -0,0 +1,76 @@
+<script type="module">
+  window.boxRangeCells = (min, max) =>
+    Array.from({ length: Number(max) - Number(min) + 1 }, (_, i) => Number(min) + i);
+</script>
+
+<box-range>
+  <!-- each boxRangeCells(min, max) as n (n) -->
+    <box-cell filled="@[n <= value]" onclick="@[onchange](n)">@[n]</box-cell>
+  <!-- /each -->
+</box-range>
+
+<style>
+  box-range {
+    --active: var(--border);
+    --inactive: transparent;
+    --gap: calc(var(--unit) * 2);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+  }
+
+  box-cell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--unit) * 9);
+    aspect-ratio: 1 / 1;
+    border-radius: calc(var(--unit) * 0.75);
+    background: var(--input);
+    box-shadow: inset 0 0 0 1px var(--inactive);
+    font-family: var(--font-heading);
+    font-size: calc(var(--unit) * 4.75);
+    line-height: 1;
+    color: transparent;
+    cursor: pointer;
+    transition:
+      box-shadow 120ms ease,
+      color 120ms ease;
+  }
+
+  /* Bridge the gap to the preceding box so dragging across it never leaves every
+     box un-hovered (which would blink the trail off). Each box extends its hover
+     area left over the gap; the first box has no gap before it. */
+  box-cell:not(:first-child)::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 100%;
+    width: var(--gap);
+  }
+
+  /* Exactly two border colors: active for the selection and the hover trail,
+     inactive for everything else. */
+  box-cell[filled],
+  box-cell:hover,
+  box-cell:has(~ box-cell:hover) {
+    box-shadow: inset 0 0 0 1px var(--active);
+  }
+
+  /* Only one number shows: the value box at rest, the hovered box while hovering.
+     --card-foreground is the same token Stylecheat's form controls resolve to, so
+     the number matches the modal's inputs rather than the app's darker --foreground. */
+  box-cell[filled]:not(:has(~ box-cell[filled])) {
+    color: var(--card-foreground);
+  }
+
+  box-range:has(box-cell:hover) box-cell:not(:hover) {
+    color: transparent;
+  }
+
+  box-cell:hover {
+    color: var(--card-foreground);
+  }
+</style>
diff --git a/components/remote/CardHand.html b/components/remote/CardHand.html
new file mode 100644
index 00000000..c3423f7a
--- /dev/null
+++ b/components/remote/CardHand.html
@@ -0,0 +1,130 @@
+<card-hand flipped="@[flipped]" dim-unselected="@[dimUnselected]">
+  <card-fan style="--angle: @[angle]deg; --distance: @[distance]px; --size: @[size]px">
+    <!-- each cards as card (card.id), i -->
+      <card-slot
+        data-card-id="@[card.id]"
+        selected="@[card.selected]"
+        style="--i: @[i]; --n: @[cards.length]"
+      >
+        <card-disc>
+          <component
+            src="/components/Mugshot.html"
+            image="@[card.image]"
+            x="@[card.x]"
+            y="@[card.y]"
+            zoom="@[zoom || 5]"
+            name="@[card.name]"
+          >
+          </component>
+        </card-disc>
+      </card-slot>
+    <!-- /each -->
+  </card-fan>
+</card-hand>
+
+<style>
+  card-hand {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  card-fan {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  card-slot {
+    pointer-events: auto;
+    --rot: calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * var(--angle, 8deg));
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: var(--size, 110px);
+    height: var(--size, 110px);
+    transform-origin: 50% calc(50% + var(--distance, 320px));
+    transform: translate(-50%, -50%) rotate(var(--rot));
+    transition: transform 350ms cubic-bezier(0.02, 1.35, 0.53, 1);
+    animation: card-deal 350ms cubic-bezier(0.02, 1.35, 0.53, 1) both;
+  }
+
+  card-disc {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--card);
+    box-shadow:
+      inset 0 0 0 calc(var(--unit) * 0.75) var(--sheen-2),
+      inset 0 0 0 1px var(--scrim-3),
+      0 calc(var(--unit) * 1.5) calc(var(--unit) * 3) calc(var(--unit) * -0.5) var(--scrim-2);
+    transform: rotate(calc(-1 * var(--rot)));
+    transition:
+      transform 160ms cubic-bezier(0.34, 1.45, 0.6, 1),
+      box-shadow 160ms ease,
+      filter 250ms ease,
+      opacity 250ms ease;
+  }
+
+  card-hand:not([flipped]) card-disc {
+    cursor: pointer;
+  }
+
+  card-hand:not([flipped]) card-slot:hover {
+    z-index: 1;
+  }
+
+  card-hand:not([flipped]) card-disc:hover {
+    transform: rotate(calc(-1 * var(--rot))) scale(1.22);
+    box-shadow:
+      inset 0 0 0 calc(var(--unit) * 0.75) var(--sheen-1),
+      inset 0 0 0 calc(var(--unit) * 0.5) var(--gold-deep),
+      0 calc(var(--unit) * 2.5) calc(var(--unit) * 5) calc(var(--unit) * -1) var(--scrim-3),
+      0 0 0 calc(var(--unit) * 0.75) oklch(from var(--gold-warm) l c h / 0.55);
+  }
+
+  card-hand:not([flipped]) card-disc:active {
+    transform: rotate(calc(-1 * var(--rot))) scale(1.08);
+    transition-duration: 60ms;
+  }
+
+  card-hand[flipped] card-disc {
+    filter: grayscale(0.85);
+    opacity: 0.5;
+  }
+
+  card-hand[dim-unselected] card-slot:not([selected]) card-disc {
+    filter: grayscale(0.85);
+    opacity: 0.5;
+  }
+
+  card-slot[selected] card-disc {
+    transform: rotate(calc(-1 * var(--rot))) scale(1.22);
+    box-shadow:
+      inset 0 0 0 calc(var(--unit) * 0.75) var(--sheen-1),
+      inset 0 0 0 calc(var(--unit) * 0.5) var(--gold-deep),
+      0 calc(var(--unit) * 2.5) calc(var(--unit) * 5) calc(var(--unit) * -1) var(--scrim-3),
+      0 0 0 calc(var(--unit) * 0.75) oklch(from var(--gold-warm) l c h / 0.55);
+  }
+
+  @keyframes card-deal {
+    from {
+      opacity: 0;
+      scale: 0.6;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    card-slot {
+      animation: none;
+      transition: none;
+    }
+  }
+</style>
diff --git a/components/remote/DataInspector.html b/components/remote/DataInspector.html
new file mode 100644
index 00000000..ff5b62c6
--- /dev/null
+++ b/components/remote/DataInspector.html
@@ -0,0 +1,388 @@
+<script type="module">
+  import component from '/node_modules/@ape-egg/vibe/component.js';
+
+  const STORAGE_KEY = 'dataInspectorOpenPaths';
+  let initialOpen = {};
+  try {
+    const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+    if (raw && typeof raw === 'object' && !Array.isArray(raw)) initialOpen = raw;
+    else if (Array.isArray(raw)) initialOpen = raw.reduce((acc, p) => ((acc[p] = true), acc), {});
+  } catch {}
+
+  const s = $[component({ openPaths: initialOpen })];
+
+  const persistOpenPaths = () => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(s.openPaths));
+    } catch {}
+  };
+
+  const isOpen = (path) => !!s.openPaths[path];
+
+  const setOpenPaths = (next) => {
+    s.openPaths = next;
+    persistOpenPaths();
+  };
+
+  const isObject = (v) => v !== null && typeof v === 'object';
+
+  const summarize = (v) => {
+    if (v === null) return 'null';
+    if (v === undefined) return 'undefined';
+    if (typeof v === 'function') return '[Function]';
+    if (typeof v !== 'object') return String(v);
+    if (Array.isArray(v)) return `[${v.length}]`;
+    return `{${Object.keys(v).length}}`;
+  };
+
+  // Sort: primitives first, objects/arrays next, underscore-prefixed last.
+  // Within each rank, alphabetical by key.
+  const getSortRank = (key, val) => {
+    if (key.startsWith('_')) return 2;
+    if (!isObject(val)) return 0;
+    return 1;
+  };
+
+  const sortedEntries = (obj) =>
+    Object.entries(obj).sort(([aK, aV], [bK, bV]) => {
+      const aR = getSortRank(aK, aV);
+      const bR = getSortRank(bK, bV);
+      if (aR !== bR) return aR - bR;
+      return aK.localeCompare(bK, undefined, { numeric: true });
+    });
+
+  const childPath = (parentPath, indexOrKey) =>
+    parentPath ? `${parentPath}/${indexOrKey}` : `${indexOrKey}`;
+
+  const buildHiddenKeyCheck = () => {
+    const root = document.querySelector('state-inspector');
+    const componentKeys = new Set();
+    if (root) {
+      root.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
+        const id = el.getAttribute('data-vibe-component-id');
+        if (id) componentKeys.add(id);
+      });
+    }
+    return (key) =>
+      key === 'vibeStateInspector' ||
+      key === 'vibeStateInspectorEverOpened' ||
+      componentKeys.has(key);
+  };
+
+  // Single-slot memo. Vibe evaluates the each/title/button bindings up to 4×
+  // per reactive tick (affected old+new, updateIteration old+new). All four
+  // calls share the same `data` reference inside their respective state, so
+  // memoizing on identity collapses three full-tree walks into one per state.
+  let cache = null;
+
+  const computeInspectorState = (data, opens) => {
+    if (cache && cache.data === data && cache.opens === opens) return cache;
+
+    const safeOpens = opens && typeof opens === 'object' ? opens : {};
+    const empty = {
+      data,
+      opens,
+      rows: [],
+      shallowCount: 0,
+      totalCount: 0,
+      allOpenLabel: 'Open all',
+    };
+    if (!data || typeof data !== 'object') {
+      cache = empty;
+      return cache;
+    }
+
+    const isHiddenKey = buildHiddenKeyCheck();
+    const rows = [];
+    let totalCount = 0;
+    let hasExpandable = false;
+    let allOpen = true;
+    const ancestors = new Set();
+
+    const walk = (value, depth, path, key, visible) => {
+      const expandable = isObject(value);
+      const open = expandable && !!safeOpens[path];
+
+      rows.push({ path, key, depth, expandable, open, visible, summary: summarize(value) });
+
+      if (!expandable) {
+        totalCount++;
+        return;
+      }
+
+      hasExpandable = true;
+      if (!open) allOpen = false;
+
+      if (ancestors.has(value)) return;
+      ancestors.add(value);
+
+      const childVisible = visible && open;
+
+      if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+          walk(value[i], depth + 1, childPath(path, i), `#${i + 1}`, childVisible);
+        }
+      } else {
+        const entries = sortedEntries(value);
+        for (let n = 0; n < entries.length; n++) {
+          walk(
+            entries[n][1],
+            depth + 1,
+            childPath(path, entries[n][0]),
+            entries[n][0],
+            childVisible,
+          );
+        }
+      }
+      ancestors.delete(value);
+    };
+
+    const rootEntries = sortedEntries(data).filter(([k]) => !isHiddenKey(k));
+    for (let n = 0; n < rootEntries.length; n++) {
+      walk(rootEntries[n][1], 0, rootEntries[n][0], rootEntries[n][0], true);
+    }
+
+    cache = {
+      data,
+      opens,
+      rows,
+      shallowCount: rootEntries.length,
+      totalCount,
+      allOpenLabel: hasExpandable && allOpen ? 'Close all' : 'Open all',
+    };
+    return cache;
+  };
+
+  window.dataInspectorState = computeInspectorState;
+
+  // Click handlers walk the live state directly — alt-click expansion needs
+  // to reach into branches that aren't currently visible.
+  const collectExpandablePaths = (data) => {
+    const paths = [];
+    const ancestors = new Set();
+    const isHiddenKey = buildHiddenKeyCheck();
+    const visit = (value, path) => {
+      if (!isObject(value) || ancestors.has(value)) return;
+      if (path) paths.push(path);
+      ancestors.add(value);
+      if (Array.isArray(value)) {
+        value.forEach((item, i) => visit(item, childPath(path, i)));
+      } else {
+        Object.entries(value).forEach(([k, v]) => visit(v, childPath(path, k)));
+      }
+      ancestors.delete(value);
+    };
+    Object.keys(data || {}).forEach((k) => {
+      if (isHiddenKey(k)) return;
+      visit(data[k], k);
+    });
+    return paths;
+  };
+
+  window.toggleInspectorPath = (e, row) => {
+    if (!row?.expandable) return;
+    const path = row.path;
+    if (!path) return;
+    const nextOpen = !isOpen(path);
+    const next = { ...s.openPaths };
+    if (nextOpen) next[path] = true;
+    else delete next[path];
+
+    if (e.altKey) {
+      collectExpandablePaths(window.$).forEach((p) => {
+        if (!p.startsWith(`${path}/`)) return;
+        if (nextOpen) next[p] = true;
+        else delete next[p];
+      });
+    }
+
+    setOpenPaths(next);
+  };
+
+  window.toggleInspectorAll = () => {
+    const all = collectExpandablePaths(window.$);
+    const everythingOpen = all.length > 0 && all.every(isOpen);
+    if (everythingOpen) {
+      setOpenPaths({});
+    } else {
+      const next = { ...s.openPaths };
+      all.forEach((p) => {
+        next[p] = true;
+      });
+      setOpenPaths(next);
+    }
+  };
+
+  window.copyDataInspectorJson = () => {
+    try {
+      navigator.clipboard?.writeText(JSON.stringify(window.$, null, 2));
+    } catch {}
+  };
+</script>
+
+<data-inspector>
+  <data-inspector-header>
+    <data-inspector-title>
+      Vibe state (@[dataInspectorState(data, this.openPaths).shallowCount] |
+      @[dataInspectorState(data, this.openPaths).totalCount])
+    </data-inspector-title>
+    <data-inspector-actions>
+      <button onclick="toggleInspectorAll()">
+        @[dataInspectorState(data, this.openPaths).allOpenLabel]
+      </button>
+      <button onclick="copyDataInspectorJson()">Copy JSON</button>
+    </data-inspector-actions>
+  </data-inspector-header>
+  <data-inspector-lines>
+    <!-- each dataInspectorState(data, this.openPaths).rows as row (row.path) -->
+    <accordion open="@[row.visible]">
+      <accordion-content>
+        <data-inspector-row
+          expandable="@[row.expandable]"
+          open="@[row.open]"
+          onclick="toggleInspectorPath(event, row)"
+        >
+          <data-inspector-key style="padding-left: calc(@[row.depth] * 1ch)">
+            @[row.key]
+          </data-inspector-key>
+          <data-inspector-value bracket="@[row.expandable]">@[row.summary]</data-inspector-value>
+        </data-inspector-row>
+      </accordion-content>
+    </accordion>
+    <!-- /each -->
+  </data-inspector-lines>
+</data-inspector>
+
+<style>
+  data-inspector {
+    --inspector-bg: #1e1e1e;
+    --inspector-header-bg: #252526;
+    --inspector-border: #3c3c3c;
+    --inspector-divider: #424242;
+    --inspector-divider-strong: #505050;
+    --inspector-text: #d4d4d4;
+    --inspector-text-muted: #969696;
+    --inspector-row-hover: #2a2d2e;
+    --inspector-key: #9cdcfe;
+    --inspector-bracket: #569cd6;
+    --inspector-string: #ce9178;
+
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    font-size: calc(var(--unit) * 3);
+    background: var(--inspector-bg);
+    color: var(--inspector-text);
+    font-family:
+      'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  }
+
+  data-inspector-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--unit) * 4);
+    padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
+    background: var(--inspector-header-bg);
+    border-bottom: 1px solid var(--inspector-border);
+  }
+
+  data-inspector-title {
+    font-weight: 500;
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--inspector-text-muted);
+  }
+
+  data-inspector-actions {
+    display: flex;
+    gap: calc(var(--unit) * 1);
+  }
+
+  data-inspector-actions button {
+    height: calc(var(--unit) * 6);
+    padding: 0 calc(var(--unit) * 2);
+    font-family: inherit;
+    font-size: calc(var(--unit) * 3);
+    color: var(--inspector-text-muted);
+    background: transparent;
+    border: 1px solid var(--inspector-border);
+    border-radius: calc(var(--unit) * 1);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  data-inspector-actions button:hover {
+    color: var(--inspector-text);
+    background: var(--inspector-row-hover);
+    border-color: var(--inspector-divider-strong);
+  }
+
+  data-inspector-lines {
+    --scrollbar-width: calc(var(--unit) * 4);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    margin-right: calc(var(--scrollbar-width) * -1);
+    line-height: 1.5;
+    scrollbar-color: var(--inspector-divider) transparent;
+  }
+
+  data-inspector-lines::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+  }
+
+  data-inspector-lines::-webkit-scrollbar-thumb {
+    background: var(--inspector-divider);
+    border-radius: calc(var(--unit) * 1);
+  }
+
+  data-inspector-lines::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  data-inspector-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    gap: calc(var(--unit) * 2);
+    padding: calc(var(--unit) * 0.5) calc(var(--unit) * 3);
+    box-sizing: border-box;
+  }
+
+  data-inspector-row:hover {
+    background: var(--inspector-row-hover);
+  }
+
+  data-inspector-row[expandable] {
+    cursor: pointer;
+  }
+
+  data-inspector-key {
+    display: inline-block;
+    flex-shrink: 0;
+    color: var(--inspector-key);
+  }
+
+  data-inspector-value {
+    flex: 1;
+    min-width: 0;
+    text-align: right;
+    word-break: break-word;
+    white-space: normal;
+    color: var(--inspector-string);
+  }
+
+  data-inspector-value[bracket] {
+    color: var(--inspector-bracket);
+  }
+</style>
diff --git a/components/remote/LineGraph.html b/components/remote/LineGraph.html
new file mode 100644
index 00000000..279278f8
--- /dev/null
+++ b/components/remote/LineGraph.html
@@ -0,0 +1,142 @@
+<script type="module">
+  const escape = (text) =>
+    String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+
+  const niceCeil = (value) => {
+    const power = 10 ** Math.floor(Math.log10(value || 1));
+    return ([1, 2, 2.5, 5, 10].find((candidate) => candidate * power >= value) || 10) * power;
+  };
+
+  const seriesColor = (i, count) =>
+    `oklch(0.55 0.16 ${Math.round((i * 360) / Math.max(count, 1))})`;
+
+  // Colour by explicit group when a series carries one (so paired lines — a fight's
+  // base and its modified twin — share a hue), else by position.
+  const grouped = (series) => series.some((s) => s.group != null);
+  const colorOf = (series, s, i) =>
+    grouped(series)
+      ? seriesColor(s.group ?? i, Math.max(...series.map((x) => x.group ?? 0)) + 1)
+      : seriesColor(i, series.length);
+
+  // One shared line-chart renderer: x is the value index (level 1..n), series carry
+  // their own values. Rendered to an SVG string and injected with $.unsafe — string
+  // SVG keeps the namespace correct and stays out of Vibe's iteration path.
+  window.lineGraphSvg = (series = [], percent) => {
+    const W = 1000;
+    const H = 460;
+    const L = 76;
+    const R = 24;
+    const T = 20;
+    const B = 48;
+    const n = Math.max(...series.map((s) => s.values.length), 2);
+    const maxY = niceCeil(Math.max(...series.flatMap((s) => s.values), 0.0001));
+    const x = (i) => L + (i / (n - 1)) * (W - L - R);
+    const y = (value) => T + (1 - value / maxY) * (H - T - B);
+    const fmt = (value) =>
+      percent ? `${Math.round(value * 100)}%` : `${Math.round(value * 100) / 100}`;
+
+    const grid = Array.from({ length: 5 }, (_, i) => {
+      const value = (maxY / 4) * i;
+      return (
+        `<line x1="${L}" y1="${y(value)}" x2="${W - R}" y2="${y(value)}" stroke="var(--scrim-1)" />` +
+        `<text x="${L - 10}" y="${y(value) + 5}" text-anchor="end" fill="var(--muted-foreground)" font-size="15">${fmt(value)}</text>`
+      );
+    }).join('');
+
+    const xAxis = [1, ...Array.from({ length: Math.floor(n / 5) }, (_, i) => (i + 1) * 5)]
+      .filter((level) => level <= n)
+      .map(
+        (level) =>
+          `<line x1="${x(level - 1)}" y1="${T}" x2="${x(level - 1)}" y2="${H - B}" stroke="var(--scrim-1)" />` +
+          `<text x="${x(level - 1)}" y="${H - B + 24}" text-anchor="middle" fill="var(--muted-foreground)" font-size="15">${level}</text>`,
+      )
+      .join('');
+
+    const lines = series
+      .map((s, si) => {
+        const color = colorOf(series, s, si);
+        // Fight-modified lines mark their dots with a border to set them apart from
+        // the plain scaling line they share a colour with.
+        const stroke = s.border ? ' stroke="var(--foreground)" stroke-width="1"' : '';
+        const points = s.values.map((value, i) => `${x(i)},${y(value)}`).join(' ');
+        const dots = s.values
+          .map(
+            (value, i) =>
+              `<circle cx="${x(i)}" cy="${y(value)}" r="5" fill="${color}"${stroke} data-label="${escape(`${s.name} — level ${i + 1}: ${fmt(value)}`)}" />`,
+          )
+          .join('');
+        return `<polyline points="${points}" fill="none" stroke="${color}" stroke-width="2.5" />${dots}`;
+      })
+      .join('');
+
+    return `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">${grid}${xAxis}${lines}</svg>`;
+  };
+
+  // Legend rendered as one SVG string (flow-layout left to right, wrapping), same
+  // colour assignment and injection mechanism as the chart.
+  window.lineGraphLegend = (series = []) => {
+    const W = 1000;
+    const ROW = 26;
+    const CHAR = 7.5;
+    let x = 0;
+    let row = 0;
+    const items = series.map((s, si) => {
+      const { name } = s;
+      const color = colorOf(series, s, si);
+      const stroke = s.border ? ' stroke="var(--foreground)" stroke-width="1"' : '';
+      const width = 14 + 6 + name.length * CHAR + 26;
+      if (x + width > W) {
+        x = 0;
+        row += 1;
+      }
+      const item =
+        `<rect x="${x}" y="${row * ROW + 6}" width="14" height="14" rx="4" fill="${color}"${stroke} />` +
+        `<text x="${x + 20}" y="${row * ROW + 18}" fill="var(--foreground)" font-size="14">${escape(name)}</text>`;
+      x += width;
+      return item;
+    });
+    const H = (row + 1) * ROW;
+    return `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">${items.join('')}</svg>`;
+  };
+
+  window.chartDotHover = (event) => {
+    const label = event.target.dataset?.label;
+    if (label)
+      showTooltip({ description: label, plain: true }, event.target, {
+        direction: 'up',
+        lock: true,
+      });
+  };
+  window.chartDotOut = (event) => {
+    if (event.target.dataset?.label) hideTooltip();
+  };
+</script>
+
+<line-graph>
+  <line-graph-legend>@[$.unsafe(lineGraphLegend(series))]</line-graph-legend>
+  <line-graph-chart onmouseover="chartDotHover(event)" onmouseout="chartDotOut(event)">
+    @[$.unsafe(lineGraphSvg(series, percent))]
+  </line-graph-chart>
+</line-graph>
+
+<style>
+  line-graph {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 3);
+    width: 100%;
+  }
+
+  line-graph-legend,
+  line-graph-chart {
+    display: block;
+    width: 100%;
+  }
+
+  line-graph-legend svg,
+  line-graph-chart svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+</style>
diff --git a/components/remote/Notifications.html b/components/remote/Notifications.html
new file mode 100644
index 00000000..dc22fee1
--- /dev/null
+++ b/components/remote/Notifications.html
@@ -0,0 +1,640 @@
+<script type="module">
+  import component from '/node_modules/@ape-egg/vibe/component.js';
+  component({});
+
+  const DEFAULT_DURATION = 4000;
+  const GAP = 14;
+  const VISIBLE = 3;
+  const SCALE_STEP = 0.05;
+  const SWIPE_THRESHOLD = 60;
+
+  let nextId = 0;
+  const timers = new Map();
+  const leaving = new Set();
+  let paused = false;
+
+  const list = () => (Array.isArray($.notifications) ? $.notifications : []);
+  const setList = (next) => {
+    $.notifications = next;
+  };
+
+  const scheduleLeave = (id, ms) => {
+    const startedAt = Date.now();
+    const handle = setTimeout(() => {
+      timers.delete(id);
+      beginLeave(id);
+    }, ms);
+    timers.set(id, { handle, remaining: ms, startedAt });
+  };
+
+  const beginLeave = (id) => {
+    if (leaving.has(id)) return;
+    leaving.add(id);
+    const t = timers.get(id);
+    if (t?.handle) clearTimeout(t.handle);
+    timers.delete(id);
+    setList(list().map((n) => (n.id === id ? { ...n, leaving: true } : n)));
+  };
+
+  const finalizeLeave = (id) => {
+    if (!leaving.has(id)) return;
+    leaving.delete(id);
+    setList(list().filter((n) => n.id !== id));
+  };
+
+  const push = (type, title, opts = {}) => {
+    if (title instanceof Error) title = title.message;
+    if (title == null || title === '') return;
+    const id = opts.id ?? ++nextId;
+    const duration = opts.duration ?? (type === 'loading' ? Infinity : DEFAULT_DURATION);
+    const entry = {
+      id,
+      type,
+      title: String(title),
+      description: opts.description || null,
+      icon: opts.icon || null,
+      equipment: opts.equipment || null,
+    };
+    const current = list();
+    const existing = current.find((n) => n.id === id);
+    setList(existing ? current.map((n) => (n.id === id ? entry : n)) : [...current, entry]);
+
+    const prev = timers.get(id);
+    if (prev?.handle) clearTimeout(prev.handle);
+    timers.delete(id);
+    leaving.delete(id);
+    if (duration !== Infinity) {
+      if (paused) timers.set(id, { handle: null, remaining: duration, startedAt: Date.now() });
+      else scheduleLeave(id, duration);
+    }
+    return id;
+  };
+
+  const notify = (title, opts) => push('default', title, opts);
+  notify.success = (t, o) => push('success', t, o);
+  notify.error = (t, o) => push('error', t, o);
+  notify.warning = (t, o) => push('warning', t, o);
+  notify.info = (t, o) => push('info', t, o);
+  notify.loading = (t, o) => push('loading', t, o);
+  notify.dismiss = (id) => {
+    if (id == null) for (const n of list()) beginLeave(n.id);
+    else beginLeave(id);
+  };
+  notify.promise = (promise, msgs) => {
+    const loadingMsg = typeof msgs.loading === 'function' ? msgs.loading() : msgs.loading;
+    const id = push('loading', loadingMsg);
+    Promise.resolve(promise).then(
+      (v) =>
+        push('success', typeof msgs.success === 'function' ? msgs.success(v) : msgs.success, {
+          id,
+        }),
+      (e) => push('error', typeof msgs.error === 'function' ? msgs.error(e) : msgs.error, { id }),
+    );
+    return id;
+  };
+  window.notify = notify;
+
+  window.setNotifyPos = ({ up, down, left, right }) => {
+    $.notifyUp = !!up;
+    $.notifyDown = !!down;
+    $.notifyLeft = !!left;
+    $.notifyRight = !!right;
+  };
+
+  const pauseTimers = () => {
+    if (paused) return;
+    paused = true;
+    for (const [, t] of timers) {
+      if (!t.handle) continue;
+      clearTimeout(t.handle);
+      t.remaining = Math.max(0, t.remaining - (Date.now() - t.startedAt));
+      t.handle = null;
+    }
+  };
+  const resumeTimers = () => {
+    if (!paused) return;
+    paused = false;
+    for (const [id, t] of timers) {
+      if (t.handle) continue;
+      scheduleLeave(id, t.remaining);
+    }
+  };
+
+  window.onNotifyEnter = (vp) => {
+    pauseTimers();
+    vp.toggleAttribute('expanded', true);
+    requestAnimationFrame(updateLayout);
+  };
+  window.onNotifyLeave = (vp) => {
+    resumeTimers();
+    vp.toggleAttribute('expanded', false);
+    requestAnimationFrame(updateLayout);
+  };
+
+  window.onNotifyAnimEnd = (notification) => {
+    if (notification.leaving) finalizeLeave(notification.id);
+  };
+
+  const updateLayout = () => {
+    document.querySelectorAll('notifications-viewport').forEach((vp) => {
+      const hit = vp.querySelector(':scope > notification-hit');
+      if (!hit) return;
+      const cards = [...hit.querySelectorAll(':scope > notification-card')];
+      const n = cards.length;
+      const heights = cards.map((c) => c.offsetHeight || 64);
+      cards.forEach((card, i) => {
+        const frontI = n - 1 - i;
+        let exp = 0;
+        for (let j = 1; j <= frontI; j++) exp += heights[n - j] + GAP;
+        card.style.setProperty('--front-i', frontI);
+        card.style.setProperty('--col-y', `${frontI * GAP}px`);
+        card.style.setProperty('--col-scale', `${1 - frontI * SCALE_STEP}`);
+        card.style.setProperty('--exp-y', `${exp}px`);
+        card.style.setProperty('--z', String(1000 - frontI));
+        card.toggleAttribute('hidden-stack', frontI >= VISIBLE);
+      });
+      const frontH = heights[n - 1] || 0;
+      const peek = Math.min(VISIBLE - 1, Math.max(0, n - 1)) * GAP;
+      const expandedH = heights.reduce((a, h, i) => a + h + (i > 0 ? GAP : 0), 0);
+      const hitH = vp.hasAttribute('expanded') ? Math.max(frontH + peek, expandedH) : frontH + peek;
+      hit.style.setProperty('--hit-h', `${hitH}px`);
+    });
+  };
+
+  const ro = new ResizeObserver(() => requestAnimationFrame(updateLayout));
+  const observed = new WeakSet();
+  const attach = () => {
+    document.querySelectorAll('notification-card').forEach((c) => {
+      if (observed.has(c)) return;
+      observed.add(c);
+      ro.observe(c);
+    });
+  };
+  new MutationObserver(() => {
+    attach();
+    requestAnimationFrame(updateLayout);
+  }).observe(document.body, { childList: true, subtree: true });
+  requestAnimationFrame(() => {
+    attach();
+    updateLayout();
+  });
+
+  window.onNotifyPointerDown = (el, ev) => {
+    if (ev.button !== 0) return;
+    if (ev.target.closest('button, a, input, textarea, select')) return;
+    el.setPointerCapture(ev.pointerId);
+    el._drag = { x: ev.clientX, y: ev.clientY, dx: 0, dy: 0 };
+    el.toggleAttribute('dragging', true);
+  };
+  const dragAxis = (vp) => {
+    const hx = vp.hasAttribute('right') ? 1 : vp.hasAttribute('left') ? -1 : 0;
+    if (hx !== 0) return { ax: hx, ay: 0 };
+    const vy = vp.hasAttribute('down') ? 1 : vp.hasAttribute('up') ? -1 : 0;
+    return { ax: 0, ay: vy };
+  };
+
+  window.onNotifyPointerMove = (el, ev) => {
+    if (!el._drag) return;
+    const dx = (el._drag.dx = ev.clientX - el._drag.x);
+    const dy = (el._drag.dy = ev.clientY - el._drag.y);
+    const { ax, ay } = dragAxis(el.closest('notifications-viewport'));
+    let dragX, dragY;
+    if (ax === 0 && ay === 0) {
+      dragX = dx;
+      dragY = dy;
+    } else {
+      dragX = ax === 0 ? 0 : ax * Math.max(0, ax * dx);
+      dragY = ay === 0 ? 0 : ay * Math.max(0, ay * dy);
+    }
+    el.style.setProperty('--drag-x', `${dragX}px`);
+    el.style.setProperty('--drag-y', `${dragY}px`);
+  };
+  window.onNotifyPointerUp = (el, ev, notification) => {
+    if (!el._drag) return;
+    const { dx, dy } = el._drag;
+    el._drag = null;
+    try {
+      el.releasePointerCapture(ev.pointerId);
+    } catch {}
+
+    const { ax, ay } = dragAxis(el.closest('notifications-viewport'));
+    const dismiss =
+      ax === 0 && ay === 0
+        ? Math.hypot(dx, dy) > SWIPE_THRESHOLD
+        : dx * ax + dy * ay > SWIPE_THRESHOLD;
+    if (dismiss) {
+      beginLeave(notification.id);
+    } else {
+      el.toggleAttribute('dragging', false);
+      el.style.removeProperty('--drag-x');
+      el.style.removeProperty('--drag-y');
+    }
+  };
+</script>
+
+<notifications-viewport
+  up="@[up]"
+  down="@[down]"
+  left="@[left]"
+  right="@[right]"
+  style="--offset-x: @[(offsetX || 0)]px; --offset-y: @[(offsetY || 0)]px"
+>
+  <notification-hit
+    onmouseenter="onNotifyEnter(this.parentElement)"
+    onmouseleave="onNotifyLeave(this.parentElement)"
+  >
+    <!-- each notifications as notification (notification.id) -->
+      <notification-card
+        @[notification.type]
+        leaving="@[notification.leaving]"
+        onanimationend="onNotifyAnimEnd(notification)"
+        onpointerdown="onNotifyPointerDown(this, event)"
+        onpointermove="onNotifyPointerMove(this, event)"
+        onpointerup="onNotifyPointerUp(this, event, notification)"
+        onpointercancel="onNotifyPointerUp(this, event, notification)"
+      >
+        <notification-icon @[notification.type] has-icon="@[notification.icon]">
+          <!-- if notification.icon === 'crystal' -->
+            <coin>
+              <stack>
+                <icon crystal back></icon>
+                <icon crystal coin-platinum></icon>
+              </stack>
+            </coin>
+          <!-- /if -->
+          <!-- if notification.icon && notification.icon !== 'crystal' -->
+            <icon class="@[notification.icon]"></icon>
+          <!-- /if -->
+          <!-- if !notification.icon && notification.type === 'success' -->
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <circle cx="10" cy="10" r="9" fill="currentColor" />
+              <path
+                d="M6 10.2l2.6 2.6L14 7.4"
+                fill="none"
+                stroke="white"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          <!-- /if -->
+          <!-- if !notification.icon && notification.type === 'error' -->
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <circle cx="10" cy="10" r="9" fill="currentColor" />
+              <path
+                d="M10 5.5v5.2"
+                fill="none"
+                stroke="white"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+              <circle cx="10" cy="14" r="1.1" fill="white" />
+            </svg>
+          <!-- /if -->
+          <!-- if !notification.icon && notification.type === 'warning' -->
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <path d="M10 2L18.5 17.2H1.5z" fill="currentColor" />
+              <path
+                d="M10 8v4"
+                fill="none"
+                stroke="white"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+              <circle cx="10" cy="14.6" r="1.1" fill="white" />
+            </svg>
+          <!-- /if -->
+          <!-- if !notification.icon && notification.type === 'info' -->
+            <svg viewBox="0 0 20 20" aria-hidden="true">
+              <circle cx="10" cy="10" r="9" fill="currentColor" />
+              <path
+                d="M10 9.4v5.2"
+                fill="none"
+                stroke="white"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+              <circle cx="10" cy="6" r="1.1" fill="white" />
+            </svg>
+          <!-- /if -->
+          <!-- if !notification.icon && notification.type === 'loading' -->
+            <svg viewBox="0 0 20 20" aria-hidden="true" animate-spin>
+              <circle
+                cx="10"
+                cy="10"
+                r="7.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                opacity="0.2"
+              />
+              <path
+                d="M17.5 10a7.5 7.5 0 0 0-7.5-7.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          <!-- /if -->
+        </notification-icon>
+        <notification-body>
+          <notification-title>
+            <!-- if notification.equipment -->
+              <component
+                src="/components/EquipmentLink.html"
+                name="@[notification.equipment.name]"
+                element="@[notification.equipment.element]"
+              ></component>
+            <!-- /if -->
+            @[notification.title]
+          </notification-title>
+          <!-- if notification.description -->
+            <notification-desc>@[notification.description]</notification-desc>
+          <!-- /if -->
+        </notification-body>
+      </notification-card>
+    <!-- /each -->
+  </notification-hit>
+</notifications-viewport>
+
+<style>
+  notifications-viewport {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    pointer-events: none;
+    display: block;
+    --width: calc(var(--unit) * 89);
+    --margin-x: 0px;
+    --margin-y: 0px;
+    --left: 50%;
+    --right: auto;
+    --top: auto;
+    --bottom: 0px;
+    --tx: -50%;
+    --ty: 0px;
+    --sign: -1;
+    --enter-x: 0%;
+    --enter-y: 120%;
+    --leave-x: 0%;
+    --leave-y: 120%;
+    --transform-origin: center bottom;
+    --card-left: 50%;
+    --card-right: auto;
+    --card-tx: -50%;
+
+    --notify-bg: var(--card, oklch(1 0 0));
+    --notify-fg: var(--foreground, oklch(0.15 0 0));
+    --notify-desc: var(--muted-foreground, oklch(0.45 0 0));
+    --notify-border: var(--border, oklch(0.92 0 0));
+    --notify-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 4) -1px oklch(0 0 0 / 0.1);
+    --notify-success: var(--hue-green, oklch(0.6 0.17 142));
+    --notify-error: var(--destructive, oklch(0.55 0.2 25));
+    --notify-warning: var(--hue-yellow, oklch(0.78 0.16 90));
+    --notify-info: var(--hue-blue, oklch(0.55 0.18 250));
+    --notify-loading: var(--muted, oklch(0.5 0.01 0));
+  }
+
+  @media (min-width: 769px) {
+    notifications-viewport {
+      --left: 50%;
+      --right: auto;
+      --top: 50%;
+      --bottom: auto;
+      --tx: -50%;
+      --ty: -50%;
+      --sign: 1;
+      --enter-x: 0%;
+      --enter-y: 0%;
+      --leave-x: 0%;
+      --leave-y: 0%;
+      --transform-origin: center center;
+    }
+
+    notifications-viewport {
+      --margin-x: var(--offset-x, 0px);
+      --margin-y: var(--offset-y, 0px);
+    }
+
+    notifications-viewport[left]:not([right]) {
+      --left: var(--margin-x);
+      --right: auto;
+      --tx: 0px;
+      --enter-x: -120%;
+      --leave-x: -120%;
+      --transform-origin: left center;
+      --card-left: 0;
+      --card-right: auto;
+      --card-tx: 0px;
+    }
+    notifications-viewport[right]:not([left]) {
+      --left: auto;
+      --right: var(--margin-x);
+      --tx: 0px;
+      --enter-x: 120%;
+      --leave-x: 120%;
+      --transform-origin: right center;
+      --card-left: auto;
+      --card-right: 0;
+      --card-tx: 0px;
+    }
+    notifications-viewport[up]:not([down]) {
+      --top: var(--margin-y);
+      --bottom: auto;
+      --ty: 0px;
+      --sign: 1;
+      --enter-y: -120%;
+      --leave-y: -120%;
+      --transform-origin: center top;
+    }
+    notifications-viewport[down]:not([up]) {
+      --top: auto;
+      --bottom: var(--margin-y);
+      --ty: 0px;
+      --sign: -1;
+      --enter-y: 120%;
+      --leave-y: 120%;
+      --transform-origin: center bottom;
+    }
+
+    notifications-viewport[left]:not([right]),
+    notifications-viewport[right]:not([left]) {
+      --enter-y: 0%;
+      --leave-y: 0%;
+    }
+
+    notifications-viewport[up][left] {
+      --transform-origin: left top;
+    }
+    notifications-viewport[up][right] {
+      --transform-origin: right top;
+    }
+    notifications-viewport[down][left] {
+      --transform-origin: left bottom;
+    }
+    notifications-viewport[down][right] {
+      --transform-origin: right bottom;
+    }
+  }
+
+  notification-hit {
+    position: absolute;
+    display: block;
+    left: var(--left);
+    right: var(--right);
+    top: var(--top);
+    bottom: var(--bottom);
+    width: var(--width);
+    max-width: calc(100vw - var(--margin-x) * 2);
+    height: var(--hit-h, 0px);
+    transform: translate(var(--tx), var(--ty));
+    pointer-events: auto;
+    transition: height 400ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  notification-card {
+    position: absolute;
+    left: var(--card-left);
+    right: var(--card-right);
+    width: max-content;
+    max-width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: calc(var(--unit) * 3);
+    padding: calc(var(--unit) * 4);
+    background: var(--notify-bg);
+    color: var(--notify-fg);
+    border: 1px solid var(--notify-border);
+    border-radius: var(--radius);
+    box-shadow: var(--notify-shadow);
+    font-family: var(--font-sans);
+    font-size: calc(var(--unit) * 3.5);
+    line-height: 1.4;
+    touch-action: pan-y;
+    user-select: none;
+    cursor: grab;
+    transform-origin: var(--transform-origin);
+    transform: translate(
+        calc(var(--card-tx) + var(--drag-x, 0px)),
+        calc(var(--col-y, 0px) * var(--sign) + var(--drag-y, 0px))
+      )
+      scale(var(--col-scale, 1));
+    transition:
+      transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 200ms ease;
+    z-index: var(--z, 1);
+    animation: notify-in 400ms cubic-bezier(0.21, 1.02, 0.73, 1) backwards;
+  }
+
+  notifications-viewport[down]:not([up]) notification-card {
+    top: auto;
+    bottom: 0;
+  }
+  notifications-viewport:not([down]) notification-card,
+  notifications-viewport[up] notification-card {
+    top: 0;
+  }
+
+  notifications-viewport[expanded] notification-card {
+    transform: translate(
+        calc(var(--card-tx) + var(--drag-x, 0px)),
+        calc(var(--exp-y, 0px) * var(--sign) + var(--drag-y, 0px))
+      )
+      scale(1);
+  }
+
+  notification-card[dragging] {
+    transition: none;
+    cursor: grabbing;
+  }
+
+  notification-card[hidden-stack] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  notifications-viewport[expanded] notification-card[hidden-stack] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  notification-card[leaving] {
+    animation: notify-out 280ms cubic-bezier(0.4, 0, 1, 1) forwards;
+  }
+
+  @keyframes notify-in {
+    from {
+      opacity: 0;
+      transform: translate(calc(var(--card-tx) + var(--enter-x)), var(--enter-y)) scale(0.94);
+    }
+  }
+
+  @keyframes notify-out {
+    to {
+      opacity: 0;
+      transform: translate(calc(var(--card-tx) + var(--leave-x)), var(--leave-y)) scale(0.9);
+    }
+  }
+
+  notification-icon {
+    flex: none;
+    width: calc(var(--unit) * 5);
+    height: 1lh;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  notification-icon svg {
+    width: 100%;
+    height: calc(var(--unit) * 5);
+    display: block;
+  }
+  notification-icon[success] {
+    color: var(--notify-success);
+  }
+  notification-icon[error] {
+    color: var(--notify-error);
+  }
+  notification-icon[warning] {
+    color: var(--notify-warning);
+  }
+  notification-icon[info] {
+    color: var(--notify-info);
+  }
+  notification-icon[loading] {
+    color: var(--notify-loading);
+  }
+  notification-icon[default]:not([has-icon]) {
+    display: none;
+  }
+
+  notification-icon > icon,
+  notification-icon > coin {
+    font-size: calc(var(--unit) * 5);
+  }
+
+  notification-body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+  }
+
+  notification-title {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: calc(var(--unit) * 1.5);
+    font-weight: 500;
+    color: var(--notify-fg);
+    word-wrap: break-word;
+  }
+
+  notification-desc {
+    font-size: calc(var(--unit) * 3.25);
+    color: var(--notify-desc);
+    word-wrap: break-word;
+  }
+</style>
diff --git a/components/remote/Pagination.html b/components/remote/Pagination.html
new file mode 100644
index 00000000..8a18ee51
--- /dev/null
+++ b/components/remote/Pagination.html
@@ -0,0 +1,5 @@
+<crow pagination justify-between align-center g="2" w="full">
+  <button tertiary sm disabled="@[page === 0]" onclick="@[prev]">Previous</button>
+  <span text-sm text-muted>Page @[page + 1] of @[pageCount]</span>
+  <button tertiary sm disabled="@[page >= pageCount - 1]" onclick="@[next]">Next</button>
+</crow>
diff --git a/components/remote/PromptModal.html b/components/remote/PromptModal.html
new file mode 100644
index 00000000..09db9b8c
--- /dev/null
+++ b/components/remote/PromptModal.html
@@ -0,0 +1,322 @@
+<script type="module">
+  import component from '/node_modules/@ape-egg/vibe/component.js';
+  component({});
+
+  let resolver = null;
+  let composer = null;
+  let uploader = null;
+
+  $.promptModal = {
+    open: false,
+    title: '',
+    extra: '',
+    extraLabel: 'Extra context',
+    count: 3,
+    images: [],
+    drop: null,
+    preview: '',
+  };
+
+  const payloadOf = (state) => ({
+    extra: state.extra,
+    count: Math.min(10, Math.max(1, Number(state.count) || 3)),
+    references: [
+      ...(state.drop?.selected ? [state.drop.path] : []),
+      ...state.images.filter((image) => image.selected).map((image) => image.path),
+    ],
+  });
+
+  const update = (patch) => {
+    const state = { ...$.promptModal, ...patch };
+    $.promptModal = { ...state, preview: composer(payloadOf(state)) };
+  };
+
+  window.promptModal = ({
+    title,
+    compose,
+    upload,
+    extra = '',
+    extraLabel = 'Extra context',
+    images = [],
+    count = 3,
+  }) =>
+    new Promise((resolve) => {
+      resolver = resolve;
+      composer = compose;
+      uploader = upload;
+      update({
+        open: true,
+        title: title || 'Prompt',
+        extra,
+        extraLabel,
+        count,
+        images,
+        drop: null,
+      });
+    });
+
+  const close = (payload) => {
+    $.promptModal = { ...$.promptModal, open: false };
+    resolver?.(payload);
+    resolver = composer = uploader = null;
+  };
+
+  window.promptModalCancel = () => close(null);
+
+  window.promptModalSubmit = () => {
+    const state = $.promptModal;
+    close({ ...payloadOf(state), instruction: state.preview });
+  };
+
+  window.promptModalExtra = (value) => update({ extra: value });
+
+  window.promptModalToggle = (image) =>
+    update({
+      images: $.promptModal.images.map((i) =>
+        i.path === image.path ? { ...i, selected: !i.selected } : i,
+      ),
+    });
+
+  window.promptModalDrop = async (event) => {
+    event.preventDefault();
+    const file = event.dataTransfer.files[0];
+    if (!file || !uploader) return;
+    update({ drop: { ...(await uploader(file)), selected: true } });
+  };
+
+  window.promptModalDropToggle = () => {
+    const { drop } = $.promptModal;
+    if (drop) update({ drop: { ...drop, selected: !drop.selected } });
+  };
+</script>
+
+<modal-root fullscreen open="@[promptModal.open]">
+  <prompt-modal>
+    <prompt-modal-header>
+      <h3 cinzel m="0">@[promptModal.title]</h3>
+      <component src="/components/buttons/Cross.html" label="Close" onclick="promptModalCancel()">
+      </component>
+    </prompt-modal-header>
+
+    <prompt-modal-columns>
+      <prompt-modal-pane>
+        <prompt-modal-section grow>
+          <prompt-modal-label>Prompt — sent verbatim to the image model</prompt-modal-label>
+          <prompt-modal-dump>@[promptModal.preview]</prompt-modal-dump>
+        </prompt-modal-section>
+        <prompt-modal-section>
+          <prompt-modal-label>@[promptModal.extraLabel]</prompt-modal-label>
+          <textarea rows="8" oninput="promptModalExtra(this.value)">@[promptModal.extra]</textarea>
+        </prompt-modal-section>
+      </prompt-modal-pane>
+
+      <prompt-modal-pane>
+        <prompt-modal-section grow>
+          <prompt-modal-label
+            >Reference images — selected are attached to the request</prompt-modal-label
+          >
+          <prompt-modal-images>
+            <prompt-modal-drop
+              picked="@[promptModal.drop && promptModal.drop.selected]"
+              ondragover="event.preventDefault()"
+              ondrop="promptModalDrop(event)"
+              onclick="promptModalDropToggle()"
+            >
+              <!-- if promptModal.drop -->
+                <img data-src="@[promptModal.drop.url]" alt="dropped reference" />
+              <!-- else -->
+                <span>Drop an image here</span>
+              <!-- /if -->
+            </prompt-modal-drop>
+            <!-- each promptModal.images as image (image.path) -->
+              <prompt-modal-thumb
+                picked="@[image.selected]"
+                title="@[image.label]"
+                onclick="promptModalToggle(image)"
+              >
+                <img data-src="@[image.url]" alt="@[image.label]" />
+                <!-- if image.current -->
+                  <prompt-modal-thumb-badge>Current</prompt-modal-thumb-badge>
+                <!-- /if -->
+              </prompt-modal-thumb>
+            <!-- /each -->
+          </prompt-modal-images>
+        </prompt-modal-section>
+      </prompt-modal-pane>
+    </prompt-modal-columns>
+
+    <prompt-modal-footer>
+      <crow left g="2">
+        <prompt-modal-label>Parallel generations</prompt-modal-label>
+        <input
+          type="number"
+          min="1"
+          max="10"
+          count-input
+          value="@[String(promptModal.count)]"
+          oninput="$.promptModal.count = this.value"
+        />
+      </crow>
+      <button primary onclick="promptModalSubmit()">Generate</button>
+    </prompt-modal-footer>
+  </prompt-modal>
+</modal-root>
+
+<style>
+  modal-root[fullscreen] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  prompt-modal {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 4);
+    width: calc(100vw - var(--unit) * 8);
+    height: calc(100dvh - var(--unit) * 8);
+    padding: calc(var(--unit) * 5);
+    background: oklch(from var(--background) calc(l + 0.02) c h);
+    border-radius: calc(var(--unit) * 1);
+    box-shadow:
+      0 0 0 1px oklch(from var(--foreground) l c h / 0.1),
+      0 calc(var(--unit) * 4) calc(var(--unit) * 10) -2px var(--scrim-2);
+  }
+
+  prompt-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--unit) * 3);
+  }
+
+  prompt-modal-header [cross-button] {
+    width: calc(var(--unit) * 9);
+    height: calc(var(--unit) * 9);
+    font-size: calc(var(--unit) * 4);
+  }
+
+  prompt-modal-columns {
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    gap: calc(var(--unit) * 5);
+    flex: 1;
+    min-height: 0;
+  }
+
+  prompt-modal-pane {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 4);
+    min-height: 0;
+  }
+
+  prompt-modal-section {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1.5);
+    min-height: 0;
+  }
+
+  prompt-modal-section[grow] {
+    flex: 1;
+  }
+
+  prompt-modal-label {
+    font-family: var(--font-accent);
+    font-size: calc(var(--unit) * 3);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: oklch(from var(--foreground) l 0 h / 0.5);
+  }
+
+  prompt-modal-dump {
+    display: block;
+    flex: 1;
+    padding: calc(var(--unit) * 3);
+    overflow: auto;
+    font-family: monospace;
+    font-size: calc(var(--unit) * 2.75);
+    white-space: pre-wrap;
+    background: oklch(from var(--background) calc(l - 0.03) c h);
+    border-radius: calc(var(--unit) * 1);
+  }
+
+  prompt-modal-images {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    gap: calc(var(--unit) * 2);
+    overflow: auto;
+  }
+
+  prompt-modal-thumb,
+  prompt-modal-drop {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    position: relative;
+    width: calc(var(--unit) * 24);
+    height: calc(var(--unit) * 30);
+    overflow: hidden;
+    cursor: pointer;
+    background: oklch(from var(--background) calc(l - 0.02) c h);
+    border: 2px solid transparent;
+    border-radius: calc(var(--unit) * 1);
+    transition: border-color 120ms;
+  }
+
+  prompt-modal-drop {
+    align-items: center;
+    text-align: center;
+    border: 2px dashed oklch(from var(--foreground) l c h / 0.25);
+    color: oklch(from var(--foreground) l 0 h / 0.5);
+    font-size: calc(var(--unit) * 3);
+    padding: calc(var(--unit) * 2);
+  }
+
+  prompt-modal-thumb:hover,
+  prompt-modal-drop:hover {
+    border-color: oklch(from var(--primary) l c h / 0.5);
+  }
+
+  prompt-modal-thumb[picked],
+  prompt-modal-drop[picked] {
+    border-color: var(--primary);
+  }
+
+  prompt-modal-thumb img,
+  prompt-modal-drop img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  prompt-modal-thumb-badge {
+    position: absolute;
+    top: var(--unit);
+    left: 50%;
+    translate: -50% 0;
+    padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+    font-family: var(--font-accent);
+    font-size: calc(var(--unit) * 2.25);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--background);
+    background: oklch(from var(--primary) l c h / 0.9);
+    border-radius: calc(var(--unit) * 0.5);
+  }
+
+  prompt-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--unit) * 3);
+  }
+
+  prompt-modal [count-input] {
+    min-width: calc(var(--unit) * 20);
+    width: calc(var(--unit) * 20);
+  }
+</style>
diff --git a/components/remote/Table.html b/components/remote/Table.html
new file mode 100644
index 00000000..85c9454d
--- /dev/null
+++ b/components/remote/Table.html
@@ -0,0 +1,79 @@
+<script type="module">
+  window.skeletonRows = (count) =>
+    Array.from({ length: Math.max(0, count || 0) }, (_, i) => ({ i }));
+</script>
+
+<table game-table>
+  <slot></slot>
+  <!-- each skeletonRows(skeleton) as s (s.i) -->
+    <tr game-table-row skeleton>
+      <td colspan="99"><skeleton-bar></skeleton-bar></td>
+    </tr>
+  <!-- /each -->
+</table>
+
+<style>
+  table[game-table] {
+    width: calc(100% + var(--unit) * 12);
+    margin-top: calc(var(--unit) * 4);
+    margin-inline: calc(var(--unit) * -6);
+    border-collapse: collapse;
+  }
+
+  table[game-table] td {
+    padding: calc(var(--unit) * 3) calc(var(--unit) * 2);
+    border-bottom: 1px solid var(--c-line);
+    vertical-align: middle;
+  }
+
+  table[game-table] td:first-child {
+    padding-left: calc(var(--unit) * 6);
+  }
+
+  table[game-table] td:last-child {
+    padding-right: calc(var(--unit) * 6);
+  }
+
+  table[game-table] tr[game-table-header] td {
+    font-size: calc(var(--unit) * 3);
+    font-weight: 400;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--c-muted);
+  }
+
+  table[game-table] tr[game-table-row] {
+    font-size: calc(var(--unit) * 4);
+    color: var(--c-fg);
+    transition: background 200ms ease;
+  }
+
+  table[game-table] tr[game-table-row][even] {
+    background: oklch(from var(--c-fg) l c h / 0.05);
+  }
+
+  table[game-table] tr[game-table-row]:last-child td {
+    border-bottom: 0;
+  }
+
+  table[game-table] tr:hover td {
+    background-color: transparent;
+  }
+
+  table[game-table] tr[skeleton] skeleton-bar {
+    display: block;
+    width: calc(var(--unit) * 28);
+    max-width: 60%;
+    height: calc(var(--unit) * 3.5);
+    border-radius: calc(var(--unit) * 1.5);
+    background: oklch(from var(--c-fg) l c h / 0.08);
+  }
+
+  @media (width <= 767px) {
+    table[game-table] {
+      width: calc(100% + var(--unit) * 6);
+      margin-inline: calc(var(--unit) * -3);
+    }
+  }
+</style>
diff --git a/components/remote/Tooltip.html b/components/remote/Tooltip.html
new file mode 100644
index 00000000..e9b1e98d
--- /dev/null
+++ b/components/remote/Tooltip.html
@@ -0,0 +1,322 @@
+<script type="module">
+  import component from '/node_modules/@ape-egg/vibe/component.js';
+  component({});
+
+  const OFFSET = 8;
+  let currentAnchor = null;
+  let currentLeave = null;
+
+  const detach = () => {
+    if (currentAnchor && currentLeave) {
+      currentAnchor.removeEventListener('mouseleave', currentLeave);
+    }
+    currentAnchor = null;
+    currentLeave = null;
+  };
+
+  const anchorPoint = (anchor, direction) => {
+    if (anchor instanceof Element) {
+      const r = anchor.getBoundingClientRect();
+      if (direction === 'down') return { x: r.left + r.width / 2, y: r.bottom };
+      if (direction === 'left') return { x: r.left, y: r.top + r.height / 2 };
+      if (direction === 'right') return { x: r.right, y: r.top + r.height / 2 };
+      if (direction === 'up') return { x: r.left + r.width / 2, y: r.top };
+      return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+    }
+    if (anchor && typeof anchor.x === 'number') {
+      return { x: anchor.x, y: anchor.y };
+    }
+    return { x: 0, y: 0 };
+  };
+
+  const looksLikeOptions = (v) =>
+    v && typeof v === 'object' && !(v instanceof Element) && typeof v.x !== 'number';
+
+  window.showTooltip = (props, arg2, arg3) => {
+    if (window.__dndDragging) return;
+    detach();
+
+    let options;
+    let anchor;
+    if (looksLikeOptions(arg2)) {
+      options = arg2;
+      anchor = arg3;
+    } else {
+      anchor = arg2;
+      options = arg3;
+    }
+    if (!anchor && typeof window.event === 'object' && window.event !== null) {
+      anchor = window.event.currentTarget;
+    }
+
+    const opts = options || {};
+    const direction = opts.direction || null;
+    const lock = !!opts.lock;
+    const persist = !!opts.persist;
+    const target = anchorPoint(anchor, direction);
+
+    let x = target.x;
+    let y = target.y;
+    if (!lock && anchor && typeof anchor.clientX === 'number') {
+      x = anchor.clientX;
+      y = anchor.clientY;
+    }
+
+    $.tooltip = {
+      x,
+      y,
+      targetX: target.x,
+      targetY: target.y,
+      visible: true,
+      props: props || {},
+      direction: direction || 'none',
+      lock,
+      persist,
+    };
+
+    if (anchor instanceof Element && !persist) {
+      currentAnchor = anchor;
+      currentLeave = () => window.hideTooltip();
+      anchor.addEventListener('mouseleave', currentLeave);
+    }
+  };
+
+  window.hideTooltip = () => {
+    detach();
+    if ($.tooltip) $.tooltip.visible = false;
+  };
+
+  let bodyLeft = 0;
+  let bodyTop = 0;
+
+  const setCut = (clientX, clientY) => {
+    const body = document.querySelector('tooltip-body[cramped]');
+    if (!body) return;
+    body.style.setProperty('--cut-x', `${clientX - bodyLeft}px`);
+    body.style.setProperty('--cut-y', `${clientY - bodyTop}px`);
+  };
+
+  document.addEventListener('mousemove', (e) => {
+    if (!$.tooltip?.visible) return;
+    if (!$.tooltip.lock) {
+      $.tooltip.x = e.clientX;
+      $.tooltip.y = e.clientY;
+    }
+    setCut(e.clientX, e.clientY);
+  });
+
+  const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+
+  const positionTooltip = () => {
+    if (!$.tooltip?.visible) return;
+    const body = document.querySelector('tooltip-body');
+    if (!body) return;
+
+    const r = body.getBoundingClientRect();
+    const w = r.width;
+    const h = r.height;
+    if (w === 0 || h === 0) return;
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const fx = $.tooltip.x;
+    const fy = $.tooltip.y;
+    const dir = $.tooltip.direction;
+
+    let vpLeft;
+    let vpTop;
+    if (dir === 'up') {
+      vpLeft = fx - w / 2;
+      vpTop = fy - h - OFFSET;
+    } else if (dir === 'down') {
+      vpLeft = fx - w / 2;
+      vpTop = fy + OFFSET;
+    } else if (dir === 'left') {
+      vpLeft = fx - w - OFFSET;
+      vpTop = fy - h / 2;
+    } else if (dir === 'right') {
+      vpLeft = fx + OFFSET;
+      vpTop = fy - h / 2;
+    } else {
+      vpLeft = fx - w / 2;
+      vpTop = fy - h / 2;
+    }
+
+    const idealLeft = vpLeft;
+    const idealTop = vpTop;
+    vpLeft = clamp(vpLeft, 0, Math.max(0, vw - w));
+    vpTop = clamp(vpTop, 0, Math.max(0, vh - h));
+
+    const cramped = dir === 'left' || dir === 'right' ? vpLeft !== idealLeft : vpTop !== idealTop;
+    const wasCramped = body.hasAttribute('cramped');
+    body.toggleAttribute('cramped', cramped);
+
+    bodyLeft = vpLeft;
+    bodyTop = vpTop;
+    if (cramped && !wasCramped) setCut(fx, fy);
+
+    body.style.left = `${vpLeft - fx}px`;
+    body.style.top = `${vpTop - fy}px`;
+
+    // Point the triangle at the tooltip's origin (fx,fy) — the cursor for an
+    // unlocked tooltip, the anchor for a locked one — rather than the body's
+    // center. When there's room the body centers on the origin so the pointer
+    // sits centered; when the body is clamped against a viewport edge the
+    // pointer stays on the origin instead of drifting to center.
+    const pointer = body.querySelector('tooltip-pointer');
+    if (pointer && dir !== 'none') {
+      const inset = pointer.offsetWidth || 12;
+      if (dir === 'up' || dir === 'down') {
+        pointer.style.top = '';
+        pointer.style.left = `${clamp(fx - vpLeft, inset, Math.max(inset, w - inset))}px`;
+      } else {
+        pointer.style.left = '';
+        pointer.style.top = `${clamp(fy - vpTop, inset, Math.max(inset, h - inset))}px`;
+      }
+    }
+
+    body.setAttribute('positioned', '');
+  };
+
+  let bodyRO = null;
+  let observedBody = null;
+
+  const syncObserver = () => {
+    const body = document.querySelector('tooltip-body');
+    if (body === observedBody) return;
+    if (bodyRO) bodyRO.disconnect();
+    observedBody = body;
+    if (body) {
+      bodyRO = new ResizeObserver(positionTooltip);
+      bodyRO.observe(body);
+    }
+  };
+
+  $.on('afterUpdate', () => {
+    syncObserver();
+    positionTooltip();
+  });
+</script>
+
+<!-- if tooltip && tooltip.visible -->
+  <tooltip-layer style="left: @[tooltip.x]px; top: @[tooltip.y]px">
+    <tooltip-body position="absolute" @[tooltip.direction] @[tooltip.props.element]>
+      <slot></slot>
+      <tooltip-pointer position="absolute"></tooltip-pointer>
+    </tooltip-body>
+  </tooltip-layer>
+<!-- /if -->
+
+<style>
+  tooltip-layer {
+    position: fixed;
+    width: 0;
+    height: 0;
+    z-index: var(--z-tooltip, 100);
+    pointer-events: none;
+  }
+
+  tooltip-body {
+    display: block;
+    width: max-content;
+    height: auto;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    pointer-events: none;
+    filter: drop-shadow(0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) var(--scrim-1));
+    transition:
+      opacity 180ms ease-out,
+      transform 180ms ease-out;
+  }
+
+  tooltip-body[up] {
+    transform: translateY(calc(var(--unit) * -4));
+  }
+
+  tooltip-body[down] {
+    transform: translateY(calc(var(--unit) * 4));
+  }
+
+  tooltip-body[left] {
+    transform: translateX(calc(var(--unit) * -4));
+  }
+
+  tooltip-body[right] {
+    transform: translateX(calc(var(--unit) * 4));
+  }
+
+  tooltip-body > slot {
+    display: block;
+  }
+
+  tooltip-body[positioned] {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  tooltip-pointer {
+    width: calc(var(--unit) * 3);
+    height: calc(var(--unit) * 3);
+    background: var(--card);
+    border: 1px solid var(--border);
+  }
+
+  tooltip-body:is([fire], [frost], [earth], [nature], [lightning]) tooltip-pointer {
+    border-color: oklch(from var(--element-color) l calc(c * 0.5) h / 0.5);
+    background: color-mix(in oklab, var(--card) 92%, var(--element-color));
+  }
+
+  tooltip-body:is([fire], [frost], [earth], [nature], [lightning])[down] tooltip-pointer {
+    background: color-mix(in oklab, var(--card) 86%, var(--element-color));
+  }
+
+  tooltip-body:is([fire], [frost], [earth], [nature], [lightning])[up] tooltip-pointer {
+    background: color-mix(in oklab, var(--card) 97%, var(--element-color));
+  }
+
+  tooltip-body[up] tooltip-pointer {
+    left: 50%;
+    bottom: 1px;
+    transform: translate(-50%, 50%) rotate(45deg);
+    clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
+  }
+
+  tooltip-body[down] tooltip-pointer {
+    left: 50%;
+    top: 1px;
+    transform: translate(-50%, -50%) rotate(45deg);
+    clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
+  }
+
+  tooltip-body[left] tooltip-pointer {
+    right: 1px;
+    top: 50%;
+    transform: translate(50%, -50%) rotate(45deg);
+    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
+  }
+
+  tooltip-body[right] tooltip-pointer {
+    left: 1px;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
+  }
+
+  tooltip-body[none] tooltip-pointer {
+    display: none;
+  }
+
+  tooltip-body[cramped] tooltip-pointer {
+    display: none;
+  }
+
+  tooltip-body[cramped] [tooltip-card] {
+    --cut-r: calc(var(--unit) * 10);
+    mask: radial-gradient(
+      circle var(--cut-r) at var(--cut-x, 50%) var(--cut-y, 50%),
+      rgba(0, 0, 0, 0.65) 55%,
+      #000 100%
+    );
+  }
+</style>
diff --git a/components/spa-demo/Fighter.html b/components/spa-demo/Fighter.html
new file mode 100644
index 00000000..53412f7e
--- /dev/null
+++ b/components/spa-demo/Fighter.html
@@ -0,0 +1,27 @@
+<script type="module">
+  console.info('[spa-demo] Fighter script ran');
+</script>
+
+<spa-page vertical up left g="4">
+  <h2>Fighter #@[page.params.fighter]</h2>
+  <p>
+    The param comes straight from the URL path (<code>/fighter/7</code>), parsed into
+    <code>page.params</code> by the router — the SPA equivalent of a
+    <code>pages/fighter/$id.html</code> dynamic route.
+  </p>
+  <crow g="2" left>
+    <a href="/_internal/spa-testing/fighter/7" primary active="@[page.params.fighter === '7']"
+      >Fighter 7</a
+    >
+    <a href="/_internal/spa-testing/fighter/13" primary active="@[page.params.fighter === '13']"
+      >Fighter 13</a
+    >
+    <a href="/_internal/spa-testing/fighter/42" primary active="@[page.params.fighter === '42']"
+      >Fighter 42</a
+    >
+  </crow>
+  <spa-note>
+    Switching fighters is a param-only navigation: the route doesn't change, so the component stays
+    mounted and just re-binds — the console should log no new script run.
+  </spa-note>
+</spa-page>
diff --git a/components/spa-demo/Home.html b/components/spa-demo/Home.html
new file mode 100644
index 00000000..0b10fd5c
--- /dev/null
+++ b/components/spa-demo/Home.html
@@ -0,0 +1,44 @@
+<script type="module">
+  component({ count: 0 });
+  console.info('[spa-demo] Home script ran');
+</script>
+
+<spa-page vertical up left g="4">
+  <h2>SPA demo</h2>
+  <p>
+    This page is a fully self-contained SPA: one shell, one
+    <code vibe-dehydrate>&lt;component src="@[page.src]"&gt;</code> that re-fetches and re-mounts
+    whenever the bound src changes, a route table mapping names to component files, and a router
+    that is nothing more than a two-way binding between the URL and <code>$.page</code>. No boot.js,
+    no game state — clean URLs served by the pages-tree catch-all
+    (<code>spa-testing/$$route.html</code>).
+  </p>
+
+  <h4>Things to verify</h4>
+  <ul>
+    <li>
+      <strong>Lazy mount</strong> — open the console/network tab: Timer and Fighter should only be
+      fetched on their first visit, never at load.
+    </li>
+    <li>
+      <strong>URL sync</strong> — back/forward walks the history, refresh restores the current page,
+      and a copied URL deep-links.
+    </li>
+    <li>
+      <strong>Lifecycle teardown</strong> — the Timer page runs two tickers: the global one
+      (shell-owned) keeps counting while you're away; the local one (component-owned) resets to 0
+      every visit and its interval is cleared by <code>$.on('unmount', …)</code> — the tick rate
+      never accelerates, however many times you revisit.
+    </li>
+    <li>
+      <strong>Param navigation</strong> — switching fighters updates in place: same route, same
+      component, no script re-run.
+    </li>
+  </ul>
+
+  <button primary onclick="$.this.count++">Local count: @[this.count]</button>
+  <spa-note>
+    Component-local state — navigate away and back and it resets to 0: a fresh mount, the same clean
+    slate an MPA reload gives you.
+  </spa-note>
+</spa-page>
diff --git a/components/spa-demo/Timer.html b/components/spa-demo/Timer.html
new file mode 100644
index 00000000..8d3aaab7
--- /dev/null
+++ b/components/spa-demo/Timer.html
@@ -0,0 +1,38 @@
+<script type="module">
+  const id = component({ ticks: 0 });
+  $.spaDemo.timerMounts++;
+  const timer = setInterval(() => $[id].ticks++, 500);
+  $.on('unmount', () => clearInterval(timer));
+  console.info('[spa-demo] Timer mounted — local ticker started');
+</script>
+
+<spa-page vertical up left g="4">
+  <h2>Timer</h2>
+  <crow g="8" left>
+    <crow vertical up left>
+      <spa-metric>@[spaDemo.globalTicks]</spa-metric>
+      <spa-note>global ticks — shell-owned, never stops</spa-note>
+    </crow>
+    <crow vertical up left>
+      <spa-metric>@[this.ticks]</spa-metric>
+      <spa-note>local ticks — component-owned, resets every mount</spa-note>
+    </crow>
+    <crow vertical up left>
+      <spa-metric>@[spaDemo.timerMounts]</spa-metric>
+      <spa-note>times mounted</spa-note>
+    </crow>
+  </crow>
+  <p>
+    Two lifetimes, side by side. The <strong>global</strong> ticker is started once by the page
+    shell — navigate away and it keeps counting; nothing stacks because no navigation ever re-runs
+    the shell. The <strong>local</strong> ticker belongs to this component:
+    <code>component({ ticks: 0 })</code> state is evicted on unmount (a fresh 0 every visit) and its
+    interval is cleared by <code>$.on('unmount', () => clearInterval(timer))</code> — leave the page
+    and it genuinely stops.
+  </p>
+  <spa-note>
+    Verify in the console: one mount log per visit, and neither tick rate ever accelerates no matter
+    how many times you come back. Before the unmount event existed, every visit stacked another
+    unstoppable interval — this page used to be the demonstration of that leak.
+  </spa-note>
+</spa-page>
diff --git a/components/tooltip/Ability.html b/components/tooltip/Ability.html
new file mode 100644
index 00000000..baa431c5
--- /dev/null
+++ b/components/tooltip/Ability.html
@@ -0,0 +1,234 @@
+<card
+  text-sm
+  tooltip-card
+  ability-card
+  @[props.element]
+  multi="@[props.multi]"
+  style="--spectrum-wash: @[elementSpectrum (props.elements, 'wash')]"
+>
+  <crow left g="2" w="full" tooltip-heading>
+    <!-- if props.multi -->
+      <element-hex all ml="-2"></element-hex>
+    <!-- /if -->
+    <!-- if props.element -->
+      <element-hex @[props.element] ml="-2">
+        <icon @[props.element]></icon>
+      </element-hex>
+    <!-- /if -->
+    <crow vertical left g="0">
+      <strong tooltip-name>@[props.name]</strong>
+      <span ability-kind>
+        <span kind-word @[props.element] multi="@[props.multi]">@[props.kind]</span> Ability
+      </span>
+    </crow>
+  </crow>
+
+  <tooltip-stats>
+    <!-- if props.type === 'WindUp' -->
+      <component src="/components/tooltip/Stat.html" label="Wind up">
+        @[props.ticks] tick@[props.ticks === 1 ? '' : 's']
+      </component>
+    <!-- /if -->
+
+    <!-- if props.type === 'WindDown' -->
+      <component src="/components/tooltip/Stat.html" label="Wind down">
+        @[props.ticks] tick@[props.ticks === 1 ? '' : 's']
+      </component>
+    <!-- /if -->
+
+    <!-- if props.showDuration -->
+      <component src="/components/tooltip/Stat.html" label="Duration">
+        @[props.duration]
+      </component>
+    <!-- /if -->
+
+    <!-- if props.targets -->
+      <component src="/components/tooltip/Stat.html" label="Target">
+        @[props.targets.value]
+      </component>
+    <!-- /if -->
+
+    <!-- if props.chainTicks -->
+      <component src="/components/tooltip/Stat.html" label="Triggers each">
+        @[props.chainTicks] tick@[props.chainTicks === 1 ? '' : 's']
+      </component>
+    <!-- /if -->
+
+    <!-- if props.damage -->
+      <component src="/components/tooltip/Stat.html" label="Damage">
+        <!-- if props.damage.amount -->
+          @[props.damage.amount]<span
+           alt-when-down>(<span text-green>@[props.damage.pct]%</span> of total damage)</span>
+        <!-- /if -->
+        <!-- if !props.damage.amount -->
+          <span text-green>@[props.damage.pct]%</span>
+          of total damage
+        <!-- /if -->
+      </component>
+    <!-- /if -->
+
+    <!-- if props.healing -->
+      <component src="/components/tooltip/Stat.html" label="Heal">
+        <!-- if props.healing.amount -->
+          @[props.healing.amount]<span
+           alt-when-down>(<span text-green>@[props.healing.pct]%</span> of max health)</span>
+        <!-- /if -->
+        <!-- if !props.healing.amount -->
+          <span text-green>@[props.healing.pct]%</span>
+          of max health
+        <!-- /if -->
+      </component>
+    <!-- /if -->
+
+    <!-- if props.applications -->
+      <component src="/components/tooltip/Stat.html" label="Applications">
+        @[props.applications]
+      </component>
+    <!-- /if -->
+  </tooltip-stats>
+
+  <!-- if props.modifiers.length -->
+    <tooltip-modifiers>
+      <strong tooltip-title>Temporarily applies</strong>
+      <component src="/components/StatGroup.html" rows="@[props.modifiers]"></component>
+    </tooltip-modifiers>
+  <!-- /if -->
+
+  <!-- if props.statusEffects.length -->
+    <tooltip-status-effects>
+      <!-- each props.statusEffects as fx -->
+        <p m="0" mt="2">
+          This ability inflicts
+          <component src="/components/StatusChip.html" s="@[fx.chip]" round></component>
+          <!-- if fx.amount -->
+            <strong alt-num>@[fx.amount] </strong>
+          <!-- /if -->
+          <strong capitalize>@[fx.word]</strong>
+          <!-- if fx.convertsWord -->, which builds up to
+          <component src="/components/StatusChip.html" s="@[fx.convertsChip]" round></component>
+          <!-- if fx.convertsAmount -->
+            <strong alt-num>@[fx.convertsAmount] </strong>
+          <!-- /if -->
+          <strong capitalize>@[fx.convertsWord]</strong>
+          <!-- /if -->.
+        </p>
+      <!-- /each -->
+    </tooltip-status-effects>
+  <!-- /if -->
+
+  <!-- if props.unstoppable -->
+    <tooltip-status-effects>
+      <p m="0" mt="2">
+        This attack is
+        <component
+          src="/components/StatusChip.html"
+          s="@[props.unstoppable.chip]"
+          round
+        ></component>
+        <strong capitalize>unstoppable</strong>.
+      </p>
+    </tooltip-status-effects>
+  <!-- /if -->
+
+  <!-- if props.uninterruptable -->
+    <tooltip-status-effects>
+      <p m="0" mt="2">
+        This ability is
+        <component
+          src="/components/StatusChip.html"
+          s="@[props.uninterruptable.chip]"
+          round
+        ></component>
+        <strong alt-num uninterruptable-pct>@[props.uninterruptable.pct]%</strong>
+        <strong capitalize>uninterruptable</strong>.
+      </p>
+    </tooltip-status-effects>
+  <!-- /if -->
+
+  <!-- if props.description.extended -->
+    <p tooltip-desc>
+      <span alt-when-up>@[$.unsafe(props.description.simple)]</span>
+      <span alt-when-down>@[$.unsafe(props.description.extended)]</span>
+    </p>
+  <!-- /if -->
+
+  <span tooltip-alt-hint>
+    <span alt-when-up>~ Press alt for more info ~</span>
+    <span alt-when-down>~ Release alt for less info ~</span>
+  </span>
+</card>
+
+<style>
+  tooltip-stats {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+  }
+
+  [ability-card] [tooltip-name] {
+    min-height: 0;
+  }
+
+  [ability-kind] {
+    font-size: calc(var(--unit) * 2.8);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    margin-top: calc(var(--unit) * -1);
+    color: var(--muted-foreground);
+  }
+
+  [kind-word]:is([fire], [frost], [earth], [nature], [lightning]) {
+    font-weight: 600;
+    color: oklch(from var(--element-color) calc(l - 0.05 * var(--theme-sign)) c h);
+  }
+
+  [kind-word][multi] {
+    font-weight: 600;
+    color: oklch(from var(--hue-purple) calc(l - 0.05 * var(--theme-sign)) c h);
+  }
+
+  tooltip-modifiers {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--unit) * 1);
+  }
+
+  tooltip-modifiers [tooltip-title] {
+    color: var(--foreground);
+  }
+
+  [tooltip-alt-hint] {
+    margin-top: calc(var(--unit) * 2);
+    text-align: center;
+    font-size: calc(var(--unit) * 3);
+    color: var(--muted-foreground);
+  }
+
+  [tooltip-card] [alt-when-down] {
+    display: none;
+  }
+
+  [tooltip-stat] [alt-when-down]::before {
+    content: '\00a0';
+  }
+
+  body[alt-down] [tooltip-card] [alt-when-up] {
+    display: none;
+  }
+
+  body[alt-down] [tooltip-card] [alt-when-down] {
+    display: inline;
+  }
+
+  [tooltip-card] [alt-num] {
+    display: none;
+  }
+
+  body[alt-down] [tooltip-card] [alt-num] {
+    display: inline;
+  }
+
+  [uninterruptable-pct] {
+    color: var(--hue-green);
+  }
+</style>
diff --git a/components/tooltip/Countdown.html b/components/tooltip/Countdown.html
new file mode 100644
index 00000000..a6827eaa
--- /dev/null
+++ b/components/tooltip/Countdown.html
@@ -0,0 +1,29 @@
+<card countdown-card>
+  <crow countdown-row>
+    <!-- each props.countdown.split('') as char -->
+      <crow countdown-box m="-1">@[char]</crow>
+    <!-- /each -->
+  </crow>
+</card>
+
+<style>
+  [countdown-card] {
+    width: max-content;
+    padding: calc(var(--unit) * 2);
+    border-radius: calc(var(--unit) * 1);
+    background: var(--c-panel);
+  }
+
+  [countdown-box] {
+    min-width: calc(var(--unit) * 5);
+    align-self: stretch;
+    padding: calc(var(--unit) * 1) calc(var(--unit) * 0.5);
+    border-radius: calc(var(--unit) * 1);
+    color: var(--white);
+    font-family: var(--font-display);
+    font-size: calc(var(--unit) * 4.5);
+    line-height: 1;
+    -webkit-text-stroke: 0.5px var(--black);
+    filter: drop-shadow(0 1px 1px var(--scrim-3));
+  }
+</style>
diff --git a/components/tooltip/Display.html b/components/tooltip/Display.html
new file mode 100644
index 00000000..32e45e4f
--- /dev/null
+++ b/components/tooltip/Display.html
@@ -0,0 +1,15 @@
+<!-- if props.type -->
+  <component src="/components/tooltip/Ability.html" props="@[props]"></component>
+<!-- /if -->
+
+<!-- if !props.type && props.stats -->
+  <component src="/components/tooltip/Equipment.html" props="@[props]"></component>
+<!-- /if -->
+
+<!-- if !props.type && !props.stats && props.countdown -->
+  <component src="/components/tooltip/Countdown.html" props="@[props]"></component>
+<!-- /if -->
+
+<!-- if !props.type && !props.stats && !props.countdown -->
+  <component src="/components/tooltip/Text.html" props="@[props]"></component>
+<!-- /if -->
diff --git a/components/tooltip/Equipment.html b/components/tooltip/Equipment.html
new file mode 100644
index 00000000..e6b093ac
--- /dev/null
+++ b/components/tooltip/Equipment.html
@@ -0,0 +1 @@
+<component src="/components/EquipmentStats.html" props="@[props]"></component>
diff --git a/components/tooltip/Stat.html b/components/tooltip/Stat.html
new file mode 100644
index 00000000..853fda48
--- /dev/null
+++ b/components/tooltip/Stat.html
@@ -0,0 +1,5 @@
+<span tooltip-stat>
+  <strong>@[label]</strong>
+  <stat-leader></stat-leader>
+  <span><slot></slot></span>
+</span>
diff --git a/components/tooltip/Text.html b/components/tooltip/Text.html
new file mode 100644
index 00000000..e1dfa991
--- /dev/null
+++ b/components/tooltip/Text.html
@@ -0,0 +1,33 @@
+<card text-sm tooltip-card plain="@[props.plain]">
+  <!-- if props.chip -->
+    <crow left g="2" w="full" tooltip-heading>
+      <component src="/components/StatusChip.html" s="@[props.chip]" round></component>
+      <strong tooltip-name>@[props.name]</strong>
+    </crow>
+  <!-- /if -->
+
+  <!-- if props && props.name && !props.chip -->
+    <strong tooltip-name>@[props.name]</strong>
+  <!-- /if -->
+
+  <!-- if props && props.description -->
+    <p m="0" mt="2" tooltip-desc>@[$.unsafe(props.description)]</p>
+  <!-- /if -->
+
+  <!-- if !props || (!props.name && !props.description) -->
+    <span block>Tooltip</span>
+  <!-- /if -->
+</card>
+
+<style>
+  [tooltip-card][plain] {
+    width: max-content;
+    max-width: calc(var(--unit) * 76);
+    padding: calc(var(--unit) * 3);
+  }
+
+  [tooltip-card][plain] [tooltip-desc] {
+    margin: 0;
+    font-style: normal;
+  }
+</style>
diff --git a/css/Iconice.css b/css/Iconice.css
new file mode 100644
index 00000000..db98d239
--- /dev/null
+++ b/css/Iconice.css
@@ -0,0 +1,995 @@
+:root {
+  --icon-checkmark: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M96%20192%200%20288l192%20192%20320-320-96-96-224%20224z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-maxArmor: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201034%201024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M516.9%2C851.3c-37.1%2C0-72.1-10.1-106.1-22.9-39.9-14.8-78.5-32.4-117.8-48.8-15.2-6.4-23.6-18.1-26.7-34-11.7-60.7-40.6-112.9-78.8-160.4-15.7-19.4-15.7-28.9.4-48.1%2C47.6-56.5%2C75-123.1%2C92.9-193.9%2C6-23.4%2C9.7-47.4%2C13.9-71.3%2C3.3-19%2C9.3-21.6%2C26.9-15%2C29.3%2C10.6%2C58.7%2C21%2C88.9%2C28.7%2C11%2C2.9%2C24.9-.4%2C36-4.6%2C16.1-6%2C30.9-15.2%2C46.1-23.2%2C16.1-8.4%2C32.2-8.4%2C48.5%2C0%2C14.6%2C7.5%2C29.3%2C15%2C44.1%2C22.7%2C13.7%2C7.1%2C27.8%2C9.5%2C42.6%2C4.9%2C27.6-8.8%2C55.4-17.2%2C82.5-27.1%2C20.7-7.7%2C26.3-5.5%2C29.3%2C16.1%2C9.3%2C66%2C26.5%2C129.7%2C57.8%2C188.4%2C14.6%2C26.9%2C32.9%2C52.1%2C51%2C77%2C11.9%2C16.3%2C13.2%2C27.6.2%2C43.2-39.9%2C48.8-69.3%2C102.6-81.6%2C165-2.6%2C13-9.3%2C23.4-21.2%2C29.3-63.1%2C31.8-128.2%2C58.5-198.1%2C71.5-10.1%2C1.5-20.5%2C1.5-30.9%2C2.4h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M613%2C246.2c-7.5-2.4-17.9-4.9-27.4-9.3-14.8-6.6-28.9-14.6-43-22.3-17.2-9.3-34.2-9.3-51.4.2-14.8%2C8.2-29.8%2C15.9-45%2C23.4-13.9%2C7.1-28.5%2C9-43.9%2C5.1-56.9-14.1-111-34.9-156.2-73.2-18.5-15.7-34-35.3-48.5-54.9-12.1-16.3-7.1-33.3%2C10.4-44.1%2C34.9-21.8%2C69.9-43.5%2C105-64.6%2C17-10.4%2C30-7.7%2C46.3%2C8.4%2C75.9%2C74.8%2C202.3%2C84.7%2C288.8%2C22.7%2C10.1-7.3%2C19.2-15.9%2C28.2-24.5%2C15.2-14.3%2C28.2-16.5%2C45.7-5.7%2C34.9%2C21.2%2C69.5%2C42.6%2C104.1%2C64.2%2C17.2%2C10.8%2C21%2C27.1%2C10.4%2C44.6-21.8%2C36.4-53.4%2C62.4-89.6%2C82.9-36.6%2C21-75.7%2C35.5-116.7%2C45-4.6.7-9.3%2C1.1-17.2%2C2.2h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M659.8%2C1024c-14.3.2-22.3-7.3-29.6-16.8-19.6-25.4-43.9-44.3-75-53.6-54.7-16.1-111.4%2C3.1-149.1%2C50.7-17%2C21.2-24.5%2C23.6-50.3%2C15-56.5-18.5-109.2-44.8-157.9-79-14.1-9.9-15.9-21.4-4.6-34.2%2C21-23.8%2C37.9-50.3%2C51-79.4%2C6-13.5%2C15.9-17%2C28.7-10.1%2C71%2C37.7%2C147.8%2C58.5%2C225.7%2C76.1%2C13.7%2C3.1%2C29.6%2C1.8%2C43.5-1.3%2C69.5-15.4%2C138.1-34.9%2C202.7-66%2C6-2.9%2C11.7-6.2%2C17.6-9%2C12.1-5.7%2C22.1-2.9%2C27.4%2C9.3%2C13.5%2C30.2%2C30.9%2C57.4%2C52.7%2C82.3%2C9.9%2C11.2%2C7.7%2C23.4-4.6%2C32-51.8%2C36.4-107.9%2C64.2-168.3%2C82.5-1.8.4-3.5%2C1.1-5.3%2C1.3-2.2.2-4.2.2-4.4.2h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M41.9%2C70.6c.2-14.8%2C6.2-24.3%2C16.8-31.1%2C8.4-5.3%2C17-10.1%2C25.6-15.2%2C15-8.8%2C19.6-7.3%2C24%2C9.5%2C11%2C40.8%2C27.8%2C79%2C51.2%2C114%2C21.4%2C32.2%2C47.4%2C60%2C80.7%2C80.1%2C9.9%2C6%2C13.5%2C13.9%2C11.5%2C24.9-2.9%2C17-5.5%2C34-8.6%2C51-3.5%2C19.2-14.3%2C24-32%2C14.3-69.7-38.2-116-97.1-146-169.4-9-21.8-14.6-45.2-21.6-68.2-1.1-3.8-1.1-7.9-1.5-9.9h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M993.8%2C69.7c-6%2C20.7-11%2C41.9-18.3%2C62.2-27.4%2C74.6-71.3%2C136.3-139.6%2C178.9-6%2C3.8-11.9%2C7.1-18.3%2C10.1-11.5%2C5.3-22.3.9-24.9-11.2-4.4-20.7-7.9-41.9-10.4-62.9-.7-5.1%2C3.8-13.5%2C8.4-16.3%2C72.1-45.9%2C110.3-114.9%2C134.3-193.9.9-3.1%2C1.5-6.4%2C2.6-9.5%2C3.1-7.5%2C8.6-10.4%2C15.9-6.4%2C11.9%2C6.6%2C23.6%2C13.5%2C34.9%2C21.2%2C9.3%2C6.2%2C13.7%2C15.7%2C15.4%2C27.8h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M0%2C295.8c6.8-26.5%2C12.4-51.2%2C19.6-75.2%2C3.3-10.8%2C16.5-11.2%2C23.8-1.8%2C7.1%2C9.3%2C13.2%2C19.4%2C20.1%2C28.9%2C34.9%2C46.5%2C76.8%2C85.8%2C122.9%2C120.9%2C22.5%2C17.2%2C24.9%2C26%2C11.5%2C51.2-6%2C11-12.4%2C21.6-19.4%2C31.8-6.6%2C9.5-16.5%2C11.7-26%2C5.3-52.7-36-102.8-75-138.5-128.8C7.5%2C318.3%2C4.4%2C306.4%2C0%2C295.8h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23335cc1%22%0A%20%20%20%20d%3D%22M1033.9%2C295.6c-4.4%2C10.6-7.1%2C22.3-13.2%2C31.8-29.3%2C45.4-70.1%2C79.6-112.9%2C111.4-7.9%2C6-16.1%2C11.5-24.5%2C17-11.5%2C7.5-21.2%2C6-28.5-5.3-8.2-12.6-15.9-25.6-22.7-38.8-8.2-15.9-5.1-27.6%2C9.3-38.4%2C48.3-36.4%2C92.4-77%2C128.8-125.7%2C7.1-9.5%2C13-19.4%2C20.3-28.9s20.5-8.8%2C23.8%2C2c7.3%2C24.5%2C12.8%2C49%2C19.6%2C75h0Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-criticalChance: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22586%22%20height%3D%22640%22%20viewBox%3D%220%200%20586%20640%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M364.101%20544.969l-107.956-96.922-141.020%2033.966%2058.846-132.582-173.976-178.159%20242.413%2069.446%20118.159-240.718%206.31%20272.268%20219.048%2052.247-210.502%2075.864-11.322%20144.589z%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M549.868%20513.816l-237.473-85.276-114.085%20211.476%2012.44-246.884-108.496-56.574%20107.306-53.581%2016.009-122.883%2084.951%2090.251%20118.376-19.399-54.807%20109.362%20175.779%20173.507z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-criticalDamage: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22636%22%20height%3D%22640%22%20viewBox%3D%220%200%20636%20640%22%3E%0A%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M66.085%20583.409c29.785-5.026%2061.245-9.494%2092.333-16.196%2012.286-2.606%2024.572-9.122%2035.369-16.009%2024.2-15.451%2029.785-38.906%2017.313-64.596-9.122-18.802-23.642-33.322-39.093-46.911-29.226-25.689-62.362-45.98-96.987-63.665-21.408-10.983-43.56-20.663-65.526-31.088-2.42-1.117-4.654-2.42-9.494-4.84%2024.014%205.212%2045.422%2010.983%2067.016%2013.776%2020.105%202.793%2040.768%204.654%2060.873%202.793%2035.742-3.351%2050.448-25.503%2043.56-61.059-6.329-32.019-20.477-61.059-36.114-89.168-37.976-68.877-83.584-132.542-129.564-196.207-2.047-2.979-4.281-5.957-5.213-10.239%203.537%202.979%207.26%205.771%2010.797%208.749%2060.128%2051.006%20121.373%20100.337%20188.016%20142.781%2033.694%2021.407%2068.132%2041.885%20107.784%2051.192%205.399%201.303%2010.983%202.234%2016.567%202.606%2026.993%202.048%2044.491-12.844%2047.842-40.582%202.979-24.386-1.117-48.214-6.516-71.856-2.047-8.936-4.467-17.871-5.212-27.551%201.303%202.793%202.792%205.584%204.096%208.563%2019.919%2043.56%2042.257%2085.631%2070.366%20124.537%2015.637%2021.594%2032.763%2042.257%2055.288%2057.336%205.399%203.537%2011.169%206.702%2017.313%208.936%2019.733%207.446%2036.673%202.42%2049.331-14.334%2015.265-20.291%2020.477-44.305%2023.828-68.691%203.164-22.897%204.281-46.166%206.516-72.042%206.143%2024.945%2011.914%2047.283%2017.313%2069.622%2015.451%2066.457%2028.482%20133.473%2031.274%20201.792%201.861%2044.305%202.793%2089.168-11.542%20131.797-22.152%2066.643-69.808%20105.922-138.313%20119.325-63.479%2012.472-127.144%208.191-190.809-0.373-76.882-10.424-152.088-28.668-227.109-48.028-1.117-0.186-2.234-0.931-1.303-0.372zM310.32%20425.922c-0.559%200-1.117%200-1.676%200-1.117%208.563-2.606%2017.126-2.979%2025.689-4.096%2096.987%2082.839%20172.193%20178.523%20155.067%2061.059-10.983%20117.278-62.92%20123.421-136.637%204.84-57.894-25.689-120.628-87.121-149.296-54.171-25.317-108.901-3.164-128.261%2051.937-5.584%2016.009-5.957%2032.205-1.303%2048.586%203.723-3.351%207.074-6.143%2010.239-9.122%2016.567-14.52%2035.742-21.966%2058.080-20.105%2028.482%202.234%2044.491%2026.434%2035.742%2053.613-4.467%2014.147-13.776%2024.759-25.317%2033.508-21.78%2016.196-47.097%2018.988-72.601%2016.94-35.742-2.792-63.851-18.802-79.861-52.309-2.979-5.584-4.654-11.728-6.887-17.871z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-spin: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M304%2C480c-114.7%2C0-207.6-99.9-208-223.3%2C0-26.5-21.8-48.9-48.4-48.7-26.3.2-47.6%2C21.6-47.6%2C48%2C0%2C141.4%2C114.6%2C256%2C256%2C256s249.6-108.4%2C255.7-244.3c-5.6%2C118.3-96.5%2C212.3-207.7%2C212.3ZM256%2C0C118.5%2C0%2C6.4%2C108.4.3%2C244.3%2C5.9%2C126%2C96.8%2C32%2C208%2C32s207.6%2C99.9%2C208%2C223.3c0%2C26.5%2C21.8%2C48.9%2C48.4%2C48.7%2C26.3-.2%2C47.6-21.6%2C47.6-48C512%2C114.6%2C397.4%2C0%2C256%2C0Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-blockChance: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20782%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M.3%2C89h100.3c58.9.2%2C116.8-7.4%2C171.3-30%2C36.9-15.3%2C71.9-35.6%2C107.2-54.5%2C8.2-4.4%2C13.3-6.9%2C22.3-.8%2C86.3%2C58.9%2C182.1%2C86.8%2C286.6%2C85.3%2C30.4-.4%2C60.9%2C0%2C93.2%2C0v21.9c0%2C118.9-1.6%2C238%2C.4%2C356.9%2C1.9%2C112.7-32%2C212.8-97.1%2C303.3-75.7%2C105.3-174%2C185.3-284.9%2C250.8-4.3%2C2.5-12.5%2C3.1-16.6.7-127.3-75.6-238.2-168.6-315.8-297.2C21.3%2C649.1%2C1.2%2C565.8.5%2C477.7c-.9-121.8-.2-243.6-.2-365.4v-23.3H.3Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-error: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22768%22%20height%3D%22768%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M448.5%20384v-64.5h-129V384zm0%20127.5v-63h-129v63zm192-255v63H573q3%2021%203%2033V384h64.5v64.5H576V480q0%2010.5-3%2031.5h67.5V576h-90q-25.5%2043.5-69.75%2069.75T384%20672t-96.75-26.25T217.5%20576h-90v-64.5H195q-3-21-3-31.5v-31.5h-64.5V384H192v-31.5q0-12%203-33h-67.5v-63h90q22.5-37.5%2058.5-63L223.5%20141l45-45%2070.5%2069q22.5-4.5%2045-4.5t45%204.5l70.5-69%2045%2045-52.5%2052.5q37.5%2025.5%2058.5%2063z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-defeat: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M605.632%20178.688c-298.848%20434.176-196.544-8.32-449.184%20203.424l57.44%20225.888h-64.608l-117.28-461.12%2059.2-21.248c283.168-207.072%20135.296%20186.24%20500.384%2040.128%2011.648-4.704%2020.96%202.88%2014.048%2012.928z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-coin: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20346.8%20346.4%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M166.4.3l11.7-.3c128.9%2C4.3%2C210%2C143.3%2C146.7%2C257.7-69.2%2C125-253.5%2C115.9-310.3-15C-34.1%2C130.9%2C45.2%2C5.3%2C166.4.3ZM286.3%2C286.6c83.4-83.4%2C49.9-226.7-61.4-264.4C101.1-19.7-17.2%2C96.4%2C20.9%2C221.2c34.7%2C113.6%2C181.2%2C149.6%2C265.4%2C65.4Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M49.6%2C119c2.8%2C34.9%2C12.9%2C78.6%2C47.6%2C94.9%2C28.7%2C13.5%2C64.1%2C9.1%2C65%2C50.8s-4.4%2C41-11.7%2C47.8-23.1%2C1.1-32.2-2.7C31.3%2C274%2C.3%2C165.3%2C55.8%2C88.7%2C116.5%2C4.9%2C244%2C10.1%2C298.1%2C98.1c48.3%2C78.5%2C11.9%2C183.6-74.9%2C213.9s-20.4%2C8.3-27.9-1.1c-6-7.4-10.9-36.6-10.6-46.5%2C1.2-42.8%2C38-37.2%2C66.7-51.3%2C32.9-16.2%2C45.1-61.1%2C45.3-95.2-9%2C1.5-18.2%2C1.3-27.2%2C3.3-24%2C5.3-47.2%2C20.7-61.3%2C40.7.2-20.9-6.7-39.1-17.5-56.5-5.1-8.3-11.5-15.5-17-23.5-1.5-1-11.8%2C14.6-13%2C16.5-11.8%2C18.4-21.7%2C40.2-21%2C62.5-13.9-16.3-30.7-29.4-51.2-36.3-5.1-1.7-18.5-5.7-23.3-5.7h-15.5Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M173.3%2C168.2c3.4-.3%2C11.8%2C8%2C13.8%2C10.8%2C9.1%2C12.9%2C6.2%2C33-6%2C42.9s-8.1%2C5.2-14.4.4c-15.1-11.5-15.7-36.9-1.6-49.4%2C1.3-1.2%2C6.7-4.7%2C8.2-4.8Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-menu: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22768%22%20height%3D%22768%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M96%20416h576c17.664%200%2032-14.336%2032-32s-14.336-32-32-32H96c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032m0-192h576c17.664%200%2032-14.336%2032-32s-14.336-32-32-32H96c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032m0%20384h576c17.664%200%2032-14.336%2032-32s-14.336-32-32-32H96c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-info: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M397.824.001c42.88%200%2064.32%2029.184%2064.32%2062.624%200%2041.76-37.248%2080.384-85.728%2080.384-40.608%200-64.288-24-63.168-63.68%200-33.376%2028.192-79.328%2084.576-79.328m-131.936%20640c-33.856%200-58.656-20.864-34.976-112.768l38.848-162.944c6.752-26.048%207.872-36.512%200-36.512-10.144%200-54.048%2017.984-80.064%2035.744l-16.896-28.16c82.304-69.952%20176.992-110.944%20217.632-110.944%2033.824%200%2039.456%2040.736%2022.56%20103.36L368.48%20499.041c-7.872%2030.24-4.512%2040.672%203.392%2040.672%2010.144%200%2043.424-12.544%2076.128-38.624l19.2%2026.048c-80.064%2081.504-167.52%20112.864-201.312%20112.864%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-light: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22768%22%20height%3D%22768%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M576%20384c0-53.024-21.536-101.056-56.224-135.776S437.024%20192%20384%20192s-101.056%2021.536-135.776%2056.224S192%20330.976%20192%20384s21.536%20101.056%2056.224%20135.776S330.976%20576%20384%20576s101.056-21.536%20135.776-56.224S576%20437.024%20576%20384m-64%200c0%2035.36-14.304%2067.296-37.504%2090.496S419.36%20512%20384%20512s-67.296-14.304-90.496-37.504S256%20419.36%20256%20384s14.304-67.296%2037.504-90.496S348.64%20256%20384%20256s67.296%2014.304%2090.496%2037.504S512%20348.64%20512%20384M352%2032v64c0%2017.664%2014.336%2032%2032%2032s32-14.336%2032-32V32c0-17.664-14.336-32-32-32s-32%2014.336-32%2032m0%20640v64c0%2017.664%2014.336%2032%2032%2032s32-14.336%2032-32v-64c0-17.664-14.336-32-32-32s-32%2014.336-32%2032M112.416%20157.664l45.44%2045.44c12.512%2012.512%2032.768%2012.512%2045.248%200s12.512-32.768%200-45.248l-45.44-45.44c-12.512-12.512-32.768-12.512-45.248%200s-12.512%2032.768%200%2045.248m452.48%20452.48%2045.44%2045.44c12.512%2012.512%2032.768%2012.512%2045.248%200s12.512-32.768%200-45.248l-45.44-45.44c-12.512-12.512-32.768-12.512-45.248%200s-12.512%2032.768%200%2045.248M32%20416h64c17.664%200%2032-14.336%2032-32s-14.336-32-32-32H32c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032m640%200h64c17.664%200%2032-14.336%2032-32s-14.336-32-32-32h-64c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032M157.664%20655.584l45.44-45.44c12.512-12.512%2012.512-32.768%200-45.248s-32.768-12.512-45.248%200l-45.44%2045.44c-12.512%2012.512-12.512%2032.768%200%2045.248s32.768%2012.512%2045.248%200m452.48-452.48%2045.44-45.44c12.512-12.512%2012.512-32.768%200-45.248s-32.768-12.512-45.248%200l-45.44%2045.44c-12.512%2012.512-12.512%2032.768%200%2045.248s32.768%2012.512%2045.248%200%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-spinner-circle: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221024%22%20height%3D%221024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M512%200C229.376%200%200%20229.376%200%20512s229.376%20512%20512%20512%20512-229.376%20512-512S794.624%200%20512%200m0%20869.99c-198.246%200-357.99-159.744-358.81-358.81%200-198.246%20160.563-358.81%20358.81-358.81s358.81%20160.563%20358.81%20358.81S710.247%20869.99%20512%20869.99%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-success: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M265.408%20543.936a44.51%2044.51%200%200%201-35.552-17.696L115.52%20375.168c-14.88-19.616-11.008-47.552%208.64-62.432%2019.68-14.944%2047.616-11.008%2062.496%208.64l75.232%2099.328L451.04%20116.96c13.024-20.864%2040.544-27.264%2061.472-14.24%2020.896%2012.992%2027.328%2040.512%2014.272%2061.44L303.296%20522.88c-7.744%2012.512-21.152%2020.32-35.84%2020.992-.704.064-1.344.064-2.048.064%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-maxHealth: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221106%22%20height%3D%221024%22%0A%20%20viewBox%3D%220%200%201106%201024%22%3E%0A%20%20%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%20%20%3Cpath%20fill%3D%22%239f0712%22%0A%20%20%20%20d%3D%22M815.571%200c-116.202%200-216.204%2094.603-262.642%20193.309-46.437-98.707-146.44-193.309-262.642-193.309-160.263%200-290.288%20130.025-290.288%20290.288%200%20325.926%20328.734%20411.457%20552.93%20733.712%20211.884-320.31%20552.93-418.153%20552.93-733.712%200-160.263-130.025-290.288-290.288-290.288v0z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-__armor: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22803%22%20height%3D%221024%22%20viewBox%3D%220%200%20803%201024%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23335cc1%22%20d%3D%22M745.422%20712.93c-13.379-82.427-10.512-165.092-3.823-247.757%206.212-75.259-6.929-146.934-42.527-213.592-64.747-120.892-168.676-196.629-291.24-250.385-3.823-1.672-9.796-1.434-13.618%200.239-99.867%2043.244-187.311%20103.451-253.491%20191.134-59.013%2077.887-86.249%20166.048-80.276%20263.765%204.301%2064.030%209.079%20127.821%204.062%20192.090-6.212%2078.365-18.636%20154.818-64.269%20221.715%2012.424%2019.113%2035.838%2040.377%2066.419%2059.49%2058.774%2036.793%20123.042%2061.163%20188.984%2081.232%2015.53%204.778%2031.059%208.84%2046.589%2013.14%202.628-140.722%2025.086-278.1%2041.333-416.194-5.734-2.15-10.99-3.823-16.246-5.734-58.057-20.547-115.158-43.722-166.525-78.843-13.379-9.079-16.007-20.786-16.963-35.36h10.273c73.825%201.434%20146.695%2010.512%20219.565%2022.219%2011.707%201.911%2023.892%204.539%2035.36%203.106%2057.579-6.929%20115.158-15.291%20172.737-21.98%2025.564-2.867%2051.606-2.628%2077.409-3.823-1.911%2023.892-1.672%2026.52-19.83%2037.032-31.298%2018.158-62.835%2035.838-95.567%2051.128-27.237%2012.902-56.146%2022.219-84.338%2033.21%2016.246%20137.855%2038.466%20274.755%2041.094%20414.283%202.15-0.239%204.062-0.239%205.973-0.717%2069.525-18.397%20137.139-41.572%20200.452-75.737%2036.315-19.352%2070.242-42.049%2096.045-76.215-33.687-47.783-48.5-101.54-57.579-157.447zM403.293%20455.138l-0.717%200.478-0.717-0.478-28.909-18.636%2029.148-386.329%200.478-6.212%200.478%206.929%2027.476%20385.374-27.237%2018.874z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-dice: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22636%22%20height%3D%22640%22%20viewBox%3D%220%200%20636%20640%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M368.226%200c-1.844-0.041-3.835%200.416-6.361%201.272l-279.85%2082.173c-2.329%200.544-2.193%201.172-0.254%202.671l248.419%20198.314c4.574%203.793%206.726%204.262%2013.102%202.289l278.562-96.545c6.391-2.349%206.835-2.92%200.255-7.251l-244.486-178.839c-3.774-2.66-6.341-4.011-9.412-4.070zM336.299%2024.041c5.573-0.041%2011.456%200.571%2017.553%201.908%2024.393%205.348%2041.692%2020.254%2038.542%2033.199s-25.47%2019.086-49.863%2013.737c-24.393-5.348-41.692-20.127-38.542-33.072%202.362-9.709%2015.591-15.691%2032.308-15.773zM178.569%2071.997c5.572-0.041%2011.582%200.571%2017.681%201.908%2024.393%205.348%2041.565%2020.127%2038.415%2033.072s-25.47%2019.214-49.863%2013.865c-24.393-5.348-41.565-20.254-38.415-33.199%202.363-9.709%2015.464-15.563%2032.181-15.646zM417.573%2084.208c5.572-0.041%2011.583%200.699%2017.681%202.036%2024.393%205.348%2041.565%2020.127%2038.415%2033.072s-25.47%2019.086-49.863%2013.737c-24.393-5.348-41.565-20.127-38.415-33.072%202.363-9.708%2015.464-15.691%2032.183-15.773zM64.472%2099.599c-0.511%200.13-0.676%200.928-1.017%202.544l-63.091%20315.579c-0.735%203.282-0.606%204.096%202.417%206.742l239.647%20206.581c5.574%205.327%206.745%205.259%207.505-1.272l69.834-320.035c1.463-4.36-0.043-6.759-2.544-8.777l-250.212-199.811c-1.288-1.086-2.033-1.656-2.544-1.527zM259.096%20135.597c5.572-0.041%2011.582%200.571%2017.681%201.908%2024.393%205.348%2041.565%2020.128%2038.415%2033.072s-25.47%2019.086-49.863%2013.738c-24.393-5.348-41.565-20.127-38.415-33.072%202.362-9.709%2015.464-15.563%2032.181-15.646zM500.658%20146.155c5.573-0.041%2011.583%200.571%2017.681%201.908%2024.393%205.348%2041.565%2020.127%2038.415%2033.072s-25.47%2019.214-49.863%2013.865c-24.393-5.348-41.565-20.254-38.415-33.199%202.363-9.708%2015.464-15.563%2032.182-15.646zM79.996%20157.73c0.94-0.094%201.969-0.051%202.926%200%2011.479%200.608%2023.909%2011.366%2031.164%2028.62%209.674%2023.006%206.448%2048.826-7.123%2057.622s-32.43-2.688-42.102-25.694c-9.674-23.006-6.449-48.826%207.123-57.622%202.544-1.649%205.194-2.647%208.014-2.926zM342.164%20199.197c5.573-0.040%2011.583%200.571%2017.681%201.908%2024.393%205.347%2041.565%2020.127%2038.415%2033.072s-25.47%2019.086-49.863%2013.738c-24.393-5.348-41.565-20.127-38.415-33.072%202.362-9.709%2015.464-15.563%2032.181-15.646zM634.858%20207.974c-0.535%200.11-1.287%200.298-2.163%200.636l-286.081%2099.236c-5.827%202.399-5.652%203.378-6.614%207.759l-69.707%20319.026c-0.237%204.697-1.967%206.834%203.562%204.325l281.886-105.323c5.469-2.617%206.518-3.076%207.123-8.395l73.141-314.57c0.606-2.216%200.459-3.006-1.145-2.671zM588.429%20259.745c8.055%200.13%2014.376%204.048%2017.173%2011.576%205.592%2015.054-5.177%2039.147-24.168%2053.805s-38.928%2014.291-44.52-0.763c-5.593-15.054%205.176-39.148%2024.168-53.807%209.496-7.329%2019.294-10.942%2027.348-10.813zM241.681%20287.347c11.624%200.297%2024.304%2011.223%2031.672%2028.748%209.674%2023.006%206.576%2048.826-6.996%2057.622s-32.43-2.815-42.102-25.822c-9.674-23.006-6.449-48.699%207.123-57.494%202.545-1.649%205.193-2.647%208.014-2.926%200.764-0.079%201.515-0.146%202.289-0.126zM139.539%20324.236c11.624%200.298%2024.304%2011.223%2031.673%2028.748%209.674%2023.006%206.576%2048.826-6.996%2057.622s-32.43-2.815-42.102-25.822c-9.674-23.006-6.448-48.699%207.123-57.494%202.544-1.649%205.193-2.647%208.014-2.926%200.764-0.079%201.515-0.146%202.29-0.126zM38.923%20360.741c0.939-0.094%201.969-0.048%202.926%200%2011.479%200.607%2023.782%2011.493%2031.037%2028.747%209.674%2023.006%206.576%2048.699-6.996%2057.494s-32.43-2.688-42.103-25.694c-9.674-23.006-6.449-48.826%207.123-57.622%202.545-1.649%205.194-2.647%208.014-2.926zM481.079%20391.269c7.882%200.256%2014.165%204.166%2016.917%2011.576%205.593%2015.054-5.304%2039.147-24.296%2053.805-18.991%2014.658-38.928%2014.291-44.52-0.763s5.304-39.147%2024.296-53.805c8.309-6.413%2016.779-9.986%2024.168-10.685%201.188-0.114%202.308-0.163%203.434-0.126zM195.26%20493.413c0.94-0.094%201.969-0.048%202.926%200%2011.479%200.607%2023.909%2011.366%2031.164%2028.62%209.674%2023.006%206.449%2048.826-7.123%2057.622s-32.303-2.688-41.976-25.694c-9.674-23.006-6.576-48.826%206.996-57.622%202.545-1.649%205.194-2.646%208.014-2.926zM364.564%20526.484c8.055%200.13%2014.376%203.921%2017.172%2011.448%205.592%2015.054-5.176%2039.147-24.168%2053.805-18.991%2014.658-38.928%2014.418-44.52-0.636s5.176-39.147%2024.168-53.807c9.496-7.329%2019.294-10.942%2027.348-10.812z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-spinner-inner: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221024%22%20height%3D%221024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M0%20512C0%20229.376%20229.376%200%20512%200v154.01c-198.246%200-358.81%20160.563-358.81%20358.81z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stun: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221018%22%20height%3D%221024%22%0A%20%20viewBox%3D%220%200%201018%201024%22%3E%0A%20%20%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M105.736%20933.454c47.656-8.042%2097.992-15.19%20147.732-25.913%2019.658-4.17%2039.316-14.595%2056.591-25.615%2038.72-24.721%2047.656-62.25%2027.7-103.353-14.595-30.083-37.827-53.315-62.548-75.058-46.762-41.103-99.779-73.568-155.179-101.864-34.252-17.573-69.696-33.061-104.842-49.741-3.872-1.787-7.446-3.872-15.19-7.744%2038.422%208.34%2072.675%2017.573%20107.225%2022.041%2032.168%204.468%2065.229%207.446%2097.396%204.468%2057.187-5.361%2080.717-40.805%2069.696-97.694-10.127-51.23-32.763-97.694-57.782-142.669-60.761-110.204-133.734-212.067-207.302-313.931-3.276-4.766-6.85-9.531-8.34-16.382%205.659%204.766%2011.616%209.233%2017.275%2013.999%2096.205%2081.61%20194.197%20160.54%20300.826%20228.449%2053.91%2034.252%20109.012%2067.016%20172.454%2081.908%208.638%202.085%2017.573%203.574%2026.508%204.17%2043.188%203.276%2071.186-20.551%2076.547-64.931%204.766-39.018-1.787-77.143-10.425-114.969-3.276-14.297-7.148-28.593-8.34-44.081%202.085%204.468%204.468%208.935%206.553%2013.701%2031.87%2069.696%2067.611%20137.010%20112.586%20199.26%2025.019%2034.55%2052.421%2067.611%2088.461%2091.737%208.638%205.659%2017.871%2010.723%2027.7%2014.297%2031.572%2011.914%2058.676%203.872%2078.93-22.934%2024.424-32.465%2032.763-70.888%2038.124-109.906%205.063-36.635%206.85-73.866%2010.425-115.267%209.829%2039.912%2019.062%2075.653%2027.7%20111.395%2024.721%20106.332%2045.571%20213.557%2050.038%20322.867%202.978%2070.888%204.468%20142.669-18.467%20210.876-35.444%20106.629-111.693%20169.475-221.301%20190.92-101.566%2019.956-203.43%2013.105-305.294-0.596-123.011-16.679-243.341-45.869-363.374-76.845-1.787-0.298-3.574-1.489-2.085-0.596zM496.512%20681.475c-0.894%200-1.787%200-2.681%200-1.787%2013.701-4.17%2027.402-4.766%2041.103-6.553%20155.179%20132.542%20275.509%20285.636%20248.107%2097.694-17.573%20187.644-100.672%20197.473-218.62%207.744-92.631-41.103-193.005-139.393-238.874-86.674-40.507-174.241-5.063-205.217%2083.099-8.935%2025.615-9.531%2051.528-2.085%2077.738%205.957-5.361%2011.318-9.829%2016.382-14.595%2026.508-23.232%2057.187-35.146%2092.928-32.168%2045.571%203.574%2071.186%2042.294%2057.187%2085.78-7.148%2022.636-22.041%2039.614-40.507%2053.613-34.848%2025.913-75.355%2030.38-116.161%2027.104-57.187-4.468-102.162-30.083-127.777-83.695-4.766-8.935-7.446-18.764-11.020-28.593z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-warning: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M288%2064v256h-64V64zm-64%20384h64v-64h-64z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-victory: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22981%22%20height%3D%221024%22%0A%20%20viewBox%3D%220%200%20981%201024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD700%22%0A%20%20%20%20d%3D%22M341.732%20713.688c15.86-6.583%2031.42-11.67%2045.485-19.151%2024.837-12.867%2027.231-29.625%208.678-49.973-3.591-3.89-7.78-7.78-12.269-10.773-31.719-20.947-63.738-41.894-98.151-64.337-10.473%208.977-24.238%2020.947-39.5%2033.814%208.977%208.379%2016.757%2015.86%2026.333%2024.837-10.473%2019.75-21.246%2040.397-32.916%2062.84-169.968-171.764-251.063-375.247-237.896-617.333%2017.356%204.189%2033.814%207.481%2049.674%2012.269%202.992%200.898%205.985%206.883%206.284%2010.773%200.898%2013.466%200.299%2026.932%200.299%2041.594%2019.151%200%2037.704%200%2056.556%200%200-18.553%200.299-36.507%200-54.162-0.598-17.655%205.985-32.617%2022.144-38.602%2025.136-9.576%2050.871-19.451%2077.503-23.939%20116.704-20.049%20234.305-25.136%20352.505-18.553%2061.344%203.292%20122.988%208.678%20184.033%2015.86%2028.727%203.292%2057.155%2011.67%2084.386%2021.246%2026.932%209.276%2034.712%2024.238%2033.814%2052.666-0.598%2014.962-2.095%2029.625-2.992%2046.083%2019.451%200%2037.405%200%2057.155%200%200-12.867-0.299-25.735%200.299-38.602%200.299-4.189%202.693-10.773%205.386-11.97%2016.159-5.686%2032.916-9.576%2052.666-15.261%207.182%20240.589-63.14%20448.262-238.794%20618.53-12.269-22.443-23.64-42.791-35.011-63.738%209.276-8.678%2017.954-16.757%2028.129-26.932-14.064-11.97-27.231-23.64-37.704-32.617-34.113%2022.443-66.132%2043.689-98.45%2065.234-13.167%208.678-26.333%2019.75-25.136%2036.208%200.898%2017.356%2017.057%2024.538%2031.121%2030.523%2011.371%204.788%2023.041%208.379%2034.712%2012.269-13.167%205.985-26.632%2010.174-38.602%2017.356-28.727%2017.356-38.303%2042.791-26.932%2073.912%2018.852%2052.068%2058.651%2086.181%20106.53%20109.522%2020.049%209.875%2045.185%209.276%2067.628%2014.663%209.875%202.394%2020.049%206.583%2028.727%2011.97%2021.845%2013.466%2021.246%2040.697-2.693%2049.973-25.136%209.576-51.469%2017.057-78.102%2021.246-88.874%2013.765-178.646%2014.962-268.119%2011.97-66.431-2.095-133.162-5.087-197.499-23.341-8.379-2.394-17.057-5.686-24.538-9.875-22.144-12.867-22.443-40.098%201.197-50.572%2020.049-8.977%2041.894-17.057%2063.439-19.151%2040.996-3.89%2069.723-26.932%2096.355-54.162%2014.064-14.364%2026.632-31.121%2035.61-49.075%2021.545-42.791%206.883-77.802-38.004-95.757-8.079-2.992-15.86-5.087-23.341-7.481zM163.684%2076.605c13.765%203.89%2025.136%207.78%2036.807%2010.473%2074.212%2016.458%20149.62%2021.246%20225.328%2023.041%2065.833%201.197%20131.666%200.898%20197.199-3.292%2053.564-3.292%20106.53-12.568%20159.794-20.049%2011.072-1.496%2021.545-6.284%2036.208-10.473-117.601-49.674-558.382-46.981-655.336%200.299zM60.746%20196.002c13.466%20135.257%2054.761%20256.15%20141.84%20361.781%2011.97-12.568%2021.845-23.939%2032.916-33.814%207.481-6.883%207.78-11.371%202.095-19.75-14.663-22.443-29.326-44.886-41.894-68.526-37.704-71.818-59.549-149.022-72.416-228.919-0.598-3.89-5.386-10.174-8.678-10.174-17.356-1.197-34.712-0.598-53.863-0.598zM778.025%20551.799c82.59-105.033%20128.973-222.635%20141.84-355.797-15.86%200-29.625%201.197-42.791-0.299-15.86-2.095-19.151%205.686-20.947%2018.852-10.473%2070.621-29.924%20138.847-61.643%20202.885-16.458%2033.216-35.909%2064.935-54.761%2098.45%2011.67%2010.473%2024.238%2022.443%2038.303%2035.909z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-magicChance: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22742%22%20height%3D%22640%22%20viewBox%3D%220%200%20742%20640%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M497.898%2069.858c-3.037%2054.021-5.857%20108.257-9.112%20165.532%2030.156-31.674%2058.793-61.397%2087.214-91.119%200.651%200.434%201.302%200.651%201.952%201.085-9.329%2038.4-18.874%2076.583-28.854%20117.369%2031.241-10.414%2060.962-20.176%2093.505-31.024-22.129%2043.39-43.173%2084.393-65.085%20126.698%2021.261-3.905%2040.786-7.593%2060.529-11.498%200.434%200.651%200.651%201.519%201.085%202.169-16.705%2012.366-33.193%2025.166-50.115%2037.098-2.603%201.736-6.942%201.519-10.414%201.519-25.6%200.217-51.417%200-77.017%200.651-51.417%201.302-98.495%2012.366-129.519%2059.878-4.339-5.641-8.027-10.414-11.933-14.969-22.997-26.685-53.586-39.485-87.647-42.305-36.231-2.821-72.895-1.952-109.342-3.471-7.376-0.217-15.403-3.254-21.695-7.376-14.536-9.762-28.203-20.827-41.438-33.41%2026.251%204.773%2052.502%209.546%2081.573%2014.969-30.807-37.749-59.661-73.112-90.685-111.078%2036.881%207.376%2070.291%2013.885%20105.654%2020.827-11.498-26.034-22.346-50.549-34.495-77.885%2027.119%2013.451%2051.417%2025.6%2077.234%2038.4-3.905-47.078-7.81-92.203-11.715-137.329%200.867-0.434%201.519-0.867%202.386-1.085%2028.421%2037.749%2056.841%2075.715%2086.563%20115.417%2015.403-70.726%2030.373-139.715%2045.126-208.922%200.868%200%201.736%200%202.386%200%2020.176%2070.726%2040.136%20141.668%2061.179%20215.864%2024.298-50.983%2047.295-98.712%2070.074-146.657%200.868%200.217%201.736%200.434%202.603%200.651z%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M45.343%20459.933c21.261-14.752%2041.221-28.854%2061.397-42.739%202.386-1.736%206.074-2.169%209.112-2.169%2041.221%200.651%2082.224%200.868%20123.444%202.386%2017.139%200.651%2034.712%202.821%2051.2%206.726%2031.241%207.593%2052.502%2027.553%2065.085%2056.841%204.339%209.979%209.329%2019.526%2015.403%2032.109%206.074-11.281%2011.498-19.959%2015.403-29.288%2016.488-40.569%2047.946-61.179%2089.817-64%2041.654-2.821%2083.742-1.953%20125.614-2.603%200.651%200%201.519%200.217%202.169%200%2024.298-7.376%2042.956%203.471%2060.746%2018.224%2010.197%208.461%2021.695%2015.403%2034.061%2024.298-29.288%2010.414-57.057%2020.176-84.827%2029.939-77.885%2027.336-155.769%2054.888-233.871%2082.224-4.773%201.736-10.847%202.169-15.403%200.434-103.485-36.014-206.969-72.461-310.454-108.691-2.603-0.868-4.99-2.169-8.895-3.688z%22%3E%3C%2Fpath%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M732.203%20479.674c3.254%209.329%206.074%2017.573%209.546%2027.553-99.362%2034.712-197.857%2069.207-296.786%20103.919%200%209.762%200%2019.091%200%2028.854-48.162%200-95.674%200-144.488%200%200-5.857-0.651-11.281%200.217-16.488%201.302-8.895-2.821-12.366-10.847-15.186-93.071-32.326-186.142-64.868-278.997-97.41-3.254-1.085-6.726-2.386-10.848-3.905%203.254-9.329%206.291-18.007%209.546-27.336%20108.257%2037.966%20215.647%2075.498%20323.688%20113.464-1.736%205.858-3.254%2011.064-4.99%2016.922%2028.203%200%2055.756%200%2084.61%200-1.519-5.424-3.038-10.414-4.773-16.488%20107.607-37.749%20215.214-75.498%20324.122-113.898z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-damage: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221014%22%20height%3D%221024%22%20viewBox%3D%220%200%201014%201024%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%2315970f%22%20d%3D%22M222.8%20642.4l95.3-95.3%20158.3%20158.4-95.2%2095.2%2086.5%2086.5-77.2%2077.2-130.2-130.1-189.7%20189.7-70.6-70.6%20189.7-189.7-130.2-130.1%2077.2-77.2%2086.1%2086z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%2315970f%22%20d%3D%22M1005.4%2018.6l-57.1%20213.1%201.4%200.4-236.2%20236.2-158.3-158.3%20236.1-236.2%200.4%201.4%20213.1-57.1%200.6%200.5z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%2315970f%22%20d%3D%22M877.1%20538.2l77.1%2077.2-130%20130.1%20189.7%20189.7-70.6%2070.6-189.7-189.7-130.2%20130.2-77.2-77.2%2086.5-86.5-568.6-568.6%201.4-0.4-57-213.2%200.4-0.4%20213.2%2057.1%200.4-1.4%20568.6%20568.6%2086-86.1z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-claw: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221182%22%20height%3D%221024%22%20viewBox%3D%220%200%201182%201024%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M359.226%20108.106c43.918-64.563%2098.346-105.853%20175.672-108.106%2036.786-1.126%2065.314%2013.889%2085.584%2046.921%2075.449%20121.994%20118.24%20252.997%20111.109%20397.889-4.129%2088.211-28.528%20170.792-69.443%20248.868-0.751%201.501-2.252%202.628-8.258%209.76%209.76-254.499-109.607-440.68-294.663-595.331z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M917.021%20794.651c-8.258-61.185-13.513-120.493-24.774-178.674-14.639-77.701-47.296-148.645-93.466-212.457-14.639-19.894-16.891-40.54-19.144-62.686-7.883-75.073-28.528-146.768-59.683-215.836-1.501-3.378-2.252-6.757-3.378-10.886%2031.155-15.765%2063.437-21.396%2096.845-15.765%2026.276%204.504%2046.545%2018.393%2061.185%2041.666%2076.95%20122.745%20120.493%20254.874%20113.361%20400.891-4.129%2088.211-28.152%20170.792-69.067%20248.868-1.126%201.877-1.501%203.754-1.877%204.88z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M295.789%201024c-99.848-24.023-175.296-75.073-224.094-162.909-36.786-66.44-55.179-138.886-70.569-212.457-5.255-25.525%206.757-46.921%2025.15-63.437%2041.666-38.663%2091.965-47.672%20146.393-40.164%2011.636%201.501%2010.51%209.009%2010.51%2017.642-0.375%2063.812-1.877%20127.625%200.751%20191.062%203.003%2073.572%2031.531%20139.261%2068.692%20201.947%2013.138%2021.771%2027.026%2043.167%2043.167%2068.317z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M1108.833%20931.284c-6.006-52.927-9.76-104.727-17.642-155.402-8.633-55.179-27.026-107.73-51.425-158.029-3.378-6.757-6.006-15.765-5.255-22.897%2016.516-121.994-3.378-238.733-49.173-352.094-1.126-3.003-1.877-6.006-3.003-10.51%2034.909%200.375%2063.437%209.76%2082.956%2039.413%2060.809%2094.217%20101.349%20196.317%20113.361%20308.176%2012.762%20123.496-10.51%20240.61-69.818%20351.343z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-logo-apeegg-simple: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M305.249%20120.181C273.934%2053.884%20221.742%200%20169.834%200%20117.079%200%2064.323%2058.398%2033.008%20126.106%209.028%20178.861%200%20237.259%200%20278.167c0%2093.944%2076.171%20169.834%20169.834%20169.834s169.834-76.171%20169.834-169.834c0-41.753-9.31-104.383-34.418-157.985zM132.877%20390.166c-37.521.847-37.521-27.647-37.521-27.647%202.257-24.544%2020.03-19.184%2043.164-20.03s42.035%2016.927%2043.164%2026.801c.847%209.874-11.284%2020.03-48.806%2020.877zm115.949-180.272c0%2018.337%2014.952%2027.93%2018.056%2036.957%203.103%209.31%206.489%2027.083-2.821%2030.751-13.824%205.078-26.237-4.514-44.574-16.081s-7.617%2010.721-7.617%2010.721%2017.773%2028.493%2017.773%2055.295-21.441%2018.337-21.441%2018.337-30.468-25.108-69.683-25.108c-39.214%200-40.343%209.028-54.73%209.874-14.67.847-15.234-3.95-15.234-17.773s7.617-22.851%2018.056-34.7c7.335-8.181%206.489-23.134-5.925-16.927s-37.521%2015.234-38.368%200%2022.287-35.265%2022.287-49.934-32.161-29.904-33.854-41.471C29.34%20158.268%2047.678%2094.51%2081.532%2093.664c33.008-.847%2010.438%2028.493%2063.194%2029.904h6.771c7.899-.282%2021.723-.564%2043.728-20.594%2027.647-25.39%2052.192-20.03%2062.912-11.567s32.161%2020.03%2032.161%2057.552c0%2037.804-41.471%2042.317-41.471%2060.937z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M116.232%20208.201c-12.695%201.975-29.058-9.028-34.418-12.977-.847-.564-1.975-.282-2.257.847-6.489%2024.544%206.206%2023.98%2012.413%2025.955%206.489%201.975%202.539%206.489-.282%208.181-3.385%201.693-15.799-1.128-15.799-1.128.564%207.335%2014.388%205.078%2020.03%204.796%201.41%200%202.821-.564%203.95-1.693%206.489-5.642%2029.622-25.955%2016.363-23.98zm69.4%205.643c-11.849-.282%205.078%2014.67%2013.542%2021.723%203.103%202.539%206.771%204.232%2010.721%204.796%206.489.847%2015.799.847%2016.081-5.642%200%200-13.259%203.103-15.799%201.128s-7.053-6.206-.282-8.181c6.489-1.975%2030.186-1.411%2022.569-27.93-.282%200-30.186%2014.388-46.831%2014.106zm-10.72%2020.312c-6.206%200-34.418%2028.212-34.983%2033.008-.282%204.514-7.053-31.033-26.237-30.186-19.184.564-12.977%2013.259-11.003%2019.184s16.645%2017.491%2021.159%2017.773c0%200-13.824-13.541-13.824-18.902s1.41-7.053%205.36-7.053%209.31%203.103%2012.695%2010.72c2.539%205.925%206.206%2013.824%207.617%2017.491.564%201.128%201.411%201.693%202.821%201.693.847%200%201.975-.564%202.257-1.128%203.95-5.642%2021.441-28.776%2031.879-28.776%2011.849%200%207.053%2012.413%203.95%2014.952-3.103%202.821-9.874%207.617-20.03%209.592%200%200%2013.824%203.95%2029.622-11.567%2015.799-14.952-3.385-26.801-11.284-26.801z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-cross: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22m507.331%20411.33-.006-.005L352.003%20256l155.322-155.325.006-.005a15.9%2015.9%200%200%200%203.656-5.708c2.123-5.688.912-12.341-3.662-16.915L433.952%204.674c-4.574-4.573-11.225-5.783-16.914-3.66a15.9%2015.9%200%200%200-5.709%203.655q0%20.002-.004.005L256.001%20160%20100.677%204.675l-.005-.005a15.9%2015.9%200%200%200-5.707-3.655c-5.69-2.124-12.341-.913-16.915%203.66L4.676%2078.049C.102%2082.623-1.108%2089.275%201.015%2094.963a15.9%2015.9%200%200%200%203.656%205.708l.005.005L160.001%20256%204.676%20411.326l-.004.005a15.9%2015.9%200%200%200-3.657%205.707c-2.124%205.688-.913%2012.341%203.661%2016.915l73.374%2073.373c4.575%204.574%2011.226%205.784%2016.915%203.661a15.9%2015.9%200%200%200%205.708-3.656l.005-.005%20155.324-155.325%20155.324%20155.325.006.004a15.9%2015.9%200%200%200%205.707%203.657c5.689%202.123%2012.342.913%2016.914-3.661l73.373-73.374c4.574-4.574%205.785-11.227%203.662-16.915a15.9%2015.9%200%200%200-3.657-5.707%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-dodgeChance: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22646%22%20height%3D%22640%22%20viewBox%3D%220%200%20646%20640%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M570.938%20621.746c-134.549%2054.949-330.256-18.254-364.881-168.986-12.984%204.516-26.157%208.28-38.765%2013.549-8.28%203.576-12.984%201.694-18.254-4.892-21.641-26.721-43.658-53.255-65.675-80.164%209.786-12.42%2018.065-23.334%2025.216-32.555%2030.485%208.468%2059.653%2016.748%2088.821%2024.652%209.033%202.446%2018.442%203.952%2027.663%205.081%205.457%200.752%207.527%202.822%209.032%208.468%203.199%2012.42%208.092%2024.652%2012.608%2037.636%208.844-4.893%2015.807-8.468%2020.7-11.291-3.952-17.877-7.151-34.813-11.479-51.561-0.564-2.446-5.834-4.704-9.221-5.457-25.028-5.457-50.621-9.409-75.272-15.807-37.636-9.786-73.578-23.146-101.806-51.749-10.35-10.538-18.254-22.582-20.888-39.518%2064.922%2031.426%20130.597%2055.137%20202.67%2060.782%200.564-4.328%200.941-8.092%201.318-12.044%200.564-3.952%200.941-8.092%201.506-12.232-18.065-3.011-35.566-5.269-53.067-8.844-41.588-8.28-82.046-21.452-119.494-41.211-26.345-13.926-45.916-36.507-59.089-63.981-1.129-2.258-1.317-5.081-2.634-9.597%2074.331%2045.916%20152.238%2074.331%20238.612%2081.67%201.129-8.656%202.070-16.372%203.011-24.275-20.888-3.576-41.588-6.21-62.099-10.538-44.599-9.409-87.88-24.087-127.209-47.045-29.921-17.501-53.443-42.341-63.605-77.154-0.376-1.506-0.564-3.011-0.941-5.834%2082.046%2054.761%20170.868%2088.256%20267.592%20105.569%201.506-8.28%203.199-15.995%204.704-24.463-19.194-4.328-37.824-8.092-56.266-12.796-70.379-18.442-137.183-45.727-197.401-86.939-15.054-10.35-25.028-24.652-26.345-43.657-0.188-1.882%200.376-3.576%200.564-6.398%20106.51%2065.675%20226.381%2090.514%20346.251%20121.564-28.415%2044.411-44.222%2092.584-47.233%20144.711-3.011%2051.749%204.704%20102.182%2016.748%20152.99%207.527-1.506%2014.114-2.822%2020.888-4.328%201.129-0.188%202.258-1.129%202.822-1.506-4.328-25.404-9.409-50.244-12.608-75.272-6.774-54.196-3.952-107.827%2017.877-158.824%206.962-15.995%2016.184-31.050%2024.84-46.104%205.269-9.221%2012.044-17.501%2019.006-27.474-14.302-3.764-27.851-7.151-42.152-10.914%206.21-7.528%2012.42-14.114%2017.501-21.452%2017.501-24.84%2034.625-49.867%2052.126-74.707%202.258-3.199%206.774-7.151%2010.35-7.151%2071.508-0.941%20143.017-1.318%20214.525-1.694%201.129%200%202.446%200.376%204.516%200.752%200%205.081%200%2010.162%200%2015.054%200%2038.577-0.188%2077.154%200.188%20115.731%200%206.963-2.070%2010.162-8.656%2012.796-92.584%2037.259-171.056%2093.714-234.096%20171.432-20.512%2025.404-20.512%2025.404-10.35%2056.454%2023.522%2072.261%2057.207%20138.877%20109.332%20195.143%2019.571%2021.076%2041.964%2039.141%2068.498%2054.384z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+  --icon-logo-apeegg: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22777%22%20height%3D%22448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M305.249%20120.181C273.934%2053.884%20221.742%200%20169.834%200%20117.079%200%2064.323%2058.398%2033.008%20126.106%209.028%20178.861%200%20237.259%200%20278.167c0%2093.944%2076.171%20169.834%20169.834%20169.834s169.834-76.171%20169.834-169.834c0-41.753-9.31-104.383-34.418-157.985zM132.877%20390.166c-37.521.847-37.521-27.647-37.521-27.647%202.257-24.544%2020.03-19.184%2043.164-20.03s42.035%2016.927%2043.164%2026.801c.847%209.874-11.284%2020.03-48.806%2020.877zm115.949-180.272c0%2018.337%2014.952%2027.93%2018.056%2036.957%203.103%209.31%206.489%2027.083-2.821%2030.751-13.824%205.078-26.237-4.514-44.574-16.081s-7.617%2010.721-7.617%2010.721%2017.773%2028.493%2017.773%2055.295-21.441%2018.337-21.441%2018.337-30.468-25.108-69.683-25.108c-39.214%200-40.343%209.028-54.73%209.874-14.67.847-15.234-3.95-15.234-17.773s7.617-22.851%2018.056-34.7c7.335-8.181%206.489-23.134-5.925-16.927s-37.521%2015.234-38.368%200%2022.287-35.265%2022.287-49.934-32.161-29.904-33.854-41.471C29.34%20158.268%2047.678%2094.51%2081.532%2093.664c33.008-.847%2010.438%2028.493%2063.194%2029.904h6.771c7.899-.282%2021.723-.564%2043.728-20.594%2027.647-25.39%2052.192-20.03%2062.912-11.567s32.161%2020.03%2032.161%2057.552c0%2037.804-41.471%2042.317-41.471%2060.937z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M116.232%20208.201c-12.695%201.975-29.058-9.028-34.418-12.977-.847-.564-1.975-.282-2.257.847-6.489%2024.544%206.206%2023.98%2012.413%2025.955%206.489%201.975%202.539%206.489-.282%208.181-3.385%201.693-15.799-1.128-15.799-1.128.564%207.335%2014.388%205.078%2020.03%204.796%201.41%200%202.821-.564%203.95-1.693%206.489-5.642%2029.622-25.955%2016.363-23.98zm69.4%205.643c-11.849-.282%205.078%2014.67%2013.542%2021.723%203.103%202.539%206.771%204.232%2010.721%204.796%206.489.847%2015.799.847%2016.081-5.642%200%200-13.259%203.103-15.799%201.128s-7.053-6.206-.282-8.181c6.489-1.975%2030.186-1.411%2022.569-27.93-.282%200-30.186%2014.388-46.831%2014.106zm-10.72%2020.312c-6.206%200-34.418%2028.212-34.983%2033.008-.282%204.514-7.053-31.033-26.237-30.186-19.184.564-12.977%2013.259-11.003%2019.184s16.645%2017.491%2021.159%2017.773c0%200-13.824-13.541-13.824-18.902s1.41-7.053%205.36-7.053%209.31%203.103%2012.695%2010.72c2.539%205.925%206.206%2013.824%207.617%2017.491.564%201.128%201.411%201.693%202.821%201.693.847%200%201.975-.564%202.257-1.128%203.95-5.642%2021.441-28.776%2031.879-28.776%2011.849%200%207.053%2012.413%203.95%2014.952-3.103%202.821-9.874%207.617-20.03%209.592%200%200%2013.824%203.95%2029.622-11.567%2015.799-14.952-3.385-26.801-11.284-26.801zm309.199-77.3H451.95l-14.388%2043.446h-42.599l48.524-165.038h49.652l48.242%20165.038h-42.317zM601.189%2035.265c7.053%200%2013.542%201.128%2019.184%203.668s10.72%206.206%2014.67%2010.721c3.95%204.796%207.335%2010.156%209.31%2016.927q3.385%209.734%203.385%2022.005c0%207.899-1.128%2015.234-3.385%2021.723s-5.36%2012.131-9.31%2016.927-9.028%208.463-14.67%2011.003-12.131%203.95-19.184%203.95h-12.413v58.116h-37.803V35.267h50.217zm160.806%2037.239h-63.758v26.801h46.831v37.239h-46.831v26.519h63.758v37.239H660.998V35.264h100.997zM502.73%20279.013h-64.04v26.519h47.114v37.239h-47.113v26.519h64.04v37.239H401.452V241.773h101.279zm134.005%2097.048c-2.821%203.95-6.206%207.899-10.156%2011.567s-8.181%207.053-12.977%209.874-10.156%205.078-15.799%206.771-11.849%202.539-18.056%202.539h-.282c-9.874%200-18.62-1.693-26.237-4.796-7.617-3.385-13.824-7.899-18.902-13.541s-9.028-12.695-11.849-20.594-4.232-16.645-4.796-26.237v-34.136c0-8.746%201.41-17.209%203.95-25.39%202.539-7.899%206.489-14.952%2011.849-20.877%205.078-5.925%2011.567-10.721%2019.184-14.388s16.645-5.36%2026.519-5.36h.282q15.234.846%2024.544%205.078c6.206%203.103%2011.284%206.489%2014.952%2010.438s6.489%207.899%208.463%2011.849q2.963%205.925%205.078%209.31l-30.468%2020.312c-.847-1.693-1.693-3.385-2.539-5.642s-2.257-3.95-3.95-5.642-3.95-3.385-6.206-4.514c-2.539-1.128-5.642-1.975-9.592-1.975-7.335%200-13.259%202.539-17.491%207.335-4.232%205.078-6.489%2011.567-6.489%2019.748v32.161c0%203.95.564%207.617%201.975%2011.284%201.411%203.385%203.103%206.489%205.36%208.746%202.257%202.539%205.078%204.514%208.181%205.925s6.489%202.257%2010.156%202.257c5.078.282%209.31-.847%2012.413-2.539%203.103-1.975%205.642-4.232%207.335-7.335v-8.181h-17.491v-31.879h53.32v57.834zm140.212%200c-2.821%203.95-6.206%207.899-10.156%2011.567s-8.181%207.053-12.977%209.874-10.156%205.078-15.799%206.771-11.849%202.539-18.056%202.539h-.564c-9.874%200-18.62-1.693-26.237-4.796-7.617-3.385-13.824-7.899-18.902-13.541s-9.028-12.695-11.849-20.594-4.232-16.645-4.514-26.237v-34.136c0-8.746%201.41-17.209%203.95-25.39%202.539-7.899%206.489-14.952%2011.849-20.877%205.078-5.925%2011.567-10.721%2019.184-14.388s16.645-5.36%2026.519-5.36h.282q15.234.846%2024.544%205.078c6.206%203.103%2011.284%206.489%2014.952%2010.438s6.489%207.899%208.463%2011.849q2.963%205.925%205.078%209.31l-30.468%2020.312c-.847-1.693-1.693-3.385-2.539-5.642s-2.257-3.95-3.95-5.642-3.95-3.385-6.206-4.514c-2.539-1.128-5.642-1.975-9.592-1.975-7.335%200-13.259%202.539-17.491%207.335-4.232%205.078-6.489%2011.567-6.489%2019.748v32.161c0%203.95.564%207.617%201.975%2011.284%201.41%203.385%203.103%206.489%205.36%208.746%202.257%202.539%205.078%204.514%208.181%205.925s6.489%202.257%2010.156%202.257c5.078.282%209.31-.847%2012.413-2.539%203.103-1.975%205.642-4.232%207.335-7.335v-8.181h-17.491v-31.879h53.32v57.834z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-dark: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22448%22%20height%3D%22448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M355.656%20325.63c-9%201.5-18.25%202.25-27.5%202.25-92.75%200-168-75.25-168-168%200-31.75%209.25-62.75%2026-89.25-66.5%2019.75-114%2080.75-114%20153.25%200%2088.25%2071.75%20160%20160%20160%2048.25%200%2093.5-22%20123.5-58.25m50.75-21.249c-31.25%2067.75-99.75%20111.5-174.25%20111.5-105.75%200-192-86.25-192-192%200-103.75%2081.25-188%20184.75-191.75%207-.25%2012.75%203.75%2015.25%209.75%202.75%206.25%201%2013.5-3.75%2018-28.5%2026-44.25%2061.5-44.25%20100%200%2075%2061%20136%20136%20136q29.625%200%2057-12.75c6.25-2.75%2013.25-1.5%2018%203.25s6%2012%203.25%2018%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-bite: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20342.4%20336%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M299.7%2C15.2c5.4%2C6.2%2C15.6%2C23.8%2C19.8%2C31.7%2C18%2C33.6%2C24.8%2C69.9%2C22.5%2C108-1.4.1-1.6-2.4-2-3.5-3.2-9.5-5.6-19.4-9.2-28.8-8.3-21.3-20.5-41.5-35.5-58.8-3.5-2.1-10.4%2C0-12.1-1.1s-4-7.4-5.3-9.2c-5.9-7.9-13.2-15.6-22.8-18.7%2C23.6%2C37.5%2C19.7%2C86.5%2C17%2C129-2.8.5-1.6-.7-2.2-2.2-7.9-19.8-13.2-42.6-21-63-3.9-10.3-8.2-21.2-13.4-30.7-2.6-.7-11.5%2C7.7-13.9%2C9.9-68.6%2C62.5-68.6%2C129.7.5%2C191.5%2C3.8%2C3.4%2C15%2C13.4%2C19.5%2C13.6l41.5-88.1c-3.7%2C37.3-5.6%2C75.5-18.5%2C111l-9.5%2C18c4.7-2.8%2C9.3-6.4%2C13-10.5%2C3.3-3.8%2C12.9-21.3%2C14-22%2C3.5-2.1%2C10.5%2C3.3%2C14.9-2.1%2C1.8-2.2%2C5.8-11.4%2C7.3-14.7%2C10.7-23%2C16.7-47.3%2C24.8-71.2.4-1.1.6-3.6%2C2-3.5.5%2C30.1.4%2C59.5-5.5%2C89-5.7%2C28.5-8.1%2C41.9-40%2C46-66.1%2C8.4-152.1-29.7-205.8-66.2-9.8-6.6-37-25-41.9-34.1-15.3-29%2C7.3-82-8.8-102.2s-19.2-6-29-6C2.8%2C91.4%2C17.6%2C55.7%2C47.7%2C36.1c27-17.5%2C61-23.8%2C90.7-9.2%2C34.9-15.6%2C132.4-44.9%2C161.3-11.7ZM60%2C65.9h20.5c6.6%2C0%2C23.1-5.5%2C29.2-8.8s17.4-12.8%2C19.2-17.8-.4-1.2-1.2-1.6c-16.6-9.5-39.8-5.7-56.5%2C1.5-1.9%2C9.7-6.8%2C18.2-11.2%2C26.8ZM204%2C75.9c-38.6%2C10.1-100.6%2C38-108.8%2C81.7s-.8%2C16.7-.2%2C25.3l-4.7-9.8c-5.3-18.3-2.5-33.6%2C4.5-50.9.9-2.3%2C6.2-10.7%2C5.1-12.2l-11.9-5.1c-8.9%2C18-15.7%2C35.8-14%2C56.5%2C4.7%2C57.3%2C81.2%2C92.2%2C128.5%2C108.5l-22.3-26.7c-27.6-38.7-32.3-79.7-9.7-122.3%2C8.8-16.7%2C21.1-31%2C33.5-45Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-block: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20782%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M.3%2C89h100.3c58.9.2%2C116.8-7.4%2C171.3-30%2C36.9-15.3%2C71.9-35.6%2C107.2-54.5%2C8.2-4.4%2C13.3-6.9%2C22.3-.8%2C86.3%2C58.9%2C182.1%2C86.8%2C286.6%2C85.3%2C30.4-.4%2C60.9%2C0%2C93.2%2C0v21.9c0%2C118.9-1.6%2C238%2C.4%2C356.9%2C1.9%2C112.7-32%2C212.8-97.1%2C303.3-75.7%2C105.3-174%2C185.3-284.9%2C250.8-4.3%2C2.5-12.5%2C3.1-16.6.7-127.3-75.6-238.2-168.6-315.8-297.2C21.3%2C649.1%2C1.2%2C565.8.5%2C477.7c-.9-121.8-.2-243.6-.2-365.4v-23.3H.3Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-bowshot: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20345.7%20347%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M227.7%2C24l-6.6%2C14.1-139.8%2C5.9-4.4%2C25.3%2C149.9%2C143.2%2C94.7%2C20.8%2C24.2%2C113.8-112.6-24.9-21.6-94.4L69%2C76l-22.6%2C3.2-1.5%2C1.5-7.1%2C140.6-14%2C6.7%2C8-159.5L1.7%2C31l32%2C2L30.7%2C0l39.5%2C31%2C157.5-6.9ZM295.7%2C241l-70-15%2C15%2C70%2C19-34.5c11.4-7.8%2C24.9-12.5%2C36-20.5ZM311.7%2C249l-40.9%2C21.6-22.1%2C41.4%2C80%2C17-17-80Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M213.7%2C298c-21.8%2C3.3-43.9-.8-65-6.5-24.9-6.7-72.5-29.3-96-23-24.8%2C6.5-33.3%2C28.7-15.5%2C48.6%2C10.6%2C11.8%2C19.1%2C10.3%2C32.8%2C6.8s2.6-1.8%2C1.7.7c-8.6%2C24.5-40.3%2C22-56%2C5s-21.7-61.3%2C3-82c37.3-31.4%2C74.5-3.8%2C112.5%2C8.5s49.8%2C12.6%2C73%2C2l9.5%2C39.9Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M322.7%2C72c6.7-16%2C2-30.1-13-38.5-16.9-9.5-30.5-5.2-38.9%2C12.1-12.4%2C25.4%2C7.6%2C63.8%2C15.6%2C89.2%2C8.2%2C26.3%2C14.6%2C51.2%2C12.3%2C79.2l-41-8c17.7-42.6-7.1-81.4-20-120.5-6.1-18.5-9.4-31.3-.8-49.9%2C16-34.8%2C52.6-45.2%2C85-24.3%2C23.4%2C15.1%2C30.3%2C48.7.9%2C60.6Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-demoShout: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20340.3%20332.2%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M161.2.5c68-7.7%2C98.3%2C79.9%2C98.3%2C134.2%2C0%2C55.5-34.5%2C152.4-106.6%2C132.5-54.9-15.1-74.3-96-71.5-145.5C83.9%2C77.8%2C110.4%2C6.3%2C161.2.5ZM159%2C110.6c-15.6-14.8-39.7-15.8-57.7-4.8l5.1%2C12.4c16.2-10%2C35.3-8%2C47.6%2C6.9l10.3-8.4c-2.3-1.4-3.7-4.6-5.3-6.1ZM234.4%2C118.2l4.6-12c-20.4-12.7-47.9-8.8-62.5%2C10.5l9.5%2C9.5c12.8-16.3%2C30.9-17%2C48.5-8ZM165.2%2C147.5c-44.7%2C4.2-66.7%2C57.4-37.3%2C91.7%2C27.8%2C32.6%2C82%2C21.8%2C95-19%2C12.1-37.9-18.1-76.4-57.7-72.7Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M207.4%2C332.2l32.5-23c59.2-53.9%2C86.3-138.3%2C75.4-217.3l-4.3-22.7c67.9%2C97.7%2C12.1%2C238.2-103.5%2C263Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M133.4%2C331.2c-1.1%2C2.3-6.8-.2-8.8-.8C13.6%2C299.6-35.9%2C165.8%2C28.9%2C70.2l-6.5%2C44.5c-2.5%2C83.5%2C34.7%2C176.2%2C111%2C216.5Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M143.4%2C288.2c.2%2C1.8-2.2%2C1-3.3.8-9.3-1.8-23.4-8.5-31.7-13.4-61.2-36.4-79.7-118.2-39.6-177.4l-4.5%2C26.5c-4.2%2C62.5%2C22.5%2C132.4%2C79%2C163.5Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M195.4%2C290.2c7.1-5.5%2C15.2-9.6%2C22-15.5%2C40.5-34.7%2C60.9-91.2%2C59-144l-4.5-31.5c48.7%2C71.8%2C7.4%2C172.5-76.5%2C191Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-fillArmor: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20299.2%20339.9%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M113.1%2C13v35h75V13h21v37h34l-3.9%2C45.4%2C1.6%2C1.4%2C34.3%2C7.2-8%2C30-29.3-3.8-37.6%2C77.4%2C23%2C20.1-16.6%2C24.3-29.9-20.9-27%2C29-25.5-30h-1.4c-8.9%2C5.2-19.3%2C16.7-28%2C21.1-1%2C.5-2.3%2C1.5-3.5.8l-15-24.3%2C22.8-20.9-37.5-76.5-29.3%2C3.8-8.1-30%2C34.3-7.2%2C1.6-1.4-3.9-45.4h36V13h21ZM223.1%2C66H76.1c-4.3%2C65.6%2C27.8%2C125.5%2C73.5%2C170%2C45.9-44.2%2C77.9-104.5%2C73.5-170Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M119.8%2C249.1c1.2-.3%2C2%2C0%2C2.9.8l26.9%2C30.1%2C29-30.7%2C30.5%2C22.3c-17.9%2C24.2-37.6%2C46.9-58.6%2C68.4-23-20-41.9-44.2-60.3-68.4l29.6-22.4Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M79.1%2C36h-36l2%2C50-36%2C7.6C1.4%2C63.1-.5%2C31.4.1%2C0h77.5l1.5%2C1.5v34.5Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M299.1%2C0c.6%2C31.4-1.7%2C63-9%2C93.6l-36-7.6c2.5-16.5%2C2-33.3%2C2-50h-33V0h76Z%22%20%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23000%22%20points%3D%22284.1%20150%20245.6%20230%20217.1%20204.4%20245.1%20144%20284.1%20150%22%20%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23000%22%20points%3D%2252.1%20230%2015.1%20150%2054.2%20144.4%2081.7%20202%2081.7%20205%2052.1%20230%22%20%2F%3E%0A%20%20%3Crect%20fill%3D%22%23000%22%20x%3D%22127.1%22%20y%3D%221%22%20width%3D%2247%22%20height%3D%2234%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M210.1%2C80c-1.3%2C51.4-24.9%2C99.8-60.5%2C136-35.7-36.4-59-84.3-60.5-136h121Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-cheese: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20342%20293.1%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23f7d857%22%0A%20%20%20%20d%3D%22M342%2C55.1v148.5l-111.4%2C29.4c-1.4-.4-3.2-7.5-4.4-9.6-25-45.4-104.8-20.2-86.2%2C33.7L.5%2C293.1l-.5-10c11.9-.9%2C23.5-8.5%2C30.9-17.6%2C22.4-27.5%2C3.8-60.2-31-52.5v-70l49-12c-1%2C14.6%2C10.7%2C26.4%2C24.6%2C28.9%2C27.2%2C4.9%2C58.9-19.9%2C51.4-48.9l217-56ZM268.8%2C150.4c-38.2%2C5.6-24.6%2C61.5%2C15%2C49%2C31.2-9.8%2C19.7-54.1-15-49Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23ccb34c%22%0A%20%20%20%20d%3D%22M330%2C44.1l-213%2C54.5c-22.3-19.5-53.3-4.1-66.7%2C18.3L1%2C129.1%2C89%2C54.6c12.6%2C7.4%2C24.5%2C10.1%2C39.1%2C7.1%2C28.1-5.7%2C45.8-35.7%2C18-55.1%2C0-.4%2C6-5.1%2C6.7-5.3%2C2.1-.6%2C16.2-1.2%2C19.7-1.3%2C45.9-.9%2C109.3%2C9.2%2C147.7%2C35.4%2C1.2.8%2C10.6%2C7.6%2C9.9%2C8.6Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23ccb34c%22%0A%20%20%20%20d%3D%22M66.3%2C141.8c-10.1-10.1-.4-26.2%2C9.3-32.5%2C22.8-14.9%2C50.2%2C2%2C30.8%2C25.8s-29.4%2C17.5-40.1%2C6.7Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23ccb34c%22%0A%20%20%20%20d%3D%22M215%2C231.1c-22.8-3-46.2-.6-62.5%2C17-3.7-5.8-.9-15.3%2C3.1-20.9%2C14.3-19.9%2C47.7-17.7%2C59.4%2C3.9Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23ccb34c%22%0A%20%20%20%20d%3D%22M268.7%2C164.3c6.6-1.4%2C17.9.3%2C19.2%2C8.3%2C2.9%2C18.1-27.1%2C19.2-28.8%2C3.7s4.6-11%2C9.6-12Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-lacerate: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20345.8%20350.3%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M0%2C257v-39c72.4-20.1%2C148.1-42.5%2C213.7-79.8%2C34.2-19.5%2C77.3-48.7%2C81.8-91.2%2C19.6-11.8%2C35.7-27.7%2C48-47%2C6.9%2C38.2-1.8%2C77.3-24.3%2C108.7-16.7%2C23.3-31.1%2C32.9-42%2C62s-13.7%2C41.6-13.3%2C51.7c.8%2C23.6%2C28.3%2C50.9%2C30.9%2C76.1%2C5%2C47.2-65.8%2C47.5-64.9%2C5.9.5-23.2%2C22.8-49.9%2C28.6-73.5%2C2-8%2C2.6-10-1.7-17.3-20.6-35.6-93.8-24.1-92.9%2C19.8s18.2%2C20.1%2C6.6%2C34.6c-6.8%2C8.5-19.2%2C9.6-27%2C2-14.9-14.5%2C13.8-28.7%2C2-42-9.9-11.2-37.1-2.2-48.6%2C3.5-18.5%2C9.3-44.6%2C33.2-45.8%2C55.3-.8%2C14.9%2C17%2C33.1%2C16.8%2C48.7s-22%2C20.1-31.4%2C8.4%2C12.5-38%2C13.4-54.6-6.4-25.1-13-30.8c-12-10.2-23.7-5.6-36.9-1.6Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M0%2C204v-51.5c7.9-3.7%2C17.4-4.6%2C26-7%2C43-12.1%2C88.8-31.7%2C128-53s31-20.3%2C36.9-22.1%2C15.5.8%2C20.6.6c6.6-.2%2C15-1.4%2C21.7-2.3%2C16.2-2.4%2C31.6-7.4%2C46.8-13.2-12.4%2C36.4-53.5%2C60.9-86%2C78C133.2%2C165.6%2C66%2C185.5%2C0%2C204Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M320%2C130l5.5%2C18c5.1%2C14.4%2C24.6%2C38.8%2C11%2C53s-36.7%2C6.1-37.6-12.5c-.9-19.8%2C19.8-38.1%2C21.1-58.5Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-kick: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20772.8%20803.3%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M432.2%2C727.4c-59.6%2C7.8-125.8%2C5.3-176.6-30.6-47.1-33.3-69.8-89.1-113.3-126.3-19.4-16.6-40.7-23.8-62.2-36-22.8-12.9-65.3-42.1-75.9-65.9-17.4-38.9%2C23.4-82.3%2C50.2-106.3%2C22.6-20.2%2C49.3-35%2C75.4-49.9%2C14%2C15.8%2C21.4%2C37.9%2C26.7%2C58.1%2C2%2C7.8%2C6.6%2C38.2%2C10%2C42.2%2C3.9%2C4.6%2C6.4%2C4.4%2C11.7%2C4.8%2C18.9%2C1.5%2C40.3-.3%2C60%2C.8%2C26.2%2C1.4%2C52.5%2C3.9%2C78.1%2C10%2C0%2C10.4%2C0%2C21%2C3.4%2C30.9%2C5.6%2C15.9%2C14.1%2C32.4%2C20%2C48.8%2C14.5%2C39.8%2C24.4%2C105.3%2C64.9%2C125.2s53.7%2C12.1%2C86.9%2C11.3c50-1.2%2C27.3%2C43%2C2.7%2C61.6-17.2%2C13-41%2C18.3-61.9%2C21.1Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M140.2%2C306c27.5-18.2%2C49.8-43.1%2C69.4-69.6%2C47.1-72.8%2C91-147.8%2C138.6-220.3%2C2.4-3.6%2C8.6-14.1%2C11.6-15.7s3.9-.6%2C5-.3l197.2%2C152.5c5.8%2C4.8%2C3.9%2C9.3-.4%2C14.3-15.1%2C17.6-36.6%2C35.6-53.3%2C52.4-37.3%2C37.5-73.9%2C75.8-111.3%2C113.2-19.3%2C19.3-44.4%2C39.6-61.7%2C59.9-6.3%2C7.4-9.7%2C15.5-14.1%2C23.9-34-7.4-68.7-10.6-103.4-11.9s-37.6.7-39.3-.4c-2.6-1.6-2.1-8-2.8-11.1-6.6-30.6-14.7-62.8-35.4-87.2Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M543.9%2C524.4l141.5-104.1c3.1.2%2C3.1%2C3.7%2C2%2C6l-100.5%2C156%2C175.7-28.9c4.2-.8%2C7.6%2C3.5%2C3.3%2C6.4l-143.9%2C85%2C150.9%2C76.1-.8%2C2.9-155-8.5%2C50%2C85.5c-2.5%2C7-10.6-3.5-13.5-6.5-16.3-17-31.9-34.8-48-52-13.3-14.3-28.5-27.2-39.4-43.7l.3-2.3%2C45.6-10-52.4-28.1c-1-.5-1.7-1.2-1.7-2.4%2C0-3.5%2C45.9-33.9%2C51.1-39.5l-64.5%2C3c-1.2%2C0-2-.5-2.4-1.6-1.7-5%2C31.1-67.2%2C33.9-77.3-2.2-2.1-46.6%2C32.6-52.5%2C32.1s-2.3-1.6-2.8-3.2c-2.9-9.3-2.7-22.4-5.6-32.4-.4-1.5.6-1.7-2-1.5l-18.6%2C43c-1.4.2-3-2-3.8-3-7.1-9.3-11.1-21.9-18.6-30.9l-8.2%2C50.3c-.9%2C2.6-5.4%2C1.6-7.8%2C1.6l-36.1-198.5h3s69%2C115.5%2C69%2C115.5l55-169.5c.7-2%2C2.5-4.7%2C4.6-2.5l-7.6%2C183.1Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-punch: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22705%22%20height%3D%221024%22%20viewBox%3D%220%200%20705%201024%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M379.019%201023.979c-43.565%200-87.131%200.106-130.696-0.106-6.652-0.021-13.622-0.489-19.87-2.508-14.047-4.548-20.72-16.3-20.805-34.491-0.298-71.894-0.744-143.787-0.723-215.702%200-26.777-7.629-50.727-22.782-72.659-57.358-82.966-114.609-166.037-171.818-249.13-16.427-23.844-16.364-42.248-0.234-66.581%2040.696-61.353%2081.393-122.706%20122.111-184.037%2015.556-23.419%2032.387-29.093%2059.249-19.806%2067.155%2023.228%20134.373%2046.264%20201.336%2070.023%2011.476%204.080%2022.484%2010.349%2032.6%2017.214%2012.623%208.564%2018.085%2021.676%2016.449%2036.956-2.083%2019.615-9.669%2036.935-24.29%2050.536-14.663%2013.643-33.003%2015.981-50.77%2010.626-35.15-10.541-70.278-21.74-104.217-35.617-34.47-14.090-54.149%206.12-62.203%2035.15-3.634%2013.070%204.42%2026.394%2018.85%2033.301%2022.016%2010.519%2044.245%2020.571%2066.368%2030.878%2026.479%2012.347%2045.351%2031.24%2055.53%2059.44%2018.744%2051.853%2038.784%20103.261%2058.271%20154.859%200.871%202.316%201.573%204.718%202.656%206.928%204.314%208.819%2012.857%2012.56%2021.081%209.351%207.906-3.081%2010.966-10.562%207.672-20.486-9.946-29.858-20.125-59.61-30.22-89.426-4.76-14.068-9.669-28.073-14.217-42.227-2.423-7.544-7.927-17.256%200.51-22.186%204.888-2.848%2014.982%200.043%2021.251%203.251%2037.785%2019.339%2075.166%2039.464%20112.633%2059.398%2027.202%2014.472%2044.713%2011.922%2066.708-9.903%2013.325-13.218%2026.543-26.564%2040.038-39.613%205.44-5.249%2011.773-14.408%2019.169-9.096%204.888%203.528%206.652%2014.153%206.482%2021.506-1.488%2063.584-19.466%20122.727-51.195%20177.534-10.009%2017.299-22.484%2033.258-34.619%2049.261-11.731%2015.471-18.85%2032.153-18.829%2051.79%200.106%2065.178%200.106%20130.335%200.043%20195.513-0.021%2028.732-11.157%2039.953-39.783%2040.016-43.905%200.128-87.832%200.043-131.738%200.043z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M460.518%20455.843c-26.224-0.128-49.346-23.632-44.437-45.627%201.19-5.355%203.889-10.647%206.949-15.28%2036.51-55.169%2073.147-110.231%20109.912-165.23%2014.047-21.018%2030.623-23.313%2049.75-7.183%209.733%208.203%2019.573%2016.364%2028.881%2025.034%2014.961%2013.941%2016.321%2032.6%203.124%2048.326-40.951%2048.793-82.201%2097.353-123.343%20145.976-8.054%209.521-18.404%2014.090-30.836%2013.983z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M298.731%20174.75c-3.634-1.041-9.521-2.231-15.046-4.378-23.355-9.074-46.647-18.319-69.875-27.712-21.464-8.692-26.118-23.653-13.197-42.822%2018.574-27.542%2037.275-54.999%2056.125-82.349%2013.048-18.935%2030.772-22.59%2050.493-10.498%2021.974%2013.473%2043.905%2027.074%2065.709%2040.866%2018.191%2011.518%2021.719%2028.668%209.287%2046.137-14.961%2021.018-30.347%2041.738-45.542%2062.585-8.819%2012.071-21.145%2017.129-37.955%2018.17z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M552.537%20516.665c-20.401-1.233-32.961-8.373-40.378-22.654-7.098-13.686-4.080-26.586%205.292-38.508%2033.662-42.8%2067.133-85.771%20100.817-128.55%2014.323-18.191%2030.793-18.85%2046.413-2.083%2010.371%2011.114%2020.805%2022.186%2030.815%2033.641%2013.261%2015.174%2012.347%2032.812-2.805%2045.882-39.613%2034.215-79.332%2068.323-119.518%20101.858-6.673%205.568-15.917%208.097-20.635%2010.413z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M463.026%20240.672c-1.934-0.298-4.888-0.255-7.459-1.211-25.459-9.457-51.088-18.51-76.165-28.881-12.942-5.334-16.406-18.446-8.416-29.986%2018.085-26.139%2036.616-51.981%2055.615-77.483%209.287-12.475%2025.289-15.577%2039.039-7.863%2022.165%2012.453%2044.075%2025.353%2065.667%2038.763%2014.132%208.777%2016.661%2023.122%206.8%2036.467-13.856%2018.765-28.179%2037.169-42.545%2055.53-7.969%2010.179-19.020%2014.217-32.536%2014.663z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-shieldBash: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20671.6%20567.1%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M541.6%2C0l-24%2C172c32.4-11.8%2C64.8-23.9%2C97.5-35s26.3-9.5%2C39-13c2.5-.7%2C10.6-4.1%2C10.6.5l-114%2C124%2C121%2C45c-10.5%2C7.3-24.3%2C11.2-36.5%2C15.5-32.9%2C11.7-66.3%2C22.2-99.5%2C33l83.2%2C133.3c1%2C3.3%2C6%2C7.8%2C2.3%2C10.7l-148.5-76c-1.1%2C10.5-.5%2C21-1%2C31.5-1.6%2C36.9-2.3%2C74-4%2C111s-.6%2C9.6-1%2C13-4.9-.4-5.8-2.2l-70.2-123.3c-1.3-.9-5.4%2C3.9-6.5%2C5-9.8%2C10.2-18.3%2C21.8-28%2C32s-12.7%2C13.9-14.5%2C12v-2.4c0%2C0%2C43.2-110.8%2C43.2-110.8l3.3-3.7%2C43%2C62%2C9.1-78.9%2C81.4%2C35-41-69.5c0-2.4%2C2.9-3.5%2C4.7-4.3%2C13.9-5.9%2C34-10.1%2C49.1-14.9%2C7.1-2.3%2C14.5-4.4%2C21.2-7.8l-64.1-25.1c-.6-3%2C6-11%2C8.1-13.8%2C9.3-12.3%2C21-24.1%2C30.9-36.1.8-1%2C6.8-7.8%2C6-8.5-7.9-.1-54.7%2C20.1-58.1%2C17.6s-1-2.7-1-4c1-21.6%2C5.1-45.2%2C7-67.1%2C0-1%2C0-2%2C0-3l-2-.5-43.5%2C55-19-37-25.4%2C48.3-4.1.7c3.7-28%2C10.7-55.6%2C14.8-83.7%2C2.9-20%2C4.6-40.2%2C7.2-60.3l34.5%2C67L537.5%2C1.4l4.1-1.4Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M.1%2C109.6h48c28.2%2C0%2C55.9-3.5%2C82-14.4%2C17.7-7.3%2C34.4-17%2C51.3-26.1%2C3.9-2.1%2C6.4-3.3%2C10.7-.4%2C41.3%2C28.2%2C87.2%2C41.6%2C137.3%2C40.8%2C14.6-.2%2C29.2%2C0%2C44.6%2C0v10.5c0%2C56.9-.8%2C114%2C.2%2C170.9.9%2C54-15.3%2C101.9-46.5%2C145.2-36.3%2C50.4-83.3%2C88.7-136.4%2C120.1-2.1%2C1.2-6%2C1.5-7.9.3-61-36.2-114.1-80.7-151.2-142.3C10.2%2C377.9.6%2C338%2C.2%2C295.8c-.4-58.3%2C0-116.7%2C0-175v-11.2H.1Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-slam: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20201.2%20149.8%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M48.2%2C96.3c-1.2%2C4.1-3.3-.1-3.7-.5-2.1-1.7-12.7-11.3-14.3-10%2C2.9%2C4.6%2C10.9%2C18.2%2C4.4%2C21.9-2.6%2C1.4-6.2.4-7.4%2C3.1l36.5%2C13c3.8.6-1.3-5.6-1.5-7%2C1.7-1.3%2C8.2%2C5%2C10.3%2C6.2%2C7.7%2C4.5%2C20%2C12%2C28.7%2C9.4l32-17.5c1.2%2C1-9.7%2C8.3-10.3%2C8.9-1%2C1.1-.8%2C1.6-.7%2C3%2C5.1-1.1%2C19.8-2.7%2C23.1%2C1.5s-10.1%2C7-11.1%2C10.5l24%2C11c.2-3.2-2.3-5.1-2.1-8.5.5-8.8%2C21.4-10.4%2C28.1-11.5l-18.7-4.8c-6.9-3.4-1.5-11.4%2C1.3-16.1%2C9.1-15.8%2C23.5-27.9%2C34.4-42.1-5.2%2C2-8.7%2C6.2-14%2C8.5-3.5%2C1.5-11%2C2.4-12%2C3-2.9%2C1.7-5.7%2C17-14.6%2C17.5-7.7.5-4.3-16.3-3.9-21s1.5-2.4-1.1-2l-8%2C20c-2.1-1.3-.9-2.3-.9-3.8.4-14.2%2C2.1-23.8%2C1.3-38.7-.2-3%2C1.6-17-2.3-16.5l-43.1%2C21.9-7%2C53c-1.7-1.1-1.4-2.7-1.6-4.4-1.1-14.8%2C1.1-30.6-1.4-45.6-7.8-6.1-16.8-10.4-24.8-16.2s-5.6-3.2-5.7-5.8l33.4%2C14%2C49.6-21.5c.3-1.3-4.3-4.4-5.5-5.4-5.3-4.3-11.6-8.9-17.1-12.9s-10.9-8.4-13.9-10.1-6.5-.5-10.3.5l-43.9%2C21.6c-4.4%2C4-2.3%2C21.3-4.8%2C21.8L13.5%2C22.1C.3%2C18.6-2.7%2C35.4%2C2.2%2C44.3c14.1%2C11.5%2C30.8%2C19.9%2C46%2C30l.8%2C1.1c.2.9-.9%2C1.6-.9%2C1.9%2C0%2C4.2.8%2C16.1%2C0%2C19Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M187.7%2C21.8c-1.1-.2-17.3%2C12-17.9%2C13-1.3%2C1.9-4.4%2C16.3-4.3%2C18.7s.3%2C1.5%2C1.3%2C2.2c2.8-2.5%2C8.6-2%2C10.9-5s8.5-21.2%2C10.6-26.4%2C1.5-2.1-.6-2.5Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M190.2%2C107.8c-5.7.7-11.1%2C1.1-13%2C7.5%2C5.4%2C4.9%2C12-2.2%2C13-7.5Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stab: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20346.5%20348.7%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M39.7%2C26l42.4%2C29.1c11.5-7.2%2C21.9-15.7%2C33.8-22.2s16.2-8.7%2C18.3-8.8%2C1.9.3%2C3%2C1%2C16.9%2C16.4%2C17.4%2C17.6c-10.6%2C5.9-21.4%2C11.6-31.5%2C18.5s-16%2C10.5-15.5%2C12.5l215.7%2C152.8%2C23.2%2C120.8-120.6-23.9L73%2C108.1l-7.9%2C9.1c-7.8%2C11.4-15.4%2C23-20.6%2C35.9-1.5.4-1.7-.4-2.5-1-2-1.4-15.3-14.6-16.6-16.5s-.9-1.1-.5-2.5c.7-2.6%2C5.8-12.6%2C7.4-15.7%2C6.4-12.3%2C15-23.5%2C22.9-34.8l-29.2-41.5c-3.5-3.3-9.1%2C4.7-12.5%2C2.5S2.4%2C26.9%2C1.4%2C24.8C-4.4%2C13.2%2C9.3-1.4%2C21%2C.1c1.4.2%2C21.5%2C12.9%2C22.1%2C14%2C2%2C3.8-4.9%2C9.3-3.4%2C11.8ZM274.5%2C275.1l-19.5-49L94.9%2C84.2c-.9-.2-10.3%2C8.7-10.9%2C9.9s-.7%2C1.2%2C0%2C2l143.3%2C160.8%2C47.2%2C18.3Z%22%20%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23000%22%0A%20%20%20%20points%3D%22241.5%20112.1%20261%20146.1%20275.5%2097.1%20293.5%20153.1%20313.5%2065.1%20319.6%20175.1%20345.5%20148.1%20345.5%20277.1%20334.6%20219.5%20241.5%20152.6%20241.5%20112.1%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M140%2C227.1c.7%2C0%2C4%2C1.2%2C4.6%2C1.7l74.2%2C108%2C59.7%2C10.3c.2%2C1.7-2.3.9-3.5%2C1-25.9%2C1.1-54%2C.4-80.1%2C0s-5.3-1.1-7.9-1.1c-18.5-.3-37%2C.3-55.5%2C0l48-32-91-18%2C71-14-80-19%2C10.5-2%2C62.5-2-39-13c-.2-1.5%2C2.6-1.7%2C3.6-1.9%2C6.6-1%2C13.8-.8%2C20.4-2.1l-18-15.5c-.3-3.1%2C1.1-.5%2C1.5-.5%2C5.8%2C0%2C13.6-.7%2C19%2C0Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-slash: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20356%20364%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M105.1%2C72.9l-26.7-31.9C152.9-11.5%2C254.3%2C4.2%2C311%2C74.5c38.5%2C47.8%2C47.6%2C114.6%2C24.8%2C171.7-1.9%2C4.8-7.8%2C17.7-10.8%2C21.2s-1.3%2C1.9-2%2C1l-84.8-85.8c1.6-3.9%2C3.7-8.2%2C4.8-12.2%2C20-72.2-53.3-139.6-122.6-105.6-2.8%2C1.4-13.5%2C9-15.2%2C8.1Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M39.9%2C16.1l74.8%2C86.8%2C39-37.9%2C13.9%2C12.9-26.5%2C27.5%2C194%2C194%2C17%2C55.5-57.5-15L100.5%2C146l-25%2C25c-2.5-3.8-11.3-9.6-13.1-13s-.5-1.7.5-2.5l38-38L12%2C42.5l24.4-25.5%2C3.4-.8ZM113.3%2C141.7c5.5%2C6%2C12%2C4.7%2C19.2%2C4.3l171%2C171.1%2C9.5-9.5-172-173c1-8.6-1.5-15.8-10-18.9-16.4-6.1-29%2C13.8-17.6%2C26.1Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M187%2C353c-76%2C3.9-147.1-42.7-172-114.5S5.3%2C127.6%2C37%2C81l33.9%2C28.6c-6.6%2C11.1-14%2C21.8-19.1%2C33.7-40.4%2C94.1%2C27.8%2C193.8%2C124.8%2C207.6%2C3.4.5%2C8.6-1.3%2C10.4%2C2.1Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-exposed: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201024%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%236c7cd8%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%232b3eaf%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1024%2C512c0%2C282.6-229.4%2C512-512%2C512S0%2C794.6%2C0%2C512%2C229.4%2C0%2C512%2C0s512%2C229.4%2C512%2C512Z%22%2F%3E%0A%20%20%3Ccircle%20class%3D%22st1%22%20cx%3D%22512%22%20cy%3D%22512%22%20r%3D%22401.7%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-concussed: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201024%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23ab31c9%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%236d219e%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1024%2C512c0%2C282.6-229.4%2C512-512%2C512S0%2C794.6%2C0%2C512%2C229.4%2C0%2C512%2C0s512%2C229.4%2C512%2C512Z%22%2F%3E%0A%20%20%3Ccircle%20class%3D%22st1%22%20cx%3D%22512%22%20cy%3D%22512%22%20r%3D%22401.7%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-wounded: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201024%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23f85656%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23e20000%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1024%2C512c0%2C282.6-229.4%2C512-512%2C512S0%2C794.6%2C0%2C512%2C229.4%2C0%2C512%2C0s512%2C229.4%2C512%2C512Z%22%2F%3E%0A%20%20%3Ccircle%20class%3D%22st1%22%20cx%3D%22512%22%20cy%3D%22512%22%20r%3D%22401.7%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-cog: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.59%209.535c-0.839-1.454-0.335-3.317%201.127-4.164l-1.572-2.723c-0.449%200.263-0.972%200.414-1.529%200.414-1.68%200-3.042-1.371-3.042-3.062h-3.145c0.004%200.522-0.126%201.051-0.406%201.535-0.839%201.454-2.706%201.948-4.17%201.106l-1.572%202.723c0.453%200.257%200.845%200.634%201.123%201.117%200.838%201.452%200.336%203.311-1.12%204.16l1.572%202.723c0.448-0.261%200.967-0.41%201.522-0.41%201.675%200%203.033%201.362%203.042%203.046h3.145c-0.001-0.517%200.129-1.040%200.406-1.519%200.838-1.452%202.7-1.947%204.163-1.11l1.572-2.723c-0.45-0.257-0.839-0.633-1.116-1.113zM8%2011.24c-1.789%200-3.24-1.45-3.24-3.24s1.45-3.24%203.24-3.24c1.789%200%203.24%201.45%203.24%203.24s-1.45%203.24-3.24%203.24z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-h1h1: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201014%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M791.1%2C642.4l86.1-86%2C77.2%2C77.2-130.2%2C130.1%2C189.7%2C189.7-70.6%2C70.6-189.7-189.7-130.2%2C130.1-77.2-77.2%2C86.5-86.5-95.2-95.2%2C158.3-158.4%2C95.3%2C95.3h0Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M9.1%2C18.1l213.1%2C57.1.4-1.4%2C236.1%2C236.2-158.3%2C158.3L64.2%2C232.1l1.4-.4L8.5%2C18.6s.6-.5.6-.5Z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M222.8%2C624.3L791.4%2C55.7l.4%2C1.4L1005%2C0l.4.4-57%2C213.2%2C1.4.4L381.2%2C782.6l86.5%2C86.5-77.2%2C77.2-130.2-130.2-189.7%2C189.7L0%2C935.2l189.7-189.7-130-130.1%2C77.1-77.2%2C86%2C86.1Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-h1: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201014%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.7.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%208)%20%20--%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M222.8%2C624.3L791.4%2C55.7l.4%2C1.4L1005%2C0l.4.4-57%2C213.2%2C1.4.4L381.2%2C782.6l86.5%2C86.5-77.2%2C77.2-130.2-130.2-189.7%2C189.7L0%2C935.2l189.7-189.7-130-130.1%2C77.1-77.2%2C86%2C86.1Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-h2: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221024%22%20height%3D%221024%22%20viewBox%3D%220%200%201024%201024%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M720.418%20903.097c26.475-11.178%2050.891-21.474%2075.601-31.476-0.294-1.471-0.294-2.942-0.588-4.413-22.063-8.825-44.419-17.062-66.188-26.769-8.237-3.53-16.473-9.119-22.357-15.591-67.070-74.13-133.847-148.555-200.623-222.98-5.001-5.589-10.296-11.473-16.768-18.238-15.297%2030.299-25.004%2060.305-30.888%2091.486-8.237%2045.008-6.472%2088.839%2015.885%20130.022%2022.357%2040.889%2058.54%2063.54%20101.194%2077.366%207.648%202.648%2015.885%204.707%2025.004%207.354-28.534%2037.065-61.187%2067.365-100.606%2090.604-80.896%2047.949-167.676%2052.95-257.103%2031.476-81.485-19.709-154.438-58.54-222.98-105.901-1.471-0.883-2.648-2.648-2.942-2.942%2018.533%201.177%2037.359%204.118%2056.186%203.236%2073.248-3.824%20107.077-64.423%2072.365-128.846-7.060-12.943-15.591-24.71-23.239-36.477%2016.179%203.236%2032.359%208.237%2049.126%209.413%2037.948%202.648%2068.835-11.473%2087.074-45.596%2018.533-34.124%2013.532-67.953-7.648-100.017-1.765-2.942-3.53-5.589-4.707-7.060%2021.18%202.059%2042.949%206.178%2064.717%205.589%2071.483-2.353%2094.428-64.129%2089.133-113.843-0.588-5.001-5.295-10.296-9.119-14.414-33.829-37.948-67.953-75.895-102.076-113.843-2.648-2.942-5.001-5.883-9.708-11.767%2024.122-23.239%2047.655-46.479%2072.66-70.6%2016.768%2015.003%2032.359%2028.828%2047.949%2042.949%2023.828%2021.18%2047.067%2042.949%2071.189%2063.835%206.178%205.295%2015.003%209.119%2022.945%2010.002%2065.011%207.354%20112.961-38.536%20108.548-103.547-1.177-16.473-4.707-32.653-7.354-50.597%2040.007%2027.652%2081.485%2036.183%20120.609%203.236%2041.478-35.006%2037.359-80.602%2020.298-127.081%2016.473%209.708%2031.182%2020.592%2047.655%2027.652%2058.54%2025.593%20109.725-4.118%20116.785-67.659%201.177-11.178%201.471-22.357%200.588-33.535s-3.236-22.063-5.589-35.889c6.766%2010.002%2012.649%2017.944%2018.238%2026.475%2047.067%2072.954%2084.426%20150.32%2098.546%20236.806%2020.003%20122.668-15.297%20226.215-108.842%20309.465-5.589%204.707-11.178%209.413-17.944%2015.591-4.118-12.943-7.060-24.71-11.473-35.889-32.947-84.426-100.017-122.374-190.033-108.548-35.594%205.589-69.424%2016.473-107.666%2035.006%206.472%203.824%2011.473%205.295%2015.003%208.531%2078.837%2070.6%20157.38%20141.495%20235.923%20212.684%205.295%204.707%209.413%2011.178%2012.061%2017.65%209.708%2022.945%2018.827%2046.184%2027.946%2069.424%201.471%200.588%202.942%200.883%204.413%201.471%2011.178-25.887%2022.063-51.774%2033.535-78.249%2038.83%20100.017%2077.366%20199.74%20117.667%20303.582-101.488-41.184-201.505-80.014-302.405-119.138z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M389.479%2068.835c27.063%2027.063%2050.303%2050.597%2074.719%2075.013-130.022%2082.661-235.335%20190.915-318.584%20321.232-24.122-25.298-47.655-49.714-71.777-75.013%201.177-1.177%204.413-5.001%208.237-8.531%2035.3-35.3%2070.306-70.895%20106.195-105.901%208.237-7.943%208.237-13.826%203.53-23.533-38.536-77.66-97.37-135.317-172.677-177.089-6.766-3.824-13.532-7.648-19.121-10.59%2021.474-21.474%2042.654-42.654%2064.129-64.423%2011.473%2018.238%2022.651%2037.948%2035.594%2056.774%2040.007%2058.54%2089.721%20105.901%20154.733%20135.906%208.531%203.824%2013.532%203.236%2020.003-3.53%2035.3-35.889%2071.189-71.483%20106.783-107.371%203.824-3.53%205.883-8.825%208.237-12.943z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-chevron: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22448%22%20height%3D%22448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22m420.75%20202-185.5%20185.25a15.844%2015.844%200%200%201-22.5%200L27.25%20202c-6.25-6.25-6.25-16.5%200-22.75L68.75%20138a15.844%2015.844%200%200%201%2022.5%200L224%20270.75%20356.75%20138a15.844%2015.844%200%200%201%2022.5%200l41.5%2041.25c6.25%206.25%206.25%2016.5%200%2022.75%22%20%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-vulnerable: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201024%201024%22%3E%0A%20%20%3Cg%20id%3D%22Original_Art%22%20class%3D%22st2%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%236c7cd8%22%20d%3D%22M-513.4%2C868.7c2.8%2C8.9%2C1.2%2C14.2-6.8%2C20.3-83.5%2C62.2-174.7%2C108.5-277.6%2C129.1-8.9%2C1.8-17.9%2C3.1-26.8%2C4.6-29.3-78-31.7-393.8-3.7-495.8%2C71.8%2C9.5%2C138.7%2C33%2C204.6%2C65.3.6-6.2%2C1.5-10.2%2C1.5-14.5%2C0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6-18.9-.2-37.8%2C0-56.8.8-68.7%2C2.8-136.8%2C11.7-203.4%2C30.8v161.2c67.2-33.6%2C135.6-58.9%2C210.5-66.2%2C29%2C167.3%2C35.1%2C332.8-2.2%2C498-100.2-5.5-245.6-66.6-341.1-143.3%2C3.4-9.9%2C7.1-20.3%2C10.8-30.8%2C21.6-61.6%2C43.1-123.6%2C54.2-188.6%2C12-71.2%2C5.5-141.1-15.1-209.5-14.5-49-32-97.1-47.5-145.8-1.8-6.2-1.5-16%2C2.2-20.3%2C36.1-41.6%2C72.7-82.6%2C109.4-123%2C2.5-2.8%2C8.3-5.2%2C11.7-4%2C57.6%2C17.6%2C114.9%2C35.7%2C170.7%2C53.6-20%2C22.2-40.4%2C44.7-61.3%2C67.8%2C52.5%2C16.4%2C105.2%2C32.8%2C157.9%2C49.2%2C56.2%2C17.5%2C112.5%2C35%2C168.8%2C52.5.6-1.2%2C1.2-2.1%2C1.8-3.4-56.1-42.8-112.2-85.5-170.6-130-1-.7-1.9-1.5-2.9-2.2%2C1-.8%2C1.9-1.7%2C2.9-2.5%2C16.6-14.5%2C33-28.9%2C50.4-44.6-17-13.2-33.8-26.2-50.4-39.1-45-34.9-89.2-69.2-136-105.4%2C45.6-19.1%2C87.8-37%2C130-54.2C-909.3%2C0-907.2%2C0-905%2C.4c3%2C.5%2C6.2%2C1.7%2C8.8%2C2.7%2C124.8%2C46.5%2C235.7%2C114.9%2C326.6%2C213.2%2C19.7%2C21.3%2C36.7%2C45.3%2C53.9%2C69%2C3.7%2C5.2%2C4.6%2C14.5%2C3.1%2C20.7-14.8%2C60.1-32.7%2C119.2-45.6%2C179.7-19.4%2C90.6-11.1%2C180.6%2C12.9%2C269.3%2C10.2%2C37.9%2C21%2C75.8%2C31.7%2C113.7%2C0%2C0%2C.2%2C0%2C.2%2C0Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%236c7cd8%22%20d%3D%22M-513.4%2C868.7c2.8%2C8.9%2C1.2%2C14.2-6.8%2C20.3-83.5%2C62.2-174.7%2C108.5-277.6%2C129.1-8.9%2C1.8-17.9%2C3.1-26.8%2C4.6-29.3-78-31.7-393.8-3.7-495.8%2C71.8%2C9.5%2C138.7%2C33%2C204.6%2C65.3.6-6.2%2C1.5-10.2%2C1.5-14.5%2C0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6v-70.1c56.2%2C17.5%2C112.5%2C35%2C168.8%2C52.5.6-1.2%2C1.2-2.1%2C1.8-3.4-56.1-42.8-112.2-85.5-170.6-130v-4.7c16.6-14.5%2C33-28.9%2C50.4-44.6-17-13.2-33.8-26.2-50.4-39.1V.3c3%2C.5%2C6.2%2C1.7%2C8.8%2C2.7%2C124.8%2C46.5%2C235.7%2C114.9%2C326.6%2C213.2%2C19.7%2C21.3%2C36.7%2C45.3%2C53.9%2C69%2C3.7%2C5.2%2C4.6%2C14.5%2C3.1%2C20.7-14.8%2C60.1-32.7%2C119.2-45.6%2C179.7-19.4%2C90.6-11.1%2C180.6%2C12.9%2C269.3%2C10.2%2C37.9%2C21%2C75.8%2C31.7%2C113.7h.2v.1Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20id%3D%22Generative_Object__x28_180_x2C__0_x29_%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%236c7cd8%22%20d%3D%22M512.4-.2v160.7c.1%2C0-50.2%2C38.6-50.2%2C38.6l53.2%2C47.5-174.2%2C132.9c3.5%2C4.5%2C6.9.8%2C10.5-.3l159.7-49.4c-.3.7%2C0%2C1.5%2C1%2C2v67.5l-49.9%2C1.6c-73.8%2C4.3-146.3%2C13.5-218.7%2C27.4-5.3%2C1-8.6%2C2.3-11.2%2C5.3-3.7%2C4.1-3.1%2C7.9-3.1%2C13.2l.4%2C127.7%2C1.3%2C17.1c63.6-31.1%2C134.2-56.4%2C205.3-65.1%2C11.2%2C51.5%2C15.2%2C104.1%2C17.6%2C157.1%2C3%2C100.4%2C3%2C210.6-13.7%2C308.2l-7.6%2C30.6c-113-15.4-217.2-67.2-307.6-135.5-6.6-5-6.6-11.1-4.6-18.2l25.5-89.3c34.3-120.1%2C42.1-212.6%2C9.9-335.4l-35.1-132.7c-1.8-6.7-4.1-17%2C0-23.1%2C17.6-26%2C35.4-51.1%2C57.1-73.3l23.6-24.2c27.3-28%2C56.9-52%2C88.7-75.1C358.4%2C65.9%2C433.4%2C27.9%2C512.4-.2Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%232b3eaf%22%20d%3D%22M512.4%2C399.6v-67.5c-1.1-.4-1.4-1.3-1.1-2l158.6-49.6-61.6-68.1%2C172.8-54c5.8-.1%2C9%2C2.6%2C12.4%2C6.5l101.8%2C114.2c7.6%2C8.5%2C11.4%2C17%2C7.6%2C28.6l-39%2C117.7c-27.6%2C83.2-38.5%2C162.9-20.6%2C250.7%2C8.3%2C42.8%2C20.1%2C83.1%2C34.3%2C124.2l27.9%2C80.6c-23.9%2C20-48.9%2C36.8-75.8%2C52.5-78.7%2C45.8-172.3%2C84.3-264.9%2C91.5-7.2-27.8-11.4-54.3-15.5-82.5-20.4-141.4-10.7-276.9%2C12.5-416%2C36.6%2C3.2%2C70.3%2C10.9%2C104.4%2C21.8%2C36.4%2C11.7%2C70.3%2C26.2%2C106.2%2C44.2l.4-160.8c-86-24.1-172.4-31.8-260.3-31.8v-.2h-.1Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%232b3eaf%22%20d%3D%22M512.5%2C160.6V-.2c2.4-.2%2C3.9-.3%2C6.2.6l130.4%2C54.3-136.5%2C105.8h0l-.1.1Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
+  --icon-bleeding: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201024%201024%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23f85656%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23e20000%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M491.3%2C0s387.8%2C237%2C376.4%2C642.5-392.6%2C381.1-392.6%2C381.1c0%2C0-313-16.2-319.6-340.6%2C0%2C0-12.2-173.6%2C211.2-347.2%2C31-24.3%2C57.1-54.2%2C77-88.1C476.9%2C191.7%2C510.4%2C104.7%2C491.3%2C0h0Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.3%2C0s384.5%2C232.6%2C376.4%2C644c-5.5%2C286.4-202.7%2C357.6-313.7%2C373.8-135.6%2C19.9-217.8-68.2-241.4-189.1-17.3-89.6%2C43.5-237.8%2C165.9-283.5%2C189.7-70.8%2C179-394.1%2C12.8-545.2h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-isBlocking: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20358%20358%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23aaa%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23555%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M179%2C.3c-16%2C15.1-96%2C30.3-136%2C45.4v106c0%2C90.9%2C70%2C151.4%2C136%2C206V.3Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M179%2C.3c16%2C15.1%2C96%2C30.3%2C136%2C45.4v106c0%2C90.9-70%2C151.4-136%2C206V.3Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-earth: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20668%20668%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%237f5322%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23c68533%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M667.219%2C479.608c-8.671%2C19.993-71.539%2C159.699-141.152%2C170.538C340.595%2C675.678%2C0%2C570.417%2C0%2C570.417h0l.482-.722c.241-.482.722-1.204%2C1.204-1.927l1.686-3.131c.241-.241.241-.482.482-.722l8.431-14.693L308.559%2C40.257s1.927-2.649%2C3.373-4.577h0c.241-.482.722-.722.964-1.204s.723-.723.964-1.204c.723-.964%2C1.686-1.686%2C2.649-2.649%2C1.204-1.204%2C2.409-2.168%2C3.613-3.131%2C7.226-6.262%2C14.693-13.489%2C18.306-13.489%2C6.262%2C0%2C23.846%2C16.861%2C30.591%2C25.773%2C31.072%2C41.43%2C276.522%2C404.185%2C297.719%2C435.258.964%2C1.204%2C1.204%2C3.131.482%2C4.577v-.003Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M268.574%2C452.148c-179.933.241-208.114%2C61.904-268.574%2C118.269%2C0%2C0%2C.241-.241.482-.722s.722-1.204%2C1.204-1.927c.482-.722%2C1.204-1.927%2C1.686-3.131.241-.241.241-.482.482-.722l2.168-3.613c1.686-3.131%2C3.854-6.744%2C6.504-11.08L308.8%2C40.257s1.927-2.649%2C3.373-4.577h0c.723-.722%2C1.204-1.445%2C1.927-2.168.722-.964%2C1.686-1.686%2C2.649-2.649%2C1.204-1.204%2C2.409-2.168%2C3.613-3.131h0c1.445%2C0%2C26.496%2C3.372%2C70.094%2C114.174%2C59.977%2C153.677%2C71.539%2C309.763-121.882%2C310.244v-.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-fire: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23f45f31%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23f4a031%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M205.026%2C0s143.724%2C146.456%2C2.084%2C304.28l-3.959-8.844s-23.36-42.83-56.791-66.213c0%2C0%2C6.529%2C48.201-21.438%2C82.627s-69.037%2C158.981%2C13.266%2C253.278c0%2C0%2C54.429%2C67.51%2C142.567%2C74.247%2C85.499%2C6.529%2C174.469-39.126%2C211.952-84.92%2C0%2C0%2C48.989-54.591%2C55.564-124.717%2C8.798-92.745-12.733-118.304-12.733-118.304-11.414%2C25.652-29.055%2C47.044-48.201%2C64.454-.092%2C0%2C23.059-298.122-282.309-375.887h-.002Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M274.249%2C338.058s46.951%2C66.815-19.007%2C119.647l-.972-3.728s-6.39-18.359-18.012-29.703c0%2C0-.556%2C19.354-13.891%2C31.046s-37.459%2C57.879-11.252%2C100.362c0%2C0%2C16.97%2C30.097%2C51.165%2C38.431%2C33.153%2C8.126%2C71.075-4.005%2C88.786-19.563%2C0%2C0%2C23.151-17.989%2C29.958-45.377%2C8.913-36.001%2C2.686-47.299%2C2.686-47.299-6.164%2C8.949-13.881%2C16.358-22.829%2C21.99l-.322.189s28.476-115.596-86.309-165.996h-.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-frost: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23eaffff%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23ade1e5%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M606.343%2C38.223l-91.595%2C174.334-106.045%2C426.511c0%2C.699-.466%2C1.166-1.166%2C1.166s-1.166-.466-1.166-1.166l-54.304-297.392-68.754-114.202c-.699-1.166-2.331-1.631-3.496-.933-.233.233-.699.466-.933.933l-35.193%2C55.237-46.147%2C144.268c-.466%2C1.166-1.864%2C1.631-3.03%2C1.166-.466-.233-.933-.699-1.166-1.166L109.677%2C147.766%2C38.592%2C75.049c-13.052-13.518-.933-34.261%2C16.314-34.027%2C37.291.233%2C86.234%2C10.022%2C124.458%2C20.976%2C70.386%2C20.044%2C161.049-43.351%2C262.899-30.532%2C99.752%2C12.819%2C164.079%2C6.759%2C164.079%2C6.759v-.002Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M606.343%2C38.223l-124.457%2C151.726c-3.496%2C4.428-5.827%2C9.556-7.225%2C14.916l-58.499%2C243.321c-.699%2C3.03-3.729%2C4.661-6.526%2C3.962-2.098-.466-3.729-2.331-4.195-4.428l-28.9-156.388c-.699-4.195-2.564-8.391-4.894-11.886l-79.709-111.639c-1.631-2.331-5.128-3.03-7.458-1.398l-54.771%2C36.824c-5.127%2C3.496-8.856%2C8.391-10.954%2C14.45l-21.675%2C67.823c-.933%2C2.797-3.962%2C4.661-6.759%2C3.729-1.864-.466-3.263-1.864-3.729-3.729l-44.516-149.162c-2.331-7.691-7.225-13.984-13.984-18.179L33.001%2C62.695c-.233-2.331%2C0-4.661.699-6.759%2C1.398-5.361%2C5.128-10.022%2C10.255-12.352%2C15.149-7.924%2C81.107-20.743%2C159.651-5.827C252.083%2C47.08%2C373.977-11.187%2C440.402%2C1.865c83.671%2C16.547%2C139.141%2C24.938%2C161.049%2C28.201%2C3.496.466%2C5.827%2C3.729%2C5.361%2C7.225-.233.233-.233.699-.466.932h-.003Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-lightning: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23fced60%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23eac303%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M409.207%2C12.874s-239.311%2C274.023-232.414%2C274.023l148.276%2C5.058c7.586%2C0%2C16.552%2C21.609%2C11.724%2C27.126l-176.552%2C320%2C130.575-336.092-187.816.46L235.874.001h165.518c4.827-.23%2C8.736%2C3.448%2C8.966%2C8.046%2C0%2C1.609-.23%2C3.218-1.149%2C4.827h-.002Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M457.023%2C0l-79.311%2C186.667h158.851l-376.322%2C453.333%2C174.713-336.552h-188.966L278.172%2C0h178.851Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-nature: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23a0ce3e%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%238bb737%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M96.993%2C523.156c-61.062-147.604-8.494-298.192%2C87.461-383.587C280.409%2C54.174%2C523.737%2C2.983%2C584.11%2C0c1.836%2C0%2C3.443%2C1.378%2C3.443%2C3.214%2C0%2C1.147-.459%2C2.296-1.607%2C2.984-65.194%2C39.484-118.451%2C162.754-130.846%2C312.195-17.676%2C213.946-273.63%2C218.307-301.176%2C217.848-1.378%2C0-2.754.918-3.214%2C2.296-8.264%2C29.383%2C2.984%2C77.131%2C4.591%2C92.511%2C1.607%2C14.462-39.713%2C9.412-44.534-1.836-2.525-6.657-13.773-105.825-13.773-106.054v-.002Z%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M586.175%2C3.214c2.296-.689.229-3.214-1.836-3.214C314.611.229-80.453%2C191.679%2C95.616%2C521.32c.918%2C1.836%2C1.377%2C2.066%2C1.377%2C2.066C75.185%2C187.088%2C507.438%2C27.088%2C586.176%2C3.214h-.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-whirlwind: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20348%20348%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.7%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%201)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M148.55%2C0l-47.3%2C14.2c-29.8%2C13.2-63.2%2C30.3-76.7%2C61.8%2C12-12.3%2C24.5-22.5%2C39.7-30.8C113.75%2C17.8%2C183.05%2C7.4%2C238.95%2C14.1c41.8%2C5%2C123.5%2C27.7%2C104.9%2C85.7-17.4%2C54.5-112.8%2C71.2-161.8%2C73.2s-13.6.3-20%2C0c-1.2%2C0-3.7.8-3.5-1%2C54.8-6.2%2C119.1-20%2C155-65.5%2C3.3-4.2%2C7.4-9.4%2C9-14.5-14.8%2C15.9-33.5%2C28.2-53.3%2C37.2-59.3%2C26.7-140.8%2C34.3-203.2%2C14.8C-20.65%2C117-18.35%2C54.2%2C62.65%2C20.5%2C89.35%2C9.4%2C119.75%2C2.7%2C148.55%2C0ZM63.65%2C84c.9.8%2C13.9-8.4%2C16-9.5%2C53.2-29.4%2C129.3-27%2C185.5-7.5%2C10.4%2C3.6%2C20.8%2C7.9%2C30%2C14%2C11.7-24.8-18.4-39.5-37.7-45.2-47.4-14.1-124.2-7.2-167.1%2C18.5-11.4%2C6.8-23%2C16.6-26.7%2C29.8v-.1ZM161.35%2C66.3c-29.9%2C1.8-62.9%2C9.7-87.1%2C27.9s-7.9%2C4-5.5%2C8.2%2C16.8%2C14.9%2C21.6%2C15.5%2C18.4-9.2%2C22.6-11c38.7-16.7%2C87.8-18.2%2C128.7-9.3s18.3%2C5.1%2C27.3%2C8.2l18.6-13.2c-36.6-20.8-84.3-28.7-126.2-26.2v-.1ZM250.55%2C115c-1.5-2.5-6.2-2.8-9-3.5-33.9-8.5-100.7-8.3-130.7%2C11.3-1%2C.6-1.8-.1-1.3%2C2.2%2C46.8%2C9.6%2C96.1%2C6.1%2C141-10Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M304.65%2C165c-31.2%2C32.8-74.4%2C58.8-119%2C68.5-42.3%2C9.2-90.9%2C4.2-120-31-.9-1.1-2.4-1.6-2-3.5%2C7.8%2C3.7%2C15.6%2C7.1%2C24%2C9.5%2C22.3%2C6.3%2C44.3%2C6.6%2C67.4%2C4.4l39.6-8.9-36.5-1c-39.3-3.7-77.1-17.4-106.5-44%2C18.6%2C7.9%2C37.3%2C14.9%2C57%2C19.5%2C44.9%2C10.4%2C94.8%2C12.4%2C140.2%2C4.2%2C19.3-3.5%2C38.1-9.5%2C55.8-17.7Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M222.65%2C234c-25.3%2C29.9-84.5%2C52-121%2C33.5s-20.3-15.9-20.5-26.5c43.8%2C24.8%2C98%2C12.6%2C141.5-7Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M159.65%2C317l-13.1%2C30.9-29.2.2c-11.9-16.6-21.8-35.1-26.7-55%2C19.3%2C16.5%2C42.6%2C29.3%2C69%2C24v-.1Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M99.65%2C282c25.8%2C9.1%2C53.7%2C6.6%2C79-3-11%2C40.2-57.8%2C26-79%2C3Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-hitChance: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20462%20462%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M286.1%2C232.9c1.2%2C8.2-4.6%2C15.9-12.8%2C17%2C0%2C0%2C0%2C0%2C0%2C0l-147.2%2C20.6-21.3%2C32.5-82.6%2C11.6%2C21.3-32.6-24.5%2C3.4c-.3%2C0-.6.1-.8.2-.7%2C0-1.4.1-2.1.1-8.3%2C0-15.1-6.7-15.2-15%2C0-7.6%2C5.6-14%2C13.1-15%2C.3%2C0%2C.6%2C0%2C.9%2C0l24.5-3.4-29.5-25.5%2C82.6-11.5%2C29.4%2C25.5%2C147.3-20.6c.7%2C0%2C1.4-.1%2C2.1-.1%2C7.5%2C0%2C13.9%2C5.5%2C15%2C12.9h0ZM249.4%2C194.4c2.8-4.2%2C6.5-7.8%2C10.8-10.3%2C4.1-2.3%2C8.7-3.4%2C13.4-3%2C4.9.5%2C9.6%2C2.2%2C13.5%2C5%2C4.8%2C3.4%2C8.8%2C7.7%2C11.9%2C12.6%2C3.8%2C5.9%2C6.6%2C12.4%2C8.4%2C19.1%2C1.9%2C7.2%2C2.8%2C14.6%2C2.6%2C22-.2%2C6.8-1.3%2C13.5-3.5%2C20-1.8%2C5.6-4.7%2C10.8-8.5%2C15.4-3.3%2C3.9-7.6%2C6.9-12.4%2C8.6-4.5%2C1.5-9.3%2C1.6-13.8.3-4.7-1.4-8.9-3.8-12.5-7.1-2.1-1.9-4-4-5.7-6.2l-32.3%2C4.5c2%2C5.5%2C4.4%2C10.8%2C7.1%2C16%2C4.9%2C9.4%2C11.2%2C18%2C18.7%2C25.5%2C6.8%2C6.9%2C14.9%2C12.3%2C23.9%2C15.8%2C8.8%2C3.4%2C18.4%2C4.2%2C27.6%2C2.2%2C10-2.3%2C19.2-7.5%2C26.3-14.9%2C7.9-7.9%2C14.4-18.3%2C19.1-30.5%2C5-13.5%2C7.9-27.6%2C8.3-42%2C.6-15.8-1.2-31.7-5.5-46.9-3.8-14.3-10.1-27.8-18.5-39.9-7.6-10.7-16.4-18.9-25.8-24.4-8.4-5.1-18.1-7.7-28-7.6-9.4.3-18.5%2C3.3-26.3%2C8.7-8.2%2C5.8-15.1%2C13.2-20.2%2C21.9-5.4%2C9.2-9.5%2C19.1-12%2C29.5-1.8%2C7.1-2.9%2C14.2-3.6%2C21.5l31.2-4.4c1.4-4%2C3.2-7.7%2C5.6-11.2ZM447.7%2C159.4c-10.9-35.3-27.3-64.8-46.8-87.4-18.6-21.5-39.5-36.3-61.1-44.2-20.2-7.4-40.6-8.7-60-4.2-18.1%2C4.2-35.2%2C13.5-50.6%2C27.6-14.4%2C13.2-26.1%2C29.6-35.2%2C47.8-8.8%2C18-15.3%2C37-19.3%2C56.6-4.1%2C20-6.1%2C40.3-5.9%2C60.7l22.6-3.2c.4-13.6%2C2.1-27.1%2C5-40.3%2C3.3-15%2C8.7-29.4%2C16-42.9%2C7.4-13.4%2C16.7-25.1%2C28-34.1%2C11.9-9.4%2C24.9-15%2C38.3-16.6%2C14.2-1.8%2C28.8.7%2C42.9%2C7.5%2C14.9%2C7.1%2C29.1%2C18.8%2C41.5%2C34.8%2C12.9%2C16.6%2C23.5%2C37.5%2C30.7%2C61.9%2C7.1%2C24.2%2C10%2C49.5%2C8.7%2C74.6-1.3%2C24-6.4%2C46.4-14.7%2C65.7-8%2C18.6-18.9%2C33.9-31.8%2C44.9-12.3%2C10.5-26.3%2C16.9-41.5%2C18.7-14.1%2C1.5-28.4-.9-41.2-7.1-12.3-5.7-23.8-14.5-34-25.5-10.3-11.3-19-23.9-25.7-37.6-6.1-12.3-11-25.3-14.5-38.6l-22.5%2C3.1c4.5%2C19.9%2C11.2%2C39.3%2C20%2C57.8%2C8.5%2C18%2C19.3%2C34.9%2C32.2%2C50.1%2C13%2C15.2%2C27.8%2C27.8%2C43.9%2C36.8%2C17.2%2C9.6%2C36%2C15.1%2C55.7%2C14.9%2C21.3-.2%2C41.4-7%2C59.5-19.8%2C19.4-13.7%2C36-33.9%2C48.6-59.4%2C13.2-26.8%2C21.7-58.8%2C24-93.6%2C2.4-36.7-2-73.6-12.9-108.8h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stoneSkin: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20472%20472%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M190.1%2C15L8.1%2C121.5l119.6%2C54.3%2C148.3%2C11.7%2C42-24.3%2C17.3%2C11.6-46.2%2C26.8v148.9l53.6-14.6-64.6%2C52-110.9-59.6-2.2-1.5-71.3%2C6.6%2C75.9-32%2C100.8%2C52.1v-147.5l-145.9-11.5h-1.6c0-.1-1.5-.8-1.5-.8L.4%2C138.5v223.8l23.8%2C31.7%2C82%2C21%2C21.9-21.3%2C11.2%2C29.7%2C131.3%2C33.6v-52.2l4.2%2C2.3%2C5.5%2C2.9%2C4.8-3.9%2C4.2-3.3v52.2l182.4-106.3v-96.4l-24.6-11.9%2C24.6-38.8v-105.7l-90.2%2C52.3-1.1%2C34.1-88-58.7%2C85%2C5.4%2C79.5-46.1-184.9-47.1%2C1.6.6-64.4%2C5.8%2C5.3-20.9-24.2-6.2h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-smokeBomb: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20469%20469%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M263.7.2c-20.4%2C0-39.6%2C6.7-52.8%2C18.1-8.8-6.1-19.3-9.3-30-9.3-27.8%2C0-50.6%2C21.5-52.8%2C48.8-18%2C5-30.8%2C21.4-30.8%2C40.6s.2%2C5.1.7%2C7.6c-2.9%2C5.9-4.5%2C12.3-4.5%2C18.9%2C0%2C23.2%2C18.9%2C42.1%2C42.1%2C42.1%2C2.4%2C0%2C4.8-.2%2C7.2-.6%2C1.4%2C2.9%2C3.1%2C5.7%2C5.1%2C8.2-17.4%2C3.3-27.1%2C17.2-23.3%2C36-9.3%2C4.6-16.9%2C6.2-17.2%2C18.3-.3%2C9.9%2C4.9%2C19%2C13.2%2C25.6-8.3%2C6.6-13.2%2C15.7-13.2%2C25.6s10.4%2C21.7%2C17.6%2C28.4c-7.4%2C9.7-7.9%2C25-.3%2C38.2.7%2C1.2%2C1.5%2C2.4%2C2.3%2C3.5l-14.6%2C49.4%2C48.4-30.4c7.1-.4%2C13.2-.9%2C20%2C.1%2C9.9%2C0%2C19.4-4.4%2C26.6-12.2%2C1.6.2%2C3.2.3%2C4.9.3%2C25.4%2C0%2C46.1-20.7%2C46.1-46.1s-.3-5.9-.8-8.8c14.2-4%2C25.6-14.5%2C30.8-28.3%2C8.7-2.7%2C16.6-7.6%2C22.8-14.3%2C27.7-.2%2C51.6-20%2C57.2-46.8%2C14.9-10.4%2C24.1-26.9%2C25-45%2C17.8-6.7%2C29.8-23.6%2C29.8-43.1s-19-44.4-43-46c-3.6-21.8-22.6-38.5-45.5-38.5s-2.1%2C0-3.1.1C324.2%2C17%2C296.6.2%2C263.7.2h0ZM263.7%2C15.5c28.1%2C0%2C52%2C15.2%2C54.4%2C34.5v.7c-9.5-9-22.2-14-35.5-13.9-17.2.1-33.2%2C8.7-42.8%2C23%2C9.5-8.7%2C21.9-13.6%2C34.7-13.7%2C28.5-.2%2C51.6%2C22.7%2C51.6%2C51.1h0c0%2C10.2-3.1%2C20.3-8.8%2C28.8%2C10.8-9.8%2C16.9-23.6%2C16.9-38.1%2C0-11-3.6-21.7-10.2-30.5%2C3.5-.9%2C6.9-1.6%2C10.7-1.7%2C16.9%2C0%2C30.7%2C13.8%2C30.7%2C30.7v8.8c4-.4%2C7.8-.9%2C11.6-1%2C17%2C0%2C30.7%2C13.8%2C30.7%2C30.7s-9.8%2C26.7-23.8%2C29.9l-6.2%2C1.4c.1%2C2.9.3%2C5.8.4%2C8.6%2C0%2C15.2-7.7%2C29.1-20.7%2C37l-3.1%2C1.9-.5%2C3.6c-3.1%2C21.2-21.6%2C37.1-43%2C37.1-2%2C0-4.4-.2-6.5-.3l-2.5%2C3c-5.6%2C6.7-15.6%2C12.1-25.8%2C14-3.6%2C13.8-12.1%2C23.3-28.8%2C27.4l-10.7.7%2C4.2%2C9.9c1.6%2C3.8%2C2.4%2C7.8%2C2.4%2C11.9%2C0%2C17-13.8%2C30.7-30.7%2C30.7-3.4%2C0-7.6-.9-11.3-1.7-5.5%2C7.5-9.4%2C12-20.2%2C13.7-7.8-.1-16.4-1.8-24.9.1l-17.3%2C10.9%2C3.7-12.4%2C2.1-5.7c-2.5-2.7-4.6-4.8-6.4-7.9-5.3-9-4.5-19.8%2C1.7-23.4%2C2.2-1.3%2C3.6-3.5%2C3.9-5.9.5-4.4-2.2-6.8-6.5-10.9-3.9-3.6-14.3-13.2-14.3-18.7%2C0-7.8%2C6.4-14.9%2C16.4-18.3l21.6-7.3-21.6-7.3c-10-3.4-16.4-10.5-16.4-18.3%2C0-3.9%2C13.2-8.2%2C16.7-11.9-3.1-13.3.2-24.4%2C16.4-27.8%2C3.5%2C0%2C7.8%2C1.1%2C11.6%2C2%2C3.3-5.1%2C6.6-9.9%2C10.8-14.6l-8.8-4.2c-7.1-3.4-12.3-9.7-14.4-17.2l-2.2-8.1c-6%2C2.2-10.8%2C4.5-17.2%2C4.6-14.8%2C0-26.8-12-26.8-26.8s1.3-9.6%2C3.8-13.8l1.7-2.8c-.9-3.5-1.7-6.2-1.7-9.9%2C0-13.7%2C10.3-25.2%2C23.9-26.6l7.2-.8c-.1-3.1-.3-6.1-.4-9%2C0-20.7%2C16.9-37.6%2C37.6-37.6s18.4%2C3.5%2C25.4%2C9.8l5.7%2C5.2%2C5.2-5.8c10.1-11.3%2C27.5-18.1%2C46.5-18.1h0ZM176.4%2C73.1c-13.5.1-26.5%2C9.5-32.5%2C23.4-8.1%2C18.7-1.5%2C39.6%2C14.8%2C46.7.6.3%2C1.2.5%2C1.9.7-10.9-8.7-14.1-25.1-7.8-39.6%2C7.5-17.3%2C25.8-26.1%2C40.9-19.5.4.2.7.4%2C1.1.6-7.5%2C3.7-12.4%2C10.2-13.3%2C17.7%2C0%2C.6-.1%2C1.2-.1%2C1.8%2C6-8.2%2C17.8-12.5%2C30-11.1%2C11.9%2C1.4%2C22.1%2C8.1%2C26.1%2C17.1%2C0-.2%2C0-.4.1-.6%2C1.5-13.3-9.8-25.7-25.3-27.7-1.6-.2-3.2-.3-4.8-.3-3%2C0-5.9.5-8.6%2C1.4-2.9-3.6-6.6-6.5-10.8-8.3-3.7-1.6-7.6-2.4-11.7-2.3h0ZM226.4%2C212.4c-18-.4-33.2%2C9.8-37.2%2C25-.6%2C2.3-.9%2C4.6-1%2C6.9%2C0-.1%2C0-.2%2C0-.3%2C5.4-16.7%2C25.5-25.1%2C44.7-18.8%2C0%2C0%2C0%2C0%2C0%2C0%2C19.2%2C6.3%2C30.4%2C24.9%2C25%2C41.5%2C0%2C0%2C0%2C0%2C0%2C0-1.4%2C4.3-3.9%2C8.3-7.3%2C11.5%2C8.4-4.5%2C14.3-11.7%2C16.6-20.2%2C4.9-18.7-8.5-38.4-30.1-44.1%2C0%2C0%2C0%2C0%2C0%2C0-3.5-.9-7.2-1.5-10.8-1.5h0ZM93.4%2C373.7c-26.3%2C0-47.6%2C21.3-47.6%2C47.6s21.3%2C47.6%2C47.6%2C47.6%2C47.6-21.3%2C47.6-47.6-1.5-13.4-4.1-19.3c-1.4-3.2-18.4%2C19.3-33.2%2C9.2-7.1-4.8-1.8-19.9%2C1.5-28.7%2C1.5-3.9%2C2.5-6.5%2C2.1-6.7-4.5-1.4-9.1-2-13.8-2h0ZM78.2%2C390.2c1.1.2-9%2C14%2C1.3%2C36.8%2C2.1%2C4.6-.3%2C10-5%2C12-4.7%2C2-10.2-.1-12.1-4.7-2-4.6%2C0-33.4%2C15.1-43.7.4-.3.6-.4.8-.4h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-warCry: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20467%20467%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M245.4%2C301.9h-23.8l-12.1-40.9-63.8-19.8%2C1%2C39.4%2C41.9%2C47.3%2C16.1-14.3%2C12.2%2C141.8-109.2-122.2%2C19.4-58.2-10.4-125.2%2C23.1-9.8c18.4%2C71.3%2C73.1%2C96.4%2C73.1%2C96.4l20.6-28.9%2C20.6%2C28.9s54.7-25.1%2C73.1-96.4l23.1%2C9.8-10.4%2C125.2%2C19.4%2C58.2-109.2%2C122.2%2C12.2-141.8%2C16.1%2C14.3%2C41.9-47.3%2C1-39.4-63.8%2C19.8-12.1%2C40.9ZM371.2%2C366.7l-74.8%2C76.7%2C56.8-28%2C6.1%2C24%2C51.6-36-39.7-36.7ZM95.8%2C366.7l74.8%2C76.7-56.8-28-6.1%2C24-51.6-36%2C39.7-36.7ZM362.3%2C249l101.2-58.3C483.5%2C2.4%2C409.9-9.9%2C338%2C30.1c0%2C0%2C114.1-27.7%2C66.1%2C109.4l-35.8%2C14.7-6%2C94.8ZM104.7%2C249L3.5%2C190.7C-16.5%2C2.4%2C57.1-9.9%2C129%2C30.1c0%2C0-114.1-27.7-66.1%2C109.4l35.8%2C14.7%2C6%2C94.8ZM233.5%2C97.3l67.5%2C41.8s-3.2%2C35-42.4%2C64.7l-25.1-51.7-25.1%2C51.7c-39.2-29.7-42.4-64.7-42.4-64.7l67.5-41.8Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-intimidatingRoar: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476%20476%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M165.6%2C3.3c53.7%2C45.4%2C5.5%2C70.3-7.8%2C76.3-40.5%2C18.4-87.7-24.6-99.5-67.3-14.3%2C43.2-47.1%2C132.1%2C11.2%2C168.1-35.8%2C39.9-35.7%2C37-65.2-7.9-8.4%2C41.3-2.8%2C112.6%2C15.7%2C164.1%2C2-22.1%2C5-43.5%2C11.2-60.7l1.1-3%2C2.8-1.7c45.9-27.2%2C86.1-36%2C117.3-40.1-3-12.3-4.7-25.5-4.7-39.2s.1-6%2C.2-8.9l-82.1-40.7%2C35.5-14.9-45.3-45.2%2C89.7%2C51-29.2%2C12.2%2C32%2C30.6c2.5-26.4%2C11.2-50.1%2C24.3-68.5%2C15.7-22.1%2C38.4-36.6%2C63.9-36.6s48.2%2C14.5%2C63.9%2C36.6c13.2%2C18.5%2C21.9%2C42.4%2C24.4%2C68.9l40.1-41.3-38.1-10.9%2C84.1-70.1-42.9%2C60.5%2C45.2%2C14.3-88.2%2C49.7c.4%2C6.3.6%2C11.8.4%2C17.5%2C6.2-.9%2C12.5-1.5%2C18.7-1.6%2C5.8%2C0%2C11.5.4%2C16.7%2C1.3%2C14.8%2C4.2%2C40.8%2C45.8%2C45.1%2C57.7-2.9%2C14.3-13%2C25.4-22.4%2C34.8l44.9%2C95.9c5.9%2C12.6%2C2.8%2C28.4.5%2C40.3-2.4%2C12-9.3%2C23.5-21.7%2C27.5-23.7%2C5-40.5-7.7-54.3-23%2C.2%2C15.2%2C0%2C30.1-.4%2C44.9h94.4c27.4-32.1%2C28.2-70.2%2C24.9-111.1-24.7%2C25.5-45.1-14.3-57.4-41.6%2C29.3%2C26.7%2C70.1-42.9%2C59.3-106.7-5.4%2C15.8-42.6%2C27-59-27.7%2C50.4-13%2C54.4-78.4%2C60.5-110-21.2%2C26.9-33.3%2C42.1-65.6%2C24.3%2C38.8-28.3%2C7.1-73.3-26.7-91%2C23%2C33.7-57.3%2C89.8-81.1%2C66.5C287.2%2C25.4%2C217.9-4.1%2C165.6%2C3.3ZM236.6%2C88.9c-18.7%2C0-36%2C10.5-49.2%2C29-5.5%2C7.6-10.1%2C16.6-13.7%2C26.5%2C22.5%2C12.7%2C45.4%2C25.1%2C57.2%2C47.7-1.4%2C5.3-2.4%2C10.8-3.9%2C16l-44.4-10.6c7.1-12.6%2C27.8-11.6%2C39.7%2C3.2-7.6-11.3-19.1-20-38.9-21l-10.4-33.4c-4.7%2C13.7-7.4%2C29.2-7.4%2C45.6%2C0%2C29.2%2C8.5%2C55.5%2C21.8%2C74%2C13.2%2C18.5%2C30.5%2C29%2C49.2%2C29s36-10.5%2C49.2-29c1.4-1.9%2C2.6-3.9%2C3.9-5.9-2.2-17.1-3.9-39.4%2C3.1-52.2%2C3-4.7%2C9.9-6.1%2C14.5-7.6.8-18.8-2.2-39.9-7.9-55.9l-10%2C35c-17.1%2C1.3-27.8%2C8.2-35.2%2C17.4%2C8.1-4.5%2C25.6-6.4%2C36.4-8.8%2C1.1%2C5.7%2C2.8%2C11.4-2.8%2C17.9-13.3-4.4-29.6-1.4-40.9%2C2.8-1.2-5.4-3.3-11.1-4.7-15.7%2C11.4-23.2%2C34.5-36.2%2C56.9-49.6-3.5-9.5-8-18-13.3-25.4-13.2-18.5-30.5-29-49.2-29ZM307.5%2C219.5c-2.2%2C6.6-3%2C19.7-.8%2C33.1%2C2.1%2C13.7%2C6.6%2C27.3%2C10.2%2C34.2%2C6.9%2C2.5%2C13.8%2C5.1%2C20.7%2C7.7l25%2C118c9.6%2C10.8%2C24.3%2C26.9%2C39.2%2C22.4%2C14.2-7.3%2C10.9-33%2C9.2-45.6l-48.6-103.9c7.7-11.8%2C20.9-21.1%2C24.6-31.2-5.2-13.2-17.7-31.3-31-40.9-15.3-.5-35.8%2C1.9-48.5%2C6.2h0ZM197.3%2C223.7c7.8%2C0%2C22.1%2C15%2C39.8%2C13.9%2C15.9-.9%2C29.4-21.3%2C39.5-9.2%2C11%2C13.3-4%2C33.9-11.4%2C40%2C0%2C0-14.3-14.7-27.8-13.6-13.3%2C1-25.1%2C16.4-25.1%2C16.4-15.8-9.5-28.3-28.6-19.4-44.7%2C1.1-2%2C2.6-2.8%2C4.4-2.8h0ZM157.9%2C248.6c-29.9%2C3.7-67.1%2C11.2-110.7%2C36.5-10.1%2C39-10.7%2C79.1-14.4%2C114.8l-23.9%2C41.2c2.8%2C14.4%2C7.5%2C33.4%2C23.5%2C32.1%2C18-2.5%2C35.8-13.4%2C42.1-29-2.4-10.8-6.1-19.3-10.2-28%2C4.3-33.2%2C4.2-66%2C13.3-91.5l2.9-7.8c29.2%2C6.6%2C47.8%2C2.6%2C70.2-13.4l-1.2%2C19c-3.4%2C51.4-12%2C105.7-10.1%2C151.4h195.1c1.5-49.8.3-100.3-10.5-154.2-.7-3.7-1.3-7.6-2-11.8l-17.6-6.6c-3.8-6-6.9-12.9-8.9-18.5-15.4%2C18.3-36%2C30.1-58.9%2C30.1s-48.2-14.5-63.9-36.6c-5.9-8.2-10.9-17.6-14.8-27.7h0ZM130.2%2C336.8c-13%2C4-26.8%2C3.6-38.1%2C1.6-7.3%2C24.1-7.4%2C48.4-9.5%2C74.6%2C5%2C12.5%2C9%2C21.8%2C10.4%2C33.2-4.1%2C10.6-10%2C21-16.5%2C27.7h44.7c-1.8-43.5%2C5.1-91.6%2C9-137.1h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-alorasTouch: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M133.4.3C82%2C.9%2C53.8%2C56.6%2C54.1%2C87.2c1.5%2C47.3%2C34.2%2C79.4%2C74.8%2C114.8%2C35.4%2C30.8%2C76.1%2C63.3%2C100.9%2C110%2C0%2C0%2C.1-.2.2-.3%2C0%2C0%2C.1.2.2.3%2C24.8-46.7%2C65.6-79.2%2C100.9-110%2C40.6-35.4%2C73.3-67.4%2C74.8-114.8.3-30.7-27.9-86.3-79.2-87-38-.5-82.6%2C25.7-96.6%2C67.7C216%2C25.9%2C171.4-.2%2C133.4.3ZM34.2%2C170c-8.8-.1-17.8%2C11.1-17.9%2C39.9%2C0%2C44.2-4.4%2C56.6%2C16.1%2C106.6%2C15%2C36.6%2C21.7%2C64.8%2C69.6%2C87.5%2C5.7%2C20%2C3.4%2C24.7-.4%2C41.8-3.6%2C16%2C33.4%2C18.9%2C60.5%2C5.5%2C29.1-15.9%2C26.6-59.6%2C21.5-89.2-6-34.5-25.1-41.6-41.5-56.3-17.1-24.5-21.1-68.8-48.9-86.7-5.8-3.7-35.4-7.5%2C5.3%2C93.9-53.6-13.3-43.8-74.8-47.7-120.3-1.2-13.6-8.8-22.5-16.6-22.6h0ZM425.8%2C170c-7.8.1-15.4%2C9.1-16.6%2C22.6-3.9%2C45.5%2C5.9%2C107-47.7%2C120.3%2C40.6-101.5%2C11.1-97.7%2C5.3-93.9-27.8%2C17.9-31.7%2C62.2-48.9%2C86.7-16.5%2C14.7-35.5%2C21.9-41.5%2C56.3-5.2%2C29.6-7.6%2C73.3%2C21.5%2C89.2%2C27.1%2C13.5%2C64.1%2C10.5%2C60.5-5.5-3.9-17.1-6.1-21.8-.4-41.8%2C47.9-22.7%2C54.7-50.9%2C69.6-87.5%2C20.4-49.9%2C16.2-62.4%2C16.1-106.6%2C0-28.8-9.1-40-17.9-39.9h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-armorPenetration: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20480%20480%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M203.7%2C2.2l-17.1%2C78.3c16.9-6%2C35.1-9.3%2C54-9.4L203.7%2C2.2ZM433%2C75.1l-133.3%2C57.1c-3.8%2C39.7%2C34.4%2C73.8%2C69.1%2C72.9l64.2-130h0ZM242.1%2C89.7c-32.5%2C0-62.6%2C10.4-87%2C28.2l25.4%2C4.4h5.2l2.4%2C5.6c23.2%2C53-17.3%2C112.8-68.4%2C118.4l-5%2C.6-3.2-3.9-17-20.4c-.5%2C5.1-.8%2C10.3-.8%2C15.5%2C0%2C82%2C66.3%2C148.3%2C148.3%2C148.3s8.5-.2%2C12.6-.5l-33.8-26.5-4-3.1.4-5c3.7-43.3%2C44.8-80.4%2C90.1-80.7%2C10.5%2C0%2C21.1%2C1.9%2C31.6%2C6.1l4.7%2C1.9%2C1%2C5%2C10.1%2C50.8c22.1-25.9%2C35.4-59.5%2C35.4-96.3s-1-19.5-2.8-28.8l-4.5%2C9-2.2%2C4.5-5%2C.6c-50.9%2C6.4-104.3-42.3-94-99.3l1.9-5%2C3.6-2%2C24-10.3c-20.7-11-44.3-17.2-69.3-17.2h0ZM29.8%2C115.3l92.7%2C111.5c34-7.1%2C63.1-49.2%2C50.2-86.9L29.8%2C115.3h0ZM75.1%2C237.4L.3%2C280.2l85.4%2C16.2c-6.8-18.2-10.6-37.9-10.6-58.4s0-.4%2C0-.6h0ZM408.6%2C249.9c-1.4%2C20.2-6.5%2C39.9-15%2C58.2l86.1-7.9-71.1-50.3h0ZM307.5%2C289.4c-33.8.8-65.3%2C28.3-70.7%2C58.5l120.6%2C94.8-29.9-150.3c-6.7-2.1-13.4-3.2-20.1-3h0ZM162.3%2C384.7l8.6%2C93.2%2C52.2-73.9c-21.3-2.4-42-8.9-60.8-19.2h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-the-arena: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20470%20470%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M131.4%2C56.8c-49.3%2C15.9-93.3%2C45.8-114.4%2C86%2C13.5-.9%2C10.6%2C14.5%2C10.6%2C29.9h-13.5c.3%2C20%2C4.5%2C22.5%2C4.5%2C22.5%2C8.8%2C0%2C8.8%2C16%2C8.8%2C32H10.6L0%2C389.2c0%2C2.8%2C3.5%2C5.3%2C9.9%2C7.5.2-25.6%2C1.5-47.5%2C8.7-47.5s8.7%2C24.5%2C8.8%2C52c6.8%2C1.3%2C14.7%2C2.5%2C23.5%2C3.6.2-27.4%2C1.5-51.6%2C11.7-51.6s11.6%2C25.7%2C11.7%2C54.1c9.2.8%2C19%2C1.6%2C29.4%2C2.2.1-28.5%2C1.4-54.3%2C13.7-54.3s13.6%2C26.7%2C13.7%2C55.8c8.3.4%2C16.8.7%2C25.5%2C1%2C.1-28.6%2C1.5-54.8%2C15.6-54.8s17.3%2C8%2C17.4%2C36.9c27.6%2C20.2%2C24%2C14.4%2C27.7%2C19%2C.1-29.1%2C1.5-55.9%2C17.6-55.9s17.5%2C26.8%2C17.6%2C55.9c9.9%2C0%2C19.7-.2%2C29.4-.4.1-28.9%2C1.4-55.6%2C15.6-55.6s15.5%2C26.1%2C15.6%2C54.8c6.9-.2%2C13.7-.5%2C20.6-.8l-34.5-77.3-30.5-2.6-24.5-113-35.3%2C3-13-52.7-15.9-2.3-48.7-109.5ZM117.7%2C102.8c13.7%2C0%2C13.7%2C16%2C13.7%2C32l-27.4%2C8c0-16%2C0-40%2C13.7-40ZM62.9%2C118.8c11.8%2C0%2C11.8%2C16%2C11.8%2C32l-23.5%2C4c0-16%2C0-36%2C11.8-36ZM172.3%2C179.2c15.7%2C0%2C15.7%2C16%2C15.7%2C32l-31.3%2C2c0-16%2C0-34%2C15.7-34h0ZM117.5%2C183.2c13.7%2C0%2C13.7%2C16%2C13.7%2C32l-27.4%2C2c0-16%2C0-34%2C13.7-34ZM62.7%2C189.2c11.8%2C0%2C11.8%2C16%2C11.8%2C32l-23.5%2C4c0-16%2C0-36%2C11.8-36ZM262%2C216.4l20%2C92.2c0-23.8.1-47.3%2C15.7-47.3s15.7%2C24%2C15.7%2C48c-1.4%2C5.7-1.5%2C6.2-2.2%2C7.7l28.7%2C64.2c1.4-15.2%2C4.7-25.9%2C12.7-25.9%2C12.3%2C0%2C13.6%2C25.8%2C13.7%2C54.3%2C9.6-.6%2C18.8-1.3%2C27.5-2.1.1-28.4%2C1.2-54.2%2C11.7-54.2s11.6%2C24.4%2C11.7%2C51.8c10.5-1.3%2C19.8-2.7%2C27.5-4.2.1-27.4%2C1.1-51.6%2C8.8-51.6s8.5%2C21.5%2C8.7%2C46.8c5.1-2.1%2C7.9-4.3%2C7.9-6.8l-9-138.1c-10.9-10-26.1-16.9-44.1-21.7l-19.9%2C14-30.3-2.8-20.7-21.1c-27.1-1.7-55.9-2.2-84-3.1h0ZM172.3%2C261.2c15.7%2C0%2C15.7%2C24%2C15.7%2C48h-31.3c0-24%2C0-48%2C15.7-48ZM235%2C261.2c17.6%2C0%2C17.6%2C24%2C17.6%2C48h-35.2c0-24%2C0-48%2C17.6-48ZM117.5%2C263.2c13.7%2C0%2C13.7%2C24%2C13.7%2C48h-27.4c0-24%2C0-48%2C13.7-48ZM352.5%2C263.2c13.7%2C0%2C13.7%2C24%2C13.7%2C48h-27.4c0-24%2C0-48%2C13.7-48ZM62.7%2C265.2c11.8%2C0%2C11.8%2C22%2C11.8%2C46l-23.5%2C2c0-24%2C0-48%2C11.8-48ZM405.4%2C265.2c11.8%2C0%2C11.8%2C24%2C11.8%2C48l-23.5-2c0-24%2C0-46%2C11.8-46ZM22.6%2C267.2c8.8%2C0%2C8.8%2C22%2C8.8%2C46l-17.6%2C2c0-24%2C0-48%2C8.8-48h0ZM449.4%2C267.2c8.8%2C0%2C8.8%2C24%2C8.8%2C48l-17.6-2c0-24%2C0-46%2C8.8-46h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-powerShot: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20477%20477%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M68.4.2l-3.1%2C49.7-30.6-28.6-11.7%2C11.7%2C30%2C32.2L.2%2C68.4c41.8%2C51.5%2C65.3%2C68.4%2C119.2%2C67.8l22.3%2C23.9c3.2-3.3%2C6.3-6.5%2C9.6-9.7h0c3.5-3.5%2C7.1-7%2C10.6-10.4l-23.4-21.8C144.6%2C63.2%2C116.1%2C38.8%2C68.4.2h0ZM432.7%2C2.3c-1%2C0-2%2C0-3%2C0-2.3%2C0-4.7.2-7.2.4-19.9%2C1.8-44.9%2C9.5-72.7%2C22.8-55.5%2C26.5-122.2%2C74.9-185.7%2C138.4-63.5%2C63.5-111.9%2C130.2-138.6%2C185.9-13.3%2C27.8-21.1%2C52.9-22.9%2C72.8-1.8%2C19.9%2C2.2%2C34%2C11%2C42.8%2C8.8%2C8.8%2C22.9%2C12.8%2C42.8%2C11%2C19.9-1.8%2C45-9.6%2C72.8-22.9%2C47.2-22.6%2C102.5-61%2C156.9-110.9l-14.2-15.2c-2.1%2C1.9-4.2%2C3.9-6.2%2C5.8-8.9%2C6.3-17.5%2C11.4-25.2%2C15.1-8.8%2C4.2-16.6%2C6.6-22.2%2C7.1-5.6.5-8.1-.6-9.3-1.9s-2.4-3.8-1.9-9.3c.5-5.5%2C2.8-13.4%2C7.1-22.2%2C6.8-14.2%2C18.4-31.2%2C33.5-48.1h.1c2.2-2.4%2C4.4-4.9%2C6.6-7.3.3-.4.7-.7%2C1-1.1%2C1.2-1.3%2C2.5-2.6%2C3.8-3.8%2C20.8-20.8%2C42.6-36.6%2C60.3-45%2C8.8-4.2%2C16.6-6.5%2C22.1-7%2C.7%2C0%2C1.3-.1%2C1.9-.1.6%2C0%2C1.2%2C0%2C1.7%2C0%2C3.1.2%2C4.8%2C1%2C5.7%2C2%2C1.3%2C1.3%2C2.4%2C3.8%2C1.9%2C9.3-.5%2C5.5-2.8%2C13.3-7%2C22.1-3.9%2C8.1-9.3%2C17-16%2C26.3-.3.3-.6.6-.9%2C1l15.1%2C14.2c49.2-54%2C87-108.5%2C109.3-155.2%2C13.3-27.8%2C21-52.8%2C22.8-72.7%2C1.8-19.9-2.2-34-11-42.8-7.2-7.2-18-11.2-32.6-11.4h0ZM420.4%2C68.3c7.3-.2%2C13%2C1.6%2C16.9%2C5.5%2C18.1%2C18.1-10%2C77.3-65.6%2C147.1.4-8.3-1.5-16.6-7.4-22.5-4.7-4.7-11-6.9-17.6-7.4-2.2-.1-4.4-.1-6.6%2C0-8.9.8-18.4%2C3.9-28.5%2C8.8-20.3%2C9.7-43.4%2C26.6-65.4%2C48.6h0c-22%2C22-38.9%2C45.1-48.7%2C65.5-4.9%2C10.2-8%2C19.7-8.8%2C28.6-.8%2C8.9.9%2C17.9%2C7.3%2C24.2%2C5.7%2C5.7%2C13.7%2C7.7%2C21.8%2C7.4-68.3%2C53.8-125.8%2C80.6-143.6%2C62.8-24.7-24.7%2C36.6-126.2%2C136.8-226.4%2C84.6-84.6%2C170-141.4%2C209.5-142.3h0ZM236.9%2C210c-8.5%2C8.2-16.9%2C16.7-25%2C25.3l10.5%2C11.2c8.4-8.9%2C17.3-17.3%2C26.5-25.3l-11.9-11.2h0ZM289.5%2C259.1c-10.3%2C8.7-19.8%2C18-28.7%2C28.6l25%2C26.8h0c0%2C0%2C14.3%2C15.3%2C14.3%2C15.3h0c0%2C0%2C38%2C40.7%2C38%2C40.7l-73.9%2C23.7%2C211.1%2C81.6-81.6-211.1-22.6%2C70.6-39.7-37h0c0%2C0-15.2-14.3-15.2-14.3%2C0%2C0%2C0%2C0-.1.1l-26.7-24.9h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-brawlers: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476%20476%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M237.9.5c-13.4%2C0-26.1%2C7.7-35.9%2C21.8-9.9%2C14.1-16.3%2C34.3-16.3%2C56.8s6.5%2C42.7%2C16.3%2C56.7c9.9%2C14.1%2C22.5%2C21.8%2C35.9%2C21.8s26-7.7%2C35.9-21.8c9.9-14.1%2C16.4-34.2%2C16.4-56.7s-6.5-42.7-16.4-56.8C263.9%2C8.2%2C251.3.5%2C237.9.5h0ZM87.6%2C43.5c-20.3.6-24%2C13.9-31.8%2C29C32.6%2C117.9.3%2C237.3.3%2C237.3l160.5-5.4%2C29.1%2C137.6-22.8%2C106h149.1l-22.3-106%2C24.2-137.5%2C157.5%2C5.3s-32.3-119.4-55.6-164.8c-7.8-15.1-11.5-28.5-31.8-29-17.9%2C0-32.4%2C15.6-32.4%2C34.7s14.5%2C34.7%2C32.4%2C34.7%2C7.3-.9%2C10.6-2.1l7.9%2C74.4-116.9-40.1c-.3.4-.6.9-.8%2C1.3-12.4%2C17.7-30.6%2C29.7-51.2%2C29.7s-38.8-12-51.2-29.7c-.3-.4-.5-.8-.8-1.2l-116.8%2C40%2C7.9-74.4c3.3%2C1.2%2C6.9%2C2.1%2C10.6%2C2.1%2C17.9%2C0%2C32.4-15.6%2C32.4-34.7s-14.5-34.7-32.4-34.7h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-provocation: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20471%20471%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M85.1%2C37.9v11.8c.9%2C109.9%2C50.1%2C220%2C147.5%2C314.1l6.5%2C6.3%2C6.5-6.3c96.8-93.9%2C147-204%2C147.8-314.1v-11.7c0%2C0-11.4%2C2.5-11.4%2C2.5-80.3%2C17.7-205.3%2C17.9-285.5%2C0l-11.5-2.6h0ZM119%2C70.4l11.4%2C2.6c61%2C13.6%2C156.7%2C13.5%2C217.7%2C0l11.5-2.5v11.7c-.8%2C84.9-39.6%2C169.9-114%2C242.1l-6.5%2C6.3-6.5-6.3c-74.9-72.4-113-157.3-113.6-242.1v-11.8c0%2C0%2C0%2C0%2C0%2C0ZM340.5%2C93.4c-60.4%2C11.2-141.8%2C11.4-202.2%2C0%2C3.6%2C73.1%2C36.8%2C146.2%2C100.9%2C210.8%2C63.8-64.5%2C97.6-137.8%2C101.3-210.9h0ZM.2%2C229.9l103.4%2C166.3%2C17.9-51.3%2C96.2%2C88.2-103.4-166.3-17.9%2C51.3L.2%2C229.9h0ZM470.8%2C229.9l-96.2%2C88.2-17.9-51.3-103.4%2C166.3%2C96.2-88.2%2C17.9%2C51.3%2C103.4-166.3h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-buff: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20403.4%20469.6%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M4.7%2C400.9l185.5-185.2c6.2-6.2%2C16.2-6.3%2C22.4%2C0%2C0%2C0%2C0%2C0%2C0%2C0l185.5%2C185.2c6.2%2C6.2%2C6.2%2C16.5%2C0%2C22.8l-41.5%2C41.2c-6.2%2C6.2-16.2%2C6.3-22.4%2C0%2C0%2C0%2C0%2C0%2C0%2C0l-132.8-132.8-132.8%2C132.8c-6.2%2C6.2-16.2%2C6.3-22.4%2C0%2C0%2C0%2C0%2C0%2C0%2C0l-41.5-41.2c-6.2-6.2-6.2-16.5%2C0-22.8%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M5.2%2C189.9L190.7%2C4.7c6.2-6.2%2C16.2-6.3%2C22.4%2C0%2C0%2C0%2C0%2C0%2C0%2C0l185.5%2C185.2c6.2%2C6.2%2C6.2%2C16.5%2C0%2C22.8l-41.5%2C41.2c-6.2%2C6.2-16.2%2C6.3-22.4%2C0%2C0%2C0%2C0%2C0%2C0%2C0L201.9%2C121.2%2C69.2%2C253.9c-6.2%2C6.2-16.2%2C6.3-22.4%2C0%2C0%2C0%2C0%2C0%2C0%2C0L5.2%2C212.7c-6.2-6.2-6.2-16.5%2C0-22.8%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-daggerThrow: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20473.3%20471.3%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C0v17.4l133.3%2C133.3c-3.9%2C6.4-5.9%2C13.4-6.3%2C20.1L0%2C43.8v35.8l191.4%2C191.4c-3.3%2C5.7-6.3%2C11.5-9.1%2C17.4L0%2C106v39l171.3%2C171.3c-2.2%2C6.7-4.1%2C13.6-5.8%2C20.6L0%2C171.4v33.6l158.3%2C157.6%2C2.1-2.1h0c0%2C.1%2C13.9-2.7%2C13.9-2.7%2C26.1-5.4%2C50.1-15%2C71.9-27.4%2C66.7%2C66%2C119.5%2C103%2C210.4%2C135.1l16.8%2C5.9-4.6-17.2c-24.8-92.5-69.2-136.4-139.3-206.4%2C13.4-22.5%2C23.5-47.4%2C29-74.9l2.8-13.7%2C1.8-1.8L205.9%2C0h-35l164.6%2C164.6c-7%2C1.7-13.8%2C3.7-20.5%2C6L144.5%2C0h-39.5l182.1%2C182.1c-5.8%2C2.8-11.5%2C5.9-17.1%2C9.2L78.6%2C0h-37.2l129.9%2C129.9c-1.4%2C0-2.7%2C0-4.1%2C0-5.9.3-11.9%2C1.8-17.5%2C4.8L15%2C0S0%2C0%2C0%2C0ZM168.7%2C148.3c5.2-.1%2C10.3%2C1.6%2C15%2C4.3%2C4.7%2C2.8%2C8.5%2C6.7%2C10.4%2C10.4%2C1.9%2C3.7%2C2.1%2C6.6.9%2C9.4l-3.2%2C7.6%2C7.1%2C4.2c17.7%2C10.4%2C31.4%2C22.2%2C44.6%2C37.8l5.9%2C6.9%2C7.1-5.7c22.8-18.3%2C49.7-31.7%2C80.1-39.7-6%2C22.1-14.9%2C42.3-26.6%2C60.7l-4.1%2C6.3%2C5.3%2C5.3c68.3%2C68.3%2C109.3%2C106.9%2C134.3%2C185.3-80-30.5-127.4-65.3-191.1-129l-5.2-5.2-6.3%2C3.8c-17.6%2C10.8-37%2C19.2-57.8%2C24.9%2C7.8-29.2%2C20.3-55.7%2C37.4-77.8l5.5-7.1-6.8-5.8c-16.4-13.8-31.4-27.8-41.4-45.2l-3.3-5.8-6.6%2C1.3c-8.2%2C1.7-17.1-3.5-21.5-12-4.4-8.5-4.8-18.6%2C5.6-28.5%2C4.7-4.5%2C9.8-6.5%2C15-6.6h0ZM267.8%2C247l-16.6%2C17.8c41.4%2C43.6%2C112.4%2C108.9%2C157.8%2C140.7-32-45.9-97.4-117-141.2-158.5h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-weave: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20473.4%20473.1%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M473.4%2C19.9V.1c-89.2-.1-178.5-.1-267.7-.1l138%2C9.7c-6%2C15.4-11.8%2C31.4-15.1%2C47.9-2.8%2C13.7-3.6%2C27.9-.9%2C41.9L188%2C28.6c-1.7-9.8-4.3-19.9-4-28.6h-18.8c-.2%2C6.1.4%2C12%2C1.4%2C17.7L131.8%2C0h-58.1c-6.8%2C11.5-11.7%2C24.3-13.8%2C38.7L13.6%2C0H0v13.1l52.5%2C43.8C33.9%2C65.1%2C15.2%2C78.3%2C0%2C95.5v46.8l64.8%2C83.9c-22.5%2C12.6-46%2C25.8-64.8%2C46.3v51.3l32.2%2C77.7c-11-.2-21.8.9-32.2%2C3.9v19.6c12.2-4.5%2C25.8-5.7%2C40.2-4.5l21.8%2C52.6h20.3l-23.8-57.2c33.2-26.5%2C75.1-43.6%2C118.9-44.1l70.2%2C90.8c-25.2%2C1.4-53.2%2C3.2-76.7%2C10.5h109.5c36.5-59.5%2C75.1-101.7%2C136.1-111.3%2C18.6%2C11.7%2C39.2%2C31.5%2C56.9%2C46.3v-24.3l-49.6-41.4c-3.5-68.9%2C17.1-117.9%2C41.6-151.9l8%2C4v-20.9l-9.5-4.8c-7.9-20.4-13.1-46.8-12.5-73.1.5-27.6%2C7.2-54.9%2C22-75.8ZM180.5%2C45.8l145.3%2C73.8c-29.9%2C27.3-43.5%2C62.8-46.5%2C102.3l-119.1-99.5c-.7-27.3%2C9-56.6%2C20.3-76.6ZM94.6%2C2.1l69.3%2C35.2c-11.5%2C20.3-20.8%2C43.4-22.3%2C69.6l-64.3-53.7c.3-20.5%2C6.6-36.5%2C17.3-51.1ZM5.4%2C118.8c17.7-20.3%2C40.3-40.1%2C63.3-48.4l64.3%2C53.7c-24.2%2C21.4-46.4%2C48.6-59.2%2C83.1L5.4%2C118.8ZM51.1%2C398.1L7.3%2C292.8c20.1-23.3%2C46.9-39.2%2C69.1-51.7l87.3%2C112.9c-41.6%2C3.3-80.6%2C19.8-112.6%2C44.1ZM87.5%2C224.9c13.6-35.7%2C35.3-67.1%2C59.9-88.7l125.8%2C104.9c-39.4%2C22.5-74.7%2C53.8-94.1%2C102.3l-91.6-118.5ZM267.8%2C458.2l-75.3-97.4c20.5-48%2C58.3-86.2%2C96-107l110.8%2C92.5c-58.2%2C14.3-97.3%2C57.5-131.5%2C111.9ZM404.8%2C326.6l-107.6-89.8c5.3-44.7%2C19.8-85.6%2C46.5-108.1l105%2C53.3c-23.7%2C33.9-43.7%2C81.4-43.9%2C144.6ZM432.7%2C95.3c-.5%2C21.5%2C2.4%2C42.6%2C7.6%2C61.5l-89.5-45.5c-7.3-15.7-7.4-32.2-3.9-50%2C3.3-16.2%2C9.7-33.2%2C16.3-50.2l89.5%2C6.3c-13.7%2C23.3-19.5%2C50.9-20%2C77.9Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-recharge: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20471.5%20466%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M238.5%2C0c-3.7%2C0-7.4.1-11.1.27l.8%2C17.98c3.4-.16%2C6.8-.25%2C10.3-.25%2C118.8%2C0%2C215%2C96.2%2C215%2C215s-96.2%2C215-215%2C215c-89.6%2C0-166.35-54.7-198.65-132.6l27.63-8.3-48.43-34.3L0%2C327.3l22.55-6.7c34.63%2C85.2%2C118.35%2C145.4%2C215.95%2C145.4%2C128.6%2C0%2C233-104.4%2C233-233S367.1%2C0%2C238.5%2C0Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M207.7%2C2.04c-13.3%2C1.75-26.1%2C4.6-38.6%2C8.48l5.6%2C17.09c11.4-3.54%2C23.3-6.15%2C35.4-7.75l-2.4-17.82h0Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M150.7%2C17.16c-12.4%2C5.05-24.2%2C11.12-35.4%2C18.12l9.5%2C15.21c10.3-6.44%2C21.2-12.03%2C32.6-16.67l-6.7-16.66Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M98.9%2C46.5c-10.498%2C7.869-20.316%2C16.606-29.35%2C26.12l13.05%2C12.28c8.3-8.77%2C17.4-16.81%2C27-24.06l-4.8-6.57s-5.9-7.77-5.9-7.77Z%22%2F%3E%0A%20%20%3Cpolygon%20points%3D%22168.4%2055.08%20164%2072.52%20381%20128%20385.4%20110.6%20168.4%2055.08%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M56.57%2C87.5c-8.19%2C10.2-15.54%2C21.2-21.94%2C32.7l15.65%2C8.8c5.91-10.7%2C12.69-20.8%2C20.26-30.3l-13.97-11.2Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M184.2%2C96.3c-3.9%2C26%2C2.8%2C55.2%2C14.2%2C79.2%2C6.4%2C13.4%2C14.2%2C25.2%2C21.9%2C33.8%2C4.2%2C4.7%2C8.4%2C8.3%2C12.2%2C10.9l-5.4%2C21.2c-4.6.4-10%2C1.6-16%2C3.7-10.9%2C3.8-23.4%2C10.4-35.4%2C19.1-21.6%2C15.6-41.4%2C37.9-50.4%2C62.6l167.5%2C42.9c3.9-26-2.8-55.2-14.2-79.2-6.4-13.4-14.2-25.2-21.9-33.8-4.2-4.7-8.4-8.3-12.2-10.9l5.4-21.2c4.5-.5%2C10-1.6%2C16-3.7%2C10.9-3.8%2C23.4-10.4%2C35.4-19.1%2C21.6-15.6%2C41.4-37.9%2C50.4-62.6l-167.5-42.9h0Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M25.74%2C137.9c-5.33%2C12-9.7%2C24.4-13%2C37.3l17.48%2C4.2c3.03-11.8%2C7.04-23.2%2C11.95-34.2l-16.43-7.3Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M8.7%2C194.5c-2.09%2C12.5-3.2%2C25.4-3.2%2C38.5v.9l18-.2v-.7c0-12.1%2C1.02-24%2C2.95-35.6l-17.75-2.9Z%22%2F%3E%0A%20%20%3Cpolygon%20points%3D%2296%20338%2091.6%20355.4%20308.6%20410.9%20313%20393.5%2096%20338%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-skewer: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20471.579%20433.759%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M145.157.009c-1.535.012-3.06.03-4.595.063-14.17.307-28.304%2C1.539-42.313%2C3.687h-.03C57.749%2C9.967%2C30.043%2C29.072%2C14.812%2C53.759-.418%2C78.446-3.213%2C108.023%2C3.282%2C135.039c6.492%2C27.02%2C22.268%2C51.823%2C45.405%2C67.126%2C23.137%2C15.304%2C53.82%2C20.5%2C87.156%2C8.564%2C88.876-31.822%2C154.224-18.526%2C202%2C22.125%2C47.297%2C40.24%2C77.402%2C109.05%2C90.25%2C190.53%2C9.29%2C10.237-.1.206%2C9.657%2C10.375%2C9.74-8.25-.16-.032%2C9.593-8.406%2C49.368-122.298%2C18.986-236.885-52.062-315.69C333.647%2C41.304%2C241.777-.739%2C145.157.01h0ZM274.875%2C69.539l90.687%2C36.345c4.922%2C4.69%2C9.668%2C9.56%2C14.25%2C14.563-4.09-2.25-8.194-3.45-11.938-3.563-10.212-.307-17.585%2C7.21-13.593%2C21.875%2C8.252%2C30.456%2C55.747%2C34.927%2C45.187%2C5.5%2C9.34%2C12.627%2C17.642%2C26.007%2C24.75%2C40.03-6.273-8.833-12.323-12.982-17.342-13.093-13.9-.306-19.88%2C30.236-.875%2C77.188%2C20.765%2C51.37%2C43.424%2C59.815%2C45.906%2C31.438%2C3.183%2C34.31-.184%2C70.722-11.408%2C108.437-15.63-70.58-45.05-130.96-90.53-169.656-14.414-12.265-30.428-22.22-48-29.532l-40.907-22.313%2C77.53%2C2.938-111.25-56%2C102.22%2C5.03-54.687-49.187Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stomp: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20479.431%20431.976%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M200.128%2C0c-6.348.01-13.056.447-20.006%2C1.32-34.6%2C4.347-75.144%2C19.348-107.408%2C47.303l33.47%2C190.197.33%2C10.1c42.262%2C15.79%2C100.808%2C24.565%2C152.873%2C24.272%2C27.192-.154%2C52.657-2.762%2C72.982-7.8%2C20.325-5.04%2C35.188-12.803%2C41.803-20.917l.433.353c-14.317-48.847-60.635-88.597-135.474-56.27-12.09%2C5.612-24.333%2C12.902-36.332%2C21.685%2C11.24-16.29%2C23.786-29.055%2C36.76-38.453l.013-.12-27.066-14.183-35.343%2C25-10.793-15.256%2C27.546-19.484-27.5-14.41%2C8.67-16.554%2C35.964%2C18.842%2C34.57-24.457%2C1.62-16.186-30.2-17.918-35.16%2C22.433-10.05-15.757%2C27.208-17.36-27.97-16.595%2C9.538-16.072%2C36.08%2C21.408%2C37.088-23.664C255.227%2C10.847%2C232.294-.053%2C200.128%2C0h0ZM251.21%2C55.262l-16.522%2C10.54%2C14.602%2C8.665%2C1.92-19.205ZM243.157%2C135.802l-13.517%2C9.563%2C11.936%2C6.254%2C1.58-15.816h.001ZM378.727%2C265.712c-10.84%2C8.135-25.243%2C13.7-41.86%2C17.82-22.375%2C5.546-49.07%2C8.188-77.373%2C8.347-21.232.12-43.344-1.15-65.117-3.76l12.463%2C22.137c80.16%2C9.438%2C141.51-1.205%2C172.035-21.796.718-7.44.658-15.098-.15-22.75l.002.002ZM107.174%2C269.024l.996%2C30.464%2C58.595%2C8.456%2C9.58-22.312c-24.54-3.827-48.202-9.383-69.17-16.607h-.001ZM74.044%2C290.584c-2.51.75-4.906%2C1.515-7.175%2C2.3H19.352l24.928%2C11.085L0%2C329.599l45.677-4.822c2.33%2C1.773%2C5.212%2C3.498%2C8.62%2C5.166l-29.19%2C44.532%2C64.785-32.977c4.21.968%2C8.64%2C1.892%2C13.27%2C2.773l-10.733%2C66.783%2C61.413-59.744c5.551.539%2C11.108%2C1.017%2C16.67%2C1.435l11.673%2C77.528%2C50.93-75.073c2.03.013%2C4.05.034%2C6.096.034%2C2.436%2C0%2C4.85-.022%2C7.265-.04l56.216%2C76.782%2C6.903-79.364c5.663-.437%2C11.218-.92%2C16.625-1.457l60.782%2C59.9-10.762-66.976c4.528-.872%2C8.86-1.787%2C12.98-2.743l65.102%2C33.14-29.437-44.913c3.135-1.58%2C5.808-3.21%2C7.984-4.88l46.562%2C4.915-44.253-25.613%2C24.966-11.1h-48.592c-2.223-.77-4.564-1.52-7.016-2.253%2C5.408%2C3.254%2C8.34%2C6.724%2C8.34%2C10.326%2C0%2C18.587-77.737%2C33.652-173.627%2C33.652s-173.627-15.065-173.627-33.652c0-3.62%2C2.96-7.105%2C8.418-10.373h.004Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-endGame: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20450.584%20480.223%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M224.141.008c-23.24.42-47.45%2C10.39-67.124%2C31.218%2C54.09-11.145%2C69.053%2C9.38%2C78.844%2C43.22%2C16.83%2C58.176-66.19%2C70.523-60.156-10.53-25.37%2C15.966-34.08%2C52.878%2C0%2C85.28%2C22.675%2C21.555%2C13.393%2C52.563-13.406%2C52.563-44.735.186-107.775-75.315-59.594-139.594-35.413%2C13.593-59.442%2C25.662-67.72%2C59.593-7.1-29.47%2C6.47-55.563%2C31.532-68.344-101.978%2C7.38-74.16%2C112.918-.594%2C134.31%2C65.69%2C19.1%2C4.9%2C108.815-49.062%2C29.782-5.833%2C112.267%2C64.145%2C131.99%2C136.094%2C181.063%2C31.776%2C21.673%2C46.344%2C34.713%2C46.344%2C55.25%2C0%2C35.486%2C52.656%2C35.953%2C52.656-3.156%2C0-21.18%2C18.167-34.655%2C53.406-56.783%2C57.705-36.23%2C102.22-91.155%2C102.22-130.218%2C0-69.113-42.904-90.754-107.158-118.658%2C53.15%2C59.41-40.205%2C83.995-57.718%2C42.282-15.19-36.18%2C6.475-59.857%2C33.656-61.406%2C69.004-3.936%2C92.73-81.274%2C43.03-116.844%2C11%2C20.999%2C5.597%2C43.889-12.84%2C60.129C298.083%2C25.223%2C263.711.319%2C226.394.008c-.75-.01-1.5-.011-2.25%2C0h-.003ZM417.736%2C48.32c-69.183%2C65.477%2C18.182%2C64.61-2%2C159.625%2C84.92-109.75-14.143-112.042%2C2-159.625ZM277.206%2C225.383c1.255-.01%2C2.5.026%2C3.75.093%2C3.396.185%2C6.76.636%2C10.06%2C1.376%2C26.422%2C5.92%2C48.41%2C29.86%2C49.5%2C64.656%2C1.15%2C36.58-25.886%2C65.358-52.06%2C89.157-13.09%2C11.898-26.29%2C22.706-36.47%2C32.374s-16.868%2C18.497-18.25%2C23.656l-9.03%2C33.688-9-33.688c-1.71-6.376-8.278-15.138-18.158-24.688s-22.696-19.988-35.5-31.5c-25.607-23.023-52.243-51-53.437-88.406-1.135-35.56%2C21.576-59.654%2C48.594-65.187%2C23.2-4.753%2C49.572%2C3.38%2C67.47%2C24.624%2C14.32-17.327%2C33.69-26.03%2C52.53-26.156h.001ZM257.142%2C291.07c-11.997.282-24.43%2C6.9-32.5%2C20.875-19.384-33.576-68.84-24.852-67.56%2C15.28%2C1.333%2C41.796%2C61.125%2C66.135%2C67.56%2C90.158%2C5.894-21.984%2C68.665-50.103%2C67.408-90.157-.736-23.43-17.37-36.567-34.907-36.155h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-riposte: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20463.712%20463.128%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M231.856%2C0l-6.252%2C41.475c-40.904%2C1.6-81.38%2C16.64-114.233%2C45.137L29.701%2C25.982l60.593%2C82.1c-28.1%2C33.614-42.45%2C74.828-43.054%2C116.206L0%2C231.272l47.573%2C7.17c2.384%2C38.934%2C16.966%2C77.26%2C43.765%2C108.758l-61.635%2C83.51%2C83.33-61.864c32.178%2C27.257%2C71.444%2C41.798%2C111.19%2C43.647l7.63%2C50.635%2C7.473-50.55c.853-.03%2C1.707-.052%2C2.56-.093-.843-.038-1.683-.09-2.524-.14l16.193-109.53c6.912-2.247%2C13.462-5.484%2C19.445-9.61l44.186%2C24.788-24.934-43.953c4.012-5.768%2C7.197-12.069%2C9.463-18.72l159.997-24.05-45.147-6.654c-.54-42.053-15.258-83.957-44.194-117.907l59.556-80.22h-.002l-80.392%2C59.333c-33.289-28.502-74.271-43.302-115.556-44.422L231.857%2C0h-.001ZM249.461%2C74.522c43.267%2C0%2C86.536%2C16.507%2C119.548%2C49.52%2C28.136%2C28.136%2C44.273%2C63.723%2C48.428%2C100.41l-113.322-16.705c-2.23-6.922-5.452-13.485-9.565-19.483l24.636-43.424-43.223%2C24.522c-6.295-4.49-13.244-7.984-20.603-10.358l-12.47-84.343c2.19-.084%2C4.38-.138%2C6.57-.138h0ZM220.241%2C77.062l-12.412%2C82.34c-6.777%2C2.308-13.19%2C5.571-19.046%2C9.69l-42.748-24.254%2C24.107%2C42.975c-4.229%2C6.068-7.541%2C12.726-9.83%2C19.76l-78.146%2C11.553c5.06-34.793%2C20.974-68.312%2C47.746-95.084%2C25.55-25.55%2C57.246-41.206%2C90.33-46.98h0ZM80.394%2C243.388l80.318%2C12.105c2.338%2C6.798%2C5.637%2C13.227%2C9.796%2C19.09l-24.826%2C43.76%2C43.963-24.942c5.566%2C3.795%2C11.616%2C6.826%2C17.988%2C9.012l16.325%2C108.306c-34.42-5.222-67.54-21.073-94.045-47.58-33.063-33.062-49.568-76.415-49.517-119.75h-.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-deflect: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20472.844%20459.2%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M.38%2C0l-.38%2C27.84%2C267.127%2C154.75-58.703%2C19.916%2C57.602%2C19.36-142.886%2C142.223-19.214-19.213-51.47%2C114.324%2C123.125-43.482-17.492-18.95%2C151.868-151.87%2C12.433%2C43.078%2C22.976-68.5%2C56.675-16.565-57.475-15.492-22.934-79.828-14.145%2C48.266L38.837.447.383%2C0h-.003ZM351.634%2C62.483c-4.53.02-9.035.12-13.51.302-3.275.134-6.528.32-9.76.547l31.25%2C108.786%2C104.05%2C28.045c6.204-39.085%2C8.902-80.275%2C9.18-120.075-35.454-10.725-76.726-17.288-116.674-17.595-1.512-.012-3.025-.015-4.537-.01h.001ZM314.764%2C64.583c-31.99%2C3.653-61.013%2C12.153-83.014%2C25.87l64.493%2C37.31%2C18.52-63.18h.001ZM462.944%2C204.58l-102.966%2C30.093-38.93%2C116.054-20.268-70.225-39.07%2C39.067c18.814%2C35.364%2C46.1%2C62.287%2C86.175%2C77.604%2C47.473-17.834%2C78.566-62.795%2C98.014-121.6%2C7.323-22.14%2C12.905-46.11%2C17.042-70.993h.003Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-emberStrike: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M407.47%2020.85c10.26%2016.748%2017.462%2036.09%2019.856%2056.65-32.396-44.636-58-40.276-96.36-25.697%2065.992%209.776%20101.33%2067.377%2096.36%20140.75%2048.848-61.72%2034.92-160.814-19.857-171.703zm-276.167%202.896c-.987-.002-1.985.006-2.994.024h-.003c-34.522.598-107.756%2026.213-104.54%20101.037%2021.08-55.636%2065.886-58.685%20104.54-32.123%2046.407%2031.894%2022.075%2098.348-16.936%20100.45%2011.637-17.33%2017.04-40.65%202.974-55.29-24.895-25.91-54.777%204.487-55.533%2029.594-1.403%2046.62%2045.44%2068.116%2075.336%2060.738%2030.192-7.45%2050.092%2012.416%2036.795%2051.976-15.056%2044.795-121.114%2075.948-133.155-8.173%201.7%2088.73%2043.248%20129.87%20104.54%2098.114%2041.467-21.487%2078.87%2018.96%2074.17%2054.896-32.792-37.747-82.098%2017.986-38.544%2040.883%2078.98%2041.522%20199.4%2040.194%20265.73-23.945%2064.735-62.6%2060.833-175.215%2012.263-259.89-5.614%2026.608-28.43%2052.367-74.17%2067.163%2059.262-77.482%202.572-206.85-129.652-174.036%2084.2%204.683%2073.567%20108.248%205.257%20105.123-62.264-2.848-.79-156.296-126.074-156.54zM277.508%20230.22c-56.683%2051.454%2015.914%20153.65%2088.95%20141.837-33.543-9.43-64.745-51.995-54.833-100.05%2031.558%2066.125%20129.923%2066.127%20137.49-16.85%2029.98%2068.665%2013.327%20147.842-36.478%20182.18-58.45%2040.295-156.124%2024.466-181.955-58.83%2019.527%2019.775%2058.78%2032.23%2082.654%2028.722-92.908-26.93-106.546-145.142-35.828-177.01zM24.68%20355.77c-16.486%20116.72%2099.137%20117.28%20130.425%2029.306-48.323%2024.538-100.24%2029.99-130.425-29.305z%22%2F%3E%3C%2Fsvg%3E');
+  --icon-sunder: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20414.937%20467.905%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C0v9.344c0%2C102.68%2C10.49%2C205.087%2C41.125%2C288.155%2C30.637%2C83.068%2C82.364%2C147.415%2C163.75%2C169.78l2.22.626%2C2.22-.5c89.269-19.03%2C141.643-83.64%2C170.372-167.56%2C28.728-83.92%2C35.25-187.777%2C35.25-290.5V0H0ZM18.814%2C18.688h377.34c-.413%2C98.8-7.497%2C197.342-34.125%2C275.125-27.21%2C79.487-73.39%2C136.637-154.375%2C154.78-73.28-21.03-119.914-78.696-149-157.562C30.179%2C213.819%2C19.448%2C116.901%2C18.811%2C18.687h.003ZM37.624%2C37.438c.807%2C84.13%2C12.486%2C172.823%2C39.314%2C244.812%2C7.825%2C20.998%2C16.874%2C40.495%2C27.25%2C58.063l45.844-38.438-40.75-75.063-5.47-10.062%2C10.97-3.344s38.865-11.786%2C60.406-18.25l20.437-7.25L100.782%2C37.438s-63.158%2C0-63.158%2C0ZM197.874%2C37.438l45.782%2C91.5%2C132.407-43.157c.69-16.205%2C1.053-32.366%2C1.155-48.344h-179.344ZM375.031%2C105.781l-122.906%2C40.064%2C24.908%2C49.78%2C25.875%2C48.72%2C53.28-1.845c10.245-42.834%2C16.03-89.664%2C18.844-136.72h0ZM265.002%2C212.845l-30.75%2C10.374%2C67.25%2C145.187c17.813-23.2%2C31.737-51.6%2C42.624-83.686%2C2.578-7.595%2C4.966-15.39%2C7.19-23.344l-53.626%2C1.844-5.844.22-2.75-5.158-24.094-45.437h0ZM165.782%2C217.531c-13.133%2C3.972-27.346%2C8.262-34.625%2C10.47l38.937%2C71.654%2C3.625%2C6.72-5.844%2C4.906-53.56%2C44.906c24.67%2C35.91%2C55.887%2C61.828%2C94.655%2C73.125%2C30.34-6.91%2C55.36-21.496%2C76.03-42.062l-119.216-169.72h-.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-aimedShot: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20471.624%20471.626%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M245.157.002v57.75c91.033%2C4.56%2C164.143%2C77.686%2C168.717%2C168.718h57.75C466.989%2C103.35%2C368.279%2C4.62%2C245.156%2C0v.002ZM226.467.032C103.607%2C4.964%2C4.654%2C103.558%2C0%2C226.471h58.377c4.56-90.824%2C77.346-163.827%2C168.09-168.687V.032ZM236.157%2C107.252c-32.23%2C0-61.768%2C11.79-84.408%2C31.312l22.47%2C22.47c12.541-10.451%2C27.53-17.548%2C43.562-20.626l18.78%2C70.53%2C18.75-70.374c15.581%2C3.119%2C30.149%2C10.044%2C42.407%2C20.156l22.345-22.344c-22.465-19.41-51.782-31.125-83.906-31.125h0ZM333.281%2C151.595l-22.344%2C22.345c10.19%2C12.371%2C17.139%2C27.085%2C20.22%2C42.813l-70.095%2C18.687%2C70.125%2C18.656c-3.095%2C15.954-10.12%2C30.885-20.438%2C43.44l22.344%2C22.342c19.513-22.637%2C31.312-52.154%2C31.313-84.375%2C0-32.124-11.716-61.44-31.126-83.906v-.002ZM138.531%2C151.752c-19.478%2C22.446-31.28%2C51.697-31.28%2C83.75s11.885%2C61.6%2C31.467%2C84.22l22.532-22.532c-10.116-12.426-17.016-27.151-20.093-42.875l70.936-18.875-70.906-18.906c3.073-15.502%2C9.909-30.01%2C19.906-42.25l-22.562-22.532h0ZM.031%2C245.159c4.95%2C122.665%2C103.774%2C221.487%2C226.436%2C226.435v-58.34c-90.544-4.852-163.21-77.547-168.06-168.094H.03h0ZM413.843%2C245.159c-4.862%2C90.755-77.85%2C163.575-168.686%2C168.125v58.342c122.924-4.638%2C221.507-103.596%2C226.436-226.468h-57.75ZM236.563%2C259.909l-18.97%2C71.28c-16.208-3.188-30.995-10.455-43.22-20.687l-22.436%2C22.437c22.618%2C19.582%2C52.072%2C31.47%2C84.22%2C31.47s61.304-11.803%2C83.75-31.283l-22.345-22.343c-11.955%2C9.914-26.296%2C16.98-42.03%2C20.217l-18.97-71.093v.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-frostStrike: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476.75%20478.532%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M1.376.001v44.03l74.157%2C33.28-4.657%2C29.22%2C44.968%2C46.72-26.28%2C64.81%2C168.78%2C55.5v.564l-41.467%2C12.28%2C32.687%2C74.75-40.28-37.374-32.72-4.094-54.875-37.97%2C39.125%2C61.908%2C43.78-.563%2C52.564%2C47.876%2C33.312-7%2C186.28%2C94.594-42.623-87-29.188-127.906-38.563-37.375-9.343-48.47-34.44-32.72%2C12.25%2C74.19%2C56.064%2C63.06-11.094%2C39.126-14.156-41.156-35.5-15.25-26.063%2C18.625%2C54.095%2C32.53-84.094-21.592%2C18.126-38.563-62.812-47.656-23.406-144.47-48.125-15.186%2C9.937%2C65.406%2C28.03%2C3.937-44.968%2C35.5-21.03-110.124-48.47-11.094L73.909%2C0H1.376ZM97.032.001l5.624%2C13.155%2C68.97%2C18.97L138.876%2C0h-41.845.001ZM172.532.001l32.53%2C37.093-.813-37.094h-31.717ZM240.187%2C2.625l-15%2C38.5%2C6.72%2C33.562%2C23.25-33.562s-14.97-38.5-14.97-38.5ZM347.875%2C4.655l-36.532%2C7.846%2C14.314%2C36.81%2C22.22-44.655h-.002ZM344%2C61.187l-7.47%2C36.188%2C30.909-6.094-23.438-30.094h-.001ZM1.375%2C67.437v41.406l62.938-14.124L1.375%2C67.439v-.002ZM252.718%2C77.187l.125%2C33.813%2C56.94%2C54.593-23.22-83.22-33.844-5.187h-.001ZM50.688%2C115.625l-37.97%2C12.625%2C74.625%2C26.686-36.655-39.312h0ZM248.188%2C134.969l9.53%2C68.062%2C56.406%2C40.656-5.156-53.437-60.78-55.282h0ZM3.188%2C142.719l65.875%2C71.842%2C12.344-40.686L3.187%2C142.719h.001ZM11.688%2C196.937L0%2C236.657l41.374-14.126-29.687-25.594h0ZM50.063%2C233.061l-17.094%2C28.25%2C32.063%2C13.94%2C69.686-25.19-84.656-17h0ZM182.657%2C265.906l-52.438%2C1.25%2C51.125%2C36.344%2C24.032-2.47-22.718-35.125h0ZM27.001%2C279.501l-19.626%2C28.374%2C37.22%2C1.812-17.594-30.187h0ZM79.469%2C305.031l20.313%2C30.875%2C17.56-26.156-37.874-4.72h.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stormStrike: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20474.18%20474.86%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C0v39.72l130.88%2C73.84%2C94.9-45.12L130.28%2C0H0ZM196.98.1l95.3%2C57.34c-86.5%2C41.22-177.9%2C84.62-255.47%2C121.52l161.57%2C86.1%2C59.6-39.2-39.4-34.9c82.3-40.6%2C168.3-83.5%2C241.8-119.93L366.78.1h-169.8ZM341.18%2C151.16l-76.5%2C37.9%2C44.9%2C25.3c-54.2%2C35.6-111.8%2C73.6-160.6%2C105.7l325.2%2C154.8-187.4-147.2c57.6-32.3%2C117.5-65.9%2C168.8-94.6l-114.4-81.9ZM354.38%2C311.26l-33.9%2C18.9%2C139.3%2C74.3c-35.1-31.1-70.3-62.2-105.4-93.2h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-wildGrowth: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20475.673%20460.531%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M73.056%2C0c-11.966.114-21.575%2C10.038-27.69%2C34.406-1.684-.12-3.372-.162-5.06-.125-.69.015-1.36.048-2.032.093-55.335%2C3.656-56.578%2C101.698%2C35.622%2C245.313C1.958%2C103.977%2C38.286%2C53.122%2C118.178%2C122.687c-38.505%2C17.613-21.605%2C45.215-5.344%2C73.5-1.287-30.686%2C19.758-38.518%2C24.313-55.563%2C23.737%2C24.213%2C50.402%2C57.545%2C78.656%2C99.907%2C7.393%2C11.091%2C15.04%2C22.011%2C22.936%2C32.75-14.56%2C10.542-7.932%2C33.297-35.656%2C45.217%2C31.126.735%2C54.204-3.397%2C53.313-22.187%2C80.447%2C100.804%2C148.373%2C127.744%2C184.875%2C115-1.53%2C14.002%2C8.962%2C28.752-6.313%2C49.22%2C33.763-18.444%2C52.77-37.19%2C20.375-57.25%2C42.036-35.254%2C14.252-124.714-40.78-181.44%2C52.787-50.407-8.977-89.516-72.22-104.874%2C27.52%2C21.707%2C21.675%2C48.652%2C32.22%2C73-13.708-8.013-28.228-13.7-43.126-16.28-4.14-.718-8.307-1.222-12.5-1.44-71.263-5.38-67.123%2C47.11-.875%2C69.97-31.727-11.35-33.71-67.642%2C16.405-52.03l-.03-.19c86.477%2C40.41%2C130.355%2C169.808%2C84.81%2C177.876-23.083%2C4.09-55.358-11.07-94.06-49.375%2C19.28-4.406%2C31.163-23.904%2C53.78-40.75-15.274-.834-29.638-4.237-41.406-3.937-14.15.36-24.508%2C6.105-28.19%2C28.094-19.554-21.58-40.526-48.67-62.624-81.813C176.982%2C115.462%2C115.534%2C59.446%2C71.43%2C41.125c14.436-5.612%2C29.11-15.96%2C54.406-5.874C106.05%2C14.508%2C87.769-.139%2C73.056.001h0ZM85.806%2C299.875c29.458%2C75.44%2C9.59%2C124.826-60.157%2C113.75%2C111.215%2C39.413%2C130.842-22.563%2C60.157-113.75Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stoneShatter: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20475.394%20475.452%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M137.566%2C0l21.832%2C149.004-83.165-78.248%2C40.946%2C125.732-74.765-6.927%2C39.33%2C68.112h71.87l-11.512-38.73%2C28.125%2C15.234%2C1.17-49.223%2C44.537%2C51.568%2C14.064-78.52%2C17.58%2C60.94%2C57.425-39.846-17.58%2C58.597%2C55.082-22.266-30.912%2C42.248h80.834l37.17-63.13-51.26%2C6.845%2C20.565-85.008-70.873%2C48.905%2C48.37-111.842-95.25%2C51.473-12.266-100.908-51.576%2C104.803-32.53-87.51-18.517%2C18.18L137.567%2C0h0ZM194.796%2C259.61l-48.064%2C34.892%2C20.48%2C27.527-127.039%2C16.723%2C8.42%2C66.527-.506%2C2.99L0%2C428.395v47.057h34.42l47.1-46.206-18.678-74.63%2C46.343-6.1%2C3.358%2C54.933%2C1.685.75%2C39.685%2C32.815-18.117%2C38.437h54.185l5.808-59.415-65.352-26.19-2.673-43.777%2C73.43-9.666-28.182-37.886%2C53.593-38.91h-31.81v.003ZM254.92%2C259.61l49.722%2C58.437-74.63%2C35.61-4.355.222%2C52.588%2C62.935-30.766%2C58.638h72.033l-2.315-73.403-53.628-43.697%2C58.706-28.014%2C73.418%2C17.262-45.13%2C72.213%2C41.003%2C55.112.19.527h69.838l-78.51-55.122%2C14.45-35.62%2C77.86%2C30.75v-34.606l-68.937-15.215%2C18.912-30.26-101.807-23.934-44.103-51.836h-24.54.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-cut: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20468.662%20457.16%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M247.78%2C420.097C553.76%2C472.173%2C295.343%2C4.562%2C0%2C1.235%2C424.473-31.951%2C673.767%2C616.3%2C247.781%2C420.095v.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-doublePersona: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20313.32%20473.23%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M264.14%2C68.04C234.76%2C26.44%2C195.39%2C1.26%2C152.31%2C0v473.23c43.08-1.26%2C82.45-26.44%2C111.83-68.05%2C30.15-42.69%2C49.18-102.41%2C49.18-168.57s-19.02-125.88-49.18-168.57ZM172.94%2C274.31c14.89-50.39%2C46.9-67.83%2C90.46-67.75%2C10.05.02%2C20.72.98%2C31.93%2C2.67.86%2C98.74-54.77%2C57.68-122.39%2C65.08Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M31.94%2C206.564c-10.05.02-20.717.973-31.93%2C2.67-.857%2C98.74%2C54.765%2C57.68%2C122.387%2C65.075-14.887-50.39-46.9-67.83-90.457-67.745Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-ripAndTear: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20478.19%20476.161%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M85.167%2C0c23.14%2C15.444%2C46.098%2C31.27%2C68.55%2C47.572C108.662%2C26.678%2C59.207%2C11.655%2C4.347%2C3.327c46.697%2C26.72%2C91.596%2C55.58%2C135.705%2C85.524-37.203-18.033-77.48-32.22-121.602-41.37%2C58.218%2C34.322%2C109.368%2C72.465%2C154.71%2C114.206-57.34%2C47.213-107.065%2C104.703-147.57%2C174.166%2C27.11-24.29%2C54.91-47.545%2C82.868-70.68C61.742%2C321.033%2C24.85%2C386.683%2C0%2C463.808c20.36-24.62%2C40.988-48.203%2C61.905-70.817%2C44.7-67.485%2C89.567-147.11%2C148.856-170.418-29.61%2C30.708-63.36%2C75.164-98.25%2C118.145%2C40.99-40.437%2C83.09-77.46%2C126.415-111.512%2C61.598%2C70.49%2C110.757%2C149.38%2C152.145%2C235.873-6.738-44.794-16.796-87.384-30.03-127.666l46.444%2C65.53s-26.037-72.69-43.66-101.987c40.76%2C55.91%2C78.208%2C114.428%2C112.328%2C175.205-18.674-89.454-50.512-169.772-98.893-238.224%2C35.144%2C34.93%2C68.816%2C71.31%2C100.93%2C109.045-33.342-76.482-74.81-143.489-126.176-198.309%2C40.224-25.887%2C81.48-49.73%2C123.863-71.783-31.096%2C5.387-61.824%2C12.712-92.006%2C21.934%2C21.836-16.173%2C44.41-32.124%2C67.024-47.523-37.987%2C11.91-74.633%2C25.775-109.067%2C41.433%2C42.668-27.673%2C86.32-53.668%2C131.004-78.602h-.003c-67.47%2C18.055-130.83%2C42.19-188.998%2C73.548C227.537%2C45.89%2C161.821%2C15.893%2C85.168%2C0h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-pounce: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476.174%20448.532%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M272.75.002c29.89%2C36.34%2C55.086%2C74.792%2C74.156%2C115.062-49.052-38.586-105.036-68.945-168.78-89.344%2C40.696%2C29.09%2C78.052%2C61.91%2C110.624%2C97.188-37.52-20.55-74.29-31.632-107.438-34.938%2C33.73%2C14.255%2C77.803%2C44.654%2C111.063%2C83.03.615.987%2C1.208%2C1.987%2C1.78%2C3%2C.03.024.066.042.095.064l-.03.03c-.02-.03-.046-.06-.064-.093-19.063-14.253-54.482-30.81-95.312-40.78-50.3-3.666-101.766.18-154.438%2C11.624%2C60.61%2C5.896%2C118.714%2C18.332%2C172.844%2C37.97-79.658%2C6.653-155.155%2C45.72-217.25%2C121.47%2C37.545-21.421%2C83.49-39.941%2C125.375-48.721%2C40.242-11.185%2C72.465-12.254%2C95.563-6.5.04-.004.085.004.125%2C0l-.032.03c-.03-.007-.06-.022-.093-.03-28.123%2C2.88-74.114%2C16.98-115.53%2C40.688-44.49%2C40.303-83.695%2C98.33-97.22%2C158.78h129.657c22.906-37.08%2C51.314-68.357%2C82.78-93.5-6.392%2C18.97-9.292%2C37.678-9.218%2C55.438%2C12.05-31.583%2C44.076-73.017%2C86.72-96.344%2C11.652%2C22.34%2C32.257%2C39.923%2C58.437%2C46.938%2C49.563%2C13.28%2C100.75-16.278%2C114.03-65.844%2C4.41-16.39%2C4.227-33.677-.53-49.97%2C18.47-69.046-6.238-141.86-56.563-200.842%2C9.922%2C38.16%2C12.75%2C77.235%2C5.844%2C114.47C386.524%2C94.154%2C337.377%2C41.557%2C272.75%2C0v.002ZM211.406%2C410.47l-.03.094.03.03v-.124ZM181.312%2C87.97c-.03-.012-.064-.02-.093-.03l-.032.03c.04.004.084-.004.125%2C0ZM366.062%2C198.095c25.482%2C28.396%2C40.14%2C73.42%2C39.438%2C101.44%2C15.463-40.44%2C16.46-62.094%2C4.97-96.595%2C13.306%2C5.783%2C24.22%2C15.16%2C31.936%2C26.625%2C3.704%2C26.134-8.748%2C63.216-22.375%2C79.313%2C14.565-9.242%2C26.246-21.02%2C35-35.375-.187%2C5.702-1.026%2C11.364-2.5%2C16.875-10.666%2C39.81-51.348%2C63.29-91.155%2C52.625-35.814-9.597-58.406-43.468-54.813-79.157%2C35.783%2C4.916%2C67.725%2C25.49%2C83.375%2C44.876-9.22-30.88-31.59-60.696-69.968-80.72%2C10.98-15.49%2C27.472-26.19%2C46.092-29.905v-.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-unstoppable: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476.906%20474.344%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M3.032.001C1.031%2C4.242-.004%2C8.874%2C0%2C13.564%2C0%2C30.85%2C13.93%2C45.108%2C31.093%2C45.657c2.274%2C7.447%2C4.881%2C14.787%2C7.814%2C22-7.123%2C5.912-11.688%2C14.818-11.688%2C24.72%2C0%2C17.628%2C14.465%2C32.124%2C32.094%2C32.124%2C3.66%2C0%2C7.18-.633%2C10.47-1.78%2C5.182%2C6.985%2C10.742%2C13.682%2C16.655%2C20.06-2.03%2C4.2-3.156%2C8.9-3.156%2C13.845%2C0%2C11.376%2C6.042%2C21.443%2C15.06%2C27.156%2C2.909-5.49%2C6.059-10.848%2C9.44-16.06-3.53-2.4-5.814-6.42-5.814-11.095%2C0-7.53%2C5.908-13.438%2C13.438-13.438%2C3.22%2C0%2C6.152%2C1.08%2C8.437%2C2.907%2C4.008-4.724%2C8.221-9.27%2C12.626-13.625-5.65-4.954-13.022-7.97-21.062-7.97-5.922%2C0-11.466%2C1.66-16.25%2C4.5-5.018-5.494-9.74-11.28-14.22-17.313%2C4.218-5.554%2C6.501-12.337%2C6.5-19.312%2C0-17.63-14.495-32.125-32.125-32.125-1.05%2C0-2.1.056-3.125.156-2.628-6.457-4.973-13.026-7.03-19.687%2C9.03-5.712%2C15.093-15.772%2C15.093-27.157%2C0-4.835-1.086-9.434-3.032-13.563H3.032ZM32.125.126c7.53%2C0%2C13.437%2C5.907%2C13.437%2C13.438s-5.908%2C13.437-13.438%2C13.437-13.437-5.907-13.437-13.438S24.594.126%2C32.125.126ZM59.312%2C78.939c7.53%2C0%2C13.438%2C5.907%2C13.438%2C13.437s-5.908%2C13.438-13.438%2C13.438-13.406-5.908-13.406-13.438%2C5.876-13.438%2C13.406-13.438h0ZM284.75%2C90.063c-106.228%2C0-192.125%2C85.93-192.125%2C192.157s85.897%2C192.124%2C192.125%2C192.124%2C192.156-85.898%2C192.156-192.125-85.93-192.158-192.156-192.158v.002ZM381.687%2C144.783c7.52%2C3.186%2C14.892%2C7.89%2C21.625%2C14.624%2C18.858%2C18.858%2C30.55%2C48.69%2C34.53%2C82.53%2C6.007%2C8.252%2C10.547%2C17.502%2C13.25%2C27.595%2C2.466%2C9.2%2C3.035%2C18.644%2C2.345%2C27.908-3.86-7.832-8.59-15.445-14.125-22.72-.77%2C30.396-7.25%2C62.106-19.813%2C90.813%2C3.03-16.998%2C4.635-34.97%2C4.938-54.03.312-19.598-.964-38.772-3.594-57.063-21.342-19.84-49.29-35.61-81.53-44.25-15.274-4.092-30.26-6.445-45.063-6.968%2C44.76-11.995%2C89.006-4.885%2C119.532%2C15.75-7.485-29.017-18.55-54.523-32.095-74.19h0ZM116.999%2C314.969c49.026%2C67.317%2C129.026%2C112.73%2C212.532%2C134.342-8.873%2C2.55-19.25%2C3.037-30.064%2C3.5-75.993%2C3.258-168.286-67.14-182.47-137.843h.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-poisonousSting: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20471.579%20433.759%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M145.157.009c-1.535.012-3.06.03-4.595.063-14.17.307-28.304%2C1.539-42.313%2C3.687h-.03C57.749%2C9.967%2C30.043%2C29.072%2C14.812%2C53.759-.418%2C78.446-3.213%2C108.023%2C3.282%2C135.039c6.492%2C27.02%2C22.268%2C51.823%2C45.405%2C67.126%2C23.137%2C15.304%2C53.82%2C20.5%2C87.156%2C8.564%2C88.876-31.822%2C154.224-18.526%2C202%2C22.125%2C47.297%2C40.24%2C77.402%2C109.05%2C90.25%2C190.53%2C9.29%2C10.237-.1.206%2C9.657%2C10.375%2C9.74-8.25-.16-.032%2C9.593-8.406%2C49.368-122.298%2C18.986-236.885-52.062-315.69C333.647%2C41.304%2C241.777-.739%2C145.157.01h0ZM274.875%2C69.539l90.687%2C36.345c4.922%2C4.69%2C9.668%2C9.56%2C14.25%2C14.563-4.09-2.25-8.194-3.45-11.938-3.563-10.212-.307-17.585%2C7.21-13.593%2C21.875%2C8.252%2C30.456%2C55.747%2C34.927%2C45.187%2C5.5%2C9.34%2C12.627%2C17.642%2C26.007%2C24.75%2C40.03-6.273-8.833-12.323-12.982-17.342-13.093-13.9-.306-19.88%2C30.236-.875%2C77.188%2C20.765%2C51.37%2C43.424%2C59.815%2C45.906%2C31.438%2C3.183%2C34.31-.184%2C70.722-11.408%2C108.437-15.63-70.58-45.05-130.96-90.53-169.656-14.414-12.265-30.428-22.22-48-29.532l-40.907-22.313%2C77.53%2C2.938-111.25-56%2C102.22%2C5.03-54.687-49.187Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-venom: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20477.675%20470.29%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M251.334%2C0c-17.095%2C0-30.953%2C13.86-30.953%2C30.954s13.857%2C30.953%2C30.952%2C30.953%2C30.954-13.857%2C30.954-30.953S268.429.001%2C251.333.001h.001ZM248.564%2C9.33c-1.963.883-3.61%2C2.304-5.22%2C3.915-7.128%2C7.128-7.344%2C18.743-.217%2C25.87%2C7.128%2C7.13%2C18.96%2C7.13%2C26.088%2C0%2C1.707-1.705%2C2.808-3.775%2C3.698-5.87-.526%2C4.734-2.46%2C9.416-6.087%2C13.043-8.487%2C8.487-22.166%2C8.268-30.653-.217h-.002c-8.484-8.483-8.703-22.166-.216-30.65%2C3.48-3.48%2C8.08-5.463%2C12.61-6.09h0ZM159.474%2C11.624c-23.916%2C0-43.302%2C19.384-43.302%2C43.3s19.386%2C43.3%2C43.3%2C43.3c3.23%2C0%2C6.375-.365%2C9.403-1.035%2C1.283%2C15.915%2C14.596%2C28.434%2C30.842%2C28.434%2C17.096%2C0%2C30.953-13.858%2C30.953-30.953%2C0-16.374-12.717-29.77-28.812-30.87.597-2.866.916-5.834.916-8.877%2C0-23.915-19.386-43.3-43.3-43.3h0ZM152.998%2C27.504c-2.674%2C1.203-4.917%2C3.14-7.11%2C5.333-9.717%2C9.716-10.012%2C25.55-.298%2C35.266%2C9.715%2C9.716%2C25.845%2C9.716%2C35.56%2C0%2C2.328-2.327%2C3.827-5.15%2C5.04-8.002-.718%2C6.454-3.354%2C12.837-8.3%2C17.782-11.565%2C11.568-30.216%2C11.27-41.782-.297h-.002c-11.566-11.566-11.863-30.22-.295-41.785%2C4.742-4.743%2C11.014-7.443%2C17.186-8.297h.001ZM307.842%2C64.906c-32.255%2C0-58.402%2C26.147-58.402%2C58.403s26.147%2C58.402%2C58.402%2C58.402%2C58.403-26.147%2C58.403-58.402-26.147-58.403-58.403-58.403ZM196.272%2C76.646c-1.85.83-3.4%2C2.17-4.918%2C3.688-6.72%2C6.72-6.926%2C17.668-.207%2C24.387%2C6.718%2C6.718%2C17.873%2C6.718%2C24.594%2C0%2C1.608-1.61%2C2.642-3.56%2C3.48-5.533-.494%2C4.46-2.317%2C8.873-5.735%2C12.293-8%2C8-20.896%2C7.794-28.895-.205s-8.206-20.895-.207-28.894c3.28-3.28%2C7.618-5.15%2C11.887-5.738v.002ZM301.162%2C79.363c-3.913%2C1.76-7.193%2C4.592-10.404%2C7.803-14.21%2C14.21-14.644%2C37.37-.433%2C51.582%2C14.21%2C14.21%2C37.803%2C14.21%2C52.013%2C0%2C3.402-3.404%2C5.596-7.53%2C7.37-11.704-1.05%2C9.438-4.905%2C18.773-12.137%2C26.006-16.92%2C16.92-44.2%2C16.485-61.118-.434-16.92-16.92-17.353-44.198-.434-61.117%2C6.937-6.936%2C16.11-10.887%2C25.14-12.136h.003ZM205.038%2C147.433c-23.87%2C0-43.22%2C19.348-43.22%2C43.217s19.35%2C43.22%2C43.22%2C43.22%2C43.216-19.35%2C43.216-43.22-19.347-43.215-43.216-43.215v-.002ZM201.518%2C159.236c-2.824%2C1.27-5.192%2C3.316-7.512%2C5.633-10.262%2C10.262-10.572%2C26.98-.31%2C37.242s27.294%2C10.262%2C37.554%2C0c2.456-2.457%2C4.04-5.436%2C5.32-8.45-.756%2C6.815-3.54%2C13.555-8.763%2C18.778-12.215%2C12.215-31.912%2C11.903-44.127-.312h-.002c-12.215-12.215-12.53-31.914-.312-44.13%2C5.008-5.007%2C11.632-7.86%2C18.152-8.76h0ZM283.84%2C227.342c-14.153%2C0-26.078%2C9.5-29.767%2C22.47-5.051-.104-10.102-.16-15.154-.166-64.15%2C0-122.217%2C7.86-165.02%2C20.92-21.403%2C6.53-39.006%2C14.3-51.93%2C23.623-14.435%2C12.847-25.627%2C24.45-20.85%2C42.916%2C5.49%2C36.45%2C32.217%2C68.37%2C70.718%2C91.483%2C43.34%2C26.017%2C102.216%2C41.702%2C167.08%2C41.702s123.74-15.685%2C167.08-41.703c38.48-23.103%2C65.2-55%2C70.71-91.427.707-4.507%2C1.486-9.716.51-14-2.14-11.28-10.294-21-21.344-28.973-12.925-9.324-30.528-17.092-51.93-23.623-25.175-7.682-55.657-13.545-89.524-17.087-2.313-14.808-15.12-26.137-30.578-26.137v.002ZM282.58%2C238.939c-1.85.832-3.4%2C2.17-4.92%2C3.688-6.718%2C6.72-6.923%2C17.668-.204%2C24.387s17.87%2C6.718%2C24.59%2C0c1.61-1.61%2C2.647-3.56%2C3.486-5.534-.496%2C4.464-2.32%2C8.876-5.74%2C12.296-7.997%2C8-20.894%2C7.794-28.893-.205-8-7.997-8.204-20.894-.205-28.893%2C3.28-3.28%2C7.618-5.148%2C11.887-5.737v-.002ZM238.918%2C268.344c5.286%2C0%2C10.512.074%2C15.707.183%2C4.226%2C12.065%2C15.707%2C20.72%2C29.215%2C20.72%2C12.17%2C0%2C22.69-7.023%2C27.748-17.235%2C33.278%2C3.444%2C62.996%2C9.144%2C86.897%2C16.437%2C20.132%2C6.144%2C36.143%2C13.47%2C46.447%2C20.903%2C9.27%2C6.687%2C13.307%2C12.79%2C14.027%2C17.976-.105%2C1.925-.285%2C3.844-.54%2C5.755-1.483%2C4.648-5.58%2C9.927-13.487%2C15.63-2.407%2C1.737-5.137%2C3.468-8.146%2C5.18-60.55-67.602-319.786-71.505-397.23-.867-2.423-1.428-4.647-2.867-6.65-4.312-7.927-5.72-12.026-11.013-13.5-15.67-.248-1.889-.425-3.786-.53-5.688.708-5.192%2C4.744-11.306%2C14.03-18.005%2C10.305-7.434%2C26.315-14.76%2C46.448-20.903%2C40.265-12.287%2C96.956-20.105%2C159.564-20.105h0ZM35.728%2C372.327c10.775%2C5.7%2C23.588%2C10.725%2C38.17%2C15.174%2C42.803%2C13.063%2C100.87%2C20.92%2C165.02%2C20.92s122.22-7.857%2C165.024-20.92c14.576-4.447%2C27.384-9.47%2C38.158-15.167-10.695%2C14.855-26.175%2C28.496-45.725%2C40.232-39.745%2C23.86-95.63%2C39.04-157.46%2C39.04s-117.714-15.18-157.46-39.04c-19.552-11.737-35.033-25.38-45.728-40.238h.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-gore: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20480.155%20476.096%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M161.75%2C0l66.718%2C179.03L3.78%2C3.125l178.344%2C216.406L0%2C141.345l175.186%2C146.56-148.906-11.185%2C183.594%2C85.72-88.875%2C38.936%2C154.155%2C18.094-21.063%2C56.22%2C96.22-34.814%2C32.968%2C35.22%2C28.22-56.22%2C56.06-17.438-28.279-39.313%2C40.875-85-55.344%2C10.563-7.686-146.063-44.406%2C77.5-74.313-181.188%2C1.125%2C140.313L161.751%2C0h0ZM257.624%2C237.03c16.315-.184%2C40.993%2C12.932%2C63%2C34.94%2C29.342%2C29.34%2C42.85%2C63.397%2C30.156%2C76.092-12.695%2C12.696-46.783-.782-76.125-30.125-29.342-29.342-42.85-63.43-30.156-76.125%2C3.173-3.173%2C7.685-4.72%2C13.124-4.78v-.002ZM354.344%2C274.375c37.93%2C3.08%2C67.592%2C34.657%2C67.592%2C73.406%2C0%2C40.8-32.887%2C73.656-73.687%2C73.656-40.057%2C0-72.43-31.67-73.595-71.437%2C8.263%2C23.457%2C30.67%2C40.375%2C56.875%2C40.375%2C33.176%2C0%2C60.25-27.106%2C60.25-60.28%2C0-25.107-15.517-46.69-37.438-55.72h.003Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-haymaker: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20461%20461%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M126.8%2C71.1l-11.2%2C2.3L94%2C3.9l6.6%2C72.7-10.8%2C2.3L67%2C10l8.4%2C93.1%2C27.2-5.7%2C1%2C4.9c-2.6%2C5.6-5.3%2C14-5.1%2C24.5%2C2.8%2C2.8%2C7.1%2C6.8%2C12.1%2C11.3l63.1%2C322.5%2C17.1-16.4-3.6%2C16.4h37.5s47.9-169.2%2C47.9-169.2l38.3%2C169.3h38.4s-34.2-215.7-34.2-215.7l1.6-16.8%2C77.3-55.9-68.7-75.7-35.2%2C6.1c5.6-8.5%2C9.3-22.3%2C10-36.4%2C7.8.1%2C32.9%2C2.7%2C40.7%2C3-1.6-14.5-20.9-23-39.7-27.1%2C2.8-29.8-4.9-35.3-30.2-36.4-25.3-1.2-32.4%2C7.2-34.2%2C27.9-18.5-.6-43.7%2C6-48.7%2C16.3%2C11.2%2C4.4%2C36.1%2C7.8%2C46.1%2C10.1%2C1.7%2C16.8%2C8.2%2C35.3%2C16.4%2C49.6l-23.4%2C4.1-51.5%2C43.1-52.2-47.8-3.1-15.4%2C28.3-5.9L120.6.3s6.2%2C70.8%2C6.2%2C70.8ZM94%2C3.9h0%2C0s0%2C0%2C0%2C0ZM348.3%2C170l-31.5%2C23.7.3-64.1%2C31.2%2C40.3ZM229.2%2C150.9l4.5%2C95.4-42.8%2C197.5-57.4-285.6c21.9%2C19.1%2C44.9%2C38.5%2C44.9%2C38.5l50.9-45.9h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-charge: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20452%20452%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.4.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%20226)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M320%2C10.2c-44.6.3-96%2C14.5-134%2C36.7-36%2C34.3-32.5%2C92.9-74.7%2C138.8%2C4.4-.3%2C8.8-.6%2C13-1.1h-.3c17.8-2.6%2C32%2C10.4%2C34.7%2C25.1%2C1.4%2C7.3%2C0%2C15.5-5.1%2C22.1-4.5%2C5.9-11.6%2C10.1-20.5%2C11.9%2C14.6%2C31.9%2C32%2C62.2%2C57.1%2C89.1%2C10.7.7%2C23.6-.3%2C31-10.8l-8.5-51.1%2C1.6-2.8c14.1-25%2C15.3-32.2%2C15.7-49.6l.3-10.3c9.3%2C1.5%2C16.5%2C2.7%2C25.9%2C4.1-10.7-13.5-16.2-26.7-17.9-39.4-2.1-18.3%2C6.4-42%2C15.6-62.9l16.3%2C7.6c-7.9%2C17.2-14.8%2C31.9-14.1%2C53%2C2%2C15.2%2C11.2%2C32.5%2C37.4%2C53.4%2C6.7%2C4.3%2C13.2%2C11.7%2C18.1%2C19.3l-4.1%2C5.2c-18.5%2C23.5-33.8%2C45.4-40.3%2C70%2C11.6%2C30.5%2C38.9%2C76.1%2C71.1%2C98%2C12.6%2C2.8%2C38.1-9.6%2C49.1-16.3-7.2-14.4-16.5-27.7-27.7-40l-24.1%2C11.5-1.6-12.3c-1.3-10.1-8.5-17.7-18.4-26.6l-8.6-7.8%2C9.7-6.4c23.4-15.4%2C41.9-24.1%2C51.4-41.2l2.4-3.8%2C7.2-4.4c20.5-12.7%2C40.9-42.4%2C34.2-77l17.7-3.2c5.1%2C28.3-.2%2C52.2-21.3%2C79.2%2C6.8-1.3%2C12.9-2.9%2C18.2-4.8%2C11.8-4.2%2C19.6-9.5%2C24.9-17.1V64.2c-32.2-19-86.5-46.6-131.6-54.1h0ZM20.3%2C143.2c20%2C15.8%2C42.5%2C30.5%2C71.6%2C41.3%2C2.9-6.1%2C5.8-12.2%2C8.8-18.3-27.4-6.1-54.4-14.8-80.3-23h0ZM.4%2C198.2c34.6%2C16.5%2C74.8%2C30.1%2C127.4%2C28.1%2C6.7-.9%2C9.9-3.2%2C11.6-5.5%2C1.7-2.3%2C2.2-5%2C1.7-8-1.1-6.1-6.1-11.7-14.4-10.5h-.2s-.2%2C0-.2%2C0c-40.8%2C4.5-85.1-.4-126-4.3h0ZM165.8%2C274.8c-7.8-9.6-12.2-18.6-12.1-23%2C.1-3.8%2C5.9-9.9%2C9.9-9.9%2C10.4.4%2C4.5%2C24.8%2C2.2%2C32.8ZM177.6%2C306.6c6.2-.4%2C12.2.5%2C18.3%2C3.5%2C3.6%2C4%2C1.6%2C16.1%2C1.6%2C16.1l-19.9-19.6h0ZM222.3%2C345c-2.7%2C1.5-6.3%2C3-9.7%2C4l4.3%2C31.2-10.4-29.9c-3.2.5-6.5.7-9.8.8l5.4%2C31.5s-18.6-13.5-28.4-10.9c-11.2%2C3-22.1%2C27-22.1%2C27%2C0%2C0-8.9-20.4-16.7-17.9-6.2%2C2.1-19%2C44-4.1%2C54.4%2C15.7%2C10.9%2C52-23.9%2C52-23.9%2C0%2C0%2C20.4%2C33.9%2C35.5%2C30.2%2C8.1-2%2C9.5-23.2%2C9.5-23.2%2C0%2C0%2C36.1%2C18.7%2C51.6%2C10.5%2C11.1-5.8%2C14.7-34.4%2C14.7-34.4l-23.2%2C9.1s-5.2-29.9-17.2-33.7c-7.2-2.3-20%2C10.5-20%2C10.5l-11.6-35.5h0ZM376.8%2C352c10.3%2C11.9%2C19.1%2C24.8%2C26.1%2C38.6%2C3.7-2.2%2C7.4-4.3%2C11.1-6.3-7.2-13.5-15.6-26.1-27.2-37.1l-10%2C4.8Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-execute: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20465.223%20475.532%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M290.813.002c-16.917.16-35.992%2C8.394-51.344%2C23.813-25.855%2C25.966-31.416%2C62.47-12.438%2C81.53%2C18.978%2C19.06%2C55.332%2C13.468%2C81.188-12.5%2C25.856-25.967%2C31.416-62.469%2C12.436-81.529C312.945%2C3.571%2C302.387-.106%2C290.813.002ZM0%2C14.94c41.975%2C60.496%2C108.395%2C103.37%2C178.063%2C130.53.768.296%2C1.542.584%2C2.312.876%2C74.676%2C28.292%2C158.988%2C40.7%2C228.22%2C31.875.072-.013.144-.018.217-.03%2C73.4-13.258%2C89.237-60.577-38.562-134.25C533.642%2C191.914%2C128.063%2C169.085%2C0%2C14.941h0ZM194.155%2C171.284c-3.861%2C2.091-7.503%2C4.562-10.874%2C7.375-12.204%2C10.163-20.78%2C24.71-26.75%2C42.187-10.988%2C32.16-12.56%2C73.362-13.375%2C109.563h40.064l.625%2C8.656%2C10.218%2C136.467h86.687l9.03-136.406.595-8.717h38.53c1.694-40.387-.062-81.073-12.25-111.594-3.295-8.256-7.23-15.796-12-22.5-36.92-4.4-74.495-12.92-110.5-25.032h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-boom: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20484.61%20481.972%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M150.528%2C0l86.455%2C98.443c2.138-1.109%2C4.295-2.18%2C6.47-3.215%2C14.37-6.805%2C27.684-11.083%2C39.76-12.103.75-.064%2C1.498-.113%2C2.243-.15L224.343%2C0h-73.815ZM0%2C52.75v27.722l.21-.25%2C128.432%2C107.3c3.31-3.817%2C6.687-7.576%2C10.127-11.276L0%2C52.752v-.002ZM287.897%2C101.585c-.982.017-2.017.07-3.11.163-8.734.738-20.327%2C4.21-33.337%2C10.37-.564.268-1.146.567-1.715.844l30.996%2C35.295c1.406-.72%2C2.808-1.43%2C4.193-2.1%2C13.245-6.395%2C25.504-10.477%2C36.683-11.554.592-.057%2C1.183-.1%2C1.774-.14l-21.385-29.032-.344.344c-2.62-2.62-6.88-4.304-13.754-4.19h0ZM0%2C104.402v148.353l69.13%2C47.274c.036-.995.088-1.993.172-2.996%2C1.02-12.077%2C5.298-25.392%2C12.104-39.762%2C8.213-17.34%2C20.215-36.21%2C35.324-55.348L0%2C104.403h0ZM326.181%2C153.027c-.875.025-1.802.083-2.784.178-7.853.756-18.432%2C4.027-30.346%2C9.78-23.826%2C11.508-53.028%2C32.712-80.87%2C60.554-27.843%2C27.84-49.048%2C57.044-60.555%2C80.87-5.754%2C11.914-9.025%2C22.494-9.782%2C30.346-.755%2C7.853.795%2C12.184%2C3.197%2C14.586%2C2.402%2C2.402%2C6.735%2C3.952%2C14.588%2C3.196%2C7.852-.757%2C18.432-4.028%2C30.345-9.782%2C7.81-3.77%2C16.202-8.6%2C24.928-14.347-17.195%2C39.23-28.067%2C89.333-34.394%2C153.564%2C37.517-129.093%2C80.838-109.43%2C114.544-6.287-18.62-109.564%2C99.38-61.623%2C185.008%2C5.397-66.417-101.782-124.625-177.518%2C4.55-188.135-124.058-5.07-140.995-44.53-21.876-102.653-58.372%2C6.19-105.555%2C15.9-143.54%2C32.65%2C4.806-7.536%2C8.915-14.8%2C12.206-21.613%2C5.754-11.914%2C9.023-22.494%2C9.78-30.346.756-7.852-.794-12.183-3.196-14.585-1.8-1.8-4.688-3.122-9.332-3.352-.823-.039-1.647-.046-2.47-.02h0ZM152.739%2C188.677c-3.353%2C3.61-6.6%2C7.226-9.734%2C10.842l37.066%2C30.97c2.872-3.275%2C5.795-6.504%2C8.768-9.687l-36.1-32.125h0ZM295.009%2C189.794c3.84.122%2C6.953%2C1.23%2C9.142%2C3.42%2C6.837%2C6.836%2C3.118%2C22.676-8.182%2C41.52-29.24%2C17.088-52.02%2C39.92-69.58%2C70.706-20.12%2C12.694-37.26%2C17.173-44.45%2C9.984-11.437-11.437%2C6.648-48.066%2C40.396-81.814%2C26.365-26.366%2C54.49-43.17%2C70.986-43.81.577-.02%2C1.14-.024%2C1.69-.007h-.002ZM131.109%2C213.932c-14.242%2C18.11-25.428%2C35.748-32.81%2C51.338-6.163%2C13.01-9.634%2C24.602-10.373%2C33.336-.738%2C8.734%2C1.033%2C13.87%2C4.026%2C16.86l-.1.1%2C31.152%2C21.304c.034-1.296.112-2.6.238-3.91%2C1.076-11.177%2C5.158-23.437%2C11.555-36.68%2C7.777-16.104%2C19.084-33.65%2C33.275-51.465l-36.965-30.882h.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-slingshot: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20457.321%20475.274%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M121.2%2C0c-2.838.003-5.676.125-8.5.365-22.6%2C1.92-44.724%2C11.21-61.347%2C26.587-16.32%2C15.096-27.204%2C36.473-26.69%2C61.45%2C3.875-.13%2C9.014-.284%2C14.847-.397%2C1.073-.02%2C2.088-.027%2C3.146-.043-.402-19.627%2C7.798-35.656%2C20.92-47.795%2C13.38-12.377%2C32-20.283%2C50.647-21.867%2C18.517-1.573%2C36.767%2C2.965%2C50.646%2C14.524%2C5.123-2.898%2C10.762-4.77%2C16.602-5.51%2C1.061-.132%2C2.125-.231%2C3.192-.297-2.443-2.757-5.079-5.335-7.89-7.715C160.931%2C5.937%2C141.059-.008%2C121.198.002l.002-.002ZM189.277%2C44.282c-2.986.057-5.93.6-8.842%2C1.477-1.103.255-2.188.579-3.25.972.026.04.05.082.075.12-3.47%2C1.38-6.817%2C3.335-9.692%2C6.35-3.5%2C3.673-6.077%2C9.9-4.693%2C15.998l.094.413.045.144c11.863-10.083%2C27.67-14.763%2C42.444-14.64.3.002.596.024.895.03l-.068-.868-.592-1.374c-2.704-6.274-8.677-8.048-13.11-8.49-1.099-.11-2.204-.154-3.308-.133h.002ZM241.32%2C65.52c-6.248.09-12.4.574-18.474%2C1.378l-.582.54%2C4.716%2C17.102c4.68-.57%2C9.39-.928%2C14.133-1.015%2C1.6-.03%2C3.207-.03%2C4.817%2C0%2C36.413.658%2C76.09%2C16.07%2C122.072%2C59.433l15.937-9.623c-49.936-48.12-95.313-67.04-137.684-67.806-1.652-.03-3.297-.035-4.936-.01h.001ZM189.03%2C76.115c-6.7%2C2.283-12.923%2C5.844-17.354%2C10.447l2.01%2C10.578c4.8-7.386%2C9.9-14.41%2C15.345-21.025h0ZM207.627%2C82.068c-4.65%2C5.218-9.075%2C10.81-13.297%2C16.738%2C5.564-1.297%2C11.307-1.985%2C17.088-2.13-.102-.656-.203-1.312-.3-1.958l-3.49-12.65h0ZM153.86%2C89.22c-10.62%2C5.178-21.06%2C10.89-31.368%2C16.828l14.736%2C8.645-.23-.047c.64.353%2C1.372.707%2C1.754%2C1.027.528.443.905.83%2C1.213%2C1.19%2C5.797-3.22%2C11.592-6.312%2C17.392-9.227l-3.497-18.416ZM44.352%2C105.976c-1.61.018-2.815-.007-4.496.025-8.207.16-14.15.39-16.605.478-2.228%2C1.913-6.242%2C5.488-11.158%2C11.178C5.463%2C125.327-.075%2C135.255%2C0%2C140.981c.095%2C7.15%2C3.73%2C19.28%2C9.736%2C30.228%2C6.007%2C10.948%2C14.408%2C20.872%2C21.87%2C25.426.002%2C0%2C2.58.932%2C6.513%2C1.07%2C3.934.138%2C9.176-.22%2C15.04-1.04%2C11.728-1.64%2C25.992-5.075%2C39.117-9.215%2C8.666-2.735%2C16.262-5.755%2C22.9-8.71-17.423-3.064-34.79-11.906-48.413-23.3-9.947-8.318-17.986-18.11-21.704-29.304-2.151-6.515-2.397-13.51-.707-20.16h0ZM214.482%2C114.572c-13.804-.118-26.667%2C3.534-35.956%2C11.37.29%2C1.234.584%2C2.44.873%2C3.696%2C7.614%2C33.128%2C13.767%2C73.212%2C9.864%2C97.246-5.603%2C34.496-31.537%2C84.64-56.23%2C125.106-14.89%2C24.398-29.136%2C45.285-38.177%2C58.144%2C10.07-.018%2C20.817%2C2.73%2C31.086%2C7.26%2C11.084%2C4.89%2C21.573%2C11.887%2C29.23%2C20.914%2C1.474%2C1.737%2C2.831%2C3.57%2C4.06%2C5.488%2C1.36-3.347%2C2.576-6.353%2C4.36-10.703%2C5.542-13.528%2C13.064-31.452%2C21.98-50.63%2C17.835-38.352%2C41.727-81.852%2C64.653-103.98%2C25.013-24.14%2C74.933-49.443%2C118.108-67.835%2C6.201-2.638%2C12.426-5.216%2C18.676-7.735-4.533-14.565-13.66-26.322-24.893-37.757-.622.35-1.232.7-1.86%2C1.052-35.47%2C19.846-79.24%2C38.213-106.96%2C35.963-3.385-.274-8.838-3.985-12.028-8.44-11.913-16.64-21.224-49.812-26.786-79.158h0ZM108.14%2C118.5c-.125.142-.195.26-.324.406-3.408%2C3.85-7.99%2C8.477-12.875%2C13.076-4.585%2C4.317-9.376%2C8.534-13.716%2C11.965%2C14.612%2C11.06%2C34.845%2C18.494%2C49.54%2C17.9.08-3.49-.12-7.653-.57-11.81-.688-6.327-1.887-12.74-3.016-17.247-.32-1.28-.697-2.544-1.13-3.79l-17.908-10.5h0ZM430.496%2C123.7c-2.163.02-4.4.502-6.305%2C1.614l-.428.252-.4.297s-2.87%2C2.124-7.9%2C5.642c14.61%2C14.434%2C22.734%2C32.15%2C28.22%2C50.262l4.314-1.457-.045.012c3.98-1.237%2C7.185-4.906%2C8.28-7.91%2C1.197-3.282%2C1.194-6.115.98-8.954-.425-5.676-2.144-11.535-4.497-17.277-2.354-5.742-5.26-11.186-9.092-15.605-1.915-2.21-4.043-4.27-7.263-5.73-1.61-.73-3.7-1.168-5.86-1.146h-.004ZM393.148%2C148.802l-13.875%2C8.377c5.383%2C5.814%2C10.47%2C12.035%2C14.83%2C18.9%2C1.41-8.554%2C1.554-17.292-.955-27.278h0ZM412.553%2C156.257c1.144%2C12.08-.52%2C22.994-2.93%2C33.05l15.717-5.33c-3.235-10.06-7.23-19.383-12.787-27.72h0ZM94.61%2C428.134c-.444%2C0-.878.012-1.3.03-6.752.316-9.117%2C1.857-10.17%2C4.693l-2.212%2C5.965c.14%2C4.046%2C1.104%2C8.02%2C2.834%2C11.68%2C3.7%2C7.818%2C10.09%2C14.155%2C17.732%2C18.603s16.732%2C7.043%2C26.115%2C5.9c7.178-.874%2C14.383-4.265%2C20.183-10.12.164-4.882-1.947-9.743-6.35-14.935-5.278-6.223-13.748-12.11-22.765-16.087-8.454-3.73-17.418-5.75-24.07-5.73h.003Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-dragonBreath: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20481.231%20480.65%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C0v61.32c76.696%2C54.194%2C157.847%2C147.575%2C64.827%2C125.566%2C57.116%2C55.067%2C104.12%2C26.786%2C174.037%2C135.492%2C30.42%2C47.297%2C7.473%2C80.54-29.785%2C90.524-47.88%2C12.828-114.353-30.45-57.82-54.314-59.296-1.45-66.954%2C47.977-38.727%2C80.237-27.93-9.635-46.01-34.308-43.034-60.605-36.043%2C48.278-5.362%2C93.284%2C54.313%2C102.43h357.42V136.08c-15.752-70.31-94.876-87.764-103.372-3.504%2C14.61-36.423%2C50.96-20.625%2C84.1%2C18.688-11.28-7.498-24.24-11.49-36.21-11.097-19.73.65-37.36%2C12.086-41.466%2C36.794%2C55.902-46.113%2C84.628%2C34.717%2C61.74%2C76.876-24.744%2C45.582-94.89-20.467-95.03-75.71-27.974%2C31.235-7.813%2C108.298%2C52.37%2C122.548-114.055-12.382-75.947-130.752-123.035-155.832C309.056%2C272.476%2C106.401%2C49.263%2C50.81.003H0v-.003Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-hatch: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476.006%20476.007%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M238.525%2C0c-61.262-.17-122.585%2C23.086-169.264%2C69.766C-10.614%2C149.642-21.094%2C271.85%2C36.224%2C363.797c-21.126-58.596-5.07-136.433%2C43.875-204.518-26.864%2C54.274-23.788%2C119.52%2C8.705%2C171.64-16.072-44.577-3.09-104.19%2C35.502-155.568-22.22%2C40.8-20.71%2C91%2C4.105%2C130.804-13.956-38.71%2C1.842-92.823%2C43.24-134.222%2C43.876-43.875%2C102.245-59.39%2C141.206-40.764-39.916-27.966-92.123-30.865-134.612-8.724%2C54.177-39.073%2C116.827-50.336%2C161.063-29.194-52.326-36.654-120.2-41.6-176.747-14.863%2C71.832-49.555%2C153.662-63.29%2C211.87-35.47C333.777%2C14.438%2C286.168.135%2C238.524%2C0h.001ZM374.433%2C42.919l.008.006v-.002s-.006-.003-.008-.004ZM339.308%2C93.251s.004.004.007.006v-.002s-.006-.003-.008-.004h.001ZM433.08%2C101.566c27.828%2C58.21%2C14.094%2C140.048-35.47%2C211.887%2C26.74-56.548%2C21.8-124.425-14.858-176.754%2C21.144%2C44.238%2C9.878%2C106.895-29.2%2C161.075%2C22.145-42.488%2C19.248-94.7-8.714-134.618%2C18.62%2C38.96%2C3.107%2C97.327-40.768%2C141.2-41.4%2C41.4-95.513%2C57.196-134.224%2C43.238%2C39.81%2C24.817%2C90.023%2C26.326%2C130.826%2C4.096-51.383%2C38.602-111.004%2C51.59-155.588%2C35.513%2C52.118%2C32.49%2C117.364%2C35.57%2C171.637%2C8.71-68.085%2C48.943-145.92%2C64.997-204.512%2C43.87%2C91.947%2C57.318%2C214.157%2C46.838%2C294.03-33.037%2C82.987-82.986%2C91.948-212.252%2C26.842-305.18h-.001ZM344.839%2C163.155l-.004-.007h-.002l.006.007ZM382.753%2C136.698l-.004-.007h-.002l.006.007Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-shrug: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20472%20461%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M236%2C0c-11.642%2C0-22.985%2C7.432-32.006%2C21.607-9.02%2C14.176-14.994%2C34.64-14.994%2C57.393s5.973%2C43.217%2C14.994%2C57.393c9.02%2C14.175%2C20.364%2C21.607%2C32.006%2C21.607s22.985-7.432%2C32.006-21.607c9.02-14.176%2C14.994-34.64%2C14.994-57.393s-5.973-43.217-14.994-57.393C258.986%2C7.432%2C247.642%2C0%2C236%2C0ZM156%2C131c-32%2C0-48%2C144-48%2C144%2C0-16-16-64-32-96C60%2C179-.002%2C195%2C0%2C205v22l60-16s32%2C128%2C48%2C128%2C48-112%2C48-112l16%2C234h128l16-234s32%2C112%2C48%2C112%2C48-128%2C48-128l60%2C16v-22c.027-10-60-26-76-26-16%2C32-32%2C80-32%2C96%2C0%2C0-16-144-48-144%2C0%2C0-10.902.02-25.727%2C1.74-2.092%2C4.725-4.453%2C9.187-7.082%2C13.317-11.246%2C17.673-27.904%2C29.943-47.191%2C29.943s-35.944-12.27-47.19-29.943c-2.63-4.13-4.99-8.592-7.083-13.317-14.825-1.72-25.727-1.74-25.727-1.74Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-potion: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20377.55%20460%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M323.65%2C0l-14.5%2C20.4%2C49.5%2C35.1%2C14.5-20.3L323.65%2C0ZM266.25%2C12.3l-14.1%2C20.7%2C111.3%2C76.2%2C14.1-20.7L266.25%2C12.3h0ZM258.95%2C65.7l-69.9%2C82.8c-10.3-2.1-20.9-3.2-31.8-3.2C70.45%2C145.3%2C0%2C215.8%2C0%2C302.6c0%2C86.4%2C70.45%2C157.4%2C157.25%2C157.4s157.3-71%2C157.3-157.4c0-37.8-13.4-72.5-35.6-99.6l51.4-86.9-71.4-50.4ZM266.35%2C104.7l29.5%2C19.5-46.5%2C78c26.1%2C23.9%2C42.5%2C58.2%2C42.5%2C96.4%2C0%2C72-58.5%2C130.4-130.6%2C130.4S30.7%2C370.6%2C30.7%2C298.6s58.55-130.6%2C130.55-130.6c22.6%2C0%2C43.9%2C5.8%2C62.5%2C15.9l42.6-79.2ZM234.85%2C285.2c-47.3-.7-126.2%2C58.3-178.3%2C13.5.1%2C57.7%2C47%2C104.3%2C104.7%2C104.3%2C56.1%2C0%2C102-44%2C104.6-99.5-7-13.2-17.8-18.1-31-18.3ZM223.35%2C308.5c5.1-.1%2C9.7%2C1.5%2C12.7%2C5%2C6.9%2C7.9%2C3.2%2C22.4-8.3%2C32.4-11.4%2C10-26.3%2C11.7-33.2%2C3.8-6.9-7.9-3.2-22.4%2C8.2-32.4%2C6.5-5.6%2C14-8.6%2C20.6-8.8h0ZM166.85%2C357.6c1.2%2C0%2C2.4.1%2C3.7.3%2C9.9%2C1.5%2C17.2%2C8.2%2C16.2%2C15.1-1%2C7-9.8%2C11-19.8%2C10-9.9-2-17.2-8-16.2-15.3.9-6%2C7.7-10.1%2C16.1-10.1Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-armory: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20422.55%20447.641%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M280.685%2C0l-102.848%2C205.699h13.711l13.364-13.363%2C6.363-6.364%2C19.727%2C19.727h70.273L376.222%2C25.826c-8.11-4.986-23.97-11.715-41.314-16.445-19.05-5.196-39.628-8.654-54.223-9.381ZM141.48.021c-14.576.771-34.953%2C4.21-53.838%2C9.36-17.344%2C4.73-33.204%2C11.46-41.314%2C16.445l74.947%2C179.873h36.44l38.722-77.445L141.48.021ZM170.73%2C22.584l36.25%2C84.584%2C41.984-83.971c-26.948%2C5.752-51.079%2C5.561-78.234-.613h0ZM43.691%2C66.298L0%2C131.838l65.88%2C39.529%2C15.24-15.24-37.429-89.829ZM378.859%2C66.298l-37.43%2C89.829%2C15.24%2C15.24%2C65.881-39.53-43.691-65.539ZM211.275%2C211.425l-20.42%2C20.42%2C20.42%2C30.63%2C20.42-30.63-20.42-20.42ZM108.275%2C223.7v30h75.518l-16.098-24.147%2C5.853-5.853h-65.273ZM249.002%2C223.7l5.853%2C5.853-16.098%2C24.147h75.518v-30h-65.273ZM119.877%2C271.7l-26.045%2C165.24c114.22%2C14.268%2C120.666%2C14.268%2C234.886%2C0l-26.045-165.24h-75.916l-15.482%2C23.222-15.482-23.223h-75.916Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-experience: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20463.092%20463.093%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M232.31%2C0C104.628%2C0%2C0%2C104.628%2C0%2C232.313s104.627%2C230.78%2C232.31%2C230.78%2C230.782-103.095%2C230.782-230.78S359.996%2C0%2C232.312%2C0h-.002ZM231.25%2C82l117.374%2C117.97-23.938%2C25.093-65.406-37.938v172.47c79.295-13.13%2C139.78-81.987%2C139.78-165%2C0-39.265-13.54-75.368-36.186-103.907%2C37.702%2C35.365%2C61.22%2C85.81%2C61.22%2C141.625.336%2C105.581-84.983%2C191.444-190.564%2C191.78-.406.001-.813.001-1.219%2C0-106.398%2C0-193.31-85.385-193.31-191.78%2C0-55.123%2C23.342-105.018%2C60.624-140.313-22.028%2C28.33-35.156%2C63.928-35.156%2C102.594%2C0%2C82.46%2C59.645%2C150.973%2C138.156%2C164.75v-168.72l-62.5%2C35.626-25.094-26.28%2C116.219-117.97Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-immobilize: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20472%20437.239%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C0v209.947l9.924%2C30.64c34.506-22.263%2C65.675-34.64%2C101.433-30.433L74.293%2C0H0ZM397.707%2C0l-37.064%2C210.154c35.758-4.206%2C66.927%2C8.17%2C101.433%2C30.434l9.924-30.64V0h-74.293ZM173.145%2C227.31c5.361%2C5.193%2C6.517%2C15.154%2C7.12%2C21.655l21.26%2C11.031c1.888%2C5.184-3.41%2C15.26-8.29%2C15.977l-12.995-6.743c-.973%2C6.645-1.787%2C12.547-4.783%2C17.797l9.486%2C4.924c6.546%2C3.397%2C14.294%2C2.037%2C19.485-1.197%2C3.128-1.949%2C5.71-4.43%2C7.863-7.223%2C7.377%2C1.392%2C15.502%2C1.969%2C23.709%2C1.969s16.332-.577%2C23.709-1.969c2.154%2C2.793%2C4.735%2C5.274%2C7.863%2C7.223%2C5.191%2C3.234%2C12.939%2C4.594%2C19.485%2C1.197l9.486-4.924c-2.996-5.25-3.81-11.152-4.783-17.797l-12.994%2C6.743c-4.88-.717-10.179-10.793-8.291-15.977l21.26-11.031c.603-6.5%2C1.759-16.462%2C7.12-21.654-2.663.092-5.482.912-8.27%2C1.97l-28.401%2C14.739c-6.546%2C3.397-9.895%2C10.514-10.239%2C16.62-.11%2C1.967.01%2C3.89.287%2C5.774-5.01.685-10.643%2C1.086-16.232%2C1.086s-11.222-.4-16.232-1.086c.276-1.883.397-3.807.287-5.773-.344-6.107-3.693-13.225-10.239-16.621l-28.402-14.739c-2.787-1.058-5.606-1.878-8.27-1.97h0ZM98.713%2C227.89c-37.724.526-74.546%2C20.941-96.358%2C44.897l7.249%2C19.81c31.68-38.692%2C77.26-50.786%2C120.38-39.818-.417-7.09-.23-13.694.319-20.293-10.395-3.33-21.028-4.742-31.59-4.595h0ZM373.287%2C227.89c-10.562-.146-21.195%2C1.266-31.59%2C4.596.55%2C6.6.736%2C13.204.319%2C20.293%2C43.12-10.968%2C88.7%2C1.126%2C120.38%2C39.819l7.249-19.81c-21.812-23.957-58.634-44.372-96.358-44.897h0ZM148.096%2C228.182c-.81%2C10.885-.266%2C29.41%2C2.834%2C43.607l9.734%2C3.965c2.586-11.223%2C2.906-32.67.065-42.97-3.732-2.342-7.926-3.739-12.633-4.602h0ZM323.904%2C228.182c-4.707.863-8.9%2C2.26-12.633%2C4.601-2.84%2C10.3-2.522%2C31.748.065%2C42.97l9.734-3.964c3.1-14.196%2C3.645-32.722%2C2.834-43.607h0ZM99.684%2C266.642c-27.276.344-53.959%2C12.954-71.176%2C31.323%2C1.704%2C5.264%2C3.41%2C10.527%2C5.113%2C15.79-6.285%2C37.74-8.29%2C77.163-2.838%2C108.579%2C1.055%2C8.222%2C4.829%2C15.139%2C11.516%2C14.898%2C10.581-.38%2C20.631-8.059%2C30.33-8.7%2C8.435-.45%2C14.473%2C2.946%2C21.142%2C5.087%2C6.67%2C2.141%2C13.051%2C3.436%2C18.21%2C2.36%2C10.989-4.862%2C15.247-20.824%2C25.505-24.791%2C10.459-5.374%2C23.473%2C2.55%2C33.567-.66%2C6.792-2.094%2C10.493-5.844%2C10.933-11.54-4.083-24.287-14.821-46.989-28.312-68.86%2C8.6-.557%2C18.822%2C5.084%2C27.074%2C11.04%2C4.113%2C7.971%2C7.819%2C16.16%2C10.924%2C24.613%2C5.29-5.878%2C14.188-14.14%2C10.51-21.804-5.364-10.173-10.077-19.009-16.282-28.32-2.506-3.763-41.568-31.013-61.416-31.075l-2.714-15.396c-6.42-1.613-12.942-2.43-19.446-2.538-.88-.014-1.76-.016-2.64-.006h0ZM372.316%2C266.642c-.88-.01-1.76-.008-2.64.007-6.504.108-13.026.925-19.446%2C2.537l-2.714%2C15.396c-19.848.062-58.91%2C27.313-61.416%2C31.074-6.205%2C9.312-10.918%2C18.148-16.282%2C28.32-3.678%2C7.666%2C5.22%2C15.927%2C10.51%2C21.805%2C3.105-8.454%2C6.81-16.642%2C10.924-24.613%2C8.252-5.956%2C18.474-11.597%2C27.074-11.039-13.49%2C21.87-24.229%2C44.572-28.312%2C68.86.44%2C5.695%2C4.14%2C9.445%2C10.933%2C11.538%2C10.094%2C3.21%2C23.108-4.713%2C33.567.66%2C10.258%2C3.968%2C14.516%2C19.93%2C25.506%2C24.792%2C5.158%2C1.076%2C11.539-.219%2C18.209-2.36%2C6.67-2.14%2C12.707-5.537%2C21.142-5.088%2C9.699.642%2C19.75%2C8.321%2C30.33%2C8.702%2C6.687.24%2C10.46-6.676%2C11.516-14.899%2C5.452-31.415%2C3.447-70.839-2.838-108.578%2C1.703-5.264%2C3.41-10.527%2C5.113-15.791-17.217-18.369-43.9-30.979-71.176-31.322h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-dot: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20472.677%20474.686%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M301.557.006c-.496-.01-.984-.007-1.463.008-1.358.09-2.045.27-3.057.4l-96.077%2C150.685c1.53%2C6.565%2C3.088%2C13.04%2C4.778%2C19.226l-18.027%2C4.926c-9.073-33.212-15.026-70.992-26.538-94.735-5.757-11.872-12.47-19.702-20.625-23.246-6.714-2.92-15.483-3.28-27.63.6%2C17.258%2C50.103%2C24.184%2C102.383%2C33.495%2C143.826%2C4.933%2C21.958%2C10.617%2C40.805%2C18.21%2C54.317%2C7.59%2C13.51%2C16.324%2C21.482%2C29.108%2C24.625l-4.463%2C18.148c-18.367-4.515-31.723-17.217-40.94-33.62-4.192-7.46-7.682-15.74-10.726-24.673-30.794%2C33.74-75.13%2C70.583-137.602%2C98.473v135.72h140.437c22.443-42.52%2C44.626-79.104%2C66.23-105.74%2C22.48-27.712%2C44.393-46.065%2C68.247-46.47l-.19.006%2C2.985-.112-28.434-81.853%2C21.164-7.057-33.67-79.035%2C68.99%2C92.844-27.9%2C7.52%2C31.3%2C66.41%2C149.417-5.558c4.266-5.493%2C7.614-14.578%2C8.1-23.91.467-8.97-1.767-17.213-5.073-22.166l-119.5%2C3.42c.137-8.21-.404-16.456-1.55-24.627l130.184-45.302c2.502-6.403%2C2.67-15.49-.002-24.108-2.58-8.326-7.588-15.26-12.38-18.79l-130.13%2C43.943c-3.459-8.192-7.529-16.113-12.177-23.694l108.244-77.542c.024-6.105-2.634-14.563-7.788-21.476-5.365-7.196-12.655-12.406-19.1-14.172l-109.396%2C79.31c-6.44-5.683-13.267-10.506-20.36-14.316l71.172-111.678c-2.26-4.454-6.892-9.397-13.256-13.218C318.174%2C2.877%2C308.989.138%2C301.557.005h0ZM292.582%2C336.236c-3.66%2C51.045-31.82%2C66.58-31.82%2C95.014%2C0%2C14.116%2C15.503%2C26.684%2C31.82%2C26.684%2C15.958%2C0%2C32.457-12.494%2C32.457-27.357%2C0-29.613-27.877-43.213-32.458-94.34h.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-debuff: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20403.2%20469.575%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M398.55%2C68.688l-185.5%2C185.2c-6.2%2C6.2-16.2%2C6.3-22.4%2C0h0L5.15%2C68.688c-6.2-6.2-6.2-16.5%2C0-22.8L46.65%2C4.688c6.2-6.2%2C16.2-6.3%2C22.4%2C0h0l132.8%2C132.8L334.65%2C4.688c6.2-6.2%2C16.2-6.3%2C22.4%2C0h0l41.5%2C41.2c6.2%2C6.2%2C6.2%2C16.5%2C0%2C22.8%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M398.05%2C279.688l-185.5%2C185.2c-6.2%2C6.2-16.2%2C6.3-22.4%2C0h0L4.65%2C279.688c-6.2-6.2-6.2-16.5%2C0-22.8l41.5-41.2c6.2-6.2%2C16.2-6.3%2C22.4%2C0h0l132.8%2C132.7%2C132.7-132.7c6.2-6.2%2C16.2-6.3%2C22.4%2C0h0l41.6%2C41.2c6.2%2C6.2%2C6.2%2C16.5%2C0%2C22.8%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-uninterruptable: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20480.375%20480.342%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M240.188%2C0C107.651%2C0%2C0%2C107.65%2C0%2C240.186s107.65%2C240.156%2C240.188%2C240.156c132.536%2C0%2C240.187-107.62%2C240.187-240.156S372.725%2C0%2C240.187%2C0h.001ZM240.188%2C18.686c122.436%2C0%2C221.5%2C99.064%2C221.5%2C221.5%2C0%2C17.96-2.133%2C35.412-6.157%2C52.125l-44.906-8.686-20.53-71.594-1.376-4.844-4.844-1.5-58.063-17.937-66.906-128.626-4.75-9.156-8.655%2C5.624-91.094%2C59.25-2.936%2C1.907-.97%2C3.374-47.936%2C167.377-70.22%2C29.436c-8.82-23.91-13.656-49.753-13.656-76.75C18.689%2C117.75%2C117.753%2C18.686%2C240.189%2C18.686h0ZM241%2C80.811l-52.53%2C104.595%2C16.218%2C134.438%2C90.125-61.938v62.97l-23.563%2C6.25%2C20.845%2C128.434c-16.646%2C3.988-34.03%2C6.095-51.908%2C6.095-88.813%2C0-165.33-52.117-200.656-127.47l74.406-31.217%2C4.126-1.72%2C1.25-4.312%2C48.187-168.28%2C73.5-47.845h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-crystal: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20335.253%20469.345%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M166.5.002l-53.875%2C59.562v90.063l-34.75-60.188-35.563-17.594-9.344%2C43.53%2C48.376%2C83.783-19.97-5.345-28.75%2C10.5%2C19.658%2C23.5%2C30.28%2C8.125-59.155%2C15.844L0%2C279.752l34.25%2C12.498%2C66.875-17.937-27.875%2C48.28%2C5.562%2C62.72%2C33.813-15.72v33.126l46.812%2C66.626%2C46.78-66.625v-72.81l21.626%2C68.092%2C35.875%2C27.344%2C13.564-43.03-32.688-102.97%2C42.875%2C11.5%2C26.876-13.78-17.78-20.22-64.595-17.312-.092-.25%2C82.25-22.03%2C21.125-24.064-31.97-16.406-73.656%2C19.75%2C39-67.594-3.562-55.25-58.844%2C18.97v-33.097L166.504%2C0l-.004.002ZM160.78%2C109.564l22.438%2C115.03%2C39.876%2C12.032-39.875%2C12.032-22.436%2C115.03-22.375-114.53-41.595-12.533%2C41.594-12.53%2C22.374-114.532h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-stunned: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22996%22%20height%3D%221024%22%20viewBox%3D%220%200%20996%201024%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23ab31c9%22%20d%3D%22M496.26%20601.438c0%200-54.441-34.072-28.516-128.139%2015.184-55.552%2081.846-112.584%20170.728-88.142%20115.918%2032.22%20158.137%20191.097%2049.996%20335.531%200%200-134.064%20178.135-360.344%2077.031%200%200-147.026-67.032-170.728-234.057-28.146-199.245%20109.251-337.383%20109.251-337.383s145.545-179.617%20391.453-125.546c252.574%2055.922%20341.086%20277.017%20337.753%20411.452-2.963%20126.658-37.034%20294.053-224.428%20426.265-199.615%20140.731-442.931%2084.068-560.7%200-88.512-62.958-207.022-181.839-210.725-391.453-3.703-206.281%20111.103-381.454%20249.241-471.077%2087.771-57.033%20228.872-84.438%20334.050-73.698%2015.925%202.222%2014.073%2022.221-0.37%2021.85-9.629-1.111-177.765-1.481-326.273%20118.51-120.362%2097.4-174.061%20262.944-164.062%20379.602%208.888%20106.289%2046.663%20255.907%20238.131%20339.235s455.152-42.96%20482.558-280.35c26.294-224.428-159.988-278.498-240.353-267.758-96.66%2012.592-185.912%2071.106-185.912%20198.875%204.814%2062.588%2051.848%20112.214%20109.251%2089.253z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%236d219e%22%20d%3D%22M496.26%20601.438c0%200-54.070-41.849-24.813-98.511%2038.145-73.328%20117.769-43.701%20138.138-6.666%2029.257%2052.959%2012.962%20155.174-75.92%20184.431%200%200-81.105%2028.516-158.137-21.85%200%200-74.069-49.626-76.661-146.656-1.111-37.775%205.555-75.18%2019.258-109.992%2024.443-60.366%2071.476-108.511%20131.102-134.435%2056.292-24.813%20144.434-48.145%20240.353-15.184%20155.174%2053.7%20191.468%20182.209%20197.763%20259.611%205.925%2072.217-18.888%20245.908-162.581%20345.901-169.988%20118.51-363.307%2099.622-481.447%2015.554-88.142-62.958-183.32-141.842-187.024-351.456-3.703-206.281%2098.511-344.79%20241.464-429.599%2089.993-53.329%20203.689-87.031%20289.238-80.365%2011.11%200.741%207.777%2012.221-3.703%2012.221-9.629-1.111-177.765-1.481-326.273%20118.51-120.732%2097.4-174.432%20262.944-164.803%20379.602%208.888%20106.289%2046.663%20255.907%20238.131%20339.235s455.152-42.96%20482.558-280.35c26.294-224.428-159.618-277.017-240.353-267.758-91.475%2010.37-177.024%2065.551-185.172%20180.357-1.481%2015.925%200.37%2031.85%204.444%2047.034%2015.184%2047.404%2055.922%2079.624%20104.437%2060.366z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-meat: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20485.028%20344.268%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M421.961.007c-4.05-.11-8.044%2C1.117-11.656%2C4-1.542%2C1.23-3.1%2C2.884-4.47%2C4.75-22.9%2C31.22-48.278%2C57.33-75.186%2C81-8.76%2C14.692%2C10.695%2C44.406%2C25.594%2C44.406%2C34.144-12.928%2C69.617-22.516%2C106.75-26.314%2C42.628-4.358%2C17.688-68.134-26.25-45.47C467.043%2C39.713%2C443.837.589%2C421.961.005v.002ZM292.275%2C10.1c-6.167-.108-12.215%2C1.172-17.595%2C4.28-1.556.901-3.03%2C1.937-4.406%2C3.095-.038-.056-.09-.13-.126-.186-79.912%2C66.402-116.334%2C73.468-158.22%2C86.844-6.886%2C2.2-12.27%2C7.18-16.5%2C15.5s-6.892%2C19.843-7.343%2C33.125c-.9%2C26.563%2C6.935%2C59.927%2C23.72%2C89.03%2C16.72%2C28.99%2C43.37%2C53.946%2C67.656%2C67.126%2C12.143%2C6.59%2C23.682%2C10.167%2C32.375%2C10.436%2C8.694.27%2C13.915-1.95%2C17.782-7.375%2C30.986-43.45%2C89.343-69.052%2C156.157-92.25-.005-.006.003-.023%2C0-.03%2C2.031-.661%2C3.989-1.53%2C5.842-2.594%2C8.2-4.738%2C13.535-12.897%2C16.282-22.125%2C2.747-9.227%2C3.22-19.75%2C2.03-31.25-.953-9.233-3.033-19.127-6.155-29.374-5.916%2C1.366-11.628%2C3.157-17.908%2C5.47%2C2.835%2C9.25%2C4.69%2C17.978%2C5.5%2C25.81%2C1.007%2C9.74.403%2C18.06-1.375%2C24.033-1.777%2C5.972-4.412%2C9.338-7.718%2C11.25-3.308%2C1.91-7.543%2C2.505-13.595%2C1.06-6.052-1.443-13.55-5.07-21.47-10.81-15.838-11.482-33.334-31.223-47.624-56-14.29-24.78-22.61-49.838-24.624-69.314-1.006-9.738-.403-18.027%2C1.375-24%2C1.78-5.973%2C4.414-9.37%2C7.72-11.28%2C1.653-.957%2C3.52-1.58%2C5.75-1.782.557-.05%2C1.147-.067%2C1.75-.063%2C1.81.014%2C3.824.272%2C6.094.814%2C6.05%2C1.444%2C13.518%2C5.04%2C21.437%2C10.78%2C8.218%2C5.957%2C16.884%2C14.166%2C25.314%2C24.126%2C5.07-4.055%2C9.34-8.25%2C13.406-13.188-8.97-10.46-18.366-19.26-27.75-26.062-9.354-6.78-18.733-11.61-28.094-13.844-2.311-.555-4.661-.931-7.03-1.125-.884-.068-1.77-.11-2.657-.124v-.003ZM300.242%2C44.288c-.438.024-.86.063-1.28.125-17.327%2C2.54-14.97%2C36.035%2C5.03%2C74.56%2C20%2C38.528%2C50.52%2C67.576%2C67.844%2C65.032%2C5.995-.88%2C9.263-5.687%2C10.658-12.875-1.67%2C2.187-3.847%2C3.484-6.72%2C3.907-15.316%2C2.248-42.316-23.093-60-57.156-17.682-34.064-19.254-63.91-3.937-66.157%2C3.638-.53%2C7.69.417%2C12.345%2C2.782-8.68-6.8-17.353-10.583-23.938-10.218h-.002ZM83.805%2C227.068c-16.555%2C1.844-35.304%2C3.26-57.063%2C4.376-49.128%2C2.523-25.555%2C71.576%2C30.094%2C52.22-49.365%2C29.9%2C3.86%2C86.927%2C26.97%2C46.75%2C10.362-18.016%2C21.88-33.79%2C34.375-47.814-8.42-9.644-16.078-20.224-22.563-31.47-4.469-7.748-8.415-15.786-11.812-24.06v-.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-confused: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20411.458%20474.101%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M208.804%2C0C96.894-.001%2C18.231%2C38.287%2C4.136%2C80.671h.002c-25.93%2C77.97%2C72.846%2C117.983%2C216.416%2C92.307%2C78.262-14%2C182.29%2C16.69%2C123.08%2C80.35%2C151.465-68.768%2C22.753-120.352-128.742-102.648-88.326%2C10.322-160.02%2C11.012-170.92-37.805-7.92-35.467%2C76.538-71.817%2C167.17-77.25%2C89.626-5.373%2C183.32%2C37.95%2C170.533%2C64.828-17.172%2C36.097-126.9%2C7.75-120.308-25.113%2C2.21-11.017%2C19.864-15.988%2C42.05-14.6-30.58-10.615-72.8-11.888-79.427%2C12.846-4.788%2C17.872%2C27.71%2C42.46%2C72.418%2C53.73%2C54.674%2C13.782%2C115.05%2C5.32%2C115.05-46.136C411.458%2C36.28%2C319.161%2C0%2C208.803%2C0h0Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M338.286%2C273.799l-56.64%2C13.39%2C38.91-38.91c-18.73-20.82-45.76-37.6-77.88-46.21-12.96-3.48-26.29-5.44-39.71-5.84-1.75-.05-3.49-.07-5.24-.07-53.92.17-99.46%2C27.14-110.98%2C70.15-7.39%2C27.56%2C1.15%2C56.59%2C19.86%2C81.18%2C2.06%2C2.71-.42%2C8.23-3.51%2C11.09-51.88%2C48.18-12.11%2C89.94%2C25.12%2C51.4-16.99%2C47.31%2C24.36%2C66.46%2C46.72%2C24.53-2.46%2C47.79%2C41.42%2C54.25%2C51.97%2C8.76%2C12.31%2C50.24%2C66.51%2C34.65%2C47.31-33.29-1.43-5.05.67-9.28%2C4.67-10.51%2C33.49-10.34%2C58.97-33.09%2C67.16-63.66%2C5.56-20.75%2C2.32-42.26-7.76-62.01ZM149.296%2C344.759c-22.66-6.07-36.1-29.36-30.03-52.01%2C5.12-19.12%2C22.5-31.68%2C41.42-31.49%2C3.5.03%2C7.06.51%2C10.6%2C1.45%2C22.65%2C6.07%2C36.1%2C29.36%2C30.03%2C52.02-6.07%2C22.66-29.36%2C36.1-52.02%2C30.03ZM190.626%2C400.289c-31.33-8.9-.89-41.16%2C16.97-56.83%2C8.91%2C23.33%2C15.9%2C66.21-16.97%2C56.83ZM289.046%2C357.799c-4.41%2C16.44-21.31%2C26.2-37.76%2C21.8-16.44-4.41-26.2-21.31-21.79-37.75%2C3.72-13.88%2C16.33-22.99%2C30.06-22.86%2C2.54.03%2C5.12.37%2C7.69%2C1.06%2C16.45%2C4.4%2C26.2%2C21.31%2C21.8%2C37.75Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-all-elements: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20470.197%20470.199%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M235.099%2C0c-57.656%2C0-110.49%2C20.826-151.41%2C55.34l-.02.018c-14.922%2C11.324-27.811%2C25.103-38.114%2C40.748C16.93%2C135.054%2C0%2C183.116%2C0%2C235.1c0%2C60.03%2C22.573%2C114.835%2C59.67%2C156.406l-.428.428c2.47%2C2.472%2C4.99%2C4.866%2C7.545%2C7.2%2C42.715%2C43.82%2C102.358%2C71.065%2C168.31%2C71.065%2C129.73%2C0%2C235.1-105.367%2C235.1-235.098S364.827.001%2C235.097.001h.002ZM253.656%2C19.485c110.923%2C9.397%2C197.856%2C102.235%2C197.856%2C215.615%2C0%2C93.92-59.656%2C173.746-143.185%2C203.725%2C21.783-10.06%2C42.125-23.996%2C59.99-41.86%2C83.66-83.66%2C81.477-221.553-4.095-308.117-27.37-34.46-66.12-59.47-110.566-69.363ZM182.714%2C40.729c50.418%2C0%2C94.77%2C25.548%2C120.845%2C64.426-23.568-22.81-55.268-36.417-87.088-37.588-1.74-.064-3.482-.09-5.222-.08-26.108.163-51.995%2C8.817-73.223%2C27.744-37.01%2C33-47.4%2C93.67-11.256%2C132.697%2C24.97%2C26.964%2C70.172%2C34.654%2C98.377%2C6.775%2C9.363-9.253%2C15.098-21.745%2C16.107-34.748%2C1.01-13.002-3.07-26.867-13.68-36.925l-.002-.002c-6.717-6.365-15.495-10.193-24.725-10.723-9.23-.53-19.322%2C2.714-26.187%2C10.797-4.143%2C4.851-6.451%2C11.003-6.52%2C17.382-.087%2C6.48%2C2.615%2C13.847%2C8.807%2C18.47l.01.008.008.006c3.53%2C2.623%2C7.546%2C3.958%2C12.13%2C3.813%2C4.585-.147%2C10.325-2.614%2C13.293-7.69v-.003c1.62-2.77%2C2.21-5.36%2C1.828-8.705-.383-3.344-2.986-8.217-7.56-9.988-2.477-.96-3.87-1.053-6.464-.467-.617.14-1.33.36-2.078.7.265-.494.487-1.06.797-1.427%2C2.8-3.297%2C6.35-4.495%2C10.865-4.236%2C4.515.26%2C9.583%2C2.45%2C12.94%2C5.63%2C6.232%2C5.91%2C8.547%2C13.58%2C7.9%2C21.913-.647%2C8.334-4.617%2C16.978-10.607%2C22.9-19.7%2C19.47-52.966%2C13.852-71.52-6.183-28.257-30.51-19.83-79.463%2C9.98-106.043%2C43.082-38.41%2C110.765-25.763%2C147.365%2C17.128%2C16.63%2C19.486%2C26.923%2C44.188%2C29.785%2C69.752l.168-.02c-5.076%2C75.787-67.978%2C135.512-145.07%2C135.512-80.42%2C0-145.414-64.99-145.414-145.412%2C0-29.5%2C8.753-56.917%2C23.796-79.818%2C9.88-13.331%2C21.254-25.487%2C33.9-36.23%2C24.37-18.436%2C54.745-29.366%2C87.718-29.366h-.003ZM406.454%2C203.637c13.955%2C63.703-3.07%2C131.83-51.354%2C180.113-74.77%2C74.77-197.125%2C74.596-276.945.438-33.938-35.717-55.775-83.033-59.03-135.432%2C17.826%2C89.673%2C96.938%2C157.267%2C191.847%2C157.267%2C108.034%2C0%2C195.612-87.576%2C195.612-195.61%2C0-2.27-.053-4.526-.13-6.776h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-taunt: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20479.47%20474.81%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M386.03%2C199.16l93.44-32.72v-66.56l-93.44%2C99.28ZM0%2C53.72v84.09l99.28%2C46.72L0%2C53.72ZM423.4%2C0l-74.15%2C158.28%2C130.22-99.31V0h-56.07ZM317.12%2C0l-16.34%2C130.22L391.31%2C0h-74.19ZM223.68%2C0l22.78%2C118.56L282.09%2C0h-58.41ZM188.65%2C0h-65.43l68.34%2C124.41L188.65%2C0ZM89.34%2C0H0v14.59l140.75%2C132.57L89.34%2C0Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M360.9%2C216.5c-1.85-9.47-6.03-19.94-12.37-29.78-10.96-17.01-25.24-27.29-36.16-27.37-3.64-.03-6.9%2C1.07-9.56%2C3.43-2.42%2C2.16-4.12%2C5.17-5.12%2C8.82%2C1.25%2C1.57%2C2.48%2C3.17%2C3.65%2C4.84%2C11.65%2C16.57%2C19.58%2C37.63%2C22.47%2C61%2C8.61%2C7.78%2C17.56%2C11.76%2C24.72%2C10.78l54.59%2C35.94-104.59%2C57.81c-4.07%2C5.26-8.57%2C10.02-13.44%2C14.16-5.57-4.35-11.03-7.95-16.44-10.82%2C6.33-4.49%2C12.21-10.48%2C17.41-17.87%2C12.3-17.5%2C20.28-42.42%2C20.28-70.13%2C0-7.05-.51-13.91-1.49-20.52-.65-4.44-1.51-8.76-2.56-12.95-3.52-14.09-9.16-26.6-16.23-36.65-12.3-17.5-28.3-27.32-45.44-27.32s-33.13%2C9.82-45.43%2C27.32c-6.8%2C9.67-12.29%2C21.62-15.82%2C35.06-1.69%2C6.42-2.94%2C13.18-3.68%2C20.2-.51%2C4.84-.78%2C9.8-.78%2C14.86%2C0%2C27.71%2C7.98%2C52.63%2C20.28%2C70.13%2C4.54%2C6.45%2C9.58%2C11.86%2C15%2C16.12-5.51%2C2.62-11.07%2C6.02-16.69%2C10.22-3.81-3.52-7.32-7.35-10.5-11.44l-105.25-58.19%2C54.44-35.84c7.49.51%2C16.76-4.09%2C25.5-12.59%2C3.06-22.69%2C10.85-43.12%2C22.22-59.28.78-1.13%2C1.6-2.23%2C2.43-3.32-.93-4.32-2.75-7.89-5.5-10.34-2.65-2.37-5.92-3.47-9.56-3.44v.01c-10.92.08-25.16%2C10.36-36.13%2C27.37-6.48%2C10.05-10.7%2C20.77-12.5%2C30.41-49.04%2C22.67-113.9%2C63.9-113.9%2C63.9l148.43%2C126%2C15%2C67.78h144.28l11.32-64.65.09.09%2C152.25-129.22s-66.03-41.99-115.22-64.53ZM257.47%2C230.42l10.13-10.13c5.97%2C1.13%2C11.93%2C2.6%2C17.82%2C4.39v18.34l-.39%2C1.14c-9.07-3.11-18.41-5.32-27.91-6.63.23-2.36.34-4.74.35-7.11ZM195.13%2C243v-18.71c6.77-2.27%2C13.76-3.96%2C20.89-5.08l11.32%2C11.31c.01%2C2.1.08%2C4.14.25%2C6.14-11.27.94-22.11%2C3.38-32.06%2C7.34l-.4-1ZM240.09%2C333.25c-20.26%2C0-36.69-16.43-36.69-36.68s16.43-36.66%2C36.69-36.66%2C36.72%2C16.4%2C36.72%2C36.65-16.45%2C36.69-36.72%2C36.69Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M179.37%2C222.25c-1.69%2C6.42-2.94%2C13.18-3.68%2C20.2l3.68-20.2Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-dynamite: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20477.279%20429.883%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M261.372%2C2.633c-2.8%2C2.78-4.1%2C9.46-.7%2C20.04%2C3.4%2C10.59%2C11.3%2C23.59%2C22.8%2C35.39%2C11.5%2C11.7%2C24.3%2C19.9%2C34.9%2C23.5%2C10.5%2C3.7%2C17.2%2C2.4%2C20-.3%2C2.8-2.8%2C4.2-9.5.8-20.1-3.4-10.6-11.3-23.6-22.8-35.32-11.6-11.76-24.4-19.94-34.9-23.57-6.2-1.5-15-4.44-20.1.36h0ZM350.472.793c-4%2C0-6.9%2C1.05-8.5%2C2.62-2.8%2C2.78-4.1%2C9.45-.7%2C20.04%2C3.4%2C10.58%2C11.3%2C23.61%2C22.8%2C35.31%2C11.5%2C11.8%2C24.3%2C20%2C34.9%2C23.6%2C10.5%2C3.6%2C17.2%2C2.4%2C20-.4%2C2.8-2.7%2C4.2-9.4.8-20-3.4-10.6-11.3-23.6-22.8-35.35-11.6-11.76-24.4-19.94-34.9-23.56-4.6-1.59-8.5-2.25-11.6-2.26h0ZM241.772%2C21.833l-31.2%2C30.63c5.8%2C17.4%2C13.4%2C32.7%2C24.2%2C44.8%2C12.8%2C14.5%2C29.9%2C24.9%2C55.1%2C29.7l1.5.3%2C27.4-26.8c-2.1-.5-4.2-1.1-6.3-1.9-14-4.8-28.7-14.4-41.9-27.9-13.2-13.5-22.5-28.4-27.1-42.48-.7-2.18-1.2-4.44-1.7-6.35ZM183.472%2C78.963l-120.8%2C118.3c5.7%2C16.5%2C13.2%2C31.1%2C23.5%2C42.7%2C12.8%2C14.5%2C29.9%2C24.9%2C55.1%2C29.7l4%2C.7%2C118-115.6c-37-11.4-63-38.6-79.8-75.8h0ZM363.472%2C92.763c-4%2C0-6.9%2C1-8.5%2C2.6-2.8%2C2.8-4.1%2C9.5-.7%2C20%2C3.4%2C10.6%2C11.3%2C23.6%2C22.8%2C35.4s24.3%2C19.9%2C34.9%2C23.6c10.5%2C3.6%2C17.2%2C2.4%2C20-.4.7-.7%2C1.3-1.6%2C1.8-2.8%2C13.2%2C11.3%2C24.3%2C26.2%2C25.3%2C35.8%2C1.3%2C11.7-3.5%2C21.7-12.8%2C32.4-9.4%2C10.7-23.2%2C21.2-37.4%2C32-14.1%2C10.7-28.5%2C21.6-39.3%2C34.4-10.7%2C12.9-17.9%2C28.7-14.7%2C46.4%2C2.9%2C15.6%2C11.3%2C31.8%2C25.1%2C42.9%2C13.7%2C11.2%2C33.4%2C16.8%2C55.1%2C9.7l8.6-2.8-5.6-17.1-8.6%2C2.8c-16.3%2C5.3-28.4%2C1.5-38.2-6.5-9.8-8-16.6-20.9-18.6-32.2-2.1-11.6%2C1.9-21.1%2C10.7-31.6%2C8.9-10.5%2C22.4-21%2C36.4-31.7%2C14.1-10.7%2C28.8-21.7%2C40-34.5%2C11.2-12.7%2C19.2-28.3%2C17.2-46.1-2.2-20.4-18.9-37.8-35.6-51-4-3.2-8.1-6.1-12.1-8.6-4.2-8.6-10.7-18.1-19.3-26.9-11.6-11.8-24.4-19.9-34.9-23.6-4.6-1.5-8.5-2.2-11.6-2.2h0ZM335.372%2C114.563l-27.3%2C26.8.2%2C1.5c4.2%2C25.3%2C14.3%2C42.7%2C28.5%2C55.8%2C11.9%2C11%2C27.1%2C19%2C44.3%2C25.1l31.3-30.6c-2.1-.5-4.2-1.1-6.3-1.8-14-4.8-28.7-14.5-41.9-28s-22.5-28.4-27.1-42.4c-.7-2.2-1.2-4.3-1.7-6.4h0ZM279.972%2C168.863l-118.1%2C115.6.7%2C4c4.1%2C25.3%2C14.2%2C42.6%2C28.5%2C55.7%2C11.4%2C10.6%2C25.7%2C18.4%2C42.2%2C24.4l120-117.5c-36.8-17.8-63.1-44.6-73.3-82.2h0ZM37.052%2C222.363c-11.64%2C9-23.69%2C22.4-34.25%2C33.5-2.84%2C2.8-4.19%2C9.5-.79%2C20.1%2C3.41%2C10.6%2C11.32%2C23.6%2C22.83%2C35.3%2C11.52%2C11.8%2C24.36%2C20%2C34.87%2C23.6%2C10.51%2C3.6%2C17.21%2C2.4%2C20.04-.4%2C12.72-12.3%2C25.72-25.1%2C36.62-35.8-36.88-11.6-62.65-38.9-79.32-76.3ZM132.172%2C313.563c-12.2%2C11.4-20.2%2C19.3-35.8%2C35.1-2.8%2C2.8-4.2%2C9.4-.8%2C20%2C3.4%2C10.6%2C11.3%2C23.6%2C22.8%2C35.4%2C11.6%2C11.7%2C24.4%2C19.9%2C34.9%2C23.5%2C10.5%2C3.7%2C17.2%2C2.5%2C20.1-.3%2C11.3-10.6%2C21.6-21.2%2C32.4-31.8-36.8-17.8-63.2-44.5-73.6-81.9h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-berserk: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20455.391%20440%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M419.691%2C0c-29.4%2C44.05-63.2%2C65.7-126.3%2C64.8-14.915-20.504-39.465-32.757-65.7-32.79-26.271.002-50.865%2C12.258-65.8%2C32.79-63%2C.9-96.85-20.77-126.2-64.8-30.29%2C45.43%2C21.04%2C110.9%2C112.2%2C112.4.617%2C10.15%2C3.371%2C20.079%2C8.1%2C29.2C16.531%2C161.1-11.489%2C352.1%2C3.691%2C428h80c0-48%2C16-112%2C64-144l-16%2C144c0%2C16%2C64%2C16%2C64%2C0%2C0-32%2C16-64%2C32-64s32%2C32%2C32%2C64c0%2C16%2C64%2C16%2C64%2C0l-16-144c48%2C32%2C64%2C96%2C64%2C144h80c15.2-75.9-12.8-267-152.4-286.4%2C4.764-9.114%2C7.552-19.043%2C8.2-29.2%2C91.1-1.5%2C142.5-66.96%2C112.2-112.4ZM163.691%2C87.8c13.5%2C15.7%2C27.2%2C31.3%2C48%2C40.2%2C0%2C0-22.9%2C15.7-32%2C8.7-10.1-7.9-16-48.9-16-48.9ZM291.691%2C87.8s-5.9%2C41-16%2C48.9c-9.1%2C7-32-8.7-32-8.7%2C20.8-8.9%2C34.5-24.5%2C48-40.2h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-crushingBlow: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20465.479%20474.16%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M53.682%2C0l36.696%2C67.596L.002%2C14.182v.058l102.127%2C106.376L0%2C74.346v.3l53.856%2C60.932L0%2C131.506v.014l196.608%2C95.675-68.502%2C34.29%2C76.547%2C18.104-42.896%2C55.227%2C72.892-11.634c5.323-8.462%2C9.98-16.897%2C13.958-25.48-18.586-11.336-30.994-31.8-30.994-55.165%2C0-35.66%2C28.91-64.57%2C64.572-64.57%2C22.323%2C0%2C41.986%2C11.335%2C53.58%2C28.556l36.55%2C2.15%2C35.013-37.644-59.405%2C9.334%2C23.363-78.582-63.15%2C59.25-21.5-112.395-21.354%2C110.425-48.256-53.547%2C6.737%2C61.11L54.2.001h-.52.002ZM284.788%2C222.244c-2.274%2C61.787-26.61%2C106.513-68.617%2C156.828l75.126%2C82.96%2C41.545-116.155c-6.507%2C2.467-13.803%2C3.007-20.984%2C1.083-18.23-4.885-29.204-23.86-24.32-42.086.206-.77.444-1.522.7-2.265l1.452-22.514%2C77.674-3.506h.004l65.41%2C41.467-11.62%2C24.1c-5.448%2C17.396-23.93%2C27.675-41.698%2C22.915-6.818-1.827-12.62-5.626-16.957-10.618l-22.757%2C119.707%2C104.506-33.964c-13.598-67.112-8.595-114.53%2C21.227-169.622l-83.105-42.59-97.586-5.74h0ZM320.268%2C298.094c-6.786.15-12.81%2C4.683-14.668%2C11.62-2.265%2C8.455%2C2.62%2C16.913%2C11.098%2C19.185%2C8.48%2C2.272%2C16.937-2.61%2C19.203-11.067%2C2.265-8.456-2.62-16.913-11.098-19.185-1.036-.278-2.097-.453-3.168-.523-.46-.03-.915-.04-1.368-.03h.001ZM387.872%2C316.204c-6.786.15-12.81%2C4.682-14.67%2C11.618-2.266%2C8.456%2C2.618%2C16.914%2C11.098%2C19.186%2C8.48%2C2.272%2C16.937-2.61%2C19.203-11.066%2C2.267-8.456-2.617-16.914-11.097-19.186-1.035-.278-2.096-.454-3.166-.523-.458-.03-.915-.04-1.367-.03h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-sound-off: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20443.564%20352%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cg%20transform%3D%22translate(0%2065.922)%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M237.73%2C7.236C219.24%2C1.976%2C197.72-.124%2C176.43.006c-35.46.21-70.26%2C6.61-89.25%2C14.86-14.08%2C43.14-16.33%2C127.92-6.73%2C180.52-8.46-4.27-18.34-6.55-28.45-6.56-28.72%2C0-52%2C17.91-52%2C40s23.28%2C40%2C52%2C40%2C52-17.91%2C52-40c-6.16-49.18-13.74-115.12-8.22-165.43%2C37.75-7.73%2C77.49-17.43%2C114.68-10.72-4.15%2C38.29-3.03%2C82.42%2C3.38%2C117.55-8.45-4.26-18.33-6.54-28.44-6.55-28.72%2C0-52%2C17.91-52%2C40s23.28%2C40%2C52%2C40%2C52-17.91%2C52-40c-4.62-72.49-18.78-132.77.33-196.44ZM212.91%2C34.526c-37.91-5.63-78.58%2C1.39-114.33%2C9.66.92-5%2C2.02-9.96%2C3.27-14.88%2C19.73-7.72%2C50.15-13.48%2C80.04-13.67%2C11.7-.07%2C23.32.71%2C34.18%2C2.56-1.19%2C5.2-2.24%2C10.67-3.16%2C16.33Z%22%2F%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22298.512%2033.351%20273.053%2058.81%20324.326%20110.08%20273.054%20161.351%20298.512%20186.809%20349.783%20135.537%20401.054%20186.809%20426.512%20161.351%20375.24%20110.08%20426.512%2058.809%20401.054%2033.351%20349.783%2084.623%20298.512%2033.351%20298.512%2033.351%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
+  --icon-sound-on: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20443.564%20352%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M299.564%2C0c128%2C64%2C128%2C288%2C0%2C352%2C192-64%2C192-288%2C0-352ZM251.564%2C16c64%2C50.843%2C64%2C270.217%2C0%2C321.06%2C128-50.843%2C128-270.217%2C0-321.06ZM176.434%2C65.922c-35.468.215-70.268%2C6.618-89.253%2C14.863-14.084%2C43.136-16.33%2C127.919-6.736%2C180.518-8.452-4.265-18.337-6.543-28.445-6.555-28.719%2C0-52%2C17.909-52%2C40s23.281%2C40%2C52%2C40%2C52-17.909%2C52-40c-6.166-49.187-13.74-115.12-8.225-165.437%2C37.756-7.722%2C77.49-17.422%2C114.688-10.715-4.152%2C38.294-3.029%2C82.424%2C3.379%2C117.552-8.452-4.265-18.337-6.543-28.446-6.554-28.719%2C0-52%2C17.908-52%2C40s23.281%2C40%2C52%2C40%2C52-17.909%2C52-40c-4.618-72.485-18.78-132.767.33-196.436-18.491-5.267-40.012-7.365-61.293-7.236h.001%2C0ZM181.89%2C81.557c11.697-.073%2C23.313.706%2C34.174%2C2.558-1.185%2C5.199-2.232%2C10.67-3.156%2C16.336-37.913-5.64-78.578%2C1.385-114.332%2C9.656.926-4.997%2C2.019-9.961%2C3.277-14.884%2C19.722-7.718%2C50.145-13.48%2C80.037-13.666h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-mend: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20426.75%20472.719%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M195.35.319c-8.6%2C1.31-16.5%2C5.4-20.7%2C9.7l26.1%2C158.7-17.6%2C5.6L110.15%2C26.319c-5.9-.8-14.3.61-22.2%2C4.81-8.1%2C4.3-14.4%2C11-17.2%2C17.39l69.1%2C142.9-15.2%2C10.5L30.1%2C101.719c-5.8%2C1.2-13.1%2C5.5-19.1%2C12.1-6.2%2C7-10.2%2C15.8-11%2C22.8l96.05%2C103.6c69.9-31.4%2C140.4-54.2%2C210.9-76.1l10.4-47.2c-8.5.6-16.6-.6-24.1-3.2-7.2-2.5-13.9-6.2-20.2-10.8l-11.7%2C53-18.3-.5L218.85%2C4.029C210.65.009%2C203.65-.471%2C195.35.319h0ZM289.75%2C11.449l-16.1%2C68.34c8.4%2C8.03%2C16.9%2C13.93%2C25.5%2C16.93s17.5%2C3.3%2C27.8%2C0l16.9-69.73v-.11c-3.7-14.58-42.4-21.77-54.1-15.43h0ZM395.55%2C176.419c-5.7.1-12.1%2C1.4-19.1%2C3.9-19%2C6.6-41.6%2C21.3-64.6%2C35.5l-.5-.4c-59.7%2C34.3-118.1%2C69.2-169.8%2C110.4v2.1c21.6%2C2.9%2C51.6%2C11.2%2C80.3%2C20.6%2C23%2C7.6%2C44.6%2C15.6%2C59.9%2C22.6-2.3-22-2.6-42.5-1.6-60.9-8.7%2C4.2-17%2C7.6-25.3%2C9.9-18.1%2C5.1-36.5%2C4.7-52.7-5.1l9.7-16c11.2%2C6.8%2C23.1%2C7.3%2C38%2C3.1%2C14.9-4.2%2C32.3-13.5%2C51.4-25.6%2C35.9-22.7%2C77.7-54.9%2C125.5-78.2-5.9-11.3-12.3-17.2-19.1-19.9-3.6-1.4-7.7-2.1-12.1-2h0ZM302.45%2C184.319c-43.3%2C13.6-86.5%2C27.6-129.3%2C43.7%2C16.3%2C4.3%2C32.8%2C11%2C45.4%2C21.7%2C26.2-16.5%2C53.1-32.3%2C80.1-47.8%2C1.5-6%2C2.5-11.6%2C3.8-17.6h0ZM141.75%2C240.319c-11%2C4.5-21.9%2C9.1-32.8%2C13.9l15.7%2C16.9.2.1c8.1%2C8.4%2C12.8%2C19.6%2C15.1%2C33%2C20.1-15.5%2C41-30.1%2C62.5-44.1-16.1-10.7-41.3-17.2-60.7-19.8ZM88.55%2C291.419c-4.7-.1-12.6%2C2-21%2C5.7-9.1%2C4.1-18.98%2C10-28.03%2C16-4.74%2C3.1-9.18%2C6.3-13.25%2C9.2%2C12.94.6%2C26.58%2C1.7%2C40.38%2C4.9%2C19.1%2C4.5%2C37.9%2C13.4%2C51%2C29.9%2C8.5-17.2%2C8.2-29.5%2C1.2-41-9.5-12.9-22.7-24.2-29.4-24.7h-.9ZM140.65%2C346.019c-1.1%2C13.4-3.4%2C27.9-5.6%2C39.5%2C61.2%2C9.5%2C110.1%2C34.1%2C160.2%2C55.3-4.7-16.7-8.2-32.8-10.6-48.3-11.6-6.2-39.4-17.3-68.4-26.9-27.4-9-56.6-16.8-75.6-19.6ZM119.45%2C375.719c-18%2C9.3-39.4%2C17.1-69.54%2C17.8-6.97%2C17.7-14.01%2C37.1-31.64%2C55.6%2C22.6.7%2C37.95-3.1%2C51.38-11%2C16.5-9.7%2C27.2-27%2C46.9-51.4l2.9-11ZM131.35%2C403.119c-3.5%2C15.6-7.9%2C32.1-12.8%2C49.3%2C20.7-13.2%2C44.9-27.1%2C71.9-34.8-18.7-6.2-38.2-11.3-59.1-14.5h0ZM223.45%2C429.819c-38.4%2C2.9-73.6%2C23.8-103.1%2C42.9h185.3c-1.2-3.2-2.3-6.4-3.4-9.6-26.9-10.8-52.5-22.7-78.8-33.3h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-spikeWall: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20468.221%20473.812%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M88.406%2C0l1.468%2C24.844c-7.493%2C3.44-14.667%2C7.408-21.436%2C11.968C56.525%2C30.617%2C7.843.876%2C7.843.876l26.438%2C68.563c-18.827%2C25.903-24.476%2C56.148-20.5%2C87.5-4.036%2C10.546-6.775%2C21.543-8.157%2C32.75-4.28%2C34.82%2C4.443%2C73.208%2C29.564%2C111.78C24.178%2C318.869%2C0%2C354.813%2C0%2C354.813l61.22-19.875c1.98%2C2.18%2C3.998%2C4.36%2C6.093%2C6.532%2C31.825%2C33.022%2C64.816%2C56.735%2C97.343%2C72.436-1.357%2C21.98-4.532%2C59.906-4.532%2C59.906l40.532-45.656c34.34%2C10.635%2C67.452%2C12.538%2C97.282%2C7.22%2C8.957%2C1.915%2C17.79%2C3.232%2C26.437%2C3.874%2C26.46%2C1.964%2C51.463-2.464%2C72.283-15.5%2C1.942-1.211%2C3.839-2.493%2C5.687-3.844%2C15.444%2C4.942%2C64.094%2C23.25%2C64.094%2C23.25l-34.906-57.062c4.48-8.064%2C8.3-17.044%2C11.375-26.97%2C9.51-30.692%2C13.66-59.886%2C13.375-87.374.002-.02-.003-.042%2C0-.063%2C4.158-29.67.89-60.38-8.282-89.562-3.378-10.728-7.514-21.202-12.375-31.344%2C15.212-13.58%2C32.595-28.75%2C32.595-28.75l-47.5%2C2.032c-8.474-13.175-18.222-25.552-29.094-36.843%2C5.347-17.464%2C21.908-64.907%2C21.908-64.907l-55.25%2C36.343c-.262-.183-.52-.38-.782-.562-24.558-17.015-52.748-28.888-83.125-33.25.924-11.743%2C1.72-21.625%2C1.72-21.625l-17.406%2C19.593c-31.27-10.284-63.304-15.307-93.656-14.47-21.283.588-41.732%2C4.05-60.532%2C10.595C95.875%2C8.82%2C88.405%2C0%2C88.405%2C0h.001ZM173.156%2C28.28c8.26.09%2C16.652.658%2C25.125%2C1.626-23.352%2C6.245-43.81%2C15.013-61.438%2C25.75-1.82-1.457-9.677-10.352-18.53-20.594%2C15.102-4.23%2C31.386-6.447%2C48.31-6.75%2C2.168-.038%2C4.345-.055%2C6.532-.03v-.002ZM241.843%2C41.78l-11.938%2C13.44c-11.7-2.576-23.596-4.165-35.562-4.75%2C4.397-1.344%2C8.9-2.63%2C13.563-3.782%2C11.515-2.845%2C22.86-4.438%2C33.937-4.907h0ZM91.093%2C45.626l1.53%2C26.344c-3.953%2C2.024-7.83%2C4.193-11.624%2C6.5-19.415%2C11.843-36.164%2C27.058-49%2C44.843%2C2.444-17.23%2C9.253-33.295%2C21.157-47.72%2C10.37-12.565%2C23.26-22.493%2C37.937-29.967ZM272.531%2C49.032c10.435%2C4.212%2C20.627%2C9.001%2C30.53%2C14.345l-4.562%2C19.28c-8.983-5.375-18.067-10.048-27.22-14.03.283-5.274.724-12.21%2C1.252-19.594h0ZM190.749%2C68.722c33.724%2C1.065%2C69.257%2C11.17%2C103.25%2C32.874l-4.656%2C19.594s6.89-5.636%2C15.22-12.438c21.385%2C15.353%2C42.013%2C35.488%2C61%2C61.094%2C6.913%2C9.325%2C12.885%2C18.596%2C18.03%2C27.75-11.63%2C10.287-22.28%2C19.594-22.28%2C19.594l31.5-1.344c7.023%2C15.705%2C11.562%2C31.02%2C13.905%2C45.72-16.35%2C8.71-59%2C29.373-59%2C29.373l59.625%2C13.875c-3.29%2C23.663-12.567%2C44.827-26.53%2C62.375-19.992%2C15.673-45.71%2C28.626-78.095%2C37.625-14.812-16.555-37.688-43.125-37.688-43.125l2.594%2C45.032c-31.706-11.987-64.888-30.877-95.874-54.283%2C6.14-19.402%2C20.97-61.843%2C20.97-61.843l-53.314%2C35.062c-26.48-23.94-50.176-50.712-68.562-78.156-.16-.976-.29-1.96-.438-2.938%2C21.096-4.256%2C50.813-9.75%2C50.813-9.75l-52.938-28.75c.747-17.35%2C3.87-34.413%2C9.532-50.625l24.186%2C7.75-17.625-23.718c.764-1.607%2C1.526-3.2%2C2.345-4.782%2C12.316-23.79%2C30.94-45.024%2C57.156-61.563%2C1.988-.446%2C3.987-.868%2C6-1.25%2C15.965%2C10.75%2C53.22%2C37.75%2C53.22%2C37.75l-12.346-40.905v.002ZM335.593%2C83.722c31.624%2C22.824%2C58.832%2C52.246%2C77.188%2C87.5-3.304%2C3.178-8.728%2C8.14-14.907%2C13.686-5.072-8.723-10.825-17.47-17.31-26.22-18.905-25.494-39.566-45.996-61.158-62.03%2C5.793-4.68%2C11.46-9.222%2C16.188-12.937h0ZM91.813%2C93.815c-7.594%2C8.932-14.254%2C18.618-19.876%2C28.906l-6.688-9c7.668-7.166%2C16.218-13.62%2C25.5-19.282.35-.214.71-.414%2C1.063-.626v.002ZM40.937%2C143.658l19.062%2C6.094c-6.742%2C19.452-10.13%2C39.89-10.53%2C60.47-.04-.085-.086-.168-.126-.25-8.156-17.232-13.81-34.135-16.53-50.376%2C2.316-5.497%2C5.046-10.808%2C8.124-15.938ZM23.687%2C196.846c2.588%2C7.178%2C5.518%2C14.227%2C8.78%2C21.125%2C5.833%2C12.32%2C12.784%2C24.582%2C20.657%2C36.655%2C1.034%2C5.658%2C2.275%2C11.277%2C3.72%2C16.844%2C4.967%2C19.042%2C12.262%2C37.398%2C21.72%2C54.655-43.19-45.79-58.08-90.447-54.876-129.28h0ZM429.717%2C214.283c4.823%2C17.464%2C7.594%2C36%2C7.938%2C55.532-2.115%2C14.63-6.24%2C28.865-12.562%2C42.375.395-2.295.74-4.602%2C1.03-6.937%2C3.503-28.023-.497-58.67-13.374-90.25l16.97-.72h-.002ZM85.313%2C297.188c21.512%2C24.926%2C46.452%2C48.21%2C73%2C68.5%2C24.674%2C18.86%2C50.713%2C35.157%2C76.81%2C47.625-32.876-2.213-62.096-14.434-86.81-33.28-27.445-20.928-49.14-50.188-63-82.844h0ZM427.593%2C344.97c-.803%2C2.886-1.646%2C5.761-2.53%2C8.624-8.284%2C26.728-21.605%2C43.83-38.345%2C54.312-12.555%2C7.862-27.34%2C12.04-43.875%2C12.906%2C5.973-2.924%2C11.756-6.222%2C17.313-9.875%2C12.958-8.522%2C24.402-18.87%2C34.03-30.687%2C13.3-10.688%2C24.41-22.53%2C33.407-35.28Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-rendingFrenzy: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20470.093%20476.752%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M338.72%2C0c-46.192%2C28.665-87.92%2C57.815-125.188%2C87.345-28.504-20.858-59.194-41.493-92.094-61.908%2C27.144%2C27.17%2C51.856%2C51.637%2C75.657%2C75.218-12.494%2C10.31-24.464%2C20.64-35.875%2C31.033C118.592%2C99.55%2C71.478%2C67.818%2C19.876%2C36.563c43.876%2C42.25%2C83.107%2C79.44%2C120.25%2C114.968-10.25%2C9.972-20.223%2C20.226-29.906%2C30.75-32.703-24.725-68.48-49.164-107.344-73.28%2C33.158%2C33.19%2C63.178%2C62.832%2C91.594%2C91.03C49.604%2C252.325%2C18.078%2C305.393%2C0%2C358.751c43.352-52.554%2C81.404-95.843%2C118-135.345%2C8.92%2C8.9%2C17.697%2C17.714%2C26.407%2C26.5-45.706%2C52.888-77.744%2C106.583-96.032%2C160.564%2C43.905-53.225%2C82.38-96.934%2C119.406-136.844%2C9.387%2C9.605%2C18.72%2C19.262%2C28%2C28.97-49.978%2C55.818-84.697%2C112.556-104.03%2C169.624%2C46.973-56.946%2C87.73-103.024%2C127.155-145.188%2C40.668%2C43.46%2C82.702%2C90.943%2C131.187%2C149.72-19.925-58.813-55.8-117.274-107.47-174.782%2C8.262-8.64%2C16.51-17.176%2C24.782-25.657%2C51.97%2C52.87%2C105.448%2C110.348%2C168.03%2C182.75-26.815-70.89-73.77-141.354-140.656-210.562%2C8.05-8.112%2C16.168-16.22%2C24.407-24.437%2C46.908%2C49.238%2C94.57%2C102.33%2C150.907%2C170.624-22.28-65.762-64.422-131.106-126.22-195.156%2C26.944-26.726%2C55.307-54.743%2C86.626-86.093-37.095%2C23.02-71.31%2C46.346-102.656%2C69.937-11.98-11.744-24.626-23.447-37.938-35.094%2C30.035-29.847%2C61.767-61.106%2C97.187-96.562-42.52%2C26.386-81.26%2C53.187-116.22%2C80.312-11.822-9.839-23.844-19.435-36.06-28.78C266.822%2C71.39%2C300.646%2C38.112%2C338.717.002l.003-.002ZM217.314%2C120.72c10.063%2C9.978%2C20.105%2C19.978%2C30.125%2C30-10.192%2C8.371-20.214%2C16.945-30.062%2C25.718-10.055-8.494-20.243-16.828-30.562-25%2C10.046-10.22%2C20.225-20.434%2C30.5-30.72v.002ZM267.344%2C170.78c11.128%2C11.248%2C22.165%2C22.485%2C33.157%2C33.845-9.159%2C7.335-18.191%2C14.826-27.094%2C22.47-10.528-10.215-21.271-20.207-32.22-29.97%2C8.691-8.809%2C17.41-17.59%2C26.157-26.344h0ZM164.22%2C174.656c9%2C8.656%2C17.979%2C17.334%2C26.937%2C26.033-8.795%2C8.487-17.391%2C17.176-25.782%2C26.062-9.33-8.041-18.8-15.917-28.406-23.625%2C9.11-9.65%2C18.182-19.092%2C27.25-28.47h.001ZM214.97%2C223.906c9.846%2C9.685%2C19.648%2C19.416%2C29.406%2C29.19-8.461%2C7.908-16.755%2C15.993-24.875%2C24.25-9.402-9.581-19.03-18.939-28.875-28.064%2C8.07-8.501%2C16.185-16.959%2C24.344-25.375h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-lightningStorm: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20476.969%20474%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M271.623%2C0l19%2C40.594L45.407%2C8.25l295.716%2C129.375-18.967-40.594%2C149.218%2C15.282L271.623%2C0ZM19.623%2C23.375l277.784%2C370.095-5.408-65.97%2C184.97%2C146.5-203.876-307.844%2C5.406%2C65.97L19.623%2C23.375ZM0%2C55.72l36.5%2C316.405%2C25.623-40.875%2C68.095%2C139.344-9.594-241.125-25.624%2C40.843L0%2C55.718v.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-pommelStrike: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20474.9%20475.7%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M137%2C0L62.47%2C20.98l15.9%2C55.79%2C187.13-52.82-6.7-23.95h-121.8ZM242.5%2C48l-131%2C37%2C61.1%2C216.4%2C130.9-37-61-216.4ZM295.8%2C100.9l-19.4%2C5.5%2C24%2C85%2C19.5-5.5-24.1-85ZM113.1%2C152.5l-19.5%2C5.5%2C24%2C85%2C19.5-5.4-24-85.1ZM82.2%2C180.1L0%2C203.3v54.3l96.5-27.4-14.3-50.1ZM369.6%2C199.8l-55.7%2C34.7%2C6.5%2C24.6%2C28.4-8%2C24.4%2C89.6-220.2%2C62.6c-8.4-30-16.9-60-25.3-90l27.3-7.7-6.3-22.7-70.53-3.8%2C40.83%2C39.6-108.74%2C48.9s117.34%2C4.1%2C114.34%2C4.6c-3.1.5-31.3%2C84.4-31.3%2C84.4l88-45.2%2C22.9%2C64.3%2C70.6-76.4%2C94.4%2C49.7-24.7-70.9%2C113.5-5.6-77.7-53.7%2C94.6-66.3-113.4%2C3.5%2C8.1-56.2ZM336%2C272.7l-187.3%2C52.9%2C15.7%2C55.9%2C187.2-52.9-15.6-55.9Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-rupture: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20479.424%20480.935%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C0c47.647%2C56.45%2C115.417%2C144.717%2C81.997%2C187.354%2C56.01%2C18.077%2C119.235%2C143.897%2C150.99%2C175.052%2C1.477-24.13%2C23.964-14.4%2C51.776%2C7.51%2C10.106-14.555%2C19.463-30.113%2C28.04-46.437-71.51-21.026-159.736-152.712-108.915-135.123C145.611%2C134.59%2C52.79%2C42.258.001%2C0h-.001ZM392.732.126c.013.28.022.557.035.838%2C3.71%2C31.3%2C4.355%2C64.147%2C2.094%2C97.443%2C35.58%2C48.458%2C39.525%2C120.59%2C24.836%2C190.244-11.444%2C54.268-34.302%2C107.376-64.797%2C147.394%2C23.478%2C24.646%2C40.965%2C44.89%2C40.965%2C44.89%2C56.49-99.385%2C157.33-291.34-3.133-480.808h0ZM391.867%2C129.974c-11.03%2C90.59-42.957%2C181.907-92.518%2C252.078%2C14.08%2C12.273%2C28.75%2C26.505%2C42.31%2C40.304%2C27.426-37.093%2C49.073-86.927%2C59.75-137.562%2C11.892-56.388%2C10.05-113.31-9.542-154.82h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-dazingBlow: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20477.548%20479.169%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M1.657%2C0v54.064l76.18%2C58.4%2C141.902-7.525%2C8.45%2C30.682-60.562%2C5.877%2C37.727%2C19.617-41.247%2C32.694%2C31.352-.88c-24.938%2C26.547-49.458%2C53.393-74.567%2C78.935-15.745-23.004-28.3-47.16-35.853-71.05l-4.64-14.67L7.259%2C259.294l80.737%2C80.73c-25.172%2C32.576-54.14%2C58.558-84.51%2C83l-3.486%2C2.808v4.474c0%2C14.94%2C4.783%2C27.6%2C13.722%2C36.057%2C8.94%2C8.457%2C21.28%2C12.248%2C34.582%2C12.247h4.7l2.802-3.773c23.665-31.872%2C49.886-60.988%2C82.572-84.426l83.473%2C83.47%2C73.14-73.142-14.67-4.637c-25.647-8.106-50.247-21.622-73.74-38.29%2C29.318-28.954%2C59.594-57.008%2C88.91-85.312l8.352%2C48.865%2C86.038%2C9.654%2C42.137%2C148.15h45.53v-58.333l-51.237-117.03-99.217-1.42-13.776-47.277c71.532-70.573%2C134.693-144.153%2C159.935-238.356l3.15-11.76h-13.41l-1.188.317c-72.727%2C19.486-131.702%2C59.128-184.81%2C106.556l.353-33.556-32.925%2C44.076-11.1-42.062-124.79-10.03L65.683%2C0H1.656h0ZM450.295%2C28.228c-25.662%2C78.606-80.402%2C143.39-143.707%2C206.694l-12.17-57.89-29.593%2C21.755-10.73-39.038c57.485-56.983%2C118.99-106.68%2C196.2-131.52h0ZM238.915%2C175.031l15.087%2C54.904%2C28.097-20.655%2C8.674%2C41.264c-34.216%2C33.456-70.35%2C66.784-105.384%2C101.817l-7.597%2C7.598%2C8.577%2C6.468c23.2%2C17.497%2C47.904%2C32.252%2C74.082%2C42.422l-38.603%2C38.604-81.322-81.322-6.39%2C4.323c-36.53%2C24.72-65.005%2C55.87-90.137%2C89.17-7.597-.68-13.423-3.04-17.434-6.835-4.11-3.888-6.865-9.7-7.574-18.362%2C31.536-25.61%2C62.357-53.572%2C88.947-89.65l4.768-6.47-79.02-79.016%2C38.594-38.6c9.494%2C24.59%2C23.172%2C48.765%2C39.827%2C71.45l6.44%2C8.777%2C7.7-7.698c38.51-38.51%2C74.93-79.613%2C112.665-118.19h.003Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-exposeArmor: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20444.845%20479.125%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M140.5%2C0l16.156%2C53.81L62.282%2C4.905l63.063%2C77.625L12.062%2C101.686l113.28%2C19.625-59.718%2C75.19%2C65.03-33.407-1.78%2C58.843%2C19.844-37.344v-64.218l.75-1.75%2C31.906-74.75L140.499%2C0h.001ZM286.75%2C0l-36.905%2C39.623%2C33.342%2C79.03.75%2C1.75v69.723l15.5%2C29.187-1.625-54.436%2C65.532%2C34.062-63.064-77.625%2C113.28-19.624-113.28-19.156L363.343%2C4.909l-92.44%2C47.906L286.748.005l.002-.005ZM216.155%2C7.84l-49.186%2C114.5v153.5l34.936%2C34.94c2.916-65.435%2C7.976-128.936%2C15.25-187.72%2C7.606%2C61.433%2C12.744%2C128.775%2C15.532%2C198l32.625-32.624V122.342L216.156%2C7.842v-.002ZM0%2C191.125l37.344%2C94.062%2C193.905%2C193.938h30.813c-66.34-68.503-128.483-139.002-180.625-205.875%2C74.705%2C58.246%2C155.104%2C130.333%2C231.312%2C205.874h31.063L93.688%2C228.968%2C0%2C191.124h0ZM444.845%2C191.125l-93.626%2C37.812-115.594%2C115.593%2C18.156%2C18.125c36.278-32.102%2C72.315-62.265%2C107.125-89.406-27.302%2C35.015-57.36%2C71.02-89.31%2C107.217l20.339%2C20.314%2C115.532-115.53%2C37.375-94.126h.003ZM152.935%2C427.218l-51.906%2C51.906h28.594c12.594-12.481%2C25.292-24.857%2C38.094-37.125l-14.78-14.783-.002.002ZM192.31%2C466.624c-3.995%2C4.173-8.003%2C8.34-12.03%2C12.5h24.53l-12.5-12.5Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-bloodlust: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20469.529%20473.655%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M218.998%2C0c103.702%2C97.21%2C183.912%2C194.304%2C250.529%2C282.09v-112.404c-7.062-6.39-14.155-12.677-21.343-18.844%2C2.986-3.465%2C4.813-7.972%2C4.813-12.906%2C0-10.927-8.855-19.78-19.782-19.78-6.285%2C0-11.875%2C2.96-15.5%2C7.53-43.25-34.448-88.287-64.956-134-91.312%2C1.006-2.025%2C1.594-4.274%2C1.594-6.688%2C0-8.35-6.773-15.125-15.125-15.125-5.416%2C0-10.142%2C2.848-12.813%2C7.126C244.717%2C12.86%2C231.922%2C6.296%2C218.996%2C0h.002ZM79.435%2C18.123c5.11%2C5.177%2C10.18%2C10.36%2C15.22%2C15.593-4.225%2C1.173-7.38%2C4.29-8.345%2C9-1.812%2C8.844%2C4.727%2C19.92%2C14.625%2C24.72%2C3.642%2C1.766%2C7.237%2C2.42%2C10.406%2C2.124-2.535%2C4.11-4%2C8.974-4%2C14.157%2C0%2C14.89%2C12.05%2C26.938%2C26.94%2C26.938%2C8.68%2C0%2C16.41-4.097%2C21.343-10.47%2C88.686%2C101.2%2C165.598%2C208.4%2C235.156%2C306.72-7.4%2C6.047-12.126%2C15.23-12.126%2C25.53%2C0%2C18.213%2C14.756%2C32.97%2C32.97%2C32.97%2C6.274%2C0%2C12.13-1.77%2C17.123-4.813%2C3.086%2C4.354%2C6.193%2C8.76%2C9.25%2C13.063h31.532v-114.345c-41.357-69.223-154.77-193.34-184.533-213.31%2C24.14%2C33.4%2C45.1%2C64.336%2C64.813%2C94.03C262.319%2C144.28%2C166.366%2C60.442%2C79.434%2C18.124h0ZM51.215%2C33.373c-1.919.092-3.8.571-5.53%2C1.406-7.176%2C3.433-10.214%2C12.042-6.78%2C19.22%2C3.432%2C7.175%2C12.04%2C10.213%2C19.218%2C6.78%2C7.176-3.433%2C10.214-12.042%2C6.78-19.22-2.574-5.38-8.08-8.445-13.687-8.186h-.001ZM406.965%2C53.748c-1.454.05-2.858.357-4.155.968-6.918%2C3.256-8.265%2C13.625-3%2C23.156%2C5.265%2C9.53%2C15.144%2C14.632%2C22.063%2C11.375%2C6.918-3.258%2C8.264-13.627%2C3-23.157-4.278-7.744-11.6-12.56-17.907-12.344v.002ZM255.841%2C88.998c-1.983.123-3.845.72-5.436%2C1.78-6.366%2C4.236-6.168%2C14.688.437%2C23.344%2C6.607%2C8.655%2C17.104%2C12.236%2C23.47%2C8s6.168-14.688-.438-23.344c-4.954-6.492-12.078-10.155-18.03-9.78h-.003ZM0%2C127.31c91.018%2C100.043%2C158.696%2C190.397%2C212%2C271.595-8.48-1.364-18.445%2C4.948-20.25%2C13.594-6.22%2C29.777%2C12.896%2C53.913%2C47.593%2C61.155h125.657C267.028%2C333.914%2C130.218%2C190.704%2C0%2C127.31ZM30.03%2C229.155c-3.807.078-7.195%2C1.333-9.406%2C3.844-5.052%2C5.738-2.15%2C15.785%2C6.47%2C22.436%2C8.62%2C6.65%2C19.697%2C7.396%2C24.75%2C1.656%2C5.052-5.74%2C2.182-15.786-6.438-22.437-4.85-3.74-10.48-5.6-15.375-5.5h0ZM77.218%2C267.28c-14.89%2C0-26.937%2C12.048-26.937%2C26.938s12.047%2C26.968%2C26.936%2C26.968%2C26.97-12.08%2C26.97-26.97-12.08-26.936-26.97-26.936h0ZM156.938%2C370.75c-10.928%2C0-19.782%2C8.853-19.782%2C19.78s8.854%2C19.78%2C19.78%2C19.78%2C19.782-8.853%2C19.782-19.78-8.854-19.78-19.78-19.78Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-guardian: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20421.396%20474.247%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M18.5.005c-4.548-.098-8.965%2C1.524-12.37%2C4.541C-1.378%2C11.178-2.088%2C22.64%2C4.544%2C30.148c4.394%2C4.974%2C10.906%2C6.945%2C16.986%2C5.792l57.838%2C65.475-50.373%2C44.498%2C24.188%2C27.38c9.69-21.368%2C22.255-39.484%2C37.427-54.65l6.91%2C36.188c25.092-6.29%2C49.834-10.563%2C74.366-12.873l-23.912-27.07-38.66-12.483c17.117-12.9%2C36.734-22.97%2C58.62-30.474l-24.19-27.385-50.37%2C44.496L35.454%2C23.472c1.79-5.835.617-12.43-3.72-17.34C28.378%2C2.323%2C23.575.099%2C18.499.004h0ZM402.897.005c-5.075.096-9.876%2C2.319-13.232%2C6.127-4.338%2C4.91-5.514%2C11.506-3.723%2C17.343l-57.92%2C65.568-50.37-44.497-24.188%2C27.385c21.884%2C7.504%2C41.5%2C17.573%2C58.62%2C30.472l-38.66%2C12.485-23.255%2C26.324c24.71%2C1.863%2C49.367%2C5.706%2C74.118%2C11.46l6.498-34.03c15.173%2C15.166%2C27.74%2C33.282%2C37.43%2C54.65l24.185-27.38-50.372-44.498%2C57.838-65.475c6.08%2C1.153%2C12.593-.818%2C16.987-5.792%2C6.63-7.508%2C5.92-18.97-1.586-25.602-3.405-3.017-7.822-4.639-12.37-4.541h0ZM216.472%2C158.515c-39.56-.098-79.467%2C5.226-120.633%2C16.095-2.046%2C90.448%2C34.484%2C209.35%2C118.47%2C259.905%2C81.295-49.13%2C122.402-169.902%2C120.552-259.914-39.75-10.496-78.91-15.988-118.39-16.086h0ZM99.296%2C312.015L12.43%2C410.353.23%2C474.247l61.9-19.994%2C68.49-77.535c-12.86-20.108-23.246-42.03-31.324-64.703h0ZM327.499%2C318.125c-8.69%2C22.238-19.577%2C43.634-32.706%2C63.142l64.473%2C72.986%2C61.898%2C19.994-12.2-63.894-81.466-92.23v.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-warBanner: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20387.189%20381.543%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M375.84%2C17.553c-3.72.82-7.68%2C3.38-10.87%2C7.9-208.61-97.68-93.19%2C125.01-313.82%2C16.25C31.2%2C71.993%2C9.3%2C162.803%2C0%2C203.173c217.63%2C107.29%2C105.2-109.94%2C302.28-22.13l-79.78%2C200.5c8.98-.19%2C17.83-.9%2C26.53-2.08L385.78%2C35.073c4.33-12.66-1.98-19.3-9.94-17.52ZM309.44%2C162.983c-10.69-34.92%2C11.17-101.9%2C47.27-118.84l-47.27%2C118.84Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-aegis: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20482.039%20482.039%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M240.385%2C0l-9.232%2C1.437-62.868%2C9.765%2C3.586%2C23.08c-12.948%2C4.269-25.473%2C9.727-37.416%2C16.303l-14.51-18.03-7.28%2C5.86-49.56%2C39.89%2C14.163%2C17.594c-9.221%2C10.234-17.449%2C21.321-24.573%2C33.111l-20.78-8.046-3.374%2C8.715-22.976%2C59.325%2C20.26%2C7.846c-2.928%2C13.637-4.537%2C27.525-4.805%2C41.47l-21.02%2C3.267%2C11.2%2C72.1%2C20.634-3.206c4.348%2C13.326%2C9.953%2C26.209%2C16.74%2C38.474l-16.165%2C13.012%2C45.75%2C56.84%2C15.858-12.764c10.55%2C9.461%2C21.999%2C17.869%2C34.183%2C25.104l-7.27%2C18.773%2C68.042%2C26.347%2C7.266-18.76c13.846%2C2.856%2C27.937%2C4.357%2C42.074%2C4.482l3.115%2C20.05%2C72.1-11.2-3.168-20.386c13.329-4.499%2C26.199-10.26%2C38.433-17.205l13.075%2C16.24%2C56.84-45.747-13.315-16.543c9.2-10.494%2C17.369-21.848%2C24.394-33.906l20.11%2C7.787%2C26.35-68.038-20.63-7.988c2.676-13.521%2C4.059-27.267%2C4.133-41.05l22.29-3.462-1.434-9.234-9.765-62.866-22.85%2C3.55c-4.412-12.951-10.019-25.464-16.746-37.378l18.103-14.57-5.86-7.28-39.89-49.56-18.28%2C14.715c-10.177-8.962-21.17-16.953-32.835-23.868l8.562-22.112-8.713-3.375-59.326-22.973-8.564%2C22.12c-13.151-2.713-26.525-4.202-39.95-4.45-.166-.004-.33-.002-.494-.005L240.387.003l-.002-.003ZM224.787%2C21.337l3.108%2C20.008-35.164%2C5.463-3.11-20.006%2C35.166-5.465ZM303.684%2C29.767l33.184%2C12.85-7.312%2C18.882-33.184-12.853%2C7.31-18.88h.002ZM246.905%2C41.98c10.2.34%2C20.456%2C1.458%2C30.687%2C3.406l-5.4%2C13.94%2C68.042%2C26.35%2C5.402-13.952c8.757%2C5.376%2C17.085%2C11.42%2C24.91%2C18.08l-11.842%2C9.53%2C45.75%2C56.84%2C12.098-9.735c4.991%2C9.139%2C9.266%2C18.65%2C12.787%2C28.45l-15.443%2C2.398%2C11.2%2C72.1%2C15.98-2.483c-.232%2C10.497-1.293%2C20.96-3.174%2C31.29l-15.395-5.964-3.373%2C8.714-22.977%2C59.327%2C15.975%2C6.188c-5.507%2C9.141-11.738%2C17.825-18.633%2C25.97l-10.926-13.575-7.278%2C5.86-49.56%2C39.89%2C11.24%2C13.964c-9.468%2C5.197-19.337%2C9.624-29.514%2C13.24l-2.78-17.908-9.235%2C1.433-62.866%2C9.766%2C2.828%2C18.202c-10.853-.275-21.664-1.435-32.328-3.47l6.7-17.3-8.713-3.375-59.327-22.974-6.695%2C17.29c-9.279-5.7-18.075-12.15-26.3-19.286l14.302-11.512-5.86-7.28-39.888-49.56-14.02%2C11.285c-5.056-9.485-9.345-19.36-12.826-29.53l17.688-2.75-1.436-9.232-9.765-62.867-17.182%2C2.67c.388-10.657%2C1.63-21.265%2C3.715-31.723l15.826%2C6.128%2C26.35-68.04-15.258-5.91c5.568-8.893%2C11.829-17.333%2C18.726-25.24l10.118%2C12.57%2C56.84-45.75-9.778-12.147c9.156-4.855%2C18.672-8.996%2C28.465-12.387l2.366%2C15.234%2C72.1-11.202-2.324-14.96v-.003ZM117.105%2C58.834l12.694%2C15.772-27.723%2C22.312-12.694-15.77%2C27.723-22.316v.002ZM400.758%2C89.482l22.313%2C27.722-15.774%2C12.696-22.312-27.72%2C15.773-12.697h0ZM316.514%2C131.482c-1.922-.016-3.843.046-5.76.187-23.033%2C1.7-45.933%2C15.003-61.29%2C44.006l-7.906%2C14.933-8.445-14.636c-20.227-35.054-56.5-47.824-87.093-41.81-30.592%2C6.012-55.328%2C29.383-53.947%2C72.85%2C1.278%2C40.24%2C29.05%2C67.447%2C63.59%2C97.54%2C30.045%2C26.176%2C64.672%2C53.784%2C85.763%2C93.478%2C22.093-39.507%2C57.856-65.95%2C88.133-91.453%2C17.386-14.644%2C33.017-28.982%2C43.86-44.736%2C10.846-15.755%2C17.13-32.66%2C16.456-54.243-1.262-40.46-26.58-66.478-56.316-73.916-5.576-1.402-11.298-2.14-17.047-2.2h.002ZM42.591%2C145.143l18.88%2C7.31-12.85%2C33.186-18.88-7.31s12.85-33.186%2C12.85-33.186ZM455.241%2C189.779l5.463%2C35.164-20.01%2C3.11-5.462-35.164%2C20.01-3.11h-.001ZM41.341%2C254.079l5.465%2C35.165-20.006%2C3.108-5.465-35.163%2C20.007-3.11h0ZM433.187%2C296.409l18.88%2C7.312-12.85%2C33.185-18.88-7.312%2C12.85-33.186h0ZM74.461%2C352.11l22.313%2C27.723-15.775%2C12.695-22.312-27.722%2C15.774-12.696ZM379.735%2C385.13l12.695%2C15.77-27.723%2C22.316-12.695-15.774%2C27.723-22.312ZM152.42%2C420.36l33.186%2C12.852-7.31%2C18.88-33.185-12.85%2C7.31-18.882h-.001ZM289.082%2C435.233l3.11%2C20.01-35.164%2C5.463-3.11-20.008%2C35.164-5.465h0Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-unbreakable: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20434.08%20473.916%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M151.41%2C0l13.176%2C64.625h41.957l-.002%2C18.69h-38.145l7.635%2C37.438h82.63l7.45-37.44h-40.88v-18.687h44.597L282.683.016%2C151.41.002v-.002ZM292.82%2C44.832l-18.823%2C94.608h-113.23l-18.99-93.127L0%2C95.989l148.973%2C247.342-60.967-203.168%2C17.9-5.37%2C39.247%2C130.784%2C72.35%2C10.62%2C71.53-10.696%2C39.094-130.664%2C17.905%2C5.358-60.018%2C200.587%2C148.066-244.865-141.26-51.085ZM283.112%2C285.282l-65.582%2C9.81-66.447-9.754%2C56.59%2C188.578v-152.847h18.69v152.847h.31l56.44-188.633h-.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-adrenaline: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20473.64%20473.639%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M63.891%2C0c46.3%2C37.518%2C62.25%2C65.617%2C53.53%2C93.102C79.824%2C63.87%2C40.104%2C47.112%2C0%2C32.598v36.608c36.057%2C8.926%2C71.558%2C21.116%2C104.804%2C46.54-13.053%2C16.635-34.362%2C33.918-62.75%2C53.73l81.99%2C35.407c-.466%2C3.448-.636%2C6.93-.507%2C10.407.573%2C15.082%2C7.218%2C28.014%2C16.3%2C38.914%2C7.177%2C8.615%2C15.9%2C16.206%2C25.077%2C23.468l-63.877%2C46.57L0%2C265.522v45.738c112.43%2C11.546%2C144.12%2C112.475%2C0%2C135.832v26.547h22.818l115.01-54.788c-46.436-55.056-3.446-101.025%2C44.4-127.89%2C20.244%2C15.41%2C39.46%2C30.752%2C47.838%2C48.93l8.487%2C18.41%2C8.485-18.41c3.777-8.196%2C9.772-15.81%2C17.055-23.118l15.303%2C115.51c49.028-28.366%2C133.015%2C6.997%2C141.394%2C41.355h52.85v-4.72l-68.87-83.24c-66.362%2C44.197-111.586-5.474-118.148-88.37%2C5.94-4.64%2C12.094-9.252%2C18.2-13.913%2C10.46-7.983%2C20.702-16.163%2C29.213-25.492%2C35.543%2C15.528%2C46.467%2C41.64%2C24.895%2C79.65l114.71-8.654v-43.199l-80.105%2C17.2c-5.02-24.163-5.625-41.7%2C22.13-65.864-21.682-3.325-43.248-5.917-64.68-7.045%2C1.468-4.655%2C2.386-9.55%2C2.58-14.7v-.002c.274-7.05-.69-14.093-2.848-20.81%2C32.581-10.003%2C64.05-23.323%2C93.912-39.75l-94.375-56.003c37.818-26.36%2C78.284-37.675%2C123.385-49.07V0h-70.675c-19.42%2C39.684-67.117%2C76.64-126.712%2C112.08%2C38.692%2C3.463%2C133.353%2C27.43%2C62.64%2C61.05-9.054-10.854-21.457-18.803-34.85-22.495-13.712-3.78-28.856-3.107-42.388%2C3.856-8.82%2C4.54-16.73%2C11.757-23.1%2C21.516-6.373-9.76-14.283-16.977-23.103-21.515-6.766-3.48-13.933-5.39-21.125-5.954-7.19-.566-14.406.21-21.262%2C2.1-16.032%2C4.418-30.65%2C14.93-39.792%2C29.236l-36.323-17.405c29.32-43.383%2C61.55-71.547%2C96.914-85.156C158.47%2C49.739%2C135.803%2C31.375%2C120.657.003h-56.766v-.003ZM189.124%2C167.023c1.23-.02%2C2.453.02%2C3.67.113%2C4.87.377%2C9.63%2C1.668%2C14.106%2C3.97%2C8.953%2C4.607%2C17.226%2C13.358%2C22.86%2C29.026l8.793%2C24.455%2C8.792-24.455c5.633-15.668%2C13.907-24.42%2C22.86-29.025%2C8.95-4.606%2C19.04-5.164%2C28.87-2.455%2C19.66%2C5.418%2C36.654%2C23.902%2C35.82%2C45.928-.386%2C10.132-4.602%2C18.803-11.982%2C27.66-7.38%2C8.86-17.894%2C17.5-29.428%2C26.302-18.87%2C14.403-40.57%2C29.167-54.933%2C49.314-14.363-20.146-36.062-34.91-54.933-49.314-11.533-8.803-22.048-17.443-29.428-26.3-7.38-8.86-11.597-17.53-11.98-27.66-.836-22.026%2C16.156-40.51%2C35.815-45.93%2C3.686-1.015%2C7.41-1.572%2C11.096-1.628h.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-goodBoys: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20408.373%20471.609%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M88.934%2C0l19.276%2C96.028c-12.818%2C11.406-22.692%2C26.194-29.42%2C43.24L0%2C130.63l64.453%2C63.37c-2.586%2C23.357.03%2C49.043%2C8.258%2C74.657l-42.033%2C54.215%2C68.018-1.02c15.12%2C22.18%2C33.708%2C39.877%2C53.62%2C51.962l10.68%2C90.296%2C40.932-68.666c17.495%2C4.93%2C35.126%2C5.94%2C51.883%2C2.508l63.63%2C73.657-19.257-95.92c12.855-11.425%2C22.75-26.248%2C29.487-43.34l78.702%2C8.628-68.175-67.03c.046-20.525-3.275-42.147-10.17-63.734l47.664-61.48-77.165%2C1.158c-12.764-18.617-27.715-34.38-43.844-46.768l-11.306-95.627-40.964%2C68.72c-17.463-4.908-35.06-5.91-51.786-2.485L88.934%2C0ZM190.732%2C93.45c44.422-.03%2C92.8%2C34.067%2C119.69%2C89.082%2C33.42%2C68.38%2C21.35%2C143.925-26.5%2C171.895%2C26.868-38.838%2C28.765-101.318.618-158.906-28.146-57.587-78.34-93.93-125.113-95.814%2C9.96-4.224%2C20.515-6.248%2C31.305-6.256h0ZM159.749%2C120.43c41.018-.062%2C85.61%2C31.394%2C110.477%2C82.274%2C31.83%2C65.127%2C19.096%2C137.01-28.506%2C160.9-.988.494-1.986.956-2.988%2C1.403-43.015-2.403-88.815-35.974-114.7-88.938-25.887-52.963-24.482-110.224-.3-146.35.96-.542%2C1.933-1.062%2C2.916-1.56%2C10.413-5.224%2C21.617-7.712%2C33.1-7.73h.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-bulwark: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20397.95%20468.351%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M194.71.007C133.165.412%2C71.063%2C9.547%2C7.24%2C27.819l-6.467%2C1.844-.28%2C6.72c-6.405%2C147.46%2C49.12%2C346.625%2C192.28%2C429.28l4.688%2C2.688%2C4.656-2.688c139.03-80.27%2C201.88-281.764%2C195.376-429.28l-.125-5.907-6.624-2.657C327.114%2C9.604%2C264.174.169%2C200.682.007c-1.984-.005-3.984-.013-5.97%2C0h-.002ZM195.054%2C18.632c1.86-.013%2C3.73-.006%2C5.593%2C0%2C59.47.15%2C118.43%2C8.782%2C178.28%2C25.343%2C3.956%2C139.034-57.428%2C327.223-181.468%2C402.625C69.369%2C368.954%2C14.909%2C183.58%2C19.021%2C44.006c60.047-16.615%2C118.307-25.005%2C176.034-25.373h-.001ZM198.835%2C35.193l-28.438%2C126.72-45.312-25.313%2C26.97%2C48.25-92.5%2C26.157%2C91.655%2C25.937-26.688%2C47.72%2C45.625-25.5%2C28.657%2C127.688%2C28.655-127.625%2C45.875%2C25.656-26.72-47.814%2C91.845-26-92.75-26.25%2C27.063-48.406-45.5%2C25.438-28.437-126.658Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-wideSwing: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20470.807%20466.219%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M213.314.011C131.224.711%2C50.444%2C37.746%2C0%2C103.636c26.08-22.208%2C57.052-38.305%2C90.063-47.5C27.823%2C109.84-4.52%2C195.226%2C10.437%2C281.416c1.081-27.888%2C7.632-55.293%2C19.28-80.655%2C1.154%2C51.488%2C18.492%2C102.143%2C52.22%2C143.344-38.003-76.004-22.756-193.02%2C39.844-240.313%2C11.844-6.056%2C24.272-10.893%2C37.093-14.436%2C107.067-29.575%2C216.937%2C36.285%2C245.627%2C146.655%2C16.562%2C63.723%2C2.315%2C128.343-33.25%2C177.313-4.68%2C4.68-9.852%2C8.942-15.47%2C12.875-5.947-1.8-11.324-4.187-16.03-7.22-12.01-7.737-19.51-19.947-20.656-33.624-2.096-24.99%2C14.13-53.014%2C46.53-80.53l-29.717-22.095c-16.038%2C39.73-38.954%2C61.946-64.188%2C65.186-13.836%2C1.777-27.648-2.677-39.03-11.844-8.41-6.77-15.634-16.017-21.5-27.406-16.69%2C19.306-20.72%2C43.155-16%2C67.28%2C5.483%2C28.04%2C23.502%2C55.683%2C47.28%2C72.252%2C21.973%2C15.312%2C49.595%2C21.202%2C74.813%2C16.375%2C9.043-1.732%2C17.75-4.832%2C25.843-9.344%2C18.055-8.925%2C34.396-20.126%2C47.25-35%2C65.17-57.975%2C96.26-151.12%2C72.47-242.658C434.864%2C69.926%2C340.087-.707%2C236.814.386c-1.612.017-3.23.042-4.845.094-6.22-.368-12.44-.523-18.656-.47h.001ZM122.657%2C145.136c-12.53-.06-18.07%2C15.934-6.063%2C23.656l188.688%2C133.032c4.29-6.45%2C8.42-14.145%2C12.25-23.187l-185.22-130.596c-3.503-2.022-6.764-2.89-9.655-2.905Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-allTolerances: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20466%20438.765%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M233%2C0c-18.38%2C16.053-47.185%2C33.518-77.79%2C49.72-31.429%2C16.64-63.92%2C31.224-88.325%2C39.985%2C1.978%2C11.276%2C8.625%2C32.908%2C19.18%2C58.363%2C12.599%2C30.386%2C29.991%2C66.674%2C48.845%2C101.404%2C18.854%2C34.731%2C39.218%2C67.959%2C57.514%2C92.11%2C9.148%2C12.075%2C17.812%2C21.879%2C25.164%2C28.322%2C7.351%2C6.443%2C13.412%2C8.861%2C15.412%2C8.861s8.06-2.418%2C15.412-8.861%2C16.016-16.247%2C25.164-28.322c18.296-24.151%2C38.66-57.379%2C57.514-92.11%2C18.854-34.73%2C36.246-71.018%2C48.846-101.404%2C10.554-25.455%2C17.201-47.087%2C19.18-58.363-24.406-8.761-56.897-23.345-88.327-39.985-30.604-16.202-59.41-33.667-77.789-49.72ZM100.975%2C9.716C68.995%2C25.706%2C36.817%2C41.638%2C4.943%2C57.732l-4.943%2C2.496v5.537c0%2C11%2C4.334%2C26.468%2C10.46%2C44.848%2C6.127%2C18.38%2C14.22%2C38.641%2C22.49%2C55.178l16.1-8.05c-7.73-15.463-15.637-35.2-21.51-52.821-4.531-13.591-7.698-26.391-8.933-33.895%2C29.99-15.11%2C60.25-30.124%2C90.418-45.209l-8.05-16.1h0ZM365.025%2C9.716l-8.05%2C16.1c30.169%2C15.085%2C60.429%2C30.1%2C90.418%2C45.21-1.234%2C7.503-4.402%2C20.303-8.932%2C33.894-5.874%2C17.62-13.78%2C37.358-21.512%2C52.822l16.102%2C8.049c8.268-16.537%2C16.362-36.799%2C22.488-55.178%2C6.127-18.381%2C10.461-33.848%2C10.461-44.848v-5.537l-4.943-2.496c-31.874-16.094-64.053-32.026-96.032-48.016h0ZM233%2C46.088l6.777%2C7.755c7.366%2C8.43%2C27.707%2C20.13%2C49.31%2C29.832%2C21.605%2C9.702%2C44.603%2C18.144%2C59.12%2C23.682l5.793%2C2.21v6.198c0%2C6.305-1.831%2C12.916-4.621%2C21.258s-6.69%2C18.085-11.389%2C28.78c-9.396%2C21.389-21.982%2C46.542-35.078%2C70.706-13.096%2C24.165-26.675%2C47.295-38.152%2C64.67-5.739%2C8.688-10.92%2C15.916-15.477%2C21.313-2.278%2C2.698-4.372%2C4.938-6.594%2C6.808-2.221%2C1.87-4.282%2C3.976-9.265%2C4.211l-.424.02-.424-.02c-4.983-.235-7.044-2.34-9.265-4.21-2.222-1.87-4.316-4.11-6.594-6.81-4.556-5.396-9.738-12.624-15.477-21.312-11.477-17.375-25.056-40.505-38.152-64.67-13.096-24.164-25.682-49.317-35.078-70.707-4.698-10.694-8.599-20.437-11.389-28.779-2.79-8.342-4.621-14.953-4.621-21.258v-6.199l5.793-2.209c14.517-5.538%2C37.515-13.98%2C59.12-23.682%2C21.603-9.702%2C41.944-21.402%2C49.31-29.832l6.777-7.755ZM233%2C72.242c-12.288%2C10.561-30.065%2C19.479-48.713%2C27.853-19.6%2C8.803-38.986%2C16.077-53.34%2C21.506.608%2C2.68%2C1.504%2C6.005%2C2.744%2C9.713%2C2.523%2C7.542%2C6.247%2C16.888%2C10.8%2C27.25%2C9.103%2C20.724%2C21.517%2C45.56%2C34.421%2C69.37%2C12.904%2C23.809%2C26.325%2C46.638%2C37.348%2C63.325%2C5.511%2C8.344%2C10.454%2C15.172%2C14.21%2C19.622%2C1.073%2C1.27%2C1.707%2C1.816%2C2.53%2C2.654.823-.838%2C1.457-1.384%2C2.53-2.654%2C3.756-4.45%2C8.699-11.278%2C14.21-19.622%2C11.023-16.687%2C24.444-39.516%2C37.348-63.326s25.318-48.645%2C34.422-69.369c4.552-10.362%2C8.276-19.708%2C10.799-27.25%2C1.074-3.191%2C1.989-6.432%2C2.744-9.713-14.354-5.429-33.74-12.703-53.34-21.506-18.648-8.374-36.425-17.292-48.713-27.853h0ZM176.104%2C376.24l-14.208%2C11.05s9.676%2C12.468%2C22.915%2C25.01c13.238%2C12.543%2C29.456%2C26.465%2C48.189%2C26.465s34.95-13.922%2C48.19-26.465c13.238-12.542%2C22.914-25.01%2C22.914-25.01l-14.208-11.05s-8.991%2C11.534-21.085%2C22.992c-12.095%2C11.458-27.878%2C21.533-35.811%2C21.533s-23.716-10.075-35.81-21.533c-12.095-11.458-21.086-22.992-21.086-22.992Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-rewatch: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20473.412%20473.421%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M235.643.005C163.607.368%2C92.653%2C33.539%2C46.463%2C95.975c-69.83%2C94.39-59.125%2C223.32%2C19.85%2C304.993l-37.238%2C50.332%2C151.22-22.613-22.616-151.219-43.137%2C58.308c-44.08-54.382-47.723-133.646-4.16-192.53%2C30.676-41.466%2C77.863-63.504%2C125.758-63.753%2C16.507-.087%2C32.924%2C2.433%2C48.645%2C7.467l-6.963-46.55c-23.402-4.768-47.49-5.106-71.017-.997-59.232%2C7.322-113.994%2C39.918-148.157%2C91.215C94.298%2C64.738%2C162.422%2C24.71%2C234.691%2C22.884c16.676-.418%2C33.34%2C1.207%2C49.62%2C4.84l48.608-7.268C301.779%2C6.55%2C268.599-.164%2C235.645.003l-.002.002ZM448.573%2C22.06l-151.217%2C22.61%2C22.614%2C151.22%2C41.126-55.588c42.204%2C54.29%2C45.092%2C132.048%2C2.187%2C190.043-40.22%2C54.367-108.82%2C75.32-170.19%2C57.566l6.522%2C43.598c28.597%2C5.504%2C58.07%2C4.454%2C86.203-3.07%2C37.448-5.957%2C73.34-22.05%2C103.16-47.728-49.196%2C54.65-122.615%2C77.514-191.744%2C64.34l-55.8%2C8.344c99.03%2C43.7%2C218.402%2C14.77%2C285.51-75.938%2C69.13-93.445%2C59.34-220.743-17.483-302.53l39.114-52.866h-.002Z%22%2F%3E%0A%3C%2Fsvg%3E');
+  --icon-chat: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201504.002%201317.441%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2030.5.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.4%20Build%203)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M0%2C928.002C0%2C998.721%2C57.279%2C1056.003%2C128.001%2C1056.003h192v197.439c0%2C35.52%2C28.8%2C63.999%2C63.999%2C63.999%2C17.952%2C0%2C34.209-7.359%2C45.759-19.2l242.241-242.238h704.001c70.719%2C0%2C128.001-57.279%2C128.001-128.001l-.003-800.001c0-70.719-57.279-128.001-128.001-128.001L128.001.003C57.279.003%2C0%2C57.282%2C0%2C128.001v800.001h0ZM384%2C560.001c0-44.16%2C35.841-80.001%2C80.001-80.001s80.001%2C35.841%2C80.001%2C80.001-35.841%2C80.001-80.001%2C80.001-80.001-35.841-80.001-80.001ZM672%2C560.001c0-44.16%2C35.841-80.001%2C80.001-80.001s80.001%2C35.841%2C80.001%2C80.001-35.841%2C80.001-80.001%2C80.001-80.001-35.841-80.001-80.001ZM960%2C560.001c0-44.16%2C35.841-80.001%2C80.001-80.001s80.001%2C35.841%2C80.001%2C80.001-35.841%2C80.001-80.001%2C80.001-80.001-35.841-80.001-80.001Z%22%2F%3E%0A%3C%2Fsvg%3E');
+}
+@layer modifiers {
+  icon,
+  .icon {
+    --icon: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M111.82%2C60.419c-26.177%2C4.938-46.869%2C25.364-52.226%2C51.388-4.951-26.164-25.377-46.844-51.414-52.201%2C26.177-4.951%2C46.869-25.377%2C52.214-51.414%2C4.938%2C26.177%2C25.39%2C46.882%2C51.427%2C52.226Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: var(--color, currentColor);
+    mask-image: var(--icon);
+    mask-repeat: no-repeat;
+    mask-size: cover;
+  }
+  icon[checkmark],
+  icon.checkmark {
+    --icon: var(--icon-checkmark);
+    width: 1em;
+    height: 1em;
+  }
+  icon[maxArmor],
+  icon.maxArmor {
+    --icon: var(--icon-maxArmor);
+    width: 1.009765625em;
+    height: 1em;
+  }
+  icon[criticalChance],
+  icon.criticalChance {
+    --icon: var(--icon-criticalChance);
+    width: 1em;
+    height: 1.0921501706484642em;
+  }
+  icon[criticalDamage],
+  icon.criticalDamage {
+    --icon: var(--icon-criticalDamage);
+    width: 1em;
+    height: 1.0062893081761006em;
+  }
+  icon[spin],
+  icon.spin {
+    --icon: var(--icon-spin);
+    width: 1em;
+    height: 1em;
+  }
+  icon[blockChance],
+  icon.blockChance {
+    --icon: var(--icon-blockChance);
+    width: 0.763671875em;
+    height: 1em;
+  }
+  icon[error],
+  icon.error {
+    --icon: var(--icon-error);
+    width: 1em;
+    height: 1em;
+  }
+  icon[defeat],
+  icon.defeat {
+    --icon: var(--icon-defeat);
+    width: 1em;
+    height: 1em;
+  }
+  icon[coin],
+  icon.coin {
+    --icon: var(--icon-coin);
+    width: 1.0011547344110856em;
+    height: 1em;
+  }
+  icon[menu],
+  icon.menu {
+    --icon: var(--icon-menu);
+    width: 1em;
+    height: 1em;
+  }
+  icon[info],
+  icon.info {
+    --icon: var(--icon-info);
+    width: 1em;
+    height: 1em;
+  }
+  icon[light],
+  icon.light {
+    --icon: var(--icon-light);
+    width: 1em;
+    height: 1em;
+  }
+  icon[spinner-circle],
+  icon.spinner-circle {
+    --icon: var(--icon-spinner-circle);
+    width: 1em;
+    height: 1em;
+  }
+  icon[success],
+  icon.success {
+    --icon: var(--icon-success);
+    width: 1em;
+    height: 1em;
+  }
+  icon[maxHealth],
+  icon.maxHealth {
+    --icon: var(--icon-maxHealth);
+    width: 1.080078125em;
+    height: 1em;
+  }
+  icon[__armor],
+  icon.__armor {
+    --icon: var(--icon-__armor);
+    width: 0.7841796875em;
+    height: 1em;
+  }
+  icon[dice],
+  icon.dice {
+    --icon: var(--icon-dice);
+    width: 1em;
+    height: 1.0062893081761006em;
+  }
+  icon[spinner-inner],
+  icon.spinner-inner {
+    --icon: var(--icon-spinner-inner);
+    width: 1em;
+    height: 1em;
+  }
+  icon[stun],
+  icon.stun {
+    --icon: var(--icon-stun);
+    width: 1em;
+    height: 1.005893909626719em;
+  }
+  icon[warning],
+  icon.warning {
+    --icon: var(--icon-warning);
+    width: 1em;
+    height: 1em;
+  }
+  icon[victory],
+  icon.victory {
+    --icon: var(--icon-victory);
+    width: 0.9580078125em;
+    height: 1em;
+  }
+  icon[magicChance],
+  icon.magicChance {
+    --icon: var(--icon-magicChance);
+    width: 1.159375em;
+    height: 1em;
+  }
+  icon[damage],
+  icon.damage {
+    --icon: var(--icon-damage);
+    width: 1em;
+    height: 1.009861932938856em;
+  }
+  icon[claw],
+  icon.claw {
+    --icon: var(--icon-claw);
+    width: 1.154296875em;
+    height: 1em;
+  }
+  icon[logo-apeegg-simple],
+  icon.logo-apeegg-simple {
+    --icon: var(--icon-logo-apeegg-simple);
+    width: 1em;
+    height: 1.3176470588235294em;
+  }
+  icon[cross],
+  icon.cross {
+    --icon: var(--icon-cross);
+    width: 1em;
+    height: 1em;
+  }
+  icon[dodgeChance],
+  icon.dodgeChance {
+    --icon: var(--icon-dodgeChance);
+    width: 1.009375em;
+    height: 1em;
+  }
+  icon[logo-apeegg],
+  icon.logo-apeegg {
+    --icon: var(--icon-logo-apeegg);
+    width: 1.734375em;
+    height: 1em;
+  }
+  icon[dark],
+  icon.dark {
+    --icon: var(--icon-dark);
+    width: 1em;
+    height: 1em;
+  }
+  icon[bite],
+  icon.bite {
+    --icon: var(--icon-bite);
+    width: 1.019047619047619em;
+    height: 1em;
+  }
+  icon[block],
+  icon.block {
+    --icon: var(--icon-block);
+    width: 0.763671875em;
+    height: 1em;
+  }
+  icon[bowshot],
+  icon.bowshot {
+    --icon: var(--icon-bowshot);
+    width: 1em;
+    height: 1.0037604859704947em;
+  }
+  icon[demoShout],
+  icon.demoShout {
+    --icon: var(--icon-demoShout);
+    width: 1.0243829018663457em;
+    height: 1em;
+  }
+  icon[fillArmor],
+  icon.fillArmor {
+    --icon: var(--icon-fillArmor);
+    width: 1em;
+    height: 1.1360294117647058em;
+  }
+  icon[cheese],
+  icon.cheese {
+    --icon: var(--icon-cheese);
+    width: 1.1668372569089047em;
+    height: 1em;
+  }
+  icon[lacerate],
+  icon.lacerate {
+    --icon: var(--icon-lacerate);
+    width: 1em;
+    height: 1.0130133024869867em;
+  }
+  icon[kick],
+  icon.kick {
+    --icon: var(--icon-kick);
+    width: 1em;
+    height: 1.0394668737060042em;
+  }
+  icon[punch],
+  icon.punch {
+    --icon: var(--icon-punch);
+    width: 0.6884765625em;
+    height: 1em;
+  }
+  icon[shieldBash],
+  icon.shieldBash {
+    --icon: var(--icon-shieldBash);
+    width: 1.1842708517016398em;
+    height: 1em;
+  }
+  icon[slam],
+  icon.slam {
+    --icon: var(--icon-slam);
+    width: 1.343124165554072em;
+    height: 1em;
+  }
+  icon[stab],
+  icon.stab {
+    --icon: var(--icon-stab);
+    width: 1em;
+    height: 1.0063492063492063em;
+  }
+  icon[slash],
+  icon.slash {
+    --icon: var(--icon-slash);
+    width: 1em;
+    height: 1.0224719101123596em;
+  }
+  icon[exposed],
+  icon.exposed {
+    --icon: var(--icon-exposed);
+    width: 1em;
+    height: 1em;
+  }
+  icon[concussed],
+  icon.concussed {
+    --icon: var(--icon-concussed);
+    width: 1em;
+    height: 1em;
+  }
+  icon[wounded],
+  icon.wounded {
+    --icon: var(--icon-wounded);
+    width: 1em;
+    height: 1em;
+  }
+  icon[cog],
+  icon.cog {
+    --icon: var(--icon-cog);
+    width: 1em;
+    height: 1em;
+  }
+  icon[h1h1],
+  icon.h1h1 {
+    --icon: var(--icon-h1h1);
+    width: 1em;
+    height: 1.009861932938856em;
+  }
+  icon[h1],
+  icon.h1 {
+    --icon: var(--icon-h1);
+    width: 1em;
+    height: 1.009861932938856em;
+  }
+  icon[h2],
+  icon.h2 {
+    --icon: var(--icon-h2);
+    width: 1em;
+    height: 1em;
+  }
+  icon[chevron],
+  icon.chevron {
+    --icon: var(--icon-chevron);
+    width: 1em;
+    height: 1em;
+  }
+  icon[vulnerable],
+  icon.vulnerable {
+    --icon: var(--icon-vulnerable);
+    width: 1em;
+    height: 1em;
+  }
+  icon[bleeding],
+  icon.bleeding {
+    --icon: var(--icon-bleeding);
+    width: 1em;
+    height: 1em;
+  }
+  icon[isBlocking],
+  icon.isBlocking {
+    --icon: var(--icon-isBlocking);
+    width: 1em;
+    height: 1em;
+  }
+  icon[earth],
+  icon.earth {
+    --icon: var(--icon-earth);
+    width: 1em;
+    height: 1em;
+  }
+  icon[fire],
+  icon.fire {
+    --icon: var(--icon-fire);
+    width: 1em;
+    height: 1em;
+  }
+  icon[frost],
+  icon.frost {
+    --icon: var(--icon-frost);
+    width: 1em;
+    height: 1em;
+  }
+  icon[lightning],
+  icon.lightning {
+    --icon: var(--icon-lightning);
+    width: 1em;
+    height: 1em;
+  }
+  icon[nature],
+  icon.nature {
+    --icon: var(--icon-nature);
+    width: 1em;
+    height: 1em;
+  }
+  icon[whirlwind],
+  icon.whirlwind {
+    --icon: var(--icon-whirlwind);
+    width: 1em;
+    height: 1em;
+  }
+  icon[hitChance],
+  icon.hitChance {
+    --icon: var(--icon-hitChance);
+    width: 1em;
+    height: 1em;
+  }
+  icon[stoneSkin],
+  icon.stoneSkin {
+    --icon: var(--icon-stoneSkin);
+    width: 1em;
+    height: 1em;
+  }
+  icon[smokeBomb],
+  icon.smokeBomb {
+    --icon: var(--icon-smokeBomb);
+    width: 1em;
+    height: 1em;
+  }
+  icon[warCry],
+  icon.warCry {
+    --icon: var(--icon-warCry);
+    width: 1em;
+    height: 1em;
+  }
+  icon[intimidatingRoar],
+  icon.intimidatingRoar {
+    --icon: var(--icon-intimidatingRoar);
+    width: 1em;
+    height: 1em;
+  }
+  icon[alorasTouch],
+  icon.alorasTouch {
+    --icon: var(--icon-alorasTouch);
+    width: 1em;
+    height: 1em;
+  }
+  icon[armorPenetration],
+  icon.armorPenetration {
+    --icon: var(--icon-armorPenetration);
+    width: 1em;
+    height: 1em;
+  }
+  icon[the-arena],
+  icon.the-arena {
+    --icon: var(--icon-the-arena);
+    width: 1em;
+    height: 1em;
+  }
+  icon[powerShot],
+  icon.powerShot {
+    --icon: var(--icon-powerShot);
+    width: 1em;
+    height: 1em;
+  }
+  icon[brawlers],
+  icon.brawlers {
+    --icon: var(--icon-brawlers);
+    width: 1em;
+    height: 1em;
+  }
+  icon[provocation],
+  icon.provocation {
+    --icon: var(--icon-provocation);
+    width: 1em;
+    height: 1em;
+  }
+  icon[buff],
+  icon.buff {
+    --icon: var(--icon-buff);
+    width: 1em;
+    height: 1.1641051065939516em;
+  }
+  icon[daggerThrow],
+  icon.daggerThrow {
+    --icon: var(--icon-daggerThrow);
+    width: 1.0042435815828559em;
+    height: 1em;
+  }
+  icon[weave],
+  icon.weave {
+    --icon: var(--icon-weave);
+    width: 1.0006341154090044em;
+    height: 1em;
+  }
+  icon[recharge],
+  icon.recharge {
+    --icon: var(--icon-recharge);
+    width: 1.011802575107296em;
+    height: 1em;
+  }
+  icon[skewer],
+  icon.skewer {
+    --icon: var(--icon-skewer);
+    width: 1.0871912744173609em;
+    height: 1em;
+  }
+  icon[stomp],
+  icon.stomp {
+    --icon: var(--icon-stomp);
+    width: 1.1098556401281552em;
+    height: 1em;
+  }
+  icon[endGame],
+  icon.endGame {
+    --icon: var(--icon-endGame);
+    width: 1em;
+    height: 1.0657790778190082em;
+  }
+  icon[riposte],
+  icon.riposte {
+    --icon: var(--icon-riposte);
+    width: 1.001260990482113em;
+    height: 1em;
+  }
+  icon[deflect],
+  icon.deflect {
+    --icon: var(--icon-deflect);
+    width: 1.0297125435540069em;
+    height: 1em;
+  }
+  icon[emberStrike],
+  icon.emberStrike {
+    --icon: var(--icon-emberStrike);
+    width: 1em;
+    height: 1em;
+  }
+  icon[sunder],
+  icon.sunder {
+    --icon: var(--icon-sunder);
+    width: 1em;
+    height: 1.1276531136051977em;
+  }
+  icon[aimedShot],
+  icon.aimedShot {
+    --icon: var(--icon-aimedShot);
+    width: 1em;
+    height: 1.0000042406662935em;
+  }
+  icon[frostStrike],
+  icon.frostStrike {
+    --icon: var(--icon-frostStrike);
+    width: 1em;
+    height: 1.0037378080755113em;
+  }
+  icon[stormStrike],
+  icon.stormStrike {
+    --icon: var(--icon-stormStrike);
+    width: 1em;
+    height: 1.0014340545784302em;
+  }
+  icon[wildGrowth],
+  icon.wildGrowth {
+    --icon: var(--icon-wildGrowth);
+    width: 1.0328794369977266em;
+    height: 1em;
+  }
+  icon[stoneShatter],
+  icon.stoneShatter {
+    --icon: var(--icon-stoneShatter);
+    width: 1em;
+    height: 1.0001220040639973em;
+  }
+  icon[cut],
+  icon.cut {
+    --icon: var(--icon-cut);
+    width: 1.0251596815119433em;
+    height: 1em;
+  }
+  icon[doublePersona],
+  icon.doublePersona {
+    --icon: var(--icon-doublePersona);
+    width: 1em;
+    height: 1.510372781820503em;
+  }
+  icon[ripAndTear],
+  icon.ripAndTear {
+    --icon: var(--icon-ripAndTear);
+    width: 1.004261163766037em;
+    height: 1em;
+  }
+  icon[pounce],
+  icon.pounce {
+    --icon: var(--icon-pounce);
+    width: 1.0616277099515754em;
+    height: 1em;
+  }
+  icon[unstoppable],
+  icon.unstoppable {
+    --icon: var(--icon-unstoppable);
+    width: 1.0054011434739345em;
+    height: 1em;
+  }
+  icon[poisonousSting],
+  icon.poisonousSting {
+    --icon: var(--icon-poisonousSting);
+    width: 1.0871912744173609em;
+    height: 1em;
+  }
+  icon[venom],
+  icon.venom {
+    --icon: var(--icon-venom);
+    width: 1.0157030768249378em;
+    height: 1em;
+  }
+  icon[gore],
+  icon.gore {
+    --icon: var(--icon-gore);
+    width: 1.008525591477349em;
+    height: 1em;
+  }
+  icon[haymaker],
+  icon.haymaker {
+    --icon: var(--icon-haymaker);
+    width: 1em;
+    height: 1em;
+  }
+  icon[charge],
+  icon.charge {
+    --icon: var(--icon-charge);
+    width: 1em;
+    height: 1em;
+  }
+  icon[execute],
+  icon.execute {
+    --icon: var(--icon-execute);
+    width: 1em;
+    height: 1.022159265556518em;
+  }
+  icon[boom],
+  icon.boom {
+    --icon: var(--icon-boom);
+    width: 1.0054733469994108em;
+    height: 1em;
+  }
+  icon[slingshot],
+  icon.slingshot {
+    --icon: var(--icon-slingshot);
+    width: 1em;
+    height: 1.0392568895808414em;
+  }
+  icon[dragonBreath],
+  icon.dragonBreath {
+    --icon: var(--icon-dragonBreath);
+    width: 1.0012087797773848em;
+    height: 1em;
+  }
+  icon[hatch],
+  icon.hatch {
+    --icon: var(--icon-hatch);
+    width: 1em;
+    height: 1.0000021008138553em;
+  }
+  icon[shrug],
+  icon.shrug {
+    --icon: var(--icon-shrug);
+    width: 1.0238611713665944em;
+    height: 1em;
+  }
+  icon[potion],
+  icon.potion {
+    --icon: var(--icon-potion);
+    width: 1em;
+    height: 1.2183816713018143em;
+  }
+  icon[armory],
+  icon.armory {
+    --icon: var(--icon-armory);
+    width: 1em;
+    height: 1.0593799550349072em;
+  }
+  icon[experience],
+  icon.experience {
+    --icon: var(--icon-experience);
+    width: 1em;
+    height: 1.0000021593981325em;
+  }
+  icon[immobilize],
+  icon.immobilize {
+    --icon: var(--icon-immobilize);
+    width: 1.0795011423958065em;
+    height: 1em;
+  }
+  icon[dot],
+  icon.dot {
+    --icon: var(--icon-dot);
+    width: 1em;
+    height: 1.0042502596910785em;
+  }
+  icon[debuff],
+  icon.debuff {
+    --icon: var(--icon-debuff);
+    width: 1em;
+    height: 1.1646205357142858em;
+  }
+  icon[uninterruptable],
+  icon.uninterruptable {
+    --icon: var(--icon-uninterruptable);
+    width: 1.0000687010505016em;
+    height: 1em;
+  }
+  icon[crystal],
+  icon.crystal {
+    --icon: var(--icon-crystal);
+    width: 1em;
+    height: 1.3999725580382578em;
+  }
+  icon[stunned],
+  icon.stunned {
+    --icon: var(--icon-stunned);
+    width: 0.97265625em;
+    height: 1em;
+  }
+  icon[meat],
+  icon.meat {
+    --icon: var(--icon-meat);
+    width: 1.4088675101955455em;
+    height: 1em;
+  }
+  icon[confused],
+  icon.confused {
+    --icon: var(--icon-confused);
+    width: 1em;
+    height: 1.1522464018198697em;
+  }
+  icon[all-elements],
+  icon.all-elements {
+    --icon: var(--icon-all-elements);
+    width: 1em;
+    height: 1.0000042535362836em;
+  }
+  icon[taunt],
+  icon.taunt {
+    --icon: var(--icon-taunt);
+    width: 1.0098144520966281em;
+    height: 1em;
+  }
+  icon[dynamite],
+  icon.dynamite {
+    --icon: var(--icon-dynamite);
+    width: 1.110253254955418em;
+    height: 1em;
+  }
+  icon[berserk],
+  icon.berserk {
+    --icon: var(--icon-berserk);
+    width: 1.0349795454545454em;
+    height: 1em;
+  }
+  icon[crushingBlow],
+  icon.crushingBlow {
+    --icon: var(--icon-crushingBlow);
+    width: 1em;
+    height: 1.0186496061046793em;
+  }
+  icon[sound-off],
+  icon.sound-off {
+    --icon: var(--icon-sound-off);
+    width: 1.2601250000000002em;
+    height: 1em;
+  }
+  icon[sound-on],
+  icon.sound-on {
+    --icon: var(--icon-sound-on);
+    width: 1.2601250000000002em;
+    height: 1em;
+  }
+  icon[mend],
+  icon.mend {
+    --icon: var(--icon-mend);
+    width: 1em;
+    height: 1.107718804920914em;
+  }
+  icon[spikeWall],
+  icon.spikeWall {
+    --icon: var(--icon-spikeWall);
+    width: 1em;
+    height: 1.011940942418217em;
+  }
+  icon[rendingFrenzy],
+  icon.rendingFrenzy {
+    --icon: var(--icon-rendingFrenzy);
+    width: 1em;
+    height: 1.0141652821888434em;
+  }
+  icon[lightningStorm],
+  icon.lightningStorm {
+    --icon: var(--icon-lightningStorm);
+    width: 1.0062637130801688em;
+    height: 1em;
+  }
+  icon[pommelStrike],
+  icon.pommelStrike {
+    --icon: var(--icon-pommelStrike);
+    width: 1em;
+    height: 1.001684565171615em;
+  }
+  icon[rupture],
+  icon.rupture {
+    --icon: var(--icon-rupture);
+    width: 1em;
+    height: 1.0031516987051128em;
+  }
+  icon[dazingBlow],
+  icon.dazingBlow {
+    --icon: var(--icon-dazingBlow);
+    width: 1em;
+    height: 1.0033944231784029em;
+  }
+  icon[exposeArmor],
+  icon.exposeArmor {
+    --icon: var(--icon-exposeArmor);
+    width: 1em;
+    height: 1.0770605491800513em;
+  }
+  icon[bloodlust],
+  icon.bloodlust {
+    --icon: var(--icon-bloodlust);
+    width: 1em;
+    height: 1.0087875296307576em;
+  }
+  icon[guardian],
+  icon.guardian {
+    --icon: var(--icon-guardian);
+    width: 1em;
+    height: 1.1254188459311432em;
+  }
+  icon[warBanner],
+  icon.warBanner {
+    --icon: var(--icon-warBanner);
+    width: 1.0147978078486566em;
+    height: 1em;
+  }
+  icon[aegis],
+  icon.aegis {
+    --icon: var(--icon-aegis);
+    width: 1em;
+    height: 1em;
+  }
+  icon[unbreakable],
+  icon.unbreakable {
+    --icon: var(--icon-unbreakable);
+    width: 1em;
+    height: 1.0917711021009953em;
+  }
+  icon[adrenaline],
+  icon.adrenaline {
+    --icon: var(--icon-adrenaline);
+    width: 1.000002111312624em;
+    height: 1em;
+  }
+  icon[goodBoys],
+  icon.goodBoys {
+    --icon: var(--icon-goodBoys);
+    width: 1em;
+    height: 1.1548486310309447em;
+  }
+  icon[bulwark],
+  icon.bulwark {
+    --icon: var(--icon-bulwark);
+    width: 1em;
+    height: 1.176909159442141em;
+  }
+  icon[wideSwing],
+  icon.wideSwing {
+    --icon: var(--icon-wideSwing);
+    width: 1.009840868776262em;
+    height: 1em;
+  }
+  icon[allTolerances],
+  icon.allTolerances {
+    --icon: var(--icon-allTolerances);
+    width: 1.0620719519560584em;
+    height: 1em;
+  }
+  icon[rewatch],
+  icon.rewatch {
+    --icon: var(--icon-rewatch);
+    width: 1em;
+    height: 1.000019010924945em;
+  }
+  icon[chat],
+  icon.chat {
+    --icon: var(--icon-chat);
+    width: 1.1416086185263703em;
+    height: 1em;
+  }
+}
diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 00000000..c2fd379f
--- /dev/null
+++ b/css/animations.css
@@ -0,0 +1,384 @@
+@keyframes attack-blocked {
+  0%,
+  100% {
+    background-color: transparent;
+    opacity: 0;
+  }
+  25% {
+    background-color: gray;
+    opacity: 1;
+  }
+}
+
+@keyframes sprite-hurt {
+  0% {
+    background-color: transparent;
+    opacity: 0;
+  }
+  25% {
+    background-color: oklch(from var(--hue-red) l c h / 0.4);
+    opacity: 1;
+  }
+  100% {
+    background-color: transparent;
+    opacity: 0;
+  }
+}
+
+@keyframes bb-basicAttackFast {
+  0% {
+    transform: translate(var(--position-x), var(--position-y));
+  }
+  90% {
+    transform: translate(var(--attack-start-x), var(--attack-start-y));
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1.33);
+  }
+  100% {
+    transform: translate(var(--attack-end-x), var(--attack-end-y));
+  }
+}
+
+@keyframes bb-basicAttackRegular {
+  0% {
+    transform: translate(var(--position-x), var(--position-y));
+  }
+  90% {
+    transform: translate(var(--attack-start-x), var(--attack-start-y));
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1.33);
+  }
+  100% {
+    transform: translate(var(--attack-end-x), var(--attack-end-y));
+  }
+}
+
+@keyframes bb-basicAttackSlow {
+  0% {
+    transform: translate(var(--position-x), var(--position-y));
+  }
+  90% {
+    transform: translate(var(--attack-start-x), var(--attack-start-y));
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1.33);
+  }
+  100% {
+    transform: translate(var(--attack-end-x), var(--attack-end-y));
+  }
+}
+
+@keyframes bb-pounce {
+  0% {
+    transform: translate(var(--position-x), var(--position-y));
+    animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1);
+  }
+  80% {
+    transform: translate(var(--attack-start-x), var(--attack-start-y))
+      translateY(calc(var(--unit) * 1));
+    animation-timing-function: cubic-bezier(0.25, 0.7, 0.4, 1);
+  }
+  90% {
+    transform: translate(var(--attack-end-x), var(--attack-end-y))
+      translateY(calc(var(--unit) * -2.5));
+    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+  }
+  100% {
+    transform: translate(var(--attack-end-x), var(--attack-end-y));
+  }
+}
+
+@keyframes bb-whirlwind {
+  0% {
+    transform: translate(var(--position-x), var(--position-y)) scaleX(1);
+  }
+  50% {
+    transform: translate(var(--position-x), var(--position-y)) scaleX(-1);
+  }
+  100% {
+    transform: translate(var(--position-x), var(--position-y)) scaleX(1);
+  }
+}
+
+@keyframes bb-boom {
+  0% {
+    transform: translate(var(--position-x), var(--position-y)) scale(1);
+    animation-timing-function: ease-in;
+  }
+  85% {
+    transform: translate(var(--position-x), var(--position-y)) scale(0.95);
+    animation-timing-function: cubic-bezier(0.15, 0.9, 0.25, 1.6);
+  }
+  90% {
+    transform: translate(var(--position-x), var(--position-y)) scale(1.03);
+    animation-timing-function: ease-out;
+  }
+  95% {
+    transform: translate(var(--position-x), var(--position-y)) scale(0.99);
+  }
+  100% {
+    transform: translate(var(--position-x), var(--position-y)) scale(1);
+  }
+}
+
+@keyframes bb-stomp {
+  0% {
+    rotate: 0deg;
+    animation-timing-function: ease-in;
+  }
+  90% {
+    rotate: calc(-13deg * var(--dir, 1));
+    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0);
+  }
+  97% {
+    rotate: calc(6deg * var(--dir, 1));
+    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
+  }
+  100% {
+    rotate: 0deg;
+  }
+}
+
+@keyframes bb-catchThrow {
+  0% {
+    rotate: 0deg;
+    animation-timing-function: ease-in;
+  }
+  58% {
+    rotate: calc(-10deg * var(--dir, 1));
+    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
+  }
+  74% {
+    rotate: calc(10deg * var(--dir, 1));
+    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
+  }
+  80% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 0deg;
+  }
+}
+
+@keyframes projectile-travel {
+  to {
+    translate: var(--p-end-x) var(--p-end-y);
+  }
+}
+
+@keyframes projectile-hop {
+  0% {
+    transform: translateY(0);
+    animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateY(calc(var(--p-arc, 0px) * -1));
+    animation-timing-function: ease-in;
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes projectile-spin {
+  to {
+    rotate: var(--p-spin, 0deg);
+  }
+}
+
+@keyframes bb-wiggle {
+  0%,
+  55% {
+    rotate: 0deg;
+  }
+  61% {
+    rotate: -7deg;
+  }
+  67% {
+    rotate: 7deg;
+  }
+  73% {
+    rotate: -5deg;
+  }
+  79% {
+    rotate: 4deg;
+  }
+  85% {
+    rotate: -2deg;
+  }
+  91%,
+  100% {
+    rotate: 0deg;
+  }
+}
+
+@keyframes sprite-ability-release {
+  from {
+    --squish-x: 0.94;
+    --squish-y: 0.89;
+  }
+  55% {
+    --squish-x: 1.05;
+    --squish-y: 1.07;
+  }
+  to {
+    --squish-x: 1;
+    --squish-y: 1;
+  }
+}
+
+@keyframes hp-floater-fade {
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes hp-floater-heal-fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes hp-floater-x {
+  0% {
+    transform: translateY(var(--y-offset, 0)) translateX(calc(var(--dir, 1) * -15px))
+      scale(calc(var(--scale, 1) * 3));
+  }
+  100% {
+    transform: translateY(var(--y-offset, 0))
+      translateX(calc(var(--dir, 1) * (5px + var(--rnd, 0.5) * 25px))) scale(var(--scale, 1));
+  }
+}
+
+@keyframes hp-floater-y {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-40px);
+  }
+}
+
+@keyframes hp-floater-heal-y {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes combat-shake {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  20% {
+    transform: translate(calc(var(--unit) * -1), calc(var(--unit) * 0.5));
+  }
+  40% {
+    transform: translate(calc(var(--unit) * 0.75), calc(var(--unit) * -0.75));
+  }
+  60% {
+    transform: translate(calc(var(--unit) * -0.75), calc(var(--unit) * -0.5));
+  }
+  80% {
+    transform: translate(calc(var(--unit) * 0.5), calc(var(--unit) * 0.75));
+  }
+}
+
+@keyframes combatant-armor-hit {
+  0% {
+    transform: scale(1.5);
+    filter: brightness(2);
+  }
+  100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+}
+
+@keyframes status-announce {
+  0% {
+    opacity: 0;
+    scale: 0.7;
+  }
+  12% {
+    opacity: 1;
+    scale: 1;
+  }
+  57% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes status-pop {
+  0% {
+    scale: 0;
+  }
+  60% {
+    scale: 1.2;
+  }
+  100% {
+    scale: 1;
+  }
+}
+
+@keyframes immobilized-in {
+  0% {
+    opacity: 0;
+    scale: 2.4;
+    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
+  }
+  62% {
+    opacity: 0.9;
+    scale: 1;
+    animation-timing-function: ease-out;
+  }
+  76% {
+    scale: 1.08 0.85;
+    animation-timing-function: ease-in-out;
+  }
+  90% {
+    scale: 0.98 1.04;
+  }
+  100% {
+    opacity: 0.9;
+    scale: 1;
+  }
+}
+
+@keyframes immobilized-ability-impact {
+  35% {
+    translate: 0 calc(var(--unit) * 0.75);
+  }
+  75% {
+    translate: 0 calc(var(--unit) * -0.2);
+  }
+}
+
+@keyframes live-pulse {
+  0% {
+    box-shadow: 0 0 0 0 oklch(from var(--hue-red) l c h / 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 calc(var(--unit) * 2.5) oklch(from var(--hue-red) l c h / 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 oklch(from var(--hue-red) l c h / 0);
+  }
+}
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 00000000..04342921
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,1627 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&family=Alfa+Slab+One&family=Bree+Serif&display=swap');
+@import url('/node_modules/@ape-egg/vibe/vibe.css');
+@import url('/css/stylecheat.css');
+@import url('/css/Iconice.css');
+@import url('/css/animations.css');
+
+:root,
+[battleborn-brawlers] {
+  --unit: 4px;
+  --font-sans: 'Fira Sans Condensed', 'Trebuchet MS', sans-serif;
+  --font-heading: 'Cinzel', serif;
+  --font-display: 'Alfa Slab One', cursive;
+  --font-accent: 'Bree Serif', serif;
+  --radius: calc(var(--unit) * 1.5);
+
+  --background: oklch(0.94 0.02 60);
+  --foreground: oklch(0.2 0 0);
+  --muted: oklch(0.7 0.03 50);
+  --c-panel: oklch(0.975 0.016 85);
+  --c-inset: oklch(0.935 0.028 82);
+  --c-fg: oklch(0.27 0.03 55);
+  --c-muted: oklch(0.5 0.035 60);
+  --c-line: oklch(0.42 0.05 55 / 0.22);
+  --c-accent: var(--gold-deep);
+  --primary: oklch(0.6 0.15 70);
+  --primary-foreground: #fff;
+  --destructive: oklch(0.55 0.2 25);
+
+  --sidebar: oklch(0.2 0.03 50);
+  --sidebar-foreground: oklch(0.85 0.02 60);
+  --sidebar-primary: oklch(0.6 0.15 70);
+
+  --white: #fff;
+  --black: #000;
+  --z-cutscene: 60;
+  --slate: #374151;
+  --stone: #b3ad9f;
+  --combatant-name-color: #57534e;
+
+  --coin-copper: oklch(0.666 0.156 63);
+  --coin-silver: oklch(0.705 0.015 286);
+  --coin-gold: oklch(0.795 0.17 86);
+  --coin-platinum: oklch(0.715 0.143 215);
+
+  --hue-red: oklch(0.55 0.2 27);
+  --hue-orange: oklch(0.65 0.18 55);
+  --hue-yellow: oklch(0.78 0.16 90);
+  --hue-green: oklch(0.6 0.17 142);
+  --hue-blue: oklch(0.55 0.18 250);
+  --hue-blue-frost: oklch(0.78 0.08 220);
+  --hue-purple: oklch(0.52 0.18 305);
+  --hue-brown: oklch(0.5 0.08 65);
+
+  --rarity-common: oklch(0.65 0.01 60);
+  --rarity-uncommon: var(--hue-green);
+  --rarity-rare: var(--hue-blue);
+  --rarity-epic: var(--hue-purple);
+  --rarity-legendary: var(--hue-orange);
+  --rarity-exotic: var(--hue-red);
+
+  --element-fire: var(--hue-red);
+  --element-frost: var(--hue-blue-frost);
+  --element-earth: var(--hue-brown);
+  --element-nature: var(--hue-green);
+  --element-lightning: var(--hue-yellow);
+  --element-rainbow: conic-gradient(
+    from 90deg,
+    var(--element-fire),
+    var(--element-lightning),
+    var(--element-nature),
+    var(--element-frost),
+    var(--element-earth),
+    var(--element-fire)
+  );
+  /* Soft pastel sweep of every element — the light "all elements" surface that
+     the ability bar's hybrid tiles use (matches elementSpectrum(..., 'face')). */
+  --element-spectrum: linear-gradient(
+    105deg,
+    oklch(from var(--element-fire) 0.95 0.045 h),
+    oklch(from var(--element-lightning) 0.95 0.045 h),
+    oklch(from var(--element-nature) 0.95 0.045 h),
+    oklch(from var(--element-frost) 0.95 0.045 h),
+    oklch(from var(--element-earth) 0.95 0.045 h)
+  );
+
+  --status-bleeding: oklch(from var(--hue-red) l calc(c * 0.6) h);
+  --status-wounded: oklch(from var(--status-bleeding) calc(l * 0.85) c h);
+  --status-poisoned: oklch(from var(--hue-green) l calc(c * 0.6) h);
+  --status-envenomed: oklch(from var(--status-poisoned) calc(l * 0.85) c h);
+  --status-stunned: oklch(from var(--hue-purple) l calc(c * 0.6) h);
+  --status-concussed: oklch(from var(--status-stunned) calc(l * 0.85) c h);
+  --status-vulnerable: oklch(from var(--hue-blue) l calc(c * 0.6) h);
+  --status-exposed: oklch(from var(--status-vulnerable) calc(l * 0.85) c h);
+  --status-cocooned: oklch(0.75 0.04 95);
+  --status-webbed: oklch(from var(--status-cocooned) calc(l * 0.85) c h);
+
+  --status-buff: oklch(from var(--hue-green) calc(l * 0.85) c h);
+  --status-debuff: oklch(from var(--hue-red) calc(l * 0.85) c h);
+
+  --team-1: var(--hue-red);
+  --team-2: var(--hue-blue);
+  --team-3: var(--hue-green);
+  --team-4: var(--hue-yellow);
+  --team-5: var(--hue-purple);
+  --team-6: var(--hue-orange);
+  --team-7: var(--hue-blue-frost);
+  --team-8: oklch(0.62 0.21 340);
+
+  --icon-arrow-up: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%202%202%2014h6v8h8v-8h6z%22%2F%3E%3C%2Fsvg%3E');
+  --icon-arrow-down: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%2022%2022%2010h-6V2H8v8H2z%22%2F%3E%3C%2Fsvg%3E');
+
+  --floater-default: oklch(from var(--hue-red) calc(l * 0.75) c h);
+  --floater-heal: var(--hue-green);
+  --health-buffer: var(--floater-default);
+  --health-ghost: oklch(from var(--floater-default) calc(l * 1.9) calc(c * 0.45) h / 0.5);
+
+  --scrim-1: rgb(0 0 0 / 0.1);
+  --scrim-2: rgb(0 0 0 / 0.25);
+  --scrim-3: rgb(0 0 0 / 0.5);
+  --sheen-1: rgb(255 255 255 / 0.1);
+  --sheen-2: rgb(255 255 255 / 0.25);
+  --sheen-3: rgb(255 255 255 / 0.5);
+
+  --divider: var(--scrim-2);
+
+  --gold-shine: #fedb37;
+  --gold-warm: #fdb931;
+  --gold-deep: #b8860b;
+  --gold-shadow: #8a6e2f;
+
+  --modal-frame: oklch(from var(--card) calc(l - 0.04) 0 h);
+
+  --bar-bg:
+    linear-gradient(
+      oklch(from var(--c-accent) l c h / 0.1),
+      oklch(from var(--c-accent) l c h / 0.1)
+    ),
+    var(--c-panel);
+}
+
+combat-frame,
+combat-viewport,
+combat-arena,
+combat-preview-arena,
+combat-preview-ring {
+  --ring-d: calc(var(--unit) * 125);
+  --combat-outer-d: calc(
+    (var(--ring-d) + var(--unit) * 15 + var(--unit) * 66 * var(--combat-scale, 1)) * 0.855
+  );
+}
+
+badge[neutral],
+badge[red],
+badge[gold],
+badge[green],
+badge[health] {
+  background: oklch(from currentColor l c h / 0.08);
+  border: 1px solid currentColor;
+}
+
+badge[health] {
+  color: hsl(var(--health-hue) 70% 42%);
+}
+
+[dark] badge[health] {
+  color: hsl(var(--health-hue) 70% 62%);
+}
+
+badge[neutral] {
+  color: oklch(from var(--slate) calc(l * 0.85) c h / 0.75);
+}
+
+badge[red] {
+  color: oklch(from var(--hue-red) calc(l * 0.85) c h);
+}
+
+badge[gold] {
+  color: oklch(from var(--gold-deep) calc(l * 0.85) c h);
+}
+
+badge[green] {
+  color: oklch(from var(--hue-green) calc(l * 0.75) c h);
+}
+
+[dark] badge[neutral] {
+  color: oklch(from var(--slate) 0.78 c h / 0.9);
+}
+
+[dark] badge[red] {
+  color: oklch(from var(--hue-red) 0.72 c h);
+}
+
+[dark] badge[gold] {
+  color: oklch(from var(--gold-deep) 0.82 c h);
+}
+
+[dark] badge[green] {
+  color: oklch(from var(--hue-green) 0.78 c h);
+}
+
+badge[clickable] {
+  cursor: pointer;
+}
+
+@property --status-spread {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0deg;
+}
+
+@property --squish-x {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --squish-y {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+[data-hidden='true'] {
+  display: none;
+}
+
+/* Available Abilities lives in a collapsible accordion. A tile added while the
+   accordion is collapsed (grid-template-rows: 0fr + overflow: hidden) is skipped
+   by Chromium's paint and stays invisible after the accordion opens. Switching
+   overflow to visible once the open animation has finished forces that repaint.
+   The transition delay keeps the content clipped during the open reveal (so the
+   open animation is unchanged); removing [open] drops this rule and the base
+   overflow:hidden returns instantly, so the close animation is unchanged too.
+   App-level override scoped to the brawler slots — stylecheat is untouched. */
+brawler-slot accordion[open] > accordion-content {
+  overflow: visible;
+  transition: overflow 0s 200ms;
+  transition-behavior: allow-discrete;
+}
+
+/* Canonical element colour — any element-attributed element exposes its theme
+   hue as --element-color, so the element→colour mapping lives in one place.
+   Consumers below (ability slabs, race dots, icons, equipment splashes) read it. */
+[fire] {
+  --element-color: var(--element-fire);
+}
+[frost] {
+  --element-color: var(--element-frost);
+}
+[earth] {
+  --element-color: var(--element-earth);
+}
+[nature] {
+  --element-color: var(--element-nature);
+}
+[lightning] {
+  --element-color: var(--element-lightning);
+}
+/* The Heirloom's "all" element — every hue at once. --element-color stays a solid
+   so the oklch-derived text/borders keep working; --element-rainbow paints the
+   prominent surfaces (emblem, dot) with the full spread. */
+[all] {
+  --element-color: var(--hue-purple);
+}
+
+/* Element icons render in their original multi-tone colours everywhere: the
+   source SVG painted as a background image, not the monochrome Iconice mask. */
+icon[fire],
+icon[frost],
+icon[earth],
+icon[nature],
+icon[lightning] {
+  -webkit-mask: none;
+  mask: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  --element-icon-shadow: drop-shadow(
+    1px 1px 0 oklch(from var(--element-color, var(--hue-purple)) calc(l * 0.6) c h / 0.5)
+  );
+  filter: var(--element-icon-shadow);
+}
+
+icon[fire] {
+  background-image: url('/static/icons/elements/fire.svg');
+}
+icon[frost] {
+  background-image: url('/static/icons/elements/frost.svg');
+}
+icon[earth] {
+  background-image: url('/static/icons/elements/earth.svg');
+}
+icon[nature] {
+  background-image: url('/static/icons/elements/nature.svg');
+}
+icon[lightning] {
+  background-image: url('/static/icons/elements/lightning.svg');
+}
+
+icon[tolerance] {
+  --icon: var(--icon-allTolerances);
+}
+
+/* "All elements": the source shape carries no fills, so paint it with the full
+   rainbow spread through the mask — the multi-element counterpart to the colour
+   icons above. */
+icon[all],
+icon.all {
+  --icon: var(--icon-all-elements);
+  background: var(--element-rainbow);
+  filter: drop-shadow(
+    1px 1px 0 oklch(from var(--element-color, var(--hue-purple)) calc(l * 0.6) c h / 0.7)
+  );
+}
+
+eq-link[all] eq-link-hex {
+  background: var(--element-rainbow);
+}
+
+icon[lock-closed] {
+  --icon: var(--icon-lock-closed);
+}
+
+icon[potion],
+icon.potion {
+  aspect-ratio: 377.55 / 460;
+  mask-size: contain;
+  mask-position: center;
+  background: radial-gradient(
+    circle at 40% 65%,
+    oklch(from var(--red) l c h) 20%,
+    oklch(from black l c h) 70%
+  );
+}
+
+button:disabled icon[potion] {
+  background: var(--muted-foreground);
+}
+
+ability-tile[fire],
+ability-tile[frost],
+ability-tile[earth],
+ability-tile[nature],
+ability-tile[lightning],
+ability-tile[all],
+ability-segment[fire],
+ability-segment[frost],
+ability-segment[earth],
+ability-segment[nature],
+ability-segment[lightning],
+ability-segment[all],
+design-render[fire],
+design-render[frost],
+design-render[earth],
+design-render[nature],
+design-render[lightning],
+design-render[all] {
+  --c-top: oklch(from var(--element-color) 0.985 0.03 h);
+  --c-bot: oklch(from var(--element-color) 0.92 0.03 h);
+  --edge: oklch(from var(--element-color) 0.82 0.035 h);
+  --deep1: oklch(from var(--element-color) 0.9 0.03 h);
+  --deep2: oklch(from var(--element-color) 0.85 0.03 h);
+  --ink: oklch(from var(--element-color) 0.46 0.072 h);
+  --glyph-top: oklch(from var(--element-color) 0.75 0.06 h);
+  --glyph-bot: oklch(from var(--element-color) 0.53 0.072 h);
+  --glyph-edge: oklch(from var(--element-color) 0.4 0.072 h / 0.8);
+  --shade: oklch(from var(--element-color) 0.79 0.03 h / 0.5);
+  --face: linear-gradient(180deg, var(--c-top), var(--c-bot));
+}
+
+circle[fire],
+circle[frost],
+circle[earth],
+circle[nature],
+circle[lightning] {
+  width: calc(var(--unit) * 3);
+  background: oklch(from var(--element-color) l calc(c * 0.4) h);
+}
+
+circle[all] {
+  width: calc(var(--unit) * 3);
+  background: var(--element-rainbow);
+}
+
+[coin-copper],
+.coin-copper {
+  color: var(--coin-copper);
+}
+
+[coin-silver],
+.coin-silver {
+  color: var(--coin-silver);
+}
+
+[coin-gold],
+.coin-gold {
+  color: var(--coin-gold);
+}
+
+[coin-platinum],
+.coin-platinum {
+  color: var(--coin-platinum);
+}
+
+[dark] {
+  --background: oklch(0.15 0.01 60);
+  --foreground: oklch(0.9 0 0);
+  --card: oklch(0.31 0.025 65);
+  --c-panel: oklch(0.185 0.013 65);
+  --c-inset: oklch(0.13 0.011 60);
+  --c-fg: oklch(0.91 0.015 85);
+  --c-muted: oklch(0.63 0.02 75);
+  --c-line: oklch(0.8 0.05 85 / 0.13);
+  --c-accent: var(--gold-warm);
+  --border: oklch(0.3 0.02 60 / 15%);
+  --divider: oklch(from var(--foreground) l c h / 0.28);
+  --input: oklch(0.42 0.008 80);
+}
+
+html {
+  font-family: var(--font-sans);
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-tap-highlight-color: transparent;
+}
+
+* {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+card {
+  color: var(--muted-foreground);
+}
+
+body {
+  background-color: var(--background);
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-image: url('/static/images/bg/parchment-2080x1170.webp');
+}
+
+body[the-wild]:not([dark]) {
+  background-image: url('/static/images/bg/the-wild-grassland-2250x1500.webp');
+}
+
+body[the-wild][dark] {
+  background-image: url('/static/images/bg/the-wild-grassland-dark-4096x2304.webp');
+}
+
+html:has(body[cutscene-open]),
+body[cutscene-open] {
+  overflow: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-heading);
+  color: var(--foreground);
+  font-weight: 300;
+}
+
+badge {
+  font-weight: normal;
+}
+
+hr {
+  border-color: var(--divider);
+}
+
+hr[vertical] {
+  align-self: stretch;
+  width: 1px;
+  height: auto;
+  margin-block: calc(var(--unit) * 1);
+  border: none;
+  background: linear-gradient(to bottom, transparent, var(--muted-foreground), transparent);
+}
+
+icon[maxHealth],
+icon.maxHealth {
+  --color: var(--floater-default);
+}
+
+icon[maxArmor],
+icon.maxArmor {
+  --color: oklch(from var(--hue-blue) calc(l * 0.85) c h);
+}
+
+icon[damage],
+icon.damage {
+  --color: oklch(from var(--hue-green) calc(l * 0.75) c h);
+}
+
+icon[maxHealth],
+icon[maxArmor],
+icon[damage] {
+  background: radial-gradient(
+    circle at 35% 28%,
+    oklch(from var(--color) calc(l + 0.18) c h),
+    var(--color) 55%,
+    oklch(from var(--color) calc(l - 0.13) c h)
+  );
+  filter: drop-shadow(1px 0 0 var(--icon-edge)) drop-shadow(-1px 0 0 var(--icon-edge))
+    drop-shadow(0 1px 0 var(--icon-edge)) drop-shadow(0 -1px 0 var(--icon-edge));
+  --icon-edge: oklch(from var(--color) calc(l - 0.4) c h / 0.85);
+}
+
+icon[bleeding] {
+  --color: var(--status-bleeding);
+}
+
+icon[wounded] {
+  --color: var(--status-wounded);
+}
+
+icon[venom] {
+  --color: var(--status-poisoned);
+}
+
+icon[stunned] {
+  --color: var(--status-stunned);
+}
+
+icon[concussed] {
+  --color: var(--status-concussed);
+}
+
+icon[vulnerable] {
+  --color: var(--status-vulnerable);
+}
+
+icon[exposed] {
+  --color: var(--status-exposed);
+}
+
+icon[cocooned] {
+  --icon: var(--icon-spin);
+  --color: var(--status-cocooned);
+  width: 1em;
+  height: 1em;
+}
+
+icon[webbed] {
+  --icon: var(--icon-smokeBomb);
+  --color: var(--status-webbed);
+  width: 1em;
+  height: 1em;
+}
+
+icon[arrow-up] {
+  --icon: var(--icon-arrow-up);
+}
+
+icon[arrow-down] {
+  --icon: var(--icon-arrow-down);
+}
+
+icon[experience] {
+  --icon: var(--icon-experience);
+  --color: var(--hue-yellow);
+}
+
+icon[buff] {
+  --color: var(--status-buff);
+}
+
+icon[debuff] {
+  --color: var(--status-debuff);
+}
+
+[cinzel] {
+  font-family: var(--font-heading);
+}
+
+[alfa-slab] {
+  font-family: var(--font-display);
+}
+
+[bree-serif] {
+  font-family: var(--font-accent);
+}
+
+[hexagon] {
+  corner-shape: bevel;
+  border-radius: var(--hexagon-point, calc(var(--unit) * 6)) / 50%;
+}
+
+[sticky-bar]:not([glass]) {
+  background: linear-gradient(
+    to bottom,
+    oklch(from var(--background) calc(l * 0.96) c h),
+    oklch(from var(--background) calc(l * 0.9) c h)
+  );
+}
+[sticky-bar][topbar-stay] {
+  background: var(--bar-bg);
+
+  box-shadow:
+    0 1px 0 oklch(from var(--c-accent) l c h / 0.3),
+    0 calc(var(--unit) * 0.5) calc(var(--unit) * 1.5) calc(var(--unit) * -0.5) var(--scrim-2);
+}
+
+[sticky-bar][tab-bar] {
+  background: var(--bar-bg);
+  box-shadow:
+    inset 0 2px 0 oklch(from var(--c-accent) l c h / 0.4),
+    inset 0 -1px 0 var(--c-line);
+}
+
+page-content:has([sticky-foot]) {
+  padding-bottom: 0;
+}
+
+[sticky-foot] {
+  margin-top: auto;
+  margin-inline: calc(var(--unit) * -6);
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 6);
+  background: var(--bar-bg);
+}
+
+@media (width <= 768px) {
+  [sticky-foot] {
+    margin-inline: calc(var(--unit) * -3);
+    padding-inline: calc(var(--unit) * 3);
+  }
+}
+
+[glass] {
+  background: var(--sheen-3);
+  box-shadow: 0 4px 6px -1px var(--scrim-1);
+  backdrop-filter: blur(4px);
+}
+
+[dark] [glass] {
+  background-color: oklch(from var(--card) calc(l * 0.75) c h / 0.6);
+  box-shadow: 0 4px 6px -1px var(--scrim-2);
+}
+
+[fat-number] {
+  filter: drop-shadow(0 1.2px 1.2px var(--scrim-3));
+  -webkit-text-stroke: 0.5px black;
+}
+
+eq-link {
+  --eq-h: calc(var(--unit) * 6.5);
+  --eq-r: calc(var(--eq-h) * 0.2887);
+  --eq-color: var(--rarity-common);
+  --c: var(--element-color, var(--eq-color));
+  display: inline-flex;
+  align-items: stretch;
+  height: var(--eq-h);
+  min-width: 0;
+  overflow: hidden;
+  corner-shape: bevel;
+  border-radius: var(--eq-r) / 50%;
+  line-height: 1;
+  font-weight: 600;
+  font-size: calc(var(--unit) * 3.5);
+  cursor: default;
+  color: oklch(from var(--c) calc(l * 0.82) c h);
+  background: oklch(from var(--c) l c h / 0.14);
+  box-shadow: inset 0 0 0 1px oklch(from var(--c) l c h / 0.45);
+}
+
+eq-link[all] {
+  background: var(--element-spectrum);
+}
+
+[dark] eq-link {
+  color: oklch(from var(--c) calc(l + 0.2) c h);
+}
+
+eq-link eq-link-hex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  aspect-ratio: 2 / 1.7320508;
+  corner-shape: bevel;
+  border-radius: var(--eq-r) / 50%;
+  color: var(--white);
+  background: oklch(from var(--c) calc(l + 0.07) calc(c * 0.85) h);
+}
+
+eq-link eq-link-hex icon {
+  font-size: calc(var(--unit) * 4.5);
+}
+
+element-hex {
+  --hex-h: calc(var(--unit) * 9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  height: var(--hex-h);
+  aspect-ratio: 2 / 1.7320508;
+  corner-shape: bevel;
+  border-radius: calc(var(--hex-h) * 0.2887) / 50%;
+  color: var(--white);
+  background: oklch(from var(--element-color, var(--hue-purple)) calc(l + 0.07) calc(c * 0.85) h);
+}
+
+element-hex[all] {
+  background: var(--element-rainbow);
+}
+
+element-hex icon {
+  font-size: calc(var(--hex-h) * 0.6);
+}
+
+eq-link eq-name {
+  display: block;
+  min-width: 0;
+  line-height: var(--eq-h);
+  padding: 0 calc(var(--unit) * 4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+eq-link:has(eq-link-hex) eq-name {
+  padding-left: calc(var(--unit) * 2.5);
+}
+
+team-badge {
+  display: inline-block;
+  padding: calc(var(--unit) * 1) calc(var(--unit) * 2.5);
+  background: var(--team-color, var(--scrim-3));
+  border-radius: calc(var(--unit) * 1.5);
+  color: var(--white);
+  font-family: var(--font-heading);
+  font-weight: 600;
+  font-size: calc(var(--unit) * 4.5);
+  letter-spacing: 0.02em;
+  line-height: 1.15;
+  text-align: center;
+  white-space: pre-line;
+  box-shadow:
+    inset 0 1px 0 oklch(from var(--team-color, var(--white)) calc(l + 0.18) c h),
+    0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) var(--scrim-2);
+}
+
+team-badge[sm] {
+  padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+  border-radius: calc(var(--unit) * 1);
+  font-size: calc(var(--unit) * 2.75);
+}
+
+[text-sm] {
+  font-size: calc(var(--unit) * 3.5);
+}
+
+[text-xs] {
+  font-size: calc(var(--unit) * 3);
+}
+
+[text-lg] {
+  font-size: calc(var(--unit) * 4.5);
+}
+
+[text-muted] {
+  color: var(--muted-foreground);
+}
+
+[text-center] {
+  text-align: center;
+}
+
+[text-right] {
+  text-align: right;
+}
+
+[capitalize] {
+  text-transform: capitalize;
+}
+
+[font-bold] {
+  font-weight: 700;
+}
+
+[font-medium] {
+  font-weight: 500;
+}
+
+[flex-none] {
+  flex: none;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: oklch(from var(--background) l c h / 50%);
+  border-radius: calc(var(--radius) - (calc(var(--unit) * 1) - 12px));
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--slate);
+  border-radius: calc(var(--radius) - (calc(var(--unit) * 1) - 12px));
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--muted-foreground);
+}
+
+page {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+page[pve] game-table {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: auto;
+  margin-top: calc(var(--unit) * 4);
+  margin-inline: calc(var(--unit) * -6);
+  margin-bottom: calc(var(--unit) * -6);
+}
+
+page[pve] [game-table-header],
+page[pve] [game-table-row] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: calc(var(--unit) * 4);
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 6);
+}
+
+page[pve] [game-table-header] {
+  font-size: calc(var(--unit) * 3);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-muted);
+  border-bottom: 1px solid var(--c-line);
+}
+
+page[pve] [game-table-row] {
+  font-size: calc(var(--unit) * 4);
+  text-decoration: none;
+  color: var(--c-fg);
+  border-bottom: 1px solid var(--c-line);
+  transition: background 200ms ease;
+}
+
+page[pve] [game-table-row]:last-child {
+  border-bottom: 0;
+}
+
+page[pve] [game-table-row][even] {
+  background: oklch(from var(--c-fg) l c h / 0.05);
+}
+
+@media (width <= 768px) {
+  page[pve] game-table {
+    margin-bottom: calc(var(--unit) * -3);
+  }
+}
+
+page-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: calc(var(--unit) * 6);
+  gap: calc(var(--unit) * 4);
+}
+
+@media (width <= 768px) {
+  page-content {
+    padding: calc(var(--unit) * 3);
+    gap: calc(var(--unit) * 3);
+  }
+}
+
+@layer modifiers {
+  kingstone {
+    display: block;
+  }
+}
+
+icon-cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--unit) * 7);
+  height: calc(var(--unit) * 7);
+  flex: none;
+  border-radius: calc(var(--unit) * 0.75);
+  background: oklch(from var(--foreground) l c h / 0.05);
+}
+
+ability-tile-ticks {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, -75%);
+  width: calc(var(--unit) * 3.5);
+  height: calc(var(--unit) * 3.5);
+  background: linear-gradient(180deg, oklch(0.99 0.006 85), oklch(0.925 0.006 85));
+  border: 1px solid var(--edge, oklch(0.825 0.011 85));
+  border-radius: calc(var(--unit) * 1);
+  color: oklch(0.465 0.0144 85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: calc(var(--unit) * 2.5);
+  line-height: 0;
+}
+
+icon-cell ability-tile-ticks {
+  width: auto;
+  min-width: calc(var(--unit) * 3);
+  height: calc(var(--unit) * 3);
+  margin-top: calc(var(--unit) * 0.5);
+  font-size: calc(var(--unit) * 2.75);
+}
+
+progress-bar {
+  display: block;
+  height: calc(var(--unit) * 2);
+  background: var(--border);
+  border-radius: calc(var(--unit) * 1);
+  overflow: hidden;
+}
+
+progress-bar > div {
+  height: 100%;
+  background: var(--primary);
+  transition: width 200ms ease;
+}
+
+[combat-ring] {
+  position: relative;
+  width: calc(var(--unit) * 125);
+  height: calc(var(--unit) * 125);
+  margin: 0 auto;
+}
+
+[dnd-item]:not([dnd-item='false']) {
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+
+[dnd-item]:not([dnd-item='false']):active {
+  cursor: grabbing;
+}
+
+[dnd-ghost] {
+  cursor: grabbing;
+}
+
+[dnd-placeholder] {
+  pointer-events: none;
+}
+
+coin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  /* background: var(--white);
+  border: 1px solid var(--coin-platinum); */
+  /* box-shadow: 1px 1px 0 oklch(from var(--black) l c h / 0.5); */
+}
+
+coin stack icon[coin-platinum] {
+  background: radial-gradient(
+    circle at 35% 28%,
+    oklch(from var(--coin-platinum) calc(l + 0.18) c h),
+    var(--coin-platinum) 55%,
+    oklch(from var(--coin-platinum) calc(l - 0.13) c h)
+  );
+  filter: drop-shadow(1px 0 0 var(--coin-outline)) drop-shadow(-1px 0 0 var(--coin-outline))
+    drop-shadow(0 1px 0 var(--coin-outline)) drop-shadow(0 -1px 0 var(--coin-outline));
+  --coin-outline: oklch(from var(--coin-platinum) calc(l - 0.4) c h / 0.85);
+}
+
+coin stack icon[back] {
+  background: oklch(from var(--coin-platinum) calc(l - 0.62) c h / 0.55);
+  transform: scale(1.2, 1.1);
+}
+
+icon-cell coin stack {
+  transform: scaleY(0.88);
+}
+
+[golden-btn] {
+  all: unset;
+  cursor: pointer;
+  position: relative;
+  font-family: var(--font-sans);
+  font-weight: 700;
+  font-size: calc(var(--unit) * 4);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  text-indent: 0.2em;
+  padding: calc(var(--unit) * 2) calc(var(--unit) * 6);
+  color: oklch(from var(--gold-deep) 0.34 calc(c * 0.85) h);
+  text-shadow: 0 1px 0 oklch(from var(--gold-shine) l c h / 0.55);
+  clip-path: polygon(
+    calc(var(--unit) * 2) 0,
+    calc(100% - var(--unit) * 2) 0,
+    100% calc(var(--unit) * 2),
+    100% calc(100% - var(--unit) * 2),
+    calc(100% - var(--unit) * 2) 100%,
+    calc(var(--unit) * 2) 100%,
+    0 calc(100% - var(--unit) * 2),
+    0 calc(var(--unit) * 2)
+  );
+  background:
+    radial-gradient(
+      ellipse farthest-corner at right bottom,
+      var(--gold-shine) 0%,
+      var(--gold-warm) 15%,
+      var(--gold-deep) 45%,
+      var(--gold-shadow) 65%,
+      transparent 90%
+    ),
+    radial-gradient(
+      ellipse farthest-corner at left top,
+      var(--white) 0%,
+      var(--gold-shine) 12%,
+      var(--gold-warm) 35%,
+      var(--gold-shadow) 75%,
+      var(--gold-shadow) 100%
+    );
+  box-shadow:
+    inset 0 1px 0 oklch(from var(--gold-shine) l c h / 0.9),
+    inset 0 -2px 3px oklch(from var(--gold-shadow) l c h / 0.7);
+  filter: drop-shadow(0 2px 4px var(--scrim-3));
+}
+
+[golden-btn]:disabled {
+  cursor: not-allowed;
+  filter: grayscale(0.9) brightness(0.85);
+  text-shadow: none;
+}
+
+/* ---- Stylecheat form-element overrides ---- */
+input:not([type='checkbox'], [type='radio'], [type='range']):not(:disabled)::placeholder,
+textarea:not(:disabled)::placeholder {
+  color: oklch(0.6 0 0);
+}
+
+select:not(:disabled) {
+  color: var(--popover-foreground);
+}
+
+input:not([type='checkbox'], [type='radio'], [type='range']):disabled,
+textarea:disabled,
+select:disabled {
+  background-color: var(--input);
+  color: var(--foreground);
+  -webkit-text-fill-color: var(--foreground);
+  box-shadow: inset 0 0 0 1px var(--border);
+  opacity: 0.45;
+}
+
+button[primary]:disabled {
+  background-color: oklch(from var(--primary) l c h / 0.12);
+  color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+  box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.2);
+  opacity: 0.45;
+}
+
+button[danger] {
+  background-color: oklch(from var(--destructive) l c h / 0.12);
+  color: oklch(from var(--destructive) calc(l - 0.2 * var(--theme-sign)) c h);
+  box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.2);
+}
+
+button[danger]:not(:disabled):hover {
+  background-color: oklch(from var(--destructive) l c h / 0.2);
+  box-shadow: inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.3);
+}
+
+button[success] {
+  background-color: oklch(from var(--hue-green) l c h / 0.12);
+  color: oklch(from var(--hue-green) calc(l - 0.2 * var(--theme-sign)) c h);
+  box-shadow: inset 0 0 0 1px oklch(from var(--hue-green) l c h / 0.2);
+}
+
+button[success]:not(:disabled):hover {
+  background-color: oklch(from var(--hue-green) l c h / 0.2);
+  box-shadow: inset 0 0 0 1px oklch(from var(--hue-green) l c h / 0.3);
+}
+
+button[secondary]:disabled {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  box-shadow: inset 0 0 0 1px var(--border);
+  opacity: 0.45;
+}
+
+button[tertiary]:disabled {
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--secondary-foreground);
+  opacity: 0.45;
+}
+
+tabs {
+  --tab-surface: var(--card);
+  padding-inline: calc(var(--unit) * 6);
+}
+
+tabs > tab {
+  font-family: var(--font-heading);
+}
+
+tab-count {
+  margin-inline: 0;
+  opacity: 0.55;
+  font-variant-numeric: tabular-nums;
+}
+
+teamplay-list tabs {
+  margin-inline: calc(var(--unit) * -6);
+}
+
+page[armory] [vendor-filters] {
+  padding-top: calc(var(--unit) * 2);
+}
+
+@media (width <= 768px) {
+  teamplay-list tabs {
+    margin-inline: calc(var(--unit) * -3);
+  }
+
+  page[armory] [vendor-filters] {
+    flex-wrap: wrap;
+  }
+}
+
+input[type='checkbox']:disabled,
+input[type='radio']:disabled {
+  background-color: var(--input);
+  box-shadow: inset 0 0 0 1px var(--border);
+  opacity: 0.45;
+}
+
+label:has(input[type='checkbox']:disabled, input[type='radio']:disabled) {
+  color: var(--foreground);
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+label input[type='checkbox']:disabled,
+label input[type='radio']:disabled {
+  opacity: 1;
+}
+/* ---- end Stylecheat form-element overrides ---- */
+
+@media (max-width: 768px) {
+  [sm-hide] {
+    display: none;
+  }
+}
+
+[tooltip-card] {
+  --tooltip-base: var(--card);
+  width: calc(var(--unit) * 76);
+  gap: calc(var(--unit) * 3);
+  padding: calc(var(--unit) * 5);
+  font-size: calc(var(--unit) * 3.75);
+  background: var(--tooltip-base);
+}
+
+[tooltip-card]:has([equipment-name]) {
+  width: fit-content;
+  min-width: calc(var(--unit) * 76);
+}
+
+[tooltip-card]:has([equipment-name]) [tooltip-desc] {
+  max-width: calc(var(--unit) * 66);
+}
+
+[tooltip-card]:has([equipment-name]) crow [tooltip-desc] {
+  font-size: calc(var(--unit) * 3.5);
+}
+
+[tooltip-card] > crow:has([equipment-name]):has(ability-tile) {
+  margin-top: calc(var(--unit) * -2);
+}
+
+[equipment-abilities] {
+  align-items: flex-end;
+}
+
+[tooltip-card]:has([equipment-name]):not(:has([equipment-abilities])) [tooltip-name] {
+  max-width: none;
+}
+
+[tooltip-card][tinted],
+[tooltip-card][ability-card] {
+  --tint: var(--card);
+  position: relative;
+  border-color: oklch(from var(--tint) l calc(c * 0.5) h / 0.5);
+  background:
+    linear-gradient(
+      180deg,
+      oklch(from var(--tint) l c h / 0.14),
+      oklch(from var(--tint) l c h / 0.03) 60%
+    ),
+    var(--tooltip-base);
+}
+
+[tooltip-card]:is([fire], [frost], [earth], [nature], [lightning]) {
+  --tint: var(--element-color);
+  --tooltip-base: var(--card);
+  box-shadow: inset 0 0 0 1px oklch(from var(--element-color) l c h / 0.7);
+}
+
+[tooltip-card][all] {
+  --tooltip-base: var(--card);
+  box-shadow: inset 0 0 0 1px oklch(from var(--element-color) l c h / 0.6);
+  background:
+    linear-gradient(180deg, transparent, var(--tooltip-base) 70%),
+    linear-gradient(
+      90deg,
+      oklch(from var(--element-fire) l c h / 0.16),
+      oklch(from var(--element-lightning) l c h / 0.16),
+      oklch(from var(--element-nature) l c h / 0.16),
+      oklch(from var(--element-frost) l c h / 0.16),
+      oklch(from var(--element-earth) l c h / 0.16)
+    ),
+    var(--tooltip-base);
+}
+
+[tooltip-card]:is([fire], [frost], [earth], [nature], [lightning], [all]) [tooltip-name] {
+  color: oklch(from var(--element-color) calc(l - 0.2 * var(--theme-sign)) c h);
+}
+
+[tooltip-card][multi] {
+  --element-color: var(--hue-purple);
+  --tooltip-base: var(--card);
+  box-shadow: inset 0 0 0 1px oklch(from var(--hue-purple) l c h / 0.6);
+  background:
+    linear-gradient(180deg, transparent, var(--tooltip-base) 70%), var(--spectrum-wash),
+    var(--tooltip-base);
+}
+
+[tooltip-heading] status-chip[round] {
+  width: calc(var(--unit) * 7);
+  height: calc(var(--unit) * 7);
+  transform: none;
+}
+
+[tooltip-heading] status-chip[round] [status-icon] icon {
+  font-size: calc(var(--unit) * 4.2);
+}
+
+[tooltip-card]:has(tooltip-stats) [tooltip-name] {
+  min-height: calc(var(--unit) * 8);
+}
+
+[tooltip-card] hr {
+  margin-top: calc(var(--unit) * 2);
+}
+
+[tooltip-name] {
+  text-wrap: pretty;
+  font-size: calc(var(--unit) * 5);
+  font-weight: normal;
+  color: var(--foreground);
+  min-width: calc(var(--unit) * 25);
+  max-width: calc(var(--unit) * 40);
+}
+
+[tooltip-desc] {
+  font-size: calc(var(--unit) * 3.25);
+  color: var(--muted-foreground);
+  text-wrap: pretty;
+  text-align: left;
+  font-style: italic;
+}
+
+[tooltip-card]:has([equipment-name]) > p[tooltip-desc] {
+  font-style: italic;
+  text-align: center;
+  margin: 0 auto;
+}
+
+[tooltip-card]:has([equipment-name]) > p[tooltip-desc]::before {
+  content: '“';
+}
+
+[tooltip-card]:has([equipment-name]) > p[tooltip-desc]::after {
+  content: '”';
+}
+
+[tooltip-card] strong:is([fire], [frost], [earth], [nature], [lightning]) {
+  color: oklch(from var(--element-color) calc(l - 0.2 * var(--theme-sign)) c h);
+}
+
+[tooltip-card] strong[multi] {
+  color: oklch(from var(--hue-purple) calc(l - 0.2 * var(--theme-sign)) c h);
+}
+
+[tooltip-title] {
+  color: var(--muted-foreground);
+}
+
+[tooltip-stat] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 2);
+  font-size: calc(var(--unit) * 3.75);
+  color: var(--muted-foreground);
+}
+
+[tooltip-stat] strong {
+  flex: none;
+}
+
+[tooltip-stat] > span:last-child {
+  flex: 0 1 auto;
+  min-width: 0;
+  text-align: right;
+}
+
+[tooltip-stat] stat-leader {
+  flex: 1;
+  align-self: center;
+  height: 0;
+  border-bottom: 1px dotted var(--divider);
+  opacity: 0.6;
+  transform: translateY(calc(var(--unit) * 1.5));
+}
+
+[tooltip-card] ability-track[small] [ability-icon] > icon {
+  font-size: calc(var(--unit) * 4.8);
+}
+
+[tooltip-tag] {
+  display: inline-block;
+  font-size: calc(var(--unit) * 2);
+  padding: calc(var(--unit) * 0.25) calc(var(--unit) * 1.5);
+  border-radius: calc(var(--unit) * 0.75);
+  margin-top: calc(var(--unit) * 1);
+  background: var(--accent);
+  color: var(--muted-foreground);
+}
+
+[tooltip-tag][special] {
+  background: oklch(from var(--rarity-epic) calc(l + 0.3) calc(c * 0.4) h);
+  color: oklch(from var(--rarity-epic) calc(l * 0.7) c h);
+}
+
+/* Achievement banner (Royal Double-Frame) — shared by /achievements, the center
+   reveal, and the deep-link flip. Earned by default; [locked] strips it to a drab
+   placeholder. */
+achievement-card {
+  /* Light (default) theme tokens; the [dark] block below swaps them so the banner
+     follows the global dark-mode toggle on both the page and the reveal. */
+  --gold-grad: linear-gradient(180deg, var(--gold-warm), var(--gold-deep) 55%, var(--gold-shadow));
+  --ac-bg: linear-gradient(180deg, oklch(0.97 0.02 85), oklch(0.9 0.035 80));
+  --ac-inset: oklch(0.99 0.012 90);
+  --ac-drop: oklch(0 0 0 / 0.2);
+  --ac-icon-color: var(--gold-deep);
+  --ac-icon-bg: radial-gradient(circle at 30% 25%, oklch(0.99 0.012 90), oklch(0.9 0.035 80));
+  --ac-eyebrow: oklch(from var(--gold-deep) calc(l - 0.05) c h);
+  --ac-ink: oklch(0.42 0.05 70);
+  --ac-track: oklch(0 0 0 / 0.15);
+  --ac-locked-bg: oklch(0.9 0.01 80);
+  --ac-locked-icon-bg: oklch(0.94 0.01 85);
+  --ac-locked-icon-ring: oklch(from var(--gold-deep) l c h / 0.3);
+  --ac-locked-ink: oklch(0.38 0.02 75);
+  --ac-locked-filter: brightness(0.98);
+  --ac-locked-opacity: 0.95;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 5);
+  width: 100%;
+  max-width: calc(var(--unit) * 150);
+  padding: calc(var(--unit) * 5) calc(var(--unit) * 8);
+  overflow: hidden;
+  background: var(--ac-bg);
+  border: calc(var(--unit) * 1) solid transparent;
+  border-image: var(--gold-grad) 1;
+  box-shadow:
+    inset 0 0 0 1px var(--ac-inset),
+    inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.5),
+    0 0 calc(var(--unit) * 16) oklch(from var(--gold-warm) l c h / 0.3),
+    0 calc(var(--unit) * 4) calc(var(--unit) * 10) var(--ac-drop);
+}
+
+[dark] achievement-card {
+  --gold-grad: linear-gradient(
+    180deg,
+    var(--gold-shine),
+    var(--gold-warm) 45%,
+    var(--gold-deep) 55%,
+    var(--gold-shadow)
+  );
+  --ac-bg: linear-gradient(180deg, oklch(0.3 0.03 70), oklch(0.18 0.02 65));
+  --ac-inset: oklch(0.1 0.02 60);
+  --ac-drop: oklch(0 0 0 / 0.6);
+  --ac-icon-color: var(--gold-shine);
+  --ac-icon-bg: radial-gradient(circle at 30% 25%, oklch(0.4 0.05 70), oklch(0.16 0.02 60));
+  --ac-eyebrow: oklch(from var(--gold-warm) calc(l + 0.05) c h);
+  --ac-ink: oklch(0.82 0.02 70);
+  --ac-track: oklch(0 0 0 / 0.45);
+  --ac-locked-bg: oklch(0.2 0.01 65);
+  --ac-locked-icon-bg: oklch(0.16 0.01 60);
+  --ac-locked-icon-ring: oklch(0 0 0 / 0.5);
+  --ac-locked-ink: oklch(0.84 0.015 75);
+  --ac-locked-filter: brightness(0.92);
+  --ac-locked-opacity: 0.9;
+}
+
+achievement-card icon {
+  display: block;
+}
+
+achievement-card icon[lock] {
+  display: none;
+}
+
+achievement-card[locked] icon:not([lock]) {
+  display: none;
+}
+
+achievement-card[locked] icon[lock] {
+  display: block;
+}
+
+ac-corner {
+  position: absolute;
+  width: calc(var(--unit) * 3.5);
+  height: calc(var(--unit) * 3.5);
+  border: calc(var(--unit) * 0.75) solid var(--gold-warm);
+}
+
+ac-corner[tl] {
+  top: calc(var(--unit) * 3.5);
+  left: calc(var(--unit) * 3.5);
+  border-right: 0;
+  border-bottom: 0;
+}
+
+ac-corner[tr] {
+  top: calc(var(--unit) * 3.5);
+  right: calc(var(--unit) * 3.5);
+  border-left: 0;
+  border-bottom: 0;
+}
+
+ac-corner[bl] {
+  bottom: calc(var(--unit) * 3.5);
+  left: calc(var(--unit) * 3.5);
+  border-right: 0;
+  border-top: 0;
+}
+
+ac-corner[br] {
+  bottom: calc(var(--unit) * 3.5);
+  right: calc(var(--unit) * 3.5);
+  border-left: 0;
+  border-top: 0;
+}
+
+ac-icon {
+  flex: none;
+  width: calc(var(--unit) * 17);
+  height: calc(var(--unit) * 17);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: calc(var(--unit) * 9);
+  color: var(--ac-icon-color);
+  background: var(--ac-icon-bg);
+  box-shadow:
+    inset 0 0 0 calc(var(--unit) * 0.75) var(--gold-deep),
+    0 0 0 calc(var(--unit) * 0.5) var(--ac-inset),
+    0 0 calc(var(--unit) * 6) oklch(from var(--gold-warm) l c h / 0.4);
+}
+
+ac-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 0.5);
+}
+
+ac-eyebrow {
+  font-family: var(--font-sans);
+  font-size: calc(var(--unit) * 2.75);
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--ac-eyebrow);
+}
+
+ac-title {
+  display: block;
+  font-family: var(--font-heading);
+  font-weight: 700;
+  line-height: 1.05;
+  font-size: calc(var(--unit) * 8);
+  background: var(--gold-grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+ac-desc {
+  font-family: var(--font-sans);
+  font-size: calc(var(--unit) * 3.5);
+  color: var(--ac-ink);
+}
+
+ac-progress {
+  margin-top: calc(var(--unit) * 1.5);
+  height: calc(var(--unit) * 1.5);
+  border-radius: calc(var(--unit) * 1);
+  background: var(--ac-track);
+  overflow: hidden;
+}
+
+ac-progress-fill {
+  display: block;
+  height: 100%;
+  width: calc(attr(p type(<number>)) * 100%);
+  border-radius: inherit;
+  background: var(--gold-grad);
+}
+
+achievement-card:not([locked]) ac-progress {
+  display: none;
+}
+
+achievement-card[locked] {
+  filter: grayscale(1) var(--ac-locked-filter);
+  opacity: var(--ac-locked-opacity);
+  border-image: none;
+  border-color: oklch(from var(--gold-deep) l c h / 0.35);
+  background: var(--ac-locked-bg);
+  box-shadow:
+    inset 0 0 0 1px var(--ac-inset),
+    inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.45);
+}
+
+achievement-card[locked] ac-corner {
+  display: none;
+}
+
+achievement-card[locked] ac-icon {
+  border-radius: calc(var(--unit) * 1);
+  background: var(--ac-locked-icon-bg);
+  box-shadow: inset 0 0 0 1px var(--ac-locked-icon-ring);
+  color: var(--ac-locked-ink);
+}
+
+achievement-card[locked] ac-title {
+  background: none;
+  -webkit-background-clip: border-box;
+  background-clip: border-box;
+  -webkit-text-fill-color: currentColor;
+  color: var(--ac-locked-ink);
+}
+
+/* Deep-link reveal: shake the locked face, then flip to the earned face. */
+ac-flip {
+  display: block;
+  perspective: calc(var(--unit) * 300);
+}
+
+ac-flip-inner {
+  position: relative;
+  transform-style: preserve-3d;
+  animation:
+    acShake 0.8s ease both,
+    acFlip 0.5s ease 0.8s forwards;
+}
+
+ac-flip-face {
+  display: block;
+  backface-visibility: hidden;
+}
+
+ac-flip-face[back] {
+  position: absolute;
+  inset: 0;
+  transform: rotateY(180deg);
+}
+
+@keyframes acShake {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(calc(var(--unit) * -1)) rotate(-0.6deg);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(calc(var(--unit) * 1)) rotate(0.6deg);
+  }
+}
+
+@keyframes acFlip {
+  to {
+    transform: rotateY(180deg);
+  }
+}
diff --git a/css/stylecheat.css b/css/stylecheat.css
new file mode 100644
index 00000000..f35882b5
--- /dev/null
+++ b/css/stylecheat.css
@@ -0,0 +1,4101 @@
+@layer context, elements, modifiers;
+
+@layer context {
+  /* ---- Iconice.css ---- */
+  :root {
+    --icon-bell: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16.023%2012.5c0-4.5-4-3.5-4-7%200-0.29-0.028-0.538-0.079-0.749-0.263-1.766-1.44-3.183-2.965-3.615%200.014-0.062%200.021-0.125%200.021-0.191%200-0.52-0.45-0.945-1-0.945s-1%200.425-1%200.945c0%200.065%200.007%200.129%200.021%200.191-1.71%200.484-2.983%202.208-3.020%204.273-0.001%200.030-0.001%200.060-0.001%200.091%200%203.5-4%202.5-4%207%200%201.191%202.665%202.187%206.234%202.439%200.336%200.631%201.001%201.061%201.766%201.061s1.43-0.43%201.766-1.061c3.568-0.251%206.234-1.248%206.234-2.439%200-0.004-0-0.007-0-0.011l0.024%200.011zM12.91%2013.345c-0.847%200.226-1.846%200.389-2.918%200.479-0.089-1.022-0.947-1.824-1.992-1.824s-1.903%200.802-1.992%201.824c-1.072-0.090-2.071-0.253-2.918-0.479-1.166-0.311-1.724-0.659-1.928-0.845%200.204-0.186%200.762-0.534%201.928-0.845%201.356-0.362%203.1-0.561%204.91-0.561s3.554%200.199%204.91%200.561c1.166%200.311%201.724%200.659%201.928%200.845-0.204%200.186-0.762%200.534-1.928%200.845z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-book: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14%202v13h-10.5c-0.829%200-1.5-0.672-1.5-1.5s0.671-1.5%201.5-1.5h9.5v-12h-10c-1.1%200-2%200.9-2%202v12c0%201.1%200.9%202%202%202h12v-14h-1z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M3.501%2013v0c-0%200-0.001%200-0.001%200-0.276%200-0.5%200.224-0.5%200.5s0.224%200.5%200.5%200.5c0%200%200.001-0%200.001-0v0h9.498v-1h-9.498z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-bullhorn: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16%206.707c0-3.139-0.919-5.687-2.054-5.707%200.005-0%200.009-0%200.014-0h-1.296c0%200-3.044%202.287-7.425%203.184-0.134%200.708-0.219%201.551-0.219%202.523s0.085%201.816%200.219%202.523c4.382%200.897%207.425%203.184%207.425%203.184h1.296c-0.005%200-0.009-0-0.014-0.001%201.136-0.020%202.054-2.567%202.054-5.707zM13.513%2011.551c-0.147%200-0.305-0.152-0.387-0.243-0.197-0.22-0.387-0.562-0.55-0.989-0.363-0.957-0.564-2.239-0.564-3.611s0.2-2.655%200.564-3.611c0.162-0.428%200.353-0.77%200.55-0.99%200.081-0.091%200.24-0.243%200.387-0.243s0.305%200.152%200.387%200.243c0.197%200.22%200.387%200.562%200.55%200.99%200.363%200.957%200.564%202.239%200.564%203.611s-0.2%202.655-0.564%203.611c-0.162%200.428-0.353%200.77-0.55%200.989-0.081%200.091-0.24%200.243-0.387%200.243zM3.935%206.707c0-0.812%200.060-1.6%200.173-2.33-0.74%200.102-1.39%200.161-2.193%200.161-1.048%200-1.048%200-1.048%200l-0.867%201.479v1.378l0.867%201.479c0%200%200%200%201.048%200%200.803%200%201.453%200.059%202.193%200.161-0.113-0.729-0.173-1.518-0.173-2.33zM5.752%2010.034l-2-0.383%201.279%205.024c0.066%200.26%200.324%200.391%200.573%200.291l1.852-0.741c0.249-0.1%200.349-0.374%200.222-0.611l-1.926-3.581zM13.513%208.574c-0.057%200-0.118-0.059-0.149-0.094-0.076-0.085-0.149-0.217-0.212-0.381-0.14-0.369-0.217-0.863-0.217-1.392s0.077-1.023%200.217-1.392c0.063-0.165%200.136-0.297%200.212-0.381%200.031-0.035%200.092-0.094%200.149-0.094s0.118%200.059%200.149%200.094c0.076%200.085%200.149%200.217%200.212%200.381%200.14%200.369%200.217%200.863%200.217%201.392s-0.077%201.023-0.217%201.392c-0.063%200.165-0.136%200.297-0.212%200.381-0.031%200.035-0.092%200.094-0.149%200.094z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-checkmark: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M432%2064l-240%20240-112-112-80%2080%20192%20192%20320-320z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+    --icon-chevron-left: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.4%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%206)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M10.25%2C1.75l1.5%2C1.5-4.5%2C4.5%2C4.5%2C4.5-1.5%2C1.5-6-6L10.25%2C1.75Z%22%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-chevron-down: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M2%205.5l1.5-1.5%204.5%204.5%204.5-4.5%201.5%201.5-6%206-6-6z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-chevron-right: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.4%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%206)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M5.75%2C13.75l-1.5-1.5%2C4.5-4.5L4.25%2C3.25l1.5-1.5%2C6%2C6-6%2C6Z%22%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-clock: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M10.293%2011.707l-3.293-3.293v-4.414h2v3.586l2.707%202.707zM8%200c-4.418%200-8%203.582-8%208s3.582%208%208%208%208-3.582%208-8-3.582-8-8-8zM8%2014c-3.314%200-6-2.686-6-6s2.686-6%206-6c3.314%200%206%202.686%206%206s-2.686%206-6%206z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-chevron-up: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3C!--%20Generator%3A%20Adobe%20Illustrator%2029.8.4%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.1%20Build%206)%20%20--%3E%0A%20%20%3Cpath%20d%3D%22M14%2C10l-1.5%2C1.5-4.5-4.5-4.5%2C4.5-1.5-1.5%2C6-6%2C6%2C6Z%22%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-cog: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.59%209.535c-0.839-1.454-0.335-3.317%201.127-4.164l-1.572-2.723c-0.449%200.263-0.972%200.414-1.529%200.414-1.68%200-3.042-1.371-3.042-3.062h-3.145c0.004%200.522-0.126%201.051-0.406%201.535-0.839%201.454-2.706%201.948-4.17%201.106l-1.572%202.723c0.453%200.257%200.845%200.634%201.123%201.117%200.838%201.452%200.336%203.311-1.12%204.16l1.572%202.723c0.448-0.261%200.967-0.41%201.522-0.41%201.675%200%203.033%201.362%203.042%203.046h3.145c-0.001-0.517%200.129-1.040%200.406-1.519%200.838-1.452%202.7-1.947%204.163-1.11l1.572-2.723c-0.45-0.257-0.839-0.633-1.116-1.113zM8%2011.24c-1.789%200-3.24-1.45-3.24-3.24s1.45-3.24%203.24-3.24c1.789%200%203.24%201.45%203.24%203.24s-1.45%203.24-3.24%203.24z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-credit-card: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.5%202h-13c-0.825%200-1.5%200.675-1.5%201.5v9c0%200.825%200.675%201.5%201.5%201.5h13c0.825%200%201.5-0.675%201.5-1.5v-9c0-0.825-0.675-1.5-1.5-1.5zM1.5%203h13c0.271%200%200.5%200.229%200.5%200.5v1.5h-14v-1.5c0-0.271%200.229-0.5%200.5-0.5zM14.5%2013h-13c-0.271%200-0.5-0.229-0.5-0.5v-4.5h14v4.5c0%200.271-0.229%200.5-0.5%200.5zM2%2010h1v2h-1zM4%2010h1v2h-1zM6%2010h1v2h-1z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-cross: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M507.331%20411.33c-0.002-0.002-0.004-0.004-0.006-0.005l-155.322-155.325%20155.322-155.325c0.002-0.002%200.004-0.003%200.006-0.005%201.672-1.673%202.881-3.627%203.656-5.708%202.123-5.688%200.912-12.341-3.662-16.915l-73.373-73.373c-4.574-4.573-11.225-5.783-16.914-3.66-2.080%200.775-4.035%201.984-5.709%203.655%200%200.002-0.002%200.003-0.004%200.005l-155.324%20155.326-155.324-155.325c-0.002-0.002-0.003-0.003-0.005-0.005-1.673-1.671-3.627-2.88-5.707-3.655-5.69-2.124-12.341-0.913-16.915%203.66l-73.374%2073.374c-4.574%204.574-5.784%2011.226-3.661%2016.914%200.776%202.080%201.985%204.036%203.656%205.708%200.002%200.001%200.003%200.003%200.005%200.005l155.325%20155.324-155.325%20155.326c-0.001%200.002-0.003%200.003-0.004%200.005-1.671%201.673-2.88%203.627-3.657%205.707-2.124%205.688-0.913%2012.341%203.661%2016.915l73.374%2073.373c4.575%204.574%2011.226%205.784%2016.915%203.661%202.080-0.776%204.035-1.985%205.708-3.656%200.001-0.002%200.003-0.003%200.005-0.005l155.324-155.325%20155.324%20155.325c0.002%200.001%200.004%200.003%200.006%200.004%201.674%201.672%203.627%202.881%205.707%203.657%205.689%202.123%2012.342%200.913%2016.914-3.661l73.373-73.374c4.574-4.574%205.785-11.227%203.662-16.915-0.776-2.080-1.985-4.034-3.657-5.707z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+    --icon-crow: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20345.5%20341.9%22%3E%3Cpath%20d%3D%22M157.4%20249.7c-.3-.7-12-6-13-6l-46%2016.9c-13.8%2013.2-52.6%2068.1-71.8%2066.6-2.9-.2-4.3-2.8-7.1-2.9s-5.2%203.7-10.9%202.9c-13.3-1.9-10.8-4%205.4-22.4s35.9-34.2%2053.4-51.3c7.6-7.4%2015.1-14.9%2022-23l.4-1.4c-2.9-2.7-4.7%204-2.7-7.9s18.3-37.5%2025.3-48.5c15-23.8%2034.5-53.6%2055.2-72.4%206.2-5.6%2023.1-16%2026.8-21.1%2010.9-14.8%208.8-41.6%2022.1-58.7%2017.9-22.9%2056.4-27.6%2078.8-9%202.4%202%206.7%209.3%2010%2011s15.2%202.8%2020.5%204.5c3.4%201.1%2022.6%209.2%2019.4%2013.9l-36.7%2013.6c-4.7%208-11.4%2014.8-12.2%2025.2s2%204.9%209.2%2032.6-.3%2048.8-13.7%2072.6-32.6%2041.2-57.1%2053.1l-3.2%2013.3%2030.9%2032.9c5.8-1.5%2013-1.6%2018.2-2.7s6.8-5%2013.9-2.5c4.9%201.8%205.3%205.3%206.8%206.2s3.8.5%205.7%201.3c4.8%202%207.2%208.2%206.2%2013.2-1.6-.2-1.3-2.3-3-3.5-8.1-6.1-8.2%203.3-16.9%201.5%201.4%205.7%207%209.4%202.5%2016-.6%200-1.9-7.7-6.4-8.6-11.5%208.2-24.2-9-34.6-9.4-5.3-.2-12%204-19.9%203-5.2-.7-7.4-6.8-12.4-2.5-1.7%201.4-1.6%204.6-4%205.4-1.9-16.6%2015.3-14.2%2026.4-15%201.5-.1%202.9.8%202.5-1.5L220%20254.6c-4-1.5-6.8-3.2-9.5-6.5l-21.2%201.7c-3%202.5-12%2011.4-11.5%2015l27%2045.3c12%206.9%2031.1-4%2042.1%205.2%205%204.1%203.4%207.5%204.7%2012.2s4.9%207.6%201.8%2013.7c-3%20.6%201.3%202.6-2.9-4.5s-6.4-2.4-10.4-2.5c-2.1-.1-8-3.6-8.6-3l2%2010c-3.2%201.1-4.3-3.3-6.6-3.8s-5.5%201.4-10.2%200c-7.8-2.3-16.2-16-20.8-17.1s-11%203.2-18.6-1.3c-4-2.3-5.3-8.2-11.4-5.1-2%201.1-1.5%203.1-3.2%203.3-.5-9.3%206.1-12%2014.4-10.9%203.4.4%206.5%202.6%2010.1%202.9%201.5.1%203%20.6%202.5-1.5-7.3-12.7-14.6-25.7-22.9-37.9-2.8-4.3-8.1-7.9-8.9-13-.2-2.1.5-6.2-.2-7.3z%22%2F%3E%3C%2Fsvg%3E');
+    --icon-css-3: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202048%202048%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M1582.48%2C1627.13l120.816-1353.38%2C1.585-17.752H343.116l1.582%2C17.752%2C120.689%2C1353.6%2C1.006%2C11.285%2C10.872%2C3.018%2C541.588%2C150.346h8.685l543.064-150.568%2C10.87-3.014%2C1.009-11.289v.002ZM1025.111%2C555.45h395.75l-11.913%2C138.491-390.414%2C173.558%2C6.576%2C31.226h366.391l-42.175%2C483.261-325.538%2C90.259-325.432-90.106-20.667-231.443h134l10.737%2C117.345%2C1.042%2C11.374%2C11.027%2C2.929%2C186.463%2C49.539%2C8.493-.064%2C184.316-51.231%2C10.978-3.053.964-11.315%2C18.428-216.732%2C1.504-17.688h-578.959l-12.198-139.091%2C377.014-161.362%2C26.761-11.469-6.386-31.354h-414.572l-11.81-133.074h399.62Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-dark: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M355.656%20325.63c-9%201.5-18.25%202.25-27.5%202.25-92.75%200-168-75.25-168-168%200-31.75%209.25-62.75%2026-89.25-66.5%2019.75-114%2080.75-114%20153.25%200%2088.25%2071.75%20160%20160%20160%2048.25%200%2093.5-22%20123.5-58.25m50.75-21.249c-31.25%2067.75-99.75%20111.5-174.25%20111.5-105.75%200-192-86.25-192-192%200-103.75%2081.25-188%20184.75-191.75%207-.25%2012.75%203.75%2015.25%209.75%202.75%206.25%201%2013.5-3.75%2018-28.5%2026-44.25%2061.5-44.25%20100%200%2075%2061%20136%20136%20136q29.625%200%2057-12.75c6.25-2.75%2013.25-1.5%2018%203.25s6%2012%203.25%2018%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-desktop: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%201v10h16v-10h-16zM15%2010h-14v-8h14v8zM10.5%2012h-5l-0.5%202-1%201h8l-1-1z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-download: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%209l4-4h-3v-4h-2v4h-3zM11.636%207.364l-1.121%201.121%204.064%201.515-6.579%202.453-6.579-2.453%204.064-1.515-1.121-1.121-4.364%201.636v4l8%203%208-3v-4z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-earth: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%200c-4.418%200-8%203.582-8%208s3.582%208%208%208%208-3.582%208-8-3.582-8-8-8zM8%2015c-0.984%200-1.92-0.203-2.769-0.57l3.643-4.098c0.081-0.092%200.126-0.21%200.126-0.332v-1.5c0-0.276-0.224-0.5-0.5-0.5-1.765%200-3.628-1.835-3.646-1.854-0.094-0.094-0.221-0.146-0.354-0.146h-2c-0.276%200-0.5%200.224-0.5%200.5v3c0%200.189%200.107%200.363%200.276%200.447l1.724%200.862v2.936c-1.813-1.265-3-3.366-3-5.745%200-1.074%200.242-2.091%200.674-3h1.826c0.133%200%200.26-0.053%200.354-0.146l2-2c0.094-0.094%200.146-0.221%200.146-0.354v-1.21c0.634-0.189%201.305-0.29%202-0.29%201.1%200%202.141%200.254%203.067%200.706-0.065%200.055-0.128%200.112-0.188%200.172-0.567%200.567-0.879%201.32-0.879%202.121s0.312%201.555%200.879%202.121c0.569%200.569%201.332%200.879%202.119%200.879%200.049%200%200.099-0.001%200.149-0.004%200.216%200.809%200.605%202.917-0.131%205.818-0.007%200.027-0.011%200.055-0.013%200.082-1.271%201.298-3.042%202.104-5.002%202.104z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-embed: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%2011.5l1.5%201.5%205-5-5-5-1.5%201.5%203.5%203.5z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M7%204.5l-1.5-1.5-5%205%205%205%201.5-1.5-3.5-3.5z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M10.958%202.352l1.085%200.296-3%2011-1.085-0.296%203-11z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-eye: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201536%201536%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M575.841%20768c0%20105.951%2086.049%20192%20192%20192s192-86.049%20192-192v-1.599c-20.511%2020.799-48.639%2033.6-80.001%2033.6-61.791%200-111.999-50.241-111.999-111.999%200-44.481%2026.208-83.199%2063.681-101.121-19.839-7.041-41.28-10.881-63.681-10.881-105.921%200-192%2086.079-192%20192zM1492.959%20658.881c-119.040-151.362-408.96-402.882-724.8-402.882-316.161%200-606.369%20251.52-725.439%20402.879-26.88%2034.56-41.601%2072-42.561%20109.119%200.96%2037.119%2015.681%2074.559%2042.561%20109.119%20119.073%20151.395%20408.96%20402.885%20725.121%20402.885s606.048-251.487%20725.121-402.879c27.201-34.56%2041.919-72%2042.879-109.119-0.96-37.122-15.681-74.562-42.882-109.122zM767.841%201088.001c-176.64%200-320.001-143.361-320.001-320.001s143.361-320.001%20320.001-320.001%20320.001%20143.361%20320.001%20320.001c-0.003%20176.64-143.361%20320.001-320.001%20320.001z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-folder: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%2015l3-8h-13l-3%208zM2%206l-2%209v-13h4.5l2%202h6.5v2z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-heart-broken: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M11.8%201c2.318%200%204.2%201.882%204.2%204.2%200%204.566-4.935%205.982-8%2010.616-3.243-4.663-8-5.9-8-10.616%200-2.319%201.882-4.2%204.2-4.2%200.943%200%201.812%200.43%202.512%201.060l-1.213%201.94%203.5%202-2%205%205.5-6-3.5-2%200.967-1.451c0.553-0.34%201.175-0.549%201.833-0.549z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-heart: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M11.8%201c-1.682%200-3.129%201.368-3.799%202.797-0.671-1.429-2.118-2.797-3.8-2.797-2.318%200-4.2%201.882-4.2%204.2%200%204.716%204.758%205.953%208%2010.616%203.065-4.634%208-6.050%208-10.616%200-2.319-1.882-4.2-4.2-4.2z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-home: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16%209.226l-8-6.21-8%206.21v-2.532l8-6.21%208%206.21zM14%209v6h-4v-4h-4v4h-4v-6l6-4.5z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-html-5: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0.946%200l1.284%2014.4%205.762%201.6%205.777-1.602%201.286-14.398h-14.108zM12.668%2013.482l-4.644%201.287v0.007l-0.012-0.004-0.012%200.004v-0.007l-4.644-1.287-1.098-12.304h11.508l-1.098%2012.304zM10.168%208.284l-0.204%202.29-1.972%200.532-1.967-0.53-0.126-1.41h-1.773l0.247%202.774%203.626%201.003%203.615-1.003%200.485-5.422h-6.437l-0.161-1.809h6.758l0.158-1.766h-8.847l0.477%205.341z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%2014h-10v-2l3-5%204.109%205%202.891-2v4z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13%207.5c0%200.828-0.672%201.5-1.5%201.5s-1.5-0.672-1.5-1.5%200.672-1.5%201.5-1.5c0.828%200%201.5%200.672%201.5%201.5z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.341%203.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-7.75c-0.689%200-1.25%200.561-1.25%201.25v13.5c0%200.689%200.561%201.25%201.25%201.25h11.5c0.689%200%201.25-0.561%201.25-1.25v-9.75c0-0.224-0.068-0.615-0.659-1.421zM12.271%202.729c0.48%200.48%200.856%200.912%201.134%201.271h-2.406v-2.405c0.359%200.278%200.792%200.654%201.271%201.134zM14%2014.75c0%200.136-0.114%200.25-0.25%200.25h-11.5c-0.135%200-0.25-0.114-0.25-0.25v-13.5c0-0.135%200.115-0.25%200.25-0.25%200%200%207.749-0%207.75%200v3.5c0%200.276%200.224%200.5%200.5%200.5h3.5v9.75z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-layout: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20768%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M160%2064c-26.496%200-50.56%2010.784-67.872%2028.128s-28.128%2041.376-28.128%2067.872v448c0%2026.496%2010.784%2050.56%2028.128%2067.872s41.376%2028.128%2067.872%2028.128h448c26.496%200%2050.56-10.784%2067.872-28.128s28.128-41.376%2028.128-67.872v-448c0-26.496-10.784-50.56-28.128-67.872s-41.376-28.128-67.872-28.128zM640%20256h-512v-96c0-8.832%203.552-16.8%209.376-22.624s13.792-9.376%2022.624-9.376h448c8.832%200%2016.8%203.552%2022.624%209.376s9.376%2013.792%209.376%2022.624zM256%20320v320h-96c-8.832%200-16.8-3.552-22.624-9.376s-9.376-13.792-9.376-22.624v-288zM320%20640v-320h320v288c0%208.832-3.552%2016.8-9.376%2022.624s-13.792%209.376-22.624%209.376z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-images: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M17%202h-1v-1c0-0.55-0.45-1-1-1h-14c-0.55%200-1%200.45-1%201v12c0%200.55%200.45%201%201%201h1v1c0%200.55%200.45%201%201%201h14c0.55%200%201-0.45%201-1v-12c0-0.55-0.45-1-1-1zM2%203v10h-0.998c-0.001-0.001-0.001-0.001-0.002-0.002v-11.996c0.001-0.001%200.001-0.001%200.002-0.002h13.996c0.001%200.001%200.001%200.001%200.002%200.002v0.998h-12c-0.55%200-1%200.45-1%201v0zM17%2014.998c-0.001%200.001-0.001%200.001-0.002%200.002h-13.996c-0.001-0.001-0.001-0.001-0.002-0.002v-11.996c0.001-0.001%200.001-0.001%200.002-0.002h13.996c0.001%200.001%200.001%200.001%200.002%200.002v11.996z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15%205.5c0%200.828-0.672%201.5-1.5%201.5s-1.5-0.672-1.5-1.5%200.672-1.5%201.5-1.5%201.5%200.672%201.5%201.5z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16%2014h-12v-2l3.5-6%204%205h1l3.5-3z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-light: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20768%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M576%20384c0-53.024-21.536-101.056-56.224-135.776S437.024%20192%20384%20192s-101.056%2021.536-135.776%2056.224S192%20330.976%20192%20384s21.536%20101.056%2056.224%20135.776S330.976%20576%20384%20576s101.056-21.536%20135.776-56.224S576%20437.024%20576%20384m-64%200c0%2035.36-14.304%2067.296-37.504%2090.496S419.36%20512%20384%20512s-67.296-14.304-90.496-37.504S256%20419.36%20256%20384s14.304-67.296%2037.504-90.496S348.64%20256%20384%20256s67.296%2014.304%2090.496%2037.504S512%20348.64%20512%20384M352%2032v64c0%2017.664%2014.336%2032%2032%2032s32-14.336%2032-32V32c0-17.664-14.336-32-32-32s-32%2014.336-32%2032m0%20640v64c0%2017.664%2014.336%2032%2032%2032s32-14.336%2032-32v-64c0-17.664-14.336-32-32-32s-32%2014.336-32%2032M112.416%20157.664l45.44%2045.44c12.512%2012.512%2032.768%2012.512%2045.248%200s12.512-32.768%200-45.248l-45.44-45.44c-12.512-12.512-32.768-12.512-45.248%200s-12.512%2032.768%200%2045.248m452.48%20452.48%2045.44%2045.44c12.512%2012.512%2032.768%2012.512%2045.248%200s12.512-32.768%200-45.248l-45.44-45.44c-12.512-12.512-32.768-12.512-45.248%200s-12.512%2032.768%200%2045.248M32%20416h64c17.664%200%2032-14.336%2032-32s-14.336-32-32-32H32c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032m640%200h64c17.664%200%2032-14.336%2032-32s-14.336-32-32-32h-64c-17.664%200-32%2014.336-32%2032s14.336%2032%2032%2032M157.664%20655.584l45.44-45.44c12.512-12.512%2012.512-32.768%200-45.248s-32.768-12.512-45.248%200l-45.44%2045.44c-12.512%2012.512-12.512%2032.768%200%2045.248s32.768%2012.512%2045.248%200m452.48-452.48%2045.44-45.44c12.512-12.512%2012.512-32.768%200-45.248s-32.768-12.512-45.248%200l-45.44%2045.44c-12.512%2012.512-12.512%2032.768%200%2045.248s32.768%2012.512%2045.248%200%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-lock-open: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M128%20256v-64c0-106.039%2085.961-192%20192-192s192%2085.961%20192%20192v0h-96v64h128c35.346%200%2064%2028.654%2064%2064v0%20256c0%2035.346-28.654%2064-64%2064v0h-448c-35.346%200-64-28.654-64-64v0-256c0-35.2%2028.8-64%2064-64h32zM288%20471.36v72.64h64v-72.64c19.265-11.272%2032-31.861%2032-55.426%200-35.346-28.654-64-64-64s-64%2028.654-64%2064c0%2023.564%2012.735%2044.154%2031.698%2055.262l0.302%200.164zM224%20192v64h192v-64c0-53.019-42.981-96-96-96s-96%2042.981-96%2096v0z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-lock-closed: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M128%20256v-64c0-106.039%2085.961-192%20192-192s192%2085.961%20192%20192v0%2064h32c35.346%200%2064%2028.654%2064%2064v0%20256c0%2035.346-28.654%2064-64%2064v0h-448c-35.346%200-64-28.654-64-64v0-256c0-35.2%2028.8-64%2064-64h32zM288%20471.36v72.64h64v-72.64c19.265-11.272%2032-31.861%2032-55.426%200-35.346-28.654-64-64-64s-64%2028.654-64%2064c0%2023.564%2012.735%2044.154%2031.698%2055.262l0.302%200.164zM224%20192v64h192v-64c0-53.019-42.981-96-96-96s-96%2042.981-96%2096v0z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-logo-apeegg-simple: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20340%20448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M305.249%20120.181C273.934%2053.884%20221.742%200%20169.834%200%20117.079%200%2064.323%2058.398%2033.008%20126.106%209.028%20178.861%200%20237.259%200%20278.167c0%2093.944%2076.171%20169.834%20169.834%20169.834s169.834-76.171%20169.834-169.834c0-41.753-9.31-104.383-34.418-157.985zM132.877%20390.166c-37.521.847-37.521-27.647-37.521-27.647%202.257-24.544%2020.03-19.184%2043.164-20.03s42.035%2016.927%2043.164%2026.801c.847%209.874-11.284%2020.03-48.806%2020.877zm115.949-180.272c0%2018.337%2014.952%2027.93%2018.056%2036.957%203.103%209.31%206.489%2027.083-2.821%2030.751-13.824%205.078-26.237-4.514-44.574-16.081s-7.617%2010.721-7.617%2010.721%2017.773%2028.493%2017.773%2055.295-21.441%2018.337-21.441%2018.337-30.468-25.108-69.683-25.108c-39.214%200-40.343%209.028-54.73%209.874-14.67.847-15.234-3.95-15.234-17.773s7.617-22.851%2018.056-34.7c7.335-8.181%206.489-23.134-5.925-16.927s-37.521%2015.234-38.368%200%2022.287-35.265%2022.287-49.934-32.161-29.904-33.854-41.471C29.34%20158.268%2047.678%2094.51%2081.532%2093.664c33.008-.847%2010.438%2028.493%2063.194%2029.904h6.771c7.899-.282%2021.723-.564%2043.728-20.594%2027.647-25.39%2052.192-20.03%2062.912-11.567s32.161%2020.03%2032.161%2057.552c0%2037.804-41.471%2042.317-41.471%2060.937z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M116.232%20208.201c-12.695%201.975-29.058-9.028-34.418-12.977-.847-.564-1.975-.282-2.257.847-6.489%2024.544%206.206%2023.98%2012.413%2025.955%206.489%201.975%202.539%206.489-.282%208.181-3.385%201.693-15.799-1.128-15.799-1.128.564%207.335%2014.388%205.078%2020.03%204.796%201.41%200%202.821-.564%203.95-1.693%206.489-5.642%2029.622-25.955%2016.363-23.98zm69.4%205.643c-11.849-.282%205.078%2014.67%2013.542%2021.723%203.103%202.539%206.771%204.232%2010.721%204.796%206.489.847%2015.799.847%2016.081-5.642%200%200-13.259%203.103-15.799%201.128s-7.053-6.206-.282-8.181c6.489-1.975%2030.186-1.411%2022.569-27.93-.282%200-30.186%2014.388-46.831%2014.106zm-10.72%2020.312c-6.206%200-34.418%2028.212-34.983%2033.008-.282%204.514-7.053-31.033-26.237-30.186-19.184.564-12.977%2013.259-11.003%2019.184s16.645%2017.491%2021.159%2017.773c0%200-13.824-13.541-13.824-18.902s1.41-7.053%205.36-7.053%209.31%203.103%2012.695%2010.72c2.539%205.925%206.206%2013.824%207.617%2017.491.564%201.128%201.411%201.693%202.821%201.693.847%200%201.975-.564%202.257-1.128%203.95-5.642%2021.441-28.776%2031.879-28.776%2011.849%200%207.053%2012.413%203.95%2014.952-3.103%202.821-9.874%207.617-20.03%209.592%200%200%2013.824%203.95%2029.622-11.567%2015.799-14.952-3.385-26.801-11.284-26.801z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-logo-apeegg: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20777%20448%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M305.249%20120.181C273.934%2053.884%20221.742%200%20169.834%200%20117.079%200%2064.323%2058.398%2033.008%20126.106%209.028%20178.861%200%20237.259%200%20278.167c0%2093.944%2076.171%20169.834%20169.834%20169.834s169.834-76.171%20169.834-169.834c0-41.753-9.31-104.383-34.418-157.985zM132.877%20390.166c-37.521.847-37.521-27.647-37.521-27.647%202.257-24.544%2020.03-19.184%2043.164-20.03s42.035%2016.927%2043.164%2026.801c.847%209.874-11.284%2020.03-48.806%2020.877zm115.949-180.272c0%2018.337%2014.952%2027.93%2018.056%2036.957%203.103%209.31%206.489%2027.083-2.821%2030.751-13.824%205.078-26.237-4.514-44.574-16.081s-7.617%2010.721-7.617%2010.721%2017.773%2028.493%2017.773%2055.295-21.441%2018.337-21.441%2018.337-30.468-25.108-69.683-25.108c-39.214%200-40.343%209.028-54.73%209.874-14.67.847-15.234-3.95-15.234-17.773s7.617-22.851%2018.056-34.7c7.335-8.181%206.489-23.134-5.925-16.927s-37.521%2015.234-38.368%200%2022.287-35.265%2022.287-49.934-32.161-29.904-33.854-41.471C29.34%20158.268%2047.678%2094.51%2081.532%2093.664c33.008-.847%2010.438%2028.493%2063.194%2029.904h6.771c7.899-.282%2021.723-.564%2043.728-20.594%2027.647-25.39%2052.192-20.03%2062.912-11.567s32.161%2020.03%2032.161%2057.552c0%2037.804-41.471%2042.317-41.471%2060.937z%22%20%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%0A%20%20%20%20d%3D%22M116.232%20208.201c-12.695%201.975-29.058-9.028-34.418-12.977-.847-.564-1.975-.282-2.257.847-6.489%2024.544%206.206%2023.98%2012.413%2025.955%206.489%201.975%202.539%206.489-.282%208.181-3.385%201.693-15.799-1.128-15.799-1.128.564%207.335%2014.388%205.078%2020.03%204.796%201.41%200%202.821-.564%203.95-1.693%206.489-5.642%2029.622-25.955%2016.363-23.98zm69.4%205.643c-11.849-.282%205.078%2014.67%2013.542%2021.723%203.103%202.539%206.771%204.232%2010.721%204.796%206.489.847%2015.799.847%2016.081-5.642%200%200-13.259%203.103-15.799%201.128s-7.053-6.206-.282-8.181c6.489-1.975%2030.186-1.411%2022.569-27.93-.282%200-30.186%2014.388-46.831%2014.106zm-10.72%2020.312c-6.206%200-34.418%2028.212-34.983%2033.008-.282%204.514-7.053-31.033-26.237-30.186-19.184.564-12.977%2013.259-11.003%2019.184s16.645%2017.491%2021.159%2017.773c0%200-13.824-13.541-13.824-18.902s1.41-7.053%205.36-7.053%209.31%203.103%2012.695%2010.72c2.539%205.925%206.206%2013.824%207.617%2017.491.564%201.128%201.411%201.693%202.821%201.693.847%200%201.975-.564%202.257-1.128%203.95-5.642%2021.441-28.776%2031.879-28.776%2011.849%200%207.053%2012.413%203.95%2014.952-3.103%202.821-9.874%207.617-20.03%209.592%200%200%2013.824%203.95%2029.622-11.567%2015.799-14.952-3.385-26.801-11.284-26.801zm309.199-77.3H451.95l-14.388%2043.446h-42.599l48.524-165.038h49.652l48.242%20165.038h-42.317zM601.189%2035.265c7.053%200%2013.542%201.128%2019.184%203.668s10.72%206.206%2014.67%2010.721c3.95%204.796%207.335%2010.156%209.31%2016.927q3.385%209.734%203.385%2022.005c0%207.899-1.128%2015.234-3.385%2021.723s-5.36%2012.131-9.31%2016.927-9.028%208.463-14.67%2011.003-12.131%203.95-19.184%203.95h-12.413v58.116h-37.803V35.267h50.217zm160.806%2037.239h-63.758v26.801h46.831v37.239h-46.831v26.519h63.758v37.239H660.998V35.264h100.997zM502.73%20279.013h-64.04v26.519h47.114v37.239h-47.113v26.519h64.04v37.239H401.452V241.773h101.279zm134.005%2097.048c-2.821%203.95-6.206%207.899-10.156%2011.567s-8.181%207.053-12.977%209.874-10.156%205.078-15.799%206.771-11.849%202.539-18.056%202.539h-.282c-9.874%200-18.62-1.693-26.237-4.796-7.617-3.385-13.824-7.899-18.902-13.541s-9.028-12.695-11.849-20.594-4.232-16.645-4.796-26.237v-34.136c0-8.746%201.41-17.209%203.95-25.39%202.539-7.899%206.489-14.952%2011.849-20.877%205.078-5.925%2011.567-10.721%2019.184-14.388s16.645-5.36%2026.519-5.36h.282q15.234.846%2024.544%205.078c6.206%203.103%2011.284%206.489%2014.952%2010.438s6.489%207.899%208.463%2011.849q2.963%205.925%205.078%209.31l-30.468%2020.312c-.847-1.693-1.693-3.385-2.539-5.642s-2.257-3.95-3.95-5.642-3.95-3.385-6.206-4.514c-2.539-1.128-5.642-1.975-9.592-1.975-7.335%200-13.259%202.539-17.491%207.335-4.232%205.078-6.489%2011.567-6.489%2019.748v32.161c0%203.95.564%207.617%201.975%2011.284%201.411%203.385%203.103%206.489%205.36%208.746%202.257%202.539%205.078%204.514%208.181%205.925s6.489%202.257%2010.156%202.257c5.078.282%209.31-.847%2012.413-2.539%203.103-1.975%205.642-4.232%207.335-7.335v-8.181h-17.491v-31.879h53.32v57.834zm140.212%200c-2.821%203.95-6.206%207.899-10.156%2011.567s-8.181%207.053-12.977%209.874-10.156%205.078-15.799%206.771-11.849%202.539-18.056%202.539h-.564c-9.874%200-18.62-1.693-26.237-4.796-7.617-3.385-13.824-7.899-18.902-13.541s-9.028-12.695-11.849-20.594-4.232-16.645-4.514-26.237v-34.136c0-8.746%201.41-17.209%203.95-25.39%202.539-7.899%206.489-14.952%2011.849-20.877%205.078-5.925%2011.567-10.721%2019.184-14.388s16.645-5.36%2026.519-5.36h.282q15.234.846%2024.544%205.078c6.206%203.103%2011.284%206.489%2014.952%2010.438s6.489%207.899%208.463%2011.849q2.963%205.925%205.078%209.31l-30.468%2020.312c-.847-1.693-1.693-3.385-2.539-5.642s-2.257-3.95-3.95-5.642-3.95-3.385-6.206-4.514c-2.539-1.128-5.642-1.975-9.592-1.975-7.335%200-13.259%202.539-17.491%207.335-4.232%205.078-6.489%2011.567-6.489%2019.748v32.161c0%203.95.564%207.617%201.975%2011.284%201.41%203.385%203.103%206.489%205.36%208.746%202.257%202.539%205.078%204.514%208.181%205.925s6.489%202.257%2010.156%202.257c5.078.282%209.31-.847%2012.413-2.539%203.103-1.975%205.642-4.232%207.335-7.335v-8.181h-17.491v-31.879h53.32v57.834z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-logo-react: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023%2020.5%22%3E%0A%20%20%3Ccircle%20fill%3D%22%2361dafb%22%20cx%3D%2211.5%22%20cy%3D%2210.2%22%20r%3D%222%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%2361dafb%22%20d%3D%22M23%2C10.2c0-1.6-1.9-3-4.8-3.9.7-3%2C.5-5.3-.9-6.1-1.4-.8-3.5.1-5.8%2C2.3C9.3.4%2C7.2-.5%2C5.8.3c-1.2.7-1.6%2C2.4-1.2%2C4.8%2C0%2C.4.2.9.3%2C1.3-2.9.8-4.8%2C2.2-4.8%2C3.9s1.9%2C3%2C4.8%2C3.8c-.1.5-.2.9-.3%2C1.3-.4%2C2.4%2C0%2C4.1%2C1.2%2C4.8.3.2.7.3%2C1.2.3%2C1%2C0%2C2.2-.6%2C3.6-1.6.3-.3.7-.6%2C1-.9.3.3.7.6%2C1%2C.9%2C1.3%2C1.1%2C2.6%2C1.6%2C3.6%2C1.6s.8%2C0%2C1.2-.3c1.2-.7%2C1.6-2.4%2C1.2-4.8%2C0-.4-.2-.9-.3-1.3%2C2.9-.8%2C4.8-2.2%2C4.8-3.8ZM16.1%2C1c.2%2C0%2C.5%2C0%2C.7.2.9.5%2C1.1%2C2.4.5%2C5-.9-.2-2-.4-3.1-.5-.6-.9-1.3-1.7-1.9-2.4%2C1.5-1.5%2C2.9-2.3%2C3.9-2.3ZM7.4%2C12.6c.2.4.5.8.7%2C1.2-.7-.1-1.4-.2-2.1-.4.2-.6.4-1.3.7-2%2C.2.4.4.8.6%2C1.2ZM6.1%2C7.1c.6-.2%2C1.3-.3%2C2.1-.4-.2.4-.5.8-.7%2C1.1-.2.4-.4.8-.6%2C1.2-.3-.7-.5-1.3-.7-2ZM7.3%2C10.2c.3-.6.6-1.2%2C1-1.9.4-.6.7-1.2%2C1.1-1.8.7%2C0%2C1.4%2C0%2C2.1%2C0s1.4%2C0%2C2.1%2C0c.4.5.8%2C1.1%2C1.1%2C1.8.3.6.7%2C1.2%2C1%2C1.9-.3.6-.6%2C1.2-1%2C1.8-.4.6-.7%2C1.2-1.1%2C1.8-.7%2C0-1.4%2C0-2.1%2C0s-1.4%2C0-2.1%2C0c-.4-.6-.8-1.2-1.1-1.8-.4-.6-.7-1.2-1-1.8ZM15.6%2C12.6c.2-.4.4-.8.6-1.2.3.7.5%2C1.3.7%2C2-.6.1-1.3.3-2.1.4.2-.4.5-.8.7-1.2ZM15.6%2C7.9c-.2-.4-.5-.8-.7-1.1.7%2C0%2C1.4.2%2C2.1.4-.2.6-.4%2C1.3-.7%2C2-.2-.4-.4-.8-.6-1.2ZM11.5%2C3.9c.4.5.9%2C1%2C1.3%2C1.6-.4%2C0-.9%2C0-1.3%2C0s-.9%2C0-1.3%2C0c.5-.6.9-1.1%2C1.3-1.6ZM6.2%2C1.1c.2-.1.4-.2.7-.2.9%2C0%2C2.2.7%2C3.6%2C1.9.1%2C0%2C.2.2.3.3-.6.7-1.3%2C1.5-1.9%2C2.4-1.1%2C0-2.1.3-3.1.5-.1-.4-.2-.8-.3-1.2-.3-2%2C0-3.3.7-3.8ZM1%2C10.2c0-1.1%2C1.5-2.2%2C4.1-2.9.3.9.7%2C1.9%2C1.1%2C2.9-.5%2C1-.8%2C1.9-1.1%2C2.9-2.6-.7-4.1-1.8-4.1-2.9ZM9.9%2C18.1c-1.5%2C1.2-2.8%2C1.7-3.6%2C1.3-.8-.5-1-1.8-.7-3.8%2C0-.4.1-.8.3-1.2.9.2%2C2%2C.4%2C3.1.5.6.9%2C1.3%2C1.7%2C1.9%2C2.4-.3.3-.6.6-.9.8ZM10.2%2C14.9c.4%2C0%2C.9%2C0%2C1.3%2C0s.9%2C0%2C1.3%2C0c-.4.6-.9%2C1.1-1.3%2C1.6-.5-.5-.9-1-1.3-1.6ZM16.8%2C19.3c-.8.4-2.1%2C0-3.6-1.3-.3-.2-.6-.5-.9-.8.7-.7%2C1.3-1.5%2C1.9-2.4%2C1.1%2C0%2C2.1-.3%2C3.1-.5.1.4.2.8.3%2C1.2.3%2C2%2C0%2C3.3-.7%2C3.8ZM17.9%2C13.1c-.3-.9-.7-1.9-1.1-2.9.5-1%2C.8-2%2C1.1-2.9%2C2.6.7%2C4.1%2C1.8%2C4.1%2C2.9s-1.5%2C2.2-4.1%2C2.9Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-logo-svelte: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2098.1%20118%22%3E%0A%20%20%3Cpath%20fill%3D%22%23ff3e00%22%20d%3D%22M91.8%2C15.6C80.9%2C0%2C59.2-4.7%2C43.6%2C5.2l-27.5%2C17.6c-7.5%2C4.7-12.7%2C12.4-14.2%2C21.1-1.3%2C7.3-.2%2C14.8%2C3.3%2C21.3-2.4%2C3.6-4%2C7.6-4.7%2C11.8-1.6%2C8.9.5%2C18.1%2C5.7%2C25.4%2C11%2C15.7%2C32.6%2C20.3%2C48.2%2C10.4l27.5-17.5c7.5-4.7%2C12.7-12.4%2C14.2-21.1%2C1.3-7.3.2-14.8-3.3-21.3%2C2.4-3.6%2C4-7.6%2C4.7-11.8%2C1.7-9-.4-18.2-5.7-25.5ZM84%2C38.1c-.2.9-.4%2C1.7-.7%2C2.6l-.5%2C1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3v-1c.2-1.4-.2-2.9-1-4.1-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-27.4%2C17.5c-1.4.9-2.3%2C2.2-2.6%2C3.8-.3%2C1.6.1%2C3.3%2C1%2C4.6%2C1.6%2C2.3%2C4.4%2C3.3%2C7.1%2C2.6.6-.2%2C1.2-.4%2C1.7-.7l10.5-6.7c1.7-1.1%2C3.6-1.9%2C5.6-2.5%2C8.9-2.3%2C18.2%2C1.2%2C23.4%2C8.7%2C3.2%2C4.4%2C4.4%2C9.9%2C3.5%2C15.3-.9%2C5.2-4.1%2C9.9-8.6%2C12.7l-27.5%2C17.5c-1.7%2C1.1-3.6%2C1.9-5.6%2C2.5-8.9%2C2.3-18.2-1.2-23.4-8.7-3.2-4.4-4.4-9.9-3.5-15.3.2-.9.4-1.7.6-2.6l.5-1.6%2C1.4%2C1c3.3%2C2.4%2C6.9%2C4.2%2C10.8%2C5.4l1%2C.3v1c-.2%2C1.4.2%2C2.9%2C1%2C4.1%2C1.6%2C2.3%2C4.4%2C3.4%2C7.1%2C2.7.6-.2%2C1.2-.4%2C1.7-.7l27.4-17.5c1.4-.9%2C2.3-2.2%2C2.6-3.8.3-1.6%2C0-3.3-1-4.6-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-10.5%2C6.7c-1.7%2C1.1-3.6%2C1.9-5.6%2C2.4-8.9%2C2.3-18.2-1.2-23.4-8.7-3.1-4.4-4.4-9.9-3.4-15.3.9-5.2%2C4.1-9.9%2C8.6-12.7l27.5-17.5c1.7-1.1%2C3.6-1.9%2C5.6-2.5%2C8.9-2.3%2C18.2%2C1.2%2C23.4%2C8.7%2C3.2%2C4.4%2C4.4%2C9.9%2C3.5%2C15.3Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-logo-vibe: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20260%20257%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M104.16%2C73.48c12.36-1.2%2C26.82%2C2.68%2C38.06%2C10.15%2C3.88%2C2.57%2C10.55%2C9.13%2C12.87%2C12.72%2C6.16%2C9.46%2C8.55%2C20.33%2C7.07%2C31.89-.8%2C5.98-.4%2C7.97%2C1.63%2C7.97%2C3.66%2C0%2C10.55-11.45%2C13.52-22.62%2C4.1-13.21.94-28.89.14-32.47-2.07-9.35-6.89-21.46-11.89-29.97-9.02-15.37-24.57-30.99-42.37-42.59-5.29-3.48-12.14-7.32-14.39-8.12-2.1-.72-6.05-.58-10.4.43-4.78%2C1.09-14.24%2C4.24-19.43%2C6.49-13.34%2C5.69-24.46%2C12.79-35.52%2C22.69-14.93%2C13.34-24.65%2C26.57-32.47%2C44.22C5.14%2C87.44%2C1.95%2C99.14.43%2C113.03c-.65%2C6.2-.54%2C21.49.22%2C27.91%2C1.49%2C12.29%2C4.82%2C24.46%2C9.39%2C34.14%2C3.77%2C7.97%2C5.55%2C9.89%2C7.36%2C7.79.83-.94.8-.91%2C2.14-11.82%2C3.41-27.47%2C16.2-54.51%2C34.47-72.7%2C14.97-14.93%2C31.42-23.09%2C50.16-24.86l-.01-.01Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M257.31%2C105.29c-3.47-19.72-9.59-34.95-20.47-50.9-8.11-11.89-16.38-20.77-27.37-29.38-4.92-3.82-17.98-11.79-23.83-14.52-11.23-5.21-23.33-8.79-33.96-10.01-8.76-1-11.33-.5-10.5%2C2.15.36%2C1.21.35%2C1.16%2C8.92%2C8.04%2C21.55%2C17.37%2C37.79%2C42.49%2C43.63%2C67.61%2C4.8%2C20.59%2C3.06%2C38.87-5.3%2C55.73-5.5%2C11.13-16.41%2C21.38-28.68%2C27-4.23%2C1.94-13.32%2C4.15-17.59%2C4.23-11.29.25-21.79-3.44-30.83-10.8-4.66-3.83-6.57-4.54-7.64-2.82-1.93%2C3.11%2C4.18%2C15%2C12.1%2C23.41%2C9.06%2C10.45%2C24.05%2C16.02%2C27.52%2C17.24%2C9.04%2C3.17%2C21.86%2C5.45%2C31.74%2C5.69%2C17.82.43%2C39.29-4.56%2C58.52-13.57%2C5.75-2.66%2C12.62-6.46%2C14.48-7.95%2C1.72-1.4%2C3.68-4.84%2C5.11-9.07%2C1.6-4.64%2C3.9-14.34%2C4.72-19.93%2C2.19-14.33%2C2.02-27.53-.57-42.14v-.01Z%22%2F%3E%0A%20%20%3Cpath%20fill%3D%22%23000%22%20d%3D%22M231.57%2C197.33c-1.23-.27-1.18-.25-11.35%2C3.92-25.63%2C10.47-55.47%2C12.54-80.27%2C5.51-20.35-5.75-35.51-16.11-46.23-31.58-7.09-10.19-10.78-24.7-9.77-38.16.35-4.64%2C2.81-13.67%2C4.8-17.45%2C5.24-10%2C13.55-17.41%2C24.36-21.77%2C5.61-2.23%2C7.15-3.55%2C6.16-5.32-1.79-3.19-15.15-3.59-26.34-.73-13.53%2C2.88-25.65%2C13.31-28.39%2C15.76-7.14%2C6.38-15.34%2C16.5-20.32%2C25.03-8.99%2C15.39-15%2C36.59-16.41%2C57.79-.45%2C6.32-.44%2C14.17-.04%2C16.52.4%2C2.19%2C2.46%2C5.56%2C5.47%2C8.86%2C3.29%2C3.64%2C10.67%2C10.35%2C15.16%2C13.77%2C11.49%2C8.85%2C23.13%2C15.08%2C37.17%2C19.88%2C18.94%2C6.5%2C35.23%2C8.5%2C54.45%2C6.69%2C14.33-1.35%2C26.1-4.29%2C38.95-9.76%2C5.72-2.46%2C19.01-10.04%2C24.23-13.84%2C9.99-7.31%2C18.98-16.17%2C25.18-24.89%2C5.11-7.19%2C5.92-9.68%2C3.2-10.23h-.01Z%22%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-logo-x: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14.234%2010.162%2022.977%200h-2.072l-7.591%208.824L7.251%200H.258l9.168%2013.343L.258%2024H2.33l8.016-9.318L16.749%2024h6.993zm-2.837%203.299-.929-1.329L3.076%201.56h3.182l5.965%208.532.929%201.329%207.754%2011.09h-3.182z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-logo-github: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%200.198c-4.418%200-8%203.582-8%208%200%203.535%202.292%206.533%205.471%207.591%200.4%200.074%200.547-0.174%200.547-0.385%200-0.191-0.008-0.821-0.011-1.489-2.226%200.484-2.695-0.944-2.695-0.944-0.364-0.925-0.888-1.171-0.888-1.171-0.726-0.497%200.055-0.486%200.055-0.486%200.803%200.056%201.226%200.824%201.226%200.824%200.714%201.223%201.872%200.869%202.328%200.665%200.072-0.517%200.279-0.87%200.508-1.070-1.777-0.202-3.645-0.888-3.645-3.954%200-0.873%200.313-1.587%200.824-2.147-0.083-0.202-0.357-1.015%200.077-2.117%200%200%200.672-0.215%202.201%200.82%200.638-0.177%201.322-0.266%202.002-0.269%200.68%200.003%201.365%200.092%202.004%200.269%201.527-1.035%202.198-0.82%202.198-0.82%200.435%201.102%200.162%201.916%200.079%202.117%200.513%200.56%200.823%201.274%200.823%202.147%200%203.073-1.872%203.749-3.653%203.947%200.287%200.248%200.543%200.735%200.543%201.481%200%201.070-0.009%201.932-0.009%202.195%200%200.213%200.144%200.462%200.55%200.384%203.177-1.059%205.466-4.057%205.466-7.59%200-4.418-3.582-8-8-8z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-quill: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%2016c2-6%207.234-16%2016-16-4.109%203.297-6%2011-9%2011s-3%200-3%200l-3%205h-1z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-pencil: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M6%2010l2-1%207-7-1-1-7%207-1%202zM4.52%2013.548c-0.494-1.043-1.026-1.574-2.069-2.069l1.548-4.262%202-1.217%206-6h-3l-6%206-3%2010%2010-3%206-6v-3l-6%206-1.217%202z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-play-button: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%200c-4.418%200-8%203.582-8%208s3.582%208%208%208%208-3.582%208-8-3.582-8-8-8zM8%2014.5c-3.59%200-6.5-2.91-6.5-6.5s2.91-6.5%206.5-6.5%206.5%202.91%206.5%206.5-2.91%206.5-6.5%206.5zM6%204.5l6%203.5-6%203.5z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-pin: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M8%200c-2.761%200-5%202.239-5%205%200%205%205%2011%205%2011s5-6%205-11c0-2.761-2.239-5-5-5zM8%208c-1.657%200-3-1.343-3-3s1.343-3%203-3%203%201.343%203%203-1.343%203-3%203z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-search: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M496.131%20435.698l-121.276-103.147c-12.537-11.283-25.945-16.463-36.776-15.963%2028.628-33.534%2045.921-77.039%2045.921-124.588%200-106.039-85.961-192-192-192s-192%2085.961-192%20192%2085.961%20192%20192%20192c47.549%200%2091.054-17.293%20124.588-45.922-0.5%2010.831%204.68%2024.239%2015.963%2036.776l103.147%20121.276c17.661%2019.623%2046.511%2021.277%2064.11%203.678s15.946-46.449-3.677-64.11zM192%20320c-70.692%200-128-57.308-128-128s57.308-128%20128-128%20128%2057.308%20128%20128-57.307%20128-128%20128z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-spinner: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M304%2C480c-114.7%2C0-207.6-99.9-208-223.3%2C0-26.5-21.8-48.9-48.4-48.7-26.3.2-47.6%2C21.6-47.6%2C48%2C0%2C141.4%2C114.6%2C256%2C256%2C256s249.6-108.4%2C255.7-244.3c-5.6%2C118.3-96.5%2C212.3-207.7%2C212.3ZM256%2C0C118.5%2C0%2C6.4%2C108.4.3%2C244.3%2C5.9%2C126%2C96.8%2C32%2C208%2C32s207.6%2C99.9%2C208%2C223.3c0%2C26.5%2C21.8%2C48.9%2C48.4%2C48.7%2C26.3-.2%2C47.6-21.6%2C47.6-48C512%2C114.6%2C397.4%2C0%2C256%2C0Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-smartphone: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12%200h-9c-0.55%200-1%200.45-1%201v14c0%200.55%200.45%201%201%201h9c0.55%200%201-0.45%201-1v-14c0-0.55-0.45-1-1-1zM7.5%2015.278c-0.43%200-0.778-0.348-0.778-0.778s0.348-0.778%200.778-0.778%200.778%200.348%200.778%200.778-0.348%200.778-0.778%200.778zM12%2013h-9v-11h9v11z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-stack: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16%205l-8-4-8%204%208%204%208-4zM8%202.328l5.345%202.672-5.345%202.672-5.345-2.672%205.345-2.672zM14.398%207.199l1.602%200.801-8%204-8-4%201.602-0.801%206.398%203.199zM14.398%2010.199l1.602%200.801-8%204-8-4%201.602-0.801%206.398%203.199z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-tablet: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M12.5%200h-10c-0.825%200-1.5%200.675-1.5%201.5v13c0%200.825%200.675%201.5%201.5%201.5h10c0.825%200%201.5-0.675%201.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM7.5%2015.5c-0.276%200-0.5-0.224-0.5-0.5s0.224-0.5%200.5-0.5%200.5%200.224%200.5%200.5-0.224%200.5-0.5%200.5zM12%2014h-9v-12h9v12z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-user: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M9%2011.041v-0.825c1.102-0.621%202-2.168%202-3.716%200-2.485%200-4.5-3-4.5s-3%202.015-3%204.5c0%201.548%200.898%203.095%202%203.716v0.825c-3.392%200.277-6%201.944-6%203.959h14c0-2.015-2.608-3.682-6-3.959z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-void: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M111.82%2C60.419c-26.177%2C4.938-46.869%2C25.364-52.226%2C51.388-4.951-26.164-25.377-46.844-51.414-52.201%2C26.177-4.951%2C46.869-25.377%2C52.214-51.414%2C4.938%2C26.177%2C25.39%2C46.882%2C51.427%2C52.226Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    --icon-upload: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M7%209h2v-4h3l-4-4-4%204h3zM10%206.75v1.542l4.579%201.708-6.579%202.453-6.579-2.453%204.579-1.708v-1.542l-6%202.25v4l8%203%208-3v-4z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-components: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M192%20288h-160c-17.688%200-32%2014.312-32%2032v160c0%2017.688%2014.312%2032%2032%2032h160c17.688%200%2032-14.312%2032-32v-160c0-17.688-14.312-32-32-32zM160%20448h-96v-96h96v96zM192%200h-160c-17.688%200-32%2014.312-32%2032v160c0%2017.688%2014.312%2032%2032%2032h160c17.688%200%2032-14.312%2032-32v-160c0-17.688-14.312-32-32-32zM160%20160h-96v-96h96v96zM480%20288h-160c-17.688%200-32%2014.312-32%2032v160c0%2017.688%2014.312%2032%2032%2032h160c17.688%200%2032-14.312%2032-32v-160c0-17.688-14.312-32-32-32zM448%20448h-96v-96h96v96zM480%200h-160c-17.688%200-32%2014.312-32%2032v160c0%2017.688%2014.312%2032%2032%2032h160c17.688%200%2032-14.312%2032-32v-160c0-17.688-14.312-32-32-32zM448%20160h-96v-96h96v96z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-users: url('data:image/svg+xml;utf8,%3C!--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22576%22%20height%3D%22512%22%20viewBox%3D%220%200%20576%20512%22%3E%0A%3Cg%20id%3D%22icomoon-ignore%22%3E%0A%3C%2Fg%3E%0A%3Cpath%20d%3D%22M384%20385.306v-26.39c35.249-19.864%2064-69.386%2064-118.916%200-79.529%200-144-96-144s-96%2064.471-96%20144c0%2049.53%2028.751%2099.052%2064%20118.916v26.39c-108.551%208.874-192%2062.21-192%20126.694h448c0-64.484-83.449-117.82-192-126.694z%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22M163.598%20397.664c27.655-18.075%2062.040-31.818%2099.894-40.207-7.527-8.892-14.354-18.811-20.246-29.51-15.207-27.617-23.246-58.029-23.246-87.947%200-43.021%200-83.655%2015.3-116.881%2014.853-32.252%2041.564-52.248%2079.611-59.744-8.457-38.24-30.97-63.375-90.911-63.375-96%200-96%2064.471-96%20144%200%2049.53%2028.751%2099.052%2064%20118.916v26.39c-108.551%208.874-192%2062.21-192%20126.694h139.503c7.259-6.455%2015.298-12.586%2024.095-18.336z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-menu: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M85%2091h341v42h-341z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M85%20235h341v42h-341z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23000%22%20d%3D%22M85%20379h341v42h-341z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A');
+    --icon-stylecheat: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20128%20140%22%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2264%200%2084%2011%2064%2022%2044%2011%2064%200%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2286%2012%20106%2023%2086%2034%2066%2023%2086%2012%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%22108%2024%20128%2035%20108%2046%2088%2035%20108%2024%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2242%2012%2062%2023%2042%2034%2022%2023%2042%2012%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2264%2024%2084%2035%2064%2046%2044%2035%2064%2024%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2286%2036%20106%2047%2086%2058%2066%2047%2086%2036%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2220%2024%2040%2035%2020%2046%200%2035%2020%2024%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2242%2036%2062%2047%2042%2058%2022%2047%2042%2036%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23918dc6%22%20points%3D%2264%2048%2084%2059%2064%2070%2044%2059%2064%2048%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%220%2035%2020%2046%2020%2068%200%2057%200%2035%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%2222%2047%2042%2058%2042%2080%2022%2069%2022%2047%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%2244%2059%2064%2070%2064%2092%2044%2081%2044%2059%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%220%2059%2020%2070%2020%2092%200%2081%200%2059%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%2222%2071%2042%2082%2042%20104%2022%2093%2022%2071%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%2244%2083%2064%2094%2064%20116%2044%20105%2044%2083%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%220%2083%2020%2094%2020%20116%200%20105%200%2083%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%2222%2095%2042%20106%2042%20128%2022%20117%2022%2095%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%238888bc%22%20points%3D%2244%20107%2064%20118%2064%20140%2044%20129%2044%20107%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%2264%2070%2084%2059%2084%2081%2064%2092%2064%2070%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%2286%2058%20106%2047%20106%2069%2086%2080%2086%2058%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%22108%2046%20128%2035%20128%2057%20108%2068%20108%2046%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%2264%2094%2084%2083%2084%20105%2064%20116%2064%2094%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%2286%2082%20106%2071%20106%2093%2086%20104%2086%2082%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%22108%2070%20128%2059%20128%2081%20108%2092%20108%2070%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%2264%20118%2084%20107%2084%20129%2064%20140%2064%20118%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%2286%20106%20106%2095%20106%20117%2086%20128%2086%20106%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%237676a3%22%20points%3D%22108%2094%20128%2083%20128%20105%20108%20116%20108%2094%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+  }
+
+  icon,
+  .icon {
+    --icon: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%20%20%3Cpath%0A%20%20%20%20d%3D%22M111.82%2C60.419c-26.177%2C4.938-46.869%2C25.364-52.226%2C51.388-4.951-26.164-25.377-46.844-51.414-52.201%2C26.177-4.951%2C46.869-25.377%2C52.214-51.414%2C4.938%2C26.177%2C25.39%2C46.882%2C51.427%2C52.226Z%22%20%2F%3E%0A%3C%2Fsvg%3E');
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: var(--color, currentColor);
+    mask-image: var(--icon);
+    mask-repeat: no-repeat;
+    mask-size: cover;
+  }
+
+  icon[bell],
+  icon.bell {
+    --icon: var(--icon-bell);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[book],
+  icon.book {
+    --icon: var(--icon-book);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[bullhorn],
+  icon.bullhorn {
+    --icon: var(--icon-bullhorn);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[checkmark],
+  icon.checkmark {
+    --icon: var(--icon-checkmark);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[chevron-left],
+  icon.chevron-left {
+    --icon: var(--icon-chevron-left);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[chevron-down],
+  icon.chevron-down {
+    --icon: var(--icon-chevron-down);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[chevron-right],
+  icon.chevron-right {
+    --icon: var(--icon-chevron-right);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[clock],
+  icon.clock {
+    --icon: var(--icon-clock);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[chevron-up],
+  icon.chevron-up {
+    --icon: var(--icon-chevron-up);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[cog],
+  icon.cog {
+    --icon: var(--icon-cog);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[credit-card],
+  icon.credit-card {
+    --icon: var(--icon-credit-card);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[cross],
+  icon.cross {
+    --icon: var(--icon-cross);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[crow],
+  icon.crow {
+    --icon: var(--icon-crow);
+    width: 1.0105293945598128em;
+    height: 1em;
+  }
+
+  icon[css-3],
+  icon.css-3 {
+    --icon: var(--icon-css-3);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[dark],
+  icon.dark {
+    --icon: var(--icon-dark);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[desktop],
+  icon.desktop {
+    --icon: var(--icon-desktop);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[download],
+  icon.download {
+    --icon: var(--icon-download);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[earth],
+  icon.earth {
+    --icon: var(--icon-earth);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[embed],
+  icon.embed {
+    --icon: var(--icon-embed);
+    width: 1.25em;
+    height: 1em;
+  }
+
+  icon[eye],
+  icon.eye {
+    --icon: var(--icon-eye);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[folder],
+  icon.folder {
+    --icon: var(--icon-folder);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[heart-broken],
+  icon.heart-broken {
+    --icon: var(--icon-heart-broken);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[heart],
+  icon.heart {
+    --icon: var(--icon-heart);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[home],
+  icon.home {
+    --icon: var(--icon-home);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[html-5],
+  icon.html-5 {
+    --icon: var(--icon-html-5);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[image],
+  icon.image {
+    --icon: var(--icon-image);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[layout],
+  icon.layout {
+    --icon: var(--icon-layout);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[images],
+  icon.images {
+    --icon: var(--icon-images);
+    width: 1.125em;
+    height: 1em;
+  }
+
+  icon[light],
+  icon.light {
+    --icon: var(--icon-light);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[lock-open],
+  icon.lock-open {
+    --icon: var(--icon-lock-open);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[lock-closed],
+  icon.lock-closed {
+    --icon: var(--icon-lock-closed);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[logo-apeegg-simple],
+  icon.logo-apeegg-simple {
+    --icon: var(--icon-logo-apeegg-simple);
+    width: 1em;
+    height: 1.3176470588235294em;
+  }
+
+  icon[logo-apeegg],
+  icon.logo-apeegg {
+    --icon: var(--icon-logo-apeegg);
+    width: 1.734375em;
+    height: 1em;
+  }
+
+  icon[logo-react],
+  icon.logo-react {
+    --icon: var(--icon-logo-react);
+    width: 1.1219512195121952em;
+    height: 1em;
+  }
+
+  icon[logo-svelte],
+  icon.logo-svelte {
+    --icon: var(--icon-logo-svelte);
+    width: 0.8313559322033898em;
+    height: 1em;
+  }
+
+  icon[logo-vibe],
+  icon.logo-vibe {
+    --icon: var(--icon-logo-vibe);
+    width: 1.0116731517509727em;
+    height: 1em;
+  }
+
+  icon[logo-x],
+  icon.logo-x {
+    --icon: var(--icon-logo-x);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[logo-github],
+  icon.logo-github {
+    --icon: var(--icon-logo-github);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[quill],
+  icon.quill {
+    --icon: var(--icon-quill);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[pencil],
+  icon.pencil {
+    --icon: var(--icon-pencil);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[play-button],
+  icon.play-button {
+    --icon: var(--icon-play-button);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[pin],
+  icon.pin {
+    --icon: var(--icon-pin);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[search],
+  icon.search {
+    --icon: var(--icon-search);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[spinner],
+  icon.spinner {
+    --icon: var(--icon-spinner);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[smartphone],
+  icon.smartphone {
+    --icon: var(--icon-smartphone);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[stack],
+  icon.stack {
+    --icon: var(--icon-stack);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[tablet],
+  icon.tablet {
+    --icon: var(--icon-tablet);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[user],
+  icon.user {
+    --icon: var(--icon-user);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[void],
+  icon.void {
+    --icon: var(--icon-void);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[upload],
+  icon.upload {
+    --icon: var(--icon-upload);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[components],
+  icon.components {
+    --icon: var(--icon-components);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[users],
+  icon.users {
+    --icon: var(--icon-users);
+    width: 1.125em;
+    height: 1em;
+  }
+
+  icon[menu],
+  icon.menu {
+    --icon: var(--icon-menu);
+    width: 1em;
+    height: 1em;
+  }
+
+  icon[stylecheat],
+  icon.stylecheat {
+    --icon: var(--icon-stylecheat);
+    width: 1em;
+    height: 1.09375em;
+  }
+  /* ---- Reset.css ---- */
+  @layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      border: 0 solid;
+    }
+
+    button,
+    input,
+    select,
+    optgroup,
+    textarea,
+    ::file-selector-button {
+      font: inherit;
+      font-feature-settings: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+    }
+
+    html,
+    :host {
+      line-height: 1.5;
+    }
+  }
+  /* ---- Stylecheat.css ---- */
+  .stylecheat,
+  [stylecheat] {
+    --unit: 4px;
+    --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448' fill='currentColor'%3E%3Cpath fill='black' d='m420.75 202-185.5 185.25a15.844 15.844 0 0 1-22.5 0L27.25 202c-6.25-6.25-6.25-16.5 0-22.75L68.75 138a15.844 15.844 0 0 1 22.5 0L224 270.75 356.75 138a15.844 15.844 0 0 1 22.5 0l41.5 41.25c6.25 6.25 6.25 16.5 0 22.75'/%3E%3C/svg%3E");
+    --theme-sign: 1;
+
+    --primary: oklch(0.62 0.14 260);
+    --blue: oklch(0.62 0.21 260);
+    --purple: oklch(0.63 0.26 304);
+    --green: oklch(0.72 0.22 142);
+    --orange: oklch(0.7 0.19 37);
+    --cyan: oklch(0.71 0.14 215);
+    --red: oklch(0.64 0.21 25);
+    --yellow: oklch(0.8 0.18 87);
+    --slate: oklch(0.55 0.05 264);
+  }
+
+  .stylecheat.dark,
+  [stylecheat].dark,
+  .stylecheat[dark],
+  [stylecheat][dark] {
+    --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448' fill='currentColor'%3E%3Cpath fill='white' d='m420.75 202-185.5 185.25a15.844 15.844 0 0 1-22.5 0L27.25 202c-6.25-6.25-6.25-16.5 0-22.75L68.75 138a15.844 15.844 0 0 1 22.5 0L224 270.75 356.75 138a15.844 15.844 0 0 1 22.5 0l41.5 41.25c6.25 6.25 6.25 16.5 0 22.75'/%3E%3C/svg%3E");
+    --theme-sign: -1;
+
+    --primary: oklch(0.75 0.12 260);
+    --blue: oklch(0.71 0.17 255);
+    --purple: oklch(0.71 0.2 306);
+    --green: oklch(0.79 0.21 152);
+    --orange: oklch(0.75 0.18 48);
+    --cyan: oklch(0.79 0.15 211);
+    --red: oklch(0.7 0.19 22);
+    --yellow: oklch(0.85 0.2 92);
+    --slate: oklch(0.7 0.04 257);
+  }
+  /* ---- Theme.css ---- */
+  .stylecheat,
+  [stylecheat] {
+    --background: oklch(0.9383 0.0042 236.4993);
+    --foreground: oklch(0.3211 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.3211 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.3211 0 0);
+    --primary: oklch(0.6397 0.172 36.4421);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.967 0.0029 264.5419);
+    --secondary-foreground: oklch(0.4461 0.0263 256.8018);
+    --muted: oklch(0.9846 0.0017 247.8389);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.9119 0.0222 243.8174);
+    --accent-foreground: oklch(0.3791 0.1378 265.5222);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(1 0 0);
+    --border: oklch(0.9022 0.0052 247.8822);
+    --input: oklch(0.97 0.0029 264.542);
+    --ring: oklch(0.6397 0.172 36.4421);
+    --chart-1: oklch(0.7156 0.0605 248.6845);
+    --chart-2: oklch(0.7875 0.0917 35.9616);
+    --chart-3: oklch(0.5778 0.0759 254.1573);
+    --chart-4: oklch(0.5016 0.0849 259.4902);
+    --chart-5: oklch(0.4241 0.0952 264.0306);
+    --sidebar: oklch(0.903 0.0046 258.3257);
+    --sidebar-foreground: oklch(0.3211 0 0);
+    --sidebar-primary: oklch(0.6397 0.172 36.4421);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.9119 0.0222 243.8174);
+    --sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
+    --sidebar-border: oklch(0.9276 0.0058 264.5313);
+    --sidebar-ring: oklch(0.6397 0.172 36.4421);
+    --font-sans: Inter, sans-serif;
+    --font-serif: Source Serif 4, serif;
+    --font-mono: JetBrains Mono, monospace;
+    --radius: 0.75rem;
+    --shadow-x: 0px;
+    --shadow-y: 1px;
+    --shadow-blur: 3px;
+    --shadow-spread: 0px;
+    --shadow-opacity: 0.1;
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+    --tracking-normal: 0em;
+    --spacing: 0.25rem;
+  }
+
+  .stylecheat.dark,
+  [stylecheat].dark,
+  .stylecheat[dark],
+  [stylecheat][dark] {
+    --background: oklch(0.2598 0.0306 262.6666);
+    --foreground: oklch(0.9219 0 0);
+    --card: oklch(0.3106 0.0301 268.6365);
+    --card-foreground: oklch(0.9219 0 0);
+    --popover: oklch(0.29 0.0249 268.3986);
+    --popover-foreground: oklch(0.9219 0 0);
+    --secondary: oklch(0.3095 0.0266 266.7132);
+    --secondary-foreground: oklch(0.9219 0 0);
+    --muted: oklch(0.3095 0.0266 266.7132);
+    --muted-foreground: oklch(0.7155 0 0);
+    --accent: oklch(0.338 0.0589 267.5867);
+    --accent-foreground: oklch(0.8823 0.0571 254.1284);
+    --border: oklch(0.3843 0.0301 269.7337);
+    --input: oklch(0.3843 0.0301 269.7337);
+    --chart-2: oklch(0.7693 0.0876 34.1875);
+    --sidebar: oklch(0.31 0.0283 267.7408);
+    --sidebar-foreground: oklch(0.9219 0 0);
+    --sidebar-accent: oklch(0.338 0.0589 267.5867);
+    --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
+    --sidebar-border: oklch(0.3843 0.0301 269.7337);
+  }
+  /* ---- Typography.css ---- */
+  /* Typography - content flow with sibling-aware spacing */
+  /* Visual styles apply globally, layout spacing requires [typography] or .typography wrapper */
+
+  /* Base text color */
+  body {
+    color: var(--foreground);
+  }
+
+  /* Headings - visual styles (sizes, colors, line-height, font-weight) */
+  @layer base {
+    h1,
+    .h1,
+    h2,
+    .h2,
+    h3,
+    .h3,
+    h4,
+    .h4,
+    h5,
+    .h5,
+    h6,
+    .h6 {
+      margin: 0;
+      font-weight: 600;
+      color: var(--primary);
+    }
+  }
+
+  h1,
+  .h1 {
+    font-size: calc(var(--unit) * 10);
+    line-height: calc(var(--unit) * 12);
+  }
+  h2,
+  .h2 {
+    font-size: calc(var(--unit) * 7);
+    line-height: calc(var(--unit) * 8);
+  }
+  h3,
+  .h3 {
+    font-size: calc(var(--unit) * 6);
+    line-height: calc(var(--unit) * 8);
+  }
+  h4,
+  .h4 {
+    font-size: calc(var(--unit) * 5);
+    line-height: calc(var(--unit) * 8);
+  }
+  h5,
+  .h5 {
+    font-size: calc(var(--unit) * 4);
+    line-height: calc(var(--unit) * 4);
+  }
+  h6,
+  .h6 {
+    font-size: calc(var(--unit) * 3.5);
+    line-height: calc(var(--unit) * 4);
+  }
+
+  /* Paragraphs - visual styles */
+  p {
+    margin: 0;
+    line-height: 1.6;
+  }
+
+  /* Lists - visual styles */
+  ul,
+  ol {
+    margin: 0;
+    padding-inline-start: calc(var(--unit) * 6); /* 24px */
+  }
+
+  li {
+    margin: 0;
+    line-height: 1.5;
+  }
+  li::marker {
+    color: oklch(from var(--foreground) calc(l + 0.05) c h);
+  }
+
+  blockquote,
+  quote {
+    display: block;
+    margin: 0;
+    padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+    border-inline-start: calc(var(--unit) * 1) solid var(--primary);
+    border-radius: 0 calc(var(--radius) / 2) calc(var(--radius) / 2) 0;
+    background-color: oklch(from var(--primary) l c h / 0.06);
+    font-style: italic;
+    color: var(--muted-foreground);
+  }
+
+  /* Inline elements - visual styles */
+  strong,
+  b {
+    font-weight: 600;
+    color: oklch(from var(--foreground) calc(l + 0.05) c h);
+  }
+  em,
+  i {
+    font-style: italic;
+  }
+  small {
+    font-size: calc(var(--unit) * 3.5);
+  } /* 14px */
+  mark {
+    background: oklch(from var(--primary) l c h / 0.1);
+    color: oklch(from var(--primary) calc(l + 0.2 * var(--theme-sign, 1)) c h);
+    padding: 0 calc(var(--unit) * 1.5);
+    border-radius: calc(var(--unit) * 0.5);
+  }
+
+  /* --- Layout spacing (requires [typography] or .typography wrapper) --- */
+  /* Uses wildcards for extensibility with custom elements */
+  /* Order matters: later rules win when specificity is equal */
+
+  typography,
+  [typography],
+  .typography {
+    /* Fallback: direct siblings not explicitly covered */
+    > * + * {
+      margin-top: calc(var(--unit) * 6);
+    }
+
+    /* Nested lists - tighter */
+    li > ul,
+    li > ol {
+      margin-top: calc(var(--unit) * 1);
+    }
+
+    /* After headings - moderate space */
+    h1 + *,
+    h2 + * {
+      margin-top: calc(var(--unit) * 3);
+    }
+    h3 + *,
+    h4 + *,
+    h5 + *,
+    h6 + * {
+      margin-top: calc(var(--unit) * 2);
+    }
+
+    /* After paragraphs */
+    p + * {
+      margin-top: calc(var(--unit) * 3);
+    }
+
+    /* After lists */
+    ul + *,
+    ol + * {
+      margin-top: calc(var(--unit) * 3);
+    }
+
+    /* After blockquotes and pre */
+    blockquote + *,
+    quote + *,
+    pre + *,
+    template + * {
+      margin-top: calc(var(--unit) * 4);
+    }
+
+    /* Before headings - section break (last so they override above) */
+    * + h1 {
+      margin-top: calc(var(--unit) * 8);
+    }
+    * + h2 {
+      margin-top: calc(var(--unit) * 7);
+    }
+    * + h3 {
+      margin-top: calc(var(--unit) * 6);
+    }
+    * + h4 {
+      margin-top: calc(var(--unit) * 5);
+    }
+    * + h5 {
+      margin-top: calc(var(--unit) * 4);
+    }
+    * + h6 {
+      margin-top: calc(var(--unit) * 4);
+    }
+
+    /* HR spacing */
+    hr + *,
+    * + hr {
+      margin-top: calc(var(--unit) * 6);
+    }
+  }
+}
+@layer elements {
+  @keyframes animate-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes animate-pulse {
+    50% {
+      transform: scale(1.15);
+    }
+  }
+  @keyframes animate-ping {
+    75%,
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+  @keyframes animate-bounce {
+    0%,
+    100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: translateY(0);
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+  @keyframes animate-shake {
+    10%,
+    90% {
+      transform: translateX(-1px);
+    }
+    20%,
+    80% {
+      transform: translateX(2px);
+    }
+    30%,
+    50%,
+    70% {
+      transform: translateX(-3px);
+    }
+    40%,
+    60% {
+      transform: translateX(3px);
+    }
+  }
+  @keyframes animate-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+  @property --n {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 1;
+  }
+  @keyframes z-fade-scale {
+    0% {
+      opacity: 0;
+      scale: 0.5;
+    }
+
+    50% {
+      opacity: 1;
+      scale: 1;
+    }
+
+    100% {
+      opacity: 0;
+      scale: 2;
+    }
+  }
+  @keyframes z-pointer {
+    0%,
+    100% {
+      pointer-events: none;
+    }
+
+    50% {
+      pointer-events: auto;
+    }
+  }
+  @keyframes grid-pan-y {
+    to {
+      background-position-y:
+        calc(var(--gy) - (var(--n) - 1) * round(nearest, 80cqh, var(--grid-size))),
+        calc(var(--gy) - (var(--n) - 1) * round(nearest, 80cqh, var(--grid-size))),
+        calc(var(--gy) - (var(--n) - 1) * round(nearest, 50cqh, calc(var(--grid-size) * 0.5))),
+        calc(var(--gy) - (var(--n) - 1) * round(nearest, 50cqh, calc(var(--grid-size) * 0.5)));
+    }
+  }
+  @keyframes grid-pan-x {
+    to {
+      background-position-x:
+        calc(var(--gx) - (var(--n) - 1) * round(nearest, 80cqw, var(--grid-size))),
+        calc(var(--gx) - (var(--n) - 1) * round(nearest, 80cqw, var(--grid-size))),
+        calc(var(--gx) - (var(--n) - 1) * round(nearest, 50cqw, calc(var(--grid-size) * 0.5))),
+        calc(var(--gx) - (var(--n) - 1) * round(nearest, 50cqw, calc(var(--grid-size) * 0.5)));
+    }
+  }
+  @keyframes grid-zoom-out {
+    0% {
+      background-size:
+        var(--grid-size) var(--grid-size),
+        var(--grid-size) var(--grid-size),
+        calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5);
+      opacity: 1;
+      background-position:
+        var(--gx) var(--gy),
+        var(--gx) var(--gy),
+        var(--gx) var(--gy),
+        var(--gx) var(--gy);
+    }
+
+    97% {
+      opacity: 0;
+    }
+
+    100% {
+      background-size:
+        calc(var(--grid-size) * 2) calc(var(--grid-size) * 2),
+        calc(var(--grid-size) * 2) calc(var(--grid-size) * 2),
+        var(--grid-size) var(--grid-size),
+        var(--grid-size) var(--grid-size);
+      opacity: 0;
+      background-position:
+        var(--zx) var(--zy),
+        var(--zx) var(--zy),
+        var(--zx-m) var(--zy-m),
+        var(--zx-m) var(--zy-m);
+    }
+  }
+  @keyframes grid-zoom-in {
+    0% {
+      background-size:
+        calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        calc(var(--grid-size) * 0.25) calc(var(--grid-size) * 0.25),
+        calc(var(--grid-size) * 0.25) calc(var(--grid-size) * 0.25);
+      opacity: 0;
+      background-position:
+        var(--gx) var(--gy),
+        var(--gx) var(--gy),
+        var(--gx) var(--gy),
+        var(--gx) var(--gy);
+    }
+
+    97% {
+      opacity: 1;
+    }
+
+    100% {
+      background-size:
+        var(--grid-size) var(--grid-size),
+        var(--grid-size) var(--grid-size),
+        calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5);
+      opacity: 1;
+      background-position:
+        var(--zx) var(--zy),
+        var(--zx) var(--zy),
+        var(--zx-m) var(--zy-m),
+        var(--zx-m) var(--zy-m);
+    }
+  }
+
+  .stylecheat,
+  [stylecheat] {
+    /* ---- A.css ---- */
+    .a:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]),
+    a:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]) {
+      transition: all 100ms ease-in-out;
+      text-decoration: none;
+
+      &.primary,
+      &[primary] {
+        color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+
+        &:hover,
+        &:focus {
+          color: oklch(from var(--primary) calc(l - 0.1 * var(--theme-sign)) c h);
+        }
+      }
+
+      &.secondary,
+      &[secondary] {
+        color: var(--secondary-foreground);
+
+        &:hover,
+        &:focus {
+          color: oklch(
+            from var(--secondary-foreground) calc(l * (1 - 0.1 * var(--theme-sign))) c h
+          );
+        }
+      }
+
+      &.tertiary,
+      &[tertiary] {
+        /* Start - Button tertiary styles */
+        display: flex;
+        border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+        line-height: calc(var(--unit) * 4);
+        outline-offset: 0;
+        > * {
+          margin-inline: calc(-1 * var(--unit));
+        }
+        /* End - Button tertiary styles */
+
+        background-color: transparent;
+        color: var(--secondary-foreground);
+        box-shadow: none;
+
+        &:hover {
+          background-color: oklch(from var(--primary) l c h / 0.12);
+          color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+        }
+
+        &:focus-visible {
+          outline: 3px solid
+            oklch(from var(--primary) calc(l * (1 - 0.075 * var(--theme-sign))) c h);
+        }
+      }
+
+      &:active {
+        transform: translateY(1px);
+      }
+
+      &:focus-visible {
+        outline: 3px solid oklch(from var(--primary) calc(l/2 + 0.4) c h);
+      }
+    }
+    /* ---- Accordion.css ---- */
+    .accordion,
+    accordion {
+      display: grid;
+      width: 100%;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 200ms ease-out;
+    }
+
+    .accordion:is(.open),
+    accordion[open] {
+      grid-template-rows: 1fr;
+    }
+
+    .accordion > .accordion-content,
+    accordion > accordion-content {
+      overflow: hidden;
+    }
+    /* ---- Animations.css ---- */
+    .animate-spin,
+    [animate-spin] {
+      animation: animate-spin 1s linear infinite;
+    }
+
+    .animate-pulse,
+    [animate-pulse] {
+      animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .animate-ping,
+    [animate-ping] {
+      animation: animate-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
+    }
+
+    .animate-bounce,
+    [animate-bounce] {
+      animation: animate-bounce 1s infinite;
+    }
+
+    .animate-shake,
+    [animate-shake] {
+      animation: animate-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
+    }
+
+    .animate-shimmer,
+    [animate-shimmer] {
+      background-color: transparent;
+      background-image: linear-gradient(
+        90deg,
+        currentColor 0%,
+        oklch(from currentColor l c h / 0.3) 50%,
+        currentColor 100%
+      );
+      background-size: 200% 100%;
+      animation: animate-shimmer 1.5s linear infinite;
+    }
+
+    :is(.animate-fade-in, [animate-fade-in], .animate-fade-out, [animate-fade-out]) {
+      transition: opacity 200ms ease;
+    }
+
+    :is(.animate-fade-in, [animate-fade-in]) {
+      opacity: 0;
+    }
+
+    :is(.animate-fade-in, [animate-fade-in]):is(.toggled, [toggled]) {
+      opacity: 1;
+    }
+
+    :is(.animate-fade-out, [animate-fade-out]):is(.toggled, [toggled]) {
+      opacity: 0;
+    }
+
+    :is(
+      .animate-slide-in-left,
+      [animate-slide-in-left],
+      .animate-slide-in-right,
+      [animate-slide-in-right],
+      .animate-slide-in-up,
+      [animate-slide-in-up],
+      .animate-slide-in-down,
+      [animate-slide-in-down]
+    ) {
+      opacity: 0;
+      transition:
+        transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
+        opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    :is(.animate-slide-in-left, [animate-slide-in-left]) {
+      transform: translateX(-100%);
+    }
+    :is(.animate-slide-in-right, [animate-slide-in-right]) {
+      transform: translateX(100%);
+    }
+    :is(.animate-slide-in-up, [animate-slide-in-up]) {
+      transform: translateY(-100%);
+    }
+    :is(.animate-slide-in-down, [animate-slide-in-down]) {
+      transform: translateY(100%);
+    }
+
+    :is(
+      .animate-slide-in-left,
+      [animate-slide-in-left],
+      .animate-slide-in-right,
+      [animate-slide-in-right],
+      .animate-slide-in-up,
+      [animate-slide-in-up],
+      .animate-slide-in-down,
+      [animate-slide-in-down]
+    ):is(.toggled, [toggled]) {
+      transform: translate(0, 0);
+      opacity: 1;
+    }
+
+    :is(.animate-bounce-in, [animate-bounce-in]) {
+      transform: scale(0);
+      opacity: 0;
+      transition:
+        transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+        opacity 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    :is(.animate-bounce-in, [animate-bounce-in]):is(.toggled, [toggled]) {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    :is(.animate-bounce-out, [animate-bounce-out]) {
+      transition:
+        transform 250ms cubic-bezier(0.36, 0, 0.66, -0.56),
+        opacity 250ms cubic-bezier(0.36, 0, 0.66, -0.56);
+    }
+    :is(.animate-bounce-out, [animate-bounce-out]):is(.toggled, [toggled]) {
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    :is(.animate-x, [animate-x], .animate-y, [animate-y]) {
+      transition: transform 200ms ease;
+    }
+
+    :is(.animate-x, [animate-x]):is(.toggled, [toggled]) {
+      transform: rotateY(180deg);
+    }
+    :is(.animate-y, [animate-y]):is(.toggled, [toggled]) {
+      transform: rotateX(180deg);
+    }
+    /* ---- Badge.css ---- */
+    .badge,
+    badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--unit) * 1);
+      padding: calc(var(--unit) * 0.5) calc(var(--unit) * 2);
+      border-radius: 9999px;
+      font-family: var(--font-sans);
+      font-size: calc(var(--unit) * 3);
+      font-weight: 500;
+      white-space: nowrap;
+      width: fit-content;
+      overflow: hidden;
+
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+    }
+
+    .badge.secondary,
+    .badge[secondary],
+    badge.secondary,
+    badge[secondary] {
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+    }
+
+    .badge.destructive,
+    .badge[destructive],
+    badge.destructive,
+    badge[destructive] {
+      background-color: var(--destructive);
+      color: white;
+    }
+
+    .badge.outline,
+    .badge[outline],
+    badge.outline,
+    badge[outline] {
+      background-color: transparent;
+      color: var(--foreground);
+      box-shadow: inset 0 0 0 1px var(--border);
+    }
+
+    .badge.ghost,
+    .badge[ghost],
+    badge.ghost,
+    badge[ghost] {
+      background-color: transparent;
+      color: var(--foreground);
+    }
+    /* ---- Breadcrumb.css ---- */
+    .breadcrumb,
+    breadcrumb {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--unit) * 1);
+      font-size: var(--unit-size, inherit);
+      color: var(--muted-foreground);
+    }
+
+    .breadcrumb .current,
+    .breadcrumb [current],
+    breadcrumb .current,
+    breadcrumb [current] {
+      color: var(--foreground);
+    }
+
+    .breadcrumb > * + *::before,
+    breadcrumb > * + *::before {
+      content: '/';
+      margin-right: calc(var(--unit) * 1);
+      color: var(--muted-foreground);
+    }
+    /* ---- Button.css ---- */
+    .button:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]),
+    button:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      gap: calc(var(--unit) * 1);
+      font-size: var(--unit-size, inherit);
+
+      background-color: transparent;
+
+      border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+      padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+      line-height: 1em;
+      box-shadow: inset 0 0 0 1px transparent;
+
+      cursor: pointer;
+
+      > * {
+        margin-inline: calc(-1 * var(--unit));
+      }
+
+      &.primary,
+      &[primary] {
+        background-color: oklch(from var(--primary) l c h / 0.12);
+        color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+        box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.2);
+
+        &:not(:disabled):hover {
+          background-color: oklch(from var(--primary) l c h / 0.2);
+          box-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.3);
+        }
+
+        &:focus-visible:not(:disabled) {
+          outline: 3px solid oklch(from var(--primary) l c h / 0.4);
+        }
+      }
+
+      &.secondary,
+      &[secondary] {
+        background-color: var(--secondary);
+        color: var(--secondary-foreground);
+        box-shadow: inset 0 0 0 1px var(--border);
+
+        &:not(:disabled):hover {
+          background-color: oklch(
+            from var(--secondary) calc(l * (1 - 0.035 * var(--theme-sign))) c h
+          );
+          color: oklch(
+            from var(--secondary-foreground) calc(l * (1 - 0.035 * var(--theme-sign))) c h
+          );
+        }
+
+        &:focus-visible:not(:disabled) {
+          outline: 3px solid
+            oklch(from var(--secondary) calc(l * (1 - 0.075 * var(--theme-sign))) c h);
+        }
+      }
+
+      &.tertiary,
+      &[tertiary] {
+        background-color: transparent;
+        color: var(--secondary-foreground);
+        box-shadow: none;
+
+        &:not(:disabled):hover {
+          background-color: oklch(from var(--primary) l c h / 0.12);
+          color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+          box-shadow: none;
+        }
+
+        &:focus-visible:not(:disabled) {
+          outline: 3px solid
+            oklch(from var(--secondary) calc(l * (1 - 0.075 * var(--theme-sign))) c h);
+        }
+      }
+
+      &:not(:disabled):active {
+        transform: translateY(1px);
+      }
+
+      &:disabled {
+        color: oklch(from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h);
+      }
+    }
+    /* ---- Card.css ---- */
+    .card,
+    card {
+      display: flex;
+      flex-direction: column;
+      padding: calc(var(--unit) * 4);
+      box-shadow: inset 0 0 0 1px var(--border);
+
+      background-color: var(--card);
+      color: var(--foreground);
+      font-size: var(--unit-size, inherit);
+      border-radius: calc(var(--radius) - (8px - var(--unit)));
+    }
+    /* ---- Carousel.css ---- */
+
+    slides > * {
+      --n: sibling-count();
+    }
+
+    carousel {
+      display: flex;
+      flex: 1;
+      container-type: size;
+      contain: paint;
+      width: 100%;
+      height: 100%;
+    }
+
+    slides {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow-y: auto;
+      scrollbar-width: none;
+    }
+
+    slides.scrollbar,
+    slides[scrollbar] {
+      scrollbar-width: auto;
+    }
+
+    slides.x,
+    slides[x] {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      overflow-y: hidden;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      overscroll-behavior-x: none;
+    }
+
+    slides.y,
+    slides[y],
+    slides.z,
+    slides[z] {
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scroll-snap-type: y mandatory;
+      overscroll-behavior-y: none;
+    }
+
+    slides.y,
+    slides[y],
+    slides.z,
+    slides[z] {
+      scroll-timeline: --slides-scroll block;
+    }
+
+    slides.x,
+    slides[x] {
+      scroll-timeline: --slides-scroll-x inline;
+    }
+
+    slides.x > *,
+    slides[x] > * {
+      height: 100%;
+      min-width: 100%;
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+      display: flex;
+    }
+
+    slides.y > *,
+    slides[y] > * {
+      min-height: 100%;
+      width: 100%;
+      scroll-snap-align: start;
+      scroll-snap-stop: always;
+      display: flex;
+    }
+
+    slides.z > *,
+    slides[z] > * {
+      min-height: 100%;
+      width: 100%;
+      scroll-snap-align: start;
+    }
+
+    slide {
+      display: block;
+    }
+
+    slides.x > * > *,
+    slides[x] > * > *,
+    slides.y > * > *,
+    slides[y] > * > * {
+      position: relative;
+    }
+
+    slides.z > * > *,
+    slides[z] > * > * {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    slides.z > slide,
+    slides[z] > slide {
+      view-timeline: --slide-self block;
+    }
+
+    slides.z > slide > *,
+    slides[z] > slide > * {
+      animation: z-fade-scale linear both;
+      animation-timeline: --slide-self;
+    }
+
+    slides.z > slide > * > *,
+    slides[z] > slide > * > * {
+      pointer-events: none;
+      animation: z-pointer linear both;
+      animation-timeline: --slide-self;
+    }
+
+    /* --- slides + square-grid: animated grid for y/x/z modes --- */
+
+    slides.square-grid.center,
+    slides.square-grid[center],
+    slides[square-grid].center,
+    slides[square-grid][center] {
+      --gx: 50cqw;
+      --gy: 50cqh;
+    }
+
+    slides.square-grid:not(.locked):not([locked]).y:has(> :nth-child(2)),
+    slides.square-grid:not(.locked):not([locked])[y]:has(> :nth-child(2)),
+    slides[square-grid]:not(.locked):not([locked]).y:has(> :nth-child(2)),
+    slides[square-grid]:not(.locked):not([locked])[y]:has(> :nth-child(2)),
+    slides.square-grid:not(.locked):not([locked]).z:has(> :nth-child(2)),
+    slides.square-grid:not(.locked):not([locked])[z]:has(> :nth-child(2)),
+    slides[square-grid]:not(.locked):not([locked]).z:has(> :nth-child(2)),
+    slides[square-grid]:not(.locked):not([locked])[z]:has(> :nth-child(2)) {
+      background-image: none;
+    }
+
+    slides.square-grid:not(.locked):not([locked]).y:has(> :nth-child(2)) > :first-child::before,
+    slides.square-grid:not(.locked):not([locked])[y]:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked]).y:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked])[y]:has(> :nth-child(2)) > :first-child::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background:
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5);
+      animation: grid-pan-y linear both;
+      animation-timeline: --slides-scroll;
+    }
+
+    slides.square-grid:not(.locked):not([locked]).x:has(> :nth-child(2)),
+    slides.square-grid:not(.locked):not([locked])[x]:has(> :nth-child(2)),
+    slides[square-grid]:not(.locked):not([locked]).x:has(> :nth-child(2)),
+    slides[square-grid]:not(.locked):not([locked])[x]:has(> :nth-child(2)) {
+      background-image: none;
+    }
+
+    slides.square-grid:not(.locked):not([locked]).x:has(> :nth-child(2)) > :first-child::before,
+    slides.square-grid:not(.locked):not([locked])[x]:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked]).x:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked])[x]:has(> :nth-child(2)) > :first-child::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background:
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5);
+      animation: grid-pan-x linear both;
+      animation-timeline: --slides-scroll-x;
+    }
+
+    slides.square-grid:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::before,
+    slides.square-grid:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::after,
+    slides.square-grid:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::before,
+    slides.square-grid:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::after,
+    slides[square-grid]:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::after,
+    slides[square-grid]:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      --cx: calc(var(--gx) + round(nearest, 50cqw - var(--gx), var(--grid-size)));
+      --cy: calc(var(--gy) + round(nearest, 50cqh - var(--gy), var(--grid-size)));
+      --zx: calc(2 * var(--gx) - var(--cx));
+      --zy: calc(2 * var(--gy) - var(--cy));
+      --zx-m: calc(2 * var(--gx) - var(--cx));
+      --zy-m: calc(2 * var(--gy) - var(--cy));
+      background-position: var(--gx) var(--gy);
+      background-image:
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px),
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px);
+      animation-timeline: --slides-scroll;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-iteration-count: calc(var(--n) - 1);
+    }
+
+    slides.square-grid:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::before,
+    slides.square-grid:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::before,
+    slides[square-grid]:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::before {
+      animation-name: grid-zoom-out;
+    }
+
+    slides.square-grid:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::after,
+    slides.square-grid:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::after,
+    slides[square-grid]:not(.locked):not([locked]).z:has(> :nth-child(2)) > :first-child::after,
+    slides[square-grid]:not(.locked):not([locked])[z]:has(> :nth-child(2)) > :first-child::after {
+      animation-name: grid-zoom-in;
+    }
+
+    /* ---- Checkbox.css ---- */
+    .checkbox,
+    .switch,
+    input[type='checkbox'] {
+      appearance: none;
+
+      background-color: var(--input);
+      border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+
+      width: calc(var(--unit) * 6);
+      height: calc(var(--unit) * 6);
+      padding: calc(var(--unit) * 1);
+
+      vertical-align: top;
+
+      &:before {
+        content: '';
+        display: block;
+        aspect-ratio: 1;
+        height: 100%;
+        border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+        background-color: oklch(
+          from var(--primary) calc(l + (1 - (var(--theme-sign) + 1) / 2))
+            calc(c * (1 * (var(--theme-sign) + 1) / 2)) h
+        );
+        transform: scale(0);
+      }
+
+      &:checked:before {
+        transition: transform 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
+        transform: scale(1);
+      }
+    }
+    /* ---- Circle.css ---- */
+    circle,
+    .circle,
+    [circle] {
+      display: flex;
+      width: 100%;
+      aspect-ratio: 1;
+      border-radius: 100%;
+    }
+    /* ---- Code.css ---- */
+    code {
+      font-family: var(--font-mono, monospace);
+      font-size: calc(var(--unit-size, 1em) * 0.85);
+      background: oklch(from var(--slate) l c h / 0.1);
+      color: var(--slate);
+      border: 1px solid oklch(from var(--slate) l c h / 0.2);
+      border-radius: calc(var(--unit) * 1);
+      padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+    }
+
+    :where(.dark, [dark]) code {
+      background: oklch(0.3 0.03 260);
+      color: oklch(0.7 0.05 260);
+      border-color: oklch(0.35 0.03 260);
+    }
+    /* ---- Collective.css ---- */
+    .input,
+    .checkbox,
+    .radio,
+    .select,
+    .textarea,
+    .button:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]),
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']),
+    input[type='file'],
+    input[type='checkbox'],
+    input[type='radio'],
+    select,
+    textarea,
+    button:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]) {
+      box-shadow: inset 0 0 0 1px var(--border);
+
+      transition-property: box-shadow, background-color, color;
+      transition-duration: 100ms;
+      transition-timing-function: ease-in-out;
+
+      &::placeholder {
+        font-weight: 400;
+      }
+
+      &:disabled {
+        background-color: oklch(from var(--background) calc(l * (1 - 0.1 * var(--theme-sign))) c h);
+        color: oklch(from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h);
+        box-shadow: none;
+        cursor: not-allowed;
+      }
+    }
+
+    .input,
+    .textarea,
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']),
+    textarea {
+      &:disabled {
+        /* This is needed for Input & Textarea, to actually respect the color in chrome */
+        -webkit-text-fill-color: oklch(
+          from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h
+        );
+      }
+    }
+
+    .input,
+    .select,
+    textarea,
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']),
+    input[type='checkbox'],
+    input[type='radio'],
+    select,
+    textarea {
+      /* &:focus:enabled:not(:checked), */
+      &:active:enabled:not(:checked),
+      &:focus-visible:enabled {
+        outline: 3px solid oklch(from var(--input) calc(l/2 + 0.4) c h);
+        outline-offset: 0;
+      }
+    }
+    /* ---- Container.css ---- */
+    container,
+    .container,
+    [container] {
+      display: flex;
+      width: 100%;
+      max-width: 1280px;
+      margin-inline: auto;
+    }
+    /* ---- Crow.css ---- */
+    crow:not(:has(> crow)) > crow,
+    .crow:not(:has(> .crow)) > .crow {
+      flex: 1;
+    }
+
+    crow,
+    .crow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--unit-size, inherit);
+    }
+    .up,
+    [up],
+    .down,
+    [down] {
+      height: 100%;
+    }
+    .up,
+    [up] {
+      align-items: flex-start;
+    }
+    .down,
+    [down] {
+      align-items: flex-end;
+    }
+    .left,
+    [left] {
+      justify-content: flex-start;
+    }
+    .right,
+    [right] {
+      justify-content: flex-end;
+    }
+    .vertical,
+    [vertical] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .vertical > .up,
+    [vertical] > [up],
+    .vertical > .down,
+    [vertical] > [down] {
+      height: auto;
+    }
+    .vertical.up,
+    [vertical][up] {
+      justify-content: flex-start;
+    }
+    .vertical.down,
+    [vertical][down] {
+      justify-content: flex-end;
+    }
+    .crow.vertical.left,
+    crow[vertical][left],
+    .crow.vertical > .left,
+    crow[vertical] > [left],
+    .crow.vertical.right,
+    crow[vertical][right],
+    .crow.vertical > .right,
+    crow[vertical] > [right] {
+      width: 100%;
+    }
+    .vertical.left,
+    [vertical][left] {
+      align-items: flex-start;
+    }
+    .vertical.right,
+    [vertical][right] {
+      align-items: flex-end;
+    }
+    .vertical > .left,
+    [vertical] > [left],
+    .vertical > .right,
+    [vertical] > [right] {
+      display: flex;
+    }
+    /* ---- Hr.css ---- */
+    hr,
+    .hr {
+      border: none;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, transparent, var(--border), transparent);
+    }
+    /* ---- Label.css ---- */
+    .label:has(input[type='checkbox'], input[type='radio']),
+    label:has(input[type='checkbox'], input[type='radio']) {
+      display: flex;
+      gap: calc(var(--unit) * 2);
+      font-size: var(--unit-size, inherit);
+      align-items: center;
+    }
+
+    .label:has(select, input:not([type='checkbox'], [type='radio'], [type='range'], [type='file'])),
+    label:has(select, input:not([type='checkbox'], [type='radio'], [type='range'], [type='file'])) {
+      display: grid;
+    }
+
+    .label > .select,
+    .label > .input,
+    label > select,
+    label > input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']) {
+      grid-area: 1/1;
+      padding-inline-end: calc(var(--unit) * 8); /* 32px */
+    }
+
+    .label:has(:disabled),
+    label:has(:disabled) {
+      color: oklch(from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h);
+      cursor: not-allowed;
+    }
+
+    .label:has(
+        .select,
+        .input:not([type='checkbox'], [type='radio'], [type='range'], [type='file'])
+      ):after,
+    label:has(
+        select,
+        input:not([type='checkbox'], [type='radio'], [type='range'], [type='file'])
+      ):after {
+      content: '';
+      pointer-events: none;
+      grid-area: 1/1;
+      mask-position: calc(100% - calc(var(--unit) * 2)) center;
+      mask-size: calc(var(--unit) * 3.5) auto;
+      mask-repeat: no-repeat;
+      background-color: var(--popover-foreground);
+    }
+
+    .label:has(
+        .input:not(
+            [type='checkbox'],
+            [type='radio'],
+            [type='range'],
+            [type='file']
+          ):placeholder-shown
+      ):after,
+    label:has(
+        input:not(
+            [type='checkbox'],
+            [type='radio'],
+            [type='range'],
+            [type='file']
+          ):placeholder-shown
+      ):after {
+      background-color: oklch(from var(--background) calc(l/2 + 0.3 - 0.1 * var(--theme-sign)) c h);
+    }
+
+    .label:has(
+        .select:disabled,
+        .input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']):disabled
+      ):after,
+    label:has(
+        select:disabled,
+        input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']):disabled
+      ):after {
+      background-color: oklch(from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h);
+    }
+
+    .label:has(.select):after,
+    label:has(select):after {
+      mask-image: var(--icon, var(--icon-chevron-down));
+    }
+
+    .label:has(.input:not([type='checkbox'], [type='radio'], [type='range'], [type='file'])):after,
+    label:has(input:not([type='checkbox'], [type='radio'], [type='range'], [type='file'])):after {
+      transition: background-color 150ms ease-in-out;
+      mask-image: var(--icon, var(--icon-search));
+    }
+    /* ---- Progress.css ---- */
+    .progress,
+    progress {
+      appearance: none;
+      display: flex;
+      min-width: calc(var(--unit) * 59);
+      height: calc(var(--unit) * 1.5);
+      border: 0;
+
+      background-color: var(--input);
+      border-radius: calc(var(--unit) * 3);
+      box-shadow: inset 0 0 0 1px var(--border);
+
+      &::-webkit-progress-bar {
+        background-color: transparent;
+        border-radius: calc(var(--unit) * 3);
+      }
+
+      &::-webkit-progress-value {
+        background-color: oklch(
+          from var(--primary) calc(l + (1 - (var(--theme-sign) + 1) / 2))
+            calc(c * (1 * (var(--theme-sign) + 1) / 2)) h
+        );
+        border-radius: calc(var(--unit) * 3);
+        box-shadow: 0 0 0 1px var(--border);
+      }
+    }
+    /* ---- Radio.css ---- */
+    .radio,
+    input[type='radio'] {
+      appearance: none;
+
+      background-color: var(--input);
+      border-radius: 50%;
+
+      width: calc(var(--unit) * 6);
+      height: calc(var(--unit) * 6); /* aspect-ratio: 1; doesn't seem to work for safari iphone */
+      padding: calc(var(--unit) * 1);
+
+      vertical-align: top;
+
+      &:before {
+        content: '';
+        display: block;
+        aspect-ratio: 1;
+        height: 100%;
+        border-radius: 50%;
+        background-color: oklch(
+          from var(--primary) calc(l + (1 - (var(--theme-sign) + 1) / 2))
+            calc(c * (1 * (var(--theme-sign) + 1) / 2)) h
+        );
+        transform: scale(0);
+      }
+
+      &:checked:before {
+        transition: transform 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
+        transform: scale(1);
+      }
+    }
+    /* ---- Range.css ---- */
+    .range,
+    input[type='range'] {
+      display: flex;
+      appearance: none;
+      min-width: calc(var(--unit) * 59);
+      outline: 0;
+
+      background-color: var(--input);
+      border-radius: calc(var(--unit) * 3);
+      height: calc(var(--unit) * 1.5);
+      box-shadow: inset 0 0 0 1px var(--border);
+
+      &::-webkit-slider-thumb {
+        appearance: none;
+        outline: 0px inset transparent;
+        outline-offset: 0;
+        transition: outline 50ms ease-in-out;
+        transition: outline 50ms ease-in-out;
+
+        width: calc(var(--unit) * 6);
+        aspect-ratio: 1;
+        background-color: oklch(
+          from var(--primary) calc(l + (1 - (var(--theme-sign) + 1) / 2))
+            calc(c * (1 * (var(--theme-sign) + 1) / 2)) h
+        );
+        border-radius: 50%;
+
+        border: calc(var(--unit) * 1) solid var(--input);
+        outline: 1px solid var(--border);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+
+        &::-webkit-slider-thumb {
+          border-color: oklch(from var(--background) calc(l * (1 - 0.1 * var(--theme-sign))) c h);
+          background-color: oklch(from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h);
+          outline-color: transparent;
+        }
+      }
+
+      &:focus:enabled:not(:active) {
+        outline: 0;
+
+        &::-webkit-slider-thumb {
+          outline: 3px solid oklch(from var(--input) calc(l/2 + 0.4) c h);
+        }
+      }
+    }
+    /* ---- Select.css ---- */
+    .select,
+    select {
+      min-width: calc(var(--unit) * 59);
+      appearance: none;
+
+      background-color: var(--input);
+      color: var(--popover-foreground);
+      border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+      font-size: var(--unit-size, inherit);
+
+      padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
+
+      &:invalid {
+        color: oklch(from var(--background) calc(l/2 + 0.3 - 0.1 * var(--theme-sign)) c h);
+      }
+    }
+    /* ---- Sidebar.css ---- */
+    sidebar {
+      position: sticky;
+      top: 0;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      order: -1;
+    }
+
+    sidebar-content {
+      width: calc(var(--unit) * 56);
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding: calc(var(--unit) * 4);
+      justify-content: space-between;
+    }
+
+    input#sidebar-toggle {
+      position: absolute;
+      opacity: 0;
+    }
+
+    @media (width <= 768px) {
+      sidebar {
+        position: fixed;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        pointer-events: none;
+      }
+
+      sidebar:has(input#sidebar-toggle:checked) input#sidebar-toggle {
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      sidebar:has(input#sidebar-toggle:checked) {
+        pointer-events: auto;
+        transform: translateX(0);
+        background: oklch(from black l c h / 0.5);
+        transition: background-color 300ms ease;
+      }
+
+      sidebar-content {
+        background-color: var(--sidebar);
+        border-right: 1px solid var(--sidebar-border);
+        color: var(--sidebar-foreground);
+        transform: translateX(-100%);
+        transition: transform 300ms ease;
+        pointer-events: auto;
+      }
+
+      sidebar:has(input#sidebar-toggle:checked) sidebar-content {
+        transform: translateX(0);
+      }
+    }
+    /* ---- SquareGrid.css ---- */
+    .square-grid,
+    square-grid {
+      --grid-size: calc(var(--grid-unit, var(--unit)) * 12);
+      --gx: 0px;
+      --gy: 0px;
+      /* background-attachment: fixed; */
+    }
+
+    .square-grid.center,
+    .square-grid[center],
+    square-grid.center,
+    square-grid[center] {
+      --gx: calc(50% - var(--grid-size) / 2);
+      --gy: calc(50% - var(--grid-size) / 2);
+    }
+
+    .square-grid.locked,
+    .square-grid[locked],
+    square-grid.locked,
+    square-grid[locked] {
+      background:
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5);
+      background-attachment: fixed;
+    }
+
+    .square-grid:not(.locked):not([locked]),
+    square-grid:not(.locked):not([locked]) {
+      background:
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.22) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / var(--grid-size) var(--grid-size),
+        linear-gradient(to right, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5),
+        linear-gradient(to bottom, oklch(0.55 0.02 260 / 0.08) 0 1px, transparent 1px) var(--gx)
+          var(--gy) / calc(var(--grid-size) * 0.5) calc(var(--grid-size) * 0.5);
+    }
+    /* ---- Stack.css ---- */
+    stack {
+      display: grid;
+      place-items: center;
+    }
+
+    stack > * {
+      grid-area: 1/1;
+    }
+    /* ---- Sticky.css ---- */
+    .sticky,
+    sticky {
+      display: flex;
+      position: sticky;
+      flex-direction: column;
+      top: 0;
+      order: -1;
+      container-type: scroll-state;
+    }
+
+    .sticky.auto-shadow::after,
+    .sticky[auto-shadow]::after,
+    sticky.auto-shadow::after,
+    sticky[auto-shadow]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: box-shadow 150ms;
+    }
+
+    @container scroll-state(stuck: top) {
+      .sticky.auto-shadow::after,
+      .sticky[auto-shadow]::after,
+      sticky.auto-shadow::after,
+      sticky[auto-shadow]::after {
+        box-shadow:
+          inset 0 1px 0 oklch(from var(--background) calc(l + 0.04) c h),
+          inset 0 -1px 0 oklch(from var(--shadow-color) l c h / 0.2),
+          0 calc(var(--unit) * 0.5) calc(var(--unit) * 1.5) calc(var(--unit) * -0.5)
+            oklch(from var(--shadow-color) l c h / 0.45);
+      }
+    }
+
+    @container scroll-state(stuck: bottom) {
+      .sticky.auto-shadow::after,
+      .sticky[auto-shadow]::after,
+      sticky.auto-shadow::after,
+      sticky[auto-shadow]::after {
+        box-shadow:
+          inset 0 -1px 0 oklch(from var(--background) calc(l + 0.04) c h),
+          inset 0 1px 0 oklch(from var(--shadow-color) l c h / 0.2),
+          0 calc(var(--unit) * -0.5) calc(var(--unit) * 1.5) calc(var(--unit) * -0.5)
+            oklch(from var(--shadow-color) l c h / 0.45);
+      }
+    }
+
+    .sticky.reverse,
+    .sticky[reverse],
+    sticky.reverse,
+    sticky[reverse] {
+      order: 0;
+      top: auto;
+      bottom: 0;
+    }
+
+    @media (width <= 768px) {
+      .sticky.sm\:reverse,
+      .sticky[sm\:reverse],
+      sticky.sm\:reverse,
+      sticky[sm\:reverse] {
+        order: 0;
+        top: auto;
+        bottom: 0;
+      }
+    }
+
+    @media (768px < width <= 1024px) {
+      .sticky.md\:reverse,
+      .sticky[md\:reverse],
+      sticky.md\:reverse,
+      sticky[md\:reverse] {
+        order: 0;
+        top: auto;
+        bottom: 0;
+      }
+    }
+
+    @media (width > 1024px) {
+      .sticky.lg\:reverse,
+      .sticky[lg\:reverse],
+      sticky.lg\:reverse,
+      sticky[lg\:reverse] {
+        order: 0;
+        top: auto;
+        bottom: 0;
+      }
+    }
+    /* ---- Switch.css ---- */
+    .switch,
+    input[type='checkbox'][role='switch'] {
+      width: calc(var(--unit) * 12);
+
+      background-color: var(--input);
+      border-radius: calc(var(--unit) * 3);
+
+      &:before {
+        transition: all 150ms ease-in-out;
+        content: '';
+        color: var(--primary-foreground);
+        border-radius: calc(var(--unit) * 2.5);
+        transform: scale(1);
+      }
+
+      &:disabled:before {
+        background-color: oklch(from var(--popover) calc(l * (1 - 0.5 * var(--theme-sign))) c h);
+      }
+
+      &:checked {
+        background-color: var(--primary);
+        box-shadow: inset 0 0 0 1px
+          oklch(from var(--primary) calc(l * (1 + 0.075 * var(--theme-sign))) c h);
+
+        &:active:enabled,
+        &:focus-visible:enabled {
+          outline-color: oklch(from var(--primary) calc(l * (1 + 0.075 * var(--theme-sign))) c h);
+        }
+
+        &:before {
+          background-color: var(--primary-foreground);
+        }
+      }
+
+      &:checked:before {
+        margin-inline-start: calc(var(--unit) * 6);
+      }
+
+      &:active:enabled,
+      &:focus-visible:enabled {
+        outline: 3px solid oklch(from var(--input) calc(l/2 + 0.4) c h);
+        outline-offset: 0;
+      }
+    }
+    /* ---- Table.css ---- */
+    .table,
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      color: var(--foreground);
+      font-size: var(--unit-size, inherit);
+      font-family: var(--font-sans);
+    }
+
+    .table td,
+    table td {
+      padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+      text-align: left;
+      vertical-align: middle;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .table tr:first-child td,
+    table tr:first-child td {
+      font-size: calc(var(--unit) * 3);
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .table tr:not(:first-child) td,
+    table tr:not(:first-child) td {
+      color: var(--muted-foreground);
+    }
+
+    .table tr:last-child td,
+    table tr:last-child td {
+      border-bottom: none;
+    }
+
+    .table tr:not(:first-child):hover td,
+    table tr:not(:first-child):hover td {
+      background-color: oklch(from var(--foreground) l c h / 0.04);
+    }
+    /* ---- Tabs.css ---- */
+    .tabs:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]),
+    tabs:is(.primary, .secondary, .tertiary, [primary], [secondary], [tertiary]) {
+      display: flex;
+      align-items: flex-end;
+      gap: calc(var(--unit) * 1);
+      border-bottom: 1px solid var(--border);
+
+      > .tab,
+      > tab {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+        gap: calc(var(--unit) * 1);
+        font-size: var(--unit-size, inherit);
+        line-height: 1em;
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+        border: 1px solid transparent;
+        border-bottom: 0;
+        border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1))
+          min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1)) 0 0;
+        background-color: transparent;
+        color: var(--foreground);
+        cursor: pointer;
+
+        > * {
+          margin-inline: calc(-1 * var(--unit));
+        }
+      }
+
+      &.primary > .tab:not(.active, [active]),
+      &[primary] > tab:not(.active, [active]) {
+        background-color: oklch(from var(--primary) l c h / 0.12);
+        color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+        border-color: oklch(from var(--primary) l c h / 0.2);
+
+        &:hover {
+          background-color: oklch(from var(--primary) l c h / 0.2);
+          border-color: oklch(from var(--primary) l c h / 0.3);
+        }
+      }
+
+      &.primary > .tab:is(.active, [active]),
+      &[primary] > tab:is(.active, [active]) {
+        border-color: oklch(from var(--primary) l c h / 0.2);
+        box-shadow: 0 1px 0 0 var(--tab-surface, var(--background));
+      }
+
+      &.secondary > .tab:not(.active, [active]),
+      &[secondary] > tab:not(.active, [active]) {
+        background-color: var(--secondary);
+        color: var(--secondary-foreground);
+        border-color: var(--border);
+
+        &:hover {
+          background-color: oklch(
+            from var(--secondary) calc(l * (1 - 0.035 * var(--theme-sign))) c h
+          );
+        }
+      }
+
+      &.secondary > .tab:is(.active, [active]),
+      &[secondary] > tab:is(.active, [active]) {
+        border-color: var(--border);
+        box-shadow: 0 1px 0 0 var(--tab-surface, var(--background));
+      }
+
+      &.tertiary > .tab:not(.active, [active]),
+      &[tertiary] > tab:not(.active, [active]) {
+        color: var(--secondary-foreground);
+
+        &:hover {
+          background-color: oklch(from var(--primary) l c h / 0.12);
+          color: oklch(from var(--primary) calc(l - 0.2 * var(--theme-sign)) c h);
+        }
+      }
+
+      &.tertiary > .tab:is(.active, [active]),
+      &[tertiary] > tab:is(.active, [active]) {
+        border-color: var(--border);
+        box-shadow: 0 1px 0 0 var(--tab-surface, var(--background));
+      }
+    }
+    /* ---- TextArea.css ---- */
+    .textarea,
+    textarea {
+      min-width: calc(var(--unit) * 59);
+
+      background-color: var(--input);
+      border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+      color: oklch(calc((1 - var(--theme-sign)) * 0.5) 0 0);
+      padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
+      font-size: var(--unit-size, inherit);
+
+      &:not(:disabled)::placeholder {
+        color: oklch(from var(--background) calc(l/2 + 0.3 - 0.1 * var(--theme-sign)) c h);
+      }
+    }
+    /* ---- TextInput.css ---- */
+    .input,
+    input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']) {
+      min-width: calc(var(--unit) * 59);
+
+      background-color: var(--input);
+      border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+      color: var(--popover-foreground);
+      padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
+      font-size: var(--unit-size, inherit);
+
+      &:not(:disabled)::placeholder {
+        color: oklch(from var(--background) calc(l/2 + 0.3 - 0.1 * var(--theme-sign)) c h);
+      }
+    }
+  }
+}
+@layer modifiers {
+  .stylecheat,
+  [stylecheat] {
+    /* ---- Modifiers.css ---- */
+    .sm,
+    [sm] {
+      --unit: 3px;
+      --unit-size: 12px;
+      font-size: var(--unit-size, inherit);
+    }
+    .md,
+    [md] {
+      --unit: 4px;
+      --unit-size: 16px;
+      font-size: var(--unit-size, inherit);
+    }
+    .lg,
+    [lg] {
+      --unit: 5px;
+      --unit-size: 18px;
+      font-size: var(--unit-size, inherit);
+    }
+
+    .overflow-hidden,
+    [overflow-hidden] {
+      overflow: hidden;
+    }
+    .hide,
+    [hide] {
+      display: none;
+    }
+    .flex,
+    [flex] {
+      display: flex;
+    }
+    .block,
+    [block] {
+      display: block;
+    }
+    .inline-block,
+    [inline-block] {
+      display: inline-block;
+    }
+
+    .f-0,
+    [f-0] {
+      flex: none;
+    }
+    .f-1,
+    [f-1] {
+      flex: 1;
+    }
+    .f-2,
+    [f-2] {
+      flex: 2;
+    }
+    .f-3,
+    [f-3] {
+      flex: 3;
+    }
+    .f-4,
+    [f-4] {
+      flex: 4;
+    }
+    .f-5,
+    [f-5] {
+      flex: 5;
+    }
+    .f-6,
+    [f-6] {
+      flex: 6;
+    }
+    .f-7,
+    [f-7] {
+      flex: 7;
+    }
+    .f-8,
+    [f-8] {
+      flex: 8;
+    }
+
+    .justify-between,
+    [justify-between] {
+      justify-content: space-between;
+    }
+
+    .w-full,
+    [w-full] {
+      width: 100%;
+    }
+    .h-full,
+    [h-full] {
+      height: 100%;
+    }
+    .mw-full,
+    [mw-full] {
+      min-width: 100%;
+    }
+    .mh-full,
+    [mh-full] {
+      min-height: 100%;
+    }
+
+    /* Gap utilities */
+    .g-0,
+    [g-0] {
+      gap: 0;
+    }
+    .g-1,
+    [g-1] {
+      gap: calc(var(--unit) * 1);
+    }
+    .g-2,
+    [g-2] {
+      gap: calc(var(--unit) * 2);
+    }
+    .g-3,
+    [g-3] {
+      gap: calc(var(--unit) * 3);
+    }
+    .g-4,
+    [g-4] {
+      gap: calc(var(--unit) * 4);
+    }
+    .g-5,
+    [g-5] {
+      gap: calc(var(--unit) * 5);
+    }
+    .g-6,
+    [g-6] {
+      gap: calc(var(--unit) * 6);
+    }
+    .g-7,
+    [g-7] {
+      gap: calc(var(--unit) * 7);
+    }
+    .g-8,
+    [g-8] {
+      gap: calc(var(--unit) * 8);
+    }
+
+    /* Margin utilities */
+    .mt-auto,
+    [mt-auto] {
+      margin-top: auto;
+    }
+    .mt-0,
+    [mt-0] {
+      margin-top: 0;
+    }
+    .mt-1,
+    [mt-1] {
+      margin-top: calc(var(--unit) * 1);
+    }
+    .mt-2,
+    [mt-2] {
+      margin-top: calc(var(--unit) * 2);
+    }
+    .mt-3,
+    [mt-3] {
+      margin-top: calc(var(--unit) * 3);
+    }
+    .mt-4,
+    [mt-4] {
+      margin-top: calc(var(--unit) * 4);
+    }
+    .mt-5,
+    [mt-5] {
+      margin-top: calc(var(--unit) * 5);
+    }
+    .mt-6,
+    [mt-6] {
+      margin-top: calc(var(--unit) * 6);
+    }
+    .mt-7,
+    [mt-7] {
+      margin-top: calc(var(--unit) * 7);
+    }
+    .mt-8,
+    [mt-8] {
+      margin-top: calc(var(--unit) * 8);
+    }
+
+    .mb-auto,
+    [mb-auto] {
+      margin-bottom: auto;
+    }
+    .mb-0,
+    [mb-0] {
+      margin-bottom: 0;
+    }
+    .mb-1,
+    [mb-1] {
+      margin-bottom: calc(var(--unit) * 1);
+    }
+    .mb-2,
+    [mb-2] {
+      margin-bottom: calc(var(--unit) * 2);
+    }
+    .mb-3,
+    [mb-3] {
+      margin-bottom: calc(var(--unit) * 3);
+    }
+    .mb-4,
+    [mb-4] {
+      margin-bottom: calc(var(--unit) * 4);
+    }
+    .mb-5,
+    [mb-5] {
+      margin-bottom: calc(var(--unit) * 5);
+    }
+    .mb-6,
+    [mb-6] {
+      margin-bottom: calc(var(--unit) * 6);
+    }
+    .mb-7,
+    [mb-7] {
+      margin-bottom: calc(var(--unit) * 7);
+    }
+    .mb-8,
+    [mb-8] {
+      margin-bottom: calc(var(--unit) * 8);
+    }
+
+    .ml-auto,
+    [ml-auto] {
+      margin-left: auto;
+    }
+    .ml-0,
+    [ml-0] {
+      margin-left: 0;
+    }
+    .ml-1,
+    [ml-1] {
+      margin-left: calc(var(--unit) * 1);
+    }
+    .ml-2,
+    [ml-2] {
+      margin-left: calc(var(--unit) * 2);
+    }
+    .ml-3,
+    [ml-3] {
+      margin-left: calc(var(--unit) * 3);
+    }
+    .ml-4,
+    [ml-4] {
+      margin-left: calc(var(--unit) * 4);
+    }
+    .ml-5,
+    [ml-5] {
+      margin-left: calc(var(--unit) * 5);
+    }
+    .ml-6,
+    [ml-6] {
+      margin-left: calc(var(--unit) * 6);
+    }
+    .ml-7,
+    [ml-7] {
+      margin-left: calc(var(--unit) * 7);
+    }
+    .ml-8,
+    [ml-8] {
+      margin-left: calc(var(--unit) * 8);
+    }
+
+    .mr-auto,
+    [mr-auto] {
+      margin-right: auto;
+    }
+    .mr-0,
+    [mr-0] {
+      margin-right: 0;
+    }
+    .mr-1,
+    [mr-1] {
+      margin-right: calc(var(--unit) * 1);
+    }
+    .mr-2,
+    [mr-2] {
+      margin-right: calc(var(--unit) * 2);
+    }
+    .mr-3,
+    [mr-3] {
+      margin-right: calc(var(--unit) * 3);
+    }
+    .mr-4,
+    [mr-4] {
+      margin-right: calc(var(--unit) * 4);
+    }
+    .mr-5,
+    [mr-5] {
+      margin-right: calc(var(--unit) * 5);
+    }
+    .mr-6,
+    [mr-6] {
+      margin-right: calc(var(--unit) * 6);
+    }
+    .mr-7,
+    [mr-7] {
+      margin-right: calc(var(--unit) * 7);
+    }
+    .mr-8,
+    [mr-8] {
+      margin-right: calc(var(--unit) * 8);
+    }
+
+    .mx-auto,
+    [mx-auto] {
+      margin-inline: auto;
+    }
+    .mx-0,
+    [mx-0] {
+      margin-inline: 0;
+    }
+    .mx-1,
+    [mx-1] {
+      margin-inline: calc(var(--unit) * 1);
+    }
+    .mx-2,
+    [mx-2] {
+      margin-inline: calc(var(--unit) * 2);
+    }
+    .mx-3,
+    [mx-3] {
+      margin-inline: calc(var(--unit) * 3);
+    }
+    .mx-4,
+    [mx-4] {
+      margin-inline: calc(var(--unit) * 4);
+    }
+    .mx-5,
+    [mx-5] {
+      margin-inline: calc(var(--unit) * 5);
+    }
+    .mx-6,
+    [mx-6] {
+      margin-inline: calc(var(--unit) * 6);
+    }
+    .mx-7,
+    [mx-7] {
+      margin-inline: calc(var(--unit) * 7);
+    }
+    .mx-8,
+    [mx-8] {
+      margin-inline: calc(var(--unit) * 8);
+    }
+
+    .my-auto,
+    [my-auto] {
+      margin-block: auto;
+    }
+    .my-0,
+    [my-0] {
+      margin-block: 0;
+    }
+    .my-1,
+    [my-1] {
+      margin-block: calc(var(--unit) * 1);
+    }
+    .my-2,
+    [my-2] {
+      margin-block: calc(var(--unit) * 2);
+    }
+    .my-3,
+    [my-3] {
+      margin-block: calc(var(--unit) * 3);
+    }
+    .my-4,
+    [my-4] {
+      margin-block: calc(var(--unit) * 4);
+    }
+    .my-5,
+    [my-5] {
+      margin-block: calc(var(--unit) * 5);
+    }
+    .my-6,
+    [my-6] {
+      margin-block: calc(var(--unit) * 6);
+    }
+    .my-7,
+    [my-7] {
+      margin-block: calc(var(--unit) * 7);
+    }
+    .my-8,
+    [my-8] {
+      margin-block: calc(var(--unit) * 8);
+    }
+
+    .m-auto,
+    [m-auto] {
+      margin: auto;
+    }
+    .m-0,
+    [m-0] {
+      margin: 0;
+    }
+    .m-1,
+    [m-1] {
+      margin: calc(var(--unit) * 1);
+    }
+    .m-2,
+    [m-2] {
+      margin: calc(var(--unit) * 2);
+    }
+    .m-3,
+    [m-3] {
+      margin: calc(var(--unit) * 3);
+    }
+    .m-4,
+    [m-4] {
+      margin: calc(var(--unit) * 4);
+    }
+    .m-5,
+    [m-5] {
+      margin: calc(var(--unit) * 5);
+    }
+    .m-6,
+    [m-6] {
+      margin: calc(var(--unit) * 6);
+    }
+    .m-7,
+    [m-7] {
+      margin: calc(var(--unit) * 7);
+    }
+    .m-8,
+    [m-8] {
+      margin: calc(var(--unit) * 8);
+    }
+
+    /* Padding utilities */
+    .pt-0,
+    [pt-0] {
+      padding-top: 0;
+    }
+    .pt-1,
+    [pt-1] {
+      padding-top: calc(var(--unit) * 1);
+    }
+    .pt-2,
+    [pt-2] {
+      padding-top: calc(var(--unit) * 2);
+    }
+    .pt-3,
+    [pt-3] {
+      padding-top: calc(var(--unit) * 3);
+    }
+    .pt-4,
+    [pt-4] {
+      padding-top: calc(var(--unit) * 4);
+    }
+    .pt-5,
+    [pt-5] {
+      padding-top: calc(var(--unit) * 5);
+    }
+    .pt-6,
+    [pt-6] {
+      padding-top: calc(var(--unit) * 6);
+    }
+    .pt-7,
+    [pt-7] {
+      padding-top: calc(var(--unit) * 7);
+    }
+    .pt-8,
+    [pt-8] {
+      padding-top: calc(var(--unit) * 8);
+    }
+
+    .pb-0,
+    [pb-0] {
+      padding-bottom: 0;
+    }
+    .pb-1,
+    [pb-1] {
+      padding-bottom: calc(var(--unit) * 1);
+    }
+    .pb-2,
+    [pb-2] {
+      padding-bottom: calc(var(--unit) * 2);
+    }
+    .pb-3,
+    [pb-3] {
+      padding-bottom: calc(var(--unit) * 3);
+    }
+    .pb-4,
+    [pb-4] {
+      padding-bottom: calc(var(--unit) * 4);
+    }
+    .pb-5,
+    [pb-5] {
+      padding-bottom: calc(var(--unit) * 5);
+    }
+    .pb-6,
+    [pb-6] {
+      padding-bottom: calc(var(--unit) * 6);
+    }
+    .pb-7,
+    [pb-7] {
+      padding-bottom: calc(var(--unit) * 7);
+    }
+    .pb-8,
+    [pb-8] {
+      padding-bottom: calc(var(--unit) * 8);
+    }
+
+    .pl-0,
+    [pl-0] {
+      padding-left: 0;
+    }
+    .pl-1,
+    [pl-1] {
+      padding-left: calc(var(--unit) * 1);
+    }
+    .pl-2,
+    [pl-2] {
+      padding-left: calc(var(--unit) * 2);
+    }
+    .pl-3,
+    [pl-3] {
+      padding-left: calc(var(--unit) * 3);
+    }
+    .pl-4,
+    [pl-4] {
+      padding-left: calc(var(--unit) * 4);
+    }
+    .pl-5,
+    [pl-5] {
+      padding-left: calc(var(--unit) * 5);
+    }
+    .pl-6,
+    [pl-6] {
+      padding-left: calc(var(--unit) * 6);
+    }
+    .pl-7,
+    [pl-7] {
+      padding-left: calc(var(--unit) * 7);
+    }
+    .pl-8,
+    [pl-8] {
+      padding-left: calc(var(--unit) * 8);
+    }
+
+    .pr-0,
+    [pr-0] {
+      padding-right: 0;
+    }
+    .pr-1,
+    [pr-1] {
+      padding-right: calc(var(--unit) * 1);
+    }
+    .pr-2,
+    [pr-2] {
+      padding-right: calc(var(--unit) * 2);
+    }
+    .pr-3,
+    [pr-3] {
+      padding-right: calc(var(--unit) * 3);
+    }
+    .pr-4,
+    [pr-4] {
+      padding-right: calc(var(--unit) * 4);
+    }
+    .pr-5,
+    [pr-5] {
+      padding-right: calc(var(--unit) * 5);
+    }
+    .pr-6,
+    [pr-6] {
+      padding-right: calc(var(--unit) * 6);
+    }
+    .pr-7,
+    [pr-7] {
+      padding-right: calc(var(--unit) * 7);
+    }
+    .pr-8,
+    [pr-8] {
+      padding-right: calc(var(--unit) * 8);
+    }
+
+    .px-0,
+    [px-0] {
+      padding-inline: 0;
+    }
+    .px-1,
+    [px-1] {
+      padding-inline: calc(var(--unit) * 1);
+    }
+    .px-2,
+    [px-2] {
+      padding-inline: calc(var(--unit) * 2);
+    }
+    .px-3,
+    [px-3] {
+      padding-inline: calc(var(--unit) * 3);
+    }
+    .px-4,
+    [px-4] {
+      padding-inline: calc(var(--unit) * 4);
+    }
+    .px-5,
+    [px-5] {
+      padding-inline: calc(var(--unit) * 5);
+    }
+    .px-6,
+    [px-6] {
+      padding-inline: calc(var(--unit) * 6);
+    }
+    .px-7,
+    [px-7] {
+      padding-inline: calc(var(--unit) * 7);
+    }
+    .px-8,
+    [px-8] {
+      padding-inline: calc(var(--unit) * 8);
+    }
+
+    .py-0,
+    [py-0] {
+      padding-block: 0;
+    }
+    .py-1,
+    [py-1] {
+      padding-block: calc(var(--unit) * 1);
+    }
+    .py-2,
+    [py-2] {
+      padding-block: calc(var(--unit) * 2);
+    }
+    .py-3,
+    [py-3] {
+      padding-block: calc(var(--unit) * 3);
+    }
+    .py-4,
+    [py-4] {
+      padding-block: calc(var(--unit) * 4);
+    }
+    .py-5,
+    [py-5] {
+      padding-block: calc(var(--unit) * 5);
+    }
+    .py-6,
+    [py-6] {
+      padding-block: calc(var(--unit) * 6);
+    }
+    .py-7,
+    [py-7] {
+      padding-block: calc(var(--unit) * 7);
+    }
+    .py-8,
+    [py-8] {
+      padding-block: calc(var(--unit) * 8);
+    }
+
+    .p-0,
+    [p-0] {
+      padding: 0;
+    }
+    .p-1,
+    [p-1] {
+      padding: calc(var(--unit) * 1);
+    }
+    .p-2,
+    [p-2] {
+      padding: calc(var(--unit) * 2);
+    }
+    .p-3,
+    [p-3] {
+      padding: calc(var(--unit) * 3);
+    }
+    .p-4,
+    [p-4] {
+      padding: calc(var(--unit) * 4);
+    }
+    .p-5,
+    [p-5] {
+      padding: calc(var(--unit) * 5);
+    }
+    .p-6,
+    [p-6] {
+      padding: calc(var(--unit) * 6);
+    }
+    .p-7,
+    [p-7] {
+      padding: calc(var(--unit) * 7);
+    }
+    .p-8,
+    [p-8] {
+      padding: calc(var(--unit) * 8);
+    }
+
+    /* Position utilities */
+    [position='static'] {
+      position: static;
+    }
+    [position='relative'] {
+      position: relative;
+    }
+    [position='absolute'] {
+      position: absolute;
+    }
+    [position='fixed'] {
+      position: fixed;
+    }
+    [position='sticky'] {
+      position: sticky;
+    }
+
+    /* Contain utilities */
+    [contain='none'] {
+      contain: none;
+    }
+    [contain='strict'] {
+      contain: strict;
+    }
+    [contain='content'] {
+      contain: content;
+    }
+    [contain='size'] {
+      contain: size;
+    }
+    [contain='inline-size'] {
+      contain: inline-size;
+    }
+    [contain='layout'] {
+      contain: layout;
+    }
+    [contain='style'] {
+      contain: style;
+    }
+    [contain='paint'] {
+      contain: paint;
+    }
+
+    /* Inset utilities (top, right, bottom, left) */
+    .t-auto,
+    [t-auto] {
+      top: auto;
+    }
+    .t-0,
+    [t-0] {
+      top: 0;
+    }
+    .t-1,
+    [t-1] {
+      top: calc(var(--unit) * 1);
+    }
+    .t-2,
+    [t-2] {
+      top: calc(var(--unit) * 2);
+    }
+    .t-3,
+    [t-3] {
+      top: calc(var(--unit) * 3);
+    }
+    .t-4,
+    [t-4] {
+      top: calc(var(--unit) * 4);
+    }
+    .t-5,
+    [t-5] {
+      top: calc(var(--unit) * 5);
+    }
+    .t-6,
+    [t-6] {
+      top: calc(var(--unit) * 6);
+    }
+    .t-7,
+    [t-7] {
+      top: calc(var(--unit) * 7);
+    }
+    .t-8,
+    [t-8] {
+      top: calc(var(--unit) * 8);
+    }
+
+    .r-auto,
+    [r-auto] {
+      right: auto;
+    }
+    .r-0,
+    [r-0] {
+      right: 0;
+    }
+    .r-1,
+    [r-1] {
+      right: calc(var(--unit) * 1);
+    }
+    .r-2,
+    [r-2] {
+      right: calc(var(--unit) * 2);
+    }
+    .r-3,
+    [r-3] {
+      right: calc(var(--unit) * 3);
+    }
+    .r-4,
+    [r-4] {
+      right: calc(var(--unit) * 4);
+    }
+    .r-5,
+    [r-5] {
+      right: calc(var(--unit) * 5);
+    }
+    .r-6,
+    [r-6] {
+      right: calc(var(--unit) * 6);
+    }
+    .r-7,
+    [r-7] {
+      right: calc(var(--unit) * 7);
+    }
+    .r-8,
+    [r-8] {
+      right: calc(var(--unit) * 8);
+    }
+
+    .b-auto,
+    [b-auto] {
+      bottom: auto;
+    }
+    .b-0,
+    [b-0] {
+      bottom: 0;
+    }
+    .b-1,
+    [b-1] {
+      bottom: calc(var(--unit) * 1);
+    }
+    .b-2,
+    [b-2] {
+      bottom: calc(var(--unit) * 2);
+    }
+    .b-3,
+    [b-3] {
+      bottom: calc(var(--unit) * 3);
+    }
+    .b-4,
+    [b-4] {
+      bottom: calc(var(--unit) * 4);
+    }
+    .b-5,
+    [b-5] {
+      bottom: calc(var(--unit) * 5);
+    }
+    .b-6,
+    [b-6] {
+      bottom: calc(var(--unit) * 6);
+    }
+    .b-7,
+    [b-7] {
+      bottom: calc(var(--unit) * 7);
+    }
+    .b-8,
+    [b-8] {
+      bottom: calc(var(--unit) * 8);
+    }
+
+    .l-auto,
+    [l-auto] {
+      left: auto;
+    }
+    .l-0,
+    [l-0] {
+      left: 0;
+    }
+    .l-1,
+    [l-1] {
+      left: calc(var(--unit) * 1);
+    }
+    .l-2,
+    [l-2] {
+      left: calc(var(--unit) * 2);
+    }
+    .l-3,
+    [l-3] {
+      left: calc(var(--unit) * 3);
+    }
+    .l-4,
+    [l-4] {
+      left: calc(var(--unit) * 4);
+    }
+    .l-5,
+    [l-5] {
+      left: calc(var(--unit) * 5);
+    }
+    .l-6,
+    [l-6] {
+      left: calc(var(--unit) * 6);
+    }
+    .l-7,
+    [l-7] {
+      left: calc(var(--unit) * 7);
+    }
+    .l-8,
+    [l-8] {
+      left: calc(var(--unit) * 8);
+    }
+
+    /* Order */
+    .order-first,
+    [order-first] {
+      order: -1;
+    }
+
+    .text-blue,
+    [text-blue] {
+      color: var(--blue);
+    }
+    .text-purple,
+    [text-purple] {
+      color: var(--purple);
+    }
+    .text-green,
+    [text-green] {
+      color: var(--green);
+    }
+    .text-orange,
+    [text-orange] {
+      color: var(--orange);
+    }
+    .text-cyan,
+    [text-cyan] {
+      color: var(--cyan);
+    }
+    .text-red,
+    [text-red] {
+      color: var(--red);
+    }
+    .text-yellow,
+    [text-yellow] {
+      color: var(--yellow);
+    }
+    .text-slate,
+    [text-slate] {
+      color: var(--slate);
+    }
+
+    .bg-blue,
+    [bg-blue] {
+      background-color: oklch(from var(--blue) l c h / 0.2);
+    }
+    .bg-purple,
+    [bg-purple] {
+      background-color: oklch(from var(--purple) l c h / 0.2);
+    }
+    .bg-green,
+    [bg-green] {
+      background-color: oklch(from var(--green) l c h / 0.2);
+    }
+    .bg-orange,
+    [bg-orange] {
+      background-color: oklch(from var(--orange) l c h / 0.2);
+    }
+    .bg-cyan,
+    [bg-cyan] {
+      background-color: oklch(from var(--cyan) l c h / 0.2);
+    }
+    .bg-red,
+    [bg-red] {
+      background-color: oklch(from var(--red) l c h / 0.2);
+    }
+    .bg-yellow,
+    [bg-yellow] {
+      background-color: oklch(from var(--yellow) l c h / 0.2);
+    }
+    .bg-slate,
+    [bg-slate] {
+      background-color: oklch(from var(--slate) l c h / 0.2);
+    }
+
+    @media (width <= 768px) {
+      .sm\:sm,
+      [sm\:sm] {
+        --unit: 2px;
+        --unit-size: 12px;
+        font-size: var(--unit-size, inherit);
+      }
+      .sm\:md,
+      [sm\:md] {
+        --unit: 4px;
+        --unit-size: 16px;
+        font-size: var(--unit-size, inherit);
+      }
+      .sm\:lg,
+      [sm\:lg] {
+        --unit: 8px;
+        --unit-size: 24px;
+        font-size: var(--unit-size, inherit);
+      }
+      .sm\:hide,
+      [sm\:hide] {
+        display: none;
+      }
+      .sm\:flex,
+      [sm\:flex] {
+        display: flex;
+      }
+      .sm\:block,
+      [sm\:block] {
+        display: block;
+      }
+      .sm\:vertical,
+      [sm\:vertical] {
+        flex-direction: column;
+      }
+      .sm\:order-first,
+      [sm\:order-first] {
+        order: -1;
+      }
+    }
+
+    @media (768px < width <= 1024px) {
+      .md\:sm,
+      [md\:sm] {
+        --unit: 2px;
+        --unit-size: 12px;
+        font-size: var(--unit-size, inherit);
+      }
+      .md\:md,
+      [md\:md] {
+        --unit: 4px;
+        --unit-size: 16px;
+        font-size: var(--unit-size, inherit);
+      }
+      .md\:lg,
+      [md\:lg] {
+        --unit: 8px;
+        --unit-size: 24px;
+        font-size: var(--unit-size, inherit);
+      }
+      .md\:hide,
+      [md\:hide] {
+        display: none;
+      }
+      .md\:flex,
+      [md\:flex] {
+        display: flex;
+      }
+      .md\:block,
+      [md\:block] {
+        display: block;
+      }
+      .md\:vertical,
+      [md\:vertical] {
+        flex-direction: column;
+      }
+      .md\:order-first,
+      [md\:order-first] {
+        order: -1;
+      }
+    }
+
+    @media (width > 1024px) {
+      .lg\:sm,
+      [lg\:sm] {
+        --unit: 2px;
+        --unit-size: 12px;
+        font-size: var(--unit-size, inherit);
+      }
+      .lg\:md,
+      [lg\:md] {
+        --unit: 4px;
+        --unit-size: 16px;
+        font-size: var(--unit-size, inherit);
+      }
+      .lg\:lg,
+      [lg\:lg] {
+        --unit: 8px;
+        --unit-size: 24px;
+        font-size: var(--unit-size, inherit);
+      }
+      .lg\:hide,
+      [lg\:hide] {
+        display: none;
+      }
+      .lg\:flex,
+      [lg\:flex] {
+        display: flex;
+      }
+      .lg\:block,
+      [lg\:block] {
+        display: block;
+      }
+      .lg\:vertical,
+      [lg\:vertical] {
+        flex-direction: column;
+      }
+      .lg\:order-first,
+      [lg\:order-first] {
+        order: -1;
+      }
+    }
+    /* ---- ChromeOnlyModifiers.css ---- */
+    /* EXPERIMENTAL: typed attr() is, as of Apr 2026, Chrome 133+ only (not Safari/Firefox yet).
+   Once supported in all major browsers, these replace the fixed-value
+   modifiers (g-0..8, mt-0..8, w-full, t-0..8, etc.) in Modifiers.css.
+   Usage: <div g="4" mt="2" p="6" w="50"> instead of <div g-4 mt-2 p-6>
+   Dimensional attrs take two forms: a bare number scales with --unit
+   (w="50" → 50 * --unit), while a raw CSS length/percentage passes through
+   untouched (w="calc(100% - 40px)" or w="320px" → used as-is).
+   The length form is read into a temp var first; when the value is a plain
+   number that var is invalid, so var()'s fallback applies the unit calc.
+   (Nesting attr() inside an attr() fallback doesn't resolve in Chrome yet —
+   the var() indirection is what makes the two paradigms coexist.) */
+
+    /* Gap */
+    [g] {
+      --_g: attr(g type(<length-percentage>));
+      gap: var(--_g, calc(attr(g type(<number>)) * var(--unit)));
+    }
+
+    /* Margin */
+    [m] {
+      --_m: attr(m type(<length-percentage>));
+      margin: var(--_m, calc(attr(m type(<number>)) * var(--unit)));
+    }
+    [m='auto'] {
+      margin: auto;
+    }
+    [mt] {
+      --_mt: attr(mt type(<length-percentage>));
+      margin-top: var(--_mt, calc(attr(mt type(<number>)) * var(--unit)));
+    }
+    [mt='auto'] {
+      margin-top: auto;
+    }
+    [mb] {
+      --_mb: attr(mb type(<length-percentage>));
+      margin-bottom: var(--_mb, calc(attr(mb type(<number>)) * var(--unit)));
+    }
+    [mb='auto'] {
+      margin-bottom: auto;
+    }
+    [ml] {
+      --_ml: attr(ml type(<length-percentage>));
+      margin-left: var(--_ml, calc(attr(ml type(<number>)) * var(--unit)));
+    }
+    [ml='auto'] {
+      margin-left: auto;
+    }
+    [mr] {
+      --_mr: attr(mr type(<length-percentage>));
+      margin-right: var(--_mr, calc(attr(mr type(<number>)) * var(--unit)));
+    }
+    [mr='auto'] {
+      margin-right: auto;
+    }
+    [mx] {
+      --_mx: attr(mx type(<length-percentage>));
+      margin-inline: var(--_mx, calc(attr(mx type(<number>)) * var(--unit)));
+    }
+    [mx='auto'] {
+      margin-inline: auto;
+    }
+    [my] {
+      --_my: attr(my type(<length-percentage>));
+      margin-block: var(--_my, calc(attr(my type(<number>)) * var(--unit)));
+    }
+    [my='auto'] {
+      margin-block: auto;
+    }
+
+    /* Padding */
+    [p] {
+      --_p: attr(p type(<length-percentage>));
+      padding: var(--_p, calc(attr(p type(<number>)) * var(--unit)));
+    }
+    [pt] {
+      --_pt: attr(pt type(<length-percentage>));
+      padding-top: var(--_pt, calc(attr(pt type(<number>)) * var(--unit)));
+    }
+    [pb] {
+      --_pb: attr(pb type(<length-percentage>));
+      padding-bottom: var(--_pb, calc(attr(pb type(<number>)) * var(--unit)));
+    }
+    [pl] {
+      --_pl: attr(pl type(<length-percentage>));
+      padding-left: var(--_pl, calc(attr(pl type(<number>)) * var(--unit)));
+    }
+    [pr] {
+      --_pr: attr(pr type(<length-percentage>));
+      padding-right: var(--_pr, calc(attr(pr type(<number>)) * var(--unit)));
+    }
+    [px] {
+      --_px: attr(px type(<length-percentage>));
+      padding-inline: var(--_px, calc(attr(px type(<number>)) * var(--unit)));
+    }
+    [py] {
+      --_py: attr(py type(<length-percentage>));
+      padding-block: var(--_py, calc(attr(py type(<number>)) * var(--unit)));
+    }
+
+    /* Sizing */
+    [w] {
+      --_w: attr(w type(<length-percentage>));
+      width: var(--_w, calc(attr(w type(<number>)) * var(--unit)));
+    }
+    [w='full'] {
+      width: 100%;
+    }
+    [h] {
+      --_h: attr(h type(<length-percentage>));
+      height: var(--_h, calc(attr(h type(<number>)) * var(--unit)));
+    }
+    [h='full'] {
+      height: 100%;
+    }
+
+    /* Inset (top, right, bottom, left) */
+    [t] {
+      --_t: attr(t type(<length-percentage>));
+      top: var(--_t, calc(attr(t type(<number>)) * var(--unit)));
+    }
+    [t='auto'] {
+      top: auto;
+    }
+    [r] {
+      --_r: attr(r type(<length-percentage>));
+      right: var(--_r, calc(attr(r type(<number>)) * var(--unit)));
+    }
+    [r='auto'] {
+      right: auto;
+    }
+    [b] {
+      --_b: attr(b type(<length-percentage>));
+      bottom: var(--_b, calc(attr(b type(<number>)) * var(--unit)));
+    }
+    [b='auto'] {
+      bottom: auto;
+    }
+    [l] {
+      --_l: attr(l type(<length-percentage>));
+      left: var(--_l, calc(attr(l type(<number>)) * var(--unit)));
+    }
+    [l='auto'] {
+      left: auto;
+    }
+
+    /* Flex */
+    [f] {
+      flex: attr(f type(<number>));
+    }
+    [f='none'] {
+      flex: none;
+    }
+
+    /* Colors */
+    [bg] {
+      background-color: attr(bg type(<color>));
+    }
+    [text] {
+      color: attr(text type(<color>));
+    }
+    [border] {
+      border-color: attr(border type(<color>));
+    }
+
+    /* Rotate */
+    [rotate] {
+      rotate: calc(attr(rotate type(<number>)) * 1deg);
+    }
+
+    /* Responsive: sm */
+    @media (width <= 768px) {
+      [sm\:g] {
+        --_sm-g: attr(sm\:g type(<length-percentage>));
+        gap: var(--_sm-g, calc(attr(sm\:g type(<number>)) * var(--unit)));
+      }
+      [sm\:m] {
+        --_sm-m: attr(sm\:m type(<length-percentage>));
+        margin: var(--_sm-m, calc(attr(sm\:m type(<number>)) * var(--unit)));
+      }
+      [sm\:m='auto'] {
+        margin: auto;
+      }
+      [sm\:mt] {
+        --_sm-mt: attr(sm\:mt type(<length-percentage>));
+        margin-top: var(--_sm-mt, calc(attr(sm\:mt type(<number>)) * var(--unit)));
+      }
+      [sm\:mt='auto'] {
+        margin-top: auto;
+      }
+      [sm\:mb] {
+        --_sm-mb: attr(sm\:mb type(<length-percentage>));
+        margin-bottom: var(--_sm-mb, calc(attr(sm\:mb type(<number>)) * var(--unit)));
+      }
+      [sm\:mb='auto'] {
+        margin-bottom: auto;
+      }
+      [sm\:ml] {
+        --_sm-ml: attr(sm\:ml type(<length-percentage>));
+        margin-left: var(--_sm-ml, calc(attr(sm\:ml type(<number>)) * var(--unit)));
+      }
+      [sm\:ml='auto'] {
+        margin-left: auto;
+      }
+      [sm\:mr] {
+        --_sm-mr: attr(sm\:mr type(<length-percentage>));
+        margin-right: var(--_sm-mr, calc(attr(sm\:mr type(<number>)) * var(--unit)));
+      }
+      [sm\:mr='auto'] {
+        margin-right: auto;
+      }
+      [sm\:mx] {
+        --_sm-mx: attr(sm\:mx type(<length-percentage>));
+        margin-inline: var(--_sm-mx, calc(attr(sm\:mx type(<number>)) * var(--unit)));
+      }
+      [sm\:mx='auto'] {
+        margin-inline: auto;
+      }
+      [sm\:my] {
+        --_sm-my: attr(sm\:my type(<length-percentage>));
+        margin-block: var(--_sm-my, calc(attr(sm\:my type(<number>)) * var(--unit)));
+      }
+      [sm\:my='auto'] {
+        margin-block: auto;
+      }
+      [sm\:p] {
+        --_sm-p: attr(sm\:p type(<length-percentage>));
+        padding: var(--_sm-p, calc(attr(sm\:p type(<number>)) * var(--unit)));
+      }
+      [sm\:pt] {
+        --_sm-pt: attr(sm\:pt type(<length-percentage>));
+        padding-top: var(--_sm-pt, calc(attr(sm\:pt type(<number>)) * var(--unit)));
+      }
+      [sm\:pb] {
+        --_sm-pb: attr(sm\:pb type(<length-percentage>));
+        padding-bottom: var(--_sm-pb, calc(attr(sm\:pb type(<number>)) * var(--unit)));
+      }
+      [sm\:pl] {
+        --_sm-pl: attr(sm\:pl type(<length-percentage>));
+        padding-left: var(--_sm-pl, calc(attr(sm\:pl type(<number>)) * var(--unit)));
+      }
+      [sm\:pr] {
+        --_sm-pr: attr(sm\:pr type(<length-percentage>));
+        padding-right: var(--_sm-pr, calc(attr(sm\:pr type(<number>)) * var(--unit)));
+      }
+      [sm\:px] {
+        --_sm-px: attr(sm\:px type(<length-percentage>));
+        padding-inline: var(--_sm-px, calc(attr(sm\:px type(<number>)) * var(--unit)));
+      }
+      [sm\:py] {
+        --_sm-py: attr(sm\:py type(<length-percentage>));
+        padding-block: var(--_sm-py, calc(attr(sm\:py type(<number>)) * var(--unit)));
+      }
+      [sm\:w] {
+        --_sm-w: attr(sm\:w type(<length-percentage>));
+        width: var(--_sm-w, calc(attr(sm\:w type(<number>)) * var(--unit)));
+      }
+      [sm\:w='full'] {
+        width: 100%;
+      }
+      [sm\:h] {
+        --_sm-h: attr(sm\:h type(<length-percentage>));
+        height: var(--_sm-h, calc(attr(sm\:h type(<number>)) * var(--unit)));
+      }
+      [sm\:h='full'] {
+        height: 100%;
+      }
+      [sm\:t] {
+        --_sm-t: attr(sm\:t type(<length-percentage>));
+        top: var(--_sm-t, calc(attr(sm\:t type(<number>)) * var(--unit)));
+      }
+      [sm\:t='auto'] {
+        top: auto;
+      }
+      [sm\:r] {
+        --_sm-r: attr(sm\:r type(<length-percentage>));
+        right: var(--_sm-r, calc(attr(sm\:r type(<number>)) * var(--unit)));
+      }
+      [sm\:r='auto'] {
+        right: auto;
+      }
+      [sm\:b] {
+        --_sm-b: attr(sm\:b type(<length-percentage>));
+        bottom: var(--_sm-b, calc(attr(sm\:b type(<number>)) * var(--unit)));
+      }
+      [sm\:b='auto'] {
+        bottom: auto;
+      }
+      [sm\:l] {
+        --_sm-l: attr(sm\:l type(<length-percentage>));
+        left: var(--_sm-l, calc(attr(sm\:l type(<number>)) * var(--unit)));
+      }
+      [sm\:l='auto'] {
+        left: auto;
+      }
+      [sm\:f] {
+        flex: attr(sm\:f type(<number>));
+      }
+      [sm\:f='none'] {
+        flex: none;
+      }
+      [sm\:bg] {
+        background-color: attr(sm\:bg type(<color>));
+      }
+      [sm\:text] {
+        color: attr(sm\:text type(<color>));
+      }
+      [sm\:border] {
+        border-color: attr(sm\:border type(<color>));
+      }
+    }
+
+    /* Responsive: md */
+    @media (768px < width <= 1024px) {
+      [md\:g] {
+        --_md-g: attr(md\:g type(<length-percentage>));
+        gap: var(--_md-g, calc(attr(md\:g type(<number>)) * var(--unit)));
+      }
+      [md\:m] {
+        --_md-m: attr(md\:m type(<length-percentage>));
+        margin: var(--_md-m, calc(attr(md\:m type(<number>)) * var(--unit)));
+      }
+      [md\:m='auto'] {
+        margin: auto;
+      }
+      [md\:mt] {
+        --_md-mt: attr(md\:mt type(<length-percentage>));
+        margin-top: var(--_md-mt, calc(attr(md\:mt type(<number>)) * var(--unit)));
+      }
+      [md\:mt='auto'] {
+        margin-top: auto;
+      }
+      [md\:mb] {
+        --_md-mb: attr(md\:mb type(<length-percentage>));
+        margin-bottom: var(--_md-mb, calc(attr(md\:mb type(<number>)) * var(--unit)));
+      }
+      [md\:mb='auto'] {
+        margin-bottom: auto;
+      }
+      [md\:ml] {
+        --_md-ml: attr(md\:ml type(<length-percentage>));
+        margin-left: var(--_md-ml, calc(attr(md\:ml type(<number>)) * var(--unit)));
+      }
+      [md\:ml='auto'] {
+        margin-left: auto;
+      }
+      [md\:mr] {
+        --_md-mr: attr(md\:mr type(<length-percentage>));
+        margin-right: var(--_md-mr, calc(attr(md\:mr type(<number>)) * var(--unit)));
+      }
+      [md\:mr='auto'] {
+        margin-right: auto;
+      }
+      [md\:mx] {
+        --_md-mx: attr(md\:mx type(<length-percentage>));
+        margin-inline: var(--_md-mx, calc(attr(md\:mx type(<number>)) * var(--unit)));
+      }
+      [md\:mx='auto'] {
+        margin-inline: auto;
+      }
+      [md\:my] {
+        --_md-my: attr(md\:my type(<length-percentage>));
+        margin-block: var(--_md-my, calc(attr(md\:my type(<number>)) * var(--unit)));
+      }
+      [md\:my='auto'] {
+        margin-block: auto;
+      }
+      [md\:p] {
+        --_md-p: attr(md\:p type(<length-percentage>));
+        padding: var(--_md-p, calc(attr(md\:p type(<number>)) * var(--unit)));
+      }
+      [md\:pt] {
+        --_md-pt: attr(md\:pt type(<length-percentage>));
+        padding-top: var(--_md-pt, calc(attr(md\:pt type(<number>)) * var(--unit)));
+      }
+      [md\:pb] {
+        --_md-pb: attr(md\:pb type(<length-percentage>));
+        padding-bottom: var(--_md-pb, calc(attr(md\:pb type(<number>)) * var(--unit)));
+      }
+      [md\:pl] {
+        --_md-pl: attr(md\:pl type(<length-percentage>));
+        padding-left: var(--_md-pl, calc(attr(md\:pl type(<number>)) * var(--unit)));
+      }
+      [md\:pr] {
+        --_md-pr: attr(md\:pr type(<length-percentage>));
+        padding-right: var(--_md-pr, calc(attr(md\:pr type(<number>)) * var(--unit)));
+      }
+      [md\:px] {
+        --_md-px: attr(md\:px type(<length-percentage>));
+        padding-inline: var(--_md-px, calc(attr(md\:px type(<number>)) * var(--unit)));
+      }
+      [md\:py] {
+        --_md-py: attr(md\:py type(<length-percentage>));
+        padding-block: var(--_md-py, calc(attr(md\:py type(<number>)) * var(--unit)));
+      }
+      [md\:w] {
+        --_md-w: attr(md\:w type(<length-percentage>));
+        width: var(--_md-w, calc(attr(md\:w type(<number>)) * var(--unit)));
+      }
+      [md\:w='full'] {
+        width: 100%;
+      }
+      [md\:h] {
+        --_md-h: attr(md\:h type(<length-percentage>));
+        height: var(--_md-h, calc(attr(md\:h type(<number>)) * var(--unit)));
+      }
+      [md\:h='full'] {
+        height: 100%;
+      }
+      [md\:t] {
+        --_md-t: attr(md\:t type(<length-percentage>));
+        top: var(--_md-t, calc(attr(md\:t type(<number>)) * var(--unit)));
+      }
+      [md\:t='auto'] {
+        top: auto;
+      }
+      [md\:r] {
+        --_md-r: attr(md\:r type(<length-percentage>));
+        right: var(--_md-r, calc(attr(md\:r type(<number>)) * var(--unit)));
+      }
+      [md\:r='auto'] {
+        right: auto;
+      }
+      [md\:b] {
+        --_md-b: attr(md\:b type(<length-percentage>));
+        bottom: var(--_md-b, calc(attr(md\:b type(<number>)) * var(--unit)));
+      }
+      [md\:b='auto'] {
+        bottom: auto;
+      }
+      [md\:l] {
+        --_md-l: attr(md\:l type(<length-percentage>));
+        left: var(--_md-l, calc(attr(md\:l type(<number>)) * var(--unit)));
+      }
+      [md\:l='auto'] {
+        left: auto;
+      }
+      [md\:f] {
+        flex: attr(md\:f type(<number>));
+      }
+      [md\:f='none'] {
+        flex: none;
+      }
+      [md\:bg] {
+        background-color: attr(md\:bg type(<color>));
+      }
+      [md\:text] {
+        color: attr(md\:text type(<color>));
+      }
+      [md\:border] {
+        border-color: attr(md\:border type(<color>));
+      }
+    }
+
+    /* Responsive: lg */
+    @media (width > 1024px) {
+      [lg\:g] {
+        --_lg-g: attr(lg\:g type(<length-percentage>));
+        gap: var(--_lg-g, calc(attr(lg\:g type(<number>)) * var(--unit)));
+      }
+      [lg\:m] {
+        --_lg-m: attr(lg\:m type(<length-percentage>));
+        margin: var(--_lg-m, calc(attr(lg\:m type(<number>)) * var(--unit)));
+      }
+      [lg\:m='auto'] {
+        margin: auto;
+      }
+      [lg\:mt] {
+        --_lg-mt: attr(lg\:mt type(<length-percentage>));
+        margin-top: var(--_lg-mt, calc(attr(lg\:mt type(<number>)) * var(--unit)));
+      }
+      [lg\:mt='auto'] {
+        margin-top: auto;
+      }
+      [lg\:mb] {
+        --_lg-mb: attr(lg\:mb type(<length-percentage>));
+        margin-bottom: var(--_lg-mb, calc(attr(lg\:mb type(<number>)) * var(--unit)));
+      }
+      [lg\:mb='auto'] {
+        margin-bottom: auto;
+      }
+      [lg\:ml] {
+        --_lg-ml: attr(lg\:ml type(<length-percentage>));
+        margin-left: var(--_lg-ml, calc(attr(lg\:ml type(<number>)) * var(--unit)));
+      }
+      [lg\:ml='auto'] {
+        margin-left: auto;
+      }
+      [lg\:mr] {
+        --_lg-mr: attr(lg\:mr type(<length-percentage>));
+        margin-right: var(--_lg-mr, calc(attr(lg\:mr type(<number>)) * var(--unit)));
+      }
+      [lg\:mr='auto'] {
+        margin-right: auto;
+      }
+      [lg\:mx] {
+        --_lg-mx: attr(lg\:mx type(<length-percentage>));
+        margin-inline: var(--_lg-mx, calc(attr(lg\:mx type(<number>)) * var(--unit)));
+      }
+      [lg\:mx='auto'] {
+        margin-inline: auto;
+      }
+      [lg\:my] {
+        --_lg-my: attr(lg\:my type(<length-percentage>));
+        margin-block: var(--_lg-my, calc(attr(lg\:my type(<number>)) * var(--unit)));
+      }
+      [lg\:my='auto'] {
+        margin-block: auto;
+      }
+      [lg\:p] {
+        --_lg-p: attr(lg\:p type(<length-percentage>));
+        padding: var(--_lg-p, calc(attr(lg\:p type(<number>)) * var(--unit)));
+      }
+      [lg\:pt] {
+        --_lg-pt: attr(lg\:pt type(<length-percentage>));
+        padding-top: var(--_lg-pt, calc(attr(lg\:pt type(<number>)) * var(--unit)));
+      }
+      [lg\:pb] {
+        --_lg-pb: attr(lg\:pb type(<length-percentage>));
+        padding-bottom: var(--_lg-pb, calc(attr(lg\:pb type(<number>)) * var(--unit)));
+      }
+      [lg\:pl] {
+        --_lg-pl: attr(lg\:pl type(<length-percentage>));
+        padding-left: var(--_lg-pl, calc(attr(lg\:pl type(<number>)) * var(--unit)));
+      }
+      [lg\:pr] {
+        --_lg-pr: attr(lg\:pr type(<length-percentage>));
+        padding-right: var(--_lg-pr, calc(attr(lg\:pr type(<number>)) * var(--unit)));
+      }
+      [lg\:px] {
+        --_lg-px: attr(lg\:px type(<length-percentage>));
+        padding-inline: var(--_lg-px, calc(attr(lg\:px type(<number>)) * var(--unit)));
+      }
+      [lg\:py] {
+        --_lg-py: attr(lg\:py type(<length-percentage>));
+        padding-block: var(--_lg-py, calc(attr(lg\:py type(<number>)) * var(--unit)));
+      }
+      [lg\:w] {
+        --_lg-w: attr(lg\:w type(<length-percentage>));
+        width: var(--_lg-w, calc(attr(lg\:w type(<number>)) * var(--unit)));
+      }
+      [lg\:w='full'] {
+        width: 100%;
+      }
+      [lg\:h] {
+        --_lg-h: attr(lg\:h type(<length-percentage>));
+        height: var(--_lg-h, calc(attr(lg\:h type(<number>)) * var(--unit)));
+      }
+      [lg\:h='full'] {
+        height: 100%;
+      }
+      [lg\:t] {
+        --_lg-t: attr(lg\:t type(<length-percentage>));
+        top: var(--_lg-t, calc(attr(lg\:t type(<number>)) * var(--unit)));
+      }
+      [lg\:t='auto'] {
+        top: auto;
+      }
+      [lg\:r] {
+        --_lg-r: attr(lg\:r type(<length-percentage>));
+        right: var(--_lg-r, calc(attr(lg\:r type(<number>)) * var(--unit)));
+      }
+      [lg\:r='auto'] {
+        right: auto;
+      }
+      [lg\:b] {
+        --_lg-b: attr(lg\:b type(<length-percentage>));
+        bottom: var(--_lg-b, calc(attr(lg\:b type(<number>)) * var(--unit)));
+      }
+      [lg\:b='auto'] {
+        bottom: auto;
+      }
+      [lg\:l] {
+        --_lg-l: attr(lg\:l type(<length-percentage>));
+        left: var(--_lg-l, calc(attr(lg\:l type(<number>)) * var(--unit)));
+      }
+      [lg\:l='auto'] {
+        left: auto;
+      }
+      [lg\:f] {
+        flex: attr(lg\:f type(<number>));
+      }
+      [lg\:f='none'] {
+        flex: none;
+      }
+      [lg\:bg] {
+        background-color: attr(lg\:bg type(<color>));
+      }
+      [lg\:text] {
+        color: attr(lg\:text type(<color>));
+      }
+      [lg\:border] {
+        border-color: attr(lg\:border type(<color>));
+      }
+    }
+  }
+}
diff --git a/docs/color-doctrine.md b/docs/color-doctrine.md
new file mode 100644
index 00000000..9ea2f8e9
--- /dev/null
+++ b/docs/color-doctrine.md
@@ -0,0 +1,92 @@
+# Color Doctrine
+
+How Battleborn Brawlers spends color. Color is the loudest, scarcest channel we
+have — the eye reliably separates only ~6 categorical colors, and that's _per
+system_. We already run several color systems (rarity, element, race, stats &
+status). Without rules they collide and cancel each other out. This is the rule.
+
+## The problem, stated once
+
+A colored mark only means something if you first know **which system** it belongs
+to. With four systems on one screen, a green mark could be uncommon, nature,
+"good stat," or a heal. Two failure modes follow:
+
+- **Ambiguity** — which system is this color speaking for?
+- **Attention competition** — if everything is colored, nothing leads the eye.
+
+## This is already happening
+
+Every system pulls from one shared `--hue-*` base palette, so single hues carry
+multiple meanings _today_:
+
+| Hue            | Rarity   | Element | Status     | Floater |
+| -------------- | -------- | ------- | ---------- | ------- |
+| `--hue-green`  | uncommon | nature  | poisoned   | heal    |
+| `--hue-red`    | exotic   | fire    | bleeding   | damage  |
+| `--hue-blue`   | rare     | —       | vulnerable | —       |
+| `--hue-purple` | epic     | —       | stunned    | —       |
+
+Uncommon rarity and nature element are the _exact same green_; exotic and fire are
+the _exact same red_. Race dots currently read `--element-color` too, so race
+borrows element's hue. That's the muddle, in the tokens.
+
+## Four moves that fix it
+
+1. **One system owns hue per surface.** The systems rarely peak in the same place
+   — rarity in loot/inventory, element in combat/abilities, race in the roster,
+   stats in tooltips. Let exactly one _own_ color on each surface; **demote the
+   rest to non-hue channels** there (glyph, shape, mono pip, border-not-fill,
+   position, label).
+2. **Shape grammar lets hue repeat safely.** Give each system a signature mark, so
+   a green circle and a green hexagon never get confused — the shape says which
+   alphabet you're reading. This is the escape hatch from "non-overlapping
+   palettes," which is impossible with four systems.
+3. **Ordinal vs categorical, kept apart.** Rarity and stat-direction are _ladders_
+   (a value ramp: low→high). Element and race are _identities_ (no ranking).
+   Identity is carried by glyph/shape, never by a ramp — a ramp invites the brain
+   to rank things that have no rank.
+4. **Neutral by default; color is the exception.** Most of the UI is ink /
+   parchment / slate, so that when color appears it _means_ something. Four systems
+   painting everything leaves the canvas no rest and color stops being a signal.
+
+## The allocation (the constitution)
+
+| System            | Owns                   | Mark                | Notes                                                                                                                                                                                                                                                                                                                   |
+| ----------------- | ---------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Rarity / tier** | **Color** (the ramp)   | hexagon / pill fill | The one system whose whole job is an ordered ladder, and it's culturally expected (gray→green→blue→purple→orange→red). Protect that ramp; don't reuse its exact hues as flat fills elsewhere. Until "rarity" exists as a concept, drive the ramp off **item level/tier** — rarity is just the named bucketing of tiers. |
+| **Element**       | **Glyph** (symbol)     | white icon in a cap | Identity. Color only where combat-reading speed demands it, and then as a tinted _icon_, not a block.                                                                                                                                                                                                                   |
+| **Race**          | **Smallest mark**      | tiny icon / initial | Low-stakes identity — the first thing to demote off hue. Stop coloring race dots from `--element-color`.                                                                                                                                                                                                                |
+| **Stats**         | **Mostly neutral**     | number + delta      | Color only the _deltas_ (green +, red −) and group headers, never every value. Stat panels are where over-coloring hurts most.                                                                                                                                                                                          |
+| **Status**        | **Its own muted band** | chip + icon         | Already desaturated vs the base hues (`calc(c * 0.6)`), which is right — keep status visibly _dimmer_ than rarity/element so it never competes for "rank."                                                                                                                                                              |
+
+## When several collide on one card
+
+Establish a focal order so each stays decodable. Example — item tooltip:
+
+> **rarity** = the frame / dominant color · **element** = a glyph · **stats** =
+> neutral text with colored deltas only.
+
+One thing is loud, the rest are quiet. Never two loud systems on the same card.
+
+## Token policy
+
+- `--hue-*` is a **private base palette.** Components never read `--hue-*`
+  directly — only semantic tokens (`--rarity-*`, `--element-*`, `--status-*`,
+  future `--tier-*` / `--stat-*`).
+- Aliasing semantic tokens onto shared hues is **fine _only_ when the two systems
+  never appear with the same mark on the same surface** (shape grammar saves them).
+  Where they _would_ collide as the same shape — e.g. a rarity pill next to an
+  element pill — break the alias or change one system's mark.
+- Race gets its own non-hue treatment; remove its dependency on `--element-color`.
+
+## Open decisions (yours to make)
+
+1. **Rarity ramp source** — confirm we drive it off level/tier now, with "rarity"
+   as a later renaming of tiers. How many tiers, and the level breakpoints?
+2. **Element in combat** — does fast combat reading justify element _color_ (not
+   just glyph) on that one surface? If yes, it's the surface where element owns hue
+   and rarity steps back.
+3. **Race** — icon, initial, or keep a dot but on a deliberately _different_
+   (desaturated / non-rarity) palette?
+4. **Break the green/red aliases?** — decide per the token policy above: distinct
+   marks, or distinct hues.
diff --git a/eslint.config.js b/eslint.config.js
deleted file mode 100644
index d670a334..00000000
--- a/eslint.config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import js from '@eslint/js';
-import ts from 'typescript-eslint';
-import svelte from 'eslint-plugin-svelte';
-import prettier from 'eslint-config-prettier';
-import globals from 'globals';
-
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  js.configs.recommended,
-  ...ts.configs.recommended,
-  ...svelte.configs['flat/recommended'],
-  prettier,
-  ...svelte.configs['flat/prettier'],
-  {
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node
-      }
-    }
-  },
-  {
-    files: ['**/*.svelte'],
-    languageOptions: {
-      parserOptions: {
-        parser: ts.parser
-      }
-    }
-  },
-  {
-    ignores: ['build/', '.svelte-kit/', 'dist/'],
-    rules: {
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-require-imports': 'off',
-      '@typescript-eslint/no-unused-vars': 'warn'
-    }
-  }
-];
diff --git a/first-compilation-19-june-2026.md b/first-compilation-19-june-2026.md
new file mode 100644
index 00000000..98b75bb6
--- /dev/null
+++ b/first-compilation-19-june-2026.md
@@ -0,0 +1,95 @@
+# First Compilation — 19 June 2026
+
+> The day Battleborn Brawlers stopped hydrating and started _arriving_ pre-rendered.
+
+Today marks a milestone for both **Vibe** and **Battleborn Brawlers**: the first time the
+game was shipped to production through the **Vibe compiler (hyperspeed)** rather than the
+runtime hydration path — and the first time we could measure, side by side, what that buys us.
+
+Two identical deployments were put head to head:
+
+- **Runtime** — `https://battlebornbrawlers.com` — the Vite production bundle running in
+  Vibe's runtime mode: a tiny HTML shell, one big `boot.js`, then client-side template
+  fetches (`/components/*.html`) and hydration.
+- **Compiled** — `https://compiled.battlebornbrawlers.com` — the same app, pre-rendered by
+  the Vibe compiler: real content baked into the HTML, no template fetches, no hydration parse.
+
+## The measurement
+
+Cold loads, identical method, captured via Chrome DevTools (Resource Timing + a performance
+trace) on the login/landing page.
+
+| Metric                   | 🟢 Compiled | 🔵 Runtime | Difference                   |
+| ------------------------ | ----------- | ---------- | ---------------------------- |
+| First Contentful Paint   | 248 ms      | 596 ms     | 2.4× faster                  |
+| Largest Contentful Paint | 255 ms      | 504 ms     | ~2× faster                   |
+| LCP render delay         | 159 ms      | 491 ms     | 3× less (the hydration cost) |
+| DOMContentLoaded         | 438 ms      | 539 ms     | ~1.2× faster                 |
+| Full load event          | 438 ms      | 1337 ms    | 3× faster                    |
+| HTML doc (decoded)       | 61.7 KB     | 15.2 KB    | compiled ships real content  |
+| JS (decoded)             | 558 KB      | 291 KB     | compiled ships ~2× more JS   |
+| Total transfer           | 733 KB      | 673 KB     | ~equal                       |
+
+## What it means
+
+The compiled win is a **latency and paint win, not a bytes win** — and that is exactly the
+right trade.
+
+The runtime path ships almost nothing up front, then spends its time on the client:
+download `boot.js`, fetch ~10 component templates over the wire, parse them, hydrate. That
+round-trip-then-hydrate chain is the **491 ms of render delay** and the **1.3 s full load**.
+
+The compiled path inverts it. The content is already in the 62 KB HTML document, so the
+browser paints almost immediately (**FCP 248 ms**). It pays with ~2× the JavaScript bytes and
+more requests — but those load in parallel, _off the critical path_, so they never delay the
+pixels. We trade idle bytes for visible speed.
+
+**Net: ~2.4× faster first paint, ~3× faster to fully loaded — on the lightest page in the
+game.** The gap is expected to widen on content-heavy authenticated pages (the arena, the
+roster), where the runtime version has far more components to fetch and hydrate.
+
+## Why this matters for Vibe
+
+Vibe was built runtime-first: author reactive markup, hydrate at runtime, iterate fast. That
+philosophy is what makes it pleasant. But "runtime-first" was never meant to be
+"runtime-only." The compiler is the proof that the _same source_ — the same `@[…]` bindings,
+the same `<!-- if -->` / `<!-- each -->` directives, the same components — can be lowered into
+pre-rendered HTML with no author-visible changes. You write the convenient thing; the
+compiler ships the fast thing.
+
+For a runtime-first framework to grow up, this was the load-bearing feature. Today it carried
+its first real production payload.
+
+## Why this matters for Battleborn Brawlers
+
+> The world's websites are overengineered. It doesn't have to be that way.
+
+Battleborn Brawlers is the primary dogfood for Vibe and Stylecheat. Every quirk we hit, we
+fixed upstream instead of working around it — the manifest resolution, the dynamic-route
+fallbacks, the compiled-mode `this.`-in-conditionals handling, the minify/whitespace edges.
+That discipline is what made today possible: the game didn't bend to the compiler; the
+compiler grew to fit the game.
+
+The result is a strategy auto-battler that now _arrives_ rendered instead of assembling itself
+in front of the player.
+
+## Honest caveats
+
+- Single sample per page; TTFB varied with edge-cache warmth (noise). The render-delay gap
+  (159 ms vs 491 ms) is **architectural and robust**, not measurement noise.
+- A `/@vibe-hmr` request was observed on the **production runtime** deployment — the HMR
+  client may be leaking into the prod build. Worth removing; it shouldn't ship to production.
+
+## Known next wins (not blockers — just the next mile)
+
+- **`parchment-2080x1170.jpg` is 481 KB** and the single largest resource on _both_ sites.
+  WebP/AVIF + right-sizing should cut it by ~75%. Biggest easy win in the whole game.
+- **Compiled CSS isn't bundled/minified** the way the Vite build is — `Iconice.css` decodes
+  to 204 KB, `stylecheat.css` to 146 KB, served as separate raw files. Bundle + minify, and
+  subset the icon font.
+- **The hyperspeed manifest is 250 KB decoded** per page. Worth auditing whether all of it is
+  load-bearing per route.
+
+---
+
+_Recorded 19 June 2026 — the first compilation._
diff --git a/image-optimization-20-june-2026.md b/image-optimization-20-june-2026.md
new file mode 100644
index 00000000..e3150ebd
--- /dev/null
+++ b/image-optimization-20-june-2026.md
@@ -0,0 +1,104 @@
+# Image Optimization — 20 June 2026
+
+> The day the brawlers stopped weighing 18 megabytes.
+
+The day after the [first compilation](first-compilation-19-june-2026.md), Battleborn Brawlers
+got its single biggest real-world performance win — and it had nothing to do with the
+framework. The game was shipping its character art as full-resolution PNGs: ~1500×3000px
+masters, 1.5–2.5 MB **each**, rendered into ~100px-wide cards. Pure waste, paid by every
+player on every visit.
+
+The fix: a build/dev pipeline that keeps PNG/JPG **masters** in a non-deployed `/images`
+folder and emits right-sized, committed `.webp` into `static/images` — automatically, with
+no manual step. Source art stays untouched; the wire gets the lean version.
+
+Two live deployments were put head to head:
+
+- **Optimized** — `https://battlebornbrawlers.com` — the compiled build serving `.webp`.
+- **Original** — `https://runtime.battlebornbrawlers.com` — the previous build serving the
+  raw `.png`/`.jpg` masters.
+
+## The measurement
+
+Real bytes over the wire (`fetch`, cache bypassed), images only, identical pages.
+
+### The Brawlers roster — the same 12 character images
+
+| Metric             | 🟢 Optimized (webp) | 🔵 Original (png/jpg) | Difference               |
+| ------------------ | ------------------- | --------------------- | ------------------------ |
+| Total image weight | **536 KB**          | 18,939 KB (18.5 MB)   | **35× smaller (−97.2%)** |
+| Average per image  | **45 KB**           | 1,578 KB              | 35× smaller              |
+| Format             | webp                | png                   | —                        |
+
+### Per-image highlights
+
+| Character art   | 🟢 webp | 🔵 png   | Saved |
+| --------------- | ------- | -------- | ----- |
+| `troll/male-01` | 44 KB   | 2,521 KB | 98.3% |
+| `human/male-01` | 76 KB   | 2,145 KB | 96.5% |
+| `elf/male-01`   | 53 KB   | 2,043 KB | 97.4% |
+| `elf/female-01` | 39 KB   | 2,036 KB | 98.1% |
+| `dwarf/male-01` | 47 KB   | 1,872 KB | 97.5% |
+
+### The login / landing page (no login required)
+
+| Metric               | 🟢 Optimized | 🔵 Original | Difference        |
+| -------------------- | ------------ | ----------- | ----------------- |
+| Parchment background | **157 KB**   | 482 KB      | 3× smaller (−67%) |
+| Total page images    | **160 KB**   | 484 KB      | 3× smaller        |
+
+## What it means
+
+This is the win that actually changes how the game _feels_ — especially on mobile and on a
+cold cache. The roster alone dropped from **18.5 MB to 0.5 MB**: a 35× cut, the same 12
+images, no visible quality loss at display size. A player opening the Brawlers page used to
+pull down nearly twenty megabytes of art; now it's half a megabyte.
+
+Two levers did the work, both applied automatically:
+
+1. **Format** — PNG → WebP (lossy, with alpha). WebP carries the same cut-out character art
+   at a fraction of PNG's size.
+2. **Right-sizing** — the masters were ~15× larger in each dimension than they're ever
+   displayed. The pipeline caps art to a sane bounding box (`races` → fit 600×900) before
+   encoding, so the browser stops downloading 3000px art to paint a 190px card.
+
+Backgrounds got the same treatment (parchment 482 → 157 KB), and the deploy as a whole
+shed the ~190 MB of masters entirely — they live in `/images`, git-committed but
+`.vercelignore`'d, never shipped.
+
+## How it works (and stays hands-off)
+
+`static/images` is a _generated_ folder; the URL space is always `.webp`. Whatever you drop
+into `/images` (png/jpg) is converted on demand:
+
+- **Dev** — a Vite middleware transcodes on first request and serves it.
+- **Commit** — a `pre-commit` hook regenerates and stages any changed art, so the committed
+  webp is always current even if you never opened the page.
+- **Build** — a safety-net pass; on Vercel it no-ops (masters absent) and ships the committed
+  webp.
+
+You keep adding art however you like and reference it as `.webp`. The lean version takes care
+of itself.
+
+## Honest caveats
+
+- Sizes are real transferred bytes (cache bypassed), but a single sample per image; the gap
+  is so large (35×) that sampling noise is irrelevant.
+- WebP is a _delivery_ format. The lossless PNG masters are kept as the source of truth, so
+  quality can always be re-derived (e.g. if display sizes or quality targets change).
+- The route to here was bumpy: a bare `images` pattern in both the compiler's `skipFiles` and
+  `.vercelignore` matched `static/images` too, and the sync's orphan-prune briefly deleted the
+  committed webp on Vercel (where the masters dir is empty). All fixed — and the prune now
+  refuses to run when zero masters are present.
+
+## Known next wins
+
+- **AVIF** for another ~20–30% on top of WebP, via `<picture>` with a WebP fallback — worth it
+  if the art ever feels heavy on slow links.
+- **Per-context sizes** (`srcset`) — the roster card needs far less than the detail hero;
+  a small card variant could shave the roster further.
+- **The icon set** — `static/icons` ships ~500 SVGs; worth auditing whether all load per page.
+
+---
+
+_Recorded 20 June 2026 — the day the roster went from 18.5 MB to 0.5 MB._
diff --git a/images/bg/arena-combat-4096x2304.jpg b/images/bg/arena-combat-4096x2304.jpg
new file mode 100644
index 00000000..d7532a05
Binary files /dev/null and b/images/bg/arena-combat-4096x2304.jpg differ
diff --git a/images/bg/arena-combat-sandy-4096x2304.png b/images/bg/arena-combat-sandy-4096x2304.png
new file mode 100644
index 00000000..b3558842
Binary files /dev/null and b/images/bg/arena-combat-sandy-4096x2304.png differ
diff --git a/static/images/arena-cut.png b/images/bg/arena-cut-3000x1552.png
similarity index 100%
rename from static/images/arena-cut.png
rename to images/bg/arena-cut-3000x1552.png
diff --git a/images/bg/login-4096x2304.jpg b/images/bg/login-4096x2304.jpg
new file mode 100644
index 00000000..073afa34
Binary files /dev/null and b/images/bg/login-4096x2304.jpg differ
diff --git a/images/bg/parchment-2080x1170.jpg b/images/bg/parchment-2080x1170.jpg
new file mode 100644
index 00000000..b953264e
Binary files /dev/null and b/images/bg/parchment-2080x1170.jpg differ
diff --git a/images/bg/parchment-4096x2304.jpg b/images/bg/parchment-4096x2304.jpg
new file mode 100644
index 00000000..c4dd5b3d
Binary files /dev/null and b/images/bg/parchment-4096x2304.jpg differ
diff --git a/images/bg/the-wild-2250x1500.png b/images/bg/the-wild-2250x1500.png
new file mode 100644
index 00000000..c3f83fef
Binary files /dev/null and b/images/bg/the-wild-2250x1500.png differ
diff --git a/images/bg/the-wild-4096x2304.png b/images/bg/the-wild-4096x2304.png
new file mode 100644
index 00000000..b03dccb1
Binary files /dev/null and b/images/bg/the-wild-4096x2304.png differ
diff --git a/images/bg/the-wild-grassland-2250x1500.png b/images/bg/the-wild-grassland-2250x1500.png
new file mode 100644
index 00000000..eff0a147
Binary files /dev/null and b/images/bg/the-wild-grassland-2250x1500.png differ
diff --git a/images/bg/the-wild-grassland-dark-4096x2304.png b/images/bg/the-wild-grassland-dark-4096x2304.png
new file mode 100644
index 00000000..6ce7f77b
Binary files /dev/null and b/images/bg/the-wild-grassland-dark-4096x2304.png differ
diff --git a/images/elements/earth-621x619.png b/images/elements/earth-621x619.png
new file mode 100644
index 00000000..797edc18
Binary files /dev/null and b/images/elements/earth-621x619.png differ
diff --git a/images/elements/fire-477x730.png b/images/elements/fire-477x730.png
new file mode 100644
index 00000000..d46d522c
Binary files /dev/null and b/images/elements/fire-477x730.png differ
diff --git a/images/elements/frost-452x622.png b/images/elements/frost-452x622.png
new file mode 100644
index 00000000..852b0d9d
Binary files /dev/null and b/images/elements/frost-452x622.png differ
diff --git a/images/elements/lightning-422x586.png b/images/elements/lightning-422x586.png
new file mode 100644
index 00000000..8472a2a4
Binary files /dev/null and b/images/elements/lightning-422x586.png differ
diff --git a/images/elements/nature-425x704.png b/images/elements/nature-425x704.png
new file mode 100644
index 00000000..e74c2bc3
Binary files /dev/null and b/images/elements/nature-425x704.png differ
diff --git a/static/images/equipment/axe.png b/images/equipment/axe.png
similarity index 100%
rename from static/images/equipment/axe.png
rename to images/equipment/axe.png
diff --git a/static/images/equipment/bow.png b/images/equipment/bow.png
similarity index 100%
rename from static/images/equipment/bow.png
rename to images/equipment/bow.png
diff --git a/static/images/equipment/cloth-robe.png b/images/equipment/cloth-robe.png
similarity index 100%
rename from static/images/equipment/cloth-robe.png
rename to images/equipment/cloth-robe.png
diff --git a/static/images/equipment/dagger.png b/images/equipment/dagger.png
similarity index 100%
rename from static/images/equipment/dagger.png
rename to images/equipment/dagger.png
diff --git a/static/images/equipment/leather-harness.png b/images/equipment/leather-harness.png
similarity index 100%
rename from static/images/equipment/leather-harness.png
rename to images/equipment/leather-harness.png
diff --git a/static/images/equipment/mace.png b/images/equipment/mace.png
similarity index 100%
rename from static/images/equipment/mace.png
rename to images/equipment/mace.png
diff --git a/static/images/equipment/ring.png b/images/equipment/ring.png
similarity index 100%
rename from static/images/equipment/ring.png
rename to images/equipment/ring.png
diff --git a/static/images/equipment/shield.png b/images/equipment/shield.png
similarity index 100%
rename from static/images/equipment/shield.png
rename to images/equipment/shield.png
diff --git a/static/images/equipment/steel-cuirass.png b/images/equipment/steel-cuirass.png
similarity index 100%
rename from static/images/equipment/steel-cuirass.png
rename to images/equipment/steel-cuirass.png
diff --git a/static/images/equipment/sword.png b/images/equipment/sword.png
similarity index 100%
rename from static/images/equipment/sword.png
rename to images/equipment/sword.png
diff --git a/static/images/equipment/two-handed-axe.png b/images/equipment/two-handed-axe.png
similarity index 100%
rename from static/images/equipment/two-handed-axe.png
rename to images/equipment/two-handed-axe.png
diff --git a/static/images/equipment/wooden-ring.png b/images/equipment/wooden-ring.png
similarity index 100%
rename from static/images/equipment/wooden-ring.png
rename to images/equipment/wooden-ring.png
diff --git a/images/generated/.gitkeep b/images/generated/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/images/generated/1781618073402.png b/images/generated/1781618073402.png
new file mode 100644
index 00000000..8448cb66
Binary files /dev/null and b/images/generated/1781618073402.png differ
diff --git a/images/generated/1781618456529.png b/images/generated/1781618456529.png
new file mode 100644
index 00000000..24aacf05
Binary files /dev/null and b/images/generated/1781618456529.png differ
diff --git a/images/generated/1781618456537.png b/images/generated/1781618456537.png
new file mode 100644
index 00000000..c83f5d3e
Binary files /dev/null and b/images/generated/1781618456537.png differ
diff --git a/images/generated/1782575871706.png b/images/generated/1782575871706.png
new file mode 100644
index 00000000..fa8aefc2
Binary files /dev/null and b/images/generated/1782575871706.png differ
diff --git a/images/materials/cloth.png b/images/materials/cloth.png
new file mode 100755
index 00000000..c4d00676
Binary files /dev/null and b/images/materials/cloth.png differ
diff --git a/images/materials/essence-of-earth.png b/images/materials/essence-of-earth.png
new file mode 100644
index 00000000..bb39a7c0
Binary files /dev/null and b/images/materials/essence-of-earth.png differ
diff --git a/images/materials/essence-of-fire.png b/images/materials/essence-of-fire.png
new file mode 100644
index 00000000..8ab33024
Binary files /dev/null and b/images/materials/essence-of-fire.png differ
diff --git a/images/materials/essence-of-frost.png b/images/materials/essence-of-frost.png
new file mode 100644
index 00000000..f8e2f263
Binary files /dev/null and b/images/materials/essence-of-frost.png differ
diff --git a/images/materials/essence-of-lightning.png b/images/materials/essence-of-lightning.png
new file mode 100644
index 00000000..f7e0f418
Binary files /dev/null and b/images/materials/essence-of-lightning.png differ
diff --git a/images/materials/essence-of-nature.png b/images/materials/essence-of-nature.png
new file mode 100644
index 00000000..edfa6fc5
Binary files /dev/null and b/images/materials/essence-of-nature.png differ
diff --git a/images/materials/leather.png b/images/materials/leather.png
new file mode 100755
index 00000000..30533b73
Binary files /dev/null and b/images/materials/leather.png differ
diff --git a/images/materials/steel.png b/images/materials/steel.png
new file mode 100755
index 00000000..e8924b06
Binary files /dev/null and b/images/materials/steel.png differ
diff --git a/images/materials/wood.png b/images/materials/wood.png
new file mode 100755
index 00000000..25d1a702
Binary files /dev/null and b/images/materials/wood.png differ
diff --git a/images/races/creature/basher-goblin.png b/images/races/creature/basher-goblin.png
new file mode 100644
index 00000000..7c7582a5
Binary files /dev/null and b/images/races/creature/basher-goblin.png differ
diff --git a/images/races/creature/beastmaster.png b/images/races/creature/beastmaster.png
new file mode 100644
index 00000000..558e3c35
Binary files /dev/null and b/images/races/creature/beastmaster.png differ
diff --git a/images/races/creature/blind-swordsman.png b/images/races/creature/blind-swordsman.png
new file mode 100644
index 00000000..6cea3f98
Binary files /dev/null and b/images/races/creature/blind-swordsman.png differ
diff --git a/images/races/creature/boar.png b/images/races/creature/boar.png
new file mode 100644
index 00000000..f64d079d
Binary files /dev/null and b/images/races/creature/boar.png differ
diff --git a/images/races/creature/cannon.png b/images/races/creature/cannon.png
new file mode 100644
index 00000000..f29c9f17
Binary files /dev/null and b/images/races/creature/cannon.png differ
diff --git a/images/races/creature/crazy-old-man.png b/images/races/creature/crazy-old-man.png
new file mode 100644
index 00000000..658cd1de
Binary files /dev/null and b/images/races/creature/crazy-old-man.png differ
diff --git a/images/races/creature/dimachaerus.png b/images/races/creature/dimachaerus.png
new file mode 100644
index 00000000..df014207
Binary files /dev/null and b/images/races/creature/dimachaerus.png differ
diff --git a/images/races/creature/dragon-egg.png b/images/races/creature/dragon-egg.png
new file mode 100644
index 00000000..29938919
Binary files /dev/null and b/images/races/creature/dragon-egg.png differ
diff --git a/images/races/creature/earth/armorillo.png b/images/races/creature/earth/armorillo.png
new file mode 100644
index 00000000..2689b734
Binary files /dev/null and b/images/races/creature/earth/armorillo.png differ
diff --git a/images/races/creature/earth/elise-goddess-of-earth.png b/images/races/creature/earth/elise-goddess-of-earth.png
new file mode 100644
index 00000000..67f601cd
Binary files /dev/null and b/images/races/creature/earth/elise-goddess-of-earth.png differ
diff --git a/images/races/creature/earth/giant.png b/images/races/creature/earth/giant.png
new file mode 100644
index 00000000..bf761698
Binary files /dev/null and b/images/races/creature/earth/giant.png differ
diff --git a/images/races/creature/earth/vita-deserto.png b/images/races/creature/earth/vita-deserto.png
new file mode 100644
index 00000000..8e5ac0d0
Binary files /dev/null and b/images/races/creature/earth/vita-deserto.png differ
diff --git a/images/races/creature/executioner.png b/images/races/creature/executioner.png
new file mode 100644
index 00000000..ff3c1df6
Binary files /dev/null and b/images/races/creature/executioner.png differ
diff --git a/images/races/creature/fire/bullrock.png b/images/races/creature/fire/bullrock.png
new file mode 100644
index 00000000..d45d0437
Binary files /dev/null and b/images/races/creature/fire/bullrock.png differ
diff --git a/images/races/creature/fire/cerberus.png b/images/races/creature/fire/cerberus.png
new file mode 100644
index 00000000..b7b84aa0
Binary files /dev/null and b/images/races/creature/fire/cerberus.png differ
diff --git a/images/races/creature/fire/giant.png b/images/races/creature/fire/giant.png
new file mode 100755
index 00000000..d3fde799
Binary files /dev/null and b/images/races/creature/fire/giant.png differ
diff --git a/images/races/creature/fire/ignius.png b/images/races/creature/fire/ignius.png
new file mode 100644
index 00000000..d51a741f
Binary files /dev/null and b/images/races/creature/fire/ignius.png differ
diff --git a/images/races/creature/fire/ragnar-god-of-fire.png b/images/races/creature/fire/ragnar-god-of-fire.png
new file mode 100644
index 00000000..46d30f5e
Binary files /dev/null and b/images/races/creature/fire/ragnar-god-of-fire.png differ
diff --git a/images/races/creature/frost/breff.png b/images/races/creature/frost/breff.png
new file mode 100644
index 00000000..d1c7bffe
Binary files /dev/null and b/images/races/creature/frost/breff.png differ
diff --git a/images/races/creature/frost/frigus-mortis.png b/images/races/creature/frost/frigus-mortis.png
new file mode 100644
index 00000000..cbf8c3fd
Binary files /dev/null and b/images/races/creature/frost/frigus-mortis.png differ
diff --git a/images/races/creature/frost/giant.png b/images/races/creature/frost/giant.png
new file mode 100755
index 00000000..cf873bf4
Binary files /dev/null and b/images/races/creature/frost/giant.png differ
diff --git a/images/races/creature/frost/kyl-god-of-frost.png b/images/races/creature/frost/kyl-god-of-frost.png
new file mode 100644
index 00000000..f0c34fed
Binary files /dev/null and b/images/races/creature/frost/kyl-god-of-frost.png differ
diff --git a/images/races/creature/frost/mammoth.png b/images/races/creature/frost/mammoth.png
new file mode 100644
index 00000000..db0a9bb4
Binary files /dev/null and b/images/races/creature/frost/mammoth.png differ
diff --git a/images/races/creature/frost/warrus.png b/images/races/creature/frost/warrus.png
new file mode 100644
index 00000000..07921b69
Binary files /dev/null and b/images/races/creature/frost/warrus.png differ
diff --git a/images/races/creature/frost/yeti.png b/images/races/creature/frost/yeti.png
new file mode 100644
index 00000000..91a7db62
Binary files /dev/null and b/images/races/creature/frost/yeti.png differ
diff --git a/images/races/creature/giant-scorpion.png b/images/races/creature/giant-scorpion.png
new file mode 100644
index 00000000..637fc381
Binary files /dev/null and b/images/races/creature/giant-scorpion.png differ
diff --git a/images/races/creature/golem.png b/images/races/creature/golem.png
new file mode 100644
index 00000000..4eba3186
Binary files /dev/null and b/images/races/creature/golem.png differ
diff --git a/images/races/creature/grizzly-bear.png b/images/races/creature/grizzly-bear.png
new file mode 100644
index 00000000..a5fc31c3
Binary files /dev/null and b/images/races/creature/grizzly-bear.png differ
diff --git a/images/races/creature/horn-goblin.png b/images/races/creature/horn-goblin.png
new file mode 100644
index 00000000..4ee6db5d
Binary files /dev/null and b/images/races/creature/horn-goblin.png differ
diff --git a/images/races/creature/hyena.png b/images/races/creature/hyena.png
new file mode 100644
index 00000000..794e73d4
Binary files /dev/null and b/images/races/creature/hyena.png differ
diff --git a/images/races/creature/jester.png b/images/races/creature/jester.png
new file mode 100644
index 00000000..7869dcb1
Binary files /dev/null and b/images/races/creature/jester.png differ
diff --git a/images/races/creature/lightning/giant.png b/images/races/creature/lightning/giant.png
new file mode 100644
index 00000000..8ade2c66
Binary files /dev/null and b/images/races/creature/lightning/giant.png differ
diff --git a/images/races/creature/lightning/herald.png b/images/races/creature/lightning/herald.png
new file mode 100644
index 00000000..d98dea61
Binary files /dev/null and b/images/races/creature/lightning/herald.png differ
diff --git a/images/races/creature/lightning/onkh.png b/images/races/creature/lightning/onkh.png
new file mode 100644
index 00000000..cffb1cf7
Binary files /dev/null and b/images/races/creature/lightning/onkh.png differ
diff --git a/images/races/creature/lightning/oskar-god-of-lightning.png b/images/races/creature/lightning/oskar-god-of-lightning.png
new file mode 100644
index 00000000..3c4cda8b
Binary files /dev/null and b/images/races/creature/lightning/oskar-god-of-lightning.png differ
diff --git a/images/races/creature/lightning/ulwar.png b/images/races/creature/lightning/ulwar.png
new file mode 100644
index 00000000..e4a41562
Binary files /dev/null and b/images/races/creature/lightning/ulwar.png differ
diff --git a/images/races/creature/lightning/vento-mico.png b/images/races/creature/lightning/vento-mico.png
new file mode 100644
index 00000000..b3fe321d
Binary files /dev/null and b/images/races/creature/lightning/vento-mico.png differ
diff --git a/images/races/creature/lightning/wyvern.png b/images/races/creature/lightning/wyvern.png
new file mode 100644
index 00000000..ebdc1f7d
Binary files /dev/null and b/images/races/creature/lightning/wyvern.png differ
diff --git a/images/races/creature/lost-civilian.png b/images/races/creature/lost-civilian.png
new file mode 100644
index 00000000..0493a915
Binary files /dev/null and b/images/races/creature/lost-civilian.png differ
diff --git a/images/races/creature/nature/.png b/images/races/creature/nature/.png
new file mode 100644
index 00000000..3fd8c192
Binary files /dev/null and b/images/races/creature/nature/.png differ
diff --git a/images/races/creature/nature/alora-goddess-of-nature.png b/images/races/creature/nature/alora-goddess-of-nature.png
new file mode 100644
index 00000000..cf44597e
Binary files /dev/null and b/images/races/creature/nature/alora-goddess-of-nature.png differ
diff --git a/images/races/creature/nature/erat-herba.png b/images/races/creature/nature/erat-herba.png
new file mode 100644
index 00000000..062b7cd6
Binary files /dev/null and b/images/races/creature/nature/erat-herba.png differ
diff --git a/images/races/creature/nature/giant.png b/images/races/creature/nature/giant.png
new file mode 100755
index 00000000..d79687c0
Binary files /dev/null and b/images/races/creature/nature/giant.png differ
diff --git a/images/races/creature/nature/owlbear.png b/images/races/creature/nature/owlbear.png
new file mode 100644
index 00000000..6b10916a
Binary files /dev/null and b/images/races/creature/nature/owlbear.png differ
diff --git a/images/races/creature/nature/rune-stag.png b/images/races/creature/nature/rune-stag.png
new file mode 100644
index 00000000..724f7187
Binary files /dev/null and b/images/races/creature/nature/rune-stag.png differ
diff --git a/images/races/creature/netter-goblin.png b/images/races/creature/netter-goblin.png
new file mode 100644
index 00000000..f505553d
Binary files /dev/null and b/images/races/creature/netter-goblin.png differ
diff --git a/images/races/creature/nomad.png b/images/races/creature/nomad.png
new file mode 100644
index 00000000..6a26bd32
Binary files /dev/null and b/images/races/creature/nomad.png differ
diff --git a/images/races/creature/older-brother.png b/images/races/creature/older-brother.png
new file mode 100644
index 00000000..1dd66b27
Binary files /dev/null and b/images/races/creature/older-brother.png differ
diff --git a/images/races/creature/pitchfork-patrick.png b/images/races/creature/pitchfork-patrick.png
new file mode 100644
index 00000000..61ee7c57
Binary files /dev/null and b/images/races/creature/pitchfork-patrick.png differ
diff --git a/images/races/creature/plague-doctor.png b/images/races/creature/plague-doctor.png
new file mode 100644
index 00000000..ef46a1d5
Binary files /dev/null and b/images/races/creature/plague-doctor.png differ
diff --git a/images/races/creature/poorest-knight-in-town.png b/images/races/creature/poorest-knight-in-town.png
new file mode 100644
index 00000000..80750167
Binary files /dev/null and b/images/races/creature/poorest-knight-in-town.png differ
diff --git a/images/races/creature/queen-arachnae.png b/images/races/creature/queen-arachnae.png
new file mode 100644
index 00000000..487c2b35
Binary files /dev/null and b/images/races/creature/queen-arachnae.png differ
diff --git a/images/races/creature/rat.png b/images/races/creature/rat.png
new file mode 100644
index 00000000..3e8a903f
Binary files /dev/null and b/images/races/creature/rat.png differ
diff --git a/images/races/creature/regular-sized-combatant.png b/images/races/creature/regular-sized-combatant.png
new file mode 100644
index 00000000..f0288639
Binary files /dev/null and b/images/races/creature/regular-sized-combatant.png differ
diff --git a/images/races/creature/rhino.png b/images/races/creature/rhino.png
new file mode 100644
index 00000000..35c85284
Binary files /dev/null and b/images/races/creature/rhino.png differ
diff --git a/images/races/creature/sabertooth-tiger.png b/images/races/creature/sabertooth-tiger.png
new file mode 100644
index 00000000..13abaceb
Binary files /dev/null and b/images/races/creature/sabertooth-tiger.png differ
diff --git a/images/races/creature/scorch-ling.png b/images/races/creature/scorch-ling.png
new file mode 100644
index 00000000..e1b7d86a
Binary files /dev/null and b/images/races/creature/scorch-ling.png differ
diff --git a/images/races/creature/secutor.png b/images/races/creature/secutor.png
new file mode 100644
index 00000000..d41307cf
Binary files /dev/null and b/images/races/creature/secutor.png differ
diff --git a/images/races/creature/slinger-goblin.png b/images/races/creature/slinger-goblin.png
new file mode 100644
index 00000000..abc5ea1e
Binary files /dev/null and b/images/races/creature/slinger-goblin.png differ
diff --git a/images/races/creature/spiderling.png b/images/races/creature/spiderling.png
new file mode 100644
index 00000000..e6e5eb81
Binary files /dev/null and b/images/races/creature/spiderling.png differ
diff --git a/images/races/creature/stabber-goblin.png b/images/races/creature/stabber-goblin.png
new file mode 100644
index 00000000..e3cfc823
Binary files /dev/null and b/images/races/creature/stabber-goblin.png differ
diff --git a/images/races/creature/succubus.png b/images/races/creature/succubus.png
new file mode 100644
index 00000000..4c8adfe5
Binary files /dev/null and b/images/races/creature/succubus.png differ
diff --git a/images/races/creature/the-emperor.png b/images/races/creature/the-emperor.png
new file mode 100644
index 00000000..09b034e6
Binary files /dev/null and b/images/races/creature/the-emperor.png differ
diff --git a/images/races/creature/the-engineer.png b/images/races/creature/the-engineer.png
new file mode 100644
index 00000000..4580e42e
Binary files /dev/null and b/images/races/creature/the-engineer.png differ
diff --git a/images/races/creature/the-grand-champion.png b/images/races/creature/the-grand-champion.png
new file mode 100644
index 00000000..70d9d65c
Binary files /dev/null and b/images/races/creature/the-grand-champion.png differ
diff --git a/images/races/creature/training-dummy.png b/images/races/creature/training-dummy.png
new file mode 100644
index 00000000..5f9c9e2a
Binary files /dev/null and b/images/races/creature/training-dummy.png differ
diff --git a/images/races/creature/war-elephant.png b/images/races/creature/war-elephant.png
new file mode 100644
index 00000000..1993a9bd
Binary files /dev/null and b/images/races/creature/war-elephant.png differ
diff --git a/images/races/creature/wolf.png b/images/races/creature/wolf.png
new file mode 100644
index 00000000..ee12a18b
Binary files /dev/null and b/images/races/creature/wolf.png differ
diff --git a/images/races/creature/younger-brother.png b/images/races/creature/younger-brother.png
new file mode 100644
index 00000000..71d9fb36
Binary files /dev/null and b/images/races/creature/younger-brother.png differ
diff --git a/images/races/dwarf/female-01.png b/images/races/dwarf/female-01.png
new file mode 100644
index 00000000..22e04da8
Binary files /dev/null and b/images/races/dwarf/female-01.png differ
diff --git a/images/races/dwarf/male-01.png b/images/races/dwarf/male-01.png
new file mode 100644
index 00000000..f16f1875
Binary files /dev/null and b/images/races/dwarf/male-01.png differ
diff --git a/images/races/elf/female-01.png b/images/races/elf/female-01.png
new file mode 100644
index 00000000..d8dda859
Binary files /dev/null and b/images/races/elf/female-01.png differ
diff --git a/images/races/elf/male-01.png b/images/races/elf/male-01.png
new file mode 100644
index 00000000..2e52acf4
Binary files /dev/null and b/images/races/elf/male-01.png differ
diff --git a/images/races/goblin/female-01.png b/images/races/goblin/female-01.png
new file mode 100644
index 00000000..c707901d
Binary files /dev/null and b/images/races/goblin/female-01.png differ
diff --git a/images/races/goblin/male-01.png b/images/races/goblin/male-01.png
new file mode 100644
index 00000000..88b7f476
Binary files /dev/null and b/images/races/goblin/male-01.png differ
diff --git a/images/races/human/female-01.png b/images/races/human/female-01.png
new file mode 100644
index 00000000..a64c44b9
Binary files /dev/null and b/images/races/human/female-01.png differ
diff --git a/images/races/human/male-01.png b/images/races/human/male-01.png
new file mode 100644
index 00000000..bf6e775b
Binary files /dev/null and b/images/races/human/male-01.png differ
diff --git a/images/races/npc/brog.png b/images/races/npc/brog.png
new file mode 100644
index 00000000..74d8c914
Binary files /dev/null and b/images/races/npc/brog.png differ
diff --git a/images/races/npc/doctore-varro.png b/images/races/npc/doctore-varro.png
new file mode 100644
index 00000000..f514e0d0
Binary files /dev/null and b/images/races/npc/doctore-varro.png differ
diff --git a/images/races/npc/grukk.png b/images/races/npc/grukk.png
new file mode 100644
index 00000000..c3fa0774
Binary files /dev/null and b/images/races/npc/grukk.png differ
diff --git a/images/races/npc/mira.png b/images/races/npc/mira.png
new file mode 100644
index 00000000..0f0c6d06
Binary files /dev/null and b/images/races/npc/mira.png differ
diff --git a/images/races/npc/mother-alora.png b/images/races/npc/mother-alora.png
new file mode 100644
index 00000000..53ff6897
Binary files /dev/null and b/images/races/npc/mother-alora.png differ
diff --git a/images/races/npc/nibsy.png b/images/races/npc/nibsy.png
new file mode 100644
index 00000000..d9c7c1c3
Binary files /dev/null and b/images/races/npc/nibsy.png differ
diff --git a/images/races/npc/oswald.png b/images/races/npc/oswald.png
new file mode 100644
index 00000000..3fbb238f
Binary files /dev/null and b/images/races/npc/oswald.png differ
diff --git a/images/races/troll/__female-01.png b/images/races/troll/__female-01.png
new file mode 100644
index 00000000..8d7d2d23
Binary files /dev/null and b/images/races/troll/__female-01.png differ
diff --git a/images/races/troll/__male-01.png b/images/races/troll/__male-01.png
new file mode 100644
index 00000000..9956e9b5
Binary files /dev/null and b/images/races/troll/__male-01.png differ
diff --git a/images/races/troll/female-01.png b/images/races/troll/female-01.png
new file mode 100644
index 00000000..b45cda3a
Binary files /dev/null and b/images/races/troll/female-01.png differ
diff --git a/images/races/troll/male-01.png b/images/races/troll/male-01.png
new file mode 100644
index 00000000..6dca1d56
Binary files /dev/null and b/images/races/troll/male-01.png differ
diff --git a/images/races/troll/troll-male-alt-1.png b/images/races/troll/troll-male-alt-1.png
new file mode 100644
index 00000000..f29c0b02
Binary files /dev/null and b/images/races/troll/troll-male-alt-1.png differ
diff --git a/images/races/troll/troll-male-alt-2.png b/images/races/troll/troll-male-alt-2.png
new file mode 100644
index 00000000..729ec196
Binary files /dev/null and b/images/races/troll/troll-male-alt-2.png differ
diff --git a/static/images/shield.png b/images/shield-1455x2329.png
similarity index 100%
rename from static/images/shield.png
rename to images/shield-1455x2329.png
diff --git a/images/ui/battleborn-logo-3405x2231.png b/images/ui/battleborn-logo-3405x2231.png
new file mode 100644
index 00000000..7d086eb0
Binary files /dev/null and b/images/ui/battleborn-logo-3405x2231.png differ
diff --git a/static/images/ui/button/center.jpg b/images/ui/button/center.jpg
similarity index 100%
rename from static/images/ui/button/center.jpg
rename to images/ui/button/center.jpg
diff --git a/static/images/ui/button/left.jpg b/images/ui/button/left.jpg
similarity index 100%
rename from static/images/ui/button/left.jpg
rename to images/ui/button/left.jpg
diff --git a/static/images/ui/button/right.jpg b/images/ui/button/right.jpg
similarity index 100%
rename from static/images/ui/button/right.jpg
rename to images/ui/button/right.jpg
diff --git a/static/images/ui/frame-header.jpg b/images/ui/frame-header.jpg
similarity index 100%
rename from static/images/ui/frame-header.jpg
rename to images/ui/frame-header.jpg
diff --git a/static/images/ui/frame.png b/images/ui/frame.png
similarity index 100%
rename from static/images/ui/frame.png
rename to images/ui/frame.png
diff --git a/js/_internal-tools/entitySource.js b/js/_internal-tools/entitySource.js
new file mode 100644
index 00000000..f8dbe639
--- /dev/null
+++ b/js/_internal-tools/entitySource.js
@@ -0,0 +1,10 @@
+export const saveEntity = async (source, id, changes) => {
+  const response = await fetch(`/__source/${source}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ id, changes }),
+  });
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || `save failed (${response.status})`);
+  return data;
+};
diff --git a/js/ambient.js b/js/ambient.js
new file mode 100644
index 00000000..9d7f4326
--- /dev/null
+++ b/js/ambient.js
@@ -0,0 +1,81 @@
+let currentTrack = null;
+let tracks = null;
+
+const getVolume = () => ($.settings?.volume?.master ?? 0.5) * ($.settings?.volume?.ambient ?? 0.25);
+
+const crossfade = (next) => {
+  if (!next || currentTrack === next) return;
+
+  const volume = getVolume();
+  const prev = currentTrack;
+
+  next.play();
+  next.fade(0, volume, 2000);
+
+  if (prev) {
+    prev.fade(prev.volume(), 0, 2000);
+    const handleFade = () => {
+      if (prev.volume() <= 0.001) {
+        prev.stop();
+        prev.off('fade', handleFade);
+      }
+    };
+    prev.on('fade', handleFade);
+  }
+
+  currentTrack = next;
+};
+
+export const init = () => {
+  if (!window.Howl || !window.AUDIO) return;
+
+  tracks = {
+    arena: new window.Howl({
+      src: [window.AUDIO['Pure Desert Wind']],
+      volume: 0,
+      loop: true,
+      preload: false,
+    }),
+    theWild: new window.Howl({
+      src: [window.AUDIO['Summer Day In Nature']],
+      volume: 0,
+      loop: true,
+      preload: false,
+    }),
+  };
+
+  $.on('afterUpdate', (current, prev) => {
+    if (!tracks) return;
+
+    // Update volume when settings change
+    if (currentTrack && current.settings?.volume !== prev.settings?.volume) {
+      currentTrack.volume(getVolume());
+    }
+
+    // Switch tracks based on game state
+    const inCombat = current.combat?.duration > 0;
+    const inTheWild = current.bossHighscore >= 15;
+
+    // Pause ambient during combat (combat has its own SFX)
+    if (inCombat && currentTrack) {
+      currentTrack.fade(currentTrack.volume(), 0, 1000);
+      return;
+    }
+
+    // Resume/switch ambient after combat
+    if (!inCombat && prev.combat?.duration > 0) {
+      const target = inTheWild ? tracks.theWild : tracks.arena;
+      crossfade(target);
+      return;
+    }
+
+    // Initial play or the-wild transition
+    if (!currentTrack && current.token) {
+      crossfade(inTheWild ? tracks.theWild : tracks.arena);
+    } else if (inTheWild && currentTrack === tracks.arena) {
+      crossfade(tracks.theWild);
+    } else if (!inTheWild && currentTrack === tracks.theWild) {
+      crossfade(tracks.arena);
+    }
+  });
+};
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 00000000..b5cd78d3
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,135 @@
+import VERSION from '/js/version.js';
+import config from '/js/config.js';
+import { releaseNotesPageData } from '/js/constants/RELEASE_NOTES.js';
+import { DEFAULT_GAME_STATE } from '/js/constants/DEFAULT_GAME_STATE.js';
+
+const loadLocalStorage = (props) =>
+  Object.entries(props).reduce(
+    (a, [key, value]) => ({
+      ...a,
+      [key]: window.localStorage.getItem(key)
+        ? JSON.parse(window.localStorage.getItem(key))
+        : value,
+    }),
+    {},
+  );
+
+const SETTINGS_DEFAULT_VOLUME = {
+  master: 0.5,
+  ambient: 0.25,
+  sfx: 0.5,
+  combat: 1,
+};
+
+const INITIAL_COMBAT = {
+  teamsStartState: [],
+  teamsEndState: [],
+  events: [],
+  duration: 0,
+  winningTeam: undefined,
+  fightId: undefined,
+  audio: [],
+  showTeamLabels: false,
+  perspectiveEnabled: true,
+};
+
+export default {
+  // ── Persisted game state — the ONLY keys written to the DB. Defined once in
+  //    /js/constants/DEFAULT_GAME_STATE.js (shared by buildSavePayload and seed-bots). ──
+  ...DEFAULT_GAME_STATE,
+
+  // ── Runtime-only — NOT persisted via the game-state save. Account caches are loaded
+  //    from the account doc on auth (read-only here; the server writes them). The rest
+  //    is transport, plus ephemeral combat / clock / UI / session state. ──
+  version: VERSION,
+  worktree: config.WORKTREE,
+  combat: INITIAL_COMBAT,
+  liveTeams: [],
+  combatCards: [],
+  combatProjectiles: [],
+  combatLoot: [], // drops rolled on victory (rollLoot), shown on the reward card and granted on claim.
+  elapsedMilliseconds: 0,
+  clock: {
+    server: 0, // server-trusted wall-clock anchor in ms. Set by the server on auth (and re-anchored on heal).
+    client: 0, // client `performance.now()` reading at the same instant as `server`. Together they form the sync pair.
+    now: 0, // derived current server time, recomputed every 250ms as `server + (performance.now() - client)`. Read this for "what time is it on the server right now".
+    devOffset: 0, // tester-only ms offset folded into the anchor to jump between seasons; sent to the server so storage routing follows.
+  },
+  season: 0, // current season number, derived from clock.now.
+  devSeasonOptions: [], // tester dropdown: 12 months from the real current season (set after clock sync).
+  premiumUntil: 0, // account-level Season Pass expiry (ms, server time). Loaded on auth; written by the purchase-pass event, not the game-state save.
+  isPremiumNow: false, // reactive mirror of "premium active right now" — kept fresh by the clock loop so markup can bind it.
+  accountStatistics: {}, // { <season-label>: statsTree } — every season's mirrored stats, loaded on auth so account (lifetime) thresholds read true totals. Read-only cache.
+  accountAchievements: {}, // { <season-label>: { <id>: { earnedAt } } } — every season's earned achievements. Powers lifetime counts, prior-season detection, Recent. Read-only cache.
+  achievementReveals: [], // queue of { id, at } awaiting the center-screen reveal pop-up.
+  achTab: 'recent', // /achievements selected sidebar tab: 'recent' or '<scope>:<category>'.
+  achReveal: null, // /achievements id pinned to the top of its category list.
+  achFlip: null, // /achievements id to play the locked→earned flip on (deep-link arrival only).
+  gameStateLoaded: false,
+  socket: undefined,
+  token: undefined,
+  email: '',
+  canTest: false,
+  selectedBrawlers: [],
+  selectPress: false,
+  swordTwoIn: false,
+  // Tester-only: an explicit combat seed typed into the fight bar; empty = random.
+  testerSeed: '',
+  maxBrawlers: 0,
+  tooltip: { visible: false, x: 0, y: 0, props: {} },
+  keys: { alt: false },
+  notifications: [],
+  notifyUp: true,
+  notifyDown: false,
+  notifyLeft: false,
+  notifyRight: true,
+  overlay: {},
+  inventoryOpen: false,
+  accountId: null,
+  accountName: null,
+  pvp: {
+    teamplay: {
+      active: null,
+      viewed: null,
+      list: [],
+      selecting: [],
+      cards: [],
+      canJoin: false,
+      bpa: 1,
+      roomStatus: null,
+      controls: null,
+      chatOpen: false,
+    },
+  },
+  releaseNotes: releaseNotesPageData(0),
+  cutscene: null,
+  forMyLevel: true,
+  sheetDialog: {
+    heading: '',
+    groups: { base: [], lucky: [], modifiers: [], resistances: [], tolerance: [], other: [] },
+    slots: [],
+  },
+  settings: loadLocalStorage({
+    volume: SETTINGS_DEFAULT_VOLUME,
+    debugOpen: false,
+    devbarOpen: false,
+    isTester: false,
+    showDetailedCharacterView: false,
+    darkMode: false,
+    codeOfConduct: false,
+    rememberMe: false,
+    savedEmail: '',
+    savedPassword: '',
+    // Last-used Create Teamplay selections, restored on the next open.
+    teamplaySettings: {
+      randomizedTeams: true,
+      brawlersPerAccount: 1,
+      amountOfTeams: 2,
+      brawlersPerTeam: 2,
+      levelOffset: 1,
+    },
+  }),
+  page: { name: 'home', params: {} },
+};
+
+export { SETTINGS_DEFAULT_VOLUME, INITIAL_COMBAT };
diff --git a/js/audio.js b/js/audio.js
new file mode 100644
index 00000000..f4ad7156
--- /dev/null
+++ b/js/audio.js
@@ -0,0 +1,117 @@
+const audioFiles = [
+  '/static/audio/Fire & Shimmer.wav',
+  '/static/audio/Fire Themed GUI - Hammer Of Fire.wav',
+  '/static/audio/Special Lootbox 13.wav',
+  '/static/audio/Stinger - Ominous Timpani.wav',
+  '/static/audio/Victory Stinger 1.wav',
+  '/static/audio/abilities/boom/Fire and Wood.wav',
+  '/static/audio/abilities/cheesyTactics/Food Use - Buff Style 1.wav',
+  '/static/audio/abilities/cheesyTactics/Food Use - Buff Style 2.wav',
+  '/static/audio/abilities/demoralizingShout/Fantasy Game Buff (1).wav',
+  '/static/audio/abilities/doublePersona/Magic Transition.wav',
+  '/static/audio/abilities/emberStrike/Fire Impact 10.wav',
+  '/static/audio/abilities/emberStrike/Fire Impact 2.wav',
+  '/static/audio/abilities/emberStrike/Fire Impact 20.wav',
+  '/static/audio/abilities/emberStrike/Fire Impact 8.wav',
+  '/static/audio/abilities/lacerate/SOW1 - Combo - Double Slash 1.wav',
+  '/static/audio/abilities/mindsnap/DeBuff 1.wav',
+  '/static/audio/abilities/mindsnap/DeBuff 2.wav',
+  '/static/audio/abilities/powerReady/Power Ready (14).wav',
+  '/static/audio/abilities/powerReady/Power Ready (17).wav',
+  '/static/audio/abilities/stomp/Unspecified Impact Layer (1).wav',
+  '/static/audio/abilities/stomp/Unspecified Impact Layer (2).wav',
+  '/static/audio/abilities/stomp/Unspecified Impact Layer (3).wav',
+  '/static/audio/abilities/warcry/Fire Themed GUI - Warrior Shout (2).wav',
+  '/static/audio/ambient/Pure Desert Wind.wav',
+  '/static/audio/ambient/Summer Day In Nature.wav',
+  '/static/audio/armor/Armor Layer (1).wav',
+  '/static/audio/armor/Armor Layer (2).wav',
+  '/static/audio/armor/Armor Layer (3).wav',
+  '/static/audio/armor/Armor Layer (4).wav',
+  '/static/audio/armor/Armor Layer (5).wav',
+  '/static/audio/armor/Armor Layer (6).wav',
+  '/static/audio/block/Axe Chop 1.wav',
+  '/static/audio/block/Axe Chop 2.wav',
+  '/static/audio/block/Axe Chop 3.wav',
+  '/static/audio/block/Axe Chop 4.wav',
+  '/static/audio/block/Axe Chop 5.wav',
+  '/static/audio/block/Axe Chop 6.wav',
+  '/static/audio/bow/Target Impact - Default (1).wav',
+  '/static/audio/dodge/Swing Whoosh (1).wav',
+  '/static/audio/dodge/Swing Whoosh (10).wav',
+  '/static/audio/dodge/Swing Whoosh (2).wav',
+  '/static/audio/dodge/Swing Whoosh (3).wav',
+  '/static/audio/dodge/Swing Whoosh (4).wav',
+  '/static/audio/dodge/Swing Whoosh (5).wav',
+  '/static/audio/dodge/Swing Whoosh (6).wav',
+  '/static/audio/dodge/Swing Whoosh (7).wav',
+  '/static/audio/dodge/Swing Whoosh (8).wav',
+  '/static/audio/dodge/Swing Whoosh (9).wav',
+  '/static/audio/potion/Drink Potion.wav',
+  '/static/audio/slam/Hammer Maul 1.wav',
+  '/static/audio/slam/Hammer Maul 2.wav',
+  '/static/audio/slam/Hammer Maul 3.wav',
+  '/static/audio/slam/Hammer Maul 4.wav',
+  '/static/audio/slam/Slap Style Layer (1).wav',
+  '/static/audio/slam/Slap Style Layer (2).wav',
+  '/static/audio/slam/Slap Style Layer (3).wav',
+  '/static/audio/slash/Simple Cut 1.wav',
+  '/static/audio/slash/Simple Cut 2.wav',
+  '/static/audio/slash/Simple Cut 3.wav',
+  '/static/audio/stab/Spear Stab 1.wav',
+  '/static/audio/stab/Spear Stab 2.wav',
+  '/static/audio/stab/Spear Stab 3.wav',
+  '/static/audio/sword/Metallic Weapon Swing (1).wav',
+  '/static/audio/sword/Metallic Weapon Swing (2).wav',
+  '/static/audio/sword/Metallic Weapon Swing (3).wav',
+  '/static/audio/sword/Metallic Weapon Swing (4).wav',
+  '/static/audio/sword/Metallic Weapon Swing (5).wav',
+  '/static/audio/sword/swoosh.mp3',
+];
+
+export const AUDIO = {};
+
+audioFiles.forEach((path) => {
+  const filename = path
+    .split('/')
+    .pop()
+    .replace(/\.(wav|mp3)$/, '');
+  AUDIO[filename] = path;
+});
+
+// Play a fractional slice [start, end] (0–1) of a clip, auto-stopping at the
+// end. Howler stops a sprite once its duration elapses, so we register the
+// requested range as a sprite and play it — no manual timers. Howls are cached
+// per clip and segment requests queued until the audio metadata has loaded.
+const segmentHowls = {};
+
+export const playSoundSegment = (name, start = 0, end = 1) => {
+  const { Howl } = window;
+  const src = AUDIO[name];
+  if (!Howl || !src) return;
+
+  let entry = segmentHowls[name];
+  if (!entry) {
+    entry = segmentHowls[name] = { howl: new Howl({ src: [src] }), loaded: false, queue: [] };
+    entry.howl.once('load', () => {
+      entry.loaded = true;
+      entry.queue.splice(0).forEach((range) => playRange(entry.howl, range));
+    });
+  }
+
+  entry.loaded ? playRange(entry.howl, { start, end }) : entry.queue.push({ start, end });
+};
+
+const sfxVolume = () => ($.settings?.volume?.sfx ?? 0.5) * ($.settings?.volume?.master ?? 0.5);
+
+const playRange = (howl, { start, end }) => {
+  const durationMs = howl.duration() * 1000;
+  const from = Math.min(Math.max(start, 0), 1) * durationMs;
+  const length = (Math.min(Math.max(end, 0), 1) - Math.min(Math.max(start, 0), 1)) * durationMs;
+  if (length <= 0) return;
+  const sprite = `${from}-${length}`;
+  howl._sprite[sprite] = [from, length];
+  howl.volume(sfxVolume(), howl.play(sprite));
+};
+
+export default AUDIO;
diff --git a/js/boot.js b/js/boot.js
new file mode 100644
index 00000000..8d7239d2
--- /dev/null
+++ b/js/boot.js
@@ -0,0 +1,975 @@
+import vibe from '@ape-egg/vibe';
+import { boot as vibeBoot } from '@ape-egg/vibe/boot';
+import { Howl } from 'howler';
+
+import appState, { INITIAL_COMBAT } from '/js/app.js';
+import config, { isTesterEmail } from '/js/config.js';
+import VERSION from '/js/version.js';
+import { getCookie, formatReleaseDate, onKeyPress, deepMerge } from '/js/helpers.js';
+import { releaseNotesPageData } from '/js/constants/RELEASE_NOTES.js';
+import { init as initCombatLoop } from '/js/combat-loop.js';
+import { init as initSocket, saveNow } from '/js/connectSocket.js';
+import { fetchMyActiveTeamplay } from '/js/teamplay.js';
+import { init as initAmbient } from '/js/ambient.js';
+import { initInputMode } from '/js/inputMode.js';
+import { seasonArena } from '/js/seasonArena.js';
+import CHARACTERS from '/js/constants/CHARACTERS.js';
+import ABILITIES from '/js/constants/ABILITIES.js';
+import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+import { calculateCombatStatsByCharacter, incStat, mergeStats } from '/js/utils.js';
+import { ALL_ACHIEVEMENTS, ACHIEVEMENTS_BY_ID, achProgress } from '/js/constants/ACHIEVEMENTS.js';
+import {
+  getLevelByExperience,
+  getExperienceByLevel,
+  getCurrentExperienceAtLevel,
+  getExperienceForNextLevel,
+  allowedNumberOfBrawlers,
+  allowedNumberOfPotions,
+  isAccountPremium,
+  getExperienceReward,
+  MAX_LEVEL,
+} from '/js/level.js';
+import AUDIO, { playSoundSegment } from '/js/audio.js';
+import { correctHealth } from '/js/equipment.js';
+import {
+  equipmentTooltipProps,
+  abilityTooltipProps,
+  combatStatsToList,
+  statusTooltipProps,
+} from '/js/tooltip.js';
+import { STAT_DESCRIPTIONS } from '/js/constants/STATS.js';
+import {
+  seasonNumber,
+  seasonName,
+  seasonMeta,
+  seasonLabel,
+  seasonStart,
+  seasonEnd,
+  seasonProgress,
+  downtimeStart,
+  msUntilNextSeason,
+  msUntilDowntime,
+  isDowntime,
+  passDiscount,
+  passPrice,
+  formatEUR,
+  PASS_PRICE,
+} from '/js/seasons.js';
+import '/js/loadout.js';
+
+// Twelve seasons starting at the REAL current season (offset stripped) — so the
+// tester can jump forward and back, but never before the true current season.
+const buildSeasonOptions = (server) => {
+  const base = seasonNumber(server - ($.clock.devOffset || 0));
+  return Array.from({ length: 12 }, (_, i) => {
+    const n = base + i;
+    const month = new Date(seasonStart(n)).toLocaleString('en-US', {
+      month: 'short',
+      year: 'numeric',
+      timeZone: 'UTC',
+    });
+    return { number: n, label: `S${n} — ${month}` };
+  });
+};
+
+// Move the synced clock so clock.now lands on `target`, persist the offset, and
+// reload — auth then re-routes storage to that season and the whole UI follows.
+const applyDevClock = (target) => {
+  const realNow = ($.clock.now || Date.now()) - ($.clock.devOffset || 0);
+  window.localStorage.setItem('devClockOffset', String(target - realNow));
+  window.location.reload();
+};
+
+// The Heirloom is the level-1 Battle Pass reward, so only pass owners get it.
+// New accounts start past the level-1 claim (accountRewards = 1), so grant it on
+// load (and on pass purchase) instead — once per season, idempotent.
+const grantHeirloom = () => {
+  if (!$.isPremiumNow) return;
+  if ($.seasonPass.heirloom || $.inventory.some((i) => i.id === 'heirloom')) return;
+  $.inventory = [...$.inventory, EQUIPMENT('heirloom')];
+  $.seasonPass = { ...$.seasonPass, heirloom: true };
+  const heirloom = EQUIPMENT('heirloom', true);
+  window.notify?.success?.('acquired!', {
+    equipment: { name: heirloom.name, element: heirloom.element },
+  });
+};
+
+const loadGameState = async (token) => {
+  try {
+    const {
+      gameState,
+      serverTimestampSnapshot,
+      accountId,
+      email,
+      accountName,
+      season,
+      premiumUntil,
+      accountStatistics,
+      accountAchievements,
+    } = await $.socket.sendAsync('user/authenticate', {
+      token,
+      clientVersion: VERSION,
+      isDev: config.IS_DEV,
+      timeOffset: $.clock.devOffset || 0,
+    });
+    $.accountStatistics = accountStatistics || {};
+    $.accountAchievements = accountAchievements || {};
+    if (gameState) {
+      if (gameState.characters) $.characters = gameState.characters;
+      if (gameState.inventory) $.inventory = gameState.inventory;
+      if (gameState.materials) $.materials = gameState.materials;
+      if (gameState.statistics) $.statistics = gameState.statistics;
+      if (gameState.achievements) $.achievements = gameState.achievements;
+      if (gameState.experience) $.experience = gameState.experience;
+      if (gameState.coins !== undefined) $.coins = gameState.coins;
+      if (gameState.accountRewards) $.accountRewards = gameState.accountRewards;
+      if (gameState.potions !== undefined) $.potions = gameState.potions;
+      if (gameState.bossHighscore !== undefined) $.bossHighscore = gameState.bossHighscore;
+      // Merge onto the default skeleton, never replace: buildings' children are saved
+      // independently via diff dot-paths, so a never-yet-touched building (e.g. palaestra
+      // before its first assignment) is simply absent from the persisted doc.
+      if (gameState.buildings)
+        $.buildings = deepMerge(JSON.parse(JSON.stringify($.buildings)), gameState.buildings);
+      if (gameState.seasonPass)
+        $.seasonPass = deepMerge(JSON.parse(JSON.stringify($.seasonPass)), gameState.seasonPass);
+    }
+    if (accountId) $.accountId = accountId;
+    if (email) $.email = email;
+    $.accountName = accountName || null;
+    $.canTest = config.IS_DEV || isTesterEmail(email);
+    $.premiumUntil = premiumUntil || 0;
+    if (season) $.season = season;
+    if (serverTimestampSnapshot) {
+      const server = serverTimestampSnapshot + ($.clock.devOffset || 0);
+      $.clock = { ...$.clock, server, client: performance.now(), now: server };
+      $.season = seasonNumber(server);
+      $.isPremiumNow = $.premiumUntil > 0 && server < $.premiumUntil;
+      $.devSeasonOptions = buildSeasonOptions(server);
+    }
+    grantHeirloom();
+    $.gameStateLoaded = true;
+    fetchMyActiveTeamplay();
+  } catch ({ error }) {
+    window.notify?.(error);
+    $.token = undefined;
+    document.cookie = 'token=; Max-Age=0; path=/';
+  }
+};
+
+// window.__ROUTE__ is injected per dynamic page by vite.config (transformIndexHtml).
+const parseRoute = () => {
+  const path = window.location.pathname;
+  const template = window.__ROUTE__;
+  if (!template) return { route: path, routeParams: {} };
+  const pathSegments = path.split('/');
+  const routeParams = {};
+  template.split('/').forEach((segment, i) => {
+    if (segment.startsWith(':')) routeParams[segment.slice(1)] = pathSegments[i];
+  });
+  return { route: template, routeParams };
+};
+
+export default () => {
+  const { route, routeParams } = parseRoute();
+  const pageName =
+    route
+      .replace(/^\/|\/$/g, '')
+      .replace(/:(\w+)/g, '$1')
+      .replace(/\//g, '-') || 'home';
+
+  // Window globals for components and services
+  window.config = config;
+  window.Howl = Howl;
+  window.AUDIO = AUDIO;
+  window.playSoundSegment = playSoundSegment;
+  window.CHARACTERS = CHARACTERS;
+  window.ABILITIES_FN = ABILITIES;
+  window.EQUIPMENT_FN = EQUIPMENT;
+  window.EQUIPMENT = EQUIPMENT;
+  window.equipmentTooltipProps = equipmentTooltipProps;
+  window.abilityTooltipProps = abilityTooltipProps;
+
+  // Season helpers for markup bindings — all derive from clock.now so they react
+  // as the clock ticks (and as the tester dev clock jumps).
+  window.seasonNumber = seasonNumber;
+  window.seasonName = seasonName;
+  window.seasonMeta = seasonMeta;
+  window.seasonLabel = seasonLabel;
+  window.seasonProgress = seasonProgress;
+  window.isDowntime = isDowntime;
+  window.passDiscount = passDiscount;
+  window.passPrice = passPrice;
+  window.formatEUR = formatEUR;
+  window.PASS_PRICE = PASS_PRICE;
+  window.isPremium = () => $.premiumUntil > 0 && ($.clock.now || 0) < $.premiumUntil;
+  window.grantHeirloom = grantHeirloom;
+  // "Days left of current season" = playable days until downtime begins (the
+  // season's end), not until the next season starts.
+  window.daysLeftInSeason = () =>
+    Math.max(0, Math.ceil(msUntilDowntime($.clock.now || 0) / 86_400_000));
+  window.msUntilNextSeason = msUntilNextSeason;
+  window.formatDuration = (ms) => {
+    const total = Math.max(0, Math.ceil((ms || 0) / 1000));
+    const pad = (n) => String(n).padStart(2, '0');
+    const d = Math.floor(total / 86_400);
+    const h = Math.floor((total % 86_400) / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    return d > 0 ? `${d}d ${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(h)}:${pad(m)}:${pad(s)}`;
+  };
+
+  // Season Pass purchase — covers the current season. Payment is faked until
+  // Steam/Stripe; the notification shows the (discounted) amount for the record.
+  window.purchasePass = async () => {
+    if (window.isPremium()) return;
+    const price = passPrice($.clock.now || 0);
+    try {
+      const potionsBefore = allowedNumberOfPotions();
+      const { premiumUntil } = await $.socket.sendAsync('user/purchase-pass', {
+        token: $.token,
+        timeOffset: $.clock.devOffset || 0,
+      });
+      $.premiumUntil = premiumUntil || 0;
+      $.isPremiumNow = window.isPremium();
+      grantHeirloom();
+      // Retroactively fill the premium potion slots earned on levels already climbed.
+      const potionSlotsGained = allowedNumberOfPotions() - potionsBefore;
+      if (potionSlotsGained > 0)
+        $.potions = Math.min($.potions + potionSlotsGained, allowedNumberOfPotions());
+      window.notify?.success?.('Season Pass unlocked for this season!');
+      window.notify?.info?.(`${formatEUR(price)} paid`);
+      if (potionSlotsGained > 0)
+        window.notify?.info?.(
+          `+${potionSlotsGained} Potion slot${potionSlotsGained > 1 ? 's' : ''} unlocked`,
+          { icon: 'potion' },
+        );
+    } catch (e) {
+      window.notify?.(e?.error || 'Purchase failed');
+    }
+  };
+  // Tester premium toggle — persists to the account both ways so removal sticks
+  // across reloads (clear-pass drops it, purchase-pass grants the current season).
+  window.devTogglePremium = async () => {
+    const event = window.isPremium() ? 'user/clear-pass' : 'user/purchase-pass';
+    try {
+      const { premiumUntil } = await $.socket.sendAsync(event, {
+        token: $.token,
+        timeOffset: $.clock.devOffset || 0,
+      });
+      $.premiumUntil = premiumUntil || 0;
+      $.isPremiumNow = window.isPremium();
+      grantHeirloom();
+    } catch (e) {
+      window.notify?.(e?.error || 'Could not toggle premium');
+    }
+  };
+  window.seasonSchedule = () => {
+    const n = seasonNumber($.clock.now || 0);
+    return {
+      number: n,
+      name: seasonName(n),
+      start: seasonStart(n),
+      end: downtimeStart(n),
+      nextStart: seasonEnd(n),
+      msUntilNext: msUntilNextSeason($.clock.now || 0),
+    };
+  };
+
+  // Tester clock control. Jump to the start of a season (offset months from now)
+  // or into the current season's downtime; persist the offset and reload so auth
+  // re-routes storage to that season (fresh start) and the UI follows.
+  window.devJumpToSeason = (targetSeason) => {
+    const target = seasonStart(targetSeason) + 60 * 1000;
+    applyDevClock(target);
+  };
+  window.devJumpToDowntime = () => {
+    const n = seasonNumber($.clock.now || 0);
+    applyDevClock(downtimeStart(n) + 60 * 1000);
+  };
+  window.devResetClock = () => {
+    window.localStorage.removeItem('devClockOffset');
+    window.location.reload();
+  };
+
+  // Takes `characters` explicitly so a binding that passes $.characters tracks it
+  // as a dependency — Vibe doesn't track $ reads made inside a called function, so
+  // the array must be referenced in the binding expression for healing to re-enable.
+  window.brawlerKnockedOut = (uuid, characters = $.characters) => {
+    const ref = characters.find((c) => c.uuid === uuid);
+    if (!ref) return false;
+    try {
+      return CHARACTERS(ref, true).combatStats.currentHealth <= 0;
+    } catch {
+      return false;
+    }
+  };
+
+  window.anySelectedBrawlerKnockedOut = (characters = $.characters) =>
+    $.selectedBrawlers.some((uuid) => brawlerKnockedOut(uuid, characters));
+
+  window.fightDisabledReason = (allowed) => {
+    if (!$.selectedBrawlers.length) {
+      return allowed > 1
+        ? `Select up to ${allowed} brawlers to fight`
+        : 'Select a brawler to fight';
+    }
+    if (window.anySelectedBrawlerKnockedOut()) {
+      return 'One or more of your brawlers attending is at 0 or lower life';
+    }
+    return null;
+  };
+
+  window.showFightTooltip = (el) => {
+    if (window.teamplayElsewhere?.() === 'completed') return;
+    const reason = window.fightDisabledReason($.currentFight?.maxBrawlers || 1);
+    if (reason) {
+      window.showTooltip({ description: reason, plain: true }, el, { direction: 'up', lock: true });
+    }
+  };
+
+  window.showAbilityTooltip = (el, ability) => {
+    const charRef = $.characters[0];
+    const char = charRef ? CHARACTERS(charRef, true) : null;
+    const stats = char ? calculateCombatStatsByCharacter(char) : null;
+    window.showTooltip(abilityTooltipProps(ability, stats), el, { direction: 'up', lock: true });
+  };
+
+  window.showStatusTooltip = (el, status) => {
+    window.showTooltip(statusTooltipProps(status), el, { direction: 'up', lock: true });
+  };
+
+  window.showStatTooltip = (el, key) => {
+    const stat = STAT_DESCRIPTIONS[key];
+    if (!stat) return;
+    window.showTooltip(stat, el, { direction: 'up', lock: true });
+  };
+
+  window.iconCellTooltip = (el, tip) => {
+    if (!tip) return;
+    if (tip.crystal) return window.showCrystalTooltip(el);
+    if (tip.reward) return window.showRewardTooltip(el, tip.reward);
+    if (tip.stat) return window.showStatTooltip(el, tip.stat);
+    if (tip.info) return window.showTooltip(tip.info, el, { direction: 'up', lock: true });
+  };
+
+  // A hybrid (multi-element) ability paints its element colours as a spectrum
+  // rather than a single hue. Builds a CSS gradient from whatever elements are
+  // present (canonical order), in the tone the surface needs: 'face' (light tile
+  // background), 'glyph' (mid-tone icon fill), 'fill' (vivid progress fill),
+  // 'wash' (translucent tooltip base), 'icon' (the all-elements heading star —
+  // a conic sweep matching --element-rainbow, identical to the Heirloom's for
+  // the full set). Returns '' for <2 elements so single-element abilities keep
+  // their existing single-colour rendering untouched.
+  const ELEMENT_ORDER = ['fire', 'lightning', 'nature', 'frost', 'earth'];
+  window.elementSpectrum = (elements = [], mode = 'face') => {
+    const els = ELEMENT_ORDER.filter((e) => elements?.includes(e));
+    if (els.length < 2) return '';
+    if (mode === 'icon') {
+      const ring = [...els, els[0]].map((e) => `var(--element-${e})`).join(', ');
+      return `conic-gradient(from 90deg, ${ring})`;
+    }
+    const stop = {
+      face: (e) => `oklch(from var(--element-${e}) 0.95 0.045 h)`,
+      glyph: (e) => `oklch(from var(--element-${e}) 0.6 0.095 h)`,
+      fill: (e) => `oklch(from var(--element-${e}) 0.48 0.08 h)`,
+      wash: (e) => `oklch(from var(--element-${e}) l c h / 0.16)`,
+    }[mode];
+    return `linear-gradient(${mode === 'wash' ? 90 : 105}deg, ${els.map(stop).join(', ')})`;
+  };
+
+  window.showSignatureTooltip = (el) =>
+    window.showTooltip(
+      {
+        name: "Can't be removed",
+        description:
+          'This ability is a signature ability provided by one of your equipped weapons. It cannot be removed from your ability sequence.<br /><br />It is possible to move it to change the order of your abilities.',
+      },
+      el,
+      { direction: 'up', lock: true },
+    );
+
+  window.showCrystalTooltip = (el) =>
+    window.showTooltip(
+      { name: 'Crystal', description: 'The main currency of Battleborn Brawlers.' },
+      el,
+      { direction: 'up', lock: true },
+    );
+
+  window.showEquipmentTooltip = (el, eq) => {
+    const { id, level } = eq;
+    const item = EQUIPMENT(id, true, level ? { overrides: { level } } : undefined);
+    window.showTooltip(equipmentTooltipProps(item), el.querySelector('eq-link') || el, {
+      direction: 'up',
+      lock: true,
+    });
+  };
+
+  window.showCharacterScalingTooltip = (el, charId, ch, charScaling, equipScaling, isEnemy) => {
+    const charLevel = charScaling ? ch.level : 1;
+    const equipLevel = equipScaling ? ch.level : 0;
+    const ref = CHARACTERS(charId, false, {
+      overrides: {
+        npc: isEnemy,
+        level: charLevel,
+        equipment: {
+          mainHand: { overrides: { level: equipLevel } },
+          offHand: { overrides: { level: equipLevel } },
+          armor: { overrides: { level: equipLevel } },
+        },
+      },
+    });
+    const char = CHARACTERS(ref, true);
+    window.showTooltip(
+      {
+        name: char.name,
+        level: char.level || 0,
+        stats: combatStatsToList(calculateCombatStatsByCharacter(char)),
+        basicAbilities: [],
+        specialAbilities: [],
+      },
+      el.querySelector('eq-link') || el,
+      { direction: 'up', lock: true },
+    );
+  };
+  // ── Achievements ──────────────────────────────────────────────────────────
+  // Lifetime stats = every prior season's mirrored tree folded together, then the
+  // live current-season tree on top, so account (cross-season) thresholds read true
+  // running totals and can fire mid-game.
+  window.lifetimeStats = () => {
+    const current = seasonLabel($.season);
+    const prior = Object.entries($.accountStatistics || {})
+      .filter(([label]) => label !== current)
+      .reduce((acc, [, tree]) => mergeStats(acc, tree), {});
+    return mergeStats(prior, $.statistics || {});
+  };
+
+  window.achById = (id) => ACHIEVEMENTS_BY_ID[id];
+  window.achEarnedThisSeason = (id) => !!$.achievements?.[id];
+  window.achEarnedInPriorSeason = (id) => {
+    const current = seasonLabel($.season);
+    return Object.entries($.accountAchievements || {}).some(
+      ([label, map]) => label !== current && map?.[id],
+    );
+  };
+  window.achEarnedEver = (id) =>
+    window.achEarnedThisSeason(id) || window.achEarnedInPriorSeason(id);
+  // Seasonal counts as earned only when earned THIS season (it re-arms each season);
+  // account counts as earned once it's been earned in any season ever.
+  window.achEarned = (ach) =>
+    ach.scope === 'seasonal' ? window.achEarnedThisSeason(ach.id) : window.achEarnedEver(ach.id);
+  window.achProgressLive = (ach) =>
+    achProgress(ach, ach.scope === 'seasonal' ? $.statistics : window.lifetimeStats());
+
+  // Titles unlocked = the reward title of every achievement earned (ever) — derived,
+  // never stored separately.
+  window.unlockedTitles = () =>
+    ALL_ACHIEVEMENTS.filter((a) => a.reward?.title && window.achEarnedEver(a.id)).map(
+      (a) => a.reward.title,
+    );
+
+  window.showAchievementTooltip = (el, ach) => {
+    const { value, threshold, met } = window.achProgressLive(ach);
+    const fmt = (n) => Number(n).toLocaleString();
+    const status = met
+      ? '<span text-green>Completed</span>'
+      : `Progress — ${fmt(Math.floor(value))} / ${fmt(threshold)}`;
+    window.showTooltip(
+      { name: ach.title, description: `${ach.description}<br /><br />${status}` },
+      el,
+      {
+        direction: 'up',
+        lock: true,
+      },
+    );
+  };
+
+  const playReveal = (sound) => {
+    try {
+      new Howl({
+        src: [AUDIO[sound]],
+        volume: ($.settings?.volume?.sfx ?? 0.5) * ($.settings?.volume?.master ?? 0.5),
+      }).play();
+    } catch {}
+  };
+
+  // Tap the center pop-up → persist the earn, then deep-link to its place on the
+  // achievements page where the locked→earned flip plays.
+  window.followAchievementReveal = async (id) => {
+    $.achievementReveals = [];
+    await saveNow();
+    location.href = `/achievements?reveal=${id}`;
+  };
+  window.dismissAchievementReveal = (id) =>
+    ($.achievementReveals = $.achievementReveals.filter((r) => r.id !== id));
+  // The deep-link flip fires its own SFX off the CSS animation phases (no timers).
+  window.achRevealSfx = (e) => {
+    if (e.animationName.includes('Shake')) playReveal('Unspecified Impact Layer (1)');
+    if (e.animationName.includes('Flip')) playReveal('Victory Stinger 1');
+  };
+
+  const commitAchievement = (ach) => {
+    const now = $.clock.now || Date.now();
+    $.achievements = { ...$.achievements, [ach.id]: { earnedAt: now } };
+    // A seasonal achievement earned in a prior season just notifies on repeat; every
+    // genuine first-time unlock (all account + first-ever seasonal) gets the reveal.
+    if (ach.scope === 'seasonal' && window.achEarnedInPriorSeason(ach.id)) {
+      window.notify?.success?.(`${ach.title} earned again`, { icon: ach.icon });
+      playReveal('Fire & Shimmer');
+    } else {
+      // Denormalise the display fields so the reveal markup binds direct loop-alias
+      // properties (@[r.icon]) — a function call in an each-row name-binding aborts the
+      // row render in Vibe.
+      $.achievementReveals = [
+        ...$.achievementReveals,
+        { id: ach.id, at: now, icon: ach.icon, title: ach.title, description: ach.description },
+      ];
+      playReveal('Fire Themed GUI - Hammer Of Fire');
+    }
+  };
+
+  // Evaluate every not-yet-earned achievement against its scope's stat tree and unlock
+  // any whose threshold is now met. Runs whenever stats move (see afterUpdate below).
+  window.checkAchievements = () => {
+    if (!$.gameStateLoaded) return;
+    const lifetime = window.lifetimeStats();
+    ALL_ACHIEVEMENTS.forEach((ach) => {
+      const tree = ach.scope === 'seasonal' ? $.statistics : lifetime;
+      if (!achProgress(ach, tree).met) return;
+      const already =
+        ach.scope === 'seasonal' ? $.achievements?.[ach.id] : window.achEarnedEver(ach.id);
+      if (already) return;
+      commitAchievement(ach);
+    });
+  };
+
+  window.INITIAL_COMBAT = INITIAL_COMBAT;
+  window.calculateCombatStatsByCharacter = calculateCombatStatsByCharacter;
+  window.getLevelByExperience = getLevelByExperience;
+  window.getExperienceByLevel = getExperienceByLevel;
+  window.getCurrentExperienceAtLevel = getCurrentExperienceAtLevel;
+  window.getExperienceForNextLevel = getExperienceForNextLevel;
+  window.getExperienceReward = getExperienceReward;
+  window.allowedNumberOfBrawlers = allowedNumberOfBrawlers;
+  window.allowedNumberOfPotions = allowedNumberOfPotions;
+  window.isAccountPremium = isAccountPremium;
+  window.isDev = config.IS_DEV;
+
+  window.formatReleaseDate = formatReleaseDate;
+  window.releaseNotesGoTo = (page) => {
+    $.releaseNotes = releaseNotesPageData(page);
+    document.querySelector('release-notes-scroll')?.scrollTo({ top: 0 });
+  };
+  window.releaseNotesPrev = () => releaseNotesGoTo($.releaseNotes.page - 1);
+  window.releaseNotesNext = () => releaseNotesGoTo($.releaseNotes.page + 1);
+  window.releaseNotesBack = () => ($.overlay = { name: 'GameMenu' });
+
+  // Escape closes the top-most closable modal before falling back to the game menu.
+  // Component-local modals register a { open, close } probe keyed by name (re-mounts
+  // overwrite rather than stack). Mandatory modals like AccountName never register, so
+  // Escape can't dismiss them.
+  window.__escapeModals ||= {};
+  window.registerEscapeModal = (key, open, close) => {
+    window.__escapeModals[key] = { open, close };
+  };
+
+  // A brawler is "busy" while it's a participant in the current combat. Returns the
+  // activity descriptor (label + the overlay to open on click) or null when free.
+  window.brawlerActivity = (uuid) => {
+    if (!uuid || !$.combat?.duration) return null;
+    const fighting = $.combat.teamsStartState?.[0]?.combatants?.some((c) => c.uuid === uuid);
+    if (!fighting) return null;
+    const settled = $.elapsedMilliseconds >= $.combat.duration;
+    return { label: settled ? 'View outcome' : 'Brawling..', spinner: !settled, overlay: 'Combat' };
+  };
+
+  // Committed to a teamplay (waiting room, live, or a finished one not yet
+  // claimed/left) — locks the account out of other fights.
+  window.accountInTeamplay = () => !!$.pvp.teamplay.active;
+  // Returns the teamplay id if this brawler is one of mine in the active teamplay.
+  window.teamplayBrawler = (uuid) => {
+    const tp = $.pvp.teamplay.active;
+    if (!tp?.teams) return null;
+    const mine = tp.teams.some((team) =>
+      team.slots.some((slot) => slot.owner_id === $.accountId && slot.brawler?.uuid === uuid),
+    );
+    return mine ? tp._id : null;
+  };
+  // Badge label/action depend on whether the session is waiting, fighting, or done.
+  window.teamplayBrawlerLabel = () => {
+    const status = $.pvp.teamplay.active?.status;
+    return status === 'live' ? 'Brawling' : status === 'completed' ? 'View outcome' : 'In teamplay';
+  };
+  window.teamplayBrawlerClick = (uuid) => {
+    const tp = $.pvp.teamplay.active;
+    if (tp && (tp.status === 'live' || tp.status === 'completed')) window.resumeTeamplayCombat?.();
+    else if (teamplayBrawler(uuid)) location.href = '/teamplay/' + teamplayBrawler(uuid);
+  };
+  // A teamplay fight running or finished elsewhere — surfaced on the fight bar so you
+  // can keep brawling here while opening that combat. Returns its status, else null.
+  window.teamplayElsewhere = () => {
+    const status = $.pvp.teamplay.active?.status;
+    return status === 'live' || status === 'completed' ? status : null;
+  };
+
+  // Tester-only: copy the current combat's seed so a run can be reproduced by pasting
+  // it back into the fight bar's seed input.
+  window.copyCombatSeed = () => {
+    const seed = $.combat?.seed;
+    if (!seed) return;
+    navigator.clipboard?.writeText(seed);
+    notify.success('Seed copied');
+  };
+
+  window.isPotionBrewer = (uuid) =>
+    $.accountRewards >= 5 && $.buildings.medicum.assignedBrawlers.includes(uuid);
+  window.isPalaestraTrainer = (uuid) =>
+    $.accountRewards >= 10 && $.buildings.palaestra.assignedBrawlers.includes(uuid);
+
+  // Busy brawlers route to their activity (the combat overlay) instead of the
+  // detail page. Free brawlers let the link navigate normally.
+  window.brawlerClick = (e, uuid) => {
+    const activity = brawlerActivity(uuid);
+    if (!activity) return;
+    e?.preventDefault();
+    $.overlay = { name: activity.overlay };
+  };
+
+  window.selectBrawler = (e, uuid) => {
+    // Cleared here — not on pointerup — so the release lands in the same update
+    // batch as the selection change; sword one keeps its animation instead of
+    // restarting when [armed] hands over to :not(:disabled).
+    $.selectPress = false;
+    if (!$.maxBrawlers || !uuid) return;
+    e?.preventDefault();
+    e?.stopPropagation();
+    if (brawlerActivity(uuid)) return;
+    // A brawler tied up brewing potions at the Medicum or training at the
+    // Palaestra is unavailable for fights; free them via that page's cross first.
+    if (isPotionBrewer(uuid) || isPalaestraTrainer(uuid)) return;
+    if ($.selectedBrawlers.includes(uuid)) {
+      $.selectedBrawlers = $.selectedBrawlers.filter((id) => id !== uuid);
+    } else if ($.selectedBrawlers.length < $.maxBrawlers) {
+      $.selectedBrawlers = [...$.selectedBrawlers, uuid];
+    }
+    // Rebuild immediately so the slot flips in the same frame as the click — the
+    // flip flag survives because committedKeys is only advanced post-paint.
+    if (window.updateFightSlots) updateFightSlots();
+  };
+
+  // Brawler card-hand selection (shared by the FightButton fight bar and the
+  // Medicum's brewer picker). The brewer is excluded so they can't be drafted
+  // into a fight while tied up at the Medicum.
+  const characterToCard = (ref) => {
+    const char = CHARACTERS(ref, true);
+    return {
+      id: ref.uuid,
+      uuid: ref.uuid,
+      name: char.name,
+      image: char.image,
+      x: char.mugshot.x,
+      y: char.mugshot.y,
+    };
+  };
+
+  window.brawlHandCards = (characters = $.characters, selectedBrawlers = $.selectedBrawlers) =>
+    (characters || [])
+      .filter(
+        (c) =>
+          !selectedBrawlers.includes(c.uuid) &&
+          !isPotionBrewer(c.uuid) &&
+          !isPalaestraTrainer(c.uuid),
+      )
+      .map(characterToCard);
+
+  window.handCardPress = (e) => {
+    const uuid = e.target.closest('[data-card-id]')?.dataset.cardId;
+    if (!uuid) return;
+    $.selectPress =
+      $.combat.duration === 0 && !brawlerKnockedOut(uuid) && !anySelectedBrawlerKnockedOut();
+  };
+  window.handCardCancel = () => ($.selectPress = false);
+  window.handCardClick = (e) => {
+    const uuid = e.target.closest('[data-card-id]')?.dataset.cardId;
+    if (uuid) selectBrawler(e, uuid);
+  };
+
+  if (!window.__brawlHandReleaseBound) {
+    window.__brawlHandReleaseBound = true;
+    document.addEventListener('pointerup', (e) => {
+      if ($.selectPress && !e.target.closest?.('[data-card-id]')) $.selectPress = false;
+    });
+  }
+
+  // Restore token from cookie BEFORE vibe initializes so the first hydration
+  // already knows we're logged in — avoids a login-screen flash before the
+  // ready hook would otherwise restore it.
+  const cookie = getCookie();
+
+  // Compiled mode is detectable by the absence of the [vibe-fouc] marker — the
+  // compiler strips it at build, runtime keeps it until PHASE_READY. Capture it
+  // now, before hydration removes it, so the COMPILED badge reflects load time.
+  const compiled = !document.querySelector('[vibe-fouc], .vibe-fouc');
+
+  window.$ = vibe(
+    {
+      ...appState,
+      compiled,
+      token: cookie?.token,
+      page: { name: pageName, params: routeParams },
+    },
+    { debug: false, noCache: false },
+  );
+
+  // Force synchronous boot so window.$ is the real proxy immediately
+  // (vibe() defers boot to a microtask, but page scripts need $ right away)
+  window.$ = vibeBoot();
+
+  // Tester season clock — persisted so a jump survives reloads (e.g. to test the
+  // downtime screen after refresh). Folded into the clock anchor on auth.
+  $.clock.devOffset = +window.localStorage.getItem('devClockOffset') || 0;
+
+  // Media queries
+  const queries = {
+    desktop: '(min-width: 1200px)',
+    tablet: '(min-width: 768px) and (max-width: 1199px)',
+    smartphone: '(max-width: 767px)',
+    landscape: '(orientation: landscape)',
+    portrait: '(orientation: portrait)',
+    hoverable: '(hover: hover)',
+  };
+
+  const mqls = {};
+  const updateMedia = () => {
+    const media = {};
+    Object.keys(mqls).forEach((key) => {
+      media[key] = mqls[key].matches;
+    });
+    try {
+      $.mqs = media;
+    } catch {}
+  };
+  Object.keys(queries).forEach((key) => {
+    mqls[key] = window.matchMedia(queries[key]);
+    mqls[key].addEventListener('change', updateMedia);
+  });
+
+  // Initialize services (keystroke handling lives in <Keystrokes> component, mounted via Layout)
+  initInputMode();
+  initCombatLoop();
+  initSocket();
+  initAmbient();
+
+  $.on('ready', () => {
+    updateMedia();
+
+    // Apply dark mode from saved settings
+    document.body.toggleAttribute('dark', !!$.settings?.darkMode);
+    document.body.toggleAttribute('light', !$.settings?.darkMode);
+
+    // Discrete key actions all ride the global `keys` state seeded by
+    // <Keystrokes>. Registering them here in boot — never in a component script —
+    // keeps the listeners alive for the page's lifetime in BOTH runtime and
+    // compiled modes (a component-script `$.on` is dropped by the compiled
+    // component-lifecycle pass, which is why pressing `i` did nothing there).
+    onKeyPress('keyi', () => {
+      $.inventoryOpen = !$.inventoryOpen;
+      window.hideTooltip?.();
+    });
+
+    onKeyPress('escape', () => {
+      if ($.promptModal?.open) return window.promptModalCancel?.();
+      const modal = Object.values(window.__escapeModals).find((m) => m.open());
+      if (modal) return modal.close();
+      if (!$.gameKeyboardDisabled) {
+        $.overlay = Object.keys($.overlay).length ? {} : { name: 'GameMenu' };
+      }
+    });
+
+    // Dev chords stay a direct listener: modifier combos + preventDefault don't
+    // fit the single-key rising-edge `keys` model. Match on e.code so we don't
+    // have to deal with Option producing the special `∂` character on macOS.
+    document.addEventListener('keydown', (e) => {
+      if ((window.isDev || $.settings.isTester) && e.shiftKey && e.altKey && e.code === 'KeyD') {
+        e.preventDefault();
+        $.settings.devbarOpen = !$.settings.devbarOpen;
+      }
+      if ((window.isDev || $.settings.isTester) && e.shiftKey && e.altKey && e.code === 'KeyS') {
+        e.preventDefault();
+        $.vibeStateInspector = !$.vibeStateInspector;
+      }
+    });
+
+    // Holding Alt/Option reveals extra detail in tooltips. The pressed state
+    // lives in global `keys` state so components can react to it; afterUpdate
+    // mirrors it onto a `body[alt-down]` attribute that drives the CSS reveal.
+    // Clear on blur so the state doesn't stick if the key-up lands elsewhere.
+    const setAlt = (on) => $.keys.alt !== on && ($.keys = { ...$.keys, alt: on });
+    document.addEventListener('keydown', (e) => e.key === 'Alt' && setAlt(true));
+    document.addEventListener('keyup', (e) => e.key === 'Alt' && setAlt(false));
+    window.addEventListener('blur', () => setAlt(false));
+
+    // Client clock. Once authenticated we run off the server anchor; before that
+    // (the login screen) we approximate from the client's own wall time so the
+    // Season tag and overlay can render pre-login. The server re-anchors on auth.
+    setInterval(() => {
+      $.clock.now = $.clock.server
+        ? $.clock.server + (performance.now() - $.clock.client)
+        : Date.now() + ($.clock.devOffset || 0);
+      const n = seasonNumber($.clock.now);
+      if (n !== $.season) $.season = n;
+      const prem = $.premiumUntil > 0 && $.clock.now < $.premiumUntil;
+      if (prem !== $.isPremiumNow) $.isPremiumNow = prem;
+    }, 250);
+  });
+
+  $.on('afterUpdate', (current, prev) => {
+    if (current.keys.alt !== prev.keys.alt) {
+      document.body.toggleAttribute('alt-down', current.keys.alt);
+    }
+
+    if (current.bossHighscore !== prev.bossHighscore) {
+      document.body.toggleAttribute('the-wild', (current.bossHighscore || 0) >= 15);
+      if (current.bossHighscore)
+        incStat('progression.bossHighscore.amount', { max: current.bossHighscore });
+    }
+
+    if (
+      current.combat?.fightId !== prev.combat?.fightId ||
+      current.bossHighscore !== prev.bossHighscore ||
+      current.season !== prev.season
+    ) {
+      const fight =
+        current.combat?.fightId &&
+        seasonArena(current.season).find((f) => f.id === current.combat.fightId);
+      document.body.toggleAttribute(
+        'combat-the-wild',
+        fight ? fight.minLevel >= 16 : (current.bossHighscore || 0) >= 15,
+      );
+    }
+
+    if (current.cutscene !== prev.cutscene) {
+      document.body.toggleAttribute('cutscene-open', !!current.cutscene);
+    }
+
+    const justConnected = current.socket && !prev.socket && current.token;
+    const justGotToken = current.token && !prev.token && current.socket;
+    if (justConnected || justGotToken) {
+      loadGameState(current.token);
+    }
+
+    try {
+      const level = getLevelByExperience(current.experience || 0);
+      const prevLevel = getLevelByExperience(prev.experience || 0);
+      if (level !== prevLevel) incStat('progression.level.amount', { max: level });
+      if (level > prevLevel && prev.experience > 0) {
+        $.overlay = { name: 'AccountProgression' };
+        $.characters.forEach((c) => {
+          try {
+            correctHealth(c);
+          } catch {}
+        });
+        try {
+          new Howl({
+            src: [AUDIO['Fire & Shimmer']],
+            volume: ($.settings?.volume?.sfx ?? 0.5) * ($.settings?.volume?.master ?? 0.5),
+          }).play();
+        } catch {}
+      }
+    } catch {}
+
+    // Sync data-src → src (runtime mode ships raw @[…] in eager URL attrs, which
+    // the browser would prefetch before hydration — data-src defers that to here)
+    document.querySelectorAll('img[data-src], video[data-src]').forEach((el) => {
+      const ds = el.dataset.src;
+      if (ds && !ds.endsWith('/') && !ds.includes('@[') && el.src !== ds && !el.src.endsWith(ds))
+        el.src = ds;
+    });
+  });
+
+  // Unlock achievements the moment their underlying stats cross the threshold. Gated on
+  // stats moving (or the just-loaded transition) so it isn't re-run on every flush; the
+  // commit reassigns $.achievements, which the page + reveal bind to reactively.
+  $.on('afterUpdate', (current, prev) => {
+    if (!current.gameStateLoaded) return;
+    if (
+      current.statistics !== prev.statistics ||
+      current.accountStatistics !== prev.accountStatistics ||
+      current.gameStateLoaded !== prev.gameStateLoaded
+    )
+      window.checkAchievements();
+  });
+
+  // Account-progression carousel: scroll to the first claimable level each time the
+  // overlay opens. The trigger lives here (runs once per page in both modes) because
+  // compiled mode executes a component's script only once — re-arming on every open
+  // has to come from a persistent subscription. afterUpdate lands it in compiled
+  // mode (slides are pre-rendered, scrollable as soon as the overlay shows); runtime
+  // mode renders the slides via DOM mutation afterwards, so afterDomMutation lands it.
+  let scrollToClaimable = false;
+  let animateScroll = false;
+
+  // easeOutBack: eases to the target, overshooting slightly past it before settling.
+  const easeOutBack = (t) => {
+    const c1 = 1.70158;
+    return 1 + (c1 + 1) * (t - 1) ** 3 + c1 * (t - 1) ** 2;
+  };
+
+  // Glide the carousel to centre a slide with an overshoot. Scroll-snap is switched
+  // off for the tween — mandatory snapping would fight the per-frame scrollLeft — then
+  // restored, re-holding the target (itself a snap point).
+  const glideToSlide = (el, target) => {
+    const to = Math.max(0, target.offsetLeft - (el.clientWidth - target.offsetWidth) / 2);
+    const from = el.scrollLeft;
+    if (Math.abs(to - from) < 1) return;
+    el.style.scrollSnapType = 'none';
+    const startedAt = performance.now();
+    const frame = (now) => {
+      const t = Math.min(1, (now - startedAt) / 520);
+      el.scrollLeft = from + (to - from) * easeOutBack(t);
+      if (t < 1) requestAnimationFrame(frame);
+      else el.style.scrollSnapType = '';
+    };
+    requestAnimationFrame(frame);
+  };
+
+  const scrollProgression = (animate) => {
+    const el = document.querySelector('[progression-scroll] slides');
+    if (!el) return false;
+    // On reopen the track mounts in stages — the full-width <progression-xp> bar
+    // lands first (one scrollable child), so gate on the whole slide set being
+    // present, else scrollIntoView centers the bar → mid-track (level 13).
+    const slides = el.querySelectorAll('slide');
+    if (slides.length < MAX_LEVEL) return false;
+    // Reading scrollWidth flushes layout — wait until the track is scrollable.
+    if (el.scrollWidth <= el.clientWidth) return false;
+    const level = getLevelByExperience($.experience);
+    const target = slides[Math.min($.accountRewards + 1, level) - 1];
+    if (!target) return false;
+    if (animate) glideToSlide(el, target);
+    else target.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'center' });
+    document.documentElement.style.setProperty(
+      '--progression-sb',
+      el.offsetHeight - el.clientHeight + 'px',
+    );
+    return true;
+  };
+
+  $.on('afterUpdate', (current, prev) => {
+    const opening = current.overlay?.name === 'AccountProgression';
+    if (opening && prev.overlay?.name !== 'AccountProgression') {
+      scrollToClaimable = true;
+      animateScroll = false;
+    }
+    // A claim bumps accountRewards — glide to the next claimable card with an overshoot
+    // (in runtime mode the slides also rebuild, resetting scrollLeft, so re-assert it).
+    if (opening && current.accountRewards !== prev.accountRewards) {
+      scrollToClaimable = true;
+      animateScroll = true;
+    }
+    if (!opening) scrollToClaimable = false;
+    if (scrollToClaimable && scrollProgression(animateScroll)) scrollToClaimable = false;
+  });
+  $.on('afterDomMutation', () => {
+    if (scrollToClaimable && scrollProgression(animateScroll)) scrollToClaimable = false;
+  });
+};
diff --git a/js/combat-loop.js b/js/combat-loop.js
new file mode 100644
index 00000000..edc72747
--- /dev/null
+++ b/js/combat-loop.js
@@ -0,0 +1,623 @@
+import { COMBAT_TICK_TIME } from '/js/constants/APP.js';
+import STATUS_EFFECTS, { STATUS_ORDER, isStandaloneStatus } from '/js/constants/STATUS_EFFECTS.js';
+import { seededRandom } from '/js/utils.js';
+import {
+  COMBAT_RING_TILT,
+  COMBAT_OUTER_RING_TILT,
+  COMBAT_RING_DEPTH_SCALE,
+  COMBAT_RING_BASE_RADIUS,
+  COMBAT_CARD_ALPHA_NEAR,
+  COMBAT_CARD_ALPHA_FAR,
+} from '/js/constants/APP.js';
+
+// Lead time (ms) for showing a freshly applied status. The status-pop
+// animation (animations.css, 400ms) is clearly visible from its overshoot
+// peak at ~60%, so this lead makes the chip read as arriving exactly when
+// the ability connects, like the hit-marker flash.
+const STATUS_POP_LEAD = 150;
+
+export const getGeometry = (n) => ({
+  scale: 1 / (1 + Math.log2(Math.max(1, n / 8))),
+});
+
+// Perspective foreshortening of the ring, gated per-combat by combat.perspectiveEnabled.
+// Off only when explicitly disabled (the preview switch); every real combat tilts by
+// default. Applied at display time so it composes with rotateCombatToViewer's rotation.
+const ringTilt = () => ($.combat?.perspectiveEnabled === false ? 1 : COMBAT_RING_TILT);
+// The outer team-label ring's tilt — only ever a CSS cue (no JS positions ride it).
+const outerTilt = () => ($.combat?.perspectiveEnabled === false ? 1 : COMBAT_OUTER_RING_TILT);
+
+// Team counts divisible by 4 (4, 8, 12, …) otherwise seat a team on the pure vertical
+// axis (dead top and bottom). We spin the ring half a slot (rotation/2 = 180/teamCount) so
+// the teams straddle the vertical centre line evenly — none on it, half each side — and
+// the player lands lower-left (315° for 4 teams → the X; 292.5° for 8). Applies in both
+// modes (it's a layout choice, not a perspective cue). ringPosition's angle convention
+// (x = sinθ, y = cosθ); applied at display time, so it composes with the viewer rotation.
+export const ringAngleOffset = (teamCount) =>
+  teamCount >= 4 && teamCount % 4 === 0 ? 180 / teamCount : 0;
+
+// Perspective depth scaling: nearer combatants (bottom of the ring, +y) render larger,
+// farther ones (top, -y) smaller — linear in the un-squashed circle-space y (the true
+// depth, already viewer-rotated). No-op when perspective is off.
+const depthScale = (y) =>
+  $.combat?.perspectiveEnabled === false
+    ? 1
+    : 1 + COMBAT_RING_DEPTH_SCALE * (y / COMBAT_RING_BASE_RADIUS);
+
+// Glass-card opacity by depth: most translucent nearest the camera (bottom of the ring,
+// at the NEAR floor) and most opaque farthest away (top, at FAR). Full FAR (opaque) when
+// perspective is off, so cards read as ordinary glass.
+const cardAlpha = (y) => {
+  if ($.combat?.perspectiveEnabled === false) return COMBAT_CARD_ALPHA_FAR;
+  const near = (y / COMBAT_RING_BASE_RADIUS + 1) / 2;
+  return COMBAT_CARD_ALPHA_FAR + (COMBAT_CARD_ALPHA_NEAR - COMBAT_CARD_ALPHA_FAR) * near;
+};
+
+// Backdrop-blur ("glassiness") factor 0..1: none at the front (closest, no glass) up to
+// full at the back. Full glass when perspective is off.
+const cardBlur = (y) => {
+  if ($.combat?.perspectiveEnabled === false) return 1;
+  return 1 - (y / COMBAT_RING_BASE_RADIUS + 1) / 2;
+};
+
+// Compute enriched per-combatant render props from the raw liveTeams shape.
+// `upcoming` is the same combatant in the next pending event (if it lands
+// within STATUS_POP_LEAD) — its statuses render in place of the current ones.
+export const enrichCombatant = (c, ti, ci, elapsed, scale, team, upcoming) => {
+  const pos = c.position || { x: 0, y: 0, rot: 0 };
+  // The ring is foreshortened at display time: positions are computed and viewer-rotated
+  // on a flat circle (so rotateCombatToViewer's rigid rotation stays valid), then every y
+  // is squashed by the ring tilt here, turning the circle into a vertical-minor ellipse
+  // without distorting the rotation maths or squashing the sprites.
+  const tilt = ringTilt();
+  // 4-team perspective spins the ring onto the diagonals (see ringAngleOffset): rotate the
+  // circle position by the offset, then squash y. rot picks up the same offset so depth (z)
+  // and facing follow. offset is 0 in every other case, leaving positions untouched.
+  const offDeg = ringAngleOffset($.liveTeams?.length || 0);
+  const offRad = (offDeg * Math.PI) / 180;
+  const cosO = Math.cos(offRad);
+  const sinO = Math.sin(offRad);
+  const x = pos.x * cosO + pos.y * sinO;
+  // ry is the rotated circle-space depth (pre-squash) — the true near/far signal once the
+  // diagonal spin is applied, so the depth cues (size, alpha, blur) read it, not pos.y.
+  const ry = pos.y * cosO - pos.x * sinO;
+  const y = ry * tilt;
+  const rot = pos.rot + offDeg;
+
+  // Stack cards by the same near/far depth the glass cues read (ry): nearer the camera
+  // (larger ry, bottom of the ring) ⇒ higher z-index, so a closer card always overlaps a
+  // farther one. The old z keyed off facing angle, so overlapping cards mis-stacked.
+  const z = 1 + Math.round(((ry / COMBAT_RING_BASE_RADIUS + 1) / 2) * 999);
+  const angleDiff = ((rot - 0 + 540) % 360) - 180;
+  const facingRight = angleDiff < 0;
+
+  const abilitiesCopied = c.abilitiesCopied || [];
+  const totalTime =
+    (c.abilities || []).reduce((acc, a) => acc + (a.ticks || 0), 0) * COMBAT_TICK_TIME || 1;
+  const individualProgress =
+    ((c.statuses?.knockedOut ? c.statuses.knockedOut : elapsed) / totalTime) % 1;
+
+  const anims = c.animations || [];
+  const activeByName = (name) =>
+    anims.find((a) => a.start < elapsed && a.end > elapsed && a.vfxName === name);
+
+  const attackAnim = anims.find(
+    (a) =>
+      a.start < elapsed &&
+      a.end > elapsed &&
+      [
+        'basicAttackFast',
+        'basicAttackRegular',
+        'basicAttackSlow',
+        'pounce',
+        'whirlwind',
+        'boom',
+      ].includes(a.vfxName),
+  );
+
+  // Compute attack start/end points (for sprite charge animation) — the target rides the
+  // same diagonal spin + squash as the combatant so the lunge vector stays true.
+  const tgtX = attackAnim?.targetX ?? pos.x;
+  const tgtY = attackAnim?.targetY ?? pos.y;
+  const tx = tgtX * cosO + tgtY * sinO;
+  const ty = (tgtY * cosO - tgtX * sinO) * tilt;
+  const dX = tx - x,
+    dY = ty - y;
+  const distance = Math.hypot(dX, dY) || 1;
+  const ux = dX / distance,
+    uy = dY / distance;
+  const pouncing = attackAnim?.vfxName === 'pounce';
+  let anticipate = 0;
+  if (attackAnim?.vfxName === 'basicAttackSlow') anticipate = 50;
+  if (attackAnim?.vfxName === 'basicAttackRegular') anticipate = 30;
+  if (attackAnim?.vfxName === 'basicAttackFast') anticipate = 10;
+  if (pouncing) anticipate = 16;
+  const attackStartX = x - ux * anticipate;
+  const attackStartY = y - uy * anticipate;
+  const step = Math.min(pouncing ? 14 : 5, distance);
+  const attackEndX = x + ux * step;
+  const attackEndY = y + uy * step;
+  const attackDuration = (attackAnim?.end || 0) - (attackAnim?.start || 0);
+
+  const isStunned = (c.statuses?.stunned?.ticks || 0) > 0 || (c.statuses?.confused?.ticks || 0) > 0;
+  const immobilized = isStunned || (c.statuses?.cocooned?.ticks || 0) > 0;
+
+  // Single active attack animation class (gated by not-stunned)
+  const attackClass = !isStunned && attackAnim ? attackAnim.vfxName : '';
+  const attackAnimationName = attackClass ? `bb-${attackClass}` : 'none';
+  const attackAnimationDuration = attackClass === 'whirlwind' ? '500ms' : `${attackDuration}ms`;
+  const stompAnim = activeByName('stomp');
+  const stomping = !isStunned && !!stompAnim;
+  const stompDuration = stompAnim ? stompAnim.end - stompAnim.start : 0;
+  const catchAnim = activeByName('catchThrow');
+  const catching = !isStunned && !!catchAnim;
+  const catchDuration = catchAnim ? catchAnim.end - catchAnim.start : 0;
+  const hatching = !!activeByName('hatch');
+  const hurtActive = !!activeByName('hurt');
+  const blockActive = !!activeByName('block');
+  const attackBlockedActive = !!activeByName('attackBlocked');
+  const whirlwindActive = !!activeByName('whirlwind');
+  const spinAnim = activeByName('spin');
+  const spinning = !isStunned && !!spinAnim;
+  const spinDuration = spinAnim ? spinAnim.end - spinAnim.start : 0;
+  const attackDodgedActive = !!activeByName('attackDodged');
+  const attackMissedActive = !!activeByName('attackMissed');
+  const chargeAnim = activeByName('abilityCharge');
+  const recoverAnim = activeByName('abilityRecover');
+  const releasingActive = !!activeByName('abilityRelease');
+  const animProgress = (a) =>
+    a ? Math.min(1, (elapsed - a.start) / Math.max(1, a.end - a.start)) : 0;
+
+  // Health-bar floaters — collect all active hurt/armorHurt/heal/attackMissed animations.
+  const floaters = anims
+    .filter(
+      (a) =>
+        a.start < elapsed &&
+        a.end > elapsed &&
+        [
+          'hurt',
+          'armorHurt',
+          'heal',
+          'fullHealth',
+          'mend',
+          'attackMissed',
+          'attackDodged',
+          'attackBlocked',
+        ].includes(a.vfxName),
+    )
+    .map((a) => {
+      const healthFraction = a.healthFraction || 0;
+      // <40% of total health: normal. 41-80%: +25%. 81%+: +50%. Crits add a
+      // further 25% on top.
+      const sizeScale =
+        (healthFraction < 0.4 ? 1 : healthFraction <= 0.8 ? 1.25 : 1.5) * (a.isCritical ? 1.25 : 1);
+      return {
+        id: a.id,
+        vfxName: a.vfxName,
+        amount: a.amount || 0,
+        prevented: !!a.prevented,
+        isCritical: !!a.isCritical,
+        healthFraction,
+        sizeScale,
+        random: seededRandom(0, 1, a.id || '0', 0.001), // stable pseudo-random from the (deterministic) id
+        dir: facingRight ? -1 : 1,
+      };
+    });
+
+  // Within the lead window, render the upcoming event's statuses wholesale —
+  // adds, expiries and threshold conversions all flip atomically, one lead
+  // ahead of the tick they belong to. Converting pairs sit adjacent in
+  // STATUS_DISPLAY_ORDER, so a conversion swaps in place without re-fanning.
+  const displayStatuses = upcoming?.statuses || c.statuses;
+
+  const buildStatus = (k, def) => {
+    const rec = displayStatuses?.[k];
+    return {
+      statusKey: k,
+      key: `${k}-${rec?.instance || 0}`,
+      name: def.name || def.text,
+      description: def.description || '',
+      icon:
+        def.kind === 'threshold' ? STATUS_EFFECTS[def.convertsInto]?.icon || def.icon : def.icon,
+      category: def.category,
+      standalone: isStandaloneStatus(k),
+      permanent: !!def.permanent,
+      ticks: rec?.ticks || 0,
+      value: rec?.value || 0,
+      max: rec?.max || 0,
+      announce: rec?.announce,
+    };
+  };
+
+  // Threshold + permanent (End game) statuses show while their value is set;
+  // tick-counted ones disappear the moment their countdown hits 0.
+  const statusDisplay = STATUS_ORDER.map((k) => buildStatus(k, STATUS_EFFECTS[k])).filter((s) =>
+    s.max > 0 || s.permanent ? s.value > 0 : s.ticks > 0,
+  );
+
+  // Flatten ability cells for the AbilityBar (keyed by uuid, sized by ticks).
+  const abilityCells = abilitiesCopied.map((a, i) => {
+    const chainLink = a.chainLink || 0;
+    const chainDividers =
+      chainLink > 1
+        ? Array.from(
+            { length: chainLink - 1 },
+            (_, j) => `${(((j + 1) / chainLink) * 100).toFixed(4)}%`,
+          )
+        : [];
+    return {
+      uuid: `${a.id || 'a'}-${i}`,
+      id: a.id || '',
+      name: a.name || '',
+      statusEffects: a.statusEffects || [],
+      icon: a.icon || 'claw',
+      ticks: a.ticks || 1,
+      elements: a.elements || [],
+      chainDividers,
+    };
+  });
+
+  // Knocked-out: filter grayscale (status flag is set mid-combat; HP fallback covers post-combat / restored states)
+  const knockedOut = !!c.statuses?.knockedOut || (c.combatStats?.currentHealth || 0) <= 0;
+
+  // Provocation-weighted chance of being targeted, among still-living teammates.
+  // Mirrors the combat picker: an attack on this team lands on each member with
+  // probability provocation / sum(team provocation). Recomputes live as allies fall.
+  const livingTeammates = (team?.combatants || []).filter(
+    (m) => (m.combatStats?.currentHealth || 0) > 0,
+  );
+  const teamProvocation = livingTeammates.reduce(
+    (acc, m) => acc + (m.combatStats?.provocation || 0),
+    0,
+  );
+  const provocation = c.combatStats?.provocation || 0;
+  const provocationChance = !knockedOut && teamProvocation > 0 ? provocation / teamProvocation : 0;
+  const showProvocation = livingTeammates.length > 1 && !knockedOut;
+
+  // Precompute image URL (main is `/images/races/{image}`, here `/static/images/races/{image}`)
+  const imageUrl = c.image ? `/static/images/races/${c.image}` : '';
+
+  const size = c.size || 1;
+  const spriteHeight = 144 * size;
+
+  return {
+    cardId: `${ti}-${ci}`,
+    id: c.id || `${ti}-${ci}`,
+    name: c.name,
+    damage: c.damage || 0,
+    currentHealth: c.combatStats?.currentHealth || 0,
+    bufferedHealth: c.combatStats?.bufferedHealth || 0,
+    maxHealth: c.combatStats?.maxHealth || 0,
+    currentArmor: c.combatStats?.currentArmor || 0,
+    maxArmor: c.combatStats?.maxArmor || 0,
+    armorHit: floaters.some((f) => f.vfxName === 'armorHurt'),
+    provocationChance: Math.round(provocationChance * 100),
+    showProvocation,
+    knockedOut,
+    immobilized,
+    facingRight,
+    x,
+    y,
+    z,
+    rot,
+    scale: scale * depthScale(ry),
+    glassAlpha: cardAlpha(ry),
+    glassBlur: cardBlur(ry),
+    // Sprite offsets / vars for position transform
+    spriteHeight,
+    attackClass,
+    attackAnimationName,
+    attackAnimationDuration,
+    stomping,
+    stompDuration,
+    stompAnimId: stomping ? stompAnim.id : '',
+    stompProgress: stomping ? animProgress(stompAnim) : 0,
+    catching,
+    catchDuration,
+    hatching,
+    attackStartX,
+    attackStartY,
+    attackEndX,
+    attackEndY,
+    attackDuration,
+    dir: facingRight ? 1 : -1,
+    attackAnimId: attackAnim?.id || '',
+    hurtActive,
+    blockActive,
+    attackBlocked: attackBlockedActive,
+    whirlwindActive,
+    spinning,
+    spinDuration,
+    attackDodgedActive,
+    attackMissedActive,
+    charging: !!chargeAnim,
+    chargeProgress: animProgress(chargeAnim),
+    recovering: !!recoverAnim,
+    recoverProgress: animProgress(recoverAnim),
+    releasing: releasingActive,
+    floaters,
+    statusDisplay,
+    abilityCells,
+    individualProgress,
+    image: c.image || '',
+    imageUrl,
+    uuid: c.uuid,
+    spawned: !!c.spawned,
+  };
+};
+
+export const init = () => {
+  let animationId = null;
+  let lastTimestamp = 0;
+  let audioQueue = [];
+  let playingNonce = null; // replayNonce of the combat currently mounted; a new one (re)starts
+  const retriggered = new Map(); // cardId -> last animId seen
+  const shaken = new Set(); // floater ids that already shook the screen
+
+  const updateCombatDisplay = () => {
+    const teams = $.liveTeams;
+    if (!teams?.length) return;
+
+    const totalCombatants = teams.reduce((a, t) => a + (t.combatants?.length || 0), 0);
+    const { scale } = getGeometry(totalCombatants);
+    document.documentElement.style.setProperty('--combat-scale', scale);
+    document.documentElement.style.setProperty('--combat-tilt', ringTilt());
+    document.documentElement.style.setProperty('--combat-outer-tilt', outerTilt());
+
+    const elapsed = $.elapsedMilliseconds;
+
+    const nextEvent = $.combat.events?.[0];
+    const lookahead =
+      nextEvent && nextEvent.eventTimestamp - elapsed < STATUS_POP_LEAD ? nextEvent.teams : null;
+
+    const cards = teams.flatMap((team, ti) => {
+      return (
+        team.combatants?.map((c, ci) => {
+          // Card frame tracks toughness — count-scale (P/E) and boss bonus, clamped to
+          // [1, 2]. Low-`power` adds (eggs, chaff) drop to 0.75 so they read as minor;
+          // brawlers and regular foes stay at 1.
+          const power = c.power ?? 1;
+          const frame =
+            power < 1
+              ? 0.75
+              : Math.min(2, Math.max(1, (c.countScale ?? 1) * power * (c.boss ? 1.5 : 1)));
+          return enrichCombatant(
+            c,
+            ti,
+            ci,
+            elapsed,
+            scale * frame,
+            team,
+            lookahead?.[ti]?.combatants?.[ci],
+          );
+        }) || []
+      );
+    });
+
+    $.combatCards = cards;
+
+    // Arena-level thrown projectiles (Catch!'s dynamite, etc.) live in the same
+    // animation stream as sprite VFX. Collect the ones in flight this frame and
+    // hand them to the projectile layer; CSS keyframes drive the arc + spin.
+    $.combatProjectiles = teams.flatMap((team) =>
+      (team.combatants || []).flatMap((c) =>
+        (c.animations || [])
+          .filter((a) => a.projectile && a.start <= elapsed && a.end > elapsed)
+          .map((a) => {
+            // Same display-time transform as the combatants: spin onto the diagonals
+            // (4-team perspective) then foreshorten, so projectiles fly across the plane.
+            const tilt = ringTilt();
+            const offRad = (ringAngleOffset($.liveTeams?.length || 0) * Math.PI) / 180;
+            const cosO = Math.cos(offRad);
+            const sinO = Math.sin(offRad);
+            const startX = a.startX * cosO + a.startY * sinO;
+            const startY = (a.startY * cosO - a.startX * sinO) * tilt;
+            const endX = a.endX * cosO + a.endY * sinO;
+            const endY = (a.endY * cosO - a.endX * sinO) * tilt;
+            const dx = endX - startX;
+            const dist = Math.hypot(dx, endY - startY);
+            return {
+              id: a.id,
+              icon: a.icon,
+              startX,
+              startY,
+              endX,
+              endY,
+              arcHeight: a.trajectory === 'arc' ? Math.min(100, dist * 0.2) : 0,
+              spin: (a.spin || 0) * (dx >= 0 ? 1 : -1),
+              duration: a.end - a.start,
+            };
+          }),
+      ),
+    );
+
+    // A single hit landing 81%+ of the target's total health shakes the whole
+    // combat — once per hit, keyed by the floater's id. A Stomp shakes too, fired
+    // at the foot-slam (90% through the bb-stomp keyframe) and keyed by its anim id.
+    cards.forEach((c) => {
+      c.floaters.forEach((f) => {
+        if (f.vfxName === 'hurt' && f.healthFraction > 0.8 && !shaken.has(f.id)) {
+          shaken.add(f.id);
+          window.shakeCombat?.();
+        }
+      });
+      if (c.stompProgress >= 0.9 && !shaken.has(c.stompAnimId)) {
+        shaken.add(c.stompAnimId);
+        window.shakeCombat?.();
+      }
+    });
+
+    // Retrigger attack animation by toggling animation-name via a DOM tickle.
+    // Walk through enriched combatants and compare attackAnimId to what we last set.
+    cards.forEach((c, idx) => {
+      const last = retriggered.get(c.cardId);
+      if (c.attackAnimId && c.attackAnimId !== last) {
+        retriggered.set(c.cardId, c.attackAnimId);
+        window.retriggerCombatantAnim?.(idx);
+      } else if (!c.attackAnimId && last) {
+        retriggered.set(c.cardId, '');
+      }
+    });
+  };
+
+  window.retriggerCombatantAnim = (idx) => {
+    const el = document.querySelectorAll('combatant-sprite')[idx];
+    if (!el) return;
+    // Vibe's hydrate does setAttribute('style', ...) every flush, wiping any inline
+    // animation-name we set. Force a reflow so the browser commits the 'none' state
+    // synchronously — then clearing it makes the CSS animation restart fresh before
+    // Vibe's next microtask-flush replaces the style attribute.
+    el.style.animationName = 'none';
+    void el.offsetWidth;
+    el.style.animationName = '';
+  };
+
+  window.shakeCombat = () => {
+    const el = document.querySelector('combat-stage');
+    if (!el) return;
+    // Restart the keyframe even if a previous shake is still mid-flight.
+    el.removeAttribute('shaking');
+    void el.offsetWidth;
+    el.setAttribute('shaking', '');
+  };
+
+  const playSfx = (sfx) => {
+    // Pick the variant deterministically from the (seeded) sfx id so a rewatch plays
+    // the identical sound sequence — a fully reproducible replay, audio included.
+    const variant = sfx.variants?.[seededRandom(0, sfx.variants.length - 1, sfx.id || '0')];
+    const src = window.AUDIO?.[variant];
+    if (!src || !window.Howl) return;
+    try {
+      new window.Howl({
+        src: [src],
+        volume: ($.settings?.volume?.combat ?? 1) * ($.settings?.volume?.master ?? 0.5),
+      }).play();
+    } catch {}
+  };
+
+  const loop = (timestamp) => {
+    if (!lastTimestamp) lastTimestamp = timestamp;
+    const deltaTime = timestamp - lastTimestamp;
+    $.elapsedMilliseconds += deltaTime * ($.combatSpeed || 1);
+    lastTimestamp = timestamp;
+
+    // Advance through every event whose tick has elapsed — not just one per frame.
+    // Under frame drops (long fights), several ticks can pass between frames; if we
+    // consumed only one, the displayed combat would lag behind the real-time clock
+    // and then snap to the finish, which reads as a speed-up.
+    let due = 0;
+    while ($.combat.events[due] && $.elapsedMilliseconds > $.combat.events[due].eventTimestamp) {
+      due++;
+    }
+    if (due > 0) {
+      $.liveTeams = $.combat.events[due - 1].teams;
+      $.combat.events = $.combat.events.slice(due);
+    }
+
+    while (audioQueue.length && audioQueue[0].start <= $.elapsedMilliseconds) {
+      playSfx(audioQueue.shift());
+    }
+
+    // Re-enrich every tick (cheap, keeps anim state fresh)
+    updateCombatDisplay();
+
+    if ($.elapsedMilliseconds > $.combat.duration) {
+      $.liveTeams = $.combat.teamsEndState;
+      updateCombatDisplay();
+      cancelAnimationFrame(animationId);
+      animationId = null;
+
+      // Spectating (live or a re-watch) never touches my roster — I'm not in this fight,
+      // and a replay of a past one must not overwrite my current HP.
+      if (!$.combat.spectator)
+        $.characters.forEach((character) => {
+          const myCharacter = $.liveTeams[0]?.combatants?.find((c) => c.uuid === character.uuid);
+          if (myCharacter) {
+            // Floored at 0 — overkill drives currentHealth negative, but my stored
+            // roster HP must never go below empty (it surfaces as a negative HP %).
+            character.overrides.combatStats.currentHealth = Math.max(
+              0,
+              myCharacter.combatStats.currentHealth - myCharacter.combatStats.healingReceived,
+            );
+          }
+        });
+      return;
+    }
+
+    animationId = requestAnimationFrame(loop);
+  };
+
+  const pauseCombat = () => {
+    cancelAnimationFrame(animationId);
+    animationId = null;
+  };
+  const resumeCombat = () => {
+    if ($.combat.duration > 0 && $.elapsedMilliseconds < $.combat.duration) {
+      lastTimestamp = 0;
+      animationId = requestAnimationFrame(loop);
+    }
+  };
+
+  document.addEventListener('pauseCombat', pauseCombat);
+  document.addEventListener('resumeCombat', resumeCombat);
+  // Force a single repaint after a display setting (e.g. the perspective toggle) changes
+  // while the loop is idle — a live fight already re-enriches every frame, but a paused or
+  // finished board needs the nudge to reflect the new tilt.
+  document.addEventListener('redrawCombat', updateCombatDisplay);
+
+  $.on('afterUpdate', (current, prev) => {
+    // (Re)start whenever a combat with a *new* replayNonce mounts — covers the first open
+    // AND the spectator "re-watch" reassigning $.combat mid-overlay (prev already had a
+    // duration, so a !prev.combat.duration check would miss it). Keyed on the primitive
+    // nonce, not object identity: Vibe re-clones current.combat every flush the live loop
+    // slices events, so a reference check would restart the fight on every frame.
+    if (current.combat?.duration > 0 && current.combat.replayNonce !== playingNonce) {
+      playingNonce = current.combat.replayNonce;
+      if (animationId) cancelAnimationFrame(animationId);
+      animationId = null;
+      lastTimestamp = 0;
+      retriggered.clear();
+      shaken.clear();
+
+      // Reopened combats (teamplay "View outcome" / live rejoin) carry resumeAt — the
+      // real-time playhead — so the fight picks up where it actually is instead of
+      // replaying from the top. A fresh fight has no resumeAt and starts at 0.
+      const resumeAt = Math.max(0, current.combat.resumeAt || 0);
+
+      // Already over: paint the final board and don't run the clock. The end-of-fight
+      // HP writeback is the server's authority for teamplay, so we must not re-run it.
+      if (resumeAt >= current.combat.duration) {
+        $.elapsedMilliseconds = current.combat.duration;
+        audioQueue = [];
+        $.liveTeams = current.combat.teamsEndState;
+        updateCombatDisplay();
+        return;
+      }
+
+      $.elapsedMilliseconds = resumeAt;
+      // Drop the sounds for the part we skipped so a resume doesn't burst them at once.
+      audioQueue = [...(current.combat.audio || [])]
+        .filter((a) => a.start >= resumeAt)
+        .sort((a, b) => a.start - b.start);
+      // Seek the board to the playhead so the opening frames don't flash before the
+      // loop catches up (no-op for a fresh fight, where resumeAt is 0).
+      let due = 0;
+      while ($.combat.events[due] && resumeAt > $.combat.events[due].eventTimestamp) due++;
+      $.liveTeams = due > 0 ? $.combat.events[due - 1].teams : current.combat.teamsStartState;
+      if (due > 0) $.combat.events = $.combat.events.slice(due);
+      updateCombatDisplay();
+      animationId = requestAnimationFrame(loop);
+      return;
+    }
+
+    if (
+      !animationId &&
+      !current.combat?.duration &&
+      current.combat?.teamsStartState !== prev.combat?.teamsStartState
+    ) {
+      $.elapsedMilliseconds = 0;
+      $.liveTeams = current.combat?.teamsStartState || [];
+      updateCombatDisplay();
+    }
+  });
+};
diff --git a/js/combat.js b/js/combat.js
new file mode 100644
index 00000000..c90a0c70
--- /dev/null
+++ b/js/combat.js
@@ -0,0 +1,1342 @@
+import { ABILITY_PRIORITY, COMBAT_TICK_TIME } from '/js/constants/APP.js';
+import {
+  calculateCombatStatsByCharacter,
+  prepareCombatant,
+  ringPosition,
+  seededRandom,
+  seededWeightedIndex,
+} from '/js/utils.js';
+import VFX from '/js/constants/VFX.js';
+import SFX from '/js/constants/SFX.js';
+import {
+  TYPE,
+  DOT_HIT_DAMAGE_FRACTION,
+  DOT_TOTAL_DAMAGE_FRACTION,
+} from '/js/constants/ABILITIES.js';
+import CHARACTERS from '/js/constants/CHARACTERS.js';
+import STATUS_EFFECTS from '/js/constants/STATUS_EFFECTS.js';
+
+const VALUE_STATUS_FIELDS = [
+  'damageMultiplierIncoming',
+  'damageMultiplierOutgoing',
+  'hitChanceModifierIncoming',
+  'hitChanceModifierOutgoing',
+];
+
+const VALUE_STATUS_KEYS = Object.entries(STATUS_EFFECTS)
+  .filter(([, def]) => VALUE_STATUS_FIELDS.some((f) => typeof def[f] === 'number'))
+  .map(([key]) => key);
+
+// Reactive-trigger statuses (Riposte, and future Thorns/crit-punishers) carry a
+// `trigger` config instead of a stat modifier. They apply, decay and display like
+// value statuses, but resolveTriggers fires their effect when their event lands
+// on the holder.
+const TRIGGER_STATUS_KEYS = Object.entries(STATUS_EFFECTS)
+  .filter(([, def]) => def.trigger)
+  .map(([key]) => key);
+
+// Statuses an ability grants to itself/its team — stat buffs and trigger buffs.
+const SELF_STATUS_KEYS = [...new Set([...VALUE_STATUS_KEYS, ...TRIGGER_STATUS_KEYS])];
+
+// Negative statuses a cleanse strips. endGame is permanent (the sudden-death
+// failsafe) so it's never cleared; thresholds keep their tolerance ceiling and
+// only have their built-up value reset.
+const DEBUFF_KEYS = Object.entries(STATUS_EFFECTS)
+  .filter(([, def]) => def.category === 'debuff' && !def.permanent)
+  .map(([key]) => key);
+
+const cleanseDebuffs = (combatant) => {
+  DEBUFF_KEYS.forEach((key) => {
+    const s = combatant.statuses[key];
+    combatant.statuses[key] =
+      STATUS_EFFECTS[key].kind === 'threshold' ? { ...s, value: 0 } : { ticks: 0, value: 0 };
+  });
+};
+
+const sumStatusField = (statuses, field) =>
+  VALUE_STATUS_KEYS.reduce((acc, key) => {
+    if (typeof STATUS_EFFECTS[key][field] !== 'number') return acc;
+    return acc + (statuses?.[key]?.value || 0);
+  }, 0);
+
+const damageTakenBoost = (statuses) => sumStatusField(statuses, 'damageMultiplierIncoming');
+const damageDealtBoost = (statuses) => sumStatusField(statuses, 'damageMultiplierOutgoing');
+const hitChanceTakenModifier = (statuses) => sumStatusField(statuses, 'hitChanceModifierIncoming');
+const hitChanceDealtModifier = (statuses) => sumStatusField(statuses, 'hitChanceModifierOutgoing');
+
+// Elemental attacks hit slightly harder than plain physical ones, then the
+// target's resistance to that element (a percentage) blunts the blow. Physical
+// attacks (no element) are unchanged.
+const ELEMENTAL_DAMAGE_BONUS = 0.15;
+const elementalMultiplier = (ability, target) => {
+  const element = ability.elements?.[0];
+  if (!element) return 1;
+  const resistance = target.combatStats.resistances?.[element] || 0;
+  return (1 + ELEMENTAL_DAMAGE_BONUS) * Math.max(0, 1 - resistance / 100);
+};
+
+// Ability status tuples are [key, factor]. The factor scales the status's
+// magnitude by the ability's ticks — buildup for thresholds, duration for direct
+// effects/buffs (default 1 = one per tick). For Uninterruptable the factor is its
+// proc chance instead.
+const statusTuple = (ability, key) => ability.statusEffects?.find(([k]) => k === key);
+const hasStatus = (ability, key) => !!statusTuple(ability, key);
+const statusFactor = (ability, key) => statusTuple(ability, key)?.[1] ?? 1;
+const statusTicks = (ability, key) => Math.floor(ability.ticks * statusFactor(ability, key));
+
+// Tick damage a wounding/venomous hit carries into its Bleeding/Poisoned value.
+const dotValue = (combatant, ability) =>
+  Math.floor(
+    ability?.damage
+      ? combatant.combatStats.damage * ability.damage * DOT_HIT_DAMAGE_FRACTION
+      : combatant.combatStats.damage * DOT_TOTAL_DAMAGE_FRACTION,
+  );
+
+const applyValueStatus = (recipient, currentAbility, key) => {
+  const def = STATUS_EFFECTS[key];
+  const value = VALUE_STATUS_FIELDS.map((f) => def[f]).find((v) => typeof v === 'number');
+  const prev = recipient.statuses[key] || { ticks: 0, value: 0 };
+  recipient.statuses[key] = {
+    ticks: prev.ticks + statusTicks(currentAbility, key),
+    value,
+    element: currentAbility.elements?.[0],
+    // A trigger status can carry a spawn spec from the ability that applied it,
+    // so resolveTriggers knows what to summon when its event lands.
+    ...(currentAbility.spawn ? { spawn: currentAbility.spawn } : {}),
+  };
+};
+
+// Ability-granted stats (Block → +blockChance, Powershot → +crit) are applied
+// when the ability starts — before this tick's attacks resolve — and removed
+// when it ends, after them. Buffs therefore cover attacks on both boundary
+// ticks; on a tick where one ability hands over to the next, both stat sets
+// are briefly live (accepted: chained identical buffs double-count that tick).
+const applyAbilityStats = (combatant, ability) => {
+  Object.entries(ability.combatStats || {}).forEach(([key, value]) => {
+    combatant.combatStats[key] = (combatant.combatStats[key] || 0) + value;
+  });
+};
+
+const removeAbilityStats = (combatant, ability) => {
+  Object.entries(ability.combatStats || {}).forEach(([key, value]) => {
+    combatant.combatStats[key] = (combatant.combatStats[key] || 0) - value;
+  });
+};
+
+const applyNonEnemyStatuses = (combatant, currentAbility, teams, now, audio) => {
+  const recipients =
+    currentAbility.target === 'self'
+      ? [combatant]
+      : currentAbility.target === 'team'
+        ? teams[combatant.teamIndex].combatants.filter((c) => c.combatStats.currentHealth > 0)
+        : [];
+  if (recipients.length === 0) return;
+  SELF_STATUS_KEYS.forEach((key) => {
+    if (!hasStatus(currentAbility, key)) return;
+    recipients.forEach((r) => applyValueStatus(r, currentAbility, key));
+  });
+  bufferAudio(audio, currentAbility.sfx, now - 200);
+};
+
+// While casting an uninterruptable ability the caster absorbs immobilizes
+// (stun/cocoon). absorbsImmobilize flags an "Immune!" pop on the buff chip (a
+// remount via a bumped instance) and reports the hit as absorbed; applyImmobilize
+// routes every immobilize through it so any current/future one is covered.
+const absorbsImmobilize = (target) => {
+  const u = target.statuses.uninterruptable;
+  if (!u || u.ticks <= 0) return false;
+  u.instance = (u.instance || 0) + 1;
+  u.announce = 'Immune!';
+  return true;
+};
+
+const applyImmobilize = (target, key, status) => {
+  if (absorbsImmobilize(target)) return;
+  target.statuses[key] = status;
+};
+
+// Generic threshold buildup: add `amount`, and when the bar fills convert into the
+// paired effect (convertsInto) for convertAmount + overflow ticks, then nudge the
+// threshold up so repeated control hits diminishing returns — two mirrored
+// Stompers can't perma-lock. Immobilize conversions route through applyImmobilize
+// so Uninterruptable can absorb them; DOT conversions carry the dealer's tick
+// damage; the rest take their own effect value.
+const applyThreshold = (target, combatant, ability, key, amount) => {
+  const def = STATUS_EFFECTS[key];
+  const s = target.statuses[key];
+  s.value += amount;
+  if (s.value < s.max) return;
+  const overflow = s.value - s.max;
+  s.value = 0;
+  s.max += 1;
+  const into = def.convertsInto;
+  const intoDef = STATUS_EFFECTS[into];
+  const ticks = target.statuses[into].ticks + def.convertAmount + overflow;
+  if (into === 'bleeding' || into === 'poisoned') {
+    const value = Math.max(
+      target.statuses[into].value || 0,
+      Math.max(1, dotValue(combatant, ability)),
+    );
+    target.statuses[into] = { ticks, value };
+  } else if (into === 'stunned' || into === 'cocooned') {
+    applyImmobilize(target, into, { ticks, value: 1 });
+  } else {
+    target.statuses[into] = { ticks, value: intoDef.damageMultiplierIncoming ?? 1 };
+  }
+};
+
+// Apply every status an ability carries to one enemy target: thresholds build up
+// (ticks × factor), a direct stun immobilizes, a direct DOT stacks its tick
+// damage, and value statuses (Vulnerable, Obscured, …) apply for their scaled
+// duration. Caster-only entries (Uninterruptable/Unstoppable) are handled at cast.
+const applyEnemyStatuses = (target, combatant, ability) => {
+  ability.statusEffects.forEach(([key]) => {
+    const def = STATUS_EFFECTS[key];
+    if (def.kind === 'threshold') {
+      applyThreshold(target, combatant, ability, key, statusTicks(ability, key));
+    } else if (key === 'stunned' || key === 'confused') {
+      applyImmobilize(target, key, {
+        ticks: Math.max(target.statuses[key].ticks, statusTicks(ability, key)),
+        value: 1,
+      });
+    } else if (key === 'bleeding' || key === 'poisoned') {
+      const value = Math.max(
+        target.statuses[key].value || 0,
+        Math.max(1, dotValue(combatant, ability)),
+      );
+      target.statuses[key] = {
+        ticks: target.statuses[key].ticks + statusTicks(ability, key),
+        value,
+      };
+    } else if (VALUE_STATUS_KEYS.includes(key)) {
+      applyValueStatus(target, ability, key);
+    }
+  });
+};
+
+// Fan an ability's statuses out to every living enemy (mirrors the 'team' branch
+// of applyNonEnemyStatuses, but for the opposing teams). Used by Stomp.
+const applyEnemiesStatuses = (combatant, currentAbility, teams, now, audio) => {
+  const enemies = teams
+    .filter((_, i) => i !== combatant.teamIndex)
+    .flatMap((team) => team.combatants.filter((c) => c.combatStats.currentHealth > 0));
+  if (enemies.length === 0) return;
+  enemies.forEach((target) => applyEnemyStatuses(target, combatant, currentAbility));
+  bufferAudio(audio, currentAbility.sfx, now - 200);
+};
+
+// One-shot area damage: a thrown bomb (Catch!) that lands once and washes the
+// whole enemy team — not a sustained per-tick breath (see tickBreaths). Mirrors
+// the breath's per-enemy maths but resolves a single time, on the cast's
+// completion. Like the breath, it can't be blocked or dodged.
+const applyEnemiesDamage = (
+  combatant,
+  currentAbility,
+  teams,
+  now,
+  seed,
+  tickCount,
+  luckDisabled,
+) => {
+  const enemies = teams
+    .filter((_, i) => i !== combatant.teamIndex)
+    .flatMap((team) => team.combatants.filter((c) => c.combatStats.currentHealth > 0));
+
+  enemies.forEach((target) => {
+    const isCritical = isLucky(
+      combatant.combatStats.criticalChance,
+      `${seed}_${tickCount}_${combatant.id}_${target.id}_catch`,
+      luckDisabled,
+    );
+
+    const weakened =
+      combatant.combatStats.damage *
+      currentAbility.damage *
+      (1 + damageDealtBoost(combatant.statuses)) *
+      (1 + damageTakenBoost(target.statuses)) *
+      elementalMultiplier(currentAbility, target);
+    let amount = Math.floor(
+      weakened * (1 + (isCritical ? combatant.combatStats.criticalDamage : 0)),
+    );
+
+    const armor = target.combatStats.currentArmor;
+    if (armor > 0) {
+      amount = Math.max(0, amount - armor);
+      const armorPenetration = combatant.combatStats.armorPenetration || 0;
+      if (armorPenetration > 0) {
+        const penetrated = Math.min(armorPenetration, armor);
+        target.combatStats.currentArmor = armor - penetrated;
+        bufferAnimation(target, { ...VFX.armorHurt, amount: penetrated }, now);
+      }
+    }
+
+    if (amount <= 0) return;
+    target.combatStats.currentHealth -= amount;
+    target.combatStats.bufferedHealth = Math.max(0, target.combatStats.bufferedHealth - amount);
+    bufferAnimation(target, { ...VFX.hurt, amount, isCritical }, now);
+  });
+};
+
+const isLucky = (chance, seed, luckDisabled) => {
+  if (luckDisabled) return false;
+  const random = seededRandom(0, 1, seed, 0.01);
+
+  return random < chance;
+};
+
+export const healFull = (characters) =>
+  characters.map((character) => {
+    const combatStats = calculateCombatStatsByCharacter(CHARACTERS(character, true));
+
+    return {
+      ...character,
+      overrides: {
+        ...character.overrides,
+        combatStats: {
+          ...character.overrides?.combatStats,
+          currentHealth: combatStats.maxHealth,
+        },
+      },
+    };
+  });
+
+export const prepareTeams = (...teams) => {
+  const preparedCombatants = teams.map((team, teamIndex) => {
+    const preparedTeam = (teamIndex !== 0 ? healFull(team) : team).map(
+      (combatant, combatatantIndex) =>
+        prepareCombatant(
+          CHARACTERS(combatant, true),
+          teams.length,
+          team.length,
+          teamIndex,
+          combatatantIndex,
+        ),
+    );
+
+    return preparedTeam;
+  });
+
+  return preparedCombatants.map((team, index) => ({
+    name: `Team ${index}`,
+    index,
+    combatants: team,
+  }));
+};
+
+const moreThanOneTeamStanding = (teams) => {
+  const teamsStanding = teams.filter((team) =>
+    team.combatants.some((combatant) => combatant.combatStats.currentHealth > 0),
+  );
+  return teamsStanding.length > 1;
+};
+
+// Fight tally, accumulated from the player's seat (team 0) across every damage and
+// heal instance. Reset per fight in generateCombat and returned on the result; the
+// stats page is fed from here rather than reconstructing hits from the snapshots.
+let combatSummary;
+
+// Deterministic VFX/SFX/animation ids. The simulation is fully seeded, so the order
+// these are minted in is identical on every build of the same fight — a monotonic
+// counter (seed-prefixed for cross-fight uniqueness) reproduces the same ids each
+// rewatch. The replay derives the floater scatter from the id (combat-loop), so a
+// random id (crypto.randomUUID) made the same fight jitter differently every replay.
+// Reset per fight in generateCombat, alongside combatSummary.
+let idSeed = '';
+let idCounter = 0;
+const nextAnimationId = () => `${idSeed}-${idCounter++}`;
+
+const bufferAnimation = (combatant, vfx, timestamp) => {
+  const newVFX = structuredClone(vfx);
+
+  newVFX.start = timestamp;
+  newVFX.end = timestamp + COMBAT_TICK_TIME;
+
+  newVFX.id = nextAnimationId();
+
+  // Hurt floaters scale with how big the instance is as a share of the target's
+  // total health pool — measured by damage actually dealt, not the raw (possibly
+  // overkill) instance. currentHealth is already decremented here, so the pre-hit
+  // health is currentHealth + amount; a 100-dmg hit on a 1-HP target dealt 1.
+  if (newVFX.vfxName === 'hurt') {
+    const maxHealth = combatant.combatStats.maxHealth || 0;
+    const amount = newVFX.amount || 0;
+    const dealt = Math.min(amount, Math.max(0, combatant.combatStats.currentHealth + amount));
+    newVFX.healthFraction = maxHealth > 0 ? dealt / maxHealth : 0;
+    // Damage on a team-0 combatant is taken, on anyone else is dealt by us.
+    if (combatant.teamIndex === 0) {
+      combatSummary.damageReceived += dealt;
+      combatSummary.largestHitReceived = Math.max(combatSummary.largestHitReceived, dealt);
+    } else {
+      combatSummary.damageDealt += dealt;
+      combatSummary.largestHitDealt = Math.max(combatSummary.largestHitDealt, dealt);
+    }
+  } else if (newVFX.vfxName === 'heal' && combatant.teamIndex === 0) {
+    combatSummary.largestHeal = Math.max(combatSummary.largestHeal, newVFX.amount || 0);
+  }
+
+  combatant.animations.push(newVFX);
+};
+
+const bufferAudio = (audio, sfx, timestamp) => {
+  const newSFX = structuredClone(sfx);
+
+  newSFX.id = nextAnimationId();
+  newSFX.start = timestamp;
+
+  audio.push(newSFX);
+};
+
+// Re-seat a whole team after its roster changes (spawn, hatch, removal) so the
+// layout matches a freshly-prepared team of that size — the same `ringPosition`
+// math as the initial seating, keyed off the current count. Anything else drifts
+// the surviving cards out of their even spread (e.g. hatchlings creeping inward).
+const restackTeam = (teams, teamIndex) => {
+  const team = teams[teamIndex];
+  team.combatants.forEach((c, i) => {
+    c.position = ringPosition(teamIndex, teams.length, team.combatants.length, i);
+  });
+};
+
+// Generic mid-combat spawn: inject a CHARACTERS.js entity into a team. The sim
+// re-derives its combatant list every tick, so the spawn acts from the next tick;
+// it also lands in this tick's end-of-tick snapshot, so it renders from the moment
+// it appears. `spec` = { character, overrides } — overrides reach the entity (e.g.
+// the Jester's `maxHealth: 1`). Reused by anything that spawns (eggs → hatchlings).
+
+const spawnCombatant = (teams, teamIndex, spec) => {
+  const team = teams[teamIndex];
+  const combatant = prepareCombatant(
+    { id: spec.character, overrides: spec.overrides },
+    teams.length,
+    team.combatants.length + 1,
+    teamIndex,
+    team.combatants.length,
+  );
+  combatant.spawned = true;
+  team.combatants.push(combatant);
+  restackTeam(teams, teamIndex);
+  return combatant;
+};
+
+// Swap a combatant for a new entity in its own slot (an Egg → Scorchling hatch).
+// Replacing at the same index — rather than push + splice — keeps every other
+// combatant's index, so the rest of the team holds its seat instead of shuffling
+// (the centred boss would otherwise slide to an edge as the egg dropped out).
+const replaceCombatant = (teams, teamIndex, index, spec) => {
+  const team = teams[teamIndex];
+  const combatant = prepareCombatant(
+    { id: spec.character, overrides: spec.overrides },
+    teams.length,
+    team.combatants.length,
+    teamIndex,
+    index,
+  );
+  combatant.spawned = true;
+  team.combatants.splice(index, 1, combatant);
+  restackTeam(teams, teamIndex);
+  return combatant;
+};
+
+// Reactive triggers: when `event` lands on `victim`, any active trigger status it
+// holds whose `trigger.on` matches fires. A trigger either deals counter damage
+// back to the `attacker` (scaled off `incomingDamage`) or spawns an entity into the
+// victim's team (the spec rides on the status instance). Counters are direct (no
+// block/dodge/crit/armor) and never themselves trigger reactions, so two
+// counter-holders can't loop; spawns are gated by the caller to surviving hits.
+const resolveTriggers = (victim, attacker, event, incomingDamage, now, audio, teams) => {
+  TRIGGER_STATUS_KEYS.forEach((key) => {
+    const status = victim.statuses[key];
+    if (!status || (status.ticks || 0) <= 0) return;
+    const { on, returnDamage } = STATUS_EFFECTS[key].trigger;
+    const fires = Array.isArray(on) ? on.includes(event) : on === event;
+    if (!fires) return;
+
+    if (status.spawn && teams) {
+      spawnCombatant(teams, victim.teamIndex, status.spawn);
+      bufferAudio(audio, SFX.doublePersona, now - 100);
+    }
+
+    const amount = Math.floor(incomingDamage * (returnDamage || 0));
+    if (amount <= 0) return;
+    attacker.combatStats.currentHealth -= amount;
+    attacker.combatStats.bufferedHealth = Math.max(0, attacker.combatStats.bufferedHealth - amount);
+    bufferAnimation(attacker, { ...VFX.hurt, amount, isCritical: false }, now);
+    bufferAudio(audio, SFX.stab, now - 100);
+  });
+};
+
+const SPIN_FLOURISH_TIME = 300;
+
+const SPRITE_VFX = [
+  'basicAttackFast',
+  'basicAttackRegular',
+  'basicAttackSlow',
+  'pounce',
+  'whirlwind',
+  'block',
+  'stomp',
+  'catchThrow',
+  'boom',
+  'hatch',
+];
+
+const injectAnimation = (combatant, target, currentAbility, now, teams, events = []) => {
+  const start = now - currentAbility.ticks * COMBAT_TICK_TIME;
+  const animations = [];
+
+  const spinFlourish =
+    currentAbility.type === TYPE.WindUp && currentAbility.vfx.vfxName === 'whirlwind';
+  if (spinFlourish) {
+    // A whirlwind on a wind-up is a release flourish: charge through the
+    // wind-up, then burst into a few really fast spins the instant the hit
+    // lands — damage resolves at `now`, exactly as the spin begins.
+    animations.push({ ...VFX.abilityCharge, start, end: now });
+    animations.push({ vfxName: 'spin', start: now, end: now + SPIN_FLOURISH_TIME });
+  } else if (SPRITE_VFX.includes(currentAbility.vfx.vfxName)) {
+    const vfx = structuredClone(currentAbility.vfx);
+    vfx.start = start;
+    vfx.end = now + (vfx.vfxName === 'block' ? 250 : 0);
+    vfx.targetX = target.position.x;
+    vfx.targetY = target.position.y;
+    animations.push(vfx);
+  } else if (currentAbility.type === TYPE.WindUp) {
+    animations.push({ ...VFX.abilityCharge, start, end: now });
+    animations.push({ ...VFX.abilityRelease, start: now, end: now + VFX.abilityRelease.duration });
+  } else {
+    animations.push({ ...VFX.abilityRecover, start, end: now });
+  }
+
+  // Generic thrown projectile: an arena-level icon that flies from the caster to
+  // the struck target. Released ~78% through the wind-up (the snap) and lands on
+  // the cast's completion, when the hit resolves. Config lives on the ability
+  // (icon / trajectory: 'arc' | 'straight' / spin degrees) so any ability can throw.
+  if (currentAbility.projectile) {
+    const { icon, trajectory = 'straight', spin = 0 } = currentAbility.projectile;
+    animations.push({
+      vfxName: 'projectile',
+      projectile: true,
+      icon,
+      trajectory,
+      spin,
+      start: now - currentAbility.ticks * COMBAT_TICK_TIME * 0.2,
+      end: now,
+      startX: combatant.position.x,
+      startY: combatant.position.y,
+      endX: target.position.x,
+      endY: target.position.y,
+    });
+  }
+
+  animations.forEach((a) => (a.id = nextAnimationId()));
+
+  const cIndex = teams[combatant.teamIndex].combatants.findIndex(({ id }) => id === combatant.id);
+  combatant.injectedAnimations.push(...animations);
+
+  events.forEach((event) => {
+    if (event.eventTimestamp < start) return;
+    // A combatant spawned mid-fight (e.g. a Double Persona clone) is absent from
+    // snapshots that predate its spawn — there is nothing to decorate there.
+    const snapshot = event.teams[combatant.teamIndex].combatants[cIndex];
+    if (snapshot) snapshot.animations.push(...combatant.injectedAnimations);
+  });
+};
+
+const pickAbility = (abilities, ability, now, startOrEnd) =>
+  now % abilities[abilities.length - 1].end ===
+  ability[startOrEnd] % abilities[abilities.length - 1].end;
+
+const sortByAbilityPriority = (a, b, now, startOrEnd) => {
+  const aAbility = a.abilities.find((ability) =>
+    pickAbility(a.abilities, ability, now, startOrEnd),
+  );
+  const bAbility = b.abilities.find((ability) =>
+    pickAbility(b.abilities, ability, now, startOrEnd),
+  );
+
+  const aPriority = ABILITY_PRIORITY.indexOf(aAbility.id);
+  const bPriority = ABILITY_PRIORITY.indexOf(bAbility.id);
+
+  const normalizedAPriority = aPriority === -1 ? Number.MAX_SAFE_INTEGER : aPriority;
+  const normalizedBPriority = bPriority === -1 ? Number.MAX_SAFE_INTEGER : bPriority;
+
+  if (normalizedAPriority !== normalizedBPriority) return normalizedAPriority - normalizedBPriority;
+
+  return 0;
+};
+
+const timedAbility = (combatants, now, startOrEnd) =>
+  combatants.filter((combatant) =>
+    combatant.abilities.some((ability) =>
+      pickAbility(combatant.abilities, ability, now, startOrEnd),
+    ),
+  );
+
+const prioritySorting = (combatants, now, startOrEnd) =>
+  combatants.sort((a, b) => sortByAbilityPriority(a, b, now, startOrEnd));
+
+// Hard-control abilities (Stomp fans concussion→stun across enemies; Kick stuns).
+// They resolve in their own pass, gated only by the pre-tick stun snapshot, so two
+// of them landing the same tick both fire instead of the first pre-empting the
+// second. Damage abilities never carry raw control — their threshold debuffs
+// (concussion/wound) convert to it instead.
+const isControlAbility = (ability) => ability.target === 'enemies' || ability.id === 'mindsnap';
+
+const tickStatusEffects = (combatants, now) => {
+  combatants.forEach((combatant) => {
+    if (combatant.statuses.stunned.ticks > 0) {
+      combatant.statuses.stunned.ticks -= 1;
+    } else {
+      combatant.statuses.stunned.value = 0;
+    }
+
+    if (combatant.statuses.cocooned.ticks > 0) {
+      combatant.statuses.cocooned.ticks -= 1;
+    } else {
+      combatant.statuses.cocooned.value = 0;
+    }
+
+    if (combatant.statuses.confused.ticks > 0) {
+      combatant.statuses.confused.ticks -= 1;
+    } else {
+      combatant.statuses.confused.value = 0;
+    }
+
+    if (combatant.statuses.uninterruptable.ticks > 0) {
+      combatant.statuses.uninterruptable.ticks -= 1;
+    } else {
+      combatant.statuses.uninterruptable.value = 0;
+    }
+
+    SELF_STATUS_KEYS.forEach((key) => {
+      const s = combatant.statuses[key];
+      if (!s) return;
+      if (s.ticks > 0) {
+        s.ticks -= 1;
+      } else {
+        s.value = 0;
+      }
+    });
+
+    if (combatant.statuses.bleeding.ticks > 0) {
+      const bleedDamage = combatant.statuses.bleeding.value;
+      const weakenedDamage = (1 + damageTakenBoost(combatant.statuses)) * bleedDamage;
+      const finalDamage = Math.floor(weakenedDamage);
+      combatant.combatStats.currentHealth -= finalDamage;
+      combatant.combatStats.bufferedHealth = Math.max(
+        0,
+        combatant.combatStats.bufferedHealth - finalDamage,
+      );
+      bufferAnimation(combatant, { ...VFX.hurt, amount: finalDamage }, now);
+      combatant.statuses.bleeding.ticks -= 1;
+    } else {
+      combatant.statuses.bleeding.value = 0;
+    }
+
+    if (combatant.statuses.poisoned.ticks > 0) {
+      const poisonDamage = combatant.statuses.poisoned.value;
+      const weakenedDamage = (1 + damageTakenBoost(combatant.statuses)) * poisonDamage;
+      const finalDamage = Math.floor(weakenedDamage);
+      combatant.combatStats.currentHealth -= finalDamage;
+      combatant.combatStats.bufferedHealth = Math.max(
+        0,
+        combatant.combatStats.bufferedHealth - finalDamage,
+      );
+      bufferAnimation(combatant, { ...VFX.hurt, amount: finalDamage }, now);
+      combatant.statuses.poisoned.ticks -= 1;
+    } else {
+      combatant.statuses.poisoned.value = 0;
+    }
+  });
+};
+
+// Failsafe so two mutually-immune armored combatants can't stall forever: past the
+// time threshold, armor erodes each tick (max too, so `harden` can't restore it).
+const ARMOR_DECAY_PER_TICK = 2;
+
+const decayArmor = (combatants) => {
+  combatants.forEach((combatant) => {
+    const { combatStats } = combatant;
+    if (combatStats.maxArmor <= 0) return;
+    combatStats.maxArmor = Math.max(0, combatStats.maxArmor - ARMOR_DECAY_PER_TICK);
+    combatStats.currentArmor = Math.min(combatStats.currentArmor, combatStats.maxArmor);
+  });
+};
+
+// Sudden death: once a fight passes a minute, everyone gains the "End game" skull
+// debuff and bleeds 1 HP per tick. Guarantees convergence for any stalemate the
+// other systems can't break — mirrored control loops, regenerating tanks, or a
+// build with no damage at all — so a combat can never run forever.
+const END_GAME_MS = 60000;
+
+const applyEndGame = (combatants) => {
+  combatants.forEach((combatant) => {
+    const { combatStats } = combatant;
+    combatant.statuses.endGame = { ticks: 0, value: 1 };
+    combatStats.currentHealth -= 1;
+    combatStats.bufferedHealth = Math.max(0, combatStats.bufferedHealth - 1);
+  });
+};
+
+// Mark anyone at or below zero health as knocked out and wipe their statuses.
+// Idempotent (the knockedOut guard), so it can run after every damage source.
+const markKnockouts = (teams, now) => {
+  teams.forEach((team) =>
+    team.combatants.forEach((c) => {
+      if (c.combatStats.currentHealth <= 0 && !c.statuses.knockedOut) {
+        c.statuses.knockedOut = now;
+        Object.entries(STATUS_EFFECTS).forEach(([key, def]) => {
+          c.statuses[key] =
+            def.kind === 'threshold' ? { max: 0, value: 0 } : { ticks: 0, value: 0 };
+        });
+      }
+    }),
+  );
+};
+
+// A breath is the only ability that deals damage to a whole team at once: a
+// Channeling + 'enemies' ability with a damage multiplier. The multiplier is the
+// per-tick share each enemy takes while the breath sustains (see tickBreaths),
+// not a single blow — a 4-tick breath washes every enemy four times.
+const isBreath = (ability) =>
+  ability.type === TYPE.Channeling && ability.target === 'enemies' && ability.damage > 0;
+
+// The ability a combatant is mid-way through at `now` (the one whose [start, end)
+// window contains the cycle-relative time), as opposed to one merely starting or
+// ending this tick. Mirrors the window-matching the Kick handler uses.
+const activeAbility = (combatant, now) => {
+  const total = combatant.abilities[combatant.abilities.length - 1].end;
+  const t = ((now % total) + total) % total;
+  return combatant.abilities.find((ability) => {
+    const start = ability.start % total;
+    const end = ability.end % total;
+    if (end > start) return t >= start && t < end;
+    if (end < start) return t >= start || t < end;
+    return true;
+  });
+};
+
+// Channeled breath: a dragon's exhale is a sustained wash, not a single blow, so
+// every tick it is active it pours its per-tick share onto every living enemy —
+// the sim's only true area damage. It flows through armor and can crit like any
+// hit, but can't be blocked or dodged (there is no edge to parry a flood), which
+// is what lets one breather pressure a whole party. Threshold/value debuffs the
+// breath carries (concussion, vulnerability) still land once per channel via the
+// control pass; this only resolves the damage.
+const tickBreaths = (teams, combatants, now, seed, tickCount, audio, luckDisabled) => {
+  combatants.forEach((combatant) => {
+    if (
+      combatant.statuses.stunned.value === 1 ||
+      combatant.statuses.cocooned.value === 1 ||
+      combatant.statuses.confused.value === 1
+    ) {
+      return;
+    }
+    const ability = activeAbility(combatant, now);
+    if (!isBreath(ability)) return;
+
+    const enemies = teams
+      .filter((_, i) => i !== combatant.teamIndex)
+      .flatMap((team) => team.combatants.filter((c) => c.combatStats.currentHealth > 0));
+    if (enemies.length === 0) return;
+
+    enemies.forEach((target) => {
+      const isCritical = isLucky(
+        combatant.combatStats.criticalChance,
+        `${seed}_${tickCount}_${combatant.id}_${target.id}_breath`,
+        luckDisabled,
+      );
+
+      const weakened =
+        combatant.combatStats.damage *
+        ability.damage *
+        (1 + damageDealtBoost(combatant.statuses)) *
+        (1 + damageTakenBoost(target.statuses)) *
+        elementalMultiplier(ability, target);
+      let amount = Math.floor(
+        weakened * (1 + (isCritical ? combatant.combatStats.criticalDamage : 0)),
+      );
+
+      const armor = target.combatStats.currentArmor;
+      if (armor > 0) {
+        amount = Math.max(0, amount - armor);
+        const armorPenetration = combatant.combatStats.armorPenetration || 0;
+        if (armorPenetration > 0) {
+          const penetrated = Math.min(armorPenetration, armor);
+          target.combatStats.currentArmor = armor - penetrated;
+          bufferAnimation(target, { ...VFX.armorHurt, amount: penetrated }, now);
+        }
+      }
+
+      if (amount <= 0) return;
+      target.combatStats.currentHealth -= amount;
+      target.combatStats.bufferedHealth = Math.max(0, target.combatStats.bufferedHealth - amount);
+      bufferAnimation(target, { ...VFX.hurt, amount, isCritical }, now);
+    });
+
+    bufferAudio(audio, ability.sfx, now - 200);
+  });
+};
+
+// Mend channel: the support counterpart to the breath. Every tick it sustains,
+// the caster clears all negative effects from one random living ally (its own
+// team, itself included) — resolved per-tick here rather than on completion.
+// Mend is cast Uninterruptable, so an immobilized caster is the breath's guard
+// mirrored, not a live path.
+const tickMend = (teams, combatants, now, seed, tickCount, audio) => {
+  combatants.forEach((combatant) => {
+    if (
+      combatant.statuses.stunned.value === 1 ||
+      combatant.statuses.cocooned.value === 1 ||
+      combatant.statuses.confused.value === 1
+    ) {
+      return;
+    }
+    const ability = activeAbility(combatant, now);
+    if (!ability?.cleanse) return;
+
+    const allies = teams[combatant.teamIndex].combatants.filter(
+      (c) => c.combatStats.currentHealth > 0,
+    );
+    if (allies.length === 0) return;
+
+    const ally =
+      allies[seededRandom(0, allies.length - 1, `${seed}_${tickCount}_${combatant.id}_mend`)];
+    cleanseDebuffs(ally);
+    bufferAnimation(ally, { ...VFX.mend }, now);
+    bufferAudio(audio, ability.sfx, now - 200);
+  });
+};
+
+// Monotonic id stamped on every generated combat. The render loop keys "is this a new
+// combat to (re)start?" off this primitive — it survives Vibe's per-flush re-cloning of
+// the combat snapshot, where an object-reference check does not (a re-watch reassigning
+// $.combat, or the live loop slicing events, would otherwise restart the loop forever).
+let combatBuildSeq = 0;
+
+export const generateCombat = (teams, seed = `${Math.random()}`, fightId) => {
+  // Boss fights disable luck for deterministic outcomes — read it off the decorated
+  // combatants (a boss enemy carries `boss`) so seasonally-promoted bosses count too.
+  const luckDisabled = teams.some((team) => team.combatants?.some((c) => c.boss));
+  const events = [];
+  combatSummary = {
+    damageDealt: 0,
+    damageReceived: 0,
+    largestHitDealt: 0,
+    largestHitReceived: 0,
+    largestHeal: 0,
+  };
+  idSeed = seed;
+  idCounter = 0;
+
+  let now = 0;
+  let tickCount = 0;
+
+  const teamsStartState = structuredClone(teams);
+  teams = structuredClone(teams);
+
+  const armorDecayTick = (60000 + Math.max(0, teams.length - 2) * 30000) / COMBAT_TICK_TIME;
+
+  const audio = [];
+
+  let healingEfficiency = 1;
+
+  events.push(
+    structuredClone({
+      eventTimestamp: now,
+      teams,
+    }),
+  );
+
+  while (moreThanOneTeamStanding(teams)) {
+    const stillStandingCombatants = teams
+      .flatMap((team) => team.combatants.map((combatant) => combatant))
+      .filter((combatant) => combatant.combatStats.currentHealth > 0);
+
+    tickStatusEffects(stillStandingCombatants, now);
+
+    if (tickCount >= armorDecayTick) decayArmor(stillStandingCombatants);
+
+    if (now >= END_GAME_MS) applyEndGame(stillStandingCombatants);
+
+    if (now > 0) {
+      tickBreaths(teams, stillStandingCombatants, now, seed, tickCount, audio, luckDisabled);
+      tickMend(teams, stillStandingCombatants, now, seed, tickCount, audio);
+      markKnockouts(teams, now);
+    }
+
+    const combatantsStarting = timedAbility(stillStandingCombatants, now, 'start');
+    const combatantsEnding = timedAbility(stillStandingCombatants, now, 'end');
+    const orderedCombatantsStarting = prioritySorting(combatantsStarting, now, 'start');
+    const orderedCombatantsEnding = prioritySorting(combatantsEnding, now, 'end');
+
+    orderedCombatantsStarting.forEach((combatant) => {
+      const currentAbilityIndex = combatant.abilities.findIndex((ability) =>
+        pickAbility(combatant.abilities, ability, now, 'start'),
+      );
+      const currentAbility = combatant.abilities[currentAbilityIndex];
+
+      // A single ability that fills the whole rotation starts and ends on the same
+      // wrap tick (end ≡ start under the cycle modulo), so it's always active. Apply
+      // its stats once and keep them — re-applying every cycle would stack, and the
+      // remove pass leaves it alone — instead of adding then removing them each wrap.
+      const continuous =
+        combatant.abilities.find((ability) =>
+          pickAbility(combatant.abilities, ability, now, 'end'),
+        ) === currentAbility;
+      if (!continuous || !combatant.continuousStatsApplied) {
+        applyAbilityStats(combatant, currentAbility);
+        if (continuous) combatant.continuousStatsApplied = true;
+      }
+
+      if (currentAbility.type === TYPE.WindDown || currentAbility.type === TYPE.Channeling) {
+        applyNonEnemyStatuses(combatant, currentAbility, teams, now, audio);
+      }
+
+      // Uninterruptable cast: the status tuple's factor is its proc chance, rolled
+      // as the cast begins (1 = always). On success the caster wears the buff for
+      // the cast's length, showing the chip and absorbing immobilizes.
+      const uninterruptableChance = statusFactor(currentAbility, 'uninterruptable');
+      if (
+        hasStatus(currentAbility, 'uninterruptable') &&
+        (uninterruptableChance >= 1 ||
+          seededRandom(0, 1, `${seed}_${now}_${currentAbilityIndex}_uninterruptable`, 0.01) <
+            uninterruptableChance)
+      ) {
+        combatant.statuses.uninterruptable = {
+          ticks: currentAbility.castTicksRemaining ?? currentAbility.ticks,
+          value: 1,
+          instance: combatant.statuses.uninterruptable?.instance || 0,
+        };
+      }
+
+      combatant.damage = Math.floor(combatant.combatStats.damage * currentAbility.damage);
+    });
+
+    // Resolve all abilities ending this tick so seating/order can't decide
+    // outcomes. Eligibility is the pre-tick snapshot — a combatant stunned at the
+    // start of the tick does nothing — captured before any control lands.
+    const preStunnedAtTickStart = new Set(
+      orderedCombatantsEnding.filter(
+        (c) =>
+          c.statuses.stunned.value === 1 ||
+          c.statuses.cocooned.value === 1 ||
+          c.statuses.confused.value === 1,
+      ),
+    );
+
+    // Pick the defending team uniformly at random, then weight the individual by
+    // provocation (each combatant starts at 5, so an even team is an even split;
+    // more provocation pulls attacks proportionally).
+    const selectDefender = (combatant, currentAbilityIndex) => {
+      const targetableCombatants = stillStandingCombatants.filter(
+        ({ teamIndex }) => teamIndex !== combatant.teamIndex,
+      );
+      const enemyTeamIndices = [...new Set(targetableCombatants.map((c) => c.teamIndex))];
+      const defendingTeamIndex =
+        enemyTeamIndices[
+          seededRandom(0, enemyTeamIndices.length - 1, `${seed}_${currentAbilityIndex}_${now}_team`)
+        ];
+      const defenders = targetableCombatants.filter((c) => c.teamIndex === defendingTeamIndex);
+      return defenders[
+        seededWeightedIndex(
+          defenders.map((c) => c.combatStats.provocation || 0),
+          `${seed}_${currentAbilityIndex}_${now}_defender`,
+        )
+      ];
+    };
+
+    // Pass 1 — hard control. Gated only by the pre-tick snapshot, so two controls
+    // resolving the same tick BOTH land (mirror Stomps stun each other) instead of
+    // the first pre-empting the second. The stuns applied here then gate pass 2,
+    // cancelling the victims' same-tick attacks, heals and buffs.
+    if (now > 0) {
+      orderedCombatantsEnding.forEach((combatant) => {
+        if (preStunnedAtTickStart.has(combatant)) return;
+        const currentAbilityIndex = combatant.abilities.findIndex((ability) =>
+          pickAbility(combatant.abilities, ability, now, 'end'),
+        );
+        const currentAbility = combatant.abilities[currentAbilityIndex];
+        if (!isControlAbility(currentAbility)) return;
+
+        const target = selectDefender(combatant, currentAbilityIndex);
+        injectAnimation(combatant, target, currentAbility, now, teams, events);
+
+        if (currentAbility.target === 'enemies') {
+          applyEnemiesStatuses(combatant, currentAbility, teams, now, audio);
+          // A breath pours its damage per-tick (tickBreaths); a one-shot AoE
+          // (thrown bomb) lands its damage here, once, as the cast completes.
+          if (currentAbility.damage > 0 && !isBreath(currentAbility)) {
+            applyEnemiesDamage(
+              combatant,
+              currentAbility,
+              teams,
+              now,
+              seed,
+              tickCount,
+              luckDisabled,
+            );
+          }
+        }
+
+        if (currentAbility.id === 'mindsnap') {
+          const total = target.abilitiesCopied[target.abilitiesCopied.length - 1].end;
+          const t = ((now % total) + total) % total;
+          const targetCurrentAbility = target.abilitiesCopied.find((ability) => {
+            const start = ability.start % total;
+            const end = ability.end % total;
+            if (end > start) return t >= start && t < end;
+            else if (end < start) return t >= start || t < end;
+            else return true;
+          });
+          const endTime = targetCurrentAbility.end % total;
+          const remainingTime = endTime > t ? endTime - t : total - t + endTime;
+          applyImmobilize(target, 'confused', {
+            ticks: remainingTime / COMBAT_TICK_TIME,
+            value: 1,
+          });
+          bufferAudio(audio, currentAbility.sfx, now - 200);
+        }
+      });
+    }
+
+    // Pass 2 — everything else (heals, buffs, attacks), in stable order so RNG
+    // seeds keyed by `i` stay deterministic. A combatant stunned by pass 1 (or
+    // pre-tick) reads as `immobilized` here, so its action is cancelled.
+    // Self-replacing casts (an Egg's Hatch) collect here and resolve after the
+    // pass, so removing the caster never shifts indices mid-iteration.
+    const hatchEvents = [];
+    orderedCombatantsEnding.forEach((combatant, i) => {
+      const currentAbilityIndex = combatant.abilities.findIndex((ability) =>
+        pickAbility(combatant.abilities, ability, now, 'end'),
+      );
+      const currentAbility = combatant.abilities[currentAbilityIndex];
+      const isControl = isControlAbility(currentAbility);
+      const target = selectDefender(combatant, currentAbilityIndex);
+
+      const damage = {
+        amount: 0,
+        isCritical: false,
+      };
+      const heal = {
+        amount: 0,
+      };
+
+      const isWindUp = currentAbility.type === TYPE.WindUp;
+      const stunned = combatant.statuses.stunned;
+      const cocooned = combatant.statuses.cocooned;
+      const confused = combatant.statuses.confused;
+      const immobilized = stunned.value === 1 || cocooned.value === 1 || confused.value === 1;
+
+      if (now > 0) {
+        if (!immobilized && !isControl) {
+          injectAnimation(combatant, target, currentAbility, now, teams, events);
+        }
+
+        if (immobilized) {
+          if (stunned.value === 1 && stunned.ticks === 0) {
+            combatant.statuses.stunned = {
+              ticks: 0,
+              value: 0,
+            };
+          }
+          if (cocooned.value === 1 && cocooned.ticks === 0) {
+            combatant.statuses.cocooned = {
+              ticks: 0,
+              value: 0,
+            };
+          }
+          if (confused.value === 1 && confused.ticks === 0) {
+            combatant.statuses.confused = {
+              ticks: 0,
+              value: 0,
+            };
+          }
+        } else if (isWindUp && !isControl) {
+          const healingAmount = Math.floor(
+            combatant.combatStats.maxHealth * currentAbility.healing * healingEfficiency,
+          );
+
+          const missingHealth =
+            combatant.combatStats.maxHealth - combatant.combatStats.currentHealth;
+          const actualHealingDone = Math.min(healingAmount, missingHealth);
+
+          combatant.combatStats.currentHealth += actualHealingDone;
+          combatant.combatStats.bufferedHealth += actualHealingDone;
+          combatant.combatStats.healingReceived += actualHealingDone;
+
+          if (actualHealingDone > 0) {
+            bufferAudio(audio, SFX.chew, now - 200);
+            bufferAnimation(combatant, { ...VFX.heal, amount: actualHealingDone }, now);
+          } else if (healingAmount > 0) {
+            bufferAnimation(combatant, VFX.fullHealth, now);
+          }
+
+          applyNonEnemyStatuses(combatant, currentAbility, teams, now, audio);
+
+          // A cast that hatches into another entity (Egg → Scorchling) registers
+          // its spawn now; the swap itself runs once the pass is done.
+          if (currentAbility.replaceSelf && currentAbility.spawn) {
+            hatchEvents.push({ combatant, spec: currentAbility.spawn });
+          }
+
+          const attacksEnemy = currentAbility.target === 'enemy';
+
+          // Unstoppable attacks ignore the target's block and dodge entirely.
+          const stoppable = !hasStatus(currentAbility, 'unstoppable');
+
+          // Block chance is inert for a player with no shield equipped; NPCs block
+          // bare-handed (canBlock is baked per combatant in prepareCombatant).
+          const isBlocked =
+            attacksEnemy &&
+            stoppable &&
+            target.canBlock &&
+            isLucky(
+              target.combatStats.blockChance,
+              `${seed}_${tickCount}_${i}_blockChance`,
+              luckDisabled,
+            );
+
+          const isDodged =
+            attacksEnemy &&
+            stoppable &&
+            isLucky(
+              target.combatStats.dodgeChance,
+              `${seed}_${tickCount}_${i}_dodgeChance`,
+              luckDisabled,
+            );
+
+          const isMissed =
+            currentAbility.damage > 0 &&
+            !luckDisabled &&
+            !isLucky(
+              combatant.combatStats.hitChance +
+                hitChanceTakenModifier(target.statuses) +
+                hitChanceDealtModifier(combatant.statuses),
+              `${seed}_${tickCount}_${i}_hitChance`,
+              luckDisabled,
+            );
+
+          if (isBlocked) {
+            bufferAudio(audio, SFX.block, now - 100);
+            bufferAnimation(target, VFX.attackBlocked, now);
+            const blockedDamage = combatant.combatStats.damage * currentAbility.damage;
+            resolveTriggers(target, combatant, 'block', blockedDamage, now, audio, teams);
+          } else if (isDodged) {
+            bufferAudio(audio, SFX.dodge, now - 100);
+            bufferAnimation(target, VFX.attackDodged, now);
+            const dodgedDamage = combatant.combatStats.damage * currentAbility.damage;
+            resolveTriggers(target, combatant, 'dodge', dodgedDamage, now, audio, teams);
+          } else if (isMissed) {
+            bufferAudio(audio, SFX.dodge, now - 100);
+            bufferAnimation(target, VFX.attackMissed, now);
+          } else if (attacksEnemy) {
+            const isCritical = isLucky(
+              combatant.combatStats.criticalChance,
+              `${seed}_${tickCount}_${i}_criticalDamage`,
+              luckDisabled,
+            );
+
+            const abilityDamage = combatant.combatStats.damage * currentAbility.damage;
+            const weakenedDamage =
+              abilityDamage *
+              (1 + damageDealtBoost(combatant.statuses)) *
+              (1 + damageTakenBoost(target.statuses)) *
+              elementalMultiplier(currentAbility, target);
+            const criticalDamage =
+              weakenedDamage * (1 + (isCritical ? combatant.combatStats.criticalDamage : 0));
+            damage.amount = Math.floor(criticalDamage);
+            damage.isCritical = isCritical;
+
+            const armor = target.combatStats.currentArmor;
+            if (armor > 0) {
+              damage.amount = Math.max(0, damage.amount - armor);
+
+              const armorPenetration = combatant.combatStats.armorPenetration || 0;
+              if (armorPenetration > 0) {
+                const penetrated = Math.min(armorPenetration, armor);
+                target.combatStats.currentArmor = armor - penetrated;
+                bufferAnimation(target, { ...VFX.armorHurt, amount: penetrated }, now);
+              }
+
+              if (damage.amount === 0) {
+                bufferAnimation(target, { ...VFX.armorHurt, prevented: true }, now);
+                bufferAudio(audio, SFX.armorHit, now - 200);
+              }
+            }
+
+            target.combatStats.currentHealth -= damage.amount;
+            target.combatStats.bufferedHealth = Math.max(
+              0,
+              target.combatStats.bufferedHealth - damage.amount,
+            );
+
+            let playAudio = false;
+            if (damage.amount > 0) {
+              bufferAnimation(target, { ...VFX.hurt, ...damage }, now);
+              playAudio = true;
+            }
+
+            // A landed, survived blow fires the target's reactive 'damaged' triggers
+            // (e.g. Double Persona splits off a fragile double, Thorns counters). A
+            // lethal blow does not — the act ends with them. Counters scale off the
+            // attacker's full swing (abilityDamage), so a counter ignores how much the
+            // defender's armor soaked — matching the blocked case, which counters the
+            // full swing too.
+            if (damage.amount > 0 && target.combatStats.currentHealth > 0) {
+              resolveTriggers(target, combatant, 'damaged', abilityDamage, now, audio, teams);
+            }
+
+            applyEnemyStatuses(target, combatant, currentAbility);
+
+            if (
+              playAudio ||
+              hasStatus(currentAbility, 'bleeding') ||
+              currentAbility.name === 'Demoralizing Shout'
+            ) {
+              bufferAudio(audio, currentAbility.sfx, now - 200);
+            }
+          }
+
+          if (currentAbility.id === 'harden') {
+            if (combatant.combatStats.currentArmor > 0) {
+              combatant.combatStats.currentArmor = combatant.combatStats.maxArmor;
+            }
+          }
+        }
+      }
+
+      markKnockouts(teams, now);
+    });
+
+    orderedCombatantsEnding.forEach((combatant) => {
+      const endedAbility = combatant.abilities.find((ability) =>
+        pickAbility(combatant.abilities, ability, now, 'end'),
+      );
+      // A continuous (full-rotation) ability ends and restarts on the same tick;
+      // its stats were applied once and must persist, so don't remove them.
+      const restarts = combatant.abilities.find((ability) =>
+        pickAbility(combatant.abilities, ability, now, 'start'),
+      );
+      if (endedAbility === restarts) return;
+      removeAbilityStats(combatant, endedAbility);
+    });
+
+    // Resolve hatches: swap each caster for its offspring in the same slot, so the
+    // rest of the team keeps its seat. Done after the passes (and before the
+    // snapshot) so this tick renders the hatched team.
+    hatchEvents.forEach(({ combatant, spec }) => {
+      const team = teams[combatant.teamIndex];
+      const idx = team.combatants.indexOf(combatant);
+      if (idx === -1) return;
+      replaceCombatant(teams, combatant.teamIndex, idx, spec);
+      bufferAudio(audio, SFX.boom, now - 100);
+    });
+
+    events.push(
+      structuredClone({
+        eventTimestamp: now,
+        teams,
+      }),
+    );
+
+    if (tickCount % 12 === 0 && tickCount !== 0) {
+      healingEfficiency = Math.max(0, healingEfficiency - 0.05);
+    }
+
+    now += COMBAT_TICK_TIME;
+    tickCount += 1;
+  }
+
+  const duration = events[events.length - 1]?.eventTimestamp;
+  const teamsEndState = events[events.length - 1].teams;
+  const winningTeam = teamsEndState.find((team) =>
+    team.combatants.some((combatant) => combatant.combatStats.currentHealth > 0),
+  );
+
+  const combined = Object.values(
+    audio.reduce((acc, item) => {
+      const key = `${item.sfxName}-${item.start}`;
+      if (!acc[key]) {
+        acc[key] = {
+          sfxName: item.sfxName,
+          start: item.start,
+          duration: item.duration,
+          id: item.id,
+          variants: item.variants,
+          count: 1,
+        };
+      } else {
+        acc[key].count += 1;
+      }
+      return acc;
+    }, {}),
+  );
+
+  return {
+    audio: combined,
+    events,
+    teamsStartState,
+    teamsEndState,
+    duration,
+    winningTeam,
+    fightId,
+    seed,
+    summary: combatSummary,
+    replayNonce: ++combatBuildSeq,
+  };
+};
+
+// Spin the whole arena so the viewing player's team sits where team 0 does (front-
+// left), so every client watches its own brawlers on the left. Positions are baked
+// screen coordinates (ringPosition: x = sin(rot)·R, y = cos(rot)·R about the ring
+// centre), so this is a rigid rotation of every point by −viewerTeamIndex·(360/teams)
+// degrees — a real rotation, not a relabelling of teams: combatant/team indices and
+// the winner are untouched, so the outcome stays identical everywhere. No-op when the
+// viewer is team 0 already or has no brawler in this fight (viewerTeamIndex < 0).
+export const rotateCombatToViewer = (combat, viewerTeamIndex) => {
+  const teamCount = combat.teamsStartState?.length || 0;
+  if (viewerTeamIndex <= 0 || teamCount < 2) return combat;
+
+  const deg = viewerTeamIndex * (360 / teamCount);
+  const rad = (deg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const rotatePoint = (o, kx, ky) => {
+    const x = o[kx];
+    const y = o[ky];
+    if (typeof x !== 'number' || typeof y !== 'number') return;
+    o[kx] = x * cos - y * sin;
+    o[ky] = x * sin + y * cos;
+  };
+
+  // A visited-set rotates each real object exactly once — load-bearing because the
+  // same objects recur across frames: teamsEndState aliases events[last].teams, and
+  // (crucially) one animation object is pushed by reference into every event snapshot
+  // from its start tick on (injectAnimation), so without per-animation dedup a multi-
+  // frame attack would rotate 3× and a 120° spin would wrap back to where it started.
+  const seen = new WeakSet();
+  const rotateCombatant = (c) => {
+    if (!c || seen.has(c)) return;
+    seen.add(c);
+    if (c.position && !seen.has(c.position)) {
+      seen.add(c.position);
+      rotatePoint(c.position, 'x', 'y');
+      if (typeof c.position.rot === 'number') c.position.rot -= deg;
+    }
+    (c.animations || []).forEach((a) => {
+      if (!a || seen.has(a)) return;
+      seen.add(a);
+      rotatePoint(a, 'startX', 'startY');
+      rotatePoint(a, 'endX', 'endY');
+      rotatePoint(a, 'targetX', 'targetY');
+    });
+  };
+  const rotateFrames = (teams) =>
+    (teams || []).forEach((team) => (team.combatants || []).forEach(rotateCombatant));
+
+  rotateFrames(combat.teamsStartState);
+  combat.events?.forEach((e) => rotateFrames(e.teams));
+  rotateFrames(combat.teamsEndState);
+
+  return combat;
+};
diff --git a/js/combatResult.js b/js/combatResult.js
new file mode 100644
index 00000000..7f1f66c6
--- /dev/null
+++ b/js/combatResult.js
@@ -0,0 +1,32 @@
+import { teamColor } from '/js/helpers.js';
+
+// Pure post-fight outcome helpers, shared by the live combat overlay (Combat.html
+// assigns them onto window for bare markup calls) and the /_internal preview page.
+// No side effects, no $ access — everything is derived from the passed combat object.
+
+export const combatEnded = (combat, elapsedMilliseconds) =>
+  combat.duration > 0 && elapsedMilliseconds >= combat.duration;
+
+export const combatOutcome = (combat) => {
+  const idx = combat.winningTeam?.index;
+  // Teamplay: my brawlers can be on any team, so the result is judged against the
+  // team I'm on, not team 0.
+  if (combat.context === 'teamplay')
+    return idx === undefined ? 'draw' : idx === combat.myTeamIndex ? 'victory' : 'defeat';
+  return idx === 0 ? 'victory' : idx === undefined ? 'draw' : 'defeat';
+};
+
+// Spectators (live watch or a re-watch) see a neutral result instead of win/lose:
+// the winning team by number, or DRAW. Participants fall through to combatOutcome.
+export const combatResultOutcome = (combat) =>
+  combat.spectator ? (combat.winningTeam ? 'spectator' : 'draw') : combatOutcome(combat);
+
+export const combatResultLabel = (combat) =>
+  combat.spectator && combat.winningTeam
+    ? combat.teamNames?.[combat.winningTeam.index] || `Team ${combat.winningTeam.index + 1}`
+    : '';
+
+// Winning side's palette colour, so a spectated result can tint the team name to
+// match the ring labels. Empty for participants (they see VICTORY/DEFEAT, not a team).
+export const combatResultTeamColor = (combat) =>
+  combat.spectator && combat.winningTeam ? teamColor(combat.winningTeam.index) : '';
diff --git a/js/config.js b/js/config.js
new file mode 100644
index 00000000..41e451ef
--- /dev/null
+++ b/js/config.js
@@ -0,0 +1,16 @@
+import { isTester as isTesterEmail } from '../server/constants/testers.js';
+import { isAdmin as isAdminEmail } from '../server/constants/admins.js';
+
+const IS_DEV = import.meta.env.VITE_VERCEL_ENV === 'development';
+
+export { isTesterEmail, isAdminEmail };
+
+export default {
+  WEBSOCKET_CONNECT: import.meta.env.VITE_WEBSOCKET_CONNECT ?? '',
+  ENVIRONMENT: import.meta.env.VITE_VERCEL_ENV ?? 'production',
+  IS_DEV,
+  IS_PROD: !IS_DEV,
+  AUTO_EMAIL: import.meta.env.VITE_AUTO_EMAIL ?? '',
+  AUTO_PASSWORD: import.meta.env.VITE_AUTO_PASSWORD ?? '',
+  WORKTREE: import.meta.env.VITE_WORKTREE ?? '',
+};
diff --git a/js/connectSocket.js b/js/connectSocket.js
new file mode 100644
index 00000000..55df3de7
--- /dev/null
+++ b/js/connectSocket.js
@@ -0,0 +1,123 @@
+import AsyncAwaitWebsocket from '@ape-egg/async-await-websockets';
+
+import config from '/js/config.js';
+import { buildDiffPayload, setSaveBaseline } from '/js/diff.js';
+import { initTeamplayListeners, resubscribe } from '/js/teamplay.js';
+import { PERSISTED_KEYS } from '/js/constants/DEFAULT_GAME_STATE.js';
+
+let saveTimeout = null;
+
+const buildSavePayload = () => ({
+  token: $.token,
+  timeOffset: $.clock.devOffset || 0,
+  ...Object.fromEntries(
+    PERSISTED_KEYS.map((key) => {
+      const value = $[key];
+      return [key, value && typeof value === 'object' ? JSON.parse(JSON.stringify(value)) : value];
+    }),
+  ),
+});
+
+// Diff against the last acknowledged save and send only what changed; commit the
+// snapshot as the new baseline once the server confirms. An empty diff is skipped.
+const persist = async () => {
+  const snapshot = buildSavePayload();
+  const payload = buildDiffPayload(snapshot);
+  if (!Object.keys(payload.update).length) return;
+  await $.socket.sendAsync('store-game-state', payload);
+  setSaveBaseline(snapshot);
+};
+
+const saveGameState = () => {
+  clearTimeout(saveTimeout);
+  saveTimeout = setTimeout(async () => {
+    if (!$.socket || !$.token) return;
+
+    await persist();
+
+    console.info('Game state saved');
+  }, 1000);
+};
+
+// Flush any pending debounced save immediately, wait for server ACK, and
+// return. Use this before a full-page navigation that depends on the saved
+// state being readable by the destination page (e.g. recruiting a brawler
+// and redirecting to /brawlers/<index>).
+export const saveNow = async () => {
+  clearTimeout(saveTimeout);
+  saveTimeout = null;
+  if (!$.socket || !$.token) return;
+  await persist();
+  console.info('Game state saved (forced)');
+};
+
+// Settings live in localStorage so they survive navigation. Each key is written
+// individually (matching how app.js reads them back on boot).
+const persistSettings = () => {
+  if (!$.settings) return;
+  Object.entries($.settings).forEach(([key, value]) => {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  });
+};
+
+let wasConnected = false;
+
+export const init = () => {
+  const ws = AsyncAwaitWebsocket(config.WEBSOCKET_CONNECT);
+
+  ws.on('open', (e) => {
+    $.socket = e.target;
+    if (wasConnected) notify.success('Connected to game server');
+    wasConnected = true;
+    // Rejoin any teamplay rooms the connection lost on a reconnect.
+    resubscribe();
+  });
+
+  ws.on('close', () => {
+    if ($.socket) notify.error("Can't connect to game server");
+    $.socket = undefined;
+  });
+
+  ws.on('broadcast', (data) => console.info('Broadcast:', data));
+
+  initTeamplayListeners(ws);
+
+  // Flush pending save before page unloads (MPA navigation, tab close, etc.).
+  // Settings persist synchronously here too: a change made right before leaving
+  // (e.g. toggling Test Mode) is written before the page goes, rather than racing
+  // the async afterUpdate write — which reads stale localStorage until it runs.
+  window.addEventListener('pagehide', () => {
+    persistSettings();
+    if (!saveTimeout || !$.socket || !$.token) return;
+    clearTimeout(saveTimeout);
+    const snapshot = buildSavePayload();
+    const payload = buildDiffPayload(snapshot);
+    if (Object.keys(payload.update).length) $.socket.sendAsync('store-game-state', payload);
+  });
+
+  $.on('afterUpdate', (current, prev) => {
+    persistSettings();
+
+    // Capture the just-loaded state as the diff baseline so the first save after boot
+    // only carries genuine changes, not a redundant re-send of everything we loaded.
+    if (current.gameStateLoaded && !prev.gameStateLoaded) setSaveBaseline(buildSavePayload());
+
+    // Only save when game data actually changed
+    if (
+      current.characters !== prev.characters ||
+      current.inventory !== prev.inventory ||
+      current.materials !== prev.materials ||
+      current.statistics !== prev.statistics ||
+      current.achievements !== prev.achievements ||
+      current.experience !== prev.experience ||
+      current.coins !== prev.coins ||
+      current.accountRewards !== prev.accountRewards ||
+      current.potions !== prev.potions ||
+      current.buildings !== prev.buildings ||
+      current.seasonPass !== prev.seasonPass ||
+      current.bossHighscore !== prev.bossHighscore
+    ) {
+      saveGameState();
+    }
+  });
+};
diff --git a/js/constants/ABILITIES.js b/js/constants/ABILITIES.js
new file mode 100644
index 00000000..b4528ff3
--- /dev/null
+++ b/js/constants/ABILITIES.js
@@ -0,0 +1,1524 @@
+import VFX from '/js/constants/VFX.js';
+import SFX from '/js/constants/SFX.js';
+import entity from '/js/entity.js';
+import { deepMerge } from '/js/helpers.js';
+import STATUS_EFFECTS, { STATUS_EFFECT } from '/js/constants/STATUS_EFFECTS.js';
+
+export const TYPE = {
+  WindUp: 'WindUp',
+  WindDown: 'WindDown',
+  Channeling: 'Channeling',
+};
+
+// DOT tick damage fractions (see dotValue in combat.js): a pure-DOT hit bleeds
+// for a flat share of total damage; a hit that also deals damage bleeds for a
+// share of that hit. Exported so descriptions and combat read the same number.
+export const DOT_TOTAL_DAMAGE_FRACTION = 0.2;
+export const DOT_HIT_DAMAGE_FRACTION = 0.3;
+
+// Formats a fraction as a percentage with up to one decimal (whole numbers stay
+// clean), keeping the %s in ability descriptions tied to their real values.
+const pct = (fraction) => `${+(Math.abs(fraction) * 100).toFixed(1)}%`;
+
+export const ALL_ABILITIES = {
+  stab: {
+    name: 'Stab',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A quick stab that wounds the target.',
+      extended: 'A quick stab that wounds the target.',
+    },
+    ticks: 2,
+    icon: 'stab',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 0.95,
+    healingModifier: null,
+  },
+  cut: {
+    name: 'Cut',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A quick cut that wounds the target.',
+      extended: 'A quick cut that wounds the target.',
+    },
+    ticks: 1,
+    icon: 'cut',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  daggerThrow: {
+    name: 'Dagger Throw',
+    type: TYPE.WindUp,
+    description: {
+      simple:
+        'Hurl your dagger in a flash — critical chance surges, but the throw lands for half damage.',
+      extended:
+        'Hurl your dagger in a flash — critical chance surges, but the throw lands for half damage.',
+    },
+    ticks: 1,
+    icon: 'daggerThrow',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 0.5,
+    healingModifier: null,
+    combatStats: { criticalChance: 1 },
+  },
+  pierce: {
+    name: 'Pierce',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A piercing shot that wounds the target.',
+      extended: 'A piercing shot that wounds the target.',
+    },
+    ticks: 3,
+    icon: 'bowshot',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.bowShot,
+    damageModifier: 0.95,
+    healingModifier: null,
+  },
+  powerShot: {
+    name: 'Powershot',
+    type: TYPE.WindUp,
+    description: {
+      simple:
+        'Draw the string taut for a piercing shot. While charging, critical chance and critical damage surge.',
+      extended:
+        'Draw the string taut for a piercing shot. While charging, critical chance and critical damage surge.',
+    },
+    ticks: 6,
+    icon: 'powerShot',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.bowShot,
+    damageModifier: 1,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.03, criticalDamage: 0.5 },
+  },
+  slingshot: {
+    name: 'Slingshot',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Whip a stone from a leather sling — a quick shot that almost never misses.',
+      extended: 'Whip a stone from a leather sling — a quick shot that almost never misses.',
+    },
+    ticks: 2,
+    icon: 'slingshot',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.bowShot,
+    damageModifier: 0.9,
+    healingModifier: null,
+    combatStats: { hitChance: 0.5 },
+  },
+  swing: {
+    name: 'Swing',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A sweeping swing that leaves the target exposed.',
+      extended: 'A sweeping swing that leaves the target exposed.',
+    },
+    ticks: 3,
+    icon: 'slash',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.exposed, 1]],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.swing,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  wideSwing: {
+    name: 'Wide Swing',
+    type: TYPE.WindUp,
+    elements: ['fire'],
+    description: {
+      simple: 'Wind up a sweeping arc that strikes every enemy at once.',
+      extended:
+        'Wind up a long, sweeping arc — when it lands, it carves through the entire enemy team.',
+    },
+    ticks: 4,
+    icon: 'wideSwing',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [],
+    vfx: VFX.whirlwind,
+    sfx: SFX.weaponSwing,
+    damageModifier: 0.6,
+    healingModifier: null,
+  },
+  slam: {
+    name: 'Slam',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A heavy slam that concusses the target.',
+      extended: 'A heavy slam that concusses the target.',
+    },
+    ticks: 4,
+    icon: 'slam',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.concussed, 1]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.slam,
+    damageModifier: 1.05,
+    healingModifier: null,
+  },
+  punch: {
+    name: 'Punch',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A basic punch.',
+      extended: 'A basic punch.',
+    },
+    ticks: 2,
+    icon: 'punch',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.punch,
+    damageModifier: 0.9,
+    healingModifier: null,
+  },
+  skewer: {
+    name: 'Skewer',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A quick strike that wounds the target.',
+      extended: 'A quick strike that wounds the target.',
+    },
+    ticks: 4,
+    icon: 'skewer',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  weave: {
+    name: 'Weave',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Spits clinging silk that builds toward a full cocoon.',
+      extended: 'Spits clinging silk that builds toward a full cocoon.',
+    },
+    ticks: 3,
+    icon: 'weave',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.webbed, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.bowShot,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  block: {
+    name: 'Block',
+    type: TYPE.Channeling,
+    description: {
+      simple:
+        'Raise your shield, bolstering your block chance against incoming attacks for the duration.',
+      extended: (a) =>
+        `Raise your shield, bolstering your block chance by <span text-green>${pct(a.combatStats.blockChance)}</span> against incoming attacks for the duration.`,
+    },
+    ticks: 3,
+    icon: 'block',
+    basic: true,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.block,
+    sfx: SFX.stab,
+    damageModifier: null,
+    healingModifier: null,
+    combatStats: { blockChance: 0.6 },
+  },
+  shieldBash: {
+    name: 'Shield Bash',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Lunge forward and bash your opponent with your shield.',
+      extended: 'Lunge forward and bash your opponent with your shield.',
+    },
+    ticks: 3,
+    icon: 'shieldBash',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.concussed, 1]],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.slam,
+    damageModifier: 1.05,
+    healingModifier: null,
+  },
+  mindsnap: {
+    name: 'Mindsnap',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Snap at your opponent’s mind, confusing them.',
+      extended:
+        'Snap at your opponent’s mind, confusing them for the ticks remaining in their current ability cast.',
+    },
+    ticks: 6,
+    icon: 'confused',
+    basic: false,
+    target: 'enemy',
+    elements: ['fire', 'lightning', 'nature', 'frost', 'earth'],
+    statusEffects: [[STATUS_EFFECT.confused, Infinity]],
+    vfx: VFX.kick,
+    sfx: SFX.mindsnap,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  whirlwind: {
+    name: 'Whirlwind',
+    type: TYPE.Channeling,
+    description: {
+      simple: 'Quickly spin and deal damage each tick.',
+      extended: 'Quickly spin and deal damage each tick.',
+    },
+    ticks: 10,
+    chainLink: 10,
+    icon: 'whirlwind',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.uninterruptable, 1]],
+    vfx: VFX.whirlwind,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  berserk: {
+    name: 'Berserk',
+    type: TYPE.Channeling,
+    elements: ['frost'],
+    description: {
+      simple:
+        'Fly into a frost-fueled frenzy, hacking the enemy each tick. The cast cannot be interrupted.',
+      extended:
+        'Fly into a frost-fueled frenzy, hacking the enemy each tick. The cast cannot be interrupted.',
+    },
+    ticks: 4,
+    chainLink: 4,
+    icon: 'berserk',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.uninterruptable, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  lacerate: {
+    name: 'Lacerate',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Bleeds your opponent for a portion of your total damage.',
+      extended: () =>
+        `Bleeds your opponent for <span text-green>${pct(DOT_TOTAL_DAMAGE_FRACTION)}</span> of your total damage.`,
+    },
+    ticks: 2,
+    icon: 'lacerate',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.bleeding, 2]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.doubleCut,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  demoralizingShout: {
+    name: 'Demoralizing Shout',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Weakens your opponent. They take more damage for the duration of the effect.',
+      extended: () =>
+        `Weakens your opponent. They take <span text-green>${pct(STATUS_EFFECTS.vulnerable.damageMultiplierIncoming)}</span> more damage for the duration of the effect.`,
+    },
+    ticks: 2,
+    icon: 'demoShout',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.vulnerable, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.bling,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  stoneskin: {
+    name: 'Stone Skin',
+    type: TYPE.WindDown,
+    elements: ['earth'],
+    description: {
+      simple: 'Hardens your skin to stone. Take less damage for the duration of the effect.',
+      extended: () =>
+        `Hardens your skin to stone. Take <span text-green>${pct(STATUS_EFFECTS.stoneskinned.damageMultiplierIncoming)}</span> less damage for the duration of the effect.`,
+    },
+    ticks: 2,
+    icon: 'stoneSkin',
+    basic: true,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.stoneskinned, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.armorHit,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  taunt: {
+    name: 'Taunt',
+    type: TYPE.Channeling,
+    elements: ['earth'],
+    description: {
+      simple: 'Roar a challenge, drawing the enemy onto yourself for the duration of the effect.',
+      extended: (a) =>
+        `Roar a challenge, raising your provocation by <span text-green>${a.combatStats.provocation}</span> so enemies are far more likely to strike you for the duration of the effect.`,
+    },
+    ticks: 3,
+    icon: 'taunt',
+    basic: false,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.filler,
+    sfx: SFX.warcry,
+    damageModifier: null,
+    healingModifier: null,
+    combatStats: { provocation: 50 },
+  },
+  smokebomb: {
+    name: 'Smoke Bomb',
+    type: TYPE.WindDown,
+    elements: ['lightning'],
+    description: {
+      simple:
+        'Vanish in a cloud of smoke. Attackers are less likely to hit you for the duration of the effect.',
+      extended: () =>
+        `Vanish in a cloud of smoke. Attackers are <span text-green>${pct(STATUS_EFFECTS.obscured.hitChanceModifierIncoming)}</span> less likely to hit you for the duration of the effect.`,
+    },
+    ticks: 2,
+    icon: 'smokeBomb',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.obscured, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.dodge,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  shieldWall: {
+    name: 'Shield Wall',
+    type: TYPE.WindUp,
+    elements: ['frost'],
+    description: {
+      simple:
+        'Lock shields into a wall of ice. All teammates take less damage for the duration of the effect.',
+      extended: () =>
+        `Lock shields into a wall of ice. All teammates take <span text-green>${pct(STATUS_EFFECTS.warded.damageMultiplierIncoming)}</span> less damage for the duration of the effect.`,
+    },
+    ticks: 6,
+    icon: 'block',
+    basic: true,
+    target: 'team',
+    statusEffects: [[STATUS_EFFECT.warded, 3]],
+    vfx: VFX.block,
+    sfx: SFX.block,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  spikeWall: {
+    name: 'Spike Wall',
+    type: TYPE.WindUp,
+    elements: ['earth'],
+    description: {
+      simple:
+        'Raise a wall of spikes. For the duration, every attack against you — landed or blocked — strikes back at the attacker.',
+      extended: () =>
+        `Raise a wall of spikes. For the duration, every attack against you — landed or blocked — returns <span text-green>${pct(STATUS_EFFECTS.thorns.trigger.returnDamage)}</span> of its damage to the attacker.`,
+    },
+    ticks: 4,
+    icon: 'spikeWall',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.thorns, 1]],
+    vfx: VFX.filler,
+    sfx: SFX.armorHit,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  warcry: {
+    name: 'War Cry',
+    type: TYPE.WindUp,
+    elements: ['frost'],
+    description: {
+      simple: 'Rally your team. All teammates deal more damage for the duration of the effect.',
+      extended: () =>
+        `Rally your team. All teammates deal <span text-green>${pct(STATUS_EFFECTS.inspired.damageMultiplierOutgoing)}</span> more damage for the duration of the effect.`,
+    },
+    ticks: 2,
+    icon: 'warCry',
+    basic: false,
+    target: 'team',
+    statusEffects: [[STATUS_EFFECT.inspired, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.warcry,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  intimidatingRoar: {
+    name: 'Intimidating Roar',
+    type: TYPE.WindUp,
+    elements: [],
+    description: {
+      simple:
+        'A bone-shaking roar. Your opponent takes more damage for the duration of the effect.',
+      extended: () =>
+        `A bone-shaking roar. Your opponent takes <span text-green>${pct(STATUS_EFFECTS.intimidated.damageMultiplierIncoming)}</span> more damage for the duration of the effect.`,
+    },
+    ticks: 2,
+    icon: 'intimidatingRoar',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.intimidated, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.bling,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  stomp: {
+    name: 'Stomp',
+    type: TYPE.WindUp,
+    elements: ['earth'],
+    description: {
+      simple:
+        'Rear back, then crash down. Every enemy receives concussion — enough to stagger most off their feet.',
+      extended:
+        'Rear back, then crash down. Every enemy receives concussion — enough to stagger most off their feet.',
+    },
+    ticks: 4,
+    icon: 'stomp',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [[STATUS_EFFECT.concussed, 2]],
+    vfx: VFX.stomp,
+    sfx: SFX.stomp,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  eatMeat: {
+    name: 'Eat Meat',
+    type: TYPE.Channeling,
+    elements: ['earth'],
+    description: {
+      simple: 'Tear into a slab of meat, restoring health with every bite.',
+      extended: (a) =>
+        `Tear into a slab of meat, restoring <span text-green>${pct(a.calc.healing().result)}</span> of max health per bite for a total of <span text-green>${pct(a.calc.healing().result * a.chainLink)}</span>.`,
+    },
+    ticks: 4,
+    chainLink: 2,
+    icon: 'meat',
+    basic: false,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.chew,
+    damageModifier: null,
+    healingModifier: 1,
+  },
+  cheesyTactics: {
+    name: 'Cheesy Tactics',
+    type: TYPE.Channeling,
+    elements: ['lightning'],
+    description: {
+      simple: 'Restores some health.',
+      extended: 'Restores some health.',
+    },
+    ticks: 9,
+    chainLink: 3,
+    icon: 'cheese',
+    basic: true,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.chew,
+    damageModifier: null,
+    healingModifier: 1,
+  },
+  alorasTouch: {
+    name: "Alora's Touch",
+    type: TYPE.WindUp,
+    elements: ['nature'],
+    description: {
+      simple: "Channel Alora's grace to restore a portion of max health.",
+      extended: (a) =>
+        `Channel Alora's grace to restore <span text-green>${pct(a.calc.healing().result)}</span> of max health.`,
+    },
+    ticks: 3,
+    icon: 'alorasTouch',
+    basic: false,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.powerReady,
+    damageModifier: null,
+    healingModifier: 1,
+  },
+  mend: {
+    name: 'Mend',
+    type: TYPE.Channeling,
+    elements: ['nature'],
+    description: {
+      simple: 'Clears all negative status effects from a random friendly teammate.',
+      extended:
+        'Each tick, clears all negative status effects from a random friendly teammate. Cannot be interrupted while casting.',
+    },
+    ticks: 2,
+    icon: 'mend',
+    basic: false,
+    target: 'ally',
+    statusEffects: [[STATUS_EFFECT.uninterruptable, 1]],
+    cleanse: true,
+    vfx: VFX.heal,
+    sfx: SFX.powerReady,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  bite: {
+    name: 'Bite',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A vicious bite.',
+      extended: 'A vicious bite.',
+    },
+    ticks: 2,
+    icon: 'bite',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.bleeding, 2]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  gore: {
+    name: 'Gore',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A goring tusk strike that wounds the enemy.',
+      extended: 'A goring tusk strike that wounds the enemy.',
+    },
+    ticks: 3,
+    icon: 'gore',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 1]],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  pounce: {
+    name: 'Pounce',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Coil low, then leap in fangs-first — a heavy landing that opens a bleeding wound.',
+      extended: 'Coil low, then leap in fangs-first — a heavy landing that opens a bleeding wound.',
+    },
+    ticks: 6,
+    icon: 'pounce',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.bleeding, 2]],
+    vfx: VFX.pounce,
+    sfx: SFX.slam,
+    damageModifier: 1.1,
+    healingModifier: null,
+  },
+  ripAndTear: {
+    name: 'Rip & Tear',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A flurry of raking claws that leave the target wounded.',
+      extended: 'A flurry of raking claws that leave the target wounded.',
+    },
+    ticks: 2,
+    icon: 'ripAndTear',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.swing,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  charge: {
+    name: 'Charge',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Barrel forward headlong — a heavy blow that stuns the target on impact.',
+      extended: 'Barrel forward headlong — a heavy blow that stuns the target on impact.',
+    },
+    ticks: 4,
+    icon: 'charge',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.stunned, 1]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.slam,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  poisonousSting: {
+    name: 'Poisonous Sting',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A venomous tail-stab that injects venom, building toward a debilitating poison.',
+      extended: 'A venomous tail-stab that injects venom, building toward a debilitating poison.',
+    },
+    ticks: 4,
+    icon: 'poisonousSting',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.envenomed, 1]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  execute: {
+    name: 'Execute',
+    type: TYPE.WindUp,
+    description: {
+      simple:
+        'Raise the axe for a slow, certain killing blow — unstoppable, and it almost always lands a devastating critical.',
+      extended:
+        'Raise the axe for a slow, certain killing blow. The strike cannot be blocked or dodged, and critical chance and critical damage surge enormously.',
+    },
+    ticks: 4,
+    icon: 'execute',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.unstoppable, 1]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.slam,
+    damageModifier: 0.8,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.85 },
+  },
+  boom: {
+    name: 'BOOM!',
+    type: TYPE.WindUp,
+    description: {
+      simple:
+        'Touch off the powder — a thunderous blast that almost always lands a critical and tears through armor.',
+      extended:
+        'Touch off the powder for a thunderous blast. Critical chance surges and the shot punches through 2 armor.',
+    },
+    ticks: 3,
+    icon: 'boom',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.boom,
+    sfx: SFX.boom,
+    damageModifier: 1,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.5, armorPenetration: 2 },
+  },
+  pretendToBeHumble: {
+    name: 'Haymaker!',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A long, telegraphed lunge. Lands hard at the end and leaves the target bleeding.',
+      extended: 'A long, telegraphed lunge. Lands hard at the end and leaves the target bleeding.',
+    },
+    ticks: 12,
+    icon: 'haymaker',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [
+      [STATUS_EFFECT.bleeding, 3],
+      [STATUS_EFFECT.uninterruptable, 1],
+      [STATUS_EFFECT.unstoppable, 1],
+    ],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.stab,
+    damageModifier: 0.5,
+    healingModifier: null,
+  },
+  harden: {
+    name: 'Harden',
+    type: TYPE.WindUp,
+    description: {
+      simple: "If armor isn't depleted regain all armor.",
+      extended: "If armor isn't depleted regain all armor.",
+    },
+    ticks: 1,
+    icon: 'fillArmor',
+    basic: true,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.stab,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  recharge: {
+    name: 'Recharge',
+    type: TYPE.Channeling,
+    description: {
+      simple: 'A long, telegraphed pause to recharge your energy.',
+      extended: 'A long, telegraphed pause to recharge your energy.',
+    },
+    ticks: 3,
+    icon: 'recharge',
+    basic: true,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.stab,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  playingTheVictim: {
+    name: 'Playing the Victim',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A long, drawn-out act.',
+      extended: 'A long, drawn-out act.',
+    },
+    ticks: 12,
+    icon: 'cross',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.stab,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  sunder: {
+    name: 'Sunder',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A splitting blow that leaves the target exposed, taking more damage.',
+      extended: () =>
+        `A splitting blow that stacks Exposed buildup, tipping into Vulnerable so the target takes <span text-green>${pct(STATUS_EFFECTS.vulnerable.damageMultiplierIncoming)}</span> more damage.`,
+    },
+    ticks: 3,
+    icon: 'sunder',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.exposed, 2]],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.slam,
+    damageModifier: 0.5,
+    healingModifier: null,
+  },
+  crushingBlow: {
+    name: 'Crushing Blow',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Wind up a heavy blow that concusses on impact and lands for bonus damage.',
+      extended: 'Wind up a heavy blow that concusses on impact and lands for bonus damage.',
+    },
+    ticks: 4,
+    icon: 'crushingBlow',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.concussed, 2]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.slam,
+    damageModifier: 0.5,
+    healingModifier: null,
+    combatStats: { armorPenetration: 15 },
+  },
+  aimedShot: {
+    name: 'Aimed Shot',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Take careful aim — critical chance and hit chance surge for a precise shot.',
+      extended: 'Take careful aim — critical chance and hit chance surge for a precise shot.',
+    },
+    ticks: 4,
+    icon: 'aimedShot',
+    basic: false,
+    target: 'enemy',
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.bowShot,
+    statusEffects: [],
+    damageModifier: 1,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.5, hitChance: 0.2 },
+  },
+  riposte: {
+    name: 'Riposte',
+    type: TYPE.Channeling,
+    description: {
+      simple:
+        'Settle into a duelist’s stance — dodge chance surges. While active, a dodged attack counters for a portion of the attacker’s damage.',
+      extended: () =>
+        `Settle into a duelist’s stance — dodge chance surges. While active, a dodged attack counters for <span text-green>${pct(STATUS_EFFECTS.riposting.trigger.returnDamage)}</span> of the attacker’s damage.`,
+    },
+    ticks: 4,
+    icon: 'riposte',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.riposting, 1]],
+    vfx: VFX.filler,
+    sfx: SFX.bling,
+    damageModifier: null,
+    healingModifier: null,
+    combatStats: { dodgeChance: 0.4 },
+  },
+  deflect: {
+    name: 'Deflect',
+    type: TYPE.Channeling,
+    description: {
+      simple:
+        'Raise the shield to deflect — block chance surges. While active, a blocked attack returns the attacker’s full damage.',
+      extended: () =>
+        `Raise the shield to deflect — block chance surges. While active, a blocked attack returns <span text-green>${pct(STATUS_EFFECTS.deflecting.trigger.returnDamage)}</span> of the attacker’s damage.`,
+    },
+    ticks: 2,
+    icon: 'deflect',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.deflecting, 1]],
+    vfx: VFX.block,
+    sfx: SFX.block,
+    damageModifier: null,
+    healingModifier: null,
+    combatStats: { blockChance: 0.4 },
+  },
+  doublePersona: {
+    name: 'Double Persona',
+    type: TYPE.Channeling,
+    elements: ['fire', 'lightning', 'nature', 'frost', 'earth'],
+    description: {
+      simple:
+        'Slip into a shifting two-faced act. Every blow that lands during it splits off a fragile double — but a killing blow ends the act for good.',
+      extended:
+        'Slip into a shifting two-faced act. Every blow that lands during it splits off a fragile double — but a killing blow ends the act for good.',
+    },
+    ticks: 3,
+    icon: 'doublePersona',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.splitting, 1]],
+    vfx: VFX.filler,
+    sfx: SFX.filler,
+    damageModifier: null,
+    healingModifier: null,
+    spawn: {
+      character: 'jester',
+      overrides: { level: 1, combatStats: { maxHealth: 1, currentHealth: 1 } },
+    },
+  },
+  emberStrike: {
+    name: 'Ember Strike',
+    type: TYPE.WindUp,
+    elements: ['fire'],
+    description: {
+      simple: 'A blazing strike — critical chance and critical damage surge as the embers bite.',
+      extended: 'A blazing strike — critical chance and critical damage surge as the embers bite.',
+    },
+    ticks: 3,
+    icon: 'emberStrike',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.emberStrike,
+    damageModifier: 1.1,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.1, criticalDamage: 0.3 },
+  },
+  goodBoys: {
+    name: 'Good boys!',
+    type: TYPE.WindUp,
+    elements: ['fire'],
+    description: {
+      simple: 'A roaring wave of fire that strikes three times before it lets go.',
+      extended: 'A roaring wave of fire that strikes three times before it lets go.',
+    },
+    ticks: 6,
+    chainLink: 3,
+    icon: 'goodBoys',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.emberStrike,
+    damageModifier: 1.3,
+    healingModifier: null,
+  },
+  hatch: {
+    name: 'Hatch',
+    type: TYPE.WindUp,
+    elements: [],
+    description: {
+      simple: 'The shell trembles and splits — something claws its way into the fight.',
+      extended: 'The shell trembles and splits — a Scorchling claws its way into the fight.',
+    },
+    ticks: 15,
+    icon: 'hatch',
+    basic: false,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.hatch,
+    sfx: SFX.boom,
+    damageModifier: null,
+    healingModifier: null,
+    spawn: { character: 'scorchLing' },
+    replaceSelf: true,
+  },
+  frostbite: {
+    name: 'Frostbite',
+    type: TYPE.WindUp,
+    elements: ['frost'],
+    description: {
+      simple: 'A frost-clad strike that shatters on impact — critical damage surges.',
+      extended: 'A frost-clad strike that shatters on impact — critical damage surges.',
+    },
+    ticks: 3,
+    icon: 'frostStrike',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackRegular,
+    sfx: SFX.stab,
+    damageModifier: 1.05,
+    healingModifier: null,
+    combatStats: { criticalDamage: 0.4 },
+  },
+  stormStrike: {
+    name: 'Storm Strike',
+    type: TYPE.WindUp,
+    elements: ['lightning'],
+    description: {
+      simple: 'Lightning crackles down the weapon — critical chance surges for a sudden strike.',
+      extended: 'Lightning crackles down the weapon — critical chance surges for a sudden strike.',
+    },
+    ticks: 3,
+    icon: 'stormStrike',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1.05,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.2 },
+  },
+  rendingFrenzy: {
+    name: 'Rending Frenzy',
+    type: TYPE.WindUp,
+    elements: ['lightning'],
+    description: {
+      simple: 'A frenzied storm of claws that leaves the target badly wounded.',
+      extended: 'A frenzied storm of claws that leaves the target badly wounded.',
+    },
+    ticks: 8,
+    chainLink: 1,
+    icon: 'rendingFrenzy',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 3]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+  },
+  lightningStorm: {
+    name: 'Lightning Storm',
+    type: TYPE.WindUp,
+    elements: ['lightning'],
+    description: {
+      simple: 'Call down the storm — an unstoppable barrage that cannot be interrupted.',
+      extended:
+        'Call down the storm — an unstoppable barrage that cannot be blocked, dodged, or interrupted.',
+    },
+    ticks: 12,
+    chainLink: 12,
+    icon: 'lightningStorm',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [
+      [STATUS_EFFECT.uninterruptable, 1],
+      [STATUS_EFFECT.unstoppable, 1],
+    ],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 0.5,
+    healingModifier: null,
+  },
+  stoneShatter: {
+    name: 'Stone Shatter',
+    type: TYPE.WindUp,
+    elements: ['earth'],
+    description: {
+      simple:
+        'An earth-shaking blow that concusses the target — armor penetration surges, cracking their guard.',
+      extended:
+        'An earth-shaking blow that concusses the target — armor penetration surges, cracking their guard.',
+    },
+    ticks: 6,
+    icon: 'stoneShatter',
+    basic: true,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.concussed, 1]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.slam,
+    damageModifier: 1.1,
+    healingModifier: null,
+    combatStats: { armorPenetration: 4 },
+  },
+  wildGrowth: {
+    name: 'Wild Growth',
+    type: TYPE.WindUp,
+    elements: ['nature'],
+    description: {
+      simple: 'Channel nature’s vigor to restore a portion of your health.',
+      extended: 'Channel nature’s vigor to restore a portion of your health.',
+    },
+    ticks: 4,
+    icon: 'wildGrowth',
+    basic: false,
+    target: 'self',
+    statusEffects: [],
+    vfx: VFX.heal,
+    sfx: SFX.powerReady,
+    damageModifier: null,
+    healingModifier: 1,
+  },
+  fireBreath: {
+    name: "Dragon's Breath",
+    type: TYPE.Channeling,
+    elements: ['fire'],
+    description: {
+      simple: 'Exhale a roaring stream of flame that sears every enemy for as long as it sustains.',
+      extended:
+        'Exhale a roaring stream of flame. While channeling, every enemy is seared each tick — the hottest of the breaths, and the most likely to land a critical.',
+    },
+    ticks: 4,
+    icon: 'dragonBreath',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [],
+    vfx: VFX.boom,
+    sfx: SFX.boom,
+    damageModifier: 2,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.25, criticalDamage: 0.5 },
+  },
+  frostBreath: {
+    name: "Dragon's Breath",
+    type: TYPE.Channeling,
+    elements: ['frost'],
+    description: {
+      simple:
+        'Breathe out a slow, biting cold that washes the whole arena and numbs every enemy toward a freeze.',
+      extended:
+        'Breathe out a slow, biting cold. While channeling, every enemy takes steady frost damage and gathers concussion each completion — enough cold, and they freeze solid.',
+    },
+    ticks: 5,
+    icon: 'dragonBreath',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [[STATUS_EFFECT.concussed, 0.8]],
+    vfx: VFX.boom,
+    sfx: SFX.boom,
+    damageModifier: 2,
+    healingModifier: null,
+  },
+  natureBreath: {
+    name: "Dragon's Breath",
+    type: TYPE.Channeling,
+    elements: ['nature'],
+    description: {
+      simple:
+        'Spew a cloud of choking spores over every enemy, rotting their defences while it lingers.',
+      extended: () =>
+        `Spew a cloud of choking spores. While channeling, every enemy takes nature damage each tick and is left vulnerable, taking <span text-green>${pct(STATUS_EFFECTS.vulnerable.damageMultiplierIncoming)}</span> increased damage from every source.`,
+    },
+    ticks: 4,
+    icon: 'dragonBreath',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [[STATUS_EFFECT.vulnerable, 1]],
+    vfx: VFX.boom,
+    sfx: SFX.boom,
+    damageModifier: 2,
+    healingModifier: null,
+  },
+  lightningBreath: {
+    name: "Dragon's Breath",
+    type: TYPE.Channeling,
+    elements: ['lightning'],
+    description: {
+      simple: 'Loose a crackling arc that forks across every enemy in rapid, stuttering pulses.',
+      extended:
+        'Loose a crackling arc of lightning. The fastest of the breaths — it forks across every enemy in rapid pulses, with a high chance to crit each one.',
+    },
+    ticks: 3,
+    icon: 'dragonBreath',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [],
+    vfx: VFX.boom,
+    sfx: SFX.boom,
+    damageModifier: 2,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.4 },
+  },
+  earthBreath: {
+    name: "Dragon's Breath",
+    type: TYPE.Channeling,
+    elements: ['earth'],
+    description: {
+      simple:
+        'Blast a torrent of grit and stone shards across every enemy, shredding armour as it grinds them down.',
+      extended:
+        'Blast a torrent of grit and stone shards. While channeling, every enemy takes earth damage each tick, the shards tear through armour, and the pummelling staggers them toward a stun.',
+    },
+    ticks: 4,
+    icon: 'dragonBreath',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [[STATUS_EFFECT.concussed, 1.5]],
+    vfx: VFX.stomp,
+    sfx: SFX.boom,
+    damageModifier: 2,
+    healingModifier: null,
+    combatStats: { armorPenetration: 3 },
+  },
+  catch: {
+    name: 'Catch!',
+    type: TYPE.WindUp,
+    elements: ['lightning'],
+    description: {
+      simple: 'Wind up and lob a stick of dynamite that detonates across the whole enemy team.',
+      extended: (a) =>
+        `Wind up and lob a stick of dynamite at the current foe. It detonates on impact, dealing <span text-green>${pct(a.calc.damage().result)}</span> of your damage to every enemy.`,
+    },
+    ticks: 4,
+    icon: 'dynamite',
+    basic: false,
+    target: 'enemies',
+    statusEffects: [],
+    vfx: VFX.catchThrow,
+    sfx: SFX.boom,
+    damageModifier: 0.75,
+    healingModifier: null,
+    projectile: { icon: 'dynamite', trajectory: 'arc', spin: 720 },
+    combatStats: {
+      criticalChance: -0.5,
+    },
+  },
+
+  // --- Blacksmith abilities (Brog & Grukk gear). All non-elemental, built from
+  // existing combat mechanics to fill gaps the pool didn't cover. Icons are new
+  // placeholder keys pending art (see TODO.md); vfx/sfx reuse existing assets so
+  // combat renders correctly until bespoke ones are made. ---
+  rupture: {
+    name: 'Rupture',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A deep, tearing cut that floods the wound with heavy bleed buildup.',
+      extended:
+        'A deep, tearing cut that stacks heavy Wounded buildup, tipping the target into Bleeding.',
+    },
+    ticks: 3,
+    icon: 'rupture',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.wounded, 3]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.stab,
+    damageModifier: 0.95,
+    healingModifier: null,
+  },
+  dazingBlow: {
+    name: 'Dazing Blow',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A rattling swing that leaves the target dazed and prone to missing.',
+      extended: () =>
+        `A rattling swing to the head that leaves the target Dazed, cutting their hit chance by <span text-green>${pct(STATUS_EFFECTS.dazed.hitChanceModifierOutgoing)}</span> for half the wind-up.`,
+    },
+    ticks: 2,
+    icon: 'dazingBlow',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.dazed, 0.5]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 0.85,
+    healingModifier: null,
+  },
+  pommelStrike: {
+    name: 'Pommel Strike',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'A fast crack to the head that rattles the skull toward a stun.',
+      extended: 'A fast crack to the head that stacks Concussed buildup, tipping into a Stun.',
+    },
+    ticks: 2,
+    icon: 'pommelStrike',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.concussed, 2]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.slam,
+    damageModifier: 0.9,
+    healingModifier: null,
+  },
+  exposeArmor: {
+    name: 'Expose Armor',
+    type: TYPE.WindUp,
+    description: {
+      simple: 'Pry into a gap in the guard so every later hit lands harder.',
+      extended: () =>
+        `Pry into a gap in the guard, stacking Exposed buildup that tips into Vulnerable so the target takes <span text-green>${pct(STATUS_EFFECTS.vulnerable.damageMultiplierIncoming)}</span> more damage.`,
+    },
+    ticks: 2,
+    icon: 'exposeArmor',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.exposed, 2]],
+    vfx: VFX.basicAttackSlow,
+    sfx: SFX.slam,
+    damageModifier: 0.9,
+    healingModifier: null,
+  },
+  bloodlust: {
+    name: 'Bloodlust',
+    type: TYPE.Channeling,
+    description: {
+      simple:
+        'Fly into a killing fever, hacking the enemy each tick while critical chance and damage surge. Cannot be interrupted.',
+      extended:
+        'Fly into a killing fever, hacking the enemy each tick. Critical chance and critical damage surge for the duration, so every blow can crit. The cast cannot be interrupted.',
+    },
+    ticks: 4,
+    chainLink: 4,
+    icon: 'bloodlust',
+    basic: false,
+    target: 'enemy',
+    statusEffects: [[STATUS_EFFECT.uninterruptable, 1]],
+    vfx: VFX.basicAttackFast,
+    sfx: SFX.stab,
+    damageModifier: 1,
+    healingModifier: null,
+    combatStats: { criticalChance: 0.3, criticalDamage: 0.3 },
+  },
+  bulwark: {
+    name: 'Bulwark',
+    type: TYPE.WindDown,
+    description: {
+      simple: 'Set your stance behind the shield and take less damage for a time.',
+      extended: () =>
+        `Set your stance behind the shield — Warded, you take <span text-green>${pct(STATUS_EFFECTS.warded.damageMultiplierIncoming)}</span> less damage for the duration.`,
+    },
+    ticks: 2,
+    icon: 'bulwark',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.warded, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.armorHit,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  guardian: {
+    name: 'Guardian',
+    type: TYPE.WindDown,
+    description: {
+      simple: 'Throw your guard over an ally so they take less damage for a time.',
+      extended: () =>
+        `Throw your guard over an ally — Warded, they take <span text-green>${pct(STATUS_EFFECTS.warded.damageMultiplierIncoming)}</span> less damage for the duration.`,
+    },
+    ticks: 2,
+    icon: 'guardian',
+    basic: false,
+    target: 'ally',
+    statusEffects: [[STATUS_EFFECT.warded, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.armorHit,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  warBanner: {
+    name: 'War Banner',
+    type: TYPE.WindDown,
+    description: {
+      simple: 'Plant the banner — the whole team strikes harder for a time.',
+      extended: () =>
+        `Plant the banner and rally the line — every teammate is Inspired, dealing <span text-green>${pct(STATUS_EFFECTS.inspired.damageMultiplierOutgoing)}</span> more damage for the duration.`,
+    },
+    ticks: 2,
+    icon: 'warBanner',
+    basic: false,
+    target: 'team',
+    statusEffects: [[STATUS_EFFECT.inspired, 3]],
+    vfx: VFX.filler,
+    sfx: SFX.bling,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  aegis: {
+    name: 'Aegis',
+    type: TYPE.WindDown,
+    description: {
+      simple: 'Raise a guard over the whole team — everyone takes less damage for a time.',
+      extended: () =>
+        `Raise a guard over the whole team — every teammate is Warded, taking <span text-green>${pct(STATUS_EFFECTS.warded.damageMultiplierIncoming)}</span> less damage for the duration.`,
+    },
+    ticks: 2,
+    icon: 'aegis',
+    basic: false,
+    target: 'team',
+    statusEffects: [[STATUS_EFFECT.warded, 2]],
+    vfx: VFX.filler,
+    sfx: SFX.armorHit,
+    damageModifier: null,
+    healingModifier: null,
+  },
+  adrenaline: {
+    name: 'Adrenaline',
+    type: TYPE.Channeling,
+    description: {
+      simple: 'Surge with adrenaline — mend with every beat while shrugging off blows.',
+      extended: (a) =>
+        `Surge with adrenaline, restoring <span text-green>${pct(a.calc.healing().result)}</span> of max health each tick — <span text-green>${pct(a.calc.healing().result * a.chainLink)}</span> across the channel — while taking <span text-green>${pct(STATUS_EFFECTS.adrenalized.damageMultiplierIncoming)}</span> less damage as you channel.`,
+    },
+    ticks: 6,
+    chainLink: 6,
+    icon: 'adrenaline',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.adrenalized, 1]],
+    vfx: VFX.heal,
+    sfx: SFX.bling,
+    damageModifier: null,
+    healingModifier: 1.3,
+  },
+  unbreakable: {
+    name: 'Unbreakable',
+    type: TYPE.WindDown,
+    description: {
+      simple: 'Dig in — pull the enemy onto you and shrug off the worst of it.',
+      extended: () =>
+        `Dig in and roar a challenge — provocation surges to pull attacks onto you while you are Warded, taking <span text-green>${pct(STATUS_EFFECTS.warded.damageMultiplierIncoming)}</span> less damage.`,
+    },
+    ticks: 3,
+    icon: 'unbreakable',
+    basic: false,
+    target: 'self',
+    statusEffects: [[STATUS_EFFECT.warded, 4]],
+    vfx: VFX.filler,
+    sfx: SFX.armorHit,
+    damageModifier: null,
+    healingModifier: null,
+    combatStats: { provocation: 30 },
+  },
+};
+
+// Reference tick count where a modifier of 1 yields a full 100% result. Damage
+// peaks at 6 ticks; healing is deliberately slower (a full heal wants a 12-tick
+// channel), so a short heal is a fraction and chainLink drips cost total.
+const DAMAGE_MAX_TICKS = 6;
+const HEALING_MAX_TICKS = 6;
+
+const scalingCalc = (ticks, modifier = 1, maxTicks = DAMAGE_MAX_TICKS) => {
+  if (modifier === null) return;
+
+  const mod = 1.25;
+  const base = ticks / maxTicks;
+  const pow = +Math.pow(base, mod).toFixed(2);
+  const result = +(pow * modifier).toFixed(2);
+
+  return { base, pow, modifier, result };
+};
+
+// chainLink abilities scale off their full duration, then split that result
+// evenly across the bites — so the per-bite value × chainLink equals a single
+// undivided hit of the same length (no convexity penalty for dripping it out).
+const splitForChain = (scaled, chainLink) =>
+  scaled && chainLink ? { ...scaled, result: scaled.result / chainLink } : scaled;
+
+function damageCalc() {
+  return splitForChain(scalingCalc(this.ticks, this.damageModifier), this.chainLink);
+}
+
+function healingCalc() {
+  return splitForChain(
+    scalingCalc(this.ticks, this.healingModifier, HEALING_MAX_TICKS),
+    this.chainLink,
+  );
+}
+
+function attachCalcs(a) {
+  Object.defineProperty(a, 'calc', {
+    enumerable: true,
+    get() {
+      return {
+        damage: damageCalc.bind(a),
+        healing: healingCalc.bind(a),
+      };
+    },
+  });
+  return a;
+}
+
+// Merging meta.overrides must not touch the caller's ref — refs are often live
+// state ($.characters), and deepMerge mutates its target. Clone first.
+export default (id, fullBody = false, meta) => {
+  const ent = entity(
+    ALL_ABILITIES,
+    typeof id === 'string' ? id : id.id,
+    typeof id === 'string' ? undefined : id.uuid,
+    fullBody,
+    typeof id === 'string'
+      ? meta?.overrides
+      : meta?.overrides
+        ? deepMerge(JSON.parse(JSON.stringify(id.overrides || {})), meta.overrides || {})
+        : id.overrides,
+  );
+
+  if (!fullBody) return ent;
+
+  // Descriptions are presentation-only templates (often functions of the ability)
+  // resolved on demand from ALL_ABILITIES at tooltip time. They must never ride on
+  // hydrated instances, which flow into combat teams + saved game state and get
+  // structuredClone'd — a function there throws DataCloneError.
+  delete ent.description;
+
+  // chainLink is how many times the ability fires across its duration, so it can
+  // never exceed ticks — every authored ability keeps an interval (ticks/chainLink)
+  // of at least one tick. A stale instance whose ticks were overridden without a
+  // matching chainLink (e.g. a 4-tick whirlwind left on the base chainLink of 10)
+  // would otherwise read "triggers each 0.4 ticks" and fire sub-tick in combat.
+  if (ent.chainLink > ent.ticks) ent.chainLink = ent.ticks;
+
+  return attachCalcs(ent);
+};
diff --git a/js/constants/ACCESSORY_TYPES.js b/js/constants/ACCESSORY_TYPES.js
new file mode 100644
index 00000000..f01e2124
--- /dev/null
+++ b/js/constants/ACCESSORY_TYPES.js
@@ -0,0 +1,7 @@
+export const ACCESSORY_TYPES = {
+  ring: { name: 'ring', races: [] },
+  amulet: { name: 'amulet', races: [] },
+  charm: { name: 'charm', races: [] },
+};
+
+export default ACCESSORY_TYPES;
diff --git a/js/constants/ACCOUNT_TITLES.js b/js/constants/ACCOUNT_TITLES.js
new file mode 100644
index 00000000..76d5fef6
--- /dev/null
+++ b/js/constants/ACCOUNT_TITLES.js
@@ -0,0 +1,19 @@
+// Account titles — cosmetic banners a player can wear, unlocked by achievements
+// (the unlocked set is derived from earned achievements that grant one, so titles
+// need no separate store). Placeholder copy for now; revise down the line.
+export const ALL_TITLES = {
+  bloodborn: {
+    name: 'Bloodborn',
+    description: 'Drew first blood in the Arena.',
+  },
+  centurion: {
+    name: 'Centurion',
+    description: 'A hundred Arena victories to their name.',
+  },
+  ascendant: {
+    name: 'Ascendant',
+    description: 'Reached the very height of their power.',
+  },
+};
+
+export default (id) => (id && ALL_TITLES[id] ? { id, ...ALL_TITLES[id] } : undefined);
diff --git a/js/constants/ACHIEVEMENTS.js b/js/constants/ACHIEVEMENTS.js
new file mode 100644
index 00000000..62452f14
--- /dev/null
+++ b/js/constants/ACHIEVEMENTS.js
@@ -0,0 +1,151 @@
+// Achievements — long-running objectives whose criteria DERIVE from the statistics
+// tree ($.statistics / merged lifetime). Each entry names a stat path + threshold;
+// progress and earned-state fall straight out of the numbers already tracked.
+//
+// scope:
+//   'seasonal' — recurs every season; evaluated against the CURRENT season's stats.
+//   'account'  — permanent; evaluated against LIFETIME (all-season merged) stats.
+// reward.title (optional) unlocks an ACCOUNT_TITLES entry on earn.
+// scale: stored stats finer-grained than shown (crystals tracked in hundredths) divide
+// by this before comparing, so thresholds read in display units.
+
+export const ACH_CATEGORY_LABELS = {
+  combat: 'Combat',
+  progression: 'Progression',
+  economy: 'Economy',
+  social: 'Social',
+};
+
+export const ALL_ACHIEVEMENTS = [
+  // ── Seasonal — reset and re-earnable each season ──
+  {
+    id: 'seasonFirstWin',
+    scope: 'seasonal',
+    category: 'combat',
+    title: 'First Blood',
+    icon: 'victory',
+    path: 'combat.pve.wins',
+    threshold: 1,
+    description: 'Win your first fight this season',
+    reward: { title: 'bloodborn' },
+  },
+  {
+    id: 'seasonArenaTen',
+    scope: 'seasonal',
+    category: 'combat',
+    title: 'Arena Regular',
+    icon: 'brawlers',
+    path: 'combat.pve.wins',
+    threshold: 10,
+    description: 'Win 10 PVE-fights this season',
+  },
+  {
+    id: 'seasonRisingStar',
+    scope: 'seasonal',
+    category: 'progression',
+    title: 'Rising Star',
+    icon: 'experience',
+    path: 'progression.level.amount',
+    threshold: 10,
+    description: 'Reach level 10 this season',
+  },
+  {
+    id: 'seasonCoffers',
+    scope: 'seasonal',
+    category: 'economy',
+    title: 'Coffers Filling',
+    icon: 'crystal',
+    path: 'economy.crystals.earned',
+    threshold: 25,
+    scale: 100,
+    description: 'Earn 25 crystals this season',
+  },
+
+  // ── Account — permanent, accumulate across every season ──
+  {
+    id: 'accountCenturion',
+    scope: 'account',
+    category: 'combat',
+    title: 'Centurion',
+    icon: 'victory',
+    path: 'combat.pve.wins',
+    threshold: 100,
+    description: 'Win 100 PVE-fights across all seasons',
+    reward: { title: 'centurion' },
+  },
+  {
+    id: 'accountWarlord',
+    scope: 'account',
+    category: 'combat',
+    title: 'Warlord of the Sands',
+    icon: 'brawlers',
+    path: 'combat.pve.wins',
+    threshold: 1000,
+    description: 'Win 1,000 PVE-fights across all seasons',
+  },
+  {
+    id: 'accountAscendant',
+    scope: 'account',
+    category: 'progression',
+    title: 'End gamer',
+    icon: 'experience',
+    path: 'progression.level.amount',
+    threshold: 25,
+    description: 'Reach level 25',
+    reward: { title: 'ascendant' },
+  },
+  {
+    id: 'accountIntoTheWild',
+    scope: 'account',
+    category: 'progression',
+    title: 'Breaking free',
+    icon: 'the-arena',
+    path: 'progression.bossHighscore.amount',
+    threshold: 15,
+    description: 'Defeat The Emperor',
+  },
+  {
+    id: 'accountFirstTeamplay',
+    scope: 'account',
+    category: 'social',
+    title: 'Rally Cry',
+    icon: 'brawlers',
+    path: 'social.teamplay.created',
+    threshold: 1,
+    description: 'Create your first teamplay',
+  },
+];
+
+export const ACHIEVEMENTS_BY_ID = Object.fromEntries(ALL_ACHIEVEMENTS.map((a) => [a.id, a]));
+
+// Read a leaf out of a statistics tree by dotted path. Count-stats and max-stats both
+// store on the leaf node; primitive leaves are bare numbers. Missing path → 0.
+export const readStat = (tree, path) => {
+  const node = path
+    .split('.')
+    .reduce((n, k) => (n && n.nodes ? n.nodes[k] : undefined), tree || {});
+  if (node == null) return 0;
+  return typeof node === 'number' ? node : (node.max ?? node.count ?? 0);
+};
+
+export const achProgress = (ach, tree) => {
+  const value = readStat(tree, ach.path) / (ach.scale || 1);
+  return {
+    value,
+    threshold: ach.threshold,
+    ratio: ach.threshold ? Math.min(1, value / ach.threshold) : 0,
+    met: value >= ach.threshold,
+  };
+};
+
+// Distinct categories present for a scope, in catalog order.
+export const scopeCategories = (scope) =>
+  ALL_ACHIEVEMENTS.filter((a) => a.scope === scope).reduce(
+    (cats, a) => (cats.includes(a.category) ? cats : [...cats, a.category]),
+    [],
+  );
+
+export const achievementsIn = (scope, category) =>
+  ALL_ACHIEVEMENTS.filter((a) => a.scope === scope && a.category === category);
+
+export default (id) => ACHIEVEMENTS_BY_ID[id];
diff --git a/js/constants/APP.js b/js/constants/APP.js
new file mode 100644
index 00000000..c1c10399
--- /dev/null
+++ b/js/constants/APP.js
@@ -0,0 +1,20 @@
+export const COMBAT_TICK_TIME = 400;
+export const COMBAT_RING_BASE_RADIUS = 250;
+// Vertical foreshortening of the combat ring — combatants sit on an ellipse, not a flat
+// circle, so the ring reads as lying on the tilted arena floor. boot.js publishes this to
+// CSS as --combat-tilt so the visual ring guides and team labels follow the same ellipse.
+export const COMBAT_RING_TILT = 0.38;
+// The outer (team-label) ring stands more upright than the combatant ring — a taller
+// ellipse — so each team's badge floats above its combatants in the distance (top) and
+// below them up close (bottom). Higher = more upright (1 = a full circle).
+export const COMBAT_OUTER_RING_TILT = 0.72;
+// Perspective depth scaling — with the ring tilted, combatants scale linearly with their
+// depth: nearest the camera (bottom of the ring) render this much larger, farthest (top)
+// this much smaller. Gated by perspectiveEnabled alongside the tilt.
+export const COMBAT_RING_DEPTH_SCALE = 0.25;
+// Glass-card opacity by depth: nearest the camera (bottom of the ring) is the most
+// translucent, fading down to NEAR — the 20% floor — while the farthest (top) is the most
+// opaque at FAR. Also gated by perspectiveEnabled.
+export const COMBAT_CARD_ALPHA_NEAR = 0.2;
+export const COMBAT_CARD_ALPHA_FAR = 0.6;
+export const ABILITY_PRIORITY = ['stab', 'pierce', 'punch', 'slam', 'swing', 'whirlwind', 'block'];
diff --git a/js/constants/ARENA.js b/js/constants/ARENA.js
new file mode 100644
index 00000000..efe35d5b
--- /dev/null
+++ b/js/constants/ARENA.js
@@ -0,0 +1,108 @@
+// The fixed skeleton the season seed fills. Brackets are identical every season — only
+// WHICH encounter lands in each slot, and which is promoted to boss, reshuffles, keyed
+// deterministically off the season's "YYYY-MM" seed (see js/seasonArena.js).
+
+// Each bracket spans levels [min, max]; the season seed drops one encounter per slot,
+// levels spread evenly. `boss: true` promotes the top-level slot to a boss. 11-15 spans
+// only 11-13 and promotes none — the Grand Champion (14) and Emperor (15) anchors cap it.
+export const BRACKETS = [
+  { tier: '2-5', min: 2, max: 5, boss: true },
+  { tier: '6-10', min: 6, max: 10, boss: true },
+  { tier: '11-15', min: 11, max: 13, boss: false },
+  { tier: '16-20', min: 16, max: 20, boss: true },
+  { tier: '21-25', min: 21, max: 25, boss: true },
+];
+
+// Slots per bracket = floor(reshuffle pool / 5). Pool is 45 today (66 arena NPCs − 5
+// dragons − 5 gods − 3 sticky bosses). A bracket with fewer eligible encounters than this
+// just fills fewer slots; a bracket with more rotates the surplus out each season. Tunable.
+export const SLOTS_PER_BRACKET = 9;
+
+// Each reshuffle fight displays as a level SPAN [slot, slot + SPAN_WIDTH] — e.g. a slot-2
+// fight reads "2 - 4" — to keep the ladder feeling dynamic, and scales as if it sat
+// SPAN_LIFT levels above its slot (a slight power-up toward the span's middle). Set
+// SPAN_LIFT to 0 for a purely cosmetic span. Anchors and the dragon/god endgame keep an
+// exact level.
+export const SPAN_WIDTH = 2;
+export const SPAN_LIFT = 1;
+
+// Always-present fights at fixed levels, outside the reshuffle. Lost Civilian opens the
+// arena, Grand Champion + Emperor cap the mid-game, dragons (30) and gods (40) are the
+// sticky endgame. `boss` grants the boss-stat bonus and the large card frame.
+export const ANCHORS = {
+  'lost-civilian': { level: 1, boss: false },
+  'the-grand-champion': { level: 14, boss: true },
+  'the-emperor': { level: 15, boss: true },
+  'nature-giant': { level: 25, boss: false },
+  ignius: { level: 30, boss: true },
+  'frigus-mortis': { level: 30, boss: true },
+  'vita-deserto': { level: 30, boss: true },
+  'erat-herba': { level: 30, boss: true },
+  'vento-mico': { level: 30, boss: true },
+  'ragnar-god-of-fire': { level: 40, boss: true },
+  'kyl-god-of-frost': { level: 40, boss: true },
+  'elise-goddess-of-earth': { level: 40, boss: true },
+  'alora-goddess-of-nature': { level: 40, boss: true },
+  'oskar-god-of-lightning': { level: 40, boss: true },
+};
+
+// The reshuffle pool for each bracket, by fight id. Seeded into the bracket's slots each
+// season. Seeded from each fight's old level midpoint; retune freely. A fight listed in
+// neither a pool nor ANCHORS never appears in the arena.
+export const TIER_POOLS = {
+  '2-5': [
+    'crazy-old-man',
+    'pitchfork-patrick',
+    'poor-poor-knight',
+    'jester',
+    'sabertooth-tiger',
+    'nomad',
+    'giant-scorpion',
+    'boar',
+    'giant-rat',
+  ],
+  '6-10': [
+    'queen-arachnae',
+    'regular-sized-combatant',
+    'executioner',
+    'beastmaster',
+    'hyena',
+    'pack-of-wolves',
+    'the-engineer',
+    'rhino',
+    'plague-doctor',
+    'desert-bandits',
+    'goblin-warband',
+  ],
+  '11-15': [
+    'secutor',
+    'blind-swordsman',
+    'dimachaerus',
+    'war-elephant',
+    'grizzly-bear',
+    'succubus',
+    'golem',
+  ],
+  '16-20': ['breff', 'armorillo', 'wyvern', 'mammoth', 'owl-bear', 'bullrock'],
+  '21-25': [
+    'cerberus',
+    'ulwar',
+    'herald',
+    'rune-stag',
+    'yeti',
+    'lightning-giant',
+    'onkh',
+    'warrus',
+    'fire-giant',
+    'earth-giant',
+    'frost-giant',
+  ],
+};
+
+// Spread n slots across [min, max], levels rising; the last slot is the boss when the
+// bracket promotes one. Returns [{ level, boss }] ascending, so the arena reads in order.
+export const bracketSlots = (min, max, n, boss) =>
+  Array.from({ length: n }, (_, i) => ({
+    level: n === 1 ? max : Math.round(min + ((max - min) * i) / (n - 1)),
+    boss: boss && i === n - 1,
+  }));
diff --git a/js/constants/ARMOR_TYPES.js b/js/constants/ARMOR_TYPES.js
new file mode 100644
index 00000000..931b73a2
--- /dev/null
+++ b/js/constants/ARMOR_TYPES.js
@@ -0,0 +1,7 @@
+export const ARMOR_TYPES = {
+  light: { name: 'light', races: [] },
+  medium: { name: 'medium', races: [] },
+  heavy: { name: 'heavy', races: [] },
+};
+
+export default ARMOR_TYPES;
diff --git a/js/constants/AVAILABLE_KEYS.js b/js/constants/AVAILABLE_KEYS.js
new file mode 100644
index 00000000..c57f495b
--- /dev/null
+++ b/js/constants/AVAILABLE_KEYS.js
@@ -0,0 +1,34 @@
+export default [
+  'keyw',
+  'keya',
+  'keys',
+  'keyd',
+  'keyi',
+  'keyq',
+  'keye',
+  'keyz',
+  'keyx',
+  'keyc',
+  'arrowright',
+  'arrowleft',
+  'arrowdown',
+  'arrowup',
+  'escape',
+  'enter',
+  'shiftleft',
+  'shiftright',
+  'digit1',
+  'digit2',
+  'digit3',
+  'digit4',
+  'digit5',
+  'numpad1',
+  'numpad2',
+  'numpad3',
+  'numpad4',
+  'numpad5',
+  'numpad6',
+  'numpad7',
+  'numpad8',
+  'numpad9',
+].reduce((a, key) => ({ ...a, [key]: false }), {});
diff --git a/js/constants/BOT_NAMES.js b/js/constants/BOT_NAMES.js
new file mode 100644
index 00000000..53823cf7
--- /dev/null
+++ b/js/constants/BOT_NAMES.js
@@ -0,0 +1,506 @@
+// Docker-style surnames (the right-of-dash half of "jovial-brattain") — famous
+// scientists, mathematicians, engineers and naturalists. Used only by the bot seeder
+// (scripts/seed-bots-core.js) to give each seeded bot a real accountName; stored on the
+// bot's game-state doc and read straight back in teamplay. Lowercase; capitalised on use.
+export const BOT_NAMES = [
+  'lovelace',
+  'turing',
+  'hopper',
+  'babbage',
+  'noether',
+  'hypatia',
+  'brattain',
+  'colden',
+  'lamarr',
+  'curie',
+  'einstein',
+  'newton',
+  'galileo',
+  'kepler',
+  'copernicus',
+  'hawking',
+  'bohr',
+  'heisenberg',
+  'schrodinger',
+  'dirac',
+  'feynman',
+  'planck',
+  'faraday',
+  'maxwell',
+  'tesla',
+  'edison',
+  'volta',
+  'ampere',
+  'ohm',
+  'watt',
+  'joule',
+  'kelvin',
+  'boyle',
+  'dalton',
+  'mendeleev',
+  'pauling',
+  'lavoisier',
+  'priestley',
+  'bunsen',
+  'arrhenius',
+  'darwin',
+  'mendel',
+  'pasteur',
+  'koch',
+  'fleming',
+  'salk',
+  'sabin',
+  'lister',
+  'jenner',
+  'harvey',
+  'linnaeus',
+  'wallace',
+  'goodall',
+  'carson',
+  'muir',
+  'audubon',
+  'cousteau',
+  'attenborough',
+  'leakey',
+  'fossey',
+  'euler',
+  'gauss',
+  'riemann',
+  'cantor',
+  'fermat',
+  'pascal',
+  'leibniz',
+  'fibonacci',
+  'ramanujan',
+  'erdos',
+  'hilbert',
+  'godel',
+  'cauchy',
+  'laplace',
+  'lagrange',
+  'poincare',
+  'galois',
+  'abel',
+  'jacobi',
+  'bernoulli',
+  'archimedes',
+  'euclid',
+  'pythagoras',
+  'ptolemy',
+  'democritus',
+  'thales',
+  'eratosthenes',
+  'apollonius',
+  'diophantus',
+  'hubble',
+  'sagan',
+  'herschel',
+  'halley',
+  'tycho',
+  'brahe',
+  'cassini',
+  'huygens',
+  'kuiper',
+  'oort',
+  'franklin',
+  'watson',
+  'crick',
+  'wilkins',
+  'mcclintock',
+  'morgan',
+  'sanger',
+  'avery',
+  'chargaff',
+  'khorana',
+  'shannon',
+  'neumann',
+  'mccarthy',
+  'minsky',
+  'dijkstra',
+  'knuth',
+  'ritchie',
+  'thompson',
+  'kernighan',
+  'torvalds',
+  'cerf',
+  'kahn',
+  'engelbart',
+  'licklider',
+  'sutherland',
+  'backus',
+  'hamming',
+  'hoare',
+  'liskov',
+  'lamport',
+  'wozniak',
+  'kilby',
+  'noyce',
+  'moore',
+  'shockley',
+  'bardeen',
+  'hoerni',
+  'faggin',
+  'hoff',
+  'mazor',
+  'galvani',
+  'coulomb',
+  'oersted',
+  'henry',
+  'weber',
+  'siemens',
+  'hertz',
+  'roentgen',
+  'becquerel',
+  'rutherford',
+  'thomson',
+  'chadwick',
+  'fermi',
+  'oppenheimer',
+  'teller',
+  'szilard',
+  'meitner',
+  'hahn',
+  'joliot',
+  'yalow',
+  'gell',
+  'higgs',
+  'weinberg',
+  'glashow',
+  'salam',
+  'wheeler',
+  'penrose',
+  'thorne',
+  'susskind',
+  'witten',
+  'feigenbaum',
+  'mandelbrot',
+  'lorenz',
+  'turcotte',
+  'prandtl',
+  'reynolds',
+  'navier',
+  'stokes',
+  'bernay',
+  'venturi',
+  'bessel',
+  'fourier',
+  'legendre',
+  'hermite',
+  'markov',
+  'kolmogorov',
+  'chebyshev',
+  'lyapunov',
+  'sobolev',
+  'banach',
+  'hausdorff',
+  'lebesgue',
+  'borel',
+  'weierstrass',
+  'dedekind',
+  'kronecker',
+  'klein',
+  'lie',
+  'weyl',
+  'grothendieck',
+  'serre',
+  'tao',
+  'perelman',
+  'wiles',
+  'conway',
+  'nash',
+  'shamir',
+  'rivest',
+  'adleman',
+  'diffie',
+  'hellman',
+  'merkle',
+  'goldwasser',
+  'blum',
+  'yao',
+  'karp',
+  'cook',
+  'levin',
+  'rabin',
+  'scott',
+  'floyd',
+  'tarjan',
+  'hopcroft',
+  'ullman',
+  'aho',
+  'sethi',
+  'wirth',
+  'iverson',
+  'perlis',
+  'newell',
+  'simon',
+  'lenat',
+  'brooks',
+  'hinton',
+  'bengio',
+  'lecun',
+  'schmidhuber',
+  'hochreiter',
+  'vapnik',
+  'valiant',
+  'pearl',
+  'kahneman',
+  'tversky',
+  'chomsky',
+  'skinner',
+  'pavlov',
+  'jung',
+  'piaget',
+  'vygotsky',
+  'maslow',
+  'milgram',
+  'asch',
+  'festinger',
+  'bandura',
+  'tinbergen',
+  'frisch',
+  'wilson',
+  'hamilton',
+  'maynard',
+  'trivers',
+  'dawkins',
+  'gould',
+  'eldredge',
+  'margulis',
+  'lovelock',
+  'haldane',
+  'fisher',
+  'wright',
+  'dobzhansky',
+  'mayr',
+  'simpson',
+  'huxley',
+  'hooke',
+  'leeuwenhoek',
+  'malpighi',
+  'schleiden',
+  'schwann',
+  'virchow',
+  'ramon',
+  'golgi',
+  'nissl',
+  'sherrington',
+  'eccles',
+  'hodgkin',
+  'katz',
+  'loewi',
+  'dale',
+  'banting',
+  'best',
+  'macleod',
+  'houssay',
+  'cori',
+  'krebs',
+  'lipmann',
+  'calvin',
+  'kornberg',
+  'nirenberg',
+  'ochoa',
+  'jacob',
+  'monod',
+  'lwoff',
+  'delbruck',
+  'luria',
+  'hershey',
+  'lederberg',
+  'tatum',
+  'beadle',
+  'ames',
+  'berg',
+  'boyer',
+  'cohen',
+  'mullis',
+  'smith',
+  'sharp',
+  'roberts',
+  'gilbert',
+  'maxam',
+  'venter',
+  'collins',
+  'lander',
+  'church',
+  'doudna',
+  'charpentier',
+  'zhang',
+  'blackburn',
+  'greider',
+  'szostak',
+  'hall',
+  'rosbash',
+  'young',
+  'kandel',
+  'axel',
+  'buck',
+  'tonegawa',
+  'jerne',
+  'kohler',
+  'milstein',
+  'edelman',
+  'porter',
+  'burnet',
+  'medawar',
+  'snell',
+  'dausset',
+  'benacerraf',
+  'doherty',
+  'zinkernagel',
+  'steinman',
+  'beutler',
+  'hoffmann',
+  'allison',
+  'honjo',
+  'lindqvist',
+  'gurdon',
+  'yamanaka',
+  'wilmut',
+  'campbell',
+  'evans',
+  'capecchi',
+  'smithies',
+  'brenner',
+  'sulston',
+  'horvitz',
+  'nurse',
+  'hunt',
+  'hartwell',
+  'greengard',
+  'carlsson',
+  'wiesel',
+  'hubel',
+  'sperry',
+  'penfield',
+  'broca',
+  'wernicke',
+  'cajal',
+  'purkinje',
+  'betz',
+  'meynert',
+  'brodmann',
+  'gall',
+  'flourens',
+  'magendie',
+  'bernard',
+  'ludwig',
+  'helmholtz',
+  'wundt',
+  'fechner',
+  'ebbinghaus',
+  'thorndike',
+  'tolman',
+  'hull',
+  'wertheimer',
+  'koffka',
+  'lewin',
+  'allport',
+  'rogers',
+  'ellis',
+  'beck',
+  'seligman',
+  'csikszentmihalyi',
+  'gardner',
+  'sternberg',
+  'binet',
+  'terman',
+  'wechsler',
+  'spearman',
+  'thurstone',
+  'cattell',
+  'eysenck',
+  'costa',
+  'mcrae',
+  'goldberg',
+  'gibbs',
+  'clausius',
+  'carnot',
+  'nernst',
+  'onsager',
+  'debye',
+  'flory',
+  'staudinger',
+  'ziegler',
+  'natta',
+  'wittig',
+  'grignard',
+  'sabatier',
+  'haber',
+  'bosch',
+  'ostwald',
+  'raoult',
+  'vant',
+  'lewis',
+  'langmuir',
+  'mulliken',
+  'slater',
+  'hund',
+  'fock',
+  'hartree',
+  'roothaan',
+  'pople',
+  'kohn',
+  'parr',
+  'bader',
+  'woodward',
+  'corey',
+  'sharpless',
+  'noyori',
+  'knowles',
+  'grubbs',
+  'schrock',
+  'chauvin',
+  'heck',
+  'negishi',
+  'suzuki',
+  'sonogashira',
+  'buchwald',
+  'hartwig',
+  'macmillan',
+  'list',
+  'benjamin',
+  'crutzen',
+  'molina',
+  'rowland',
+  'keeling',
+  'revelle',
+  'tyndall',
+  'milankovic',
+  'wegener',
+  'hess',
+  'vine',
+  'matthews',
+  'holmes',
+  'bullard',
+  'richter',
+  'gutenberg',
+  'mohorovicic',
+  'lehmann',
+  'oldham',
+  'love',
+  'rayleigh',
+  'boltzmann',
+  'poisson',
+  'green',
+  'kirchhoff',
+  'doppler',
+  'fizeau',
+  'foucault',
+  'fresnel',
+  'fraunhofer',
+  'zeeman',
+  'stark',
+  'compton',
+  'raman',
+  'brillouin',
+  'bragg',
+  'laue',
+  'scherrer',
+  'ewald',
+  'patterson',
+  'perutz',
+  'kendrew',
+  'klug',
+  'henderson',
+];
diff --git a/js/constants/CHARACTERS.js b/js/constants/CHARACTERS.js
new file mode 100644
index 00000000..e527a1bb
--- /dev/null
+++ b/js/constants/CHARACTERS.js
@@ -0,0 +1,3413 @@
+import ABILITIES from '/js/constants/ABILITIES.js';
+import { ALL_RACES } from '/js/constants/RACES.js';
+import { ZERO_RESISTANCES } from '/js/constants/ELEMENTS.js';
+import { DEFAULT_TOLERANCE } from '/js/constants/TOLERANCE.js';
+import entity from '/js/entity.js';
+import { deepMerge } from '/js/helpers.js';
+import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+
+const DEFAULT_MAX_HP = 24;
+const DEFAULT_DAMAGE = 8;
+const DEFAULT_MAX_TICKS = 15;
+
+export const DEFAULT_MUGSHOT_COORDINATES = { x: 0, y: 0 };
+
+export const DEFAULT_MODIFIERS = {
+  maxHealth: 0,
+  maxArmor: 0,
+  damage: 0,
+  tolerance: 0,
+};
+
+export const DEFAULT_LUCKY_STATS = {
+  hitChance: 1,
+  criticalChance: 0.05,
+  criticalDamage: 0.5,
+  dodgeChance: 0.05,
+  blockChance: 0,
+  magicChance: 0,
+};
+
+const DEFAULT_RESISTANCES = ZERO_RESISTANCES;
+
+export const DEFAULT_EQUIPMENT = {
+  mainHand: null,
+  offHand: null,
+  armor: null,
+  accessory: null,
+  trinket: null,
+};
+
+const DEFAULT_NPC_EQUIPMENT = {
+  mainHand: null,
+  offHand: null,
+  armor: null,
+  accessory: null,
+  trinket: null,
+};
+
+export const ALL_CHARACTERS = {
+  elfMale: {
+    name: 'Brawler',
+    race: ALL_RACES.elf,
+    type: 'humanoid',
+    image: 'elf/male-01.webp',
+    mugshot: { x: 40, y: 20 },
+    size: 1.2,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      'A patient elven archer who picks his shots and rarely misses. Keep him at the back and let the arrows do the work.',
+    ai: {
+      imageContext:
+        'Lean male archer drawing a longbow with a nocked arrow\n\nLong blond hair, pointed ears, dark leather vest over a tunic, olive trousers, a quiver of arrows on the back',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP - 4,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE + 3,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.03,
+        magicChance: DEFAULT_LUCKY_STATS.magicChance + 0.02,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce')],
+    signatureAbility: ABILITIES('alorasTouch'),
+  },
+  elfFemale: {
+    name: 'Brawler',
+    race: ALL_RACES.elf,
+    type: 'humanoid',
+    image: 'elf/female-01.webp',
+    mugshot: { x: 34, y: 9 },
+    size: 1.05,
+    equipment: {
+      ...DEFAULT_EQUIPMENT,
+      mainHand: EQUIPMENT('bow'),
+      armor: EQUIPMENT('paddedTunic'),
+    },
+    description:
+      'A swift elven duelist with a blade in each hand. She trades reach for a flurry of cuts and slips away before you can answer.',
+    ai: {
+      imageContext:
+        'Female warrior holding a slender sword in each hand, glancing back over her shoulder\n\nLong blonde hair, pointed ears, hooded olive-green cloak over a grey dress covering her left side and the handle for one of the swords shes holding, brown boots',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP - 4,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE + 2,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.03,
+        magicChance: DEFAULT_LUCKY_STATS.magicChance + 0.02,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce')],
+    signatureAbility: ABILITIES('alorasTouch'),
+  },
+  humanMale: {
+    name: 'Brawler',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'human/male-01.webp',
+    mugshot: { x: 55, y: 13 },
+    size: 1,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      'A roaring berserker with an axe in each hand and no plan beyond hitting things until they stop moving.',
+    ai: {
+      imageContext:
+        'Muscular bare-chested berserker roaring with mouth open, a hand axe in each fist\n\nLong grey hair tied up, thick beard, tribal tattoos, fur mantle over the shoulders, fur kilt, fur-lined boots',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 8,
+      },
+      modifiers: {
+        ...DEFAULT_MODIFIERS,
+        damage: DEFAULT_MODIFIERS.damage + 0.05,
+        tolerance: DEFAULT_MODIFIERS.tolerance + 0.1,
+      },
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('swing'), ABILITIES('swing')],
+    signatureAbility: ABILITIES('warcry'),
+  },
+  humanFemale: {
+    name: 'Brawler',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'human/female-01.webp',
+    mugshot: { x: 47, y: 9 },
+    size: 1,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      'A disciplined shield-maiden who holds the line. Sword forward, shield up, and very hard to push back.',
+    ai: {
+      imageContext:
+        'Female warrior with a broad sword in one hand angled downwards at the side and a round wooden shield in the other close to body.\n\nLong brown hair, simple, war paint on the face, studded leather armor with fur-trimmed shoulders, fur-lined boots',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        blockChance: DEFAULT_LUCKY_STATS.blockChance + 0.02,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 8,
+      },
+      modifiers: {
+        ...DEFAULT_MODIFIERS,
+        damage: DEFAULT_MODIFIERS.damage + 0.04,
+        tolerance: DEFAULT_MODIFIERS.tolerance + 0.1,
+      },
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('swing'),
+      ABILITIES('swing'),
+      ABILITIES('block'),
+      ABILITIES('shieldBash'),
+    ],
+    signatureAbility: ABILITIES('warcry'),
+  },
+  trollMale: {
+    name: 'Brawler',
+    race: ALL_RACES.troll,
+    type: 'humanoid',
+    image: 'troll/male-01.webp',
+    mugshot: { x: 46, y: 18 },
+    size: 1.1,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      'A mountain of troll dragging a tree-sized club. Slow to wind up, but every swing lands like a falling boulder.',
+    ai: {
+      imageContext:
+        'Fat non-muscular male brute resting a massive wooden club on one shoulder\n\nLight brown, large round belly, small-tusked underbite, small topknot, fur loincloth with a skull, tooth necklace, barefoot, barely any neck, no pupils, one hand scratching belly, huge over-arms',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance - 0.05,
+      },
+      armorPenetration: 1,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        earth: 8,
+      },
+      modifiers: {
+        ...DEFAULT_MODIFIERS,
+        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.05,
+        damage: DEFAULT_MODIFIERS.damage + 0.06,
+      },
+      magicChance: 0,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam')],
+    signatureAbility: ABILITIES('stomp'),
+  },
+  trollFemale: {
+    name: 'Brawler',
+    race: ALL_RACES.troll,
+    type: 'humanoid',
+    image: 'troll/female-01.webp',
+    mugshot: { x: 40, y: 12 },
+    size: 1.1,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      "Twice the clubs, twice the bruises. She wades straight in swinging and isn't fussy about what she hits.",
+    ai: {
+      imageContext:
+        'Large fat & non-muscular female brute with studded wooden club in each hand resting at her sides angled downwards.\n\nLight brown skin, brown dreadlocked hair in a tail, small tusks, tribal fur top and fur skirt, barefoot',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      damage: DEFAULT_DAMAGE,
+      maxArmor: 0,
+      currentArmor: 0,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance - 0.05,
+      },
+      armorPenetration: 1,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        earth: 8,
+      },
+      modifiers: {
+        ...DEFAULT_MODIFIERS,
+        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.1,
+        damage: DEFAULT_MODIFIERS.damage + 0.05,
+      },
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('slam', false, {
+        overrides: { ticks: 3 },
+      }),
+      ABILITIES('slam', false, {
+        overrides: { ticks: 3 },
+      }),
+      ABILITIES('slam', false, {
+        overrides: { ticks: 3 },
+      }),
+      ABILITIES('slam', false, {
+        overrides: { ticks: 3 },
+      }),
+    ],
+    signatureAbility: ABILITIES('stomp'),
+  },
+  dwarfMale: {
+    name: 'Brawler',
+    race: ALL_RACES.dwarf,
+    type: 'humanoid',
+    image: 'dwarf/male-01.webp',
+    mugshot: { x: 50, y: 26 },
+    size: 0.8,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      "A stubborn dwarf behind a wall of a shield. He'll outlast whatever you throw at him, then flatten what's left.",
+    ai: {
+      imageContext:
+        'Stout dwarf facing left raising a war hammer in the background arm, a large steel kite shield on the foreground arm, no emblem on shield\n\nLong braided brown beard, mohawk haircut, brown leather armor and boots, fierce scowl',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance - 0.03,
+        blockChance: DEFAULT_LUCKY_STATS.blockChance + 0.02,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        fire: 8,
+      },
+      modifiers: {
+        ...DEFAULT_MODIFIERS,
+        maxArmor: DEFAULT_MODIFIERS.maxArmor + 0.15,
+        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.1,
+        tolerance: DEFAULT_MODIFIERS.tolerance + 0.1,
+      },
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('block'), ABILITIES('shieldBash')],
+    signatureAbility: ABILITIES('stoneskin'),
+  },
+  dwarfFemale: {
+    name: 'Brawler',
+    race: ALL_RACES.dwarf,
+    type: 'humanoid',
+    image: 'dwarf/female-01.webp',
+    mugshot: { x: 54, y: 11 },
+    size: 0.8,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      'A dwarven warrior in full plate swinging a runed great axe. Heavy armor, heavier blows, and not one step back.',
+    ai: {
+      imageContext:
+        'Stout female dwarf hoisting a two-handed great axe with a rune-etched blade held in both hands\n\nBraided hair, no face hair, full steel plate armor and gauntlets, dark apron',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance - 0.02,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        fire: 8,
+      },
+      modifiers: {
+        ...DEFAULT_MODIFIERS,
+        maxArmor: DEFAULT_MODIFIERS.maxArmor + 0.2,
+        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.05,
+        tolerance: DEFAULT_MODIFIERS.tolerance + 0.1,
+      },
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+    ],
+    signatureAbility: ABILITIES('taunt'),
+  },
+  goblinMale: {
+    name: 'Brawler',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'goblin/male-01.webp',
+    mugshot: { x: 56, y: 19 },
+    size: 0.8,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      'A grinning goblin cutthroat with a dagger in each fist. Small, quick, and always aiming for somewhere that hurts.',
+    ai: {
+      imageContext:
+        'Small crouching goblin grinning wickedly, a dagger in each hand held in a reverse grip\n\nGreen skin, huge pointed ears, hooded brown cloak, leather harness, clawed bare feet',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP - 2,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE + 4,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: DEFAULT_LUCKY_STATS.criticalChance + 0.02,
+        criticalDamage: DEFAULT_LUCKY_STATS.criticalDamage + 0.2,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.02,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+    ],
+    signatureAbility: ABILITIES('catch'),
+  },
+  goblinFemale: {
+    name: 'Brawler',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'goblin/female-01.webp',
+    mugshot: { x: 70, y: 37 },
+    size: 1.2,
+    equipment: { ...DEFAULT_EQUIPMENT, armor: EQUIPMENT('paddedTunic') },
+    description:
+      "A goblin skirmisher who keeps you at spear's length and jabs from just out of reach. Annoying, and proud of it.",
+    ai: {
+      imageContext:
+        'Small female goblin holding a long tasseled spear upright in both hands\n\nGreen skin, large pointed ears, dented metal helmet, dark red tunic with leather armor and bracers',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP - 2,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE + 3,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: DEFAULT_LUCKY_STATS.criticalChance + 0.03,
+        criticalDamage: DEFAULT_LUCKY_STATS.criticalDamage + 0.15,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.01,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('swing'), ABILITIES('swing')],
+    signatureAbility: ABILITIES('smokebomb'),
+  },
+  succubus: {
+    name: 'Succubus',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/succubus.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1.2,
+    equipment: DEFAULT_NPC_EQUIPMENT,
+    description:
+      'The Succubus is a deadly demon whose elegance masks her savage nature. In battle, she thrives amid chaos, lashing out with razor-sharp claws in a flurry of violent motion.<br /><br />Her signature attack is a whirling dance of destruction, spinning with unrelenting speed to strike all who dare draw near. This devastating technique carves through groups of enemies with merciless efficiency, leaving little chance for escape.',
+    ai: {
+      imageContext:
+        'Pale grey-skinned demoness, slender and gaunt.\n\nLong black hair and large curved ram horns.\n\nPointed ears, glowing pale eyes, long clawed fingers.\n\nA sinuous dark-red tail coiling around her.\n\nDangling a small stitched puppet from its strings.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: {
+        ...DEFAULT_TOLERANCE,
+        immobilize: DEFAULT_TOLERANCE.immobilize + 12,
+      },
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('crushingBlow'),
+      ABILITIES('whirlwind', false, { overrides: { basic: true } }),
+    ],
+  },
+  rat: {
+    name: 'Giant rat',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/rat.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1.15,
+    equipment: DEFAULT_NPC_EQUIPMENT,
+    description:
+      'The Giant Rat is a vile and tenacious creature, driven by an insatiable hunger. Its bite is vicious and infectious, leaving deep wounds that continue to bleed long after the initial strike.<br /><br />When not attacking, it retreats to feast on nearby scraps of food. This gluttonous act rapidly restores its health, making it a persistent and frustrating foe to defeat if left unchecked.',
+    ai: {
+      imageContext:
+        'Non-muscular hulking rat rearing up on its hind legs, jaws closed and snarling\n\nMangy black fur, long pink scaly tail, sharp yellow teeth, beady black eyes, pale white eye balls',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP + 12,
+      currentHealth: DEFAULT_MAX_HP + 12,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('bite'), ABILITIES('cheesyTactics'), ABILITIES('bite')],
+  },
+  golem: {
+    name: 'Golem',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/golem.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1.2,
+    equipment: DEFAULT_NPC_EQUIPMENT,
+    description:
+      'The Golem is a towering sentinel of stone, crafted for war and built to endure. Its immense frame makes it a formidable presence on the battlefield, shrugging off attacks that would shatter lesser foes.<br /><br />When its armor is even partially intact, it draws upon ancient magic to restore its defenses completely, becoming nearly invulnerable once more. Only those who can deplete its armor fully stand a chance of bringing it down.',
+    ai: {
+      imageContext:
+        'Avarage non-muscular build but big overbody. Hunchback hewn from pale grey stone.\n\nBroad hunched shoulders and oversized fists.\n\nCracked rock plating streaked with green moss.\n\nWorn runes carved across its chest.\n\nHeavy, blunt and immovable.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 3,
+      currentArmor: 3,
+      damage: DEFAULT_DAMAGE,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+      criticalChance: null,
+      criticalDamage: null,
+      blockChance: null,
+      dodgeChance: null,
+      hitChance: null,
+      magicChance: null,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('slam'), ABILITIES('harden'), ABILITIES('slam'), ABILITIES('slam')],
+  },
+  trainingDummy: {
+    name: 'Training Dummy',
+    race: ALL_RACES.creature,
+    type: 'prop',
+    image: 'creature/training-dummy.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A burlap sack stitched onto a post, painted with a target and patched after a thousand bouts. It never strikes back — it only stands there and takes it.<br /><br />Perfect for warming up. Just do not expect it to fall over.',
+    ai: {
+      imageContext:
+        'A casual stuffed practice dummy mounted on a wooden post, arms (only) made of a straw-bound crossbar\n\nPale burlap sackcloth body with stitched seams, black button eyes, straw poking from the limbs, a red painted bullseye on its chest.',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: 100,
+      currentHealth: 100,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: 0,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('playingTheVictim')],
+  },
+  boar: {
+    name: 'Boar',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/boar.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A young one, but fed well and angry at strangers. The tusks have done damage to better fighters than the registry admits.<br /><br />Watch the charge. The rest is easier.',
+    ai: {
+      imageContext:
+        'Wild boar mid-charge with its head lowered and tusks forward\n\nBristly brown fur, large curved ivory tusks, small dark eyes, a coarse ridged mane along the spine',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+      criticalDamage: 0.6,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('charge'), ABILITIES('gore'), ABILITIES('gore'), ABILITIES('gore')],
+  },
+  jester: {
+    name: 'Jester',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/jester.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'All bells and balance, until the knives come out from under the motley.<br /><br />He laughs while you bleed. The crowd loves it.',
+    ai: {
+      imageContext:
+        'Slender jester posed mid-flourish, one hand on the hip, a curved dagger drawn in the other\n\nRed and black diamond-pattern motley, belled jester cap, pale grinning mask, curled pointed shoes with bells',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: DEFAULT_LUCKY_STATS.criticalChance + 0.05,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('stab'),
+      ABILITIES('doublePersona'),
+      ABILITIES('stab'),
+      ABILITIES('doublePersona'),
+      ABILITIES('stab'),
+    ],
+  },
+  lostCivilian: {
+    name: 'Lost civilian',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/lost-civilian.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description: 'This civilian took the wrong turn when going shopping and ended up in the arena.',
+    ai: {
+      imageContext:
+        'Ordinary young man standing and reading a paper map, looking lost and worried\n\nShort brown hair, plain brown tunic and trousers, leather belt with a small pouch, worn boots',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE + 2,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.4,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+    ],
+  },
+  nomad: {
+    name: 'Nomad',
+    race: ALL_RACES.creature,
+    type: 'humanoid',
+    image: 'creature/nomad.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "Traveled the salt road for thirty years without losing a tooth. The arena offers a hot meal and a roof, so here he is.<br /><br />Don't let the years fool you. He still walks twenty miles before breakfast.",
+    ai: {
+      imageContext:
+        'Hooded wanderer standing upright, gripping a tall spear staff\n\nWeathered teal cloak, layered desert robes, leather wraps and armor, face shadowed under the hood, dusty boots',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab'),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab'),
+    ],
+  },
+  pitchforkPatrick: {
+    name: 'Pitchfork Patrick',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/pitchfork-patrick.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "Came down from the hills with his farm tool and a complaint about taxes. The magistrate sent him to the arena instead.<br /><br />He's still using the pitchfork. He's still winning fights.",
+    ai: { imageContext: 'Proud stance holding a pitchfork\n\nSimple farmer clothing', legs: 2 },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('pretendToBeHumble')],
+  },
+  poorestKnightInTown: {
+    name: 'Poor poor knight',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/poorest-knight-in-town.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "His armor is held together with twine and stubborn pride. The sword is real, though, and so is the training.<br /><br />He fights for the coin, not the glory. There hasn't been much of either lately.",
+    ai: {
+      imageContext:
+        'A really poor knight\n\nBad equipment\n\nLooks weak\n\nNot too much detail\n\nSimple design\n\nYoung lad\n\nShy pose\n\nHand-drawn\n\nWields wooded sword and broken shield',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        blockChance: 0.05,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('swing'),
+      ABILITIES('block', false, { overrides: { ticks: 2 } }),
+      ABILITIES('swing'),
+      ABILITIES('block', false, { overrides: { ticks: 2 } }),
+      ABILITIES('swing'),
+    ],
+  },
+  sabertoothTiger: {
+    name: 'Sabertooth Tiger',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/sabertooth-tiger.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'An ancient predator, woken from frozen sleep by a foolish magus and sold to the arena for the bounty.<br /><br />The bite is meant for mammoth bone. Yours will not be a challenge for it.',
+    ai: {
+      imageContext:
+        'Sabertooth tiger lunging forward, mouth open in a roar, one clawed paw raised\n\nMuscular orange coat with dark stripes, pale underbelly, long curved saber fangs',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: 0.6,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('pounce'),
+      ABILITIES('ripAndTear'),
+      ABILITIES('ripAndTear'),
+      ABILITIES('ripAndTear'),
+      ABILITIES('ripAndTear'),
+    ],
+  },
+  queenArachnae: {
+    name: 'Queen Arachnae',
+    race: ALL_RACES.spider,
+    type: 'creature',
+    image: 'creature/queen-arachnae.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    power: 2,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'She nests in the crawlspaces beneath the arena, grown fat on whatever loses down there. The egg sacs she drags behind her are never empty for long.',
+    ai: {
+      imageContext:
+        'Massive bloated spider crouched low on all eight legs, fangs bared\n\nSwollen dark green and brown carapace, thick segmented legs, a cluster of small yellow eyes, dripping fangs',
+      legs: 8,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      provocation: 13,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: { ...DEFAULT_MODIFIERS, maxArmor: 0 },
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('skewer'), ABILITIES('skewer'), ABILITIES('skewer')],
+  },
+  spiderling: {
+    name: 'Spiderling',
+    race: ALL_RACES.spider,
+    type: 'creature',
+    image: 'creature/spiderling.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 0.5,
+    power: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "Fresh from the Queen Arachnae's egg sacs and already hunting. One is a nuisance; they are never one.",
+    ai: {
+      imageContext:
+        'Small spider scuttling forward on splayed legs\n\nRound green-mottled abdomen, slender brown legs, small pale fangs, tiny dark eyes',
+      legs: 6,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('weave'), ABILITIES('skewer', false, { overrides: { ticks: 3 } })],
+  },
+  ignius: {
+    name: 'Ignius',
+    race: ALL_RACES.dragon,
+    type: 'creature',
+    image: 'creature/fire/ignius.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A young dragon caged beneath the arena and starved until the gates open. The scorch marks on the sand are older than most of the fighters who made them.',
+    ai: {
+      imageContext:
+        'Classic red dragon, scaled and broad.\n\nDeep crimson hide over a paler green-tan belly and chest plates.\n\nLeathery wings half-spread.\n\nA horned head and a ridge of spines down its back.\n\nFour clawed legs and a heavy tail.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      provocation: 30,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: 15,
+    abilities: [
+      ABILITIES('intimidatingRoar'),
+      ABILITIES('fireBreath'),
+      ABILITIES('charge'),
+      ABILITIES('emberStrike'),
+      ABILITIES('bite'),
+      ABILITIES('emberStrike'),
+    ],
+  },
+  scorchLing: {
+    name: 'Scorchling',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/scorch-ling.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 0.5,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "Ignius's whelp, hatched in the same cage and already breathing embers. It fights to prove itself to a parent that has never once looked its way.",
+    ai: {
+      imageContext:
+        'Small dragon whelp standing on all fours, leathery wings half-raised\n\nRed scaled hide with glowing ember cracks, glowing orange eyes, stubby horns, a long tail',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('emberStrike'),
+      ABILITIES('emberStrike'),
+      ABILITIES('emberStrike'),
+      ABILITIES('emberStrike'),
+    ],
+  },
+  dragonEgg: {
+    name: 'Dragon Egg',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/dragon-egg.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 0.5,
+    power: 0.15,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Too hot to touch and glowing faintly from within, as if a coal were trying to claw its way out. The Scorchling coiled inside is already burning to meet the arena.',
+    ai: {
+      imageContext:
+        'A single large dragon egg resting upright\n\nMottled red and grey shell etched with dark crack-like runic markings, a faint inner glow as if embers smolder within',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('hatch')],
+  },
+  crazyOldMan: {
+    name: 'Crazy Old Man',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/crazy-old-man.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A few drinks in and bored of a quiet life, he wandered into the arena for a bit of a thrill. He means no harm — he just fancied a story worth telling at the tavern.',
+    ai: {
+      imageContext:
+        'Not a magician.\n\nSimple villager.\n\nOld and foolish.\n\nHolds a broken bottle as weapon. No backpack.\n\nDrunk and fighting stance',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('swing'),
+      ABILITIES('lacerate'),
+      ABILITIES('swing'),
+      ABILITIES('lacerate'),
+      ABILITIES('stab'),
+    ],
+  },
+  dimachaerus: {
+    name: 'Dimachaerus',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/dimachaerus.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Two blades, no shield, and not a scrap of patience for either. He trades every defense for a storm of steel meant to end the fight in the opening breath.<br /><br />Outlast the first flurry and you may yet live to watch him tire.',
+    ai: { imageContext: 'Simple hand-drawn design, sketch', legs: 2 },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.2,
+        criticalDamage: 0.8,
+        dodgeChance: 0.2,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('cut'),
+      ABILITIES('lacerate'),
+      ABILITIES('cut'),
+      ABILITIES('lacerate'),
+      ABILITIES('cut'),
+      ABILITIES('lacerate'),
+      ABILITIES('cut'),
+      ABILITIES('lacerate'),
+    ],
+  },
+  secutor: {
+    name: 'Secutor',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/secutor.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Helmet sealed, shield braced, he advances at the pace of a closing door. Every blow you land rings off the iron and goes nowhere.<br /><br />He does not rush. He learned long ago that patience outlasts fury.',
+    ai: { imageContext: 'Simple hand-drawn sketch design', legs: 2 },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        blockChance: 0.15,
+        dodgeChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('swing'),
+      ABILITIES('block', false, { overrides: { ticks: 2 } }),
+      ABILITIES('shieldBash'),
+      ABILITIES('swing'),
+      ABILITIES('block', false, { overrides: { ticks: 2 } }),
+    ],
+  },
+  breff: {
+    name: 'Breff',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/frost/breff.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It brings its own winter. Frost spreads from where the Breff stands, and the sand stiffens to ice under its weight.<br /><br />The cold reaches you a moment before it does. Neither part is kind.',
+    ai: {
+      imageContext:
+        'Heavyset frost beast lumbering on four legs.\n\nIcy blue hide crusted with frost and jutting ice shards along its back.\n\nA wide fanged maw set in a heavy underbite, glowing eyes above it.\n\nRidged horns sweep back from its skull.\n\nUpperbody bigger than lower body',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.25,
+        criticalDamage: 0.3,
+        dodgeChance: 0.05,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 16,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('frostbite'), ABILITIES('shieldWall'), ABILITIES('frostbite')],
+  },
+  armorillo: {
+    name: 'Armorillo',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/earth/armorillo.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It rolls itself shut at the first jeer from the stands and waits for the noise to die down. Spears skip off the jade spines, and the crowd loses patience long before the Armorillo loses its nerve.<br /><br />By the time it uncurls, it is already rolling over you.',
+    ai: {
+      imageContext:
+        'A Armadillo\n\nA domed shell of overlapping brown plates studded with few, but prominent, spikes.\n\nA large-scaled armoured head and clawed forefeet tucked at the base.\n\nA banded tail wraps around the curl.\n\nEarthen browns set against teal spines.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.25,
+        criticalDamage: 0.4,
+        dodgeChance: 0.25,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        earth: 16,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('stoneskin'), ABILITIES('slam'), ABILITIES('stoneShatter')],
+  },
+  wyvern: {
+    name: 'Wyvern',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/lightning/wyvern.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It rides the front edge of the storm and drops out of it without warning. The Wyvern fights from above, all talon and tail, and is gone again before the dust settles.<br /><br />Keep your eyes on the sky. It will not give you a second reason to.',
+    ai: {
+      imageContext:
+        'Lean slate-blue wyvern stooping mid-dive.\n\nGreat membranous wings doubling as its forelimbs.\n\nA crest of red spines down its back and jaw.\n\nHooked talons and a long lashing tail.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.25,
+        criticalDamage: 0.3,
+        dodgeChance: 0.01,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 16,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('pounce'),
+      ABILITIES('stormStrike'),
+      ABILITIES('ripAndTear'),
+      ABILITIES('stormStrike'),
+    ],
+  },
+  mammoth: {
+    name: 'Mammoth',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/frost/mammoth.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A wall of red wool and old ivory that crossed a frozen age to get here. The Mammoth moves at its own pace and expects the world to step aside.<br /><br />Those tusks have cleared paths through worse than you. They will clear one more.',
+    ai: {
+      imageContext:
+        'Great woolly mammoth heavy with shaggy fur.\n\nLong curved ivory tusks sweeping out from a lowered trunk.\n\nBroad domed head, small dark eyes.\n\nMainly brown to it\'s color. The strands of the fur is prominent.\n\nNot regular "puff hair" on top, but instead hair hanging down its face.\n\nHand-drawn and sketchy look',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.05,
+        criticalDamage: 0.3,
+        dodgeChance: 0.05,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 16,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('stomp'), ABILITIES('gore'), ABILITIES('frostbite'), ABILITIES('gore')],
+  },
+  cerberus: {
+    name: 'Cerberus',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/fire/cerberus.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'One body, three tempers, and not a calm one among them. The Cerberus was set at the gate to keep things in, and it has never once been told the fight is over.<br /><br />Get past one head and the other two are already on you.',
+    ai: {
+      imageContext:
+        'Three snarling hound heads on one muscular body.\n\nReddish-brown fur, hackles raised.\n\nGlowing red eyes and bared fangs on every head.\n\nA spiked collar buckled around each neck.\n\nHand-drawn, sketch\n\nDynamic interesting pose',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0.05,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        fire: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('bite'), ABILITIES('goodBoys'), ABILITIES('bite'), ABILITIES('bite')],
+  },
+  ulwar: {
+    name: 'Ulwar',
+    race: ALL_RACES.creature,
+    type: 'humanoid',
+    image: 'creature/lightning/ulwar.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A man somewhere underneath, on the nights it forgets to be one. Ulwar comes into the ring already howling, and the howl is the most reasonable thing about it.<br /><br />Steel slows it. Nothing yet has stopped it.',
+    ai: {
+      imageContext:
+        'Gray-ish fur\n\nNo defined muscles.\n\nLooks straight ahead.\n\nDynamic "in-combat" pose.\n\nClaws ready to attack.\n\nNo pupils in eyes\n\nUnarmored, howling\n\nSquat pose',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0.05,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('intimidatingRoar'), ABILITIES('ripAndTear'), ABILITIES('rendingFrenzy')],
+  },
+  lightningHerald: {
+    name: 'Herald',
+    race: ALL_RACES.felidae,
+    type: 'creature',
+    image: 'creature/lightning/herald.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It comes ahead of the storm, the way thunder follows a flash: proud, unhurried, certain of its welcome. The Herald announces nothing it cannot back with claw and wing.<br /><br />Kneeling is not required. Surviving the introduction is.',
+    ai: {
+      imageContext:
+        'A great winged lion at rest on a high crag.\n\nTawny golden hide and a full dark-amber mane.\n\nEnormous feathered wings\n\nA broad lion face with pale, level eyes.\n\nHeavy paws, a regal elegant stance.\n\nMajestic fluffy fur around neck.\n\nHand-drawn sketch look',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0.3,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('intimidatingRoar'),
+      ABILITIES('stormStrike'),
+      ABILITIES('ripAndTear'),
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+    ],
+  },
+  runeStag: {
+    name: 'Rune Stag',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/nature/rune-stag.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Old forest magic given four legs and a crown of light. The Rune Stag walks into the arena as though it wandered in by mistake, and leaves the same way.<br /><br />The marks on its hide glow brighter the closer the end comes. By then it is usually yours.',
+    ai: {
+      imageContext:
+        'A stately stag with a dark, heavy coat.\n\nGolden oversized antlers.\n\nLuminous rune spirals marked across its flanks and legs.\n\nCalm pale eyes.\n\nMotes of light drifting from its antlers.\n\nMajestic and mysterious look.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('gore'), ABILITIES('wildGrowth'), ABILITIES('gore'), ABILITIES('gore')],
+  },
+  frigusMortis: {
+    name: 'Frigus Mortis',
+    race: ALL_RACES.dragon,
+    type: 'elemental',
+    image: 'creature/frost/frigus-mortis.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Cold death on the wing. Where its breath passes, the air itself stops moving and falls as glittering dust.<br /><br />Frigus Mortis does not need to land a single bite. It only needs to exhale, and wait.',
+    ai: {
+      imageContext:
+        'Lean blue dragon with wings spread mid-snarl.\n\nDeep-blue scales, paler frost crusting its hide.\n\nJagged ice crystals grow from its back and shoulders.\n\nWhite glowing eyes.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.5,
+        criticalDamage: 0.33,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: 15,
+    abilities: [
+      ABILITIES('intimidatingRoar'),
+      ABILITIES('frostBreath'),
+      ABILITIES('frostbite'),
+      ABILITIES('bite'),
+      ABILITIES('frostbite'),
+    ],
+  },
+  vitaDeserto: {
+    name: 'Vita Deserto',
+    race: ALL_RACES.dragon,
+    type: 'elemental',
+    image: 'creature/earth/vita-deserto.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A plated wyrm that drags the weight of a quarry wherever it goes. The wings are mostly bluff. The armour is not, and the red stone set in its throat burns where a fire should be.<br /><br />It never gives chase. It simply arrives, and leaves no room to slip past.',
+    ai: {
+      imageContext:
+        'Stocky, low-slung armoured dragon.\n\nGrey scales layered beneath leaf-shaped stone plates along its back and shoulders.\n\nBroad veined wings spread wide.\n\nA blunt reptile head with a stubby horn and a heavy underbite.\n\nStone dragon, heavy body, dynamic pose',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.2,
+        criticalDamage: 0.75,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        earth: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: 15,
+    abilities: [
+      ABILITIES('earthBreath'),
+      ABILITIES('stoneShatter'),
+      ABILITIES('bite'),
+      ABILITIES('stoneShatter'),
+    ],
+  },
+  ragnarGodOfFire: {
+    name: 'Ragnar God of Fire',
+    race: ALL_RACES.god,
+    type: 'elemental',
+    image: 'creature/fire/ragnar-god-of-fire.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'They built a fire too big and gave it a name, and the name learned to walk. Ragnar wades through the lava that birthed him as though it were warm bathwater.<br /><br />The beard alone has ended more challengers than the fists. Few last long enough to reach the fists.',
+    ai: {
+      imageContext:
+        'Hulking brute-god.\n\nDark grey-green hide over a broad, hunched, muscular frame.\n\nBeard is lava.\n\nGod of fire.\n\nOne big scar across the chest. Scars lightning up a bit, like there is lava inside.\n\nHuman porportions.\n\nNo weapon. Human hands.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.33,
+        criticalDamage: 0.33,
+        dodgeChance: 0.4,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        fire: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('emberStrike'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('emberStrike'),
+    ],
+  },
+  kylGodOfFrost: {
+    name: 'Kyl God of Frost',
+    race: ALL_RACES.god,
+    type: 'elemental',
+    image: 'creature/frost/kyl-god-of-frost.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'The cruelty of the high mountains given a face and a grin. Kyl rises out of the killing cold above the peaks and finds the arena pleasantly warm by comparison.<br /><br />Everything he touches slows, stiffens, and stops. He is in no hurry to touch you.',
+    ai: {
+      imageContext:
+        'Towering frost god risen from the cold mountains.\n\nLean, pale ice-blue body marked with darker swirling glacial patterns.\n\nBold excapt some hair is in a bun of frozen ice-cicles. Beard is also frozen ice-cicles.\n\nPointy ears, glowing eyes, a fanged grin.\n\nGod of frost.\n\nLean, not muscular.\n\nVery basic clothing.\n\nDynamic pose like casting a spell.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.25,
+        criticalDamage: 0.3,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('frostbite'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('frostbite'),
+    ],
+  },
+  natureGiant: {
+    name: 'Giant',
+    race: ALL_RACES.giant,
+    type: 'elemental',
+    image: 'creature/nature/giant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A walking acre of forest that took offence at something and never sat back down. The Nature Giant swings fists the size of fallen trunks and roots itself between blows.<br /><br />Cut it and it scars over in bark. Burn it and you only make it angry.',
+    ai: {
+      imageContext:
+        'A tree which chest and lowerbody is a tree trunk (no-humanlike features).\n\nMouthless, noteless, no pupils\n\nMossy skin is bark.',
+      legs: 1,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 1,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('slam'), ABILITIES('wildGrowth'), ABILITIES('crushingBlow')],
+  },
+  owlBear: {
+    name: 'Owl Bear',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/nature/owlbear.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'The worst halves of two hunters stitched into one. The Owlbear has the patience of the owl and the temper of the bear, and brings neither to a negotiation.<br /><br />You hear nothing until the talons are already in you.',
+    ai: {
+      imageContext:
+        'Owl head set on a heavy bear body.\n\nPlumage of dusty pink, grey and violet.\n\nTufted ears and a hooked yellow beak.\n\nFierce pale eyes over a feathered ruff.\n\nClawed bear paws beneath the feathers.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.05,
+        criticalDamage: 0.3,
+        dodgeChance: 0.02,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 16,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('pounce'), ABILITIES('ripAndTear'), ABILITIES('wildGrowth')],
+  },
+  yeti: {
+    name: 'Yeti',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/frost/yeti.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It comes down from the white peaks only when the hunger does. The Yeti wears the cold like a second hide and roars loud enough to start the snow moving above you.<br /><br />The horns are for show. The hands are not.',
+    ai: {
+      imageContext:
+        'Towering yeti hunched forward, arms spread wide, roaring with its mouth open\n\nThick shaggy white fur, blue-grey face and hands, large curved ram horns, a fanged maw, dark heavy claws',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('intimidatingRoar'),
+      ABILITIES('slam'),
+      ABILITIES('frostbite'),
+      ABILITIES('slam'),
+    ],
+  },
+  lightningGiant: {
+    name: 'Giant',
+    race: ALL_RACES.giant,
+    type: 'elemental',
+    image: 'creature/lightning/giant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Not a creature so much as a storm that learned to stand. The Lightning Giant walks on a column of howling wind, and the ground it crosses is scorched black behind it.<br /><br />Strike at it and you strike a cloud. It strikes back with the sky.',
+    ai: {
+      imageContext: 'Magical entity made out of clouds. Bursts of lightning covering its surface',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 1,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('lightningStorm')],
+  },
+  onkh: {
+    name: 'Onkh',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/lightning/onkh.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Something the mountains grew and never explained. Onkh hunches through the dark on stone knuckles, and the cave does not echo when it moves.<br /><br />Its hide turns blades. Its eyes find you long before the torchlight does.',
+    ai: {
+      imageContext:
+        'Hunchback stone creature of gray stone-plated hide.\n\nBroad shoulders, short arms.\n\nPale eyes glowing in the gloom.\n\nBig bulky body, no clear muscles showing\n\nGorilla pose. Body entirely made out of stone',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0.05,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('crushingBlow'),
+      ABILITIES('stormStrike', false, {
+        overrides: { ticks: 4 },
+      }),
+      ABILITIES('crushingBlow'),
+    ],
+  },
+  bullrock: {
+    name: 'Bullrock',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/fire/bullrock.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A bull that kept growing past the point of sense, then grew a mountain on its head for good measure. The Bullrock lowers that crown and the argument is over.<br /><br />There is no turning it. There is only being somewhere it is not.',
+    ai: {
+      imageContext:
+        "Massive shaggy bull, low and heavy with muscle.\n\nA crown of grey stone plates crests its head, back and shoulders, it fulls the back like a layer of armor. Each plate overlays the next plate.\n\nBig bullhorns.\n\nPale eyes fixed and unblinking, no pupils\n\nHand-drawn, sketchy look.\n\nIt's in the middle of launching an attack (threathening)",
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.05,
+        criticalDamage: 0.3,
+        dodgeChance: 0.01,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        fire: 16,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('charge'),
+      ABILITIES('emberStrike'),
+      ABILITIES('gore'),
+      ABILITIES('gore'),
+    ],
+  },
+  warrus: {
+    name: 'Warrus',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/frost/warrus.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It hauls its weight up onto the ice and dares the arena to move it. The Warrus is all blubber and bone, and the tusks have ended more challengers than any blade in the pit.<br /><br />Slow to rise. Worse to be under when it comes down.',
+    ai: {
+      imageContext:
+        'Enormous tusked walrus, grey-purple and blubbery.\n\nLong pale tusks below a thick whiskered snout.\n\nNo glare. Neck held high, mysterious look, no pupils.\n\nSkin covered with fur\n\nFantasy looking head with spikes going across the forehead down the spines\n\nOversized tusks. Sitting down so back legs are not visible\n\nNo glare or gloss',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.3,
+        dodgeChance: 0.3,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('crushingBlow'),
+      ABILITIES('gore'),
+      ABILITIES('frostbite'),
+      ABILITIES('gore'),
+    ],
+  },
+  eliseGoddessOfEarth: {
+    name: 'Elise Goddess of Earth',
+    race: ALL_RACES.god,
+    type: 'elemental',
+    image: 'creature/earth/elise-goddess-of-earth.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'The bedrock grew opinions, and none of them were kind. Elise rises out of the arena floor as though it had always been her, and the stone answers the moment she calls it.<br /><br />Every blow you land is swallowed by shifting rock. Every blow she lands moves the earth itself.',
+    ai: {
+      imageContext:
+        'Stone-skinned earth goddess risen from the ground.\n\nA crown of jagged crystal shards.\n\nSkin beighe like a regular human. Breasts and lower body covered with a skirt made out of stone.\n\nGodly and majestic pose, like casting a spell.\n\nLean sexy body, no abs showing.',
+      legs: 1,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.5,
+        dodgeChance: 0,
+        blockChance: 0.4,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        earth: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('warcry'), ABILITIES('stoneShatter'), ABILITIES('crushingBlow')],
+  },
+  aloraGoddessOfNature: {
+    name: 'Alora Goddess of Nature',
+    race: ALL_RACES.god,
+    type: 'elemental',
+    image: 'creature/nature/alora-goddess-of-nature.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'She tends the wilds the way a butcher tends a herd. Alora steps onto the sand humming a soft tune, and the green things that trail after her have teeth.<br /><br />Cut her down and the roots drink deep, and she stands again the taller for it.',
+    ai: {
+      imageContext:
+        'Serene nature goddess wreathed in living green.\n\nBark-and-vine body draped in leaves and flowers.\n\nAntler-like branches crowning her head.\n\nGlowing green eyes and a faint knowing smile.\n\nArmor made out of magical leafs covers breasts, under arms and legs in form of a skirt. Skirt covers legs.\n\nNoble helmet that covers forehead, ears and eyes.\n\nSexy lean body.\n\nMajestic pose, like casting a spell (without effects)',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.4,
+        dodgeChance: 0.4,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('wildGrowth'),
+      ABILITIES('gore'),
+      ABILITIES('wildGrowth'),
+    ],
+  },
+  oskarGodOfLightning: {
+    name: 'Oskar God of Lightning',
+    race: ALL_RACES.god,
+    type: 'elemental',
+    image: 'creature/lightning/oskar-god-of-lightning.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'The storm grew tired of waiting in the clouds and came down wearing a face. Oskar crosses the arena between heartbeats, and the thunder only catches up a moment after he does.<br /><br />Blink, and you have already lost the exchange.',
+    ai: {
+      imageContext:
+        'Crackling lightning god striking the top of bald head, making eyes spark in lightning-yellow beams (no pupils).\n\nLong bears with a old school mustache.\n\nLooks like a mad man.\n\nGlowing white eyes, a fierce grin.\n\nEnjoying being struck by the lightning.\n\nGod of lightning. Big strokes of lightning arcing around body',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.45,
+        criticalDamage: 0.6,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('stormStrike'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('stormStrike'),
+    ],
+  },
+  fireGiant: {
+    name: 'Giant',
+    race: ALL_RACES.giant,
+    type: 'elemental',
+    image: 'creature/fire/giant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A mountain that caught fire an age ago and never thought to stop. The Fire Giant lumbers into the pit trailing molten rock, and the sand turns to glass where it walks.<br /><br />Stand too close and you cook. Stand too far and it closes the distance anyway.',
+    ai: {
+      imageContext:
+        'Colossal entity of cracked blackened stone. Body shaped like a mountain.\n\nRivers of molten lava glowing through the fissures.\n\nA craggy head with a silhouette of a face, hiding the details of the eyes, nose and mouth.\n\nYellow/orange features.',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 1,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        fire: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('stomp'),
+      ABILITIES('emberStrike'),
+      ABILITIES('slam'),
+      ABILITIES('emberStrike'),
+    ],
+  },
+  frostGiant: {
+    name: 'Giant',
+    race: ALL_RACES.giant,
+    type: 'creature',
+    image: 'creature/frost/giant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Carved from a glacier that learned to hold a grudge. The Frost Giant brings the dead silence of the high winter, and the breath freezes in your chest before the first blow lands.<br /><br />It does not hurry. The cold does its work either way.',
+    ai: {
+      imageContext:
+        'Towering humanoid carved from blue glacial ice.\n\nPale translucent body shot through with deeper blues.\n\nJagged ice shards crowning its head and forearms.\n\nFrost spreading across the ground at its feet.\n\nSketch.\n\nArms are icecicles.\n\nOne "Leg"',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 1,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        frost: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('frostbite'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('frostbite'),
+      ABILITIES('slam'),
+    ],
+  },
+  earthGiant: {
+    name: 'Giant',
+    race: ALL_RACES.giant,
+    type: 'creature',
+    image: 'creature/earth/giant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A landslide that decided to stand upright. The Earth Giant wears the quarry on its back and swings boulders as though they weighed nothing at all.<br /><br />There is no dodging a hill. There is only outlasting it, and few do.',
+    ai: {
+      imageContext:
+        'Massive humanoid built of boulders and packed earth.\n\nSlabs of grey stone for shoulders and fists.\n\nRoots, gravel and dirt packed between the rocks.\n\nNo face, but a crack where the next normally is, revealing a hole.\n\nResembles a mountain.\n\nNo legs, no muscles\n\nProvide perspective (the giant is HUGE).\n\nBody "traditional giant" like (not human)',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 1,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        earth: 20,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('slam'), ABILITIES('stoneShatter'), ABILITIES('slam')],
+  },
+  eratHerba: {
+    name: 'Erat Herba',
+    race: ALL_RACES.dragon,
+    type: 'elemental',
+    image: 'creature/nature/erat-herba.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It bursts from the arena floor with a roar, ancient and furious at being woken. The Nature Dragon wears the forest like scales, and the forest fights at its side.<br /><br />Wound it and it knits closed in living bark.',
+    ai: {
+      imageContext:
+        'Ancient dragon sheathed in bark and living vine.\n\nLeave-like scale covers its body.\n\nAntlered horns and glowing green eyes.\n\nNature dragon\n\nMajestic wings',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.3,
+        criticalDamage: 0.5,
+        dodgeChance: 0.2,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: 15,
+    abilities: [
+      ABILITIES('intimidatingRoar'),
+      ABILITIES('natureBreath'),
+      ABILITIES('bite'),
+      ABILITIES('wildGrowth'),
+      ABILITIES('gore'),
+      ABILITIES('bite'),
+    ],
+  },
+  ventoMico: {
+    name: 'Vento Mico',
+    race: ALL_RACES.dragon,
+    type: 'elemental',
+    image: 'creature/lightning/vento-mico.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It finds grounded things revolting, and it finds you very grounded indeed. The Lightning Dragon strikes from the air faster than the eye can track, trailing thunder it has already outrun.<br /><br />Try not to steal its thunder. It notices.',
+    ai: {
+      imageContext:
+        'Lithe winged dragon crackling\n\nLong whip-like tail and swept-back horns.\n\nGlowing white eyes fixed on its prey.\n\nLightning dragon.\n\nWings showing.\n\nThin and slick. Almost looks like lightning itself.\n\nYellow lightning features on its skin, almost like veins',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.5,
+        criticalDamage: 0.6,
+        dodgeChance: 0,
+        blockChance: 0,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        lightning: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: 15,
+    abilities: [
+      ABILITIES('lightningBreath'),
+      ABILITIES('stormStrike'),
+      ABILITIES('bite'),
+      ABILITIES('stormStrike'),
+      ABILITIES('bite'),
+    ],
+  },
+  giantScorpion: {
+    name: 'Giant Scorpion',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/giant-scorpion.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Pulled from a cave under the southern dunes. It does not understand the arena. It does not need to.<br /><br />The tail is fast. The pincers are faster.',
+    ai: {
+      imageContext:
+        'Giant desert cave scorpion, the size of a cart.\n\nCracked sandstone carapace, dune-brown chitin with darker banding.\n\nTwo oversized serrated pincers held forward.\n\nSegmented tail arced high overhead, tipped with a glistening venom barb.\n\nLow, flat, predatory stance.',
+      legs: 8,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('stab'),
+      ABILITIES('poisonousSting'),
+      ABILITIES('stab'),
+      ABILITIES('poisonousSting'),
+    ],
+  },
+  hyena: {
+    name: 'Hyena',
+    race: ALL_RACES.felidae,
+    type: 'creature',
+    image: 'creature/hyena.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 0.9,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A scavenger from the southern scrub, dragged here for the crowd. It does not charge — it circles, and it laughs.<br /><br />The jaws are built for bone. It will wait as long as it takes to use them.',
+    ai: {
+      imageContext:
+        'Large spotted hyena, sloping back — high shoulders, low hindquarters.\n\nCoarse bristled mane along the neck and spine.\n\nHeavy blunt muzzle, powerful scarred jaws.\n\nMangy dust-colored spotted coat.\n\nHead low, manic grin, wild pale eyes.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: 0.7,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('bite'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('bite'),
+      ABILITIES('crushingBlow'),
+    ],
+  },
+  executioner: {
+    name: 'Executioner',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/executioner.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "The arena's own headsman, pushed into the ring when the crowd grows restless for a familiar face.<br /><br />He has ended more lives off the sand than on it. The axe does not know the difference.",
+    ai: {
+      imageContext:
+        "Hulking, broad-shouldered headsman.\n\nBlack leather executioner's hood with narrow eye-slits.\n\nBare muscled torso over a blood-stained leather apron.\n\nMassive two-handed axe with a broad crescent blade.\n\nStoic, motionless, looming.",
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: {
+        ...DEFAULT_TOLERANCE,
+        stunned: 8,
+      },
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('execute', false, {
+        overrides: { ticks: 12, combatStats: { criticalDamage: 4.5 } },
+      }),
+    ],
+  },
+  olderBrother: {
+    name: 'Older Brother',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/older-brother.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'The elder of two raider brothers off the salt road. Slower than he was, but he still hits like a falling gate.',
+    ai: {
+      imageContext:
+        'Broad, weathered desert raider, the older of two brothers.\n\nThick beard, sun-scarred face.\n\nLayered dusty robes over scavenged leather armor.\n\nA heavy curved sword held low.\n\nSteady, planted stance.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: 0.7,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('swing'), ABILITIES('slam'), ABILITIES('swing'), ABILITIES('slam')],
+  },
+  youngerBrother: {
+    name: 'Younger Brother',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/younger-brother.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'The younger raider brother — quick, cocky, and always a step ahead of his own caution.',
+    ai: {
+      imageContext:
+        'Lean, wiry desert raider, the younger of two brothers.\n\nLight stubble, eager grin.\n\nLight dusty robes, minimal leather.\n\nA quick short blade in hand.\n\nLight on his feet, weight forward.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        dodgeChance: 0.15,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('stab'),
+      ABILITIES('cut'),
+      ABILITIES('swing'),
+      ABILITIES('stab'),
+      ABILITIES('cut'),
+      ABILITIES('swing'),
+    ],
+  },
+  rhino: {
+    name: 'Rhino',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/rhino.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It charges in a straight line and remembers nothing. Be somewhere else when it arrives.<br /><br />The horn is the part to worry about. The mass behind it is what does the damage.',
+    ai: {
+      imageContext:
+        'Massive armored rhinoceros, enormous bulk.\n\nThick grey plated hide with deep armor-like folds.\n\nA large forward horn and a smaller second horn.\n\nSmall angry eyes, head lowered.\n\nMid-charge, head down.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        blockChance: 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('charge'), ABILITIES('slam'), ABILITIES('gore'), ABILITIES('slam')],
+  },
+  theEngineer: {
+    name: 'The Engineer',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'creature/the-engineer.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'He built the cannon, and he will die before he leaves it. Mostly bluster and bulk — but every blow you waste on him is a blow the cannon gets to answer.',
+    ai: {
+      imageContext:
+        'Stout, grease-stained siege engineer.\n\nHeavy leather apron over a soot-smudged shirt, brass goggles pushed up on his forehead.\n\nGripping an oversized iron wrench like a club.\n\nTool-belt heavy with spanners.\n\nPlanted, defiant, blocking the way.\n\nThe engineer is a small goblin creature',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      provocation: 13,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('block'), ABILITIES('slam'), ABILITIES('block'), ABILITIES('slam')],
+  },
+  cannon: {
+    name: 'Cannon',
+    race: ALL_RACES.creature,
+    type: 'prop',
+    image: 'creature/cannon.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    power: 0.5,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Iron-throated and patient. While the engineer keeps you busy, it takes its time — and it does not miss twice.',
+    ai: {
+      imageContext:
+        'A heavy bronze bombard cannon mounted on a two-wheeled wooden carriage. No creature — an inanimate siege weapon.\n\nThick banded barrel, scorched smoking muzzle.\n\nA stack of black iron cannonballs piled beside the wheels.\n\nWeathered wood, soot stains.',
+      legs: 0,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: 0.7,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('boom'), ABILITIES('boom'), ABILITIES('boom'), ABILITIES('boom')],
+  },
+  goblinHorn: {
+    name: 'Horn Goblin',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'creature/horn-goblin.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "The pack's voice. When the horn sounds, every goblin in earshot fights twice as hard.",
+    ai: {
+      imageContext:
+        "Small green-grey goblin raising a great curled ram's-horn to its lips, cheeks puffed mid-blow.\n\nOversized ears, jagged teeth.\n\nMismatched leather scraps, a satchel at its hip.\n\nThe war-horn is the focal point.",
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE + 4,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('stab'),
+      ABILITIES('cut'),
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+      ABILITIES('cut'),
+      ABILITIES('stab'),
+    ],
+  },
+  goblinStabber: {
+    name: 'Stabber Goblin',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'creature/stabber-goblin.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Goes for the soft parts and the tendons. Leaves you bleeding for the others to finish.',
+    ai: {
+      imageContext:
+        'Small green-grey goblin crouched low, a crude rusty knife in each hand.\n\nOversized ears, jagged teeth, darting eyes.\n\nBlood-flecked leather scraps.\n\nReady to lunge.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: DEFAULT_LUCKY_STATS.criticalDamage + 0.2,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('lacerate'),
+      ABILITIES('stab'),
+      ABILITIES('lacerate'),
+      ABILITIES('stab'),
+      ABILITIES('lacerate'),
+      ABILITIES('stab'),
+    ],
+  },
+  goblinBasher: {
+    name: 'Basher Goblin',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'creature/basher-goblin.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Swings a club bigger than it is. What it lacks in aim it makes up for in enthusiasm.',
+    ai: {
+      imageContext:
+        'Small but stocky green-grey goblin hefting an oversized crude bone club in both hands.\n\nOversized ears, jagged grin.\n\nMismatched leather scraps, braced wide.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      armorPenetration: 2,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('slam'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('sunder'),
+      ABILITIES('sunder'),
+    ],
+  },
+  goblinSlinger: {
+    name: 'Slinger Goblin',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'creature/slinger-goblin.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description: 'Hangs back and pelts you with stones. Hits more often than it has any right to.',
+    ai: {
+      imageContext:
+        'Small green-grey goblin, one eye squinted in aim.\n\nA bulging pouch of stones at its hip.\n\nOversized ears, mismatched leather scraps.\n\nGoblin wields a handheld slingshot and takes aim.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: DEFAULT_LUCKY_STATS.criticalDamage + 0.2,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('slingshot'),
+      ABILITIES('slingshot'),
+      ABILITIES('daggerThrow'),
+      ABILITIES('slingshot'),
+      ABILITIES('slingshot'),
+      ABILITIES('daggerThrow'),
+      ABILITIES('slingshot'),
+    ],
+  },
+  goblinNetter: {
+    name: 'Netter Goblin',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'creature/netter-goblin.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description: 'Tangles you in a net so the rest can swarm. The net is the dangerous part.',
+    ai: {
+      imageContext:
+        'Small green-grey goblin swinging a weighted net overhead, a crude spike in its other hand.\n\nOversized ears, sharp grin, wide stance.\n\nMismatched leather scraps.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        hitChance: DEFAULT_LUCKY_STATS.hitChance + 0.4,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('weave'),
+      ABILITIES('stab'),
+      ABILITIES('weave'),
+      ABILITIES('stab'),
+      ABILITIES('stab'),
+    ],
+  },
+  plagueDoctor: {
+    name: 'Plague Doctor',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/plague-doctor.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "A masked physician who treats the arena's wounded — and quietly sees to the ones he's paid to.<br /><br />He does not rush. He simply administers, and waits for the dose to take.",
+    ai: {
+      imageContext:
+        'Tall gaunt figure in a long waxed-leather plague-doctor coat.\n\nIconic bird-beak mask with round glass eye-lenses, wide-brimmed hat.\n\nEerie, methodical, looming.\n\nLess steampunk. Make the beak clearly a mask.\n\nNo coat.\n\nSimple clothing.\n\nDynamic pose. Hold a skull "to be or not to be"-style.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        magicChance: 0.1,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('poisonousSting'),
+      ABILITIES('lacerate'),
+      ABILITIES('poisonousSting'),
+      ABILITIES('smokebomb'),
+    ],
+  },
+  wolf: {
+    name: 'Wolf',
+    race: ALL_RACES.felidae,
+    type: 'creature',
+    image: 'creature/wolf.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description: 'A lean pack-hunter. Alone it hesitates; with its pack, it does not.',
+    ai: {
+      imageContext:
+        'Lean grey timber wolf, ribs showing, thick scruff at the neck.\n\nYellow eyes, ears pinned back, lips peeled off the teeth.\n\nScarred muzzle, hackles raised.\n\nLow prowling stance.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.15,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('pounce'), ABILITIES('bite'), ABILITIES('ripAndTear'), ABILITIES('bite')],
+  },
+  regularSizedCombatant: {
+    name: 'Regular Sized Combatant',
+    race: ALL_RACES.dwarf,
+    type: 'humanoid',
+    image: 'creature/regular-sized-combatant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Just a regular-sized combatant. One fighter, normal height, nothing to remark upon.',
+    ai: {
+      imageContext:
+        "Two dwarves stacked on top of each other, one sitting on the other's shoulders.\n\nBottom dwarf's boots planted, arms holding the legs of the dwarf on top; top dwarf's bearded face and arms emerging at the collar, gripping an axe.",
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: 0.7,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('cut'),
+      ABILITIES('swing'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('swing'),
+      ABILITIES('cut'),
+    ],
+  },
+  grizzlyBear: {
+    name: 'Grizzly Bear',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/grizzly-bear.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1.2,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'Trapped young, kept lean, fed only on the day of the fight.<br /><br />Every fiber of it wants to be somewhere else. The only way out is through you.',
+    ai: {
+      imageContext:
+        'Large grizzly bear. No pupils.\n\nWild desperate eyes, jaws open mid-roar.\n\nFierce and in a "about to attack" pose',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.2,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('intimidatingRoar'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('bite'),
+      ABILITIES('ripAndTear'),
+      ABILITIES('bite'),
+    ],
+  },
+  beastmaster: {
+    name: 'Beastmaster',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/beastmaster.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'A weathered beast-tamer who lets her hyena do the killing. The whip is for keeping it hungry — and for you.',
+    ai: {
+      imageContext:
+        'Lean, weathered woman, a beast-tamer.\n\nPractical leather-and-hide armor with fur trim and bone-and-tooth trophies.\n\nA long coiled whip in one hand, a bone whistle on a cord at her neck.\n\nHair tied back, sharp commanding eyes, old scars.\n\nConfident, planted stance.\n\nWell armored sexy lean body',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.15,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('lacerate'),
+      ABILITIES('demoralizingShout'),
+      ABILITIES('lacerate'),
+      ABILITIES('lacerate'),
+      ABILITIES('stab'),
+    ],
+  },
+  blindSwordsman: {
+    name: 'Blind Swordsman',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/blind-swordsman.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "He lost his eyes years ago. He did not lose the rest.<br /><br />He fights by sound and by the shift of the air, and he has outlasted men with two good eyes. The bandage isn't for show.",
+    ai: {
+      imageContext:
+        'Lean, scarred swordsman with a strip of white cloth bound over his eyes.\n\nPractical worn fighting clothes, sleeves rolled.\n\nA single slender sword drawn, held low and ready.\n\nHead slightly tilted as if listening; calm, disciplined, perfectly balanced.\n\nWields a twohanded schimitar',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.2,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('riposte'),
+      ABILITIES('swing'),
+      ABILITIES('cut'),
+      ABILITIES('swing'),
+      ABILITIES('cut'),
+    ],
+  },
+  warElephant: {
+    name: 'War Elephant',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/war-elephant.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1.4,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'It will not chase you. It does not need to.<br /><br />Wherever it stands, that is the dangerous part of the arena.',
+    ai: {
+      imageContext:
+        'Enormous war elephant, towering over the sand.\n\nThick grey wrinkled hide, huge curved tusks capped with banded iron.\n\nBroad flapping ears, trunk raised.\n\nTattered war-barding draped over its back, massive pillar legs, planted and immovable.',
+      legs: 4,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: {
+        ...DEFAULT_TOLERANCE,
+        stunned: 12,
+      },
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [ABILITIES('stomp'), ABILITIES('gore'), ABILITIES('slam'), ABILITIES('gore')],
+  },
+  grandChampion: {
+    name: 'The Grand Champion',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/the-grand-champion.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      "Undefeated in forty matches. Wears the laurel and the chip on his shoulder both like jewelry.<br /><br />He has fought every style the arena offers and beaten most of them. He's been waiting for you.",
+    ai: {
+      imageContext:
+        'Proud, powerfully built champion gladiator in his prime.\n\nOrnate decorated breastplate and a single grand pauldron, a laurel crown on his brow.\n\nBattle-scarred but composed, an arrogant half-smile.\n\nA fine gladius held with easy confidence, statuesque stance.',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalDamage: 0.8,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('riposte'),
+      ABILITIES('swing'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('sunder'),
+    ],
+  },
+  emperor: {
+    name: 'The Emperor',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'creature/the-emperor.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description:
+      'He does not need to be here. He chose to be here.<br /><br />When the Emperor enters the sand, the guards lower their pikes and the crowd holds its breath.<br /><br />Win, and the city will know your name. Lose, and the city will not remember it.',
+    ai: {
+      imageContext:
+        'Regal, imposing emperor seated on a massive ornate throne, not deigning to rise.\n\nGilded imperial armor and a deep purple cloak draped over the throne.\n\nA golden laurel crown, cold supremely confident expression.\n\nOne hand resting on a masterwork sword laid across his lap.\n\nThe throne is grand and carved from gold and marble — the single most important figure in the arena.\n\nKeep fidelity down, simple design',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...{
+        ...DEFAULT_LUCKY_STATS,
+        criticalChance: 0.2,
+      },
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: Infinity,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('swing'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('riposte'),
+    ],
+  },
+  motherAlora: {
+    name: 'Alora',
+    race: ALL_RACES.creature,
+    type: 'humanoid',
+    image: 'npc/mother-alora.webp',
+    mugshot: {
+      x: 55,
+      y: 9,
+    },
+    size: 1,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'Mother of all living things and the grace behind every healer’s hands. She lends herself to the ludus for a time, mending the wounds the arena leaves behind.',
+    ai: {
+      imageContext:
+        'She is adult, sweet and kind. She takes care of battle bruised gladiators.\n\nShe is a young human medic',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: 60,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: {
+        ...DEFAULT_RESISTANCES,
+        nature: 8,
+      },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('alorasTouch', false, { overrides: { ticks: 12 } })],
+  },
+  oswald: {
+    name: 'Oswald the Outfitter',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'npc/oswald.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'A weathered quartermaster who has outfitted a hundred doomed expeditions. His prices are fair, his steel is honest, and he never asks where the coin came from.',
+    ai: {
+      imageContext:
+        'Weathered quartermaster standing, holding a wooden crate of supplies with a laden pack on his back\n\nGreying hair and beard, brown leather apron over work clothes, satchels and coiled rope, sturdy boots',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: { ...DEFAULT_RESISTANCES, frost: 8 },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('frostbite'),
+      ABILITIES('frostbite'),
+      ABILITIES('frostbite'),
+      ABILITIES('frostbite'),
+    ],
+  },
+  mira: {
+    name: 'Mira the Trinketeer',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'npc/mira.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'A travelling curio-dealer whose cart rattles with oddities and half-cursed baubles. She deals only in higher-grade finds.',
+    ai: {
+      imageContext:
+        'Elven curio-dealer standing, examining a small trinket in her hands\n\nLong blonde hair, pointed ears, green hooded robe and skirt, a large leather satchel hung with dangling charms and baubles',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: { ...DEFAULT_RESISTANCES, frost: 8 },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('frostbite'),
+      ABILITIES('frostbite'),
+      ABILITIES('frostbite'),
+      ABILITIES('frostbite'),
+    ],
+  },
+  brog: {
+    name: 'Brog Ironhand',
+    race: ALL_RACES.dwarf,
+    type: 'humanoid',
+    image: 'npc/brog.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'A barrel-chested dwarf who claims his hammer has never struck the same blow twice. He forges only the heaviest gear.',
+    ai: {
+      imageContext:
+        'Burly dwarf smith standing, a forging hammer in one hand and tongs in the other\n\nRed mohawk and long braided beard, bare muscular arms, a brown leather apron over a broad bare chest',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: { ...DEFAULT_RESISTANCES, fire: 8 },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('emberStrike'),
+      ABILITIES('emberStrike'),
+      ABILITIES('emberStrike'),
+      ABILITIES('emberStrike'),
+    ],
+  },
+  grukk: {
+    name: 'Grukk Emberfist',
+    race: ALL_RACES.troll,
+    type: 'humanoid',
+    image: 'npc/grukk.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1.2,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'A troll smith who works molten ore with bare hands and a worrying grin. Only the strongest dare browse his wares.',
+    ai: {
+      imageContext:
+        'Hulking troll smith standing, molten embers glowing around his bare fists\n\nGrey-green skin, lower tusks, dark topknot hair, pointed ears, a heavy leather apron',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: { ...DEFAULT_RESISTANCES, earth: 8 },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [ABILITIES('stoneShatter'), ABILITIES('stoneShatter')],
+  },
+  nibsy: {
+    name: 'Nibsy Sparkwrench',
+    race: ALL_RACES.goblin,
+    type: 'humanoid',
+    image: 'npc/nibsy.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 0.9,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'A goblin tinkerer convinced that every weapon can be improved with one more spring. His contraptions are strictly top-tier.',
+    ai: {
+      imageContext:
+        'Small goblin tinkerer standing, holding a sparking mechanical contraption in both hands\n\nGreen skin, large pointed ears, goggles pushed up on the forehead, leather work clothes, a tool belt hung with wrenches and gadgets',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: { ...DEFAULT_RESISTANCES, lightning: 8 },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+    ],
+  },
+  doctoreVarro: {
+    name: 'Doctore Varro',
+    race: ALL_RACES.human,
+    type: 'humanoid',
+    image: 'npc/doctore-varro.webp',
+    mugshot: DEFAULT_MUGSHOT_COORDINATES,
+    size: 1,
+    equipment: DEFAULT_EQUIPMENT,
+    description:
+      'A scarred ex-champion who outlasted a hundred bouts on the sand and now drills the next generation at the Palaestra. He breaks brawlers down and builds them back harder.',
+    ai: {
+      imageContext:
+        'Grizzled veteran gladiator trainer standing, gripping a wooden training sword (rudis) point-down, one foot forward as if mid-drill\n\nShaved head, greying stubble, old battle scars across a muscular bare torso, leather pteruges skirt and forearm wraps, a worn red trainer’s sash at the waist',
+      legs: 2,
+    },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      tolerance: DEFAULT_TOLERANCE,
+      resistances: { ...DEFAULT_RESISTANCES, earth: 8 },
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('warcry'),
+      ABILITIES('swing'),
+      ABILITIES('crushingBlow'),
+      ABILITIES('riposte'),
+    ],
+  },
+};
+
+// Merging meta.overrides must not touch the caller's ref — refs are often live
+// state ($.characters), and deepMerge mutates its target. Clone first.
+export default (id, fullBody = false, meta) => {
+  const character = entity(
+    ALL_CHARACTERS,
+    typeof id === 'string' ? id : id.id,
+    typeof id === 'string' ? undefined : id.uuid,
+    fullBody,
+    typeof id === 'string'
+      ? meta?.overrides
+      : meta?.overrides
+        ? deepMerge(JSON.parse(JSON.stringify(id.overrides || {})), meta.overrides || {})
+        : id.overrides,
+  );
+  // A frozen `level` rides along for cross-account combat (teamplay): the brawler's
+  // owner level must drive its stats on every viewer's client — not the viewer's own
+  // level, which is the calculateCombatStatsByCharacter fallback. entity() drops it.
+  if (typeof id === 'object' && id?.level != null) character.level = id.level;
+  return character;
+};
diff --git a/src/constants/COMBAT_STATS.ts b/js/constants/COMBAT_STATS.js
similarity index 100%
rename from src/constants/COMBAT_STATS.ts
rename to js/constants/COMBAT_STATS.js
diff --git a/js/constants/DEFAULT_GAME_STATE.js b/js/constants/DEFAULT_GAME_STATE.js
new file mode 100644
index 00000000..aa632a2f
--- /dev/null
+++ b/js/constants/DEFAULT_GAME_STATE.js
@@ -0,0 +1,24 @@
+// The persisted game state — the ONLY keys written to the DB, in the order they are
+// sent. Saved per season; statistics + achievements are also mirrored onto the
+// account doc. Single source of truth: app.js spreads this into the live state,
+// connectSocket's buildSavePayload derives its keys from it, and scripts/seed-bots.js
+// builds bot documents from it so a structure change flows everywhere automatically.
+export const DEFAULT_GAME_STATE = {
+  inventory: [],
+  materials: {}, // material id → owned count; granted from PVE loot, shown in the top bar.
+  characters: [],
+  statistics: {}, // recursive { count?, max?, nodes? } event log built by incStat; saved per season + mirrored to the account for the statistics page.
+  achievements: {}, // { <id>: { earnedAt } } earned THIS season; saved per season + mirrored to the account (achievements.<label>) exactly like statistics.
+  experience: 0,
+  coins: 100,
+  accountRewards: 1,
+  potions: 3,
+  bossHighscore: 0,
+  buildings: {
+    medicum: { assignedBrawlers: [] }, // uuids of party brawlers assigned to brew potions (post level-5 unlock).
+    palaestra: { assignedBrawlers: [] }, // uuids of party brawlers assigned to train (post level-10 unlock).
+  },
+  seasonPass: { heirloom: false }, // seasonal flag — the level-1 Heirloom reward is granted once per season.
+};
+
+export const PERSISTED_KEYS = Object.keys(DEFAULT_GAME_STATE);
diff --git a/js/constants/ELEMENTS.js b/js/constants/ELEMENTS.js
new file mode 100644
index 00000000..ba3154a6
--- /dev/null
+++ b/js/constants/ELEMENTS.js
@@ -0,0 +1,11 @@
+export const ALL_ELEMENTS = {
+  nature: { name: 'nature', color: 'var(--element-nature)' },
+  earth: { name: 'earth', color: 'var(--element-earth)' },
+  lightning: { name: 'lightning', color: 'var(--element-lightning)' },
+  frost: { name: 'frost', color: 'var(--element-frost)' },
+  fire: { name: 'fire', color: 'var(--element-fire)' },
+};
+
+export const ELEMENT_KEYS = Object.keys(ALL_ELEMENTS);
+
+export const ZERO_RESISTANCES = Object.fromEntries(ELEMENT_KEYS.map((key) => [key, 0]));
diff --git a/js/constants/EQUIPMENT.js b/js/constants/EQUIPMENT.js
new file mode 100644
index 00000000..68d26467
--- /dev/null
+++ b/js/constants/EQUIPMENT.js
@@ -0,0 +1,1766 @@
+import ABILITIES from '/js/constants/ABILITIES.js';
+import { WEAPON_TYPES } from '/js/constants/WEAPON_TYPES.js';
+import { ARMOR_TYPES } from '/js/constants/ARMOR_TYPES.js';
+import { TRINKET_TYPES } from '/js/constants/TRINKET_TYPES.js';
+import { ACCESSORY_TYPES } from '/js/constants/ACCESSORY_TYPES.js';
+import entity from '/js/entity.js';
+import { deepAdd, deepMerge } from '/js/helpers.js';
+
+export const ALL_EQUIPMENT = {
+  sword: {
+    type: WEAPON_TYPES.sword,
+    name: 'Sword',
+    description: 'A simple sword.',
+    slotsIn: 'oneHand',
+    level: 2,
+    combatStats: {
+      criticalChance: 0.02,
+    },
+    abilities: [ABILITIES('swing'), ABILITIES('swing')],
+  },
+  axe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Axe',
+    description: 'A simple axe.',
+    slotsIn: 'oneHand',
+    level: 2,
+    combatStats: {
+      criticalDamage: 0.2,
+    },
+    abilities: [ABILITIES('swing'), ABILITIES('swing')],
+  },
+  hammer: {
+    type: WEAPON_TYPES.mace,
+    name: 'Hammer',
+    description: 'A simple hammer.',
+    slotsIn: 'oneHand',
+    level: 2,
+    combatStats: {
+      armorPenetration: 1,
+    },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+    ],
+  },
+  shield: {
+    type: WEAPON_TYPES.shield,
+    name: 'Shield',
+    description: 'A simple shield.',
+    slotsIn: 'offHand',
+    level: 1,
+    combatStats: {
+      blockChance: 0.1,
+    },
+    abilities: [ABILITIES('block'), ABILITIES('shieldBash')],
+  },
+  buckler: {
+    type: WEAPON_TYPES.shield,
+    name: 'Buckler',
+    description: 'A small fist-shield made to catch a blow and throw it straight back.',
+    slotsIn: 'offHand',
+    level: 5,
+    cost: 200,
+    combatStats: {
+      blockChance: 0.05,
+    },
+    abilities: [ABILITIES('block'), ABILITIES('deflect'), ABILITIES('shieldBash')],
+  },
+  towerShield: {
+    type: WEAPON_TYPES.shield,
+    name: 'Tower Shield',
+    description: 'A tall slab of banded oak and iron — heavy to carry, but little gets past it.',
+    slotsIn: 'offHand',
+    level: 12,
+    cost: 200,
+    materials: { wood: 1, steel: 1 },
+    combatStats: {
+      blockChance: 0.12,
+      provocation: 15,
+    },
+    abilities: [ABILITIES('block'), ABILITIES('shieldBash')],
+  },
+  skjaldborg: {
+    type: WEAPON_TYPES.shield,
+    name: 'Skjaldborg',
+    description: "A shield wall frozen into a single bulwark — Kyl's frost binds the line.",
+    slotsIn: 'offHand',
+    level: 20,
+    elements: ['frost'],
+    obtainedFrom: [],
+    combatStats: {
+      blockChance: 0.15,
+      provocation: 25,
+      resistances: { frost: 10 },
+    },
+    abilities: [ABILITIES('shieldWall')],
+  },
+  armarilloCarapace: {
+    type: WEAPON_TYPES.shield,
+    name: 'Armarillo Carapace',
+    description:
+      'A jade-spined shell prised from the beast itself. Brace behind it and the spines do the answering.',
+    slotsIn: 'offHand',
+    level: 17,
+    elements: ['earth'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      blockChance: 0.12,
+    },
+    abilities: [ABILITIES('spikeWall'), ABILITIES('block'), ABILITIES('shieldBash')],
+  },
+  twoHandedAxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Great Axe',
+    description: 'A mighty two-handed axe.',
+    slotsIn: 'twoHand',
+    level: 3,
+    combatStats: {
+      criticalChance: 0.06,
+    },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+    ],
+  },
+  executionersAxe: {
+    type: WEAPON_TYPES.axe,
+    name: "Executioner's Axe",
+    description:
+      'A broad crescent blade, equal parts battlefield axe and headsman’s tool — it can swing all day, but it was made for the one certain stroke.',
+    slotsIn: 'twoHand',
+    level: 8,
+    obtainedFrom: ['pve-fight'],
+    combatStats: {},
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('execute'),
+    ],
+  },
+  twoHandedSpear: {
+    type: WEAPON_TYPES.spear,
+    name: 'Spear',
+    description: 'A mighty two-handed spear.',
+    slotsIn: 'twoHand',
+    level: 2,
+    combatStats: {
+      criticalChance: 0.04,
+      criticalDamage: 0.4,
+    },
+    abilities: [
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+    ],
+  },
+  heavyClub: {
+    type: WEAPON_TYPES.club,
+    name: 'Heavy Club',
+    description: "A mighty two-handed club.<br />It's slammer time!",
+    slotsIn: 'twoHand',
+    level: 2,
+    combatStats: {
+      armorPenetration: 2,
+      criticalDamage: 0.3,
+    },
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam')],
+  },
+  twoHandedHammer: {
+    type: WEAPON_TYPES.mace,
+    name: 'Two-handed Hammer',
+    description: 'A massive two-handed maul that drives foes to their knees.',
+    slotsIn: 'twoHand',
+    level: 6,
+    cost: 200,
+    combatStats: {
+      armorPenetration: 4,
+      criticalDamage: 0.5,
+    },
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam'), ABILITIES('crushingBlow')],
+  },
+  club: {
+    type: WEAPON_TYPES.club,
+    name: 'Club',
+    description: 'A simple club.',
+    slotsIn: 'oneHand',
+    level: 2,
+    combatStats: {
+      armorPenetration: 1,
+      criticalDamage: 0.15,
+    },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+    ],
+  },
+  flail: {
+    type: WEAPON_TYPES.flail,
+    name: 'Flail',
+    description: 'A spiked head on a length of chain — clumsy, but it hits hard.',
+    slotsIn: 'oneHand',
+    level: 6,
+    combatStats: {
+      armorPenetration: 1,
+    },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+    ],
+  },
+  greatSword: {
+    type: WEAPON_TYPES.sword,
+    name: 'Greatsword',
+    description: 'A mighty two-handed sword.',
+    slotsIn: 'twoHand',
+    level: 2,
+    combatStats: {
+      criticalChance: 0.04,
+    },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+    ],
+  },
+  bow: {
+    type: WEAPON_TYPES.bow,
+    name: 'Bow',
+    description: 'A simple bow.',
+    slotsIn: 'twoHand',
+    level: 2,
+    combatStats: {
+      criticalDamage: 0.6,
+    },
+    abilities: [ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce')],
+  },
+  heartpiercer: {
+    type: WEAPON_TYPES.bow,
+    name: 'Heartpiercer',
+    description: 'A heavy bow built to punch through armor and hearts alike.',
+    slotsIn: 'twoHand',
+    level: 5,
+    combatStats: {
+      criticalChance: 0.04,
+    },
+    abilities: [
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('powerShot'),
+    ],
+  },
+  dagger: {
+    type: WEAPON_TYPES.dagger,
+    name: 'Dagger',
+    description: 'A really sharp dagger.',
+    slotsIn: 'oneHand',
+    level: 2,
+    combatStats: {
+      damage: -1,
+      criticalChance: 0.03,
+      criticalDamage: 0.1,
+    },
+    abilities: [ABILITIES('stab'), ABILITIES('stab'), ABILITIES('stab')],
+  },
+
+  ironLongsword: {
+    type: WEAPON_TYPES.sword,
+    name: 'Iron Longsword',
+    description: 'A soldier’s blade, balanced and honestly made.',
+    slotsIn: 'oneHand',
+    level: 5,
+    combatStats: { criticalChance: 0.03 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing')],
+  },
+  knightsArmingSword: {
+    type: WEAPON_TYPES.sword,
+    name: "Knight's Arming Sword",
+    description: 'A keen-edged sidearm carried by those sworn to the banner.',
+    slotsIn: 'oneHand',
+    level: 12,
+    races: ['human'],
+    cost: 200,
+    materials: { leather: 1, steel: 1 },
+    combatStats: { criticalChance: 0.04, criticalDamage: 0.1 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('sunder')],
+  },
+  trollGreatclub: {
+    type: WEAPON_TYPES.club,
+    name: 'Troll Greatclub',
+    description: 'A whole young tree, stripped and iron-shod — only a troll swings it true.',
+    slotsIn: 'twoHand',
+    races: ['troll'],
+    level: 24,
+    cost: 600,
+    materials: { leather: 2, wood: 3 },
+    combatStats: { criticalDamage: 0.25 },
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam'), ABILITIES('crushingBlow')],
+  },
+  kingslayer: {
+    type: WEAPON_TYPES.sword,
+    name: 'Kingslayer',
+    description: 'A blade that has ended crowns. It remembers every one.',
+    slotsIn: 'oneHand',
+    level: 25,
+    elements: ['lightning'],
+    obtainedFrom: [],
+    combatStats: { criticalChance: 0.07, criticalDamage: 0.4, armorPenetration: 8 },
+    abilities: [ABILITIES('stormStrike'), ABILITIES('stormStrike')],
+  },
+  handAxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Hand Axe',
+    description: 'A stout chopping axe, as much tool as weapon.',
+    slotsIn: 'oneHand',
+    level: 5,
+    combatStats: { criticalChance: 0.02 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing')],
+  },
+  beardedAxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Bearded Axe',
+    description: 'Its hooked beard catches shields and bites past them.',
+    slotsIn: 'oneHand',
+    level: 6,
+    combatStats: { criticalChance: 0.03 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('sunder')],
+  },
+  runedWaraxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Runed Waraxe',
+    description: 'Dwarven runes crawl across the head, cut deep into the iron.',
+    slotsIn: 'oneHand',
+    level: 18,
+    elements: ['fire'],
+    obtainedFrom: [],
+    combatStats: { criticalChance: 0.04, armorPenetration: 6 },
+    abilities: [ABILITIES('emberStrike'), ABILITIES('emberStrike')],
+  },
+  emberfistCleaver: {
+    type: WEAPON_TYPES.axe,
+    name: 'Emberfist Cleaver',
+    description: 'Quenched in trollfire, the edge still smells of smoke.',
+    slotsIn: 'oneHand',
+    level: 22,
+    elements: ['fire'],
+    obtainedFrom: [],
+    combatStats: { criticalChance: 0.05, armorPenetration: 7 },
+    abilities: [ABILITIES('emberStrike'), ABILITIES('emberStrike')],
+  },
+
+  flangedMace: {
+    type: WEAPON_TYPES.mace,
+    name: 'Flanged Mace',
+    description: 'Ridged flanges made to split helm and plate alike.',
+    slotsIn: 'oneHand',
+    level: 5,
+    combatStats: { armorPenetration: 2 },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('sunder'),
+    ],
+  },
+  dwarvenSkullmaul: {
+    type: WEAPON_TYPES.mace,
+    name: 'Dwarven Skullmaul',
+    description: 'A blunt slab of mountain iron, named for what it does.',
+    slotsIn: 'oneHand',
+    level: 13,
+    races: ['dwarf'],
+    cost: 300,
+    materials: { steel: 4 },
+    combatStats: { armorPenetration: 7, criticalChance: 0.02 },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('crushingBlow'),
+    ],
+  },
+  tremorhammer: {
+    type: WEAPON_TYPES.mace,
+    name: 'Tremorhammer',
+    description: 'Each blow lands like the mountain shrugging.',
+    slotsIn: 'oneHand',
+    level: 24,
+    elements: ['earth'],
+    obtainedFrom: [],
+    combatStats: { armorPenetration: 9, criticalChance: 0.03 },
+    abilities: [ABILITIES('stoneShatter')],
+  },
+  fangDagger: {
+    type: WEAPON_TYPES.dagger,
+    name: 'Fang Dagger',
+    description: 'A curved tooth of steel, made for the soft places.',
+    slotsIn: 'oneHand',
+    level: 5,
+    combatStats: { damage: -2, criticalChance: 0.04, criticalDamage: 0.2 },
+    abilities: [ABILITIES('stab'), ABILITIES('stab'), ABILITIES('stab'), ABILITIES('lacerate')],
+  },
+  venomsKiss: {
+    type: WEAPON_TYPES.dagger,
+    name: "Venom's Kiss",
+    description: 'A duelist’s blade, thin and patient and unkind.',
+    slotsIn: 'oneHand',
+    level: 12,
+    cost: 300,
+    materials: { leather: 2, steel: 2 },
+    combatStats: { criticalChance: 0.05, criticalDamage: 0.2 },
+    abilities: [ABILITIES('stab'), ABILITIES('stab'), ABILITIES('stab'), ABILITIES('riposte')],
+  },
+  whisperFinalHour: {
+    type: WEAPON_TYPES.dagger,
+    name: 'Whisper of the Final Hour',
+    description: 'They never hear it. That is the whole point of it.',
+    slotsIn: 'oneHand',
+    level: 26,
+    elements: ['frost'],
+    obtainedFrom: [],
+    combatStats: { criticalChance: 0.08, criticalDamage: 0.45 },
+    abilities: [ABILITIES('frostbite'), ABILITIES('frostbite'), ABILITIES('lacerate')],
+  },
+
+  warPike: {
+    type: WEAPON_TYPES.spear,
+    name: 'War Pike',
+    description: 'A long-hafted spear made to hold a line.',
+    slotsIn: 'twoHand',
+    level: 5,
+    combatStats: { criticalChance: 0.06 },
+    abilities: [
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+    ],
+  },
+  halberd: {
+    type: WEAPON_TYPES.spear,
+    name: 'Halberd',
+    description: 'Spear, axe and hook on a single shaft of ash.',
+    slotsIn: 'twoHand',
+    level: 13,
+    cost: 400,
+    materials: { wood: 1, steel: 3 },
+    combatStats: { criticalChance: 0.03 },
+    abilities: [
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('sunder'),
+    ],
+  },
+  glaiveOfTheVanguard: {
+    type: WEAPON_TYPES.spear,
+    name: 'Glaive of the Vanguard',
+    description: 'Carried at the front of the charge, where the fighting is worst.',
+    slotsIn: 'twoHand',
+    level: 23,
+    cost: 600,
+    materials: { steel: 5 },
+    combatStats: { criticalChance: 0.06, armorPenetration: 8 },
+    abilities: [
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('crushingBlow'),
+    ],
+  },
+  ruinblade: {
+    type: WEAPON_TYPES.axe,
+    name: 'Ruinblade',
+    description: 'A great axe whose every swing leaves less standing.',
+    slotsIn: 'twoHand',
+    level: 12,
+    cost: 400,
+    materials: { wood: 1, steel: 3 },
+    combatStats: { criticalDamage: 0.2 },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('whirlwind', false, { overrides: { ticks: 4, chainLink: 4 } }),
+    ],
+  },
+  emberforgedGreataxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Emberforged Greataxe',
+    description: 'Troll-smithed in living coals, still warm to the grip.',
+    slotsIn: 'twoHand',
+    level: 21,
+    elements: ['fire'],
+    obtainedFrom: [],
+    combatStats: { criticalDamage: 0.3, armorPenetration: 7 },
+    abilities: [
+      ABILITIES('emberStrike', false, { overrides: { ticks: 4 } }),
+      ABILITIES('emberStrike', false, { overrides: { ticks: 4 } }),
+      ABILITIES('emberStrike', false, { overrides: { ticks: 4 } }),
+      ABILITIES('whirlwind', false, { overrides: { ticks: 4, chainLink: 4 } }),
+    ],
+  },
+  worldcleaver: {
+    type: WEAPON_TYPES.axe,
+    name: 'Worldcleaver',
+    description: 'Lift it and the horizon seems to lean away from the edge.',
+    slotsIn: 'twoHand',
+    level: 25,
+    elements: ['earth'],
+    obtainedFrom: [],
+    combatStats: { criticalDamage: 0.45, armorPenetration: 10 },
+    abilities: [
+      ABILITIES('stoneShatter'),
+      ABILITIES('stoneShatter'),
+      ABILITIES('whirlwind', false, { overrides: { ticks: 4, chainLink: 4 } }),
+    ],
+  },
+  claymore: {
+    type: WEAPON_TYPES.sword,
+    name: 'Claymore',
+    description: 'A great two-handed sword with a long, sweeping reach.',
+    slotsIn: 'twoHand',
+    level: 6,
+    cost: 400,
+    combatStats: { criticalDamage: 0.15 },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+    ],
+  },
+  dwarvenGreatblade: {
+    type: WEAPON_TYPES.sword,
+    name: 'Dwarven Greatblade',
+    description: 'A slab of folded mountain steel, heavier than it looks.',
+    slotsIn: 'twoHand',
+    level: 19,
+    races: ['dwarf'],
+    cost: 400,
+    materials: { leather: 1, steel: 4 },
+    combatStats: { criticalDamage: 0.25 },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 3 } }),
+      ABILITIES('crushingBlow'),
+    ],
+  },
+  doombringer: {
+    type: WEAPON_TYPES.sword,
+    name: 'Doombringer',
+    description: 'The last thing many champions ever drew a blade against.',
+    slotsIn: 'twoHand',
+    level: 26,
+    elements: ['fire'],
+    obtainedFrom: [],
+    combatStats: { criticalDamage: 0.5, armorPenetration: 9 },
+    abilities: [
+      ABILITIES('emberStrike', false, { overrides: { ticks: 6 } }),
+      ABILITIES('emberStrike', false, { overrides: { ticks: 6 } }),
+    ],
+  },
+
+  yewLongbow: {
+    type: WEAPON_TYPES.bow,
+    name: 'Yew Longbow',
+    description: 'A tall bow of seasoned yew that buries shafts to the fletching.',
+    slotsIn: 'twoHand',
+    level: 6,
+    cost: 400,
+    combatStats: { criticalChance: 0.05 },
+    abilities: [
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('aimedShot'),
+    ],
+  },
+  windforce: {
+    type: WEAPON_TYPES.bow,
+    name: 'Windforce',
+    description: 'Its string sings, and the wind seems to carry every arrow true.',
+    slotsIn: 'twoHand',
+    level: 21,
+    elements: ['lightning'],
+    obtainedFrom: [],
+    combatStats: { criticalChance: 0.07, criticalDamage: 0.2 },
+    abilities: [
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+      ABILITIES('stormStrike'),
+      ABILITIES('powerShot'),
+    ],
+  },
+
+  heirloom: {
+    type: TRINKET_TYPES.relic,
+    name: 'Heirloom',
+    description:
+      'Handed down and proven on the sand. It carries a little of every fight that came before.',
+    slotsIn: 'trinket',
+    level: 1,
+    elements: ['fire', 'lightning', 'nature', 'frost', 'earth'],
+    protected: true,
+    obtainedFrom: ['levelUp'],
+    combatStats: {
+      modifiers: {
+        maxHealth: 0.05,
+        damage: 0.05,
+      },
+    },
+    abilities: [ABILITIES('mindsnap')],
+  },
+  giantsHeart: {
+    type: TRINKET_TYPES.relic,
+    name: "Giant's Heart",
+    description: 'It still pulsates oddly enough.',
+    slotsIn: 'trinket',
+    level: 25,
+    elements: ['earth'],
+    obtainedFrom: [],
+    combatStats: {
+      maxHealth: 20,
+      resistances: { earth: 12 },
+    },
+    abilities: [ABILITIES('demoralizingShout')],
+  },
+  emperorsSignet: {
+    type: TRINKET_TYPES.relic,
+    name: "Emperor's Signet",
+    description:
+      'The seal of a ruler who never rose from his throne — and never needed to. The sand answers to whoever wears it.',
+    slotsIn: 'trinket',
+    level: 15,
+    obtainedFrom: ['pve-ladder'],
+    combatStats: {
+      criticalChance: 0.1,
+      provocation: 25,
+      maxHealth: 12,
+    },
+    abilities: [ABILITIES('warcry')],
+  },
+  handheldCloud: {
+    type: TRINKET_TYPES.relic,
+    name: 'Handheld Cloud',
+    description:
+      'A thunderhead shrunk to fit the palm — restless, crackling, and always looking for the ground.',
+    slotsIn: 'trinket',
+    level: 25,
+    elements: ['lightning'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      criticalChance: 0.04,
+      resistances: { lightning: 15 },
+    },
+    abilities: [ABILITIES('lightningStorm')],
+  },
+  breffsRightsideHorn: {
+    type: TRINKET_TYPES.relic,
+    name: "Breff's Right-side Horn",
+    description:
+      'The right horn of the Breff, still cold to the touch. Raise it and the air locks into a wall of ice.',
+    slotsIn: 'trinket',
+    level: 18,
+    elements: ['frost'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {},
+    abilities: [ABILITIES('shieldWall')],
+  },
+  brigandine: {
+    type: ARMOR_TYPES.medium,
+    name: 'Brigandine',
+    description:
+      'Riveted plates sewn into a heavy coat — it turns blades, but the bulk fouls your aim.',
+    slotsIn: 'armor',
+    races: ['dwarf', 'human'],
+    level: 4,
+    cost: 200,
+    combatStats: {
+      hitChance: -0.2,
+    },
+    abilities: [],
+  },
+  paddedTunic: {
+    type: ARMOR_TYPES.light,
+    name: 'Padded Tunic',
+    description: 'Quilted cloth that takes the edge off a blow.',
+    slotsIn: 'armor',
+    level: 1,
+    cost: 0,
+    obtainedFrom: [],
+    combatStats: {},
+    abilities: [],
+  },
+  jestersCap: {
+    type: ARMOR_TYPES.light,
+    name: "Jester's Cap",
+    description:
+      'Belled and motley — it turns no blade at all, but the fool who dons it learns to wear two faces at once.',
+    slotsIn: 'armor',
+    level: 0,
+    elements: ['fire', 'lightning', 'nature', 'frost', 'earth'],
+    cost: 0,
+    obtainedFrom: ['pve-ladder'],
+    combatStats: {},
+    abilities: [ABILITIES('doublePersona')],
+  },
+  chainShirt: {
+    type: ARMOR_TYPES.medium,
+    name: 'Chain Shirt',
+    description: 'A short shirt of interlocking rings.',
+    slotsIn: 'armor',
+    level: 2,
+    cost: 100,
+    combatStats: {},
+    abilities: [],
+  },
+  leatherCuirass: {
+    type: ARMOR_TYPES.light,
+    name: 'Leather Cuirass',
+    description: 'Boiled leather — light, quiet, forgiving.',
+    slotsIn: 'armor',
+    level: 5,
+    cost: 200,
+    combatStats: {},
+    abilities: [],
+  },
+  furStole: {
+    type: ARMOR_TYPES.light,
+    name: 'Fur Stole',
+    description:
+      'A heavy pelt slung across the shoulders, prickling with the storm that clung to its old owner.',
+    slotsIn: 'armor',
+    level: 25,
+    elements: ['lightning'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      criticalChance: 0.02,
+      resistances: { lightning: 20 },
+    },
+    abilities: [],
+  },
+  thickhideArmor: {
+    type: ARMOR_TYPES.medium,
+    name: 'Thickhide Armor',
+    description:
+      'A slab of frost-beast hide, still cold to the touch — the winter never quite leaves it.',
+    slotsIn: 'armor',
+    level: 20,
+    elements: ['frost'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      provocation: 5,
+      resistances: { frost: 35 },
+    },
+    abilities: [],
+  },
+  ironPlate: {
+    type: ARMOR_TYPES.heavy,
+    name: 'Iron Plate',
+    description: 'Heavy iron that turns blades, but slows your swing.',
+    slotsIn: 'armor',
+    races: ['dwarf', 'human'],
+    level: 10,
+    combatStats: {
+      hitChance: -0.3,
+      provocation: 5,
+    },
+    abilities: [],
+  },
+  scaleMail: {
+    type: ARMOR_TYPES.medium,
+    name: 'Scale Mail',
+    description: 'Overlapping scales over a leather backing, sigils woven into the straps.',
+    slotsIn: 'armor',
+    level: 16,
+    elements: ['nature'],
+    obtainedFrom: [],
+    combatStats: {
+      dodgeChance: 0.04,
+      maxHealth: 6,
+      resistances: { nature: 8 },
+    },
+    abilities: [],
+  },
+  mastercraftedChestplate: {
+    type: ARMOR_TYPES.medium,
+    name: 'Mastercrafted Chestplate',
+    description:
+      'Plate fitted by a true master — it turns blades like heavy armor yet moves like a second skin.',
+    slotsIn: 'armor',
+    level: 15,
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      dodgeChance: 0.03,
+      maxHealth: 8,
+    },
+    abilities: [],
+  },
+  knightsPlate: {
+    type: ARMOR_TYPES.heavy,
+    name: "Knight's Plate",
+    description: 'Full plate for the front line — warded against the cold of the high passes.',
+    slotsIn: 'armor',
+    level: 18,
+    elements: ['frost'],
+    obtainedFrom: [],
+    combatStats: {
+      hitChance: -0.4,
+      blockChance: 0.05,
+      provocation: 20,
+      resistances: { frost: 10 },
+    },
+    abilities: [],
+  },
+  bandedMail: {
+    type: ARMOR_TYPES.medium,
+    name: 'Banded Mail',
+    description: 'Banded steel layered for the long fight, humming faintly in a storm.',
+    slotsIn: 'armor',
+    level: 21,
+    elements: ['lightning'],
+    obtainedFrom: [],
+    combatStats: {
+      blockChance: 0.05,
+      maxHealth: 8,
+      resistances: { lightning: 12 },
+    },
+    abilities: [],
+  },
+  warplate: {
+    type: ARMOR_TYPES.heavy,
+    name: 'Warplate',
+    description: 'Battle-scarred plate built to outlast the enemy, fire-tempered and grim.',
+    slotsIn: 'armor',
+    level: 23,
+    elements: ['fire'],
+    obtainedFrom: [],
+    combatStats: {
+      hitChance: -0.4,
+      blockChance: 0.06,
+      provocation: 25,
+      resistances: { fire: 14 },
+    },
+    abilities: [],
+  },
+  juggernautPlate: {
+    type: ARMOR_TYPES.heavy,
+    name: 'Juggernaut Plate',
+    description:
+      'An immovable shell of stone-bound steel. Little gets through — including your own blows.',
+    slotsIn: 'armor',
+    level: 26,
+    elements: ['earth'],
+    obtainedFrom: [],
+    combatStats: {
+      hitChance: -0.4,
+      blockChance: 0.08,
+      provocation: 30,
+      maxHealth: 10,
+      resistances: { earth: 16 },
+    },
+    abilities: [],
+  },
+  copperRing: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Copper Ring',
+    description: 'A plain band of cheap copper.',
+    slotsIn: 'accessory',
+    level: 5,
+    combatStats: {
+      criticalChance: 0.02,
+    },
+    abilities: [],
+  },
+  boneRing: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Bone Ring',
+    description: 'A ring carved from a knucklebone.',
+    slotsIn: 'accessory',
+    level: 5,
+    combatStats: {
+      criticalDamage: 0.15,
+    },
+    abilities: [],
+  },
+  pebbleEarring: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Pebble Earring',
+    description:
+      "A river-smoothed stone hung on a wire — humble, but it carries a little of the mountain's patience.",
+    slotsIn: 'accessory',
+    level: 22,
+    elements: ['earth'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      maxHealth: 20,
+      maxArmor: 10,
+      resistances: { earth: 20 },
+    },
+    abilities: [],
+  },
+  stoneRing: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Stone Ring',
+    description:
+      "A band of rune-cut granite — it lends the wearer a little of the mountain's hide.",
+    slotsIn: 'accessory',
+    level: 14,
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      modifiers: { maxArmor: 0.05 },
+    },
+    abilities: [],
+  },
+  shellNecklace: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Shell Necklace',
+    description: 'A string of river shells.',
+    slotsIn: 'accessory',
+    level: 5,
+    cost: 200,
+    combatStats: {
+      modifiers: {
+        maxHealth: 0.05,
+      },
+    },
+    abilities: [],
+  },
+  beadRing: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Bead Ring',
+    description: 'A loop of wooden beads worn on the finger.',
+    slotsIn: 'accessory',
+    level: 5,
+    cost: 100,
+    combatStats: {
+      dodgeChance: 0.02,
+    },
+    abilities: [],
+  },
+  toothNecklace: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Tooth Necklace',
+    description: 'A cord strung with old fangs.',
+    slotsIn: 'accessory',
+    level: 5,
+    cost: 200,
+    combatStats: {
+      modifiers: {
+        damage: 0.05,
+      },
+    },
+    abilities: [],
+  },
+  brazenCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Brazen Charm',
+    description: 'A gaudy brass trinket that catches the eye and draws enemy ire.',
+    slotsIn: 'accessory',
+    level: 5,
+    cost: 100,
+    combatStats: {
+      provocation: 5,
+    },
+    abilities: [],
+  },
+  scorpionCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Scorpion Charm',
+    description:
+      'A scorpion barb, capped and worn close — the body learns the venom and stops fearing it.',
+    slotsIn: 'accessory',
+    level: 5,
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      tolerance: { poisoned: 20 },
+    },
+    abilities: [],
+  },
+  blindfold: {
+    type: ARMOR_TYPES.light,
+    name: 'Blindfold',
+    description:
+      'Bind your eyes and the world goes quiet. You swing half as true — but when you land, you land for the kill.',
+    slotsIn: 'armor',
+    level: 13,
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      hitChance: -0.5,
+      criticalDamage: 1.5,
+    },
+    abilities: [],
+  },
+  frostwardPendant: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Frostward Pendant',
+    description: 'A shard of everfrost that never melts, and never lets the cold reach you.',
+    slotsIn: 'accessory',
+    level: 18,
+    elements: ['frost'],
+    obtainedFrom: [],
+    combatStats: {
+      dodgeChance: 0.04,
+      magicChance: 0.03,
+      resistances: { frost: 10 },
+    },
+    abilities: [],
+  },
+  arcaneSigil: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Arcane Sigil',
+    description: 'A rune that hums against the skin, opening the wearer to older powers.',
+    slotsIn: 'accessory',
+    level: 16,
+    elements: ['nature'],
+    obtainedFrom: [],
+    combatStats: {
+      magicChance: 0.08,
+      resistances: { nature: 10 },
+    },
+    abilities: [],
+  },
+  cerberusCollar: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Cerberus Collar',
+    description:
+      "A spiked iron collar from the beast's own neck. It runs hot — and so does whoever buckles it on.",
+    slotsIn: 'accessory',
+    level: 20,
+    elements: ['fire'],
+    obtainedFrom: ['pve-fight'],
+    combatStats: {
+      criticalChance: 0.03,
+      criticalDamage: 0.3,
+      resistances: { fire: 10 },
+    },
+    abilities: [],
+  },
+  emberheartCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Emberheart Charm',
+    description: 'A coal that has not gone out in a hundred years, warm against the chest.',
+    slotsIn: 'accessory',
+    level: 20,
+    elements: ['fire'],
+    obtainedFrom: [],
+    combatStats: {
+      magicChance: 0.05,
+      criticalChance: 0.03,
+      resistances: { fire: 12 },
+    },
+    abilities: [],
+  },
+  // --- Brog Ironhand (blacksmith, L12-17) ---
+  cleaverAxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Cleaver Axe',
+    description: 'A broad, heavy-bladed axe that bites deep.',
+    slotsIn: 'oneHand',
+    level: 14,
+    cost: 200,
+    materials: { wood: 1, steel: 1 },
+    combatStats: { criticalDamage: 0.15 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('sunder')],
+  },
+  ironbarkCudgel: {
+    type: WEAPON_TYPES.club,
+    name: 'Ironbark Cudgel',
+    description: 'A knot of iron-hard oak, banded for the arena.',
+    slotsIn: 'oneHand',
+    level: 13,
+    cost: 200,
+    materials: { wood: 2, steel: 1 },
+    combatStats: { armorPenetration: 3, criticalDamage: 0.15 },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('pommelStrike'),
+    ],
+  },
+  gutHook: {
+    type: WEAPON_TYPES.dagger,
+    name: 'Gut Hook',
+    description: 'A wicked hooked blade made to open and tear.',
+    slotsIn: 'oneHand',
+    level: 12,
+    cost: 300,
+    materials: { leather: 2, steel: 1 },
+    combatStats: { criticalChance: 0.04, criticalDamage: 0.2, damage: -2 },
+    abilities: [
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('rupture'),
+    ],
+  },
+  forgehammer: {
+    type: WEAPON_TYPES.mace,
+    name: 'Forgehammer',
+    description: "A smith's hammer grown to a weapon, dense and merciless.",
+    slotsIn: 'twoHand',
+    level: 15,
+    cost: 400,
+    materials: { steel: 3 },
+    combatStats: { armorPenetration: 6, criticalDamage: 0.2 },
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam'), ABILITIES('crushingBlow')],
+  },
+  stoutCrossbow: {
+    type: WEAPON_TYPES.bow,
+    name: 'Stout Crossbow',
+    description: 'A heavy windlass crossbow that punches through plate.',
+    slotsIn: 'twoHand',
+    races: ['human', 'elf', 'dwarf'],
+    level: 12,
+    cost: 400,
+    materials: { wood: 2, steel: 2 },
+    combatStats: { criticalChance: 0.03 },
+    abilities: [
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('aimedShot'),
+    ],
+  },
+  dwarvenWaraxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Dwarven Waraxe',
+    description: 'A broad dwarven waraxe, bearded and brutal, forged for the front rank.',
+    slotsIn: 'twoHand',
+    races: ['dwarf'],
+    level: 14,
+    cost: 400,
+    materials: { wood: 1, steel: 4 },
+    combatStats: { criticalChance: 0.04 },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('exposeArmor'),
+    ],
+  },
+  sellswordBlade: {
+    type: WEAPON_TYPES.sword,
+    name: 'Sellsword Blade',
+    description: 'A plain, reliable blade carried by those who fight for coin.',
+    slotsIn: 'oneHand',
+    level: 15,
+    cost: 300,
+    materials: { leather: 1, steel: 2 },
+    combatStats: {},
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('sunder')],
+  },
+  oakBulwark: {
+    type: WEAPON_TYPES.shield,
+    name: 'Oak Bulwark',
+    description: 'A slab of banded oak you can disappear behind.',
+    slotsIn: 'offHand',
+    level: 13,
+    cost: 200,
+    materials: { wood: 2, steel: 1 },
+    combatStats: { blockChance: 0.15, provocation: 10 },
+    abilities: [ABILITIES('block'), ABILITIES('bulwark'), ABILITIES('shieldBash')],
+  },
+  dwarvenWardplate: {
+    type: WEAPON_TYPES.shield,
+    name: 'Dwarven Wardplate',
+    description: 'A dwarven tower of riveted steel, proof against the worst.',
+    slotsIn: 'offHand',
+    races: ['dwarf'],
+    level: 16,
+    cost: 300,
+    materials: { steel: 4 },
+    combatStats: { blockChance: 0.18, provocation: 15 },
+    abilities: [ABILITIES('block'), ABILITIES('shieldBash'), ABILITIES('guardian')],
+  },
+  paddedGambeson: {
+    type: ARMOR_TYPES.light,
+    name: 'Padded Gambeson',
+    description: 'Quilted layers that turn a glancing blow and let you move.',
+    slotsIn: 'armor',
+    level: 12,
+    cost: 200,
+    materials: { cloth: 2, leather: 1 },
+    combatStats: { dodgeChance: 0.03 },
+    abilities: [],
+  },
+  ringmailCoat: {
+    type: ARMOR_TYPES.medium,
+    name: 'Ringmail Coat',
+    description: 'A coat of riveted rings over a leather backing.',
+    slotsIn: 'armor',
+    level: 13,
+    cost: 200,
+    materials: { leather: 2, steel: 1 },
+    combatStats: {},
+    abilities: [],
+  },
+  scaleHauberk: {
+    type: ARMOR_TYPES.medium,
+    name: 'Scale Hauberk',
+    description: 'Overlapping scales that shrug off the slash.',
+    slotsIn: 'armor',
+    level: 14,
+    cost: 300,
+    materials: { leather: 2, steel: 2 },
+    combatStats: { blockChance: 0.04 },
+    abilities: [],
+  },
+  bandedCuirass: {
+    type: ARMOR_TYPES.medium,
+    name: 'Banded Cuirass',
+    description: 'Horizontal bands of steel that draw the eye and the blow.',
+    slotsIn: 'armor',
+    level: 15,
+    cost: 300,
+    materials: { leather: 1, steel: 3 },
+    combatStats: { provocation: 6 },
+    abilities: [],
+  },
+  steelHalfplate: {
+    type: ARMOR_TYPES.heavy,
+    name: 'Steel Halfplate',
+    description:
+      'Heavy steel half-plate — it turns nearly everything, and slows your swing for it.',
+    slotsIn: 'armor',
+    level: 17,
+    cost: 400,
+    materials: { steel: 5 },
+    combatStats: { provocation: 10, hitChance: -0.2 },
+    abilities: [],
+  },
+  ironSignet: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Iron Signet',
+    description: 'A blunt iron seal-ring, heavier than it looks.',
+    slotsIn: 'accessory',
+    level: 12,
+    cost: 200,
+    materials: { steel: 1 },
+    combatStats: { criticalChance: 0.04 },
+    abilities: [],
+  },
+  graniteBand: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Granite Band',
+    description: 'A ring of polished granite that lends a blow real weight.',
+    slotsIn: 'accessory',
+    level: 13,
+    cost: 200,
+    materials: { steel: 2 },
+    combatStats: { criticalDamage: 0.4 },
+    abilities: [],
+  },
+  surestepRing: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Surestep Ring',
+    description: 'The foot that wears it always seems to find its footing.',
+    slotsIn: 'accessory',
+    level: 14,
+    cost: 200,
+    materials: { leather: 1, steel: 1 },
+    combatStats: { dodgeChance: 0.06 },
+    abilities: [],
+  },
+  guardstoneCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Guardstone Charm',
+    description: 'A worn river-stone that draws trouble toward its bearer.',
+    slotsIn: 'accessory',
+    level: 13,
+    cost: 200,
+    materials: { steel: 1 },
+    combatStats: { provocation: 10 },
+    abilities: [],
+  },
+  keeneyeCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Keeneye Charm',
+    description: 'A polished lens of quartz that finds the gap in the guard.',
+    slotsIn: 'accessory',
+    level: 14,
+    cost: 200,
+    materials: { leather: 1, steel: 1 },
+    combatStats: { criticalChance: 0.04, criticalDamage: 0.2 },
+    abilities: [],
+  },
+  stoneheartPendant: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Stoneheart Pendant',
+    description: 'A heavy iron pendant that steadies the heart in the heat of it.',
+    slotsIn: 'accessory',
+    level: 15,
+    cost: 300,
+    materials: { steel: 2 },
+    combatStats: { modifiers: { maxHealth: 0.1 } },
+    abilities: [],
+  },
+  wartoothPendant: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Wartooth Pendant',
+    description: 'A boar-tusk strung on wire — old arena luck.',
+    slotsIn: 'accessory',
+    level: 16,
+    cost: 300,
+    materials: { leather: 1, steel: 2 },
+    combatStats: { modifiers: { damage: 0.1 } },
+    abilities: [],
+  },
+  ferventBand: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Fervent Band',
+    description: 'A duelist’s ring, worn smooth by a hundred bouts.',
+    slotsIn: 'accessory',
+    level: 17,
+    cost: 300,
+    materials: { steel: 3 },
+    combatStats: { criticalChance: 0.05, armorPenetration: 3, hitChance: 0.1 },
+    abilities: [],
+  },
+  brassWarhorn: {
+    type: TRINKET_TYPES.relic,
+    name: 'Brass Warhorn',
+    description: 'A brass-bound horn whose note lifts the whole line.',
+    slotsIn: 'trinket',
+    level: 15,
+    cost: 400,
+    materials: { steel: 3 },
+    combatStats: { modifiers: { damage: 0.05 } },
+    abilities: [ABILITIES('warBanner')],
+  },
+  standardOfValor: {
+    type: TRINKET_TYPES.relic,
+    name: 'Standard of Valor',
+    description: 'A battered company standard that steadies all who fight beneath it.',
+    slotsIn: 'trinket',
+    level: 17,
+    cost: 600,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { provocation: 10 },
+    abilities: [ABILITIES('aegis')],
+  },
+  // --- Grukk Emberfist (blacksmith, L18-24) ---
+  jaggedShiv: {
+    type: WEAPON_TYPES.dagger,
+    name: 'Jagged Shiv',
+    description: 'A torn-metal shiv, all edges and bad intentions.',
+    slotsIn: 'oneHand',
+    level: 18,
+    cost: 200,
+    materials: { leather: 2, steel: 1 },
+    combatStats: { criticalChance: 0.06 },
+    abilities: [
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('cut'),
+      ABILITIES('rupture'),
+    ],
+  },
+  boneCrusher: {
+    type: WEAPON_TYPES.mace,
+    name: 'Bone Crusher',
+    description: 'A blunt slab of forge-iron meant for breaking, not cutting.',
+    slotsIn: 'oneHand',
+    level: 19,
+    cost: 200,
+    materials: { leather: 1, steel: 3 },
+    combatStats: { criticalDamage: 0.25 },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('pommelStrike'),
+    ],
+  },
+  reaverAxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Reaver Axe',
+    description: 'A raider’s axe, notched from too many shields.',
+    slotsIn: 'oneHand',
+    level: 20,
+    cost: 300,
+    materials: { leather: 2, steel: 2 },
+    combatStats: { criticalChance: 0.06 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('bloodlust')],
+  },
+  trollboneClub: {
+    type: WEAPON_TYPES.club,
+    name: 'Trollbone Club',
+    description: 'A troll’s own thighbone, sheathed in beaten metal.',
+    slotsIn: 'oneHand',
+    races: ['troll'],
+    level: 21,
+    cost: 300,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { criticalDamage: 0.25 },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('crushingBlow'),
+    ],
+  },
+  serratedFalchion: {
+    type: WEAPON_TYPES.sword,
+    name: 'Serrated Falchion',
+    description: 'A heavy curved blade with a cruelly sawn edge.',
+    slotsIn: 'oneHand',
+    level: 22,
+    cost: 300,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { criticalChance: 0.06, criticalDamage: 0.25 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('dazingBlow')],
+  },
+  emberlessBrand: {
+    type: WEAPON_TYPES.sword,
+    name: 'Emberless Brand',
+    description: 'A blackened blade quenched a hundred times over.',
+    slotsIn: 'oneHand',
+    level: 23,
+    cost: 300,
+    materials: { steel: 4 },
+    combatStats: { criticalChance: 0.06 },
+    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('exposeArmor')],
+  },
+  maraudersHook: {
+    type: WEAPON_TYPES.flail,
+    name: "Marauder's Hook",
+    description: 'A weighted hook on a chain, made to drag a foe down.',
+    slotsIn: 'oneHand',
+    level: 24,
+    cost: 300,
+    materials: { leather: 1, steel: 5 },
+    combatStats: { criticalChance: 0.06 },
+    abilities: [
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
+      ABILITIES('dazingBlow'),
+    ],
+  },
+  greatMaul: {
+    type: WEAPON_TYPES.mace,
+    name: 'Great Maul',
+    description: 'A two-handed maul that ends arguments and arms alike.',
+    slotsIn: 'twoHand',
+    level: 18,
+    cost: 400,
+    materials: { leather: 1, steel: 3 },
+    combatStats: { armorPenetration: 7, criticalDamage: 0.25 },
+    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam'), ABILITIES('crushingBlow')],
+  },
+  cleaverGreataxe: {
+    type: WEAPON_TYPES.axe,
+    name: 'Cleaver Greataxe',
+    description: 'A slab-bladed greataxe built for the killing stroke.',
+    slotsIn: 'twoHand',
+    level: 20,
+    cost: 400,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { criticalDamage: 0.3 },
+    abilities: [
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
+      ABILITIES('execute'),
+    ],
+  },
+  recurveWarbow: {
+    type: WEAPON_TYPES.bow,
+    name: 'Recurve Warbow',
+    description: 'A tall recurve warbow strung with heavy sinew cord.',
+    slotsIn: 'twoHand',
+    level: 22,
+    cost: 600,
+    materials: { leather: 3, steel: 2 },
+    combatStats: { criticalChance: 0.06 },
+    abilities: [
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('pierce'),
+      ABILITIES('powerShot'),
+    ],
+  },
+  warglaive: {
+    type: WEAPON_TYPES.spear,
+    name: 'Warglaive',
+    description: 'A long-hafted glaive whose reach decides the bout.',
+    slotsIn: 'twoHand',
+    level: 24,
+    cost: 600,
+    materials: { steel: 6 },
+    combatStats: { criticalChance: 0.06, armorPenetration: 8 },
+    abilities: [
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
+      ABILITIES('exposeArmor'),
+    ],
+  },
+  spikedTarge: {
+    type: WEAPON_TYPES.shield,
+    name: 'Spiked Targe',
+    description: 'A round shield rimmed with jagged spikes.',
+    slotsIn: 'offHand',
+    level: 19,
+    cost: 200,
+    materials: { leather: 1, steel: 3 },
+    combatStats: { blockChance: 0.2, provocation: 16 },
+    abilities: [ABILITIES('block'), ABILITIES('shieldBash')],
+  },
+  ogreboneBarrier: {
+    type: WEAPON_TYPES.shield,
+    name: 'Ogrebone Barrier',
+    description: 'A door of bone and plate that simply does not give.',
+    slotsIn: 'offHand',
+    level: 21,
+    cost: 300,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { blockChance: 0.22, provocation: 18 },
+    abilities: [ABILITIES('block'), ABILITIES('bulwark')],
+  },
+  aegisOfTheHorde: {
+    type: WEAPON_TYPES.shield,
+    name: 'Aegis of the Horde',
+    description: 'A war-shield daubed with the marks of a hundred raids.',
+    slotsIn: 'offHand',
+    level: 23,
+    cost: 300,
+    materials: { steel: 5 },
+    combatStats: { blockChance: 0.24, provocation: 20 },
+    abilities: [ABILITIES('block'), ABILITIES('shieldBash'), ABILITIES('guardian')],
+  },
+  brigandHarness: {
+    type: ARMOR_TYPES.medium,
+    name: 'Brigand Harness',
+    description: 'Plates riveted into a raider’s harness, quick and mean.',
+    slotsIn: 'armor',
+    level: 18,
+    cost: 300,
+    materials: { leather: 3, steel: 1 },
+    combatStats: { dodgeChance: 0.04 },
+    abilities: [],
+  },
+  lamellarVest: {
+    type: ARMOR_TYPES.medium,
+    name: 'Lamellar Vest',
+    description: 'Laced plates of metal over hide, layered deep.',
+    slotsIn: 'armor',
+    level: 20,
+    cost: 300,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { blockChance: 0.05 },
+    abilities: [],
+  },
+  warplateHarness: {
+    type: ARMOR_TYPES.heavy,
+    name: 'Warplate Harness',
+    description: 'Brutal slabs of war-plate, loud and unmissable.',
+    slotsIn: 'armor',
+    level: 21,
+    cost: 400,
+    materials: { leather: 1, steel: 5 },
+    combatStats: { provocation: 12 },
+    abilities: [],
+  },
+  trollhideCoat: {
+    type: ARMOR_TYPES.medium,
+    name: 'Trollhide Coat',
+    description: 'A coat of true troll hide that knits the wearer’s grit to its own.',
+    slotsIn: 'armor',
+    races: ['troll'],
+    level: 22,
+    cost: 400,
+    materials: { leather: 4, steel: 1 },
+    combatStats: {},
+    abilities: [],
+  },
+  juggernautShell: {
+    type: ARMOR_TYPES.heavy,
+    name: 'Juggernaut Shell',
+    description: 'A wall of plate you wear — it turns blades and dares the next.',
+    slotsIn: 'armor',
+    level: 24,
+    cost: 500,
+    materials: { steel: 6 },
+    combatStats: { provocation: 14, hitChance: -0.2 },
+    abilities: [],
+  },
+  fangRing: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Fang Ring',
+    description: 'A predator’s fang capped in crude metal.',
+    slotsIn: 'accessory',
+    level: 18,
+    cost: 200,
+    materials: { leather: 1, steel: 1 },
+    combatStats: { criticalChance: 0.06 },
+    abilities: [],
+  },
+  crushstoneBand: {
+    type: ACCESSORY_TYPES.ring,
+    name: 'Crushstone Band',
+    description: 'A blunt heavy band that lends a blow its weight.',
+    slotsIn: 'accessory',
+    level: 19,
+    cost: 200,
+    materials: { steel: 2 },
+    combatStats: { criticalDamage: 0.6 },
+    abilities: [],
+  },
+  gristleCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Gristle Charm',
+    description: 'A knot of cured gristle that troubles those nearby.',
+    slotsIn: 'accessory',
+    level: 20,
+    cost: 200,
+    materials: { leather: 2, steel: 1 },
+    combatStats: { provocation: 15 },
+    abilities: [],
+  },
+  sinewCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: 'Sinew Charm',
+    description: 'A braid of dried sinew that steadies a savage swing.',
+    slotsIn: 'accessory',
+    level: 21,
+    cost: 300,
+    materials: { leather: 2, steel: 1 },
+    combatStats: { criticalChance: 0.04, armorPenetration: 3 },
+    abilities: [],
+  },
+  goretuskPendant: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Goretusk Pendant',
+    description: 'A great boar’s tusk, worn by those who took it themselves.',
+    slotsIn: 'accessory',
+    level: 22,
+    cost: 300,
+    materials: { leather: 1, steel: 3 },
+    combatStats: { modifiers: { damage: 0.15 } },
+    abilities: [],
+  },
+  ironheartAmulet: {
+    type: ACCESSORY_TYPES.amulet,
+    name: 'Ironheart Amulet',
+    description: 'A fist-sized lump of iron worn over the heart.',
+    slotsIn: 'accessory',
+    level: 23,
+    cost: 300,
+    materials: { steel: 3 },
+    combatStats: { modifiers: { maxHealth: 0.15 } },
+    abilities: [],
+  },
+  berserkersCharm: {
+    type: ACCESSORY_TYPES.charm,
+    name: "Berserker's Charm",
+    description: 'A grisly trophy that pushes its wearer past caution.',
+    slotsIn: 'accessory',
+    level: 24,
+    cost: 300,
+    materials: { leather: 2, steel: 3 },
+    combatStats: { criticalChance: 0.03, criticalDamage: 0.3, armorPenetration: 2 },
+    abilities: [],
+  },
+  totemOfFury: {
+    type: TRINKET_TYPES.relic,
+    name: 'Totem of Fury',
+    description: 'A bound bundle of fang and iron that hums with old anger.',
+    slotsIn: 'trinket',
+    level: 20,
+    cost: 400,
+    materials: { leather: 2, steel: 2 },
+    combatStats: { modifiers: { damage: 0.1 } },
+    abilities: [ABILITIES('adrenaline')],
+  },
+  idolOfTheUnbroken: {
+    type: TRINKET_TYPES.relic,
+    name: 'Idol of the Unbroken',
+    description: 'A squat iron idol said to have never once been felled.',
+    slotsIn: 'trinket',
+    level: 23,
+    cost: 600,
+    materials: { leather: 2, steel: 4 },
+    combatStats: { provocation: 20 },
+    abilities: [ABILITIES('unbreakable')],
+  },
+};
+
+const costForLevel = (level) => Math.min(400, Math.ceil(level / 8) * 100);
+
+const applyScaling = (equipment) => {
+  const isWeapon = ['oneHand', 'twoHand'].includes(equipment?.slotsIn);
+  if (isWeapon) {
+    const multiplier = equipment?.slotsIn === 'twoHand' ? 2 : 1;
+    const level = equipment.level || 0;
+    const combatStats = {
+      damage: level * multiplier,
+    };
+
+    equipment.combatStats = deepAdd(equipment.combatStats, combatStats);
+  }
+  const isArmor = ['armor'].includes(equipment?.slotsIn);
+  if (isArmor) {
+    const level = equipment.level || 0;
+    const combatStats = {
+      maxArmor: level * 1,
+    };
+
+    equipment.combatStats = deepAdd(equipment.combatStats, combatStats);
+  }
+  if (equipment.level !== undefined) {
+    const floor = equipment.slotsIn === 'twoHand' ? 200 : 0;
+    const derived = Math.max(floor, costForLevel(equipment.level));
+    equipment.cost = equipment.overrides?.cost ?? equipment.cost ?? derived;
+  }
+  // Where a piece can be acquired. Defaults to the armory vendors; gear sourced
+  // elsewhere (e.g. the Heirloom via level-up) overrides this and is filtered out
+  // of the armory lists.
+  equipment.obtainedFrom = equipment.obtainedFrom ?? ['armory'];
+  // Crystal value is an armory concept: only merchandise sold there has a price you
+  // can sell back for. Anything won elsewhere (fight drops, ladder/level-up rewards)
+  // or not yet obtainable is a reward, not merchandise — worth nothing, dismantle-only.
+  if (!equipment.obtainedFrom.includes('armory')) equipment.cost = 0;
+  // Elements are authored as an array (like abilities). Derive the singular render
+  // fields once here: `element` is the lone element, or 'all' when several (so the
+  // existing single-element / 'all' rendering keeps working untouched); `multi`
+  // flags the exotic case and `elements` stays the source of truth for the spectrum.
+  if (equipment.elements) {
+    equipment.multi = equipment.elements.length > 1;
+    equipment.element = equipment.multi ? 'all' : equipment.elements[0];
+  }
+  return equipment;
+};
+
+// Merging meta.overrides must not touch the caller's ref — refs are often live
+// state ($.characters), and deepMerge mutates its target. Clone first.
+export default (id, fullBody = false, meta) =>
+  applyScaling(
+    entity(
+      ALL_EQUIPMENT,
+      typeof id === 'string' ? id : id.id,
+      typeof id === 'string' ? undefined : id.uuid,
+      fullBody,
+      typeof id === 'string'
+        ? meta?.overrides
+        : meta?.overrides
+          ? deepMerge(JSON.parse(JSON.stringify(id.overrides || {})), meta.overrides || {})
+          : id.overrides,
+    ),
+  );
diff --git a/js/constants/FIGHTS.js b/js/constants/FIGHTS.js
new file mode 100644
index 00000000..57247e3d
--- /dev/null
+++ b/js/constants/FIGHTS.js
@@ -0,0 +1,886 @@
+import CHARACTERS from '/js/constants/CHARACTERS.js';
+import ABILITIES from '/js/constants/ABILITIES.js';
+
+const spiderlingWeaveAt = (slot) =>
+  CHARACTERS('spiderling', false, {
+    overrides: {
+      abilities: Array.from({ length: 4 }, (_, i) => ABILITIES(i === slot ? 'weave' : 'recharge')),
+    },
+  });
+
+const RAW_FIGHTS = [
+  {
+    id: 'queen-arachnae',
+    name: 'Queen Arachnae',
+    characters: [
+      CHARACTERS('queenArachnae'),
+      ...Array.from({ length: 4 }, (_, i) => spiderlingWeaveAt(i)),
+    ],
+    description:
+      'She nests in the crawlspaces under the arena, her brood emerging only when the gates lock shut.<br /><br />Where she walks, a chittering wall of legs follows.<br /><br />Four at once. Most of them small. All of them hungry.',
+    boss: false,
+    maxBrawlers: 2,
+    minLevel: 5,
+    maxLevel: 9,
+    lootTable: {
+      materials: [
+        ['leather', {}, 0.3],
+        ['leather', {}, 0.1],
+        ['leather', {}, 0.1],
+        ['leather', {}, 0.1],
+        ['leather', {}, 0.1],
+      ],
+    },
+  },
+  {
+    id: 'regular-sized-combatant',
+    name: 'Regular Sized Combatant',
+    characters: [CHARACTERS('regularSizedCombatant')],
+    description:
+      'Just a regular-sized combatant. One fighter, normal height, nothing to remark upon.<br /><br />He moves a little oddly, and the coat is a little long. Best not to mention it.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 9,
+    maxLevel: 11,
+    lootTable: {
+      materials: [
+        ['steel', {}, 0.3],
+        ['steel', {}, 0.3],
+      ],
+    },
+  },
+  {
+    id: 'crazy-old-man',
+    name: 'Crazy Old Man',
+    characters: [CHARACTERS('crazyOldMan')],
+    description:
+      "He laughs the whole way through. The crowd doesn't know if it's a tactic or just the way he is.<br /><br />Underestimating him has retired three brawlers already.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 4,
+    maxLevel: 6,
+    lootTable: {
+      materials: [['cloth', {}, 0.3]],
+    },
+  },
+  {
+    id: 'executioner',
+    name: 'Executioner',
+    characters: [CHARACTERS('executioner')],
+    description:
+      "The arena's own headsman, pushed into the ring when the crowd grows restless for a familiar face.<br /><br />He has ended more lives off the sand than on it. The axe does not know the difference.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 5,
+    maxLevel: 7,
+    lootTable: {
+      equipment: [['executionersAxe', {}, 0.1]],
+      materials: [['cloth', {}, 0.3]],
+    },
+  },
+  {
+    id: 'beastmaster',
+    name: 'Beastmaster',
+    characters: [CHARACTERS('beastmaster'), CHARACTERS('hyena')],
+    description:
+      'She walks in with the hyena at her heel and a whip already uncoiling.<br /><br />She rarely lands the killing blow herself. That is what the hyena is for.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 10,
+    maxLevel: 10,
+    lootTable: {
+      materials: [
+        ['leather', {}, 0.3],
+        ['cloth', {}, 0.3],
+      ],
+    },
+  },
+  {
+    id: 'secutor',
+    name: 'Secutor',
+    characters: [CHARACTERS('secutor')],
+    description:
+      'Helmet sealed, shield braced, he advances at the pace of a closing door. Every blow you land rings off the iron and goes nowhere.<br /><br />He does not rush. He learned long ago that patience outlasts fury.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 11,
+    maxLevel: 13,
+    lootTable: {
+      equipment: [['towerShield', {}, 0.1]],
+      materials: [['steel', {}, 0.3]],
+    },
+  },
+  {
+    id: 'hyena',
+    name: 'Hyena',
+    characters: [CHARACTERS('hyena')],
+    description:
+      'A scavenger from the southern scrub, dragged here for the crowd. It does not charge — it circles, and it laughs.<br /><br />The jaws are built for bone. It will wait as long as it takes to use them.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 4,
+    maxLevel: 7,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'blind-swordsman',
+    name: 'Blind Swordsman',
+    characters: [CHARACTERS('blindSwordsman')],
+    description:
+      "He lost his eyes years ago. He did not lose the rest.<br /><br />He fights by sound and by the shift of the air, and he has outlasted men with two good eyes. The bandage isn't for show.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 10,
+    maxLevel: 12,
+    lootTable: {
+      equipment: [['blindfold', {}, 0.1]],
+      materials: [['steel', {}, 0.1]],
+    },
+  },
+  {
+    id: 'pack-of-wolves',
+    name: 'Pack of Wolves',
+    characters: [CHARACTERS('wolf'), CHARACTERS('wolf'), CHARACTERS('wolf')],
+    description:
+      'They circle. They split your attention. They wait for the one moment you stop moving.<br /><br />Three of them. They have done this before.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 8,
+    maxLevel: 10,
+    lootTable: {
+      materials: [
+        ['leather', {}, 0.3],
+        ['leather', {}, 0.1],
+        ['leather', {}, 0.1],
+      ],
+    },
+  },
+  {
+    id: 'the-engineer',
+    name: 'The Engineer',
+    characters: [CHARACTERS('theEngineer'), CHARACTERS('cannon')],
+    description:
+      'A wild-eyed siege engineer and the cannon he refuses to abandon.<br /><br />He plants himself in the way and soaks everything you throw. Behind him, the cannon does the real work.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 6,
+    maxLevel: 9,
+    lootTable: {
+      materials: [
+        ['steel', {}, 0.3],
+        ['wood', {}, 0.5],
+      ],
+    },
+  },
+  {
+    id: 'pitchfork-patrick',
+    name: 'Pitchfork Patrick',
+    characters: [CHARACTERS('pitchforkPatrick')],
+    description:
+      "Came down from the hills with his farm tool and a complaint about taxes. The magistrate sent him to the arena instead.<br /><br />He's still using the pitchfork. He's still winning fights.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 3,
+    maxLevel: 5,
+    lootTable: {
+      materials: [['wood', {}, 0.3]],
+    },
+  },
+  {
+    id: 'lost-civilian',
+    name: 'Lost Civilian',
+    characters: [CHARACTERS('lostCivilian')],
+    description:
+      'Wandered through the wrong gate, looking for the marketplace. The guards locked it behind him.<br /><br />Try not to enjoy this.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 1,
+    maxLevel: 1,
+    lootTable: {},
+  },
+  {
+    id: 'poor-poor-knight',
+    name: 'Poor poor knight',
+    characters: [CHARACTERS('poorestKnightInTown')],
+    description:
+      "His armor is held together with twine and stubborn pride. The sword is real, though, and so is the training.<br /><br />He fights for the coin, not the glory. There hasn't been much of either lately.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 2,
+    maxLevel: 4,
+    lootTable: {
+      materials: [['wood', {}, 0.3]],
+    },
+  },
+  {
+    id: 'rhino',
+    name: 'Rhino',
+    characters: [CHARACTERS('rhino')],
+    description:
+      'It charges in a straight line and remembers nothing. Be somewhere else when it arrives.<br /><br />The horn is the part to worry about. The mass behind it is what does the damage.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 6,
+    maxLevel: 8,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'plague-doctor',
+    name: 'Plague Doctor',
+    characters: [CHARACTERS('plagueDoctor')],
+    description:
+      "A masked physician who treats the arena's wounded — and quietly sees to the ones he's paid to.<br /><br />He does not rush. He simply administers, and waits for the dose to take.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 8,
+    maxLevel: 10,
+    lootTable: {
+      materials: [['cloth', {}, 0.3]],
+    },
+  },
+  {
+    id: 'jester',
+    name: 'Jester',
+    characters: [CHARACTERS('jester')],
+    description:
+      'All bells and balance, until the knives come out from under the motley.<br /><br />He laughs while you bleed. The crowd loves it.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 2,
+    maxLevel: 3,
+    lootTable: {
+      equipment: [['jestersCap', {}, 0.02]],
+      materials: [
+        ['cloth', {}, 0.25],
+        ['steel', {}, 0.02],
+      ],
+    },
+  },
+  {
+    id: 'desert-bandits',
+    name: 'Desert Bandits',
+    characters: [CHARACTERS('olderBrother'), CHARACTERS('youngerBrother')],
+    description:
+      'Two brothers off the salt road, raiders since boys, sold to the arena as a pair.<br /><br />The elder taught the younger every dirty trick. Now they use them on you, together.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 5,
+    maxLevel: 8,
+    lootTable: {
+      materials: [
+        ['cloth', {}, 0.3],
+        ['steel', {}, 0.3],
+      ],
+    },
+  },
+  {
+    id: 'sabertooth-tiger',
+    name: 'Sabertooth Tiger',
+    characters: [CHARACTERS('sabertoothTiger')],
+    description:
+      'An ancient predator, woken from frozen sleep by a foolish magus and sold to the arena for the bounty.<br /><br />The bite is meant for mammoth bone. Yours will not be a challenge for it.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 2,
+    maxLevel: 4,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'dimachaerus',
+    name: 'Dimachaerus',
+    characters: [CHARACTERS('dimachaerus')],
+    description:
+      'Two blades, no shield, and not a scrap of patience for either. He trades every defense for a storm of steel meant to end the fight in the opening breath.<br /><br />Outlast the first flurry and you may yet live to watch him tire.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 12,
+    maxLevel: 15,
+    lootTable: {
+      materials: [['steel', {}, 0.3]],
+    },
+  },
+  {
+    id: 'war-elephant',
+    name: 'War Elephant',
+    characters: [CHARACTERS('warElephant')],
+    description:
+      'It will not chase you. It does not need to.<br /><br />Wherever it stands, that is the dangerous part of the arena.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 10,
+    maxLevel: 14,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'nomad',
+    name: 'Nomad',
+    characters: [CHARACTERS('nomad')],
+    description:
+      "Traveled the salt road for thirty years without losing a tooth. The arena offers a hot meal and a roof, so here he is.<br /><br />Don't let the years fool you. He still walks twenty miles before breakfast.",
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 1,
+    maxLevel: 2,
+    lootTable: {
+      materials: [['cloth', {}, 0.3]],
+    },
+  },
+  {
+    id: 'grizzly-bear',
+    name: 'Grizzly Bear',
+    characters: [CHARACTERS('grizzlyBear')],
+    description:
+      'Trapped young, kept lean, fed only on the day of the fight.<br /><br />Every fiber of it wants to be somewhere else. The only way out is through you.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 9,
+    maxLevel: 13,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'giant-scorpion',
+    name: 'Giant Scorpion',
+    characters: [CHARACTERS('giantScorpion')],
+    description:
+      'Pulled from a cave under the southern dunes. It does not understand the arena. It does not need to.<br /><br />The tail is fast. The pincers are faster.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 3,
+    maxLevel: 5,
+    lootTable: {
+      equipment: [['scorpionCharm', {}, 0.02]],
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'boar',
+    name: 'Boar',
+    characters: [CHARACTERS('boar')],
+    description:
+      'A young one, but fed well and angry at strangers. The tusks have done damage to better fighters than the registry admits.<br /><br />Watch the charge. The rest is easier.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 1,
+    maxLevel: 2,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'goblin-warband',
+    name: 'Goblin Warband',
+    characters: [
+      CHARACTERS('goblinHorn'),
+      CHARACTERS('goblinStabber'),
+      CHARACTERS('goblinBasher'),
+      CHARACTERS('goblinSlinger'),
+      CHARACTERS('goblinNetter'),
+    ],
+    description:
+      'A raiding pack dragged out of the hills — five goblins, no two alike, and not one of them fights fair.<br /><br />One carries a horn. When it blows, deal with the others fast — they all get worse.',
+    boss: false,
+    maxBrawlers: 2,
+    minLevel: 7,
+    maxLevel: 10,
+    lootTable: {
+      materials: [
+        ['steel', {}, 0.3],
+        ['wood', {}, 0.3],
+        ['wood', {}, 0.1],
+        ['cloth', {}, 0.1],
+        ['cloth', {}, 0.1],
+      ],
+    },
+  },
+  {
+    id: 'the-grand-champion',
+    name: 'The Grand Champion',
+    characters: [CHARACTERS('grandChampion')],
+    description:
+      "Undefeated in forty matches. Wears the laurel and the chip on his shoulder both like jewelry.<br /><br />He has fought every style the arena offers and beaten most of them. He's been waiting for you.",
+    boss: true,
+    maxBrawlers: 1,
+    minLevel: 14,
+    maxLevel: 14,
+    lootTable: {
+      equipment: [['mastercraftedChestplate', {}, 0.02]],
+      materials: [['steel', {}, 0.5]],
+    },
+  },
+  {
+    id: 'the-emperor',
+    name: 'The Emperor',
+    characters: [CHARACTERS('emperor')],
+    description:
+      'He does not need to be here. He chose to be here.<br /><br />When the Emperor enters the sand, the guards lower their pikes and the crowd holds its breath.<br /><br />Win, and the city will know your name. Lose, and the city will not remember it.<br /><br /><i>"They will remember me. That has always been enough."</i>',
+    boss: true,
+    maxBrawlers: 1,
+    minLevel: 15,
+    maxLevel: 15,
+    lootTable: {
+      equipment: [['emperorsSignet', {}]],
+      materials: [['steel', {}]],
+    },
+  },
+  {
+    id: 'giant-rat',
+    name: 'Giant Rat',
+    characters: [CHARACTERS('rat')],
+    description:
+      'Pulled from the sewers under the granary. It is bigger than it should be, and there is a reason.<br /><br />Do not ask about the reason. Just bring something sharp.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 5,
+    maxLevel: 5,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'succubus',
+    name: 'Succubus',
+    characters: [CHARACTERS('succubus')],
+    description:
+      'A deadly demon whose elegance masks her savage nature. In battle she thrives on chaos, lashing out in a flurry of violent motion.<br /><br />Her signature is a whirling dance of destruction, carving through groups of enemies with merciless efficiency.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 12,
+    maxLevel: 14,
+    lootTable: {
+      materials: [['wood', {}, 0.3]],
+    },
+  },
+  {
+    id: 'golem',
+    name: 'Golem',
+    characters: [CHARACTERS('golem')],
+    description:
+      'Hammered together from stone and old grievances, then bound by a name no priest will speak aloud.<br /><br />It does not tire. It does not flinch. The runes on its chest are the only soft thing about it.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 13,
+    maxLevel: 15,
+    lootTable: {
+      equipment: [['stoneRing', {}, 0.1]],
+    },
+  },
+  {
+    id: 'breff',
+    name: 'Breff',
+    characters: [CHARACTERS('breff')],
+    description:
+      'It brings its own winter. Frost spreads from where the Breff stands, and the sand stiffens to ice under its weight.<br /><br />The cold reaches you a moment before it does. Neither part is kind.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 17,
+    maxLevel: 19,
+    lootTable: {
+      equipment: [['breffsRightsideHorn', {}, 0.1]],
+    },
+  },
+  {
+    id: 'armorillo',
+    name: 'Armorillo',
+    characters: [CHARACTERS('armorillo')],
+    description:
+      'It rolls itself shut at the first jeer from the stands and waits for the noise to die down. Spears skip off the jade spines, and the crowd loses patience long before the Armorillo loses its nerve.<br /><br />By the time it uncurls, it is already rolling over you.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 16,
+    maxLevel: 18,
+    lootTable: {
+      equipment: [['armarilloCarapace', {}, 0.1]],
+    },
+  },
+  {
+    id: 'wyvern',
+    name: 'Wyvern',
+    characters: [CHARACTERS('wyvern')],
+    description:
+      'It rides the front edge of the storm and drops out of it without warning. The Wyvern fights from above, all talon and tail, and is gone again before the dust settles.<br /><br />Keep your eyes on the sky. It will not give you a second reason to.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 19,
+    maxLevel: 21,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'mammoth',
+    name: 'Mammoth',
+    characters: [CHARACTERS('mammoth')],
+    description:
+      'A wall of red wool and old ivory that crossed a frozen age to get here. The Mammoth moves at its own pace and expects the world to step aside.<br /><br />Those tusks have cleared paths through worse than you. They will clear one more.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 18,
+    maxLevel: 21,
+    lootTable: {
+      equipment: [['thickhideArmor', {}, 0.1]],
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'cerberus',
+    name: 'Cerberus',
+    characters: [CHARACTERS('cerberus')],
+    description:
+      'One body, three tempers, and not a calm one among them. The Cerberus was set at the gate to keep things in, and it has never once been told the fight is over.<br /><br />Get past one head and the other two are already on you.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 20,
+    maxLevel: 22,
+    lootTable: {
+      equipment: [['cerberusCollar', {}, 0.1]],
+    },
+  },
+  {
+    id: 'ulwar',
+    name: 'Ulwar',
+    characters: [CHARACTERS('ulwar')],
+    description:
+      'A man somewhere underneath, on the nights it forgets to be one. Ulwar comes into the ring already howling, and the howl is the most reasonable thing about it.<br /><br />Steel slows it. Nothing yet has stopped it.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 21,
+    maxLevel: 23,
+    lootTable: {
+      equipment: [['furStole', {}, 0.1]],
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'herald',
+    name: 'Herald',
+    characters: [CHARACTERS('lightningHerald')],
+    description:
+      'It comes ahead of the storm, the way thunder follows a flash: proud, unhurried, certain of its welcome. The Herald announces nothing it cannot back with claw and wing.<br /><br />Kneeling is not required. Surviving the introduction is.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 22,
+    maxLevel: 24,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'rune-stag',
+    name: 'Rune Stag',
+    characters: [CHARACTERS('runeStag')],
+    description:
+      'Old forest magic given four legs and a crown of light. The Rune Stag walks into the arena as though it wandered in by mistake, and leaves the same way.<br /><br />The marks on its hide glow brighter the closer the end comes. By then it is usually yours.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'frigus-mortis',
+    name: 'Frigus Mortis',
+    characters: [CHARACTERS('frigusMortis')],
+    description:
+      'Cold death on the wing. Where its breath passes, the air itself stops moving and falls as glittering dust.<br /><br />Frigus Mortis does not need to land a single bite. It only needs to exhale, and wait.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['essenceFrost', {}, 1]],
+    },
+  },
+  {
+    id: 'vita-deserto',
+    name: 'Vita Deserto',
+    characters: [CHARACTERS('vitaDeserto')],
+    description:
+      'A plated wyrm that drags the weight of a quarry wherever it goes. The wings are mostly bluff. The armour is not, and the red stone set in its throat burns where a fire should be.<br /><br />It never gives chase. It simply arrives, and leaves no room to slip past.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['essenceEarth', {}, 1]],
+    },
+  },
+  {
+    id: 'ragnar-god-of-fire',
+    name: 'Ragnar God of Fire',
+    characters: [CHARACTERS('ragnarGodOfFire')],
+    description:
+      'They built a fire too big and gave it a name, and the name learned to walk. Ragnar wades through the lava that birthed him as though it were warm bathwater.<br /><br />The beard alone has ended more challengers than the fists. Few last long enough to reach the fists.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 40,
+    maxLevel: 40,
+    lootTable: {
+      materials: [['essenceFire', {}, 1]],
+    },
+  },
+  {
+    id: 'kyl-god-of-frost',
+    name: 'Kyl God of Frost',
+    characters: [CHARACTERS('kylGodOfFrost')],
+    description:
+      'The cruelty of the high mountains given a face and a grin. Kyl rises out of the killing cold above the peaks and finds the arena pleasantly warm by comparison.<br /><br />Everything he touches slows, stiffens, and stops. He is in no hurry to touch you.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 40,
+    maxLevel: 40,
+    lootTable: {
+      materials: [['essenceFrost', {}, 1]],
+    },
+  },
+  {
+    id: 'nature-giant',
+    name: 'Giant',
+    characters: [CHARACTERS('natureGiant')],
+    description:
+      'A walking acre of forest that took offence at something and never sat back down. The Nature Giant swings fists the size of fallen trunks and roots itself between blows.<br /><br />Cut it and it scars over in bark. Burn it and you only make it angry.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 23,
+    maxLevel: 24,
+    lootTable: {
+      materials: [
+        ['wood', {}, 0.3],
+        ['essenceNature', {}, 0.02],
+      ],
+    },
+  },
+  {
+    id: 'owl-bear',
+    name: 'Owl Bear',
+    characters: [CHARACTERS('owlBear')],
+    description:
+      'The worst halves of two hunters stitched into one. The Owlbear has the patience of the owl and the temper of the bear, and brings neither to a negotiation.<br /><br />You hear nothing until the talons are already in you.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 16,
+    maxLevel: 17,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'yeti',
+    name: 'Yeti',
+    characters: [CHARACTERS('yeti')],
+    description:
+      'It comes down from the white peaks only when the hunger does. The Yeti wears the cold like a second hide and roars loud enough to start the snow moving above you.<br /><br />The horns are for show. The hands are not.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 20,
+    maxLevel: 22,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'lightning-giant',
+    name: 'Giant',
+    characters: [CHARACTERS('lightningGiant')],
+    description:
+      'Not a creature so much as a storm that learned to stand. The Lightning Giant walks on a column of howling wind, and the ground it crosses is scorched black behind it.<br /><br />Strike at it and you strike a cloud. It strikes back with the sky.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 24,
+    maxLevel: 25,
+    lootTable: {
+      equipment: [['handheldCloud', {}, 0.02]],
+    },
+  },
+  {
+    id: 'onkh',
+    name: 'Onkh',
+    characters: [CHARACTERS('onkh')],
+    description:
+      'Something the mountains grew and never explained. Onkh hunches through the dark on stone knuckles, and the cave does not echo when it moves.<br /><br />Its hide turns blades. Its eyes find you long before the torchlight does.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['essenceEarth', {}, 0.02]],
+    },
+  },
+  {
+    id: 'bullrock',
+    name: 'Bullrock',
+    characters: [CHARACTERS('bullrock')],
+    description:
+      'A bull that kept growing past the point of sense, then grew a mountain on its head for good measure. The Bullrock lowers that crown and the argument is over.<br /><br />There is no turning it. There is only being somewhere it is not.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 19,
+    maxLevel: 21,
+    lootTable: {
+      materials: [['essenceEarth', {}, 0.02]],
+    },
+  },
+  {
+    id: 'warrus',
+    name: 'Warrus',
+    characters: [CHARACTERS('warrus')],
+    description:
+      'It hauls its weight up onto the ice and dares the arena to move it. The Warrus is all blubber and bone, and the tusks have ended more challengers than any blade in the pit.<br /><br />Slow to rise. Worse to be under when it comes down.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['leather', {}, 0.3]],
+    },
+  },
+  {
+    id: 'ignius',
+    name: 'Ignius',
+    characters: [CHARACTERS('ignius'), CHARACTERS('dragonEgg'), CHARACTERS('dragonEgg')],
+    description:
+      'A young dragon, caged beneath the arena and starved until the gates open. The scorch marks on the sand are older than most of the fighters who made them.',
+    boss: true,
+    maxBrawlers: 3,
+    minLevel: 20,
+    maxLevel: 20,
+    lootTable: {
+      materials: [['essenceFire', {}, 1]],
+    },
+  },
+  {
+    id: 'fire-giant',
+    name: 'Giant',
+    characters: [CHARACTERS('fireGiant')],
+    description:
+      'A mountain that caught fire an age ago and never thought to stop. The Fire Giant lumbers into the pit trailing molten rock, and the sand turns to glass where it walks.<br /><br />Stand too close and you cook. Stand too far and it closes the distance anyway.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 20,
+    maxLevel: 21,
+    lootTable: {
+      materials: [['essenceFire', {}, 0.02]],
+    },
+  },
+  {
+    id: 'earth-giant',
+    name: 'Giant',
+    characters: [CHARACTERS('earthGiant')],
+    description:
+      'A landslide that decided to stand upright. The Earth Giant wears the quarry on its back and swings boulders as though they weighed nothing at all.<br /><br />There is no dodging a hill. There is only outlasting it, and few do.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 21,
+    maxLevel: 22,
+    lootTable: {
+      equipment: [['pebbleEarring', {}, 0.1]],
+    },
+  },
+  {
+    id: 'frost-giant',
+    name: 'Giant',
+    characters: [CHARACTERS('frostGiant')],
+    description:
+      'Carved from a glacier that learned to hold a grudge. The Frost Giant brings the dead silence of the high winter, and the breath freezes in your chest before the first blow lands.<br /><br />It does not hurry. The cold does its work either way.',
+    boss: false,
+    maxBrawlers: 1,
+    minLevel: 22,
+    maxLevel: 23,
+    lootTable: {
+      materials: [['essenceFrost', {}, 0.02]],
+    },
+  },
+  {
+    id: 'erat-herba',
+    name: 'Erat Herba',
+    characters: [CHARACTERS('eratHerba')],
+    description:
+      'It bursts from the arena floor with a roar, ancient and furious at being woken. The Nature Dragon wears the forest like scales, and the forest fights at its side.<br /><br />Wound it and it knits closed in living bark.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['essenceNature', {}, 1]],
+    },
+  },
+  {
+    id: 'vento-mico',
+    name: 'Vento Mico',
+    characters: [CHARACTERS('ventoMico')],
+    description:
+      'It finds grounded things revolting, and it finds you very grounded indeed. The Lightning Dragon strikes from the air faster than the eye can track, trailing thunder it has already outrun.<br /><br />Try not to steal its thunder. It notices.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 30,
+    maxLevel: 30,
+    lootTable: {
+      materials: [['essenceLightning', {}, 1]],
+    },
+  },
+  {
+    id: 'elise-goddess-of-earth',
+    name: 'Elise Goddess of Earth',
+    characters: [CHARACTERS('eliseGoddessOfEarth')],
+    description:
+      'The bedrock grew opinions, and none of them were kind. Elise rises out of the arena floor as though it had always been her, and the stone answers the moment she calls it.<br /><br />Every blow you land is swallowed by shifting rock. Every blow she lands moves the earth itself.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 40,
+    maxLevel: 40,
+    lootTable: {
+      materials: [['essenceEarth', {}, 1]],
+    },
+  },
+  {
+    id: 'alora-goddess-of-nature',
+    name: 'Alora Goddess of Nature',
+    characters: [CHARACTERS('aloraGoddessOfNature')],
+    description:
+      'She tends the wilds the way a butcher tends a herd. Alora steps onto the sand humming a soft tune, and the green things that trail after her have teeth.<br /><br />Cut her down and the roots drink deep, and she stands again the taller for it.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 40,
+    maxLevel: 40,
+    lootTable: {
+      materials: [['essenceNature', {}, 1]],
+    },
+  },
+  {
+    id: 'oskar-god-of-lightning',
+    name: 'Oskar God of Lightning',
+    characters: [CHARACTERS('oskarGodOfLightning')],
+    description:
+      'The storm grew tired of waiting in the clouds and came down wearing a face. Oskar crosses the arena between heartbeats, and the thunder only catches up a moment after he does.<br /><br />Blink, and you have already lost the exchange.',
+    boss: false,
+    maxBrawlers: 3,
+    minLevel: 40,
+    maxLevel: 40,
+    lootTable: {
+      materials: [['essenceLightning', {}, 1]],
+    },
+  },
+];
+
+// Every combatant defined here is a PvE enemy. Tagging them as npc lets combat-stat
+// scaling give non-player characters their accelerating health/damage/armor (see
+// utils.js); the player's roster and PvP opponents never flow through here, so they
+// keep flat linear scaling and stay gear-only on armor.
+export const ALL_FIGHTS = RAW_FIGHTS.map((fight) => ({
+  ...fight,
+  characters: fight.characters.map((character) => ({
+    ...character,
+    overrides: { ...character.overrides, npc: true },
+  })),
+}));
diff --git a/js/constants/ITEMS.js b/js/constants/ITEMS.js
new file mode 100644
index 00000000..09ac1b05
--- /dev/null
+++ b/js/constants/ITEMS.js
@@ -0,0 +1,29 @@
+import entity from '/js/entity.js';
+import { deepMerge } from '/js/helpers.js';
+
+// Non-equipment, non-material drops. For now only the Wrapped item — the
+// graceful stand-in for a loot entry whose id no longer resolves (a renamed or
+// retired piece). It carries the original category/id plus where it came from
+// so a stale drop can be traced back. Later it becomes an openable treasure
+// chest so the player still walks away with something.
+export const ALL_ITEMS = {
+  wrappedItem: {
+    name: 'Wrapped item',
+    description:
+      'A parcel from the arena, still bound shut. Whatever it held has yet to reveal itself.',
+    icon: 'dice',
+  },
+};
+
+export default (id, fullBody = false, meta) =>
+  entity(
+    ALL_ITEMS,
+    typeof id === 'string' ? id : id.id,
+    typeof id === 'string' ? undefined : id.uuid,
+    fullBody,
+    typeof id === 'string'
+      ? meta?.overrides
+      : meta?.overrides
+        ? deepMerge(JSON.parse(JSON.stringify(id.overrides || {})), meta.overrides || {})
+        : id.overrides,
+  );
diff --git a/js/constants/MATERIALS.js b/js/constants/MATERIALS.js
new file mode 100644
index 00000000..42d8c089
--- /dev/null
+++ b/js/constants/MATERIALS.js
@@ -0,0 +1,77 @@
+import entity from '/js/entity.js';
+import { deepMerge } from '/js/helpers.js';
+
+export const ALL_MATERIALS = {
+  cloth: {
+    name: 'Fabric',
+    description: 'Plain woven fabric. The starting point of every soft kit.',
+    image: 'cloth.webp',
+    rarity: 'common',
+  },
+  wood: {
+    name: 'Wood',
+    description: 'Seasoned timber, straight-grained and ready for the workbench.',
+    image: 'wood.webp',
+    rarity: 'common',
+  },
+  leather: {
+    name: 'Hide',
+    description: 'Cured hide, supple and tough — the backbone of light armor.',
+    image: 'leather.webp',
+    rarity: 'uncommon',
+  },
+  steel: {
+    name: 'Metal',
+    description: 'Forged and folded, it holds an edge the arena respects.',
+    image: 'steel.webp',
+    rarity: 'rare',
+  },
+  essenceFrost: {
+    name: 'Essence of Frost',
+    description: 'A mote of unmelting winter, cold enough to ache through the satchel.',
+    image: 'essence-of-frost.webp',
+    rarity: 'legendary',
+    minLevel: 25,
+  },
+  essenceEarth: {
+    name: 'Essence of Earth',
+    description: 'A knot of living bedrock, heavier than its size has any right to be.',
+    image: 'essence-of-earth.webp',
+    rarity: 'legendary',
+    minLevel: 25,
+  },
+  essenceFire: {
+    name: 'Essence of Fire',
+    description: 'A coal that has forgotten how to go out, smouldering against the palm.',
+    image: 'essence-of-fire.webp',
+    rarity: 'legendary',
+    minLevel: 25,
+  },
+  essenceLightning: {
+    name: 'Essence of Lightning',
+    description: 'A caged spark that never stops crackling, restless to leap free.',
+    image: 'essence-of-lightning.webp',
+    rarity: 'legendary',
+    minLevel: 25,
+  },
+  essenceNature: {
+    name: 'Essence of Nature',
+    description: 'A green spark of the wild, putting out roots wherever it rests.',
+    image: 'essence-of-nature.webp',
+    rarity: 'legendary',
+    minLevel: 25,
+  },
+};
+
+export default (id, fullBody = false, meta) =>
+  entity(
+    ALL_MATERIALS,
+    typeof id === 'string' ? id : id.id,
+    typeof id === 'string' ? undefined : id.uuid,
+    fullBody,
+    typeof id === 'string'
+      ? meta?.overrides
+      : meta?.overrides
+        ? deepMerge(JSON.parse(JSON.stringify(id.overrides || {})), meta.overrides || {})
+        : id.overrides,
+  );
diff --git a/js/constants/RACES.js b/js/constants/RACES.js
new file mode 100644
index 00000000..c4354f20
--- /dev/null
+++ b/js/constants/RACES.js
@@ -0,0 +1,14 @@
+export const ALL_RACES = {
+  elf: { name: 'elf', plural: 'elves', element: 'nature' },
+  human: { name: 'human', plural: 'humans', element: 'frost' },
+  troll: { name: 'troll', plural: 'trolls', element: 'earth' },
+  dwarf: { name: 'dwarf', plural: 'dwarves', element: 'fire' },
+  goblin: { name: 'goblin', plural: 'goblins', element: 'lightning' },
+  creature: { name: 'creature', plural: 'creatures', element: '' },
+  spider: { name: 'spider', plural: 'spiders', element: '' },
+  dragon: { name: 'dragon', plural: 'dragons', element: '' },
+  giant: { name: 'giant', plural: 'giants', element: '' },
+  god: { name: 'god', plural: 'gods', element: '' },
+  werewolf: { name: 'werewolf', plural: 'werewolves', element: '' },
+  felidae: { name: 'felidae', plural: 'felidae', element: '' },
+};
diff --git a/js/constants/RECRUITABLE_CHARACTERS.js b/js/constants/RECRUITABLE_CHARACTERS.js
new file mode 100644
index 00000000..92239106
--- /dev/null
+++ b/js/constants/RECRUITABLE_CHARACTERS.js
@@ -0,0 +1,334 @@
+import ABILITIES from '/js/constants/ABILITIES.js';
+import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+import CHARACTERS, { DEFAULT_EQUIPMENT } from '/js/constants/CHARACTERS.js';
+
+export const RECRUITABLE_CHARACTERS = [
+  CHARACTERS('elfMale', false, {
+    overrides: {
+      name: 'Elon',
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('bow', false, {
+          overrides: {
+            name: 'Basic Bow',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('pierce', false, {
+                overrides: { name: 'Basic Pierce', statusEffects: [] },
+              }),
+              ABILITIES('pierce', false, {
+                overrides: { name: 'Basic Pierce', statusEffects: [] },
+              }),
+              ABILITIES('pierce', false, {
+                overrides: { name: 'Basic Pierce', statusEffects: [] },
+              }),
+              ABILITIES('pierce', false, {
+                overrides: { name: 'Basic Pierce', statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('elfFemale', false, {
+    overrides: {
+      name: 'Evyn',
+      signatureAbility: ABILITIES('mend'),
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('sword', false, {
+          overrides: {
+            name: 'Basic Sword',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('swing', false, {
+                overrides: { name: 'Basic Swing', statusEffects: [] },
+              }),
+              ABILITIES('swing', false, {
+                overrides: { name: 'Basic Swing', statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+        offHand: EQUIPMENT('sword', false, {
+          overrides: {
+            name: 'Basic Sword',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('trollMale', false, {
+    overrides: {
+      name: 'Throk',
+      signatureAbility: ABILITIES('eatMeat'),
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('heavyClub', false, {
+          overrides: {
+            name: 'Basic Heavy Club',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('slam', false, { overrides: { name: 'Basic Slam', statusEffects: [] } }),
+              ABILITIES('slam', false, { overrides: { name: 'Basic Slam', statusEffects: [] } }),
+              ABILITIES('slam', false, { overrides: { name: 'Basic Slam', statusEffects: [] } }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('trollFemale', false, {
+    overrides: {
+      name: 'Tabam',
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('club', false, {
+          overrides: {
+            name: 'Basic Club',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('slam', false, {
+                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] },
+              }),
+              ABILITIES('slam', false, {
+                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+        offHand: EQUIPMENT('club', false, {
+          overrides: {
+            name: 'Basic Club',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('slam', false, {
+                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] },
+              }),
+              ABILITIES('slam', false, {
+                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('goblinMale', false, {
+    overrides: {
+      name: 'Grish',
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('dagger', false, {
+          overrides: {
+            name: 'Basic Dagger',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
+              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
+              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
+            ],
+          },
+        }),
+        offHand: EQUIPMENT('dagger', false, {
+          overrides: {
+            name: 'Basic Dagger',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
+              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
+              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('goblinFemale', false, {
+    overrides: {
+      name: 'Gling',
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('twoHandedSpear', false, {
+          overrides: {
+            name: 'Basic Spear',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('stab', false, {
+                overrides: { name: 'Basic Stab', ticks: 4, statusEffects: [] },
+              }),
+              ABILITIES('stab', false, {
+                overrides: { name: 'Basic Stab', ticks: 4, statusEffects: [] },
+              }),
+              ABILITIES('stab', false, {
+                overrides: { name: 'Basic Stab', ticks: 4, statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('humanMale', false, {
+    overrides: {
+      name: 'Hans',
+      signatureAbility: ABILITIES('berserk'),
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('axe', false, {
+          overrides: {
+            name: 'Basic Axe',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+            ],
+          },
+        }),
+        offHand: EQUIPMENT('axe', false, {
+          overrides: {
+            name: 'Basic Axe',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('humanFemale', false, {
+    overrides: {
+      name: 'Helena',
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('sword', false, {
+          overrides: {
+            name: 'Basic Sword',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
+            ],
+          },
+        }),
+        offHand: EQUIPMENT('shield', false, {
+          overrides: {
+            name: 'Basic Shield',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('block'),
+              ABILITIES('shieldBash', false, {
+                overrides: { name: 'Basic Shield Bash', statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('dwarfMale', false, {
+    overrides: {
+      name: 'Dürak',
+      signatureAbility: ABILITIES('taunt'),
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('hammer', false, {
+          overrides: {
+            name: 'Basic Hammer',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('slam', false, {
+                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] },
+              }),
+              ABILITIES('slam', false, {
+                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+        offHand: EQUIPMENT('shield', false, {
+          overrides: {
+            name: 'Basic Shield',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('block'),
+              ABILITIES('shieldBash', false, {
+                overrides: { name: 'Basic Shield Bash', statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+    },
+  }),
+  CHARACTERS('dwarfFemale', false, {
+    overrides: {
+      name: 'Denea',
+      equipment: {
+        ...DEFAULT_EQUIPMENT,
+        armor: EQUIPMENT('paddedTunic'),
+        mainHand: EQUIPMENT('twoHandedAxe', false, {
+          overrides: {
+            name: 'Basic Great Axe',
+            cost: 0,
+            level: 1,
+            abilities: [
+              ABILITIES('swing', false, {
+                overrides: { name: 'Basic Swing', ticks: 4, statusEffects: [] },
+              }),
+              ABILITIES('swing', false, {
+                overrides: { name: 'Basic Swing', ticks: 4, statusEffects: [] },
+              }),
+              ABILITIES('swing', false, {
+                overrides: { name: 'Basic Swing', ticks: 4, statusEffects: [] },
+              }),
+            ],
+          },
+        }),
+      },
+      combatStats: { currentHealth: 24 },
+      signatureAbility: ABILITIES('wideSwing'),
+    },
+  }),
+];
diff --git a/js/constants/RELEASE_NOTES.js b/js/constants/RELEASE_NOTES.js
new file mode 100644
index 00000000..8c7f7cfe
--- /dev/null
+++ b/js/constants/RELEASE_NOTES.js
@@ -0,0 +1,1566 @@
+// Player-facing changelog. Each entry is gameplay-feature centric — no internal
+// plumbing. Dates stand in for versions until proper semantic versioning returns;
+// at that point swap `date` for a `version` field and the modal header follows.
+// Newest first is enforced at render time (sorted by date descending).
+
+const RELEASE_NOTES = [
+  {
+    date: '2026-06-20',
+    title: 'Sharper brawler portraits',
+    text: 'Brawler mugshots now frame each fighter on their face instead of a flat crop, so every champion looks their best in the roster and on the battlefield.',
+  },
+  {
+    date: '2026-06-20',
+    title: 'Potion sips obey your volume',
+    text: 'The drink-potion sound effect now respects your Sound effect and Master sliders in Options — turn it down or off and healing stays quiet.',
+  },
+  {
+    date: '2026-06-20',
+    title: 'Release notes you can actually read',
+    text: 'A full, paginated changelog lives in Options so you can catch up on everything that has changed, ten entries at a time.',
+  },
+
+  {
+    date: '2026-06-19',
+    title: 'Faster, smoother arena',
+    text: 'The arena and menus load noticeably quicker and animate more smoothly across the whole game.',
+  },
+  {
+    date: '2026-06-19',
+    title: 'Snappier page transitions',
+    text: 'Moving between the roster, the arena, and the shop feels instant.',
+  },
+
+  {
+    date: '2026-06-18',
+    title: 'Welcome to Battleborn Brawlers',
+    text: 'The game has a new name. Same auto-battler, sharper identity.',
+  },
+  {
+    date: '2026-06-18',
+    title: 'Equipment hexagon gallery',
+    text: 'Gear now shows off with a hexagon-framed design so weapons and armor read at a glance in your inventory.',
+  },
+  {
+    date: '2026-06-18',
+    title: 'Cleaner logged-out menu',
+    text: 'Coins and premium status stay hidden until you sign in, so the menu is tidy before you start a run.',
+  },
+  {
+    date: '2026-06-18',
+    title: 'Circular brawler hand',
+    text: 'Your active brawlers fan out in a rounded hand at the bottom of the screen for quicker reading of who is in the fight.',
+  },
+  {
+    date: '2026-06-18',
+    title: 'Clickable logo',
+    text: 'Tap the game logo from anywhere to jump back home.',
+  },
+
+  {
+    date: '2026-06-17',
+    title: 'Healing potions go live',
+    text: 'A full healing system arrives: drink potions between fights to patch up your brawlers before the next brawl.',
+  },
+  {
+    date: '2026-06-17',
+    title: 'Heal button polish',
+    text: 'The potion button gets a gradient icon, disables itself when everyone is already at full health, and plays a satisfying two-part drink sound.',
+  },
+  {
+    date: '2026-06-17',
+    title: 'Bosses unlock in order',
+    text: 'Boss fights now open up in a sensible sequence as you progress, so the difficulty curve stays fair.',
+  },
+  {
+    date: '2026-06-17',
+    title: 'Sticky combat panels',
+    text: 'Key combat panels stay anchored where you need them as the fight unfolds.',
+  },
+
+  {
+    date: '2026-06-16',
+    title: 'New foes to fight',
+    text: 'Fresh enemies join the arena to test your roster.',
+  },
+  {
+    date: '2026-06-16',
+    title: 'New abilities added',
+    text: 'Additional abilities expand the options for building your brawlers.',
+  },
+  {
+    date: '2026-06-16',
+    title: 'Victory fanfare fix',
+    text: 'The victory sting no longer plays twice when you win a fight.',
+  },
+  {
+    date: '2026-06-16',
+    title: 'Potion icon refresh',
+    text: 'A redesigned potion icon makes your healing supply easier to spot at a glance.',
+  },
+  {
+    date: '2026-06-16',
+    title: 'Shrug-it-off 404 page',
+    text: 'Wander somewhere that doesn’t exist and you’ll be met with a charming shrug instead of a dead end.',
+  },
+  {
+    date: '2026-06-16',
+    title: 'Boss gating fix',
+    text: 'Boss unlocks now trigger reliably as you clear the fights before them.',
+  },
+
+  {
+    date: '2026-06-15',
+    title: 'Every brawler fully kitted',
+    text: 'All brawlers now come with a complete, unique ability kit — no more half-finished movesets.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Elemental abilities',
+    text: 'Fire, frost and other elemental abilities enter the roster, each with its own flavor and tooltips.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Poison damage over time',
+    text: 'Poison lingers on a target, chipping away at its health turn after turn.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Execute finisher',
+    text: 'Execute deals bonus damage to low-health foes, rewarding well-timed strikes.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Boom ability',
+    text: 'Boom detonates for heavy burst damage in the thick of a fight.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'New arena foes and portraits',
+    text: 'Additional arena enemies arrive, each with their own portrait art.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Higher level cap',
+    text: 'The level ceiling rises past 25, giving you more room to grow your account.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Elemental capstone bosses',
+    text: 'New capstone foes themed around the elements test your best builds.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Character art gallery',
+    text: 'Browse a dedicated gallery of character art to admire the cast.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Double Persona ability',
+    text: 'Double Persona splits a brawler’s presence with a magical transition effect and sound.',
+  },
+
+  {
+    date: '2026-06-14',
+    title: 'Riposte counterattacks',
+    text: 'A new Riposte ability lets brawlers strike back when attacked.',
+  },
+  {
+    date: '2026-06-14',
+    title: 'Stomp ability with impact',
+    text: 'Stomp lands with a chunky sound effect and a satisfying hit.',
+  },
+  {
+    date: '2026-06-14',
+    title: 'Quicker ability release',
+    text: 'Abilities fire off faster, tightening up the pace of combat.',
+  },
+  {
+    date: '2026-06-14',
+    title: 'Tooltip detail reveals',
+    text: 'Hold to reveal extra detail in tooltips, keeping the default view clean while deeper info is one tap away.',
+  },
+  {
+    date: '2026-06-14',
+    title: 'Inventory keybinds fixed',
+    text: 'Inventory shortcuts now bind correctly so managing gear is faster.',
+  },
+
+  {
+    date: '2026-06-13',
+    title: 'Skjaldborg shield',
+    text: 'A new shield item, the Skjaldborg, joins the armory for defensive builds.',
+  },
+  {
+    date: '2026-06-13',
+    title: 'Shield Wall ability',
+    text: 'Raise a Shield Wall to soak incoming damage for your team.',
+  },
+  {
+    date: '2026-06-13',
+    title: 'Element-tinted tooltip borders',
+    text: 'Tooltips now border in their element’s color, so you instantly know what you’re looking at.',
+  },
+
+  {
+    date: '2026-06-12',
+    title: 'Stat tooltips everywhere',
+    text: 'Hover any stat to learn exactly what it does, from damage to resistances.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Immobilized banner',
+    text: 'When a brawler is locked in place, a clear banner shows the immobilized state.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Weave ability',
+    text: 'Weave lets a brawler slip through the fray with evasive footwork.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Skewer ability',
+    text: 'Skewer drives through a target for piercing damage.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Recharge ability',
+    text: 'Recharge restores a brawler’s resources during a long fight.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Fight page facelift',
+    text: 'The fight screen gets a cleaner layout that’s easier to read mid-battle.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Tidier spider fights',
+    text: 'Spider-web visuals no longer leave gaps, and combat reads more cleanly against them.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Vendor portraits',
+    text: 'Shopkeepers now have proper portraits, giving the Gear Up vendors real personality.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Balance graphs',
+    text: 'New scaling graphs visualize how stats grow, helping you plan builds.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Snappier brawl swords',
+    text: 'Weapon clashes are timed tighter so brawls feel punchy.',
+  },
+
+  {
+    date: '2026-06-11',
+    title: 'Spider fight added',
+    text: 'A new spider encounter scuttles into the arena.',
+  },
+
+  {
+    date: '2026-06-10',
+    title: 'Smarter matchmaking',
+    text: 'Random duels now pair you against more appropriate opponents for your level.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Healing discount at fight end',
+    text: 'In-combat healing is reconciled at the end of a fight so you’re not over-penalized for staying topped up.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Fight button facelift',
+    text: 'The button that launches a brawl gets a bolder, more inviting look.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Weapon swing sounds',
+    text: 'Weapons now whoosh and clang as they swing, adding weight to every attack.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Sound effects browser',
+    text: 'A new sounds browser lets you preview the game’s audio effects.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Specialization hints',
+    text: 'Subtle hints point you toward each brawler’s specialization as you build them.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'More fight slots',
+    text: 'Take on additional fight slots as your account grows.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Buffs cover full attacks',
+    text: 'Ability buffs now apply on both the start and end ticks of an attack, so timing feels fair.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Heal buffer and ghost trail',
+    text: 'Healing shows a buffer and a ghostly HP trail so you can see exactly how much health is coming back.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Ability anticipation squish',
+    text: 'Brawlers wind up with a little squish before an ability fires, telegraphing the action.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Status effects as elemental pins',
+    text: 'Status effects are now shown as elemental pins with clear announcements and synced timing.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Self-cast absorb fix',
+    text: 'Self-targeted shields and heals now resolve correctly.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Floating combat numbers',
+    text: 'Damage and healing floaters are sized for readability in the heat of battle.',
+  },
+
+  {
+    date: '2026-06-09',
+    title: 'Combat preview toggles',
+    text: 'A preview mode lets you see combat states without starting a real fight.',
+  },
+  {
+    date: '2026-06-09',
+    title: 'Equipment stats',
+    text: 'Gear now carries meaningful stats that shape your build.',
+  },
+  {
+    date: '2026-06-09',
+    title: 'Elemental resistances',
+    text: 'Armor and items can grant resistance against specific elements.',
+  },
+  {
+    date: '2026-06-09',
+    title: 'Signature abilities',
+    text: 'Each race gains a signature ability that defines its playstyle.',
+  },
+
+  {
+    date: '2026-06-08',
+    title: 'Equipment type system',
+    text: 'Weapons and armor are now sorted into types, adding depth to gearing up.',
+  },
+  {
+    date: '2026-06-08',
+    title: 'Race-locked gear',
+    text: 'Some equipment is tied to specific races, making roster choices matter.',
+  },
+  {
+    date: '2026-06-08',
+    title: 'Race dots in gear listings',
+    text: 'Small race markers in the gear list show at a glance which brawlers can use an item.',
+  },
+
+  {
+    date: '2026-06-07',
+    title: 'Improved dodge animation',
+    text: 'Dodging now leaves a duplicating ghost effect, making evasion read clearly in a fast fight.',
+  },
+  {
+    date: '2026-06-07',
+    title: 'Ability element tinting',
+    text: 'Abilities take on their element’s color so fire, frost and more are instantly recognizable.',
+  },
+  {
+    date: '2026-06-07',
+    title: 'Cleaner tooltips',
+    text: 'Tooltips were refined to fit their content and stay out of your way.',
+  },
+  {
+    date: '2026-06-07',
+    title: 'Basic-ability styling',
+    text: 'Basic attacks get their own clear styling to set them apart from special abilities.',
+  },
+
+  {
+    date: '2026-06-06',
+    title: 'Click-to-add abilities',
+    text: 'On desktop you can now click to slot abilities, in addition to dragging them.',
+  },
+  {
+    date: '2026-06-06',
+    title: 'Touch drag-and-drop abilities',
+    text: 'On touch devices, drag abilities into place with a smooth touch experience.',
+  },
+  {
+    date: '2026-06-06',
+    title: 'Ability healing numbers',
+    text: 'Healing abilities now show the exact amount restored, floating off the target.',
+  },
+  {
+    date: '2026-06-06',
+    title: 'Refined ability cells',
+    text: 'Ability tiles get a cleaner design and the inventory layout is easier to scan.',
+  },
+
+  {
+    date: '2026-06-05',
+    title: 'Brawler slot flip animation',
+    text: 'Brawler slots flip with a satisfying animation when you swap fighters.',
+  },
+  {
+    date: '2026-06-05',
+    title: 'Drag fighters between slots',
+    text: 'Rearrange your lineup by dragging brawlers between fight slots.',
+  },
+  {
+    date: '2026-06-05',
+    title: 'Ability resolution fix',
+    text: 'Brawlers now correctly resolve which abilities they can use.',
+  },
+
+  {
+    date: '2026-06-04',
+    title: 'Unified ability bars',
+    text: 'Ability bars across the game share one consistent design and behavior.',
+  },
+  {
+    date: '2026-06-04',
+    title: 'Damage numbers on the bar',
+    text: 'See damage dealt right on the ability bar during a fight.',
+  },
+
+  {
+    date: '2026-06-03',
+    title: 'Game version in the top bar',
+    text: 'The current game version is now shown in the top bar so you always know what build you’re playing.',
+  },
+
+  {
+    date: '2026-06-01',
+    title: 'Weapon arsenal expansion',
+    text: 'A wider arsenal of weapons arrives, each priced by its power level.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Armor rebalance',
+    text: 'Armor values were retuned so defensive builds feel meaningful without being unbeatable.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Provocation ability',
+    text: 'Provoke is now Provocation, drawing enemy aggro toward your toughest brawler with weighted threat.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Combat chance display',
+    text: 'Hit and miss chances are now shown clearly so you understand the odds.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Heartpiercer weapon ability',
+    text: 'Heartpiercer punches through armor for big single-target damage.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Powershot weapon ability',
+    text: 'Powershot delivers a heavy ranged blow to soften up a foe.',
+  },
+  {
+    date: '2026-06-01',
+    title: '50% Block ability',
+    text: 'A new Block ability halves incoming damage for a brawler.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Vendor tiers',
+    text: 'Vendors now offer tiered goods, so better gear shows up as you climb.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Brawler activity states',
+    text: 'Brawlers visibly show whether they’re acting, waiting, or downed during combat.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Reworked buff/debuff icons',
+    text: 'Buffs and debuffs use clearer icons so you can read a fight at a glance.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Brawlers roster icon',
+    text: 'A dedicated brawlers icon makes the roster easier to find.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Battle pass for testers',
+    text: 'An early battle-pass progression track is available to testers.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Armor as flat reduction',
+    text: 'Armor now subtracts a flat amount of damage rather than a percentage.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Armor penetration',
+    text: 'Armor penetration lets attacks cut straight through enemy armor.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Steel armor +10',
+    text: 'Steel armor was buffed to give defensive builds more staying power.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Test mode toggle',
+    text: 'Testers can flip a test mode to experiment with combat states.',
+  },
+
+  {
+    date: '2026-05-31',
+    title: 'Gear Up vendor',
+    text: 'A new Gear Up screen lets you buy weapons and armor from the vendor.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Blacksmith upgrades',
+    text: 'Visit the blacksmith to upgrade your gear at level-based tiers.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Gore ability',
+    text: 'Gore tears into a target for brutal damage.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Pretending to be Humble',
+    text: 'A cheeky new ability, “Pretending to be Humble”, joins the pool.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Smokebomb goblin signature',
+    text: 'Goblins gain Smokebomb as their signature trick.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Warcry human signature',
+    text: 'Humans rally with Warcry, their signature ability.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Hit chance stat',
+    text: 'A new Hit Chance stat governs how often attacks connect.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Miss animation',
+    text: 'Whiffed attacks now play a clear miss animation.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Fight descriptions',
+    text: 'Each fight now comes with a short description to set the scene.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'New ability icons',
+    text: 'Dedicated icons land for Hit Chance, Stoneskin, Smokebomb, Warcry and Intimidating Roar.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Boss-fight miss fix',
+    text: 'Miss rolls in boss fights now behave correctly.',
+  },
+
+  {
+    date: '2026-05-30',
+    title: 'Stoneskin dwarf signature',
+    text: 'Dwarves harden with Stoneskin, halving damage taken when cast.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Intimidating Roar troll signature',
+    text: 'Trolls unleash an Intimidating Roar to rattle their foes.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Alora’s Touch heal',
+    text: 'A signature healing ability, Alora’s Touch, mends a wounded ally.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Unified buff/debuff system',
+    text: 'Buffs and debuffs share one clear system, each with its own tooltip.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Steadier status chips',
+    text: 'Status chips no longer flicker as a fight ticks along.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Resistance modifiers',
+    text: 'All-resistance modifiers now apply to status effect limits, tightening the math behind defense.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Stat budget clarity',
+    text: 'A stat budget table makes it clear how power is distributed across gear.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Green modifier values',
+    text: 'Bonus stat values now show in green so upgrades stand out.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Roar duration tuned',
+    text: 'Intimidating Roar’s duration was tuned for a fairer effect.',
+  },
+
+  {
+    date: '2026-05-29',
+    title: 'Battle pass progression',
+    text: 'The account screen is reborn as a battle pass with reward tiers and notification icons.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Redesigned brawler gallery',
+    text: 'The brawlers gallery and detail pages get a cleaner, more readable layout.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Inventory drawer frame',
+    text: 'The inventory drawer is framed with a stone texture and closes cleanly every time.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Home guide and FAQ',
+    text: 'The home page now doubles as a guide and FAQ to help new players get started.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Restyled modals',
+    text: 'Pop-up dialogs share a consistent, polished frame across the game.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Sidebar HP on hover',
+    text: 'Hover or tap a brawler’s sidebar bar to see their exact current health.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Core stats rebuild',
+    text: 'The core stats panel was rebuilt for clarity and mobile readability.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Softer rarity colors',
+    text: 'Common rarity gray was softened so item colors are easier on the eyes.',
+  },
+
+  {
+    date: '2026-05-28',
+    title: 'Slimmer color palette',
+    text: 'Colors were unified into a cleaner palette for a more cohesive look.',
+  },
+  {
+    date: '2026-05-28',
+    title: 'Brawler slot dropdown',
+    text: 'Swap brawlers quickly via a tidy slot dropdown.',
+  },
+  {
+    date: '2026-05-28',
+    title: 'Reworked notifications',
+    text: 'In-game notifications were redesigned to be clearer and less intrusive.',
+  },
+  {
+    date: '2026-05-28',
+    title: 'Consistent bar fills',
+    text: 'Health and resource bars now fill in a consistent direction.',
+  },
+  {
+    date: '2026-05-28',
+    title: 'Unified panel chrome',
+    text: 'Panels across the game share one consistent frame and border.',
+  },
+
+  {
+    date: '2026-05-25',
+    title: 'Locked-in tooltips',
+    text: 'Tooltips now stay put where you expect them instead of drifting.',
+  },
+
+  {
+    date: '2026-05-24',
+    title: 'Smoother ability drag-and-drop',
+    text: 'Dragging abilities between brawlers and slots is more reliable, including cross-character drops.',
+  },
+  {
+    date: '2026-05-24',
+    title: 'Random duel parity',
+    text: 'Random duels play out consistently for both sides.',
+  },
+  {
+    date: '2026-05-24',
+    title: 'Ability slot sizing fix',
+    text: 'Ability slots size correctly while dragging so drops land where intended.',
+  },
+
+  {
+    date: '2026-05-23',
+    title: 'Coin stack polish',
+    text: 'Coin stacks wrap neatly and show a clear empty state when you’re broke.',
+  },
+
+  {
+    date: '2026-05-22',
+    title: 'Chevron rotation cues',
+    text: 'Expandable sections rotate their chevrons so you always know what’s open.',
+  },
+  {
+    date: '2026-05-22',
+    title: 'Full-width sidebar cards',
+    text: 'Sidebar cards now span the full width for easier reading.',
+  },
+  {
+    date: '2026-05-22',
+    title: 'Progression scroll fix',
+    text: 'The progression screen now scrolls to the right spot when opened.',
+  },
+  {
+    date: '2026-05-22',
+    title: 'Square back button',
+    text: 'The back button got a cleaner square shape that’s easier to tap.',
+  },
+
+  {
+    date: '2026-05-21',
+    title: 'Inventory drawer',
+    text: 'A new inventory drawer makes managing your gear far easier.',
+  },
+  {
+    date: '2026-05-21',
+    title: 'Equipment table',
+    text: 'An equipment table lays out exactly what each brawler is wearing.',
+  },
+
+  {
+    date: '2026-05-14',
+    title: 'Responsive arena',
+    text: 'The arena now scales gracefully down to small phone screens.',
+  },
+  {
+    date: '2026-05-14',
+    title: 'Equip reactivity fix',
+    text: 'Equipping and unequipping gear updates your brawler’s stats instantly.',
+  },
+  {
+    date: '2026-05-14',
+    title: 'Brawler detail redirect fix',
+    text: 'Opening a brawler’s detail page now lands you in the right place.',
+  },
+
+  {
+    date: '2026-05-11',
+    title: 'Combat visuals overhaul',
+    text: 'Combat was realigned with its reference design for a cleaner, more readable battle.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Rewards staging',
+    text: 'Post-fight rewards now appear in a clear, staged sequence.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Accordion expand fix',
+    text: 'Expandable panels open and close reliably.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Combat scaling fix',
+    text: 'Enemy and ability scaling now behaves correctly across levels.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Victory stinger double-play fix',
+    text: 'The victory sound no longer doubles up after a win.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Clean combat exit',
+    text: 'Leaving a fight returns you to a clean, expected state.',
+  },
+
+  {
+    date: '2026-05-08',
+    title: 'Equipment tooltip rewrite',
+    text: 'Gear tooltips were rewritten to present stats clearly and consistently.',
+  },
+  {
+    date: '2026-05-08',
+    title: 'Ability status overlay',
+    text: 'Abilities show their active statuses as a clear overlay, including a fixed stun icon.',
+  },
+  { date: '2026-05-08', title: 'Tier colors fix', text: 'Item tier colors now display correctly.' },
+  {
+    date: '2026-05-08',
+    title: 'Ability tooltip parity',
+    text: 'Ability tooltips now match across every screen they appear on.',
+  },
+
+  {
+    date: '2026-05-07',
+    title: 'Refined dodge ghosting',
+    text: 'The dodge animation’s duplicating ghost effect was polished for clarity.',
+  },
+  {
+    date: '2026-05-07',
+    title: 'Cleaner brawler detail',
+    text: 'The brawler detail page was tidied up for easier reading.',
+  },
+  {
+    date: '2026-05-07',
+    title: 'Tooltip pointer fix',
+    text: 'Tooltips point cleanly at what they describe.',
+  },
+
+  {
+    date: '2026-05-06',
+    title: 'Data inspector accordions',
+    text: 'The data inspector now uses smooth accordions for browsing details.',
+  },
+
+  {
+    date: '2026-05-01',
+    title: 'Live deployment',
+    text: 'The game is now live and playable in your browser.',
+  },
+
+  {
+    date: '2026-04-18',
+    title: 'Circular combat arena',
+    text: 'Combat was rebuilt as a circular arena composition, giving fights a distinctive stage.',
+  },
+  {
+    date: '2026-04-18',
+    title: 'Victory and defeat screens',
+    text: 'Win or lose, you now get a proper result screen with an announcement.',
+  },
+  {
+    date: '2026-04-18',
+    title: 'New combat components',
+    text: 'Combat arena, ability bars, and health bars were rebuilt for a smoother battle.',
+  },
+  {
+    date: '2026-04-18',
+    title: 'Auth recovery fix',
+    text: 'A stale login no longer traps you in a reload loop — you’re cleanly signed out instead.',
+  },
+  {
+    date: '2026-04-18',
+    title: 'Sidebar HP readout',
+    text: 'Sidebar health now toggles between a bar and exact numbers.',
+  },
+
+  {
+    date: '2026-04-17',
+    title: 'Remember-me persistence',
+    text: 'Your “remember me”, accepted code of conduct, and login details now persist between visits.',
+  },
+  {
+    date: '2026-04-17',
+    title: 'Default master volume off',
+    text: 'The game now starts muted by default so you’re never blasted on first load — turn it up in Options.',
+  },
+  {
+    date: '2026-04-17',
+    title: 'Sidebar spacing polish',
+    text: 'Sidebar spacing, bar colors and headline alignment were cleaned up.',
+  },
+  {
+    date: '2026-04-17',
+    title: 'Light and dark theming',
+    text: 'The interface adapts cleanly between light and dark themes.',
+  },
+
+  {
+    date: '2026-03-05',
+    title: 'Password reset emails',
+    text: 'Forgot your password? Reset emails now arrive reliably so you can get back in.',
+  },
+
+  {
+    date: '2025-12-05',
+    title: 'New dynamic icon',
+    text: 'A fresh dynamic icon livens up the interface.',
+  },
+
+  {
+    date: '2025-10-23',
+    title: 'First PvP duels',
+    text: 'The first version of player-versus-player duels arrives — test your roster against others.',
+  },
+
+  {
+    date: '2025-09-26',
+    title: 'Account scaling',
+    text: 'Account-wide scaling lets your whole roster grow stronger over time.',
+  },
+
+  {
+    date: '2025-09-22',
+    title: 'Coins arrive',
+    text: 'Earn coins from your battles to spend on your roster.',
+  },
+  {
+    date: '2025-09-22',
+    title: 'Account progress bar',
+    text: 'Watch your account progress bar climb as you play.',
+  },
+
+  {
+    date: '2025-09-19',
+    title: 'Heal Now button',
+    text: 'A Heal Now button lets you instantly patch up your brawlers between fights.',
+  },
+
+  {
+    date: '2025-09-16',
+    title: 'Arena background',
+    text: 'The arena gets a proper background, giving fights a real sense of place.',
+  },
+  {
+    date: '2025-09-16',
+    title: 'Overridable equipment',
+    text: 'Equipment can now be swapped and overridden freely on your brawlers.',
+  },
+  {
+    date: '2025-09-16',
+    title: 'Clearer recruitment',
+    text: 'Recruiting brawlers comes with clearer messaging about who you’re adding.',
+  },
+
+  {
+    date: '2025-09-15',
+    title: 'Live health and XP ticker',
+    text: 'A global timer steadily refills health and grants experience even while you plan.',
+  },
+
+  {
+    date: '2025-09-12',
+    title: 'Victory and defeat screens',
+    text: 'Combat now ends with a dedicated victory or defeat screen.',
+  },
+  {
+    date: '2025-09-12',
+    title: 'Combat background image',
+    text: 'A background image gives early fights real atmosphere.',
+  },
+
+  {
+    date: '2025-09-11',
+    title: 'Status stacks',
+    text: 'Stacking status effects are now tracked and displayed during combat.',
+  },
+
+  {
+    date: '2025-09-10',
+    title: 'Brawler selection screen',
+    text: 'Pick your brawlers from a dedicated creature selection screen.',
+  },
+  {
+    date: '2025-09-10',
+    title: 'Quality-of-life UI',
+    text: 'A batch of small interface conveniences makes day-to-day play smoother.',
+  },
+  {
+    date: '2025-09-10',
+    title: 'The golem joins',
+    text: 'A hulking golem enters the roster of available creatures.',
+  },
+
+  {
+    date: '2025-09-09',
+    title: 'Reworked ability math',
+    text: 'Ability calculations were overhauled for more consistent, predictable results.',
+  },
+
+  {
+    date: '2025-09-08',
+    title: 'Two-handed axe',
+    text: 'A mighty two-handed axe joins the weapon selection.',
+  },
+  {
+    date: '2025-09-08',
+    title: 'Fat Rat rebalance',
+    text: 'The Fat Rat foe was toned down to a fairer challenge.',
+  },
+  {
+    date: '2025-09-08',
+    title: 'Ability tweaks',
+    text: 'Several abilities were added and adjusted for better balance.',
+  },
+
+  {
+    date: '2025-09-07',
+    title: 'Armor in combat',
+    text: 'Armor now actively reduces damage during fights.',
+  },
+
+  {
+    date: '2025-09-05',
+    title: 'Better tooltips',
+    text: 'Tooltips were improved to convey information more clearly.',
+  },
+
+  {
+    date: '2025-09-03',
+    title: 'Deterministic combat',
+    text: 'Combat now plays out deterministically, so the same setup yields the same result.',
+  },
+  {
+    date: '2025-09-03',
+    title: 'New combat system',
+    text: 'A reworked combat system underpins every fight.',
+  },
+  {
+    date: '2025-09-03',
+    title: 'Two-handed weapon abilities',
+    text: 'Two-handed weapons now correctly grant their matching abilities.',
+  },
+  {
+    date: '2025-09-03',
+    title: 'Ability types',
+    text: 'Abilities are now categorized by type for clearer kits.',
+  },
+  {
+    date: '2025-09-03',
+    title: 'Colorful abilities',
+    text: 'Abilities gain color accents to tell them apart at a glance.',
+  },
+
+  {
+    date: '2025-09-02',
+    title: 'Drag-and-drop fixes',
+    text: 'Dragging items and abilities around the interface is more reliable.',
+  },
+
+  {
+    date: '2025-08-28',
+    title: 'Equipment and combat stats',
+    text: 'Equipment now contributes combat stats that shape how your brawlers fight.',
+  },
+
+  {
+    date: '2025-08-27',
+    title: 'Account inventory',
+    text: 'Your gear now lives in a per-account inventory, ready to equip on any brawler.',
+  },
+  {
+    date: '2025-08-27',
+    title: 'Equipment system',
+    text: 'A full equipment system lets you arm and armor your brawlers.',
+  },
+
+  {
+    date: '2025-08-26',
+    title: 'Account authentication',
+    text: 'Sign in to keep your roster and progress across sessions.',
+  },
+
+  {
+    date: '2025-08-25',
+    title: 'Drag-and-drop arrives',
+    text: 'Drag-and-drop comes to the game for arranging brawlers and gear.',
+  },
+  {
+    date: '2025-08-25',
+    title: 'Stun effect',
+    text: 'A stun status can now lock a brawler out of acting for a beat.',
+  },
+
+  {
+    date: '2025-08-24',
+    title: 'Combat pacing',
+    text: 'The rhythm of combat was tuned so fights feel snappy but readable.',
+  },
+
+  {
+    date: '2025-08-22',
+    title: 'First real page',
+    text: 'The game’s first proper page lays the foundation for everything to come.',
+  },
+  {
+    date: '2025-08-22',
+    title: 'Smoother attack arcs',
+    text: 'Attacks travel along nicer curves as fighters lunge at each other.',
+  },
+
+  {
+    date: '2025-08-21',
+    title: 'Fighters charge each other',
+    text: 'Brawlers now visibly attack toward one another, bringing fights to life.',
+  },
+
+  {
+    date: '2025-08-20',
+    title: 'Animation system',
+    text: 'A simple animation system brings movement to combat.',
+  },
+  {
+    date: '2025-08-20',
+    title: 'Early visual design',
+    text: 'The first coat of visual design gives the game its initial look.',
+  },
+
+  {
+    date: '2025-08-19',
+    title: 'Energy bar',
+    text: 'Brawlers gain an energy bar to fuel their abilities.',
+  },
+
+  {
+    date: '2023-08-11',
+    title: 'Responsive hex grid',
+    text: 'A responsive hexagon grid lays the groundwork for the world map.',
+  },
+
+  {
+    date: '2023-08-04',
+    title: 'Game engine foundation',
+    text: 'The core game engine that powers everything is now in place.',
+  },
+
+  {
+    date: '2022-08-08',
+    title: 'Nicer toasts',
+    text: 'Pop-up toast messages got a friendlier look.',
+  },
+
+  {
+    date: '2022-08-05',
+    title: 'Overlays',
+    text: 'A reusable overlay system arrives for dialogs and menus.',
+  },
+
+  {
+    date: '2022-08-02',
+    title: 'Form elements',
+    text: 'Polished form elements make signing in and configuring options pleasant.',
+  },
+  {
+    date: '2022-08-02',
+    title: 'Ping button',
+    text: 'A ping button lets you check your connection to the game server.',
+  },
+
+  {
+    date: '2026-06-19',
+    title: 'Lighter memory footprint',
+    text: 'The game uses less memory during long sessions, so it stays responsive the longer you play.',
+  },
+  {
+    date: '2026-06-18',
+    title: 'Equipment design gallery',
+    text: 'A gallery of equipment-link hexagon designs shows off the gear framing system.',
+  },
+  {
+    date: '2026-06-17',
+    title: 'Potion supply tracking',
+    text: 'Your potion count is tracked clearly so you always know how many heals you have left.',
+  },
+  {
+    date: '2026-06-17',
+    title: 'Full-health heal lockout',
+    text: 'The heal button greys out when your whole team is already at full health, saving you a wasted potion.',
+  },
+  {
+    date: '2026-06-16',
+    title: 'Fire and Wood impacts',
+    text: 'The Boom ability lands with a layered fire-and-wood impact sound.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Lacerate double slash',
+    text: 'Lacerate strikes twice in quick succession with a combo slash effect.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Cheesy Tactics buff',
+    text: 'Cheesy Tactics buffs a brawler with a bit of food-fueled flair.',
+  },
+  {
+    date: '2026-06-15',
+    title: 'Demoralizing Shout',
+    text: 'Demoralizing Shout saps the fight out of your enemies.',
+  },
+  {
+    date: '2026-06-14',
+    title: 'Stomp impact layers',
+    text: 'Stomp stacks multiple impact layers for a weighty, ground-shaking hit.',
+  },
+  {
+    date: '2026-06-13',
+    title: 'Element tooltip legend',
+    text: 'A clear legend ties each tooltip border color to its element.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Spider web visuals',
+    text: 'Spider encounters weave atmospheric webs across the arena.',
+  },
+  {
+    date: '2026-06-12',
+    title: 'Stat scaling pages',
+    text: 'Dedicated pages chart how character, ability, and equipment stats scale with level.',
+  },
+  {
+    date: '2026-06-11',
+    title: 'Fullscreen prompt modal',
+    text: 'A roomy fullscreen modal makes composing long inputs comfortable.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Up-to fight slots',
+    text: 'Fights can now field a variable number of slots depending on the encounter.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Badge variants',
+    text: 'Status and reward badges come in clearer variants for quick recognition.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Ghost HP trail',
+    text: 'A trailing ghost shows where a brawler’s health was a moment ago, so damage and healing read clearly.',
+  },
+  {
+    date: '2026-06-10',
+    title: 'Ability bar rendering fix',
+    text: 'Ability bars render correctly in every combat situation.',
+  },
+  {
+    date: '2026-06-09',
+    title: 'Combat state toggles',
+    text: 'Preview different combat states — buffed, stunned, downed — without starting a fight.',
+  },
+  {
+    date: '2026-06-08',
+    title: 'Disabled-state form polish',
+    text: 'Disabled buttons and inputs now look clearly inactive instead of ambiguous.',
+  },
+  {
+    date: '2026-06-07',
+    title: 'Shared Cross close button',
+    text: 'A consistent close button appears across every dialog and panel.',
+  },
+  {
+    date: '2026-06-07',
+    title: 'Ability bar cursor',
+    text: 'The ability bar shows the right cursor so you know what’s draggable.',
+  },
+  {
+    date: '2026-06-06',
+    title: 'Inventory layout cleanup',
+    text: 'The inventory was reorganized so finding the right item is faster.',
+  },
+  {
+    date: '2026-06-05',
+    title: 'Cross-character ability drops',
+    text: 'Drag an ability from one brawler straight onto another.',
+  },
+  {
+    date: '2026-06-04',
+    title: 'Ability bar damage readout',
+    text: 'Damage dealt by each ability shows directly on the bar.',
+  },
+  {
+    date: '2026-06-03',
+    title: 'Top bar version label',
+    text: 'The top bar now carries the build label so bug reports are easy to pin down.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Sword weapon family',
+    text: 'Swords swing with metallic flair and a dedicated sound.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Spear weapon family',
+    text: 'Spears stab from range with their own attack feel.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Bow weapon family',
+    text: 'Bows loose arrows with a clean target-impact effect.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Hammer weapon family',
+    text: 'Hammers maul foes with heavy, crunching blows.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Dagger weapon family',
+    text: 'Daggers deliver quick, simple cuts in rapid succession.',
+  },
+  {
+    date: '2026-06-01',
+    title: 'Incoming/outgoing damage split',
+    text: 'Damage multipliers are split into incoming and outgoing, so buffs and debuffs read precisely.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Element badges gated',
+    text: 'Element badges appear only where they’re relevant, cutting clutter.',
+  },
+  {
+    date: '2026-05-31',
+    title: 'Icons reference page',
+    text: 'A reference page collects every in-game icon in one place.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Counter-status variants',
+    text: 'Counter variants of status effects are generated automatically, so opposing effects always have a match.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Combat components showcase',
+    text: 'A showcase page demonstrates status chips, combat VFX, and sound effects.',
+  },
+  {
+    date: '2026-05-30',
+    title: 'Stat value formatting',
+    text: 'A stat value of 1 now shows as a plain number instead of 100%, reading correctly.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Notification repositioning',
+    text: 'Notifications were moved to a spot where they won’t cover the action.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Tab polish',
+    text: 'Tabs across the account screens are clearer and easier to navigate.',
+  },
+  {
+    date: '2026-05-29',
+    title: 'Stone-textured inventory',
+    text: 'The inventory drawer gained a stone texture and inset shadow for a tactile feel.',
+  },
+  {
+    date: '2026-05-28',
+    title: 'Colors reference page',
+    text: 'A dedicated colors page documents the game’s palette.',
+  },
+  {
+    date: '2026-05-28',
+    title: 'Tooltip spacing fix',
+    text: 'Tooltip spacing was corrected so text breathes properly.',
+  },
+  {
+    date: '2026-05-22',
+    title: 'Sidebar restructure',
+    text: 'The sidebar was restructured for a cleaner, more logical flow.',
+  },
+  {
+    date: '2026-05-22',
+    title: 'Unified accordions',
+    text: 'Every expandable section now behaves the same way.',
+  },
+  {
+    date: '2026-05-21',
+    title: 'Drawer touch-ups',
+    text: 'The inventory drawer and tooltips got touch-friendly refinements.',
+  },
+  {
+    date: '2026-05-14',
+    title: 'Ability drop-zone sizing',
+    text: 'Ability drop zones are sized so drags always land cleanly.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Debug heal sync',
+    text: 'Health values stay in sync after healing in every view.',
+  },
+  {
+    date: '2026-05-11',
+    title: 'Modal layering fix',
+    text: 'Modals now layer correctly so nothing important gets hidden behind another panel.',
+  },
+  {
+    date: '2026-05-08',
+    title: 'Stun icon fix',
+    text: 'The stun status now shows its correct icon.',
+  },
+  {
+    date: '2026-05-08',
+    title: 'Status colors fix',
+    text: 'Status effect colors are accurate across the board.',
+  },
+  {
+    date: '2026-05-07',
+    title: 'Devbar persistence',
+    text: 'Developer tools remember their state between visits for testers.',
+  },
+  {
+    date: '2026-05-01',
+    title: 'Browser-ready build',
+    text: 'The game runs smoothly straight from your browser, no install needed.',
+  },
+  {
+    date: '2026-04-18',
+    title: 'Health bars rebuilt',
+    text: 'Health bars were rebuilt to animate cleanly as damage lands and heals tick.',
+  },
+  {
+    date: '2026-04-18',
+    title: 'Result announcement',
+    text: 'A bold announcement calls out victory or defeat the moment a fight ends.',
+  },
+  {
+    date: '2026-04-17',
+    title: 'Inspector polish',
+    text: 'The data inspector reads more clearly for those who like the details.',
+  },
+  {
+    date: '2025-12-15',
+    title: 'Cleaner imports',
+    text: 'Behind-the-scenes cleanup keeps the game loading reliably.',
+  },
+  {
+    date: '2025-10-29',
+    title: 'Better debug bar',
+    text: 'The developer debug bar was improved for faster testing.',
+  },
+  {
+    date: '2025-09-25',
+    title: 'Basic scaling',
+    text: 'The first scaling system makes enemies and rewards grow with you.',
+  },
+  {
+    date: '2025-09-19',
+    title: 'Heal-now polish',
+    text: 'The early Heal Now flow was refined for quicker recovery between fights.',
+  },
+  {
+    date: '2025-09-16',
+    title: 'Character typing',
+    text: 'Characters are now properly typed, paving the way for richer rosters.',
+  },
+  {
+    date: '2025-09-10',
+    title: 'Per-character references',
+    text: 'Each character keeps its own reference, so swaps and edits stay consistent.',
+  },
+  {
+    date: '2025-09-09',
+    title: 'Ability calculation rework',
+    text: 'How abilities calculate their effects was reworked for fairness.',
+  },
+  {
+    date: '2025-09-08',
+    title: 'Goblin foes',
+    text: 'Goblins join the cast of enemies you’ll face.',
+  },
+  {
+    date: '2025-09-05',
+    title: 'Tooltip clarity',
+    text: 'Tooltips were sharpened to surface the info that matters.',
+  },
+  {
+    date: '2025-09-03',
+    title: 'Persistent references',
+    text: 'Gear and abilities are stored by reference, keeping your loadouts stable.',
+  },
+  {
+    date: '2025-09-03',
+    title: 'Color-coded abilities',
+    text: 'Abilities pick up color cues to help you read your kit.',
+  },
+  {
+    date: '2025-08-28',
+    title: 'Combat stat foundation',
+    text: 'The combat stat system that drives every fight was laid down.',
+  },
+  {
+    date: '2025-08-26',
+    title: 'Login flow',
+    text: 'A complete login flow keeps your account secure and your progress saved.',
+  },
+  {
+    date: '2025-08-25',
+    title: 'Stun introduced',
+    text: 'Stun joins the fight as the first crowd-control effect.',
+  },
+  {
+    date: '2025-08-24',
+    title: 'Pacing pass',
+    text: 'Combat timing was tuned so battles feel deliberate, not chaotic.',
+  },
+  {
+    date: '2025-08-22',
+    title: 'Bezier attack curves',
+    text: 'Attacks follow smooth bezier arcs as fighters trade blows.',
+  },
+  {
+    date: '2025-08-21',
+    title: 'Attack-toward animation',
+    text: 'Brawlers lunge toward their targets, making melee feel physical.',
+  },
+  {
+    date: '2025-08-20',
+    title: 'First design pass',
+    text: 'The game’s earliest visual identity took shape.',
+  },
+  {
+    date: '2025-08-19',
+    title: 'Energy resource',
+    text: 'Energy becomes the resource brawlers spend to act.',
+  },
+  {
+    date: '2023-08-11',
+    title: 'Hex map foundation',
+    text: 'A responsive hexagon grid sets up the future world map.',
+  },
+  {
+    date: '2023-08-04',
+    title: 'Engine cleanup',
+    text: 'The core engine got an early cleanup pass for stability.',
+  },
+  {
+    date: '2022-11-01',
+    title: 'WebSocket backbone',
+    text: 'The game moved to WebSockets for snappy, real-time play.',
+  },
+  {
+    date: '2022-08-08',
+    title: 'mediaQuery helper',
+    text: 'Responsive behavior improved so the game adapts to your screen.',
+  },
+  {
+    date: '2022-08-05',
+    title: 'Overlay system',
+    text: 'Reusable overlays power the game’s menus and dialogs.',
+  },
+];
+
+const PER_PAGE = 10;
+const SORTED = [...RELEASE_NOTES].sort((a, b) => b.date.localeCompare(a.date));
+
+export const RELEASE_NOTES_PAGE_COUNT = Math.ceil(SORTED.length / PER_PAGE);
+
+export const releaseNotesPageData = (page) => {
+  const p = Math.min(Math.max(page, 0), RELEASE_NOTES_PAGE_COUNT - 1);
+  return {
+    page: p,
+    pageCount: RELEASE_NOTES_PAGE_COUNT,
+    entries: SORTED.slice(p * PER_PAGE, p * PER_PAGE + PER_PAGE),
+  };
+};
+
+export default RELEASE_NOTES;
diff --git a/js/constants/SFX.js b/js/constants/SFX.js
new file mode 100644
index 00000000..99bfa46f
--- /dev/null
+++ b/js/constants/SFX.js
@@ -0,0 +1,130 @@
+export default {
+  swing: {
+    sfxName: 'swing',
+    duration: 1000,
+    variants: ['Simple Cut 1', 'Simple Cut 2', 'Simple Cut 3'],
+  },
+  stab: {
+    sfxName: 'stab',
+    duration: 1000,
+    variants: ['Spear Stab 1', 'Spear Stab 2', 'Spear Stab 3'],
+  },
+  slam: {
+    sfxName: 'slam',
+    duration: 1000,
+    variants: ['Hammer Maul 1', 'Hammer Maul 2', 'Hammer Maul 3', 'Hammer Maul 4'],
+  },
+  stomp: {
+    sfxName: 'stomp',
+    duration: 1000,
+    variants: [
+      'Unspecified Impact Layer (1)',
+      'Unspecified Impact Layer (2)',
+      'Unspecified Impact Layer (3)',
+    ],
+  },
+  boom: {
+    sfxName: 'boom',
+    duration: 2000,
+    variants: ['Fire and Wood'],
+  },
+  punch: {
+    sfxName: 'punch',
+    duration: 100,
+    variants: ['Slap Style Layer (1)', 'Slap Style Layer (2)', 'Slap Style Layer (3)'],
+  },
+  armorHit: {
+    sfxName: 'armorHit',
+    duration: 500,
+    variants: [
+      'Armor Layer (1)',
+      'Armor Layer (2)',
+      'Armor Layer (3)',
+      'Armor Layer (4)',
+      'Armor Layer (5)',
+      'Armor Layer (6)',
+    ],
+  },
+  bowShot: {
+    sfxName: 'bowShot',
+    duration: 800,
+    variants: ['Target Impact - Default (1)'],
+  },
+  block: {
+    sfxName: 'block',
+    duration: 500,
+    variants: ['Axe Chop 1', 'Axe Chop 2', 'Axe Chop 3', 'Axe Chop 4', 'Axe Chop 5', 'Axe Chop 6'],
+  },
+  dodge: {
+    sfxName: 'dodge',
+    duration: 500,
+    variants: [
+      'Swing Whoosh (1)',
+      'Swing Whoosh (2)',
+      'Swing Whoosh (3)',
+      'Swing Whoosh (4)',
+      'Swing Whoosh (5)',
+      'Swing Whoosh (6)',
+      'Swing Whoosh (7)',
+      'Swing Whoosh (8)',
+      'Swing Whoosh (9)',
+      'Swing Whoosh (10)',
+    ],
+  },
+  chew: {
+    sfxName: 'chew',
+    duration: 2000,
+    variants: ['Food Use - Buff Style 1', 'Food Use - Buff Style 2'],
+  },
+  doubleCut: {
+    sfxName: 'doubleCut',
+    duration: 1200,
+    variants: ['SOW1 - Combo - Double Slash 1'],
+  },
+  bling: {
+    sfxName: 'bling',
+    duration: 1500,
+    variants: ['Fantasy Game Buff (1)'],
+  },
+  warcry: {
+    sfxName: 'warcry',
+    duration: 1500,
+    variants: ['Fire Themed GUI - Warrior Shout (2)'],
+  },
+  emberStrike: {
+    sfxName: 'emberStrike',
+    duration: 1000,
+    variants: ['Fire Impact 2', 'Fire Impact 10', 'Fire Impact 8', 'Fire Impact 20'],
+  },
+  powerReady: {
+    sfxName: 'powerReady',
+    duration: 1500,
+    variants: ['Power Ready (14)', 'Power Ready (17)'],
+  },
+  doublePersona: {
+    sfxName: 'doublePersona',
+    duration: 1000,
+    variants: ['Magic Transition'],
+  },
+  weaponSwing: {
+    sfxName: 'weaponSwing',
+    duration: 500,
+    variants: [
+      'Metallic Weapon Swing (1)',
+      'Metallic Weapon Swing (2)',
+      'Metallic Weapon Swing (3)',
+      'Metallic Weapon Swing (4)',
+      'Metallic Weapon Swing (5)',
+    ],
+  },
+  mindsnap: {
+    sfxName: 'mindsnap',
+    duration: 1500,
+    variants: ['DeBuff 1', 'DeBuff 2'],
+  },
+  filler: {
+    sfxName: 'filler',
+    duration: 500,
+    variants: [],
+  },
+};
diff --git a/js/constants/STATS.js b/js/constants/STATS.js
new file mode 100644
index 00000000..531ce1ec
--- /dev/null
+++ b/js/constants/STATS.js
@@ -0,0 +1,304 @@
+import { ALL_ELEMENTS, ELEMENT_KEYS } from '/js/constants/ELEMENTS.js';
+import {
+  TOLERANCE_CATEGORIES,
+  TOLERANCE_CATEGORY_KEYS,
+  TOLERANCE_CHILDREN,
+  TOLERANCE_CHILD_KEYS,
+  DEFAULT_TOLERANCE_BASELINE,
+  effectiveTolerance,
+} from '/js/constants/TOLERANCE.js';
+
+export const STAT_LABELS = {
+  maxHealth: 'Health',
+  maxArmor: 'Armor',
+  damage: 'Damage',
+  tolerance: 'All tolerances',
+  hitChance: 'Hit chance',
+  criticalChance: 'Critical chance',
+  criticalDamage: 'Critical damage',
+  blockChance: 'Block chance',
+  dodgeChance: 'Dodge chance',
+  magicChance: 'Magic chance',
+  armorPenetration: 'Armor penetration',
+  provocation: 'Provocation',
+};
+
+// Hover explanations for every stat an <icon-cell> can show, keyed by the
+// row's icon key. Limits are keyed by the status they convert into (matching
+// characterSheetGroups), elements by their resistance rows.
+export const STAT_DESCRIPTIONS = {
+  maxHealth: {
+    name: 'Health',
+    description:
+      'How much <strong>damage</strong> this brawler can take. At <strong>0 health</strong> they are knocked out for the rest of the fight.',
+  },
+  maxArmor: {
+    name: 'Armor',
+    description:
+      'Every incoming hit is reduced by your <strong>current armor</strong>, flat. <strong>Armor penetration</strong> destroys it.',
+  },
+  damage: {
+    name: 'Damage',
+    description:
+      'The base of every attack: each ability deals its own <strong>percentage of your Damage</strong>. More Damage raises every hit you land.',
+  },
+  hitChance: {
+    name: 'Hit chance',
+    description:
+      'Your chance for an attack to <strong>land at all</strong>. You start at <strong>100%</strong> — misses only happen when something lowers it, like heavy armor or an <strong>Obscured</strong> target.',
+  },
+  criticalChance: {
+    name: 'Critical chance',
+    description:
+      'Your <strong>Critical chance</strong> is your chance to land a critical hit. Critical hits increase the damage of the current ability by a multiplier (<strong>Critical damage</strong>).',
+  },
+  criticalDamage: {
+    name: 'Critical damage',
+    description:
+      'The damage bonus applied on a <strong>critical hit</strong>. At <strong>50%</strong>, a critical hit deals <strong>150%</strong> of the ability’s normal damage.',
+  },
+  blockChance: {
+    name: 'Block chance',
+    description:
+      'Your chance to <strong>block</strong> an incoming attack. A blocked attack deals <strong>no damage</strong>. Requires a <strong>shield</strong> equipped — without one, block chance has <strong>no effect</strong>.',
+  },
+  dodgeChance: {
+    name: 'Dodge chance',
+    description:
+      'Your chance to <strong>dodge</strong> an incoming attack. A dodged attack deals <strong>no damage</strong>.',
+  },
+  magicChance: {
+    name: 'Magic chance',
+    description:
+      'An attunement to <strong>older powers</strong>. Its mechanic is still being forged — it has no effect in combat yet.',
+  },
+  tolerance: {
+    name: 'All tolerances',
+    description:
+      'Scales your top <strong>tolerance</strong> categories (<strong>DOT</strong>, <strong>Immobilize</strong>, <strong>Debuff</strong>) by this percentage, making every status debuff harder to land.',
+  },
+  armorPenetration: {
+    name: 'Armor penetration',
+    description:
+      'Every hit you land <strong>destroys</strong> this much of the target’s <strong>armor</strong> for the rest of the fight.',
+  },
+  provocation: {
+    name: 'Provocation',
+    description:
+      'How strongly this brawler <strong>draws enemy attacks</strong>. Enemies split their attacks in proportion to each defender’s Provocation.',
+  },
+  dot: {
+    name: 'DOT tolerance',
+    description:
+      'Buildup this brawler can take before <strong>damage-over-time</strong> debuffs (<strong>Bleeding</strong>, <strong>Poisoned</strong>) land. Raising it makes <em>both</em> harder to apply.',
+  },
+  immobilize: {
+    name: 'Immobilize tolerance',
+    description:
+      'Buildup this brawler can take before <strong>immobilizing</strong> debuffs (<strong>Stunned</strong>, <strong>Cocooned</strong>) land. Raising it makes <em>both</em> harder to apply.',
+  },
+  debuff: {
+    name: 'Debuff tolerance',
+    description:
+      'Buildup this brawler can take before weakening debuffs (<strong>Vulnerable</strong>) land. Raising it makes them harder to apply.',
+  },
+  bleeding: {
+    name: 'Bleeding tolerance',
+    description:
+      'Total <strong>Wounded</strong> buildup before it converts into <strong>Bleeding</strong> (damage every tick) — DOT tolerance plus its own. Higher means harder to make bleed.',
+  },
+  venom: {
+    name: 'Poisoned tolerance',
+    description:
+      'Total <strong>Envenomed</strong> buildup before it converts into <strong>Poisoned</strong> (damage every tick) — DOT tolerance plus its own. Higher means harder to poison.',
+  },
+  stunned: {
+    name: 'Stunned tolerance',
+    description:
+      'Total <strong>Concussed</strong> buildup before it converts into <strong>Stunned</strong> (cannot act) — Immobilize tolerance plus its own. Higher means harder to stun.',
+  },
+  weave: {
+    name: 'Cocooned tolerance',
+    description:
+      'Total <strong>Webbed</strong> buildup before it converts into <strong>Cocooned</strong> (wrapped in silk, cannot act) — Immobilize tolerance plus its own. Higher means harder to wrap.',
+  },
+  vulnerable: {
+    name: 'Vulnerable tolerance',
+    description:
+      'Total <strong>Exposed</strong> buildup before it converts into <strong>Vulnerable</strong> (takes 50% more damage) — Debuff tolerance plus its own. Higher means harder to expose.',
+  },
+  ...Object.fromEntries(
+    ELEMENT_KEYS.map((key) => {
+      const name = ALL_ELEMENTS[key].name;
+      return [
+        key,
+        {
+          name: `${name[0].toUpperCase()}${name.slice(1)} resistance`,
+          description: `Your resistance to <strong>${name}</strong>, as a percentage. Reduces incoming ${name} damage by this much.`,
+        },
+      ];
+    }),
+  ),
+};
+
+export const REGULAR_STATS = ['maxHealth', 'maxArmor', 'damage'];
+
+export const LUCKY_STATS = [
+  'criticalChance',
+  'criticalDamage',
+  'blockChance',
+  'dodgeChance',
+  'hitChance',
+  'magicChance',
+];
+
+export const MODIFIER_STATS = [...REGULAR_STATS, 'tolerance'];
+
+export const OTHER_STATS = ['armorPenetration', 'provocation'];
+
+// Canonical display order for every stat list (tooltips, vendor table, brawler
+// sheet). Anything not listed sorts to the bottom, so new stats just append.
+export const STAT_ORDER = [
+  ...REGULAR_STATS,
+  ...LUCKY_STATS,
+  'tolerance',
+  'dot',
+  'bleeding',
+  'venom',
+  'immobilize',
+  'stunned',
+  'weave',
+  'debuff',
+  'vulnerable',
+  ...OTHER_STATS,
+  'nature',
+  'earth',
+  'lightning',
+  'frost',
+  'fire',
+];
+
+// Hand-authored exchange rates so non-core stats can compete on one scale:
+// score = (value − baseline) / step, where 1% crit ≈ 10% crit damage ≈
+// 20% hit ≈ 1 armor penetration ≈ 4 limit/resistance/provocation points.
+const BEST_STAT_SCALES = {
+  hitChance: { baseline: 1, step: 0.2 },
+  criticalChance: { baseline: 0.05, step: 0.01 },
+  criticalDamage: { baseline: 0.5, step: 0.1 },
+  dodgeChance: { baseline: 0.05, step: 0.01 },
+  blockChance: { baseline: 0, step: 0.01 },
+  magicChance: { baseline: 0, step: 0.01 },
+  armorPenetration: { baseline: 0, step: 1 },
+  provocation: { baseline: 5, step: 4 },
+};
+
+// Spec-point pricing for every priceable stat (README "Combat stats budget" +
+// the BEST_STAT_SCALES exchange rates): one step of a stat = one power point.
+const POWER_SCALES = {
+  maxHealth: { baseline: 0, step: 4 },
+  maxArmor: { baseline: 0, step: 1 },
+  damage: { baseline: 0, step: 2 },
+  magicChance: { baseline: 0, step: 0.01 },
+  ...BEST_STAT_SCALES,
+};
+const MODIFIER_POWER_STEPS = { maxHealth: 0.15, maxArmor: 0.1, damage: 0.25, tolerance: 0.17 };
+const TOLERANCE_STEP = 4;
+const RESISTANCE_STEP = 4;
+
+// Total power of a stat sheet in spec points. Character sheets carry absolute
+// values (baselines subtracted: a default 5% crit is 0 points); equipment
+// carries additive bonuses, so `additive` prices every value from zero.
+export const totalPower = (combatStats = {}, { additive = false } = {}) => {
+  let total = 0;
+  for (const [key, { baseline, step }] of Object.entries(POWER_SCALES)) {
+    const from = additive ? 0 : baseline;
+    total += ((combatStats[key] ?? from) - from) / step;
+  }
+  // Tolerance: category keys carry the baseline floor (a default category is 0
+  // points), child keys price from zero. Equipment (additive) prices everything
+  // from zero.
+  for (const [key, value] of Object.entries(combatStats.tolerance || {})) {
+    const baseline =
+      !additive && TOLERANCE_CATEGORY_KEYS.includes(key) ? DEFAULT_TOLERANCE_BASELINE : 0;
+    total += ((value ?? 0) - baseline) / TOLERANCE_STEP;
+  }
+  for (const value of Object.values(combatStats.resistances || {})) {
+    total += (value || 0) / RESISTANCE_STEP;
+  }
+  for (const [key, value] of Object.entries(combatStats.modifiers || {})) {
+    if (MODIFIER_POWER_STEPS[key] && value) total += value / MODIFIER_POWER_STEPS[key];
+  }
+  return Math.round(total * 10) / 10;
+};
+
+// Core stats (Health/Armor/Damage) earn a Specialization only when an enemy is authored
+// ABOVE the default starting line — bestCombatStat is fed the BASE sheet (pre level-scaling),
+// so the shared scaling curve, which lifts all three every level, can never win on its own.
+const CORE_STAT_SCALES = {
+  maxHealth: { baseline: 24, step: 4 },
+  maxArmor: { baseline: 0, step: 1 },
+  damage: { baseline: 8, step: 2 },
+};
+
+export const bestCombatStat = (combatStats) => {
+  const candidates = [
+    ...Object.entries({ ...CORE_STAT_SCALES, ...BEST_STAT_SCALES }).map(
+      ([key, { baseline, step }]) => ({
+        icon: key,
+        label: STAT_LABELS[key],
+        kind: 'flat',
+        key,
+        score: ((combatStats[key] || 0) - baseline) / step,
+      }),
+    ),
+    ...TOLERANCE_CATEGORY_KEYS.map((cat) => ({
+      icon: TOLERANCE_CATEGORIES[cat].icon,
+      label: TOLERANCE_CATEGORIES[cat].name,
+      kind: 'tolerance',
+      key: cat,
+      score: ((combatStats.tolerance?.[cat] || 0) - DEFAULT_TOLERANCE_BASELINE) / TOLERANCE_STEP,
+    })),
+    ...TOLERANCE_CHILD_KEYS.map((child) => ({
+      icon: TOLERANCE_CHILDREN[child].icon,
+      label: TOLERANCE_CHILDREN[child].name,
+      kind: 'tolerance',
+      key: child,
+      score:
+        (effectiveTolerance(combatStats.tolerance, child) - DEFAULT_TOLERANCE_BASELINE) /
+        TOLERANCE_STEP,
+    })),
+    ...ELEMENT_KEYS.map((key) => ({
+      icon: key,
+      label: `${ALL_ELEMENTS[key].name} resistance`,
+      kind: 'resistance',
+      key,
+      score: (combatStats.resistances?.[key] || 0) / 4,
+    })),
+  ];
+
+  return (
+    candidates
+      .filter((c) => c.score > 0)
+      .sort(
+        (a, b) => b.score - a.score || STAT_ORDER.indexOf(a.icon) - STAT_ORDER.indexOf(b.icon),
+      )[0] || null
+  );
+};
+
+// Multiply whichever stat a bestCombatStat() result points at by `factor`, in place —
+// kind/key locate the value across the flat, resistance, and tolerance buckets. Lets a
+// boss lean harder into its specialization without that stat being known ahead of time.
+export const scaleCombatStat = (combatStats, best, factor) => {
+  if (!best) return;
+  const bucket =
+    best.kind === 'resistance'
+      ? combatStats.resistances
+      : best.kind === 'tolerance'
+        ? combatStats.tolerance
+        : combatStats;
+  if (!bucket) return;
+  // Keep whole-number stats (health/armor/damage/resistance/tolerance) whole; let
+  // fractional lucky stats (crit/dodge chances) stay fractional.
+  const value = bucket[best.key] || 0;
+  bucket[best.key] = Number.isInteger(value) ? Math.round(value * factor) : value * factor;
+};
diff --git a/js/constants/STATUS_EFFECTS.js b/js/constants/STATUS_EFFECTS.js
new file mode 100644
index 00000000..d333aa57
--- /dev/null
+++ b/js/constants/STATUS_EFFECTS.js
@@ -0,0 +1,344 @@
+const STATUS_EFFECTS = {
+  bleeding: {
+    kind: 'effect',
+    category: 'debuff',
+    basic: true,
+    name: 'Bleeding',
+    description: 'Takes damage each tick until the bleed expires.',
+    singleWord: 'bleed',
+    icon: 'bleeding',
+    text: 'BLEEDING',
+    animation: 'animate-bounce',
+  },
+  poisoned: {
+    kind: 'effect',
+    category: 'debuff',
+    basic: true,
+    name: 'Poisoned',
+    description: 'Takes damage each tick until the poison expires.',
+    singleWord: 'poison',
+    icon: 'venom',
+    text: 'POISONED',
+    animation: 'animate-bounce',
+  },
+  stunned: {
+    kind: 'effect',
+    category: 'debuff',
+    basic: true,
+    name: 'Stunned',
+    description: 'Cannot act for the duration.',
+    singleWord: 'stun',
+    icon: 'stunned',
+    text: 'STUNNED',
+    animation: 'animate-spin',
+  },
+  confused: {
+    kind: 'effect',
+    category: 'debuff',
+    basic: true,
+    name: 'Confused',
+    description: 'Cannot act for the duration.',
+    singleWord: 'confuse',
+    icon: 'confused',
+    text: 'CONFUSED',
+    animation: 'animate-spin',
+  },
+  vulnerable: {
+    kind: 'effect',
+    category: 'debuff',
+    basic: true,
+    name: 'Vulnerable',
+    description: 'Takes 50% more damage.',
+    singleWord: 'vulnerable',
+    icon: 'vulnerable',
+    text: 'VULNERABLE',
+    animation: 'animate-pulse',
+    damageMultiplierIncoming: 0.5,
+  },
+  intimidated: {
+    kind: 'effect',
+    category: 'debuff',
+    name: 'Intimidated',
+    description: 'Bone-shaken by a roar. Takes 50% more damage.',
+    singleWord: 'intimidated',
+    icon: 'intimidatingRoar',
+    text: 'INTIMIDATED',
+    animation: 'animate-pulse',
+    damageMultiplierIncoming: 0.5,
+  },
+  stoneskinned: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Stoneskinned',
+    description: 'Skin hardened to stone. Takes 50% less damage.',
+    singleWord: 'stoneskin',
+    icon: 'stoneSkin',
+    text: 'STONESKIN',
+    animation: 'animate-pulse',
+    damageMultiplierIncoming: -0.5,
+  },
+  warded: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Warded',
+    description: 'Braced behind a wall of ice. Takes 30% less damage.',
+    singleWord: 'warded',
+    icon: 'block',
+    text: 'WARDED',
+    animation: 'animate-pulse',
+    damageMultiplierIncoming: -0.3,
+  },
+  inspired: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Inspired',
+    description: 'Rallied by a warcry. Deals 20% more damage.',
+    singleWord: 'inspired',
+    icon: 'warCry',
+    text: 'INSPIRED',
+    animation: 'animate-pulse',
+    damageMultiplierOutgoing: 0.2,
+  },
+  adrenalized: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Adrenalized',
+    description: 'Adrenaline surging. Takes 30% less damage.',
+    singleWord: 'adrenalized',
+    icon: 'adrenaline',
+    text: 'ADRENALIZED',
+    animation: 'animate-pulse',
+    damageMultiplierIncoming: -0.3,
+  },
+  uninterruptable: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Uninterruptable',
+    description: 'Cannot be immobilized while casting.',
+    singleWord: 'uninterruptable',
+    icon: 'uninterruptable',
+    text: 'UNINTERRUPTABLE',
+    animation: 'animate-pulse',
+  },
+  unstoppable: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Unstoppable',
+    description: "This attack can't be blocked or dodged.",
+    singleWord: 'unstoppable',
+    icon: 'unstoppable',
+    text: 'UNSTOPPABLE',
+    animation: 'animate-pulse',
+  },
+  obscured: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Obscured',
+    description: 'Concealed by smoke. Attackers are 40% less likely to hit.',
+    singleWord: 'obscured',
+    icon: 'smokeBomb',
+    text: 'OBSCURED',
+    animation: 'animate-pulse',
+    hitChanceModifierIncoming: -0.4,
+  },
+  dazed: {
+    kind: 'effect',
+    category: 'debuff',
+    name: 'Dazed',
+    description: 'Head still ringing — 40% less likely to land an attack.',
+    singleWord: 'dazed',
+    icon: 'dazingBlow',
+    text: 'DAZED',
+    animation: 'animate-pulse',
+    hitChanceModifierOutgoing: -0.4,
+  },
+  riposting: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Riposte',
+    description: 'Poised to counter — a dodged attack strikes back for half its damage.',
+    singleWord: 'riposting',
+    icon: 'riposte',
+    text: 'RIPOSTE',
+    animation: 'animate-pulse',
+    trigger: { on: 'dodge', returnDamage: 1 },
+  },
+  deflecting: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Deflect',
+    description: 'Braced behind the shield — a blocked attack strikes back for its full damage.',
+    singleWord: 'deflecting',
+    icon: 'deflect',
+    text: 'DEFLECT',
+    animation: 'animate-pulse',
+    trigger: { on: 'block', returnDamage: 1 },
+  },
+  thorns: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Thorns',
+    description:
+      'Bristling with spikes — every attack against you, whether it lands or is blocked, returns 25% of its damage to the attacker.',
+    singleWord: 'thorns',
+    icon: 'spikeWall',
+    text: 'THORNS',
+    animation: 'animate-pulse',
+    trigger: { on: ['damaged', 'block'], returnDamage: 0.25 },
+  },
+  splitting: {
+    kind: 'effect',
+    category: 'buff',
+    name: 'Double Persona',
+    description:
+      'Mid-act and two-faced — every blow that lands conjures a fragile double to take it.',
+    singleWord: 'splitting',
+    icon: 'doublePersona',
+    text: 'TWO-FACED',
+    animation: 'animate-pulse',
+    trigger: { on: 'damaged' },
+  },
+  wounded: {
+    kind: 'threshold',
+    category: 'debuff',
+    name: 'Wounded',
+    description:
+      'Accumulates with each wounding hit. Converts to Bleeding when the threshold fills.',
+    singleWord: 'wound',
+    icon: 'wounded',
+    text: 'WOUNDED',
+    convertsInto: 'bleeding',
+    convertAmount: 4,
+    animation: 'animate-pulse',
+  },
+  envenomed: {
+    kind: 'threshold',
+    category: 'debuff',
+    name: 'Envenomed',
+    description:
+      'Accumulates with each venomous hit. Converts to Poisoned when the threshold fills.',
+    singleWord: 'venom',
+    icon: 'poisonousSting',
+    text: 'ENVENOMED',
+    convertsInto: 'poisoned',
+    convertAmount: 4,
+    animation: 'animate-pulse',
+  },
+  concussed: {
+    kind: 'threshold',
+    category: 'debuff',
+    name: 'Concussed',
+    description:
+      'Accumulates with each concussive hit. Converts to Stunned when the threshold fills.',
+    singleWord: 'concussion',
+    icon: 'concussed',
+    text: 'CONCUSSED',
+    convertsInto: 'stunned',
+    convertAmount: 3,
+    animation: 'animate-pulse',
+  },
+  exposed: {
+    kind: 'threshold',
+    category: 'debuff',
+    name: 'Exposed',
+    description:
+      'Accumulates with each exposing hit. Converts to Vulnerable when the threshold fills.',
+    singleWord: 'exposed',
+    icon: 'exposed',
+    text: 'EXPOSED',
+    convertsInto: 'vulnerable',
+    convertAmount: 4,
+    animation: 'animate-pulse',
+  },
+  cocooned: {
+    kind: 'effect',
+    category: 'debuff',
+    basic: false,
+    name: 'Cocooned',
+    description: 'Wrapped in silk. Cannot act for the duration.',
+    singleWord: 'cocoon',
+    icon: 'weave',
+    text: 'COCOONED',
+    animation: 'animate-pulse',
+  },
+  webbed: {
+    kind: 'threshold',
+    category: 'debuff',
+    name: 'Webbed',
+    description:
+      'Accumulates with each webbing hit. Converts to Cocooned when the threshold fills.',
+    singleWord: 'web',
+    icon: 'weave',
+    text: 'WEBBED',
+    convertsInto: 'cocooned',
+    convertAmount: 3,
+    animation: 'animate-pulse',
+  },
+  endGame: {
+    kind: 'effect',
+    category: 'debuff',
+    permanent: true,
+    name: 'End game',
+    description:
+      'The fight has dragged on too long — every combatant loses health each tick until it ends.',
+    singleWord: 'endgame',
+    icon: 'endGame',
+    text: 'END GAME',
+    animation: 'animate-pulse',
+  },
+};
+
+export default STATUS_EFFECTS;
+
+// Enum of status keys, so abilities reference statuses as STATUS_EFFECT.vulnerable
+// (in their statusEffects tuples) instead of bare strings. Stays in sync with the
+// definitions above.
+export const STATUS_EFFECT = Object.freeze(
+  Object.fromEntries(Object.keys(STATUS_EFFECTS).map((key) => [key, key])),
+);
+
+// Display order on combatant cards: buffs on top, debuffs below.
+// Reorder lines to change the order; unlisted statuses append at the bottom.
+export const STATUS_DISPLAY_ORDER = [
+  'uninterruptable',
+  'unstoppable',
+  'inspired',
+  'riposting',
+  'deflecting',
+  'thorns',
+  'splitting',
+  'adrenalized',
+  'stoneskinned',
+  'warded',
+  'obscured',
+  'dazed',
+  'intimidated',
+  'stunned',
+  'confused',
+  'concussed',
+  'cocooned',
+  'webbed',
+  'bleeding',
+  'poisoned',
+  'wounded',
+  'envenomed',
+  'vulnerable',
+  'exposed',
+  'endGame',
+];
+
+export const STATUS_ORDER = [
+  ...STATUS_DISPLAY_ORDER,
+  ...Object.keys(STATUS_EFFECTS).filter((k) => !STATUS_DISPLAY_ORDER.includes(k)),
+];
+
+// Standalone statuses sit outside the threshold→effect pipelines (no
+// convertsInto, not a conversion target) — the only ones skinned by the
+// element of the ability that applied them.
+const convertTargets = new Set(
+  Object.values(STATUS_EFFECTS)
+    .map((d) => d.convertsInto)
+    .filter(Boolean),
+);
+export const isStandaloneStatus = (key) =>
+  STATUS_EFFECTS[key].kind === 'effect' && !convertTargets.has(key);
diff --git a/js/constants/TOLERANCE.js b/js/constants/TOLERANCE.js
new file mode 100644
index 00000000..6d04f55e
--- /dev/null
+++ b/js/constants/TOLERANCE.js
@@ -0,0 +1,46 @@
+// Tolerance — a brawler's resistance to status debuffs, the counterpart to the
+// elemental `resistances`. Three top categories each contribute their value to
+// every child debuff; a child can stack more on top. Effective child tolerance =
+// category value + child value (more buildup needed before the debuff lands).
+export const TOLERANCE_CATEGORIES = {
+  dot: { name: 'Damage over time', icon: 'dot', children: ['bleeding', 'poisoned'] },
+  immobilize: { name: 'Immobilize', icon: 'immobilize', children: ['stunned', 'cocooned'] },
+  debuff: { name: 'Debuff', icon: 'debuff', children: ['vulnerable'] },
+};
+
+// Per-child display: which status icon/label to show and the threshold status
+// (the buildup that converts into it) that combat seeds from this child's tolerance.
+export const TOLERANCE_CHILDREN = {
+  bleeding: { name: 'Bleeding', icon: 'bleeding', threshold: 'wounded' },
+  poisoned: { name: 'Poisoned', icon: 'venom', threshold: 'envenomed' },
+  stunned: { name: 'Stunned', icon: 'stunned', threshold: 'concussed' },
+  cocooned: { name: 'Cocooned', icon: 'weave', threshold: 'webbed' },
+  vulnerable: { name: 'Vulnerable', icon: 'vulnerable', threshold: 'exposed' },
+};
+
+export const TOLERANCE_CATEGORY_KEYS = Object.keys(TOLERANCE_CATEGORIES);
+export const TOLERANCE_CHILD_KEYS = Object.keys(TOLERANCE_CHILDREN);
+
+export const TOLERANCE_CATEGORY_OF = Object.fromEntries(
+  Object.entries(TOLERANCE_CATEGORIES).flatMap(([cat, { children }]) =>
+    children.map((child) => [child, cat]),
+  ),
+);
+
+// child debuff key keyed by its threshold status (e.g. wounded → bleeding), so
+// combat seeding can resolve a threshold's max from the right tolerance child.
+export const TOLERANCE_CHILD_BY_THRESHOLD = Object.fromEntries(
+  Object.entries(TOLERANCE_CHILDREN).map(([child, { threshold }]) => [threshold, child]),
+);
+
+export const DEFAULT_TOLERANCE_BASELINE = 8;
+
+// Categories carry the baseline (so every child starts at 8 effective); children
+// start at 0 and only raise their own debuff above the category floor.
+export const DEFAULT_TOLERANCE = {
+  ...Object.fromEntries(TOLERANCE_CATEGORY_KEYS.map((key) => [key, DEFAULT_TOLERANCE_BASELINE])),
+  ...Object.fromEntries(TOLERANCE_CHILD_KEYS.map((key) => [key, 0])),
+};
+
+export const effectiveTolerance = (tolerance = {}, child) =>
+  (tolerance[TOLERANCE_CATEGORY_OF[child]] || 0) + (tolerance[child] || 0);
diff --git a/js/constants/TRINKET_TYPES.js b/js/constants/TRINKET_TYPES.js
new file mode 100644
index 00000000..19891a6a
--- /dev/null
+++ b/js/constants/TRINKET_TYPES.js
@@ -0,0 +1,5 @@
+export const TRINKET_TYPES = {
+  relic: { name: 'relic', races: [] },
+};
+
+export default TRINKET_TYPES;
diff --git a/js/constants/VFX.js b/js/constants/VFX.js
new file mode 100644
index 00000000..32a1bdb9
--- /dev/null
+++ b/js/constants/VFX.js
@@ -0,0 +1,25 @@
+export default {
+  basicAttackFast: { vfxName: 'basicAttackFast', duration: 1000 },
+  basicAttackRegular: { vfxName: 'basicAttackRegular', duration: 1500 },
+  basicAttackSlow: { vfxName: 'basicAttackSlow', duration: 2000 },
+  pounce: { vfxName: 'pounce', duration: 2400 },
+  boom: { vfxName: 'boom', duration: 2400 },
+  block: { vfxName: 'block', duration: 2250 },
+  kick: { vfxName: 'kick', duration: 500 },
+  whirlwind: { vfxName: 'whirlwind', duration: 500 },
+  stomp: { vfxName: 'stomp', duration: 2400 },
+  catchThrow: { vfxName: 'catchThrow', duration: 1600 },
+  hatch: { vfxName: 'hatch', duration: 6000 },
+  hurt: { vfxName: 'hurt', duration: 500 },
+  armorHurt: { vfxName: 'armorHurt', duration: 500 },
+  attackBlocked: { vfxName: 'attackBlocked', duration: 340 },
+  attackDodged: { vfxName: 'attackDodged', duration: 340 },
+  attackMissed: { vfxName: 'attackMissed', duration: 340 },
+  heal: { vfxName: 'heal', duration: 500 },
+  fullHealth: { vfxName: 'fullHealth', duration: 500 },
+  mend: { vfxName: 'mend', duration: 500 },
+  abilityCharge: { vfxName: 'abilityCharge', duration: 600 },
+  abilityRelease: { vfxName: 'abilityRelease', duration: 250 },
+  abilityRecover: { vfxName: 'abilityRecover', duration: 600 },
+  filler: { vfxName: 'filler', duration: 500 },
+};
diff --git a/js/constants/WEAPON_TYPES.js b/js/constants/WEAPON_TYPES.js
new file mode 100644
index 00000000..885dac63
--- /dev/null
+++ b/js/constants/WEAPON_TYPES.js
@@ -0,0 +1,13 @@
+export const WEAPON_TYPES = {
+  sword: { name: 'sword', races: ['human', 'elf', 'goblin'] },
+  axe: { name: 'axe', races: ['human', 'dwarf'] },
+  mace: { name: 'hammer', races: ['troll', 'dwarf', 'human'] },
+  club: { name: 'club', races: ['troll'] },
+  flail: { name: 'flail', races: ['troll', 'dwarf', 'human'] },
+  spear: { name: 'spear', races: ['elf', 'goblin', 'human'] },
+  dagger: { name: 'dagger', races: ['elf', 'human', 'goblin'] },
+  bow: { name: 'bow', races: ['elf', 'human'] },
+  shield: { name: 'shield', races: ['dwarf', 'human'] },
+};
+
+export default WEAPON_TYPES;
diff --git a/js/customEvent.js b/js/customEvent.js
new file mode 100644
index 00000000..398ec992
--- /dev/null
+++ b/js/customEvent.js
@@ -0,0 +1 @@
+export default (event, detail) => document.dispatchEvent(new CustomEvent(event, { detail }));
diff --git a/js/dialog.js b/js/dialog.js
new file mode 100644
index 00000000..6727ad20
--- /dev/null
+++ b/js/dialog.js
@@ -0,0 +1,3 @@
+export const confirmWithDialog = (text, confirm) => {
+  $.overlay = { name: 'confirm', text, confirm };
+};
diff --git a/js/diff.js b/js/diff.js
new file mode 100644
index 00000000..86d62054
--- /dev/null
+++ b/js/diff.js
@@ -0,0 +1,37 @@
+// Granular game-state save. Rather than shipping the whole game state on every change,
+// dirty() diffs the current snapshot against the last one the server acknowledged and
+// sends only what moved: plain objects recurse into dot-paths (a single stat tick is a
+// tiny write), arrays (inventory, characters) stay atomic — re-sent whole when touched.
+// To fall back to full-blob saves, drop the one buildDiffPayload() wrapper in
+// connectSocket.js; the server treats a payload with no `update` as a full snapshot.
+
+const equal = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+const isPlainObject = (v) => v !== null && typeof v === 'object' && !Array.isArray(v);
+
+export const dirty = (prev = {}, next = {}) =>
+  Object.entries(next).reduce((acc, [key, value]) => {
+    if (isPlainObject(value) && Object.keys(value).length) {
+      const sub = dirty(prev?.[key], value);
+      if (Object.keys(sub).length) acc[key] = sub;
+    } else if (!equal(prev?.[key], value)) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+
+// token + timeOffset always ride along (the server needs them every save to find the
+// user and route the season); the rest is the diffable game state.
+const stateOf = ({ token, timeOffset, ...state }) => state;
+
+let lastSaved = {};
+
+// Seed on load so the first save isn't a redundant full write; commit after each
+// acknowledged save so the next diff is against what the server now holds.
+export const setSaveBaseline = (snapshot) => (lastSaved = stateOf(snapshot));
+
+export const buildDiffPayload = (snapshot) => ({
+  token: snapshot.token,
+  timeOffset: snapshot.timeOffset,
+  update: dirty(lastSaved, stateOf(snapshot)),
+});
diff --git a/js/dnd.js b/js/dnd.js
new file mode 100644
index 00000000..9f7026c4
--- /dev/null
+++ b/js/dnd.js
@@ -0,0 +1,680 @@
+// Custom drag-and-drop engine
+// Game-feel: snappy bezier animations, pointer events for desktop+mobile
+// FLIP technique for smooth reordering
+
+const EASE = 'cubic-bezier(0.2, 0.8, 0.2, 1)';
+const SNAP_DURATION = 180;
+const SHIFT_DURATION = 150;
+
+const zones = new Map();
+let activeZone = null;
+let dragState = null;
+
+const getItemRects = (el) => {
+  const items = [...el.children].filter((c) => !c.hasAttribute('dnd-ghost'));
+  return items.map((child) => ({
+    el: child,
+    rect: child.getBoundingClientRect(),
+  }));
+};
+
+// A zone's draggable children in document order — the source of truth for
+// mapping a DOM element to its index in the zone's data items(). Excludes the
+// hidden drag source, the ghost, the placeholder, and non-item siblings like
+// the inventory's empty-state <span>. Every consumer (drag start, insert
+// position, placeholder insertion) MUST filter identically: the empty <span>
+// sitting at child 0 was shifting every available ability's index up by one,
+// so the dragged item's ticks (the placeholder width) and the transferred
+// ability were read from the wrong slot.
+const visibleItems = (zoneEl) =>
+  [...zoneEl.children].filter(
+    (c) =>
+      c.hasAttribute('dnd-item') &&
+      c.getAttribute('dnd-item') !== 'false' &&
+      c.style.display !== 'none',
+  );
+
+const animateFLIP = (entries, duration = SHIFT_DURATION) => {
+  entries.forEach(({ el, rect: oldRect }) => {
+    const newRect = el.getBoundingClientRect();
+    // Skip elements not laid out in either state (0×0) — e.g. the empty-state
+    // text toggled by :has([dnd-placeholder]) or the hidden drag source —
+    // otherwise their bogus position would FLIP them flying across the screen.
+    if (!oldRect.width || !oldRect.height || !newRect.width || !newRect.height) return;
+    const dx = oldRect.left - newRect.left;
+    const dy = oldRect.top - newRect.top;
+    if (dx === 0 && dy === 0) return;
+
+    el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0, 0)' }], {
+      duration,
+      easing: EASE,
+      fill: 'none',
+    });
+  });
+};
+
+const getInsertIndex = (zoneEl, x, y, direction) => {
+  const children = visibleItems(zoneEl);
+  if (!children.length) return 0;
+
+  for (let i = 0; i < children.length; i++) {
+    const rect = children[i].getBoundingClientRect();
+    const mid =
+      direction === 'horizontal' ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+    const pos = direction === 'horizontal' ? x : y;
+    if (pos < mid) return i;
+  }
+  return children.length;
+};
+
+const createGhost = (sourceEl) => {
+  const ghost = sourceEl.cloneNode(true);
+  ghost.setAttribute('dnd-ghost', '');
+  ghost.style.cssText = `
+    position: fixed;
+    z-index: 1000;
+    pointer-events: none;
+    transition: transform 50ms ${EASE};
+    transform: translate(-50%, -50%);
+    box-shadow: 0 8px 24px var(--scrim-2);
+    opacity: 0.95;
+  `;
+  const rect = sourceEl.getBoundingClientRect();
+  ghost.style.width = `${rect.width}px`;
+  ghost.style.height = `${rect.height}px`;
+  document.body.appendChild(ghost);
+  return ghost;
+};
+
+const createPlaceholder = (sourceEl) => {
+  const ph = document.createElement('div');
+  ph.setAttribute('dnd-placeholder', '');
+  const rect = sourceEl.getBoundingClientRect();
+  const marginLeft = parseFloat(getComputedStyle(sourceEl).marginLeft) || 0;
+  // Occupy the source's flow advance (border-box width plus its negative
+  // overlap margin) with no margin of our own. Copying the segment's -1px
+  // overlap margin instead left the placeholder 1px short once placeholderSize
+  // set the width to the bare tick fraction, shifting the whole row 1px left.
+  ph.style.cssText = `
+    flex: none;
+    width: ${rect.width + marginLeft}px;
+    height: ${rect.height}px;
+    border: 2px dashed var(--border, var(--muted));
+    border-radius: var(--radius, 4px);
+    opacity: 0.5;
+    transition: all ${SHIFT_DURATION}ms ${EASE};
+    box-sizing: border-box;
+    pointer-events: none;
+  `;
+  return ph;
+};
+
+const positionGhost = (ghost, x, y) => {
+  ghost.style.left = `${x}px`;
+  ghost.style.top = `${y}px`;
+};
+
+// Hit-test by the actually-painted element at the point, not by bounding rects.
+// Rects ignore ancestor clipping, so a collapsed accordion's inventory (clipped
+// to 0 but still 294px tall in its own box) would otherwise overlap and steal
+// the next brawler's bar. elementFromPoint respects clipping/visibility and skips
+// the drag ghost + placeholder (both pointer-events:none).
+const findZoneUnder = (x, y) => {
+  const hit = document.elementFromPoint(x, y);
+  if (!hit) return null;
+  for (const [el, config] of zones) {
+    if (el === hit || el.contains(hit)) return { el, config };
+  }
+  return null;
+};
+
+const startDrag = (e, itemEl, zoneEl) => {
+  const config = zones.get(zoneEl);
+  if (!config) return;
+
+  const items = config.items();
+  const itemIndex = visibleItems(zoneEl).indexOf(itemEl);
+  if (itemIndex === -1) return;
+
+  window.__dndDragging = true;
+  if (typeof window.hideTooltip === 'function') window.hideTooltip();
+
+  const touch = e.touches ? e.touches[0] : e;
+  const rect = itemEl.getBoundingClientRect();
+
+  const ghost = createGhost(itemEl);
+  const placeholder = createPlaceholder(itemEl);
+
+  // Allow the source zone to mutate the ghost / stash flags. This is where
+  // BrawlerDetailContent sets `draggingBasic`, which then gates
+  // `constrainAxisY` (basics stay in the ability bar) and
+  // `dropFromOthersDisabled` (available-grid won't accept basics).
+  if (typeof config.transformDraggedElement === 'function') {
+    try {
+      config.transformDraggedElement(ghost, items[itemIndex], itemIndex);
+    } catch {}
+  }
+
+  // Preserve the offset between the cursor and the source element's center.
+  // Without this the ghost snaps to the cursor center on grab; with it, the
+  // ghost stays put under the cursor's original grab point and tracks naturally
+  // as the cursor moves. For Y-constrained drags (basic abilities) the offset
+  // keeps the ghost on the source row whether you grabbed near its top or its
+  // bottom — no second snap when dragging starts.
+  const srcCx = rect.left + rect.width / 2;
+  const srcCy = rect.top + rect.height / 2;
+  const grabOffset = { x: touch.clientX - srcCx, y: touch.clientY - srcCy };
+  positionGhost(ghost, srcCx, srcCy);
+
+  // Record positions before DOM change
+  const rects = getItemRects(zoneEl);
+
+  // Replace item with placeholder
+  itemEl.style.display = 'none';
+  zoneEl.insertBefore(placeholder, itemEl);
+
+  // FLIP animate the shift
+  animateFLIP(rects);
+
+  dragState = {
+    ghost,
+    placeholder,
+    sourceEl: itemEl,
+    sourceZone: zoneEl,
+    sourceConfig: config,
+    sourceIndex: itemIndex,
+    item: items[itemIndex],
+    sourceRect: rect,
+    grabOffset,
+    currentZone: zoneEl,
+    currentIndex: itemIndex,
+    pointerType: e.pointerType,
+  };
+
+  activeZone = { el: zoneEl, config };
+};
+
+const moveDrag = (e) => {
+  if (!dragState) return;
+  e.preventDefault();
+
+  const touch = e.touches ? e.touches[0] : e;
+  const { ghost, placeholder, sourceRect, sourceConfig, grabOffset } = dragState;
+
+  // When the source zone says "lock Y" (e.g. basic abilities can't leave the
+  // ability bar), pin the ghost's Y to the source row so the cursor can only
+  // slide horizontally along the source row. Otherwise preserve the grab
+  // offset so the cursor stays at the same point on the ghost.
+  // Desktop drags are reorder-only: every bar ability is locked to the x-axis so
+  // it can't be pulled out of the bar (removal there is the × button). Touch keeps
+  // the original rule — only basic abilities are Y-locked.
+  const constrainY =
+    dragState.pointerType !== 'touch'
+      ? true
+      : typeof sourceConfig.constrainAxisY === 'function'
+        ? !!sourceConfig.constrainAxisY()
+        : !!sourceConfig.constrainAxisY;
+  let effX = touch.clientX - grabOffset.x;
+  const effY = constrainY ? sourceRect.top + sourceRect.height / 2 : touch.clientY - grabOffset.y;
+
+  // X-locked drags (the ability bar) keep the ghost inside the bar so it can't fly
+  // out the sides. Two separate clamps:
+  //  - effX (drop logic) is clamped only to the bar's inner bounds, so pushing all
+  //    the way left still resolves to index 0 and the first ability makes room.
+  //  - ghostX (visuals) is clamped by the ghost's half-width so its edge sticks to
+  //    the bar boundary instead of escaping.
+  let ghostX = effX;
+  if (constrainY) {
+    const barRect = dragState.sourceZone.getBoundingClientRect();
+    effX = Math.max(barRect.left + 1, Math.min(barRect.right - 1, effX));
+    const half = ghost.offsetWidth / 2;
+    ghostX = Math.max(barRect.left + half, Math.min(barRect.right - half, effX));
+  }
+
+  positionGhost(ghost, ghostX, effY);
+
+  // Find which zone we're over using the constrained position
+  const zoneUnder = findZoneUnder(effX, effY);
+
+  // Only zones sharing a `type` exchange items — a brawler's bar and its
+  // available grid carry the same type, so abilities move between them but
+  // never cross into another brawler's zones on the same page.
+  if (zoneUnder && zoneUnder.config.type === sourceConfig.type) {
+    // Target zone can refuse drops from other zones (e.g. the available-
+    // abilities grid refuses basics being dragged from the ability bar).
+    if (zoneUnder.el !== dragState.sourceZone) {
+      const refuse =
+        typeof zoneUnder.config.dropFromOthersDisabled === 'function'
+          ? !!zoneUnder.config.dropFromOthersDisabled()
+          : !!zoneUnder.config.dropFromOthersDisabled;
+      if (refuse) return;
+    }
+
+    const targetZone = zoneUnder.el;
+    const direction = zoneUnder.config.direction || 'horizontal';
+    const rawIndex = getInsertIndex(targetZone, effX, effY, direction);
+
+    // When the ghost's effective position is inside the source's ORIGINAL
+    // bounds, force the placeholder to the source slot. Without this,
+    // neighbors that shifted to fill the gap put their midpoints right
+    // where the source used to be, so the user can never just hover over
+    // the original location and have items reflow around the drop.
+    const srcRect = dragState.sourceRect;
+    const inSourceBounds =
+      targetZone === dragState.sourceZone &&
+      effX >= srcRect.left &&
+      effX <= srcRect.right &&
+      effY >= srcRect.top &&
+      effY <= srcRect.bottom;
+    const newIndex = inSourceBounds ? dragState.sourceIndex : rawIndex;
+
+    // Move placeholder to target zone if needed
+    if (targetZone !== dragState.currentZone || newIndex !== dragState.currentIndex) {
+      const rects = getItemRects(targetZone);
+
+      // When the placeholder leaves a *different* zone, capture that zone's
+      // items (minus the placeholder itself) so the hole it held animates
+      // closed instead of snapping shut when the placeholder is pulled out.
+      const oldZone = dragState.currentZone;
+      const oldRects =
+        oldZone && oldZone !== targetZone
+          ? getItemRects(oldZone).filter(({ el }) => el !== placeholder)
+          : null;
+
+      // Size the placeholder to the item's footprint in this zone (an ability
+      // is a square in the available grid but spans tick-cells on the bar).
+      // The placeholder's `transition: all` animates the size change.
+      const phSize = zoneUnder.config.placeholderSize?.(dragState.item);
+      if (phSize) {
+        placeholder.style.width = phSize.width;
+        placeholder.style.height = phSize.height;
+      }
+
+      // Remove placeholder from current zone
+      if (dragState.placeholder.parentNode) {
+        dragState.placeholder.parentNode.removeChild(dragState.placeholder);
+      }
+
+      // Insert in new position
+      const visibleChildren = visibleItems(targetZone);
+
+      if (newIndex >= visibleChildren.length) {
+        targetZone.appendChild(placeholder);
+      } else {
+        targetZone.insertBefore(placeholder, visibleChildren[newIndex]);
+      }
+
+      animateFLIP(rects);
+      if (oldRects) animateFLIP(oldRects);
+
+      dragState.currentZone = targetZone;
+      dragState.currentIndex = newIndex;
+    }
+  }
+};
+
+const endDrag = () => {
+  if (!dragState) return;
+
+  const current = dragState;
+  const {
+    ghost,
+    placeholder,
+    sourceEl,
+    sourceZone,
+    sourceConfig,
+    sourceIndex,
+    item,
+    currentZone,
+    currentIndex,
+  } = current;
+
+  // Snap ghost center to placeholder center
+  const phRect = placeholder.getBoundingClientRect();
+  ghost.style.transition = `all ${SNAP_DURATION}ms ${EASE}`;
+  ghost.style.left = `${phRect.left + phRect.width / 2}px`;
+  ghost.style.top = `${phRect.top + phRect.height / 2}px`;
+  ghost.style.transform = 'translate(-50%, -50%)';
+  ghost.style.boxShadow = '0 2px 8px var(--scrim-1)';
+
+  setTimeout(() => {
+    // Clean up DOM
+    ghost.remove();
+    placeholder.remove();
+    sourceEl.style.display = '';
+
+    const targetConfig = zones.get(currentZone);
+
+    if (currentZone === sourceZone) {
+      // Reorder within same zone
+      if (currentIndex !== sourceIndex && targetConfig?.onReorder) {
+        const items = [...sourceConfig.items()];
+        const [moved] = items.splice(sourceIndex, 1);
+        items.splice(currentIndex, 0, moved);
+        targetConfig.onReorder(items);
+      }
+    } else if (targetConfig) {
+      // Transfer between zones
+      if (sourceConfig.onSend) sourceConfig.onSend(item, currentZone);
+      if (targetConfig.onReceive) targetConfig.onReceive(item, sourceZone, currentIndex);
+    }
+
+    // Only release the shared drag state if a newer drag hasn't taken over.
+    // Spam-clicking can start a fresh drag during this snap delay; nulling
+    // dragState unconditionally would strand that drag's source element hidden
+    // (its endDrag bails on the null check) — the "freeze in place" bug.
+    if (dragState === current) {
+      dragState = null;
+      activeZone = null;
+      window.__dndDragging = false;
+    }
+  }, SNAP_DURATION);
+};
+
+const handlePointerDown = (e) => {
+  // The × remove-button lives inside a draggable bar segment; pressing it must
+  // never start a drag — let its click through.
+  if (e.target.closest('ability-remove')) return;
+
+  const itemEl = e.target.closest('[dnd-item]:not([dnd-item="false"])');
+  if (!itemEl) return;
+  const zoneEl = itemEl.closest('[dnd-zone]');
+  if (!zoneEl || !zones.has(zoneEl)) return;
+  const config = zones.get(zoneEl);
+
+  // Desktop (mouse/pen): Available abilities are click-to-add, not draggable.
+  // Pressing previews the ability growing into the paired bar and commits on
+  // release (native-button semantics). Touch falls through to drag below.
+  if (e.pointerType !== 'touch' && config.role === 'available') {
+    startPressAdd(e, itemEl, zoneEl, config);
+    return;
+  }
+
+  // Long press on mobile, immediate on desktop
+  if (e.pointerType === 'touch') {
+    const timer = setTimeout(() => {
+      startDrag(e, itemEl, zoneEl);
+      bindMoveEnd();
+    }, 200);
+
+    const cancel = () => {
+      clearTimeout(timer);
+      document.removeEventListener('pointermove', cancel);
+      document.removeEventListener('pointerup', cancel);
+    };
+    document.addEventListener('pointermove', cancel, { once: true });
+    document.addEventListener('pointerup', cancel, { once: true });
+  } else {
+    e.preventDefault();
+    startDrag(e, itemEl, zoneEl);
+    bindMoveEnd();
+  }
+};
+
+const bindMoveEnd = () => {
+  document.addEventListener('pointermove', moveDrag);
+  document.addEventListener(
+    'pointerup',
+    () => {
+      endDrag();
+      document.removeEventListener('pointermove', moveDrag);
+    },
+    { once: true },
+  );
+};
+
+// Shared across ability-bar and available-grid zones so a basic dragged out of
+// the bar both stays on its row (constrainAxisY) and is refused by the grid
+// (dropFromOthersDisabled).
+let draggingBasic = false;
+
+// An ability's footprint on a specific bar overlay: width scales with its
+// ticks across that bar's tick-cell grid, height is the bar's height. Single
+// source of truth for both the dragged ghost's morph and the drop
+// placeholder's size. Measured against the passed overlay rather than a global
+// query — a fight page shows several bars of differing widths, so the document's
+// first overlay is the wrong one to size against.
+const abilitySegmentSize = (overlay, ticks) => {
+  if (!overlay || !ticks) return null;
+  const cells = parseInt(getComputedStyle(overlay).getPropertyValue('--grid-cells')) || 15;
+  return { width: (overlay.clientWidth / cells) * ticks, height: overlay.clientHeight };
+};
+
+// The bar overlay paired with a zone type. An available grid and its bar share
+// a `type`; the bar is the horizontal one. Lets the ghost morph to the bar it
+// will actually land in, even before a target zone is entered.
+const barOverlayForType = (type) => {
+  for (const [el, config] of zones) {
+    // Skip detached overlays: a consumer that re-registers zones without
+    // unregistering removed ones leaves stale entries that share a type with the
+    // live overlay. A stale (0-width) bar would morph the dragged ghost to
+    // nothing — so only ever match an overlay still in the document.
+    if (el.isConnected && config.type === type && config.direction === 'horizontal') return el;
+  }
+  return null;
+};
+
+const zoneForTypeRole = (type, role) => {
+  for (const [el, config] of zones) {
+    if (el.isConnected && config.type === type && config.role === role) return { el, config };
+  }
+  return null;
+};
+
+// --- Desktop click-to-add ---------------------------------------------------
+// On desktop the Available grid isn't draggable. Pressing an ability previews it
+// growing into the paired bar at index 0 and commits on release; leaving the
+// source before release cancels (native-button semantics). Routed through the
+// same zone `onReceive` the touch drag uses, so every consumer gets it for free.
+
+const createBarPreview = (overlay, item, sourceCell) => {
+  const size = abilitySegmentSize(overlay, item?.ticks);
+  const seg = document.createElement('ability-segment');
+  seg.setAttribute('dnd-preview', '');
+  seg.setAttribute('relative', '');
+  seg.setAttribute('flex', '');
+  seg.setAttribute('f', 'none');
+  (item?.elements || []).forEach((e) => seg.setAttribute(e, ''));
+  // Hybrid (multi-element) abilities paint as a spectrum — mirror the bindings
+  // the live AbilityBar segment carries so the grow-in preview matches the
+  // committed tile instead of falling back to a single element's hue.
+  if ((item?.elements?.length || 0) > 1) {
+    seg.setAttribute('multi', '');
+    seg.style.setProperty('--spectrum-face', window.elementSpectrum(item.elements, 'face'));
+    seg.style.setProperty('--spectrum-glyph', window.elementSpectrum(item.elements, 'glyph'));
+  }
+  seg.style.setProperty('--seg-ticks', item?.ticks || 1);
+  seg.style.flex = 'none';
+  seg.style.overflow = 'hidden';
+  seg.style.pointerEvents = 'none';
+  seg.style.width = '0px';
+  seg.style.transition = `width ${SHIFT_DURATION}ms ${EASE}`;
+
+  const stack = document.createElement('stack');
+  stack.setAttribute('ability-icon', '');
+  stack.setAttribute('relative', '');
+  stack.setAttribute('w', 'full');
+  stack.setAttribute('h', 'full');
+  const srcGlyph = sourceCell.querySelector('[ability-glyph]');
+  const srcIcons = srcGlyph
+    ? [...srcGlyph.children]
+    : [sourceCell.querySelector('icon')].filter(Boolean);
+  srcIcons.forEach((i) => stack.appendChild(i.cloneNode(true)));
+  seg.appendChild(stack);
+
+  const first = visibleItems(overlay)[0];
+  if (first) overlay.insertBefore(seg, first);
+  else overlay.appendChild(seg);
+
+  // Reflow at 0 width, then grow to the segment footprint so neighbours slide
+  // right and "make room" as it grows in.
+  seg.getBoundingClientRect();
+  seg.style.width = size ? `${size.width}px` : '';
+  return seg;
+};
+
+const removeBarPreview = (preview, animate) => {
+  if (!preview) return;
+  if (!animate) {
+    preview.remove();
+    return;
+  }
+  preview.style.width = '0px';
+  const done = () => preview.remove();
+  preview.addEventListener('transitionend', done, { once: true });
+  setTimeout(done, SHIFT_DURATION + 60);
+};
+
+const startPressAdd = (e, itemEl, zoneEl, config) => {
+  const bar = zoneForTypeRole(config.type, 'bar');
+  if (!bar) return;
+  const index = visibleItems(zoneEl).indexOf(itemEl);
+  if (index === -1) return;
+  const item = config.items()[index];
+  if (!item) return;
+
+  e.preventDefault();
+  if (typeof window.hideTooltip === 'function') window.hideTooltip();
+
+  const tile = itemEl.querySelector('ability-tile') || itemEl;
+  let preview = null;
+  let inside = true;
+
+  const open = () => {
+    if (preview) return;
+    tile.setAttribute('pressed', '');
+    preview = createBarPreview(bar.el, item, itemEl);
+  };
+  const close = (animate) => {
+    tile.removeAttribute('pressed');
+    removeBarPreview(preview, animate);
+    preview = null;
+  };
+  const within = (x, y) => {
+    const r = itemEl.getBoundingClientRect();
+    return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+  };
+
+  open();
+
+  const onMove = (ev) => {
+    const now = within(ev.clientX, ev.clientY);
+    if (now && !inside) {
+      inside = true;
+      open();
+    } else if (!now && inside) {
+      inside = false;
+      close(true);
+    }
+  };
+  const onUp = (ev) => {
+    document.removeEventListener('pointermove', onMove);
+    document.removeEventListener('pointerup', onUp);
+    tile.removeAttribute('pressed');
+    if (within(ev.clientX, ev.clientY)) {
+      // Commit: hand the same item the touch drag would to the bar's onReceive at
+      // index 0. Drop the preview first so it doesn't briefly stack with the real
+      // segment the state re-render paints.
+      if (preview) {
+        preview.remove();
+        preview = null;
+      }
+      bar.config.onReceive?.(item, zoneEl, 0);
+    } else {
+      close(true);
+    }
+  };
+  document.addEventListener('pointermove', onMove);
+  document.addEventListener('pointerup', onUp);
+};
+
+// The desktop × button: move an ability from a bar back to its paired Available
+// grid. Mirrors a touch drag bar→grid — the grid's onReceive drops it from the
+// active set and the derived Available list shows it again.
+// Public API
+const dnd = {
+  zone(element, config) {
+    zones.set(element, config);
+    element.setAttribute('dnd-zone', '');
+    element.style.touchAction = 'none';
+
+    return () => {
+      zones.delete(element);
+      element.removeAttribute('dnd-zone');
+    };
+  },
+
+  abilityBarZone(element, { items, type, onReorder, onReceive }) {
+    return dnd.zone(element, {
+      items,
+      type,
+      role: 'bar',
+      direction: 'horizontal',
+      constrainAxisY: () => draggingBasic,
+      placeholderSize: (item) => {
+        const size = abilitySegmentSize(element, item?.ticks);
+        return size && { width: `${size.width}px`, height: `${size.height}px` };
+      },
+      transformDraggedElement: (_ghost, data) => {
+        draggingBasic = !!data?.basic;
+        if (typeof window.hideTooltip === 'function') window.hideTooltip();
+      },
+      onReorder,
+      onReceive,
+    });
+  },
+
+  availableAbilityZone(element, { items, type, onReceive }) {
+    return dnd.zone(element, {
+      items,
+      type,
+      role: 'available',
+      direction: 'grid',
+      dropFromOthersDisabled: () => draggingBasic,
+      placeholderSize: () => ({
+        width: 'var(--available-ability-size)',
+        height: 'var(--available-ability-size)',
+      }),
+      transformDraggedElement: (ghost, data) => {
+        const tickCount = ghost.querySelector('ability-tick-count');
+        if (tickCount) tickCount.remove();
+        if (typeof window.hideTooltip === 'function') window.hideTooltip();
+
+        // Morph the square grid icon into the footprint it occupies on the
+        // ability bar — width scales with ticks — so the drag previews its
+        // real segment size the moment it pops out.
+        const size = abilitySegmentSize(barOverlayForType(type), data?.ticks);
+        if (size) {
+          ghost.animate(
+            [
+              { width: `${ghost.offsetWidth}px`, height: `${ghost.offsetHeight}px` },
+              { width: `${size.width}px`, height: `${size.height}px` },
+            ],
+            { duration: SHIFT_DURATION, easing: EASE, fill: 'forwards' },
+          );
+        }
+      },
+      onReceive,
+    });
+  },
+
+  // Drop zones whose element has left the DOM. Consumers that re-register zones
+  // on every render (without tracking per-element cleanup) should call this first
+  // so the zone map doesn't accumulate stale, detached overlays/grids.
+  prune() {
+    for (const el of [...zones.keys()]) {
+      if (!el.isConnected) zones.delete(el);
+    }
+  },
+
+  init() {
+    document.addEventListener('pointerdown', handlePointerDown);
+  },
+
+  destroy() {
+    document.removeEventListener('pointerdown', handlePointerDown);
+    zones.clear();
+  },
+};
+
+export default dnd;
diff --git a/js/entity.js b/js/entity.js
new file mode 100644
index 00000000..c5206dd0
--- /dev/null
+++ b/js/entity.js
@@ -0,0 +1,23 @@
+import { deepMerge } from '/js/helpers.js';
+
+// Deep-copies data but passes functions through by reference — description
+// templates (ability.description.simple/extended) are stateless constants, so
+// sharing the reference is correct. structuredClone would throw on them.
+const clone = (v) =>
+  Array.isArray(v)
+    ? v.map(clone)
+    : v && typeof v === 'object'
+      ? Object.fromEntries(Object.entries(v).map(([k, x]) => [k, clone(x)]))
+      : v;
+
+export default (entities, id, uuid, fullBody = false, overrides = {}) => ({
+  ...deepMerge(
+    {
+      uuid: uuid || crypto.randomUUID(),
+      id,
+      ...(fullBody ? clone(entities[id]) : undefined),
+    },
+    fullBody ? overrides : {},
+  ),
+  ...(JSON.stringify(overrides) !== '{}' ? { overrides } : {}),
+});
diff --git a/js/equipment.js b/js/equipment.js
new file mode 100644
index 00000000..b3157665
--- /dev/null
+++ b/js/equipment.js
@@ -0,0 +1,179 @@
+import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+import CHARACTERS from '/js/constants/CHARACTERS.js';
+import { ALL_RACES } from '/js/constants/RACES.js';
+import { calculateCombatStatsByCharacter, incStat } from '/js/utils.js';
+
+const RACE_ORDER = Object.keys(ALL_RACES);
+
+// Race requirements for any equipment: an item-level `races` override wins,
+// otherwise they come from its weapon/armor/trinket/accessory `type`.
+export const requiredRaces = (equipment) => equipment.races ?? equipment.type?.races ?? [];
+
+export const equipmentRaces = (equipmentRef) =>
+  requiredRaces(EQUIPMENT(equipmentRef, true))
+    .slice()
+    .sort((a, b) => RACE_ORDER.indexOf(a) - RACE_ORDER.indexOf(b))
+    .map((race) => ({ race, element: ALL_RACES[race].element, title: ALL_RACES[race].name }));
+
+export const equipBlockedRace = (equipmentRef) => {
+  if ($.settings.isTester) return null;
+  const characterIndex = $.page?.params?.index;
+  if (characterIndex === undefined) return null;
+  const { race } = CHARACTERS($.characters[Number(characterIndex)], true);
+  const races = requiredRaces(EQUIPMENT(equipmentRef, true));
+  return !races.length || races.includes(race.name) ? null : race.plural;
+};
+
+export const correctHealth = (characterRef, prevMax) => {
+  const character = CHARACTERS(characterRef, true);
+  const combatStats = calculateCombatStatsByCharacter(character);
+
+  if (
+    combatStats.maxHealth <= character.combatStats.currentHealth ||
+    prevMax === character.combatStats.currentHealth ||
+    prevMax === undefined
+  ) {
+    characterRef.overrides.combatStats.currentHealth = combatStats.maxHealth;
+  }
+
+  return characterRef;
+};
+
+const decideEquipmentSlot = (slotsIn, character) => {
+  if (slotsIn === 'oneHand') {
+    const mainHand = character.equipment.mainHand;
+    const offHand = character.equipment.offHand;
+
+    if (!mainHand) {
+      slotsIn = 'mainHand';
+    } else if (!offHand) {
+      slotsIn = 'offHand';
+    } else {
+      slotsIn = 'mainHand';
+    }
+  }
+
+  if (slotsIn === 'twoHand') {
+    slotsIn = 'mainHand';
+  }
+
+  return slotsIn;
+};
+
+export const dismantle = (itemRef) => {
+  const index = $.inventory.findIndex(({ uuid }) => uuid === itemRef.uuid);
+  if (index === -1) return;
+  $.inventory.splice(index, 1);
+};
+
+export const equip = (equipmentRef) => {
+  const characterIndex = Number($.page.params.index) || 0;
+  if (characterIndex === undefined) return;
+
+  const equipment = EQUIPMENT(equipmentRef, true);
+
+  const characterRef = $.characters[characterIndex];
+  const character = CHARACTERS(characterRef, true);
+  let slotsIn = decideEquipmentSlot(equipment.slotsIn, character);
+  const slot = character.equipment[slotsIn];
+  const mainHand = character.equipment.mainHand
+    ? EQUIPMENT(character.equipment.mainHand, true)
+    : {};
+
+  const index = $.inventory.findIndex((item) => item === equipmentRef);
+  $.inventory.splice(index, 1);
+
+  if (slot !== null) {
+    $.inventory.push(slot);
+  }
+
+  if (equipment.slotsIn === 'twoHand' && character.equipment.offHand) {
+    $.inventory.push(character.equipment.offHand);
+    characterRef.overrides.equipment.offHand = null;
+  }
+
+  if (
+    (slotsIn === 'mainHand' || slotsIn === 'offHand') &&
+    equipment.slotsIn !== 'twoHand' &&
+    mainHand?.slotsIn === 'twoHand' &&
+    character.equipment.mainHand !== null
+  ) {
+    $.inventory.push(character.equipment.mainHand);
+    characterRef.overrides.equipment.mainHand = null;
+
+    if (equipment.slotsIn !== 'offHand') slotsIn = 'mainHand';
+  }
+
+  characterRef.overrides.equipment[slotsIn] = equipmentRef;
+
+  correctHealth(characterRef, calculateCombatStatsByCharacter(character).maxHealth);
+
+  $.characters = [...$.characters];
+};
+
+export const unequip = (equipmentRef, slot) => {
+  const characterIndex = Number($.page.params.index);
+  if (characterIndex === undefined) return;
+
+  const characterRef = $.characters[characterIndex];
+  const character = CHARACTERS(characterRef, true);
+
+  $.inventory.push(equipmentRef);
+  characterRef.overrides.equipment[slot] = null;
+
+  correctHealth(characterRef, calculateCombatStatsByCharacter(character).maxHealth);
+
+  $.characters = [...$.characters];
+};
+
+// Retiring a brawler liquidates its gear: sellable pieces refund their coin
+// cost, protected pieces (the Heirloom) can't be sold so they return to the
+// equipment inventory rather than vanishing with the brawler.
+export const refundEquipment = (characterRef) => {
+  Object.values(characterRef.overrides?.equipment || {}).forEach((ref) => {
+    if (!ref?.id) return;
+    const item = EQUIPMENT(ref, true);
+    if (item.protected) $.inventory.push(ref);
+    else {
+      $.coins += item.cost;
+      incStat('economy.crystals.earned', { count: item.cost });
+    }
+  });
+};
+
+export const slotsInPrettyName = (slotsIn) =>
+  ({
+    twoHand: 'Two-Handed',
+    oneHand: 'One-Handed',
+    mainHand: 'Main-Hand',
+    offHand: 'Off-Hand',
+    accessory: 'Accessory',
+    trinket: 'Trinket',
+    armor: 'Armor',
+  })[slotsIn];
+
+export const buildEquipmentSlots = (char) => {
+  const isTwoHanded =
+    char.equipment.mainHand?.id && EQUIPMENT(char.equipment.mainHand, true).slotsIn === 'twoHand';
+  return ['mainHand', 'offHand', 'armor', 'accessory', 'trinket'].map((slot) => {
+    const eq = char.equipment[slot]?.id ? char.equipment[slot] : null;
+    const item = eq ? EQUIPMENT(eq, true) : null;
+    const isTwoHandOffHand = slot === 'offHand' && isTwoHanded;
+    return {
+      slot,
+      ref: eq,
+      prettyName: slotsInPrettyName(slot),
+      itemName: isTwoHandOffHand
+        ? EQUIPMENT(char.equipment.mainHand, true).name
+        : item
+          ? item.name
+          : ['mainHand', 'offHand'].includes(slot)
+            ? 'Fist'
+            : '-',
+      hasItem: !!eq,
+      disabled: isTwoHandOffHand,
+      level: item ? item.level || 1 : 0,
+      element: isTwoHandOffHand ? EQUIPMENT(char.equipment.mainHand, true).element : item?.element,
+    };
+  });
+};
diff --git a/js/fightSlots.js b/js/fightSlots.js
new file mode 100644
index 00000000..a8563c3a
--- /dev/null
+++ b/js/fightSlots.js
@@ -0,0 +1,234 @@
+import CHARACTERS from '/js/constants/CHARACTERS.js';
+import ABILITIES from '/js/constants/ABILITIES.js';
+import {
+  calculateAvailableAbilitiesByCharacter,
+  calculateCombatStatsByCharacter,
+  buildAbilityBarItems,
+  calculateLastTick,
+  abilityStatusChips,
+} from '/js/utils.js';
+import { addAbility, removeAbility, setBarAbilities } from '/js/loadout.js';
+
+export const buildFilledSlot = (ref, index) => {
+  const char = CHARACTERS(ref, true);
+  const stats = calculateCombatStatsByCharacter(char);
+  const hydrated = char.abilities
+    .map((a) => {
+      try {
+        return ABILITIES(a, true);
+      } catch {
+        return null;
+      }
+    })
+    .filter(Boolean);
+  const abilities = buildAbilityBarItems(hydrated, char.maxTicks, stats);
+  const usedUuids = new Set(abilities.map((a) => a.uuid));
+  const availableAbilities = calculateAvailableAbilitiesByCharacter(char)
+    .map((a) => {
+      try {
+        const h = ABILITIES(a, true);
+        return {
+          uuid: a.uuid,
+          id: h.id,
+          name: h.name,
+          ticks: h.ticks,
+          icon: h.icon,
+          basic: !!h.basic,
+          elements: h.elements || [],
+          statusEffects: h.statusEffects || [],
+          statusChips: abilityStatusChips(h),
+          overrides: a.overrides,
+        };
+      } catch {
+        return null;
+      }
+    })
+    .filter((a) => a && !a.basic && !usedUuids.has(a.uuid));
+
+  return {
+    empty: false,
+    key: index,
+    uuid: char.uuid,
+    characterIndex: $.characters.findIndex((c) => c.uuid === char.uuid),
+    name: char.name,
+    image: char.image,
+    mugshotX: char.mugshot.x,
+    mugshotY: char.mugshot.y,
+    hp: stats.maxHealth,
+    armor: stats.maxArmor,
+    damage: stats.damage,
+    abilities,
+    availableAbilities,
+    lastTick: calculateLastTick(abilities, char.maxTicks),
+    index,
+  };
+};
+
+// First build of a surface paints whatever's already selected without flipping —
+// only slots that appear *after* the initial render animate in. Reset per surface
+// in initFightSlots so a re-entered page starts clean.
+let firstBuild = true;
+
+// Keys already on screen as of the last painted frame. justAdded is measured
+// against this — NOT against the immediately-previous build — so the synchronous
+// rebuild on select and the afterUpdate rebuild that follows both still see a new
+// slot as new. The set is only advanced post-paint (in initFightSlots' hook).
+let committedKeys = new Set();
+
+// Assemble the slot list from the current selection. `trailing` shows the
+// selected brawlers plus a single empty "select a brawler" invite (capped by the
+// max and the roster size); otherwise every remaining slot up to `count` is shown
+// (a fixed fight size, e.g. the arena's X-vs-X). `justAdded` marks slots whose key
+// is new since the previous build so the view can flip them in.
+export const buildFightSlots = ({ count, trailing }) => {
+  const charCount = $.characters.length;
+  const filled = $.selectedBrawlers
+    .map((uuid) => {
+      const ref = $.characters.find((c) => c.uuid === uuid);
+      if (!ref) return null;
+      try {
+        return buildFilledSlot(ref, $.selectedBrawlers.indexOf(uuid));
+      } catch {
+        return null;
+      }
+    })
+    .filter(Boolean);
+
+  const hasRoom = filled.length < Math.min(count, charCount);
+  // A teamplay concluded elsewhere locks the account out of setting up a fight
+  // here — show only what's already selected, no empty "select a brawler" invite.
+  const concluded = $.pvp?.teamplay?.active?.status === 'completed';
+  let total = trailing ? filled.length + (hasRoom ? 1 : 0) : count;
+  if (concluded) total = filled.length;
+
+  const slots = [...filled];
+  for (let i = filled.length; i < total; i++) {
+    // Empty slots carry the same shape as filled ones (with neutral values) so a
+    // position can morph empty↔filled purely through reactive @[] bindings —
+    // Vibe doesn't re-run <!-- if --> control flow when a reused slot's prop
+    // changes, so the slot template stays conditional-free and lets data drive it.
+    slots.push({
+      empty: true,
+      key: i,
+      index: i,
+      uuid: '',
+      characterIndex: -1,
+      name: '',
+      image: '',
+      mugshotX: 0,
+      mugshotY: 0,
+      hp: 0,
+      armor: 0,
+      damage: 0,
+      abilities: [],
+      availableAbilities: [],
+      lastTick: 0,
+    });
+  }
+
+  slots.forEach((s) => {
+    s.justAdded = !firstBuild && !committedKeys.has(s.key);
+    // The first slot invites "Select a brawler"; every later one is an optional
+    // extra. A filled slot carries the same label so its flip-in starts on the
+    // exact prompt the invite it replaced was showing.
+    s.label = s.index === 0 ? 'Select a brawler' : `Slot ${s.index + 1} (optional)`;
+  });
+  firstBuild = false;
+
+  return slots;
+};
+
+// Wire one fight-setup surface: exposes window.updateFightSlots (rebuilds
+// $.brawlerSlots from the live selection + $.maxBrawlers), rebuilds on the
+// relevant state changes, and registers the ability drag-and-drop zones for each
+// rendered slot. Shared by every place the player picks brawlers for a fight.
+export const initFightSlots = ({ trailing = false } = {}) => {
+  firstBuild = true;
+  committedKeys = new Set();
+
+  window.updateFightSlots = () => {
+    $.brawlerSlots = buildFightSlots({ count: $.maxBrawlers || 1, trailing });
+  };
+  window.updateFightSlots();
+  committedKeys = new Set(($.brawlerSlots || []).map((s) => s.key));
+
+  $.on('afterUpdate', (current, prev) => {
+    if (
+      current.selectedBrawlers !== prev.selectedBrawlers ||
+      current.characters !== prev.characters ||
+      current.maxBrawlers !== prev.maxBrawlers ||
+      current.pvp?.teamplay?.active?.status !== prev.pvp?.teamplay?.active?.status
+    ) {
+      window.updateFightSlots();
+    }
+    // afterUpdate runs after the DOM is patched, so committing here means every
+    // build that ran *before* this paint kept the new slots flagged — they mount
+    // and flip — and only now are they marked as seen for the next interaction.
+    committedKeys = new Set(($.brawlerSlots || []).map((s) => s.key));
+  });
+
+  import('/js/dnd.js').then(({ default: dnd }) => {
+    dnd.init();
+    const registered = new WeakSet();
+
+    // Slots persist by position (so the same element flips empty↔filled), which
+    // means the brawler a zone serves can change under it on reorder. So the uuid
+    // is read live from the slot's DOM at call time, while the zone `type` (which
+    // pairs a bar with its inventory) keys off the stable position.
+    const registerSlotZones = () => {
+      // Slots persist by position but are torn down when deselected; drop any
+      // zones whose element is gone so a stale, detached overlay can't shadow a
+      // live one of the same position-type (which broke the ghost-morph).
+      dnd.prune();
+      document.querySelectorAll('brawler-slot ability-overlay').forEach((overlay) => {
+        if (registered.has(overlay)) return;
+        registered.add(overlay);
+        const slot = overlay.closest('brawler-slot');
+        const uuidOf = () => slot?.dataset.brawlerUuid;
+        dnd.abilityBarZone(overlay, {
+          items: () => {
+            const ref = $.characters.find((c) => c.uuid === uuidOf());
+            return (ref?.overrides?.abilities || []).map((a) => {
+              try {
+                return { ...a, basic: !!ABILITIES(a, true).basic };
+              } catch {
+                return { ...a, basic: false };
+              }
+            });
+          },
+          type: 'fight-slot-' + slot?.dataset.slotKey,
+          onReorder: (newItems) => setBarAbilities(uuidOf(), newItems),
+          onReceive: (item, _fromZone, insertIndex) =>
+            addAbility(
+              uuidOf(),
+              { id: item.id, uuid: item.uuid, overrides: item.overrides },
+              insertIndex,
+            ),
+        });
+      });
+
+      document.querySelectorAll('brawler-slot ability-inventory').forEach((inv) => {
+        if (registered.has(inv)) return;
+        registered.add(inv);
+        const slot = inv.closest('brawler-slot');
+        const uuidOf = () => slot?.dataset.brawlerUuid;
+        dnd.availableAbilityZone(inv, {
+          items: () =>
+            $.brawlerSlots.find((s) => s && s.uuid === uuidOf())?.availableAbilities || [],
+          type: 'fight-slot-' + slot?.dataset.slotKey,
+          onReceive: (item) => removeAbility(uuidOf(), item.uuid),
+        });
+      });
+    };
+
+    // afterUpdate is the reliable post-render hook across both build modes:
+    // compiled mode fires zero afterDomMutation events for reactive re-renders
+    // (Vibe's MutationObserver is a dev-only path), so without this the slots a
+    // selection mounts never register — their abilities undraggable and the
+    // Available tray un-clickable in the compiled build (worked in dev only).
+    $.on('afterUpdate', registerSlotZones);
+    $.on('afterDomMutation', registerSlotZones);
+    $.on('ready', registerSlotZones);
+    queueMicrotask(registerSlotZones);
+  });
+};
diff --git a/js/helpers.js b/js/helpers.js
new file mode 100644
index 00000000..80a679ad
--- /dev/null
+++ b/js/helpers.js
@@ -0,0 +1,450 @@
+import { getLevelByExperience } from '/js/level.js';
+
+const deepMerge = (target, source) => {
+  for (const key in source) {
+    if (Array.isArray(source[key])) {
+      target[key] = [...source[key]];
+    } else if (source[key] instanceof Object && key in target && target[key] instanceof Object) {
+      deepMerge(target[key], source[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+};
+
+const deepSubtract = (target, source) => {
+  for (const key in source) {
+    if (
+      source[key] instanceof Object &&
+      key in target &&
+      target[key] instanceof Object &&
+      !Array.isArray(source[key]) &&
+      !Array.isArray(target[key])
+    ) {
+      deepSubtract(target[key], source[key]);
+    } else if (typeof source[key] === 'number' && typeof target[key] === 'number') {
+      target[key] -= source[key];
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+};
+
+const deepAdd = (target, source) => {
+  for (const key in source) {
+    if (
+      source[key] instanceof Object &&
+      key in target &&
+      target[key] instanceof Object &&
+      !Array.isArray(source[key]) &&
+      !Array.isArray(target[key])
+    ) {
+      deepAdd(target[key], source[key]);
+    } else if (typeof source[key] === 'number' && typeof target[key] === 'number') {
+      target[key] += source[key];
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+};
+
+const range = (end = 0, start = 0) =>
+  Array(Math.abs(end - start))
+    .fill(0)
+    .map((_, i) => start + i * (end > 0 ? 1 : -1));
+
+const emptySlot = (obj) => typeof obj !== 'object' || !Object.keys(obj).length;
+
+const filledSlot = (obj) => !emptySlot(obj);
+
+const compare = (a, b) => {
+  if (a > b) return +1;
+  if (a < b) return -1;
+  return 0;
+};
+
+const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
+
+const getCookie = () =>
+  document.cookie
+    .replaceAll(' ', '')
+    .split(';')
+    .reduce((a, b) => ({ ...a, [b.split('=')[0]]: b.split('=')[1] }), {});
+
+const recursiveLookup = (target, searches = []) => {
+  if (!target) return false;
+
+  if (searches.find((search) => target.classList.contains(search))) {
+    return true;
+  }
+  if (target.parentElement) {
+    return recursiveLookup(target.parentElement, searches);
+  }
+  return false;
+};
+
+const capitalizeFirstLetter = (string) => `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+
+const colorStrength = (col, amt) => {
+  let usePound = false;
+
+  if (col[0] === '#') {
+    col = col.slice(1);
+    usePound = true;
+  }
+
+  const num = parseInt(col, 16);
+
+  let r = (num >> 16) + amt;
+
+  if (r > 255) r = 255;
+  else if (r < 0) r = 0;
+
+  let b = ((num >> 8) & 0x00ff) + amt;
+
+  if (b > 255) b = 255;
+  else if (b < 0) b = 0;
+
+  let g = (num & 0x0000ff) + amt;
+
+  if (g > 255) g = 255;
+  else if (g < 0) g = 0;
+
+  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
+};
+
+const debounce = (fn, wait, maxWait) => {
+  let timer, maxTimer;
+
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      clearTimeout(maxTimer);
+      maxTimer = null;
+      fn(...args);
+    }, wait);
+    if (maxWait && !maxTimer) {
+      maxTimer = setTimeout(() => {
+        clearTimeout(timer);
+        maxTimer = null;
+        fn(...args);
+      }, maxWait);
+    }
+  };
+};
+
+const lerp = (min, max, value) => {
+  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  return x * x * (3 - 2 * x);
+};
+
+const smoothLerp = (animStart, animEnd, animCurrent, reverse) => {
+  const lerped = lerp(animStart, animEnd, animCurrent);
+  return reverse ? 1 - lerped : lerped;
+};
+
+const randomNumber = (min, max, factor = Math.random()) =>
+  Math.floor(factor * (max - min + 1) + min);
+
+const stringListToArray = (string) =>
+  string
+    .split(',')
+    .map((segment) => segment.trim())
+    .filter((segment) => segment);
+
+const pad = (v) => (v < 10 ? `0${v}` : v);
+
+const intToArray = (int, fill = undefined) =>
+  Array(int)
+    .fill(0)
+    .map((_, i) => (fill !== undefined ? fill : i));
+
+const filterSplit = (array, condition) =>
+  array.reduce(
+    ([hits, misses], item) =>
+      condition(item) ? [[...hits, item], misses] : [hits, [...misses, item]],
+    [[], []],
+  );
+
+const findNIndex = (array, condition, n = 1, searched = []) => {
+  const index = array.findIndex(condition);
+
+  if (index === -1) {
+    return index;
+  } else if (n - 1 > 0) {
+    return findNIndex(
+      array.slice(index + 1, array.length),
+      condition,
+      n - 1,
+      array.slice(0, index + 1),
+    );
+  }
+
+  return searched.length + index;
+};
+
+const readableTimestamp = (timestamp) => new Date(timestamp).toLocaleString();
+
+// Spectator strip label for a past battle, told three ways by recency (clock always
+// zero-padded HH:MM): "5 hours ago, 14:05" under a day, "Tuesday (3 days ago), 14:05"
+// under a week, "Jun 05, 14:05" beyond.
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const historicalBattleTime = (timestamp) => {
+  const then = new Date(timestamp);
+  const pad = (n) => String(n).padStart(2, '0');
+  const clock = `${pad(then.getHours())}:${pad(then.getMinutes())}`;
+  const day = 24 * 60 * 60 * 1000;
+  const diff = Date.now() - then.getTime();
+  if (diff < day) {
+    const hours = Math.floor(diff / (60 * 60 * 1000));
+    return `${hours < 1 ? 'less than an hour' : `${hours} hour${hours === 1 ? '' : 's'}`} ago, ${clock}`;
+  }
+  if (diff < 7 * day) {
+    const days = Math.floor(diff / day);
+    return `${WEEKDAYS[then.getDay()]} (${days} day${days === 1 ? '' : 's'} ago), ${clock}`;
+  }
+  return `${MONTHS[then.getMonth()]} ${pad(then.getDate())}, ${clock}`;
+};
+
+const formatReleaseDate = (date) =>
+  new Date(`${date}T00:00:00`).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+const msToTime = (ms) => ({
+  milliseconds: ms % 1000,
+  seconds: Math.floor((ms / 1000) % 60),
+  minutes: Math.floor((ms / (1000 * 60)) % 60),
+  hours: Math.floor((ms / (1000 * 60 * 60)) % 24),
+  days: Math.floor((ms / (1000 * 60 * 60 * 24)) % 365),
+});
+
+const upsertArray = (players, nearby) =>
+  nearby.reduce((a, player) => {
+    const index = a.findIndex(({ _id }) => _id === player._id);
+    if (index === -1) {
+      return [...a, player];
+    } else {
+      return [...a.slice(0, index), player, ...a.slice(index + 1)];
+    }
+  }, players);
+
+const fillOut = (array, amount, fillWith = false, repeat = false) =>
+  amount > array.length || repeat
+    ? [...array, ...intToArray(amount - (repeat ? array.length % amount : array.length), fillWith)]
+    : array;
+
+const prettyNumber = (value) => value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
+
+const parseVersion = (versionString) => {
+  const [major, minor, patch] = versionString.split('.').map(Number);
+  return { major, minor, patch };
+};
+
+const dayAfter = (time) => {
+  const IS_DEV = ['localhost', '127.0.0.1'].includes(location.hostname);
+  const tomorrow = new Date(time || null);
+
+  tomorrow.setHours(IS_DEV ? tomorrow.getHours() : 0);
+  tomorrow.setMinutes(IS_DEV ? tomorrow.getMinutes() : 0);
+  tomorrow.setSeconds(IS_DEV ? tomorrow.getSeconds() + 10 : 0);
+  tomorrow.setDate(tomorrow.getDate() + +!IS_DEV);
+
+  return tomorrow;
+};
+
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+const isNewerVersion = (oldVer = '0.0.0', newVer) => {
+  const oldParts = oldVer.split('.');
+  const newParts = newVer.split('.');
+  for (let i = 0; i < newParts.length; i++) {
+    const a = ~~newParts[i];
+    const b = ~~oldParts[i];
+    if (a > b) return true;
+    if (a < b) return false;
+  }
+  return false;
+};
+
+const byKeys = (keys) => (checkAgainst) =>
+  Object.entries(keys).every(([key, value]) => checkAgainst?.[key] === value);
+
+const notByKeys = (keys) => (checkAgainst) => !byKeys(keys)(checkAgainst);
+
+const reorder = (array, index) => array.slice(index).concat(array.slice(0, index));
+
+const onlyUnique = (value, index, self) => self.indexOf(value) === index;
+
+function once(fn) {
+  return function (event) {
+    if (fn) fn.call(this, event);
+    fn = null;
+  };
+}
+
+function preventDefault(fn) {
+  return function (event) {
+    event.preventDefault();
+    fn.call(this, event);
+  };
+}
+
+const formatDescription = (text) => (text || '').replace(/<br\s*\/?>/gi, '\n').trim();
+
+const formatCoins = (amount) => ({
+  gold: 0,
+  silver: Math.floor(amount / 100),
+  copper: amount % 100,
+});
+
+const idCounts = (items) => items.reduce((acc, e) => ((acc[e.id] = (acc[e.id] || 0) + 1), acc), {});
+
+const hasOddOneOut = (counts) =>
+  Object.values(counts).some((n) => n === 1) && Object.values(counts).some((n) => n > 1);
+
+const pickOddOneOut = (items) => {
+  const counts = idCounts(items);
+  if (!hasOddOneOut(counts)) return null;
+  return items
+    .filter((e) => counts[e.id] === 1)
+    .sort((a, b) => (b.size || 0) - (a.size || 0) || (b.humanoid || 0) - (a.humanoid || 0))[0];
+};
+
+const centerOddOneOut = (items) => {
+  const odd = pickOddOneOut(items);
+  if (!odd) return items;
+  const rest = items.filter((e) => e !== odd);
+  const center = Math.floor(items.length / 2);
+  return [...rest.slice(0, center), odd, ...rest.slice(center)];
+};
+
+const fightLevelText = (fight) => {
+  // Bosses read as a single level (their slot), not a span: 5, 10, 14, 15, 20, 25, 25+.
+  if (fight.boss) return fight.minLevel > 25 ? '25+' : String(fight.minLevel);
+  if (fight.minLevel > 25) return '25+';
+  if (fight.minLevel === fight.maxLevel) return String(fight.minLevel);
+  return `${fight.minLevel} - ${fight.maxLevel}`;
+};
+
+const nextBossLevel = (fights, bossHighscore) =>
+  Math.min(
+    Infinity,
+    ...fights.filter((f) => f.boss && bossHighscore < f.minLevel).map((f) => f.minLevel),
+  );
+
+// A fight is locked while an undefeated boss still stands between the player and it:
+// it unlocks only once every boss below its level has fallen. nextBossLevel is the
+// lowest undefeated boss, so that boss — plus the regular fights up to it — opens,
+// while everything past it waits until that boss falls. Progress is gated strictly
+// boss-by-boss off the real minLevel (no level cap), so the level-25 boss can open
+// while the 25+ tiers stay shut, and gaps between boss levels never dead-end (beating
+// a boss sets bossHighscore to its level, which clears the way to the next tier).
+// Shared by the arena list and the /pve/<id> detail page so the order can't be
+// skipped via a direct URL.
+const isFightLocked = (fight, fights, bossHighscore, isTester) => {
+  if (isTester) return false;
+  return fight.minLevel > nextBossLevel(fights, bossHighscore);
+};
+
+// The "For my level" rule: a fight is out of range once the player's level passes
+// its maxLevel (no XP left to gain), except undefeated bosses, which stay in range
+// so the next boss is never hidden. Below level 5 nothing is out of range. Shared
+// by the arena list filter and the claim-reward redirect.
+const isFightOutleveled = (fight, experience, bossHighscore) => {
+  const level = getLevelByExperience(experience || 0);
+  if (level < 5) return false;
+  return level > fight.maxLevel && !(fight.boss && bossHighscore < fight.minLevel);
+};
+
+const statusEffectCategory = (statusEffects, statusEffectsDef) => {
+  if (!statusEffects?.length) return null;
+  const has = (cat) => statusEffects.some(([k]) => statusEffectsDef?.[k]?.category === cat);
+  if (has('debuff')) return 'debuff';
+  if (has('buff')) return 'buff';
+  return null;
+};
+
+// Key actions ride the $.keys state seeded by <Keystrokes> (which already
+// respects gameKeyboardDisabled), so consumers never touch event listeners.
+const onKeyPress = (key, fn) =>
+  $.on('afterUpdate', (current, prev) => {
+    if (current.keys?.[key] && !prev.keys?.[key]) fn();
+  });
+
+// Team colour from a zero-based team index, cycling the eight --team-N palette
+// vars (index 0 → --team-1). Shared by the combat ring labels and the teamplay
+// listing so a team reads the same colour everywhere.
+const teamColor = (index) => `var(--team-${(index % 8) + 1})`;
+
+// Uniform scale that fits a boundary element inside an available box, capped at 1
+// (never enlarges). boundaryEl is measured by its untransformed layout size, so it
+// must be sized to the outermost combat ellipse (--combat-outer-d × 1.2, height ×
+// --combat-outer-tilt) via CSS — that calc is the single source of the fit maths,
+// shared by the live arena and the components preview. Returns null until both the
+// boundary and the box have real layout.
+const combatFitScale = (boundaryEl, availWidth, availHeight) => {
+  const w = boundaryEl?.offsetWidth;
+  const h = boundaryEl?.offsetHeight;
+  if (!w || !h || !availWidth || !availHeight) return null;
+  return Math.min(1, availWidth / w, availHeight / h);
+};
+
+export {
+  formatDescription,
+  formatCoins,
+  range,
+  emptySlot,
+  filledSlot,
+  compare,
+  sleep,
+  getCookie,
+  recursiveLookup,
+  capitalizeFirstLetter,
+  colorStrength,
+  debounce,
+  smoothLerp,
+  randomNumber,
+  stringListToArray,
+  pad,
+  intToArray,
+  filterSplit,
+  findNIndex,
+  readableTimestamp,
+  historicalBattleTime,
+  formatReleaseDate,
+  msToTime,
+  upsertArray,
+  fillOut,
+  prettyNumber,
+  parseVersion,
+  dayAfter,
+  clamp,
+  isNewerVersion,
+  byKeys,
+  notByKeys,
+  reorder,
+  onlyUnique,
+  once,
+  preventDefault,
+  deepMerge,
+  deepAdd,
+  deepSubtract,
+  statusEffectCategory,
+  idCounts,
+  hasOddOneOut,
+  pickOddOneOut,
+  centerOddOneOut,
+  fightLevelText,
+  isFightLocked,
+  isFightOutleveled,
+  onKeyPress,
+  teamColor,
+  combatFitScale,
+};
diff --git a/js/inputMode.js b/js/inputMode.js
new file mode 100644
index 00000000..326c2561
--- /dev/null
+++ b/js/inputMode.js
@@ -0,0 +1,39 @@
+// Global input mode: 'desktop' (mouse/pen) vs 'touch'. Initialised from device
+// capability, then flips to whatever pointer the player actually uses — so a
+// touch-laptop adapts per interaction (the world-seed-client approach).
+//
+// Drives the desktop-only ability affordances via `body[input-mode]` in CSS
+// (the × remove-button, click-to-add cursor); the dnd engine itself decides
+// drag-vs-press per event from pointerType, which stays consistent with this.
+
+const coarse = () => window.matchMedia('(hover: none), (pointer: coarse)').matches;
+
+let mode = null;
+
+const apply = (next) => {
+  if (next === mode) return;
+  mode = next;
+  if (document.body) document.body.setAttribute('input-mode', mode);
+  try {
+    $.inputMode = mode;
+  } catch {}
+};
+
+export const initInputMode = () => {
+  const set = () => apply(coarse() ? 'touch' : 'desktop');
+  if (document.body) set();
+  else document.addEventListener('DOMContentLoaded', set, { once: true });
+
+  window.addEventListener(
+    'pointerdown',
+    (e) => apply(e.pointerType === 'touch' ? 'touch' : 'desktop'),
+    true,
+  );
+  window.addEventListener(
+    'pointermove',
+    (e) => {
+      if (e.pointerType === 'mouse') apply('desktop');
+    },
+    true,
+  );
+};
diff --git a/js/level.js b/js/level.js
new file mode 100644
index 00000000..bbda19fd
--- /dev/null
+++ b/js/level.js
@@ -0,0 +1,59 @@
+export const MAX_LEVEL = 25;
+
+// Cumulative XP to reach each level, indexed by level (LEVEL_XP[1] = 0). Authored
+// explicitly rather than as a formula so each band's pace can be tuned on its own —
+// the climb isn't a clean power curve (it speeds up mid-game, then walls at the cap).
+// Targets for an average player at ~10 fights/hr: L1-5 ~1.5h, 6-10 ~3h, 11-15 ~2.5h,
+// 16-20 ~3.5h, 21-25 ~4.5h (~15h active to cap). Faster earners simply climb faster.
+// TEMP: XP-to-cap scaled down ~2x for testing. Set XP_DIVISOR back to 1 to restore.
+const XP_DIVISOR = 2;
+const LEVEL_XP = [
+  0, 0, 100, 300, 600, 1000, 1500, 2100, 2800, 3550, 4350, 5200, 6070, 6960, 7870, 8800, 10100,
+  11550, 13100, 14750, 16450, 18550, 20800, 23150, 25600, 28150,
+].map((xp) => Math.round(xp / XP_DIVISOR));
+
+export const getExperienceByLevel = (level) => LEVEL_XP[Math.min(Math.max(level, 1), MAX_LEVEL)];
+
+export const getLevelByExperience = (experience) => {
+  const xp = experience || 0;
+  let level = 1;
+  while (level < MAX_LEVEL && xp >= LEVEL_XP[level + 1]) level++;
+  return level;
+};
+
+export const getExperienceForNextLevel = (currentLevel) => {
+  const xpCurrentLevel = getExperienceByLevel(currentLevel);
+  const xpNextLevel = getExperienceByLevel(currentLevel + 1);
+  return Math.floor(xpNextLevel - xpCurrentLevel);
+};
+
+export const getCurrentExperienceAtLevel = (experience) => {
+  const currentLevel = getLevelByExperience(experience);
+  const xpForCurrentLevel = getExperienceByLevel(currentLevel);
+  return Math.ceil(experience - xpForCurrentLevel);
+};
+
+export const allowedNumberOfBrawlers = (accountRewards = $.accountRewards) =>
+  Math.floor(accountRewards / 5) + 1;
+
+export const isAccountPremium = () => $.premiumUntil > 0 && ($.clock.now || 0) < $.premiumUntil;
+
+export const allowedNumberOfPotions = () =>
+  3 + (isAccountPremium() ? Math.floor($.accountRewards / 5) : 0);
+
+export const getExperienceRangeForLevel = (level) => {
+  const minXp = Math.ceil(getExperienceByLevel(level));
+  let maxXp = Math.ceil(getExperienceByLevel(level + 1)) - 1;
+
+  if (level + 1 > MAX_LEVEL) {
+    maxXp = Infinity;
+  }
+
+  return { minXp, maxXp };
+};
+
+// Enemy count is intentionally ignored — multi-foe fights are balanced via per-enemy
+// count-scaling, not by piling on more XP. Fewer brawlers than allowed still pays more
+// (the under-man bonus, applied at claim time in Combat.html).
+export const getExperienceReward = (minLevel, maxLevel, boss) =>
+  40 * (boss ? 10 : 1) + 40 * Math.ceil((minLevel + maxLevel) / 2) * 0.2;
diff --git a/js/loadout.js b/js/loadout.js
new file mode 100644
index 00000000..081d868f
--- /dev/null
+++ b/js/loadout.js
@@ -0,0 +1,57 @@
+// Equipping abilities — the single source of truth shared by the arena, the
+// random duel and the brawler detail page. A brawler's bar is `overrides.abilities`;
+// the Available tray is derived from equipment + signature minus what's on the bar
+// (see calculateAvailableAbilitiesByCharacter). Every mutation here reassigns the
+// top-level $.characters so each page's reference-gated derived state recomputes —
+// that reassignment is the only signal those pages listen for.
+
+import { incStat } from '/js/utils.js';
+
+const charByUuid = (uuid) => $.characters.find((c) => c.uuid === uuid);
+
+const commit = (character, abilities) => {
+  character.overrides.abilities = abilities.map((a) => ({
+    id: a.id,
+    uuid: a.uuid,
+    overrides: a.overrides,
+  }));
+  $.characters = [...$.characters];
+};
+
+export const setBarAbilities = (characterUuid, abilities) => {
+  const c = charByUuid(characterUuid);
+  if (c) {
+    commit(c, abilities);
+    incStat('loadout.sequence.reordered');
+  }
+};
+
+export const removeAbility = (characterUuid, abilityUuid) => {
+  const c = charByUuid(characterUuid);
+  if (c) {
+    commit(
+      c,
+      (c.overrides?.abilities || []).filter((a) => a.uuid !== abilityUuid),
+    );
+    incStat('loadout.sequence.ability.removed');
+  }
+};
+
+export const addAbility = (characterUuid, ability, index = 0) => {
+  const c = charByUuid(characterUuid);
+  if (!c) return;
+  const next = (c.overrides?.abilities || []).slice();
+  next.splice(index, 0, ability);
+  commit(c, next);
+  incStat('loadout.sequence.ability.added');
+};
+
+// The AbilityBar × button calls this bare global (markup convention). Works on
+// any page: brawler-slot context gives the uuid in the arena/duel, the route
+// param gives it on the detail page.
+window.returnAbility = (event, ability) => {
+  window.hideTooltip?.();
+  const slotUuid = event.target.closest('brawler-slot')?.dataset.brawlerUuid;
+  const uuid = slotUuid || $.characters[Number($.page?.params?.index) || 0]?.uuid;
+  removeAbility(uuid, ability.uuid);
+};
diff --git a/js/loot.js b/js/loot.js
new file mode 100644
index 00000000..c11cb545
--- /dev/null
+++ b/js/loot.js
@@ -0,0 +1,75 @@
+import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+import MATERIALS, { ALL_MATERIALS } from '/js/constants/MATERIALS.js';
+import ITEMS from '/js/constants/ITEMS.js';
+
+// Per-group fallback chance for a loot entry that omits its rate. Stored — and
+// rolled — as real probabilities; the named tiers below are purely a display skin.
+export const DROP_DEFAULTS = { equipment: 0.1, materials: 0.3 };
+
+const CATALOGS = {
+  equipment: { factory: EQUIPMENT, all: ALL_EQUIPMENT },
+  materials: { factory: MATERIALS, all: ALL_MATERIALS },
+};
+
+// A chance number maps to a word + colour only when shown on /pve/<id>; the
+// exact odds stay hidden. Bands are descending, so find() returns the first hit.
+const RATE_TIERS = [
+  { min: 1, word: 'reward', color: 'var(--coin-gold)', guaranteed: true },
+  { min: 0.4, word: 'high', color: 'var(--hue-green)' },
+  { min: 0.2, word: 'medium', color: 'var(--hue-yellow)' },
+  { min: 0.05, word: 'low', color: 'var(--hue-red)' },
+  { min: 0, word: 'minuscule', color: 'var(--muted-foreground)' },
+];
+
+export const rateTier = (chance) => RATE_TIERS.find((t) => chance >= t.min);
+
+// One lootTable entry is [id, overrides, rate?]. overrides is always present
+// (usually {}) and merges onto the hydrated item; rate is optional and falls back
+// to the group default. A boss always drops everything, so every boss drop is
+// guaranteed regardless of the authored rate (the rate still documents the piece's
+// intended rarity). An id that resolves in neither catalog degrades to the Wrapped
+// item, tagged with enough metadata to trace the original drop.
+const resolveDrop = (group, [id, overrides = {}, rate], fight, index) => {
+  const { factory, all } = CATALOGS[group];
+  const known = !!all[id];
+  const chance = fight.boss ? 1 : (rate ?? DROP_DEFAULTS[group]);
+  // Loot equipment is a reward, not merchandise: it can be dismantled but never
+  // sold back for crystals, so its cost is forced to 0 (applyScaling honours an
+  // overrides.cost, and sellLabel shows "Dismantle" at cost 0).
+  const dropOverrides = group === 'equipment' ? { ...overrides, cost: 0 } : overrides;
+  const item = known
+    ? factory(id, true, { overrides: dropOverrides })
+    : ITEMS('wrappedItem', true, {
+        overrides: { ...overrides, category: group, id, origin: 'pve-fight', originId: fight.id },
+      });
+  const { word, color, guaranteed } = rateTier(chance);
+  return {
+    key: `${group}:${id}:${index}`,
+    id,
+    overrides: dropOverrides,
+    kind: known ? group : 'item',
+    item,
+    chance,
+    word,
+    color,
+    guaranteed,
+  };
+};
+
+export const resolveLoot = (fight) =>
+  ['equipment', 'materials'].flatMap((group) =>
+    (fight.lootTable?.[group] || []).map((entry, index) => resolveDrop(group, entry, fight, index)),
+  );
+
+// Every resolved entry tagged with its own roll outcome (guaranteed entries always
+// drop). Statistics reads this to log luck per drop-chance; rollLoot collapses it.
+export const rollLootDetailed = (fight) =>
+  resolveLoot(fight).map((drop) => ({
+    ...drop,
+    dropped: drop.guaranteed || Math.random() < drop.chance,
+  }));
+
+// What actually drops from a single won fight: each resolved entry kept on its own
+// roll. The display layers above resolveLoot show odds; this collapses them to a
+// concrete reward set.
+export const rollLoot = (fight) => rollLootDetailed(fight).filter((drop) => drop.dropped);
diff --git a/js/seasonArena.js b/js/seasonArena.js
new file mode 100644
index 00000000..d19c1452
--- /dev/null
+++ b/js/seasonArena.js
@@ -0,0 +1,57 @@
+import { ALL_FIGHTS } from '/js/constants/FIGHTS.js';
+import { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+import {
+  BRACKETS,
+  SLOTS_PER_BRACKET,
+  ANCHORS,
+  TIER_POOLS,
+  SPAN_WIDTH,
+  SPAN_LIFT,
+  bracketSlots,
+} from '/js/constants/ARENA.js';
+import { seasonLabel } from '/js/seasons.js';
+import { seededRandom, seededShuffle } from '/js/seededRandom.js';
+
+const byId = Object.fromEntries(ALL_FIGHTS.map((f) => [f.id, f]));
+const power = (charRef) => ALL_CHARACTERS[charRef?.id]?.power ?? 1;
+
+// Decorate a base fight for one arena slot: carry the count-scale (P/E from the fight's
+// intended team size), promote the highest-power enemy to boss on a boss slot, and surface
+// the level span + boss flag. Spanned slots display [level, level + SPAN_WIDTH] and scale
+// SPAN_LIFT levels above their floor; anchors/endgame sit at an exact level.
+const place = (fight, level, boss, spanned = true) => {
+  if (!fight) return null;
+  const maxLevel = spanned ? level + SPAN_WIDTH : level;
+  const scaleLevel = spanned ? level + SPAN_LIFT : level;
+  const countScale = fight.maxBrawlers / fight.characters.length;
+  const lead = boss
+    ? fight.characters.reduce((b, c, i) => (power(c) > power(fight.characters[b]) ? i : b), 0)
+    : -1;
+  const characters = fight.characters.map((charRef, i) => ({
+    ...charRef,
+    overrides: { ...charRef?.overrides, level: scaleLevel, countScale, boss: i === lead },
+  }));
+  return { ...fight, minLevel: level, maxLevel, boss, characters };
+};
+
+// The arena ladder for a season — pure, deterministic, fully client-side. Same season →
+// same arrangement; change the season and it reshuffles with no server call.
+export const seasonArena = (season) => {
+  const rng = seededRandom(seasonLabel(season));
+  const fights = [];
+
+  for (const { tier, min, max, boss } of BRACKETS) {
+    const pool = (TIER_POOLS[tier] || []).map((id) => byId[id]).filter(Boolean);
+    const chosen = seededShuffle(pool, rng);
+    const slots = bracketSlots(min, max, Math.min(SLOTS_PER_BRACKET, chosen.length), boss);
+    slots.forEach((slot, i) => fights.push(place(chosen[i], slot.level, slot.boss)));
+  }
+
+  for (const [id, { level, boss }] of Object.entries(ANCHORS)) {
+    fights.push(place(byId[id], level, boss, false));
+  }
+
+  return fights
+    .filter(Boolean)
+    .sort((a, b) => a.minLevel - b.minLevel || (a.boss === b.boss ? 0 : a.boss ? 1 : -1));
+};
diff --git a/js/seasons.js b/js/seasons.js
new file mode 100644
index 00000000..352d6312
--- /dev/null
+++ b/js/seasons.js
@@ -0,0 +1,81 @@
+// Season scheduling — pure, time-driven, no stored state. The current season is
+// a function of the (server-synced) clock, so the game rolls seasons on its own.
+// Keep this in lockstep with server/seasons.js — both must compute identically.
+
+export const SEASON_CONFIG = {
+  epochYear: 2026,
+  epochMonth: 5, // June (0-indexed) → Season 1
+  downtime: 0, //24 * 60 * 60 * 1000, // locked window before each new season; tunable
+};
+
+const SEASON_META = {
+  1: {
+    name: 'Proving Grounds',
+    tagline: 'The sand remembers no one. Earn your name again.',
+    highlights: [
+      'A clean slate — every account starts from level 1.',
+      'Claim your Heirloom at level 1 and carry it through the climb.',
+      'Reach the level cap, then settle scores in the endgame.',
+    ],
+  },
+};
+
+export const seasonNumber = (t) => {
+  const d = new Date(t);
+  return (
+    (d.getUTCFullYear() - SEASON_CONFIG.epochYear) * 12 +
+    (d.getUTCMonth() - SEASON_CONFIG.epochMonth) +
+    1
+  );
+};
+
+export const seasonStart = (n) =>
+  Date.UTC(SEASON_CONFIG.epochYear, SEASON_CONFIG.epochMonth + (n - 1), 1);
+
+// "YYYY-MM" for a season — unique per season, used as the deterministic seed for the
+// arena reshuffle and shown to testers. Mirrors server/seasons.js seasonLabel.
+export const seasonLabel = (n) => {
+  const d = new Date(seasonStart(n));
+  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
+};
+
+export const seasonEnd = (n) => seasonStart(n + 1);
+
+export const downtimeStart = (n) => seasonEnd(n) - SEASON_CONFIG.downtime;
+
+export const isDowntime = (t) => t >= downtimeStart(seasonNumber(t));
+
+export const msUntilNextSeason = (t) => seasonEnd(seasonNumber(t)) - t;
+
+export const msUntilDowntime = (t) => downtimeStart(seasonNumber(t)) - t;
+
+// 0 → just started, 1 → about to end.
+export const seasonProgress = (t) => {
+  const n = seasonNumber(t);
+  const start = seasonStart(n);
+  return (t - start) / (seasonEnd(n) - start);
+};
+
+export const seasonMeta = (n) =>
+  SEASON_META[n] || {
+    name: `Season ${n}`,
+    tagline: 'A new season on the sand.',
+    highlights: ['A clean slate — every account starts from level 1.'],
+  };
+
+export const seasonName = (n) => seasonMeta(n).name;
+
+export const PASS_PRICE = 4.99;
+
+// The closer to season's end, the cheaper the pass — fewer days of value left.
+export const passDiscount = (t) => {
+  const e = seasonProgress(t);
+  if (e >= 0.9) return 40;
+  if (e >= 0.75) return 25;
+  if (e >= 0.5) return 15;
+  return 0;
+};
+
+export const passPrice = (t) => PASS_PRICE * (1 - passDiscount(t) / 100);
+
+export const formatEUR = (amount) => `€${amount.toFixed(2)}`;
diff --git a/js/seededRandom.js b/js/seededRandom.js
new file mode 100644
index 00000000..572df0cc
--- /dev/null
+++ b/js/seededRandom.js
@@ -0,0 +1,35 @@
+// Tiny deterministic PRNG for season-seeded content — an xmur3 string hash seeds a
+// mulberry32 generator. The same seed string always yields the same sequence, so the
+// arena composition is reproducible per season entirely client-side, no server call.
+const xmur3 = (str) => {
+  let h = 1779033703 ^ str.length;
+  for (let i = 0; i < str.length; i++) {
+    h = Math.imul(h ^ str.charCodeAt(i), 3432918353);
+    h = (h << 13) | (h >>> 19);
+  }
+  return () => {
+    h = Math.imul(h ^ (h >>> 16), 2246822507);
+    h = Math.imul(h ^ (h >>> 13), 3266489909);
+    return (h ^= h >>> 16) >>> 0;
+  };
+};
+
+const mulberry32 = (seed) => () => {
+  seed = (seed + 0x6d2b79f5) | 0;
+  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+// A PRNG function returning floats in [0, 1), seeded from any string.
+export const seededRandom = (string) => mulberry32(xmur3(String(string))());
+
+// Deterministic Fisher-Yates on a copy — the input array is left untouched.
+export const seededShuffle = (array, rng) => {
+  const copy = [...array];
+  for (let i = copy.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [copy[i], copy[j]] = [copy[j], copy[i]];
+  }
+  return copy;
+};
diff --git a/js/spa-demo.js b/js/spa-demo.js
new file mode 100644
index 00000000..1aaa52d7
--- /dev/null
+++ b/js/spa-demo.js
@@ -0,0 +1,47 @@
+import vibe from '@ape-egg/vibe';
+import { boot } from '@ape-egg/vibe/boot';
+
+// Clean URLs: the shell lives at pages/_internal/spa-testing/$$route.html —
+// the `$$` catch-all serves the base path and everything below it, so refresh
+// and deep links resolve through the MPA routing. The route table maps a path
+// segment to a component src — `<component src="@[page.src]">` re-mounts
+// whenever it changes; unknown segments resolve to home.
+const base = '/_internal/spa-testing';
+const routes = {
+  home: '/components/spa-demo/Home.html',
+  timer: '/components/spa-demo/Timer.html',
+  fighter: '/components/spa-demo/Fighter.html',
+};
+
+const parseUrl = () => {
+  const [segment, fighter] = window.location.pathname.slice(base.length).split('/').filter(Boolean);
+  const name = routes[segment] ? segment : 'home';
+  return { name, src: routes[name], params: { fighter } };
+};
+
+export default () => {
+  window.$ = vibe(
+    { page: parseUrl(), spaDemo: { globalTicks: 0, timerMounts: 0 } },
+    { debug: false, noCache: false },
+  );
+  window.$ = boot();
+
+  // The global ticker belongs to the shell: one interval for the page's whole
+  // lifetime, counting on every route — the contrast to the Timer component's
+  // local ticker, which mounts fresh and is torn down by $.onDestroy.
+  setInterval(() => $.spaDemo.globalTicks++, 500);
+
+  // The entire router: a two-way binding between the URL and $.page.
+  // Anchors under the base path are claimed (pushState + state flip);
+  // everything else — other paths, modified clicks — navigates natively.
+  document.addEventListener('click', (e) => {
+    const a = e.target.closest('a[href]');
+    if (!a || a.origin !== location.origin) return;
+    if (a.pathname !== base && !a.pathname.startsWith(base + '/')) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button) return;
+    e.preventDefault();
+    window.history.pushState({}, '', a.href);
+    $.page = parseUrl();
+  });
+  window.addEventListener('popstate', () => ($.page = parseUrl()));
+};
diff --git a/js/teamplay.js b/js/teamplay.js
new file mode 100644
index 00000000..c3aa4e85
--- /dev/null
+++ b/js/teamplay.js
@@ -0,0 +1,388 @@
+// Realtime glue for the teamplay rooms. Room membership lives on the socket
+// connection server-side, so it's lost on a reconnect — `wanted` records the
+// rooms this client wants to be in so resubscribe() can rejoin them on reopen.
+// Page navigation (MPA) closes the socket and clears membership server-side, so
+// subscriptions are naturally page-scoped; no explicit unsubscribe on unload.
+
+import { buildFilledSlot } from '/js/fightSlots.js';
+import { generateCombat, prepareTeams, healFull, rotateCombatToViewer } from '/js/combat.js';
+import { seededRandom } from '/js/utils.js';
+
+const wanted = new Set();
+
+// Deterministic Fisher-Yates keyed to the session id, preserving team sizes — every
+// client (and the host's authoritative run) produce the identical shuffled lineup.
+// With >1 brawler per account the shuffled unit is the whole account block (grouped by
+// owner), never a lone brawler, so an account's brawlers always stay on one team. Team
+// sizes are multiples of the block size (enforced on create), so re-slicing by size
+// always falls on block boundaries.
+const shuffleTeams = (teams, seed, ownerByUuid, blockSize) => {
+  const sizes = teams.map((t) => t.length);
+  const all = teams.flat();
+
+  let units;
+  if (blockSize > 1) {
+    const blocks = new Map();
+    all.forEach((brawler) => {
+      const owner = ownerByUuid[brawler.uuid];
+      if (!blocks.has(owner)) blocks.set(owner, []);
+      blocks.get(owner).push(brawler);
+    });
+    units = [...blocks.values()];
+  } else {
+    units = all.map((brawler) => [brawler]);
+  }
+
+  for (let i = units.length - 1; i > 0; i--) {
+    const j = seededRandom(0, i, `${seed}_shuffle_${i}`);
+    [units[i], units[j]] = [units[j], units[i]];
+  }
+
+  const flat = units.flat();
+  const out = [];
+  let k = 0;
+  for (const size of sizes) {
+    out.push(flat.slice(k, k + size));
+    k += size;
+  }
+  return out;
+};
+
+// Build the same seeded combat on every attendee's screen from the session doc —
+// seed is the mongo _id, so the replay is identical everywhere. context 'teamplay'
+// + myTeamIndex let the shared Combat overlay show the result from my perspective.
+export const buildTeamplayCombat = (doc) => {
+  const ownerByUuid = {};
+  const ownerNameByUuid = {};
+  doc.teams.forEach((team) =>
+    team.slots.forEach((slot) => {
+      if (!slot.brawler) return;
+      ownerByUuid[slot.brawler.uuid] = slot.owner_id;
+      ownerNameByUuid[slot.brawler.uuid] = slot.owner_name;
+    }),
+  );
+
+  let teams = doc.teams.map((team) =>
+    team.slots
+      .filter((slot) => slot.brawler)
+      .map((slot) => JSON.parse(JSON.stringify(slot.brawler))),
+  );
+  if (doc.rules.randomizedTeams)
+    teams = shuffleTeams(teams, doc._id, ownerByUuid, doc.rules.brawlersPerAccount);
+
+  const healed = teams.map((team) => healFull(team));
+  const combat = generateCombat(prepareTeams(...healed), doc._id);
+  const myTeamIndex = healed.findIndex((team) =>
+    team.some((b) => ownerByUuid[b.uuid] === $.accountId),
+  );
+
+  // Rotate the arena so my brawlers stand on the left, whichever team I'm on. The
+  // fight itself is identical for everyone; only the camera spins per viewer.
+  rotateCombatToViewer(combat, myTeamIndex);
+
+  // Spectator team names: with >1 brawler per account a team belongs to its player(s),
+  // so name it after them (matching the room's labelling); otherwise it's a free-for-all
+  // mix and stays "Team N". Indexed to the (post-shuffle) combat teams via combatant uuid.
+  // Newline-joined so a multi-account team stacks its names in the badge (TeamBadge
+  // renders it as pre-line); it only ever feeds a TeamBadge, never inline text.
+  const teamNames = combat.teamsStartState.map((team, i) =>
+    doc.rules.brawlersPerAccount > 1
+      ? [
+          ...new Set((team.combatants || []).map((c) => ownerNameByUuid[c.uuid]).filter(Boolean)),
+        ].join('\n') || `Team ${i + 1}`
+      : `Team ${i + 1}`,
+  );
+
+  return {
+    ...combat,
+    context: 'teamplay',
+    teamplayId: doc._id,
+    myTeamIndex,
+    // No brawlers of mine in the fight → I'm watching, not competing: the overlay shows
+    // the neutral result + team labels and skips the reward block (see Combat.html).
+    spectator: myTeamIndex === -1,
+    ownerByUuid,
+    // Distinct accounts (owner_ids, bots included) with brawlers in the fight —
+    // drives the team-label auto-show once more than two accounts are attending.
+    accountsAttending: new Set(Object.values(ownerByUuid).filter(Boolean)).size,
+    teamNames,
+    teamplayXp:
+      myTeamIndex === -1
+        ? 0
+        : teamplayXpForOutcome(
+            doc.rules,
+            !!combat.winningTeam?.combatants.some((c) => ownerByUuid[c.uuid] === $.accountId),
+          ),
+  };
+};
+
+// Re-open a finished session as a neutral replay from the top. Fetches the full doc
+// (the lists are lightweight), rebuilds the deterministic fight, and forces spectator
+// + historical so the result stays neutral and the strip reads "historical" regardless
+// of whether the viewer was in it. Plays again on every call (resumeAt 0).
+export const rewatchTeamplay = async (id) => {
+  if (!$.socket || !id) return;
+  const doc = await $.socket.sendAsync('teamplay/get', { id });
+  if (!doc?._id) return;
+  $.combat = {
+    ...buildTeamplayCombat(doc),
+    spectator: true,
+    historical: true,
+    startedAt: doc.startedAt,
+    resumeAt: 0,
+  };
+  $.overlay = { name: 'Combat' };
+};
+
+// Account experience awarded to every ludus on the WINNING team: a flat base lifted by
+// three independent modifiers, each 1× at its floor so a minimal lobby stays at 100.
+// Randomized teams ×1.5; +10% per brawler-per-account past the first; +50% per team past
+// the two-team minimum. The single source of truth for the create-modal preview, the
+// result overlay and the server grant — mirrored in server/events/teamplay/verify-reward.js.
+export const teamplayWinningXp = (randomizedTeams, brawlersPerAccount, amountOfTeams) =>
+  Math.round(
+    100 *
+      (randomizedTeams ? 1.5 : 1) *
+      (1 + 0.1 * (brawlersPerAccount - 1)) *
+      (1 + 0.5 * (amountOfTeams - 2)),
+  );
+
+// Participation experience for the losing side — a flat 10% of the winning value, so
+// showing up and fighting still pays a little. Mirrored in verify-reward.js.
+export const teamplayParticipationXp = (randomizedTeams, brawlersPerAccount, amountOfTeams) =>
+  Math.round(teamplayWinningXp(randomizedTeams, brawlersPerAccount, amountOfTeams) * 0.1);
+
+// The per-account grant given whether that account was on the winning side: the full
+// winning-team value for a win, the participation cut for a loss. Shared by the result
+// overlay (client) and the server grant — mirrored in server/events/teamplay/verify-reward.js.
+export const teamplayXpForOutcome = (rules, won) =>
+  won
+    ? teamplayWinningXp(rules.randomizedTeams, rules.brawlersPerAccount, rules.amountOfTeams)
+    : teamplayParticipationXp(rules.randomizedTeams, rules.brawlersPerAccount, rules.amountOfTeams);
+
+// The winning team resolved to real account ids, via combatant uuid ownership — the only
+// space-safe winner signal (team indices are shuffled by randomized teams and rotated
+// per viewer, so they can't identify who won). Bots (no owner) drop out. Persisted at
+// start so verify-reward can grant the winning side regardless of anyone's rotation.
+export const teamplayWinningOwnerIds = (combat) =>
+  combat.winningTeam
+    ? [
+        ...new Set(
+          combat.winningTeam.combatants.map((c) => combat.ownerByUuid[c.uuid]).filter(Boolean),
+        ),
+      ]
+    : [];
+
+// Reopen the (deterministic) combat for a session that started while I was away —
+// a reloaded client lost the live overlay, so it rebuilds the same seeded fight and
+// seeks it to the real-time playhead (now − when it went live): mid-fight for a live
+// session, straight to the end state for a finished one. Never replays from the top.
+export const resumeTeamplayCombat = () => {
+  const tp = $.pvp.teamplay.active;
+  if (!tp || (tp.status !== 'live' && tp.status !== 'completed')) return;
+  $.combat = {
+    ...buildTeamplayCombat(tp),
+    resumeAt: Math.max(0, Date.now() - (tp.startedAt || 0)),
+  };
+  $.overlay = { name: 'Combat' };
+};
+
+// Per-brawler final HP keyed to owner + uuid — the host sends this to the backend
+// as the authoritative outcome to write back to each account's roster.
+export const teamplayEndState = (combat) =>
+  (combat.teamsEndState || []).flatMap((team) =>
+    team.combatants.map((c) => ({
+      owner_id: combat.ownerByUuid[c.uuid] || null,
+      uuid: c.uuid,
+      // Floored: a lethal hit overkills currentHealth negative (combat keeps the
+      // remainder for the hit-size maths), but a stored roster never sits below 0 —
+      // a negative would surface as e.g. "-43%" HP back in the lobby.
+      currentHealth: Math.max(0, c.combatStats.currentHealth),
+    })),
+  );
+
+const emptySlot = (index, label) => ({
+  empty: true,
+  key: index,
+  index,
+  uuid: '',
+  characterIndex: -1,
+  name: '',
+  image: '',
+  mugshotX: 0,
+  mugshotY: 0,
+  hp: 0,
+  armor: 0,
+  damage: 0,
+  abilities: [],
+  availableAbilities: [],
+  lastTick: 0,
+  label,
+});
+
+// Map a team's stored slots into the BrawlerSlot shape, reusing the same builder
+// the duel uses. Foreign brawlers hydrate from the shared constants, so every
+// client renders identical frozen rosters; characterIndex is dropped (read-only).
+export const teamplayTeamSlots = (team) =>
+  team.slots.map((slot, i) => {
+    if (!slot.brawler) return emptySlot(i, 'Open slot');
+    try {
+      const built = buildFilledSlot(slot.brawler, i);
+      return { ...built, key: i, characterIndex: -1, label: slot.owner_name || built.name };
+    } catch {
+      return emptySlot(i, slot.owner_name || 'Brawler');
+    }
+  });
+
+const sub = (event, payload) => $.socket?.sendSync(event, payload);
+
+export const subscribeTeamplay = (id) => {
+  wanted.add(`teamplay:${id}`);
+  sub('teamplay/subscribe', { id });
+};
+
+export const unsubscribeTeamplay = (id) => {
+  wanted.delete(`teamplay:${id}`);
+  sub('teamplay/unsubscribe', { id });
+};
+
+export const subscribeLobby = () => {
+  wanted.add('teamplay:lobby');
+  sub('teamplay/subscribe-lobby', {});
+};
+
+export const unsubscribeLobby = () => {
+  wanted.delete('teamplay:lobby');
+  sub('teamplay/unsubscribe-lobby', {});
+};
+
+export const resubscribe = () =>
+  wanted.forEach((name) =>
+    name === 'teamplay:lobby'
+      ? sub('teamplay/subscribe-lobby', {})
+      : sub('teamplay/subscribe', { id: name.slice('teamplay:'.length) }),
+  );
+
+export const fetchTeamplays = async () => {
+  if (!$.socket) return;
+  $.pvp.teamplay.list = await $.socket.sendAsync('teamplay/list', {});
+};
+
+export const fetchRecentTeamplays = async () => {
+  if (!$.socket) return [];
+  return $.socket.sendAsync('teamplay/recent', {});
+};
+
+export const fetchTeamplay = async (id) => {
+  if (!$.socket) return;
+  $.pvp.teamplay.viewed = await $.socket.sendAsync('teamplay/get', { id });
+};
+
+export const sendTeamplayChat = (text) => {
+  if (!$.socket || !$.pvp.teamplay.viewed?._id || !text.trim()) return;
+  $.socket.sendSync('teamplay/chat', {
+    token: $.token,
+    id: $.pvp.teamplay.viewed._id,
+    text: text.trim(),
+  });
+};
+
+// After a potion heals the roster, push my committed brawlers' new HP into the
+// open session so other players see the health rise and the host's start gate
+// reflects it. Not server-validated for now (per design) — the doc trusts it.
+export const broadcastTeamplayHeal = () => {
+  const tp = $.pvp.teamplay.active;
+  if (!tp || tp.status !== 'open' || !$.socket) return;
+  const healed = [];
+  tp.teams.forEach((team) =>
+    team.slots.forEach((slot) => {
+      if (slot.owner_id !== $.accountId || !slot.brawler) return;
+      const live = $.characters.find((c) => c.uuid === slot.brawler.uuid);
+      if (live)
+        healed.push({
+          uuid: slot.brawler.uuid,
+          currentHealth: live.overrides?.combatStats?.currentHealth,
+        });
+    }),
+  );
+  if (healed.length)
+    $.socket.sendSync('teamplay/heal-broadcast', { token: $.token, id: tp._id, healed });
+};
+
+export const fetchMyActiveTeamplay = async () => {
+  if (!$.socket || !$.token) return;
+  try {
+    const tp = await $.socket.sendAsync('teamplay/my-active', { token: $.token });
+    $.pvp.teamplay.active = tp;
+    // Stay subscribed to my session's room app-wide so the combat-start broadcast
+    // pops on my screen even when I'm not currently viewing the room page.
+    if (tp?._id) subscribeTeamplay(tp._id);
+  } catch {
+    $.pvp.teamplay.active = null;
+  }
+};
+
+const reflect = (doc) => {
+  if ($.pvp.teamplay.viewed?._id === doc._id) $.pvp.teamplay.viewed = doc;
+  if ($.pvp.teamplay.active?._id === doc._id) $.pvp.teamplay.active = doc;
+};
+
+// Mirror the authoritative post-combat HP onto my own roster so the sidebar and
+// next fight reflect the damage immediately (the backend persists the same values).
+const applyTeamplayWriteback = (doc) => {
+  const hp = {};
+  (doc.endState || []).forEach((e) => {
+    if (e.owner_id === $.accountId) hp[e.uuid] = e.currentHealth;
+  });
+  if (!Object.keys(hp).length) return;
+  $.characters = $.characters.map((c) =>
+    hp[c.uuid] === undefined
+      ? c
+      : {
+          ...c,
+          overrides: {
+            ...c.overrides,
+            combatStats: { ...c.overrides?.combatStats, currentHealth: hp[c.uuid] },
+          },
+        },
+  );
+};
+
+// Registered once on the shared event target; survives reconnects.
+export const initTeamplayListeners = (ws) => {
+  // Exposed for the Sidebar's potion-heal handler + brawler-badge resume (neither
+  // imports this module).
+  window.broadcastTeamplayHeal = broadcastTeamplayHeal;
+  window.resumeTeamplayCombat = resumeTeamplayCombat;
+  window.rewatchTeamplay = rewatchTeamplay;
+  ws.on('lobby:update', () => fetchTeamplays());
+  ws.on('teamplay:update', reflect);
+  ws.on('teamplay:started', (doc) => {
+    reflect(doc);
+    // The host already popped its own combat locally (it's excluded from this
+    // broadcast); every other attendee replays the same seeded fight now.
+    if (!$.overlay?.name) {
+      $.combat = buildTeamplayCombat(doc);
+      $.overlay = { name: 'Combat' };
+    }
+  });
+  ws.on('teamplay:completed', (doc) => {
+    reflect(doc);
+    applyTeamplayWriteback(doc);
+  });
+  ws.on('teamplay:chat', ({ id, message }) => {
+    if ($.pvp.teamplay.viewed?._id === id)
+      $.pvp.teamplay.viewed = {
+        ...$.pvp.teamplay.viewed,
+        chat: [...($.pvp.teamplay.viewed.chat || []), message],
+      };
+  });
+  ws.on('teamplay:deleted', (data) => {
+    if ($.pvp.teamplay.active?._id === data._id) $.pvp.teamplay.active = null;
+    if ($.pvp.teamplay.viewed?._id === data._id) {
+      $.pvp.teamplay.viewed = null;
+      notify.info('This teamplay was cancelled');
+      if (location.pathname.startsWith('/teamplay/')) location.href = '/teamplay';
+    }
+  });
+};
diff --git a/js/tooltip.js b/js/tooltip.js
new file mode 100644
index 00000000..fdb6bd34
--- /dev/null
+++ b/js/tooltip.js
@@ -0,0 +1,307 @@
+import ABILITIES, { ALL_ABILITIES } from '/js/constants/ABILITIES.js';
+import STATUS_EFFECTS, { isStandaloneStatus } from '/js/constants/STATUS_EFFECTS.js';
+import { STAT_LABELS, STAT_DESCRIPTIONS, LUCKY_STATS, STAT_ORDER } from '/js/constants/STATS.js';
+import { TOLERANCE_CATEGORY_KEYS, TOLERANCE_CHILDREN } from '/js/constants/TOLERANCE.js';
+import { ALL_ELEMENTS } from '/js/constants/ELEMENTS.js';
+import { capitalizeFirstLetter } from '/js/helpers.js';
+import { abilityStatusChips } from '/js/utils.js';
+
+const statRank = (key) => {
+  const i = STAT_ORDER.indexOf(key);
+  return i === -1 ? Infinity : i;
+};
+
+// A description part is either a plain string or a function of the hydrated
+// ability (so the %s in it read from the live numbers). Resolve to a string.
+const resolveDesc = (part, ability) => (typeof part === 'function' ? part(ability) : part || '');
+
+// Who a buff/debuff ability lands on. Self/team are buffs (on allies); enemy
+// hits a single target, enemies (e.g. Stomp) the whole enemy team. Each maps to
+// the phrasing shown in the tooltip's "Target" row. Room here for future spreads
+// like 'everyone', '1 enemy + 2 adjacent', 'myself + 2 adjacent' — add a key.
+const ABILITY_TARGETS = {
+  self: 'self',
+  team: 'my team',
+  ally: '1 random ally',
+  enemy: '1 enemy',
+  enemies: 'enemy team',
+};
+
+// A status applied directly (not built up through a threshold) lasts for a
+// duration; its alt-revealed amount is that duration in ticks — e.g. War Cry
+// reads "6 Inspired", Lacerate "4 Bleed". Variable durations (∞ stuns) show none.
+const isDirectEffect = (key) => STATUS_EFFECTS[key]?.kind === 'effect';
+
+export const combatStatsToList = (combatStats, expandModifiers = false) => {
+  const flat = Object.entries(combatStats || {})
+    .filter(([key, value]) => STAT_LABELS[key] && value && typeof value !== 'object')
+    .map(([key, value]) => {
+      const percentage = LUCKY_STATS.includes(key);
+      return {
+        icon: key,
+        label: STAT_LABELS[key],
+        value: percentage ? `${Math.round(value * 100)}%` : value,
+        percentage,
+      };
+    });
+
+  const modifiers = expandModifiers
+    ? Object.entries(combatStats?.modifiers || {})
+        .filter(([key, value]) => STAT_LABELS[key] && value)
+        .map(([key, value]) => ({
+          icon: key,
+          label: STAT_LABELS[key],
+          value: `+${Math.round(value * 100)}%`,
+          percentage: true,
+        }))
+    : [];
+
+  const resistances = Object.entries(combatStats?.resistances || {})
+    .filter(([key, value]) => ALL_ELEMENTS[key] && value)
+    .map(([key, value]) => ({
+      icon: key,
+      label: `${capitalizeFirstLetter(ALL_ELEMENTS[key].name)} resistance`,
+      value: `${Math.round(value)}%`,
+      percentage: true,
+    }));
+
+  // Tolerance is a nested bucket like resistances: a key is either a top category
+  // (dot/immobilize/debuff) or an individual child (poisoned/bleeding/…). Resolve
+  // each to its display icon — category icons equal their key; children carry their
+  // own icon (e.g. poisoned → venom) — and label from STAT_DESCRIPTIONS.
+  const tolerances = Object.entries(combatStats?.tolerance || {})
+    .filter(([, value]) => value)
+    .map(([key, value]) => {
+      const icon = TOLERANCE_CATEGORY_KEYS.includes(key) ? key : TOLERANCE_CHILDREN[key]?.icon;
+      return { icon, label: STAT_DESCRIPTIONS[icon]?.name, value, percentage: false };
+    })
+    .filter((row) => row.label);
+
+  return [...flat, ...modifiers, ...resistances, ...tolerances].sort(
+    (a, b) => statRank(a.icon) - statRank(b.icon),
+  );
+};
+
+const SLOT_LABELS = {
+  oneHand: 'One-hand weapon',
+  twoHand: 'Two-hand weapon',
+  offHand: 'Off-hand shield',
+  armor: 'Armor',
+  accessory: 'Accessory',
+  trinket: 'Trinket',
+};
+
+export const equipmentTooltipProps = (item) => {
+  const abilities = (item.abilities || []).map((a, i) => {
+    const h = ABILITIES(a, true);
+    return {
+      uuid: `${h.id}-${i}`,
+      id: h.id,
+      name: h.name,
+      ticks: h.ticks,
+      icon: h.icon,
+      basic: !!h.basic,
+      overflow: false,
+      statusEffects: h.statusEffects || [],
+      statusChips: abilityStatusChips(h),
+      elements: h.elements || [],
+      element: h.elements?.length > 1 ? undefined : h.elements?.[0],
+      multi: (h.elements?.length || 0) > 1,
+      description:
+        resolveDesc(ALL_ABILITIES[h.id]?.description?.extended, h) ||
+        resolveDesc(ALL_ABILITIES[h.id]?.description?.simple, h),
+    };
+  });
+
+  // The upper-right corner tiles are a weapon/shield treatment (a weapon's basic
+  // abilities fill the bar). A trinket/accessory/armor that grants an ability shows
+  // it as a special-ability box below instead — never in the corner.
+  const isWeapon = ['oneHand', 'twoHand', 'offHand'].includes(item.slotsIn);
+  const basics = isWeapon ? abilities.filter((a) => a.basic) : [];
+  const specials = isWeapon ? abilities.filter((a) => !a.basic) : abilities;
+
+  return {
+    name: item.name,
+    level: item.level,
+    slotsIn: item.slotsIn,
+    slotLabel: SLOT_LABELS[item.slotsIn],
+    // Mirrors the ability tooltip's "<element> Ability" label — an elemental piece
+    // reads "<element> Main-hand weapon"; a plain piece omits the prefix entirely.
+    kind: item.elements?.length > 1 ? 'Exotic' : item.elements?.[0],
+    // Mirror the ability tooltip: suppress the singular `element` when several so
+    // the multi/spectrum treatment takes over.
+    element: (item.elements?.length || 0) > 1 ? undefined : item.elements?.[0],
+    elements: item.elements || [],
+    multi: (item.elements?.length || 0) > 1,
+    description: item.description,
+    stats: combatStatsToList(item.combatStats, true),
+    // Basic abilities fill the ability bar; non-basic ones are shown in their
+    // own boxes below it (matching the original equipment tooltip). The corner
+    // tiles render in a single row.
+    basicAbilities: basics,
+    specialAbilities: specials,
+  };
+};
+
+export const abilityTooltipProps = (ability, stats = null) => {
+  const { id, ticks, name, statusEffects: effects } = ability;
+  const a = ABILITIES(id, true, ticks ? { overrides: { ticks } } : undefined);
+
+  const dmg = a.calc.damage()?.result;
+  const heal = a.calc.healing()?.result;
+
+  // Prefer the loop item's hydrated name + statusEffects tuples (carry per-character
+  // overrides like a basic attack's "Basic Swing" + no effects); fall back to the
+  // freshly-hydrated ability. Each entry is [key, factor]; factor scales the
+  // ability's ticks into buildup (threshold) or duration (direct effect), and is
+  // the proc chance for Uninterruptable.
+  const effectTuples = effects === undefined ? a.statusEffects || [] : effects;
+  const factorFor = (key) => effectTuples.find(([k]) => k === key)?.[1] ?? 1;
+  const statusTickAmount = (key) => Math.floor(a.ticks * factorFor(key));
+  const hasEffect = (key) => effectTuples.some(([k]) => k === key);
+
+  const chipFor = (key) => {
+    const fx = key && STATUS_EFFECTS[key];
+    if (!fx) return null;
+    const threshold = fx.kind === 'threshold';
+    return {
+      statusKey: key,
+      icon: threshold ? STATUS_EFFECTS[fx.convertsInto]?.icon || fx.icon : fx.icon,
+      max: threshold ? 1 : 0,
+      standalone: isStandaloneStatus(key),
+      category: fx.category,
+    };
+  };
+
+  // Caster flags get their own rows below; the rest become status chips.
+  const FLAG_KEYS = ['uninterruptable', 'unstoppable'];
+  const statusEffects = effectTuples
+    .filter(([key]) => !FLAG_KEYS.includes(key))
+    .map(([key]) => {
+      const fx = STATUS_EFFECTS[key];
+      const into = fx?.convertsInto ? STATUS_EFFECTS[fx.convertsInto] : null;
+      const threshold = fx?.kind === 'threshold';
+      const dur = statusTickAmount(key);
+      return {
+        word: fx?.singleWord,
+        chip: chipFor(key),
+        // Alt-revealed numbers: thresholds reveal the buildup this hit applies
+        // (ticks × factor); direct effects reveal their duration in ticks (e.g.
+        // Lacerate → "4 Bleed"). Skip variable durations (∞ stuns).
+        amount: threshold ? dur : isDirectEffect(key) && dur && dur !== Infinity ? dur : null,
+        convertsWord: into?.singleWord,
+        convertsChip: chipFor(fx?.convertsInto),
+        convertsAmount: into ? (fx?.convertAmount ?? null) : null,
+      };
+    });
+
+  const hasAltInfo = statusEffects.some((fx) => fx.amount != null);
+
+  const isChanneling = a.type === 'Channeling';
+  // Direct effect/buff statuses (excluding caster flags) the ability applies.
+  const directKeys = effectTuples
+    .map(([k]) => k)
+    .filter((k) => isDirectEffect(k) && !FLAG_KEYS.includes(k));
+  const directEffect = directKeys.length > 0;
+
+  // Representative duration: a channel's length, or the longest direct effect it
+  // applies. Thresholds and pure attacks have no duration row.
+  const dur = isChanneling
+    ? a.ticks
+    : directKeys.length
+      ? Math.max(...directKeys.map(statusTickAmount))
+      : null;
+
+  const fmtTicks = (n) => `${n} tick${n === 1 ? '' : 's'}`;
+  const durationStr = dur === Infinity ? 'variable' : dur ? fmtTicks(dur) : null;
+
+  // Channeling abilities have no wind-up/down row, so their channel length reads as
+  // a plain "Duration"; other direct effects show their effect length as
+  // "Applications" instead.
+  const showDuration = !!durationStr && (isChanneling || (!directEffect && !hasAltInfo));
+
+  // Applications, in ticks. A direct DOT (Lacerate) uses its own duration; a
+  // limit ability (Stab/Stomp) shows the amount of the limit it stacks on each
+  // hit (the wound/concussion it applies), not the effect that limit converts to.
+  const limitFx = statusEffects.find((fx) => fx.amount != null);
+  const applications = isChanneling
+    ? null
+    : directEffect
+      ? durationStr
+      : limitFx
+        ? fmtTicks(limitFx.amount)
+        : null;
+
+  // Every ability announces who it hits, mapped to a readable phrase.
+  const targets = ABILITY_TARGETS[a.target] ? { value: ABILITY_TARGETS[a.target] } : null;
+
+  return {
+    name: name || a.name,
+    type: a.type,
+    // Hybrid abilities (2+ elements) render as a spectrum, not a single element —
+    // suppress the singular `element` so the multi treatment takes over.
+    element: a.elements?.length > 1 ? undefined : a.elements?.[0],
+    elements: a.elements || [],
+    multi: (a.elements?.length || 0) > 1,
+    kind: a.elements?.length > 1 ? 'Exotic' : a.elements?.[0] || 'Physical',
+    ticks: a.ticks,
+    chainTicks: a.chainLink ? a.ticks / a.chainLink : null,
+    duration: durationStr,
+    showDuration,
+    applications,
+    damage: dmg
+      ? {
+          amount: ability.damage || (stats ? Math.floor(stats.damage * dmg) : null),
+          pct: +(dmg * 100).toFixed(1),
+        }
+      : null,
+    healing: heal
+      ? {
+          amount: ability.healing || (stats ? Math.floor(stats.maxHealth * heal) : null),
+          pct: +(heal * 100).toFixed(1),
+        }
+      : null,
+    modifiers: combatStatsToList(a.combatStats).map((r) => ({
+      ...r,
+      // value is a number for flat stats (armor penetration, damage) and a "N%"
+      // string for percentage stats — sign-test both, emit a signed string.
+      value: String(r.value).startsWith('-') ? `${r.value}` : `+${r.value}`,
+    })),
+    statusEffects,
+    uninterruptable: hasEffect('uninterruptable')
+      ? { pct: Math.round(factorFor('uninterruptable') * 100), chip: chipFor('uninterruptable') }
+      : null,
+    unstoppable: hasEffect('unstoppable') ? { chip: chipFor('unstoppable') } : null,
+    directEffect,
+    hasAltInfo,
+    targets,
+    description: {
+      simple: resolveDesc(ALL_ABILITIES[id]?.description?.simple, a),
+      extended: resolveDesc(ALL_ABILITIES[id]?.description?.extended, a),
+    },
+  };
+};
+
+// Status tooltip: name, description, and the matching StatusChip for the heading.
+// Accepts a combat status (rich, carries value/ticks) or a bare { statusKey } from
+// the gallery, filling gaps from STATUS_EFFECTS so the chip mirrors the card.
+export const statusTooltipProps = (status) => {
+  const key = status.statusKey;
+  const fx = STATUS_EFFECTS[key] || {};
+  const threshold = fx.kind === 'threshold';
+  const description = (status.description || fx.description || '').replace(
+    /\d+(?:\.\d+)?%/g,
+    '<span text-green>$&</span>',
+  );
+  return {
+    name: status.name || fx.name || '',
+    description,
+    chip: {
+      statusKey: key,
+      icon: status.icon || (threshold ? STATUS_EFFECTS[fx.convertsInto]?.icon || fx.icon : fx.icon),
+      max: status.max > 0 || threshold ? 1 : 0,
+      standalone: status.standalone ?? isStandaloneStatus(key),
+      category: fx.category,
+    },
+  };
+};
diff --git a/js/utils.js b/js/utils.js
new file mode 100644
index 00000000..94ef3d1f
--- /dev/null
+++ b/js/utils.js
@@ -0,0 +1,610 @@
+import seedRandom from 'seedrandom';
+import { COMBAT_TICK_TIME, COMBAT_RING_BASE_RADIUS } from '/js/constants/APP.js';
+import EQUIPMENT from '/js/constants/EQUIPMENT.js';
+import WEAPON_TYPES from '/js/constants/WEAPON_TYPES.js';
+import ABILITIES, { TYPE } from '/js/constants/ABILITIES.js';
+import CHARACTERS from '/js/constants/CHARACTERS.js';
+import STATUS_EFFECTS, { STATUS_DISPLAY_ORDER } from '/js/constants/STATUS_EFFECTS.js';
+import { ZERO_RESISTANCES, ALL_ELEMENTS, ELEMENT_KEYS } from '/js/constants/ELEMENTS.js';
+import {
+  TOLERANCE_CATEGORIES,
+  TOLERANCE_CATEGORY_KEYS,
+  TOLERANCE_CHILDREN,
+  TOLERANCE_CHILD_BY_THRESHOLD,
+  effectiveTolerance,
+} from '/js/constants/TOLERANCE.js';
+import {
+  STAT_LABELS,
+  REGULAR_STATS,
+  LUCKY_STATS,
+  MODIFIER_STATS,
+  OTHER_STATS,
+  bestCombatStat,
+  scaleCombatStat,
+} from '/js/constants/STATS.js';
+import { deepAdd, capitalizeFirstLetter } from '/js/helpers.js';
+import { getLevelByExperience } from '/js/level.js';
+import { generateCombat, prepareTeams } from '/js/combat.js';
+
+export const DEFAULT_PROVOCATION = 5;
+
+// A boss gets +50% on its single specialization stat (whichever bestCombatStat surfaces).
+export const BOSS_SPECIALIZATION_BONUS = 1.5;
+
+const fmtStat = (v, asPct) => {
+  if (v === 0) return '-';
+  if (asPct) return `${Math.round(v * 100)}%`;
+  if (v >= 1) return v;
+  return `${(v * 100).toFixed(0)}%`;
+};
+
+const statRow = (key, source, asPct) => ({
+  icon: key,
+  label: STAT_LABELS[key],
+  value: fmtStat(source[key] || 0, asPct),
+});
+
+const fmtResistance = (v) => (v ? `${Math.round(v)}%` : '-');
+
+// Block chance only works with a shield in hand — a shield being any equipped item
+// whose weapon type is `shield`, in whatever slot it sits. NPCs are exempt: they
+// block bare-handed by design, so their block chance always applies.
+export const hasShieldEquipped = (character) =>
+  Object.values(character?.equipment || {})
+    .filter(Boolean)
+    .some((ref) => EQUIPMENT(ref, true)?.type?.name === WEAPON_TYPES.shield.name);
+
+export const blockChanceActive = (character) =>
+  character?.npc === true || hasShieldEquipped(character);
+
+export const buildStatGroups = (combatStats, character) => {
+  const mods = combatStats.modifiers || {};
+  const tolerance = combatStats.tolerance || {};
+  // A player's block chance is inert without a shield — surface it struck-through
+  // with a red 0% (StatGroup renders the override off `row.inactive`).
+  const blockInert = !!character && combatStats.blockChance > 0 && !blockChanceActive(character);
+  return {
+    base: REGULAR_STATS.map((key) => statRow(key, combatStats)),
+    lucky: LUCKY_STATS.map((key) => {
+      const row = statRow(key, combatStats, true);
+      if (key === 'blockChance' && blockInert) row.inactive = true;
+      return row;
+    }),
+    modifiers: MODIFIER_STATS.map((key) => statRow(key, mods, true)),
+    resistances: ELEMENT_KEYS.map((key) => ({
+      icon: key,
+      label: capitalizeFirstLetter(ALL_ELEMENTS[key].name),
+      value: fmtResistance(combatStats.resistances?.[key] || 0),
+      percentage: true,
+    })),
+    // Each top category lists its own floor value, then its children at their
+    // effective tolerance (category floor + the child's own bump).
+    tolerance: TOLERANCE_CATEGORY_KEYS.flatMap((cat) => {
+      const def = TOLERANCE_CATEGORIES[cat];
+      return [
+        { icon: def.icon, label: def.name, value: fmtStat(tolerance[cat] || 0), category: true },
+        ...def.children.map((child) => ({
+          icon: TOLERANCE_CHILDREN[child].icon,
+          label: TOLERANCE_CHILDREN[child].name,
+          value: fmtStat(effectiveTolerance(tolerance, child)),
+          sub: true,
+        })),
+      ];
+    }),
+    other: OTHER_STATS.map((key) =>
+      key === 'provocation'
+        ? {
+            icon: key,
+            label: STAT_LABELS[key],
+            value: fmtStat((combatStats.provocation || 0) - DEFAULT_PROVOCATION),
+          }
+        : statRow(key, combatStats),
+    ),
+  };
+};
+
+export const runCombatSimulations = (simulationCount, allies, foes, seed, fightId) =>
+  Array(simulationCount)
+    .fill(0)
+    .reduce((wins, _, i) => {
+      if (!allies[0]) return wins;
+
+      const combat = generateCombat(prepareTeams(allies, foes), `${seed}${i}`, fightId);
+
+      if (combat?.winningTeam?.index === 0) return wins + 1;
+
+      return wins;
+    }, 0);
+
+export const calculateCombatStats = (...args) => {
+  const combined = args.reduce((acc, obj) => {
+    for (const [key, value] of Object.entries(obj)) {
+      acc[key] = (acc[key] || 0) + value;
+    }
+    return acc;
+  }, {});
+  return combined;
+};
+
+export const calculateAvailableAbilitiesByCharacter = (character) => {
+  const fromEquipment = Object.entries(character.equipment).flatMap(([slot, eq]) => {
+    if (!eq) return [];
+    const equipment = EQUIPMENT(eq, true);
+
+    return equipment.abilities.map((a, abilityIndex) => {
+      const instanceKey = `${character.id}::${slot}::${equipment.id}::${a.id}::${abilityIndex}`;
+      return {
+        ...a,
+        uuid: instanceKey,
+      };
+    });
+  });
+
+  const signature = character.signatureAbility
+    ? [
+        {
+          ...ABILITIES(character.signatureAbility, true),
+          uuid: `${character.id}::race::${character.signatureAbility.id}`,
+        },
+      ]
+    : [];
+
+  return [...fromEquipment, ...signature];
+};
+
+// The default ability bar for a character, derived from equipped gear: each
+// weapon contributes its basic abilities, empty hands contribute punches. Single
+// source of truth for both the detail page and recruitment so a brawler's bar is
+// correct the moment it exists — not only after the detail page has been opened.
+export const calculateDefaultAbilitiesByCharacter = (character) => {
+  const eq = character.equipment;
+  const slotsIn = (slot) => eq[slot] && EQUIPMENT(eq[slot], true).slotsIn;
+
+  const isShield = slotsIn('offHand') === 'offHand';
+  const isTwoHandedWeapon = slotsIn('mainHand') === 'twoHand';
+  const isOneHandedMainhand = slotsIn('mainHand') === 'oneHand';
+  const isOneHandedOffhand = slotsIn('offHand') === 'oneHand';
+  const isOneHandedWeapon = isOneHandedMainhand || isOneHandedOffhand;
+
+  const getBasicAbilities = (slot) => {
+    if (!eq[slot]) return [];
+    return EQUIPMENT(eq[slot], true)
+      .abilities.map((a) => ABILITIES(a, true))
+      .filter((a) => a.basic)
+      .map((a, i) => ({
+        ...ABILITIES(a),
+        uuid: `${character.id}::${slot}::${eq[slot]?.id}::${a.id}::${a.name}::${i}`,
+      }));
+  };
+
+  const punches = Array.from({ length: 6 }, (_, i) =>
+    ABILITIES({
+      id: 'punch',
+      uuid: `${character.id}::${i < 3 ? 'mainHand' : 'offHand'}::_::punch::${i}`,
+    }),
+  );
+
+  if (isTwoHandedWeapon) return getBasicAbilities('mainHand');
+
+  if (isShield)
+    return [
+      ...(isOneHandedWeapon ? getBasicAbilities('mainHand') : punches.slice(0, 3)),
+      ...getBasicAbilities('offHand'),
+    ];
+
+  if (isOneHandedWeapon)
+    return [
+      ...(isOneHandedMainhand ? getBasicAbilities('mainHand') : punches.slice(0, 3)),
+      ...(isOneHandedOffhand ? getBasicAbilities('offHand') : punches.slice(3, 6)),
+    ];
+
+  return punches;
+};
+
+// Player brawlers gain accelerating per-level stats: each 5-level tier grants a bigger
+// flat boost than the last, so leveling feels increasingly rewarding and the player
+// curve bends toward the enemy scaling (the player sets the baseline, NPCs follow). The
+// last tier (level 21+) continues past the cap for the scaling projection. Cumulative
+// natural stats land on 300 health / 75 damage at level 25.
+const BRAWLER_LEVEL_TIERS = [
+  { maxHealth: 4, damage: 1 },
+  { maxHealth: 8, damage: 2 },
+  { maxHealth: 12, damage: 3 },
+  { maxHealth: 16, damage: 4 },
+  { maxHealth: 20, damage: 5 },
+];
+
+const brawlerTier = (level) => BRAWLER_LEVEL_TIERS[Math.min(Math.floor((level - 1) / 5), 4)];
+
+// Flat per-level stats a brawler gains for reaching the given level — its tier rate.
+export const brawlerLevelReward = (level) => brawlerTier(level);
+
+// Cumulative natural stats a brawler carries at the given level (every tier rate summed
+// from level 1 up). A level-1 brawler already carries the first tier's flat boost.
+export const brawlerLevelStats = (level) => {
+  const idx = Math.min(Math.floor((level - 1) / 5), 4);
+  const stats = BRAWLER_LEVEL_TIERS.slice(0, idx).reduce(
+    (acc, t) => ({ maxHealth: acc.maxHealth + t.maxHealth * 5, damage: acc.damage + t.damage * 5 }),
+    { maxHealth: 0, damage: 0 },
+  );
+  const into = level - idx * 5;
+  const tier = BRAWLER_LEVEL_TIERS[idx];
+  return {
+    maxHealth: stats.maxHealth + tier.maxHealth * into,
+    damage: stats.damage + tier.damage * into,
+  };
+};
+
+export const calculateCombatStatsByCharacter = (character) => {
+  const isEnemy = character?.npc === true;
+  const characterLevel = character?.level || getLevelByExperience($.experience);
+  const levels = characterLevel - 1;
+  // Enemy armor holds off until level 5, then scales off its own floor — so early fights
+  // stay armor-free and the penetration lever only matters once enemies start wearing it.
+  const armorLevels = Math.max(0, characterLevel - 5);
+
+  // Enemy health/damage/armor scale linear + quadratic: the quadratic term is ~0 in
+  // the early game and dominates late, so PvE fights stay comfortable early and tighten
+  // toward level 25 (and flat armor penetration erodes against the rising armor). The
+  // 2:1 health:damage ratio keeps enemy time-to-kill, and thus fight length, stable as
+  // they scale. Player brawlers (and PvP opponents) climb the tiered brawler curve and
+  // stay gear-only on armor, so a player's growth is predictable and gear stays a lever.
+  const levelCombatStats = isEnemy
+    ? {
+        maxHealth: Math.round(4 * levels + 0.2 * levels * levels),
+        damage: Math.round(2 * levels + 0.1 * levels * levels),
+        maxArmor: Math.round(armorLevels + 0.04 * armorLevels * armorLevels),
+      }
+    : { ...brawlerLevelStats(characterLevel), maxArmor: 0 };
+
+  const parts = [
+    character.combatStats,
+    levelCombatStats,
+    ...Object.values(character.equipment)
+      .filter((equipment) => equipment !== null)
+      .map((equipment) => EQUIPMENT(equipment, true)?.combatStats ?? {}),
+  ];
+
+  const stats = parts.reduce((acc, cur) => deepAdd(acc, cur), {
+    modifiers: {},
+    tolerance: {},
+    resistances: { ...ZERO_RESISTANCES },
+    armorPenetration: 0,
+    provocation: DEFAULT_PROVOCATION,
+  });
+
+  const m = stats.modifiers;
+  if (m.maxHealth) stats.maxHealth = Math.floor(stats.maxHealth * (1 + m.maxHealth));
+  if (m.maxArmor) stats.maxArmor = Math.floor(stats.maxArmor * (1 + m.maxArmor));
+  if (m.damage) stats.damage = Math.floor(stats.damage * (1 + m.damage));
+  // "All tolerances" scales the top tolerance categories — children inherit it
+  // through effectiveTolerance, so every status debuff gets harder to land.
+  if (m.tolerance) {
+    for (const key of TOLERANCE_CATEGORY_KEYS) {
+      stats.tolerance[key] = Math.floor((stats.tolerance[key] || 0) * (1 + m.tolerance));
+    }
+  }
+
+  // Three enemy-only multipliers on top of base+level: count-scale (P/E, balances the
+  // fight to its intended team size), the creature's authored `power`, and a boss bonus.
+  // Health and damage only — armor keeps its own curve so it still trades against brawler
+  // armor penetration. currentHealth follows via healFull.
+  if (isEnemy) {
+    const scale = (character.countScale ?? 1) * (character.power ?? 1);
+    stats.maxHealth = Math.round(stats.maxHealth * scale * (character.boss ? 1.5 : 1));
+    stats.damage = Math.round(stats.damage * scale * (character.boss ? 1.2 : 1));
+  }
+
+  // A boss leans +50% into whatever it specializes in — the same stat surfaced as its
+  // Specialization. Boss promotion shifts per season, so resolve the stat from the base
+  // sheet at runtime rather than baking the bonus into any character.
+  if (character.boss)
+    scaleCombatStat(stats, bestCombatStat(character.combatStats), BOSS_SPECIALIZATION_BONUS);
+
+  return stats;
+};
+
+export const calculateTickStart = (abilities, index) => {
+  let tickStart = 0;
+  for (let i = 0; i < index; i++) {
+    tickStart += abilities[i]?.ticks || 0;
+  }
+  return tickStart;
+};
+
+// Single source of truth for the ability-bar segments shared by every page that
+// renders AbilityBar. Takes hydrated abilities + the character's maxTicks and
+// returns plain items carrying their tick offset and whether they fall past the
+// cutoff (overflow → rendered inactive/red). An ability is overflow when it
+// would *end* past maxTicks — the hard cap. The sequence runs only the prefix
+// that fits, so a blow that crosses the cap is dropped, not truncated.
+// Every status effect an ability applies, shaped for the round StatusChip and
+// ordered like the combatant card. `statusEffects` is a list of [key, factor]
+// tuples — Uninterruptable/Unstoppable ride along with the rest.
+// Thresholds show the icon they build toward (Concussed → Stunned) — their own
+// icons are deprecated — while keeping their status key for the threshold pin.
+export const abilityStatusChips = (ability) =>
+  (ability.statusEffects || [])
+    .map(([key]) => key)
+    .sort((a, b) => STATUS_DISPLAY_ORDER.indexOf(a) - STATUS_DISPLAY_ORDER.indexOf(b))
+    .map((key) => {
+      const fx = STATUS_EFFECTS[key];
+      if (!fx) return null;
+      const threshold = fx.kind === 'threshold';
+      return {
+        statusKey: key,
+        icon: threshold ? STATUS_EFFECTS[fx.convertsInto]?.icon || fx.icon : fx.icon,
+        max: threshold ? 1 : 0,
+      };
+    })
+    .filter(Boolean);
+
+export const buildAbilityBarItems = (abilities, maxTicks, stats = null) => {
+  let tickStart = 0;
+  return abilities.map((ability) => {
+    const chainLink = ability.chainLink || 0;
+    const dmgResult = ability?.calc?.damage?.()?.result;
+    const healResult = ability?.calc?.healing?.()?.result;
+    const item = {
+      uuid: ability.uuid,
+      id: ability.id,
+      name: ability.name,
+      ticks: ability.ticks,
+      icon: ability.icon,
+      basic: !!ability.basic,
+      elements: ability.elements || [],
+      statusEffects: ability.statusEffects || [],
+      statusChips: abilityStatusChips(ability),
+      damage: stats && dmgResult ? Math.floor(stats.damage * dmgResult) : 0,
+      healing: stats && healResult ? Math.floor(stats.maxHealth * healResult) : 0,
+      overrides: ability.overrides,
+      tickStart,
+      overflow: tickStart + (ability.ticks || 0) > maxTicks,
+      chainLink,
+      chainDividers:
+        chainLink > 1
+          ? Array.from(
+              { length: chainLink - 1 },
+              (_, j) => `${(((j + 1) / chainLink) * 100).toFixed(4)}%`,
+            )
+          : [],
+    };
+    tickStart += ability.ticks || 0;
+    return item;
+  });
+};
+
+// Where the active ability sequence loops: the end tick of the last ability
+// that fits entirely within the cutoff.
+export const calculateLastTick = (items, maxTicks) => {
+  const last = items.filter((a) => a.tickStart + a.ticks <= maxTicks).at(-1);
+  return last ? last.tickStart + last.ticks : 0;
+};
+
+// Even ring layout: a team's combatants spread evenly across its arc, spacing
+// scaled to the count. The single source of truth for combatant positions — both
+// the initial seating and every mid-fight restack (spawns, hatches) go through it,
+// so a team of N always sits the same way regardless of how it reached N.
+export const ringPosition = (teamIndex, teamCount, combatantCount, combatantIndex) => {
+  const rotation = 360 / teamCount;
+  const rot =
+    teamIndex * rotation +
+    270 -
+    rotation / 2 +
+    (rotation / (combatantCount + 1)) * (combatantIndex + 1);
+  const rad = (rot * Math.PI) / 180;
+  return {
+    x: Math.sin(rad) * COMBAT_RING_BASE_RADIUS,
+    y: Math.cos(rad) * COMBAT_RING_BASE_RADIUS,
+    rot,
+  };
+};
+
+export const prepareCombatant = (
+  characterRef,
+  teamCount,
+  combatantCount,
+  teamIndex,
+  combatantIndex,
+) => {
+  const character = CHARACTERS(characterRef, true);
+
+  const combatStats = calculateCombatStatsByCharacter(character);
+
+  combatStats.currentArmor = combatStats.maxArmor;
+  combatStats.bufferedHealth = 0;
+  combatStats.healingReceived = 0;
+
+  const abilitiesHydrated = character.abilities
+    .map((ability) => ABILITIES(ability, true))
+    .map((ability) => {
+      const { calc, ...rest } = ability;
+
+      return {
+        ...rest,
+        calc: undefined,
+        damage: ability?.calc?.damage()?.result || 0,
+        healing: ability?.calc?.healing()?.result || 0,
+      };
+    });
+
+  const abilitiesCut = abilitiesHydrated.filter(
+    (ability, i) =>
+      calculateTickStart(abilitiesHydrated, i) + (ability.ticks || 0) <= character.maxTicks,
+  );
+
+  const abilitiesCopied = abilitiesCut.reduce((a, ability, i) => {
+    const start = a[i - 1]?.end || 0;
+    const end = start + ability.ticks * COMBAT_TICK_TIME;
+    return [...a, { ...ability, start, end }];
+  }, []);
+
+  const abilities = abilitiesCut
+    .reduce((a, ability) => {
+      return ability?.chainLink
+        ? [
+            ...a,
+            ...Array(ability.chainLink)
+              .fill(0)
+              .map((_, i) => {
+                const { chainLink, ...ab } = ability;
+
+                ab.type = TYPE.WindUp;
+                ab.ticks = ability.ticks / ability.chainLink;
+                ab.castTicksRemaining = ability.ticks - i * ab.ticks;
+                if (i + 1 !== ability.chainLink) {
+                  ab.chainTo = i + 1;
+                }
+
+                return ab;
+              }),
+          ]
+        : [...a, ability];
+    }, [])
+    .reduce((a, ability, i) => {
+      const start = a[i - 1]?.end || 0;
+      const end = start + ability.ticks * COMBAT_TICK_TIME;
+      return [...a, { ...ability, start, end }];
+    }, []);
+
+  const position = ringPosition(teamIndex, teamCount, combatantCount, combatantIndex);
+
+  return {
+    ...character,
+    id: crypto.randomUUID(),
+    canBlock: blockChanceActive(character),
+    teamIndex,
+    eventTimestamp: 0,
+    eventAbility: abilitiesCut[0].id,
+    eventIndex: 0,
+    combatStats,
+    animations: [],
+    injectedAnimations: [],
+    audio: [],
+    position,
+    damage: 0,
+    statuses: {
+      knockedOut: 0,
+      ...Object.fromEntries(
+        Object.entries(STATUS_EFFECTS).map(([key, def]) => [
+          key,
+          def.kind === 'threshold'
+            ? {
+                max: effectiveTolerance(combatStats.tolerance, TOLERANCE_CHILD_BY_THRESHOLD[key]),
+                value: 0,
+              }
+            : { ticks: 0, value: 0 },
+        ]),
+      ),
+    },
+    abilities,
+    abilitiesCopied,
+  };
+};
+
+export const random = (min, max, factor = Math.random(), step = 1) => {
+  const steps = Math.round((max - min) / step);
+  const index = Math.floor(factor * (steps + 1));
+  const value = min + index * step;
+  return Math.round(value / step) * step;
+};
+
+export const seededRandom = (min, max, string, step = 1) =>
+  random(min, max, seedRandom(string)(), step);
+
+// Seeded weighted pick: returns the index of a weighted choice deterministically
+// from the seed string. Falls back to uniform when all weights are 0.
+export const seededWeightedIndex = (weights, string) => {
+  const total = weights.reduce((acc, w) => acc + Math.max(0, w), 0);
+  if (total <= 0) return Math.floor(seedRandom(string)() * weights.length);
+  let roll = seedRandom(string)() * total;
+  for (let i = 0; i < weights.length; i++) {
+    roll -= Math.max(0, weights[i]);
+    if (roll < 0) return i;
+  }
+  return weights.length - 1;
+};
+
+// Statistics live on $.statistics as a recursive { count?, max?, nodes? } tree.
+// incStat is the single logger: a count-stat accumulates at every path prefix, so a
+// parent's count is its whole subtree total (combat.pve.wins == sum of every fight);
+// a max-stat (pass { max }) keeps a high-water mark on the leaf alone. The tree is
+// reassigned each call so Vibe re-renders and the diff save picks it up.
+export const incStat = (path, { count = 1, max, primitive } = {}) => {
+  // A string path splits on dots; pass an array for an explicit multi-segment path.
+  // Keep segment keys dot-free: a dotted key (e.g. a raw chance '0.3') survives here
+  // but the save flattens to a Mongo dot-path and persists it nested (0→3).
+  const steps = Array.isArray(path) ? path : path.split('.');
+  // JSON clone, not structuredClone — $.statistics is a Vibe reactive proxy that
+  // structuredClone chokes on; the tree is pure JSON so this is exact (and matches
+  // how buildSavePayload clones the rest of $ state).
+  const tree = JSON.parse(JSON.stringify($.statistics || {}));
+
+  if (primitive) {
+    // Store the final segment as a bare number in its parent's node map; the path
+    // above stays pure containers (no count). Used for luck successes/fails so each
+    // tier's leaves read as plain numbers.
+    const last = steps[steps.length - 1];
+    const parent = steps
+      .slice(0, -1)
+      .reduce((node, step) => ((node.nodes ||= {})[step] ||= {}), tree);
+    (parent.nodes ||= {})[last] = (parent.nodes[last] || 0) + count;
+  } else if (max !== undefined) {
+    const leaf = steps.reduce((node, step) => ((node.nodes ||= {})[step] ||= {}), tree);
+    leaf.max = Math.max(leaf.max ?? -Infinity, max);
+  } else {
+    steps.reduce((node, step) => {
+      const child = ((node.nodes ||= {})[step] ||= {});
+      child.count = (child.count || 0) + count;
+      return child;
+    }, tree);
+  }
+
+  $.statistics = tree;
+};
+
+// Fold two statistics trees: counts add, maxes max, nodes union. Powers the
+// on-the-fly "all seasons" view from every season's stored tree.
+export const mergeStats = (a = {}, b = {}) => {
+  // Primitive (bare-number) leaves — e.g. luck successes/fails — merge by summing.
+  if (typeof a === 'number' || typeof b === 'number')
+    return (typeof a === 'number' ? a : 0) + (typeof b === 'number' ? b : 0);
+  const out = {};
+  if (a.count !== undefined || b.count !== undefined) out.count = (a.count || 0) + (b.count || 0);
+  if (a.max !== undefined || b.max !== undefined)
+    out.max = Math.max(a.max ?? -Infinity, b.max ?? -Infinity);
+  const keys = [...new Set([...Object.keys(a.nodes || {}), ...Object.keys(b.nodes || {})])];
+  if (keys.length) {
+    out.nodes = {};
+    keys.forEach((k) => (out.nodes[k] = mergeStats(a.nodes?.[k], b.nodes?.[k])));
+  }
+  return out;
+};
+
+export const colorStrength = (col, amt) => {
+  let usePound = false;
+
+  if (col[0] === '#') {
+    col = col.slice(1);
+    usePound = true;
+  }
+
+  const num = parseInt(col, 16);
+
+  let r = (num >> 16) + amt;
+
+  if (r > 255) r = 255;
+  else if (r < 0) r = 0;
+
+  let b = ((num >> 8) & 0x00ff) + amt;
+
+  if (b > 255) b = 255;
+  else if (b < 0) b = 0;
+
+  let g = (num & 0x0000ff) + amt;
+
+  if (g > 255) g = 255;
+  else if (g < 0) g = 0;
+
+  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
+};
diff --git a/js/version.js b/js/version.js
new file mode 100644
index 00000000..ae49b99d
--- /dev/null
+++ b/js/version.js
@@ -0,0 +1,2 @@
+// Generated — kept in sync with package.json by scripts/release-push.js. Do not edit by hand.
+export default '0.1.6';
diff --git a/package.json b/package.json
index 1ba7573a..7ef38a1c 100644
--- a/package.json
+++ b/package.json
@@ -1,51 +1,52 @@
 {
-  "name": "battle-brawlers",
-  "version": "0.0.3",
+  "name": "battleborn-brawlers",
+  "version": "0.1.6",
+  "type": "module",
   "scripts": {
-    "dev": "vite dev",
-    "predev": "bunx vercel env pull",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-vercel": "^5.4.3",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
-    "@types/eslint": "^9.6.0",
-    "@types/howler": "^2.2.12",
-    "autoprefixer": "^10.4.14",
-    "bun-types": "^1.1.27",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0",
-    "globals": "^15.0.0",
-    "postcss": "^8.4.24",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "5.38.3",
-    "svelte-check": "^4.0.0",
-    "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^4.1.0",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^5.0.3"
+    "predev": "npx vercel env pull .env.local",
+    "dev": "\"$(cd \"$(git rev-parse --git-common-dir)/../..\" && pwd)/dev.sh\" 'bunx vite --port $PORT'",
+    "images": "node scripts/images.js",
+    "seed-bots": "bun --preload ./scripts/app-path-resolver.js scripts/seed-bots.js",
+    "build": "bunx vite build",
+    "build:compiled": "node scripts/build-compiled.js",
+    "serve:compiled": "bunx vite preview --outDir compiled --port ${PORT:-4173}",
+    "preview:compiled": "bun run build:compiled && bun run serve:compiled",
+    "dev:compiled": "\"$(cd \"$(git rev-parse --git-common-dir)/../..\" && pwd)/dev.sh\" 'node scripts/dev-compiled.js'",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "git config core.hooksPath .githooks"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.12",
-    "async-await-websockets": "^3.0.5",
+    "@ape-egg/async-await-websockets": "^3.1.0",
+    "@ape-egg/vibe": "^2.1.22",
     "howler": "^2.2.4",
-    "prettier-plugin-tailwindcss": "^0.6.14",
-    "seedrandom": "^3.0.5",
-    "svelte-dnd-action": "^0.9.64",
-    "svelte-portal": "^2.2.1",
-    "sveltekit-autoimport": "^1.8.1"
+    "seedrandom": "^3.0.5"
   },
-  "type": "module",
-  "patchedDependencies": {
-    "svelte-dnd-action@0.9.64": "patches/svelte-dnd-action@0.9.64.patch"
-  }
+  "devDependencies": {
+    "@ape-egg/prettier-plugin-vibe": "^0.1.0",
+    "@ape-egg/vite-plugin-vibe": "^0.0.2",
+    "esbuild": "^0.28.0",
+    "mongodb": "^4.8.1",
+    "prettier": "^3.8.3",
+    "sharp": "^0.35.0",
+    "vite": "^8.0.8"
+  },
+  "vibe-compiler": {
+    "source": "./",
+    "output": "./compiled",
+    "pages": "pages",
+    "root": "pages",
+    "elementsAsIs": true,
+    "nodeModulesAsIs": true,
+    "minify": true,
+    "skipFiles": [
+      "server",
+      "scripts",
+      "dist",
+      "package.json",
+      "bun.lockb",
+      "vercel.json"
+    ]
+  },
+  "updated": "2026-06-19 19:30"
 }
diff --git a/pages/_internal/ability-designs.html b/pages/_internal/ability-designs.html
new file mode 100644
index 00000000..96134a55
--- /dev/null
+++ b/pages/_internal/ability-designs.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/AbilityDesignsContent.html"></component>
+      </page-content>
+    </component>
+  </body>
+</html>
diff --git a/pages/_internal/ability-scaling.html b/pages/_internal/ability-scaling.html
new file mode 100644
index 00000000..5bc98e62
--- /dev/null
+++ b/pages/_internal/ability-scaling.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/AbilityScalingContent.html"></component>
+      </page-content>
+    </component>
+  </body>
+</html>
diff --git a/pages/_internal/achievements.html b/pages/_internal/achievements.html
new file mode 100644
index 00000000..52185f65
--- /dev/null
+++ b/pages/_internal/achievements.html
@@ -0,0 +1,855 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Achievements · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { ALL_ACHIEVEMENTS } from '/js/constants/ACHIEVEMENTS.js';
+
+      // Dev tester: fire the real centre-screen reveal, cycling the catalog so each
+      // press shows a different banner (icon/title/goal). Plays the unlock fanfare too.
+      let achTestIndex = 0;
+      window.triggerTestAchievement = () => {
+        const a = ALL_ACHIEVEMENTS[achTestIndex++ % ALL_ACHIEVEMENTS.length];
+        $.achievementReveals = [
+          ...$.achievementReveals,
+          { id: a.id, at: Date.now(), icon: a.icon, title: a.title, description: a.description },
+        ];
+        try {
+          new window.Howl({
+            src: [window.AUDIO['Victory Stinger 1']],
+            volume: ($.settings?.volume?.sfx ?? 0.5) * ($.settings?.volume?.master ?? 0.5),
+          }).play();
+        } catch {}
+      };
+
+      $.achVariants = [
+        {
+          n: 1,
+          key: 'royal',
+          label: 'Royal Double-Frame',
+          note: 'The original — double gold frame, corner flourishes, round crest.',
+          earned: true,
+        },
+        {
+          n: 2,
+          key: 'plaque',
+          label: 'Classic Plaque',
+          note: 'The original — gold-framed parchment, square icon, eyebrow, name, score.',
+          earned: true,
+        },
+        {
+          n: 3,
+          key: 'obsidian',
+          label: 'Obsidian Epic',
+          note: 'The original — purple legendary plate, glowing gem and name.',
+          earned: true,
+        },
+        {
+          n: 4,
+          key: 'obsidian-frost',
+          label: 'Obsidian · Frost',
+          note: 'Exalted frost-cyan, gem to the right behind a hairline divider.',
+          earned: true,
+        },
+      ];
+
+      window.toggleAch = (key) =>
+        ($.achVariants = $.achVariants.map((v) =>
+          v.key === key ? { ...v, earned: !v.earned } : v,
+        ));
+
+      window.toggleAllAch = () => {
+        const on = $.achVariants.every((v) => v.earned);
+        $.achVariants = $.achVariants.map((v) => ({ ...v, earned: !on }));
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <ach-tester>
+          <button primary onclick="triggerTestAchievement()">Trigger achievement</button>
+          <span text-muted>Pops the real centre-screen reveal — cycles through the catalog.</span>
+        </ach-tester>
+
+        <ach-master onclick="toggleAllAch()">
+          <crow vertical left g="1" f="1">
+            <ach-master-title>Master switch</ach-master-title>
+            <ach-master-sub>Flip every banner between earned and not-yet-achieved</ach-master-sub>
+          </crow>
+          <ach-switch active="@[achVariants.every((v) => v.earned)]">
+            <ach-switch-knob></ach-switch-knob>
+          </ach-switch>
+        </ach-master>
+
+        <ach-intro>
+          <h2>Achievement Banners</h2>
+          <p text-muted>
+            The keeper banner styles, each shown twice — its <strong>dark-mode</strong> (black/gold)
+            treatment over a dimmed stage, and a <strong>light-mode</strong> (white/gold) treatment
+            on a bright one. Click any banner to toggle between earned and not-yet-achieved; the
+            master switch above flips them all at once. The gilded glare sweeps an earned banner
+            only, clipped to its frame.
+          </p>
+        </ach-intro>
+
+        <!-- each achVariants as v (v.key) -->
+          <ach-block>
+            <ach-head>
+              <ach-num>@[v.n]</ach-num>
+              <crow vertical left g="1" f="1">
+                <ach-name>@[v.label]</ach-name>
+                <ach-note>@[v.note]</ach-note>
+              </crow>
+            </ach-head>
+
+            <ach-stage>
+              <ach-slot>
+                <ach-state-label>@[v.earned ? 'Earned' : 'Not yet achieved']</ach-state-label>
+
+                <!-- if v.key === 'plaque' -->
+                  <ach-banner plaque locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-icon-frame>
+                      <icon victory></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-icon-frame>
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Achievement Earned' : 'Locked']</ach-eyebrow>
+                      <ach-title>Flawless Victory</ach-title>
+                      <ach-desc>Win an Arena bout without losing a single brawler.</ach-desc>
+                    </ach-body>
+                    <ach-points>10</ach-points>
+                  </ach-banner>
+                <!-- /if -->
+
+                <!-- if v.key === 'obsidian' -->
+                  <ach-banner obsidian locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-gem>
+                      <icon crystal></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-gem>
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Legendary Feat' : 'Locked']</ach-eyebrow>
+                      <ach-title>The Collector</ach-title>
+                      <ach-desc>Own one piece of gear from every element.</ach-desc>
+                    </ach-body>
+                  </ach-banner>
+                <!-- /if -->
+
+                <!-- if v.key === 'obsidian-frost' -->
+                  <ach-banner obsidian frost locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Exalted Feat' : 'Locked']</ach-eyebrow>
+                      <ach-title>Cold Blooded</ach-title>
+                      <ach-desc>Freeze five enemies in a single battle.</ach-desc>
+                    </ach-body>
+                    <ach-divider></ach-divider>
+                    <ach-gem>
+                      <icon frost></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-gem>
+                  </ach-banner>
+                <!-- /if -->
+
+                <!-- if v.key === 'royal' -->
+                  <ach-banner royal locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-corner tl></ach-corner>
+                    <ach-corner tr></ach-corner>
+                    <ach-corner bl></ach-corner>
+                    <ach-corner br></ach-corner>
+                    <ach-icon-frame royal>
+                      <icon brawlers></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-icon-frame>
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Achievement Earned' : 'Locked']</ach-eyebrow>
+                      <ach-title>Master of the Full Roster</ach-title>
+                      <ach-desc>Recruit a brawler of every race.</ach-desc>
+                    </ach-body>
+                  </ach-banner>
+                <!-- /if -->
+              </ach-slot>
+            </ach-stage>
+
+            <ach-stage light>
+              <ach-slot>
+                <ach-state-label>@[v.earned ? 'Earned' : 'Not yet achieved']</ach-state-label>
+
+                <!-- if v.key === 'plaque' -->
+                  <ach-banner plaque light locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-icon-frame>
+                      <icon victory></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-icon-frame>
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Achievement Earned' : 'Locked']</ach-eyebrow>
+                      <ach-title>Flawless Victory</ach-title>
+                      <ach-desc>Win an Arena bout without losing a single brawler.</ach-desc>
+                    </ach-body>
+                    <ach-points>10</ach-points>
+                  </ach-banner>
+                <!-- /if -->
+
+                <!-- if v.key === 'obsidian' -->
+                  <ach-banner obsidian light locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-gem>
+                      <icon crystal></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-gem>
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Legendary Feat' : 'Locked']</ach-eyebrow>
+                      <ach-title>The Collector</ach-title>
+                      <ach-desc>Own one piece of gear from every element.</ach-desc>
+                    </ach-body>
+                  </ach-banner>
+                <!-- /if -->
+
+                <!-- if v.key === 'obsidian-frost' -->
+                  <ach-banner obsidian frost light locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Exalted Feat' : 'Locked']</ach-eyebrow>
+                      <ach-title>Cold Blooded</ach-title>
+                      <ach-desc>Freeze five enemies in a single battle.</ach-desc>
+                    </ach-body>
+                    <ach-divider></ach-divider>
+                    <ach-gem>
+                      <icon frost></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-gem>
+                  </ach-banner>
+                <!-- /if -->
+
+                <!-- if v.key === 'royal' -->
+                  <ach-banner royal light locked="@[!v.earned]" onclick="toggleAch(v.key)">
+                    <ach-corner tl></ach-corner>
+                    <ach-corner tr></ach-corner>
+                    <ach-corner bl></ach-corner>
+                    <ach-corner br></ach-corner>
+                    <ach-icon-frame royal>
+                      <icon brawlers></icon>
+                      <icon lock-closed lock></icon>
+                    </ach-icon-frame>
+                    <ach-body>
+                      <ach-eyebrow>@[v.earned ? 'Achievement Earned' : 'Locked']</ach-eyebrow>
+                      <ach-title>Master of the Full Roster</ach-title>
+                      <ach-desc>Recruit a brawler of every race.</ach-desc>
+                    </ach-body>
+                  </ach-banner>
+                <!-- /if -->
+              </ach-slot>
+            </ach-stage>
+          </ach-block>
+        <!-- /each -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-achievements] page-content {
+        gap: calc(var(--unit) * 10);
+      }
+
+      page[_internal-achievements] ach-tester {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-achievements] ach-intro h2 {
+        font-family: var(--font-heading);
+        margin: 0;
+      }
+
+      page[_internal-achievements] ach-intro p {
+        margin: calc(var(--unit) * 1) 0 0;
+        max-width: calc(var(--unit) * 160);
+      }
+
+      page[_internal-achievements] ach-master {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 4);
+        padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+        border-radius: var(--radius);
+        background: oklch(from var(--gold-warm) l c h / 0.1);
+        box-shadow: inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.4);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      page[_internal-achievements] ach-master-title {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 4.5);
+        color: var(--foreground);
+      }
+
+      page[_internal-achievements] ach-master-sub {
+        font-size: calc(var(--unit) * 3.25);
+        color: var(--muted-foreground);
+      }
+
+      page[_internal-achievements] ach-switch {
+        flex: none;
+        position: relative;
+        width: calc(var(--unit) * 14);
+        height: calc(var(--unit) * 7);
+        border-radius: calc(var(--unit) * 3.5);
+        background: oklch(0.3 0.01 60);
+        box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.5);
+        transition: background 0.2s ease;
+      }
+
+      page[_internal-achievements] ach-switch[active] {
+        background: var(--gold-deep);
+      }
+
+      page[_internal-achievements] ach-switch-knob {
+        position: absolute;
+        top: calc(var(--unit) * 1);
+        left: calc(var(--unit) * 1);
+        width: calc(var(--unit) * 5);
+        height: calc(var(--unit) * 5);
+        border-radius: 50%;
+        background: var(--white);
+        box-shadow: 0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) oklch(0 0 0 / 0.5);
+        transition: left 0.2s ease;
+      }
+
+      page[_internal-achievements] ach-switch[active] ach-switch-knob {
+        left: calc(var(--unit) * 8);
+      }
+
+      page[_internal-achievements] ach-block {
+        display: block;
+      }
+
+      page[_internal-achievements] ach-head {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+        margin-bottom: calc(var(--unit) * 3);
+      }
+
+      page[_internal-achievements] ach-num {
+        flex: none;
+        width: calc(var(--unit) * 8);
+        height: calc(var(--unit) * 8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        font-family: var(--font-heading);
+        color: var(--gold-shadow);
+        background: oklch(from var(--gold-warm) l c h / 0.18);
+        box-shadow: inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.5);
+      }
+
+      page[_internal-achievements] ach-block ach-name {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 5);
+        color: var(--foreground);
+      }
+
+      page[_internal-achievements] ach-note {
+        font-size: calc(var(--unit) * 3.5);
+        color: var(--muted-foreground);
+      }
+
+      page[_internal-achievements] ach-stage {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: calc(var(--unit) * 8);
+        min-height: calc(var(--unit) * 56);
+        padding: calc(var(--unit) * 8) calc(var(--unit) * 4);
+        border-radius: var(--radius);
+        background:
+          radial-gradient(
+            ellipse at center,
+            oklch(0.28 0.02 60 / 0.55),
+            oklch(0.12 0.02 60 / 0.85)
+          ),
+          repeating-linear-gradient(
+            45deg,
+            oklch(0.2 0.01 60 / 0.4) 0 calc(var(--unit) * 5),
+            oklch(0.18 0.01 60 / 0.4) calc(var(--unit) * 5) calc(var(--unit) * 10)
+          );
+        overflow: hidden;
+      }
+
+      ach-slot {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 2.5);
+      }
+
+      ach-state-label {
+        font-family: var(--font-sans);
+        font-size: calc(var(--unit) * 2.75);
+        font-weight: 600;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+
+      /* ── Shared banner shell + glare ── */
+      ach-banner {
+        --gold-grad: linear-gradient(
+          180deg,
+          var(--gold-shine),
+          var(--gold-warm) 45%,
+          var(--gold-deep) 55%,
+          var(--gold-shadow)
+        );
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+      }
+
+      ach-banner icon {
+        display: block;
+      }
+
+      ach-banner icon[lock] {
+        display: none;
+      }
+
+      ach-banner[locked] icon:not([lock]) {
+        display: none;
+      }
+
+      ach-banner[locked] icon[lock] {
+        display: block;
+      }
+
+      /* The glare is a banner-local descendant, clipped by overflow:hidden so it
+         only ever sweeps the frame — never the stage behind it. */
+      ach-banner::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          115deg,
+          transparent 30%,
+          oklch(1 0 0 / 0.28) 48%,
+          transparent 60%
+        );
+        transform: translateX(-120%);
+        animation: achShine 4.5s ease-in-out 0.4s infinite;
+        pointer-events: none;
+      }
+
+      @keyframes achShine {
+        0% {
+          transform: translateX(-120%);
+        }
+        45%,
+        100% {
+          transform: translateX(120%);
+        }
+      }
+
+      /* ── Not-yet-achieved (the locked default every achievement starts in) ──
+         One treatment desaturates + ghosts any family so it reads as locked;
+         the lock glyph and muted eyebrow carry the intent, while the title and
+         goal stay legible so the player knows what to chase. No glare. */
+      ach-banner[locked] {
+        filter: grayscale(1) brightness(0.85);
+        opacity: 0.72;
+      }
+
+      ach-banner[locked]::after {
+        display: none;
+      }
+
+      /* ── Shared body text ── */
+      ach-body {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 0.5);
+      }
+
+      ach-eyebrow {
+        font-family: var(--font-sans);
+        font-size: calc(var(--unit) * 2.75);
+        font-weight: 600;
+        letter-spacing: 0.22em;
+        text-transform: uppercase;
+        color: oklch(from var(--gold-warm) calc(l + 0.05) c h);
+      }
+
+      ach-banner ach-title {
+        display: block;
+        font-family: var(--font-heading);
+        font-weight: 700;
+        line-height: 1.05;
+        color: var(--white);
+      }
+
+      ach-banner ach-desc {
+        font-family: var(--font-sans);
+        font-size: calc(var(--unit) * 3.5);
+        color: oklch(0.82 0.02 70);
+      }
+
+      /* ── Plaque family ── */
+      ach-banner[plaque] {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 4);
+        padding: calc(var(--unit) * 3.5) calc(var(--unit) * 6) calc(var(--unit) * 3.5)
+          calc(var(--unit) * 4);
+        border-radius: calc(var(--unit) * 1.5);
+        background: linear-gradient(180deg, oklch(0.34 0.04 70), oklch(0.22 0.03 65));
+        box-shadow:
+          inset 0 0 0 2px var(--gold-deep),
+          inset 0 0 0 3px oklch(0.18 0.03 60),
+          0 calc(var(--unit) * 3) calc(var(--unit) * 8) oklch(0 0 0 / 0.6),
+          0 0 calc(var(--unit) * 12) oklch(from var(--gold-warm) l c h / 0.25);
+      }
+
+      ach-icon-frame {
+        flex: none;
+        width: calc(var(--unit) * 15);
+        height: calc(var(--unit) * 15);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: calc(var(--unit) * 1);
+        font-size: calc(var(--unit) * 8);
+        color: var(--gold-shine);
+        background: radial-gradient(circle at 30% 25%, oklch(0.4 0.05 70), oklch(0.16 0.02 60));
+        box-shadow:
+          inset 0 0 0 2px var(--gold-deep),
+          inset 0 0 calc(var(--unit) * 3) oklch(0 0 0 / 0.7);
+      }
+
+      ach-banner[plaque] ach-title {
+        font-size: calc(var(--unit) * 7);
+        background: var(--gold-grad);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+
+      ach-points {
+        flex: none;
+        align-self: flex-start;
+        min-width: calc(var(--unit) * 9);
+        padding: calc(var(--unit) * 1) calc(var(--unit) * 2);
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 4.5);
+        text-align: center;
+        color: var(--gold-shine);
+        background: oklch(0 0 0 / 0.35);
+        border-radius: calc(var(--unit) * 1);
+        box-shadow: inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.6);
+      }
+
+      /* ── Obsidian family ── */
+      ach-banner[obsidian] {
+        --rarity: var(--hue-purple);
+        --plate: 290;
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 4);
+        padding: calc(var(--unit) * 4) calc(var(--unit) * 6);
+        border-radius: calc(var(--unit) * 1.5);
+        background: linear-gradient(
+          180deg,
+          oklch(0.24 0.02 var(--plate)),
+          oklch(0.12 0.02 var(--plate))
+        );
+        box-shadow:
+          inset 0 0 0 1px oklch(from var(--rarity) calc(l + 0.15) c h / 0.7),
+          inset 0 0 calc(var(--unit) * 10) oklch(from var(--rarity) l c h / 0.25),
+          0 0 calc(var(--unit) * 16) oklch(from var(--rarity) l c h / 0.55);
+      }
+
+      ach-gem {
+        flex: none;
+        width: calc(var(--unit) * 14);
+        height: calc(var(--unit) * 14);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(var(--unit) * 8);
+        color: oklch(from var(--rarity) calc(l + 0.25) c h);
+        filter: drop-shadow(0 0 calc(var(--unit) * 3) oklch(from var(--rarity) calc(l + 0.2) c h));
+      }
+
+      ach-banner[obsidian] ach-eyebrow {
+        color: oklch(from var(--rarity) calc(l + 0.3) c h);
+      }
+
+      ach-banner[obsidian] ach-title {
+        font-size: calc(var(--unit) * 6.5);
+        color: oklch(from var(--rarity) calc(l + 0.35) c h);
+        text-shadow: 0 0 calc(var(--unit) * 4) oklch(from var(--rarity) l c h / 0.7);
+      }
+
+      ach-banner[obsidian] ach-desc {
+        color: oklch(0.8 0.03 var(--plate));
+      }
+
+      /* Obsidian · Frost — gem on the right, divider */
+      ach-banner[obsidian][frost] {
+        --rarity: var(--hue-blue-frost);
+        --plate: 220;
+      }
+
+      ach-banner[obsidian][frost] ach-body {
+        flex: 1;
+      }
+
+      ach-divider {
+        align-self: stretch;
+        width: 1px;
+        margin: calc(var(--unit) * 1) calc(var(--unit) * 1);
+        background: linear-gradient(
+          180deg,
+          transparent,
+          oklch(from var(--rarity) calc(l + 0.2) c h / 0.6),
+          transparent
+        );
+      }
+
+      /* ── Royal family ── */
+      ach-banner[royal] {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 5);
+        width: calc(var(--unit) * 138);
+        padding: calc(var(--unit) * 5) calc(var(--unit) * 8);
+        background: linear-gradient(180deg, oklch(0.3 0.03 70), oklch(0.18 0.02 65));
+        border: calc(var(--unit) * 1) solid transparent;
+        border-image: var(--gold-grad) 1;
+        box-shadow:
+          inset 0 0 0 1px oklch(0.1 0.02 60),
+          inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.5),
+          0 0 calc(var(--unit) * 16) oklch(from var(--gold-warm) l c h / 0.3),
+          0 calc(var(--unit) * 4) calc(var(--unit) * 10) oklch(0 0 0 / 0.6);
+      }
+
+      ach-corner {
+        position: absolute;
+        width: calc(var(--unit) * 3.5);
+        height: calc(var(--unit) * 3.5);
+        border: calc(var(--unit) * 0.75) solid var(--gold-warm);
+      }
+
+      ach-corner[tl] {
+        top: calc(var(--unit) * 3.5);
+        left: calc(var(--unit) * 3.5);
+        border-right: 0;
+        border-bottom: 0;
+      }
+      ach-corner[tr] {
+        top: calc(var(--unit) * 3.5);
+        right: calc(var(--unit) * 3.5);
+        border-left: 0;
+        border-bottom: 0;
+      }
+      ach-corner[bl] {
+        bottom: calc(var(--unit) * 3.5);
+        left: calc(var(--unit) * 3.5);
+        border-right: 0;
+        border-top: 0;
+      }
+      ach-corner[br] {
+        bottom: calc(var(--unit) * 3.5);
+        right: calc(var(--unit) * 3.5);
+        border-left: 0;
+        border-top: 0;
+      }
+
+      ach-icon-frame[royal] {
+        width: calc(var(--unit) * 17);
+        height: calc(var(--unit) * 17);
+        border-radius: 50%;
+        font-size: calc(var(--unit) * 9);
+        box-shadow:
+          inset 0 0 0 calc(var(--unit) * 0.75) var(--gold-deep),
+          0 0 0 calc(var(--unit) * 0.5) oklch(0.1 0.02 60),
+          0 0 calc(var(--unit) * 6) oklch(from var(--gold-warm) l c h / 0.4);
+      }
+
+      ach-banner[royal] ach-title {
+        font-size: calc(var(--unit) * 8);
+        background: var(--gold-grad);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+      }
+
+      ach-banner[royal][locked] {
+        border-image: none;
+        border-color: oklch(from var(--gold-deep) l c h / 0.35);
+        background: oklch(0.2 0.01 65);
+        box-shadow:
+          inset 0 0 0 1px oklch(0.1 0.02 60),
+          inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.5);
+      }
+
+      ach-banner[royal][locked] ach-icon-frame[royal] {
+        border-radius: calc(var(--unit) * 1);
+        background: oklch(0.16 0.01 60);
+        box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.5);
+        color: var(--muted-foreground);
+      }
+
+      ach-banner[royal][locked] ach-corner {
+        display: none;
+      }
+
+      ach-banner[royal][locked] ach-title {
+        background: none;
+        -webkit-background-clip: border-box;
+        background-clip: border-box;
+        -webkit-text-fill-color: currentColor;
+        color: var(--muted-foreground);
+      }
+
+      /* ── Light-mode variants — same layout, white/gold instead of black/gold ── */
+      page[_internal-achievements] ach-stage[light] {
+        background:
+          radial-gradient(
+            ellipse at center,
+            oklch(0.98 0.01 85 / 0.95),
+            oklch(0.88 0.025 80 / 0.95)
+          ),
+          repeating-linear-gradient(
+            45deg,
+            oklch(0.95 0.015 80 / 0.5) 0 calc(var(--unit) * 5),
+            oklch(0.98 0.01 80 / 0.5) calc(var(--unit) * 5) calc(var(--unit) * 10)
+          );
+      }
+
+      ach-banner[light] {
+        --gold-grad: linear-gradient(
+          180deg,
+          var(--gold-warm),
+          var(--gold-deep) 55%,
+          var(--gold-shadow)
+        );
+      }
+
+      ach-banner[light] ach-eyebrow {
+        color: oklch(from var(--gold-deep) calc(l - 0.05) c h);
+      }
+
+      ach-banner[light] ach-desc {
+        color: oklch(0.42 0.05 70);
+      }
+
+      ach-banner[light] ach-icon-frame {
+        color: var(--gold-deep);
+        background: radial-gradient(circle at 30% 25%, oklch(0.99 0.012 90), oklch(0.9 0.035 80));
+        box-shadow:
+          inset 0 0 0 2px var(--gold-deep),
+          inset 0 0 calc(var(--unit) * 3) oklch(from var(--gold-warm) l c h / 0.3);
+      }
+
+      ach-banner[plaque][light] {
+        background: linear-gradient(180deg, oklch(0.97 0.02 85), oklch(0.9 0.035 80));
+        box-shadow:
+          inset 0 0 0 2px var(--gold-deep),
+          inset 0 0 0 3px oklch(0.99 0.012 90),
+          0 calc(var(--unit) * 3) calc(var(--unit) * 8) oklch(0 0 0 / 0.2),
+          0 0 calc(var(--unit) * 12) oklch(from var(--gold-warm) l c h / 0.25);
+      }
+
+      ach-banner[plaque][light] ach-points {
+        color: var(--gold-deep);
+        background: oklch(0.99 0.012 90 / 0.6);
+        box-shadow: inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.6);
+      }
+
+      ach-banner[obsidian][light] {
+        background: linear-gradient(180deg, oklch(0.97 0.02 85), oklch(0.9 0.035 80));
+        box-shadow:
+          inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.7),
+          inset 0 0 calc(var(--unit) * 10) oklch(from var(--gold-warm) l c h / 0.18),
+          0 0 calc(var(--unit) * 16) oklch(from var(--gold-warm) l c h / 0.3);
+      }
+
+      ach-banner[obsidian][light] ach-gem {
+        color: var(--gold-deep);
+        filter: drop-shadow(0 0 calc(var(--unit) * 3) oklch(from var(--gold-warm) l c h / 0.5));
+      }
+
+      ach-banner[obsidian][light] ach-eyebrow {
+        color: oklch(from var(--gold-deep) calc(l - 0.05) c h);
+      }
+
+      ach-banner[obsidian][light] ach-title {
+        color: var(--gold-deep);
+        text-shadow: 0 0 calc(var(--unit) * 4) oklch(from var(--gold-warm) l c h / 0.4);
+      }
+
+      ach-banner[obsidian][light] ach-desc {
+        color: oklch(0.42 0.05 70);
+      }
+
+      ach-banner[obsidian][frost][light] ach-divider {
+        background: linear-gradient(
+          180deg,
+          transparent,
+          oklch(from var(--gold-deep) l c h / 0.5),
+          transparent
+        );
+      }
+
+      ach-banner[royal][light] {
+        background: linear-gradient(180deg, oklch(0.97 0.02 85), oklch(0.9 0.035 80));
+        box-shadow:
+          inset 0 0 0 1px oklch(0.99 0.012 90),
+          inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.5),
+          0 0 calc(var(--unit) * 16) oklch(from var(--gold-warm) l c h / 0.3),
+          0 calc(var(--unit) * 4) calc(var(--unit) * 10) oklch(0 0 0 / 0.2);
+      }
+
+      ach-banner[royal][light] ach-icon-frame[royal] {
+        box-shadow:
+          inset 0 0 0 calc(var(--unit) * 0.75) var(--gold-deep),
+          0 0 0 calc(var(--unit) * 0.5) oklch(0.99 0.012 90),
+          0 0 calc(var(--unit) * 6) oklch(from var(--gold-warm) l c h / 0.4);
+      }
+
+      ach-banner[royal][light][locked] {
+        background: oklch(0.9 0.01 80);
+      }
+
+      ach-banner[royal][light][locked] ach-icon-frame[royal] {
+        background: oklch(0.94 0.01 85);
+        color: oklch(0.55 0.02 75);
+      }
+
+      ach-banner[royal][light][locked] ach-title {
+        color: oklch(0.55 0.02 75);
+      }
+
+      @media (max-width: 768px) {
+        ach-banner[plaque] {
+          flex-wrap: wrap;
+        }
+        ach-banner[royal] ach-title {
+          font-size: calc(var(--unit) * 6.5);
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/card-hand.html b/pages/_internal/card-hand.html
new file mode 100644
index 00000000..d76ad4a5
--- /dev/null
+++ b/pages/_internal/card-hand.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Card Hand · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/CardHandDemo.html"></component>
+      </page-content>
+    </component>
+  </body>
+</html>
diff --git a/pages/_internal/character-art.html b/pages/_internal/character-art.html
new file mode 100644
index 00000000..6e1a9f40
--- /dev/null
+++ b/pages/_internal/character-art.html
@@ -0,0 +1,184 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+      import { ALL_ELEMENTS, ELEMENT_KEYS } from '/js/constants/ELEMENTS.js';
+
+      // Element is encoded in the portrait path (creature/<element>/file). Deriving
+      // it here means any new character with an elemental image groups automatically.
+      const elementOf = (image) => {
+        const segment = image?.split('/')[1];
+        return ELEMENT_KEYS.includes(segment) ? segment : null;
+      };
+
+      const withImage = Object.entries(ALL_CHARACTERS)
+        .filter(([, char]) => char.image)
+        .map(([key, char]) => ({
+          key,
+          name: char.name,
+          image: char.image,
+          size: char.size || 1,
+          element: elementOf(char.image),
+        }));
+
+      window.artGroups = ELEMENT_KEYS.map((element) => ({
+        element,
+        color: ALL_ELEMENTS[element].color,
+        chars: withImage.filter((char) => char.element === element),
+      })).filter((group) => group.chars.length);
+
+      window.artUngrouped = withImage.filter((char) => !char.element);
+
+      window.showCharNameTooltip = (el, name) =>
+        window.showTooltip({ name, plain: true }, el, { direction: 'up', lock: true });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Character art"></component>
+        <hr />
+
+        <!-- if artUngrouped.length -->
+          <art-grid>
+            <!-- each artUngrouped as char (char.key) -->
+              <art-tile
+                onmouseenter="showCharNameTooltip(this, char.name)"
+                onmouseleave="hideTooltip()"
+              >
+                <component
+                  src="/components/CharacterAvatar.html"
+                  image="@[char.image]"
+                  size="@[char.size]"
+                ></component>
+                <!-- if settings.isTester -->
+                  <a href="/_internal/characters/@[char.key]" class="button" primary art-edit
+                    >Edit</a
+                  >
+                <!-- /if -->
+              </art-tile>
+            <!-- /each -->
+          </art-grid>
+        <!-- /if -->
+
+        <!-- each artGroups as group -->
+          <art-group style="--element-color: @[group.color]">
+            <art-group-header>
+              <component src="/components/IconCell.html" tip="@[{ stat: group.element }]">
+                <icon @[group.element]></icon>
+              </component>
+            </art-group-header>
+            <art-grid>
+              <!-- each group.chars as char (char.key) -->
+                <art-tile
+                  onmouseenter="showCharNameTooltip(this, char.name)"
+                  onmouseleave="hideTooltip()"
+                >
+                  <component
+                    src="/components/CharacterAvatar.html"
+                    image="@[char.image]"
+                    size="@[char.size]"
+                  ></component>
+                  <!-- if settings.isTester -->
+                    <a href="/_internal/characters/@[char.key]" class="button" primary art-edit
+                      >Edit</a
+                    >
+                  <!-- /if -->
+                </art-tile>
+              <!-- /each -->
+            </art-grid>
+          </art-group>
+        <!-- /each -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-character-art] art-group {
+        display: block;
+        margin-bottom: calc(var(--unit) * 8);
+      }
+
+      page[_internal-character-art] art-group-header {
+        display: flex;
+        align-items: center;
+        color: var(--element-color);
+        font-size: calc(var(--unit) * 8);
+        border-bottom: 1px solid oklch(from var(--element-color) l c h / 0.4);
+        padding-bottom: calc(var(--unit) * 2);
+        margin-bottom: calc(var(--unit) * 3);
+      }
+
+      page[_internal-character-art] art-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-character-art] art-tile {
+        position: relative;
+        width: calc(var(--unit) * 75);
+        flex: none;
+      }
+
+      page[_internal-character-art] art-tile char-portrait {
+        width: 100%;
+        height: calc(var(--unit) * 112);
+        aspect-ratio: auto;
+        justify-content: center;
+      }
+
+      page[_internal-character-art] art-tile [portrait-img] {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        object-fit: contain;
+        object-position: bottom;
+        transform: scaleX(-1);
+      }
+
+      @media (width <= 768px) {
+        page[_internal-character-art] art-tile {
+          width: 100%;
+        }
+
+        page[_internal-character-art] art-tile char-portrait {
+          height: auto;
+        }
+
+        page[_internal-character-art] art-tile [portrait-img] {
+          height: auto;
+        }
+      }
+
+      page[_internal-character-art] [art-edit] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        background: var(--white);
+        font-size: calc(var(--unit) * 2.75);
+        padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+        opacity: 0;
+        transition: opacity 150ms;
+      }
+
+      page[_internal-character-art] art-tile:hover [art-edit] {
+        opacity: 1;
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/character-scaling.html b/pages/_internal/character-scaling.html
new file mode 100644
index 00000000..ae029f5b
--- /dev/null
+++ b/pages/_internal/character-scaling.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/CharacterScalingContent.html"></component>
+      </page-content>
+    </component>
+    <style>
+      page[_internal-character-scaling] [char-equipment-block] {
+        background: var(--scrim-1);
+        border-radius: var(--radius);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/characters.html b/pages/_internal/characters.html
new file mode 100644
index 00000000..eeb52c77
--- /dev/null
+++ b/pages/_internal/characters.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+      import { ALL_ELEMENTS } from '/js/constants/ELEMENTS.js';
+
+      $.catalogQuery = '';
+      $.catalogNewKey = '';
+
+      window.createCharacter = async () => {
+        const key = $.catalogNewKey.trim();
+        if (!key) return;
+        if (!/^[a-z][A-Za-z0-9]*$/.test(key))
+          return notify.error('Key must be camelCase: letters/digits, starting lowercase');
+        const response = await fetch('/__source/characters', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: key, create: true }),
+        });
+        const result = await response.json();
+        if (result.error) return notify.error(result.error);
+        location.href = `/_internal/characters/${key}`;
+      };
+
+      window.characterCatalog = Object.entries(ALL_CHARACTERS).map(([key, char]) => {
+        const element = ALL_ELEMENTS[char.race?.element] || { name: '—', color: 'var(--stone)' };
+        return {
+          key,
+          name: char.name,
+          image: char.image,
+          size: char.size || 1,
+          raceName: char.race?.name || '',
+          color: element.color,
+        };
+      });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <!-- if settings.isTester -->
+          <crow justify-between w="full" g="3">
+            <label>
+              <input
+                type="search"
+                placeholder="Filter characters…"
+                value="@[catalogQuery]"
+                oninput="$.catalogQuery = this.value"
+                catalog-search
+              />
+            </label>
+            <crow g="2" f="none">
+              <input
+                type="text"
+                placeholder="characterKey (camelCase)"
+                value="@[catalogNewKey]"
+                oninput="$.catalogNewKey = this.value"
+                onkeydown="if (event.key === 'Enter') createCharacter();"
+                catalog-key
+              />
+              <button primary onclick="createCharacter()">Create character</button>
+            </crow>
+          </crow>
+          <characters-catalog>
+            <!-- each characterCatalog.filter((c) => (c.name + c.key + c.raceName).toLowerCase().includes(catalogQuery.toLowerCase())) as card (card.key) -->
+              <a
+                href="/_internal/characters/@[card.key]"
+                catalog-card
+                style="--element-color: @[card.color]"
+              >
+                <component
+                  src="/components/CharacterAvatar.html"
+                  image="@[card.image]"
+                  size="@[card.size]"
+                  name="@[card.name]"
+                >
+                </component>
+                <catalog-card-body>
+                  <h3 cinzel m="0">@[card.name]</h3>
+                  <catalog-card-meta>
+                    <code>@[card.key]</code>
+                    <span>@[card.raceName]</span>
+                  </catalog-card-meta>
+                </catalog-card-body>
+              </a>
+            <!-- /each -->
+          </characters-catalog>
+        <!-- else -->
+          <component src="/components/PageNotFound.html"> </component>
+        <!-- /if -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-characters] [catalog-search] {
+        flex: 1;
+        max-width: calc(var(--unit) * 80);
+        min-width: 0;
+      }
+
+      page[_internal-characters] characters-catalog {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 56), 1fr));
+        gap: calc(var(--unit) * 4);
+        width: 100%;
+      }
+
+      page[_internal-characters] [catalog-card] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-decoration: none;
+        color: var(--foreground);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border: 1px solid oklch(from var(--element-color) l c h / 0.4);
+        border-radius: calc(var(--unit) * 1);
+        padding-top: calc(var(--unit) * 3);
+        transition:
+          transform 150ms,
+          border-color 150ms;
+      }
+
+      page[_internal-characters] [catalog-card]:hover {
+        transform: translateY(-2px);
+        border-color: var(--element-color);
+      }
+
+      page[_internal-characters] [catalog-card] char-portrait {
+        height: calc(var(--unit) * 32);
+        justify-content: center;
+      }
+
+      page[_internal-characters] catalog-card-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 1.5);
+        padding: calc(var(--unit) * 3);
+        width: 100%;
+      }
+
+      page[_internal-characters] catalog-card-body h3 {
+        font-size: calc(var(--unit) * 4.5);
+      }
+
+      page[_internal-characters] catalog-card-meta {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.6);
+      }
+
+      page[_internal-characters] catalog-card-meta code {
+        color: oklch(from var(--element-color) calc(l * 0.85) c h);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/characters/$key.html b/pages/_internal/characters/$key.html
new file mode 100644
index 00000000..1865973c
--- /dev/null
+++ b/pages/_internal/characters/$key.html
@@ -0,0 +1,630 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+      import { ALL_RACES } from '/js/constants/RACES.js';
+      import { ALL_ELEMENTS } from '/js/constants/ELEMENTS.js';
+      import { STAT_LABELS, LUCKY_STATS, MODIFIER_STATS } from '/js/constants/STATS.js';
+      import { saveEntity } from '/js/_internal-tools/entitySource.js';
+
+      const characterId = $.page.params.key;
+      const entry = ALL_CHARACTERS[characterId];
+      const capitalize = (key) => key[0].toUpperCase() + key.slice(1);
+      const label = (key) => STAT_LABELS[key] || capitalize(key);
+      const field = (path, text, type = 'number') => ({ path, label: text, type });
+      const select = (path, text, options) => ({ path, label: text, type: 'select', options });
+      const mirror = (path, text, source) => ({ path, label: text, type: 'mirror', source });
+
+      const sheet = entry
+        ? [
+            {
+              title: 'Identity',
+              fields: [
+                field('name', 'Name', 'text'),
+                field('image', 'Image', 'text'),
+                select('race', 'Race', Object.keys(ALL_RACES)),
+                select('type', 'Type', ['humanoid', 'creature', 'elemental', 'prop']),
+                field('ai.legs', 'Legs'),
+                field('size', 'Size'),
+                field('maxTicks', 'Max ticks'),
+              ],
+            },
+            {
+              title: 'Lore & art',
+              fields: [
+                field('description', 'Description', 'textarea'),
+                field('ai.imageContext', 'Image context', 'textarea'),
+              ],
+            },
+            {
+              title: 'Combat',
+              fields: [
+                field('combatStats.maxHealth', 'Max health'),
+                mirror('combatStats.currentHealth', 'Current health', 'combatStats.maxHealth'),
+                field('combatStats.maxArmor', 'Max armor'),
+                mirror('combatStats.currentArmor', 'Current armor', 'combatStats.maxArmor'),
+                field('combatStats.damage', 'Damage'),
+              ],
+            },
+            {
+              title: 'Lucky stats',
+              fields: LUCKY_STATS.map((key) => field(`combatStats.${key}`, label(key))),
+            },
+            {
+              title: 'Tolerance',
+              fields: Object.keys(entry.combatStats.tolerance).map((key) =>
+                field(`combatStats.tolerance.${key}`, capitalize(key)),
+              ),
+            },
+            {
+              title: 'Resistances',
+              fields: Object.keys(entry.combatStats.resistances).map((key) =>
+                field(`combatStats.resistances.${key}`, capitalize(key)),
+              ),
+            },
+            {
+              title: 'Modifiers',
+              fields: MODIFIER_STATS.map((key) =>
+                field(`combatStats.modifiers.${key}`, label(key)),
+              ),
+            },
+          ]
+        : [];
+
+      const editable = sheet.flatMap((group) => group.fields.filter((f) => f.type !== 'mirror'));
+      const textTypes = ['text', 'textarea', 'select'];
+      const typeOf = Object.fromEntries(editable.map((f) => [f.path, f.type]));
+      const valueAt = (path) =>
+        path === 'race'
+          ? entry.race?.name
+          : path.split('.').reduce((acc, key) => acc?.[key], entry);
+
+      window.characterSheet = sheet;
+      window.characterEntry = entry && {
+        key: characterId,
+        name: entry.name,
+        image: entry.image,
+        size: entry.size || 1,
+        raceName: entry.race?.name || '',
+        color: ALL_ELEMENTS[entry.race?.element]?.color || 'var(--stone)',
+        abilities: entry.abilities.map((a) => a.id + (a.overrides ? '*' : '')),
+        signatureAbility: entry.signatureAbility?.id || '',
+        equipment: Object.entries(entry.equipment).map(([slot, item]) => ({
+          slot: capitalize(slot),
+          item: item?.id || '—',
+        })),
+      };
+
+      $.charOriginal = Object.fromEntries(editable.map((f) => [f.path, valueAt(f.path)]));
+      $.charDraft = { ...$.charOriginal };
+      $.charSaving = false;
+
+      window.charChanges = (draft, original) =>
+        Object.fromEntries(
+          Object.entries(draft)
+            .filter(([path, value]) =>
+              textTypes.includes(typeOf[path])
+                ? value !== original[path]
+                : Number(value) !== Number(original[path]),
+            )
+            .map(([path, value]) => [
+              path,
+              textTypes.includes(typeOf[path]) ? value : Number(value),
+            ]),
+        );
+
+      window.updateCharField = (field, value) => {
+        $.charDraft = { ...$.charDraft, [field.path]: value };
+      };
+
+      const spriteInstruction = (legs) =>
+        [
+          'Full-body game character for a fantasy auto-battler.',
+          'Art style: hand-drawn, sketch-looking fantasy illustration — soft loose brushwork, muted earthy palette, subtle dark outlines, soft even lighting, no hard reflections, no strong directional shadows. Deliberately unfinished: the piece should feel about 85% done — confident, loose, human, like a painted study rather than a polished render.',
+          `Single entity only, ${legs > 1 ? 'standing pose, ' : ''}about three-quarter front view facing right or slightly right${legs > 1 ? ', feet at the bottom of the frame' : ''}. The image fills nearly the entire frame height, nothing cropped by the frame edges.`,
+          'Background: a single solid uniform magenta (#FF00FF) fill covering everything that is not the character — no scenery, no ground shadow, no text, no watermark, no frame.',
+        ].join('\n\n');
+
+      $.charProposals = [];
+      $.charGenerating = false;
+
+      const refreshProposals = async () => {
+        $.charProposals = await (await fetch(`/__imagegen/characters/${characterId}`)).json();
+      };
+      if (entry) refreshProposals();
+
+      window.generateImages = async () => {
+        const available = await (await fetch('/__imagegen/references')).json();
+        const currentUrl = `/static/images/races/${entry.image}`;
+        const images = [
+          ...available.map((ref) => ({ ...ref, selected: false, current: ref.url === currentUrl })),
+          ...$.charProposals.map((p) => ({
+            path: p.path,
+            url: p.url,
+            label: `proposal ${p.file}`,
+            selected: false,
+          })),
+        ].sort((a, b) => (b.current ? 1 : 0) - (a.current ? 1 : 0));
+
+        const legs = Number(entry.ai?.legs ?? 2);
+        const identity = [
+          `Name: ${entry.name}`,
+          `Type: ${entry.type || 'creature'}`,
+          legs > 1 && `Legs: ${legs}`,
+        ]
+          .filter(Boolean)
+          .join('\n');
+        const compose = ({ extra }) =>
+          [spriteInstruction(legs), identity, entry.ai?.imageContext, extra]
+            .filter(Boolean)
+            .join('\n\n');
+
+        const upload = async (file) => {
+          const data = await new Promise((done) => {
+            const reader = new FileReader();
+            reader.onload = () => done(reader.result);
+            reader.readAsDataURL(file);
+          });
+          const response = await fetch(`/__imagegen/characters/${characterId}/drop`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ data }),
+          });
+          const result = await response.json();
+          if (result.error) throw new Error(result.error);
+          return { ...result, label: file.name };
+        };
+
+        const payload = await promptModal({
+          title: `Generate images — ${entry.name}`,
+          images,
+          compose,
+          upload,
+        });
+        if (!payload) return;
+
+        $.charGenerating = true;
+        console.info('[imagegen] request', {
+          instruction: payload.instruction,
+          count: payload.count,
+          references: payload.references,
+        });
+        try {
+          const response = await fetch(`/__imagegen/characters/${characterId}/generate`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              instruction: payload.instruction,
+              count: payload.count,
+              references: payload.references,
+            }),
+          });
+          const result = await response.json();
+          if (result.error) notify.error(result.error);
+          if (result.errors?.length) notify.warning(result.errors.join('\n'));
+          if (result.saved?.length) notify.success(`${result.saved.length} proposals generated`);
+        } catch (error) {
+          notify.error(error.message);
+        }
+        $.charGenerating = false;
+        refreshProposals();
+      };
+
+      window.useProposal = (proposal) => {
+        $.overlay = {
+          name: 'confirm',
+          text: `Replace the in-game image (${entry.image}) with proposal ${proposal.file}?`,
+          confirm: async () => {
+            const response = await fetch(`/__imagegen/characters/${characterId}/replace`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ file: proposal.file, target: entry.image }),
+            });
+            const result = await response.json();
+            if (result.error) return notify.error(result.error);
+            notify.success('In-game image replaced — reloading');
+            location.reload();
+          },
+        };
+      };
+
+      window.discardProposal = async (file) => {
+        const response = await fetch(`/__imagegen/characters/${characterId}/discard`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file }),
+        });
+        const result = await response.json();
+        if (result.error) return notify.error(result.error);
+        refreshProposals();
+      };
+
+      window.keepProposal = async (proposal) => {
+        const response = await fetch(`/__imagegen/characters/${characterId}/keep`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            file: proposal.file,
+            race: entry.race?.name || 'creature',
+            key: characterId,
+          }),
+        });
+        const result = await response.json();
+        result.error ? notify.error(result.error) : notify.success(`Kept as ${result.kept}`);
+        refreshProposals();
+      };
+
+      window.saveCharacterChanges = async () => {
+        const changes = charChanges($.charDraft, $.charOriginal);
+        if (changes.race) changes.race = { __expr: `ALL_RACES.${changes.race}` };
+        if (changes['combatStats.maxHealth'] !== undefined)
+          changes['combatStats.currentHealth'] = changes['combatStats.maxHealth'];
+        if (changes['combatStats.maxArmor'] !== undefined)
+          changes['combatStats.currentArmor'] = changes['combatStats.maxArmor'];
+        $.charSaving = true;
+        try {
+          await saveEntity('characters', characterId, changes);
+          notify.success('Saved — reloading from source');
+        } catch (error) {
+          $.charSaving = false;
+          notify.error(error.message);
+        }
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <!-- if settings.isTester -->
+          <character-editor style="--element-color: @[characterEntry?.color]">
+            <!-- if characterEntry -->
+              <editor-header>
+                <a href="/_internal/characters" class="button" tertiary f="none" g="2">
+                  <icon chevron rotate="90"></icon>
+                </a>
+                <h2 cinzel m="0">@[characterEntry.name]</h2>
+              </editor-header>
+              <editor-columns>
+                <editor-aside>
+                  <editor-portrait>
+                    <component
+                      src="/components/CharacterAvatar.html"
+                      image="@[characterEntry.image]"
+                      size="@[characterEntry.size]"
+                      name="@[characterEntry.name]"
+                      natural
+                    >
+                    </component>
+                    <editor-readonly>
+                      <editor-readonly-row>
+                        <span>Abilities</span>
+                        <chip-list>
+                          <!-- each characterEntry.abilities as ability -->
+                            <code>@[ability]</code>
+                          <!-- /each -->
+                        </chip-list>
+                      </editor-readonly-row>
+                      <editor-readonly-row>
+                        <span>Signature</span>
+                        <code>@[characterEntry.signatureAbility]</code>
+                      </editor-readonly-row>
+                      <!-- each characterEntry.equipment as slot -->
+                        <editor-readonly-row>
+                          <span>@[slot.slot]</span>
+                          <code>@[slot.item]</code>
+                        </editor-readonly-row>
+                      <!-- /each -->
+                    </editor-readonly>
+                    <button
+                      primary
+                      w="full"
+                      disabled="@[charGenerating]"
+                      onclick="generateImages()"
+                    >
+                      @[charGenerating ? 'Generating…' : 'Generate images']
+                    </button>
+                  </editor-portrait>
+
+                  <editor-proposals>
+                    <!-- each charProposals as proposal (proposal.file) -->
+                      <proposal-card data-file="@[proposal.file]">
+                        <img data-src="@[proposal.url]" alt="@[proposal.file]" />
+                        <proposal-card-cross sm>
+                          <component
+                            src="/components/buttons/Cross.html"
+                            label="Discard"
+                            onclick="
+                              discardProposal(event.target.closest('proposal-card').dataset.file)
+                            "
+                          >
+                          </component>
+                        </proposal-card-cross>
+                        <crow g="2" w="full">
+                          <button primary f="1" onclick="useProposal(proposal)">Use in game</button>
+                          <button secondary f="1" onclick="keepProposal(proposal)">Keep</button>
+                        </crow>
+                      </proposal-card>
+                    <!-- /each -->
+                  </editor-proposals>
+                </editor-aside>
+
+                <editor-groups>
+                  <!-- each characterSheet as group -->
+                    <editor-group>
+                      <editor-group-title>@[group.title]</editor-group-title>
+                      <editor-fields>
+                        <!-- each group.fields as field -->
+                          <editor-field wide="@[field.type === 'textarea']">
+                            <label>@[field.label]</label>
+                            <!-- if field.type === 'textarea' -->
+                              <textarea rows="4" oninput="updateCharField(field, this.value)">
+@[charOriginal[field.path]]</textarea
+                              >
+                            <!-- /if -->
+                            <!-- if field.type === 'text' -->
+                              <input
+                                type="text"
+                                value="@[String(charOriginal[field.path])]"
+                                oninput="updateCharField(field, this.value)"
+                              />
+                            <!-- /if -->
+                            <!-- if field.type === 'number' -->
+                              <input
+                                type="number"
+                                step="any"
+                                value="@[String(charOriginal[field.path])]"
+                                oninput="updateCharField(field, this.value)"
+                              />
+                            <!-- /if -->
+                            <!-- if field.type === 'select' -->
+                              <label>
+                                <select onchange="updateCharField(field, this.value)">
+                                  <!-- each field.options as option -->
+                                    <option
+                                      value="@[option]"
+                                      selected="@[option === charOriginal[field.path]]"
+                                    >
+                                      @[option]
+                                    </option>
+                                  <!-- /each -->
+                                </select>
+                              </label>
+                            <!-- /if -->
+                            <!-- if field.type === 'mirror' -->
+                              <input
+                                type="number"
+                                disabled
+                                value="@[String(charDraft[field.source])]"
+                              />
+                            <!-- /if -->
+                          </editor-field>
+                        <!-- /each -->
+                      </editor-fields>
+                    </editor-group>
+                  <!-- /each -->
+                </editor-groups>
+              </editor-columns>
+              <sticky sticky-bar reverse>
+                <editor-save-bar>
+                  <!-- if Object.keys(charChanges(charDraft, charOriginal)).length -->
+                    <span>
+                      @[Object.keys(charChanges(charDraft, charOriginal)).length] unsaved
+                      @[Object.keys(charChanges(charDraft, charOriginal)).length === 1 ? 'change' :
+                      'changes']
+                    </span>
+                  <!-- else -->
+                    <span muted>No changes</span>
+                  <!-- /if -->
+                  <button
+                    primary
+                    disabled="@[!Object.keys(charChanges(charDraft, charOriginal)).length || charSaving]"
+                    onclick="saveCharacterChanges()"
+                  >
+                    @[charSaving ? 'Saving…' : 'Save']
+                  </button>
+                </editor-save-bar>
+              </sticky>
+            <!-- else -->
+              <h2 cinzel>Unknown character</h2>
+              <a href="/_internal/characters" class="button">← All characters</a>
+            <!-- /if -->
+          </character-editor>
+        <!-- else -->
+          <component src="/components/PageNotFound.html"> </component>
+        <!-- /if -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-characters-key] character-editor {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+        width: 100%;
+      }
+
+      page[_internal-characters-key] editor-header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-characters-key] editor-header code {
+        color: oklch(from var(--element-color) calc(l * 0.85) c h);
+      }
+
+      page[_internal-characters-key] editor-columns {
+        display: grid;
+        grid-template-columns: 1fr calc(var(--unit) * 64);
+        gap: calc(var(--unit) * 4);
+        align-items: start;
+      }
+
+      page[_internal-characters-key] editor-aside {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+        min-width: 0;
+      }
+
+      page[_internal-characters-key] editor-proposals {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-characters-key] proposal-card {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 2);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border: 1px solid var(--scrim-2);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      page[_internal-characters-key] proposal-card-cross {
+        position: absolute;
+        top: calc(var(--unit) * 1);
+        right: calc(var(--unit) * 1);
+        display: inline-flex;
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border-radius: min(calc(var(--radius) - calc(var(--unit) * 1)), calc(var(--unit) * 1));
+      }
+
+      page[_internal-characters-key] proposal-card img {
+        width: 100%;
+        border-radius: calc(var(--unit) * 0.5);
+      }
+
+      page[_internal-characters-key] char-portrait [portrait-img],
+      page[_internal-characters-key] proposal-card img {
+        transform: scaleX(-1);
+      }
+
+      page[_internal-characters-key] editor-portrait {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 4);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border: 1px solid oklch(from var(--element-color) l c h / 0.4);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      page[_internal-characters-key] editor-portrait char-portrait {
+        justify-content: center;
+      }
+
+      page[_internal-characters-key] editor-readonly {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1.5);
+        width: 100%;
+      }
+
+      page[_internal-characters-key] editor-readonly-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: calc(var(--unit) * 2);
+        font-size: calc(var(--unit) * 3.5);
+      }
+
+      page[_internal-characters-key] editor-readonly-row > span {
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+      }
+
+      page[_internal-characters-key] chip-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-characters-key] editor-groups {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+        order: -1;
+      }
+
+      page[_internal-characters-key] editor-group {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-characters-key] editor-group-title {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+      }
+
+      page[_internal-characters-key] editor-fields {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 59), 1fr));
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-characters-key] editor-field {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-characters-key] editor-field[wide] {
+        grid-column: 1 / -1;
+      }
+
+      page[_internal-characters-key] editor-field label {
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.6);
+      }
+
+      page[_internal-characters-key] editor-save-bar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 3);
+        background: oklch(from var(--background) calc(l + 0.03) c h);
+        border: 1px solid var(--scrim-2);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      page[_internal-characters-key] editor-save-bar span[muted] {
+        color: oklch(from var(--foreground) l 0 h / 0.4);
+      }
+
+      @media (width <= 1024px) {
+        page[_internal-characters-key] editor-columns {
+          grid-template-columns: 1fr;
+        }
+
+        page[_internal-characters-key] editor-groups {
+          order: 0;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/colors.html b/pages/_internal/colors.html
new file mode 100644
index 00000000..4b3003c9
--- /dev/null
+++ b/pages/_internal/colors.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Colors · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      window.families = [
+        {
+          name: 'Theme',
+          swatches: [
+            { token: '--background' },
+            { token: '--foreground' },
+            { token: '--muted' },
+            { token: '--primary' },
+            { token: '--primary-foreground' },
+            { token: '--destructive' },
+          ],
+        },
+        {
+          name: 'Sidebar',
+          swatches: [
+            { token: '--sidebar' },
+            { token: '--sidebar-foreground' },
+            { token: '--sidebar-primary' },
+          ],
+        },
+        {
+          name: 'Mono',
+          swatches: [
+            { token: '--white' },
+            { token: '--black' },
+            { token: '--slate' },
+            { token: '--stone' },
+            { token: '--combatant-name-color' },
+          ],
+        },
+        {
+          name: 'Coin tiers',
+          swatches: [
+            { token: '--coin-copper' },
+            { token: '--coin-silver' },
+            { token: '--coin-gold' },
+            { token: '--coin-platinum' },
+          ],
+        },
+        {
+          name: 'Base hues',
+          swatches: [
+            { token: '--hue-red' },
+            { token: '--hue-orange' },
+            { token: '--hue-yellow' },
+            { token: '--hue-green' },
+            { token: '--hue-blue' },
+            { token: '--hue-blue-frost' },
+            { token: '--hue-purple' },
+            { token: '--hue-brown' },
+          ],
+        },
+        {
+          name: 'Rarity',
+          swatches: [
+            { token: '--rarity-common' },
+            { token: '--rarity-uncommon' },
+            { token: '--rarity-rare' },
+            { token: '--rarity-epic' },
+            { token: '--rarity-legendary' },
+            { token: '--rarity-exotic' },
+          ],
+        },
+        {
+          name: 'Element',
+          swatches: [
+            { token: '--element-fire' },
+            { token: '--element-frost' },
+            { token: '--element-earth' },
+            { token: '--element-nature' },
+            { token: '--element-lightning' },
+          ],
+        },
+        {
+          name: 'Status (physical)',
+          swatches: [
+            { token: '--status-bleeding' },
+            { token: '--status-wounded' },
+            { token: '--status-stunned' },
+            { token: '--status-concussed' },
+            { token: '--status-vulnerable' },
+            { token: '--status-exposed' },
+          ],
+        },
+        {
+          name: 'Floaters',
+          swatches: [{ token: '--floater-default' }, { token: '--floater-heal' }],
+        },
+        {
+          name: 'Scrim',
+          swatches: [{ token: '--scrim-1' }, { token: '--scrim-2' }, { token: '--scrim-3' }],
+        },
+        {
+          name: 'Sheen',
+          swatches: [{ token: '--sheen-1' }, { token: '--sheen-2' }, { token: '--sheen-3' }],
+        },
+        {
+          name: 'Gold',
+          swatches: [
+            { token: '--gold-shine' },
+            { token: '--gold-warm' },
+            { token: '--gold-deep' },
+            { token: '--gold-shadow' },
+          ],
+        },
+      ];
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <!-- each families as f -->
+          <family>
+            <family-name>@[f.name]</family-name>
+            <swatch-row>
+              <!-- each f.swatches as s -->
+                <swatch>
+                  <swatch-chip style="background: var(@[s.token])"></swatch-chip>
+                  <code>@[s.token]</code>
+                </swatch>
+              <!-- /each -->
+            </swatch-row>
+          </family>
+        <!-- /each -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-colors] page-content {
+        gap: calc(var(--unit) * 5);
+      }
+
+      page[_internal-colors] family {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-colors] family-name {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 5);
+        color: var(--foreground);
+      }
+
+      page[_internal-colors] swatch-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-colors] swatch {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+        background: oklch(from var(--foreground) 0.96 0 0);
+      }
+
+      page[_internal-colors] swatch-chip {
+        width: calc(var(--unit) * 8);
+        height: calc(var(--unit) * 8);
+        border-radius: calc(var(--unit) * 1);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        flex: none;
+      }
+
+      page[_internal-colors] swatch code {
+        font-size: calc(var(--unit) * 3);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/combat-components.html b/pages/_internal/combat-components.html
new file mode 100644
index 00000000..cd9f68c7
--- /dev/null
+++ b/pages/_internal/combat-components.html
@@ -0,0 +1,1074 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Combat components · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import STATUS_EFFECTS, {
+        STATUS_ORDER,
+        isStandaloneStatus,
+      } from '/js/constants/STATUS_EFFECTS.js';
+      import ABILITIES, { ALL_ABILITIES } from '/js/constants/ABILITIES.js';
+      import VFX from '/js/constants/VFX.js';
+      import SFX from '/js/constants/SFX.js';
+      import CHARACTERS, { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+      import { prepareTeams } from '/js/combat.js';
+      import { getGeometry } from '/js/combat-loop.js';
+      import { seededRandom, abilityStatusChips } from '/js/utils.js';
+      import { combatFitScale } from '/js/helpers.js';
+      import { INITIAL_COMBAT } from '/js/app.js';
+      import {
+        combatEnded,
+        combatOutcome,
+        combatResultOutcome,
+        combatResultLabel,
+        combatResultTeamColor,
+      } from '/js/combatResult.js';
+
+      const ATTACK_KEYS = [
+        'basicAttackFast',
+        'basicAttackRegular',
+        'basicAttackSlow',
+        'pounce',
+        'whirlwind',
+      ];
+      const ATTR_MAP = {
+        block: 'block',
+        hurt: 'hurt',
+        attackBlocked: 'attack-blocked',
+        attackDodged: 'attack-dodged',
+        abilityCharge: 'charging',
+        abilityRelease: 'releasing',
+        abilityRecover: 'recovering',
+        stomp: 'stomping',
+        catchThrow: 'catching',
+      };
+      const FLOATER_MAP = {
+        hurt: 'hurt',
+        armorHurt: 'armorHurt',
+        heal: 'heal',
+        fullHealth: 'fullHealth',
+        attackMissed: 'attackMissed',
+        attackDodged: 'attackDodged',
+      };
+      const VFX_NOTES = {
+        kick: 'no sprite animation (Mindsnap — confuse-only ability)',
+        filler: 'placeholder — no sprite animation',
+        abilityCharge: 'fallback anticipation — squish while the ability charges',
+        abilityRelease: 'fallback trigger — pop back with overshoot',
+        abilityRecover: 'fallback windDown — pop out, slowly settle back',
+        catchThrow:
+          'Catch! — slow lean back, then a snap-forward throw (projectile renders in a real fight)',
+      };
+
+      const statusElement = (key) =>
+        Object.values(ALL_ABILITIES).find(
+          (a) => a.statusEffects?.some(([k]) => k === key) && a.elements?.length,
+        )?.elements[0];
+
+      const buildStatus = (statusKey, def) => {
+        const standalone = isStandaloneStatus(statusKey);
+        return {
+          statusKey,
+          icon:
+            def.kind === 'threshold'
+              ? STATUS_EFFECTS[def.convertsInto]?.icon || def.icon
+              : def.icon,
+          name: def.name || def.text,
+          description: def.description || '',
+          element: standalone ? statusElement(statusKey) : undefined,
+          standalone,
+          ticks: def.kind === 'effect' ? 7 : 0,
+          value: def.kind === 'threshold' ? 4 : 0.5,
+          max: def.kind === 'threshold' ? 8 : 0,
+        };
+      };
+
+      window.demoStatuses = STATUS_ORDER.map((k) => buildStatus(k, STATUS_EFFECTS[k]));
+
+      window.demoVfx = Object.entries(VFX).map(([key, v]) => ({
+        key,
+        ...v,
+        note: VFX_NOTES[key] || '',
+      }));
+      window.demoSfx = Object.entries(SFX).map(([key, v]) => ({
+        key,
+        ...v,
+        abilities: Object.keys(ALL_ABILITIES)
+          .filter((id) => ALL_ABILITIES[id].sfx === v)
+          .map((id) => {
+            const h = ABILITIES(id, true);
+            return { ...h, statusChips: abilityStatusChips(h) };
+          }),
+      }));
+
+      window.demoCard = {
+        hurtActive: false,
+        blockActive: false,
+        attackBlocked: false,
+        whirlwindActive: false,
+        attackDodgedActive: false,
+        knockedOut: false,
+        x: 0,
+        y: 0,
+        attackStartX: 0,
+        attackStartY: 0,
+        attackEndX: 0,
+        attackEndY: 0,
+        attackDuration: 0,
+        attackAnimationName: 'none',
+        attackAnimationDuration: '0ms',
+        dir: 1,
+        spriteHeight: 0,
+        imageUrl: '',
+        name: '',
+      };
+
+      window.playDemoSfx = (sfx) => {
+        const variant = sfx.variants?.[Math.floor(Math.random() * sfx.variants.length)];
+        const src = window.AUDIO?.[variant];
+        if (!src || !window.Howl) {
+          notify.warning(`No audio for ${sfx.sfxName} / ${variant || 'no variant'}`);
+          return;
+        }
+        try {
+          new window.Howl({ src: [src], volume: 0.5 }).play();
+        } catch (e) {
+          notify.error(`Failed to play ${variant}: ${e.message}`);
+        }
+      };
+
+      const spawnFloater = (host, vfxName) => {
+        const f = document.createElement('hp-floater');
+        f.setAttribute('position', 'absolute');
+        f.setAttribute('fat-number', '');
+        f.setAttribute(vfxName, '');
+        f.style.setProperty('--rnd', Math.random().toFixed(3));
+        f.style.setProperty('--dir', '-1');
+        f.style.setProperty('--y-offset', vfxName === 'armorHurt' ? 'calc(var(--unit) * 8)' : '0');
+        f.style.setProperty('--scale', '1');
+
+        const fx = document.createElement('hp-floater-x');
+        const fy = document.createElement('hp-floater-y');
+        const texts = {
+          heal: '+12',
+          fullHealth: 'Full!',
+          armorHurt: '8',
+          attackMissed: 'MISS',
+          attackDodged: 'DODGED',
+        };
+        fy.textContent = texts[vfxName] || '12';
+        fx.appendChild(fy);
+        f.appendChild(fx);
+        host.appendChild(f);
+        setTimeout(() => f.remove(), 1100);
+      };
+
+      const restartAttr = (sprite, attr, duration) => {
+        sprite.removeAttribute(attr);
+        void sprite.offsetWidth;
+        sprite.setAttribute(attr, '');
+        setTimeout(() => sprite.removeAttribute(attr), duration);
+      };
+
+      window.triggerDemoVfx = (btn, vfx) => {
+        const tile = btn.closest('vfx-tile');
+        const sprite = tile.querySelector('combatant-sprite');
+        const floaterHost = tile.querySelector('vfx-floater-host');
+
+        if (ATTACK_KEYS.includes(vfx.key)) {
+          sprite.style.setProperty('--attack-anim', `bb-${vfx.key}`);
+          sprite.style.setProperty('--attack-anim-duration', `${vfx.duration}ms`);
+          sprite.style.animation = 'none';
+          void sprite.offsetWidth;
+          sprite.style.animation = '';
+          setTimeout(() => sprite.style.setProperty('--attack-anim', 'none'), vfx.duration);
+          return;
+        }
+
+        const attr = ATTR_MAP[vfx.key];
+        if (attr) {
+          // Mirror combat: animations that read a per-VFX duration var (e.g. stomp's
+          // bb-stomp) get it set here; harmless for the fixed-duration ones.
+          sprite.style.setProperty(`--${vfx.key}-duration`, `${vfx.duration}ms`);
+          restartAttr(sprite, attr, vfx.duration);
+        }
+
+        const floaterKey = FLOATER_MAP[vfx.key];
+        if (floaterKey) spawnFloater(floaterHost, floaterKey);
+      };
+
+      // --- Combat preview (live arena + state toggles) ---
+      window.previewEffects = Object.entries(STATUS_EFFECTS)
+        .filter(([, def]) => def.kind === 'effect')
+        .map(([statusKey, def]) => ({ statusKey, name: def.name }));
+      window.previewThresholds = Object.entries(STATUS_EFFECTS)
+        .filter(([, def]) => def.kind === 'threshold')
+        .map(([statusKey, def]) => ({ statusKey, name: def.name }));
+
+      const EFFECT_KEYS = previewEffects.map((s) => s.statusKey);
+      const THRESHOLD_KEYS = previewThresholds.map((s) => s.statusKey);
+
+      const creatureKeys = Object.keys(ALL_CHARACTERS).filter(
+        (k) => ALL_CHARACTERS[k].race?.name === 'creature' && !['rat', 'golem'].includes(k),
+      );
+      const pickCreature = (seed) => creatureKeys[seededRandom(0, creatureKeys.length - 1, seed)];
+
+      $.combatPreview = {
+        teams: 2,
+        combatants: 1,
+        health: 100,
+        buffer: 0,
+        armor: 0,
+        damage: 0,
+        ticks: 7,
+        stack: 4,
+        knockedOut: false,
+        blocking: false,
+        dodging: false,
+        endState: 'none',
+      };
+
+      // The ResultAnnouncement overlay resolves its outcome from bare markup calls
+      // (window.*); wire the shared helpers in, plus a preview XP source and click
+      // handlers that just dismiss the overlay back to 'none'.
+      Object.assign(window, {
+        combatEnded,
+        combatOutcome,
+        combatResultOutcome,
+        combatResultLabel,
+        combatResultTeamColor,
+      });
+      window.combatRewardXp = (combat) => combat.teamplayXp || 0;
+      window.claimCombatReward = () => setEndStatePreview('none');
+      window.combatLossAction = () => setEndStatePreview('none');
+
+      // Each variation overlays the concluded-fight state onto the live preview board.
+      // Attending uses a teamplay context (clean XP, no season/stat coupling) so the
+      // rewards or loss panel shows; spectating shows the neutral banner only. Draw =
+      // no winningTeam. Spectating 'defeat' is the other team's win (a spectator is
+      // neutral — the game has no spectator defeat), matching real result logic.
+      const END_STATES = {
+        'attend-victory': {
+          context: 'teamplay',
+          myTeamIndex: 0,
+          winningTeam: { index: 0 },
+          teamplayXp: 240,
+        },
+        'attend-defeat': { context: 'teamplay', myTeamIndex: 0, winningTeam: { index: 1 } },
+        'attend-draw': { context: 'teamplay', myTeamIndex: 0 },
+        'spectate-victory': { spectator: true, winningTeam: { index: 0 } },
+        'spectate-defeat': { spectator: true, winningTeam: { index: 1 } },
+        'spectate-draw': { spectator: true },
+      };
+
+      const buildBasePreview = (p = $.combatPreview) =>
+        prepareTeams(
+          ...Array.from({ length: p.teams }, (_, ti) =>
+            Array.from({ length: p.combatants }, (_, ci) =>
+              CHARACTERS(pickCreature(`preview_${ti}_${ci}`)),
+            ),
+          ),
+        );
+
+      let basePreview = buildBasePreview();
+
+      window.applyCombatPreview = (p = $.combatPreview) => {
+        const next = JSON.parse(JSON.stringify(basePreview));
+        next.forEach((team) =>
+          team.combatants.forEach((cb) => {
+            cb.combatStats.currentHealth = Math.round((cb.combatStats.maxHealth * p.health) / 100);
+            cb.combatStats.bufferedHealth = Math.min(
+              Math.round((cb.combatStats.maxHealth * p.buffer) / 100),
+              cb.combatStats.currentHealth,
+            );
+            cb.combatStats.currentArmor = p.armor;
+            if (p.armor > cb.combatStats.maxArmor) cb.combatStats.maxArmor = p.armor;
+            cb.damage = p.damage;
+            cb.statuses.knockedOut = p.knockedOut ? 1 : 0;
+            EFFECT_KEYS.forEach((k) => {
+              const permanent = STATUS_EFFECTS[k].permanent;
+              cb.statuses[k] = {
+                ticks: permanent ? 0 : p[k] ? p.ticks : 0,
+                value: permanent && p[k] ? 1 : 0,
+                element: statusElement(k),
+              };
+            });
+            THRESHOLD_KEYS.forEach((k) => (cb.statuses[k] = { value: p[k] ? p.stack : 0, max: 8 }));
+            cb.animations = [];
+            if (p.blocking)
+              cb.animations.push({ vfxName: 'block', start: -1, end: 1e9, id: 'block' });
+            if (p.dodging)
+              cb.animations.push({ vfxName: 'attackDodged', start: -1, end: 1e9, id: 'dodge' });
+          }),
+        );
+        const end = END_STATES[p.endState] || null;
+        $.combat = {
+          ...JSON.parse(JSON.stringify(INITIAL_COMBAT)),
+          showTeamLabels: $.combat?.showTeamLabels ?? false,
+          perspectiveEnabled: $.combat?.perspectiveEnabled ?? true,
+          teamsStartState: next,
+          ...(end ? { duration: 1, ...end } : {}),
+        };
+        // combatEnded needs elapsed ≥ duration to reveal the overlay; 0 keeps it hidden.
+        $.elapsedMilliseconds = end ? 1 : 0;
+
+        // Combatants shrink as the ring fills (see combat-loop getGeometry). Expose the
+        // same scale so the outer reference circle hugs the cards at any count. Lives on
+        // <html> for the same reason as --preview-scale — Vibe re-hydrates the body subtree.
+        const { scale } = getGeometry(p.teams * p.combatants);
+        document.documentElement.style.setProperty('--combat-scale', scale);
+      };
+
+      window.toggleCombatPreview = (key, value) => {
+        const p = { ...$.combatPreview, [key]: value };
+        $.combatPreview = p;
+        if (key === 'teams' || key === 'combatants') basePreview = buildBasePreview(p);
+        applyCombatPreview(p);
+      };
+
+      window.setEndStatePreview = (value) => {
+        $.combatPreview = { ...$.combatPreview, endState: value };
+        applyCombatPreview();
+      };
+
+      $.showCombatCircle = false;
+      window.toggleCombatCircle = (value) => ($.showCombatCircle = value);
+
+      window.toggleTeamLabels = (value) => ($.combat = { ...$.combat, showTeamLabels: value });
+
+      // Tilt is baked into card positions at render time, so re-apply the preview to
+      // rebuild the board (a fresh teamsStartState) with the new perspective.
+      window.togglePerspective = (value) => {
+        $.combat = { ...$.combat, perspectiveEnabled: value };
+        applyCombatPreview();
+      };
+
+      // Scale the ring so the outermost circle — the same boundary the live arena fits
+      // against (combatFitScale) — fits the arena box, in both width and height. The
+      // outermost <combat-circle> is sized to that ellipse, so measuring it is the fit;
+      // it stays laid out (visibility, not display) when the guide is toggled off so the
+      // boundary is always measurable. --preview-scale is set on :root, not the arena,
+      // because Vibe re-hydrates the managed body subtree during boot and would wipe an
+      // inline style on the arena; <html> is never touched, so the value survives.
+      // Re-query the arena every call: Vibe replaces the managed body subtree during
+      // boot, so a node captured early is detached and never resizes again (its
+      // clientHeight stays 0). Returns the live arena once it has real layout — so the
+      // ResizeObserver latches onto the final node — or null while fit is still 0.
+      const fitCombatPreview = () => {
+        const arena = document.querySelector('combat-preview-arena');
+        const boundary = document.querySelector('combat-circle[outermost]');
+        const scale = combatFitScale(boundary, arena?.clientWidth, arena?.clientHeight);
+        if (scale == null) return null;
+        document.documentElement.style.setProperty('--preview-scale', scale);
+        // The ResultAnnouncement overlay (unscaled, sibling of the ring) sizes its split
+        // layout off --combat-fit-scale — the live combat's equivalent of --preview-scale.
+        document.documentElement.style.setProperty('--combat-fit-scale', scale);
+        return arena;
+      };
+
+      // combat-preview-arena is rendered asynchronously in both builds (Vibe places the
+      // Layout slot after boot returns), so it isn't in the DOM yet here. Don't use
+      // $.on('ready') — compiled mode reaches readiness synchronously inside boot(),
+      // before this module registers, so that handler never fires (tiny cards). Watch
+      // for the arena to appear AND lay out, then track its size; re-fitting re-queries,
+      // so it stays correct even if Vibe swaps the node afterwards.
+      const trackPreview = () => {
+        if (!fitCombatPreview()) return false;
+        // Observe the arena (its box) and the outermost circle (the boundary, which
+        // resizes with --combat-scale when the team/combatant sliders change) so the
+        // fit re-runs on either — mirrors the live arena's frame + viewport observers.
+        const obs = new ResizeObserver(fitCombatPreview);
+        obs.observe(document.querySelector('combat-preview-arena'));
+        obs.observe(document.querySelector('combat-circle[outermost]'));
+        return true;
+      };
+
+      if (!trackPreview()) {
+        const mo = new MutationObserver(() => trackPreview() && mo.disconnect());
+        mo.observe(document.body, { childList: true, subtree: true });
+      }
+
+      applyCombatPreview();
+    </script>
+
+    <style-loader>
+      <component src="/components/CombatantImage.html" card="@[demoCard]"></component>
+    </style-loader>
+
+    <component src="/components/Layout.html">
+      <page-content typography>
+        <component small src="/components/TitleBar.html" title="Combat preview"></component>
+
+        <demo-section block>
+          <p m="0" mb="3" text-sm text-muted>
+            A live arena rendered with the real <code>CombatArena</code> and
+            <code>CombatantCard</code> components. Toggle states on the right to preview how
+            combatants look mid-fight — statuses, knock-out, block/dodge, health, armor and damage.
+          </p>
+          <combat-preview>
+            <combat-preview-toolbar>
+              <label>
+                <input
+                  type="checkbox"
+                  role="switch"
+                  checked="@[combat?.perspectiveEnabled]"
+                  onchange="togglePerspective(this.checked)"
+                />
+                Perspective
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  role="switch"
+                  checked="@[combat?.showTeamLabels]"
+                  onchange="toggleTeamLabels(this.checked)"
+                />
+                Show team labels
+              </label>
+              <label>
+                <input
+                  type="checkbox"
+                  role="switch"
+                  checked="@[showCombatCircle]"
+                  onchange="toggleCombatCircle(this.checked)"
+                />
+                Show combat circle
+              </label>
+              <endstate-field>
+                End state
+                <label>
+                  <select
+                    value="@[combatPreview?.endState]"
+                    onchange="setEndStatePreview(this.value)"
+                  >
+                    <option value="none">None</option>
+                    <optgroup label="Account attending">
+                      <option value="attend-victory">Victory</option>
+                      <option value="attend-defeat">Defeat</option>
+                      <option value="attend-draw">Draw</option>
+                    </optgroup>
+                    <optgroup label="Spectating">
+                      <option value="spectate-victory">Victory</option>
+                      <option value="spectate-defeat">Defeat</option>
+                      <option value="spectate-draw">Draw</option>
+                    </optgroup>
+                  </select>
+                </label>
+              </endstate-field>
+            </combat-preview-toolbar>
+            <combat-preview-arena circle="@[showCombatCircle]">
+              <combat-preview-ring>
+                <combat-circle position="absolute"></combat-circle>
+                <combat-circle outer position="absolute"></combat-circle>
+                <combat-circle outermost position="absolute"></combat-circle>
+                <component src="/components/CombatArena.html">
+                  <!-- if combat?.showTeamLabels -->
+                    <component
+                      src="/components/CombatTeamLabels.html"
+                      teams="@[combat.teamsStartState]"
+                    ></component>
+                  <!-- /if -->
+                  <!-- each combatCards as card (card.cardId) -->
+                    <component src="/components/CombatantCard.html" card="@[card]"></component>
+                  <!-- /each -->
+                </component>
+              </combat-preview-ring>
+              <component src="/components/ResultAnnouncement.html"></component>
+            </combat-preview-arena>
+
+            <combat-preview-controls>
+              <control-group>
+                <control-heading>Arena</control-heading>
+                <control-sliders>
+                  <label>
+                    <control-label>Teams <strong>@[combatPreview?.teams]</strong></control-label>
+                    <input
+                      type="range"
+                      min="1"
+                      max="8"
+                      value="@[combatPreview?.teams]"
+                      oninput="toggleCombatPreview('teams', +this.value)"
+                    />
+                  </label>
+                  <label>
+                    <control-label
+                      >Combatants <strong>@[combatPreview?.combatants]</strong></control-label
+                    >
+                    <input
+                      type="range"
+                      min="1"
+                      max="8"
+                      value="@[combatPreview?.combatants]"
+                      oninput="toggleCombatPreview('combatants', +this.value)"
+                    />
+                  </label>
+                </control-sliders>
+              </control-group>
+
+              <control-group>
+                <control-heading>Status effects</control-heading>
+                <control-options>
+                  <!-- each previewEffects as s -->
+                    <label>
+                      <input
+                        type="checkbox"
+                        checked="@[combatPreview?.[s.statusKey]]"
+                        onchange="toggleCombatPreview(s.statusKey, this.checked)"
+                      />
+                      @[s.name]
+                    </label>
+                  <!-- /each -->
+                </control-options>
+              </control-group>
+
+              <control-group>
+                <control-heading>Status stacks</control-heading>
+                <control-options>
+                  <!-- each previewThresholds as s -->
+                    <label>
+                      <input
+                        type="checkbox"
+                        checked="@[combatPreview?.[s.statusKey]]"
+                        onchange="toggleCombatPreview(s.statusKey, this.checked)"
+                      />
+                      @[s.name]
+                    </label>
+                  <!-- /each -->
+                </control-options>
+              </control-group>
+
+              <control-group>
+                <control-heading>Sprite states</control-heading>
+                <control-options>
+                  <label>
+                    <input
+                      type="checkbox"
+                      role="switch"
+                      checked="@[combatPreview?.knockedOut]"
+                      onchange="toggleCombatPreview('knockedOut', this.checked)"
+                    />
+                    Knocked out
+                  </label>
+                  <label>
+                    <input
+                      type="checkbox"
+                      role="switch"
+                      checked="@[combatPreview?.blocking]"
+                      onchange="toggleCombatPreview('blocking', this.checked)"
+                    />
+                    Blocking
+                  </label>
+                  <label>
+                    <input
+                      type="checkbox"
+                      role="switch"
+                      checked="@[combatPreview?.dodging]"
+                      onchange="toggleCombatPreview('dodging', this.checked)"
+                    />
+                    Dodging
+                  </label>
+                </control-options>
+              </control-group>
+
+              <control-group>
+                <control-heading>Values</control-heading>
+                <control-sliders>
+                  <label>
+                    <control-label>Health <strong>@[combatPreview?.health]%</strong></control-label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value="@[combatPreview?.health]"
+                      oninput="toggleCombatPreview('health', +this.value)"
+                    />
+                  </label>
+                  <label>
+                    <control-label
+                      >Heal buffer <strong>@[combatPreview?.buffer]%</strong></control-label
+                    >
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value="@[combatPreview?.buffer]"
+                      oninput="toggleCombatPreview('buffer', +this.value)"
+                    />
+                  </label>
+                  <label>
+                    <control-label>Armor <strong>@[combatPreview?.armor]</strong></control-label>
+                    <input
+                      type="range"
+                      min="0"
+                      max="100"
+                      value="@[combatPreview?.armor]"
+                      oninput="toggleCombatPreview('armor', +this.value)"
+                    />
+                  </label>
+                  <label>
+                    <control-label
+                      >Damage badge <strong>@[combatPreview?.damage]</strong></control-label
+                    >
+                    <input
+                      type="range"
+                      min="0"
+                      max="50"
+                      value="@[combatPreview?.damage]"
+                      oninput="toggleCombatPreview('damage', +this.value)"
+                    />
+                  </label>
+                  <label>
+                    <control-label
+                      >Effect ticks <strong>@[combatPreview?.ticks]</strong></control-label
+                    >
+                    <input
+                      type="range"
+                      min="0"
+                      max="99"
+                      value="@[combatPreview?.ticks]"
+                      oninput="toggleCombatPreview('ticks', +this.value)"
+                    />
+                  </label>
+                  <label>
+                    <control-label
+                      >Stack fill <strong>@[combatPreview?.stack]/8</strong></control-label
+                    >
+                    <input
+                      type="range"
+                      min="0"
+                      max="8"
+                      value="@[combatPreview?.stack]"
+                      oninput="toggleCombatPreview('stack', +this.value)"
+                    />
+                  </label>
+                </control-sliders>
+              </control-group>
+            </combat-preview-controls>
+          </combat-preview>
+        </demo-section>
+
+        <component small src="/components/TitleBar.html" title="Status effects"></component>
+
+        <demo-section block>
+          <h3 m="0" mb="1">Status pins</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            One pin per status, data-driven from <code>STATUS_EFFECTS.js</code> and ordered as in
+            combat. Hover any pin for its tooltip. Effects count down ticks; thresholds fill a
+            <code>value / max</code> counter.
+          </p>
+          <demo-chip-row>
+            <!-- each demoStatuses as s -->
+              <component src="/components/StatusChip.html" s="@[s]"></component>
+            <!-- /each -->
+          </demo-chip-row>
+        </demo-section>
+
+        <component
+          small
+          src="/components/TitleBar.html"
+          title="VFX (sprite animations)"
+        ></component>
+
+        <demo-section block>
+          <p m="0" mb="3" text-sm text-muted>
+            Each tile renders the same <code>combatant-sprite</code> shell combat uses. Click
+            <em>Play</em> to fire the actual combat trigger — attack keyframes for moving attacks,
+            sprite attributes for block/hurt/blocked/dodged, health-bar floaters for hurt/armor
+            damage/heal/miss. A few VFX entries have no combat-side animation (noted below the
+            sprite).
+          </p>
+          <demo-vfx-grid
+            style="
+              --position-x: 0;
+              --position-y: 0;
+              --attack-start-x: calc(var(--unit) * -4);
+              --attack-start-y: 0;
+              --attack-end-x: calc(var(--unit) * 8);
+              --attack-end-y: 0;
+            "
+          >
+            <!-- each demoVfx as v -->
+              <vfx-tile>
+                <vfx-stage>
+                  <vfx-floater-host></vfx-floater-host>
+                  <combatant-sprite
+                    style="
+                      --position-x: 0px;
+                      --position-y: 0px;
+                      --dir: 1;
+                      --sprite-height: calc(var(--unit) * 24);
+                      --c-scale: 0.75;
+                    "
+                  >
+                    <sprite-inner flex down>
+                      <sprite-squish block>
+                        <img
+                          class="combatant-avatar"
+                          src="/static/images/races/human/male-01.webp"
+                          alt=""
+                        />
+                        <sprite-hurt-mask
+                          position="absolute"
+                          style="--img: url('/static/images/races/human/male-01.webp')"
+                        ></sprite-hurt-mask>
+                        <sprite-dodge-ghost
+                          position="absolute"
+                          style="--img: url('/static/images/races/human/male-01.webp')"
+                        ></sprite-dodge-ghost>
+                        <sprite-block position="absolute">
+                          <img src="/static/images/shield-1455x2329.webp" alt="" />
+                          <sprite-block-flash position="absolute"></sprite-block-flash>
+                        </sprite-block>
+                      </sprite-squish>
+                    </sprite-inner>
+                  </combatant-sprite>
+                </vfx-stage>
+                <vfx-meta>
+                  <strong>@[v.key]</strong>
+                  <span>@[v.duration]ms</span>
+                  <!-- if v.note -->
+                    <vfx-note>@[v.note]</vfx-note>
+                  <!-- /if -->
+                </vfx-meta>
+                <button secondary sm onclick="triggerDemoVfx(this, v)">Play</button>
+              </vfx-tile>
+            <!-- /each -->
+          </demo-vfx-grid>
+        </demo-section>
+
+        <component small src="/components/TitleBar.html" title="SFX (audio)"></component>
+
+        <demo-section block>
+          <p m="0" mb="3" text-sm text-muted>
+            Entries from <code>SFX.js</code>. Click <em>Play</em> to play a random variant. Volume
+            is fixed at 0.5; combat usage scales by user volume settings.
+          </p>
+          <demo-sfx-grid>
+            <!-- each demoSfx as s -->
+              <sfx-tile>
+                <sfx-head>
+                  <sfx-meta>
+                    <strong>@[s.sfxName]</strong>
+                    <span
+                      >@[s.variants ? s.variants.length : 0] variant(s) · @[s.duration]ms ·
+                      @[s.abilities.length] abilities</span
+                    >
+                  </sfx-meta>
+                  <button secondary sm onclick="playDemoSfx(s)">Play</button>
+                </sfx-head>
+                <sfx-abilities>
+                  <!-- each s.abilities as ability (ability.id) -->
+                    <ability-with-name>
+                      <component
+                        src="/components/AbilityCell.html"
+                        ability="@[ability]"
+                      ></component>
+                      <span>@[ability.name]</span>
+                    </ability-with-name>
+                  <!-- /each -->
+                  <!-- if !s.abilities.length -->
+                    <sfx-empty>No abilities use this SFX</sfx-empty>
+                  <!-- /if -->
+                </sfx-abilities>
+              </sfx-tile>
+            <!-- /each -->
+          </demo-sfx-grid>
+        </demo-section>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-combat-components] demo-section {
+        padding: calc(var(--unit) * 3);
+      }
+
+      page[_internal-combat-components] combat-preview {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-combat-components] combat-preview-arena {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        overflow: hidden;
+        border: 1px solid var(--scrim-2);
+        border-radius: calc(var(--unit) * 1);
+        background: url('/static/images/bg/arena-combat-4096x2304.webp') center / cover no-repeat;
+        box-shadow: inset 0 0 calc(var(--unit) * 20) oklch(0 0 0 / 0.55);
+      }
+
+      page[_internal-combat-components] combat-preview-ring {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: calc(var(--unit) * 175);
+        height: calc(var(--unit) * 175);
+        transform: translate(-50%, -50%) scale(var(--preview-scale, 0.4));
+      }
+
+      page[_internal-combat-components] combat-preview-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: calc(var(--unit) * 2) calc(var(--unit) * 4);
+      }
+
+      page[_internal-combat-components] combat-preview-toolbar > label {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1.5);
+      }
+
+      page[_internal-combat-components] combat-preview-toolbar endstate-field {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-combat-components] combat-circle {
+        top: 50%;
+        left: 50%;
+        width: var(--ring-d);
+        height: calc(var(--ring-d) * var(--combat-tilt, 1));
+        transform: translate(-50%, -50%);
+        border: 1px dashed oklch(1 0 0 / 0.5);
+        border-radius: 50%;
+        pointer-events: none;
+      }
+
+      page[_internal-combat-components] combat-circle[outer] {
+        width: var(--combat-outer-d);
+        height: calc(var(--combat-outer-d) * var(--combat-outer-tilt, 1));
+        border-color: oklch(1 0 0 / 0.3);
+      }
+
+      page[_internal-combat-components] combat-circle[outermost] {
+        width: calc(var(--combat-outer-d) * 1.2);
+        height: calc(var(--combat-outer-d) * 1.2 * var(--combat-outer-tilt, 1));
+        border-color: oklch(1 0 0 / 0.2);
+      }
+
+      page[_internal-combat-components] combat-preview-arena:not([circle]) combat-circle {
+        visibility: hidden;
+      }
+
+      page[_internal-combat-components] combat-preview-controls {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 5);
+      }
+
+      page[_internal-combat-components] control-group {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-combat-components] control-heading {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 4);
+        color: var(--foreground);
+      }
+
+      page[_internal-combat-components] control-options {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 2) calc(var(--unit) * 4);
+      }
+
+      page[_internal-combat-components] control-options label {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1.5);
+      }
+
+      page[_internal-combat-components] control-sliders {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-combat-components] control-sliders label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-combat-components] control-sliders control-label {
+        flex: none;
+        white-space: nowrap;
+      }
+
+      page[_internal-combat-components] control-sliders input[type='range'] {
+        flex: 1;
+        min-width: 0;
+      }
+
+      page[_internal-combat-components] demo-chip-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 4);
+        padding: calc(var(--unit) * 2);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border: 1px solid var(--scrim-2);
+        border-radius: calc(var(--unit) * 1);
+        align-items: center;
+      }
+
+      page[_internal-combat-components] demo-vfx-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 44), 1fr));
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-combat-components] vfx-tile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 3);
+        border: 1px solid var(--scrim-2);
+        border-radius: calc(var(--unit) * 1);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+      }
+
+      page[_internal-combat-components] vfx-stage {
+        position: relative;
+        width: 100%;
+        height: calc(var(--unit) * 32);
+        overflow: visible;
+      }
+
+      page[_internal-combat-components] vfx-floater-host {
+        position: absolute;
+        top: calc(var(--unit) * 1);
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        z-index: 2;
+      }
+
+      page[_internal-combat-components] vfx-floater-host hp-floater {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+      }
+
+      page[_internal-combat-components] vfx-meta {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        font-size: calc(var(--unit) * 3);
+      }
+
+      page[_internal-combat-components] vfx-meta span {
+        color: var(--muted-foreground);
+        font-size: calc(var(--unit) * 2.5);
+      }
+
+      page[_internal-combat-components] vfx-note {
+        margin-top: calc(var(--unit) * 0.5);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        font-size: calc(var(--unit) * 2.5);
+        font-style: italic;
+      }
+
+      page[_internal-combat-components] demo-sfx-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 80), 1fr));
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-combat-components] sfx-tile {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 3);
+        border: 1px solid var(--scrim-2);
+        border-radius: calc(var(--unit) * 1);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+      }
+
+      page[_internal-combat-components] sfx-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-combat-components] sfx-abilities {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-combat-components] ability-with-name {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 1);
+        width: calc(var(--unit) * 12);
+      }
+
+      page[_internal-combat-components] ability-with-name span {
+        font-size: calc(var(--unit) * 2.5);
+        color: var(--muted-foreground);
+        text-align: center;
+        line-height: 1.1;
+      }
+
+      page[_internal-combat-components] sfx-empty {
+        font-size: calc(var(--unit) * 2.75);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        font-style: italic;
+      }
+
+      page[_internal-combat-components] sfx-meta {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        flex: 1;
+      }
+
+      page[_internal-combat-components] sfx-meta strong {
+        font-size: calc(var(--unit) * 3.25);
+      }
+
+      page[_internal-combat-components] sfx-meta span {
+        font-size: calc(var(--unit) * 2.5);
+        color: var(--muted-foreground);
+      }
+
+      style-loader {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+        pointer-events: none;
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/elements.html b/pages/_internal/elements.html
new file mode 100644
index 00000000..b63ed19a
--- /dev/null
+++ b/pages/_internal/elements.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Elements · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      import { ALL_ELEMENTS, ELEMENT_KEYS } from '/js/constants/ELEMENTS.js';
+
+      boot();
+
+      const FILES = {
+        frost: 'frost-452x622.webp',
+        fire: 'fire-477x730.webp',
+        lightning: 'lightning-422x586.webp',
+        earth: 'earth-621x619.webp',
+        nature: 'nature-425x704.webp',
+      };
+
+      const order = ['frost', 'fire', 'lightning', 'earth', 'nature'];
+      window.elementIcons = order.map((key) => ({
+        key,
+        label: key[0].toUpperCase() + key.slice(1),
+        file: FILES[key],
+        color: ALL_ELEMENTS[key].color,
+      }));
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <element-section>
+          <section-title>Small</section-title>
+          <element-grid small>
+            <!-- each elementIcons as el (el.key) -->
+              <element-tile @[el.key] style="--element-color: @[el.color]">
+                <component
+                  src="/components/IconCell.html"
+                  tip="@[{ info: { name: el.label, description: el.key + ' element' } }]"
+                >
+                  <img
+                    data-src="/static/images/elements/@[el.file]"
+                    alt="@[el.label]"
+                    element-img
+                  />
+                </component>
+                <code>@[el.key]</code>
+              </element-tile>
+            <!-- /each -->
+          </element-grid>
+        </element-section>
+
+        <element-section>
+          <section-title>Large</section-title>
+          <element-grid large>
+            <!-- each elementIcons as el (el.key) -->
+              <element-tile @[el.key] style="--element-color: @[el.color]">
+                <component
+                  src="/components/IconCell.html"
+                  tip="@[{ info: { name: el.label, description: el.key + ' element' } }]"
+                >
+                  <img
+                    data-src="/static/images/elements/@[el.file]"
+                    alt="@[el.label]"
+                    element-img
+                  />
+                </component>
+                <code>@[el.key]</code>
+              </element-tile>
+            <!-- /each -->
+          </element-grid>
+        </element-section>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-elements] page-content {
+        gap: calc(var(--unit) * 8);
+      }
+
+      page[_internal-elements] element-section {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-elements] section-title {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 4);
+        color: oklch(from var(--foreground) l 0 h / 0.6);
+      }
+
+      page[_internal-elements] element-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-elements] element-tile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-elements] element-tile code {
+        font-size: calc(var(--unit) * 3);
+        color: var(--muted-foreground);
+      }
+
+      page[_internal-elements] [small] icon-cell {
+        width: calc(var(--unit) * 9);
+        height: calc(var(--unit) * 9);
+      }
+
+      page[_internal-elements] [large] icon-cell {
+        width: calc(var(--unit) * 22);
+        height: calc(var(--unit) * 22);
+      }
+
+      page[_internal-elements] [element-img] {
+        width: 80%;
+        height: 80%;
+        object-fit: contain;
+        filter: drop-shadow(
+          1px 1px 0 oklch(from var(--element-color, var(--hue-purple)) calc(l * 0.6) c h / 0.5)
+        );
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/equipment-scaling.html b/pages/_internal/equipment-scaling.html
new file mode 100644
index 00000000..90b446e6
--- /dev/null
+++ b/pages/_internal/equipment-scaling.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/EquipmentScalingContent.html"></component>
+      </page-content>
+    </component>
+  </body>
+</html>
diff --git a/pages/_internal/equipment.html b/pages/_internal/equipment.html
new file mode 100644
index 00000000..66a4a884
--- /dev/null
+++ b/pages/_internal/equipment.html
@@ -0,0 +1,418 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+      import ABILITIES from '/js/constants/ABILITIES.js';
+      import { slotsInPrettyName, equipmentRaces } from '/js/equipment.js';
+      import { combatStatsToList } from '/js/tooltip.js';
+      import { abilityStatusChips } from '/js/utils.js';
+
+      $.equipQuery = '';
+      $.equipFilter = 'all';
+      $.physicalList = [];
+      $.elementalList = [];
+      $.equipShown = 0;
+      $.equipTotal = 0;
+
+      const OBTAINED_LABELS = {
+        armory: 'Armory',
+        levelUp: 'Level up',
+        'pve-fight': 'Fight drop',
+        'pve-ladder': 'Ladder reward',
+      };
+
+      const chunkPairs = (arr) =>
+        arr.reduce((rows, x, i) => {
+          if (i % 2 === 0) rows.push([x]);
+          else rows[rows.length - 1].push(x);
+          return rows;
+        }, []);
+
+      window.allEquipment = Object.keys(ALL_EQUIPMENT).map((key) => {
+        const item = EQUIPMENT(key, true);
+        const abilities = [
+          ...new Map(
+            (item.abilities || [])
+              .map((a) => ABILITIES(a, true))
+              .filter((h) => !h.basic)
+              .map((h) => [h.id, { ...h, uuid: h.id, statusChips: abilityStatusChips(h) }]),
+          ).values(),
+        ];
+        return {
+          ...item,
+          id: key,
+          slotLabel: slotsInPrettyName(item.slotsIn),
+          races: equipmentRaces(key),
+          stats: combatStatsToList(item.combatStats, true),
+          abilities,
+          abilityRows: chunkPairs(abilities),
+          isPhysical: !item.element,
+          obtainedLabel:
+            (item.obtainedFrom || []).map((o) => OBTAINED_LABELS[o] || o).join(', ') || '—',
+        };
+      });
+
+      // Two groups, physical first, each level-ordered. The element toggles narrow the
+      // elemental group; "physical" narrows to the physical group; otherwise both show.
+      // The result is pushed into $-state arrays the template iterates bare — a method
+      // call (.filter) directly in an <!-- each --> source doesn't iterate in Vibe, so
+      // we keep the transform in JS and only ever iterate a plain reactive array.
+      const equipRows = (group) => {
+        const q = $.equipQuery.toLowerCase();
+        const filter = $.equipFilter;
+        if (filter === 'physical' && group !== 'physical') return [];
+        if (
+          ['fire', 'frost', 'earth', 'nature', 'lightning'].includes(filter) &&
+          group !== 'elemental'
+        )
+          return [];
+        return window.allEquipment
+          .filter((item) => (group === 'physical') === item.isPhysical)
+          .filter((item) =>
+            (item.name + item.id + item.abilities.map((a) => a.name).join(''))
+              .toLowerCase()
+              .includes(q),
+          )
+          .filter((item) => filter === 'all' || filter === 'physical' || item.element === filter)
+          .sort((a, b) => (a.level || 0) - (b.level || 0));
+      };
+
+      $.equipTotal = window.allEquipment.length;
+      window.refreshEquipLists = () => {
+        $.physicalList = equipRows('physical');
+        $.elementalList = equipRows('elemental');
+        $.equipShown = $.physicalList.length + $.elementalList.length;
+      };
+      // Populate synchronously so the <!-- each --> never binds to an empty array (a
+      // mounted empty each loses its reactivity in Vibe).
+      window.refreshEquipLists();
+
+      window.equipRaceTooltip = (races) =>
+        `<span capitalize>${races.map((r) => r.title).join(', ')}</span>`;
+
+      window.toggleEquipFilter = (value) => {
+        $.equipFilter = $.equipFilter === value ? 'all' : value;
+        window.refreshEquipLists();
+      };
+
+      window.acquireEquipment = (itemId) => {
+        const item = EQUIPMENT(itemId, false);
+        const { level } = EQUIPMENT(item, true);
+        item.overrides = { level };
+        $.inventory.push(item);
+        notify.success('Equipment acquired!');
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <!-- if settings.isTester -->
+          <crow justify-between w="full" g="3" align-center equip-bar>
+            <crow g="3" align-center f="1" equip-search-row>
+              <label equip-search>
+                <input
+                  type="search"
+                  placeholder="Filter equipment…"
+                  value="@[equipQuery]"
+                  oninput="
+                    $.equipQuery = this.value;
+                    refreshEquipLists();
+                  "
+                />
+              </label>
+              <eq-meta>@[equipShown] / @[equipTotal] items</eq-meta>
+            </crow>
+            <crow g="2" f="none" equip-filters>
+              <button
+                onclick="toggleEquipFilter('physical')"
+                primary="@[equipFilter === 'physical']"
+                secondary="@[equipFilter !== 'physical']"
+              >
+                Physical
+              </button>
+              <!-- each ['fire', 'frost', 'earth', 'nature', 'lightning'] as el -->
+                <button
+                  onclick="toggleEquipFilter(el)"
+                  primary="@[equipFilter === el]"
+                  secondary="@[equipFilter !== el]"
+                  capitalize
+                >
+                  <icon @[el]></icon>
+                  @[el]
+                </button>
+              <!-- /each -->
+            </crow>
+          </crow>
+          <!-- if physicalList.length -->
+            <component src="/components/TitleBar.html" title="Physical"></component>
+            <table game-table>
+              <tr game-table-header>
+                <td>Name</td>
+                <td>Level</td>
+                <td>Slots in</td>
+                <td>Race</td>
+                <td>Ability</td>
+                <td>Stats</td>
+                <td>Obtained from</td>
+                <td></td>
+              </tr>
+              <!-- each physicalList as item, i -->
+                <component
+                  src="/components/EquipmentCatalogRow.html"
+                  item="@[item]"
+                  even="@[i % 2 === 0]"
+                ></component>
+              <!-- /each -->
+            </table>
+          <!-- /if -->
+          <!-- if elementalList.length -->
+            <component src="/components/TitleBar.html" title="Non-physical (elemental)"></component>
+            <table game-table>
+              <tr game-table-header>
+                <td>Name</td>
+                <td>Level</td>
+                <td>Slots in</td>
+                <td>Race</td>
+                <td>Ability</td>
+                <td>Stats</td>
+                <td>Obtained from</td>
+                <td></td>
+              </tr>
+              <!-- each elementalList as item, i -->
+                <component
+                  src="/components/EquipmentCatalogRow.html"
+                  item="@[item]"
+                  even="@[i % 2 === 0]"
+                ></component>
+              <!-- /each -->
+            </table>
+          <!-- /if -->
+        <!-- else -->
+          <component src="/components/PageNotFound.html"> </component>
+        <!-- /if -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-equipment] [equip-search] {
+        flex: 1;
+        max-width: calc(var(--unit) * 80);
+        min-width: 0;
+      }
+
+      page[_internal-equipment] [equip-search] input {
+        width: 100%;
+      }
+
+      page[_internal-equipment] eq-meta {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        white-space: nowrap;
+      }
+
+      page[_internal-equipment] [equip-filters] {
+        flex-wrap: wrap;
+        justify-content: flex-end;
+      }
+
+      page[_internal-equipment] [equip-filters] button {
+        gap: calc(var(--unit) * 1.5);
+      }
+
+      page[_internal-equipment] [equip-filters] button > * {
+        margin-inline: 0;
+      }
+
+      page[_internal-equipment] [equip-filters] button icon {
+        font-size: calc(var(--unit) * 4);
+      }
+
+      page[_internal-equipment] [game-table] {
+        width: calc(100% + var(--unit) * 12);
+        margin-top: calc(var(--unit) * 4);
+        margin-inline: calc(var(--unit) * -6);
+        border-collapse: collapse;
+      }
+
+      page[_internal-equipment] [game-table] td {
+        padding: calc(var(--unit) * 3) calc(var(--unit) * 2);
+        border-bottom: 1px solid var(--c-line);
+        vertical-align: middle;
+      }
+
+      page[_internal-equipment] [game-table] td:first-child {
+        width: 100%;
+        padding-left: calc(var(--unit) * 6);
+      }
+
+      page[_internal-equipment] [game-table] td:last-child {
+        padding-right: calc(var(--unit) * 6);
+      }
+
+      page[_internal-equipment] [game-table-header] td {
+        font-size: calc(var(--unit) * 3);
+        font-weight: 400;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--c-muted);
+      }
+
+      page[_internal-equipment] [game-table-row] {
+        font-size: calc(var(--unit) * 4);
+        color: var(--c-fg);
+        transition: background 200ms ease;
+      }
+
+      page[_internal-equipment] [game-table-row][even] {
+        background: oklch(from var(--c-fg) l c h / 0.05);
+      }
+
+      page[_internal-equipment] [game-table] tr:last-child td {
+        border-bottom: 0;
+      }
+
+      page[_internal-equipment] [game-table-row]:hover {
+        background: oklch(from var(--c-accent) l c h / 0.1);
+        box-shadow: inset calc(var(--unit) * 0.5) 0 0 oklch(from var(--c-accent) l c h / 0.55);
+      }
+
+      page[_internal-equipment] [eq-col-name] {
+        display: flex;
+        min-width: 0;
+      }
+
+      page[_internal-equipment] eq-col-stats {
+        min-width: 0;
+      }
+
+      page[_internal-equipment] [eq-col-level] {
+        font-variant-numeric: tabular-nums;
+      }
+
+      page[_internal-equipment] [eq-col-races] {
+        display: flex;
+        align-items: center;
+      }
+
+      page[_internal-equipment] [eq-col-ability] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-equipment] [eq-col-ability] ability-tile {
+        width: calc(var(--unit) * 8);
+        height: calc(var(--unit) * 8);
+      }
+
+      page[_internal-equipment] [eq-col-ability] ability-tile [ability-glyph] icon {
+        font-size: calc(var(--unit) * 4.8);
+      }
+
+      page[_internal-equipment] eq-col-stats {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        font-variant-numeric: tabular-nums;
+      }
+
+      page[_internal-equipment] eq-col-stats eq-stat {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-equipment] eq-col-stats icon-cell {
+        width: calc(var(--unit) * 5);
+        height: calc(var(--unit) * 5);
+      }
+
+      page[_internal-equipment] eq-col-stats icon {
+        font-size: calc(var(--unit) * 3.5);
+      }
+
+      page[_internal-equipment]
+        eq-col-stats
+        icon:not([fire], [frost], [earth], [nature], [lightning]) {
+        background-color: var(--muted-foreground);
+      }
+
+      page[_internal-equipment]
+        [game-table-row]:hover
+        eq-col-stats
+        icon:not([fire], [frost], [earth], [nature], [lightning]) {
+        background-color: var(--color, var(--muted-foreground));
+      }
+
+      page[_internal-equipment] eq-col-stats icon[fire],
+      page[_internal-equipment] eq-col-stats icon[frost],
+      page[_internal-equipment] eq-col-stats icon[earth],
+      page[_internal-equipment] eq-col-stats icon[nature],
+      page[_internal-equipment] eq-col-stats icon[lightning] {
+        filter: var(--element-icon-shadow) grayscale(1);
+        transition: filter 0.15s ease;
+      }
+
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats icon[fire],
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats icon[frost],
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats icon[earth],
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats icon[nature],
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats icon[lightning] {
+        filter: var(--element-icon-shadow) grayscale(0);
+      }
+
+      page[_internal-equipment] eq-col-stats span {
+        color: var(--muted-foreground);
+      }
+
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats span {
+        color: inherit;
+      }
+
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats span[text-green] {
+        color: var(--green);
+      }
+
+      page[_internal-equipment] [game-table-row]:hover eq-col-stats span[text-red] {
+        color: var(--red);
+      }
+
+      page[_internal-equipment] [eq-col-name] eq-name-target {
+        display: block;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      page[_internal-equipment] [eq-col-action] {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      @media (width <= 768px) {
+        page[_internal-equipment] [game-table] td:nth-child(3),
+        page[_internal-equipment] [game-table] td:nth-child(7) {
+          display: none;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/form-elements.html b/pages/_internal/form-elements.html
new file mode 100644
index 00000000..0238c566
--- /dev/null
+++ b/pages/_internal/form-elements.html
@@ -0,0 +1,246 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Form elements · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <form-section>
+          <section-title>Buttons</section-title>
+          <element-row>
+            <button primary>Primary</button>
+            <button secondary>Secondary</button>
+            <button tertiary>Tertiary</button>
+          </element-row>
+          <element-row>
+            <button primary disabled>Primary</button>
+            <button secondary disabled>Secondary</button>
+            <button tertiary disabled>Tertiary</button>
+          </element-row>
+          <element-row>
+            <a href="#" class="button" primary onclick="event.preventDefault()">Primary</a>
+            <a href="#" class="button" secondary onclick="event.preventDefault()">Secondary</a>
+            <a href="#" class="button" tertiary onclick="event.preventDefault()">Tertiary</a>
+          </element-row>
+          <element-row>
+            <button primary>
+              <crow g="2" px="1"> <icon coin></icon> With icon </crow>
+            </button>
+            <button secondary>
+              <crow g="2" px="1"> <icon coin></icon> With icon </crow>
+            </button>
+            <button tertiary>
+              <crow g="2" px="1"> <icon coin></icon> With icon </crow>
+            </button>
+          </element-row>
+          <element-row>
+            <button primary><icon coin></icon></button>
+            <button secondary><icon coin></icon></button>
+            <button tertiary><icon coin></icon></button>
+          </element-row>
+          <element-row>
+            <component src="/components/buttons/Cross.html" label="Close"></component>
+            <close-button-preview>
+              <component src="/components/buttons/OverlayClose.html"></component>
+            </close-button-preview>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Text inputs</section-title>
+          <element-row>
+            <input type="text" placeholder="Text" />
+            <input type="email" placeholder="Email" />
+            <input type="password" placeholder="Password" />
+            <input type="search" placeholder="Search" />
+            <input type="text" placeholder="Disabled" disabled />
+          </element-row>
+          <element-row>
+            <label>
+              <input type="text" placeholder="Text in label" />
+            </label>
+            <label>
+              <input type="email" placeholder="Email in label" />
+            </label>
+            <label>
+              <input type="search" placeholder="Search in label" />
+            </label>
+            <label>
+              <input type="text" placeholder="Disabled in label" disabled />
+            </label>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Textarea</section-title>
+          <element-row>
+            <textarea placeholder="Textarea" rows="3"></textarea>
+            <textarea placeholder="Disabled" rows="3" disabled></textarea>
+          </element-row>
+          <element-row>
+            <label>
+              <textarea placeholder="Textarea in label" rows="3"></textarea>
+            </label>
+            <label>
+              <textarea placeholder="Disabled in label" rows="3" disabled></textarea>
+            </label>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Checkbox</section-title>
+          <element-row>
+            <input type="checkbox" />
+            <input type="checkbox" checked />
+            <input type="checkbox" disabled />
+            <input type="checkbox" checked disabled />
+          </element-row>
+          <element-row>
+            <label>
+              <input type="checkbox" />
+              Unchecked
+            </label>
+            <label>
+              <input type="checkbox" checked />
+              Checked
+            </label>
+            <label>
+              <input type="checkbox" disabled />
+              Disabled
+            </label>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Radio</section-title>
+          <element-row>
+            <input type="radio" name="demo-r1" />
+            <input type="radio" name="demo-r1" checked />
+            <input type="radio" name="demo-r1" disabled />
+          </element-row>
+          <element-row>
+            <label>
+              <input type="radio" name="demo-r2" />
+              Option A
+            </label>
+            <label>
+              <input type="radio" name="demo-r2" checked />
+              Option B
+            </label>
+            <label>
+              <input type="radio" name="demo-r2" disabled />
+              Disabled
+            </label>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Switch</section-title>
+          <element-row>
+            <input type="checkbox" role="switch" />
+            <input type="checkbox" role="switch" checked />
+            <input type="checkbox" role="switch" disabled />
+            <input type="checkbox" role="switch" checked disabled />
+          </element-row>
+          <element-row>
+            <label>
+              <input type="checkbox" role="switch" />
+              Off
+            </label>
+            <label>
+              <input type="checkbox" role="switch" checked />
+              On
+            </label>
+            <label>
+              <input type="checkbox" role="switch" disabled />
+              Disabled
+            </label>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Select</section-title>
+          <element-row>
+            <select>
+              <option>Option A</option>
+              <option>Option B</option>
+              <option>Option C</option>
+            </select>
+            <select disabled>
+              <option>Disabled</option>
+            </select>
+          </element-row>
+          <element-row>
+            <label>
+              <select>
+                <option>Option A</option>
+                <option>Option B</option>
+                <option>Option C</option>
+              </select>
+            </label>
+            <label>
+              <select disabled>
+                <option>Disabled</option>
+              </select>
+            </label>
+          </element-row>
+        </form-section>
+
+        <form-section>
+          <section-title>Range</section-title>
+          <element-row>
+            <input type="range" value="40" />
+            <input type="range" value="70" disabled />
+          </element-row>
+        </form-section>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-form-elements] page-content {
+        gap: calc(var(--unit) * 6);
+      }
+
+      page[_internal-form-elements] form-section {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-form-elements] section-title {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 5);
+        color: var(--foreground);
+      }
+
+      page[_internal-form-elements] element-row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-form-elements] close-button-preview {
+        position: relative;
+        width: calc(var(--unit) * 18);
+        height: calc(var(--unit) * 18);
+        border: 1px dashed oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/global-components.html b/pages/_internal/global-components.html
new file mode 100644
index 00000000..28d1c747
--- /dev/null
+++ b/pages/_internal/global-components.html
@@ -0,0 +1,286 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Global components · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      $.notifyPositions = [
+        { label: '↖', up: true, down: false, left: true, right: false },
+        { label: '↑', up: true, down: false, left: false, right: false },
+        { label: '↗', up: true, down: false, left: false, right: true },
+        { label: '←', up: false, down: false, left: true, right: false },
+        { label: '·', up: false, down: false, left: false, right: false },
+        { label: '→', up: false, down: false, left: false, right: true },
+        { label: '↙', up: false, down: true, left: true, right: false },
+        { label: '↓', up: false, down: true, left: false, right: false },
+        { label: '↘', up: false, down: true, left: false, right: true },
+      ];
+
+      window.tooltipDirections = [
+        { value: 'up', label: 'up', description: 'Tooltip extends upward from the focal point.' },
+        { value: 'down', label: 'down', description: 'Tooltip extends downward.' },
+        { value: 'left', label: 'left', description: 'Tooltip extends leftward.' },
+        { value: 'right', label: 'right', description: 'Tooltip extends rightward.' },
+        {
+          value: '',
+          label: 'none',
+          description: 'No direction — tooltip centered on focal point.',
+        },
+      ];
+
+      window.tooltipShapes = [
+        {
+          label: 'Plain text',
+          props: { name: 'Greeting', description: 'A simple message.' },
+        },
+        {
+          label: 'Equipment',
+          props: {
+            name: 'Excalibur',
+            level: 12,
+            slotsIn: 'Two-hand',
+            combatStats: { damage: 15, maxArmor: 4, criticalChance: 0.25 },
+            description: 'A legendary blade said to choose its wielder.',
+          },
+        },
+        {
+          label: 'Ability',
+          props: {
+            name: 'Whirlwind',
+            ticks: 3,
+            basic: false,
+            description: 'Spin in place and strike every adjacent foe.',
+          },
+        },
+      ];
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content typography>
+        <component small src="/components/TitleBar.html" title="Tooltip"></component>
+
+        <demo-section block>
+          <h3 m="0" mb="1">Cursor-follow (default)</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            Tooltip tracks the cursor; <code>direction</code> adds an offset in the named side.
+            Hover any tile.
+          </p>
+          <demo-grid>
+            <!-- each tooltipDirections as dir -->
+              <demo-tile
+                flex
+                center
+                cinzel
+                py="5"
+                px="3"
+                onmouseenter="
+                  showTooltip(
+                    { name: dir.label, description: dir.description },
+                    { direction: dir.value },
+                  )
+                "
+              >
+                @[dir.label]
+              </demo-tile>
+            <!-- /each -->
+          </demo-grid>
+        </demo-section>
+
+        <demo-section block>
+          <h3 m="0" mb="1">Locked to element</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            <code>{ lock: true }</code> pins the tooltip to the element edge; cursor movement no
+            longer affects position.
+          </p>
+          <demo-grid>
+            <!-- each tooltipDirections as dir -->
+              <demo-tile
+                flex
+                center
+                cinzel
+                py="5"
+                px="3"
+                onmouseenter="
+                  showTooltip(
+                    { name: dir.label, description: dir.description },
+                    { direction: dir.value, lock: true },
+                  )
+                "
+              >
+                @[dir.label]
+              </demo-tile>
+            <!-- /each -->
+          </demo-grid>
+        </demo-section>
+
+        <demo-section block>
+          <h3 m="0" mb="1">Content shapes</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            The Tooltip surface renders whatever lives in its <code>&lt;slot&gt;</code>. The shape
+            of <code>$.tooltip.props</code> is the host's contract. Here the same
+            <code>tooltip/Display.html</code> picks between Equipment, Ability and Text variants
+            based on prop shape.
+          </p>
+          <demo-grid>
+            <!-- each tooltipShapes as ex -->
+              <demo-tile
+                flex
+                center
+                cinzel
+                py="5"
+                px="3"
+                onmouseenter='showTooltip(@[JSON.stringify(ex.props)], { direction: "up" })'
+              >
+                @[ex.label]
+              </demo-tile>
+            <!-- /each -->
+          </demo-grid>
+        </demo-section>
+
+        <demo-section block>
+          <h3 m="0" mb="1">Programmatic dismissal</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            Tooltips usually auto-hide on <code>mouseleave</code>, but you can dismiss explicitly
+            (e.g. when starting a drag) via <code>window.hideTooltip()</code>.
+          </p>
+          <crow g="2">
+            <button
+              primary
+              onmouseenter="
+                showTooltip(
+                  { name: 'Persistent', description: 'I will stay until dismissed.' },
+                  { direction: 'up', lock: true, persist: true },
+                )
+              "
+            >
+              Hover me
+            </button>
+            <button secondary onclick="hideTooltip()">Dismiss</button>
+          </crow>
+        </demo-section>
+
+        <component small src="/components/TitleBar.html" title="Notifications"></component>
+
+        <demo-section block>
+          <h3 m="0" mb="1">Trigger by type</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            Sonner-style API:
+            <code>notify.success(msg, { description })</code>, <code>.error</code>,
+            <code>.warning</code>, <code>.info</code>, <code>.loading</code>, <code>.promise</code>,
+            <code>.dismiss</code>. Hover the stack to expand, drag toward the anchor edge to
+            dismiss.
+          </p>
+          <crow g="2" mb="3" style="flex-wrap: wrap">
+            <button secondary onclick="notify.success('Brawler recruited!')">Success</button>
+            <button secondary onclick="notify.warning('Inventory almost full')">Warning</button>
+            <button secondary onclick="notify.error('Connection lost')">Error</button>
+            <button secondary onclick="notify.info('New season starts Monday')">Info</button>
+            <button
+              secondary
+              onclick="
+                notify.success('Item equipped', {
+                  description: 'Excalibur is now in your main-hand slot. +15 damage',
+                })
+              "
+            >
+              + description
+            </button>
+            <button
+              secondary
+              onclick="
+                const id = notify.loading('Saving…');
+                setTimeout(() => notify.success('Saved!', { id }), 1500);
+              "
+            >
+              Loading → success
+            </button>
+            <button
+              secondary
+              onclick="
+                notify.promise(new Promise((r) => setTimeout(r, 1500)), {
+                  loading: 'Fetching opponent…',
+                  success: 'Opponent found!',
+                  error: 'Failed.',
+                })
+              "
+            >
+              promise()
+            </button>
+            <button secondary onclick="notify.dismiss()">Dismiss all</button>
+          </crow>
+
+          <h3 m="0" mb="1">Position</h3>
+          <p m="0" mb="3" text-sm text-muted>
+            Set <code>up</code> / <code>down</code> / <code>left</code> / <code>right</code> on
+            <code>&lt;notifications-viewport&gt;</code>. No attrs → viewport center.
+          </p>
+          <position-grid>
+            <!-- each notifyPositions as cell -->
+              <button
+                position-cell
+                secondary
+                active="@[$.notifyUp === cell.up && $.notifyDown === cell.down && $.notifyLeft === cell.left && $.notifyRight === cell.right]"
+                onclick="setNotifyPos(cell)"
+              >
+                @[cell.label]
+              </button>
+            <!-- /each -->
+          </position-grid>
+        </demo-section>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-global-components] demo-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 35), 1fr));
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-global-components] demo-tile {
+        border: 1px solid var(--scrim-2);
+        border-radius: var(--radius);
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        cursor: default;
+        transition:
+          background 150ms,
+          border-color 150ms;
+      }
+
+      page[_internal-global-components] demo-tile:hover {
+        background: oklch(from var(--background) calc(l + 0.04) c h);
+        border-color: var(--scrim-3);
+      }
+
+      page[_internal-global-components] position-grid {
+        display: grid;
+        grid-template-columns: repeat(3, calc(var(--unit) * 10));
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-global-components] [position-cell] {
+        aspect-ratio: 1;
+        font-size: calc(var(--unit) * 4);
+        padding: 0;
+      }
+
+      page[_internal-global-components] [position-cell][active] {
+        background: var(--primary);
+        color: var(--primary-foreground);
+        border-color: var(--primary);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/icons.html b/pages/_internal/icons.html
new file mode 100644
index 00000000..acfb84a3
--- /dev/null
+++ b/pages/_internal/icons.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Icons · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      const collectIconNames = async () => {
+        const css = await fetch('/css/Iconice.css').then((r) => r.text());
+        const names = new Set();
+        for (const [, name] of css.matchAll(/(?:^|[^\w-])icon\[([a-zA-Z][\w-]*)\]/g))
+          names.add(name);
+        return [...names].sort((a, b) => a.localeCompare(b));
+      };
+
+      $.icons = await collectIconNames();
+      $.iconSearch = '';
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <icons-toolbar>
+          <input
+            type="search"
+            placeholder="Filter icons…"
+            value="@[iconSearch]"
+            oninput="$.iconSearch = this.value"
+            icons-search
+          />
+          <icons-meta>
+            @[icons.filter(n => n.toLowerCase().includes(iconSearch.toLowerCase())).length] /
+            @[icons.length] icons
+          </icons-meta>
+        </icons-toolbar>
+        <icons-grid>
+          <!-- each icons.filter(n => n.toLowerCase().includes(iconSearch.toLowerCase())) as name -->
+            <icon-tile>
+              <icon-frame>
+                <icon @[name]></icon>
+              </icon-frame>
+              <code>@[name]</code>
+            </icon-tile>
+          <!-- /each -->
+        </icons-grid>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-icons] page-content {
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-icons] icons-toolbar {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-icons] [icons-search] {
+        flex: 1;
+        min-width: 0;
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+        font-size: calc(var(--unit) * 4);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+        background: oklch(from var(--foreground) 0.96 0 0);
+      }
+
+      page[_internal-icons] icons-meta {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        white-space: nowrap;
+      }
+
+      page[_internal-icons] icons-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 32), 1fr));
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-icons] icon-tile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 2);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+        background: oklch(from var(--foreground) 0.96 0 0);
+      }
+
+      page[_internal-icons] icon-frame {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--unit) * 12);
+        height: calc(var(--unit) * 12);
+        font-size: calc(var(--unit) * 10);
+        color: var(--foreground);
+      }
+
+      page[_internal-icons] icon-tile code {
+        font-size: calc(var(--unit) * 3);
+        word-break: break-all;
+        text-align: center;
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/imagegen.html b/pages/_internal/imagegen.html
new file mode 100644
index 00000000..3290a529
--- /dev/null
+++ b/pages/_internal/imagegen.html
@@ -0,0 +1,768 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Imagegen · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      // The house style — kept verbatim at the head of every prompt so generated
+      // art matches the game. Lifted from the character SPRITE_INSTRUCTION but
+      // stripped of the sprite-only framing (single figure, pose, magenta
+      // backdrop) so it applies to any subject: fighters, beasts, gear, scenery.
+      // The game has two chapters that share one art style but a different world
+      // and palette — the arena (levels 1–15) and the wild (levels 15–25).
+      const styleCore = (palette) => [
+        `Art style: hand-drawn, sketch-looking fantasy illustration — soft loose brushwork, ${palette}, subtle dark outlines, soft even lighting, no hard reflections, no strong directional shadows. Deliberately unfinished: it should feel about 85% done — confident, loose and human, like a painted study rather than a polished render.`,
+        'Whatever the subject — a fighter, a beast, a creature, a backdrop — render it in this one consistent style. No text, no watermark, no UI, no logos, no frame.',
+      ];
+
+      const STYLE_ARENA = [
+        'Battleborn Brawlers — a fantasy auto-battler. The arena chapter (levels 1–15): a sun-bleached gladiatorial arena of old stone, sand and aged parchment, where ragtag races and beasts brawl for coin and survival.',
+        ...styleCore(
+          'a muted earthy palette of warm stone, parchment and desaturated elemental hues (dusty reds, frost blues, mossy greens, soft golds)',
+        ),
+      ].join('\n\n');
+
+      const STYLE_THE_WILD = [
+        'Battleborn Brawlers — a fantasy auto-battler. The wild chapter (levels 15–25): vast, explorable wildlands beyond the arena — lush, colorful and alive, teeming with mythical creatures and wonders across far-reaching lands.',
+        ...styleCore(
+          'a rich, vibrant palette of verdant greens, deep skies, golden light and luminous elemental hues',
+        ),
+      ].join('\n\n');
+
+      window.imagegenSetTheWild = (on) => {
+        $.imagegenTheWild = on;
+        $.imagegenStyle = on ? STYLE_THE_WILD : STYLE_ARENA;
+      };
+
+      const refreshTmp = async () =>
+        ($.imagegenTmp = await (await fetch('/__imagegen/general')).json());
+      const refreshKept = async () =>
+        ($.imagegenKept = await (await fetch('/__imagegen/general/kept')).json());
+      const refreshProject = async () =>
+        ($.imagegenProject = await (await fetch('/__imagegen/general/project')).json());
+
+      // gemini-2.5-flash-image only composes a fixed set of aspect ratios at ~1MP,
+      // so the user picks a ratio directly. We always render it large (~4K long
+      // side) — the model's native output is small, and we'd rather upscale here
+      // than stage tiny images that can't be sized up later.
+      const ASPECT_TARGET_LONG_SIDE = 4096;
+      const aspectDims = (ratio) => {
+        const [a, b] = ratio.split(':').map(Number);
+        return a >= b
+          ? [ASPECT_TARGET_LONG_SIDE, Math.round((ASPECT_TARGET_LONG_SIDE * b) / a)]
+          : [Math.round((ASPECT_TARGET_LONG_SIDE * a) / b), ASPECT_TARGET_LONG_SIDE];
+      };
+
+      window.imagegenToggleRef = (path) =>
+        ($.imagegenRefs = $.imagegenRefs.includes(path)
+          ? $.imagegenRefs.filter((p) => p !== path)
+          : [...$.imagegenRefs, path]);
+
+      window.imagegenDrop = async (event) => {
+        event.preventDefault();
+        const file = event.dataTransfer.files[0];
+        if (!file) return;
+        const data = await new Promise((done) => {
+          const reader = new FileReader();
+          reader.onload = () => done(reader.result);
+          reader.readAsDataURL(file);
+        });
+        const result = await (
+          await fetch('/__imagegen/general/drop', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ data }),
+          })
+        ).json();
+        if (result.error) return notify.error(result.error);
+        $.imagegenRefs = [...$.imagegenRefs, result.path];
+        refreshTmp();
+      };
+
+      window.imagegenGenerate = async () => {
+        const subject = $.imagegenExtra.trim();
+        if (!subject) return notify.warning('Describe the image in the Extra content field first');
+        const instruction = `${$.imagegenStyle}\n\n${subject}`;
+        $.imagegenGenerating = true;
+        try {
+          const result = await (
+            await fetch('/__imagegen/general/generate', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                instruction,
+                count: $.imagegenCount,
+                references: $.imagegenRefs,
+                aspectRatio: $.imagegenAspect,
+              }),
+            })
+          ).json();
+          if (result.error) notify.error(result.error);
+          if (result.errors?.length) notify.warning(result.errors.join('\n'));
+          if (result.saved?.length) notify.success(`${result.saved.length} image(s) generated`);
+        } catch (error) {
+          notify.error(error.message);
+        }
+        $.imagegenGenerating = false;
+        refreshTmp();
+      };
+
+      window.imagegenKeep = async (file) => {
+        const result = await (
+          await fetch('/__imagegen/general/keep', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ file }),
+          })
+        ).json();
+        if (result.error) return notify.error(result.error);
+        notify.success(`Kept as ${result.kept}`);
+        $.imagegenRefs = $.imagegenRefs.filter((p) => p !== `/tmp/imagegen/${file}`);
+        refreshTmp();
+        refreshKept();
+      };
+
+      window.imagegenDiscard = async (file) => {
+        const result = await (
+          await fetch('/__imagegen/general/discard', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ file }),
+          })
+        ).json();
+        if (result.error) return notify.error(result.error);
+        $.imagegenRefs = $.imagegenRefs.filter((p) => p !== `/tmp/imagegen/${file}`);
+        refreshTmp();
+      };
+
+      window.imagegenRemove = async (file) => {
+        const result = await (
+          await fetch('/__imagegen/general/remove', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ file }),
+          })
+        ).json();
+        if (result.error) return notify.error(result.error);
+        $.imagegenRefs = $.imagegenRefs.filter((p) => p !== `static/images/generated/${file}`);
+        refreshKept();
+      };
+
+      let copiedTimer;
+      window.imagegenCopy = (event, file) => {
+        event.stopPropagation();
+        // execCommand instead of navigator.clipboard: the async clipboard's
+        // clipboard-write permission is denied inside embedded webviews (e.g.
+        // the Claude Preview pane), while the selection-based copy only needs
+        // the click's user activation.
+        const scratch = document.createElement('textarea');
+        scratch.value = [
+          `Use the image \`static/images/generated/${file}\` in the game:`,
+          '',
+          '- Move it into the correct folder for its purpose (the file name may change).',
+          '- Name the file by the convention `<name>-<width>x<height>.<extension>` (pixel dimensions), e.g. `combat-bg-4096x3340.png`.',
+          '- Wire it up where it belongs (component markup, CSS, or asset reference).',
+          '- Before implementing, ask me where and how it should be used.',
+        ].join('\n');
+        scratch.style.position = 'fixed';
+        scratch.style.opacity = '0';
+        document.body.append(scratch);
+        scratch.select();
+        document.execCommand('copy');
+        scratch.remove();
+        $.imagegenCopied = file;
+        clearTimeout(copiedTimer);
+        copiedTimer = setTimeout(() => ($.imagegenCopied = ''), 1500);
+      };
+
+      window.imagegenPreviewImage = (url) => ($.imagegenPreview = url);
+      window.imagegenClosePreview = () => ($.imagegenPreview = '');
+      // Capture phase + stopPropagation: while the lightbox is open, Escape closes
+      // it and must not reach the global handler (boot.js), which would otherwise
+      // open the game menu since the lightbox isn't tracked in $.overlay.
+      document.addEventListener(
+        'keydown',
+        (event) => {
+          if (event.key === 'Escape' && $.imagegenPreview) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            imagegenClosePreview();
+          }
+        },
+        true,
+      );
+
+      $.imagegenTheWild = false;
+      $.imagegenStyle = STYLE_ARENA;
+      $.imagegenPreview = '';
+      $.imagegenExtra = '';
+      $.imagegenCount = 3;
+      $.imagegenAspect = '16:9';
+      $.imagegenAspects = [
+        ['16:9', 'widescreen'],
+        ['21:9', 'ultrawide'],
+        ['3:2', 'landscape'],
+        ['4:3', 'landscape'],
+        ['5:4', 'landscape'],
+        ['1:1', 'square'],
+        ['4:5', 'portrait'],
+        ['3:4', 'portrait'],
+        ['2:3', 'portrait'],
+        ['9:16', 'tall'],
+      ].map(([ratio, kind]) => {
+        const [w, h] = aspectDims(ratio);
+        return { ratio, label: `${ratio} — ${kind} (${w} × ${h})` };
+      });
+      $.imagegenGenerating = false;
+      $.imagegenRefs = [];
+      $.imagegenCopied = '';
+      $.imagegenTmp = [];
+      $.imagegenKept = [];
+      $.imagegenProject = [];
+      refreshTmp();
+      refreshKept();
+      refreshProject();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <imagegen-layout>
+          <imagegen-controls>
+            <imagegen-field>
+              <imagegen-head>
+                <imagegen-label>Prompt — sent verbatim to the image model</imagegen-label>
+                <label imagegen-toggle>
+                  <input
+                    type="checkbox"
+                    role="switch"
+                    onchange="imagegenSetTheWild(this.checked)"
+                  />
+                  Level 15+
+                </label>
+              </imagegen-head>
+              <imagegen-dump
+                >@[imagegenStyle + (imagegenExtra.trim() ? '\n\n' + imagegenExtra.trim() : '') +
+                (imagegenRefs.length ? '\n\n— ' + imagegenRefs.length + ' reference image(s)
+                attached —' : '')]</imagegen-dump
+              >
+            </imagegen-field>
+
+            <imagegen-field>
+              <imagegen-label>Extra content — the image to generate</imagegen-label>
+              <textarea
+                rows="6"
+                placeholder="Describe the subject — what it is, its pose or setting, mood, key details…"
+                oninput="$.imagegenExtra = this.value"
+              >
+@[imagegenExtra]</textarea
+              >
+            </imagegen-field>
+
+            <imagegen-field>
+              <imagegen-label>Aspect ratio — always rendered at ~4K</imagegen-label>
+              <label>
+                <select aspect-select onchange="$.imagegenAspect = this.value">
+                  <!-- each imagegenAspects as a (a.ratio) -->
+                    <option value="@[a.ratio]" selected="@[imagegenAspect === a.ratio]">
+                      @[a.label]
+                    </option>
+                  <!-- /each -->
+                </select>
+              </label>
+            </imagegen-field>
+
+            <imagegen-field>
+              <imagegen-label>Reference image — drop to attach</imagegen-label>
+              <imagegen-drop ondragover="event.preventDefault()" ondrop="imagegenDrop(event)">
+                <span>Drop an image here to use it as a reference</span>
+              </imagegen-drop>
+            </imagegen-field>
+
+            <imagegen-footer>
+              <crow left g="2">
+                <imagegen-label>Parallel</imagegen-label>
+                <input
+                  type="number"
+                  min="1"
+                  max="10"
+                  count-input
+                  value="@[String(imagegenCount)]"
+                  oninput="$.imagegenCount = this.value"
+                />
+              </crow>
+              <button primary onclick="imagegenGenerate()" disabled="@[imagegenGenerating]">
+                @[imagegenGenerating ? 'Generating…' : 'Generate']
+              </button>
+            </imagegen-footer>
+          </imagegen-controls>
+
+          <imagegen-lists>
+            <imagegen-section>
+              <imagegen-head>
+                <imagegen-label>Recent — generated this session (in /tmp)</imagegen-label>
+                <imagegen-count>@[imagegenTmp.length]</imagegen-count>
+              </imagegen-head>
+              <!-- if imagegenTmp.length -->
+                <imagegen-grid>
+                  <!-- each imagegenTmp as item (item.file) -->
+                    <imagegen-tile
+                      data-file="@[item.file]"
+                      picked="@[imagegenRefs.includes(item.path)]"
+                      onclick="imagegenToggleRef(item.path)"
+                      onmouseenter="
+                        showTooltip({ description: item.file, plain: true }, this, {
+                          direction: 'up',
+                          lock: true,
+                        })
+                      "
+                    >
+                      <img data-src="@[item.url]" alt="@[item.file]" />
+                      <imagegen-actions>
+                        <imagegen-zoom
+                          title="Preview fullscreen"
+                          onclick="
+                            event.stopPropagation();
+                            imagegenPreviewImage(item.url);
+                          "
+                        >
+                          <icon eye></icon>
+                        </imagegen-zoom>
+                        <button
+                          primary
+                          sm
+                          onclick="
+                            event.stopPropagation();
+                            imagegenKeep(item.file);
+                          "
+                        >
+                          Keep
+                        </button>
+                        <component
+                          src="/components/buttons/Cross.html"
+                          label="Discard"
+                          onclick="
+                            event.stopPropagation();
+                            imagegenDiscard(event.target.closest('imagegen-tile').dataset.file);
+                          "
+                        ></component>
+                      </imagegen-actions>
+                    </imagegen-tile>
+                  <!-- /each -->
+                </imagegen-grid>
+              <!-- else -->
+                <imagegen-empty>No images yet — write a prompt and press Generate.</imagegen-empty>
+              <!-- /if -->
+            </imagegen-section>
+
+            <imagegen-section>
+              <imagegen-head>
+                <imagegen-label>Kept but unused</imagegen-label>
+                <imagegen-count>@[imagegenKept.length]</imagegen-count>
+              </imagegen-head>
+              <!-- if imagegenKept.length -->
+                <imagegen-grid>
+                  <!-- each imagegenKept as item (item.file) -->
+                    <imagegen-tile
+                      data-file="@[item.file]"
+                      picked="@[imagegenRefs.includes(item.path)]"
+                      onclick="imagegenToggleRef(item.path)"
+                      onmouseenter="
+                        showTooltip({ description: item.file, plain: true }, this, {
+                          direction: 'up',
+                          lock: true,
+                        })
+                      "
+                    >
+                      <img data-src="@[item.url]" alt="@[item.file]" />
+                      <imagegen-actions>
+                        <imagegen-zoom
+                          title="Preview fullscreen"
+                          onclick="
+                            event.stopPropagation();
+                            imagegenPreviewImage(item.url);
+                          "
+                        >
+                          <icon eye></icon>
+                        </imagegen-zoom>
+                        <component
+                          src="/components/buttons/Cross.html"
+                          label="Remove from project"
+                          onclick="
+                            event.stopPropagation();
+                            imagegenRemove(event.target.closest('imagegen-tile').dataset.file);
+                          "
+                        ></component>
+                        <imagegen-ai
+                          title="Copy AI implementation prompt"
+                          copied="@[imagegenCopied === item.file]"
+                          onclick="imagegenCopy(event, item.file)"
+                        >
+                          <icon quill></icon>
+                          <icon checkmark></icon>
+                        </imagegen-ai>
+                      </imagegen-actions>
+                    </imagegen-tile>
+                  <!-- /each -->
+                </imagegen-grid>
+              <!-- else -->
+                <imagegen-empty>Nothing kept yet — generate above, then press Keep.</imagegen-empty>
+              <!-- /if -->
+            </imagegen-section>
+
+            <imagegen-section>
+              <imagegen-head>
+                <imagegen-label>Project images — static/images/bg/</imagegen-label>
+                <imagegen-count>@[imagegenProject.length]</imagegen-count>
+              </imagegen-head>
+              <!-- if imagegenProject.length -->
+                <imagegen-grid>
+                  <!-- each imagegenProject as item (item.file) -->
+                    <imagegen-tile
+                      data-file="@[item.file]"
+                      picked="@[imagegenRefs.includes(item.path)]"
+                      onclick="imagegenToggleRef(item.path)"
+                      onmouseenter="
+                        showTooltip({ description: item.file, plain: true }, this, {
+                          direction: 'up',
+                          lock: true,
+                        })
+                      "
+                    >
+                      <img data-src="@[item.url]" alt="@[item.file]" />
+                      <imagegen-actions>
+                        <imagegen-zoom
+                          title="Preview fullscreen"
+                          onclick="
+                            event.stopPropagation();
+                            imagegenPreviewImage(item.url);
+                          "
+                        >
+                          <icon eye></icon>
+                        </imagegen-zoom>
+                      </imagegen-actions>
+                    </imagegen-tile>
+                  <!-- /each -->
+                </imagegen-grid>
+              <!-- else -->
+                <imagegen-empty>No images directly in static/images/.</imagegen-empty>
+              <!-- /if -->
+            </imagegen-section>
+          </imagegen-lists>
+        </imagegen-layout>
+
+        <modal-root imagegen-lightbox open="@[imagegenPreview]" onclick="imagegenClosePreview()">
+          <!-- if imagegenPreview -->
+            <img src="@[imagegenPreview]" alt="preview" onclick="event.stopPropagation()" />
+          <!-- /if -->
+        </modal-root>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-imagegen] page-content {
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-imagegen] imagegen-layout {
+        display: grid;
+        grid-template-columns: 2fr 3fr;
+        gap: calc(var(--unit) * 5);
+        align-items: start;
+      }
+
+      page[_internal-imagegen] imagegen-controls,
+      page[_internal-imagegen] imagegen-lists,
+      page[_internal-imagegen] imagegen-section,
+      page[_internal-imagegen] imagegen-field {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-imagegen] imagegen-lists,
+      page[_internal-imagegen] imagegen-controls {
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-imagegen] imagegen-label {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+      }
+
+      page[_internal-imagegen] [imagegen-toggle] {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1.5);
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        cursor: pointer;
+      }
+
+      page[_internal-imagegen] [imagegen-toggle] input {
+        margin: 0;
+      }
+
+      page[_internal-imagegen] imagegen-dump {
+        display: block;
+        min-height: calc(var(--unit) * 30);
+        max-height: calc(var(--unit) * 50);
+        padding: calc(var(--unit) * 3);
+        overflow: auto;
+        font-family: monospace;
+        font-size: calc(var(--unit) * 2.75);
+        white-space: pre-wrap;
+        background: oklch(from var(--background) calc(l - 0.03) c h);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      page[_internal-imagegen] textarea,
+      page[_internal-imagegen] [aspect-select],
+      page[_internal-imagegen] [count-input] {
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 2.5);
+        font-size: calc(var(--unit) * 3.25);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+        background: oklch(from var(--foreground) 0.96 0 0);
+      }
+
+      page[_internal-imagegen] textarea {
+        width: 100%;
+        resize: vertical;
+      }
+
+      page[_internal-imagegen] imagegen-drop {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        min-height: calc(var(--unit) * 16);
+        padding: calc(var(--unit) * 3);
+        font-size: calc(var(--unit) * 3);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        background: oklch(from var(--background) calc(l - 0.02) c h);
+        border: 2px dashed oklch(from var(--foreground) l c h / 0.25);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      page[_internal-imagegen] imagegen-drop:hover {
+        border-color: oklch(from var(--primary) l c h / 0.5);
+      }
+
+      page[_internal-imagegen] imagegen-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-imagegen] [count-input] {
+        width: calc(var(--unit) * 18);
+      }
+
+      page[_internal-imagegen] imagegen-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-imagegen] imagegen-count {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+      }
+
+      page[_internal-imagegen] imagegen-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 30), 1fr));
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[_internal-imagegen] imagegen-tile {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        aspect-ratio: 1;
+        overflow: hidden;
+        cursor: pointer;
+        background: oklch(from var(--background) calc(l - 0.02) c h);
+        border: 2px solid transparent;
+        border-radius: calc(var(--unit) * 1);
+        transition: border-color 120ms;
+      }
+
+      page[_internal-imagegen] imagegen-tile:hover {
+        border-color: oklch(from var(--primary) l c h / 0.5);
+      }
+
+      page[_internal-imagegen] imagegen-tile[picked] {
+        border-color: var(--primary);
+      }
+
+      page[_internal-imagegen] imagegen-tile[picked]::after {
+        content: 'ref';
+        position: absolute;
+        top: var(--unit);
+        left: var(--unit);
+        padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 2.25);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--background);
+        background: oklch(from var(--primary) l c h / 0.9);
+        border-radius: calc(var(--unit) * 0.5);
+      }
+
+      page[_internal-imagegen] imagegen-tile img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      page[_internal-imagegen] imagegen-actions {
+        position: absolute;
+        top: var(--unit);
+        right: var(--unit);
+        display: flex;
+        align-items: center;
+        gap: var(--unit);
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+
+      page[_internal-imagegen] imagegen-tile:hover imagegen-actions,
+      page[_internal-imagegen] imagegen-tile[picked] imagegen-actions {
+        opacity: 1;
+      }
+
+      page[_internal-imagegen] imagegen-actions [cross-button],
+      page[_internal-imagegen] imagegen-actions button[primary],
+      page[_internal-imagegen] imagegen-ai,
+      page[_internal-imagegen] imagegen-zoom {
+        height: calc(var(--unit) * 6);
+        box-shadow: 0 calc(var(--unit) * 0.5) calc(var(--unit) * 1.5) var(--scrim-2);
+      }
+
+      page[_internal-imagegen] imagegen-actions [cross-button] {
+        width: calc(var(--unit) * 6);
+        font-size: calc(var(--unit) * 3);
+        color: var(--primary-foreground);
+        background-color: var(--destructive);
+      }
+
+      page[_internal-imagegen] imagegen-actions [cross-button]:not(:disabled):hover {
+        background-color: oklch(from var(--destructive) calc(l - 0.06) c h);
+      }
+
+      page[_internal-imagegen] imagegen-actions button[primary] {
+        padding: 0 calc(var(--unit) * 2);
+        font-size: calc(var(--unit) * 2.75);
+        background-color: var(--primary);
+        color: var(--primary-foreground);
+      }
+
+      page[_internal-imagegen] icon[eye] {
+        --icon: var(--icon-eye);
+      }
+
+      page[_internal-imagegen] icon[quill] {
+        --icon: var(--icon-quill);
+      }
+
+      page[_internal-imagegen] imagegen-ai,
+      page[_internal-imagegen] imagegen-zoom {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--unit) * 6);
+        font-size: calc(var(--unit) * 3.5);
+        cursor: pointer;
+        color: var(--foreground);
+        background: var(--background);
+        border-radius: var(--radius);
+      }
+
+      page[_internal-imagegen] imagegen-ai:hover,
+      page[_internal-imagegen] imagegen-zoom:hover {
+        background: oklch(from var(--background) calc(l - 0.05) c h);
+      }
+
+      page[_internal-imagegen] imagegen-ai icon[checkmark] {
+        display: none;
+      }
+
+      page[_internal-imagegen] modal-root[imagegen-lightbox] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: calc(var(--unit) * 6);
+        cursor: zoom-out;
+      }
+
+      page[_internal-imagegen] modal-root[imagegen-lightbox] img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        border-radius: calc(var(--unit) * 1);
+        box-shadow: 0 calc(var(--unit) * 4) calc(var(--unit) * 12) var(--scrim-3);
+        cursor: default;
+      }
+
+      page[_internal-imagegen] imagegen-ai[copied] {
+        color: var(--hue-green);
+      }
+
+      page[_internal-imagegen] imagegen-ai[copied] icon[quill] {
+        display: none;
+      }
+
+      page[_internal-imagegen] imagegen-ai[copied] icon[checkmark] {
+        display: inline-block;
+      }
+
+      page[_internal-imagegen] imagegen-empty {
+        padding: calc(var(--unit) * 4);
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        text-align: center;
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        background: oklch(from var(--background) calc(l - 0.02) c h);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      @media (width > 768px) {
+        page[_internal-imagegen] imagegen-controls {
+          position: sticky;
+          top: calc(var(--unit) * 3);
+        }
+      }
+
+      @media (width <= 768px) {
+        page[_internal-imagegen] imagegen-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/inventory.html b/pages/_internal/inventory.html
new file mode 100644
index 00000000..d750f7b8
--- /dev/null
+++ b/pages/_internal/inventory.html
@@ -0,0 +1,849 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Soul Index · Design Reference</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <doc-header>
+          <h1>Soul Index — Design Reference</h1>
+          <p>
+            The chosen direction for the equipment drawer: a category rail, a scrollable item list,
+            and a detail pane. This page is the source of truth while we refactor
+            <code>InventoryDrawer</code> — palette and components first, full presentations below.
+            Throwaway; delete once the refactor lands.
+          </p>
+        </doc-header>
+
+        <doc-section>
+          <doc-h2><doc-step>01</doc-step>Palette</doc-h2>
+          <doc-lead>
+            Every surface and accent is one token, defined twice — once per mode. The structural CSS
+            only ever reads <code>var(--c-*)</code>, so swapping the mode swaps the whole skin.
+          </doc-lead>
+
+          <pal-table>
+            <pal-headrow> <pal-h>Token</pal-h><pal-h>Dark</pal-h><pal-h>Light</pal-h> </pal-headrow>
+
+            <pal-group>Surfaces</pal-group>
+            <pal-row>
+              <pal-token>--c-stage<em>backdrop the panel rests on</em></pal-token>
+              <pal-swatch
+                ><i
+                  style="
+                    background: radial-gradient(
+                      120% 120% at 50% 0%,
+                      oklch(0.26 0.02 60),
+                      oklch(0.15 0.015 60)
+                    );
+                  "
+                ></i
+                ><code>radial · 0.26→0.15</code></pal-swatch
+              >
+              <pal-swatch
+                ><i
+                  style="
+                    background: radial-gradient(
+                      120% 120% at 50% 0%,
+                      oklch(0.94 0.022 85),
+                      oklch(0.87 0.03 80)
+                    );
+                  "
+                ></i
+                ><code>radial · 0.94→0.87</code></pal-swatch
+              >
+            </pal-row>
+            <pal-row>
+              <pal-token>--c-panel<em>drawer / list body</em></pal-token>
+              <pal-swatch
+                ><i style="background: oklch(0.185 0.013 65)"></i
+                ><code>oklch(0.185 0.013 65)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: oklch(0.975 0.016 85)"></i
+                ><code>oklch(0.975 0.016 85)</code></pal-swatch
+              >
+            </pal-row>
+            <pal-row>
+              <pal-token>--c-inset<em>detail pane / wells</em></pal-token>
+              <pal-swatch
+                ><i style="background: oklch(0.13 0.011 60)"></i
+                ><code>oklch(0.13 0.011 60)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: oklch(0.935 0.028 82)"></i
+                ><code>oklch(0.935 0.028 82)</code></pal-swatch
+              >
+            </pal-row>
+
+            <pal-group>Text</pal-group>
+            <pal-row>
+              <pal-token>--c-fg<em>primary text, values</em></pal-token>
+              <pal-swatch
+                ><i style="background: oklch(0.91 0.015 85)"></i
+                ><code>oklch(0.91 0.015 85)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: oklch(0.27 0.03 55)"></i
+                ><code>oklch(0.27 0.03 55)</code></pal-swatch
+              >
+            </pal-row>
+            <pal-row>
+              <pal-token>--c-muted<em>labels, sub text</em></pal-token>
+              <pal-swatch
+                ><i style="background: oklch(0.63 0.02 75)"></i
+                ><code>oklch(0.63 0.02 75)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: oklch(0.5 0.035 60)"></i
+                ><code>oklch(0.5 0.035 60)</code></pal-swatch
+              >
+            </pal-row>
+
+            <pal-group>Structure</pal-group>
+            <pal-row>
+              <pal-token>--c-line<em>dividers, hairlines (alpha)</em></pal-token>
+              <pal-swatch
+                ><i style="background: oklch(0.8 0.05 85 / 0.13)"></i
+                ><code>oklch(0.8 0.05 85 / .13)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: oklch(0.42 0.05 55 / 0.22)"></i
+                ><code>oklch(0.42 0.05 55 / .22)</code></pal-swatch
+              >
+            </pal-row>
+            <pal-row>
+              <pal-token>--c-accent<em>selection, active, highlights</em></pal-token>
+              <pal-swatch
+                ><i style="background: var(--gold-warm)"></i
+                ><code>var(--gold-warm)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: var(--gold-deep)"></i
+                ><code>var(--gold-deep)</code></pal-swatch
+              >
+            </pal-row>
+            <pal-row>
+              <pal-token>--c-shadow<em>drop shadows (alpha)</em></pal-token>
+              <pal-swatch
+                ><i style="background: oklch(0 0 0 / 0.55)"></i
+                ><code>oklch(0 0 0 / .55)</code></pal-swatch
+              >
+              <pal-swatch
+                ><i style="background: oklch(0.45 0.05 50 / 0.18)"></i
+                ><code>oklch(0.45 0.05 50 / .18)</code></pal-swatch
+              >
+            </pal-row>
+          </pal-table>
+        </doc-section>
+
+        <doc-section>
+          <doc-h2><doc-step>02</doc-step>Components</doc-h2>
+          <doc-lead>
+            The building blocks, each shown in both modes. These map onto the real drawer during the
+            refactor — see the note under each.
+          </doc-lead>
+
+          <comp-grid>
+            <comp-card>
+              <comp-head><comp-name>Category chip</comp-name><code>s-cat</code></comp-head>
+              <comp-demos>
+                <demo dark
+                  ><s-rail><s-cat active>⚔️</s-cat><s-cat>🛡️</s-cat><s-cat>🧪</s-cat></s-rail></demo
+                >
+                <demo light
+                  ><s-rail><s-cat active>⚔️</s-cat><s-cat>🛡️</s-cat><s-cat>🧪</s-cat></s-rail></demo
+                >
+              </comp-demos>
+              <comp-note
+                >Idle chips desaturate + dim; <code>[active]</code> gets the accent ring and a soft
+                accent tint.</comp-note
+              >
+            </comp-card>
+
+            <comp-card>
+              <comp-head><comp-name>List row</comp-name><code>s-item</code></comp-head>
+              <comp-demos>
+                <demo dark
+                  ><s-list
+                    ><s-item selected><s-ico>⚔️</s-ico>Iron Greatsword<s-meta>+3</s-meta></s-item
+                    ><s-item><s-ico>🗡️</s-ico>Curved Sword</s-item></s-list
+                  ></demo
+                >
+                <demo light
+                  ><s-list
+                    ><s-item selected><s-ico>⚔️</s-ico>Iron Greatsword<s-meta>+3</s-meta></s-item
+                    ><s-item><s-ico>🗡️</s-ico>Curved Sword</s-item></s-list
+                  ></demo
+                >
+              </comp-demos>
+              <comp-note
+                >Icon + name + optional <code>s-meta</code> badge. <code>[selected]</code> = accent
+                left-bar + fading tint. Maps to <code>inventory-row</code>.</comp-note
+              >
+            </comp-card>
+
+            <comp-card>
+              <comp-head
+                ><comp-name>Detail header</comp-name
+                ><code>s-detail · s-name · s-sub</code></comp-head
+              >
+              <comp-demos>
+                <demo dark
+                  ><s-detail
+                    ><s-ico big>⚔️</s-ico><s-name>Iron Greatsword</s-name
+                    ><s-sub>Colossal · Wgt 9.5</s-sub></s-detail
+                  ></demo
+                >
+                <demo light
+                  ><s-detail
+                    ><s-ico big>⚔️</s-ico><s-name>Iron Greatsword</s-name
+                    ><s-sub>Colossal · Wgt 9.5</s-sub></s-detail
+                  ></demo
+                >
+              </comp-demos>
+              <comp-note
+                >Large item glyph on the <code>--c-inset</code> well, heading name, muted
+                subtitle.</comp-note
+              >
+            </comp-card>
+
+            <comp-card>
+              <comp-head><comp-name>Stat row</comp-name><code>s-stat · s-k · s-v</code></comp-head>
+              <comp-demos>
+                <demo dark
+                  ><s-stats
+                    ><s-stat><s-k>Phys</s-k><s-v>148</s-v></s-stat
+                    ><s-stat><s-k>Crit</s-k><s-v>100</s-v></s-stat
+                    ><s-stat><s-k>Str</s-k><s-v>16</s-v></s-stat
+                    ><s-stat><s-k>Dex</s-k><s-v>10</s-v></s-stat></s-stats
+                  ></demo
+                >
+                <demo light
+                  ><s-stats
+                    ><s-stat><s-k>Phys</s-k><s-v>148</s-v></s-stat
+                    ><s-stat><s-k>Crit</s-k><s-v>100</s-v></s-stat
+                    ><s-stat><s-k>Str</s-k><s-v>16</s-v></s-stat
+                    ><s-stat><s-k>Dex</s-k><s-v>10</s-v></s-stat></s-stats
+                  ></demo
+                >
+              </comp-demos>
+              <comp-note
+                >Two-column key/value grid, hairline-separated. Muted key, bold
+                <code>--c-fg</code> value.</comp-note
+              >
+            </comp-card>
+
+            <comp-card>
+              <comp-head><comp-name>Header bar</comp-name><code>s-head · s-count</code></comp-head>
+              <comp-demos>
+                <demo dark
+                  ><s-head
+                    ><s-head-title>MY EQUIPMENT</s-head-title><s-count>12</s-count></s-head
+                  ></demo
+                >
+                <demo light
+                  ><s-head
+                    ><s-head-title>MY EQUIPMENT</s-head-title><s-count>12</s-count></s-head
+                  ></demo
+                >
+              </comp-demos>
+              <comp-note
+                >Heading-font title + accent count pill. Replaces the bronze plate in the live
+                drawer.</comp-note
+              >
+            </comp-card>
+          </comp-grid>
+
+          <comp-map>
+            <comp-map-title>Refactor mapping</comp-map-title>
+            <comp-map-row
+              ><code>s-drawer</code> → the <code>[inventory-drawer]</code> sticky</comp-map-row
+            >
+            <comp-map-row><code>s-head</code> → <code>[inventory-head]</code></comp-map-row>
+            <comp-map-row
+              ><code>s-list / s-item</code> →
+              <code>[inventory-list] / [inventory-row]</code></comp-map-row
+            >
+            <comp-map-row
+              ><code>s-detail</code> → new selected-item pane (replaces inline
+              equip/sell)</comp-map-row
+            >
+          </comp-map>
+        </doc-section>
+
+        <doc-section>
+          <doc-h2><doc-step>03</doc-step>Full presentation</doc-h2>
+          <doc-toggle>
+            <label>
+              <input type="checkbox" />
+              <toggle-track><toggle-thumb></toggle-thumb></toggle-track>
+              <toggle-text>Table rows — even/odd shading</toggle-text>
+            </label>
+          </doc-toggle>
+          <doc-lead>The whole thing assembled, full width, in each mode.</doc-lead>
+
+          <full-stage dark>
+            <full-tag>DARK</full-tag>
+            <s-drawer>
+              <s-head><s-head-title>MY EQUIPMENT</s-head-title><s-count>6</s-count></s-head>
+              <s-rail
+                ><s-cat active>⚔️</s-cat><s-cat>🛡️</s-cat><s-cat>🏹</s-cat><s-cat>🧪</s-cat
+                ><s-cat>📜</s-cat></s-rail
+              >
+              <s-list>
+                <s-item selected><s-ico>⚔️</s-ico>Iron Greatsword<s-meta>+3</s-meta></s-item>
+                <s-item><s-ico>🗡️</s-ico>Bandit's Curved Sword</s-item>
+                <s-item><s-ico>🪓</s-ico>Battle Axe<s-meta>+1</s-meta></s-item>
+                <s-item><s-ico>🔨</s-ico>War Maul</s-item>
+                <s-item><s-ico>🏹</s-ico>Shortbow</s-item>
+                <s-item><s-ico>🗡️</s-ico>Estoc</s-item>
+              </s-list>
+              <s-detail>
+                <s-ico big>⚔️</s-ico>
+                <s-name>Iron Greatsword</s-name>
+                <s-sub>Colossal Sword · Wgt 9.5</s-sub>
+                <s-stats>
+                  <s-stat><s-k>Phys</s-k><s-v>148</s-v></s-stat>
+                  <s-stat><s-k>Crit</s-k><s-v>100</s-v></s-stat>
+                  <s-stat><s-k>Str</s-k><s-v>16</s-v></s-stat>
+                  <s-stat><s-k>Dex</s-k><s-v>10</s-v></s-stat>
+                </s-stats>
+              </s-detail>
+            </s-drawer>
+          </full-stage>
+
+          <full-stage light>
+            <full-tag>LIGHT</full-tag>
+            <s-drawer>
+              <s-head><s-head-title>MY EQUIPMENT</s-head-title><s-count>6</s-count></s-head>
+              <s-rail
+                ><s-cat active>⚔️</s-cat><s-cat>🛡️</s-cat><s-cat>🏹</s-cat><s-cat>🧪</s-cat
+                ><s-cat>📜</s-cat></s-rail
+              >
+              <s-list>
+                <s-item selected><s-ico>⚔️</s-ico>Iron Greatsword<s-meta>+3</s-meta></s-item>
+                <s-item><s-ico>🗡️</s-ico>Bandit's Curved Sword</s-item>
+                <s-item><s-ico>🪓</s-ico>Battle Axe<s-meta>+1</s-meta></s-item>
+                <s-item><s-ico>🔨</s-ico>War Maul</s-item>
+                <s-item><s-ico>🏹</s-ico>Shortbow</s-item>
+                <s-item><s-ico>🗡️</s-ico>Estoc</s-item>
+              </s-list>
+              <s-detail>
+                <s-ico big>⚔️</s-ico>
+                <s-name>Iron Greatsword</s-name>
+                <s-sub>Colossal Sword · Wgt 9.5</s-sub>
+                <s-stats>
+                  <s-stat><s-k>Phys</s-k><s-v>148</s-v></s-stat>
+                  <s-stat><s-k>Crit</s-k><s-v>100</s-v></s-stat>
+                  <s-stat><s-k>Str</s-k><s-v>16</s-v></s-stat>
+                  <s-stat><s-k>Dex</s-k><s-v>10</s-v></s-stat>
+                </s-stats>
+              </s-detail>
+            </s-drawer>
+          </full-stage>
+        </doc-section>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-inventory] page-content {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 10);
+        padding: calc(var(--unit) * 6) calc(var(--unit) * 5) calc(var(--unit) * 16);
+      }
+
+      /* doc chrome --------------------------------------------------------- */
+      page[_internal-inventory] doc-header h1 {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 8);
+        color: var(--foreground);
+        margin: 0 0 calc(var(--unit) * 2);
+      }
+      page[_internal-inventory] doc-header p {
+        max-width: calc(var(--unit) * 200);
+        color: var(--muted-foreground);
+        font-size: calc(var(--unit) * 3.75);
+        line-height: 1.55;
+        margin: 0;
+      }
+      page[_internal-inventory] code {
+        font-family: ui-monospace, monospace;
+        font-size: 0.92em;
+        padding: 0 calc(var(--unit) * 0.75);
+        border-radius: calc(var(--unit) * 0.5);
+        background: oklch(from var(--foreground) l c h / 0.08);
+        color: var(--foreground);
+      }
+
+      page[_internal-inventory] doc-section {
+        display: block;
+      }
+      page[_internal-inventory] doc-h2 {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2.5);
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 5.5);
+        color: var(--foreground);
+        margin: 0 0 calc(var(--unit) * 1.5);
+        padding-bottom: calc(var(--unit) * 2);
+        border-bottom: 1px solid var(--border);
+      }
+      page[_internal-inventory] doc-step {
+        font-family: var(--font-display);
+        font-size: calc(var(--unit) * 5);
+        color: oklch(from var(--primary) l c h / 0.4);
+      }
+      page[_internal-inventory] doc-lead {
+        display: block;
+        max-width: calc(var(--unit) * 190);
+        margin-bottom: calc(var(--unit) * 5);
+        color: var(--muted-foreground);
+        font-size: calc(var(--unit) * 3.5);
+        line-height: 1.5;
+      }
+
+      page[_internal-inventory] doc-toggle {
+        display: block;
+        margin: calc(var(--unit) * -1) 0 calc(var(--unit) * 4);
+      }
+      page[_internal-inventory] doc-toggle label {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2.5);
+        cursor: pointer;
+        user-select: none;
+      }
+      page[_internal-inventory] doc-toggle input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+      page[_internal-inventory] toggle-track {
+        position: relative;
+        display: block;
+        flex: none;
+        width: calc(var(--unit) * 9);
+        height: calc(var(--unit) * 5);
+        border-radius: 9999px;
+        background: oklch(from var(--foreground) l c h / 0.18);
+        box-shadow: inset 0 0 0 1px var(--border);
+        transition: background 150ms ease;
+      }
+      page[_internal-inventory] toggle-thumb {
+        position: absolute;
+        top: calc(var(--unit) * 0.5);
+        left: calc(var(--unit) * 0.5);
+        width: calc(var(--unit) * 4);
+        height: calc(var(--unit) * 4);
+        border-radius: 50%;
+        background: var(--white);
+        box-shadow: 0 1px 2px var(--scrim-2);
+        transition: transform 150ms ease;
+      }
+      page[_internal-inventory] doc-toggle input:checked + toggle-track {
+        background: var(--primary);
+      }
+      page[_internal-inventory] doc-toggle input:checked + toggle-track toggle-thumb {
+        transform: translateX(calc(var(--unit) * 4));
+      }
+      page[_internal-inventory] toggle-text {
+        font-size: calc(var(--unit) * 3.5);
+        color: var(--foreground);
+      }
+
+      /* palette table ------------------------------------------------------ */
+      page[_internal-inventory] pal-table {
+        display: grid;
+        grid-template-columns: minmax(calc(var(--unit) * 50), 1fr) 1fr 1fr;
+        gap: 1px;
+        background: var(--border);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        overflow: hidden;
+      }
+      page[_internal-inventory] pal-headrow {
+        display: contents;
+      }
+      page[_internal-inventory] pal-h {
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+        background: var(--card);
+        font-size: calc(var(--unit) * 2.75);
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+      page[_internal-inventory] pal-group {
+        grid-column: 1 / -1;
+        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 3);
+        background: oklch(from var(--foreground) l c h / 0.04);
+        font-size: calc(var(--unit) * 2.75);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+      page[_internal-inventory] pal-row {
+        display: contents;
+      }
+      page[_internal-inventory] pal-token {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 0.5);
+        padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
+        background: var(--card);
+        font-family: ui-monospace, monospace;
+        font-size: calc(var(--unit) * 3.25);
+        color: var(--foreground);
+      }
+      page[_internal-inventory] pal-token em {
+        font-family: var(--font-sans);
+        font-style: normal;
+        font-size: calc(var(--unit) * 2.9);
+        color: var(--muted-foreground);
+      }
+      page[_internal-inventory] pal-swatch {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
+        background: var(--card);
+      }
+      page[_internal-inventory] pal-swatch i {
+        flex: none;
+        width: calc(var(--unit) * 8);
+        height: calc(var(--unit) * 8);
+        border-radius: calc(var(--unit) * 1);
+        box-shadow: inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.2);
+      }
+      page[_internal-inventory] pal-swatch code {
+        background: none;
+        padding: 0;
+        font-size: calc(var(--unit) * 3);
+        color: var(--muted-foreground);
+      }
+
+      /* component gallery --------------------------------------------------- */
+      page[_internal-inventory] comp-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 78), 1fr));
+        gap: calc(var(--unit) * 4);
+      }
+      page[_internal-inventory] comp-card {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--card);
+        overflow: hidden;
+      }
+      page[_internal-inventory] comp-head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
+        border-bottom: 1px solid var(--border);
+      }
+      page[_internal-inventory] comp-name {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 3.75);
+        color: var(--foreground);
+      }
+      page[_internal-inventory] comp-demos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1px;
+        background: var(--border);
+      }
+      page[_internal-inventory] demo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: calc(var(--unit) * 30);
+        padding: calc(var(--unit) * 3);
+        background: var(--c-panel);
+      }
+      page[_internal-inventory] comp-note {
+        padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
+        font-size: calc(var(--unit) * 3);
+        line-height: 1.45;
+        color: var(--muted-foreground);
+      }
+
+      page[_internal-inventory] comp-map {
+        margin-top: calc(var(--unit) * 5);
+        padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+        border: 1px dashed var(--border);
+        border-radius: var(--radius);
+      }
+      page[_internal-inventory] comp-map-title {
+        display: block;
+        margin-bottom: calc(var(--unit) * 1.5);
+        font-size: calc(var(--unit) * 2.75);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+      page[_internal-inventory] comp-map-row {
+        display: block;
+        padding: calc(var(--unit) * 0.75) 0;
+        font-size: calc(var(--unit) * 3.25);
+        color: var(--foreground);
+      }
+
+      /* themed palette contexts (dark / light) ----------------------------- */
+      page[_internal-inventory] [dark] {
+        --c-panel: oklch(0.185 0.013 65);
+        --c-inset: oklch(0.13 0.011 60);
+        --c-fg: oklch(0.91 0.015 85);
+        --c-muted: oklch(0.63 0.02 75);
+        --c-line: oklch(0.8 0.05 85 / 0.13);
+        --c-accent: var(--gold-warm);
+        --c-shadow: oklch(0 0 0 / 0.55);
+        color: var(--c-fg);
+      }
+      page[_internal-inventory] [light] {
+        --c-panel: oklch(0.975 0.016 85);
+        --c-inset: oklch(0.935 0.028 82);
+        --c-fg: oklch(0.27 0.03 55);
+        --c-muted: oklch(0.5 0.035 60);
+        --c-line: oklch(0.42 0.05 55 / 0.22);
+        --c-accent: var(--gold-deep);
+        --c-shadow: oklch(0.45 0.05 50 / 0.18);
+        color: var(--c-fg);
+      }
+
+      /* soul-index components ---------------------------------------------- */
+      page[_internal-inventory] s-rail {
+        grid-area: rail;
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1.5);
+        padding: calc(var(--unit) * 2);
+      }
+      page[_internal-inventory] s-cat {
+        display: grid;
+        place-items: center;
+        width: calc(var(--unit) * 9);
+        height: calc(var(--unit) * 9);
+        font-size: calc(var(--unit) * 4.5);
+        border-radius: calc(var(--unit) * 0.75);
+        background: oklch(from var(--c-inset) l c h / 0.6);
+        box-shadow: inset 0 0 0 1px var(--c-line);
+        filter: grayscale(0.5) opacity(0.65);
+        cursor: pointer;
+      }
+      page[_internal-inventory] s-cat[active] {
+        filter: none;
+        box-shadow: inset 0 0 0 1px var(--c-accent);
+        background: oklch(from var(--c-accent) l c h / 0.14);
+      }
+
+      page[_internal-inventory] s-list {
+        grid-area: list;
+        display: flex;
+        flex-direction: column;
+        align-self: start;
+        min-width: 0;
+        width: 100%;
+      }
+      page[_internal-inventory] s-item {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 1.8) calc(var(--unit) * 3);
+        font-size: calc(var(--unit) * 3.5);
+        color: var(--c-fg);
+        border-bottom: 1px solid var(--c-line);
+        cursor: pointer;
+        transition:
+          background 130ms ease,
+          box-shadow 130ms ease;
+      }
+      page[_internal-inventory] s-item:last-child {
+        border-bottom: 0;
+      }
+      page[_internal-inventory] s-item:not([selected]):hover {
+        background: oklch(from var(--c-accent) l c h / 0.1);
+        box-shadow: inset 2px 0 0 oklch(from var(--c-accent) l c h / 0.55);
+      }
+      page[_internal-inventory]
+        doc-section:has(doc-toggle input:checked)
+        s-item:nth-child(even):not([selected]):not(:hover) {
+        background: oklch(from var(--c-fg) l c h / 0.05);
+      }
+      page[_internal-inventory] s-item[selected] {
+        background: linear-gradient(90deg, oklch(from var(--c-accent) l c h / 0.16), transparent);
+        box-shadow: inset 2px 0 0 var(--c-accent);
+      }
+      page[_internal-inventory] s-ico {
+        font-size: calc(var(--unit) * 4);
+        line-height: 1;
+      }
+      page[_internal-inventory] s-ico[big] {
+        font-size: calc(var(--unit) * 13);
+        filter: drop-shadow(0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) var(--c-shadow));
+      }
+      page[_internal-inventory] s-meta {
+        margin-left: auto;
+        color: var(--c-accent);
+        font-weight: 600;
+      }
+
+      page[_internal-inventory] s-detail {
+        grid-area: detail;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 0.75);
+        padding: calc(var(--unit) * 4) calc(var(--unit) * 3);
+        background: var(--c-inset);
+        border-radius: calc(var(--unit) * 1);
+      }
+      page[_internal-inventory] s-name {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 4.25);
+        color: var(--c-fg);
+        text-align: center;
+      }
+      page[_internal-inventory] s-sub {
+        font-size: calc(var(--unit) * 2.9);
+        color: var(--c-muted);
+        margin-bottom: calc(var(--unit) * 2);
+      }
+      page[_internal-inventory] s-stats {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0 calc(var(--unit) * 4);
+        width: 100%;
+      }
+      page[_internal-inventory] s-stat {
+        display: flex;
+        justify-content: space-between;
+        padding: calc(var(--unit) * 1) 0;
+        border-bottom: 1px solid var(--c-line);
+        font-size: calc(var(--unit) * 3.1);
+      }
+      page[_internal-inventory] s-k {
+        color: var(--c-muted);
+      }
+      page[_internal-inventory] s-v {
+        color: var(--c-fg);
+        font-weight: 600;
+      }
+
+      page[_internal-inventory] s-head {
+        grid-area: head;
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 2.5) calc(var(--unit) * 4);
+        background: oklch(from var(--c-accent) l c h / 0.1);
+        border-bottom: 1px solid var(--c-line);
+        box-shadow: inset 0 2px 0 oklch(from var(--c-accent) l c h / 0.4);
+      }
+      page[_internal-inventory] s-head-title {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 4);
+        letter-spacing: 0.1em;
+        color: var(--c-fg);
+      }
+      page[_internal-inventory] s-count {
+        display: grid;
+        place-items: center;
+        min-width: calc(var(--unit) * 5);
+        padding: 0 calc(var(--unit) * 1.5);
+        height: calc(var(--unit) * 5);
+        border-radius: 9999px;
+        font-size: calc(var(--unit) * 2.9);
+        font-weight: 600;
+        color: var(--c-accent);
+        background: oklch(from var(--c-accent) l c h / 0.16);
+        box-shadow: inset 0 0 0 1px oklch(from var(--c-accent) l c h / 0.4);
+      }
+
+      /* full presentation --------------------------------------------------- */
+      page[_internal-inventory] full-stage {
+        position: relative;
+        display: block;
+        padding: calc(var(--unit) * 8);
+        border-radius: var(--radius);
+        margin-bottom: calc(var(--unit) * 4);
+      }
+      page[_internal-inventory] full-stage[dark] {
+        background: radial-gradient(120% 120% at 50% 0%, oklch(0.26 0.02 60), oklch(0.15 0.015 60));
+        box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.5);
+      }
+      page[_internal-inventory] full-stage[light] {
+        background: radial-gradient(120% 120% at 50% 0%, oklch(0.94 0.022 85), oklch(0.87 0.03 80));
+        box-shadow: inset 0 0 0 1px var(--border);
+      }
+      page[_internal-inventory] full-tag {
+        position: absolute;
+        top: calc(var(--unit) * 2);
+        right: calc(var(--unit) * 3);
+        font-size: calc(var(--unit) * 2.5);
+        letter-spacing: 0.18em;
+        color: var(--c-muted);
+        opacity: 0.7;
+      }
+      page[_internal-inventory] s-drawer {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) calc(var(--unit) * 52);
+        grid-template-rows: auto 1fr;
+        grid-template-areas: 'head head head' 'rail list detail';
+        width: 100%;
+        background: var(--c-panel);
+        border-radius: calc(var(--unit) * 1.5);
+        box-shadow:
+          inset 0 0 0 1px var(--c-line),
+          0 calc(var(--unit) * 2) calc(var(--unit) * 6) calc(var(--unit) * -2) var(--c-shadow);
+        overflow: hidden;
+      }
+      page[_internal-inventory] s-drawer s-list {
+        border-inline: 1px solid var(--c-line);
+      }
+      page[_internal-inventory] s-drawer s-detail {
+        border-radius: 0;
+      }
+
+      @media (width <= 900px) {
+        page[_internal-inventory] comp-grid {
+          grid-template-columns: 1fr;
+        }
+        page[_internal-inventory] pal-table {
+          grid-template-columns: 1fr;
+        }
+        page[_internal-inventory] pal-headrow,
+        page[_internal-inventory] pal-h:first-child {
+          display: none;
+        }
+        page[_internal-inventory] s-drawer {
+          grid-template-columns: auto minmax(0, 1fr);
+          grid-template-areas: 'head head' 'rail list' 'detail detail';
+        }
+        page[_internal-inventory] full-stage {
+          padding: calc(var(--unit) * 4);
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/rewards-box-designs.html b/pages/_internal/rewards-box-designs.html
new file mode 100644
index 00000000..b5d97e33
--- /dev/null
+++ b/pages/_internal/rewards-box-designs.html
@@ -0,0 +1,473 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Heraldic Banner · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      // The three outcomes the post-fight box must render. The verdict header itself
+      // is the real VictoryOrLoss component (mounted above the panel), so a state only
+      // needs its key (also the component's `outcome`), the loss flavour line, the
+      // button label and `win` to gate the layout. Flavour lines read for a lone
+      // brawler and a full team alike — "your side", not "your brawler". `rows` is the
+      // number of reward rows revealed in the chain, so the button can wait for them.
+      window.states = [
+        { key: 'victory', flavor: '', action: 'Claim', win: true, rows: 4 },
+        { key: 'defeat', flavor: 'Your side has fallen', action: 'Retreat', win: false, rows: 1 },
+        { key: 'draw', flavor: 'Neither side yields', action: 'Leave', win: false, rows: 0 },
+      ];
+
+      // A representative haul so every victory banner shows the reward language in situ:
+      // account XP, a crystal (coin stack), an element-tinted equipment drop and a
+      // crafting material. Non-equipment rewards carry an IconCell `tip`.
+      window.spoils = [
+        {
+          kind: 'xp',
+          icon: 'experience',
+          label: '+120 XP',
+          tip: { info: { name: 'Experience', description: 'Account XP toward your next level.' } },
+        },
+        { kind: 'crystal', label: '+1 Crystal', tip: { crystal: true } },
+        { kind: 'equipment', name: 'Emberfang Blade', element: 'fire' },
+        {
+          kind: 'material',
+          label: 'Essence of Fire',
+          image: 'essence-of-fire.webp',
+          tip: { info: { name: 'Essence of Fire', description: 'A fire crafting essence.' } },
+        },
+      ];
+
+      // A defeat is not always empty-handed — sometimes it pays a little Participation
+      // XP for stepping into the arena. Rendered as a one-line spoils list, its icon
+      // tinted the same silver as the DEFEAT verdict.
+      window.participation = [
+        {
+          kind: 'xp',
+          icon: 'experience',
+          label: '+40 XP',
+          suffix: '(for participating)',
+          tip: {
+            info: {
+              name: 'Participation XP',
+              description: 'A little account XP for stepping into the arena, win or lose.',
+            },
+          },
+        },
+      ];
+
+      // The chosen design: one Heraldic Banner — a hanging cloth with a crest bar and a
+      // single V-notched foot. `key` becomes an attribute on <reward-box banner …>.
+      window.designs = [
+        {
+          key: 'classic',
+          name: 'Classic V-Notch',
+          note: 'Straight sides, a single V-notch, thick crest bar — recolouring off the single --accent the outcome swaps.',
+        },
+      ];
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <intro>
+          <h2>Heraldic Banner</h2>
+          <p text-muted>
+            The chosen post-fight box, held in all three outcomes — <strong>Victory</strong> (full
+            spoils behind a golden Claim), <strong>Defeat</strong> (a little Participation XP, then
+            Retreat) and <strong>Draw</strong> (Leave). The real <code>VictoryOrLoss</code> verdict
+            sits above the banner; the banner carries the spoils/flavour and the action, recolouring
+            off a single <code>--accent</code> the outcome swaps. Boxes are static studies — the
+            buttons are inert. The reward language they speak is catalogued at the foot of the page.
+          </p>
+        </intro>
+
+        <reveal-toolbar>
+          <component
+            src="/components/LabeledSwitch.html"
+            label="Show rewards"
+            checked="@[showRewards !== false]"
+            onchange="$.showRewards = event.target.checked"
+          ></component>
+        </reveal-toolbar>
+
+        <!-- each designs as d (d.key) -->
+          <design-block>
+            <design-head>
+              <design-name>@[d.name]</design-name>
+              <design-note>@[d.note]</design-note>
+            </design-head>
+
+            <state-row>
+              <!-- each states as st (st.key) -->
+                <state-cell>
+                  <box-stage>
+                    <box-mount>
+                      <component
+                        src="/components/VictoryOrLoss.html"
+                        outcome="@[st.key]"
+                      ></component>
+
+                      <reward-box banner @[d.key] @[st.key] revealed="@[showRewards !== false]">
+                        <box-body>
+                          <!-- if st.win -->
+                            <spoils-title>Rewards</spoils-title>
+                            <box-rule></box-rule>
+                            <spoils-list>
+                              <!-- each spoils as sp (sp.kind) -->
+                                <spoil-row @[sp.kind]>
+                                  <!-- if sp.kind === 'equipment' -->
+                                    <eq-dark dark>
+                                      <component
+                                        src="/components/EquipmentLink.html"
+                                        name="@[sp.name]"
+                                        element="@[sp.element]"
+                                      ></component>
+                                    </eq-dark>
+                                  <!-- else -->
+                                    <component src="/components/IconCell.html" tip="@[sp.tip]">
+                                      <!-- if sp.kind === 'crystal' -->
+                                        <coin>
+                                          <stack>
+                                            <icon crystal back></icon>
+                                            <icon crystal coin-platinum></icon>
+                                          </stack>
+                                        </coin>
+                                      <!-- /if -->
+                                      <!-- if sp.kind === 'xp' -->
+                                        <icon @[sp.icon]></icon>
+                                      <!-- /if -->
+                                      <!-- if sp.kind === 'material' -->
+                                        <img
+                                          data-src="/static/images/materials/@[sp.image]"
+                                          alt="@[sp.label]"
+                                          spoil-img
+                                        />
+                                      <!-- /if -->
+                                    </component>
+                                    <spoil-label>@[sp.label]</spoil-label>
+                                  <!-- /if -->
+                                </spoil-row>
+                              <!-- /each -->
+                            </spoils-list>
+                          <!-- /if -->
+                          <!-- if !st.win -->
+                            <box-flavor>@[st.flavor]</box-flavor>
+                          <!-- /if -->
+                          <!-- if st.key === 'defeat' -->
+                            <box-rule></box-rule>
+                            <spoils-list>
+                              <!-- each participation as sp (sp.kind) -->
+                                <spoil-row @[sp.kind]>
+                                  <component src="/components/IconCell.html" tip="@[sp.tip]">
+                                    <icon @[sp.icon]></icon>
+                                  </component>
+                                  <spoil-label
+                                    >@[sp.label] <spoil-note>@[sp.suffix]</spoil-note></spoil-label
+                                  >
+                                </spoil-row>
+                              <!-- /each -->
+                            </spoils-list>
+                          <!-- /if -->
+                        </box-body>
+
+                        <box-actions style="--reveal-count: @[st.rows]">
+                          <component
+                            src="/components/buttons/PhysicalButton.html"
+                            label="@[st.action]"
+                            silver="@[!st.win]"
+                            sm="@[!st.win]"
+                          ></component>
+                        </box-actions>
+                      </reward-box>
+                    </box-mount>
+                  </box-stage>
+                </state-cell>
+              <!-- /each -->
+            </state-row>
+          </design-block>
+        <!-- /each -->
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-rewards-box-designs] page-content {
+        gap: calc(var(--unit) * 10);
+      }
+
+      page[_internal-rewards-box-designs] :is(intro, lexicon-head) h2 {
+        font-family: var(--font-heading);
+        margin: 0;
+      }
+
+      page[_internal-rewards-box-designs] :is(intro, lexicon-head) p {
+        margin: calc(var(--unit) * 1.5) 0 0;
+        max-width: calc(var(--unit) * 170);
+        line-height: 1.5;
+      }
+
+      page[_internal-rewards-box-designs] :is(intro, lexicon-head) code {
+        font-size: 0.9em;
+        padding: 0 calc(var(--unit) * 1);
+        border-radius: calc(var(--unit) * 0.5);
+        background: oklch(from var(--foreground) l c h / 0.06);
+      }
+
+      page[_internal-rewards-box-designs] reveal-toolbar {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--card);
+      }
+
+      page[_internal-rewards-box-designs] design-block {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-rewards-box-designs] design-name {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 5.5);
+        color: var(--foreground);
+      }
+
+      page[_internal-rewards-box-designs] design-note {
+        display: block;
+        margin-top: calc(var(--unit) * 0.5);
+        font-size: calc(var(--unit) * 3.5);
+        color: var(--muted-foreground);
+      }
+
+      page[_internal-rewards-box-designs] state-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-rewards-box-designs] state-cell {
+        flex: 1 1 calc(var(--unit) * 58);
+        min-width: calc(var(--unit) * 52);
+        max-width: calc(var(--unit) * 78);
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      /* Every banner sits on the same dark arena stage it would over a live fight, so
+         the gilding and cloth read against a real backdrop. */
+      page[_internal-rewards-box-designs] box-stage {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: calc(var(--unit) * 92);
+        padding: calc(var(--unit) * 7) calc(var(--unit) * 5);
+        border-radius: var(--radius);
+        background: radial-gradient(ellipse at center, oklch(0.44 0.03 60), oklch(0.26 0.02 55));
+        box-shadow: inset 0 0 calc(var(--unit) * 12) var(--scrim-3);
+        overflow: hidden;
+      }
+
+      /* The real VictoryOrLoss verdict sits above the panel, exactly as it does over
+         a live fight — the banner below carries only the spoils/flavour and the action. */
+      page[_internal-rewards-box-designs] box-mount {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+        width: 100%;
+      }
+
+      /* ---- shared box skeleton ---- */
+      reward-box {
+        --accent: var(--gold-warm);
+        --accent-soft: oklch(from var(--accent) l c h / 0.35);
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 5);
+        text-align: center;
+        color: var(--white);
+      }
+
+      reward-box[defeat] {
+        --accent: oklch(from var(--white) l c h);
+      }
+
+      reward-box[draw] {
+        --accent: oklch(from var(--white) calc(l - 0.16) c h);
+      }
+
+      reward-box box-rule {
+        width: 80%;
+        height: 1px;
+        margin-block: calc(var(--unit) * 1);
+        background: linear-gradient(to right, transparent, var(--accent-soft), transparent);
+      }
+
+      reward-box box-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        width: 100%;
+      }
+
+      reward-box spoils-title {
+        font-family: var(--font-heading);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: calc(var(--unit) * 5);
+        color: var(--accent);
+      }
+
+      reward-box spoils-list {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1.5);
+        width: 100%;
+        padding: 0 calc(var(--unit) * 3);
+      }
+
+      reward-box spoil-row {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: calc(var(--unit) * 2.5);
+        width: 100%;
+        font-size: calc(var(--unit) * 3.75);
+        font-variant-numeric: tabular-nums;
+      }
+
+      reward-box spoil-row icon-cell icon {
+        font-size: calc(var(--unit) * 4.5);
+      }
+
+      reward-box [spoil-img] {
+        width: calc(var(--unit) * 5);
+        height: calc(var(--unit) * 5);
+        object-fit: contain;
+      }
+
+      reward-box spoil-note {
+        margin-left: 0.35em;
+        color: var(--muted-foreground);
+      }
+
+      /* The banner is a dark surface, so force its equipment link to render in dark
+         mode (brighter name text) even though the page theme is light. */
+      reward-box[banner] eq-dark {
+        display: inline-flex;
+        min-width: 0;
+      }
+
+      reward-box box-flavor {
+        font-style: normal;
+        font-weight: 400;
+        font-size: calc(var(--unit) * 5.5);
+        color: oklch(from var(--accent) calc(l + 0.02) c h);
+      }
+
+      reward-box box-actions {
+        margin-top: calc(var(--unit) * 4);
+      }
+
+      reward-box box-actions button {
+        min-width: calc(var(--unit) * 26);
+      }
+
+      /* ---- Heraldic Banner — shared cloth ---- */
+      reward-box[banner] {
+        padding-bottom: calc(var(--unit) * 9);
+        color: oklch(0.96 0.02 85);
+        background: linear-gradient(
+          180deg,
+          oklch(from var(--accent) 0.42 min(c, 0.08) h),
+          oklch(from var(--accent) 0.3 min(c, 0.07) h)
+        );
+        border-top: calc(var(--unit) * 2) solid oklch(from var(--accent) 0.6 min(c, 0.1) h);
+        border-left: 1px solid oklch(from var(--accent) 0.5 min(c, 0.08) h);
+        border-right: 1px solid oklch(from var(--accent) 0.5 min(c, 0.08) h);
+        clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
+        filter: drop-shadow(0 calc(var(--unit) * 1) calc(var(--unit) * 2) var(--scrim-3));
+      }
+
+      reward-box[banner] spoils-title,
+      reward-box[banner] box-flavor {
+        color: oklch(0.97 0.02 85);
+      }
+
+      reward-box[banner][victory] spoils-title {
+        color: var(--gold-shine);
+      }
+
+      /* Show-rewards reveal: the reward rows chain in one by one, then the button last.
+         Pure CSS — the [revealed] attribute (bound to the switch) plays/replays the
+         staggered animation; without it the rows and button stay hidden. */
+      reward-box:not([revealed]) spoil-row,
+      reward-box:not([revealed]) box-actions {
+        opacity: 0;
+      }
+
+      reward-box[revealed] spoils-list spoil-row {
+        animation: rewardReveal 320ms ease both;
+      }
+
+      reward-box[revealed] spoils-list spoil-row:nth-child(2) {
+        animation-delay: 130ms;
+      }
+
+      reward-box[revealed] spoils-list spoil-row:nth-child(3) {
+        animation-delay: 260ms;
+      }
+
+      reward-box[revealed] spoils-list spoil-row:nth-child(4) {
+        animation-delay: 390ms;
+      }
+
+      reward-box[revealed] box-actions {
+        animation: rewardReveal 380ms ease both;
+        animation-delay: calc(var(--reveal-count, 0) * 130ms);
+      }
+
+      @keyframes rewardReveal {
+        from {
+          opacity: 0;
+          transform: translateY(calc(var(--unit) * 2));
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      /* Defeat sometimes pays Participation XP — tint its icon the DEFEAT silver
+         (the experience glyph defaults to gold, so override --color here). */
+      reward-box[banner][defeat] spoil-row icon-cell icon[experience] {
+        --color: oklch(from var(--white) calc(l - 0.12) c h);
+      }
+
+      @media (width <= 768px) {
+        page[_internal-rewards-box-designs] state-cell {
+          flex-basis: 100%;
+          max-width: none;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/sounds.html b/pages/_internal/sounds.html
new file mode 100644
index 00000000..dfa619ca
--- /dev/null
+++ b/pages/_internal/sounds.html
@@ -0,0 +1,313 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Sounds · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      // Regenerate manifest.json after changing the bundle:
+      // cd "static/audio/Imported Assets/BF Bundle" && find . -name '*.wav' | sed 's|^\./||' | sort | jq -R . | jq -s . > manifest.json
+      const BASE = '/static/audio/Imported Assets/BF Bundle/';
+      const SHOWN_MAX = 500;
+
+      // The raw bundle is local-only (gitignored), so the manifest is absent in
+      // compiled/deployed builds. Keep `sounds` mutable and seed it after the
+      // fetch — handlers and $ state below must not hinge on it resolving, or a
+      // missing manifest takes down the whole page.
+      let sounds = [];
+      const byName = (a, b) => a.name.localeCompare(b.name, undefined, { numeric: true });
+
+      window.soundsBrowse = ({ pack = $.soundPack, query = '' } = {}) => {
+        $.soundPack = pack;
+        $.soundQuery = query;
+        const q = query.trim().toLowerCase();
+        const matches = q
+          ? sounds.filter((s) => s.path.toLowerCase().includes(q))
+          : sounds.filter((s) => s.pack === pack);
+        const groups = new Map();
+        for (const sound of matches.slice(0, SHOWN_MAX)) {
+          const title = q ? [sound.pack, sound.sub].filter(Boolean).join(' / ') : sound.sub;
+          groups.has(title) ? groups.get(title).push(sound) : groups.set(title, [sound]);
+        }
+        $.soundTotal = matches.length;
+        $.soundShown = Math.min(matches.length, SHOWN_MAX);
+        $.soundGroups = [...groups].map(([title, files]) => ({ title, files: files.sort(byName) }));
+      };
+
+      const player = new Audio();
+      player.onended = () => ($.soundPlaying = '');
+      window.soundsPlay = (sound) => {
+        if ($.soundPlaying === sound.path) {
+          player.pause();
+          $.soundPlaying = '';
+          return;
+        }
+        player.src = encodeURI(BASE + sound.path);
+        player.play();
+        $.soundPlaying = sound.path;
+      };
+
+      let copiedTimer;
+      window.soundsCopy = (event, sound) => {
+        event.stopPropagation();
+        // execCommand instead of navigator.clipboard: the async clipboard's
+        // clipboard-write permission is denied inside embedded webviews (e.g.
+        // the Claude Preview pane), while the selection-based copy only needs
+        // the click's user activation.
+        const scratch = document.createElement('textarea');
+        scratch.value = [
+          `Implement the audio clip \`static/audio/Imported Assets/BF Bundle/${sound.path}\` in the game:`,
+          '',
+          '- Move it into the correct existing `static/audio/<folder>` for its purpose. The file name must never change.',
+          '- Register it in `js/audio.js` and play it through Howler like the other SFX.',
+          '- Before wiring it up, ask me where and how it should be implemented (which event, SFX entry/variants, volume bucket).',
+        ].join('\n');
+        scratch.style.position = 'fixed';
+        scratch.style.opacity = '0';
+        document.body.append(scratch);
+        scratch.select();
+        document.execCommand('copy');
+        scratch.remove();
+        $.soundCopied = sound.path;
+        clearTimeout(copiedTimer);
+        copiedTimer = setTimeout(() => ($.soundCopied = ''), 1500);
+      };
+
+      $.soundCopied = '';
+      $.soundPlaying = '';
+      $.soundPack = '';
+      $.soundQuery = '';
+      $.soundShown = 0;
+      $.soundTotal = 0;
+      $.soundPacks = [];
+      $.soundGroups = [];
+
+      const manifest = await fetch(encodeURI(`${BASE}manifest.json`)).then((r) =>
+        r.ok ? r.json() : [],
+      );
+      sounds = manifest.map((path) => {
+        const parts = path.split('/');
+        return {
+          path,
+          pack: parts.length > 1 ? parts[0] : 'Misc',
+          sub: parts.slice(1, -1).join(' / '),
+          name: parts.at(-1).replace(/\.wav$/, ''),
+        };
+      });
+
+      $.soundPacks = [...new Set(sounds.map((s) => s.pack))]
+        .sort((a, b) => a.localeCompare(b))
+        .map((name) => ({ name, count: sounds.filter((s) => s.pack === name).length }));
+      if ($.soundPacks.length) soundsBrowse({ pack: $.soundPacks[0].name });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <sounds-toolbar>
+          <input
+            type="search"
+            placeholder="Search all packs…"
+            value="@[soundQuery]"
+            oninput="soundsBrowse({ query: this.value })"
+            sounds-search
+          />
+          <sounds-meta>@[soundShown] / @[soundTotal] sounds</sounds-meta>
+        </sounds-toolbar>
+        <sounds-packs>
+          <!-- each soundPacks as pack -->
+            <button
+              tertiary="@[pack.name !== soundPack || !!soundQuery]"
+              primary="@[pack.name === soundPack && !soundQuery]"
+              onclick="soundsBrowse({ pack: pack.name })"
+            >
+              @[pack.name] <pack-count>@[pack.count]</pack-count>
+            </button>
+          <!-- /each -->
+        </sounds-packs>
+        <sounds-list>
+          <!-- each soundGroups as group -->
+            <sound-group>
+              <!-- if group.title -->
+                <sound-group-title>@[group.title]</sound-group-title>
+              <!-- /if -->
+              <sound-rows>
+                <!-- each group.files as sound -->
+                  <sound-row playing="@[soundPlaying === sound.path]" onclick="soundsPlay(sound)">
+                    @[sound.name]
+                    <sound-copy
+                      title="Copy implementation prompt"
+                      copied="@[soundCopied === sound.path]"
+                      onclick="soundsCopy(event, sound)"
+                    ></sound-copy>
+                  </sound-row>
+                <!-- /each -->
+              </sound-rows>
+            </sound-group>
+          <!-- /each -->
+          <!-- if soundShown < soundTotal -->
+            <sounds-capped
+              >Showing first @[soundShown] of @[soundTotal] matches — narrow the
+              search</sounds-capped
+            >
+          <!-- /if -->
+          <!-- if !soundPacks.length -->
+            <sounds-capped
+              >No sound bundle found — the raw <code>Imported Assets</code> library is local-only
+              and ships with neither the repo nor compiled builds.</sounds-capped
+            >
+          <!-- /if -->
+        </sounds-list>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-sounds] page-content {
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-sounds] sounds-toolbar {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-sounds] [sounds-search] {
+        flex: 1;
+        min-width: 0;
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+        font-size: calc(var(--unit) * 4);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+        background: oklch(from var(--foreground) 0.96 0 0);
+      }
+
+      page[_internal-sounds] sounds-meta {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        white-space: nowrap;
+      }
+
+      page[_internal-sounds] sounds-packs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-sounds] sounds-packs button {
+        padding: calc(var(--unit) * 1) calc(var(--unit) * 2);
+        font-size: calc(var(--unit) * 3);
+      }
+
+      page[_internal-sounds] pack-count {
+        opacity: 0.6;
+      }
+
+      page[_internal-sounds] sounds-list {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[_internal-sounds] sound-group {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1.5);
+      }
+
+      page[_internal-sounds] sound-group-title {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.6);
+      }
+
+      page[_internal-sounds] sound-rows {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 60), 1fr));
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[_internal-sounds] sound-row {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
+        font-size: calc(var(--unit) * 3.25);
+        border: 1px solid oklch(from var(--foreground) 0.85 0 0);
+        border-radius: var(--radius);
+        background: oklch(from var(--foreground) 0.96 0 0);
+        cursor: pointer;
+        overflow-wrap: anywhere;
+      }
+
+      page[_internal-sounds] sound-row::before {
+        content: '▶';
+        font-size: calc(var(--unit) * 2.5);
+        opacity: 0.5;
+      }
+
+      page[_internal-sounds] sound-row:hover {
+        border-color: var(--primary);
+      }
+
+      page[_internal-sounds] sound-row[playing] {
+        background: var(--primary);
+        border-color: var(--primary);
+        color: var(--primary-foreground);
+      }
+
+      page[_internal-sounds] sound-row[playing]::before {
+        content: '◼';
+        opacity: 1;
+      }
+
+      page[_internal-sounds] sound-copy {
+        margin-left: auto;
+        padding: 0 calc(var(--unit) * 1);
+        opacity: 0.4;
+        border-radius: var(--radius);
+      }
+
+      page[_internal-sounds] sound-copy::before {
+        content: '⧉';
+      }
+
+      page[_internal-sounds] sound-copy:hover {
+        opacity: 1;
+        background: oklch(from var(--foreground) l 0 h / 0.1);
+      }
+
+      page[_internal-sounds] sound-copy[copied] {
+        opacity: 1;
+        color: var(--hue-green);
+      }
+
+      page[_internal-sounds] sound-copy[copied]::before {
+        content: '✓';
+      }
+
+      page[_internal-sounds] sound-row[playing] sound-copy[copied] {
+        color: var(--primary-foreground);
+      }
+
+      page[_internal-sounds] sounds-capped {
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--foreground) l 0 h / 0.5);
+        text-align: center;
+        padding: calc(var(--unit) * 2);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/spa-testing/$$route.html b/pages/_internal/spa-testing/$$route.html
new file mode 100644
index 00000000..1696a34d
--- /dev/null
+++ b/pages/_internal/spa-testing/$$route.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>SPA Testing · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/spa-demo.js';
+      boot();
+    </script>
+
+    <page-spa-testing vertical up g="6" p="6" w="full">
+      <crow g="2" left w="full" spa-nav>
+        <a href="/_internal/spa-testing" primary active="@[page.name === 'home']">Home</a>
+        <a href="/_internal/spa-testing/timer" primary active="@[page.name === 'timer']">Timer</a>
+        <a href="/_internal/spa-testing/fighter/7" primary active="@[page.name === 'fighter']"
+          >Fighter</a
+        >
+        <spa-route f="1" text-center>route: <strong>@[page.name]</strong></spa-route>
+        <a href="/" secondary>Back to game</a>
+      </crow>
+
+      <component src="@[page.src]"></component>
+    </page-spa-testing>
+
+    <style>
+      page-spa-testing {
+        max-width: calc(var(--unit) * 180);
+        margin: 0 auto;
+      }
+
+      [spa-nav] a[active] {
+        outline: calc(var(--unit) * 0.5) solid var(--border);
+        outline-offset: calc(var(--unit) * 0.5);
+      }
+
+      spa-route {
+        color: var(--muted-foreground);
+      }
+
+      spa-page {
+        width: 100%;
+      }
+
+      spa-page p,
+      spa-page ul {
+        max-width: calc(var(--unit) * 140);
+      }
+
+      spa-note {
+        display: block;
+        color: var(--muted-foreground);
+        font-size: calc(var(--unit) * 3);
+      }
+
+      spa-metric {
+        font-size: calc(var(--unit) * 8);
+        font-weight: bold;
+        font-variant-numeric: tabular-nums;
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/test-combat.html b/pages/_internal/test-combat.html
new file mode 100644
index 00000000..c9902c1a
--- /dev/null
+++ b/pages/_internal/test-combat.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/DebugContent.html"></component>
+      </page-content>
+    </component>
+    <style>
+      body:not([dark]) {
+        background-image: url('/static/images/bg/arena-combat-4096x2304.webp');
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/_internal/tooltips.html b/pages/_internal/tooltips.html
new file mode 100644
index 00000000..58da3547
--- /dev/null
+++ b/pages/_internal/tooltips.html
@@ -0,0 +1,231 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Tooltips · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+      import { ALL_ABILITIES } from '/js/constants/ABILITIES.js';
+      import STATUS_EFFECTS from '/js/constants/STATUS_EFFECTS.js';
+      import { STAT_DESCRIPTIONS } from '/js/constants/STATS.js';
+      import {
+        equipmentTooltipProps,
+        abilityTooltipProps,
+        statusTooltipProps,
+      } from '/js/tooltip.js';
+
+      const options = (all) => Object.keys(all).map((key) => ({ key, name: all[key].name }));
+
+      const buildEquipment = (key) => equipmentTooltipProps(EQUIPMENT(key, true));
+      const buildAbility = (key) => abilityTooltipProps({ id: key });
+      const buildStatus = (key) => statusTooltipProps({ statusKey: key });
+
+      const TEXTS = {
+        'Single brawler': 'Select at least one brawler to fight',
+        'Multiple brawlers': 'This fight requires 3 brawlers to be selected. Select 2 more.',
+        'Knocked out': 'One or more of your brawlers attending is at 0 or lower life',
+      };
+      const buildText = (key) => ({ description: TEXTS[key], plain: true });
+      const buildStat = (key) => STAT_DESCRIPTIONS[key];
+
+      // Each tooltip is rendered through a single-item keyed list so changing the
+      // selection swaps the key, remounting the card with fresh props. (Vibe only
+      // re-passes props in place to the first <component src> on a page, so a
+      // keyed remount is how each card stays independently reactive.)
+      const slot = (key, build) => [{ key, props: build(key) }];
+
+      const equipmentOptions = options(ALL_EQUIPMENT);
+      const abilityOptions = options(ALL_ABILITIES);
+      const statusOptions = options(STATUS_EFFECTS);
+      const textOptions = Object.keys(TEXTS).map((key) => ({ key, name: key }));
+      const statOptions = options(STAT_DESCRIPTIONS);
+
+      $.gallery = {
+        equipmentOptions,
+        abilityOptions,
+        statusOptions,
+        textOptions,
+        statOptions,
+        equipment: slot(equipmentOptions[0].key, buildEquipment),
+        ability: slot(abilityOptions[0].key, buildAbility),
+        status: slot(statusOptions[0].key, buildStatus),
+        text: slot(textOptions[0].key, buildText),
+        stat: slot(statOptions[0].key, buildStat),
+      };
+
+      const patch = (next) => ($.gallery = { ...$.gallery, ...next });
+      window.selectEquipment = (key) => patch({ equipment: slot(key, buildEquipment) });
+      window.selectAbility = (key) => patch({ ability: slot(key, buildAbility) });
+      window.selectStatus = (key) => patch({ status: slot(key, buildStatus) });
+      window.selectText = (key) => patch({ text: slot(key, buildText) });
+      window.selectStat = (key) => patch({ stat: slot(key, buildStat) });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component small src="/components/TitleBar.html" title="Tooltips"></component>
+
+        <tooltip-grid>
+          <tooltip-showcase>
+            <crow justify-between center w="full" showcase-head>
+              <h3 m="0">Equipment</h3>
+              <label>
+                <select showcase-select onchange="selectEquipment(this.value)">
+                  <!-- each gallery.equipmentOptions as opt -->
+                    <option value="@[opt.key]">@[opt.name]</option>
+                  <!-- /each -->
+                </select>
+              </label>
+            </crow>
+            <!-- each gallery.equipment as item (item.key) -->
+              <flat-tooltip @[item.props.element]>
+                <component src="/components/tooltip/Display.html" props="@[item.props]"></component>
+                <tooltip-arrow></tooltip-arrow>
+              </flat-tooltip>
+            <!-- /each -->
+          </tooltip-showcase>
+
+          <tooltip-showcase>
+            <crow justify-between center w="full" showcase-head>
+              <h3 m="0">Ability</h3>
+              <label>
+                <select showcase-select onchange="selectAbility(this.value)">
+                  <!-- each gallery.abilityOptions as opt -->
+                    <option value="@[opt.key]">@[opt.name]</option>
+                  <!-- /each -->
+                </select>
+              </label>
+            </crow>
+            <!-- each gallery.ability as item (item.key) -->
+              <flat-tooltip @[item.props.element]>
+                <component src="/components/tooltip/Display.html" props="@[item.props]"></component>
+                <tooltip-arrow></tooltip-arrow>
+              </flat-tooltip>
+            <!-- /each -->
+          </tooltip-showcase>
+
+          <tooltip-showcase>
+            <crow justify-between center w="full" showcase-head>
+              <h3 m="0">Status effect</h3>
+              <label>
+                <select showcase-select onchange="selectStatus(this.value)">
+                  <!-- each gallery.statusOptions as opt -->
+                    <option value="@[opt.key]">@[opt.name]</option>
+                  <!-- /each -->
+                </select>
+              </label>
+            </crow>
+            <!-- each gallery.status as item (item.key) -->
+              <flat-tooltip>
+                <component src="/components/tooltip/Display.html" props="@[item.props]"></component>
+                <tooltip-arrow></tooltip-arrow>
+              </flat-tooltip>
+            <!-- /each -->
+          </tooltip-showcase>
+
+          <tooltip-showcase>
+            <crow justify-between center w="full" showcase-head>
+              <h3 m="0">Stat</h3>
+              <label>
+                <select showcase-select onchange="selectStat(this.value)">
+                  <!-- each gallery.statOptions as opt -->
+                    <option value="@[opt.key]">@[opt.name]</option>
+                  <!-- /each -->
+                </select>
+              </label>
+            </crow>
+            <!-- each gallery.stat as item (item.key) -->
+              <flat-tooltip>
+                <component src="/components/tooltip/Display.html" props="@[item.props]"></component>
+                <tooltip-arrow></tooltip-arrow>
+              </flat-tooltip>
+            <!-- /each -->
+          </tooltip-showcase>
+
+          <tooltip-showcase>
+            <crow justify-between center w="full" showcase-head>
+              <h3 m="0">Text</h3>
+              <label>
+                <select showcase-select onchange="selectText(this.value)">
+                  <!-- each gallery.textOptions as opt -->
+                    <option value="@[opt.key]">@[opt.name]</option>
+                  <!-- /each -->
+                </select>
+              </label>
+            </crow>
+            <!-- each gallery.text as item (item.key) -->
+              <flat-tooltip>
+                <component src="/components/tooltip/Display.html" props="@[item.props]"></component>
+                <tooltip-arrow></tooltip-arrow>
+              </flat-tooltip>
+            <!-- /each -->
+          </tooltip-showcase>
+        </tooltip-grid>
+      </page-content>
+    </component>
+
+    <style>
+      page[_internal-tooltips] tooltip-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 78), 1fr));
+        gap: calc(var(--unit) * 10) calc(var(--unit) * 6);
+        align-items: start;
+        padding-top: calc(var(--unit) * 4);
+      }
+
+      page[_internal-tooltips] tooltip-showcase {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+      }
+
+      page[_internal-tooltips] [showcase-select] {
+        min-width: calc(var(--unit) * 40);
+        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 3);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--card);
+        color: var(--foreground);
+        cursor: pointer;
+      }
+
+      page[_internal-tooltips] flat-tooltip {
+        position: relative;
+        display: inline-block;
+        align-self: flex-start;
+        filter: drop-shadow(0 calc(var(--unit) * 0.5) calc(var(--unit) * 1) var(--scrim-1));
+      }
+
+      page[_internal-tooltips] flat-tooltip tooltip-arrow {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        width: calc(var(--unit) * 3);
+        height: calc(var(--unit) * 3);
+        background: var(--card);
+        border: 1px solid var(--border);
+        transform: translate(-50%, 50%) rotate(45deg);
+        clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
+      }
+
+      page[_internal-tooltips]
+        flat-tooltip:is([fire], [frost], [earth], [nature], [lightning])
+        tooltip-arrow {
+        border-color: oklch(from var(--element-color) l calc(c * 0.5) h / 0.5);
+        background: color-mix(in oklab, var(--card) 97%, var(--element-color));
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/achievements.html b/pages/achievements.html
new file mode 100644
index 00000000..ddd594e9
--- /dev/null
+++ b/pages/achievements.html
@@ -0,0 +1,407 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Achievements · Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import {
+        ALL_ACHIEVEMENTS,
+        ACHIEVEMENTS_BY_ID,
+        achProgress,
+        scopeCategories,
+        achievementsIn,
+        ACH_CATEGORY_LABELS,
+      } from '/js/constants/ACHIEVEMENTS.js';
+      import { mergeStats } from '/js/utils.js';
+
+      // Sidebar taxonomy + totals (static from the catalog).
+      window.achSeasonalCats = scopeCategories('seasonal');
+      window.achAccountCats = scopeCategories('account');
+      window.achCatLabel = (c) => ACH_CATEGORY_LABELS[c] || c;
+      window.achScopeTotal = (scope) => ALL_ACHIEVEMENTS.filter((a) => a.scope === scope).length;
+      window.achCatTotal = (scope, category) => achievementsIn(scope, category).length;
+
+      // Earned/progress recompute from the REACTIVE args passed in markup (not $ reads,
+      // which Vibe wouldn't track) so the counts and banners re-render on unlock.
+      const lifetimeFrom = (statistics, accountStatistics, season) => {
+        const cur = window.seasonLabel(season);
+        const prior = Object.entries(accountStatistics || {})
+          .filter(([l]) => l !== cur)
+          .reduce((a, [, t]) => mergeStats(a, t), {});
+        return mergeStats(prior, statistics || {});
+      };
+      const earnedInPrior = (accountAchievements, season, id) => {
+        const cur = window.seasonLabel(season);
+        return Object.entries(accountAchievements || {}).some(([l, m]) => l !== cur && m?.[id]);
+      };
+      const isEarned = (ach, achievements, accountAchievements, season) =>
+        ach.scope === 'seasonal'
+          ? !!achievements?.[ach.id]
+          : !!achievements?.[ach.id] || earnedInPrior(accountAchievements, season, ach.id);
+
+      window.achScopeEarned = (scope, achievements, accountAchievements, season) =>
+        ALL_ACHIEVEMENTS.filter(
+          (a) => a.scope === scope && isEarned(a, achievements, accountAchievements, season),
+        ).length;
+      window.achCatEarned = (scope, category, achievements, accountAchievements, season) =>
+        achievementsIn(scope, category).filter((a) =>
+          isEarned(a, achievements, accountAchievements, season),
+        ).length;
+
+      // Raw achievements for the selected category (the reveal id pinned to the top).
+      // Earned/progress are NOT baked in here — each row's binding reads the reactive
+      // $ state directly so it re-renders on unlock (a baked-in value only depends on
+      // the loop alias and goes stale).
+      window.achTabList = (tab, reveal) => {
+        if (!tab || tab === 'recent') return [];
+        const [scope, category] = tab.split(':');
+        let items = achievementsIn(scope, category);
+        const i = reveal ? items.findIndex((a) => a.id === reveal) : -1;
+        if (i > 0) items = [items[i], ...items.slice(0, i), ...items.slice(i + 1)];
+        return items;
+      };
+      window.achIsEarned = (ach, achievements, accountAchievements, season) =>
+        isEarned(ach, achievements, accountAchievements, season);
+      window.achRatioOf = (ach, statistics, accountStatistics, accountAchievements, season) =>
+        achProgress(
+          ach,
+          ach.scope === 'seasonal'
+            ? statistics
+            : lifetimeFrom(statistics, accountStatistics, season),
+        ).ratio;
+
+      // The 10 most recent unlocks across both scopes, deduped on season+id.
+      window.achRecent = (achievements, accountAchievements, season) => {
+        const cur = window.seasonLabel(season);
+        const rows = {};
+        const push = (id, label, at) => {
+          if (!ACHIEVEMENTS_BY_ID[id]) return;
+          const k = `${label}:${id}`;
+          if (!rows[k] || at > rows[k].at) rows[k] = { id, label, at, ach: ACHIEVEMENTS_BY_ID[id] };
+        };
+        Object.entries(accountAchievements || {}).forEach(([l, m]) =>
+          Object.entries(m || {}).forEach(([id, v]) => push(id, l, v?.earnedAt || 0)),
+        );
+        Object.entries(achievements || {}).forEach(([id, v]) => push(id, cur, v?.earnedAt || 0));
+        return Object.values(rows)
+          .sort((a, b) => b.at - a.at)
+          .slice(0, 10);
+      };
+
+      window.achSeasonOf = (label) => {
+        const [y, m] = label.split('-').map(Number);
+        return window.seasonNumber(Date.UTC(y, m - 1, 1));
+      };
+
+      window.selectAchTab = (tab) => {
+        $.achTab = tab;
+        $.achReveal = null;
+      };
+      window.gotoAch = (id) => {
+        const a = ACHIEVEMENTS_BY_ID[id];
+        if (!a) return;
+        $.achTab = `${a.scope}:${a.category}`;
+        $.achReveal = id;
+      };
+
+      // Deep-link arrival from the center reveal: open the right tab, pin the
+      // achievement to the top, and arm the locked→earned flip.
+      const revealId = new URLSearchParams(location.search).get('reveal');
+      const revealAch = revealId && ACHIEVEMENTS_BY_ID[revealId];
+      if (revealAch) {
+        $.achTab = `${revealAch.scope}:${revealAch.category}`;
+        $.achReveal = revealId;
+        $.achFlip = revealId;
+      }
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Achievements" back="/pve"></component>
+
+        <ach-cards>
+          <card ach-stat>
+            <ach-stat-label>This season</ach-stat-label>
+            <ach-stat-value>
+              @[achScopeEarned('seasonal', achievements, accountAchievements, season)] /
+              @[achScopeTotal('seasonal')]
+            </ach-stat-value>
+          </card>
+          <card ach-stat>
+            <ach-stat-label>All seasons</ach-stat-label>
+            <ach-stat-value>
+              @[achScopeEarned('account', achievements, accountAchievements, season)] /
+              @[achScopeTotal('account')]
+            </ach-stat-value>
+          </card>
+        </ach-cards>
+
+        <ach-shell>
+          <ach-sidebar>
+            <ach-tab selected="@[achTab === 'recent']" onclick="selectAchTab('recent')">
+              <ach-tab-name>Recent</ach-tab-name>
+            </ach-tab>
+
+            <ach-section>Seasonal Achievements</ach-section>
+            <!-- each achSeasonalCats as c -->
+              <ach-tab
+                selected="@[achTab === 'seasonal:' + c]"
+                onclick="selectAchTab('seasonal:' + c)"
+              >
+                <ach-tab-name>@[achCatLabel(c)]</ach-tab-name>
+                <ach-tab-count>
+                  @[achCatEarned('seasonal', c, achievements, accountAchievements, season)] /
+                  @[achCatTotal('seasonal', c)]
+                </ach-tab-count>
+              </ach-tab>
+            <!-- /each -->
+
+            <ach-section>Account Achievements</ach-section>
+            <!-- each achAccountCats as c -->
+              <ach-tab
+                selected="@[achTab === 'account:' + c]"
+                onclick="selectAchTab('account:' + c)"
+              >
+                <ach-tab-name>@[achCatLabel(c)]</ach-tab-name>
+                <ach-tab-count>
+                  @[achCatEarned('account', c, achievements, accountAchievements, season)] /
+                  @[achCatTotal('account', c)]
+                </ach-tab-count>
+              </ach-tab>
+            <!-- /each -->
+          </ach-sidebar>
+
+          <ach-content>
+            <!-- if achTab === 'recent' -->
+              <!-- each achRecent(achievements, accountAchievements, season) as row (row.label + ':' + row.id) -->
+                <achievement-card
+                  royal
+                  onclick="gotoAch(row.id)"
+                  onmouseenter="showAchievementTooltip(this, achById(row.id))"
+                  onmouseleave="hideTooltip()"
+                >
+                  <ac-corner tl></ac-corner>
+                  <ac-corner tr></ac-corner>
+                  <ac-corner bl></ac-corner>
+                  <ac-corner br></ac-corner>
+                  <ac-icon><icon @[row.ach.icon]></icon></ac-icon>
+                  <ac-body>
+                    <ac-eyebrow>Season @[achSeasonOf(row.label)] · earned</ac-eyebrow>
+                    <ac-title>@[row.ach.title]</ac-title>
+                    <ac-desc>@[row.ach.description]</ac-desc>
+                  </ac-body>
+                </achievement-card>
+              <!-- /each -->
+              <!-- if achRecent(achievements, accountAchievements, season).length === 0 -->
+                <ach-empty>No achievements earned yet — go win something.</ach-empty>
+              <!-- /if -->
+            <!-- /if -->
+
+            <!-- if achTab !== 'recent' -->
+              <!-- each achTabList(achTab, achReveal) as item (item.id) -->
+                <!-- if item.id === achFlip -->
+                  <ac-flip>
+                    <ac-flip-inner onanimationstart="achRevealSfx(event)">
+                      <ac-flip-face front>
+                        <achievement-card royal locked>
+                          <ac-icon
+                            ><icon @[item.icon]></icon><icon lock-closed lock></icon
+                          ></ac-icon>
+                          <ac-body>
+                            <ac-eyebrow>Locked</ac-eyebrow>
+                            <ac-title>@[item.title]</ac-title>
+                            <ac-desc>@[item.description]</ac-desc>
+                          </ac-body>
+                        </achievement-card>
+                      </ac-flip-face>
+                      <ac-flip-face back>
+                        <achievement-card royal>
+                          <ac-corner tl></ac-corner>
+                          <ac-corner tr></ac-corner>
+                          <ac-corner bl></ac-corner>
+                          <ac-corner br></ac-corner>
+                          <ac-icon
+                            ><icon @[item.icon]></icon><icon lock-closed lock></icon
+                          ></ac-icon>
+                          <ac-body>
+                            <ac-eyebrow>Achievement earned</ac-eyebrow>
+                            <ac-title>@[item.title]</ac-title>
+                            <ac-desc>@[item.description]</ac-desc>
+                          </ac-body>
+                        </achievement-card>
+                      </ac-flip-face>
+                    </ac-flip-inner>
+                  </ac-flip>
+                <!-- /if -->
+                <!-- if item.id !== achFlip -->
+                  <achievement-card
+                    royal
+                    locked="@[!achIsEarned(item, achievements, accountAchievements, season)]"
+                    onmouseenter="showAchievementTooltip(this, item)"
+                    onmouseleave="hideTooltip()"
+                  >
+                    <ac-corner tl></ac-corner>
+                    <ac-corner tr></ac-corner>
+                    <ac-corner bl></ac-corner>
+                    <ac-corner br></ac-corner>
+                    <ac-icon><icon @[item.icon]></icon><icon lock-closed lock></icon></ac-icon>
+                    <ac-body>
+                      <ac-eyebrow
+                        >@[achIsEarned(item, achievements, accountAchievements, season) ?
+                        'Achievement earned' : 'Locked']</ac-eyebrow
+                      >
+                      <ac-title>@[item.title]</ac-title>
+                      <ac-desc>@[item.description]</ac-desc>
+                      <ac-progress
+                        ><ac-progress-fill
+                          p="@[achRatioOf(item, statistics, accountStatistics, accountAchievements, season)]"
+                        ></ac-progress-fill
+                      ></ac-progress>
+                    </ac-body>
+                  </achievement-card>
+                <!-- /if -->
+              <!-- /each -->
+            <!-- /if -->
+          </ach-content>
+        </ach-shell>
+      </page-content>
+    </component>
+
+    <style>
+      page[achievements] page-content {
+        gap: calc(var(--unit) * 5);
+      }
+
+      page[achievements] ach-cards {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[achievements] [ach-stat] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--unit) * 1);
+        padding: calc(var(--unit) * 4);
+      }
+
+      page[achievements] ach-stat-label {
+        font-family: var(--font-sans);
+        font-size: calc(var(--unit) * 3);
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+
+      page[achievements] ach-stat-value {
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 7);
+        color: var(--gold-shine);
+        font-variant-numeric: tabular-nums;
+      }
+
+      page[achievements] ach-shell {
+        display: grid;
+        grid-template-columns: 1fr calc(var(--unit) * 56);
+        gap: calc(var(--unit) * 5);
+        align-items: start;
+      }
+
+      page[achievements] ach-sidebar {
+        order: 2;
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1);
+        position: sticky;
+        top: calc(var(--unit) * 3);
+      }
+
+      page[achievements] ach-section {
+        margin-top: calc(var(--unit) * 3);
+        padding: 0 calc(var(--unit) * 2);
+        font-family: var(--font-sans);
+        font-size: calc(var(--unit) * 2.75);
+        font-weight: 600;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: oklch(from var(--gold-warm) calc(l + 0.05) c h);
+      }
+
+      page[achievements] ach-tab {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
+        border-radius: var(--radius);
+        cursor: pointer;
+        color: var(--foreground);
+        box-shadow: inset 0 0 0 1px transparent;
+      }
+
+      page[achievements] ach-tab:hover {
+        background: var(--sheen-2);
+      }
+
+      page[achievements] ach-tab[selected] {
+        background: oklch(from var(--gold-warm) l c h / 0.14);
+        box-shadow: inset 0 0 0 1px oklch(from var(--gold-deep) l c h / 0.6);
+      }
+
+      page[achievements] ach-tab-count {
+        flex: none;
+        font-variant-numeric: tabular-nums;
+        font-size: calc(var(--unit) * 3.25);
+        color: var(--muted-foreground);
+      }
+
+      page[achievements] ach-content {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 4);
+      }
+
+      page[achievements] ach-content achievement-card {
+        max-width: none;
+      }
+
+      page[achievements] ach-content achievement-card:not([locked]) {
+        box-shadow:
+          inset 0 0 0 1px var(--ac-inset),
+          inset 0 0 0 calc(var(--unit) * 1.5) oklch(from var(--gold-deep) l c h / 0.5),
+          0 0 calc(var(--unit) * 16) oklch(from var(--gold-warm) l c h / 0.3);
+      }
+
+      page[achievements] ach-empty {
+        padding: calc(var(--unit) * 8);
+        text-align: center;
+        color: var(--muted-foreground);
+      }
+
+      @media (width <= 768px) {
+        page[achievements] ach-shell {
+          grid-template-columns: 1fr;
+        }
+
+        page[achievements] ach-sidebar {
+          order: 0;
+          position: static;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/admin.html b/pages/admin.html
new file mode 100644
index 00000000..4dd8c3ac
--- /dev/null
+++ b/pages/admin.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { isAdminEmail } from '/js/config.js';
+
+      // Pass `email` from the template so Vibe tracks it and re-evaluates the gate the
+      // moment auth lands. The real protection is server-side (admin/reseed-bots checks
+      // isAdmin on the session token) — this only hides the controls from non-admins.
+      window.isAdmin = isAdminEmail;
+
+      window.reseedBots = async () => {
+        if ($.adminBusy) return;
+        if (!$.socket) return notify.error('Not connected to game server');
+        $.adminBusy = true;
+        try {
+          const { message } = await $.socket.sendAsync('admin/reseed-bots', { token: $.token });
+          notify.success(message || 'Bots re-seeded');
+        } catch (e) {
+          notify.error(e?.error || 'Bot re-seed failed');
+        } finally {
+          $.adminBusy = false;
+        }
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Admin"></component>
+        <hr />
+
+        <!-- if isAdmin(email) -->
+          <page-admin>
+            <admin-section>
+              <h4 m="0">Bots</h4>
+              <button primary onclick="reseedBots()" disabled="@[adminBusy]">
+                @[adminBusy ? 'Re-seeding…' : 'Re-seed bots']
+              </button>
+            </admin-section>
+          </page-admin>
+        <!-- /if -->
+
+        <!-- if !isAdmin(email) -->
+          <admin-denied block p="6" text-muted>Not authorized.</admin-denied>
+        <!-- /if -->
+      </page-content>
+    </component>
+
+    <style>
+      page-admin {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 5);
+      }
+
+      admin-section {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+        align-items: start;
+        padding: calc(var(--unit) * 4);
+        border-radius: var(--radius);
+        box-shadow: inset 0 0 0 1px var(--c-line);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/armory.html b/pages/armory.html
new file mode 100644
index 00000000..d4e761f6
--- /dev/null
+++ b/pages/armory.html
@@ -0,0 +1,432 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+      import ABILITIES from '/js/constants/ABILITIES.js';
+      import { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+      import { slotsInPrettyName, equipmentRaces } from '/js/equipment.js';
+      import { MAX_LEVEL } from '/js/level.js';
+      import { combatStatsToList } from '/js/tooltip.js';
+      import { abilityStatusChips, incStat } from '/js/utils.js';
+
+      window.MAX_LEVEL = MAX_LEVEL;
+
+      window.merchantImage = (key) => `/static/images/races/${ALL_CHARACTERS[key].image}`;
+
+      const chunkPairs = (arr) =>
+        arr.reduce((rows, x, i) => {
+          if (i % 2 === 0) rows.push([x]);
+          else rows[rows.length - 1].push(x);
+          return rows;
+        }, []);
+
+      window.vendorItems = Object.keys(ALL_EQUIPMENT)
+        .map((key) => {
+          const item = EQUIPMENT(key, true);
+          const abilities = [
+            ...new Map(
+              (item.abilities || [])
+                .map((a) => ABILITIES(a, true))
+                .filter((h) => !h.basic)
+                .map((h) => [h.id, { ...h, uuid: h.id, statusChips: abilityStatusChips(h) }]),
+            ).values(),
+          ];
+          return {
+            ...item,
+            id: key,
+            slotLabel: slotsInPrettyName(item.slotsIn),
+            races: equipmentRaces(key),
+            stats: combatStatsToList(item.combatStats, true).reverse(),
+            abilities,
+            abilityRows: chunkPairs(abilities),
+          };
+        })
+        .filter((item) => item.obtainedFrom?.includes('armory'));
+
+      const MERCHANT_TIERS = [1, 5, 12, 18, 25];
+
+      window.vendorItemsAtLevel = (minLevel) => {
+        const nextTier = MERCHANT_TIERS.find((tier) => tier > minLevel);
+        const maxLevel = nextTier ? nextTier - 1 : Infinity;
+        return window.vendorItems
+          .filter((item) => item.level >= minLevel && item.level <= maxLevel)
+          .sort((a, b) => a.cost - b.cost);
+      };
+
+      window.filterVendorItems = (filter, minLevel) =>
+        window.vendorItemsAtLevel(minLevel).filter((item) => item.slotsIn.includes(filter));
+
+      // "For my level" hides vendors whose top tier you've out-levelled (their gear
+      // sits below your level). Oswald sells 1-4 → gone at 5; Mira 5-11 → gone at 12.
+      window.showVendor = (minLevel, forMyLevel, experience) => {
+        if (!forMyLevel) return true;
+        const nextTier = MERCHANT_TIERS.find((tier) => tier > minLevel);
+        const maxLevel = nextTier ? nextTier - 1 : Infinity;
+        return getLevelByExperience(experience || 0) <= maxLevel;
+      };
+
+      window.vendorCount = (type, minLevel) =>
+        window.vendorItemsAtLevel(minLevel).filter((item) => item.slotsIn.includes(type)).length;
+
+      const SLOT_TYPES = [...new Set(window.vendorItems.flatMap((i) => [].concat(i.slotsIn)))];
+      window.maxVendorRows = Math.max(
+        ...MERCHANT_TIERS.flatMap((tier) => SLOT_TYPES.map((type) => vendorCount(type, tier))),
+      );
+
+      window.toggleMerchant = (head) => {
+        if (head.closest('[merchant-card]')?.hasAttribute('locked')) return;
+        const accordion = head.nextElementSibling;
+        const opening = !accordion.hasAttribute('open');
+        accordion.toggleAttribute('open');
+        if (!opening) return;
+        accordion
+          .querySelector('[vendor-stay]')
+          ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      };
+
+      $.on('ready', () => {
+        document.querySelector('[merchant-card] accordion')?.setAttribute('open', '');
+      });
+
+      // Affordable when coins cover the crystal cost AND owned materials cover every
+      // line of the item's material cost (blacksmith gear; other vendors have none).
+      window.canAcquire = (item) =>
+        $.coins >= item.cost &&
+        Object.entries(item.materials || {}).every(([id, n]) => ($.materials?.[id] || 0) >= n);
+
+      window.vendorAcquire = (itemId) => {
+        const item = EQUIPMENT(itemId, false);
+        const { cost, level, materials } = EQUIPMENT(item, true);
+        item.overrides = { level };
+
+        if ($.coins < cost) {
+          notify.warning('Not enough coins');
+          return;
+        }
+        const short = Object.entries(materials || {}).some(
+          ([id, n]) => ($.materials?.[id] || 0) < n,
+        );
+        if (short) {
+          notify.warning('Not enough materials');
+          return;
+        }
+
+        $.overlay = {
+          name: 'confirm',
+          text: 'You will pay the following to acquire this equipment:',
+          coins: cost,
+          materials,
+          confirm: () => {
+            $.coins -= cost;
+            incStat('economy.crystals.spent', { count: cost });
+            if (materials && Object.keys(materials).length) {
+              const next = { ...$.materials };
+              Object.entries(materials).forEach(([id, n]) => (next[id] = (next[id] || 0) - n));
+              $.materials = next;
+            }
+            $.inventory.push(item);
+            notify.success('Equipment acquired!');
+          },
+        };
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Armory">
+          <!-- if getLevelByExperience(experience) >= 5 -->
+            <component
+              src="/components/LabeledSwitch.html"
+              label="For my level"
+              checked="@[forMyLevel]"
+              onchange="$.forMyLevel = this.checked"
+            >
+            </component>
+          <!-- /if -->
+        </component>
+
+        <!-- if showVendor(1, forMyLevel, experience) || showVendor(5, forMyLevel, experience) -->
+          <component src="/components/TitleBar.html" title="Vendors"></component>
+          <!-- if showVendor(1, forMyLevel, experience) -->
+            <component
+              src="/components/MerchantCard.html"
+              name="Oswald the Outfitter"
+              image="@[merchantImage('oswald')]"
+              level="1"
+              description="A weathered quartermaster who has outfitted a hundred doomed expeditions. His prices are fair, his steel is honest, and he never asks where the coin came from."
+            >
+              <component src="/components/VendorContent.html" minLevel="@[1]"></component>
+            </component>
+          <!-- /if -->
+          <!-- if showVendor(5, forMyLevel, experience) -->
+            <component
+              src="/components/MerchantCard.html"
+              name="Mira the Trinketeer"
+              image="@[merchantImage('mira')]"
+              level="5"
+              description="A travelling curio-dealer whose cart rattles with oddities and half-cursed baubles. She deals only in higher-grade finds."
+            >
+              <component src="/components/VendorContent.html" minLevel="@[5]"></component>
+            </component>
+          <!-- /if -->
+          <kingstone h="8"></kingstone>
+        <!-- /if -->
+
+        <!-- if showVendor(12, forMyLevel, experience) || showVendor(18, forMyLevel, experience) || showVendor(25, forMyLevel, experience) -->
+          <component src="/components/TitleBar.html" title="Blacksmiths"></component>
+          <!-- if showVendor(12, forMyLevel, experience) -->
+            <component
+              src="/components/MerchantCard.html"
+              name="Brog Ironhand"
+              image="@[merchantImage('brog')]"
+              level="12"
+              description="A barrel-chested dwarf who claims his hammer has never struck the same blow twice. He forges only the heaviest gear."
+            >
+              <component src="/components/VendorContent.html" minLevel="@[12]"></component>
+            </component>
+          <!-- /if -->
+          <!-- if showVendor(18, forMyLevel, experience) -->
+            <component
+              src="/components/MerchantCard.html"
+              name="Grukk Emberfist"
+              image="@[merchantImage('grukk')]"
+              level="18"
+              description="A troll smith who works molten ore with bare hands and a worrying grin. Only the strongest dare browse his wares."
+            >
+              <component src="/components/VendorContent.html" minLevel="@[18]"></component>
+            </component>
+          <!-- /if -->
+          <!-- if showVendor(25, forMyLevel, experience) -->
+            <component
+              src="/components/MerchantCard.html"
+              name="Nibsy Sparkwrench"
+              image="@[merchantImage('nibsy')]"
+              level="25"
+              description="A goblin tinkerer convinced that every weapon can be improved with one more spring. His contraptions are strictly top-tier."
+            >
+              <component src="/components/VendorContent.html" minLevel="@[25]"></component>
+            </component>
+          <!-- /if -->
+        <!-- /if -->
+      </page-content>
+
+      <component src="/components/InventoryDrawer.html"></component>
+    </component>
+    <style>
+      page[armory] [vendor-stay] {
+        scroll-margin-top: calc(var(--unit) * 23.5);
+        background: var(--card);
+      }
+
+      page[armory] accordion,
+      page[armory] accordion-content {
+        min-width: 0;
+      }
+
+      page[armory] td:first-child {
+        width: 100%;
+      }
+
+      page[armory] [game-table] td {
+        padding-inline: calc(var(--unit) * 3.5);
+      }
+
+      page[armory] [game-table-row] td {
+        height: calc(var(--unit) * 14);
+      }
+
+      page[armory] [game-table-row]:not([skeleton]):hover {
+        background: oklch(from var(--c-accent) l c h / 0.1);
+        box-shadow: inset calc(var(--unit) * 0.5) 0 0 oklch(from var(--c-accent) l c h / 0.55);
+      }
+
+      page[armory] vendor-col-name,
+      page[armory] [vendor-col-name] {
+        display: flex;
+        min-width: 0;
+      }
+
+      page[armory] vendor-col-stats,
+      page[armory] [vendor-col-stats] {
+        min-width: 0;
+      }
+
+      page[armory] vendor-col-slot,
+      page[armory] [vendor-col-slot] {
+        white-space: nowrap;
+      }
+
+      page[armory] vendor-col-races,
+      page[armory] [vendor-col-races] {
+        display: flex;
+        align-items: center;
+      }
+
+      page[armory] td:has(vendor-col-ability),
+      page[armory] td:has([vendor-col-ability]) {
+        position: relative;
+      }
+
+      page[armory] vendor-col-ability,
+      page[armory] [vendor-col-ability] {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[armory] vendor-col-ability ability-tile {
+        width: calc(var(--unit) * 8);
+        height: calc(var(--unit) * 8);
+      }
+
+      page[armory] vendor-col-ability ability-tile [ability-glyph] icon {
+        font-size: calc(var(--unit) * 4.8);
+      }
+
+      page[armory] vendor-col-stats,
+      page[armory] [vendor-col-stats] {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: calc(var(--unit) * 2);
+        font-variant-numeric: tabular-nums;
+      }
+
+      page[armory] vendor-col-stats eq-stat {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1);
+      }
+
+      page[armory] vendor-col-stats icon-cell {
+        width: calc(var(--unit) * 5);
+        height: calc(var(--unit) * 5);
+      }
+
+      page[armory] vendor-col-stats icon {
+        font-size: calc(var(--unit) * 3.5);
+      }
+
+      /* Mask icons mute via their fill (background-color); element icons paint an SVG,
+         so a background-color shows as a solid block behind them — exclude them, they
+         mute via grayscale instead. */
+      page[armory] vendor-col-stats icon:not([fire], [frost], [earth], [nature], [lightning]) {
+        background-color: var(--muted-foreground);
+      }
+
+      page[armory]
+        [game-table-row]:hover
+        vendor-col-stats
+        icon:not([fire], [frost], [earth], [nature], [lightning]) {
+        background-color: var(--color, var(--muted-foreground));
+      }
+
+      /* Element icons paint an SVG (not a mask), so they mute via grayscale instead of
+         background-color, and the row hover lifts it like the others reveal colour. */
+      page[armory] vendor-col-stats icon[fire],
+      page[armory] vendor-col-stats icon[frost],
+      page[armory] vendor-col-stats icon[earth],
+      page[armory] vendor-col-stats icon[nature],
+      page[armory] vendor-col-stats icon[lightning] {
+        filter: var(--element-icon-shadow) grayscale(1);
+        transition: filter 0.15s ease;
+      }
+
+      page[armory] [game-table-row]:hover vendor-col-stats icon[fire],
+      page[armory] [game-table-row]:hover vendor-col-stats icon[frost],
+      page[armory] [game-table-row]:hover vendor-col-stats icon[earth],
+      page[armory] [game-table-row]:hover vendor-col-stats icon[nature],
+      page[armory] [game-table-row]:hover vendor-col-stats icon[lightning] {
+        filter: var(--element-icon-shadow) grayscale(0);
+      }
+
+      page[armory] vendor-col-stats span {
+        color: var(--muted-foreground);
+      }
+
+      page[armory] [game-table-row]:hover vendor-col-stats span {
+        color: inherit;
+      }
+
+      page[armory] [game-table-row]:hover vendor-col-stats span[text-green] {
+        color: var(--green);
+      }
+
+      page[armory] [game-table-row]:hover vendor-col-stats span[text-red] {
+        color: var(--red);
+      }
+
+      page[armory] [vendor-col-name] eq-name-target {
+        display: block;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      page[armory] vendor-col-cost,
+      page[armory] [vendor-col-cost] {
+        display: flex;
+        justify-content: flex-end;
+        font-variant-numeric: tabular-nums;
+      }
+
+      page[armory] vendor-col-action,
+      page[armory] [vendor-col-action] {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      @media (width <= 768px) {
+        page[armory] td:nth-child(2),
+        page[armory] td:nth-child(4),
+        page[armory] td:nth-child(5) {
+          display: none;
+        }
+
+        page[armory] [game-table] {
+          table-layout: fixed;
+        }
+
+        page[armory] td:nth-child(3) {
+          width: calc(var(--unit) * 15);
+        }
+
+        page[armory] td:nth-child(6) {
+          width: calc(var(--unit) * 20);
+        }
+
+        page[armory] td:nth-child(7) {
+          width: calc(var(--unit) * 24);
+        }
+
+        page[armory] vendor-col-name eq-name-target {
+          min-width: 0;
+          overflow: hidden;
+        }
+
+        page[armory] vendor-col-name eq-link {
+          max-width: 100%;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/brawlers.html b/pages/brawlers.html
new file mode 100644
index 00000000..95a6b3ed
--- /dev/null
+++ b/pages/brawlers.html
@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import CHARACTERS, {
+        DEFAULT_LUCKY_STATS,
+        DEFAULT_MODIFIERS,
+      } from '/js/constants/CHARACTERS.js';
+      import ABILITIES from '/js/constants/ABILITIES.js';
+      import { RECRUITABLE_CHARACTERS } from '/js/constants/RECRUITABLE_CHARACTERS.js';
+      import { ALL_ELEMENTS } from '/js/constants/ELEMENTS.js';
+      import { LUCKY_STATS, MODIFIER_STATS, STAT_LABELS } from '/js/constants/STATS.js';
+      import { correctHealth } from '/js/equipment.js';
+      import { saveNow } from '/js/connectSocket.js';
+      import {
+        calculateCombatStatsByCharacter,
+        calculateDefaultAbilitiesByCharacter,
+        abilityStatusChips,
+        incStat,
+      } from '/js/utils.js';
+
+      const buildBonuses = (current, defaults, keys) =>
+        keys
+          .filter((k) => current[k] !== defaults[k])
+          .map((k) => {
+            const delta = Math.round((current[k] - defaults[k]) * 100);
+            return {
+              icon: k,
+              label: STAT_LABELS[k],
+              delta,
+              value: `${delta > 0 ? '+' : ''}${delta}%`,
+            };
+          });
+
+      window.brawlerCards = RECRUITABLE_CHARACTERS.map((ref) => {
+        const char = CHARACTERS(ref, true);
+        const element = ALL_ELEMENTS[char.race?.element] || { name: '—', color: 'var(--stone)' };
+        const stats = calculateCombatStatsByCharacter(char);
+        const cs = char.combatStats;
+        const signature = char.signatureAbility ? ABILITIES(char.signatureAbility, true) : null;
+        return {
+          ref,
+          name: char.name,
+          id: char.id,
+          image: char.image,
+          size: char.size || 1,
+          elementKey: char.race?.element || '',
+          elementName: element.name,
+          color: element.color,
+          hp: stats.maxHealth,
+          armor: stats.maxArmor,
+          damage: stats.damage,
+          bonuses: [
+            ...buildBonuses(cs, DEFAULT_LUCKY_STATS, LUCKY_STATS),
+            ...buildBonuses(cs.modifiers || {}, DEFAULT_MODIFIERS, MODIFIER_STATS),
+          ],
+          signatureAbility: signature
+            ? { ...signature, statusChips: abilityStatusChips(signature) }
+            : null,
+        };
+      });
+
+      window.pickCharacter = (card) => {
+        if ($.characters.length >= allowedNumberOfBrawlers()) {
+          notify.warning('You cannot recruit more brawlers. Level up your ludus first.');
+          return;
+        }
+
+        if ($.characters.find((c) => c.id === card.id)) {
+          notify.warning(`${card.name} is already recruited`);
+          return;
+        }
+
+        $.overlay = {
+          name: 'confirm',
+          text: `Recruiting ${card.name} to your Ludus.`,
+          confirm: async () => {
+            const recruit = correctHealth(card.ref);
+            recruit.overrides.abilities = calculateDefaultAbilitiesByCharacter(
+              CHARACTERS(recruit, true),
+            );
+            $.characters.push(recruit);
+            incStat(`brawlers.recruited.${card.id}`);
+            await saveNow();
+            location.href = '/brawlers/' + ($.characters.length - 1);
+          },
+        };
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <brawlers-gallery>
+          <!-- each brawlerCards as card -->
+            <brawler-card
+              onclick="pickCharacter(card)"
+              style="--element-color: @[card.color]"
+              recruited="@[characters.some(c => c.id === card.id)]"
+            >
+              <card-portrait>
+                <component
+                  src="/components/CharacterAvatar.html"
+                  image="@[card.image]"
+                  size="@[card.size]"
+                  name="@[card.name]"
+                >
+                </component>
+                <!-- if false -->
+                  <!-- if card.elementKey -->
+                    <element-badge>
+                      <icon @[card.elementKey]></icon>
+                      <span>@[card.elementName]</span>
+                    </element-badge>
+                  <!-- /if -->
+                <!-- /if -->
+              </card-portrait>
+
+              <card-body>
+                <h3 cinzel m="0">@[card.name]</h3>
+
+                <component
+                  src="/components/CoreStats.html"
+                  hp="@[card.hp]"
+                  armor="@[card.armor]"
+                  damage="@[card.damage]"
+                >
+                </component>
+
+                <card-section>
+                  <card-section-label>Signature ability</card-section-label>
+                  <ability-slot empty="@[!card.signatureAbility]">
+                    <!-- if card.signatureAbility -->
+                      <component
+                        src="/components/AbilityCell.html"
+                        ability="@[card.signatureAbility]"
+                      >
+                      </component>
+                      <span>@[card.signatureAbility.name]</span>
+                    <!-- else -->
+                      <ability-box-empty></ability-box-empty>
+                      <span ability-empty>Coming soon</span>
+                    <!-- /if -->
+                  </ability-slot>
+                </card-section>
+
+                <!-- if settings.isTester && card.bonuses.length -->
+                  <card-section>
+                    <card-section-label>Stats</card-section-label>
+                    <bonus-tags>
+                      <!-- each card.bonuses as b -->
+                        <bonus-tag negative="@[b.delta < 0]">
+                          <icon @[b.icon]></icon>
+                          <bonus-value>@[b.value]</bonus-value>
+                        </bonus-tag>
+                      <!-- /each -->
+                    </bonus-tags>
+                  </card-section>
+                <!-- /if -->
+              </card-body>
+            </brawler-card>
+          <!-- /each -->
+        </brawlers-gallery>
+      </page-content>
+    </component>
+
+    <style>
+      page[brawlers] brawlers-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 72), 1fr));
+        gap: calc(var(--unit) * 4);
+        width: 100%;
+      }
+
+      page[brawlers] brawler-card {
+        display: flex;
+        flex-direction: column;
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border: 1px solid oklch(from var(--element-color) l c h / 0.4);
+        border-radius: calc(var(--unit) * 1);
+        overflow: visible;
+        cursor: pointer;
+        transition:
+          transform 150ms,
+          box-shadow 150ms,
+          border-color 150ms;
+      }
+
+      page[brawlers] brawler-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) -1px var(--scrim-2);
+        border-color: var(--element-color);
+      }
+
+      page[brawlers] brawler-card[recruited] {
+        opacity: 0.5;
+        filter: grayscale(1);
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      page[brawlers] card-portrait {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: calc(var(--unit) * 40);
+        background: linear-gradient(
+          180deg,
+          oklch(from var(--element-color) l c h / 0.18),
+          oklch(from var(--element-color) l c h / 0.04)
+        );
+        border-bottom: 1px solid oklch(from var(--element-color) l c h / 0.25);
+      }
+
+      page[brawlers] card-portrait char-portrait {
+        width: 100%;
+        height: 100%;
+        align-items: flex-end;
+        justify-content: center;
+        transform: translateY(calc(var(--unit) * 2));
+      }
+
+      page[brawlers] element-badge {
+        position: absolute;
+        top: calc(var(--unit) * 2);
+        right: calc(var(--unit) * 2);
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1);
+        padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+        background: oklch(from var(--background) l c h / 0.85);
+        border: 1px solid oklch(from var(--element-color) l c h / 0.5);
+        border-radius: calc(var(--unit) * 0.75);
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3);
+        color: oklch(from var(--element-color) calc(l * 0.85) c h);
+        backdrop-filter: blur(4px);
+      }
+
+      page[brawlers] element-badge icon {
+        --color: oklch(from var(--element-color) calc(l * 0.85) c h);
+      }
+
+      page[brawlers] card-body {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 4);
+      }
+
+      page[brawlers] card-body h3 {
+        font-size: calc(var(--unit) * 5);
+      }
+
+      page[brawlers] card-section {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1.5);
+      }
+
+      page[brawlers] card-section-label {
+        padding-top: calc(var(--unit) * 2);
+        font-size: calc(var(--unit) * 3);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--foreground-muted);
+      }
+
+      page[brawlers] ability-slot {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[brawlers] ability-box-empty {
+        display: block;
+        width: calc(var(--unit) * 10);
+        height: calc(var(--unit) * 10);
+        border-radius: calc(var(--unit) * 1);
+        background: oklch(from var(--element-color) l c h / 0.08);
+        border: 1px dashed oklch(from var(--element-color) l c h / 0.4);
+      }
+
+      page[brawlers] [ability-empty] {
+        color: oklch(from var(--foreground) l 0 h / 0.4);
+        font-style: italic;
+      }
+
+      page[brawlers] bonus-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 1.5);
+      }
+
+      page[brawlers] bonus-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1);
+        padding: calc(var(--unit) * 0.5) calc(var(--unit) * 1.5);
+        background: oklch(from var(--hue-green) l c h / 0.08);
+        border: 1px solid oklch(from var(--hue-green) l c h / 0.3);
+        border-radius: calc(var(--unit) * 0.5);
+        font-size: calc(var(--unit) * 3.25);
+        color: oklch(from var(--hue-green) calc(l * 0.8) c h);
+        white-space: nowrap;
+      }
+
+      page[brawlers] bonus-tag icon {
+        font-size: calc(var(--unit) * 4);
+      }
+
+      page[brawlers] bonus-tag[negative] {
+        background: oklch(from var(--hue-red) l c h / 0.08);
+        border-color: oklch(from var(--hue-red) l c h / 0.3);
+        color: oklch(from var(--hue-red) calc(l * 0.85) c h);
+      }
+
+      @media (width <= 768px) {
+        page[brawlers] brawlers-gallery {
+          grid-template-columns: 1fr;
+          gap: calc(var(--unit) * 3);
+        }
+
+        page[brawlers] card-portrait {
+          height: calc(var(--unit) * 50);
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/brawlers/$index.html b/pages/brawlers/$index.html
new file mode 100644
index 00000000..e2502ff1
--- /dev/null
+++ b/pages/brawlers/$index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <component src="/components/BrawlerDetailContent.html"></component>
+    </component>
+    <style>
+      page[brawlers-index] char-portrait {
+        width: 100%;
+        height: calc(var(--unit) * 55);
+        align-items: center;
+        justify-content: center;
+      }
+
+      page[brawlers-index] [detail-col] {
+        min-width: 0;
+      }
+
+      page[brawlers-index] equipment-heading {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 200ms ease-out;
+        width: 100%;
+      }
+
+      page[brawlers-index] equipment-heading[open] {
+        grid-template-rows: 1fr;
+      }
+
+      @media (width <= 768px) {
+        page[brawlers-index] [avatar-col] {
+          width: 100%;
+          align-items: center;
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/index.html b/pages/index.html
new file mode 100644
index 00000000..ad484cb9
--- /dev/null
+++ b/pages/index.html
@@ -0,0 +1,434 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      $.openFaq = -1;
+
+      window.toggleFaq = (i) => {
+        $.openFaq = $.openFaq === i ? -1 : i;
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <home-hero>
+          <h1 cinzel m="0">Battleborn Brawlers</h1>
+          <p hero-tagline>
+            Battleborn Brawlers is a gladiator-themed strategy auto-battler where you recruit and
+            equip brawlers in your Ludus, build their ability loadouts, and send them into fights.
+          </p>
+          <!-- if characters.length === 0 -->
+            <crow hero-cta>
+              <a class="button" primary href="/brawlers">Recruit your first brawler</a>
+            </crow>
+          <!-- /if -->
+        </home-hero>
+
+        <h3 cinzel m="0" how-to-heading>How to play</h3>
+
+        <faq-list>
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(0)" expanded="@[openFaq === 0]">
+              <span>Quick start — what should I do first?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 0]"></component>
+            </button>
+            <accordion open="@[openFaq === 0]">
+              <accordion-content>
+                <faq-body>
+                  <ol guide-steps>
+                    <li>Recruit your first brawler from <a href="/brawlers">Brawlers</a>.</li>
+                    <li>Equip gear from the <a href="/armory">Vendors</a>.</li>
+                    <li>Arrange abilities on the timeline in the brawler's detail page.</li>
+                    <li>Pick a fight in <a href="/pve">The Arena</a> — combat is automatic.</li>
+                    <li>Claim level rewards from <strong>My Ludus</strong> to grow stronger.</li>
+                  </ol>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(1)" expanded="@[openFaq === 1]">
+              <span>What is my Ludus?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 1]"></component>
+            </button>
+            <accordion open="@[openFaq === 1]">
+              <accordion-content>
+                <faq-body>
+                  <p>
+                    Your <strong>Ludus</strong> is your stable of brawlers. Each fight earns
+                    experience that levels it up.
+                  </p>
+                  <p>
+                    Every <strong>5 Ludus levels</strong> unlocks an additional brawler slot, up to
+                    <strong>6</strong> in total. Claim a reward at each new level from the
+                    progression panel.
+                  </p>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(2)" expanded="@[openFaq === 2]">
+              <span>How do I recruit brawlers?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 2]"></component>
+            </button>
+            <accordion open="@[openFaq === 2]">
+              <accordion-content>
+                <faq-body>
+                  <p>
+                    Head to the <strong>Brawlers</strong> page to browse the available roster. Click
+                    any card to recruit that brawler into your Ludus.
+                  </p>
+                  <p>
+                    Each brawler has a <strong>race</strong>, an <strong>element</strong>, and a
+                    unique mix of base stats and bonuses.
+                  </p>
+                  <element-list>
+                    <element-item>
+                      <component src="/components/IconCell.html" tip="@[null]"
+                        ><icon nature></icon
+                      ></component>
+                      Nature
+                    </element-item>
+                    <element-item>
+                      <component src="/components/IconCell.html" tip="@[null]"
+                        ><icon earth></icon
+                      ></component>
+                      Earth
+                    </element-item>
+                    <element-item>
+                      <component src="/components/IconCell.html" tip="@[null]"
+                        ><icon lightning></icon
+                      ></component>
+                      Lightning
+                    </element-item>
+                    <element-item>
+                      <component src="/components/IconCell.html" tip="@[null]"
+                        ><icon frost></icon
+                      ></component>
+                      Frost
+                    </element-item>
+                    <element-item>
+                      <component src="/components/IconCell.html" tip="@[null]"
+                        ><icon fire></icon
+                      ></component>
+                      Fire
+                    </element-item>
+                  </element-list>
+                  <p>
+                    Look for brawlers whose <strong>bonuses</strong> (extra HP, Dodge, Crit, etc.)
+                    complement the rest of your roster. You start with one slot; every five Ludus
+                    levels unlocks another, up to six.
+                  </p>
+                  <faq-cta>
+                    <a class="button" primary href="/brawlers">Meet the Brawlers</a>
+                  </faq-cta>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(3)" expanded="@[openFaq === 3]">
+              <span>How does equipment work?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 3]"></component>
+            </button>
+            <accordion open="@[openFaq === 3]">
+              <accordion-content>
+                <faq-body>
+                  <p>
+                    Brawlers carry five slots: <strong>main-hand</strong>,
+                    <strong>off-hand</strong>, <strong>armor</strong>, <strong>accessory</strong>,
+                    and <strong>trinket</strong>.
+                  </p>
+                  <p>
+                    Two-handed weapons occupy both hand slots. Weapons grant their basic ability set
+                    automatically — drop them onto the active bar to use them.
+                  </p>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(4)" expanded="@[openFaq === 4]">
+              <span>How do abilities and ticks work?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 4]"></component>
+            </button>
+            <accordion open="@[openFaq === 4]">
+              <accordion-content>
+                <faq-body>
+                  <p>
+                    Combat runs on a <strong>tick system</strong>. A cycle is normally
+                    <strong>12 ticks</strong>, expandable up to <strong>15</strong>.
+                  </p>
+                  <p>
+                    Every ability has its own tick length — the time it takes to cast or remain
+                    active. Arrange your brawler's active abilities to fill a cycle; the order is
+                    the order they fire in.
+                  </p>
+                  <p>
+                    Non-basic abilities come from equipment. Drag them from
+                    <strong>Available</strong> onto the bar to slot them in.
+                  </p>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(5)" expanded="@[openFaq === 5]">
+              <span>How does combat play out?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 5]"></component>
+            </button>
+            <accordion open="@[openFaq === 5]">
+              <accordion-content>
+                <faq-body>
+                  <p>
+                    Once a fight starts, combat resolves itself — your strategy is decided before
+                    the first tick. Tick cycles repeat until one team is defeated.
+                  </p>
+                  <p>
+                    Watch the playback to see how your loadout actually performs, then iterate on
+                    equipment and ability order between fights.
+                  </p>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(6)" expanded="@[openFaq === 6]">
+              <span>What's the difference between the Arena and Random Duel?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 6]"></component>
+            </button>
+            <accordion open="@[openFaq === 6]">
+              <accordion-content>
+                <faq-body>
+                  <p>
+                    <strong>The Arena</strong> holds a curated roster of PvE fights. Each fight
+                    lists its enemy composition, level range and reward.
+                  </p>
+                  <p>
+                    <strong>Boss fights</strong> in the arena unlock additional content — but they
+                    disable luck-based stats (crit, dodge, block, magic), so plan around raw HP,
+                    armor and damage.
+                  </p>
+                  <p>
+                    <strong>Random Duel</strong> matches you against another player's roster. Lower
+                    stakes, free intel on what other players are running.
+                  </p>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+
+          <faq-item>
+            <button class="faq-toggle" onclick="toggleFaq(7)" expanded="@[openFaq === 7]">
+              <span>Where do I spend coins?</span>
+              <component src="/components/Caret.html" open="@[openFaq === 7]"></component>
+            </button>
+            <accordion open="@[openFaq === 7]">
+              <accordion-content>
+                <faq-body>
+                  <crow left g="2">
+                    <component src="/components/IconCell.html" tip="@[null]"
+                      ><icon coin></icon
+                    ></component>
+                    <p m="0">
+                      At the <a href="/armory">Vendors</a>. Better gear means better stats and
+                      access to stronger non-basic abilities.
+                    </p>
+                  </crow>
+                  <p>Coins come from fights, level rewards and the occasional duel.</p>
+                </faq-body>
+              </accordion-content>
+            </accordion>
+          </faq-item>
+        </faq-list>
+      </page-content>
+    </component>
+
+    <style>
+      body:has(auth-scene) {
+        background-image: url('/static/images/bg/login-4096x2304.webp');
+      }
+
+      page[home] home-hero {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: calc(var(--unit) * 3);
+        padding: calc(var(--unit) * 6);
+        background: linear-gradient(
+          135deg,
+          oklch(from var(--primary) l c h / 0.18),
+          oklch(from var(--primary) calc(l + 0.1) calc(c * 0.6) h / 0.05)
+        );
+        border: 1px solid oklch(from var(--primary) l c h / 0.3);
+        border-radius: calc(var(--unit) * 1);
+      }
+
+      page[home] home-hero h1 {
+        font-size: calc(var(--unit) * 9);
+      }
+
+      page[home] [hero-tagline] {
+        margin: 0;
+        max-width: calc(var(--unit) * 150);
+        font-size: calc(var(--unit) * 4);
+        color: oklch(from var(--foreground) l c h / 0.75);
+      }
+
+      page[home] [hero-cta] {
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[home] [how-to-heading] {
+        font-size: calc(var(--unit) * 6);
+        margin-top: calc(var(--unit) * 4);
+      }
+
+      page[home] faq-list {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+      }
+
+      page[home] faq-item {
+        display: block;
+        background: oklch(from var(--background) calc(l + 0.02) c h);
+        border: 1px solid oklch(from var(--foreground) l c h / 0.1);
+        border-radius: calc(var(--unit) * 1);
+        overflow: hidden;
+      }
+
+      page[home] .faq-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: calc(var(--unit) * 3);
+        width: 100%;
+        padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        font-family: var(--font-heading);
+        font-size: calc(var(--unit) * 4);
+        text-align: left;
+        color: var(--foreground);
+        cursor: pointer;
+        transition: background 150ms;
+      }
+
+      page[home] .faq-toggle:hover {
+        background: oklch(from var(--foreground) l c h / 0.03);
+      }
+
+      page[home] .faq-toggle[expanded] {
+        background: oklch(from var(--foreground) l c h / 0.04);
+      }
+
+      page[home] faq-body {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 4) calc(var(--unit) * 4) calc(var(--unit) * 4);
+        color: oklch(from var(--foreground) l c h / 0.7);
+        line-height: 1.55;
+      }
+
+      page[home] element-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--unit) * 3);
+        margin-top: calc(var(--unit) * 1);
+      }
+
+      page[home] element-item {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 1.5);
+        font-family: var(--font-accent);
+        font-size: calc(var(--unit) * 3.5);
+        color: oklch(from var(--foreground) l c h / 0.85);
+      }
+
+      page[home] element-list icon[nature] {
+        --color: var(--element-nature);
+      }
+      page[home] element-list icon[earth] {
+        --color: var(--element-earth);
+      }
+      page[home] element-list icon[lightning] {
+        --color: var(--element-lightning);
+      }
+      page[home] element-list icon[frost] {
+        --color: var(--element-frost);
+      }
+      page[home] element-list icon[fire] {
+        --color: var(--element-fire);
+      }
+
+      page[home] faq-cta {
+        display: flex;
+        margin-top: calc(var(--unit) * 1);
+      }
+
+      page[home] faq-body p {
+        margin: 0;
+      }
+
+      page[home] faq-body a {
+        color: var(--primary);
+      }
+
+      page[home] [guide-steps] {
+        margin: 0;
+        padding-inline-start: calc(var(--unit) * 5);
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--unit) * 1.5);
+        line-height: 1.5;
+      }
+
+      @media (width <= 768px) {
+        page[home] home-hero {
+          padding: calc(var(--unit) * 4);
+        }
+
+        page[home] home-hero h1 {
+          font-size: calc(var(--unit) * 7);
+        }
+
+        page[home] [hero-tagline] {
+          font-size: calc(var(--unit) * 3.5);
+        }
+
+        page[home] [how-to-heading] {
+          font-size: calc(var(--unit) * 5);
+        }
+
+        page[home] .faq-toggle {
+          font-size: calc(var(--unit) * 3.5);
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/medicum.html b/pages/medicum.html
new file mode 100644
index 00000000..0cef0d7a
--- /dev/null
+++ b/pages/medicum.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { initFightSlots } from '/js/fightSlots.js';
+
+      // One brewer for now; bump this to open more Medicum slots later.
+      const allowedNumberOfBrawlers = 2;
+      $.maxBrawlers = allowedNumberOfBrawlers;
+      initFightSlots({ trailing: true });
+
+      const assignBrewers = (uuids) =>
+        ($.buildings = {
+          ...$.buildings,
+          medicum: { ...$.buildings.medicum, assignedBrawlers: uuids },
+        });
+
+      // Mirror the slot selection into buildings.medicum.assignedBrawlers *synchronously*
+      // — in the same update batch as the selection change (every select/deselect calls
+      // updateFightSlots). Syncing via afterUpdate instead lagged a render, so on deselect
+      // the card-hand briefly saw selectedBrawlers=[] while the slot was still set — a stale
+      // 1-card frame that collapsed the fan. Wrapping it here keeps the hand a clean 2→1→2.
+      const baseUpdateFightSlots = window.updateFightSlots;
+      window.updateFightSlots = () => {
+        const prev = $.buildings.medicum.assignedBrawlers;
+        const next = [...$.selectedBrawlers];
+        assignBrewers(next);
+        // Reassign the roster so the sidebar's keyed brawler list re-evaluates
+        // isPotionBrewer() — Vibe won't re-run that reference-gated binding on a bare
+        // nested change, so the busy/greyed treatment lagged until a reload.
+        if (next.join() !== prev.join()) $.characters = [...$.characters];
+        baseUpdateFightSlots();
+      };
+
+      // Seed the slots from the persisted brewers once game state has loaded. Brewers
+      // whose brawlers no longer exist (a season reset swaps the roster for fresh uuids
+      // while the assignment lingers) would seed phantom selections — flipping the
+      // card-hand and greying every real brawler with no slot to remove. Keep only the
+      // brawlers still in the roster so the bar resets cleanly.
+      let seeded = false;
+      $.on('afterUpdate', (current) => {
+        if (seeded || !current.gameStateLoaded) return;
+        seeded = true;
+        const present = current.buildings.medicum.assignedBrawlers.filter((uuid) =>
+          current.characters.some((c) => c.uuid === uuid),
+        );
+        if (present.length) {
+          $.selectedBrawlers = present;
+          updateFightSlots();
+        } else if (current.buildings.medicum.assignedBrawlers.length) {
+          assignBrewers([]);
+        }
+      });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <!-- if accountRewards >= 5 -->
+          <component src="/components/MedicumContent.html"></component>
+        <!-- else -->
+          <component src="/components/PageNotFound.html"></component>
+        <!-- /if -->
+      </page-content>
+
+      <!-- if accountRewards >= 5 -->
+        <component
+          src="/components/ActivityBar.html"
+          activeHint="Brewing in progress — remove the brawler with the ✕ to stop."
+          pickHint="Pick a brawler below to start brewing potions."
+          recruitHint="Recruit a brawler first to brew potions here."
+        ></component>
+      <!-- /if -->
+    </component>
+  </body>
+</html>
diff --git a/pages/palaestra.html b/pages/palaestra.html
new file mode 100644
index 00000000..a29e60dd
--- /dev/null
+++ b/pages/palaestra.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { initFightSlots } from '/js/fightSlots.js';
+
+      // One trainer for now; bump this to open more Palaestra slots later.
+      const allowedNumberOfBrawlers = 1;
+      $.maxBrawlers = allowedNumberOfBrawlers;
+      initFightSlots({ trailing: true });
+
+      const assignTrainers = (uuids) =>
+        ($.buildings = {
+          ...$.buildings,
+          palaestra: { ...$.buildings.palaestra, assignedBrawlers: uuids },
+        });
+
+      // Mirror the slot selection into buildings.palaestra.assignedBrawlers
+      // *synchronously* — in the same update batch as the selection change (every
+      // select/deselect calls updateFightSlots). Syncing via afterUpdate instead lagged
+      // a render, so on deselect the card-hand briefly saw selectedBrawlers=[] while the
+      // slot was still set — a stale 1-card frame that collapsed the fan.
+      const baseUpdateFightSlots = window.updateFightSlots;
+      window.updateFightSlots = () => {
+        const prev = $.buildings.palaestra.assignedBrawlers;
+        const next = [...$.selectedBrawlers];
+        assignTrainers(next);
+        // Reassign the roster so the sidebar's keyed brawler list re-evaluates
+        // isPalaestraTrainer() — Vibe won't re-run that reference-gated binding on a bare
+        // nested change, so the busy/greyed treatment lagged until a reload.
+        if (next.join() !== prev.join()) $.characters = [...$.characters];
+        baseUpdateFightSlots();
+      };
+
+      // Seed the slots from the persisted trainers once game state has loaded. Trainers
+      // whose brawlers no longer exist (a season reset swaps the roster for fresh uuids
+      // while the assignment lingers) would seed phantom selections — flipping the
+      // card-hand and greying every real brawler with no slot to remove. Keep only the
+      // brawlers still in the roster so the bar resets cleanly.
+      let seeded = false;
+      $.on('afterUpdate', (current) => {
+        if (seeded || !current.gameStateLoaded) return;
+        seeded = true;
+        const present = current.buildings.palaestra.assignedBrawlers.filter((uuid) =>
+          current.characters.some((c) => c.uuid === uuid),
+        );
+        if (present.length) {
+          $.selectedBrawlers = present;
+          updateFightSlots();
+        } else if (current.buildings.palaestra.assignedBrawlers.length) {
+          assignTrainers([]);
+        }
+      });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <!-- if accountRewards >= 10 -->
+          <component src="/components/PalaestraContent.html"></component>
+        <!-- else -->
+          <component src="/components/PageNotFound.html"></component>
+        <!-- /if -->
+      </page-content>
+
+      <!-- if accountRewards >= 10 -->
+        <component
+          src="/components/ActivityBar.html"
+          activeHint="Training in progress — remove the brawler with the ✕ to stop."
+          pickHint="Pick a brawler below to start training."
+          recruitHint="Recruit a brawler first to train here."
+        ></component>
+      <!-- /if -->
+    </component>
+  </body>
+</html>
diff --git a/pages/pve.html b/pages/pve.html
new file mode 100644
index 00000000..c9fc4305
--- /dev/null
+++ b/pages/pve.html
@@ -0,0 +1,576 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { seasonArena } from '/js/seasonArena.js';
+      import CHARACTERS from '/js/constants/CHARACTERS.js';
+      import { ELEMENT_KEYS } from '/js/constants/ELEMENTS.js';
+      import { getExperienceReward } from '/js/level.js';
+      import { runCombatSimulations } from '/js/utils.js';
+      import {
+        centerOddOneOut,
+        pickOddOneOut,
+        fightLevelText,
+        isFightLocked,
+        isFightOutleveled,
+      } from '/js/helpers.js';
+
+      const SIMULATION_COUNT = 10;
+
+      // seasonArena already pins each enemy to its slot level, count-scale and boss flag,
+      // so here we only hydrate the preview art and compute the XP/level text per fight.
+      const decorate = (fight) => {
+        const enemyMeta = fight.characters.map((ref) => {
+          try {
+            const hydrated = CHARACTERS(ref, true);
+            return {
+              ref,
+              id: ref.id,
+              image: hydrated.image,
+              name: hydrated.name,
+              size: hydrated.size,
+              humanoid: hydrated.type === 'humanoid',
+              power: hydrated.power ?? 1,
+            };
+          } catch {
+            return { ref, id: ref.id, image: '', name: '?', size: 1, humanoid: false, power: 1 };
+          }
+        });
+        // The strongest foe (highest power) anchors the far right at full size; every
+        // weaker foe shrinks to 75%. Element-themed art lives under /<element>/, so a
+        // foe filed there (god, elemental dragon, frost mammoth…) tints the row's hover
+        // + glow with that element; plain humanoids keep the default gold.
+        const maxPower = Math.max(...enemyMeta.map((e) => e.power));
+        const main = enemyMeta.reduce((a, b) => (b.power > a.power ? b : a));
+        const element = ELEMENT_KEYS.find((k) => (main.image || '').split('/').includes(k)) || '';
+        const enemies = [...enemyMeta].sort((a, b) => a.power - b.power);
+        // The strongest foe (last after the sort) anchors the far right. When several
+        // share the top power, feature the same foe the fight page puts on top: its
+        // lone "odd one out" if there is one, otherwise the first-authored foe.
+        const top = enemies.filter((e) => e.power === maxPower);
+        const anchor = top.length > 1 && (pickOddOneOut(top) || top[0]);
+        if (anchor) {
+          enemies.splice(enemies.indexOf(anchor), 1);
+          enemies.push(anchor);
+        }
+        enemies.forEach((e, idx) => {
+          e.small = e.power < maxPower;
+          e.key = `${e.id}-${idx}`;
+        });
+        const enemyRefs = centerOddOneOut(enemyMeta).map((m) => m.ref);
+        return {
+          id: fight.id,
+          name: fight.name,
+          minLevel: fight.minLevel,
+          maxLevel: fight.maxLevel,
+          levelText: fightLevelText(fight),
+          boss: fight.boss,
+          element,
+          maxBrawlers: fight.maxBrawlers,
+          xp: getExperienceReward(fight.minLevel, fight.maxLevel, fight.boss),
+          enemies,
+          enemyRefs,
+          winPercent: null,
+        };
+      };
+
+      let currentArena = [];
+      let baseFights = [];
+
+      // Win % needs a combat simulation per fight, which is heavy for a large
+      // roster. Render the arena immediately (winPercent null → placeholder),
+      // then fill the fights in during browser idle time so the calculations
+      // never block navigation or the main thread.
+      let winPercentHandle = null;
+      const computeWinPercents = () => {
+        if (winPercentHandle !== null) {
+          cancelIdleCallback(winPercentHandle);
+          winPercentHandle = null;
+        }
+
+        const ally = $.characters[0];
+        // Plain working copy: the combat sim structuredClones its inputs, which
+        // fails on a reactive proxy — so simulate against this plain array and
+        // publish it to $.arenaFights after each idle slice (a fresh array
+        // reference is what makes the <!-- each --> list re-render).
+        const working = baseFights.map((fight) => ({ ...fight }));
+        $.arenaFights = working.map((fight) => ({ ...fight }));
+        if (!ally) return;
+
+        const allyClone = JSON.parse(JSON.stringify(ally));
+        let i = 0;
+        const step = (deadline) => {
+          do {
+            const fight = working[i];
+            fight.winPercent =
+              (runCombatSimulations(
+                SIMULATION_COUNT,
+                [allyClone],
+                fight.enemyRefs,
+                undefined,
+                fight.id,
+              ) /
+                SIMULATION_COUNT) *
+              100;
+            i++;
+          } while (i < working.length && deadline.timeRemaining() > 1);
+
+          if (i < working.length) {
+            winPercentHandle = requestIdleCallback(step, { timeout: 200 });
+          } else {
+            // Publish once, after all sims finish, so the heavy list re-render
+            // happens a single time instead of on every idle slice. The page
+            // stays interactive while the sims run in idle gaps.
+            $.arenaFights = working.map((fight) => ({ ...fight }));
+            winPercentHandle = null;
+          }
+        };
+        winPercentHandle = requestIdleCallback(step, { timeout: 200 });
+      };
+
+      // The arena ladder is a pure function of the season seed, so a season change (incl.
+      // the DevBar jump) rebuilds + reshuffles it client-side, no server call.
+      const buildArena = () => {
+        if (!$.season) return;
+        currentArena = seasonArena($.season);
+        baseFights = currentArena.map(decorate);
+        $.arenaFights = baseFights;
+        if ($.gameStateLoaded) computeWinPercents();
+      };
+
+      buildArena();
+      $.on('afterUpdate', (current, prev) => {
+        if (current.season !== prev.season) buildArena();
+        else if (current.gameStateLoaded && current.characters !== prev.characters) {
+          computeWinPercents();
+        }
+      });
+
+      // A boss-unlock redirect (see claimCombatReward) lands here with the unlocked
+      // level in the hash. Clear it immediately so a refresh won't re-announce, then
+      // toast once game state has loaded. The toast is deferred to the next idle frame
+      // (requestIdleCallback): the arena's first data render is a multi-second main-
+      // thread block, and a toast fired before it paints is auto-dismissed unseen. An
+      // idle callback can't run during that block, so it lands once the arena settles.
+      // TODO(vibe): swap for `$.on('settled', …)` once Vibe exposes an app-quiesced
+      // lifecycle event — see webdev/vibe ROADMAP. This is a local hand-rolled idle.
+      const unlockedLevel = location.hash.match(/^#unlocked=(\d+)$/)?.[1];
+      if (unlockedLevel) {
+        history.replaceState(null, '', location.pathname + location.search);
+        const announceUnlock = () =>
+          requestIdleCallback(
+            () => notify.success(`You've unlocked more fights for level ${unlockedLevel}+`),
+            { timeout: 2000 },
+          );
+        if ($.gameStateLoaded) announceUnlock();
+        else {
+          let announced = false;
+          $.on('afterUpdate', (current) => {
+            if (announced || !current.gameStateLoaded) return;
+            announced = true;
+            announceUnlock();
+          });
+        }
+      }
+
+      window.fightLocked = (fight, bossHighscore, settings) =>
+        isFightLocked(fight, currentArena, bossHighscore, settings?.isTester);
+
+      window.arenaClick = (e, fight) => {
+        const locked = fightLocked(fight, $.bossHighscore, $.settings);
+        const bossCompleted = fight.boss && $.bossHighscore >= fight.minLevel;
+        if (locked || bossCompleted) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+
+      window.filterArenaFights = (fights, forMyLevel, experience) => {
+        if (!forMyLevel) return fights || [];
+        return (fights || []).filter(
+          (fight) => !isFightOutleveled(fight, experience, $.bossHighscore),
+        );
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component
+          src="/components/TitleBar.html"
+          title="@[bossHighscore >= 15 ? 'The Wild' : 'The Arena']"
+        >
+          <!-- if getLevelByExperience($.experience) >= 5 -->
+            <component
+              src="/components/LabeledSwitch.html"
+              label="For my level"
+              checked="@[forMyLevel]"
+              onchange="$.forMyLevel = this.checked"
+            >
+            </component>
+          <!-- /if -->
+        </component>
+        <hr />
+
+        <game-table>
+          <crow game-table-header>
+            <arena-col-name>name</arena-col-name>
+            <arena-col-level text-center>level</arena-col-level>
+            <arena-col-loot>xp</arena-col-loot>
+            <!-- if settings.isTester -->
+              <arena-col-win text-right>win</arena-col-win>
+            <!-- /if -->
+            <crow arena-col-preview right></crow>
+          </crow>
+
+          <!-- each filterArenaFights(arenaFights, forMyLevel, experience) as fight, i -->
+            <a
+              href="/pve/@[fight.id]"
+              onclick="arenaClick(event, fight)"
+              game-table-row
+              @[fight.element]
+              even="@[i % 2 === 0]"
+              boss="@[fight.boss]"
+              locked="@[fightLocked(fight, $.bossHighscore, settings)]"
+              completed="@[fight.boss && $.bossHighscore >= fight.minLevel]"
+            >
+              <crow left arena-col-name cinzel g="2">
+                <!-- if fightLocked(fight, $.bossHighscore, settings) -->
+                  <span fight-locked-dash>—</span>
+                <!-- /if -->
+                <!-- if !fightLocked(fight, $.bossHighscore, settings) -->
+                  <span fight-name>@[fight.name]</span>
+                <!-- /if -->
+                <crow g="2" ml="auto">
+                  <!-- if fight.boss && $.bossHighscore >= fight.minLevel -->
+                    <badge green>DEFEATED</badge>
+                  <!-- else -->
+                    <component
+                      src="/components/MatchupBadge.html"
+                      ours="@[fight.maxBrawlers]"
+                      theirs="@[fight.enemies.length]"
+                    ></component>
+                    <!-- if fight.boss -->
+                      <badge red>BOSS FIGHT</badge>
+                    <!-- /if -->
+                  <!-- /if -->
+                </crow>
+              </crow>
+
+              <arena-col-level text-center text-sm> @[fight.levelText] </arena-col-level>
+
+              <arena-col-loot text-sm>
+                <!-- if fight.levelText === '25+' -->
+                  <span>—</span>
+                <!-- /if -->
+                <!-- if fight.levelText !== '25+' && getLevelByExperience($.experience) > fight.maxLevel -->
+                  <span arena-xp-dimmed>@[fight.xp] XP</span>
+                <!-- /if -->
+                <!-- if fight.levelText !== '25+' && getLevelByExperience($.experience) <= fight.maxLevel -->
+                  <span>@[fight.xp] XP</span>
+                <!-- /if -->
+              </arena-col-loot>
+
+              <!-- if settings.isTester -->
+                <arena-col-win text-right text-sm>
+                  <!-- if fight.winPercent !== null -->
+                    @[fight.winPercent]%
+                  <!-- /if -->
+                  <!-- if fight.winPercent === null -->
+                    —
+                  <!-- /if -->
+                </arena-col-win>
+              <!-- /if -->
+
+              <crow arena-col-preview right>
+                <!-- if fightLocked(fight, $.bossHighscore, settings) -->
+                  <crow arena-enemy-lock-slot>
+                    <crow arena-enemy-locked boss="@[fight.boss]">?</crow>
+                  </crow>
+                <!-- /if -->
+                <!-- if !fightLocked(fight, $.bossHighscore, settings) -->
+                  <!-- each fight.enemies as enemy (enemy.key) -->
+                    <arena-enemy-wrap small="@[enemy.small]">
+                      <crow arena-enemy-box>
+                        <img
+                          data-src="/static/images/races/@[enemy.image]"
+                          alt=""
+                          arena-enemy-img
+                          completed="@[fight.boss && $.bossHighscore >= fight.minLevel]"
+                        />
+                      </crow>
+                    </arena-enemy-wrap>
+                  <!-- /each -->
+                <!-- /if -->
+              </crow>
+            </a>
+          <!-- /each -->
+        </game-table>
+      </page-content>
+    </component>
+    <style>
+      page[pve] arena-col-name,
+      page[pve] [arena-col-name] {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+      }
+
+      page[pve] [arena-col-name] [fight-name] {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+
+      page[pve] arena-col-level {
+        display: block;
+        width: calc(var(--unit) * 12);
+        flex: none;
+      }
+
+      page[pve] arena-col-loot {
+        display: block;
+        width: calc(var(--unit) * 12);
+        flex: none;
+      }
+
+      page[pve] arena-col-win {
+        display: block;
+        width: calc(var(--unit) * 12);
+        flex: none;
+      }
+
+      page[pve] [arena-col-preview] {
+        width: calc(var(--unit) * 30);
+        flex: none;
+        align-self: stretch;
+        align-items: stretch;
+        margin-block: calc(var(--unit) * -3);
+        margin-right: calc(var(--unit) * -6);
+      }
+
+      page[pve] [game-table-row][boss] [arena-col-preview] {
+        margin-block: calc(var(--unit) * -8);
+      }
+
+      page[pve] [game-table-row] {
+        overflow: hidden;
+      }
+
+      page[pve] [game-table-row] arena-col-level,
+      page[pve] [game-table-row] arena-col-loot,
+      page[pve] [game-table-row] arena-col-win {
+        font-variant-numeric: tabular-nums;
+        color: var(--muted-foreground);
+      }
+
+      page[pve] [game-table-row][boss] {
+        padding-top: calc(var(--unit) * 8);
+        padding-bottom: calc(var(--unit) * 8);
+        margin-inline: calc(var(--unit) * -1);
+        width: calc(100% + var(--unit) * 2);
+        border-bottom: 0;
+        border-radius: calc(var(--unit) * 1);
+        background:
+          linear-gradient(
+            90deg,
+            oklch(from var(--gold-warm) l c h / 0.16),
+            oklch(from var(--gold-warm) l c h / 0.04)
+          ),
+          var(--card);
+        box-shadow: 0 calc(var(--unit) * 0.5) calc(var(--unit) * 3)
+          oklch(from var(--black) l c h / 0.16);
+      }
+
+      page[pve] [game-table-row][boss] [arena-col-name] {
+        padding-left: calc(var(--unit) * 1);
+      }
+
+      page[pve] [game-table-row][boss][locked] {
+        margin-inline: 0;
+        width: 100%;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      page[pve] [game-table-row][boss][locked] [arena-col-name] {
+        padding-left: 0;
+      }
+
+      page[pve] [game-table-row][boss] [fight-name] {
+        color: var(--gold-deep);
+        font-size: calc(var(--unit) * 5);
+      }
+
+      page[pve] [game-table-row]:not([boss]) + [game-table-row][boss] {
+        margin-top: calc(var(--unit) * 12);
+      }
+
+      page[pve] [game-table-row] {
+        --row-accent: var(--element-color, var(--c-accent));
+        --portrait-glow: oklch(from var(--card) l c h / 0.55);
+      }
+
+      page[pve] [game-table-row]:not([locked]):not([completed]):hover {
+        background: oklch(from var(--row-accent) l c h / 0.1);
+        box-shadow: inset calc(var(--unit) * 0.5) 0 0 oklch(from var(--row-accent) l c h / 0.55);
+      }
+
+      page[pve] [game-table-row][boss]:not([locked]):not([completed]):hover {
+        background:
+          linear-gradient(
+            0deg,
+            oklch(from var(--row-accent) l c h / 0.18),
+            oklch(from var(--row-accent) l c h / 0.18)
+          ),
+          var(--card);
+        box-shadow:
+          inset calc(var(--unit) * 0.75) 0 0 oklch(from var(--row-accent) l c h / 0.55),
+          0 calc(var(--unit) * 0.5) calc(var(--unit) * 3) oklch(from var(--black) l c h / 0.2);
+      }
+
+      page[pve]
+        [game-table-row]:is([fire], [frost], [earth], [nature], [lightning]):not([locked]):not(
+          [completed]
+        ):hover
+        [fight-name] {
+        color: oklch(from var(--element-color) calc(l * 0.7) c h);
+      }
+
+      page[pve] [game-table-row][locked] {
+        opacity: 0.5;
+        cursor: default;
+      }
+
+      page[pve] [game-table-row][completed] {
+        cursor: default;
+      }
+
+      page[pve] [game-table-row][completed] [fight-name] {
+        text-decoration: line-through;
+      }
+
+      page[pve] [arena-xp-dimmed] {
+        color: var(--muted-foreground);
+        text-decoration: line-through;
+      }
+
+      page[pve] arena-enemy-wrap {
+        display: flex;
+        align-items: stretch;
+        flex: none;
+        margin-left: calc(var(--unit) * -4.5);
+      }
+
+      page[pve] arena-enemy-wrap[small] {
+        align-items: flex-end;
+      }
+
+      page[pve] [arena-enemy-box] {
+        aspect-ratio: 1;
+        border-radius: 0;
+        position: relative;
+      }
+
+      page[pve] [arena-enemy-box]::before {
+        content: '';
+        position: absolute;
+        inset: -22%;
+        background: radial-gradient(
+          circle,
+          var(--portrait-glow),
+          oklch(from var(--card) l c h / 0) 70%
+        );
+        transform: translateY(18%);
+        pointer-events: none;
+      }
+
+      page[pve] [arena-enemy-lock-slot] {
+        width: calc(var(--unit) * 12);
+        aspect-ratio: 1;
+        flex: none;
+        align-self: center;
+        display: grid;
+        place-items: center;
+        margin-right: calc(var(--unit) * 6);
+      }
+
+      page[pve] [arena-enemy-locked] {
+        width: calc(var(--unit) * 5);
+        flex: none;
+        align-self: center;
+        border-radius: 50%;
+        background: var(--scrim-2);
+        font-weight: bold;
+        color: white;
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(var(--unit) * 3);
+      }
+
+      page[pve] [arena-enemy-locked][boss] {
+        width: calc(var(--unit) * 10);
+        font-size: calc(var(--unit) * 6);
+      }
+
+      page[pve] [arena-enemy-img] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 130%;
+        max-width: none;
+        height: auto;
+        transform: scaleX(-1);
+      }
+
+      page[pve] arena-enemy-wrap[small] [arena-enemy-box] {
+        height: 75%;
+        max-height: calc(var(--unit) * 12);
+      }
+
+      page[pve] [arena-enemy-img][completed] {
+        filter: grayscale(1);
+      }
+
+      @media (width <= 480px) {
+        page[pve] [game-table-header],
+        page[pve] [game-table-row] {
+          gap: calc(var(--unit) * 2);
+          padding: calc(var(--unit) * 3) calc(var(--unit) * 6) calc(var(--unit) * 3)
+            calc(var(--unit) * 3);
+        }
+
+        page[pve] arena-col-level,
+        page[pve] arena-col-loot,
+        page[pve] arena-col-win {
+          width: calc(var(--unit) * 10);
+        }
+
+        page[pve] [game-table-row][boss] {
+          padding-top: calc(var(--unit) * 4);
+          padding-bottom: calc(var(--unit) * 4);
+        }
+
+        page[pve] [game-table-row]:not([boss]) + [game-table-row][boss] {
+          margin-top: calc(var(--unit) * 6);
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/pve/$id.html b/pages/pve/$id.html
new file mode 100644
index 00000000..686069a5
--- /dev/null
+++ b/pages/pve/$id.html
@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <component src="/components/FightDetailContent.html"></component>
+    </component>
+    <style>
+      @property --feet-lift {
+        syntax: '<number>';
+        inherits: false;
+        initial-value: 1;
+      }
+
+      page[pve-id] [fight-enemy-row] {
+        align-items: stretch;
+        overflow: visible;
+        position: relative;
+        anchor-scope: --ability-bar;
+        transition: padding-right 200ms ease-out;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] {
+        padding-right: calc(var(--unit) * 26);
+      }
+
+      page[pve-id] fight-info-inner {
+        padding-right: 42%;
+        transition: padding-right 200ms ease-out;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] fight-info-inner {
+        padding-right: 0;
+      }
+
+      page[pve-id] [fight-info-col] {
+        flex: 1;
+        min-width: 0;
+        justify-content: space-between;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] [fight-info-col] {
+        justify-content: center;
+      }
+
+      page[pve-id] fight-side-stats {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 0;
+        opacity: 0;
+        transition:
+          width 200ms ease-out,
+          opacity 200ms ease-out;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] fight-side-stats {
+        width: calc(var(--unit) * 24);
+        opacity: 1;
+      }
+
+      page[pve-id] accordion[fight-info] {
+        grid-template-rows: 1fr;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] accordion[fight-info] {
+        grid-template-rows: 0fr;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] [ability-bar-row] {
+        gap: 0;
+      }
+
+      page[pve-id] fight-enemy-portrait {
+        position: absolute;
+        inset: 0 0 0 auto;
+        width: 40%;
+        display: flex;
+        margin-bottom: calc(
+          (anchor-size(--ability-bar height, 0px) + var(--unit) * 3) * var(--feet-lift)
+        );
+        transition:
+          --feet-lift 200ms ease-out,
+          width 200ms ease-out;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] fight-enemy-portrait {
+        width: calc(var(--unit) * 24);
+        --feet-lift: 0;
+      }
+
+      page[pve-id] fight-enemy-image {
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        transform: scaleX(-1);
+        overflow: visible;
+      }
+
+      page[pve-id] fight-enemy-image char-portrait {
+        position: relative;
+        aspect-ratio: auto;
+        width: 100%;
+        height: 100%;
+      }
+
+      page[pve-id] [fight-enemy-row] ability-bar {
+        anchor-name: --ability-bar;
+      }
+
+      page[pve-id] [fight-enemy-row][packmate] ability-cell {
+        aspect-ratio: 2 / 2.25;
+      }
+
+      page[pve-id] fight-enemy-image [portrait-img] {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: calc(110% * (0.5 + var(--char-size, 1) * 0.5));
+        max-height: 110%;
+        max-width: 110%;
+        transform: translateX(0);
+        transition:
+          left 200ms ease-out,
+          transform 200ms ease-out;
+      }
+
+      page[pve-id] [fight-enemy-row][collapsed] fight-enemy-image [portrait-img] {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      @media (width <= 768px) {
+        page[pve-id] fight-enemy-portrait {
+          width: 38%;
+        }
+
+        page[pve-id] fight-info-inner {
+          padding-right: 40%;
+        }
+
+        page[pve-id] [fight-enemy-row][collapsed] fight-enemy-portrait {
+          width: calc(var(--unit) * 18);
+        }
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/pvp.html b/pages/pvp.html
new file mode 100644
index 00000000..995110d9
--- /dev/null
+++ b/pages/pvp.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import {
+        getLevelByExperience,
+        getExperienceRangeForLevel,
+        allowedNumberOfBrawlers,
+      } from '/js/level.js';
+      import { generateCombat, healFull, prepareTeams } from '/js/combat.js';
+      import { initFightSlots } from '/js/fightSlots.js';
+
+      // Team size tracks the recruit cap (accountRewards) rather than experience
+      // level, so you can always field every brawler you've recruited instead of
+      // owning brawlers the level gate won't let you deploy.
+      $.maxBrawlers = allowedNumberOfBrawlers();
+
+      initFightSlots({ trailing: true });
+
+      $.on('afterUpdate', (current, prev) => {
+        if (current.accountRewards !== prev.accountRewards)
+          $.maxBrawlers = allowedNumberOfBrawlers();
+      });
+
+      window.runPvpCombat = async () => {
+        const selected = $.characters.filter((c) => $.selectedBrawlers.includes(c.uuid));
+
+        if (selected.length === 0) {
+          notify.warning('Select at least one brawler');
+          return;
+        }
+
+        try {
+          const level = getLevelByExperience($.experience);
+          const { minXp, maxXp } = getExperienceRangeForLevel(level);
+
+          const opponents = await $.socket.sendAsync('pvp/get-random-opponent', {
+            token: $.token,
+            timeOffset: $.clock.devOffset || 0,
+            count: selected.length,
+            minXp,
+            maxXp,
+          });
+
+          if (!opponents?.length) {
+            notify.warning('No opponents found');
+            return;
+          }
+
+          const myCharacters = JSON.parse(JSON.stringify(selected));
+          $.selectedBrawlers = [];
+          $.combat = {
+            ...generateCombat(
+              prepareTeams(myCharacters, healFull(opponents.slice(0, myCharacters.length))),
+              ($.settings?.isTester && $.testerSeed) || undefined,
+            ),
+            context: 'pvp',
+          };
+          $.overlay = { name: 'Combat' };
+        } catch ({ error }) {
+          notify.error(error || 'Failed to find opponent');
+        }
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Random duel">
+          <crow right f="1" g="2">
+            <component
+              src="/components/MatchupBadge.html"
+              ours="@[selectedBrawlers.length || 'X']"
+              theirs="@[selectedBrawlers.length || 'X']"
+              always
+            ></component>
+          </crow>
+        </component>
+        <hr />
+
+        <crow py="4">
+          <mystery-frame f="none">
+            <component src="/components/Mystery.html"></component>
+          </mystery-frame>
+        </crow>
+
+        <component
+          src="/components/BrawlerSlotList.html"
+          slots="@[brawlerSlots]"
+          mt="6"
+        ></component>
+      </page-content>
+
+      <component src="/components/FightButton.html" onclick="runPvpCombat()"></component>
+    </component>
+    <style>
+      page[pvp] mystery-frame {
+        width: calc(var(--unit) * 40);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/reset-password/$secret.html b/pages/reset-password/$secret.html
new file mode 100644
index 00000000..d74fd6e6
--- /dev/null
+++ b/pages/reset-password/$secret.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/ResetPasswordContent.html"></component>
+      </page-content>
+    </component>
+    <style>
+      page[reset-password-secret] {
+        display: block;
+        max-width: calc(var(--unit) * 100);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/statistics.html b/pages/statistics.html
new file mode 100644
index 00000000..a152d8ef
--- /dev/null
+++ b/pages/statistics.html
@@ -0,0 +1,380 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { ALL_FIGHTS } from '/js/constants/FIGHTS.js';
+      import { ALL_CHARACTERS } from '/js/constants/CHARACTERS.js';
+      import { mergeStats } from '/js/utils.js';
+
+      const FIGHT_NAME = Object.fromEntries(ALL_FIGHTS.map((f) => [f.id, f.name]));
+      const cap = (s) => `${String(s).charAt(0).toUpperCase()}${String(s).slice(1)}`;
+
+      // Friendly labels for the fixed taxonomy keys. Default is the raw key.
+      const LABELS = {
+        combat: 'Combat',
+        pve: 'PvE',
+        pvp: 'PvP',
+        wins: 'Wins',
+        losses: 'Losses',
+        winsBoss: 'Boss wins',
+        fights: 'Fights',
+        randomDuel: 'Random duels',
+        damage: 'Damage',
+        dealt: 'Dealt',
+        received: 'Received',
+        largest: 'Largest',
+        heal: 'Heal',
+        economy: 'Economy',
+        crystals: 'Crystals',
+        earned: 'Earned',
+        spent: 'Spent',
+        cloth: 'Fabric',
+        wood: 'Wood',
+        leather: 'Hide',
+        steel: 'Metal',
+        loot: 'Loot',
+        luck: 'Luck',
+        successes: 'Successes',
+        fails: 'Fails',
+        success: 'Dropped',
+        fail: 'Missed',
+        equipment: 'Equipment',
+        materials: 'Materials',
+        amount: 'Amount',
+        loadout: 'Loadout',
+        sequence: 'Sequence',
+        ability: 'Ability',
+        added: 'Added',
+        removed: 'Removed',
+        reordered: 'Reordered',
+        brawlers: 'Brawlers',
+        recruited: 'Recruited',
+        retired: 'Retired',
+        medicum: 'Medicum',
+        potions: 'Potions',
+        brewed: 'Brewed',
+        consumed: 'Consumed',
+        palaestra: 'Palaestra',
+        experience: 'Experience',
+        gained: 'Gained',
+        progression: 'Progression',
+        accountRewards: 'Account rewards',
+        level: 'Level',
+        bossHighscore: 'Boss highscore',
+        social: 'Social',
+        teamplay: 'Teamplay',
+        created: 'Created',
+      };
+
+      // Page-local display overrides: a path pattern (with '*' matching one dynamic
+      // segment) maps to a key renderer so stored values stay raw/opaque while the UI
+      // shows something meaningful — e.g. a raw drop chance shown as its rarity word.
+      const RENDER = {
+        'combat.pve.wins.*': (id) => FIGHT_NAME[id] ?? id,
+        'combat.pve.losses.*': (id) => FIGHT_NAME[id] ?? id,
+        'loot.luck.*': (c) => cap(c),
+        'brawlers.recruited.*': (id) => ALL_CHARACTERS[id]?.name ?? id,
+        'brawlers.retired.*': (id) => ALL_CHARACTERS[id]?.name ?? id,
+      };
+
+      const matchPath = (pattern, path) => {
+        const p = pattern.split('.');
+        return p.length === path.length && p.every((seg, i) => seg === '*' || seg === path[i]);
+      };
+
+      const labelFor = (path) => {
+        const key = path[path.length - 1];
+        for (const [pattern, fn] of Object.entries(RENDER))
+          if (matchPath(pattern, path)) return fn(key);
+        return LABELS[key] ?? key;
+      };
+
+      // Walk the primary (a) and comparison (b) trees in parallel by the union of
+      // their keys, so a stat present in only one season still shows (0 on the other).
+      const childKeys = (a, b) => [
+        ...new Set([
+          ...(a?.nodes ? Object.keys(a.nodes) : []),
+          ...(b?.nodes ? Object.keys(b.nodes) : []),
+        ]),
+      ];
+      const isLeaf = (a, b) => childKeys(a, b).length === 0;
+      const leafNum = (n) =>
+        typeof n === 'number' ? n : n ? (n.max !== undefined ? n.max : n.count) : undefined;
+
+      // Some stats are stored finer-grained than shown (crystals are tracked in
+      // hundredths). Divide by the path's scale before formatting.
+      const SCALE = { 'economy.crystals.*': 100 };
+      const scaleFor = (path) => {
+        for (const pattern of Object.keys(SCALE))
+          if (matchPath(pattern, path)) return SCALE[pattern];
+        return 1;
+      };
+      const fmt = (n, scale) => (n / scale).toLocaleString(undefined, { maximumFractionDigits: 2 });
+
+      // Leaf value cell: the bare number, or "x / y / diff" (diff coloured) when a
+      // comparison season is selected.
+      const valueCell = (a, b, scale = 1) => {
+        if (!comparing) {
+          const v = leafNum(a);
+          return v !== undefined ? fmt(v, scale) : '';
+        }
+        const x = leafNum(a) ?? 0;
+        const y = leafNum(b) ?? 0;
+        const z = x - y;
+        const tone = z > 0 ? 'pos' : z < 0 ? 'neg' : 'eq';
+        const sign = z > 0 ? '+' : '';
+        return `${fmt(x, scale)} / ${fmt(y, scale)} / <stat-diff ${tone}>${sign}${fmt(z, scale)}</stat-diff>`;
+      };
+
+      const sortKeys = (a, b, keys) =>
+        keys.sort(
+          (x, y) =>
+            (isLeaf(a?.nodes?.[x], b?.nodes?.[x]) ? 0 : 1) -
+            (isLeaf(a?.nodes?.[y], b?.nodes?.[y]) ? 0 : 1),
+        );
+
+      const renderNode = (a, b, path, depth) => {
+        const label = labelFor(path);
+        // Leaf: show its number (or comparison). Non-leaf: no number, expandable group.
+        if (isLeaf(a, b))
+          return `<stat-row leaf><stat-name>${label}</stat-name><stat-leader></stat-leader><stat-value>${valueCell(a, b, scaleFor(path))}</stat-value><stat-caret-spacer></stat-caret-spacer></stat-row>`;
+        const open = depth === 0;
+        // Primitives (direct values) first, branches after.
+        const children = sortKeys(a, b, childKeys(a, b))
+          .map((k) => renderNode(a?.nodes?.[k], b?.nodes?.[k], [...path, k], depth + 1))
+          .join('');
+        const o = open ? ' open' : '';
+        return `<stat-node><stat-row toggle${o}><stat-name>${label}</stat-name><stat-leader></stat-leader><stat-value></stat-value><icon chevron animate-y stat-caret${open ? ' toggled' : ''}></icon></stat-row><accordion${o}><accordion-content><stat-children>${children}</stat-children></accordion-content></accordion></stat-node>`;
+      };
+
+      const labelToSeason = (label) => {
+        const [y, m] = label.split('-').map(Number);
+        return window.seasonNumber(Date.UTC(y, m - 1, 1));
+      };
+
+      let data = {};
+      let selected = null;
+      let compareWith = 'none';
+      let comparing = false;
+      let ready = false;
+      let rendered = false;
+
+      const mergeAll = () => Object.values(data).reduce((a, t) => mergeStats(a, t), {});
+      const treeFor = (sel) => (sel === 'all' ? mergeAll() : data[sel] || {});
+
+      const renderTree = () => {
+        const tree = document.querySelector('stats-tree');
+        if (!tree) return false;
+        comparing = compareWith !== 'none';
+        const root = treeFor(selected);
+        const cmp = comparing ? treeFor(compareWith) : null;
+        const html = sortKeys(root, cmp, childKeys(root, cmp))
+          .map((k) => renderNode(root?.nodes?.[k], cmp?.nodes?.[k], [k], 0))
+          .join('');
+        tree.innerHTML = html || '<stats-empty>No statistics recorded yet.</stats-empty>';
+        return true;
+      };
+
+      const seasonOptions = (current, chosen) =>
+        labelsCache
+          .map(
+            (l) =>
+              `<option value="${l}"${l === chosen ? ' selected' : ''}>Season ${labelToSeason(l)}${l === current ? ' · current' : ''}</option>`,
+          )
+          .concat(`<option value="all"${chosen === 'all' ? ' selected' : ''}>All seasons</option>`)
+          .join('');
+
+      let labelsCache = [];
+
+      const buildControls = (current) => {
+        const primary = document.querySelector('select[stats-select]');
+        const compare = document.querySelector('select[stats-compare]');
+        if (!primary || !compare) return false;
+        primary.innerHTML = seasonOptions(current, selected);
+        compare.innerHTML =
+          `<option value="none"${compareWith === 'none' ? ' selected' : ''}>Compare with…</option>` +
+          seasonOptions(current, compareWith);
+        primary.onchange = () => {
+          selected = primary.value;
+          renderTree();
+        };
+        compare.onchange = () => {
+          compareWith = compare.value;
+          renderTree();
+        };
+        return true;
+      };
+
+      const init = () => {
+        labelsCache = Object.keys(data).sort().reverse();
+        const current = window.seasonLabel($.season);
+        if (selected === null) selected = data[current] ? current : labelsCache[0] || 'all';
+        return buildControls(current) && renderTree();
+      };
+
+      // Click a parent row → toggle its sibling accordion (and the caret).
+      window.toggleStatRow = (event) => {
+        const row = event.target.closest('stat-row[toggle]');
+        if (!row) return;
+        row.toggleAttribute('open');
+        row.nextElementSibling?.toggleAttribute('open');
+        row.querySelector('[stat-caret]')?.toggleAttribute('toggled');
+      };
+
+      let fetched = false;
+      $.on('afterUpdate', (current) => {
+        if (!fetched && current.gameStateLoaded && current.socket && current.token) {
+          fetched = true;
+          $.socket
+            .sendAsync('user/get-statistics', { token: current.token })
+            .then((res) => {
+              data = res.statistics || {};
+              ready = true;
+              rendered = init();
+            })
+            .catch((e) => window.notify?.(e?.error || 'Could not load statistics'));
+        }
+        // AuthGate mounts the page slot around auth time — render once it exists.
+        if (ready && !rendered) rendered = init();
+      });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Account statistics" back="/pve">
+          <crow g="2" f="none" stats-controls>
+            <label stats-field>
+              <select stats-select></select>
+            </label>
+            <label stats-field>
+              <select stats-compare></select>
+            </label>
+          </crow>
+        </component>
+        <hr />
+
+        <stats-tree onclick="toggleStatRow(event)"></stats-tree>
+      </page-content>
+    </component>
+
+    <style>
+      page[statistics] [stats-controls] {
+        flex-wrap: wrap;
+      }
+
+      page[statistics] [stats-field] {
+        min-width: calc(var(--unit) * 34);
+      }
+
+      stats-tree stat-diff[pos] {
+        color: var(--hue-green);
+      }
+
+      stats-tree stat-diff[neg] {
+        color: var(--hue-red);
+      }
+
+      stats-tree stat-diff[eq] {
+        color: var(--muted-foreground);
+      }
+
+      stats-tree {
+        display: block;
+        padding: calc(var(--unit) * 3);
+      }
+
+      stats-empty {
+        display: block;
+        padding: calc(var(--unit) * 6);
+        text-align: center;
+        color: var(--muted-foreground);
+      }
+
+      stats-tree stat-node {
+        display: block;
+      }
+
+      stats-tree stat-row {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--unit) * 2);
+        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
+        border-radius: var(--radius);
+      }
+
+      stats-tree stat-row[toggle] {
+        cursor: pointer;
+      }
+
+      stats-tree stat-row[toggle]:hover {
+        background: var(--sheen-2);
+      }
+
+      stats-tree stat-name {
+        flex: 0 1 auto;
+        color: var(--foreground);
+      }
+
+      stats-tree stat-row[leaf] stat-name {
+        color: var(--muted-foreground);
+      }
+
+      stats-tree stat-leader {
+        flex: 1 1 auto;
+        height: 0;
+        border-bottom: 1px dotted var(--muted-foreground);
+        opacity: 0.4;
+      }
+
+      stats-tree stat-value {
+        flex: none;
+        font-variant-numeric: tabular-nums;
+        color: var(--foreground);
+      }
+
+      stats-tree [stat-caret] {
+        flex: none;
+        font-size: calc(var(--unit) * 3.5);
+        color: var(--muted-foreground);
+      }
+
+      stats-tree stat-caret-spacer {
+        flex: none;
+        width: calc(var(--unit) * 3.5);
+      }
+
+      stats-tree accordion {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 200ms ease-out;
+      }
+
+      stats-tree accordion[open] {
+        grid-template-rows: 1fr;
+      }
+
+      stats-tree accordion > accordion-content {
+        overflow: hidden;
+      }
+
+      stats-tree stat-children {
+        display: block;
+        padding-left: calc(var(--unit) * 4);
+      }
+    </style>
+  </body>
+</html>
diff --git a/pages/teamplay.html b/pages/teamplay.html
new file mode 100644
index 00000000..5ed8f5e6
--- /dev/null
+++ b/pages/teamplay.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { subscribeLobby, fetchTeamplays } from '/js/teamplay.js';
+
+      // Subscribe to live lobby updates and pull the current active list once the
+      // socket is up (boot connects asynchronously after this script runs).
+      let started = false;
+      const start = () => {
+        if (started || !$.socket) return;
+        started = true;
+        subscribeLobby();
+        fetchTeamplays();
+      };
+
+      start();
+      $.on('afterUpdate', (current, prev) => {
+        if (current.socket && !prev.socket) start();
+      });
+
+      // One lobby per account: the live list carries every open/live teamplay with its
+      // host, so I already have one whenever a listed session is hosted by me. On window
+      // (not a module const) so the disabled binding can resolve it; its args are read in
+      // the binding expression so Vibe tracks the list + accountId as deps.
+      window.hostsTeamplay = (list, accountId) => (list || []).some((tp) => tp.host === accountId);
+
+      window.createTeamplayTooltip = (el) => {
+        if (hostsTeamplay($.pvp.teamplay.list, $.accountId))
+          showTooltip(
+            { description: 'You can only host one teamplay at a time', plain: true },
+            el,
+            {
+              direction: 'up',
+              lock: true,
+            },
+          );
+      };
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <component src="/components/TitleBar.html" title="Teamplay">
+          <crow right f="1" g="2">
+            <crow f="none" onmouseenter="createTeamplayTooltip(this)" onmouseleave="hideTooltip()">
+              <button
+                primary
+                disabled="@[hostsTeamplay(pvp.teamplay.list, accountId)]"
+                onclick="openCreateTeamplay()"
+              >
+                Create teamplay
+              </button>
+            </crow>
+          </crow>
+        </component>
+
+        <component src="/components/TeamplayListContent.html"></component>
+      </page-content>
+
+      <component src="/components/CreateTeamplayModal.html"></component>
+    </component>
+  </body>
+</html>
diff --git a/pages/teamplay/$id.html b/pages/teamplay/$id.html
new file mode 100644
index 00000000..040c3075
--- /dev/null
+++ b/pages/teamplay/$id.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Battleborn Brawlers</title>
+    <link rel="icon" href="/static/favicon.png" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <style>
+      ability-marker-label {
+        display: none;
+      }
+    </style>
+  </head>
+
+  <body battleborn-brawlers vibe vibe-fouc stylecheat>
+    <script type="module">
+      import boot from '/js/boot.js';
+      boot();
+
+      import { subscribeTeamplay, fetchTeamplay } from '/js/teamplay.js';
+
+      window.teamplayLevelRange = (min, max) => (min === max ? `${min}` : `${min}–${max}`);
+
+      // Load the session and subscribe to its room once the socket is up.
+      let started = false;
+      const start = () => {
+        if (started || !$.socket) return;
+        started = true;
+        const id = $.page.params.id;
+        subscribeTeamplay(id);
+        fetchTeamplay(id);
+      };
+
+      start();
+      $.on('afterUpdate', (current, prev) => {
+        if (current.socket && !prev.socket) start();
+      });
+    </script>
+
+    <component src="/components/Layout.html">
+      <page-content>
+        <crow left center wrap w="full" g="2" teamplay-titlebar>
+          <a class="button" tertiary f="none" href="/teamplay">
+            <icon chevron rotate="90"></icon>
+          </a>
+          <h3 m="0" f="none">@[pvp.teamplay.viewed?.rules?.name || 'Teamplay']</h3>
+          <!-- if pvp.teamplay.controls && pvp.teamplay.controls.canCancel -->
+            <hr vertical mx="2" />
+            <crow center g="2" f="none">
+              <button
+                primary
+                success
+                disabled="@[!pvp.teamplay.controls.canStart]"
+                onclick="teamplayStart()"
+              >
+                Start
+              </button>
+              <button tertiary danger onclick="teamplayLeavePrompt()">Disband</button>
+            </crow>
+          <!-- /if -->
+          <!-- if pvp.teamplay.viewed?.rules -->
+            <crow right center g="2" f="1">
+              <span cinzel f="none"
+                >Level @[teamplayLevelRange(pvp.teamplay.viewed.rules.minLevel,
+                pvp.teamplay.viewed.rules.maxLevel)]</span
+              >
+              <component
+                src="/components/MatchupBadge.html"
+                ours="@[pvp.teamplay.viewed.rules.brawlersPerTeam]"
+                theirs="@[pvp.teamplay.viewed.rules.brawlersPerTeam]"
+                teams="@[pvp.teamplay.viewed.rules.amountOfTeams]"
+                always
+              ></component>
+              <!-- if pvp.teamplay.viewed.rules.randomizedTeams -->
+                <badge neutral>Randomized teams</badge>
+              <!-- /if -->
+              <!-- if pvp.teamplay.roomStatus -->
+                <badge
+                  neutral="@[pvp.teamplay.roomStatus.tone === 'neutral']"
+                  gold="@[pvp.teamplay.roomStatus.tone === 'gold']"
+                  green="@[pvp.teamplay.roomStatus.tone === 'green']"
+                  health="@[pvp.teamplay.roomStatus.tone === 'health']"
+                  style="--health-hue: @[pvp.teamplay.roomStatus.hue]"
+                  >@[pvp.teamplay.roomStatus.label]</badge
+                >
+              <!-- /if -->
+              <!-- if pvp.teamplay.viewed.status === 'completed' -->
+                <component
+                  src="/components/ReWatchButton.html"
+                  tpid="@[pvp.teamplay.viewed._id]"
+                ></component>
+              <!-- /if -->
+            </crow>
+          <!-- /if -->
+        </crow>
+        <hr />
+
+        <component src="/components/TeamplayRoomContent.html"></component>
+      </page-content>
+
+      <component src="/components/TeamplayChat.html"></component>
+    </component>
+  </body>
+</html>
diff --git a/patches/svelte-dnd-action@0.9.64.patch b/patches/svelte-dnd-action@0.9.64.patch
deleted file mode 100644
index 18774976..00000000
--- a/patches/svelte-dnd-action@0.9.64.patch
+++ /dev/null
@@ -1,3177 +0,0 @@
-diff --git a/dist/index.d.ts b/dist/index.d.ts
-index ba6b9f7108677b267552e88b33f1d6639cf2c47a..9ad148e866c827e598f3d93ac70458889c5e0774 100644
---- a/dist/index.d.ts
-+++ b/dist/index.d.ts
-@@ -1,39 +1,14 @@
--import type {ActionReturn} from "svelte/action";
--
- /**
-  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
-  * Supports mouse, touch and keyboard interactions.
-  * Dispatches two events that the container is expected to react to by modifying its list of items,
-  * which will then feed back in to this action via the update function
-  */
--export declare function dndzone<T extends Item>(node: HTMLElement, options: Options<T>): ActionReturn<Options<T>, DndZoneAttributes<T>>;
--
--export declare function dndzone<T extends Item>(
--    node: HTMLElement,
--    options: Options<T>
--): {
--    update: (newOptions: Options<T>) => void;
--    destroy: () => void;
--};
--
--/**
-- * A wrapper action to make it easy to work with drag handles.
-- * When using this you must also use the 'dragHandle' action on an element inside each item within the zone.
-- */
--export declare function dragHandleZone<T extends Item>(node: HTMLElement, options: Options<T>): ActionReturn<Options<T>, DndZoneAttributes<T>>;
--export declare function dragHandleZone<T extends Item>(
-+export declare function dndzone(
-     node: HTMLElement,
--    options: Options<T>
-+    options: Options
- ): {
--    update: (newOptions: Options<T>) => void;
--    destroy: () => void;
--};
--
--/**
-- * This should be used to mark drag handles inside items that belong to a 'dragHandleZone'
-- */
--export declare function dragHandle(node: HTMLElement): {
--    update: () => void;
-+    update: (newOptions: Options) => void;
-     destroy: () => void;
- };
- 
-@@ -44,33 +19,21 @@ export type TransformDraggedElementFunction = (
- ) => void;
- 
- export declare type Item = Record<string, any>;
--export interface Options<T extends Item = Item> {
--    items: T[]; // the list of items that was used to generate the children of the given node
-+export interface Options {
-+    items: Item[]; // the list of items that was used to generate the children of the given node
-     type?: string; // the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, defaults to a base type
-     flipDurationMs?: number; // if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict
-+    constrainAxisX?: boolean; // Constrain dragging by X axis. Drag will be allowed only by Y axis.
-+    constrainAxisY?: boolean; // Constrain dragging by Y axis. Drag will be allowed only by X axis.
-     dragDisabled?: boolean;
-     morphDisabled?: boolean;
-     dropFromOthersDisabled?: boolean;
-     zoneTabIndex?: number; // set the tabindex of the list container when not dragging
--    zoneItemTabIndex?: number; // set the tabindex of the list container items when not dragging
-     dropTargetClasses?: string[];
-     dropTargetStyle?: Record<string, string>;
-     transformDraggedElement?: TransformDraggedElementFunction;
-     autoAriaDisabled?: boolean;
-     centreDraggedOnCursor?: boolean;
--    dropAnimationDisabled?: boolean;
--    /**
--     * Improve touch UX: true => default 80 ms delay, number => custom delay in ms.
--     * false/undefined => drag starts instantly (legacy behaviour)
--     */
--    delayTouchStart?: boolean | number;
--}
--
--export interface DndZoneAttributes<T> {
--    "on:consider"?: (e: CustomEvent<DndEvent<T>>) => void;
--    "on:finalize"?: (e: CustomEvent<DndEvent<T>>) => void;
--    onconsider?: (e: CustomEvent<DndEvent<T>>) => void;
--    onfinalize?: (e: CustomEvent<DndEvent<T>>) => void;
- }
- 
- /**
-@@ -117,15 +80,8 @@ export type DndEvent<T = Item> = {
- export declare const SHADOW_ITEM_MARKER_PROPERTY_NAME: "isDndShadowItem";
- export declare const SHADOW_PLACEHOLDER_ITEM_ID: "id:dnd-shadow-placeholder-0000";
- export declare const DRAGGED_ELEMENT_ID: "dnd-action-dragged-el";
--export declare const SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
- 
- /**
-  * Allows the user to show/hide console debug output
-  */
- export declare function setDebugMode(isDebug: boolean): void;
--
--export enum FEATURE_FLAG_NAMES {
--    // Default value: false, This flag exists as a workaround for issue 454 (basically a browser bug) - seems like these rect values take time to update when in grid layout. Setting it to true can cause strange behaviour in the REPL for non-grid zones, see issue 470
--    USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT = "FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT"
--}
--export declare function setFeatureFlag(flagName: FEATURE_FLAG_NAMES, flagValue: boolean);
-diff --git a/dist/index.js b/dist/index.js
-index f13c0243ee6115d7945a27261b6a09e814c60a91..f63b0d21cbd4d1fdd095f025f6aaae0ba6659807 100644
---- a/dist/index.js
-+++ b/dist/index.js
-@@ -294,8 +294,7 @@
-     KEYBOARD: "keyboard"
-   };
-   var SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
--  var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
--  var SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
-+  var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
-   var SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
-   var DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
-   var ITEM_ID_KEY = "id";
-@@ -333,7 +332,7 @@
- 
-   /**
-    * Allows the user to show/hide console debug output
--   * * @param {boolean} isDebug
-+   * * @param {Boolean} isDebug
-    */
-   function setDebugMode(isDebug) {
-     if (isDebug) {
-@@ -356,13 +355,11 @@
-   /**
-    * Gets the bounding rect but removes transforms (ex: flip animation)
-    * @param {HTMLElement} el
--   * @param {boolean} [onlyVisible] - use the visible rect defaults to true
-    * @return {{top: number, left: number, bottom: number, right: number}}
-    */
-   function getBoundingRectNoTransforms(el) {
--    var onlyVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-     var ta;
--    var rect = onlyVisible ? getVisibleRectRecursive(el) : el.getBoundingClientRect();
-+    var rect = el.getBoundingClientRect();
-     var style = getComputedStyle(el);
-     var tx = style.transform;
-     if (tx) {
-@@ -503,58 +500,30 @@
- 
-   /**
-    * @param {HTMLElement} el - the element to check
--   * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
-+   * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
-    */
-   function isElementOffDocument(el) {
-     var rect = getAbsoluteRect(el);
-     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
-   }
--  function getVisibleRectRecursive(element) {
--    var rect = element.getBoundingClientRect();
--    var visibleRect = {
--      top: rect.top,
--      bottom: rect.bottom,
--      left: rect.left,
--      right: rect.right
--    };
- 
--    // Traverse up the DOM hierarchy, checking for scrollable ancestors
--    var parent = element.parentElement;
--    while (parent && parent !== document.body) {
--      var parentRect = parent.getBoundingClientRect();
--
--      // Check if the parent has a scrollable overflow
--      var overflowY = window.getComputedStyle(parent).overflowY;
--      var overflowX = window.getComputedStyle(parent).overflowX;
--      var isScrollableY = overflowY === "scroll" || overflowY === "auto";
--      var isScrollableX = overflowX === "scroll" || overflowX === "auto";
--
--      // Constrain the visible area to the parent's visible area
--      if (isScrollableY) {
--        visibleRect.top = Math.max(visibleRect.top, parentRect.top);
--        visibleRect.bottom = Math.min(visibleRect.bottom, parentRect.bottom);
--      }
--      if (isScrollableX) {
--        visibleRect.left = Math.max(visibleRect.left, parentRect.left);
--        visibleRect.right = Math.min(visibleRect.right, parentRect.right);
--      }
--      parent = parent.parentElement;
-+  /**
-+   * If the point is inside the element returns its distances from the sides, otherwise returns null
-+   * @param {Point} point
-+   * @param {HTMLElement} el
-+   * @return {null|{top: number, left: number, bottom: number, right: number}}
-+   */
-+  function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-+    var rect = getAbsoluteRect(el);
-+    if (!isPointInsideRect(point, rect)) {
-+      return null;
-     }
--
--    // Finally, constrain the visible rect to the viewport
--    visibleRect.top = Math.max(visibleRect.top, 0);
--    visibleRect.bottom = Math.min(visibleRect.bottom, window.innerHeight);
--    visibleRect.left = Math.max(visibleRect.left, 0);
--    visibleRect.right = Math.min(visibleRect.right, window.innerWidth);
--
--    // Return the visible rectangle, ensuring that all values are valid
-     return {
--      top: visibleRect.top,
--      bottom: visibleRect.bottom,
--      left: visibleRect.left,
--      right: visibleRect.right,
--      width: Math.max(0, visibleRect.right - visibleRect.left),
--      height: Math.max(0, visibleRect.bottom - visibleRect.top)
-+      top: point.y - rect.top,
-+      bottom: rect.bottom - point.y,
-+      left: point.x - rect.left,
-+      // TODO - figure out what is so special about right (why the rect is too big)
-+      right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-     };
-   }
- 
-@@ -571,6 +540,17 @@
-   }
-   resetIndexesCache();
- 
-+  /**
-+   * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
-+   * @param {HTMLElement} dz
-+   */
-+  function resetIndexesCacheForDz(dz) {
-+    printDebug(function () {
-+      return "resetting indexes cache for dz";
-+    });
-+    dzToShadowIndexToRect["delete"](dz);
-+  }
-+
-   /**
-    * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
-    * Helpful in order to determine "would be index" more effectively
-@@ -647,35 +627,105 @@
-         indexOfMin = _i;
-       }
-     }
-+    return {
-+      index: indexOfMin,
-+      isProximityBased: true
-+    };
-+  }
- 
--    // -------- Phantom slot check --------
--    // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
--    // visually closest drop target can be *after* the current last **real** child.
--    // In simple layouts the would be index from the existing children would always be the last index
--    // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
--    // The problem is we can't predict where an additional element would be rendered in the general case,
--    // We therefore create a temporary, invisible clone of that last element, let
--    // the browser position it, measure the distance, and remove it immediately
--    // (same task → no paint).  This leaves `children` back in its original state
--    // before we exit the function, so existing index-caching logic and shadow-
--    // element bookkeeping continue to work unchanged.
--    if (children.length > 0) {
--      var originalLen = children.length; // before we append the phantom
--      var template = children[originalLen - 1];
--      var phantom = template.cloneNode(false); // shallow clone is enough for size
--      phantom.style.visibility = "hidden";
--      phantom.style.pointerEvents = "none";
--      collectionBelowEl.appendChild(phantom);
--      var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
--      if (phantomDistance < minDistanceSoFar) {
--        indexOfMin = originalLen; // index of phantom slot in original list
-+  var SCROLL_ZONE_PX = 25;
-+  function makeScroller() {
-+    var scrollingInfo;
-+    function resetScrolling() {
-+      scrollingInfo = {
-+        directionObj: undefined,
-+        stepPx: 0
-+      };
-+    }
-+    resetScrolling();
-+    // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-+    function scrollContainer(containerEl) {
-+      var _scrollingInfo = scrollingInfo,
-+        directionObj = _scrollingInfo.directionObj,
-+        stepPx = _scrollingInfo.stepPx;
-+      if (directionObj) {
-+        containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-+        window.requestAnimationFrame(function () {
-+          return scrollContainer(containerEl);
-+        });
-       }
-+    }
-+    function calcScrollStepPx(distancePx) {
-+      return SCROLL_ZONE_PX - distancePx;
-+    }
- 
--      collectionBelowEl.removeChild(phantom);
-+    /**
-+     * If the pointer is next to the sides of the element to scroll, will trigger scrolling
-+     * Can be called repeatedly with updated pointer and elementToScroll values without issues
-+     * @return {boolean} - true if scrolling was needed
-+     */
-+    function scrollIfNeeded(pointer, elementToScroll) {
-+      if (!elementToScroll) {
-+        return false;
-+      }
-+      var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-+      if (distances === null) {
-+        resetScrolling();
-+        return false;
-+      }
-+      var isAlreadyScrolling = !!scrollingInfo.directionObj;
-+      var scrollingVertically = false,
-+        scrollingHorizontally = false;
-+      // vertical
-+      if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
-+        if (distances.bottom < SCROLL_ZONE_PX) {
-+          scrollingVertically = true;
-+          scrollingInfo.directionObj = {
-+            x: 0,
-+            y: 1
-+          };
-+          scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
-+        } else if (distances.top < SCROLL_ZONE_PX) {
-+          scrollingVertically = true;
-+          scrollingInfo.directionObj = {
-+            x: 0,
-+            y: -1
-+          };
-+          scrollingInfo.stepPx = calcScrollStepPx(distances.top);
-+        }
-+        if (!isAlreadyScrolling && scrollingVertically) {
-+          scrollContainer(elementToScroll);
-+          return true;
-+        }
-+      }
-+      // horizontal
-+      if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
-+        if (distances.right < SCROLL_ZONE_PX) {
-+          scrollingHorizontally = true;
-+          scrollingInfo.directionObj = {
-+            x: 1,
-+            y: 0
-+          };
-+          scrollingInfo.stepPx = calcScrollStepPx(distances.right);
-+        } else if (distances.left < SCROLL_ZONE_PX) {
-+          scrollingHorizontally = true;
-+          scrollingInfo.directionObj = {
-+            x: -1,
-+            y: 0
-+          };
-+          scrollingInfo.stepPx = calcScrollStepPx(distances.left);
-+        }
-+        if (!isAlreadyScrolling && scrollingHorizontally) {
-+          scrollContainer(elementToScroll);
-+          return true;
-+        }
-+      }
-+      resetScrolling();
-+      return false;
-     }
-     return {
--      index: indexOfMin,
--      isProximityBased: true
-+      scrollIfNeeded: scrollIfNeeded,
-+      resetScrolling: resetScrolling
-     };
-   }
- 
-@@ -742,20 +792,21 @@
-     return true;
-   }
- 
--  var INTERVAL_MS = 200;
-+  var INTERVAL_MS$1 = 200;
-   var TOLERANCE_PX = 10;
--  var next;
-+  var _makeScroller$1 = makeScroller(),
-+    scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-+    resetScrolling$1 = _makeScroller$1.resetScrolling;
-+  var next$1;
- 
-   /**
-    * Tracks the dragged elements and performs the side effects when it is dragged over a drop zone (basically dispatching custom-events scrolling)
-    * @param {Set<HTMLElement>} dropZones
-    * @param {HTMLElement} draggedEl
-    * @param {number} [intervalMs = INTERVAL_MS]
--   * @param {MultiScroller} multiScroller
-    */
-   function observe(draggedEl, dropZones) {
--    var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
--    var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
-+    var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS$1;
-     // initialization
-     var lastDropZoneFound;
-     var lastIndexFound;
-@@ -771,10 +822,10 @@
-      */
-     function andNow() {
-       var currentCenterOfDragged = findCenterOfElement(draggedEl);
--      var scrolled = multiScroller.multiScrollIfNeeded();
-+      var scrolled = scrollIfNeeded$1(currentCenterOfDragged, lastDropZoneFound);
-       // we only want to make a new decision after the element was moved a bit to prevent flickering
-       if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
--        next = window.setTimeout(andNow, intervalMs);
-+        next$1 = window.setTimeout(andNow, intervalMs);
-         return;
-       }
-       if (isElementOffDocument(draggedEl)) {
-@@ -792,7 +843,7 @@
-       try {
-         for (_iterator.s(); !(_step = _iterator.n()).done;) {
-           var dz = _step.value;
--          if (scrolled) resetIndexesCache();
-+          if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
-           var indexObj = findWouldBeIndex(draggedEl, dz);
-           if (indexObj === null) {
-             // it is not inside
-@@ -826,7 +877,7 @@
-       } else {
-         lastIsDraggedInADropZone = true;
-       }
--      next = window.setTimeout(andNow, intervalMs);
-+      next$1 = window.setTimeout(andNow, intervalMs);
-     }
-     andNow();
-   }
-@@ -836,230 +887,62 @@
-     printDebug(function () {
-       return "unobserving";
-     });
--    clearTimeout(next);
-+    clearTimeout(next$1);
-+    resetScrolling$1();
-     resetIndexesCache();
-   }
- 
--  var SCROLL_ZONE_PX = 30;
-+  var INTERVAL_MS = 300;
-+  var mousePosition;
- 
-   /**
--   * Will make a scroller that can scroll any element given to it in any direction
--   * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
-+   * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
-+   * // TODO - make private (remove export)
-+   * @param {{clientX: number, clientY: number}} e
-    */
--  function makeScroller() {
--    var scrollingInfo;
--    function resetScrolling() {
--      scrollingInfo = {
--        directionObj: undefined,
--        stepPx: 0
--      };
--    }
--    resetScrolling();
--    // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
--    function scrollContainer(containerEl) {
--      var _scrollingInfo = scrollingInfo,
--        directionObj = _scrollingInfo.directionObj,
--        stepPx = _scrollingInfo.stepPx;
--      if (directionObj) {
--        containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
--        window.requestAnimationFrame(function () {
--          return scrollContainer(containerEl);
--        });
--      }
--    }
--    function calcScrollStepPx(distancePx) {
--      return SCROLL_ZONE_PX - distancePx;
--    }
--
--    /**
--     * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
--     * @param {HTMLElement} elementToScroll - the scroll container
--     * If the pointer is next to the sides of the element to scroll, will trigger scrolling
--     * Can be called repeatedly with updated pointer and elementToScroll values without issues
--     * @return {boolean} - true if scrolling was needed
--     */
--    function scrollIfNeeded(pointer, elementToScroll) {
--      if (!elementToScroll) {
--        return false;
--      }
--      var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
--      var isAlreadyScrolling = !!scrollingInfo.directionObj;
--      if (distances === null) {
--        if (isAlreadyScrolling) resetScrolling();
--        return false;
--      }
--      var scrollingVertically = false,
--        scrollingHorizontally = false;
--      // vertical
--      if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
--        if (distances.bottom < SCROLL_ZONE_PX) {
--          scrollingVertically = true;
--          scrollingInfo.directionObj = {
--            x: 0,
--            y: 1
--          };
--          scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
--        } else if (distances.top < SCROLL_ZONE_PX) {
--          scrollingVertically = true;
--          scrollingInfo.directionObj = {
--            x: 0,
--            y: -1
--          };
--          scrollingInfo.stepPx = calcScrollStepPx(distances.top);
--        }
--        if (!isAlreadyScrolling && scrollingVertically) {
--          scrollContainer(elementToScroll);
--          return true;
--        }
--      }
--      // horizontal
--      if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
--        if (distances.right < SCROLL_ZONE_PX) {
--          scrollingHorizontally = true;
--          scrollingInfo.directionObj = {
--            x: 1,
--            y: 0
--          };
--          scrollingInfo.stepPx = calcScrollStepPx(distances.right);
--        } else if (distances.left < SCROLL_ZONE_PX) {
--          scrollingHorizontally = true;
--          scrollingInfo.directionObj = {
--            x: -1,
--            y: 0
--          };
--          scrollingInfo.stepPx = calcScrollStepPx(distances.left);
--        }
--        if (!isAlreadyScrolling && scrollingHorizontally) {
--          scrollContainer(elementToScroll);
--          return true;
--        }
--      }
--      resetScrolling();
--      return false;
--    }
--    return {
--      scrollIfNeeded: scrollIfNeeded,
--      resetScrolling: resetScrolling
-+  function updateMousePosition(e) {
-+    var c = e.touches ? e.touches[0] : e;
-+    mousePosition = {
-+      x: c.clientX,
-+      y: c.clientY
-     };
-   }
--
--  /**
--   * If the point is inside the element returns its distances from the sides, otherwise returns null
--   * @param {Point} point
--   * @param {HTMLElement} el
--   * @return {null|{top: number, left: number, bottom: number, right: number}}
--   */
--  function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
--    // Even if the scrolling element is small it acts as a scroller for the viewport
--    var rect = el === document.scrollingElement ? {
--      top: 0,
--      bottom: window.innerHeight,
--      left: 0,
--      right: window.innerWidth
--    } : el.getBoundingClientRect();
--    if (!isPointInsideRect(point, rect)) {
--      return null;
-+  var _makeScroller = makeScroller(),
-+    scrollIfNeeded = _makeScroller.scrollIfNeeded,
-+    resetScrolling = _makeScroller.resetScrolling;
-+  var next;
-+  function loop() {
-+    if (mousePosition) {
-+      var scrolled = scrollIfNeeded(mousePosition, document.documentElement);
-+      if (scrolled) resetIndexesCache();
-     }
--    return {
--      top: point.y - rect.top,
--      bottom: rect.bottom - point.y,
--      left: point.x - rect.left,
--      right: rect.right - point.x
--    };
-+    next = window.setTimeout(loop, INTERVAL_MS);
-   }
- 
-   /**
--   @typedef {Object} MultiScroller
--   @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
--  /**
--   * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
--   * @param {HTMLElement[]} baseElementsForScrolling
--   * @param {function():Point} getPointerPosition
--   * @return {MultiScroller}
-+   * will start watching the mouse pointer and scroll the window if it goes next to the edges
-    */
--  function createMultiScroller() {
--    var baseElementsForScrolling = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
--    var getPointerPosition = arguments.length > 1 ? arguments[1] : undefined;
-+  function armWindowScroller() {
-     printDebug(function () {
--      return "creating multi-scroller";
-+      return "arming window scroller";
-     });
--    var scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
--    var scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort(function (dz1, dz2) {
--      return getDepth(dz2) - getDepth(dz1);
--    });
--    var _makeScroller = makeScroller(),
--      scrollIfNeeded = _makeScroller.scrollIfNeeded,
--      resetScrolling = _makeScroller.resetScrolling;
--
--    /**
--     * @return {boolean} - was any container scrolled
--     */
--    function tick() {
--      var mousePosition = getPointerPosition();
--      if (!mousePosition || !scrollingContainersDeepToShallow) {
--        return false;
--      }
--      var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
--        return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
--      });
--      for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
--        var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
--        if (scrolled) {
--          return true;
--        }
--      }
--      return false;
--    }
--    return {
--      multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : function () {
--        return false;
--      },
--      destroy: function destroy() {
--        return resetScrolling();
--      }
--    };
-+    window.addEventListener("mousemove", updateMousePosition);
-+    window.addEventListener("touchmove", updateMousePosition);
-+    loop();
-   }
- 
--  // internal utils
--  function findScrollableParents(element) {
--    if (!element) {
--      return [];
--    }
--    var scrollableContainers = [];
--    var parent = element;
--    while (parent) {
--      var _window$getComputedSt = window.getComputedStyle(parent),
--        overflow = _window$getComputedSt.overflow;
--      if (overflow.split(" ").some(function (o) {
--        return o.includes("auto") || o.includes("scroll");
--      })) {
--        scrollableContainers.push(parent);
--      }
--      parent = parent.parentElement;
--    }
--    return scrollableContainers;
--  }
--  function findRelevantScrollContainers(dropZones) {
--    var scrollingContainers = new Set();
--    var _iterator = _createForOfIteratorHelper(dropZones),
--      _step;
--    try {
--      for (_iterator.s(); !(_step = _iterator.n()).done;) {
--        var dz = _step.value;
--        findScrollableParents(dz).forEach(function (container) {
--          return scrollingContainers.add(container);
--        });
--      }
--      // The scrolling element might have overflow visible and still be scrollable
--    } catch (err) {
--      _iterator.e(err);
--    } finally {
--      _iterator.f();
--    }
--    if (document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight || document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight) {
--      scrollingContainers.add(document.scrollingElement);
--    }
--    return scrollingContainers;
-+  /**
-+   * will stop watching the mouse pointer and won't scroll the window anymore
-+   */
-+  function disarmWindowScroller() {
-+    printDebug(function () {
-+      return "disarming window scroller";
-+    });
-+    window.removeEventListener("mousemove", updateMousePosition);
-+    window.removeEventListener("touchmove", updateMousePosition);
-+    mousePosition = undefined;
-+    window.clearTimeout(next);
-+    resetScrolling();
-   }
- 
-   /**
-@@ -1067,15 +950,15 @@
-    * Since svelte manages select value internally.
-    * @see https://github.com/sveltejs/svelte/issues/6717
-    * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
--   *
--   * @param {HTMLElement} el
--   * @returns
-+   * 
-+   * @param {HTMLElement} el 
-+   * @returns 
-    */
-   function svelteNodeClone(el) {
-     var cloned = el.cloneNode(true);
-     var values = [];
-     var elIsSelect = el.tagName === "SELECT";
--    var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll("select"));
-+    var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
-     var _iterator = _createForOfIteratorHelper(selects),
-       _step;
-     try {
-@@ -1088,62 +971,21 @@
-     } finally {
-       _iterator.f();
-     }
--    if (selects.length > 0) {
--      var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll("select"));
--      for (var i = 0; i < clonedSelects.length; i++) {
--        var select = clonedSelects[i];
--        var value = values[i];
--        var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
--        if (optionEl) {
--          optionEl.setAttribute("selected", true);
--        }
--      }
-+    if (selects.length <= 0) {
-+      return cloned;
-     }
--    var elIsCanvas = el.tagName === "CANVAS";
--    var canvases = elIsCanvas ? [el] : _toConsumableArray(el.querySelectorAll("canvas"));
--    if (canvases.length > 0) {
--      var clonedCanvases = elIsCanvas ? [cloned] : _toConsumableArray(cloned.querySelectorAll("canvas"));
--      for (var _i = 0; _i < clonedCanvases.length; _i++) {
--        var canvas = canvases[_i];
--        var clonedCanvas = clonedCanvases[_i];
--        clonedCanvas.width = canvas.width;
--        clonedCanvas.height = canvas.height;
--        if (canvas.width > 0 && canvas.height > 0) {
--          clonedCanvas.getContext("2d").drawImage(canvas, 0, 0);
--        }
-+    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
-+    for (var i = 0; i < clonedSelects.length; i++) {
-+      var select = clonedSelects[i];
-+      var value = values[i];
-+      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
-+      if (optionEl) {
-+        optionEl.setAttribute('selected', true);
-       }
-     }
-     return cloned;
-   }
- 
--  /**
--   * @type {{USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT: string}}
--   */
--  var FEATURE_FLAG_NAMES = Object.freeze({
--    // This flag exists as a workaround for issue 454 (basically a browser bug) - seems like these rect values take time to update when in grid layout. Setting it to true can cause strange behaviour in the REPL for non-grid zones, see issue 470
--    USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT: "USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT"
--  });
--  var featureFlagsMap = _defineProperty({}, FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT, false);
--
--  /**
--   * @param {FEATURE_FLAG_NAMES} flagName
--   * @param {boolean} flagValue
--   */
--  function setFeatureFlag(flagName, flagValue) {
--    if (!FEATURE_FLAG_NAMES[flagName]) throw new Error("Can't set non existing feature flag ".concat(flagName, "! Supported flags: ").concat(Object.keys(FEATURE_FLAG_NAMES)));
--    featureFlagsMap[flagName] = !!flagValue;
--  }
--
--  /**
--   *
--   * @param {FEATURE_FLAG_NAMES} flagName
--   * @return {boolean}
--   */
--  function getFeatureFlag(flagName) {
--    if (!FEATURE_FLAG_NAMES[flagName]) throw new Error("Can't get non existing feature flag ".concat(flagName, "! Supported flags: ").concat(Object.keys(FEATURE_FLAG_NAMES)));
--    return featureFlagsMap[flagName];
--  }
--
-   var TRANSITION_DURATION_SECONDS = 0.2;
- 
-   /**
-@@ -1220,10 +1062,8 @@
-         left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
-         top: (currentMouseY - draggedElRect.top) / draggedElRect.height
-       };
--      if (!getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT)) {
--        draggedEl.style.height = "".concat(newRect.height, "px");
--        draggedEl.style.width = "".concat(newRect.width, "px");
--      }
-+      draggedEl.style.height = "".concat(newRect.height, "px");
-+      draggedEl.style.width = "".concat(newRect.width, "px");
-       draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
-       draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
-     }
-@@ -1236,9 +1076,7 @@
-   function copyStylesFromTo(copyFromEl, copyToEl) {
-     var computedStyle = window.getComputedStyle(copyFromEl);
-     Array.from(computedStyle).filter(function (s) {
--      return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type" ||
--      // copying with and height to make up for rect update timing issues in some browsers
--      getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT) && (s === "width" || s === "height");
-+      return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type";
-     }).forEach(function (s) {
-       return copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s));
-     });
-@@ -1355,13 +1193,10 @@
- 
-   var DEFAULT_DROP_ZONE_TYPE$1 = "--any--";
-   var MIN_OBSERVATION_INTERVAL_MS = 100;
--  var DISABLED_OBSERVATION_INTERVAL_MS = 20;
-   var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
--  var DEFAULT_TOUCH_DELAY_MS = 80;
-   var DEFAULT_DROP_TARGET_STYLE$1 = {
-     outline: "rgba(255, 255, 102, 0.7) solid 2px"
-   };
--  var ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
-   var originalDragTarget;
-   var draggedEl;
-   var draggedElData;
-@@ -1377,9 +1212,6 @@
-   var unlockOriginDzMinDimensions;
-   var isDraggedOutsideOfAnyDz = false;
-   var scheduledForRemovalAfterDrop = [];
--  var multiScroller;
--  var touchDragHoldTimer;
--  var touchHoldElapsed = false;
- 
-   // a map from type to a set of drop-zones
-   var typeToDropZones$1 = new Map();
-@@ -1414,6 +1246,7 @@
-     printDebug(function () {
-       return "watching dragged element";
-     });
-+    armWindowScroller();
-     var dropZones = typeToDropZones$1.get(draggedElType);
-     var _iterator = _createForOfIteratorHelper(dropZones),
-       _step;
-@@ -1430,21 +1263,17 @@
-       _iterator.f();
-     }
-     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
--
-     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
--    var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
-+    var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
-       return dzToConfig$1.get(dz).dropAnimationDurationMs;
--    })));
--    var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
--    multiScroller = createMultiScroller(dropZones, function () {
--      return currentMousePosition;
--    });
--    observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
-+    }))));
-+    observe(draggedEl, dropZones, observationIntervalMs * 1.07);
-   }
-   function unWatchDraggedElement() {
-     printDebug(function () {
-       return "unwatching dragged element";
-     });
-+    disarmWindowScroller();
-     var dropZones = typeToDropZones$1.get(draggedElType);
-     var _iterator2 = _createForOfIteratorHelper(dropZones),
-       _step2;
-@@ -1461,21 +1290,20 @@
-       _iterator2.f();
-     }
-     window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
--    // ensuring multiScroller is not already destroyed before destroying
--    if (multiScroller) {
--      multiScroller.destroy();
--      multiScroller = undefined;
--    }
-     unobserve();
-   }
--  function findShadowElementIdx(items) {
-+
-+  // finds the initial placeholder that is placed there on drag start
-+  function findShadowPlaceHolderIdx(items) {
-     return items.findIndex(function (item) {
--      return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
-+      return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
-     });
-   }
--  function createShadowElData(draggedElData) {
--    var _objectSpread2$1;
--    return _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
-+  function findShadowElementIdx(items) {
-+    // checking that the id is not the placeholder's for Dragula like usecases
-+    return items.findIndex(function (item) {
-+      return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
-+    });
-   }
- 
-   /* custom drag-events handlers */
-@@ -1510,8 +1338,20 @@
-         id: draggedElData[ITEM_ID_KEY],
-         source: SOURCES.POINTER
-       });
-+    } else {
-+      var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-+      if (shadowPlaceHolderIdx !== -1) {
-+        // only happens right after drag start, on the first drag entered event
-+        printDebug(function () {
-+          return "removing placeholder item from origin dz";
-+        });
-+        items.splice(shadowPlaceHolderIdx, 1);
-+      }
-     }
--    var shadowElIdx = e.detail.indexObj.index;
-+    var _e$detail$indexObj = e.detail.indexObj,
-+      index = _e$detail$indexObj.index,
-+      isProximityBased = _e$detail$indexObj.isProximityBased;
-+    var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
-     shadowElDropZone = e.currentTarget;
-     items.splice(shadowElIdx, 0, shadowElData);
-     dispatchConsiderEvent(e.currentTarget, items, {
-@@ -1527,7 +1367,7 @@
-       return ["dragged left", e.currentTarget, e.detail];
-     });
-     var _dzToConfig$get2 = dzToConfig$1.get(e.currentTarget),
--      originalItems = _dzToConfig$get2.items,
-+      items = _dzToConfig$get2.items,
-       dropFromOthersDisabled = _dzToConfig$get2.dropFromOthersDisabled;
-     if (dropFromOthersDisabled && e.currentTarget !== originDropZone && e.currentTarget !== shadowElDropZone) {
-       printDebug(function () {
-@@ -1535,12 +1375,8 @@
-       });
-       return;
-     }
--    var items = _toConsumableArray(originalItems);
-     var shadowElIdx = findShadowElementIdx(items);
--    if (shadowElIdx !== -1) {
--      items.splice(shadowElIdx, 1);
--    }
--    var origShadowDz = shadowElDropZone;
-+    var shadowItem = items.splice(shadowElIdx, 1)[0];
-     shadowElDropZone = undefined;
-     var _e$detail = e.detail,
-       type = _e$detail.type,
-@@ -1551,9 +1387,8 @@
-       });
-       isDraggedOutsideOfAnyDz = true;
-       shadowElDropZone = originDropZone;
--      // if the last zone it left is the origin dz, we will put it back into items (which we just removed it from)
--      var originZoneItems = origShadowDz === originDropZone ? items : _toConsumableArray(dzToConfig$1.get(originDropZone).items);
--      originZoneItems.splice(originIndex, 0, shadowElData);
-+      var originZoneItems = dzToConfig$1.get(originDropZone).items;
-+      originZoneItems.splice(originIndex, 0, shadowItem);
-       dispatchConsiderEvent(originDropZone, originZoneItems, {
-         trigger: TRIGGERS.DRAGGED_LEFT_ALL,
-         id: draggedElData[ITEM_ID_KEY],
-@@ -1572,7 +1407,7 @@
-       return ["dragged is over index", e.currentTarget, e.detail];
-     });
-     var _dzToConfig$get3 = dzToConfig$1.get(e.currentTarget),
--      originalItems = _dzToConfig$get3.items,
-+      items = _dzToConfig$get3.items,
-       dropFromOthersDisabled = _dzToConfig$get3.dropFromOthersDisabled;
-     if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
-       printDebug(function () {
-@@ -1580,13 +1415,10 @@
-       });
-       return;
-     }
--    var items = _toConsumableArray(originalItems);
-     isDraggedOutsideOfAnyDz = false;
-     var index = e.detail.indexObj.index;
-     var shadowElIdx = findShadowElementIdx(items);
--    if (shadowElIdx !== -1) {
--      items.splice(shadowElIdx, 1);
--    }
-+    items.splice(shadowElIdx, 1);
-     items.splice(index, 0, shadowElData);
-     dispatchConsiderEvent(e.currentTarget, items, {
-       trigger: TRIGGERS.DRAGGED_OVER_INDEX,
-@@ -1599,9 +1431,12 @@
-   function handleMouseMove(e) {
-     e.preventDefault();
-     var c = e.touches ? e.touches[0] : e;
-+    var _dzToConfig$get4 = dzToConfig$1.get(originDropZone),
-+      constrainAxisX = _dzToConfig$get4.constrainAxisX,
-+      constrainAxisY = _dzToConfig$get4.constrainAxisY;
-     currentMousePosition = {
--      x: c.clientX,
--      y: c.clientY
-+      x: constrainAxisX ? dragStartMousePosition.x : c.clientX,
-+      y: constrainAxisY ? dragStartMousePosition.y : c.clientY
-     };
-     draggedEl.style.transform = "translate3d(".concat(currentMousePosition.x - dragStartMousePosition.x, "px, ").concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
-   }
-@@ -1626,9 +1461,9 @@
-     printDebug(function () {
-       return ["dropped in dz", shadowElDropZone];
-     });
--    var _dzToConfig$get4 = dzToConfig$1.get(shadowElDropZone),
--      items = _dzToConfig$get4.items,
--      type = _dzToConfig$get4.type;
-+    var _dzToConfig$get5 = dzToConfig$1.get(shadowElDropZone),
-+      items = _dzToConfig$get5.items,
-+      type = _dzToConfig$get5.type;
-     styleInactiveDropZones(typeToDropZones$1.get(type), function (dz) {
-       return dzToConfig$1.get(dz).dropTargetStyle;
-     }, function (dz) {
-@@ -1636,11 +1471,7 @@
-     });
-     var shadowElIdx = findShadowElementIdx(items);
-     // the handler might remove the shadow element, ex: dragula like copy on drag
--    if (shadowElIdx === -1) {
--      if (shadowElDropZone === originDropZone) {
--        shadowElIdx = originIndex;
--      }
--    }
-+    if (shadowElIdx === -1) shadowElIdx = originIndex;
-     items = items.map(function (item) {
-       return item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item;
-     });
-@@ -1659,29 +1490,21 @@
-           source: SOURCES.POINTER
-         });
-       }
--      // In edge cases the dom might have not been updated yet so we can't rely on data list index
--      var domShadowEl = Array.from(shadowElDropZone.children).find(function (c) {
--        return c.getAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME);
--      });
--      if (domShadowEl) unDecorateShadowElement(domShadowEl);
-+      unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
-       cleanupPostDrop();
-     }
--    if (dzToConfig$1.get(shadowElDropZone).dropAnimationDisabled) {
--      finalizeWithinZone();
--    } else {
--      animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
--    }
-+    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
-   }
- 
-   // helper function for handleDrop
-   function animateDraggedToFinalPosition(shadowElIdx, callback) {
--    var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx], false) : getBoundingRectNoTransforms(shadowElDropZone, false);
-+    var shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
-     var newTransform = {
-       x: shadowElRect.left - parseFloat(draggedEl.style.left),
-       y: shadowElRect.top - parseFloat(draggedEl.style.top)
-     };
--    var _dzToConfig$get5 = dzToConfig$1.get(shadowElDropZone),
--      dropAnimationDurationMs = _dzToConfig$get5.dropAnimationDurationMs;
-+    var _dzToConfig$get6 = dzToConfig$1.get(shadowElDropZone),
-+      dropAnimationDurationMs = _dzToConfig$get6.dropAnimationDurationMs;
-     var transition = "transform ".concat(dropAnimationDurationMs, "ms ease");
-     draggedEl.style.transition = draggedEl.style.transition ? draggedEl.style.transition + "," + transition : transition;
-     draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
-@@ -1699,12 +1522,19 @@
-   }
-   /* cleanup */
-   function cleanupPostDrop() {
--    // Remove the temporary elements that were kept in the DOM during the drag
--    if (draggedEl && draggedEl.remove) {
--      draggedEl.remove();
--    }
--    if (originalDragTarget && originalDragTarget.remove) {
--      originalDragTarget.remove();
-+    draggedEl.remove();
-+    originalDragTarget.remove();
-+    if (scheduledForRemovalAfterDrop.length) {
-+      printDebug(function () {
-+        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
-+      });
-+      scheduledForRemovalAfterDrop.forEach(function (_ref) {
-+        var dz = _ref.dz,
-+          destroy = _ref.destroy;
-+        destroy();
-+        dz.remove();
-+      });
-+      scheduledForRemovalAfterDrop = [];
-     }
-     draggedEl = undefined;
-     originalDragTarget = undefined;
-@@ -1720,23 +1550,6 @@
-     finalizingPreviousDrag = false;
-     unlockOriginDzMinDimensions = undefined;
-     isDraggedOutsideOfAnyDz = false;
--    if (touchDragHoldTimer) {
--      clearTimeout(touchDragHoldTimer);
--    }
--    touchDragHoldTimer = undefined;
--    touchHoldElapsed = false;
--    if (scheduledForRemovalAfterDrop.length) {
--      printDebug(function () {
--        return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
--      });
--      scheduledForRemovalAfterDrop.forEach(function (_ref) {
--        var dz = _ref.dz,
--          destroy = _ref.destroy;
--        destroy();
--        dz.remove();
--      });
--      scheduledForRemovalAfterDrop = [];
--    }
-   }
-   function dndzone$2(node, options) {
-     var initialized = false;
-@@ -1744,15 +1557,15 @@
-       items: undefined,
-       type: undefined,
-       flipDurationMs: 0,
-+      constrainAxisX: false,
-+      constrainAxisY: false,
-       dragDisabled: false,
-       morphDisabled: false,
-       dropFromOthersDisabled: false,
-       dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
-       dropTargetClasses: [],
-       transformDraggedElement: function transformDraggedElement() {},
--      centreDraggedOnCursor: false,
--      dropAnimationDisabled: false,
--      delayTouchStartMs: 0
-+      centreDraggedOnCursor: false
-     };
-     printDebug(function () {
-       return ["dndzone good to go options: ".concat(toString(options), ", config: ").concat(toString(config)), {
-@@ -1780,52 +1593,16 @@
-       window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
-       window.removeEventListener("mouseup", handleFalseAlarm);
-       window.removeEventListener("touchend", handleFalseAlarm);
--      if (touchDragHoldTimer) {
--        clearTimeout(touchDragHoldTimer);
--        touchDragHoldTimer = undefined;
--        touchHoldElapsed = false;
--      }
-     }
--    function handleFalseAlarm(e) {
-+    function handleFalseAlarm() {
-       removeMaybeListeners();
-       originalDragTarget = undefined;
-       dragStartMousePosition = undefined;
-       currentMousePosition = undefined;
--
--      // dragging initiated by touch events prevents onclick from initially firing
--      if (e.type === "touchend") {
--        var clickEvent = new Event("click", {
--          bubbles: true,
--          cancelable: true
--        });
--        // doing it this way instead of calling .click() because that doesn't work for SVG elements
--        e.target.dispatchEvent(clickEvent);
--      }
-     }
-     function handleMouseMoveMaybeDragStart(e) {
--      var isTouch = !!e.touches;
--      var c = isTouch ? e.touches[0] : e;
--      // If touch drag delay is configured and not elapsed yet, allow scrolling until either
--      // the delay elapses (timer will call handleDragStart) or the user moves significantly,
--      // in which case we cancel the potential drag and let the interaction be a scroll.
--      if (isTouch && config.delayTouchStartMs > 0 && !touchHoldElapsed) {
--        currentMousePosition = {
--          x: c.clientX,
--          y: c.clientY
--        };
--        if (Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX || Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX) {
--          // User started scrolling, cancel drag attempt.
--          if (touchDragHoldTimer) {
--            clearTimeout(touchDragHoldTimer);
--            touchDragHoldTimer = undefined;
--          }
--          handleFalseAlarm(e);
--        }
--        return; // Do not preventDefault so scrolling works.
--      }
--
--      // legacy / post-delay path – block scrolling and maybe start drag
-       e.preventDefault();
-+      var c = e.touches ? e.touches[0] : e;
-       currentMousePosition = {
-         x: c.clientX,
-         y: c.clientY
-@@ -1856,29 +1633,14 @@
-         });
-         return;
-       }
--      var isTouchStart = !!e.touches;
--      var useDelay = isTouchStart && config.delayTouchStartMs > 0;
--      if (!useDelay) {
--        e.preventDefault();
--      }
-       e.stopPropagation();
--      var c = isTouchStart ? e.touches[0] : e;
-+      var c = e.touches ? e.touches[0] : e;
-       dragStartMousePosition = {
-         x: c.clientX,
-         y: c.clientY
-       };
-       currentMousePosition = _objectSpread2({}, dragStartMousePosition);
-       originalDragTarget = e.currentTarget;
--      if (useDelay) {
--        touchHoldElapsed = false;
--        touchDragHoldTimer = window.setTimeout(function () {
--          // If the finger is still down and no false-alarm happened
--          if (!originalDragTarget) return;
--          touchHoldElapsed = true;
--          removeMaybeListeners();
--          handleDragStart();
--        }, config.delayTouchStartMs);
--      }
-       addMaybeListeners();
-     }
-     function handleDragStart() {
-@@ -1891,32 +1653,29 @@
-       var currentIdx = elToIdx.get(originalDragTarget);
-       originIndex = currentIdx;
-       originDropZone = originalDragTarget.parentElement;
--      /** @type {ShadowRoot | HTMLDocument | Element } */
--      var rootNode = originDropZone.closest("dialog") || originDropZone.closest("[popover]") || originDropZone.getRootNode();
-+      /** @type {ShadowRoot | HTMLDocument} */
-+      var rootNode = originDropZone.getRootNode();
-       var originDropZoneRoot = rootNode.body || rootNode;
--      var originalItems = config.items,
-+      var items = config.items,
-         type = config.type,
-         centreDraggedOnCursor = config.centreDraggedOnCursor;
--      var items = _toConsumableArray(originalItems);
--      draggedElData = items[currentIdx];
-+      draggedElData = _objectSpread2({}, items[currentIdx]);
-       draggedElType = type;
--      shadowElData = createShadowElData(draggedElData);
-+      shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
-+      // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-+      var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
- 
-       // creating the draggable element
-       draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
--      originDropZoneRoot.appendChild(draggedEl);
-       // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
-       function keepOriginalElementInDom() {
--        if (!originalDragTarget.parentElement) {
--          originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
--          originDropZoneRoot.appendChild(originalDragTarget);
--          // have to watch before we hide, otherwise Svelte 5 $state gets confused
--          watchDraggedElement();
--          hideElement(originalDragTarget);
--          // after the removal of the original element we can give the shadow element the original item id so that the host zone can find it and render it correctly if it does lookups by id
--          shadowElData[ITEM_ID_KEY] = draggedElData[ITEM_ID_KEY];
-+        if (!draggedEl.parentElement) {
-+          originDropZoneRoot.appendChild(draggedEl);
-           // to prevent the outline from disappearing
-           draggedEl.focus();
-+          watchDraggedElement();
-+          hideElement(originalDragTarget);
-+          originDropZoneRoot.appendChild(originalDragTarget);
-         } else {
-           window.requestAnimationFrame(keepOriginalElementInDom);
-         }
-@@ -1931,7 +1690,7 @@
-       });
- 
-       // removing the original element by removing its data entry
--      items.splice(currentIdx, 1, shadowElData);
-+      items.splice(currentIdx, 1, placeHolderElData);
-       unlockOriginDzMinDimensions = preventShrinking(originDropZone);
-       dispatchConsiderEvent(originDropZone, items, {
-         trigger: TRIGGERS.DRAG_STARTED,
-@@ -1961,6 +1720,10 @@
-         dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
-         _ref2$type = _ref2.type,
-         newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE$1 : _ref2$type,
-+        _ref2$constrainAxisX = _ref2.constrainAxisX,
-+        constrainAxisX = _ref2$constrainAxisX === void 0 ? false : _ref2$constrainAxisX,
-+        _ref2$constrainAxisY = _ref2.constrainAxisY,
-+        constrainAxisY = _ref2$constrainAxisY === void 0 ? false : _ref2$constrainAxisY,
-         _ref2$dragDisabled = _ref2.dragDisabled,
-         dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-         _ref2$morphDisabled = _ref2.morphDisabled,
-@@ -1974,29 +1737,20 @@
-         _ref2$transformDragge = _ref2.transformDraggedElement,
-         transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
-         _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
--        centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn,
--        _ref2$dropAnimationDi = _ref2.dropAnimationDisabled,
--        dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
--        _ref2$delayTouchStart = _ref2.delayTouchStart,
--        delayTouchStartOpt = _ref2$delayTouchStart === void 0 ? false : _ref2$delayTouchStart;
-+        centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
-       config.dropAnimationDurationMs = dropAnimationDurationMs;
--      var effectiveDelayMs = 0;
--      if (delayTouchStartOpt === true) {
--        effectiveDelayMs = DEFAULT_TOUCH_DELAY_MS;
--      } else if (typeof delayTouchStartOpt === "number" && isFinite(delayTouchStartOpt) && delayTouchStartOpt >= 0) {
--        effectiveDelayMs = delayTouchStartOpt;
--      }
--      config.delayTouchStartMs = effectiveDelayMs;
-       if (config.type && newType !== config.type) {
-         unregisterDropZone$1(node, config.type);
-       }
-       config.type = newType;
-+      registerDropZone$1(node, newType);
-       config.items = _toConsumableArray(items);
-+      config.constrainAxisX = constrainAxisX;
-+      config.constrainAxisY = constrainAxisY;
-       config.dragDisabled = dragDisabled;
-       config.morphDisabled = morphDisabled;
-       config.transformDraggedElement = transformDraggedElement;
-       config.centreDraggedOnCursor = centreDraggedOnCursor;
--      config.dropAnimationDisabled = dropAnimationDisabled;
- 
-       // realtime update for dropTargetStyle
-       if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
-@@ -2035,16 +1789,15 @@
-       }
-       config.dropFromOthersDisabled = dropFromOthersDisabled;
-       dzToConfig$1.set(node, config);
--      registerDropZone$1(node, newType);
--      var shadowElIdx = isWorkingOnPreviousDrag ? findShadowElementIdx(config.items) : -1;
-+      var shadowElIdx = findShadowElementIdx(config.items);
-       for (var idx = 0; idx < node.children.length; idx++) {
-         var draggableEl = node.children[idx];
-         styleDraggable(draggableEl, dragDisabled);
-         if (idx === shadowElIdx) {
-+          config.transformDraggedElement(draggedEl, draggedElData, idx);
-           if (!morphDisabled) {
-             morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y);
-           }
--          config.transformDraggedElement(draggedEl, draggedElData, idx);
-           decorateShadowEl(draggableEl);
-           continue;
-         }
-@@ -2078,7 +1831,7 @@
-           unregisterDropZone$1(node, dzToConfig$1.get(node).type);
-           dzToConfig$1["delete"](node);
-         }
--        if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
-+        if (isWorkingOnPreviousDrag) {
-           printDebug(function () {
-             return "pointer dndzone will be scheduled for destruction";
-           });
-@@ -2356,7 +2109,6 @@
-       type: undefined,
-       dragDisabled: false,
-       zoneTabIndex: 0,
--      zoneItemTabIndex: 0,
-       dropFromOthersDisabled: false,
-       dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
-       dropTargetClasses: [],
-@@ -2486,7 +2238,7 @@
-       var children = Array.from(node.children);
-       var focusedItemIdx = children.indexOf(draggableEl);
-       focusedItem = draggableEl;
--      focusedItem.tabIndex = config.zoneItemTabIndex;
-+      focusedItem.tabIndex = 0;
-       focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
-       focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
-     }
-@@ -2499,8 +2251,6 @@
-         dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-         _ref2$zoneTabIndex = _ref2.zoneTabIndex,
-         zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
--        _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
--        zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
-         _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
-         dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
-         _ref2$dropTargetStyle = _ref2.dropTargetStyle,
-@@ -2513,7 +2263,6 @@
-       config.dragDisabled = dragDisabled;
-       config.dropFromOthersDisabled = dropFromOthersDisabled;
-       config.zoneTabIndex = zoneTabIndex;
--      config.zoneItemTabIndex = zoneItemTabIndex;
-       config.dropTargetStyle = dropTargetStyle;
-       config.dropTargetClasses = dropTargetClasses;
-       config.autoAriaDisabled = autoAriaDisabled;
-@@ -2537,7 +2286,7 @@
-       var _loop = function _loop(i) {
-         var draggableEl = node.children[i];
-         allDragTargets.add(draggableEl);
--        draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
-+        draggableEl.tabIndex = isDragging ? -1 : 0;
-         if (!autoAriaDisabled) {
-           draggableEl.setAttribute("role", "listitem");
-         }
-@@ -2558,7 +2307,7 @@
-           });
-           // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
-           focusedItem = draggableEl;
--          focusedItem.tabIndex = config.zoneItemTabIndex;
-+          focusedItem.tabIndex = 0;
-           // without this the element loses focus if it moves backwards in the list
-           draggableEl.focus();
-         }
-@@ -2588,7 +2337,7 @@
-     return handles;
-   }
- 
--  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "delayTouchStart", "dropAnimationDisabled"];
-+  var _excluded = ["items", "flipDurationMs", "type", "constrainAxisX", "constrainAxisY", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
- 
-   /**
-    * A custom action to turn any container to a dnd zone and all of its direct children to draggables
-@@ -2600,28 +2349,20 @@
-    * @property {array} items - the list of items that was used to generate the children of the given node (the list used in the #each block
-    * @property {string} [type] - the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, default to a base type
-    * @property {number} [flipDurationMs] - if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict, defaults to zero
-+   * @property {boolean} [constrainAxisX] - Constrain dragging by X axis. Drag will be allowed only by Y axis.
-+   * @property {boolean} [constrainAxisY] - Constrain dragging by Y axis. Drag will be allowed only by X axis.
-    * @property {boolean} [dragDisabled]
-    * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
-    * @property {boolean} [dropFromOthersDisabled]
-    * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
--   * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
-    * @property {object} [dropTargetStyle]
-    * @property {string[]} [dropTargetClasses]
--   * @property {boolean|number} [delayTouchStart] - On touch devices, wait this long before converting the gesture to a drag.
--   * `true` uses the built-in default (80 ms).
--   * @property {boolean} [dropAnimationDisabled] - cancels the drop animation to place
-    * @property {function} [transformDraggedElement]
-    * @param {HTMLElement} node - the element to enhance
-    * @param {Options} options
-    * @return {{update: function, destroy: function}}
-    */
-   function dndzone(node, options) {
--    if (shouldIgnoreZone(node)) {
--      return {
--        update: function update() {},
--        destroy: function destroy() {}
--      };
--    }
-     validateOptions(options);
-     var pointerZone = dndzone$2(node, options);
-     var keyboardZone = dndzone$1(node, options);
-@@ -2637,33 +2378,22 @@
-       }
-     };
-   }
--
--  /**
--   * If the user marked something in the ancestry of our node as shadow element, we can ignore it
--   * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
--   * @param {HTMLElement} node
--   * @return {boolean}
--   */
--  function shouldIgnoreZone(node) {
--    return !!node.closest("[".concat(SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME, "=\"true\"]"));
--  }
-   function validateOptions(options) {
-     /*eslint-disable*/
-     var items = options.items;
-       options.flipDurationMs;
-       options.type;
-+      options.constrainAxisX;
-+      options.constrainAxisY;
-       options.dragDisabled;
-       options.morphDisabled;
-       options.dropFromOthersDisabled;
--      var zoneTabIndex = options.zoneTabIndex,
--      zoneItemTabIndex = options.zoneItemTabIndex;
-+      var zoneTabIndex = options.zoneTabIndex;
-       options.dropTargetStyle;
-       var dropTargetClasses = options.dropTargetClasses;
-       options.transformDraggedElement;
-       options.autoAriaDisabled;
-       options.centreDraggedOnCursor;
--      var delayTouchStart = options.delayTouchStart;
--      options.dropAnimationDisabled;
-       var rest = _objectWithoutProperties(options, _excluded);
-     /*eslint-enable*/
-     if (Object.keys(rest).length > 0) {
-@@ -2684,16 +2414,6 @@
-     if (zoneTabIndex && !isInt(zoneTabIndex)) {
-       throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
-     }
--    if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
--      throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
--    }
--    if (delayTouchStart !== undefined && delayTouchStart !== false) {
--      var validBoolean = delayTouchStart === true;
--      var validNumber = typeof delayTouchStart === "number" && isFinite(delayTouchStart) && delayTouchStart >= 0;
--      if (!validBoolean && !validNumber) {
--        throw new Error("delayTouchStart should be a boolean (true/false) or a non-negative number but instead it is a ".concat(_typeof(delayTouchStart), ", ").concat(toString(delayTouchStart)));
--      }
--    }
-   }
-   function isInt(value) {
-     return !isNaN(value) && function (x) {
-@@ -2701,165 +2421,15 @@
-     }(parseFloat(value));
-   }
- 
--  function createStore(initialValue) {
--    var _val = initialValue;
--    var subs = new Set();
--    return {
--      get: function get() {
--        return _val;
--      },
--      set: function set(newVal) {
--        _val = newVal;
--        Array.from(subs).forEach(function (cb) {
--          return cb(_val);
--        });
--      },
--      subscribe: function subscribe(cb) {
--        subs.add(cb);
--        cb(_val);
--      },
--      unsubscribe: function unsubscribe(cb) {
--        subs["delete"](cb);
--      }
--    };
--  }
--
--  var isItemsDragDisabled = createStore(true);
--  var userDragDisabled = createStore(false);
--  function getAddedOptions() {
--    return {
--      dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
--      zoneItemTabIndex: -1
--    };
--  }
--
--  /**
--   * This is an action that wraps around the dndzone action to make it easy to work with drag handles
--   * When using this you must also use the 'dragHandle' action (see below) on an element inside each item within the zone
--   * Credit for the idea and initial implementation goes to @gleuch (Greg Leuch) and @geovie (Georg Vienna)
--   *
--   * @param {HTMLElement} node
--   * @param options - will be passed down to the dndzone
--   * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
--   */
--  function dragHandleZone(node, options) {
--    var _options$dragDisabled;
--    // Initialise stores from initial options
--    userDragDisabled.set((_options$dragDisabled = options === null || options === void 0 ? void 0 : options.dragDisabled) !== null && _options$dragDisabled !== void 0 ? _options$dragDisabled : false);
--    var currentOptions = options;
--    var zone = dndzone(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
--    function updateZone() {
--      zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
--    }
--
--    // Subscribe to internal store so finishing a drag updates the zone
--    isItemsDragDisabled.subscribe(updateZone);
--
--    // We don't need to subscribe to userDragDisabled here because updates to
--    // it always come through the `update` lifecycle and will call `updateZone`
--    // anyway.
--
--    function consider(e) {
--      var _e$detail$info = e.detail.info,
--        source = _e$detail$info.source,
--        trigger = _e$detail$info.trigger;
--      // Ensure dragging is stopped on drag finish via keyboard
--      if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
--        isItemsDragDisabled.set(true);
--      }
--    }
--    function finalize(e) {
--      var source = e.detail.info.source;
--      // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
--      if (source === SOURCES.POINTER) {
--        isItemsDragDisabled.set(true);
--      }
--    }
--    node.addEventListener("consider", consider);
--    node.addEventListener("finalize", finalize);
--    return {
--      update: function update(newOptions) {
--        var _currentOptions$dragD, _currentOptions;
--        currentOptions = newOptions;
--        // keep store in sync with external prop
--        userDragDisabled.set((_currentOptions$dragD = (_currentOptions = currentOptions) === null || _currentOptions === void 0 ? void 0 : _currentOptions.dragDisabled) !== null && _currentOptions$dragD !== void 0 ? _currentOptions$dragD : false);
--        updateZone();
--      },
--      destroy: function destroy() {
--        node.removeEventListener("consider", consider);
--        node.removeEventListener("finalize", finalize);
--        isItemsDragDisabled.unsubscribe(updateZone);
--      }
--    };
--  }
--
--  /**
--   * This should be used to mark drag handles inside items that belong to a 'dragHandleZone' (see above)
--   * @param {HTMLElement} handle
--   * @return {{update: *, destroy: *}}
--   */
--  function dragHandle(handle) {
--    handle.setAttribute("role", "button");
--    function startDrag(e) {
--      // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
--      e.preventDefault();
--      isItemsDragDisabled.set(false);
--
--      // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
--      window.addEventListener("mouseup", resetStartDrag);
--      window.addEventListener("touchend", resetStartDrag);
--    }
--    function handleKeyDown(e) {
--      if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
--    }
--    function resetStartDrag() {
--      isItemsDragDisabled.set(true);
--      window.removeEventListener("mouseup", resetStartDrag);
--      window.removeEventListener("touchend", resetStartDrag);
--    }
--    var recomputeHandleState = function recomputeHandleState() {
--      var userDisabled = userDragDisabled.get();
--      var internalDisabled = isItemsDragDisabled.get();
--      if (userDisabled) {
--        handle.tabIndex = -1;
--        handle.style.cursor = ""; // default cursor
--      } else {
--        handle.tabIndex = internalDisabled ? 0 : -1;
--        handle.style.cursor = internalDisabled ? "grab" : "grabbing";
--      }
--    };
--
--    // Subscribe to both stores
--    userDragDisabled.subscribe(recomputeHandleState);
--    isItemsDragDisabled.subscribe(recomputeHandleState);
--    handle.addEventListener("mousedown", startDrag);
--    handle.addEventListener("touchstart", startDrag);
--    handle.addEventListener("keydown", handleKeyDown);
--    return {
--      update: function update() {},
--      destroy: function destroy() {
--        handle.removeEventListener("mousedown", startDrag);
--        handle.removeEventListener("touchstart", startDrag);
--        handle.removeEventListener("keydown", handleKeyDown);
--        userDragDisabled.unsubscribe(recomputeHandleState);
--        isItemsDragDisabled.unsubscribe(recomputeHandleState);
--      }
--    };
--  }
--
-   exports.DRAGGED_ELEMENT_ID = DRAGGED_ELEMENT_ID;
--  exports.FEATURE_FLAG_NAMES = FEATURE_FLAG_NAMES;
-   exports.SHADOW_ITEM_MARKER_PROPERTY_NAME = SHADOW_ITEM_MARKER_PROPERTY_NAME;
-   exports.SHADOW_PLACEHOLDER_ITEM_ID = SHADOW_PLACEHOLDER_ITEM_ID;
-   exports.SOURCES = SOURCES;
-   exports.TRIGGERS = TRIGGERS;
-   exports.alertToScreenReader = alertToScreenReader;
-   exports.dndzone = dndzone;
--  exports.dragHandle = dragHandle;
--  exports.dragHandleZone = dragHandleZone;
-   exports.overrideItemIdKeyNameBeforeInitialisingDndZones = overrideItemIdKeyNameBeforeInitialisingDndZones;
-   exports.setDebugMode = setDebugMode;
--  exports.setFeatureFlag = setFeatureFlag;
- 
-   Object.defineProperty(exports, '__esModule', { value: true });
- 
-diff --git a/dist/index.mjs b/dist/index.mjs
-index f48ea5f23aa3547cd68e6541aacabac3504bf0a5..a03b368f5d5bc683331a383e10598cfc8ea99090 100644
---- a/dist/index.mjs
-+++ b/dist/index.mjs
-@@ -288,8 +288,7 @@ var SOURCES = {
-   KEYBOARD: "keyboard"
- };
- var SHADOW_ITEM_MARKER_PROPERTY_NAME = "isDndShadowItem";
--var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-internal";
--var SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item-hint";
-+var SHADOW_ELEMENT_ATTRIBUTE_NAME = "data-is-dnd-shadow-item";
- var SHADOW_PLACEHOLDER_ITEM_ID = "id:dnd-shadow-placeholder-0000";
- var DRAGGED_ELEMENT_ID = "dnd-action-dragged-el";
- var ITEM_ID_KEY = "id";
-@@ -327,7 +326,7 @@ var printDebug = function printDebug() {};
- 
- /**
-  * Allows the user to show/hide console debug output
-- * * @param {boolean} isDebug
-+ * * @param {Boolean} isDebug
-  */
- function setDebugMode(isDebug) {
-   if (isDebug) {
-@@ -350,13 +349,11 @@ function setDebugMode(isDebug) {
- /**
-  * Gets the bounding rect but removes transforms (ex: flip animation)
-  * @param {HTMLElement} el
-- * @param {boolean} [onlyVisible] - use the visible rect defaults to true
-  * @return {{top: number, left: number, bottom: number, right: number}}
-  */
- function getBoundingRectNoTransforms(el) {
--  var onlyVisible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-   var ta;
--  var rect = onlyVisible ? getVisibleRectRecursive(el) : el.getBoundingClientRect();
-+  var rect = el.getBoundingClientRect();
-   var style = getComputedStyle(el);
-   var tx = style.transform;
-   if (tx) {
-@@ -497,58 +494,30 @@ function calcDistanceBetweenCenters(elA, elB) {
- 
- /**
-  * @param {HTMLElement} el - the element to check
-- * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
-+ * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
-  */
- function isElementOffDocument(el) {
-   var rect = getAbsoluteRect(el);
-   return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
- }
--function getVisibleRectRecursive(element) {
--  var rect = element.getBoundingClientRect();
--  var visibleRect = {
--    top: rect.top,
--    bottom: rect.bottom,
--    left: rect.left,
--    right: rect.right
--  };
- 
--  // Traverse up the DOM hierarchy, checking for scrollable ancestors
--  var parent = element.parentElement;
--  while (parent && parent !== document.body) {
--    var parentRect = parent.getBoundingClientRect();
--
--    // Check if the parent has a scrollable overflow
--    var overflowY = window.getComputedStyle(parent).overflowY;
--    var overflowX = window.getComputedStyle(parent).overflowX;
--    var isScrollableY = overflowY === "scroll" || overflowY === "auto";
--    var isScrollableX = overflowX === "scroll" || overflowX === "auto";
--
--    // Constrain the visible area to the parent's visible area
--    if (isScrollableY) {
--      visibleRect.top = Math.max(visibleRect.top, parentRect.top);
--      visibleRect.bottom = Math.min(visibleRect.bottom, parentRect.bottom);
--    }
--    if (isScrollableX) {
--      visibleRect.left = Math.max(visibleRect.left, parentRect.left);
--      visibleRect.right = Math.min(visibleRect.right, parentRect.right);
--    }
--    parent = parent.parentElement;
-+/**
-+ * If the point is inside the element returns its distances from the sides, otherwise returns null
-+ * @param {Point} point
-+ * @param {HTMLElement} el
-+ * @return {null|{top: number, left: number, bottom: number, right: number}}
-+ */
-+function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-+  var rect = getAbsoluteRect(el);
-+  if (!isPointInsideRect(point, rect)) {
-+    return null;
-   }
--
--  // Finally, constrain the visible rect to the viewport
--  visibleRect.top = Math.max(visibleRect.top, 0);
--  visibleRect.bottom = Math.min(visibleRect.bottom, window.innerHeight);
--  visibleRect.left = Math.max(visibleRect.left, 0);
--  visibleRect.right = Math.min(visibleRect.right, window.innerWidth);
--
--  // Return the visible rectangle, ensuring that all values are valid
-   return {
--    top: visibleRect.top,
--    bottom: visibleRect.bottom,
--    left: visibleRect.left,
--    right: visibleRect.right,
--    width: Math.max(0, visibleRect.right - visibleRect.left),
--    height: Math.max(0, visibleRect.bottom - visibleRect.top)
-+    top: point.y - rect.top,
-+    bottom: rect.bottom - point.y,
-+    left: point.x - rect.left,
-+    // TODO - figure out what is so special about right (why the rect is too big)
-+    right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-   };
- }
- 
-@@ -565,6 +534,17 @@ function resetIndexesCache() {
- }
- resetIndexesCache();
- 
-+/**
-+ * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
-+ * @param {HTMLElement} dz
-+ */
-+function resetIndexesCacheForDz(dz) {
-+  printDebug(function () {
-+    return "resetting indexes cache for dz";
-+  });
-+  dzToShadowIndexToRect["delete"](dz);
-+}
-+
- /**
-  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
-  * Helpful in order to determine "would be index" more effectively
-@@ -641,35 +621,105 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
-       indexOfMin = _i;
-     }
-   }
-+  return {
-+    index: indexOfMin,
-+    isProximityBased: true
-+  };
-+}
- 
--  // -------- Phantom slot check --------
--  // Regardless of layout (simple vertical list, flex-wrap, grid, floats …) the
--  // visually closest drop target can be *after* the current last **real** child.
--  // In simple layouts the would be index from the existing children would always be the last index
--  // but in more complex layouts (flex-wrap, grid, floats …) it can be any index.
--  // The problem is we can't predict where an additional element would be rendered in the general case,
--  // We therefore create a temporary, invisible clone of that last element, let
--  // the browser position it, measure the distance, and remove it immediately
--  // (same task → no paint).  This leaves `children` back in its original state
--  // before we exit the function, so existing index-caching logic and shadow-
--  // element bookkeeping continue to work unchanged.
--  if (children.length > 0) {
--    var originalLen = children.length; // before we append the phantom
--    var template = children[originalLen - 1];
--    var phantom = template.cloneNode(false); // shallow clone is enough for size
--    phantom.style.visibility = "hidden";
--    phantom.style.pointerEvents = "none";
--    collectionBelowEl.appendChild(phantom);
--    var phantomDistance = calcDistanceBetweenCenters(floatingAboveEl, phantom);
--    if (phantomDistance < minDistanceSoFar) {
--      indexOfMin = originalLen; // index of phantom slot in original list
-+var SCROLL_ZONE_PX = 25;
-+function makeScroller() {
-+  var scrollingInfo;
-+  function resetScrolling() {
-+    scrollingInfo = {
-+      directionObj: undefined,
-+      stepPx: 0
-+    };
-+  }
-+  resetScrolling();
-+  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-+  function scrollContainer(containerEl) {
-+    var _scrollingInfo = scrollingInfo,
-+      directionObj = _scrollingInfo.directionObj,
-+      stepPx = _scrollingInfo.stepPx;
-+    if (directionObj) {
-+      containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-+      window.requestAnimationFrame(function () {
-+        return scrollContainer(containerEl);
-+      });
-     }
-+  }
-+  function calcScrollStepPx(distancePx) {
-+    return SCROLL_ZONE_PX - distancePx;
-+  }
- 
--    collectionBelowEl.removeChild(phantom);
-+  /**
-+   * If the pointer is next to the sides of the element to scroll, will trigger scrolling
-+   * Can be called repeatedly with updated pointer and elementToScroll values without issues
-+   * @return {boolean} - true if scrolling was needed
-+   */
-+  function scrollIfNeeded(pointer, elementToScroll) {
-+    if (!elementToScroll) {
-+      return false;
-+    }
-+    var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-+    if (distances === null) {
-+      resetScrolling();
-+      return false;
-+    }
-+    var isAlreadyScrolling = !!scrollingInfo.directionObj;
-+    var scrollingVertically = false,
-+      scrollingHorizontally = false;
-+    // vertical
-+    if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
-+      if (distances.bottom < SCROLL_ZONE_PX) {
-+        scrollingVertically = true;
-+        scrollingInfo.directionObj = {
-+          x: 0,
-+          y: 1
-+        };
-+        scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
-+      } else if (distances.top < SCROLL_ZONE_PX) {
-+        scrollingVertically = true;
-+        scrollingInfo.directionObj = {
-+          x: 0,
-+          y: -1
-+        };
-+        scrollingInfo.stepPx = calcScrollStepPx(distances.top);
-+      }
-+      if (!isAlreadyScrolling && scrollingVertically) {
-+        scrollContainer(elementToScroll);
-+        return true;
-+      }
-+    }
-+    // horizontal
-+    if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
-+      if (distances.right < SCROLL_ZONE_PX) {
-+        scrollingHorizontally = true;
-+        scrollingInfo.directionObj = {
-+          x: 1,
-+          y: 0
-+        };
-+        scrollingInfo.stepPx = calcScrollStepPx(distances.right);
-+      } else if (distances.left < SCROLL_ZONE_PX) {
-+        scrollingHorizontally = true;
-+        scrollingInfo.directionObj = {
-+          x: -1,
-+          y: 0
-+        };
-+        scrollingInfo.stepPx = calcScrollStepPx(distances.left);
-+      }
-+      if (!isAlreadyScrolling && scrollingHorizontally) {
-+        scrollContainer(elementToScroll);
-+        return true;
-+      }
-+    }
-+    resetScrolling();
-+    return false;
-   }
-   return {
--    index: indexOfMin,
--    isProximityBased: true
-+    scrollIfNeeded: scrollIfNeeded,
-+    resetScrolling: resetScrolling
-   };
- }
- 
-@@ -736,20 +786,21 @@ function areArraysShallowEqualSameOrder(arrA, arrB) {
-   return true;
- }
- 
--var INTERVAL_MS = 200;
-+var INTERVAL_MS$1 = 200;
- var TOLERANCE_PX = 10;
--var next;
-+var _makeScroller$1 = makeScroller(),
-+  scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-+  resetScrolling$1 = _makeScroller$1.resetScrolling;
-+var next$1;
- 
- /**
-  * Tracks the dragged elements and performs the side effects when it is dragged over a drop zone (basically dispatching custom-events scrolling)
-  * @param {Set<HTMLElement>} dropZones
-  * @param {HTMLElement} draggedEl
-  * @param {number} [intervalMs = INTERVAL_MS]
-- * @param {MultiScroller} multiScroller
-  */
- function observe(draggedEl, dropZones) {
--  var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
--  var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
-+  var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS$1;
-   // initialization
-   var lastDropZoneFound;
-   var lastIndexFound;
-@@ -765,10 +816,10 @@ function observe(draggedEl, dropZones) {
-    */
-   function andNow() {
-     var currentCenterOfDragged = findCenterOfElement(draggedEl);
--    var scrolled = multiScroller.multiScrollIfNeeded();
-+    var scrolled = scrollIfNeeded$1(currentCenterOfDragged, lastDropZoneFound);
-     // we only want to make a new decision after the element was moved a bit to prevent flickering
-     if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
--      next = window.setTimeout(andNow, intervalMs);
-+      next$1 = window.setTimeout(andNow, intervalMs);
-       return;
-     }
-     if (isElementOffDocument(draggedEl)) {
-@@ -786,7 +837,7 @@ function observe(draggedEl, dropZones) {
-     try {
-       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-         var dz = _step.value;
--        if (scrolled) resetIndexesCache();
-+        if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
-         var indexObj = findWouldBeIndex(draggedEl, dz);
-         if (indexObj === null) {
-           // it is not inside
-@@ -820,7 +871,7 @@ function observe(draggedEl, dropZones) {
-     } else {
-       lastIsDraggedInADropZone = true;
-     }
--    next = window.setTimeout(andNow, intervalMs);
-+    next$1 = window.setTimeout(andNow, intervalMs);
-   }
-   andNow();
- }
-@@ -830,230 +881,62 @@ function unobserve() {
-   printDebug(function () {
-     return "unobserving";
-   });
--  clearTimeout(next);
-+  clearTimeout(next$1);
-+  resetScrolling$1();
-   resetIndexesCache();
- }
- 
--var SCROLL_ZONE_PX = 30;
-+var INTERVAL_MS = 300;
-+var mousePosition;
- 
- /**
-- * Will make a scroller that can scroll any element given to it in any direction
-- * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
-+ * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
-+ * // TODO - make private (remove export)
-+ * @param {{clientX: number, clientY: number}} e
-  */
--function makeScroller() {
--  var scrollingInfo;
--  function resetScrolling() {
--    scrollingInfo = {
--      directionObj: undefined,
--      stepPx: 0
--    };
--  }
--  resetScrolling();
--  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
--  function scrollContainer(containerEl) {
--    var _scrollingInfo = scrollingInfo,
--      directionObj = _scrollingInfo.directionObj,
--      stepPx = _scrollingInfo.stepPx;
--    if (directionObj) {
--      containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
--      window.requestAnimationFrame(function () {
--        return scrollContainer(containerEl);
--      });
--    }
--  }
--  function calcScrollStepPx(distancePx) {
--    return SCROLL_ZONE_PX - distancePx;
--  }
--
--  /**
--   * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
--   * @param {HTMLElement} elementToScroll - the scroll container
--   * If the pointer is next to the sides of the element to scroll, will trigger scrolling
--   * Can be called repeatedly with updated pointer and elementToScroll values without issues
--   * @return {boolean} - true if scrolling was needed
--   */
--  function scrollIfNeeded(pointer, elementToScroll) {
--    if (!elementToScroll) {
--      return false;
--    }
--    var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
--    var isAlreadyScrolling = !!scrollingInfo.directionObj;
--    if (distances === null) {
--      if (isAlreadyScrolling) resetScrolling();
--      return false;
--    }
--    var scrollingVertically = false,
--      scrollingHorizontally = false;
--    // vertical
--    if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
--      if (distances.bottom < SCROLL_ZONE_PX) {
--        scrollingVertically = true;
--        scrollingInfo.directionObj = {
--          x: 0,
--          y: 1
--        };
--        scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
--      } else if (distances.top < SCROLL_ZONE_PX) {
--        scrollingVertically = true;
--        scrollingInfo.directionObj = {
--          x: 0,
--          y: -1
--        };
--        scrollingInfo.stepPx = calcScrollStepPx(distances.top);
--      }
--      if (!isAlreadyScrolling && scrollingVertically) {
--        scrollContainer(elementToScroll);
--        return true;
--      }
--    }
--    // horizontal
--    if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
--      if (distances.right < SCROLL_ZONE_PX) {
--        scrollingHorizontally = true;
--        scrollingInfo.directionObj = {
--          x: 1,
--          y: 0
--        };
--        scrollingInfo.stepPx = calcScrollStepPx(distances.right);
--      } else if (distances.left < SCROLL_ZONE_PX) {
--        scrollingHorizontally = true;
--        scrollingInfo.directionObj = {
--          x: -1,
--          y: 0
--        };
--        scrollingInfo.stepPx = calcScrollStepPx(distances.left);
--      }
--      if (!isAlreadyScrolling && scrollingHorizontally) {
--        scrollContainer(elementToScroll);
--        return true;
--      }
--    }
--    resetScrolling();
--    return false;
--  }
--  return {
--    scrollIfNeeded: scrollIfNeeded,
--    resetScrolling: resetScrolling
-+function updateMousePosition(e) {
-+  var c = e.touches ? e.touches[0] : e;
-+  mousePosition = {
-+    x: c.clientX,
-+    y: c.clientY
-   };
- }
--
--/**
-- * If the point is inside the element returns its distances from the sides, otherwise returns null
-- * @param {Point} point
-- * @param {HTMLElement} el
-- * @return {null|{top: number, left: number, bottom: number, right: number}}
-- */
--function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
--  // Even if the scrolling element is small it acts as a scroller for the viewport
--  var rect = el === document.scrollingElement ? {
--    top: 0,
--    bottom: window.innerHeight,
--    left: 0,
--    right: window.innerWidth
--  } : el.getBoundingClientRect();
--  if (!isPointInsideRect(point, rect)) {
--    return null;
-+var _makeScroller = makeScroller(),
-+  scrollIfNeeded = _makeScroller.scrollIfNeeded,
-+  resetScrolling = _makeScroller.resetScrolling;
-+var next;
-+function loop() {
-+  if (mousePosition) {
-+    var scrolled = scrollIfNeeded(mousePosition, document.documentElement);
-+    if (scrolled) resetIndexesCache();
-   }
--  return {
--    top: point.y - rect.top,
--    bottom: rect.bottom - point.y,
--    left: point.x - rect.left,
--    right: rect.right - point.x
--  };
-+  next = window.setTimeout(loop, INTERVAL_MS);
- }
- 
- /**
-- @typedef {Object} MultiScroller
-- @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
--/**
-- * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
-- * @param {HTMLElement[]} baseElementsForScrolling
-- * @param {function():Point} getPointerPosition
-- * @return {MultiScroller}
-+ * will start watching the mouse pointer and scroll the window if it goes next to the edges
-  */
--function createMultiScroller() {
--  var baseElementsForScrolling = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
--  var getPointerPosition = arguments.length > 1 ? arguments[1] : undefined;
-+function armWindowScroller() {
-   printDebug(function () {
--    return "creating multi-scroller";
-+    return "arming window scroller";
-   });
--  var scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
--  var scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort(function (dz1, dz2) {
--    return getDepth(dz2) - getDepth(dz1);
--  });
--  var _makeScroller = makeScroller(),
--    scrollIfNeeded = _makeScroller.scrollIfNeeded,
--    resetScrolling = _makeScroller.resetScrolling;
--
--  /**
--   * @return {boolean} - was any container scrolled
--   */
--  function tick() {
--    var mousePosition = getPointerPosition();
--    if (!mousePosition || !scrollingContainersDeepToShallow) {
--      return false;
--    }
--    var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
--      return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
--    });
--    for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
--      var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
--      if (scrolled) {
--        return true;
--      }
--    }
--    return false;
--  }
--  return {
--    multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : function () {
--      return false;
--    },
--    destroy: function destroy() {
--      return resetScrolling();
--    }
--  };
-+  window.addEventListener("mousemove", updateMousePosition);
-+  window.addEventListener("touchmove", updateMousePosition);
-+  loop();
- }
- 
--// internal utils
--function findScrollableParents(element) {
--  if (!element) {
--    return [];
--  }
--  var scrollableContainers = [];
--  var parent = element;
--  while (parent) {
--    var _window$getComputedSt = window.getComputedStyle(parent),
--      overflow = _window$getComputedSt.overflow;
--    if (overflow.split(" ").some(function (o) {
--      return o.includes("auto") || o.includes("scroll");
--    })) {
--      scrollableContainers.push(parent);
--    }
--    parent = parent.parentElement;
--  }
--  return scrollableContainers;
--}
--function findRelevantScrollContainers(dropZones) {
--  var scrollingContainers = new Set();
--  var _iterator = _createForOfIteratorHelper(dropZones),
--    _step;
--  try {
--    for (_iterator.s(); !(_step = _iterator.n()).done;) {
--      var dz = _step.value;
--      findScrollableParents(dz).forEach(function (container) {
--        return scrollingContainers.add(container);
--      });
--    }
--    // The scrolling element might have overflow visible and still be scrollable
--  } catch (err) {
--    _iterator.e(err);
--  } finally {
--    _iterator.f();
--  }
--  if (document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight || document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight) {
--    scrollingContainers.add(document.scrollingElement);
--  }
--  return scrollingContainers;
-+/**
-+ * will stop watching the mouse pointer and won't scroll the window anymore
-+ */
-+function disarmWindowScroller() {
-+  printDebug(function () {
-+    return "disarming window scroller";
-+  });
-+  window.removeEventListener("mousemove", updateMousePosition);
-+  window.removeEventListener("touchmove", updateMousePosition);
-+  mousePosition = undefined;
-+  window.clearTimeout(next);
-+  resetScrolling();
- }
- 
- /**
-@@ -1061,15 +944,15 @@ function findRelevantScrollContainers(dropZones) {
-  * Since svelte manages select value internally.
-  * @see https://github.com/sveltejs/svelte/issues/6717
-  * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
-- *
-- * @param {HTMLElement} el
-- * @returns
-+ * 
-+ * @param {HTMLElement} el 
-+ * @returns 
-  */
- function svelteNodeClone(el) {
-   var cloned = el.cloneNode(true);
-   var values = [];
-   var elIsSelect = el.tagName === "SELECT";
--  var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll("select"));
-+  var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
-   var _iterator = _createForOfIteratorHelper(selects),
-     _step;
-   try {
-@@ -1082,62 +965,21 @@ function svelteNodeClone(el) {
-   } finally {
-     _iterator.f();
-   }
--  if (selects.length > 0) {
--    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll("select"));
--    for (var i = 0; i < clonedSelects.length; i++) {
--      var select = clonedSelects[i];
--      var value = values[i];
--      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
--      if (optionEl) {
--        optionEl.setAttribute("selected", true);
--      }
--    }
-+  if (selects.length <= 0) {
-+    return cloned;
-   }
--  var elIsCanvas = el.tagName === "CANVAS";
--  var canvases = elIsCanvas ? [el] : _toConsumableArray(el.querySelectorAll("canvas"));
--  if (canvases.length > 0) {
--    var clonedCanvases = elIsCanvas ? [cloned] : _toConsumableArray(cloned.querySelectorAll("canvas"));
--    for (var _i = 0; _i < clonedCanvases.length; _i++) {
--      var canvas = canvases[_i];
--      var clonedCanvas = clonedCanvases[_i];
--      clonedCanvas.width = canvas.width;
--      clonedCanvas.height = canvas.height;
--      if (canvas.width > 0 && canvas.height > 0) {
--        clonedCanvas.getContext("2d").drawImage(canvas, 0, 0);
--      }
-+  var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
-+  for (var i = 0; i < clonedSelects.length; i++) {
-+    var select = clonedSelects[i];
-+    var value = values[i];
-+    var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
-+    if (optionEl) {
-+      optionEl.setAttribute('selected', true);
-     }
-   }
-   return cloned;
- }
- 
--/**
-- * @type {{USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT: string}}
-- */
--var FEATURE_FLAG_NAMES = Object.freeze({
--  // This flag exists as a workaround for issue 454 (basically a browser bug) - seems like these rect values take time to update when in grid layout. Setting it to true can cause strange behaviour in the REPL for non-grid zones, see issue 470
--  USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT: "USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT"
--});
--var featureFlagsMap = _defineProperty({}, FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT, false);
--
--/**
-- * @param {FEATURE_FLAG_NAMES} flagName
-- * @param {boolean} flagValue
-- */
--function setFeatureFlag(flagName, flagValue) {
--  if (!FEATURE_FLAG_NAMES[flagName]) throw new Error("Can't set non existing feature flag ".concat(flagName, "! Supported flags: ").concat(Object.keys(FEATURE_FLAG_NAMES)));
--  featureFlagsMap[flagName] = !!flagValue;
--}
--
--/**
-- *
-- * @param {FEATURE_FLAG_NAMES} flagName
-- * @return {boolean}
-- */
--function getFeatureFlag(flagName) {
--  if (!FEATURE_FLAG_NAMES[flagName]) throw new Error("Can't get non existing feature flag ".concat(flagName, "! Supported flags: ").concat(Object.keys(FEATURE_FLAG_NAMES)));
--  return featureFlagsMap[flagName];
--}
--
- var TRANSITION_DURATION_SECONDS = 0.2;
- 
- /**
-@@ -1214,10 +1056,8 @@ function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, curre
-       left: (currentMouseX - draggedElRect.left) / draggedElRect.width,
-       top: (currentMouseY - draggedElRect.top) / draggedElRect.height
-     };
--    if (!getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT)) {
--      draggedEl.style.height = "".concat(newRect.height, "px");
--      draggedEl.style.width = "".concat(newRect.width, "px");
--    }
-+    draggedEl.style.height = "".concat(newRect.height, "px");
-+    draggedEl.style.width = "".concat(newRect.width, "px");
-     draggedEl.style.left = "".concat(parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange, "px");
-     draggedEl.style.top = "".concat(parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange, "px");
-   }
-@@ -1230,9 +1070,7 @@ function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX, curre
- function copyStylesFromTo(copyFromEl, copyToEl) {
-   var computedStyle = window.getComputedStyle(copyFromEl);
-   Array.from(computedStyle).filter(function (s) {
--    return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type" ||
--    // copying with and height to make up for rect update timing issues in some browsers
--    getFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT) && (s === "width" || s === "height");
-+    return s.startsWith("background") || s.startsWith("padding") || s.startsWith("font") || s.startsWith("text") || s.startsWith("align") || s.startsWith("justify") || s.startsWith("display") || s.startsWith("flex") || s.startsWith("border") || s === "opacity" || s === "color" || s === "list-style-type";
-   }).forEach(function (s) {
-     return copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s));
-   });
-@@ -1349,13 +1187,10 @@ function preventShrinking(el) {
- 
- var DEFAULT_DROP_ZONE_TYPE$1 = "--any--";
- var MIN_OBSERVATION_INTERVAL_MS = 100;
--var DISABLED_OBSERVATION_INTERVAL_MS = 20;
- var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
--var DEFAULT_TOUCH_DELAY_MS = 80;
- var DEFAULT_DROP_TARGET_STYLE$1 = {
-   outline: "rgba(255, 255, 102, 0.7) solid 2px"
- };
--var ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE = "data-is-dnd-original-dragged-item";
- var originalDragTarget;
- var draggedEl;
- var draggedElData;
-@@ -1371,9 +1206,6 @@ var finalizingPreviousDrag = false;
- var unlockOriginDzMinDimensions;
- var isDraggedOutsideOfAnyDz = false;
- var scheduledForRemovalAfterDrop = [];
--var multiScroller;
--var touchDragHoldTimer;
--var touchHoldElapsed = false;
- 
- // a map from type to a set of drop-zones
- var typeToDropZones$1 = new Map();
-@@ -1408,6 +1240,7 @@ function watchDraggedElement() {
-   printDebug(function () {
-     return "watching dragged element";
-   });
-+  armWindowScroller();
-   var dropZones = typeToDropZones$1.get(draggedElType);
-   var _iterator = _createForOfIteratorHelper(dropZones),
-     _step;
-@@ -1424,21 +1257,17 @@ function watchDraggedElement() {
-     _iterator.f();
-   }
-   window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
--
-   // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
--  var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
-+  var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
-     return dzToConfig$1.get(dz).dropAnimationDurationMs;
--  })));
--  var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
--  multiScroller = createMultiScroller(dropZones, function () {
--    return currentMousePosition;
--  });
--  observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
-+  }))));
-+  observe(draggedEl, dropZones, observationIntervalMs * 1.07);
- }
- function unWatchDraggedElement() {
-   printDebug(function () {
-     return "unwatching dragged element";
-   });
-+  disarmWindowScroller();
-   var dropZones = typeToDropZones$1.get(draggedElType);
-   var _iterator2 = _createForOfIteratorHelper(dropZones),
-     _step2;
-@@ -1455,21 +1284,20 @@ function unWatchDraggedElement() {
-     _iterator2.f();
-   }
-   window.removeEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop$1);
--  // ensuring multiScroller is not already destroyed before destroying
--  if (multiScroller) {
--    multiScroller.destroy();
--    multiScroller = undefined;
--  }
-   unobserve();
- }
--function findShadowElementIdx(items) {
-+
-+// finds the initial placeholder that is placed there on drag start
-+function findShadowPlaceHolderIdx(items) {
-   return items.findIndex(function (item) {
--    return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME];
-+    return item[ITEM_ID_KEY] === SHADOW_PLACEHOLDER_ITEM_ID;
-   });
- }
--function createShadowElData(draggedElData) {
--  var _objectSpread2$1;
--  return _objectSpread2(_objectSpread2({}, draggedElData), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, SHADOW_ITEM_MARKER_PROPERTY_NAME, true), _defineProperty(_objectSpread2$1, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID), _objectSpread2$1));
-+function findShadowElementIdx(items) {
-+  // checking that the id is not the placeholder's for Dragula like usecases
-+  return items.findIndex(function (item) {
-+    return !!item[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item[ITEM_ID_KEY] !== SHADOW_PLACEHOLDER_ITEM_ID;
-+  });
- }
- 
- /* custom drag-events handlers */
-@@ -1504,8 +1332,20 @@ function handleDraggedEntered(e) {
-       id: draggedElData[ITEM_ID_KEY],
-       source: SOURCES.POINTER
-     });
-+  } else {
-+    var shadowPlaceHolderIdx = findShadowPlaceHolderIdx(items);
-+    if (shadowPlaceHolderIdx !== -1) {
-+      // only happens right after drag start, on the first drag entered event
-+      printDebug(function () {
-+        return "removing placeholder item from origin dz";
-+      });
-+      items.splice(shadowPlaceHolderIdx, 1);
-+    }
-   }
--  var shadowElIdx = e.detail.indexObj.index;
-+  var _e$detail$indexObj = e.detail.indexObj,
-+    index = _e$detail$indexObj.index,
-+    isProximityBased = _e$detail$indexObj.isProximityBased;
-+  var shadowElIdx = isProximityBased && index === e.currentTarget.children.length - 1 ? index + 1 : index;
-   shadowElDropZone = e.currentTarget;
-   items.splice(shadowElIdx, 0, shadowElData);
-   dispatchConsiderEvent(e.currentTarget, items, {
-@@ -1521,7 +1361,7 @@ function handleDraggedLeft(e) {
-     return ["dragged left", e.currentTarget, e.detail];
-   });
-   var _dzToConfig$get2 = dzToConfig$1.get(e.currentTarget),
--    originalItems = _dzToConfig$get2.items,
-+    items = _dzToConfig$get2.items,
-     dropFromOthersDisabled = _dzToConfig$get2.dropFromOthersDisabled;
-   if (dropFromOthersDisabled && e.currentTarget !== originDropZone && e.currentTarget !== shadowElDropZone) {
-     printDebug(function () {
-@@ -1529,12 +1369,8 @@ function handleDraggedLeft(e) {
-     });
-     return;
-   }
--  var items = _toConsumableArray(originalItems);
-   var shadowElIdx = findShadowElementIdx(items);
--  if (shadowElIdx !== -1) {
--    items.splice(shadowElIdx, 1);
--  }
--  var origShadowDz = shadowElDropZone;
-+  var shadowItem = items.splice(shadowElIdx, 1)[0];
-   shadowElDropZone = undefined;
-   var _e$detail = e.detail,
-     type = _e$detail.type,
-@@ -1545,9 +1381,8 @@ function handleDraggedLeft(e) {
-     });
-     isDraggedOutsideOfAnyDz = true;
-     shadowElDropZone = originDropZone;
--    // if the last zone it left is the origin dz, we will put it back into items (which we just removed it from)
--    var originZoneItems = origShadowDz === originDropZone ? items : _toConsumableArray(dzToConfig$1.get(originDropZone).items);
--    originZoneItems.splice(originIndex, 0, shadowElData);
-+    var originZoneItems = dzToConfig$1.get(originDropZone).items;
-+    originZoneItems.splice(originIndex, 0, shadowItem);
-     dispatchConsiderEvent(originDropZone, originZoneItems, {
-       trigger: TRIGGERS.DRAGGED_LEFT_ALL,
-       id: draggedElData[ITEM_ID_KEY],
-@@ -1566,7 +1401,7 @@ function handleDraggedIsOverIndex(e) {
-     return ["dragged is over index", e.currentTarget, e.detail];
-   });
-   var _dzToConfig$get3 = dzToConfig$1.get(e.currentTarget),
--    originalItems = _dzToConfig$get3.items,
-+    items = _dzToConfig$get3.items,
-     dropFromOthersDisabled = _dzToConfig$get3.dropFromOthersDisabled;
-   if (dropFromOthersDisabled && e.currentTarget !== originDropZone) {
-     printDebug(function () {
-@@ -1574,13 +1409,10 @@ function handleDraggedIsOverIndex(e) {
-     });
-     return;
-   }
--  var items = _toConsumableArray(originalItems);
-   isDraggedOutsideOfAnyDz = false;
-   var index = e.detail.indexObj.index;
-   var shadowElIdx = findShadowElementIdx(items);
--  if (shadowElIdx !== -1) {
--    items.splice(shadowElIdx, 1);
--  }
-+  items.splice(shadowElIdx, 1);
-   items.splice(index, 0, shadowElData);
-   dispatchConsiderEvent(e.currentTarget, items, {
-     trigger: TRIGGERS.DRAGGED_OVER_INDEX,
-@@ -1593,9 +1425,12 @@ function handleDraggedIsOverIndex(e) {
- function handleMouseMove(e) {
-   e.preventDefault();
-   var c = e.touches ? e.touches[0] : e;
-+  var _dzToConfig$get4 = dzToConfig$1.get(originDropZone),
-+    constrainAxisX = _dzToConfig$get4.constrainAxisX,
-+    constrainAxisY = _dzToConfig$get4.constrainAxisY;
-   currentMousePosition = {
--    x: c.clientX,
--    y: c.clientY
-+    x: constrainAxisX ? dragStartMousePosition.x : c.clientX,
-+    y: constrainAxisY ? dragStartMousePosition.y : c.clientY
-   };
-   draggedEl.style.transform = "translate3d(".concat(currentMousePosition.x - dragStartMousePosition.x, "px, ").concat(currentMousePosition.y - dragStartMousePosition.y, "px, 0)");
- }
-@@ -1620,9 +1455,9 @@ function handleDrop$1() {
-   printDebug(function () {
-     return ["dropped in dz", shadowElDropZone];
-   });
--  var _dzToConfig$get4 = dzToConfig$1.get(shadowElDropZone),
--    items = _dzToConfig$get4.items,
--    type = _dzToConfig$get4.type;
-+  var _dzToConfig$get5 = dzToConfig$1.get(shadowElDropZone),
-+    items = _dzToConfig$get5.items,
-+    type = _dzToConfig$get5.type;
-   styleInactiveDropZones(typeToDropZones$1.get(type), function (dz) {
-     return dzToConfig$1.get(dz).dropTargetStyle;
-   }, function (dz) {
-@@ -1630,11 +1465,7 @@ function handleDrop$1() {
-   });
-   var shadowElIdx = findShadowElementIdx(items);
-   // the handler might remove the shadow element, ex: dragula like copy on drag
--  if (shadowElIdx === -1) {
--    if (shadowElDropZone === originDropZone) {
--      shadowElIdx = originIndex;
--    }
--  }
-+  if (shadowElIdx === -1) shadowElIdx = originIndex;
-   items = items.map(function (item) {
-     return item[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? draggedElData : item;
-   });
-@@ -1653,29 +1484,21 @@ function handleDrop$1() {
-         source: SOURCES.POINTER
-       });
-     }
--    // In edge cases the dom might have not been updated yet so we can't rely on data list index
--    var domShadowEl = Array.from(shadowElDropZone.children).find(function (c) {
--      return c.getAttribute(SHADOW_ELEMENT_ATTRIBUTE_NAME);
--    });
--    if (domShadowEl) unDecorateShadowElement(domShadowEl);
-+    unDecorateShadowElement(shadowElDropZone.children[shadowElIdx]);
-     cleanupPostDrop();
-   }
--  if (dzToConfig$1.get(shadowElDropZone).dropAnimationDisabled) {
--    finalizeWithinZone();
--  } else {
--    animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
--  }
-+  animateDraggedToFinalPosition(shadowElIdx, finalizeWithinZone);
- }
- 
- // helper function for handleDrop
- function animateDraggedToFinalPosition(shadowElIdx, callback) {
--  var shadowElRect = shadowElIdx > -1 ? getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx], false) : getBoundingRectNoTransforms(shadowElDropZone, false);
-+  var shadowElRect = getBoundingRectNoTransforms(shadowElDropZone.children[shadowElIdx]);
-   var newTransform = {
-     x: shadowElRect.left - parseFloat(draggedEl.style.left),
-     y: shadowElRect.top - parseFloat(draggedEl.style.top)
-   };
--  var _dzToConfig$get5 = dzToConfig$1.get(shadowElDropZone),
--    dropAnimationDurationMs = _dzToConfig$get5.dropAnimationDurationMs;
-+  var _dzToConfig$get6 = dzToConfig$1.get(shadowElDropZone),
-+    dropAnimationDurationMs = _dzToConfig$get6.dropAnimationDurationMs;
-   var transition = "transform ".concat(dropAnimationDurationMs, "ms ease");
-   draggedEl.style.transition = draggedEl.style.transition ? draggedEl.style.transition + "," + transition : transition;
-   draggedEl.style.transform = "translate3d(".concat(newTransform.x, "px, ").concat(newTransform.y, "px, 0)");
-@@ -1693,12 +1516,19 @@ function scheduleDZForRemovalAfterDrop(dz, destroy) {
- }
- /* cleanup */
- function cleanupPostDrop() {
--  // Remove the temporary elements that were kept in the DOM during the drag
--  if (draggedEl && draggedEl.remove) {
--    draggedEl.remove();
--  }
--  if (originalDragTarget && originalDragTarget.remove) {
--    originalDragTarget.remove();
-+  draggedEl.remove();
-+  originalDragTarget.remove();
-+  if (scheduledForRemovalAfterDrop.length) {
-+    printDebug(function () {
-+      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
-+    });
-+    scheduledForRemovalAfterDrop.forEach(function (_ref) {
-+      var dz = _ref.dz,
-+        destroy = _ref.destroy;
-+      destroy();
-+      dz.remove();
-+    });
-+    scheduledForRemovalAfterDrop = [];
-   }
-   draggedEl = undefined;
-   originalDragTarget = undefined;
-@@ -1714,23 +1544,6 @@ function cleanupPostDrop() {
-   finalizingPreviousDrag = false;
-   unlockOriginDzMinDimensions = undefined;
-   isDraggedOutsideOfAnyDz = false;
--  if (touchDragHoldTimer) {
--    clearTimeout(touchDragHoldTimer);
--  }
--  touchDragHoldTimer = undefined;
--  touchHoldElapsed = false;
--  if (scheduledForRemovalAfterDrop.length) {
--    printDebug(function () {
--      return ["will destroy zones that were removed during drag", scheduledForRemovalAfterDrop];
--    });
--    scheduledForRemovalAfterDrop.forEach(function (_ref) {
--      var dz = _ref.dz,
--        destroy = _ref.destroy;
--      destroy();
--      dz.remove();
--    });
--    scheduledForRemovalAfterDrop = [];
--  }
- }
- function dndzone$2(node, options) {
-   var initialized = false;
-@@ -1738,15 +1551,15 @@ function dndzone$2(node, options) {
-     items: undefined,
-     type: undefined,
-     flipDurationMs: 0,
-+    constrainAxisX: false,
-+    constrainAxisY: false,
-     dragDisabled: false,
-     morphDisabled: false,
-     dropFromOthersDisabled: false,
-     dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
-     dropTargetClasses: [],
-     transformDraggedElement: function transformDraggedElement() {},
--    centreDraggedOnCursor: false,
--    dropAnimationDisabled: false,
--    delayTouchStartMs: 0
-+    centreDraggedOnCursor: false
-   };
-   printDebug(function () {
-     return ["dndzone good to go options: ".concat(toString(options), ", config: ").concat(toString(config)), {
-@@ -1774,52 +1587,16 @@ function dndzone$2(node, options) {
-     window.removeEventListener("touchmove", handleMouseMoveMaybeDragStart);
-     window.removeEventListener("mouseup", handleFalseAlarm);
-     window.removeEventListener("touchend", handleFalseAlarm);
--    if (touchDragHoldTimer) {
--      clearTimeout(touchDragHoldTimer);
--      touchDragHoldTimer = undefined;
--      touchHoldElapsed = false;
--    }
-   }
--  function handleFalseAlarm(e) {
-+  function handleFalseAlarm() {
-     removeMaybeListeners();
-     originalDragTarget = undefined;
-     dragStartMousePosition = undefined;
-     currentMousePosition = undefined;
--
--    // dragging initiated by touch events prevents onclick from initially firing
--    if (e.type === "touchend") {
--      var clickEvent = new Event("click", {
--        bubbles: true,
--        cancelable: true
--      });
--      // doing it this way instead of calling .click() because that doesn't work for SVG elements
--      e.target.dispatchEvent(clickEvent);
--    }
-   }
-   function handleMouseMoveMaybeDragStart(e) {
--    var isTouch = !!e.touches;
--    var c = isTouch ? e.touches[0] : e;
--    // If touch drag delay is configured and not elapsed yet, allow scrolling until either
--    // the delay elapses (timer will call handleDragStart) or the user moves significantly,
--    // in which case we cancel the potential drag and let the interaction be a scroll.
--    if (isTouch && config.delayTouchStartMs > 0 && !touchHoldElapsed) {
--      currentMousePosition = {
--        x: c.clientX,
--        y: c.clientY
--      };
--      if (Math.abs(currentMousePosition.x - dragStartMousePosition.x) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX || Math.abs(currentMousePosition.y - dragStartMousePosition.y) >= MIN_MOVEMENT_BEFORE_DRAG_START_PX) {
--        // User started scrolling, cancel drag attempt.
--        if (touchDragHoldTimer) {
--          clearTimeout(touchDragHoldTimer);
--          touchDragHoldTimer = undefined;
--        }
--        handleFalseAlarm(e);
--      }
--      return; // Do not preventDefault so scrolling works.
--    }
--
--    // legacy / post-delay path – block scrolling and maybe start drag
-     e.preventDefault();
-+    var c = e.touches ? e.touches[0] : e;
-     currentMousePosition = {
-       x: c.clientX,
-       y: c.clientY
-@@ -1850,29 +1627,14 @@ function dndzone$2(node, options) {
-       });
-       return;
-     }
--    var isTouchStart = !!e.touches;
--    var useDelay = isTouchStart && config.delayTouchStartMs > 0;
--    if (!useDelay) {
--      e.preventDefault();
--    }
-     e.stopPropagation();
--    var c = isTouchStart ? e.touches[0] : e;
-+    var c = e.touches ? e.touches[0] : e;
-     dragStartMousePosition = {
-       x: c.clientX,
-       y: c.clientY
-     };
-     currentMousePosition = _objectSpread2({}, dragStartMousePosition);
-     originalDragTarget = e.currentTarget;
--    if (useDelay) {
--      touchHoldElapsed = false;
--      touchDragHoldTimer = window.setTimeout(function () {
--        // If the finger is still down and no false-alarm happened
--        if (!originalDragTarget) return;
--        touchHoldElapsed = true;
--        removeMaybeListeners();
--        handleDragStart();
--      }, config.delayTouchStartMs);
--    }
-     addMaybeListeners();
-   }
-   function handleDragStart() {
-@@ -1885,32 +1647,29 @@ function dndzone$2(node, options) {
-     var currentIdx = elToIdx.get(originalDragTarget);
-     originIndex = currentIdx;
-     originDropZone = originalDragTarget.parentElement;
--    /** @type {ShadowRoot | HTMLDocument | Element } */
--    var rootNode = originDropZone.closest("dialog") || originDropZone.closest("[popover]") || originDropZone.getRootNode();
-+    /** @type {ShadowRoot | HTMLDocument} */
-+    var rootNode = originDropZone.getRootNode();
-     var originDropZoneRoot = rootNode.body || rootNode;
--    var originalItems = config.items,
-+    var items = config.items,
-       type = config.type,
-       centreDraggedOnCursor = config.centreDraggedOnCursor;
--    var items = _toConsumableArray(originalItems);
--    draggedElData = items[currentIdx];
-+    draggedElData = _objectSpread2({}, items[currentIdx]);
-     draggedElType = type;
--    shadowElData = createShadowElData(draggedElData);
-+    shadowElData = _objectSpread2(_objectSpread2({}, draggedElData), {}, _defineProperty({}, SHADOW_ITEM_MARKER_PROPERTY_NAME, true));
-+    // The initial shadow element. We need a different id at first in order to avoid conflicts and timing issues
-+    var placeHolderElData = _objectSpread2(_objectSpread2({}, shadowElData), {}, _defineProperty({}, ITEM_ID_KEY, SHADOW_PLACEHOLDER_ITEM_ID));
- 
-     // creating the draggable element
-     draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
--    originDropZoneRoot.appendChild(draggedEl);
-     // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
-     function keepOriginalElementInDom() {
--      if (!originalDragTarget.parentElement) {
--        originalDragTarget.setAttribute(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, true);
--        originDropZoneRoot.appendChild(originalDragTarget);
--        // have to watch before we hide, otherwise Svelte 5 $state gets confused
--        watchDraggedElement();
--        hideElement(originalDragTarget);
--        // after the removal of the original element we can give the shadow element the original item id so that the host zone can find it and render it correctly if it does lookups by id
--        shadowElData[ITEM_ID_KEY] = draggedElData[ITEM_ID_KEY];
-+      if (!draggedEl.parentElement) {
-+        originDropZoneRoot.appendChild(draggedEl);
-         // to prevent the outline from disappearing
-         draggedEl.focus();
-+        watchDraggedElement();
-+        hideElement(originalDragTarget);
-+        originDropZoneRoot.appendChild(originalDragTarget);
-       } else {
-         window.requestAnimationFrame(keepOriginalElementInDom);
-       }
-@@ -1925,7 +1684,7 @@ function dndzone$2(node, options) {
-     });
- 
-     // removing the original element by removing its data entry
--    items.splice(currentIdx, 1, shadowElData);
-+    items.splice(currentIdx, 1, placeHolderElData);
-     unlockOriginDzMinDimensions = preventShrinking(originDropZone);
-     dispatchConsiderEvent(originDropZone, items, {
-       trigger: TRIGGERS.DRAG_STARTED,
-@@ -1955,6 +1714,10 @@ function dndzone$2(node, options) {
-       dropAnimationDurationMs = _ref2$flipDurationMs === void 0 ? 0 : _ref2$flipDurationMs,
-       _ref2$type = _ref2.type,
-       newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE$1 : _ref2$type,
-+      _ref2$constrainAxisX = _ref2.constrainAxisX,
-+      constrainAxisX = _ref2$constrainAxisX === void 0 ? false : _ref2$constrainAxisX,
-+      _ref2$constrainAxisY = _ref2.constrainAxisY,
-+      constrainAxisY = _ref2$constrainAxisY === void 0 ? false : _ref2$constrainAxisY,
-       _ref2$dragDisabled = _ref2.dragDisabled,
-       dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-       _ref2$morphDisabled = _ref2.morphDisabled,
-@@ -1968,29 +1731,20 @@ function dndzone$2(node, options) {
-       _ref2$transformDragge = _ref2.transformDraggedElement,
-       transformDraggedElement = _ref2$transformDragge === void 0 ? function () {} : _ref2$transformDragge,
-       _ref2$centreDraggedOn = _ref2.centreDraggedOnCursor,
--      centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn,
--      _ref2$dropAnimationDi = _ref2.dropAnimationDisabled,
--      dropAnimationDisabled = _ref2$dropAnimationDi === void 0 ? false : _ref2$dropAnimationDi,
--      _ref2$delayTouchStart = _ref2.delayTouchStart,
--      delayTouchStartOpt = _ref2$delayTouchStart === void 0 ? false : _ref2$delayTouchStart;
-+      centreDraggedOnCursor = _ref2$centreDraggedOn === void 0 ? false : _ref2$centreDraggedOn;
-     config.dropAnimationDurationMs = dropAnimationDurationMs;
--    var effectiveDelayMs = 0;
--    if (delayTouchStartOpt === true) {
--      effectiveDelayMs = DEFAULT_TOUCH_DELAY_MS;
--    } else if (typeof delayTouchStartOpt === "number" && isFinite(delayTouchStartOpt) && delayTouchStartOpt >= 0) {
--      effectiveDelayMs = delayTouchStartOpt;
--    }
--    config.delayTouchStartMs = effectiveDelayMs;
-     if (config.type && newType !== config.type) {
-       unregisterDropZone$1(node, config.type);
-     }
-     config.type = newType;
-+    registerDropZone$1(node, newType);
-     config.items = _toConsumableArray(items);
-+    config.constrainAxisX = constrainAxisX;
-+    config.constrainAxisY = constrainAxisY;
-     config.dragDisabled = dragDisabled;
-     config.morphDisabled = morphDisabled;
-     config.transformDraggedElement = transformDraggedElement;
-     config.centreDraggedOnCursor = centreDraggedOnCursor;
--    config.dropAnimationDisabled = dropAnimationDisabled;
- 
-     // realtime update for dropTargetStyle
-     if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
-@@ -2029,16 +1783,15 @@ function dndzone$2(node, options) {
-     }
-     config.dropFromOthersDisabled = dropFromOthersDisabled;
-     dzToConfig$1.set(node, config);
--    registerDropZone$1(node, newType);
--    var shadowElIdx = isWorkingOnPreviousDrag ? findShadowElementIdx(config.items) : -1;
-+    var shadowElIdx = findShadowElementIdx(config.items);
-     for (var idx = 0; idx < node.children.length; idx++) {
-       var draggableEl = node.children[idx];
-       styleDraggable(draggableEl, dragDisabled);
-       if (idx === shadowElIdx) {
-+        config.transformDraggedElement(draggedEl, draggedElData, idx);
-         if (!morphDisabled) {
-           morphDraggedElementToBeLike(draggedEl, draggableEl, currentMousePosition.x, currentMousePosition.y);
-         }
--        config.transformDraggedElement(draggedEl, draggedElData, idx);
-         decorateShadowEl(draggableEl);
-         continue;
-       }
-@@ -2072,7 +1825,7 @@ function dndzone$2(node, options) {
-         unregisterDropZone$1(node, dzToConfig$1.get(node).type);
-         dzToConfig$1["delete"](node);
-       }
--      if (isWorkingOnPreviousDrag && !node.closest("[".concat(ORIGINAL_DRAGGED_ITEM_MARKER_ATTRIBUTE, "]"))) {
-+      if (isWorkingOnPreviousDrag) {
-         printDebug(function () {
-           return "pointer dndzone will be scheduled for destruction";
-         });
-@@ -2350,7 +2103,6 @@ function dndzone$1(node, options) {
-     type: undefined,
-     dragDisabled: false,
-     zoneTabIndex: 0,
--    zoneItemTabIndex: 0,
-     dropFromOthersDisabled: false,
-     dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
-     dropTargetClasses: [],
-@@ -2480,7 +2232,7 @@ function dndzone$1(node, options) {
-     var children = Array.from(node.children);
-     var focusedItemIdx = children.indexOf(draggableEl);
-     focusedItem = draggableEl;
--    focusedItem.tabIndex = config.zoneItemTabIndex;
-+    focusedItem.tabIndex = 0;
-     focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
-     focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
-   }
-@@ -2493,8 +2245,6 @@ function dndzone$1(node, options) {
-       dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
-       _ref2$zoneTabIndex = _ref2.zoneTabIndex,
-       zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
--      _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
--      zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
-       _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
-       dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
-       _ref2$dropTargetStyle = _ref2.dropTargetStyle,
-@@ -2507,7 +2257,6 @@ function dndzone$1(node, options) {
-     config.dragDisabled = dragDisabled;
-     config.dropFromOthersDisabled = dropFromOthersDisabled;
-     config.zoneTabIndex = zoneTabIndex;
--    config.zoneItemTabIndex = zoneItemTabIndex;
-     config.dropTargetStyle = dropTargetStyle;
-     config.dropTargetClasses = dropTargetClasses;
-     config.autoAriaDisabled = autoAriaDisabled;
-@@ -2531,7 +2280,7 @@ function dndzone$1(node, options) {
-     var _loop = function _loop(i) {
-       var draggableEl = node.children[i];
-       allDragTargets.add(draggableEl);
--      draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
-+      draggableEl.tabIndex = isDragging ? -1 : 0;
-       if (!autoAriaDisabled) {
-         draggableEl.setAttribute("role", "listitem");
-       }
-@@ -2552,7 +2301,7 @@ function dndzone$1(node, options) {
-         });
-         // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
-         focusedItem = draggableEl;
--        focusedItem.tabIndex = config.zoneItemTabIndex;
-+        focusedItem.tabIndex = 0;
-         // without this the element loses focus if it moves backwards in the list
-         draggableEl.focus();
-       }
-@@ -2582,7 +2331,7 @@ function dndzone$1(node, options) {
-   return handles;
- }
- 
--var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor", "delayTouchStart", "dropAnimationDisabled"];
-+var _excluded = ["items", "flipDurationMs", "type", "constrainAxisX", "constrainAxisY", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
- 
- /**
-  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
-@@ -2594,28 +2343,20 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
-  * @property {array} items - the list of items that was used to generate the children of the given node (the list used in the #each block
-  * @property {string} [type] - the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, default to a base type
-  * @property {number} [flipDurationMs] - if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict, defaults to zero
-+ * @property {boolean} [constrainAxisX] - Constrain dragging by X axis. Drag will be allowed only by Y axis.
-+ * @property {boolean} [constrainAxisY] - Constrain dragging by Y axis. Drag will be allowed only by X axis.
-  * @property {boolean} [dragDisabled]
-  * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
-  * @property {boolean} [dropFromOthersDisabled]
-  * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
-- * @property {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
-  * @property {object} [dropTargetStyle]
-  * @property {string[]} [dropTargetClasses]
-- * @property {boolean|number} [delayTouchStart] - On touch devices, wait this long before converting the gesture to a drag.
-- * `true` uses the built-in default (80 ms).
-- * @property {boolean} [dropAnimationDisabled] - cancels the drop animation to place
-  * @property {function} [transformDraggedElement]
-  * @param {HTMLElement} node - the element to enhance
-  * @param {Options} options
-  * @return {{update: function, destroy: function}}
-  */
- function dndzone(node, options) {
--  if (shouldIgnoreZone(node)) {
--    return {
--      update: function update() {},
--      destroy: function destroy() {}
--    };
--  }
-   validateOptions(options);
-   var pointerZone = dndzone$2(node, options);
-   var keyboardZone = dndzone$1(node, options);
-@@ -2631,33 +2372,22 @@ function dndzone(node, options) {
-     }
-   };
- }
--
--/**
-- * If the user marked something in the ancestry of our node as shadow element, we can ignore it
-- * We need the user to mark it for us because svelte updates the action from deep to shallow (but renders top down)
-- * @param {HTMLElement} node
-- * @return {boolean}
-- */
--function shouldIgnoreZone(node) {
--  return !!node.closest("[".concat(SHADOW_ELEMENT_HINT_ATTRIBUTE_NAME, "=\"true\"]"));
--}
- function validateOptions(options) {
-   /*eslint-disable*/
-   var items = options.items;
-     options.flipDurationMs;
-     options.type;
-+    options.constrainAxisX;
-+    options.constrainAxisY;
-     options.dragDisabled;
-     options.morphDisabled;
-     options.dropFromOthersDisabled;
--    var zoneTabIndex = options.zoneTabIndex,
--    zoneItemTabIndex = options.zoneItemTabIndex;
-+    var zoneTabIndex = options.zoneTabIndex;
-     options.dropTargetStyle;
-     var dropTargetClasses = options.dropTargetClasses;
-     options.transformDraggedElement;
-     options.autoAriaDisabled;
-     options.centreDraggedOnCursor;
--    var delayTouchStart = options.delayTouchStart;
--    options.dropAnimationDisabled;
-     var rest = _objectWithoutProperties(options, _excluded);
-   /*eslint-enable*/
-   if (Object.keys(rest).length > 0) {
-@@ -2678,16 +2408,6 @@ function validateOptions(options) {
-   if (zoneTabIndex && !isInt(zoneTabIndex)) {
-     throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
-   }
--  if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
--    throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
--  }
--  if (delayTouchStart !== undefined && delayTouchStart !== false) {
--    var validBoolean = delayTouchStart === true;
--    var validNumber = typeof delayTouchStart === "number" && isFinite(delayTouchStart) && delayTouchStart >= 0;
--    if (!validBoolean && !validNumber) {
--      throw new Error("delayTouchStart should be a boolean (true/false) or a non-negative number but instead it is a ".concat(_typeof(delayTouchStart), ", ").concat(toString(delayTouchStart)));
--    }
--  }
- }
- function isInt(value) {
-   return !isNaN(value) && function (x) {
-@@ -2695,150 +2415,4 @@ function isInt(value) {
-   }(parseFloat(value));
- }
- 
--function createStore(initialValue) {
--  var _val = initialValue;
--  var subs = new Set();
--  return {
--    get: function get() {
--      return _val;
--    },
--    set: function set(newVal) {
--      _val = newVal;
--      Array.from(subs).forEach(function (cb) {
--        return cb(_val);
--      });
--    },
--    subscribe: function subscribe(cb) {
--      subs.add(cb);
--      cb(_val);
--    },
--    unsubscribe: function unsubscribe(cb) {
--      subs["delete"](cb);
--    }
--  };
--}
--
--var isItemsDragDisabled = createStore(true);
--var userDragDisabled = createStore(false);
--function getAddedOptions() {
--  return {
--    dragDisabled: userDragDisabled.get() || isItemsDragDisabled.get(),
--    zoneItemTabIndex: -1
--  };
--}
--
--/**
-- * This is an action that wraps around the dndzone action to make it easy to work with drag handles
-- * When using this you must also use the 'dragHandle' action (see below) on an element inside each item within the zone
-- * Credit for the idea and initial implementation goes to @gleuch (Greg Leuch) and @geovie (Georg Vienna)
-- *
-- * @param {HTMLElement} node
-- * @param options - will be passed down to the dndzone
-- * @return {{update: (newOptions: Object) => {}, destroy: () => {}}}
-- */
--function dragHandleZone(node, options) {
--  var _options$dragDisabled;
--  // Initialise stores from initial options
--  userDragDisabled.set((_options$dragDisabled = options === null || options === void 0 ? void 0 : options.dragDisabled) !== null && _options$dragDisabled !== void 0 ? _options$dragDisabled : false);
--  var currentOptions = options;
--  var zone = dndzone(node, _objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
--  function updateZone() {
--    zone.update(_objectSpread2(_objectSpread2({}, currentOptions), getAddedOptions()));
--  }
--
--  // Subscribe to internal store so finishing a drag updates the zone
--  isItemsDragDisabled.subscribe(updateZone);
--
--  // We don't need to subscribe to userDragDisabled here because updates to
--  // it always come through the `update` lifecycle and will call `updateZone`
--  // anyway.
--
--  function consider(e) {
--    var _e$detail$info = e.detail.info,
--      source = _e$detail$info.source,
--      trigger = _e$detail$info.trigger;
--    // Ensure dragging is stopped on drag finish via keyboard
--    if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
--      isItemsDragDisabled.set(true);
--    }
--  }
--  function finalize(e) {
--    var source = e.detail.info.source;
--    // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
--    if (source === SOURCES.POINTER) {
--      isItemsDragDisabled.set(true);
--    }
--  }
--  node.addEventListener("consider", consider);
--  node.addEventListener("finalize", finalize);
--  return {
--    update: function update(newOptions) {
--      var _currentOptions$dragD, _currentOptions;
--      currentOptions = newOptions;
--      // keep store in sync with external prop
--      userDragDisabled.set((_currentOptions$dragD = (_currentOptions = currentOptions) === null || _currentOptions === void 0 ? void 0 : _currentOptions.dragDisabled) !== null && _currentOptions$dragD !== void 0 ? _currentOptions$dragD : false);
--      updateZone();
--    },
--    destroy: function destroy() {
--      node.removeEventListener("consider", consider);
--      node.removeEventListener("finalize", finalize);
--      isItemsDragDisabled.unsubscribe(updateZone);
--    }
--  };
--}
--
--/**
-- * This should be used to mark drag handles inside items that belong to a 'dragHandleZone' (see above)
-- * @param {HTMLElement} handle
-- * @return {{update: *, destroy: *}}
-- */
--function dragHandle(handle) {
--  handle.setAttribute("role", "button");
--  function startDrag(e) {
--    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
--    e.preventDefault();
--    isItemsDragDisabled.set(false);
--
--    // Reset the startDrag/isItemsDragDisabled if the user releases the mouse/touch without initiating a drag
--    window.addEventListener("mouseup", resetStartDrag);
--    window.addEventListener("touchend", resetStartDrag);
--  }
--  function handleKeyDown(e) {
--    if (e.key === "Enter" || e.key === " ") isItemsDragDisabled.set(false);
--  }
--  function resetStartDrag() {
--    isItemsDragDisabled.set(true);
--    window.removeEventListener("mouseup", resetStartDrag);
--    window.removeEventListener("touchend", resetStartDrag);
--  }
--  var recomputeHandleState = function recomputeHandleState() {
--    var userDisabled = userDragDisabled.get();
--    var internalDisabled = isItemsDragDisabled.get();
--    if (userDisabled) {
--      handle.tabIndex = -1;
--      handle.style.cursor = ""; // default cursor
--    } else {
--      handle.tabIndex = internalDisabled ? 0 : -1;
--      handle.style.cursor = internalDisabled ? "grab" : "grabbing";
--    }
--  };
--
--  // Subscribe to both stores
--  userDragDisabled.subscribe(recomputeHandleState);
--  isItemsDragDisabled.subscribe(recomputeHandleState);
--  handle.addEventListener("mousedown", startDrag);
--  handle.addEventListener("touchstart", startDrag);
--  handle.addEventListener("keydown", handleKeyDown);
--  return {
--    update: function update() {},
--    destroy: function destroy() {
--      handle.removeEventListener("mousedown", startDrag);
--      handle.removeEventListener("touchstart", startDrag);
--      handle.removeEventListener("keydown", handleKeyDown);
--      userDragDisabled.unsubscribe(recomputeHandleState);
--      isItemsDragDisabled.unsubscribe(recomputeHandleState);
--    }
--  };
--}
--
--export { DRAGGED_ELEMENT_ID, FEATURE_FLAG_NAMES, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID, SOURCES, TRIGGERS, alertToScreenReader, dndzone, dragHandle, dragHandleZone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode, setFeatureFlag };
-+export { DRAGGED_ELEMENT_ID, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID, SOURCES, TRIGGERS, alertToScreenReader, dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode };
diff --git a/scripts/app-path-resolver.js b/scripts/app-path-resolver.js
new file mode 100644
index 00000000..0c16cb0c
--- /dev/null
+++ b/scripts/app-path-resolver.js
@@ -0,0 +1,15 @@
+import { join } from 'path';
+
+import { plugin } from 'bun';
+
+// Preload that maps the app's absolute `/js/...` and `/css/...` specifiers (a Vite
+// convention) to the repo root, so Bun scripts can import the real shared modules
+// verbatim. Registered via `bun --preload` so it is active before the entry resolves
+// its own static imports — an in-script plugin() does not catch those.
+const ROOT = join(import.meta.dir, '..');
+plugin({
+  name: 'app-path-resolver',
+  setup(build) {
+    build.onResolve({ filter: /^\/(js|css)\// }, (args) => ({ path: ROOT + args.path }));
+  },
+});
diff --git a/scripts/build-compiled.js b/scripts/build-compiled.js
new file mode 100644
index 00000000..8e4f9488
--- /dev/null
+++ b/scripts/build-compiled.js
@@ -0,0 +1,87 @@
+import { execFileSync } from 'node:child_process';
+import {
+  copyFileSync,
+  existsSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs';
+
+import * as esbuild from 'esbuild';
+
+import { jsBuildOptions } from './esbuild-js.js';
+import { syncAll } from './images.js';
+import { scanRoutes } from './routes.js';
+
+const OUT = 'compiled';
+
+// 0. Safety net: regenerate stale/missing webp from /images masters and prune
+//    orphans before the compiler copies static/ in. No-op when /images is absent
+//    (Vercel ignores masters and ships the committed webp).
+await syncAll();
+
+// 1. Compile pages → compiled/: inline components, optimize iterations, emit
+//    per-page hyperspeed manifests under compiled/vibe-hyperspeed/. Options live
+//    in the package.json "vibe-compiler" block (custom elements kept; deps
+//    copied not installed — we bundle them ourselves and prune below).
+execFileSync('bunx', ['vibe', 'compile'], { stdio: 'inherit' });
+
+// 2. Bundle js/ into compiled/js as self-contained browser ESM. The compiler
+//    copies js/ as-is (it must read js/ to stamp @[…] globals like @[version]),
+//    but raw js has bare specifiers (howler, seedrandom, @ape-egg/*) and
+//    import.meta.env the browser can't resolve — so replace that copy with an
+//    esbuild bundle: deps inlined, VITE_* env baked (see esbuild-js.js, shared
+//    with the compiled dev server).
+rmSync(`${OUT}/js`, { recursive: true, force: true });
+await esbuild.build(jsBuildOptions({ outdir: `${OUT}/js` }));
+
+// 3. Hand each dynamic page its route template; boot.js reads window.__ROUTE__.
+//    In dev and the runtime build this is the mpa-routes vite plugin's job.
+for (const { route, file } of scanRoutes()) {
+  const page = `${OUT}${file}`;
+  if (!existsSync(page)) continue;
+  const html = readFileSync(page, 'utf8');
+  writeFileSync(
+    page,
+    html.replace('<head>', `<head><script>window.__ROUTE__=${JSON.stringify(route)}</script>`),
+  );
+}
+
+// 4. Vendor vibe.css next to our own CSS. css/index.css @imports it from
+//    /node_modules/@ape-egg/vibe/vibe.css — fine in dev, but compiled prunes
+//    node_modules below, so copy the file in and repoint the @import.
+copyFileSync('node_modules/@ape-egg/vibe/vibe.css', `${OUT}/css/vibe.css`);
+const indexCss = `${OUT}/css/index.css`;
+writeFileSync(
+  indexCss,
+  readFileSync(indexCss, 'utf8').replace('/node_modules/@ape-egg/vibe/vibe.css', '/css/vibe.css'),
+);
+
+// 5. Drop node_modules: deps are bundled into js/, and the compiler's
+//    copy_node_modules_as_is step runs independently of "vibe-compiler".skipFiles
+//    (which excludes everything else — server, scripts, dist, root config files).
+rmSync(`${OUT}/node_modules`, { recursive: true, force: true });
+
+// 6. Drop the /images masters the compiler copies wholesale — only the webp
+//    under static/images ship. (On Vercel /images is .vercelignore'd and never
+//    present; this keeps local compiled/ output clean.)
+rmSync(`${OUT}/images`, { recursive: true, force: true });
+
+// 7. Cache-bust CSS references with a build tag so vercel.json can serve /css/*
+//    immutable. Filenames stay stable (no rename); the ?v= query busts the cache
+//    on each deploy. (JS chunks are already content-hashed. webp use a bounded
+//    max-age, and the per-page manifests stay must-revalidate — boot.js builds
+//    their URLs at runtime without a tag, and a stale manifest breaks rendering.)
+const buildTag = (
+  process.env.VERCEL_GIT_COMMIT_SHA || execFileSync('git', ['rev-parse', 'HEAD']).toString()
+).slice(0, 8);
+const bust = (s) => s.replace(/(["'(])(\/css\/[^"')?]+\.css)(["')])/g, `$1$2?v=${buildTag}$3`);
+for (const f of readdirSync(OUT, { recursive: true })) {
+  if (typeof f !== 'string' || !/\.(html|css)$/.test(f)) continue;
+  const p = `${OUT}/${f}`;
+  const src = readFileSync(p, 'utf8');
+  const next = bust(src);
+  if (next !== src) writeFileSync(p, next);
+}
+console.info(`[cache-bust] CSS tagged ?v=${buildTag}`);
diff --git a/scripts/dev-compiled.js b/scripts/dev-compiled.js
new file mode 100644
index 00000000..bc8541b3
--- /dev/null
+++ b/scripts/dev-compiled.js
@@ -0,0 +1,448 @@
+import { spawn } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import {
+  existsSync,
+  linkSync,
+  readdirSync,
+  readFileSync,
+  unlinkSync,
+  watch,
+  writeFileSync,
+} from 'node:fs';
+import { createServer } from 'node:http';
+import { tmpdir } from 'node:os';
+import { extname, resolve } from 'node:path';
+
+import * as esbuild from 'esbuild';
+
+import { jsBuildOptions } from './esbuild-js.js';
+import { imagegen } from './imagegen.js';
+import { entitySource } from './entity-source.js';
+import { ensureWebp } from './images.js';
+import { scanRoutes } from './routes.js';
+
+// Local compiled-mode dev loop. Compiled (hyperspeed) output hydrates its
+// content from a manifest; once hydration mounts components and expands
+// iterations the live tree no longer structurally matches any fresh artifact, so
+// reconcile (the runtime adapter's no-reload path) has nothing stable to apply
+// against. Compiled mode therefore recompiles-on-change → reload, except CSS,
+// which hot-swaps its <link>. (Runtime mode is where you iterate no-reload;
+// compiled mode verifies the shipped build.) Work is split so each save is
+// incremental:
+//
+//   • `vibe compile --watch`  → pages + manifests (a single page edit is ~660ms,
+//        not a full recopy). It copies js/ + node_modules + css as-is. The raw
+//        js/ copy (bare specifiers) is unrunnable in the browser, so we ignore
+//        compiled/js and serve js from esbuild instead — see JS_DIR below. js/
+//        is NOT skipped: the compiler must read it to stamp @[…] globals (e.g.
+//        @[version]) at compile time, else they ship raw and flash on load.
+//   • esbuild.context().watch() → bundles source js/ into browser ESM (deps
+//        inlined, env baked) in JS_DIR, decoupled from compiled/js so the
+//        compiler's raw copy can't race it.
+//   • this server → serves compiled/ (js from JS_DIR), injects window.__ROUTE__
+//        (dynamic pages) and the SSE client at request time, and signals the
+//        browser to hot-swap CSS or reload when the compiler/esbuild settles.
+//
+// Serves compiled/ with the same clean-URL routing as Vercel/preview.
+
+const ROOT = resolve('compiled');
+// esbuild's bundled js lives here, served at /js — keeps it clear of the
+// compiler's raw compiled/js copy (which we never serve).
+const JS_DIR = resolve('node_modules/.cache/vibe-dev-js');
+const PORT = Number(process.env.PORT) || 4173;
+
+// Multiple Claude Preview tabs each launch their own dev-compiled server on a
+// different port, but a single output directory can host only ONE `vibe compile
+// --watch` (concurrent watchers race each other's manifest writes, so the compiler
+// guards its output dir with a lock and crashes the second). So exactly one server
+// is the "builder" — it owns the compiler + esbuild and keeps compiled/ + JS_DIR
+// fresh; every other server is serve-only and just watches those dirs to push its
+// own clients' reloads. Election is a pid lockfile keyed by the output dir; a dead
+// owner's lock is reclaimed, so a crashed builder self-heals on the next start.
+// EPERM means the pid exists but belongs to another user (e.g. pid 1) — alive.
+// Only ESRCH (no such process) is dead.
+const isAlive = (pid) => {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return error.code === 'EPERM';
+  }
+};
+
+const BUILDER_LOCK = resolve(
+  tmpdir(),
+  `vibe-dev-builder-${createHash('sha1').update(ROOT).digest('hex').slice(0, 16)}.lock`,
+);
+
+// Claim via write-a-temp-then-hardlink: linkSync is atomic and fails if the lock
+// exists, and the lock is a link to a file that already holds our pid — so it's
+// never observed empty. (A plain create-then-write leaves a window where a rival
+// reads the empty lock, judges it stale, and deletes it → two builders.)
+const claimBuilder = () => {
+  const tmp = `${BUILDER_LOCK}.${process.pid}`;
+  writeFileSync(tmp, String(process.pid));
+  try {
+    for (let attempt = 0; attempt < 50; attempt++) {
+      try {
+        linkSync(tmp, BUILDER_LOCK);
+        return true;
+      } catch (error) {
+        if (error.code !== 'EEXIST') throw error;
+        let owner = 0;
+        try {
+          owner = Number(readFileSync(BUILDER_LOCK, 'utf8').trim());
+        } catch {}
+        if (owner && isAlive(owner)) return false;
+        try {
+          unlinkSync(BUILDER_LOCK);
+        } catch {}
+      }
+    }
+    return false;
+  } finally {
+    try {
+      unlinkSync(tmp);
+    } catch {}
+  }
+};
+
+const releaseBuilder = () => {
+  try {
+    if (Number(readFileSync(BUILDER_LOCK, 'utf8').trim()) === process.pid) unlinkSync(BUILDER_LOCK);
+  } catch {}
+};
+
+// The vibe compiler leaves its own output-dir lock behind if a prior builder was
+// SIGKILLed (a clean SIGTERM releases it). Sweep locks whose owner is dead before
+// spawning, so a builder that inherits a stale lock doesn't crash on it. Live
+// watchers — including other projects' — are left untouched.
+const clearStaleVibeLocks = () => {
+  let entries = [];
+  try {
+    entries = readdirSync(tmpdir());
+  } catch {
+    return;
+  }
+  for (const name of entries) {
+    if (!/^vibe-watch-.*\.lock$/.test(name)) continue;
+    const path = resolve(tmpdir(), name);
+    let owner = 0;
+    try {
+      owner = Number(readFileSync(path, 'utf8').trim());
+    } catch {}
+    if (owner && !isAlive(owner)) {
+      try {
+        unlinkSync(path);
+      } catch {}
+    }
+  }
+};
+
+const isBuilder = claimBuilder();
+
+const MIME = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.ogg': 'audio/ogg',
+  '.m4a': 'audio/mp4',
+  '.webm': 'video/webm',
+  '.mp4': 'video/mp4',
+};
+
+// Compiled-mode HMR client. The runtime adapter's no-reload path reconciles a
+// fresh source tree into the live DOM — but that can't work here: compiled
+// output hydrates from a manifest, and once the live tree mounts components and
+// expands iterations it no longer structurally matches any freshly-fetched
+// artifact (a hydrated home page has ~18 slots; the fresh shell has 3). So
+// compiled mode reloads on markup/JS edits. CSS is the exception — swapping the
+// <link>'s href repaints styles with no reload and no state loss.
+const HMR_CLIENT = `<script>
+new EventSource('/__reload').onmessage = (e) => {
+  if (e.data === 'css') {
+    for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+      const url = new URL(link.href);
+      url.searchParams.set('t', Date.now());
+      link.href = url.href;
+    }
+    return;
+  }
+  location.reload();
+};
+</script>`;
+
+let routes = scanRoutes();
+const clients = new Set();
+
+// Coalesce a burst of file events into one SSE signal. Only two outcomes:
+// CSS-only edits hot-swap the <link>s; anything else reloads. A batch that
+// touches non-CSS reloads (the reload subsumes any CSS change in the same save).
+let hmrTimer;
+let reloadNeeded = false;
+// A compile pass rewrites 37 pages then 37 manifests over several seconds. Serving a
+// page (or firing a reload) mid-pass hands the browser a half-written file or a fresh
+// page against a stale manifest — both hydrate to a blank screen. So hold page serves
+// and reloads while the compiler is busy, and flush them when it prints its done marker.
+let compilerBusy = false;
+let reloadWhenIdle = false;
+const heldPages = [];
+const scheduleHmr = (kind) => {
+  if (kind === 'reload' && compilerBusy) {
+    reloadWhenIdle = true;
+    return;
+  }
+  if (kind === 'reload') reloadNeeded = true;
+  clearTimeout(hmrTimer);
+  hmrTimer = setTimeout(() => {
+    const signal = reloadNeeded ? 'reload' : 'css';
+    reloadNeeded = false;
+    if (signal === 'reload') routes = scanRoutes();
+    clients.forEach((res) => res.write(`data: ${signal}\n\n`));
+  }, 250);
+};
+
+const serveHtml = (match, res) => {
+  if (res.writableEnded || res.destroyed) return;
+  let html = readFileSync(match.file, 'utf8');
+  if (match.route) {
+    html = html.replace(
+      '<head>',
+      `<head><script>window.__ROUTE__=${JSON.stringify(match.route)}</script>`,
+    );
+  }
+  res.setHeader('Content-Type', 'text/html');
+  res.end(html.replace('</body>', HMR_CLIENT + '</body>'));
+};
+
+// The builder spawns `vibe compile --watch` — incremental pages + manifests.
+// Serve-only servers skip it and wait for the builder's output to appear instead.
+let compiler = null;
+let compilerReady;
+
+if (isBuilder) {
+  clearStaleVibeLocks();
+  // Surface the compiler's logs; the "Watching for changes" banner marks the
+  // initial full compile as done.
+  compiler = spawn('bunx', ['vibe', 'compile', '--watch'], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+  compiler.stderr.on('data', (d) => process.stderr.write(d));
+  compilerReady = new Promise((done) => {
+    compiler.stdout.on('data', (d) => {
+      const line = d.toString();
+      process.stdout.write(d);
+      if (line.includes('Watching for changes')) done();
+      // A pass starts on "changed"/"re-expanded" and ends on "Updated in" (or the
+      // initial "Watching for changes"); only then are pages + manifests all written.
+      if (/changed|re-expanded/.test(line)) compilerBusy = true;
+      if (/Updated in|Watching for changes/.test(line)) {
+        compilerBusy = false;
+        while (heldPages.length) {
+          const held = heldPages.shift();
+          clearTimeout(held.timer);
+          serveHtml(held.match, held.res);
+        }
+        if (reloadWhenIdle) {
+          reloadWhenIdle = false;
+          scheduleHmr('reload');
+        }
+      }
+    });
+  });
+
+  // A compiler that dies (e.g. another watcher holds the lock) used to leave the
+  // server wedged forever awaiting compilerReady, silently serving stale js. Die
+  // with it instead — the piped stderr above already shows why.
+  compiler.on('exit', (code) => {
+    if (shuttingDown) return;
+    console.error(`[dev:compiled] vibe compile --watch exited (code ${code}) — shutting down`);
+    process.exit(1);
+  });
+} else {
+  // Serve-only: another server owns the compiler. Wait for its output to exist,
+  // then serve it. A grace window keeps us from hanging if the builder never
+  // finishes an initial compile.
+  console.info('[dev:compiled] another server owns the compiler — serving its output');
+  compilerReady = new Promise((done) => {
+    const start = Date.now();
+    const poll = () => {
+      if (
+        (existsSync(`${ROOT}/pages/index.html`) && existsSync(JS_DIR)) ||
+        Date.now() - start > 30000
+      )
+        return done();
+      setTimeout(poll, 150);
+    };
+    poll();
+  });
+}
+
+let shuttingDown = false;
+const shutdown = () => {
+  shuttingDown = true;
+  if (compiler) compiler.kill();
+  releaseBuilder();
+  process.exit(0);
+};
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);
+process.on('exit', () => {
+  if (compiler) compiler.kill();
+  releaseBuilder();
+});
+
+const matchUrl = (url) => {
+  if (url.startsWith('/js/')) {
+    const file = resolve(JS_DIR, '.' + url.slice(3));
+    return existsSync(file) ? { file } : null;
+  }
+  // /images/ masters are dev-only and written live by imagegen — serve them from
+  // the project root (like Vite) so the imagegen list endpoints, which read the
+  // project dirs, and the <img> assets stay the same live source.
+  if (url.startsWith('/images/')) {
+    const file = resolve('.' + url);
+    return existsSync(file) ? { file } : null;
+  }
+  if (extname(url)) {
+    const asset = resolve(ROOT, '.' + url);
+    return existsSync(asset) ? { file: asset } : null;
+  }
+  for (const { regex, file, route } of routes) {
+    if (new RegExp(regex).test(url)) return { file: ROOT + file, route };
+  }
+  const page = url === '/' ? 'index' : url.slice(1);
+  const file = `${ROOT}/pages/${page}.html`;
+  return existsSync(file) ? { file } : null;
+};
+
+const imagegenHandler = imagegen();
+const entitySourceHandler = entitySource();
+
+createServer((req, res) => {
+  // Dev-only image generation, same handler Vite mounts. Connect strips the
+  // mount prefix from req.url; replicate that so the handler's routes match.
+  if (req.url.startsWith('/__imagegen')) {
+    req.url = req.url.slice('/__imagegen'.length) || '/';
+    return imagegenHandler(req, res);
+  }
+
+  // Dev-only entity Save (/_internal/characters/<id>), same handler Vite mounts.
+  if (req.url.startsWith('/__source')) {
+    req.url = req.url.slice('/__source'.length) || '/';
+    return entitySourceHandler(req, res);
+  }
+
+  const url = decodeURIComponent(req.url.split('?')[0]);
+
+  if (url === '/__reload') {
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    });
+    res.write('\n');
+    clients.add(res);
+    req.on('close', () => clients.delete(res));
+    return;
+  }
+
+  // /static/images/*.webp: regenerate from its /images master on demand (same as
+  // vite's dev middleware), then serve the fresh file from source static/. The
+  // compiler ignores webp asset changes, so the compiled/static copy goes stale
+  // — serving live here makes replaced character art show on the next reload.
+  const webp = url.match(/^\/static\/images\/(.+\.webp)$/);
+  if (webp) {
+    ensureWebp(webp[1]).then((ok) => {
+      const file = resolve('static/images', webp[1]);
+      if (!ok || !existsSync(file)) {
+        res.statusCode = 404;
+        return res.end('Not found');
+      }
+      res.setHeader('Content-Type', 'image/webp');
+      res.end(readFileSync(file));
+    });
+    return;
+  }
+
+  const match = matchUrl(url);
+  if (!match) {
+    res.statusCode = 404;
+    return res.end('Not found');
+  }
+
+  const ext = extname(match.file) || '.html';
+  if (ext !== '.html') {
+    res.setHeader('Content-Type', MIME[ext] || 'application/octet-stream');
+    return res.end(readFileSync(match.file));
+  }
+
+  // A page requested mid-compile may be half-written or paired with a not-yet-updated
+  // manifest (→ blank on hydrate). Hold it until the pass settles; serve anyway after a
+  // grace window so an errored or hung compile never wedges the browser.
+  if (compilerBusy) {
+    const timer = setTimeout(() => {
+      const i = heldPages.findIndex((h) => h.res === res);
+      if (i !== -1) heldPages.splice(i, 1);
+      serveHtml(match, res);
+    }, 8000);
+    heldPages.push({ match, res, timer });
+    return;
+  }
+
+  // Inject the route template (dynamic pages read window.__ROUTE__) and the HMR client
+  // at serve time — no disk writes, always correct after recompile (see serveHtml).
+  serveHtml(match, res);
+}).listen(PORT, async () => {
+  console.info(
+    isBuilder
+      ? '[dev:compiled] waiting for initial compile…'
+      : '[dev:compiled] waiting for existing build…',
+  );
+  await compilerReady;
+
+  if (isBuilder) {
+    // esbuild owns compiled/js and reloads on rebuild. watch() runs an initial
+    // build, so this also creates compiled/js after the compiler's run.
+    const options = jsBuildOptions({ outdir: JS_DIR, mode: 'development' });
+    options.plugins.push({
+      name: 'reload-on-js',
+      // onEnd must return void/an object — never the truthy result of an
+      // expression. Returning `errors.length` (a number) on a failed rebuild makes
+      // esbuild throw and tears down the whole watch, so one transient error (e.g. a
+      // file briefly missing mid branch-switch) freezes the dev server until restart.
+      setup: (b) =>
+        b.onEnd((r) => {
+          if (!r.errors.length) scheduleHmr('reload');
+        }),
+    });
+    await (await esbuild.context(options)).watch();
+  } else {
+    // Serve-only servers don't run esbuild, so watch its output dir directly: when
+    // the builder's esbuild rewrites JS_DIR, reload this server's own clients.
+    watch(JS_DIR, { recursive: true }, () => scheduleHmr('reload'));
+  }
+
+  // Compiler rewrote pages/manifests/css: hot-swap CSS, reload otherwise. js/ is
+  // esbuild's (it fires its own signal); node_modules churn is noise. Both builder
+  // and serve-only servers watch here so every tab reloads on a rebuild.
+  watch(ROOT, { recursive: true }, (_event, file) => {
+    if (file && /^(js|node_modules)\//.test(file)) return;
+    scheduleHmr(file && file.endsWith('.css') ? 'css' : 'reload');
+  });
+
+  console.info(
+    `[dev:compiled] serving compiled/ on http://localhost:${PORT}${isBuilder ? '' : ' (serve-only)'}`,
+  );
+});
diff --git a/scripts/entity-patcher.js b/scripts/entity-patcher.js
new file mode 100644
index 00000000..b2dab870
--- /dev/null
+++ b/scripts/entity-patcher.js
@@ -0,0 +1,189 @@
+// Patches scalar dot-path changes into one entity of a constants file while
+// preserving every untouched character of the authored source. Values that are
+// expressions (DEFAULT_MAX_HP, spreads with arithmetic) get baked to literals
+// only when that exact field changes. Keys that only exist via a spread are
+// inserted explicitly; parents whose value is an identifier (modifiers:
+// DEFAULT_MODIFIERS) are wrapped: { ...DEFAULT_MODIFIERS, key: value }.
+
+const WS = /\s/;
+const IDENT = /[\w$]/;
+
+const skipNoise = (source, i) => {
+  while (i < source.length) {
+    const ch = source[i];
+    if (WS.test(ch)) i++;
+    else if (ch === '/' && source[i + 1] === '/') i = source.indexOf('\n', i);
+    else if (ch === '/' && source[i + 1] === '*') i = source.indexOf('*/', i) + 2;
+    else break;
+  }
+  return i;
+};
+
+const skipString = (source, i) => {
+  const quote = source[i++];
+  while (i < source.length && source[i] !== quote) {
+    if (source[i] === '\\') i++;
+    i++;
+  }
+  return i + 1;
+};
+
+const readValue = (source, i) => {
+  const start = i;
+  let depth = 0;
+  while (i < source.length) {
+    const ch = source[i];
+    if (["'", '"', '`'].includes(ch)) i = skipString(source, i);
+    else if (['(', '[', '{'].includes(ch)) (depth++, i++);
+    else if ([')', ']', '}'].includes(ch)) {
+      if (depth === 0) break;
+      (depth--, i++);
+    } else if (ch === ',' && depth === 0) break;
+    else i++;
+  }
+  let end = i;
+  while (end > start && WS.test(source[end - 1])) end--;
+  return { start, end, next: i };
+};
+
+const readObject = (source, i, path, props, objects) => {
+  const pathKey = path.join('.');
+  const open = i;
+  if (!objects.has(pathKey)) objects.set(pathKey, { open, close: -1 });
+  i++;
+  while (i < source.length) {
+    i = skipNoise(source, i);
+    if (source[i] === '}') {
+      const entry = objects.get(pathKey);
+      if (entry.close === -1 && entry.open === open) entry.close = i;
+      return i + 1;
+    }
+    if (source.startsWith('...', i)) {
+      i = skipNoise(source, i + 3);
+      if (source[i] === '{') i = readObject(source, i, path, props, objects);
+      else i = readValue(source, i).next;
+    } else {
+      let key;
+      const keyStart = i;
+      if (["'", '"'].includes(source[i])) {
+        const close = skipString(source, i);
+        key = source.slice(i + 1, close - 1);
+        i = close;
+      } else {
+        while (IDENT.test(source[i])) i++;
+        key = source.slice(keyStart, i);
+      }
+      const keyEnd = i;
+      i = skipNoise(source, i);
+      if ([',', '}'].includes(source[i])) {
+        props.set([...path, key].join('.'), { start: keyStart, end: keyEnd, shorthand: key });
+      } else if (source[i] !== ':') {
+        throw new Error(`expected ':' after '${key}' at ${i}`);
+      } else {
+        i = skipNoise(source, i + 1);
+        if (source[i] === '{') {
+          i = readObject(source, i, [...path, key], props, objects);
+        } else {
+          const { start, end, next } = readValue(source, i);
+          props.set([...path, key].join('.'), { start, end });
+          i = next;
+        }
+      }
+    }
+    i = skipNoise(source, i);
+    if (source[i] === ',') i++;
+  }
+  throw new Error(`unterminated object for '${pathKey}'`);
+};
+
+// { __expr: 'ALL_RACES.elf' } writes the expression verbatim instead of a
+// literal — for fields whose source value is an identifier reference.
+const serialize = (value) => {
+  if (value && typeof value === 'object' && value.__expr) {
+    if (!/^[\w$.]+$/.test(value.__expr)) throw new Error(`unsafe expression '${value.__expr}'`);
+    return value.__expr;
+  }
+  return typeof value === 'string'
+    ? `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n')}'`
+    : String(value);
+};
+
+const insertion = (source, objects, pathKey, lines) => {
+  const { close } = objects.get(pathKey);
+  const lineStart = source.lastIndexOf('\n', close) + 1;
+  const indent = source.slice(lineStart, close);
+  if (/^\s*$/.test(indent)) {
+    return {
+      start: close,
+      end: close,
+      text: lines.map(([key, value]) => `  ${key}: ${serialize(value)},\n${indent}`).join(''),
+    };
+  }
+  // Inline object — `ai: { imageContext: '' }` — the closing brace shares its
+  // line with content, so splice the pairs in just before it instead.
+  let at = close;
+  while (WS.test(source[at - 1])) at--;
+  const pairs = lines.map(([key, value]) => `${key}: ${serialize(value)}`).join(', ');
+  return source[at - 1] === '{'
+    ? { start: at, end: close, text: ` ${pairs} ` }
+    : { start: at, end: at, text: `, ${pairs}` };
+};
+
+export const createEntity = (source, rootName, entityKey, template) => {
+  if (!/^[A-Za-z_$][\w$]*$/.test(entityKey)) throw new Error(`'${entityKey}' is not a valid key`);
+  const rootOpen = source.indexOf('{', source.indexOf(`${rootName} = `));
+  if (rootOpen < 1) throw new Error(`'${rootName}' not found`);
+
+  const props = new Map();
+  const objects = new Map();
+  readObject(source, rootOpen, [], props, objects);
+  if (objects.has(entityKey) || props.has(entityKey))
+    throw new Error(`entity '${entityKey}' already exists in ${rootName}`);
+
+  const { close } = objects.get('');
+  return source.slice(0, close) + template + source.slice(close);
+};
+
+export const patchEntity = (source, rootName, entityKey, changes) => {
+  const rootOpen = source.indexOf('{', source.indexOf(`${rootName} = `));
+  if (rootOpen < 1) throw new Error(`'${rootName}' not found`);
+
+  const props = new Map();
+  const objects = new Map();
+  readObject(source, rootOpen, [], props, objects);
+  if (!objects.has(entityKey)) throw new Error(`entity '${entityKey}' not found in ${rootName}`);
+
+  const edits = [];
+  const wraps = new Map();
+  const inserts = new Map();
+
+  Object.entries(changes).forEach(([path, value]) => {
+    const fullPath = `${entityKey}.${path}`;
+    const prop = props.get(fullPath);
+    if (prop) return edits.push({ ...prop, text: serialize(value) });
+
+    const parentPath = fullPath.split('.').slice(0, -1).join('.');
+    const key = fullPath.split('.').at(-1);
+    if (objects.has(parentPath)) {
+      inserts.has(parentPath) || inserts.set(parentPath, []);
+      return inserts.get(parentPath).push([key, value]);
+    }
+    if (props.has(parentPath)) {
+      wraps.has(parentPath) || wraps.set(parentPath, []);
+      return wraps.get(parentPath).push([key, value]);
+    }
+    throw new Error(`no destination for '${fullPath}'`);
+  });
+
+  inserts.forEach((lines, pathKey) => edits.push(insertion(source, objects, pathKey, lines)));
+  wraps.forEach((lines, pathKey) => {
+    const { start, end, shorthand } = props.get(pathKey);
+    const pairs = lines.map(([key, value]) => `${key}: ${serialize(value)}`).join(', ');
+    const prefix = shorthand ? `${shorthand}: ` : '';
+    edits.push({ start, end, text: `${prefix}{ ...${source.slice(start, end)}, ${pairs} }` });
+  });
+
+  return edits
+    .sort((a, b) => b.start - a.start)
+    .reduce((acc, { start, end, text }) => acc.slice(0, start) + text + acc.slice(end), source);
+};
diff --git a/scripts/entity-source.js b/scripts/entity-source.js
new file mode 100644
index 00000000..3c447f54
--- /dev/null
+++ b/scripts/entity-source.js
@@ -0,0 +1,88 @@
+// Dev-only: overrides entity values directly to file from /_internal/characters/<id>.
+// Mounted at /__source in both dev servers (Vite + compiled) so Save behaves
+// identically across builds.
+
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import * as esbuild from 'esbuild';
+
+import { patchEntity, createEntity } from './entity-patcher.js';
+
+const characterTemplate = (key) => {
+  const name = key
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, (c) => c.toUpperCase())
+    .trim();
+  const kebab = key.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+  return `  ${key}: {
+    name: '${name}',
+    race: ALL_RACES.creature,
+    type: 'creature',
+    image: 'creature/${kebab}.webp',
+    size: 1,
+    equipment: {
+      ...DEFAULT_NPC_EQUIPMENT,
+    },
+    description: '',
+    ai: { imageContext: '', legs: 4 },
+    combatStats: {
+      maxHealth: DEFAULT_MAX_HP,
+      currentHealth: DEFAULT_MAX_HP,
+      maxArmor: 0,
+      currentArmor: 0,
+      damage: DEFAULT_DAMAGE,
+      ...DEFAULT_LUCKY_STATS,
+      limits: DEFAULT_LIMITS,
+      resistances: DEFAULT_RESISTANCES,
+      modifiers: DEFAULT_MODIFIERS,
+    },
+    maxTicks: DEFAULT_MAX_TICKS,
+    abilities: [
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+      ABILITIES('punch'),
+    ],
+  },
+`;
+};
+
+const entitySources = {
+  characters: {
+    file: 'js/constants/CHARACTERS.js',
+    root: 'ALL_CHARACTERS',
+    template: characterTemplate,
+  },
+};
+
+export const entitySource = () => (req, res) => {
+  const entity = entitySources[req.url.slice(1).split('?')[0]];
+  if (!entity || req.method !== 'POST') {
+    res.statusCode = 404;
+    return res.end();
+  }
+  let body = '';
+  req.on('data', (chunk) => (body += chunk));
+  req.on('end', async () => {
+    res.setHeader('Content-Type', 'application/json');
+    try {
+      const { id, changes, create } = JSON.parse(body);
+      const file = resolve(entity.file);
+      const source = readFileSync(file, 'utf8');
+      const patched = create
+        ? createEntity(source, entity.root, id, entity.template(id))
+        : patchEntity(source, entity.root, id, changes);
+      // transformSync spawns a fresh esbuild per call — the shared service
+      // variant dies for good if its child process is killed (vite restarts,
+      // orphan cleanup) and never respawns.
+      esbuild.transformSync(patched, { loader: 'js' });
+      writeFileSync(file, patched);
+      res.end(JSON.stringify({ ok: true }));
+    } catch (error) {
+      res.statusCode = 500;
+      res.end(JSON.stringify({ error: error.message }));
+    }
+  });
+};
diff --git a/scripts/esbuild-js.js b/scripts/esbuild-js.js
new file mode 100644
index 00000000..9c8c24b7
--- /dev/null
+++ b/scripts/esbuild-js.js
@@ -0,0 +1,38 @@
+import { readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { loadEnv } from 'vite';
+
+// Shared esbuild config for bundling js/ into self-contained browser ESM. The
+// Vibe compiler copies js/ as-is (raw source), so the browser would otherwise
+// choke on bare specifiers (howler, seedrandom, @ape-egg/*) and import.meta.env.
+// esbuild inlines deps and bakes the VITE_* env. Used by the production build
+// (one-shot esbuild.build, replacing the compiler's raw copy) and the compiled
+// dev server (esbuild.context + watch into its own dir).
+export const jsBuildOptions = ({ outdir, mode = 'production' }) => {
+  const env = loadEnv(mode, process.cwd(), 'VITE_');
+  // Dev runs from the worktree dir (<project>/.claude/worktrees/<name>); bake the
+  // name so testers can tell which worktree's client they're looking at.
+  env.VITE_WORKTREE = process.cwd().includes('/.claude/worktrees/')
+    ? process.cwd().split('/').pop()
+    : '';
+  return {
+    entryPoints: readdirSync('js', { recursive: true })
+      .filter((f) => typeof f === 'string' && f.endsWith('.js'))
+      .map((f) => `js/${f}`),
+    outdir,
+    outbase: 'js',
+    bundle: true,
+    splitting: true,
+    format: 'esm',
+    minify: true,
+    define: { 'import.meta.env': JSON.stringify(env) },
+    plugins: [
+      {
+        name: 'root-relative-js',
+        setup: (b) => b.onResolve({ filter: /^\/js\// }, (a) => ({ path: resolve(`.${a.path}`) })),
+      },
+    ],
+    logLevel: 'warning',
+  };
+};
diff --git a/scripts/generate-component-typedefs.ts b/scripts/generate-component-typedefs.ts
deleted file mode 100644
index 999c7309..00000000
--- a/scripts/generate-component-typedefs.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-// scripts/generate-components-typedefs.ts
-// Generates src/components.d.ts with global component typings.
-// Run with: bun run ./scripts/generate-components-typedefs.ts
-// (If you use --watch, Bun will rerun this whenever files change.)
-
-import { promises as fs } from 'node:fs';
-import * as path from 'node:path';
-
-const SRC_DIR = path.resolve(process.cwd(), 'src');
-const COMPONENTS_DIR = path.join(SRC_DIR, 'components');
-const OUTPUT_PATH = path.join(SRC_DIR, 'components.d.ts');
-
-type FileEntry = {
-  name: string; // PascalCase name (global const)
-  importPath: string; // "./components/....svelte" (posix)
-  absPath: string; // absolute path
-};
-
-export async function generateComponentsTypedefs() {
-  // Ensure components dir exists
-  const exists = await dirExists(COMPONENTS_DIR);
-  if (!exists) {
-    console.error(`[generate-components-typedefs] Directory not found: ${COMPONENTS_DIR}`);
-    process.exit(1);
-  }
-
-  const svelteFiles = await collectSvelteFiles(COMPONENTS_DIR);
-
-  const entries: FileEntry[] = svelteFiles.map((abs) => {
-    // Create a posix-style relative path from src to the file, prefixed with "./"
-    const relFromSrc = path.posix.join(
-      ...path.relative(SRC_DIR, abs).split(path.sep) // convert to posix segments
-    );
-    const importPath = `./${relFromSrc}`;
-
-    const fileBase = path.basename(abs, '.svelte');
-    const name = toPascalCase(fileBase);
-
-    return { name, importPath, absPath: abs };
-  });
-
-  // Deduplicate by name (warn if duplicates)
-  const deduped = new Map<string, FileEntry>();
-  for (const e of entries) {
-    if (deduped.has(e.name)) {
-      const other = deduped.get(e.name)!;
-      console.warn(
-        `[generate-components-typedefs] Duplicate component name "${e.name}"\n` +
-          `  keeping: ${other.absPath}\n  ignoring: ${e.absPath}`
-      );
-      continue;
-    }
-    deduped.set(e.name, e);
-  }
-
-  const sorted = [...deduped.values()].sort((a, b) => a.name.localeCompare(b.name));
-
-  const header = `// generated by scripts/generate-component-typedefs.ts
-// It's suggested you commit this file into source control
-`;
-
-  const body =
-    'declare global {\n' +
-    sorted
-      .map((e) => `    const ${e.name}: typeof import("${e.importPath}")["default"]`)
-      .join('\n') +
-    '\n}\n\nexport {}\n';
-
-  const content = header + body;
-
-  await writeIfChanged(OUTPUT_PATH, content);
-
-  console.info(
-    `[generate-components-typedefs] Wrote ${sorted.length} component${sorted.length === 1 ? '' : 's'} to ${path.relative(
-      process.cwd(),
-      OUTPUT_PATH
-    )}`
-  );
-}
-
-async function collectSvelteFiles(dir: string): Promise<string[]> {
-  const out: string[] = [];
-  await walk(dir, out);
-  // Filter *.svelte (ignore hidden files/dirs by default)
-  return (
-    out
-      .filter((p) => p.toLowerCase().endsWith('.svelte'))
-      // Optional: ignore story/test files if you use them
-      .filter((p) => !/[.-](test|spec|stories)\.svelte$/i.test(p))
-  );
-}
-
-async function walk(dir: string, out: string[]) {
-  const entries = await fs.readdir(dir, { withFileTypes: true });
-  for (const entry of entries) {
-    if (entry.name.startsWith('.')) continue; // skip hidden
-    const full = path.join(dir, entry.name);
-    if (entry.isDirectory()) {
-      await walk(full, out);
-    } else if (entry.isFile()) {
-      out.push(full);
-    }
-  }
-}
-
-function toPascalCase(input: string): string {
-  // Handle common separators and camelCase already
-  // Examples:
-  //   "ability-bar" -> "AbilityBar"
-  //   "AbilityBar" -> "AbilityBar"
-  //   "ability_bar" -> "AbilityBar"
-  //   "ability.bar" -> "AbilityBar"
-  //   "ability bar" -> "AbilityBar"
-  const parts = input
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .split(/[\s._-]+/g)
-    .filter(Boolean);
-
-  return parts.map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join('');
-}
-
-async function dirExists(dir: string): Promise<boolean> {
-  try {
-    const st = await fs.stat(dir);
-    return st.isDirectory();
-  } catch {
-    return false;
-  }
-}
-
-async function writeIfChanged(filePath: string, next: string) {
-  try {
-    const prev = await fs.readFile(filePath, 'utf8');
-    if (prev === next) return; // no change
-  } catch {
-    // file doesn't exist—proceed to write
-  }
-  await fs.mkdir(path.dirname(filePath), { recursive: true });
-  await fs.writeFile(filePath, next, 'utf8');
-}
-
-export function componentsTypedefsPlugin() {
-  const globs = ['src/components/**/*.svelte'];
-  const debounce = (fn: () => void, ms: number) => {
-    let t: any;
-    return () => {
-      clearTimeout(t);
-      t = setTimeout(fn, ms);
-    };
-  };
-  const run = debounce(() => {
-    generateComponentsTypedefs().catch((e) => console.error('[typedefs] generation failed:', e));
-  }, 120);
-
-  return {
-    name: 'components-typedefs',
-    apply: 'serve',
-    configureServer(server: any) {
-      // initial run
-      run();
-      // watch for add/change/remove of svelte components
-      server.watcher.add(globs);
-      server.watcher.on('add', run);
-      server.watcher.on('change', run);
-      server.watcher.on('unlink', run);
-    },
-    // Optional: also generate before prod builds
-    async buildStart() {
-      await generateComponentsTypedefs();
-    }
-  };
-}
-
-// Keep the CLI entry for manual runs:
-if (import.meta.main) {
-  generateComponentsTypedefs().catch((err) => {
-    console.error('[generate-components-typedefs] Error:', err);
-    process.exit(1);
-  });
-}
diff --git a/scripts/icon.js b/scripts/icon.js
deleted file mode 100644
index b1e64b7d..00000000
--- a/scripts/icon.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
-
-const [, , path, generateTypescript] = process.argv;
-
-if (!path) {
-  console.info("Please provide a path to the folder containing .svg's");
-  process.exit(1);
-}
-
-const projectRoot = process.cwd();
-const folder = `${projectRoot}/${path}`;
-
-if (!existsSync(folder)) {
-  mkdirSync(folder);
-  console.info('Folder created:', folder);
-}
-
-const svgs = readdirSync(folder)
-  .filter((file) => file.endsWith('.svg'))
-  .map((file) => `${folder}/${file}`);
-
-console.info(
-  `Scanned and found ${svgs.length} icons: (${svgs
-    .map((name) => name.split('/').pop())
-    .join(', ')})`
-);
-
-if (svgs.length === 0) {
-  console.info('Exiting...');
-  process.exit(1);
-}
-
-const svgObject = {};
-
-for (const svg of svgs) {
-  const name = svg.split('/').pop().replace('.svg', '');
-  const contents = readFileSync(svg).toString();
-  const viewBoxRegex = /viewBox="([^"]*)"/;
-  const viewBoxMatch = contents.match(viewBoxRegex);
-  const viewBox = viewBoxMatch ? viewBoxMatch[1] : '';
-  let [, , viewBoxWidth, viewBoxHeight] = viewBox.split(' ');
-
-  const widthRegex = /width="([^"]*)"/;
-  const widthMatch = contents.match(widthRegex);
-  if (!viewBoxWidth && widthMatch) viewBoxWidth = widthMatch[1];
-
-  const heightRegex = /height="([^"]*)"/;
-  const heightMatch = contents.match(heightRegex);
-  if (!viewBoxHeight && heightMatch) viewBoxHeight = heightMatch[1];
-
-  const stripSvgTag = contents.replace(/<svg.*?>/, '').replace('</svg>', '');
-
-  const svgElementRegex = /<([^>]*)>/g;
-
-  const svgElements = [];
-
-  // Iterate through each match of SVG elements
-  let match,
-    i = 0,
-    fills = [],
-    strokes = [];
-  while ((match = svgElementRegex.exec(stripSvgTag)) !== null) {
-    let elementMatch = match[0];
-    const fillRegex = /fill="([^"]*)"/;
-    const strokeRegex = /stroke="([^"]*)"/;
-    const styleRegex = /style="([^"]*)"/;
-
-    const fillMatch = match[0].match(fillRegex);
-    const strokeMatch = match[0].match(strokeRegex);
-    const styleMatch = elementMatch.match(styleRegex);
-
-    const styles = [];
-
-    styles.push(`fill: var(--${name}-fill-color-${i}, currentColor);`);
-    if (fillMatch) {
-      fills.push(fillMatch[1]);
-      elementMatch = elementMatch.replace(fillRegex, '');
-    } else {
-      fills.push('#000');
-    }
-
-    if (strokeMatch) {
-      strokes.push(strokeMatch[1]);
-      styles.push(`stroke: var(--${name}-stroke-color-${i}, transparent);`);
-      elementMatch = elementMatch.replace(strokeRegex, '');
-    } else {
-      strokes.push(null);
-    }
-
-    if (styleMatch) {
-      // If there's already a style attribute, append the new styles to it
-      // const existingStyles = styleMatch[1];
-      elementMatch = elementMatch.replace(styleRegex, `style="${styles.join(' ')}"`);
-    } else {
-      // If there's no style attribute, add one
-      elementMatch = elementMatch.replace(/<([^>]+)>/, `<$1 style="${styles.join(' ')}"/>`);
-    }
-
-    svgElements.push(elementMatch);
-    i++;
-  }
-
-  let widthRatio = 1;
-  let heightRatio = 1;
-
-  if (viewBoxWidth && viewBoxHeight) {
-    const wide = viewBoxWidth > viewBoxHeight;
-    if (wide) {
-      widthRatio = viewBoxWidth / viewBoxHeight;
-    } else {
-      heightRatio = viewBoxHeight / viewBoxWidth;
-    }
-  }
-
-  svgObject[name] = {
-    elements: svgElements,
-    fills,
-    strokes,
-    viewBoxWidth: viewBoxWidth ? parseFloat(viewBoxWidth, 10) : null,
-    viewBoxHeight: viewBoxHeight ? parseFloat(viewBoxHeight, 10) : null,
-    widthRatio,
-    heightRatio
-  };
-}
-
-const jsonFile = `${folder}/icons.json`;
-writeFileSync(jsonFile, `${JSON.stringify(svgObject, null, 2)}\n`);
-console.info('File generated:', jsonFile);
-
-if (generateTypescript && generateTypescript === '--generate-types') {
-  const tsFile = `${folder}/types.ts`;
-  writeFileSync(
-    tsFile,
-    `export type IconName = ${Object.keys(svgObject)
-      .map((name) => `'${name}'`)
-      .join(' | ')};\n`
-  );
-  console.info('File generated:', tsFile);
-}
diff --git a/scripts/imagegen.js b/scripts/imagegen.js
new file mode 100644
index 00000000..3a59772f
--- /dev/null
+++ b/scripts/imagegen.js
@@ -0,0 +1,465 @@
+// Dev-only Gemini image generation for the /_internal character editor.
+// Proposals live in /tmp/characters/<id>/<timestamp>.png — outside the repo —
+// and are listed/served/promoted exclusively through this middleware.
+
+import { readFileSync, writeFileSync, mkdirSync, readdirSync, existsSync, unlinkSync } from 'fs';
+import { resolve, join, extname, dirname } from 'path';
+import { loadEnv } from 'vite';
+import sharp from 'sharp';
+
+import { ensureWebp } from './images.js';
+
+const GEMINI_URL =
+  'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent';
+
+const TMP_ROOT = '/tmp/characters';
+const RACES_ROOT = resolve('images/races');
+
+// The standalone /_internal/imagegen tool stages here and promotes into the
+// project — independent of the character editor above, no backdrop stripping.
+const TMP_GENERAL = '/tmp/imagegen';
+const GENERATED_ROOT = resolve('images/generated');
+const MASTERS_ROOT = resolve('images');
+const BG_ROOT = resolve('images/bg');
+
+// gemini-2.5-flash-image only composes a fixed set of aspect ratios at ~1MP. The
+// caller picks one of these directly; we then render it large (~4K long side) and
+// let sharp upscale the model output. The target dims sit exactly on the chosen
+// ratio, so the resize crops nothing — it just enlarges (we'd rather ship a big,
+// scalable image than the model's small native one).
+const ASPECT_RATIOS = ['1:1', '2:3', '3:2', '3:4', '4:3', '4:5', '5:4', '9:16', '16:9', '21:9'];
+const TARGET_LONG_SIDE = 4096;
+const dimsForAspect = (ratio) => {
+  const [a, b] = ratio.split(':').map(Number);
+  return a >= b
+    ? [TARGET_LONG_SIDE, Math.round((TARGET_LONG_SIDE * b) / a)]
+    : [Math.round((TARGET_LONG_SIDE * a) / b), TARGET_LONG_SIDE];
+};
+
+const MIME = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp',
+};
+
+const json = (res, status, payload) => {
+  res.statusCode = status;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(payload));
+};
+
+const readBody = (req) =>
+  new Promise((done) => {
+    let raw = '';
+    req.on('data', (chunk) => (raw += chunk));
+    req.on('end', () => done(raw ? JSON.parse(raw) : {}));
+  });
+
+const safeResolve = (root, rel) => {
+  const abs = resolve(root, rel);
+  if (abs !== root && !abs.startsWith(root + '/')) throw new Error(`path escapes ${root}: ${rel}`);
+  return abs;
+};
+
+const referenceFile = (path) =>
+  path.startsWith('/tmp/characters/')
+    ? safeResolve(TMP_ROOT, path.slice('/tmp/characters/'.length))
+    : safeResolve(RACES_ROOT, path.replace(/^\/?images\/races\//, ''));
+
+const listReferences = () =>
+  readdirSync(RACES_ROOT, { recursive: true })
+    .filter((f) => typeof f === 'string' && MIME[extname(f)])
+    .sort()
+    .map((f) => ({ path: `images/races/${f}`, url: `/images/races/${f}`, label: f }));
+
+const proposalsDir = (id) => join(TMP_ROOT, id);
+
+const listProposals = (id) =>
+  (existsSync(proposalsDir(id)) ? readdirSync(proposalsDir(id)) : [])
+    .filter((f) => /^\d+\.png$/.test(f))
+    .sort((a, b) => parseInt(a) - parseInt(b))
+    .map((f) => ({
+      file: f,
+      path: join(proposalsDir(id), f),
+      url: `/__imagegen/characters/${id}/${f}`,
+    }));
+
+const generalReferenceFile = (path) =>
+  path.startsWith('/tmp/imagegen/')
+    ? safeResolve(TMP_GENERAL, path.slice('/tmp/imagegen/'.length))
+    : safeResolve(MASTERS_ROOT, path.replace(/^\/?images\//, ''));
+
+const listGeneralTmp = () =>
+  (existsSync(TMP_GENERAL) ? readdirSync(TMP_GENERAL) : [])
+    .filter((f) => /^\d+\.png$/.test(f))
+    .sort((a, b) => parseInt(b) - parseInt(a))
+    .map((f) => ({ file: f, path: `/tmp/imagegen/${f}`, url: `/__imagegen/general/tmp/${f}` }));
+
+const listGeneralKept = () =>
+  (existsSync(GENERATED_ROOT) ? readdirSync(GENERATED_ROOT) : [])
+    .filter((f) => MIME[extname(f)])
+    .sort((a, b) => b.localeCompare(a))
+    .map((f) => ({
+      file: f,
+      path: `images/generated/${f}`,
+      url: `/images/generated/${f}`,
+    }));
+
+// Curated project backgrounds live in images/bg/ — listed flat, no recursion.
+const listProjectImages = () =>
+  (existsSync(BG_ROOT) ? readdirSync(BG_ROOT, { withFileTypes: true }) : [])
+    .filter((entry) => entry.isFile() && MIME[extname(entry.name)])
+    .map((entry) => entry.name)
+    .sort()
+    .map((f) => ({ file: f, path: `images/bg/${f}`, url: `/images/bg/${f}` }));
+
+// Gemini never emits an alpha channel, and it renders the requested magenta
+// backdrop loosely (muted raspberry, vignetted corners), so a fixed chroma key
+// is unreliable. Instead the backdrop color is sampled from the image borders
+// (the prompt keeps the whole body inside the frame, so borders are always
+// backdrop), then removed three ways: global distance keying (also catches
+// enclosed pockets, e.g. between legs), border flood fill with local
+// continuity (follows vignette gradients), and an alpha feather on the
+// character's edge pixels. Finally the canvas is trimmed to the character.
+// Already-transparent borders mean the backdrop is gone — the buffer passes
+// through untouched, so promoting an old or hand-made sprite is a no-op.
+const SOLID_DIST = 35;
+const EDGE_DIST = 90;
+const STEP_DIST = 20;
+const FLOOD_SHADE = 12;
+
+export const stripBackdrop = async (buffer) => {
+  const { data, info } = await sharp(buffer)
+    .ensureAlpha()
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+  const { width, height } = info;
+
+  const borderIndices = [];
+  for (let x = 0; x < width; x++) borderIndices.push(x, (height - 1) * width + x);
+  for (let y = 0; y < height; y++) borderIndices.push(y * width, y * width + width - 1);
+  const median = (channel) =>
+    borderIndices.map((p) => data[p * 4 + channel]).sort((a, b) => a - b)[
+      borderIndices.length >> 1
+    ];
+  if (median(3) < 128) return buffer;
+  const backdrop = [median(0), median(1), median(2)];
+
+  const distTo = (p, [r, g, b]) =>
+    Math.sqrt((data[p * 4] - r) ** 2 + (data[p * 4 + 1] - g) ** 2 + (data[p * 4 + 2] - b) ** 2);
+  const colorAt = (p) => [data[p * 4], data[p * 4 + 1], data[p * 4 + 2]];
+  const lightAt = (p) => (data[p * 4] + data[p * 4 + 1] + data[p * 4 + 2]) / 3;
+  const backdropLight = (backdrop[0] + backdrop[1] + backdrop[2]) / 3;
+
+  // The global distance-key can't tell character from backdrop when the model
+  // ignored the magenta directive and painted a backdrop near the character's
+  // own palette — only key globally when the sampled backdrop is magenta-ish.
+  // Otherwise rely on the border flood fill alone, which is shape-aware.
+  const magentaBackdrop = Math.min(backdrop[0], backdrop[2]) - backdrop[1] >= 48;
+
+  const background = new Uint8Array(width * height);
+  if (magentaBackdrop) {
+    for (let p = 0; p < width * height; p++) {
+      if (distTo(p, backdrop) <= SOLID_DIST) background[p] = 1;
+    }
+  }
+  const queue = borderIndices.filter((p) => !background[p]);
+  borderIndices.forEach((p) => (background[p] = 1));
+  while (queue.length) {
+    const p = queue.pop();
+    const color = colorAt(p);
+    const x = p % width;
+    const neighbors = [
+      x > 0 && p - 1,
+      x < width - 1 && p + 1,
+      p - width >= 0 && p - width,
+      p + width < width * height && p + width,
+    ];
+    for (const n of neighbors) {
+      if (n === false || background[n]) continue;
+      if (distTo(n, color) > STEP_DIST) continue;
+      // The flood exists to absorb backdrop gradients (vignetted corners), not
+      // to wander into the subject — soft fringes (fur, hair) are smooth ramps
+      // its step tolerance would otherwise climb all the way into the body.
+      // Vignettes blend the backdrop toward light; body shading goes dark, so
+      // the flood never steps onto a pixel darker than the backdrop itself.
+      if (lightAt(n) < backdropLight - FLOOD_SHADE) continue;
+      background[n] = 1;
+      queue.push(n);
+    }
+  }
+
+  // A backdrop is at most the frame around a body that fills the canvas — if
+  // the mask claims nearly everything, the backdrop wasn't separable (it leaked
+  // into the character). Keep the original instead of shipping a ghost.
+  let kept = 0;
+  for (let p = 0; p < width * height; p++) if (!background[p]) kept++;
+  if (kept < width * height * 0.1) return buffer;
+
+  for (let p = 0; p < width * height; p++) {
+    if (background[p]) {
+      data[p * 4] = data[p * 4 + 1] = data[p * 4 + 2] = data[p * 4 + 3] = 0;
+      continue;
+    }
+    const x = p % width;
+    const touchesBackground =
+      (x > 0 && background[p - 1]) ||
+      (x < width - 1 && background[p + 1]) ||
+      (p - width >= 0 && background[p - width]) ||
+      (p + width < width * height && background[p + width]);
+    if (!touchesBackground) continue;
+    const blend = Math.min(
+      1,
+      Math.max(0, (distTo(p, backdrop) - SOLID_DIST) / (EDGE_DIST - SOLID_DIST)),
+    );
+    data[p * 4 + 3] = Math.round(data[p * 4 + 3] * blend);
+  }
+
+  return sharp(data, { raw: info })
+    .trim({ background: { r: 0, g: 0, b: 0, alpha: 0 }, threshold: 1 })
+    .png()
+    .toBuffer();
+};
+
+const generateOne = async (apiKey, parts, generationConfig) => {
+  const body = { contents: [{ parts }] };
+  if (generationConfig) body.generationConfig = generationConfig;
+  const response = await fetch(GEMINI_URL, {
+    method: 'POST',
+    headers: { 'x-goog-api-key': apiKey, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const payload = await response.json();
+  if (!response.ok)
+    throw new Error(payload.error?.message || `gemini responded ${response.status}`);
+  const image = payload.candidates?.[0]?.content?.parts?.find((part) => part.inlineData?.data);
+  if (!image)
+    throw new Error(`no image in gemini response: ${JSON.stringify(payload).slice(0, 200)}`);
+  return Buffer.from(image.inlineData.data, 'base64');
+};
+
+export const imagegen = () => async (req, res) => {
+  const url = req.url.split('?')[0];
+  try {
+    if (req.method === 'GET' && url === '/references') return json(res, 200, listReferences());
+
+    if (url.startsWith('/general')) {
+      if (req.method === 'GET' && url === '/general') return json(res, 200, listGeneralTmp());
+      if (req.method === 'GET' && url === '/general/kept') return json(res, 200, listGeneralKept());
+      if (req.method === 'GET' && url === '/general/project')
+        return json(res, 200, listProjectImages());
+
+      if (req.method === 'GET' && url.startsWith('/general/tmp/')) {
+        const file = safeResolve(TMP_GENERAL, url.slice('/general/tmp/'.length));
+        res.setHeader('Content-Type', MIME[extname(file)] || 'application/octet-stream');
+        return res.end(readFileSync(file));
+      }
+
+      if (req.method === 'POST' && url === '/general/drop') {
+        const { data } = await readBody(req);
+        const buffer = Buffer.from(data.split(',').pop(), 'base64');
+        mkdirSync(TMP_GENERAL, { recursive: true });
+        const file = `${Date.now()}.png`;
+        writeFileSync(join(TMP_GENERAL, file), await sharp(buffer).png().toBuffer());
+        return json(res, 200, {
+          file,
+          path: `/tmp/imagegen/${file}`,
+          url: `/__imagegen/general/tmp/${file}`,
+        });
+      }
+
+      if (req.method === 'POST' && url === '/general/generate') {
+        const {
+          instruction = '',
+          count = 3,
+          references = [],
+          aspectRatio: rawAspect = '1:1',
+        } = await readBody(req);
+        const apiKey = loadEnv('development', process.cwd(), '').GEMINI_API_KEY;
+        if (!apiKey) throw new Error('GEMINI_API_KEY missing from .env.local');
+
+        const aspectRatio = ASPECT_RATIOS.includes(rawAspect) ? rawAspect : '1:1';
+        const [w, h] = dimsForAspect(aspectRatio);
+
+        console.info(
+          `[imagegen] general → ${count} generation(s) @ ${w}×${h} (${aspectRatio})\n` +
+            `references (${references.length}):${references.map((r) => `\n  ${r}`).join('') || ' none'}\n` +
+            `instruction:\n${instruction}\n`,
+        );
+
+        // General images keep whatever backdrop they're given — references pass
+        // through as-is, no magenta flatten, no stripBackdrop on the result.
+        const parts = [
+          ...references.map((path) => ({
+            inlineData: {
+              mimeType: 'image/png',
+              data: readFileSync(generalReferenceFile(path)).toString('base64'),
+            },
+          })),
+          { text: instruction },
+        ];
+
+        mkdirSync(TMP_GENERAL, { recursive: true });
+        const start = Date.now();
+        const total = Math.min(10, Math.max(1, Number(count) || 3));
+
+        const results = await Promise.allSettled(
+          Array.from({ length: total }, async (_, i) => {
+            const raw = await generateOne(apiKey, parts, { imageConfig: { aspectRatio } });
+            const buffer = await sharp(raw).resize(w, h, { fit: 'cover' }).png().toBuffer();
+            const file = `${start + i}.png`;
+            writeFileSync(join(TMP_GENERAL, file), buffer);
+            return file;
+          }),
+        );
+
+        const saved = results.filter((r) => r.status === 'fulfilled').map((r) => r.value);
+        const errors = [
+          ...new Set(results.filter((r) => r.status === 'rejected').map((r) => r.reason.message)),
+        ];
+        return json(res, saved.length ? 200 : 500, { saved, errors });
+      }
+
+      if (req.method === 'POST' && url === '/general/keep') {
+        const { file } = await readBody(req);
+        const source = safeResolve(TMP_GENERAL, file);
+        mkdirSync(GENERATED_ROOT, { recursive: true });
+        writeFileSync(safeResolve(GENERATED_ROOT, file), readFileSync(source));
+        unlinkSync(source);
+        return json(res, 200, { kept: `images/generated/${file}` });
+      }
+
+      if (req.method === 'POST' && url === '/general/discard') {
+        const { file } = await readBody(req);
+        unlinkSync(safeResolve(TMP_GENERAL, file));
+        return json(res, 200, { ok: true });
+      }
+
+      if (req.method === 'POST' && url === '/general/remove') {
+        const { file } = await readBody(req);
+        unlinkSync(safeResolve(GENERATED_ROOT, file));
+        return json(res, 200, { ok: true });
+      }
+
+      return json(res, 404, { error: 'unknown route' });
+    }
+
+    const match = url.match(/^\/characters\/([\w-]+)(\/.*)?$/);
+    if (!match) return json(res, 404, { error: 'unknown route' });
+    const [, id, rest = ''] = match;
+
+    if (req.method === 'GET' && !rest) return json(res, 200, listProposals(id));
+
+    if (req.method === 'GET') {
+      const file = safeResolve(TMP_ROOT, join(id, rest.slice(1)));
+      res.setHeader('Content-Type', MIME[extname(file)] || 'application/octet-stream');
+      return res.end(readFileSync(file));
+    }
+
+    if (req.method === 'POST' && rest === '/drop') {
+      const { data } = await readBody(req);
+      const buffer = Buffer.from(data.split(',').pop(), 'base64');
+      mkdirSync(proposalsDir(id), { recursive: true });
+      // Single slot: each drop replaces the previous one. The counter keeps the
+      // filename unique so keyed thumbnails and <img> caches never collide.
+      const previous = readdirSync(proposalsDir(id)).filter((f) => /^drop-\d+\.png$/.test(f));
+      const n = previous.length ? Math.max(...previous.map((f) => parseInt(f.slice(5)))) + 1 : 1;
+      previous.forEach((f) => unlinkSync(join(proposalsDir(id), f)));
+      const file = `drop-${n}.png`;
+      writeFileSync(join(proposalsDir(id), file), await sharp(buffer).png().toBuffer());
+      return json(res, 200, {
+        path: join(proposalsDir(id), file),
+        url: `/__imagegen/characters/${id}/${file}`,
+      });
+    }
+
+    if (req.method === 'POST' && rest === '/generate') {
+      const { instruction = '', count = 3, references = [] } = await readBody(req);
+      const apiKey = loadEnv('development', process.cwd(), '').GEMINI_API_KEY;
+      if (!apiKey) throw new Error('GEMINI_API_KEY missing from .env.local');
+
+      console.info(
+        `[imagegen] ${id} → ${count} generation(s)\n` +
+          `references (${references.length}):${references.map((r) => `\n  ${r}`).join('') || ' none'}\n` +
+          `instruction:\n${instruction}\n`,
+      );
+
+      // Transparent reference sprites reach Gemini alpha-flattened onto black,
+      // which teaches it a black backdrop — flatten them onto magenta instead
+      // so references reinforce the backdrop directive.
+      const parts = [
+        ...(await Promise.all(
+          references.map(async (path) => {
+            const data = await sharp(readFileSync(referenceFile(path)))
+              .flatten({ background: '#FF00FF' })
+              .png()
+              .toBuffer();
+            return { inlineData: { mimeType: 'image/png', data: data.toString('base64') } };
+          }),
+        )),
+        { text: instruction },
+      ];
+
+      mkdirSync(proposalsDir(id), { recursive: true });
+      // Names come from the clock so a discarded proposal's name — and URL —
+      // is never reused, which keeps every cache layer trivially correct.
+      const start = Date.now();
+      const total = Math.min(10, Math.max(1, Number(count) || 3));
+
+      const results = await Promise.allSettled(
+        Array.from({ length: total }, async (_, i) => {
+          const buffer = await stripBackdrop(await generateOne(apiKey, parts));
+          const file = `${start + i}.png`;
+          writeFileSync(join(proposalsDir(id), file), buffer);
+          return file;
+        }),
+      );
+
+      const saved = results.filter((r) => r.status === 'fulfilled').map((r) => r.value);
+      const errors = [
+        ...new Set(results.filter((r) => r.status === 'rejected').map((r) => r.reason.message)),
+      ];
+      return json(res, saved.length ? 200 : 500, { saved, errors });
+    }
+
+    if (req.method === 'POST' && rest === '/replace') {
+      const { file, target } = await readBody(req);
+      const source = safeResolve(TMP_ROOT, join(id, file));
+      // `target` is the in-game image (`<race>/<name>.webp`), but that webp is
+      // built by the image pipeline from a PNG master. Write the master (forcing
+      // .png — stripBackdrop emits PNG), never a parallel .webp the pipeline
+      // ignores, then regenerate the served webp from it.
+      const master = target.replace(/\.[^./]+$/, '.png');
+      const destination = safeResolve(RACES_ROOT, master);
+      mkdirSync(dirname(destination), { recursive: true });
+      writeFileSync(destination, await stripBackdrop(readFileSync(source)));
+      await ensureWebp(`races/${master.replace(/\.png$/, '.webp')}`);
+      return json(res, 200, { ok: true });
+    }
+
+    if (req.method === 'POST' && rest === '/discard') {
+      const { file } = await readBody(req);
+      unlinkSync(safeResolve(TMP_ROOT, join(id, file)));
+      return json(res, 200, { ok: true });
+    }
+
+    if (req.method === 'POST' && rest === '/keep') {
+      const { file, race, key } = await readBody(req);
+      const kebab = key.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+      const dir = safeResolve(RACES_ROOT, race);
+      // A freshly added race has no directory until its first kept image
+      mkdirSync(dir, { recursive: true });
+      let n = 1;
+      while (existsSync(join(dir, `${kebab}-alt-${n}.png`))) n++;
+      const source = safeResolve(TMP_ROOT, join(id, file));
+      writeFileSync(join(dir, `${kebab}-alt-${n}.png`), await stripBackdrop(readFileSync(source)));
+      unlinkSync(source);
+      return json(res, 200, { kept: `${race}/${kebab}-alt-${n}.png` });
+    }
+
+    json(res, 404, { error: 'unknown route' });
+  } catch (error) {
+    json(res, 500, { error: error.message });
+  }
+};
diff --git a/scripts/images.js b/scripts/images.js
new file mode 100644
index 00000000..c73ad445
--- /dev/null
+++ b/scripts/images.js
@@ -0,0 +1,99 @@
+import { existsSync, mkdirSync, readdirSync, rmSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import sharp from 'sharp';
+
+// Masters (png/jpg) live here, git-committed but never deployed (.vercelignore).
+const SRC = 'images';
+// Generated webp, git-committed, shipped as-is by both builds.
+const OUT = 'static/images';
+
+const RASTER = new Set(['.png', '.jpg', '.jpeg']);
+// Dev-tool masters (imagegen staging) — kept as masters, never shipped.
+const SKIP_TOP = new Set(['generated']);
+
+const BASE_QUALITY = 80;
+// No rule → transcode to webp at original dimensions, BASE_QUALITY.
+// A rule adds a max bounding box (fit inside, never enlarge) and/or quality.
+const RULES = {
+  races: { maxWidth: 600, maxHeight: 900, quality: 80 },
+  equipment: { maxWidth: 256, maxHeight: 256, quality: 85 },
+  bg: { maxWidth: 2048, maxHeight: 1152, quality: 72 },
+};
+
+const ext = (p) => p.slice(p.lastIndexOf('.')).toLowerCase();
+const top = (rel) => rel.split('/')[0];
+const ruleFor = (rel) => RULES[top(rel)] || {};
+const webpRelFor = (rel) => rel.replace(/\.(png|jpe?g)$/i, '.webp');
+const isMaster = (rel) => RASTER.has(ext(rel)) && !SKIP_TOP.has(top(rel));
+
+const walk = (dir, base = dir) =>
+  readdirSync(dir, { withFileTypes: true }).flatMap((e) => {
+    const abs = join(dir, e.name);
+    return e.isDirectory() ? walk(abs, base) : abs.slice(base.length + 1);
+  });
+
+const stale = (masterRel) => {
+  const out = join(OUT, webpRelFor(masterRel));
+  return !existsSync(out) || statSync(join(SRC, masterRel)).mtimeMs > statSync(out).mtimeMs;
+};
+
+const optimize = async (masterRel) => {
+  const rule = ruleFor(masterRel);
+  const out = join(OUT, webpRelFor(masterRel));
+  mkdirSync(dirname(out), { recursive: true });
+  let img = sharp(join(SRC, masterRel));
+  if (rule.maxWidth || rule.maxHeight)
+    img = img.resize({
+      width: rule.maxWidth,
+      height: rule.maxHeight,
+      fit: 'inside',
+      withoutEnlargement: true,
+    });
+  await img.webp({ quality: rule.quality ?? BASE_QUALITY }).toFile(out);
+};
+
+// A webp whose master is gone is an orphan — remove it so deletes propagate.
+const masterExists = (webpRel) =>
+  [...RASTER].some((e) => existsSync(join(SRC, webpRel.replace(/\.webp$/i, e))));
+
+const prune = () => {
+  if (!existsSync(OUT)) return;
+  for (const rel of walk(OUT)) {
+    if (ext(rel) !== '.webp' || SKIP_TOP.has(top(rel))) continue;
+    if (!masterExists(rel)) rmSync(join(OUT, rel));
+  }
+};
+
+// Dev: ensure the requested webp is current with its master, or delete it if the
+// master is gone. Returns false when there is nothing to serve.
+export const ensureWebp = async (webpRel) => {
+  if (SKIP_TOP.has(top(webpRel))) return false;
+  const base = webpRel.replace(/\.webp$/i, '');
+  const masterRel = [...RASTER].map((e) => base + e).find((r) => existsSync(join(SRC, r)));
+  if (!masterRel) {
+    const out = join(OUT, webpRel);
+    if (existsSync(out)) rmSync(out);
+    return false;
+  }
+  if (stale(masterRel)) await optimize(masterRel);
+  return true;
+};
+
+// Build safety net: regenerate every changed master and prune orphans. No-op
+// when /images is absent (Vercel ignores masters and ships the committed webp).
+export const syncAll = async () => {
+  if (!existsSync(SRC)) return;
+  const masters = walk(SRC).filter(isMaster);
+  // No masters present — e.g. Vercel, where /images is .vercelignore'd but its now
+  // empty dir still exists. Pruning here would treat every committed webp as an
+  // orphan and delete them all. Trust the committed static/images instead.
+  if (!masters.length) return;
+  let built = 0;
+  for (const rel of masters) if (stale(rel)) (await optimize(rel), built++);
+  prune();
+  console.info(`[images] ${masters.length} masters, ${built} (re)built`);
+};
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) await syncAll();
diff --git a/scripts/release-push.js b/scripts/release-push.js
new file mode 100644
index 00000000..480bb5c2
--- /dev/null
+++ b/scripts/release-push.js
@@ -0,0 +1,40 @@
+#!/usr/bin/env bun
+import { $ } from 'bun';
+
+const part = process.argv[2] ?? 'patch'; // patch | minor | major
+
+const bump = (v) => {
+  const [maj, min, pat] = v.split('.').map(Number);
+  return {
+    major: `${maj + 1}.0.0`,
+    minor: `${maj}.${min + 1}.0`,
+    patch: `${maj}.${min}.${pat + 1}`,
+  }[part];
+};
+
+const pad = (n) => String(n).padStart(2, '0');
+const d = new Date();
+const updated = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+
+// Frontend package.json is the source of truth; both packages get the SAME new
+// version so the client/server version check compares like with like.
+const version = bump((await Bun.file('package.json').json()).version);
+
+for (const path of ['package.json', 'server/package.json']) {
+  const pkg = await Bun.file(path).json();
+  pkg.version = version;
+  pkg.updated = updated;
+  await Bun.write(path, JSON.stringify(pkg, null, 2) + '\n');
+}
+
+// Frontend reads its version from this generated module (no build-time define).
+await Bun.write(
+  'js/version.js',
+  `// Generated — kept in sync with package.json by scripts/release-push.js. Do not edit by hand.\nexport default '${version}';\n`,
+);
+
+await $`git add -A`;
+await $`git commit -m ${`chore(release): v${version}`}`;
+await $`git push -u origin HEAD`;
+
+console.log(`✓ released v${version} (${updated})`);
diff --git a/scripts/routes.js b/scripts/routes.js
new file mode 100644
index 00000000..6d305a44
--- /dev/null
+++ b/scripts/routes.js
@@ -0,0 +1,28 @@
+import { readdirSync } from 'fs';
+
+const escapeRegex = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+// A `$x` path segment (file or folder) is a dynamic param; a terminal `$$x`
+// file is an optional catch-all — it serves its parent path and every path
+// below it (SPA shells that route client-side). Static pages fall through to
+// generic handling, so only dynamic ones are emitted (deepest first).
+export const scanRoutes = (pagesDir = 'pages') =>
+  readdirSync(pagesDir, { recursive: true })
+    .filter((f) => typeof f === 'string' && f.endsWith('.html'))
+    .map((f) => {
+      const segments = f.replace(/\.html$/, '').split('/');
+      if (!segments.some((s) => s.startsWith('$'))) return null;
+      const catchAll = segments.at(-1).startsWith('$$');
+      const head = (catchAll ? segments.slice(0, -1) : segments).map((s) =>
+        s.startsWith('$') ? ':' + s.slice(1) : s,
+      );
+      const headRegex = head.map((s) => (s.startsWith(':') ? '([^/]+)' : escapeRegex(s))).join('/');
+      return {
+        route:
+          '/' + [...head, ...(catchAll ? [':' + segments.at(-1).slice(2) + '*'] : [])].join('/'),
+        file: `/pages/${f}`,
+        regex: catchAll ? `^/${headRegex}(?:/(.+))?$` : `^/${headRegex}$`,
+      };
+    })
+    .filter(Boolean)
+    .sort((a, b) => b.route.split('/').length - a.route.split('/').length);
diff --git a/scripts/seed-bots-core.js b/scripts/seed-bots-core.js
new file mode 100644
index 00000000..66c5a5b7
--- /dev/null
+++ b/scripts/seed-bots-core.js
@@ -0,0 +1,139 @@
+// Shared bot-seeding logic, reused verbatim by the CLI (scripts/seed-bots.js) and the
+// admin event (server/events/admin/reseed-bots.js). Pure: it imports only the app's
+// shared constants and helpers (resolved via the /js path resolver) and operates on a
+// MongoDB collection handed in — so it carries no DB driver of its own and runs the
+// same whether invoked locally or in-process on the server.
+import { DEFAULT_GAME_STATE } from '/js/constants/DEFAULT_GAME_STATE.js';
+import { RECRUITABLE_CHARACTERS } from '/js/constants/RECRUITABLE_CHARACTERS.js';
+import { BOT_NAMES } from '/js/constants/BOT_NAMES.js';
+import CHARACTERS, { DEFAULT_EQUIPMENT } from '/js/constants/CHARACTERS.js';
+import EQUIPMENT, { ALL_EQUIPMENT } from '/js/constants/EQUIPMENT.js';
+import { calculateDefaultAbilitiesByCharacter } from '/js/utils.js';
+import { MAX_LEVEL, getExperienceByLevel, allowedNumberOfBrawlers } from '/js/level.js';
+
+export const BOTS_PER_LEVEL = 2;
+
+// ── Level-appropriate loadouts ──────────────────────────────────────────────
+// Seeded bots kit from the same merchant tiers a real player shops at (see armory.html),
+// so their gear reads like a genuine same-level ludus rather than the starter loadout.
+const MERCHANT_TIERS = [1, 5, 12, 18, 25];
+
+// Every armory-buyable item, hydrated once for its slot and authored level.
+const ARMORY_STOCK = Object.keys(ALL_EQUIPMENT)
+  .map((id) => ({ id, ...EQUIPMENT(id, true) }))
+  .filter((item) => (item.obtainedFrom ?? ['armory']).includes('armory'));
+
+const randomOf = (arr) => arr[Math.floor(Math.random() * arr.length)];
+
+// The stock a level-N shopper sees for one slot. Merchants unlock at MERCHANT_TIERS and
+// each sells its own level band ([tier, nextTier-1]) to anyone who can reach it — so a
+// level-1 shopper still sees Oswald's whole 1–4 band. Prefer the highest reachable tier,
+// walking down only when it stocks nothing for the slot, so gear stays near the bot's
+// level instead of dropping to something trivial.
+const slotStock = (level, slotsIn) => {
+  const forSlot = ARMORY_STOCK.filter((item) => item.slotsIn === slotsIn);
+  const reachable = MERCHANT_TIERS.filter((tier) => tier <= level);
+  for (let i = reachable.length - 1; i >= 0; i--) {
+    const tierMin = reachable[i];
+    const nextTier = MERCHANT_TIERS.find((tier) => tier > tierMin);
+    const tierMax = nextTier ? nextTier - 1 : Infinity;
+    const band = forSlot.filter((item) => item.level >= tierMin && item.level <= tierMax);
+    if (band.length) return band;
+  }
+  return [];
+};
+
+// A stored ref for a random slot item, frozen at its authored level exactly as an armory
+// purchase is — the level then scales its combat stats.
+const armoryPiece = (level, slotsIn) => {
+  const stock = slotStock(level, slotsIn);
+  if (!stock.length) return null;
+  const { id, level: itemLevel } = randomOf(stock);
+  const ref = EQUIPMENT(id, false);
+  ref.overrides = { level: itemLevel };
+  return ref;
+};
+
+// A full level-appropriate loadout: a two-hander, or a one-hander paired with a shield/
+// off-hand, plus armor, accessory and trinket. Randomised per brawler so a seeded lobby
+// isn't a row of identical kits.
+const loadoutForLevel = (level) => {
+  const equipment = { ...DEFAULT_EQUIPMENT };
+  const twoHander = Math.random() < 0.5 && armoryPiece(level, 'twoHand');
+  if (twoHander) {
+    equipment.mainHand = twoHander;
+  } else {
+    equipment.mainHand = armoryPiece(level, 'oneHand');
+    equipment.offHand = armoryPiece(level, 'offHand') || armoryPiece(level, 'oneHand');
+  }
+  equipment.armor = armoryPiece(level, 'armor');
+  equipment.accessory = armoryPiece(level, 'accessory');
+  equipment.trinket = armoryPiece(level, 'trinket');
+  return equipment;
+};
+
+const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+
+// A shuffled copy of the name pool, dealt one-per-bot so a single seed run never
+// repeats an accountName (the pool is far larger than the bot count). Fresh shuffle
+// per call — like pickRoster, bots need only be internally distinct, not stable.
+const nameDeck = () => {
+  const pool = [...BOT_NAMES];
+  for (let i = pool.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [pool[i], pool[j]] = [pool[j], pool[i]];
+  }
+  return pool;
+};
+
+// Pick `count` distinct playable brawlers, cloned to plain JSON (dropping description
+// function refs exactly like the real save path) with a fresh uuid — so a seeded roster
+// is indistinguishable from a recruited player's stored roster. Each is re-kitted with a
+// level-appropriate armory loadout (replacing the starter gear) and its abilities are
+// recomputed from that gear (as recruitment does), so a bot actually wields its weapons.
+// The authored partial currentHealth override is dropped so bots seed at full health.
+const pickRoster = (count, level) => {
+  const pool = [...RECRUITABLE_CHARACTERS];
+  return Array.from({ length: Math.min(count, pool.length) }, () => {
+    const [def] = pool.splice(Math.floor(Math.random() * pool.length), 1);
+    const clone = JSON.parse(JSON.stringify(def));
+    delete clone.overrides?.combatStats?.currentHealth;
+    clone.overrides.equipment = loadoutForLevel(level);
+    const brawler = { ...clone, uuid: crypto.randomUUID() };
+    brawler.overrides.abilities = JSON.parse(
+      JSON.stringify(calculateDefaultAbilitiesByCharacter(CHARACTERS(brawler, true))),
+    );
+    return brawler;
+  });
+};
+
+// A bot is a headless game state: a player-shaped document with no `users` entry. The
+// `bot: true` marker is the only addition, so a reseed wipes bots without ever matching
+// a player. accountRewards = level mirrors a fully-caught-up player, so the roster size
+// that level permits falls out of allowedNumberOfBrawlers. `accountName` (a real Docker-
+// style surname, dealt distinct) stands in for the users-doc name a real player has — it
+// rides on the game-state doc so teamplay reads it the same way for bots and players. _id
+// is left to MongoDB.
+export const buildBots = () => {
+  const names = nameDeck();
+  let n = 0;
+  return Array.from({ length: MAX_LEVEL }, (_, i) => i + 1).flatMap((level) =>
+    Array.from({ length: BOTS_PER_LEVEL }, () => ({
+      bot: true,
+      ...JSON.parse(JSON.stringify(DEFAULT_GAME_STATE)),
+      accountName: cap(names[n++ % names.length]),
+      experience: getExperienceByLevel(level),
+      accountRewards: level,
+      characters: pickRoster(allowedNumberOfBrawlers(level), level),
+    })),
+  );
+};
+
+// Replace every bot in `collection` with a fresh set. Only ever touches bot:true docs.
+export const seedBots = async (collection) => {
+  const bots = buildBots();
+  const { deletedCount } = await collection.deleteMany({ bot: true });
+  await collection.insertMany(bots);
+  const players = await collection.countDocuments({ bot: { $ne: true } });
+  return { inserted: bots.length, deleted: deletedCount, players };
+};
diff --git a/scripts/seed-bots.js b/scripts/seed-bots.js
new file mode 100644
index 00000000..b50c1431
--- /dev/null
+++ b/scripts/seed-bots.js
@@ -0,0 +1,35 @@
+import { join } from 'path';
+
+import { MongoClient } from 'mongodb';
+
+import { seasonNumber, seasonLabel, seasonCollection, serverNow } from '../server/seasons.js';
+import { seedBots } from './seed-bots-core.js';
+
+// CLI wrapper around seed-bots-core: opens its own Mongo connection and runs the same
+// seeding the admin event runs in-process. The /js imports inside the core resolve via
+// scripts/app-path-resolver.js, which must be preloaded — run `bun run seed-bots`.
+const ROOT = join(import.meta.dir, '..');
+
+const env = Object.fromEntries(
+  (await Bun.file(join(ROOT, 'server/.env')).text())
+    .split('\n')
+    .filter((line) => line.includes('=') && !line.trimStart().startsWith('#'))
+    .map((line) => {
+      const i = line.indexOf('=');
+      return [line.slice(0, i).trim(), line.slice(i + 1).trim()];
+    }),
+);
+const MONGO_CONNECT = process.env.MONGO_CONNECT || env.MONGO_CONNECT;
+
+const client = new MongoClient(MONGO_CONNECT);
+await client.connect();
+const db = client.db('battleborn-brawlers');
+const season = seasonNumber(serverNow());
+
+const { inserted, deleted, players } = await seedBots(seasonCollection(db, season));
+console.info(
+  `Season ${season} (data-${seasonLabel(season)}): removed ${deleted} old bots, ` +
+    `seeded ${inserted} new bots. Player documents untouched: ${players}.`,
+);
+
+await client.close();
diff --git a/scripts/setup-worktree.sh b/scripts/setup-worktree.sh
new file mode 100755
index 00000000..eaec95d1
--- /dev/null
+++ b/scripts/setup-worktree.sh
@@ -0,0 +1,57 @@
+#!/bin/sh
+set -e
+
+# A linked worktree is born with only git-tracked content, so the gitignored
+# local scaffolding the main checkout relies on is absent: node_modules, the
+# .vercel project link (without which `predev`'s `vercel env pull` fails),
+# .env.local, and the same for the server/ subpackage (its own node_modules and
+# .env). Recreate it here so the worktree runs exactly like main.
+# No-op in the main checkout and once a worktree is already set up.
+
+git_dir=$(git rev-parse --path-format=absolute --git-dir)
+common_dir=$(git rev-parse --path-format=absolute --git-common-dir)
+[ "$git_dir" = "$common_dir" ] && exit 0
+
+root=$(git rev-parse --show-toplevel)
+main=$(dirname "$common_dir")
+
+[ -d "$root/node_modules" ] && exit 0
+
+echo "Setting up worktree from $main"
+
+# bun install replaces locally-symlinked packages (Vibe, async-await-websockets)
+# with their published copies; re-point whatever @ape-egg symlinks the main
+# checkout uses in the given package dir so we keep developing against the
+# sibling source repos.
+relink() {
+  src=$1
+  dst=$2
+  [ -d "$src/node_modules/@ape-egg" ] || return 0
+  for link in $(cd "$src" && find node_modules/@ape-egg -maxdepth 1 -type l); do
+    rm -rf "$dst/$link"
+    ln -s "$(cd "$src" && readlink "$link")" "$dst/$link"
+  done
+}
+
+if [ ! -d "$root/.vercel" ]; then
+  cp -R "$main/.vercel" "$root/.vercel"
+fi
+
+if [ -f "$main/.env.local" ] && [ ! -f "$root/.env.local" ]; then
+  cp "$main/.env.local" "$root/.env.local"
+fi
+
+(cd "$root" && bun install)
+relink "$main" "$root"
+
+# The WebSocket backend in server/ is its own package with its own gitignored
+# node_modules and .env — install and recreate them the same way.
+if [ -d "$root/server" ]; then
+  if [ -f "$main/server/.env" ] && [ ! -f "$root/server/.env" ]; then
+    cp "$main/server/.env" "$root/server/.env"
+  fi
+  (cd "$root/server" && bun install)
+  relink "$main/server" "$root/server"
+fi
+
+echo "Worktree ready."
diff --git a/scripts/vercel-build.js b/scripts/vercel-build.js
new file mode 100644
index 00000000..313bdf7c
--- /dev/null
+++ b/scripts/vercel-build.js
@@ -0,0 +1,20 @@
+import { execSync } from 'node:child_process';
+import { renameSync, rmSync } from 'node:fs';
+
+// Vercel runs ONE build command into ONE output directory, but this project
+// ships two production targets: the Vibe-compiled (hyperspeed) build and the
+// plain vite runtime build. Pick at build time with the VIBE_MODE env var set
+// in the Vercel dashboard — default is compiled (the kept baseline); set
+// VIBE_MODE=runtime to ship the vite build instead. Both normalize to dist/ so
+// vercel.json's outputDirectory stays fixed.
+const mode = process.env.VIBE_MODE === 'runtime' ? 'runtime' : 'compiled';
+console.info(`[vercel-build] VIBE_MODE=${process.env.VIBE_MODE ?? '(unset)'} → ${mode}`);
+
+rmSync('dist', { recursive: true, force: true });
+
+if (mode === 'runtime') {
+  execSync('bun run build', { stdio: 'inherit' });
+} else {
+  execSync('bun run build:compiled', { stdio: 'inherit' });
+  renameSync('compiled', 'dist');
+}
diff --git a/server/bun.lockb b/server/bun.lockb
new file mode 100755
index 00000000..7c941dba
Binary files /dev/null and b/server/bun.lockb differ
diff --git a/server/constants/SERVER_ERROR.js b/server/constants/SERVER_ERROR.js
new file mode 100644
index 00000000..a365a694
--- /dev/null
+++ b/server/constants/SERVER_ERROR.js
@@ -0,0 +1,41 @@
+export const SERVER_ERROR = {
+  NOT_AUTHENTICATED: 'Not authenticated',
+  USER_NOT_LOGGED_IN: 'User not logged in',
+  CLIENT_OUTDATED: (clientVersion, serverVersion) =>
+    `Your client is outdated, please try again soon (${clientVersion} < ${serverVersion})`,
+  GAMESTATE_FETCH_FAILED:
+    "Couldn't fetch gameState, if the problem persists please contact admin on discord",
+
+  INVALID_LOGIN_CREDENTIALS: 'Invalid login credentials',
+  INVALID_EMAIL_FORMAT: 'Invalid email address format, please try again',
+  EMAIL_ALREADY_EXISTS: 'A user with that email address already exists',
+  PASSWORD_REQUIRED: 'You need to provide a password',
+  PASSWORD_TOO_SHORT: 'Your password needs to be at least 3 characters long',
+  FAILED_TO_SEND_MAIL: 'Failed to send mail',
+  RESET_LINK_INVALID: 'Reset link is either invalid or expired',
+
+  ACCOUNT_NAME_TOO_SHORT: 'Your account name must contain at least 3 letters',
+  ACCOUNT_NAME_TOO_LONG: "Your account name can't be longer than 8 letters",
+  ACCOUNT_NAME_TAKEN: 'That account name is already taken',
+
+  TEAMPLAY_NOT_FOUND: 'Teamplay not found',
+  TEAMPLAY_ALREADY_HOSTING: 'You already have a teamplay — only one at a time',
+  TEAMPLAY_ALREADY_STARTED: 'Teamplay already started',
+  TEAMPLAY_NOT_FINISHED: 'Teamplay is not finished',
+  ONLY_HOST_CAN_START: 'Only the host can start',
+  ONLY_HOST_CAN_KICK: 'Only the host can kick',
+  ALL_SLOTS_MUST_BE_FILLED: 'All slots must be filled',
+  ALREADY_IN_TEAMPLAY: 'You are already in this teamplay',
+  WRONG_NUMBER_OF_BRAWLERS: 'Wrong number of brawlers',
+  INVALID_TEAM: 'Invalid team',
+  INVALID_SLOT: 'Invalid slot',
+  SLOT_NOT_AVAILABLE: 'Slot not available',
+  SLOT_JUST_TAKEN: 'A slot was just taken — try again',
+  NOT_ENOUGH_ROOM: 'Not enough room in this team',
+  BRAWLERS_PER_TEAM_MULTIPLE: 'Brawlers per team must be a multiple of brawlers per account',
+  NOTHING_TO_CLAIM: 'Nothing to claim',
+  NO_BOTS_AVAILABLE: 'No bots seeded for this season',
+
+  UNAUTHORIZED: 'Unauthorized',
+  BOT_RESEED_FAILED: 'Bot re-seed failed',
+};
diff --git a/server/constants/admins.js b/server/constants/admins.js
new file mode 100644
index 00000000..b011bfe7
--- /dev/null
+++ b/server/constants/admins.js
@@ -0,0 +1,15 @@
+// Single source of truth for the admin allow-list, sourced from the VITE_EMAILS_ADMIN
+// env var (comma-separated). The server is authoritative (it gates admin-only events on
+// this); the client imports the same check to gate the Admin page UI. Read both ways so
+// it works under Bun (process.env) and in the browser bundle (Vite's import.meta.env —
+// the VITE_ prefix exposes it client-side). Admins match exactly (no domain matching).
+const RAW =
+  (typeof process !== 'undefined' && process.env.VITE_EMAILS_ADMIN) ||
+  import.meta.env.VITE_EMAILS_ADMIN ||
+  '';
+
+export const ADMIN_EMAILS = RAW.split(',')
+  .map((e) => e.trim().toLowerCase())
+  .filter(Boolean);
+
+export const isAdmin = (email) => !!email && ADMIN_EMAILS.includes(email.toLowerCase());
diff --git a/server/constants/testers.js b/server/constants/testers.js
new file mode 100644
index 00000000..8d004c7c
--- /dev/null
+++ b/server/constants/testers.js
@@ -0,0 +1,20 @@
+// Single source of truth for the tester allow-list, sourced from the VITE_EMAILS_TESTER
+// env var (comma-separated). The server is authoritative (it gates the season-clock
+// override on this); the client imports the same function for UI hints (dev bar, test
+// mode). Read both ways so it works under Bun (process.env) and in the browser bundle
+// (Vite's import.meta.env — the VITE_ prefix exposes it client-side). An entry that
+// starts with '@' matches a whole domain; otherwise it is an exact email match.
+const RAW =
+  (typeof process !== 'undefined' && process.env.VITE_EMAILS_TESTER) ||
+  import.meta.env.VITE_EMAILS_TESTER ||
+  '';
+
+export const TESTER_EMAILS = RAW.split(',')
+  .map((e) => e.trim().toLowerCase())
+  .filter(Boolean);
+
+export const isTester = (email) =>
+  !!email &&
+  TESTER_EMAILS.some((e) =>
+    e.startsWith('@') ? email.toLowerCase().endsWith(e) : email.toLowerCase() === e,
+  );
diff --git a/server/events/admin/reseed-bots.js b/server/events/admin/reseed-bots.js
new file mode 100644
index 00000000..2426763d
--- /dev/null
+++ b/server/events/admin/reseed-bots.js
@@ -0,0 +1,24 @@
+import { isAdmin } from '../../constants/admins.js';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+import { seasonNumber, seasonLabel, seasonCollection, serverNow } from '../../seasons.js';
+import { seedBots } from '../../../scripts/seed-bots-core.js';
+
+// Admin-only: re-seed the bot opponents in-process, using the server's own Mongo
+// connection — no subprocess, so it has no dependency on a root-level install. The
+// authorization is the same token→user lookup every event uses: $.token is the session
+// secret validated on the handshake, so a non-admin (or an unauthenticated console
+// caller) can never satisfy isAdmin. Shares seed-bots-core.js with the CLI — one path.
+export default async ({ token }, { mongo }) => {
+  const user = token ? await mongo.collection('users').findOne({ token }) : null;
+  if (!isAdmin(user?.email)) throw Error(translate(SERVER_ERROR.UNAUTHORIZED));
+
+  const season = seasonNumber(serverNow());
+  const { inserted, deleted, players } = await seedBots(seasonCollection(mongo, season));
+
+  return {
+    message:
+      `Season ${season} (data-${seasonLabel(season)}): removed ${deleted} old bots, ` +
+      `seeded ${inserted} new bots. Player documents untouched: ${players}.`,
+  };
+};
diff --git a/svelte-game-server/events/fetch-server-time.js b/server/events/fetch-server-time.js
similarity index 100%
rename from svelte-game-server/events/fetch-server-time.js
rename to server/events/fetch-server-time.js
diff --git a/svelte-game-server/events/index.js b/server/events/index.js
similarity index 100%
rename from svelte-game-server/events/index.js
rename to server/events/index.js
diff --git a/server/events/pvp/get-random-opponent.js b/server/events/pvp/get-random-opponent.js
new file mode 100644
index 00000000..c0eb1b0f
--- /dev/null
+++ b/server/events/pvp/get-random-opponent.js
@@ -0,0 +1,29 @@
+import { isTester } from '../../helpers';
+import { effectiveSeason, seasonCollection } from '../../seasons';
+
+export default async ({ token, timeOffset, minXp, maxXp, count }, { mongo }) => {
+  const user = token ? await mongo.collection('users').findOne({ token }) : null;
+  const season = effectiveSeason(timeOffset, isTester(user?.email));
+  const collection = seasonCollection(mongo, season);
+
+  const experience = { $gte: minXp };
+
+  if (maxXp) {
+    experience.$lte = maxXp;
+  }
+
+  const matches = await collection
+    .find({
+      $expr: { $gte: [{ $size: '$characters' }, count] },
+      experience,
+    })
+    .toArray();
+
+  if (matches.length !== 0) {
+    const randomOpponent = matches[Math.floor(Math.random() * matches.length)];
+
+    return randomOpponent.characters;
+  }
+
+  return [];
+};
diff --git a/server/events/store-game-state.js b/server/events/store-game-state.js
new file mode 100644
index 00000000..20458b28
--- /dev/null
+++ b/server/events/store-game-state.js
@@ -0,0 +1,45 @@
+import { isTester, mongoReady, translate } from '../helpers';
+import { SERVER_ERROR } from '../constants/SERVER_ERROR';
+import { effectiveSeason, seasonCollection, seasonLabel } from '../seasons';
+import mongodb from 'mongodb';
+const { ObjectId } = mongodb;
+
+export default async (data, { ws, mongo }) => {
+  const updated = new Date();
+  const users = mongo.collection('users');
+
+  const user = await users.findOne({
+    token: data.token,
+  });
+
+  if (!user) throw Error(translate(SERVER_ERROR.USER_NOT_LOGGED_IN));
+
+  const season = effectiveSeason(data.timeOffset, isTester(user.email));
+  const label = seasonLabel(season);
+
+  // The client sends a granular { update } diff by default, or the whole blob as a
+  // fallback (no `update`). Either way it folds into one flattened $set/$unset.
+  const { token, timeOffset, update, ...rest } = data;
+  const { set = {}, unset } = mongoReady(update ?? rest);
+
+  await seasonCollection(mongo, season).updateOne(
+    { _id: ObjectId(user._id) },
+    { $set: { ...set, updated }, ...(unset && { $unset: unset }) },
+    { upsert: true },
+  );
+
+  // Mirror the per-season slices onto the account, re-rooted under <root>.<label>, so
+  // the achievements + statistics pages read every season without touching per-season
+  // game data (lifetime totals, prior-season detection, cross-season counts).
+  const MIRROR_ROOTS = ['statistics', 'achievements'];
+  const accountSet = Object.entries(set).reduce((a, [key, value]) => {
+    const root = MIRROR_ROOTS.find((r) => key === r || key.startsWith(`${r}.`));
+    if (!root) return a;
+    const rest = key.slice(root.length);
+    return { ...a, [`${root}.${label}${rest}`]: value };
+  }, {});
+  if (Object.keys(accountSet).length)
+    await users.updateOne({ _id: ObjectId(user._id) }, { $set: accountSet });
+
+  return Date.now() - 2 * 60 * 60 * 1000;
+};
diff --git a/server/events/teamplay/chat.js b/server/events/teamplay/chat.js
new file mode 100644
index 00000000..08e13661
--- /dev/null
+++ b/server/events/teamplay/chat.js
@@ -0,0 +1,37 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+import { effectiveSeason, seasonCollection } from '../../seasons';
+
+const { ObjectId } = mongodb;
+
+// Anyone viewing a session can post; messages live on the doc and fan out to the
+// room. Stored forever (no pruning) per design.
+export default async ({ token, id, text }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+
+  const body = String(text || '')
+    .trim()
+    .slice(0, 500);
+  if (!body) return;
+
+  // Name from the game-state (data-*) doc — matching the rest of teamplay — with the
+  // users doc as fallback for accounts named before the mirror existed.
+  const roster = await seasonCollection(mongo, effectiveSeason(0, false)).findOne({
+    _id: user._id,
+  });
+  const message = {
+    owner_id: user._id.toString(),
+    name: roster?.accountName || user.accountName,
+    text: body,
+    at: Date.now(),
+  };
+  await mongo
+    .collection('teamplays')
+    .updateOne({ _id: ObjectId(id) }, { $push: { chat: message } });
+  room.emit(`teamplay:${id}`, 'teamplay:chat', { id, message });
+
+  return { ok: true };
+};
diff --git a/server/events/teamplay/create.js b/server/events/teamplay/create.js
new file mode 100644
index 00000000..1eda3897
--- /dev/null
+++ b/server/events/teamplay/create.js
@@ -0,0 +1,86 @@
+import mongodb from 'mongodb';
+
+import { effectiveSeason, seasonCollection } from '../../seasons';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+const clampInt = (value, lo, hi) => Math.max(lo, Math.min(hi, Math.round(Number(value) || 0)));
+
+// Server-validated lobby creation. Combat math is never validated, but the rules
+// that shape a session are — so an account can't craft an impossible lobby.
+export default async ({ token, rules }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+
+  // One live lobby per account: block a second create while an unfinished one this
+  // account hosts is still around (a completed session is historical and frees them).
+  const hosting = await mongo
+    .collection('teamplays')
+    .findOne({ host: user._id.toString(), status: { $in: ['open', 'live'] } });
+  if (hosting) throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_HOSTING));
+
+  // accountRewards is per-season state on the game-state roster, not the users doc.
+  const roster = await seasonCollection(mongo, effectiveSeason(0, false)).findOne({
+    _id: ObjectId(user._id),
+  });
+  const hostMax = Math.floor((roster?.accountRewards || 0) / 5) + 1;
+  // Name is sourced from the game-state (data-*) doc — like a bot's — falling back to the
+  // users doc only for accounts that named themselves before the data-* mirror existed.
+  const ownerName = roster?.accountName || user.accountName;
+
+  const amountOfTeams = clampInt(rules?.amountOfTeams, 2, 6);
+  const randomizedTeams = !!rules?.randomizedTeams;
+  // Randomization and per-account size are independent: a randomized lobby with >1
+  // brawler per account shuffles whole account blocks between teams (see shuffleTeams),
+  // so an account's brawlers always stay together.
+  const brawlersPerAccount = clampInt(rules?.brawlersPerAccount, 1, hostMax);
+  const brawlersPerTeam = clampInt(rules?.brawlersPerTeam, 2, 6);
+
+  if (brawlersPerTeam % brawlersPerAccount !== 0)
+    throw Error(translate(SERVER_ERROR.BRAWLERS_PER_TEAM_MULTIPLE));
+
+  const minLevel = clampInt(rules?.minLevel, 1, 25);
+  const maxLevel = clampInt(rules?.maxLevel, minLevel, 25);
+  const name = (typeof rules?.name === 'string' && rules.name.trim()) || ownerName;
+
+  const teams = Array.from({ length: amountOfTeams }, () => ({
+    slots: Array.from({ length: brawlersPerTeam }, () => ({
+      owner_id: null,
+      owner_name: null,
+      brawler: null,
+      claimed: false,
+    })),
+  }));
+
+  const now = new Date();
+  const { insertedId } = await mongo.collection('teamplays').insertOne({
+    rules: {
+      name,
+      randomizedTeams,
+      brawlersPerAccount,
+      amountOfTeams,
+      brawlersPerTeam,
+      minLevel,
+      maxLevel,
+    },
+    host: user._id.toString(),
+    hostName: ownerName,
+    teams,
+    status: 'open',
+    startedAt: null,
+    duration: null,
+    endState: null,
+    winningTeam: null,
+    chat: [],
+    pendingClaims: [],
+    createdAt: now,
+    // TTL prunes the lobby 30min after creation unless it starts (see server/index.js).
+    expiresAt: new Date(now.getTime() + 30 * 60 * 1000),
+  });
+
+  room.emit('teamplay:lobby', 'lobby:update', {});
+
+  return { _id: insertedId.toString() };
+};
diff --git a/server/events/teamplay/fill-bots.js b/server/events/teamplay/fill-bots.js
new file mode 100644
index 00000000..28dc8893
--- /dev/null
+++ b/server/events/teamplay/fill-bots.js
@@ -0,0 +1,80 @@
+import mongodb from 'mongodb';
+
+import { effectiveSeason, seasonCollection } from '../../seasons';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { isTester, translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+// Tester-only host tool: fill a team's empty slots with seeded bot opponents. Each
+// brawlers-per-account group becomes one distinct bot account, picked closest to the
+// lobby's level band, so a host can flesh out a lobby without waiting for real players.
+// No join-eligibility checks — the action is host- and tester-gated, and bots are trusted.
+export default async ({ token, id, teamIndex }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user || !isTester(user.email)) throw Error(translate(SERVER_ERROR.UNAUTHORIZED));
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  if (doc.host !== user._id.toString()) throw Error(translate(SERVER_ERROR.UNAUTHORIZED));
+  if (doc.status !== 'open') throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_STARTED));
+
+  const team = doc.teams[teamIndex];
+  if (!team) throw Error(translate(SERVER_ERROR.INVALID_TEAM));
+
+  const bpa = doc.rules.brawlersPerAccount;
+  const { minLevel, maxLevel } = doc.rules;
+
+  // Empty slots chunked into brawlers-per-account groups — one bot account per group.
+  const empties = team.slots.map((slot, i) => (slot.owner_id ? null : i)).filter((i) => i !== null);
+  const groups = [];
+  for (let i = 0; i + bpa <= empties.length; i += bpa) groups.push(empties.slice(i, i + bpa));
+  if (!groups.length) return { filled: 0 };
+
+  // Closest to the lobby's level band first (distance 0 = inside the band), each needing
+  // a roster deep enough to staff a whole group. Distinct accounts, one per group — and
+  // never an account already seated anywhere in this lobby (so a bot can't span teams).
+  const seated = new Set(doc.teams.flatMap((t) => t.slots.map((s) => s.owner_id)).filter(Boolean));
+  const distance = (lvl) => (lvl < minLevel ? minLevel - lvl : lvl > maxLevel ? lvl - maxLevel : 0);
+  const bots = (
+    await seasonCollection(mongo, effectiveSeason(0, false)).find({ bot: true }).toArray()
+  )
+    .filter((b) => !seated.has(b._id.toString()) && (b.characters?.length || 0) >= bpa)
+    .sort((a, b) => distance(a.accountRewards) - distance(b.accountRewards))
+    .slice(0, groups.length);
+  if (!bots.length) throw Error(translate(SERVER_ERROR.NO_BOTS_AVAILABLE));
+
+  // Freeze each brawler at its bot's ludus level (accountRewards) — same reason join.js
+  // freezes the owner's level: combat stats must read identically on every client.
+  const filter = { _id: doc._id, status: 'open' };
+  const set = {};
+  bots.forEach((bot, g) => {
+    const level = bot.accountRewards;
+    // Seeded Docker-style surname (see seed-bots-core); the `Bot xxxx` fallback only
+    // covers bot docs seeded before names existed, until the next reseed.
+    const name = bot.accountName || `Bot ${bot._id.toString().slice(-4)}`;
+    groups[g].forEach((si, k) => {
+      // Bots always seat at full health — drop any stored currentHealth (unset = full, as
+      // the seeder does) so a stale snapshot can't read short against the live maxHealth.
+      const brawler = { ...JSON.parse(JSON.stringify(bot.characters[k])), level };
+      delete brawler.overrides?.combatStats?.currentHealth;
+      filter[`teams.${teamIndex}.slots.${si}.owner_id`] = null;
+      set[`teams.${teamIndex}.slots.${si}`] = {
+        owner_id: bot._id.toString(),
+        owner_name: name,
+        brawler,
+        claimed: false,
+      };
+    });
+  });
+
+  const { modifiedCount } = await teamplays.updateOne(filter, { $set: set });
+  if (!modifiedCount) throw Error(translate(SERVER_ERROR.SLOT_JUST_TAKEN));
+
+  const fresh = await teamplays.findOne({ _id: doc._id });
+  room.emit(`teamplay:${id}`, 'teamplay:update', { ...fresh, _id: id });
+  room.emit('teamplay:lobby', 'lobby:update', {});
+
+  return { filled: bots.length };
+};
diff --git a/server/events/teamplay/get.js b/server/events/teamplay/get.js
new file mode 100644
index 00000000..8d711a72
--- /dev/null
+++ b/server/events/teamplay/get.js
@@ -0,0 +1,13 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+// Full session doc (frozen brawler snapshots + chat included) for the room page.
+export default async ({ id }, { mongo }) => {
+  const doc = await mongo.collection('teamplays').findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  return { ...doc, _id: doc._id.toString() };
+};
diff --git a/server/events/teamplay/heal-broadcast.js b/server/events/teamplay/heal-broadcast.js
new file mode 100644
index 00000000..822e6f36
--- /dev/null
+++ b/server/events/teamplay/heal-broadcast.js
@@ -0,0 +1,39 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+// Waiting-room heal relay. Not server-validated for now (per design): the sender's
+// own slot snapshots take the client-reported HP, then the room is notified so
+// everyone sees the health rise and the host's full-HP start gate updates.
+export default async ({ token, id, healed }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+  const accountId = user._id.toString();
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc || doc.status !== 'open') return;
+
+  const hpByUuid = Object.fromEntries((healed || []).map((h) => [h.uuid, h.currentHealth]));
+  let changed = false;
+  doc.teams.forEach((team) =>
+    team.slots.forEach((slot) => {
+      if (slot.owner_id !== accountId || !slot.brawler) return;
+      const hp = hpByUuid[slot.brawler.uuid];
+      if (hp === undefined) return;
+      slot.brawler.overrides = {
+        ...slot.brawler.overrides,
+        combatStats: { ...slot.brawler.overrides?.combatStats, currentHealth: hp },
+      };
+      changed = true;
+    }),
+  );
+  if (!changed) return;
+
+  await teamplays.updateOne({ _id: doc._id }, { $set: { teams: doc.teams } });
+  const fresh = await teamplays.findOne({ _id: doc._id });
+  room.emit(`teamplay:${id}`, 'teamplay:update', { ...fresh, _id: id });
+};
diff --git a/server/events/teamplay/join.js b/server/events/teamplay/join.js
new file mode 100644
index 00000000..09c7b94d
--- /dev/null
+++ b/server/events/teamplay/join.js
@@ -0,0 +1,73 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+import { effectiveSeason, seasonCollection } from '../../seasons';
+
+const { ObjectId } = mongodb;
+
+// Assign an account's frozen brawler(s) into a team. Owner identity comes from the
+// token (never the client), and the write is conditioned on the target slots still
+// being empty so two clients racing for the last slot can't both win.
+export default async ({ token, id, brawlers, teamIndex, slotIndex }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+  const accountId = user._id.toString();
+
+  // Display name comes from the game-state (data-*) doc — same source as a bot's seeded
+  // name — with the users doc as a fallback for accounts named before the mirror existed.
+  const roster = await seasonCollection(mongo, effectiveSeason(0, false)).findOne({
+    _id: user._id,
+  });
+  const ownerName = roster?.accountName || user.accountName;
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  if (doc.status !== 'open') throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_STARTED));
+
+  if (doc.teams.some((team) => team.slots.some((slot) => slot.owner_id === accountId)))
+    throw Error(translate(SERVER_ERROR.ALREADY_IN_TEAMPLAY));
+
+  const bpa = doc.rules.brawlersPerAccount;
+  if (!Array.isArray(brawlers) || brawlers.length !== bpa)
+    throw Error(translate(SERVER_ERROR.WRONG_NUMBER_OF_BRAWLERS));
+
+  const team = doc.teams[teamIndex];
+  if (!team) throw Error(translate(SERVER_ERROR.INVALID_TEAM));
+
+  // bpa===1 targets the exact slot clicked; bpa>1 fills the team's first empty block.
+  let targetSlots;
+  if (bpa === 1) {
+    if (slotIndex == null || team.slots[slotIndex]?.owner_id)
+      throw Error(translate(SERVER_ERROR.SLOT_NOT_AVAILABLE));
+    targetSlots = [slotIndex];
+  } else {
+    targetSlots = team.slots
+      .map((slot, i) => (slot.owner_id ? null : i))
+      .filter((i) => i !== null)
+      .slice(0, bpa);
+    if (targetSlots.length < bpa) throw Error(translate(SERVER_ERROR.NOT_ENOUGH_ROOM));
+  }
+
+  const filter = { _id: doc._id, status: 'open' };
+  const set = {};
+  targetSlots.forEach((si, k) => {
+    filter[`teams.${teamIndex}.slots.${si}.owner_id`] = null;
+    set[`teams.${teamIndex}.slots.${si}`] = {
+      owner_id: accountId,
+      owner_name: ownerName,
+      brawler: brawlers[k],
+      claimed: false,
+    };
+  });
+
+  const { modifiedCount } = await teamplays.updateOne(filter, { $set: set });
+  if (!modifiedCount) throw Error(translate(SERVER_ERROR.SLOT_JUST_TAKEN));
+
+  const fresh = await teamplays.findOne({ _id: doc._id });
+  room.emit(`teamplay:${id}`, 'teamplay:update', { ...fresh, _id: id });
+  room.emit('teamplay:lobby', 'lobby:update', {});
+
+  return { ok: true };
+};
diff --git a/server/events/teamplay/kick.js b/server/events/teamplay/kick.js
new file mode 100644
index 00000000..c90f7728
--- /dev/null
+++ b/server/events/teamplay/kick.js
@@ -0,0 +1,37 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+const emptySlot = () => ({ owner_id: null, owner_name: null, brawler: null, claimed: false });
+
+// Host-only, pre-start. mode 'team' empties an entire team; otherwise a single slot.
+export default async ({ token, id, teamIndex, slotIndex, mode }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  if (doc.status !== 'open') throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_STARTED));
+  if (doc.host !== user._id.toString()) throw Error(translate(SERVER_ERROR.ONLY_HOST_CAN_KICK));
+
+  const team = doc.teams[teamIndex];
+  if (!team) throw Error(translate(SERVER_ERROR.INVALID_TEAM));
+
+  if (mode === 'team') {
+    team.slots = team.slots.map(emptySlot);
+  } else {
+    if (!team.slots[slotIndex]) throw Error(translate(SERVER_ERROR.INVALID_SLOT));
+    team.slots[slotIndex] = emptySlot();
+  }
+
+  await teamplays.updateOne({ _id: doc._id }, { $set: { teams: doc.teams } });
+
+  const fresh = await teamplays.findOne({ _id: doc._id });
+  room.emit(`teamplay:${id}`, 'teamplay:update', { ...fresh, _id: id });
+  room.emit('teamplay:lobby', 'lobby:update', {});
+  return { ok: true };
+};
diff --git a/server/events/teamplay/leave.js b/server/events/teamplay/leave.js
new file mode 100644
index 00000000..45dd002c
--- /dev/null
+++ b/server/events/teamplay/leave.js
@@ -0,0 +1,41 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+const emptySlot = () => ({ owner_id: null, owner_name: null, brawler: null, claimed: false });
+
+// Pre-start leave. The host leaving cancels the whole lobby (freeing everyone);
+// anyone else just vacates their own slots. Post-start leave (loser confirming) is
+// a separate concern handled at claim time.
+export default async ({ token, id }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+  const accountId = user._id.toString();
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  if (doc.status !== 'open') throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_STARTED));
+
+  if (doc.host === accountId) {
+    await teamplays.deleteOne({ _id: doc._id });
+    room.emit(`teamplay:${id}`, 'teamplay:deleted', { _id: id });
+    room.emit('teamplay:lobby', 'lobby:update', {});
+    return { deleted: true };
+  }
+
+  doc.teams.forEach((team) =>
+    team.slots.forEach((slot, i) => {
+      if (slot.owner_id === accountId) team.slots[i] = emptySlot();
+    }),
+  );
+  await teamplays.updateOne({ _id: doc._id }, { $set: { teams: doc.teams } });
+
+  const fresh = await teamplays.findOne({ _id: doc._id });
+  room.emit(`teamplay:${id}`, 'teamplay:update', { ...fresh, _id: id });
+  room.emit('teamplay:lobby', 'lobby:update', {});
+  return { ok: true };
+};
diff --git a/server/events/teamplay/list.js b/server/events/teamplay/list.js
new file mode 100644
index 00000000..201c9521
--- /dev/null
+++ b/server/events/teamplay/list.js
@@ -0,0 +1,15 @@
+// Active teamplays for the listing page. Heavy fields (frozen brawler snapshots,
+// chat, endState) are dropped — the list only needs rules + slot ownership to
+// render the table; the full doc is fetched per-session via teamplay/get.
+export default async (_, { mongo }) => {
+  const docs = await mongo
+    .collection('teamplays')
+    .find(
+      { status: { $in: ['open', 'live'] } },
+      { projection: { 'teams.slots.brawler': 0, chat: 0, endState: 0 } },
+    )
+    .sort({ createdAt: -1 })
+    .toArray();
+
+  return docs.map((doc) => ({ ...doc, _id: doc._id.toString() }));
+};
diff --git a/server/events/teamplay/my-active.js b/server/events/teamplay/my-active.js
new file mode 100644
index 00000000..7dcd7459
--- /dev/null
+++ b/server/events/teamplay/my-active.js
@@ -0,0 +1,17 @@
+// The one teamplay an account is currently bound to: an open/live session it has
+// brawlers in, or a finished one it hasn't claimed/left yet. Drives the sidebar
+// badge, the account lock, and reload recovery. null when free.
+export default async ({ token }, { mongo }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) return null;
+  const accountId = user._id.toString();
+
+  const doc = await mongo.collection('teamplays').findOne({
+    $or: [
+      { status: { $in: ['open', 'live'] }, 'teams.slots.owner_id': accountId },
+      { status: 'completed', pendingClaims: accountId },
+    ],
+  });
+
+  return doc ? { ...doc, _id: doc._id.toString() } : null;
+};
diff --git a/server/events/teamplay/recent.js b/server/events/teamplay/recent.js
new file mode 100644
index 00000000..33683411
--- /dev/null
+++ b/server/events/teamplay/recent.js
@@ -0,0 +1,15 @@
+// 100 most recently played sessions for the Recent tab. Same lightweight shape as
+// the active list — heavy fields dropped; the full doc loads per-session via get.
+export default async (_, { mongo }) => {
+  const docs = await mongo
+    .collection('teamplays')
+    .find(
+      { status: 'completed' },
+      { projection: { 'teams.slots.brawler': 0, chat: 0, endState: 0 } },
+    )
+    .sort({ startedAt: -1 })
+    .limit(100)
+    .toArray();
+
+  return docs.map((doc) => ({ ...doc, _id: doc._id.toString() }));
+};
diff --git a/server/events/teamplay/start.js b/server/events/teamplay/start.js
new file mode 100644
index 00000000..679f16e2
--- /dev/null
+++ b/server/events/teamplay/start.js
@@ -0,0 +1,102 @@
+import mongodb from 'mongodb';
+
+import { effectiveSeason, seasonCollection } from '../../seasons';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+// Persist each attendee's post-combat HP to their current-season roster, so the
+// damage sticks even for players who were offline when the fight resolved.
+const writeBackHealth = async (mongo, endState) => {
+  const byOwner = {};
+  for (const entry of endState || []) {
+    if (!entry.owner_id) continue;
+    (byOwner[entry.owner_id] ||= {})[entry.uuid] = entry.currentHealth;
+  }
+
+  const rosters = seasonCollection(mongo, effectiveSeason(0, false));
+  for (const [ownerId, hps] of Object.entries(byOwner)) {
+    const roster = await rosters.findOne({ _id: ObjectId(ownerId) });
+    if (!roster?.characters || roster.bot) continue;
+    const characters = roster.characters.map((c) =>
+      hps[c.uuid] === undefined
+        ? c
+        : {
+            ...c,
+            overrides: {
+              ...c.overrides,
+              combatStats: { ...c.overrides?.combatStats, currentHealth: hps[c.uuid] },
+            },
+          },
+    );
+    await rosters.updateOne({ _id: ObjectId(ownerId) }, { $set: { characters } });
+  }
+};
+
+// Host-authored start. Combat math isn't validated — the host computes the outcome
+// locally and sends duration + endState + winner. The backend validates that the
+// session is startable, goes live, pops every attendee's screen, then after the
+// combat's own duration finalizes: status completed, pendingClaims set, broadcast.
+// HP writeback to each account's roster lands in the next slice.
+export default async (
+  { token, id, duration, winningTeamIndex, winningOwnerIds, endState },
+  { mongo, room, ws },
+) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  if (doc.host !== user._id.toString()) throw Error(translate(SERVER_ERROR.ONLY_HOST_CAN_START));
+  if (doc.status !== 'open') throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_STARTED));
+  if (!doc.teams.every((team) => team.slots.every((slot) => slot.owner_id)))
+    throw Error(translate(SERVER_ERROR.ALL_SLOTS_MUST_BE_FILLED));
+
+  const attendees = [
+    ...new Set(
+      doc.teams.flatMap((team) => team.slots.map((slot) => slot.owner_id)).filter(Boolean),
+    ),
+  ];
+
+  const { modifiedCount } = await teamplays.updateOne(
+    { _id: doc._id, status: 'open' },
+    {
+      $set: {
+        status: 'live',
+        startedAt: Date.now(),
+        duration,
+        winningTeamIndex,
+        winningOwnerIds,
+        endState,
+      },
+      $unset: { expiresAt: '' },
+    },
+  );
+  if (!modifiedCount) throw Error(translate(SERVER_ERROR.TEAMPLAY_ALREADY_STARTED));
+
+  const live = await teamplays.findOne({ _id: doc._id });
+  room.emit(`teamplay:${id}`, 'teamplay:started', { ...live, _id: id }, ws);
+  room.emit('teamplay:lobby', 'lobby:update', {});
+
+  // When the fight's duration elapses, settle the session for everyone.
+  setTimeout(
+    async () => {
+      const settled = await teamplays.updateOne(
+        { _id: doc._id, status: 'live' },
+        { $set: { status: 'completed', pendingClaims: attendees } },
+      );
+      if (!settled.modifiedCount) return;
+      await writeBackHealth(mongo, endState);
+      const done = await teamplays.findOne({ _id: doc._id });
+      if (done) {
+        room.emit(`teamplay:${id}`, 'teamplay:completed', { ...done, _id: id });
+        room.emit('teamplay:lobby', 'lobby:update', {});
+      }
+    },
+    Math.max(0, duration || 0),
+  );
+
+  return { ok: true };
+};
diff --git a/server/events/teamplay/subscribe-lobby.js b/server/events/teamplay/subscribe-lobby.js
new file mode 100644
index 00000000..f8b43e16
--- /dev/null
+++ b/server/events/teamplay/subscribe-lobby.js
@@ -0,0 +1,3 @@
+export default (_, { room }) => {
+  room.join('teamplay:lobby');
+};
diff --git a/server/events/teamplay/subscribe.js b/server/events/teamplay/subscribe.js
new file mode 100644
index 00000000..35e7cb8d
--- /dev/null
+++ b/server/events/teamplay/subscribe.js
@@ -0,0 +1,3 @@
+export default ({ id }, { room }) => {
+  room.join(`teamplay:${id}`);
+};
diff --git a/server/events/teamplay/unsubscribe-lobby.js b/server/events/teamplay/unsubscribe-lobby.js
new file mode 100644
index 00000000..09bc1497
--- /dev/null
+++ b/server/events/teamplay/unsubscribe-lobby.js
@@ -0,0 +1,3 @@
+export default (_, { room }) => {
+  room.leave('teamplay:lobby');
+};
diff --git a/server/events/teamplay/unsubscribe.js b/server/events/teamplay/unsubscribe.js
new file mode 100644
index 00000000..5dcfb587
--- /dev/null
+++ b/server/events/teamplay/unsubscribe.js
@@ -0,0 +1,3 @@
+export default ({ id }, { room }) => {
+  room.leave(`teamplay:${id}`);
+};
diff --git a/server/events/teamplay/verify-reward.js b/server/events/teamplay/verify-reward.js
new file mode 100644
index 00000000..e14278cc
--- /dev/null
+++ b/server/events/teamplay/verify-reward.js
@@ -0,0 +1,58 @@
+import mongodb from 'mongodb';
+
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { translate } from '../../helpers';
+
+const { ObjectId } = mongodb;
+
+// Winning-team experience: a flat base lifted by randomized teams (×1.5), brawlers per
+// account (+10% each past the first) and team count (+50% each past two). Mirror of
+// teamplayWinningXp in js/teamplay.js — keep the two in lockstep.
+const teamplayWinningXp = (randomizedTeams, brawlersPerAccount, amountOfTeams) =>
+  Math.round(
+    100 *
+      (randomizedTeams ? 1.5 : 1) *
+      (1 + 0.1 * (brawlersPerAccount - 1)) *
+      (1 + 0.5 * (amountOfTeams - 2)),
+  );
+
+// The per-account grant: the full winning-team value for the winning side, a 10%
+// participation cut for the losing side, nothing for spectators. Returned as a `reward`
+// object so other reward types (coins, loot, ranking) can be added later.
+const computeReward = (doc, accountId) => {
+  const count = doc.teams.reduce(
+    (n, team) => n + team.slots.filter((s) => s.owner_id === accountId).length,
+    0,
+  );
+  if (!count) return { xp: 0 };
+  const { randomizedTeams, brawlersPerAccount, amountOfTeams } = doc.rules;
+  const winningXp = teamplayWinningXp(randomizedTeams, brawlersPerAccount, amountOfTeams);
+  // winningOwnerIds resolves the winning side by account, so it's immune to the shuffle
+  // and per-viewer rotation that make team indices meaningless for identifying a winner.
+  const won = doc.winningOwnerIds?.includes(accountId);
+  return { xp: won ? winningXp : Math.round(winningXp * 0.1) };
+};
+
+// Gates the claim (must have fought, session finished, not already claimed) and
+// returns the reward. The xp grant itself is applied client-side (consistent with
+// how all xp is persisted) — the server's job is one-time eligibility, enforced by
+// atomically pulling the account out of pendingClaims.
+export default async ({ token, id }, { mongo, room }) => {
+  const user = await mongo.collection('users').findOne({ token });
+  if (!user) throw Error(translate(SERVER_ERROR.NOT_AUTHENTICATED));
+  const accountId = user._id.toString();
+
+  const teamplays = mongo.collection('teamplays');
+  const doc = await teamplays.findOne({ _id: ObjectId(id) });
+  if (!doc) throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FOUND));
+  if (doc.status !== 'completed') throw Error(translate(SERVER_ERROR.TEAMPLAY_NOT_FINISHED));
+
+  const { modifiedCount } = await teamplays.updateOne(
+    { _id: doc._id, pendingClaims: accountId },
+    { $pull: { pendingClaims: accountId } },
+  );
+  if (!modifiedCount) throw Error(translate(SERVER_ERROR.NOTHING_TO_CLAIM));
+
+  room.emit('teamplay:lobby', 'lobby:update', {});
+  return { reward: computeReward(doc, accountId) };
+};
diff --git a/server/events/user/authenticate.js b/server/events/user/authenticate.js
new file mode 100644
index 00000000..23fc1a99
--- /dev/null
+++ b/server/events/user/authenticate.js
@@ -0,0 +1,37 @@
+import json from '../../package.json' assert { type: 'json' };
+import { isNewerVersion, isTester, translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { effectiveSeason, seasonCollection } from '../../seasons';
+import mongodb from 'mongodb';
+const { ObjectId } = mongodb;
+
+const { version: serverVersion } = json;
+
+export default async ({ token, clientVersion, isDev, timeOffset }, { mongo }) => {
+  if (isNewerVersion(clientVersion, serverVersion) && !isDev)
+    throw Error(translate(SERVER_ERROR.CLIENT_OUTDATED(clientVersion, serverVersion)));
+
+  const user = await mongo.collection('users').findOne({ token });
+
+  if (!user) throw Error(translate(SERVER_ERROR.GAMESTATE_FETCH_FAILED));
+
+  const season = effectiveSeason(timeOffset, isTester(user.email));
+  const gameState = await seasonCollection(mongo, season).findOne({ _id: ObjectId(user._id) });
+
+  const data = {
+    serverTimestampSnapshot: Date.now() - 2 * 60 * 60 * 1000,
+    accountId: user._id.toString(),
+    email: user.email,
+    accountName: user.accountName || null,
+    season,
+    premiumUntil: user.premiumUntil || 0,
+    // All-season mirrored caches so the client can compute lifetime totals and
+    // detect prior-season seasonal earns the moment it loads (see boot.lifetimeStats).
+    accountStatistics: user.statistics || {},
+    accountAchievements: user.achievements || {},
+  };
+
+  if (gameState) data.gameState = gameState;
+
+  return data;
+};
diff --git a/server/events/user/clear-pass.js b/server/events/user/clear-pass.js
new file mode 100644
index 00000000..c5549199
--- /dev/null
+++ b/server/events/user/clear-pass.js
@@ -0,0 +1,15 @@
+import { translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+
+// Clears account premium. Used by the tester "Premium" badge to drop membership
+// so the free experience can be tested; only affects the caller's own account.
+export default async ({ token }, { mongo }) => {
+  const users = mongo.collection('users');
+  const user = await users.findOne({ token });
+
+  if (!user) throw Error(translate(SERVER_ERROR.USER_NOT_LOGGED_IN));
+
+  await users.updateOne({ _id: user._id }, { $set: { premiumUntil: 0 } });
+
+  return { premiumUntil: 0 };
+};
diff --git a/server/events/user/get-statistics.js b/server/events/user/get-statistics.js
new file mode 100644
index 00000000..df9fc249
--- /dev/null
+++ b/server/events/user/get-statistics.js
@@ -0,0 +1,10 @@
+import { translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+
+export default async ({ token }, { mongo }) => {
+  const user = await mongo.collection('users').findOne({ token });
+
+  if (!user) throw Error(translate(SERVER_ERROR.USER_NOT_LOGGED_IN));
+
+  return { statistics: user.statistics || {} };
+};
diff --git a/server/events/user/login.js b/server/events/user/login.js
new file mode 100644
index 00000000..33c6577f
--- /dev/null
+++ b/server/events/user/login.js
@@ -0,0 +1,35 @@
+import { translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+
+const {
+  password: { hash, verify },
+} = Bun;
+
+export default async ({ email, password }, { ws, mongo }) => {
+  if (!email || !password) throw Error(translate(SERVER_ERROR.INVALID_LOGIN_CREDENTIALS));
+
+  const token = ws.data; // Buns .data is the websocket ID
+  const users = mongo.collection('users');
+  const updated = new Date();
+
+  email = email.toLowerCase().trim();
+
+  const user = await users.findOne({
+    email,
+  });
+
+  if (!user) throw Error(translate(SERVER_ERROR.INVALID_LOGIN_CREDENTIALS));
+
+  const correctPassword = await verify(password, user.password);
+
+  if (!correctPassword) throw Error(translate(SERVER_ERROR.INVALID_LOGIN_CREDENTIALS));
+
+  await users.updateOne(
+    {
+      email,
+    },
+    { $set: { token, updated } },
+  );
+
+  return token;
+};
diff --git a/server/events/user/password/request-reset.js b/server/events/user/password/request-reset.js
new file mode 100644
index 00000000..006a5239
--- /dev/null
+++ b/server/events/user/password/request-reset.js
@@ -0,0 +1,47 @@
+import { Resend } from 'resend';
+import hashids from 'hashids';
+import { validateEmail, translate } from '../../../helpers';
+import { SERVER_ERROR } from '../../../constants/SERVER_ERROR';
+
+const { RESEND_API_KEY, PASSWORD_RESET_HASH } = process.env;
+
+const Hashids = new hashids(PASSWORD_RESET_HASH);
+
+export default async ({ email, url }, { mongo }) => {
+  const collection = mongo.collection('users');
+
+  const LCemail = email.toLowerCase().trim();
+
+  if (!validateEmail(LCemail)) throw Error(translate(SERVER_ERROR.INVALID_EMAIL_FORMAT));
+
+  const user = await collection.findOne({
+    email: LCemail,
+  });
+
+  if (!user) return;
+
+  if (user.pwr > new Date().getTime()) return;
+
+  const pwr = new Date().getTime() + 60000;
+  collection.updateOne(
+    { email: LCemail },
+    {
+      $set: {
+        pwr,
+      },
+    },
+  );
+
+  try {
+    const token = Hashids.encode(pwr);
+    await new Resend(RESEND_API_KEY).emails.send({
+      from: '"Battleborn Brawlers" <noreply@worldseed.eu>',
+      to: email,
+      subject: 'Battleborn Brawlers password reset request',
+      html: `<p>Hello ${user.email}!</p><p>Here is your link to reset your password:<br><a href="${url}/reset-password/${token}">${url}/reset-password/${token}</a><br>The link expires in 10 minutes.</p><p>You can't reply to this email.</p>`,
+    });
+  } catch (e) {
+    console.error(e);
+    throw Error(translate(SERVER_ERROR.FAILED_TO_SEND_MAIL));
+  }
+};
diff --git a/server/events/user/password/reset-eligibility.js b/server/events/user/password/reset-eligibility.js
new file mode 100644
index 00000000..3d3baa5d
--- /dev/null
+++ b/server/events/user/password/reset-eligibility.js
@@ -0,0 +1,27 @@
+import hashids from 'hashids';
+
+import { translate } from '../../../helpers';
+import { SERVER_ERROR } from '../../../constants/SERVER_ERROR';
+
+const { PASSWORD_RESET_HASH } = process.env;
+const Hashids = new hashids(PASSWORD_RESET_HASH);
+
+export default async ({ secret }, { mongo }) => {
+  const collection = mongo.collection('users');
+
+  const [pwr] = Hashids.decode(secret);
+
+  if (!pwr) throw Error(translate(SERVER_ERROR.RESET_LINK_INVALID));
+
+  const user = await collection.findOne({
+    pwr,
+  });
+
+  if (!user) throw Error(translate(SERVER_ERROR.RESET_LINK_INVALID));
+
+  // 20 minutes
+  if (user.pwr + 1200000 < new Date().getTime())
+    throw Error(translate(SERVER_ERROR.RESET_LINK_INVALID));
+
+  return user;
+};
diff --git a/server/events/user/password/set-new.js b/server/events/user/password/set-new.js
new file mode 100644
index 00000000..dfd7e73e
--- /dev/null
+++ b/server/events/user/password/set-new.js
@@ -0,0 +1,33 @@
+import hashids from 'hashids';
+
+import { translate } from '../../../helpers';
+import { SERVER_ERROR } from '../../../constants/SERVER_ERROR';
+
+const {
+  password: { hash, verify },
+} = Bun;
+
+const { PASSWORD_RESET_HASH } = process.env;
+const Hashids = new hashids(PASSWORD_RESET_HASH);
+
+export default async ({ password, secret }, { mongo }) => {
+  const collection = mongo.collection('users');
+
+  const [pwr] = Hashids.decode(secret);
+
+  if (password.length < 3) throw Error(translate(SERVER_ERROR.PASSWORD_TOO_SHORT));
+
+  const { matchedCount } = await collection.updateOne(
+    { pwr },
+    {
+      $set: {
+        password: await hash(password),
+        pwr: null,
+      },
+    },
+  );
+
+  if (matchedCount) return;
+
+  throw Error(translate(SERVER_ERROR.RESET_LINK_INVALID));
+};
diff --git a/server/events/user/purchase-pass.js b/server/events/user/purchase-pass.js
new file mode 100644
index 00000000..adba4bdb
--- /dev/null
+++ b/server/events/user/purchase-pass.js
@@ -0,0 +1,22 @@
+import { isTester, translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { effectiveTime, seasonNumber, seasonEnd, isDowntime } from '../../seasons';
+
+// Season Pass purchase. Premium lives on the account (not the seasonal save) as an
+// expiry date, so it survives season wipes. For now a single purchase covers the
+// current season; payment is faked client-side until Steam/Stripe lands. Buying
+// during the downtime covers the upcoming season — the current one is already over.
+export default async ({ token, timeOffset }, { mongo }) => {
+  const users = mongo.collection('users');
+  const user = await users.findOne({ token });
+
+  if (!user) throw Error(translate(SERVER_ERROR.USER_NOT_LOGGED_IN));
+
+  const now = effectiveTime(timeOffset, isTester(user.email));
+  const season = seasonNumber(now) + (isDowntime(now) ? 1 : 0);
+  const premiumUntil = seasonEnd(season);
+
+  await users.updateOne({ _id: user._id }, { $set: { premiumUntil } });
+
+  return { premiumUntil };
+};
diff --git a/server/events/user/register.js b/server/events/user/register.js
new file mode 100644
index 00000000..c98e16cc
--- /dev/null
+++ b/server/events/user/register.js
@@ -0,0 +1,32 @@
+import { validateEmail, translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+
+const {
+  password: { hash },
+} = Bun;
+
+export default async ({ email, password }, { mongo }) => {
+  const collection = mongo.collection('users');
+  const correctEmailFormat = email.toLowerCase().trim();
+
+  if (!password) throw Error(translate(SERVER_ERROR.PASSWORD_REQUIRED));
+  if (password.length < 3) throw Error(translate(SERVER_ERROR.PASSWORD_TOO_SHORT));
+  if (!validateEmail(correctEmailFormat)) throw Error(translate(SERVER_ERROR.INVALID_EMAIL_FORMAT));
+
+  const exists = await collection.findOne({
+    email: correctEmailFormat,
+  });
+
+  if (exists) throw Error(translate(SERVER_ERROR.EMAIL_ALREADY_EXISTS));
+
+  const date = new Date();
+
+  await collection.insertOne({
+    email: correctEmailFormat,
+    password: await hash(password),
+    token: null,
+    pwr: null,
+    created: date,
+    updated: date,
+  });
+};
diff --git a/server/events/user/set-account-name.js b/server/events/user/set-account-name.js
new file mode 100644
index 00000000..63fe5d23
--- /dev/null
+++ b/server/events/user/set-account-name.js
@@ -0,0 +1,46 @@
+import mongodb from 'mongodb';
+
+import { translate } from '../../helpers';
+import { SERVER_ERROR } from '../../constants/SERVER_ERROR';
+import { effectiveSeason, seasonCollection } from '../../seasons';
+
+const { ObjectId } = mongodb;
+
+// Sets the account's display name — the identity shown everywhere in-game (teamplay
+// lobbies, chat, slots) in place of the email. Validation mirrors world-seed: letters
+// only, 3-8 letters, and case-insensitively unique. Names are compared lowercased so
+// "AsD" and "asd" are the same name; stored with only the first letter capitalised.
+export default async ({ token, accountName }, { mongo }) => {
+  const users = mongo.collection('users');
+  const user = await users.findOne({ token });
+
+  if (!user) throw Error(translate(SERVER_ERROR.USER_NOT_LOGGED_IN));
+
+  const lower = String(accountName || '')
+    .replace(/[^A-Za-z]/g, '')
+    .toLowerCase();
+
+  if (lower.length < 3) throw Error(translate(SERVER_ERROR.ACCOUNT_NAME_TOO_SHORT));
+  if (lower.length > 8) throw Error(translate(SERVER_ERROR.ACCOUNT_NAME_TOO_LONG));
+
+  const taken = await users.findOne({
+    _id: { $ne: user._id },
+    accountName: { $regex: `^${lower}$`, $options: 'i' },
+  });
+  if (taken) throw Error(translate(SERVER_ERROR.ACCOUNT_NAME_TAKEN));
+
+  const name = lower.charAt(0).toUpperCase() + lower.slice(1);
+  await users.updateOne({ _id: user._id }, { $set: { accountName: name } });
+
+  // Mirror onto the game-state (data-*) doc — the season teamplay reads from — so a
+  // player's name is sourced there exactly like a bot's seeded one. Same _id as the
+  // users doc; upsert covers a brand-new account whose game state hasn't saved yet
+  // (its later store-game-state folds into the same doc).
+  await seasonCollection(mongo, effectiveSeason(0, false)).updateOne(
+    { _id: ObjectId(user._id) },
+    { $set: { accountName: name } },
+    { upsert: true },
+  );
+
+  return name;
+};
diff --git a/server/helpers.js b/server/helpers.js
new file mode 100644
index 00000000..1bc7bd3f
--- /dev/null
+++ b/server/helpers.js
@@ -0,0 +1,119 @@
+import { isTester } from './constants/testers.js';
+
+var validateEmail = (email) =>
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    String(email),
+  );
+
+const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
+
+const filterSplit = (array, condition) =>
+  array.reduce(
+    ([hits, misses], item) =>
+      condition(item) ? [[...hits, item], misses] : [hits, [...misses, item]],
+    [[], []],
+  );
+
+const emptySlot = (obj) => typeof obj !== 'object' || !Object.keys(obj).length;
+
+const filledSlot = (obj) => !emptySlot(obj);
+
+const intToArray = (int, fill = undefined) =>
+  Array(int)
+    .fill(0)
+    .map((_, i) => (fill !== undefined ? fill : i));
+
+const parseVersion = (versionString) => {
+  const [major, minor, patch] = versionString.split('.').map(Number);
+
+  return {
+    major,
+    minor,
+    patch,
+  };
+};
+
+const isNewerVersion = (oldVer, newVer) => {
+  const oldParts = oldVer.split('.');
+  const newParts = newVer.split('.');
+  for (var i = 0; i < newParts.length; i++) {
+    const a = ~~newParts[i]; // parse int
+    const b = ~~oldParts[i]; // parse int
+    if (a > b) return true;
+    if (a < b) return false;
+  }
+  return false;
+};
+
+const capitalizeFirstLetter = (string) => `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+
+const transform = (data) =>
+  Object.entries(data).reduce(
+    (a, [key, value]) =>
+      value && typeof value === 'object' && value.length === undefined && Object.keys(value).length
+        ? {
+            ...a,
+            ...Object.entries(transform(value)).reduce(
+              (ac, [k, v]) => ({
+                ...ac,
+                [`${key}.${k}`]: v,
+              }),
+              {},
+            ),
+          }
+        : {
+            ...a,
+            [key]: value,
+          },
+    {},
+  );
+
+const mongoReady = (data) =>
+  Object.entries(transform(data)).reduce((a, [key, value]) => {
+    const unset = value === '$unset' && value;
+    const mainKey = (unset || '$set').replace('$', '');
+    return {
+      ...a,
+      [mainKey]: {
+        ...a[mainKey],
+        [key]: !!unset || value,
+      },
+    };
+  }, {});
+
+const typeSizes = {
+  undefined: () => 0,
+  boolean: () => 4,
+  number: () => 8,
+  string: (item) => 2 * item.length,
+  object: (item) =>
+    !item
+      ? 0
+      : Object.keys(item).reduce((total, key) => sizeOf(key) + sizeOf(item[key]) + total, 0),
+};
+
+const sizeOf = (value) => typeSizes[typeof value](value);
+
+const readableTimestamp = (timestamp) => new Date(timestamp).toLocaleString();
+
+const onlyUnique = (value, index, self) => self.indexOf(value) === index;
+
+const translate = (string) => string;
+
+export {
+  validateEmail,
+  sleep,
+  filterSplit,
+  emptySlot,
+  filledSlot,
+  intToArray,
+  parseVersion,
+  isNewerVersion,
+  capitalizeFirstLetter,
+  mongoReady,
+  sizeOf,
+  readableTimestamp,
+  onlyUnique,
+  isTester,
+  translate,
+};
diff --git a/server/index.js b/server/index.js
new file mode 100644
index 00000000..c9587bce
--- /dev/null
+++ b/server/index.js
@@ -0,0 +1,51 @@
+// Registers a resolver mapping the app's absolute `/js/...` specifiers to the repo
+// root, so server events can import the shared frontend constants (e.g. the bot-seed
+// core). Only this small file is needed at startup; js/ itself is read lazily, when an
+// event actually imports it — so a missing js/ can never break the server boot.
+import '../scripts/app-path-resolver.js';
+
+import aaw from '@ape-egg/async-await-websockets';
+import { MongoClient } from 'mongodb';
+import { sizeOf } from './helpers';
+
+const { PORT, MONGO_CONNECT } = process.env;
+
+const client = new MongoClient(MONGO_CONNECT, {
+  useNewUrlParser: true,
+  useUnifiedTopology: true,
+});
+
+client.connect((error, mongo) => {
+  if (error) throw error;
+
+  const db = mongo.db('battleborn-brawlers');
+
+  // Auto-prune teamplay lobbies that never started (expiresAt = createdAt + 30min,
+  // unset on start so live/completed sessions survive).
+  const teamplays = db.collection('teamplays');
+  teamplays
+    .createIndex({ expiresAt: 1 }, { expireAfterSeconds: 0 })
+    .catch((e) => console.error('teamplays TTL index:', e));
+  // Backs the listing query: active sessions newest-first.
+  teamplays
+    .createIndex({ status: 1, createdAt: -1 })
+    .catch((e) => console.error('teamplays list index:', e));
+
+  aaw(
+    'events',
+    { mongo: db },
+    undefined,
+    ({ event, websocketKey, _async, error, body, _response }, log) => {
+      const { version } = body || {};
+      const toLog = [];
+
+      toLog.push(`${error ? '🔴' : '🟢'} ${event}`);
+      toLog.push(version || 'n/a');
+      toLog.push(websocketKey);
+      toLog.push(sizeOf(body));
+      if (error) toLog.push(error);
+
+      log(toLog.join(' | '));
+    },
+  );
+});
diff --git a/svelte-game-server/package.json b/server/package.json
similarity index 79%
rename from svelte-game-server/package.json
rename to server/package.json
index 51a1e58b..ad08fa31 100644
--- a/svelte-game-server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "battle-brawlers-server",
-  "version": "0.0.3",
+  "name": "battleborn-brawlers-server",
+  "version": "0.1.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,9 +19,10 @@
   },
   "homepage": "https://github.com/kkortes/svelte-game-stack#readme",
   "dependencies": {
-    "async-await-websockets": "^3.0.3",
+    "@ape-egg/async-await-websockets": "^3.1.0",
     "hashids": "^2.3.0",
     "mongodb": "^4.8.1",
     "resend": "^6.9.3"
-  }
+  },
+  "updated": "2026-06-19 19:30"
 }
diff --git a/server/seasons.js b/server/seasons.js
new file mode 100644
index 00000000..1f108fb1
--- /dev/null
+++ b/server/seasons.js
@@ -0,0 +1,47 @@
+// Season scheduling — server-authoritative copy of js/seasons.js. The two must
+// compute identically; the client only mirrors this for display. Storage routing
+// (which data-YYYY-MM collection) is decided here, from the server clock.
+
+export const SEASON_CONFIG = {
+  epochYear: 2026,
+  epochMonth: 5, // June (0-indexed) → Season 1
+  downtime: 24 * 60 * 60 * 1000,
+};
+
+// The whole game runs on a clock shifted -2h from wall time (see fetch-server-time
+// and the heal re-anchor). Season math uses the same shifted clock so the client's
+// displayed season and the server's storage routing always agree.
+export const serverNow = () => Date.now() - 2 * 60 * 60 * 1000;
+
+export const seasonNumber = (t) => {
+  const d = new Date(t);
+  return (
+    (d.getUTCFullYear() - SEASON_CONFIG.epochYear) * 12 +
+    (d.getUTCMonth() - SEASON_CONFIG.epochMonth) +
+    1
+  );
+};
+
+export const seasonStart = (n) =>
+  Date.UTC(SEASON_CONFIG.epochYear, SEASON_CONFIG.epochMonth + (n - 1), 1);
+
+export const seasonEnd = (n) => seasonStart(n + 1);
+
+export const downtimeStart = (n) => seasonEnd(n) - SEASON_CONFIG.downtime;
+
+export const isDowntime = (t) => t >= downtimeStart(seasonNumber(t));
+
+// Testers may pass a dev time offset to jump between seasons; everyone else is
+// pinned to the real server clock.
+export const effectiveTime = (timeOffset, isTester) =>
+  serverNow() + (isTester ? timeOffset || 0 : 0);
+
+export const effectiveSeason = (timeOffset, isTester) =>
+  seasonNumber(effectiveTime(timeOffset, isTester));
+
+export const seasonLabel = (season) => {
+  const d = new Date(seasonStart(season));
+  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
+};
+
+export const seasonCollection = (mongo, season) => mongo.collection(`data-${seasonLabel(season)}`);
diff --git a/src/Iconice.d.ts b/src/Iconice.d.ts
deleted file mode 100644
index 5c1f3625..00000000
--- a/src/Iconice.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type IconName = '2h' | 'checkmark' | 'cross' | 'dark' | 'down' | 'info' | 'error' | 'left' | 'light' | 'logo-apeegg-simple' | 'logo-apeegg' | 'menu' | 'right' | 'spinner-circle' | 'success' | 'spinner-inner' | 'warning' | 'up' | 'stun' | '1h' | '1h1h' | 'spin' | 'isBlocking' | 'punch' | 'slash' | 'stab' | 'block' | 'cheese' | 'bite' | 'slam' | 'shieldBash' | 'bowshot' | 'lacerate' | 'kick' | 'whirlwind' | 'fillArmor' | 'claw' | 'demoShout' | 'damage' | 'victory' | 'defeat' | 'maxArmor' | 'maxHealth' | 'coin' | 'magicChance' | 'dice' | 'dodgeChance' | 'criticalChance' | 'criticalDamage' | 'bleeding' | 'concussed' | 'exposed' | 'stunned' | 'vulnerable' | 'wounded' | 'blockChance';
\ No newline at end of file
diff --git a/src/app.css b/src/app.css
deleted file mode 100644
index 9663b18b..00000000
--- a/src/app.css
+++ /dev/null
@@ -1,79 +0,0 @@
-@import 'tailwindcss';
-@custom-variant dark (&:where(.dark, .dark *));
-
-@layer base {
-  #sticky-bottom > div {
-    display: contents;
-  }
-  html {
-    font-family: 'Fira Sans Condensed', 'Trebuchet MS', 'sans-serif';
-    @apply overflow-x-hidden overflow-y-scroll;
-  }
-  body {
-    @apply text-gray-800 dark:text-white;
-  }
-  .alfa-slab-one {
-    @apply font-['Alfa_Slab_One'];
-  }
-  .cinzel {
-    @apply font-['Cinzel'];
-  }
-  .bree-serif {
-    @apply font-['Bree_Serif'];
-  }
-  .fat-number {
-    @apply drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] [-webkit-text-stroke:_0.5px_black];
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply font-['Cinzel'];
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    @apply w-2.5;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    @apply bg-stone-300;
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    @apply bg-stone-500;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    @apply bg-stone-500/90;
-  }
-}
-
-@layer utilities {
-  .glass {
-    @apply rounded-md border border-white/50 bg-white/50 shadow-lg backdrop-blur-sm;
-  }
-  h1 {
-    @apply text-2xl font-medium sm:text-4xl sm:tracking-[-0.0625rem] md:text-5xl md:tracking-[-0.0625rem];
-  }
-  h2 {
-    @apply text-xl font-medium sm:text-3xl sm:tracking-normal md:text-4xl md:tracking-[-0.0625rem];
-  }
-  h3 {
-    @apply text-lg font-medium sm:text-2xl md:text-3xl;
-  }
-  h4 {
-    @apply text-base font-medium sm:text-lg md:text-2xl;
-  }
-  h5 {
-    @apply text-sm font-medium sm:text-base md:text-lg;
-  }
-  h6 {
-    @apply text-xs font-medium sm:text-sm md:text-base;
-  }
-}
diff --git a/src/app.html b/src/app.html
deleted file mode 100644
index 3ec40512..00000000
--- a/src/app.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-  <meta name="viewport" content="width=device-width" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bree+Serif&family=Cinzel:wght@400..900&family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-    rel="stylesheet">
-  <title>Battle Brawlers</title>
-  %sveltekit.head%
-</head>
-
-<body class="antialiased" data-sveltekit-preload-data="hover">
-  <div class="contents">%sveltekit.body%</div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/app.svelte.ts b/src/app.svelte.ts
deleted file mode 100644
index d7ec3b54..00000000
--- a/src/app.svelte.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import type { Combat } from '@/types/combat';
-import type { CharacterRef } from '@/types/character';
-import type { AsyncAwaitWebsocket } from 'async-await-websockets';
-import app from '@/app.svelte';
-import type { EquipmentRef } from '@/types/equipment';
-import type { Tooltip } from '@/ts/use';
-import type { Team } from '@/types/team';
-import type { Dialog } from '@/ts/dialog';
-import type { DynamicObject } from '@/types/common';
-import loadLocalStorage from '@/ts/loadLocalStorage';
-import { browser } from '$app/environment';
-import mediaQuery from '@/ts/mediaQuery';
-
-const audioModules = import.meta.glob('/static/audio/**/*.*', { eager: true });
-export const AUDIO: Record<string, string> = {};
-
-for (const [path, module] of Object.entries(audioModules)) {
-  const filename =
-    path
-      .split('/')
-      .pop()
-      ?.replace(/\.(wav|mp3)$/, '') || '';
-  AUDIO[filename] = (module as { default: string }).default; // correct production URL
-}
-
-export const SETTINGS_DEFAULT_VOLUME = {
-  master: 0.5,
-  ambient: 0.25,
-  sfx: 0.5,
-  combat: 1
-};
-
-export const INITIAL_COMBAT = {
-  teamsStartState: [],
-  teamsEndState: [],
-  events: [],
-  duration: 0,
-  winningTeam: undefined,
-  fightId: undefined,
-  audio: []
-};
-
-const INITIAL_CHARACTERS: Required<CharacterRef>[] = [];
-// const INITIAL_INVENTORY = [
-//   EQUIPMENT('sword'),
-//   EQUIPMENT('sword'),
-//   EQUIPMENT('dagger'),
-//   EQUIPMENT('dagger'),
-//   EQUIPMENT('shield'),
-//   EQUIPMENT('greatSword'),
-//   EQUIPMENT('leatherBoots')
-// ];
-const INITIAL_INVENTORY: EquipmentRef[] = [];
-const INITIAL_COINS = 400; // One silver
-
-export default new (class {
-  combat: Combat = $state(INITIAL_COMBAT);
-  liveTeams: Team[] = $state([]);
-  elapsedMilliseconds: number = $state(0);
-
-  serverTimestampSnapshot: number = $state(0);
-  syncPerformanceNow: number = $state(0);
-  serverTimestamp: number = $state(0);
-
-  experience: number = $state(0);
-  coins: number = $state(INITIAL_COINS);
-  accountRewards: number = $state(1);
-  bossHighscore: number = $state(0);
-
-  characters: Required<CharacterRef>[] = $state(INITIAL_CHARACTERS);
-  inventory: EquipmentRef[] = $state(INITIAL_INVENTORY);
-  socket = $state() as AsyncAwaitWebsocket;
-  token: string | undefined = $state();
-  selectedBrawlers: string[] = $state([]);
-  maxBrawlers: number = $state(0);
-
-  tooltip?: Tooltip = $state();
-  dialog?: Dialog = $state();
-  showAccountProgression: boolean = $state(false);
-  notifications: string[] = $state([]);
-
-  gameKeyboardDisabled: boolean = $state(false);
-  keys: DynamicObject = $state({});
-  overlay: string = $state('');
-  settings: DynamicObject = $state(
-    loadLocalStorage({
-      volume: SETTINGS_DEFAULT_VOLUME,
-      loginPageMode: 0,
-      openProperties: {},
-      debugOpen: false,
-      showDetailedCharacterView: false
-    })
-  );
-
-  audio: any = $state(AUDIO);
-
-  mqs = mediaQuery({
-    desktop: '(min-width: 1200px)',
-    tablet: '(min-width: 768px) and (max-width: 1199px)',
-    smartphone: '(max-width: 767px)',
-    landscape: '(orientation: landscape)',
-    portrait: '(orientation: portrait)',
-    hoverable: '(hover: hover)'
-  });
-
-  constructor() {
-    $effect.root(() => {
-      $effect(() => {
-        const settings = $state.snapshot(this.settings);
-
-        Object.entries(settings).forEach(
-          ([key, value]) => browser && window.localStorage.setItem(key, JSON.stringify(value))
-        );
-      });
-      $effect(() => {
-        const inventory = $state.snapshot(this.inventory); // Hack to trigger reruns
-        const characters = $state.snapshot(this.characters); // Hack to trigger reruns
-        const experience = $state.snapshot(this.experience); // Hack to trigger reruns
-        const coins = $state.snapshot(this.coins); // Hack to trigger reruns
-        const accountRewards = $state.snapshot(this.accountRewards); // Hack to trigger reruns
-        // console.info(app.syncPerformanceNow);
-        const saveDebounce = setTimeout(() => {
-          if (app.socket && app.token) {
-            (async () => {
-              const res = await app.socket.sendAsync('store-game-state', {
-                token: app.token,
-                inventory,
-                characters,
-                experience,
-                coins,
-                accountRewards
-              });
-
-              app.serverTimestampSnapshot = res;
-              app.syncPerformanceNow = performance.now();
-              console.info('Game state saved');
-            })();
-          }
-        }, 1000);
-
-        return () => clearTimeout(saveDebounce);
-      });
-    });
-  }
-
-  dump() {
-    function flatSnapshot(o: any) {
-      const out: any = {};
-      let p = o;
-      while ((p = Object.getPrototypeOf(p)) && p !== Object.prototype) {
-        for (const n of Object.getOwnPropertyNames(p)) {
-          const d = Object.getOwnPropertyDescriptor(p, n);
-          if (d?.get && !(n in out)) {
-            try {
-              out[n] = o[n];
-            } catch {
-              console.error('Failed to get property', n);
-            }
-          }
-        }
-      }
-      return out;
-    }
-    return flatSnapshot(this);
-  }
-})();
diff --git a/src/components.d.ts b/src/components.d.ts
deleted file mode 100644
index 228d8b1b..00000000
--- a/src/components.d.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-// generated by scripts/generate-component-typedefs.ts
-// It's suggested you commit this file into source control
-declare global {
-    const AbilityBar: typeof import("./components/character/AbilityBar.svelte")["default"]
-    const AbilityIcon: typeof import("./components/character/AbilityIcon.svelte")["default"]
-    const AbilityInventory: typeof import("./components/character/AbilityInventory.svelte")["default"]
-    const AbilitySelection: typeof import("./components/character/AbilitySelection.svelte")["default"]
-    const Accordion: typeof import("./components/Accordion.svelte")["default"]
-    const AccountProgression: typeof import("./components/global/AccountProgression.svelte")["default"]
-    const Armory: typeof import("./components/Armory.svelte")["default"]
-    const Async: typeof import("./components/Async.svelte")["default"]
-    const Authorization: typeof import("./components/Authorization.svelte")["default"]
-    const Bar: typeof import("./components/ui/Bar.svelte")["default"]
-    const BasicConfirmation: typeof import("./components/dialog/BasicConfirmation.svelte")["default"]
-    const Button: typeof import("./components/form/Button.svelte")["default"]
-    const CharacterAvatar: typeof import("./components/character/CharacterAvatar.svelte")["default"]
-    const CharacterEquipment: typeof import("./components/character/CharacterEquipment.svelte")["default"]
-    const CharacterSelection: typeof import("./components/combat/CharacterSelection.svelte")["default"]
-    const Checkbox: typeof import("./components/form/Checkbox.svelte")["default"]
-    const Clickable: typeof import("./components/buttons/Clickable.svelte")["default"]
-    const ClientClock: typeof import("./components/global/ClientClock.svelte")["default"]
-    const Close: typeof import("./components/buttons/Close.svelte")["default"]
-    const CodeOfConduct: typeof import("./components/overlays/CodeOfConduct.svelte")["default"]
-    const Coin: typeof import("./components/Coin.svelte")["default"]
-    const Coins: typeof import("./components/Coins.svelte")["default"]
-    const Combat: typeof import("./components/overlays/Combat.svelte")["default"]
-    const CombatantAbilityBar: typeof import("./components/combat/CombatantAbilityBar.svelte")["default"]
-    const CombatantAudioPlayer: typeof import("./components/combat/CombatantAudioPlayer.svelte")["default"]
-    const CombatantCard: typeof import("./components/combat/CombatantCard.svelte")["default"]
-    const CombatantImage: typeof import("./components/combat/CombatantImage.svelte")["default"]
-    const CombatArena: typeof import("./components/combat/CombatArena.svelte")["default"]
-    const CombatAudioPlayer: typeof import("./components/combat/CombatAudioPlayer.svelte")["default"]
-    const ConnectSocket: typeof import("./components/global/ConnectSocket.svelte")["default"]
-    const CoreStats: typeof import("./components/character/CoreStats.svelte")["default"]
-    const Debug: typeof import("./components/Debug.svelte")["default"]
-    const DebugAppData: typeof import("./components/DebugAppData.svelte")["default"]
-    const DevBar: typeof import("./components/DevBar.svelte")["default"]
-    const Dialog: typeof import("./components/global/Dialog.svelte")["default"]
-    const Dropdown: typeof import("./components/form/Dropdown.svelte")["default"]
-    const EquipmentFilter: typeof import("./components/EquipmentFilter.svelte")["default"]
-    const EquipmentLink: typeof import("./components/EquipmentLink.svelte")["default"]
-    const ForgotPassword: typeof import("./components/ForgotPassword.svelte")["default"]
-    const Frame: typeof import("./components/Frame.svelte")["default"]
-    const GameAudio: typeof import("./components/GameAudio.svelte")["default"]
-    const GameMenu: typeof import("./components/overlays/GameMenu.svelte")["default"]
-    const GoBack: typeof import("./components/buttons/GoBack.svelte")["default"]
-    const Headline: typeof import("./components/Headline.svelte")["default"]
-    const HealthBar: typeof import("./components/combat/HealthBar.svelte")["default"]
-    const Hr: typeof import("./components/Hr.svelte")["default"]
-    const Icon: typeof import("./components/ui/Icon.svelte")["default"]
-    const InCombat: typeof import("./components/global/InCombat.svelte")["default"]
-    const Input: typeof import("./components/form/Input.svelte")["default"]
-    const Keystrokes: typeof import("./components/global/Keystrokes.svelte")["default"]
-    const Loader: typeof import("./components/Loader.svelte")["default"]
-    const Login: typeof import("./components/Login.svelte")["default"]
-    const Logo: typeof import("./components/Logo.svelte")["default"]
-    const Logout: typeof import("./components/buttons/Logout.svelte")["default"]
-    const MyLudus: typeof import("./components/MyLudus.svelte")["default"]
-    const Notifications: typeof import("./components/global/Notifications.svelte")["default"]
-    const Overlay: typeof import("./components/global/Overlay.svelte")["default"]
-    const Pill: typeof import("./components/ui/Pill.svelte")["default"]
-    const RefillHealthTimer: typeof import("./components/RefillHealthTimer.svelte")["default"]
-    const Register: typeof import("./components/Register.svelte")["default"]
-    const ReleaseNotes: typeof import("./components/overlays/ReleaseNotes.svelte")["default"]
-    const ResultAnnouncement: typeof import("./components/combat/ResultAnnouncement.svelte")["default"]
-    const Spinner: typeof import("./components/ui/Spinner.svelte")["default"]
-    const Stats: typeof import("./components/character/Stats.svelte")["default"]
-    const TeamBadge: typeof import("./components/combat/TeamBadge.svelte")["default"]
-    const Tooltip: typeof import("./components/ui/Tooltip.svelte")["default"]
-    const TooltipAbility: typeof import("./components/tooltips/TooltipAbility.svelte")["default"]
-    const TooltipEquipment: typeof import("./components/tooltips/TooltipEquipment.svelte")["default"]
-    const Topbar: typeof import("./components/Topbar.svelte")["default"]
-    const Unauthorized: typeof import("./components/Unauthorized.svelte")["default"]
-    const VictoryOrLoss: typeof import("./components/combat/VictoryOrLoss.svelte")["default"]
-}
-
-export {}
diff --git a/src/components/Accordion.svelte b/src/components/Accordion.svelte
deleted file mode 100644
index f39fcf7d..00000000
--- a/src/components/Accordion.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { twMerge } from 'tailwind-merge';
-
-  type Props = {
-    isOpen?: boolean;
-    children: Snippet;
-  };
-  let { isOpen = false, children }: Props = $props();
-</script>
-
-<div
-  class={twMerge(
-    'grid w-full grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-out',
-    isOpen && 'grid-rows-[1fr]'
-  )}
->
-  <div class="overflow-hidden">
-    {@render children()}
-  </div>
-</div>
diff --git a/src/components/Armory.svelte b/src/components/Armory.svelte
deleted file mode 100644
index 9e9b673d..00000000
--- a/src/components/Armory.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import EQUIPMENT from '@/constants/EQUIPMENT';
-  import { confirmWithDialog } from '@/ts/dialog';
-  import { dismantle, equip } from '@/ts/equipment';
-  import type { Equipment } from '@/types/equipment';
-  import type { Component } from 'svelte';
-  import BasicConfirmation from '@/components/dialog/BasicConfirmation.svelte';
-  import { formatCoins } from '@/ts/coin';
-
-  let { type } = $props();
-  let items = $state(app.inventory);
-
-  const dismantleItem = (item: Equipment) => {
-    const { silver } = formatCoins(item.cost);
-    const extraText =
-      silver > 0
-        ? `You will be refunded <span class="text-white">${silver} coin(s)</span> for this equipment.`
-        : 'This equipment has no value.';
-    confirmWithDialog(BasicConfirmation as any, {
-      text: `${extraText}<br /><br /><span class="text-white">Are you sure?</span>`,
-      confirm: () => {
-        app.coins += item.cost;
-        dismantle(item);
-      }
-    });
-  };
-</script>
-
-<div class="my-3">
-  <crow vertical up left>
-    {#each items as item, i (item.uuid)}
-      {@const equipment = EQUIPMENT(item, true)}
-      <crow class="w-full !justify-between gap-2 py-1" left>
-        <EquipmentLink {...equipment} />
-        {#if type === 'equipment'}
-          <Button tertiary onclick={() => equip(item)}>Equip</Button>
-        {:else}
-          <Button
-            class="bg-red-400 text-white"
-            tertiary
-            onclick={dismantleItem.bind(undefined, equipment)}
-          >
-            {equipment.cost > 0 ? 'Refund' : 'Dismantle'}
-          </Button>
-        {/if}
-      </crow>
-    {/each}
-  </crow>
-</div>
diff --git a/src/components/Async.svelte b/src/components/Async.svelte
deleted file mode 100644
index 115b5410..00000000
--- a/src/components/Async.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-  let { onclick, component, ...props }: any = $props();
-
-  let [making, vite, happy] = $derived(
-    component.replace('./', '').replace('.svelte', '').split('/')
-  );
-</script>
-
-{#await happy ? import(`./${making}/${vite}/${happy}.svelte`) : import(`./${making}/${vite}.svelte`) then { default: component }}
-  <svelte:component this={component} {...props} {onclick} />
-{:catch}
-  <crow vertical class="bg-black p-4 text-center text-yellow-500">
-    Error loading.<br />Restart your game to fix it.
-    <span class="mt-2 text-sm text-gray-500">
-      (We're aware of this issue and hope for<br />a fix in the future. It's framework related.)
-    </span>
-    🤷‍♂️
-  </crow>
-{/await}
diff --git a/src/components/Authorization.svelte b/src/components/Authorization.svelte
deleted file mode 100644
index cc47b15d..00000000
--- a/src/components/Authorization.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { getCookie } from '@/helpers';
-  import type { Snippet } from 'svelte';
-  import { version } from '../../package.json';
-  import { notify } from '@/ts/actions';
-
-  const { IS_DEV } = ENV;
-
-  let { children }: { children?: Snippet } = $props();
-
-  onMount(() => (app.token = getCookie()?.token));
-
-  let authorized: any = $state(false);
-  let connected = $derived(app.socket);
-
-  $effect(() => {
-    if (app.token && connected) {
-      (async () => {
-        try {
-          const response = await app.socket.sendAsync('user/authenticate', {
-            token: app.token,
-            clientVersion: version,
-            IS_DEV
-          });
-
-          if (response?.gameState) {
-            app.characters = response.gameState.characters;
-            app.inventory = response.gameState.inventory;
-            app.experience = response.gameState.experience;
-            app.coins = response.gameState.coins;
-            app.accountRewards = response.gameState.accountRewards;
-          }
-
-          if (response?.serverTimestampSnapshot) {
-            app.serverTimestampSnapshot = response.serverTimestampSnapshot;
-            // app.syncTimestampSnapshot = Date.now();
-            authorized = true;
-          }
-        } catch (e) {
-          notify(e);
-          app.token = undefined;
-        }
-      })();
-    } else {
-      authorized = false;
-    }
-  });
-</script>
-
-{#if !connected}
-  <Loader>Connecting to server</Loader>
-{:else if authorized}
-  {@render children?.()}
-{:else if !app.token}
-  <Unauthorized />
-{/if}
diff --git a/src/components/Coin.svelte b/src/components/Coin.svelte
deleted file mode 100644
index 04500f82..00000000
--- a/src/components/Coin.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-  let { type, class: classes }: { type: 'copper' | 'silver' | 'gold'; class?: string } = $props();
-</script>
-
-<div
-  class={tw(
-    'inline-block !w-auto !flex-none rounded-full border-[0.5px] bg-white shadow-[0.5px_0.5px_0_rgba(0,0,0,0.5)]',
-    type === 'copper' && 'border-amber-700',
-    type === 'silver' && 'border-cyan-600',
-    type === 'gold' && 'border-yellow-600',
-    classes
-  )}
->
-  <Icon
-    name="coin"
-    class={tw(
-      'text-lg text-yellow-400',
-      type === 'copper' && 'text-amber-600',
-      type === 'silver' && 'text-cyan-500',
-      type === 'gold' && 'text-yellow-500'
-    )}
-  />
-</div>
diff --git a/src/components/Coins.svelte b/src/components/Coins.svelte
deleted file mode 100644
index 8fb196b7..00000000
--- a/src/components/Coins.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { formatCoins } from '@/ts/coin';
-
-  let {
-    class: classes = '',
-    amount,
-    renderAll = false
-  }: {
-    class?: string;
-    amount: number;
-    renderAll?: boolean;
-  } = $props();
-
-  let { copper, silver, gold } = $derived(formatCoins(amount));
-</script>
-
-<crow
-  class={tw('left flex-row-reverse !flex-wrap gap-2 gap-y-1', renderAll && 'gap-x-0 pl-2', classes)}
->
-  {#if copper > 0}
-    {#if renderAll}
-      {#each Array(copper).fill(0) as _, i}
-        <Coin class="-ml-2" type="copper" />
-      {/each}
-    {:else}
-      <crow class="!flex-none gap-0" left>
-        {copper}×
-        <Coin type="copper" />
-      </crow>
-    {/if}
-  {/if}
-  {#if silver > 0}
-    {#if renderAll}
-      {#each Array(silver).fill(0) as _, i}
-        <Coin class="-ml-2" type="silver" />
-      {/each}
-    {:else}
-      <crow class="!flex-none gap-0" left>
-        {silver}×
-        <Coin type="silver" />
-      </crow>
-    {/if}
-  {/if}
-  {#if gold > 0}
-    {#if renderAll}
-      {#each Array(gold).fill(0) as _, i}
-        <Coin class="-ml-2" type="gold" />
-      {/each}
-    {:else}
-      <crow class="!flex-none gap-0" left>
-        {gold}×
-        <Coin type="gold" />
-      </crow>
-    {/if}
-  {/if}
-</crow>
diff --git a/src/components/Debug.svelte b/src/components/Debug.svelte
deleted file mode 100644
index b92c577e..00000000
--- a/src/components/Debug.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  let { data } = $props();
-
-  const { IS_DEV } = ENV;
-</script>
-
-{#if IS_DEV}
-  <code>
-    <pre class="text-[10px]">{JSON.stringify(data, null, 2)}</pre>
-  </code>
-{/if}
diff --git a/src/components/DebugAppData.svelte b/src/components/DebugAppData.svelte
deleted file mode 100644
index fc1a8c26..00000000
--- a/src/components/DebugAppData.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-  let showSidebar = $state(false);
-
-  const stringifyCircularJSON = (obj: any) => {
-    const seen = new WeakSet();
-    return JSON.stringify(
-      obj,
-      (_, value) => {
-        if (value !== null && typeof value === 'object') {
-          if (seen.has(value)) return;
-          seen.add(value);
-        }
-
-        if (value === undefined) return null;
-
-        return value;
-      },
-      2
-    );
-  };
-</script>
-
-<crow
-  vertical
-  up
-  class={tw(
-    'fixed top-20 bottom-0 left-[calc(100%-theme(spacing.2))] z-100 max-w-100 !flex-none overflow-hidden overflow-y-scroll pl-2 transition-transform duration-200',
-    (showSidebar || app.settings.debugOpen) && '-translate-x-[calc(100%-theme(spacing.2))]'
-  )}
-  role="none"
-  onmouseenter={() => (showSidebar = true)}
-  onmouseleave={() => !app.settings.debugOpen && (showSidebar = false)}
->
-  <crow left vertical up class={tw('glass')}>
-    <div class="mb-0 w-full p-2 pb-0">
-      <Headline text="Debug" small>
-        <div>
-          <Checkbox
-            id="keepOpen"
-            bind:value={app.settings.debugOpen}
-            onchange={({ target: { checked } }: any) => (app.settings.debugOpen = checked)}
-          >
-            Keep open
-          </Checkbox>
-        </div>
-      </Headline>
-    </div>
-    {#if app.combat.duration <= 0}
-      {#each Object.entries(app.dump()) as [key, value]}
-        {@const isOpenable = typeof value === 'object'}
-        {@const openValue = app.settings.openProperties?.[key]}
-        {@const isOpen = isOpenable && !!openValue}
-        <Clickable
-          class={tw('w-full hover:cursor-pointer hover:bg-gray-500/20', isOpen && 'bg-gray-500/20')}
-          onclick={() => {
-            if (openValue) {
-              delete app.settings.openProperties[key];
-            } else {
-              app.settings.openProperties[key] = true;
-            }
-          }}
-        >
-          <crow vertical left class="w-full">
-            <crow class="w-full !justify-between" up left>
-              <div class="px-2 py-1 font-bold">{key}</div>
-              <crow class="!flex-none">
-                {#if isOpenable}
-                  <span class="">
-                    {Math.max(
-                      0,
-                      Array.isArray(value) ? value.length : Object.keys(value || {}).length
-                    )}
-                  </span>
-                {:else}
-                  {value || value === 0 ? value : '-'}
-                {/if}
-                <crow class={tw('aspect-square w-8 !flex-none')}>
-                  {#if isOpenable}
-                    <Icon
-                      name="down"
-                      class={tw(
-                        '-rotate-90 text-xs transition-transform duration-200',
-                        isOpen && 'rotate-0'
-                      )}
-                    />
-                  {/if}
-                </crow>
-              </crow>
-            </crow>
-            <Accordion {isOpen}>
-              <crow up left class="w-full">
-                <code class="text-left">
-                  <pre class="p-2 text-[10px]">
-                    {stringifyCircularJSON(value)}
-                    </pre>
-                </code>
-              </crow>
-            </Accordion>
-          </crow>
-        </Clickable>
-      {/each}
-      <!-- <pre class="text-xs">{JSON.stringify(app.dump(), null, 2)}
-    </pre> -->
-    {/if}
-  </crow>
-</crow>
diff --git a/src/components/DevBar.svelte b/src/components/DevBar.svelte
deleted file mode 100644
index d5bdd3c0..00000000
--- a/src/components/DevBar.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import customEvent from '@/ts/customEvent';
-  import { calculateCombatStatsByCharacter } from '@/ts/utils';
-  import { page } from '$app/stores';
-
-  let expGain = $state(40);
-  let activePage = $derived($page.route.id?.split('/')[1] || (!app.token ? 'start' : ''));
-
-  const healParty = () =>
-    app.characters.forEach((character) => {
-      const { currentHealth, maxHealth } = calculateCombatStatsByCharacter(
-        CHARACTERS(character, true)
-      );
-      const heal = Math.ceil(maxHealth * 0.33);
-      character.overrides.combatStats.currentHealth = Math.min(currentHealth + heal, maxHealth);
-    });
-
-  const damageParty = () =>
-    app.characters.forEach((character) => {
-      const { currentHealth, maxHealth } = calculateCombatStatsByCharacter(
-        CHARACTERS(character, true)
-      );
-
-      character.overrides.combatStats.currentHealth = currentHealth - 5;
-    });
-
-  const gainExp = () => (app.experience += expGain);
-  const gain100Coins = () => (app.coins += 100);
-</script>
-
-<crow up class="glass sticky top-0">
-  <crow vertical left class="gap-1 p-2">
-    <Button onclick={customEvent.bind(undefined, 'pauseCombat', { nothing: 'true' })}>
-      Pause combat
-    </Button>
-    <Button
-      onclick={customEvent.bind(undefined, 'resumeCombat', { nothing: 'true' })}
-      disabled={app.combat.duration === 0 || app.combat.duration <= app.elapsedMilliseconds}
-    >
-      Resume combat
-    </Button>
-    <div>
-      Elapsed ms: {app.elapsedMilliseconds.toFixed(0)}
-    </div>
-    <div>
-      Duration: {app.combat.duration}
-    </div>
-  </crow>
-  <crow vertical left class="p-2">
-    <div>
-      Time sync (server): {new Date(app.serverTimestampSnapshot).toLocaleString()}
-    </div>
-    <div>
-      Time (server): {new Date(app.serverTimestamp).toLocaleString()}
-    </div>
-    <crow vertical up left>
-      <a
-        class={tw(
-          'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-          activePage === 'debug' && 'rounded-sm border-transparent bg-white text-black'
-        )}
-        href="/debug"
-      >
-        Debug
-      </a>
-      <a
-        class={tw(
-          'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-          activePage === 'ability-scaling' && 'rounded-sm border-transparent bg-white text-black'
-        )}
-        href="/ability-scaling"
-      >
-        Ability&nbsp;Scaling
-      </a>
-      <a
-        class={tw(
-          'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-          activePage === 'equipment-scaling' && 'rounded-sm border-transparent bg-white text-black'
-        )}
-        href="/equipment-scaling"
-      >
-        Equipment&nbsp;Scaling
-      </a>
-      <a
-        class={tw(
-          'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-          activePage === 'character-scaling' && 'rounded-sm border-transparent bg-white text-black'
-        )}
-        href="/character-scaling"
-      >
-        Character&nbsp;Scaling
-      </a>
-    </crow>
-  </crow>
-  <crow vertical left class="gap-1 p-2">
-    <!-- <Button
-      onclick={() => {
-        app.characters[0].overrides.combatStats.currentHealth -= 10;
-      }}
-    >
-      Deal 10 damage to char[0]
-    </Button> -->
-    <crow class="gap-1">
-      <Button onclick={healParty}>Heal party</Button>
-      <Button onclick={damageParty}>Damage party</Button>
-    </crow>
-    <crow class="gap-1">
-      <Input type="number" bind:value={expGain} small />
-      <Button onclick={gainExp}>Gain exp</Button>
-      <Button onclick={() => (app.experience = 0)}>Reset exp</Button>
-    </crow>
-    <crow class="gap-1">
-      <Button onclick={gain100Coins}>Gain coins</Button>
-      <Button onclick={() => (app.coins = 0)}>Reset coins</Button>
-    </crow>
-    <crow class="gap-1">
-      <Button onclick={() => (app.bossHighscore += 1)}>Increase boss level</Button>
-      <Button onclick={() => (app.bossHighscore = 0)}>Reset boss level</Button>
-    </crow>
-    <Button onclick={() => (app.characters = [])}>Reset characters</Button>
-    <Button onclick={() => (app.accountRewards = 1)}>Reset rewards</Button>
-  </crow>
-</crow>
diff --git a/src/components/EquipmentFilter.svelte b/src/components/EquipmentFilter.svelte
deleted file mode 100644
index 28e721d4..00000000
--- a/src/components/EquipmentFilter.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { slotsInPrettyName } from '@/ts/equipment';
-  import type { Equipment, EquipmentType } from '@/types/equipment';
-
-  type EquipmentFilterType = 'all' | EquipmentType;
-
-  let {
-    allEquipment,
-    filteredEquipment = $bindable()
-  }: {
-    allEquipment: Equipment[];
-    filteredEquipment: Equipment[];
-  } = $props();
-  let filter = $state('all');
-
-  const EQUIPMENT_TYPES: EquipmentFilterType[] = [
-    'oneHand',
-    'offHand',
-    'twoHand',
-    'armor',
-    'accessory',
-    'trinket'
-  ];
-
-  const filterBy = (type: EquipmentFilterType) => {
-    if (type === filter) type = 'all';
-
-    filteredEquipment = allEquipment.filter(
-      (equipment: Equipment) => equipment.slotsIn.includes(type) || type === 'all'
-    );
-
-    filter = type;
-  };
-</script>
-
-<crow class="!content-stretch !items-stretch !justify-stretch gap-1">
-  <Button
-    active={'all' === filter}
-    class="flex-1"
-    tertiary
-    onclick={filterBy.bind(undefined, 'all')}
-  >
-    All ({allEquipment.length})
-  </Button>
-  {#each EQUIPMENT_TYPES as type}
-    <Button
-      active={type === filter}
-      class="flex-1"
-      tertiary
-      onclick={filterBy.bind(undefined, type)}
-    >
-      {slotsInPrettyName(type)} ({allEquipment.filter((equipment: Equipment) =>
-        equipment.slotsIn.includes(type)
-      ).length})
-    </Button>
-  {/each}
-</crow>
diff --git a/src/components/EquipmentLink.svelte b/src/components/EquipmentLink.svelte
deleted file mode 100644
index 9c0fdf23..00000000
--- a/src/components/EquipmentLink.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import CHARACTERS from '@/constants/CHARACTERS';
-
-  let props = $props();
-
-  const tier = (level: number) => {
-    const tierLevel = Math.floor(props.level % 5);
-    if (tierLevel === 0) return 'I';
-    if (tierLevel === 1) return 'II';
-    if (tierLevel === 2) return 'III';
-    if (tierLevel === 3) return 'VI';
-    if (tierLevel === 4) return 'V';
-  };
-
-  let character = $derived(app.characters[0] || CHARACTERS('elf'));
-  let level = $derived(props.level);
-</script>
-
-<div
-  class={tw('cursor-default border-b border-transparent leading-4 text-gray-600')}
-  use:tooltip={{
-    children: TooltipEquipment,
-    props: { ...props, character: CHARACTERS(character, true) },
-    direction: 'up'
-  }}
->
-  <div class="!grid h-5 !place-content-stretch">
-    <div
-      class={tw(
-        'bg-gray-400 [clip-path:polygon(19px_0%,calc(100%-17px)_0%,calc(100%-17px)_100%,19px_100%)] [grid-area:1/1]',
-        // level >= 2 && 'bg-gray-400',
-        level >= 5 && 'bg-green-600',
-        level >= 10 && 'bg-blue-600',
-        level >= 15 && 'bg-purple-600',
-        level >= 20 && 'bg-orange-600',
-        level >= 25 && 'bg-red-600'
-      )}
-      style="
-        mask: url('/images/brush-center.png') repeat-x 0 0 / auto 20px;
-      "
-    ></div>
-    <div
-      class={tw(
-        'bg-gray-400 [clip-path:polygon(0_0,19px_0,19px_100%,0_100%)] [grid-area:1/1]',
-        // level >= 2 && 'bg-gray-400',
-        level >= 5 && 'bg-green-600',
-        level >= 10 && 'bg-blue-600',
-        level >= 15 && 'bg-purple-600',
-        level >= 20 && 'bg-orange-600',
-        level >= 25 && 'bg-red-600'
-      )}
-      style="
-        mask: url('/images/brush-left.png') no-repeat 0 0 / auto 20px;
-      "
-    ></div>
-    <div
-      class={tw(
-        'bg-gray-400 [clip-path:polygon(100%_0,100%_100%,calc(100%-17px)_100%,calc(100%-17px)_0)] [grid-area:1/1]',
-        // level >= 2 && 'bg-gray-400',
-        level >= 5 && 'bg-green-600',
-        level >= 10 && 'bg-blue-600',
-        level >= 15 && 'bg-purple-600',
-        level >= 20 && 'bg-orange-600',
-        level >= 25 && 'bg-red-600'
-      )}
-      style="
-        mask: url('/images/brush-right.png') no-repeat 100% 0 / auto 20px;
-      "
-    ></div>
-    <crow
-      class="relative !flex-none -translate-y-[0.5px] px-2 text-center font-bold tracking-wide text-nowrap text-white [grid-area:1/1]"
-      left
-    >
-      {props.name}
-    </crow>
-  </div>
-  <!-- {tier(props.level)} -->
-</div>
diff --git a/src/components/ForgotPassword.svelte b/src/components/ForgotPassword.svelte
deleted file mode 100644
index edddb89d..00000000
--- a/src/components/ForgotPassword.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { disableGameKeyboard, enableGameKeyboard, notify } from '@/ts/actions';
-
-  let email = $state('');
-
-  const forgotPassword = async (e: Event) => {
-    e.preventDefault();
-    try {
-      await app.socket.sendAsync('user/password/request-reset', {
-        email,
-        url: window.location.origin
-      });
-      email = '';
-      notify({
-        info: 'if an account was registered on that email address, check your email'
-      });
-      app.settings.loginPageMode = 0;
-    } catch (error) {
-      notify(error);
-    }
-  };
-</script>
-
-<form class="crow w-full gap-2" onsubmit={forgotPassword}>
-  <Input
-    class="xs:w-full"
-    placeholder="Email"
-    type="email"
-    onfocus={disableGameKeyboard}
-    onblur={enableGameKeyboard}
-    bind:value={email}
-  />
-
-  <Button type="submit">Submit</Button>
-</form>
diff --git a/src/components/Frame.svelte b/src/components/Frame.svelte
deleted file mode 100644
index 7b5c3c2c..00000000
--- a/src/components/Frame.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    children,
-    class: classes,
-    title
-  }: { children?: Snippet; class?: string; title?: string } = $props();
-</script>
-
-<div class="frame text-gray-200">
-  {#if title}
-    <crow left class="title cinzel text-gray-400">{title}</crow>
-  {/if}
-  <crow class={tw('vertical text-md gap-2 p-4 text-gray-400', classes)}>
-    {@render children?.()}
-  </crow>
-</div>
-
-<style>
-  .frame {
-    border-top: 3px solid;
-    border-right: 3px solid;
-    border-bottom: 3px solid;
-    border-left: 3px solid;
-    border-image-slice: 3 3 3 3;
-    border-image-source: url(/images/ui/frame.png);
-    border-image-repeat: repeat;
-    background: rgba(0, 0, 0, 0.75);
-    box-shadow: rgb(0 0 0 / 80%) 0px 0px 100px inset;
-  }
-  .title {
-    position: relative;
-    margin: -3px 0 0 0;
-    padding: 0 8px;
-    height: 33px;
-    background-image: url(/images/ui/frame-header.jpg);
-    background-position: left 2px;
-    background-repeat: repeat-x;
-  }
-</style>
diff --git a/src/components/GameAudio.svelte b/src/components/GameAudio.svelte
deleted file mode 100644
index 2506f2b3..00000000
--- a/src/components/GameAudio.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { AUDIO } from '@/app.svelte';
-  import { untrack } from 'svelte';
-
-  type CustomHowl = Howl & { _src?: string };
-
-  let currentTrack: CustomHowl | undefined = $state();
-
-  let tracks: Record<string, CustomHowl> = {
-    combat: new Howl({
-      src: AUDIO['combat-drums'],
-      volume: 0,
-      loop: true
-    }),
-    ambientArena: new Howl({
-      src: AUDIO['Pure Desert Wind'],
-      volume: 0,
-      loop: true
-    }),
-    ambientWilderness: new Howl({
-      src: AUDIO['Summer Day In Nature'],
-      volume: 0,
-      loop: true
-    })
-  };
-
-  $effect(() => {
-    $state.snapshot(app.settings.volume);
-
-    untrack(() => {
-      currentTrack?.volume(app.settings.volume.master * app.settings.volume.ambient);
-    });
-  });
-
-  $effect(() => {
-    $state.snapshot(app.combat.duration);
-    $state.snapshot(app.bossHighscore);
-
-    untrack(() => {
-      const enteredCombat = app.combat.duration !== 0;
-      const inWilderness = app.bossHighscore >= 15;
-
-      let trackToPlay;
-
-      if (enteredCombat) {
-        trackToPlay = 'combat';
-      } else if (inWilderness) {
-        trackToPlay = 'ambientWilderness';
-      } else {
-        trackToPlay = 'ambientArena';
-      }
-
-      const volume = app.settings.volume.master * app.settings.volume.ambient;
-      const prevTrack = currentTrack;
-      const nextTrack = tracks[trackToPlay];
-
-      if (prevTrack?._src === nextTrack._src) return;
-
-      nextTrack.play();
-      nextTrack.fade(0, volume, 2000);
-
-      if (prevTrack) {
-        prevTrack.fade(prevTrack.volume(), 0, 2000);
-
-        const handleFade = () => {
-          if (prevTrack.volume() <= 0.001) {
-            prevTrack.stop();
-            prevTrack.off('fade', handleFade);
-          }
-        };
-        prevTrack.on('fade', handleFade);
-      }
-
-      currentTrack = nextTrack;
-    });
-  });
-
-  onDestroy(() => {
-    currentTrack?.stop();
-  });
-</script>
diff --git a/src/components/Headline.svelte b/src/components/Headline.svelte
deleted file mode 100644
index 218bebaa..00000000
--- a/src/components/Headline.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    text,
-    right,
-    children,
-    small = false,
-    class: classes
-  }: {
-    text: string;
-    right?: boolean;
-    children?: Snippet;
-    small?: boolean;
-    class?: string;
-  } = $props();
-</script>
-
-<crow class={tw('!justify-between gap-4', right ? 'right' : 'left', classes)}>
-  {#if small}
-    <h5>{text}</h5>
-  {:else}
-    <h3>{text}</h3>
-  {/if}
-  {#if children}
-    {@render children()}
-  {/if}
-</crow>
-
-<Hr class={tw('mt-2 mb-4', small && 'mt-1 mb-3')} left={!right} {right} />
diff --git a/src/components/Hr.svelte b/src/components/Hr.svelte
deleted file mode 100644
index 0257ba0f..00000000
--- a/src/components/Hr.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-  let {
-    left,
-    right,
-    class: classes
-  }: { left?: boolean; right?: boolean; class?: string } = $props();
-</script>
-
-<hr
-  class={tw(
-    'mt-1 mb-2 h-px w-full border-0 bg-gradient-to-r',
-    !left && 'from-transparent via-gray-800/40 to-transparent',
-    left && 'from-gray-800/40 to-transparent',
-    right && 'from-transparent to-gray-800/40',
-    classes
-  )}
-/>
diff --git a/src/components/Loader.svelte b/src/components/Loader.svelte
deleted file mode 100644
index 900a6afc..00000000
--- a/src/components/Loader.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let { children } = $props<{ children: Snippet }>();
-  let show = $state(false);
-
-  $effect(() => {
-    show = true;
-  });
-
-  const fade = (_: any, { duration, delay }: any) => ({
-    duration,
-    delay,
-    css: (t: number) => `opacity: ${t};`
-  });
-</script>
-
-{#if show}
-  <div class="crow vertical fixed inset-0 bg-black/25" in:fade={{ duration: 250, delay: 500 }}>
-    <crow
-      vertical
-      class="
-        relative w-full gap-4 bg-black/70 py-6 text-white before:absolute before:right-0
-        before:bottom-[calc(100%+theme(space.1))] before:left-0 before:h-1 before:bg-black/50 before:content-[''] after:absolute after:top-[calc(100%+theme(space.1))] after:right-0
-        after:left-0 after:h-1 after:bg-black/50 after:content-[''] dark:bg-white/70 dark:text-gray-800 dark:before:bg-white/50 dark:after:bg-white/50
-      "
-    >
-      <h1>
-        {@render children()}
-      </h1>
-      <Spinner />
-    </crow>
-  </div>
-{/if}
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
deleted file mode 100644
index 6a9c76c9..00000000
--- a/src/components/Login.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-  import { preventDefault } from '@/helpers';
-  import { enableGameKeyboard, disableGameKeyboard, notify } from '@/ts/actions';
-
-  const { IS_DEV, AUTO_EMAIL, AUTO_PASSWORD } = ENV;
-
-  let email = $state(IS_DEV ? AUTO_EMAIL : '');
-  let password = $state(IS_DEV ? AUTO_PASSWORD : '');
-  let rememberMe = $state(IS_DEV ? true : false);
-  let codeOfConduct = $state(IS_DEV ? true : false);
-
-  const login = async () => {
-    if (!codeOfConduct) {
-      notify({
-        error: 'you must to agree to the Code of Conduct in order to play'
-      });
-      return;
-    }
-    try {
-      const t = await app.socket.sendAsync('user/login', {
-        email,
-        password
-      });
-
-      let expiration = '';
-      if (rememberMe) {
-        const future = new Date();
-        future.setDate(future.getDate() + 30);
-        expiration = ` Expires=${future};`;
-      }
-      document.cookie = `token=${t};${expiration}`;
-
-      app.token = t;
-      notify({ success: 'Logged in successfully' });
-    } catch (error) {
-      notify(error);
-    }
-  };
-
-  let { escape } = $derived(app.keys);
-</script>
-
-<form class="crow left vertical w-full gap-2" onsubmit={preventDefault(login)}>
-  <crow class="w-full gap-2">
-    <Input
-      class="xs:w-full"
-      placeholder="Email"
-      type="email"
-      onfocus={disableGameKeyboard}
-      onblur={enableGameKeyboard}
-      bind:value={email}
-    />
-    <Input
-      class="xs:w-full"
-      placeholder="Password"
-      type="password"
-      bind:value={password}
-      onfocus={disableGameKeyboard}
-      onblur={enableGameKeyboard}
-    />
-
-    <Button primary class="xs:w-full" type="submit">Log&nbsp;in</Button>
-  </crow>
-
-  <div>
-    <Checkbox
-      id="codeOfConduct"
-      bind:value={codeOfConduct}
-      onchange={({ target: { checked } }: any) => (codeOfConduct = checked)}
-    >
-      I agree to the <a
-        class="text-blue-500 hover:underline"
-        href="/"
-        onclick={preventDefault(() => (app.overlay = 'CodeOfConduct'))}
-      >
-        Code of Conduct
-      </a>
-    </Checkbox>
-  </div>
-
-  <div>
-    <Checkbox
-      id="rememberMe"
-      bind:value={rememberMe}
-      onchange={({ target: { checked } }: any) => (rememberMe = checked)}
-    >
-      Remember me
-    </Checkbox>
-  </div>
-</form>
diff --git a/src/components/Logo.svelte b/src/components/Logo.svelte
deleted file mode 100644
index 0c521f2b..00000000
--- a/src/components/Logo.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-</script>
-
-<a href="/" class=" top-3 left-3 block">
-  <!-- <Icon class="text-7xl text-black dark:text-white" name="logo-apeegg" /> -->
-  BATTLE BRAWLERS
-  <!-- BRAWLFORGE -->
-  <!-- POCKET BRAWLERS -->
-  <!-- PUZZLE BRAWLERS -->
-  <!-- Friend & Foe -->
-  <!-- BLOODSHED -->
-</a>
diff --git a/src/components/MyLudus.svelte b/src/components/MyLudus.svelte
deleted file mode 100644
index ceaa6cb2..00000000
--- a/src/components/MyLudus.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script lang="ts">
-  import { AUDIO } from '@/app.svelte';
-  import { getLevelByExperience } from '@/ts/level';
-  import { untrack } from 'svelte';
-
-  let { closeSelf } = $props();
-
-  let sliderRef: HTMLDivElement;
-  let LEVELS = Array(25)
-    .fill(0)
-    .map((_, i) => i + 1);
-
-  $effect(() => {
-    $state.snapshot(app.showAccountProgression);
-    if (!app.showAccountProgression) return;
-
-    sliderRef.children[app.accountRewards - 1].scrollIntoView({
-      behavior: 'instant',
-      block: 'nearest',
-      inline: 'center'
-    });
-  });
-
-  $effect(() => {
-    $state.snapshot(app.showAccountProgression);
-    if (!untrack(() => app.serverTimestampSnapshot)) return;
-
-    const level = getLevelByExperience(app.experience);
-
-    sliderRef.children[level - 1].scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'center'
-    });
-  });
-
-  const claimReward = (level: number) => {
-    if (level === getLevelByExperience(app.experience)) {
-      setTimeout(() => {
-        app.showAccountProgression = false;
-      }, 500);
-    }
-    new Howl({
-      src: AUDIO['Special Lootbox 13'],
-      volume: app.settings.volume.master * app.settings.volume.sfx
-    }).play();
-    app.accountRewards += 1;
-    app.coins += 100;
-  };
-
-  const rewardForLevel = (level: number) => {
-    const rewards = ['100_coins', 'character_stats'];
-
-    if (level % 5 === 0 || level === 1) {
-      rewards.push('ludus_upgrade');
-    }
-    return rewards;
-  };
-</script>
-
-<crow
-  role="none"
-  onclick={closeSelf}
-  bind:this={sliderRef}
-  left
-  class="my-ludus fixed inset-0 snap-x snap-mandatory gap-20 overflow-x-scroll px-[calc(50vw-theme(spacing.52))]"
->
-  {#each LEVELS as level}
-    {@const accountLevel = getLevelByExperience(app.experience)}
-    {@const claimed = level <= app.accountRewards}
-    {@const disabled = level > app.accountRewards + 1 || accountLevel < level}
-    {@const rewards = rewardForLevel(level)}
-    <crow
-      class={tw('glass !w-104 !flex-none snap-center border border-dashed !bg-white/95 p-4')}
-      vertical
-    >
-      <h4 class="cinzel">Level {level}</h4>
-      <Hr class="my-3.5" />
-      <div>
-        <crow vertical class="gap-4">
-          <crow class="gap-8" up left>
-            {#if rewards.includes('100_coins')}
-              <crow up left vertical>
-                <strong>Account</strong>
-                <crow class="gap-1">
-                  +1
-                  <Coin type="silver" class="text-2xl" />
-                </crow>
-                {#if rewards.includes('ludus_upgrade')}
-                  <span>+1&nbsp;brawler</span>
-                {/if}
-              </crow>
-            {/if}
-            {#if rewards.includes('character_stats')}
-              <crow vertical up left>
-                <strong>Brawlers</strong>
-                <crow class="gap-1">
-                  +4
-                  <Icon name="maxHealth" original />
-                </crow>
-                <crow class="gap-1">
-                  +2
-                  <Icon name="damage" original />
-                </crow>
-              </crow>
-            {/if}
-          </crow>
-
-          {#if claimed}
-            <crow class="top-half absolute left-[calc(100%-theme(spacing.10))] !h-6 !flex-none">
-              <Icon name="checkmark" class="text-green-400" />
-            </crow>
-          {:else}
-            <Button
-              class="absolute top-[calc(100%+theme(spacing.4))]"
-              {disabled}
-              big
-              onclick={claimReward.bind(undefined, level)}
-              primary
-            >
-              Claim
-            </Button>
-          {/if}
-        </crow>
-      </div>
-      <crow class="mt-4 min-h-20 w-full !items-stretch">
-        <crow class="-mx-4 -mb-4 rounded-b bg-yellow-500/10"> Premium rewards TBA. </crow>
-      </crow>
-    </crow>
-  {/each}
-</crow>
diff --git a/src/components/RefillHealthTimer.svelte b/src/components/RefillHealthTimer.svelte
deleted file mode 100644
index f662750e..00000000
--- a/src/components/RefillHealthTimer.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import { calculateCombatStatsByCharacter } from '@/ts/utils';
-
-  let { IS_DEV } = ENV;
-  IS_DEV = false;
-
-  const MINUTES_TO_REFILL = 2;
-  const SECONDS_TO_REFILL = 9;
-
-  let timeToRefill = $state((IS_DEV ? SECONDS_TO_REFILL : MINUTES_TO_REFILL * 60) * 1000);
-
-  const getMinuteDelayUntilNextRefill = () => {
-    const now = new Date(app.serverTimestampSnapshot);
-    const minutes = now.getMinutes();
-
-    const nextMarkMinute = minutes + (MINUTES_TO_REFILL - (minutes % MINUTES_TO_REFILL));
-    const nextMark = new Date(now);
-    nextMark.setMinutes(nextMarkMinute, 0, 0);
-
-    return nextMark;
-  };
-
-  const getSecondDelayUntilNextRefill = () => {
-    const now = new Date(app.serverTimestampSnapshot);
-    const seconds = now.getSeconds();
-
-    const nextMarkSecond = seconds + (SECONDS_TO_REFILL - (seconds % SECONDS_TO_REFILL));
-    const nextMark = new Date(now);
-    nextMark.setSeconds(nextMarkSecond, 0);
-
-    return nextMark;
-  };
-
-  $effect(() => {
-    if (!app.serverTimestamp) return;
-    const nextMark = IS_DEV ? getSecondDelayUntilNextRefill() : getMinuteDelayUntilNextRefill();
-    timeToRefill = nextMark.getTime() - app.serverTimestamp;
-
-    if (timeToRefill < 0) {
-      app.characters.forEach((character) => {
-        const { currentHealth, maxHealth } = calculateCombatStatsByCharacter(
-          CHARACTERS(character, true)
-        );
-        const heal = Math.ceil(maxHealth * 0.33);
-        character.overrides.combatStats.currentHealth = Math.min(currentHealth + heal, maxHealth);
-      });
-
-      app.serverTimestampSnapshot = app.serverTimestamp;
-      app.syncPerformanceNow = performance.now();
-    }
-  });
-
-  let fullTime = (IS_DEV ? SECONDS_TO_REFILL : MINUTES_TO_REFILL * 60) * 1000;
-</script>
-
-<Bar
-  class="bg-gray-600"
-  current={fullTime - timeToRefill}
-  max={fullTime}
-  isTime
-  center
-  isLoading={!app.serverTimestamp}
-/>
diff --git a/src/components/Register.svelte b/src/components/Register.svelte
deleted file mode 100644
index e59acb04..00000000
--- a/src/components/Register.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { enableGameKeyboard, disableGameKeyboard, notify } from '@/ts/actions';
-
-  let email = $state('');
-  let password = $state('');
-
-  const register = async (e: Event) => {
-    e.preventDefault();
-    try {
-      await app.socket.sendAsync('user/register', {
-        email,
-        password
-      });
-      notify({
-        success: 'Account was created. You can now log in.'
-      });
-      email = '';
-      password = '';
-      app.settings.loginPageMode = 0;
-    } catch (error) {
-      notify(error);
-    }
-  };
-</script>
-
-<form class="crow w-full gap-2" onsubmit={register}>
-  <Input
-    class="xs:w-full"
-    placeholder="Email"
-    type="email"
-    onfocus={disableGameKeyboard}
-    onblur={enableGameKeyboard}
-    bind:value={email}
-  />
-  <Input class="xs:w-full" placeholder="Password" type="password" bind:value={password} />
-
-  <Button primary type="submit">Register</Button>
-</form>
diff --git a/src/components/Topbar.svelte b/src/components/Topbar.svelte
deleted file mode 100644
index c02fb3ff..00000000
--- a/src/components/Topbar.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  const toggleDarkMode = () => {
-    const classes = [...document.getElementsByTagName('html')[0].classList];
-
-    document.getElementsByTagName('html')[0].className = classes.includes('dark')
-      ? classes.filter((className) => className !== 'dark').join(' ')
-      : [...classes, 'dark'].join(' ');
-  };
-</script>
-
-<crow class="fixed top-0 right-0 bottom-auto" right>
-  <!-- <Clickable class="crow h-8 w-8 hover:bg-black/5 dark:hidden" onclick={toggleDarkMode}>
-    <Icon class="text-yellow-500" name="light" />
-  </Clickable> -->
-  <Clickable
-    class="dark:row hidden h-8 w-8 -translate-y-px hover:bg-black/5"
-    onclick={toggleDarkMode}
-  >
-    <Icon class="text-blue-500" name="dark" />
-  </Clickable>
-  <Clickable class="crow h-8 w-8 hover:bg-black/5" onclick={() => (app.overlay = 'GameMenu')}>
-    <Icon name="menu" />
-  </Clickable>
-</crow>
diff --git a/src/components/Unauthorized.svelte b/src/components/Unauthorized.svelte
deleted file mode 100644
index e8aba6f0..00000000
--- a/src/components/Unauthorized.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  let { loginPageMode } = $derived(app.settings);
-</script>
-
-<crow down>
-  <img src="/images/races/troll/male-01.png" class="pointer-events-none max-w-80" />
-
-  <crow vertical class="glass relative -mr-18 mb-10 -ml-24 w-full gap-2 p-10 pb-6">
-    {#if loginPageMode === 0}
-      <Login />
-    {/if}
-    {#if loginPageMode === 1}
-      <Register />
-    {/if}
-    {#if loginPageMode === 2}
-      <ForgotPassword />
-    {/if}
-    <crow class="gap-2">
-      {#if loginPageMode !== 0}
-        <Button tertiary onclick={() => (app.settings.loginPageMode = 0)}>Login</Button>
-      {/if}
-      {#if loginPageMode !== 1}
-        <Button tertiary onclick={() => (app.settings.loginPageMode = 1)}>Register</Button>
-      {/if}
-      {#if loginPageMode !== 2}
-        <Button tertiary onclick={() => (app.settings.loginPageMode = 2)}>Forgot password</Button>
-      {/if}
-    </crow>
-  </crow>
-
-  <img
-    src="/images/races/elf/female-01.png"
-    class="pointer-events-none z-1 max-w-32 scale-x-[-1]"
-  />
-</crow>
diff --git a/src/components/buttons/Clickable.svelte b/src/components/buttons/Clickable.svelte
deleted file mode 100644
index 5e9a5541..00000000
--- a/src/components/buttons/Clickable.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    children,
-    class: classes,
-    onclick,
-    href,
-    style
-  }: {
-    class?: string;
-    onclick?: (e: Event) => void;
-    href?: string;
-    children: Snippet;
-    style?: string;
-  } = $props();
-</script>
-
-{#if href}
-  <a {href} {onclick} class={tw('border-0 bg-none outline-none', classes)} {style}>
-    {@render children()}
-  </a>
-{:else}
-  <button {onclick} class={tw('border-0 bg-none outline-none', classes)} {style}>
-    {@render children()}
-  </button>
-{/if}
diff --git a/src/components/buttons/Close.svelte b/src/components/buttons/Close.svelte
deleted file mode 100644
index 7ba8ef21..00000000
--- a/src/components/buttons/Close.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  let { onclick, class: classes }: any = $props();
-</script>
-
-<button
-  {onclick}
-  class={tw('close crow absolute top-1 right-1 h-6 w-6 bg-black active:translate-y-px', classes)}
->
-  <Icon name="cross" class="text-red-600" />
-</button>
diff --git a/src/components/buttons/GoBack.svelte b/src/components/buttons/GoBack.svelte
deleted file mode 100644
index eabddfbf..00000000
--- a/src/components/buttons/GoBack.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  let { onclick, class: classes }: any = $props();
-</script>
-
-<div class="absolute -top-7 -left-5.5 text-xs">
-  <Button tertiary secondary {onclick}>
-    <span>‹</span> Back
-  </Button>
-</div>
diff --git a/src/components/buttons/Logout.svelte b/src/components/buttons/Logout.svelte
deleted file mode 100644
index b5a6a9ec..00000000
--- a/src/components/buttons/Logout.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  const logout = () => {
-    document.cookie = 'token=; path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;';
-    app.token = undefined;
-    app.overlay = '';
-    window.location.href = '/';
-  };
-</script>
-
-<Button onclick={logout}>Log out</Button>
diff --git a/src/components/character/AbilityBar.svelte b/src/components/character/AbilityBar.svelte
deleted file mode 100644
index 15d648ca..00000000
--- a/src/components/character/AbilityBar.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-  import { dndzone } from 'svelte-dnd-action';
-  import { calculateTickStart } from '@/ts/utils';
-  import { flip } from 'svelte/animate';
-  import type { AbilityRef } from '@/types/ability';
-  import ABILITIES from '@/constants/ABILITIES';
-  import type { CharacterRef } from '@/types/character';
-  import CHARACTERS from '@/constants/CHARACTERS';
-
-  let flipDurationMs = 300;
-  let dragDisabled = $state(false);
-
-  let {
-    character,
-    abilities,
-    transformDraggedCharacterAbility,
-    considerCharacterAbilities,
-    finalizeCharacterAbilities,
-    dndDisabled = false,
-    constrainAxisY = false,
-    small = false,
-    minimalistic = false,
-    hideOverflow = false
-  }: {
-    character: CharacterRef;
-    abilities: AbilityRef[];
-    transformDraggedCharacterAbility?: (draggedElement: any, data: any, _index: any) => void;
-    considerCharacterAbilities?: (e: any) => void;
-    finalizeCharacterAbilities?: (e: any) => void;
-    dndDisabled?: boolean;
-    constrainAxisY?: boolean;
-    small?: boolean;
-    minimalistic?: boolean;
-    hideOverflow?: boolean;
-  } = $props();
-
-  let hydratedAbilities = $derived(abilities.map((a) => ABILITIES(a, true)));
-
-  const lastTick = $derived(
-    hydratedAbilities
-      .map((ability, i) => {
-        const tickStart = calculateTickStart(hydratedAbilities, i);
-        const tickEnd = tickStart + ability.ticks;
-        return { ...ability, tickStart, tickEnd };
-      })
-      .filter(({ tickStart }) => tickStart < CHARACTERS(character, true).maxTicks)
-      .at(-1)?.tickEnd
-  );
-</script>
-
-<div class={tw('w-full px-1 py-2', small && 'pb-0')}>
-  <div class="relative w-[calc((100%/18)*18)]">
-    <crow class="w-full" up>
-      {#each Array(small ? 12 : 15) as _, i}
-        <crow class="-ml-px aspect-[2/3] flex-1 border border-dashed border-gray-300"></crow>
-      {/each}
-
-      {#if !dndDisabled}
-        <div
-          class={tw(
-            'absolute -top-2 -bottom-4 w-px -translate-x-px border-r border-solid transition-all duration-200'
-          )}
-          style="left:calc((100%/{small ? 12 : 15})*12);"
-        >
-          <!-- <crow vertical right class="absolute bottom-full text-center text-xs">
-          <strong class="text-black">Ability&nbsp;sequence</strong>{lastTick}&nbsp;ticks
-        </crow> -->
-        </div>
-      {/if}
-      {#if !minimalistic}
-        <div
-          class={tw(
-            'absolute -top-2 -bottom-2 z-10 w-px -translate-x-px border-r border-dashed transition-all duration-200'
-          )}
-          style="left:calc((100%/{small ? 12 : 15})*{lastTick});"
-        >
-          <crow vertical right class="absolute bottom-full text-center text-xs">
-            <strong class="leading-3 text-black">Ability&nbsp;sequence</strong>{lastTick}&nbsp;ticks
-          </crow>
-        </div>
-      {/if}
-      <!-- {#if !small}
-      <div
-        class={tw(
-          'absolute -top-2 -bottom-2 left-[calc((100%/15)*15)] w-px border-r border-dashed'
-        )}
-      >
-        <crow vertical right class="absolute bottom-full text-center text-xs">
-          {#if !dndDisabled}
-            <strong class="text-black">Max</strong>
-          {/if}
-          15&nbsp;ticks
-        </crow>
-      </div>
-    {/if} -->
-    </crow>
-
-    <crow
-      up
-      left
-      class="absolute inset-0 w-full rounded-lg"
-      use:dndzone={{
-        items: abilities,
-        flipDurationMs,
-        constrainAxisY,
-        transformDraggedElement: transformDraggedCharacterAbility,
-        dropTargetStyle: { outline: 'rgba(100, 100, 100, 0.5) solid 2px' },
-        dragDisabled: dndDisabled || dragDisabled,
-        ...(dndDisabled ? { type: 'creature' } : { type: character.uuid })
-      }}
-      onconsider={considerCharacterAbilities}
-      onfinalize={finalizeCharacterAbilities}
-    >
-      {#each hydratedAbilities as ability, i (ability.uuid)}
-        {@const tickStart = calculateTickStart(hydratedAbilities, i)}
-        <crow
-          role="listitem"
-          animate:flip={{ duration: dndDisabled ? 0 : flipDurationMs }}
-          use:tooltip={{
-            children: TooltipAbility,
-            props: { ...ability, character: CHARACTERS(character, true) },
-            direction: 'up',
-            lockInPlace: true
-          }}
-          class={tw(
-            'relative -ml-px h-full !flex-none rounded border border-gray-500 bg-white',
-            ability.basic ? 'border-gray-300 bg-gray-100' : 'z-10',
-            !dndDisabled && tickStart > 11 && 'border-red-300 bg-red-100',
-            !dndDisabled && tickStart > 11 && hideOverflow && '!hidden'
-          )}
-          style="width: calc(((100%/{small ? 12 : 15})*{ability.ticks}) + 1px);"
-        >
-          <AbilityIcon {ability} hideTickCount {small} disabled={!dndDisabled && tickStart > 11} />
-          <!-- {ability.uuid.substring(0, 5)} -->
-        </crow>
-      {/each}
-    </crow>
-  </div>
-</div>
diff --git a/src/components/character/AbilityIcon.svelte b/src/components/character/AbilityIcon.svelte
deleted file mode 100644
index 47f0c176..00000000
--- a/src/components/character/AbilityIcon.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-  import STATUS_EFFECTS from '@/constants/STATUS_EFFECTS';
-  import type { Ability } from '@/types/ability';
-
-  let {
-    small,
-    hideTickCount,
-    ability,
-    disabled = false
-  }: { small?: boolean; hideTickCount?: boolean; ability: Ability; disabled?: boolean } = $props();
-
-  let { icon, ticks, basic, statusEffects } = $derived(ability);
-</script>
-
-<!-- {#if !basic}
-  <Icon
-    class={tw('absolute text-[300px] opacity-20', small && 'text-9xl', small)}
-    name={icon}
-    original
-  />
-{/if} -->
-
-{#if !hideTickCount}
-  <crow
-    class={tw(
-      'ticks absolute top-full left-1/2 h-5 w-8 -translate-x-1/2 -translate-y-3/4 rounded-sm border-[0.5px] border-gray-400 bg-white',
-      small && 'h-3 w-5'
-    )}
-  >
-    <div class={tw('text-md leading-0 font-bold', small && 'text-xs')}>
-      {ticks}
-    </div>
-  </crow>
-{/if}
-<crow vertical class="!grid">
-  <Icon
-    class={tw(
-      'relative text-[clamp(theme(fontSize.sm),3vw,theme(fontSize.3xl))] [grid-area:1/1]',
-      basic && 'text-gray-400',
-      small && 'text-[clamp(theme(fontSize.sm),3vw,theme(fontSize.2xl))]',
-      small && basic && 'text-[clamp(theme(fontSize.sm),3vw,theme(fontSize.xl))]',
-      disabled && 'text-red-300'
-      // !hideTickCount && '-translate-y-1'
-    )}
-    name={icon}
-    original={!basic && !disabled}
-  />
-  <!-- <div class="fat-number text-5xl font-bold text-white [grid-area:1/1]">7</div> -->
-</crow>
-
-{#if statusEffects && statusEffects.length > 0}
-  <crow class={tw('absolute bottom-1 left-1', small && 'bottom-px left-px')}>
-    {#each statusEffects as effect}
-      {@const isStatusStack = ['isConcussed', 'isWounded', 'isExposed'].includes(effect)}
-
-      <Icon
-        name={isStatusStack
-          ? STATUS_EFFECTS[STATUS_EFFECTS[effect].convertsInto].icon
-          : STATUS_EFFECTS[effect].icon}
-        class={tw('text-md', isStatusStack && 'text-xs text-gray-400', small && 'text-[10px]')}
-        original={!isStatusStack}
-      />
-    {/each}
-  </crow>
-{/if}
diff --git a/src/components/character/AbilityInventory.svelte b/src/components/character/AbilityInventory.svelte
deleted file mode 100644
index c5c7aa8b..00000000
--- a/src/components/character/AbilityInventory.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { dndzone } from 'svelte-dnd-action';
-  import { flip } from 'svelte/animate';
-  import type { AbilityRef } from '@/types/ability';
-  import ABILITIES from '@/constants/ABILITIES';
-  import type { Character } from '@/types/character';
-  import CHARACTERS from '@/constants/CHARACTERS';
-
-  let flipDurationMs = 300;
-
-  let {
-    character,
-    availableAbilities,
-    transformDraggedAvailableAbility,
-    considerAvailableAbilities,
-    finalizeAvailableAbilities,
-    dropFromOthersDisabled = false,
-    small = false
-  }: {
-    character: Character;
-    availableAbilities: AbilityRef[];
-    transformDraggedAvailableAbility?: (draggedElement: any, data: any, _index: any) => void;
-    considerAvailableAbilities?: (e: any) => void;
-    finalizeAvailableAbilities?: (e: any) => void;
-    dropFromOthersDisabled?: boolean;
-    small?: boolean;
-  } = $props();
-
-  let hydratedAbilities = $derived(availableAbilities.map((a) => ABILITIES(a, true)));
-  let hasNonbasicAbilities = $derived(
-    character.abilities?.some((ability) => !ABILITIES(ability, true).basic)
-  );
-</script>
-
-<crow
-  class={tw(
-    'available-abilities min-h-[calc(98px*3)] w-full !flex-none gap-2 rounded-lg border border-gray-300 bg-gray-50 p-2',
-    small ? 'min-h-0 w-auto gap-1 border-none bg-transparent p-0' : 'inset-shadow-sm',
-    availableAbilities.length ? 'left up' : ''
-  )}
-  use:dndzone={{
-    items: availableAbilities,
-    flipDurationMs,
-    dropFromOthersDisabled,
-    transformDraggedElement: transformDraggedAvailableAbility,
-    dropTargetStyle: {},
-    type: character.uuid
-  }}
-  onconsider={considerAvailableAbilities}
-  onfinalize={finalizeAvailableAbilities}
->
-  {#if hydratedAbilities.length}
-    {#each hydratedAbilities as ability (ability.uuid)}
-      <crow
-        class={tw(
-          'relative h-20 w-20 !flex-none gap-2 rounded border-[0.5px] border-gray-400 bg-white',
-          small && 'h-10 w-10 gap-1',
-          ability.basic && 'border-gray-300 bg-gray-100'
-        )}
-        use:tooltip={{
-          children: TooltipAbility,
-          props: { ...ability, character: CHARACTERS(character, true) },
-          direction: 'up',
-          lockInPlace: true
-        }}
-        animate:flip={{ duration: flipDurationMs }}
-      >
-        <AbilityIcon {ability} {small} />
-
-        <!-- {ability.uuid.substring(0, 5)} -->
-      </crow>
-    {/each}
-  {:else if hasNonbasicAbilities}
-    <span class="text-gray-400">Abilities from equipped gear will appear here</span>
-  {:else}
-    <span class="text-gray-400">Abilities from equipped gear will appear here</span>
-  {/if}
-</crow>
diff --git a/src/components/character/AbilitySelection.svelte b/src/components/character/AbilitySelection.svelte
deleted file mode 100644
index 50549e28..00000000
--- a/src/components/character/AbilitySelection.svelte
+++ /dev/null
@@ -1,304 +0,0 @@
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { page } from '$app/stores';
-  import app from '@/app.svelte';
-  import type { Ability, AbilityRef } from '@/types/ability';
-  import {
-    calculateAvailableAbilitiesByCharacter,
-    calculateCombatStatsByCharacter
-  } from '@/ts/utils';
-  import EQUIPMENT from '@/constants/EQUIPMENT';
-  import ABILITIES from '@/constants/ABILITIES';
-  import type { Character } from '@/types/character';
-  import Button from '@/components/form/Button.svelte';
-  import { generateCombat, healFull, prepareTeams } from '@/ts/combat';
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import CoreStats from './CoreStats.svelte';
-  import { goto } from '$app/navigation';
-
-  let { character, renderSides }: { character: Character; renderSides?: boolean } = $props();
-
-  let availableAbilities: AbilityRef[] = $state([]);
-  let dropFromOthersDisabled = $state(false);
-  let constrainAxisY = $state(false);
-  let showAvailableAbilities = $state(false);
-
-  let characterEquipment = $derived(character.overrides.equipment);
-
-  const considerCharacterAbilities = (e: any) => {
-    character.overrides.abilities = e.detail.items;
-  };
-  const finalizeCharacterAbilities = (e: any) => {
-    character.overrides.abilities = e.detail.items;
-  };
-
-  const transformDraggedCharacterAbility = (draggedElement: any, data: any, _index: any) => {
-    if (ABILITIES(data, true).basic) {
-      dropFromOthersDisabled = true;
-      constrainAxisY = true;
-    } else {
-      dropFromOthersDisabled = false;
-      constrainAxisY = false;
-    }
-    app.tooltip = undefined;
-  };
-
-  const considerAvailableAbilities = (e: any) => {
-    e.detail.items
-      .sort((a: AbilityRef, b: AbilityRef) =>
-        ABILITIES(a, true).name.localeCompare(ABILITIES(b, true).name)
-      )
-      .sort((a: AbilityRef, b: AbilityRef) => ABILITIES(a, true).ticks - ABILITIES(b, true).ticks);
-
-    availableAbilities = e.detail.items;
-  };
-
-  const finalizeAvailableAbilities = (e: any) => {
-    availableAbilities = e.detail.items;
-  };
-
-  const transformDraggedAvailableAbility = (draggedElement: any, _data: any, _index: any) => {
-    const ticks = draggedElement.querySelector('.ticks');
-    if (ticks) {
-      ticks.remove();
-    }
-    app.tooltip = undefined;
-  };
-
-  const ensureDefaultAbilities = () => {
-    const isShield = !!(
-      characterEquipment.offHand &&
-      EQUIPMENT(characterEquipment.offHand, true).slotsIn === 'offHand'
-    );
-    const isTwoHanded = !!(
-      characterEquipment.mainHand &&
-      EQUIPMENT(characterEquipment.mainHand, true).slotsIn === 'twoHand'
-    );
-    const isOneHandedMainhand = !!(
-      characterEquipment.mainHand &&
-      EQUIPMENT(characterEquipment.mainHand, true).slotsIn === 'oneHand'
-    );
-    const isOneHandedOffhand = !!(
-      characterEquipment.offHand &&
-      EQUIPMENT(characterEquipment.offHand, true).slotsIn === 'oneHand'
-    );
-    const isOneHandedWeapon = isOneHandedMainhand || isOneHandedOffhand;
-
-    const mainHandAbilities = characterEquipment.mainHand
-      ? EQUIPMENT(characterEquipment.mainHand, true)
-          .abilities.map((ability) => ABILITIES(ability, true))
-          .filter(({ basic }) => basic)
-          .map((ability, i) => ({
-            ...ABILITIES(ability),
-            uuid: `${character.id}::mainHand::${characterEquipment.mainHand?.id}::${ability.id}::${ability.name}::${i}`
-          }))
-      : [];
-
-    const offHandAbilities = characterEquipment.offHand
-      ? EQUIPMENT(characterEquipment.offHand, true)
-          .abilities.map((ability) => ABILITIES(ability, true))
-          .filter(({ basic }) => basic)
-          .map((ability, i) => ({
-            ...ABILITIES(ability),
-            uuid: `${character.id}::offHand::${characterEquipment.offHand?.id}::${ability.id}::${ability.name}::${i}`
-          }))
-      : [];
-
-    // const instanceKey = `${character.id}::${slot}::${equipment.id}::${a.id}::${abilityIndex}`;
-    // Unarmed
-    const punches = [
-      ABILITIES({ id: 'punch', uuid: `${character.id}::mainHand::_::punch::0` }),
-      ABILITIES({ id: 'punch', uuid: `${character.id}::mainHand::_::punch::1` }),
-      ABILITIES({ id: 'punch', uuid: `${character.id}::mainHand::_::punch::2` }),
-      ABILITIES({ id: 'punch', uuid: `${character.id}::offHand::_::punch::3` }),
-      ABILITIES({ id: 'punch', uuid: `${character.id}::offHand::_::punch::4` }),
-      ABILITIES({ id: 'punch', uuid: `${character.id}::offHand::_::punch::5` })
-    ];
-    let defaultAbilities = [...punches];
-
-    if (isTwoHanded) {
-      defaultAbilities = mainHandAbilities;
-    } else if (isShield) {
-      defaultAbilities = [];
-
-      if (isOneHandedWeapon) {
-        defaultAbilities.push(...mainHandAbilities);
-      } else {
-        defaultAbilities.push(...punches.slice(0, 3));
-      }
-
-      defaultAbilities.push(...offHandAbilities);
-    } else if (isOneHandedWeapon) {
-      defaultAbilities = [];
-      if (isOneHandedMainhand) {
-        defaultAbilities.push(...mainHandAbilities);
-      } else {
-        defaultAbilities.push(...punches.slice(0, 3));
-      }
-      if (isOneHandedOffhand) {
-        defaultAbilities.push(...offHandAbilities);
-      } else {
-        defaultAbilities.push(...punches.slice(3, 6));
-      }
-    }
-
-    const currentAbilities = character.abilities.map((ability) =>
-      !ABILITIES(ability, true).basic ? ability : undefined
-    );
-
-    const abs = [
-      ...currentAbilities
-        .map((ability) => {
-          if (ability) return $state.snapshot(ability);
-
-          const defaultAbility = defaultAbilities.shift();
-
-          return defaultAbility;
-        })
-        .filter((a) => a),
-      ...defaultAbilities
-    ] as Ability[];
-
-    // Earlier .id instead of .uuid
-    // @ts-expect-error
-    if (JSON.stringify(abs.map((a) => a?.uuid).sort((a, b) => a.localeCompare(b))) !== JSON.stringify(character.abilities.map((a) => a.uuid).sort((a, b) => a.localeCompare(b)))) { 
-      character.overrides.abilities = abs;
-    } // prettier-ignore
-  };
-
-  const ensureAvailableAbilities = () => {
-    const abilities = calculateAvailableAbilitiesByCharacter(character);
-
-    // Decide what abilities a character can use
-    availableAbilities = abilities
-      .filter(({ uuid }) => !character.overrides.abilities.find((a) => a.uuid === uuid))
-      .filter((ability) => !ABILITIES(ability, true).basic)
-      .sort((a: AbilityRef, b: AbilityRef) =>
-        ABILITIES(a, true).name.localeCompare(ABILITIES(b, true).name)
-      )
-      .sort((a: AbilityRef, b: AbilityRef) => ABILITIES(a, true).ticks - ABILITIES(b, true).ticks);
-
-    // Remove abilities that are no longer available from character
-    character.overrides.abilities = character.overrides.abilities.filter(
-      (ability) =>
-        abilities.some(({ uuid }) => uuid === ability.uuid) || ABILITIES(ability, true).basic
-    );
-  };
-
-  $effect(() => {
-    $state.snapshot(characterEquipment);
-
-    untrack(() => {
-      ensureDefaultAbilities();
-      ensureAvailableAbilities();
-    });
-  });
-
-  let characterIndex = $derived($page.params.characterIndex);
-
-  const tryOutBuild = () => {
-    const selected = app.characters[parseInt(characterIndex, 10)];
-    if (!selected) return;
-
-    const myCharacter = $state.snapshot(selected);
-
-    let creature = CHARACTERS('trainingDummy', true);
-
-    app.combat = generateCombat(prepareTeams(healFull([myCharacter]), [creature]));
-    console.info(app.combat);
-
-    app.overlay = 'Combat';
-  };
-</script>
-
-<crow vertical class="w-full">
-  <crow left class="!items-stretch !justify-stretch overflow-hidden">
-    {#if renderSides}
-      <crow
-        class={tw(
-          'pointer-events-none relative w-40 !flex-none bg-contain bg-center bg-no-repeat transition-all duration-200',
-          renderSides && 'w-20'
-        )}
-      >
-        <img
-          src="/images/races/{character.image.replace('.png', '-mugshot.png')}"
-          class="absolute top-0 right-0 left-0 opacity-20"
-          alt=""
-        />
-        <CoreStats combatStats={calculateCombatStatsByCharacter(character)} small vertical />
-      </crow>
-    {/if}
-
-    <crow class="relative w-full" vertical left up>
-      {#if !renderSides}
-        <crow class="w-full !justify-between">
-          <h5>Active abilities</h5>
-          <Button onclick={tryOutBuild} tertiary>Try out build</Button>
-        </crow>
-      {/if}
-      <AbilityBar
-        {character}
-        abilities={character.overrides.abilities}
-        {considerCharacterAbilities}
-        {finalizeCharacterAbilities}
-        {transformDraggedCharacterAbility}
-        {constrainAxisY}
-        minimalistic={renderSides}
-        hideOverflow={renderSides && !showAvailableAbilities}
-      />
-    </crow>
-
-    {#if renderSides}
-      <crow class={tw('w-0 !flex-none gap-1 transition-all duration-200', renderSides && 'w-20')}>
-        <Button
-          onclick={() => (showAvailableAbilities = !showAvailableAbilities)}
-          tertiary
-          innerClass="py-2"
-        >
-          <Icon name="down" class={tw(showAvailableAbilities && '-scale-y-[1]')} />
-        </Button>
-        <Button
-          onclick={() => {
-            app.selectedBrawlers = app.selectedBrawlers.filter((uuid) => uuid !== character.uuid);
-          }}
-          tertiary
-          innerClass="py-2 bg-red-200 text-red-600"
-        >
-          <Icon name="cross" class={tw(showAvailableAbilities && '-scale-y-[1]')} />
-        </Button>
-      </crow>
-    {/if}
-  </crow>
-
-  <Accordion isOpen={!renderSides || showAvailableAbilities}>
-    <div>
-      <crow class="relative my-2 w-full gap-2 overflow-hidden p-1" vertical left up>
-        <crow class="w-full !justify-between">
-          <h5>Available abilities</h5>
-
-          {#if !characterIndex}
-            <Button
-              onclick={() =>
-                goto(
-                  `/brawlers/${app.characters.findIndex(({ uuid }) => uuid === character.uuid)}`
-                )}
-              tertiary
-            >
-              Character sheet
-            </Button>
-          {/if}
-        </crow>
-        <AbilityInventory
-          {character}
-          {availableAbilities}
-          {considerAvailableAbilities}
-          {finalizeAvailableAbilities}
-          {transformDraggedAvailableAbility}
-          {dropFromOthersDisabled}
-        />
-      </crow>
-    </div>
-  </Accordion>
-</crow>
-
-<!-- <Debug data={character} /> -->
diff --git a/src/components/character/CharacterAvatar.svelte b/src/components/character/CharacterAvatar.svelte
deleted file mode 100644
index 0434c655..00000000
--- a/src/components/character/CharacterAvatar.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  import type { Character } from '@/types/character';
-
-  let {
-    image,
-    size,
-    class: classes,
-    facingRight = true,
-    inCombat = false
-  }: Character & { class?: string; facingRight?: boolean; inCombat?: boolean } = $props();
-</script>
-
-<crow
-  down
-  class={tw('aspect-[11/12] w-36', classes)}
-  style="transform: scale({facingRight ? 1 : -1}, 1)"
->
-  <img
-    src="/images/races/{image}"
-    class="max-w-none"
-    alt=""
-    style="height:calc(100%*{inCombat ? 1 : size});"
-  />
-</crow>
diff --git a/src/components/character/CharacterEquipment.svelte b/src/components/character/CharacterEquipment.svelte
deleted file mode 100644
index 6d40c5a1..00000000
--- a/src/components/character/CharacterEquipment.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import EQUIPMENT from '@/constants/EQUIPMENT';
-  import { slotsInPrettyName, unequip } from '@/ts/equipment';
-  import type { Character } from '@/types/character';
-  import type { EquipmentSlot } from '@/types/equipment';
-
-  let { character }: { character: Character } = $props();
-</script>
-
-{#each Object.entries(character.equipment) as [slot, equipment] (`${character.uuid}-${slot}-${equipment?.uuid}`)}
-  <crow left class="w-full !justify-between gap-2">
-    <crow left class="gap-2">
-      <div class="w-20">{slotsInPrettyName(slot as EquipmentSlot)}</div>
-
-      {#if slot === 'offHand' && character.equipment.mainHand && EQUIPMENT(character.equipment.mainHand, true).slotsIn === 'twoHand'}
-        <span class="text-gray-400">
-          {EQUIPMENT(character.equipment.mainHand, true).name}
-        </span>
-      {:else if slot === 'mainHand' && !character.equipment.mainHand}
-        <span class="text-gray-400">Fist</span>
-      {:else if slot === 'offHand' && !character.equipment.offHand}
-        <span class="text-gray-400">Fist</span>
-      {:else if equipment}
-        <EquipmentLink {...EQUIPMENT(equipment, true)} />
-      {:else}
-        -
-      {/if}
-    </crow>
-
-    {#if equipment}
-      <Button tertiary onclick={() => unequip(equipment, slot as EquipmentSlot)}>Unequip</Button>
-    {/if}
-  </crow>
-{/each}
diff --git a/src/components/character/CoreStats.svelte b/src/components/character/CoreStats.svelte
deleted file mode 100644
index 462d8ca6..00000000
--- a/src/components/character/CoreStats.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import type { CombatStats } from '@/types/combatStats';
-
-  let {
-    combatStats,
-    small = false,
-    vertical = false
-  }: {
-    combatStats: CombatStats;
-    small?: boolean;
-    vertical?: boolean;
-  } = $props();
-</script>
-
-<crow
-  class={tw(
-    '!flex-none translate-y-px gap-2 text-xl text-gray-600',
-    small && 'gap-1 text-sm',
-    vertical && 'gap-2'
-  )}
-  left
->
-  <crow class={tw('gap-1', vertical && 'vertical gap-0')}>
-    <Icon name="maxHealth" original />
-    {combatStats?.maxHealth}
-  </crow>
-  {#if !vertical}
-    <span class="text-gray-300">/</span>
-  {/if}
-  <crow class={tw('gap-1', vertical && 'vertical gap-0')}>
-    <Icon name="maxArmor" original />
-    {combatStats?.maxArmor}
-  </crow>
-  {#if !vertical}
-    <span class="text-gray-300">/</span>
-  {/if}
-  <crow class={tw('gap-1', vertical && 'vertical gap-0')}>
-    <Icon name="damage" original />
-    {combatStats?.damage}
-  </crow>
-</crow>
diff --git a/src/components/character/Stats.svelte b/src/components/character/Stats.svelte
deleted file mode 100644
index b8698643..00000000
--- a/src/components/character/Stats.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { prettyCombatStatKey, prettyCombatStatValue } from '@/types/combatStats';
-
-  let {
-    stats,
-    class: classes,
-    showAsAddition = false
-  }: { stats: any; class?: string; showAsAddition?: boolean } = $props();
-</script>
-
-{#each stats as [key, value]}
-  {@const actualKey =
-    {
-      wounded: 'bleeding',
-      concussed: 'stunned',
-      exposed: 'vulnerable'
-    }?.[key as string] || key}
-  {@const actualValue = prettyCombatStatValue(actualKey, value)}
-
-  <crow class="w-full !justify-between gap-2">
-    <crow left class={tw('gap-1 whitespace-nowrap', showAsAddition && '-order-1')}>
-      {#if !showAsAddition}
-        <crow class="w-5 !flex-none">
-          <Icon name={actualKey} original class="text-lg" />
-        </crow>
-      {/if}
-      {prettyCombatStatKey(actualKey)}
-    </crow>
-    <div class={tw(actualValue !== '-' && classes)}>
-      {#if showAsAddition}+&nbsp;{/if}{actualValue}
-    </div>
-  </crow>
-{/each}
diff --git a/src/components/combat/CharacterSelection.svelte b/src/components/combat/CharacterSelection.svelte
deleted file mode 100644
index b5ace179..00000000
--- a/src/components/combat/CharacterSelection.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-  import Portal from 'svelte-portal';
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import type { Character } from '@/types/character';
-
-  let {
-    runCombat,
-    count = 1
-  }: {
-    runCombat: () => void;
-    count?: number;
-  } = $props();
-
-  let selectedBrawlers: Character[] = $derived(
-    app.selectedBrawlers.map((id) =>
-      CHARACTERS(app.characters.find(({ uuid }) => uuid === id) as Character, true)
-    )
-  );
-
-  let brawlersSelected = $derived(selectedBrawlers.length > 0);
-</script>
-
-<crow vertical class="w-full gap-2">
-  {#each Array(count) as _, index}
-    {@const selectedBrawler = selectedBrawlers[index]}
-    {#if !selectedBrawler}
-      <crow
-        vertical
-        class="h-[78px] w-full !flex-none border border-dashed border-gray-300 text-center"
-      >
-        {#if index === 0}
-          <h5>select a brawler</h5>
-        {:else}
-          <h5>slot {index + 1}</h5>
-        {/if}
-      </crow>
-    {:else}
-      <AbilitySelection character={selectedBrawler} renderSides />
-    {/if}
-  {/each}
-</crow>
-
-<Portal target="#sticky-bottom">
-  <crow class="gap-3 bg-gradient-to-t from-slate-800 to-transparent p-3">
-    <!-- <Button
-      tertiary
-      disabled={!brawlersSelected || app.combat.duration !== 0}
-      onclick={() => (app.selectedBrawlers = [])}
-    >
-      Cancel
-    </Button> -->
-
-    <Button
-      big
-      bgColor="bg-red-500"
-      disabled={!brawlersSelected ||
-        app.combat.duration !== 0 ||
-        selectedBrawlers.some(
-          (brawler) => CHARACTERS(brawler, true).combatStats.currentHealth <= 0
-        )}
-      onclick={runCombat}
-    >
-      Fight
-    </Button>
-  </crow>
-</Portal>
diff --git a/src/components/combat/CombatArena.svelte b/src/components/combat/CombatArena.svelte
deleted file mode 100644
index f82e08d0..00000000
--- a/src/components/combat/CombatArena.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let { children }: { children: Snippet } = $props();
-</script>
-
-<div class="relative aspect-square [grid-area:1/1]">
-  {@render children()}
-</div>
diff --git a/src/components/combat/CombatAudioPlayer.svelte b/src/components/combat/CombatAudioPlayer.svelte
deleted file mode 100644
index fdb6d953..00000000
--- a/src/components/combat/CombatAudioPlayer.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-  import { AUDIO } from '@/app.svelte';
-  import type { SFX } from '@/types/sfx';
-
-  let {
-    audio,
-    elapsedMilliseconds
-  }: {
-    audio: SFX[];
-    elapsedMilliseconds: number;
-  } = $props();
-
-  let played: any[] = $state([]);
-  let queue: any[] = $state([]);
-  let raf: any = $state(null);
-
-  $effect(() => {
-    // reading queue here makes the effect depend on queue,
-    // which is fine as long as we don't write back unnecessarily.
-    const q = new Set(queue.map(({ id }) => id));
-    const p = new Set(played.map(({ id }) => id));
-    const incoming = audio.filter(
-      ({ id, start }) => !q.has(id) && !p.has(id) && start > elapsedMilliseconds
-    );
-
-    // 🔑 guard: only assign if there is a change
-    if (!incoming.length) return;
-
-    // now we mutate once, which causes one extra run;
-    // on the next run incoming will be empty, so no write, and it settles.
-    queue = [...queue, ...incoming].sort((a, b) => a.start - b.start);
-  });
-
-  const playSfx = (sfx: any) => {
-    const randomOne = sfx.variants[Math.floor(Math.random() * sfx.variants.length)];
-
-    new Howl({
-      src: AUDIO[randomOne],
-      volume: app.settings.volume.combat * app.settings.volume.master
-    }).play();
-  };
-
-  const loop = () => {
-    while (queue.length && queue[0].start <= elapsedMilliseconds) {
-      const [sfx, ...restOfQueue] = queue;
-      played = [...played, sfx];
-      queue = restOfQueue;
-      playSfx(sfx);
-    }
-
-    raf = requestAnimationFrame(loop);
-  };
-
-  onMount(() => {
-    raf = requestAnimationFrame(loop);
-  });
-
-  onDestroy(() => {
-    if (raf != null) cancelAnimationFrame(raf);
-  });
-</script>
-
-<!-- <pre>
-{JSON.stringify(queue, null, 2)}
-</pre> -->
diff --git a/src/components/combat/CombatantAbilityBar.svelte b/src/components/combat/CombatantAbilityBar.svelte
deleted file mode 100644
index 8a0917a1..00000000
--- a/src/components/combat/CombatantAbilityBar.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-  import TooltipAbility from '../tooltips/TooltipAbility.svelte';
-  import type { Ability } from '@/types/ability';
-  import ABILITIES from '@/constants/ABILITIES';
-  import CHARACTERS from '@/constants/CHARACTERS';
-
-  let props = $props();
-  let preview = $derived(!!props.preview);
-  let abilitiesCopied: Ability[] = $derived(props.abilitiesCopied);
-  let progress = $derived(props.progress);
-  let isStunned = $derived(!!props.statuses?.isStunned.ticks);
-  let character = $derived(props.character);
-</script>
-
-{#snippet iconBar(topLayer = false, progress = 100)}
-  <div
-    class={tw(
-      'relative rounded-b border-t-[0.5px] border-stone-500 bg-stone-300 [grid-area:1/1]',
-      topLayer && 'border-stone-500',
-      preview && 'rounded-none border-[0.5px]'
-    )}
-    style="clip-path: polygon(0% 0%, {progress}% 0%, {progress}% 100%, 0% 100%);"
-  >
-    <div
-      class={tw(
-        'relative flex divide-x-[0.5px] divide-stone-500',
-        topLayer && 'divide-stone-300 bg-stone-500',
-        isStunned && topLayer && 'bg-gray-500'
-      )}
-    >
-      {#each abilitiesCopied as { name, ticks, icon, chainLink }, i (`icon_${i}_${name}`)}
-        <crow
-          use:tooltip={{
-            children: TooltipAbility,
-            props: {
-              ...ABILITIES(props.abilitiesCopied[i], true),
-              character,
-              visible: !preview
-            },
-            direction: 'up',
-            lockInPlace: true
-          }}
-          class="relative h-6 !flex-none"
-          style="width: calc(12px*{ticks});"
-        >
-          {#if chainLink}
-            {#each Array(chainLink).fill(0).slice(0, -1) as _, j}
-              <div
-                class={tw(
-                  'absolute top-0 bottom-0 w-[0.1px] border-r-[0.5px] border-dashed border-gray-400',
-                  topLayer && 'border-stone-400/50'
-                )}
-                style="left: calc(((100% / {chainLink}) * ({j + 1})));"
-              ></div>
-            {/each}
-          {/if}
-          <Icon
-            original={false}
-            class={tw('relative text-sm text-stone-500', topLayer && 'text-stone-300')}
-            name={icon}
-          />
-        </crow>
-      {/each}
-    </div>
-  </div>
-{/snippet}
-
-<div class="w-[145px]">
-  <div
-    class={tw(
-      'grid -translate-x-[0.5px] translate-y-[0.5px] overflow-hidden rounded-b',
-      preview && 'translate-x-0 translate-y-0 rounded-none'
-    )}
-    style="width: calc((12px*{abilitiesCopied.reduce((acc, { ticks }) => acc + ticks, 0)}) + 2px);"
-  >
-    {@render iconBar()}
-    {#if progress}
-      {@render iconBar(true, progress * 100)}
-    {/if}
-  </div>
-</div>
diff --git a/src/components/combat/CombatantAudioPlayer.svelte b/src/components/combat/CombatantAudioPlayer.svelte
deleted file mode 100644
index aceb68ab..00000000
--- a/src/components/combat/CombatantAudioPlayer.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  let { audio, elapsedMilliseconds } = $props();
-
-  let queue: any[] = $state([]);
-  let played: any[] = $state([]);
-  let raf: any = $state(null);
-
-  // $effect(() => {
-  //   // reading queue here makes the effect depend on queue,
-  //   // which is fine as long as we don't write back unnecessarily.
-  //   const q = new Set(queue.map(({ id }) => id));
-  //   const p = new Set(played.map(({ id }) => id));
-  //   const incoming = audio.filter(({ id }) => !q.has(id) && !p.has(id));
-
-  //   // 🔑 guard: only assign if there is a change
-  //   if (!incoming.length) return;
-
-  //   // now we mutate once, which causes one extra run;
-  //   // on the next run incoming will be empty, so no write, and it settles.
-  //   queue = [...queue, ...incoming].sort((a, b) => a.start - b.start);
-  // });
-
-  const playSfx = (sfx: any) => {
-    app.audio[sfx.sfxName]?.play();
-  };
-
-  const loop = () => {
-    while (queue.length && queue[0].start <= elapsedMilliseconds) {
-      const [sfx, ...restOfQueue] = queue;
-      played = [...played, sfx];
-      queue = restOfQueue;
-      playSfx(sfx);
-    }
-
-    raf = requestAnimationFrame(loop);
-  };
-
-  onMount(() => {
-    raf = requestAnimationFrame(loop);
-  });
-
-  onDestroy(() => {
-    if (raf != null) cancelAnimationFrame(raf);
-  });
-</script>
-
-<!-- <pre>
-{JSON.stringify(queue, null, 2)}
-</pre> -->
diff --git a/src/components/combat/CombatantCard.svelte b/src/components/combat/CombatantCard.svelte
deleted file mode 100644
index dfd5c97a..00000000
--- a/src/components/combat/CombatantCard.svelte
+++ /dev/null
@@ -1,213 +0,0 @@
-<script lang="ts">
-  import type { Combatant, StatusStack, StatusEffect } from '@/types/combatant';
-  import STATUS_EFFECTS from '@/constants/STATUS_EFFECTS';
-  import { flip } from 'svelte/animate';
-
-  let props: Combatant & {
-    facingRight: boolean;
-    elapsedMilliseconds: number;
-    progress: number;
-    z: number;
-    scale: number;
-  } = $props();
-
-  let { name, id } = props;
-
-  let combatStats = $derived(props.combatStats);
-  let damage = $derived(props.damage);
-
-  let position = $derived(props.position);
-  let z = $derived(props.z);
-  let x = $derived(position.x);
-  let y = $derived(position.y);
-  let statuses = $derived(props.statuses);
-  // @ts-expect-error
-  let statusStacks: [string, StatusStack][] = $derived(Object.entries(statuses).filter(([_, { max, value }]) => max && value)); // prettier-ignore
-
-  // @ts-expect-error
-  let statusEffects: [string, StatusEffect][] = $derived(Object.entries(statuses).filter(([_, { ticks }]) => ticks)); // prettier-ignore
-
-  let facingRight = $derived(props.facingRight);
-  let currentArmor = $derived(combatStats.currentArmor);
-  let animations = $derived(props.animations);
-  let elapsedMilliseconds = $derived(props.elapsedMilliseconds);
-
-  let currentAnimation = $derived(
-    animations.find(
-      ({ start, end, vfxName }) =>
-        start < elapsedMilliseconds &&
-        end > elapsedMilliseconds &&
-        ['basicAttackFast', 'basicAttackRegular', 'basicAttackSlow', 'whirlwind'].includes(vfxName)
-    )
-  );
-
-  let isHealing = $derived(
-    animations.find(
-      ({ start, end, vfxName }) =>
-        start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === 'heal'
-    )
-  );
-  let isHurting = $derived(
-    animations.find(
-      ({ start, end, vfxName }) =>
-        start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === 'hurt'
-    )
-  );
-  let isArmorHurting = $derived(
-    animations.find(
-      ({ start, end, vfxName }) =>
-        start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === 'armorHurt'
-    )
-  );
-
-  const applyAnimationClass = (name: string) =>
-    animations.some(
-      ({ vfxName, start, end }) =>
-        start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === name
-    );
-</script>
-
-<div
-  class="absolute top-1/2 left-1/2 z-10 h-0 w-0 -translate-x-1/2 -translate-y-1/2"
-  style="z-index:{z};"
->
-  <div class="absolute" style="left: {x}px; top:{y - 20}px; transform: translate(-50%, -50%);">
-    <div class="absolute" style="transform: scale(1) translate(-50%, -50%);">
-      <div class="combatant glass rounded border-[0.5px] !border-none border-transparent shadow">
-        <crow class="w-full justify-between px-2 py-1 font-bold text-stone-500 uppercase">
-          {name}
-          <!-- <crow right class="gap-1">
-            <strong>DMG</strong>
-            {damage}
-          </crow> -->
-        </crow>
-
-        <HealthBar
-          current={combatStats.currentHealth}
-          max={combatStats.maxHealth}
-          {isHurting}
-          {isArmorHurting}
-          {isHealing}
-          {animations}
-          {elapsedMilliseconds}
-          left={facingRight}
-        />
-
-        <div class="h-40 w-36"></div>
-        <!-- <pre class="text-[5px]">
-        {JSON.stringify(props, null, 2)}
-        </pre> -->
-        <CombatantAbilityBar {...props} character={props} />
-        <!-- <CombatantAudioPlayer audio={props.audio} {elapsedMilliseconds} /> -->
-
-        <crow
-          vertical
-          class={tw(
-            'absolute top-17 left-[calc(100%-theme(spacing.6))] gap-2',
-            facingRight && 'right-[calc(100%-theme(spacing.6))] left-auto !items-end',
-            !facingRight && '!items-start'
-          )}
-        >
-          {#each statusEffects.sort(([_, a], [__, b]) => a.ticks - b.ticks) as [key, { ticks }] (key)}
-            {@const effect = STATUS_EFFECTS?.[key]}
-            <crow class={tw('left')} animate:flip={{ duration: 250 }}>
-              <crow class={tw('!grid w-6 !flex-none', facingRight && 'order-1')}>
-                <Icon
-                  name={effect.icon}
-                  class="{effect.animation} scale-[110%] text-xl text-black/80 [animation-direction:reverse] [grid-area:1/1]"
-                />
-                <Icon
-                  name={effect.icon}
-                  class="{effect.animation} text-xl [animation-direction:reverse] [grid-area:1/1]"
-                  original
-                />
-              </crow>
-              <crow class={tw('text-sm text-gray-700', facingRight ? 'right' : 'left')}>
-                {#if !facingRight}
-                  <crow class="w-6 !flex-none -translate-y-px text-xl leading-[0] text-gray-800">
-                    {ticks}
-                  </crow>
-                {/if}
-                <div class="text-xs">{effect.text}</div>
-                {#if facingRight}
-                  <crow class="w-6 !flex-none -translate-y-px text-xl leading-[0] text-gray-800">
-                    {ticks}
-                  </crow>
-                {/if}
-              </crow>
-            </crow>
-          {/each}
-          {#each statusStacks.sort(([_, a], [__, b]) => b.value - a.value) as [key, { max, value }] (key)}
-            {@const effect = STATUS_EFFECTS?.[key]}
-            <crow class={tw('left gap-2')} animate:flip={{ duration: 250 }}>
-              <crow class={tw('!grid w-6 !flex-none', facingRight && 'order-1')}>
-                <!-- <Icon
-                  name={effect.icon}
-                  class="{effect.animation} scale-[110%] text-xl text-black/80 [animation-direction:reverse] [grid-area:1/1]"
-                /> -->
-                <Icon
-                  name={effect.icon}
-                  class="{effect.animation} text-sm [animation-direction:reverse] [grid-area:1/1]"
-                  original
-                />
-              </crow>
-              <crow class={tw('gap-2 text-sm text-gray-700', facingRight ? 'right' : 'left')}>
-                {#if !facingRight}
-                  <crow class="!flex-none text-sm text-gray-800">
-                    {value}/{max}
-                  </crow>
-                {/if}
-                <div class="text-xs">{effect.text}</div>
-                {#if facingRight}
-                  <crow class="!flex-none text-sm text-gray-800">
-                    {value}/{max}
-                  </crow>
-                {/if}
-              </crow>
-            </crow>
-          {/each}
-        </crow>
-        <!-- <Debug data={statuses} /> -->
-
-        <crow
-          class={tw(
-            'absolute bottom-7 left-0 aspect-square w-10',
-            facingRight ? 'right-0 left-auto' : ''
-          )}
-        >
-          <Icon name="1h1h" class="text-3xl text-[#b3ad9f]" />
-          {#if damage > 0}
-            <crow class="alfa-slab-one fat-number absolute inset-0 text-2xl text-white">
-              {damage}
-            </crow>
-          {/if}
-        </crow>
-        <crow
-          class={tw(
-            'absolute right-0 bottom-7 aspect-square w-10',
-            facingRight ? 'right-auto left-0' : ''
-          )}
-        >
-          <Icon name="maxArmor" class="text-3xl text-[#b3ad9f]" />
-          {#if currentArmor > 0}
-            <crow class="alfa-slab-one fat-number absolute inset-0 text-2xl text-white">
-              {currentArmor}
-            </crow>
-          {/if}
-        </crow>
-      </div>
-      <!-- <Debug data={statuses} /> -->
-    </div>
-  </div>
-
-  <CombatantImage {...props} {currentAnimation} {applyAnimationClass} />
-</div>
-
-<style>
-  .combatant {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-  }
-</style>
diff --git a/src/components/combat/CombatantImage.svelte b/src/components/combat/CombatantImage.svelte
deleted file mode 100644
index ed16855a..00000000
--- a/src/components/combat/CombatantImage.svelte
+++ /dev/null
@@ -1,310 +0,0 @@
-<script lang="ts">
-  import type { Combatant } from '@/types/combatant';
-  import type { VFX } from '@/types/vfx';
-  import { untrack } from 'svelte';
-
-  let props: Combatant & {
-    currentAnimation?: VFX;
-    applyAnimationClass: (name: string) => boolean;
-    facingRight: boolean;
-    elapsedMilliseconds: number;
-    progress: number;
-    z: number;
-  } = $props();
-
-  let avatarWrapper: any = $state();
-
-  let {
-    image,
-    currentAnimation,
-    applyAnimationClass,
-    facingRight,
-    statuses,
-    elapsedMilliseconds,
-    position,
-    size
-  } = $derived(props);
-
-  let y = $derived(position.y);
-  let x = $derived(position.x);
-
-  let { nX, nY, sX, sY } = $derived.by(() => {
-    const tx = currentAnimation?.targetX ?? x;
-    const ty = currentAnimation?.targetY ?? y;
-
-    const dX = tx - x;
-    const dY = ty - y;
-    const distance = Math.hypot(dX, dY) || 1; // avoid div-by-zero
-
-    const ux = dX / distance;
-    const uy = dY / distance;
-
-    const attackReach = 5;
-
-    let anticipate = 0;
-    if (currentAnimation?.vfxName === 'basicAttackSlow') anticipate = 50;
-    if (currentAnimation?.vfxName === 'basicAttackRegular') anticipate = 30;
-    if (currentAnimation?.vfxName === 'basicAttackFast') anticipate = 10;
-
-    // start a bit "behind" (away from the opponent)
-    const sX = x - ux * anticipate;
-    const sY = y - uy * anticipate;
-
-    // end point toward the opponent
-    const step = Math.min(attackReach, distance);
-    const nX = x + ux * step;
-    const nY = y + uy * step;
-
-    return { nX, nY, sX, sY };
-  });
-
-  let cached = '';
-
-  // This is used to retrigger "basicAttackX" animations
-  // It replaces the old {#key currentAnimation?.id} Svelte syntax
-  // which caused issues with other reactive updates
-  $effect(() => {
-    $state.snapshot(currentAnimation?.id);
-    untrack(() => {
-      if (cached != currentAnimation?.id) {
-        avatarWrapper.style.animationName = 'none';
-        requestAnimationFrame(() => {
-          avatarWrapper.style.animationName = '';
-        });
-      }
-      cached = currentAnimation?.id || '';
-    });
-  });
-</script>
-
-<div
-  bind:this={avatarWrapper}
-  class="relative"
-  class:basicAttackSlow={statuses.isStunned.ticks === 0 && applyAnimationClass('basicAttackSlow')}
-  class:basicAttackRegular={statuses.isStunned.ticks === 0 &&
-    applyAnimationClass('basicAttackRegular')}
-  class:basicAttackFast={statuses.isStunned.ticks === 0 && applyAnimationClass('basicAttackFast')}
-  class:knockedOut={statuses.knockedOut}
-  style="
-        --position-x: {x}px;
-        --position-y: {y}px;
-        transform: translate(var(--position-x), var(--position-y));
-
-        --attack-start-x: {sX}px;
-        --attack-start-y: {sY}px;
-
-        --attack-end-x: {nX}px;
-        --attack-end-y: {nY}px;
-
-        --attack-duration: {(currentAnimation?.end || 0) - (currentAnimation?.start || 0)}ms;
-        --dir: {facingRight ? 1 : -1};
-      "
->
-  <crow
-    down
-    class:hurt={applyAnimationClass('hurt')}
-    class:block={applyAnimationClass('block')}
-    class:attackBlocked={applyAnimationClass('attackBlocked')}
-    class:whirlwind={applyAnimationClass('whirlwind')}
-    class:attackDodged={applyAnimationClass('attackDodged')}
-    class="w-36"
-    style="
-        --translate-x: -50%;
-        --translate-y: calc(70px - 100%);
-        transform: translate(var(--translate-x), var(--translate-y));
-        height: calc(144px * {size});
-      "
-  >
-    <CharacterAvatar {...props} inCombat class="avatar" />
-
-    <div
-      class={tw('dodge-animation')}
-      style="
-          -webkit-mask: url('/images/races/{image}') no-repeat bottom/auto 100%;
-          mask: url('/images/races/{image}') no-repeat bottom/auto 100%;
-        "
-    ></div>
-
-    <div
-      class={tw('hurt-animation', !facingRight && 'scale-x-[-1]')}
-      style="
-          -webkit-mask: url('/images/races/{image}') no-repeat bottom/auto 100%;
-          mask: url('/images/races/{image}') no-repeat bottom/auto 100%;
-        "
-    ></div>
-    <crow
-      class={tw('block-animation', facingRight ? 'translate-x-8' : '-translate-x-8 scale-x-[-1]')}
-    >
-      <!-- <Icon name="block" /> -->
-      <img src="/images/shield.png" width="{50 * size}%" alt="" />
-      <div
-        class="attackBlocked-animation"
-        style="
-            -webkit-mask: url('/images/shield.png') no-repeat center/auto 100%;
-            mask: url('/images/shield.png') no-repeat center/auto 100%;
-          "
-      ></div>
-    </crow>
-  </crow>
-
-  <Debug data={currentAnimation} />
-</div>
-
-<style>
-  .knockedOut {
-    filter: grayscale(100%);
-  }
-
-  .basicAttackFast {
-    animation: basicAttackFast var(--attack-duration) cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-  @keyframes basicAttackFast {
-    0% {
-      transform: translate(var(--position-x), var(--position-y));
-    }
-    90% {
-      transform: translate(calc(var(--attack-start-x)), calc(var(--attack-start-y)));
-      animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1.33);
-    }
-    100% {
-      transform: translate(calc(var(--attack-end-x)), calc(var(--attack-end-y)));
-    }
-  }
-
-  .basicAttackRegular {
-    animation: basicAttackRegular var(--attack-duration) cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-  @keyframes basicAttackRegular {
-    0% {
-      transform: translate(var(--position-x), var(--position-y));
-    }
-    90% {
-      transform: translate(calc(var(--attack-start-x)), calc(var(--attack-start-y)));
-      animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1.33);
-    }
-    100% {
-      transform: translate(calc(var(--attack-end-x)), calc(var(--attack-end-y)));
-    }
-  }
-
-  .basicAttackSlow {
-    animation: basicAttackSlow var(--attack-duration) cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-  @keyframes basicAttackSlow {
-    0% {
-      transform: translate(var(--position-x), var(--position-y));
-    }
-    90% {
-      transform: translate(calc(var(--attack-start-x)), calc(var(--attack-start-y)));
-      animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1.33);
-    }
-    100% {
-      transform: translate(calc(var(--attack-end-x)), calc(var(--attack-end-y)));
-    }
-  }
-  .whirlwind {
-    animation: whirlwind 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-  @keyframes whirlwind {
-    0% {
-      transform: translate(var(--translate-x), var(--translate-y)) scaleX(1) scaleX(1);
-    }
-    50% {
-      transform: translate(var(--translate-x), var(--translate-y)) scaleX(1) scaleX(-1);
-    }
-    100% {
-      transform: translate(var(--translate-x), var(--translate-y)) scaleX(1) scaleX(1);
-    }
-  }
-
-  .hurt-animation {
-    position: absolute;
-    inset: 0;
-    background-color: transparent;
-    mix-blend-mode: multiply;
-    opacity: 0;
-  }
-  .hurt .hurt-animation {
-    animation: hurt 340ms ease;
-  }
-  @keyframes hurt {
-    0% {
-      background-color: transparent;
-      opacity: 0;
-    }
-    25% {
-      background-color: rgba(255, 0, 0, 0.4);
-      opacity: 1;
-    }
-    100% {
-      background-color: transparent;
-      opacity: 0;
-    }
-  }
-
-  .dodge-animation {
-    position: absolute;
-    inset: 0;
-    background-color: transparent;
-    mix-blend-mode: multiply;
-    opacity: 0;
-    transform: scaleX(var(--dir));
-  }
-
-  :global(.avatar),
-  .dodge-animation {
-    transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-
-  :global(.attackDodged .avatar) {
-    opacity: 0.2;
-    transform: scale(var(--dir), 1) translate(-10px, 0) !important;
-
-    /* skewY(calc(-5deg * var(--dir)); */
-  }
-  .attackDodged .dodge-animation {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.15);
-    transform: translate(calc(var(--dir) * 10px), 0) scale(var(--dir), 1);
-    /* skewY(calc(-5deg * var(--dir)); */
-  }
-
-  .block-animation {
-    position: absolute;
-    inset: 0;
-    background-color: transparent;
-    /* mix-blend-mode: multiply; */
-    opacity: 0;
-    filter: grayscale(100%);
-  }
-  .block .block-animation,
-  .attackBlocked .block-animation {
-    opacity: 1;
-  }
-
-  .attackBlocked .attackBlocked-animation {
-    position: absolute;
-    inset: 0;
-    background-color: transparent;
-    mix-blend-mode: multiply;
-    opacity: 0;
-    filter: grayscale(100%);
-  }
-  .attackBlocked .attackBlocked-animation {
-    animation: attackBlocked 340ms ease;
-  }
-  @keyframes attackBlocked {
-    0% {
-      background-color: transparent;
-      opacity: 0;
-    }
-    25% {
-      background-color: gray;
-      opacity: 1;
-    }
-    100% {
-      background-color: transparent;
-      opacity: 0;
-    }
-  }
-</style>
diff --git a/src/components/combat/HealthBar.svelte b/src/components/combat/HealthBar.svelte
deleted file mode 100644
index d1e18134..00000000
--- a/src/components/combat/HealthBar.svelte
+++ /dev/null
@@ -1,209 +0,0 @@
-<script lang="ts">
-  import type { VFX } from '@/types/vfx';
-  import { untrack } from 'svelte';
-
-  let props = $props();
-  let {
-    isHurting,
-    isArmorHurting,
-    isHealing,
-    animations,
-    elapsedMilliseconds,
-    left
-  }: {
-    isHurting?: VFX;
-    isArmorHurting?: VFX;
-    isHealing?: VFX;
-    animations: VFX[];
-    elapsedMilliseconds: number;
-    left: boolean;
-    applyAnimationClass: (name: string) => boolean;
-  } = $derived(props);
-
-  let hurts: (VFX & { random: number })[] = $state([]);
-  let armorHurts: (VFX & { random: number })[] = $state([]);
-  let heals: (VFX & { random: number })[] = $state([]);
-
-  $effect(() => {
-    $state.snapshot(isHurting);
-
-    untrack(() => {
-      if (isHurting?.vfxName === 'hurt') {
-        let hurtAnimations = animations.filter(
-          ({ start, end, vfxName }) =>
-            start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === 'hurt'
-        );
-
-        hurts.push(...hurtAnimations.map((anim) => ({ ...anim, random: Math.random() })));
-      }
-    });
-  });
-
-  $effect(() => {
-    $state.snapshot(isArmorHurting);
-
-    untrack(() => {
-      if (isArmorHurting?.vfxName === 'armorHurt') {
-        let armorHurtAnimations = animations.filter(
-          ({ start, end, vfxName }) =>
-            start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === 'armorHurt'
-        );
-
-        armorHurts.push(...armorHurtAnimations.map((anim) => ({ ...anim, random: Math.random() })));
-      }
-    });
-  });
-
-  $effect(() => {
-    $state.snapshot(isHealing);
-
-    untrack(() => {
-      if (isHealing?.vfxName === 'heal') {
-        let healAnimations = animations.filter(
-          ({ start, end, vfxName }) =>
-            start < elapsedMilliseconds && end > elapsedMilliseconds && vfxName === 'heal'
-        );
-
-        heals.push(...healAnimations.map((anim) => ({ ...anim, random: Math.random() })));
-      }
-    });
-  });
-</script>
-
-<Bar {...props}>
-  {#each armorHurts as armorHurt (armorHurt.id)}
-    <div
-      class={tw(
-        'hurt alfa-slab-one fat-number absolute top-1 left-full text-white',
-        left && 'right-full left-auto'
-      )}
-      style="--y-offset: 160px; --scale: {armorHurt.isCritical
-        ? 2
-        : 1}; --random-x-offset: {armorHurt.random}; --dir:{left ? -1 : 1};"
-    >
-      <div class="hurt-x translate-x-0">
-        <crow class="hurt-y -translate-y-0 gap-0.5">
-          {#if armorHurt.isCritical}
-            <Icon name="criticalDamage" class="text-xs drop-shadow-lg" />
-          {/if}
-          {armorHurt.amount}
-        </crow>
-      </div>
-    </div>
-  {/each}
-
-  {#each hurts as hurt (hurt.id)}
-    <div
-      class={tw(
-        'hurt alfa-slab-one fat-number absolute top-1 left-full text-red-300',
-        left && 'right-full left-auto',
-        hurt.isCritical && 'text-red-300'
-      )}
-      style="--y-offset: 0; --scale: {hurt.isCritical
-        ? 2
-        : 1}; --random-x-offset: {hurt.random}; --dir:{left ? -1 : 1};"
-    >
-      <div class="hurt-x translate-x-0">
-        <crow class="hurt-y -translate-y-0 gap-0.5">
-          {#if hurt.isCritical}
-            <Icon name="criticalDamage" class="text-xs drop-shadow-lg" />
-          {/if}
-          {hurt.amount}
-        </crow>
-      </div>
-    </div>
-  {/each}
-
-  {#each heals as heal (heal.id)}
-    <div
-      class={tw(
-        'heal alfa-slab-one fat-number absolute top-1 left-full text-green-300',
-        left && 'right-full left-auto'
-      )}
-      style="--y-offset: 0px; --random-x-offset: {heal.random}; --dir:{left ? -1 : 1};"
-    >
-      <div class="heal-x translate-x-0">
-        <div class="heal-y -translate-y-0">+{heal.amount}</div>
-      </div>
-    </div>
-  {/each}
-</Bar>
-
-<style>
-  .heal-x {
-    opacity: 0;
-  }
-  .heal .heal-x {
-    animation: heal-x 750ms cubic-bezier(0.02, 0.01, 0.21, 1);
-  }
-  @keyframes heal-x {
-    0% {
-      transform: translateX(0px);
-      opacity: 1;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      transform: translateX(calc(var(--dir) * 10px));
-      opacity: 0;
-    }
-  }
-  .heal .heal-y {
-    animation: heal-y 750ms cubic-bezier(0.25, 0.1, 0.25, 1);
-  }
-  @keyframes heal-y {
-    0% {
-      transform: translateY(0px);
-    }
-    100% {
-      transform: translateY(-20px);
-    }
-  }
-
-  .hurt {
-    opacity: 0;
-    animation: hurt 1000ms ease-in forwards;
-  }
-  @keyframes hurt {
-    0% {
-      opacity: 0;
-    }
-    20% {
-      opacity: 1;
-    }
-    80% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  .hurt .hurt-x {
-    animation: hurt-x 200ms ease-in forwards;
-  }
-  @keyframes hurt-x {
-    0% {
-      transform: translateY(var(--y-offset)) translateX(calc(var(--dir) * -15px))
-        scale(calc(var(--scale) * 3));
-    }
-    100% {
-      transform: translateY(var(--y-offset))
-        translateX(calc(var(--dir) * (5px + var(--random-x-offset) * 25px)))
-        scale(calc(0.6 + 0.4 * var(--scale)));
-    }
-  }
-
-  .hurt .hurt-y {
-    animation: hurt-y 1000ms linear forwards;
-  }
-  @keyframes hurt-y {
-    0% {
-      transform: translateY(calc(0px));
-    }
-    100% {
-      transform: translateY(calc(-40px));
-    }
-  }
-</style>
diff --git a/src/components/combat/ResultAnnouncement.svelte b/src/components/combat/ResultAnnouncement.svelte
deleted file mode 100644
index d6507c9e..00000000
--- a/src/components/combat/ResultAnnouncement.svelte
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts">
-  import { AUDIO, INITIAL_COMBAT } from '@/app.svelte';
-  import type { Reward } from '@/types/combat';
-  import { backOut } from 'svelte/easing';
-  import { scale } from 'svelte/transition';
-
-  let { progress, rewards }: { progress: number; rewards: Reward[] } = $props();
-  let interval = setInterval(() => {}, 500);
-  let rewardsShown = $state(0);
-  let delayTicks = 2;
-
-  $effect(() => {
-    if (progress >= 1) {
-      if (rewardsShown === 0) {
-        if (outcome === 'victory') {
-          new Howl({
-            src: AUDIO['Victory Stinger 1'],
-            volume: app.settings.volume.sfx * app.settings.volume.master
-          }).play();
-        } else {
-          new Howl({
-            src: AUDIO['Stinger - Ominous Timpani'],
-            volume: app.settings.volume.sfx * app.settings.volume.master
-          }).play();
-        }
-      }
-      interval = setInterval(() => {
-        rewardsShown = rewardsShown + 1;
-      }, 500);
-
-      return () => {
-        clearInterval(interval);
-      };
-    }
-  });
-
-  let winningTeam = $derived(app.combat.winningTeam);
-  let outcome = $derived<'victory' | 'defeat' | 'draw'>(
-    winningTeam?.index === 0 ? 'victory' : winningTeam?.index === undefined ? 'draw' : 'defeat'
-  );
-  let rewardsToShow = $derived(rewards.filter(({ showInUI }) => showInUI));
-</script>
-
-{#if progress >= 1}
-  <crow class="w-70 [grid-area:1/1]" in:scale={{ duration: 500, delay: 500, easing: backOut }}>
-    <crow vertical class="gap-4" up left>
-      <VictoryOrLoss {outcome} />
-
-      {#if outcome === 'victory'}
-        <Accordion isOpen={rewardsShown > delayTicks}>
-          <crow up vertical class="glass w-full p-2">
-            <div class="cinzel text-2xl">rewards</div>
-            <Hr />
-            <crow vertical>
-              {#each rewardsToShow as { type, amount }, i}
-                <Accordion isOpen={rewardsShown > i + delayTicks + 1}>
-                  <crow>+{amount} {type}</crow>
-                </Accordion>
-              {/each}
-              {#each rewardsToShow as { type, amount }, i}
-                <Accordion isOpen={rewardsShown <= i + delayTicks + 1}>
-                  <crow class="p-0.5">
-                    <Icon
-                      name="stunned"
-                      class="animate-spin text-xl [animation-direction:reverse]"
-                    />
-                  </crow>
-                </Accordion>
-              {/each}
-            </crow>
-            <Hr class="mt-3 mb-4" />
-            <crow class="w-full">
-              <Button
-                tertiary
-                onclick={() => {
-                  app.experience += rewards.find(({ type }) => type === 'experience')?.amount || 0;
-                  app.bossHighscore =
-                    rewards.find(({ type }) => type === 'bossHighscore')?.amount ||
-                    app.bossHighscore;
-
-                  app.combat = { ...INITIAL_COMBAT };
-                  app.liveTeams = [];
-                  app.elapsedMilliseconds = 0;
-
-                  app.overlay = '';
-                }}
-                innerClass="text-lg cinzel border overflow-hidden border-yellow-700 px-4 py-1 text-white [background:radial-gradient(ellipse_farthest-corner_at_right_bottom,_#FEDB37_0%,_#FDB931_8%,_#9f7928_30%,_#8A6E2F_40%,_transparent_80%),_radial-gradient(ellipse_farthest-corner_at_left_top,_#FFFFFF_0%,_#FFFFAC_8%,_#D1B464_25%,_#5d4a1f_62.5%,_#5d4a1f_100%)]"
-              >
-                claim
-              </Button>
-            </crow>
-          </crow>
-        </Accordion>
-      {:else}
-        <Accordion isOpen={rewardsShown > delayTicks}>
-          <crow class="w-full">
-            <Button
-              big
-              tertiary
-              onclick={() => {
-                app.combat = { ...INITIAL_COMBAT };
-                app.liveTeams = [];
-                app.elapsedMilliseconds = 0;
-                app.overlay = '';
-              }}
-              secondary
-            >
-              Go back
-            </Button>
-          </crow>
-        </Accordion>
-      {/if}
-    </crow>
-  </crow>
-{/if}
diff --git a/src/components/combat/TeamBadge.svelte b/src/components/combat/TeamBadge.svelte
deleted file mode 100644
index e58dc399..00000000
--- a/src/components/combat/TeamBadge.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-  import { colorStrength } from '@/ts/utils';
-
-  const TEAM_COLORS = [
-    {
-      color: '#58a938',
-      brightColor: colorStrength('#58a938', 100)
-    },
-    {
-      color: '#a9383c',
-      brightColor: colorStrength('#a9383c', 100)
-    },
-    {
-      color: '#4267c7',
-      brightColor: colorStrength('#4267c7', 100)
-    },
-    {
-      color: '#8a38a9',
-      brightColor: colorStrength('#8a38a9', 100)
-    },
-    {
-      color: '#a98038',
-      brightColor: colorStrength('#a98038', 100)
-    },
-    {
-      color: '#a5a938',
-      brightColor: colorStrength('#a5a938', 100)
-    },
-    {
-      color: '#c27ba0',
-      brightColor: colorStrength('#c27ba0', 100)
-    }
-  ];
-
-  let {
-    index = 0,
-    // characters = [],
-    rotation = 0,
-    // distanceFromCenter = 0,
-    scale = 1
-  } = $props();
-</script>
-
-<div class="line" style={`transform: rotate(${rotation}deg);`}>
-  <div
-    class="team"
-    style={`transform: translate(-50%, calc(-50% - ${200}px)) rotate(-${rotation}deg);`}
-  >
-    <div class="team-color" style={`transform: scale(${scale});`}>
-      <crow vertical>
-        <div>
-          <crow gap={2}>
-            <div>
-              <div class="circle" style={`background: ${TEAM_COLORS[index % 7].color};`}></div>
-            </div>
-            <div class="team-name" style={`color: ${TEAM_COLORS[index % 7].brightColor};`}>
-              <!--{#if !characters[0]?.teamName}
-                  team&nbsp;#{index + 1}
-                {:else}
-                  {characters[0]?.teamName}
-                {/if}-->
-            </div>
-          </crow>
-        </div>
-        <div>
-          <crow gap={4}>
-            <div>
-              <crow vertical gap={2}>
-                <!-- <div><Icon name="resign" /></div> -->
-                <div class="beaten">
-                  <!--{characters.length - characters.filter(({ removed }) => !removed).length}-->
-                </div>
-              </crow>
-            </div>
-            <!-- <div>
-                <Crow vertical gap={2}>
-                  <div><Icon name="skull" /></div>
-                  <div>0</div>
-                </Crow>
-              </div> -->
-          </crow>
-        </div>
-      </crow>
-    </div>
-  </div>
-</div>
-
-<style>
-  .team-name {
-    text-transform: capitalize;
-  }
-  .beaten {
-    font-size: 30px;
-    line-height: 30px;
-  }
-  :global(.combat-ring .team-color .content.content) {
-    padding: 4px 6px;
-  }
-  :global(.combat-ring .team-color .crow) {
-    flex-wrap: nowrap;
-  }
-  .team-color {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.5s ease;
-  }
-  .circle {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-  }
-  .team {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transition: all 0.5s ease;
-  }
-  .line {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    transition: all 0.5s ease;
-    z-index: 1000;
-  }
-</style>
diff --git a/src/components/combat/VictoryOrLoss.svelte b/src/components/combat/VictoryOrLoss.svelte
deleted file mode 100644
index ff2b1ea4..00000000
--- a/src/components/combat/VictoryOrLoss.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-  import icons from '@/iconice-icons.json';
-
-  let { outcome }: { outcome: 'victory' | 'defeat' | 'draw' } = $props();
-
-  let icon = $derived(outcome === 'draw' ? 'defeat' : outcome);
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-         viewBox="${icons[icon].viewBoxLeft} ${icons[icon].viewBoxTop} ${icons[icon].viewBoxWidth} ${icons[icon].viewBoxHeight}">
-      <g fill="#fff" stroke="none">
-        ${icons[icon].elements.join('')}
-      </g>
-    </svg>`.trim();
-
-  const svgUrl = `"data:image/svg+xml,${encodeURIComponent(svg)}"`;
-</script>
-
-<crow class="relative !grid w-full place-items-center text-6xl">
-  {#if outcome === 'victory'}
-    <div
-      class="pointer-events-none absolute top-1/2 left-1/2 aspect-square w-[200%] -translate-x-1/2 -translate-y-1/2 animate-spin rounded-full opacity-20 [animation-duration:10000ms]"
-      style="
-      background: repeating-conic-gradient(
-        from 0deg at 50% 50%,
-        transparent 0deg 10deg,
-        yellow 15deg 25deg,
-        transparent 30deg 45deg
-      );
-      -webkit-mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, transparent 50%, transparent 100%);
-    "
-    ></div>
-  {/if}
-  <div class="[grid-area:1/1]">
-    <Icon name={icon} class="text-9xl text-gray-400 drop-shadow-sm" />
-  </div>
-  <div
-    class={tw(
-      '[grid-area:1/1]',
-      outcome === 'victory' &&
-        '[background:radial-gradient(ellipse_farthest-corner_at_right_bottom,_#FEDB37_0%,_#FDB931_8%,_#9f7928_30%,_#8A6E2F_40%,_transparent_80%),_radial-gradient(ellipse_farthest-corner_at_left_top,_#FFFFFF_0%,_#FFFFAC_8%,_#D1B464_25%,_#5d4a1f_62.5%,_#5d4a1f_100%)]'
-    )}
-    style="
-      -webkit-mask: url({svgUrl}) no-repeat bottom/auto 100%;
-      mask: url{svgUrl}) no-repeat bottom/auto 100%;
-    "
-  >
-    <!-- JUST FOR SIZE, DOESN'T RENDER -->
-    <Icon name={icon} class="text-9xl text-yellow-400 opacity-0 drop-shadow-lg" />
-  </div>
-
-  <div
-    class={tw(
-      'bree-serif drop-shadow-md  [grid-area:1/1]',
-      outcome === 'victory'
-        ? 'text-yellow-100 [-webkit-text-stroke:_1px_theme(color.yellow.300)]'
-        : 'text-gray-100 [-webkit-text-stroke:_1px_theme(color.gray.300)]'
-    )}
-  >
-    {outcome.toUpperCase()}
-  </div>
-</crow>
diff --git a/src/components/dialog/BasicConfirmation.svelte b/src/components/dialog/BasicConfirmation.svelte
deleted file mode 100644
index 2a698337..00000000
--- a/src/components/dialog/BasicConfirmation.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  let {
-    text,
-    confirm,
-    close
-  }: {
-    text: string;
-    confirm: () => void;
-    close: () => void;
-  } = $props();
-</script>
-
-<Frame title="Confirmation">
-  <crow vertical class="w-full gap-4 text-center">
-    <div>
-      {@html text}
-    </div>
-    <Hr class="my-0 bg-gradient-to-r from-transparent via-gray-500 to-transparent" />
-    <crow class="gap-2">
-      <Button secondary onclick={close}>Cancel</Button>
-      <Button primary onclick={() => (confirm(), close())}>Confirm</Button>
-    </crow>
-  </crow>
-</Frame>
diff --git a/src/components/form/Button.svelte b/src/components/form/Button.svelte
deleted file mode 100644
index d3589652..00000000
--- a/src/components/form/Button.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    primary = false,
-    secondary = false,
-    tertiary = false,
-    blur = false,
-    class: classes,
-    innerClass = '',
-    onclick,
-    children,
-    disabled = false,
-    bgColor = '',
-    big = false,
-    active = false,
-    type = 'button'
-  }: {
-    primary?: boolean;
-    secondary?: boolean;
-    tertiary?: boolean;
-    blur?: boolean;
-    class?: string;
-    innerClass?: string;
-    onclick?: () => void;
-    disabled?: boolean;
-    children: Snippet;
-    bgColor?: string;
-    big?: boolean;
-    active?: boolean;
-    type?: string;
-  } = $props();
-
-  let inputRef: HTMLButtonElement;
-
-  $effect(() => {
-    blur && inputRef && inputRef === document.activeElement && inputRef.blur();
-  });
-
-  let finalBgColor = $derived(
-    bgColor || (primary ? 'bg-blue-500' : secondary ? 'bg-stone-50' : '')
-  );
-</script>
-
-<button
-  {onclick}
-  bind:this={inputRef}
-  class={tw(
-    'group !grid cursor-pointer overflow-hidden rounded-xs text-xs leading-1 text-white',
-    // primary && 'bg-blue-600 text-white',
-    // secondary && 'bg-gray-200 text-gray-500',
-    // tertiary && 'bg-transparent text-gray-500 hover:enabled:underline',
-    tertiary &&
-      'bg-stone-200 text-xs text-gray-500 shadow-[0.5px_1px_0_theme(color.gray.400)] active:enabled:translate-x-[0.5px] active:enabled:translate-y-px active:enabled:shadow-none',
-    tertiary && disabled && 'shadow-[0.5px_1px_0_theme(color.white)]',
-    tertiary && active && 'translate-x-[0.5px] translate-y-px shadow-none',
-    disabled && 'cursor-default text-gray-400 opacity-80 grayscale',
-    classes
-  )}
-  {disabled}
->
-  {#if !tertiary}
-    <div
-      class="bg-[url('/images/ui/button/center.jpg')] bg-[length:auto_300%] bg-position-[0%_0%] [grid-area:1/1] group-hover:group-enabled:bg-position-[0%_50%] group-active:group-enabled:bg-position-[0%_100%]"
-    ></div>
-    <div
-      class="bg-[url('/images/ui/button/left.jpg')] bg-[length:auto_300%] bg-position-[0%_0%] bg-no-repeat [clip-path:polygon(0_0,16px_0,16px_100%,0_100%)] [grid-area:1/1] group-hover:group-enabled:bg-position-[0%_50%] group-active:group-enabled:bg-position-[0%_100%]"
-    ></div>
-    <div
-      class="bg-[url('/images/ui/button/right.jpg')] bg-[length:auto_300%] bg-position-[100%_0%] bg-no-repeat [clip-path:polygon(100%_0,100%_100%,calc(100%-16px)_100%,calc(100%-16px)_0)] [grid-area:1/1] group-hover:group-enabled:bg-position-[100%_50%] group-active:group-enabled:bg-position-[100%_100%]"
-    ></div>
-    <div class={tw('relative m-px bg-stone-600 mix-blend-hue [grid-area:1/1]', finalBgColor)}></div>
-  {/if}
-
-  <crow
-    class={tw(
-      'relative gap-1 px-3 py-1 leading-4 [grid-area:1/1]',
-      tertiary && 'border-[0.5px] border-gray-300 px-2 py-0.5',
-      big && 'px-5 py-1 text-lg',
-      innerClass
-    )}
-  >
-    {@render children()}
-  </crow>
-</button>
diff --git a/src/components/form/Checkbox.svelte b/src/components/form/Checkbox.svelte
deleted file mode 100644
index 3e233364..00000000
--- a/src/components/form/Checkbox.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    id = '',
-    value = $bindable(false),
-    onchange,
-    children
-  }: {
-    id?: string;
-    value?: boolean;
-    onchange?: (e: Event) => void;
-    children?: Snippet;
-  } = $props();
-</script>
-
-<label class="crow left gap-2" for={id}>
-  <input class="peer hidden" type="checkbox" {id} checked={value} {onchange} />
-  <crow class="h-5 w-5 rounded-sm bg-gray-100 peer-checked:*:flex dark:bg-black">
-    <Icon class="hidden text-green-500" name="success" />
-  </crow>
-  <div class="overflow-hidden">
-    {@render children?.()}
-  </div>
-</label>
diff --git a/src/components/form/Dropdown.svelte b/src/components/form/Dropdown.svelte
deleted file mode 100644
index b16d656a..00000000
--- a/src/components/form/Dropdown.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import { emptySlot } from '@/helpers';
-  import type { ChangeEvent } from '@/types/common';
-
-  type Option =
-    | {
-        name?: string;
-        icon: string;
-      }
-    | string;
-
-  let {
-    value = 'Choose one',
-    options = [],
-    onchange
-  }: { value?: string; options: Option[]; onchange?: (e: Event) => void } = $props();
-</script>
-
-<div class="relative rounded-sm border border-gray-200">
-  <select class="absolute inset-0 h-full w-full opacity-0" bind:value {onchange}>
-    <optgroup label="Choose one">
-      {#each options as option, i}
-        {#if typeof option === 'string'}
-          <option value={option}>{option}</option>
-        {:else}
-          <option value={i}>{option?.name}</option>
-        {/if}
-      {/each}
-    </optgroup>
-  </select>
-  <Frame class="dark:bg-black">
-    <crow class="!justify-between">
-      {#if options.find(emptySlot)}
-        <span class="first-letter:uppercase" class:default={value === 'Choose one'}>{value}</span>
-      {:else}
-        {value || 'N/A'}
-      {/if}
-      <Icon class="text-gray-800 dark:text-white" name="down" />
-    </crow>
-  </Frame>
-</div>
diff --git a/src/components/form/Input.svelte b/src/components/form/Input.svelte
deleted file mode 100644
index b782b398..00000000
--- a/src/components/form/Input.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-  let {
-    placeholder,
-    blur,
-    value = $bindable(''),
-    class: classes,
-    type = 'text',
-    small,
-    onfocus,
-    onblur,
-    ...rest
-  }: {
-    placeholder?: string;
-    blur?: boolean;
-    value?: string | number;
-    class?: string;
-    type?: string;
-    small?: boolean;
-    onfocus?: (e: FocusEvent) => void;
-    onblur?: (e: FocusEvent) => void;
-  } = $props();
-
-  let inputRef: HTMLInputElement;
-
-  let { escape } = $derived(app.keys);
-
-  $effect(() => {
-    if (escape && inputRef && inputRef === document.activeElement) {
-      value = '';
-      // inputRef.blur();
-    }
-    // if (blur && inputRef && inputRef === document.activeElement) {
-    //   if (value !== '') {
-    //     value = '';
-    //   }
-    //   // else {
-    //   //   inputRef.blur();
-    //   // }
-    // }
-  });
-</script>
-
-<div
-  class={tw(
-    'input relative inline-block border-none bg-none text-gray-800 outline-none dark:text-white',
-    classes
-  )}
-  class:active={value}
->
-  <input
-    class={tw('w-full rounded bg-white p-2 dark:bg-black', small && 'p-1 text-xs')}
-    {type}
-    {onfocus}
-    {onblur}
-    {...rest}
-    autocomplete="off"
-    bind:this={inputRef}
-    bind:value
-  />
-
-  {#if placeholder}
-    <div
-      class="placeholder pointer-events-none absolute bottom-1/2 left-2 translate-y-1/2 rounded bg-white px-1.5 pt-px text-gray-600 transition-[bottom,left] dark:bg-black dark:text-gray-400"
-    >
-      {placeholder}
-    </div>
-  {/if}
-</div>
-
-<style>
-  input:focus + .placeholder,
-  .input.active .placeholder {
-    bottom: calc(100% + 6px);
-    left: 0px;
-  }
-</style>
diff --git a/src/components/global/AccountProgression.svelte b/src/components/global/AccountProgression.svelte
deleted file mode 100644
index 3580ee31..00000000
--- a/src/components/global/AccountProgression.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { AUDIO } from '@/app.svelte';
-  import { correctHealth } from '@/ts/equipment';
-  import { getLevelByExperience } from '@/ts/level';
-
-  let previousLevel: number | null = $state(null);
-
-  const closeSelf = ({ target }: any) => {
-    if (target.classList.contains('my-ludus')) {
-      app.showAccountProgression = false;
-    }
-  };
-  const close = () => (app.dialog = undefined);
-
-  $effect(() => {
-    if (!app.serverTimestampSnapshot) return;
-
-    let currentLevel = getLevelByExperience(app.experience);
-
-    if (previousLevel !== null && currentLevel > previousLevel) {
-      app.showAccountProgression = true;
-      app.characters.map((character) => correctHealth(character));
-      new Howl({
-        src: AUDIO['Fire & Shimmer'],
-        volume: app.settings.volume.sfx * app.settings.volume.master
-      }).play();
-    }
-
-    previousLevel = currentLevel;
-  });
-</script>
-
-<button
-  class={tw(
-    'xs:grid-rows-[theme(spacing.8)_1fr_theme(spacing.8)] dialog pointer-events-none fixed inset-0 z-10 grid h-full scale-120 grid-rows-[theme(spacing.20)_1fr_theme(spacing.20)] place-items-center overflow-x-hidden overflow-y-auto border-0 bg-black/10 opacity-0 shadow-[inset_0_0px_10vw_rgba(0,0,0,0.5)] backdrop-blur-[1px] transition-all delay-75 duration-200 outline-none',
-    app.showAccountProgression && 'pointer-events-auto scale-100 opacity-100'
-  )}
->
-  <div></div>
-  <div
-    class="xs:min-w-[calc(100%-theme(spacing.20))] xs:max-w-[calc(100%-theme(spacing.8))] relative w-[20rem] max-w-[calc(100%-theme(spacing.24))] text-left"
-  >
-    <MyLudus {closeSelf} />
-  </div>
-  <div></div>
-</button>
diff --git a/src/components/global/ClientClock.svelte b/src/components/global/ClientClock.svelte
deleted file mode 100644
index 39c40201..00000000
--- a/src/components/global/ClientClock.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  let interval = setInterval(() => {});
-
-  $effect(() => {
-    interval = setInterval(() => {
-      if (app.serverTimestampSnapshot)
-        app.serverTimestamp =
-          app.serverTimestampSnapshot + (performance.now() - app.syncPerformanceNow);
-    }, 250);
-
-    return () => clearInterval(interval);
-  });
-</script>
diff --git a/src/components/global/ConnectSocket.svelte b/src/components/global/ConnectSocket.svelte
deleted file mode 100644
index 391932d3..00000000
--- a/src/components/global/ConnectSocket.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-  import type { AsyncAwaitWebsocket } from 'async-await-websockets';
-  import aaw from 'async-await-websockets/client';
-  import { browser } from '$app/environment';
-  import { notify } from '@/ts/actions';
-
-  const { WEBSOCKET_CONNECT } = ENV;
-
-  $effect(() => {
-    if (browser && !app.socket) {
-      const ws = aaw(WEBSOCKET_CONNECT) as AsyncAwaitWebsocket;
-      ws.on('broadcast', console.info);
-      ws.on('open', () => {
-        app.socket = ws;
-        notify({ success: 'Connected to game server' });
-      });
-      ws.on('close', () => {
-        notify({ error: `Can't connect to game server` });
-      });
-    }
-  });
-</script>
diff --git a/src/components/global/Dialog.svelte b/src/components/global/Dialog.svelte
deleted file mode 100644
index 116b7003..00000000
--- a/src/components/global/Dialog.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-  import type { Component as SvelteComponent, ComponentProps } from 'svelte';
-
-  let {
-    Component,
-    props
-  }: { Component?: SvelteComponent; props?: ComponentProps<SvelteComponent> } = $props();
-
-  const close = () => {
-    // Let app render next animation frame before closing
-    // This prevents mouseenter for things like tooltips
-    requestAnimationFrame(() => {
-      app.dialog = undefined;
-    });
-  };
-</script>
-
-<div
-  class={tw(
-    'xs:grid-rows-[theme(spacing.8)_1fr_theme(spacing.8)] dialog pointer-events-none fixed inset-0 z-20 grid h-full scale-95 grid-rows-[theme(spacing.20)_1fr_theme(spacing.20)] place-items-center overflow-x-hidden overflow-y-auto border-0 bg-black/10 opacity-0 shadow-[inset_0_0px_10vw_rgba(0,0,0,0.5)] backdrop-blur-[1px] transition-[opacity,transform] duration-0 outline-none',
-    Component && 'pointer-events-auto scale-100 opacity-100 delay-75 duration-200'
-  )}
->
-  <div></div>
-  <div
-    class="xs:min-w-[calc(100%-theme(spacing.20))] xs:max-w-[calc(100%-theme(spacing.8))] relative w-[20rem] max-w-[calc(100%-theme(spacing.24))] text-left"
-  >
-    {#if Component}
-      <Component {...props} {close} />
-    {/if}
-  </div>
-  <div></div>
-</div>
diff --git a/src/components/global/InCombat.svelte b/src/components/global/InCombat.svelte
deleted file mode 100644
index 44b42526..00000000
--- a/src/components/global/InCombat.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-  let loopId: any = $state();
-  let startTimestamp = $state(0);
-  let lastTimestamp = 0;
-
-  const loop = (timestamp: number) => {
-    if (!lastTimestamp) lastTimestamp = timestamp;
-
-    const deltaTime = timestamp - lastTimestamp;
-    app.elapsedMilliseconds += deltaTime;
-    lastTimestamp = timestamp;
-
-    let [event] = app.combat.events;
-
-    if (app.elapsedMilliseconds > event?.eventTimestamp) {
-      app.liveTeams = event.teams;
-      const [_, ...newEvents] = app.combat.events;
-      app.combat.events = newEvents;
-    }
-
-    if (app.elapsedMilliseconds > app.combat.duration) {
-      app.liveTeams = app.combat.teamsEndState;
-      cancelAnimationFrame(loopId);
-      loopId = undefined;
-
-      app.characters.forEach((character) => {
-        const myCharacter = app.liveTeams[0].combatants.find((c) => c.uuid === character.uuid);
-        if (myCharacter) {
-          character.overrides.combatStats.currentHealth = myCharacter.combatStats.currentHealth;
-        }
-      });
-      return;
-    }
-
-    loopId = requestAnimationFrame(loop);
-  };
-
-  const pauseCombat = () => {
-    cancelAnimationFrame(loopId);
-    loopId = undefined;
-  };
-
-  const resumeCombat = () => {
-    lastTimestamp = 0;
-    loopId = requestAnimationFrame(loop);
-  };
-
-  const startCombat = () => {
-    lastTimestamp = 0;
-    loopId = requestAnimationFrame(loop);
-    startTimestamp = 0;
-    app.elapsedMilliseconds = 0;
-  };
-
-  $effect(() => {
-    if (app.combat.duration > 0) {
-      startCombat();
-    }
-
-    document.addEventListener('pauseCombat', pauseCombat);
-    document.addEventListener('resumeCombat', resumeCombat);
-
-    return () => {
-      document.removeEventListener('pauseCombat', pauseCombat);
-      document.removeEventListener('resumeCombat', resumeCombat);
-    };
-  });
-</script>
diff --git a/src/components/global/Keystrokes.svelte b/src/components/global/Keystrokes.svelte
deleted file mode 100644
index a317f52a..00000000
--- a/src/components/global/Keystrokes.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-  import AVAILABLE_KEYS from '@/constants/AVAILABLE_KEYS';
-  import type { DynamicObject } from '@/types/common';
-  import { untrack } from 'svelte';
-
-  let localKeys: DynamicObject = $state({ ...AVAILABLE_KEYS });
-
-  const toggleKey = (c: KeyboardEvent) => {
-    if (!(c instanceof KeyboardEvent)) return; // Password auto-filler fires `Event` which is missing `code` for example
-
-    const { type, code, metaKey, ctrlKey } = c;
-    const lcKey = code.toLowerCase();
-    if (app.keys[lcKey] && type === 'keydown') return;
-
-    if (metaKey || ctrlKey) {
-      localKeys = { ...AVAILABLE_KEYS };
-      return;
-    }
-
-    if (app.gameKeyboardDisabled && !['enter', 'escape', 'shiftleft', 'shiftright'].includes(lcKey))
-      return;
-
-    if (lcKey in localKeys) localKeys[lcKey] = type === 'keydown';
-  };
-
-  $effect(() => {
-    $state.snapshot(localKeys); //
-
-    untrack(() => {
-      app.keys = { ...localKeys };
-    });
-  });
-</script>
-
-<svelte:window onkeydown={toggleKey} onkeyup={toggleKey} />
-
-<!-- <div class="fixed right-0 bottom-0 bg-white p-8 text-xs text-gray-800">
-  <pre>{JSON.stringify(app.keys, null, 2)}</pre>
-</div> -->
diff --git a/src/components/global/Notifications.svelte b/src/components/global/Notifications.svelte
deleted file mode 100644
index 7267e07c..00000000
--- a/src/components/global/Notifications.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-  import { fly } from 'svelte/transition';
-  import { removeFirstNotification } from '@/ts/actions';
-
-  let ref: HTMLDivElement;
-  let animations: any[] = $state([]);
-  let animating = $state(false);
-
-  const titleByType = (type: string) =>
-    ({
-      error: 'Ops, something went wrong!',
-      info: 'Did you know?',
-      success: 'Good news',
-      warning: 'Heads up'
-    })[type];
-
-  const removeFirst = (items: any[]) => {
-    if (!ref.children.length) return;
-    const { height } = ref.children[0].getBoundingClientRect();
-    if (items.length && !animating && height) {
-      const timing = {
-        delay: 3000,
-        duration: 600,
-        easing: 'ease'
-      };
-      animations.push(
-        ref.animate(
-          {
-            transform: `translateY(-${height}px)`
-          },
-          timing
-        )
-      );
-      animations.push(
-        ref.children[0].animate(
-          {
-            opacity: 0
-          },
-          timing
-        )
-      );
-      animating = true;
-
-      animations[0].onfinish = () => {
-        animations = [];
-        animating = false;
-        removeFirstNotification();
-      };
-    }
-  };
-
-  $effect(() => {
-    if (ref) {
-      removeFirst([...app.notifications]);
-    }
-  });
-
-  const hover = (enter: boolean) =>
-    animations.map((animation) => animation[enter ? 'pause' : 'play']());
-</script>
-
-<div
-  role="status"
-  class="fixed top-8 right-2 text-gray-500"
-  onmouseenter={hover.bind(undefined, true)}
-  onmouseleave={hover.bind(undefined, false)}
->
-  <div class="crow vertical right" bind:this={ref}>
-    {#each [...app.notifications] as notification, i (notification)}
-      {@const { type, message } = JSON.parse(notification)}
-      <div>
-        <div in:fly={{ x: 50 }}>
-          <div
-            class={tw(
-              'notification glass mb-2 py-3 pr-5 pl-3',
-              type === 'error' && 'border-red-500',
-              type === 'warning' && 'border-orange-500',
-              type === 'info' && 'border-blue-500',
-              type === 'success' && 'border-green-500'
-            )}
-          >
-            <crow class="gap-2">
-              <crow
-                class={tw(
-                  'icon h-8 w-8 rounded-full',
-                  type === 'error' && 'bg-red-500',
-                  type === 'warning' && 'bg-orange-500',
-                  type === 'info' && 'bg-blue-500',
-                  type === 'success' && 'bg-green-500'
-                )}
-              >
-                <Icon class="text-lg text-white" name={type} />
-              </crow>
-              <div>
-                <strong class="text-base text-gray-800">{titleByType(type)}</strong>
-                <div class="max-w-xs text-gray-700 first-letter:capitalize">
-                  {message.replace('Error: ', '')}
-                </div>
-              </div>
-            </crow>
-          </div>
-        </div>
-      </div>
-    {/each}
-  </div>
-</div>
diff --git a/src/components/global/Overlay.svelte b/src/components/global/Overlay.svelte
deleted file mode 100644
index 296b837c..00000000
--- a/src/components/global/Overlay.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { recursiveLookup } from '@/helpers';
-  import { untrack } from 'svelte';
-
-  const close = ({ target }: any) => recursiveLookup(target, ['close']) && (app.overlay = '');
-  const closeSelf = ({ target }: any) => target.classList.contains('overlay') && (app.overlay = '');
-
-  $effect(() => {
-    if (escape && !app.gameKeyboardDisabled) {
-      untrack(() => {
-        app.overlay ? (app.overlay = '') : (app.overlay = 'GameMenu');
-      });
-    }
-  });
-
-  let { escape } = $derived(app.keys);
-  let isGameMenu = $derived(app.overlay === 'GameMenu');
-  let isCombatLog = $derived(app.overlay === 'Combat');
-</script>
-
-<button
-  onclick={closeSelf}
-  class={tw(
-    'xs:grid-rows-[theme(spacing.8)_1fr_theme(spacing.8)] overlay pointer-events-none fixed inset-[0_0_auto_0] z-20 grid h-full scale-95 grid-rows-[theme(spacing.20)_1fr_theme(spacing.20)] place-items-center overflow-x-hidden overflow-y-auto border-0 bg-black/20 opacity-0 shadow-[inset_0_0px_10vw_rgba(0,0,0,0.5)] backdrop-blur-[1px] transition-[opacity,transform] duration-0 outline-none',
-    app.overlay && 'pointer-events-auto scale-100 opacity-100 delay-75 duration-200',
-    isCombatLog &&
-      "bg-[url('/images/arena.png')] bg-cover bg-center bg-no-repeat shadow-[inset_0_0px_10vw_rgba(0,0,0,1)]"
-  )}
->
-  <div></div>
-  <div
-    class={tw(
-      'xs:min-w-[calc(100%-theme(spacing.20))] xs:max-w-[calc(100%-theme(spacing.8))] relative max-w-[calc(100%-theme(spacing.24))] min-w-[43.75rem] text-left',
-      isGameMenu && 'min-w-[theme(spacing.80)]'
-    )}
-  >
-    {#if app.overlay}
-      <Async component={`./overlays/${app.overlay}.svelte`} onclick={close} />
-    {/if}
-  </div>
-  <div></div>
-</button>
diff --git a/src/components/overlays/CodeOfConduct.svelte b/src/components/overlays/CodeOfConduct.svelte
deleted file mode 100644
index 8a31f1c3..00000000
--- a/src/components/overlays/CodeOfConduct.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-  let { onclick } = $props();
-</script>
-
-<Frame title="Code of Conduct" class="left">
-  By playing the game you agree to the following rules and regulations.
-  <br />
-  <br />
-  <h3>Rules:</h3>
-  <ol>
-    <li>Respect everyone and their opinions</li>
-    <li>Don't spam chat</li>
-    <li>No excessive caps</li>
-    <li>No excessive swearing</li>
-    <li>No NSFW Content in chat</li>
-    <li>Always respect a moderators request</li>
-  </ol>
-  We want to promote a sense of community where conversations and discussion is encouraged. Therefore
-  we expect everyone to to behave in a civil and respectful manner.
-  <br />
-  <br />
-  <h3>Verbal abuse, threatening behaviour, harassment</h3>
-  Remember this is a game where people come to relax and have fun. Although you may disagree with other
-  players and their opinions, this does not mean you need to be abusive or offensive. Direct verbal abuse
-  and/or harassment of other players is not acceptable.
-  <br />
-  <br />
-  <h3>Racism, discrimination and hate speech</h3>
-  Any kind of racism, discrimination or hate speech will not be tolerated.
-  <br />
-  <br />
-  <h3>Religious, political discussions</h3>
-  Conversations around these topics can sometimes be considered controversial, however we will allow
-  it as long as the above rules are adhered to. Moderator discretion also applies.
-  <br />
-  <br />
-  <h3>Moderators discretion</h3>
-  Sometimes prolonged or heated discussion around the above topics can become uncomfortable for other
-  players. The mods will always put the community first. If the community is showing concern around these
-  topics, Moderators reserve the right to request the conversation to end. Remember everyone is here
-  to enjoy the game and have fun.
-  <br />
-  <br />
-  <h3>
-    Moderators reserve the right to <span class="text-red-500">mute</span> players who consistently violate
-    the rules above.
-  </h3>
-</Frame>
-
-<Close {onclick} />
diff --git a/src/components/overlays/Combat.svelte b/src/components/overlays/Combat.svelte
deleted file mode 100644
index 8327510a..00000000
--- a/src/components/overlays/Combat.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script lang="ts">
-  import { COMBAT_TICK_TIME, COMBAT_RING_BASE_RADIUS } from '@/constants/APP';
-  import { ALL_FIGHTS } from '@/constants/FIGHTS';
-  import { getExperienceReward, getLevelByExperience } from '@/ts/level';
-  import type { Reward } from '@/types/combat';
-  import type { Team } from '@/types/team';
-  import CombatAudioPlayer from '../combat/CombatAudioPlayer.svelte';
-
-  const getGeometry = (N: number, { baseRadius = 250, itemWidth = 140, gap = 0 } = {}) => {
-    const C_base = 2 * Math.PI * baseRadius;
-    const C_item = Math.max(1, N) * (itemWidth + gap); // avoid divide-by-zero
-    const scale = Math.min(1, C_base / C_item); // 1–2 stay full size, 3+ shrink
-    return { scale };
-  };
-
-  let startTeams: Team[] = $derived(app.combat.teamsStartState);
-  let geometry = $derived(
-    getGeometry(
-      app.liveTeams.reduce((a, team) => team.combatants.length + a, 0) * app.liveTeams.length,
-      {
-        baseRadius: COMBAT_RING_BASE_RADIUS
-      }
-    )
-  );
-
-  let liveTeams = $derived(app.liveTeams.length ? app.liveTeams : startTeams);
-  let progress = $derived(
-    app.elapsedMilliseconds / app.combat.duration // avoid divide-by-zero
-  );
-  let fight = ALL_FIGHTS.find(({ id }) => id === app.combat.fightId) as any;
-
-  let experience = $derived(
-    startTeams[1]?.combatants?.[0]?.name === 'Training Dummy'
-      ? 0
-      : fight
-        ? getExperienceReward(fight.characters.length, fight.minLevel, fight.maxLevel, fight.boss)
-        : 50
-  );
-  let rewards: Reward[] = $derived.by(() => {
-    const rewards: Reward[] = [];
-
-    const amount = getLevelByExperience(app.experience) > fight?.maxLevel ? 1 : experience;
-
-    rewards.push({ type: 'experience', amount, showInUI: true });
-
-    if (fight && fight.boss) {
-      rewards.push({ type: 'bossHighscore', amount: fight.minLevel, showInUI: false });
-    }
-
-    return rewards;
-  });
-</script>
-
-<div class="relative w-full">
-  <CombatAudioPlayer audio={app.combat.audio} elapsedMilliseconds={app.elapsedMilliseconds} />
-  <crow class="!grid aspect-square place-items-center">
-    <CombatArena>
-      {#if liveTeams.length}
-        {#each liveTeams as { combatants, name }, _index}
-          {#each combatants as combatant, _c}
-            {@const { rot } = combatant.position}
-            {@const raw = Math.round(Math.abs(Math.abs(rot - 540) - 180))}
-            {@const z = 10 - Math.floor((raw / 180) * 9)}
-            <!-- {@const z = Math.floor((raw / 180) * 9) + 1} -->
-            {@const angleDiff = ((rot - 0 + 540) % 360) - 180}
-            {@const totalTime =
-              combatant.abilities.reduce((acc, { ticks }) => acc + ticks, 0) * COMBAT_TICK_TIME}
-            {@const individualProgress =
-              ((combatant.statuses.knockedOut
-                ? combatant.statuses.knockedOut
-                : app.elapsedMilliseconds) /
-                totalTime) %
-              1}
-
-            <!-- <div class="diameter" style={`transform: rotate(${rot}deg); z-index: ${z};`}>
-              <div class="edge" style={`transform: translate(-50%, -50%) rotate(-${rot}deg);`}>
-                <CombatantCard {...combatant} facingRight={angleDiff < 0} {elapsedMilliseconds}>
-                  <div class="relative">
-                    <div
-                      class="absolute top-0 right-full bottom-0 left-0 bg-blue-400"
-                      style="right: {100 - progress * 100}%"
-                    ></div>
-                    <div
-                      class="abilities relative flex w-full divide-x divide-gray-600 border border-gray-600"
-                    >
-                      {#each combatant.abilities as { name, ticks, icon }, i (`icon_${i}_${name}`)}
-                        <div
-                          class="relative flex h-6 items-center justify-center text-center"
-                          style="width: calc(calc(100% / 12)*{ticks});"
-                        >
-                          {#if icon === '1h1h' && ticks === 2}
-                            <div
-                              class="absolute top-0 bottom-0 left-1/2 w-[0.1px] -translate-x-1/2 bg-gray-400"
-                            ></div>
-                          {/if}
-                          <Icon
-                            class={tw('relative text-[8px]', ticks > 1 && 'text-sm')}
-                            name={icon}
-                          />
-                        </div>
-                      {/each}
-                    </div>
-                  </div>
-                </CombatantCard>
-              </div>
-            </div> -->
-            <CombatantCard
-              {...combatant}
-              facingRight={angleDiff < 0}
-              elapsedMilliseconds={app.elapsedMilliseconds}
-              progress={individualProgress}
-              {z}
-              scale={geometry.scale}
-            />
-          {/each}
-          <!--<TeamBadge
-        {index}
-        rotation={index * rotation + 270}
-        scale={geometry.scale}
-      />-->
-        {/each}
-      {/if}
-    </CombatArena>
-    <ResultAnnouncement {progress} {rewards} />
-  </crow>
-</div>
-
-<!-- <style>
-  .diameter {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    transition: all 0.5s ease;
-  }
-  .edge {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: black;
-    transition: all 0.5s ease;
-  }
-</style> -->
diff --git a/src/components/overlays/GameMenu.svelte b/src/components/overlays/GameMenu.svelte
deleted file mode 100644
index f0aa20ad..00000000
--- a/src/components/overlays/GameMenu.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts">
-  import { SETTINGS_DEFAULT_VOLUME } from '@/app.svelte';
-
-  let { onclick } = $props();
-
-  const prettyVolume = (value: number) => {
-    return `${(value * 100) | 0}%`;
-  };
-</script>
-
-{#snippet displayMasterVolume()}
-  <crow class="w-10 p-2 text-sm">{prettyVolume(app.settings.volume.master)}</crow>
-{/snippet}
-{#snippet displayAmbientVolume()}
-  <crow class="w-10 p-2 text-sm">{prettyVolume(app.settings.volume.ambient)}</crow>
-{/snippet}
-{#snippet displaySFXVolume()}
-  <crow class="w-10 p-2 text-sm">{prettyVolume(app.settings.volume.sfx)}</crow>
-{/snippet}
-{#snippet displayCombatVolume()}
-  <crow class="w-10 p-2 text-sm">{prettyVolume(app.settings.volume.combat)}</crow>
-{/snippet}
-
-<Frame title="options">
-  <crow left class="w-full !justify-between text-white">
-    <span class="cinzel">Audio settings</span>
-
-    <Button
-      secondary
-      disabled={JSON.stringify(app.settings.volume) === JSON.stringify(SETTINGS_DEFAULT_VOLUME)}
-      onclick={() => {
-        app.settings.volume = SETTINGS_DEFAULT_VOLUME;
-      }}
-    >
-      Reset to default
-    </Button>
-  </crow>
-  <crow class="w-full gap-4">
-    <div class="w-40">Master</div>
-    <input
-      use:tooltip={{
-        children: displayMasterVolume,
-        direction: 'right',
-        lockInPlace: true
-      }}
-      type="range"
-      min="0"
-      max="1"
-      step="0.05"
-      bind:value={app.settings.volume.master}
-      class="w-full"
-    />
-  </crow>
-  <crow class="w-full gap-4">
-    <div class="w-40">Ambient</div>
-    <input
-      use:tooltip={{
-        children: displayAmbientVolume,
-        direction: 'right',
-        lockInPlace: true
-      }}
-      type="range"
-      min="0"
-      max="1"
-      step="0.05"
-      bind:value={app.settings.volume.ambient}
-      class="w-full"
-    />
-  </crow>
-  <crow class="w-full gap-4">
-    <div class="w-40">Sound effect</div>
-    <input
-      use:tooltip={{
-        children: displaySFXVolume,
-        direction: 'right',
-        lockInPlace: true
-      }}
-      type="range"
-      min="0"
-      max="1"
-      step="0.05"
-      bind:value={app.settings.volume.sfx}
-      class="w-full"
-    />
-  </crow>
-  <crow class="w-full gap-4">
-    <div class="w-40">Combat</div>
-    <input
-      use:tooltip={{
-        children: displayCombatVolume,
-        direction: 'right',
-        lockInPlace: true
-      }}
-      type="range"
-      min="0"
-      max="1"
-      step="0.05"
-      bind:value={app.settings.volume.combat}
-      class="w-full"
-    />
-  </crow>
-
-  <Hr class="via-white/20" />
-
-  <Button secondary onclick={() => (app.overlay = 'ReleaseNotes')}>Release notes</Button>
-  {#if app.token}
-    <Logout />
-  {/if}
-</Frame>
-
-<Close {onclick} />
diff --git a/src/components/overlays/ReleaseNotes.svelte b/src/components/overlays/ReleaseNotes.svelte
deleted file mode 100644
index b25bdb2f..00000000
--- a/src/components/overlays/ReleaseNotes.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  let { onclick } = $props();
-</script>
-
-<Frame title="release notes" class="left">
-  <h3>0.0.1 - 0.0.2 | 5-8</h3>
-  Initial version
-</Frame>
-
-<Close {onclick} />
diff --git a/src/components/tooltips/TooltipAbility.svelte b/src/components/tooltips/TooltipAbility.svelte
deleted file mode 100644
index 347b5f78..00000000
--- a/src/components/tooltips/TooltipAbility.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-  import STATUS_EFFECTS from '@/constants/STATUS_EFFECTS';
-  import { calculateCombatStatsByCharacter } from '@/ts/utils';
-  import { AbilityType, type Ability } from '@/types/ability';
-  import type { Combatant } from '@/types/combatant';
-  import type { CombatStats } from '@/types/combatStats';
-
-  let props: Required<Ability> & { character: Combatant } = $derived(app.tooltip?.props);
-
-  let { name, ticks, type, description, chainLink, character, statusEffects } = $derived(props);
-
-  let calc = $derived(props.calc);
-  let calculatedDamage = $derived(calc.damage());
-  let calculatedHealing = $derived(calc.healing());
-  let calculatedDuration = $derived(calc.duration());
-
-  let combatStats = $derived(
-    character
-      ? character?.teamIndex !== undefined
-        ? character.combatStats
-        : calculateCombatStatsByCharacter(character)
-      : ({} as Required<CombatStats>)
-  );
-</script>
-
-<div
-  class="pointer-events-none w-60 gap-1 rounded-md px-2.5 pt-1.5 pb-3 text-sm leading-[18px] text-gray-700 shadow-sm"
->
-  <crow vertical left class="w-full !justify-between">
-    <div class="text-lg text-black">{name}</div>
-    <Hr />
-  </crow>
-
-  <crow vertical left>
-    {#if type === AbilityType.WindUp}
-      <div class="text-sm">
-        <strong class="text-black"> Wind up: </strong>
-        {ticks} tick{ticks === 1 ? '' : 's'}
-      </div>
-    {/if}
-    {#if calculatedDuration?.result}
-      {@const duration = Math.floor(calculatedDuration.result)}
-      <div class="text-sm">
-        <strong class="text-black"> Duration: </strong>
-        {duration === Infinity ? 'variable' : `${duration} tick${duration === 1 ? '' : 's'}`}
-      </div>
-    {/if}
-
-    {#if chainLink}
-      <div class="text-sm">
-        <strong class="text-black">Triggers each:</strong>
-        {ticks / chainLink} tick{ticks / chainLink === 1 ? '' : 's'}
-      </div>
-    {/if}
-    <!-- <pre>{JSON.stringify(calculatedDamage, null, 2)}
-        </pre> -->
-    {#if calculatedDamage?.result}
-      <div class="text-sm">
-        <strong class="text-black"> Damage: </strong>
-        {Math.floor(combatStats?.damage * calculatedDamage.result)}
-        ({Math.floor(calculatedDamage.result * 100)}% of total damage)
-      </div>
-    {/if}
-    {#if name === 'Block'}
-      <div class="text-sm">
-        <strong class="text-black"> Block chance: </strong>
-        <span class="text-green-500">100%</span>
-      </div>
-    {/if}
-    {#if calculatedHealing?.result}
-      <div class="text-sm">
-        <strong class="text-black"> Heal: </strong>
-        {Math.floor(combatStats?.maxHealth * calculatedHealing.result)}
-        ({Math.floor(calculatedHealing.result * 100)}% of max health)
-      </div>
-    {/if}
-  </crow>
-
-  {#if statusEffects.length > 0}
-    <div class="mt-2 text-sm">
-      {#each statusEffects as statusEffect (statusEffect)}
-        {@const { singleWord, icon, convertsInto } = STATUS_EFFECTS[statusEffect]}
-        This ability inflicts <strong>{singleWord}</strong> ( <Icon
-          class={tw('text-md inline-block -translate-y-px', convertsInto && 'text-[10px]')}
-          name={icon}
-          original
-        /> ){#if convertsInto}
-          <br />which in turn inflicts <strong>{STATUS_EFFECTS[convertsInto].singleWord}</strong>
-          ( <Icon
-            class="text-md inline-block -translate-y-px"
-            name={STATUS_EFFECTS[convertsInto].icon}
-            original
-          /> ){/if}.
-      {/each}
-    </div>
-  {/if}
-
-  {#if description}
-    <div class="mt-2 text-sm italic">
-      {@html description}
-
-      <!-- {#if statusEffects.includes('isConcussed')}
-        <br /><br />This ability inflicts <strong>concussion</strong> (<Icon
-          class="inline-block text-xs"
-          name="isConcussed"
-          original
-        />) <br />which in turn inflicts <strong>stun</strong> (<Icon
-          class="inline-block text-xs"
-          name="isStunned"
-          original
-        />).
-      {/if}
-      {#if statusEffects.includes('isWounded')}
-        <br /><br />This ability inflicts <strong>wound</strong> (<Icon
-          class="inline-block text-xs"
-          name="isWounded"
-          original
-        />) <br />which in turn inflicts <strong>bleed</strong> (<Icon
-          class="inline-block text-xs"
-          name="isBleeding"
-          original
-        />).
-      {/if}
-      {#if statusEffects.includes('isExposed')}
-        <br /><br />This ability inflicts <strong>expose</strong> (<Icon
-          class="inline-block text-xs"
-          name="isExposed"
-          original
-        />) <br />which in turn inflicts <strong>vulnerable</strong> (<Icon
-          class="inline-block text-xs"
-          name="isVulnerable"
-          original
-        />).
-      {/if} -->
-    </div>
-  {/if}
-</div>
diff --git a/src/components/tooltips/TooltipEquipment.svelte b/src/components/tooltips/TooltipEquipment.svelte
deleted file mode 100644
index c8deeef3..00000000
--- a/src/components/tooltips/TooltipEquipment.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-  import type { Equipment } from '@/types/equipment';
-  import ABILITIES from '@/constants/ABILITIES';
-  import type { Character } from '@/types/character';
-  import { prettyCombatStatKey, prettyCombatStatValue } from '@/types/combatStats';
-
-  let {
-    name,
-    level,
-    description,
-    combatStats,
-    abilities,
-    character
-  }: Equipment & { character: Character } = $derived(app.tooltip?.props);
-
-  let activeAbilities = $derived(abilities?.filter((ability) => ABILITIES(ability, true).basic));
-  let availableAbilities = $derived(
-    abilities?.filter((ability) => !ABILITIES(ability, true).basic)
-  );
-
-  let { regularCombatStats, luckyCombatStats } = $derived.by(() => {
-    const stats = Object.entries(combatStats);
-    const regularStats = ['damage', 'maxHealth', 'maxArmor'];
-    const regularCombatStats = stats.filter(([key]) => regularStats.includes(key));
-    const luckyCombatStats = stats.filter(([key]) => !regularStats.includes(key));
-
-    return {
-      regularCombatStats,
-      luckyCombatStats
-    };
-  });
-</script>
-
-<crow
-  left
-  vertical
-  class="pointer-events-none !w-60 gap-2 rounded-md px-2.5 pt-1.5 pb-3 text-sm leading-[18px] text-gray-700 shadow-sm transition-all"
->
-  <crow vertical left class="w-full">
-    <crow class="w-full !justify-between">
-      <div class="text-lg text-black">{name}</div>
-      <div class="cinzel">level {level}</div>
-    </crow>
-
-    <Hr class="mb-0" />
-  </crow>
-  {#if regularCombatStats.length > 0}
-    <crow vertical left class="!w-1/2">
-      {#each regularCombatStats as [key, value]}
-        <crow class="w-full !justify-between text-sm">
-          <strong class="text-black"> {prettyCombatStatKey(key)} </strong>
-          <span class="text-black">{value}</span>
-        </crow>
-      {/each}
-    </crow>
-  {/if}
-  {#if luckyCombatStats.length > 0}
-    <crow vertical left class="!w-1/2">
-      {#each luckyCombatStats as [key, value]}
-        <crow class="w-full !justify-between text-sm">
-          <strong class="text-black"> {prettyCombatStatKey(key)} </strong>
-          <span class="text-green-500">{prettyCombatStatValue(key, value)}</span>
-        </crow>
-      {/each}
-    </crow>
-  {/if}
-  {#if description}
-    <span class="text-sm italic">{@html description}</span>
-  {/if}
-
-  {#if activeAbilities.length > 0}
-    <crow left up vertical class="gap-1">
-      <AbilityBar {character} dndDisabled small minimalistic abilities={activeAbilities} />
-    </crow>
-  {/if}
-  {#if availableAbilities.length > 0}
-    <Hr class="mb-0.5" />
-    <crow class="w-full gap-4">
-      <!-- <div class="text-sm text-gray-500">Abilities</div> -->
-      <AbilityInventory {character} {availableAbilities} small />
-    </crow>
-  {/if}
-</crow>
diff --git a/src/components/ui/Bar.svelte b/src/components/ui/Bar.svelte
deleted file mode 100644
index 32ed4312..00000000
--- a/src/components/ui/Bar.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-  let props = $props();
-  let {
-    children,
-    class: classes,
-    current,
-    max,
-    text = '',
-    isTime = false,
-    isLoading = false,
-    center = false,
-    percentage = false,
-    left = false
-  } = $derived(props);
-
-  //  let minutes = $derived(Math.floor(timeToRefill / 60000));
-  // let seconds = $derived(Math.floor((timeToRefill % 60000) / 1000));
-  // let timeToRefillFormatted = $derived(
-  //   `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
-  // );
-</script>
-
-<div
-  class={tw(
-    'relative grid h-7 w-full bg-gray-500/50 text-white inset-shadow-sm',
-    center && 'h-6 overflow-hidden rounded-sm'
-  )}
->
-  <div
-    class={tw(
-      'h-full bg-red-800 transition-all duration-200 ease-in-out [grid-area:1/1]',
-      isTime && 'duration-250 ease-linear',
-      classes
-    )}
-    style="width: {Math.max(0, (current / max) * 100)}%"
-  ></div>
-
-  <crow class={tw('px-2 text-sm [grid-area:1/1] text-shadow-xs', center ? '' : '!justify-between')}>
-    {#if isLoading}
-      <Spinner class="text-sm" />
-    {:else if isTime}
-      {@const minutes = Math.floor((max - current) / 60000)}
-      {@const seconds = Math.floor(((max - current) % 60000) / 1000) + 1}
-      {@const timeToRefillFormatted = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`}
-      <crow class="w-10">
-        {timeToRefillFormatted}
-      </crow>
-    {:else}
-      <div class={tw(left && '')}>
-        {#if text}
-          {text}
-        {/if}
-      </div>
-      {#if percentage}
-        {Math.max(0, (current / max) * 100).toFixed(0)}%
-      {:else}
-        {current} / {max}
-      {/if}
-    {/if}
-  </crow>
-
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
diff --git a/src/components/ui/Icon.svelte b/src/components/ui/Icon.svelte
deleted file mode 100644
index 381db3f2..00000000
--- a/src/components/ui/Icon.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-  import icons from '@/iconice-icons.json';
-  import type { IconName } from '@/Iconice.d.ts';
-
-  type Props = {
-    name: IconName;
-    original?: boolean;
-    ratio?: number;
-    class?: string;
-  };
-
-  let { name, original = false, ratio = 1, ...rest }: Props = $props();
-
-  if (!icons[name]) {
-    // throw new Error(`Icon "${name}" does not exist.`);
-    console.error(`Icon "${name}" does not exist.`);
-    name = 'error';
-  }
-
-  const {
-    elements,
-    fill,
-    fills,
-    strokes,
-    viewBoxWidth,
-    viewBoxHeight,
-    viewBoxLeft,
-    viewBoxTop,
-    widthRatio,
-    heightRatio
-  } = icons[name];
-</script>
-
-<svg
-  {fill}
-  viewBox={viewBoxWidth && viewBoxHeight
-    ? `${viewBoxLeft} ${viewBoxTop} ${viewBoxWidth} ${viewBoxHeight}`
-    : undefined}
-  width={`${ratio * widthRatio}em`}
-  height={`${ratio * heightRatio}em`}
-  style={original
-    ? [
-        ...fills.map((fill, i) => fill && `--${name}-fill-color-${i}: ${fill};`),
-        ...strokes.map((stroke, i) => stroke && `--${name}-stroke-color-${i}: ${stroke};`)
-      ]
-        .filter(Boolean)
-        .join('')
-    : undefined}
-  {...rest}
->
-  {@html elements.join('')}
-</svg>
diff --git a/src/components/ui/Pill.svelte b/src/components/ui/Pill.svelte
deleted file mode 100644
index fa72450a..00000000
--- a/src/components/ui/Pill.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  let { text, class: classes }: { text: string; class?: string } = $props();
-</script>
-
-<crow
-  class={tw('cinzel !flex-none rounded-full bg-gray-200 px-3 py-0 text-sm text-gray-500', classes)}
->
-  {text}
-</crow>
diff --git a/src/components/ui/Spinner.svelte b/src/components/ui/Spinner.svelte
deleted file mode 100644
index 783ef745..00000000
--- a/src/components/ui/Spinner.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-  let { class: classes }: { class?: string } = $props();
-</script>
-
-<div class={tw('grid items-center text-4xl text-white', classes)}>
-  <Icon class="opacity-20 [grid-area:1/1] dark:text-gray-800" name="spinner-circle" />
-  <Icon class="animate-spin [grid-area:1/1] dark:text-gray-800" name="spinner-inner" />
-</div>
diff --git a/src/components/ui/Tooltip.svelte b/src/components/ui/Tooltip.svelte
deleted file mode 100644
index e4dd60ef..00000000
--- a/src/components/ui/Tooltip.svelte
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts">
-  import type { Tooltip } from '@/ts/use';
-  import { tick } from 'svelte';
-
-  let { targetX, targetY, direction, lockInPlace, x, y, visible, children }: Tooltip = $props();
-
-  const OFFSET = 20;
-
-  let tooltipElement: HTMLElement | null = $state(null);
-  let tooltipBoundingBox: DOMRect | undefined = $state();
-
-  let tooltipX = $derived.by(() => {
-    const width = tooltipBoundingBox?.width ?? 0;
-    const vw = window.innerWidth;
-
-    let desiredLeft = x - width / 2; // center at x
-    if (direction === 'left') {
-      desiredLeft = x - width - OFFSET;
-
-      if (lockInPlace) desiredLeft = targetX - width - OFFSET * 0.25;
-    } else if (direction === 'right') {
-      desiredLeft = x + OFFSET;
-
-      if (lockInPlace) desiredLeft = targetX + OFFSET * 0.25;
-    } else if (lockInPlace) desiredLeft = targetX - width / 2;
-
-    const maxLeft = Math.max(0, vw - width); // last valid left
-    return Math.min(Math.max(desiredLeft, 0), maxLeft);
-  });
-
-  let tooltipY = $derived.by(() => {
-    const height = tooltipBoundingBox?.height ?? 0;
-    const vh = window.innerHeight;
-
-    let desiredTop = y - height / 2; // center at x
-    if (direction === 'up') {
-      desiredTop = y - height - OFFSET;
-
-      if (lockInPlace) desiredTop = targetY - height - OFFSET * 0.25;
-    } else if (direction === 'down') {
-      desiredTop = y + OFFSET;
-
-      if (lockInPlace) desiredTop = targetY + OFFSET * 0.25;
-    } else if (lockInPlace) desiredTop = targetY - height / 2;
-
-    const maxTop = Math.max(0, vh - height); // last valid top
-    return Math.min(Math.max(desiredTop, 0), maxTop);
-  });
-
-  $effect(() => {
-    if (!tooltipElement) return;
-
-    children;
-
-    tick().then(() => {
-      if (!tooltipElement) return;
-      tooltipBoundingBox = tooltipElement.getBoundingClientRect();
-    });
-  });
-
-  const ARROW = 16; // w-4 => 16px
-  const ARROW_HALF = ARROW / 2;
-
-  const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max);
-
-  // pick which point to follow (cursor vs lock-in target)
-  const fx = $derived.by(() => (lockInPlace ? targetX : x));
-  const fy = $derived.by(() => (lockInPlace ? targetY : y));
-
-  // Arrow “track” positions, clamped to the tooltip’s interior
-  const arrowLeft = $derived.by(() => {
-    const w = tooltipBoundingBox?.width ?? 0;
-    // position is relative to tooltip’s left, compensate for arrow center
-    return clamp(fx - tooltipX - ARROW_HALF, ARROW_HALF, Math.max(ARROW_HALF, w - ARROW_HALF));
-  });
-
-  const arrowTop = $derived.by(() => {
-    const h = tooltipBoundingBox?.height ?? 0;
-    // position is relative to tooltip’s top, compensate for arrow center
-    return clamp(fy - tooltipY - ARROW_HALF, ARROW_HALF, Math.max(ARROW_HALF, h - ARROW_HALF));
-  });
-
-  const hasEquipmentLevel = $derived(app.tooltip?.props?.level);
-</script>
-
-<div
-  class={tw(
-    'glass pointer-events-none fixed z-100 -translate-y-2 !border-[0.5px] !border-black/50 opacity-0 transition-[translate,opacity] duration-300',
-    visible && 'translate-y-0 opacity-100'
-  )}
-  style="left: {tooltipX}px; top: {tooltipY}px;"
-  bind:this={tooltipElement}
->
-  {@render children()}
-
-  <div
-    class={tw(
-      'absolute aspect-square w-4 bg-stone-600',
-      !direction && 'hidden',
-      direction === 'left' && 'top-0 left-full [clip-path:polygon(0%_0%,50%_50%,0%_100%)]',
-      direction === 'right' && 'top-0 right-full [clip-path:polygon(100%_0%,100%_100%,50%_50%)]',
-      direction === 'up' && 'top-full left-0 [clip-path:polygon(0%_0%,100%_0%,50%_50%)]',
-      direction === 'down' && 'bottom-full left-0 [clip-path:polygon(100%_100%,0%_100%,50%_50%)]',
-      hasEquipmentLevel >= 5 && 'bg-green-700',
-      hasEquipmentLevel >= 10 && 'bg-blue-700',
-      hasEquipmentLevel >= 15 && 'bg-purple-700',
-      hasEquipmentLevel >= 20 && 'bg-orange-700',
-      hasEquipmentLevel >= 25 && 'bg-red-700'
-    )}
-    style={['left', 'right'].includes(direction ?? '')
-      ? `top:${arrowTop}px;`
-      : `left:${arrowLeft}px;`}
-  ></div>
-</div>
diff --git a/src/constants/ABILITIES.ts b/src/constants/ABILITIES.ts
deleted file mode 100644
index ff77a561..00000000
--- a/src/constants/ABILITIES.ts
+++ /dev/null
@@ -1,297 +0,0 @@
-import { AbilityType, type Ability, type AbilityRef } from '@/types/ability';
-import VFX from '@/constants/VFX';
-import SFX from '@/constants/SFX';
-import entity from '@/ts/entity';
-import type { DynamicObject } from '@/types/common';
-import { deepMerge } from '@/helpers';
-
-export const ALL_ABILITIES = {
-  stab: {
-    name: 'Stab',
-    type: AbilityType.WindUp,
-    description: '', //"Thrust with your weapon's sharp end.",
-    ticks: 2,
-    icon: 'stab',
-    basic: true,
-    statusEffects: ['isWounded'],
-    vfx: VFX.basicAttackFast,
-    sfx: SFX.stab,
-    damageModifier: -0.05,
-    healingModifier: null,
-    durationModifier: null
-  },
-  pierce: {
-    name: 'Pierce',
-    type: AbilityType.WindUp,
-    description: '', //"Thrust with your weapon's sharp end.",
-    ticks: 3,
-    icon: 'bowshot',
-    basic: true,
-    statusEffects: ['isWounded'],
-    vfx: VFX.basicAttackFast,
-    sfx: SFX.bowShot,
-    damageModifier: -0.05,
-    healingModifier: null,
-    durationModifier: null
-  },
-  swing: {
-    name: 'Swing',
-    type: AbilityType.WindUp,
-    description: '', // 'Swing your weapon in a wide arc.',
-    ticks: 3,
-    icon: 'slash',
-    basic: true,
-    statusEffects: ['isExposed'],
-    vfx: VFX.basicAttackRegular,
-    sfx: SFX.swing,
-    damageModifier: 0,
-    healingModifier: null,
-    durationModifier: null
-  },
-  slam: {
-    name: 'Slam',
-    type: AbilityType.WindUp,
-    description: '', //'Attack your opponent with a devestating slam.',
-    ticks: 4,
-    icon: 'slam',
-    basic: true,
-    statusEffects: ['isConcussed'],
-    vfx: VFX.basicAttackSlow,
-    sfx: SFX.slam,
-    damageModifier: 0.05,
-    healingModifier: null,
-    durationModifier: null
-  },
-  punch: {
-    name: 'Punch',
-    type: AbilityType.WindUp,
-    description: '', //'Throw a punch at your opponent.',
-    ticks: 2,
-    icon: 'punch',
-    basic: true,
-    statusEffects: [],
-    vfx: VFX.basicAttackFast,
-    sfx: SFX.punch,
-    damageModifier: -0.1,
-    healingModifier: null,
-    durationModifier: null
-  },
-  block: {
-    name: 'Block',
-    type: AbilityType.Channeling,
-    description: 'Raise your shield to block. Prevent all damage for the duration.',
-    ticks: 3,
-    icon: 'block',
-    basic: true,
-    statusEffects: [],
-    vfx: VFX.block,
-    sfx: SFX.stab,
-    damageModifier: null,
-    healingModifier: null,
-    durationModifier: 0
-  },
-  shieldBash: {
-    name: 'Shield Bash',
-    type: AbilityType.WindUp,
-    description: 'Lunge forward and bash your opponent with your shield.',
-    ticks: 3,
-    icon: 'shieldBash',
-    basic: true,
-    statusEffects: ['isConcussed'],
-    vfx: VFX.basicAttackRegular,
-    sfx: SFX.slam,
-    damageModifier: 0,
-    healingModifier: null,
-    durationModifier: null
-  },
-  kick: {
-    name: 'Kick',
-    type: AbilityType.WindUp,
-    description: 'Kick your opponent, stunning them for the duration of their current ability.',
-    ticks: 1,
-    icon: 'kick',
-    basic: false,
-    statusEffects: ['isStunned'],
-    vfx: VFX.kick,
-    sfx: SFX.stab,
-    damageModifier: null,
-    healingModifier: null,
-    durationModifier: Infinity
-  },
-  whirlwind: {
-    name: 'Whirlwind',
-    type: AbilityType.Channeling,
-    description: 'Quickly spin and deal damage each tick.',
-    ticks: 10,
-    chainLink: 10,
-    icon: 'whirlwind',
-    basic: false,
-    statusEffects: [],
-    vfx: VFX.whirlwind,
-    sfx: SFX.stab,
-    damageModifier: 0,
-    healingModifier: null,
-    durationModifier: 0
-  },
-  lacerate: {
-    name: 'Lacerate',
-    type: AbilityType.WindUp,
-    description: 'Bleeds your opponent for 20% of your total damage.',
-    ticks: 2,
-    icon: 'lacerate',
-    basic: false,
-    statusEffects: ['isBleeding'],
-    vfx: VFX.basicAttackFast,
-    sfx: SFX.doubleCut,
-    damageModifier: null,
-    healingModifier: null,
-    durationModifier: 1
-  },
-  demoralizingShout: {
-    name: 'Demoralizing Shout',
-    type: AbilityType.WindUp,
-    description: 'Weakens your opponent. They take 50% more damage for the duration of the effect.',
-    ticks: 2,
-    icon: 'demoShout',
-    basic: false,
-    statusEffects: ['isVulnerable'],
-    vfx: VFX.filler,
-    sfx: SFX.demoralizingShout,
-    damageModifier: null,
-    healingModifier: null,
-    durationModifier: 2
-  },
-  cheesyTactics: {
-    name: 'Cheesy Tactics',
-    type: AbilityType.Channeling,
-    description: 'Restores some health.',
-    ticks: 9,
-    chainLink: 3,
-    icon: 'cheese',
-    basic: true,
-    statusEffects: [],
-    vfx: VFX.heal,
-    sfx: SFX.chew,
-    damageModifier: null,
-    healingModifier: 0,
-    durationModifier: 0
-  },
-  bite: {
-    name: 'Bite',
-    type: AbilityType.WindUp,
-    description: 'A vicious bite.<br />',
-    ticks: 2,
-    icon: 'bite',
-    basic: true,
-    statusEffects: ['isBleeding'],
-    vfx: VFX.basicAttackFast,
-    sfx: SFX.stab,
-    damageModifier: 0,
-    healingModifier: null,
-    durationModifier: 1
-  },
-  harden: {
-    name: 'Harden',
-    type: AbilityType.WindUp,
-    description: "If armor isn't depleted regain all armor.",
-    ticks: 1,
-    icon: 'fillArmor',
-    basic: true,
-    statusEffects: [],
-    vfx: VFX.heal,
-    sfx: SFX.stab,
-    damageModifier: null,
-    healingModifier: null,
-    durationModifier: null
-  },
-  playingTheVictim: {
-    name: 'Playing the Victim',
-    type: AbilityType.WindUp,
-    description: '',
-    ticks: 12,
-    icon: 'cross',
-    basic: true,
-    statusEffects: [],
-    vfx: VFX.heal,
-    sfx: SFX.stab,
-    damageModifier: null,
-    healingModifier: null,
-    durationModifier: null
-  }
-};
-
-const scalingCalc = (ticks: number, modifier: number = 0) => {
-  if (modifier === null) return;
-
-  const maxTicks = 4;
-  const mod = 1.25; //;- modifier;
-  const base = ticks / maxTicks;
-  const pow = +Math.pow(base, mod).toFixed(2);
-  const result = +(pow * (1 + modifier)).toFixed(2);
-
-  return { base, pow, modifier, result };
-};
-
-function damageCalc(this: Ability) {
-  const ticks = this.chainLink ? this.ticks / this.chainLink : this.ticks;
-
-  const scaled = scalingCalc(ticks, this.damageModifier);
-  return scaled;
-}
-
-function healingCalc(this: Ability) {
-  const ticks = this.chainLink ? this.ticks / this.chainLink : this.ticks;
-  const scaled = scalingCalc(ticks, this.healingModifier);
-  return scaled;
-}
-
-function durationCalc(this: Ability) {
-  if (this.durationModifier === null) return;
-  const ticks = this.ticks;
-
-  return {
-    result: ticks * (1 + this.durationModifier)
-  };
-}
-
-// for (const ability of Object.values(ALL_ABILITIES)) {
-//   Object.defineProperty(ability, 'calc', {
-//     enumerable: true,
-//     get() {
-//       return {
-//         damage: damageCalc.bind(this),
-//         healing: healingCalc.bind(this)
-//       };
-//     }
-//   });
-// }
-
-function attachCalcs(a: Ability) {
-  Object.defineProperty(a, 'calc', {
-    enumerable: true,
-    get() {
-      return {
-        damage: damageCalc.bind(a),
-        healing: healingCalc.bind(a),
-        duration: durationCalc.bind(a)
-      };
-    }
-  });
-  return a;
-}
-
-export default (id: string | AbilityRef, fullBody: boolean = false, meta?: DynamicObject) => {
-  const ent = entity(
-    ALL_ABILITIES,
-    typeof id === 'string' ? id : id.id,
-    typeof id === 'string' ? undefined : id.uuid,
-    fullBody,
-    typeof id === 'string'
-      ? meta?.overrides
-      : meta?.overrides
-        ? deepMerge(id.overrides || {}, meta.overrides || {})
-        : id.overrides
-  ) as Ability;
-
-  return (fullBody ? attachCalcs(ent) : ent) as Required<Ability>;
-};
diff --git a/src/constants/APP.ts b/src/constants/APP.ts
deleted file mode 100644
index b41bf986..00000000
--- a/src/constants/APP.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const COMBAT_TICK_TIME = 400;
-export const COMBAT_RING_BASE_RADIUS = 250;
-
-export const ABILITY_PRIORITY = [
-  // 'stun',
-  // 'block',
-  'stab',
-  'pierce',
-  'punch',
-  'slam',
-  'swing',
-  'whirlwind',
-  'block'
-];
diff --git a/src/constants/AVAILABLE_KEYS.ts b/src/constants/AVAILABLE_KEYS.ts
deleted file mode 100644
index de524254..00000000
--- a/src/constants/AVAILABLE_KEYS.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default [
-  'keyw',
-  'keya',
-  'keys',
-  'keyd',
-  'keyi',
-  'keyq',
-  'keye',
-  'keyz',
-  'keyx',
-  'keyc',
-  'arrowright',
-  'arrowleft',
-  'arrowdown',
-  'arrowup',
-  'escape',
-  'enter',
-  'shiftleft',
-  'shiftright',
-  'digit1',
-  'digit2',
-  'digit3',
-  'digit4',
-  'digit5',
-  'numpad1',
-  'numpad2',
-  'numpad3',
-  'numpad4',
-  'numpad5',
-  'numpad6',
-  'numpad7',
-  'numpad8',
-  'numpad9'
-].reduce((a, key) => ({ ...a, [key]: false }), {});
diff --git a/src/constants/CHARACTERS.ts b/src/constants/CHARACTERS.ts
deleted file mode 100644
index fc189bc7..00000000
--- a/src/constants/CHARACTERS.ts
+++ /dev/null
@@ -1,702 +0,0 @@
-import type { Character, CharacterRef, Race } from '@/types/character';
-import ABILITIES from '@/constants/ABILITIES';
-import type { DynamicObject } from '@/types/common';
-import entity from '@/ts/entity';
-import { deepMerge } from '@/helpers';
-import EQUIPMENT from '@/constants/EQUIPMENT';
-
-export type CharacterKey = Race | 'creature';
-
-const DEFAULT_MAX_HP = 24;
-const DEFAULT_DAMAGE = 8;
-const DEFAULT_MAX_TICKS = 12;
-
-export const DEFAULT_MODIFIERS = {
-  maxHealth: 0,
-  maxArmor: 0,
-  damage: 0,
-  resistance: 0
-};
-
-export const DEFAULT_LUCKY_STATS = {
-  criticalChance: 0.05,
-  criticalDamage: 0.5,
-  dodgeChance: 0.05,
-  blockChance: 0,
-  magicChance: 0
-};
-const DEFAULT_LIMITS = {
-  wounded: 8,
-  concussed: 8,
-  exposed: 8
-};
-
-export const DEFAULT_EQUIPMENT = {
-  mainHand: null,
-  offHand: null,
-  armor: null,
-  accessory: null,
-  trinket: null
-};
-
-const DEFAULT_NPC_EQUIPMENT = {
-  mainHand: EQUIPMENT('sword'),
-  offHand: null,
-  armor: EQUIPMENT('leatherBoots'),
-  accessory: null,
-  trinket: null
-};
-
-// !!!IMPORTANT!!!
-// Don't use { overrides } here, it breaks playable characters
-// inheriting. If "creatures" need overrides, add them to the specific creature.
-
-export const ALL_CHARACTERS = {
-  elfMale: {
-    name: 'Brawler',
-    race: 'elf',
-    image: 'elf/male-01.png',
-    size: 1.2,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'nature',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS,
-        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.04,
-        magicChance: DEFAULT_LUCKY_STATS.magicChance + 0.02
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce')]
-  },
-  elfFemale: {
-    name: 'Brawler',
-    race: 'elf',
-    image: 'elf/female-01.png',
-    size: 1.05,
-    equipment: { ...DEFAULT_EQUIPMENT, mainHand: EQUIPMENT('bow') },
-    description: '',
-    element: 'nature',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS,
-        dodgeChance: DEFAULT_LUCKY_STATS.dodgeChance + 0.02,
-        magicChance: DEFAULT_LUCKY_STATS.magicChance + 0.04
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [
-      ABILITIES('pierce'), //, false, { overrides: { ticks: 12 } }),
-      ABILITIES('pierce'),
-      ABILITIES('pierce'),
-      ABILITIES('pierce')
-    ]
-  },
-  humanMale: {
-    name: 'Brawler',
-    race: 'human',
-    image: 'human/male-01.png',
-    size: 1,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'frost',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS
-        // dodgeChance: 1
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: {
-        ...DEFAULT_MODIFIERS,
-        damage: DEFAULT_MODIFIERS.damage + 0.15,
-        resistance: DEFAULT_MODIFIERS.resistance + 0.25
-      }
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('swing'), ABILITIES('swing')]
-  },
-  humanFemale: {
-    name: 'Brawler',
-    race: 'human',
-    image: 'human/female-01.png',
-    size: 1,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'frost',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: {
-        ...DEFAULT_MODIFIERS,
-        damage: DEFAULT_MODIFIERS.damage + 0.05,
-        resistance: DEFAULT_MODIFIERS.resistance + 0.5
-      }
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [ABILITIES('swing'), ABILITIES('swing'), ABILITIES('block'), ABILITIES('shieldBash')]
-  },
-  trollMale: {
-    name: 'Brawler',
-    race: 'troll',
-    image: 'troll/male-01.png',
-    size: 1.1,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'earth',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: {
-        ...DEFAULT_MODIFIERS,
-        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.2,
-        damage: DEFAULT_MODIFIERS.damage + 0.4
-      }
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam')]
-  },
-  trollFemale: {
-    name: 'Brawler',
-    race: 'troll',
-    image: 'troll/female-01.png',
-    size: 1.1,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'earth',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      damage: DEFAULT_DAMAGE,
-      maxArmor: 0,
-      currentArmor: 0,
-      ...{
-        ...DEFAULT_LUCKY_STATS
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: {
-        ...DEFAULT_MODIFIERS,
-        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.4,
-        damage: DEFAULT_MODIFIERS.damage + 0.2
-      }
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [
-      ABILITIES('slam', false, {
-        overrides: { ticks: 3 }
-      }),
-      ABILITIES('slam', false, {
-        overrides: { ticks: 3 }
-      }),
-      ABILITIES('slam', false, {
-        overrides: { ticks: 3 }
-      }),
-      ABILITIES('slam', false, {
-        overrides: { ticks: 3 }
-      })
-    ]
-  },
-  dwarfMale: {
-    name: 'Brawler',
-    race: 'dwarf',
-    image: 'dwarf/male-01.png',
-    size: 0.8,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'fire',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: {
-        ...DEFAULT_MODIFIERS,
-        maxArmor: DEFAULT_MODIFIERS.maxArmor + 0.4,
-        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.2
-      }
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('block'), ABILITIES('shieldBash')]
-  },
-  dwarfFemale: {
-    name: 'Brawler',
-    race: 'dwarf',
-    image: 'dwarf/female-01.png',
-    size: 0.8,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'fire',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: {
-        ...DEFAULT_MODIFIERS,
-        maxArmor: DEFAULT_MODIFIERS.maxArmor + 0.5,
-        maxHealth: DEFAULT_MODIFIERS.maxHealth + 0.1
-      }
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [
-      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
-      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
-      ABILITIES('swing', false, { overrides: { ticks: 4 } })
-    ]
-  },
-  goblinMale: {
-    name: 'Brawler',
-    race: 'goblin',
-    image: 'goblin/male-01.png',
-    size: 0.8,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'lightning',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS,
-        criticalChance: DEFAULT_LUCKY_STATS.criticalChance + 0.02,
-        criticalDamage: DEFAULT_LUCKY_STATS.criticalDamage + 0.4
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab')
-    ]
-  },
-  goblinFemale: {
-    name: 'Brawler',
-    race: 'goblin',
-    image: 'goblin/female-01.png',
-    size: 1.2,
-    equipment: DEFAULT_EQUIPMENT,
-    description: '',
-    element: 'lightning',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS,
-        criticalChance: DEFAULT_LUCKY_STATS.criticalChance + 0.04,
-        criticalDamage: DEFAULT_LUCKY_STATS.criticalDamage + 0.2
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: DEFAULT_MAX_TICKS,
-    abilities: [
-      // ABILITIES('stab', false, { overrides: { ticks: 4 } }),
-      // ABILITIES('stab', false, { overrides: { ticks: 4 } }),
-      // ABILITIES('stab', false, { overrides: { ticks: 4 } })
-      ABILITIES('swing'),
-      ABILITIES('swing'),
-      ABILITIES('swing'),
-      ABILITIES('swing')
-    ]
-  },
-  // Creatures
-  succubus: {
-    name: 'Succubus',
-    race: 'creature',
-    image: 'creature/succubus.png',
-    size: 1.2,
-    equipment: DEFAULT_NPC_EQUIPMENT,
-    description:
-      'The Succubus is a deadly demon whose elegance masks her savage nature. In battle, she thrives amid chaos, lashing out with razor-sharp claws in a flurry of violent motion.<br /><br />Her signature attack is a whirling dance of destruction, spinning with unrelenting speed to strike all who dare draw near. This devastating technique carves through groups of enemies with merciless efficiency, leaving little chance for escape.',
-    element: '',
-    combatStats: {
-      maxHealth: 70,
-      currentHealth: 70,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [ABILITIES('swing'), ABILITIES('whirlwind', false, { overrides: { basic: true } })]
-  },
-  rat: {
-    name: 'Giant rat',
-    race: 'creature',
-    image: 'creature/rat.png',
-    size: 1.15,
-    equipment: DEFAULT_NPC_EQUIPMENT,
-    description:
-      'The Giant Rat is a vile and tenacious creature, driven by an insatiable hunger. Its bite is vicious and infectious, leaving deep wounds that continue to bleed long after the initial strike.<br /><br />When not attacking, it retreats to feast on nearby scraps of food. This gluttonous act rapidly restores its health, making it a persistent and frustrating foe to defeat if left unchecked',
-    element: '',
-    combatStats: {
-      maxHealth: 50,
-      currentHealth: 50,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [ABILITIES('bite'), ABILITIES('cheesyTactics'), ABILITIES('bite')]
-  },
-  undead: {
-    name: 'Undead',
-    race: 'creature',
-    image: 'creature/undead.png',
-    size: 1,
-    equipment: DEFAULT_NPC_EQUIPMENT,
-    description:
-      'The Undead is a ghastly remnant of a once-living being, now animated by dark magic. It moves with eerie silence, its cold, lifeless gaze fixed on its prey.<br /><br />Even the slightest touch from this cursed creature is lethal, sapping the strength and vitality of the living. Those who encounter it rarely survive, and those who do are never the same again.',
-    combatStats: {
-      maxHealth: 20,
-      currentHealth: 20,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab')
-    ]
-  },
-  golem: {
-    name: 'Golem',
-    race: 'creature',
-    image: 'creature/golem.png',
-    size: 1.2,
-    equipment: DEFAULT_NPC_EQUIPMENT,
-    description:
-      'The Golem is a towering sentinel of stone, crafted for war and built to endure. Its immense frame makes it a formidable presence on the battlefield, shrugging off attacks that would shatter lesser foes.<br /><br />When its armor is even partially intact, it draws upon ancient magic to restore its defenses completely, becoming nearly invulnerable once more. Only those who can deplete its armor fully stand a chance of bringing it down.',
-    element: '',
-    combatStats: {
-      maxHealth: 50,
-      currentHealth: 50,
-      maxArmor: 100,
-      currentArmor: 100,
-      damage: DEFAULT_DAMAGE,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam'), ABILITIES('harden')]
-  },
-  trainingDummy: {
-    name: 'Training Dummy',
-    race: 'creature',
-    image: 'creature/training-dummy.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-      // offHand: EQUIPMENT('shield')
-    },
-    description: '',
-    element: '',
-    combatStats: {
-      maxHealth: 20,
-      currentHealth: 20,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: 0,
-      ...{
-        ...DEFAULT_LUCKY_STATS
-        // dodgeChance: 0.5
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [ABILITIES('playingTheVictim')]
-  },
-  boar: {
-    name: 'Boar',
-    race: 'creature',
-    image: 'creature/boar.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-    },
-    description: '',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS
-        // dodgeChance: 0.6
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch')
-    ]
-  },
-  jester: {
-    name: 'Jester',
-    race: 'creature',
-    image: 'creature/jester.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-    },
-    description: '',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab'),
-      ABILITIES('stab')
-    ]
-  },
-  lostCivilian: {
-    name: 'Lost civilian',
-    race: 'creature',
-    image: 'creature/lost-civilian.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-      // mainHand: EQUIPMENT('dagger', false, { overrides: { level: 5 } })
-      // offHand: EQUIPMENT('shield')
-    },
-    description: 'This civilian took the wrong turn when going shopping and ended up in the arena.',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch')
-    ]
-  },
-  nomad: {
-    name: 'Nomad',
-    race: 'creature',
-    image: 'creature/nomad.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT,
-      accessory: EQUIPMENT('ring')
-    },
-    description:
-      'The nomad is a wanderer from the outer dunes, a survivor of endless storms and scorching suns. Cloaked in weathered leathers and cloth dyed by the sand itself, they carry the dust of a thousand miles on their shoulders. Their weapons are mismatched yet deadly — a curved blade forged from scavenged steel and a handmade bow strung with sinew. Years of solitude have honed their reflexes and instincts beyond human measure; they fight not for glory but for survival, their every motion born of necessity. Their silence speaks of exile, their gaze of battles fought in forgotten places.',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...{
-        ...DEFAULT_LUCKY_STATS,
-        dodgeChance: 0
-      },
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
-      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
-      ABILITIES('stab', false, { overrides: { ticks: 4 } })
-    ]
-  },
-  pitchforkPatrick: {
-    name: 'Pitchfork Patrick',
-    race: 'creature',
-    image: 'creature/pitchfork-patrick.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-    },
-    description: '',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch')
-    ]
-  },
-  poorestKnightInTown: {
-    name: 'Poorest Knight in Town',
-    race: 'creature',
-    image: 'creature/poorest-knight-in-town.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-    },
-    description: '',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch')
-    ]
-  },
-  sabertoothTiger: {
-    name: 'Sabertooth Tiger',
-    race: 'creature',
-    image: 'creature/sabertooth-tiger.png',
-    size: 1,
-    equipment: {
-      ...DEFAULT_NPC_EQUIPMENT
-    },
-    description: '',
-    element: '',
-    combatStats: {
-      maxHealth: DEFAULT_MAX_HP,
-      currentHealth: DEFAULT_MAX_HP,
-      maxArmor: 0,
-      currentArmor: 0,
-      damage: DEFAULT_DAMAGE,
-      ...DEFAULT_LUCKY_STATS,
-      limits: DEFAULT_LIMITS,
-      modifiers: DEFAULT_MODIFIERS
-    },
-    maxTicks: Infinity,
-    abilities: [
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch'),
-      ABILITIES('punch')
-    ]
-  }
-};
-
-export default (id: string | CharacterRef, fullBody: boolean = false, meta?: DynamicObject) =>
-  entity(
-    ALL_CHARACTERS,
-    typeof id === 'string' ? id : id.id,
-    typeof id === 'string' ? undefined : id.uuid,
-    fullBody,
-    typeof id === 'string'
-      ? meta?.overrides
-      : meta?.overrides
-        ? deepMerge(id.overrides || {}, meta.overrides || {})
-        : id.overrides
-  ) as Required<Character>;
diff --git a/src/constants/ELEMENTS.ts b/src/constants/ELEMENTS.ts
deleted file mode 100644
index 33294c8b..00000000
--- a/src/constants/ELEMENTS.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export const ALL_ELEMENTS = {
-  nature: {
-    name: 'Nature',
-    color: {
-      primary: '#8bb737',
-      secondary: '#a0ce3e'
-    }
-  },
-  earth: {
-    name: 'Earth',
-    color: {
-      primary: '#7f5322',
-      secondary: '#c68533'
-    }
-  },
-  lightning: {
-    name: 'Lightning',
-    color: {
-      primary: '#eac303',
-      secondary: '#fced60'
-    }
-  },
-  frost: {
-    name: 'Frost',
-    color: {
-      primary: '#88c6cb',
-      secondary: '#eaffff'
-    }
-  },
-  fire: {
-    name: 'Fire',
-    color: {
-      primary: '#f45f31',
-      secondary: '#f4a031'
-    }
-  }
-} as Record<string, any>;
-
-// export default (id: string | CharacterRef, fullBody: boolean = false, meta?: DynamicObject) =>
-//   entity(
-//     ALL_ELEMENTS,
-//     typeof id === 'string' ? id : id.id,
-//     typeof id === 'string' ? undefined : id.uuid,
-//     fullBody,
-//     typeof id === 'string'
-//       ? meta?.overrides
-//       : meta?.overrides
-//         ? deepMerge(id.overrides || {}, meta.overrides || {})
-//         : id.overrides
-//   ) as Character;
diff --git a/src/constants/ENV_VARS.ts b/src/constants/ENV_VARS.ts
deleted file mode 100644
index e65680f3..00000000
--- a/src/constants/ENV_VARS.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Named exports are needed to import these individually in .js-files (see `src/helpers`)
-export const WEBSOCKET_CONNECT = import.meta.env.VITE_WEBSOCKET_CONNECT;
-export const ENVIRONMENT = import.meta.env.VITE_VERCEL_ENV;
-export const AUTO_EMAIL = import.meta.env.VITE_AUTO_EMAIL;
-export const AUTO_PASSWORD = import.meta.env.VITE_AUTO_PASSWORD;
-export const IS_DEV = ENVIRONMENT === 'development';
-export const IS_PROD = ENVIRONMENT === 'production';
-export const IS_PREV = ENVIRONMENT === 'preview';
-
-// Default export is needed to expose `ENV` (see `vite.config.js`)
-export default {
-  WEBSOCKET_CONNECT,
-  ENVIRONMENT,
-  AUTO_EMAIL,
-  AUTO_PASSWORD,
-  IS_DEV,
-  IS_PROD,
-  IS_PREV
-};
diff --git a/src/constants/EQUIPMENT.ts b/src/constants/EQUIPMENT.ts
deleted file mode 100644
index eac0ec43..00000000
--- a/src/constants/EQUIPMENT.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import ABILITIES from '@/constants/ABILITIES';
-import type { Equipment, EquipmentRef } from '@/types/equipment';
-import entity from '@/ts/entity';
-import type { DynamicObject } from '@/types/common';
-import { deepAdd, deepMerge } from '@/helpers';
-
-const DEFAULT_COST = 100;
-const DEFAULT_LEVEL = 1;
-
-export const ALL_EQUIPMENT = {
-  sword: {
-    name: 'Sword',
-    description: 'A simple sword.',
-    slotsIn: 'oneHand',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [ABILITIES('swing'), ABILITIES('swing')]
-  },
-  axe: {
-    name: 'Axe',
-    description: 'A simple axe.',
-    slotsIn: 'oneHand',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [ABILITIES('swing'), ABILITIES('swing')]
-  },
-  hammer: {
-    name: 'Hammer',
-    description: 'A simple hammer.',
-    slotsIn: 'oneHand',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [
-      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
-      ABILITIES('slam', false, { overrides: { ticks: 3 } })
-    ]
-  },
-  improvedHammer: {
-    name: 'Improved Hammer',
-    description: 'An improved hammer.',
-    slotsIn: 'oneHand',
-    cost: DEFAULT_COST,
-    level: 3,
-    combatStats: {
-      damage: 10
-    },
-    abilities: [
-      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
-      ABILITIES('slam', false, { overrides: { ticks: 3 } })
-    ]
-  },
-  shield: {
-    name: 'Shield',
-    description: 'A simple shield.',
-    slotsIn: 'offHand',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      blockChance: 0.3
-    },
-    abilities: [ABILITIES('block'), ABILITIES('shieldBash')]
-  },
-  twoHandedAxe: {
-    name: 'Great Axe',
-    description: 'A mighty two-handed axe.',
-    slotsIn: 'twoHand',
-    cost: DEFAULT_COST * 2,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [
-      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
-      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
-      ABILITIES('swing', false, { overrides: { ticks: 4 } }),
-      ABILITIES('whirlwind', false, { overrides: { ticks: 4, chainLink: 4 } })
-    ]
-  },
-  twoHandedSpear: {
-    name: 'Spear',
-    description: 'A mighty two-handed spear.',
-    slotsIn: 'twoHand',
-    cost: DEFAULT_COST * 2,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [
-      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
-      ABILITIES('stab', false, { overrides: { ticks: 4 } }),
-      ABILITIES('stab', false, { overrides: { ticks: 4 } })
-    ]
-  },
-  heavyClub: {
-    name: 'Heavy Club',
-    description: "A mighty two-handed club.<br />It's slammer time!",
-    slotsIn: 'twoHand',
-    cost: DEFAULT_COST * 2,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [ABILITIES('slam'), ABILITIES('slam'), ABILITIES('slam')]
-  },
-  club: {
-    name: 'Club',
-    description: 'A simple club.',
-    slotsIn: 'oneHand',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [
-      ABILITIES('slam', false, { overrides: { ticks: 3 } }),
-      ABILITIES('slam', false, { overrides: { ticks: 3 } })
-    ]
-  },
-  greatSword: {
-    name: 'Greatsword',
-    description: 'A mighty two-handed sword.',
-    slotsIn: 'twoHand',
-    cost: DEFAULT_COST * 2,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [
-      ABILITIES('swing', false, { overrides: { ticks: 12 } })
-      // ABILITIES('swing', false, { overrides: { ticks: 4 } }),
-      // ABILITIES('swing', false, { overrides: { ticks: 4 } })
-    ]
-  },
-  bow: {
-    name: 'Bow',
-    description: 'A simple bow.',
-    slotsIn: 'twoHand',
-    cost: DEFAULT_COST * 2,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce'), ABILITIES('pierce')]
-  },
-  dagger: {
-    name: 'Dagger',
-    description: 'A really sharp dagger.',
-    slotsIn: 'oneHand',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      damage: 0
-    },
-    abilities: [ABILITIES('stab'), ABILITIES('stab'), ABILITIES('stab'), ABILITIES('lacerate')]
-  },
-  giantsHeart: {
-    name: "Giant's Heart",
-    description: 'It still pulsates oddly enough.',
-    slotsIn: 'trinket',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      maxHealth: 1,
-      damage: 1,
-      maxArmor: 1
-    },
-    abilities: [ABILITIES('demoralizingShout')]
-  },
-  leatherBoots: {
-    name: 'Leather Boots',
-    description: 'Fine protection.',
-    slotsIn: 'armor',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      maxArmor: 0
-    },
-    abilities: [ABILITIES('kick')]
-  },
-  ring: {
-    name: 'Ring',
-    description: 'A simple ring.',
-    slotsIn: 'accessory',
-    cost: DEFAULT_COST,
-    level: DEFAULT_LEVEL,
-    combatStats: {
-      maxHealth: 5,
-      damage: 1
-    },
-    abilities: []
-  }
-};
-
-// export default (id: string | EquipmentRef, fullBody: boolean = false) =>
-//   entity(
-//     ALL_EQUIPMENT,
-//     typeof id === 'string' ? id : id.id,
-//     typeof id === 'string' ? undefined : id.uuid,
-//     fullBody
-//   ) as Equipment;
-
-const applyScaling = (equipment: Equipment) => {
-  const isWeapon = ['oneHand', 'twoHand'].includes(equipment?.slotsIn);
-  if (isWeapon) {
-    const multiplier = equipment?.slotsIn === 'twoHand' ? 2 : 1;
-    const level = equipment.level || 0;
-    const combatStats = {
-      damage: level * multiplier
-    };
-
-    equipment.combatStats = deepAdd(equipment.combatStats, combatStats);
-  }
-  const isArmor = ['armor'].includes(equipment?.slotsIn);
-  if (isArmor) {
-    const level = equipment.level || 0;
-    const combatStats = {
-      maxArmor: level * 1
-    };
-
-    equipment.combatStats = deepAdd(equipment.combatStats, combatStats);
-  }
-  return equipment;
-};
-
-export default (id: string | EquipmentRef, fullBody: boolean = false, meta?: DynamicObject) =>
-  applyScaling(
-    entity(
-      ALL_EQUIPMENT,
-      typeof id === 'string' ? id : id.id,
-      typeof id === 'string' ? undefined : id.uuid,
-      fullBody,
-      typeof id === 'string'
-        ? meta?.overrides
-        : meta?.overrides
-          ? deepMerge(id.overrides || {}, meta.overrides || {})
-          : id.overrides
-    ) as Equipment
-  ) as Required<Equipment>;
diff --git a/src/constants/FIGHTS.ts b/src/constants/FIGHTS.ts
deleted file mode 100644
index 761955e9..00000000
--- a/src/constants/FIGHTS.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-import CHARACTERS from '@/constants/CHARACTERS';
-
-export const ALL_FIGHTS = [
-  {
-    id: 'broodmother',
-    name: 'Broodmother',
-    characters: [
-      CHARACTERS('trainingDummy'),
-      CHARACTERS('trainingDummy'),
-      CHARACTERS('trainingDummy')
-    ],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 2,
-    minLevel: 5,
-    maxLevel: 9,
-    loot: []
-  },
-  {
-    id: 'overgrown-dwarf',
-    name: 'Overgrown Dwarf',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 12,
-    maxLevel: 15,
-    loot: []
-  },
-  {
-    id: 'crazy-old-man',
-    name: 'Crazy Old Man',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 4,
-    maxLevel: 6,
-    loot: []
-  },
-  {
-    id: 'fired-cityguard',
-    name: 'Fired Cityguard',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 5,
-    maxLevel: 7,
-    loot: []
-  },
-  {
-    id: 'beastmaster',
-    name: 'Beastmaster',
-    characters: [CHARACTERS('trainingDummy'), CHARACTERS('trainingDummy')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 10,
-    maxLevel: 10,
-    loot: []
-  },
-  {
-    id: 'drunk-veteran',
-    name: 'Drunk Veteran',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 11,
-    maxLevel: 13,
-    loot: []
-  },
-  {
-    id: 'frenzied-bunny',
-    name: 'Frenzied Bunny',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 4,
-    maxLevel: 7,
-    loot: []
-  },
-  {
-    id: 'serious-soldier',
-    name: 'Serious Soldier',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 3,
-    maxLevel: 5,
-    loot: []
-  },
-  {
-    id: 'blind-seer',
-    name: 'Blind Seer',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 10,
-    maxLevel: 12,
-    loot: []
-  },
-  {
-    id: 'pack-of-wolves',
-    name: 'Pack of Wolves',
-    characters: [
-      CHARACTERS('trainingDummy'),
-      CHARACTERS('trainingDummy'),
-      CHARACTERS('trainingDummy')
-    ],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 8,
-    maxLevel: 10,
-    loot: []
-  },
-  {
-    id: 'tanky-triplets',
-    name: 'Tanky Triplets',
-    characters: [
-      CHARACTERS('trainingDummy'),
-      CHARACTERS('trainingDummy'),
-      CHARACTERS('trainingDummy')
-    ],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 6,
-    maxLevel: 9,
-    loot: []
-  },
-  {
-    id: 'pitchfork-patrick',
-    name: 'Pitchfork Patrick',
-    characters: [CHARACTERS('pitchforkPatrick')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 3,
-    maxLevel: 5,
-    loot: []
-  },
-  {
-    id: 'lost-civilian',
-    name: 'Lost Civilian',
-    characters: [CHARACTERS('lostCivilian')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 1,
-    maxLevel: 1,
-    loot: []
-  },
-  {
-    id: 'poorest-knight-in-town',
-    name: 'Poorest Knight in Town',
-    characters: [CHARACTERS('poorestKnightInTown')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 2,
-    maxLevel: 4,
-    loot: []
-  },
-  {
-    id: 'rhino',
-    name: 'Rhino',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 6,
-    maxLevel: 8,
-    loot: []
-  },
-  {
-    id: 'grave-guy',
-    name: 'Grave Guy',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 8,
-    maxLevel: 10,
-    loot: []
-  },
-  {
-    id: 'jester',
-    name: 'Jester',
-    characters: [CHARACTERS('jester')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 2,
-    maxLevel: 3,
-    loot: []
-  },
-  {
-    id: 'desert-greyhound',
-    name: 'Desert Greyhound',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 5,
-    maxLevel: 8,
-    loot: []
-  },
-  {
-    id: 'sabertooth-tiger',
-    name: 'Sabertooth Tiger',
-    characters: [CHARACTERS('sabertoothTiger')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 2,
-    maxLevel: 4,
-    loot: []
-  },
-  {
-    id: 'the-inventor-of-ballista',
-    name: 'The inventor of Ballista',
-    characters: [CHARACTERS('trainingDummy'), CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 9,
-    maxLevel: 11,
-    loot: []
-  },
-  {
-    id: 'elephant',
-    name: 'Elephant',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 10,
-    maxLevel: 14,
-    loot: []
-  },
-  {
-    id: 'nomad',
-    name: 'Nomad',
-    characters: [CHARACTERS('nomad')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 1,
-    maxLevel: 2,
-    loot: []
-  },
-  {
-    id: 'grizzly-bear',
-    name: 'Grizzly Bear',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 9,
-    maxLevel: 13,
-    loot: []
-  },
-  {
-    id: 'giant-scorpion',
-    name: 'Giant Scorpion',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 3,
-    maxLevel: 5,
-    loot: []
-  },
-  {
-    id: 'boar',
-    name: 'Boar',
-    characters: [CHARACTERS('boar')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 1,
-    maxLevel: 2,
-    loot: []
-  },
-  {
-    id: 'bastard-brothers',
-    name: 'Bastard Brothers',
-    characters: [CHARACTERS('trainingDummy'), CHARACTERS('trainingDummy')],
-    description: '',
-    boss: false,
-    allowedNumberOfCharacters: 1,
-    minLevel: 7,
-    maxLevel: 10,
-    loot: []
-  },
-  {
-    id: 'the-grand-champion',
-    name: 'The Grand Champion',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 15,
-    maxLevel: 15,
-    loot: []
-  },
-  {
-    id: 'the-emperor',
-    name: 'The Emperor',
-    characters: [CHARACTERS('trainingDummy')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 15,
-    maxLevel: 15,
-    loot: []
-  },
-  {
-    id: 'giant-rat',
-    name: 'Giant Rat',
-    characters: [CHARACTERS('rat')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 5,
-    maxLevel: 5,
-    loot: []
-  },
-  {
-    id: 'succubus',
-    name: 'Succubus',
-    characters: [CHARACTERS('succubus')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 16,
-    maxLevel: 25,
-    loot: []
-  },
-  {
-    id: 'undead',
-    name: 'Undead',
-    characters: [CHARACTERS('undead')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 16,
-    maxLevel: 25,
-    loot: []
-  },
-  {
-    id: 'golem',
-    name: 'Golem',
-    characters: [CHARACTERS('golem')],
-    description: '',
-    boss: true,
-    allowedNumberOfCharacters: 1,
-    minLevel: 16,
-    maxLevel: 25,
-    loot: []
-  }
-];
diff --git a/src/constants/RECRUITABLE_CHARACTERS.ts b/src/constants/RECRUITABLE_CHARACTERS.ts
deleted file mode 100644
index 07c15d36..00000000
--- a/src/constants/RECRUITABLE_CHARACTERS.ts
+++ /dev/null
@@ -1,336 +0,0 @@
-import ABILITIES from '@/constants/ABILITIES';
-import EQUIPMENT from '@/constants/EQUIPMENT';
-import CHARACTERS, { DEFAULT_EQUIPMENT } from '@/constants/CHARACTERS';
-
-const DEFAULT_ABILITIES = [
-  ABILITIES('punch'),
-  ABILITIES('punch'),
-  ABILITIES('punch'),
-  ABILITIES('punch'),
-  ABILITIES('punch'),
-  ABILITIES('punch')
-];
-
-export const RECRUITABLE_CHARACTERS = [
-  CHARACTERS('elfMale', false, {
-    overrides: {
-      name: 'Elon',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('bow', false, {
-          overrides: {
-            name: 'Basic Bow',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('pierce', false, {
-                overrides: { name: 'Basic Pierce', statusEffects: [] }
-              }),
-              ABILITIES('pierce', false, {
-                overrides: { name: 'Basic Pierce', statusEffects: [] }
-              }),
-              ABILITIES('pierce', false, {
-                overrides: { name: 'Basic Pierce', statusEffects: [] }
-              }),
-              ABILITIES('pierce', false, { overrides: { name: 'Basic Pierce', statusEffects: [] } })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('elfFemale', false, {
-    overrides: {
-      name: 'Evyn',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('sword', false, {
-          overrides: {
-            name: 'Basic Sword',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('swing', false, {
-                overrides: { name: 'Basic Swing', statusEffects: [] }
-              }),
-              ABILITIES('swing', false, {
-                overrides: { name: 'Basic Swing', statusEffects: [] }
-              })
-            ]
-          }
-        }),
-        offHand: EQUIPMENT('sword', false, {
-          overrides: {
-            name: 'Basic Sword',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('trollMale', false, {
-    overrides: {
-      name: 'Throk',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('heavyClub', false, {
-          overrides: {
-            name: 'Basic Heavy Club',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('slam', false, { overrides: { name: 'Basic Slam', statusEffects: [] } }),
-              ABILITIES('slam', false, { overrides: { name: 'Basic Slam', statusEffects: [] } }),
-              ABILITIES('slam', false, { overrides: { name: 'Basic Slam', statusEffects: [] } })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('trollFemale', false, {
-    overrides: {
-      name: 'Tabam',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('club', false, {
-          overrides: {
-            name: 'Basic Club',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('slam', false, {
-                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] }
-              }),
-              ABILITIES('slam', false, {
-                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] }
-              })
-            ]
-          }
-        }),
-        offHand: EQUIPMENT('club', false, {
-          overrides: {
-            name: 'Basic Club',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('slam', false, {
-                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] }
-              }),
-              ABILITIES('slam', false, {
-                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] }
-              })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('goblinMale', false, {
-    overrides: {
-      name: 'Grish',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('dagger', false, {
-          overrides: {
-            name: 'Basic Dagger',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
-              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
-              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } })
-            ]
-          }
-        }),
-        offHand: EQUIPMENT('dagger', false, {
-          overrides: {
-            name: 'Basic Dagger',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
-              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } }),
-              ABILITIES('stab', false, { overrides: { name: 'Basic Stab', statusEffects: [] } })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('goblinFemale', false, {
-    overrides: {
-      name: 'Gling',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('twoHandedSpear', false, {
-          overrides: {
-            name: 'Basic Spear',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('stab', false, {
-                overrides: { name: 'Basic Stab', ticks: 4, statusEffects: [] }
-              }),
-              ABILITIES('stab', false, {
-                overrides: { name: 'Basic Stab', ticks: 4, statusEffects: [] }
-              }),
-              ABILITIES('stab', false, {
-                overrides: { name: 'Basic Stab', ticks: 4, statusEffects: [] }
-              })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('humanMale', false, {
-    overrides: {
-      name: 'Hans',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('axe', false, {
-          overrides: {
-            name: 'Basic Axe',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } })
-            ]
-          }
-        }),
-        offHand: EQUIPMENT('axe', false, {
-          overrides: {
-            name: 'Basic Axe',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('humanFemale', false, {
-    overrides: {
-      name: 'Helena',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('sword', false, {
-          overrides: {
-            name: 'Basic Sword',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } }),
-              ABILITIES('swing', false, { overrides: { name: 'Basic Swing', statusEffects: [] } })
-            ]
-          }
-        }),
-        offHand: EQUIPMENT('shield', false, {
-          overrides: {
-            name: 'Basic Shield',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('block'),
-              ABILITIES('shieldBash', false, {
-                overrides: { name: 'Basic Shield Bash', statusEffects: [] }
-              })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('dwarfMale', false, {
-    overrides: {
-      name: 'Dürak',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('hammer', false, {
-          overrides: {
-            name: 'Basic Hammer',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('slam', false, {
-                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] }
-              }),
-              ABILITIES('slam', false, {
-                overrides: { name: 'Basic Slam', ticks: 3, statusEffects: [] }
-              })
-            ]
-          }
-        }),
-        offHand: EQUIPMENT('shield', false, {
-          overrides: {
-            name: 'Basic Shield',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('block'),
-              ABILITIES('shieldBash', false, {
-                overrides: { name: 'Basic Shield Bash', statusEffects: [] }
-              })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  }),
-  CHARACTERS('dwarfFemale', false, {
-    overrides: {
-      name: 'Denea',
-      equipment: {
-        ...DEFAULT_EQUIPMENT,
-        mainHand: EQUIPMENT('twoHandedAxe', false, {
-          overrides: {
-            name: 'Basic Great Axe',
-            cost: 0,
-            level: 1,
-            abilities: [
-              ABILITIES('swing', false, {
-                overrides: { name: 'Basic Swing', ticks: 4, statusEffects: [] }
-              }),
-              ABILITIES('swing', false, {
-                overrides: { name: 'Basic Swing', ticks: 4, statusEffects: [] }
-              }),
-              ABILITIES('swing', false, {
-                overrides: { name: 'Basic Swing', ticks: 4, statusEffects: [] }
-              })
-            ]
-          }
-        })
-      },
-      abilities: DEFAULT_ABILITIES,
-      combatStats: { currentHealth: 24 }
-    }
-  })
-];
diff --git a/src/constants/SFX.ts b/src/constants/SFX.ts
deleted file mode 100644
index 630139b7..00000000
--- a/src/constants/SFX.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export default {
-  swing: {
-    sfxName: 'swing',
-    duration: 1000,
-    variants: ['Simple Cut 1', 'Simple Cut 2', 'Simple Cut 3']
-  },
-  stab: {
-    sfxName: 'stab',
-    duration: 1000,
-    variants: ['Spear Stab 1', 'Spear Stab 2', 'Spear Stab 3']
-  },
-  slam: {
-    sfxName: 'slam',
-    duration: 1000,
-    variants: ['Hammer Maul 1', 'Hammer Maul 2', 'Hammer Maul 3', 'Hammer Maul 4']
-  },
-  punch: {
-    sfxName: 'punch',
-    duration: 100,
-    variants: ['Slap Style Layer (1)', 'Slap Style Layer (2)', 'Slap Style Layer (3)']
-  },
-  armorHit: {
-    sfxName: 'armorHit',
-    duration: 500,
-    variants: [
-      'Armor Layer (1)',
-      'Armor Layer (2)',
-      'Armor Layer (3)',
-      'Armor Layer (4)',
-      'Armor Layer (5)',
-      'Armor Layer (6)'
-    ]
-  },
-  bowShot: {
-    sfxName: 'bowShot',
-    duration: 800,
-    variants: ['Target Impact - Default (1)']
-  },
-  block: {
-    sfxName: 'block',
-    duration: 500,
-    variants: ['Axe Chop 1', 'Axe Chop 2', 'Axe Chop 3', 'Axe Chop 4', 'Axe Chop 5', 'Axe Chop 6']
-  },
-  dodge: {
-    sfxName: 'dodge',
-    duration: 500,
-    variants: [
-      'Swing Whoosh (1)',
-      'Swing Whoosh (2)',
-      'Swing Whoosh (3)',
-      'Swing Whoosh (4)',
-      'Swing Whoosh (5)',
-      'Swing Whoosh (6)',
-      'Swing Whoosh (7)',
-      'Swing Whoosh (8)',
-      'Swing Whoosh (9)',
-      'Swing Whoosh (10)'
-    ]
-  },
-  chew: {
-    sfxName: 'chew',
-    duration: 2000,
-    variants: ['Food Use - Buff Style 1', 'Food Use - Buff Style 2']
-  },
-  doubleCut: {
-    sfxName: 'doubleCut',
-    duration: 1200,
-    variants: ['SOW1 - Combo - Double Slash 1']
-  },
-  demoralizingShout: {
-    sfxName: 'demoralizingShout',
-    duration: 1500,
-    variants: ['Fantasy Game Buff (1)']
-  }
-} as any;
diff --git a/src/constants/STATUS_EFFECTS.ts b/src/constants/STATUS_EFFECTS.ts
deleted file mode 100644
index e8435372..00000000
--- a/src/constants/STATUS_EFFECTS.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-export default {
-  isBleeding: {
-    singleWord: 'bleed',
-    icon: 'bleeding',
-    text: 'BLEEDING',
-    animation: 'animate-bounce'
-  },
-  isStunned: {
-    singleWord: 'stun',
-    icon: 'stunned',
-    text: 'STUNNED',
-    animation: 'animate-spin'
-  },
-  isVulnerable: {
-    singleWord: 'vulnerable',
-    icon: 'vulnerable',
-    text: 'VULNERABLE',
-    animation: 'animate-pulse'
-  },
-  isWounded: {
-    singleWord: 'wound',
-    icon: 'wounded',
-    text: 'WOUNDED',
-    convertsInto: 'isBleeding',
-    animation: 'animate-pulse'
-  },
-  isConcussed: {
-    singleWord: 'concussion',
-    icon: 'concussed',
-    text: 'CONCUSSED',
-    convertsInto: 'isStunned',
-    animation: 'animate-pulse'
-  },
-  isExposed: {
-    singleWord: 'exposed',
-    icon: 'exposed',
-    text: 'EXPOSED',
-    convertsInto: 'isVulnerable',
-    animation: 'animate-pulse'
-  }
-} as Record<string, any>;
diff --git a/src/constants/VFX.ts b/src/constants/VFX.ts
deleted file mode 100644
index 9ef5b5ba..00000000
--- a/src/constants/VFX.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { VFX } from '@/types/vfx';
-
-export default {
-  basicAttackFast: {
-    vfxName: 'basicAttackFast',
-    duration: 1000
-  },
-  basicAttackRegular: {
-    vfxName: 'basicAttackRegular',
-    duration: 1500
-  },
-  basicAttackSlow: {
-    vfxName: 'basicAttackSlow',
-    duration: 2000
-  },
-  block: {
-    vfxName: 'block',
-    duration: 2000 + 250 // lingering time
-  },
-  kick: {
-    vfxName: 'kick',
-    duration: 500
-  },
-  whirlwind: {
-    vfxName: 'whirlwind',
-    duration: 500
-  },
-  // Status effects
-  hurt: {
-    vfxName: 'hurt',
-    duration: 500
-  },
-  armorHurt: {
-    vfxName: 'armorHurt',
-    duration: 500
-  },
-  attackBlocked: {
-    vfxName: 'attackBlocked',
-    duration: 340
-  },
-  attackDodged: {
-    vfxName: 'attackDodged',
-    duration: 340
-  },
-  heal: {
-    vfxName: 'heal',
-    duration: 500
-  },
-  filler: {
-    vfxName: 'filler',
-    duration: 500
-  }
-} as any;
diff --git a/src/constants/WEAPON_TYPES.ts b/src/constants/WEAPON_TYPES.ts
deleted file mode 100644
index 6419955d..00000000
--- a/src/constants/WEAPON_TYPES.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { WeaponType } from '@/types/weaponType';
-
-export default ['1h', '2h', 'offHand'] as WeaponType[];
diff --git a/src/crow.css b/src/crow.css
deleted file mode 100644
index 6c4e3c59..00000000
--- a/src/crow.css
+++ /dev/null
@@ -1,74 +0,0 @@
-crow,
-.crow {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-}
-.up,
-[up],
-.down,
-[down] {
-  height: 100%;
-}
-.up,
-[up] {
-  align-items: flex-start;
-}
-.down,
-[down] {
-  align-items: flex-end;
-}
-.left,
-[left] {
-  justify-content: flex-start;
-}
-.right,
-[right] {
-  justify-content: flex-end;
-}
-.vertical,
-[vertical] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.vertical > .up,
-[vertical] > [up],
-.vertical > .down,
-[vertical] > [down] {
-  height: auto;
-}
-.vertical.up,
-[vertical][up] {
-  justify-content: flex-start;
-}
-.vertical.down,
-[vertical][down] {
-  justify-content: flex-end;
-}
-.crow.vertical.left,
-crow[vertical][left],
-.crow.vertical > .left,
-crow[vertical] > [left],
-.crow.vertical.right,
-crow[vertical][right],
-.crow.vertical > .right,
-crow[vertical] > [right] {
-  width: 100%;
-}
-.vertical.left,
-[vertical][left] {
-  align-items: flex-start;
-}
-.vertical.right,
-[vertical][right] {
-  align-items: flex-end;
-}
-.vertical > .left,
-[vertical] > [left],
-.vertical > .right,
-[vertical] > [right] {
-  display: flex;
-}
diff --git a/src/globals.d.ts b/src/globals.d.ts
deleted file mode 100644
index da82d1bb..00000000
--- a/src/globals.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// See vite.config.js in root. This project uses sveltekit-autoimport.
-
-interface Window {
-  ws: any;
-}
-
-declare module 'async-await-websockets/client';
-declare module 'sveltekit-autoimport';
-declare module 'seedrandom';
-// declare module 'howler';
-
-// declare const Howl: (typeof import('@types/howler'))['Howl'];
-declare const Howler: (typeof import('howler'))['Howler']; // This solves for { Howler, Howl } for some reason
-declare const tw: (typeof import('tailwind-merge'))['default'];
-declare const ENV: (typeof import('@/constants/ENV_VARS'))['default'];
-declare const app: (typeof import('@/app.svelte.ts'))['default'];
-declare const onMount: import('svelte').LifecycleHook<void>;
-declare const onDestroy: import('svelte').LifecycleHook<void>;
-declare const tooltip: (typeof import('@/ts/use'))['tooltip'];
diff --git a/src/helpers.ts b/src/helpers.ts
deleted file mode 100644
index 9d620b8f..00000000
--- a/src/helpers.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-import { IS_DEV } from '@/constants/ENV_VARS';
-import type { DynamicObject } from '@/types/common';
-
-const wrapBasedOnType = (value: any) => (typeof value !== 'string' ? `{${value}}` : `"${value}"`);
-
-const generateStyles = (styles: any) =>
-  Object.entries(styles)
-    .reduce((a: any, [property, value]) => [...a, `${property}: ${value};`], [])
-    .join(' ');
-
-const formatProps = (props: any) =>
-  props.reduce(
-    (a: string, { name, defaultValue }: any) => `${a} ${name}=${wrapBasedOnType(defaultValue)}\n`,
-    ''
-  );
-
-const deepMerge = (target: DynamicObject, source: DynamicObject) => {
-  for (const key in source) {
-    if (
-      Array.isArray(source[key]) // check if it's an array
-    ) {
-      target[key] = [...source[key]]; // replace entirely with a shallow copy
-    } else if (source[key] instanceof Object && key in target && target[key] instanceof Object) {
-      deepMerge(target[key], source[key]);
-    } else {
-      target[key] = source[key];
-    }
-  }
-  return target;
-};
-
-const deepSubtract = (target: any, source: any): any => {
-  for (const key in source) {
-    if (
-      source[key] instanceof Object &&
-      key in target &&
-      target[key] instanceof Object &&
-      !Array.isArray(source[key]) &&
-      !Array.isArray(target[key])
-    ) {
-      // If both are objects, recurse
-      deepSubtract(target[key], source[key]);
-    } else if (typeof source[key] === 'number' && typeof target[key] === 'number') {
-      // If both are numbers, subtract
-      target[key] -= source[key];
-    } else {
-      // Otherwise, just set/overwrite
-      target[key] = source[key];
-    }
-  }
-  return target;
-};
-
-const deepAdd = (target: any, source: any): any => {
-  for (const key in source) {
-    if (
-      source[key] instanceof Object &&
-      key in target &&
-      target[key] instanceof Object &&
-      !Array.isArray(source[key]) &&
-      !Array.isArray(target[key])
-    ) {
-      // If both are objects, recurse
-      deepAdd(target[key], source[key]);
-    } else if (typeof source[key] === 'number' && typeof target[key] === 'number') {
-      // If both are numbers, add
-      target[key] += source[key];
-    } else {
-      // Otherwise, just set/overwrite
-      target[key] = source[key];
-    }
-  }
-  return target;
-};
-
-const range = (end = 0, start = 0) =>
-  Array(Math.abs(end - start))
-    .fill(0)
-    .map((_, i) => start + i * (end > 0 ? 1 : -1));
-
-const emptySlot = (obj: any) => typeof obj !== 'object' || !Object.keys(obj).length;
-
-const filledSlot = (obj: DynamicObject) => !emptySlot(obj);
-
-const compare = (a: any, b: any) => {
-  if (a > b) return +1;
-  if (a < b) return -1;
-  return 0;
-};
-
-// const generateID = () =>
-//   `_${
-//     Number(String(Math.random()).slice(2)) + Date.now() + Math.round(performance.now()).toString(36)
-//   }`;
-
-const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms));
-
-const getCookie = (): DynamicObject =>
-  document.cookie
-    .replaceAll(' ', '')
-    .split(';')
-    .reduce((a, b) => ({ ...a, [b.split('=')[0]]: b.split('=')[1] }), {});
-
-const recursiveLookup = (target: HTMLElement, searches: string[] = []) => {
-  if (!target) return false;
-
-  if (searches.find((search) => target.classList.contains(search))) {
-    return true;
-  }
-  if (target.parentElement) {
-    return recursiveLookup(target.parentElement, searches);
-  }
-  return false;
-};
-
-const capitalizeFirstLetter = (string: string) =>
-  `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
-
-const colorStrength = (col: any, amt: any) => {
-  let usePound = false;
-
-  if (col[0] === '#') {
-    col = col.slice(1);
-    usePound = true;
-  }
-
-  const num = parseInt(col, 16);
-
-  let r = (num >> 16) + amt;
-
-  if (r > 255) r = 255;
-  else if (r < 0) r = 0;
-
-  let b = ((num >> 8) & 0x00ff) + amt;
-
-  if (b > 255) b = 255;
-  else if (b < 0) b = 0;
-
-  let g = (num & 0x0000ff) + amt;
-
-  if (g > 255) g = 255;
-  else if (g < 0) g = 0;
-
-  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
-};
-
-const debounce = (fn: any, wait: any, maxWait: any) => {
-  let timer: any, maxTimer: any;
-
-  return function (...args: any) {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      clearTimeout(maxTimer);
-      maxTimer = null;
-      fn(...args);
-    }, wait);
-    if (maxWait && !maxTimer) {
-      maxTimer = setTimeout(() => {
-        clearTimeout(timer);
-        maxTimer = null;
-        fn(...args);
-      }, maxWait);
-    }
-  };
-};
-
-const lerp = (min: number, max: number, value: number) => {
-  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
-  return x * x * (3 - 2 * x);
-};
-
-const smoothLerp = (animStart: number, animEnd: number, animCurrent: number, reverse: boolean) => {
-  const lerped = lerp(animStart, animEnd, animCurrent);
-  return reverse ? 1 - lerped : lerped;
-};
-
-const randomNumber = (min: number, max: number, factor = Math.random()) =>
-  Math.floor(factor * (max - min + 1) + min);
-
-const stringListToArray = (string: string) =>
-  string
-    .split(',')
-    .map((segment) => segment.trim())
-    .filter((segment) => segment);
-
-const pad = (v: number) => (v < 10 ? `0${v}` : v);
-
-const intToArray = (int: number, fill: any = undefined) =>
-  Array(int)
-    .fill(0)
-    .map((_, i) => (fill !== undefined ? fill : i));
-
-const filterSplit = (array: any[], condition: any) =>
-  array.reduce(
-    ([hits, misses], item) =>
-      condition(item) ? [[...hits, item], misses] : [hits, [...misses, item]],
-    [[], []]
-  );
-
-const findNIndex = (array: any, condition: any, n = 1, searched = []) => {
-  const index = array.findIndex(condition);
-
-  if (index === -1) {
-    return index;
-  } else if (n - 1 > 0) {
-    return findNIndex(
-      array.slice(index + 1, array.length),
-      condition,
-      n - 1,
-      array.slice(0, index + 1)
-    );
-  }
-
-  return searched.length + index;
-};
-
-const readableTimestamp = (timestamp: any) => new Date(timestamp).toLocaleString();
-
-const msToTime = (ms: number) => ({
-  milliseconds: ms % 1000,
-  seconds: Math.floor((ms / 1000) % 60),
-  minutes: Math.floor((ms / (1000 * 60)) % 60),
-  hours: Math.floor((ms / (1000 * 60 * 60)) % 24),
-  days: Math.floor((ms / (1000 * 60 * 60 * 24)) % 365)
-});
-
-const upsertArray = (players: any[], nearby: any[]) =>
-  nearby.reduce((a: any[], player: any) => {
-    const index = a.findIndex(({ _id }) => _id === player._id);
-    if (index === -1) {
-      return [...a, player];
-    } else {
-      return [...a.slice(0, index), player, ...a.slice(index + 1)];
-    }
-  }, players);
-
-const fillOut = (array: any[], amount: number, fillWith = false, repeat = false) =>
-  amount > array.length || repeat
-    ? [...array, ...intToArray(amount - (repeat ? array.length % amount : array.length), fillWith)]
-    : array;
-
-const prettyNumber = (value: number) => value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
-
-const parseVersion = (versionString: string) => {
-  const [major, minor, patch] = versionString.split('.').map(Number);
-
-  return {
-    major,
-    minor,
-    patch
-  };
-};
-
-const dayAfter = (time: any) => {
-  const tomorrow = new Date(time || null);
-
-  tomorrow.setHours(IS_DEV ? tomorrow.getHours() : 0);
-  // tomorrow.setMinutes(tomorrow.getMinutes() + +IS_DEV);
-  tomorrow.setMinutes(IS_DEV ? tomorrow.getMinutes() : 0);
-  tomorrow.setSeconds(IS_DEV ? tomorrow.getSeconds() + 10 : 0);
-  tomorrow.setDate(tomorrow.getDate() + +!IS_DEV);
-
-  return tomorrow;
-};
-
-const clamp = (num: number, min: number, max: number) => Math.min(Math.max(num, min), max);
-
-const isNewerVersion = (oldVer = '0.0.0', newVer: any) => {
-  const oldParts = oldVer.split('.');
-  const newParts = newVer.split('.');
-  for (let i = 0; i < newParts.length; i++) {
-    const a = ~~newParts[i]; // parse int
-    const b = ~~oldParts[i]; // parse int
-    if (a > b) return true;
-    if (a < b) return false;
-  }
-  return false;
-};
-
-const traverse = ([step, ...steps]: any, tree: any, pointer: any = undefined) => {
-  if (!pointer) pointer = tree;
-  if (steps.length - 1) {
-    if (!pointer[step]) pointer[step] = {};
-    return traverse(steps, tree, pointer[step]);
-  }
-
-  pointer[step] = steps[0] === undefined ? '$unset' : steps[0];
-
-  return tree;
-};
-
-const byKeys = (keys: any[]) => (checkAgainst: any[]) =>
-  Object.entries(keys).every(([key, value]: any) => checkAgainst?.[key] === value);
-
-const notByKeys = (keys: any[]) => (checkAgainst: any[]) => !byKeys(keys)(checkAgainst);
-
-const reorder = (array: any[], index: number) => array.slice(index).concat(array.slice(0, index));
-
-const onlyUnique = (value: number, index: number, self: any) => self.indexOf(value) === index;
-
-function once(fn: any) {
-  return function (this: any, event: any) {
-    if (fn) fn.call(this, event);
-    fn = null;
-  };
-}
-
-function preventDefault(fn: any) {
-  return function (this: any, event: any) {
-    event.preventDefault();
-    fn.call(this, event);
-  };
-}
-
-export {
-  generateStyles,
-  formatProps,
-  range,
-  emptySlot,
-  filledSlot,
-  compare,
-  // generateID,
-  sleep,
-  getCookie,
-  recursiveLookup,
-  capitalizeFirstLetter,
-  colorStrength,
-  debounce,
-  smoothLerp,
-  randomNumber,
-  stringListToArray,
-  pad,
-  intToArray,
-  filterSplit,
-  findNIndex,
-  readableTimestamp,
-  msToTime,
-  upsertArray,
-  fillOut,
-  prettyNumber,
-  parseVersion,
-  dayAfter,
-  clamp,
-  isNewerVersion,
-  byKeys,
-  notByKeys,
-  reorder,
-  onlyUnique,
-  once,
-  preventDefault,
-  deepMerge,
-  deepAdd,
-  deepSubtract
-};
diff --git a/src/iconice-icons.json b/src/iconice-icons.json
deleted file mode 100644
index 82290df8..00000000
--- a/src/iconice-icons.json
+++ /dev/null
@@ -1,964 +0,0 @@
-{
-  "2h": {
-    "elements": [
-      "<path fill=\"var(--2h-fill-color-0, currentColor)\"  d=\"M720.418 903.097c26.475-11.178 50.891-21.474 75.601-31.476-.294-1.471-.294-2.942-.588-4.413-22.063-8.825-44.419-17.062-66.188-26.769-8.237-3.53-16.473-9.119-22.357-15.591-67.07-74.13-133.847-148.555-200.623-222.98-5.001-5.589-10.296-11.473-16.768-18.238-15.297 30.299-25.004 60.305-30.888 91.486-8.237 45.008-6.472 88.839 15.885 130.022 22.357 40.889 58.54 63.54 101.194 77.366 7.648 2.648 15.885 4.707 25.004 7.354-28.534 37.065-61.187 67.365-100.606 90.604-80.896 47.949-167.676 52.95-257.103 31.476-81.485-19.709-154.438-58.54-222.98-105.901-1.471-.883-2.648-2.648-2.942-2.942 18.533 1.177 37.359 4.118 56.186 3.236 73.248-3.824 107.077-64.423 72.365-128.846-7.06-12.943-15.591-24.71-23.239-36.477 16.179 3.236 32.359 8.237 49.126 9.413 37.948 2.648 68.835-11.473 87.074-45.596 18.533-34.124 13.532-67.953-7.648-100.017-1.765-2.942-3.53-5.589-4.707-7.06 21.18 2.059 42.949 6.178 64.717 5.589 71.483-2.353 94.428-64.129 89.133-113.843-.588-5.001-5.295-10.296-9.119-14.414-33.829-37.948-67.953-75.895-102.076-113.843-2.648-2.942-5.001-5.883-9.708-11.767 24.122-23.239 47.655-46.479 72.66-70.6 16.768 15.003 32.359 28.828 47.949 42.949 23.828 21.18 47.067 42.949 71.189 63.835 6.178 5.295 15.003 9.119 22.945 10.002 65.011 7.354 112.961-38.536 108.548-103.547-1.177-16.473-4.707-32.653-7.354-50.597 40.007 27.652 81.485 36.183 120.609 3.236 41.478-35.006 37.359-80.602 20.298-127.081 16.473 9.708 31.182 20.592 47.655 27.652 58.54 25.593 109.725-4.118 116.785-67.659 1.177-11.178 1.471-22.357.588-33.535s-3.236-22.063-5.589-35.889c6.766 10.002 12.649 17.944 18.238 26.475 47.067 72.954 84.426 150.32 98.546 236.806 20.003 122.668-15.297 226.215-108.842 309.465-5.589 4.707-11.178 9.413-17.944 15.591-4.118-12.943-7.06-24.71-11.473-35.889-32.947-84.426-100.017-122.374-190.033-108.548-35.594 5.589-69.424 16.473-107.666 35.006 6.472 3.824 11.473 5.295 15.003 8.531 78.837 70.6 157.38 141.495 235.923 212.684 5.295 4.707 9.413 11.178 12.061 17.65 9.708 22.945 18.827 46.184 27.946 69.424 1.471.588 2.942.883 4.413 1.471 11.178-25.887 22.063-51.774 33.535-78.249 38.83 100.017 77.366 199.74 117.667 303.582-101.488-41.184-201.505-80.014-302.405-119.138zM389.479 68.835c27.063 27.063 50.303 50.597 74.719 75.013-130.022 82.661-235.335 190.915-318.584 321.232-24.122-25.298-47.655-49.714-71.777-75.013 1.177-1.177 4.413-5.001 8.237-8.531 35.3-35.3 70.306-70.895 106.195-105.901 8.237-7.943 8.237-13.826 3.53-23.533-38.536-77.66-97.37-135.317-172.677-177.089C12.356 71.189 5.59 67.365.001 64.423 21.475 42.949 42.655 21.769 64.13 0c11.473 18.238 22.651 37.948 35.594 56.774 40.007 58.54 89.721 105.901 154.733 135.906 8.531 3.824 13.532 3.236 20.003-3.53 35.3-35.889 71.189-71.483 106.783-107.371 3.824-3.53 5.883-8.825 8.237-12.943z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1024,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "checkmark": {
-    "elements": [
-      "<path fill=\"var(--checkmark-fill-color-0, currentColor)\"  d=\"M96 192 0 288l192 192 320-320-96-96-224 224z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 512,
-    "viewBoxHeight": 512,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "cross": {
-    "elements": [
-      "<path fill=\"var(--cross-fill-color-0, currentColor)\"  d=\"m507.331 411.33-.006-.005L352.003 256l155.322-155.325.006-.005a15.9 15.9 0 0 0 3.656-5.708c2.123-5.688.912-12.341-3.662-16.915L433.952 4.674c-4.574-4.573-11.225-5.783-16.914-3.66a15.9 15.9 0 0 0-5.709 3.655q0 .002-.004.005L256.001 160 100.677 4.675l-.005-.005a15.9 15.9 0 0 0-5.707-3.655c-5.69-2.124-12.341-.913-16.915 3.66L4.676 78.049C.102 82.623-1.108 89.275 1.015 94.963a15.9 15.9 0 0 0 3.656 5.708l.005.005L160.001 256 4.676 411.326l-.004.005a15.9 15.9 0 0 0-3.657 5.707c-2.124 5.688-.913 12.341 3.661 16.915l73.374 73.373c4.575 4.574 11.226 5.784 16.915 3.661a15.9 15.9 0 0 0 5.708-3.656l.005-.005 155.324-155.325 155.324 155.325.006.004a15.9 15.9 0 0 0 5.707 3.657c5.689 2.123 12.342.913 16.914-3.661l73.373-73.374c4.574-4.574 5.785-11.227 3.662-16.915a15.9 15.9 0 0 0-3.657-5.707\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 512,
-    "viewBoxHeight": 512,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "dark": {
-    "elements": [
-      "<path fill=\"var(--dark-fill-color-0, currentColor)\"  d=\"M355.656 325.63c-9 1.5-18.25 2.25-27.5 2.25-92.75 0-168-75.25-168-168 0-31.75 9.25-62.75 26-89.25-66.5 19.75-114 80.75-114 153.25 0 88.25 71.75 160 160 160 48.25 0 93.5-22 123.5-58.25m50.75-21.249c-31.25 67.75-99.75 111.5-174.25 111.5-105.75 0-192-86.25-192-192 0-103.75 81.25-188 184.75-191.75 7-.25 12.75 3.75 15.25 9.75 2.75 6.25 1 13.5-3.75 18-28.5 26-44.25 61.5-44.25 100 0 75 61 136 136 136q29.625 0 57-12.75c6.25-2.75 13.25-1.5 18 3.25s6 12 3.25 18\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 448,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "down": {
-    "elements": [
-      "<path fill=\"var(--down-fill-color-0, currentColor)\"  d=\"m420.75 202-185.5 185.25a15.844 15.844 0 0 1-22.5 0L27.25 202c-6.25-6.25-6.25-16.5 0-22.75L68.75 138a15.844 15.844 0 0 1 22.5 0L224 270.75 356.75 138a15.844 15.844 0 0 1 22.5 0l41.5 41.25c6.25 6.25 6.25 16.5 0 22.75\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 448,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "info": {
-    "elements": [
-      "<path fill=\"var(--info-fill-color-0, currentColor)\"  d=\"M397.824.001c42.88 0 64.32 29.184 64.32 62.624 0 41.76-37.248 80.384-85.728 80.384-40.608 0-64.288-24-63.168-63.68 0-33.376 28.192-79.328 84.576-79.328m-131.936 640c-33.856 0-58.656-20.864-34.976-112.768l38.848-162.944c6.752-26.048 7.872-36.512 0-36.512-10.144 0-54.048 17.984-80.064 35.744l-16.896-28.16c82.304-69.952 176.992-110.944 217.632-110.944 33.824 0 39.456 40.736 22.56 103.36L368.48 499.041c-7.872 30.24-4.512 40.672 3.392 40.672 10.144 0 43.424-12.544 76.128-38.624l19.2 26.048c-80.064 81.504-167.52 112.864-201.312 112.864\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 640,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "error": {
-    "elements": [
-      "<path fill=\"var(--error-fill-color-0, currentColor)\"  d=\"M448.5 384v-64.5h-129V384zm0 127.5v-63h-129v63zm192-255v63H573q3 21 3 33V384h64.5v64.5H576V480q0 10.5-3 31.5h67.5V576h-90q-25.5 43.5-69.75 69.75T384 672t-96.75-26.25T217.5 576h-90v-64.5H195q-3-21-3-31.5v-31.5h-64.5V384H192v-31.5q0-12 3-33h-67.5v-63h90q22.5-37.5 58.5-63L223.5 141l45-45 70.5 69q22.5-4.5 45-4.5t45 4.5l70.5-69 45 45-52.5 52.5q37.5 25.5 58.5 63z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 768,
-    "viewBoxHeight": 768,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "left": {
-    "elements": [
-      "<path fill=\"var(--left-fill-color-0, currentColor)\"  d=\"M292.75 75.25 160 208l132.75 132.75a15.844 15.844 0 0 1 0 22.5l-41.5 41.5a15.844 15.844 0 0 1-22.5 0l-185.5-185.5a15.844 15.844 0 0 1 0-22.5l185.5-185.5a15.844 15.844 0 0 1 22.5 0l41.5 41.5a15.844 15.844 0 0 1 0 22.5\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 336,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.3333333333333333,
-    "fill": null
-  },
-  "light": {
-    "elements": [
-      "<path fill=\"var(--light-fill-color-0, currentColor)\"  d=\"M576 384c0-53.024-21.536-101.056-56.224-135.776S437.024 192 384 192s-101.056 21.536-135.776 56.224S192 330.976 192 384s21.536 101.056 56.224 135.776S330.976 576 384 576s101.056-21.536 135.776-56.224S576 437.024 576 384m-64 0c0 35.36-14.304 67.296-37.504 90.496S419.36 512 384 512s-67.296-14.304-90.496-37.504S256 419.36 256 384s14.304-67.296 37.504-90.496S348.64 256 384 256s67.296 14.304 90.496 37.504S512 348.64 512 384M352 32v64c0 17.664 14.336 32 32 32s32-14.336 32-32V32c0-17.664-14.336-32-32-32s-32 14.336-32 32m0 640v64c0 17.664 14.336 32 32 32s32-14.336 32-32v-64c0-17.664-14.336-32-32-32s-32 14.336-32 32M112.416 157.664l45.44 45.44c12.512 12.512 32.768 12.512 45.248 0s12.512-32.768 0-45.248l-45.44-45.44c-12.512-12.512-32.768-12.512-45.248 0s-12.512 32.768 0 45.248m452.48 452.48 45.44 45.44c12.512 12.512 32.768 12.512 45.248 0s12.512-32.768 0-45.248l-45.44-45.44c-12.512-12.512-32.768-12.512-45.248 0s-12.512 32.768 0 45.248M32 416h64c17.664 0 32-14.336 32-32s-14.336-32-32-32H32c-17.664 0-32 14.336-32 32s14.336 32 32 32m640 0h64c17.664 0 32-14.336 32-32s-14.336-32-32-32h-64c-17.664 0-32 14.336-32 32s14.336 32 32 32M157.664 655.584l45.44-45.44c12.512-12.512 12.512-32.768 0-45.248s-32.768-12.512-45.248 0l-45.44 45.44c-12.512 12.512-12.512 32.768 0 45.248s32.768 12.512 45.248 0m452.48-452.48 45.44-45.44c12.512-12.512 12.512-32.768 0-45.248s-32.768-12.512-45.248 0l-45.44 45.44c-12.512 12.512-12.512 32.768 0 45.248s32.768 12.512 45.248 0\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 768,
-    "viewBoxHeight": 768,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "logo-apeegg-simple": {
-    "elements": [
-      "<path fill=\"var(--logo-apeegg-simple-fill-color-0, currentColor)\"  d=\"M305.249 120.181C273.934 53.884 221.742 0 169.834 0 117.079 0 64.323 58.398 33.008 126.106 9.028 178.861 0 237.259 0 278.167c0 93.944 76.171 169.834 169.834 169.834s169.834-76.171 169.834-169.834c0-41.753-9.31-104.383-34.418-157.985zM132.877 390.166c-37.521.847-37.521-27.647-37.521-27.647 2.257-24.544 20.03-19.184 43.164-20.03s42.035 16.927 43.164 26.801c.847 9.874-11.284 20.03-48.806 20.877zm115.949-180.272c0 18.337 14.952 27.93 18.056 36.957 3.103 9.31 6.489 27.083-2.821 30.751-13.824 5.078-26.237-4.514-44.574-16.081s-7.617 10.721-7.617 10.721 17.773 28.493 17.773 55.295-21.441 18.337-21.441 18.337-30.468-25.108-69.683-25.108c-39.214 0-40.343 9.028-54.73 9.874-14.67.847-15.234-3.95-15.234-17.773s7.617-22.851 18.056-34.7c7.335-8.181 6.489-23.134-5.925-16.927s-37.521 15.234-38.368 0 22.287-35.265 22.287-49.934-32.161-29.904-33.854-41.471C29.34 158.268 47.678 94.51 81.532 93.664c33.008-.847 10.438 28.493 63.194 29.904h6.771c7.899-.282 21.723-.564 43.728-20.594 27.647-25.39 52.192-20.03 62.912-11.567s32.161 20.03 32.161 57.552c0 37.804-41.471 42.317-41.471 60.937z\"/>",
-      "<path fill=\"var(--logo-apeegg-simple-fill-color-1, currentColor)\"  d=\"M116.232 208.201c-12.695 1.975-29.058-9.028-34.418-12.977-.847-.564-1.975-.282-2.257.847-6.489 24.544 6.206 23.98 12.413 25.955 6.489 1.975 2.539 6.489-.282 8.181-3.385 1.693-15.799-1.128-15.799-1.128.564 7.335 14.388 5.078 20.03 4.796 1.41 0 2.821-.564 3.95-1.693 6.489-5.642 29.622-25.955 16.363-23.98zm69.4 5.643c-11.849-.282 5.078 14.67 13.542 21.723 3.103 2.539 6.771 4.232 10.721 4.796 6.489.847 15.799.847 16.081-5.642 0 0-13.259 3.103-15.799 1.128s-7.053-6.206-.282-8.181c6.489-1.975 30.186-1.411 22.569-27.93-.282 0-30.186 14.388-46.831 14.106zm-10.72 20.312c-6.206 0-34.418 28.212-34.983 33.008-.282 4.514-7.053-31.033-26.237-30.186-19.184.564-12.977 13.259-11.003 19.184s16.645 17.491 21.159 17.773c0 0-13.824-13.541-13.824-18.902s1.41-7.053 5.36-7.053 9.31 3.103 12.695 10.72c2.539 5.925 6.206 13.824 7.617 17.491.564 1.128 1.411 1.693 2.821 1.693.847 0 1.975-.564 2.257-1.128 3.95-5.642 21.441-28.776 31.879-28.776 11.849 0 7.053 12.413 3.95 14.952-3.103 2.821-9.874 7.617-20.03 9.592 0 0 13.824 3.95 29.622-11.567 15.799-14.952-3.385-26.801-11.284-26.801z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 340,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.3176470588235294,
-    "fill": null
-  },
-  "logo-apeegg": {
-    "elements": [
-      "<path fill=\"var(--logo-apeegg-fill-color-0, currentColor)\"  d=\"M305.249 120.181C273.934 53.884 221.742 0 169.834 0 117.079 0 64.323 58.398 33.008 126.106 9.028 178.861 0 237.259 0 278.167c0 93.944 76.171 169.834 169.834 169.834s169.834-76.171 169.834-169.834c0-41.753-9.31-104.383-34.418-157.985zM132.877 390.166c-37.521.847-37.521-27.647-37.521-27.647 2.257-24.544 20.03-19.184 43.164-20.03s42.035 16.927 43.164 26.801c.847 9.874-11.284 20.03-48.806 20.877zm115.949-180.272c0 18.337 14.952 27.93 18.056 36.957 3.103 9.31 6.489 27.083-2.821 30.751-13.824 5.078-26.237-4.514-44.574-16.081s-7.617 10.721-7.617 10.721 17.773 28.493 17.773 55.295-21.441 18.337-21.441 18.337-30.468-25.108-69.683-25.108c-39.214 0-40.343 9.028-54.73 9.874-14.67.847-15.234-3.95-15.234-17.773s7.617-22.851 18.056-34.7c7.335-8.181 6.489-23.134-5.925-16.927s-37.521 15.234-38.368 0 22.287-35.265 22.287-49.934-32.161-29.904-33.854-41.471C29.34 158.268 47.678 94.51 81.532 93.664c33.008-.847 10.438 28.493 63.194 29.904h6.771c7.899-.282 21.723-.564 43.728-20.594 27.647-25.39 52.192-20.03 62.912-11.567s32.161 20.03 32.161 57.552c0 37.804-41.471 42.317-41.471 60.937z\"/>",
-      "<path fill=\"var(--logo-apeegg-fill-color-1, currentColor)\"  d=\"M116.232 208.201c-12.695 1.975-29.058-9.028-34.418-12.977-.847-.564-1.975-.282-2.257.847-6.489 24.544 6.206 23.98 12.413 25.955 6.489 1.975 2.539 6.489-.282 8.181-3.385 1.693-15.799-1.128-15.799-1.128.564 7.335 14.388 5.078 20.03 4.796 1.41 0 2.821-.564 3.95-1.693 6.489-5.642 29.622-25.955 16.363-23.98zm69.4 5.643c-11.849-.282 5.078 14.67 13.542 21.723 3.103 2.539 6.771 4.232 10.721 4.796 6.489.847 15.799.847 16.081-5.642 0 0-13.259 3.103-15.799 1.128s-7.053-6.206-.282-8.181c6.489-1.975 30.186-1.411 22.569-27.93-.282 0-30.186 14.388-46.831 14.106zm-10.72 20.312c-6.206 0-34.418 28.212-34.983 33.008-.282 4.514-7.053-31.033-26.237-30.186-19.184.564-12.977 13.259-11.003 19.184s16.645 17.491 21.159 17.773c0 0-13.824-13.541-13.824-18.902s1.41-7.053 5.36-7.053 9.31 3.103 12.695 10.72c2.539 5.925 6.206 13.824 7.617 17.491.564 1.128 1.411 1.693 2.821 1.693.847 0 1.975-.564 2.257-1.128 3.95-5.642 21.441-28.776 31.879-28.776 11.849 0 7.053 12.413 3.95 14.952-3.103 2.821-9.874 7.617-20.03 9.592 0 0 13.824 3.95 29.622-11.567 15.799-14.952-3.385-26.801-11.284-26.801zm309.199-77.3H451.95l-14.388 43.446h-42.599l48.524-165.038h49.652l48.242 165.038h-42.317zM601.189 35.265c7.053 0 13.542 1.128 19.184 3.668s10.72 6.206 14.67 10.721c3.95 4.796 7.335 10.156 9.31 16.927q3.385 9.734 3.385 22.005c0 7.899-1.128 15.234-3.385 21.723s-5.36 12.131-9.31 16.927-9.028 8.463-14.67 11.003-12.131 3.95-19.184 3.95h-12.413v58.116h-37.803V35.267h50.217zm160.806 37.239h-63.758v26.801h46.831v37.239h-46.831v26.519h63.758v37.239H660.998V35.264h100.997zM502.73 279.013h-64.04v26.519h47.114v37.239h-47.113v26.519h64.04v37.239H401.452V241.773h101.279zm134.005 97.048c-2.821 3.95-6.206 7.899-10.156 11.567s-8.181 7.053-12.977 9.874-10.156 5.078-15.799 6.771-11.849 2.539-18.056 2.539h-.282c-9.874 0-18.62-1.693-26.237-4.796-7.617-3.385-13.824-7.899-18.902-13.541s-9.028-12.695-11.849-20.594-4.232-16.645-4.796-26.237v-34.136c0-8.746 1.41-17.209 3.95-25.39 2.539-7.899 6.489-14.952 11.849-20.877 5.078-5.925 11.567-10.721 19.184-14.388s16.645-5.36 26.519-5.36h.282q15.234.846 24.544 5.078c6.206 3.103 11.284 6.489 14.952 10.438s6.489 7.899 8.463 11.849q2.963 5.925 5.078 9.31l-30.468 20.312c-.847-1.693-1.693-3.385-2.539-5.642s-2.257-3.95-3.95-5.642-3.95-3.385-6.206-4.514c-2.539-1.128-5.642-1.975-9.592-1.975-7.335 0-13.259 2.539-17.491 7.335-4.232 5.078-6.489 11.567-6.489 19.748v32.161c0 3.95.564 7.617 1.975 11.284 1.411 3.385 3.103 6.489 5.36 8.746 2.257 2.539 5.078 4.514 8.181 5.925s6.489 2.257 10.156 2.257c5.078.282 9.31-.847 12.413-2.539 3.103-1.975 5.642-4.232 7.335-7.335v-8.181h-17.491v-31.879h53.32v57.834zm140.212 0c-2.821 3.95-6.206 7.899-10.156 11.567s-8.181 7.053-12.977 9.874-10.156 5.078-15.799 6.771-11.849 2.539-18.056 2.539h-.564c-9.874 0-18.62-1.693-26.237-4.796-7.617-3.385-13.824-7.899-18.902-13.541s-9.028-12.695-11.849-20.594-4.232-16.645-4.514-26.237v-34.136c0-8.746 1.41-17.209 3.95-25.39 2.539-7.899 6.489-14.952 11.849-20.877 5.078-5.925 11.567-10.721 19.184-14.388s16.645-5.36 26.519-5.36h.282q15.234.846 24.544 5.078c6.206 3.103 11.284 6.489 14.952 10.438s6.489 7.899 8.463 11.849q2.963 5.925 5.078 9.31l-30.468 20.312c-.847-1.693-1.693-3.385-2.539-5.642s-2.257-3.95-3.95-5.642-3.95-3.385-6.206-4.514c-2.539-1.128-5.642-1.975-9.592-1.975-7.335 0-13.259 2.539-17.491 7.335-4.232 5.078-6.489 11.567-6.489 19.748v32.161c0 3.95.564 7.617 1.975 11.284 1.41 3.385 3.103 6.489 5.36 8.746 2.257 2.539 5.078 4.514 8.181 5.925s6.489 2.257 10.156 2.257c5.078.282 9.31-.847 12.413-2.539 3.103-1.975 5.642-4.232 7.335-7.335v-8.181h-17.491v-31.879h53.32v57.834z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 777,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.734375,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "menu": {
-    "elements": [
-      "<path fill=\"var(--menu-fill-color-0, currentColor)\"  d=\"M96 416h576c17.664 0 32-14.336 32-32s-14.336-32-32-32H96c-17.664 0-32 14.336-32 32s14.336 32 32 32m0-192h576c17.664 0 32-14.336 32-32s-14.336-32-32-32H96c-17.664 0-32 14.336-32 32s14.336 32 32 32m0 384h576c17.664 0 32-14.336 32-32s-14.336-32-32-32H96c-17.664 0-32 14.336-32 32s14.336 32 32 32\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 768,
-    "viewBoxHeight": 768,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "right": {
-    "elements": [
-      "<path fill=\"var(--right-fill-color-0, currentColor)\"  d=\"m276.75 219.25-185.5 185.5a15.844 15.844 0 0 1-22.5 0l-41.5-41.5a15.844 15.844 0 0 1 0-22.5L160 208 27.25 75.25a15.844 15.844 0 0 1 0-22.5l41.5-41.5a15.844 15.844 0 0 1 22.5 0l185.5 185.5a15.844 15.844 0 0 1 0 22.5\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 304,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.4736842105263157,
-    "fill": null
-  },
-  "spinner-circle": {
-    "elements": [
-      "<path fill=\"var(--spinner-circle-fill-color-0, currentColor)\"  d=\"M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0m0 869.99c-198.246 0-357.99-159.744-358.81-358.81 0-198.246 160.563-358.81 358.81-358.81s358.81 160.563 358.81 358.81S710.247 869.99 512 869.99\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1024,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "success": {
-    "elements": [
-      "<path fill=\"var(--success-fill-color-0, currentColor)\"  d=\"M265.408 543.936a44.51 44.51 0 0 1-35.552-17.696L115.52 375.168c-14.88-19.616-11.008-47.552 8.64-62.432 19.68-14.944 47.616-11.008 62.496 8.64l75.232 99.328L451.04 116.96c13.024-20.864 40.544-27.264 61.472-14.24 20.896 12.992 27.328 40.512 14.272 61.44L303.296 522.88c-7.744 12.512-21.152 20.32-35.84 20.992-.704.064-1.344.064-2.048.064\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 640,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "spinner-inner": {
-    "elements": [
-      "<path fill=\"var(--spinner-inner-fill-color-0, currentColor)\"  d=\"M0 512C0 229.376 229.376 0 512 0v154.01c-198.246 0-358.81 160.563-358.81 358.81z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1024,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "warning": {
-    "elements": [
-      "<path fill=\"var(--warning-fill-color-0, currentColor)\"  d=\"M288 64v256h-64V64zm-64 384h64v-64h-64z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 512,
-    "viewBoxHeight": 512,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "up": {
-    "elements": [
-      "<path fill=\"var(--up-fill-color-0, currentColor)\"  d=\"M420.75 332.75 379.25 374a15.844 15.844 0 0 1-22.5 0L224 241.25 91.25 374a15.844 15.844 0 0 1-22.5 0l-41.5-41.25c-6.25-6.25-6.25-16.5 0-22.75l185.5-185.25a15.844 15.844 0 0 1 22.5 0L420.75 310c6.25 6.25 6.25 16.5 0 22.75\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 448,
-    "viewBoxHeight": 448,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "stun": {
-    "elements": [
-      "<path fill=\"var(--stun-fill-color-0, currentColor)\"  d=\"M105.736 933.454c47.656-8.042 97.992-15.19 147.732-25.913 19.658-4.17 39.316-14.595 56.591-25.615 38.72-24.721 47.656-62.25 27.7-103.353-14.595-30.083-37.827-53.315-62.548-75.058-46.762-41.103-99.779-73.568-155.179-101.864C85.78 584.078 50.336 568.59 15.19 551.91c-3.872-1.787-7.446-3.872-15.19-7.744 38.422 8.34 72.675 17.573 107.225 22.041 32.168 4.468 65.229 7.446 97.396 4.468 57.187-5.361 80.717-40.805 69.696-97.694-10.127-51.23-32.763-97.694-57.782-142.669C155.774 220.108 82.801 118.245 9.233 16.381 5.957 11.615 2.383 6.85.893-.001c5.659 4.766 11.616 9.233 17.275 13.999 96.205 81.61 194.197 160.54 300.826 228.449 53.91 34.252 109.012 67.016 172.454 81.908 8.638 2.085 17.573 3.574 26.508 4.17 43.188 3.276 71.186-20.551 76.547-64.931 4.766-39.018-1.787-77.143-10.425-114.969-3.276-14.297-7.148-28.593-8.34-44.081 2.085 4.468 4.468 8.935 6.553 13.701 31.87 69.696 67.611 137.01 112.586 199.26 25.019 34.55 52.421 67.611 88.461 91.737 8.638 5.659 17.871 10.723 27.7 14.297 31.572 11.914 58.676 3.872 78.93-22.934 24.424-32.465 32.763-70.888 38.124-109.906 5.063-36.635 6.85-73.866 10.425-115.267 9.829 39.912 19.062 75.653 27.7 111.395 24.721 106.332 45.571 213.557 50.038 322.867 2.978 70.888 4.468 142.669-18.467 210.876-35.444 106.629-111.693 169.475-221.301 190.92-101.566 19.956-203.43 13.105-305.294-.596-123.011-16.679-243.341-45.869-363.374-76.845-1.787-.298-3.574-1.489-2.085-.596zm390.776-251.979h-2.681c-1.787 13.701-4.17 27.402-4.766 41.103-6.553 155.179 132.542 275.509 285.636 248.107 97.694-17.573 187.644-100.672 197.473-218.62 7.744-92.631-41.103-193.005-139.393-238.874-86.674-40.507-174.241-5.063-205.217 83.099-8.935 25.615-9.531 51.528-2.085 77.738 5.957-5.361 11.318-9.829 16.382-14.595 26.508-23.232 57.187-35.146 92.928-32.168 45.571 3.574 71.186 42.294 57.187 85.78-7.148 22.636-22.041 39.614-40.507 53.613-34.848 25.913-75.355 30.38-116.161 27.104-57.187-4.468-102.162-30.083-127.777-83.695-4.766-8.935-7.446-18.764-11.02-28.593z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1018,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.005893909626719,
-    "fill": null
-  },
-  "1h": {
-    "elements": [
-      "<path fill=\"var(--1h-fill-color-0, currentColor)\"  d=\"M222.8 624.3 791.4 55.7l.4 1.4L1005 0l.4.4-57 213.2 1.4.4-568.6 568.6 86.5 86.5-77.2 77.2-130.2-130.2-189.7 189.7L0 935.2l189.7-189.7-130-130.1 77.1-77.2z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1014,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.009861932938856,
-    "fill": null
-  },
-  "1h1h": {
-    "elements": [
-      "<path fill=\"var(--1h1h-fill-color-0, currentColor)\"  d=\"m791.1 642.4 86.1-86 77.2 77.2-130.2 130.1 189.7 189.7-70.6 70.6-189.7-189.7-130.2 130.1-77.2-77.2 86.5-86.5-95.2-95.2 158.3-158.4zM9.1 18.1l213.1 57.1.4-1.4L458.7 310 300.4 468.3 64.2 232.1l1.4-.4L8.5 18.6z\"/>",
-      "<path fill=\"var(--1h1h-fill-color-1, currentColor)\"  d=\"M222.8 624.3 791.4 55.7l.4 1.4L1005 0l.4.4-57 213.2 1.4.4-568.6 568.6 86.5 86.5-77.2 77.2-130.2-130.2-189.7 189.7L0 935.2l189.7-189.7-130-130.1 77.1-77.2z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1014,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.009861932938856,
-    "fill": null
-  },
-  "spin": {
-    "elements": [
-      "<path fill=\"var(--spin-fill-color-0, currentColor)\"  d=\"M304 480c-114.7 0-207.6-99.9-208-223.3 0-26.5-21.8-48.9-48.4-48.7-26.3.2-47.6 21.6-47.6 48 0 141.4 114.6 256 256 256s249.6-108.4 255.7-244.3C506.1 386 415.2 480 304 480M256 0C118.5 0 6.4 108.4.3 244.3 5.9 126 96.8 32 208 32s207.6 99.9 208 223.3c0 26.5 21.8 48.9 48.4 48.7 26.3-.2 47.6-21.6 47.6-48C512 114.6 397.4 0 256 0\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 512,
-    "viewBoxHeight": 512,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "isBlocking": {
-    "elements": [
-      "<path fill=\"var(--isBlocking-fill-color-0, currentColor)\" d=\"M136 0C120 15.1 40 30.3 0 45.4v106c0 90.9 70 151.4 136 206z\" />",
-      "<path fill=\"var(--isBlocking-fill-color-1, currentColor)\" d=\"M136 0c16 15.1 96 30.3 136 45.4v106c0 90.9-70 151.4-136 206z\" />"
-    ],
-    "fills": [
-      "#555",
-      "#aaa"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 272,
-    "viewBoxHeight": 357.4,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.3139705882352941,
-    "fill": null
-  },
-  "punch": {
-    "elements": [
-      "<path fill=\"var(--punch-fill-color-0, currentColor)\"  d=\"M379.019 1023.979c-43.565 0-87.131.106-130.696-.106-6.652-.021-13.622-.489-19.87-2.508-14.047-4.548-20.72-16.3-20.805-34.491-.298-71.894-.744-143.787-.723-215.702 0-26.777-7.629-50.727-22.782-72.659-57.358-82.966-114.609-166.037-171.818-249.13-16.427-23.844-16.364-42.248-.234-66.581a533208 533208 0 0 1 122.111-184.037c15.556-23.419 32.387-29.093 59.249-19.806 67.155 23.228 134.373 46.264 201.336 70.023 11.476 4.08 22.484 10.349 32.6 17.214 12.623 8.564 18.085 21.676 16.449 36.956-2.083 19.615-9.669 36.935-24.29 50.536-14.663 13.643-33.003 15.981-50.77 10.626-35.15-10.541-70.278-21.74-104.217-35.617-34.47-14.09-54.149 6.12-62.203 35.15-3.634 13.07 4.42 26.394 18.85 33.301 22.016 10.519 44.245 20.571 66.368 30.878 26.479 12.347 45.351 31.24 55.53 59.44 18.744 51.853 38.784 103.261 58.271 154.859.871 2.316 1.573 4.718 2.656 6.928 4.314 8.819 12.857 12.56 21.081 9.351 7.906-3.081 10.966-10.562 7.672-20.486-9.946-29.858-20.125-59.61-30.22-89.426-4.76-14.068-9.669-28.073-14.217-42.227-2.423-7.544-7.927-17.256.51-22.186 4.888-2.848 14.982.043 21.251 3.251 37.785 19.339 75.166 39.464 112.633 59.398 27.202 14.472 44.713 11.922 66.708-9.903 13.325-13.218 26.543-26.564 40.038-39.613 5.44-5.249 11.773-14.408 19.169-9.096 4.888 3.528 6.652 14.153 6.482 21.506-1.488 63.584-19.466 122.727-51.195 177.534-10.009 17.299-22.484 33.258-34.619 49.261-11.731 15.471-18.85 32.153-18.829 51.79.106 65.178.106 130.335.043 195.513-.021 28.732-11.157 39.953-39.783 40.016-43.905.128-87.832.043-131.738.043z\"/>",
-      "<path fill=\"var(--punch-fill-color-1, currentColor)\"  d=\"M460.518 455.843c-26.224-.128-49.346-23.632-44.437-45.627 1.19-5.355 3.889-10.647 6.949-15.28a42833 42833 0 0 1 109.912-165.23c14.047-21.018 30.623-23.313 49.75-7.183 9.733 8.203 19.573 16.364 28.881 25.034 14.961 13.941 16.321 32.6 3.124 48.326-40.951 48.793-82.201 97.353-123.343 145.976-8.054 9.521-18.404 14.09-30.836 13.983zM298.731 174.75c-3.634-1.041-9.521-2.231-15.046-4.378a5486 5486 0 0 1-69.875-27.712c-21.464-8.692-26.118-23.653-13.197-42.822a9847 9847 0 0 1 56.125-82.349c13.048-18.935 30.772-22.59 50.493-10.498 21.974 13.473 43.905 27.074 65.709 40.866 18.191 11.518 21.719 28.668 9.287 46.137-14.961 21.018-30.347 41.738-45.542 62.585-8.819 12.071-21.145 17.129-37.955 18.17zM552.537 516.665c-20.401-1.233-32.961-8.373-40.378-22.654-7.098-13.686-4.08-26.586 5.292-38.508 33.662-42.8 67.133-85.771 100.817-128.55 14.323-18.191 30.793-18.85 46.413-2.083 10.371 11.114 20.805 22.186 30.815 33.641 13.261 15.174 12.347 32.812-2.805 45.882-39.613 34.215-79.332 68.323-119.518 101.858-6.673 5.568-15.917 8.097-20.635 10.413zM463.026 240.672c-1.934-.298-4.888-.255-7.459-1.211-25.459-9.457-51.088-18.51-76.165-28.881-12.942-5.334-16.406-18.446-8.416-29.986a2722 2722 0 0 1 55.615-77.483c9.287-12.475 25.289-15.577 39.039-7.863 22.165 12.453 44.075 25.353 65.667 38.763 14.132 8.777 16.661 23.122 6.8 36.467-13.856 18.765-28.179 37.169-42.545 55.53-7.969 10.179-19.02 14.217-32.536 14.663z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 705,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.6884765625,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "slash": {
-    "elements": [
-      "<path fill=\"var(--slash-fill-color-0, currentColor)\"  d=\"M105.1 72.9 78.4 41C152.9-11.5 254.3 4.2 311 74.5c38.5 47.8 47.6 114.6 24.8 171.7-1.9 4.8-7.8 17.7-10.8 21.2s-1.3 1.9-2 1l-84.8-85.8c1.6-3.9 3.7-8.2 4.8-12.2 20-72.2-53.3-139.6-122.6-105.6-2.8 1.4-13.5 9-15.2 8.1Z\"/>",
-      "<path fill=\"var(--slash-fill-color-1, currentColor)\"  d=\"m39.9 16.1 74.8 86.8 39-37.9 13.9 12.9-26.5 27.5 194 194 17 55.5-57.5-15L100.5 146l-25 25c-2.5-3.8-11.3-9.6-13.1-13s-.5-1.7.5-2.5l38-38-88.9-75L36.4 17l3.4-.8Zm73.4 125.6c5.5 6 12 4.7 19.2 4.3l171 171.1 9.5-9.5-172-173c1-8.6-1.5-15.8-10-18.9-16.4-6.1-29 13.8-17.6 26.1Z\"/>",
-      "<path fill=\"var(--slash-fill-color-2, currentColor)\"  d=\"M187 353c-76 3.9-147.1-42.7-172-114.5S5.3 127.6 37 81l33.9 28.6c-6.6 11.1-14 21.8-19.1 33.7-40.4 94.1 27.8 193.8 124.8 207.6 3.4.5 8.6-1.3 10.4 2.1\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 356,
-    "viewBoxHeight": 364,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0224719101123596,
-    "fill": null
-  },
-  "stab": {
-    "elements": [
-      "<path fill=\"var(--stab-fill-color-0, currentColor)\"  d=\"m39.7 26 42.4 29.1c11.5-7.2 21.9-15.7 33.8-22.2s16.2-8.7 18.3-8.8 1.9.3 3 1 16.9 16.4 17.4 17.6c-10.6 5.9-21.4 11.6-31.5 18.5s-16 10.5-15.5 12.5l215.7 152.8 23.2 120.8-120.6-23.9L73 108.1l-7.9 9.1c-7.8 11.4-15.4 23-20.6 35.9-1.5.4-1.7-.4-2.5-1-2-1.4-15.3-14.6-16.6-16.5s-.9-1.1-.5-2.5c.7-2.6 5.8-12.6 7.4-15.7 6.4-12.3 15-23.5 22.9-34.8L26 41.1c-3.5-3.3-9.1 4.7-12.5 2.5S2.4 26.9 1.4 24.8C-4.4 13.2 9.3-1.4 21 .1c1.4.2 21.5 12.9 22.1 14 2 3.8-4.9 9.3-3.4 11.8Zm234.8 249.1-19.5-49L94.9 84.2C94 84 84.6 92.9 84 94.1s-.7 1.2 0 2l143.3 160.8 47.2 18.3Z\"/>",
-      "<path fill=\"var(--stab-fill-color-1, currentColor)\"  d=\"m241.5 112.1 19.5 34 14.5-49 18 56 20-88 6.1 110 25.9-27v129l-10.9-57.6-93.1-66.9zM140 227.1c.7 0 4 1.2 4.6 1.7l74.2 108 59.7 10.3c.2 1.7-2.3.9-3.5 1-25.9 1.1-54 .4-80.1 0s-5.3-1.1-7.9-1.1c-18.5-.3-37 .3-55.5 0l48-32-91-18 71-14-80-19 10.5-2 62.5-2-39-13c-.2-1.5 2.6-1.7 3.6-1.9 6.6-1 13.8-.8 20.4-2.1l-18-15.5c-.3-3.1 1.1-.5 1.5-.5 5.8 0 13.6-.7 19 0Z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 346.5,
-    "viewBoxHeight": 348.7,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0063492063492063,
-    "fill": null
-  },
-  "block": {
-    "elements": [
-      "<path fill=\"var(--block-fill-color-0, currentColor)\"  d=\"M.3 89h100.3c58.9.2 116.8-7.4 171.3-30 36.9-15.3 71.9-35.6 107.2-54.5 8.2-4.4 13.3-6.9 22.3-.8C487.7 62.6 583.5 90.5 688 89c30.4-.4 60.9 0 93.2 0v21.9c0 118.9-1.6 238 .4 356.9 1.9 112.7-32 212.8-97.1 303.3-75.7 105.3-174 185.3-284.9 250.8-4.3 2.5-12.5 3.1-16.6.7C255.7 947 144.8 854 67.2 725.4 21.3 649.1 1.2 565.8.5 477.7-.4 355.9.3 234.1.3 112.3z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 782,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.763671875,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "cheese": {
-    "elements": [
-      "<path fill=\"var(--cheese-fill-color-0, currentColor)\"  d=\"M342 55.1v148.5L230.6 233c-1.4-.4-3.2-7.5-4.4-9.6-25-45.4-104.8-20.2-86.2 33.7L.5 293.1l-.5-10c11.9-.9 23.5-8.5 30.9-17.6 22.4-27.5 3.8-60.2-31-52.5v-70l49-12c-1 14.6 10.7 26.4 24.6 28.9 27.2 4.9 58.9-19.9 51.4-48.9l217-56Zm-73.2 95.3c-38.2 5.6-24.6 61.5 15 49 31.2-9.8 19.7-54.1-15-49\"/>",
-      "<path fill=\"var(--cheese-fill-color-1, currentColor)\"  d=\"M330 44.1 117 98.6c-22.3-19.5-53.3-4.1-66.7 18.3L1 129.1l88-74.5c12.6 7.4 24.5 10.1 39.1 7.1 28.1-5.7 45.8-35.7 18-55.1 0-.4 6-5.1 6.7-5.3C154.9.7 169 .1 172.5 0c45.9-.9 109.3 9.2 147.7 35.4 1.2.8 10.6 7.6 9.9 8.6Z\"/>",
-      "<path fill=\"var(--cheese-fill-color-2, currentColor)\"  d=\"M66.3 141.8c-10.1-10.1-.4-26.2 9.3-32.5 22.8-14.9 50.2 2 30.8 25.8s-29.4 17.5-40.1 6.7M215 231.1c-22.8-3-46.2-.6-62.5 17-3.7-5.8-.9-15.3 3.1-20.9 14.3-19.9 47.7-17.7 59.4 3.9M268.7 164.3c6.6-1.4 17.9.3 19.2 8.3 2.9 18.1-27.1 19.2-28.8 3.7s4.6-11 9.6-12\"/>"
-    ],
-    "fills": [
-      "#f7d857",
-      "#ccb34c",
-      "#ccb34c"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 342,
-    "viewBoxHeight": 293.1,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.1668372569089047,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "bite": {
-    "elements": [
-      "<path fill=\"var(--bite-fill-color-0, currentColor)\"  d=\"M299.7 15.2c5.4 6.2 15.6 23.8 19.8 31.7 18 33.6 24.8 69.9 22.5 108-1.4.1-1.6-2.4-2-3.5-3.2-9.5-5.6-19.4-9.2-28.8-8.3-21.3-20.5-41.5-35.5-58.8-3.5-2.1-10.4 0-12.1-1.1s-4-7.4-5.3-9.2c-5.9-7.9-13.2-15.6-22.8-18.7 23.6 37.5 19.7 86.5 17 129-2.8.5-1.6-.7-2.2-2.2-7.9-19.8-13.2-42.6-21-63-3.9-10.3-8.2-21.2-13.4-30.7-2.6-.7-11.5 7.7-13.9 9.9-68.6 62.5-68.6 129.7.5 191.5 3.8 3.4 15 13.4 19.5 13.6l41.5-88.1c-3.7 37.3-5.6 75.5-18.5 111l-9.5 18c4.7-2.8 9.3-6.4 13-10.5 3.3-3.8 12.9-21.3 14-22 3.5-2.1 10.5 3.3 14.9-2.1 1.8-2.2 5.8-11.4 7.3-14.7 10.7-23 16.7-47.3 24.8-71.2.4-1.1.6-3.6 2-3.5.5 30.1.4 59.5-5.5 89-5.7 28.5-8.1 41.9-40 46-66.1 8.4-152.1-29.7-205.8-66.2-9.8-6.6-37-25-41.9-34.1-15.3-29 7.3-82-8.8-102.2s-19.2-6-29-6c2.7-34.9 17.5-70.6 47.6-90.2 27-17.5 61-23.8 90.7-9.2C173.3 11.3 270.8-18 299.7 15.2M60 65.9h20.5c6.6 0 23.1-5.5 29.2-8.8s17.4-12.8 19.2-17.8-.4-1.2-1.2-1.6c-16.6-9.5-39.8-5.7-56.5 1.5C69.3 48.9 64.4 57.4 60 66Zm144 10c-38.6 10.1-100.6 38-108.8 81.7s-.8 16.7-.2 25.3l-4.7-9.8c-5.3-18.3-2.5-33.6 4.5-50.9.9-2.3 6.2-10.7 5.1-12.2L88 104.9c-8.9 18-15.7 35.8-14 56.5 4.7 57.3 81.2 92.2 128.5 108.5l-22.3-26.7c-27.6-38.7-32.3-79.7-9.7-122.3 8.8-16.7 21.1-31 33.5-45\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 342.4,
-    "viewBoxHeight": 336,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.019047619047619,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "slam": {
-    "elements": [
-      "<path fill=\"var(--slam-fill-color-0, currentColor)\"  d=\"M48.2 96.3c-1.2 4.1-3.3-.1-3.7-.5-2.1-1.7-12.7-11.3-14.3-10 2.9 4.6 10.9 18.2 4.4 21.9-2.6 1.4-6.2.4-7.4 3.1l36.5 13c3.8.6-1.3-5.6-1.5-7 1.7-1.3 8.2 5 10.3 6.2 7.7 4.5 20 12 28.7 9.4l32-17.5c1.2 1-9.7 8.3-10.3 8.9-1 1.1-.8 1.6-.7 3 5.1-1.1 19.8-2.7 23.1 1.5s-10.1 7-11.1 10.5l24 11c.2-3.2-2.3-5.1-2.1-8.5.5-8.8 21.4-10.4 28.1-11.5l-18.7-4.8c-6.9-3.4-1.5-11.4 1.3-16.1 9.1-15.8 23.5-27.9 34.4-42.1-5.2 2-8.7 6.2-14 8.5-3.5 1.5-11 2.4-12 3-2.9 1.7-5.7 17-14.6 17.5-7.7.5-4.3-16.3-3.9-21s1.5-2.4-1.1-2l-8 20c-2.1-1.3-.9-2.3-.9-3.8.4-14.2 2.1-23.8 1.3-38.7-.2-3 1.6-17-2.3-16.5l-43.1 21.9-7 53c-1.7-1.1-1.4-2.7-1.6-4.4-1.1-14.8 1.1-30.6-1.4-45.6-7.8-6.1-16.8-10.4-24.8-16.2s-5.6-3.2-5.7-5.8l33.4 14 49.6-21.5c.3-1.3-4.3-4.4-5.5-5.4-5.3-4.3-11.6-8.9-17.1-12.9S111.6 2.5 108.6.8s-6.5-.5-10.3.5L54.4 22.9c-4.4 4-2.3 21.3-4.8 21.8L13.5 22.1C.3 18.6-2.7 35.4 2.2 44.3c14.1 11.5 30.8 19.9 46 30l.8 1.1c.2.9-.9 1.6-.9 1.9 0 4.2.8 16.1 0 19Z\"/>",
-      "<path fill=\"var(--slam-fill-color-1, currentColor)\"  d=\"M187.7 21.8c-1.1-.2-17.3 12-17.9 13-1.3 1.9-4.4 16.3-4.3 18.7s.3 1.5 1.3 2.2c2.8-2.5 8.6-2 10.9-5s8.5-21.2 10.6-26.4 1.5-2.1-.6-2.5M190.2 107.8c-5.7.7-11.1 1.1-13 7.5 5.4 4.9 12-2.2 13-7.5\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 201.2,
-    "viewBoxHeight": 149.8,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.343124165554072,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "shieldBash": {
-    "elements": [
-      "<path fill=\"var(--shieldBash-fill-color-0, currentColor)\"  d=\"m541.6 0-24 172c32.4-11.8 64.8-23.9 97.5-35s26.3-9.5 39-13c2.5-.7 10.6-4.1 10.6.5l-114 124 121 45c-10.5 7.3-24.3 11.2-36.5 15.5-32.9 11.7-66.3 22.2-99.5 33l83.2 133.3c1 3.3 6 7.8 2.3 10.7l-148.5-76c-1.1 10.5-.5 21-1 31.5-1.6 36.9-2.3 74-4 111s-.6 9.6-1 13-4.9-.4-5.8-2.2L390.7 440c-1.3-.9-5.4 3.9-6.5 5-9.8 10.2-18.3 21.8-28 32s-12.7 13.9-14.5 12v-2.4l43.2-110.8 3.3-3.7 43 62 9.1-78.9 81.4 35-41-69.5c0-2.4 2.9-3.5 4.7-4.3 13.9-5.9 34-10.1 49.1-14.9 7.1-2.3 14.5-4.4 21.2-7.8l-64.1-25.1c-.6-3 6-11 8.1-13.8 9.3-12.3 21-24.1 30.9-36.1.8-1 6.8-7.8 6-8.5-7.9-.1-54.7 20.1-58.1 17.6s-1-2.7-1-4c1-21.6 5.1-45.2 7-67.1v-3l-2-.5-43.5 55-19-37-25.4 48.3-4.1.7c3.7-28 10.7-55.6 14.8-83.7 2.9-20 4.6-40.2 7.2-60.3l34.5 67L537.5 1.4z\"/>",
-      "<path fill=\"var(--shieldBash-fill-color-1, currentColor)\"  d=\"M.1 109.6h48c28.2 0 55.9-3.5 82-14.4 17.7-7.3 34.4-17 51.3-26.1 3.9-2.1 6.4-3.3 10.7-.4 41.3 28.2 87.2 41.6 137.3 40.8 14.6-.2 29.2 0 44.6 0V120c0 56.9-.8 114 .2 170.9.9 54-15.3 101.9-46.5 145.2-36.3 50.4-83.3 88.7-136.4 120.1-2.1 1.2-6 1.5-7.9.3-61-36.2-114.1-80.7-151.2-142.3C10.2 377.9.6 338 .2 295.8c-.4-58.3 0-116.7 0-175v-11.2z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 671.6,
-    "viewBoxHeight": 567.1,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.1842708517016398,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "bowshot": {
-    "elements": [
-      "<path fill=\"var(--bowshot-fill-color-0, currentColor)\"  d=\"m227.7 24-6.6 14.1L81.3 44l-4.4 25.3 149.9 143.2 94.7 20.8 24.2 113.8-112.6-24.9-21.6-94.4L69 76l-22.6 3.2-1.5 1.5-7.1 140.6-14 6.7 8-159.5L1.7 31l32 2-3-33 39.5 31 157.5-6.9Zm68 217-70-15 15 70 19-34.5c11.4-7.8 24.9-12.5 36-20.5m16 8-40.9 21.6-22.1 41.4 80 17z\"/>",
-      "<path fill=\"var(--bowshot-fill-color-1, currentColor)\"  d=\"M213.7 298c-21.8 3.3-43.9-.8-65-6.5-24.9-6.7-72.5-29.3-96-23-24.8 6.5-33.3 28.7-15.5 48.6 10.6 11.8 19.1 10.3 32.8 6.8s2.6-1.8 1.7.7c-8.6 24.5-40.3 22-56 5s-21.7-61.3 3-82c37.3-31.4 74.5-3.8 112.5 8.5s49.8 12.6 73 2zM322.7 72c6.7-16 2-30.1-13-38.5-16.9-9.5-30.5-5.2-38.9 12.1-12.4 25.4 7.6 63.8 15.6 89.2 8.2 26.3 14.6 51.2 12.3 79.2l-41-8c17.7-42.6-7.1-81.4-20-120.5-6.1-18.5-9.4-31.3-.8-49.9 16-34.8 52.6-45.2 85-24.3 23.4 15.1 30.3 48.7.9 60.6Z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 345.7,
-    "viewBoxHeight": 347,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0037604859704947,
-    "fill": null
-  },
-  "lacerate": {
-    "elements": [
-      "<path fill=\"var(--lacerate-fill-color-0, currentColor)\"  d=\"M0 257v-39c72.4-20.1 148.1-42.5 213.7-79.8 34.2-19.5 77.3-48.7 81.8-91.2 19.6-11.8 35.7-27.7 48-47 6.9 38.2-1.8 77.3-24.3 108.7-16.7 23.3-31.1 32.9-42 62s-13.7 41.6-13.3 51.7c.8 23.6 28.3 50.9 30.9 76.1 5 47.2-65.8 47.5-64.9 5.9.5-23.2 22.8-49.9 28.6-73.5 2-8 2.6-10-1.7-17.3-20.6-35.6-93.8-24.1-92.9 19.8s18.2 20.1 6.6 34.6c-6.8 8.5-19.2 9.6-27 2-14.9-14.5 13.8-28.7 2-42-9.9-11.2-37.1-2.2-48.6 3.5-18.5 9.3-44.6 33.2-45.8 55.3-.8 14.9 17 33.1 16.8 48.7s-22 20.1-31.4 8.4 12.5-38 13.4-54.6-6.4-25.1-13-30.8c-12-10.2-23.7-5.6-36.9-1.6Z\"/>",
-      "<path fill=\"var(--lacerate-fill-color-1, currentColor)\"  d=\"M0 204v-51.5c7.9-3.7 17.4-4.6 26-7 43-12.1 88.8-31.7 128-53s31-20.3 36.9-22.1 15.5.8 20.6.6c6.6-.2 15-1.4 21.7-2.3 16.2-2.4 31.6-7.4 46.8-13.2-12.4 36.4-53.5 60.9-86 78-60.8 32.1-128 52-194 70.5M320 130l5.5 18c5.1 14.4 24.6 38.8 11 53s-36.7 6.1-37.6-12.5c-.9-19.8 19.8-38.1 21.1-58.5\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 345.8,
-    "viewBoxHeight": 350.3,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0130133024869867,
-    "fill": null
-  },
-  "kick": {
-    "elements": [
-      "<path fill=\"var(--kick-fill-color-0, currentColor)\"  d=\"M432.2 727.4c-59.6 7.8-125.8 5.3-176.6-30.6-47.1-33.3-69.8-89.1-113.3-126.3-19.4-16.6-40.7-23.8-62.2-36-22.8-12.9-65.3-42.1-75.9-65.9-17.4-38.9 23.4-82.3 50.2-106.3 22.6-20.2 49.3-35 75.4-49.9 14 15.8 21.4 37.9 26.7 58.1 2 7.8 6.6 38.2 10 42.2 3.9 4.6 6.4 4.4 11.7 4.8 18.9 1.5 40.3-.3 60 .8 26.2 1.4 52.5 3.9 78.1 10 0 10.4 0 21 3.4 30.9 5.6 15.9 14.1 32.4 20 48.8 14.5 39.8 24.4 105.3 64.9 125.2s53.7 12.1 86.9 11.3c50-1.2 27.3 43 2.7 61.6-17.2 13-41 18.3-61.9 21.1Z\"/>",
-      "<path fill=\"var(--kick-fill-color-1, currentColor)\"  d=\"M140.2 306c27.5-18.2 49.8-43.1 69.4-69.6 47.1-72.8 91-147.8 138.6-220.3 2.4-3.6 8.6-14.1 11.6-15.7s3.9-.6 5-.3L562 152.6c5.8 4.8 3.9 9.3-.4 14.3-15.1 17.6-36.6 35.6-53.3 52.4-37.3 37.5-73.9 75.8-111.3 113.2-19.3 19.3-44.4 39.6-61.7 59.9-6.3 7.4-9.7 15.5-14.1 23.9-34-7.4-68.7-10.6-103.4-11.9s-37.6.7-39.3-.4c-2.6-1.6-2.1-8-2.8-11.1-6.6-30.6-14.7-62.8-35.4-87.2ZM543.9 524.4l141.5-104.1c3.1.2 3.1 3.7 2 6l-100.5 156 175.7-28.9c4.2-.8 7.6 3.5 3.3 6.4l-143.9 85 150.9 76.1-.8 2.9-155-8.5 50 85.5c-2.5 7-10.6-3.5-13.5-6.5-16.3-17-31.9-34.8-48-52-13.3-14.3-28.5-27.2-39.4-43.7l.3-2.3 45.6-10-52.4-28.1c-1-.5-1.7-1.2-1.7-2.4 0-3.5 45.9-33.9 51.1-39.5l-64.5 3c-1.2 0-2-.5-2.4-1.6-1.7-5 31.1-67.2 33.9-77.3-2.2-2.1-46.6 32.6-52.5 32.1s-2.3-1.6-2.8-3.2c-2.9-9.3-2.7-22.4-5.6-32.4-.4-1.5.6-1.7-2-1.5l-18.6 43c-1.4.2-3-2-3.8-3-7.1-9.3-11.1-21.9-18.6-30.9l-8.2 50.3c-.9 2.6-5.4 1.6-7.8 1.6l-36.1-198.5h3l69 115.5 55-169.5c.7-2 2.5-4.7 4.6-2.5l-7.6 183.1Z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 772.8,
-    "viewBoxHeight": 803.3,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0394668737060042,
-    "fill": null
-  },
-  "whirlwind": {
-    "elements": [
-      "<path fill=\"var(--whirlwind-fill-color-0, currentColor)\"  d=\"M147.1 0 99.8 14.2C70 27.4 36.6 44.5 23.1 76c12-12.3 24.5-22.5 39.7-30.8 49.5-27.4 118.8-37.8 174.7-31.1 41.8 5 123.5 27.7 104.9 85.7C325 154.3 229.6 171 180.6 173s-13.6.3-20 0c-1.2 0-3.7.8-3.5-1 54.8-6.2 119.1-20 155-65.5 3.3-4.2 7.4-9.4 9-14.5-14.8 15.9-33.5 28.2-53.3 37.2C208.5 155.9 127 163.5 64.6 144c-86.7-27-84.4-89.8-3.4-123.5C87.9 9.4 118.3 2.7 147.1 0M62.2 84c.9.8 13.9-8.4 16-9.5 53.2-29.4 129.3-27 185.5-7.5 10.4 3.6 20.8 7.9 30 14 11.7-24.8-18.4-39.5-37.7-45.2-47.4-14.1-124.2-7.2-167.1 18.5-11.4 6.8-23 16.6-26.7 29.8Zm97.7-17.7C130 68.1 97 76 72.8 94.2s-7.9 4-5.5 8.2 16.8 14.9 21.6 15.5 18.4-9.2 22.6-11c38.7-16.7 87.8-18.2 128.7-9.3s18.3 5.1 27.3 8.2l18.6-13.2c-36.6-20.8-84.3-28.7-126.2-26.2Zm89.2 48.7c-1.5-2.5-6.2-2.8-9-3.5-33.9-8.5-100.7-8.3-130.7 11.3-1 .6-1.8-.1-1.3 2.2 46.8 9.6 96.1 6.1 141-10\"/>",
-      "<path fill=\"var(--whirlwind-fill-color-1, currentColor)\"  d=\"M303.2 165c-31.2 32.8-74.4 58.8-119 68.5-42.3 9.2-90.9 4.2-120-31-.9-1.1-2.4-1.6-2-3.5 7.8 3.7 15.6 7.1 24 9.5 22.3 6.3 44.3 6.6 67.4 4.4l39.6-8.9-36.5-1c-39.3-3.7-77.1-17.4-106.5-44 18.6 7.9 37.3 14.9 57 19.5 44.9 10.4 94.8 12.4 140.2 4.2 19.3-3.5 38.1-9.5 55.8-17.7\"/>",
-      "<path fill=\"var(--whirlwind-fill-color-2, currentColor)\"  d=\"M221.2 234c-25.3 29.9-84.5 52-121 33.5S79.9 251.6 79.7 241c43.8 24.8 98 12.6 141.5-7M158.2 317l-13.1 30.9-29.2.2c-11.9-16.6-21.8-35.1-26.7-55 19.3 16.5 42.6 29.3 69 24Z\"/>",
-      "<path fill=\"var(--whirlwind-fill-color-3, currentColor)\"  d=\"M98.2 282c25.8 9.1 53.7 6.6 79-3-11 40.2-57.8 26-79 3\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000",
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 345.1,
-    "viewBoxHeight": 348,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0084033613445378,
-    "fill": null
-  },
-  "fillArmor": {
-    "elements": [
-      "<path fill=\"var(--fillArmor-fill-color-0, currentColor)\"  d=\"M113.1 13v35h75V13h21v37h34l-3.9 45.4 1.6 1.4 34.3 7.2-8 30-29.3-3.8-37.6 77.4 23 20.1-16.6 24.3-29.9-20.9-27 29-25.5-30h-1.4c-8.9 5.2-19.3 16.7-28 21.1-1 .5-2.3 1.5-3.5.8l-15-24.3 22.8-20.9-37.5-76.5-29.3 3.8-8.1-30 34.3-7.2 1.6-1.4-3.9-45.4h36V13h21Zm110 53h-147c-4.3 65.6 27.8 125.5 73.5 170 45.9-44.2 77.9-104.5 73.5-170\"/>",
-      "<path fill=\"var(--fillArmor-fill-color-1, currentColor)\"  d=\"M119.8 249.1c1.2-.3 2 0 2.9.8l26.9 30.1 29-30.7 30.5 22.3c-17.9 24.2-37.6 46.9-58.6 68.4-23-20-41.9-44.2-60.3-68.4l29.6-22.4ZM79.1 36h-36l2 50-36 7.6C1.4 63.1-.5 31.4.1 0h77.5l1.5 1.5zM299.1 0c.6 31.4-1.7 63-9 93.6l-36-7.6c2.5-16.5 2-33.3 2-50h-33V0zM284.1 150l-38.5 80-28.5-25.6 28-60.4zM52.1 230l-37-80 39.1-5.6L81.7 202v3zM127.1 1h47v34h-47zM210.1 80c-1.3 51.4-24.9 99.8-60.5 136-35.7-36.4-59-84.3-60.5-136z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 299.2,
-    "viewBoxHeight": 339.9,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.1360294117647058,
-    "fill": null
-  },
-  "claw": {
-    "elements": [
-      "<path fill=\"var(--claw-fill-color-0, currentColor)\"  d=\"M359.226 108.106C403.144 43.543 457.572 2.253 534.898 0c36.786-1.126 65.314 13.889 85.584 46.921 75.449 121.994 118.24 252.997 111.109 397.889-4.129 88.211-28.528 170.792-69.443 248.868-.751 1.501-2.252 2.628-8.258 9.76 9.76-254.499-109.607-440.68-294.663-595.331zM917.021 794.651c-8.258-61.185-13.513-120.493-24.774-178.674-14.639-77.701-47.296-148.645-93.466-212.457-14.639-19.894-16.891-40.54-19.144-62.686-7.883-75.073-28.528-146.768-59.683-215.836-1.501-3.378-2.252-6.757-3.378-10.886 31.155-15.765 63.437-21.396 96.845-15.765 26.276 4.504 46.545 18.393 61.185 41.666 76.95 122.745 120.493 254.874 113.361 400.891-4.129 88.211-28.152 170.792-69.067 248.868-1.126 1.877-1.501 3.754-1.877 4.88zM295.789 1024c-99.848-24.023-175.296-75.073-224.094-162.909-36.786-66.44-55.179-138.886-70.569-212.457-5.255-25.525 6.757-46.921 25.15-63.437 41.666-38.663 91.965-47.672 146.393-40.164 11.636 1.501 10.51 9.009 10.51 17.642-.375 63.812-1.877 127.625.751 191.062 3.003 73.572 31.531 139.261 68.692 201.947 13.138 21.771 27.026 43.167 43.167 68.317zM1108.833 931.284c-6.006-52.927-9.76-104.727-17.642-155.402-8.633-55.179-27.026-107.73-51.425-158.029-3.378-6.757-6.006-15.765-5.255-22.897 16.516-121.994-3.378-238.733-49.173-352.094-1.126-3.003-1.877-6.006-3.003-10.51 34.909.375 63.437 9.76 82.956 39.413 60.809 94.217 101.349 196.317 113.361 308.176q19.144 185.244-69.818 351.343z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1182,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.154296875,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "demoShout": {
-    "elements": [
-      "<path fill=\"var(--demoShout-fill-color-0, currentColor)\"  d=\"M161.2.5c68-7.7 98.3 79.9 98.3 134.2 0 55.5-34.5 152.4-106.6 132.5-54.9-15.1-74.3-96-71.5-145.5C83.9 77.8 110.4 6.3 161.2.5M159 110.6c-15.6-14.8-39.7-15.8-57.7-4.8l5.1 12.4c16.2-10 35.3-8 47.6 6.9l10.3-8.4c-2.3-1.4-3.7-4.6-5.3-6.1m75.4 7.6 4.6-12c-20.4-12.7-47.9-8.8-62.5 10.5l9.5 9.5c12.8-16.3 30.9-17 48.5-8Zm-69.2 29.3c-44.7 4.2-66.7 57.4-37.3 91.7 27.8 32.6 82 21.8 95-19 12.1-37.9-18.1-76.4-57.7-72.7M207.4 332.2l32.5-23c59.2-53.9 86.3-138.3 75.4-217.3L311 69.2c67.9 97.7 12.1 238.2-103.5 263ZM133.4 331.2c-1.1 2.3-6.8-.2-8.8-.8-111-30.8-160.5-164.6-95.7-260.2l-6.5 44.5c-2.5 83.5 34.7 176.2 111 216.5\"/>",
-      "<path fill=\"var(--demoShout-fill-color-1, currentColor)\"  d=\"M143.4 288.2c.2 1.8-2.2 1-3.3.8-9.3-1.8-23.4-8.5-31.7-13.4-61.2-36.4-79.7-118.2-39.6-177.4l-4.5 26.5c-4.2 62.5 22.5 132.4 79 163.5ZM195.4 290.2c7.1-5.5 15.2-9.6 22-15.5 40.5-34.7 60.9-91.2 59-144l-4.5-31.5c48.7 71.8 7.4 172.5-76.5 191\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 340.3,
-    "viewBoxHeight": 332.2,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.0243829018663457,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "damage": {
-    "elements": [
-      "<path fill=\"var(--damage-fill-color-0, currentColor)\"  d=\"m222.8 642.4 95.3-95.3 158.3 158.4-95.2 95.2 86.5 86.5-77.2 77.2-130.2-130.1L70.6 1024 0 953.4l189.7-189.7L59.5 633.6l77.2-77.2zM1005.4 18.6l-57.1 213.1 1.4.4-236.2 236.2L555.2 310 791.3 73.8l.4 1.4 213.1-57.1z\"/>",
-      "<path fill=\"var(--damage-fill-color-1, currentColor)\"  d=\"m877.1 538.2 77.1 77.2-130 130.1 189.7 189.7-70.6 70.6-189.7-189.7-130.2 130.2-77.2-77.2 86.5-86.5L64.1 214l1.4-.4L8.5.4l.4-.4 213.2 57.1.4-1.4 568.6 568.6z\"/>"
-    ],
-    "fills": [
-      "#15970f",
-      "#15970f"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1014,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.009861932938856,
-    "fill": null
-  },
-  "victory": {
-    "elements": [
-      "<path fill=\"var(--victory-fill-color-0, currentColor)\"  d=\"M341.732 713.688c15.86-6.583 31.42-11.67 45.485-19.151 24.837-12.867 27.231-29.625 8.678-49.973-3.591-3.89-7.78-7.78-12.269-10.773-31.719-20.947-63.738-41.894-98.151-64.337-10.473 8.977-24.238 20.947-39.5 33.814 8.977 8.379 16.757 15.86 26.333 24.837-10.473 19.75-21.246 40.397-32.916 62.84C69.424 519.181-11.671 315.698 1.496 73.612c17.356 4.189 33.814 7.481 49.674 12.269 2.992.898 5.985 6.883 6.284 10.773.898 13.466.299 26.932.299 41.594h56.556c0-18.553.299-36.507 0-54.162-.598-17.655 5.985-32.617 22.144-38.602 25.136-9.576 50.871-19.451 77.503-23.939C330.66 1.496 448.261-3.591 566.461 2.992c61.344 3.292 122.988 8.678 184.033 15.86 28.727 3.292 57.155 11.67 84.386 21.246 26.932 9.276 34.712 24.238 33.814 52.666-.598 14.962-2.095 29.625-2.992 46.083h57.155c0-12.867-.299-25.735.299-38.602.299-4.189 2.693-10.773 5.386-11.97 16.159-5.686 32.916-9.576 52.666-15.261 7.182 240.589-63.14 448.262-238.794 618.53-12.269-22.443-23.64-42.791-35.011-63.738 9.276-8.678 17.954-16.757 28.129-26.932-14.064-11.97-27.231-23.64-37.704-32.617-34.113 22.443-66.132 43.689-98.45 65.234-13.167 8.678-26.333 19.75-25.136 36.208.898 17.356 17.057 24.538 31.121 30.523 11.371 4.788 23.041 8.379 34.712 12.269-13.167 5.985-26.632 10.174-38.602 17.356-28.727 17.356-38.303 42.791-26.932 73.912 18.852 52.068 58.651 86.181 106.53 109.522 20.049 9.875 45.185 9.276 67.628 14.663 9.875 2.394 20.049 6.583 28.727 11.97 21.845 13.466 21.246 40.697-2.693 49.973-25.136 9.576-51.469 17.057-78.102 21.246-88.874 13.765-178.646 14.962-268.119 11.97-66.431-2.095-133.162-5.087-197.499-23.341-8.379-2.394-17.057-5.686-24.538-9.875-22.144-12.867-22.443-40.098 1.197-50.572 20.049-8.977 41.894-17.057 63.439-19.151 40.996-3.89 69.723-26.932 96.355-54.162 14.064-14.364 26.632-31.121 35.61-49.075 21.545-42.791 6.883-77.802-38.004-95.757-8.079-2.992-15.86-5.087-23.341-7.481zM163.684 76.605c13.765 3.89 25.136 7.78 36.807 10.473 74.212 16.458 149.62 21.246 225.328 23.041 65.833 1.197 131.666.898 197.199-3.292 53.564-3.292 106.53-12.568 159.794-20.049 11.072-1.496 21.545-6.284 36.208-10.473-117.601-49.674-558.382-46.981-655.336.299zM60.746 196.002c13.466 135.257 54.761 256.15 141.84 361.781 11.97-12.568 21.845-23.939 32.916-33.814 7.481-6.883 7.78-11.371 2.095-19.75-14.663-22.443-29.326-44.886-41.894-68.526-37.704-71.818-59.549-149.022-72.416-228.919-.598-3.89-5.386-10.174-8.678-10.174-17.356-1.197-34.712-.598-53.863-.598m717.279 355.797c82.59-105.033 128.973-222.635 141.84-355.797-15.86 0-29.625 1.197-42.791-.299-15.86-2.095-19.151 5.686-20.947 18.852-10.473 70.621-29.924 138.847-61.643 202.885-16.458 33.216-35.909 64.935-54.761 98.45 11.67 10.473 24.238 22.443 38.303 35.909z\"/>"
-    ],
-    "fills": [
-      "gold"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 981,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.9580078125,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "defeat": {
-    "elements": [
-      "<path fill=\"var(--defeat-fill-color-0, currentColor)\"  d=\"M605.632 178.688c-298.848 434.176-196.544-8.32-449.184 203.424L213.888 608H149.28L32 146.88l59.2-21.248C374.368-81.44 226.496 311.872 591.584 165.76c11.648-4.704 20.96 2.88 14.048 12.928\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 640,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "maxArmor": {
-    "elements": [
-      "<path fill=\"var(--maxArmor-fill-color-0, currentColor)\"  d=\"M516.9 851.3c-37.1 0-72.1-10.1-106.1-22.9-39.9-14.8-78.5-32.4-117.8-48.8-15.2-6.4-23.6-18.1-26.7-34-11.7-60.7-40.6-112.9-78.8-160.4-15.7-19.4-15.7-28.9.4-48.1 47.6-56.5 75-123.1 92.9-193.9 6-23.4 9.7-47.4 13.9-71.3 3.3-19 9.3-21.6 26.9-15 29.3 10.6 58.7 21 88.9 28.7 11 2.9 24.9-.4 36-4.6 16.1-6 30.9-15.2 46.1-23.2 16.1-8.4 32.2-8.4 48.5 0 14.6 7.5 29.3 15 44.1 22.7 13.7 7.1 27.8 9.5 42.6 4.9 27.6-8.8 55.4-17.2 82.5-27.1 20.7-7.7 26.3-5.5 29.3 16.1 9.3 66 26.5 129.7 57.8 188.4 14.6 26.9 32.9 52.1 51 77 11.9 16.3 13.2 27.6.2 43.2-39.9 48.8-69.3 102.6-81.6 165-2.6 13-9.3 23.4-21.2 29.3-63.1 31.8-128.2 58.5-198.1 71.5-10.1 1.5-20.5 1.5-30.9 2.4ZM613 246.2c-7.5-2.4-17.9-4.9-27.4-9.3-14.8-6.6-28.9-14.6-43-22.3-17.2-9.3-34.2-9.3-51.4.2-14.8 8.2-29.8 15.9-45 23.4-13.9 7.1-28.5 9-43.9 5.1-56.9-14.1-111-34.9-156.2-73.2-18.5-15.7-34-35.3-48.5-54.9-12.1-16.3-7.1-33.3 10.4-44.1 34.9-21.8 69.9-43.5 105-64.6 17-10.4 30-7.7 46.3 8.4 75.9 74.8 202.3 84.7 288.8 22.7 10.1-7.3 19.2-15.9 28.2-24.5C691.5-1.2 704.5-3.4 722 7.4c34.9 21.2 69.5 42.6 104.1 64.2 17.2 10.8 21 27.1 10.4 44.6-21.8 36.4-53.4 62.4-89.6 82.9-36.6 21-75.7 35.5-116.7 45-4.6.7-9.3 1.1-17.2 2.2Z\"/>",
-      "<path fill=\"var(--maxArmor-fill-color-1, currentColor)\"  d=\"M659.8 1024c-14.3.2-22.3-7.3-29.6-16.8-19.6-25.4-43.9-44.3-75-53.6-54.7-16.1-111.4 3.1-149.1 50.7-17 21.2-24.5 23.6-50.3 15-56.5-18.5-109.2-44.8-157.9-79-14.1-9.9-15.9-21.4-4.6-34.2 21-23.8 37.9-50.3 51-79.4 6-13.5 15.9-17 28.7-10.1 71 37.7 147.8 58.5 225.7 76.1 13.7 3.1 29.6 1.8 43.5-1.3 69.5-15.4 138.1-34.9 202.7-66 6-2.9 11.7-6.2 17.6-9 12.1-5.7 22.1-2.9 27.4 9.3 13.5 30.2 30.9 57.4 52.7 82.3 9.9 11.2 7.7 23.4-4.6 32-51.8 36.4-107.9 64.2-168.3 82.5-1.8.4-3.5 1.1-5.3 1.3-2.2.2-4.2.2-4.4.2ZM41.9 70.6c.2-14.8 6.2-24.3 16.8-31.1 8.4-5.3 17-10.1 25.6-15.2 15-8.8 19.6-7.3 24 9.5 11 40.8 27.8 79 51.2 114 21.4 32.2 47.4 60 80.7 80.1 9.9 6 13.5 13.9 11.5 24.9-2.9 17-5.5 34-8.6 51-3.5 19.2-14.3 24-32 14.3-69.7-38.2-116-97.1-146-169.4-9-21.8-14.6-45.2-21.6-68.2-1.1-3.8-1.1-7.9-1.5-9.9ZM993.8 69.7c-6 20.7-11 41.9-18.3 62.2-27.4 74.6-71.3 136.3-139.6 178.9-6 3.8-11.9 7.1-18.3 10.1-11.5 5.3-22.3.9-24.9-11.2-4.4-20.7-7.9-41.9-10.4-62.9-.7-5.1 3.8-13.5 8.4-16.3C862.8 184.6 901 115.6 925 36.6c.9-3.1 1.5-6.4 2.6-9.5 3.1-7.5 8.6-10.4 15.9-6.4 11.9 6.6 23.6 13.5 34.9 21.2 9.3 6.2 13.7 15.7 15.4 27.8M0 295.8c6.8-26.5 12.4-51.2 19.6-75.2 3.3-10.8 16.5-11.2 23.8-1.8 7.1 9.3 13.2 19.4 20.1 28.9 34.9 46.5 76.8 85.8 122.9 120.9 22.5 17.2 24.9 26 11.5 51.2-6 11-12.4 21.6-19.4 31.8-6.6 9.5-16.5 11.7-26 5.3-52.7-36-102.8-75-138.5-128.8-6.5-9.8-9.6-21.7-14-32.3M1033.9 295.6c-4.4 10.6-7.1 22.3-13.2 31.8-29.3 45.4-70.1 79.6-112.9 111.4-7.9 6-16.1 11.5-24.5 17-11.5 7.5-21.2 6-28.5-5.3-8.2-12.6-15.9-25.6-22.7-38.8-8.2-15.9-5.1-27.6 9.3-38.4 48.3-36.4 92.4-77 128.8-125.7 7.1-9.5 13-19.4 20.3-28.9s20.5-8.8 23.8 2c7.3 24.5 12.8 49 19.6 75Z\"/>"
-    ],
-    "fills": [
-      "#335cc1",
-      "#335cc1"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1034,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.009765625,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "maxHealth": {
-    "elements": [
-      "<path fill=\"var(--maxHealth-fill-color-0, currentColor)\"  d=\"M815.571 0C699.369 0 599.367 94.603 552.929 193.309 506.492 94.602 406.489 0 290.287 0 130.024 0-.001 130.025-.001 290.288c0 325.926 328.734 411.457 552.93 733.712 211.884-320.31 552.93-418.153 552.93-733.712C1105.859 130.025 975.834 0 815.571 0\"/>"
-    ],
-    "fills": [
-      "#9f0712"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1106,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.080078125,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "coin": {
-    "elements": [
-      "<path fill=\"var(--coin-fill-color-0, currentColor)\"  d=\"m166.4.3 11.7-.3c128.9 4.3 210 143.3 146.7 257.7-69.2 125-253.5 115.9-310.3-15C-34.1 130.9 45.2 5.3 166.4.3m119.9 286.3c83.4-83.4 49.9-226.7-61.4-264.4-123.8-41.9-242.1 74.2-204 199 34.7 113.6 181.2 149.6 265.4 65.4\"/>",
-      "<path fill=\"var(--coin-fill-color-1, currentColor)\"  d=\"M49.6 119c2.8 34.9 12.9 78.6 47.6 94.9 28.7 13.5 64.1 9.1 65 50.8s-4.4 41-11.7 47.8-23.1 1.1-32.2-2.7C31.3 274 .3 165.3 55.8 88.7 116.5 4.9 244 10.1 298.1 98.1c48.3 78.5 11.9 183.6-74.9 213.9s-20.4 8.3-27.9-1.1c-6-7.4-10.9-36.6-10.6-46.5 1.2-42.8 38-37.2 66.7-51.3 32.9-16.2 45.1-61.1 45.3-95.2-9 1.5-18.2 1.3-27.2 3.3-24 5.3-47.2 20.7-61.3 40.7.2-20.9-6.7-39.1-17.5-56.5-5.1-8.3-11.5-15.5-17-23.5-1.5-1-11.8 14.6-13 16.5-11.8 18.4-21.7 40.2-21 62.5-13.9-16.3-30.7-29.4-51.2-36.3-5.1-1.7-18.5-5.7-23.3-5.7H49.7Z\"/>",
-      "<path fill=\"var(--coin-fill-color-2, currentColor)\"  d=\"M173.3 168.2c3.4-.3 11.8 8 13.8 10.8 9.1 12.9 6.2 33-6 42.9s-8.1 5.2-14.4.4c-15.1-11.5-15.7-36.9-1.6-49.4 1.3-1.2 6.7-4.7 8.2-4.8Z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 346.8,
-    "viewBoxHeight": 346.4,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.0011547344110856,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "magicChance": {
-    "elements": [
-      "<path fill=\"var(--magicChance-fill-color-0, currentColor)\"  d=\"M497.898 69.858c-3.037 54.021-5.857 108.257-9.112 165.532 30.156-31.674 58.793-61.397 87.214-91.119.651.434 1.302.651 1.952 1.085-9.329 38.4-18.874 76.583-28.854 117.369 31.241-10.414 60.962-20.176 93.505-31.024-22.129 43.39-43.173 84.393-65.085 126.698 21.261-3.905 40.786-7.593 60.529-11.498.434.651.651 1.519 1.085 2.169-16.705 12.366-33.193 25.166-50.115 37.098-2.603 1.736-6.942 1.519-10.414 1.519-25.6.217-51.417 0-77.017.651-51.417 1.302-98.495 12.366-129.519 59.878-4.339-5.641-8.027-10.414-11.933-14.969-22.997-26.685-53.586-39.485-87.647-42.305-36.231-2.821-72.895-1.952-109.342-3.471-7.376-.217-15.403-3.254-21.695-7.376-14.536-9.762-28.203-20.827-41.438-33.41 26.251 4.773 52.502 9.546 81.573 14.969-30.807-37.749-59.661-73.112-90.685-111.078 36.881 7.376 70.291 13.885 105.654 20.827a35573 35573 0 0 0-34.495-77.885c27.119 13.451 51.417 25.6 77.234 38.4-3.905-47.078-7.81-92.203-11.715-137.329.867-.434 1.519-.867 2.386-1.085 28.421 37.749 56.841 75.715 86.563 115.417C331.93 138.195 346.9 69.206 361.653-.001h2.386c20.176 70.726 40.136 141.668 61.179 215.864 24.298-50.983 47.295-98.712 70.074-146.657l2.603.651z\"/>",
-      "<path fill=\"var(--magicChance-fill-color-1, currentColor)\"  d=\"M45.343 459.933c21.261-14.752 41.221-28.854 61.397-42.739 2.386-1.736 6.074-2.169 9.112-2.169 41.221.651 82.224.868 123.444 2.386 17.139.651 34.712 2.821 51.2 6.726 31.241 7.593 52.502 27.553 65.085 56.841 4.339 9.979 9.329 19.526 15.403 32.109 6.074-11.281 11.498-19.959 15.403-29.288 16.488-40.569 47.946-61.179 89.817-64 41.654-2.821 83.742-1.953 125.614-2.603.651 0 1.519.217 2.169 0 24.298-7.376 42.956 3.471 60.746 18.224 10.197 8.461 21.695 15.403 34.061 24.298-29.288 10.414-57.057 20.176-84.827 29.939-77.885 27.336-155.769 54.888-233.871 82.224-4.773 1.736-10.847 2.169-15.403.434-103.485-36.014-206.969-72.461-310.454-108.691-2.603-.868-4.99-2.169-8.895-3.688z\"/>",
-      "<path fill=\"var(--magicChance-fill-color-2, currentColor)\"  d=\"M732.203 479.674c3.254 9.329 6.074 17.573 9.546 27.553a230338 230338 0 0 0-296.786 103.919V640H300.475c0-5.857-.651-11.281.217-16.488 1.302-8.895-2.821-12.366-10.847-15.186-93.071-32.326-186.142-64.868-278.997-97.41-3.254-1.085-6.726-2.386-10.848-3.905 3.254-9.329 6.291-18.007 9.546-27.336 108.257 37.966 215.647 75.498 323.688 113.464-1.736 5.858-3.254 11.064-4.99 16.922h84.61c-1.519-5.424-3.038-10.414-4.773-16.488 107.607-37.749 215.214-75.498 324.122-113.898z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 742,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.159375,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "dice": {
-    "elements": [
-      "<path fill=\"var(--dice-fill-color-0, currentColor)\"  d=\"M368.226 0c-1.844-.041-3.835.416-6.361 1.272L82.015 83.445c-2.329.544-2.193 1.172-.254 2.671L330.18 284.43c4.574 3.793 6.726 4.262 13.102 2.289l278.562-96.545c6.391-2.349 6.835-2.92.255-7.251L377.613 4.084c-3.774-2.66-6.341-4.011-9.412-4.07zm-31.927 24.041c5.573-.041 11.456.571 17.553 1.908 24.393 5.348 41.692 20.254 38.542 33.199s-25.47 19.086-49.863 13.737-41.692-20.127-38.542-33.072c2.362-9.709 15.591-15.691 32.308-15.773zm-157.73 47.956c5.572-.041 11.582.571 17.681 1.908 24.393 5.348 41.565 20.127 38.415 33.072s-25.47 19.214-49.863 13.865-41.565-20.254-38.415-33.199c2.363-9.709 15.464-15.563 32.181-15.646zm239.004 12.211c5.572-.041 11.583.699 17.681 2.036 24.393 5.348 41.565 20.127 38.415 33.072s-25.47 19.086-49.863 13.737-41.565-20.127-38.415-33.072c2.363-9.708 15.464-15.691 32.183-15.773zM64.472 99.599c-.511.13-.676.928-1.017 2.544L.364 417.722c-.735 3.282-.606 4.096 2.417 6.742l239.647 206.581c5.574 5.327 6.745 5.259 7.505-1.272l69.834-320.035c1.463-4.36-.043-6.759-2.544-8.777L67.011 101.15c-1.288-1.086-2.033-1.656-2.544-1.527zm194.624 35.998c5.572-.041 11.582.571 17.681 1.908 24.393 5.348 41.565 20.128 38.415 33.072s-25.47 19.086-49.863 13.738-41.565-20.127-38.415-33.072c2.362-9.709 15.464-15.563 32.181-15.646zm241.562 10.558c5.573-.041 11.583.571 17.681 1.908 24.393 5.348 41.565 20.127 38.415 33.072s-25.47 19.214-49.863 13.865-41.565-20.254-38.415-33.199c2.363-9.708 15.464-15.563 32.182-15.646M79.996 157.73c.94-.094 1.969-.051 2.926 0 11.479.608 23.909 11.366 31.164 28.62 9.674 23.006 6.448 48.826-7.123 57.622s-32.43-2.688-42.102-25.694c-9.674-23.006-6.449-48.826 7.123-57.622 2.544-1.649 5.194-2.647 8.014-2.926zm262.168 41.467c5.573-.04 11.583.571 17.681 1.908 24.393 5.347 41.565 20.127 38.415 33.072s-25.47 19.086-49.863 13.738-41.565-20.127-38.415-33.072c2.362-9.709 15.464-15.563 32.181-15.646zm292.694 8.777c-.535.11-1.287.298-2.163.636l-286.081 99.236c-5.827 2.399-5.652 3.378-6.614 7.759l-69.707 319.026c-.237 4.697-1.967 6.834 3.562 4.325l281.886-105.323c5.469-2.617 6.518-3.076 7.123-8.395l73.141-314.57c.606-2.216.459-3.006-1.145-2.671zm-46.429 51.771c8.055.13 14.376 4.048 17.173 11.576 5.592 15.054-5.177 39.147-24.168 53.805s-38.928 14.291-44.52-.763 5.176-39.148 24.168-53.807c9.496-7.329 19.294-10.942 27.348-10.813zm-346.748 27.602c11.624.297 24.304 11.223 31.672 28.748 9.674 23.006 6.576 48.826-6.996 57.622s-32.43-2.815-42.102-25.822c-9.674-23.006-6.449-48.699 7.123-57.494 2.545-1.649 5.193-2.647 8.014-2.926.764-.079 1.515-.146 2.289-.126zm-102.142 36.889c11.624.298 24.304 11.223 31.673 28.748 9.674 23.006 6.576 48.826-6.996 57.622s-32.43-2.815-42.102-25.822c-9.674-23.006-6.448-48.699 7.123-57.494 2.544-1.649 5.193-2.647 8.014-2.926.764-.079 1.515-.146 2.29-.126zM38.923 360.741c.939-.094 1.969-.048 2.926 0 11.479.607 23.782 11.493 31.037 28.747 9.674 23.006 6.576 48.699-6.996 57.494s-32.43-2.688-42.103-25.694-6.449-48.826 7.123-57.622c2.545-1.649 5.194-2.647 8.014-2.926zm442.156 30.528c7.882.256 14.165 4.166 16.917 11.576 5.593 15.054-5.304 39.147-24.296 53.805s-38.928 14.291-44.52-.763 5.304-39.147 24.296-53.805c8.309-6.413 16.779-9.986 24.168-10.685a26.5 26.5 0 0 1 3.434-.126zM195.26 493.413c.94-.094 1.969-.048 2.926 0 11.479.607 23.909 11.366 31.164 28.62 9.674 23.006 6.449 48.826-7.123 57.622s-32.303-2.688-41.976-25.694-6.576-48.826 6.996-57.622c2.545-1.649 5.194-2.646 8.014-2.926zm169.304 33.071c8.055.13 14.376 3.921 17.172 11.448 5.592 15.054-5.176 39.147-24.168 53.805s-38.928 14.418-44.52-.636 5.176-39.147 24.168-53.807c9.496-7.329 19.294-10.942 27.348-10.812z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 636,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0062893081761006,
-    "fill": null
-  },
-  "dodgeChance": {
-    "elements": [
-      "<path fill=\"var(--dodgeChance-fill-color-0, currentColor)\"  d=\"M570.938 621.746c-134.549 54.949-330.256-18.254-364.881-168.986-12.984 4.516-26.157 8.28-38.765 13.549-8.28 3.576-12.984 1.694-18.254-4.892-21.641-26.721-43.658-53.255-65.675-80.164 9.786-12.42 18.065-23.334 25.216-32.555 30.485 8.468 59.653 16.748 88.821 24.652 9.033 2.446 18.442 3.952 27.663 5.081 5.457.752 7.527 2.822 9.032 8.468 3.199 12.42 8.092 24.652 12.608 37.636 8.844-4.893 15.807-8.468 20.7-11.291-3.952-17.877-7.151-34.813-11.479-51.561-.564-2.446-5.834-4.704-9.221-5.457-25.028-5.457-50.621-9.409-75.272-15.807-37.636-9.786-73.578-23.146-101.806-51.749-10.35-10.538-18.254-22.582-20.888-39.518 64.922 31.426 130.597 55.137 202.67 60.782.564-4.328.941-8.092 1.318-12.044.564-3.952.941-8.092 1.506-12.232-18.065-3.011-35.566-5.269-53.067-8.844-41.588-8.28-82.046-21.452-119.494-41.211-26.345-13.926-45.916-36.507-59.089-63.981-1.129-2.258-1.317-5.081-2.634-9.597 74.331 45.916 152.238 74.331 238.612 81.67 1.129-8.656 2.07-16.372 3.011-24.275-20.888-3.576-41.588-6.21-62.099-10.538-44.599-9.409-87.88-24.087-127.209-47.045-29.921-17.501-53.443-42.341-63.605-77.154-.376-1.506-.564-3.011-.941-5.834 82.046 54.761 170.868 88.256 267.592 105.569 1.506-8.28 3.199-15.995 4.704-24.463-19.194-4.328-37.824-8.092-56.266-12.796-70.379-18.442-137.183-45.727-197.401-86.939C11.291 49.87 1.317 35.568 0 16.563c-.188-1.882.376-3.576.564-6.398 106.51 65.675 226.381 90.514 346.251 121.564-28.415 44.411-44.222 92.584-47.233 144.711-3.011 51.749 4.704 102.182 16.748 152.99 7.527-1.506 14.114-2.822 20.888-4.328 1.129-.188 2.258-1.129 2.822-1.506-4.328-25.404-9.409-50.244-12.608-75.272-6.774-54.196-3.952-107.827 17.877-158.824 6.962-15.995 16.184-31.05 24.84-46.104 5.269-9.221 12.044-17.501 19.006-27.474-14.302-3.764-27.851-7.151-42.152-10.914 6.21-7.528 12.42-14.114 17.501-21.452 17.501-24.84 34.625-49.867 52.126-74.707 2.258-3.199 6.774-7.151 10.35-7.151C498.488.757 569.997.38 641.505.004c1.129 0 2.446.376 4.516.752V15.81c0 38.577-.188 77.154.188 115.731 0 6.963-2.07 10.162-8.656 12.796-92.584 37.259-171.056 93.714-234.096 171.432-20.512 25.404-20.512 25.404-10.35 56.454 23.522 72.261 57.207 138.877 109.332 195.143 19.571 21.076 41.964 39.141 68.498 54.384z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 646,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1.009375,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "criticalChance": {
-    "elements": [
-      "<path fill=\"var(--criticalChance-fill-color-0, currentColor)\"  d=\"m364.101 544.969-107.956-96.922-141.02 33.966 58.846-132.582L-.005 171.272l242.413 69.446L360.567 0l6.31 272.268 219.048 52.247-210.502 75.864z\"/>",
-      "<path fill=\"var(--criticalChance-fill-color-1, currentColor)\"  d=\"M549.868 513.816 312.395 428.54 198.31 640.016l12.44-246.884-108.496-56.574 107.306-53.581 16.009-122.883 84.951 90.251 118.376-19.399-54.807 109.362z\"/>"
-    ],
-    "fills": [
-      "#000",
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 586,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0921501706484642,
-    "fill": null
-  },
-  "criticalDamage": {
-    "elements": [
-      "<path fill=\"var(--criticalDamage-fill-color-0, currentColor)\"  d=\"M66.085 583.409c29.785-5.026 61.245-9.494 92.333-16.196 12.286-2.606 24.572-9.122 35.369-16.009 24.2-15.451 29.785-38.906 17.313-64.596-9.122-18.802-23.642-33.322-39.093-46.911-29.226-25.689-62.362-45.98-96.987-63.665-21.408-10.983-43.56-20.663-65.526-31.088-2.42-1.117-4.654-2.42-9.494-4.84 24.014 5.212 45.422 10.983 67.016 13.776 20.105 2.793 40.768 4.654 60.873 2.793 35.742-3.351 50.448-25.503 43.56-61.059-6.329-32.019-20.477-61.059-36.114-89.168C97.359 137.569 51.751 73.904 5.771 10.239 3.724 7.26 1.49 4.282.558 0c3.537 2.979 7.26 5.771 10.797 8.749C71.483 59.755 132.728 109.086 199.371 151.53c33.694 21.407 68.132 41.885 107.784 51.192 5.399 1.303 10.983 2.234 16.567 2.606 26.993 2.048 44.491-12.844 47.842-40.582 2.979-24.386-1.117-48.214-6.516-71.856-2.047-8.936-4.467-17.871-5.212-27.551 1.303 2.793 2.792 5.584 4.096 8.563 19.919 43.56 42.257 85.631 70.366 124.537 15.637 21.594 32.763 42.257 55.288 57.336 5.399 3.537 11.169 6.702 17.313 8.936 19.733 7.446 36.673 2.42 49.331-14.334 15.265-20.291 20.477-44.305 23.828-68.691 3.164-22.897 4.281-46.166 6.516-72.042 6.143 24.945 11.914 47.283 17.313 69.622 15.451 66.457 28.482 133.473 31.274 201.792 1.861 44.305 2.793 89.168-11.542 131.797-22.152 66.643-69.808 105.922-138.313 119.325-63.479 12.472-127.144 8.191-190.809-.373-76.882-10.424-152.088-28.668-227.109-48.028-1.117-.186-2.234-.931-1.303-.372zM310.32 425.922h-1.676c-1.117 8.563-2.606 17.126-2.979 25.689-4.096 96.987 82.839 172.193 178.523 155.067 61.059-10.983 117.278-62.92 123.421-136.637 4.84-57.894-25.689-120.628-87.121-149.296-54.171-25.317-108.901-3.164-128.261 51.937-5.584 16.009-5.957 32.205-1.303 48.586 3.723-3.351 7.074-6.143 10.239-9.122 16.567-14.52 35.742-21.966 58.08-20.105 28.482 2.234 44.491 26.434 35.742 53.613-4.467 14.147-13.776 24.759-25.317 33.508-21.78 16.196-47.097 18.988-72.601 16.94-35.742-2.792-63.851-18.802-79.861-52.309-2.979-5.584-4.654-11.728-6.887-17.871z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 636,
-    "viewBoxHeight": 640,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1.0062893081761006,
-    "fill": null
-  },
-  "bleeding": {
-    "elements": [
-      "<path fill=\"var(--bleeding-fill-color-0, currentColor)\" d=\"M335.8 0s387.8 237 376.4 642.5-392.6 381.1-392.6 381.1S6.6 1007.4 0 683c0 0-12.2-173.6 211.2-347.2 31-24.3 57.1-54.2 77-88.1 33.2-56 66.7-143 47.6-247.7\" />",
-      "<path fill=\"var(--bleeding-fill-color-1, currentColor)\" d=\"M335.8 0s384.5 232.6 376.4 644c-5.5 286.4-202.7 357.6-313.7 373.8-135.6 19.9-217.8-68.2-241.4-189.1-17.3-89.6 43.5-237.8 165.9-283.5C512.7 474.4 502 151.1 335.8 0\" />"
-    ],
-    "fills": [
-      "#e20000",
-      "#f85656"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 713,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.6962890625,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "concussed": {
-    "elements": [
-      "<path fill=\"var(--concussed-fill-color-0, currentColor)\" d=\"M1024 512c0 282.6-229.4 512-512 512S0 794.6 0 512 229.4 0 512 0s512 229.4 512 512\" />",
-      "<circle fill=\"var(--concussed-fill-color-1, currentColor)\" cx=\"512\" cy=\"512\" r=\"401.7\" />"
-    ],
-    "fills": [
-      "#ab31c9",
-      "#6d219e"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1024,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "exposed": {
-    "elements": [
-      "<path fill=\"var(--exposed-fill-color-0, currentColor)\" d=\"M1024 512c0 282.6-229.4 512-512 512S0 794.6 0 512 229.4 0 512 0s512 229.4 512 512\" />",
-      "<circle fill=\"var(--exposed-fill-color-1, currentColor)\" cx=\"512\" cy=\"512\" r=\"401.7\" />"
-    ],
-    "fills": [
-      "#6c7cd8",
-      "#2b3eaf"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1024,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "stunned": {
-    "elements": [
-      "<path fill=\"var(--stunned-fill-color-0, currentColor)\"  d=\"M496.26 601.438s-54.441-34.072-28.516-128.139c15.184-55.552 81.846-112.584 170.728-88.142 115.918 32.22 158.137 191.097 49.996 335.531 0 0-134.064 178.135-360.344 77.031 0 0-147.026-67.032-170.728-234.057-28.146-199.245 109.251-337.383 109.251-337.383S412.192 46.662 658.1 100.733c252.574 55.922 341.086 277.017 337.753 411.452-2.963 126.658-37.034 294.053-224.428 426.265-199.615 140.731-442.931 84.068-560.7 0C122.213 875.492 3.703 756.611 0 546.997-3.703 340.716 111.103 165.543 249.241 75.92c87.771-57.033 228.872-84.438 334.05-73.698 15.925 2.222 14.073 22.221-.37 21.85-9.629-1.111-177.765-1.481-326.273 118.51-120.362 97.4-174.061 262.944-164.062 379.602 8.888 106.289 46.663 255.907 238.131 339.235s455.152-42.96 482.558-280.35c26.294-224.428-159.988-278.498-240.353-267.758-96.66 12.592-185.912 71.106-185.912 198.875 4.814 62.588 51.848 112.214 109.251 89.253z\"/>",
-      "<path fill=\"var(--stunned-fill-color-1, currentColor)\"  d=\"M496.26 601.438s-54.07-41.849-24.813-98.511c38.145-73.328 117.769-43.701 138.138-6.666 29.257 52.959 12.962 155.174-75.92 184.431 0 0-81.105 28.516-158.137-21.85 0 0-74.069-49.626-76.661-146.656-1.111-37.775 5.555-75.18 19.258-109.992 24.443-60.366 71.476-108.511 131.102-134.435 56.292-24.813 144.434-48.145 240.353-15.184 155.174 53.7 191.468 182.209 197.763 259.611 5.925 72.217-18.888 245.908-162.581 345.901-169.988 118.51-363.307 99.622-481.447 15.554-88.142-62.958-183.32-141.842-187.024-351.456-3.703-206.281 98.511-344.79 241.464-429.599 89.993-53.329 203.689-87.031 289.238-80.365 11.11.741 7.777 12.221-3.703 12.221-9.629-1.111-177.765-1.481-326.273 118.51-120.732 97.4-174.432 262.944-164.803 379.602 8.888 106.289 46.663 255.907 238.131 339.235s455.152-42.96 482.558-280.35c26.294-224.428-159.618-277.017-240.353-267.758-91.475 10.37-177.024 65.551-185.172 180.357-1.481 15.925.37 31.85 4.444 47.034 15.184 47.404 55.922 79.624 104.437 60.366z\"/>"
-    ],
-    "fills": [
-      "#ab31c9",
-      "#6d219e"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 996,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.97265625,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "vulnerable": {
-    "elements": [
-      "<path fill=\"var(--vulnerable-fill-color-0, currentColor)\" d=\"M784.6 868.7c2.8 8.9 1.2 14.2-6.8 20.3-83.5 62.2-174.7 108.5-277.6 129.1-8.9 1.8-17.9 3.1-26.8 4.6-29.3-78-31.7-393.8-3.7-495.8 71.8 9.5 138.7 33 204.6 65.3.6-6.2 1.5-10.2 1.5-14.5 0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6-18.9-.2-37.8 0-56.8.8-68.7 2.8-136.8 11.7-203.4 30.8v161.2c67.2-33.6 135.6-58.9 210.5-66.2 29 167.3 35.1 332.8-2.2 498C240.9 1018.8 95.5 957.7 0 881c3.4-9.9 7.1-20.3 10.8-30.8C32.4 788.6 53.9 726.6 65 661.6c12-71.2 5.5-141.1-15.1-209.5-14.5-49-32-97.1-47.5-145.8-1.8-6.2-1.5-16 2.2-20.3 36.1-41.6 72.7-82.6 109.4-123 2.5-2.8 8.3-5.2 11.7-4 57.6 17.6 114.9 35.7 170.7 53.6-20 22.2-40.4 44.7-61.3 67.8 52.5 16.4 105.2 32.8 157.9 49.2 56.2 17.5 112.5 35 168.8 52.5.6-1.2 1.2-2.1 1.8-3.4-56.1-42.8-112.2-85.5-170.6-130-1-.7-1.9-1.5-2.9-2.2 1-.8 1.9-1.7 2.9-2.5 16.6-14.5 33-28.9 50.4-44.6-17-13.2-33.8-26.2-50.4-39.1-45-34.9-89.2-69.2-136-105.4 45.6-19.1 87.8-37 130-54.2 1.7-.7 3.8-.7 6-.3 3 .5 6.2 1.7 8.8 2.7C526.6 49.6 637.5 118 728.4 216.3c19.7 21.3 36.7 45.3 53.9 69 3.7 5.2 4.6 14.5 3.1 20.7-14.8 60.1-32.7 119.2-45.6 179.7-19.4 90.6-11.1 180.6 12.9 269.3 10.2 37.9 21 75.8 31.7 113.7z\" />",
-      "<path fill=\"var(--vulnerable-fill-color-1, currentColor)\" d=\"M784.6 868.7c2.8 8.9 1.2 14.2-6.8 20.3-83.5 62.2-174.7 108.5-277.6 129.1-8.9 1.8-17.9 3.1-26.8 4.6-29.3-78-31.7-393.8-3.7-495.8 71.8 9.5 138.7 33 204.6 65.3.6-6.2 1.5-10.2 1.5-14.5 0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6v-70.1c56.2 17.5 112.5 35 168.8 52.5.6-1.2 1.2-2.1 1.8-3.4-56.1-42.8-112.2-85.5-170.6-130V244c16.6-14.5 33-28.9 50.4-44.6-17-13.2-33.8-26.2-50.4-39.1V.3c3 .5 6.2 1.7 8.8 2.7 124.8 46.5 235.7 114.9 326.6 213.2 19.7 21.3 36.7 45.3 53.9 69 3.7 5.2 4.6 14.5 3.1 20.7-14.8 60.1-32.7 119.2-45.6 179.7-19.4 90.6-11.1 180.6 12.9 269.3 10.2 37.9 21 75.8 31.7 113.7h.2Z\" />"
-    ],
-    "fills": [
-      "#2b3eaf",
-      "#6c7cd8"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 786,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.767578125,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "wounded": {
-    "elements": [
-      "<path fill=\"var(--wounded-fill-color-0, currentColor)\" d=\"M1024 512c0 282.6-229.4 512-512 512S0 794.6 0 512 229.4 0 512 0s512 229.4 512 512\" />",
-      "<circle fill=\"var(--wounded-fill-color-1, currentColor)\" cx=\"512\" cy=\"512\" r=\"401.7\" />"
-    ],
-    "fills": [
-      "#f85656",
-      "#e20000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 1024,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 1,
-    "heightRatio": 1,
-    "fill": null
-  },
-  "blockChance": {
-    "elements": [
-      "<path fill=\"var(--blockChance-fill-color-0, currentColor)\"  d=\"M.3 89h100.3c58.9.2 116.8-7.4 171.3-30 36.9-15.3 71.9-35.6 107.2-54.5 8.2-4.4 13.3-6.9 22.3-.8C487.7 62.6 583.5 90.5 688 89c30.4-.4 60.9 0 93.2 0v21.9c0 118.9-1.6 238 .4 356.9 1.9 112.7-32 212.8-97.1 303.3-75.7 105.3-174 185.3-284.9 250.8-4.3 2.5-12.5 3.1-16.6.7C255.7 947 144.8 854 67.2 725.4 21.3 649.1 1.2 565.8.5 477.7-.4 355.9.3 234.1.3 112.3z\"/>"
-    ],
-    "fills": [
-      "#000"
-    ],
-    "strokes": [],
-    "viewBoxWidth": 782,
-    "viewBoxHeight": 1024,
-    "viewBoxLeft": 0,
-    "viewBoxTop": 0,
-    "widthRatio": 0.763671875,
-    "heightRatio": 1,
-    "fill": null
-  }
-}
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
deleted file mode 100644
index 144ad83c..00000000
--- a/src/routes/+error.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  
-  const {
-    status,
-    error
-  } = $page;
-</script>
-
-<h1>{status}: {error?.message}</h1>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
deleted file mode 100644
index 5bd08a9e..00000000
--- a/src/routes/+layout.svelte
+++ /dev/null
@@ -1,371 +0,0 @@
-<script lang="ts">
-  import '../app.css';
-  import '../crow.css';
-  import { page } from '$app/stores';
-  import type { Snippet } from 'svelte';
-  import app from '@/app.svelte';
-  import { overrideItemIdKeyNameBeforeInitialisingDndZones } from 'svelte-dnd-action';
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import ABILITIES from '@/constants/ABILITIES';
-  import { calculateCombatStatsByCharacter, calculateTickStart } from '@/ts/utils';
-  import {
-    allowedNumberOfCharacters,
-    getCurrentExperienceAtLevel,
-    getExperienceForNextLevel,
-    getLevelByExperience
-  } from '@/ts/level';
-  import { goto, onNavigate } from '$app/navigation';
-  import DebugAppData from '@/components/DebugAppData.svelte';
-  import { notify } from '@/ts/actions';
-  overrideItemIdKeyNameBeforeInitialisingDndZones('uuid');
-
-  let { children }: { children: Snippet } = $props();
-
-  const { IS_PROD } = ENV;
-
-  let showSequence = $state(false);
-
-  onNavigate(
-    ({
-      to: {
-        route: { id }
-      }
-    }: any) => {
-      if (
-        !id.includes('/[characterIndex]') &&
-        !id.includes('/[fightId]') &&
-        id !== '/random-duel'
-      ) {
-        app.selectedBrawlers = [];
-        app.maxBrawlers = 0;
-      }
-    }
-  );
-
-  const selectBrawler = (e: Event, id: string) => {
-    if (app.maxBrawlers) {
-      e.preventDefault();
-
-      if (app.selectedBrawlers.includes(id)) {
-        app.selectedBrawlers = app.selectedBrawlers.filter((uuid) => uuid !== id);
-        return;
-      }
-
-      if (app.selectedBrawlers.length < app.maxBrawlers) {
-        app.selectedBrawlers.push(id);
-      } else {
-        notify({ warning: `You can only engage with ${app.maxBrawlers} brawlers in this fight` });
-      }
-    }
-  };
-
-  let isFrontpage = $derived($page.route.id === '/' && !app.token);
-  let isAuthenticated = $derived(!!app.token);
-  let activePage = $derived($page.route.id?.split('/')[1] || (!app.token ? 'start' : ''));
-  let isDebugPage = $derived($page.route.id === '/debug');
-  let isVendorPage = $derived($page.route.id === '/vendor');
-  let characterIndex = $derived($page.params.characterIndex);
-</script>
-
-<ClientClock />
-<ConnectSocket />
-<Keystrokes />
-<InCombat />
-<GameAudio />
-
-{#if !IS_PROD}
-  <DevBar />
-  <DebugAppData />
-{/if}
-
-<div
-  data-page-id={activePage}
-  class={tw('bg-blur min-h-screen w-screen', isFrontpage ? 'crow' : 'crow up')}
->
-  <div
-    class={tw(
-      'xs:w-[calc(100%-theme(space.4))] pt-20 pb-3',
-      !isAuthenticated ? 'crow !flex-none' : 'flex w-full max-w-7xl'
-    )}
-  >
-    <Authorization>
-      <div class="flex min-h-[calc(100vh-theme(spacing.20)-theme(spacing.3))] flex-1 gap-3">
-        <div
-          class={tw(
-            'sticky top-3 h-[calc(100vh-theme(spacing.6))] w-56 rounded border border-transparent bg-white/30 p-4',
-            !IS_PROD && 'top-48'
-          )}
-        >
-          <div class="absolute -top-6 -left-0">
-            {#if app.elapsedMilliseconds < app.combat.duration}
-              <Clickable onclick={() => (app.overlay = 'Combat')} class="crow gap-2">
-                <Spinner class="text-sm text-gray-700" />
-                <div>Fightning..</div>
-              </Clickable>
-            {:else if app.combat.duration !== 0}
-              <Clickable onclick={() => (app.overlay = 'Combat')} class="crow gap-2">
-                <div>View outcome</div>
-              </Clickable>
-            {/if}
-          </div>
-          <Headline text="MY LUDUS" small>
-            <crow class="cinzel !flex-none">
-              level {getLevelByExperience(app.experience)}
-            </crow>
-          </Headline>
-
-          <crow vertical left class="w-full gap-2">
-            <crow left class="!justify-between gap-2">
-              <span class="text-sm text-gray-800">Coins</span>
-              {#if app.coins === 0}
-                <span class="leading-0">-</span>
-              {:else}
-                <Coins renderAll amount={app.coins} />
-              {/if}
-            </crow>
-
-            <crow vertical left class="w-full">
-              <crow class="w-full !justify-between">
-                <span class="text-sm text-gray-800">Experience</span>
-                <Button onclick={() => (app.showAccountProgression = true)} tertiary>
-                  See progress
-                </Button>
-              </crow>
-
-              {#if getLevelByExperience(app.experience) < 25}
-                <Bar
-                  class="bg-yellow-600"
-                  current={getCurrentExperienceAtLevel(app.experience)}
-                  max={getExperienceForNextLevel(getLevelByExperience(app.experience))}
-                  center
-                />
-              {/if}
-            </crow>
-
-            <crow vertical left class="w-full">
-              <crow class="w-full !justify-between">
-                <span class="text-sm text-gray-800">Medical area</span>
-                <Button
-                  onclick={() => {
-                    app.characters.forEach((character) => {
-                      const { currentHealth, maxHealth } = calculateCombatStatsByCharacter(
-                        CHARACTERS(character, true)
-                      );
-                      const heal = Math.ceil(maxHealth * 0.33);
-                      character.overrides.combatStats.currentHealth = Math.min(
-                        currentHealth + heal,
-                        maxHealth
-                      );
-                    });
-                  }}
-                  tertiary
-                >
-                  Heal now
-                </Button>
-              </crow>
-              <RefillHealthTimer />
-            </crow>
-          </crow>
-
-          <div class="h-8"></div>
-
-          <Headline text="MY BRAWLERS" small>
-            <crow class="cinzel !flex-none">
-              {app.characters.length} / {allowedNumberOfCharacters()}
-            </crow>
-          </Headline>
-
-          <div
-            class="-mx-4 my-2"
-            onmouseenter={() => (showSequence = true)}
-            onmouseleave={() => (showSequence = false)}
-            role="none"
-          >
-            <crow vertical up left>
-              {#if app.characters.length === 0}
-                <crow vertical class="w-full gap-2 text-sm text-stone-500">
-                  You have no brawlers yet.
-                  <Button onclick={() => goto('/brawlers')} tertiary>Recruit brawler</Button>
-                </crow>
-              {:else}
-                {#each app.characters as char, i (char.uuid)}
-                  {@const character = CHARACTERS(char, true)}
-                  {@const abilitiesHydrated = character.abilities.map((ability) =>
-                    ABILITIES(ability, true)
-                  )}
-                  {@const isActive = !!(
-                    parseInt(characterIndex, 10) === i ||
-                    (app.maxBrawlers && app.selectedBrawlers.includes(char.uuid))
-                  )}
-                  <Clickable
-                    href="/brawlers/{i}"
-                    class={tw('crow vertical w-full')}
-                    onclick={(e: Event) => selectBrawler(e, char.uuid)}
-                  >
-                    <crow
-                      left
-                      class={tw(
-                        isActive &&
-                          'glass -mx-1.5 -my-1 w-auto !rounded-sm !border-none px-1.5 py-1 transition-all duration-75'
-                      )}
-                    >
-                      <div class="h-16 w-16 p-1">
-                        <div class="glass overflow-hidden rounded-sm border border-gray-600">
-                          <img
-                            src="/images/races/{character.image.replace('.png', '-mugshot.png')}"
-                            alt=""
-                          />
-                        </div>
-                      </div>
-                      <crow vertical left class="overflow-x-hidden px-1 py-1">
-                        <div class="w-full">
-                          <Bar
-                            max={calculateCombatStatsByCharacter(character).maxHealth}
-                            current={character.combatStats.currentHealth}
-                            text={character.name}
-                            percentage={!(showSequence || !!app.maxBrawlers || isActive)}
-                          />
-                        </div>
-
-                        <Accordion isOpen={showSequence || !!app.maxBrawlers || isActive}>
-                          <div class="pr-px">
-                            <CombatantAbilityBar
-                              {character}
-                              preview
-                              abilitiesCopied={abilitiesHydrated.filter(
-                                (_, i) =>
-                                  calculateTickStart(abilitiesHydrated, i) < character.maxTicks
-                              )}
-                            />
-                          </div>
-                        </Accordion>
-                      </crow>
-                    </crow>
-                  </Clickable>
-                {/each}
-              {/if}
-            </crow>
-          </div>
-        </div>
-        <crow vertical class="h-full flex-1">
-          <div class="grid h-full w-full">
-            <crow
-              left
-              up
-              vertical
-              class={tw(
-                'relative !h-auto rounded border border-transparent bg-white p-4 [grid-area:1/1]',
-                isDebugPage && 'bg-transparent'
-              )}
-            >
-              <div class="relative w-full flex-1">
-                <div>
-                  {@render children()}
-                </div>
-              </div>
-              <div class="sticky bottom-[calc(theme(spacing.3))] left-0 w-full">
-                <div
-                  id="sticky-bottom"
-                  class="-m-[calc(theme(spacing.4)+1px)] overflow-hidden rounded-b"
-                ></div>
-              </div>
-            </crow>
-
-            <crow up class="-mt-7 !h-7 !flex-none !justify-between px-1 [grid-area:1/1]">
-              <crow up right class="gap-1">
-                <a
-                  class={tw(
-                    'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-                    activePage === '' && 'rounded-t-sm border-transparent bg-white text-black'
-                  )}
-                  href="/"
-                >
-                  Game Guide
-                </a>
-                <a
-                  class={tw(
-                    'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-                    activePage === 'the-arena' &&
-                      'rounded-t-sm border-transparent bg-white text-black'
-                  )}
-                  href="/the-arena"
-                >
-                  The Arena
-                </a>
-                <a
-                  class={tw(
-                    'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-                    activePage === 'random-duel' &&
-                      'rounded-t-sm border-transparent bg-white text-black'
-                  )}
-                  href="/random-duel"
-                >
-                  Random duel
-                </a>
-                <a
-                  class={tw(
-                    'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-                    activePage === 'vendor' && 'rounded-t-sm border-transparent bg-white text-black'
-                  )}
-                  href="/vendor"
-                >
-                  Vendor
-                </a>
-                <a
-                  class={tw(
-                    'border border-b-0 border-transparent px-2 py-0.5 text-gray-600',
-                    activePage === 'brawlers' &&
-                      'rounded-t-sm border-transparent bg-white text-black'
-                  )}
-                  href="/brawlers"
-                >
-                  Brawlers
-                </a>
-              </crow>
-            </crow>
-          </div>
-        </crow>
-        <div
-          class={tw(
-            'pointer-events-none sticky top-3 h-[calc(100vh-theme(spacing.6))] w-56 translate-x-4 rounded border border-transparent bg-white/30 p-4 opacity-0 transition-all duration-200',
-            (!!characterIndex || isVendorPage) && 'pointer-events-auto translate-x-0 opacity-100'
-          )}
-        >
-          <Headline text="ARMORY" small />
-
-          <Armory type={isVendorPage ? 'all' : 'equipment'} />
-        </div>
-      </div>
-    </Authorization>
-  </div>
-</div>
-
-<Topbar />
-<!-- <Logo /> -->
-<Overlay />
-<AccountProgression />
-
-<Dialog {...app.dialog} />
-
-{#if app.tooltip}
-  <Tooltip {...app.tooltip} />
-{/if}
-<Notifications />
-
-<style>
-  :global {
-    :root body {
-      background-image: url('/images/parchment-bg-2250x1500.jpg');
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-    }
-    :root:has([data-page-id='start']) body {
-      background-image: url('/images/parchment-bg-2250x1500.jpg');
-    }
-    :root:has([data-page-id='debug']) body {
-      background-image: url('/images/arena.png');
-    }
-  }
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
deleted file mode 100644
index e6f8a2b4..00000000
--- a/src/routes/+page.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-  import Headline from '@/components/Headline.svelte';
-
-  // import Portal from 'svelte-portal';
-</script>
-
-<Headline text="Game guide" />
-
-<strong>Battle Brawlers</strong> is a strategy auto-battler playable in your browser.
-<br /><br />
-Your main objective is to upgrade your <i>Ludus</i> by obtaining experience and leveling it up.
-<br /><br />
-You can recruit Brawlers to fight for you. Each Brawler can be equipped with unique items and abilities.
-<br /><br />
-Every 5 Ludus levels, you unlock an additional Brawler slot.
-<br /><br /><br />
-
-<Headline text="Combat" small />
-Combat is automatic once you start a fight.
-<br /><br />
-<strong>Battle Brawlers</strong> uses a <i>tick system</i>. A tick cycle is normally
-<strong>12 ticks</strong>, but it can expand up to <strong>15 ticks</strong>. Each ability you place
-in your <strong>Active Abilities</strong> has its own tick length, which represents how long the
-ability takes to cast or remain active.
-<br /><br />
-Tick cycles repeat until a winner is determined.
-<br /><br /><br />
-<Headline text="The arena" small />
-There’s a vast roster of fights available in the arena. Each fight features its own unique set of enemies
-and rewards.
-<br /><br />
-Boss fights unlock additional content in <strong>Battle Brawlers</strong>. But be wary! Luck-based
-combat stats are disabled during boss fights!
-
-<!-- <div class="h-[3000px] w-5 bg-green-100" /> -->
-
-<!-- <Portal target="#sticky-bottom">
-  <crow class="gap-3 bg-gradient-to-t from-black to-transparent p-4" right>
-    <Button tertiary onclick={() => {}}>Cancel</Button>
-
-    <Button big bgColor="bg-red-500" onclick={() => {}}>Fight</Button>
-  </crow>
-</Portal> -->
diff --git a/src/routes/ability-scaling/+page.svelte b/src/routes/ability-scaling/+page.svelte
deleted file mode 100644
index 4e7034a9..00000000
--- a/src/routes/ability-scaling/+page.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import ABILITIES, { ALL_ABILITIES } from '@/constants/ABILITIES';
-
-  let chosenAbility = $state('punch');
-
-  let abilitiesPool = $derived([
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 1 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 2 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 3 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 4 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 5 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 6 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 7 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 8 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 9 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 10 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 11 } })],
-    [ABILITIES(chosenAbility, false, { overrides: { ticks: 12 } })]
-  ]);
-</script>
-
-<Headline text="ability scaling" />
-
-<!--onchange={({ target: { value } }) => console.info(value)}-->
-<Dropdown
-  options={Object.keys(ALL_ABILITIES)}
-  value={chosenAbility}
-  onchange={({ target: { value } }: any) => (chosenAbility = value)}
-/>
-
-{#each abilitiesPool as abilities, i (i)}
-  <AbilityBar {abilities} dndDisabled small minimalistic character={app.characters[0]} />
-{/each}
-
-<!-- <Debug data={equipment} /> -->
diff --git a/src/routes/brawlers/+page.svelte b/src/routes/brawlers/+page.svelte
deleted file mode 100644
index a8062dea..00000000
--- a/src/routes/brawlers/+page.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { RECRUITABLE_CHARACTERS } from '@/constants/RECRUITABLE_CHARACTERS';
-  import CHARACTERS, { DEFAULT_LUCKY_STATS, DEFAULT_MODIFIERS } from '@/constants/CHARACTERS';
-  import { ALL_ELEMENTS } from '@/constants/ELEMENTS';
-  import type { CharacterRef } from '@/types/character';
-  import { confirmWithDialog } from '@/ts/dialog';
-  import { allowedNumberOfCharacters } from '@/ts/level';
-  import BasicConfirmation from '@/components/dialog/BasicConfirmation.svelte';
-  import { notify } from '@/ts/actions';
-  import { correctHealth } from '@/ts/equipment';
-  import CoreStats from '@/components/character/CoreStats.svelte';
-  import { deepSubtract } from '@/helpers';
-
-  let characters = RECRUITABLE_CHARACTERS;
-
-  let characterCapped = $derived(app.characters.length >= allowedNumberOfCharacters());
-
-  const pickCharacter = (characterRef: Required<CharacterRef>) => {
-    if (characterCapped) {
-      notify({ warning: 'You cannot recruit more brawlers. Level up your ludus first.' });
-      return;
-    }
-
-    confirmWithDialog(BasicConfirmation as any, {
-      text: `You are recruiting <span class="text-white">${CHARACTERS(characterRef, true).name}</span> to your Ludus.<br /><br />Do you wish to proceed?`,
-      confirm: () => {
-        app.characters.push(correctHealth(characterRef));
-
-        goto(`/brawlers/${app.characters.length - 1}`);
-      }
-    });
-  };
-</script>
-
-<Headline text="brawlers" />
-
-<crow class="cinzel my-12 text-center">
-  {#if !app.characters.length}
-    Select your first brawler
-  {:else if characterCapped}
-    Level up your ludus in order<br />to recruit new brawlers
-  {:else}
-    Select a brawler
-  {/if}
-</crow>
-
-<crow class="!flex-wrap gap-4" left>
-  {#each characters as char}
-    {@const character = CHARACTERS(char, true)}
-    {@const isRecruited = app.characters.find(({ id }) => id === character.id)}
-    {@const { primary, secondary } = ALL_ELEMENTS[character.element].color}
-    <!-- {@const combatStats = Object.entries(character.combatStats).filter(
-      ([key]) => !['limits', 'currentArmor', 'currentHealth'].includes(key)
-    )} -->
-    {@const combatStats = character.combatStats}
-    {@const luckyStats = Object.entries(deepSubtract(combatStats, DEFAULT_LUCKY_STATS)).filter(
-      ([key, value]) =>
-        ['criticalChance', 'criticalDamage', 'blockChance', 'dodgeChance', 'magicChance'].includes(
-          key
-        ) && value !== 0
-    )}
-    {@const modifierStats = Object.entries(
-      deepSubtract(character.combatStats.modifiers, DEFAULT_MODIFIERS)
-    ).filter(
-      ([key, value]) =>
-        ['maxHealth', 'maxArmor', 'damage', 'resistance'].includes(key) && value !== 0
-    )}
-    <Clickable
-      class={tw(
-        'crow vertical up !h-70 w-90 !flex-none overflow-hidden bg-gray-100 p-2',
-        isRecruited
-          ? 'cursor-not-allowed opacity-50 grayscale'
-          : 'cursor-pointer active:translate-y-px'
-      )}
-      onclick={() =>
-        isRecruited
-          ? notify({ warning: `${character.name} is already recruited` })
-          : pickCharacter(char)}
-      style="border: 0.5px solid {primary}; background: linear-gradient(135deg, {primary}20, {secondary}20);"
-    >
-      <div class="cinzel text-2xl">{character.name}</div>
-      <Hr />
-      <crow left class="w-full gap-4">
-        <CharacterAvatar {...character} class="w-30 !flex-none" />
-        <div>
-          <crow vertical left class="gap-2">
-            <CoreStats {combatStats} vertical />
-
-            <!-- <Pill text="Swift" /> -->
-            <crow vertical>
-              <Stats class="text-green-500" stats={luckyStats} showAsAddition />
-              <Stats class="text-green-500" stats={modifierStats} showAsAddition />
-            </crow>
-            <!-- {#each combatStats as [stat, value]}
-            <crow class="!flex-none gap-2 pl-6 text-2xl">
-              <div class="font-bold">
-                <Icon
-                  class="drop-shadow-[0.5px_0.5px_0.5px_rgba(0,0,0,0.5)]"
-                  original
-                  name={stat as IconName}
-                />
-              </div>
-              <div>{value}</div>
-            </crow>
-          {/each} -->
-          </crow>
-        </div>
-      </crow>
-      <!-- <div class="absolute inset-0 top-auto h-2 bg-gradient-to-t from-white to-transparent"></div> -->
-    </Clickable>
-  {/each}
-</crow>
diff --git a/src/routes/brawlers/[characterIndex]/+page.svelte b/src/routes/brawlers/[characterIndex]/+page.svelte
deleted file mode 100644
index ab785612..00000000
--- a/src/routes/brawlers/[characterIndex]/+page.svelte
+++ /dev/null
@@ -1,148 +0,0 @@
-<script lang="ts">
-  import app from '@/app.svelte';
-  import { page } from '$app/stores';
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import { calculateCombatStatsByCharacter } from '@/ts/utils';
-  import { goto } from '$app/navigation';
-  import { getLevelByExperience } from '@/ts/level';
-  import { confirmWithDialog } from '@/ts/dialog';
-  import type { Character } from '@/types/character';
-  import BasicConfirmation from '@/components/dialog/BasicConfirmation.svelte';
-  import CoreStats from '@/components/character/CoreStats.svelte';
-  import Accordion from '@/components/Accordion.svelte';
-
-  const retireCharacter = async (character: Character) => {
-    confirmWithDialog(BasicConfirmation as any, {
-      text: `You are retiring <span class="text-white">${character.name}</span>.<br /><br />Do you wish to proceed?`,
-      confirm: async () => {
-        app.selectedBrawlers = app.selectedBrawlers.filter((uuid) => uuid !== character.uuid);
-        await goto('/brawlers');
-        app.characters = [];
-      }
-    });
-  };
-
-  let characterIndex = $derived($page.params.characterIndex);
-  let characterRef = $derived(app.characters[characterIndex as any]);
-  let character = $derived(CHARACTERS(characterRef, true));
-  let combatStats = $derived(calculateCombatStatsByCharacter(character));
-</script>
-
-{#snippet RetireInfo()}
-  <div class="p-2 text-sm">Only possible until level 5</div>
-{/snippet}
-
-<GoBack onclick={() => history.back()} />
-
-<Headline text={character.name}>
-  <crow right class="w-full gap-1">
-    <crow up left class="mr-2 !flex-none">
-      <Accordion isOpen={!app.settings.showDetailedCharacterView}>
-        <CoreStats {combatStats} />
-      </Accordion>
-    </crow>
-    <Button
-      onclick={() =>
-        (app.settings.showDetailedCharacterView = !app.settings.showDetailedCharacterView)}
-      tertiary
-      innerClass="py-1 px-2"
-    >
-      <Icon name="down" class={tw(app.settings.showDetailedCharacterView && '-scale-y-[1]')} />
-      {app.settings.showDetailedCharacterView ? 'Simple view' : 'Show stats'}
-    </Button>
-    {#if getLevelByExperience(app.experience) <= 4}
-      <crow
-        class="!flex-none gap-2"
-        left
-        use:tooltip={{ children: RetireInfo, direction: 'up', lockInPlace: true }}
-      >
-        <Button
-          class="bg-red-200 text-red-400"
-          innerClass="py-1 px-2"
-          onclick={() => retireCharacter(character)}
-          tertiary
-        >
-          Retire
-        </Button>
-        <!-- <span class="text-xs text-gray-400">(possible until level 5)</span> -->
-      </crow>
-    {/if}
-  </crow>
-</Headline>
-
-<crow vertical class="gap-4">
-  <crow left up class="gap-4">
-    <crow left vertical>
-      <!-- <Headline text={character.name} /> -->
-
-      <crow class="aspect-[11/12] w-full">
-        <CharacterAvatar {...character} />
-      </crow>
-    </crow>
-
-    <crow class="!flex-2" up left vertical>
-      <Accordion isOpen={app.settings.showDetailedCharacterView}>
-        <div>
-          <crow up left class="!flex-none gap-8">
-            <crow up left vertical>
-              <Headline text="base stats" small />
-              <!-- <div class="mb-4">
-            <CoreStats {combatStats} />
-          </div> -->
-              <Stats
-                stats={Object.entries(combatStats).filter(([key]) =>
-                  ['maxHealth', 'maxArmor', 'damage'].includes(key)
-                )}
-              />
-
-              <div class="h-10" />
-
-              <Headline text="lucky stats" small />
-
-              <Stats
-                class="text-green-500"
-                stats={Object.entries(combatStats).filter(([key]) =>
-                  [
-                    'criticalChance',
-                    'criticalDamage',
-                    'blockChance',
-                    'dodgeChance',
-                    'magicChance'
-                  ].includes(key)
-                )}
-              />
-            </crow>
-            <crow up left vertical>
-              <Headline text="modifiers" small />
-
-              <Stats
-                stats={Object.entries(combatStats.modifiers).filter(([key]) =>
-                  ['maxHealth', 'maxArmor', 'damage', 'resistance'].includes(key)
-                )}
-              />
-
-              <div class="h-4" />
-
-              <Headline text="Resistances" small />
-
-              <Stats
-                stats={Object.entries(combatStats.limits).filter(([key]) =>
-                  ['wounded', 'concussed', 'exposed'].includes(key)
-                )}
-              />
-            </crow>
-          </crow>
-        </div>
-      </Accordion>
-      <crow vertical up left>
-        <Accordion isOpen={app.settings.showDetailedCharacterView}>
-          <div class="h-4" />
-          <Headline text="equipment" small />
-        </Accordion>
-        <CharacterEquipment {character} />
-      </crow>
-    </crow>
-  </crow>
-  <div class="h-4" />
-  <AbilitySelection {character} />
-</crow>
diff --git a/src/routes/character-scaling/+page.svelte b/src/routes/character-scaling/+page.svelte
deleted file mode 100644
index edf1affa..00000000
--- a/src/routes/character-scaling/+page.svelte
+++ /dev/null
@@ -1,101 +0,0 @@
-<script lang="ts">
-  import CoreStats from '@/components/character/CoreStats.svelte';
-  import CHARACTER, { ALL_CHARACTERS } from '@/constants/CHARACTERS';
-  import { calculateCombatStatsByCharacter } from '@/ts/utils';
-
-  let chosenCharacter = $state('elfMale');
-  let equipmentScaling = $state(true);
-  let characterScaling = $state(true);
-
-  const overrider = (level: number) => {
-    return {
-      overrides: {
-        level: characterScaling ? level : 1,
-        equipment: {
-          mainHand: { overrides: { level: equipmentScaling ? level : 0 } },
-          offHand: { overrides: { level: equipmentScaling ? level : 0 } },
-          armor: { overrides: { level: equipmentScaling ? level : 0 } }
-        }
-      }
-    };
-  };
-
-  let characterPool = $derived([
-    CHARACTER(chosenCharacter, false, overrider(1)),
-    CHARACTER(chosenCharacter, false, overrider(2)),
-    CHARACTER(chosenCharacter, false, overrider(3)),
-    CHARACTER(chosenCharacter, false, overrider(4)),
-    CHARACTER(chosenCharacter, false, overrider(5)),
-    CHARACTER(chosenCharacter, false, overrider(6)),
-    CHARACTER(chosenCharacter, false, overrider(7)),
-    CHARACTER(chosenCharacter, false, overrider(8)),
-    CHARACTER(chosenCharacter, false, overrider(9)),
-    CHARACTER(chosenCharacter, false, overrider(10)),
-    CHARACTER(chosenCharacter, false, overrider(11)),
-    CHARACTER(chosenCharacter, false, overrider(12)),
-    CHARACTER(chosenCharacter, false, overrider(13)),
-    CHARACTER(chosenCharacter, false, overrider(14)),
-    CHARACTER(chosenCharacter, false, overrider(15)),
-    CHARACTER(chosenCharacter, false, overrider(16)),
-    CHARACTER(chosenCharacter, false, overrider(17)),
-    CHARACTER(chosenCharacter, false, overrider(18)),
-    CHARACTER(chosenCharacter, false, overrider(19)),
-    CHARACTER(chosenCharacter, false, overrider(20)),
-    CHARACTER(chosenCharacter, false, overrider(21)),
-    CHARACTER(chosenCharacter, false, overrider(22)),
-    CHARACTER(chosenCharacter, false, overrider(23)),
-    CHARACTER(chosenCharacter, false, overrider(24)),
-    CHARACTER(chosenCharacter, false, overrider(25))
-  ]);
-</script>
-
-<Headline text="character scaling" />
-
-<crow left class="gap-2">
-  <div>
-    <Checkbox
-      id="characterScaling"
-      bind:value={characterScaling}
-      onchange={({ target: { checked } }: any) => (characterScaling = checked)}
-    >
-      Character scaling
-    </Checkbox>
-  </div>
-  <div>
-    <Checkbox
-      id="equipmentScaling"
-      bind:value={equipmentScaling}
-      onchange={({ target: { checked } }: any) => (equipmentScaling = checked)}
-    >
-      Equipment scaling
-    </Checkbox>
-  </div>
-</crow>
-<!--onchange={({ target: { value } }) => console.info(value)}-->
-<Dropdown
-  options={Object.keys(ALL_CHARACTERS)}
-  value={chosenCharacter}
-  onchange={({ target: { value } }: any) => (chosenCharacter = value)}
-/>
-
-{#each characterPool as character, i (`${character.id}_${i}`)}
-  {@const hydratedCharacter = {
-    ...CHARACTER(character, true),
-    combatStats: calculateCombatStatsByCharacter(CHARACTER(character, true))
-  }}
-  <crow left class="!justify-between gap-2">
-    <crow left class="gap-2">
-      level {i + 1}
-
-      <EquipmentLink {...hydratedCharacter} />
-    </crow>
-    <CoreStats {...hydratedCharacter} small />
-  </crow>
-{/each}
-
-<crow vertical left class="bg-gray-100 p-4">
-  <Headline text="Equipment" small />
-  <CharacterEquipment character={CHARACTER(characterPool[24], true)} />
-</crow>
-
-<!-- <Debug data={equipment} /> -->
diff --git a/src/routes/components/+page.svelte b/src/routes/components/+page.svelte
deleted file mode 100644
index 47ba5156..00000000
--- a/src/routes/components/+page.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts">
-  import { notify, enableGameKeyboard, disableGameKeyboard } from '@/ts/actions';
-</script>
-
-<crow vertical class="gap-10" left up>
-  <div>
-    <h2>Input</h2>
-    <!--onkeyup={(e) => console.info(e?.target?.value)}-->
-    <Input placeholder="Type something" onblur={enableGameKeyboard} onfocus={disableGameKeyboard} />
-  </div>
-  <div>
-    <h2>Checkbox</h2>
-    <Checkbox id="check-me">Check me</Checkbox>
-  </div>
-  <div>
-    <h2>Dropdown</h2>
-    <!--onchange={({ target: { value } }) => console.info(value)}-->
-    <Dropdown options={['option 1', 'option 2']} />
-  </div>
-  <div>
-    <h2>Button (active)</h2>
-    <crow left class="gap-2">
-      <Button primary onclick={console.info}>Primary</Button>
-      <Button secondary onclick={console.info}>Secondary</Button>
-      <Button tertiary onclick={console.info}>Tertiary</Button>
-    </crow>
-  </div>
-  <div>
-    <h2>Button (disabled)</h2>
-    <crow left class="gap-2">
-      <Button primary disabled onclick={console.info}>Primary</Button>
-      <Button secondary disabled onclick={console.info}>Secondary</Button>
-      <Button tertiary disabled onclick={console.info}>Tertiary</Button>
-    </crow>
-  </div>
-  <div>
-    <h2>Toasts</h2>
-    <crow class="gap-2">
-      <Button
-        tertiary
-        onclick={notify.bind(undefined, { error: 'this is a error toast' })}
-        class="text-red-500"
-      >
-        Error
-      </Button>
-      <Button
-        tertiary
-        onclick={notify.bind(undefined, {
-          warning: 'this is a warning toast'
-        })}
-        class="text-orange-500"
-      >
-        Warning
-      </Button>
-      <Button
-        tertiary
-        onclick={notify.bind(undefined, { info: 'this is a information toast' })}
-        class="text-blue-500"
-      >
-        Information
-      </Button>
-      <Button
-        tertiary
-        onclick={notify.bind(undefined, { success: 'this is a success toast' })}
-        class="text-green-500"
-      >
-        Success
-      </Button>
-    </crow>
-  </div>
-  <div>
-    <h2>Pills</h2>
-    <crow class="gap-2">
-      <Pill text="1&nbsp;vs&nbsp;1" />
-      <Pill text="2&nbsp;vs&nbsp;2" />
-      <Pill text="3&nbsp;vs&nbsp;3" />
-    </crow>
-  </div>
-</crow>
diff --git a/src/routes/crow/+page.svelte b/src/routes/crow/+page.svelte
deleted file mode 100644
index effd714e..00000000
--- a/src/routes/crow/+page.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<Headline text="crow playground" />
-
-<crow vertical up class="gap-4 rounded border border-gray-400 bg-white/30 p-4">
-  <crow class="w-full !justify-between rounded bg-gray-100 p-2" left>
-    <div class="font-bold tracking-wide text-gray-600 uppercase">Layout summary</div>
-    <span class="text-sm text-gray-500">Side-by-side flex helpers</span>
-  </crow>
-
-  <crow vertical left class="w-full gap-2">
-    <crow up left class="gap-2 rounded bg-gray-200 p-2">
-      <div class="font-bold tracking-wide text-gray-600 uppercase">Horizontal rows</div>
-      <crow class="w-full !justify-between rounded border border-gray-300 bg-white px-2 py-1">
-        <span>Left</span>
-        <span>Right</span>
-      </crow>
-      <crow class="w-full !justify-between rounded border border-gray-300 bg-white px-2 py-1">
-        <span>Aligned</span>
-        <span>Centers</span>
-      </crow>
-    </crow>
-
-    <crow up left class="gap-1 rounded bg-gray-100 p-2">
-      <div class="font-bold tracking-wide text-gray-600 uppercase">Stacked columns</div>
-      <crow class="w-full !justify-between">
-        <span>Top</span>
-        <span>Start</span>
-      </crow>
-      <crow class="w-full !justify-between">
-        <span>Middle</span>
-        <span>Center</span>
-      </crow>
-      <crow class="w-full !justify-between">
-        <span>Bottom</span>
-        <span>End</span>
-      </crow>
-    </crow>
-  </crow>
-
-  <Hr />
-
-  <crow vertical left class="w-full gap-2">
-    <crow class="w-full gap-2 rounded border border-gray-300 bg-white p-2">
-      <crow vertical left class="w-32 gap-1 bg-gray-100 p-2">
-        <span class="font-bold tracking-wide text-gray-600 uppercase">Card A</span>
-        <span class="text-sm text-gray-500">portrait</span>
-      </crow>
-      <crow vertical left class="flex-1 gap-1">
-        <crow class="w-full !justify-between rounded bg-yellow-600 px-2 py-1 text-white">
-          <span>Power</span>
-          <span>45</span>
-        </crow>
-        <crow class="bg-green w-full !justify-between rounded px-2 py-1 text-gray-800">
-          <span>Morale</span>
-          <span>High</span>
-        </crow>
-      </crow>
-    </crow>
-
-    <crow up left class="gap-2 rounded border border-gray-300 bg-gray-100 p-2">
-      <crow class="w-full gap-2">
-        <crow vertical up class="w-24 gap-1 rounded bg-white p-2">
-          <span class="font-bold tracking-wide text-gray-600 uppercase">Column</span>
-          <span class="text-sm text-gray-500">flex-1 demo</span>
-        </crow>
-        <crow vertical up class="flex-1 gap-1">
-          <crow class="w-full !justify-between rounded border border-gray-300 bg-white px-2 py-1">
-            <span>A</span>
-            <span>1</span>
-          </crow>
-          <crow class="w-full !justify-between rounded border border-gray-300 bg-white px-2 py-1">
-            <span>B</span>
-            <span>2</span>
-          </crow>
-        </crow>
-      </crow>
-      <crow class="w-full !justify-between rounded border border-gray-300 bg-white px-2 py-1">
-        <span>Footer</span>
-        <span>Aligned</span>
-      </crow>
-    </crow>
-  </crow>
-</crow>
diff --git a/src/routes/debug/+page.svelte b/src/routes/debug/+page.svelte
deleted file mode 100644
index 6a930c09..00000000
--- a/src/routes/debug/+page.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-  import { calculateCombatStatsByCharacter, prepareCombatant, seededRandom } from '@/ts/utils';
-  import { generateCombat } from '@/ts/combat';
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import type { Team } from '@/types/team';
-  import type { Character } from '@/types/character';
-  import { INITIAL_COMBAT } from '@/app.svelte';
-
-  let teams = $derived<Team[]>(app.combat.teamsStartState);
-  let teamCount = $state(2);
-  let combatantCount = $state(1);
-
-  let characters: Character[] = [
-    CHARACTERS('elfMale'),
-    CHARACTERS('elfFemale'),
-    CHARACTERS('humanMale'),
-    CHARACTERS('humanFemale'),
-    CHARACTERS('trollMale'),
-    CHARACTERS('trollFemale'),
-    CHARACTERS('dwarfMale'),
-    CHARACTERS('dwarfFemale'),
-    CHARACTERS('goblinMale'),
-    CHARACTERS('goblinFemale'),
-    CHARACTERS('succubus'),
-    CHARACTERS('rat')
-  ];
-
-  const initializeCombat = () => {
-    const generateCombatants = (teamIndex: number) =>
-      Array.from({ length: combatantCount }, (_, combatantIndex) =>
-        prepareCombatant(
-          characters[seededRandom(0, characters.length - 1, `ff${combatantIndex}_${teamIndex}`)],
-          teamCount,
-          combatantCount,
-          teamIndex,
-          combatantIndex
-        )
-      );
-
-    const generatedTeams = Array.from({ length: teamCount }, (_, index) => ({
-      name: `Team ${index}`,
-      index,
-      combatants: generateCombatants(index)
-    }));
-
-    // Inject account character
-    generatedTeams[0].combatants = [
-      prepareCombatant(app.characters[0], generatedTeams.length, 1, 0, 0)
-    ];
-
-    app.combat.teamsStartState = generatedTeams;
-  };
-
-  const startCombat = () => {
-    app.combat = generateCombat($state.snapshot(teams), 'myseed');
-    console.info($state.snapshot(app.combat));
-  };
-
-  const reset = () => {
-    app.characters[0].overrides.combatStats.currentHealth = calculateCombatStatsByCharacter(
-      CHARACTERS(app.characters[0], true)
-    ).maxHealth;
-    app.combat = INITIAL_COMBAT;
-    app.liveTeams = [];
-    app.elapsedMilliseconds = 0;
-  };
-
-  $effect(initializeCombat);
-</script>
-
-<crow class="fixed bottom-1/2 left-20 w-40 gap-2 bg-gray-300 p-2" vertical>
-  Teams {teamCount}:
-  <input type="range" min="1" max="8" bind:value={teamCount} />
-
-  Combatants {combatantCount}:
-  <input type="range" min="1" max="6" bind:value={combatantCount} />
-
-  <Button onclick={reset}>Reset</Button>
-  <Button onclick={startCombat} disabled={app.combat.duration !== 0}>Start combat</Button>
-</crow>
-
-{#if app.combat.teamsStartState.length}
-  <Combat />
-{/if}
diff --git a/src/routes/equipment-scaling/+page.svelte b/src/routes/equipment-scaling/+page.svelte
deleted file mode 100644
index e59e015b..00000000
--- a/src/routes/equipment-scaling/+page.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-  import EQUIPMENT, { ALL_EQUIPMENT } from '@/constants/EQUIPMENT';
-
-  let chosenEquipment = $state('sword');
-
-  let equipmentPool = $derived([
-    EQUIPMENT(chosenEquipment),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 1 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 2 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 3 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 4 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 5 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 6 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 7 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 8 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 9 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 10 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 11 } }),
-    EQUIPMENT(chosenEquipment, false, { overrides: { level: 12 } })
-  ]);
-</script>
-
-<Headline text="equipment scaling" />
-
-<!--onchange={({ target: { value } }) => console.info(value)}-->
-<Dropdown
-  options={Object.keys(ALL_EQUIPMENT)}
-  value={chosenEquipment}
-  onchange={({ target: { value } }: any) => (chosenEquipment = value)}
-/>
-
-{#each equipmentPool as equipment, i (`${equipment.id}_${i}`)}
-  {@const hydratedEquipment = EQUIPMENT(equipment, true)}
-  <crow left class="gap-2">
-    {#if i === 0}
-      base
-    {:else}
-      level {i}
-    {/if}
-    <EquipmentLink {...hydratedEquipment} />
-  </crow>
-{/each}
-
-<!-- <Debug data={equipment} /> -->
diff --git a/src/routes/random-duel/+page.svelte b/src/routes/random-duel/+page.svelte
deleted file mode 100644
index 6def58d7..00000000
--- a/src/routes/random-duel/+page.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-  import { generateCombat, healFull, prepareTeams } from '@/ts/combat';
-  import { getExperienceRangeForLevel, getLevelByExperience } from '@/ts/level';
-
-  let count = $derived(Math.floor(getLevelByExperience(app.experience) / 5) + 1);
-  let selectedBrawlersPretty = $derived(
-    app.selectedBrawlers.length || count === 1 ? Math.max(app.selectedBrawlers.length, 1) : 'X'
-  );
-
-  $effect(() => {
-    app.maxBrawlers = count;
-  });
-
-  const runCombat = async () => {
-    const { minXp, maxXp } = getExperienceRangeForLevel(getLevelByExperience(app.experience));
-    console.log(minXp, maxXp);
-    const characters = await app.socket.sendAsync('pvp/get-random-opponent', {
-      count: app.selectedBrawlers.length,
-      minXp,
-      maxXp
-    });
-
-    if (characters.length) {
-      const selected = app.characters.filter(({ uuid }) => app.selectedBrawlers.includes(uuid));
-      if (!selected) return;
-
-      const myCharacters = $state.snapshot(selected);
-      app.selectedBrawlers = [];
-      app.combat = generateCombat(
-        prepareTeams(myCharacters, healFull(characters.slice(0, myCharacters.length)))
-      );
-
-      app.overlay = 'Combat';
-    } else {
-      // Fight bot
-      console.error('No opponents found, fighting bot (not implemented)');
-    }
-  };
-</script>
-
-<div class="mb-8">
-  <Headline text="random duel">
-    <crow class="w-full !justify-between">
-      <Pill text="{selectedBrawlersPretty}&nbsp;vs&nbsp;{selectedBrawlersPretty}" />
-      <!-- <CoreStats combatStats={creature.combatStats} /> -->
-    </crow>
-  </Headline>
-
-  <crow>
-    <crow class="aspect-square w-40 !flex-none rounded-full bg-black/40 text-9xl text-white">
-      ?
-    </crow>
-  </crow>
-</div>
-
-<CharacterSelection {runCombat} {count} />
diff --git a/src/routes/reset-password/[secret]/+page.svelte b/src/routes/reset-password/[secret]/+page.svelte
deleted file mode 100644
index f3e61f8e..00000000
--- a/src/routes/reset-password/[secret]/+page.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { notify } from '@/ts/actions';
-
-  let password = $state('');
-  let error: boolean | string | undefined = $state(undefined);
-
-  const reset = async (e: Event) => {
-    e.preventDefault();
-    try {
-      await app.socket.sendAsync('user/password/set-new', {
-        secret: $page.params.secret,
-        password
-      });
-
-      await goto('/', { replaceState: true });
-      notify({ success: 'your new password was set' });
-    } catch (error) {
-      notify(error);
-    }
-  };
-  $effect(() => {
-    (async () => {
-      try {
-        await app.socket.sendAsync('user/password/reset-eligibility', {
-          secret: $page.params.secret
-        });
-        error = false;
-      } catch (e: any) {
-        error = e.error;
-      }
-    })();
-  });
-</script>
-
-<h2>Password reset</h2>
-
-{#if error}
-  <div>{error}<br /><br /><a href="/">Go to startpage</a></div>
-{:else if error === false}
-  <form onsubmit={reset}>
-    <Input type="password" bind:value={password} placeholder="Enter a new password" />
-    <Button type="submit">Submit</Button>
-  </form>
-{/if}
diff --git a/src/routes/the-arena/+page.svelte b/src/routes/the-arena/+page.svelte
deleted file mode 100644
index de15c3ba..00000000
--- a/src/routes/the-arena/+page.svelte
+++ /dev/null
@@ -1,154 +0,0 @@
-<script lang="ts">
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import { ALL_FIGHTS } from '@/constants/FIGHTS';
-  import { getExperienceReward, getLevelByExperience } from '@/ts/level';
-  import { runCombatSimulations } from '@/ts/utils';
-  import type { Character } from '@/types/character';
-
-  const { IS_PROD } = ENV;
-
-  const SIMULATION_COUNT = 10;
-
-  const fights = ALL_FIGHTS.sort((a, b) => {
-    // 1) Group by minLevel
-    if (a.minLevel !== b.minLevel) return a.minLevel - b.minLevel;
-
-    // 2) Within the same minLevel, put non-bosses first, bosses last
-    if (a.boss !== b.boss) return a.boss ? 1 : -1;
-
-    // 3) If both are (non-)bosses, sort by maxLevel
-    return a.maxLevel - b.maxLevel;
-  }).map((fight) => ({
-    ...fight,
-    characters: fight.characters.map((character) => ({
-      ...character,
-      overrides: {
-        ...character?.overrides,
-        level: fight.minLevel,
-        equipment: {
-          mainHand: { overrides: { level: fight.minLevel } },
-          offHand: { overrides: { level: fight.minLevel } },
-          armor: { overrides: { level: fight.minLevel } }
-        }
-      }
-    }))
-  }));
-  // .slice(0, 1);
-
-  let hideTreshold = $derived(app.bossHighscore + 5);
-  let ludusLevel = $derived(getLevelByExperience(app.experience));
-</script>
-
-<Headline text="the arena" />
-
-<crow vertical up left class="-mx-4 !w-auto">
-  <crow up left class="gap-4 px-6 py-2 text-stone-900">
-    <div class="cinzel flex-1">name</div>
-    <div class="cinzel !w-12 text-center">level</div>
-    <div class="cinzel !w-12 text-left">loot</div>
-
-    {#if !IS_PROD}
-      <div class="cinzel !w-12 text-right">win</div>
-    {/if}
-    <!-- <div class="cinzel flex-2 text-right">stats</div> -->
-    <crow class="!w-30 !flex-none" right>
-      <!-- Name -->
-    </crow>
-  </crow>
-  {#each fights as { characters, id, name, minLevel, maxLevel, boss }, i}
-    {@const wins = runCombatSimulations(
-      SIMULATION_COUNT,
-      [$state.snapshot(app.characters[0] as Character)],
-      characters,
-      undefined,
-      id
-    )}
-    {@const isLocked = hideTreshold < minLevel}
-    {@const bossCompleted = boss && app.bossHighscore >= minLevel}
-
-    <Clickable
-      href="/the-arena/{id}"
-      onclick={(e) => {
-        if (isLocked || bossCompleted) {
-          e.preventDefault();
-          return;
-        }
-      }}
-      class={tw(
-        'crow left w-full gap-4 px-6 py-2 text-sm transition-all duration-500',
-        i % 2 === 0 ? 'bg-stone-50' : 'bg-stone-100',
-        boss && 'boss mt-12 py-8',
-        !isLocked &&
-          !bossCompleted &&
-          'hover:bg-gradient-to-r hover:from-transparent hover:via-stone-200 hover:to-transparent active:from-stone-100 active:via-stone-50 active:to-stone-100',
-        (isLocked || bossCompleted) && 'cursor-default',
-        isLocked && 'opacity-50'
-      )}
-    >
-      <crow left class="cinzel flex-1 gap-2 text-base text-nowrap">
-        {isLocked ? '?' : name}
-        {#if boss}
-          <Pill text="Bossfight" />
-        {/if}
-      </crow>
-      <div class="!w-12 text-center">{minLevel} {minLevel === maxLevel ? '' : `- ${maxLevel}`}</div>
-      <div class={tw('!w-12 text-left')}>
-        <div class={tw(ludusLevel > maxLevel && 'text-gray-400 line-through')}>
-          {getExperienceReward(characters.length, minLevel, maxLevel, boss)} XP
-        </div>
-      </div>
-      {#if !IS_PROD}
-        <div class="!w-12 text-right">{(wins / SIMULATION_COUNT) * 100}%</div>
-      {/if}
-      <!-- <div class="flex-2">
-        <crow right>
-          <CoreStats combatStats={creature.combatStats} small />
-        </crow>
-      </div> -->
-      <crow right class="!w-30 !flex-none gap-6">
-        {#each characters as character}
-          {@const { image } = CHARACTERS(character, true)}
-          <crow right class={tw('!w-4 !flex-none gap-2', boss && '!w-12')}>
-            <div class={tw('-my-2 -mr-6 w-10', boss && 'w-20')}>
-              <crow
-                class={tw(
-                  'glass relative aspect-square w-full overflow-hidden !rounded-none',
-                  !isLocked && 'up'
-                )}
-              >
-                {#if isLocked}
-                  <crow class="w-5 !flex-none rounded-full bg-gray-800/40 font-bold text-white">
-                    ?
-                  </crow>
-                {:else}
-                  <img
-                    class={tw(
-                      'h-auto w-[120%] max-w-none scale-x-[-1] [grid-area:1/1]',
-                      bossCompleted && 'grayscale'
-                    )}
-                    src="/images/races/{image}"
-                    alt=""
-                  />
-                  {#if bossCompleted}
-                    <crow class="absolute inset-0">
-                      <Icon name="checkmark" class="text-4xl text-green-500 drop-shadow-lg" />
-                    </crow>
-                  {/if}
-                {/if}
-              </crow>
-            </div>
-          </crow>
-        {/each}
-      </crow>
-    </Clickable>
-  {/each}
-</crow>
-
-<style>
-  :global(.boss + .boss) {
-    margin-top: 0 !important;
-  }
-  :global(.boss:has(+ .boss)) {
-    margin-bottom: 0 !important;
-  }
-</style>
diff --git a/src/routes/the-arena/[fightId]/+page.svelte b/src/routes/the-arena/[fightId]/+page.svelte
deleted file mode 100644
index 33929139..00000000
--- a/src/routes/the-arena/[fightId]/+page.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import { generateCombat, prepareTeams } from '@/ts/combat';
-  import { goto } from '$app/navigation';
-  import { ALL_FIGHTS } from '@/constants/FIGHTS';
-  import CHARACTERS from '@/constants/CHARACTERS';
-  import { allowedNumberOfCharacters, getExperienceReward } from '@/ts/level';
-  import { calculateCombatStatsByCharacter, runCombatSimulations } from '@/ts/utils';
-  import type { Character, CharacterRef } from '@/types/character';
-
-  const { IS_PROD } = ENV;
-
-  const {
-    params: { fightId }
-  } = $page;
-
-  let fight = ALL_FIGHTS.find(({ id }) => id === fightId) as any;
-  let characters = $derived(
-    fight.characters.map((character: CharacterRef[]) => ({
-      ...character,
-      overrides: {
-        level: fight.minLevel,
-        equipment: {
-          mainHand: { overrides: { level: fight.minLevel } },
-          offHand: { overrides: { level: fight.minLevel } },
-          armor: { overrides: { level: fight.minLevel } }
-        }
-      }
-    }))
-  );
-
-  $effect(() => {
-    app.maxBrawlers = fight.allowedNumberOfCharacters;
-  });
-
-  const runCombat = () => {
-    const selected = app.characters.filter(({ uuid }) => app.selectedBrawlers.includes(uuid));
-    if (!selected) return;
-
-    app.combat = generateCombat(
-      prepareTeams($state.snapshot(selected), characters),
-      undefined,
-      fight.id
-    );
-    console.info(app.combat);
-
-    app.selectedBrawlers = [];
-
-    app.overlay = 'Combat';
-  };
-
-  let brawlersSelected = $derived(app.selectedBrawlers.length > 0);
-  let descriptionOpen = $derived(!brawlersSelected && fight.characters.length === 1);
-</script>
-
-<GoBack onclick={() => goto('/the-arena')} />
-
-<Headline text={fight.name}>
-  <crow class="w-full !justify-between">
-    <crow left class="gap-2">
-      <Pill text="{fight.allowedNumberOfCharacters}&nbsp;vs&nbsp;{fight.characters.length}" />
-      {#if fight.boss}
-        <Pill text="bossfight" />
-        <Pill text="luck disabled" class="bg-red-200 text-red-400" />
-      {/if}
-    </crow>
-    <span class="text-gray-400">
-      {#if !IS_PROD}
-        {(runCombatSimulations(
-          10,
-          [$state.snapshot(app.characters[0] as Character)],
-          characters,
-          undefined,
-          fight.id
-        ) /
-          10) *
-          100}% win chance
-      {/if}
-      <!-- {getExperienceReward(fight.characters.length, fight.minLevel, fight.maxLevel, fight.boss)} XP -->
-    </span>
-    <!-- <CoreStats combatStats={creature.combatStats} /> -->
-  </crow>
-</Headline>
-
-{#each characters as character}
-  {@const creature = CHARACTERS(character, true)}
-  {@const combatStats = calculateCombatStatsByCharacter(creature)}
-  <!-- <Headline text={creature.name} small>
-    <CoreStats combatStats={creature.combatStats} />
-  </Headline> -->
-
-  <crow left class="!items-stretch !justify-stretch overflow-hidden">
-    <crow
-      class={tw(
-        'w-0 !flex-none opacity-0 transition-all duration-200',
-        !descriptionOpen && 'w-20 opacity-100'
-      )}
-    >
-      <CoreStats {combatStats} small vertical />
-    </crow>
-    <!-- <pre>
-    {JSON.stringify(creature, null, 2)}
-    </pre> -->
-
-    <crow up left vertical>
-      <Accordion isOpen={descriptionOpen}>
-        <div class="min-h-54 max-w-100 pb-8 text-sm">
-          <!-- <crow left class="mb-6">
-            Stats with gear:
-            <CoreStats combatStats={calculateCombatStatsByCharacter(creature)} />
-          </crow> -->
-          <crow left class="mb-6">
-            <CoreStats {combatStats} />
-          </crow>
-          {#if !IS_PROD && false}
-            <crow up left vertical>
-              <Headline text="lucky stats" small />
-
-              <Stats
-                class="text-green-500"
-                stats={Object.entries(combatStats).filter(([key]) =>
-                  [
-                    'criticalChance',
-                    'criticalDamage',
-                    'blockChance',
-                    'dodgeChance',
-                    'magicChance'
-                  ].includes(key)
-                )}
-              />
-            </crow>
-          {/if}
-          {@html creature.description}
-        </div>
-      </Accordion>
-      <crow class="relative w-full" vertical left up>
-        <Accordion isOpen={descriptionOpen}>
-          <crow class="w-full !justify-between">
-            <h5>Abilities</h5>
-          </crow>
-        </Accordion>
-        <AbilityBar character={creature} abilities={creature.abilities} dndDisabled minimalistic />
-      </crow>
-    </crow>
-
-    <crow
-      class={tw(
-        'pointer-events-none relative w-40 !flex-none -scale-x-[1] bg-contain bg-center bg-no-repeat transition-all duration-200',
-        !descriptionOpen && 'w-20'
-      )}
-    >
-      <img src="/images/races/{creature.image}" class="absolute top-0 right-0 left-0" alt="" />
-    </crow>
-  </crow>
-{/each}
-
-<Hr class="mt-6 mb-6" />
-
-<CharacterSelection {runCombat} count={fight.allowedNumberOfCharacters} />
-
-<!-- <Debug data={selectedBrawlers} /> -->
diff --git a/src/routes/vendor/+page.svelte b/src/routes/vendor/+page.svelte
deleted file mode 100644
index fef954b6..00000000
--- a/src/routes/vendor/+page.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-  import EQUIPMENT, { ALL_EQUIPMENT } from '@/constants/EQUIPMENT';
-  import type { Equipment } from '@/types/equipment';
-  import { slotsInPrettyName } from '@/ts/equipment';
-  import { confirmWithDialog } from '@/ts/dialog';
-  import { formatCoins } from '@/ts/coin';
-  import BasicConfirmation from '@/components/dialog/BasicConfirmation.svelte';
-
-  let allEquipment: Equipment[] = $state(
-    Object.keys(ALL_EQUIPMENT).map((key) => EQUIPMENT(key, true))
-  );
-  let filteredEquipment: Equipment[] = $state(allEquipment);
-
-  const craftEquipment = (itemId: Equipment['id']) => {
-    const item = EQUIPMENT(itemId, false);
-    const { cost, level } = EQUIPMENT(item, true);
-    item.overrides = { level };
-    const { silver } = formatCoins(cost);
-
-    confirmWithDialog(BasicConfirmation as any, {
-      text: `Are you sure you want to acquire this equipment for <span class="text-white">${silver} coins</span>?`,
-      confirm: () => {
-        app.coins -= cost;
-        app.inventory.push(item);
-      }
-    });
-  };
-</script>
-
-<Headline text="vendor" />
-
-<EquipmentFilter {allEquipment} bind:filteredEquipment />
-
-<crow vertical up left class="-mx-4 mt-4 !w-auto">
-  <crow up left class="gap-4 px-6 py-2">
-    <div class="cinzel flex-1">Name</div>
-    <div class="cinzel flex-1">Slots in</div>
-    <!-- <div class="cinzel flex-1">Level</div> -->
-    <div class="cinzel flex-1">Cost</div>
-    <div class="cinzel w-20"></div>
-  </crow>
-  {#each filteredEquipment as item, i (item.uuid)}
-    <crow left class="w-full gap-4 px-6 py-2 {i % 2 === 0 ? 'bg-stone-50' : 'bg-white'}">
-      <crow left class="flex-1 gap-2">
-        <!-- <div class="w-6">
-          <div class="overflow-hidden rounded-full">
-            <img src="/images/equipment/{item.equipmentName}/01.png" alt="" />
-          </div>
-        </div> -->
-
-        <EquipmentLink {...item} />
-      </crow>
-      <div class="flex-1 text-sm text-gray-600">{slotsInPrettyName(item.slotsIn)}</div>
-      <!-- <div class="flex-1 text-sm text-gray-600">{item.level}</div> -->
-      <div class="flex-1">
-        <Coins renderAll amount={item.cost} class="right" />
-      </div>
-      <crow class="w-20 !flex-none" right>
-        <Button
-          disabled={app.coins < item.cost}
-          tertiary
-          onclick={craftEquipment.bind(undefined, item.id)}
-        >
-          Acquire
-        </Button>
-      </crow>
-    </crow>
-  {/each}
-</crow>
diff --git a/src/ts/abilityEntity.ts b/src/ts/abilityEntity.ts
deleted file mode 100644
index 71f792f9..00000000
--- a/src/ts/abilityEntity.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import ABILITIES from '@/constants/ABILITIES';
-
-const GET = (entities: any, id: string, uuid?: string, fullBody: boolean = false) => ({
-  uuid: uuid || crypto.randomUUID(),
-  id,
-  ...(fullBody ? entities[id] : fullBody)
-});
-
-export default {
-  ability: (id: string | any, fullBody: boolean = false) =>
-    GET(
-      ABILITIES,
-      typeof id === 'string' ? id : id.id,
-      typeof id === 'string' ? undefined : id.uuid,
-      fullBody
-    )
-};
diff --git a/src/ts/actions.ts b/src/ts/actions.ts
deleted file mode 100644
index 46e239a0..00000000
--- a/src/ts/actions.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import app from '@/app.svelte';
-
-export const disableGameKeyboard = () => {
-  app.gameKeyboardDisabled = true;
-};
-export const enableGameKeyboard = () => {
-  app.gameKeyboardDisabled = false;
-};
-export const notify = (payload: any) => {
-  const { error, warning, success, info } = payload;
-
-  const message = error || warning || success || info;
-
-  if (app.notifications.find((string) => string.includes(message))) {
-    return true;
-  }
-
-  if (error) app.notifications.push(JSON.stringify({ type: 'error', message }));
-  if (warning) app.notifications.push(JSON.stringify({ type: 'warning', message }));
-  if (success) app.notifications.push(JSON.stringify({ type: 'success', message }));
-  if (info) app.notifications.push(JSON.stringify({ type: 'info', message }));
-
-  return true;
-};
-export const removeFirstNotification = () => {
-  const [_first, ...rest] = app.notifications;
-  app.notifications = [...rest];
-
-  return true;
-};
diff --git a/src/ts/coin.ts b/src/ts/coin.ts
deleted file mode 100644
index f73a8bfd..00000000
--- a/src/ts/coin.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const formatCoins = (amount: number) => {
-  // const gold = Math.floor(amount / 10000);
-  // const silver = Math.floor((amount % 10000) / 100);
-  const gold = 0;
-  const silver = Math.floor(amount / 100);
-  const copper = amount % 100;
-
-  return { gold, silver, copper };
-};
diff --git a/src/ts/combat.ts b/src/ts/combat.ts
deleted file mode 100644
index f582442a..00000000
--- a/src/ts/combat.ts
+++ /dev/null
@@ -1,594 +0,0 @@
-import { ABILITY_PRIORITY, COMBAT_TICK_TIME } from '@/constants/APP';
-import type { CombatEvent } from '@/types/combat';
-import type { Team } from '@/types/team';
-import { calculateCombatStatsByCharacter, prepareCombatant, seededRandom } from '@/ts/utils';
-import type { Combatant } from '@/types/combatant';
-import type { VFX } from '@/types/vfx';
-import type { SFX } from '@/types/sfx';
-import _VFX from '@/constants/VFX';
-import _SFX from '@/constants/SFX';
-import { AbilityType, type Ability } from '@/types/ability';
-import type { CharacterRef } from '@/types/character';
-import CHARACTERS from '@/constants/CHARACTERS';
-import { ALL_FIGHTS } from '@/constants/FIGHTS';
-
-const isLucky = (chance: number, seed: string, luckDisabled: boolean) => {
-  if (luckDisabled) return false;
-  const random = seededRandom(0, 1, seed, 0.01);
-
-  return random < chance;
-};
-
-export const healFull = (characters: CharacterRef[]) => {
-  return characters.map((character) => {
-    const combatStats = calculateCombatStatsByCharacter(CHARACTERS(character, true));
-
-    // character.overrides.combatStats.currentHealth = combatStats.maxHealth;
-
-    // return character;
-    return {
-      ...character,
-      overrides: {
-        ...character.overrides,
-        combatStats: {
-          ...character.overrides?.combatStats,
-          currentHealth: combatStats.maxHealth
-        }
-      }
-    };
-  });
-};
-
-export const prepareTeams = (...teams: [CharacterRef[], CharacterRef[], ...CharacterRef[][]]) => {
-  const preparedCombatants = teams.map((team, teamIndex) => {
-    // Heal full for non-player teams
-
-    const preparedTeam = (teamIndex !== 0 ? healFull(team) : team).map(
-      (combatant, combatatantIndex) => {
-        return prepareCombatant(
-          CHARACTERS(combatant, true),
-          teams.length,
-          team.length,
-          teamIndex,
-          combatatantIndex
-        );
-      }
-    );
-
-    return preparedTeam;
-  });
-
-  return preparedCombatants.map((team, index) => ({
-    name: `Team ${index}`,
-    index,
-    combatants: team
-  }));
-};
-
-const moreThanOneTeamStanding = (teams: Team[]) => {
-  const teamsStanding = teams.filter((team) =>
-    team.combatants.some((combatant) => combatant.combatStats.currentHealth! > 0)
-  );
-  return teamsStanding.length > 1;
-};
-
-const bufferAnimation = (combatant: Combatant, vfx: VFX, timestamp: number) => {
-  const newVFX = structuredClone(vfx);
-
-  newVFX.start = timestamp;
-  newVFX.end = timestamp + COMBAT_TICK_TIME;
-
-  newVFX.id = crypto.randomUUID();
-
-  combatant.animations.push(newVFX);
-};
-
-const bufferAudio = (audio: SFX[], sfx: SFX, timestamp: number) => {
-  const newSFX = structuredClone(sfx);
-
-  newSFX.id = crypto.randomUUID();
-  newSFX.start = timestamp;
-
-  audio.push(newSFX);
-};
-
-// TODO: refine this, right now it adds more animations than needed
-const injectAnimation = (
-  combatant: Combatant,
-  target: Combatant,
-  currentAbility: Ability,
-  now: number,
-  teams: Team[],
-  events: CombatEvent[] = []
-) => {
-  const vfx = structuredClone(currentAbility.vfx);
-  if (
-    !['basicAttackFast', 'basicAttackRegular', 'basicAttackSlow', 'whirlwind', 'block'].includes(
-      vfx.vfxName
-    )
-  )
-    return;
-  const cIndex = teams[combatant.teamIndex].combatants.findIndex(({ id }) => id === combatant.id);
-
-  vfx.start = now - currentAbility.ticks * COMBAT_TICK_TIME;
-  const lingeringTime = vfx.vfxName === 'block' ? 250 : 0;
-  vfx.end = now + lingeringTime;
-
-  vfx.id = crypto.randomUUID();
-  vfx.targetX = target.position.x;
-  vfx.targetY = target.position.y;
-  // vfx.injected = true;
-
-  combatant.injectedAnimations.push(vfx);
-
-  events.forEach((event) => {
-    if (event.eventTimestamp >= now - currentAbility.ticks * COMBAT_TICK_TIME) {
-      event.teams[combatant.teamIndex].combatants[cIndex].animations.push(
-        ...combatant.injectedAnimations
-      );
-    }
-  });
-};
-
-const pickAbility = (
-  abilities: Ability[],
-  ability: Ability,
-  now: number,
-  startOrEnd: 'start' | 'end'
-) =>
-  now % abilities[abilities.length - 1].end! ===
-  ability[startOrEnd]! % abilities[abilities.length - 1].end!;
-
-const sortByAbilityPriority = (
-  a: Combatant,
-  b: Combatant,
-  now: number,
-  startOrEnd: 'start' | 'end'
-) => {
-  const aAbility = a.abilities.find((ability) =>
-    pickAbility(a.abilities, ability as Ability, now, startOrEnd)
-  ) as Ability;
-  const bAbility = b.abilities.find((ability) =>
-    pickAbility(b.abilities, ability as Ability, now, startOrEnd)
-  ) as Ability;
-
-  const aPriority = ABILITY_PRIORITY.indexOf(aAbility.id);
-  const bPriority = ABILITY_PRIORITY.indexOf(bAbility.id);
-
-  const normalizedAPriority = aPriority === -1 ? Number.MAX_SAFE_INTEGER : aPriority;
-  const normalizedBPriority = bPriority === -1 ? Number.MAX_SAFE_INTEGER : bPriority;
-
-  if (normalizedAPriority !== normalizedBPriority) return normalizedAPriority - normalizedBPriority;
-
-  return 0;
-};
-
-const timedAbility = (combatants: Combatant[], now: number, startOrEnd: 'start' | 'end') =>
-  combatants.filter((combatant) =>
-    combatant.abilities.some((ability) =>
-      pickAbility(combatant.abilities, ability as Ability, now, startOrEnd)
-    )
-  );
-
-const prioritySorting = (combatants: Combatant[], now: number, startOrEnd: 'start' | 'end') =>
-  combatants.sort((a: Combatant, b: Combatant) => sortByAbilityPriority(a, b, now, startOrEnd));
-
-const tickStatusEffects = (combatants: Combatant[], now: number) => {
-  combatants.forEach((combatant) => {
-    if (combatant.statuses.isStunned.ticks > 0) {
-      // combatant.combatStats.currentHealth -= combatant.statuses.isStunned.value;
-      combatant.statuses.isStunned.ticks -= 1;
-    }
-
-    if (combatant.statuses.isVulnerable.ticks > 0) {
-      combatant.statuses.isVulnerable.ticks -= 1;
-    } else {
-      combatant.statuses.isVulnerable.value = 0;
-    }
-
-    if (combatant.statuses.isBleeding.ticks > 0) {
-      const bleedDamage = combatant.statuses.isBleeding.value;
-      const weakenedDamage = (1 + combatant.statuses.isVulnerable.value) * bleedDamage;
-      const finalDamage = Math.floor(weakenedDamage);
-      combatant.combatStats.currentHealth -= finalDamage;
-      bufferAnimation(combatant, { ..._VFX.hurt, amount: finalDamage }, now);
-      combatant.statuses.isBleeding.ticks -= 1;
-    } else {
-      combatant.statuses.isBleeding.value = 0;
-    }
-  });
-};
-
-export const generateCombat = (
-  teams: Team[],
-  seed: string = `${Math.random()}`,
-  fightId?: string
-) => {
-  const luckDisabled = !!ALL_FIGHTS.find(({ id }) => id === fightId)?.boss;
-  const events: CombatEvent[] = [];
-
-  let now = 0;
-  let tickCount = 0;
-
-  const teamsStartState = structuredClone(teams);
-  teams = structuredClone(teams);
-
-  const audio: SFX[] = [];
-
-  let healingEfficiency = 1;
-
-  events.push(
-    structuredClone({
-      eventTimestamp: now,
-      teams
-    })
-  );
-
-  while (moreThanOneTeamStanding(teams)) {
-    // console.info(`--- Tick ${tickCount} at ${now}ms ---`);
-    const stillStandingCombatants = teams
-      .flatMap((team) => team.combatants.map((combatant) => combatant))
-      .filter((combatant) => combatant.combatStats.currentHealth > 0);
-
-    tickStatusEffects(stillStandingCombatants, now);
-
-    const combatantsStarting = timedAbility(stillStandingCombatants, now, 'start');
-    const combatantsEnding = timedAbility(stillStandingCombatants, now, 'end');
-    const orderedCombatantsStarting = prioritySorting(combatantsStarting, now, 'start');
-    const orderedCombatantsEnding = prioritySorting(combatantsEnding, now, 'end');
-
-    // START OF ABILITY
-    // Put this there so that block actually blocks at start of ability
-    orderedCombatantsStarting.forEach((combatant) => {
-      const currentAbilityIndex = combatant.abilities.findIndex((ability) =>
-        pickAbility(combatant.abilities, ability as Ability, now, 'start')
-      );
-      const currentAbility = combatant.abilities[currentAbilityIndex];
-
-      if (currentAbility.id === 'block') {
-        combatant.statuses.isBlocking = true;
-      }
-
-      combatant.damage = Math.floor(combatant.combatStats.damage * currentAbility.damage);
-    });
-
-    // END OF ABILITY
-    orderedCombatantsEnding.forEach((combatant, i) => {
-      const targetableCombatants = stillStandingCombatants.filter(
-        ({ teamIndex }) => teamIndex !== combatant.teamIndex
-      );
-      const currentAbilityIndex = combatant.abilities.findIndex((ability) =>
-        pickAbility(combatant.abilities, ability as Ability, now, 'end')
-      );
-      const currentAbility = combatant.abilities[currentAbilityIndex];
-
-      const target =
-        targetableCombatants[
-          seededRandom(
-            0,
-            targetableCombatants.length - 1,
-            `${seed}_${currentAbilityIndex}_${now}_defender`
-          )
-        ];
-
-      const damage = {
-        amount: 0,
-        isCritical: false
-      };
-      const heal = {
-        amount: 0
-      };
-
-      const isWindUp = currentAbility.type === AbilityType.WindUp;
-      const isStunned = combatant.statuses.isStunned;
-      const isBlocking = target.statuses.isBlocking;
-
-      if (now > 0) {
-        if (isStunned.value === 0) {
-          injectAnimation(combatant, target, currentAbility, now, teams, events);
-        }
-
-        if (isStunned.value === 1) {
-          if (isStunned.ticks === 0) {
-            combatant.statuses.isStunned = {
-              ticks: 0,
-              value: 0
-            };
-          }
-        } else if (isWindUp) {
-          const healingAmount = Math.floor(
-            combatant.combatStats.maxHealth * currentAbility.healing * healingEfficiency
-          );
-
-          const missingHealth =
-            combatant.combatStats.maxHealth - combatant.combatStats.currentHealth;
-          const actualHealingDone = Math.min(healingAmount, missingHealth);
-
-          combatant.combatStats.currentHealth += actualHealingDone;
-
-          if (actualHealingDone > 0) {
-            bufferAudio(audio, _SFX.chew, now - 200);
-            bufferAnimation(combatant, { ..._VFX.heal, amount: actualHealingDone }, now);
-          }
-
-          const isBlocked = isLucky(
-            target.combatStats.blockChance,
-            `${seed}_${tickCount}_${i}_blockChance`,
-            luckDisabled
-          );
-
-          const isDodged = isLucky(
-            target.combatStats.dodgeChance,
-            `${seed}_${tickCount}_${i}_dodgeChance`,
-            luckDisabled
-          );
-
-          if (isBlocking || isBlocked) {
-            bufferAudio(audio, _SFX.block, now - 100);
-            bufferAnimation(target, _VFX.attackBlocked, now);
-          } else if (isDodged) {
-            bufferAudio(audio, _SFX.dodge, now - 100);
-            bufferAnimation(target, _VFX.attackDodged, now);
-          } else {
-            const isCritical = isLucky(
-              combatant.combatStats.criticalChance,
-              `${seed}_${tickCount}_${i}_criticalDamage`,
-              luckDisabled
-            );
-
-            // console.info(
-            //   isCritical,
-            //   currentAbility.damage,
-            //   combatant.combatStats.criticalDamage,
-            //   currentAbility.damage + combatant.combatStats.criticalDamage
-            // );
-
-            const abilityDamage = combatant.combatStats.damage * currentAbility.damage;
-            const weakenedDamage = abilityDamage * (1 + target.statuses.isVulnerable.value);
-            const criticalDamage =
-              weakenedDamage * (1 + (isCritical ? combatant.combatStats.criticalDamage : 0));
-            damage.amount = Math.floor(criticalDamage);
-            damage.isCritical = isCritical;
-
-            let armorDamage = 0;
-            if (target.combatStats.currentArmor > 0) {
-              target.combatStats.currentArmor -= damage.amount;
-
-              armorDamage = damage.amount;
-              let overflow = 0;
-              if (target.combatStats.currentArmor < 0) {
-                overflow = Math.abs(target.combatStats.currentArmor);
-                damage.amount = overflow;
-                armorDamage -= overflow;
-              } else {
-                damage.amount = 0;
-              }
-
-              bufferAnimation(target, { ..._VFX.armorHurt, amount: armorDamage, isCritical }, now);
-              if (overflow <= 0) {
-                bufferAudio(audio, _SFX.armorHit, now - 200);
-              }
-            }
-
-            target.combatStats.currentHealth -= damage.amount;
-
-            let playAudio = false;
-            if (damage.amount > 0) {
-              bufferAnimation(target, { ..._VFX.hurt, ...damage }, now);
-              playAudio = true;
-            }
-
-            if (currentAbility.statusEffects.includes('isExposed')) {
-              target.statuses.isExposed.value += currentAbility.ticks;
-
-              if (target.statuses.isExposed.value >= target.statuses.isExposed.max) {
-                const overflow = target.statuses.isExposed.value - target.statuses.isExposed.max;
-                target.statuses.isExposed.value = 0;
-                target.statuses.isVulnerable = {
-                  ticks: target.statuses.isVulnerable.ticks + 4 + overflow,
-                  value: 0.5
-                };
-              }
-            }
-
-            if (currentAbility.statusEffects.includes('isConcussed')) {
-              target.statuses.isConcussed.value += currentAbility.ticks;
-              if (target.statuses.isConcussed.value >= target.statuses.isConcussed.max) {
-                const overflow =
-                  target.statuses.isConcussed.value - target.statuses.isConcussed.max;
-                target.statuses.isConcussed.value = 0;
-                target.statuses.isStunned = {
-                  ticks: target.statuses.isStunned.value + 3 + overflow,
-                  value: 1
-                };
-              }
-            }
-
-            if (currentAbility.statusEffects.includes('isWounded')) {
-              target.statuses.isWounded.value += currentAbility.ticks;
-
-              if (target.statuses.isWounded.value >= target.statuses.isWounded.max) {
-                const tickDamage = currentAbility?.damage
-                  ? combatant.combatStats.damage * currentAbility.damage * 0.3
-                  : combatant.combatStats.damage * 0.2;
-
-                const value = Math.floor(tickDamage);
-                const overflow = target.statuses.isWounded.value - target.statuses.isWounded.max;
-                target.statuses.isWounded.value = 0;
-                target.statuses.isBleeding = {
-                  ticks: target.statuses.isBleeding.value + 4 + overflow,
-                  value
-                };
-              }
-            }
-
-            if (currentAbility.statusEffects.includes('isBleeding')) {
-              const tickDamage = currentAbility?.damage
-                ? combatant.combatStats.damage * currentAbility.damage * 0.3
-                : combatant.combatStats.damage * 0.2;
-
-              const value = Math.floor(tickDamage);
-
-              target.statuses.isBleeding = {
-                ticks: target.statuses.isBleeding.ticks + currentAbility.duration,
-                value:
-                  target.statuses.isBleeding.value > value
-                    ? target.statuses.isBleeding.value
-                    : value
-              };
-            }
-
-            if (currentAbility.statusEffects.includes('isVulnerable')) {
-              target.statuses.isVulnerable = {
-                ticks: target.statuses.isVulnerable.ticks + currentAbility.duration,
-                value: 0.5
-              };
-            }
-
-            if (
-              playAudio ||
-              currentAbility.statusEffects.includes('isBleeding') ||
-              currentAbility.name === 'Demoralizing Shout'
-            ) {
-              bufferAudio(audio, currentAbility.sfx, now - 200);
-            }
-          }
-
-          if (currentAbility.id === 'harden') {
-            if (combatant.combatStats.currentArmor > 0) {
-              combatant.combatStats.currentArmor = combatant.combatStats.maxArmor;
-            }
-          }
-
-          if (currentAbility.id === 'shieldBash') {
-            target.statuses.isStunned = {
-              ticks: target.statuses.isStunned.ticks + 3,
-              value: 1
-            };
-          }
-
-          if (currentAbility.id === 'kick') {
-            // My implementation attempt
-            // const targetCurrentAbility = target.abilitiesCopied.find(
-            //   (ability) =>
-            //     ability.start % target.abilitiesCopied[target.abilitiesCopied.length - 1].end! <=
-            //       now % target.abilitiesCopied[target.abilitiesCopied.length - 1].end! &&
-            //     ability.end % target.abilitiesCopied[target.abilitiesCopied.length - 1].end! >
-            //       now % target.abilitiesCopied[target.abilitiesCopied.length - 1].end!
-            // );
-            const total = target.abilitiesCopied[target.abilitiesCopied.length - 1].end!;
-            const t = ((now % total) + total) % total; // normalize now into [0,total)
-
-            const targetCurrentAbility = target.abilitiesCopied.find((ability) => {
-              const start = ability.start % total;
-              const end = ability.end % total;
-
-              if (end > start) {
-                return t >= start && t < end; // normal segment
-              } else if (end < start) {
-                return t >= start || t < end; // wraps around
-              } else {
-                return true; // start === end → treat as full cycle, not zero-length
-              }
-            }) as Required<Ability>;
-
-            const endTime = targetCurrentAbility.end % total;
-            const remainingTime =
-              endTime > t
-                ? endTime - t // normal case
-                : total - t + endTime; // wrapped segment case
-            const ticks = remainingTime / COMBAT_TICK_TIME;
-
-            target.statuses.isStunned = {
-              ticks,
-              value: 1
-            };
-          }
-        } else if (currentAbility.id === 'block') {
-          combatant.statuses.isBlocking = false;
-        }
-      }
-
-      // console.table({
-      //   Tick: tickCount,
-      //   attacker: combatant.race,
-      //   ability: currentAbility.id,
-      //   damage: damage.amount,
-      //   target: target.race,
-      //   isBlocking,
-      //   targetStatuses: target.statuses
-      // });
-
-      teams.forEach((team) =>
-        team.combatants.forEach((c) => {
-          if (c.combatStats.currentHealth <= 0 && !c.statuses.knockedOut) {
-            c.statuses.knockedOut = now;
-            c.statuses.isBleeding = { ticks: 0, value: 0 };
-            c.statuses.isStunned = { ticks: 0, value: 0 };
-            c.statuses.isVulnerable = { ticks: 0, value: 0 };
-            c.statuses.isWounded = { max: 0, value: 0 };
-            c.statuses.isConcussed = { max: 0, value: 0 };
-            c.statuses.isExposed = { max: 0, value: 0 };
-          }
-        })
-      );
-    });
-
-    events.push(
-      structuredClone({
-        eventTimestamp: now,
-        teams
-      })
-    );
-
-    if (tickCount % 12 === 0 && tickCount !== 0) {
-      healingEfficiency = Math.max(0, healingEfficiency - 0.05);
-    }
-
-    now += COMBAT_TICK_TIME;
-    tickCount += 1;
-
-    // if (tickCount > 100) {
-    //   console.warn('Breaking out of combat loop after 24 ticks.');
-    //   break;
-    // }
-  }
-
-  const duration = events[events.length - 1]?.eventTimestamp;
-  const teamsEndState = events[events.length - 1].teams;
-  const winningTeam = teamsEndState.find((team) =>
-    team.combatants.some((combatant) => combatant.combatStats.currentHealth! > 0)
-  );
-
-  const combined = Object.values(
-    audio.reduce(
-      (acc, item) => {
-        const key = `${item.sfxName}-${item.start}`;
-        if (!acc[key]) {
-          acc[key] = {
-            sfxName: item.sfxName,
-            start: item.start,
-            duration: item.duration,
-            id: item.id,
-            variants: item.variants,
-            count: 1
-          };
-        } else {
-          acc[key].count += 1;
-        }
-        return acc;
-      },
-      {} as Record<string, SFX>
-    )
-  );
-
-  return {
-    audio: combined,
-    events,
-    teamsStartState,
-    teamsEndState,
-    duration,
-    winningTeam,
-    fightId
-  };
-};
diff --git a/src/ts/customEvent.ts b/src/ts/customEvent.ts
deleted file mode 100644
index 1b722551..00000000
--- a/src/ts/customEvent.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default (event: string, detail: any) =>
-  document.dispatchEvent(
-    new CustomEvent(event, {
-      detail
-    })
-  );
diff --git a/src/ts/dialog.ts b/src/ts/dialog.ts
deleted file mode 100644
index 7488f2ce..00000000
--- a/src/ts/dialog.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import app from '@/app.svelte';
-import type { Component, ComponentProps } from 'svelte';
-
-export type Dialog = {
-  Component: Component;
-  props: ComponentProps<Component>;
-};
-
-export const confirmWithDialog = (Component: Component, props: ComponentProps<Component>) =>
-  (app.dialog = {
-    Component,
-    props
-  });
diff --git a/src/ts/entity.ts b/src/ts/entity.ts
deleted file mode 100644
index 0c090d29..00000000
--- a/src/ts/entity.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { deepMerge } from '@/helpers';
-import type { DynamicObject } from '@/types/common';
-
-export default (
-  entities: any,
-  id: string,
-  uuid?: string,
-  fullBody: boolean = false,
-  overrides: DynamicObject = {}
-) => {
-  return {
-    ...deepMerge(
-      {
-        uuid: uuid || crypto.randomUUID(),
-        id,
-        ...(fullBody ? structuredClone(entities[id]) : undefined)
-      },
-      fullBody ? overrides : {}
-    ),
-    ...(JSON.stringify(overrides) !== '{}' ? { overrides } : {})
-  };
-};
diff --git a/src/ts/equipment.ts b/src/ts/equipment.ts
deleted file mode 100644
index 8cb768ee..00000000
--- a/src/ts/equipment.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { page } from '$app/stores';
-import type { EquipmentRef, EquipmentType, EquipmentSlot, Equipment } from '@/types/equipment';
-import { get } from 'svelte/store';
-import app from '@/app.svelte';
-import type { Character, CharacterRef } from '@/types/character';
-import EQUIPMENT from '@/constants/EQUIPMENT';
-import CHARACTERS from '@/constants/CHARACTERS';
-import { calculateCombatStatsByCharacter } from '@/ts/utils';
-
-export const correctHealth = (characterRef: Required<CharacterRef>, prevMax?: number) => {
-  const character = CHARACTERS(characterRef, true);
-  const combatStats = calculateCombatStatsByCharacter(character);
-
-  // Case 1: new current health is more than new max health, damage to 100%
-  // Case 2: previous max health is equal to current health, keep it full
-  // Case 3: no previous max health provided, assume full health (eg. level up / recruit)
-  if (
-    combatStats.maxHealth <= character.combatStats.currentHealth ||
-    prevMax === character.combatStats.currentHealth ||
-    prevMax === undefined
-  ) {
-    characterRef.overrides.combatStats.currentHealth = combatStats.maxHealth;
-  }
-
-  return characterRef;
-};
-
-const decideEquipmentSlot = (slotsIn: EquipmentType, character: Character) => {
-  if (slotsIn === 'oneHand') {
-    const mainHand = character.equipment.mainHand;
-    const offHand = character.equipment.offHand;
-
-    if (!mainHand) {
-      slotsIn = 'mainHand';
-    } else if (!offHand) {
-      slotsIn = 'offHand';
-    } else {
-      slotsIn = 'mainHand';
-    }
-  }
-
-  if (slotsIn === 'twoHand') {
-    slotsIn = 'mainHand';
-  }
-
-  return slotsIn;
-};
-
-export const dismantle = (itemRef: EquipmentRef) => {
-  const index = app.inventory.findIndex(({ uuid }) => uuid === itemRef.uuid);
-  if (index === -1) return;
-  app.inventory.splice(index, 1);
-};
-
-export const equip = (equipmentRef: EquipmentRef) => {
-  const characterIndex = Number(get(page)?.params.characterIndex) || 0;
-  if (characterIndex === undefined) return;
-
-  const equipment = EQUIPMENT(equipmentRef, true);
-
-  const characterRef = app.characters[characterIndex];
-  const character = CHARACTERS(characterRef, true);
-  let slotsIn = decideEquipmentSlot(equipment.slotsIn, character);
-  const slot = character.equipment[slotsIn];
-  const mainHand = character.equipment.mainHand
-    ? EQUIPMENT(character.equipment.mainHand, true)
-    : ({} as Equipment);
-
-  const index = app.inventory.findIndex((item) => item === equipmentRef);
-  // Remove item from inventory (equipment)
-  app.inventory.splice(index, 1);
-
-  // If something is already in the slot, push it to inventory
-  if (slot !== null) {
-    app.inventory.push(slot);
-  }
-
-  // If two handed weapon is being equipped, check if offHand needs to go to inventory
-  if (equipment.slotsIn === 'twoHand' && character.equipment.offHand) {
-    app.inventory.push(character.equipment.offHand);
-    characterRef.overrides.equipment.offHand = null;
-  }
-
-  // If oneHanded weapon is being equipped, check if mainHand is two hand (thus need to go to inventory)
-  if (
-    (slotsIn === 'mainHand' || slotsIn === 'offHand') &&
-    equipment.slotsIn !== 'twoHand' &&
-    mainHand?.slotsIn === 'twoHand' &&
-    character.equipment.mainHand !== null
-  ) {
-    app.inventory.push(character.equipment.mainHand);
-    characterRef.overrides.equipment.mainHand = null;
-
-    if (equipment.slotsIn !== 'offHand') slotsIn = 'mainHand';
-  }
-
-  // Replace whatever is in the slot
-  characterRef.overrides.equipment[slotsIn] = equipmentRef;
-
-  correctHealth(characterRef, calculateCombatStatsByCharacter(character).maxHealth);
-};
-
-export const unequip = (equipmentRef: EquipmentRef, slot: EquipmentSlot) => {
-  const characterIndex = Number(get(page)?.params.characterIndex);
-  if (characterIndex === undefined) return;
-
-  const characterRef = app.characters[characterIndex];
-  const character = CHARACTERS(characterRef, true);
-
-  app.inventory.push(equipmentRef);
-  characterRef.overrides.equipment[slot] = null;
-
-  correctHealth(characterRef, calculateCombatStatsByCharacter(character).maxHealth);
-};
-
-export const slotsInPrettyName = (slotsIn: EquipmentType | string) =>
-  ({
-    twoHand: 'Two-Handed',
-    oneHand: 'One-Handed',
-    mainHand: 'Main-Hand',
-    offHand: 'Off-Hand',
-    accessory: 'Accessory',
-    trinket: 'Trinket',
-    armor: 'Armor'
-  })[slotsIn];
diff --git a/src/ts/level.ts b/src/ts/level.ts
deleted file mode 100644
index b7d8eb24..00000000
--- a/src/ts/level.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import app from '@/app.svelte';
-
-const SCALING = 1.6;
-const MAX_LEVEL = 25;
-
-export const getLevelByExperience = (experience: number) => {
-  return Math.min(Math.floor(Math.pow(experience / 100, 1 / SCALING)) + 1, MAX_LEVEL);
-};
-
-export const getExperienceByLevel = (level: number) => {
-  return Math.pow(level - 1, SCALING) * 100;
-};
-
-export const getExperienceForNextLevel = (currentLevel: number) => {
-  const xpCurrentLevel = getExperienceByLevel(currentLevel);
-  const xpNextLevel = getExperienceByLevel(currentLevel + 1);
-  return Math.floor(xpNextLevel - xpCurrentLevel);
-};
-
-export const getCurrentExperienceAtLevel = (experience: number) => {
-  const currentLevel = getLevelByExperience(experience);
-  const xpForCurrentLevel = getExperienceByLevel(currentLevel);
-  return Math.ceil(experience - xpForCurrentLevel);
-};
-
-export const allowedNumberOfCharacters = () => {
-  return Math.floor(app.accountRewards / 5) + 1;
-};
-
-export const getExperienceRangeForLevel = (level: number) => {
-  const minXp = getExperienceByLevel(level) + 1;
-  let maxXp = getExperienceByLevel(level + 1);
-
-  if (level + 1 > MAX_LEVEL) {
-    maxXp = Infinity;
-  }
-
-  return { minXp: Math.floor(minXp), maxXp: Math.floor(maxXp) };
-};
-
-export const getExperienceReward = (
-  numberOfEnemies: number,
-  minLevel: number,
-  maxLevel: number,
-  boss: boolean
-) => {
-  return 40 * numberOfEnemies * (boss ? 10 : 1) + 40 * Math.ceil((minLevel + maxLevel) / 2) * 0.2;
-};
diff --git a/src/ts/loadLocalStorage.ts b/src/ts/loadLocalStorage.ts
deleted file mode 100644
index d0672f72..00000000
--- a/src/ts/loadLocalStorage.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { browser } from '$app/environment';
-import type { DynamicObject } from '@/types/common';
-
-export default (props: DynamicObject) =>
-  Object.entries(props).reduce(
-    (a, [key, value]) => ({
-      ...a,
-      [key]:
-        browser && window.localStorage.getItem(key)
-          ? JSON.parse(window.localStorage.getItem(key) as string)
-          : value
-    }),
-    {}
-  );
diff --git a/src/ts/mediaQuery.ts b/src/ts/mediaQuery.ts
deleted file mode 100644
index 2d58ceb7..00000000
--- a/src/ts/mediaQuery.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { DynamicObject } from '@/types/common';
-import { writable } from 'svelte/store';
-
-const calculateMedia = (mqls: any) => {
-  const media: DynamicObject = { classes: '' };
-  const mediaClasses: any[] = [];
-  Object.keys(mqls).forEach((key: any) => {
-    media[key] = mqls[key].matches;
-    if (media[key]) {
-      mediaClasses.push(key);
-    }
-  });
-
-  media.classes = mediaClasses.join(' ');
-  return media;
-};
-
-export default (queries: DynamicObject) =>
-  writable({}, (set) => {
-    if (typeof window === 'undefined') return;
-
-    const mqls: DynamicObject = {};
-    const updateMedia = () => set(calculateMedia(mqls));
-
-    Object.keys(queries).forEach((key: any) => {
-      mqls[key] = window.matchMedia(queries[key]);
-      mqls[key].addEventListener('change', updateMedia);
-    });
-
-    updateMedia();
-
-    return () =>
-      Object.keys(mqls).forEach((key) => mqls[key].removeEventListener('change', updateMedia));
-  });
diff --git a/src/ts/use.ts b/src/ts/use.ts
deleted file mode 100644
index 2f2b72db..00000000
--- a/src/ts/use.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import app from '@/app.svelte';
-
-export type Tooltip = {
-  children: () => any;
-  props: any;
-  x: number;
-  y: number;
-  direction?: 'up' | 'down' | 'left' | 'right';
-  lockInPlace: boolean;
-  targetX: number;
-  targetY: number;
-  visible: boolean;
-};
-
-const tooltip = (node: Node, item: any) => {
-  const mouseEnter = (event: MouseEvent) => {
-    const rect = (node as HTMLElement).getBoundingClientRect();
-
-    let targetX = rect.left + rect.width / 2;
-    let targetY = rect.top + rect.height / 2;
-
-    if (item?.direction === 'up') targetY = rect.top;
-    if (item?.direction === 'down') targetY = rect.top + rect.height;
-    if (item?.direction === 'right') targetX = rect.left + rect.width;
-    if (item?.direction === 'left') targetX = rect.left;
-
-    const { clientX, clientY } = event;
-
-    app.tooltip = {
-      x: clientX,
-      y: clientY,
-      targetX,
-      targetY,
-      visible: item?.props?.visible !== undefined ? item.props.visible : true,
-      ...item,
-      props: { ...item.props } // strip reference
-    };
-
-    document.addEventListener('mousemove', mouseMove as EventListener);
-  };
-
-  const mouseMove = (event: MouseEvent) => {
-    if (!app.tooltip) return;
-    app.tooltip.x = event.clientX;
-    app.tooltip.y = event.clientY;
-  };
-
-  const mouseLeave = () => {
-    if (!app.tooltip) return;
-    app.tooltip.visible = false;
-  };
-
-  node.addEventListener('mouseenter', mouseEnter as EventListener);
-  node.addEventListener('mouseleave', mouseLeave as EventListener);
-
-  return {
-    destroy: () => {
-      node.removeEventListener('mouseenter', mouseEnter as EventListener);
-      document.removeEventListener('mousemove', mouseMove as EventListener);
-      node.removeEventListener('mouseleave', mouseLeave as EventListener);
-    }
-  };
-};
-
-// let itemBeingDragged;
-// let clone;
-// const drops = [];
-// let x, y;
-
-// const drag = (node, item) => {
-//   if (!item?.dragFrom) return;
-
-//   node.style.touchAction = 'none';
-
-//   const end = (event) => {
-//     const { which, type } = event;
-//     if (which !== 1 && type !== 'touchend') return;
-
-//     node.style.pointerEvents = 'auto';
-
-//     if (itemBeingDragged) {
-//       let failed = true;
-//       drops.forEach((drop) => {
-//         const { left, top, width, height } = drop.getBoundingClientRect();
-//         if (
-//           x > left &&
-//           x < left + width &&
-//           y > top &&
-//           y < top + height &&
-//           !itemBeingDragged?.dropped
-//         ) {
-//           drop.dispatchEvent(new CustomEvent('attemptDrop'));
-//           failed = false;
-//           itemBeingDragged.dropped = true;
-//         } else {
-//           drop.dispatchEvent(new CustomEvent('outside'));
-//         }
-//       });
-
-//       if (failed) {
-//         // TODO: remove this in the future if no bug seems to be related to it
-//         // requestAnimationFrame(() =>
-//         // );
-//         node.dispatchEvent(
-//           new CustomEvent('dropOutside', {
-//             detail: document.elementFromPoint(x, y)
-//           })
-//         );
-//       }
-
-//       itemBeingDragged = undefined;
-//       document.body.removeChild(clone);
-//       node.style.opacity = 1;
-//     }
-
-//     node.dispatchEvent(
-//       new CustomEvent('dragging', {
-//         detail: {
-//           dragging: false,
-//           dragTarget: undefined,
-//           dragType: type
-//         }
-//       })
-//     );
-
-//     window.removeEventListener('mousemove', move);
-//     window.removeEventListener('mouseup', end);
-//     window.removeEventListener('touchmove', move);
-//     window.removeEventListener('touchend', end, true);
-//   };
-
-//   const move = (event) => {
-//     const { type, touches, clientX, clientY, which } = event;
-//     if (which !== 1 && type !== 'touchmove') return;
-//     event.preventDefault();
-
-//     x = type === 'mousemove' ? clientX : touches[0].clientX;
-//     y = type === 'mousemove' ? clientY : touches[0].clientY;
-
-//     node.style.pointerEvents = 'none';
-//     node.dispatchEvent(
-//       new CustomEvent('dragging', {
-//         detail: {
-//           dragging: true,
-//           dragTarget: document.elementFromPoint(x, y),
-//           dragType: type
-//         }
-//       })
-//     );
-
-//     if (!itemBeingDragged) {
-//       itemBeingDragged = { ...item }; // Clone it otherwise `itemBeingDragged.dropped` won't reset on `itemBeingDragged = undefined`
-//       clone = node.cloneNode(true);
-//       document.body.appendChild(clone);
-//       node.style.opacity = 0;
-//       clone.style.position = 'fixed';
-//       const { top, left } = node.getBoundingClientRect();
-//       clone.style.top = `${top - y}px`;
-//       clone.style.left = `${left - x}px`;
-//       clone.style.zIndex = 25;
-//     }
-
-//     clone.style.transform = `translate(${x}px, ${y}px)`;
-
-//     drops.forEach((drop) => {
-//       const { left, top, width, height } = drop.getBoundingClientRect();
-//       if (x > left && x < left + width && y > top && y < top + height) {
-//         drop.dispatchEvent(new CustomEvent('inside'));
-//       } else {
-//         drop.dispatchEvent(new CustomEvent('outside'));
-//       }
-//     });
-//   };
-
-//   const start = (event) => {
-//     const { which, ctrlKey, type } = event;
-
-//     if ((which !== 1 || ctrlKey) && type !== 'touchstart') return;
-//     if (type !== 'touchstart') event.preventDefault(); // TODO: figure out if we need this for smartphone aswell?
-//     node.dispatchEvent(
-//       new CustomEvent('dragging', {
-//         detail: {
-//           dragging: true,
-//           dragTarget: undefined,
-//           dragType: type
-//         }
-//       })
-//     );
-//     window.addEventListener('mousemove', move);
-//     window.addEventListener('mouseup', end);
-//     window.addEventListener('touchmove', move);
-//     window.addEventListener('touchend', end, true); // useCapture = true to make sure this events fires before any local `touchend`'s
-//   };
-
-//   node.addEventListener('touchstart', start);
-//   node.addEventListener('mousedown', start);
-
-//   return {
-//     destroy: () => {
-//       node.removeEventListener('touchstart', start);
-//       node.removeEventListener('mousedown', start);
-//     }
-//   };
-// };
-
-// const drop = (node, droppable) => {
-//   drops.push(node);
-
-//   const inside = () =>
-//     node.dispatchEvent(
-//       new CustomEvent('hover', {
-//         detail: {
-//           canDrop: droppable(itemBeingDragged),
-//         },
-//       }),
-//     );
-
-//   const outside = () =>
-//     node.dispatchEvent(
-//       new CustomEvent('hover', {
-//         detail: {
-//           canDrop: undefined,
-//         },
-//       }),
-//     );
-
-//   const attemptDrop = () => {
-//     if (droppable(itemBeingDragged)) {
-//       node.dispatchEvent(
-//         new CustomEvent('dropped', {
-//           detail: {
-//             item: itemBeingDragged,
-//           },
-//         }),
-//       );
-//     } else {
-//       node.dispatchEvent(
-//         new CustomEvent('hover', {
-//           detail: {
-//             canDrop: undefined,
-//           },
-//         }),
-//       );
-//     }
-//   };
-
-//   node.addEventListener('inside', inside);
-//   node.addEventListener('outside', outside);
-//   node.addEventListener('attemptDrop', attemptDrop);
-//   return {
-//     destroy: () => {
-//       node.removeEventListener('inside', inside);
-//       node.removeEventListener('outside', outside);
-//       node.removeEventListener('attemptDrop', attemptDrop);
-//     },
-//   };
-// };
-
-export { tooltip };
diff --git a/src/ts/utils.ts b/src/ts/utils.ts
deleted file mode 100644
index 0ea502d8..00000000
--- a/src/ts/utils.ts
+++ /dev/null
@@ -1,275 +0,0 @@
-import seedRandom from 'seedrandom';
-import type { Combatant } from '@/types/combatant';
-import type { Character, CharacterRef } from '@/types/character';
-import { AbilityType, type Ability, type AbilityRef } from '@/types/ability';
-import { COMBAT_TICK_TIME, COMBAT_RING_BASE_RADIUS } from '@/constants/APP';
-import EQUIPMENT from '@/constants/EQUIPMENT';
-import ABILITIES from '@/constants/ABILITIES';
-import CHARACTERS from '@/constants/CHARACTERS';
-import { deepAdd } from '@/helpers';
-import type { DynamicObject } from '@/types/common';
-import type { CombatStats } from '@/types/combatStats';
-import { getLevelByExperience } from '@/ts/level';
-import app from '@/app.svelte';
-import { generateCombat, prepareTeams } from '@/ts/combat';
-
-export const runCombatSimulations = (
-  simulationCount: number,
-  allies: Character[],
-  foes: Character[],
-  seed?: string,
-  fightId?: string
-) => {
-  return Array(simulationCount)
-    .fill(0)
-    .reduce((wins, _, i) => {
-      if (!allies[0]) return wins;
-
-      const combat = generateCombat(prepareTeams(allies, foes), `${seed}${i}`, fightId);
-
-      if (combat?.winningTeam?.index === 0) return wins + 1;
-
-      return wins;
-    }, 0);
-};
-
-export const calculateCombatStats = (...args: any) => {
-  const combined = args.reduce((acc: any, obj: any) => {
-    for (const [key, value] of Object.entries(obj)) {
-      acc[key] = (acc[key] || 0) + value;
-    }
-    return acc;
-  }, {});
-  return combined;
-};
-
-export const calculateAvailableAbilitiesByCharacter = (character: Character) =>
-  Object.entries(character.equipment).flatMap(([slot, eq]) => {
-    if (!eq) return [];
-    const equipment = EQUIPMENT(eq, true);
-
-    return equipment.abilities.map((a: any, abilityIndex: number) => {
-      const instanceKey = `${character.id}::${slot}::${equipment.id}::${a.id}::${abilityIndex}`;
-      return {
-        ...a,
-        uuid: instanceKey
-      } as AbilityRef;
-    });
-  });
-
-// export const calculateCombatStatsByCharacter = (character: Character) => {
-//   return calculateCombatStats(
-//     ...[
-//       character.combatStats,
-//       ...Object.values(character.equipment)
-//         .filter((e) => e !== null)
-//         .map((e) => EQUIPMENT(e, true).combatStats)
-//     ]
-//   );
-// };
-
-export const calculateCombatStatsByCharacter = (character: Character) => {
-  const isNPC = false; // character?.image?.startsWith('creature');
-  // If level isn't set, expect player character
-  const characterLevel = character?.level || getLevelByExperience(app.experience);
-  const HEALTH_PER_LEVEL = isNPC ? 8 : 4;
-  const DAMAGE_PER_LEVEL = isNPC ? 4 : 2;
-  const ARMOR_PER_LEVEL = isNPC ? 2 : 0;
-
-  const levelCombatStats = {
-    maxHealth: HEALTH_PER_LEVEL * (characterLevel - 1),
-    damage: DAMAGE_PER_LEVEL * (characterLevel - 1),
-    maxArmor: ARMOR_PER_LEVEL * (characterLevel - 1)
-  };
-
-  const parts = [
-    character.combatStats,
-    levelCombatStats,
-    ...Object.values(character.equipment)
-      .filter((equipment) => equipment !== null)
-      .map((equipment) => EQUIPMENT(equipment, true)?.combatStats ?? {})
-  ] as Required<CombatStats>[];
-
-  // start from a copy so we don't mutate character.combatStats
-  return parts.reduce(
-    (acc, cur) => deepAdd(acc, cur),
-    {} as DynamicObject
-  ) as Required<CombatStats>;
-};
-
-export const calculateTickStart = (abilities: Ability[], index: number) => {
-  let tickStart = 0;
-  for (let i = 0; i < index; i++) {
-    tickStart += abilities[i]?.ticks || 0; // dunno why ?. and || 0 is needed
-  }
-  return tickStart;
-};
-
-export const prepareCombatant = (
-  characterRef: CharacterRef,
-  teamCount: number,
-  combatantCount: number,
-  teamIndex: number,
-  combatantIndex: number
-): Combatant => {
-  const character = CHARACTERS(characterRef, true); // ensure full character
-
-  const rotation = 360 / teamCount;
-  const combatStats = calculateCombatStatsByCharacter(character);
-
-  // combatStats.currentHealth = combatStats.maxHealth;
-  combatStats.currentArmor = combatStats.maxArmor;
-
-  // Populate ability refs with data
-  const abilitiesHydrated = (
-    character.abilities.map((ability) => ABILITIES(ability, true)) as Ability[]
-  )
-    // Run calcs
-    .map((ability) => {
-      const { calc, ...rest } = ability;
-
-      return {
-        ...rest,
-        calc: undefined, // To be able to parse it
-        damage: ability?.calc?.damage()?.result || 0,
-        healing: ability?.calc?.healing()?.result || 0,
-        duration: ability?.calc?.duration()?.result || 0
-      };
-    });
-
-  const abilitiesCut = abilitiesHydrated.filter(
-    (_, i) => calculateTickStart(abilitiesHydrated, i) < character.maxTicks
-  );
-
-  const abilitiesCopied = abilitiesCut.reduce((a, ability, i) => {
-    const start = a[i - 1]?.end || 0;
-    const end = start + ability.ticks * COMBAT_TICK_TIME;
-    return [...a, { ...ability, start, end }];
-  }, [] as Ability[]) as Required<Ability>[];
-
-  const abilities = abilitiesCut
-    .reduce((a, ability) => {
-      return ability?.chainLink
-        ? [
-            ...a,
-            ...Array(ability.chainLink)
-              .fill(0)
-              .map((_, i) => {
-                const { chainLink, ...ab } = ability;
-
-                ab.type = AbilityType.WindUp;
-                ab.ticks = (ability.ticks / (ability?.chainLink as number)) as Ability['ticks'];
-                if (i + 1 !== ability.chainLink) {
-                  ab.chainTo = i + 1;
-                }
-
-                return ab;
-              })
-          ]
-        : [...a, ability];
-    }, [] as Ability[])
-    .reduce((a, ability, i) => {
-      const start = a[i - 1]?.end || 0;
-      const end = start + ability.ticks * COMBAT_TICK_TIME;
-      return [...a, { ...ability, start, end }];
-    }, [] as Ability[]) as Required<Ability>[];
-
-  const radius = COMBAT_RING_BASE_RADIUS;
-
-  const rot =
-    teamIndex * rotation +
-    270 -
-    rotation / 2 +
-    (rotation / (combatantCount + 1)) * (combatantIndex + 1);
-
-  const rotRadians = (rot * Math.PI) / 180;
-  const position = {
-    x: Math.sin(rotRadians) * radius,
-    y: Math.cos(rotRadians) * radius,
-    rot
-  };
-
-  return {
-    ...character,
-    id: crypto.randomUUID(), // this is needed for debug mode
-    teamIndex,
-    eventTimestamp: 0,
-    eventAbility: abilitiesCut[0].id,
-    eventIndex: 0,
-    combatStats,
-    animations: [],
-    injectedAnimations: [],
-    audio: [],
-    position,
-    damage: 0,
-    statuses: {
-      isBlocking: false,
-      knockedOut: 0,
-      isStunned: {
-        ticks: 0,
-        value: 0
-      },
-      isBleeding: {
-        ticks: 0,
-        value: 0
-      },
-      isVulnerable: {
-        ticks: 0,
-        value: 0
-      },
-      isWounded: {
-        max: combatStats.limits.wounded,
-        value: 0
-      },
-      isConcussed: {
-        max: combatStats.limits.concussed,
-        value: 0
-      },
-      isExposed: {
-        max: combatStats.limits.exposed,
-        value: 0
-      }
-    },
-    abilities,
-    abilitiesCopied
-  };
-};
-
-export const random = (min: number, max: number, factor = Math.random(), step = 1) => {
-  const steps = Math.round((max - min) / step);
-  const index = Math.floor(factor * (steps + 1)); // include last step
-  const value = min + index * step;
-  // Handle floating-point precision issues (e.g., 0.30000000000004)
-  return Math.round(value / step) * step;
-};
-
-export const seededRandom = (min: number, max: number, string: string, step = 1) =>
-  random(min, max, seedRandom(string)(), step);
-
-export const colorStrength = (col: any, amt: any) => {
-  let usePound = false;
-
-  if (col[0] === '#') {
-    col = col.slice(1);
-    usePound = true;
-  }
-
-  const num = parseInt(col, 16);
-
-  let r = (num >> 16) + amt;
-
-  if (r > 255) r = 255;
-  else if (r < 0) r = 0;
-
-  let b = ((num >> 8) & 0x00ff) + amt;
-
-  if (b > 255) b = 255;
-  else if (b < 0) b = 0;
-
-  let g = (num & 0x0000ff) + amt;
-
-  if (g > 255) g = 255;
-  else if (g < 0) g = 0;
-
-  return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
-};
diff --git a/src/types/ability.ts b/src/types/ability.ts
deleted file mode 100644
index ebf4520e..00000000
--- a/src/types/ability.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { IconName } from '@/Iconice';
-import type { VFX } from '@/types/vfx';
-import type { DynamicObject } from '@/types/common';
-import type { SFX } from '@/types/sfx';
-
-export enum AbilityType {
-  WindUp = 'windUp',
-  WindDown = 'windDown',
-  Channeling = 'channeling'
-}
-
-export type StatusEffect =
-  | 'isBleeding'
-  | 'isHealed'
-  | 'isStunned'
-  | 'isVulnerable'
-  | 'isWounded'
-  | 'isConcussed'
-  | 'isExposed';
-
-type AbilityTicks = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; // 0 is for removal, see `prepareCombatant` in `generateCombat`
-
-export type AbilityRef = {
-  uuid?: string;
-  id: string;
-  overrides?: DynamicObject;
-};
-
-export type Ability = AbilityRef & {
-  name: string;
-  type: AbilityType;
-  description: string;
-  basic: boolean;
-  ticks: AbilityTicks;
-  chainLink?: number;
-  chainTo?: number;
-  start?: number;
-  end?: number;
-  icon: IconName;
-  vfx: VFX;
-  sfx: SFX;
-  statusEffects: StatusEffect[];
-
-  damage: number;
-  healing: number;
-  duration: number;
-  damageModifier: number;
-  healingModifier: number;
-  durationModifier: number;
-  calc?: {
-    damage: any;
-    healing: any;
-    duration: any;
-  };
-};
diff --git a/src/types/character.ts b/src/types/character.ts
deleted file mode 100644
index e52cbf78..00000000
--- a/src/types/character.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { CharacterKey } from '@/constants/CHARACTERS';
-import type { AbilityRef } from '@/types/ability';
-import type { CombatStats } from '@/types/combatStats';
-import type { CharacterEquipment } from '@/types/equipment';
-// import type { DynamicObject } from '@/types/common';
-
-export type Race = 'elf' | 'human' | 'troll' | 'dwarf' | 'goblin';
-
-export type CharacterRef = {
-  uuid?: string;
-  id: string;
-  overrides: {
-    abilities: AbilityRef[];
-    equipment: CharacterEquipment;
-    combatStats: CombatStats;
-  };
-};
-
-export type Character = CharacterRef & {
-  name: string;
-  description: string;
-  race: CharacterKey;
-  level: number;
-  image: string;
-  size: number;
-  equipment: CharacterEquipment;
-  abilities: AbilityRef[];
-  maxTicks: number;
-  element: string;
-  combatStats?: Required<CombatStats>;
-};
diff --git a/src/types/combat.ts b/src/types/combat.ts
deleted file mode 100644
index 369eed38..00000000
--- a/src/types/combat.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Team } from '@/types/team';
-import type { Combatant } from '@/types/combatant';
-import type { SFX } from '@/types/sfx';
-
-type RewardType = 'experience' | 'bossHighscore';
-
-export type Reward = {
-  type: RewardType;
-  amount: number;
-  showInUI: boolean;
-};
-
-export type CombatEvent = {
-  eventTimestamp: number;
-  // globalEventIndex: number;
-  // eventIndex: number;
-  // eventTaker: Combatant;
-  // target: Combatant;
-  teams: Team[];
-  // log: {
-  //   damage: {
-  //     result: number;
-  //   };
-  // };
-};
-
-export type Combat = {
-  // start: number;
-  // seed: string;
-  teamsStartState: Team[];
-  teamsEndState: Team[];
-  events: CombatEvent[];
-  duration: number;
-  winningTeam?: Team;
-  fightId?: string;
-  audio: SFX[];
-};
diff --git a/src/types/combatStats.ts b/src/types/combatStats.ts
deleted file mode 100644
index c6832b7d..00000000
--- a/src/types/combatStats.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-export type CombatStats = {
-  maxHealth?: number;
-  currentHealth?: number;
-  damage?: number;
-  maxArmor?: number;
-  currentArmor?: number;
-  criticalChance?: number;
-  criticalDamage?: number;
-  dodgeChance?: number;
-  blockChance?: number;
-  magicChance?: number;
-  limits: {
-    wounded: number;
-    concussed: number;
-    exposed: number;
-  };
-  modifiers: {
-    maxHealth: number;
-    maxArmor: number;
-    damage: number;
-  };
-};
-
-export const prettyCombatStatKey = (key: string) =>
-  ({
-    maxArmor: 'Armor',
-    damage: 'Damage',
-    maxHealth: 'Health',
-    resistance: 'All resistances',
-
-    bleeding: 'Bleeding',
-    stunned: 'Stunned',
-    vulnerable: 'Vulnerable',
-
-    criticalChance: 'Critical chance',
-    criticalDamage: 'Critical damage',
-    dodgeChance: 'Dodge chance',
-    blockChance: 'Block chance',
-    magicChance: 'Magic chance'
-  })[key] || key;
-
-// export const prettyCombatStatValue = (key: string, value: number) =>
-//   (
-//     ({
-//       criticalChance: `${(value * 100).toFixed(0)}%`,
-//       criticalDamage: `${(value * 100).toFixed(0)}%`,
-//       dodgeChance: `${(value * 100).toFixed(0)}%`,
-//       blockChance: `${(value * 100).toFixed(0)}%`,
-//       magicChance: `${(value * 100).toFixed(0)}%`
-//     })[key] || value
-//   )
-//     .toString()
-//     .replace(/^0%$/, '-');
-
-export const prettyCombatStatValue = (key: string, value: number) =>
-  value === 0 ? '-' : value > 1 ? value : `${(value * 100).toFixed(0)}%`;
diff --git a/src/types/combatant.ts b/src/types/combatant.ts
deleted file mode 100644
index fda47edd..00000000
--- a/src/types/combatant.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Character } from '@/types/character';
-import type { CombatStats } from '@/types/combatStats';
-import type { Ability } from '@/types/ability';
-import type { VFX } from '@/types/vfx';
-import type { SFX } from '@/types/sfx';
-
-export type StatusStack = {
-  max: number;
-  value: number;
-};
-
-export type StatusEffect = {
-  ticks: number;
-  value: number;
-};
-
-export type Combatant = Omit<Character, 'abilities'> & {
-  id: string;
-  teamIndex: number;
-  animations: VFX[];
-  injectedAnimations: VFX[];
-  audio: SFX[];
-  combatStats: Required<CombatStats>;
-  eventTimestamp: number;
-  eventAbility: Ability['id'];
-  eventIndex: number;
-  abilities: Required<Ability>[];
-  abilitiesCopied: Required<Ability>[];
-  damage: number;
-  statuses: {
-    isBlocking: boolean;
-    knockedOut: number;
-
-    isStunned: StatusEffect;
-    isBleeding: StatusEffect;
-    isVulnerable: StatusEffect;
-
-    isWounded: StatusStack;
-    isConcussed: StatusStack;
-    isExposed: StatusStack;
-  };
-  position: {
-    x: number;
-    y: number;
-    rot: number;
-  };
-};
diff --git a/src/types/common.ts b/src/types/common.ts
deleted file mode 100644
index 678e941f..00000000
--- a/src/types/common.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type DynamicObject = { [key: string]: any };
-
-export type ClickEvent = any;
-export type ChangeEvent = Event & { target: HTMLInputElement };
diff --git a/src/types/equipment.ts b/src/types/equipment.ts
deleted file mode 100644
index 405795bf..00000000
--- a/src/types/equipment.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { AbilityRef } from '@/types/ability';
-import type { CombatStats } from '@/types/combatStats';
-import type { DynamicObject } from '@/types/common';
-
-export type EquipmentSlot = 'mainHand' | 'offHand' | 'armor' | 'accessory' | 'trinket';
-export type EquipmentType = EquipmentSlot | 'oneHand' | 'twoHand';
-
-export type EquipmentRef = {
-  uuid?: string;
-  id: string;
-  overrides?: DynamicObject;
-};
-
-export type Equipment = EquipmentRef & {
-  name: string;
-  slotsIn: Required<EquipmentType>;
-  cost: number;
-  level: number;
-  description: string;
-  combatStats: CombatStats;
-  abilities: AbilityRef[];
-};
-
-export type CharacterEquipment = {
-  mainHand: EquipmentRef | null;
-  offHand: EquipmentRef | null;
-  armor: EquipmentRef | null;
-  accessory: EquipmentRef | null;
-  trinket: EquipmentRef | null;
-};
diff --git a/src/types/sfx.ts b/src/types/sfx.ts
deleted file mode 100644
index ed70bafa..00000000
--- a/src/types/sfx.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type SFX = {
-  id?: string;
-  sfxName: string;
-  // duration: number;
-  start: number;
-  // end: number;
-  // targetX?: number;
-  // targetY?: number;
-  // amount?: number;
-};
diff --git a/src/types/team.ts b/src/types/team.ts
deleted file mode 100644
index f9e4c706..00000000
--- a/src/types/team.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Combatant } from '@/types/combatant';
-
-export type Team = {
-  name: string;
-  index: number;
-  combatants: Combatant[];
-};
diff --git a/src/types/vfx.ts b/src/types/vfx.ts
deleted file mode 100644
index 6c2962c5..00000000
--- a/src/types/vfx.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type VFX = {
-  id?: string;
-  vfxName: string;
-  duration: number;
-  start: number;
-  end: number;
-  targetX?: number;
-  targetY?: number;
-  amount?: number;
-
-  isCritical?: boolean;
-};
diff --git a/src/types/weaponType.ts b/src/types/weaponType.ts
deleted file mode 100644
index 93cba07d..00000000
--- a/src/types/weaponType.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type WeaponType = '1h' | '2h' | 'offHand';
diff --git a/static/_icons/_ability/_bleed/bleeding-wound.svg b/static/_icons/_ability/_bleed/bleeding-wound.svg
new file mode 100644
index 00000000..80aef452
--- /dev/null
+++ b/static/_icons/_ability/_bleed/bleeding-wound.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M26.996 47.947c11.726 44.806 56.176 129.96 67.496 242.934-6.597 76.494-22.66 98.81-22.66 152.74 0 27.602 11.33 38.038 23.254 38.038 11.662 0 23.72-11.823 23.72-40.896 0-56.606-16.937-73.84-23.283-151.65 6.472-83.65 59.715-45.933 59.715 2.765 0-112.652 101.99-85.16 116.024-34.77-5.164 35.11-15.028 45.947-15.028 75.368 0 16.633 8.51 28.86 16.74 28.86 8.416 0 16.41-11.433 16.41-27.226 0-27.953-9.303-41.066-14.515-75.825 15.447-37.68 115.544-34.583 115.845-1.754-3.41 26.414-12.764 32.13-12.764 51.16 0 9.714 6.58 16.855 12.943 16.855 6.506 0 12.685-6.677 12.685-15.9 0-18.435-9.164-25.838-12.596-52.854 14.138-49.16 86.57-19.867 92.008-73.298-51.22 45.91-357.175 26.76-455.994-134.545zm128.85 266.22c-4.676 31.802-17.635 40.28-17.635 61.724 0 10.642 8.592 18.346 17.636 18.346 8.844 0 17.988-8.24 17.988-19.45 0-22.338-13.464-28.757-17.988-60.62z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_bleed/bloody-sword.svg b/static/_icons/_ability/_bleed/bloody-sword.svg
new file mode 100644
index 00000000..18b9817f
--- /dev/null
+++ b/static/_icons/_ability/_bleed/bloody-sword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M35.143 35.8a16.326 16.326 0 0 0-14.575 8.212c-4.497 7.84-1.8 17.85 6.026 22.355 4.804 2.767 10.42 2.805 15.086.615l68.558 39.375-29.797 51.957 28.51 16.49c6.374-49.47 27.945-90.184 68.726-119.837l-28.51-16.492-29.63 51.67-68.522-39.352c-.44-5.166-3.31-10.04-8.135-12.818a16.249 16.249 0 0 0-7.737-2.176zm153.093 71.632-37.892.642 251.484 144.74-9.322 16.198-253.45-145.87 19.89 35.135c3.916 1.873 29.888 14.392 59.775 33.858 30.715 20.005 64.022 44.997 74.397 74.703 4.567 2.27 31.488 15.496 69.58 27.764 37.96 12.224 84.088 21.654 119.912 15.58-12.992-35.507-44.6-70.15-74.456-95.995-27.686-23.965-52.14-39.656-59.117-43.998-30.91 5.99-69.19-10.66-101.86-27.53-31.63-16.333-55.295-32.69-58.94-35.228zm-26.992 72.9c5.623 17.433 10.356 39.574 14.51 64.59v77.287h18.687v-42.12c14.672-28.54 40.948-3.137 50.7 53.53v161.003h18.688V335.87c12.62-13.188 27.91 3.7 38.975 32.24v35.175h18.69v-25.707c17.057-20.727 46.446-5.688 59.93 49.102v66.888h18.688v-67.07c17.575-58.125 49.153-84.382 74.394-96.3-38.7 3.766-81.725-6.276-117.537-17.81-42.97-13.838-75.7-30.45-75.7-30.45l-3.72-1.887-1.078-4.027c-5.46-20.368-36.988-48.063-67.95-68.228-18.276-11.905-35.828-21.51-47.276-27.463zm23.854 181.48c-11.643 0-21.08 9.438-21.08 21.08 0 11.644 9.437 21.08 21.08 21.08 11.643 0 21.08-9.436 21.08-21.08 0-11.642-9.437-21.08-21.08-21.08zm283.754 7.53s-21.08 52.667-21.08 64.31 9.437 21.08 21.08 21.08c11.643 0 21.08-9.437 21.08-21.08 0-11.643-21.08-64.31-21.08-64.31zM312.15 426.11c-11.643 0-21.082 9.436-21.082 21.08 0 11.642 9.44 21.08 21.082 21.08 11.643 0 21.08-9.438 21.08-21.08 0-11.644-9.437-21.08-21.08-21.08z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/armadillo-tail.svg b/static/_icons/_ability/_creature/armadillo-tail.svg
new file mode 100644
index 00000000..5f7911bb
--- /dev/null
+++ b/static/_icons/_ability/_creature/armadillo-tail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M126.75 21.563 115.344 72.28l115.687 58.97 92.407-109.688H126.75zm-111 .593V60.28l81.438 7.69L107.5 22.155H15.75zM321.375 53l-74.313 88.188 65.5 56.187 105.813-67.03-97-77.345zM15.75 79.03v91.407c120.73-24.94 305.18 81.97 378.5 237.188l-1.406-45.75-32.813-74.03-52.592-70.283-1.782-1.53-74.062-63.5-2.438-1.25L103.75 87.343l-88-8.313zm386.78 83.5-76.624 48.5 45.78 61.19 93.783-34.283-62.94-75.406zm49.97 100.064-71.656 26.156 27.312 61.594 77.375-2.72-33.03-85.03zm11.53 104.47-52.28 1.842 2.875 93.188a311.7 311.7 0 0 1 7.875 36.625c33.85-37.927 45.03-83.554 41.53-131.658z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/barbed-nails.svg b/static/_icons/_ability/_creature/barbed-nails.svg
new file mode 100644
index 00000000..b3ebd539
--- /dev/null
+++ b/static/_icons/_ability/_creature/barbed-nails.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M14.922 14.21v182.8c105.426 65.67 171.442 156.49 109.213 299.017 71.456-76.97 99.707-180.437 72.418-273.904l-43.217 28.034c-8.593-32.65-25.23-63.915-44.04-88.097-18.808-24.182-35.91-41.747-54.142-58.317l12.57-13.83c26.36 23.958 50.918 50.426 71.26 81.727 122.584 56.688 209.387 144.066 155.1 301.027 65.208-82.512 85.325-187.03 50.81-277.992l-41.466 30.37c-9.225-26.42-23.88-51.128-43.455-74.562-31.626-34.863-68.584-59.443-108.29-79.904l8.56-16.61c46.226 23.82 90.127 53.793 126.312 98.87C399.033 189.56 479.498 260.64 456.44 409.59c49.442-93.163 50.723-200.15.585-283.248l-35.04 38.547C379.276 89.6 288.66 35.463 159.76 14.21H14.924z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/bird-claw.svg b/static/_icons/_ability/_creature/bird-claw.svg
new file mode 100644
index 00000000..e644f35b
--- /dev/null
+++ b/static/_icons/_ability/_creature/bird-claw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M16.313 14.53v69.5c56.5 26.487 139.512 124.756 121.718 153.626-19.937 9.72-41.66 17.936-66.28 26-2.74.592-5.4 1.456-7.938 2.563-.2.063-.393.122-.593.186l.06.063c-16.915 7.643-28.78 25.936-29.53 44.436a35.172 35.172 0 0 0-3.22 4.656c-12.052 20.84-19.215 46.52-11.31 70.313 7.903 23.793 31.383 43.1 73.28 50.344l30.438 5.28-22.407-21.25c-20.598-19.52-23.79-44.37-15.655-63.563 18.564-2.293 33.263-17.314 38.72-34.906.024-.082.036-.166.06-.25 8.305-21.175 21.293-40.217 41.876-46.686 22.197-6.978 89.432 19.79 122.907 75.75 3.1 9.693 9.968 18.606 21.594 25.03 6.867 3.795 13.592 5.702 19.97 6.126 8.03 7.63 16.105 17.703 22 28.75 8.26 15.478 12.246 32.53 8.22 48.22l-7.69 29.936L375.5 468c31.637-28.45 41.573-57.794 37.438-83.563-3.873-24.125-18.826-44.065-34.813-59.562-1.898-12.118-8.972-23.538-22.813-31.188-8.148-4.503-16.148-6.32-23.656-6.062a40.308 40.308 0 0 0-3.22.25c-15.68.117-33.815-2.788-50.155-8.656-22.188-15.804-20.717-30.904-2.405-40.72 27.434-2.626 54.565 6.108 76 17.22a54.224 54.224 0 0 0 6.47 4.186c22.067 12.198 42.575 5.148 55.31-9.344 7.79 1.084 15.55 4.598 23.126 10.188 11.023 8.13 21.213 20.634 28.75 34.78l10.314 19.376 6.812-20.875c13.164-40.43 7.03-70.206-10.312-88.31-15.176-15.843-37.005-22.188-58.344-22.907-1.065-.036-2.126-.026-3.188-.032a51.828 51.828 0 0 0-7.218-4.81c-8.15-4.505-16.15-6.32-23.656-6.064-5.92.203-11.534 1.71-16.657 4.188v-.063c-31.524 15.287-62.228 22.54-93.155 28.032-8.008-3.035-10.557-9.02-5.03-19.437 18.92-18.164 41.107-32.81 63.53-40.375 14.174-1.885 26.066-11.202 33.25-23.375 8.486-2.544 18.056-4.173 27.375-4.094 15.366.133 29.59 4.525 39.406 15.19l21.25 23.093-5.156-30.938C437.927 83.1 420.128 60.11 397.812 51.22c-8.368-3.336-17.006-4.73-25.625-4.782-12.06-.075-24.05 2.494-35.125 6.093-4.27-1.392-8.473-2.1-12.53-2.186-19.13-.41-35.312 12.694-42.876 29.437-.007.023-.023.042-.03.064a52.762 52.762 0 0 0-2.595 7.094c-5.9 15.37-13 29.872-21.217 43.5-34.96 31.232-68.095 19.003-93.688-15.5-19.793-28.38-37.218-65.49-47.156-100.41H16.312zm355.562 50.72c6.738 0 13.2 1.02 19.03 3.344 11.852 4.722 22.592 14.762 29.783 35.687-9.974-4.213-20.77-6.096-31.282-6.186-13.213-.113-26.044 2.423-37.344 6.375-7.2 2.276-11.68 4.717-13.687 5.78-1.934 1.022-1.256 1.004-3.313-.97-2.056-1.972-4.744-6.765-5.968-12.28-1.225-5.515-1.122-11.635.344-16.094 1.465-4.458 3.59-7.103 7.812-8.656h.03v-.03c11.348-4.18 23.366-6.97 34.595-6.97zm37.594 136.22c19.194-.013 38.09 5.407 49.374 17.186 9.58 10.002 15.108 25.212 11.03 49.344-6.486-8.54-13.78-16.22-22-22.28-13.878-10.24-30.478-16.22-47.687-13.595-3.116.475-4.042-.14-5.78-2.375-1.74-2.234-3.21-6.56-3.22-11.094-.01-4.532 1.365-9.054 3.657-12.03 2.292-2.978 5.123-4.878 10.78-5.095 1.28-.048 2.565-.06 3.845-.06zM59.22 317.624c3.08.093 6.475 1.018 9.5 2.625 4.03 2.143 7.17 5.456 8.31 8 1.142 2.544 1.28 3.574-.624 6.063-16 20.908-19.083 50.772-5.78 76.843-20.013-7.685-29.596-18.962-33.657-31.187-5.486-16.512-.514-37.32 9.75-55.064 2.824-4.885 5.83-6.467 9.56-7.094a15.05 15.05 0 0 1 2.94-.187zm294.56 14.28c2.927-.057 5.47.902 8.376 3.595 15.526 14.38 29.208 32.532 32.313 51.875 2.357 14.692-.622 30.766-14.658 48.875-1.51-12.203-5.664-23.978-11.312-34.563-9.762-18.294-23.688-33.48-37.156-43.062-2.18-1.55-2.332-2.312-1.656-5.78.675-3.47 3.433-8.554 7.468-12.626 4.035-4.074 9.182-7.07 13.53-7.94 1.09-.216 2.12-.354 3.095-.374z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/bird-limb.svg b/static/_icons/_ability/_creature/bird-limb.svg
new file mode 100644
index 00000000..72e950ce
--- /dev/null
+++ b/static/_icons/_ability/_creature/bird-limb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m129.5 21.25-.406 79.72L52.5 94.905l61.094 64.03-92.906 29.314s65.592 16.927 109.062 30.375l50.22-17.094-20.157-39.686-6.938-13.656 15.313.062 40.906.188c-10.145-13.34-18.836-26.114-25.22-37.094C165.518 79.764 129.5 21.25 129.5 21.25zM183.406 167l18.125 35.688 4.876 9.593-10.22 3.47-36.81 12.53c32.72 11.145 64.403 23.95 92.56 42.157l-8.81-31.78-3.22-11.626 12.063-.218 30.124-.562c-19.93-16.5-40.332-37.76-58.063-59.03l-40.624-.22zm215.875 44.53c-.764.014-1.543.03-2.31.064l-42.783 43.156c-12.067 5.72-28.657.866-46.937-10.28l-42.906.81 11.97 43.157c11.953 10.085 23.01 21.54 32.905 34.782.007.01.02.018.03.03l.28.406c31.367 45.788 37.903 122.127-37.155 137.938 71.063 33.236 111.556-45.42 95.594-98.375 33.45 35.653 40.736 89.985-16.126 127.374 96.784 10.962 97.8-108.47 47.687-159.53 45.487 8.812 78.87 53.29 48.783 116.78 90.99-35.057 30.803-137.264-44.438-162.75-3.958 7.772-8.396 14.785-13.688 20.78-5.473 3.44-11.014 5.093-17.187 5.595-7.543.612-16.202-.73-26.03-3.845 10.357-.54 17.71-3.67 24.31-9.28 5.25-4.463 9.99-10.76 14.376-18.75 9.424-27.246 47.878-38.25 99.188 1.405 3.77-30.594-37.373-70.267-85.563-69.47z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/circle-claws.svg b/static/_icons/_ability/_creature/circle-claws.svg
new file mode 100644
index 00000000..bbf719ed
--- /dev/null
+++ b/static/_icons/_ability/_creature/circle-claws.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M229.832 24.166C169.087 23.868 108.817 50.45 68.12 101.72c-70.4 88.68-55.578 217.634 33.1 288.032a173.927 173.927 0 0 0 4.26 3.27c.286.303.575.618.86.916-.118-.177-.23-.355-.348-.532 5.055 3.744 10.36 7.29 15.504 10.475a204.314 204.314 0 0 1-36.783-50.52c-26.065-64.267-15.236-129.285 32.96-161.24 58.434-38.76 151.118-15.176 215.06 51.675-3.942-5.902-8.413-12.113-13.016-17.834-63.682-79.235-166.368-109.6-229.362-67.817-1.072.71-2.122 1.442-3.158 2.185a205.696 205.696 0 0 1 18.953-28.418c65.31-82.274 181.148-100.695 268.36-46.756-5.63-5.66-11.95-11.454-18.358-16.54-37.412-29.7-81.992-44.23-126.32-44.448zm160.617 82.277c45.104 42.614 67.29 102.166 63.886 161.223-5.603 29.51-20.302 57.597-44.16 80.174-58.436 55.31-151.12 57.978-215.063 9.238 3.944 4.784 8.413 9.73 13.016 14.145 49.375 47.45 122.196 58.87 181.786 33.818-65.28 61.195-164.122 72.983-242.467 27.83 5.804 5.48 12.3 11.075 18.863 15.96 90.822 67.61 219.257 48.797 286.867-42.03 67.61-90.822 48.795-219.255-42.028-286.866-6.56-4.887-13.782-9.5-20.703-13.49z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/claw-slashes.svg b/static/_icons/_ability/_creature/claw-slashes.svg
new file mode 100644
index 00000000..7b0303df
--- /dev/null
+++ b/static/_icons/_ability/_creature/claw-slashes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M182.338 22.55c152.455 20.22 254.7 176.264 228.928 258.163-34.76-89.215-143.516-189.588-300.207-196.15C255.855 103.772 355.365 245.5 342.92 329.856c-9.85.97-20.79.927-32.852-.24-41.436-84.32-146.004-172.382-292.437-178.513 142.546 18.907 241.2 156.557 232.36 241.316-15.664-.633-33.447-3.34-53.48-8.46 18.37 8.188 35.514 14.817 51.502 20.067-10.614 44.085-55.285 69.374-144.93 46.47C250 515.968 319.647 483.338 328.736 419.743c56.24 1.254 85.915-24.86 92.856-63.008 164.112-19.88 36.806-322.627-239.254-334.185zm132.808 318.083c7.97 2.704 15.666 5.077 23.07 7.11-3.122 7.893-7.546 14.993-13.35 21.095-2.393-9.222-5.635-18.663-9.72-28.205z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/claw-string.svg b/static/_icons/_ability/_creature/claw-string.svg
new file mode 100644
index 00000000..a4eb491a
--- /dev/null
+++ b/static/_icons/_ability/_creature/claw-string.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M274.447 19.12c-17.958.18-36.188 2.602-54.342 7.466-9.843 2.637-19.214 6.007-28.287 9.8l5.29 19.74a42.659 42.659 0 0 1 16.806-4.547c19.872-1.16 38.653 11.795 43.994 31.73.475 1.77.816 3.546 1.057 5.32 87.235-15.12 173.745 20.262 226.34 87.056C457.39 80.406 369.778 18.164 274.447 19.12zm-57.27 51.056a24.665 24.665 0 0 0-2.103.04 24.888 24.888 0 0 0-4.87.8c-13.016 3.488-20.6 16.627-17.11 29.656.5 1.862 1.2 3.61 2.066 5.232h.053c13.762 0 27.248 1.195 40.37 3.46 4.52-5.764 6.334-13.51 4.27-21.22-2.865-10.687-12.22-17.714-22.675-17.968zm-21.968 54.418c-10.19-.002-20.113.828-29.858 2.142v20.46a42.65 42.65 0 0 1 8.78-.915c23.58 0 42.895 19.326 42.895 42.91 0 1.825-.127 3.62-.35 5.384 88.18 7.97 162.592 64.54 196.11 142.674-2.736-117.953-99.018-212.654-217.576-212.654zm-21.08 40.38c-13.476 0-24.202 10.73-24.202 24.217 0 4.034.963 7.817 2.668 11.144 2.23.514 4.457 1.06 6.672 1.652a238.38 238.38 0 0 1 26.158 8.672c7.707-4.027 12.91-12.076 12.91-21.467 0-13.487-10.73-24.215-24.205-24.215zm-49.503 49.383-5.268 19.72c.133.008.266.01.4.017 2.84.166 5.7.62 8.55 1.383 22.777 6.103 36.43 29.767 30.327 52.548a42.731 42.731 0 0 1-1.737 5.116c83.235 30.547 140.54 104.665 152.614 188.944 28.2-114.796-40.39-231.314-155.084-262.045-9.838-2.637-19.902-4.422-29.803-5.683zm-8.13 38.334c-10.454.256-19.81 7.283-22.675 17.97a24.348 24.348 0 0 0-.28 11.563c3.34 1.69 6.667 3.472 9.972 5.38a237.35 237.35 0 0 1 19.804 12.795c8.148-2.102 14.907-8.413 17.264-17.21 3.49-13.03-4.094-26.17-17.11-29.657a24.907 24.907 0 0 0-4.87-.798 23.89 23.89 0 0 0-2.104-.04zm-49.255 38.374-10.19 17.66a42.632 42.632 0 0 1 7.81 3.512c20.422 11.79 27.486 38.182 15.693 58.608a42.778 42.778 0 0 1-2.807 4.234c42.503 30.033 72.314 72.438 87.86 119.184h36.75c.635-75.88-37.814-149.84-108.19-190.473-8.707-5.03-17.735-9.063-26.926-12.726zm-23.795 34.07a23.606 23.606 0 0 0-1.746.055c-7.734.532-15.04 4.804-19.255 12.105-6.744 11.68-2.82 26.338 8.852 33.076 11.67 6.74 26.326 2.81 33.07-8.872 6.744-11.68 2.82-26.336-8.85-33.074-3.83-2.21-7.983-3.274-12.07-3.29z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/cobweb.svg b/static/_icons/_ability/_creature/cobweb.svg
new file mode 100644
index 00000000..fdfa38e8
--- /dev/null
+++ b/static/_icons/_ability/_creature/cobweb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M17.91 19.47v13.06l52.47 43.78c-18.59 8.2-37.3 21.44-52.47 38.59v46.8l64.84 83.9c-22.51 12.6-46.07 25.8-64.84 46.3v51.3l32.25 77.7c-10.96-.2-21.82.9-32.25 3.9v19.6c12.22-4.5 25.81-5.7 40.18-4.5l21.85 52.6h20.26l-23.82-57.2c33.22-26.5 75.12-43.6 118.92-44.1l70.2 90.8c-25.2 1.4-53.2 3.2-76.7 10.5h109.5c36.5-59.5 75.1-101.7 136.1-111.3 18.6 11.7 39.2 31.5 56.9 46.3v-24.3l-49.6-41.4c-3.5-68.9 17.1-117.9 41.6-151.9l8 4V193l-9.5-4.8c-7.9-20.4-13.1-46.8-12.5-73.1.5-27.64 7.2-54.92 22-75.79V19.56c-89.2-.19-178.5-.1-267.7-.1l138 9.71c-6 15.42-11.8 31.44-15.1 47.88-2.8 13.73-3.6 27.94-.9 41.94L205.9 48.06c-1.7-9.81-4.3-19.91-4-28.59h-18.8c-.2 6.08.4 12.01 1.4 17.72l-34.8-17.72H91.59C84.78 30.98 79.9 43.79 77.78 58.13L31.47 19.47zm94.59 2.06 69.3 35.22c-11.5 20.26-20.8 43.45-22.3 69.55L95.16 72.62c.28-20.5 6.64-36.54 17.34-51.09zm268.6 9.03 89.5 6.28c-13.7 23.26-19.5 50.87-20 77.86-.5 21.5 2.4 42.6 7.6 61.5l-89.5-45.5c-7.3-15.7-7.4-32.2-3.9-49.98 3.3-16.21 9.7-33.17 16.3-50.16zM198.4 65.19 343.7 139c-29.9 27.3-43.5 62.8-46.5 102.3l-119.1-99.5c-.7-27.3 9-56.61 20.3-76.61zM86.6 89.84l64.3 53.66c-24.2 21.4-46.4 48.6-59.21 83.1l-68.35-88.4c17.72-20.3 40.29-40.09 63.26-48.36zm275 58.26 105 53.3c-23.7 33.9-43.7 81.4-43.9 144.6l-107.6-89.8c5.3-44.7 19.8-85.6 46.5-108.1zm-196.3 7.5 125.8 104.9c-39.4 22.5-74.7 53.8-94.1 102.3l-91.6-118.5c13.6-35.7 35.3-67.1 59.9-88.7zM94.31 260.5l87.29 112.9C140 376.7 101 393.2 69 417.5L25.25 312.2c20.06-23.3 46.89-39.2 69.06-51.7zm212.09 12.7 110.8 92.5C359 380 319.9 423.2 285.7 477.6l-75.3-97.4c20.5-48 58.3-86.2 96-107z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/crab-claw.svg b/static/_icons/_ability/_creature/crab-claw.svg
new file mode 100644
index 00000000..e0fa3240
--- /dev/null
+++ b/static/_icons/_ability/_creature/crab-claw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m175.656 22.375-48.47 82.094c-23.017 4.384-43.547 11.782-60.124 22.374-24.436 15.613-40.572 37.414-45.5 67.875-4.79 29.62 1.568 68.087 24.125 116.093 93.162 22.88 184.08-10.908 257.25-18.813 37.138-4.012 71.196-.898 96.344 22.97 22.33 21.19 36.21 56.808 41.908 113.436 29.246-35.682 44.538-69.065 49.343-99.594 5.543-35.207-2.526-66.97-20.31-95.593-8.52-13.708-19.368-26.618-32-38.626l14.217-33-41.218 10.625c-8.637-6.278-17.765-12.217-27.314-17.782l-7.03-59.782-38.157 37.406a423.505 423.505 0 0 0-38.158-13.812l-8.375-71.28-57.625 56.5c-9.344-1.316-18.625-2.333-27.812-2.97l-31.094-78.125zM222 325.345c-39.146 7.525-82.183 14.312-127.156 11.686 47.403 113.454 207.056 224.082 260.125 87-101.18 33.84-95.303-49.595-132.97-98.686z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/evil-bat.svg b/static/_icons/_ability/_creature/evil-bat.svg
new file mode 100644
index 00000000..c4313fa1
--- /dev/null
+++ b/static/_icons/_ability/_creature/evil-bat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M200.87 39.725C44.31 80.87-16.78 302.325 36.948 433.995 23.912 307.28 59.464 188.886 126.674 116.51c-22.972 99.05-25 194.382 10.353 258.826-18.214-78.32-11.397-174.74 18.254-239.406-1.843 54.862 7.87 111.337 31.788 155.718-12.736-108.023 47.59-42.41 65.168-8.06 4.94 15.805 3.993 29.124-.433 40.47-5.83 14.942-18.294 26.96-34.018 34.897-35.8 18.074-54.695 40.503-60.52 62.78-5.824 22.28 1.996 43.443 16.5 56.396 14.5 12.952 36.138 18.04 56.32 9.233 16.745-7.305 31.693-23.562 41.895-50.072 8.293 6.156 15.268 13.8 20.868 23 .4-33.196 9.715-61.208 23.945-86.364-34.537 9.54-63.36 25.552-88.33 45.94 9.908 1.663 18.956 4.295 27.123 7.92-8.903 24.836-21.404 37.37-32.984 42.42-13.44 5.866-26.794 2.587-36.39-5.985-9.598-8.57-14.97-22.088-10.878-37.74 4.092-15.65 18.256-34.373 50.883-50.845 18.94-9.56 35.138-24.64 42.998-44.787 7-17.947 6.885-39.556-2.85-62.885 23.456-33.637 66.618-69.27 55.658 23.683 23.918-44.38 33.632-100.856 31.788-155.718 29.652 64.666 36.466 161.086 18.252 239.406 35.354-64.444 33.326-159.775 10.354-258.826 67.21 72.377 102.764 190.772 89.73 317.488C525.87 302.324 464.78 80.87 308.22 39.726h-.003c31.215 86.954 42.704 157.88-53.672 190.813-96.376-32.935-84.888-103.86-53.672-190.815h-.002zm16.083 57.62c-4.84 10.928-8.443 22.143-8.443 34.83 0 33.612 18.97 61.84 46.437 77.044 27.21-15.274 45.383-43.624 45.383-77.046 0-12.776-3.644-23.793-8.443-34.83 0 0-21.217 54.584-36.94 67.68-15.87-13.032-37.994-67.68-37.994-67.68z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/evil-comet.svg b/static/_icons/_ability/_creature/evil-comet.svg
new file mode 100644
index 00000000..bb1d465f
--- /dev/null
+++ b/static/_icons/_ability/_creature/evil-comet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m121.492 19.12 162.91 176.312c-42.268-65.6-80.666-115.532-100.847-176.31h-62.063zM87 19.124 213.88 174.73 54.726 26.24l269.736 298.49L19.15 40.047v30.2l163.3 155.225-163.3-117.794v31.662l.307.172.002 52.222 116.828 30.87-45.582-39.872c15.55 10.18 32.436 21.74 49.535 34.338 31.358 23.106 62.634 49.186 86.094 75.96 23.46 26.776 39.88 54.455 38.123 82.163-3.912 61.673 50.497 112.38 112.984 112.38 30.236 0 57.638-11.83 77.888-31.102l-76.873 14.216 9.44-37.762-68.327 16.18 10.495-46.3-43.383 7.036.36-2.635 26.802-58.226-5.235 38.372 45.803-7.428-9.994 44.092 69.06-16.356-9.84 39.363 69.897-12.923a112.308 112.308 0 0 0 12.85-29.477L450.7 402.21l39.68-25.544c.01-.687.024-1.374.024-2.064 0-62.474-50.544-106.992-113.85-113.012-27.784-2.643-56.96-20.122-86.38-43.826-29.42-23.704-58.906-54.048-85.293-84.03-47.496-53.967-83.31-104.564-90.33-114.61H87zM383.002 284.25l14.076 42.254 20.87-18.567 10.308 85.934-24.11-43.116-20.666 13.13-25.26-53.587 18.186 11.892 6.596-37.94z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/evil-hand.svg b/static/_icons/_ability/_creature/evil-hand.svg
new file mode 100644
index 00000000..fea65359
--- /dev/null
+++ b/static/_icons/_ability/_creature/evil-hand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m165.98 47.744-25.32 143.443c-28.823 29.04-82.26 43.33-117.54 49.016l.132 218.645.006-.002C60.214 406.14 115.74 321.79 177.84 291.51c87.926-6.233 189.035 1.018 269.29 122.01l-30.286-111.768-114.03-33.826c38.234-48.656 116.253-23.912 190.39 29.45l-63.015-80.312-133.442-13.59c22.58-50.88 108.657-59.573 185.336-7.413L407.95 115.75c-105.138 37.836-182.9 34.318-190.315 9.33-2.432 3.567-4.53 7.19-6.29 10.854-13.455 27.973-8.834 59.176 11.362 86.75l-15.078 11.043c-23.475-32.05-29.726-71.382-13.128-105.893 15.343-31.902 49.35-58.73 103.26-73.768l-131.782-6.32z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/evil-minion.svg b/static/_icons/_ability/_creature/evil-minion.svg
new file mode 100644
index 00000000..3a6d3713
--- /dev/null
+++ b/static/_icons/_ability/_creature/evil-minion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m118.1 20.63-2.9 20.19-53.11-2.48 49.01 31.6L96.24 174.2A28.31 28.31 0 0 0 79.43 200a28.31 28.31 0 0 0 10.04 21.6l-6.55 45.9 20.78 2.4 12.4-42.9a28.31 28.31 0 0 0 3.1-1.2l61.1 28.9 49.1-30.9 26 61.1-73 79.3 11.2 78.7-38.6 48.5h48.5l19.6-46.4-11.9-68.8 43.5-21.1 6.3 49.2 56.2 2.1 2.8-47.1 65.3 35.1 3.5 51.3-10.2 45.7h62.2l-30.2-45.7-5.6-68.1-80.1-80.8 26.7-82.1 61.8 21-27.2 25.3a28.31 28.31 0 0 0-6.8-.8 28.31 28.31 0 0 0-28.3 28.3 28.31 28.31 0 0 0 28.3 28.3 28.31 28.31 0 0 0 28.3-28.3 28.31 28.31 0 0 0-1.5-9.2l43.7-49.2L333 155.3a42.7 62.07 0 0 0 1.1-13.9 42.7 62.07 0 0 0-2.4-20.2c55.4-12.5 61.7-67.54 15.5-97.18 8.6 26.64 22.2 51.09-33 64.97a42.7 62.07 0 0 0-22.8-9.69 42.7 62.07 0 0 0-23.5 10.32c-58.2-13.78-44.2-38.57-35.5-65.6-47 30.17-39.6 86.68 18.5 97.98a42.7 62.07 0 0 0-2.2 19.4 42.7 62.07 0 0 0 2.7 21.6l-73.2 61.5-43.1-17.4a28.31 28.31 0 0 0 .9-7.1 28.31 28.31 0 0 0-6.8-18.3l42-145.18zM280.2 126.5a10.43 10.43 0 0 1 10.5 10.4 10.43 10.43 0 0 1-10.5 10.4 10.43 10.43 0 0 1-10.4-10.4 10.43 10.43 0 0 1 10.4-10.4zm34.5 0a10.43 10.43 0 0 1 10.5 10.4 10.43 10.43 0 0 1-10.5 10.4 10.43 10.43 0 0 1-10.4-10.4 10.43 10.43 0 0 1 10.4-10.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/evil-moon.svg b/static/_icons/_ability/_creature/evil-moon.svg
new file mode 100644
index 00000000..d892e30c
--- /dev/null
+++ b/static/_icons/_ability/_creature/evil-moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.938 19.938C124.514 19.938 17.78 126.67 17.78 258.094c0 131.422 106.735 238.156 238.157 238.156 131.423 0 238.157-106.734 238.157-238.156 0-131.422-106.734-238.156-238.156-238.156zm0 18.687c121.322 0 219.468 98.147 219.468 219.47 0 26.08-4.548 51.085-12.875 74.28-20.99 8.188-43.686 12.75-67.624 12.75-22.242 0-43.584-3.855-63.406-10.938l12.094 44.594-71.75-12.467 18.844 51.562c-57.855 7.1-108.19-15.432-130.47-49.28l81.313 1.78-23.56-48.438 72.436-8.062.688.063c-16.83-11.135-31.777-24.876-44.22-40.688 30.674-18.014 66.44-28.814 102.782-22.844-43.234-49.45-95.713-64.09-139.437-57.437a187.763 187.763 0 0 1-3.345-35.314c0-45.286 16.2-86.562 42.938-118.937 2.04-.057 4.072-.095 6.125-.095zM139.188 180.78c.638-.006 1.268-.013 1.906 0 19.467.437 38.24 10.748 48.687 28.845 15.923 27.577 6.48 62.83-21.093 78.75-27.572 15.92-62.828 6.483-78.75-21.094-15.92-27.576-6.478-62.86 21.094-78.78a57.431 57.431 0 0 1 28.157-7.72zm-.063 21.064c-20.26 0-36.906 16.643-36.906 36.906 0 20.263 16.644 36.875 36.905 36.875 20.26 0 36.875-16.612 36.875-36.875s-16.614-36.906-36.875-36.906zm0 18.687c10.16 0 18.188 8.058 18.188 18.22 0 10.162-8.028 18.188-18.188 18.188-10.16 0-18.22-8.026-18.22-18.188 0-10.162 8.06-18.22 18.22-18.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/eye-target.svg b/static/_icons/_ability/_creature/eye-target.svg
new file mode 100644
index 00000000..6fa0c547
--- /dev/null
+++ b/static/_icons/_ability/_creature/eye-target.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 105c-60.25 0-124.749 38.39-167.945 77.66-34.931 31.756-58.722 62.36-66.88 73.34 8.158 10.98 31.949 41.584 66.88 73.34C131.25 368.61 195.75 407 256 407s124.749-38.39 167.945-77.66c34.931-31.756 58.722-62.36 66.88-73.34-8.158-10.98-31.949-41.584-66.88-73.34C380.75 143.39 316.25 105 256 105zm0 23a128 128 0 0 1 63.486 16.969A48 48 0 0 0 288 190a48 48 0 0 0 .023.453A72.362 72.362 0 0 0 265 183.576V160h-18v23.576c-33.034 4.095-59.33 30.39-63.424 63.424H160v18h23.576c4.095 33.034 30.39 59.33 63.424 63.424V352h18v-23.576c33.034-4.095 59.33-30.39 63.424-63.424H352v-18h-23.576a72.33 72.33 0 0 0-1.98-10.014A48 48 0 0 0 336 238a48 48 0 0 0 41.023-23.195A128 128 0 0 1 384 256a128 128 0 0 1-128 128 128 128 0 0 1-128-128 128 128 0 0 1 128-128zm-9 73.738V224h18v-22.262c23.237 3.792 41.47 22.025 45.262 45.262H288v18h22.262c-3.792 23.237-22.025 41.47-45.262 45.262V288h-18v22.262c-23.237-3.792-41.47-22.025-45.262-45.262H224v-18h-22.262c3.792-23.237 22.025-41.47 45.262-45.262z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/fangs-circle.svg b/static/_icons/_ability/_creature/fangs-circle.svg
new file mode 100644
index 00000000..8da32499
--- /dev/null
+++ b/static/_icons/_ability/_creature/fangs-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M263.064 21.654c-61.945 0-108.823 19.19-147.69 50.873h-.11l.013.08C96.2 88.174 79.044 106.733 63.002 127.54c13.466-7.973 28.174-14.91 43.81-20.82-32.252 37.934-51.837 87.843-51.837 142.4 0 64.49 27.35 122.493 70.656 161.89-22.716-7.12-43.878-16.202-62.628-27.307 48.742 63.224 107.65 105.89 200.062 105.89 90.676 0 154.59-42.808 201.206-105.89-21.023 12.138-45.283 21.964-71.5 29.434 44.684-39.42 73.048-98.352 73.048-164.016 0-55.86-20.528-106.848-54.164-145.1 19.013 6.514 36.74 14.356 52.616 23.52-15.24-20.623-32.332-39.077-51.6-54.58l.074-.43h-.61c-39.575-31.657-88.313-50.876-149.07-50.876zm1.36 59.024c4.486.02 8.973.103 13.453.24l23.566 77.29L323.94 84.41a483.613 483.613 0 0 1 21.546 3.108l32.325 185.517 26.034-149.414c27.012 33.946 43.283 77.666 43.283 125.5 0 64.49-29.564 121.507-75.166 157.163l-24.1-140.217-27.714 161.22a506.89 506.89 0 0 1-13.728 1.374l-16.22-62.443-16.678 64.217c-6.068.135-12.142.165-18.213.087l-16.703-64.303-16.317 62.824a491.62 491.62 0 0 1-15.652-1.47l-27.762-161.504-24.78 144.17c-48.574-35.306-80.43-94.18-80.43-161.115 0-51.262 18.688-97.8 49.257-132.643l27.277 156.558L182.625 86.92a473.082 473.082 0 0 1 22.074-3.03l22.66 74.317 23.6-77.418c4.487-.096 8.975-.134 13.464-.112z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/feather-wound.svg b/static/_icons/_ability/_creature/feather-wound.svg
new file mode 100644
index 00000000..f312258e
--- /dev/null
+++ b/static/_icons/_ability/_creature/feather-wound.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M15.258 23.994C28.83 47.05 58.626 88.46 89.648 116.95l92.844 62.818-119.47-50.465-1.92-.315c24.343 38.854 55.535 70.026 92.005 93.282l127.3 60.376L155.9 253.238c40.5 39.53 100.607 75.72 151.4 98.698l63.925 24.37-82.89-11.066-.208.016c52.34 51.69 149.044 110.424 207.45 130.998-1.585-13.49-4.593-28.014-8.82-42.758-16.24-34.366-48.9-49.708-83.413-61.435a151.89 151.89 0 0 1 7.017-.126c22.757.123 43.142 5.6 60.71 18.603-13.84-30.897-32.514-59.165-54.246-76.754l.39.037c-26.092-21.573-56.34-40.94-89.81-58.67 46.746 9.337 102.14 38.655 136.29 63.16l.122.01c-34.19-46.3-90.762-97.425-140.103-130.974L208.53 148.023l136.18 37.754c-41.767-26.197-80.66-45.64-123.83-61.582L108.19 87.82l122.273 13.176C176.465 68.613 75.36 38.786 15.26 23.994h-.002z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/feather.svg b/static/_icons/_ability/_creature/feather.svg
new file mode 100644
index 00000000..c8551cf7
--- /dev/null
+++ b/static/_icons/_ability/_creature/feather.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M470.7 20 368.2 49.81l41.5-28.09c-26.2 5.92-59.3 17.5-100.9 36.19l-67.9 70.79L265 79.25c-23.3 12.96-48 29.95-71.8 49.85l-15.8 64.3-3.4-47.6c-23.5 21.6-45.6 45.6-63.9 70.9-19.23 26.5-34.26 54.5-41.79 82.4l-28.12-18.8c2.52 23.7 10.31 44.3 23.09 63.2l-33.62-10.3c7.64 23.5 20.13 38.7 41.25 51-11.83 33.3-17.38 68.1-23.34 102.8l18.4 3.1C87.31 277.4 237.9 141.8 374 81.72l6.9 17.38c-121.7 54.5-216.3 146.5-265.8 279.1 18.1.1 35.8-2.1 52.2-6.3l4.9-60.9 13.1 55.5c10.9-4 20.9-8.8 29.8-14.4l-20.7-43.5 32.8 34.8c8-6.4 14.6-13.6 19.6-21.5 30.4-47.5 62.2-94.7 124.8-134.2l-45.7-16.2 70.1 2.1c11.4-5.8 23.4-12.9 32.5-19.6l-49.7-4 74.7-17.6c5.8-5.8 11.2-11.9 16.1-18 17.3-21.94 29-44.78 26.2-65.55-1.3-10.39-7.5-20.16-17.6-25.63-2.5-1.3-5.2-2.45-7.5-3.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/fish-corpse.svg b/static/_icons/_ability/_creature/fish-corpse.svg
new file mode 100644
index 00000000..3f61981b
--- /dev/null
+++ b/static/_icons/_ability/_creature/fish-corpse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M435.125 19.72c-2.52.003-5.002.024-7.47.06-66.318 1.013-117.573 12.795-180.874 39.376-35.44 52.333-24.53 139.625 5.5 202.063 15.218 31.635 35.318 56.506 53.657 67 9.17 5.245 17.488 7.007 25.22 5.53 7.73-1.477 15.614-6.244 23.656-16.813l.375-.5.437-.437c39.966-40.123 69.86-81.484 91.344-124.03l-13.72-33.376-26.156 52-20.53-40.75-40.22 74-18.47-30.344-49.187 46.156 49.938-91.187 18.844 31.03 26.28-87.313 28.656 38.75 30.563-73.78 33 71.093c15.2-41.172 23.373-83.366 25.967-126.5-20.24-1.287-39.178-2.06-56.812-2.03zM300.44 63.17a38.648 55.07 27.484 0 1 23.156 69.732 38.648 55.07 27.484 0 1-68.672-35.476A38.648 55.07 27.484 0 1 300.44 63.17zM93.564 122.406c28.366 36.35 50.67 75.307 69.562 115.72-10.936 12.19-21.54 24.897-31.72 37.905-18.43-22.897-46.54-42.48-90.75-58.155 27.937 28.82 50.546 56.503 70.314 85.438a838.712 838.712 0 0 0-22.157 32.437c-13.103-12.897-31.868-23.74-59.688-31.97 17.43 19.285 31.776 37.524 44.97 55.564-8.043 13.375-15.393 26.5-21.97 39.156-8.645-3.69-19.512-6.08-33.344-8.313 8.2 8.02 16.466 16.23 25.126 24.688-14.698 30.534-24.126 57.313-26.5 76.25 10.822-19.19 24.69-40.377 40.844-62.406a972.77 972.77 0 0 0 26.188 24.03c-3.135-18.866-7.292-31.496-13.938-40.344a933.95 933.95 0 0 1 21.875-27.312c10.99 15.793 21.803 31.7 33.72 48.25-4.94-24.664-8.18-47.663-17.032-67.813a985.887 985.887 0 0 1 24.406-26.78c13.917 23.576 26.725 48.49 39.593 75.875-4.698-35.502-8.05-68.197-18.72-97.28a879.647 879.647 0 0 1 30.47-28.908c14.92 37.328 27.988 75.47 41.125 113.563-1.928-46.754-2.054-94.115-12.844-137.906 4.92-4.03 9.854-8.007 14.812-11.844-7.81-19.14-14.064-39.805-18-60.906a511.066 511.066 0 0 0-18.47 17.156c-18.918-33.25-49.116-62.76-97.874-86.094z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/fish-scales.svg b/static/_icons/_ability/_creature/fish-scales.svg
new file mode 100644
index 00000000..2b67b6aa
--- /dev/null
+++ b/static/_icons/_ability/_creature/fish-scales.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M64 494c-9.2 0-18.58-6.3-26.22-19.1-6.66-11.1-11.41-26.6-12.53-44 13.27-3.3 24.47-13.5 32.41-26.7 2.36-3.9 4.48-8.2 6.34-12.7 1.86 4.5 3.98 8.8 6.34 12.7 7.94 13.2 19.14 23.4 32.36 26.7-1.1 17.4-5.82 32.9-12.48 44C82.58 487.7 73.2 494 64 494zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm-336-80c-9.2 0-18.58-6.3-26.22-19.1-6.66-11.1-11.41-26.6-12.52-44 13.26-3.3 24.46-13.5 32.44-26.7 2.3-3.9 4.4-8.2 6.3-12.7 1.8 4.5 4 8.8 6.3 12.7 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm-382-.1V316c1.34 2.9 2.78 5.6 4.34 8.2 7.94 13.2 19.14 23.4 32.4 26.7-1.11 17.4-5.86 32.9-12.52 44-7.09 11.9-15.67 18.1-24.22 19zm476 0c-8.6-.9-17.1-7.1-24.2-19-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 1.5-2.6 3-5.3 4.3-8.1zM64 334c-9.2 0-18.58-6.3-26.22-19.1-6.66-11.1-11.41-26.6-12.52-44 13.26-3.3 24.46-13.5 32.4-26.7 2.36-3.9 4.48-8.2 6.34-12.7 1.86 4.5 3.98 8.8 6.34 12.7 7.94 13.2 19.14 23.4 32.36 26.7-1.1 17.4-5.82 32.9-12.48 44C82.58 327.7 73.2 334 64 334zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm-336-80c-9.2 0-18.58-6.3-26.22-19.1-6.66-11.1-11.41-26.6-12.52-44 13.26-3.3 24.46-13.5 32.44-26.7 2.3-3.9 4.4-8.2 6.3-12.7 1.8 4.5 4 8.8 6.3 12.7 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.4-3.9 4.5-8.2 6.3-12.7 1.9 4.5 3.9 8.8 6.3 12.7 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.4-3.9 4.5-8.2 6.3-12.7 1.9 4.5 3.9 8.8 6.3 12.7 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm-382-.1V156c1.34 2.9 2.78 5.6 4.34 8.2 7.94 13.2 19.14 23.4 32.4 26.7-1.11 17.4-5.86 32.9-12.52 44-7.09 11.9-15.67 18.1-24.22 19zm476 0c-8.6-.9-17.1-7.1-24.2-19-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 1.6-2.5 3-5.3 4.3-8.1zM64 174c-9.2 0-18.58-6.3-26.22-19.1-6.66-11.1-11.41-26.6-12.52-44 13.26-3.3 24.46-13.5 32.4-26.7 2.36-3.9 4.48-8.2 6.34-12.7 1.86 4.5 3.98 8.8 6.34 12.7 7.94 13.2 19.14 23.4 32.36 26.7-1.1 17.4-5.82 32.9-12.48 44C82.58 167.7 73.2 174 64 174zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 13.2-3.3 24.4-13.5 32.4-26.7 2.3-3.9 4.5-8.2 6.3-12.6 1.8 4.4 4 8.7 6.3 12.6 8 13.2 19.2 23.4 32.4 26.7-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zM112 94c-9.2 0-18.58-6.3-26.22-19.1-6.66-11.1-11.41-26.6-12.52-44C80.93 29 87.9 24.8 93.96 19H130c6.1 5.8 13.1 10 20.7 11.9-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 7.6-1.9 14.6-6.1 20.7-11.9h36c6.1 5.8 13.1 10 20.7 11.9-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 7.6-1.9 14.6-6.1 20.7-11.9h36c6.1 5.8 13.1 10 20.7 11.9-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm96 0c-9.2 0-18.6-6.3-26.2-19.1-6.7-11.1-11.4-26.6-12.5-44 7.6-1.9 14.6-6.1 20.7-11.9h36c6.1 5.8 13.1 10 20.7 11.9-1.1 17.4-5.8 32.9-12.5 44-7.6 12.8-17 19.1-26.2 19.1zm-382-.1V19h16.04c6.06 5.8 13.03 10 20.7 11.9-1.11 17.4-5.86 32.9-12.52 44C35.13 86.8 26.55 93 18 93.9zm476 0c-8.6-.9-17.1-7.1-24.2-19-6.7-11.1-11.4-26.6-12.5-44 7.6-1.9 14.6-6.1 20.7-11.9h16z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/fishing-net.svg b/static/_icons/_ability/_creature/fishing-net.svg
new file mode 100644
index 00000000..cbf4f1fd
--- /dev/null
+++ b/static/_icons/_ability/_creature/fishing-net.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M161.9 17.31c-32.7 0-63.75 8.22-88.96 24.19-28.82 18.25-49.85 47.08-55.85 84.2-5.99 37 2.83 81.8 31.25 133 19.84 35.6 44.25 63.8 59.66 93.5 12.4 25.7 18.4 46.7 15.6 75.2-14.7 2.9-25.73 15.7-25.73 31.2 0 17.5 14.23 31.8 31.73 31.8 17.6 0 31.8-14.3 31.8-31.8 0-13.2-8-24.4-19.4-29.3 1-10.2 1-19.8.1-29.1 9.2-10.8 19.9-16.3 33.2-18.1 14.7-2.1 32.7.7 53.3 8.1 5.1 9.7 9.7 20 13.7 31.1-9.2 5.4-15.3 15.4-15.3 26.8 0 17.1 13.9 31 31 31 17.2 0 31.1-13.9 31.1-31 0-16.3-12.5-29.7-28.5-31-4-11.6-8.7-22.4-13.9-32.6 10.2-9.9 27.5-16.7 47.6-20.6 22-4.3 46.7-5.4 67.4-6 7 6.4 13.9 13.2 20.6 20.3-.5 2.2-.8 4.6-.8 7 0 16.4 13.3 29.6 29.6 29.6 16.4 0 29.6-13.2 29.6-29.6 0-16.3-13.2-29.6-29.6-29.6-6.9 0-13.3 2.4-18.3 6.4-6.5-6.7-13.1-13-19.8-19.1-1-49.1 13.3-87.6 37.8-119.2 8.9-2.2 18-5.4 27.4-9.7 5.8 5.7 13.7 9.2 22.4 9.2 17.5 0 31.7-14.2 31.7-31.8 0-17.5-14.2-31.7-31.7-31.7s-31.8 14.2-31.8 31.7c0 2.1.2 4.2.6 6.2-7.8 3.5-15.2 6.1-22.4 8-15.5-19.9-16.9-35.5-12.6-52.8 4.6-18.4 17.3-38.6 29.9-61.9 6.3-4.02 12-8.88 16.7-14.62 5.5 4.16 12.3 6.62 19.7 6.62 17.9 0 32.5-14.53 32.5-32.47 0-17.93-14.6-32.46-32.5-32.46s-32.5 14.53-32.5 32.46c0 3.4.6 6.68 1.5 9.75-11.2 16.83-32.7 26.23-58.8 26.69-26.6.47-57.1-8.56-82.7-27.25-40-23.91-86.1-41.78-126.3-42.31zm46.8 25c18.6 4.78 37.1 12.46 54.7 23.22l.1 14.75c-17.7-13.23-37.1-27.25-54.3-36.15zm-61.8 3.22 4.6 15.78c-11.2-5.2-22.9-9.35-35.3-12.09 10.7-2.2 20.7-4.03 30.7-3.69zm20.2 2.72c9.1 2.07 18.4 5.46 26.2 9.03l9.8 36.94c-9.2-7.27-18.6-14.13-28.5-20.28zm-62.8 17.78c18.5 3.03 35.5 9.68 51.6 18.72l-10.8 18.65c-14-13.33-28.2-26.75-40.8-37.37zm111.5 3.34c10.8 6.65 21.4 14.27 31.9 22.28 5.3 4.12 10.6 8.34 15.9 12.55l.3 44.1c-11.7-10.6-23.6-21.9-35.9-32.9zm66.4 8.85c12.6 8.53 26.2 15.08 39.9 19.62l.7 28.26c-13-8.7-26.5-19.6-40.5-30.88zm-192.29.18c15.59 13.03 30.59 27.3 45.39 42.1l-13.9 23.9c-13.6-22.6-24.73-45.32-31.49-66zm81.89 16.22c13.7 9.28 26.8 19.98 39.7 31.38-2 6.1-12.2 21.9-16.1 28.1-12.2-12.2-24.3-24.7-36.6-37zm224.7 7.88c-8.2 14.6-15.8 28.9-19.9 44.2-11.2.2-22.8-3.2-34.9-9.3l-.8-34.6c19.1 3.5 38 3.8 55.6-.3zm-342.91 8c.3 21.8 3.72 41.3 9.41 58.9L46.75 166c.35-20.5 2.82-39.5 6.84-55.5zm32.38 8.7c6.46 13.6 13.77 26.2 21.73 37.7l-13.55 5.8c-4.74-15.3-7.78-30.3-8.18-43.5zm196.43.1c14.3 10.9 26.8 21 40.9 29.2l1 45.7c-14.1-7.6-27.9-17.8-41.6-29.4zm-133.5 15c11.9 12.1 23.8 24.5 36 36.6l-16.4 26.4c-12.6-11.1-24.3-23.1-35-36.5zm77.7 5.2c13 11.7 25 23.1 36.4 33.1l-17.1 28.6c-12.7-10.6-24.9-21.9-36.8-33.6zm115.6 18.7c10.3 4.3 20.9 6.9 31.7 7.2-.2 14.1 3.6 28.7 12.9 43.6-15.9.6-30-1.3-43.6-6.2zm-223 14.1c9.9 12.5 20.6 23.8 32 34.3l-22.7 8c-10.7-11.8-19.8-22.8-26.5-35zm79.4 12c12 11.6 24.3 22.9 37.3 33.5l-12.4 20.7c-14-9.4-28.9-20-40.5-29.2zm78.9.5c14 11.3 28.5 21.4 44 29l-16.3 28.5c-15.8-8.6-30.6-18.5-44.6-29.3 5.6-9.4 11.3-18.8 16.9-28.2zm-228.53.8 22.09 4.6c5.33 11.7 11.66 22.6 18.72 32.9l-27.53-1.9c-6.04-10.7-10.69-22.4-13.28-35.6zm118.53 35.1c11.4 9.4 23.3 18.1 35.5 26.4l-24.3 8.2c-12.1-8.3-24.5-17.5-34.8-26.3zm171.3.4c15 5.1 32.5 7.2 46.6 6.6-7.6 12.1-14.1 25.1-19 39.1-15.8-4.2-30.6-9.6-44.5-16 5.6-9.9 11.3-19.8 16.9-29.7zm-88.1 8.4c14.2 10.7 29.1 20.6 45.1 29.3L285 277.7c-15.5-9.9-30.9-19.4-45.8-29 3.8-6.4 7.7-12.8 11.5-19.2zm-127 6.6c10.8 10.6 23 18.1 33 26.6l-6.7 2.2c-9.3-9.5-19.5-20.4-26.3-28.8zm-48.2 4.7c9.67.6 19.32 1.5 29 2 7.6 8.9 15.6 17.9 22.5 25.2-7.3.7-17.4.9-25.6 1.2-9.27-9.7-18.85-19.4-25.9-28.4zm147.1 19.5c15.1 9.7 30.4 19.2 45.7 29l-24 10.8c-15.1-11.3-32.2-22.7-46-31.7zm89.9 6.9c15.1 7 31.2 12.9 48.4 17.5-3.3 13.4-5.4 27.5-6.1 42.5-17.7-14.5-35.9-27.3-54.1-39.3 3.9-6.9 7.9-13.8 11.8-20.7zm-136.6 8.7c17.1 11.6 34 22.3 48.8 33l-22.9 10.3c-12.1-14-24.8-26.9-37.2-39.5zm-31.2 10.4c11.6 11.7 23.2 23.3 34.4 35.6h-24.8c-10.7-12.6-22.4-23.8-33.9-34.7 8.1-.1 16.2-.9 24.3-.9zm-50.86 1.9c11.76 11.3 23.66 22.2 34.76 33.7H112c-7.2-11.3-14.92-22.4-22.66-33.6 1.5 0 3.01-.1 4.5-.1zm193.26 13.2c18.2 12 36.2 24.6 53.7 38.6-19.8 1.3-37.6 3.1-54.7 6.5-6.1-12.3-15.1-23.1-25.9-33 8.9-4.1 17.9-8.1 26.9-12.1zm-45.7 20.5c11.3 9.5 20.3 19.3 26.2 29.7-11.3 3.8-21.7 9-30.1 16.2-7.2-12.1-15.1-23.2-23.3-33.7zM123 340.6h22.2c6.3 7.9 12.1 16.2 17 25.2-8.7 2.6-16.8 6.7-24.1 12.5-4.1-14-9-26.4-15.1-37.7zm45.7 0h26.6c6.8 8.3 13.3 16.9 19.4 26-11.6-2.8-22.6-4.2-33.1-3.8-4.1-7.9-8.6-15.9-12.9-22.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/flat-paw-print.svg b/static/_icons/_ability/_creature/flat-paw-print.svg
new file mode 100644
index 00000000..71d64255
--- /dev/null
+++ b/static/_icons/_ability/_creature/flat-paw-print.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M314.78 19.47c-18.84 33-23.783 72.886 5.876 69.56 24.07-2.696 16.35-40.304-5.875-69.56zm-122.217 4c-17.095 33.8-19.95 73.854 9.5 69.218 23.9-3.764 14.227-40.983-9.5-69.22zm222.125 75.343c-21.958 30.365-30.705 69.304-.813 69.687 24.262.312 20.163-37.94.813-69.688zm-318.063 3.25C79.9 134.972 79 173.245 103.25 171.22c29.88-2.498 17.868-40.543-6.625-69.157zm217.594 8.374c-55.61 2.262-50.322 118.727 2.592 116.594 52.018-2.088 52.118-118.81-2.593-116.593zm-107.095 1.844c-.828.016-1.648.084-2.5.157-55.42 4.785-43.925 120.847 8.813 116.313 51.033-4.38 45.872-117.42-6.313-116.47zm-82.875 83.44a35.508 35.508 0 0 0-4.938.28c-55.146 6.99-38.225 122.506 14.25 115.875 49.975-6.31 40.645-115.58-9.312-116.156zm278.625 1.343c-55.653-1.027-58.487 115.502-5.53 116.5 52.054.986 60.284-115.482 5.53-116.5zm-145 67.218c-57.02 1.258-12.988 60.186-113.78 94.44-78.123 26.548-30.808 106.533 36.06 106.81 36.702.154 49.8-28.817 79.845-28.686 34.116.144 36.844 26.134 86.78 26.344 63.76.263 100.665-80.2 27.72-107.532-92.875-34.798-54-90.786-113.813-91.375-.957-.008-1.907-.02-2.812 0z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/frog-foot.svg b/static/_icons/_ability/_creature/frog-foot.svg
new file mode 100644
index 00000000..e46d8146
--- /dev/null
+++ b/static/_icons/_ability/_creature/frog-foot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M324.3 34.79c-25.7 0-46.5 27.02-46.5 60.36 0 20.05 7.7 38.85 20.6 50.05 5.6 81.2-4.7 152.3-53.6 160.1-60.2 6.2-73.2-68.2-84.6-139 8.9-15.7 9.2-37.5.6-57.3-13.4-30.79-43.6-47.33-67.56-36.92-23.92 10.4-32.47 43.72-19.11 74.52 9.44 21.7 27.77 37.1 47.07 39.6 33.9 57.6 71.8 152.4 51 180.2-11.5 15.2-32.7 10.4-55.6-4 3.7-16.3-4.5-34.6-20.81-46.7-22.74-16.9-53.8-16.5-69.39.8-15.6 17.3-9.77 45 13 61.9 17.78 13.1 41.33 16.1 58.44 7.4 67.86 32.9 121.86 99.5 175.56 90.6 76.2-12.6 76.5-119.3 148.3-149.9 13.7 9.1 33.5 8.3 49.7-2.1 21.2-13.7 29.1-39.2 17.7-56.9-11.4-17.8-37.9-21.1-59.2-7.4-15.9 10.3-24.9 27.8-22.5 43.9-29.9 22.4-68.5 39.7-88.7 27.3-16.2-9.9 1.8-122.3 19-178.4 19.6-7.7 33.1-31.1 33.1-57.75 0-33.34-20.8-60.37-46.5-60.36z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/grasping-claws.svg b/static/_icons/_ability/_creature/grasping-claws.svg
new file mode 100644
index 00000000..f1ca7a19
--- /dev/null
+++ b/static/_icons/_ability/_creature/grasping-claws.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M233.156 36.156c-6.48-.048-13.395 1.184-20.47 3.625-16.957 5.854-33.577 18.887-43.467 36.157 77.39 68.916 107.53 126.832 108.06 219.25 43.458-77.778 36.565-167.55-17.217-248.218-6.928-7.206-16.306-10.736-26.907-10.814zm93.78 35.375c-6.478-.047-13.393 1.185-20.467 3.626-2.493.86-4.982 1.902-7.44 3.063 14.802 31.958 23.134 65.038 24.75 97.936 32.99 45.06 46.945 91.825 47.314 154.375 43.432-77.787 36.5-167.58-17.313-248.25-6.92-7.15-16.28-10.67-26.842-10.75zm70.783 49.564c-.51-.004-1.018.02-1.533.03 19.362 45.11 25.912 92.202 19.032 137.75 18.285 35.42 26.38 73.767 26.655 121.22 43.436-77.79 36.502-167.58-17.313-248.25-6.92-7.15-16.282-10.672-26.843-10.75zM86.905 235.064c-9.708.257-19.153 2.586-27.125 6.467-14.347 6.987-22.985 17.96-22.81 30.595 8.884 44.736 21.04 77.706 40.718 100.688 16.145 18.856 37.66 31.635 68.406 39.156-39.886-58.353-46.966-90.635-41.688-175.033a64.575 64.575 0 0 0-13.312-1.843 66.49 66.49 0 0 0-4.188-.03z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/nautilus-shell.svg b/static/_icons/_ability/_creature/nautilus-shell.svg
new file mode 100644
index 00000000..14b39c31
--- /dev/null
+++ b/static/_icons/_ability/_creature/nautilus-shell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M141.49 361.44c10.6 2.434 16.243 2.523 27.81 1.153-8.665 41.136 46.103 47.286-16.42 118.757 21.354-80.17-25.916-60.54-11.39-119.91zm-40.532-20.274 25.917 13.68c-16.114 18.798-4.805 80.966-38.226 112.614-1.29-49.98-4.846-91.22 12.308-126.294zm264.044 115.452 1.547-33.994c-12.31-35.97-29.496-68.375-48.6-99.386 11.67-4.796 21.683-11.94 28.495-23.506 32.502 10.19 65.77 18.718 103.352 17.21 8.706 62.95-27.626 109.003-84.795 139.676zm-177.17-75.106 21.3-6.7c26.714-18.29 48.23-36.024 64.4-58.176 8.125 4.756 16.735 9.238 26.6 12.712 18.042 34.365 32.07 67.214 40.21 102.514-41.305 30.874-118.877 26.916-152.51-50.35zM68.98 315.588l21.233 23.216c-9.738 13.462-20.274 38.548-30.584 80.837-14.157-39.136-10.908-74.073 9.35-104.052zm-28.392-26.61 16.34 20.782c-8.996 10.657-19.41 30.97-30.697 65.73-9.398-33.655-4.456-62.724 14.358-86.512zm213.58-57.984c-2.62 9.73-3.756 19.307-1.724 28.343l9.61 41.426c-16.85 20.87-37.88 39.935-66.4 56.695-15.35-54.703 15.63-97.823 58.515-126.464zM68.82 296.95c-29.31-26.585-31.01-42.933-15.51-52.8.492-66.255 29.545-109.35 73.365-139.152l-4.28 43.345c3.748 43.708 23.925 80.24 57.62 133.243-9.31 21.354-14.227 45.24-8.23 66.988-38.17-10.616-81.022-29.278-102.965-51.624zm236.99 4.136 11.472-47.02c33.01 14.856 17.823 38.483-11.472 47.02zm183.787-.234-33.188-11.6c-36.356 2.137-70.495-2.676-103.787-10.407 1.733-14.494-1.58-29.205-7.2-42.506 15.02-26.33 50.117-64.756 78.855-87.916 49.447 49.27 70.69 100.152 65.32 152.428zm-199.312-1.144-8.85-4.257c-5.7-16.177-10.094-33.315-12.44-51.96 12.358-5.894 23.28-7.167 32.55-3.177l-11.26 59.395zM143.44 134.656c34.454-64.264 82.805-93.792 135.34-104.006l-20.323 42.547c-5.788 41.636-8.472 85.255 1.363 136.798-22.58 10.1-47.158 22.37-67.964 53.768-25.7-38.178-46.247-81.12-48.415-129.107zm136.96 75.96c-9.254-41.2-6.32-83.707-.63-135.815 67.086-10.962 125.078 3.436 167.4 43.137-13.842 3.007-26.305 7.892-38.163 13.64-30.52 28.012-55.25 60.264-77.217 94.468-15.26-8.682-32.672-13.333-51.39-15.43z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/paw.svg b/static/_icons/_ability/_creature/paw.svg
new file mode 100644
index 00000000..ed3a7e3a
--- /dev/null
+++ b/static/_icons/_ability/_creature/paw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M163.188 21.97c-7.297 26.986-10.203 53.018-7.938 78.436-14.85 7.285-25.906 20.114-25.813 37.438.283 52.65 14.304 78.17 27.75 103.28 13.548 25.303-13.83 40.578-25.812 11.626-9.234-22.314-15.026-41.954-32.938-67.78-9.084-13.102-22.705-17.43-36.124-15.75-11.94-18.19-21.904-36.186-30.188-56.282-7.62 29.437-8.15 53.222-.875 72.156-10.35 10.828-15.61 25.955-9.625 41.844 12.662 33.607 39.78 62.612 56.156 76.812 31.5 27.312 48.92 57.614 59.69 93.78L122.187 444l23.124-12.375-15.687 47.063 17.406-10.438c-1.464 10.67-4.858 19.785-9.843 29.156h220.094c-6.797-11.38-13.59-21.46-17.405-32.344l18.594 13.625-12.783-58.218 15.282 16.936.592-48.156c17.473-24.295 40.45-46.337 58.97-61.625 4.012-3.313 8.287-6.348 12.28-9.688 16.656-13.928 34.265-34.822 50.344-65.187 7.97-15.047 4.18-29.898-5.437-41.28 6.854-20.713 10.25-40.728 10.186-61.376l-39.03 43.03c-16.944-4.927-35.66-2.328-47.688 12.5-15.665 19.312-20.914 36.51-32.938 52.282-14.377 18.857-30.835 6.79-21.938-9.687 14.045-26.01 29.088-57.898 31.625-109.095 1.034-20.86-12.418-35.303-30.406-42.5 1.58-23.15-7.402-49.838-16.217-74.313-5.48 21.334-13.383 46.38-21.407 69.72-19.64 2.562-37.13 12.946-42.344 32.906-11.923 45.646-6.575 79.856-5.812 103.28.998 30.646-32.694 23.28-30.97 0 2.43-32.78 9.427-56.95-.655-103.937-3.872-18.04-18.63-27.624-35.688-30.093-6.52-25.415-18.27-48.343-31.25-72.218zm157.25 92.468c23.62.08 46.055 24.707 29.656 68.624-20.786 55.666-73.04 38.98-69.156-21.78 2.052-32.11 21.128-46.908 39.5-46.845zm-142.72 3.75c17.888-.42 38.083 16.814 40.188 49.156 3.6 55.282-52.667 63.817-64.78 15.28-10.868-43.537 5.55-63.99 24.593-64.436zM65.25 191.344c9.805-.166 20.597 5.605 27.594 18.28 30.027 54.392-16.39 80.447-39.625 41-21.794-36.994-6.688-58.965 12.03-59.28zm370.625 22.406c21.77-.634 42.792 24.326 19.844 51.125-35.94 41.97-80.713 30.29-44.564-34.844 6.206-11.18 15.527-16.012 24.72-16.28zM253.47 266.438c97.645 0 155.217 95.69 61.468 113.093-28.966 5.38-41.64-10.665-61.875-10.75-17.822 0-38.463 16.566-59.844 12.845-98.955-17.233-51.51-115.188 60.25-115.188z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/pretty-fangs.svg b/static/_icons/_ability/_creature/pretty-fangs.svg
new file mode 100644
index 00000000..b0abf4d4
--- /dev/null
+++ b/static/_icons/_ability/_creature/pretty-fangs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M166.594 96.28c-41.99 38.54-97.77 74.975-147.47 86 40.138 14.206 107.59 18.608 153.282 9.532l1.22-.406v.188c.206-.043.418-.082.624-.125 53.26 31.326 94.218 32.182 151 0 .256.086.524.163.78.25l-.03-.314 7.594 2.625c.105.03.207.066.312.095 44.21 12.288 102.904 9.115 154.28-11.97-59.524-9.648-124.87-51.613-155.092-85.874-55.502 39.623-111 32.147-166.5 0zM28.72 206.688c11.626 22.318 32.612 57.64 64.905 94.813-1.55-18.164-2.515-35.945-3.03-52.625-22.18-11.265-42.998-25.28-61.876-42.188zm447.155 7.532c-20.55 14.733-43.1 27.315-66.938 37.624-.607 17.746-1.732 36.683-3.5 55.937 33.976-34.915 56.833-69.604 70.438-93.56zm-322.313 3.186c-15.034 3.72-30.014 4.855-44.562 4.156-.116 39.457 2.945 90.054 10.22 137.282 5.254 34.12 12.997 66.188 22.374 90.187l11.97-231.624zm192.5 0 11.97 231.625c9.376-23.998 17.12-56.066 22.374-90.186 7.274-47.228 10.335-97.825 10.22-137.28-14.554.697-29.524-.435-44.563-4.158zM330.406 276.5c-53.08 10.905-108.715 11.398-161.156.03l-4.438 86.033c49.643 23.158 118.42 22.46 170-.5l-4.406-85.563z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/pumpkin-mask.svg b/static/_icons/_ability/_creature/pumpkin-mask.svg
new file mode 100644
index 00000000..f429281f
--- /dev/null
+++ b/static/_icons/_ability/_creature/pumpkin-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256.156 16.875c-48.954 107.457-128.398 80.9-139.312 36.97-57.82 42.426-95.53 110.673-95.53 187.56-.002 128.577 104.928 232.94 234.217 232.94 129.29 0 234.22-104.363 234.22-232.94 0-76.278-37.273-143.847-94.313-186.343-11.27 42.068-78.266 67.493-139.28-38.187zM134.686 134.53c9.528-.102 20.15 2.023 30.5 6.5 25.48 11.024 39.598 32.274 31.5 47.47-8.095 15.196-35.33 18.585-60.81 7.563-25.48-11.023-39.567-32.304-31.47-47.5 4.808-9.023 16.358-13.88 30.28-14.032zm248.97 1.19c14.907-.366 27.44 4.532 32.5 14.03 8.097 15.196-6.02 36.446-31.5 47.47-25.48 11.02-52.684 7.632-60.78-7.564-8.098-15.196 5.988-36.446 31.468-47.47 9.555-4.132 19.368-6.25 28.312-6.467zM151.75 228.562 205 316.719l54.5-77.5 40.438 80.56 65.406-89.936 34.812 69.25 73.375-62.844c-1.208 56.223-38.25 133.637-83.78 165.344l-23.344-68.03-56.125 93.186-56.467-89.656-70.094 83.594-53.25-91.72-17.407 64.344c-46.367-40.18-69.01-99.95-66.907-158.593l54.157 68.186 51.437-74.344z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/shadow-grasp.svg b/static/_icons/_ability/_creature/shadow-grasp.svg
new file mode 100644
index 00000000..5ecd8fbb
--- /dev/null
+++ b/static/_icons/_ability/_creature/shadow-grasp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M221.268 19.824c-9.866.172-19.968 2.14-30.002 6.63L65.386 67.983l-.44 7.108c-5.165 83.462-6.107 155.855-44.696 211.004v33.226c58.64-62.168 59.955-145.976 65.28-235.832l72.384-23.88c-21.245 23.445-34.98 43.238-42.084 59.808-2.855 6.66-4.755 12.936-5.37 18.902-7.816 25.16-5.503 51.296 15.24 74.905-3.255-15.89-3.477-31.222-1.53-45.828a31.488 31.488 0 0 0 8.293 3.44c19.373 4.906 44.5-1.94 76.35-17.253 30.25-14.542 66.117-37.706 105.01-69.775l48.368 32.73c-29.567-2.373-57.21 2.11-80.665 12.113-18.437 7.865-34.347 19.29-46.357 33.426-24.973 26.092-33.82 71.752-28.268 98.403 2.466-10.895 6.392-22.255 11.496-33.578l143.338-40.074 46.852 41.906c-30.122-7.788-58.994-11.142-84.867-8.238-39.39 4.42-72.503 24.934-86.783 64.244l-5.185 14.274 136.463-1.49 26.174 57.138c-42.183-25.606-84.56-34.873-125.693-34.37-51.737.635-101.458 16.077-148.695 31.68l-2.484.82-1.81 1.892c-11.985 12.504-27.58 37.417-41.985 66.17-11.847 23.65-22.493 49.252-27.418 71.986H68c4.805-18.81 14.066-41.677 24.53-62.563 13.107-26.165 28.38-49.616 36.9-59.23 46.044-15.156 92.8-29.148 139.525-29.72 45.873-.563 91.752 11.28 139.047 48.245 15.232 20.38 26.606 41.606 31.72 64.203 4.928-23.655 5.312-52.454-11.784-76.38L381.65 276.343l-118.1 1.29c13.015-22.177 34.103-33.042 62.514-36.232 32.693-3.67 74.36 4.298 117.655 20.55 21.03 16.204 38.378 34.313 49.58 55.6-1.527-26.99-10.2-58.732-39.917-76.972l-86.215-77.11-130.076 36.366c8.267-22.522 26.764-40.777 52.687-51.834 28.765-12.27 66.23-15.26 106.263-4.094 24.284 10.177 45.53 23.124 61.742 40.658-6.674-20.26-18.418-42.217-39.49-55.462L312.527 57.53l-6.082 5.124c-40.176 33.84-76.992 57.666-106.746 71.97-29.754 14.306-52.98 18.12-62.073 15.817-4.546-1.15-5.186-2.007-5.928-4.67-.743-2.66-.484-8.857 3.464-18.067 7.5-17.498 27.28-44.476 62.05-78.553 25.34-10.698 50.48-17.074 75.28-16.107-14.85-7.49-32.616-13.543-51.226-13.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/shark-jaws.svg b/static/_icons/_ability/_creature/shark-jaws.svg
new file mode 100644
index 00000000..9d5e5f6e
--- /dev/null
+++ b/static/_icons/_ability/_creature/shark-jaws.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M257.97 20.22C150.394 88.557 72.1 275.18 69.874 494.374h375.188c-2.2-219.194-79.52-405.817-187.094-474.156zm-18.845 163.06 18.344 36.282 18.342-36.28c9.99 2.326 19.72 6.537 29.063 12.437l4.156 48.56 20.095-28.624c7.938 8.123 15.48 17.558 22.594 28.156L345.436 279l18.375-15.344c24.39 44.295 42.05 103.6 49.532 170.78-10.036-32.144-26.553-60.393-47.625-82.342l4-35.813L344.093 333a158.31 158.31 0 0 0-19.03-12.156l-3.345-40.97-26.314 28.876c-7.31-2.074-14.792-3.58-22.437-4.438l-15.5-33.25-15.5 33.282c-8.14.916-16.12 2.522-23.876 4.812l-24.875-27.28-3.157 38.874a158.482 158.482 0 0 0-19.22 12.25l-25.624-16.72 4.03 35.814c-21.08 21.95-37.618 50.19-47.656 82.344 7.482-67.188 25.17-126.485 49.562-170.782L169.5 279l-6.28-35.188c7.37-10.983 15.213-20.71 23.468-29.03l19.25 27.374 3.937-46.312c9.4-5.963 19.193-10.22 29.25-12.563z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/spider-web.svg b/static/_icons/_ability/_creature/spider-web.svg
new file mode 100644
index 00000000..9f7b5e5d
--- /dev/null
+++ b/static/_icons/_ability/_creature/spider-web.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m20.45 18.484 57.14 72.104C74.865 139.18 53.842 176.38 25.2 210.62l-6.716-1.76v19.32l2.557.672c15.35 45.065 9.088 90.827 1.82 138.294l-4.376 2.047v20.63l9.18-4.294c6.516 10.707 13.658 27.047 19.06 41.33a554.403 554.403 0 0 1 9.253 26.535l-37.493 37.69v2.43h23.942l28.55-28.7c9.27-.363 41.77-1.473 82.7-.75 46.744.825 102.612 4.3 139.05 13.667l5.08 15.784h19.632l-7.43-23.088c35.94-41.51 71.912-80.525 131.734-102.34l51.774 20.486v-20.097l-42.983-17.008c-6.374-39.21 12.755-76.665 30.62-116.68l12.363-2.585v-19.092l-6.323 1.323-5.45-2.803c-56.088-28.831-76.334-77.991-93.3-132.701l44.184-60.446h-23.15l-38.6 52.81c-58.273 1.254-112.475-2.463-154.446-37.79l-2.274-15.02h-18.9l2.838 18.75C170.96 66.224 140.532 85.188 93.512 80.59l-49.22-62.106H20.448zm199.917 41.004c40.608 26.304 88.498 30.894 136.754 30.63l-33.14 45.34c-36.588.396-69.856-3.034-95.845-24.638l-7.768-51.332zm-18.834.44 8.29 54.775c-17.815 18.616-37.294 30.18-67.995 26.854L108.752 99.82c38.593-.74 68.358-17.144 92.78-39.892zM374.857 97.52c15.536 46.967 37.05 92.69 84.55 122.722l-51.768 10.82-.816-.417c-37.27-19.145-50.445-51.64-61.935-88.83l-.716-2.315 30.683-41.98zm-280.74 13.918 34.393 43.398c-2.523 29.583-15.404 52.66-33.14 74.207L44.966 215.81c23.714-29.774 42.64-63.393 49.152-104.373zm137.848 24.69c23.936 13.694 51.05 17.4 78.404 17.948l-32.91 45.028c-15.058-6.364-26.137-17.753-38.57-30.325l-2.343-2.37-4.582-30.28zm-18.778.81 5.592 36.955c-11.176 7.5-24.436 12.15-39.046 15.492l-22.902-28.897c22.71-1.395 41.095-10.68 56.356-23.55zm117.38 21.173c9.746 29.155 23.146 58.017 50.58 78.49l-55.928 11.69c-12.997-11.182-19.977-24.734-27.156-39.89l-1.67-3.53 34.174-46.76zm-186.432 16.443 19.142 24.154-.078.71c-1.93 17.365-8.877 29.63-16.65 43.063l-31.536-8.28c13.212-17.356 23.94-36.828 29.12-59.647zm77.674 19.353 6.012 39.742a39.15 39.15 0 0 0-10.25 3.48l-25.177-31.767c10.19-2.75 20.13-6.345 29.414-11.454zm19.36 3.043c7.355 6.578 15.52 12.722 25.152 17.39l-15.834 21.662a38.87 38.87 0 0 0-3.607-1.318l-5.71-37.735zM178.419 217.814l24.91 31.43-4.08 7.07-33.914-8.902c4.955-8.757 9.83-18.253 13.084-29.598zm105.525 4.082c5.12 10.415 11.104 21.095 19.653 30.913l-31.143 6.508a39.466 39.466 0 0 0-6.937-12.21l18.427-25.212zM42.172 234.4l48.873 12.83c9.227 28.215 5.795 57.08 1.2 87.448L43.173 357.64c5.95-40.147 10.29-81.414-1-123.24zm416.142 5.162c-14.933 32.635-30.114 66.733-27.433 104.13l-43.74-17.307c-3.6-25.016 8.776-49.445 20.725-76.278l50.45-10.544zm-346.576 13.1 27.614 7.248.562 1.4c6.1 15.133 5.383 31.772 2.9 49.708l-30.318 14.185c3.214-23.512 4.976-47.812-.758-72.54zm273.295 2.217c-9.043 19.817-17.797 40.803-17.252 63.847l-36.587-14.477c-.004-13.148 1.395-22.84 9.12-33.92l4.98-7.144 39.74-8.307zm-224.36 10.628 35.237 9.252a39.32 39.32 0 0 0 2.078 10.44l-35.27 16.503c1.05-11.9.927-24.048-2.044-36.195zm159.16 3c-4.625 9.433-6.38 18.89-6.948 28.498l-39.278-15.54c.266-1.125.47-2.273.64-3.43l45.585-9.528zm-54.796 29.662 36.504 14.443c-8.91 4.58-17.316 10.536-24.677 16.16a262.776 262.776 0 0 0-9.886 7.942l-10.102-31.397c3.04-2 5.786-4.408 8.162-7.148zM206.917 301.653L169.26 339.51c-2.558-6.2-6.018-11.147-9.588-15.235L180.5 305.5zm17.73 8.672a39.484 39.484 0 0 0 14.609 1.255l10.473 32.54c-13.314-.16-37.613.076-61.693 3.01l36.61-36.804zm103.486 12.81 25.363 10.034c-29.4 14.92-50.376 35.896-69.252 57.2L273.2 356.05c3.554-3.174 8.73-7.63 15.01-12.427 11.42-8.727 26.208-17.7 35.685-19.627l4.238-.86zM141.635 332.2l1.517 1.525c5.848 5.875 9.973 10.303 11.223 20.75l-31.143 31.308c-.35-2.27-.738-4.63-1.2-7.142-2.01-10.95-4.448-22.942-9.325-32.904l28.928-13.535zm235.928 10.493 39.218 15.518c-49.423 22.5-82.915 56.684-113.45 91.47l-12.435-38.647c24.103-27.838 47.673-53.616 86.668-68.34zM95.577 353.75c3.002 6.837 6.222 18.17 8.076 28.266 1.582 8.61 2.5 16.08 2.98 20.45l-35.882 36.075a526.282 526.282 0 0 0-6.55-18.29c-5.374-14.216-11.993-30.012-19.61-42.64l50.986-23.86zm150.863 9.148c3.968-.006 6.814.03 9.35.065l10.396 32.3c-26.257-4.15-58.633-4.19-87.057-3.185-15.575.55-28.004 1.327-37.857 2.065l24.108-24.237.95-.23c23.746-5.79 59.86-6.746 80.11-6.778zm-42.192 47.39c24.924-.053 50.366 1.266 68.416 5.103l13.428 41.727c-38.708-8.23-88.984-10.977-132.086-11.738-27.222-.482-49.237-.188-63.87.173l30.8-30.963c7.765-.757 30.71-2.842 58.853-3.836 7.9-.28 16.15-.45 24.458-.467z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/spiked-tentacle.svg b/static/_icons/_ability/_creature/spiked-tentacle.svg
new file mode 100644
index 00000000..f59b1b87
--- /dev/null
+++ b/static/_icons/_ability/_creature/spiked-tentacle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M126.21 44.816c-28.57.028-62.253 6.175-101.43 19.473v206.177c34.753-70.097 94.796-95.33 118.277-33.147.682.01 1.364.025 2.04.055 3.224.144 6.385.534 9.47 1.213 12.338 2.715 23.426 11.78 27.183 25.8 1.956 7.3 1.593 14.67-1.373 20.794-2.966 6.124-8.112 10.54-13.865 13.576-4.176 2.204-8.76 3.83-13.647 5.02.002.47.014.92.014 1.394a85.044 85.044 0 0 0 3.57 24.435c1.256-.51 2.525-.98 3.81-1.386a37.095 37.095 0 0 1 11.122-1.732c8.973-.013 18.105 3.27 25.32 10.487 5.345 5.344 8.714 11.907 9.208 18.693.494 6.786-1.756 13.183-5.22 18.69-1.63 2.588-3.532 5.05-5.653 7.41 10.645 7.775 22.837 14.108 36.008 18.71 1-2.945 2.326-5.773 4.08-8.437 5.995-9.102 17.213-14.595 30.828-14.595 14.235 0 25.768 7.644 29.588 18.42 1.417 3.995 2.053 8.125 2.118 12.352 16.59-1.707 33.3-6.156 49.358-13.756.152-8.87 4.284-18.062 12.052-25.83 6.29-6.292 13.948-9.724 21.325-10.214a26.966 26.966 0 0 1 1.654-.06c3.846-.026 7.58.763 10.967 2.376.103.05.2.107.302.157.835-.87 1.665-1.75 2.49-2.644 39.125-42.52 48.15-142.046 1.018-199.545-45.518-55.526-192.24 13.158-82.676 100.54-41.65-77.294 28.077-75.698 46.442-43.89 20.212 35.01 23.473 84.05-28.07 113.808-40.74 23.524-86.61-26.748-79.102-97.476 11.57-109.013-25.18-186.965-127.21-186.866zm167.315 47.778c-3.595 12.322-5.927 36.444-1.285 50.838 7.242-4.467 20.556-9.718 28.203-12.64-4.625-12.596-17.803-27.15-26.918-38.198zm118.914 7.746c-12 4.557-32.654 17.232-41.344 29.61 7.927 3.09 20.143 10.55 27.084 14.892 7.264-11.282 10.935-30.57 14.26-44.502zm28.753 89.523c-3.682-.066-7.177.133-10.33.66 3.792 8.808 7.462 24.518 9.465 33.526 14.805-3.092 33.197-15.397 47.016-23.747-10.684-4.902-30.192-10.152-46.15-10.44zm-299.51 66.23c-6.372.107-13.992 1.302-22.08 3.464-16.965 4.533-35.67 12.95-51.343 20.99 16.297 4.056 37.71 7.523 56.422 7.418 14.068-.08 26.53-2.266 33.107-5.736 3.287-1.737 4.947-3.5 5.767-5.193.82-1.693 1.22-3.78.14-7.81-2.193-8.187-5.76-10.762-13.146-12.387-1.846-.406-3.933-.646-6.218-.725a50.45 50.45 0 0 0-2.65-.02zm299.23 37.33c1.846 9.19-5.056 29.82-10.126 37.53 15.95 5.515 40.613 4.254 58.625 4.166-9.14-13.307-30.785-34.768-48.498-41.698zm-268.393 51.34c-.543.006-1.097.046-1.666.116-1.518.185-3.144.586-4.946 1.157-7.208 2.286-16.415 8.81-25.443 17.826-12.424 12.408-24.413 29.05-33.967 43.85 16.142-4.636 36.42-12.343 52.57-21.79 12.144-7.102 21.843-15.225 25.803-21.52 1.98-3.146 2.536-5.502 2.4-7.378-.137-1.876-.83-3.885-3.782-6.836-3.932-3.933-7.17-5.478-10.968-5.428zm208.722 31.633c-2.278-.144-4.678 1.167-8.96 5.448-6.627 6.628-7.317 10.62-6.387 15.136.93 4.517 4.95 10.543 11.79 16.743 9.61 8.715 23.68 17.07 37.524 24.96-3.23-14.377-8.502-31.08-15.27-43.492-5.04-9.243-10.957-15.676-14.965-17.586-1.002-.478-1.89-.86-2.758-1.06a5.881 5.881 0 0 0-.975-.148zm-115.29 19.74c-9.372 0-12.683 2.334-15.22 6.184-2.536 3.85-3.952 10.955-3.502 20.174.634 12.96 4.674 28.816 8.883 44.184 7.885-12.45 15.968-27.99 19.96-41.55 2.972-10.1 3.336-18.834 1.853-23.02-1.484-4.184-2.748-5.973-11.973-5.973z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/suckered-tentacle.svg b/static/_icons/_ability/_creature/suckered-tentacle.svg
new file mode 100644
index 00000000..e2a0e620
--- /dev/null
+++ b/static/_icons/_ability/_creature/suckered-tentacle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M292.97 13.594c-2.632.016-5.295.076-8 .187-5.774.24-12.015 1.07-18.126 1.75-169.278 18.935-231.652 152.474-88.75 258.72 87.533 65.08 84.216 129.8-87.594 210.25h125.563c27.99-26.536 97.72-16.83 117.968-1.75 82.612-58.804 67.125-198.108-39.124-245.28-134.93-59.91-118.62-158.366-23.97-176.376 53.675-10.214 97.9 17.11 106.314 50.812 12.404 49.682-36.528 108.388-114.47 38.53 75.468 131.223 168.275 38.942 161.19-44.374-4.14-48.648-49.446-92.985-131-92.468zM218 201.624c3.67.1 6.518 1.456 7.125 3.72.882 3.293-3.288 7.292-9.313 8.906-6.024 1.614-11.648.23-12.53-3.063-.883-3.293 3.287-7.26 9.312-8.875 1.882-.504 3.737-.732 5.406-.687zm23.344 21.47c6.026-.21 10.822 1.795 11.78 5.375 1.28 4.772-4.767 10.534-13.5 12.874-8.73 2.34-16.845.367-18.124-4.406-1.28-4.774 4.768-10.536 13.5-12.875 2.183-.585 4.335-.9 6.344-.97zm40.5 23c8.61.098 15.31 3.21 16.72 8.47 2.002 7.476-7.448 16.49-21.127 20.155-13.678 3.664-26.402.57-28.406-6.908-2.002-7.477 7.48-16.49 21.157-20.156 3.42-.916 6.76-1.422 9.907-1.53.59-.02 1.176-.04 1.75-.032zm41.22 35.875c11.767.13 20.948 4.345 22.873 11.53 2.74 10.22-10.21 22.584-28.906 27.594-18.693 5.01-36.073.78-38.81-9.438-2.74-10.22 10.21-22.584 28.905-27.594 4.674-1.252 9.262-1.913 13.563-2.062.806-.028 1.59-.04 2.375-.03zm13.998 51.092c19.08.054 34.165 7.447 35.688 18.5 1.806 13.1-16.16 26.385-40.125 29.688-23.966 3.303-44.85-4.65-46.656-17.75-1.807-13.1 16.158-26.385 40.124-29.688a79.015 79.015 0 0 1 10.97-.75zm-15.937 64.313c23.456-.2 42.226 8.895 43.844 22.313 1.847 15.333-19.42 30.493-47.47 33.875-28.05 3.38-52.277-6.292-54.125-21.625-1.848-15.334 19.386-30.525 47.438-33.907a93.6 93.6 0 0 1 10.312-.655z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_creature/triple-claws.svg b/static/_icons/_ability/_creature/triple-claws.svg
new file mode 100644
index 00000000..5952573d
--- /dev/null
+++ b/static/_icons/_ability/_creature/triple-claws.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M280.762 21.63c-15.912-.117-32 1.523-47.983 5.08-42.948 9.563-58.997 38.668-57.135 66.495 9.325.534 19.01 1.876 28.914 3.988 28.983 6.18 59.948 19.074 89.05 38.418 100.28-25.29 162.228 51.005 184.7 152.18 49.7-147.744-67.984-265.215-197.548-266.16zm-112.535 90.128c-16.8-.114-31.245 2.938-41.717 8.74l-.04-.074c-14.14 7.645-23.816 19.428-29.15 32.687 14.63 4.844 28.782 13.83 41.955 25.466 17.72 15.652 33.85 36.317 47.06 59.662 116.927 2.378 161.504 103.39 150.673 215.26 79.5-106.87 42.174-229.74-43.856-295.404-29.984-21.936-62.82-36.296-92.492-42.623-11.425-2.436-22.354-3.644-32.433-3.712zM75.29 167.963c-54.213-1.358-85.38 80.807-27.324 108.247 104.435 49.363 94.912 140.96 34.844 222.71 115.134-47.87 134.337-172.24 81.997-260.066l.152-.01c-11.28-18.202-24.378-34.178-38.056-46.26-14.62-12.914-29.74-21.183-43.76-23.836a55.084 55.084 0 0 0-7.855-.785z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/burning-blobs.svg b/static/_icons/_ability/_fire/burning-blobs.svg
new file mode 100644
index 00000000..4a088b4e
--- /dev/null
+++ b/static/_icons/_ability/_fire/burning-blobs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M30.936 23.332c-.97 100.412 10.37 192.13 100.757 231.064 109.81 47.303 46.883 118.85-58.246 83.002 76.11 65.222 145.665 141.652 200.928 159.985a54.608 54.608 0 0 0 22.12 4.674c11.404 0 22.023-3.508 30.835-9.495 31.55 8.544 59.065 11.345 82.4 9.23 19.94-.195 38.412-6.676 53.524-17.556 49.986-33.49 55.46-109.83 11.715-201.34 1.573-8.565 1.077-16.997-1.154-25.322-1.973-9.506-6.227-18.195-12.152-25.476-28.97-42.765-97.358-83.18-159.58-124.506 77.79 99.205 67.214 143.1 10.635 94.234 1.09-7.624-1.225-15.174-6.103-23.178-1.8-3.4-4.032-6.54-6.625-9.343-17.988-22.57-52.22-49.85-87.02-92.078 38.056 186.15-97.83 83.32-182.036-53.895zM267.79 173.836c14.032 0 25.208 11.176 25.208 25.21 0 14.032-11.175 25.208-25.21 25.208-14.032 0-25.208-11.176-25.208-25.21 0-14.032 11.175-25.208 25.21-25.208zm147.575 54.834a40.864 40.864 0 0 1 41.004 41.004 40.864 40.864 0 0 1-41.005 41.004 41.204 41.204 0 0 1-14.582-2.65c-.746-19.392-10.64-36.512-25.476-47.16a40.84 40.84 0 0 1 40.058-32.198zm-75.45 39.473a42.1 42.1 0 0 1 42.24 42.242c0 23.44-18.8 42.242-42.24 42.242s-42.243-18.802-42.243-42.242a42.1 42.1 0 0 1 42.242-42.242zm68.886 65.464c41.396 0 74.755 33.36 74.755 74.754 0 41.397-33.357 74.755-74.754 74.755-23.397 0-44.22-10.662-57.91-27.404.458-2.85.704-5.772.704-8.75 0-15.814-6.752-30.113-17.506-40.183.268-12.963 3.804-25.092 9.828-35.61 23.163-1.518 42.872-16.092 51.803-36.403a75.516 75.516 0 0 1 13.08-1.157zm-145.53 10.59c12.626 0 22.662 10.038 22.662 22.664 0 12.628-10.035 22.663-22.662 22.663-12.627 0-22.663-10.035-22.663-22.662 0-12.625 10.035-22.663 22.663-22.663zm33.226 66.35a36.275 36.275 0 0 1 36.414 36.414 36.272 36.272 0 0 1-36.414 36.413c-20.22 0-36.412-16.192-36.412-36.412s16.19-36.413 36.412-36.413z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/burning-embers.svg b/static/_icons/_ability/_fire/burning-embers.svg
new file mode 100644
index 00000000..9742fba0
--- /dev/null
+++ b/static/_icons/_ability/_fire/burning-embers.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M239.344 24.063c-9.56 0-17.313 7.754-17.313 17.312 0 9.558 7.755 17.313 17.314 17.313 9.558 0 17.28-7.755 17.28-17.313 0-9.56-7.722-17.313-17.28-17.313zM39.594 35.75c-10.393 0-18.813 8.42-18.813 18.813 0 10.39 8.42 18.812 18.814 18.812 10.393 0 18.812-8.42 18.812-18.813 0-10.392-8.42-18.812-18.812-18.812zM188.47 51.156c-14.34 0-25.97 11.6-25.97 25.938 0 14.336 11.63 25.97 25.97 25.97 14.337 0 25.968-11.634 25.968-25.97 0-14.338-11.63-25.938-25.97-25.938zm116.25 2.563c26.45 67.124-59.23 117.28-57 35.218-40.215 36.923-12.817 84.228 4.78 121.874 13.34 28.545 12.342 53.843-10.125 63.47-16.035 6.87-33.87-11.593-39.625-30.532-1.254-4.128-1.663-9.237-1.47-15.375 9.652-.805 17.22-8.892 17.22-18.75 0-10.393-8.42-18.813-18.813-18.813-10.392 0-18.812 8.42-18.812 18.813 0 7.014 3.84 13.14 9.53 16.375-18.82 20.668-37.66 10.494-25.186-51.78-59.608 67.83-38.06 198.86 45.03 238.874-12.994-25.466-20.146-57.053-14.25-84 36.35 78.815 121.1 1.41 126.03-69.094 13.49 44.606 11.636 109.75-10.78 156.47 90.405-35.317 110.666-171.47 63-239.47-5.868 82.112-70.492 50.032-44.03-58.406 6.495-26.622-12.05-57.205-25.5-64.875zM54.5 90.78c-9.56 0-17.313 7.756-17.313 17.314 0 9.557 7.754 17.312 17.313 17.312 9.56 0 17.313-7.755 17.313-17.312 0-9.56-7.754-17.313-17.313-17.313zm66.625 5.157c-11.525 0-20.844 9.352-20.844 20.876 0 2.88.57 5.628 1.626 8.124-11.332 2.75-19.75 12.98-19.75 25.157 0 14.284 11.59 25.875 25.875 25.875 14.287 0 25.876-11.592 25.876-25.876a25.785 25.785 0 0 0-4.28-14.25c7.284-3.256 12.374-10.537 12.374-19.03 0-11.526-9.35-20.876-20.875-20.876zm258.28 22.376c-9.557 0-17.28 7.754-17.28 17.312 0 9.558 7.723 17.313 17.28 17.313 9.56 0 17.314-7.755 17.314-17.313 0-9.56-7.755-17.313-17.314-17.313zM99.814 196.5c-9.56 0-17.313 7.755-17.313 17.313 0 9.557 7.754 17.312 17.313 17.312 9.558 0 17.312-7.755 17.312-17.313S109.37 196.5 99.812 196.5zm1.406 168c-50.154 13.628-82.564 33.797-82.564 56.188 0 41.017 106.546 74.375 237.72 74.375 131.172 0 237.687-33.358 237.687-74.375 0-22.31-32.125-42.562-81.97-56.188 17.232 8.88 27.5 19.243 27.5 30.438 0 32.13-82.28 58.562-183.218 58.562-100.937 0-182.688-26.435-182.688-58.563 0-11.254 10.125-21.528 27.532-30.437z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/burning-eye.svg b/static/_icons/_ability/_fire/burning-eye.svg
new file mode 100644
index 00000000..41dfc76a
--- /dev/null
+++ b/static/_icons/_ability/_fire/burning-eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M235.094 17.844C60.934 66.176 249.458 163.35 184.72 198.22c-32.796 17.66-86.03 15.048-64.657-73.876-106.688 86.723-75.665 284.316 48.093 349.5-27.153-25.674-44.125-62.01-44.125-102.25 0-77.624 63.128-140.75 140.75-140.75 77.625 0 140.75 63.128 140.75 140.75 0 37.55-14.77 71.708-38.81 96.97 150.706-76.96 122.903-288.475 22.5-342.533 23.96 56.174 11.553 99.36-18.22 123.44C385.64 57.762 174.494 135.013 235.094 17.843zM264.78 249.53c-67.523 0-122.06 54.54-122.06 122.064s54.54 122.062 122.06 122.062c67.523 0 122.064-54.538 122.064-122.062 0-67.522-54.54-122.063-122.063-122.063zm0 53.782c46.983 0 85.283 38.3 85.283 85.282s-38.3 85.25-85.282 85.25c-46.98 0-85.25-38.268-85.25-85.25s38.27-85.28 85.25-85.28zm0 18.688c-36.88 0-66.56 29.712-66.56 66.594 0 36.88 29.68 66.562 66.56 66.562 36.882 0 66.595-29.68 66.595-66.562 0-36.88-29.712-66.594-66.594-66.594zm0 18.656c26.45 0 47.876 21.457 47.876 47.906 0 26.45-21.426 47.875-47.875 47.875-26.447 0-47.905-21.425-47.905-47.875 0-8.41 2.19-16.315 6-23.187 1.84 12.334 12.466 21.813 25.313 21.813 14.14 0 25.593-11.486 25.593-25.625 0-8.62-4.25-16.236-10.78-20.875.59-.022 1.185-.032 1.78-.032z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/burning-meteor.svg b/static/_icons/_ability/_fire/burning-meteor.svg
new file mode 100644
index 00000000..5c7ff5e8
--- /dev/null
+++ b/static/_icons/_ability/_fire/burning-meteor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M107.5 18c40.728 58.21-63.708 25.914-88.03 2.47 1.058 40.082 100.03 99.633 147.374 72.124C195.904 75.71 136.984 22.936 107.5 18zm97.75 57.28.875 1.47c120.364 99-4.023 175.247-64.97 48.78 15.823 82.506-78.425 44.2-89.655-30.655C-13.17 230.463 172.715 231.293 178.438 324c3.23 52.3-77.82 19.908-113.875-48.844C308.49 797.09 814.024 262.64 205.25 75.28zm134.97 136.376c44.577 0 85.52 18.708 109.56 52.5 43.656 75.614-63.777 27.4-70.717-8.844-21.45 58.675 101.883 114.72 16 170.375 25.962-34.188 2.345-113.552-87.875-109.125 116.512 72.473 42.326 206.9-19.688 93.157 1.306 35.083 11.99 54.83 27.156 64.436-60.89-11.955-107.03-65.528-107.03-129.906 0-39.06 16.94-74.22 43.874-98.5 1.674 61.897 83.61 37.656 115.97 62.344-11.544-60.34-56.022-59.933-82.72-84.28 16.883-7.803 35.67-12.158 55.47-12.158zM234.72 309a44.022 44.022 0 0 0-4.064.25c26.032 6.737 74.684 83.827 33.875 61.75 3.41 14.6 43.038 41.75 57.5 21.156 18.816-26.79-44.374-83.634-87.31-83.156z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/caldera.svg b/static/_icons/_ability/_fire/caldera.svg
new file mode 100644
index 00000000..551a01c0
--- /dev/null
+++ b/static/_icons/_ability/_fire/caldera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m322.906 60.906-7.72 1.47-63.592 12.093-3.22.624-2.124 2.47c-7.074 8.218-17.59 13.896-28.97 14.655-11.38.758-23.822-3.012-36.093-15.19l-5.718-5.655-6.47 4.78-55.5 41.407-2.53 1.876-.876 3C98.38 162.385 64.634 244.3 17.97 312.688v32.03C73.347 271.667 112.546 178.6 127.03 130.75l47.032-35.03c14.115 11.464 29.877 16.128 44.47 15.155 15.478-1.033 29.394-8.116 39.5-18.594l52.937-10.093 11.374 30.032 1.812 4.78 5 1.03c25.286 5.29 57.767 17.538 83.47 41.564 7.697 82.853 28.944 142.817 80.624 194.28v-27.312c-39.61-45.515-55.92-97.534-62.438-172.375l-.28-3.437-2.5-2.438c-27.842-27.25-62.216-40.858-89.97-47.343l-12.375-32.72-2.78-7.344zm-59.562 70.156c-38.16 0-72.7 6.43-96.844 16.282-12.072 4.926-21.48 10.752-27.438 16.5-3.952 3.813-6.323 7.357-7.468 10.75-.042.123-.087.252-.125.375-12.766 37.944-29.76 75.897-49.126 113.843 24.3-23.393 44.42-49.902 56.75-77.813l-13.656 59.375-44.626 122-1.718 4.688 2.937 4.03 26.126 36.063-25.25 57.813h20.406l24.094-55.25 2.156-4.908-3.125-4.312-26.374-36.375 7.687-20.97 70.72-156.905c22.04 7.065 50.196 11.578 80.905 11.938l9.03 114.75 28.564 125.968-5.126-131.687 14.72-73.876 26.498 37.812-1.03-80.437c10.397-2.448 19.878-5.417 28.124-8.782 5.128-2.093 9.762-4.352 13.875-6.688 7.416 37.274 29.225 72.748 60.064 108.25-17.907-42.653-36.687-88.07-38.656-130.063a15.51 15.51 0 0 0 .468-3.78c0-4.904-2.323-10.065-8.28-15.813-5.96-5.748-15.398-11.574-27.47-16.5-24.143-9.853-58.652-16.28-96.812-16.28z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/celebration-fire.svg b/static/_icons/_ability/_fire/celebration-fire.svg
new file mode 100644
index 00000000..d2dc9d6f
--- /dev/null
+++ b/static/_icons/_ability/_fire/celebration-fire.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M290.72 13.396c-79.94 38.87 9.013 152.854-74.402 191.567 21.946-43.348 30.93-118.453-39.69-169.342v.003c57.41 92.152-39.578 101.073 10.68 235.037.884 2.098 1.724 4.216 2.467 6.383-.86-2.16-1.682-4.286-2.468-6.383-17.056-40.42-58.356-69.442-47.875-146.558-92.397 139.136 61.726 179.234 39.968 296.226-20.22-52.322-96.068-38.077-65.88-94.582-81.617 64.483 68 99.77-25.282 168.19h349.006c-44.892-35.722-38.733-108.488-9.29-92.71-14.63-42.75-54.515-10.383-56.477 22.604-15.55-101.866 86.23-108.78 74.388-226.197-19.395 67.794-73.366 65.522-92.71 55.322 68.964-32.598 91.818-125.04 17.15-161.248 23.033 28.635 15.785 123.762-33.243 84.998-18.193-14.385-70.182-60.235-46.34-163.31zm-165.656 4.778c-6.35.16-12.967 2.232-19.62 6.578 38.005 7.337 57.7 61.682 52.892 122.08 34.38-59.225 5.54-129.638-33.272-128.658zm218.29 44.633c8.507 47.444-17.105 75.028-38.82 30.52 22.306 83.01 95.766 93.25 38.82-30.52zm103.84 93.88c35.616 36.454 25.294 104.74-14.133 160.057 81.137-36.52 81.26-153.81 14.133-160.057zm-379.22 78.917c19.553 54.61-90.043 56.077 5.62 157.767-38.953-68.595 67.41-69.424-5.62-157.766z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-dash.svg b/static/_icons/_ability/_fire/fire-dash.svg
new file mode 100644
index 00000000..b6d12ff7
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-dash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M273.857 21.904c-24.193.012-51.198 5.552-81.1 17.467 143.7 12.608 150.35 129.263 84.032 132.814-85.27 4.565-53.232-57.217-133.34-103.03C200.445 201.48 94.44 190.33 21.054 59.23c12.805 85.755 24.28 116.942 78.26 153.596C261.996 323.294 94.618 347.8 36.82 245.53c14.568 93.454 68.364 132.803 131.707 139.93-42.753 24.49-99.452 32.49-143.01 25.556 51.025 42.317 131.606 40.94 193.515 8.576-37.137 36.123-97.446 70.644-116.803 74.728H276.36C517 405.563 530.305 232.45 454.827 124.492c-2.433 26.21-10.08 49.507-25.545 70.23-18.48-102.394-69.02-172.86-155.426-172.818zm2.82 184.666 141.384 52.155c.286-3.207.86-6.495 1.747-9.807 5.62-20.973 21.605-34.913 35.705-31.135 14.1 3.778 20.973 23.842 15.353 44.815-5.62 20.974-21.603 34.914-35.703 31.136a18.054 18.054 0 0 1-2.113-.72l-60.58 49.394 70.637 19.584-140.023 84.71 65.848-68.866-31.32-7.006-150.335 122.58 158.06-196.89-137.39-41.137 137.006 5.654-68.275-54.467z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-gem.svg b/static/_icons/_ability/_fire/fire-gem.svg
new file mode 100644
index 00000000..f1ace105
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-gem.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M201.2 32 215 87h82l13.8-55H201.2zm-17 5.84L73.24 121.1l53.36 13.3 71.1-42.69-13.5-53.87zm143.6 0-13.5 53.87 71.1 42.69 53.4-13.3-111-83.26zM210.4 105 137 149.1v213.8l73.4 44.1h91.2l73.4-44.1V149.1L301.6 105h-91.2zM64 137.2v237.6l55-13.8V151l-55-13.8zm384 0L393 151v210l55 13.8V137.2zm-192.1 2.4c-14.6 14.6-21.8 29.1-7.3 50.9 20.2 30.3 95 51.9 94.7 116.5 0 43.6-36.5 65.4-87.4 65.4-50.9 0-87.3-36.4-87.3-72.7 0-14.5 7.3-29.2 29.1-43.7-14.6 36.4 0 58.2 21.9 58.2 21.7 0 36.3-21.8 36.3-36.4 0-36.3-43.6-43.6-43.6-87.3 0-23.3 14.5-43.6 43.6-50.9zm-129.3 238-53.36 13.3 110.96 83.3 13.5-53.9-71.1-42.7zm258.8 0-71.1 42.7 13.5 53.9 111-83.3-53.4-13.3zM215 425l-13.8 55h109.6L297 425h-82z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-ray.svg b/static/_icons/_ability/_fire/fire-ray.svg
new file mode 100644
index 00000000..24b88261
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-ray.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M12.195 20.94v39.128c76.452 73.026 151.387 152.574 187.47 215.5 12.6 21.978 38.114 72.972 49.056 118.557-31.424-3.388-64.762-14.633-96.36-33.873 11.605 19.025 25.57 37.838 42.632 54.898 83.895 83.897 200.548 103.142 260.473 43.217 59.927-59.927 40.678-176.574-43.22-260.47-17.062-17.063-35.872-31.028-54.895-42.633 21.316 35.01 33.27 71.947 35.04 106.29-47.3-13.436-103.76-38.565-127.316-51.976C201.59 173.434 121.32 98.073 47.818 20.938H12.195zM374.89 285.866c47.63 0 86.557 36.296 90.727 82.817-12.225-22.7-36.207-38.133-63.797-38.133-39.995 0-72.42 32.423-72.42 72.42 0 5.462.61 10.78 1.758 15.897 2.835-21.18 21.098-37.674 43.018-37.674 23.866 0 43.414 19.55 43.414 43.414 0 23.866-19.548 43.413-43.414 43.413-1.59 0-3.157-.093-4.703-.262.114.057.225.12.34.176-48.052-2.623-86.028-42.24-86.028-90.96 0-50.428 40.677-91.107 91.104-91.107z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-ring.svg b/static/_icons/_ability/_fire/fire-ring.svg
new file mode 100644
index 00000000..eb3cc57e
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-ring.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M312.344 16.813c5.096 53.015-76.687 71.94 3.812 131-21.002-67.855 39.96-80.94-3.812-131zm-173.47 43.124c2.864 58.907-7.995 100.984-34.093 136.97l-.5.28c1.42-28.968-14.337-52.78-32.093-75.906 2.882 39.21-3.964 78.4-20.156 117.564-20.79 23.86-32.718 51.704-32.718 81.437 0 88.458 105.59 160.158 235.875 160.158s235.907-71.7 235.907-160.157c0-10.08-1.377-19.935-4-29.5-6.37-30.335-7.76-49.572-.313-59.155 12.078-15.54 11.654-39.39-2.405-62.406-7.558 48.062-39.085 30.124-63.063-53.72-27.96 94.983-72.27-4.392-58.406-53.156-26.26 21.598-29.623 69.962-28.22 107.125a317.016 317.016 0 0 0-17.436-3.75c-44.64-15.223-78.633-56.624-62.375-86.814-22.038 10.264-24.77 32.17-16.375 57.22 19.214 57.337-56.703-10.13-53.72-56.064l-17.093 72.688c-.154-34.474-5.844-73.924-28.812-92.813zM255.19 197c109.056 0 197.468 60.017 197.468 134.063 0 22.193-7.938 43.127-22 61.562-15.436 6.877-24-22.344-25.53-41.47-16.12 20.592-.576 58.922-17.407 75.064-2.128-10.244-11.962-22.962-25.345-30.75 2.11 22.203-4.025 43.33-29.72 58.936-31.15 5.69-44.428-28.71-49.56-54.22-4.033 33.512-16.028 58.988-49.97 64.095a284.816 284.816 0 0 1-12.094-1.155c-30.51-18.392-20.632-49.433-24.25-78.594-2.93 29.505-24.438 65.4-39 56.158-25.677-16.295 10.893-33.548-9.53-63.657-2.415 30.193-21.75 31.483-42.03 29.876.94-14.196 1.723-28.353-2.75-41.25-9.138 7.68-18.04 15.838-34.564 9.938-7.223-13.934-11.156-28.92-11.156-44.53C57.75 257.017 146.13 197 255.188 197z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-shield.svg b/static/_icons/_ability/_fire/fire-shield.svg
new file mode 100644
index 00000000..323b3146
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M51.063 24.28v11.282c0 100.82 9.297 189.164 39.28 264.563 29.985 75.4 80.96 137.547 162.5 184.625l4.688 2.72 4.69-2.72C341.9 438.745 392.977 376.788 423.56 301.22c30.585-75.57 40.97-164.495 40.97-265.658V24.407l-11 1.97c-127.69 22.82-256.29 25.504-391.407 0L51.062 24.28zm394.625 22.25c-.756 95.204-11.306 178.18-39.438 247.69-28.608 70.684-75.067 127.792-148.72 171.56-75.508-44.82-121.81-102.07-149.842-172.56-27.53-69.23-37.117-151.615-37.813-246.5 129.47 23.027 253.39 20.565 375.813-.19zM287.563 95.126c-89.104 26.58-40.383 91.028-63.063 125.438-23.757 36.044-72.72 29.163-56.656-64.5-70.924 81.05-2.55 220.42 54.844 256.53-16.13-14.81-26.75-40.03-26.75-68.656 0-8.276.91-16.274 2.562-23.812 7.277 19.842 24.264 33.78 44.063 33.78 26.426 0 47.843-24.79 47.843-55.374 0-10.14-2.356-19.636-6.47-27.81 19.228 13.78 32.345 41.39 32.345 73.217 0 24.946-8.07 47.3-20.81 62.438C347.752 374.36 394.957 294.442 348 199.28c-20.957 107.846-108.105-45.925-60.438-104.155z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-tail.svg b/static/_icons/_ability/_fire/fire-tail.svg
new file mode 100644
index 00000000..59f77a95
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-tail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M158.256 36.47c2.22 49.155 45.426 31.47 81.68 62.66-30.405-53.095-58.346-36.28-81.68-62.66zm152.37 22.743c-13.924 49.15 27.75 38.738 54.208 100.21 4.956-65.19-34.792-64.58-54.21-100.21zm-160.038 34.39c-12.396.072-25.558 1.038-39.578 2.918 44.21 11.542 58.108 22.066 85.29 42.896C134.302 128.24 82.323 123.44 7.85 179.13c100.65-23.06 168.2-8.253 227.08 22.58-12.79 1.896-24.61 14.406-30.127 22.946 38.377 2.05 77.634 23.985 110.93 64.72-12.35-7.992-42.33-3.547-56.196 6.128 37.242 9.056 75.687 49.523 90.388 81.35 7.484 16.204 17.74 31.434 29.85 43.304.29.29.586.568.88.852.617.59 1.236 1.178 1.862 1.752.333.304.67.604 1.005.902 18.724 16.745 41.42 25.36 65.057 17.654 50.29-16.395 54.6-72.206 48.867-113.69-8.09-58.54-29.06-92.95-43.65-119.01 2.673 27.62-6.556 45.437-20.847 56.835-1.056-43.277-11.183-61.67-43.662-96.086.833 20.694-2.812 29.525-17.337 40.526-1.172-43.655-51.075-89.232-110.564-112.553v.002c19.306 21.608 32.916 42.774 36.967 69.78-36.27-48.287-80.83-73.92-147.77-73.52zm258.844 12.206c-28.72 35.415 15.06 53.01 23.328 99.5 9.73-57.558-21.908-65.23-23.328-99.5zm-341.036 1.477c-20.846-.04-35.705 8.377-56.01 1.582 25.778 40.33 56.76 4.1 102.47 12.737-19.29-11.226-33.952-14.295-46.46-14.32zm60.727 80.856c-21.19.374-42.96 8.55-60.262 32.492 40.094-19.363 84.84 36.146 117.017-18.182-14.96-7.26-35.565-14.685-56.754-14.31zm76.467 55.242c-9.53-.13-18.925 2.26-28.596 6.635 41.05 3.358 27.72 37.944 79.283 17.513-18.547-16.713-34.805-23.93-50.687-24.148zm-23.85 40.195c26.456 60.895 74.973 30.56 118.375 76.615-45.78-76.544-85.973-47.214-118.375-76.615zm246.822.22c6.257 1.843 12.41 4.995 18.25 9.374 13.202 9.9 24.376 26.025 29.713 45.91 5.337 19.884 3.734 39.42-2.74 54.582-6.474 15.16-17.43 25.74-31.437 29.486-14.007 3.747-28.804.054-42.008-9.847-13.204-9.9-24.378-26.024-29.715-45.91-2.57-9.574-3.517-19.065-3.1-28.03 18.53 19.584 41.6 28.266 57.48 19.73 19.717-10.604 21.098-43.87 3.558-75.296z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-wave.svg b/static/_icons/_ability/_fire/fire-wave.svg
new file mode 100644
index 00000000..9a396fdc
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-wave.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M328.5 30.156c-99.58-.03-191.647 52.414-271.156 151.438 9.912-28.743 47.544-88.772 70.28-108.094-41.265 15.076-87.27 63.656-106.5 114.5v61.53c18.558-26.168 38.798-47.69 65.25-71.78-26.49 44.543-52.15 119.388-65.25 176.688v141.937h26.72c19.804-93.475 48.162-162.69 100.406-233-19.15 60.202-24.366 124.175-20.906 195.188 9.994-45.116 32.146-93.158 73.094-142.657-18.344 65.052-21.955 124.932-4.813 180.47h57.188c-2.562-32.025 1.113-56.394 14.062-80.938-.532 13.048.643 26.58 3.875 40.875 5.996-34.556 17.585-64.022 37.5-93.657-7.526 40.626-5.283 84.21 10.375 133.72h88.688c-5.158-31.55-2.596-66.12 8.218-107 1.704 39.91 11.515 75.754 32.47 107h51.563v-86.438c-7.074 13.913-10.72 29.376-12.97 44.968-7.695-43.873-9.963-84.805-7-122.062-23.246 21.267-34.008 65.82-35.624 120.312-20.16-86.008-18.087-166.31 12.28-239.437-70.757 23.94-117.454 140.15-126.75 257.53-12.338-113.425 14.68-207.775 68.344-279.156-35.215 9.957-67.622 43.803-94.625 89.375 21.048-68.622 56.62-123.21 101.624-164.72-113.59-3.315-207.167 93.895-261.063 216.094 17.013-71.856 50.828-131.208 96.376-178.125-83.605 13.105-129.81 80.075-168.28 191.874C106.93 174.272 207.072 79.45 377.968 34.406c-16.676-2.84-33.175-4.245-49.47-4.25zM190.125 108c-30.494 21.716-78.727 81.786-113.313 141.875C95 180.18 131.58 121.033 190.125 108zm264.594 64.5c-21.134.42-43.392 17.915-54.94 52.97 29.15-23.528 58.873-32.432 91.064-32.845-9.516-13.632-22.58-20.395-36.125-20.125zm-162.095 40.406C250.05 291.598 224.94 381.348 211.97 478.78c-19.036-107.454 13.613-221.943 80.655-265.874z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fire-zone.svg b/static/_icons/_ability/_fire/fire-zone.svg
new file mode 100644
index 00000000..6b6e5b1f
--- /dev/null
+++ b/static/_icons/_ability/_fire/fire-zone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M310.764 27.086c35.65 52.304 28.718 138.494 1.23 202.857.814-37.525-4.488-79.686-18.12-124.634 9.56 106.27-74.502 226.382-113.556 176.323-18.965-24.314-25.796-96.042 7.48-148.52-20.36 12.828-36.114 34.506-46.052 60.358C89.2 293.815 127.04 411.82 248.318 411.82c154.426 0 249.604-250.51 62.446-384.732zM225.67 132.773c-11.55 1.477-24.57 13.962-33.502 34.973-14.002 32.94-13.464 74.536.64 92.914 10.576 13.785 25.695 10.895 38.678-5.465l.004-.004c4.328-5.45 8.49-12.35 11.99-20.588.11-.262.002-.618.112-.88-10.898 12.023-23.323 14.096-32.006 2.782-12.374-16.126-12.36-52.928-.074-81.832 4.055-9.54 8.972-16.68 14.158-21.9zm141.492 80.635c-11.895 181.347-175.84 187.74-203.445 106.76h.002c51.202 34.305 111.037 8.255 128.913-60.43l6.043 51.364c31.064-29.207 49.024-50.36 68.486-97.694zM99.722 363.936C49.57 377.563 17.175 397.75 17.175 420.14c0 41.018 106.522 74.352 237.695 74.352 131.172 0 237.696-33.334 237.696-74.35 0-22.312-32.12-42.58-81.964-56.206 17.23 8.88 27.517 19.25 27.517 30.445 0 32.13-82.312 58.546-183.25 58.546-100.936 0-182.66-26.418-182.66-58.545 0-11.253 10.11-21.536 27.517-30.444h-.004z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fireball.svg b/static/_icons/_ability/_fire/fireball.svg
new file mode 100644
index 00000000..308fc8ff
--- /dev/null
+++ b/static/_icons/_ability/_fire/fireball.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M108.28 18.78c-1.2 6.05 1.1 13.32 9.095 19.876 15.883 13.01 36.716-3.12 27.875-19.875h-36.97zm174.564 0c13.572 15.575 25.36 48.026 21.687 77.22-3.915 31.118-22.083 59.048-73.624 67.094v.094a37.068 37.068 0 0 0-5.812 1.343c4.17.89 8.657 2.86 13.344 6.22 24.482 17.577 3.918 55.804-26.125 36.47-8.196-5.266-12.213-12.31-13.032-19.19-4.615 11.776-2.376 25.68 12.47 37.126 42.122 32.48 76.872-19.863 48.844-50.437 35.076-12.994 54.042-38.53 60.594-65.97 17.85 2.145 40.616 8.678 58.156 22.22 19.867 15.337 34.025 38.73 29.844 79.25l-.032.405v.406c-.43 27.1 3.257 52.267 13.906 77.314-.175-.088-.355-.164-.53-.25 10.834 28.695-4.215 77.915-32.094 76.375a47.369 47.369 0 0 1-4.625-.47c10.87-3.895 19.736-14.11 20.187-31.47.57-21.935-30.486-31.816-48.688-21.28 1.853-10.077 5.738-19.852 11.125-27.53a60.126 60.126 0 0 0 6.188-7.095c.204.627.43 1.27.72 1.906 9.98 22.058 34.89 7.416 25.186-11.405-4.35-8.457-11.074-10.648-16.686-9.03 3.504-11.767 3.415-24.225.406-35.72-3.952-15.098-13.013-28.82-26.625-37.03-7.976-4.812-17.48-7.51-27.844-7.44a61.5 61.5 0 0 0-2.092.064c-5.57.233-11.385 1.277-17.313 3.186-5.246.927-10.17 3.588-14.03 8.438-23.005 28.896 14.76 74.018 41.967 39.687 8.61-10.862 8.926-21.705 4.813-30.374a35.115 35.115 0 0 1 4.844 2.438c8.787 5.3 15.35 14.822 18.217 25.78 2.87 10.96 1.946 23.044-3.312 33.126-4.384 8.406-11.626 15.654-23.28 20.28-1.272.41-2.53.853-3.783 1.314 18.878 44.79-9.97 58.624-46.03 37.156-6.794 10.808-11.198 22.857-13.25 35.47 9.883-4.887 23.666-6.502 41.687-2.595 28.884 6.263 33.747 41 18.75 61.906.643-2.984 1.033-6.202 1.124-9.686.48-18.44-18.605-29.432-37-29.156-17.28.258-33.966 10.457-33.28 33.75.14 4.844 1.124 9.19 2.748 13.03-4.827-1.217-9.4-2.263-13.593-3.312-20.567-5.145-33.424-9.23-50.25-42.22-11.65-22.837-13.746-44.61-9.657-62.717.35-1.55.75-3.07 1.187-4.564.887-2.386 2.22-4.867 4.063-7.437 14.096-19.637 44.76-3.16 29.25 20.936-1.586 2.468-3.375 4.467-5.282 6.03 10.913-.16 22-6.1 29.69-20.56 13.784-25.93-8.35-51.58-31.5-51.688-1.84-.01-3.696.173-5.532.5-3.696-10.15-11.607-14.724-19.125-14.657-11.395.103-21.84 10.833-15.063 28.814 1.5 3.97 3.765 6.996 6.438 9.187-15.838 24.13-20.18 58.28-6.22 93.376-28.655 4.51-48 1-62.25-6.375-16.074-8.32-26.524-22.114-35.718-38.124-9.194-16.01-16.705-33.956-27.813-48.97-9.438-12.754-22.502-23.363-40.28-26.686v19c10.905 2.694 18.18 9.218 25.28 18.813 9.153 12.37 16.656 29.85 26.594 47.156 9.94 17.305 22.74 34.724 43.376 45.405 19.365 10.023 44.896 13.558 79.28 7.28 17.85 31.407 38.335 40.456 59 45.626 20.14 5.04 40.485 7.83 68.376 28.97 1.97 1.66 3.995 3.258 6.032 4.78.594.49 1.18.965 1.78 1.47l.095-.094c44.505 32.063 102.997 31.564 138.467-3.906 38.87-38.87 35.765-105.384-6.187-150.844-26.624-35.576-33.77-66.875-33.156-105.562h-.03c4.428-45.38-13.045-76.668-37.033-95.188-21.172-16.346-46.585-23.457-67-25.875 1.496-26.37-5.78-52.345-17.717-71.5h-23.22zM88.438 52.688c-3.178 0-6.483.374-9.907 1.188-5.71 1.356-10.715 4.073-15 7.75-.027.024-.064.038-.093.063-2.25 1.463-4.222 3.494-5.75 6.093-.033.058-.092.1-.124.157-2.415 4.2-3.617 9.88-2.907 17.063 2.628 26.407 40.834 27.546 39.313-3.875-.388-8.14-3.673-14.105-8.19-17.813 15.426 4.92 26.523 22.082 16.72 48.063-10.34 27.408-41.76 29.372-55.47 12.313 5.018 20.444 20.162 35.828 46.44 29.656 14.73-3.46 24.825-11.138 31-20.78.233 17.556-5.215 34.5-14.782 47.967-18.347 25.828-50.26 39.48-90.782 19.126v20.375c40.907 16.38 78.436 3.814 100.875-22.155 19.068 10 28.71 30.633 27.782 48.344-.462 8.83-3.42 16.56-8.75 22.25 1.273-11.394-3.145-22.947-14.906-28.064-35.92-15.636-71.766 35.453-29.125 53.906 2.805 1.213 5.5 2.042 8.095 2.563v.03c.085.01.165.024.25.033 3.398.657 6.63.743 9.625.375 14.957-.285 27.384-4.945 36.375-12.844 10.904-9.582 16.36-23.27 17.094-37.283 1.275-24.38-11.26-50.987-35.69-64.78 6.762-12.177 10.956-25.986 12.157-40.313a45.402 45.402 0 0 0 15.97 5.656c12.77 1.955 25.603-1.35 36.312-7.844 10.708-6.493 19.516-16.308 23.75-28.437 3.2-9.173 3.47-19.695-.032-30.064-3.167-14.78-14.114-27.622-29.438-27.625-2.21 0-4.495.248-6.875.814-30.3 7.19-32.07 68.89 1.625 70.062-7.1 3.967-15.24 5.71-22.53 4.594-7.578-1.16-14.436-4.948-20.095-13.906-2.58-13.888-8.185-27.66-17.25-40.344-7.554-12.997-20.047-22.31-35.688-22.313zm157.156 57.75c-4.71.03-9.694 2.802-13.156 9.532-9.705 18.82 15.205 33.46 25.187 11.405 5.02-11.105-3.04-20.995-12.03-20.938zm48.437 145.5c-19.927.602-18.62 25.754-.717 27.532 24.093 2.383 23.874-26.494 2.718-27.5a24.556 24.556 0 0 0-2-.032z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/fireflake.svg b/static/_icons/_ability/_fire/fireflake.svg
new file mode 100644
index 00000000..3887410c
--- /dev/null
+++ b/static/_icons/_ability/_fire/fireflake.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M253.938 16s-.116 5.61 0 14.47c.116-8.86 0-14.47 0-14.47zm0 14.47c-.465 35.427-4.82 125.15-36.594 138.31-31.437 13.024-95.04-50.706-120.28-77.905 24.6 27.913 82.115 97.995 69.092 129.438-13.138 31.722-100.9 35.99-135.78 36.437 34.88.446 122.638 4.747 135.78 36.47 13.2 31.863-46.11 97.757-70.125 122.624 24.537-24.197 89.464-83.88 121.314-70.688 31.777 13.162 36.13 101.667 36.594 136.594.453-34.932 4.746-123.502 36.562-136.594 32.305-13.293 106.245 48.2 132.844 71.72-26.05-24.104-94.274-91.384-80.906-123.657 13.058-31.53 101.93-35.98 138.125-36.47-36.192-.488-125.06-4.9-138.125-36.438-13.227-31.924 53.26-103.695 79.937-130.718-27.322 26.44-99.95 92.406-131.875 79.187-31.777-13.156-36.1-102.882-36.563-138.31zm168.437 59.124c6.673-6.457 10.72-10.656 10.72-10.656s-4.193 4.044-10.72 10.656zm58.188 167.156c9.406.127 15.437 0 15.437 0s-6.03-.128-15.438 0zm-57.22 160.125c6.012 5.562 9.75 8.844 9.75 8.844s-3.61-3.417-9.75-8.845zM253.938 481.75c-.113 8.723 0 14.25 0 14.25s.116-5.518 0-14.25zM96.03 415.844c-6.063 5.98-9.78 9.875-9.78 9.875s3.86-3.744 9.78-9.876zM30.376 256.75c-8.796-.113-14.375 0-14.375 0s5.58.113 14.375 0zM97.063 90.875c-6.478-7.35-10.813-11.938-10.813-11.938s4.162 4.772 10.813 11.938zM333.719 68.28s-.176-.063-27.314 29.376c-8.554 9.28-13.223 35.225-1.47 40.094 11.756 4.868 27.006-16.758 27.377-29.375 1.173-40.035 1.406-40.094 1.406-40.094zm-155.5.032s-.196.077 1.436 40.094c.515 12.61 15.59 34.212 27.344 29.344 11.754-4.87 7.253-30.91-1.406-40.094-27.48-29.137-27.375-29.344-27.375-29.344zm265.5 109.938s-.032.263-40.064 1.438c-3.154.09-6.9 1.12-10.625 2.78-11.17 4.987-22.43 15.748-18.78 24.563 4.87 11.755 30.844 7.117 40.125-1.436 29.445-27.14 29.344-27.344 29.344-27.344zm-375.44.03s-.075.206 29.376 27.345c9.28 8.553 35.226 13.16 40.094 1.406 3.804-9.182-8.583-20.478-20.188-25.155-3.248-1.31-6.396-2.075-9.156-2.156-40.033-1.173-40.125-1.44-40.125-1.44zm187.22 3.22c9.68-.074 19.532 1.752 29.03 5.688 38 15.74 56.024 59.345 40.283 97.343-15.74 38-59.315 56.056-97.313 40.314-37.998-15.74-56.086-59.346-40.344-97.344 11.806-28.5 39.307-45.78 68.344-46zm.5 15.72c-32.468 0-58.78 26.314-58.78 58.78 0 32.467 26.314 58.78 58.78 58.78 32.467 0 58.78-26.314 58.78-58.78 0-32.468-26.314-58.78-58.78-58.78zM122.312 297.905c-5.516.075-11.556 1.42-16.593 3.563-3.225 1.37-6.024 3.073-8.032 4.967C68.55 333.918 68.31 333.75 68.31 333.75s.113.224 40.126-1.406c12.61-.515 34.18-15.59 29.312-27.344-2.14-5.165-8.345-7.19-15.438-7.094zm266.125 0c-3.208.077-6.177.622-8.625 1.72-2.554 1.144-4.535 2.895-5.562 5.374-4.868 11.754 16.764 26.83 29.375 27.344 40.01 1.63 40.094 1.406 40.094 1.406s-.237.166-29.376-27.313c-2.295-2.164-5.63-4.104-9.438-5.562-5.133-1.965-11.12-3.097-16.47-2.97zM203.03 373.562c-1.343.054-2.71.358-4.06.907-9.645 3.92-18.913 19.3-19.314 29.155-1.63 40.01-1.437 40.063-1.437 40.063s-.11-.205 27.374-29.344c8.66-9.183 13.16-35.226 1.406-40.094a9.336 9.336 0 0 0-3.97-.688zm105.314 0a9.165 9.165 0 0 0-3.375.72c-11.755 4.868-7.118 30.78 1.436 40.062 27.14 29.445 27.313 29.344 27.313 29.344s-.235-.034-1.408-40.063c-.335-11.434-12.873-30.26-23.968-30.063z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/firework-rocket.svg b/static/_icons/_ability/_fire/firework-rocket.svg
new file mode 100644
index 00000000..24527ba5
--- /dev/null
+++ b/static/_icons/_ability/_fire/firework-rocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M487.375 26.906 356.5 56.47c-23.13 58.833 39.11 126.32 101.313 101.5l29.562-131.064zm-143.5 99.125L237.78 232.5c-3.703 22.683 2.47 38.328 16.94 46.47l10.718 6.03-8.688 8.72L57.625 492.686H83.78l314.19-317.28c-23.152-9.146-42.645-27.243-54.095-49.376zM218.75 233.126l-113.53 18.72 97.436 5.968-121.97 51.156 105.158-9.47-67.313 61.688 62.564-18.282 54.844-54.812c-13.938-12.937-19.78-32.964-17.188-54.97zM16.844 245.063v32.312l84.937-15.563-84.936-16.75zm263.75 75.437-42.688 43.063-.875 67.75L280.595 320.5zm-161.97 2.625L16.845 341.5v44.094l101.78-62.47zm8.157 61.25-110.124 47.22v65.124H27.22l1.28-1.283 41.03-41.03 57.25-70.032zm85.314 15.22-39.156 97.217h38.78l.376-97.218zm58.78 1.967-10.718 95.25h26.156l-15.437-95.25z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/flame.svg b/static/_icons/_ability/_fire/flame.svg
new file mode 100644
index 00000000..a6299524
--- /dev/null
+++ b/static/_icons/_ability/_fire/flame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M245.05 15.514c34.29 48.815-23.535 320.54-90.302 136.72C106.796 325.11 38.956 332.518 38.876 252.55c-71.6 79.31 43.824 220.767 87.376 243.935h52.127c-45.92-40.016-76.784-78-82.176-135.968 47.312 9.423 71.855 20.96 81.263-62.048 60.736 86.59 100.944-49.376 137.184-107.12-1.647 40.32-3.343 93.456 22.848 129.888 8.736 12.143 33.232 16.11 54.736 15.807-9.92 16.08-44.848 69.376-17.008 89.2 27.84 19.824 33.072-.384 25.856 16.176-13.264 20.88-22.992 39.375-59.072 54.063h56.064c59.44-18.72 111.807-91.663 94.607-135.535-22.015 18.657-43.774 30.897-61.294 29.537 49.12-72.08 37.84-145.903 14.752-221.342-20.224 72.383-33.488 82.495-54.576 99.52 29.104-68.657-85.44-214.448-146.51-253.15z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/flamer.svg b/static/_icons/_ability/_fire/flamer.svg
new file mode 100644
index 00000000..b89bc79f
--- /dev/null
+++ b/static/_icons/_ability/_fire/flamer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M166 121c0 90 90 105 90 180 0 30-30 75-75 75s-75-45-45-120c-45 30-60 60-60 90 0 75 75 150 180 150s180-45 180-135c.67-133.125-153.4-177.596-195-240-30-45-15-75 15-105-60 15-90 57-90 105z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/flaming-claw.svg b/static/_icons/_ability/_fire/flaming-claw.svg
new file mode 100644
index 00000000..ae0b859e
--- /dev/null
+++ b/static/_icons/_ability/_fire/flaming-claw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M286.344 15.22c35.747 36.387 36.18 94.69-1.875 112.78-41.352 19.655-99.47-5.62-72.876-74.813-74.166 45.167-89.234 119.982-63.656 192.125-30.293-23.512-90.362-67.5-47.875-117.375-57 11.348-71.862 59.875-42.063 90.532 49.228 50.64 13.02 118.883-28.03 46.718-24.442 123.094 153.718 150.67 155.343 231.28h18.53C195.46 427.78 141.368 388.31 83.282 340l30.25-93.406c.142 1.064.294 2.08.44 3.125-1.64 46.587 15.002 127.502 78.468 121.843-14.43-6.617-26.087-15.86-35.563-26.47 20.738-4.194 38.623-63.316 32.28-156.374l88.126-31.564c-64.46 43.87-78.115 117.557-39.436 154.563l44.72-103.94 85.498-22.343c-64.875 41.348-105.853 95.667-73 144.688l57.875-80.906L458.158 265c-125.27 21.775-157.203 101.965-173.626 176.28 3.107 17.593 10.72 36.258 20.283 55.19h13.656C272.694 372.424 453 363.083 480.843 287.97c26.825-72.37 7.37-109.43-52-157.69 48.237 78.413-19.87 116.58-38.53 85.845-38.098-62.747 70.19-152.574-103.97-200.906z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/flaming-sheet.svg b/static/_icons/_ability/_fire/flaming-sheet.svg
new file mode 100644
index 00000000..e378bcf1
--- /dev/null
+++ b/static/_icons/_ability/_fire/flaming-sheet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M24.17 23.23C141.2 130.5 6.05 261.7 98.24 395.8c52.16 75.9 147.16 102.4 243.36 84.3C536 443.6 541.9 105.6 306.4 60.75c125.4 74.35 79.7 167.45 23.3 148.45-76.7-25.8 20.4-110.79-86.4-169.66 46.2 92.96-76.4 78.56-77.6 1.68C118.8 100 235.9 174.2 243.8 241.5c12.3 105.1-118.3 77.1-90.9-41.3 15.5-66.5-34-127.13-128.73-176.97zM427.9 168.1c63.6 104.5 30.6 218.7-28.7 263-78.8 58.8-223.4 37.1-282.7-53.8 165.6 102.2 286.6 19.3 205.1-94 8.5 47-17.8 82.6-65.3 97.5 36.2-30 46.5-96.2 2.2-200.3 91.6 139.8 203.6 100.3 169.4-12.4zm-319.4 24.1c-8.57 99.3 58.1 170.8 140.7 163.2-97.7 68-206.53-47.1-140.7-163.2zm291.8 96c-19.6 0-35.4 15.9-35.4 35.5s15.8 35.4 35.4 35.4c19.6 0 35.5-15.8 35.5-35.4-.4-20.3-20.2-35-35.5-35.5zm-21.2 89.5c-10.7 0-19.4 8.8-19.4 19.5 0 10.8 8.7 19.5 19.4 19.5 10.8 0 19.5-8.7 19.5-19.5 0-10.7-8.7-19.5-19.5-19.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/plasma-bolt.svg b/static/_icons/_ability/_fire/plasma-bolt.svg
new file mode 100644
index 00000000..58a7912a
--- /dev/null
+++ b/static/_icons/_ability/_fire/plasma-bolt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M24.03 14c-21.58 46.38.5 85.717 40.876 98.594 37.1 11.84 60.145 33.247 49.53 82.75-7.982 37.263 7.447 72.355 50.064 80.937 23.717 4.78 50.425 32.762 55 76.376-2.76 71.81 50.795 134.308 123.28 141.656 75.402 7.644 142.733-47.288 150.376-122.687 3.822-37.7-8.017-73.352-30.22-100.563-.008-.01-.02-.02-.03-.03-26.01-45.997-144.995-100.207-187.25-96.094-43.27 4.212-72.128-8.77-83.844-45.032C176.252 81.72 145.9 76.166 107.563 83c-34.144 6.09-69.725-22.114-83.53-69zm104.907 81.906c30.423-.038 55.034 29.16 49.563 61.28-13.876-19.435-33.808-41.88-75.938-53.78 8.897-5.175 17.857-7.49 26.376-7.5zm17.25 57.875c2.112-.166 4.53.692 7.594 3.157 4.09 3.288 8.36 9.51 10.75 17.625 2.394 8.117 2.367 16.305.72 22.313-1.647 6.008-4.567 9.222-7.188 10.25-2.62 1.028-5.537.63-9.625-2.656-4.087-3.29-8.357-9.51-10.75-17.626-2.392-8.117-2.366-16.305-.718-22.313 1.646-6.007 4.565-9.252 7.186-10.28a7.083 7.083 0 0 1 2.03-.47zm116.75 41.626c32.99-.243 66.205 13.118 73.22 43.53 2.483 9.94 5.295 18.77 8.343 26.533.537 5.562 1.883 11.263 4.03 16.874 4.208 10.99 10.827 19.884 19.064 25.5 8.236 5.615 19.05 7.832 28.47 3.25 9.417-4.583 14.638-14.054 16.56-24.125 1.4-7.336 1.18-15.307-.655-23.345 85.45 65.1 69.966 143.12 19.624 184.72-52.91 43.717-137.897 49.615-175.375-40.5 1.1.956 2.394 1.658 3.81 2.155a44.91 44.91 0 0 0 22.564 6.063c24.892 0 45.28-20.358 45.28-45.25 0-22.926-17.29-42-39.468-44.875-26.686-18.043-52.14-29.055-47.687-59.813 5.098 5.817 11.21 10.258 17.843 13 9.664 3.996 20.89 4.263 30.312-1.156 9.42-5.42 14.826-15.268 16.188-25.626 1.36-10.358-.985-21.562-6.907-31.78-5.922-10.22-14.492-17.818-24.156-21.814a39.273 39.273 0 0 0-9.97-2.656c-.37-.223-.715-.468-1.092-.688zM130.25 214.03c11.856 21.624 105.586 9.302 92.344 100.19-22.438-80.46-92.42-36.018-92.344-100.19zm129.063.376c2.316-.033 4.845.502 7.562 1.625 5.434 2.248 11.147 7.042 15.125 13.907 3.978 6.866 5.292 14.178 4.53 19.97-.76 5.79-3.25 9.735-6.967 11.874-3.72 2.14-8.41 2.31-13.844.064-5.435-2.247-11.148-7.04-15.126-13.906-3.978-6.866-5.293-14.21-4.53-20 .76-5.792 3.25-9.705 6.967-11.844 1.86-1.07 3.966-1.654 6.282-1.688zm113.375 27.563c1.912-.07 4.124.653 6.968 2.593 4.334 2.955 9.13 8.847 12.156 16.75 3.026 7.902 3.638 16.036 2.47 22.156-1.17 6.118-3.844 9.58-6.376 10.81-2.53 1.233-5.447 1.08-9.78-1.874-4.335-2.955-9.132-8.816-12.157-16.72-3.027-7.9-3.638-16.067-2.47-22.186 1.168-6.12 3.843-9.58 6.375-10.813a7.201 7.201 0 0 1 2-.656c.26-.04.54-.05.813-.06zm-90.094 102.25c14.79 0 26.594 11.8 26.594 26.592 0 14.792-11.803 26.563-26.594 26.563-14.79 0-26.594-11.77-26.594-26.563 0-14.79 11.803-26.593 26.594-26.593z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/small-fire.svg b/static/_icons/_ability/_fire/small-fire.svg
new file mode 100644
index 00000000..a60fca88
--- /dev/null
+++ b/static/_icons/_ability/_fire/small-fire.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M162.22 21.312c-183.876 106.68 51.994 227.35-10.19 332.47C116.95 413.083 38.11 325.45 43.75 227-6.035 353.376 30.21 443.745 95.22 492.75c1.386.34 17.577.498 41.186.562-28.478-16.9-32.06-75.355 32.813-103.25l15.78-7L182.062 400c-1.356 8.34-.318 13.95 1.188 16.937 1.507 2.987 3.106 3.544 5.844 4.094 5.475 1.1 16.963-2.395 26.28-14.624 18.636-24.457 29.117-80.228-26.874-167l-4.094-6.437-13.906-19.25 23.25 9.905 5.25 1.75c80.85 25.498 135.3 58.46 174.625 112.72 21.544-22.906 38.7-56.835 43.812-91.69l3.5-27.468 13.438 23.97c25.525 45.802 30.267 104.912 11.094 156.5-14.23 38.28-42.036 72.34-84 93.5 13.623-.01 24.05.032 25.25.124 154.76-34.77 139.345-244.952-14.19-394.093.012.726 0 1.46 0 2.188 78.964 185.87-136.465 189.104-119.25 11.47-41.686 100.463-132.86-2.147-91.06-91.283zM269.093 332.25c13.51 15.806 22.35 33.086 22.78 50.812.587 24.03-9.293 47.12-24.53 66.563-14.832 18.926-34.837 34.62-56.625 43.656 33.127-.065 64.926-.16 95.217-.25l-.062-.186c30.95-18.584 47.31-38.83 53.75-57.813 6.44-18.982 3.25-37.246-5.844-53.718-15.44-27.97-49.705-47.71-84.686-49.062z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_fire/smoking-finger.svg b/static/_icons/_ability/_fire/smoking-finger.svg
new file mode 100644
index 00000000..fb7cfb1c
--- /dev/null
+++ b/static/_icons/_ability/_fire/smoking-finger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M204.262 14.523c-77.532 69.77-17.704 109.27 59.158 52.204 51.638-38.34 71.438 23.49 47.717 53.505-58.438 73.947-172.578 34.18-89.354 7.008-113.37-36.547-121.296 71.39-90.523 104.54 38.863 41.858 124.766 26.255 165.277-7.01 37.108-30.468 21.75-60.866-22.777-36.79 35.316-52.643 95.264-16.59 94.025 35.622-.848 35.23-28.5 88.775-124.978 110.964 196.402 32.01 316.185-144.252 218.422-213.752 7.6 41.44-36.27 85.195-65.994 80.596C440.806 80.175 371.784-42.2 263.248 54.82c-36.02 32.2-71.8 3.22-58.986-40.297zm-108.22 210.83c-2.84-.05-7.002.973-12.147 3.674-.752 50.5-28.358 94.39-64.766 128.723v136.836h159.595c15.818-5.263 33.142-11.42 54.955-21.352l.205-.093.207-.08c2.088-.834 2.763-1.695 3.523-4.033.76-2.338.93-6.127.178-10.15-.753-4.023-2.372-8.235-4.244-11.37a19.404 19.404 0 0 0-3.066-3.907l-51.216 20.418-6.92-17.36 58.818-23.45c.294-.116.433.1.932-2.048.498-2.147.505-6.053-.346-10.316-1.445-7.238-5.578-15.464-8.986-19.674l-50.594 20.17-6.922-17.36 58.225-23.214c2.412-11.735-1.187-23.722-8.15-31.36l-64.552 25.735-6.92-17.36 136.612-54.464c6.523-2.6 9.43-6.04 10.855-9.498 1.425-3.458 1.302-7.34-.17-10.882-2.943-7.088-9.628-12.57-21.875-7.688L79.85 340.768l-6.92-17.36 29.924-11.93c8.12-24.656 10.526-47.405 8.353-63.146-1.148-8.317-3.598-14.544-6.297-18.11-2.698-3.565-4.98-4.795-8.867-4.868z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_frost/icicles-fence.svg b/static/_icons/_ability/_frost/icicles-fence.svg
new file mode 100644
index 00000000..1fd9b21b
--- /dev/null
+++ b/static/_icons/_ability/_frost/icicles-fence.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m310.395 18.275.582 30.954 61.322 113.3-4.09-128.485-8.763-15.77h-49.052zm134.71 2.47-40.814 171.74a249.955 249.955 0 0 0-47.372 10.94L235.45 74.834l49.745 166.524a254.761 254.761 0 0 0-39.056 36.585L77.19 227.48l126.46 119.456a250.04 250.04 0 0 0-15 51.392l-169.625 40.31L202.3 482.196l183.095-43.513-153.565-36.495a207.897 207.897 0 0 1 10.8-36.837l152.005 45.406-113.684-107.39a209.929 209.929 0 0 1 28.648-26.618L418.664 392.21l-44.53-149.077a208.209 208.209 0 0 1 34.923-7.742l36.03 151.616 43.53-183.166-43.512-183.094zM66.043 66.913l67.238 109.156 109.19 67.258-67.238-109.158-109.19-67.256zm-47.658 234.62v47.882l19.27 10.512 128.486 3.506-112.714-60.74-35.04-1.16z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_frost/striking-diamonds.svg b/static/_icons/_ability/_frost/striking-diamonds.svg
new file mode 100644
index 00000000..06b790fe
--- /dev/null
+++ b/static/_icons/_ability/_frost/striking-diamonds.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M30.875 36.063 88.25 300.625 202.406 400.97l24.688-76.814L30.874 36.062zm102 42.343L333.72 198.344l96.374 2.375-46.78-68.345-250.44-53.97zm3.5 42.28 202 284.595 149.5 78.626L440.78 365.78 136.376 120.69z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_lightning/electric-whip.svg b/static/_icons/_ability/_lightning/electric-whip.svg
new file mode 100644
index 00000000..ee813fa3
--- /dev/null
+++ b/static/_icons/_ability/_lightning/electric-whip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M17.484 39.262c49.142 2.758 98.444 7.823 147.96 15.924l-6.188-37.095L298.61 124.75l8.177-41.976L421.17 255.672l32.39-29.328-4.658 171.826 45.943 6.657-128.062 62.762 28.438 25.59-234.395-2.697c405.34-23.83 225.85-392.453-143.335-451.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_lightning/electrical-crescent.svg b/static/_icons/_ability/_lightning/electrical-crescent.svg
new file mode 100644
index 00000000..d6ed4056
--- /dev/null
+++ b/static/_icons/_ability/_lightning/electrical-crescent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m239.172 27.03-.004.005-66.578 25.697 50.226 2.918-.584 24.53c.726 12.525 5.523 14.74 18.106 12.85l83.516-15.186-56.65 39.13c-19.067 12.847-2.43 27.668 24.53 28.034l112.13 10.512-87.6 33.287c-23.595 8.37-10.043 38.75 12.263 49.642l86.434 39.712-89.94 2.92c-30.218.486-35.565 13.945-15.768 33.873l99.87 96.363-126.15-68.914c-25.672-12.57-41.764-.86-36.208 18.104l22.775 66.578-56.65-59.568c-12.143-13.383-38.997-16.92-40.296.578l-6.424 63.074-19.857-67.746c-3.372-15.715-31.885-25.995-38.545-11.68L79.152 406.64l3.504-65.994c2.903-14.986-8.96-28.388-24.53-14.6L32.43 345.32l-15.184-49.056 2.918 68.914 35.625-9.346 6.425 103.955 58.4-65.992 54.315 97.53 22.777-89.354 110.377 89.352-15.768-95.777 197.397 79.426-124.395-157.685 117.973-19.27-136.075-90.525L468.691 156.1l-152.426-43.22 74.17-65.41-147.172 22.194-4.09-42.633zM137.42 91.446a147.32 147.32 0 0 1 23.695 11.692c54.57 33.253 78.314 94.91 53.03 137.715-25.28 42.802-90.01 50.54-144.58 17.286-22.038-13.43-39.044-31.49-49.83-51.072a130.828 130.828 0 0 0 5.628 18.604c12.02 31.28 36.836 61.6 71.633 82.863 34.798 21.262 72.684 29.257 105.334 25.348 32.65-3.91 59.756-19.373 75.002-45.254 15.247-25.884 15.917-57.697 3.898-88.978-12.018-31.28-36.833-61.6-71.63-82.863-23.506-14.364-48.42-22.668-72.18-25.343z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_lightning/lightning-dome.svg b/static/_icons/_ability/_lightning/lightning-dome.svg
new file mode 100644
index 00000000..ac8f6c3d
--- /dev/null
+++ b/static/_icons/_ability/_lightning/lightning-dome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 55c-68.5 0-126.7 50.7-167.63 116.2C47.44 236.7 23 317.7 23 384v3.7l2.64 2.7C76.47 441.2 166.4 465 256 465c89.6 0 179.5-23.8 230.4-74.6l2.6-2.7V384c0-66.2-24.4-147.3-65.4-212.8C382.7 105.7 324.5 55 256 55zm0 18c39.4 0 76.3 19.88 108.1 51.5l-15.2 92.1 26.7 12.3-37.2 116.6 74-120.1-29.4-24.2 16-34.6c3.2 4.6 6.4 9.3 9.4 14.2C446.6 242 470 319 470.9 380.1 425.1 423.7 340.7 447 256 447c-84.7 0-169.08-23.3-214.91-66.9.83-54 19.16-120.4 49.8-177.4l48.81 44.6-42.09 3.5L177 355.4l-40.1-92 38.7 15.5-57.9-119c29.5-40.4 65.5-70.94 105.1-82.19l-17 77.59 39.3-7.1-32.3 95.6 35.1-12.7.6 123L291.4 189l-38.6 15.5 30.2-97-34.4 4.2 5.4-38.68c.7-.01 1.3-.02 2-.02z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_lightning/lightning-flame.svg b/static/_icons/_ability/_lightning/lightning-flame.svg
new file mode 100644
index 00000000..9423ad9b
--- /dev/null
+++ b/static/_icons/_ability/_lightning/lightning-flame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18 18v84l53.61 85.3 47.99-47.8L155 281.3l108.8-120.9 8.8 93.6c-3.3 7.7-5.6 15.8-6.6 24 22 54.2 0 150.6-32 32-32 32-35.3 94.7-16 128 9.8 25.7 39.4 40.8 75.7 48.9-25.8-17.5-41.1-43.1-43.7-74.9 9.7 10 39.4 36.4 57.8 26 28.1-15.8 16.6-61.8 11.9-96 41.7 26.7 55.8 58.2 66 90.5 2.5-34.8 20.1-33.3 33.3-42.5-19.5 47.8 21.3 72.7 13.3 100.4 9.4-1.3 18.1-2.7 25.7-4.4 41-13.3 37.2-54.2 32-96-6.8 13.7-27.3 22.9-48 32 32.1-48.1 42.6-85.4 32-112-9.8-16.8-30.1-23.2-48-32 0 0 28.3 36.4 16 48-70.1 62.4-142.6-136.6-32-160-46.7.1-100.2 34.3-123.4 64l3.1-138.59L175.2 205.7 151.6 66.56 87.61 114.6 73.34 18z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_lightning/sonic-lightning.svg b/static/_icons/_ability/_lightning/sonic-lightning.svg
new file mode 100644
index 00000000..b2b8f210
--- /dev/null
+++ b/static/_icons/_ability/_lightning/sonic-lightning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M17.664 18.91v37.574l77.523 129.942 86.754-21.067 79.33 121.394-78.918-46.483 93.195 101.34-64.182 10.81 53.05 18.783c-36.484 34.27-64.93 77.082-79.313 124.158h19.617c19.42-58.22 62.696-110.147 115.73-144.34 53.682-34.606 116.954-50.88 174.96-38.713v-19.055c-12.93-2.457-26.01-3.663-39.13-3.686-28.257-.05-56.664 5.316-83.977 15.053l-3.295-60.925-27.457 53.535-30.445-83.947-7.63 67.797-103.43-162.6-80.04 18.522L64.642 18.91H17.665zM329.63 86.627l15.995 166.596 57.285-138.067-38.79 27.656-34.49-56.185zm-38.198 47.238-28.48 28.934 29.095 64.132-.615-93.067zm131.77 61.852-40.65 86.244 52.173-42.435-11.524-43.808zM86.44 267.164l35.464 31.027 109.742 27.52-65.423-53.82-79.784-4.726zm379.953 83.254c-40.082-.07-80.49 12.044-115.74 32.207-45.917 26.264-83.418 66.318-99.645 112.736h19.96c15.535-38.607 48.525-73.382 88.964-96.512 41.507-23.742 90.514-35.082 135.476-27.21v-18.95a188.813 188.813 0 0 0-29.015-2.27zM189.2 355.91l-74.67.637-51.22 22.242 50.598 18.204 75.29-41.084zm39.073 25.672L162.21 397.67l6.864 29.447 59.2-45.535zm250.19 32.398c-27.52-.05-55.206 6.695-79.498 17.963-31.34 14.54-57.393 36.595-69.25 63.418h21.056c10.88-18.072 31.22-34.94 56.06-46.464 27.045-12.545 59.08-18.76 88.58-15.175v-18.824c-5.62-.606-11.28-.905-16.947-.916zm11.744 52.41c-15.04-.024-30.138 2.215-43.537 5.995-17.346 4.892-32.058 11.575-40.176 22.976h31.602a96.235 96.235 0 0 1 13.648-4.99c13.228-3.73 28.92-5.752 43.666-5.157V466.5a140.87 140.87 0 0 0-5.203-.11z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_poison/burst-blob.svg b/static/_icons/_ability/_poison/burst-blob.svg
new file mode 100644
index 00000000..5b693193
--- /dev/null
+++ b/static/_icons/_ability/_poison/burst-blob.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M347.23 23.738c-30.88.348-54.187 33.782-38.234 65.9 27.51 55.38-8.916 128.376-33.87 127.078-22.65 3.18-23.026 2.874-39.174 1.213-16.244 1.693-49.453-53.98-31.032-89.866 13.22-25.754-10.464-53.07-36.617-45.154-30.397 9.2-28.025 44.015-11.676 55.166 32.177 21.946 45.407 84.595 23.582 100.34a140.179 140.179 0 0 0-4.954 3.465c22.32 22.08 50.217 36.42 82.742 38.708 42.065 2.96 73.905-8.254 94.627-27.026a139.56 139.56 0 0 0-8.168-7.197l.467.162a29.31 29.31 0 0 1-1.367-.888 140.387 140.387 0 0 0-3.176-2.468c-29.222-25.908-16.064-108.42 33.96-138.356 24.04-14.386 29.526-66.077-13.504-79.1-4.628-1.4-9.194-2.027-13.606-1.978zM56.977 58.86a37.524 37.524 0 0 0-2.49.033c-6.615.306-12.97 2.392-18.26 6.044-10.443 7.21-17.63 21.37-16.288 37.245 1.343 15.876 10.833 33.877 35.806 48.824 59.178 35.422 83.054 111.95 65.617 174.63v.003c-13.175 47.362-.92 88.896 24.944 119.317 25.862 30.42 65.612 49.268 107.082 49.268 49.833 0 86.897-23.327 111.188-53.412 24.29-30.085 34.85-67.278 31.51-91.217-4.508-32.312-6.234-57.578-1.65-77.62 4.583-20.04 17.547-34.925 37.638-40.415 45.54-12.445 60.74-33.136 62.78-51.156 2.038-18.02-9.91-36.214-25.96-43.63-26.064-12.042-68.95 9.33-69.312 53.54-.506 61.757-55.606 115.057-142.898 108.917-45.827-3.224-83.848-27.697-110.668-62.26-26.82-34.566-42.89-79.244-45.998-124.628-1.855-27.076-13.025-41.893-25.704-48.82-5.547-3.03-11.505-4.537-17.34-4.66z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_poison/chemical-bolt.svg b/static/_icons/_ability/_poison/chemical-bolt.svg
new file mode 100644
index 00000000..3704ce09
--- /dev/null
+++ b/static/_icons/_ability/_poison/chemical-bolt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M39.344 15c-.778 0-1.554.045-2.344.125-12.645 1.288-21.85 12.573-20.563 25.22 1.288 12.644 12.574 21.85 25.22 20.56C54.3 59.62 63.506 48.334 62.218 35.688 61.01 23.832 51.01 14.997 39.343 15zm121.187 9.125c-.46 0-.937.015-1.405.063-7.48.76-12.918 7.457-12.156 14.937.76 7.48 7.456 12.918 14.936 12.156 7.48-.76 12.918-7.425 12.156-14.905-.714-7.013-6.63-12.252-13.53-12.25zM84.72 42.063c-.46 0-.91.014-1.376.062-7.48.762-12.95 7.457-12.188 14.938.762 7.48 7.457 12.918 14.938 12.156 7.48-.763 12.918-7.427 12.156-14.907-.714-7.013-6.63-12.252-13.53-12.25zm109.718 11.812c-.747 0-1.492.017-2.25.094-12.136 1.235-20.986 12.082-19.75 24.218 1.235 12.135 12.083 20.985 24.218 19.75 12.135-1.236 20.955-12.084 19.72-24.22-1.16-11.376-10.744-19.846-21.94-19.843zM119.53 77.72c-1.322 0-2.654.05-4 .186-7.677.782-14.606 3.768-20.25 8.22a25.524 25.524 0 0 0-18.843-5.69c-14.072 1.435-24.34 13.99-22.906 28.064 1.434 14.073 14.022 24.308 28.095 22.875.483-.05.964-.112 1.438-.188 4.48 11.417 14.082 20.036 25.75 23.344a24.599 24.599 0 0 0-1.438 11.19c1.385 13.598 13.557 23.51 27.156 22.124 13.6-1.385 23.48-13.526 22.095-27.125a24.686 24.686 0 0 0-8.97-16.69c7.707-8.002 11.996-19.206 10.782-31.124-2.053-20.166-19.062-35.193-38.906-35.187zm108.876 43.405a59.5 59.5 0 0 0-6 .28c-32.25 3.286-55.722 32.094-52.437 64.345a58.71 58.71 0 0 0 3.155 13.938c-16.95 7.738-27.9 25.62-25.906 45.187 2.5 24.564 24.434 42.44 49 39.938a44.734 44.734 0 0 0 11.75-2.844c.047 1.358.14 2.72.28 4.092 3.11 30.542 28.016 53.592 57.72 55.282-4.984 15.2-6.945 31.654-5.22 48.594.05.49.1.98.156 1.468-.312.024-.624.03-.937.063-19.733 2.008-34.073 19.642-32.064 39.374 2.01 19.73 19.612 34.103 39.344 32.094a35.792 35.792 0 0 0 20.5-9.125c24.262 28.84 61.9 45.574 102.22 41.468 64.763-6.594 111.907-64.453 105.31-129.217-4.034-39.622-27.25-72.647-59.5-90.813 1.907-7.465 2.546-15.39 1.72-23.5-3.77-37.03-36.846-63.99-73.875-60.22-25.248 2.572-45.788 18.78-55.125 40.564-9.945-8.12-22.39-13.146-35.813-13.813 10.245-11.804 15.77-27.628 14.063-44.405-3.08-30.236-28.592-52.758-58.344-52.75zm108.78 1.72c-.994 0-1.987.052-2.998.155-16.18 1.648-27.96 16.1-26.313 32.28 1.648 16.182 16.1 27.962 32.28 26.314 16.182-1.648 27.962-16.1 26.314-32.28-1.546-15.17-14.356-26.474-29.283-26.47zm59.564 26.343c-.46 0-.94.046-1.406.093-7.48.763-12.918 7.427-12.156 14.907.76 7.48 7.457 12.92 14.937 12.157 7.48-.762 12.918-7.426 12.156-14.906-.713-7.013-6.63-12.252-13.53-12.25zM61.562 202.375c-.46 0-.907.015-1.374.063-7.48.76-12.95 7.425-12.188 14.906.635 6.24 5.41 11.045 11.313 12.03a26.192 26.192 0 0 0-.438 8.126c1.465 14.388 14.3 24.87 28.688 23.406 14.387-1.465 24.87-14.33 23.406-28.72-1.466-14.386-14.3-24.87-28.69-23.405a26.23 26.23 0 0 0-8.06 2.157c-2.028-5.095-7.024-8.564-12.657-8.562zm44.126 75.906c-.67 0-1.352.026-2.032.095-10.883 1.108-18.796 10.835-17.687 21.72 1.107 10.882 10.834 18.795 21.718 17.686 10.883-1.107 18.795-10.803 17.687-21.686-1.04-10.203-9.648-17.815-19.688-17.813zm48.78 37.25a44.303 44.303 0 0 0-4.437.22c-23.873 2.43-41.243 23.782-38.81 47.656 2.43 23.874 23.75 41.244 47.624 38.813a43.312 43.312 0 0 0 26.062-12.25 29.32 29.32 0 0 0 17.625 3.75c16.182-1.65 27.962-16.102 26.314-32.283-1.648-16.18-16.1-27.96-32.28-26.312-1.783.18-3.495.523-5.158 1-7.74-12.493-21.584-20.598-36.937-20.594z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_poison/goo-spurt.svg b/static/_icons/_ability/_poison/goo-spurt.svg
new file mode 100644
index 00000000..ea9a385e
--- /dev/null
+++ b/static/_icons/_ability/_poison/goo-spurt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M164.22 19.97c-55.872.782-107.155 22.6-138.345 76.25 70.746-35.597 126.136-16.29 156.97 39-9.19-32.183-15.546-61.18 15.342-43.345 99.626 57.518 82.717 175.182 93.157 288.125 6.47 69.99 73.38 113.886 126.625 100.53 51.757-12.98 89.914-78.05 62.75-136.405-39.485-84.82-106.24-150.306-169.595-223.844-26.82-31.13 37.58-16.983 87.72 6.314C348.42 68.75 254.338 20.817 169.624 19.97c-1.81-.02-3.604-.027-5.406 0zm113.967 134.843c39.97 42.606 64.192 101.616 63.032 177.968-.426 27.78 12.714 60.507 31.405 77.19 29.71 26.514 65.718 27.143 92.78-4.75-20.674 36.025-59.665 68.922-112.593 35.936-23.882-14.883-41.382-51.668-40.125-83 1.71-42.56 9.185-146.958-34.5-203.344zm-77.718 13.03c-12.77.383-21.4 16.095-19.595 36.813 1.926 22.1 15.008 41.518 29.187 43.344 14.18 1.826 24.114-14.62 22.188-36.72-1.926-22.098-15.008-41.486-29.188-43.31a16.17 16.17 0 0 0-2.593-.126z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_poison/gooey-molecule.svg b/static/_icons/_ability/_poison/gooey-molecule.svg
new file mode 100644
index 00000000..0b5a08c4
--- /dev/null
+++ b/static/_icons/_ability/_poison/gooey-molecule.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M115.248 15.242c-6.71.062-13.772 2.19-21.44 5.856-16.522 7.9-22.95 30.435-5.84 54.898 27.473 39.282 51.255 33.15 86.434 73 7.825 8.864 13.88 34.267 5.84 42.05-10.477 10.145-33.53 10.34-74.754-16.353-25.01-16.193-22.335-44.923-43.802-58.984-13.122-8.598-36.792-8.48-44.385 5.253-7.592 13.734-1.066 39.194 13.434 48.475 19.786 12.66 37.92 2.57 64.243 19.27 65.212 41.377 71.546 91.154 9.343 147.175-26.21 23.603-48.852 11.47-75.338 30.37-16.913 12.066-16.822 33.317-9.343 43.8 7.313 10.252 23.652 23.224 41.465 10.513 27.766-19.81 29.837-46.434 57.233-67.164 15.618-11.818 35.334-7.048 45.555 5.256 12.872 15.5 6.642 70.79-22.78 134.908C172.84 448.53 203.8 404.843 230.47 384.94c29.958-22.36 55.635 18.38 71.833 56.376-4.353-44.678-14.81-87.855 25.113-73.896 8.857 3.097 20.136 11.22 30.953 19.855 38.628 30.837 26.928 63.923 56.066 94.612 15.505 16.332 44.323 20.74 56.648 8.76 12.325-11.976 12.08-35.586-4.672-51.393-27.728-26.168-66.728-37.086-92.275-64.242-49.604-52.724 55.685-50.42 119.138-44.967-85.866-25.572-130.043-45.688-140.746-70.082-6.116-13.934-.508-45.57 26.28-61.322 40.682-23.923 51.81-9.098 91.106-27.45 24.732-11.546 29.933-38.4 22.777-53.73-7-14.99-26.512-32.02-52.562-19.855-41.783 19.51-34.94 63.352-74.753 85.266-37.618 20.708-54.327-32.963-43.217-157.1-24.59 109.814-39.16 140.04-77.09 145.42-11.75 1.668-40.537-9.848-50.81-28.032-25.562-45.252-16.246-65.546-44.97-106.29-10.194-14.462-20.86-21.225-32.704-21.608v-.002a31.34 31.34 0 0 0-1.338-.016zm129.318 173.996c8.76 0 17.52 3.34 24.202 10.024a34.018 34.018 0 0 1 9.257 17.03c-3.76-.48-7.692.713-10.58 3.6-4.953 4.954-4.953 12.987 0 17.94 4.954 4.953 12.984 4.953 17.938 0 4.37-4.37 4.878-11.134 1.537-16.068 9.924-4.267 21.866-2.356 29.97 5.748 10.62 10.62 10.62 27.836 0 38.455a27.06 27.06 0 0 1-14.275 7.508c16.35 20.97 14.897 51.312-4.386 70.595-20.874 20.872-54.715 20.87-75.587-.002-12.096-12.095-17.166-28.544-15.243-44.302-9.945 5.362-22.618 3.848-31.017-4.55-10.253-10.254-10.253-26.877 0-37.13 10.253-10.253 26.876-10.253 37.13 0a26.137 26.137 0 0 1 7.012 12.65 54.532 54.532 0 0 1 2.118-2.252 53.559 53.559 0 0 1 6.44-5.48 16.361 16.361 0 0 0 3.317 4.808c3.807 3.807 9.016 5.333 13.963 4.618-2.76 7.186-2.212 15.347 1.645 22.144-5.824-1.045-12.046.67-16.547 5.172-7.304 7.305-7.304 19.148 0 26.453 7.306 7.304 19.15 7.304 26.454 0 5.37-5.372 6.777-13.192 4.25-19.862 9.095 3.12 19.575 1.058 26.832-6.2 10.15-10.148 10.148-26.603-.002-36.753-7.753-7.753-19.183-9.577-28.674-5.485.49-4.744-1.077-9.66-4.713-13.295-6.408-6.408-16.798-6.408-23.207 0a16.32 16.32 0 0 0-4.543 8.727 34.144 34.144 0 0 1-7.49-5.67c-13.365-13.365-13.365-35.035 0-48.4 6.683-6.683 15.44-10.024 24.2-10.024z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_poison/gooey-sword.svg b/static/_icons/_ability/_poison/gooey-sword.svg
new file mode 100644
index 00000000..723d311a
--- /dev/null
+++ b/static/_icons/_ability/_poison/gooey-sword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M159.977 20.63c78.967 153.842 60.076 197.813-140.143 27.124v71.185C48.22 134 72.317 147.707 92.607 160.23c-23.095.797-27.865 26.2 6.827 50.518 34.105 23.908 59.087 13.718 54.964-6.256 75.656 67.92-15.78 85.644-134.564 105.58v62.512c125.702-58.524 142.942-36.168 37.998 123.324h58.27c100.945-258.564 155.41-177.483 125.953 0h33.115c8.185-107.59 37.76-129.26 60.62 0h45.493c-141.196-219.314-28.308-204.87 113.828-140.215V309.8c-239.157-11.635-236.9-101.798 0-133.443V85.813c-72.386 39.545-74.392 15.146-7.327-65.182h-30.396c-141.87 206.317-167.428 173.33-114.166 0H297.82c-26.108 98.248-72.014 80.678-90.902 0h-46.94zm-21.49 55.854c-12.85-.12-17.734 15.212-.45 35.832 27.02 32.236 54.07 12.942 27.088-19.246-9.712-11.586-19.428-16.518-26.637-16.586zM293.226 90.48c2.17.067 4.405.65 6.636 1.866 17.85 9.735-.25 40.7-18.1 30.963-15.646-8.534-3.72-33.294 11.465-32.83zm-52.766 12.207c9.52 0 17.24 7.72 17.24 17.24 0 5.46-2.544 10.315-6.5 13.473l5.82 41.4 49.345-6.94 6.96 49.476-18.51 2.6-4.354-30.967-20.23 2.844c14.463 68.143 18.467 141.156 9.012 201.95-25.853-55.827-42.906-127.008-47.84-196.49l-19.964 2.808 4.355 30.97-18.506 2.602-6.96-49.478 48.19-6.776-5.93-42.144c-5.558-2.86-9.368-8.644-9.368-15.328 0-9.523 7.718-17.24 17.24-17.24zm202.01 23.862c.564.007 1.116.028 1.655.057 8.632.48 13.786 3.577 15.94 6.46 2.156 2.882 2.776 5.828-.133 11.367-2.91 5.538-10.27 12.996-23.912 19.81-13.666 6.827-25.43 9.032-34.06 8.553-8.63-.48-13.785-3.578-15.94-6.46-2.156-2.884-2.775-5.834.134-11.372 2.91-5.538 10.27-12.995 23.91-19.807 12.81-6.4 23.952-8.736 32.407-8.61zM182.167 293.11c.517.002 1.022.02 1.518.05 4.754.292 8.485 1.81 10.763 3.774 3.038 2.62 4.42 5.677 3.496 10.87-.923 5.194-4.94 12.75-14.824 21.057-19.795 16.637-35.19 14.16-40.83 8.855-2.822-2.653-4.21-6.063-3.21-11.46 1-5.395 4.96-12.846 14.28-20.775 10.906-9.276 21.052-12.416 28.806-12.37zm186.98 47.52c-25.603.182-26.42 26.004 20.002 60.106 72.344 53.145 114.972 20.073 42.516-33.146-25.997-19.098-48.157-27.064-62.52-26.96z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/bookmark.svg b/static/_icons/_ability/_symbol/bookmark.svg
new file mode 100644
index 00000000..6446fec3
--- /dev/null
+++ b/static/_icons/_ability/_symbol/bookmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m161.22 19.563-2.5 5.375-106.44 225.5-1 2.093c-24.493 28.208-34.917 58.587-33.593 88.19 1.38 30.852 15.12 60.388 36.376 86.81l2.812 3.5h49.72c4.817-3.836 8.93-7.817 12.405-12.03a73.187 73.187 0 0 0 4.875-6.656H65.97c-17.813-23.187-28.526-47.848-29.626-72.438-1.123-25.11 7.337-50.594 29.937-76.125h431.876l-5.25-12.874-91.844-225.5-2.375-5.843H161.22zm11.843 18.687h177.343l52.656 41.594 38.407 94.28-58.845 70.94H75.47L173.062 38.25zM75.156 282.625c-15.31 18.98-20.975 37.778-20.125 56.438.84 18.398 8.276 36.95 20.5 54.468h57.19c4.392-13.517 6.344-29.847 6.78-50.436h-16.188v-18.688h16.313v-.187h115.749v.186h17.156v18.688h-17.25c-.287 17.8-1.447 34.638-4 50.437h221.626c-9.034-36.872-9.112-74.006-.03-110.905H75.155zm83 60.28c-.77 37.698-6.46 65.83-24.72 87.97-14.595 17.7-36.19 30.747-67.28 42.813 8.69 1.658 17.214 3.225 26.53 5.25 14.048 3.052 27.912 6.338 39.033 9.25 5.56 1.455 10.44 2.826 14.374 4.062 1.94.61 3.533 1.074 5.03 1.625 35.245-13.464 55.78-32.897 68.345-58.72 11.944-24.55 16.287-55.713 16.936-92.25h-78.25zm89.25 69.44c-1.632 6.425-3.532 12.668-5.812 18.686h257.03v-18.686H247.407z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/charm.svg b/static/_icons/_ability/_symbol/charm.svg
new file mode 100644
index 00000000..9f350443
--- /dev/null
+++ b/static/_icons/_ability/_symbol/charm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M146.47 21.594c-19.843.39-40.255 13.992-46.94 38.937-36.28-36.277-90.65-8.066-79 41.595 11.826 50.403 99.55 64.537 114.25 90 0-32.133 66.5-82.522 54.19-135.125-5.728-24.468-23.862-35.773-42.5-35.406zM237 154.47c-35.243.73-68.834 22.932-79.688 69.31-24.11 103.027 106.126 201.72 106.126 264.66 28.8-49.877 200.592-77.563 223.75-176.282 22.82-97.274-83.624-152.5-154.687-81.437-13.49-50.343-55.558-77.08-95.5-76.25z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/chemical-drop.svg b/static/_icons/_ability/_symbol/chemical-drop.svg
new file mode 100644
index 00000000..c0f755be
--- /dev/null
+++ b/static/_icons/_ability/_symbol/chemical-drop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M433.814 68.664c-2.74.05-5.495.423-8.242 1.152-8.47 2.25-15.3 7.512-20.44 14.49C292.905 120.865 186.494 154.58 75.276 190.4c-39.714 12.79-64.6 51.163-53.006 86.784 11.597 35.62 54.342 52.277 94.035 39.277l-.002.002c109.41-35.827 214.424-69.036 325.12-104.656.56.212 1.13.39 1.694.58-2.62 2.935-4.226 6.796-4.226 11.04 0 9.164 7.43 16.593 16.594 16.593 9.165 0 16.596-7.43 16.596-16.593 0-4.32-1.664-8.24-4.367-11.192 12.75-4.865 21.353-16.866 25.535-30.898 4.547-15.257 4.504-33.654-.584-52.48-5.088-18.828-14.327-34.77-25.94-45.712-8.712-8.206-19.263-13.79-30.175-14.43-.91-.052-1.822-.07-2.736-.054zm.497 18.68a17.2 17.2 0 0 1 1.377.035c5.567.358 11.818 3.34 18.22 9.37 8.535 8.04 16.44 21.165 20.716 36.986 3.622 13.4 4 26.397 2.012 36.852h-52.783c-3.517-6.207-6.512-13.352-8.622-21.158-4.276-15.822-4.046-31.094-.716-42.266 3.33-11.172 9.122-17.497 15.855-19.285a16.148 16.148 0 0 1 3.94-.536zm-38.414 17.043c-3.815 14.734-3.516 32.133 1.29 49.92a114.327 114.327 0 0 0 5.728 16.26h-151.22c-64.405 20.742-125.856 40.507-163.35 52.59-23.24 7.486-35.353 27.407-30.406 42.593 4.946 15.188 26.582 24.333 49.75 16.75 66.89-21.89 199.01-64.39 302.822-97.803 3.76 5.807 7.998 10.967 12.62 15.323.066.06.135.118.2.18-104.876 33.753-241.66 77.74-309.83 100.05-30.827 10.09-64.424-1.334-73.344-28.72-8.92-27.385 11.603-56.22 42.438-66.155 68.055-21.93 208.2-66.996 313.302-100.988zm59.58 180.205c-16.948 63.255-40.507 54.472-40.507 91.5 0 22.36 18.146 40.508 40.507 40.508 22.36 0 40.507-18.147 40.507-40.508 0-39.97-23.256-27.12-40.507-91.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/crosshair.svg b/static/_icons/_ability/_symbol/crosshair.svg
new file mode 100644
index 00000000..40dff6a6
--- /dev/null
+++ b/static/_icons/_ability/_symbol/crosshair.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M247 32v23.21C143.25 59.8 59.798 143.25 55.21 247H32v18h23.21C59.8 368.75 143.25 452.202 247 456.79V480h18v-23.21C368.75 452.2 452.202 368.75 456.79 265H480v-18h-23.21C452.2 143.25 368.75 59.798 265 55.21V32h-18zm0 41.223V128h18V73.223C359 77.76 434.24 153 438.777 247H384v18h54.777C434.24 359 359 434.24 265 438.777V384h-18v54.777C153 434.24 77.76 359 73.223 265H128v-18H73.223C77.76 153 153 77.76 247 73.223zM247 224v23h-23v18h23v23h18v-23h23v-18h-23v-23h-18z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/curled-leaf.svg b/static/_icons/_ability/_symbol/curled-leaf.svg
new file mode 100644
index 00000000..fa1b4b1a
--- /dev/null
+++ b/static/_icons/_ability/_symbol/curled-leaf.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M65.406 22.438C-32.612 123.463 45.7 279.385 140 313.03c110.753 39.518 281.45-48.678 329.688 68.314 2.887 11.273 2.674 21.795.312 31.47-4.584 18.77-17.86 34.842-35.094 45.405-17.233 10.562-38.186 15.343-56.875 12.25-18.688-3.095-35.237-13.374-46.06-34.845-7.256-14.418-7.834-25.936-5.25-34.72 2.582-8.782 8.476-15.232 16.092-19.06 15.233-7.66 36.52-4.87 49.22 17.624 7.496 13.276 2.582 22.546-3.782 26.53-3.182 1.992-6.634 2.58-10.313 1.375-3.678-1.206-8.1-4.4-12.062-12.156l-16.625 8.5c5.66 11.08 13.76 18.427 22.844 21.405 9.084 2.978 18.624 1.375 26.062-3.28 14.877-9.314 21.654-31.144 10.125-51.564-17.02-30.146-50.187-37.035-73.874-25.124-11.843 5.956-21.537 16.6-25.625 30.5-4.087 13.9-2.42 30.645 6.5 48.375 13.307 26.393 35.835 40.927 59.69 44.876 23.852 3.95 48.938-2.013 69.717-14.75 20.78-12.736 37.512-32.51 43.47-56.906 4.178-17.11 2.728-36.26-5.844-55.844.012-.196.02-.397.03-.594-.86-1.67-1.738-3.302-2.624-4.906-3.296-6.525-7.39-13.095-12.345-19.625l-.22.158c-15.118-20.04-33.1-33.376-53.624-43.282-29.513-14.245-64.506-20.966-102.374-27.937-75.736-13.944-163.31-29.618-236.344-115.533l14.22-12.093c69.026 81.2 149.666 95.258 225.5 109.22 37.916 6.98 74.522 13.763 107.124 29.5 22.7 10.955 43.322 26.472 60.406 48.967C464.098 111.956 141.36 206.986 65.406 22.44z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-fire.svg b/static/_icons/_ability/_symbol/dice-fire.svg
new file mode 100644
index 00000000..77b508cd
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-fire.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M218.4 24.72c-14.2 0-30.5 3.56-49.5 11.88 77.2 8.6 65.9 91.4 14.1 106.2-65.4 18.7-131.31-23.7-98.34-99.2-39.67 18.95-42.17 80.8-12.93 111.5C141.3 227.9 56.9 279 37.25 200.7-1.929 326.2 60.34 489.5 258.7 489.5c250.7 0 282-374.7 129.2-415.04 26.5 43.04-13.1 70.94-24.9 73.14-51.3 9.9-58.1-122.89-144.6-122.88zm37.5 118.08c4.5 0 9.4 1.1 12.8 2.9l115.9 67.1c7.4 4.1 7.4 10.9 0 15.2l-115.9 66.9c-7.2 4.3-18.5 4.3-25.7 0L126.8 228c-7.3-4.3-7.3-11.1 0-15.2L243 145.7c3.4-1.8 7.9-2.9 12.9-2.9zm-89 62.6c-21.6-.4-33.1 15-18.2 24.3 9.6 4.8 23.7 4.4 32.7-.8 8.8-5.3 9.5-13.7 1.5-19.4-4.3-2.5-10-4-16-4.1zm178.6.1c-20.8.4-31.3 15.5-16.3 24.5 9.6 4.9 23.9 4.6 33-.7 8.9-5.3 9.5-13.9 1.2-19.6-4.2-2.4-9.9-4-15.9-4.2h-2zm-89 0c-6.6-.1-13 1.5-17.7 4.2-10.2 5.6-10.4 15.1-.6 20.9 9.9 5.8 25.8 5.6 35.1-.6 15-9 4.6-24.3-16.8-24.5zm-141 41c1.5.1 3.4.5 5.6 1.6l111.5 64.5c7.2 4.1 12.9 14.2 12.9 22.5v119.7c0 8.3-5.7 11.7-12.9 7.6L121.2 398c-7.4-4.3-13.2-14.2-13.2-22.6V255.7c0-6.2 3-9.2 7.5-9.2zm281.3 0c4.2 0 7.2 3 7.2 9.2v119.7c0 8.4-6 18.3-13 22.6l-111.5 64.4c-7.2 4.1-12.9.7-12.9-7.6V335.1c0-8.3 5.7-18.4 12.9-22.5L391 248.1c2.1-1.1 4.2-1.5 5.8-1.6zm-185 65.5h-1.1c-5.3.4-8.5 4.8-8.5 11.6-.6 10.4 7.2 24.1 16.9 29.8 9.8 5.6 17.6 1.1 17.2-9.9.2-14.2-13.3-31.1-24.5-31.5zm130.9 21.8c-11.2.1-24.8 17.2-24.7 31.4.1 10.4 7.7 14.4 17.2 8.9 9.4-5.5 17-18.3 17.1-28.8 0-6.7-3.3-11.1-8.5-11.5h-1.1zm-216.9 22.5c-5.4.3-8.7 4.7-8.7 11.6-.5 10.5 7.3 24.1 17 29.8 9.8 5.5 17.6 1 17.2-10.1 0-14.5-14.1-31.8-25.5-31.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-shield.svg b/static/_icons/_ability/_symbol/dice-shield.svg
new file mode 100644
index 00000000..5f27d303
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M32 24C0 312 128 488 256 488S512 312 480 24C320 56 192 56 32 24zm223.9 58.8c4.5 0 9.4 1.1 12.8 2.9l115.9 67.1c7.4 4.1 7.4 10.9 0 15.2l-115.9 66.9c-7.2 4.3-18.5 4.3-25.7 0L126.8 168c-7.3-4.3-7.3-11.1 0-15.2L243 85.7c3.4-1.8 7.9-2.9 12.9-2.9zm-89 62.6c-21.6-.4-33.1 15-18.2 24.3 9.6 4.8 23.7 4.4 32.7-.8 8.8-5.3 9.5-13.7 1.5-19.4-4.3-2.5-10-4-16-4.1zm178.6.1c-20.8.4-31.3 15.5-16.3 24.5 9.6 4.9 23.9 4.6 33-.7 8.9-5.3 9.5-13.9 1.2-19.6-4.2-2.4-9.9-4-15.9-4.2h-2zm-89 0c-6.6-.1-13 1.5-17.7 4.2-10.2 5.6-10.4 15.1-.6 20.9 9.9 5.8 25.8 5.6 35.1-.6 15-9 4.6-24.3-16.8-24.5zm-141 41c1.5.1 3.4.5 5.6 1.6l111.5 64.5c7.2 4.1 12.9 14.2 12.9 22.5v119.7c0 8.3-5.7 11.7-12.9 7.6L121.2 338c-7.4-4.3-13.2-14.2-13.2-22.6V195.7c0-6.2 3-9.2 7.5-9.2zm281.3 0c4.2 0 7.2 3 7.2 9.2v119.7c0 8.4-6 18.3-13 22.6l-111.5 64.4c-7.2 4.1-12.9.7-12.9-7.6V275.1c0-8.3 5.7-18.4 12.9-22.5L391 188.1c2.1-1.1 4.2-1.5 5.8-1.6zm-185 65.5h-1.1c-5.3.4-8.5 4.8-8.5 11.6-.6 10.4 7.2 24.1 16.9 29.8 9.8 5.6 17.6 1.1 17.2-9.9.2-14.2-13.3-31.1-24.5-31.5zm130.9 21.8c-11.2.1-24.8 17.2-24.7 31.4.1 10.4 7.7 14.4 17.2 8.9 9.4-5.5 17-18.3 17.1-28.8 0-6.7-3.3-11.1-8.5-11.5h-1.1zm-216.9 22.5c-5.4.3-8.7 4.7-8.7 11.6-.5 10.5 7.3 24.1 17 29.8 9.8 5.5 17.6 1 17.2-10.1 0-14.5-14.1-31.8-25.5-31.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-six-faces-five.svg b/static/_icons/_ability/_symbol/dice-six-faces-five.svg
new file mode 100644
index 00000000..287d8416
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-six-faces-five.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm48.97 36.03A50 50 0 0 1 172 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zM256 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100zM123.47 340.03A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-six-faces-four.svg b/static/_icons/_ability/_symbol/dice-six-faces-four.svg
new file mode 100644
index 00000000..216a50d6
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-six-faces-four.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm48.97 36.03A50 50 0 0 1 172 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm-268 268A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-six-faces-one.svg b/static/_icons/_ability/_symbol/dice-six-faces-one.svg
new file mode 100644
index 00000000..651f9baa
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-six-faces-one.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zM256 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-six-faces-six.svg b/static/_icons/_ability/_symbol/dice-six-faces-six.svg
new file mode 100644
index 00000000..63b669d6
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-six-faces-six.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm48.97 36.03A50 50 0 0 1 172 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zM122 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100zm268 0a50 50 0 0 1 0 100 50 50 0 0 1 0-100zM123.47 340.03A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm268 0A50 50 0 0 1 440 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-six-faces-three.svg b/static/_icons/_ability/_symbol/dice-six-faces-three.svg
new file mode 100644
index 00000000..63cf91da
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-six-faces-three.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm316.97 36.03A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zM256 206a50 50 0 0 1 0 100 50 50 0 0 1 0-100zM123.47 340.03A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-six-faces-two.svg b/static/_icons/_ability/_symbol/dice-six-faces-two.svg
new file mode 100644
index 00000000..317cf1ef
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-six-faces-two.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M74.5 36A38.5 38.5 0 0 0 36 74.5v363A38.5 38.5 0 0 0 74.5 476h363a38.5 38.5 0 0 0 38.5-38.5v-363A38.5 38.5 0 0 0 437.5 36h-363zm316.97 36.03A50 50 0 0 1 440 122a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97zm-268 268A50 50 0 0 1 172 390a50 50 0 0 1-100 0 50 50 0 0 1 51.47-49.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/dice-target.svg b/static/_icons/_ability/_symbol/dice-target.svg
new file mode 100644
index 00000000..983270dc
--- /dev/null
+++ b/static/_icons/_ability/_symbol/dice-target.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M247 16v23.2C134.4 43.81 43.81 134.4 39.2 247H16v18h23.2c4.61 112.6 95.2 203.2 207.8 207.8V496h18v-23.2c112.6-4.6 203.2-95.2 207.8-207.8H496v-18h-23.2C468.2 134.4 377.6 43.81 265 39.2V16h-18zm0 41.21V80h18V57.21C367.8 61.78 450.2 144.2 454.8 247H432v18h22.8c-4.6 102.8-87 185.2-189.8 189.8V432h-18v22.8c-102.8-4.6-185.22-87-189.79-189.8H80v-18H57.21C61.78 144.2 144.2 61.78 247 57.21zm8.9 38.12c-5 0-9.5 1.1-12.9 2.9L126.8 165.3c-7.3 4.1-7.3 10.9 0 15.2L243 247.4c7.2 4.3 18.5 4.3 25.7 0l115.9-66.9c7.4-4.3 7.4-11.1 0-15.2L268.7 98.23c-3.4-1.8-8.3-2.9-12.8-2.9zm-89 62.57c6 .1 11.7 1.6 16 4.1 8 5.7 7.3 14.1-1.5 19.4-9 5.2-23.1 5.6-32.7.8-14.9-9.3-3.4-24.7 18.2-24.3zm178.6.1h2c6 .2 11.7 1.8 15.9 4.2 8.3 5.7 7.7 14.3-1.2 19.6-9.1 5.3-23.4 5.6-33 .7-15-9-4.5-24.1 16.3-24.5zm-89 0c21.4.2 31.8 15.5 16.8 24.5-9.3 6.2-25.2 6.4-35.1.6-9.8-5.8-9.6-15.3.6-20.9 4.7-2.7 11.1-4.3 17.7-4.2zm-141 41c-4.5 0-7.5 3-7.5 9.2v119.7c0 8.4 5.8 18.3 13.2 22.6l111.4 64.4c7.2 4.1 12.9.7 12.9-7.6V287.6c0-8.3-5.7-18.4-12.9-22.5l-111.5-64.5c-2.2-1.1-4.1-1.5-5.6-1.6zm281.3 0c-1.6.1-3.7.5-5.8 1.6l-111.5 64.5c-7.2 4.1-12.9 14.2-12.9 22.5v119.7c0 8.3 5.7 11.7 12.9 7.6L391 350.5c7-4.3 13-14.2 13-22.6V208.2c0-6.2-3-9.2-7.2-9.2zm-185 65.5c11.2.4 24.7 17.3 24.5 31.5.4 11-7.4 15.5-17.2 9.9-9.7-5.7-17.5-19.4-16.9-29.8 0-6.8 3.2-11.2 8.5-11.6h1.1zm130.9 21.8h1.1c5.2.4 8.5 4.8 8.5 11.5-.1 10.5-7.7 23.3-17.1 28.8-9.5 5.5-17.1 1.5-17.2-8.9-.1-14.2 13.5-31.3 24.7-31.4zm-216.9 22.5c11.4-.5 25.5 16.8 25.5 31.3.4 11.1-7.4 15.6-17.2 10.1-9.7-5.7-17.5-19.3-17-29.8 0-6.9 3.3-11.3 8.7-11.6z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/domino-mask.svg b/static/_icons/_ability/_symbol/domino-mask.svg
new file mode 100644
index 00000000..7f5f7ddf
--- /dev/null
+++ b/static/_icons/_ability/_symbol/domino-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M413.28 123.063C366.787 123.317 306.08 143 255.845 143c-56.868 0-124.174-23.704-171-19.156-23.414 2.274-40.642 10.16-52.28 30.937-11.64 20.78-17.23 56.337-10.97 113.19 8.578 77.917 73.225 118.973 128.656 99.405 11.513-4.064 30.972-25.256 49-46.125 9.014-10.434 17.993-20.687 27.03-28.72 9.04-8.03 18.23-14.624 29.564-14.624 11.335 0 20.493 6.594 29.53 14.625 9.04 8.033 18.018 18.286 27.032 28.72 18.028 20.87 37.487 42.06 49 46.125 55.45 19.574 118.93-21.672 128.688-99.563 7.137-56.986 1.753-92.528-9.938-113.28-11.69-20.754-29.346-28.665-53.22-30.907-2.983-.28-6.05-.46-9.186-.53-1.47-.035-2.97-.04-4.47-.032zM135.064 181.72c22.378-.2 44.746 10.556 67.125 30.78-43.4 54.67-108.488 37.044-130.188 0 21.022-20.738 42.04-30.594 63.063-30.78zm234.625 0c.7-.016 1.394-.007 2.093 0 21.023.186 42.073 10.042 63.095 30.78-21.7 37.044-86.82 54.67-130.22 0 21.68-19.592 43.354-30.312 65.033-30.78z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/double-ringed-orb.svg b/static/_icons/_ability/_symbol/double-ringed-orb.svg
new file mode 100644
index 00000000..0d63a84b
--- /dev/null
+++ b/static/_icons/_ability/_symbol/double-ringed-orb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M254.777 93.275c-58.482 0-105.695 47.21-105.695 105.696 0 58.487 47.213 105.698 105.695 105.698 58.482 0 105.696-47.21 105.696-105.697 0-58.48-47.214-105.695-105.696-105.695zm-140.714 63.59C-40.9 155.67-21.26 276.118 227.043 357.748c225.954 74.28 319.04 10.624 239.48-69.973-.413-.55-.84-1.097-1.277-1.64a414.615 414.615 0 0 1-14.95 11.88c4.487 5.513 7.138 11.084 7.704 16.01.713 6.2-.9 11.8-6.986 17.977-5.84 5.927-16.25 11.98-32.307 16.49-24.074 5.698-58.427 5.6-102.287-2.656l.105-.04c-2.153-.38-4.3-.787-6.445-1.198-21.875-4.418-46.004-10.805-72.318-19.455-69.962-23-118.054-49.706-146.063-74.936.246-.19.48-.38.728-.568-.27.166-.532.333-.8.5-53.315-48.08-33.682-90.78 46.558-92.2-8.46-.665-16.502-1.016-24.124-1.075zm281.425 0c-7.62.06-15.663.41-24.123 1.076 80.24 1.42 99.86 44.115 46.537 92.193-.264-.165-.513-.33-.78-.494.244.184.472.368.712.553-26.017 23.434-69.357 48.144-131.455 69.973 21.19 5.413 42.82 9.363 64.815 11.64 34.83-15.125 63.025-30.916 84.91-46.554.01.007.02.014.032.02.522-.386 1.03-.773 1.547-1.16 90.502-65.565 69.686-128.11-42.196-127.247zM44.54 286.27c-74.364 73.55-5.467 133.668 176.683 89.125-22.844-7.563-44.89-15.83-65.84-24.194-25.396 2.316-46.41 1.29-62.842-2.346-16.802-4.544-27.613-10.765-33.61-16.852-6.086-6.176-7.697-11.776-6.985-17.977.56-4.88 3.17-10.395 7.582-15.86a412.59 412.59 0 0 1-14.986-11.894z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/doubled.svg b/static/_icons/_ability/_symbol/doubled.svg
new file mode 100644
index 00000000..e4d011e6
--- /dev/null
+++ b/static/_icons/_ability/_symbol/doubled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M304.833 16c-261.69 0-320.71 387.657-62.343 387.657 86.284 0 86.955-129.375 0-129.375-139.947 0-99.134-202.896 62.343-258.282zm-30.938 92.343c-86.283 0-86.955 129.375 0 129.375 139.95 0 88.353 202.896-73.125 258.282 261.69 0 331.49-387.657 73.125-387.657z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/duration.svg b/static/_icons/_ability/_symbol/duration.svg
new file mode 100644
index 00000000..bca249a9
--- /dev/null
+++ b/static/_icons/_ability/_symbol/duration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 23c-3.7 0-7.4.1-11.1.27l.8 17.98c3.4-.16 6.8-.25 10.3-.25 118.8 0 215 96.2 215 215s-96.2 215-215 215c-89.6 0-166.35-54.7-198.65-132.6l27.63-8.3-48.43-34.3-19.05 54.5 22.55-6.7C74.68 428.8 158.4 489 256 489c128.6 0 233-104.4 233-233S384.6 23 256 23zm-30.8 2.04c-13.3 1.75-26.1 4.6-38.6 8.48l5.6 17.09c11.4-3.54 23.3-6.15 35.4-7.75l-2.4-17.82zm-57 15.12c-12.4 5.05-24.2 11.12-35.4 18.12l9.5 15.21c10.3-6.44 21.2-12.03 32.6-16.67l-6.7-16.66zM116.4 69.5a234.139 234.139 0 0 0-29.35 26.12l13.05 12.28c8.3-8.77 17.4-16.81 27-24.06l-4.8-6.57-5.9-7.77zm69.5 8.58-4.4 17.44 217 55.48 4.4-17.4-217-55.52zM74.07 110.5c-8.19 10.2-15.54 21.2-21.94 32.7l15.65 8.8c5.91-10.7 12.69-20.8 20.26-30.3l-13.97-11.2zm127.63 8.8c-3.9 26 2.8 55.2 14.2 79.2 6.4 13.4 14.2 25.2 21.9 33.8 4.2 4.7 8.4 8.3 12.2 10.9l-5.4 21.2c-4.6.4-10 1.6-16 3.7-10.9 3.8-23.4 10.4-35.4 19.1-21.6 15.6-41.4 37.9-50.4 62.6l167.5 42.9c3.9-26-2.8-55.2-14.2-79.2-6.4-13.4-14.2-25.2-21.9-33.8-4.2-4.7-8.4-8.3-12.2-10.9l5.4-21.2c4.5-.5 10-1.6 16-3.7 10.9-3.8 23.4-10.4 35.4-19.1 21.6-15.6 41.4-37.9 50.4-62.6l-167.5-42.9zM43.24 160.9c-5.33 12-9.7 24.4-13 37.3l17.48 4.2c3.03-11.8 7.04-23.2 11.95-34.2l-16.43-7.3zM26.2 217.5C24.11 230 23 242.9 23 256v.9l18-.2v-.7c0-12.1 1.02-24 2.95-35.6l-17.75-2.9zM113.5 361l-4.4 17.4 217 55.5 4.4-17.4-217-55.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/eagle-emblem.svg b/static/_icons/_ability/_symbol/eagle-emblem.svg
new file mode 100644
index 00000000..2af4353d
--- /dev/null
+++ b/static/_icons/_ability/_symbol/eagle-emblem.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M35.31 22.3C27.498 42.766 22.138 64.643 20 87.378l103.705 27.79-4.838 18.052-99.873-26.763c-.012.954-.035 1.905-.035 2.86a245.24 245.24 0 0 0 3.48 41.23h94.146v18.687H26.393a241.526 241.526 0 0 0 13.29 38.547l79.184-21.216 4.838 18.05-75.64 20.27a243.25 243.25 0 0 0 20.396 31.636l61.933-35.756 9.343 16.183-59.22 34.192a242.998 242.998 0 0 0 25.132 24.4l44.73-44.726 13.214 13.215-43.055 43.052a240.34 240.34 0 0 0 28.186 17.357l28.734-49.772 16.186 9.346-27.987 48.472a237.318 237.318 0 0 0 39.156 12.87c.99 3.566 2.08 7.103 3.25 10.593-12.36 9.993-24.163 20.49-35.12 31.728a33.73 33.73 0 0 0-14.75-3.373c-18.707 0-33.874 15.164-33.874 33.873 0 1.715.13 3.402.377 5.05 2.02-11.514 12.06-20.265 24.153-20.265 3.103 0 6.068.582 8.8 1.633-10.103 12.102-19.193 25.08-26.906 39.23 13.897-7.544 27.684-15.755 41.15-24.764a24.533 24.533 0 0 1 1.485 8.43c0 12.122-8.796 22.184-20.352 24.168a34.14 34.14 0 0 0 5.168.393c18.71 0 33.873-15.168 33.873-33.875 0-4.17-.757-8.16-2.134-11.848 10.033-7.467 19.823-15.43 29.26-23.984 2.978 5.705 6.203 11.034 9.65 15.818l-43.53 87.17c48.267 22.47 115.7 22.76 157.872 0l-42.13-84.36c3.722-4.81 7.21-10.25 10.426-16.14 8.577 7.617 17.428 14.77 26.483 21.508a33.778 33.778 0 0 0-2.13 11.836c0 18.707 15.165 33.873 33.874 33.873 1.758 0 3.486-.132 5.172-.39-11.56-1.983-20.355-12.045-20.355-24.168 0-2.964.525-5.805 1.49-8.435 13.464 9.006 27.247 17.223 41.143 24.767-7.71-14.148-16.78-27.136-26.877-39.238a24.457 24.457 0 0 1 8.775-1.623c12.09 0 22.13 8.75 24.15 20.262.246-1.647.377-3.332.377-5.047 0-18.71-15.166-33.873-33.875-33.873a33.755 33.755 0 0 0-14.72 3.355c-10.007-10.27-20.74-19.908-31.946-29.12a208.561 208.561 0 0 0 5.132-16.886 237.88 237.88 0 0 0 23.2-8.283l-28.497-49.356 16.186-9.346 29.34 50.816c9.98-5.11 19.555-10.9 28.672-17.308l-44.146-44.147 13.215-13.216 45.926 45.922a242.752 242.752 0 0 0 25.666-24.6l-60.95-35.19 9.343-16.182 63.748 36.804a242.85 242.85 0 0 0 20.87-32.07l-77.93-20.883 4.837-18.05 81.534 21.847a241.674 241.674 0 0 0 13.584-39.178h-92.836v-18.687h96.777a245.44 245.44 0 0 0 3.48-41.23c0-1.19-.025-2.376-.044-3.563L397.652 133.22l-4.836-18.054L499.09 86.69c-2.18-22.49-7.52-44.13-15.254-64.39h-.004c-26.517 41.51-83.592 73.934-154.764 87.02 12.67 15.603 20.442 35.52 20.442 57.233 0 31.196-15.723 58.718-39.604 75-21.27-12.407-42.907-28.878-45.52-43.814l17.653-3.81-2.235-10.352c15.67-11.335 33.936-9.138 53.433-.01l-18.302-40.414-41.903 9.04-2.846-13.188V139l-80.87 17.453 20.458 30.266c-8.595 19.678-2.717 41.68 5.45 58.56-27.204-15.57-45.592-44.998-45.592-78.73 0-21.713 7.772-41.63 20.44-57.232C118.904 96.234 61.83 63.81 35.312 22.3zm216.45 132.567c5.244-.056 9.98 3.573 11.13 8.9 1.312 6.085-2.557 12.084-8.644 13.397-6.087 1.313-12.085-2.556-13.398-8.643-1.314-6.085 2.556-12.086 8.642-13.4.76-.163 1.52-.245 2.27-.253z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/frisbee.svg b/static/_icons/_ability/_symbol/frisbee.svg
new file mode 100644
index 00000000..ea6dfc65
--- /dev/null
+++ b/static/_icons/_ability/_symbol/frisbee.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M385.5 30.38c-18.5.16-40.5 5.02-64.3 14.24C270.4 64.35 211.1 104 156.4 158.7c-54.8 54.7-94.46 114.1-114.12 164.9-9.89 25.4-14.7 48.6-14.28 67.9.43 19 5.8 33.8 16.05 44 10.26 10.3 24.96 15.6 44.06 16.1 19.19.4 42.39-4.4 67.89-14.3 50.8-19.7 110.1-59.4 164.8-114.1 54.7-54.7 94.4-114 114.1-164.9 9.9-25.4 14.7-48.6 14.3-67.79-.5-19.09-5.8-33.8-16.1-44.05-10.3-10.26-25-15.63-44-16.05-1.2-.03-2.4-.04-3.6-.03zm66.6 10.7c9.9 13.36 14.7 30.3 15.1 49.08.5 22.44-5 47.74-15.6 74.64-20.8 54-61.8 114.9-118 171.1-56.3 56.3-117.2 97.2-171.2 118.1-26.9 10.6-52.2 16-74.65 15.6-15.06-.3-28.93-3.5-40.72-9.8.8.9 1.62 1.8 2.47 2.6 25.95 26 72.3 29.4 128.3 10.7 56-18.6 120.3-59.2 178.2-117.2 57.9-57.9 98.5-122.1 117.1-178.1 18.8-56 15.3-102.35-10.7-128.3-3.1-3.14-6.6-5.94-10.3-8.42zM299.7 122.5c7.8 0 15.3 2.3 20.7 7.7 6.7 6.7 8.5 16.4 7.4 26.1-1 9.7-4.7 20.2-10.3 31.6-11.2 22.8-30.4 49-55.5 74.1-25.1 25.1-51.3 44.3-74.1 55.5-11.3 5.6-21.9 9.3-31.6 10.3-9.7 1.1-19.4-.7-26.1-7.4-6.7-6.7-8.5-16.4-7.4-26.1 1-9.7 4.7-20.3 10.3-31.7 11.2-22.8 30.4-48.9 55.5-74s51.3-44.4 74.1-55.6c11.4-5.6 21.9-9.2 31.6-10.2 1.8-.2 3.6-.3 5.4-.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/g-clef.svg b/static/_icons/_ability/_symbol/g-clef.svg
new file mode 100644
index 00000000..9822ac98
--- /dev/null
+++ b/static/_icons/_ability/_symbol/g-clef.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m238.75 138.492 18.147-18.829c.898-21.472 9.107-59.37 26.166-60.771 6.994.097 14.566 5.833 15.742 16.021 3.25 28.145-11.833 40.563-29.072 57.372l-31.408 32.586-.037-.038c-28.467 31.447-65.355 70.37-69.772 106.973-5.588 53.77 31.264 108.42 87.149 105.693l-3.178-18.066c-37.522-4.905-69.771-43.77-56.711-81.312 23.275-60.413 75.664-92.822 116.333-148.022 11.474-15.574 14.575-46.945 11.815-63.128-2.76-16.184-14.345-43.066-32.059-45.017-34.714-4.59-60.724 62.476-53.114 116.538zm25.667 75.896-15.508 15.248c.542 2.775 1.166 6.185 2.088 12.14-34.017 21.505-36.576 66.707-12.186 90.96 5.177 5.31 15.165-2.767 10.104-8.674-10.971-19.786-12.097-44.028 5.742-57.137 8.78 50.539 24.627 117.16 30.164 170.895.364 3.535-6.593 10.614-9.973 11.396 0-22.091-17.908-40-40-40-22.09 0-40 17.909-40 40 .017 20.193 15.266 36.007 35.123 39.668 42.008 7.745 78.659-17.935 72.76-53.16-8.793-59.062-21.986-121.007-30.857-175.32 12.066-1.253 28.875 5.169 36.428 12.847 8.575 9.297 12.95 22.35 11.982 32.787-.924 9.96-7.425 20.992-17.06 30.381l3.662 20.776c17.346-12.583 35.117-30.185 36.94-49.844 1.518-16.352-5.01-40.324-18.08-52.273-16.885-15.437-38.313-18.553-57.349-16.612-2.004-13.065-3.018-18.039-3.98-24.078z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/harp.svg b/static/_icons/_ability/_symbol/harp.svg
new file mode 100644
index 00000000..148f01ff
--- /dev/null
+++ b/static/_icons/_ability/_symbol/harp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m120.7 27.53-28.93 8.56C112.1 187.8 125.6 321.9 183.9 455H228c-40-140.6-84.2-280.4-107.3-427.47zm19.9 10.36c2.6 16.05 5.5 32.03 8.7 47.95 9.8 2.67 19.9 6.9 30.1 11.85 18.3 8.71 37.3 19.81 56.1 29.51 18.8 9.7 37.3 17.9 53.6 21.1 16.4 3.2 29.8 1.7 41.6-7 22.2-16.4 38.4-26.2 51.3-31.4 12.8-5.2 23.3-5.9 31.6-1.8 7.8 4 11.5 11.1 14.2 17.1l5.1-11.3c-7.3-12.9-18.1-21.38-32.9-23.26-16.2-2.05-38.4 4.06-66 25.66-14.4 11.3-33 9.7-50.6 2.8-17.5-6.9-35.7-18.9-54.2-31.64-18.6-12.74-37.3-26.21-54.8-35.98-12.3-6.86-23.8-11.66-33.8-13.59zm12.8 68.31c4.8 23 10 45.9 15.6 68.7v-62.2c-5.4-2.6-10.6-4.8-15.6-6.5zM404.8 124c-27 110.6-55.1 223.8-97.7 331h38.6c34.5-94.4 51-203.5 70.3-311.3-1.8-3.8-3-7.4-4.3-10.4-2.3-5.3-4.3-8.1-6.3-9.1-.2-.1-.4-.2-.6-.2zM199 128.1v160.4c5.9 21.1 11.9 42.1 18 63.1V137.8c-6.1-3.2-12.1-6.5-18-9.7zM361 142c-5.4 3.6-11.4 7.8-18 12.6V288h1c5.9-20.9 11.5-41.8 17-62.8V142zm-114 10.8V455h18V160.2c-6-2.2-12-4.7-18-7.4zm66 14.3c-5.9.7-11.9.8-18 .2v269.8c6.3-16.4 12.3-32.9 18-49.6V167.1zM163.9 473l-15.1 16h214.4l-15.1-16H163.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/health-potion.svg b/static/_icons/_ability/_symbol/health-potion.svg
new file mode 100644
index 00000000..0397ca64
--- /dev/null
+++ b/static/_icons/_ability/_symbol/health-potion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m192 17.65 16 34h96l16-34zm-9 53v51.95h32v22.2c-19.3-9-42.6-8.2-55-8.2-50.5 0-82.1 21.9-99.5 48-17.4 26.1-21.5 55.5-21.5 73 0 52.5 38.6 94.4 83.3 131C167 425.1 219 457.3 249.6 488l6.4 6.3 6.4-6.3c30.6-30.7 82.6-62.9 127.3-99.4 44.7-36.6 83.3-78.5 83.3-131 0-17.5-4.1-46.9-21.5-73s-49-48-99.5-48c-12.4 0-35.7-.8-55 8.2v-22.2h32V70.65zm18 18h110v15.95H201zm32 33.95h46v60.7l15.4-15.3c11.7-11.8 41.6-13.4 57.6-13.4 45.5 0 69.9 18.1 84.5 40 14.6 21.9 18.5 48.5 18.5 63 0 43.5-33.4 81.7-76.7 117-40.7 33.4-89 63.5-122.3 94.7-33.3-31.2-81.6-61.3-122.3-94.7-43.3-35.3-76.7-73.5-76.7-117 0-14.5 3.9-41.1 18.5-63s39-40 84.5-40c16 0 45.9 1.6 57.6 13.4l15.4 15.3zm-41 71c-64 0-80 48-80 80 0 64 80 96 144 144 64-48 144-80 144-144 0-32-16-80-80-80-32 0-48 0-64 48-16-48-32-48-64-48zm125.7 14.6c3.6-.1 5.9.3 5.8.6-16.5 7.3-33.9 24.4-44.6 41.7 0 0-3.2-17.7 9.9-31.9 7.4-8.1 21.1-10.3 28.9-10.4zM192 209.6c-24 21.5-41.3 58.2-47.2 90.4 0 0-19.5-23.7-7.7-53.4 9.8-24.5 50.1-36.5 54.9-37z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/land-mine.svg b/static/_icons/_ability/_symbol/land-mine.svg
new file mode 100644
index 00000000..7ebd6bdd
--- /dev/null
+++ b/static/_icons/_ability/_symbol/land-mine.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m223.688 25.72 21.218 166.78h30.75l21.22-166.78h-73.188zm19.468 184.093v34.25h34.25v-34.25h-34.25zm17.156 79.968c-1.442 0-2.884.04-4.312.064-1.226.02-2.44.057-3.656.094l-1.063.03c-1.3.045-2.587.093-3.874.157-1.203.06-2.403.11-3.594.188-.217.012-.438.017-.656.03-39.48 2.43-74.968 12.954-101.22 25.938-15 7.42-26.97 15.677-34.78 23.25-7.808 7.576-10.78 14.353-10.78 17.314 0 2.96 2.228 7.307 9.686 12.594 7.46 5.286 19.353 10.675 34.407 15.187 30.106 9.025 72.746 14.844 119.843 14.844 47.096 0 89.767-5.82 119.875-14.845 15.053-4.512 26.947-9.9 34.406-15.188 7.46-5.286 9.687-9.633 9.687-12.593 0-2.96-2.972-9.738-10.78-17.313-7.808-7.573-19.78-15.83-34.78-23.25-26.25-12.983-61.764-23.507-101.25-25.936-.22-.015-.437-.017-.658-.03-1.19-.078-2.39-.13-3.593-.19-1.288-.063-2.576-.11-3.876-.155-.136-.006-.27-.028-.406-.033-.23-.007-.458.007-.688 0-1.195-.035-2.388-.074-3.594-.093-1.438-.024-2.89-.063-4.344-.063zm0 18.69c26.39 0 50.255 4.41 66.688 11.03 8.216 3.31 14.52 7.202 18.313 10.813 3.79 3.61 4.906 6.395 4.906 8.78 0 2.386-1.116 5.172-4.908 8.782-1.58 1.506-3.62 3.053-6.03 4.594-4.953-15.806-38.422-28.033-79-28.033-40.555 0-73.986 12.21-78.97 28-2.396-1.533-4.426-3.064-6-4.562-3.79-3.61-4.906-6.396-4.906-8.78 0-2.387 1.115-5.172 4.906-8.783 3.792-3.61 10.097-7.502 18.313-10.812 16.433-6.62 40.297-11.03 66.688-11.03zM77.75 358.25c-22.095 13.71-34.938 30.062-34.938 47.625 0 48.377 97.367 87.594 217.47 87.594 120.1 0 217.468-39.218 217.468-87.595 0-17.54-12.807-33.864-34.844-47.563-.61 10.722-7.856 19.54-17.5 26.375-10.08 7.144-23.57 12.956-39.875 17.844-32.61 9.777-76.607 15.626-125.217 15.626s-92.607-5.85-125.22-15.625c-16.305-4.887-29.764-10.7-39.843-17.842-9.662-6.848-16.915-15.69-17.5-26.438z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/liberty-wing.svg b/static/_icons/_ability/_symbol/liberty-wing.svg
new file mode 100644
index 00000000..d2ff55dd
--- /dev/null
+++ b/static/_icons/_ability/_symbol/liberty-wing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M487 37.1C396.4 53.23 292 95.28 207.5 140 163 163.6 124 187.8 95.39 209.2 81.08 220 69.36 230 60.93 238.6c-8.43 8.7-13.38 16.3-14.65 20.3-9.04 28.7-3.42 57.7 1.73 84.7 9.55 50.4-3.23 88.9-22.98 126.3 25.24-5.7 45.36-19.8 57-47 8.47-19.8 9.13-37 11.43-57.6 2.3-20.6 6.45-44.2 22.44-73.2l.2-.4.2-.4c8.8-12.6 26.2-22.2 50-33.4 23.7-11.2 53.6-23 86-35.1 63.8-23.8 137.2-48.7 190.1-71.3 20-30.1 34-74.24 44.6-114.4zm-55 138.2c-51.7 21-116.6 43.1-173.5 64.3-32.2 12-61.8 23.7-84.6 34.5-22.6 10.7-38.5 21.6-42.6 27.2-6.8 12.3-11.1 23.2-14 33.3 83.4-6.5 195.3-31.8 271.3-66.6 27.4-29.7 36.9-59.7 43.4-92.7zm-58 118.8c-79 32.2-182 53.3-260.8 58.6-.9 5-1.5 9.8-2 14.6-.4 3.5-.7 7.1-1.1 10.6 72.4 7.5 136.3 4 206.2-6.5 32.6-22.5 49.8-49.6 57.7-77.3zm-78.4 98.2c-62.3 8.1-121.6 10.2-187.6 3.4-.7 4.5-1.6 9-2.7 13.6 35.9 19.2 98.1 25.8 140.7 24.6 30.2-12.4 41.5-24.8 49.6-41.6zM99.78 426.7c-1.15 2.1-3.14 6.7-4.21 8.9 14.03 20.2 48.73 32.2 88.43 39.3 21.2-8 28.3-15.5 36.5-23-39.7-1.1-86.7-7.7-120.7-25.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/magic-lamp.svg b/static/_icons/_ability/_symbol/magic-lamp.svg
new file mode 100644
index 00000000..4af917d1
--- /dev/null
+++ b/static/_icons/_ability/_symbol/magic-lamp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M203.72 87.938c-2.082.017-4.18.31-6.282.874-13.45 3.608-21.412 17.53-17.782 31.094 1.384 5.172 4.235 9.52 8 12.75-31.85 15.446-53.498 45.172-59.28 78.72l-22.532 7.593c-11.235-2.877-21.416-4.2-30.53-4.095-14.696.167-26.65 4.02-35.908 10.97-18.518 13.896-23.316 38.02-19.53 60.655 3.784 22.636 15.81 45.127 34.343 59.344 18.532 14.216 44.715 18.96 71.03 4.875 4.43-2.373 8.776-4.81 12.813-6.97 2.993 10.772 14.018 17.16 24.75 14.28 10.253-2.75 16.547-12.963 14.656-23.31 16.984 10.05 34.495 15.674 52.186 17.405-14.094 20.893-32.316 39.57-53.97 54.78 27.754 27.726 224.764-24.853 229.626-61.592-26.89-2.484-52.525-9.935-75.562-21.563 67.995-43.983 128.655-133.27 160.656-234.563l-42.47 14.344c-44.11 67.313-122.214 103.81-167.155 28a107.922 107.922 0 0 0-53-9.593c1.656-4.69 1.95-9.913.564-15.093-3.063-11.443-13.392-18.998-24.625-18.906zM76.062 233.53c5.11-.027 10.865.51 17.312 1.75 18.656 36.728 39.31 63.938 61.188 82.845-.767.113-1.546.263-2.313.47-.146.038-.293.08-.438.124-2.846.324-5.588 1.044-8.218 1.936-9.64 3.27-18.73 9.084-27.156 13.594-20.655 11.056-36.95 7.41-50.844-3.25-13.895-10.66-24.256-29.5-27.28-47.594-3.027-18.094.948-34.097 12.31-42.625 5.683-4.263 13.943-7.186 25.438-7.25z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/male.svg b/static/_icons/_ability/_symbol/male.svg
new file mode 100644
index 00000000..94904989
--- /dev/null
+++ b/static/_icons/_ability/_symbol/male.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M292.563 65.656v40h85.156l-81.658 82.656-12.937 13.125a136.397 136.397 0 0 0-29.406-16.75 136.28 136.28 0 0 0-52.064-10.343c-17.835 0-35.553 3.52-52.03 10.344a136.149 136.149 0 0 0-44.126 29.468 136.171 136.171 0 0 0-29.47 44.125c-6.825 16.48-10.373 34.228-10.374 52.064a136.12 136.12 0 0 0 10.344 52.03 136.223 136.223 0 0 0 29.5 44.126 136.187 136.187 0 0 0 44.125 29.47c16.478 6.824 34.195 10.374 52.03 10.374 17.837 0 35.586-3.55 52.064-10.375a136.178 136.178 0 0 0 44.124-29.47 136.203 136.203 0 0 0 29.47-44.125 136.128 136.128 0 0 0 10.342-52.03 136.25 136.25 0 0 0-10.344-52.064 136.342 136.342 0 0 0-16.03-28.436l13.218-13.406 81.844-82.875v85.875h40V65.656H292.562zm-90.907 148.688a96.629 96.629 0 0 1 36.75 7.312c11.58 4.797 22.263 11.95 31.125 20.813 8.863 8.86 16.017 19.545 20.814 31.124a96.629 96.629 0 0 1 7.312 36.75c0 12.533-2.517 25.14-7.312 36.72-4.796 11.577-11.92 22.292-20.78 31.155-8.864 8.862-19.578 16.014-31.158 20.81a96.608 96.608 0 0 1-36.75 7.314c-12.533 0-25.14-2.516-36.72-7.313a96.634 96.634 0 0 1-31.155-20.81 96.636 96.636 0 0 1-20.81-31.158c-4.798-11.58-7.314-24.185-7.314-36.718a96.607 96.607 0 0 1 7.313-36.75l.093-.22c4.796-11.494 11.91-22.13 20.718-30.937 8.808-8.805 19.444-15.892 30.94-20.687l.218-.094c11.58-4.795 24.185-7.313 36.718-7.312z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/melting-metal.svg b/static/_icons/_ability/_symbol/melting-metal.svg
new file mode 100644
index 00000000..c097e2db
--- /dev/null
+++ b/static/_icons/_ability/_symbol/melting-metal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M41 19v228h25.5c6.96 61.3 40.5 114.1 88.4 145.4l12.1 61.3-95.35-46.4a9.798 9.145 26.09 0 0-4.66-10.5 9.798 9.145 26.09 0 0-13.18 2.9 9.798 9.145 26.09 0 0 3.67 12.8 9.798 9.145 26.09 0 0 10.55-.1L144.5 496h216.6l33.4-22.3a8.636 11.2 54.07 0 0 .3 1.9 8.636 11.2 54.07 0 0 12.8 3.6 8.636 11.2 54.07 0 0 7.2-13 8.636 11.2 54.07 0 0-3.3-3.9l36.5-24.5-89.6 26.2 32.4-57.5-76.5 43.6 6.2-39.1c66.9-25.1 116.3-88.1 125-164H471V19h-30v155.4C420.1 88.03 345.3 23.87 256 23.87S91.93 87.95 71 174.2V19H41zm215 20.54c96.6 0 175.2 81.96 175.2 183.76 0 76.6-44.5 142-107.8 169.7l4.5-28.1L272 464c.1-47.1 1.5-159.3 34.6-204.7 40.7-16.6 68.4-52.4 68.4-93.3 0-56.3-52.6-103-119-103s-119 46.7-119 103c0 40.9 27.7 76.7 68.4 93.3 33.1 45.4 34.5 157.6 34.6 204.7l-51.8-128 .7 52.9-52.5-90 14.1 71.2c-42.3-33.6-69.66-86.7-69.66-146.8C80.84 121.5 159.4 39.54 256 39.54zM170.7 306.3a11.2 8.634 63.66 0 0-.9.1 11.2 8.634 63.66 0 0-5.7 11.9 11.2 8.634 63.66 0 0 11.6 9.4 11.2 8.634 63.66 0 0 5.8-12 11.2 8.634 63.66 0 0-10.8-9.4zm181 30.9a8.998 12.75 27.2 0 0-10.5 7.9 8.998 12.75 27.2 0 0 2.2 15.5 8.998 12.75 27.2 0 0 13.8-7.3 8.998 12.75 27.2 0 0-2.2-15.4 8.998 12.75 27.2 0 0-3.3-.7zM34.96 348.5a11.06 5.999 47.86 0 0-3.04 1 11.06 5.999 47.86 0 0 2.97 12.2 11.06 5.999 47.86 0 0 11.87 4.2 11.06 5.999 47.86 0 0-2.97-12.3 11.06 5.999 47.86 0 0-8.83-5.1zm363.14 26.3a6.561 14.62 40.07 0 0-12 7.8 6.561 14.62 40.07 0 0-4.4 15.4 6.561 14.62 40.07 0 0 14.5-7 6.561 14.62 40.07 0 0 4.4-15.4 6.561 14.62 40.07 0 0-2.5-.8zm81.2 59.7a7.525 16.82 50.66 0 0-15.5 7.8 7.525 16.82 50.66 0 0-5.7 15.7 7.525 16.82 50.66 0 0 18.7-7.1 7.525 16.82 50.66 0 0 5.7-15.7 7.525 16.82 50.66 0 0-3.2-.7zm-404.79 18a13.68 8.998 27.81 0 0-7.87 3.8 13.68 8.998 27.81 0 0 7.9 14.3 13.68 8.998 27.81 0 0 16.3-1.5 13.68 8.998 27.81 0 0-7.9-14.4 13.68 8.998 27.81 0 0-8.43-2.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/moon-orbit.svg b/static/_icons/_ability/_symbol/moon-orbit.svg
new file mode 100644
index 00000000..677ae965
--- /dev/null
+++ b/static/_icons/_ability/_symbol/moon-orbit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.6 62.21c-25.1 0-50.7 5.02-75.3 15.48C81.74 119.5 35.86 233.1 77.69 331.7c4.76 11.1 10.45 21.7 16.93 31.5-12.6.3-23.45-.5-31.98-2.4-13.22-2.9-19.93-7.8-22.27-13.3-2.33-5.6-1.25-13.8 5.87-25.4 1.65-2.6 3.62-5.4 5.86-8.4-2.1-7.4-3.76-14.7-5.05-22.2-6.62 7.1-12.1 14.2-16.37 21.1-8.74 14.1-12.66 28.9-7.11 42 5.54 13.1 18.9 20.5 35.17 24 13.66 3 30.13 3.6 48.96 2.2 53.2 63.4 143.6 87.6 223.9 53.4 80.3-34.1 125.6-115.7 117.1-198.1 14.1-12.6 25.2-24.9 32.5-36.8 8.9-14.2 12.7-29 7.2-42-5.6-13.1-18.9-20.5-35.2-24.1-7.9-1.7-16.9-2.7-26.5-2.8 4.5 6.1 8.6 12.4 12.4 19.1 3.7.4 7.1.9 10.1 1.6 13.3 2.8 20 7.8 22.3 13.3 2.4 5.5 1.3 13.8-5.9 25.3-4.5 7.4-11.4 15.8-20.4 24.7 1.5 7.3 2.7 14.5 3.4 21.7-2.6 2.3-5.5 4.7-8.2 7.1-4.7 3.8-9.5 7.7-14.7 11.5 11.2 32-4.4 67.8-35.9 81.2-26.3 11.2-56 3.6-74-16.8-9.1 4.3-18.3 8.4-27.8 12.5-62.5 26.4-122.4 43-169.2 48.1-3.8.4-7.5.7-11 1.1-4.7-5.6-8.95-11.4-13.12-17.6 6.82-.2 14.22-.7 22.02-1.6 44.4-4.9 103-20.9 164.2-46.9 8.4-3.5 16.7-7.3 24.8-11-.4-.7-.7-1.4-1-2.1-14-32.9 1.5-71.2 34.4-85.1 28.3-12.1 60.7-2.1 78 21.8 4-3.1 7.9-6.1 11.5-9.1 6.1-5 11.6-10 16.6-14.8-2.6-11.5-6.2-22.9-11-34.1-31.4-73.9-103.1-118.22-178.6-118.09zM364.3 229.6c-5.9 0-12.1 1.2-18.1 3.7-23.7 10.1-34.8 37.3-24.6 61.2 10 23.8 37.3 34.7 61.1 24.6 23.7-10 34.8-37.3 24.6-61.1-7.5-17.9-24.7-28.5-43-28.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/nested-eclipses.svg b/static/_icons/_ability/_symbol/nested-eclipses.svg
new file mode 100644
index 00000000..540ddb3e
--- /dev/null
+++ b/static/_icons/_ability/_symbol/nested-eclipses.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.225 46.588a47.63 47.63 0 0 0-47.772 47.77 47.633 47.633 0 0 0 47.772 47.775 47.632 47.632 0 0 0 47.77-47.774 47.628 47.628 0 0 0-47.77-47.772zm-69.67 5.285c-32.036 21.7-53.203 57.98-53.203 99.02 0 66.417 54.854 120.078 122.668 120.078 67.813 0 123.035-53.66 123.035-120.077 0-41.04-21.17-77.32-53.205-99.02 17.492 17.676 28.082 41.888 28.082 68.72 0 54.042-43.87 97.915-97.91 97.915-54.042 0-97.913-43.873-97.913-97.916 0-26.83 10.958-51.043 28.45-68.72h-.005zm-63.36 4.666C61.015 97.982 20.59 167.265 20.59 245.64c0 126.838 104.755 229.32 234.26 229.32 129.504 0 234.964-102.482 234.964-229.32 0-78.374-40.426-147.657-101.605-189.1 33.403 33.756 53.624 79.993 53.624 131.237 0 103.206-83.78 186.987-186.984 186.987-103.204 0-186.987-83.78-186.987-186.987 0-51.244 20.928-97.48 54.332-131.238z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/orbital-rays.svg b/static/_icons/_ability/_symbol/orbital-rays.svg
new file mode 100644
index 00000000..942e000c
--- /dev/null
+++ b/static/_icons/_ability/_symbol/orbital-rays.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M312.598 17.617c-11.352.495-22.753 1.162-34.504 3.447-7.382 1.438-14.92 3.48-22.397 5.63h-.002l.582 102.386a170.75 170.75 0 0 0-12.398 4.123 105.017 105.017 0 0 1 39.405 11.068 106.657 106.657 0 0 1 10.05-.602c12.852-.14 24.76 2.234 34.995 7.217 21.838 10.63 33.073 30.607 34.164 56.81 1.09 26.204-8.932 58.226-31.22 88.748-22.29 30.523-52.376 53.464-82.374 65.647-29.997 12.182-59.435 13.43-81.273 2.8-21.838-10.63-33.07-30.608-34.162-56.812-.404-9.69.718-20.176 3.412-31.088a105.194 105.194 0 0 1-7.164-38.248c0-.232.008-.463.01-.695-5.353 10.91-9.423 21.863-12.19 32.66l-93.67-3.203c-3.03 11.91-5.398 23.594-6.728 35.37-.858 7.613-1.447 15.52-1.567 23.003l97.918-30.83a120.9 120.9 0 0 0-.244 13.875c.448 10.748 2.51 21.08 6.133 30.592l-95.55 46.945h-.003c2.456 8.035 5.49 16.144 9.094 23.692 3.755 7.87 7.882 15.017 12.637 21.844l83.783-73.775c6.932 9.733 16.053 17.892 27.305 23.784L84.57 470.47c13.744 9.173 29.25 15.45 45.707 20.024l45.454-101.21c13.947 3.576 28.93 3.992 44.2 1.74l-29.576 106.328c18.565-.79 37.977-3.862 57.455-9.463l-6.248-101.753c5-1.514 9.993-3.28 14.954-5.293 10.273-4.172 20.45-9.406 30.332-15.606l25.332 95.213c9.426-5.314 18.51-11.05 27.785-17.528a368.923 368.923 0 0 0 26.44-20.348l-60.594-70.726a223.478 223.478 0 0 0 37.09-37.24l75.883 53.853c13.686-17.525 25.127-36.118 34.947-55.083l-97.558-17.61c9.69-15.447 16.76-31.22 21.176-46.722l101.742-1.578c3.09-12.056 5.713-24.31 7.058-36.23.858-7.61 1.67-15.05 1.79-22.532l-106.094 38.4c.848-6.886 1.147-13.656.873-20.25-.345-8.29-1.656-16.326-3.895-23.935l101.086-54.33a165.75 165.75 0 0 0-9.316-24.162c-3.603-7.55-7.888-14.786-12.412-21.375h-.002l-86.9 81.843c-7.2-12.837-17.724-23.557-31.462-30.873l79.122-89.908c-5.416-3.616-11.37-6.953-17.247-9.86-9.134-4.516-19.145-7.464-29.235-10.247l-50.832 102.857c-10.007-2.73-20.56-3.822-31.39-3.437-4.118.146-8.275.507-12.458 1.068L312.6 17.617zm-121.827 36.9a352.536 352.536 0 0 0-27.784 17.532c-9.086 6.347-17.527 12.9-25.886 19.96l42.332 57.045a105.41 105.41 0 0 1 28.162-12.41L190.77 54.52zM84.72 146.126c-5.277 6.76-10.507 13.635-15.226 20.652l-.553.387c-7.44 11.105-13.74 22.86-19.72 34.432l81.932 19.754a104.986 104.986 0 0 1 9.463-29.33L84.72 146.125zm150.856 9.193c-46.207 0-83.424 37.217-83.424 83.424 0 46.207 37.217 83.424 83.424 83.424 46.207 0 83.424-37.217 83.424-83.424 0-46.207-37.217-83.424-83.424-83.424z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/polar-star.svg b/static/_icons/_ability/_symbol/polar-star.svg
new file mode 100644
index 00000000..fafb2282
--- /dev/null
+++ b/static/_icons/_ability/_symbol/polar-star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.9 19.77C241.5 109.6 229.4 163 196.2 196.2c-33.2 33.2-86.6 45.3-176.43 59.7C109.6 270.3 163 282.4 196.2 315.7c33.2 33.2 45.3 86.6 59.7 176.5 14.4-89.9 26.5-143.3 59.7-176.6 33.3-33.2 86.7-45.3 176.6-59.7-89.9-14.4-143.3-26.5-176.5-59.7-33.3-33.2-45.4-86.6-59.8-176.43zM423 89c-45.8 33.1-81 56.9-112.4 70.2 5.1 9.4 11 17.4 17.8 24.2 6.8 6.8 14.8 12.7 24.3 17.9 13.4-31.4 37.2-66.6 70.3-112.3zm-333.94.06C122.2 134.8 145.9 169.9 159.2 201.2c9.4-5.1 17.4-11 24.2-17.8 6.8-6.8 12.7-14.8 17.8-24.2-31.3-13.3-66.4-37-112.14-70.14zM352.7 310.5c-9.5 5.2-17.5 11.1-24.3 17.9-6.8 6.8-12.7 14.8-17.9 24.3C342 366 377.2 389.8 423 423c-33.2-45.8-57-81-70.3-112.5zm-193.5.1C145.9 342 122.1 377.2 89 423c45.7-33.1 80.9-56.9 112.3-70.3-5.2-9.5-11.1-17.5-17.9-24.3-6.8-6.8-14.8-12.7-24.2-17.8z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/ribbon.svg b/static/_icons/_ability/_symbol/ribbon.svg
new file mode 100644
index 00000000..7ddab129
--- /dev/null
+++ b/static/_icons/_ability/_symbol/ribbon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M249.938 18.53c-2.33-.006-4.65.036-7 .157v-.03c-18.72.97-37.354 4.835-53.782 11.5-5.895 9.737-7.003 18.63-3.22 31.655 2.543 8.748 7.697 19.177 15.69 31.594 9.697-6.747 25.94-10.26 42.468-10.5 17.92-.258 36.14 3.24 46.53 10.594 7.038-11.94 11.675-22.136 14.063-30.844C308.813 47.62 307.18 37.386 300 26l.47-.28c-13.496-4.296-28.377-6.64-43.533-7.032a188.48 188.48 0 0 0-7-.157zM324 36.157c2.096 9.886 1.745 20.437-1.28 31.47-4.985 18.167-16.32 38.006-34 62.655l-32.283 47.564-76.843 114.187-.313-.217-67.155 98.875 24.53-1.157-16.936 47.876 45.53-26.28-29.78 65.437 36.218-22.782 7 37.376 52.28-110.094-.405-.187L295.5 244.687l4.313-9 47.062-98.437C370.188 88.162 354.93 54.713 324 36.156zM165.72 42.78c-30.64 21.468-44.758 56.84-18.564 104.97L195 235.688l42.72-63.47-38-47.25c-2.668-3.34-4.54-6.492-5.69-9.437C180.9 97.14 172.23 81.58 168 67.03c-2.433-8.37-3.142-16.496-2.28-24.25zm142.75 218.126-46.595 97.72 71.594 131.937 4.842-36.157 37.907 7.406-25.47-47.375 58.875 24.782-32.656-57.408 23.655-5.718-92.156-115.188z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/rolling-dices.svg b/static/_icons/_ability/_symbol/rolling-dices.svg
new file mode 100644
index 00000000..c2ffb0a9
--- /dev/null
+++ b/static/_icons/_ability/_symbol/rolling-dices.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M138.798 35.342 28.73 114.268l95.777 29.095 111.305-87.09-97.014-20.93zm112.986 31.082-118.047 89.96 51.07 131.102 8.534-7.455 4.23-15.708a18.338 13.102 76.863 0 1-9.08-20.45 18.338 13.102 76.863 0 1 10.997-13.727 18.338 13.102 76.863 0 1 3.62.53 18.338 13.102 76.863 0 1 3.113 1.544l7.94-29.48a9 9 0 0 1 .353-1.04 9 9 0 0 1 .058-.128 9 9 0 0 1 .32-.685 9 9 0 0 1 .09-.153 9 9 0 0 1 .37-.625 9 9 0 0 1 .534-.723 9 9 0 0 1 .066-.074 9 9 0 0 1 .54-.594 9 9 0 0 1 .65-.593 9 9 0 0 1 .004-.002 9 9 0 0 1 .46-.342 9 9 0 0 1 .266-.197 9 9 0 0 1 .502-.3 9 9 0 0 1 .27-.157 9 9 0 0 1 .44-.208 9 9 0 0 1 .38-.178 9 9 0 0 1 .437-.152 9 9 0 0 1 .41-.143 9 9 0 0 1 .404-.1 9 9 0 0 1 .47-.114 9 9 0 0 1 .51-.07 9 9 0 0 1 .37-.05 9 9 0 0 1 .01 0 9 9 0 0 1 .01-.003l33.624-2.873a18.338 13.102 76.863 0 1 10.326-9.777 18.338 13.102 76.863 0 1 3.622.53 18.338 13.102 76.863 0 1 8.527 7.327l13.043-1.113L251.785 66.42zM137.25 74.03a9.8 19.77 77.916 0 1 12.798 8.734 9.8 19.77 77.916 0 1-21.938 11.998 9.8 19.77 77.916 0 1-16.57-8.602 9.8 19.77 77.916 0 1 21.938-12 9.8 19.77 77.916 0 1 3.77-.13zm100.228 23.517a18.338 13.102 76.863 0 1 .002 0 18.338 13.102 76.863 0 1 3.62.53 18.338 13.102 76.863 0 1 12.112 21.94 18.338 13.102 76.863 0 1-14.617 13.196 18.338 13.102 76.863 0 1-12.114-21.94 18.338 13.102 76.863 0 1 10.998-13.726zM24.22 131.71l46.992 114.124 94.236 40.38-45.988-125.57-95.24-28.935zm147.886 17.43a18.338 13.102 76.863 0 1 3.622.528 18.338 13.102 76.863 0 1 12.11 21.94 18.338 13.102 76.863 0 1-14.616 13.197 18.338 13.102 76.863 0 1-12.112-21.94 18.338 13.102 76.863 0 1 10.996-13.726zm-75.123 13.016a19.454 9.134 59.254 0 1 16.955 15.078 19.454 9.134 59.254 0 1-.425 19.485A19.454 9.134 59.254 0 1 95.6 181.78a19.454 9.134 59.254 0 1 .424-19.48 19.454 9.134 59.254 0 1 .96-.144zm263.393 40.21-112.102 9.577 113.762 79.926 113.598-16.956-115.258-72.55zM70.82 212.022A19.454 9.134 59.254 0 1 87.777 227.1a19.454 9.134 59.254 0 1-.425 19.484 19.454 9.134 59.254 0 1-17.913-14.938 19.454 9.134 59.254 0 1 .425-19.482 19.454 9.134 59.254 0 1 .96-.14zm157.378 7.813L186.66 374.023l115.616 99.454 47.147-168.47-121.225-85.17zm126.987 11.168a21.76 8.898 15.267 0 1 19.693 4.783 21.76 8.898 15.267 0 1 7.607 14.244 21.76 8.898 15.267 0 1-28.886-3.182 21.76 8.898 15.267 0 1-7.61-14.244 21.76 8.898 15.267 0 1 9.195-1.6zM487.78 291.3 366.9 309.343l-46.823 167.316 116.297-31.77L487.78 291.3zm-181.808 10.8a25.834 15.573 84.277 0 1 4.238.943 25.834 15.573 84.277 0 1 12.873 31.72 25.834 15.573 84.277 0 1-18.105 17.893 25.834 15.573 84.277 0 1-12.874-31.72 25.834 15.573 84.277 0 1 13.868-18.836zm154.086 11.636a13.237 21.96 28.62 0 1 7.673 4.13 13.237 21.96 28.62 0 1-6.176 28.435 13.237 21.96 28.62 0 1-21.287 3.878 13.237 21.96 28.62 0 1 6.175-28.434 13.237 21.96 28.62 0 1 13.616-8.008zM391.362 324.4a13.237 21.96 28.62 0 1 7.672 4.13 13.237 21.96 28.62 0 1-6.176 28.435 13.237 21.96 28.62 0 1-21.287 3.877 13.237 21.96 28.62 0 1 6.177-28.434 13.237 21.96 28.62 0 1 13.615-8.008zm-173.996 13.305a25.834 15.573 84.277 0 1 4.24.945 25.834 15.573 84.277 0 1 12.872 31.72 25.834 15.573 84.277 0 1-18.106 17.894 25.834 15.573 84.277 0 1-12.873-31.72 25.834 15.573 84.277 0 1 13.866-18.84zm212.278 60.87a13.237 21.96 28.62 0 1 7.67 4.13 13.237 21.96 28.62 0 1-6.174 28.434 13.237 21.96 28.62 0 1-21.287 3.876 13.237 21.96 28.62 0 1 6.175-28.434 13.237 21.96 28.62 0 1 13.616-8.008zm-70.332 19.488a13.237 21.96 28.62 0 1 7.67 4.132 13.237 21.96 28.62 0 1-6.174 28.434 13.237 21.96 28.62 0 1-21.287 3.874 13.237 21.96 28.62 0 1 6.176-28.434 13.237 21.96 28.62 0 1 13.616-8.007z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/rose.svg b/static/_icons/_ability/_symbol/rose.svg
new file mode 100644
index 00000000..b78daa34
--- /dev/null
+++ b/static/_icons/_ability/_symbol/rose.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M281.31 21.217 239.997 127.13l76.01 103.673 97.135-7.532-3.1-79.284-78.2-12.468-1.61 41.535 29.11 7.568-.766-14.1 18.662-1.012 2.15 39.635-68.41-17.788 3.004-77.61 68.65 10.946-2.456-86.044-98.863-13.43zM243.63 66.39l-73.702 39.917L195.885 243.7l141.306 80.704 154.447-80.037-11.252-142.205-79.617-.988.642 22.512 26.705 4.257 4.403 112.57-125.436 9.727-88.227-120.338 24.774-63.51zm-93.107 88.706c-2.992-.017-6.01.004-9.054.06-9.456.174-19.425.853-29.44 1.594 9.427 13.32 18.694 26.165 30.157 35.938 7.894 6.73 16.835 12.308 28.075 16.056l-10.1-53.453c-3.184-.11-6.396-.176-9.64-.194zm25.57 84.51c-14.278 5.27-27.16 13.25-39.437 23.55-17.875 14.995-34.273 35.22-50.625 58.47 56.9 2.6 100.16-6.41 147.316-35.01l-54.223-30.966-3.03-16.045zm270.854 48.968-50.64 26.244c27.874 20.83 54.865 27.206 90.162 28.557-8.76-21.213-22.617-39.484-39.523-54.8zm-189.853 4.895c-14.566 9.75-28.84 17.8-43.156 24.342.37 10.843 2.813 19.703 6.968 26.47-29.49 37.69-61.714 72.017-96.78 102.843-17.584-1.215-24.577-19.137-17.845-37.344-22.758 18.074-30.427 42.166-20 68.376a715.948 715.948 0 0 1-20.78 15.344h45.344c25.65-20.11 49.915-41.82 72.844-65.094 29.485 9.192 54.05-1.51 69.625-27.97-14.975 8.052-31.217 5.627-37.438-6.686a803.424 803.424 0 0 0 28.156-34.125c7.25 1.21 15.586.57 24.72-2.03-8.863-17.974-13.326-39.19-11.656-64.126zm18.133 17.065c1.205 25.213 10.463 44.01 24.648 60.12 17.914 20.346 44.73 35.942 73.625 50.814 7.79-33.575 9.555-62.664-2.05-93.77l-34.692 17.978-61.53-35.143z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/rupee.svg b/static/_icons/_ability/_symbol/rupee.svg
new file mode 100644
index 00000000..72728695
--- /dev/null
+++ b/static/_icons/_ability/_symbol/rupee.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M247 25.076 107.053 130.004l64.996 32.486L247 106.297v-81.22zm18 0v81.22l74.95 56.194 65-32.488L265 25.076zm9.277 22.307 36.63 26.437c-25.125-4.207-29.74 9.2-37.348 28.8l.717-55.237zm-37.79 3.926-.274 33.362c-22.052 1.182-56.787 14.423-107.893 43.99L236.488 51.31zM256 122.044l-74 55.48v156.948l74 55.482 74-55.482V177.527l-74-55.482zm4.215 17.67c-37.503 33.84-60.642 164.833-63.65 199.094l-.35-151.095 64-48zM99 146.1v219.8l65-32.488V178.588L99 146.1zm314 0-65 32.488v154.824l65 32.488V146.1zm-301.352 23.31 40.473 20.83c-46.28 38.757-30.79 122.693-41.876 162.572l1.404-183.402zm60.4 180.1-64.995 32.486L247 486.924v-81.22l-74.95-56.194zm167.903 0L265 405.703v81.22l139.947-104.927-64.996-32.486zm-169.415 17.172c-19.594 16.282-16.745 24.365 4.477 54.412l-44.246-38.018 39.77-16.394z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/shield-disabled.svg b/static/_icons/_ability/_symbol/shield-disabled.svg
new file mode 100644
index 00000000..aded971f
--- /dev/null
+++ b/static/_icons/_ability/_symbol/shield-disabled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M486 68.125 68.125 486 26 443.875 443.875 26zM256 21.608S185.506 66.896 81.857 66.896V292.55a148.335 148.335 0 0 0 11.67 57.573L380.845 62.806C311.185 51.67 256 21.608 256 21.608zm0 468.784s174.143-65.928 174.143-197.84V150.206L152.618 427.732C200.838 469.51 256 490.392 256 490.392z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/shiny-entrance.svg b/static/_icons/_ability/_symbol/shiny-entrance.svg
new file mode 100644
index 00000000..f60c6750
--- /dev/null
+++ b/static/_icons/_ability/_symbol/shiny-entrance.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m242.32 17.94.002.02v-.02h-.002zm.002.02c-9.777 267.328-40.363 268.207-134.91 84.388 63.917 197.254 43.578 238.65-92.275 152.175 93.67 96.082 122.627 146.377-2.336 133.153 63.004 22.264 124.558 45.33 170.675 94.094 4.806-229.74 138.285-224.31 143.375-.426 35.077-44.42 115.908-71.653 173.023-93.668-162.9 3.97-73.26-108.208-10.514-188.436-141.634 124.216-177.264 99.476-113.883-137.314-82.824 219.86-120.17 213.04-133.155-43.965z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/shut-rose.svg b/static/_icons/_ability/_symbol/shut-rose.svg
new file mode 100644
index 00000000..b68c4bfb
--- /dev/null
+++ b/static/_icons/_ability/_symbol/shut-rose.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M428.023 17.34c-86.043.487-145.782 76.552-110.164 148.85-56.288 31.21-86.892 73.135-108.387 115.72-20.313-3.606-33.09-19.605-43.448-39.65-6.768 44.82 6.93 72.25 15.243 104.312-17.695 43.045-35.085 81.538-71.348 107.38h-.004c-26.502 18.903-51.61 14.403-63.865.622-6.127-6.89-9.442-16.272-7.98-28.256 1.45-11.88 7.926-26.43 22.246-42.21 11.966-10.25 21.688-14.278 28.155-14.956 6.552-.687 9.855 1.215 12.337 4.328 4.963 6.227 5.048 20.812-7.48 31.327l12.013 14.316c19.1-16.03 22.676-41.486 10.082-57.29-6.297-7.9-17.036-12.51-28.9-11.267-11.865 1.245-24.787 7.552-38.885 19.76l-.41.356-.366.4c-16.57 18.11-25.296 36.22-27.34 52.973-2.045 16.753 2.876 32.044 12.566 42.94 19.38 21.79 56.223 25.322 88.68 2.175l.002-.002a160.697 160.697 0 0 0 16.992-13.967c29.887-7.727 58.963-10.74 92.3-37.436-21.192.977-40.373-1.702-53.542-15.13 13.405-25.286 23.348-52.815 34.78-79.87 10.99-26.018 23.196-51.737 40.874-75.557 27.692.905 54.74 2.943 90.135-12.492-21.436-4.717-39.77-12.685-48.723-30.168 10.31-8.11 21.865-15.774 34.94-22.893 63.25 43.663 173.666-17.293 159.263-111.2L453 78.142l24.03-41.7-46.327 9.394 11.002-27.94c-4.625-.4-9.19-.58-13.682-.554zM177.857 47.475C99.85 123.65 112.403 221.302 190.082 226.61c99.86 6.987 1.396-107.536-12.225-179.135zm110.387 218.523c-18.154-.118-31.885 10.172-38.142 40.106-15.92 76.243 102.983 90.25 179.15 12.224-48.11-8.213-103.834-52.09-141.008-52.33z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/spill.svg b/static/_icons/_ability/_symbol/spill.svg
new file mode 100644
index 00000000..9e7c8f74
--- /dev/null
+++ b/static/_icons/_ability/_symbol/spill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M221.406 138.375c-43.425 0-69.357 30.627-6.375 30.625 43.426-.002 69.36-30.627 6.376-30.625zm136.688 17.438c-43.147 0-74.466 9.892-82.938 27.468-83.55-2.5-152.875 26.708-134.906 46.72 2.342 2.607.3 5.57-5.25 5.844-138.955 6.827-164.758 69.375-30.97 88.75 5.662.822 6.792 4.934 4.095 7.594-32.494 32.043 38.39 55.5 143.656 55.5 107.528 0 165.73-18.51 147.19-48.5-4.092-6.618-2.013-11.31 7-12.25 142.247-14.794 106.15-95.06-16.345-102.782-24.96-1.57-19.04-13.427-9.938-14.594 102.117-13.078 39.97-53.75-21.593-53.75zm93.625 203.28c-35.633.655-53.357 24.423 1.436 28.22 40.297 2.792 64.353-23.978 5.906-28.032a84.334 84.334 0 0 0-7.343-.186zm-344.345 40.313c-68.37.002-99.163 49.348 0 49.344 68.37-.002 99.163-49.348 0-49.344z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/starfall.svg b/static/_icons/_ability/_symbol/starfall.svg
new file mode 100644
index 00000000..9f54ee00
--- /dev/null
+++ b/static/_icons/_ability/_symbol/starfall.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M264.8 14.86 243.5 130.7 133.8 98.86l64.3 83.04C8.624 261.7 55.82 556 383 486.7 274.4 499.9 66.42 382 240.6 284.1l7.2 73.1L305 258l114.4 26.8-74.7-85.2 80.3-69.2-111 5.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/steelwing-emblem.svg b/static/_icons/_ability/_symbol/steelwing-emblem.svg
new file mode 100644
index 00000000..7ff73371
--- /dev/null
+++ b/static/_icons/_ability/_symbol/steelwing-emblem.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m20.156 87-.875 47.688 145.564 48.718 8.937 2.97-3.06 8.905c-14.857 43.4-17.932 93.212-3.564 138.47 4.103 17.557 11.6 33.377 21.53 46.344l-9.405 10.656-5.468 6.188 5.47 6.156 69.53 78.97 7.032 7.936 7-7.938 69.562-78.968 5.438-6.156-5.438-6.188-9.562-10.875c9.85-12.927 17.294-28.664 21.375-46.125 14.367-45.258 11.292-95.07-3.564-138.47l-3.062-8.905 8.937-2.97 145.564-48.718L491.22 87l-201.25 80.188c15.49 20.604 25.624 54.782 25.624 93.468 0 34.853-8.233 66.033-21.188 86.938l-31.562-35.813-7-7.936-7.03 7.937-31.72 36c-13.023-20.904-21.313-52.165-21.313-87.124 0-38.664 10.118-72.83 25.595-93.437L20.155 87zM493.5 153.906 361.156 198.22a262.464 262.464 0 0 1 6.406 25.968l123.532-12.375c1.643-19.07 2.36-38.526 2.406-57.907zm-474.156.5c.057 19.218.776 38.496 2.406 57.406l122.063 12.22a262.652 262.652 0 0 1 6.375-25.813L19.344 154.405zm4.406 76.406c2.137 17.497 5.116 34.54 9.22 50.75l106.124-9.843c.017-9.794.65-19.534 1.812-29.19L23.75 230.813zm465.344 0L370.47 242.656a248.036 248.036 0 0 1 1.78 28.906l107.625 10c4.102-16.208 7.082-33.257 9.22-50.75zm-117.53 59.438a225.335 225.335 0 0 1-2.72 21.625l87.97 30.156c7.116-12.94 13.018-27.084 17.842-42.186l-103.094-9.594zm-231.783.156-101.593 9.438c4.824 15.1 10.73 29.25 17.844 42.187l86.564-29.655a224.62 224.62 0 0 1-2.813-21.97zm225 39.844a204.492 204.492 0 0 1-7.342 22.28L412.28 394c13.427-9.784 24.838-21.827 34.47-35.688l-81.97-28.062zm-218.092.47-80.595 27.59c9.63 13.86 21.04 25.904 34.47 35.688l53.686-40.625a205.002 205.002 0 0 1-7.563-22.656zm108.25 2.405v66.563H310.5l-54.688 62.03-57.093-64.78 56.218-63.813z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/sundial.svg b/static/_icons/_ability/_symbol/sundial.svg
new file mode 100644
index 00000000..8b5f5849
--- /dev/null
+++ b/static/_icons/_ability/_symbol/sundial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m227.02 45.682-2.01 150.17a193.007 193.007 0 0 0-31.334 9.423l-34.46-54.44 10.48 65.913a195.292 195.292 0 0 0-31.362 22.043l-85.387-73.01 60.914 98.26a194.793 194.793 0 0 0-26.725 43.73l-37.89-9.674 32.146 24.228a193.34 193.34 0 0 0-10.036 46.89l-52.426 1.497 151.115 58.343c-5.937-13.1-9.244-27.634-9.244-42.922 0-57.535 46.842-104.378 104.378-104.378 57.535 0 104.377 46.843 104.377 104.38 0 14.662-3.05 28.628-8.535 41.304-.054.597-.1 1.188-.16 1.79l138.406-59.548-40.56-3.928a193.154 193.154 0 0 0-16.17-59.607l29.804-34.71-41.317 13.08a195.764 195.764 0 0 0-32.937-40.292l58.926-131.802-93.026 106.238a193.489 193.489 0 0 0-42.377-18.64l2.535-65.838-24.547 60.54a195.367 195.367 0 0 0-34.405-3.04c-2.4 0-4.785.06-7.164.146L227.02 45.682zm38.173 164.685c9.258 0 18.345.717 27.213 2.09l-19.693 48.572-10.74-50.622c1.072-.02 2.143-.04 3.22-.04zm-40.44 4.664-.515 38.53-20.392-32.218a174.6 174.6 0 0 1 20.908-6.31zm96.112 4.312a174.717 174.717 0 0 1 30.63 13.578l-32.585 37.213 1.955-50.79zm-148.03 17.15 5.85 36.803-26.048-22.274a176.35 176.35 0 0 1 20.197-14.528zm217.186 25.766a176.319 176.319 0 0 1 22.673 28.056l-41.02 12.987 18.348-41.042zm-265.73 18.605 26.808 43.24-45.643-11.654a175.599 175.599 0 0 1 18.836-31.587zM265.18 300.44c-47.435 0-85.69 38.256-85.69 85.69 0 47.436 38.255 85.688 85.69 85.688 47.435 0 85.687-38.252 85.687-85.687 0-47.434-38.252-85.69-85.687-85.69zm163.808 21.484a174.997 174.997 0 0 1 10.707 41.984l-43.17-4.18 32.463-37.804zM97.11 334.176l43.853 33.054-50.805 1.45a175.414 175.414 0 0 1 6.953-34.504z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/torc.svg b/static/_icons/_ability/_symbol/torc.svg
new file mode 100644
index 00000000..563b1f48
--- /dev/null
+++ b/static/_icons/_ability/_symbol/torc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M247.1 23.09c-57.5 2.19-109.7 25.26-149.2 61.83l20.6 20.58-12.8 12.8-20.58-20.6C46.64 139.3 23.1 194.8 23.1 255.9c0 22.6 3.24 44.4 9.25 65.1-3.97 7.1-6.25 15.2-6.25 23.9 0 27 22.04 49 49 49 27 0 49-22 49-49 0-25-18.8-45.7-43.06-48.6-1.92-10.2-2.94-20.7-2.94-31.4 0-93.2 75.8-169 169-169s169 75.8 169 169-75.8 169-169 169c-10.7 0-21.2-1-31.4-2.9-2.9-24.2-23.6-43.1-48.6-43.1-27 0-49 22-49 49s22 49 49 49c8.7 0 16.8-2.3 23.9-6.3 20.6 6 42.5 9.3 65.1 9.3 61 0 116.6-23.5 158.2-62l-20.6-20.6 12.8-12.8 20.6 20.6c36.6-39.5 59.6-91.7 61.8-149.2h-40.8v-18h40.8c-.9-23.4-5.2-45.9-12.5-67L436.1 200l-8-16.2 41.7-20.8c-10.6-24.2-25.1-46.2-42.7-65.3l-36.6 36.6-12.8-12.8 36.6-36.57c-19.1-17.67-41.1-32.17-65.2-42.7l-20.9 41.7-16.2-8.06 20.1-40.25c-21.1-7.3-43.6-11.64-67-12.53V63.9h-18z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/tree-roots.svg b/static/_icons/_ability/_symbol/tree-roots.svg
new file mode 100644
index 00000000..c1c48d93
--- /dev/null
+++ b/static/_icons/_ability/_symbol/tree-roots.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M167.2 20.48 147 189.6s-44.4 17.3-60.77 33.7c-32.1 32.1-65.98 119.2-65.98 119.2l51.51-53.6L107.2 323l-18.73-51.5 6.76-7s51.27-44.3 80.97-39.7c36 5.6 78.8 75.7 78.8 75.7l-18.2 80.9c-54.1 26.1-106.6 55.2-159.39 83.9l79.29-22.2 12 47.9 15-50.3s38-30.2 60.8-31.5c20.8-1.1 58.4 22.5 58.4 22.5l-37.4 40.5 78.7-32.2-62.3-45c30.7-52.3 39.3-96.6 28.5-156.7 14-11.5 38.3-23.6 59.9-13.5l-18.2 30.5 46.7 59.4-15.4-53 10.3-21.2c26.2 23.9 42.8 62.7 44.2 96.8 1.5 34.9-48.4 92.9-48.4 92.9 63.4-39.8 78.2-86.1 67.7-133.4 11.4 1.2 23.2-1.9 36.3-4.2-30.9-10.9-39.8-21.6-51.4-37.3-7.7-15.6-17.4-31-28.2-46.2l1.9-16.9-30.4-22.9-37.5 9-25.5-157.82z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/trefoil-lily.svg b/static/_icons/_ability/_symbol/trefoil-lily.svg
new file mode 100644
index 00000000..e6bbff79
--- /dev/null
+++ b/static/_icons/_ability/_symbol/trefoil-lily.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M182.53 33.656c-30.402.31-60.104 25.67-57.655 56.844.895 11.393 4.828 22.11 11.25 31.813-11.477-10.676-22.322-21.627-32.063-32.75-17.582-3.415-44.45-10.41-67.343-10.594-5.284-.044-10.333.28-15.032 1.093 8.113 21.98 32.22 49.906 49.406 66.593 14.43 3.102 29.39 7.236 44.53 12.03-11.786-.796-23.196 1.168-33.655 6.158-36.125 17.236-37.668 75.304-2.657 96.97-8.335-22.065-.02-42.745 21.03-55.095 18.118-10.63 35.77-12.13 56.25-5.314.042.014.084.018.126.03 39.56 18.11 68.427 68.613 63.655 111.783-4.417 20.81-14.545 35.165-32.625 45.436-21.22 12.055-43.278 8.875-58.22-9.375 1.258 41.154 52.324 68.886 85.314 46.22 9.407-6.464 16.747-15.2 21.937-25.594-3.503 15.264-7.585 30.112-12.343 44.094 7.18 20.842 16.69 56.55 32.97 76.094 14.978-18.017 27.11-52.866 32.968-76.094-4.53-14.05-8.427-29.083-11.844-44.594 5.205 10.612 12.602 19.528 22.158 26.094 32.99 22.666 84.055-5.066 85.312-46.22-14.94 18.25-37.03 21.43-58.25 9.376-18.163-10.318-28.28-24.754-32.656-45.72-4.602-42.977 24.02-93.105 63.312-111.31 20.756-7.057 38.606-5.644 56.906 5.093 21.05 12.35 29.335 33.03 21 55.093 35.01-21.665 33.468-79.733-2.656-96.97-10.46-4.99-21.87-6.953-33.656-6.155 15.138-4.798 30.1-8.93 44.53-12.032 17.188-16.687 41.325-44.614 49.44-66.594-25.065-4.326-60.737 5.298-82.376 9.5-9.743 11.126-20.575 22.073-32.063 32.75 6.42-9.7 10.325-20.42 11.22-31.812 3.134-39.903-46.42-70.27-82.688-50.78 23.276 3.812 37.048 21.343 37.22 45.75.14 20.18-6.826 35.777-21.688 49.686l-.063-.094c-35.54 26.866-95.927 26.86-131.467 0l-.063.094c-14.85-13.905-21.797-29.515-21.656-49.687.17-24.407 13.943-41.938 37.22-45.75-7.935-4.264-16.52-6.15-25.033-6.064zm159.626 120.906c-3.087 2.5-6.178 4.986-9.28 7.438l-74.97 41.688-76.937-43.094c-2.473-1.963-4.916-3.976-7.376-5.97 15.658 8.235 34.41 14.076 55.22 16.814 18.92 4.05 38.854 4.058 57.78.03 20.955-2.73 39.822-8.607 55.562-16.905zM162 175.032c7.344 2.814 14.655 5.7 21.875 8.624l64.438 36.094v86.53a989.874 989.874 0 0 1-2.282 15c-.62-15.827-4.128-32.85-10.624-50.155l-.03-.094c-6.063-22.786-18.308-44.236-34.845-61.06-11.844-14.57-24.957-26.348-38.53-34.94zm191.625 0c-13.267 8.397-26.085 19.85-37.72 33.968-.027.034-.064.06-.092.094-17.162 17.136-29.812 39.22-35.907 62.687-6.318 17.008-9.77 33.708-10.406 49.283a1206.45 1206.45 0 0 1-2.5-16.438V220.03l67.03-37.28c6.48-2.61 13.022-5.2 19.595-7.72z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/viking-shield.svg b/static/_icons/_ability/_symbol/viking-shield.svg
new file mode 100644
index 00000000..de881e05
--- /dev/null
+++ b/static/_icons/_ability/_symbol/viking-shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 25C128.316 25 25 128.316 25 256s103.316 231 231 231 231-103.316 231-231S383.684 25 256 25zm0 14c119.74 0 217 97.26 217 217s-97.26 217-217 217S39 375.74 39 256 136.26 39 256 39zm0 18c-7.78 0-15.453.46-23 1.326v111.697A88.703 88.703 0 0 1 256 167c7.95 0 15.66 1.055 23 3.023V58.326A201.666 201.666 0 0 0 256 57zm-41 4.227a197.589 197.589 0 0 0-46 15.716V215h8.035A89.699 89.699 0 0 1 215 177.035V61.227zm82 0v115.808A89.699 89.699 0 0 1 334.965 215H343V76.943a197.589 197.589 0 0 0-46-15.716zM151 86.885a199.685 199.685 0 0 0-46 39.422V236.45c3.02-1.604 5.64-2.958 7.686-4.18 2.893-1.726 4.5-3.113 5.224-4.1.726-.987 1.09-1.67 1.09-4.17v-9h32V86.885zm210 0V215h32v9c0 2.5.39 3.29 1.123 4.338.734 1.048 2.253 2.43 4.87 4.174 2.117 1.412 4.885 3.023 8.007 5.017V126.306a199.66 199.66 0 0 0-46-39.422zm-274 63.93C67.99 181.326 57 217.362 57 256c0 38.64 10.99 74.676 30 105.184V264.66c-.652-.463-1.307-.936-1.97-1.426L75.26 256l9.773-7.234c.663-.49 1.318-.963 1.97-1.426v-96.524zm338 0v101.458l3.73 3.727-3.73 3.727v101.457c19.01-30.508 30-66.545 30-105.184 0-38.64-10.99-74.676-30-105.184zM256 185c-39.32 0-71 31.68-71 71s31.68 71 71 71 71-31.68 71-71-31.68-71-71-71zm0 30c22.537 0 41 18.463 41 41s-18.463 41-41 41-41-18.463-41-41 18.463-41 41-41zm-120.596 18c-.756 2.114-1.724 4.108-2.99 5.83-2.95 4.013-6.696 6.626-10.504 8.9-4.574 2.73-9.558 5.203-14.924 8.27 5.365 3.067 10.35 5.54 14.924 8.27 3.808 2.274 7.554 4.887 10.504 8.9 1.266 1.722 2.234 3.716 2.99 5.83h34.62A88.618 88.618 0 0 1 167 256c0-7.95 1.055-15.66 3.023-23h-34.62zM256 233c-12.81 0-23 10.19-23 23s10.19 23 23 23 23-10.19 23-23-10.19-23-23-23zm85.977 0A88.703 88.703 0 0 1 345 256c0 7.95-1.055 15.66-3.023 23h34.593c.723-2.052 1.635-3.988 2.807-5.662 2.766-3.952 6.247-6.57 9.63-8.826 4.285-2.856 8.634-5.36 13.007-8.512-4.373-3.152-8.722-5.656-13.006-8.512-3.384-2.256-6.865-4.874-9.63-8.826-1.173-1.674-2.085-3.61-2.808-5.662h-34.593zM407 274.47c-3.122 1.995-5.89 3.606-8.008 5.018-2.616 1.744-4.135 3.126-4.87 4.174C393.39 284.712 393 285.5 393 288v9h-32v128.115a199.685 199.685 0 0 0 46-39.422V274.47zm-302 1.08v110.143a199.66 199.66 0 0 0 46 39.422V297h-32v-9c0-2.5-.364-3.183-1.09-4.17-.725-.987-2.33-2.374-5.224-4.1-2.046-1.222-4.667-2.576-7.686-4.18zM169 297v138.057a197.589 197.589 0 0 0 46 15.716V334.965A89.699 89.699 0 0 1 177.035 297H169zm165.965 0A89.699 89.699 0 0 1 297 334.965v115.808a197.589 197.589 0 0 0 46-15.716V297h-8.035zM233 341.977v111.697c7.547.866 15.22 1.326 23 1.326 7.78 0 15.453-.46 23-1.326V341.977A88.703 88.703 0 0 1 256 345c-7.95 0-15.66-1.055-23-3.023z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/water-recycling.svg b/static/_icons/_ability/_symbol/water-recycling.svg
new file mode 100644
index 00000000..28561542
--- /dev/null
+++ b/static/_icons/_ability/_symbol/water-recycling.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M254.9 19.34c-72 .4-143 33.5-189.17 95.86-69.798 94.4-59.097 223.3 19.9 305l-37.2 50.4 151.17-22.7L177 296.7 133.8 355c-44.07-54.4-47.67-133.6-4.1-192.5 30.6-41.5 77.8-63.46 125.7-63.66 16.4-.1 32.8 2.26 48.7 7.36l-7-46.46c-23.9-4.9-47.9-5-71-1-59.3 7.3-114 39.9-148.17 91.16C113.6 84.04 181.7 44.04 254 42.24c1.6-.1 3.3-.1 5-.1 14.8 0 29.7 1.6 44.6 4.9l48.6-7.3c-31.2-13.9-64.3-20.6-97.3-20.4zm212.9 22.1-151.2 22.6 22.6 151.06 41.2-55.5c42.2 54.2 45.1 132 2.2 190-40.3 54.4-108.9 75.3-170.2 57.6l6.5 43.6c28.7 5.5 58.2 4.4 86.2-3.1 37.4-6 73.3-22.1 103.1-47.7-49.1 54.6-122.6 77.5-191.7 64.3l-55.8 8.3c99 43.7 218.4 14.8 285.5-75.9 69.1-93.4 59.4-220.7-17.5-302.46l39.1-52.8zM256 144s-78.3 99-63.9 152c7 25.7 37.3 47.8 63.9 47.8 26.7 0 56.9-22.1 63.9-47.8 14.4-53-63.9-152-63.9-152z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/wolf-trap.svg b/static/_icons/_ability/_symbol/wolf-trap.svg
new file mode 100644
index 00000000..9a9861c7
--- /dev/null
+++ b/static/_icons/_ability/_symbol/wolf-trap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m106 113.773-32.963 74.375a99.166 99.166 0 0 0-3.12.704c-5.293 1.296-9.95 2.918-14.044 4.79l-8.266-53.435-25.037 87.277a108.288 108.288 0 0 0-3.338 11.635l-.26.905.07-.04c-3.632 16.665-3.56 35.726 3.597 55.818 3.306 14.022 15.515 30.355 40.24 48.135 29.193 20.992 75.05 42.954 138.495 63.86a39.272 39.272 0 0 1-.393-5.486c0-12.21 5.637-23.185 14.432-30.447l-4.07-42.73-31.54 37.69a620.827 620.827 0 0 1-27.896-11.3l-2.95-78.177-33.57 60.615c-9.068-4.85-17.496-9.773-25.294-14.75l-4.627-90.04-28.932 65.057c-7.485-6.607-13.957-13.243-19.45-19.86-4.244-20.016-.412-38.063 6.145-52.42l4.483-2.602c15.852-5.496 35.514-7.645 58.504-6.182 32.732 2.084 72.51 11.748 118.152 30.803.098-13.092 7.704-24.51 18.692-30.142l-5.597-52.59-30.14 42.78c-9.68-3.6-19.025-6.73-28.012-9.41l-4.26-68.73-32.567 59.774c-11.784-2.163-22.712-3.436-32.716-3.91l-3.77-71.97zm323.08 29.936-15.973 70.28c-9.928-1.244-20.884-1.876-32.837-1.777l-19.58-66.443-18.075 68.964c-9.342 1.12-19.127 2.635-29.316 4.55l-19.015-44.84-16.422 45.742c8.9 6.183 14.768 16.47 14.768 28.04 0 2.407-.257 4.758-.74 7.03 47.224-10.57 87.28-13.166 119.37-9.7 22.9 2.47 41.908 7.938 56.592 16.05l3.978 3.332c4.016 15.265 4.72 33.704-2.873 52.707-6.54 5.582-14.047 11.016-22.547 16.25l-17.43-69.034-19.89 87.94c-8.51 3.565-17.626 6.972-27.356 10.198l-19.724-61.576-19.274 72.674a622.45 622.45 0 0 1-29.326 6.37l-22.605-45.43-14.87 49.995a39.091 39.091 0 0 1 4.02 17.283 39.03 39.03 0 0 1-3.476 16.107c70.416-9.85 122.176-24.18 155.893-40.565 27.394-13.31 42.205-27.326 47.852-40.582 10.472-18.58 13.79-37.348 13.048-54.388l.063.053-.102-.942a107.887 107.887 0 0 0-1.308-12.035l-9.81-90.26-17.243 51.245c-3.714-2.54-8.03-4.93-13.023-7.11-.96-.417-1.95-.822-2.954-1.222L429.08 143.71zm-170.584 89.07c-8.642 0-15.443 6.802-15.443 15.445 0 3.53 1.15 6.74 3.084 9.318a161.247 161.247 0 0 1 23.101 1.844c2.91-2.793 4.705-6.733 4.705-11.162 0-8.64-6.806-15.446-15.447-15.446zm-12.652 43.468c-1.02-.003-2.032.005-3.033.025-12.016.244-22.59 2.134-30.23 4.98-5.094 1.9-8.82 4.23-10.85 6.22-2.03 1.99-2.375 3.155-2.375 4.37 0 2.426 3.81 8.437 14.258 13.844 10.448 5.408 25.905 9.714 42.992 10.954 17.088 1.24 32.486-.854 42.674-4.65 5.093-1.898 8.82-4.23 10.85-6.22 2.03-1.987 2.374-3.154 2.374-4.368 0-2.43-3.81-8.44-14.258-13.847-10.447-5.408-25.904-9.712-42.992-10.95a134.712 134.712 0 0 0-9.41-.357zm-5.688 57.215-2.96 29.51c1.08-.09 2.17-.15 3.273-.15 5.382 0 10.524 1.1 15.214 3.077l3.05-30.406a159.916 159.916 0 0 1-18.578-2.032zm.313 48.05c-11.6 0-20.798 9.2-20.798 20.8 0 11.595 9.2 20.796 20.797 20.796 11.594 0 20.798-9.203 20.798-20.798 0-11.595-9.202-20.798-20.8-20.798z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/wood-stick.svg b/static/_icons/_ability/_symbol/wood-stick.svg
new file mode 100644
index 00000000..a76c1e62
--- /dev/null
+++ b/static/_icons/_ability/_symbol/wood-stick.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m328.5 32.86-11.2 2.46-24.6 110.98-62.1-48.6c-1.5 2.4-2.6 4.6-3 6.8-.9 3.7-.5 7.6 2.3 13l58.2 47.6-12.9 93.5-2.4 2.2c-57.5 53.5-130.5 102.9-198.52 153 9.71 2.4 18.73 6.9 25.22 14.3 7 7.8 9.9 18.3 10.1 28.7C226.7 353.3 375.8 223.5 473 114.2c2.2-8.5.9-10.9-1.3-13.4-1.4-1.73-4.4-3.63-7.7-5.83C427.2 131.7 362.8 196.9 316.8 229.4l-16.9 12zM292.4 374.9c-25.4 6.8-50 9.3-74.5 10.1-6.9 6.1-13.7 12.2-20.5 18.3 17.2 0 34.6-.5 52.4-2.4 11.8 23 33.9 36.3 53 49.5l10.2-14.8c-17.4-12-33.9-22.6-43.8-37.3 9.1-1.5 18.4-3.5 27.8-6zm-234.53 55c-8.44.2-15.64 3-18.86 6.9-1.35 1.7-1.73 5 .1 10.3 1.83 5.4 5.79 11.6 9.31 15.4 4.78 5.2 12.43 11.1 19.57 14.2 7.13 3 12.6 3.2 16.09.9 3.67-2.4 6.98-9.2 7.44-17.2.46-8.1-2.11-16.5-5.48-20.3-4.41-5-14.5-9.4-24.48-10.1-1.25-.1-2.48-.1-3.68-.1z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_symbol/yin-yang.svg b/static/_icons/_ability/_symbol/yin-yang.svg
new file mode 100644
index 00000000..06304722
--- /dev/null
+++ b/static/_icons/_ability/_symbol/yin-yang.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 23C127.424 23 23 127.424 23 256s104.424 233 233 233 233-104.424 233-233S384.576 23 256 23zm-6.094 18.09C128.036 47.807 130.066 256 256 256c125.215 0 127.935 205.872 8.168 214.83-2.71.1-5.432.17-8.168.17-118.848 0-215-96.152-215-215 0-116.81 92.883-211.69 208.906-214.91zM256 103c22.537 0 41 18.463 41 41s-18.463 41-41 41-41-18.463-41-41 18.463-41 41-41zm0 224c-22.537 0-41 18.463-41 41s18.463 41 41 41 41-18.463 41-41-18.463-41-41-41z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_water/big-wave.svg b/static/_icons/_ability/_water/big-wave.svg
new file mode 100644
index 00000000..ec55dfeb
--- /dev/null
+++ b/static/_icons/_ability/_water/big-wave.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M319.406 75.156c-50.542.49-104.39 20.876-150.094 72.844-10.232 9.65-19.88 19.59-29.187 29.313-20.516 21.433-39.694 41.877-60.22 56.468-18.484 13.142-37.73 21.617-61 22.75v89.876c53.93-32.793 59.934-67.832 115.595-136.312 6.38-6.524 12.727-13.19 19.125-19.875 9.96-10.407 20.016-20.803 30.563-30.657 46.422-36.83 92.022-27.93 107.218 2.5 4.6-49.27 57.958-30.564 66.813 18.875 6.91-33.696 20.327-44.354 34.03-31.625-28.136 49.585-26.61 110.87-8.406 164.937 20.51 60.915 61.743 114.13 110.344 133.75v-20.563c-38.34-19.194-74.662-65.71-92.657-119.156-15.937-47.336-17.777-99.07 2.75-141.655 8.492 16.92 16.342 43.406 21.94 79.53 17.992-84.587 54.762-72.463 56.624-10.593 42.998-66.287-52.197-161.48-163.438-160.406zm-35.656 95.78C194.225 181.69 66.158 359.648 43.625 494.97h91.25c1.02-133.954 71.114-282.045 148.875-324.033zm32.406 13.69c-76.76 49.056-114.574 208.732-109.812 310.343h78.437c-41.213-80.74-23.207-252.666 31.376-310.345zm21.875 26.218c-34.686 82.23-25.705 191.077 25.158 284.125h78c-75.605-53.774-120.09-190.455-103.157-284.126z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/_water/waterfall.svg b/static/_icons/_ability/_water/waterfall.svg
new file mode 100644
index 00000000..07c53a8a
--- /dev/null
+++ b/static/_icons/_ability/_water/waterfall.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M432.3 28.66c-13.4 0-26.6 6.43-40.5 19.98-4 3.94-7.8 8.06-11.6 12.12 3.7 5.59 6.1 12.64 7.7 18.46 5.6-6.15 11.1-12.41 16.5-17.76 10.1-9.98 19.1-15.59 26.9-14.66 16.1 1.9 23.7 6.55 29.6 12.81 5.9 6.26 10.1 15.12 16.4 25.18l15.2-9.58c-5.5-8.82-10-18.95-18.5-28.01-14.6-12.13-28.3-18.55-41.7-18.54zM113.7 45.63c-53.35.23-77.7 17.56-95.66 35.88l12.86 12.6c17.42-17.77 35.03-31.75 90-30.32l34.5 32.52h15c-.2-8.94-7.8-17.4-12.6-22.5-14.9-16.14-24.1-28.22-44.1-28.18zm146.7 9.79c-10.1 0-20.2.21-29.6.57 3.8 8.38 5.6 17.38 6.6 24.88 1 11.64-15.6 12.34-17.8 2.42-1.2-8.61-4.6-19.79-8.9-26.23-15.2 1-28.9 2.35-40.3 3.73 7.3 8.95 18 21.8 18 31.02.5 89.69-2.8 180.09-9.7 270.89 1.6-1.7 3.2-3.4 4.9-4.9 8.4-7.6 18.4-13.7 30-13h.1c2.6.2 5.1.7 7.5 1.4.2-16.6.6-30.9.1-44.4 5.3 5.6 10.7 10 18-.6.7 17.6-.1 35.5-.3 56.9 1.1 1.1 2 2.2 3 3.3 7.4 8.6 13.4 19.2 18.4 29.6 1.8 3.8 3.4 7.5 4.9 11.1 1.3-56.5.5-112.9-2.2-169.4 8.6 11.3 13.3 7 18-.8 2.7 56.6 3.5 113.3 2.2 169.9 11.4-11.3 25.1-22.9 41.6-22.6 4.1.1 7.8 1 11.2 2.5l.1-23.9c7.9 8.9 13.4 6.9 18 0L354 396c3.5 3.6 6.9 7.9 9.8 11.7 3.9-2 8.9-4.4 14.9-7l-5.7-73.9c6 5.5 12 10 18-1.4l5.3 68.5c6.6-2.3 13.5-4.2 20.4-5-11.2-93.4-25.2-192-44.3-296.39h.1c-1.4-7.39-3.3-14.6-5.9-19.56-2.5-4.95-5-7.23-8.7-8.07-18.2-4.12-37.7-6.65-57.3-8.04 8.6 17.14 8.4 34.97 8.6 49.66 1.1 10.8-17.2 17-18 .2-.3-18.71.2-35.46-12.7-50.98-6-.2-12-.29-18.1-.3zm90.8 31.52C362.6 130.7 371.8 206.4 378.3 251c-.9 17.6-14.2 13.4-17.8 2.6-6.5-45-16.1-121.1-26.7-162.09 9.9 7.7 16 6.9 17.4-4.57zM224 107c3.5 55 2.4 109.1-.7 162.5.2 11-15.3 14.1-18-1 3.1-53 4.2-106.3.7-160.3 8.9 13.3 14.2 9.3 18-1.2zm51.5 22.5c3.2 27.5 4.3 42.9 3.9 59.9-6.4 9.5-12.3 7.9-18-.4.4-16-.7-30.2-3.7-57.5 7 8.6 12.8 6.6 17.8-2zm52.3 27.2c3.4 50.7 4.3 90 5.6 154.8-5 5.4-9.8 11.7-18 .4-1.3-64.8-2.2-103.7-5.6-154 7.5 9.3 13.1 6 18-1.2zm-246 180.8c-10.73-.3-16.16 18.9-13.38 29.3 3.68 13.8 34.78 24.8 34.78 24.8s-2-53.6-21.4-54.1zm47.4-.4c-.8.6-1.3 1.4-1.7 2.3-4.2 9.9 22.6 23.1 22.6 23.1s5.9-17.4.6-22.8c-4.7-4.8-16.6-7-21.5-2.6zm319.5-3.8c-.5 0-.9 0-1.3.1-11.7 2.2-13.9 23.8-8.3 34.9 0 0 18.8-9.1 19.8-18 .8-6.3-4-16.8-10.2-17zm29.8 20.5c-20.3 1.1-16.8 58.6-16.8 58.6s27.7-10.5 31.2-22.9c3.5-12.3-1.6-36.4-14.4-35.7zm-282.8 17.3c-6.5 5.9-13 14.6-18.7 23.5-11.2 17.8-18.8 36-18.8 36l-3.6 8.7c-22-11.1-36.9-16.8-57.82-17.6-13.41-.5-24.76 11.5-27.43 22.4-1.41 6.4 0 14.3 9.09 25.6 120.56 14.8 310.86 21.1 411.06.4 3.5-16.4-2.3-27.7-13-37.9-11.7-11.3-29.8-19.6-45-24.5-7.3-2.4-24.9 1.2-39.4 6.9-14.6 5.8-26.4 12.5-26.4 12.5l-7.4 4.2-4.6-7s-4.8-7.3-11.3-14.4c-6.6-7.1-15.5-12.7-17.7-12.7-6.6-.1-20.7 9.2-31.5 20.3-10.7 11-18.6 22.2-18.6 22.2l-11 15.5-5.1-18.3s-5.3-19.1-14.4-38.1c-4.5-9.6-10-19-15.7-25.7-12.7-13.4-20.3-13-32.7-2zM35.58 384c-4.27-.1-7.98 1.2-9.85 4.5-8.27 14.4 30.78 39.3 30.78 39.3s6.88-26.5-.99-35.3c-4.19-4.6-12.83-8.4-19.94-8.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/adrela.svg b/static/_icons/_ability/adrela.svg
new file mode 100644
index 00000000..d9b26af0
--- /dev/null
+++ b/static/_icons/_ability/adrela.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m156.758 79.496-21.91 58.547-58.444 21.87 58.512 21.898 21.842 58.364 21.846-58.375 58.478-21.886-58.408-21.857-21.916-58.56zm200.078 0-21.91 58.547-58.444 21.87 58.512 21.9 21.842 58.36 21.848-58.374 58.476-21.886-58.408-21.857-21.916-58.56zM18.31 146.64c11.045 82.053 38.61 154.35 76.462 208.13l28.454-18.157-9.784 41.906c11.358 13.222 22.843 24.945 35.567 34.92l29.338-32.825 5.336 55.175c14.397 7.164 29.938 11.868 45.34 14.666l27.564-42.602 27.564 42.605c15.327-2.782 30.14-8.25 44.457-15.365l6.224-57.272 31.12 33.526c11.965-9.67 23.065-20.945 33.788-33.526l-8.892-41.205 27.564 17.46c37.164-53.263 64.38-124.482 75.574-205.336-15.07 38.645-40.1 72.62-72.017 99.176l5.335 44.002-40.008-20.256c-9.04 5.286-17.826 10.484-27.565 14.668l-5.334 48.89-40.01-34.224c-10.922 2.44-22.366 3.86-33.786 4.89l-24.008 39.81-23.117-39.112c-12.508-1.095-24.546-3.516-36.454-6.285l-38.232 32.824-5.335-46.793c-10.032-4.307-19.162-9.194-28.45-14.668l-39.122 20.256 6.224-43.305c-32.864-27.114-58.722-62.13-73.798-101.966z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/andromeda-chain.svg b/static/_icons/_ability/andromeda-chain.svg
new file mode 100644
index 00000000..626966a3
--- /dev/null
+++ b/static/_icons/_ability/andromeda-chain.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M104.9 17.42 493.6 278.1v-22.5L138.5 17.42zm78.8 0L493.6 175.8v-21L224.8 17.42zm102.3 0 207.6 72.09V69.76L340.7 17.42c-54.8-.16-54.4-.1-54.7 0zM18.58 19.54v15.07l34.6 38.93c5.84 5.45 13.5 5.63 19 .13 5.63-5.64 5.73-13.28.4-19.03-12.5-11.71-25.02-23.4-37.53-35.1zm70.32 25.6c5.83 8.14 7.33 18.39 4.73 27.68 9.67 7.41 18.77 16.59 28.07 25.03 17.2-1.35 30.1 12.85 39.2 22.25 1-13.2-3-27.4-13.6-37.06-11.1-10.17-24.7-17.9-36.9-26.47-7.1-4.95-13.67-9.94-21.5-11.44zM52.58 114.1c8.8 11.7 18.29 24.2 26.94 36.6 10.54 10.1 24.58 15 37.88 13.9-9.5-11-23.97-24.1-22.07-37.8-8.69-10.7-17.05-20.7-25.31-31.45-9.73 2.17-20.3-.29-28.28-6.97.22 10.43 5.63 18.72 10.84 25.72zm-34.21-5.9v33.5l235.33 353h22.5zm98.93 11.1c-4.9 4.8-4.9 10.9-.4 15.9 22 25.8 44 51.8 66 77.7 7.5 6.8 17.5 7 24.5-.1 7.3-7.2 7.4-17.3.6-24.7-26.8-23.4-52.6-48.6-75.5-68.6-5-4.5-11-4.2-15.2-.2zm70.6 25.2c16.1 13.6 40.3 30.1 43 49.3 16.1 14.9 32.8 30 49.1 44.9 29.1-3.1 46.5 25.3 62 39.5 4.5-25.6-2.1-54.1-22.8-73-19.1-17.5-40-29.7-58.5-43.2-15.6-11.5-32.5-20.3-50.3-20.7-7.7 0-15.9 1.2-22.5 3.2zM18.37 188v41.1L153.1 494.7h21zm123.03 4.8c-6.8 24.2 3 48.3 18.1 70.2 13.9 20.2 29.4 41.6 41.8 59.3 21.9 24.5 51.1 29.5 78.1 22.7-14.4-16.5-35.2-34.4-39.5-55.2-18.3-22.2-29.5-35-46-53.5-21.4 1.3-35.9-22.3-52.5-43.5zm123.8 71.5c-10.9 10.7-7.7 26.6-.3 34.8l108.6 127.7c14.6 13.7 35.3 14 49.3 0 14.3-14.1 14.4-34.8.8-49.3-41.4-37.7-83.2-75.2-124.6-112.9-12.1-9.7-23.5-10.1-33.8-.3zm-246.83 25v57.8l49.87 147.6h19.75zM377.1 310c20.5 17.6 40 36.5 60.1 54.5 8.4 7.5 12.5 18.3 14.1 28.6 4.3 2.1 8.5 5 12.3 8.6l29.8 27.4V325.3c-38.6-23.7-74.4-30.8-116.3-15.3zm-68.3 69.6c-14.1 37.9-8.8 81.4 15.7 115.1h102.2c-29.9-37.3 0 .3-31.9-39.2-12.4-.9-25.2-5.4-34.4-15.3-17.9-19.3-34.5-40.4-51.6-60.6z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/arrow-dunk.svg b/static/_icons/_ability/arrow-dunk.svg
new file mode 100644
index 00000000..caaa52d3
--- /dev/null
+++ b/static/_icons/_ability/arrow-dunk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M237.13 18.283c-51.748 0-99.183 27.58-136.067 73.395 11.946-6.97 24.526-11.903 37.51-14.76a129.218 129.218 0 0 1 27.25-3c27.562-.123 55.824 8.283 82.636 24.318 70.828 42.362 132.585 137.45 153.704 275.178l-49.44 12.637 74.33 109.74 74.327-147.733-51.84 13.25c.564-8.534.9-17.16.9-25.905 0-175.088-95.847-317.12-213.307-317.12h-.002zm-71.165 74.305c-7.924.04-15.734.9-23.375 2.582-30.47 6.705-58.785 26.48-81.356 61.89C37.996 207.88 24.4 269.28 24.4 335.4c0 15.983 1.35 31.378 2.883 46.73 14.387-135.103 92.702-238.62 187.363-238.62 34.713 0 67.177 13.976 95.083 38.334-21.608-29.968-45.915-52.65-70.863-67.57-24.337-14.556-49.13-21.81-72.902-21.688z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/arrow-flights.svg b/static/_icons/_ability/arrow-flights.svg
new file mode 100644
index 00000000..1014570a
--- /dev/null
+++ b/static/_icons/_ability/arrow-flights.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m182.938 17.75-29.625 112-64.22-64.313-18.218 18.22L480.78 494.124h11.814V469.5L264.72 241.28l29.624-112.124-17.53-17.53-16.783 37.468-.31-54.563-23.564-23.56-12.125 19.75-2.343-34.22-38.75-38.75zM419.875 81l-17.563 66.47-35.406-35.407-14.875 15.156 140.564 140.593V237.75l-20.375-20.375 17.592-66.438L419.875 81zM114.72 154l-92.814 24.53 16.75 16.75 50.97-1-37.19 14.782 39.44 39.438 32.905 2.03-12.874 8.907 20.688 1.282-16.844 11.655 17.594 17.594L226 265.436 114.72 154zm252.936 15.28-48.97 12.94 25.658 25.655 31.875 2.156-18.408 11.314 30.782 30.78 48.97-12.936-69.908-69.907zM122.78 316.313l-17.56 66.407-35.345-35.47-15.313 15.313 131.594 131.562h30.094l-41.156-41.313 17.594-66.593-13.907-13.908-12.093 19.782-2.343-34.22-41.563-41.562zm188.907 51.594-10.843 41.063-23.5-23.5-13.22 13.217 23.376 23.344-40.72 10.783 44.814 44.812 40.72-10.78 27.998 28h26.407l-41.095-41.095 10.844-41.03-19.158-19.19-8.562 7.75-3.344-19.624-13.72-13.75zM70.25 404.656 21.562 417.5l54 54h34.094L93.126 487l47.03-12.438-69.906-69.906z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/assassin-pocket.svg b/static/_icons/_ability/assassin-pocket.svg
new file mode 100644
index 00000000..a9385101
--- /dev/null
+++ b/static/_icons/_ability/assassin-pocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m233.56 16.225-15.535 54.302-79.183-12.79-2.98 18.45L212.85 88.62l-14.92 52.163 17.968 5.14 11.028-38.546c92.558 14.84 177.404 26.687 273.004 16.824-78.98-39.333-166.495-51.603-258.832-66.368l10.43-36.467-17.97-5.14zm-68.695 120.443-13.482 12.953 69.644 72.493-59.63 34.428 9.347 16.19 44.098-25.46c83.234 86.485 160.743 164.186 267.683 231.242-48.682-97.16-128.987-177.16-212.025-263.375l40.176-23.198-9.346-16.19-63.625 36.734-72.84-75.816zm-87.11 13.424-17.82 5.646 20.942 66.094-53.99 13.613 4.57 18.125 38.824-9.79c25.36 79.632 50.276 151.825 99.097 222.02 2.31-80.818-23.148-155.34-48.488-234.78l37.794-9.528-4.57-18.125-55.08 13.887-21.28-67.162z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/back-forth.svg b/static/_icons/_ability/back-forth.svg
new file mode 100644
index 00000000..d57fcaed
--- /dev/null
+++ b/static/_icons/_ability/back-forth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m241.844 28.625-21.188 5.063L33.25 78.53l-9.594 2.282 2.813 9.47 54.718 184.03 6.156 20.782 10.875-18.75 36.624-63.125 39.344 22.655 9.375-16.188-47.47-27.312L128 187.72l-4.656 8.06-30.406 52.47-45.75-153.844 156.625-37.47-30.344 52.345-4.69 8.126 8.126 4.656L332.75 211.75l-17.594 30.344 16.22 9.312 22.25-38.375 4.687-8.124-8.125-4.656-155.844-89.688 36.594-63.093 10.906-18.845zm-28.25 176.47-57.438 99.31 155.22 89.5 8.093 4.658-4.69 8.093-44.06 76.25 218.81-52.5-63.874-215.47-44.094 76.25-4.656 8.064-8.094-4.656-155.218-89.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/bolas.svg b/static/_icons/_ability/bolas.svg
new file mode 100644
index 00000000..f5f79589
--- /dev/null
+++ b/static/_icons/_ability/bolas.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M213.43 21.54c-46.155.27-91.59 9.917-126.184 27.747 35.44-4.564 67.766-4.785 96.442-1.312-14.38 5.39-28.077 12.13-40.72 20.013 45.897-11.947 96.025-13.915 138.58-4.474-39.536 4.256-73.158 12.716-100.536 24.37 70.373-10.442 131.843 17.4 167.558 73.458a90.822 90.822 0 0 1 26.29-23.135c13.58-7.923 28.375-11.89 43.064-12.26a90.466 90.466 0 0 1 7.478.135c-24.215-41.376-57.388-67.313-93.865-80.943-19.67-8.972-41.355-15.86-64.205-19.525l.004-.015c-17.675-2.837-35.846-4.167-53.906-4.06zm207.482 122.95c-.8-.005-1.6.004-2.4.026-11.645.32-23.394 3.506-34.233 9.83-20.347 11.87-32.83 32.164-35.635 54.002a27.82 27.82 0 0 1 8.447-1.31c15.503 0 28.27 12.77 28.27 28.273 0 13.33-9.44 24.63-21.94 27.54 21.866 28.454 61.394 36.848 93.125 18.334 34.684-20.236 46.558-64.938 26.494-100.058-13.363-23.393-37.35-36.482-62.128-36.638zm-63.82 81.238c-1.88 0-3.6.52-5.057 1.41l-30.672 10.604 6.037 17.686 30.592-10.578c4.96-.436 8.682-4.44 8.682-9.54 0-5.402-4.18-9.582-9.582-9.582zm-53.39 18.122-36.835 12.736 6.037 17.687 36.834-12.738-6.037-17.685zM91.005 259.385c-.8-.005-1.6.003-2.4.025-11.646.32-23.394 3.504-34.233 9.828-34.684 20.237-46.558 64.94-26.494 100.06 10.792 18.892 28.517 31.05 47.99 35.114 17.308 17.118 36.44 31.05 56.63 42.098 20.84 14.38 43.545 22.827 66.818 26.23-30.582-20.555-50.59-46.054-52.867-69.185 53.748 60.732 145.74 81.982 216.568 61.55 32.046-11.658 57.986-29.305 73.025-51.087-61.803 27.515-125.787 31.27-181.826 16.44 19.368-5.92 36.6-13.626 51.6-22.862-58.266 9.763-109.74-12.115-144.66-59.055 3.792-17.256 1.442-35.952-8.022-52.52-13.364-23.39-37.35-36.48-62.13-36.635zm158.197 3.31-34.383 11.89 6.037 17.686 34.383-11.887-6.037-17.688zM197.16 280.69l-26.17 9.05a92.108 92.108 0 0 1 6.96 17.37l25.247-8.73-6.037-17.69z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/bouncing-sword.svg b/static/_icons/_ability/bouncing-sword.svg
new file mode 100644
index 00000000..d3f055ff
--- /dev/null
+++ b/static/_icons/_ability/bouncing-sword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M414.666 22.572 19.91 114.15l251.8 266.028-59.66 59.69 282.602 53.44-53.41-282.75-31.545 31.563 36.826 84.86-79.253-87.507-80.643-79.217 41.025 80.377-135.38-114.785L414.667 22.572zM232.484 215.77c11.482 0 20.787 9.308 20.787 20.79 0 2.462-.43 4.824-1.215 7.016l35.55 34.21 33.06-30.81 12.74 13.672-17.374 16.19 138.286 133.64L473.236 471l-60.515-17.447-140.55-135.84-18.096 16.86-12.74-13.67 32.578-30.358-35.418-34.082a20.78 20.78 0 0 1-6.01.887c-11.48 0-20.787-9.31-20.787-20.79 0-11.482 9.306-20.79 20.787-20.79zm68.883 75.617-12.963 13.463L426.96 438.256l12.964-13.463-138.557-133.406z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/broad-dagger.svg b/static/_icons/_ability/broad-dagger.svg
new file mode 100644
index 00000000..a2a727b7
--- /dev/null
+++ b/static/_icons/_ability/broad-dagger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M62.936 16.73 19.72 59.95c1.622 12.54 7.583 26.894 19.39 41.904l65.974-65.973C90.058 24.2 75.52 18.26 62.937 16.73zM96.1 71.295 74.895 92.5c6.34 11.07 15.39 23.783 26.533 36.965l25.197-36.94c-10.865-8.725-21.27-15.93-30.525-21.23zM258.627 88.26l19.406 19.408L112.15 273.55l-19.408-19.405 34.88 101.255 54.08-12.298-51.913-51.91 165.884-165.883 51.908 51.907 12.3-54.08L258.628 88.26zm-117.682 16.435L114.25 143.83a381.608 381.608 0 0 0 8.125 8.385 383.562 383.562 0 0 0 3.92 3.863l38.05-28.486c-2.757-2.94-5.6-5.883-8.532-8.817a378.654 378.654 0 0 0-14.868-14.08zm35.877 36.903-36.564 27.37c9.672 8.487 19.167 15.894 28.04 22.005l26.266-26.266c-5.07-7.363-11.01-15.144-17.742-23.11zm101.34 27.652-22.967 22.967c54.55 55.23 93.45 99.893 117.893 132.922 13.023 17.596 21.977 31.83 27.18 43.22 2.6 5.695 4.322 10.65 4.923 15.554.603 4.903-.024 10.743-4.266 15.025-4.243 4.28-10.11 4.957-15.014 4.373-4.905-.585-9.854-2.296-15.54-4.887-11.375-5.182-25.592-14.118-43.183-27.135-33.02-24.434-77.71-63.365-133.044-118.02l-21.457 21.457c78.36 65.017 223.158 187.35 324.5 219.406-36.243-99.91-155.985-246.05-219.024-324.883zm-36.183 36.184-34.623 34.62c54.882 54.197 99.09 92.638 130.948 116.214 16.98 12.565 30.55 20.932 39.812 25.152 3.486 1.588 6.076 2.39 8.057 2.863-.476-2-1.294-4.627-2.906-8.158-4.244-9.292-12.63-22.88-25.202-39.87-23.586-31.868-61.997-76.044-116.087-130.82z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/broadsword.svg b/static/_icons/_ability/broadsword.svg
new file mode 100644
index 00000000..08224816
--- /dev/null
+++ b/static/_icons/_ability/broadsword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m491.844 22.533-83.42 14.865L196.572 249.25c3.262 4.815 5.37 10.72 5.37 16.932 0 5.863-1.71 11.35-4.643 15.996a52.936 52.936 0 0 0-16.027-2.477c-15.724 0-29.904 6.89-39.69 17.796l-9.112-9.113 17.237-17.237a545.915 545.915 0 0 1-13.19-17.6l-19.443 19.44-13.215-13.215 21.828-21.827a548.134 548.134 0 0 1-12.792-20.068L72.093 258.68l58.314 58.314a52.94 52.94 0 0 0-2.49 16.063 52.86 52.86 0 0 0 4.592 21.564l-72.14 72.14-14.56-14.56L21.013 437l14.558 14.56-8.607 8.608 27.246 27.246 8.606-8.61 14.56 14.56 24.798-24.8-14.557-14.556 72.158-72.16a52.885 52.885 0 0 0 21.498 4.562 52.94 52.94 0 0 0 16.063-2.49l58.363 58.363L296.5 401.48a548.745 548.745 0 0 1-20.068-12.793l-21.83 21.83L241.39 397.3l19.442-19.44a550.258 550.258 0 0 1-17.603-13.194l-17.238 17.238-9.16-9.16c10.905-9.785 17.795-23.965 17.795-39.69 0-5.346-.806-10.51-2.285-15.39 4.703-3.04 10.288-4.817 16.265-4.816 6.21 0 11.776 1.77 16.52 4.955L476.98 105.95l14.864-83.417zm-66.227 53.012 13.215 13.215-191.684 191.68-13.214-13.213L425.617 75.545zM181.273 298.39c19.257 0 34.665 15.41 34.665 34.665 0 19.256-15.408 34.666-34.665 34.666-19.256 0-34.666-15.41-34.666-34.665s15.41-34.666 34.666-34.666z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/broken-bone.svg b/static/_icons/_ability/broken-bone.svg
new file mode 100644
index 00000000..1637eddf
--- /dev/null
+++ b/static/_icons/_ability/broken-bone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m301.486 20.37-33.19 134.755 15.306 49.895 43.55-103.81-25.666-80.84zM161.324 43.46l2.03 110.69 90.68 36.516-92.71-147.207zm180.358 126.73-29.532 40.572 85.268-39.008-55.736-1.563zm-99.346 39.134c-59.628 41.982-124.36 74.982-199.207 81.297-13.185 1.113-21.704 8.3-26.302 15.185-13.788 20.652 8.285 51.02 54.332 33.37-55.518 33.324-8.274 81.184 25.113 43.495 34.24-38.648 74.95-74.53 117.74-91.58l12.696-28.235-32.81 6.272 48.436-59.803zm59.62 21.973 120.356 61.736-8.443-53.13-111.913-8.606zm-19.214 25.398 5.78 34.688-40.055-13.627c70.405 49.457 118.18 111.73 161.883 190.79 22.65 40.976 71.903 6.46 34.275-34.278 41.4 33.974 78.094-24.99 40.883-40.883-63.653-27.187-118.033-62.682-150.73-109.434h-.003l-52.033-27.255zm-53.697 46.844v.003l.002-.004h-.002zm0 .003-60.248 79.27 46.773-10.303 13.475-68.967zm18.963.934 18.996 118.392 36.414-19.62-55.41-98.773z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/broken-heart-zone.svg b/static/_icons/_ability/broken-heart-zone.svg
new file mode 100644
index 00000000..db1c2e25
--- /dev/null
+++ b/static/_icons/_ability/broken-heart-zone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M160.45 21.785c-50.2.096-98.177 39.404-99.67 103.264h-.003C58.094 239.693 207.683 268.72 254.8 383.163c42.852-114.436 187.95-150.36 190.53-258.115 2.293-95.77-96.364-127.004-160.037-80.736l39.533 114.553-44.945-11.256 26.802 109.964-89.325-149.008 52.3 5.848-50.92-73.105c-17.913-13.358-38.275-19.563-58.288-19.525zM105.3 331.24c-51.466 16.674-84.68 41.936-84.68 69.955 0 50.166 104.813 91.108 234.19 91.106 129.374 0 234.19-40.94 234.19-91.105 0-28.02-33.215-53.28-84.682-69.955 27.147 12.916 43.8 29.23 43.8 47.18 0 41.414-86.502 74.836-193.31 74.836-106.805 0-193.31-33.422-193.31-74.836 0-17.95 16.656-34.264 43.803-47.18zm68.915 13.828c-28.252 9.053-46.72 22.11-46.72 37.418 0 27.24 57.065 49.62 127.314 49.62 70.247 0 127.315-22.38 127.315-49.62 0-15.31-18.47-28.365-46.72-37.418 14.94 7.037 24.527 15.398 24.527 25.217 0 22.488-47.13 40.672-105.123 40.672-57.994 0-105.124-18.186-105.124-40.672 0-9.82 9.59-18.18 24.53-25.217z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/carrion.svg b/static/_icons/_ability/carrion.svg
new file mode 100644
index 00000000..a3af81e7
--- /dev/null
+++ b/static/_icons/_ability/carrion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M323.625 96.625c12.83 15.365 21.246 32.45 24.063 49.844.007.01.023.018.03.03a77.646 77.646 0 0 1 9.376 21.406c3.872 14.452 3.23 28.98-.906 42.406a88.779 88.779 0 0 1 16.03 1.063c20.337-50.824-1.366-99.53-48.593-114.75zm-229.03 6.313c-3.192-.04-6.272.958-8.75 2.78-7.217 5.303-9.528 17.636 3.874 31.5-31.695-23-53.314 13.355-23.47 23.5 38.186 12.98 62.297 37.852 91.03 66.657 4.5-8.95 9.99-16.856 16.22-23.72-29.31-29.85-48.34-53.623-62.5-87.686-3.777-9.087-10.316-12.96-16.406-13.032zm311.03 15.843c16.36 35.31 14.957 72.632-10.094 99.5a92.787 92.787 0 0 1 16.158 9.282 87.721 87.721 0 0 1 13.28 11.72c30.32-43.23 21.423-94.163-19.343-120.5zm-130.094 7.97c-5.81.065-11.757.88-17.686 2.47-36.142 9.682-56.886 44.88-47.97 78.155 4.906 18.306 17.715 31.888 34.72 39.375l4.125 1.813 1.155 4.312 10.72 40.03 77.31-20.686-10.75-40.033-1.155-4.343 2.656-3.625c10.983-14.988 15.28-33.163 10.375-51.47-7.223-26.964-32.437-45.255-61.03-45.97-.825-.02-1.64-.04-2.47-.03zm27.595 41.78c.43-.015.854-.016 1.28 0 7.4.296 14.078 5.348 16.095 12.876 2.483 9.266-3.013 18.798-12.28 21.28-9.27 2.485-18.8-3.014-21.283-12.28-2.482-9.266 3.014-18.798 12.282-21.28a17.621 17.621 0 0 1 3.905-.595zm165.594 3.19c6.195 35.648-2.874 68.998-29.22 89.155 5.5 11.813 8.25 25.165 7.25 39.406 49.058-33.438 56.908-89.938 21.97-128.56zm-222.064 12.218c7.486.204 14.276 5.273 16.313 12.875 2.482 9.266-3.015 18.797-12.283 21.28-9.267 2.484-18.798-3.014-21.28-12.28-2.484-9.267 3.013-18.798 12.28-21.282 1.16-.31 2.317-.492 3.47-.56.503-.032 1-.046 1.5-.032zm31.53 21.843 23.095 28.69-27.56 6.655 4.467-35.344zm-86.592 5.595c-11.07 10.506-19.91 24.784-24.78 43.25 14.297 7.06 26.344 16.036 35.686 27.063 13.265 15.656 20.738 35.304 21.75 57.78a64.024 64.024 0 0 1 12.375-1.437c17.238-.304 35.058 6.446 47.875 22.658l-14.656 11.593c-14.735-18.635-37.164-19.036-53.53-10.186-8.185 4.425-14.354 11.116-17.033 18.594-.06.173-.096.356-.155.53L180 380.5c.418-2.084.98-4.12 1.688-6.094 4.274-11.932 13.145-21.438 23.968-27.75.413-21.826-5.678-39.026-17.437-52.906-11.62-13.713-29.194-24.297-52.626-31.22a41.665 41.665 0 0 0-5.813-.467 32.905 32.905 0 0 0-5.843.468c-7.266 1.268-12.8 4.773-17.5 10.75-9.398 11.958-14.07 34.817-10.406 61.845l3.907 28.688-19.937-21c-11.16-11.77-22.013-14.838-31.72-13.782-9.704 1.057-18.63 6.773-24.218 14.75-5.587 7.98-7.745 17.722-4.718 27.283 1.668 5.27 4.98 10.753 10.75 15.968 11.96 15.804 46.246 32.908 102.937 43.595-15.04 4.874-24.75 12.64-24.75 21.375 0 14.755 27.74 26.72 61.97 26.72 34.23 0 61.97-11.965 61.97-26.72 0-4.09-2.126-7.972-5.94-11.438 11.142.44 22.745.657 34.814.657 119.344 0 216.955-20.41 224.28-46.22 25.16-46.828-19.41-82.85-47.03-74.72l-15.313 4.5 3.564-15.56c6.54-28.536-5.674-52.045-25.813-66.5-15.23-10.935-34.772-16.04-53.53-12.907-.324.52-.633 1.048-.97 1.562l12.064 45.03 2.437 9.033-9.03 2.437-95.344 25.53-9.03 2.408-2.407-9-12.064-45.063c-19.58-9.923-35.08-27.09-41.094-49.53-.075-.283-.146-.563-.218-.845zM401.094 455c-15.935 0-28.875 5.57-28.875 12.438s12.94 12.437 28.874 12.437c15.935 0 28.844-5.57 28.844-12.438S417.027 455 401.094 455zM78.72 470.313c-15.936 0-28.845 5.568-28.845 12.437 0 6.87 12.91 12.438 28.844 12.438 15.934 0 28.843-5.57 28.843-12.438 0-6.87-12.91-12.438-28.844-12.438z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/circle-sparks.svg b/static/_icons/_ability/circle-sparks.svg
new file mode 100644
index 00000000..e1c1cc50
--- /dev/null
+++ b/static/_icons/_ability/circle-sparks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M20.78 26.78c64.677 55.957 77.348 94.384 60.564 122.876 7.63-3.893 15.673-6.72 24.094-8.375-20.88 26.902-34.827 59.457-39.157 94.94-14.255-1.084-27.752-2.986-39.874-5.782 14.74 7.424 27.45 15.042 38.563 23.125-.068 2.083-.126 4.18-.126 6.28 0 68.626 35.813 128.96 89.75 163.344-4.345 10.808-11.01 21.467-20.438 32.813 11.536-7.713 26.68-14.666 43.313-20.313 24.644 11.384 52.065 17.75 80.968 17.75 16.69 0 32.885-2.11 48.343-6.093.406 14.503-.08 31.072-1.436 50.125 36.338-88.305 101.418-88.803 181-30.25-64.756-68.336-59.635-134.57-4.75-218.845-10.708 5.996-20.526 11.01-29.563 15.094.023-1.206.033-2.416.033-3.626 0-43.22-14.223-83.164-38.22-115.406 18.41-29.47 40.28-49.624 65.5-65.125-53.525 15.19-87.8 7.226-130.312-22.75 16.446 15.918 26.668 33.556 32.47 53.874-33.47-27.61-76.354-44.218-123.063-44.218-23.376 0-45.805 4.134-66.562 11.75 1.722-13.855 6.552-27.61 14.438-41.75C156.097 67.09 98.216 75.61 20.78 26.78zm104.095 48.782C137.17 75.62 152 81.5 162.313 91.22c13.75 12.957 14.257 27.825 1.156 33.218-13.103 5.392-34.876-.73-48.626-13.688s-14.257-27.827-1.156-33.22c3.275-1.347 7.09-1.987 11.187-1.968zm133.563 9.344c50.846 0 96.557 21.633 128.5 56.188 1.667 19.017.924 40.15-1.282 63.97 5.51-15.935 11.532-30.1 18.063-42.783 18.732 27.863 29.655 61.414 29.655 97.564 0 3.784-.14 7.526-.375 11.25-80.95 27.872-84.574-38.09-98.344-141.625-23.972 143.895-73.68 188.616-175.375 185.5 91.03 29.217 138.164 30.064 146.345 113.342a175.527 175.527 0 0 1-47.188 6.438c-17.69 0-34.758-2.634-50.843-7.5 15.95-3.575 32.116-5.82 46.906-6.375-51.752-8.56-83.084-24.313-96.906-62.97 3.475 17.54 4.497 32.484 2.25 46.47-43.702-29.84-73.13-78.987-76.063-135.25 22.45 21.294 36.885 46.538 49 80.188-11.563-57.488 17.535-92.766 79.064-127.97C175.184 232.57 127.964 238.29 85 237.19c4.827-37.463 21.455-71.18 46.063-97.313 34.22 2.712 73.92 23.22 119.03 67.22-36.212-42.28-55.61-76.564-58.53-108.97 20.597-8.515 43.173-13.22 66.875-13.22zm66.906 197.813c30.63 0 68.568 26.42 84.72 59 16.15 32.58 4.408 59-26.22 59-30.63 0-68.568-26.42-84.72-59-16.15-32.58-4.41-59 26.22-59z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/cross-flare.svg b/static/_icons/_ability/cross-flare.svg
new file mode 100644
index 00000000..26083868
--- /dev/null
+++ b/static/_icons/_ability/cross-flare.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M226.877 20.416a206.61 206.61 0 0 0-55.922 7.72c-28.518 5.13-56 17.362-79.572 36.71L29.203 28.67 65.51 91.078a173.06 173.06 0 0 0-32.88 66.938C7.28 230.34 23.513 313.994 81.33 371.81c52.018 52.02 124.946 70.363 191.723 55.06l69.315 65.65-20.04-83.825a205.077 205.077 0 0 0 36.693-24.603L498.85 498.326 384.625 358.502a205.073 205.073 0 0 0 24.867-37.148l83.112 19.87-65.125-68.76c15.314-66.787-3.026-139.73-55.052-191.76-17.117-17.116-36.504-30.574-57.186-40.4l.688-1.27-1.565.85c-27.637-12.973-57.56-19.468-87.488-19.468zM202.07 43.908c24.817 0 49.633 5.904 72.186 17.703l-97.574 52.86-67.93-39.52C136.357 54.263 169.21 43.91 202.07 43.91zm94.09 31.623a157.965 157.965 0 0 1 16.184 14.113c54.775 54.776 60.34 139.89 16.715 200.84l-89.796-109.92L296.16 75.53zM75.668 108.544l39.793 68.4L63.84 272.24C36.7 220.5 40.648 156.814 75.668 108.543zm104.77 129.66 110.26 90.076c-60.798 42.13-144.68 36.112-198.88-18.07l-.02-.017v-.002a157.83 157.83 0 0 1-14.187-16.284l102.828-55.703z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/crossed-air-flows.svg b/static/_icons/_ability/crossed-air-flows.svg
new file mode 100644
index 00000000..bfb663f6
--- /dev/null
+++ b/static/_icons/_ability/crossed-air-flows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M21 18.035v5.088c109.998 50.032 220.054 122.967 293.453 201.82a838.926 838.926 0 0 1-6.23 10.54C218.595 169.884 117.723 122.586 21 92.822v77.1c75.186 16.99 155.106 46.088 231.27 89.356-54.09-19.95-113.754-32.143-175.204-33.876 59.19 20.343 123.45 46.638 184.955 78.492-65.03 85.433-145.31 149.098-239.266 174.39C141.178 511.62 307.632 481.4 414 401.755c30.91 25.406 58.157 52.78 79.965 82.025v-5.17c-10.706-36.043-26.167-71.84-45.272-106.794 12.84-12.864 24.225-26.682 33.852-41.416-56.283 49.778-128.067 78.627-216.725 105.834 78.377-44.805 146.055-100.623 199.133-159.6a817.344 817.344 0 0 0 29.012-36.52v-38.41c-75.202 99.392-188.794 188.773-302.738 236.14 122.326-68.48 252.93-199.788 297.607-323.684-38.43 54.704-84.59 103.334-133.86 144.86 57.522-73.943 108.355-152.33 138.99-216.06V18.036h-90.03c-20.39 65.42-46.51 128.732-78.065 186.61-72.37-77.783-156.326-143.35-233.247-186.61H21zM186.703 439.5h.492c-.32.13-.64.265-.96.395.156-.13.313-.265.468-.395z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/crossed-slashes.svg b/static/_icons/_ability/crossed-slashes.svg
new file mode 100644
index 00000000..05887ba9
--- /dev/null
+++ b/static/_icons/_ability/crossed-slashes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M174.844 14.875c47.1 42.275 78.124 90.35 95.312 138.063C200.613 126.285 119.028 114.165 32 129.155c96.11-8.437 180.524 13 245.625 47.72 43.035 161.78-70.46 307.352-250.97 192.155 112.67 95.877 201.475 101.817 254.94 60.908 307.477 77.54 238.903-156.1 27.374-260.094-25.886-55.805-69.74-110.694-134.126-154.97zM323 205.345c123.386 90.75 139.423 227.623-38.656 222.436C336.51 385.317 353.196 296.868 323 205.345z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/death-juice.svg b/static/_icons/_ability/death-juice.svg
new file mode 100644
index 00000000..572dc487
--- /dev/null
+++ b/static/_icons/_ability/death-juice.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M257.617 20.717c-7.083-.011-14.242.448-21.469 1.347-31.2 3.87-59.077 16.346-82.566 39.51-18.59 18.323-30.93 40.783-33.8 68.274-3.409 32.99 6.985 61.16 28.118 84.191 6.792 7.386 9.795 14.582 9.608 25.03-.297 16.428.974 32.882 1.65 50.308 21.027-12.421 41.214-24.384 61.674-36.48 12.176 21.378 24.055 42.27 36.479 63.976 12.148-21.517 23.894-42.3 35.826-63.244 19.753 11.8 39.24 23.46 59.373 35.557.514-16.94 1.733-32.799 1.246-48.6-.353-11.07 1.813-19.676 10.256-26.223 2.677-2.083 4.707-5.356 6.845-8.308 20.568-28.606 27.712-60.348 17.16-95.498-9.77-32.502-30.771-54.695-57.699-70.362-23.066-13.405-47.403-19.44-72.7-19.478zm82.799 105.207c17.942-.134 26.164 11.07 22.404 30.474-4.353 22.379-22.92 38.723-42.674 37.668-21.38-1.139-38.695-18.755-41.025-41.892-.186-1.811.435-4.598 1.6-5.547 10.658-8.605 45.704-20.593 59.695-20.703zm-165.154.03c13.717.865 29.494 7.548 45.084 14.91 2.297 1.107 4.408 2.785 6.763 3.464 5.847 1.651 6.088 6.113 5.25 11.31-3.76 22.217-23.004 39.484-42.785 38.401-22.433-1.218-39.592-19.269-41.162-43.351-1.083-16.59 6.766-24.952 26.85-24.735zm80.615 56.556c7.44 18.214 14.42 35.235 21.646 52.93h-43.187c7.144-17.588 14.152-34.637 21.54-52.93zm-16.172 141.84c-.146.319-.293.633-.42.976-2.894 7.981-6.197 15.856-9.984 23.543-8.334 16.832-17.293 33.365-25.71 50.09-6.63 13.125-10.336 26.845-7.74 41.783 5.71 32.582 36.67 54.827 69.63 49.844 39.886-6.033 59.48-41.103 48.603-74.902-4.357-13.586-11.283-26.469-17.941-39.159-8.46-16.062-16.528-32.279-23.061-49.11-2.348 4.152-4.698 8.311-7.057 12.491l-8.658 15.328-8.742-15.279a11284.8 11284.8 0 0 1-8.92-15.605zm.053 40.97c3.709.032 3.735 27.583 1.642 40.026-2.166 12.555.13 24.084 10.495 32.69 15.02 12.475 35.426 9.66 46.654-6.386.514-.68.975-1.355 1.49-2.06.404.083.756.164 1.162.219-.89 4.763-1.217 9.633-2.652 14.261-6.33 20.702-25.515 33.068-47.977 31.174-19.404-1.624-35.833-17.753-39.24-37.996-1.841-10.579 1.218-20.05 5.654-29.17 6.602-13.61 14.018-26.817 20.647-40.375.81-1.655 1.518-2.388 2.125-2.383z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/death-note.svg b/static/_icons/_ability/death-note.svg
new file mode 100644
index 00000000..6dd8354c
--- /dev/null
+++ b/static/_icons/_ability/death-note.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m294.3 53.6-81.2.24-79.5 70.56 18.3 70.5L201 187l-25.8 74.7 38.7-22.4 11 35.9 30.2-37.1 30.2 38.8 18.5-38.5 31.7 21.1-25.4-71.9 46.4 6.1 18.9-67.1c-27.1-24.3-54.1-48.7-81.1-73zm-88.8 61.2c13.3-.1 28.3 9 35.9 27l-61.9 9.3c-3.9-18.1 11-35.7 26-36.3zm104.5 0c15.1.1 28.1 12.1 26 36.3l-62-9.3c7.7-18 22.7-27.1 36-27zm-54.5 38.5 25.6 56.7h-47.9zM93.26 288.5 51.3 317.7l207.3 72.7L466 317.3l-41-28.8c-54.7 9.2-120.6-14.4-150.7 31.8h-31.4c-41-45.7-104.5-25.2-149.64-31.8zM29 329.8l-6.17 17.6 190.67 66.7v17.8h91.6v-18.7c62.3-21.8 125.5-43.9 188.1-65.8l-6.2-17.6-205.7 71.9 4.1 11.5h-54.8l4.1-11.5c-68.6-24-137.15-48-205.7-71.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/death-zone.svg b/static/_icons/_ability/death-zone.svg
new file mode 100644
index 00000000..ccc59dd4
--- /dev/null
+++ b/static/_icons/_ability/death-zone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M254.566 20.055c-59.624 0-99.147 26.426-125.21 65.767-25.084 37.862-36.733 88.14-37.583 136.746 35.068 17.25 55.994 35.297 65.088 54.416 8.03 16.882 4.974 34.41-5.042 47.96 22.02 19.97 59.516 32.352 98.135 32.972 38.86.624 77.95-10.4 102.942-33.174-5.034-5.972-8.774-12.36-10.582-19.37-2.54-9.836-.836-20.485 4.687-30.134 10.514-18.37 33.286-34.804 70.354-52.71-.878-46.03-12.275-96.24-37.225-134.714-25.985-40.068-65.52-67.76-125.564-67.76zm-75.748 125.982c46.19 10.87 94.98 10.703 145.752.205-25.867 37.59-123.918 37.62-145.752-.205zm-20.312 13.53c7.698 30.39 30.63 47.76 73.336 45.984l-1.112 33.59c-39.39 20.126-72.635 1.99-103.71-19.048h-.002c-4.848-30.567-.204-54.706 31.488-60.526zm186.69 0c31.69 5.82 36.333 29.958 31.486 60.525h-.002c-31.076 21.04-64.32 39.174-103.71 19.047l-1.11-33.59c42.707 1.776 65.637-15.594 73.335-45.984zM250.97 252.19c12.102 21.818 21.704 43.634 26.47 65.45-13.016 9.698-36.32 11.107-52.938 0 6.443-21.816 14.19-43.632 26.47-65.45zM100.405 353.108c-50.152 13.628-82.55 33.813-82.55 56.204 0 41.018 106.523 74.352 237.697 74.352s237.698-33.334 237.698-74.35c0-22.312-32.12-42.58-81.965-56.205 17.23 8.88 27.518 19.25 27.518 30.444 0 32.13-82.31 58.546-183.247 58.546-100.937 0-182.662-26.418-182.662-58.545 0-11.253 10.112-21.534 27.518-30.443h-.004zm62.54 2.637-14.903 23.41c6.624 5.312 14.328 9.978 22.855 13.955l10.898-28.796c-6.58-2.48-12.888-5.336-18.848-8.57zm177.605.53c-5.772 3.14-11.804 5.894-18.038 8.28l10.703 28.477c8.005-3.6 15.612-7.817 22.666-12.676l-15.33-24.08zm-140.905 13.673L188.3 399.924c9.524 3.093 19.698 5.462 30.253 7.064l3.87-32.513a201.991 201.991 0 0 1-22.778-4.528zm105.04.287c-7.468 1.95-15.113 3.434-22.85 4.48l3.823 32.126c10.274-1.605 20.384-3.967 30.112-7.11l-11.086-29.496zm-63.654 6.045-3.893 32.712c9.87.637 19.92.623 29.947-.07l-3.873-32.535c-4.52.206-9.045.287-13.558.215a226.95 226.95 0 0 1-8.62-.323z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/disintegrate.svg b/static/_icons/_ability/disintegrate.svg
new file mode 100644
index 00000000..f5b6cf2a
--- /dev/null
+++ b/static/_icons/_ability/disintegrate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.844 20.625v129.5l73.375 66.25c36.57 38.36 55.757 94.852 27.624 145.625l.72-.844-4.626 7.97 8.093 4.687 122.407 70.656 8.094 4.655 3.97-6.875c27.733-26.382 63.19-7.125 102.28 16.53l41.126 37.126h92.22V408.78l-44.063-43.967c-22.454-28.274-35.613-54.52-32.032-84.5 17.85-59.055-4.958-140.538-25.78-160.47-7.902-7.752-16.606-14.816-27.03-20.406-21.165-12.22-46.998-15.218-70.376-14.468-16.582.53-33.126 4.057-48.844 10.093-36.71 8.396-67.358-7.433-101.406-35.282l-39.22-39.155h-86.53zm280 83.313c2.78-.026 5.55.05 8.312.218-.036.097-.09.183-.125.28-6.752 18.694 38.538 37.97 49.126 14.97 55.007 34.127 69.07 117.013 36.063 174.188a55.735 55.735 0 0 1-2.22 3.53l-6.313 6.845c7.46 4.334 12.742 11.783 12.157 21.31-.003.043.002.084 0 .126 5.824.896 11.176 5.245 10.78 11.656-.795 12.97-13.8 14.244-20.655 8.875-15.525 11.663-43.697 1.44-43.595-19.343-1.955.698-3.88 1.38-5.875 2.094l-27.125-27.594-13.344 13.094 21.564 21.937c-10.82 4.87-21.477 11.133-30.875 20.53l-.876.876-.625 1.064-6.658 11.5-14.812-8.563 10.313-17.874-16.188-9.344-10.313 17.875-13.656-7.875 10.313-17.875-16.19-9.343-10.31 17.875-13.94-8.064 10.314-17.875-16.188-9.342-10.312 17.875-15.25-8.782 6.656-11.5c5.53-12.61 4.07-28.693 2.938-39.31l30.25 7.81 4.687-18.092-38.03-9.813c-.616-3.4-1.223-6.765-1.782-10.063-2.202-12.97-3.66-24.87-2-36.156l5.218-16.687c.482-.96.98-1.922 1.532-2.876 9.726-16.845 23.427-31.258 39.375-42.438 1.944 19.517 29.105 28.628 44.188 17.063 7.884 12.587 33.59 13.47 34.97-8.97.8-13.03-14.17-20.428-25.376-16.875-.847-5.087-3.442-9.416-7.064-12.78 8.94-2.295 18.048-3.697 27.125-4.064 1.272-.05 2.545-.08 3.814-.093zm6.22 57.343c-6.418-.064-12.71 3.813-13.283 13.157-.918 14.96 26.277 19.934 27.5 0 .49-7.946-6.946-13.082-14.217-13.156zm-81.783 4.782c-9.155.277-18.194 4.64-25.124 14.938-19.17 28.49 33.978 72.874 60.688 38.28 7.888 4.022 19.703 1.605 20.5-11.374.534-8.688-8.413-14.002-16.25-13.03-5.094-15.572-22.663-29.33-39.813-28.814zm115.25 66.094c-9.155.276-18.194 4.607-25.124 14.906-19.576 29.093 36.255 74.772 62.344 36 14.376-21.366-11.905-51.67-37.22-50.906zm-56.5 8.875-49.342 34.69 43.968 25.405 5.375-60.094zM164 324.97l15.25 8.78-11.156 19.313 16.187 9.343 11.157-19.312 13.938 8.062-11.156 19.313 16.186 9.342 11.156-19.312 13.657 7.875-11.157 19.313 16.187 9.343 11.156-19.31 14.813 8.56-21.564 37.314-106.22-61.313L164 324.97zm182.53 37.06c9.127-.25 17.758 10.78 12.19 19.19-3.474 5.245-8.023 6.81-12.22 6.155 2.446 6.643 2.232 14.06-2.156 20.688-21.842 32.983-63.58-2.503-47.188-27.25 10.818-16.336 26.53-15.88 37.625-8.25a10.306 10.306 0 0 1 1.626-4.22c2.904-4.384 6.554-6.213 10.125-6.312zm46.908.72c10.303.104 20.848 7.365 20.156 18.625-1.735 28.246-40.24 21.197-38.938 0 .813-13.24 9.69-18.717 18.78-18.625zm44.875 33.156c6.555.066 13.284 4.68 12.843 11.844-1.102 17.97-25.61 13.486-24.78 0 .516-8.42 6.153-11.902 11.937-11.844zm-59.407 15.875c6.555.067 13.285 4.682 12.844 11.845-1.103 17.97-25.642 13.486-24.813 0 .517-8.42 6.185-11.902 11.97-11.844z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/divert.svg b/static/_icons/_ability/divert.svg
new file mode 100644
index 00000000..ad1d5882
--- /dev/null
+++ b/static/_icons/_ability/divert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M237.688 20.25 18.344 288.344l174.625 63.094c-8.217 8.152-18.068 15.154-29.876 20.78L276.5 399.282c-10.966 11.894-24.456 22.08-41 30.22l125.563 12.406c-16.877 21.158-38.8 38.795-67.063 52.03l204.688-29.623-86.188-191.19c-1.632 34.214-5.993 66.51-14.688 95.813L320 270.03c-1.03 21.615-3.57 42.188-8.438 61.22l-80.843-72.47c-1.363 11.97-3.38 23.5-6.25 34.408l-45.94-28.657L496.69 20.25h-90.75L121.22 271.094l158.313 87.03-211.655-76.78L318.5 20.25h-80.813z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/double-shot.svg b/static/_icons/_ability/double-shot.svg
new file mode 100644
index 00000000..d4b796a3
--- /dev/null
+++ b/static/_icons/_ability/double-shot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M414.834 18.08c-29.377.15-59.012 16.6-73.164 58.87-18.758 56.028 67.407 137.784 33.57 221.206l48.215 41.87c35.646-92.954-52.048-200.4-34.2-251.44 12.36-35.35 35.672-38.21 56.05-26.44 19.942 11.51 30.406 30.664 17.974 54.99 33.043-12.62 37.255-51.444 9.52-77.197-3.96-3.68-9.02-7.016-14.277-10.05-12.984-7.496-28.3-11.89-43.69-11.81zm-80.77 32.01L65.937 62.16l-12.52 268.254c6.35-3.422 12.764-6.356 19.128-8.965L83.81 80.063l240.33-10.82c2.91-6.817 6.27-13.176 9.924-19.154zM104.686 87.955l324.392 330.04a208.137 208.137 0 0 1-13.62 12.8L91.132 100.825l-.268.267L389.03 450.41c-14.866 9.56-31 17.84-48.122 25.12l116.04 19.41-7.018-44.188 44.187 7.02L474.71 341.73c-5.74 17.768-13.425 33.603-22.753 47.803L104.687 87.955zm-6.608 248.54a64.652 64.652 0 0 0-2.57.015c-5.58.14-10.955.986-16.106 2.71-64.408 21.564-68.868 79.083-47.06 116.854 24.26 42.03 72.824 42.517 87.244 4.76-24.33 12.43-43.474 1.958-54.99-17.98-11.763-20.378-8.91-43.69 26.435-56.045 50.177-17.548 154.964 66.773 248.366 34.237l-40.757-47.75c-73.316 27.468-146.275-36.113-200.562-36.803z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/dripping-blade.svg b/static/_icons/_ability/dripping-blade.svg
new file mode 100644
index 00000000..9fdf5e27
--- /dev/null
+++ b/static/_icons/_ability/dripping-blade.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M17.406 17.156V54.97c79.545 34.337 178.924 73.75 261.906 97.343-53.787-54.16-125.17-103.693-179.218-135.157H17.406zm118.813 0c59.04 36.955 129.675 89.52 179.218 146.5l19.28 22.22-28.562-7C218.233 157.345 106.5 113.523 17.406 75.28v41.47c168.198 73.64 345.253 128.555 476.344 151.5-37.757-41.128-76.177-78.16-114.25-111.5C314.105 99.484 250 53.816 192.03 17.156h-55.81zM42.843 148c17.93 33.19 29.747 103.934 20.125 139.938-2.986 11.166-19.064 40.526-19.064 53.812 0 18.01 14.468 32.664 32.47 32.22 18-.446 32.435-16.15 32.436-34.158 0-13.366-16.692-41.73-19.75-52.78-10.666-38.56 6.714-92.154 31.626-107.782-25.94-9.94-51.947-20.35-77.844-31.25zm169.312 64.375c43.138 48.155 51.117 154.67 39.375 197.5C248.288 421.71 231 453.25 231 467.438c0 19.116 14.893 33.87 34 33.718 19.107-.15 34.688-15.164 34.688-34.28 0-14.103-15.892-45.715-19.813-57.22-14.753-43.3-3.968-143.785 21.25-141.187 22.02 2.264 25.332 49.124 16.28 79.936-2.083 7.093-12.028 25.58-12.03 34.125 0 11.517 9.02 20.468 20.53 20.376 11.512-.093 20.53-9.203 20.533-20.72 0-8.494-8.95-26.975-11.313-33.905-8.155-23.937 3.22-74.906 20.906-91.967-45.956-12.332-94.36-27.076-143.874-43.938zm173 51.53c18.477 25.58 24.733 78.443 12.78 123.158-3.71 13.88-23.684 50.358-23.686 66.875 0 22.387 17.997 40.613 40.375 40.062 22.378-.55 40.344-20.05 40.344-42.438 0-16.616-20.764-51.887-24.564-65.625-13.298-48.074 7.292-89.676 35.906-103.78-25.73-5.033-52.903-11.147-81.156-18.25z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/dripping-knife.svg b/static/_icons/_ability/dripping-knife.svg
new file mode 100644
index 00000000..ad271ac5
--- /dev/null
+++ b/static/_icons/_ability/dripping-knife.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M490.906 15c-15.93 27.59-38.93 49.68-66.125 65.906-1.656 22.7-13.066 44.383-30.655 63.844-24.774 27.41-61.863 51.865-104.78 73.906-84.056 43.17-190.69 76.712-270.75 97.656v53.875a3842.05 3842.05 0 0 1 22.624-7.25c18.695.008 39.45 7.253 46.25 50.282C80.952 445.75 64 453.105 64 477c0 12.348 12.224 21.406 24.03 21.406 12.074 0 23.532-8.464 23.532-20.187 0-23.002-16.374-32.466-23-65.283 9.795-76.6 133.782-117.104 133.782-71.75 0 11.632-12.813 21.018-12.813 31.625 0 12.752 11.694 21.75 24.032 21.75 12.068 0 24.657-10.1 24.657-23.53 0-13.43-14-20.934-14-31.75 0-71.077 114.83-78.082 132.686-16.782-13.16 56.997-42.03 75.01-42.03 116.844 0 22.04 21.583 38 44.28 38 22.2 0 45.125-17.067 45.125-40.28 0-43.735-30.165-58.033-43.06-115.19 23.29-129.734 61.263-121.692 88.31-176.03.036-.06.06-.127.095-.188C490.395 109.56 498.903 66.81 490.905 15zm-86.53 76.656c-37.166 17.086-80.115 24.428-123 21.28C221.435 153.363 107.803 206.662 18.593 225v71.97c78.706-20.824 182.013-53.747 262.219-94.94 41.78-21.456 77.22-45.23 99.437-69.81 12.273-13.58 20.51-26.965 24.125-40.564zm54.28 102.125c-7.41 43.062-29.47 51.75-29.47 81.94.002 15.146 14.987 26.28 29.47 26.28 14.81 0 28.875-10.4 28.875-24.78 0-28.982-21.217-40.46-28.874-83.44z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/dripping-sword.svg b/static/_icons/_ability/dripping-sword.svg
new file mode 100644
index 00000000..0eaa44f8
--- /dev/null
+++ b/static/_icons/_ability/dripping-sword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m495.52 21.816-11.305 1.043-82.805 7.644-258.045 258.053c-15.554-22.716-27.955-46.57-35.414-70.16l-4.098-12.96-10.633 8.47c-19.564 15.59-31.423 31.095-36.855 46.65-5.43 15.554-3.958 30.888 1.717 44.084 9.88 22.977 30.975 40.096 51.26 52.862-24.534 31.35-52.64 56.51-82.09 80.21l-3.486 2.808v4.474c0 14.772 4.732 27.31 13.584 35.684 8.85 8.375 21.067 12.126 34.222 12.125h4.7l2.802-3.774c22.927-30.88 48.28-59.133 79.71-82.04 10.91 17.653 26.147 38.022 48.323 48.664 12.948 6.214 28.392 8.625 44.922 4.35 16.53-4.275 33.916-14.868 52.42-33.373l10.88-10.88-14.672-4.637c-25.307-7.998-49.583-21.334-72.77-37.787l32.987-32.988a55.097 55.097 0 0 0-1.963 2.412l3.89-4.34 2.78-2.78c16.614-13.837 33.616 1.5 43.3 59.98 6.67-64.68 35.053-74.725 38.56-47.342V502.98h18.687V316.715l.175 1.828c4.48-49.957 29.634-39.048 33.996 24.996v152.835h18.69v-69.408c5.9-43.874 38.74-54.97 47.68-10.248l-.295 84.575 18.688.066 1.36-390.126 9.097-89.418zm-20.89 20.696-6.53 64.162L199.223 375.56l8.58 6.467c22.645 17.077 46.745 31.5 72.267 41.534-12.25 10.186-23.203 15.888-32.72 18.35-12.33 3.19-22.537 1.512-32.16-3.105-19.24-9.235-35.212-31.906-45.618-49.928l-5.017-8.69-8.31 5.624c-36.06 24.4-64.17 55.143-88.975 88.002-7.447-.676-13.15-2.994-17.075-6.708-4.023-3.807-6.73-9.497-7.435-17.99 31.122-25.274 61.537-52.874 87.783-88.485l6.2-8.413-9.05-5.225c-21.07-12.165-44.11-30.36-52.443-49.736-4.166-9.688-5.14-19.37-1.242-30.537 3.067-8.784 9.632-18.68 20.832-29.36 9.388 24.544 23.015 48.677 39.63 71.308l6.44 8.775 268.942-268.95 64.777-5.98zm-46.06 32.552L164.334 339.3l13.215 13.216L441.786 88.28l-13.215-13.216zm22.18 125.686c7.306 0 14.617 7.55 14.617 18.78s-7.308 18.78-14.617 18.78c-7.306 0-14.617-7.552-14.617-18.78 0-11.23 7.308-18.78 14.617-18.78zm-20.535 49.844c3.373 0 7.69 2.54 11.73 9.53 4.042 6.987 6.955 17.67 6.955 29.595 0 11.923-2.912 22.607-6.953 29.594-4.04 6.988-8.357 9.53-11.732 9.53-3.373 0-7.69-2.542-11.73-9.53-4.042-6.988-6.956-17.67-6.956-29.595 0-11.926 2.913-22.61 6.954-29.597 4.042-6.988 8.356-9.53 11.73-9.53z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/droplet-splash.svg b/static/_icons/_ability/droplet-splash.svg
new file mode 100644
index 00000000..aa20f4bc
--- /dev/null
+++ b/static/_icons/_ability/droplet-splash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M247.563 19.813c-13.458 0-24.344 10.917-24.344 24.375 0 13.457 10.885 24.343 24.343 24.343 13.457 0 24.375-10.888 24.375-24.343 0-13.454-10.918-24.374-24.375-24.374zm.937 70.312c-4.414 85.037-23.308 149.063-46.156 149.063-5.667 0-11.307-4.22-16.344-11.438 1.29 41.965-4.895 68.787-19.844 67.625-5.412-.42-11.71-4.443-18.125-11.406 20.254 50.4 58.82 84.75 103.376 84.75 44.556 0 83.122-34.35 103.375-84.75-6.413 6.962-12.678 10.985-18.092 11.405-16.276 1.265-22.873-29.93-19.875-78.563-6.6 13.806-14.202 22.375-22.188 22.375-22.85 0-41.71-64.025-46.125-149.062zM104.25 314.53c-51.466 16.677-84.688 41.948-84.688 69.97 0 50.166 104.813 91.096 234.188 91.094 129.375-.002 234.188-40.928 234.188-91.094 0-28.02-33.222-53.293-84.688-69.97 27.147 12.92 43.813 29.24 43.813 47.19 0 41.413-86.506 74.81-193.313 74.81-106.805.002-193.313-33.397-193.313-74.81 0-17.95 16.666-34.273 43.813-47.19zm68.906 13.814c-28.25 9.053-46.72 22.128-46.72 37.437 0 27.24 57.065 49.626 127.314 49.626 70.248 0 127.313-22.386 127.313-49.625 0-15.308-18.468-28.383-46.72-37.436 14.94 7.036 24.532 15.4 24.532 25.22 0 22.485-47.132 40.686-105.125 40.686s-105.125-18.2-105.125-40.688c0-9.818 9.592-18.182 24.53-25.218z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/dust-cloud.svg b/static/_icons/_ability/dust-cloud.svg
new file mode 100644
index 00000000..b471c6ff
--- /dev/null
+++ b/static/_icons/_ability/dust-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M157.28 20.156c49.034 80.853 158.543 191.31 280.314 282.72-12.952-21.306-30.14-44.73-50.656-69.313 28.743-10.15 24.95-58.844-11.344-58.844-13.48 0-22.456 6.72-26.97 15.686C295.36 133.576 228.32 73.53 157.282 20.156zm149.5 19.657c-28.475 0-28.49 42.656 0 42.656 28.494 0 28.477-42.657 0-42.657zM96.814 53.718c-28.476 0-28.493 42.655 0 42.655 1.2 0 2.337-.074 3.437-.22 11.16 20.95 24.392 43.76 30.094 54.72-34.91-27.997-71.838-55.12-110.375-80.03 45.8 69.48 95.23 131.372 148.343 187.468-44.29-39.876-94.253-78.585-147.157-113.282 46.907 90.757 163.835 205.804 299 294.345-18.66-35.987-48.926-76.256-86.437-116.813 39.578 36.5 81.035 70.486 124.405 102.532-26.27 2.126-25.556 42.562 2.188 42.562 16.258 0 23.203-13.887 20.906-25.812 27.366 19.495 55.49 38.282 84.374 56.5-17.89-46.96-52.54-103.187-97.938-161.188a1075.2 1075.2 0 0 0 97.594 71.094c-40.95-88.83-150.568-199.87-279.72-283.344 6.852 14.92 15.627 30.436 26.095 46.344-32.12-28.783-65.672-55.986-99.75-80.563 11.906-11.61 6.894-36.968-15.063-36.968zm-4.188 236.405c-28.476 0-28.493 42.656 0 42.656s28.476-42.655 0-42.655zm15.313 79.25c-28.476 0-28.493 42.656 0 42.656 28.492 0 28.475-42.655 0-42.655zm70.906 12.53c-48.87 0-48.9 73.22 0 73.22 48.898 0 48.87-73.22 0-73.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/eclipse.svg b/static/_icons/_ability/eclipse.svg
new file mode 100644
index 00000000..02f6aebb
--- /dev/null
+++ b/static/_icons/_ability/eclipse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M135.688 18.5c-6.798 74.842-23.842 85.39-107.907 59.656 84.85 52.022 73.57 64.954-6.843 96.938 87.743-10.27 103.29 4.89 70.75 87.594 17.805-27.56 32.5-44.498 46.282-54.47-11.813 28.26-18.345 59.274-18.345 91.813 0 84.184 43.71 157.96 109.656 200.376-41.624-43.834-67.686-102.7-67.686-167.875 0-134.923 109.45-244.405 244.375-244.405 30.92 0 60.76 5.762 88 16.25-38.584-26.87-85.517-42.625-136.064-42.625-55.257 0-106.14 18.802-146.562 50.375 4.627-18.783 17.39-38.073 41.03-60.906C190.18 90.942 153.53 95.634 135.69 18.5zm10.03 77.188a38.796 38.796 0 0 1 16.876 3.874c14.506 6.998 22.72 21.81 22 36.938A239.292 239.292 0 0 0 157 171.844c-9.035 2.753-19.075 2.27-28.25-2.156-19.37-9.343-27.5-32.6-18.156-51.97 6.715-13.92 20.638-22.036 35.125-22.03z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/ember-shot.svg b/static/_icons/_ability/ember-shot.svg
new file mode 100644
index 00000000..98dac4fb
--- /dev/null
+++ b/static/_icons/_ability/ember-shot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M105.113 21.303a94.532 94.532 0 0 0-3.105.006v-.003c-9.466.168-19.305 1.977-28.83 5.19 52.08 2.52 85.738 22.703 96.87 58.812C109.856 51.663 23.21 50.762 17.825 218.503c4.654-24.187 12.24-42.658 21.91-56.506 1.452 60.194 39.912 153.326 126.848 191.432C25.53 238.15 46.6 12.83 226.555 190.828c-17.528 3.248-33.786 13.22-46.705 28.832 40.82 3.046 79.194 32.62 114.744 86.49-13.16-10.622-39.578-4.165-52.47 4.038 34.233 13.687 60.515 46.612 63.425 80.722 2.653 31.13 9.728 52.008 24.436 64.543 16.382 19.37 40.845 31.7 68.116 31.7 44.674 0 81.825-33.08 88.226-76.014 13.92-59.877-7.103-150.928-42.392-205.32-1.33 33.756-9.516 48.257-24.795 64.004 4.843-45.456-4.917-82.556-37.48-127.43-2.958 20.896-6.127 41.78-23.062 50.74-17.134-47.644-70.686-97.153-122.24-140.113 16.883 28.56 35.38 56.712 39.785 92.257C232.59 88.597 170.257 22.23 105.113 21.303zM323.387 222.07c9.62 0 17.422 7.8 17.422 17.422s-7.802 17.422-17.423 17.422c-9.622 0-17.42-7.8-17.42-17.422 0-9.62 7.798-17.422 17.42-17.422zm50.71 11.39c12.203 0 22.094 9.893 22.094 22.095 0 12.202-9.89 22.093-22.092 22.093-12.202 0-22.092-9.89-22.092-22.093 0-12.202 9.89-22.094 22.092-22.094zm-35.95 50.07c10.45 0 19.38 6.474 23.02 15.626 6.004-6.568 14.64-10.69 24.24-10.69 18.13 0 32.83 14.7 32.83 32.83 0 3.02-.417 5.944-1.18 8.722 29.79 8.246 51.56 35.455 51.56 67.933 0 39.056-31.462 70.515-70.515 70.515s-70.514-31.46-70.514-70.514c0-24.234 12.122-45.538 30.65-58.22a32.654 32.654 0 0 1-4.992-11.796 24.659 24.659 0 0 1-15.1 5.14c-13.68 0-24.77-11.09-24.77-24.77 0-13.682 11.09-24.773 24.77-24.773zm109.052 8.038c9.62 0 17.42 7.8 17.42 17.422s-7.8 17.422-17.42 17.422c-9.622 0-17.423-7.8-17.423-17.422 0-9.62 7.8-17.422 17.422-17.422z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/falling-blob.svg b/static/_icons/_ability/falling-blob.svg
new file mode 100644
index 00000000..9994b40f
--- /dev/null
+++ b/static/_icons/_ability/falling-blob.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m227.54 25.87 128.997 177.28-219.59-169.19L259.07 198.92 20.78 26.128h-.005l180.06 232.19L35.878 129.186l169.19 225.433L20.17 219.052l210.703 228.224c59.994 56.81 154.88 55.822 213.664-2.963 58.782-58.783 59.77-153.668 2.962-213.664L227.54 25.87zm128.448 222.855c27.394 0 54.786 10.45 75.686 31.35 41.8 41.8 41.8 109.574 0 151.374s-109.573 41.8-151.373 0c-41.8-41.802-41.8-109.575 0-151.376 20.9-20.9 48.295-31.35 75.688-31.35zm-6.734 20.734c-17.067.057-36.98 7.253-52.576 20.872-13.134 11.468-20.463 25.015-22.217 36.897-1.753 11.88 1.438 21.776 10.216 29.11 17.555 14.667 55.232 11.185 81.5-11.752 13.134-11.47 20.462-25.015 22.217-36.897 1.754-11.88-1.438-21.776-10.215-29.11-7.132-5.96-17.247-9.16-28.924-9.12zm47.572 124.368c-8.597.03-19.063 3.706-27.14 10.65-6.803 5.848-10.36 12.6-11.172 18.01-.812 5.41.45 9.185 4.314 12.364 7.73 6.357 27.337 5.207 40.942-6.49 6.802-5.846 10.36-12.597 11.17-18.008.813-5.412-.45-9.187-4.313-12.366-3.14-2.582-7.918-4.18-13.8-4.16z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/fluffy-flame.svg b/static/_icons/_ability/fluffy-flame.svg
new file mode 100644
index 00000000..b334310c
--- /dev/null
+++ b/static/_icons/_ability/fluffy-flame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M92.043 24.678c-2.944.002-5.89.177-8.828.535C36.212 30.937 9.05 81.023 22.537 137.08a131.663 131.663 0 0 0 15.57 37.668c-.006-.09-.007-.177-.013-.266a38.477 38.477 0 0 0 4.85 6.438c11.252 12.063 27.762 13.945 36.796 4.672 9.034-9.273 7.16-26.484-4.09-38.547-1.41 7.565-7.797 13.434-15.77 13.434-8.998 0-16.35-7.356-16.35-16.355 0-1.885.26-3.35.824-4.92C54 117.51 73.796 100.763 98.912 96.082c30.028-5.596 59.188 7.624 75.38 31.316 4.616 13.202 6.077 24.766 5.616 35.514-.84 19.612-8.37 37.303-17.142 57.244-12.184 27.692-26.016 59.814-22.526 104.215 1.285 57.826 31.464 113.704 84.887 145.392 82.36 48.853 188.73 21.7 237.592-60.64 48.86-82.338 21.713-188.687-60.648-237.54a173.597 173.597 0 0 0-40.795-17.617c45.042 34.597 60.388 96.118 36.68 147.875a103.585 103.585 0 0 0-2.44-12.897c-13.92-54.505-68.97-88.07-123.476-74.158-8.882 2.263-16.897 6.52-24.515 10.807 35.86-5.066 70.14 16.573 79.31 52.47 9.83 38.507-13.138 77.213-51.657 87.04a72.644 72.644 0 0 1-29.563 1.326 122.992 122.992 0 0 1-21.586-10.123c-14.722-8.732-26.925-20.077-36.413-33.076-16.793-32.11-20.372-62.952-8.217-94.378l-.035-.014.508-1.154c8.797-19.996 17.684-40.13 18.707-63.97.397-9.248-.45-18.94-2.855-29.228-.53-5.94-1.51-12-2.987-18.136-12.644-52.555-56.53-91.7-100.695-91.672zm282.39 57.53c-28.528-.353-54.46 19.41-67.154 61.7 30.764-33.286 128.965-6.368 182.1 96.524C476.72 139.258 421.974 82.794 374.43 82.207z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/fluffy-swirl.svg b/static/_icons/_ability/fluffy-swirl.svg
new file mode 100644
index 00000000..6d67a8c5
--- /dev/null
+++ b/static/_icons/_ability/fluffy-swirl.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M306.72 22.688c-87.212.763-181.58 53.14-238.19 140.406-.944 1.46-1.677 3.068-2.593 4.53.455-.397.86-.917 1.313-1.31-40.253 56.984-35.183 136.503 15.813 187.5 54.553 54.552 141.745 56.65 199.093 6.78-4.676 6.576-9.916 13.137-15.812 19.03-57 57-149.53 57-206.53 0-17.814-17.81-30.103-38.73-36.783-61.312 2.928 65.605 34.97 122.74 93.907 151.97 103.593 51.374 250.2-2.8 326.875-121C510.904 245.856 502.47 127.374 429.938 65c-10.36-8.91-22.206-16.483-35.156-22.906-25.897-12.844-54.454-19.11-83.905-19.407-1.38-.013-2.772-.012-4.156 0zm1.06 62.406c47.14-.705 82.63 23.414 90.376 58.906v.03c1.417 6.492 1.806 13.565 1.344 21.032-3.682 59.742-68.786 126.655-145.438 149.563-.945.282-1.872.422-2.812.688l.938-.47c-37.843 12.718-74.086-.708-84.438-33.624-7.03-22.36-.468-48.544 15.25-70.408-1.695 7.2-.05 13.91 5.344 18.375 10.643 8.816 31.83 5.575 47.312-7.25 15.483-12.824 19.394-30.37 8.75-39.187-6.294-5.214-16.287-6.21-26.594-3.5.178-.103.353-.21.532-.313-.755.257-1.52.54-2.28.813-.344.123-.69.217-1.033.344a53.788 53.788 0 0 0-8 3.344c-.656.307-1.315.61-1.968.937-42.374 21.24-83.226 68.335-71.656 105.125 3.616 11.497 10.213 20.614 19.094 27.094-30.253-10.44-48.35-34.526-46.563-68.53 3.682-70.837 83.193-133.31 159.844-156.22 14.673-4.385 28.802-6.553 42-6.75z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/flying-dagger.svg b/static/_icons/_ability/flying-dagger.svg
new file mode 100644
index 00000000..aaa414b6
--- /dev/null
+++ b/static/_icons/_ability/flying-dagger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M133.53 10.47c51.747 30.872 96.318 71.166 131.94 119.093C199.33 72.05 115.217 33.942 19.22 21.406c12.584 96.38 50.948 180.807 108.843 247.063-47.45-35.09-87.475-78.907-118.313-129.783v31.219C65.264 272.953 147.488 356.6 249.28 413.812 159.164 375.9 78.843 322.91 10.813 257.375l-.468 38.125C134.828 408.824 300.18 479.697 493.75 494.688c-14.992-193.573-85.27-358.92-198.594-483.407l-41.812.44c64.677 66.753 117.25 145.417 155.28 233.624-57.55-99.84-140.81-180.403-242.937-234.875H133.53zm22.22 149.5c36.29 16.732 71.624 40.59 103.97 68.343l60.717-60.157 34.47 34.438-37.376 23.375c58.01 69.636 105.07 147.97 134.908 230.686-82.466-29.758-160.62-76.55-230.094-134.312l-23.938 36.78-35.062-34.468 60.75-60.72c-27.75-32.335-51.607-67.668-68.344-103.967z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/flying-target.svg b/static/_icons/_ability/flying-target.svg
new file mode 100644
index 00000000..77b49e6e
--- /dev/null
+++ b/static/_icons/_ability/flying-target.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M32 26c2.039 58.968 24.711 113.864 55.371 152.71-25.019-8.539-47.913-18.195-67.29-30.54C38.292 221.2 81.454 252.41 124.76 260.38c-18.355 2.802-41.627 3.987-71.827 2.804 54.487 34.364 101.994 41.915 137.119 32.972C160.413 275.333 141 240.89 141 202c0-25.291 8.215-48.697 22.107-67.705C116.374 116.025 72.222 75.913 32 26zm448 0c-40.222 49.913-84.374 90.024-131.107 108.295C362.785 153.303 371 176.709 371 202c0 38.89-19.413 73.333-49.053 94.156 35.125 8.943 82.632 1.392 137.12-32.972-30.201 1.183-53.473-.002-71.829-2.803 43.307-7.97 86.469-39.182 104.682-112.211-19.378 12.345-42.272 22.001-67.291 30.54C455.289 139.865 477.96 84.969 480 26zm-224 79c-53.678 0-97 43.322-97 97 0 53.348 42.792 96.46 96.012 96.988L208 346v16h28.8L224 490h64l-12.8-128H304v-16l-47.012-47.012C310.208 298.46 353 255.348 353 202c0-53.678-43.322-97-97-97zm0 17.334c43.892 0 79.666 35.774 79.666 79.666 0 43.892-35.774 79.666-79.666 79.666-43.892 0-79.666-35.774-79.666-79.666 0-43.892 35.774-79.666 79.666-79.666zm0 17.998c-34.165 0-61.668 27.503-61.668 61.668s27.503 61.668 61.668 61.668 61.668-27.503 61.668-61.668-27.503-61.668-61.668-61.668zm0 17.336c24.378 0 44.332 19.954 44.332 44.332S280.378 246.332 256 246.332 211.668 226.378 211.668 202s19.954-44.332 44.332-44.332zm0 17.998c-14.65 0-26.334 11.683-26.334 26.334 0 14.65 11.683 26.334 26.334 26.334 14.65 0 26.334-11.683 26.334-26.334 0-14.65-11.683-26.334-26.334-26.334z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/fragmented-meteor.svg b/static/_icons/_ability/fragmented-meteor.svg
new file mode 100644
index 00000000..1369987b
--- /dev/null
+++ b/static/_icons/_ability/fragmented-meteor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m21.89 14.13 197.13 234.324-168.37-153.8 166.03 190.222-52.178 3.793 70.33 46.832-50.58 13.225 44.18 5.152-59.264 43.962 95.676-4.9-19.037 66.435 64.646-52.75 18.363 83.873 18.744-56.713 9.96 35.684 5.628-50.855 53.253 49.696-12.945-80.61 65.406 8.312-39.702-45.69 65.54-41.302-77.66-3.057 36.023-36.22-54.777 23.732 10.576-69.498-54.497 42.585-27.457-71.253-11.863 44.592-203.33-194.897L212.557 183.22 21.893 14.13h-.002zm305.016 181.18v-.005h-.002l.002.004zm34.596 101.266 36.87 45.13-36.026 13.85 1.306-23.154-52.257-16.94 50.107-18.886zm-41.326 35.05-2.127 49.288-41.003-12.37 8.736-27.437 34.393-9.48zm17.543 37.212 42.135 14.045-40.798 20.734-1.338-34.78z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/gluttony.svg b/static/_icons/_ability/gluttony.svg
new file mode 100644
index 00000000..342bd4d7
--- /dev/null
+++ b/static/_icons/_ability/gluttony.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M257 18.47c-53.396 0-105.417 36.548-146.25 90.124C69.917 162.17 40.823 232.14 32.562 294.78c-7.835 59.417 30.29 108.143 86.407 143.25 56.115 35.11 129.43 54.94 184.843 54.94 55.596 0 92.91-17.248 117.562-49.47 21.724-28.396 33.66-69.565 36.188-122.313-9.7 10.265-21.406 18.867-34.47 25.688-28.145 14.696-62.67 21.5-98.78 20.125-72.224-2.75-151.406-38.52-196.688-113.656l-.156-.25-.157-.28c-4.687-9.138-10.08-22.02-10.844-35.533-.383-6.756.442-13.89 3.905-20.405 3.463-6.515 9.75-11.956 17.906-14.875 63.234-22.534 118.354-31.668 167.782-31.844 3.296-.01 6.568.027 9.813.094 41.23.845 78.467 7.92 113.22 18.47a363.461 363.461 0 0 0-20.75-40.75c-7.927 6.703-18.15 10.75-29.283 10.75-25.014 0-45.5-20.47-45.5-45.47 0-14.39 6.782-27.255 17.313-35.594C322.4 33.214 290.277 18.47 257 18.47zm-30.47 29.218c25.014 0 45.5 20.467 45.5 45.468 0 25-20.484 45.438-45.5 45.438-25.013 0-45.5-20.437-45.5-45.438 0-25 20.488-45.47 45.5-45.47zm0 18.687c-14.923 0-26.81 11.89-26.81 26.78 0 14.893 11.888 26.75 26.81 26.75 14.925 0 26.814-11.857 26.814-26.75 0-14.89-11.888-26.78-26.813-26.78zm152.532.125c-14.924 0-26.812 11.858-26.812 26.75s11.89 26.78 26.813 26.78c14.923 0 26.78-11.888 26.78-26.78 0-14.892-11.856-26.75-26.78-26.75zm-71.437 102.094 63.063 79.22 24.406-69c-27.274-6.38-56.13-10.22-87.47-10.22zm-14.28.28c-30.34 1.115-63.008 5.835-98.783 15.22l55.282 68.062 43.5-83.28zm108.217 11.5 50.907 63.47c-3.408-17.608-8.288-35.338-14.5-52.688-11.876-4.022-23.982-7.667-36.408-10.78zM181 187.815a619.177 619.177 0 0 0-31.406 10l19.062 31.717L181 187.813zm11.313 51.405-31.407 29c12.806 15.688 27.42 28.98 43.188 39.936l-11.78-68.937zm226.468 22.374L399.44 337.03c5.223-1.993 10.246-4.236 15-6.717 17.763-9.276 31.938-21.72 41.25-37.188l-36.907-31.53zm-144.217 4.625-54.844 51.81c23.976 13.818 49.92 22.772 75.718 27.19l-20.875-79zm77.593.56-43.562 80.283c5.51.617 10.995 1.073 16.437 1.28 22.865.872 44.853-1.86 64.376-7.843l-37.25-73.72z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/hades-symbol.svg b/static/_icons/_ability/hades-symbol.svg
new file mode 100644
index 00000000..fe703696
--- /dev/null
+++ b/static/_icons/_ability/hades-symbol.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M240 16 112 272l72.8 53 55-37.1L192 256zm32 0 48 240-144 96-64 48 144 96 144-96-64-48-8.2-5.4-56.5 41.2L288 400l-32 32-32-32 176-128z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/half-dead.svg b/static/_icons/_ability/half-dead.svg
new file mode 100644
index 00000000..f1147f4b
--- /dev/null
+++ b/static/_icons/_ability/half-dead.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M266.3 30.62V397.5c20.1-1.1 37.7-5.2 51.3-11.8 15.8-7.7 26.2-18.3 31-32l17.9 6.1c-6.6 19.1-21.3 33.7-40.6 42.9-16.8 8.3-37.2 12.8-59.6 13.7v64.9c43.9-3.1 83.8-26.9 113.7-64.9 31.9-40.7 52-97.5 52-160.4 0-62.9-20.1-119.7-52-160.44-29.9-38.03-69.8-61.92-113.7-64.94zm-19 .95C88.21 38.6 72.04 223.4 72.04 272.8c0 33.6 47.26 18.6 50.36 50.4l16.8 140.6c0 15.3 73.2 18.7 108.1 17.3v-40.4h-16.7v-24.1h-14.8v24.1h-18.9v-24.1h-14.6v24.1h-18.9v-24.1h-17.8v-18.9h17.8v-24.1h18.9v24.1h14.6v-24.1h18.9v24.1h14.8v-24.1h16.7v-31.3l-40.9 10.3 40.9-64.9zM173.2 226.7c25.8 0 52 4.1 54.2 12.5 8.6 32.4 4.4 57.8-16.8 67.2-63.4 27.8-88.2-16.8-88.2-67.2 0-8.4 25.2-12.5 50.8-12.5zm159.1 3c19.1 0 34.7 15.7 34.7 34.7 0 19-15.6 34.6-34.7 34.6-18.9 0-34.6-15.6-34.6-34.6s15.7-34.7 34.6-34.7zm0 19c-8.7 0-15.7 6.9-15.7 15.7 0 8.8 7 15.8 15.7 15.8 8.9 0 15.8-7 15.8-15.8s-6.9-15.7-15.8-15.7z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/hand-wing.svg b/static/_icons/_ability/hand-wing.svg
new file mode 100644
index 00000000..8f977f6d
--- /dev/null
+++ b/static/_icons/_ability/hand-wing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M442.5 24.47C378.5 120.5 186.2 308.5 42.23 340.5c-7.81 0-15.61 30.5-14.12 63.6 41.16-8.5 84.19-23.4 125.49-41.1-2.2-8.9-3.3-17.9-3.1-26.8l.2-5.8 53.7-23.5.7 13c.3 5.7 1.3 11.7 2.8 17.8 11.5-5.7 22.7-11.5 33.4-17.3-.2-1.2-.3-2.3-.4-3.4-.3-6.9.9-12.6 2.3-19 2.6-13.5 7.2-33.4 0-60.2 4.7-3.2 8.5-4.3 11.3-4.3 3 .2 5.3 1.6 7.6 4.9 4.5 5.9 7.3 17.6 8.7 30.7 7 5.4 7.2 4.2 7.3 3.9 11.3-23.7 26.1-48.4 41.2-69.8 3.2-.7 7.3.2 11 2.6 3.4 2 6.2 5.3 7.3 8.2-10.7 15.5-22.1 30.3-31 48.1 2.1 3.2 4.4 6.3 6.5 9.5 16.6-16.5 35.5-31.6 55.9-45.9 1.4.6 2.8 1.3 4 2 .4.2.9.4 1.2.7 5.1 3.4 7.6 8.5 8.9 15.8-20.9 12.7-40.5 27.8-58.7 44.9 1.5 2.6 2.9 5.4 4.4 8.1 21.1-12.3 43.6-20.8 67-26.9 2.4 1.4 4.7 4.5 6 8.6 1.3 4 1.3 8.5-.1 11.8-22.2 5.2-44.1 13.4-65.2 26.3.9 3.3 1.6 6.5 2.1 10 16.5-3.5 32-4.2 47.5-4.2 1.9 2 2.8 5.2 2.4 8.8-.2 3.6-1.7 7.3-4 10.3h-.1c-1.4 0-3.1 0-5.3.3-4.3.2-10.2.7-17.1 1.6-13.5 1.5-30.2 4-43 7.7-7.8 2.2-21.3 5.2-29.1 7.7-6 1.9-12.9.9-19.6-2.2-14.6 9.6-28.8 18.3-42.9 26.3 4.8 8.6 10.1 17 15.5 25l6.3 9.4-54.6 20.6-4.1-5.1c-5.6-7.1-11-14.7-15.9-22.6-43.6 20.1-86.53 34.7-132.76 48.1 7.23 12.5 17.69 22.1 32.39 25.8 69.37 8.6 138.77-1.2 200.27-25.6-22.7-6.8-43.6-16.9-59.3-28 58.3 3.2 100.3-.4 129.7-8.6 17.7-11.7 34.1-24.8 49.1-39.2-19.1-4.5-36.7-11.2-50.2-19 28.3-.4 53.3-3.1 74.8-7.4 24.4-29.3 43-62.6 54-99.1-25.8 4.7-52 4.9-71.8 1.6 32-10.3 58.4-22 79.4-33.9 3.6-20.9 4.7-42.8 3.2-65.3-22 18.1-49 31.7-70.1 37.2 30.9-28 51.9-54.4 64.7-76.2-2.9-13.8-6.7-27.9-11.7-42.16-15.5 17.43-33.7 31.96-49.4 40.46 17.5-25.65 29.8-49.11 38-69.39-3.8-8.43-7.9-16.91-12.4-25.44zM188.6 333.5l-19.8 8.7c1.3 23.6 14.9 51.5 32 74.6l21.1-8c-14.8-23-28.8-48.9-33.3-75.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/hatchet.svg b/static/_icons/_ability/hatchet.svg
new file mode 100644
index 00000000..edcfe324
--- /dev/null
+++ b/static/_icons/_ability/hatchet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M281 24.15 246.4 77.2l80 51.7 55.7 129.4c5.6-2.6 13.4-6.9 21.8-12.7 12.7-8.9 27.2-20.9 40.3-34.4 13.2-13.5 25.1-28.4 32.7-42.8 6.6-12.6 9.9-24.5 9-34.8L359.1 74.97zm-33.4 75.26C164.4 214.2 107.9 325.2 25.98 453.3c0 .1 0 0 .15.4.32 1.1 1.49 3.4 3.53 5.9 4.07 5.1 11.33 11.4 19.22 16.5 7.89 5.1 16.55 9.2 22.88 10.9 3.16.8 5.71.9 6.88.8.37-.1.37-.1.47-.1 21.99-33.8 31.99-49 48.09-110.3l.3-1.3.8-1.1c60.5-97.7 84.9-157 155-252.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/hatchets.svg b/static/_icons/_ability/hatchets.svg
new file mode 100644
index 00000000..2afaf31c
--- /dev/null
+++ b/static/_icons/_ability/hatchets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M210.344 37.688C143.984 44.13 79.87 60.181 25.406 82.28c34.89 96.964 53.863 196.424 58.625 298.283 11.597-16.34 22.7-32.904 33.282-49.75-11.147-47.785-18.01-95.617-22.75-147.282-.032-.205-.03-.387-.062-.593-2.006-13.367.3-24.896 5.938-33.406 5.722-8.64 14.723-13.84 24.093-14.874 16.566-1.828 33.768 9.877 39 30.625 11.84-.146 24.04.525 36.72 2.25a980.996 980.996 0 0 0 27.625-79.468c-4.062-17.09-9.867-33.89-17.53-50.374zm33.062 63.25C211.936 202.874 165.2 296.67 104.812 383.406c20.268-6.85 40.233-14.247 59.907-22.25 20.403-47.25 44.55-91.493 73.093-137.687.103-.197.24-.34.343-.532 6.43-11.87 15.17-19.72 24.78-23.125 9.77-3.462 20.08-2.185 28.19 2.625 14.333 8.503 21.04 28.18 12.75 47.906a249.414 249.414 0 0 1 27.937 23.812 982.37 982.37 0 0 0 59.593-41.937l7.094-5.407 2.28 2.718c7.482-16.733 13.267-34.34 17.22-52.905-56.9-34.774-117.79-60.575-174.594-75.688zm152 151.593c-98.643 73.604-207.298 126.464-325 161.376 2.707 25.087 9.24 40.237 30.03 54.406 70.145-52.36 138.253-87.52 218.283-120.125.19-.078.37-.17.56-.25v.032c12.2-5.808 23.878-7.014 33.658-4.095 9.93 2.964 17.533 10.085 21.25 18.75 6.57 15.317.383 35.172-17.938 46.22 6.7 21.078 11.115 44.2 11.75 70.56 46.653-10.584 88.176-30.81 123.906-62.842-25.487-61.64-59.505-118.334-96.5-164.032z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/high-shot.svg b/static/_icons/_ability/high-shot.svg
new file mode 100644
index 00000000..001f1140
--- /dev/null
+++ b/static/_icons/_ability/high-shot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m492.656 20.406-118.594 56.22L413.875 86l-86.97 86.97-305.5 259.374.69.687 104.75-47.467-46.376 105.843.905.906 272.5-319.875 73.22-73.218 9.342 39.81 56.22-118.624zm-473.25.063c-1.347 23.43 5 39.947 16.563 52.218l24.093 302.28 17.562-14.874-21.72-272.438C113.879 119.609 225 112.82 272.811 194.375l66.625-56.564 1.22-1.218C292.74 38.666 86.01 99.716 19.406 20.47zm359.531 151.56-1.156 1.157-57.25 67.188c82.006 47.945 75.587 159.267 107.283 218.03l-272.157-24.5-14.812 17.408 301.562 27.125c12.48 12.283 29.4 19.084 53.688 17.687-79.95-67.2-18.36-275.754-117.156-324.094z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/holy-grail.svg b/static/_icons/_ability/holy-grail.svg
new file mode 100644
index 00000000..36a5ff51
--- /dev/null
+++ b/static/_icons/_ability/holy-grail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M54.125 102.188c-15.624 74.885 20.42 123.6 64.125 150.562-33.063-7.81-65.052-19.482-98.25-36.844 25.5 77.488 81.164 95.816 129.906 90.75-26.933 14.252-55.392 25.3-83.937 32.78 70.04 43.512 120.987 16.005 149-22.28-30.186-17.833-52.692-53.794-63.032-98.344-38-34.814-71.414-75.012-97.813-116.625zm402.938 0c-26.397 41.608-59.816 81.786-97.813 116.593-10.338 44.564-32.84 80.54-63.03 98.376 28.01 38.285 78.957 65.792 149 22.28-28.542-7.48-56.978-18.53-83.908-32.78 48.736 5.055 104.38-13.28 129.875-90.75-33.197 17.362-65.187 29.035-98.25 36.844 43.705-26.963 79.75-75.677 64.125-150.563zm-201.47 26.187c-23.56 0-44.93 3.576-61.218 9.844-8.145 3.133-15.045 6.906-20.438 11.81-5.392 4.907-9.5 11.53-9.5 19.157 0 .89.05 1.765.157 2.625 2.62 64.952 32.08 117.553 67.28 133.188l6.94 3.094-1.595 7.406c-8.645 40.282-20.575 63.61-40.94 77.03-11.193 7.378-14.184 13.215-14.374 15.126-.19 1.91.765 4.2 6.844 7.906 12.158 7.41 39.925 13.157 66.844 13.157 26.872 0 53.258-5.944 64.687-13.408 5.716-3.73 6.812-6.22 6.626-8.53-.186-2.312-2.937-7.934-13.094-15.22-19.326-13.862-31.327-36.107-39.843-76.062l-1.595-7.406 6.938-3.094c35.2-15.635 64.662-68.236 67.28-133.188h-.03c.106-.86.156-1.735.156-2.625 0-7.626-4.077-14.25-9.47-19.156-5.393-4.905-12.324-8.677-20.47-11.81-16.288-6.27-37.627-9.845-61.186-9.845zm0 18.688c21.617 0 41.154 3.47 54.47 8.593 6.657 2.562 11.708 5.563 14.593 8.188 2.886 2.625 3.375 4.28 3.375 5.344 0 1.063-.488 2.718-3.374 5.343-2.885 2.626-7.936 5.627-14.594 8.19-13.315 5.122-32.852 8.593-54.468 8.593-21.616 0-41.184-3.47-54.5-8.594-6.658-2.563-11.708-5.564-14.594-8.19-2.886-2.624-3.375-4.28-3.375-5.343 0-1.063.49-2.718 3.375-5.343 2.886-2.625 7.936-5.626 14.594-8.188 13.316-5.123 32.884-8.594 54.5-8.594z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/injustice.svg b/static/_icons/_ability/injustice.svg
new file mode 100644
index 00000000..40052ee6
--- /dev/null
+++ b/static/_icons/_ability/injustice.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M403.438 23.08s-70.897 56.757-118.08 70.513c-47.182 13.756-70.642-15.469-70.642-15.469s14.65 34.485-19.828 69.494c-34.482 35.01-118.112 70.531-118.112 70.531l-2.366 13.93 6.452 8.121L29.36 376.606c-.6 1.101-.593 2.104-.593 3.313 0 18.897 8.252 34.243 20.343 44 12.09 9.758 27.564 14.31 42.938 14.312 15.376.003 30.877-4.555 42.969-14.312 12.092-9.756 20.343-25.094 20.343-44 .198-1.352-.192-2.316-.687-3.531L99.735 241.76c.059-1.373.239-2.845 1.551-6.002 20.336-15.642 69.497-51.446 106.305-61.696 18.947-5.273 35.577.53 35.015 6.936L215.87 369.577l21.406 30.31c-17.75 7.75-32.593 24.84-37.562 51.344-56.076 6.195-95.469 20.742-95.469 37.69H416.12c0-16.947-39.392-31.495-95.467-37.69-4.91-26.6-19.57-44.112-37.187-51.906l21-29.75-30.737-194.596c4.17-19.161 18.107-42.676 28.875-57.654 16.23-22.415 108.224-65.652 109.659-64.096l-54.938 134.627c-.495 1.216-.885 2.18-.687 3.532 0 18.906 8.251 34.244 20.343 44 12.092 9.757 27.595 14.315 42.971 14.312 15.374-.003 30.846-4.554 42.936-14.312 12.09-9.757 20.345-25.103 20.345-44 0-1.21.004-2.212-.595-3.313L430.796 50.763c.97-4.868 3.99-8.561 7.094-12.034l-11.833-14.786zm18.264 56.526 40.936 108.375h-85.155zM90.296 268.138l44.22 108.375H49.36z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/interleaved-claws.svg b/static/_icons/_ability/interleaved-claws.svg
new file mode 100644
index 00000000..da4260b5
--- /dev/null
+++ b/static/_icons/_ability/interleaved-claws.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M60.113 18.73c33.985 13.337 68.53 30.25 96.555 51.81 21.406 16.47 39.11 35.722 49.24 58.485 7.67 17.234 10.745 36.477 7.817 57.092 28.568-7.727 58.908-10.21 88.316-6.37 25.235-66.077 3.016-128.26-32.253-161.017H196.67c44.027 40.57 53.718 85.142 40.033 138.98-8.817-62.917-32.8-110.574-79.9-138.98h-96.69zM20.76 58.28l.002 101.304c34.77 67.286 88.72 100.505 202.74 77.37-98.08 43.995-156.795 28.454-202.74-29.65v35.284c40.106 43.683 107.55 54.225 173.36 33.24 46.354-14.782 99.558-18.094 148.493-2.453 20.852 6.665 40.87 16.884 59.074 31.05 40.147 34.647 66.92 91.697 87.636 146.92 10.54-98.417-29.362-207.134-81.44-274.095 3.06 24.236 1.91 43.957-3.76 59.748-12.584-22.802-30.257-40.22-48.317-57.232 1.14 11.13 1.802 22.258-4.8 33.418-43.45-20.59-96.113-21.04-142.612-6.002-28.31 9.156-54.575 7.03-77.34-3.098-22.764-10.13-42.018-27.836-58.486-49.242-21.56-28.027-38.476-62.574-51.812-96.56zm251.502 223.554c-24.807.243-49.535 4.487-72.463 11.8-.03.008-.057.015-.085.024 1.79 16.373 5.68 32.39 11.842 47.457-11.416 12.546-23.812 12.986-36.264 12.787 18.202 16.29 36.797 32.14 61.137 41.55-10.027 14.25-23.763 18.616-37.74 22.353 20.99 10.185 42.16 20.005 65.175 26.004-14.65 9.27-32.843 16.01-53.595 20.92 78.16 32.975 193.5 43.38 285.835 7.727-30.718-2.99-61.58-7.668-90.123-15.762-106.234-25.83-181.07-88.907-157.263-158.675 6.55 34.33 22.78 59.386 45.704 80.666a173.717 173.717 0 0 1-15.223-38.815c-4.94-19.033-6.754-38.616-5.884-58.036-.35.002-.703-.003-1.054 0z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/james-bond-aperture.svg b/static/_icons/_ability/james-bond-aperture.svg
new file mode 100644
index 00000000..76f1fd0d
--- /dev/null
+++ b/static/_icons/_ability/james-bond-aperture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m146 18.09-.3 2.13C210 29.23 267.9 61.24 310 107.9c-9.7-1.7-19.4-2.8-29.1-3.4 45.9 39.7 64.4 103.8 46 162.3 26-18.7 45.4-46.6 52.9-79.8-29.2-77.8-91.4-139.34-168.3-168.91zm267.8 0c28.6 77.52 19.4 160.31-18.9 227.51-1.4-9.5-3.2-18.8-5.5-27.9-20.3 47.4-63.4 81.5-113.9 90.7-9.8 2.3-18.3 2.4-27.8 2.4 25.3 19.4 57.3 30 91 28 94.7-74.5 135.2-202.8 94.9-320.71zM248.7 104.3c-97.2 5.2-186.06 62.2-230.83 150V304c21.42-69.8 70.21-124.2 131.33-154.6-4.5 8.5-8.4 17.2-11.9 26 25.3-16.3 54.4-24.5 83.4-24.6 30.8 0 61.5 9.2 87.7 27.4-9.9-30.1-30.5-56.8-59.7-73.9zm-32.2 65.2c-32.5 1-64.7 13.8-89.8 38.2-27.13 103.4 7.4 216.2 92.5 286.3h31c-66.6-45.4-105.8-116.5-112.8-191.2 6.6 7.1 13.6 13.8 20.9 20.1-12.6-57.7 9.9-117.7 58.2-153.4zm40.7 12.8c-30.4 0-54.8 24.5-54.8 54.9s24.4 54.8 54.8 54.8 54.8-24.4 54.8-54.8-24.4-54.9-54.8-54.9zm-75.7 63c-11.3 30.6-11.2 65.1 2.7 97.5 91.5 62 214.5 64.6 309.6.2v-23C434.4 364.7 362 379.8 294 367.7c6.6-3.4 13-7.1 19.2-10.9-61.6-7.1-114.2-50.9-131.7-111.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/melting-ice-cube.svg b/static/_icons/_ability/melting-ice-cube.svg
new file mode 100644
index 00000000..d48be679
--- /dev/null
+++ b/static/_icons/_ability/melting-ice-cube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M147.7 47.51c-18.5 1.07-20 4.26-25.8 21.09l-61.08 184c-4.93 31.5-43.19 39.2-35.94 75.4 4.32 17.6 38.84 14 44.66 31.1 8.92 26.4-44.79 59.6-25.46 79.7 21.62 22.4 59.92-33.3 90.02-25.2 21.6 5.8 22.5 69.5 44.3 74.4 40.8 9.2 79.6-60.3 119.5-74.3 57.8-19.3 104.6 59.7 134.8 40.7 18.4-13.3-1-39.2-4.4-67.9 1.9-36.6 72.6-21.7 57.7-53.6-9.4-11.6-23.5-18.7-40.4-22.7l39-117.6c4.6-13.6 1.3-20.9-8-27.9L335.9 54.6c-9.1-7.26-16.5-11.45-24.2-13.65-51.4-5.4-110.3 3.4-164 6.56zM271 56.74c14.5 0 25.4 1.17 35.4 4.14 18.9 5.63 34.3 17.44 63.9 40.52 67 52 91.9 73.9 37 78.3-65.6 5.5-112.4 5.5-142.9-20.2l-76.6-64.67c-23.9-20.23-29-32.42 26-35.67 24.4-1.41 42.6-2.46 57.2-2.42zM140.9 83.23c15.7 2.9 41.7 27.67 48.7 33.67 97 83 96 85.3 56.6 190.1-2.9 7.6-5.5 14.5-7.9 20.7-6.4.5-12.8.5-19.2.1 5.6-9.4 9.4-20 11.2-25.4 16.5-49.9 11-92 .2-113-4.8-9.2-10.2-13.6-13.8-14.7-18.4 8.3-17.1 31.8-37 38.4-26.5 6.1-51-13.4-70.7 8.9-17.04 22-13.41 39.3 1.2 58.4 6.2 8.1 14.3 16 23 23.7-16.3-7-31.7-14.3-45.82-20.5-11.37-15.4-11.24-28.4-3.79-50.5L126.4 105c4.5-13.77 7.6-21.67 14.5-21.77zm172.4 19.97c-19.6-.3-31.7 9.7-36 20.5-3.1 7.8-2.3 16.2 3.7 23.8 5.9 7.4 17.7 14.3 37.4 16.2 30.1 2.9 52.4 2.6 66.9.1 24.2-4.2 24.9-10.5 8.6-24.5-9.9-8.3-26.5-18.1-48.4-28.1-10.4-4.4-21.5-7.7-32.2-8zm104 92.9c9.5.1 17 .7 22.7 2.3 23.4 6.6 16.5 29.2-3.6 89.8-2.3 6.8-4.4 13.2-6.4 19.2-5.9-.7-12-1.2-18.3-1.4 5.5-13.5 10.3-29 14.1-46.5 4.6-17.6-7.7-44.3-25.6-30.6-4.5 3.7-8.9 10.1-11.1 20.9-3 13.9-12.5 29.2-25.5 41.7-32.3 22.2-72.6 27.5-107.1 33.8l31-83.4c13.9-37.4 18.2-39.2 95.1-44.3 13.8-.9 25.2-1.5 34.7-1.5zm-105.7 33.6c-5.9 8-5.7 21.7-.8 34.2 5.7 14.3 12.6 17.3 21.2 16.8 8.6-.3 19.7-6.2 28.1-14.7 8.4-8.6 14-19.5 14.3-27.2.1-9.9-8-13.6-15.4-15.8-15-3.4-37.3-6.3-47.4 6.7zm-1.4 202.4c-2.9 0-5.6.6-7.9 2.1-9.2 5.9-1.9 25.4 6.7 32.2 9.1 7.2 31.4 10 34.9-1.1 4.4-13.9-17.9-33.1-33.7-33.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/musical-score.svg b/static/_icons/_ability/musical-score.svg
new file mode 100644
index 00000000..e06f953e
--- /dev/null
+++ b/static/_icons/_ability/musical-score.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M138.2 22.71c-25.5-.14-45.82 38.57-50.14 80.29H32v18h55.23c.07 6.1.49 12.1 1.33 18l17.34-18h25.5c-3.8 3.9-7.9 7.7-12.1 11.8l-31.24 32.5v-.1c-.53.6-1.1 1.2-1.64 1.8H32v18h38.17c-12.95 14.6-25.91 30.2-35.67 46H34v.8c-8.09 13.3-13.89 26.8-15.44 39.9-3.5 33.5 9.52 67.3 33.39 87.3H32v18h65.54c2.56.1 5.16.1 7.86 0h20.1c3.7 20.7 7 41.2 8.9 60 .4 3.6-6.6 10.6-10 11.4 0-22-17.8-39.9-39.84-39.9-21.9 0-39.8 17.9-39.8 39.9.1 20.1 15.2 35.8 35 39.5 41.84 7.7 78.34-17.9 72.44-53-2.9-19.1-6.2-38.5-9.7-57.9H480v-18H139.3c-2.9-15.5-5.8-30.9-8.5-46h37.3c-2.6 7.8-8.1 15.9-15.4 23l3.7 20.8c15.5-11.3 31.3-26.6 35.7-43.8H480v-18H192.9c-1.6-14.5-7.8-30.8-17.8-39.9-2.5-2.3-5.1-4.3-7.8-6.1H480v-18H116.8c-1.2-7.7-1.9-11.8-2.7-16.4l-15.54 15.1c.08.4.17.9.25 1.3H72.63c12.31-16.2 26.52-30.9 41.17-46H480v-18H130.9c10.5-11.3 20.9-23.2 30.7-36.4 2-2.8 3.8-6 5.3-9.6H480v-18H172.1c2.5-12.89 2.7-26.36 1.2-35.24-2.7-16.12-14.2-42.89-31.9-44.83-1.1-.14-2.1-.22-3.2-.22zm-5.5 37c6.9.1 14.4 5.8 15.6 15.95 1.3 11.18-.3 19.87-3.8 27.34h-36c3.4-20 11.2-42.23 24.2-43.29zM60.23 249h31.24c-13.45 12.5-19.59 29.6-18.93 46H42.79c.04-5.6.98-11.3 2.97-17 4.02-10.4 8.93-20 14.47-29zm63.57 11.3c11.8-.3 26.9 5.8 34 12.9 5.7 6.2 9.6 14.1 11.2 21.8h-41.5c-2.1-11.8-4.2-23.4-6-34.6.7-.1 1.5-.1 2.3-.1zm-19.4 6.5c1.5 8.9 3.3 18.4 5.2 28.2H90.63c.1-11 4.22-21.2 13.77-28.2zM45.75 313h30.39c2.69 7.2 6.83 13.9 12.42 19.4 5.1 5.2 15.14-2.7 10-8.6-1.93-3.5-3.54-7.1-4.81-10.8h19.35c3 15 6.1 30.5 9.1 46h-20v-.1c-25.44-3.3-48.49-22.3-56.45-45.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/on-target.svg b/static/_icons/_ability/on-target.svg
new file mode 100644
index 00000000..00cc504a
--- /dev/null
+++ b/static/_icons/_ability/on-target.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M107.563 21.406c122.47 187.613 107.72 216.17-74.97 55.813 83.344 103.73 183.05 185.66 287.876 260.75-47.685 54.762-65.51 116.2-39.283 141.374 27.95 26.827 95.317 2.292 150.25-54.938 54.934-57.23 76.668-125.547 48.72-152.375-26.4-25.338-87.652-4.57-140.657 46.033C267.523 213.846 194.602 110.56 107.562 21.406zm324.906 266.781c9.865-.14 18.234 2.508 24.25 8.282 21.386 20.528 4.908 72.768-37.126 116.56-42.035 43.794-93.957 62.81-115.344 42.283-19.952-19.15-6.325-65.992 29.72-107.75 3.706 2.625 7.405 5.264 11.124 7.875-26.5 31.075-36.24 65.542-21.406 79.78 16.03 15.39 54.65 1.294 86.156-31.53 31.507-32.825 44-71.99 27.97-87.375-15.205-14.592-50.578-2.533-81.064 26.75-2.594-3.763-5.187-7.52-7.78-11.282 28.526-27.297 60.18-43.263 83.5-43.592zm-22.033 37.375c5.66-.08 10.457 1.44 13.907 4.75 12.267 11.774 2.827 41.758-21.28 66.875-24.11 25.118-53.89 36.024-66.158 24.25-11.245-10.793-3.876-36.93 16-60.562 5.976 4.173 11.97 8.327 17.97 12.47-9.746 11-14.027 22.66-9.563 27.124 4.904 4.903 18.483-.735 30.343-12.595 11.86-11.86 17.498-25.47 12.594-30.375-4.778-4.778-17.8.476-29.438 11.72-4.21-6.092-8.42-12.186-12.625-18.283 16.46-15.875 34.774-25.184 48.25-25.375z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/perpendicular-rings.svg b/static/_icons/_ability/perpendicular-rings.svg
new file mode 100644
index 00000000..204b9483
--- /dev/null
+++ b/static/_icons/_ability/perpendicular-rings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M331.924 20.385c-36.708.887-82.53 60.972-116.063 147.972h.003c30.564-65.57 71.17-106.39 97.348-99.378 28.058 7.516 37.11 69.42 24.847 148.405-.895-.32-1.773-.642-2.672-.96.893.367 1.765.738 2.65 1.106-2.988 19.215-7.22 39.424-12.767 60.12a597.023 597.023 0 0 1-8.936 30.14c-24.996-3.82-52.374-9.537-80.82-17.16-105.856-28.36-186.115-72.12-179.307-97.53 4.257-15.884 42.167-23.775 95.908-20.29-74.427-8.7-128.912-2.044-135.035 20.803-9.038 33.73 89.168 89.372 219.147 124.2 24.436 6.55 48.267 11.897 70.918 16.042-28.965 75.878-68.293 126.078-96.653 118.48-21.817-5.85-35.995-45.443-36.316-100.206-4.79 75.476 9.278 131.945 40.66 140.356 38.836 10.407 91.394-54.998 127.896-152.98 80.12 10.74 138.958 4.278 145.38-19.682 6.384-23.82-41.025-58.44-115.102-89.03 20.713-109.022 8.483-198.5-31.96-209.34a32.105 32.105 0 0 0-9.124-1.07zm40.568 213.086c44.65 22.992 71.146 47.135 67.07 62.348-4.055 15.13-38.104 20.457-87.333 16.303a683.98 683.98 0 0 0 9.63-32.663 677.026 677.026 0 0 0 10.632-45.986z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/radar-sweep.svg b/static/_icons/_ability/radar-sweep.svg
new file mode 100644
index 00000000..2c7283ee
--- /dev/null
+++ b/static/_icons/_ability/radar-sweep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M252.78 20.875c-1.302.012-2.6.03-3.905.063-37.928.974-76.148 11.153-111.28 31.437C25.164 117.285-13.41 261.322 51.5 373.75s208.946 151.036 321.375 86.125c77.7-44.86 120.1-127.513 117.47-211.406-3.563 65.847-35.898 128.573-91 169.374a217.993 217.993 0 0 1-35.814 25.844c-103.68 59.86-235.983 24.4-295.842-79.282-59.86-103.68-24.43-235.984 79.25-295.844 35.64-20.576 74.67-29.88 112.968-29.03 63.304 1.4 124.623 30.57 165.438 82.53l-32.594 23.032c-33.27-42.835-84.01-66.6-136.063-67-.96-.008-1.91-.012-2.875 0-.964.01-1.943.038-2.906.062-28.006.717-56.222 8.215-82.156 23.188-82.99 47.914-111.508 154.322-63.594 237.312 47.914 82.99 154.32 111.51 237.313 63.594 51.37-29.66 81.862-81.724 86.28-136.78-12.53 45.37-42.32 86.745-85.438 114.186-.02.013-.043.018-.062.03l-.344.22a158.059 158.059 0 0 1-9.78 6.156c-74.245 42.865-168.918 17.494-211.782-56.75-42.864-74.243-17.493-168.917 56.75-211.78 23.2-13.396 48.39-20.122 73.375-20.782 47.953-1.266 95.138 19.858 125.968 59.156l-39.844 28.156c-20.232-24.32-50.055-37.79-80.594-38.03-1.17-.01-2.33 0-3.5.03-17.035.432-34.176 4.995-49.938 14.094-50.435 29.12-67.806 93.877-38.687 144.313 29.12 50.434 93.908 67.806 144.344 38.686 21.245-12.267 36.623-30.85 45.124-52.03-18.815 21.064-44.364 36.888-73.938 44.155-.04.013-.084.02-.125.033-37.507 10.787-78.796-4.816-99.217-40.188-24.07-41.688-9.845-94.712 31.843-118.78 13.028-7.523 27.143-11.314 41.156-11.69 25.66-.685 50.898 10.098 68.188 30.25l-41 28.97c-5.497-4.796-12.664-7.72-20.53-7.72-17.277 0-31.283 14.007-31.283 31.282 0 17.276 14.004 31.282 31.282 31.282 17.277 0 31.28-14.007 31.28-31.283 0-1.187-.06-2.347-.188-3.5l120.094-57.312 4.03-1.75-.06-.156 62.25-29.72 9.25-4.438-5.282-8.812-19.97-33.375-5.155-8.625-8.25 5.813-8.095 5.718c-45.9-58.864-116.14-91.053-187.844-90.405z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/rapidshare-arrow.svg b/static/_icons/_ability/rapidshare-arrow.svg
new file mode 100644
index 00000000..69e6d593
--- /dev/null
+++ b/static/_icons/_ability/rapidshare-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M136.094 25.875c-15.79.166-26.534 4.426-33 11.906-6.32 7.31-8.877 18.45-6.656 34.22 1.01 7.182 3.17 15.27 6.187 23.906 25.733-6.88 59.657-5.89 97.438 3.47 45.22 11.2 95.64 34.696 141.687 73.343 69.268 58.135 120.23 99.117 152.78 178.28-3.425-33.22-15.525-65.535-32.03-94.875-24.64-43.798-58.534-80.653-84.03-102.78-60.464-52.477-122.706-91.336-173.564-111.532-25.428-10.1-48.027-15.5-65.594-15.907a94.372 94.372 0 0 0-3.218-.03zM77.22 67.72l-44.94 51.968c-6.363 7.362-8.96 18.47-6.78 34.156 2.18 15.687 9.306 35.27 21.03 56.875 23.45 43.21 65.05 94.57 119.22 143.468l6.875 6.187-6.125 6.938-27.656 31.28L380.25 479.03 261.156 256.656l-26.22 30.156-6.374 7.344-7.093-6.656c-53.73-50.503-95.835-103.37-120.5-149.47-12.334-23.048-20.352-44.395-23.032-63.436a99.284 99.284 0 0 1-.72-6.875z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/return-arrow.svg b/static/_icons/_ability/return-arrow.svg
new file mode 100644
index 00000000..ef25fed1
--- /dev/null
+++ b/static/_icons/_ability/return-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m19.828 18.256-.002.015c249.642 36.995 371.904 169.983 397.32 278.01-2.094 5.977-4.496 11.044-7.068 14.968-17.29 26.383-62.522 40.075-101.654 28.596 5.984-19.75 10.132-39.834 12.07-59.12-95.46 8.177-212.544 8.42-301.207-22.642 41.727 95.317 99.325 164.465 164.983 230.08 18.296-2.164 35.807-11.35 51.837-25.37 85.218 34.667 188.066-2.555 226.748-60.68 46.922-70.5 74.07-317.52-167.462-383.856H232.81c160.326 54.874 195.73 167.74 191.573 239.03-37.15-93.627-137.68-191.855-312.38-239.03H19.83z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/scales.svg b/static/_icons/_ability/scales.svg
new file mode 100644
index 00000000..0929e8ff
--- /dev/null
+++ b/static/_icons/_ability/scales.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M254.47 53.094s-4.808 37.12-49.5 49.5c-44.695 12.38-129.282 0-129.282 0L61.343 115.78l8.187 9.157-1.093 2.876-51.843 137.312L16 266.72v1.717c0 18.897 8.253 34.243 20.344 44 12.09 9.758 27.563 14.31 42.937 14.313 15.376.003 30.878-4.556 42.97-14.313 12.092-9.756 20.344-25.094 20.344-44v-1.843l-.688-1.688L86.97 130.28c23.946-3.003 80.866-8.54 115.5 1.532 23.064 6.71 36.151 20.345 43.436 31.97L210.78 354.468l21.407 30.31c-17.75 7.75-32.593 24.84-37.562 51.345-56.076 6.195-95.47 20.74-95.47 37.688h311.876c0-16.947-39.392-31.493-95.467-37.688-4.91-26.6-19.57-44.112-37.188-51.906l21-29.75L264 162.28c7.457-11.275 20.388-24.045 42.47-30.468 34.955-10.167 92.615-4.42 116.155-1.437l-50.875 134.75-.625 1.594v1.717c0 18.897 8.253 34.243 20.344 44 12.09 9.758 27.593 14.31 42.967 14.313 15.375.003 30.877-4.556 42.97-14.313 12.09-9.756 20.343-25.094 20.343-44v-1.843l-.688-1.688L441 127.562l-.938-2.28 8.782-8.438-15.594-14.25s-84.556 12.38-129.25 0-49.53-49.5-49.53-49.5zM77.53 156.656l44.22 108.375H36.594L77.53 156.657zm355.158 0 44.218 108.375H391.72l40.967-108.374z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/scar-wound.svg b/static/_icons/_ability/scar-wound.svg
new file mode 100644
index 00000000..b7391669
--- /dev/null
+++ b/static/_icons/_ability/scar-wound.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M17.736 19.96c16.94 32.065 35.82 63.162 56.496 93.315 8.384 21.977 3.6 46.57-37.845 76.315 150.19-40.237 106.49 56.516-11.266 126.22 199.958-74.2 249.65-57.033 121.08 93.788 101.084-73.473 180.62-53.61 147.825 37.632 38.067-29.477 69.664-35.763 93.87-25.097 34.812 24.628 71.08 48.27 108.668 70.935-20.512-40.28-42.167-79.152-65.374-116.306-18.072-38.867-22.457-79.24-7.493-113.918-56.766 70.273-91.592 5.3-4.924-85.084-122.303 75.43-177.787 37.864-16.875-106.178-123.854 65.763-219.54 83.267-157.507 18.285-44.75 12.79-70.03 6.265-91.474-2.93C111.59 61.1 66.732 38.62 17.736 19.958zm49.56 39.923c28.685 21.552 56.615 43.913 83.862 67.056l36.617-9.522-22.105 21.978a1841.984 1841.984 0 0 1 46.09 41.39l71.86-30.462-18.776 29.02.3-.24c-21.556 27.54 18.764 86.03 45.995 78.423l31.913-17.7-24.787 36.534 36.875 52.71c.262.3.526.598.788.9 13.642 12.504 31.23 1.71 43.05-14.525l-19.59 41.985a2198.983 2198.983 0 0 1 62.91 78.494 1478.325 1478.325 0 0 1-67.468-50.887c-19.98-11.91-31.485.295-44.256 16.856 8.794-18.174 13.377-36.95 3.24-50.864-1.488-1.28-2.978-2.555-4.46-3.84l-44.856-35.346-47.738 26.48 17.187-25.336c7.31-12.403 3.43-27.175-5.648-41.144a1648.911 1648.911 0 0 1-32.216-33.043 144.981 144.981 0 0 0-4.957-3.493l-66.44 18.863 21.768-25.76c10.566-17.616 0-41.59-9.848-55.7a1834.825 1834.825 0 0 1-16.617-19.743l-43.666 7.283c18.428-7.3 31.37-22.376 16.844-40.04l-2.268-2.562c.83.86 1.57 1.713 2.268 2.563l2.062 2.33a2001.813 2001.813 0 0 1-47.933-62.657z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/scythe.svg b/static/_icons/_ability/scythe.svg
new file mode 100644
index 00000000..37ec8059
--- /dev/null
+++ b/static/_icons/_ability/scythe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M296.625 25.406c-63.794.388-135.81 14.683-206.03 32.844-3.472 34.08 2.226 68.906 14.03 104.25C181.175 75.936 393.65 44.825 486.72 128 456.02 50.466 384.046 24.874 296.624 25.406zM65.655 61.438 27.906 71c5.643 78.022 28.546 132.393 60.44 174.47-16.54 10.348-40.693 19.673-68.782 26.843 5.664 6.597 14.25 16.18 30.53 18.53 24.846-4.33 39.912-14.982 53.75-26.593 76.24 85.145 190.22 118.955 253.126 224.22l49.436-.126C290.996 275.316 81.01 364.804 65.656 61.438z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/shaking-hands.svg b/static/_icons/_ability/shaking-hands.svg
new file mode 100644
index 00000000..431ddca2
--- /dev/null
+++ b/static/_icons/_ability/shaking-hands.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m494 61.363-82.58 77.934 78.994 132.96 3.586-4.458V61.362zM18 62.5v225.893c4.48.582 9.863.903 15.295.96 11.87.125 21.654-.65 27.15-1.144L113.1 154.974 18 62.5zm389.154 104.86-7.04 4.556c-.15.097-5.362 3.336-6.893 4.29l-10.605 6.42.15.09c-4.914 3.057-6.28 3.917-11.857 7.38-2.83 1.757-2.9 1.798-5.584 3.465-20.29-10.907-42.306-19.29-67.998-25.882-32.312 9.762-66.542 23.888-100.722 37.142 14.19 17.087 29.96 22.651 45.845 22.85 18.42.23 37.25-7.78 50.218-16.754l7.4-5.12 7.426 10.73 115.453 83.33 45.112-29.987-60.906-102.51zm-280.677 2.74L81.11 284.887l16.65 12.803 30.795-34.905 2.467-2.795 3.72-.232c1.5-.094 2.98-.138 4.44-.13 10.212.066 19.342 2.716 26.19 8.76 5.072 4.472 8.444 10.426 10.4 17.32l2.28-.142c11.995-.75 22.802 1.725 30.63 8.63 7.827 6.907 11.63 17.323 12.38 29.32l.07 1.08c6.44 1.216 12.205 3.752 16.893 7.888 7.828 6.906 11.63 17.32 12.38 29.317l.197 3.12a37.65 37.65 0 0 1 1.9.658l2.033-2.853 5.47-7.678 2.813-3.95 7.33 5.223 59.428 42.336c6.464-1.594 10.317-4.075 12.46-7.086 2.147-3.012 3.233-7.47 2.624-14.107l-71.258-51.03-7.318-5.24 5.19-7.246 6.67-9.365 7.33 5.223 80.335 57.226c6.464-1.593 10.32-4.074 12.463-7.085 2.144-3.01 3.23-7.457 2.625-14.082l-92.398-65.55-7.34-5.21 10.414-14.68 7.343 5.208 92.414 65.565c6.47-1.594 10.327-4.075 12.473-7.088 2.148-3.015 3.233-7.476 2.62-14.125l-110.44-79.71c-14.655 8.688-33.402 15.648-53.557 15.396-23.587-.295-48.817-11.566-67.377-40.05a9 9 0 0 1 4.343-13.327c13.014-4.945 26.163-10.17 39.343-15.354l-92.056-6.834zm12.902 107.62-47.564 53.91c.927 6.746 3.04 10.942 5.887 13.454 2.847 2.512 7.275 4.085 14.084 4.164l47.563-53.908c-.927-6.747-3.04-10.945-5.887-13.457-2.847-2.512-7.274-4.084-14.084-4.162zm43.308 25.81-53.713 60.88c.926 6.747 3.04 10.945 5.886 13.457 2.85 2.51 7.275 4.083 14.085 4.16l53.713-60.878c-.926-6.748-3.04-10.944-5.887-13.457-2.846-2.512-7.273-4.085-14.083-4.164zm29.34 38.286-47.56 53.91c.927 6.746 3.04 10.943 5.887 13.456 2.848 2.512 7.275 4.083 14.084 4.162L232 359.44c-.927-6.75-3.04-10.947-5.887-13.46-2.847-2.512-7.274-4.083-14.084-4.162zm24.702 39.137-38.794 44.28c.925 6.76 3.038 10.962 5.888 13.476 2.845 2.51 7.267 4.082 14.067 4.163l38.796-44.28c-.926-6.758-3.04-10.96-5.89-13.476-2.844-2.51-7.266-4.08-14.066-4.162zm35.342 4.79c1.694 4.62 2.673 9.74 3.014 15.192l.232 3.704-8.277 9.448 26.724 19.037c6.464-1.594 10.316-4.075 12.46-7.086 2.145-3.01 3.233-7.464 2.628-14.093l-36.78-26.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/shattered-sword.svg b/static/_icons/_ability/shattered-sword.svg
new file mode 100644
index 00000000..632b7c01
--- /dev/null
+++ b/static/_icons/_ability/shattered-sword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m496.223 16.818-48.475 44.205 48.475 4.575v-48.78zm-41.55 1.22-68.91 11.28-7.04 65.547 75.95-76.828zM352.26 77.907l-87.887 50.3 15.447 41.026 82.662-16.87-10.222-74.456zm64.34 25.022-32.967 67.443 24.842 70.684 54.314-134.19-46.19-3.937zm-271.362 72.808c-10.02.155-20.714 3.165-30.79 9.057 4.143 8.863 3.382 18.708-2.776 24.873-6.158 6.165-15.993 6.927-24.846 2.78-12.923 22.167-11.88 47.34 2.485 61.73l29.84-29.87c58.655 42.87 109.37 92.94 150.57 151.24l-36.19 36.23 6.61-6.604c14.283 14.298 39.192 15.42 61.23 2.732-4.88-9.197-4.366-19.74 2.107-26.22 6.47-6.478 17-6.993 26.185-2.112 12.66-22.062 11.54-47-2.732-61.3l-28.248 28.28c-57.035-42.41-107.91-92.665-151.426-150.386l35.455-35.492-6.61 6.603c-7.834-7.843-18.863-11.726-30.862-11.542zm108.45 4.512c-17.61 17.41-39.674 39.21-62.22 61.375a728.952 728.952 0 0 0 27.407 30.094l59.063-59.126-24.25-32.344zm78.28 32.688L297 219.968l-65 65.063a728.12 728.12 0 0 0 35 32.376c22.02-23.134 43.764-46.41 64.97-69.406v-35.063zM173.47 313.25c-31.146 40.858-67.877 74.323-108.905 101.875 4.13 13.708 16.394 26.374 30.624 30.563 29.466-41.26 61.113-79.902 100.97-109.97a637.777 637.777 0 0 0-22.688-22.468zM44.5 410.28l-20.844 20.845c7.133 24.65 27.843 44.912 53.72 53.438l19.28-19.313c-26.948-4.28-48.314-26.91-51.875-52.938l-.28-2.03z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/skull-bolt.svg b/static/_icons/_ability/skull-bolt.svg
new file mode 100644
index 00000000..90bfa294
--- /dev/null
+++ b/static/_icons/_ability/skull-bolt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M41.78 21.78c-4.997-.165-10.197 1.67-14.655 6.126-15.113 11.567-8.733 29.44 5.906 34.438-11.887 26.758 18.28 38.818 32.69 22.78 1.77 6.353 5.607 11.64 10.53 15.75-6.834 17.716-.453 35.182 10.47 46 17.075 16.914 34.658 11.5 53.78 3.064 5.01 7.768 11.952 14.45 19.844 19.28-8.644 2.492-15.876 8.443-19.844 16.345-12.357-12.712-32.463-4.77-34.28 8.562-2.857 20.933 23.414 31.447 33.093 17.72 4.16 10.35 13.758 17.576 25.125 19.28-20.317 15.863-18.628 46.463-.97 66 18.947 20.96 43.435 16.498 61.688 2.906 1.916 8.895 6.22 16.504 11.688 23.376-18.523 22.26-.477 54.163 22.78 54.875l8.876-6.06c-11.923-16.82-21.032-35.764-21.03-55.533 0-14.22 2.558-27.89 7.25-40.625l18.218 4.688c-4.375 11.248-6.782 23.355-6.782 35.938 0 14.232 7.458 30.79 18.625 46.187 9.12 12.572 20.516 24.252 31.158 33.563 2.31-15.783 2.148-32.015-2.438-49.563l18.094-4.72c10.652 40.76.39 75.718-10.844 108.126l42.094-26.06.406 45.717c.177.064.354.125.53.188l34.345-31.47 4.313 40.845.28.03c.01.002.022 0 .032 0L431.47 441l17.78 31.406c2.94-7.53 10.04-26.205 18.313-52.656 4.41-14.107 8.78-29.58 12.375-44.875h-.282c-17.53 0-31.75-14.193-31.75-31.72 0-17.525 14.22-31.75 31.75-31.75 2.998 0 5.877.443 8.625 1.22-2.127-53.22-45.973-97.026-102.655-100.78l.656-18.657c34.642 2.17 65.52 17.385 87.376 40.53 35.083-17.25 5.977-66.633-23.625-44.062 2.46-48.01-46.01-78.18-81.186-63.062-8.016-38.908-78.668-34.988-90.53-4.688l-25.127-8.75c-1.872-32.22-28.622-57.812-61.312-57.812-21.19 0-39.78 11.107-50.813 27.437l-12.25-7c-.32-17.463-14.582-31.53-32.125-31.53-11.532 0-21.208 6.03-26.874 15.156l-9.907-8.75c6.058-15.098-5.352-28.45-18.125-28.875zm236.44 37.032c-8.926 0-16.158 7.232-16.158 16.157 0 8.923 7.232 16.155 16.157 16.155 8.923 0 16.155-7.232 16.155-16.156 0-8.926-7.232-16.157-16.156-16.157zM45.114 103.196c-6.348 0-11.494 5.146-11.494 11.494 0 6.347 5.147 11.494 11.495 11.494 6.348 0 11.494-5.147 11.494-11.495 0-6.35-5.147-11.495-11.495-11.495zm298.197 94.15 2.063 18.75c-18.395 5.263-34.75 14.895-47.75 27.56L285.78 229.22c15.764-14.956 35.505-26.105 57.533-31.876zm39.563 92.53c20.235 0 36.625 16.425 36.625 36.656 0 20.233-16.39 36.626-36.625 36.626s-36.656-16.393-36.656-36.625c0-20.23 16.42-36.655 36.655-36.655zm-193.906 43.22c-11.435 0-20.69 9.253-20.69 20.686 0 11.435 9.255 20.72 20.69 20.72 11.432 0 20.718-9.285 20.718-20.72 0-11.432-9.286-20.686-20.72-20.686zm244.093 20.624 11.687 62.936-41.813-4.437 30.125-58.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/slap.svg b/static/_icons/_ability/slap.svg
new file mode 100644
index 00000000..6266b0ac
--- /dev/null
+++ b/static/_icons/_ability/slap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M316.26 30.982c66.658 35.958 111.957 106.423 111.957 187.47 0 117.567-95.305 212.872-212.87 212.872-81.016 0-151.456-45.26-187.427-111.87C54.146 421.63 146.772 497.02 257.195 497.02c130.85 0 236.703-105.857 236.703-236.706 0-110.448-75.424-203.12-177.638-229.332zM173.027 49.174a32.06 32.06 0 0 0-1.525.03c-4.83.2-8.995 1.528-12.078 3.548L146.79 160.74l-15.458 28.592c6.213 10.643 11.196 21.47 14.826 32.496l-17.75 5.844c-2.052-6.233-4.63-12.46-7.703-18.682l-.025.047c-12.95-22.565-27.376-41.2-38.912-47.967-6.19-3.63-10.49-4.2-15.262-2.35-3.982 1.546-9.023 5.83-14.383 13.985 33.155 41.62 40.914 80.725 46.535 106.195 1.802 8.16 1.855 15.758 3.23 21.36l.305 1.234-.04 1.272c-.754 25.344 10.396 43.41 26.146 55.218 15.704 11.776 36.216 16.526 52.104 13.748 19.725-4.198 32.415-11.058 45.717-22.464 11.922-10.57 33.085-26.408 45.062-36.42 37.06-30.977 98.058-63.045 108.02-68.21 2.108-10.902-4.806-22.478-13.655-27.152l-74.184 42.71c-3.954-7.074-8.448-13.68-13.392-19.895l91.505-99.21c-.33-6.228-3.38-13.547-8.305-19.252-4.444-5.147-9.932-8.334-14.133-9.373l-95.07 101.33c-6.066-5.157-12.43-10.054-19.002-14.772l66.1-125.216c-4.527-6.72-9.388-10.572-15.26-13.237-5.445-2.47-12.303-3.794-19.887-4.892l-60.463 123.8c-7.348-4.592-14.772-9.118-22.182-13.656l14.055-108.806c-3.996-3.416-10.597-6.564-17.572-7.512a35.85 35.85 0 0 0-4.73-.33z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/sparkling-sabre.svg b/static/_icons/_ability/sparkling-sabre.svg
new file mode 100644
index 00000000..beec4d9b
--- /dev/null
+++ b/static/_icons/_ability/sparkling-sabre.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M403.563 16.875c-34.11 33.744-53.907 25.412-89.094 4.844 31.052 27.848 44.703 40.722 9.25 76.124 32.57-26.112 44.422-29.22 85.342-15-23.523-25.805-21.323-36.88-5.5-65.97zm90.312 24.406C463.23 68.004 425.365 93.7 386.687 113c1.152 61.455-37.802 117.82-99.125 165.406C221 330.06 127.345 372.848 24.344 404.28v41.22A1179.51 1179.51 0 0 0 73 434.47c-2.655 14.497-11.253 27.387-28.938 39.81 43.158-14.862 52.446-1.325 76.188 18.814-7.644-26.835-5.256-36.344 34.625-58.438-32.328 9.304-48.716 5.836-63.03-5.094 74.51-20.002 153.373-49.706 221.25-93.625 6.362 31.056 5.325 56.495-36.19 94.282 67.325-35.667 96.207-34.27 130.97 7.155-34.905-53.113-30.953-75.32 14.063-123.97-42.665 33.767-70.8 30.987-94.063 12.626.615-.427 1.23-.85 1.844-1.28 90.41-63.473 157.526-153.397 164.155-283.47zM240.75 70.97c4.865 36.552-4.39 56.492-23.938 78.53 31.65-24.863 39.97-22.61 71.157-23-28.584-13.45-36.21-20.397-47.22-55.53zm-110.78 40.686c-27.298 60.18-58.556 70.662-107.626 70.125 59.78 20.1 64.886 52.96 69.906 106.25 19.34-58.957 36.19-76.01 78.72-58.217-41.78-31.838-45.743-48.97-41-118.157zm237.936 10.188c-30.864 13.607-61.587 22.598-88.937 24.28-2.278 16.52-11.623 32.867-25.19 49-15.767 18.755-37.557 37.463-62.78 55.69-49.014 35.414-110.962 68.736-166.656 94.28v39.625c99.33-30.83 189.144-72.456 251.78-121.064 55.735-43.25 89.362-90.922 91.782-141.812zm99.53 98.97c-7.594 35.52-13.903 44.526-46.655 65.31 35.874-8.104 51.316-1.513 74.533 15.032-22.447-30.02-28.5-41.96-27.875-80.344zM259.75 400.78c-30 43.11-55.372 48.865-98.656 52.22 51.72 7.82 65.302 14.218 95.875 41.094-12.9-35.393-15.344-48.14 2.78-93.313z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/spectre.svg b/static/_icons/_ability/spectre.svg
new file mode 100644
index 00000000..9e176c5c
--- /dev/null
+++ b/static/_icons/_ability/spectre.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M282.83 18.877c21.567 6.146 36.328 15.205 40.572 28.77a71.007 71.007 0 0 0-4.066 2.363c-25.655 5.807-53.084 18.634-81.047 34.363 20.225-4.69 36.705-4.42 47.544 3.324-5.712 10.3-10.797 22.294-15.123 36.06-21.343 67.922-125.678-80.577-189.065-5.255C41.47 166.24 92.702 212.342 26.5 294.29c35.583-4.14 45.11-9.47 62.416-36.21 10.44-16.13 28.52-22.1 44.668-21.45-12.718 11.206-25.786 30.354-38.21 59.895 19.832-18.528 44.927-38.68 71.603-40.005.912 6.354-2.408 13.74-12.008 21.418C93.21 327.327 15.58 364.185 19.83 476.504c5.558-11.267 11.646-20.31 17.574-28.617 5.98 29.582 28.2 53.8 92.99 40.482-46.928-6.407-76.268-59.586-45.355-82.528 62.716-46.544 128.82 1.436 269.9-75.342a79.832 79.832 0 0 1 7.164-3.46c-2.246 19.6-12.367 39.84-22.362 57.14 14.26-10.38 25.415-20.147 33.928-29.262 2.14 26.14-11.748 54.65-25.393 78.268 43.26-31.49 61.19-57.976 63.207-78.422 9.334 36.678-1.895 95.547-25.03 123.492 77.553-39.433 106.608-77.127 109.76-190.664 1.662-59.824-66.23-60.536-56.435-101.344 11.945-49.756 6.768-84.69-7.565-107.947-19.6-49.73-79.99-59.74-149.385-59.423zM89.8 47.684C54.69 47.534 45.233 83.056 55.724 117c17.146-51.504 70.414-44.24 111.17-34.367-33.282-25.005-58.707-34.87-77.096-34.95zm254.595 30.742c18.643 21.37 29.373 43.02 10.105 65.732-26.562-16.677-26.985-39.252-10.105-65.732zm74.494 48.6c3.655-.013 7.78.35 12.473 1.09-1.706 30.506-14.4 33-46.634 32.154 8.335-22.146 14.416-33.176 34.16-33.245zm-84.677 40.316c9.652.1 20.258 2.84 30.598 8.918 44.65 26.246 21.934 73.314-4.1 74.78-15.174.855 1.443-23.842-16.17-38.476-15.258-12.678-38.596 12.53-45.204-5.78-8.218-22.693 10.21-39.696 34.877-39.442zm60.18 246.168c-24.195 27.825-58.89 60.1-99.444 31.41 16.625 45.643 68.87 70.465 99.443-31.41z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/spiky-eclipse.svg b/static/_icons/_ability/spiky-eclipse.svg
new file mode 100644
index 00000000..2807f3ab
--- /dev/null
+++ b/static/_icons/_ability/spiky-eclipse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m159.182 17.115 14.882 129.483-46.134-25.303 37.46 72.914c18.642-27.004 49.798-44.702 85.094-44.702 57.07 0 103.334 46.262 103.334 103.332 0 30.772-13.454 58.398-34.797 77.328l67.918 29.404-26.258-60.27 137.83-15.784-126.504-44.65 81.853-53.58H360.1L465.104 18.735 334.8 125.76l-2.978-72.926-69.95 84.832-19.35-84.834-22.323 68.46L159.18 17.116zM24.94 141.8l48.62 54.354 71.725 25.797-51.588-58.237L24.94 141.8zm122.23 112.72-49.526 27.513 43.69 4.684-76.457 95.18 90.5-48.372-82.702 160.72 124.83-127.95 6.242 71.775 26.863-83.812c-47.03-9.163-82.65-50.216-83.44-99.738zm155.935 87.263a102.652 102.652 0 0 1-40.433 13.672l75.08 136.164-34.647-149.837zM249.95 373.95h-.003l-11.457 59.872 19.237 60.74 12.533-63.812-20.31-56.8zm131.48 13.45 34.513 48.39 52.453 12.493v-.002L435.8 403.183 381.43 387.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/spinning-ribbons.svg b/static/_icons/_ability/spinning-ribbons.svg
new file mode 100644
index 00000000..530af3c9
--- /dev/null
+++ b/static/_icons/_ability/spinning-ribbons.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M169.027 40.096C93.14 60.823 48.49 138.916 70.605 218.02c1.862-60.04 52.693-111.227 115.96-112.48l-17.536-65.444h-.003zm192.815 7.58-181.95 315.15C84.5 330.016 29.234 229.346 51.378 135.12c-67.885 114.69-33.277 255.173 73.343 323.26l-.084.145 3.934 2.272c1.443.883 2.89 1.762 4.358 2.62l.045-.08 7.847 4.532 181.528-314.413c98.517 30.923 156.16 133.487 133.623 229.383 69.6-117.59 31.477-262.31-81.553-328.295l-.172.297-12.408-7.166zm72.652 256.68c-1.86 60.038-52.694 111.226-115.96 112.478l17.536 65.443c75.89-20.722 120.538-98.818 98.424-177.92z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/spiral-thrust.svg b/static/_icons/_ability/spiral-thrust.svg
new file mode 100644
index 00000000..fb9c2c9c
--- /dev/null
+++ b/static/_icons/_ability/spiral-thrust.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M36.633 19.08 15.506 40.207 99.51 124.21l21.127-21.126L36.633 19.08zM204.64 45.51 42.034 208.115l24.87 24.87c19.88-29.31 42.286-56.78 66.806-82.09l258.89 258.89 13.214-13.215-258.9-258.9c25.565-24.827 53.23-47.375 82.594-67.29l-24.87-24.87zm-17.068 80.12a597.726 597.726 0 0 0-12.955 11.41l262.6 262.605 27.838 69.77-69.772-27.835L132.73 179.025a587.624 587.624 0 0 0-11.388 12.98l15.908 15.907c-11.892 19.5-16.246 39.67-14.814 58.34-3.69 59.48 66.362 99.08 130.736 57.582l69.14 69.14c-23.845 8.237-51.302 13.04-82.884 12.856l-.008.012c87.233 25.69 168.06 59.824 253.518 93.443-.018-.07-.038-.145-.055-.217l3.037 1.21-7.477-18.737c-14.61-55.61-36.398-119.265-54.95-178.485-9.992-31.56-67.812-54.614-110.876-42.38l-89.86-89.86c29.51-11.725 58.15-10.98 83.57-5.598-20.15-23.84-63.71-24.393-102.114-12.947l-26.64-26.64zm-23.54 109.063 65.708 65.71c-45.45 8.77-74.317-29.476-65.71-65.71zm190.753 58.15c28.89 1.334 42.642 19.908 40.094 40.094l-40.095-40.093z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/spring.svg b/static/_icons/_ability/spring.svg
new file mode 100644
index 00000000..01ace442
--- /dev/null
+++ b/static/_icons/_ability/spring.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M326.4 26.52c-.7 0-1.7.14-2.9.44-3.4.82-8 3.38-11.7 6.89-3.8 3.51-6.7 7.92-7.9 11.34-1.1 3.41-.8 4.92.5 6.57 27.4 33.77 52.6 72.04 71.9 105.74 19.3 33.8 32.7 62.2 36.6 79.9.4 1.8.7 2 .7 1.9 1.2 0 5.7-1.7 9.9-5.2 4.3-3.5 8.6-8.6 11.1-13.3 2.6-4.7 3.1-8.8 2.6-10.4-15.1-55.3-42.6-116.41-107.9-182.57-.7-.67-1.3-1.09-2.2-1.24-.2 0-.4-.1-.7-.1zm53.2 30.97c11 13.92 20.6 27.66 28.9 41.17 13 7.24 28.5 16.34 43.9 26.04 15.2 9.4 29.4 18.9 40.9 27.4l-1.8-28.2c-16.4-16.3-45-33.55-74.1-48.31-13.1-6.65-25.8-12.61-37.8-18.1zM247.1 105.8c-.7 0-1.7.1-2.9.4-3.4.8-7.9 3.4-11.7 6.9-3.7 3.5-6.6 7.9-7.7 11.3-1.1 3.3-.9 4.8.5 6.5 27.4 33.8 52.6 72 71.9 105.7 19.3 33.8 32.6 62.3 36.6 79.8v.1c.4 1.8.7 2 .7 1.9 1.1 0 5.6-1.7 9.9-5.2 4.3-3.5 8.5-8.6 11.1-13.3 2.5-4.7 3-8.9 2.6-10.4-15.3-55.2-42.8-116.2-108.1-182.4-.7-.7-1.3-1.1-2.2-1.2-.2-.1-.4-.1-.7-.1zm53.1 30.9c11.1 14 20.7 27.8 29.1 41.3 13 7.3 28.5 16.4 43.9 26 3.5 2.2 7 4.4 10.4 6.6-5.8-12.7-13.6-27.7-22.7-43.7-7.4-4.2-15-8.2-22.7-12.1-13.2-6.6-25.9-12.6-38-18.1zm-126.5 57.1c-.7 0-1.7.1-2.9.4-3.4.8-8 3.4-11.7 6.9-3.8 3.5-6.7 7.9-7.9 11.3-1.1 3.4-.8 4.9.5 6.5 27.4 33.7 52.6 71.9 71.9 105.7 19.3 33.8 32.7 62.2 36.6 79.9.4 1.8.7 2 .7 1.9 1.1 0 5.7-1.7 9.9-5.2 4.3-3.5 8.6-8.6 11.1-13.3 2.6-4.8 3.1-8.9 2.6-10.5-15.2-55.1-42.6-116.1-107.9-182.4-.7-.6-1.3-1-2.2-1.2h-.7zm53.1 30.9c11.1 13.9 20.6 27.7 29 41.2 13 7.3 28.5 16.4 43.9 26 2.7 1.7 5.4 3.4 8 5-5.2-11.9-12.5-26.6-21.3-42.5-7.1-4-14.4-7.9-21.8-11.6-13.1-6.7-25.8-12.6-37.8-18.1zM94.5 272.9c-.77 0-1.71.2-2.97.5-3.34.8-7.91 3.3-11.67 6.8s-6.68 7.9-7.79 11.3c-1.1 3.4-.86 4.9.48 6.5 27.43 33.8 52.65 72 71.95 105.7 19.3 33.8 32.7 62.2 36.6 79.8v.1c.4 1.8.7 2 .7 1.9 1.2 0 5.7-1.7 9.9-5.2 4.3-3.5 8.6-8.6 11.1-13.3 2.6-4.7 3.1-8.8 2.6-10.4-15.3-55.1-42.7-116.1-108.02-182.4-.7-.6-1.3-1.1-2.17-1.2-.22-.1-.46-.1-.71-.1zm53.1 30.9c11.1 14 20.7 27.8 29 41.3 13 7.3 28.5 16.4 43.9 26 3.5 2.2 7 4.4 10.4 6.6-5.8-12.7-13.5-27.7-22.6-43.7-7.4-4.1-15.1-8.2-22.8-12.1-13.1-6.6-25.8-12.6-37.9-18.1zM18.72 353c.34 2.1 1.03 4.8 2.88 8.4 5.75 11.3 20.09 27.8 46.74 42.6 23.89 13.3 46.86 28.4 85.06 56.4-6-13.5-14.4-30.1-24.5-47.7l-.3-.6C92.89 388 46.1 366 18.72 353z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/steam-blast.svg b/static/_icons/_ability/steam-blast.svg
new file mode 100644
index 00000000..d6f82f24
--- /dev/null
+++ b/static/_icons/_ability/steam-blast.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.58 17.8 216.7 252.2 48.34 98.32 202 273.6c34.3 41 88.4 34.7 114.6 74-25.5-16.6-80-3.6-44.7 21.1-28.5 4.6-22.8 33.6-5.4 42.9 7.9-14.5 25.5-18.8 44.2-18.3-18.7 3.8-36.2 19.6-35.2 39.6 1.1 18.9 29.5 33.4 55.2 19.4 8 19.6 25 33.2 42 39.5 16 5.9 38.3 4.3 56.9-3.2-2.8-11.7 5.7-22.4 19.7-27.2-7.9 10.2-10.9 18.8-10.1 26.9 1.4 1.6 3.1 3 4.9 4.1 13.5 8.2 33.1.6 43.7-16.9 10-16.5 8.5-36.1-3.3-45.2 23.3-56.9 8.7-130.5-44-128.6 4.5-16 2.8-30.5-7.9-39.8-18.5-16.1-54.1-16.1-66.7 7.8-13.4-10.5-33-6.8-42.8 3.7-10.5 16.8-5.8 32.1 7.2 44.1-15.6-8.4-44.4-52.5-44.4-71.1 11 8.7 24.9 10.2 34.1 2.9 11.1-8.9 10.8-27.6-.6-41.7-3.4-4.2-7.6-7.7-12.1-10.1.5-4.3-.2-8.9-2-13.2-5.9-9.7-15.7-20.3-25.4-14.4-12.6 7.6-12 23.1-5.4 33-3.5 5.4-4.6 12.2-3.4 19.2-7.3-10.7-11.3-15.7-24.4-29.5L109.4 48.67 210.3 186.9zm217.52 92.4c-2.9.1-5.3 1.4-6.8 3.7-4 6.3-.4 18.5 7.9 27.2 8.4 8.7 18.4 10.6 22.4 4.3 4.1-6.3.6-18.5-7.8-27.2-5-5.2-10.8-8.2-15.7-8zm138.8 173.7c7 13.7 18.5 23.8 38.8 28.9-23.6-2.3-34.5-5.6-54.8 2 12.5-9.2 17.5-17.3 16-30.9zm-217.8 25.5c-15.5 1.4-20.3 16.2-10.9 32.9 9.4 16.6 29.6 28.9 45 27.5 8.5-.8 14.2-5.7 15.5-13.4 4.1 1.9 8.1 2.8 11.6 2.5 9.1-.9 12-9.5 6.5-19.3s-17.4-17.1-26.5-16.3c-2 .2-3.8.8-5.3 1.8-10.7-8.3-23.5-16.9-35.9-15.7zm289.2 20.2c-5.6 26.4 3.9 46.2 24.1 53.8-30.1 4.1-44-31-24.1-53.8zm-41.5 12.3c-22.7 8.9-23.7 37.3-5.3 48.4-16.1.1-24.3-10.5-24.8-21.7-15.1-7.7-38-4.8-47.2 10.1-.9-23.8 32.2-30.2 48.2-19.3 8-12.6 16.9-18.4 29.1-17.5zm-60.7 59.7c-2.5 19.6 5.5 33.5 20.7 37.8-12.5 2.7-17.7-.1-24.6-9.6-7.4 8.7-16.1 9-27.3 3.9 24.2-2 21.3-18.2 31.2-32.1zm88.5 2.4c6.2 18.7 19.4 27.7 35 25-8.3 6.5-17.6 6.1-24.6 1.5-5.2 30-43.7 36.1-63.6 10.7 26.2 10.9 48.8 6 61.9-11.9-6.7-5.4-10.7-14.8-8.7-25.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/sticky-boot.svg b/static/_icons/_ability/sticky-boot.svg
new file mode 100644
index 00000000..928adce0
--- /dev/null
+++ b/static/_icons/_ability/sticky-boot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18 18v133.4c37.93-48.8 88.7-72.27 129.6-69.77-6.8-20.08-9.1-41.72-9.9-63.63H18zm121.3 82.3c-37 1.9-87.64 28.6-121.24 84.1 25.2 56.8 58.7 115.7 94.74 155.3 30.9-10.9 72.8-30.8 113.1-54.4-19.7-45.8-15.8-92.2 1.6-128.9-13 .2-24.3-1.3-35.4-5.6-13.9 13.2-27.4 29.1-31.2 47.3l-18.3-3.5c5.7-21.3 16.5-39.9 32.2-53.4-6-4.3-11.6-9.4-16.7-15.1-19.9 9.1-40.2 31.4-43.3 50.2l-18.44-3.1c4.44-26.4 25.84-50 49.94-62.1-2.4-3.5-4.7-7.1-7-10.8zm185.3 2.9c-12.1-.1-23.9 3.7-36.3 11-44.5 26.6-76.6 99.1-42.7 169.6l7.2 7.2-10.2 6.2c-46.5 27.9-95.1 51-130.8 62.5l12.4 17.9c29.3-10.8 61.6-25.2 94.4-41.9 63 30.1 49.1 114.6-6.5 159.3h29.3c9.4-17 15.1-43.4 36.4-50 8.2-2.5 5 30 9.3 50h45.7c-2.5-13.4-2.2-34.6 3.5-35.1 10.6-1 18.9 21.3 27 35.1h50.2c-103.1-112.3-95.8-156.5-75.7-228.1 28.1-18.3 54.5-37 77.2-55.1-13.4-54.6-34.9-85.3-57.1-99-11.7-6.4-22.6-9.5-33.3-9.6zm-4.6 175c-8.7 21.9-17.5 49.6-24.2 48.5-14.6-2.5-19.6-10.9-23.2-20.1 16-9.2 31.9-18.7 47.4-28.4zm-60.1 35.5c6.1 19.6 14.5 46.1 9.1 50-7.4 5.4-19.5-22.6-30.4-38.4 7.1-3.8 14.2-7.6 21.3-11.6zm49.2 21c4.7-.5 19.9 68.6 37.3 101.6 10.4 19.7-25 14.3-28.9 3.4-12.5-35-14.3-104.4-8.4-105zM288 352c9.1 0 9.1 22.9 5.9 35.9-3.5 14.1-7.7 37.2-11.2 34.3-11.8-9.8-3.8-70.2 5.3-70.2zm9.8 78.4c3.8.3 8.9 12.5 9.9 19.6 1.2 8.2-1.5 24.1-5 24.4-5 .5-7-17.5-7.6-26.7-.4-5.8-3.8-16.5 2.3-17.3h.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/striking-arrows.svg b/static/_icons/_ability/striking-arrows.svg
new file mode 100644
index 00000000..c38f6f20
--- /dev/null
+++ b/static/_icons/_ability/striking-arrows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m136.564 31.01 239.67 149.595c-12.418 21.234-20.756 28.302-45.027 46.936l156.3-26.33-85.603-125.474c4.936 24.85 8.85 38.5.75 60.49L136.568 31.01h-.004zM21.524 42.75l83.13 325.893c-21.017 5.232-30.98 3.262-58.875-3.96l124.046 113.45 13.426-166.844c-10.836 23.322-15.94 37.197-34.342 46.82L21.523 42.75zm64.353.215 252.2 353.16c-23.285 16.947-36.38 19.583-73.83 24.9l200.66 71.74L407.7 286.944c-2.477 33.743-2.313 53.14-20.37 74.09L85.877 42.965z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/striking-balls.svg b/static/_icons/_ability/striking-balls.svg
new file mode 100644
index 00000000..13006981
--- /dev/null
+++ b/static/_icons/_ability/striking-balls.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m28.47 52.22 26.655 106.25 72.25 161.436-42.97-44.75 20.97 83.47c12.218-17.024 32.14-27.943 54.063-28.063a66.885 66.885 0 0 1 19.25 2.718L28.47 52.22zm81.624 2.31 241.562 126.407a66.669 66.669 0 0 1-4.47-16.468 68.08 68.08 0 0 1-.498-5.064l-108.094-67.75L362 112.78a67.686 67.686 0 0 1 10.094-9.905l-262-48.344zM85.97 81.313 269.25 292.72l-72.563-57.69 117.875 161.345c3.147-18.118 11.676-34.284 23.813-46.906l-79.688-99.064 107.844 79.22a89.398 89.398 0 0 1 24.876-7.126L85.97 81.312zm328.405 25.813a48.7 48.7 0 0 0-7.406.438c-26.52 3.63-44.883 27.856-41.25 54.374a48.084 48.084 0 0 0 54.342 41.25c26.52-3.63 44.913-27.825 41.282-54.343-3.178-23.204-22.113-40.177-44.563-41.625-.8-.053-1.594-.082-2.405-.095zM403.5 340.405a71.583 71.583 0 0 0-3.656.064c-36.268 1.72-65.87 30.53-67.844 67.592-2.107 39.534 28.06 73.08 67.594 75.188 39.533 2.107 73.05-28.062 75.156-67.594 2.107-39.534-28.03-73.05-67.563-75.156a75.93 75.93 0 0 0-3.687-.094zm-244 8.845c-24.54.1-45.306 18.648-47.72 43.625a48.136 48.136 0 0 0 43.407 52.688 48.135 48.135 0 0 0 52.688-43.407 48.133 48.133 0 0 0-43.406-52.687 49.28 49.28 0 0 0-4.97-.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/striking-clamps.svg b/static/_icons/_ability/striking-clamps.svg
new file mode 100644
index 00000000..e1b5eebd
--- /dev/null
+++ b/static/_icons/_ability/striking-clamps.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M40.98 33.47c42.365 69.924 62.112 128.807 67.23 167.143a30.27 30.27 0 0 0-6.776-.773c-15.047 0-27.516 11.026-29.778 25.437-14.03-22.296-30.308-61.62-45.88-121.623C86.005 464.07 279.215 338.11 40.978 33.47zm166.485 48.26c81.832 9.75 131.982 36.245 149.36 55.81a24.292 24.292 0 0 0-7.198 17.288c0 1.892.223 3.73.63 5.498-15.305.858-43.695-6.828-85.5-28.885 233.85 149.603 273.12-20.542-57.292-49.71zm-65.473 3.71c133.425 99.39 206.29 185.384 234.88 241.12a41.308 41.308 0 0 0-5.366-.36c-22.58 0-40.885 18.302-40.885 40.882 0 3.86.547 7.59 1.546 11.13-41.953-26.657-103.148-88.887-173.48-197.18 321.64 535.806 553.76 265.665-16.694-95.593z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/striking-splinter.svg b/static/_icons/_ability/striking-splinter.svg
new file mode 100644
index 00000000..45fda734
--- /dev/null
+++ b/static/_icons/_ability/striking-splinter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m23.018 20.705 135.64 163.623-107.33-32.39 168.79 111.326L82.784 224.11l192.51 111.87-130.525-1.76 282.08 126.116a428.486 428.486 0 0 0 42.728 19.246l2.297.885 20.797 9.3-16.895-37.82a398.823 398.823 0 0 0-12.03-26.926L338.312 144.24l1.094 129.362L228.352 82.393l38.482 136.49L155.906 50.668l31.684 106.467L23.018 20.705zm225.148 225.178c94.262 38.75 169.608 116.195 208.152 207.924-91.01-40.827-168.835-115.908-208.152-207.924z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/striped-sword.svg b/static/_icons/_ability/striped-sword.svg
new file mode 100644
index 00000000..a65799ec
--- /dev/null
+++ b/static/_icons/_ability/striped-sword.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M20.492 18.445V48.32l142.8 230.215 13.263-14.068L23.953 18.445h-3.46zm62.363 0L221.78 244.19l-.116.12 57.42 98.366c13.31-10.723 26.58-20.305 39.62-29.184l-61.907-105.66-21.63 22.457L104.8 18.444H82.854zm80.303 0 113.24 186.012.06-.035 57.827 98.697c14.364-9.413 28.354-18.235 41.688-27.07l-70.545-118.71-21.957 22.797-98.433-161.692h-21.88zm80.96 0L326.935 157.1l.066-.04 64.45 108.454c13.838-9.718 26.8-19.798 38.538-31.08l-75.97-127.543-21.79 22.626-66.34-111.07h-21.77zm76.56 0 54.984 88.522.113-.07L443.37 220.38c11.33-13.075 21.146-27.87 29.054-45.384L415.11 78.6l-29.126 9.564-43.306-69.72h-22zm76.136 0L442.42 87.96l38.508 64.772c8.563-26.848 13.343-59.395 13.343-100.128l-43.354 14.238-31.748-48.397h-22.354zM20.492 162.34v34.78l93.502 146.724 81.238 129.408 46.653-27.14-15.565-24.794-24.6 26.12-76.808-128.2 22.406-23.763-9.09-14.48-30.728 17.878L20.492 162.34zm187.7 95.96-6.49 6.737-28.397 30.117 55.463 94.74c11.814-12.983 23.79-24.55 35.79-35.03l-56.367-96.565zm-48.25 51.026-11.73 12.442 56.84 94.87 11-11.677-1.767-2.814-54.342-92.82zm-39.374 80.14c-29.078 28.91-67.018 54.394-98.775 73.612-.106 8.052 1.748 14.447 5.334 19.082 3.678 4.754 9.542 8.254 18.602 9.875 25.252-25.11 59.002-52.65 92.245-74.844l-17.407-27.725z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/sword-spin.svg b/static/_icons/_ability/sword-spin.svg
new file mode 100644
index 00000000..925ceb42
--- /dev/null
+++ b/static/_icons/_ability/sword-spin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M259.738 20.38c-40.36-.244-81.305 9.895-118.744 31.51C28.566 116.8-10.03 260.837 54.88 373.265c64.91 112.427 208.947 151.024 321.376 86.113 77.686-44.852 120.106-127.485 117.498-211.363-3.575 65.865-35.942 128.62-91.082 169.41a217.975 217.975 0 0 1-35.762 25.767C263.228 503.053 130.926 467.6 71.066 363.92 11.206 260.238 46.66 127.936 150.34 68.076 185.98 47.5 225 38.183 263.3 39.03c73.12 1.62 143.6 40.28 182.883 108.32.648 1.122 1.277 2.25 1.9 3.38a20.217 20.217 0 0 1 1.258 6.997c0 11.29-9.152 20.44-20.442 20.44-6.85 0-12.894-3.38-16.6-8.556a172.05 172.05 0 0 0-2.355-4.276c-.014-.035-.03-.068-.045-.104l-.01.004c-.15-.263-.293-.53-.445-.793-31.91-55.27-89.762-86.377-149.363-86.835-1.923-.014-3.848.002-5.773.05-28.007.718-56.228 8.227-82.162 23.2-82.99 47.914-111.498 154.31-63.584 237.3 2.93 5.072 6.08 9.936 9.426 14.597L95.65 365.648l9.344 16.184 24.848-14.348c53.686 59.734 143.727 75.99 216.017 34.254 51.455-29.707 81.957-81.898 86.294-137.05-12.315 44.767-41.423 85.652-83.564 113.128a157.831 157.831 0 0 1-12.076 7.737C273.02 422.21 194.6 408.96 146.41 357.92l45.278-26.143 19.99 34.625 16.185-9.343-16.707-28.937c24.072-21.104 54.165-23.015 62.973-5.96 93.825-32.597 231.378-110.21 190.755-180.57l-.4.173a200.266 200.266 0 0 0-2.118-3.764c-42.597-73.78-119.27-115.764-198.724-117.565-1.3-.03-2.603-.048-3.905-.056zm.283 75.823c53.167.368 104.69 28.135 133.238 77.582.19.33.37.66.556.99-48.784 49.337-134.526 98.727-200.175 123.002l-15.1-26.148-16.183 9.343 19.987 34.62-48.08 27.76a157.102 157.102 0 0 1-9.518-14.544c-42.864-74.244-17.5-168.905 56.744-211.77 23.2-13.394 48.396-20.127 73.38-20.786 1.72-.045 3.436-.063 5.15-.05z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/target-shot.svg b/static/_icons/_ability/target-shot.svg
new file mode 100644
index 00000000..e46afa70
--- /dev/null
+++ b/static/_icons/_ability/target-shot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M58.11 20.152a1832.461 1832.461 0 0 1 60.482 58.592c-.085.062-.168.127-.252.19a1842.578 1842.578 0 0 1 39.617 41.367l.213-.142c4.3 4.643 8.576 9.3 12.812 13.97l-.195.126a1736.308 1736.308 0 0 1 37.986 43.19l.106-.104c27.063 31.912 52.34 64.147 75.237 96.072 2.08 2.902 4.143 5.8 6.184 8.695l.723 1.026c1.75 2.486 3.48 4.97 5.2 7.45.463.67.93 1.338 1.392 2.007 1.43 2.076 2.845 4.15 4.254 6.22.68 1.003 1.37 2.007 2.048 3.008 1.403 2.076 2.786 4.148 4.166 6.22.54.808 1.09 1.62 1.627 2.43 0-.002 0 0 0 0l-.003-.003c-2.97-1.966-5.948-3.96-8.928-5.97-.582-.394-1.165-.794-1.747-1.188-2.45-1.66-4.9-3.33-7.353-5.02-.606-.417-1.213-.84-1.82-1.26-2.384-1.648-4.77-3.31-7.16-4.986l-2.05-1.442c-2.514-1.773-5.03-3.56-7.548-5.362l-1.032-.74c-2.94-2.11-5.883-4.238-8.828-6.387-28.878-21.073-57.928-44.03-86.693-68.44l.055-.057a1717.408 1717.408 0 0 1-42.99-37.795l-.062.1a1799.199 1799.199 0 0 1-13.99-12.832l.08-.117a1816.42 1816.42 0 0 1-41.418-39.697l-.096.127a1808.939 1808.939 0 0 1-55.501-57.314c14.89 23.17 30.88 46.1 47.81 68.67C24.96 203.542 33.861 300.61 97.142 363.89c57.81 57.81 143.806 70.223 213.735 37.266a734.271 734.271 0 0 1-48.74-42.906c-43.354 10.697-91.117-.853-124.934-34.67-38.908-38.91-48.344-96.285-28.325-144.162a1288.914 1288.914 0 0 0 13.793 16.33c-12.57 39.06-3.322 83.547 27.748 114.617 26.16 26.16 61.83 36.84 95.764 32.063-30.955-31.627-59.076-66.004-83.49-102.184 97.134 103.204 211.78 192 327.656 250.217C432.41 375.526 344.058 261.308 241.47 164.308c35.714 23.993 69.634 51.706 100.897 82.21 4.888-34.028-5.787-69.84-32.027-96.08-22.12-22.123-51.042-33.183-79.963-33.183a113.124 113.124 0 0 0-34.93 5.523c-5.398-4.646-10.83-9.24-16.287-13.783a132.185 132.185 0 0 1 51.217-10.31c33.743 0 67.487 12.847 93.178 38.54 33.88 33.88 45.414 81.762 34.615 125.182a739.471 739.471 0 0 1 42.904 48.555c32.952-69.93 20.536-155.932-37.27-213.74-36.82-36.82-85.077-55.232-133.333-55.232-34.703 0-69.406 9.522-99.855 28.565-23.82-17.92-48.043-34.778-72.506-50.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/tentacles-skull.svg b/static/_icons/_ability/tentacles-skull.svg
new file mode 100644
index 00000000..4c679bc4
--- /dev/null
+++ b/static/_icons/_ability/tentacles-skull.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.672 18.535c-71.2 0-127.248 47.1-127.248 102.24 0 25.67 12.008 49.233 32.187 67.452l2.925 2.638 2.14 55.63 57.368-31.026 33.887 54.335 33.3-53.743 55.303 30.272 1.598-54.844 3.026-2.68c20.666-18.306 32.764-41.967 32.764-68.035 0-55.14-56.048-102.24-127.248-102.24zm-79.76 89.14c23.366-.295 58.385 18.522 58.385 18.522 0 21.772-17.648 39.422-39.422 39.422-21.774 0-39.424-17.65-39.424-39.423h.003c.416-13.678 9.048-18.38 20.46-18.523zm159.516 0c11.41.142 20.043 4.844 20.46 18.522 0 21.772-17.65 39.424-39.423 39.424-21.772 0-39.422-17.65-39.422-39.423 0 0 35.02-18.817 58.385-18.523zm-79.756 48.118 20.334 45.418h-40.67l20.336-45.417zm-39.192 84.47-22.2 12.008c6.823 35.1 2.77 66.833-17.956 98.933-17.857 27.644-63.35 49.007-95.68 28.678-40.016-25.15-11.61-63.596 12.72-39.98-1.513-52.516-48.833-47.87-63.393-16.078-40.502 88.417 95.507 149.848 170.432 82.79.808 41.927 23.872 78.693 72.996 84.695 39.8 4.862 72.77-38.585 22.364-71.606 8.466 37.96-46.156 42.623-46.707-11.58-.213-20.954 10.71-39.112 26.29-52.454 7.443 13.896 16.868 27.638 28.616 41.078C376 479.168 526.48 416.23 484.147 323.822c-14.56-31.79-61.88-36.438-63.394 16.078 24.33-23.616 52.737 14.83 12.723 39.98-32.332 20.33-77.825-1.033-95.682-28.677-20.493-31.74-24.678-63.12-18.176-97.75l-22.828-12.496-39.808 64.248-40.502-64.94z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/thor-fist.svg b/static/_icons/_ability/thor-fist.svg
new file mode 100644
index 00000000..16977571
--- /dev/null
+++ b/static/_icons/_ability/thor-fist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M17.87 18.84v49.25C38.19 111.9 58.49 155.7 78.81 199.5c29.69-1.2 59.49-2.3 89.19-3.4 14.5-15.4 30.1-29.5 48-44L101.1 74.97 86.91 18.84H17.88zm94.63 0c6.1 16.15 12.2 32.33 18.4 48.47 23.5 1.98 47.1 3.9 70.6 5.85l22.8 72.34c5-4 10.3-8.1 15.7-12.2-8.2-25.9-16.2-51.83-24.4-77.71-23.8-1.99-47.6-3.94-71.4-5.9l-11.7-30.85zM65.37 126.1l42.23 2L152 178l-61.47 2.3zm196.93 13.6c-48.9 36.6-79.3 62.9-109.2 103.6 3.8 12 9.1 24.2 15.6 36.3l100.4-88.5 12.4 14-103.1 90.8c7 11 15 21.7 23.8 31.8l107.2-88.6 11.9 14.4-106.4 87.8c8 8 16.5 15.5 25.4 22.2L344 287.9l11 15.1-98.4 71.7c10.2 6.4 20.8 11.7 31.7 15.9 41.1-16.8 77.9-50.1 105.8-82.6 6-7 8.3-14 7.5-20.3-.9-6.3-4.9-13.2-15.7-20.1l-5.2-3.3 1-6.1c2.5-15.2-1.2-22.1-6.5-26.8-5.2-4.6-13.7-6.8-21.1-6.8l-15-.1 6.7-13.5c4.4-8.9 3.5-18.5-1.9-25.8-5.4-7.3-15.6-12.9-32.5-11.4l-12.7 1 2.8-12.4c3.1-14.2-2.2-21-10.7-25.1-9.4-3.9-20.4-3-28.5 2.4zM132.5 240c-8.9 10.1-16.6 21.1-22.4 32.6 8.4 20.9 19.7 36 33 44.9 10.1 6.8 21.4 10.3 34.4 10.4-20.1-29.1-36.2-58-45-87.9zm262.7 94.8c-4.2 4.5-8.5 8.9-13 13.4l23.7 20.6-18 15.7-16.9-25.8c-12.3 11.1-25.6 21.5-39.8 30.6l14.2 32.1c-17.7 15.4-35.4 30.7-53.1 46.1 12.9 8.9 25.7 17.8 38.5 26.7h32.8l-40.9-28.4 30.6-26.5 11.7 26.6 20.1-3.3 11.7 31.6h20l-13-34.8 60.9-10.3-13.3 45.1h41.8v-91l-86.6 9.7-8.3-12.7c12.1-10.4 24.1-20.9 36.1-31.3-13.3-11.6-27.5-24.1-39.2-34.1z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/tornado-discs.svg b/static/_icons/_ability/tornado-discs.svg
new file mode 100644
index 00000000..03773373
--- /dev/null
+++ b/static/_icons/_ability/tornado-discs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M370.203 25.574c-51.962-.07-134.69 39.665-212.467 106.908-105.35 91.08-162.303 197.81-127.316 238.28 18.474 21.37 58.867 19.968 108.39.476-5.416 19.54-4.192 35.717 4.91 46.244 16.727 19.35 56.123 14.81 103.09-7.556-4.062 14.072-3.303 25.733 3.198 33.252 12.79 14.793 44.6 9.873 81.523-9.772-3.955 10.502-4.084 19.25.517 24.57 9.158 10.593 34.315 4.552 61.724-13.066-3.608 6.83-4.456 12.655-1.686 15.86 5.57 6.443 23.665-.123 40.443-14.627 16.777-14.505 25.892-31.46 20.32-37.903-2.694-3.117-8.353-3.187-15.36-.81 22.21-25.036 32.348-49.734 23.025-60.518-4.444-5.14-12.68-6.387-23.117-4.307 25.718-34.37 35.86-66.023 22.863-81.056-4.827-5.583-12.086-8.512-21.61-8.763l-.002.002c-3.783-.1-7.884.213-12.244.896 26.956-41.706 36.07-78.49 19.84-97.26-8.66-10.017-23.86-14.06-42.633-12.264h-.005c-1.556.15-3.148.35-4.757.574 24.82-44.517 31.488-82.575 13.52-103.36-8.747-10.115-22.45-15.314-39.714-15.77-.81-.02-1.626-.03-2.45-.032zm-3.017 47.79c12.217-.03 21.736 3.206 27.664 10.062 10.874 12.578 7.59 35.378-6.362 63.21-40.125 8.965-93.027 38.37-143.734 82.208-49.904 43.143-86.16 90.686-101.318 128.795-28.996 9.584-51.49 9.75-62.206-2.648-25.29-29.25 24.273-114.272 110.963-189.22 66.373-57.383 135.082-92.315 174.993-92.41zm43.197 108.407c9.635-.037 17.15 2.515 21.844 7.945 10.515 12.163 4.622 36.545-13.237 65.44-27.833 6.597-64.24 26.655-98.9 56.618-34.575 29.89-59.638 62.81-70.215 89.278-31.05 13.373-55.99 15.67-66.44 3.583-20.032-23.168 20.108-90.146 88.77-149.508 52.57-45.45 106.7-73.227 138.178-73.354zm26.625 97.623c6.084.2 10.85 1.986 13.902 5.517 8.93 10.33.774 33.067-18.707 58.95-16.546 4.677-37.42 16.553-57.36 33.792-18.927 16.364-33.19 34.254-40.593 49.453-26.45 13.488-48.37 17.056-56.793 7.315-13.955-16.14 14.07-62.597 61.906-103.955 37.373-32.31 75.916-51.793 97.645-51.072zm9.22 78.34c3.72.125 6.636 1.214 8.5 3.37 6.783 7.846-2.435 27.462-21.222 47.876-6.588 2.883-14.007 7.602-21.178 13.8-6.634 5.737-12.03 11.86-15.82 17.577-21.725 14.166-41.042 19.656-47.522 12.163-8.516-9.85 8.352-38.398 37.54-63.633 22.802-19.715 46.405-31.595 59.7-31.153zm-.138 55.626c1.76.058 3.14.572 4.02 1.59 4.03 4.66-3.86 18.084-17.665 30.02-13.805 11.937-28.32 17.88-32.347 13.22-4.028-4.66 3.95-18.162 17.756-30.096 10.785-9.324 21.947-14.944 28.236-14.735z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/tornado.svg b/static/_icons/_ability/tornado.svg
new file mode 100644
index 00000000..c40c257e
--- /dev/null
+++ b/static/_icons/_ability/tornado.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M265.143 16.73c-65.944 0-118.326 5.893-155.188 18.143-18.43 6.125-33.1 13.83-43.54 23.926-10.438 10.095-16.352 23.132-15.88 37.165l.006.172.013.17c2.75 39.093 15.275 72.883 33.394 103.4-30.092 26.304-22.554 56.57 55.328 71.47 6.504 6.985 13.16 13.85 19.877 20.653-44.976 17.343-44.457 38.22 40.79 40.582 10.873 10.84 21.557 21.703 31.767 32.744-34.54 3.67-70.755 11.923-106.7 26.227 33.16-5.943 79.682-8.487 124.244-6.436 27.66 32.73 49.995 67.74 60.193 108.84h19.207c-9.205-40.806-29.034-75.516-53.713-107.105 46.038 4.14 86.467 13.755 102.77 30.302-6.223 24.423-16.816 49.782-33.946 76.803h21.873a302.295 302.295 0 0 0 11.615-21.848c48.44-8.298 70.147-23.06 72.033-39.1 7.677-22.363-10.594-56.65-45.38-82.97-.028-8.232-.335-16.386-.842-24.474 62.557-8.128 63.666-38.01-5.163-51.105-3.74-30.33-7.695-60.182-7.425-90.93 91.998-21.19 74.89-59.455 13.513-83.942a268.036 268.036 0 0 1 5.998-16.28l.268-.66.164-.69c2.94-12.31-.722-24.506-8.666-33.145-7.944-8.64-19.33-14.517-32.955-19.07-27.25-9.103-64.2-12.71-103.623-12.843h-.031zm-.034 18.69c38.27.13 74.034 3.952 97.765 11.88 11.866 3.965 20.536 9.007 25.12 13.993 4.512 4.905 5.846 9.015 4.29 15.844a285.699 285.699 0 0 0-5.892 16.03c-54.098-17.105-131.934-23.978-202.008-5.622 65.494.283 172.564 13.5 190.418 54.82-3.317 23.44-3.54 46-2.283 67.955-45.155-33.14-134.644-21.05-199.475 1.23 41.805-1.966 94.256 1.828 136.084 12.9-25.3 2.72-53.93 10.074-81.84 21.894 64.456-6.42 133.745 2.883 151.286 23.982l.123.996c-20.61-2.533-45.806-3.76-75.735-3.047-49.278 1.178-92.846 8.102-124.002 17.002-18.856-18.886-36.954-37.853-52.848-57.763 8.89-54.23 137.75-65.292 210.666-63.426-88.136-26.143-187.425-6.064-237.17 24.312-2.61-44.05 89.057-68.318 170.267-60.23-72.526-23.095-149-33.873-182.982-16.15 31.36-37.388 106.277-55.177 179.17-54.934-32.778-8.548-61.407-13.926-92-16.656 26.092-3.278 56.598-5.01 91.044-5.01zm51.73 249.873c25.132-.12 48.713 2.566 64.607 8.908 1.65 14.464 3.032 28.817 3.63 43.218a189.116 189.116 0 0 0-46.557-19.094c13.17 10.786 25.794 22.58 37.226 34.598-41.07-17.11-89.233-22.64-116.377-18.67 30.09 4.298 66.47 18.864 92.41 36.248-28.314-5.917-61.158-8.87-96.344-7.174-16.924-19.096-35.188-37.224-53.383-55.166 19.422-13.37 69.6-22.65 114.787-22.867z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/transfuse.svg b/static/_icons/_ability/transfuse.svg
new file mode 100644
index 00000000..82ea6c5c
--- /dev/null
+++ b/static/_icons/_ability/transfuse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M403.313 41.625c-1.107 0-2.24.017-3.344.063-30.174 1.248-56.498 23.386-71.72 55.906-29.436-20.315-63.812-25.884-91.313-12.125-22.492 11.25-38.903 33.383-42.687 60.843 10.962-4.476 21.618-7.177 31.75-8.438 4.333-11.497 12.952-19.848 24-25.375 20.797-10.404 49.765-8.923 72.656 13.97l18.625 18.624 6.533-25.156c8.723-32.558 30.745-47.522 53.093-48.438 22.346-.927 45.982 11.665 54.97 43.78 12.795 45.728-29.2 82.442-57.907 123.126h-95.19c-23.612-9.383-45.98-18.687-60.967-34.25-7.368-2.142-14.748-2.2-22.594.22-3.735 1.15-7.638 2.92-11.69 5.436 16.42 28.053 44.66 45.767 74.845 61.063.43.218.85.44 1.28.656a742.992 742.992 0 0 0 10.126 5c.89.434 1.763.882 2.658 1.314 2.396 1.155 4.79 2.293 7.187 3.437 14.53 6.938 28.997 13.736 42.313 21.25 17.27 9.75 36.245 28.402 50 48.814 4.14-23.795 6.27-45.762 19.875-66.5 35.98-54.857 86.962-108.22 68.03-178.875-11.262-42.03-46.238-64.318-80.53-64.345zm-298.75 77.656c-34.293.028-69.27 22.317-80.532 64.345C5.1 254.28 56.053 307.643 92.03 362.5c13.605 20.74 15.737 42.706 19.876 66.5 13.755-20.412 32.728-39.065 50-48.813 44.413-25.066 101.483-42.217 131.875-82.875-17.71-8.498-33.892-16.466-55.405-30.156H72.625c-16.633-23.38-28.21-47.227-20.656-74.22 8.705-31.11 31.163-43.916 52.874-43.842.7.002 1.395.033 2.094.062 22.347.916 44.4 15.88 53.124 48.438l6.5 25.156 18.657-18.625c22.89-22.892 51.858-24.404 72.655-14 8.082 4.043 14.844 9.614 19.594 16.813 12.327 6.815 23.973 11.22 35.967 15.687-4.12-26.854-20.396-48.43-42.53-59.5-27.5-13.76-61.846-8.22-91.282 12.094-15.222-32.52-41.577-54.628-71.75-55.876a77.8 77.8 0 0 0-3.313-.063zm292.843 264.626c-6.496 53.84-30.488 46.8-30.97 80.72-.208 15.372 14.203 28.062 32.064 28.062 17.86 0 32.594-12.684 32.594-28.063 0-34.092-26.52-27.088-33.688-80.72z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/tron-arrow.svg b/static/_icons/_ability/tron-arrow.svg
new file mode 100644
index 00000000..9782d1f4
--- /dev/null
+++ b/static/_icons/_ability/tron-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M21.844 17.813v20.843l252.062 103.28-18.03 12.814L21.843 58.844v47.5l192 78.344-102.813 73.218-3.968 2.844.032 4.844.156 19.75 223.313 88.562-.094 20.094-223.033-88.47.25 30.47.126 13.188.593-.22v.594l221.875 90.75-.217 45.282L491.5 454.188l-160.625-146.25-.188 44.343-132.312-54.124 91.03-65.72 3.94-2.842-.064-4.875-.092-7.657.218.093-1.156-88.53L21.844 17.81zM273.78 164.97l.75 55.155-96.53 69.72-50.53-20.69L273.78 164.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/uprising.svg b/static/_icons/_ability/uprising.svg
new file mode 100644
index 00000000..f82b3409
--- /dev/null
+++ b/static/_icons/_ability/uprising.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m166.3 71.14 8.1 95.06-14.8 2.6-24.7-91.98 9 94.78-15.7 3-24.9-92.14 9.1 94.94-14.83 2.6L71.8 88.06 83.06 200.9l47.24-8.5L148 290c3.3-1.1 6.8-1.7 10.4-1.7 2.7 0 5.3.3 7.8 1l-18.1-100.1 47.2-8.5zm175.9 5.28c-3.3 29.88-14.3 61.48-27.2 55.48-12.2-5.6-8.9-19.2.4-34.25-15.1 10.75-36.3 17.65-22.4 46.65-14.9-8.5-10.7-25.2-12.9-39.2-21.5 16.1-14.4 43.8-5.7 66.2l11.9 3.5.5-25.2 10.2 18.3c12.2-5.1 12.4-8.5 19.8-15.4-4.7 9.2-7.2 19.2-18 26.5l7.9 2.6c22.9-5.3 57.3-45.6 35.5-105.18zm96.5 39.98c-19.8.2-47.8 21.4-33.6 45.4 13.5-59.9 69.2-13.1 62.9 7.8-8.5 28.2-29 25.9-37.3 40.6l14.4 5c64.9-24.2 43.8-95.6-4.5-98.7-.6 0-1.2-.1-1.9-.1zm-166.8 77.1-6.5 32 23.1 5.5 12.2-29.6zm153.2 33.8-20.4 70.2c4.7-2.4 9.9-3.8 15.4-3.8 2.2 0 4.4.2 6.5.6l14.4-61.5zm-156.7 12.2c-11.3 0-20.4 10.3-20.4 23 0 12.3 8.6 22.4 19.5 22.9 2.2 9.5 4.5 19 7.1 28.5 5.6 2.9 10.5 7.2 14.4 12.3 7.1 9.5 11.2 21.9 11.2 35.5 0 6-.8 11.8-2.3 17.3.2.4.4.9.6 1.3l29.5 5.2-7.8 80.6 6.5 27.9h60.6l-9.7-103.7-.6-7.1c9.5-3.3 19.1-6 26.6-8.1l-25.6-5.5c-6.6 6-14.9 9.8-24.1 9.8-12.1 0-22.7-6.6-29.8-16-6.3-8.4-10.2-19.2-11-31-10-20-19.7-40.2-25.4-62.5 4.1-13.9-8.3-30-19.3-30.4zM84.42 249.7c-11.26 0-16.87 5.8-16.86 14.6 0 5-.56 11.1 4.48 14.1-2.53 7.9-5.51 15.5-8.74 23 4.58 1.5 8.79 4 12.5 7.2.14-.2.27-.4.41-.6 4.32-5.7 9.95-10.4 16.4-13.2 1.32-5.4 2.58-10.8 3.77-16.2 5.32-3 8.42-7.8 8.42-12.9 0-8.8-9.12-16-20.38-16zm269.48 44.7c-5.6 0-10.9 2.9-15.4 8.9-4.5 5.9-7.6 14.7-7.6 24.6 0 9.9 3.1 18.7 7.6 24.6 4.5 6 9.8 8.9 15.4 8.9s10.9-2.9 15.4-8.9c4.5-5.9 7.5-14.7 7.5-24.6 0-9.9-3-18.7-7.5-24.6-4.5-6-9.8-8.9-15.4-8.9zm-195.5 11.9c-5.6 0-10.9 2.9-15.4 8.9-4.5 5.9-7.6 14.7-7.6 24.6 0 9.9 3.1 18.7 7.6 24.6 4.5 6 9.8 8.9 15.4 8.9s10.9-2.9 15.4-8.9c4.5-5.9 7.5-14.7 7.5-24.6 0-9.9-3-18.7-7.5-24.6-4.5-6-9.8-8.9-15.4-8.9zM106 310c-5.6 0-10.94 2.9-15.4 8.9-1.13 1.5-2.17 3.2-3.1 5 3.92 8 6.09 17.3 6.09 27.2 0 6.2-.84 12.1-2.42 17.6l15.23 3.3 14.3-3c.8-1 1.7-2.2 2.3-3.2-3.6-7.7-5.6-16.6-5.6-26 0-7.6 1.3-14.8 3.6-21.4-4.4-5.6-9.5-8.4-15-8.4zm314.1 1.7c-5.6 0-10.9 2.9-15.4 8.9-4.5 5.9-7.5 14.7-7.5 24.6 0 3.7.4 7.2 1.2 10.4l17.9 3.9c0-1.3-.1-2.7-.1-4.1 0-13.6 4.1-26 11.2-35.5 1.1-1.4 2.3-2.8 3.5-4.1-3.3-2.8-7-4.1-10.8-4.1zm-367.46 5.9c-5.59 0-10.94 2.9-15.4 8.9-4.46 5.9-7.55 14.7-7.55 24.6 0 9.9 3.09 18.7 7.55 24.6 4.46 6 9.81 8.9 15.4 8.9s10.94-2.9 15.4-8.9c4.46-5.9 7.55-14.7 7.55-24.6 0-9.9-3.09-18.7-7.55-24.6-4.46-6-9.81-8.9-15.4-8.9zm148.96 2.2c-1.7 0-3.5.3-5.1.9 1.8 5.9 2.8 12.4 2.8 19.1 0 10.3-2.3 19.8-6.4 28l26.4 5.8c-.7-3.8-1.1-7.8-1.1-11.9 0-8.1 1.5-15.8 4.1-22.6-1.3-4-3.1-7.6-5.3-10.4-4.5-6-9.8-8.9-15.4-8.9zm255.6 2.1c-5.6 0-10.9 2.9-15.4 8.9-4.5 5.9-7.6 14.7-7.6 24.6.1 9.9 3.1 18.7 7.6 24.6 4.5 6 9.8 8.9 15.4 8.9s10.9-2.9 15.4-8.9c4.5-5.9 7.6-14.7 7.6-24.6 0-9.9-3.1-18.7-7.6-24.6-4.5-6-9.8-8.9-15.4-8.9zm-198 6.3c-5.6 0-10.9 2.9-15.4 8.9-4.5 5.9-7.6 14.7-7.6 24.6 0 9.9 3.1 18.7 7.6 24.6 4.5 6 9.8 8.9 15.4 8.9s10.9-2.9 15.4-8.9c4.5-5.9 7.6-14.7 7.6-24.6 0-9.9-3.1-18.7-7.6-24.6-4.5-6-9.8-8.9-15.4-8.9zm-79 55.2c-6.2 4.9-13.6 7.9-21.8 7.9-7.9 0-15.2-2.8-21.3-7.4l-31.8 6.8L129.4 494h67.7l.4-3.3c-3.6-35.3-7.4-70.6-10.9-105.9zm-97.77 3.2c-7.11 9.4-17.73 16-29.79 16-11.6 0-21.86-6.1-28.94-14.9l-5.7 1.2v66.9l8.15 38.2h70.28l5.27-39.7-15.94-68.4c-1.81-.5-2.37-.6-3.33.7zm343.17 1.7c-10 2.2-19.7 4.7-29.4 7.6l9.2 98.1h84.5l4.1-30.6v-70.9c-2.4-.8-5-1.4-7-1.6-7.1 9.4-17.7 16-29.8 16-14.2-2-24.8-8.4-31.6-18.6zm-197 7.8-22.4 3.4 9.7 94.5h83.4l9.1-93.7-19.2-3.4c-.1.1-.1.2-.2.3-7.1 9.4-17.7 16-29.8 16-13.2-1.9-24.1-8-30.6-17.1z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/william-tell-skull.svg b/static/_icons/_ability/william-tell-skull.svg
new file mode 100644
index 00000000..59b4d811
--- /dev/null
+++ b/static/_icons/_ability/william-tell-skull.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m86.652 18.096-1.554 70.736-69.46.28L89.52 163.01l54.353.146 44.604 44.604h.002c6.92 6.92 12.97 5.18 16.45 1.982 1.74-1.6 2.67-3.525 2.625-5.955-.044-2.43-1.07-5.845-5.416-10.19l-42.505-42.505.906-59.1-73.888-73.894zM286.21 139.62c-28.266.063-55.965 10.132-77.437 30.034a35.041 35.041 0 0 1 8.56 6.29c13.655 13.66 13.664 35.797.02 49.443-13.643 13.645-35.773 13.635-49.43-.026-.323-.32-.632-.652-.94-.983-9.182 14.817-17.888 30.39-25.49 44.92-16.012 30.61-25.985 53.498-28.266 58.78a127.167 127.167 0 0 0 11.138 17.474l18.092-27.386 15.588 10.3-20.834 31.532c5.772 5.562 11.97 10.515 18.53 14.99l18.688-28.285L190.016 357l-18.296 27.69c7.127 3.872 14.557 7.385 22.202 10.7l14.142-26.86 16.53 8.704-13.307 25.274c6.334 2.48 12.76 4.918 19.256 7.37 20.375-35.275 39.245-72.09 79.373-85.296l5.84 17.746c-14.786 4.866-26.283 14.15-36.43 26.256 14.903.904 31.89.907 47.986-1.078a160.8 160.8 0 0 0 13.4-2.227l14.68-38.68-13.273-1.467 5.21-51.684 18.596 1.874-3.356 33.266 18.854 2.084-9.192 24.217 9.88 10.258c43.073-45.297 40.857-120.162-6.983-168.078l-.064-.062c-24.303-24.31-55.36-36.695-85.988-37.36-.957-.02-1.913-.03-2.87-.027zm-5.927 77.907c12.325.005 24.652 4.684 34.004 14.037 16.243 16.246 18.35 41.45 6.385 60.05 0 0-.486 1.367-6.36 7.956-18.695 18.697-49.295 18.68-67.998-.027-18.7-18.703-18.72-49.305-.025-68.002 9.346-9.347 21.668-14.018 33.993-14.013zm-.004 18.557c-7.507-.003-15.01 2.886-20.786 8.662-11.55 11.552-11.543 30.02.027 41.592 11.576 11.576 30.034 11.58 41.585.027 11.55-11.552 11.545-30.024-.025-41.595-5.787-5.788-13.295-8.683-20.8-8.686zm-59.643 9.143-22.082 69.025-36.016-29.117 58.097-39.908zm244.763 79.11c-16.418.023-34.172 6.102-52.67 15.554l55.657 18.782 12.965-32.242c-5.154-1.438-10.48-2.102-15.952-2.094zm-100.5 29.878-8.273 21.8 60.086 60.782-34.098 13.26c26.71 26.71 54.527 45.262 107.717 43.71-1.153-47.405-16.373-80.384-43.707-107.716l-14.684 37.753-67.04-69.588zm-38.427 45.275 8.17 46.89c11.254 2.533 24.023-4.133 28.43-15.16l-8.493-25.825-13.084 3.4-15.023-9.305zm-17.844 17.15-31.667 43.174c6.304 9.973 20.355 14.382 31.516 9.594l.15-52.77z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/wind-slap.svg b/static/_icons/_ability/wind-slap.svg
new file mode 100644
index 00000000..35599095
--- /dev/null
+++ b/static/_icons/_ability/wind-slap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M164.672 15.316c-4.24-.02-8.52-.008-12.848.032 356.973 34.267 149.668 296.606-133.02 225.675v29.272c208.715 52.028 406.9-83.077 335.225-186.316 74.252 54.5 10.927 228.767-217.44 261.272 80.052-17.795 151.75-58.013 188.793-112.78v-.003c-76.777 75.27-199.896 99.73-306.61 83.514v38.547l.03.003v29.983c103.604 17.95 230.47-10.83 317.05-98.192-64.335 91.95-198.984 149.52-317.05 142.64v62.942C398.408 491.783 590.073 234.433 449.346 98c90.898 155.644-119.865 338.862-308.12 339.258C392.92 399.278 523.24 116.29 322.532 33.352c-43.685-11.26-96.104-17.76-157.86-18.036z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_ability/winged-arrow.svg b/static/_icons/_ability/winged-arrow.svg
new file mode 100644
index 00000000..2ac9b794
--- /dev/null
+++ b/static/_icons/_ability/winged-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m73.094 16.406 11.562 68.97-69.562-10.97 49.343 71.28 58.938-4.374 229.188 250.532 10.343 11.28-14.75 4.032-31 8.47 158.25 61.562-61.312-158.032-7.5 29.438-3.844 15.062-11.5-10.437-250.78-227.376 4.5-60.72-71.876-48.718zM292.47 37.438c18.44 24.016 36.14 55.45 51.436 92.093-47.545-40.388-98.46-68.028-144.625-80.843-20.273-5.627-39.474-8.398-57.093-8.28 37.747 18.288 79.988 47.766 120.938 85.937-20.085-2.15-38.57-.45-54.188 5.187 28.617 5.76 63.627 21.405 99.032 45.564-15.344-.555-29.557 1.836-41.908 7.22 24.04 4.608 52.973 18.012 82.188 39.25 22.694 32.528 39.02 63.948 47.656 91.31l7.313-28.624 7.186-28.28 10.563 27.217 59.53 153.438c7.184-15.762 10.475-34.355 9.97-54.97l.686 1.095c-.002-153.714-38.734-285.77-94.562-346.78 12.703 40.545 22.227 92.176 27.25 150.405-33.583-73.595-81.73-128.26-131.375-150.938zM38.874 148.156c.332 16.408 3.085 34.11 8.25 52.72 13.017 46.892 41.315 98.688 82.75 146.874-40.03-16.008-74.276-34.903-100-54.656 22.68 49.645 77.343 97.792 150.938 131.375-58.23-5.024-109.83-14.578-150.375-27.283 60.728 55.565 191.833 94.23 344.625 94.594h.125c23.24 1.485 44.092-1.704 61.53-9.592L283.97 422.75l-26.406-10.25 27.344-7.47 24.97-6.81c-25.7-8.406-54.856-23.48-85.095-44.126-24.744-31.907-40.308-64.004-45.343-90.25-5.886 13.508-8.214 29.278-7 46.28-24.863-36.017-40.892-71.74-46.75-100.843-5.588 15.482-7.313 33.777-5.25 53.657-35.763-38.874-63.668-78.778-81.562-114.78z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/angler-fish.svg b/static/_icons/_animals/angler-fish.svg
new file mode 100644
index 00000000..8dacf648
--- /dev/null
+++ b/static/_icons/_animals/angler-fish.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M442.906 52.156c-.806.02-1.617.076-2.437.188-13.124 1.79-22.993 13.47-30.47 32.875-5.993 15.552-10.81 37.088-13.938 66.5-32.023-22.095-63.766-29.543-95.28-25.845l-26.97-60.063-24.968 71.282L198.5 107.28l-.813 63.064-46.562 1.75 12.53 30.562c-17.504 16.246-34.963 34.403-52.405 53.844l-92.813-45.375 44.876 75.906-36.47 39.095 36.282 2.78-40.47 59.876 108.064-64.905 87.56 42.53-49.75 17.376 35.564 13.814-32.563 22.22 52.157.967-4.593 46.845 59.312-72.03L365 437.654 496.063 270.47a652.84 652.84 0 0 0-11.594-19.095l-119.376 150.97-4.72 5.967-6.78-3.406-44.344-22.22 8.375-16.717 37.53 18.81L473.69 234.907c-20.158-29.63-40.187-52.59-60.094-69.656 2.96-34.52 8.11-58.353 13.875-73.313 6.36-16.51 12.884-20.706 15.5-21.062 1.306-.178 2.63.047 4.75 1.53 2.118 1.485 4.693 4.293 7 8.19 4.582 7.743 8.005 19.562 8.217 31.686a23.333 23.333 0 0 0-13.437 21.157c0 12.878 10.436 23.313 23.313 23.313 12.876 0 23.312-10.435 23.312-23.313 0-9.752-6.002-18.114-14.5-21.593-.284-15.23-4.225-29.62-10.813-40.75-3.322-5.615-7.346-10.478-12.375-14-3.77-2.642-8.322-4.49-13.125-4.875-.8-.065-1.6-.083-2.406-.064zm-52.344 158.156c3.147-.125 6.36.236 9.563 1.094a32.012 32.012 0 0 1 8.438 3.625c-.14 0-.268-.03-.407-.03-9.922 0-17.97 6.636-17.97 14.813.002 8.176 8.048 14.812 17.97 14.812 6.503 0 12.16-2.86 15.313-7.125.645 4.24.462 8.684-.72 13.094-4.575 17.074-22.11 27.2-39.188 22.625-17.074-4.576-27.23-22.115-22.656-39.19 3.717-13.872 16.022-23.176 29.656-23.718zm-95.375 11.157 17.907 5.31-12.75 43.064 47.437 38.844-11.842 14.468-52.25-42.78-4.782-3.938 1.75-5.938 14.53-49.03zm-44.937 25.686 17.938 5.313-8.875 29.936 33.437 27.375-11.844 14.47-38.25-31.313-4.812-3.937 1.78-5.97 10.626-35.874z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/badger.svg b/static/_icons/_animals/badger.svg
new file mode 100644
index 00000000..6f512163
--- /dev/null
+++ b/static/_icons/_animals/badger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M104 66.5c-19.49-.86-36.65 3.7-49.18 11.8-14.94 9.7-24.41 24.2-26.23 41.5-1.66 15.8 3.26 34.5 18.44 53.9l22.98-17.9c-9.37-12-13.44-23.2-12.41-33 .88-8.4 5.79-15.3 13.07-20 10.69-6.9 25.97-9.3 43.03-6.2 20.3 3.6 42.6 15 63.8 36.1 59.8 80.6 56.4 198.2 56.4 198.2-49.4 21.9-62.4 85.1-48.2 116.1l70.3 20 70.3-20c14.2-31 1.2-94.2-48.2-116.1 0 0-3.4-117.6 56.4-198.2 21.2-21.1 43.5-32.5 63.8-36.1 17.1-3.1 32.3-.7 43 6.2 7.3 4.7 12.2 11.6 13.1 20 1 9.8-3 21-12.4 33l23 17.9c15.1-19.4 20.1-38.1 18.4-53.9-1.8-17.3-11.3-31.8-26.2-41.5-33.4-21.6-99.8-18-154.9 46.2h-92.6c-34.4-40.12-73.3-56.58-105.7-58zm-10 109L20.05 299.6l15.8 11.7-13.48 31c47.66 9.8 93.13 25.5 129.23 68 9.7-68.9-79.86-105.6-79.86-105.6L94 175.5zm323.6 0 22.3 129.2s-89.6 36.7-79.9 105.6c36.1-42.5 81.6-58.2 129.2-68l-13.5-31 15.9-11.7-74-124.1zm-262 68.5c-14.1.3-27.4 8.6-32.9 26.2.3 28.7 40.6 48.9 66.5 41.2-6-7.5-19.4-19-48.7-25.6l5.5-24.4c26.3 6 43 15.5 53.7 24.8-3.2-21-15.8-34.6-30.1-39.8-4.6-1.7-9.4-2.5-14-2.4zm200.8 0c-4.6-.1-9.4.7-14 2.4-14.3 5.2-26.9 18.8-30.1 39.8 10.7-9.3 27.4-18.8 53.7-24.8l5.5 24.4c-29.3 6.6-42.7 18.1-48.7 25.6 25.9 7.7 66.2-12.5 66.5-41.2-5.5-17.6-18.8-25.9-32.9-26.2zM256 384.6c72.6 0 32.9 51.4 0 51.4-16.5 0-34.6-13-39.6-26-4.9-12.6 3.3-25.4 39.6-25.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/barn-owl.svg b/static/_icons/_animals/barn-owl.svg
new file mode 100644
index 00000000..202112ba
--- /dev/null
+++ b/static/_icons/_animals/barn-owl.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M297.8 422h-3.6l-28.9 58h25.5v17H185.9v-17h44.2l19.8-62c-41.2-7-73.9-25.5-96.9-58.7l-4 28.5c-23.5-19.2-38-49.3-33.9-101.7l-11.5 51.8s-32.45-25.7-12.7-99.1C44.59 145 56.22 23.5 160.8 23.5c137.9 0 86.6 152.8 109.2 190.3l28.4 29.2c-14.1-10.3-27.7-17-40.2-20.7-36.2-10.8-65.6 1.6-81.1 24.7-15.2 22.5-17.3 56.1 2.2 90 18 31.1 55.1 63 118.5 85zm97.3 1c-113.9-15-174.2-55.6-197.7-96.4-14.8-25.6-14.5-50.9-3-67.9 11-16.4 32.2-24.1 57.9-16.5 42.8 12.7 95.7 64.5 142.8 180.8zm-44.3-125.9 96.2 99.2c-12.4 3.5-24.6 6.7-36.4 9.7-19.2-45.8-39.5-81.5-59.8-108.9zM163.1 74.9c-15.3-15.4-29.2-20.1-40.4-18.6-13.5 1.8-24.49 12.7-30.77 28.8-16.69 42.9.21 122.8 71.17 122.8 71 0 87.9-79.9 71.2-122.8-6.3-16.1-17.3-27-30.8-28.8-11.2-1.5-25.1 3.2-40.4 18.6zm-6.4 17.8 6.4 7.5 6.4-7.5c12.5-14.8 22.8-21.1 31.8-19.9 8.1 1.1 13.7 8.6 17.5 18.4 13.4 34.6 1.6 100-55.7 100-57.3 0-69.1-65.4-55.6-100 3.7-9.8 9.3-17.3 17.4-18.4 9-1.2 19.4 5.1 31.8 19.9zm-41.4 24.8 15.4 4.3 22.8 56 19.4-.5 19.6-55.3 16.8-6.7-7.8-19.4-25.5 10.3-13.6 38.3-16.2-40-25.3-7.1z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/bison.svg b/static/_icons/_animals/bison.svg
new file mode 100644
index 00000000..dbd772d8
--- /dev/null
+++ b/static/_icons/_animals/bison.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M299.8 98.69c-1.3 0-2.6 0-3.9.1-51.6 2.71-102.1 60.91-146.9 67.51-58.69 8.6-93.42 5.5-98.58 58.5-1.56 15.5-8.47 22.6-13.19 38.4-6.73 5.6-16.83 10-17.24 18.7-.48 10.2-1.49 20.8 6 30l14.62-9.8c-.81-23.3 5.37-32.6 14.62-53.5 3.35 30.2-4.28 57-12.3 88.7 3.49 25.8 9.16 52.2 20.61 76h35.98c-21-23.1-33.71-50-22.11-76 8.76-1.2 21.3-3.5 28.89-10.6 13.6 33 17.7 57 40.1 86.6h40.5c-20.4-25.8-50.8-36.2-43.5-91.1 30.4.6 43 6.8 88.1-5.9l-2.8 35.6c6.8 23.8 24.3 41.7 38.4 61.4h38.6c-17.1-19.6-45.1-30.2-40.5-69.2l8.7-24.5c21.8 32.6 41.8 65.8 77.9 93.7h36c-22.2-23.5-63.8-48.7-63-93.7 22.7 4.5 29.8 9.8 41 6 8.9 23.8 19.1 44.8 37 56.6 21-23.5 25.5-35.7 26.2-66.7l22.5 14.2c6.3 4.6 19.9-5.4 18.8-12.7l-3.8-31.5c5.7-11.9 12.9-23.4 25.5-33.4 2.6-26.5-10-51.1-25.1-76.1-5.4-9-32.2-6.8-49.9-12-46.6-26.7-76.9-64.97-117.2-65.31zm73.4 35.61 7.5 14.5c11.1 21.5 16.9 31.6 46.6 45.2 5.8 3.4 11.1 8.6 13.1 14 2 5.7 1.8 11.5.4 16.8-2.8 11.1-15.8 22.6-25.3 19.7-32.8-11-51.6-25-58.9-42.8-7.3-17.8-1.6-36.5 8.3-53.4zm.2 38.1c-2.7 8.3-2.9 15.7-.2 22.4 4.3 10.4 17.2 21.9 46.2 32 4.1-6 7.2-13.2.4-16.4-18.9-10-36.1-22.5-46.4-38zm83.6 66.8c-3 9-.6 16.6 4.9 23.6-7.7-1.5-18.1.4-20.2-7.9-1.5-5.9 7.1-10.8 15.3-15.7z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/boar.svg b/static/_icons/_animals/boar.svg
new file mode 100644
index 00000000..0eb476d5
--- /dev/null
+++ b/static/_icons/_animals/boar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m244.3 66.3 11.5 25.2-36.4-13.9 3.4 21.5-190.66 122-10.27 125.1 18.23-1.9C77.07 386.1 47.94 462 47.94 462h32.17l30.79-63.1s-41.49-73.4-7.8-124.9c-3.69 81 43.7 117.1 43.7 117.1l35.3-9.4-2 17.1 59-16.9s-66.8-57.8-36.5-128.1l15.3-9c-16.2 119 72 114.5 91.6 217.2h26.1l-51.5-223.9 17.7 10s13.1 37.7 23.3 66.9c7 20 26.2 33.2 47.4 32.6l29.3-.9c11.8-8.9 16.4-18 17-26.4.3-5-.6-9.6-2-13.4-7.5 10.7-21.3 23.5-44.5 24.3l-.5-16.7c28.4-.9 36.7-27.4 36.7-27.4.9-2.9 3.3-5 6.3-5.7 2.9-.6 6 .5 8 2.8 0 0 14 16.4 12.6 37.2-.5 7.7-3 16.1-9.2 24.5l18.9-.6 45-48c-69.5-46.6-55-96.4-43.9-146.8l-63.7-26.6c2.1 20.1 1.9 36.9 1.9 36.9l-16.7-.2s.6-39.5-7.7-68.1c-2.3-7.9-5-15.2-9.1-19.7-44.2 33.7-31.6 97.8-31.6 97.8l-16.3 3.1s-7.7-41.4 9.7-78.9l-68.4-28.5zm231.7 0-55.7 46.9 33.6 18.6L476 66.3zM346.4 209.4s9.7.2 19.5 4.8c9.7 4.5 19.6 13.3 19.8 30.3-53.7 4.1-39.3-35.1-39.3-35.1zm10.9 171.1 17.8 81h28.2l-7.6-77.1-38.4-3.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/canadian-goose.svg b/static/_icons/_animals/canadian-goose.svg
new file mode 100644
index 00000000..0ae45f70
--- /dev/null
+++ b/static/_icons/_animals/canadian-goose.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M43.9 465H458v-20H43.9zm79.4-39h123.9l3.6-9-43.3-15L94 410c8.9 6 18.9 11 29.3 16zm148.4 0h82.8c35.2-27 45.8-70 40.7-105l-26.6-182L473 129l-1-25-54-1-13-38c-28.1-27-128.6-30-107.8 76 22.1 113-2.2 136-2.2 136l21.6 12s22.9-26 .2-152c-10.3-58 25.7-84 77-56l9.9 35-26.1 3-16.3-17 13.7-5s-26.6-19-49.1-5l27.8 51 18.4 148s-12.2 57-135.3 94c-15.2 5 52.7 11 52.7 11zm210.3 0v-14h-88c-3 5-6.2 10-9.5 14zM312.3 308l-65.1-24L39.9 386h41.6c29.6-1 91.8-5 147.2-24 33.6-12 65.1-29 83.6-54z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/capybara.svg b/static/_icons/_animals/capybara.svg
new file mode 100644
index 00000000..ead7be86
--- /dev/null
+++ b/static/_icons/_animals/capybara.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M374 74.47c-7.1.26-10.8 6.79-4.3 15.89l24-3.41c-6.5-9.11-14.1-12.69-19.7-12.48zm-38 9.1c-3.5 0-6.6 1.01-9 2.73-7.1 5.1-7.6 16.8 7.9 28-8.9 15.9-29.8 45.8-60.2 43.2l32.1 9.8c-2.7 1.6-5.7 3.1-9.2 4.5C118.7 119.4 29.29 275.1 29.29 275.1c51.1 69.9 4.1 98.9 4.1 98.9l7.81 63h28.81l3.19-41s32.5-3 62.8-63.3c29 9.8 71 9.1 102.6 3.3l-4.1 7.1-37.4 11.1c31.2 2.8 58.5-2.3 78.7-8.5-3.4-15.1-4.5-31.5 3.5-52.8L307.2 437h25.9s-4.6-75 34.4-143.5c5-7.8 9.4-15.1 13.1-23.7l2 11.1-10.5 23.2s39-15.7 29.2-96c23 3.9 45.6 1.7 66.6-4.6 5.3-1.7 9.5-5.8 11.2-11 5-15.6 9.5-32.5 10.4-47.3l-9.7.8c-.2-15.3-21.2-13.1-14.9.8l-10.5.5-4.9-15.5s16.9-12.3 38.4-7.1c-.9-3.2-2.2-6-3.9-8.6-13.8-20.8-54.3-27.8-122.4-15.6-8-12.24-17.8-16.96-25.6-16.93zm49.9 33.83c12.4 1.4 21.9 4.3 30.2 9.6h-15.9c-1.6 4.8-7.5 8.4-14.5 8.4s-12.9-3.6-14.5-8.4h-15.5c4.2-3 15.3-9.7 30.2-9.6zm9.6 181.6c-15.2 30.3-34.5 33.8-34.5 33.8-13.4 37.7-10.4 71.8 1.8 103.9H385c-3.8-44.7-3.2-78.4 10.5-137.7zm-251.1 50.3L126.6 376l27.2 25.1 13.9 35.6h29.9l-20.1-81.8z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/cobra.svg b/static/_icons/_animals/cobra.svg
new file mode 100644
index 00000000..6fd00ec5
--- /dev/null
+++ b/static/_icons/_animals/cobra.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M272.4 20.95c-15.3.23-28.6 3.6-40.4 10.47-15.4 2.32-31.2.89-45.4 4.01-23.6 5.29-44.3 18.98-54.5 56.05 1.7-2.63 3.7-5.01 5.9-7.08 5.9-5.55 14.2-8.95 22.7-7.25 8 1.59 14.1 7.27 17.7 14.08 3.4-8.45 8-16.94 13.7-25.52 9.5-12.42 24.3-13.31 37.6-12.68L288 63.18l45.5-6.98c-7.8-18.12-27.2-30.54-53.6-34.39 11.4 8.12 12.8 19.86 13.4 30.1-10.6-7.83-17.4-12.76-34.6-18.61l16.4-12.1c-.9-.1-1.8-.18-2.7-.25zm-49.9 49.38c-5.8 0-11.3 1.51-15.4 5.32-7.9 11.93-13.2 22.91-16 33.45 22.3-2.2 43-3.2 64.6-.7-8.9-11.04-17.3-23.12-22.6-36.56-3.5-.95-7.1-1.5-10.6-1.51zm109.6 4.23L317 76.87l5.7 30.03zm-76.9 1.13c7.9 13.7 19.7 27.21 30.7 40.81 4.1 2.3 7.7 3.3 10.7 3.6-6.3-13.4-9.7-26.53-12.5-39.39zM150.1 97.66c-2.7 2.54-5.3 6.94-6.4 12.44-1.1 5.5-.4 10.7 1.1 14.1 1.7 3.5 3.6 4.9 5.5 5.2 2 .4 4.3-.1 7.1-2.7s5.4-7.1 6.5-12.6c1.1-5.5.3-10.6-1.2-14-3.3-6.39-8.1-6.47-12.6-2.44zm76.6 27.14c-13 0-26.2 1-38.3 2.5-.1 3.9.1 7.9.7 11.8.7 5.3 2.1 10.7 4 16.2 28.6-5.5 53.5-8.6 80.8-4.1-.3-7.3-.8-14.5-1.5-21.4-13-3.7-29.2-5.1-45.7-5zm-55.8 13.8c-.4.4-.8.9-1.3 1.3-5.9 5.5-14.2 8.9-22.8 7.2-3.6-.7-6.9-2.3-9.7-4.4 6.3 14 16 28.5 28.2 42.1 15.9 17.8 35.5 33.9 55.6 45.5-3.2-3.5-6.2-7-9.1-10.5-23-27.7-36.9-52.7-40.5-78.1-.1-1-.3-2.1-.4-3.1zm73 28.4c-14.8.2-30 2-43.4 4.9 6 11.3 14.3 23.3 25.1 36.4.3.4.7.8 1 1.2 18.7-10.4 34-14 47.2-14.5.3-8.4.5-17 .5-25.7-9.4-1.7-19.8-2.4-30.4-2.3zm-5.2 56.1c8.2 8.8 17.3 18.1 26.4 28.1 10.3-7.5 23.2-13.3 38.3-15.6-7.3-7.7-14.5-15.2-21.4-22.7-16-.8-32.6 4.7-43.3 10.2zm38.2 41.5c7.6 8.9 14.9 18.5 21.6 28.8 13.7-7.4 28.6-13.8 43.4-15.6-7.3-8.8-14.9-17.2-22.6-25.5-14.9.1-31.6 5-42.4 12.3zm74.5 30.8c-12.5.1-28.6 5.6-43.8 13.4 7.3 13.6 13.3 28.4 16.9 44.8 5.2 23.7 4.4 43.2-7.5 57.8-1.6 1.7-2 2.3-3 3.4-44.6 53.7-203.7 39.5-202.2 31.9 2.2-13.6 96.1 7.5 168.5-30.3-56.7.1-117.1-1.9-170.4 4.7-15.02 2.7-71.52 5.1-72.51 24.8 1.54 16.1 19.23 24.4 31.2 29.1 21.11 8.1 67.31 13.1 99.91 15.1 65.2 3.9 141.1-4.7 176.1-19.3 22.5-9.4 35-22.6 42-38.2 6.9-15.5 8.1-33.9 5.6-52.8-4.2-31.7-18.3-59.2-36.4-84.2-1.4-.1-2.9-.2-4.4-.2zm-99.5 45.8c-49.1-.1-194.74 14.9-194.37 49.5.1 8.1 6.1 14.4 16.23 19.3 10.16-3 21.61-5.1 33.84-6.7 37.2-4.8 81.5-4.7 112.6-5.3 13.4-.3 32.6.3 50 .4 8.8.1 17.1.1 23.8-.1 4.7-.1 8.3-.5 10.9-.8 4-6.3 5.5-14 4.5-25l-202.3 9.8c27.4-14.4 86.1-21.2 134.5-25.2 24.8-5 27.3-9.3 26.1-14.3-.9-1-6.7-1.6-15.8-1.6zm156.5 26.4c.6 3.2 1.1 6.5 1.6 9.9.9 6.8 1.4 13.6 1.4 20.5 16-1.3 33.9-6.7 44.1-6.6-6.1 8.5-26.8 17.2-45.1 22-1.2 9.2-3.6 18.1-7.4 26.7-1.1 2.5-2.4 5-3.7 7.4 42.8-3.2 74.7-10.7 75.3-46.6.4-23.4-36.9-30.7-66.2-33.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/deer-head.svg b/static/_icons/_animals/deer-head.svg
new file mode 100644
index 00000000..07475d0f
--- /dev/null
+++ b/static/_icons/_animals/deer-head.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M155.2 25.2c-58.44 28-81.24 63.4-77.16 96.6 1.77 14.5 8.78 28.8 20.67 42.4-19.59-12.8-30.66-26.7-36.15-40.5-14.71-37 11.66-71.4 11.66-71.4L60.96 42.2s-31.94 42.2-13.88 87.7c6.5 16.3 19.6 33.4 43.74 48.8.49.3.34.2.49.3 4.86 3.1 10.19 6.2 15.99 9.1 45.6 27.1 64.4 48.4 64.4 48.4l5.7 6.4 26.7-24.9-4.8-6s-19-24.3-19.2-57.7l-16.7-.2-.9 35.7c-40.3-19.4-64.71-43.9-67.92-70C91.14 91.7 113 63.9 162.4 40.2zm201.6 0-7.2 15c49.4 23.7 71.3 51.5 67.8 79.6-3.2 26.1-27.6 50.6-67.9 70l-.9-35.7-16.7.2c-.2 33.4-19.2 57.7-19.2 57.7l-4.8 6 26.7 24.9 5.7-6.4s18.8-21.3 64.4-48.4c5.9-3 11.6-6.3 16.5-9.4 24.1-15.4 37.2-32.5 43.7-48.8C483 84.4 451 42.2 451 42.2l-13.2 10.1s26.4 34.4 11.6 71.4c-5.5 13.8-16.5 27.7-36.1 40.5 11.9-13.6 18.9-27.9 20.7-42.4 4-33.2-18.8-68.6-77.2-96.6zM221.9 228l-38.4 34.8c-63.3-26.7-138.65-24.6-138.65-24.6 24.89 103 105.05 92.2 105.05 92.2s3.3 15.3 6.8 31.2c4.9 22.8 18.1 43 37.1 56.2 0 0 5.1 14 10.4 28 7.5 19 23.9 34 44.1 39 4.6 1 7.7 2 7.7 2s3.1-1 7.7-2c20.2-5 36.6-20 44.1-39 5.3-14 10.4-28 10.4-28 19-13.2 32.2-33.4 37.1-56.2 3.5-15.9 6.8-31.2 6.8-31.2s80.2 10.8 105.1-92.2c0 0-75.4-2.1-138.7 24.6L290.1 228l-34.1 4.4zm-32 104.3c13.7-.2 34.6 5.3 39.7 39.7-42.1 34.8-44.8-26.5-44.8-26.5l-7.3-11.3s5.2-1.7 12.4-1.9zm132.2 0c7.2.2 12.4 1.9 12.4 1.9l-7.3 11.3s-2.7 61.3-44.8 26.5c5.1-34.4 26-39.9 39.7-39.7zm-69.6 99.5h3.5c38.7-1 20.9 15 20.9 15-.8-11-12.1-10-12.1 1 0 6 6.6 12 16.5 9 0 0-5.6 15-25.1 16h-.4c-19.5-1-25.1-16-25.1-16 9.9 3 16.5-3 16.5-9 0-11-11.3-12-12.1-1 0 0-16.7-15 17.4-15z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/deer.svg b/static/_icons/_animals/deer.svg
new file mode 100644
index 00000000..76b7fbf8
--- /dev/null
+++ b/static/_icons/_animals/deer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m139.3 20.25-16.1 4.5c9.4 33.5 22.3 51.1 37 60.3 14.9 9.4 32.1 10.2 50.9 8.5 25-2.3 53.2-9.6 82 1.1 7.8 3.5 16 7.95 24.7 13.85 4.6-1.4 8.6-3.2 12.6-4.5 0 0 3.2-10.25-2-23.35-4.5-11.5-15.7-26-44-36.2l-5.6 15.6c17.4 6.4 26.8 14.3 31.6 21.8.7 1.1 1.2 2.1 1.7 3.1-3.8-2-7.7-3.8-11.5-5.2-28.1-13-50.6-13.8-68.6-15.8-9.6-1-17.7-2.2-24.4-7-6.7-4.9-11.7-13.4-16-28.2l-16 4.7c5.7 19.6 13.3 30.4 22.2 36.9 4 2.9 8.3 5 12.9 6.5-15.8.85-30.7.67-41.7-5.9-12.2-7.7-21.9-22.9-29.7-50.7zm89.5 3.6c-.9 11.2 1.1 20.3 4.4 27.7 7.7.96 14.4 1.1 21.4 2.3-5.4-6-10.2-15.2-9.2-28.8zm120.3 13.5-10.9 12.5c8.2 7.2 10.5 15.8 10.5 23.1-4.4-3.92-8.4-6.53-13.1-8.9 7.2 8.42 8.2 23.36 8.7 31.4l15.5 1.7s17.6-35.2-10.7-59.8zm-80.7 69.35c-17.5 2-26.8-2.6-32.4 13.8 0 0 18.8 27.9 68.9 27.2-2.8 11.4-1.5 19.8-1.5 29.9 0 33.6-27 62.9-86.5 62.9-30.2 0-66.9 5.4-94.9 20.5-19.9 10.7-35.47 26.2-42.36 47.7l7.81 10.9 14.95.2v61.7l-18.24 28.3 5.24 82h17.3l1.5-66c8.6-5 28.3-18 45.1-38 22.8-26.9 40.3-66 19.7-114.4l15.4-6.5c16.9 39.7 11 74.1-3.8 101.8 28.3-.9 52.6-2.7 73.2-6.1l-4.7-56.3 16.6-1.4 15.8 186.9h17.2l2.9-121.7c13.7-5.8 44.9-27.1 59.5-101.1 1.8-9 2.8-16.6 3.3-23.1 2.3-16.5 3.6-35.1 4-56.3l-24.5-7.7h75.3l7.3-16.5c-7.1.3-15.6-3.4-15.6-3.4l1.7-8h15.8l-85.5-44.3c-9.5 3.6-19.5 8.3-26.5 14-5.6-4-25-16.5-52-17zm95.5 226.6c-9.7 18.1-20.1 31.6-29.1 41.2l47.1 20.8-20.9 47.5 15 7 33.4-64.8-44.3-37.4c-.4-2.3-.9-6.8-1.2-14.3zm-153.8 50.8c-11.3.7-23.3 1.2-36.1 1.4-8.7 11.5-18.7 22.6-29.1 31.2l8.7 75h17.1v-65c7.3-6 24.9-21.3 39.4-42.6z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/elephant-head.svg b/static/_icons/_animals/elephant-head.svg
new file mode 100644
index 00000000..942664cf
--- /dev/null
+++ b/static/_icons/_animals/elephant-head.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M137.057 36.698c-2.614 0-5.23.162-7.827.52-25.68 3.542-67.16 25.9-97.54 52.824 10.785-5.202 24.81-11.394 39.464-16.28 13.623-4.54 27.76-8.077 41.006-8.306a74.323 74.323 0 0 1 5.62.11c7.407.437 14.596 2.11 20.863 5.99a31.457 31.457 0 0 1 5.234 4.074c6.646-10.978 14.16-22.022 23.152-33.076-7.964-2.88-17.548-5.41-27.362-5.803-.87-.034-1.74-.052-2.61-.052zm237.886 0c-.87 0-1.742.018-2.61.053-9.815.395-19.4 2.925-27.362 5.804 8.993 11.054 16.507 22.098 23.153 33.076a31.592 31.592 0 0 1 5.234-4.074c6.267-3.88 13.456-5.553 20.864-5.99a74.323 74.323 0 0 1 5.62-.11c13.246.23 27.383 3.766 41.006 8.307 14.655 4.885 28.68 11.077 39.465 16.28-30.38-26.925-71.86-49.283-97.54-52.825a57.295 57.295 0 0 0-7.827-.52zm-179.45 1.02c-28.343 29.284-43.33 58.435-58.462 88.687.01 8.366.11 22.473 1.9 36.78 1.905 15.244 6.6 29.882 11.412 34.722l24.36 22.395H185v58.437l17.742 8.87 3.963-11.888-7.53-37.655 17.65-3.53 15.415 77.077c5.957 4.855 14.755 7.688 23.76 7.688s17.803-2.833 23.76-7.688l15.414-77.078 17.652 3.53-7.53 37.656 3.962 11.888L327 278.74V220.3h12.273l22.364-22.364c4.818-4.818 9.525-19.486 11.433-34.753 1.79-14.307 1.89-28.414 1.9-36.78-15.11-30.204-30.076-59.31-58.33-88.55-44.585 6.62-77.05 5.087-121.148-.137zm16.532 30.533c29.854 14.928 58.096 14.928 87.95 0l8.05 16.103c-34.146 17.073-69.904 17.073-104.05 0l8.05-16.102zM114.67 83.463c-10.478-.157-24.295 2.87-37.824 7.38-20.06 6.686-39.25 16.184-49.223 21.42.863 2.71 1.833 5.585 2.973 8.682C36.2 136.18 44.9 155.478 54.386 174.24c9.488 18.764 19.8 37.067 28.524 50.38 4.362 6.657 8.365 12.083 11.387 15.483.827.93 1.26 1.252 1.887 1.843 21.254-11.455 29.27-22.205 38.695-34.36-8.99-11.137-11.9-26.9-13.81-42.167C118.98 148.685 119 132.3 119 124.3v-2.125l.95-1.9c4.604-9.21 9.277-18.53 14.362-27.915-1.285-2.52-2.94-4.14-5.142-5.502-2.92-1.808-7.107-3.01-12.45-3.324a45.104 45.104 0 0 0-2.05-.074zm282.66 0a46.6 46.6 0 0 0-2.05.074c-5.343.314-9.53 1.516-12.45 3.324-2.2 1.363-3.857 2.982-5.142 5.502 5.085 9.386 9.758 18.704 14.363 27.914l.95 1.9v2.126c0 8 .02 24.384-2.07 41.117-1.91 15.266-4.82 31.03-13.81 42.167 9.425 12.154 17.442 22.904 38.696 34.36.626-.592 1.06-.914 1.887-1.844 3.022-3.4 7.025-8.826 11.387-15.483 8.723-13.313 19.036-31.616 28.523-50.38 9.488-18.762 18.186-38.06 23.79-53.296 1.14-3.097 2.11-5.973 2.974-8.683-9.974-5.234-29.162-14.732-49.223-21.42-13.53-4.51-27.346-7.535-37.824-7.378zm-203.68 54.695c3.49.06 6.937.312 10.287.727 8.934 1.105 17.267 3.408 24.286 6.838 7.02 3.43 13.198 7.86 16.138 15.252l-9.405 3.744c.567 5.67 1.005 11.785 1.188 17.922.375 12.586.037 24.885-3.723 34.84l-16.84-6.358c1.873-4.96 2.914-16.396 2.57-27.947-.237-7.954-.968-16.098-1.824-22.973-4.19-1.547-9.244-2.793-14.6-3.455-14.394-1.78-30.602.868-40.052 8.54l-11.348-13.972c11.352-9.216 25.78-12.845 39.824-13.15a92.846 92.846 0 0 1 3.5-.008zm124.7 0c1.163-.02 2.33-.017 3.5.008 14.043.305 28.472 3.934 39.824 13.15l-11.348 13.973c-9.45-7.673-25.658-10.32-40.053-8.54-5.355.662-10.41 1.907-14.6 3.454-.855 6.875-1.586 15.02-1.823 22.973-.345 11.55.697 22.987 2.57 27.947l-16.84 6.36c-3.76-9.957-4.098-22.255-3.723-34.842.183-6.137.62-12.25 1.188-17.922l-9.406-3.744c2.94-7.39 9.118-11.822 16.137-15.252 7.02-3.43 15.352-5.733 24.285-6.838 3.35-.414 6.8-.668 10.288-.727zm-140.582 27.32c9.89 1.982 19.044 2.465 27.94.122l4.585 17.405c-12.44 3.277-24.618 2.413-36.06.12l3.535-17.647zm156.464 0 3.536 17.65c-11.443 2.29-23.622 3.155-36.06-.122l4.585-17.406c8.895 2.342 18.05 1.86 27.94-.122zM149.484 221.57c-3.926 18.077-11.744 56.325-12.488 79.027-.338 10.32.083 22.752.97 36.025 9.928-15.62 19.44-33.406 29.034-54.307V237.67l-17.516-16.1zm210.11 3.865L345 240.028v42.285c9.74 21.218 19.397 39.22 29.49 55.01.838-13.487 1.126-26.103.526-36.502-1.178-20.39-9.878-54.958-15.422-75.385zM180.12 296.427c-27.3 57.515-55.76 93.404-93.753 125.43 25.12.802 41.352-8.37 56.606-25.72 17.816-20.268 33.22-52.94 52.918-91.825l-15.77-7.885zm151.76 0-15.77 7.885c19.696 38.886 35.1 71.557 52.917 91.824 15.254 17.352 31.487 26.523 56.606 25.72-37.994-32.025-66.454-67.914-93.754-125.43zm-118.06 14.87-.564 1.696-1.266-.633c-19.548 38.716-34.844 72.163-55.5 95.66a107.227 107.227 0 0 1-9.728 9.75c2.473 17.93 4.636 31.68 5.355 36.155 17.846 7.732 41.202 10.51 62.938 8.283a34.084 34.084 0 0 1-.055-1.906v-143.11l-1.18-5.894zm84.36 0-1.18 5.895v143.11c0 .645-.02 1.28-.055 1.906 21.757 2.23 45.136-.556 62.99-8.305.75-4.39 3.04-18.03 5.626-35.853a106.87 106.87 0 0 1-10.05-10.03c-20.656-23.497-35.952-56.944-55.5-95.66l-1.266.633-.564-1.695zM233 332.854v11.363c5.93 4.487 14.373 7.086 23 7.086s17.07-2.6 23-7.086v-11.363c-7.23 3.03-15.153 4.45-23 4.45-7.847 0-15.77-1.42-23-4.45zm0 32v11.363c5.93 4.487 14.373 7.086 23 7.086s17.07-2.6 23-7.086v-11.363c-7.23 3.03-15.153 4.45-23 4.45-7.847 0-15.77-1.42-23-4.45zm0 32v63.45c0 20 46 20 46 0v-63.45c-7.23 3.03-15.153 4.45-23 4.45-7.847 0-15.77-1.42-23-4.45z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/elephant.svg b/static/_icons/_animals/elephant.svg
new file mode 100644
index 00000000..c1129955
--- /dev/null
+++ b/static/_icons/_animals/elephant.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M236.422 98.393c-126.642-1.276-206.07 46.77-212.058 83.93-2.977 41.18-4.165 83.628-4.016 124.617l4.31 3.796c3.963-15.315 6.47-31.843 14.122-44.085 1.3 27.18 5.068 58.562 11.369 82.067-2.477 24.988-2.118 47.99-3.436 72.978 21.158 12.726 60.485 10.65 67.541 1.986 2.936-20.695 4.981-42.58 3.973-68.535l7.592-35.355c6.418-14.587 25.29-17.243 23.406-31.799l17.828-2.467c.355 25.196-14.375 27.1-24.713 41.653 12.994 5.357 14.676 3.886 24.059 5.124 23.848 2.742 45.234 3.774 67.802-8.175l-3.101-17.541 17.723-3.135 3.064 17.328c4.22 14.097 11.996 104.392 18.559 108.361 13.411 6.417 53.823 6.417 55.472-5.312 1.647-45.786 3.861-90.1-5.07-133.242 3.702-4.1 7.34-8.112 10.928-12.096-20.178-10.157-44.214-25.838-57.62-41.797-9.037-17.21-13.75-38.688-17.304-56.256-2.546-12.943-4.3-26.074-3.81-37.486.244-5.706 1.003-11.018 2.982-15.938 19.848-20.186 56.606-35.68 79.58-46.503-33.273-7.269-71.55 7.386-99.182 17.882zm128.934-9.931c-29.757 10.977-72.215 22.174-92.633 45.267-.807 2.008-1.51 5.563-1.7 9.994-.38 8.863 1.097 21.093 3.487 33.243 2.39 12.15 5.644 24.32 8.53 33.642 1.442 4.662 2.797 8.624 3.865 11.44 15.216 22.215 45.646 39.625 67.966 44.959l14.495-28.713c-11.574-15.04-13.779-35.226-4.59-50.352 4.932-6.143 9.727-10.553 16.982-10.416 4.545.109 9.194 1.996 12.856 5.045 25.905 21.572 49.481 48.69 83.37 70.66-.136-6.626-.26-12.94-.243-18.761.026-9.03-18.924-97.759-50.614-139.553-22.918-5.83-40.343-9.14-61.771-6.455zm68.883 76.232c4.327-.07 8.421.563 11.857 2.319.061 4.922-.298 10.035-10.887 16.152-4.501-4.72-11.239-10.838-17.908-15.627 5.427-1.506 11.374-2.754 16.938-2.844zm-54.233 32.838c-2.263 3.593-3.912 11.657-2.703 17.531 1.402 6.812 9.062 16.901 21.55 26.47 12.49 9.567 29.242 18.77 46.753 26.087 15.609 6.522 31.748 11.435 46.058 14.19-49.78-25.118-79.482-61.19-108.566-85.409-1.548-1.595-2.387.034-3.092 1.131zm58.914 86.797c.526 23.427-2.416 50.265-17.086 59.894-11.128 7.306-33.235 1.34-38.41-10.925-3.657-8.667 15.567-15.677 13.408-24.832-1.718-7.287-11.033-14.374-18.375-12.912-17.881 3.558-34.905 28.836-29.3 46.185 10.14 31.387 62.177 51.105 91.875 36.75 27.49-13.288 35.058-46.714 36.808-81.19-12.704-3.13-25.983-7.579-38.92-12.97zm-200.681 52.52a129.415 129.415 0 0 1-9.993 4.34l-8.67 77.603c1.22 8.802 15.819 12.647 30.385 12.81zm-100.65 4.519c-1.341 10.733-2.367 21.785-3.073 30.953-1.545 20.225-2.483 41.562-2.496 51.49 18.869 11.927 54.798 4.533 53.105-2.005-.656-27.278-6.002-49.806-12.58-73.717-11.983-1.258-23.524-3.864-34.957-6.721z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/finch.svg b/static/_icons/_animals/finch.svg
new file mode 100644
index 00000000..4297e881
--- /dev/null
+++ b/static/_icons/_animals/finch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M382.9 28.65c-26.2 5.22-39 13.71-50.8 30.5-10.8 15.13-20.5 38.34-34.2 70.05 6.5-.2 13.2-.3 19.3-.2l-.4 19.4c-117.1-3-193.1 77-275.08 115.1C67.89 303 115.5 326.6 169 322.8c57.3-4.1 121.9-39.7 173.2-123.4l16.5 10c-54 87.8-124 127.9-188.4 132.6-21.1 1.6-41.6-.8-60.6-6.5-19.4 15-47.3 31.4-88.69 44.5 58.12 28 136.09-1.8 191.19-18.6 39.9 5.4 69.7 5.8 103.6 1-1.3-6.8-.4-14 1-22.6 3.8-21 13.6-48.4 27.6-74.4 14.2-26 32.2-50.4 54.5-63.8 15.3-7.6 27.7-12 42.6-8.8-7.1-12.9-14.1-22.1-23.3-31.6l9.2-42.5c-5.4-2.8-10.2-6.3-14.1-10.4-3.2-3.6-6-7.7-6.8-12.9-.8-5.14.8-11.27 4.6-15.44 5.4-5.92 11.9-11.58 17.9-17.07 5-4.62 9.5-9.17 12.2-12.58-10-14.66-29.4-22.31-46.5-22.61-4-.12-8.4.31-11.8.95zm-1.8 18.13c9.4 0 17 7.69 17 17.11 0 9.42-7.6 17.09-17 17.13-9.5 0-17.1-7.67-17.1-17.13 0-9.46 7.6-17.12 17.1-17.11zm72 19.3c-8.6 9.66-18.8 17.14-27.4 26.53 3.2 5.61 11.4 9.49 16.6 11.39L491 87.48zM408.7 217.9c-16.9 10.5-34.3 32.5-47.2 56.7-13.3 24.1-22.5 50.6-25.6 68.4-1.3 7.1-1.3 12.8-1.1 15.8 60.9-13.6 95.6-43.9 110.3-77.5 9.1-20.7 10.6-43.1 5.5-64.4-13.3-8.2-29.1-6.5-41.9 1zm-70.6 159.7c-6.1 1.4-12.5 2.7-19 3.6l10.8 46.1-24 42.4 8.7 6.2 20.9-24.4 13.5 30.6 9.1-2.6-3.7-33 31.8 8.6 2.5-8.1-40-23.8zm-99.1 7-4.5 44.2-38.3 28 2.7 6.4 33.3-11.4.8 32.5 8.7-1 9.8-30.5 28.5 20.8 4.9-7.3-31.1-36.7 4.5-44.1c-6.7-.1-13.1-.4-19.3-.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/fox.svg b/static/_icons/_animals/fox.svg
new file mode 100644
index 00000000..3678d5a4
--- /dev/null
+++ b/static/_icons/_animals/fox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m214.5 23.24-1 8.1c-14 61.5 21 88.66 21 88.66l11-13s-24-19.76-18-63.56c41 11.6 58 36.6 64 48.8-44 15.76-56 57.26-80 87.96l21-3.9-2 31.3s44-8.7 69 17.7c5-8.6 8-18.9 6-29.2l-3-28.2c-3-1.1-7-3-11-5.4-12-7.3-25-19.1-25-19.1-2-1.9-2-5.2-1-7.8 2-2.5 5-3.7 7-2.7 0 0 11 3.5 21 6.7 11 3.9 20 14.3 21 26.6 1 8.4 3 18.9 4 28.3 2 15.4-3 30.8-12 42.7l7 18.3h38l7-18.3c-9-11.9-14-27.3-12-42.7 1-9.4 3-19.9 4-28.3 1-12.3 10-22.7 21-26.6 10-3.2 21-6.7 21-6.7 2-1 5 .2 7 2.7 1 2.6 1 5.9-1 7.8 0 0-13 11.8-25 19.1-4 2.4-8 4.3-11 5.4l-3 28.2c-2 10.3 1 20.6 6 29.2 25-26.4 69-17.7 69-17.7l-2-31.3 21 3.9c-24-30.7-36-72.2-80-87.96 6-12.2 23-37.2 64-48.8 6 43.8-18 63.56-18 63.56l11 13s35-27.16 21-88.66l-1-8.1c-43.3 7.32-85.9 35.37-110 62.9-5.5-.13-10.5-.52-16 0-42.8-34.75-61.3-56.12-110-62.9zm24.7 205.26c38.2 53.2-87.7 46.6-153.61 119.5-26.11 28-32.53 56.3-25.95 80.3 12.23 44 71.86 73 144.06 55 49.8-13 96-32 134.8-40 35.1-8 63.8-5 82.3 24l15.3-5c-2.9-38-14.4-68.8-36.5-87.5-16.8-14.2-39.9-22-70.9-21.1-29.3.8-65.9 9.3-111.2 27.3-27 9.5-76.5 27.7-102.4 12.6-9.1-5.6-11.9-15-11.2-24.3 34.4 52 124.1-27 198.5-35.7 0 0 6.6-88.3-63.2-105.1zm188.6 0c-53.1 12.4-64.1 54.1-65.2 105.1 26.5-.2 49.9 23.7 49.9 23.7s-27-98.6 15.3-128.8zm-100.3 1.3h10c3 0 6 2.8 6 6.3 0 3.4-3 6.2-6 6.2h-10c-3 0-6-2.8-6-6.2 0-3.5 3-6.3 6-6.3zm61.4 157.7c13.7 11.6 22.2 28.8 26.8 49.8-15.8-12-35-16-57.1-14-24.1 2-51.9 10-82.3 20l26.1-25c-28.3 14-53.1 17-75.4 12l80.9-40.2-61.2 11.2c23.8-20.2 95.2-52.2 142.2-13.8z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/frog-prince.svg b/static/_icons/_animals/frog-prince.svg
new file mode 100644
index 00000000..3e2df727
--- /dev/null
+++ b/static/_icons/_animals/frog-prince.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M176 22v86c80 32 80 32 160 0V22l-48 48-32-48-32 48zm159.543 108.31c-4.742.195-9.564 1.488-14.205 4.167-38.934 22.48-89.77 21.953-127.79.002-6.09-3.516-12.284-4.611-18.144-3.893a46.38 46.38 0 0 1 9.438 28.09c0 23.15-17.037 42.83-39.176 45.096-12.775 14.92-21.554 31.806-24.387 49.982 44.73-23.79 90.948-35.572 137.065-35.508 46.15.064 92.197 11.986 136.56 35.62-2.69-18.15-11.217-35.044-23.795-49.92-.585.025-1.17.048-1.76.048-24.18 0-43.447-20.7-43.447-45.318a46.375 46.375 0 0 1 9.641-28.363zm-194.148 3.215-.002.002c-12.67 0-23.278 10.85-23.278 25.15 0 14.298 10.608 25.147 23.278 25.147 12.67 0 23.277-10.85 23.277-25.148s-10.607-25.15-23.276-25.15zm227.953 0v.002c-12.67 0-23.276 10.85-23.276 25.15 0 14.298 10.607 25.147 23.276 25.147 12.67 0 23.277-10.85 23.277-25.148s-10.608-25.15-23.277-25.15zm68.396 93.375c-9.361-.13-18.96 1.646-28.676 4.237 6.926 19.457 8.569 40.725 2.694 62.656-4.26 15.896.934 37.475 11.7 54.758l4.69 7.53-7.02 5.43c-19.764 15.28-36.439 25.107-46.103 35.264-9.664 10.158-13.888 19.59-10.916 40.875.484 12.745 6.068 17.054 13.668 24.97 19.876-14.55 36.01-23.888 68.344-4.095-6.738-18.804 15.937-29.76 46.719-29.779-36.91-15.88-64.98-25.62-86.438-30.377 67.492-72.188 97.182-127.96 66-159.187-10.985-8.794-22.626-12.114-34.662-12.282zm-364.074.118c-12.65.034-24.768 3.161-34.076 12.166-31.182 31.227-1.492 87 66 159.187-21.456 4.756-49.528 14.497-86.438 30.375 30.782.02 53.457 10.978 46.719 29.781 32.332-19.792 48.469-10.455 68.344 4.094 6.233-8.55 16.31-14.826 17.724-24.969 2.972-21.283-1.25-30.717-10.914-40.875-9.664-10.157-26.34-19.982-46.105-35.263l-7.02-5.428 4.692-7.53c10.73-17.227 15.857-39.232 11.699-54.76-5.782-21.571-4.184-42.44 2.537-61.56-10.425-2.871-22-5.249-33.162-5.218zm184.67 9.539c-46.096-.065-92.3 12.827-137.572 38.845a87.269 87.269 0 0 0 2.494 13.31v.003c5.453 20.354.592 42.93-9.485 62.297 15.89 11.634 30.344 20.524 41.479 32.228 10.36 10.89 16.795 25.133 16.955 43.713-1.096 16.308-9.158 39.273-22.348 59.244 24.59-14.237 42.135-15.333 45.291 3.492 14.097-17.783 25.698-20.386 38.985-8.035-3.745-31.452-11.117-52.887-17.258-65.097-14.896-36.567-42.816-61.484-73.742-83.424l11.359-16.014c38.788 27.517 76.799 62.664 89.125 119.567 9.628.705 19.25.65 28.85-.16 12.362-56.81 50.333-91.919 89.084-119.409l11.361 16.016c-31.19 22.127-59.334 47.28-74.13 84.363-6.046 12.357-13.14 33.493-16.794 64.158 13.29-12.35 24.891-9.747 38.988 8.036 3.153-18.825 20.697-17.73 45.288-3.493-13.51-20.455-21.645-44.058-22.42-60.424.415-18.01 6.809-31.872 16.949-42.533 11.135-11.705 25.586-20.595 41.474-32.23-10.064-19.29-14.99-41.737-9.48-62.303a88.607 88.607 0 0 0 2.51-13.266c-44.85-25.79-90.85-38.818-136.961-38.884z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/frog.svg b/static/_icons/_animals/frog.svg
new file mode 100644
index 00000000..a3141c5c
--- /dev/null
+++ b/static/_icons/_animals/frog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M335.7 88.94c-4.742.194-9.563 1.486-14.204 4.165-38.934 22.48-89.77 21.953-127.79.002-6.09-3.516-12.285-4.61-18.145-3.892a46.38 46.38 0 0 1 9.438 28.09c0 23.15-17.037 42.83-39.176 45.095-12.775 14.92-21.553 31.807-24.386 49.983 44.73-23.79 90.947-35.572 137.064-35.508 46.15.064 92.197 11.987 136.56 35.62-2.69-18.15-11.216-35.043-23.794-49.92-.585.026-1.17.048-1.76.048-24.18 0-43.447-20.7-43.447-45.318 0-10.64 3.6-20.543 9.64-28.364zm-194.15 3.216c-12.67 0-23.277 10.85-23.277 25.15 0 14.297 10.608 25.147 23.278 25.147 12.67 0 23.276-10.85 23.276-25.148s-10.606-25.15-23.275-25.15zm227.956 0c-12.67 0-23.277 10.85-23.277 25.15 0 14.297 10.607 25.147 23.276 25.147 12.67 0 23.277-10.85 23.277-25.148s-10.608-25.15-23.277-25.15zm67.572 93.367c-8.525.088-17.893 1.546-27.853 4.243 6.926 19.457 8.57 40.725 2.695 62.656-4.26 15.896.933 37.475 11.7 54.758l4.69 7.53-7.02 5.43c-19.765 15.28-36.44 25.107-46.104 35.264-9.664 10.158-13.887 19.59-10.915 40.875l1.525 10.91c3.596 4.7 7.678 9.43 12.142 14.06 19.876-14.55 36.01-23.887 68.344-4.094-6.738-18.804 15.938-29.762 46.72-29.78-36.91-15.88-64.98-25.62-86.438-30.376 67.492-72.188 97.182-127.96 66-159.188-8.172-8.183-19.356-12.034-33.28-12.28a80.764 80.764 0 0 0-2.204-.01zm-361.617.002a79.679 79.679 0 0 0-2.397.006c-13.925.248-25.14 4.1-33.313 12.282-31.182 31.227-1.492 87 66 159.188-21.456 4.756-49.528 14.497-86.438 30.375 30.782.02 53.458 10.977 46.72 29.78 32.332-19.792 48.468-10.454 68.343 4.095 6.713-6.962 12.572-14.146 17.188-21.12l.537-3.85c2.972-21.283-1.25-30.716-10.914-40.874-9.664-10.157-26.34-19.984-46.106-35.265l-7.02-5.427 4.692-7.53c10.73-17.228 15.858-39.233 11.7-54.76-5.782-21.572-4.185-42.44 2.536-61.56-11.336-3.388-21.954-5.216-31.527-5.338zm183.038 9.66c-46.096-.065-92.3 12.827-137.574 38.846a87.261 87.261 0 0 0 2.494 13.31v.002c5.453 20.354.593 42.93-9.484 62.297 15.89 11.634 30.343 20.526 41.478 32.23 10.36 10.89 16.795 25.132 16.955 43.712-1.096 16.308-9.157 39.273-22.347 59.244 24.59-14.237 42.134-15.333 45.29 3.492 14.097-17.783 25.698-20.386 38.985-8.035-3.745-31.452-11.117-52.887-17.258-65.097-14.896-36.567-42.816-61.484-73.742-83.424l11.36-16.014c38.788 27.517 76.798 62.663 89.124 119.566 9.628.705 19.25.65 28.85-.16 12.362-56.81 50.334-91.918 89.085-119.408l11.36 16.016c-31.19 22.127-59.333 47.28-74.13 84.363-6.045 12.357-13.14 33.493-16.793 64.158 13.29-12.35 24.89-9.748 38.987 8.035 3.153-18.825 20.697-17.73 45.288-3.492-13.51-20.455-21.645-44.058-22.42-60.424.415-18.01 6.81-31.872 16.95-42.533 11.135-11.705 25.586-20.595 41.474-32.23-10.064-19.29-14.99-41.736-9.48-62.302a88.613 88.613 0 0 0 2.51-13.266c-44.85-25.79-90.852-38.82-136.964-38.886z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/goose.svg b/static/_icons/_animals/goose.svg
new file mode 100644
index 00000000..e8d1b690
--- /dev/null
+++ b/static/_icons/_animals/goose.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M370.019 18.023c-2.843-.035-5.859.197-9.075.73-81.664 13.54-38.657 142.295-36.095 217.397-84.163-16.327-168.007 121.048-289.118 152.787 58.086 52.473 206.05 89.6 331.739 11.85 39.804-24.622 45.26-92.014 34.343-165.049-6.703-44.845-71.755-133.176-10.269-141.266l.611-.504c12.884-10.608 16.606-23.842 22.522-37.699l1.699-3.976c-11.688-16.016-23.17-33.986-46.357-34.27zm5.08 19.625a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9 9 9 0 0 1 9-9zm52.703 34.172c-3.28 8.167-7.411 17.45-14.612 26.293 21.035 7.63 41.929 3.078 63.079-.863-15.515-9.272-32.003-18.195-48.467-25.43zm-89.608 181.053c19.109 25.924 21.374 53.965 11.637 78.183-9.737 24.219-30.345 44.797-55.67 60.49-50.65 31.389-121.288 44.45-170.553 17.11l8.735-15.738c40.364 22.4 106.342 11.833 152.338-16.67 22.997-14.252 40.72-32.684 48.449-51.906 7.729-19.223 6.596-39.053-9.426-60.79l14.49-10.68zM273.28 456.322a332.68 332.68 0 0 1-19.095 3.232l-3.508 16.426h-13.084l3.508-14.842a400.208 400.208 0 0 1-18.852 1.506l-7.408 31.336h95.79v-18h-41.548l4.197-19.658z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/gorilla.svg b/static/_icons/_animals/gorilla.svg
new file mode 100644
index 00000000..51c8d450
--- /dev/null
+++ b/static/_icons/_animals/gorilla.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M426.353 45.894c-8.969.095-19.91 4.567-31.41 9.43-25.134 10.628-30.824 23.015-37.95 37.133 8.482 4.036 15.74 10.27 21.727 17.762 8.672 10.848 15.098 24.363 20.451 39.345 9.563 26.764 15.67 58.434 21.848 88.18l28.812 3.615s38.02-28.257 40.22-47.99c.65-5.84-9.27-14.992-9.27-14.992s5.937-6.614 4.83-11.323c-1.252-5.326-10.38-14.755-10.38-14.755s2.699-6.325.099-10.178c-3.468-5.14-18.98-8.572-18.98-8.572-1.734-1.69-1.576-8.596-.006-10.287 0 0 14.776-12.887 10.903-17.684-7.036-8.714-18.633-19.625-18.633-19.625-.26-30.99-9.153-40.198-22.261-40.059zm-102.4 58.86c-47.7.281-69.23 71.742-94.848 86.466-43.488 23.83-109.511-11.463-145.203 22.045-36.712 34.467-47.593 68.766-32.047 135.63L32.918 405.23c-7.483 37.268-14.09 30.759-9.463 60.877 38.011-.97 75.93-1.63 113.888 0l2.664-16.361-26.021-16.215c2.142-13.369 6.033-31.024 20.459-51.959 14.426-20.934 21.727-36.387 21.836-48.713l17.998.158c-.155 17.545-8.409 34.347-18.783 50.23 47.235 15.354 119.223 7.67 173.01-47-9.46-29.17-21.687-58.052-37.315-79.72l14.598-10.53c35.673 51.447 55.01 132.403 65.963 186.274-6.292 2.041-11.578 3.946-17.47 6.602.338 9.09 1.043 18.16 1.65 27.234 31.173-2.124 62.215-.722 93.612 0 17.246-68.035-10.26-117.857-38.76-187.59-20.847-73.492-18.395-161.324-74.122-172.496-4.437-.89-8.667-1.291-12.71-1.267zm10.12 249.748c-5.42 5.297-12.046 10.358-19.609 15.297-5.077 3.315-10.599 6.528-16.472 9.584L284.37 442.32l-10.905 4.906-1.091 18.881h65.113l-1.73-38.625 14.767-6.658c-4.007-18.973-9.748-42.998-16.451-66.322zm-186.929 42.72 15.645 68.885h92.91l-1.543-18.615-24.672-5.783-4.56-38.51c-26.065 3.93-53.18 3.051-77.78-5.977z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/heron.svg b/static/_icons/_animals/heron.svg
new file mode 100644
index 00000000..4e79f740
--- /dev/null
+++ b/static/_icons/_animals/heron.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M297.7 41.63c-38.7-.31-81.2 20.46-91.4 76.47 15.6-32.84 69.1-96.71 138.9-48.63l-13.3 4.54c-55-28.99-85 47.59-36.1 70.69 46.9 22.2 41.9 45.6-10.9 20.4 91.9 68.9-71.8 192.1-71.8 192.1 33.4-7.5 69.1-24.6 110.2-64.7l-8.8 25.9c73.7-36.7 69-123.3 69-123.3l6.9 34.1C431.9 115.1 277 122.6 308 83.57c52.6 30.63 124.1 24.03 124.1 24.03l-74-43.09c-12.3-13.81-35.6-22.68-60.4-22.88zM244.1 173.3c-65-.7-174.02 75.6-165.45 254.5 0 0 32.35-29.8 60.25-91.2l-11.6 56.7c204.1-136.6 183.9-219.3 116.8-220zm10.1 187.3c-5.5 2.6-11.1 4.9-16.8 7.1l-1.9 56.3h.2c4.5 18.8 10 38.1 12.1 58h15.3c-6.6-19.9-12-38.1-16.2-59 0 0 6.1-52.3 7.3-62.4zm-45.7 17c-5.4 1.7-10.6 3.1-15.6 4.4 4.3 33.4 7.8 69.1 7.8 100h14.1c-5.3-37-5.8-67.5-6.3-104.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/kangaroo.svg b/static/_icons/_animals/kangaroo.svg
new file mode 100644
index 00000000..9e135a7d
--- /dev/null
+++ b/static/_icons/_animals/kangaroo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M406.5 43.56c-2.8 0-5.3.53-7.2 1.56 2.7 19.56 4.6 24.05 20.1 34.39C398.5 118 412 129.5 305.1 116.2c-47.2-5.9-82.9 2.6-117.3 28.5-48.3 36.4-64.3 56.8-89.6 123.5-18.05 47.6.1 145.4-68.07 110.8-6.44-2.2-13.28-2.6-7.86 6.6 9.53 14.7 27.36 25.1 49.94 16 35.39-14.4 32.49-62.8 58.49-121.2 9-20.5 29.5-69.3 48.8-46.7 6.6 7.8 13.8 23.8 10.1 31.4-15.9 33.3-25.4 56.6-50.3 75.7 3.7 42.2 2.3 87.8-20.4 120.7l8.8 6.9c13.2-9.3 28.2-19 32.5-32.5 1-19.5 3.9-22 2.3-63.2 17.4-17.4 35.3-31.5 50.8-60.9 28.8-8.3 46.3-31.7 70.6-54.3 4.4-4.1 8.1-8.3 11.7-12.3 8-15.8 3.2-34.7-2.8-52.8 16 8.5 22.9 22.8 24.4 36.1 12.8-.6 23.5-1.9 34.6-5.3-3.5-18.7 2.9-31 18.3-43.9-9.1 24-12.2 30.4-4.8 39.3.1-.1.3-.2.4-.2 4.8 9.7 4.7 19.1 4.9 29.4-5.2 7.1-12.9 5.2-20 5.3l-15.4 19.5c13.3-1.7 51.6-9.4 51.8-15.4.8-16.6 4.4-34.4-1-49.8 10.3-7.6 19.7-18.6 27.5-29.4 11-15.4 14.4-28.3 26.7-49.9 2.6-4.6 32.5 7.5 38 5.8 8.7-2.7 14.3-6.4 13.4-15.8-.2-2.6-13.7-11.1-20.9-16.5 0 0 1.2-9.6-1.5-13.27-4.2-5.75-19.8-9.42-19.8-9.42-2.9-21.6-27.7-35.48-42.9-35.35zm52.4 47.7c2.9 0 5.2 2.26 5.2 5 0 2.78-2.3 4.94-5.2 4.94-2.9 0-5.2-2.16-5.2-4.94 0-2.74 2.3-4.98 5.2-5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/mammoth.svg b/static/_icons/_animals/mammoth.svg
new file mode 100644
index 00000000..438012cb
--- /dev/null
+++ b/static/_icons/_animals/mammoth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M337.2 56.85c2.6 4.01 5 10.08 9.6 14.39-6 14.4-22.9 25.94-42.7 25.66l16.1 15.6 25.9-14.9 20.3 17 19.4-9.5 19.6 7.5L419.6 98c-20.7-7-20.6-23.84-28.8-36.5-1.6-2.43-5.2-3.51-9.8-3.59-7.6-.14-18 2.48-26.1 6.27-7-2.17-10.1-5.32-17.7-7.33zM299.8 112c-23.3 14.8-47.7 29.3-74 28.8-16.4-7.3-39.8-12.2-66.8-15.9 3.5 5.1 4.6 10.5 4.4 16.2-1.3.1-2.6.1-3.9.2-11.5-3.3-27-4.9-50.4-2.9 6.3 1.9 11.8 4 15.4 6.8-34.78 6.1-72.74 15-87.27 47.8-4.11 9.3-6.83 18.8-8.6 28.4l-9.09 25.7 6.61-4.5c-.98 16.6 0 33.6.86 50.6l-6.43 35 7.44-11.9c.24 8.8.23 17.6-.33 26.3l21.74-56.2 11.13 71.5c1.66 11.9-3.98 22.2-7.88 33.2l7.69-.6-.1 10.5-10.02 30.7 9.86-4.7-.12 22.6c18.75 13.3 39.44 10.7 61.01.7l7.3-100.7c4.9-10.8 11.1-21.3 16.5-30.4 5.8-10 10.6-19.8 11.4-25.1l17.8 2.8c-3.4 13.9-9.6 24.8-16.1 35.5 23.5-1.2 44.8-5.7 64.1-13.9-.8-6.9-3.2-15.1-3.6-21l18-1.2c1.1 6.7 3.1 18.5 4.5 26 2.7 15.2 6.3 35.1 9.9 54.8 6.6 36.7 12.8 70.2 13.7 75.1 21 8.4 45.2 6.2 60.1 1.9l-2.9-55.5 7.2 3.6-7.9-15.9-.2-3.6 8.1 6-9.8-38.6-.2-3.9 9 2.2-10.7-35.7-1.1-20.5c12.9-4.1 25.1-8.3 37-12.8-2.3-2.5-4.6-5.1-6.8-7.9-9.3-11.3-14.4-26.5-12.3-40.6 1.1-7.1 4.1-15.4 11.5-18.5 9.1-3.8 24.1-7.4 30.4 1.7 22.6 31.9 40.5 45.2 51.4 47.8 5.5 1.3 9.3.6 13.3-1.7 14.3-10.4 14.5-15.1 14-32.2-7.2-18.7-12.9-37.7-18.6-56.7l14.3 2.9c-7.5-9-16.3-14.5-22-27.9-2.5-7.8-5.1-15.6-7.9-23.4l-6 12.5-27.8-10.7-22.8 11.3-19.7-16.5-31.5 18.2zm82.5 58.8 26.8 15.4c-3.4 3.8-6.6 7.9-15.3 6-9.3-2.1-12-13-11.5-21.4zm107.1 16c-3.4 24-9.8 51-21.7 70.3-4.8 7.8-10.6 14.4-18.2 18.7-7.5 4.4-16.9 5.9-26.3 3.6-18.4-4.3-37.1-20.6-59.8-52-6.5-1.5-10.8.9-11.6 6.2-1 6.9 2.6 19.4 8.4 26.5h.1c20.9 25.7 41.6 36.7 59.7 38.6 18.1 1.9 34.4-5.1 47.3-18.4 20-20.5 30.9-56 22.1-93.5zm-39.9 126c-9.8 3.5-20.4 4.9-31.4 3.8-2.5-.3-5.1-.7-7.6-1.2-1.5 17-5.5 33.2-14.4 42.3-11.1 11.4-47.3 6.7-47.3 6.7-10.9-2.5-11.4 52.2 12.5 43.3 0 0 51.2-14.6 66.3-33.5 3.8-4.8 7.2-10.7 10-17.3l3.2 10.3.7-20.6c.9-2.8 1.8-5.8 2.6-8.7l7 9.2zm-224.3 23.5-6.6 1.8-1 113.4c9.8 5.5 19.1 3.6 28.2-.7-1.7-9.8-6.8-37.4-12.7-70.5-2.8-15.5-5.5-30.5-7.9-44zm-36.7 9.1c-13 .9-44.9 6.6-46.3 10.1l-1.8 95.3c18.2 10.1 35.7 5.3 53.2.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/sand-snake.svg b/static/_icons/_animals/sand-snake.svg
new file mode 100644
index 00000000..dd157870
--- /dev/null
+++ b/static/_icons/_animals/sand-snake.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M31.7 83.93C9.492 194.9 191.1 121 195.3 136.6c2.4 8.9-156.4 35.9-163.56 95.4-16.49 137 321.16.7 323.76 8.9 5.5 17.8-218.6 46.4-149.8 157.7 39.7 64.2 114.8 32 164.1 33.4 26.3 42.4 66.5 60.5 96 48 27.7-11.7 14.8-45.6 1.5-76.5l-14.2 15.7 7.7-28.7c-40.3-63.2-182.5-6.2-188.3-19.9-10.2-24.1 216.2-41.5 180.2-158.7-29-94.2-332.7 21.2-332.9 6.1-.2-20.9 188.1-50.4 167.4-94.9-34.3-73.82-210.22 40.8-224.95-33.59C57 63.05 140.3 42.6 132.3 35.24 106.4 11.35 37.92 52.9 31.7 83.93zM387.8 390.8l35.9 33.6-43.5-12.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/seagull.svg b/static/_icons/_animals/seagull.svg
new file mode 100644
index 00000000..ab9e41c1
--- /dev/null
+++ b/static/_icons/_animals/seagull.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M377 67.5c-29.1.42-59.1 23.22-68.2 91.7-1.7 12.6-8.4 24.8-18.2 36.5 7.1-3 14.1-4.8 21-4.8 5 0 9.8.9 14.5 2.9 19.1 8.4 30.9 19.7 36.4 32.5s4.3 26.1.7 37.6c-3.6 11.4-9.6 21.4-15.1 28.9-5.4 7.6-9.6 12.1-12.2 14.4-33.6 30.6-94.9 37.4-148.2 38.7-43.3 1.7-86.3-3-129.12-8.2 0 0-31.13 10-41.99 14.5 51.99 15.9 96.11 11 139.61 4.3 52 17.3 165.8 31.6 241.1-37.2 37.6-30.9 36.2-86.1 17.5-152.2l25.9-53C438 91.95 408 67.04 377 67.5zm24.9 33c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm57.6 14.6L442.7 145c6.2-.1 12.3-.4 16.9-1.1 13.7-3 22-8.5 35.8-8.3-6.7-11.4-19.1-17.8-35.9-20.5zm-148.6 93.6c-4.5.2-9.8 1.7-16.5 5-11.2 5.4-25.3 15.4-42.9 28.3-30.5 22.4-71.6 53.3-129.6 84.3 17.4 1.1 40.4 2.1 65.4 1.6 51.8-1.2 110.5-10.4 136.5-34.1h.1c-.1.1 4.9-5 9.6-11.5 4.7-6.5 9.8-15.1 12.5-23.8 2.8-8.8 3.3-17.3 0-25.1-3.4-7.9-10.8-16-27.1-23-1.6-.8-3.3-1.2-5-1.5-1-.1-2-.2-3-.2zm-2 173c-6.1 1.5-12.1 2.7-18 3.6v38.1c-5.8-.1-11.8 0-18 .5v-36.8c-6.1.4-12.1.5-18 .4V426c-4.3.7-8.6 1.5-13 2.5v16h104c-8-10.1-21-16.4-37-19.2z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/spider.svg b/static/_icons/_animals/spider.svg
new file mode 100644
index 00000000..61f8c527
--- /dev/null
+++ b/static/_icons/_animals/spider.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.9 20.45c-54.1 0-98 93.45-98 146.85 0 31 14.9 58.6 37.9 76.3 5.9-6.9 12.2-12.9 19-17.7 13.7-7.9 27.8-13.9 41.1-14.1 14.4 0 28.4 5 41.2 14.1 6.7 4.8 13.1 10.8 19 17.7 23-17.7 37.8-45.3 37.8-76.3 0-53.4-43.9-146.85-98-146.85zm236.9 14.27L419.3 208.1 329.2 262c3.2 5.2 6 10.6 8.6 16.2l96.1-57.4 58.9-139.03V34.72zm-473.72 0v47.05L78.01 220.8 174.1 278c2.6-5.6 5.5-11 8.6-16.2l-90.13-53.7zM255.9 227.8c-10.7 0-21.3 3.6-31.8 11.1-10.8 8.9-19.9 19-26.1 28.6-14.9 23.5-24 54.4-24 81.5 0 26.6 8.4 47.2 24 61 14 12.4 33.8 19.3 57.9 19.3s43.9-6.9 58-19.3c15.5-13.8 24-34.4 24-61 0-27.1-9.1-58-24.1-81.5-7.8-12.3-16.6-21.9-26-28.6-10.5-6.2-21.5-10.9-31.9-11.1zM19.08 238.5v23.4l64.42 51.2 76.6 10.6c1-6 2.3-12 3.9-18l-73-10.1-71.92-57.1zm473.72 0-71.9 57.1-73.1 10.2c1.7 5.9 3 11.9 4 18l76.6-10.7 64.4-51.2v-23.4zM353.7 355.1c-.3 6.4-1 12.5-2.2 18.3l69 15.1 72.3 58.1v-23.5l-64.1-51.6c-25-5.5-50-10.9-75-16.4zm-195.6.1-74.92 16.3-64.11 51.6v23.5l72.24-58.1 69.09-15c-1.1-6.4-2-12.8-2.3-18.3zm44.4 6.6c5.6 0 10.1 4.5 10.1 10.1 0 5.5-4.5 10-10.1 10s-10.1-4.5-10.1-10c0-5.6 4.5-10.1 10.1-10.1zm107.1 0c5.6 0 10.1 4.5 10.1 10.1 0 5.5-4.5 10-10.1 10s-10.1-4.5-10.1-10c0-5.6 4.5-10.1 10.1-10.1zm-74.8 11.3c9.3 0 16.9 7.6 16.9 16.8 0 9.3-7.6 16.9-16.9 16.9-9.4 0-16.9-7.6-16.9-16.9 0-9.2 7.5-16.8 16.9-16.8zm42.5 0c9.4 0 16.9 7.6 16.9 16.8 0 9.3-7.5 16.9-16.9 16.9-9.3 0-16.9-7.6-16.9-16.9 0-9.2 7.6-16.8 16.9-16.8zm64.4 27.3c-3 5.4-6.6 10.5-10.7 15.1l51.1 27.1 27.5 51h20.9L395.6 429c-18-9.5-35.9-19.1-53.9-28.6zm-171.5.1-54 28.5-34.82 64.7h20.82l27.5-51.1 51.2-27c-4.1-5-8-10.3-10.7-15.1zm30.2 25.3c-4.4.1-9.5 2.3-14.9 7.7-3.8 7.8-5.9 16.5-5.9 25.7 0 16.5 6.8 31.4 17.8 42.5v-4c0-20.8 7.7-39.3 19.6-50.8 0-10.8-6.7-21.2-16.5-21.1zm111.1 0c-9.8-.1-16.6 10.3-16.6 21.1 11.9 11.5 19.6 30 19.6 50.8v4c11-11.1 17.8-26 17.8-42.5 0-9.2-2.1-17.9-5.9-25.7-5.4-5.4-10.5-7.6-14.9-7.7zm-70.3 14.1c-1.6.1-3.4.9-5.3 2.8-1.4 2.8-2.1 5.9-2.1 9.2 0 5.9 2.4 11.3 6.4 15.3-.1-.5-.1-1-.1-1.5 0-7.4 2.8-14.1 7.1-18.2-.9-3.9-2.7-7.5-6-7.6zm29.7 0c-3.6 0-6 3.7-6 7.6 4.3 4.1 7.1 10.8 7.1 18.2 0 .5 0 1-.1 1.5 4-4 6.4-9.4 6.4-15.3 0-3.3-.7-6.4-2.1-9.2-1.6-1.3-3.5-2.7-5.3-2.8z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/spiderling.svg b/static/_icons/_animals/spiderling.svg
new file mode 100644
index 00000000..dc2f5874
--- /dev/null
+++ b/static/_icons/_animals/spiderling.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M370.06 77.686c-10.644.085-21.42 1.936-31.816 5.86-14.63 5.53-17.103 17.274-12.506 23.895 14.11 29.535 18.452 62.364 3.78 90.1-17.168-25.923-43.89-42.415-73.518-42.415-29.626 0-56.347 16.496-73.516 42.42-14.672-27.734-10.335-60.56 3.772-90.09 4.606-6.62 2.138-18.37-12.5-23.894-41.58-15.69-89.25 1.756-110.16 32.82 30.66-8.7 66.99-27.915 103.05-7.155.675.39 1.342.735 1.997 1.045-13.33 33.103-15.584 70.885 5.423 102.39-3.543 7.674-6.336 15.914-8.263 24.588-26.844-17.095-39.352-48.493-41.52-81.71l-.17.01c-.018-8.626-13.526-18.352-30.46-12.02C52.03 159.1 27.61 203.606 32.32 240.76c17.003-26.187 38.658-65.485 77.91-74.688 4.368 35.197 20.396 69.337 53.086 87.086a132.4 132.4 0 0 0-.572 12.246c0 2.983.097 5.85.283 8.614-25.055-5.735-46.175-23.645-61.806-46.41-.038-.06-.084-.12-.124-.18-.353-.516-.72-1.02-1.067-1.54l-.08.05c-5.773-6.48-18.946-7.902-28.93 4.216-28.26 34.29-25.08 73.666-13.86 107.116 1.65-31.567 8.098-64.37 38.725-91.67 17.705 22.113 41.41 39.493 69.43 44.134 2.336 9.984 6.2 18.202 11.322 25.02-21.07 2.364-43.31-3.103-63.85-13.248l-.03.064c-7.296-3.463-17.49.828-19.402 16.125-5.475 43.83 14.19 87.256 39.99 101.73-13.334-23.954-23.805-58.905-13.8-98.31.023-.09.035-.177.057-.267 22.498 8.685 47.02 12.214 70.2 6.79 4.84 3.53 10.313 6.46 16.288 8.858-9.288 2.466-18.875 12.258-19.66 26.29-1.815 32.91 28.185 46.034 51.105 39.704-18.345-8.55-27.09-37.8-13.695-52.14-.348-3.926-1.426-6.985-3.006-9.262C231.57 343.6 243.418 344.8 256 344.8c13.92 0 26.943-1.463 38.55-4.556-1.927 2.343-3.25 5.674-3.646 10.106 13.395 14.34 4.652 43.59-13.693 52.14 22.92 6.33 52.92-6.795 51.104-39.705-.827-14.944-11.646-25.085-21.457-26.68 5.61-2.327 10.77-5.13 15.358-8.474 23.173 5.414 47.688 1.882 70.18-6.802.023.097.035.19.06.287 9.99 39.405-.466 74.34-13.8 98.31 25.8-14.46 45.465-57.885 39.99-101.73-1.912-15.3-12.11-19.59-19.405-16.123l-.04-.082c-20.533 10.14-42.762 15.61-63.825 13.252 5.114-6.814 8.976-15.025 11.31-25.002 28.02-4.637 51.726-22.026 69.43-44.14 30.627 27.3 37.074 60.104 38.725 91.656 11.22-33.45 14.4-72.81-13.86-107.115-9.984-12.11-23.157-10.683-28.93-4.2l-.08-.053c-.347.52-.713 1.025-1.066 1.54-.04.062-.086.12-.125.182-15.633 22.765-36.754 40.682-61.81 46.413.188-2.765.286-5.634.286-8.62 0-4.146-.2-8.233-.572-12.253 32.683-17.75 48.722-51.882 53.08-87.09 39.246 9.22 60.9 48.513 77.9 74.684 4.71-37.155-19.71-81.658-61.334-97.228-16.928-6.326-30.434 3.41-30.447 12.035l-.182-.01c-2.153 33.22-14.666 64.602-41.503 81.698-1.926-8.672-4.72-16.91-8.26-24.582 21.006-31.508 18.75-69.293 5.417-102.398.656-.31 1.324-.656 2-1.047 36.06-20.76 72.405-1.53 103.05 7.155-15.682-23.3-46.416-38.936-78.345-38.68zM210.58 244.42c19.455 0 35.22 15.766 35.22 35.22 0 19.44-15.765 35.22-35.22 35.22-19.44 0-35.22-15.764-35.22-35.22 0-19.44 15.765-35.22 35.22-35.22zm90.84 0c19.44 0 35.22 15.766 35.22 35.22 0 19.44-15.765 35.22-35.22 35.22-19.44 0-35.22-15.764-35.22-35.22 0-19.44 15.765-35.22 35.22-35.22zm-97.006 8.97c-9.72 0-17.61 7.89-17.61 17.61 0 9.72 7.89 17.61 17.61 17.61 9.72 0 17.61-7.89 17.61-17.61 0-9.72-7.89-17.61-17.61-17.61zm90.842 0c-9.72 0-17.61 7.89-17.61 17.61 0 9.72 7.89 17.61 17.61 17.61 9.72 0 17.61-7.89 17.61-17.61 0-9.72-7.89-17.61-17.61-17.61zm-69.182 35.43c-4.86 0-8.804 3.945-8.804 8.805 0 4.86 3.944 8.805 8.804 8.805s8.807-3.945 8.807-8.805c0-4.86-3.946-8.805-8.806-8.805zm90.84 0c-4.86 0-8.805 3.945-8.805 8.805 0 4.86 3.944 8.805 8.804 8.805s8.807-3.945 8.807-8.805c0-4.86-3.946-8.805-8.806-8.805z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/tiger-head.svg b/static/_icons/_animals/tiger-head.svg
new file mode 100644
index 00000000..4a9ba636
--- /dev/null
+++ b/static/_icons/_animals/tiger-head.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M425.479 25.666c.695.03 1.233.235 1.6.637 28.156 30.856 23.75 58.537 18.36 87.437-2.37 4.836-4.483 8.801-6.79 12.07-5.074 7.188-11.345 12.477-26.674 20.141l8.05 16.098c16.671-8.336 26.4-16.047 33.327-25.86a76.374 76.374 0 0 0 1.99-2.98c23.481 29.638 37.639 65.615 40.162 105.69-10.473-11.076-20.322-14.383-32.865-16.864-3.655-17.373-11.07-34.942-23.44-51.433l-14.398 10.796c22.344 29.793 25.952 62.948 20.375 90.836-5.578 27.889-21.494 49.864-33.201 55.717-17.61 8.805-30.338 21.686-40.338 31.686-5 5-9.353 9.287-12.854 11.965-.175.133-.333.24-.502.365-.852-4.857-2.097-9.886-3.67-15.076-5.313-17.534-14.622-37.068-26.894-57.522l-15.434 9.262c11.728 19.546 20.419 38.012 25.106 53.478 4.687 15.467 4.988 27.718 2.256 34.55-2.733 6.83-7.22 10.423-19.944 10.847-11.082.37-27.763-2.992-49.941-11.604C317.866 378.86 305.89 348.962 304 320c-16 32-32 32-48 32s-32 0-48-32c-1.89 28.962-13.866 58.859 34.24 75.902-22.178 8.612-38.86 11.973-49.941 11.604-12.724-.424-17.211-4.017-19.944-10.848-2.732-6.83-2.43-19.082 2.256-34.549 4.687-15.466 13.378-33.932 25.106-53.478l-15.434-9.262c-12.272 20.454-21.581 39.988-26.894 57.522-1.573 5.19-2.818 10.22-3.67 15.076-.169-.124-.327-.232-.502-.365-3.501-2.678-7.854-6.965-12.854-11.965-10-10-22.728-22.88-40.338-31.686-11.707-5.853-27.623-27.828-33.2-55.717-5.578-27.888-1.97-61.043 20.374-90.836l-14.398-10.796c-12.37 16.491-19.785 34.06-23.44 51.433-12.543 2.48-22.392 5.788-32.865 16.863 2.523-40.074 16.68-76.05 40.162-105.689a76.374 76.374 0 0 0 1.99 2.98c6.927 9.813 16.656 17.524 33.327 25.86l8.05-16.098c-15.329-7.664-21.6-12.953-26.673-20.14-2.308-3.27-4.42-7.235-6.791-12.07-5.39-28.9-9.796-56.582 18.36-87.438.367-.402.905-.607 1.6-.637 9.097-.394 45.217 28.95 79.051 35.594 19.651-6.115 40.847-10.22 63.332-12.094l4.448 15.568c-13.92 1.875-28.343 5.444-44.198 10.729l5.692 17.074c16.147-5.382 30.123-8.91 43.425-10.584l4.463 15.62c-6.012.517-11.858 1.388-17.295 2.667-9.38 2.207-17.681 5.276-23.802 11.397l12.726 12.726c1.88-1.879 7.578-4.81 15.198-6.603 5.387-1.268 11.681-2.114 18.226-2.506L256 144l8.213-28.746c6.545.392 12.839 1.238 18.226 2.506 7.62 1.793 13.319 4.724 15.198 6.603l12.726-12.726c-6.12-6.121-14.422-9.19-23.802-11.397-5.437-1.279-11.283-2.15-17.295-2.668l4.463-15.619c13.302 1.673 27.278 5.202 43.425 10.584l5.692-17.074c-15.855-5.285-30.278-8.854-44.198-10.729l4.448-15.568c22.485 1.873 43.68 5.98 63.332 12.094 33.834-6.643 69.954-35.988 79.05-35.594zm-92.82 109.979c-40 16-59.059 23.357-76.659 23.357-17.6 0-36.658-7.357-76.658-23.357l-6.684 16.71c40 16 60.942 24.643 83.342 24.643s43.342-8.643 83.342-24.643zm43.292 4.33c-14.39 28.78-43.976 43.976-75.976 59.976l7.588 15.172c-4.818 6.521-8.924 14.296-11.934 23.482 0 0-7.629 33.395-8.506 47.916l17.754 2.958C304 272 304 256 312.527 244.664c5.173 7.024 13.406 11.635 22.694 11.635 15.685 0 28.367-13.15 28.367-28.863 0-9.105-4.264-17.342-10.897-22.666 12.317-3.675 24.332-3.772 31.309-3.772v-17.996c-4.717 0-12.708-.032-22.129 1.363 12.116-9.681 22.675-21.335 30.178-36.34zm-239.902 0-16.098 8.05c7.503 15.005 18.062 26.659 30.178 36.34-9.421-1.395-17.412-1.363-22.129-1.363v17.996c6.977 0 18.992.097 31.309 3.772-6.633 5.324-10.897 13.561-10.897 22.666 0 15.712 12.682 28.863 28.367 28.863 9.288 0 17.521-4.611 22.694-11.635C208 256 208 272 207.123 289.48l17.754-2.958c-.877-14.521-8.506-47.916-8.506-47.916-3.01-9.186-7.116-16.96-11.934-23.482l7.588-15.172c-32-16-61.586-31.196-75.976-59.976zm272.488 49.18-17.074 5.69c3.336 10.009 2.55 18.53-.664 27.313-3.214 8.784-9.13 17.608-15.903 26.317-6.773 8.708-14.338 17.246-20.529 26.129-6.19 8.882-11.365 18.396-11.365 29.396h17.996c0-5 2.826-11.486 8.135-19.104 5.309-7.617 12.744-16.08 19.97-25.37 7.227-9.292 14.312-19.468 18.598-31.184 4.287-11.716 5.5-25.196.836-39.188zm-305.074 0c-4.664 13.991-3.45 27.47.836 39.187 4.286 11.716 11.37 21.892 18.597 31.183 7.227 9.292 14.662 17.754 19.971 25.371 5.31 7.618 8.135 14.104 8.135 19.104h17.996c0-11-5.174-20.514-11.365-29.396-6.191-8.883-13.756-17.42-20.53-26.13-6.773-8.708-12.688-17.532-15.902-26.316-3.213-8.784-4-17.304-.664-27.312zm231.758 27.413c5.708 0 10.369 4.638 10.369 10.868 0 6.229-4.66 10.865-10.37 10.865-5.708 0-10.368-4.636-10.368-10.865 0-6.23 4.66-10.868 10.369-10.868zm-158.442 0c5.709 0 10.37 4.638 10.37 10.868 0 6.229-4.661 10.865-10.37 10.865-5.708 0-10.369-4.636-10.369-10.865 0-6.23 4.66-10.868 10.37-10.868zm287.065 12.034C499.508 289.222 495.39 352.61 480 368c-9.787-15.381-20.124-27.816-32-32 9.426 36.059 0 64-16 80 0-16-3.432-23.686-16-32 3.293 39.931-18.232 56.793-32 64-6.028-11.65-17.48-24.433-33.275-35.494a31.768 31.768 0 0 0 5.63-9.164c1.46-3.648 2.367-7.5 2.829-11.526 3.896-1.288 7.36-3.491 10.533-5.918 4.999-3.822 9.646-8.535 14.646-13.535 10-10 21.272-21.12 35.662-28.314 20.293-10.147 36.377-36.172 42.8-68.283 2.935-14.677 3.599-30.76 1.019-47.164zm-415.688 0c-2.58 16.403-1.916 32.487 1.02 47.164 6.422 32.111 22.506 58.136 42.799 68.283 14.39 7.195 25.662 18.314 35.662 28.314 5 5 9.647 9.713 14.646 13.535 3.173 2.427 6.637 4.63 10.533 5.918.462 4.027 1.37 7.878 2.829 11.526a31.768 31.768 0 0 0 5.63 9.164C145.48 423.566 134.028 436.35 128 448c-13.768-7.207-35.293-24.069-32-64-12.568 8.314-16 16-16 32-16-16-25.426-43.941-16-80-11.876 4.184-22.213 16.619-32 32-15.39-15.39-19.508-78.778 16.156-139.398zM424.998 256h-17.996c0 11.5-10.11 26.464-21.834 40.143-5.862 6.839-11.89 13.345-16.754 19.56-4.864 6.215-9.412 11.798-9.412 20.297h17.996c0 .5 1.452-3.918 5.588-9.203 4.136-5.285 10.108-11.779 16.246-18.94 12.276-14.321 26.166-31.358 26.166-51.857zm-320 0H87.002c0 20.5 13.89 37.536 26.166 51.857 6.138 7.161 12.11 13.655 16.246 18.94 4.136 5.285 5.588 9.702 5.588 9.203h17.996c0-8.5-4.548-14.082-9.412-20.297-4.864-6.215-10.892-12.721-16.754-19.56-11.724-13.679-21.834-28.642-21.834-40.143zm201.725 168.805c4.823.6 9.34.83 13.576.69a53.604 53.604 0 0 0 5.383-.466c-2.526 8.899-6.629 17.366-12.768 24.733C301.151 463.877 282 472.998 256 472.998s-45.151-9.12-56.914-23.236c-6.14-7.367-10.242-15.834-12.768-24.733 1.752.236 3.54.404 5.383.465 4.236.141 8.753-.088 13.576-.69 1.86 4.965 4.373 9.518 7.637 13.434 8.237 9.885 21.086 16.764 43.086 16.764s34.849-6.88 43.086-16.764c3.264-3.916 5.776-8.47 7.637-13.433z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_animals/wasp-sting.svg b/static/_icons/_animals/wasp-sting.svg
new file mode 100644
index 00000000..1a06430f
--- /dev/null
+++ b/static/_icons/_animals/wasp-sting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M235.75 42.28c-.68.006-1.353.01-2.03.032-3.1.11-6.195.404-9.25.907-20.682 3.4-40.108 14.714-55.376 30.28-18.356-6.394-37.205-10.75-56.656-12.563a77.545 77.545 0 0 0-6.844-.343 76.312 76.312 0 0 0-2.25.03c-20.82.524-38.94 9.602-52.53 23.063-15.533 15.385-25.624 36.27-29.658 57.907-4.033 21.638-2.052 44.237 8.125 62.906 10.178 18.67 29.117 32.835 55.532 36.094 36.828 4.544 70.415 5.794 103.72 4.594l.437.406.374-.438c27.815-1.036 55.45-3.77 84.625-7.78-.814 7.602.168 14.882 3.155 21.31 23.12 15.608 47.78 19.41 76.72 11.22a98.46 98.46 0 0 0 10.75-6.687c10.992-7.885 19.667-17.44 25.592-27.47-10.102-20.476-13.347-41.67-9.656-62.53-6.924-3.75-15.252-5.577-24.28-5.47-.715.008-1.433.06-2.156.094-16.59-32.33-35.69-63.26-60.063-95.563-15.846-21-37.24-30.144-58.28-30zm2.188 18.532c14.892.16 28.934 6.522 41.156 22.72 22.482 29.797 40.225 58.18 55.75 87.812a88.198 88.198 0 0 0-8.313 3.062c-44.5-38.158-89.732-72.463-138.124-93.344 11.76-10.097 25.604-17.187 39.094-19.406 3.515-.578 7-.88 10.438-.843zm165 17.563-6.625 17.47c30.865 11.68 52.434 36.81 64.5 67.25-27.754-32.927-66.408-55.983-109.563-56.19l-.094 18.72c27.147.13 52.99 11.29 74.688 29.125-10.274 5.33-19.327 12.764-27.094 22.438-3.192 18.115.078 35.896 10.406 54.562 21.263 21.66 46.337 33.562 76.25 33.094 6.106-18.483 7.41-34.1 5.344-47.656-2.258-58.64-30.98-117.305-87.813-138.813zm-291.782 1.188c69.776 6.655 133.8 50.255 197.97 104.593-.27.19-.545.37-.813.563a98.877 98.877 0 0 0-3.657 2.78l-191.03-67.22-2.47-40.718zM92.5 80.656l5.563 91.156-59.094-23.343c.17-1.15.348-2.292.56-3.44 3.39-18.177 12.1-35.84 24.44-48.06 8.12-8.044 17.597-13.812 28.53-16.314zm22.375 59.844 109.656 38.594-43.624 47.656c-8.55.216-17.118.268-25.78.125l-37.657-43.938-2.595-42.437zm-76.72 27.75 63.657 25.125 27.907 32.563c-13.784-.8-27.915-2.095-42.595-3.907-21.254-2.62-33.857-12.56-41.438-26.468-4.322-7.93-6.81-17.322-7.53-27.312zm397.5 4.813c.374-.02.75 0 1.126 0 12.082 0 21.876 9.794 21.876 21.875 0 12.082-9.794 21.875-21.875 21.875-12.08 0-21.874-9.795-21.874-21.875 0-11.703 9.193-21.29 20.75-21.875zM242.782 185.53l47.032 16.532c-4.065 5.014-7.425 10.27-10 15.594-25.21 3.637-48.96 6.376-72.468 7.906l36.094-39.437-.657-.594zm19 85.157c-22.023 3.702-40.202 14.834-53.28 30.063 13.942 16.114 30.9 26.48 51.47 31.78 24.453 6.303 54.333 5.188 89.624-3.905-1.118-13.518-6.158-25.815-20.72-36.125-24.175.564-46.892-6.817-67.093-21.813zM197.595 316.5c-9.088 16.403-13.382 35.462-11.844 54.5 31.95 24.294 61.132 35.617 87.625 35.156 25.832-.45 50.003-11.76 73.594-35.875.625-7.607 1.596-15.078 2.25-22.342-35.35 8.516-66.727 9.7-93.94 2.687-22.447-5.785-41.876-17.308-57.686-34.125zm149.562 78.97c-22.667 18.85-47.38 28.92-73.47 29.374-26.433.46-53.628-8.724-81.498-26.53 10.815 26.82 35.084 50.75 75.968 63.31 22.05 3.672 40.392 3.026 54.906-1.437 16.862-5.183 28.98-15.113 37.688-31.312-8.31-10.982-12.13-22.215-13.594-33.406zm150.406 12.655c-21.934 13.607-78.608 25.768-99.343 15.594-4.52 19.162-15.06 21.715-23.47 18.28-8.854 14.47-21.072 25.37-35.97 32.156 30.077 21.514 136.794 17.434 158.783-66.03z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/aerodynamic-harpoon.svg b/static/_icons/_arrowheads/aerodynamic-harpoon.svg
new file mode 100644
index 00000000..851f34f0
--- /dev/null
+++ b/static/_icons/_arrowheads/aerodynamic-harpoon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18.285 16.297v20.52L127.088 163.57c35.955 91.222 6.358 156.645-59.43 178.098l111.852 34.758c6.88-3.465 12.225-7.756 17.69-12.64 38.677-34.554 39.72-103.556-23.38-190.208 98.413 71.66 174.565 60.578 202.85 5.686L342.545 66.78c-21.29 65.28-86.246 95.3-176.545 60.794L36.908 16.297H18.285zM401.998 221.48c-18.06 55.37-84.184 71.942-172.205 7.846 64.098 88.022 47.94 153.736-7.432 171.79l73.095 22.714c4.504-2.256 8.003-5.05 11.566-8.252l-.002-.006c25.274-22.58 25.955-67.676-15.28-124.302 64.31 46.833 114.076 39.59 132.56 3.716L402 221.48zm41.68 114.366c-10.75 32.968-50 42.71-102.408 4.545 38.163 52.41 28.42 91.66-4.55 102.41l153.8 46.843-46.84-153.797h-.002z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/arrowhead.svg b/static/_icons/_arrowheads/arrowhead.svg
new file mode 100644
index 00000000..555476d1
--- /dev/null
+++ b/static/_icons/_arrowheads/arrowhead.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m34.22 19.844-12.407.125.062 30 177.97 177.5c4.98-8.957 12.884-16.088 22.405-20.064L34.22 19.844zm205.436 202.75c-14.946 0-26.844 11.93-26.844 26.875s11.898 26.874 26.844 26.874c14.946 0 26.875-11.93 26.875-26.875 0-14.947-11.928-26.876-26.874-26.876zm150.875 15.75c-15.905 11.413-31.637 18.404-47.467 21.5 29.263 39.57 49.927 71.443 62.28 96 6.804 13.523 11.162 24.788 12.907 34.562 1.745 9.774.876 19.417-5.813 25.906-6.688 6.49-16.216 7.208-26.125 5.532-9.908-1.676-21.394-5.88-35.187-12.438-25.368-12.058-58.377-32.294-99.22-60.906-2.646 16.347-8.904 32.21-19.06 47.53 64.07 43.58 163.496 83.783 246.468 88.783 3.614-85.247-42.328-181.024-88.782-246.47zm-105.655 16.562c-2.375 19.668-17.412 35.58-36.656 39.28 3.07 11 4.776 21.816 5.093 32.44 44.728 31.797 80.314 53.785 105.812 65.905 12.888 6.127 23.263 9.684 30.313 10.876 7.05 1.193 9.577-.12 9.968-.5.392-.38 1.644-2.46.438-9.22-1.207-6.756-4.852-16.84-11.188-29.436-12.4-24.647-34.88-59.106-67.5-102.563-11.922-.288-23.968-2.61-36.28-6.78z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/barbed-arrow.svg b/static/_icons/_arrowheads/barbed-arrow.svg
new file mode 100644
index 00000000..5430ebee
--- /dev/null
+++ b/static/_icons/_arrowheads/barbed-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M21.97 18.22c12.01 16.966 24.82 34.31 38.28 51.967l-20.5 41.156L77.5 92.53a2466.283 2466.283 0 0 0 40.094 49.814L94.03 189.656l44.564-22.22a3060.088 3060.088 0 0 0 46.906 54.158l-28.47 57.156 55.157-27.47A3550.414 3550.414 0 0 0 263 306.062l-27.28 54.75 53.968-26.875a3789.07 3789.07 0 0 0 65.75 66.282c-38.372 1.44-74.363-2.4-107.125-10.72 65.27 60.235 151.623 99.225 246.593 103.688-4.313-95.196-43.473-181.33-103.687-246.594 7.904 31.405 11.808 65.622 10.874 102.125a7849.242 7849.242 0 0 0-16.844-16.908 3724.388 3724.388 0 0 0-47.28-46.406l26.655-53.5-54.313 27.063a3520.309 3520.309 0 0 0-56.125-51.876L279.5 156.28l-52.75 26.282c-18.68-16.527-37.304-32.64-55.78-48.218l21.436-43.063-45.75 22.782A2480.645 2480.645 0 0 0 96.062 73.44l18.282-36.688-40 19.938c-17.8-13.548-35.308-26.4-52.375-38.47z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/branch-arrow.svg b/static/_icons/_arrowheads/branch-arrow.svg
new file mode 100644
index 00000000..0573f5f3
--- /dev/null
+++ b/static/_icons/_arrowheads/branch-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m95.053 18.096.002.004v-.004h-.002zm.002.004L88.43 75.234l64.943 69.444c22.73-80.96-33.616-62.34-58.318-126.578zM76.307 89.633l-59.713 6.924c73.505 19.88 58.272 84.583 122.982 60.728l-63.27-67.652zm193.775 25.39c-59.893 27.56-58.306 75.928 3.877 110.715 39.215-50.06-20.79-53.14-3.878-110.715zm-103.77 42.375-13.14 13.29c30.208 29.86 63.767 58.348 98.982 83.347l54.108 81.645 64.763 51.605c2.657-5.314 5.914-9.756 9.95-13.38.516-.465 1.045-.9 1.578-1.33l-42.22-33.643.692-.233c-4.833-14.35-4.43-28.26.516-42.946l-17.71-5.965c-3.46 10.272-5.133 20.8-4.78 31.353l-53.19-80.256-1.43-1.01c-34.845-24.603-68.176-52.88-98.12-82.48zM244.52 301.4c-16.637-.16-33.458 13.866-46.784 44.596 49.157-22.96 48.114 35.165 92.475-4.058-12.595-26.026-29.05-40.376-45.69-40.538zm200.507 43.03-15.737 27.808 30.877 87.125-89.932-31.867-27.494 13.393 152.524 54.606-50.24-151.066zm-32.426 36.668c-8.966.967-14.955 2.948-19.14 6.71-4.377 3.93-8.102 11.308-10.782 24.27l46.775 16.574-16.853-47.554z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/broadhead-arrow.svg b/static/_icons/_arrowheads/broadhead-arrow.svg
new file mode 100644
index 00000000..fb5eae0d
--- /dev/null
+++ b/static/_icons/_arrowheads/broadhead-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.656 20.688v36.437L73.5 110.97c6.515-14.93 17.988-27.23 32.313-34.814L50.25 20.686l-30.594.002zm119.47 65.906c-29.312 0-52.876 23.533-52.876 52.844a52.75 52.75 0 0 0 31.406 48.375c1.88-37.477 32.825-67.482 70.656-67.907-7.734-19.565-26.786-33.312-49.187-33.312zm213.843 44.25L312.06 145.47l97.032 253.436 7.5 19.625L397 410.97l-253.28-97.533-14.345 40.97L492.28 494.312l-139.31-363.47zm-163.845 7.72a52.736 52.736 0 0 0-52.875 52.874c0 24.35 16.282 44.705 38.594 50.906 2.935-34.576 30.61-62.252 65.187-65.188-6.2-22.312-26.553-38.594-50.905-38.594zm113.5 34.53L278.75 273.688l-1.344 5.625-5.625 1.312-100.124 23.53L384.156 386l-81.53-212.906zm-56.5 22.47a52.736 52.736 0 0 0-52.875 52.874c0 10.896 3.28 20.983 8.875 29.375l59.78-14.063 14.033-59.03c-8.473-5.784-18.724-9.157-29.813-9.157z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/chained-arrow-heads.svg b/static/_icons/_arrowheads/chained-arrow-heads.svg
new file mode 100644
index 00000000..d3f7417b
--- /dev/null
+++ b/static/_icons/_arrowheads/chained-arrow-heads.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M97.53 20.705v.002l6.425 82.932-86.434-6.427v53.73l207.912 74.754L151.26 20.705H97.53zm-80.01.002v31.537l54.9 19.858-18.69-51.395H17.52zM237.366 45.21l15.754 207.743L45.374 237.2l300.363 108.374L237.368 45.21h-.003zm117.342 171.927.002.008v-.008h-.003zm.002.008 11.272 148.67-148.68-11.272 214.968 77.562-77.56-214.96zm87.493 137.65.002.008v-.008h-.002zm.002.008 7.158 94.396-94.404-7.16 136.49 49.247-49.245-136.484z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/charged-arrow.svg b/static/_icons/_arrowheads/charged-arrow.svg
new file mode 100644
index 00000000..ac239951
--- /dev/null
+++ b/static/_icons/_arrowheads/charged-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.83 19.6v14.8L279.6 310.8l20.5-11.4 9.4-16.9L42.87 19.6zm140.87 0 25.2 53.3-16.2 4-51-37 43.4 62 34-7.3 26.2 55.5 75.3-43.4c17.6 26.7 32 48.1 46.2 72.7l-21.9 14-69.6-26.1 71.6 57c32-25.5-.1-.1 32-25.7l83.5 240.1C362 415.1 277.1 389.8 207.6 365c-20.9-13.7-43.2-31.7-60.6-50.4l43.7-18.1L109.5 168l-24.08 49.3-65.59-92.5v32.3l68.54 96.6 23.23-47.4 51.4 81.4-46.9 19.4c38.6 46.2 90 85.7 137.7 112.2l-137.9-2 15.6-39.6-66.44-33 7.19-30.1 46.55-41.9L69.04 292l-49.21-58.6v29.1l35.54 42.3-11.93 50 64.36 32c-5.8 19.5-15 36.6-25.49 53.7l-44.54-20.9 43.13 56.7 30.2-40.4 130.4 1.9-48.7 17.8 144.7 1.7c56.5 21.1 112.5 33.4 154.7 35.1-1.2-30.4-7.9-68-19.4-107.7l11.4-153.5-22.5 31.3-6.7-161.6 32.1-18.1L470.5 27l-7.2 43.6c-22.9 12.9-44.7 25.27-67.7 38l-49.3-89h-21.4L388.3 134l48.3-26.7 3.2 78.1-16.9-.4-4.2-49-18.2 59.5 40.4 16.4 3.9 94.8c-37.2-78.9-87.9-144.4-131.1-209.5l2.2-47.2-73.6-11 53.3 28-4.9 22.1-60.1 34.7-49.2-104.2zM352 244.2l-38.1 69-68.9 38.1 164.1 57.1z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/chemical-arrow.svg b/static/_icons/_arrowheads/chemical-arrow.svg
new file mode 100644
index 00000000..63d23d9c
--- /dev/null
+++ b/static/_icons/_arrowheads/chemical-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M65.28 17.906c-4.534.112-8.9 1.748-11.874 4.938L78.188 47.53c3.6-2.498 6.062-6.59 6.062-12.374 0-11.547-9.8-17.476-18.97-17.25zm50.907 47.25c-5.456.135-10.72 2.086-14.312 5.906l100.094 99.563c6.396-3.838 10.874-10.576 10.874-20.406 0-15.813-11.598-24.957-24.125-26.907 2.274-4.11 3.593-9.1 3.593-15 0-30.203-34.627-40.495-54.063-28.313-2.82-10-12.71-15.074-22.063-14.844zm185.125 4.5c-8.09.2-15.687 5.2-15.687 15.344 0 21.643 34.656 23.643 34.656 1.906 0-11.547-9.798-17.476-18.967-17.25zM38 70.97c-8.036 3.474-14.03 10.785-14.03 22.155 0 25.048 29 33.652 45.06 23.344-.02.356-.03.722-.03 1.093 0 21.643 34.656 23.642 34.656 1.906 0-16.772-20.605-21.663-30.03-13.095L38 70.97zm285.28 50.624c-5.445-.06-11.186 1.354-16.905 4.656-36.6 21.133.49 77.543 36.938 56.5.29-.168.562-.36.843-.53 3.576 10.24 20.815 13.49 24.28.686 2.364-8.723-4.358-15.083-11.436-16.22 6.43-19.766-11.307-44.84-33.72-45.092zm-275.59 35.75c-8.09.2-15.72 5.17-15.72 15.312 0 21.642 34.657 23.643 34.657 1.906 0-11.547-9.768-17.444-18.938-17.218zm83.156 5.937c-6.61 4.913-11.063 12.715-11.063 23.532 0 18.466 12.97 29.59 27.532 32.688-.978 3.754-1.53 7.847-1.53 12.313 0 32.11 27.323 48.72 52.937 48.156 3.2 15.24 16.224 24.036 29.936 25.842a36.154 36.154 0 0 0-.312 4.782c0 8.336 2.636 15.158 6.875 20.437-10.43-1.978-21.4-.696-30.345 3.97 2.996-14.892-20.645-22.33-24.72-7.125-2.556 9.508 5.674 16.226 13.376 16.406-4.655 5.905-7.53 13.667-7.53 23.376 0 35.93 39.046 49.723 64.156 38.28a36.83 36.83 0 0 0-.094 2.377c0 35.293 47.376 43.74 62.72 20.656 6.813 5.087 15.516 7.62 23.968 7.467-1.963 4.567-3.094 9.853-3.094 15.907 0 45.924 63.77 55.7 80.72 22.812 19.862 23.187 63.74 25.98 73.624-10.906 6.62-24.708-8.318-43.653-27.344-51.25 17.534-1.69 33.188-13.284 33.188-35.594 0-19.965-12.55-32.753-27.75-37.812.12-1.355.187-2.748.187-4.188 0-6.354-1.24-11.99-3.374-16.937 6.76-2.78 11.844-8.816 11.844-18.345 0-6.834-2.624-12.166-6.594-15.938.665-.247 1.322-.517 2-.906 13.934-7.994 2.29-31.03-11.625-23-6.915 3.988-7.51 11.67-4.655 17.408-5.89-.726-11.958.447-16.594 3.625-2.23-18.2-17.765-28.094-33.342-28.97.942-2.997 1.468-6.33 1.468-10.03 0-41.226-64.075-45.623-67.312-6.813-11.85-3.468-24.845-3.02-35.75 1.5.933-3.418 1.437-7.176 1.437-11.28 0-42.605-54.43-53.9-76.092-29.5l99.593 99.06c-1.305 1.31-2.334 3.038-2.936 5.283-4.166 15.5 20.3 23.54 24.5 8.03 1.77-6.54-1.58-11.727-6.344-14.406 9.1-10.287 23.79-29.242 31.844-52.093 38.66 53.382 76.884 131.425 73.875 200.97-69.06-4.08-152.798-36.757-206.126-72.314 48.474-22.737 60.437-36.688 60.437-36.688l-94.905-94.406c4.782-2.24 8.28-6.774 8.28-13.687 0-18.36-24.72-22.504-32.405-10.314l-52.656-52.375zm303.219 39.595c-8.09.2-15.688 5.17-15.688 15.313 0 21.643 34.656 23.674 34.656 1.937 0-11.548-9.798-17.476-18.967-17.25zm-328.282 88.78c-7.082.193-14.056 4.065-16.343 12.595-4.212 15.72 13.806 23.61 25.47 17.813.85 23.095 40.252 28.895 47.25 2.78 6.222-23.22-23.28-34.08-38.657-21.906-2.103-7.306-9.983-11.49-17.72-11.28zm85.595 137.5c-4.7.043-9.128 2.557-10.688 8.376-2.88 10.71 7.893 17.846 16.22 16.126.83 27.68 45.468 30.024 45.468 1.75 0-21.135-24.955-27.91-37.906-18.47-2.365-4.844-7.892-7.825-13.095-7.78zm114.656 24.908c-1.76.058-3.627.59-5.53 1.687-13.904 8.014-2.31 30.964 11.625 22.97 11.757-6.747 5.32-24.193-5.344-24.658a10.42 10.42 0 0 0-.75 0z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/crosshair-arrow.svg b/static/_icons/_arrowheads/crosshair-arrow.svg
new file mode 100644
index 00000000..2ae19ae6
--- /dev/null
+++ b/static/_icons/_arrowheads/crosshair-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m101.86 17.793-18.532 2.41 9.42 72.475-72.478-9.42-2.41 18.533 96.55 12.55-12.55-96.547zm47.744 47.742-18.532 2.408 9.42 72.48-72.476-9.42-2.41 18.532 96.548 12.55-12.55-96.55zm139.97 44.377v70.28c-19.16 1.463-37.088 7.392-52.756 16.734l13.655 13.654a102.47 102.47 0 0 1 39.1-11.635v37.643a64.71 64.71 0 0 0-10.626 2.467l15.742 15.74a47.824 47.824 0 0 1 4.22-.197 46.454 46.454 0 0 1 46.596 46.595c0 1.424-.074 2.83-.197 4.22l15.74 15.743a64.528 64.528 0 0 0 2.45-10.506h38.006a102.48 102.48 0 0 1-11.652 39.31l13.652 13.65c9.374-15.723 15.31-33.723 16.746-52.96h65.57v-18.687h-65.6c-4.64-59.564-52.367-107.23-111.958-111.772v-70.278h-18.69zm-93.01 2.584-18.53 2.408 9.42 72.48-72.477-9.423-2.41 18.534 81.357 10.576L395.38 408.523l22.472 8.7-8.33-20.987-17.043-17.043c.025-.032.054-.063.08-.095l-13.214-13.217-.08.1-27.12-27.117.077-.103-13.407-13.408c-.022.037-.047.072-.07.11l-64.103-64.103c.037-.023.072-.048.11-.07l-13.407-13.407-.104.076-26.79-26.792c.033-.027.065-.055.1-.082l-13.22-13.217c-.033.026-.063.056-.096.083l-14.095-14.096-10.576-81.36zm111.7 86.447c49.447 4.42 88.692 43.6 93.207 93.02h-37.94c-4.075-28.546-26.737-51.245-55.266-55.373v-37.647zm-111.59 36.705c-10.65 16.48-17.43 35.683-19.037 56.315h-69.535v18.687h69.505c4.463 59.74 52.256 107.6 111.967 112.163v63.812h18.69v-63.813c20.71-1.578 39.985-8.37 56.52-19.054l-13.513-13.512a102.43 102.43 0 0 1-43.006 13.815v-38.263a64.689 64.689 0 0 0 14.636-3.922l-14.96-14.96c-2.92.567-5.937.872-9.03.872a46.453 46.453 0 0 1-46.594-46.594c0-3.092.306-6.11.873-9.03l-14.96-14.958a64.779 64.779 0 0 0-3.94 14.758h-37.9a102.415 102.415 0 0 1 13.794-42.805l-13.51-13.51zm-.32 75.002h37.966c4.163 28.446 26.792 51.04 55.254 55.15v38.26c-49.568-4.44-88.878-43.813-93.22-93.41zm249.55 51.235-21.412 21.412 26.514 66.793-67.272-26.037-21.78 21.78 129.46 45.505-45.51-129.453z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/cupidon-arrow.svg b/static/_icons/_arrowheads/cupidon-arrow.svg
new file mode 100644
index 00000000..aa0dc3c6
--- /dev/null
+++ b/static/_icons/_arrowheads/cupidon-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18.188 22.906v26.72l55.374 54.03a113.098 113.098 0 0 1 15.313-15.47L22 22.907h-3.813zm323.03 57.875c-33.02.364-67.89 19.083-88.468 59.032L244.406 156l-8.28-16.22c-26.002-50.874-67.868-64.366-104.157-53.874C95.68 96.4 64.62 131.9 63.874 185.97c-.792 57.587 33.99 92.34 73.313 130.686 34.784 33.92 72.897 70.298 85.812 125.313 25.558-33.53 54.225-61.36 81.72-86.658l-77.564-75.406h-.03v-.03c-6.18-6.055-8.758-14.43-7.69-21.72 1.07-7.29 4.987-13.397 10-18.03 5.016-4.635 11.31-7.964 18.408-8.876a25.864 25.864 0 0 1 5.47-.125c5.57.47 11.283 2.727 15.75 7.094.005.005.024-.007.03 0l77.812 75.655.063.063.03.03c.452.453.897.87 1.344 1.313.984-.926 1.995-1.855 2.97-2.78 43.534-41.35 74.882-79.595 75.655-133.78.826-57.986-30.668-89.133-68.22-96.376a87.058 87.058 0 0 0-14.344-1.53 86.718 86.718 0 0 0-3.187-.033zm-90.124 168.907c-.28.018-.565.054-.875.094-2.48.32-5.677 1.83-8.095 4.064-2.418 2.234-3.896 5.01-4.188 7-.29 1.978-.197 3.274 2.22 5.656l.03.03 77.844 75.658.033.03c27.01 26.466 41.222 44.93 40.906 64.157-.16 9.614-4.967 18.253-12.033 24.844-3.662 3.415-7.95 6.473-12.78 9.374C377.94 466.61 439.006 489.682 491.25 495c-1.076-50.902-26.66-107.724-55.156-150.97-1.19 2.483-2.446 4.96-3.906 7.314-4.697 7.568-11.49 14.616-21.22 17.25-9.727 2.633-20.91.464-33.28-6.188-12.35-6.638-26.502-17.825-43.813-35.125l-.094-.092-77.75-75.594H256c-1.606-1.574-2.94-2.032-4.906-1.906z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/energy-arrow.svg b/static/_icons/_arrowheads/energy-arrow.svg
new file mode 100644
index 00000000..e1992c92
--- /dev/null
+++ b/static/_icons/_arrowheads/energy-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m84.066 17.832 9.3 55.445-43.282-40.412h-.002L36.064 46.88l38.424 41.155-52.37-8.252 52.695 76.11 58.958-4.364 166.484 178.314-48.95-9.89 77.725 61.44-117.69-14.316 84.664 35.246-42.86 16.95 64.217 19.97-33.862 25.36 182.43 20.84 28.435 8.845-5.28-16.98-4.808-15.464-20.51-182.217-25.894 32.993-18.518-59.56-17.04 43.1-35.177-93.468-1.87 110.494-63.757-91.374 10.5 55.594-155.776-145.44 4.596-62.093-76.762-52.045zM268.27 71.254l142.714 156.144 30.81 14.963-10.304-62.438L268.27 71.254zm-62.377 12.81 92.97 115.235 36.477-.935-14.836-35.195-114.61-79.106zM42.018 212.884 160.42 419.7l55.393 19.765-8.333-36.324L42.018 212.884zm92.117 23.08 46.824 83.112 47.577 18.723-17.23-41.66-77.172-60.175zm283.107 73.255 48.72 156.665-156.665-48.72 77.36-30.59 30.585-77.356z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/fast-arrow.svg b/static/_icons/_arrowheads/fast-arrow.svg
new file mode 100644
index 00000000..2f0f48db
--- /dev/null
+++ b/static/_icons/_arrowheads/fast-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M20.91 20.002v32.29l357.793 338.9L20.91 101.407v58.942l355.942 250.224-86.89-17.527 26.913 30.947-70.502 3.008 245.633 64.603-65.502-249.054-15.352 92.36-27.3-31.46 16.683 60.464L161.26 20.002h-22.37l142.276 208.935L109.496 42.17l98.975 138.547L45.194 20.002H20.91zm433 92.186-32.234 38.482 55.19 208.21 15.286-217.794-38.242-28.9zm-231.88 327.89-24.975 23.47 21.674 27.62 149.225-12.78-145.926-38.31z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/flaming-arrow.svg b/static/_icons/_arrowheads/flaming-arrow.svg
new file mode 100644
index 00000000..4665b85c
--- /dev/null
+++ b/static/_icons/_arrowheads/flaming-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m57.875 21.28 10.78 10.782.25-.25 235.282 235.313 5.157-25.188 1.062-5.187 5-1.78 22.625-7.907 8.564-3 3.25 8.468 67.062 174 7.563 19.626-19.626-7.53-174.25-66.813-8.53-3.282 3.092-8.592 8.188-22.907 1.75-4.936 5.156-1.063 29.406-6.03L32.686 68.03l.064-.03-15.625-15.625v26.438l92.156 92.156c-30.99 4.08-64.743-6.566-88-41.25-5.772 45.12 27.467 71.417 67.595 90.093 142.86 66.488 62.58 154.315-21 68.312C91.465 422.337 345.872 515.98 446.22 443.03c81.28-59.088 28.39-317.88-124.564-357.342 35.845 25.814 3.98 39.604-35.844 34.906 33.436 18.52 53.9 43.222 28.188 65.687-25.476 22.26-62.792-19.648-67.75-56.78-7.816-58.527-13.53-89.41-90.53-86.125 31.365 24.65 36.576 52.646 26.843 76.188L84.313 21.28H57.874zm277.78 226.407-9.06 3.188-11.94 58.188-1.217 6.062-6.032 1.22-58.25 11.936-3.344 9.376 146.094 55.97-56.25-145.938z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/frozen-arrow.svg b/static/_icons/_arrowheads/frozen-arrow.svg
new file mode 100644
index 00000000..b50c1848
--- /dev/null
+++ b/static/_icons/_arrowheads/frozen-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M16.37 29.06V52L193.3 154.3c19.7-14.4 39.3-28.8 58.9-43.1 66.2 81.7 123.6 152.7 182.7 225.5-97.5-15.7-199.6-31.9-286.9-45.5 2.8-24.7 5.6-49.4 8.5-74L16.38 136.1v63.5l24.5 141.1L66.94 190l22.18 106 17.38-83.4 25.5 14.7-9.9 84.7c8 40.9 15.5 83 23.1 124.3l10.7-58.5 19.9 117 28.5-167.4 21.5 117.4 20.4-111.1 17.7 36 16-32.7 18.8 3 22.1 132.9 20.8-126.1 12.8 2 24.5 63 14.8-38.1 18.1 98.4 17.6-96.3 16.8 23.5 22.9-32.3 25.6 4C413.2 270.3 327.5 165.2 257 78.41l-68.4 50.19zm0 44.53v40.91c53.31 31 106.83 61.6 160.03 92.6-2.6 22.8-5.2 45.7-7.8 68.5l221.1 35-44.9-55.4-9.6 31.3-20.4-66.1-13.3 46.5-19.3-72.2-16.2 79-28-110.2-15.5 51.9-13.9-46.5-12.4 67.6-12.1-66z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/imbricated-arrows.svg b/static/_icons/_arrowheads/imbricated-arrows.svg
new file mode 100644
index 00000000..8b7904a3
--- /dev/null
+++ b/static/_icons/_arrowheads/imbricated-arrows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M24.41 26.84 111.1 180.8l52.1-19 17.2-47.1c-52-29.28-104.02-58.56-155.99-87.86zM219.1 63.09l-36.3 99.51 60 70.9 14-38.1c-12.6-44.1-25.2-88.2-37.7-132.31zm84.3 59.11-43.1 118.1 65.3 77.2 18.7-51.3c-13.6-48-27.2-96-40.9-144zm94.4 52-55.3 151.5 102.4 120.9-122.5-103.8-146.8 53.5 310.6 88.5c-29.5-103.6-59-207.1-88.4-310.6zm-233.2 7L64.56 217.7l132.24 37.6 38.7-14.1c-23.7-20-47.3-40-70.9-60zm77.7 77.4L123.5 302l144.1 40.9 51.9-18.9c-25.7-21.8-51.5-43.6-77.2-65.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/incoming-rocket.svg b/static/_icons/_arrowheads/incoming-rocket.svg
new file mode 100644
index 00000000..d71aa244
--- /dev/null
+++ b/static/_icons/_arrowheads/incoming-rocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18.36 18.336V93.59l317.51 262.287-52.917.53 82.58 63.884-71.963.394 80.102 32.728-17.404 15.14c34.87 16.374 70.587 22.075 135.648 22.718l.008-.002c-.314-44.892-11.583-91.282-28.666-126.69l-12.5 25.762-43.65-104.975-8.303 72.656-53.752-70.182 5.8 55.584L85.86 18.336h-67.5zm148.736 0L336.303 271.23 232.88 18.336h-65.784zm123.34 0 50.753 183.898 2.468-183.898h-53.22zM18.363 160.074v82.963l241.853 99.272L18.36 160.073zm0 141.29v57.396l201.552-4.795-201.55-52.6zm357.154 77.212c41.388 7.493 81.473 39.554 93.138 89.248-30.75-5.512-52.902-16.592-67.86-31.74-14.722-14.907-22.987-34.03-25.278-57.508z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/interleaved-arrows.svg b/static/_icons/_arrowheads/interleaved-arrows.svg
new file mode 100644
index 00000000..044f24a2
--- /dev/null
+++ b/static/_icons/_arrowheads/interleaved-arrows.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m182.885 16.2-1.73 57.015 51.257 47.226 8.063-23.036-57.59-81.205zm-68.537 65.073v.004l77.75 61.625 28.797-8.062-57.018-52.986-49.53-.58zM89.32 101.6l1.225 56.375 55.762 56.373 9.19-30.637L89.32 101.6zm159.496 33.992-15.552 10.363c19.852 29.796 29.86 65.31 28.07 103.537l-.182.016-1.406 18.824c.02 0 .04-.003.06-.004-3.512 49.992 11.5 96.754 41.26 133.654l-30.218 16.368 62.177 19.548-38.877 19.432 153.995 32.77-98.457-122.86.132 55.44c-50.335-36.216-76.608-92.807-71.142-155.975l.078-.006.22-3.1c.025-.26.047-.517.075-.776 4.974-46.64-6.008-90.873-30.234-127.232zm-171.14 36.472-57.6 2.454 87.012 61.275 23.898-9.19-53.31-54.54zm77.482 51.54-10.05 15.757c28.25 18.023 61.034 28.177 95.874 29.265l1.395-18.648c-31.888-.83-61.58-10.016-87.22-26.372zm143.664 24.207-1.312 18.602c52.536 1.886 99.042 26.41 130.82 68.754h-47.113L497.91 427.9l-31.62-145.66-19.546 39.588-18.7-59.478-15.747 29.07c-31.726-26.472-71.01-41.83-113.475-43.61z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/middle-arrow.svg b/static/_icons/_arrowheads/middle-arrow.svg
new file mode 100644
index 00000000..2304a6e7
--- /dev/null
+++ b/static/_icons/_arrowheads/middle-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m77.637 20.836-.598 56.236-55.913.28 67.1 50.492 19.673-6.393 53.3 53.302-9.3-35.73-30.578-30.58 6.813-20.504-50.498-67.102zm338.855.818-116.535 107.96-45.37-99.557-19.972 111.193-71.658-41.87 26.834 103.077-134.104 4.162 91.375 63.427-98.93 70.617 103.343-7.61L82.06 457.9l116.268-66.023-1.838 82.47 63.98-81.036 41.163 54.12 14.08-63.637 53.14 25.486-67.777-67.776c-10.955 6.72-22.698 11.65-34.62 14.172l.026.135c-1.48.27-2.95.495-4.412.682-33.335 5.352-58.06-10.3-64.695-37.465-3.09-10.107-3.674-21.624-1.465-33.785 8.17-44.95 48.8-85.58 93.75-93.75 5.62-1.02 11.1-1.447 16.37-1.304 6.487.174 12.644 1.225 18.345 3.072 26.107 6.87 41.242 30.692 36.727 62.78a84.082 84.082 0 0 1-.872 6.022l-.18-.033c-3.006 14.26-9.466 28.265-18.314 40.976l31.776 31.775 94.43-7.585-74.294-50.908 91.8-52.576-86.134-12.692 72.557-97.62-94.765 38.963 39.387-130.706zM247.06 234.178a120.053 120.053 0 0 0-12.847 13.584L411.36 424.91l-48.223 26.666 129.7 45.11-45.118-129.694-24.158 43.69-66.933-66.932-.114-.406L330.37 317.2c-.046.05-.095.1-.14.15l-83.17-83.172z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/spear-feather.svg b/static/_icons/_arrowheads/spear-feather.svg
new file mode 100644
index 00000000..5d7baf63
--- /dev/null
+++ b/static/_icons/_arrowheads/spear-feather.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m286.902 26.102 32.344 66.677 175.3-51.64zm-14.435 11.484-20.68 47.81 19.86 67.42 43.472 29.08a9458.743 9458.743 0 0 0-3.118-27.02c-1.375-11.736-2.797-23.634-3.967-32.884a792.928 792.928 0 0 0-1.523-11.508c-.25-1.746-.57-3.376-.713-4.183zm227.162 20.82-175.03 51.56c.39 2.816.802 5.893 1.293 9.768 1.182 9.354 2.61 21.283 3.988 33.047a9508.196 9508.196 0 0 1 3.544 30.734zM225.25 96.36c-6.24.025-13.473.972-20.428 3.02-11.938 3.518-22.76 10.203-27.66 15.81l13.1 44.476c2.87 11.482 2.604 10.575 2.87 11.482 2.818 9.697 6.008 22.917 8.913 36.233 2.86 13.107 5.446 26.318 7.22 36.552-13.247 9.09-24.188 23.53-26.744 38.123.69 5.675 1.35 11.72 2.006 17.922H215.2v3.634c-9.414 2.836-19.547 7.026-29.11 11.52.913 9.088 1.844 18.49 2.823 28.048l26.287.71v1.38c-9.125 3-17.414 6.747-24.935 10.707 2.117 19.663 4.532 39.527 7.668 57.978.634 3.734 1.31 7.38 2.005 10.977h15.263v3.644c-4.406 1.325-8.954 2.92-13.55 4.74 3.035 14.105 6.587 26.78 10.76 36.87 5.163 12.488 11.142 20.07 16.792 23.388 5.82-3.26 11.65-10.323 16.813-22.328 2.033-4.728 3.926-10.103 5.69-16.01-6.104-3.028-12.2-5.475-17.487-6.53v-.577h19.48c2.62-9.95 4.923-21.155 6.923-33.305 1.375-8.353 2.614-17.154 3.75-26.297-8.626-4.698-17.73-8.72-24.926-9.625-1.62 20.566-3.478 40.367-5.275 57.89-.163-45.778-.49-128.767-5.73-171.644l.718-10.312c-.437-3.55-1.145-8.11-2.062-13.436-1.834-10.648-4.504-24.285-7.463-37.853-2.683-12.3-5.59-24.478-8.362-34.4 4.334-.454 8.886-1.308 13.33-2.618 11.94-3.517 22.76-10.2 27.66-15.81L236.64 97.672c-2.99-.86-6.915-1.33-11.388-1.313zm-64.04 28.378-11.007 3.242 23.973 40.776zm-28.802 8.485-12.9 3.798 24.03 40.878 12.897-3.8zm-30.64 9.142 12.966 44.018 11.006-3.242zm-17.3 4.98L18 166.924v47.954l79.47-23.41zm157.483 86.643c-.412.002-.814.022-1.223.03 1.646 8.285 2.425 18.16 2.887 29.61.697 17.265.347 37.753-.62 59.405-.814 18.193-2.077 37.166-3.534 55.674h26.076c1.538-13.55 2.874-27.78 4.103-42.377-10.106-1.324-20.122-1.633-26.58.727l27.33-9.99c1.933-24.034 3.634-48.887 5.45-73.48-.03-4.927-1.356-7.864-3.6-10.444-2.273-2.612-5.852-4.834-10.472-6.413-4.618-1.578-10.173-2.406-15.696-2.658-1.38-.063-2.76-.09-4.12-.084zm-26.75 211.17v2.03l-.207-.022c.067-.628.14-1.37.207-2.008z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/spine-arrow.svg b/static/_icons/_arrowheads/spine-arrow.svg
new file mode 100644
index 00000000..40cf6674
--- /dev/null
+++ b/static/_icons/_arrowheads/spine-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M14.563 15.406v104.75L72.97 135.72l52.436 52.468 34.72-18.594 8.81 16.47-86.186 46.155 119.875 33.155 84.28 84.313 20.22-7.594 6.563 17.5-65.438 24.594L491 494 381.812 252.72l-26.03 68.31-17.47-6.655 8.938-23.47-21.406-21.436-33.28-120.314-2.72 5.063-41.625 77.843-16.5-8.813 16.686-31.22-46.375-46.374-33.06-119.53-43.064 80.78-16.5-8.78 15.688-29.407L71.78 15.405H14.563z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/spiral-arrow.svg b/static/_icons/_arrowheads/spiral-arrow.svg
new file mode 100644
index 00000000..7c30ac45
--- /dev/null
+++ b/static/_icons/_arrowheads/spiral-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M100.44 11.777V63.3l68.027 68.024v-51.52L100.44 11.776zM36.8 26.087l-10.538 10.26L153.64 163.565a167.234 167.234 0 0 1 8.887-11.75L36.8 26.087zm-24.71 74.044 68.025 68.024h51.676L63.683 100.13H12.09zM256.006 124.1c-24.66.192-51.354 10.48-75.348 34.718-34.8 35.155-56.222 127.215-18.105 159.436-7.546-35.653-5.986-77.632 26.35-119.467l.035.033c.61-.843 1.23-1.655 1.853-2.46a183.363 183.363 0 0 1 5.624-6.647c.645-.697 1.29-1.393 1.945-2.065l-.063-.063a195.22 195.22 0 0 1 3.97-4.236c43.752-45.324 119.946-3.634 89.938 65.992h.29c-2.88 6.677-6.74 13.608-11.702 20.742l-69.31-69.31a74.098 74.098 0 0 0-9.17 11.406l70.322 70.234c-8.92 15.136-13.956 30.713-15.79 45.766h-.263c-2.245 18.27.347 35.66 6.412 50.576 4.115 10.427 9.893 19.66 16.947 27.103l.156-.27c5.984 6.286 12.834 11.354 20.29 14.866 66.005 31.093 128.726 54.608 196.23 76.507l-.17-.443.546.222-7.408-18.144c-31.305-81.676-62.515-160.046-86.413-243.28l-.002.006c.26 43.795-9.063 78.84-23.848 106.828l30.157 30.41a128.667 128.667 0 0 0 9.633-17.115l43.762 107.176L354.9 418.538c6.27-2.965 12.17-6.26 17.705-9.865l-29.255-29.268c-23.927 6.417-50.26-12.102-52.73-42.904-.008-.123-.02-.244-.03-.367-.06-.83-.097-1.67-.123-2.516-.006-.21-.02-.417-.024-.63-.02-1.007-.02-2.024.012-3.055.257-8.665 1.45-17.172 3.838-25.893l87 86.89 6.375 6.38a126.938 126.938 0 0 0 10.29-10.064l-28.528-28.53-69.84-69.84c4.99-11.8 12.255-24.317 22.402-38.37 19.266-26.68 21.558-53.408 13.063-75.332a71.708 71.708 0 0 0-.668-1.682l-.012-.027c-11.07-27.104-38.573-46.637-70.787-49.108-2.502-.19-5.03-.28-7.582-.26z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/thorn-helix.svg b/static/_icons/_arrowheads/thorn-helix.svg
new file mode 100644
index 00000000..2571a512
--- /dev/null
+++ b/static/_icons/_arrowheads/thorn-helix.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M71.875 18.688c3.203 7.786 3.926 16.95 4.03 27.78.117 11.915-.877 25.668-2.468 40.126-2.693 24.49-6.377 49.535-.656 71.78-6.075 11.6-19.268 17.043-35.218 20.095 16.236 11.488 36.372 16.193 55.75 11.155a58.7 58.7 0 0 0 14.063 7.406c12.283 4.483 26.604 5.65 45.03 3.845.483-7.57 1.287-14.966 2.126-22.125-18.17 2.18-30.275 1.23-39.155-2-8.93-3.248-14.99-9.736-18.03-16.563-3.664-8.236-4.52-18.246-4.657-30.375-.14-12.128.8-26.15 2.406-40.75 1.655-15.05 3.667-30.256 3.53-44.812l-.53-3.563c.147-.022.29-.04.437-.062-.267-7.548-1.168-14.902-3.093-21.938H71.876zm54.344 38.406c-2.93.008-5.966.116-9.095.312-.462 7.62-1.278 15.044-2.125 22.25 7.17-.687 13.54-.854 19.125-.594 8.052.377 14.53 1.59 19.688 3.313 9.983 3.337 15.33 10.67 18.125 16.313.004.007-.004.023 0 .03 4.084 8.26 4.915 18.162 5.03 30.063.116 11.915-.91 25.67-2.5 40.126-3.174 28.863-7.678 58.49 3.407 83.406 1.387 3.118 3.24 6.112 5.438 8.97 2.654 17.69-5.822 30.658-19.22 40.062 21.26.607 38.842-6.724 54.032-19.25 10.6 2.244 22.79 2.488 37.594.875.07-.633.148-1.313.218-1.94l.062-.467c.755-6.864 1.368-13.512 1.78-19.782-19.424 2.535-32.108 1.636-41.342-1.717-8.934-3.245-15.024-9.73-18.063-16.563-3.663-8.236-4.487-18.278-4.625-30.406-.138-12.13.77-26.12 2.375-40.72.205-1.863.414-3.727.625-5.593 17.935-6.422 33.858-16.394 43.594-37.155-14.194 6.125-27.66 5.143-40.688-2.063-.13-13.513-2.115-26.493-8-38.374-5.732-11.577-16.797-21.134-31.875-26.157-9.67-3.22-20.668-4.97-33.56-4.936zM56.405 67.687C40.13 69.94 28.428 69.9 19.53 68.03v22.064c9.908 1.497 21.237 1.45 34.69-.125.212-1.813.43-3.636.624-5.407a474.463 474.463 0 0 0 1.562-16.876zm261.625 98.407c-9.924 12.336-24.8 18.83-41.155 18.344-4.872-3.597-10.56-6.574-17-8.72-9.672-3.22-20.67-4.972-33.563-4.937-3.625.01-7.406.17-11.343.47-.082.71-.174 1.453-.25 2.156-.765 6.95-1.358 13.738-1.75 20.156 8.056-.874 15.108-1.1 21.25-.812 8.05.376 14.53 1.59 19.686 3.313 9.998 3.34 15.334 10.668 18.125 16.312 4.098 8.263 4.917 18.18 5.033 30.094.115 11.913-.88 25.666-2.47 40.124-1.157 10.53-2.49 21.157-3.187 31.625-14.21 8.57-28.415 6.47-42.625 2.967 12.176 19.17 26.11 34.532 45.47 38.313a73.03 73.03 0 0 0 3.72 10.5c5.11 11.485 16.065 21.71 30.53 27 10.1 3.675 21.575 5.122 35.563 4.53 28.41 16.137 58.544 27.008 89.906 34.595-6.23-29.518-17.78-58.992-31.75-88.53a60.57 60.57 0 0 1-2.47.655c1.122-12.293 1.614-24.397.094-35.938 13.016-15.182 22.528-30.87 24.812-51.343-12.36 11.8-26.07 15.875-41.47 14.217-5.83-5.63-13.32-10.213-22.248-13.187-9.673-3.222-20.67-4.982-33.563-4.938-2.927.01-5.965.115-9.094.313-.462 7.617-1.28 15.083-2.124 22.28 7.162-.686 13.51-.854 19.094-.592 8.052.376 14.563 1.59 19.72 3.312 9.995 3.34 15.3 10.668 18.092 16.313 4.096 8.263 4.948 18.18 5.063 30.093.09 9.358-.556 19.863-1.594 30.94-.005.017.007.043 0 .06-3.253 10.205-12.32 16.49-22.374 19.126-17.327 1.948-28.993.983-37.625-2.156-8.93-3.248-14.99-9.734-18.03-16.563h-.03c-3.664-8.236-4.488-18.278-4.626-30.406-.14-12.127.77-26.12 2.375-40.717 1.658-15.09 3.673-30.27 3.53-44.844l-.53-3.564c.157-.023.31-.04.467-.062-.178-4.943-.63-9.805-1.468-14.563 14.082-11.002 20.396-32.75 19.81-55.936zm132.345 143.594c-10.293 10.04-20.307 19.424-31.156 26.125 16.522 34.94 30.197 70.528 35.78 107.375l2.03 13.28-13.155-2.718c-36.956-7.69-72.802-19.764-106.625-38.594-5.232 9.03-13.202 17.718-23.844 28.094 55.5 27.003 116.156 41.43 180.156 47.78-2.68-62.727-20.228-122.558-43.187-181.342z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_arrowheads/thorned-arrow.svg b/static/_icons/_arrowheads/thorned-arrow.svg
new file mode 100644
index 00000000..d8eb33ba
--- /dev/null
+++ b/static/_icons/_arrowheads/thorned-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.03 19.875v19L75.657 95.5l-48.47 28.125 86.658 12.47-46.938 27.25 88.063 12.686-47.69 27.69 89.5 12.905 3.407 3.406-48.468 28.095 88.124 12.688-47.75 27.718 89.47 12.876.06.063.032-.032 23.125 3.312-28.718 28.72c31.304 19.57 71.2 39.18 100.594 46.874-7.61-31.554-26.336-68.222-46.906-100.563l-15.614 15.208c-16.25-17.246-.464-.61-19.855-20.863l-14.843-103.22-27.718 47.75-12.69-88.124-30.436 52.5-13.97-96.936-27.718 47.75L154.22 45.72l-32.44 55.905-81.75-81.75zM390.47 185.47l-8.064 36.81c35.057 67.22 63.472 144.408 63.47 215.47v9.344h-9.345c-62.652 0-144.955-28.477-211.78-61.906l-43.5 9.53c89.616 51.746 220.718 102.597 311.813 102.594.005-102.37-48.425-218.022-102.594-311.843zm-14.44 65.905-11.155 50.906c16.02 29.348 28.89 60.25 32.906 88.72l1.75 12.313-12.31-1.75c-25.628-3.615-57.698-16.82-87.658-32.75l-44.875 9.812c57.178 26.034 122.48 46.993 172.22 49.47-2.193-56.77-23.28-119.44-50.876-176.72z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/_brawlers.svg b/static/_icons/_character/_brawlers.svg
new file mode 100644
index 00000000..20549010
--- /dev/null
+++ b/static/_icons/_character/_brawlers.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476 476">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M54.9,7c-1,0-2,0-3,0C25.7,10.5,4.5,36.1,0,68.8v26.2c2.3,16.3,8.8,30.7,17.8,41.6-6.6,1.2-12.5,3.5-17.8,6.7v23.8c23,.4,43.3,14,57.3,34.3,14.2,20.6,22.7,48.3,22.7,78.7s-8.4,58.1-22.7,78.7c-14,20.3-34.3,33.9-57.3,34.3v8.6l5,67.4h7.7l108.2-161.8,1.1-28.2c.7-41.1,16.5-59.6,32-48,4.3,3.2,8.3,6,12.1,8.5l23.6-35.3c-21.6-17.4-59.1-43.2-90.7-68.7,10.9-13.6,17.9-32.6,17.9-53.6,0-41.5-26.4-75-58.9-75-1.1,0-2.1,0-3.1,0ZM421.1,7c-1,0-2,0-3.1,0-32.5,0-58.9,33.5-58.9,75s7,40,17.9,53.6c-31.6,25.4-69.1,51.3-90.7,68.7l23.6,35.3c4.1-2.7,8.2-5.6,12.1-8.5,15.5-11.6,31.3,6.9,32,48l1.1,28.2,108.2,161.8h7.7l5-67.4v-8.6c-23-.4-43.3-14-57.3-34.3-14.2-20.6-22.7-48.3-22.7-78.7s8.4-58.1,22.7-78.7c14-20.3,34.3-33.9,57.3-34.3v-23.8c-5.3-3.2-11.3-5.5-17.8-6.7,9-10.9,15.6-25.3,17.8-41.6v-26.2c-4.5-32.8-25.7-58.4-51.9-61.8-1,0-2-.1-3,0h0ZM130.8,21.8l40.1,110.2,47.3-31.7L130.8,21.8ZM345.2,21.8l-87.4,78.6,47.3,31.7,40.1-110.2ZM212.2,126l-16.6,11.1,222,332h24.1L212.2,126ZM263.8,126l-14.9,22.3,12,18,19.5-29.2-16.6-11.1ZM0,185.1v190c16-.4,30.9-9.9,42.5-26.6,11.8-17.1,19.5-41.4,19.5-68.4s-7.7-51.4-19.5-68.4c-11.6-16.7-26.5-26.2-42.5-26.6ZM476,185.1c-16,.4-30.9,9.9-42.5,26.6-11.8,17.1-19.5,41.4-19.5,68.4s7.7,51.4,19.5,68.4c11.6,16.7,26.5,26.2,42.5,26.6v-190ZM215.1,198.7L34.4,469.1h24.1l168.8-252.4-12-18ZM116.7,414.2l-36.7,54.9h34.5l2.1-54.9ZM359.3,414.2l2.1,54.9h34.6l-36.7-54.9Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/_icons/_character/angel-wings.svg b/static/_icons/_character/angel-wings.svg
new file mode 100644
index 00000000..35603c35
--- /dev/null
+++ b/static/_icons/_character/angel-wings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M92.438 28.97C75.263 47.722 60.826 69.69 49.593 94L167.5 204.656l-12.78 13.625L41.905 112.407c-9.19 24.257-15.377 50.455-18.156 77.844l116.156 58.72-8.437 16.686L22.312 210.47c-.963 24.45.777 49.666 5.437 75.155l100.53 8.313-1.53 18.625-94.97-7.844c.743 3.09 1.515 6.185 2.345 9.28 4.43 16.51 9.94 32.34 16.375 47.438 8.757-1.615 17.808-3.274 27.813-5.157 26.754-5.033 53.093-10.06 53.093-10.06l3.5 18.342s-26.368 5.054-53.156 10.094c-8.012 1.508-15.797 2.97-23.188 4.344 8.65 17.507 18.62 33.887 29.657 49l60.843-34.28L158.22 410l-58.407 32.938c12.202 14.79 25.482 28.186 39.624 40l17.157-20.344c1.38-20.537 4.963-37.725 14.375-51.72 6.338-9.425 15.44-16.826 27.155-21.937C189.86 376.115 183.3 361.62 179 345.594c-14.526-54.15.58-108.49 36.406-138.094L92.436 28.97zm330.843 0L300.314 207.5c35.826 29.604 50.964 83.943 36.437 138.094-4.26 15.877-10.768 30.237-18.938 42.97 12.345 5.384 21.554 13.502 27.5 23.655 7.81 13.333 10.495 29.117 11.407 47.467l19.592 23.25c14.14-11.813 27.423-25.208 39.625-40L357.5 410l9.188-16.28L427.53 428c11.04-15.117 21.006-31.49 29.658-49-7.4-1.374-15.207-2.836-23.22-4.344-26.787-5.04-53.156-10.094-53.156-10.094l3.5-18.343s26.372 5.027 53.125 10.06a8377.55 8377.55 0 0 0 27.813 5.19 356.66 356.66 0 0 0 16.375-47.47c.83-3.095 1.602-6.19 2.344-9.28L389 312.56l-1.53-18.625 100.53-8.31c4.66-25.49 6.37-50.705 5.406-75.156L384.25 265.655l-8.438-16.687L492 190.25c-2.783-27.4-8.956-53.61-18.156-77.875L361.03 218.28l-12.81-13.624L466.124 94c-11.236-24.31-25.668-46.277-42.844-65.03zM256.095 290.03c-10.452 0-20.172 5.342-27.78 15.126-7.61 9.784-12.658 23.895-12.658 39.688 0 15.793 5.047 29.903 12.656 39.687 7.61 9.785 17.33 15.158 27.782 15.158 10.452 0 20.14-5.373 27.75-15.157 7.61-9.783 12.656-23.893 12.656-39.686s-5.047-29.904-12.656-39.688c-7.61-9.784-17.298-15.125-27.75-15.125zm39.625 111.19c-10.36 11.14-24.236 18.342-39.626 18.342-14.957 0-28.49-6.798-38.75-17.406-2.662.66-5.147 1.384-7.438 2.188-11.464 4.02-18.388 9.46-23.437 16.97-9.19 13.66-11.542 37.05-11.907 69.248h163.812c-.135-31.55-1.154-55.19-9.188-68.906-4.42-7.55-10.596-12.946-21.562-17.062-3.467-1.302-7.433-2.437-11.906-3.375z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/backstab.svg b/static/_icons/_character/backstab.svg
new file mode 100644
index 00000000..b3e6984c
--- /dev/null
+++ b/static/_icons/_character/backstab.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m180.75 22.97-17.72 5.968 25.345 75.406 17.72-6.03-25.345-75.345zm73.906 78.56L149.97 137.157l10.155 29.875c8.316-9.75 17.78-17.498 28.125-23.374 7.232 27.494 16.666 54.12 27.813 79.906 13-5.56 26.423-10.197 39.906-13.718-6.967-26.727-15.822-53.187-26.345-79.313 11.295-1.24 23.1-.91 35.22.94l-10.19-29.94zm191.688 88.22c-19.464-.103-42.28 9.843-60.875 28.438a108.703 108.703 0 0 0-14.75 18.343c-28.734-17.313-69.766-18.263-110.22-7.968-.02-.093-.04-.187-.063-.28-12.357 3.134-24.726 7.248-36.687 12.312l.188.406c-87.328 37.506-151.902 123.99-48.032 202.063H46.03L17.25 495.03h279.875l-96.28-112.374c26.414-29.067 73.41-47.584 105.56-49.062C321.42 382.674 345.85 457.11 384.47 495h66.25c-46.88-50.664-83.318-118.734-89.19-195.75 1.76 3.523 4.022 6.77 6.845 9.594 20.312 20.312 60.906 12.657 90.656-17.094 29.752-29.75 37.407-70.344 17.095-90.656-7.617-7.617-18.103-11.282-29.78-11.344z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/battle-gear.svg b/static/_icons/_character/battle-gear.svg
new file mode 100644
index 00000000..da2a6720
--- /dev/null
+++ b/static/_icons/_character/battle-gear.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M262.406 17.188c-27.22 8.822-54.017 28.012-72.375 55.53 17.544 47.898 17.544 57.26 0 105.157 19.92 15.463 40.304 24.76 60.782 27.47-2.063-25.563-3.63-51.13 1.125-76.69-13.625-1.483-23.374-5.995-37-13.874V82.563c35.866 19.096 61.84 18.777 98.813 0v32.22c-13.364 6.497-21.886 11.16-35.25 13.218 3.614 25.568 3.48 51.15 1.375 76.72 18.644-3.265 37.236-12.113 55.5-26.845-14.353-47.897-14.355-57.26 0-105.156-16.982-28.008-47.453-46.633-72.97-55.532zm-129.594 8.218c-25.906 110.414-27.35 215.33-27.4 330.922-18.84-1.537-37.582-5.12-56.027-11.12v28.554h69.066c8.715 35.025 6.472 70.052-1.036 105.078h28.13c-7.195-35.026-8.237-70.053-.872-105.078h68.904v-28.555c-18.49 4.942-37.256 8.552-56.097 10.46.082-114.94 2.496-223.068-24.667-330.26zm89.47 202.375c0 117.27 25.517 233.342 120.155 257.97C446.62 464.716 462.72 345.374 462.72 227.78H222.28z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/bell-shield.svg b/static/_icons/_character/bell-shield.svg
new file mode 100644
index 00000000..53d8638b
--- /dev/null
+++ b/static/_icons/_character/bell-shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M214.4 76.46c0 16.75 5.8 31.54 14.3 41.84l10.2 12.2-15.6 2.9c-11.1 2.1-19.2 7.9-26.1 17.4-6.9 9.5-12.2 22.8-15.9 38-6.7 27.7-8.2 61.5-8.5 91.2h36.8l10 135.2c25.6 5.8 53 5.6 77.6 0l9-135.2h34.9c0-30.1-.4-64.3-6.5-92.2-3.3-15.4-8.4-28.6-15.4-38-7-9.4-15.5-15.2-27.9-17.1l-15.9-2.5 10-12.6c8.2-10.1 13.7-24.8 13.7-41.14 0-32.41-20.3-56.4-42.3-56.4-24.9-.32-41.9 33.01-42.4 56.4zm-28.2-52.41C109.1 77.81 19.73 258 19.73 425.3v.9c0 6.6 4.41 14.2 15.57 22.4 11.15 8.3 28.37 16.3 50.01 23.1 43.29 13.5 104.09 22.1 171.39 22.1 67.2 0 128-8.6 171.3-22.1 21.7-6.8 38.9-14.8 50-23.1 11.2-8.2 15.6-15.8 15.6-22.4 0-1.2-.1-2.4-.4-3.7-1-166.4-89.8-344.98-166.4-398.45C399.4 161 408.3 318.8 399.7 443.2c-33.4 13.4-85.1 22-143 22-58.2 0-110.1-8.7-143.5-22.2-13.49-173 12.9-342.3 73-418.95z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/bully-minion.svg b/static/_icons/_character/bully-minion.svg
new file mode 100644
index 00000000..0bab2bb7
--- /dev/null
+++ b/static/_icons/_character/bully-minion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M296.8 20.89c-14.1 0-27.1 7.44-37.1 20.63-10 13.19-16.5 32-16.5 52.96 0 20.92 6.5 39.82 16.5 52.92 10 13.2 23 20.7 37.1 20.7 14.1 0 27.1-7.5 37.1-20.7 8.9-11.7 15-28 16.3-46.2-5.4 0-11-1.3-15.9-5.5 1.8-11.28 7.2-18.49 13.2-24.96-2.8-11.27-7.6-21.27-13.6-29.22-10-13.19-23-20.63-37.1-20.63zm-63.6 31.27c-23 1.19-50 4.6-62.9 11.78C72.22 133.3 47.78 244.5 48.84 354c-5.75 36.3-6.05 50.8 8.94 82.4 11.42 24.1 44.22 13.3 51.92-8.9-20.31-20.2-22.43-26.3-21.88-53.5l19.38 28.5 12.5-8.4c-2.7-21.3-15.5-39.9-29.43-58.4 1.46-53.9 8.09-88.8 41.23-128.2l15 4.6-12.3 123.5c49.8 9.1 105.2 12.4 145.4 4.2l-3-95.3c37.2 35.4 50.7 86.2 75.9 129.5 4.1 19.7 13.8 42 24.3 46.3 35.2 14.5 61.6-34.6 34.4-55.2l55.6-187.9-27.3-101.63-57 288.03L325 232.8c3.4-19.4 5.6-39 6-57.8-10.1 7-21.7 11.1-34.2 11.1-20.5 0-38.8-11.1-51.4-27.8-12.7-16.7-20.2-39.2-20.2-63.82 0-15.22 2.9-29.61 8-42.32zm41.1 10.56c13 4.45 34.4 17.47 42.9 33.68-4.3 10.8-27.1 5.9-37.9-4.19zM133.5 353.7c10.4 42.7 10.1 82.1-1.6 116.4l19.6 21 22.6-10.3-3.3-62.2c32.9-34.4 74.2-51.6 105.6.5-25.6 22.8-23.3 25.3-31.7 57.3l94.3 1.1c-2.7-16.7-33.1-23.8-56-27.1l23.8-22.3-23.6-70.7c-43.7 9.2-99.1 5.5-149.7-3.7z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/burning-passion.svg b/static/_icons/_character/burning-passion.svg
new file mode 100644
index 00000000..ee60f1ea
--- /dev/null
+++ b/static/_icons/_character/burning-passion.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.844 18.75v2.72c64.27 50.956 95.31 115.847 89.437 179.25-10.604-55.003-41.756-104.8-89.436-138.907v23.53c55.244 45.177 82.41 114.314 72.97 185.25-.398 2.332-.76 4.664-1.064 7-.085.513-.16 1.02-.25 1.532h.063c-6.553 53.797 11.2 108.566 49.593 156.03 6.405 11.073 13.982 21.804 22.688 32.126C95.248 406.656 59.077 335.534 53.22 262.407c-11.112 83.002 15.11 163.21 90.686 230.22H188.5c.033.028.06.063.094.093h130.47c.032-.03.06-.065.092-.095h43.625c75.578-67.008 101.8-147.217 90.69-230.22-5.75 71.774-40.697 141.62-106.845 201.5 9.558-11.752 17.677-24.018 24.28-36.686 34.1-45.58 49.597-97.276 43.408-148.095-.004-.02.003-.042 0-.063-.405-3.31-.91-6.606-1.5-9.906-9.365-74.246 21.308-146.348 82.312-190.875V55.626c-52.75 34.073-87.21 86.497-98.53 144.844-5.85-64.208 26.103-129.92 92.124-181.126l-.47-.594h-28.063c-72.054 64.343-99.845 149.67-72.5 228.063a169.385 169.385 0 0 1 6.657 25.093c.005.043.026.083.03.125.44 3.435.933 6.876 1.532 10.314h.03c2.304 19.373 1.12 38.894-3.405 58.156-.044-28.376-6.778-57.15-20.436-85.063-40.06-81.862-20.768-171.425 52.406-236.687h-31.03c-50.145 46.623-66.324 91.56-57.44 151.094-21.488-59.165-19.415-103.58 20.69-151.094H152c40.104 47.514 42.177 91.93 20.688 151.094 8.885-59.535-7.266-104.47-57.407-151.094H83.157c73.174 65.262 92.465 154.825 52.406 236.688-14.898 30.448-21.52 61.915-20.25 92.78-6.146-21.747-8.016-43.91-5.406-65.874.6-3.436 1.123-6.88 1.563-10.313a169.445 169.445 0 0 1 6.686-25.217c27.346-78.394-.446-163.72-72.5-228.063H19.844zm234.25 19.688c16.4 0 27.024 6.18 34.72 16.593 7.693 10.413 11.967 25.726 11.967 43 0 18.664-6.886 38.56-15.967 49.5l-10.125 12.22 15.593 2.938c12.522 2.353 21.72 8.774 29.44 19 7.718 10.225 13.572 24.36 17.686 40.687 7.522 29.843 9.135 66.52 9.375 99.344h-23.31l-.814-70.5-18.687.218.967 86.437-7.75 111.625c47.057-43.67 71.99-94.302 76.157-146.313 8.212 61.338-11.15 120.606-67 170.125H295.53v.22h-32.937V333.81h-18.687v139.72h-31.282v-.22h-9.655c-55.852-49.52-75.244-108.787-67.032-170.125 4.13 51.56 28.66 101.776 74.937 145.188L203.78 345.72l2.595-94.126-18.688-.53-1.937 70.655h-24.375c.24-32.826 1.885-69.502 9.406-99.345 4.116-16.326 9.97-30.462 17.69-40.688 7.718-10.225 16.915-16.646 29.436-19l15.594-2.937-10.125-12.22c-9.083-10.94-15.97-30.835-15.97-49.5 0-17.274 4.276-32.587 11.97-43 7.694-10.41 18.32-16.593 34.72-16.593z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/character.svg b/static/_icons/_character/character.svg
new file mode 100644
index 00000000..551d8bb3
--- /dev/null
+++ b/static/_icons/_character/character.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255 45.4c-24.5 0-47 11.8-63.9 33.4-16.9 21.5-27.1 52.6-27.1 86.5 0 36 12.1 67.5 31 89.5l13.5 15-19.6 4.6c-52.3 11.9-77.4 36.9-91.75 75.2-13.7 35.7-15.6 84.8-16.1 143.3H431c-.2-58.7-.5-109.3-13-145.5-13.4-39.4-37.9-64.3-94-75.4l-19.9-3.7 12.9-15.7c17.7-21.9 28.8-52.6 28.8-87.5 0-33.9-10.3-64.9-27.2-86.3-16.8-21.7-39.3-33.6-63.6-33.4z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/cloak-dagger.svg b/static/_icons/_character/cloak-dagger.svg
new file mode 100644
index 00000000..666ad31c
--- /dev/null
+++ b/static/_icons/_character/cloak-dagger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M254.07 19.707c-56.303 28.998-106.297 107.317-122.64 168.707 32.445 2.11 58.63 12.963 78.638 30.848l9.334-10.198c-13.336-13.056-30.596-23.9-52.994-34.707 12.68-31.542 32.01-79.29 56.598-82.07 9.62-1.088 19.92 4.722 31.13 21.068 35.08-58.334 68.394 18.705 87.727 61.002-21.94 11.897-39.132 22.82-52.63 36.024l8.68 9.76c19.68-17.732 45.72-29.358 78.55-31.673C358.24 127.335 311.515 50.14 254.07 19.707zM219.617 144.57c-8.894 0-16.103 3.952-16.103 8.826 0 4.875 7.21 8.827 16.103 8.827 8.894 0 16.106-3.95 16.106-8.827 0-4.874-7.212-8.826-16.106-8.826zm68.965 0c-8.894 0-16.105 3.952-16.105 8.826 0 4.875 7.21 8.827 16.105 8.827 8.894 0 16.106-3.95 16.106-8.827 0-4.874-7.212-8.826-16.106-8.826zm-118.894 70.88a233.216 233.216 0 0 0-6.444 11.52c-25.587 48.98-43.26 123.643-43.896 223.48 32.776 18.89 64.322 31.324 95.707 36.988-35.5-24.36-60.375-80.893-60.375-146.754 0-45.97 12.12-87.39 31.51-116.506a96.185 96.185 0 0 0-16.502-8.727zm168.933.35a98.526 98.526 0 0 0-16.298 8.764c19.24 29.095 31.254 70.354 31.254 116.12 0 65.82-24.844 122.322-60.306 146.707 30.88-5.598 62.44-17.812 95.656-36.947-.638-99.57-18.31-174.163-43.9-223.177a233.816 233.816 0 0 0-6.405-11.467zm-97.665 23.61c7.026 22.543 9.128 45.086.98 67.63h-41.552v18.513c10.057-3.24 20.25-5.39 30.502-6.594.066 50.215 1.313 96.574 19.82 145.435l4.193 11.074 4.485-10.962c19.48-47.615 18.045-95.297 17.933-145.024 10.257 1.333 20.463 3.4 30.545 6.07v-18.515h-41.374c-6.888-22.544-5.932-45.087.803-67.63h-26.335z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/cloaked-figure-on-horseback.svg b/static/_icons/_character/cloaked-figure-on-horseback.svg
new file mode 100644
index 00000000..564442b9
--- /dev/null
+++ b/static/_icons/_character/cloaked-figure-on-horseback.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M225.6 16.72S122.1 45.53 104.5 169.7l48.9-29.8 8.6 21.5S-47.78 300.6 46.01 449.3c9.45-61.8 76.09-77.7 85.99-142.2 12.5 39-28.4 98-28.4 98s103.3-44.1 82.6-148.6c35 25.2 17.1 106.2 17.1 106.2l45.2-96.3S113.7 130.9 231.8 39.81c60.1 45.37-12.3 126.59 37 180.49l5.8-14.9c-23.9-27.5 47.4-125.86-49-188.68zM353.6 96l3.9 25.2-55-23.2 16.4 51.4-62.1 158.3c9.7 14.9 55 77.1 137.6 83.2 4.4-40.3-1.5-90.7-32.3-148.5 39 38.1 51.3 2.6 109.5 59.3l7.4-16-121.7-77.8-13.1-70.6 6.8-3.5c13.6-7.2 27.5-11.8 41.7-13.1L353.6 96zm48.5 45.3c-11.8-.2-23.3 2.5-34.6 7.6l.7 3.5 55.2 44.9 10.9 35.1 53.4 34.2 2.4-5.1-66.5-116.4c-7.3-2.4-14.4-3.7-21.5-3.8zm-28 42.7 2 11.2 31 19.8-1.7-5.5-31.3-25.5zM247.7 330.7 183.1 495h169.2s27.6-30 38.8-83c-75.9-7-123.3-55.5-143.4-81.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/confrontation.svg b/static/_icons/_character/confrontation.svg
new file mode 100644
index 00000000..4e9d77cd
--- /dev/null
+++ b/static/_icons/_character/confrontation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18 18v29.75l36.09 31.578c13.506-3.722 27.044-6.596 40.193-8.146L47.75 18zm89.25 0 34.172 54.676c19.488 4.303 38.114 12.753 55.457 25.668L166.75 18zm120.656 0 28.092 129.424S278.068 45.746 284.092 18zm117.344 0-30.13 80.344c17.344-12.915 35.97-21.365 55.458-25.668L404.75 18zm119 0-46.533 53.182c13.15 1.55 26.687 4.424 40.193 8.146L494 47.75V18zM118.736 88.04a126.46 126.46 0 0 0-4.525.003c-28.57.524-63.666 10.44-96.21 22.7v143.114c2.86-7.516 7.632-14.432 13.44-20.22 7.7-7.675 17.647-13.693 28.706-14.117a32.746 32.746 0 0 1 4.805.171c7.908.875 13.682 5.74 18.136 10.994 4.454 5.252 7.902 11.385 10.74 17.312 5.676 11.853 8.844 23.21 8.844 23.21l-17.326 4.878s-2.89-10.16-7.754-20.315c-2.432-5.078-5.373-10.072-8.233-13.444-2.86-3.372-5.325-4.627-6.382-4.744-5.24-.58-12.662 2.66-18.83 8.805-6.165 6.145-10.49 14.778-10.98 20.923-1.776 22.332 7.533 36.257 18.413 45.745 5.44 4.743 11.306 8.183 16.06 10.357 2.375 1.087 4.48 1.858 6.012 2.32 1.534.462 2.868.52 1.875.512l-.146 18c-2.76-.022-4.48-.542-6.92-1.277-2.44-.736-5.233-1.78-8.308-3.186a85.089 85.089 0 0 1-20.402-13.16c-8.955-7.808-17.41-18.972-21.75-33.386V427.39c24.102 26.71 51.126 51.064 81.078 61.965 12.463 4.536 28.87 3.676 40.942-2.03.215-.717.515-2.225.86-4.427.74-4.75 2.008-13.206 9.718-18.332 6.447-4.286 12.678-4.82 15.756-5.78-3.493-7.43-10.868-26.54-6.184-48.735 3.417-16.19 15.896-29.056 30.18-35.605 7.14-3.274 14.995-4.98 22.87-3.648 3.937.667 7.822 2.23 11.307 4.615 3.25-4.3 6.502-8.302 8.506-11.1l3.62-5.054 4.005 1.594c4.42 1.172 6.194 1.58 6.215 1.703.18-.15.412-.382.828-.793.182-.354 2.685-9.4.513-20.692-2.187-11.373-5.665-25.125-15.215-37.41-5.235.462-10.274.937-14.357 1.643-5.597.966-9.288 2.814-9.607 3.125l-12.566-12.887c3.454-3.367 7.37-5.176 11.527-6.354-5.143-1.766-10.087-2.734-15.598-2.49l-.792-17.983c15.547-.686 27.433 5.062 39.65 10.902-7.522-7.768-13.75-15.06-19.606-20.476-7.838-7.25-14.08-10.976-23.085-10.95-1.806.007-4.95 2.097-9.334 6.88-4.386 4.784-8.75 11.637-17.673 14.957l-6.278-16.87c1.232-.46 5.672-4.788 10.68-10.25 5.006-5.463 11.842-12.683 22.548-12.716 14.558-.043 26.002 7.077 35.36 15.732 5.22 4.825 10.085 10.18 15.134 15.62 5.293-23.545 9.614-46.54 8.076-69.415-31.038-64.935-71.1-95.532-115.53-103.06-4.063-.613-8.346-.945-12.812-1.026zm274.528 0c-4.466.082-8.75.414-12.813 1.026-44.428 7.53-84.49 38.126-115.528 103.06-1.538 22.876 2.783 45.87 8.076 69.417 5.05-5.44 9.915-10.796 15.133-15.62 9.36-8.656 20.804-15.776 35.362-15.732 10.706.034 17.542 7.254 22.55 12.716 5.006 5.463 9.446 9.79 10.68 10.25l-6.28 16.87c-8.92-3.32-13.286-10.172-17.67-14.956-4.385-4.783-7.53-6.873-9.334-6.88-9.006-.026-15.248 3.7-23.086 10.95-5.856 5.414-12.084 12.707-19.606 20.475 12.217-5.84 24.103-11.588 39.65-10.902l-.792 17.982c-5.51-.243-10.455.725-15.598 2.49 4.157 1.18 8.073 2.988 11.527 6.356l-12.566 12.888c-.32-.31-4.01-2.158-9.608-3.125-4.084-.705-9.123-1.18-14.358-1.643-9.55 12.285-13.028 26.037-15.215 37.41-2.172 11.293.33 20.338.512 20.692.415.41.646.642.827.793.02-.122 1.794-.53 6.215-1.703l4.006-1.594 3.62 5.053c2.003 2.8 5.255 6.802 8.505 11.102 3.485-2.384 7.37-3.948 11.308-4.615 7.875-1.333 15.73.374 22.87 3.648 14.284 6.55 26.763 19.415 30.18 35.606 4.684 22.195-2.69 41.306-6.184 48.735 3.078.96 9.31 1.495 15.756 5.78 7.71 5.127 8.978 13.582 9.72 18.333.343 2.202.643 3.71.858 4.428 12.073 5.705 28.48 6.565 40.942 2.03 29.952-10.902 56.976-35.257 81.078-61.965v-134.16c-4.34 14.414-12.795 25.578-21.75 33.387a85.108 85.108 0 0 1-20.402 13.16c-3.075 1.407-5.867 2.45-8.307 3.187-2.44.735-4.16 1.255-6.92 1.277l-.145-18c-.993.008.34-.05 1.875-.512 1.533-.462 3.637-1.233 6.013-2.32 4.753-2.174 10.62-5.613 16.06-10.357 10.88-9.488 20.188-23.413 18.41-45.744-.488-6.145-4.813-14.778-10.98-20.923-6.166-6.146-13.59-9.384-18.828-8.805-1.057.117-3.523 1.372-6.382 4.744-2.86 3.372-5.8 8.366-8.233 13.444-4.863 10.155-7.754 20.314-7.754 20.314l-17.326-4.88s3.168-11.355 8.844-23.208c2.838-5.927 6.286-12.06 10.74-17.312 4.454-5.253 10.228-10.12 18.135-10.993a33.075 33.075 0 0 1 4.804-.17c11.06.424 21.006 6.443 28.707 14.117 5.808 5.788 10.58 12.705 13.44 20.22V110.743c-32.544-12.26-67.64-22.175-96.21-22.7-1.53-.027-3.038-.028-4.526 0zM207.568 388.366c-2.844.06-6.23.844-9.716 2.442-.61.28-1.218.587-1.823.914l15.636 9.07s2.62-4.082 5.238-8.237c-1.925-2.575-3.95-3.546-6.69-4.01a14.143 14.143 0 0 0-2.646-.178zm96.864 0c-.948-.02-1.836.04-2.647.178-2.738.464-4.764 1.435-6.69 4.01 2.62 4.155 5.24 8.238 5.24 8.238l15.636-9.07a30.973 30.973 0 0 0-1.822-.913c-3.485-1.598-6.872-2.382-9.716-2.442zM176.795 427.13c.727 14.314 6.52 25.452 6.945 26.253 4.71-1.988 8.2-3.552 8.26-3.867.104-.54-7.425-11.492-15.205-22.387zm158.41 0c-7.78 10.894-15.31 21.847-15.205 22.386.06.315 3.55 1.88 8.26 3.867.425-.8 6.218-11.94 6.945-26.254zM18 454.503V494h49.19C49.272 483.442 32.927 469.57 18 454.504zm476 0c-14.928 15.066-31.273 28.938-49.19 39.496H494z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/conqueror.svg b/static/_icons/_character/conqueror.svg
new file mode 100644
index 00000000..ac58880a
--- /dev/null
+++ b/static/_icons/_character/conqueror.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m145.896 18.31-21.51 3.016 50.184 404.992c7.915-.592 16-1.099 24.248-1.515l-30.935-237.614c25.61-7.714 50.943-16.448 73.25-36.277 14.77 90.454-1.795 182.196-2.377 272.658 12.68-.146 26.55-.009 37.9.293-.566-6.92-7.696-101.44 24.094-130.373 18.74-17.055 75.734-6.549 75.734-6.549 13.115 21.985 13.064 36.927 8.98 62.612l31.163 8.045c2.469-14.451 1.707-51.72-7.055-96.522-1.229-2.948-10.45-4.763-18.036-8.04-.183-30.68 6.268-60.047.273-90.727-14.382-11.332-45.991-20.998-70.762-34.35l-5.58-.762c-7.236 7.58-16.643 12.56-27.188 12.56-15.213-2.301-26.7-10.05-33.625-20.849l-12.734-1.736c-23.748 18.203-50.06 31.28-77.733 41.635zM288.28 36.94c-6.21 0-12.37 3.612-17.55 11.154-5.181 7.542-8.762 18.73-8.762 31.256 0 12.525 3.58 23.711 8.762 31.254 5.18 7.542 11.34 11.154 17.55 11.154 6.211 0 12.372-3.612 17.553-11.154 5.18-7.543 8.76-18.729 8.76-31.254 0-12.526-3.58-23.714-8.76-31.256-5.18-7.542-11.342-11.155-17.553-11.155zM109.873 54.4c-.932 2.868-1.81 5.768-2.848 8.555-3.482 9.362-7.548 18.137-12.91 25.352-5.361 7.214-12.501 13.287-21.787 14.603-13.724 1.946-21 6.09-25.857 11.809-4.858 5.72-7.681 14.024-9.352 25.42-2.552 17.412-.925 39.067 1.97 61.132 1.418-4.107 2.921-8.171 4.733-12.01 4.205-8.905 9.672-17.033 17.334-23.017 7.663-5.984 17.6-9.48 28.815-9.146 7.657.228 13.652-4.943 18.765-14.57 5.056-9.52 7.849-22.506 7.909-31.97zm213.871 106.57c13.772 8.366 27.424 15.481 44.86 16.52 6.827 23.86 1.635 49.908.83 73.769-22.109-4.356-43.114-9.48-45.623-23.147 2.972-34.461 3.447-49.16-.067-67.142zm48.836 203.847c-4.585 21.75-13.021 42.473-24.904 63.268 36.88 2.608 75.117 5.883 112.222 15.611-.06-19.97-6.113-40.476-16.906-60.699zm-127.242 76.692c-97.482.507-174.844 14.648-227.338 28.416V491h476v-18.94c-58.673-14.917-146.115-31.086-248.662-30.552z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/contortionist.svg b/static/_icons/_character/contortionist.svg
new file mode 100644
index 00000000..174724fb
--- /dev/null
+++ b/static/_icons/_character/contortionist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M290.6 36.6c-6.1 1.55-42 10.9-86.3 28.22-48.2 18.84-101.8 46.78-122.69 76.68-26.68 38-36.09 98.3-16.68 139.4 8.38 17.7 37.77 37.9 65.27 51.9 27.6 14 52.6 22.6 52.6 22.6l6.2 2.1-.1 6.6c-.6 38.4-1.9 73.8-2.7 111.3H257c-.2-7.7-27.4-16.9-46-23.8l1.4-6.7c6.7-33.1 9.9-73.1 12.4-110.5-6.3-.6-12.5-2.4-18.3-5.3-12.6-6.2-23.5-17.4-30.6-32-.6-1.3-1.2-2.7-1.8-4-10.1-2.9-19-6.4-26.9-10.8-20.9-11.6-34.4-29.4-45.5-54.6l-3.69-8.5 8.59-3.4c15.7-6.4 25.1-11.3 32.8-20.1 7.6-8.9 14.1-22.8 21.3-48.1l1.2-3.9 117.9-56.4 102 71.9c-2.4 7.9-5.4 15.6-3.6 23.2 12 6.9 35.8 13.7 56.1 18.1 8.9 1.9 16.6 3.3 23.1 4.4-4.4-10-10.8-17.8-19.1-25.3-11.7-10.4-27.2-19.8-44.5-31.2l-.9-.6-.8-.9c-35.3-39.5-65.9-80.67-101.5-110.3zm-5.3 76.7c16.9 21.8 35.2 44.4 45.8 70.6l1.8 4.4c-3.9 6.6-8.5 12-9.7 19.3 14.5 9 37.2 16.1 56.4 20.5 7.5 1.7 14.2 3 19.9 4-3.1-4.6-7.1-9.7-12.1-14.7-10.3-10.5-23.7-21-36.1-29.2l-3.8-2.4-.3-4.5c-.8-11.2-4.4-21.3-9.4-31zm-74.4 121.5c-3.5 0-6.9.8-10 2.3-7 3.4-11.8 10.3-13.7 19.7-1.9 9.5-.6 21.2 4.8 32.4 5.5 11.3 13.9 19.5 22.6 23.9 8.6 4.2 16.9 4.7 24 1.3 7-3.4 11.8-10.3 13.8-19.7 1.9-9.5.5-21.2-4.9-32.5-5.5-11.2-13.9-19.5-22.5-23.8-4.8-2.4-9.6-3.6-14.1-3.6z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/convince.svg b/static/_icons/_character/convince.svg
new file mode 100644
index 00000000..d93c41e0
--- /dev/null
+++ b/static/_icons/_character/convince.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M18 18v207.053c19.25 18.903 53.07 37.274 84.973 47.933 28.11 9.392 46.653 12.82 66.886 5.338 15.865-5.866 34.172-10.222 46.44-18.12 12.266-7.896 19.334-16.98 15.82-39.366l-.036-.233-.023-.234c-.327-3.16-.745-6.478-1.208-9.866-.18.048-.353.1-.536.146-10.828 2.783-26.286 4.28-45.757.356-1.35.83-2.715 1.64-4.107 2.41l-7.877 4.355-8.71-15.75 7.874-4.356c19.52-10.796 36.083-31.545 46.055-47.434-.362-1.25-.745-2.51-1.12-3.765-12.854 8.896-31.028 13.176-52.173 4.945l-8.387-3.265 6.53-16.774 8.386 3.265c19.01 7.4 29.868 2.503 39.136-5.938 7.444-6.78 12.796-16.308 16.33-23.72C200.162 74.25 174.97 45.817 150.072 18zm184.098 0c9.883 14.11 23.515 29.61 39.943 44.97a233.856 233.856 0 0 1 7.226-2.462c12.116-3.887 25.88-7.772 38.888-7.238 4.336.177 8.587.846 12.664 2.17l8.56 2.78-5.556 17.118-8.56-2.777c-7.706-2.5-25.637.32-40.498 5.086-8.86 2.842-16.452 5.906-21.157 7.924 3.427 3.978 6.868 7.985 10.336 12.045l3.65 4.27-2.234 5.154c-1.224 2.822-2.9 6.616-5.104 10.833 10.92 13.352 26.323 27.074 37.03 34.844 17.4 12.628 42.365 27.795 61.884 31.898 9.76 2.052 17.528 1.385 23.1-1.996 5.572-3.382 10.426-9.972 12.86-24.143l1.524-8.872 17.74 3.05-1.525 8.868c-.04.223-.086.436-.126.657 31.894 13.803 62.577 22.355 87.45 22.82 4.85.09 9.452-.125 13.806-.633V106.63c-8.336 6.688-18.94 14.612-32.676 24.112l-10.24-14.803C472.05 101.436 485.12 90.98 494 82.956V18zm-140.23 1.408c11.063.573 118.618 57.055 88.53 46.65-1.587-.548-9.626-1.652-20.597-2.624a45.863 45.863 0 0 1 5.403 17.86c.696 7.81-.678 14.718-4.043 19.93-3.365 5.21-9.344 8.953-17.078 7.756-7.734-1.196-14.553-6.918-18.953-13.33-4.4-6.41-7.063-13.943-7.76-21.752-.393-4.423-.122-8.556.798-12.255-22.742.214-43.964 2.89-48.23 11.275L61.11 19.53c.148-.1.404-.14.76-.122zm48.243 45.004c-.487-.075-1.508.018-2.813 2.04-1.305 2.02-2.272 5.74-1.87 10.237.4 4.497 2.065 8.626 3.772 11.113 1.706 2.487 2.772 2.905 3.26 2.98.49.076 1.512-.02 2.817-2.04 1.305-2.022 2.272-5.74 1.87-10.24-.4-4.497-2.065-8.623-3.772-11.11-1.707-2.487-2.775-2.905-3.264-2.98zm189.033 24.102c.576.01 1.155.03 1.736.064 18.6 1.05 37.856 12.446 57.638 33.215l-13.036 12.414c-17.96-18.858-33.937-27-45.617-27.658-11.68-.66-20.613 4.674-28.44 18.493l-15.66-8.87c9.8-17.305 25.495-27.965 43.378-27.66zm-75.247 84.984c-5.424 7.34-11.826 14.886-19.17 21.854 8.736.288 15.768-.762 21.112-2.135.762-.196 1.43-.396 2.115-.596a430.815 430.815 0 0 0-4.057-19.122zm163.516 6.063c-2.47 5.277-5.564 9.725-9.225 13.303 31.756 24.712 60.36 54.72 77.924 91.237l.894 1.857c30.018 39.74 39.6 93.688 31.875 140.422l-.427 2.585-1.75 1.95c-27.812 31.048-73.822 47.28-115.084 53.597-20.632 3.157-40.1 3.763-55.972 1.95-15.872-1.815-28.883-4.708-35.914-15.536l-1.035-1.594-.302-1.875c-1.843-11.445-2.61-22.47-3.927-33.252-17.095 19.167-29.632 38.814-36.216 59.795H494V202.477c-4.6.443-9.322.61-14.143.52-28.046-.525-59.884-9.43-92.445-23.436zM18 248.92v50.342c9.123 6.8 33.478 24.938 62.78 46.496 17.705 13.026 35.537 26.052 49.144 35.785 6.146 4.396 11.06 7.835 15.04 10.557.42-1.207.71-1.858 1.173-3.27 2.58-7.876 5.727-18.634 8.748-29.394a2017.267 2017.267 0 0 0 10.013-37.067c-1.166-7.074-1.57-14.938-1.146-23.665-21.102 4.21-42.043-.48-66.484-8.646-28.234-9.435-57.335-23.897-79.268-41.14zm408.607 31.94c-.558-.018-1.087-.027-1.503.005-4.856.37-6.203 2.073-8.16 4.252-1.303 1.453-2.563 3.47-4.815 5.963-2.253 2.492-6.56 5.677-11.724 5.91-4.653.21-8.815-1.813-11.35-3.65-2.534-1.837-4.092-3.443-5.46-4.496-2.736-2.106-3.71-3.362-11.24-1.64-3.17.724-3.98 2.038-5.827 5.558-.923 1.76-1.817 3.907-3.128 6.324-1.31 2.417-3.092 5.53-7.095 7.713-2.902 1.58-5.935 1.408-7.737 1.026-1.8-.38-2.926-.905-3.955-1.365-2.057-.92-3.683-1.764-5.547-2.413-3.728-1.3-7.94-2.22-15.793.848-6.544 2.557-6.794 4.043-7.48 5.79-.343.874-.54 1.99-1.217 4.106-.677 2.117-2.908 6.577-7.324 8.29-3.775 1.464-7.653 1.175-10.342.604-2.69-.572-4.63-1.286-6.558-1.766-3.856-.96-7.658-1.625-15.57.95-4.61 1.5-9.89 8.046-12.335 16.86-2.4 8.648-1.578 18.425 1.157 23.342 30.118 34.035 28.01 69.583 32.198 98.74 2.26 1.604 9.918 5.4 21.886 6.766 5.613.642 11.98.935 18.855.864 1.086-34.234-7.61-76.94-20.19-104.827l16.405-7.404c13.87 30.74 22.888 73.896 21.845 111.273 4.66-.436 9.442-1.022 14.29-1.764a246.99 246.99 0 0 0 28.46-6.107c-6.532-36.43-12.015-75.947-31.57-109.668l15.57-9.03c21.366 36.845 27.08 77.85 33.293 113.18 8.396-3.052 16.54-6.588 24.184-10.607-1.915-42.748-7.087-79.433-24.318-106.14l15.125-9.76c18.78 29.108 24.406 65.356 26.676 105.17 5.61-4.036 10.723-8.41 15.184-13.115 7.132-48.38-6.747-105.394-43.217-139.723-.53-.01-1.117-.04-1.676-.06zM18 321.7V494h201.545c7.798-28.846 25.177-54.816 48.295-79.12l-64.578-39.228-.065-.04c-9.837-6.207-19.81-13.738-27.28-24.73-1.19 4.364-2.42 8.847-3.702 13.42-3.056 10.885-6.236 21.773-8.973 30.132-1.368 4.18-2.605 7.693-3.787 10.5-.59 1.403-1.124 2.597-1.935 3.93-.406.668-.84 1.376-1.8 2.355-.963.978-2.718 2.94-6.853 2.94-2.477 0-2.973-.462-3.56-.69-.588-.23-.965-.42-1.33-.607a31.666 31.666 0 0 1-2.098-1.2c-1.464-.898-3.24-2.067-5.405-3.534-4.33-2.936-10.154-7.034-17.022-11.946-13.735-9.825-31.6-22.878-49.34-35.928A12902.164 12902.164 0 0 1 18 321.7z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/deadly-strike.svg b/static/_icons/_character/deadly-strike.svg
new file mode 100644
index 00000000..f139c4b3
--- /dev/null
+++ b/static/_icons/_character/deadly-strike.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m196.38 16.29 12.018 214.677-69.382-213.75h-19.65l70.52 217.25c-17.16-18.22-34.434-44.74-52.243-80.246 18.864 62.058 35.573 139.067 40.552 192.04L19.38 62.393v38.277l144.89 258.98c-33.493-21.316-67.86-56.375-97.918-92.87 26.712 52.73 55.26 104.847 73.076 160.54L19.378 289.453v28.46l107.997 124.026C99 434.69 70.625 422.05 42.25 408.165c38.03 26.607 62.036 50.897 84.234 85.82H230.84l-6.785-91.082H197.77c0-44.845 2.87-108.728 40.767-115.86-6.993-8.433-11.533-20.27-11.533-33.523 0-23.93 14.228-43.758 32.45-46.127h.005c.303-.038.61-.056.923-.063.934-.02 1.895.063 2.83.063 19.957 0 36.205 20.602 36.205 46.128 0 12.928-4.304 24.595-10.996 32.99 41.4 6.42 40.496 71.424 40.496 116.394h-24.94l-6.003 91.082h90.96c19.418-30.77 60.864-56.727 96.524-75.234-38.585 10.67-75.927 17.602-109.66 21.02l117.97-86.97v-23.218l-125.78 92.728c24.4-49.363 55.902-88.075 90.164-122.648-40.56 27.323-73.25 37.7-107.027 43.785L493.77 158.7v-30.58L339.297 328.19c1.19-51.24 16.946-114.427 39.156-171.047-17.383 25.054-33.876 46.073-49.713 62.742l56.406-202.668h-19.398l-53.412 191.906 3.832-192.834h-119.79z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/djinn.svg b/static/_icons/_character/djinn.svg
new file mode 100644
index 00000000..9e46cc5a
--- /dev/null
+++ b/static/_icons/_character/djinn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M264.9 18.83c-6.6.13-12 2.13-15.7 5.89-.3.25-.4.18-.4 1.5s.4 3.82 1.7 6.97c2.6 6.3 8.4 14.98 16.2 23.97 13.8 16.04 34 33.06 53.4 44.94 6.7-11.59 8-22.39 6.1-32.55-2.3-12.14-9.6-23.58-19.5-32.53-9.8-8.94-22.1-15.21-32.9-17.33-2.7-.53-5.2-.76-7.6-.86-.5-.01-.9-.01-1.3 0zm-34 6.23c-10 2.63-20.9 8.52-29.8 16.6-9.9 8.94-17.2 20.39-19.5 32.52-1.9 10.15-.6 20.94 6.1 32.52 19.4-11.86 39.6-28.87 53.4-44.9 1.1-1.28 2.2-2.55 3.2-3.81-4.4-6.1-8-12.09-10.4-17.94-1.9-4.66-3.2-9.29-3.1-14.15 0-.28 0-.56.1-.84zm25 47.17c-.4.45-.7.89-1.1 1.34C240.4 90.16 221 107.1 201 119.9v.1c0 31.8 20.2 57.3 46 62.1V157l-19.8 7.4-6.4-16.8 35.2-13.2 35.2 13.2-6.4 16.8L265 157v25.1c25.8-4.8 46-30.3 46-62.1v-2.1c-20.1-12.2-40-28.99-55.1-45.67zM201.7 174.1C119 190.9 89.15 244.9 89.02 271.8c.19 4.3 1.97 6.8 8.92 9.7 7.06 2.9 18.86 4.6 33.96 3.6 26.1-1.7 61.9-10.7 101.8-28.5-9.4-2.7-20.2-4.5-30.6-5.7C185 249 168 249 160 249v-18c8 0 25.7 0 45 2.1 15.2 1.6 31.4 4.3 45.2 10l-21.6-48c-10.4-4.7-19.5-11.9-26.9-21zm108.3.4c-7.4 9-16.5 16.1-26.9 20.7l-6.8 15.3c14.6-2.5 30.1-4.1 45.5-4.4 14.2-.2 28.3.7 41.8 3 10.6 1.9 20.8 4.8 30.2 8.9-2.4-2.4-4.9-4.8-7.7-7.2-17.8-15.2-42.7-29-76.1-36.3zm14.8 49.7c-19.5.1-39.5 2.6-57.5 6.4l-7.6 17.1c.1.1.2.1.3.2 47.2 23.6 90.5 35.6 120.9 37.6 15.1 1 27-.6 33.9-3.5 6.4-2.7 8.1-4.9 8.2-9-7.4-27.1-30.9-40.6-62.6-46.1-10-1.8-20.7-2.6-31.7-2.7h-3.9zM256 266c-35.5 17.3-68.6 28.4-96.7 33.7 8.2 11.6 14.7 22.6 19.5 33 5 10.8 8.1 21.1 9.3 30.9 59.6 22 110.6 9.3 151.7-8.4 5.1-16.5 9.4-34.9 12.9-55.3-28.2-5.5-61.4-16.7-96.7-33.9zm76.2 111.5c-39.9 14.6-89.2 23.2-144.3 4.9-.9 5-2.4 9.8-4.5 14.3-8.6 18.2-26.8 31.1-52 40.5-18.4 6.9-40.92 12.1-67.37 15.9 56.47 25.2 118.27 42.7 169.57 28.2 29.9-8.4 56.7-27.2 78.7-62.8 7.3-11.7 13.9-25.4 19.9-41z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/embrassed-energy.svg b/static/_icons/_character/embrassed-energy.svg
new file mode 100644
index 00000000..e4fe0c0d
--- /dev/null
+++ b/static/_icons/_character/embrassed-energy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M179.813 20.72v81.25L135.78 75.624l17.564 46.938-115.656-20.938 84.718 49.906H20v27.345l110.47 14.875 96.593-29.188c-11.303-11.87-18.594-30.743-18.594-52 0-35.926 20.87-65.062 46.624-65.062 25.753 0 46.625 29.136 46.625 65.063 0 20.847-7.038 39.375-17.97 51.28l99.03 29.907 112.5-15.156V151.53H394.19l84.718-49.905-120.437 21.78 17.874-47.718-48.656 29.126V20.72H179.813zM495.28 223.343l-112.5 22.437-55.405-13.124-28.03 118.313 16.592 145h51.688L329.25 351.22l46.53 27.842-21.31-56.937 124.436 22.5-91.125-53.688h107.5v-67.593zM20 223.75v67.188h108.813l-91.125 53.687L157.31 322.97 136.345 379l38.47-23-28.595 139.97h48.155l12.905-144.41-21.685-118.84-55.125 13.06L20 223.75z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/face-to-face.svg b/static/_icons/_character/face-to-face.svg
new file mode 100644
index 00000000..27870168
--- /dev/null
+++ b/static/_icons/_character/face-to-face.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M392 60.48c-22.1 0-42.1 23.8-42.1 55.62 0 31.9 20 55.7 42.1 55.7s42.1-23.8 42.1-55.7c0-31.82-20-55.62-42.1-55.62zm-271.9.1c-22.14 0-42.19 23.8-42.19 55.52 0 31.9 20.05 55.7 42.19 55.7 22.2 0 42.2-23.8 42.2-55.7 0-31.72-20-55.52-42.2-55.52zM83.01 176.5c-25 8-52.6 33.5-59.4 61.9l-3.6 79.7c-.1 11.6 13.1 28.8 36.8 23.1 51.99-12.4 79.09-26 118.39-41.5l-4.9-23.5c-34.6 12.2-74.24 28-114.29 31.9l1.1-79.9 18 .2-.7 58.1c26.79-4.9 63.49-18 92.19-28l-6.3-30.6 17.6-3.6c7.2 34.8 12.9 62.2 20.1 97.9-9.3-.8-16.6-1.4-25.7-2-17.4 7.1-33.1 13.9-50.7 20.5 22.1 4.3 43.6 8 61 8.4 14.9.3 26.1-2.3 31.6-6.8s8.3-11.3 5.1-27.2c-6.7-33.1-11.7-65.3-20.9-90.1-9.2-25-21.5-41.5-44-48.2-9.5 8.2-21.3 13-34.3 13-14.4-.2-22.84-4.5-37.09-13.3zm345.99 0c-14.2 8.8-22.6 13.1-37 13.3-12.9 0-24.7-4.8-34.2-13-22.5 6.7-34.8 23.2-44 48.2-9.2 24.8-14.2 57-20.9 90.1-3.2 15.9-.4 22.7 5.1 27.2s16.7 7.1 31.6 6.8c17.4-.4 38.9-4.1 61-8.4-17.6-6.6-33.3-13.4-50.7-20.5-9.1.6-16.4 1.2-25.7 2 7.2-35.7 12.9-63.1 20.1-97.9l17.6 3.6-6.3 30.6c28.7 10.1 65.3 23.2 92 28.1l-.7-58.1 18-.2 1.1 79.9c-40-3.9-79.5-19.7-114.1-31.9l-4.9 23.5c39.3 15.5 66.3 29.1 118.2 41.5 23.7 5.7 36.9-11.5 36.8-23.1l-3.6-79.7c-6.8-28.5-34.4-54-59.4-62zM86.96 351.9c-10.55 3.1-22.95 6.8-34.65 8.3l2.5 91.3H169.5l2.5-85c-26.4-2-57-8.9-85.04-14.6zm338.14 0c-28 5.7-58.5 12.6-84.9 14.6l2.5 85h114.5l2.5-91.3c-11.7-1.5-24.1-5.2-34.6-8.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/fire-silhouette.svg b/static/_icons/_character/fire-silhouette.svg
new file mode 100644
index 00000000..3a130610
--- /dev/null
+++ b/static/_icons/_character/fire-silhouette.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M272.95 16.707c-151.29 47.714 57.322 110.88-26.536 131.344C190.7 161.648 137.3 96.283 192.947 45.313c-90.766 32.524-66.292 89.67-12.396 113.25 34.31 15.01 31.884 61.38 8.643 64.637 46.37-54.285-116.637-44.737-86.03-147.47-126.44 158.063 132.535 163.37 51.6 273.194 16.4-51.26-51.074-33.42-65.52-77.88-48.557 115.975 86.87 96.047 107.81 222.95h36.394l-7.375-108.703H196.93c0-49.724 3.178-108.336 45.2-116.245-7.75-9.352-12.786-24.51-12.786-39.207 0-26.536 15.774-48.523 35.98-51.15h.002c1.348-.17 2.78 0 4.164 0 22.13 0 40.145 22.846 40.145 51.15 0 14.334-4.772 29.304-12.192 38.613 45.905 7.12 44.903 66.976 44.903 116.84H314.69l-6.524 108.704h36.752c14.29-138.24 137.056-121.245 77.576-235.742 9.728 46.034-32.646 93.67-53.514 52.13-19.04-37.903 125.515-105.092 70.21-215.175 4.588 81.484-114.155 120.303-118.663 65.824 52.768 23.022 73.61-45.905 30.02-71.985-40.69-24.346-116.444-36.76-77.596-72.338zm69.488 20.635c44.895 15.685 63.888 78.675 48.73 110.674 18.238-3.568 70.807-106.98-48.73-110.674z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/floor-hatch.svg b/static/_icons/_character/floor-hatch.svg
new file mode 100644
index 00000000..b5e4d934
--- /dev/null
+++ b/static/_icons/_character/floor-hatch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m110.297 71.817-46.71 12.936c35.32 100.342 82.123 195.39 131.653 297.3L328.656 395.7c-.385-33.58-4.508-74.918-15.427-113.043 33.89-49.694 60.607-111.009 92.484-176.203l-38.858-27.77c-23.013 55.262-46.325 111.084-81.988 163.829-9.005 11.141-91.217 8.963-99.012 1.814-29.931-62.736-58.224-112.585-75.558-172.51zm115.455 42.623a27.02 27.02 0 0 0-3.815.239c-10.15 1.36-19.012 8.385-25.21 20.197-6.2 11.812-9.199 28.107-6.866 45.525 2.333 17.42 9.515 32.35 18.604 42.114 9.088 9.764 19.487 14.209 29.637 12.85 10.15-1.36 19.01-8.385 25.209-20.196 6.198-11.812 9.196-28.107 6.863-45.525-2.333-17.42-9.511-32.35-18.6-42.114-7.952-8.543-16.908-13.016-25.822-13.09zM136.01 292.354 19.03 400.78l19.779 2.037 363.03 37.366 91.132-143.526-158.051-3.523c1.58 6.018 2.944 12.051 4.154 18.095l121.602 2.711-68.067 107.198-332.175-34.192 82.84-76.785c-2.457-5.934-4.88-11.87-7.264-17.807z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/giant.svg b/static/_icons/_character/giant.svg
new file mode 100644
index 00000000..d3d40ac9
--- /dev/null
+++ b/static/_icons/_character/giant.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M357.796 17.533a64.331 64.331 0 0 0-2.058.003 74.601 74.601 0 0 0-8.203.621c-4.663 3.477-4.538 13.246-8.952 18.954-9.888-2.176-17.187 5.81-16.779 13.777l13.6 8.93c-13.526 22.345-33.82 39.466-39.022 63-16.566-2.885-38.03-4.903-54.232-3.256-.317.713-.632 1.426-.967 2.137-7.961 16.865-19.716 30.123-33.039 38.064-13.323 7.941-28.946 10.586-42.514 4.098-12.117-5.795-19.646-17.476-22.757-30.885-28.118-3.618-60.113 34.404-89.708 60.709-19.094 27.134 4.077 80.52-2.126 98.36-3.741 10.756 4.885 33.1 20.544 36.263 15.336 3.098 26.122-9.397 33.727-21.799 2.006-3.27-25.782-19.36-27.326-28.098-1.844-10.43-.717-41.722 2.525-60.271 18.983-1.913 35.11-17.272 44.768-25.108 8.071 36.793 14.738 80.07 29.758 117.065-8.645 51.14-18.984 98.52-16.819 150.85l-44.894 7.75c-4.62 7.753-6.843 16.91-.02 25.365 0 0 74.398.412 77.207.412 1.673-.32 2.503-20.515 1.455-30.611 2.354-31.588 22.146-69.96 38.055-102.399 27.546-37.452 63.778-46.092 93.254-86.709 29.25 22.461 46.953 45.293 59.545 77.008 28.265-35.233 33.557-36.365 63.638-55.832-1.861-8.516-2.47-17.504-14.537-22.193-20.54 7.464-11.65 1.68-39.459 18.836-14.72-21.902-29.08-50.748-57.85-62.114-3.86-.917-45.101 11.195-76.636 38.158 4.707-23.282 9.712-56.212 11.414-87.923 20.94-4.93 45.912-20.178 65.79-28.711 36.293-29.313 30.23-54.157 42.88-83.47l7.45-1.99c8.9-14.321 14.563-28.469 16.894-42.79-6.779-3.49-14.48-6.059-24.606-6.201zM209.613 50.449c-5.176-.044-10.926 1.668-16.985 5.279-9.693 5.778-19.438 16.398-26.007 30.314-6.57 13.916-8.595 28.229-6.922 39.442 1.672 11.213 6.592 18.74 13.615 22.1 7.023 3.358 15.93 2.441 25.623-3.337 9.693-5.778 19.439-16.398 26.008-30.314 6.569-13.916 8.594-28.229 6.922-39.442-1.673-11.213-6.595-18.739-13.618-22.097-2.633-1.26-5.531-1.92-8.636-1.945zm240.683 286.748c-3.779.138-7.868 1.97-11.93 5.83-4.022 3.899-7.021 9.026-9.044 15.04-2.023 6.015-3.23 12.023-1.899 17.495 3.899 16.016-2.949 1.262-3.861-5.362-.577-4.372-.545-9.899-1.203-17.808l-17.938 1.492c.386 4.632.489 8.563.73 12.451l-16.394 1.125c5.088 21.17 3.951 49.462 33.041 47.12-7.946 22.393-21.154 45.923-36.644 71.36l15.373 9.362c8.272-13.583 16.136-26.867 22.998-40.012 4.99 14.721 13.158 27.42 19.707 39.594l15.851-8.527c-8.94-16.62-18.234-31.036-21.162-47.25 5.111-16.052 10.005-32.737 11.55-49.875 7.515-3.86 12.499-12.384 14.83-19.149 2.022-6.014 2.736-11.925 1.898-17.494-2.602-9.75-8.688-15.657-15.903-15.392z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/grim-reaper.svg b/static/_icons/_character/grim-reaper.svg
new file mode 100644
index 00000000..b026de9b
--- /dev/null
+++ b/static/_icons/_character/grim-reaper.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M246.53 21.03c-62.334.34-123.514 15.678-165 39.44l-6.155 2.06c19.528 58.267 48.163 98.687 80.938 132.376l-1.72 67.47 64.5 30.437c-19 58.985-34.515 128.892-50.405 197.656h191.125c-10.308-47.13-20.516-94.494-32.157-138.72 23.774 28.113 46.51 61.63 67.063 104.313l16.842-8.094c-22.568-46.87-47.938-83.34-74.312-113.626l31.125-24.28-47.47-104.377 48.22-33.75c-18.963-35.457-37.446-71.306-72.28-92.656-32.51 19.993-52 56.712-72.22 92.5l-29.22 34.69c-28.89-25.67-54.975-53.34-76.093-90.532C192.195 60.42 315.858 47.172 419.656 72.56 373.43 35.602 309.392 20.69 246.53 21.032z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/headshot.svg b/static/_icons/_character/headshot.svg
new file mode 100644
index 00000000..0f450e9b
--- /dev/null
+++ b/static/_icons/_character/headshot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m364.656 17.125 7.22 27-58.188 14.625c3.298 5.667 6.192 11.376 8.625 17.094l54.406-13.688 7.56 28.313 78.533-60.376-98.157-12.97zm-130.5 7.22a63.378 63.378 0 0 0-2.656.03c-5.235.19-10.23 1.107-14.594 2.906.073.114-1.306 1.3-4.47 3.126-13.95 8.048-22.286 23.685-23.5 42.032l30.814-8.25c5.387-1.447 10.49-2.095 15.25-1.97 4.76.127 9.176 1.01 13.125 2.626 7.897 3.23 13.85 9.614 15.938 17.28 2.086 7.668.163 16.203-5.063 22.97-5.226 6.767-13.5 11.933-24.344 14.844l-28.687 7.687c9.082 12.388 20.716 21.374 32.78 26.75L255.875 162l-16.406 9.094c-13.034 7.208-20.893 17.79-25.72 31.844-4.827 14.052-6.2 31.546-5.063 50.687 2.098 35.29 12.573 75.595 22 110.78l33.22-9 11-3 .75 11.408 8.5 128.812h100.78l9.157-165.53.375-6.75 6.56-1.75 36.376-9.69c-9.556-37.034-19.253-81.292-35.75-114.936-8.91-18.17-19.682-32.927-32.72-42-13.035-9.076-28.278-13.115-49.03-9.44l-16.125 2.876 5.75-15.344c6.438-17.216 1.314-40.236-13.717-64.843-15.132-24.773-38.14-39.68-58.97-40.814-.9-.05-1.796-.06-2.687-.062zm.313 56.56c-2.74-.07-6.023.28-9.876 1.314l-103.78 27.874-33.19-18.813-71.874 19.25 46.5 26.845-26.844 46.5 71.313-19.125 20.374-35.28 102.72-27.595c7.8-2.094 12.25-5.398 14.405-8.188 2.153-2.79 2.286-4.91 1.81-6.656-.474-1.745-1.714-3.53-5-4.874-1.64-.672-3.822-1.18-6.56-1.25z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/healing.svg b/static/_icons/_character/healing.svg
new file mode 100644
index 00000000..0f016c0b
--- /dev/null
+++ b/static/_icons/_character/healing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M250.9 18.9c-23.9 2.99-45.3 30.65-45.3 66.99 0 19.91 6.8 37.41 16.8 49.61l12.2 14.5-18.7 3.5c-13 2.5-22.6 9.5-30.7 20.8-8.5 11.5-14.8 26.9-19.1 45.2-8 32.7-9.9 72.7-9.9 108.2h43.6l11.7 160.5c30.4 7 63.1 6.5 92.3 0l10.7-160.5H356c0-35.7-.5-76.4-7.8-109.7-3.9-17.9-10-33.7-18.2-45.1-8.2-11.1-18.5-17.8-33.3-20.1l-18.9-3 11.9-14.9c9.9-12.1 16.4-29.6 16.4-49.01 0-38.54-24-66.99-50.3-66.99h-4.9zm145 3.59v41.85h-41.8v50.16h41.8v41.6h49.9v-41.6h41.9V64.34h-41.9V22.49h-49.9zM52.92 62.89v30.58H22.39v36.63h30.53v30.4h36.4v-30.4h30.58V93.47H89.32V62.89h-36.4zM92.63 199.7v21.8H70.75v26.3h21.88v21.9h26.27v-21.9h21.8v-26.3h-21.8v-21.8H92.63zm355.07 62.4v21.8h-21.9v26.3h21.9v21.9H474v-21.9h21.8v-26.3H474v-21.8h-26.3zm-307.5 99.4v15h-15v18h15v15h18.1v-15h15v-18h-15v-15h-18.1zm230 45.8v15h-15v18h15v15h18v-15h15v-18h-15v-15h-18zM49.32 431.8v15h-15v18h15v15h18.01v-15h15v-18h-15v-15H49.32z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/high-kick.svg b/static/_icons/_character/high-kick.svg
new file mode 100644
index 00000000..8a833c58
--- /dev/null
+++ b/static/_icons/_character/high-kick.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M117.842 26.268a15.25 15.25 0 0 0-4.418.76c-5.625 1.858-10.165 7.048-12.6 15.701-2.435 8.653-2.255 20.27 1.668 32.045 3.923 11.775 10.754 21.198 17.9 26.686 7.147 5.488 13.9 6.946 19.526 5.088 5.625-1.858 10.163-7.046 12.597-15.7 2.435-8.653 2.256-20.271-1.668-32.046-3.923-11.776-10.753-21.196-17.9-26.684-5.36-4.116-10.498-5.966-15.105-5.85zm183.933 12.373c-3.461.157-6.505 1.749-8.25 5.344L279.89 68.73l-26.733 32.309s-53.832-9.528-72.039-6.863a518.655 518.655 0 0 0-11.318 1.767c-3.614 12.656-11.809 23.592-24.192 27.682-11.513 3.803-23.674.702-33.761-6.178-4.565 3.511-8.787 7.581-12.557 12.33-18.674 14.66-26.385 24.747-42.1 34.92 3.083-14.864 10.683-29.677 19.026-41.879 1.37-2.003 11.495-10.555 12.888-12.406 7.48-14.706-8.464-41.216-23.476-15.86-1.425 1.979-7.346 18.877-8.817 21.096-14.574 28.867-23.676 47.817-15.474 76.325 2.756 9.578 30.91-4.905 55.23-22.159 26.469 37.34 59.364 48.604 78.373 63.078-23.266 83.384 10.267 147.263 29.276 207.721l-29.149 36.086c-8.868 10.627 48.711 13.113 52.412.75l7.71-33.84c-28.831-90.508-3.142-157.686 17.62-207.722 55.208-59.043 115.23-82.304 168.9-128.791l45.302-9.635c10.848-19.916 10.236-29.748-13.854-30.697l-44.924 17.595c-56.586 31.807-146.01 53.348-186.496 97.99-.897-14.045-17.4-47.3-20.902-58.437 19.373 2.573 45.668 4.223 60.642-2.682 16.005-7.38 33.63-40.796 33.63-40.796l19.663-14.551c17.065-10.058-.63-27.798-12.994-27.24z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/kneeling.svg b/static/_icons/_character/kneeling.svg
new file mode 100644
index 00000000..066dc449
--- /dev/null
+++ b/static/_icons/_character/kneeling.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M373.773 42.58c-15.476-.073-32.25 4.32-48.15 13.15-18.172 10.09-32.025 24.21-39.816 39.635-4.937 9.773-7.42 20.355-6.534 30.48-142.235 35.935-140.19 127.28-148.97 211.997-8.83 85.21 31.418 103.056 84.02 110.176-75.802-1.733-65.734-.497-113.788-.364 0 0-45.96 45.96-49.496 48.79 52.562-2.26 344.12 23.87 345.276-31.32.793-37.823-78.186-55.176-135.845-74.976-21.276-7.306-29.62-92.502-.2-169.12 20.044 61.258 65.636 140.037 87.248 143.894 24.542.216 82.012-121.896 113.443-166.68-28.153-15.767-62.88 16.397-77.355 40.235.612 13.085 1.608 31.266 5.567 35.2l-40.947 42.313c-26.15-43.612-43.326-105.71-50.62-158.75-.257.126-.498.256-.75.383.185-.22.38-.437.567-.658 7.89 5.473 17.617 8.64 27.898 9.56 17.213 1.542 36.523-2.75 54.696-12.84 18.172-10.09 32.026-24.214 39.818-39.64 7.79-15.426 9.48-32.862 1.437-47.348-8.042-14.485-23.737-22.27-40.95-23.812a77.164 77.164 0 0 0-6.547-.305z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/medallist.svg b/static/_icons/_character/medallist.svg
new file mode 100644
index 00000000..193e203b
--- /dev/null
+++ b/static/_icons/_character/medallist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M75.371 28.377 27.027 52.549C42.623 99.323 61.451 155.606 80.44 206.875c19.925 53.796 40.201 101.86 55.05 124.133l1.243 1.865L152.145 487h91.267C226.978 481.65 215 466.15 215 448c0-4.871.865-9.551 2.445-13.896-1.628-3.134-3.22-6.442-4.812-9.913-7.642-16.655-14.483-37.267-20.32-58.84-10.19-37.656-17.3-77.733-18.946-104.525-9-14.793-17.445-31.369-25.547-49.025-26.904-58.636-49.91-129.09-72.449-183.424zm361.258 0c-22.54 54.335-45.545 124.788-72.45 183.424-8.1 17.656-16.546 34.232-25.546 49.025-1.645 26.792-8.756 66.87-18.945 104.526-5.838 21.572-12.679 42.184-20.32 58.84-1.593 3.47-3.185 6.778-4.813 9.912A40.593 40.593 0 0 1 297 448c0 18.15-11.978 33.65-28.412 39h91.267l15.413-154.127 1.244-1.865c14.848-22.272 35.124-70.337 55.049-124.133 18.988-51.269 37.816-107.552 53.412-154.326l-48.344-24.172zM256 105c-18.687 0-36.025 10.529-49.244 29.035C193.537 152.541 185 178.81 185 208c0 29.19 8.537 55.459 21.756 73.965S237.313 311 256 311s36.025-10.529 49.244-29.035C318.463 263.459 327 237.19 327 208c0-29.19-8.537-55.459-21.756-73.965S274.687 105 256 105zm-59.787 192.8c3.19 19.66 7.752 41.702 13.475 62.848 5.662 20.928 12.321 40.816 19.304 56.036.062.134.126.26.188.394a41.119 41.119 0 0 1 13.547-7.844c-6.666-14.749-12.609-33.366-17.422-51.416-4.294-16.1-7.53-30.494-9.094-41.494-7.36-4.977-14.082-11.254-19.998-18.523zm119.574 0c-5.916 7.27-12.639 13.547-19.998 18.524-1.565 11-4.8 25.393-9.094 41.494-4.813 18.05-10.756 36.667-17.422 51.416a41.12 41.12 0 0 1 13.547 7.844c.062-.134.126-.26.188-.394 6.983-15.22 13.642-35.108 19.305-56.036 5.722-21.146 10.284-43.189 13.474-62.847zm-79.375 28.259c1.624 8.15 3.737 17.575 6.283 27.123 3.799 14.245 8.528 29.19 13.305 41.347 4.777-12.157 9.506-27.102 13.305-41.347 2.546-9.548 4.66-18.972 6.283-27.123-6.28 1.91-12.833 2.941-19.588 2.941-6.755 0-13.307-1.031-19.588-2.941zM256 425c-12.81 0-23 10.19-23 23s10.19 23 23 23 23-10.19 23-23-10.19-23-23-23z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/meditation.svg b/static/_icons/_character/meditation.svg
new file mode 100644
index 00000000..124da72c
--- /dev/null
+++ b/static/_icons/_character/meditation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M263.375 19.375c-11.768 0-22.676 6.137-31.156 17.22-7.267 9.494-12.397 22.54-13.72 37.25 11.14-4.926 22.473-7.91 33.813-9V83.25c-10.965 1.377-22.008 5.008-33.157 11.03 1.968 12.487 6.703 23.502 13.063 31.814 8.48 11.082 19.387 17.22 31.155 17.22s22.707-6.138 31.188-17.22c6.167-8.06 10.783-18.667 12.843-30.688-12.07-6.832-24.194-10.997-36.406-12.344V64.75c12.676 1.087 25.22 4.516 37.344 10.188-1.155-15.158-6.336-28.614-13.78-38.344-8.482-11.082-19.42-17.22-31.19-17.22zm-46.594 117.25c-10.442 4.8-18.39 11.182-22.593 18.47l-.375-.095-41.625 64.438-50.656-21.97c-29.375-16.118-61.574 24-30.624 41.688l94.47 44.063 38.03-50.064c18.7 33.703 16.77 67.43-10.97 101.156-8.344-.642-16.37-.958-23.967-.906-40.312.278-68.942 10.254-73.907 28.78l.03.002c-4.44 16.58 10.992 36.67 39.126 55.28 55.675 29.297 95.38 38.468 156.968 42.344h1.562l.438.125c.424.026.823.07 1.25.094l-.032.314 92.063 28.72-22.19-53.72L183.595 375.5l5.875-17.72 71.81 23.845 71.845-23.844L339 375.5l-48.094 15.97 94.438 31.374c33.494-20.046 52.528-42.468 47.656-60.656-5.95-22.21-45.925-32.107-99.25-27.782-26.392-33.215-26.196-66.41-9.53-99.625L361 283.22l94.47-44.064c30.95-17.687-1.25-57.806-30.626-41.687l-50.688 21.968L332.562 155h-.062c-4.217-7.246-12.135-13.596-22.53-18.375-.2.27-.392.547-.595.813-11.268 14.725-27.633 24.562-46 24.562s-34.732-9.837-46-24.563c-.203-.265-.394-.543-.594-.812zm-63.686 311-16.72 40.5 69.876-21.78c-17.624-4.574-34.93-10.634-53.156-18.72z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/mighty-force.svg b/static/_icons/_character/mighty-force.svg
new file mode 100644
index 00000000..2ebdafc9
--- /dev/null
+++ b/static/_icons/_character/mighty-force.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m256 28-32 128c-32-16-64-48-96-96 0 48 0 96 32 128-32 17-64 0-96-32 0 32 0 80 48 112-32 16-64 0-80-32 0 48 16 96 48 128-16 16-48 0-64-16 0 64 48 112 112 144h76.8l16.7-68.6-17.2-86.1-97.9 5s20.3-75.2 34.9-103.7c5-9.6 7.2-18 20-18.3 11.3 0 20.4 9.8 20.4 21.9 0 12-9.1 21.8-20.4 21.8-2.3 0-4.6-.5-6.6-1.3l-5.1 46.8c29.6-8.9 56.9-18.8 84-30.9 0-.1-.1-.2-.1-.3-6.2-8.8-10.4-21.5-10.4-35.7 0-14.1 4.1-26.8 10.4-35.7 6.1-8.9 14.1-13.7 22.5-13.7 8.5 0 16.5 4.8 22.6 13.7 6.2 8.9 10.2 21.6 10.2 35.7 0 14.2-4 26.9-10.2 35.7-.1.3-.5.7-.6.9 27.3 12.1 56.1 20.6 84.3 30.3l-5-46.8c-2.2.8-4.3 1.3-6.7 1.3-11.2 0-20.3-9.8-20.3-21.8 0-12.1 9.1-21.9 20.3-21.9 12.8.3 15.2 8.7 20 18.3 14.8 28.5 35 103.7 35 103.7l-97.9-5-17.2 86.1 16.7 68.6H384c64-32 112-80 112-144-16 16-48 32-64 16 32-32 48-80 48-128-16 32-48 48-80 32 48-32 48-80 48-112-32 32-64 48-96 32 32-32 32-80 32-128-32 48-64 80-96 96z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/person.svg b/static/_icons/_character/person.svg
new file mode 100644
index 00000000..161b139e
--- /dev/null
+++ b/static/_icons/_character/person.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M250.882 22.802c-23.366 3.035-44.553 30.444-44.553 65.935 0 19.558 6.771 36.856 16.695 48.815l11.84 14.263-18.217 3.424c-12.9 2.425-22.358 9.24-30.443 20.336-8.085 11.097-14.266 26.558-18.598 44.375-7.843 32.28-9.568 71.693-9.842 106.436h42.868l11.771 157.836c29.894 6.748 61.811 6.51 90.602.025l10.414-157.86h40.816c-.027-35.169-.477-75.126-7.584-107.65-3.918-17.934-9.858-33.372-18.04-44.343-8.185-10.97-18.08-17.745-32.563-19.989l-18.592-2.88 11.736-14.704c9.495-11.897 15.932-28.997 15.932-48.082 0-37.838-23.655-65.844-49.399-65.844z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/rear-aura.svg b/static/_icons/_character/rear-aura.svg
new file mode 100644
index 00000000..86146012
--- /dev/null
+++ b/static/_icons/_character/rear-aura.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 23.545c-33.5 0-63.525 15.197-83.55 39.053L92.7 38.313l60.85 56.867a108.125 108.125 0 0 0-4.905 18.105L18.498 132.592 148.635 151.9a108.074 108.074 0 0 0 4.902 18.118L92.7 226.873l78.898-24.025a91.447 91.447 0 0 1 5.203-7.702 74.948 74.948 0 0 1 7.02-8.027c-11.435-15.14-18.21-34.01-18.21-54.503 0-50.03 40.357-90.39 90.39-90.39 50.03 0 90.39 40.36 90.39 90.39 0 20.494-6.774 39.36-18.208 54.5a74.47 74.47 0 0 1 7.02 8.03 90.44 90.44 0 0 1 5.204 7.703l78.895 24.023-60.837-56.857a108.173 108.173 0 0 0 4.902-18.116l130.137-19.308-130.147-19.307a107.94 107.94 0 0 0-4.906-18.103l60.85-56.87-79.75 24.286C319.52 38.743 289.5 23.545 256 23.545zm.002 45.182c-23.1 0-42.257 23.548-45.89 54.412h36.544v18.686H209.85c1.698 19.243 9.403 35.878 20.408 46.133H219.94c-11.947 2.392-20.787 8.595-28.223 18.446-7.56 10.013-13.304 23.86-17.34 39.875-7.365 29.223-8.98 65.15-9.22 97.33h39.972l10.32 149.056h81.103l10.322-149.057h39.973c-.24-32.18-1.856-68.107-9.22-97.33-4.037-16.014-9.782-29.86-17.34-39.874-7.437-9.85-16.278-16.054-28.226-18.447h-10.316c11.005-10.256 18.71-26.89 20.408-46.134h-36.81V123.14h36.547c-3.633-30.865-22.79-54.413-45.888-54.413z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/relationship-bounds.svg b/static/_icons/_character/relationship-bounds.svg
new file mode 100644
index 00000000..a77a102b
--- /dev/null
+++ b/static/_icons/_character/relationship-bounds.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M138.94 22.99a26.674 26.674 0 0 0-1.56.006c-.902.028-1.486.074-2.04.1-.56-.027-1.14-.072-2.043-.1a27.112 27.112 0 0 0-4.37.203h-.013l-.012.003c-33.88 4.402-58.95 36.95-58.95 78.18 0 17.88 4.53 35.75 12.616 50.138-11 4.404-20.23 11.382-27.5 20.107-9.996 11.997-16.58 27.015-21.123 43.496-9.085 32.963-10.13 72.213-10.13 107.604v9.345H65.86l10.513 163.524h54.815v.015h255.886v-.014h53.457l10.515-163.524h42.047v-9.345c0-35.39-1.048-74.64-10.133-107.604-4.544-16.48-11.125-31.5-21.122-43.496-7.27-8.725-16.498-15.703-27.5-20.106 8.085-14.386 12.617-32.257 12.617-50.137 0-41.23-25.07-73.778-58.95-78.18l-.013-.002h-.012c-.314-.04-.61-.067-.906-.095v-.007h-.066a27.611 27.611 0 0 0-3.4-.102c-.894.028-1.464.07-2.022.098-.55-.026-1.127-.07-2.022-.098a27.626 27.626 0 0 0-3.4.102H140.78a27.71 27.71 0 0 0-1.84-.108zm-3.6 18.813c.236.002.35.01.605.01 1.135 0 2.276.075 3.416.197h238.185c1.14-.122 2.28-.197 3.416-.197.266 0 .383-.008.626-.01.244.002.362.01.627.01 5.338 0 10.785 1.386 15.875 3.783l.072-.153c17.34 8.21 30.108 28.395 30.108 55.94 0 18.664-6.87 38.574-15.952 49.515l-10.142 12.217 15.605 2.934c12.81 2.407 22.07 8.383 29.7 17.54 7.63 9.157 13.387 21.71 17.463 36.5 7.438 26.984 9.096 60.97 9.344 93.293h-40.77l-10.51 163.525h-82.843l-.002-.015H176.78v.015H93.9L83.387 313.383H42.62c.247-32.323 1.905-66.31 9.343-93.293 4.076-14.79 9.833-27.343 17.463-36.5 7.63-9.157 16.89-15.133 29.7-17.54l15.606-2.935-10.142-12.217c-9.083-10.94-15.95-30.85-15.95-49.515 0-27.563 12.783-47.753 30.14-55.953l.077.166c5.09-2.397 10.537-3.783 15.875-3.783.258 0 .37-.008.608-.01zM169.977 60.7c3.935 5.41 7.082 11.84 9.17 19.146h158.65c2.09-7.307 5.235-13.735 9.17-19.145h-176.99zm12.013 37.837c.03.94.05 1.888.05 2.846 0 5.412-.594 10.926-1.636 16.3H336.54c-1.04-5.374-1.634-10.888-1.634-16.3 0-.958.02-1.906.05-2.846H181.99zm-7.316 37.836c-2.452 5.657-5.376 10.658-8.586 14.525l-3.834 4.62H354.69l-3.833-4.62c-3.21-3.867-6.134-8.868-8.586-14.525H174.675zm16.576 37.836c3.67 2.61 6.968 5.74 10.002 9.38 2.433 2.92 4.674 6.19 6.732 9.764H308.96c2.06-3.574 4.3-6.844 6.733-9.764 3.034-3.64 6.33-6.77 10-9.38H191.25zm25.004 37.835c.88 2.6 1.7 5.283 2.46 8.045.988 3.58 1.867 7.29 2.66 11.097h74.196a181.34 181.34 0 0 1 2.66-11.097 148.765 148.765 0 0 1 2.46-8.045h-84.436zm8.225 37.834c.81 6.24 1.447 12.642 1.942 19.143h64.1c.496-6.5 1.134-12.903 1.945-19.144H224.48zm3.006 37.835c.253 6.384.393 12.778.483 19.144h61.007c.09-6.367.23-12.76.482-19.145h-61.974zM186.51 325.55l-1.233 19.145h146.39l-1.23-19.144H186.51zm-2.434 37.837-1.23 19.144H334.1l-1.23-19.143H184.075zm-2.43 37.836-1.232 19.142H336.53l-1.23-19.142H181.646zm-2.433 37.834-1.23 19.144h160.98l-1.23-19.143h-158.52z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/robber.svg b/static/_icons/_character/robber.svg
new file mode 100644
index 00000000..aed9dcce
--- /dev/null
+++ b/static/_icons/_character/robber.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M70.533 100.452c-22.862 27.542-36.27 64.923-37.766 96.702-.9 19.145 9.6 42.616 25.276 61.47 15.674 18.855 36.465 32.678 51.753 35.028 11.256.74 19.522-9.182 25.182-16.5 9.537-12.442 19.204-30.678 29.36-49.014 10.155-18.336 20.77-36.82 33.798-50.467 13.028-13.645 30.24-22.73 49.442-17.89 3.34 1.09 3.565 1.663 12.38 8.788 12.605 10.736 26.244 21.81 41.694 39.33l3.803 3.486 10.238-6.06c-20.92-23.726-38.623-51.403-57.006-76.168-27.153-36.58-54.84-65.76-94.205-69.893-36.138-3.317-74.585 18.428-93.95 41.19zm266.053-2.414c-3.507.063-7.26.632-11.217 1.733-7.08 1.97-14.577 5.722-21.718 11.09l60.545 12.47c-.844-8.415-4.142-15.068-9.524-19.503-4.425-3.646-10.055-5.63-16.6-5.785a38.74 38.74 0 0 0-1.487-.004zm12.787 33.34-6.83 15.805 18.148 9.95zm-51.254 21.785c9.177 12.81 18.397 25.33 28.04 36.72 7.273-4.386 14.418-10.424 20.662-18a86.045 86.045 0 0 0 2.713-3.49zm-62.702 23.266c-8.527.283-15.98 4.993-24.262 13.67-29.706 32.65-56.175 92.534-24.877 134.35 11.81 14.805 71.805 33.64 129.122 34.264 38.29 26.563 62.975 62.86 93.86 94.36 18.564-26.89 34.903-54.124 70.025-78.467L459.423 361.2c-26.72 8.057-36.142 26.154-50.656 41.217-18.296-25.715-41.06-49.166-65.555-69.527-17.72-14.73-38.605-25.1-58.11-37.434 2.437-.69-6.538-19.77-7.556-21.99-29.352-7.035-49.364-22.817-62.138-39.367l14.25-11c13.5 17.492 35.288 33.754 73.69 35.933 19.65-2.818 29.578-6.955 35.335-11.704 5.626-4.64 8.615-10.964 12.895-20.618 1.095-6.312-.25-7.85-2.84-10.1-1.95-1.696-5.246-3.2-8.787-4.732l-39.023 23.104-4.886-6.094c-17.46-21.77-31.722-33.02-46.578-45.623-3.633-3.94-7.452-6.648-12.324-6.836a25 25 0 0 0-1.72 0zM109.8 312.53c-20.436 15.367-42.69 27.405-71.017 28.307l2.978 27.315 58.107-18.873c19.65 23.613 32.977 51.093 65.314 68.364 37.673-12.64 57.61-32.233 77.46-50.98-21.403-6.467-42.72-14.485-61.496-24.495l-14.232 34.423z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/rogue.svg b/static/_icons/_character/rogue.svg
new file mode 100644
index 00000000..decfec10
--- /dev/null
+++ b/static/_icons/_character/rogue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m377.47 20.72-16.283 9.186 22.844 40.47-114.405-10.25-13.03 14.812-4.47 27.5c-36.887 12.27-63.294 26.753-83.375 46.03-22.722 21.813-38.17 50.42-51.75 90.5l-31.25 3-12.844 14.595 2.53 106.062c-3.8 1.61-7.374 3.92-10.56 6.906-.12.113-.228.232-.345.345l-39-25.53L15.28 360l39.595 25.875c-3.366 11.778-.637 25.006 8.344 34.594 7.98 8.52 19.12 12.27 29.905 11.186l30.688-48.375c-.246-.212-.505-.41-.75-.624a35.909 35.909 0 0 0-7.25-11.47 36.001 36.001 0 0 0-8.407-6.655l8.78-79.124 90.658-.656c-8.33-27.148-2.43-56.865 18.562-76.53 13.287-12.448 30.203-18.614 47.563-18.907 6.4-.11 12.852.597 19.217 2.062l6.22-85.938 74.124-3.343a35.855 35.855 0 0 0 9.408 19.78c3.314 3.54 7.157 6.263 11.312 8.157l.375.5 50.125-27.405c1.763-10.675-1.284-22.027-9.25-30.53-8.932-9.538-21.832-13.137-33.75-10.626l-23.28-41.25zm87.186 92.31-75.125 41-4.81 25.626 31.624-16.406c30.88 48.452 54.04 102.334 74.062 158.438 12.075-66.802 1.912-127.814-22.812-185.032l23.062-11.97-26-11.655zm-191 94.876c-13.12.182-25.73 4.814-35.47 13.938-22.26 20.854-22.1 58.245 1.876 83.844 23.98 25.6 61.27 28.23 83.532 7.375 22.26-20.855 22.104-58.274-1.875-83.875-13.49-14.4-31.194-21.516-48.064-21.282zm-95.937 174.28-33.282 3.408-41.907 66.125 10.907 31.06 15.063-23.56c54.545 27.254 113.684 40.662 179.75 33.124-53.016-22.93-103.78-48.64-149.063-81.156l18.532-29z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/sarcophagus.svg b/static/_icons/_character/sarcophagus.svg
new file mode 100644
index 00000000..c0f74f93
--- /dev/null
+++ b/static/_icons/_character/sarcophagus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M352.439 16c-13.706 0-27.648 4.42-37.556 14.329-14.902 14.901-46.253 44.313-49.274 79.17-5.46 3.315-9.656 5.903-13.948 9.3 1.678 5.632 3.362 11.99 5.059 19.002 9.216-5.835 17.617-13.17 26.212-17.48v-5.445c0-25.453 28.748-56.425 44.411-72.088 5.755-5.755 15.306-9.167 25.096-9.167 9.79 0 19.342 3.412 25.097 9.167 15.664 15.663 44.41 46.635 44.41 72.088v5.445c8.544 6.418 31.008 14.725 31.327 25.882 0 29.858-7.758 88.926-15.595 151.625-7.652 61.215-15.305 126.061-15.665 173.746-22.479 5.784-48.236 6.435-69.574 6.499-23.344-.391-68.57 1.299-69.604-8.33-5.46 2.258-11.332 4.516-17.434 6.73 1.22 6.768 7.17 10.262 12.594 12.137 24.122 6.556 51.81 7.042 74.444 7.084 26.263.188 63.506 2.71 81.83-10.745 2.361-1.764 5.298-5.163 5.298-9.813 0-46.011 7.77-112.511 15.597-175.12 7.826-62.61 15.73-121.018 15.73-153.813-3.675-18.088-17.12-28.442-31.625-36.704-3.021-34.857-34.37-64.269-49.272-79.17C380.09 20.42 366.144 16 352.44 16zM112.362 41.727l7.39 23.382 30.1-9.514c-11.566-7.066-24.638-14.923-37.49-13.868zM95.56 47.038c-12.856 7.763-17.49 20.987-22.71 32.897l30.102-9.514zm256.88 13.995a25.81 25.81 0 0 0-7.803 1.223l35.952 20.142c-5.211-12.91-16.197-21.365-28.15-21.365zm-184.06 7.185-19.376 6.126c8.938 6.506 16.965 15.835 21.583 23.98l20.197-6.385c-5.016-8.596-13.24-16.622-22.404-23.721zm160.727 5.54c-4.918 6.642-7.996 15.462-7.996 25.454 0 2.356.181 4.64.507 6.853h61.64c.09-.609.168-1.223.234-1.843zm-205.212 9.82c-2.478-.079-4.9.252-7.233.99-7.468 2.36-13.278 8.658-16.53 18.283-3.252 9.625-3.512 22.258.526 35.03 4.037 12.773 11.51 22.963 19.703 28.97 8.194 6.007 16.567 7.821 24.035 5.46 7.467-2.36 13.28-8.66 16.531-18.284 3.252-9.625 3.51-22.256-.527-35.029-4.038-12.773-11.509-22.964-19.702-28.971-5.633-4.13-11.352-6.277-16.803-6.45zM84.32 94.791l-19.376 6.124c-3.419 11.076-5.536 22.37-4.7 32.287l20.195-6.385c-.46-11.578.273-22.475 3.881-32.026zm112.78 13.63-19.62 6.203c4.795 15.788 4.672 31.636.142 45.042a54.25 54.25 0 0 1-4.745 10.348c10.363-4.754 34.617-15.45 35.73-25.187zm18.88 1.266 9.43 29.828c2.287 7.235-.577 14.536-4.78 19.912-1.217 1.557-2.581 3.04-4.053 4.478 6.337 23.68 4.684 48.605-1.245 68.52 18.99-.005 29.922 25.186 34.107 36.048l14.097-4.457c-11.004-59.96-21.062-115.988-29.78-143.566-3.803-5.86-11.54-8.72-17.776-10.763zm112.419 13.998c5.866 8.49 14.654 13.706 24.04 13.706 9.385 0 18.174-5.216 24.04-13.706zM84.169 144.12l-19.617 6.2 11.506 36.406c10.671 6.133 31.671 2.456 43.717.072a54.252 54.252 0 0 1-9.831-5.738c-11.413-8.367-20.623-21.267-25.775-36.94zm296.2.946c-7.84 6.236-17.413 9.946-27.93 9.946-10.508 0-20.073-3.704-27.908-9.93-7.64 1.01-15.603 2.389-24.176 4.171l53.809 26.39 69.474-20.84c-.081-.43-.16-.865-.247-1.274-16.137-3.916-30.072-6.75-43.023-8.463zm-99.817 14.103c-1.249 9.685-1.344 22.962-.151 38.604l48.93-14.68zm-230.723 3.04c-4.06 5.287-10.291 12.253-8.362 19.023 8.721 27.578 32.692 79.208 58.15 134.599l132.973-42.033c-2.804-8.008-7.015-20.034-15.633-23.807l-76.992 24.339-3.24-1.683c-21.19-11.01-45.052-35.246-56.208-65.728-2.035-.33-4.01-.76-5.904-1.335-6.53-1.983-13.07-6.314-15.356-13.549zm375.446 10.5-143.173 42.952c1.523 13.669 3.612 28.539 5.997 44.063l134.424-41.87c.768-6.696 1.418-13.144 1.899-19.235.757-9.608 1.03-18.333.853-25.91zm-224.215 2.718c-32.213 17.073-66.152 29.32-101.239 32 9.847 21.179 27.692 39.259 42.086 47.807l52.333-16.54c6.81-15.292 10.928-40.345 6.82-63.267zm219.03 61.645-129.22 40.247c2.35 14.567 4.865 29.51 7.36 44.505l115.175-40.83c2.382-14.72 4.865-30.724 6.683-43.921zm-153.328 44.405-159.75 50.495a6141.77 6141.77 0 0 1 6.551 14.36l156.09-49.34a6136.956 6136.956 0 0 1-2.891-15.515zm143.38 19.37-26.4 9.359 21.655 19.227a25654.83 25654.83 0 0 1 4.746-28.587zm-137.185 13.58-37.767 11.94 40.257 127.347c8.896-3.99 17.86-7.17 25.875-12.998.459-.339.379-.327.694-.604-10.606-34.457-20.192-79.526-29.059-125.685zm91.818 2.501-63.63 22.557c2.571 15.774 5.003 31.406 7.103 46.549l90.615-38.836zM218.39 331.677l-42.939 13.574 40.58 128.376c14.928-4.09 29.296-8.646 42.939-13.573zm-59.742 18.885L120.882 362.5c19.274 42.87 37.332 85.26 48.457 119.553.418.045.346.082.916.095 10.343-.335 19.264-2.117 28.648-4.235zm240.874 15.524-77.007 33.004 32.512 25.742 39.097-19.549c1.514-12.638 3.356-25.78 5.398-39.197zm-86.69 47.815c4.931 18.596 4.823 18.121 7.482 28.289l17.313-8.658zm79.084 12.191-59.996 29.996c6.13 1.524 13.32 2.406 20.52 2.406 10.769 0 21.578-1.937 28.728-5.115 11.92-4.327 9.946-17.216 10.748-27.287z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/scarecrow.svg b/static/_icons/_character/scarecrow.svg
new file mode 100644
index 00000000..3012620d
--- /dev/null
+++ b/static/_icons/_character/scarecrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m264.11 24.357-8.022 39.594-28.2-25.122 9.624 25.83-41.48-16.638 41.52 39.777c-9.3 6.495-15.388 17.393-15.388 29.89 0 20.188 15.884 36.22 35.555 36.22 19.67 0 35.555-16.032 35.555-36.22 0-13.184-6.774-24.59-16.95-30.923l24.79-42.37-27.863 17.69-9.143-37.727zM101.776 67.01c-6.163 0-11.688 2.68-15.52 6.92l-39.075-5.62-2.66 18.5 30.865 4.438-58.524 41.41 41.198-8.55-8.027 35.87 25.852-21.962 18.504 34.08-.82-64.887a20.884 20.884 0 0 0 8.207 1.67c3.056 0 5.95-.668 8.567-1.845 13.156 16.754 30.582 30.514 56.65 39.242-7.11 6.444-14.18 12.935-21.303 19.362 48.007 2.993 81.67 49.824 90.275 97.98-6.853 1.445-13.963 3.815-21.307 7.2 28.664 57.982-21.168 129.288-33.297 164.05l5.285.192-34.125 41.227 37.58-18.92 1.53 36.722 19.288-27.903 26.69 28.128-14.5-57.935 6.728.244c.643-48.52 13.678-85.638 21.662-140.625 6.06 49.21 18.806 98.424 6.37 147.635l6.263-.746-14.87 52.83 26.693-28.128 19.287 27.9 1.53-36.72 37.582 18.917-32.63-39.276 5.202-.62c-7.866-38.65-40.228-108.407-19.248-165.44-6.265-4.002-13.042-6.928-20.272-8.65 12.328-43.742 46.016-86.71 85.612-94.556l-7.616-12.46c25.346-10.523 39.26-26.136 48.553-43.866 2.37.82 4.912 1.272 7.56 1.272 1.65 0 3.258-.174 4.81-.502l13.74 59.543 7.71-41.362 30.143 21.032-10.514-32.248 38.557-4.207-55.183-21.805 52.47-6.725-2.374-18.537-60.85 7.797c-4.22-5.62-10.94-9.254-18.51-9.254-9.673 0-17.955 5.94-21.41 14.37L305.49 91.76a54.915 54.915 0 0 1 5.908 18.084l47.694-6.112c-11.316 8.315-20.168 19.095-25.875 33.018l-5.9-9.65c-8.985 9.427-17.88 17.535-26.672 24.047-9.928 13.01-25.47 21.45-42.926 21.45-18.198 0-34.312-9.17-44.156-23.13-6.782-6.855-13.448-15.606-19.984-26.455-5.158 4.28-10.225 8.667-15.248 13.105-8.67-13.547-18.666-25.162-30.402-34.435l56.123 8.072a54.935 54.935 0 0 1 5.914-18.03L120.62 78.87c-3.382-7.012-10.537-11.862-18.843-11.862zm112.88 203.81c0-.002 0-.005-.003-.007l-.002.01.006-.003z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/shield-bash.svg b/static/_icons/_character/shield-bash.svg
new file mode 100644
index 00000000..11005e86
--- /dev/null
+++ b/static/_icons/_character/shield-bash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M274.663 63.02 90.792 80.26l154.193 19.273c5.063-13.339 12.952-24.341 22.541-31.828a52.072 52.072 0 0 1 7.137-4.683zm19.832 12.803c-5.092.166-10.492 2.296-15.879 6.502-7.835 6.118-15.009 16.575-18.83 29.688-3.821 13.112-3.477 26.099-.289 35.927 3.188 9.829 8.73 16.071 15.633 18.395 6.903 2.324 14.766.596 22.601-5.522 7.835-6.117 15.01-16.574 18.83-29.687 3.822-13.113 3.48-26.1.292-35.928-3.189-9.828-8.73-16.07-15.633-18.394a19.017 19.017 0 0 0-6.725-.98zm166.85 9.485c-24.113 13.949-46.193 20.298-87.233 17.252L340.48 228.452c-.675 2.682-.318 6 1.922 10.87 2.243 4.876 6.355 10.89 11.836 17.607 9.99 12.242 24.527 27.16 39.573 44.238 14.56-5.5 28.23-12.828 38.972-20.19 11.841-8.113 20.234-16.95 21.965-19.939l42.027-118.22c-16.748-14.613-29.471-33.974-35.43-57.51zm-288.07 51.261L23.652 158.331l89.309 12.988 2.158-5.052zm286.265 2.325 16.941 6.078-39.123 109.037-37.212 19.181-8.247-15.998 30.913-15.933zm-259.842 4.394-70.586 36.043-29.222 68.422 19.218 8.809 24.905-57.764 59.299-22.973-14.702 75.955-.963 1.477c-32.725 50.18-71.654 93.41-118.464 134.28L42.722 432.98l17.021 7.245 31.875-43.989 1.38-.906c45.476-29.872 75.93-62.333 112.255-94.492l4.533-4.012 5.426 2.686c23.365 11.571 42.934 24.117 62.107 37.705l8.924 6.324-69.006 65.643 24.649 39.794 17.67-10.308-20.078-28.477 8.224-5.004c29.884-18.186 49.986-39.43 71.938-66.039-23.653-35.6-42.006-49.433-71.592-71.267l9.908-7.227c34.703-25.312 38.132-54.476 41.61-79.449-9.203 4.441-19.498 5.772-29.473 2.414-13.488-4.54-22.924-16.472-27.465-30.473-.17-.522-.321-1.054-.479-1.584zm116.62 45.04c-1.355 7.027-3.324 14.17-6.092 21.349l14.056 9.666 5.938-22.223zm-174.243 97.476-126.85 17.953 99.67 14.105a598.987 598.987 0 0 0 27.18-32.058zm91.781 82.73-95.892 21.432 59.406 13.277z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/sinking-trap.svg b/static/_icons/_character/sinking-trap.svg
new file mode 100644
index 00000000..586c1130
--- /dev/null
+++ b/static/_icons/_character/sinking-trap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m129.785 50.53-18.34 3.59 11.502 58.716a44.847 44.847 0 0 0-8.738 2.092L81.245 58.336l-16.148 9.406 32.798 56.313a67.386 67.386 0 0 0-5.587 4.95l-47.675-45.73L31.7 96.762l49.007 47.01a78.275 78.275 0 0 0-3.734 6.988L29.01 123.87l-9.14 16.304 67.148 37.642c7.432 5.644 15.256 9.8 23.113 11.596l105.597 86.397 20.11 86.356 14.804 88.023h18.903l10.973-87.077 20.564-88.302 103.635-84.792c8.947-1.286 17.92-5.78 26.38-12.206l67.14-37.638-9.137-16.303-47.965 26.89a78.385 78.385 0 0 0-3.735-6.987l49.01-47.01-12.937-13.488-47.673 45.73a67.744 67.744 0 0 0-5.588-4.95l32.798-56.313-16.15-9.406-32.962 56.594a44.817 44.817 0 0 0-8.736-2.094l11.502-58.715-18.342-3.59-14.172 72.353c-2.132 2.757-4.35 5.304-6.79 7.547l-18.85-35.73-16.53 8.72 22.436 42.527c3.555 9.423 7.447 17.122 11.592 23.307l-68.668 85.63a62.46 62.46 0 0 1-3.553 5.38c-8.562 11.545-21.266 19.51-35.67 19.51-14.403 0-27.106-7.965-35.668-19.51-.318-.43-.62-.874-.927-1.313h-.01l-70.574-88.007c4.583-6.456 8.876-14.704 12.763-25.01l22.427-42.513-16.53-8.72-18.85 35.73c-2.438-2.242-4.656-4.788-6.788-7.545L129.784 50.53zm128.33 121.837c-7.593 0-14.802 4.06-20.654 11.95-5.85 7.89-9.825 19.448-9.825 32.406 0 12.957 3.974 24.516 9.826 32.408 5.853 7.892 13.062 11.952 20.655 11.952 7.593 0 14.804-4.06 20.656-11.95 5.854-7.893 9.828-19.452 9.828-32.41 0-12.957-3.974-24.515-9.827-32.406-5.85-7.89-13.06-11.95-20.655-11.95zm-52.912 257.06c-14.898 6.732-24.53 16.38-24.53 26.862 0 20.435 35.37 36.794 78.845 36.794 43.473 0 78.84-16.36 78.84-36.795 0-10.592-9.353-20.118-24.526-26.862 4.54 4.033 7.59 8.548 7.59 13.43 0 15.976-27.917 28.62-61.904 28.62s-61.323-12.644-61.323-28.62c0-4.833 2.55-9.427 7.008-13.43z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/skeleton-inside.svg b/static/_icons/_character/skeleton-inside.svg
new file mode 100644
index 00000000..d3061832
--- /dev/null
+++ b/static/_icons/_character/skeleton-inside.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M299.53 18.813c-19.61.356-40.837 9.338-57.75 26.25-21.96 21.96-30.517 51.24-24.218 74.75-62.778-29-57.658-31.416-120.28-71.594-10.073-6.463-19.442-9.42-27.813-9.814-13.954-.654-25.118 5.805-32.126 14.938C26.13 67.956 24.96 89.496 48.28 107.75c31.027 24.286 58.843 41.04 79.032 59.47 20.19 18.427 32.648 40.59 28.344 70.03-3.158 21.61-13.69 37.998-26.47 51.47-12.778 13.47-27.746 24.486-41.436 36.686-27.38 24.4-50.33 51.753-45.063 114.25 3.328 39.483 34.158 55.117 59.657 52.375 12.75-1.37 23.51-7.336 29.406-17.467 5.897-10.132 7.696-25.438-1.03-47.75-7.595-19.416 3.102-40.836 18.343-57.094 15.24-16.26 36.83-28.82 58.875-25 6.175 1.07 11.42 4.72 15.03 9.155 3.61 4.435 5.996 9.62 7.97 15.25 3.946 11.26 6.27 24.674 9.125 38.563 5.71 27.777 13.662 55.967 33.062 68.468 37.964 24.468 75.258 17.422 91.906.47 8.325-8.478 11.915-18.86 9.126-31.157-2.788-12.3-12.708-27.158-34.28-41.845-23.665-16.11-32.656-48.29-33.845-80.125-1.188-31.836 5.288-64.077 20.126-84.03 6.878-9.25 17.546-13.118 29.656-17.407 12.11-4.29 26.207-8.475 40.75-14.688 29.087-12.425 59.636-32.197 79.125-76.78 17.078-39.07 3.374-64.318-15.28-73.5-9.328-4.593-20.13-5.132-30.438-.626-10.31 4.504-20.43 14.186-27.44 31.75-13.14 32.932-39.218 51.707-70.436 56.436-6.214.942-12.614 1.356-19.188 1.313-.446-.28-.895-.57-1.344-.845a95.216 95.216 0 0 0 16.844-13.406c30.064-30.065 35.05-73.856 11.125-97.782-10.466-10.468-24.744-15.403-40-15.126zm-2.342 19.156c9.573-.19 18.524 3.17 25.093 10.28 15.017 16.25 11.9 45.956-6.967 66.375-18.87 20.42-46.328 23.813-61.344 7.563-15.017-16.25-11.9-45.987 6.968-66.407 10.613-11.485 23.94-17.57 36.25-17.81zM65.03 62.593l62.69 45.468-10.282 15.626-63.376-45.97 10.97-15.124zM439.095 85.03l16.094 9.5-36.375 61.595-13.032-14.656 33.314-56.44zm-296.22 34.032 39.94 28.97c-2.63 5.937-4.95 11.934-6.94 18.062l-43.28-31.406 10.28-15.625zm71.94 19.876c.728-.013 1.45-.007 2.186 0 31.214.28 65.063 7.677 92.844 27.687-.43 33.283-4.878 58.947-21.28 86.25-14.544-8.917-30.326-16.685-46.658-22.094l-15.47 46.25 29.72 5.908-7.22 32.968c-27.694.27-53.706-1.247-78.03-14.5l7.438-33.906 29.625 5.875 15.874-47.5c-12.937-2.752-26.05-3.835-39.063-2.688 1.66-33.21 8.716-57.94 23.5-84.03 2.168-.07 4.343-.183 6.532-.22zm174.655 12.25 13.28 14.968-75.813 28.594c.753-6.677 1.195-13.516 1.438-20.53l61.094-23.032zm-240.345 151.03 12.656 13.75-52.31 48.157-20.97-6.094 60.625-55.81zm111.156 22.626 23.033 49.03-17.25 7.25-22.72-48.343 16.938-7.936zm-177 51.125 18.94 5.5 3.874 84.905-18.688.844-4.125-91.25zm209.564 14.186 42.594 68.72-15.875 9.843-44.157-71.25 17.438-7.314z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/soul.svg b/static/_icons/_character/soul.svg
new file mode 100644
index 00000000..7577cfa0
--- /dev/null
+++ b/static/_icons/_character/soul.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 25.932c-18.969 0-36.639 20.557-36.639 48.636 0 28.08 17.67 48.639 36.639 48.639s36.639-20.56 36.639-48.639c0-28.079-17.67-48.636-36.639-48.636zM112 96s-96.965 62.813-86.373 112c4.048 18.799 41.31 39.417 46.246 58.002C84.117 312.107 16 352.297 16 400c0 11.926 32 96 32 96h96s-56.606-68.165-64-96c-10.71-40.318 45.454-95.328 38.748-136.502-3.637-22.333-60.928-38.58-65.207-60.799C45.86 162.815 112 96 112 96zm288 0s66.14 66.815 58.459 106.7c-4.279 22.218-61.57 38.465-65.207 60.798C386.546 304.672 442.71 359.682 432 400c-7.394 27.835-64 96-64 96h96s32-84.074 32-96c0-47.703-68.117-87.893-55.873-133.998 4.936-18.585 42.198-39.203 46.246-58.002C496.965 158.813 400 96 400 96zm-176.305 34.914c-7.531.938-14.474 2.207-20.377 3.781-6.898 1.84-12.352 4.169-15.353 6.227-3.001 2.058-2.887 2.84-2.965 3.078l-21.922 67.225 71.442-62.866c3.617-3.872 7.91-5.767 12.35-6.154-8.625-1.654-16.465-5.619-23.175-11.29zm64.61 0c-6.71 5.673-14.55 9.637-23.174 11.291 4.438.387 8.732 2.282 12.35 6.154l71.44 62.866L327 144c-.077-.238.036-1.02-2.965-3.078s-8.455-4.387-15.353-6.227c-5.903-1.574-12.846-2.843-20.377-3.78zM248.9 160.168c-.775.02-1.214.472-1.693 1.002l-96.047 84.516c.035.363.12 1.072.676 2.29 1.273 2.793 4.4 6.867 8.143 10.182 3.743 3.315 8.164 5.924 11.09 6.85 1.36.43 2.201.438 2.51.42l84.482-95.395c2.32-2.62-5.414-10.054-9.16-9.865zm27.532 11.242c-.438 3.648-1.972 7.254-4.897 10.557l-3.514 3.967 70.4 79.494c.309.018 1.15.01 2.51-.42 2.926-.926 7.347-3.535 11.09-6.85 3.744-3.315 6.87-7.39 8.143-10.181.556-1.219.64-1.928.676-2.291zM256 199.508l-69.328 78.283C185.42 279.205 185 285.147 185 288c0 29.279 12.608 45.893 26.4 59.764 6.897 6.935 14.093 12.911 20.112 19.302 6.018 6.392 11.51 13.895 11.49 23.58-.028 14.149-8.246 24.081-14.522 33.522-6.275 9.44-11.48 18.393-11.48 31.959 0 4.379 2.635 8.86 9.313 13.918 6.677 5.058 16.85 9.835 28.226 13.648 11.237 3.767 23.68 6.63 35.23 8.612-4.423-3.207-8.762-6.284-13.123-9.66-7.37-5.707-14.087-11.304-18.853-17.329-2.383-3.012-4.468-6.146-5.307-10.48-.838-4.334.892-10.302 4.518-13.545 11.397-10.194 26.32-13.929 37.21-19.365 5.446-2.718 9.754-5.65 12.481-8.934C309.422 409.71 311 406.17 311 400c0-15.156-6.774-23.149-12.645-32.934-2.935-4.892-6.078-10.847-5.195-18.252.883-7.404 5.71-13.8 13.268-19.843 6.642-5.311 11.513-8.68 14.781-13.67C324.477 310.31 327 302.933 327 288c-.446-2.88-.42-8.795-1.672-10.209z"/></svg>
diff --git a/static/_icons/_character/spiked-halo.svg b/static/_icons/_character/spiked-halo.svg
new file mode 100644
index 00000000..6359871d
--- /dev/null
+++ b/static/_icons/_character/spiked-halo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m257.65 19.033-47.552 85.598c-51.53 16.016-91.8 57.678-105.877 110.026L33.407 252.25l69.276 38.486c5.942 26.33 18.456 50.18 35.722 69.737a95.326 95.326 0 0 1 20.547-21.162c-19.19-22.513-30.794-51.682-30.794-83.51 0-71.074 57.838-128.488 128.912-128.488 71.077 0 128.49 57.412 128.49 128.49 0 30.006-10.234 57.65-27.408 79.583 8.525 5.88 15.612 12.795 21.413 20.592 15.176-18.532 26.235-40.563 31.77-64.692l70.263-39.035-71.826-38.13c-14.312-52.475-54.968-94.123-106.856-109.825L257.65 19.033zm.266 150.33c-17.56 0-33.686 9.02-45.902 24.647-12.217 15.626-20.09 37.754-20.09 62.373 0 26.12 9.218 49.343 22.846 65.148l10.14 11.76-15.14 3.452c-38.027 8.67-55.962 26.396-66.48 54.268-9.788 25.934-11.75 61.67-11.99 104.236h254.473c-.047-42.74-.66-79.348-9.683-105.814-9.693-28.432-27.11-46.38-67.99-54.38l-15.272-2.99 9.817-12.076c12.778-15.718 21.267-38.404 21.267-63.603 0-24.62-7.875-46.747-20.092-62.373-12.216-15.626-28.343-24.647-45.902-24.647h-.002z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/swordwoman.svg b/static/_icons/_character/swordwoman.svg
new file mode 100644
index 00000000..170db8b1
--- /dev/null
+++ b/static/_icons/_character/swordwoman.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M467.838 35.848c-53.208 3.518-101.284 8.091-139.14 50.18 9.869 29.563 26.168 65.884 46.613 95.234 20.504 29.436 44.758 50.59 68.61 53.297 35.265-33.057 53.699-112.599 23.917-198.711zM194.207 44.36c-.962.02-1.94.066-2.937.139-16.94 1.247-26.293 7.65-33.825 17.941-7.532 10.291-12.558 25.017-17.384 41.317-5.43 18.334-6.273 41.726-1.663 60.482 4.528 18.418 13.492 31.204 26.94 34.455.188-1.168.42-2.526.605-4.502.82-8.766 3.214-23.576 14.891-42.714-7.75-7.452-14.67-13.694-18.121-22.618-2.074-5.361-2.392-11.595-.84-17.992 1.552-6.396 4.726-13.139 9.615-21.26l.037-.06.037-.06c8.568-13.674 26.544-21.686 43.514-27.745 5.395-1.926 10.528-3.402 15.422-4.652-11.153-7.45-21.857-13.03-36.291-12.73zm45.07 27.002c-5.416 1.164-12.07 3.04-18.82 5.45-15.466 5.521-31.427 14.998-35.309 21.138-4.38 7.29-6.778 12.784-7.726 16.692-.952 3.925-.7 6.08.215 8.447 1.831 4.735 8.77 11.123 19.093 21.592l4.616 4.68-3.698 5.437c-5.348 7.864-8.79 14.564-11.072 20.351a70.936 54.43 66.039 0 0 17.928 6.88c2.391 57.506-19.43 43.882-70.535 73.605l15.888 31.69c26.64-10.285 42.457-16.219 56.041-28.891 11.993 12.066 26.85 22.39 44.155 33.437-.035 11.558-51.405 80.237-52.492 79.875a30.273 30.273 0 0 0 3.261 3.242c29.1 9.088 53.46 8.208 75.89 1.272.097-.294.2-.588.296-.881 12.757-4.462 25.877-10.432 38.629-17.43 20.587-12.745 40.445-29.295 61.107-45.845-10.31-22.79-41.559-34.836-62.133-43.946 9.77-20.016 5.393-41.39 2.516-60.55 18.737-1.992 33.016-7.841 46.527-15.145-.488-.689-.989-1.363-1.472-2.057-7.049-10.118-13.588-20.911-19.56-31.931-28.224 12.084-59.03 16.997-90.142.855a70.936 54.43 66.039 0 0-.117-66.955 70.936 54.43 66.039 0 0-13.086-21.012zM15.471 87.31l3.287 34.09 52.6 107.77 21.568-10.526-52.383-107.325-25.072-24.01zm97.066 139.566-46.756 22.822 3.137 18.496 56.271-27.464-12.652-13.854zm2.318 36.701-21.568 10.528 16.668 34.15 21.568-10.527-16.668-34.15zm255.858 73.934c-12.264 9.86-24.631 19.557-37.522 28.209 26.448 38.685 47.77 79.923 73.047 117.004l35.82-14.75c-26.576-46.832-44.463-82.605-71.345-130.463zm-100.254 56.808c-15.27 3.338-31.566 4.213-49.07 1.727-7.565 29.607-17.662 59.909-25.95 94.04l33.711 4.917c13.214-31.921 28.812-66.285 41.309-100.684z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/weight-lifting-up.svg b/static/_icons/_character/weight-lifting-up.svg
new file mode 100644
index 00000000..3d354638
--- /dev/null
+++ b/static/_icons/_character/weight-lifting-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m77.492 18.457-17.726 3.127L69.09 74.47a1630.67 1630.67 0 0 0-15.8 2.54l-6.503-36.89-17.726 3.124 6.49 36.795a1877.847 1877.847 0 0 0-17.196 3.112l3.292 17.696c5.728-1.066 11.397-2.09 17.028-3.084l7.056 40.02 17.727-3.124-7.04-39.93c5.304-.88 10.57-1.725 15.798-2.54l9.777 55.45 17.727-3.126-9.697-54.99a1415.91 1415.91 0 0 1 25.18-3.38c15.54 46.39 34.697 99.995 66.936 134.448C190.86 250.992 192 268 214.56 310 192 348 176 412 167.21 471l-48 6v15H192c16-48 64-144 64-144s48 96 64 144h72.79v-15l-48-6C336 412 320 348 294 310c26-42 24.175-59.585 35.83-89.377 32.25-34.452 51.42-88.075 66.967-134.478 8.314 1.04 16.697 2.16 25.18 3.38l-9.696 54.99 17.728 3.124 9.777-55.45c5.23.815 10.494 1.66 15.8 2.54l-7.042 39.93 17.727 3.125 7.056-40.02c5.63.993 11.3 2.017 17.028 3.083l3.292-17.696c-5.78-1.075-11.507-2.11-17.195-3.113l6.49-36.796-17.727-3.125-6.504 36.89a1564.46 1564.46 0 0 0-15.8-2.54l9.324-52.886-17.726-3.127-9.406 53.35C365.982 63.31 310.982 59.04 256 59.04c-54.98 0-109.983 4.27-169.102 12.767l-9.406-53.35zM256 76.98c35.53 0 71.07 1.83 107.822 5.463-14.082 34.858-38.454 73.504-63.203 101.967C290.293 199.27 274.35 209 256 209s-34.294-9.73-44.62-24.59c-24.748-28.463-49.12-67.11-63.202-101.967 36.75-3.633 72.29-5.463 107.822-5.463zM256 97c-20.835 0-39 20.24-39 47s18.165 47 39 47 39-20.24 39-47-18.165-47-39-47z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_character/wisdom.svg b/static/_icons/_character/wisdom.svg
new file mode 100644
index 00000000..fc1e91a0
--- /dev/null
+++ b/static/_icons/_character/wisdom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M66.89 18 128 128 18 117v32.5L96 208l-78 39v35l110 22-3.6 16c-12.6 12.1-21.9 26.5-28.46 42.5-14.43 35.2-16.64 85.7-16.9 131.5h18.1c.34-44.1 2.78-93.8 15.46-124.7 8.9-21.9 22.4-39.6 44.6-52.1-4.1-22-6.2-43.5-6.2-61.2v-14.6l13 6.6c9.6 4.7 16.5 6.2 23.1 5.7-5.2-14-8.1-29.6-8.1-45.7 0-29.1 9.1-55.2 23.3-73.7 14.2-18.5 33.1-29.3 53.7-29.3s39.5 10.8 53.7 29.3c14.2 18.5 23.3 44.6 23.3 73.7 0 16.1-2.9 31.7-8.1 45.7 6.6.5 13.6-1 23.1-5.7l13-6.6V256c0 17.7-2.1 39.2-6.2 61.2 22.2 12.5 35.7 30.2 44.6 52.1 12.7 30.9 15.1 80.6 15.5 124.7H433c-.3-45.8-2.5-96.3-16.9-131.5-6.6-16-15.9-30.5-28.6-42.6L384 304l110-22v-35l-78-39 78-58.5V117l-110 11 61.1-110h-37.8L304 80l-18.6-62h-58.8L208 80 104.7 18zM208 215v18h32v-18zm64 0v18h32v-18zm-33.6 36.1c-12.7 6.7-23.7 13.5-35.6 17.4-10 3.4-21.1 4.1-33.3.8.5 8 1.3 16.7 2.4 25.7 27.2-.4 51.7-3.3 77.7-29.4l1.7-1.6zm35.2 0L260.7 264l1.7 1.6c26 26.1 50.5 29 77.7 29.4 1.1-9 1.9-17.7 2.4-25.7-12.2 3.3-23.3 2.6-33.3-.8-11.9-3.9-22.9-10.7-35.6-17.4zM256 284.3c-27 23.7-55.2 27.8-81.3 28.5 1.7 9 3.6 18 6 26.9 2.2 8.3 4.8 16.3 7.6 23.9C193.9 353.1 201 343 208 336c0 21-6.9 35-11.6 46.8 3.8 7.6 7.8 14.4 12.1 20l24.5-24.5V400c0 14.5 2.8 19.1 7.4 23.6 3.4 3.5 9.1 6.9 15.6 12.3 6.5-5.4 12.2-8.8 15.6-12.3 4.6-4.5 7.4-9.1 7.4-23.6v-21.7l24.5 24.5c4.3-5.6 8.3-12.4 12.1-20C310.9 371 304 357 304 336c7 7 14.1 17.1 19.7 27.6 2.8-7.6 5.4-15.6 7.6-23.9 2.4-8.9 4.3-17.9 6-26.9-26.1-.7-54.3-4.8-81.3-28.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/belt-armor.svg b/static/_icons/_equipment/belt-armor.svg
new file mode 100644
index 00000000..336897e7
--- /dev/null
+++ b/static/_icons/_equipment/belt-armor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M41.637 149.081c-8 8-12.614 12.191-15.688 18.338a24.99 24.99 0 0 0-.762 1.693c2.524 3.111 8.067 7.313 15.913 11.319.122-2.589.387-3.834.95-4.961.927-1.854 4.313-5.662 12.313-13.662zm428.726 0-12.726 12.727c8 8 11.386 11.808 12.312 13.662.564 1.127.829 2.372.951 4.96 7.846-4.005 13.39-8.207 15.913-11.318a24.987 24.987 0 0 0-.762-1.693c-3.074-6.147-7.688-10.338-15.688-18.338zM25 192.235v40.46c2.57 3.827 8.588 8.77 17.594 13.35-.09-7.824-.051-16.625.42-25.1.371-6.692.974-13.156 2.113-19.067a179.38 179.38 0 0 1-2.768-1.098c-6.406-2.606-12.164-5.418-17.359-8.545zm462 0c-5.195 3.127-10.953 5.94-17.36 8.545-.91.37-1.834.736-2.767 1.098 1.139 5.911 1.742 12.375 2.113 19.066.471 8.476.51 17.277.42 25.102 9.006-4.58 15.024-9.524 17.594-13.352zm-287.947 4.21-28.782 116.92L247 362.918v-53.037l32-16v-36.875l-32-16v-44.563zm65.947 0v33.437l32 16v59.125l-32 16v41.912l76.727-49.555-28.78-116.92zm-202.592 11.32c-.652 4.18-1.138 9.07-1.422 14.18-.6 10.81-.439 22.186-.238 31.54 10.017 3.447 21.35 6.541 33.205 9.176 3.023.672 6.078 1.305 9.143 1.916.167-11.67.634-24.206 1.959-36.127.382-3.437.808-6.83 1.314-10.152a577.925 577.925 0 0 1-10.223-2.047c-11.617-2.446-23.062-5.26-33.738-8.486zm387.184 0c-10.676 3.225-22.121 6.04-33.738 8.486a577.929 577.929 0 0 1-10.223 2.047c.506 3.321.932 6.715 1.314 10.152 1.325 11.921 1.792 24.456 1.96 36.127 3.064-.611 6.12-1.244 9.142-1.916 11.855-2.635 23.188-5.729 33.205-9.176.201-9.354.362-20.73-.238-31.54-.284-5.11-.77-10-1.422-14.18zm-325.36 13.69a143.349 143.349 0 0 0-1.287 8.983c-1.33 11.97-1.744 25.1-1.877 37.372a552.7 552.7 0 0 0 40.65 5.002l11.18-45.418c-13.402-1.03-30.389-2.98-48.666-5.94zm263.536 0c-18.277 2.96-35.264 4.909-48.666 5.939l11.18 45.418a552.7 552.7 0 0 0 40.65-5.002c-.133-12.272-.547-25.402-1.877-37.372-.345-3.098-.78-6.102-1.287-8.984zm-360.682 36.76 1.447 24.82c34.692 13.847 77.37 23.68 123.403 29.513l5.396-21.92c-20.851-1.924-44.708-5.38-67.283-10.397-18.38-4.084-35.837-9.177-50.203-15.562-4.55-2.022-8.838-4.14-12.76-6.453zm457.828 0c-3.922 2.314-8.21 4.432-12.76 6.454-14.366 6.385-31.824 11.478-50.203 15.562-22.575 5.017-46.432 8.473-67.283 10.397l5.396 21.92c46.033-5.834 88.711-15.666 123.403-29.514z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/cape-armor.svg b/static/_icons/_equipment/cape-armor.svg
new file mode 100644
index 00000000..0d004d2d
--- /dev/null
+++ b/static/_icons/_equipment/cape-armor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M155.8 25.14c-30.2.34-63.52 4.32-88.77 13.34-13.21 4.71-24.1 10.78-31.26 17.73-4.74 4.6-7.78 9.44-9.39 14.9 33.34.04 92.02 1.38 132.22 28.78 9.7-12.64 12-27.08 10.5-40.9-1.6-14.1-7.8-26.92-13.3-33.85zm200.4 0c-5.5 6.93-11.7 19.75-13.3 33.85-1.5 13.82.8 28.26 10.5 40.9 40.2-27.4 98.9-28.78 132.2-28.78-1.6-5.46-4.6-10.3-9.4-14.9-7.1-6.95-18-13.02-31.2-17.73-25.3-9.02-58.6-13-88.8-13.34zM187.4 66.59c0 7.94-1.2 16.14-3.9 24.16C205.8 112.5 231 123 256 123s50.2-10.5 72.5-32.26c-2.6-7.74-3.8-15.64-3.9-23.31-46.9 7.73-92.6 6.81-137.2-.84zm-84.3 30.26c-.8 15.65-1.8 32.45-3.24 50.25 9.44-3.2 19.54-8.2 29.14-14.6 7.5-5 14.6-10.8 20.8-16.9-12.8-8.9-29.3-14.8-46.7-18.75zm305.8.01c-17.4 3.94-33.9 9.84-46.7 18.74 6.2 6.1 13.3 11.9 20.8 16.9 9.6 6.3 19.7 11.4 29.1 14.6-1.4-17.7-2.4-34.6-3.2-50.24zM178 110.1c-9.6 14.2-23.6 27.1-39 37.4-13 8.7-27 15.5-40.55 18.9 5.35 6 10.95 12.5 16.45 19.3 22.2 14.6 40.8 21.3 61.1 21.3 20.9 0 44.6-7.4 76-23.1l4-2 4 2c31.4 15.7 55.1 23.1 76 23.1 20.3 0 38.9-6.7 61.1-21.3 5.5-6.8 11-13.3 16.4-19.3C400 163 386 156.2 373 147.5c-15.4-10.3-29.4-23.2-39-37.4-23.6 20.3-50.7 30.9-78 30.9-27.3 0-54.4-10.6-78-30.9zm-82.12 80.8c-9.74 94.8-28.76 207-63.29 302.4 24.59-12 50.33-21.9 76.81-29.6-8.3-19.7-16.54-50.7-5.9-82.5 14.3-43.2 40.6-85.3 47.4-95.7-1.4-12.2-11.8-34.7-26.4-56.5-8.7-13.1-18.8-26.3-28.62-38.1zm320.22 0c-9.9 11.8-19.9 25-28.6 38.1-14.6 21.8-25 44.3-26.4 56.5 6.8 10.4 33.1 52.5 47.4 95.7 10.6 31.8 2.4 62.8-5.9 82.5 26.5 7.7 52.2 17.6 76.8 29.6-34.5-95.4-53.5-207.6-63.3-302.4zM247 206.2c-26.7 12.2-49.4 18.8-71 18.8-12.7 0-24.8-2.3-37-6.7.2.3.3.5.5.7 15.2 22.8 27.4 45 29.2 64.4 6.4 5.3 17.9 10.4 32.4 13.8 5.2 1.2 10.8 2.3 16.5 3.1 2.3-4.9 6-9.2 10.4-12.5 5.3-4 11.8-6.7 19-8v-73.6zm18 0v73.6c7.2 1.3 13.7 4 19 8 4.4 3.3 8.1 7.6 10.4 12.5 5.7-.8 11.3-1.9 16.5-3.1 14.5-3.4 26-8.5 32.4-13.8 1.8-19.4 14-41.6 29.2-64.4.2-.2.3-.4.5-.7-12.2 4.4-24.3 6.7-37 6.7-21.6 0-44.3-6.6-71-18.8zm-9 90.8c-7 0-13.2 2.2-17.2 5.2-4.1 3.1-5.8 6.4-5.8 9.8 0 3.4 1.7 6.7 5.8 9.8 4 3 10.2 5.2 17.2 5.2s13.2-2.2 17.2-5.2c4.1-3.1 5.8-6.4 5.8-9.8 0-3.4-1.7-6.7-5.8-9.8-4-3-10.2-5.2-17.2-5.2zm-93.8 4.3c-8.7 14-29.6 49.3-41.7 85.5-13.3 40.1 10.5 80.8 13.8 86.2 30 14.2 75.8 22 121.7 22 45.9 0 91.7-7.8 121.7-22 3.3-5.4 27.1-46.1 13.8-86.2-12.1-36.2-33-71.5-41.7-85.5-9.4 6.1-21.4 10.4-34.7 13.5-6 1.4-12.3 2.6-18.9 3.5-1.7 7.2-6.3 13.4-12.2 17.9-7.5 5.6-17.3 8.8-28 8.8s-20.5-3.2-28-8.8c-5.9-4.5-10.5-10.7-12.2-17.9-6.6-.9-12.9-2.1-18.9-3.5-13.3-3.1-25.3-7.4-34.7-13.5z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/crenel-crown.svg b/static/_icons/_equipment/crenel-crown.svg
new file mode 100644
index 00000000..1c357916
--- /dev/null
+++ b/static/_icons/_equipment/crenel-crown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 68.02 169.7 240.7l14.8 44.5-17 5.6-15.2-45.6-66.42-53-12.18 60.9 12.62 12.6-12.66 12.6-15.21-15.2-30.53-20.4 25.15 163.4 39.17-65.2 89.66 35.8 30.9 46.4h86.4l30.9-46.4 89.7-35.8 39.1 65.2 25.2-163.4-30.6 20.4-15.2 15.2-12.6-12.6 12.6-12.6-12.2-60.9-66.4 53-15.2 45.6-17-5.6 14.8-44.5zm0 122.58 55.7 92.8 1.9 3.2-17.5 70-20.4 20.3h-39.4l-20.4-20.3-17.5-70zm0 34.8-38.4 64 14.5 58 11.6 11.7h24.6l11.6-11.7 14.5-58z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/crossbow.svg b/static/_icons/_equipment/crossbow.svg
new file mode 100644
index 00000000..2c69a162
--- /dev/null
+++ b/static/_icons/_equipment/crossbow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m89.594 18.094-10.75 10.75.03.03 27.532 333.563-83.03 92.938 33.25 33.25 90.155-80.563 336.19 24.907c.06.062.124.124.186.186l.156-.156h.032v-.03l10.562-10.564c-1.676-1.676-3.122-3.437-4.687-5.156-21.332-25.55-25.416-63.24-35.47-109.125-8.323-37.99-21.225-81.042-53.094-125.03l-38.062 50.81c.005.008-.005.026 0 .032 28.988 36.074 46.027 67.766 59.72 96.25 15.017 31.247 26.122 59 44.467 83.688L165.314 391.5 337.53 237.594l64.376-85.97-41.53-41.53-85.907 64.312L122.81 344.094 98.156 45.25c24.68 18.33 52.425 29.426 83.656 44.438 28.49 13.693 60.2 30.72 96.282 59.718l50.812-38.062c-43.99-31.86-87.04-44.736-125.03-53.063C157.987 48.224 120.3 44.113 94.75 22.78c-1.72-1.564-3.48-3.01-5.156-4.686zm317.03.312c-3.385.028-6.862.406-10.28.97-4.558.75-8.992 1.837-12.813 3.093-3.82 1.254-6.776 2.302-9.717 4.624a7.184 7.184 0 0 0-2.72 6.187l5.032 62.345a7.184 7.184 0 0 0 2.063 4.53l33.656 33.626a7.184 7.184 0 0 0 4.5 2.095l62.344 5.03a7.184 7.184 0 0 0 6.218-2.718c2.335-2.944 3.367-5.895 4.625-9.718 1.26-3.824 2.343-8.255 3.095-12.814.752-4.56 1.18-9.198.875-13.625-.305-4.425-1.012-8.99-4.844-12.81L422.78 23.343c-3.822-3.824-8.384-4.54-12.81-4.844a43.643 43.643 0 0 0-3.345-.094zm.126 14.375a29.5 29.5 0 0 1 2.25.064c2.404.165 3.74.915 3.72.78l65.655 65.657c-.138-.023.616 1.318.78 3.72.19 2.746-.062 6.526-.686 10.313-.626 3.786-1.595 7.62-2.595 10.656-.412 1.25-.524 1.272-.938 2.186l-54.78-4.375-29.938-29.936-4.376-54.813c.913-.41.94-.495 2.187-.905 3.037-.998 6.872-1.97 10.658-2.594 2.84-.466 5.662-.728 8.062-.75zm-47.97 120.44-18.936 31.593-204.5 204.468-8.844-.655-1.188-14.563 201.875-201.906 31.594-18.937z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/crossed-sabres.svg b/static/_icons/_equipment/crossed-sabres.svg
new file mode 100644
index 00000000..2cb30a40
--- /dev/null
+++ b/static/_icons/_equipment/crossed-sabres.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M27.084 18.248C-17.903 146.478 143.15 277.92 314.496 381.074c-4.645 13.767-5.585 27.628-3.394 40.635 4.44 26.355 20.974 48.997 42.86 62.425 21.884 13.428 49.776 17.57 75.645 5.765 25.87-11.804 48.69-38.923 62.737-84.654l-17.865-5.488c-13 42.318-32.806 64.094-52.63 73.14-19.825 9.047-40.69 5.998-58.116-4.693-17.425-10.69-30.75-29.095-34.205-49.6-3.455-20.507 2.232-43.318 24.677-65.218 20.743-20.24 32.068-41.615 30.434-61.24l-18.622 1.552c.74 8.89-4.35 22.76-16.684 37.486C222.057 230.8 73.838 128.622 27.084 18.248zm458.05 0C451.34 98.03 364.527 173.53 270.93 247.166c19.492 15.878 39.56 31.622 59.195 45.012 110.756-84.836 187.878-180.243 155.01-273.93zM127.58 292.146c-1.634 19.626 9.69 41 30.434 61.24 22.445 21.9 28.132 44.712 24.677 65.218-3.455 20.506-16.78 38.91-34.206 49.6-17.425 10.692-38.29 13.74-58.115 4.694-19.825-9.046-39.632-30.822-52.63-73.14l-17.865 5.488c14.046 45.73 36.867 72.85 62.736 84.654 25.87 11.805 53.763 7.663 75.648-5.765 21.885-13.428 38.42-36.07 42.86-62.426 2.19-13.005 1.25-26.863-3.393-40.628 13.986-8.42 27.905-17.022 41.648-25.803l-56.967-39.387c-6.55 5.103-13.063 10.2-19.52 15.293C150.55 316.46 145.46 302.59 146.2 293.7l-18.622-1.554zm18.1 73.614c-26.1 8.6-62.087 36.255-77.104 60.324 4.948 8.63 10.393 15.223 16.05 20.14 25.846-8.953 59.85-37.406 74.733-60.257-3.007-6.6-7.454-13.386-13.68-20.207zm220.863 0c-6.225 6.822-10.67 13.61-13.68 20.21 14.886 22.85 48.89 51.3 74.736 60.255 5.656-4.918 11.1-11.51 16.05-20.14-15.018-24.07-51.004-51.724-77.105-60.325z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/crossed-swords.svg b/static/_icons/_equipment/crossed-swords.svg
new file mode 100644
index 00000000..7165fd50
--- /dev/null
+++ b/static/_icons/_equipment/crossed-swords.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M19.75 14.438c59.538 112.29 142.51 202.35 232.28 292.718l3.626 3.75.063-.062c21.827 21.93 44.04 43.923 66.405 66.25-18.856 14.813-38.974 28.2-59.938 40.312l28.532 28.53 68.717-68.717c42.337 27.636 76.286 63.646 104.094 105.81l28.064-28.06c-42.47-27.493-79.74-60.206-106.03-103.876l68.936-68.938-28.53-28.53c-11.115 21.853-24.413 42.015-39.47 60.593-43.852-43.8-86.462-85.842-130.125-125.47-.224-.203-.432-.422-.656-.625C183.624 122.75 108.515 63.91 19.75 14.437zm471.875 0c-83.038 46.28-154.122 100.78-221.97 161.156l22.814 21.562 56.81-56.812 13.22 13.187-56.438 56.44 24.594 23.186c61.802-66.92 117.6-136.92 160.97-218.72zm-329.53 125.906 200.56 200.53a402.965 402.965 0 0 1-13.405 13.032L148.875 153.53l13.22-13.186zm-76.69 113.28-28.5 28.532 68.907 68.906c-26.29 43.673-63.53 76.414-106 103.907l28.063 28.06c27.807-42.164 61.758-78.174 104.094-105.81l68.718 68.717 28.53-28.53c-20.962-12.113-41.08-25.5-59.937-40.313 17.865-17.83 35.61-35.433 53.157-52.97l-24.843-25.655-55.47 55.467c-4.565-4.238-9.014-8.62-13.374-13.062l55.844-55.844-24.53-25.374c-18.28 17.856-36.602 36.06-55.158 54.594-15.068-18.587-28.38-38.758-39.5-60.625z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/dwarf-helmet.svg b/static/_icons/_equipment/dwarf-helmet.svg
new file mode 100644
index 00000000..1ad553df
--- /dev/null
+++ b/static/_icons/_equipment/dwarf-helmet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M240.028 26v221.481L257.065 256l17.037-8.519V26h-34.074zM222.99 60.074c-80.22 0-136.297 56.077-136.297 136.296h119.26l17.037 17.037V60.074zm66.018 0v153.333l17.037-17.037h119.26c0-80.219-56.077-136.296-136.297-136.296zM69.657 213.407v34.074h50.047l-33.01-34.074H69.657zm41.528 0 34.074 34.074h34.074l-34.074-34.074h-34.074zm58.565 0 34.074 34.074h19.167v-8.518l-25.556-25.556H169.75zm144.815 0-25.556 25.556v8.518h19.167l34.074-34.074h-27.685zm52.176 0-34.074 34.074h34.074l34.074-34.074H366.74zm58.565 0-33.01 34.074h50.047v-34.074h-17.037zM86.694 264.52v34.074l120.325 60.694 5.68-36.497-100.449-41.234-8.519-17.037H86.694zm321.575 0-8.519 17.037-100.448 41.234 5.68 36.497 120.324-60.694V264.52h-17.037zm-168.241 2.13L222.99 366.74l34.074 17.037 34.074-17.037-17.037-100.093-17.037 8.519-17.037-8.519zM78.176 314.564l-46.852 41.528v59.63l61.76-93.704-14.908-7.454zm355.648 0-14.907 7.454 61.759 93.703v-59.63l-46.852-41.527zm-324.768 15.972L40.907 432.759l64.954 44.722 58.565-119.259-55.37-27.685zm293.888 0-55.37 27.685 58.565 119.26 64.954-44.723-68.149-102.222zm-222.546 35.139L120.768 486h89.445l12.778-51.111h25.555v-36.204l-68.148-33.01zm151.204 0-68.148 33.01v36.203h25.555L301.787 486h89.444l-59.63-120.324z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/elf-helmet.svg b/static/_icons/_equipment/elf-helmet.svg
new file mode 100644
index 00000000..f6161c90
--- /dev/null
+++ b/static/_icons/_equipment/elf-helmet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M107.3 26c-4.146 0-8.6 22.976-13.214 42.934l32.187 100.97-39.052-69.726c-2.932 14.342-5.414 28.62-7.002 42.771l43.176 58.246-44.838-36.824c-.435 11.08-.15 22.056 1.078 32.897l45.515 36.597-40.89-13.285c2.558 9.025 5.94 18.077 9.812 27.049l40.819 26.943-30.065-4.312c13.83 26.954 29.823 52.218 38.697 72.506 2.565 5.13 8.023 16.754 10.926 28.168 3.89 15.695-4.529 35.939-21.271 38.322 12.285-14.291 13.245-23.507 11.02-32.535-13.242-.192-19.112 15.916-19.112 15.916s-12.527 23.473 15.717 59.369c28.244 35.895 67.176 33.974 67.176 33.974s-2.243-55.044-1.036-79.96c1.22-25.165 8.354-69.758 8.354-69.758s-19.998.093-42.443-15.8c-28.167-19.942-17.51-32.621-24.663-51.077-14.417-37.201-4.68-95.143-4.68-95.143s-10.858-42.59-17.85-72.822C119.864 76.366 110.398 26 107.3 26zm297.4 0c-3.099 0-12.565 50.366-18.36 75.42-6.993 30.232-17.852 72.822-17.852 72.822s9.738 57.942-4.68 95.143c-7.152 18.456 3.505 31.135-24.662 51.078-22.445 15.892-42.443 15.8-42.443 15.8s7.134 44.592 8.354 69.757c1.207 24.916-1.036 79.962-1.036 79.962s38.932 1.92 67.176-33.976 15.717-59.37 15.717-59.37-5.87-16.107-19.111-15.915c-2.226 9.028-1.266 18.246 11.02 32.537-16.743-2.383-25.162-22.629-21.272-38.324 2.903-11.414 8.361-23.037 10.926-28.168 8.874-20.288 24.868-45.552 38.699-72.506l-30.067 4.312 40.819-26.943c3.872-8.972 7.254-18.024 9.812-27.049l-40.89 13.285 45.515-36.597c1.228-10.84 1.513-21.817 1.078-32.897l-44.838 36.824 43.176-58.246c-1.588-14.15-4.07-28.429-7.002-42.771l-39.052 69.726 32.187-100.968C413.3 48.978 408.846 26 404.7 26zm-148.702.463c-19.388 0-64.1 45.402-88.344 75.728-7.017 8.779-15.795 29.823-15.795 29.823l9.194 37.289s-1.154 8.452-2.604 30.49c-1.091 16.591-1.054 32.803-1.054 32.803l52.677-16.893c4.003-22.545 11.506-52.087 20.246-77.21 7.007-20.141 25.68-58.575 25.68-58.575s19.2 36.655 26.072 56.107c9.115 25.801 15.807 57.482 19.856 79.678l52.678 16.893s.036-16.212-1.055-32.803c-1.45-22.038-2.604-30.49-2.604-30.49l9.194-37.29s-6.09-19.371-12.035-27.349c-24.096-32.334-72.718-78.201-92.106-78.201zm.002 77.09s-10.719 28.18-15.37 50.697c-4.299 20.818-11.898 66.635-11.898 66.635s11.983 11.928 5.682 18.256c-6.301 6.328-17.043-5.705-17.043-5.705l-56.435 17.128 3.337 13.217 53.098 19.854s10.656-12.118 17.043-5.703c6.388 6.414-5.682 23.959-5.682 23.959s3.879 16.06 5.995 24.045c3.45 13.022 10.927 38.908 10.927 38.908l10.344 2.867 10.346-2.867s6.8-24.203 10.047-36.346c2.366-8.85 6.875-26.607 6.875-26.607s-12.07-17.545-5.682-23.96c6.388-6.414 17.043 5.704 17.043 5.704l53.098-19.854 3.337-13.217-56.435-17.128s-10.742 12.033-17.043 5.705c-6.301-6.328 5.682-18.256 5.682-18.256s-7.547-42.316-11.897-65.81C267.12 132.121 256 103.552 256 103.552zm0 136.369c5.02 0 9.088 8.172 9.088 18.254 0 10.081-4.068 18.256-9.088 18.256s-9.09-8.175-9.09-18.256c0-10.082 4.07-18.254 9.09-18.254z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/fishing-pole.svg b/static/_icons/_equipment/fishing-pole.svg
new file mode 100644
index 00000000..ffe75cac
--- /dev/null
+++ b/static/_icons/_equipment/fishing-pole.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M459.36 43.126c-52.275 8.712-112.776 46.666-171.8 96.906-52.19 44.424-102.796 98.724-142.838 152.305l18.672 15.12c13.228-17.734 27.73-35.612 43.078-53.196l-7.84-8.214 13.02-12.43c4.962 5.48 10.23 10.624 15.588 15.98-11.517 38.772-39.2 79.74-72.682 112.528 4.815 3.77 9.285 9.016 11.818 13.726 36.024-34.846 65.698-78.494 78.332-122.087 43.844-16.906 66.78-48.94 89.637-90.875 59.482-8.695 102.554-40.688 126.98-69.985 5.128 13.79 10.162 27.596 12.97 41.098 3.867 18.583 3.758 36.084-4.987 53.32-15.826 31.187-45.75 46.012-69.05 61.634-11.65 7.81-22.287 15.994-26.587 28.74-4.3 12.746-.336 27.582 11.634 44.29 12.763 17.813 31.426 30.763 44.025 43.56 3.362 3.415 6.242 6.77 8.558 10.064a32.642 32.642 0 0 1 21.902 3.244c-.13-.373-.255-.748-.394-1.117-3.633-9.606-10.07-17.534-17.24-24.818-14.343-14.568-32.06-27.236-42.22-41.418-10.282-14.353-11.195-22.164-9.208-28.054 1.987-5.89 8.8-12.334 19.553-19.543 21.504-14.418 56.188-31.21 75.08-68.44 10.993-21.667 10.92-44.166 6.56-65.128-7.15-32.718-19.584-59.43-32.56-87.21zm-12.798 13.172 7.666 16.46c-19.566 27.352-61.308 63.002-121.12 72.202l-4.183-7.598c37.565-29.052 74.82-51.47 106.934-63.097l-4.896-11.07zm-138.37 82.662c3.517 5.194 7.076 10.895 9.946 16.133-21.795 39.982-40.676 66.46-78.537 81.41l-8.94-8.94c22.38-23.795 48.04-48.565 71.984-69.115l-5.57-7.723zM132.14 305.31l-8.81 10.88 23.316 18.88 8.808-10.882zM112 330.18 17.338 447.088c.033.307.18 1.134.828 2.404 1.395 2.734 4.697 6.665 8.582 9.812 3.886 3.146 8.42 5.56 11.383 6.355 1.378.37 2.216.34 2.524.307l49.72-61.403c-2.815-11.952-.31-25.042 7.965-35.26 8.273-10.218 20.556-15.395 32.833-15.127l4.143-5.115zm17.99 41.866c-6.608.054-13.126 2.98-17.66 8.58-8.06 9.955-6.555 24.29 3.4 32.35 9.955 8.06 24.29 6.552 32.35-3.403.47-.58.904-1.178 1.31-1.787l17.537 3.23-7.062 38.354 17.7 3.26 10.325-56.057-35.19-6.48c-1.09-4.877-3.79-9.44-8.023-12.868-4.355-3.526-9.548-5.222-14.687-5.18zm314.343 20.918c-8.39 0-15 6.61-15 15 0 5.16 2.507 9.642 6.385 12.332-.485 4.442-1.343 9.902-2.932 15.05-3.453 10.063-8.195 17.16-17.492 15.186-7.036-2.698-7.764-9.982-7.37-16.176l12.636-.213-26.694-40.82c-1.9 6.86-5.49 34.502-3.615 50.008.625 4.574 2.016 9.724 5.355 14.466 3.338 4.742 8.884 8.768 15.767 10.304 10.428 2.328 20.3-.8 26.63-6.65 6.33-5.85 9.723-13.474 11.984-20.795 2.397-7.764 3.458-15.483 3.94-21.088 3.32-2.733 5.407-6.887 5.407-11.603 0-8.39-6.61-15-15-15z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/flail.svg b/static/_icons/_equipment/flail.svg
new file mode 100644
index 00000000..9f2851f6
--- /dev/null
+++ b/static/_icons/_equipment/flail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M157.536 14.885c-7.895.044-15.766 1.753-22.812 5.17-4.184 2.029-7.855 5.023-10.563 8.752a28.094 28.094 0 0 0-1.691-.154 29.198 29.198 0 0 0-6.975.447c-17.601 3.257-33.382 16.254-39.95 32.906-2.143 5.435-2.662 11.442-1.198 17.084a29.476 29.476 0 0 0-2.957 3c-11.604 13.63-15.65 33.67-10.24 50.733 1.583 4.995 4.47 9.524 8.437 12.898-2.69 17.558 4.225 36.588 17.59 48.29a29.244 29.244 0 0 0 5.42 3.751c-.262 1.3-.447 2.62-.532 3.95-.018.296-.027.593-.04.89l17.913 13.006c-1.439-4.37-2.164-8.83-1.906-12.881.039-.603.21-1.275.434-1.963a25.133 25.133 0 0 0 5.133-1.256 24.917 24.917 0 0 0 8.812-5.455c.722.272 1.374.593 1.893.965 9.29 6.664 16.246 21.344 15.52 32.754-.14 2.171-1.658 5.117-3.317 7.127l13.277 9.64c3.611-4.449 5.64-10.014 6.006-15.75v-.001c1.137-17.864-7.615-36.34-22.16-46.772a29.456 29.456 0 0 0-3.46-2.125c.105-.485.203-.97.282-1.46 2.811-17.362-3.828-36.227-16.834-48.065 5.324-11.395 6.711-24.748 3.522-36.854 10.306-4.818 19.168-12.943 24.71-22.842 11.981 4.36 25.644 4.433 37.575.032a56.285 56.285 0 0 0 2.931 5.078l13.428-9.36a46.072 46.072 0 0 1-2.615-4.746c3.486-4.089 5.759-9.222 6.078-15.058a24.948 24.948 0 0 0-1.025-8.578c.343-.017.686-.038 1.039-.034 2.075.025 4.237.408 5.635 1.184 4.699 2.608 9.076 7.045 12.472 12.191l13.42-9.353c-4.674-6.927-10.88-12.807-18.127-16.828-4.101-2.277-8.706-3.563-13.355-3.614a25.067 25.067 0 0 0-11.176 2.479 29.639 29.639 0 0 0-1.727-1.182c-7.58-4.76-16.473-7.419-25.484-7.912a56.263 56.263 0 0 0-3.383-.084zm.649 16.342c6.538.098 13.14 1.586 18.27 4.371-2.127 4.294-3.062 9.132-2.811 13.955a49.76 49.76 0 0 0 .675 5.93c-8.186 2.972-19.017 2.822-27.59-.203.267-6.107-1.486-12.277-5.712-17.408a25.413 25.413 0 0 0-1.584-1.739c.746-.721 1.524-1.32 2.271-1.681 3.858-1.87 8.551-2.914 13.42-3.168a45.655 45.655 0 0 1 3.06-.057zm-38.817 13.512c.308 7.11 3.59 13.374 8.541 17.947-4.046 6.89-11.205 13.193-18.701 16.664-3.338-3.21-7.55-5.557-12.482-6.553a25.331 25.331 0 0 0-3.684-.466 24.812 24.812 0 0 0-3.143.035c-.082-1.663.063-3.302.532-4.49 4.194-10.636 16.732-20.964 27.974-23.044.3-.055.626-.08.963-.093zm114.418 14.7-36.834 25.67 25.776 36.643 36.832-25.67-25.774-36.642zM83.382 92.705c5.295 4.06 11.868 5.706 18.35 5.195 1.827 7.68.695 17.308-2.631 25.191a25.169 25.169 0 0 0-5.455-.306c-2.372.128-4.77.597-7.147 1.453a24.937 24.937 0 0 0-9.102 5.719c-.433-.67-.797-1.34-.996-1.967-3.423-10.803-.291-26.531 6.98-35.285zm185.385 16.464-36.836 25.67 202.152 287.389c16.044-4.381 26.872-13.822 36.592-26.014L268.767 109.168zm-164.315 34.653c7.388 8.012 11.88 21.705 10.205 32.052a6.868 6.868 0 0 1-.26 1.018 24.96 24.96 0 0 0-14.027 6.602c-1.042-.424-1.983-.932-2.654-1.52-7.666-6.711-12.853-19.574-12.602-30.283 7.402.23 14.248-2.858 19.338-7.87zm109.809 56.125-32.358 40.008c11.434 1.45 22.812 4.794 33.713 10.152l-1.355-50.16zm-132.4 14.802 21.052 90.711c21.548 5.7 50.394-10.025 53.865-35.427l-22.441-16.56c.142-.024.285-.04.428-.065l-32.147-23.342L81.86 214.75zm85.683 36.325c-4.88.042-9.731.462-14.512 1.242 5.45 3.805 8.178 5.902 16.334 11.348l-.215 3.914c-1.938 37.127-42.47 59.73-73.384 48.263l-3.032-1.119-.73-3.152-3.865-16.63a97.082 97.082 0 0 0-4.916 8.67C59.58 350.683 78.51 407.838 125.57 431.476a97.273 97.273 0 0 0 7.399 3.336l-11.721-24.957-1.377-2.938 1.693-2.744c14.587-23.775 48.909-33.238 74.975-20.308a53.057 53.057 0 0 1 16.385 12.63l2.15 2.43-.877 3.131-8.863 32.09c20.149-8.492 37.491-23.932 48.094-45.041a95.956 95.956 0 0 0 6.7-17.32l-5.167 3.894-2.572 1.944-3.05-1.084c-31.07-11.03-47.65-54.369-25.32-84.094l2.526-2.303 2.63-.094 16.755 1.028c-8.716-12.248-20.463-22.612-34.85-29.838l-.002-.002c-14.001-7.033-28.896-10.29-43.535-10.162zm-94.865 46.79-55.323 3.005 44.358 33.937a106.829 106.829 0 0 1 10.785-36.582c.06-.12.12-.24.182-.36h-.002zm159.24 4.385c-13.636 21.718-1.562 52.29 18.627 61.733l74.324-56.08-92.951-5.653zm-60.53 88.221c-14.845.025-29.662 6.595-37.786 17.46l41.896 89.187 26.195-94.899c-3.215-3.134-6.79-5.678-10.668-7.513-6.134-2.905-12.888-4.246-19.636-4.235zm89.089 10.707a106.498 106.498 0 0 1-25.391 29.09l51.707 20.29-26.316-49.38zM80.27 407.553l-21.922 55.942 51.3-27.373a106.398 106.398 0 0 1-29.378-28.569zm399.925 2.195c-9.482 10.994-21.087 20.68-36.472 26.184l14.078 20.014c17.865-2.03 29.077-10.407 36.842-25.658l-14.448-20.54z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/flanged-mace.svg b/static/_icons/_equipment/flanged-mace.svg
new file mode 100644
index 00000000..4718b8f7
--- /dev/null
+++ b/static/_icons/_equipment/flanged-mace.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M487.666 24.334c-24.62 11.186-45.546 18.608-63.14 21.9l41.24 41.24c3.292-17.594 10.714-38.52 21.9-63.14zm-86.082 24.414c-32.088 11.49-60.035 12.74-84.406 4.617l-9.674-3.222-1.998 9.996c-10.117 50.582-18.887 83.28-36.71 121.694l61.37 61.37c38.413-17.823 71.112-26.593 121.695-36.71l9.997-1.998-3.222-9.674c-8.124-24.37-6.873-52.318 4.617-84.406zm2.025 18.148c-13.847 11.685-29.848 19.95-55.34 19.95h-5.56l-2.487 4.974c-18.768 37.536-37.835 74.907-55.494 98.27 17.45-37.59 26.875-71.046 36.4-117.088 25.205 6.06 52.813 3.84 82.48-6.106zm7.902 16.276L303.65 194.957c17.364-24.354 33.734-57.204 50.276-90.32 24.903-1.193 42.88-10.125 57.586-21.465zm17.316 17.316c-11.34 14.707-20.272 32.683-21.465 57.586-33.116 16.542-65.966 32.912-90.32 50.276zm16.276 7.903c-9.945 29.667-12.166 57.275-6.106 82.48-46.042 9.525-79.5 18.95-117.088 36.4 23.363-17.658 60.734-36.725 98.27-55.493l4.974-2.488v-5.56c0-25.492 8.265-41.493 19.95-55.34zm-192.292 82.915-12.728 12.728 67.883 67.883 12.728-12.728-7.67-7.67-52.543-52.543zm-6.363 41.718-43.843 43.842 32.528 32.528 43.842-43.842zm-67.884 45.256-12.728 12.728 55.154 55.154 12.73-12.728zm-14.142 36.77-41.012 41.01 32.527 32.528 41.01-41.012zM99.37 357.474l-12.727 12.728 55.154 55.154 12.728-12.728zm-14.14 36.77L18 461.472V494h32.527l67.23-67.23z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/gauntlet.svg b/static/_icons/_equipment/gauntlet.svg
new file mode 100644
index 00000000..8dc27f46
--- /dev/null
+++ b/static/_icons/_equipment/gauntlet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M123.153 24.602c-11.349.764-48.792 83.005-63.545 132.174-8.046 26.818 2.983 74.734 41.723 106.45 8.813-1.502 16.946-3.047 24.434-4.626-22.473-24.22-39.048-50.488-47.772-82.059l-1.021-3.699 1.963-3.299c26.135-43.925 37.681-68.548 50.85-112.24l3.849-12.773 10.402 8.351c14.624 11.743 23.72 18.084 32.098 21.809-14.428-22.99-31.841-41.36-52.46-50.06a2.164 2.164 0 0 0-.52-.028zm19.791 50.203c-11.724 36.176-24.141 62.49-46.508 100.379 9.004 29.978 25.746 54.616 49.733 78.65 18.744-4.857 32.588-9.929 43.383-14.978 16.875-7.894 26.514-15.73 36.92-23.701-6.532-34.91-18.944-80.14-38.018-118.375-14.754-2.769-27.196-8.373-45.51-21.975zm90.094 158.008c-9.156 7.022-19.796 14.833-35.861 22.347-17.365 8.123-40.947 15.887-76.29 22.793 35.349 28.759 64.905 62.213 112.643 82.157 2.79-15.613 10.509-29.532 20.61-39.782 9.547-9.688 21.609-16.383 34.252-16.82 2.202-5.202 5.378-10.557 10.593-14.93 6.41-5.374 15.626-8.323 26.932-8.156a35.046 35.046 0 0 1 4.807-5.424c-7.384-1.603-16.19-3.168-27.145-5.586zm120.275 50.299c-.04.009-.084.012-.125.021-11.264 3.729-12.514 6.776-16.947 16.078-8.484-1.005-19.247-2.081-25.69 3.16-6.017 6.313-7.279 12.696-9.685 20.715-14.012-3.276-25.77 1.842-33.904 9.877-8.032 8.15-14.35 20.016-16.082 32.65 5.926 2.628 12.109 4.214 18.139 5.727 12.69-15.498 32.27-33.513 50.66-36.851 12.995-13.444 28.669-18.08 41.183-19.891a60.105 60.105 0 0 1 11.764-8.4c-6.632-11.786-12.405-18.622-19.313-23.086zm-232.011 18.882c-1.967 12.934-7.997 24.573-.64 46.305 32.36 70.655 41.042 23.73 93.735 22.953-38.944-18.938-66.126-45.737-93.095-69.258zm267.765 17.102c-4.87.972-9.343 3.536-13.062 6.28 9.197 12.249 16.987 27.313 23.28 43.81 7.916-2.052 14.75-4.612 21.103-7.506-6.473-26.762-18.951-37.976-31.32-42.584zm-29.935 13.906c-7.676 1.509-15.588 4.36-22.774 10.35 8.367 8.844 20.976 24.773 26.053 43.283 7.632-1.268 15.91-3.698 21.006-8.576-6.608-17.858-15.058-33.73-24.285-45.057zm-38.139 19.668c-14.313 5.357-25.257 14.981-34.674 25.938l19.383 26.324c13.696-1.49 26.639-6.254 39.39-13.299-4.69-15.098-18.62-32.912-24.447-38.607zm108.848 24.365c-6.679 3.099-13.973 5.985-22.237 8.375 6.323 10.32 11.618 21.138 15.602 32.543 7.703-3.07 14.902-6.372 21.264-10.082-3.964-11.28-8.68-22.055-14.63-30.836zM164.687 408.39l49.638 43.377c11.274-13.516 27.044-23.94 42.492-33.942l-22.02-25.32c-24.334-8.01-52.756 2.355-70.11 15.885zM391.9 394.153c-6.866 5.056-14.143 7.727-21.795 9.377 5.371 9.31 10.375 19.502 14.354 29.755 7.946-2.139 15.451-4.432 22.344-7.775-3.648-10.897-8.68-21.303-14.903-31.357zm-39.88 14.105c-11.759 6.313-24.191 11.162-37.42 13.545l13.316 27.447c14.663-2.177 28.099-3.684 39.666-9.746-4.195-10.706-9.777-21.706-15.563-31.246zm98.017 17.156c-6.627 3.604-13.647 6.703-20.846 9.534 2.83 7.167 5.28 14.119 7.21 20.757 10.397-1.435 20.263-5.912 18.179-13.869-1.423-5.296-2.923-10.83-4.543-16.422zM268.82 431.54c-16.062 10.564-31.09 20.975-40.728 32.256l1.392 1.217c16.648 14.548 36.256 20.475 44.95 9.13 8.522-11.12 10.536-24.116-5.614-42.603zm144.01 10.957c-7.166 3.334-14.4 5.634-21.465 7.58 3.051 6.991 5.842 13.849 8.244 20.48 9.2-.457 17.732-4.025 19.33-10.442-1.622-5.49-3.688-11.409-6.109-17.618zm-38.437 13.69c-12.724 6.396-25.866 8.467-38.184 10.154l6 12.367c10.038 10.705 32.656 11.336 42.21 2.944-2.654-7.907-6.1-16.516-10.026-25.465z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/jewel-crown.svg b/static/_icons/_equipment/jewel-crown.svg
new file mode 100644
index 00000000..70d4a938
--- /dev/null
+++ b/static/_icons/_equipment/jewel-crown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 77.527c-28.554 59.928-54.586 129.729-55.912 171.23 8.106 8.904 15.512 20.237 21.314 31.84 6.48 12.959 11.159 25.504 11.159 36.714v7.162l-6.946 1.736c-66.268 16.567-117.525 16.69-168.181-.195l-6.272-2.092v-6.611c0-15.216-1.409-46.505 15.164-67.383a30.878 30.878 0 0 0-4.385-6.205c-4.186-4.627-10.398-9.935-17.129-14.743-6.73-4.807-14.012-9.164-20.302-12.193-1.295-.623-2.295-.892-3.51-1.38.946 26.658 4.726 70.82 11.693 112.624 2.773 16.637 6.043 32.722 9.715 46.89 151.612 14.462 275.572 14.462 427.184 0 3.672-14.168 6.942-30.253 9.715-46.89 6.967-41.803 10.747-85.966 11.693-112.625-1.215.489-2.215.758-3.51 1.381-6.29 3.029-13.572 7.386-20.303 12.193-6.73 4.808-12.942 10.116-17.128 14.743a31.68 31.68 0 0 0-4.32 6.088c17.421 20.991 15.099 52.656 15.099 67.5v6.61l-6.272 2.093c-50.656 16.885-101.913 16.762-168.181.195l-6.946-1.736v-7.162c0-11.21 4.68-23.755 11.159-36.713 5.802-11.604 13.208-22.937 21.314-31.84-1.326-41.502-27.358-111.303-55.912-171.23zm0 31.963 42.541 127.623L256 300.926l-42.541-63.813 34.002-102.008L256 109.49zm0 56.922-22.682 68.043 7.621 11.43c5.09-24.4 12.37-47.622 22.932-55.86L256 166.412zM47.852 393.508c5.502 16.226 12.645 26.698 15.904 29.09 128.174 15.834 256.314 15.834 384.488 0 3.259-2.392 10.402-12.865 15.904-29.09-146.943 13.646-269.353 13.646-416.296 0z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/lamellar.svg b/static/_icons/_equipment/lamellar.svg
new file mode 100644
index 00000000..e8021403
--- /dev/null
+++ b/static/_icons/_equipment/lamellar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M158.094 75.156c-20.642 13.654-46.023 22.503-69.438 26.03 6.792 48.935 26.14 84.133 45.97 97.845 10.523 7.28 20.357 9.012 30.405 5.564 8.93-3.064 18.63-10.97 27.75-25.594-26.933-30.227-31.606-71.05-34.686-103.844zM355 75.25c-3.08 32.79-7.787 73.58-34.72 103.78 9.117 14.61 18.857 22.5 27.783 25.564 10.047 3.448 19.85 1.715 30.375-5.563 19.8-13.693 39.12-48.822 45.937-97.655-24.495-3.17-47.802-11.35-69.375-26.125zm-98.5 12.97c-31.2 0-58.752 6.99-75.47 17.655.988 5.463 2.15 10.912 3.564 16.25 16.138-6.942 42.334-11.47 71.937-11.47 29.604 0 55.8 4.528 71.94 11.47 1.412-5.338 2.575-10.787 3.56-16.25C315.31 95.203 287.716 88.22 256.5 88.22zM75.406 132.374l-47.72 45.47c29.75 37.184 63.04 56.826 86.47 58.718 1.145.092 2.253.135 3.344.156a226.987 226.987 0 0 1 6.5-22.345c-21.724-15.023-39.014-43.736-48.594-82zm362.25 0c-9.59 38.26-26.87 66.978-48.594 82-.03.022-.062.04-.093.063a228.142 228.142 0 0 1 6.53 22.28c1.11-.02 2.24-.06 3.406-.155 23.434-1.892 56.75-21.525 86.5-58.72l-47.75-45.468zm-245 12.47c4.54 9.7 10.45 18.604 18.25 26.155l5.125 4.97-3.436 6.218a133.77 133.77 0 0 1-5.594 9.312c32.592 11.965 67.862 11.136 98.938-.188a133.39 133.39 0 0 1-5.47-9.125l-3.406-6.218 5.094-4.97c7.53-7.29 13.308-15.846 17.78-25.156-43.627 10.534-85.4 8.503-127.28-1zm125.5 61.81c-38.403 15.68-83.03 16.82-123.406.157-7.3 7.37-15.218 12.574-23.656 15.47-9.922 3.404-20.24 3.312-30.063.374-6.907 20.592-10.78 42.597-10.78 64.406 0 7.314.562 14.825 1.656 22.47l122.406-29.907 2.22-.563 2.218.563 122.75 29.97c.886-7.647 1.344-15.173 1.344-22.533 0-21.79-3.89-43.792-10.844-64.375-9.812 2.928-20.122 2.995-30.03-.406-8.5-2.915-16.472-8.172-23.814-15.624zm158.47 8.564c-25.404 24.168-52.068 38.018-76.22 39.968-.427.034-.855.036-1.28.062a215.632 215.632 0 0 1 2.28 24.406c22.806 3.78 54.723.098 90-14.344l-14.78-50.093zm-440.188.03-14.75 50.063c35.268 14.433 67.17 18.12 89.968 14.343.29-8.18 1.076-16.33 2.28-24.406-.425-.026-.852-.028-1.28-.063-24.146-1.95-50.82-15.777-76.22-39.937zm220.093 83.063-121.06 29.593c1.972 8.128 4.51 16.35 7.5 24.625 33.536-7.734 71.23-11.506 108.5-11.78 2.784-.02 5.564-.018 8.343 0 40.257.264 79.61 4.576 112.28 12.25 2.622-8.343 4.8-16.65 6.47-24.875L256.53 298.312zm-4.905 61.406c-35.09.24-70.5 3.556-101.625 10.405 3.586 8.164 7.618 16.326 12.03 24.438 28.365-2.455 59.055-3.677 89.47-3.782 2.763-.008 5.525-.007 8.28 0 33.542.107 66.446 1.56 95.22 4.158a287.061 287.061 0 0 0 10.813-24.188c-32.65-7.392-73.185-11.312-114.188-11.03zm-.063 49.81c-26.842.09-53.864 1.036-79.125 2.94a390.56 390.56 0 0 0 17.813 26.217c4.832 1.102 13.818 2.332 25.344 3.032 13.2.8 29.062 1.137 44.812 1.06 15.75-.074 31.41-.565 44.22-1.405 10.923-.716 19.234-1.848 23.468-2.72a310.514 310.514 0 0 0 17.062-25.81c-28.492-2.267-60.905-3.422-93.594-3.314z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/leather-armor.svg b/static/_icons/_equipment/leather-armor.svg
new file mode 100644
index 00000000..c9a78136
--- /dev/null
+++ b/static/_icons/_equipment/leather-armor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m339.8 33.47 14 2.81c-1.2 3.02-2.5 6.32-4 9.75-5.8 13.63-14.2 29.31-20 35.12-4.9 4.85-19.8 9.57-33.1 11.48-11.2 1.8-22.4 3.9-33.7 3.9v15.97h-14V96.53c-12 .1-24.2-2.6-33.7-3.9-13.3-1.9-28.2-6.62-33.1-11.45-5.8-5.81-14.2-21.49-20-35.11-1.5-3.44-2.8-6.75-4-9.79l14-2.81c8.4 11.37 38 47.06 83.8 47.06s75.4-35.69 83.8-47.06zm31.9 6.38 31.9 6.38-29.7 74.37 32.7 49-9.5 66.1c-1.8 1.4-3.8 2.8-6 4.3-11.3 7.5-26.1 14.5-39.1 14.5-4.3 0-12-3.5-20.2-10.4-8.3-6.9-17-16.5-24.8-26.2-14.2-17.9-24.3-34.2-26-37v-18.4h11v-18h-11v-14h11v-18s38.9-7.7 50.4-18.57c10.2-10.11 17.8-26.43 24-40.82 2-4.79 3.8-9.3 5.3-13.26zm-231.4 0c1.5 3.96 3.3 8.48 5.3 13.29 6.2 14.39 13.8 30.71 24 40.79C185 107.1 220 112.5 220 112.5v18h11v14h-11v18h11v18.4c-1.7 2.8-11.8 19.1-26 37-7.8 9.7-16.5 19.3-24.8 26.2-8.2 6.9-15.9 10.4-20.2 10.4-13 0-27.8-7-39.1-14.5-2.2-1.5-4.2-2.9-6-4.3l-9.5-66.1 32.7-49-29.7-74.38zM263 130.5v14h-14v-14zm0 32V186l1.3 2.1s12.2 20.4 28.7 41c8.2 10.3 17.5 20.7 27.2 28.8 9.8 8.1 20.1 14.6 31.8 14.6 15.6 0 30-6.1 41.7-13l-2.1 15-54.2 40.7-81.4-97.8-81.4 97.8-54.2-40.7-2.1-15c11.7 6.9 26.1 13 41.7 13 11.7 0 22-6.5 31.8-14.6 9.7-8.1 19-18.5 27.2-28.8 16.5-20.6 28.7-41 28.7-41l1.3-2.1v-23.5zm-7 83.1 78.6 94.2 33.1-24.8-7.4 37c-13.1 3.1-64.2 14.5-104.3 14.5-40.1 0-91.2-11.4-104.3-14.5l-7.4-37 33.1 24.8zm90.3 128 8.7 34.9c-5.9 2-12.5 4.2-19.6 6.4-4.2 1.3-8.6 2.6-13 3.8l-6.6-39.6c11.3-1.8 21.8-3.8 30.5-5.5zm-180.6 0c8.7 1.7 19.2 3.7 30.5 5.5l-6.6 39.6c-4.4-1.2-8.8-2.5-13-3.8-7.1-2.2-13.7-4.4-19.6-6.4zm132.2 8 6.9 41.7c-13.9 3.3-27.8 5.9-39.8 6.8v-45.8c10.8-.3 22-1.4 32.9-2.7zm-83.8 0c10.9 1.3 22.1 2.4 32.9 2.7v45.8c-12-.9-25.9-3.5-39.8-6.8zm163.6 37.9 11.2 44.7s-56.2 20.2-85.6 24.3c-31.2 4.3-63.4 4.3-94.6 0-29.4-4.1-85.6-24.3-85.6-24.3l11.2-44.7c8.1 3.1 20.1 7.4 37.1 12.6 26.3 8.1 58.6 16.4 84.6 16.4 26 0 58.3-8.3 84.6-16.4 17-5.2 29-9.5 37.1-12.6z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/leg-armor.svg b/static/_icons/_equipment/leg-armor.svg
new file mode 100644
index 00000000..6ec9cf31
--- /dev/null
+++ b/static/_icons/_equipment/leg-armor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M128 22.781c-11.101 10.941-19.822 27.6-26.076 41.203 6.044 20.063 11.083 40.869 27.539 54.926 18.862-14.015 27.05-33.752 35.187-56.351C154.631 51.155 144.412 34.368 128 22.78zm256 0c-16.412 11.587-26.631 28.374-36.65 39.778 8.137 22.599 16.325 42.336 35.187 56.351 16.456-14.057 21.495-34.863 27.54-54.926C403.821 50.381 395.1 33.722 384 22.781zM222.23 46.104c-11.546 2.749-24.948 7.229-37.04 12.68-8.622 28.9-21.924 55.363-45.965 74.734l16.55 177.107-19.933-8.438-14.61-167.787c-16.163-16.006-28.001-43.023-38.39-71.285-3.545-2.304-7.083-4.15-10.621-5.424 6.237 82.926 25.341 186.732 47.006 274.592 2.544-1.159 5.746-2.4 8.724-3.459 29.464 7.318 56.995 29.357 81.848 53.067C192 272 256 160 222.23 46.104zm67.54 0C256 160 320 272 302.2 381.89c24.853-23.71 52.384-45.75 81.848-53.067 2.978 1.06 6.18 2.3 8.724 3.46 21.665-87.86 40.77-191.667 47.006-274.593-3.538 1.274-7.076 3.12-10.62 5.424-10.39 28.262-22.228 55.28-38.391 71.285l-14.61 167.787-19.933 8.438 16.55-177.107c-24.04-19.37-37.343-45.834-45.964-74.735-12.093-5.45-25.495-9.93-37.041-12.68zM129.004 347.83c-13.31 5.672-27.915 18.355-33.014 34.666 23.725 4.679 52.808 18.407 75.524 40.389l3.947 26.867 33.467-12.074-1.33-29.082c-19.75-28.701-51.073-52.92-78.594-60.766zm253.992 0c-27.52 7.846-58.843 32.065-78.594 60.766l-1.33 29.082 33.467 12.074 3.947-26.867c22.716-21.982 51.8-35.71 75.524-40.389-5.099-16.311-19.704-28.994-33.014-34.666zM90.69 399.703l-52.257 39.272c-10.312 15.251-12.923 32.609-8.657 47.158 52.559 9.293 88.252-3.287 129.043-25.838l-4.275-29.084c-14.703-15.135-33.665-26.354-63.854-31.508zm330.622 0c-30.189 5.154-49.151 16.373-63.854 31.508l-4.275 29.084c40.791 22.55 76.484 35.131 129.043 25.838 4.266-14.55 1.655-31.907-8.657-47.158l-52.257-39.272z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/loincloth.svg b/static/_icons/_equipment/loincloth.svg
new file mode 100644
index 00000000..b345903b
--- /dev/null
+++ b/static/_icons/_equipment/loincloth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m118.486 25-26 78h29.028l26-78zM256 25c-10.926 0-25.17 4.748-36.14 12.404-10.97 7.656-18.208 17.732-18.883 27.235-.8 11.25 6.06 25.301 17.205 36.216C229.327 111.771 244.286 119 256 119c11.714 0 26.673-7.23 37.818-18.145s18.005-24.966 17.205-36.216c-.675-9.503-7.912-19.579-18.882-27.235C281.17 29.748 266.926 25 256 25zm108.486 0 26 78h29.028l-26-78zM48 41c.5 0-1.724.573-4.688 4.326-2.963 3.754-6.244 9.694-9.04 16.219-3.649 8.512-6.348 18.184-7.877 25.455h52.453l15.334-46zm113.152 0L145.82 87h41.239c-3.062-7.525-4.614-15.498-4.036-23.639.585-8.231 3.555-15.718 8.01-22.361zm159.815 0c4.455 6.643 7.425 14.13 8.01 22.361.578 8.141-.974 16.114-4.036 23.639h41.239l-15.332-46zm96.853 0 15.332 46h52.453c-1.53-7.271-4.228-16.943-7.876-25.455-2.797-6.525-6.078-12.465-9.041-16.219C465.724 41.573 463.5 41 464 41zM46.465 105C25.239 204.294 25.03 361.524 25.033 487h159.883a3096.51 3096.51 0 0 0 9.82-40.824c-15.585 2.554-31.613 6.054-48.425 10.521L135 459.703V448c0-117.577-13.686-235.189-40.635-327H67.514l5.334-16zm93.355 0-5.334 16h-21.43c25.844 90.393 38.94 202.608 39.766 315.66 72.384-17.715 133.99-17.605 206.354.014C360 323.617 373.099 211.396 398.943 121h-21.43l-5.333-16h-57.928a92.688 92.688 0 0 1-7.84 8.715C292.565 127.276 274.456 137 256 137s-36.565-9.724-50.412-23.285a92.688 92.688 0 0 1-7.84-8.715zm299.332 0 5.334 16h-26.851C390.686 212.811 377 330.423 377 448v11.684l-11.297-2.983c-16.814-4.439-32.844-7.93-48.43-10.484 3.24 13.88 6.52 27.504 9.811 40.783h159.883c.003-125.476-.206-282.706-21.432-382z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/mace-head.svg b/static/_icons/_equipment/mace-head.svg
new file mode 100644
index 00000000..2dc90fe7
--- /dev/null
+++ b/static/_icons/_equipment/mace-head.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m220.53 17-17.06 78.28c16.922-5.973 35.088-9.273 54-9.436L220.53 17zm229.345 72.906L316.595 147c-3.795 39.747 34.37 73.846 69.06 72.875l64.22-129.97zM258.937 104.5c-32.528 0-62.575 10.45-87 28.156l25.407 4.375h5.25l2.437 5.595c23.25 53.012-17.348 112.788-68.374 118.438l-5 .562-3.22-3.875-17-20.438a151.187 151.187 0 0 0-.78 15.5c0 82.018 66.28 148.313 148.28 148.313 4.25 0 8.47-.182 12.627-.53l-33.75-26.533-3.97-3.125.438-5c3.68-43.274 44.822-80.43 90.126-80.656 10.455-.05 21.14 1.866 31.625 6.126l4.69 1.875.967 4.97 10.094 50.844c22.1-25.897 35.44-59.5 35.44-96.28 0-9.856-.957-19.47-2.783-28.783l-4.468 9.032-2.22 4.5-5 .625c-50.94 6.367-104.295-42.347-94-99.312l1.906-4.97 3.594-1.968 24.03-10.28C307.597 110.71 284.007 104.5 258.94 104.5zm-212.28 25.625 92.687 111.5c33.964-7.128 63.11-49.168 50.187-86.938L46.657 130.125zm45.312 122.063L17.093 295.03l85.437 16.22c-6.812-18.196-10.56-37.885-10.56-58.438 0-.208-.002-.416 0-.625zm333.5 12.5a165.815 165.815 0 0 1-15 58.218L496.593 315l-71.125-50.313zm-101.158 39.53c-33.81.786-65.258 28.287-70.656 58.532l120.625 94.813-29.874-150.344c-6.665-2.114-13.417-3.156-20.094-3zM179.188 399.5l8.594 93.156 52.25-73.937a165.671 165.671 0 0 1-60.843-19.22z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/power-ring.svg b/static/_icons/_equipment/power-ring.svg
new file mode 100644
index 00000000..51e082df
--- /dev/null
+++ b/static/_icons/_equipment/power-ring.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M102.6 34.33c-7.03 7-19.03 19.24-32.07 34.6 25.53 3.3 56.47 11.09 84.97 19.76 18.8 5.72 36.4 11.81 50.2 17.41 7 2.8 13 5.5 17.9 7.9 4.9 2.5 8.4 4.4 11.6 7.6l-12.6 12.8c-.1-.1-3-2.2-7.2-4.3-4.1-2.1-9.8-4.6-16.4-7.3-13.2-5.3-30.4-11.3-48.7-16.9-32.4-9.84-68.89-18.34-93.24-20.24-9.14 12.07-17.4 24.64-22.72 35.84 63.22 13.9 134.16 40.1 173.46 79.3l3.4 3.4-1 4.8s-3 15.4-3 33.8 3.8 38.8 13.5 48.5c9.7 9.8 30.2 13.6 48.6 13.6 18.4 0 33.8-3 33.8-3l4.8-1 3.4 3.4c39.2 39.3 65.4 110.1 79.3 173.4 11.2-5.3 23.7-13.6 35.8-22.7-1.9-24.4-10.3-60.8-20.2-93.1-5.6-18.4-11.6-35.6-16.9-48.8-2.7-6.6-5.2-12.3-7.3-16.4-2.1-4.2-4.2-7.1-4.3-7.2l12.8-12.6c3.2 3.2 5.1 6.7 7.6 11.6 2.4 4.9 5.1 10.9 7.9 17.9 5.6 13.8 11.7 31.4 17.4 50.2 8.6 28.4 16.4 59.4 19.7 85 15.4-13.1 27.6-25.1 34.6-32.1-12.7-64.7-26.1-151.4-62.6-212.2l-1.8-3 .7-3.4s3-15.4 3.1-33.8c0-8.3-.8-17-2.5-25 1.6 11-.2 23.4-4.4 36-7.6 22.8-23.4 47.5-45.6 69.8-22.3 22.2-47 38-69.8 45.6-22.8 7.6-45.2 7.3-59.4-6.9-14.1-14.1-14.5-36.6-6.8-59.3 7.5-22.8 23.3-47.5 45.6-69.8 22.3-22.3 46.9-38.1 69.8-45.6 12.3-4.19 24.6-5.97 35.4-4.51C371.6 95.74 363.1 95 355 95c-18.4 0-33.8 3.06-33.8 3.06l-3.5.68-2.9-1.79c-60.9-36.55-147.5-49.9-212.2-62.62zM371.9 115c-6.4-.1-13.9 1.2-22.3 4-14.2 4.7-30.3 13.7-46 26.3 5.1-3.1 10.2-5.7 15.2-7.8 7.9-3.2 15.4-5.1 22.5-5.2 7.2 0 14.5 2 19.7 7.3 1.7 1.7 3 3.5 4.1 5.5-9-3.9-19.5-1.8-26.4 5.1-9.4 9.4-9.4 24.6 0 34 5.3 5.2 12.6 7.7 20 6.8-6.8 13-17 26.6-29.9 39.4-15.9 16-33 27.8-48.6 34.3-7 2.9-13.7 4.7-20.2 5 7.6 1.5 17.4.6 29.1-3.3 19.4-6.4 42.2-20.7 62.7-41.3 20.6-20.6 34.9-43.3 41.3-62.7 6.4-19.3 4.8-33.7-2.5-40.9-4.1-4.1-10.5-6.4-18.7-6.5zM30.64 135.9c-.48 5.1.53 12.6 4.04 22.1 5.19 14.2 15.06 32.1 28.35 51.7C89.6 249 129.7 295.6 173.1 338.9c43.3 43.4 89.9 83.5 129.2 110.1 19.6 13.3 37.5 23.1 51.7 28.3 9.5 3.5 17 4.5 22.1 4-5.1-23.3-12.1-47.8-20.7-71.2-49.3-29.2-92.9-61.9-131.9-99.1-4.7-2.5-9.2-5.6-13.1-9.5a50.9 50.9 0 0 1-9.5-13.2c-37.2-38.9-69.8-82.5-99-131.7-23.36-8.7-47.92-15.7-71.26-20.7zM130 168c19.1 30.3 39.7 58.2 62 84-.2-4-.3-8-.3-11.8 0-15.7 1.7-26.8 2.6-32.2-16.1-15-38.7-28.5-64.3-40zm174 149.7c-5.4.9-16.5 2.6-32.2 2.6-3.8 0-7.8-.1-11.9-.4 25.9 22.4 53.8 43 84.1 62.1-11.5-25.5-25-48.2-40-64.3z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/quiver.svg b/static/_icons/_equipment/quiver.svg
new file mode 100644
index 00000000..403d8b3c
--- /dev/null
+++ b/static/_icons/_equipment/quiver.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m341.21 18.004-3.04 6.248 6.585 13.173-9.588-7.005-8.31 17.076 5.96 13.107-9.99-4.824-3.554 7.3 17.35 29.683-33.874 69.606a416.538 416.538 0 0 0 18.326 3.477l31.722-65.19.04-.005 21.937-45.078-.04.006 8.346-17.153-16.184-7.875-8.338 17.133-17.348-29.682zM55.578 34.978c-.634.002-1.267.02-1.9.057-5.067.296-10.09 1.74-14.67 4.56-4.553 2.804-6.37 6.767-7.827 10.832-1.457 4.066-2.388 8.677-3.095 14.045-1.413 10.738-1.816 24.476-1.486 40.66.658 32.37 4.336 74.363 9.923 118.346 8.822 69.45 22.01 143.094 36.53 191.793l.054-.014c.545 1.88 1.134 3.9 1.77 5.962l.01.04c.362 1.148.725 2.282 1.087 3.398 1.698 5.15 3.677 10.255 5.957 13.908 1.857 2.973 3.763 4.76 5.17 5.465 1.405.703 2.444 1.013 5.48-.07 1.757-.626 1.752-.61 2.35-3.255.6-2.647.505-7.635-.522-13.617-1.064-6.19-2.98-13.38-5.028-20.86-13.193-46.49-26.532-118.342-35.002-185.017-5.53-43.537-9.145-85.127-9.783-116.443-.32-15.658.13-28.787 1.336-37.945.604-4.58 1.424-8.17 2.194-10.318.38-1.06.784-1.647.94-1.883 4.144-2.356 7.705-2.46 13.236-.394 5.81 2.17 13.136 7.287 20.948 14.655 15.623 14.735 33.2 37.99 51.013 61.012 17.813 23.023 35.792 45.84 54.308 60.533 5.98 4.747 12.075 8.698 18.43 11.374 2.59.674 5.962 1.44 9.43 1.905 3.61.482 7.23.544 9.443.148 1.64-.293 2.058-.586 2.116-.625 3.39-6.163 1.936-8.012-1.37-11.398-3.317-3.398-10.153-5.99-12.435-6.143l.03-.433c-4.388-1.84-9.276-4.82-14.453-8.928-15.74-12.492-33.554-34.564-51.26-57.45-17.705-22.884-35.368-46.557-52.9-63.09-8.766-8.268-17.5-14.873-26.996-18.42-4.154-1.554-8.585-2.4-13.022-2.388zm191.127 4.06L238.56 63.14l9.3 21.06-13.648-8.19-3.554 10.52 20.972 27.243-10.406 30.8a518.172 518.172 0 0 0 17.027 5.84l10.427-30.86.037-.01 16.05-47.495-.042.012 6.106-18.072-17.053-5.762-6.1 18.053-20.97-27.243zm162.064 11.94-12.565 1.7-12.026 24.71 18.306-13.502 6.283-12.908zm-90.872 12.205L305.65 66.46l-16.045 47.495 12.248-3.278 16.045-47.494zm106.797 5.508-8.807 12.15 2.262 28.574-9.654-18.375-13.225 18.24 11.938 32.24-21.738 29.987c7.335.094 14.8.016 22.416-.25l13.883-19.154.04.002 29.424-40.588-.04-.002 11.194-15.443-14.572-10.566-11.184 15.427-11.937-32.242zm-28.916 8.982-13.41 3.433-8.103 16.65 12.564-1.7 8.95-18.383zm77.06 34.71-4.803 6.625 12.77.366 4.702-6.487-12.67-.505zm-5.733 7.905-23.69 32.68 12.668.507 6.422-8.857-6.08-3.598 9.475-1.087 10.926-15.072-9.72-4.573zm-238.152 38.83c-1.702 3.462-3.393 6.85-5.09 10.285 5.506 1.805 10.928 5.036 15.63 9.854 7.124 7.297 10.943 20.566 4.212 32.744-3.314 5.994-9.456 8.64-14.668 9.572-5.214.932-10.3.602-14.998-.025-6.17-.825-11.544-2.263-14.677-3.19-1.432 2.818-2.863 5.64-4.3 8.443 50.84 27.08 109.533 22.75 167.438 10.64 12.018-15.735 23.947-31.747 35.897-48.106-62.995.883-117.13-10.59-169.445-30.217zm-42.14 83.683c-25.922 49.92-52.78 98.18-83.245 146.836 2.912 10.984 6.645 23.148 8.578 34.405 1.223 7.123 1.856 13.942.338 20.64-1.518 6.7-6.486 13.604-13.86 16.234-6.776 2.417-13.994 2.012-19.59-.793-5.598-2.804-9.44-7.322-12.374-12.025-.223-.356-.433-.717-.647-1.078-2.342 3.425-4.683 6.85-7.072 10.287C73.4 482.04 98.747 494.51 121.21 493.98c90.72-76.612 159.746-152.114 224.65-235.01-53.372 9.265-109.005 10.413-159.044-16.17z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/relic-blade.svg b/static/_icons/_equipment/relic-blade.svg
new file mode 100644
index 00000000..5b26de08
--- /dev/null
+++ b/static/_icons/_equipment/relic-blade.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M499.78 16.125 477.157 22.5l-151.47 42.53-6.592 1.876-.22 6.844-.905 29.344-18.814 5.03-6.656 1.75-.28 6.907-.97 24.657-134.125 133.594-2.875 2.876.125 4.063c.71 20.398-14.288 31.957-22.75 31.217-9.973-.872-15.33-4.037-18.875-8.437-3.544-4.4-5.546-10.93-5.5-19.656l.125-24.156-16.344 17.78c-17.327 18.843-26.697 42.824-26.843 66.97l-.062 9.406h9.406c12.214.003 24.46 2.815 35.72 8.344l-4.063 14.468c-20.925 17.263-41.855 40.54-52.968 59.97-1.636 2.857-2.977 5.514-4.064 7.968L16.25 454.75l-1.5 41.656 41.656-1.5 9-32.187a88.36 88.36 0 0 0 7.72-3.94c19.338-11.062 42.48-31.857 59.718-52.686l14.47-4.063c5.345 11.147 8.143 23.224 8.186 35.064l.03 9.312h9.314c24.72.007 49.722-9.366 68.844-27.53l13.906-13.22-19-2.78c-10.576-1.556-18.374-5.412-23.03-9.75-4.66-4.34-6.335-8.744-5.876-13.626 1.054-11.204 4.174-16.044 8.437-19.063 4.263-3.018 11.267-4.52 21.094-4.218l4.06.124 2.845-2.875 136.313-136.314 18.968-.47 6.938-.186 1.844-6.688 4.437-16.093 32.906-1.44 6.75-.28 1.845-6.53L491.75 36.624l8.03-20.5zM466.157 45 429.97 173.906 397 175.312l-6.78.282-1.814 6.594-4.406 16-15.75.375-3.72.093-2.655 2.625-136.28 136.314c-9.812.1-19.142 1.668-27.064 6.812l.69-19.25 144.343-144.344 26.437-1.03L374.625 163l1.844-6.656 6.905-.188 32.25-.937 22.938-82.595-82.594 22.938L355 125.5l-.22 6.875-6.655 1.844-19.03 5.186-.876 30.344-142.25 142.22-21.19.75c4.803-7.545 7.843-16.86 8.22-27.158l134-133.437 2.625-2.594.125-3.655.875-21.47 18.875-5.03 6.72-1.813.186-6.937.938-29.438L466.156 45zM93.03 307.78c1.38 3.076 3.004 6.015 5.157 8.69 4.966 6.163 11.98 10.684 20.5 13.217l-4.343 15.5a100.193 100.193 0 0 0-30.844-8.25c1.23-10.044 4.448-19.957 9.53-29.156zm87.25 23.095-1.53 42.97-57.5 16.092 16.063-57.53 42.968-1.532zm2.657 61.22c2.006 5.516 5.43 10.576 9.875 14.717 3.934 3.665 8.684 6.685 14.032 9.094-10.278 6.204-21.67 9.998-33.188 11.28-1.086-10.328-3.84-20.554-8.125-30.248l17.407-4.844z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/shorts.svg b/static/_icons/_equipment/shorts.svg
new file mode 100644
index 00000000..fec9dc13
--- /dev/null
+++ b/static/_icons/_equipment/shorts.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M101.535 52.88c-3.966 15.398-4.738 29.582-.7 42.608h105.714v-42.61H101.534zm123.014 0v42.608h62.69v-42.61h-22.345v20.204h-18V52.88H224.55zm80.69 0v42.608h104.305c2.18-14.494 1.95-28.615-.05-42.61H305.24zm-204.6 60.608c-15.2 37.77-29.954 77.85-42.458 118.317 22.223 9.172 45.87 13.042 70.375 16.257l10.66 1.4-18.424 58.022-3.23.106c-8.268 28.267-14.914 57.303-16.743 89.803l-.445 7.914-7.906.558c-26.8 1.89-48.538-5.78-67.872-15.736-1.048 11.952-1.65 23.698-1.723 35.165 8.597 14.946 29.86 24.225 57.986 28.92 27.165 4.534 59.24 4.878 87.995 4.906 20.865-61.546 58.897-156.786 78.987-197.026l4.025-8.065c-2.232-.81-7.816-2.92-14.082-5.977-8.07-3.94-17.42-8.583-23.02-17.596-9.29-14.95-10.207-35.844-10.136-53.8.07-17.954 1.99-32.905 1.99-32.905l1.144-8.926 17.853 2.283-1.142 8.927s-1.78 13.98-1.846 30.692c-.067 16.71 2.447 36.223 7.42 44.227 1.286 2.067 8.678 7.525 15.63 10.918 6.95 3.393 13.134 5.52 13.134 5.52l8.514 2.92-5.805 16.925 2.424 4.854c20.09 40.24 58.122 135.48 78.987 197.027 28.755-.027 60.83-.37 87.994-4.905 28.124-4.694 49.388-13.972 57.986-28.916-.074-11.415-.69-23.123-1.756-35.046-19.273 9.895-40.94 17.493-67.627 15.61l-7.905-.557-.445-7.914c-1.83-32.5-8.475-61.536-16.744-89.803l-3.23-.106-15.17-47.775-3.253-10.25 10.66-1.398c24.326-3.19 47.807-7.03 69.89-16.058-12.582-40.713-27.318-80.93-42.214-118.516H100.64zm-57.85 131.07c-4.104 8.318-6.67 16.978-7.235 26.544 18.53 9.355 41.86 18.283 72.02 18.537l8.027-25.286c-24.327-3.487-48.99-8.4-72.81-19.797zm426.42 0c-23.822 11.396-48.485 16.31-72.812 19.796l8.03 25.285c30.157-.255 53.488-9.183 72.017-18.538-.566-9.566-3.13-18.226-7.236-26.545zM36.616 291.694c-6.152 24.697-10.976 50.186-14.61 76.39 19.114 10.99 37.874 19.79 61.52 19.954 2.367-29.072 8.276-55.42 15.428-80.556-24.862-1.463-45.573-8.246-62.338-15.79zm438.766 0c-16.765 7.543-37.476 14.326-62.338 15.79 7.152 25.136 13.06 51.483 15.428 80.554 23.646-.165 42.406-8.964 61.52-19.956-3.634-26.203-8.458-51.692-14.61-76.39z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/steampunk-goggles.svg b/static/_icons/_equipment/steampunk-goggles.svg
new file mode 100644
index 00000000..208612be
--- /dev/null
+++ b/static/_icons/_equipment/steampunk-goggles.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M175.342 120.424c-39.044-.035-81.332 6.312-136.06 17.752 2.786 11.553 6.997 23.69 11.796 35.318 109.813-26.153 176.85-16.624 239.863 9.426 4.03-13.23 10.572-25.413 18.648-35.72-49.595-18.4-89.864-26.737-134.246-26.776zm186.87 14.11c-6.61-.015-12.398.99-16.982 3.376-.79.68-1.384 1.442-1.734 2.2 18.56 4.702 36.184 9.745 51.613 15.628 5.153-4.313 10.78-8.04 16.833-11.027-17.658-5.47-35.56-10.142-49.732-10.175zm-341.454 5.063c-.89 19.648-5.877 24.76-1.288 59.096 3.89 29.1 15.095 72.413 61.754 109.08-3.517-14.455-5.16-28.265-4.587-43.724-12.806-14.01-25.166-33.834-43.268-85.906-5.63-13.404-8.834-26.383-12.612-38.547zm419.545 14.81c-14.962.188-29.31 7.998-40.727 19.942-13.532 14.156-23.72 34.396-28.234 57.824-4.516 23.427-2.557 45.88 4.785 63.843 5.976 14.622 15.925 26.615 29.078 32.332h.002c4.374 1.97 7.517 3.288 12 3.265 17.044 2.097 33.69-6.112 46.593-19.61 13.533-14.158 23.717-34.396 28.233-57.824 4.515-23.426 2.56-45.88-4.78-63.842-7.343-17.963-20.684-31.962-38.59-35.227a43.482 43.482 0 0 0-8.36-.702zm-113.092.222c-10.18 11.86-18.49 27.615-21.48 44.08 23.602 11.794 41.428 32.958 47.72 54.432.148-8.285.985-16.61 2.5-24.8 3.964-21.45 12.488-42.035 25.476-58.436-15.95-5.543-34.613-10.52-54.215-15.277zm114.053 17.745a25.86 25.86 0 0 1 3.993.41c10.53 1.92 19.517 10.35 25.285 24.46 5.768 14.112 7.704 33.376 3.786 53.706-3.918 20.33-12.897 37.605-23.527 48.726-10.632 11.12-22.15 15.812-32.68 13.892-10.53-1.92-19.517-10.352-25.284-24.463-5.768-14.11-7.702-33.373-3.783-53.703 3.918-20.33 12.894-37.604 23.525-48.725 9.302-9.73 19.28-14.54 28.685-14.302zm-254.61 22.328c-12.71.12-23.37 1.835-31.446 5.224-27.724 11.638-46.134 28.764-55.694 47.918 33.88 11.845 50.606 20.93 105.842 23.778 9.12-26.446 27.087-50.78 55.36-65.742-28.42-7.515-53.842-11.37-74.063-11.177zm272.198 6.406c-10.734 55.258-26.578 72.102-46.178 94.99 17.267 1.758 33.788-9.264 41.44-38.276 4.17-15.812 5.536-19.187 4.74-56.715zm-170.577 12.913-.066.022c-15.41-.246-30.24 7.657-41.977 19.933-13.532 14.157-23.72 34.395-28.234 57.823-4.515 23.428-2.557 45.882 4.785 63.844 2.92 7.144 6.79 13.658 11.517 19.12 5.406 6.65 11.756 11.463 18.757 14.042 2.697.853 5.81 1.6 8.315 2.065 17.906 3.266 35.553-5.08 49.085-19.237 13.532-14.157 23.717-34.397 28.232-57.825.216-1.492.55-2.617.717-4.068 3.55-21.95 1.418-42.855-5.498-59.775-5.793-14.175-15.324-25.876-27.885-31.788-.753-.37-1.52-.728-2.305-1.068v.062a43.235 43.235 0 0 0-8.4-2.434 43.435 43.435 0 0 0-6.975-.693 8.534 8.534 0 0 1-.067-.022zm-.355 17.98a25.85 25.85 0 0 1 3.992.41c10.53 1.92 19.518 10.353 25.285 24.464 5.768 14.11 7.703 33.373 3.785 53.703-3.918 20.33-12.896 37.604-23.527 48.724-10.63 11.12-22.147 15.813-32.678 13.893-10.53-1.92-19.517-10.35-25.285-24.46-5.767-14.112-7.7-33.376-3.783-53.706 3.918-20.33 12.895-37.603 23.525-48.724 9.302-9.73 19.282-14.54 28.686-14.304zm21.47 32.497c-10.736 55.26-26.58 72.102-46.18 94.99 17.268 1.76 33.787-9.263 41.438-38.275 4.17-15.812 5.537-19.187 4.74-56.715zm-214.96.62c-.603 14.054.94 26.203 4.392 39.542l.516-.246c24.38 16.45 71.385 32.672 100.367 32.224-1.63-10.355-2.06-21.19-1.193-32.12a134.61 134.61 0 0 1 2.087-15.135c-53.818-3.222-74.207-13.057-106.168-24.264zm264.29 28.05c-.09 9.523-1.072 18.374-2.595 25.904a179.038 179.038 0 0 0 19.27 6.586c-6.608-8.252-11.652-17.756-15.186-27.88a112.55 112.55 0 0 1-1.488-4.61zm-246.27 40.3c4.936 5.788 10.722 11.266 17.384 16.3 29.055 21.964 58.6 30.283 89.398 34.95-4.006-5.177-7.465-10.95-10.33-17.138-1.89-4.08-3.525-8.36-4.93-12.783-32.872-.606-63.45-8.824-91.523-21.33z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_equipment/wood-club.svg b/static/_icons/_equipment/wood-club.svg
new file mode 100644
index 00000000..c435eaf4
--- /dev/null
+++ b/static/_icons/_equipment/wood-club.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M483.424 24.638 449.83 39.98c.944.974 1.864 1.99 2.754 3.068 3.544 4.29 6.546 8.89 9.07 13.745l21.77-32.155zm-221.18 14.426 4.217 42.527c7.223-6.983 14.875-13.594 22.97-19.575l-27.186-22.95zm143.17 2.358c-2 .03-4.06.133-6.18.298-11.58.906-24.367 3.983-37.02 7.41l23.55 36.178.404.62.297.68c3.1 7.08 2.3 14.488-.006 21.41-2.308 6.924-6.405 13.565-12.487 18.53-6.082 4.962-14.756 8.037-23.813 6.118-9.056-1.92-17.6-8.213-25.506-18.803l-1.718-2.305-1.104-48.535c-25.135 12.94-47.54 34.326-66.178 57.047l17.14 9.428 2.892 1.59 1.177 3.08c4.892 12.782 5.147 26.122-1.43 37.13-6.575 11.01-18.66 18.744-35.435 24.293l-6.9 2.285-11.653-19.82c-1.71 3.762-3.41 7.56-5.093 11.43L199.126 298.11l-2.75-61.597c-10.444 24.205-21.82 48.42-36.09 70.063C119.643 368.216 28.322 462.01 28.322 462.01l-.07.072-.07.07c-3.905 3.85-3.91 5.573-3.475 7.693.29 1.418 1.348 3.368 3.168 5.43l97.166-78.713-84.007 87.3c5.778 2.305 11.906 3.587 15.895 3.495 6.885-6.482 66.713-62.5 107.11-88.644 38.117-24.67 69.79-54.084 106.32-82.045l12.213-70.723.37-2.147 1.312-1.74c6.783-8.997 15.585-14.236 24.506-15.33a31.905 31.905 0 0 1 6.588-.113c6.464.56 12.5 3.047 17.584 6.59 11.895 8.287 20.172 22.808 18.008 37.68 6.76-3 13.436-6.003 19.883-9.153 20.67-10.1 38.705-21.33 51.063-37.56-7.023-.544-13.58-3.672-19.03-7.846-7.455-5.707-13.412-13.558-17.25-22.2-3.84-8.64-5.723-18.287-2.974-27.615 2.75-9.326 11.142-17.274 22.833-20.01l.645-.153 45.662-3.797c.92-5.208 1.667-10.42 2.19-15.58 1.022-10.1 1.175-19.927.35-29.187l-28.927 31.25 19.88-64.613c-1.88-3.562-4.056-6.88-6.556-9.907-7.064-8.55-16.195-12.217-27.474-12.957a72.25 72.25 0 0 0-5.82-.134zm-65.937 5.773 1.316 57.93c5.447 6.628 10.038 9.285 13.098 9.933 3.385.717 5.85-.13 8.702-2.457 2.852-2.327 5.483-6.348 6.79-10.272 1.253-3.757 1.01-7.105.624-8.23l-30.53-46.903zm-136.057 64.69 37.62 63.984c10.068-4.252 16.137-9.108 18.94-13.802 3.017-5.05 3.41-10.74.962-18.547l-57.522-31.636zm284.063 45.76-78.336 6.513c-6.528 1.622-8.23 3.973-9.252 7.443-1.05 3.558-.457 9.338 2.156 15.218 2.614 5.88 7.085 11.648 11.745 15.217 4.102 3.14 7.867 4.322 10.924 4.105.6-.433 1.22-.876 2.16-1.576a960.486 960.486 0 0 0 10.226-7.758c8.388-6.43 19.428-14.995 30.408-23.547 10.038-7.82 12.08-9.442 19.97-15.616zM312.38 244.497c-.48.007-.957.04-1.43.097-3.424.42-7.092 2.18-11.067 6.868l-16.496 95.523 49.18-76.508c2.014-7.113-2.495-17.326-9.926-22.504-2.873-2.002-5.883-3.162-8.806-3.422a14.095 14.095 0 0 0-1.453-.054zm74.02 29.52a328.805 328.805 0 0 1-7.677 3.886c-5.127 2.505-10.308 4.887-15.488 7.232l27.76 17.047-4.594-28.166z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/android-mask.svg b/static/_icons/_faces/android-mask.svg
new file mode 100644
index 00000000..907b8780
--- /dev/null
+++ b/static/_icons/_faces/android-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M265.344 18.563v302.863h-18.69V18.59c-61.403 3.005-115.44 34.412-149.238 81.336l35.022 60.658a46.633 46.633 0 0 1 12.11-1.598c25.747 0 46.62 20.872 46.62 46.62 0 22.556-16.02 41.37-37.3 45.687v174.084c13.712 21.43 27.6 41.98 40.712 60.754V369.01h122.838v117.117c13.11-18.773 27-39.324 40.713-60.754V251.294c-21.282-4.317-37.302-23.13-37.302-45.688 0-25.747 20.873-46.62 46.62-46.62 4.19 0 8.25.562 12.113 1.6l35.13-60.847c-33.74-47-87.758-78.375-149.346-81.175zM426.03 117.47l-29.74 51.52c10.824 8.537 17.782 21.76 17.782 36.615 0 22.54-15.995 41.343-37.254 45.68V395.38c9.833-16.237 19.31-32.676 28.014-48.927 27.3-50.976 46.564-100.37 46.564-132.36 0-35.127-9.22-68.104-25.365-96.622zm-339.973.157c-16.196 28.486-25.46 61.408-25.46 96.465 0 31.992 19.267 81.385 46.567 132.36 8.704 16.253 18.182 32.694 28.016 48.933v-144.1c-21.26-4.336-37.254-23.14-37.254-45.68 0-14.856 6.957-28.08 17.783-36.617l-29.653-51.36zm127.213 270.07V488.98h85.46V387.696h-85.46z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/architect-mask.svg b/static/_icons/_faces/architect-mask.svg
new file mode 100644
index 00000000..d342ef86
--- /dev/null
+++ b/static/_icons/_faces/architect-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.656 18.906c-76 .73-152 78.23-152 230.313 0 116.987 152 244.155 152 244.155s152.007-127.153 152-244.156c.002-155.008-76-231.045-152-230.314zm-82.812 125.47 13.22 77.843c20.878 3.65 36.813 22.085 36.624 43.936-.143 16.366-9.304 30.634-22.688 38.156l12.344 72.813c-17.1-18.5-30.538-41.915-39.813-67.563-21.673-2.953-38.443-21.77-38.25-44.187.146-16.61 9.572-31.07 23.282-38.5-.354-29.225 4.552-57.82 15.282-82.5zm165.594 0c10.73 24.678 15.635 53.274 15.28 82.5 13.71 7.428 23.138 21.89 23.282 38.5.195 22.415-16.575 41.233-38.25 44.187-9.275 25.647-22.68 49.063-39.78 67.562l12.342-72.78c-13.404-7.518-22.576-21.807-22.718-38.19-.19-21.86 15.762-40.297 36.656-43.936l13.188-77.845zm-159.72 95.874c-14.203-.123-25.626 11.08-25.75 25.28-.122 14.174 11.06 25.578 25.22 25.75h.093c14.205.125 25.597-11.107 25.72-25.31.123-14.206-11.077-25.597-25.28-25.72zm153.845 0c-14.205.123-25.405 11.514-25.282 25.72.125 14.203 11.547 25.435 25.75 25.31 14.205-.122 25.406-11.544 25.283-25.75-.124-14.2-11.547-25.403-25.75-25.28z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/brutal-helm.svg b/static/_icons/_faces/brutal-helm.svg
new file mode 100644
index 00000000..8e93602b
--- /dev/null
+++ b/static/_icons/_faces/brutal-helm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 34.162c-.135.22-.175.203-.314.447-1.975 3.46-4.37 9.255-6.72 16.347-4.703 14.183-9.438 33.67-13.575 53.223-4.137 19.553-7.708 39.222-10.238 54.084-1.264 7.43-2.27 13.66-2.957 18.07a518.223 518.223 0 0 0-.78 5.158 61.5 61.5 0 0 0-.15 1.065c.095 1.402 1.882 4.45 8.008 7.433 6.302 3.07 15.98 5.293 26.727 5.293 10.748 0 20.425-2.223 26.727-5.293 6.126-2.984 7.913-6.03 8.01-7.433l-.15-1.065c-.176-1.2-.44-2.954-.782-5.158-.687-4.41-1.693-10.64-2.957-18.07-2.53-14.862-6.1-34.53-10.24-54.084-4.136-19.554-8.87-39.04-13.573-53.223-2.35-7.092-4.746-12.886-6.72-16.348-.14-.245-.18-.23-.315-.448zM87.066 53.222c-39.793 29.842-65.173 69.95-65.173 114.284 0 30.934 11.92 59.887 32.646 84.695l27.13-78.23c-11.335-17.452-17.668-36.89-17.668-57.384 0-22.984 8.953-44.332 23.064-63.363zm337.883.016c14.094 19.032 23.064 40.38 23.064 63.364 0 20.493-6.333 39.928-17.664 57.377l27.123 78.208c20.718-24.805 32.634-53.753 32.634-84.682 0-44.333-25.38-84.443-65.158-114.268zM214.26 129.043c-36.194 9.176-61.82 31.89-80.563 70.234-24.892 50.927-35.985 130.406-36.304 239.645 43.728 24.578 91.336 38.24 139.99 40.765-.34-38.18-6.926-98.547-11.704-137.69-66.903-5.935-95.838-29.493-95.838-29.493s3.777-27.682 6.396-39.936c38.412 12.937 78.856 19.46 119.776 19.22 40.904.223 81.347-6.283 119.76-19.22 2.618 12.254 6.398 39.936 6.398 39.936s-27.968 24-95.875 29.648c-4.778 39.148-11.345 99.41-11.687 137.536 48.655-2.526 96.263-16.188 139.99-40.766-.318-109.24-11.41-188.718-36.302-239.645-18.74-38.345-44.368-61.058-80.562-70.234a1572.08 1572.08 0 0 1 4.617 25.748c.345.185.697.36 1.036.55 12.55 6.98 21.67 17.51 23.542 30.355l6.01 41.295-.815 1.998c-5.284 12.98-18.74 20.31-33.104 25.653-14.363 5.344-30.252 8.233-42.947 8.356h-.158c-12.69-.13-28.578-3.02-42.94-8.36-14.365-5.342-27.82-12.666-33.105-25.648l-.814-1.998 6.008-41.295c1.87-12.844 10.99-23.374 23.54-30.355.34-.19.692-.365 1.037-.55 1.297-7.6 2.854-16.367 4.617-25.747zm-112.41 35.178-41.44 119.49 29.695 13.71c6.08-42.11 15.602-77.018 29.332-105.11 3.33-6.817 6.94-13.21 10.814-19.2l-28.402-8.89zm308.312 0-28.416 8.895c3.874 5.986 7.482 12.38 10.813 19.194 13.732 28.093 23.256 63.002 29.335 105.116l29.71-13.717-41.44-119.49zm-208.066 19.147a18.537 18.537 0 0 0-1.323 4.615l-5.287 36.332c2.948 4.908 11.57 11.185 23.02 15.442 12.417 4.617 27.205 7.245 37.496 7.363 10.286-.112 25.07-2.738 37.486-7.356 11.45-4.26 20.074-10.54 23.022-15.45l-5.287-36.332a18.507 18.507 0 0 0-1.323-4.615c-1.095.378-2.223.747-3.37 1.112-.98 9.068-8.33 15.628-16.854 19.78-9.16 4.462-20.84 6.896-33.678 6.896-12.84 0-24.52-2.434-33.678-6.896-8.523-4.152-15.873-10.712-16.853-19.78-1.15-.366-2.277-.735-3.372-1.113z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/caesar.svg b/static/_icons/_faces/caesar.svg
new file mode 100644
index 00000000..8f891592
--- /dev/null
+++ b/static/_icons/_faces/caesar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M264.234 33.64a94.945 94.945 0 0 0-10.957.608C190.895 41.376 131.82 93.06 100.975 152.756c.118-.095.234-.193.353-.287l7.463-5.899 5.477 7.778c1.554 2.208 2.872 4.663 4.033 7.34 7.928-17.487 21.63-34.571 40.363-46.084l7.61-4.676 4.734 7.572c2.502 4.003 4.31 8.702 5.713 14.016 9.889-16.645 25.602-32.252 45.758-41.608l8.101-3.76 3.822 8.073c.153.323.298.652.442.982 9.782-13.132 23.275-24.935 39.728-32.572l8.102-3.762 3.822 8.072c1.356 2.864 2.351 6.017 3.104 9.416 8.43-10.724 19.573-20.548 32.812-27.744-18.601-9.895-38.4-15.936-58.178-15.972zm140.498 19.813c-21.58 4.89-40.88 18.458-50.029 31.264-5.337 7.47-6.704 14.015-5.808 17.388.895 3.374 3.457 6.667 14.306 8.53 3.785.65 8.053-.756 13.291-5.094 5.239-4.338 10.728-11.384 15.358-19.36 4.629-7.974 8.462-16.865 10.949-24.75.915-2.9 1.414-5.45 1.933-7.978zm-71.066 10.74c-19.686 10.104-35.007 28.047-40.684 42.725-1.002 2.592-1.669 5.007-2.07 7.205-.134 1.34-.288 2.68-.46 4.022-.123 3.113.378 5.538 1.23 7.058 1.706 3.045 5.005 5.597 15.976 4.703 3.827-.312 7.612-2.734 11.608-8.238 3.995-5.505 7.56-13.695 10.06-22.57 2.5-8.876 4-18.44 4.45-26.696.164-3.037.016-5.63-.11-8.209zm-61.148 21.221c-15.32 10.048-27.077 25.116-32.995 38.63.178 8.541-.428 17.78-1.966 26.833-.003.02-.008.039-.012.059 2.075 2.643 5.784 4.535 16.084 2.58 3.772-.716 7.28-3.525 10.668-9.422 3.388-5.898 6.065-14.421 7.61-23.512 1.544-9.09 2.021-18.762 1.591-27.018-.158-3.037-.581-5.6-.98-8.15zm-52.096 27.28c-18.503 12.135-31.833 31.6-35.92 46.798-2.384 8.867-1.373 15.474.646 18.32 2.02 2.847 5.57 5.036 16.385 2.983 3.773-.716 7.28-3.527 10.668-9.424 3.389-5.897 6.065-14.419 7.61-23.51 1.544-9.09 2.021-18.761 1.591-27.017-.158-3.038-.581-5.6-.98-8.15zm172.715 1.915a64.957 64.957 0 0 1-5.164 4.795c-7.692 6.37-17.404 10.759-27.819 8.971a53.37 53.37 0 0 1-5.308-1.19 23.867 23.867 0 0 0-.545 1.585c9.883 3.882 19.338 8.95 27.293 14.312.488.329.951.657 1.427.986 14.312-1.453 31.422-7.418 45.325-17.963-2.27-1.23-4.543-2.485-7.352-3.652-7.635-3.17-16.909-5.96-25.992-7.549-.624-.109-1.244-.198-1.865-.295zm-233.983 22.87c-16.968 14.203-27.946 35.087-30.238 50.658-1.337 9.083.435 15.528 2.772 18.12 2.336 2.593 6.118 4.353 16.62 1.057 3.664-1.15 6.82-4.348 9.5-10.6 2.68-6.25 4.35-15.025 4.827-24.234.477-9.208-.174-18.869-1.56-27.02-.511-2.998-1.228-5.495-1.92-7.981zm167.551 2.595c-4.894 4.226-10.774 7.219-17.586 7.774-.776.063-1.542.098-2.305.129-4.164 5.764-3.952 9.104-2.789 11.761 1.4 3.198 6.544 7.467 15.371 9.99 15.132 4.326 38.685 2.928 58.618-6.681-1.981-1.656-3.96-3.338-6.483-5.04-6.855-4.62-15.39-9.193-23.978-12.552-7.288-2.85-14.632-4.777-20.848-5.38zm86.656 15.182a106.836 106.836 0 0 1-13.511 4.318c.112.164.23.326.34.49l4.949 7.434-7.397 5.006c-20.412 13.818-44.598 18.985-65.494 17.557 1.179 1.786 2.212 3.592 3.055 5.435l3.713 8.123-8.094 3.776c-18.069 8.427-37.682 10.878-55.32 9.015 3.324 5.162 5.82 10.156 7.115 15.174l2.232 8.648-8.63 2.3c-16.504 4.394-33.356 4.273-48.56 1.052 2.399 4.105 4.226 8.128 5.268 12.166l2.233 8.648-8.631 2.3c-17.359 4.621-35.103 4.246-50.908.525 3.2 5.494 5.503 10.687 6.41 16.017l1.59 9.344-9.414 1.103c-29.326 3.442-58.181-6.708-75.637-21.18-4.087-3.387-7.717-7.113-10.414-11.218 17.989 59.19 62.717 123.576 62.717 123.576l-35.479 68.797c49.496 25.554 105.19 38.708 170.56 32.514-1.767-32.096 16.473-55.814 33.022-74.514-14.59-.975-29.987-2.226-44.846-5.064-16.51-3.155-32.54-8.341-46.003-18.032-13.464-9.69-24.033-24.105-28.956-43.7l17.458-4.387c3.99 15.88 11.622 26 22.011 33.478 10.39 7.478 23.863 12.094 38.87 14.961 25.516 4.875 54.75 4.428 79.554 7.643 26.748-2.02 57.07 2.601 63.441-8.596 15.568-27.36 5.054-63.93-3.44-92.492 18.463-.61 28.178-1.69 38.735-4.967-8.607-34.5-21.86-54.883-43.703-73.5 1.629-20.453 4.194-42.05 1.164-61.75zm-143.705 10.031c-3.632 2.872-7.843 4.998-12.672 5.914-5.147.977-10.06 1.154-14.574.598-2.391 3.278-2.569 5.739-2.08 7.879a119.26 119.26 0 0 1 9.176 7.135 140.092 140.092 0 0 1 7.195 6.628c14.405 5.749 36.32 7.451 56.233 1.496-1.694-1.947-3.382-3.92-5.604-5.998-6.039-5.646-13.746-11.51-21.695-16.183-5.387-3.167-10.897-5.746-15.979-7.469zm-165.892 9.828C91.6 189.035 84.35 207.673 83.58 221.33c-.47 8.343 1.653 14.076 3.498 15.916 1.846 1.84 4.091 3.065 12.469-.613 2.48-1.089 4.922-4.003 6.73-9.848 1.808-5.845 2.59-13.96 2.32-22.369-.268-8.409-1.532-17.143-3.308-24.436-.448-1.84-1.006-3.23-1.525-4.865zm117.484 14.098c-4.367 4.56-9.797 8.02-16.357 9.266-4.519.857-8.861 1.105-12.909.779.005.14.01.28.02.418.17 2.194 1.611 5.283 4.533 8.59 1.106.886 2.201 1.789 3.281 2.713a137.466 137.466 0 0 1 3.963 3.544c12.956 8.865 35.325 15.08 57.012 12.59-1.326-2.214-2.642-4.454-4.465-6.888-4.955-6.618-11.512-13.74-18.52-19.735-5.473-4.682-11.249-8.637-16.558-11.277zm-51.684 23.215c-3.888 5.477-9.097 9.938-15.865 12.062-3.643 1.144-7.216 1.857-10.646 2.15 1.39 3.355 4.753 7.65 10.494 11.69 12.87 9.058 35.571 15.474 57.555 12.95-1.327-2.215-2.642-4.455-4.465-6.89-4.956-6.617-11.515-13.74-18.522-19.734-6.165-5.274-12.72-9.645-18.55-12.228zm-48.607 26.136c-2.982 6.2-7.496 11.62-14.174 14.551-.504.222-1.01.415-1.515.615a34.936 34.936 0 0 0 4.89 4.92c10.574 8.766 29.946 16.537 49.654 17.452-.717-1.297-1.208-2.436-2.085-3.8-3.937-6.115-9.315-12.875-15.207-18.734-5.892-5.858-12.349-10.798-18.014-13.533a32.419 32.419 0 0 0-3.549-1.47zm-48.676 9.061-33.43 21.395 9.704 15.162 38.591-24.698a30.468 30.468 0 0 1-1.767-3.634c-4.235-.94-8.022-2.876-11.012-5.858a26.53 26.53 0 0 1-2.086-2.367z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/desert-skull.svg b/static/_icons/_faces/desert-skull.svg
new file mode 100644
index 00000000..a5dc1b57
--- /dev/null
+++ b/static/_icons/_faces/desert-skull.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M150.906 58.938c-13.37-.01-29.125 14.14-29.125 41.406 0 18.72-4.71 34.642-12.56 46.47-7.852 11.825-19.205 19.82-31.94 20.717-12.732.9-25.585-5.956-34.593-18.874-6.01-8.618-10.554-20.166-13.624-34.406-7.895 13.74-11.263 27.425-10.813 40.53.645 18.79 8.978 36.824 24.47 52.314 40.785 40.785 141.155 6.742 141.155-79.313 0-25.746-4.91-43.316-11.28-53.936-6.37-10.62-13.595-14.398-20.407-14.875-.426-.03-.85-.032-1.282-.032zm208.656.718c-.43 0-.855.002-1.28.032-6.813.476-14.037 4.255-20.407 14.874-6.37 10.62-11.28 28.19-11.28 53.938 0 86.055 100.337 120.066 141.124 79.28 15.49-15.49 23.854-33.524 24.5-52.31.45-13.113-2.943-26.786-10.845-40.532-3.07 14.243-7.583 25.786-13.594 34.406-9.006 12.917-21.89 19.804-34.624 18.906-12.733-.898-24.055-8.893-31.906-20.72-6.492-9.778-10.66-22.48-11.97-37.124h-.592v-9.344c0-27.266-15.755-41.414-29.125-41.406zm-102.937 6.032c-19.596.01-39.624 8.368-57.594 26.093 2.274 10.362 3.532 22.31 3.532 36 0 47.166-25.996 82.428-59.25 100.97a428.543 428.543 0 0 0-1.437 13.656c-2.55 9.437-3.55 20.09-2.844 31.406 1.057 16.895 5.766 32.224 13.126 44 5.864 9.383 13.855 17 23.53 19.72 15.358 36.078 21.356 78.76 21.69 128.156 6.88 6.182 13.75 11.12 20.624 14.875 2.45-30.97-.93-61.794-1.97-93.875l-1.06-32.157 18.124 26.595 20.5 30.094 21.78-30.75 17.595-24.814-.626 30.406c-.65 31.64-3.01 62.71-1.656 93.25 6.645-3.634 13.345-8.202 20.093-13.78.16-37.35 2.333-71.957 11.25-103.063 2.356-8.215 5.213-16.185 8.626-23.876 12.878-.31 23.332-9.213 30.563-20.78 7.36-11.778 12.068-27.107 13.124-44.002.73-11.703-.35-22.704-3.094-32.375-.32-3.5-.67-6.948-1.063-10.343-34.684-18.06-62.28-54.012-62.28-102.594 0-14.95 1.495-27.82 4.187-38.813-17.418-16.315-36.64-24.01-55.47-24zM176.375 226.5c4.22 0 10.084 3.516 15.406 12.03 5.323 8.517 9.434 21.212 10.314 35.282.88 14.07-1.665 26.643-5.78 34.875-4.118 8.233-8.688 11.25-12.908 11.25-4.22 0-10.084-3.515-15.406-12.03-5.322-8.516-9.433-21.21-10.313-35.282-.88-14.07 1.665-26.642 5.782-34.875 4.115-8.233 8.685-11.25 12.905-11.25zm160.625 0c4.22 0 8.79 3.017 12.906 11.25 4.117 8.233 6.66 20.804 5.78 34.875-.878 14.07-4.99 26.766-10.31 35.28-5.323 8.517-11.187 12.033-15.407 12.033-4.22 0-8.79-3.018-12.908-11.25-4.116-8.233-6.66-20.805-5.78-34.875.88-14.07 4.99-26.766 10.312-35.282 5.322-8.514 11.186-12.03 15.406-12.03zm-64.375 190.188L261.062 433l-7.78 10.97-7.563-11.126L236.28 419c1.243 22.403 2.268 45.11-.155 68.75 5.675 1.436 11.347 2.132 17.03 2.094 6.335-.043 12.755-1 19.25-2.875-1.508-23.73-.675-47.114.22-70.283z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/devil-mask.svg b/static/_icons/_faces/devil-mask.svg
new file mode 100644
index 00000000..e4217db1
--- /dev/null
+++ b/static/_icons/_faces/devil-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M86.55 31.4C58.98 60.64 45.4 99.1 47 136c1.88 43.1 23.9 83.8 69 106.3l5 2.5v5.6c0 45 23.1 100.1 52.5 145.2 14.6 22.5 30.8 42.6 46 57.8 13.9 13.8 27.1 23.2 36.5 27.2 9.4-4 22.5-13.4 36.4-27.3 15.2-15.2 31.4-35.3 46.1-57.8 29.3-45.1 52.5-100.1 52.5-145.1v-5.6l5-2.5c45.1-22.5 67.1-63.2 69-106.3 1.6-36.9-12-75.36-39.5-104.6.9 28.55 2.9 50.9-.6 70.6-4.5 24.4-19.5 43.8-52.9 60.5l-4.9 2.4-4.5-3.3c-2.1-1.6-4.2-3-6.3-4.5-3.3 7-7.9 13.6-13.9 19.7-11.2 11.1-27.4 10.9-39.7 6-12.3-5-23.7-14.4-23.7-28.4v-3.7l2.6-2.7c6-6 10.7-11.2 14.6-16.2-26.3-5.7-54-5.7-80.4 0 3.9 5 8.6 10.2 14.6 16.2l2.6 2.7v3.7c0 14-11.4 23.4-23.7 28.4-12.3 4.9-28.5 5.1-39.7-6-6-6.1-10.6-12.7-13.9-19.7-2.1 1.4-4.2 2.9-6.3 4.5l-4.5 3.3-4.9-2.4c-33.4-16.7-48.42-36.1-52.85-60.5-3.58-19.7-1.54-42.05-.6-70.6zm88.15 52.71C171 94.26 168 104.9 167 115.3c-1.9 18.2 1.5 34.9 15.4 48.7 4.8 4.9 12.6 5.1 20.3 2 5.6-2.2 9.6-6.3 11.3-9.2-14.1-14.7-22.4-27.1-28.3-40.9-4-9.3-7.3-19.9-11-31.79zm162.6 0c-3.7 11.86-7 22.49-11 31.79-5.9 13.8-14.2 26.2-28.3 40.9 1.7 2.9 5.7 7 11.3 9.2 7.7 3.1 15.5 2.9 20.3-2 13.9-13.8 17.3-30.5 15.4-48.7-1-10.4-4-21.04-7.7-31.19zM157.2 192.6l10.9 21.8c11.1 22.2 31.3 45.3 53.3 61.7l-21.8-54.4 16.8-6.6 30.7 76.8 1.9.9v.9h14v-.9l1.9-.9 30.7-76.8 16.8 6.6-21.8 54.4c22-16.4 42.2-39.5 53.3-61.7l10.9-21.8 22.2 88.7v1.1c0 6.2-2.6 12.1-6.3 16.4-3.8 4.4-8.6 7.5-13.9 10-10.5 5-23.3 7.5-36.1 8.6-2.1.2-4.1.3-6.1.4l-17 33.9c9.7-3.6 21.1-8.1 35.1-13.7l12.3-4.9v13.3c0 20.5-13.6 41.3-30.6 58.4-17.1 17-37.9 30.6-58.4 30.6s-41.3-13.6-58.4-30.6c-17-17.1-30.6-37.9-30.6-58.4v-13.3l12.3 4.9c14 5.6 25.4 10.1 35.1 13.7l-17-33.9c-2-.1-4-.2-6.1-.4-12.8-1.1-25.6-3.6-36.1-8.6-5.3-2.5-10.1-5.6-13.9-10-3.7-4.3-6.3-10.2-6.3-16.4v-1.1zm6.3 49-10.4 41.5c.1 1.3.5 2.5 1.8 3.9 1.5 1.8 4.2 3.8 7.9 5.5 7.5 3.5 18.7 6 29.9 6.9 10.8.9 21.5.5 29.3-.9-22.5-14.2-43.4-34.6-58.5-56.9zm185 0c-15.1 22.3-36 42.7-58.5 56.9 7.8 1.4 18.5 1.8 29.3.9 11.2-.9 22.4-3.4 29.9-6.9 3.7-1.7 6.4-3.7 7.9-5.5 1.3-1.4 1.7-2.6 1.8-3.9zm-106.4 70.1-22 11 35.9 71.9 35.9-71.9-22-11zm-53.3 49.4c4.3 10 12 21.3 21.6 30.9 11.3 11.3 25 20.1 36 23.6l-20.6-41.1c-10.6-3.1-22.5-7.6-37-13.4zm134.4 0c-14.5 5.8-26.4 10.3-37 13.4l-20.6 41.1c11-3.5 24.7-12.3 36-23.6 9.6-9.6 17.3-20.9 21.6-30.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/dwarf-face.svg b/static/_icons/_faces/dwarf-face.svg
new file mode 100644
index 00000000..ad8f13d3
--- /dev/null
+++ b/static/_icons/_faces/dwarf-face.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M127.4 14.4c-74.28 104.4-5.3 124.5 37.5 148.1 7.4-16.1 15.9-30.7 27.3-44.4-52-22.1-61.4-70.2-64.8-103.7zm257.2 0c-3.4 33.5-12.8 81.6-64.8 103.7 11.4 13.7 19.9 28.3 27.3 44.4 42.9-23.6 111.7-43.7 37.5-148.1zM256 89.5c-45.3 27.6-62.3 54.4-78.4 94.8 47.9 11.7 108.8 11.7 156.8 0-16.1-40.4-33.1-67.2-78.4-94.8zM148.8 196.1c-5.3 10.3-24.6 74.7-24.8 91.8 4.7-4.9 9.5-9.9 14.2-14.9l6.6 5.8c1.1-25.6 12.6-52.8 25.1-77.5-6.5-1.6-14.5-3.3-21.1-5.2zm214.4 0c-6.2 1.7-15.3 3.9-21.1 5.2 12.4 24.7 24 51.9 25 77.5l6.7-5.8 14.2 14.9c10.5-12.4-19.5-81.5-24.8-91.8zm-173.6 8.8-7.9 23.8c22.8 6.5 43.6 12.6 69 20l-6.5 17c-5.6-1.6-11.4-3.2-17.1-4.9-2.9 5.8-9.5 9.6-16.7 9.6-10.2 0-18.3-7.2-18.3-16 0-1.3.1-2.5.4-3.7l-16.6-4.7-13.9 41.7 36.1 34.3 14.6-27h86.5l14.7 27 36.1-34.3-13.9-41.7c-5.4 1.5-10.8 3-16.1 4.6.4 1.2.5 2.5.5 3.8 0 8.8-8.1 16-18.4 16-7.3 0-13.9-3.9-16.8-9.7-5.9 1.7-11.7 3.3-17.5 5l-6.6-17c23.2-6.8 44.4-12.9 69.1-20l-8-23.8c-47.7 11.1-84.9 11.1-132.7 0zm-43.2 94.8-70.42 73.7h47.42l-18.4 48h57.5L147.8 447l37.5-10.9 70.7 61.5 70.7-61.5 37.4 10.9-14.7-25.6h57.5l-18.3-48H436l-70.5-73.7-57.4 49.9-21.9-38.2h-60.7l-21.9 38.2zm91.2 25.7h36.8v18h-36.8z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/mecha-mask.svg b/static/_icons/_faces/mecha-mask.svg
new file mode 100644
index 00000000..79239b84
--- /dev/null
+++ b/static/_icons/_faces/mecha-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m229.096 33-43.082 71.803 30.744 76.857 15.726 110.098L243.73 303h24.542l11.245-11.242 15.726-110.098 30.744-76.857L282.904 33H265v151h-18V33h-17.904zm-80.77 16-46.242 57.799 71.719 15.937-7.817-19.539L198.504 49h-50.178zm165.17 0 32.518 54.197-7.815 19.54 71.715-15.938L363.674 49h-50.178zM60.262 115.943l11.353 45.41 131.576 52.631-3.949-27.644-17.346-43.365-121.634-27.032zm391.476 0-121.634 27.032-17.346 43.365-3.95 27.644 131.577-52.63 11.353-45.41zM89 187.693v73.05l62 74.4v-57.268l16.055-32.111L112 232v-35.107l-23-9.2zm334 0-23 9.2V232l-55.055 13.764L361 277.875v57.268l62-74.4v-73.05zm-227.986 42.405L169 282.125V390l52-39h70l52 39V282.125l-26.014-52.027-11.115 4.445-9.387 65.7L275.73 321h-39.46l-20.755-20.758-9.387-65.699-11.115-4.445zM134.826 343.85l-13.072 91.507L167 462.504V435.5l70-52.5h38l70 52.5v27.004l45.246-27.147-13.074-91.505L361 363.258V426l-76-57h-58l-76 57v-62.742l-16.174-19.408zM243 401l-58 43.5v28.805l9.492 5.695H247v-23h18v23h52.508l9.492-5.695V444.5L269 401h-26z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/silenced.svg b/static/_icons/_faces/silenced.svg
new file mode 100644
index 00000000..77f448fa
--- /dev/null
+++ b/static/_icons/_faces/silenced.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256 19.313c-44.404 0-85.098 25.434-115.248 68.124C110.6 130.127 91.594 189.847 91.594 256c0 66.152 19.005 125.87 49.156 168.563 30.15 42.69 70.845 68.125 115.25 68.125 44.402 0 85.068-25.435 115.22-68.125 30.15-42.69 49.186-102.41 49.186-168.563 0-66.152-19.038-125.87-49.19-168.563-30.15-42.69-70.812-68.124-115.214-68.124H256zm-68.047 196.324c21.997.077 43.584 9.43 57.484 32.738C232.475 258.385 219.33 266.34 206 272c1.927-3.868 3-8.23 3-12.844 0-15.93-12.914-28.844-28.846-28.844s-28.84 12.914-28.84 28.844c0 9.317 4.425 17.6 11.28 22.875-.938.036-1.874.058-2.81.068-.937.01-1.874.007-2.815-.006h-.003c-15.953-.208-32.166-3.813-48.717-11.217 5.244-29.73 43.042-55.366 79.703-55.238zm136.094 0c36.66-.128 74.46 25.51 79.703 55.238-16.55 7.404-32.764 11.01-48.717 11.217h-.002a105.376 105.376 0 0 1-5.623-.061c6.854-5.273 11.28-13.557 11.28-22.874 0-15.93-12.91-28.844-28.84-28.844-15.933 0-28.847 12.913-28.847 28.844 0 4.615 1.073 8.976 3 12.844-13.33-5.66-26.474-13.614-39.438-23.625 13.9-23.31 35.488-32.66 57.485-32.738zm-113.174 83.96c8.826-.03 18.155 3.6 25.693 11.14L256 330.17l19.434-19.434c7.538-7.538 16.867-11.168 25.693-11.14.588.002 1.175.02 1.758.054 9.33.55 17.723 4.835 23.974 11.086 6.25 6.252 10.536 14.644 11.085 23.975.55 9.332-3.045 19.41-11.086 27.45l-19.434 19.436 19.433 19.433c8.04 8.04 11.634 18.12 11.085 27.45-.55 9.332-4.834 17.724-11.086 23.975-6.252 6.25-14.644 10.537-23.975 11.086-9.33.55-19.41-3.044-27.45-11.085L256 433.02l-19.434 19.435c-8.04 8.04-18.12 11.635-27.45 11.086-9.332-.548-17.724-4.834-23.975-11.085-6.25-6.25-10.536-14.643-11.085-23.975-.55-9.33 3.045-19.41 11.086-27.45l19.434-19.434-19.433-19.436c-8.04-8.04-11.634-18.118-11.085-27.45.55-9.33 4.834-17.722 11.086-23.974 6.252-6.25 14.644-10.537 23.975-11.086a32.09 32.09 0 0 1 1.758-.054zm.943 18c-.55-.018-1.097-.01-1.644.022-4.374.256-8.882 2.42-12.305 5.843s-5.586 7.93-5.844 12.305c-.257 4.374.986 8.807 5.844 13.666l90.295 90.293c4.86 4.858 9.292 6.103 13.666 5.845 4.374-.257 8.882-2.422 12.305-5.845 3.423-3.423 5.586-7.93 5.844-12.303.257-4.374-.986-8.808-5.844-13.666l-90.295-90.295c-4.25-4.25-8.176-5.733-12.022-5.865zm88.368 0c-3.846.133-7.77 1.615-12.022 5.866l-19.435 19.435 25.97 25.97 19.436-19.434c4.858-4.86 6.1-9.292 5.844-13.666-.258-4.375-2.42-8.882-5.844-12.305-3.423-3.423-7.93-5.587-12.305-5.844a17.67 17.67 0 0 0-1.644-.022zm-82.88 76.725-19.437 19.436c-4.858 4.858-6.1 9.292-5.844 13.666.258 4.374 2.42 8.88 5.844 12.303 3.423 3.423 7.93 5.588 12.305 5.845 4.374.258 8.807-.987 13.666-5.845l19.433-19.434-25.967-25.97z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/wizard-face.svg b/static/_icons/_faces/wizard-face.svg
new file mode 100644
index 00000000..1991a1e8
--- /dev/null
+++ b/static/_icons/_faces/wizard-face.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256.3 19.42C204 57.2 177.2 111 152.5 160.7c43.4-24.6 101.7-32.9 126.9-28.7-63.8 10.6-108 25.8-144.4 64.3-2.2 4.5-4.1 8.3-6.4 13.1 115.4-27.8 134.4-27 250.9-.7C368 158.6 343 126.6 304 65.83 345.9 118.4 428.1 208.1 424.3 190.6 401.4 85.73 324.2 23.49 256.3 19.42zM88 231.3c-31 7.4-53.9 17.5-62.8 26.7.9 11.7 6.7 22.1 17.5 32 11.8 10.8 29.6 20.4 51.3 28.1 2.69.9 5.39 1.8 8.1 2.7-8.4-11-11.2-26.3-13-41.1 0-15.4-3-33.5-1.1-48.4zm336 0c2.2 16.2.6 34.5-1.1 48.4-1.8 14.8-4.6 30.1-13 41.1 20.2-7 44.6-17.6 59.4-30.8 10.8-9.9 16.6-20.3 17.5-32-8.9-9.2-31.7-19.3-62.8-26.7zm-274.4.3-7 14h98.8l-7-14zm128 0-7 14h98.8l-7-14zM119 241c-4.7 1.3-9.4 2.6-14 4.1 1 19.9.6 47.6 11.6 64.5h2.4zm274 0v68.6h2.4c10.5-20.7 11.3-41.8 11.6-64.5-4.6-1.5-9.3-2.8-14-4.1zm-255.9 22.6c-.3 18.8 2 39.5 6.2 55.7 21.1-14.1 41.9-25.7 64.7-25.7 3.2 0 6.4.2 9.4.4l5.2-15.7c-5.6 5.7-12.9 8.9-23.2 8.5-25.2-.8-33.9-11.1-37.5-23.2zm109.4 0-12.4 37.2 21.9 27.4 21.9-27.4-12.4-37.2zm103.6 0c-3.6 12.1-12.3 22.4-37.5 23.2-10.3.4-17.6-2.8-23.2-8.5l5.2 15.7c3.1-.3 6.3-.4 9.4-.4 22.8 0 43.6 11.6 64.7 25.7 4.4-20.1 6.8-37.6 6.2-55.7zm-142.1 48c-20 0-43 14.5-68.9 32.4-19.2 13.3-39.9 28.1-63.3 38.4 28.6 6.1 65.8 4.8 98.2-2.6 21.3-4.8 40.5-12.1 53.7-20.5 8.5-5.5 14.1-11.1 17-16.4l-24.2-30.3c-3.7-.6-7.9-1-12.5-1zm96 0c-4.6 0-8.8.4-12.5 1l-24.2 30.3c2.9 5.3 8.5 10.9 17 16.4 13.2 8.4 32.4 15.7 53.7 20.5 32.4 7.4 69.6 8.7 98.2 2.6-23.4-10.3-44.1-25.1-63.3-38.4-25.9-17.9-48.9-32.4-68.9-32.4zm-48 46.7c-4.6 5.7-10.6 10.8-17.4 15.3h34.8c-6.8-4.5-12.8-9.6-17.4-15.3zm-56.7 33.3c-6.9 2.2-14 4.1-21.3 5.8-9.5 2.2-19.2 3.9-28.9 5.1 6.1 19.6 14.1 39.5 23 58.2l.1.2c4.3-6.7 9.4-13.1 13.5-19.8-2.4 13.9-3.3 27.9-2.3 41.8 1.7 3.3 3.5 6.5 5.3 9.7h134.6c3.6-6.3 7-12.7 10.3-19.2 5.4-21.9 3.9-42.8 5.4-64.2 3.1 11.5 6.1 23 8.5 34.7 5.8-13.6 11.1-27.6 15.4-41.4-9.7-1.2-19.4-2.9-28.9-5.1-7.3-1.7-14.4-3.6-21.3-5.8z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/_faces/wolf-trap.svg b/static/_icons/_faces/wolf-trap.svg
new file mode 100644
index 00000000..9a9861c7
--- /dev/null
+++ b/static/_icons/_faces/wolf-trap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m106 113.773-32.963 74.375a99.166 99.166 0 0 0-3.12.704c-5.293 1.296-9.95 2.918-14.044 4.79l-8.266-53.435-25.037 87.277a108.288 108.288 0 0 0-3.338 11.635l-.26.905.07-.04c-3.632 16.665-3.56 35.726 3.597 55.818 3.306 14.022 15.515 30.355 40.24 48.135 29.193 20.992 75.05 42.954 138.495 63.86a39.272 39.272 0 0 1-.393-5.486c0-12.21 5.637-23.185 14.432-30.447l-4.07-42.73-31.54 37.69a620.827 620.827 0 0 1-27.896-11.3l-2.95-78.177-33.57 60.615c-9.068-4.85-17.496-9.773-25.294-14.75l-4.627-90.04-28.932 65.057c-7.485-6.607-13.957-13.243-19.45-19.86-4.244-20.016-.412-38.063 6.145-52.42l4.483-2.602c15.852-5.496 35.514-7.645 58.504-6.182 32.732 2.084 72.51 11.748 118.152 30.803.098-13.092 7.704-24.51 18.692-30.142l-5.597-52.59-30.14 42.78c-9.68-3.6-19.025-6.73-28.012-9.41l-4.26-68.73-32.567 59.774c-11.784-2.163-22.712-3.436-32.716-3.91l-3.77-71.97zm323.08 29.936-15.973 70.28c-9.928-1.244-20.884-1.876-32.837-1.777l-19.58-66.443-18.075 68.964c-9.342 1.12-19.127 2.635-29.316 4.55l-19.015-44.84-16.422 45.742c8.9 6.183 14.768 16.47 14.768 28.04 0 2.407-.257 4.758-.74 7.03 47.224-10.57 87.28-13.166 119.37-9.7 22.9 2.47 41.908 7.938 56.592 16.05l3.978 3.332c4.016 15.265 4.72 33.704-2.873 52.707-6.54 5.582-14.047 11.016-22.547 16.25l-17.43-69.034-19.89 87.94c-8.51 3.565-17.626 6.972-27.356 10.198l-19.724-61.576-19.274 72.674a622.45 622.45 0 0 1-29.326 6.37l-22.605-45.43-14.87 49.995a39.091 39.091 0 0 1 4.02 17.283 39.03 39.03 0 0 1-3.476 16.107c70.416-9.85 122.176-24.18 155.893-40.565 27.394-13.31 42.205-27.326 47.852-40.582 10.472-18.58 13.79-37.348 13.048-54.388l.063.053-.102-.942a107.887 107.887 0 0 0-1.308-12.035l-9.81-90.26-17.243 51.245c-3.714-2.54-8.03-4.93-13.023-7.11-.96-.417-1.95-.822-2.954-1.222L429.08 143.71zm-170.584 89.07c-8.642 0-15.443 6.802-15.443 15.445 0 3.53 1.15 6.74 3.084 9.318a161.247 161.247 0 0 1 23.101 1.844c2.91-2.793 4.705-6.733 4.705-11.162 0-8.64-6.806-15.446-15.447-15.446zm-12.652 43.468c-1.02-.003-2.032.005-3.033.025-12.016.244-22.59 2.134-30.23 4.98-5.094 1.9-8.82 4.23-10.85 6.22-2.03 1.99-2.375 3.155-2.375 4.37 0 2.426 3.81 8.437 14.258 13.844 10.448 5.408 25.905 9.714 42.992 10.954 17.088 1.24 32.486-.854 42.674-4.65 5.093-1.898 8.82-4.23 10.85-6.22 2.03-1.987 2.374-3.154 2.374-4.368 0-2.43-3.81-8.44-14.258-13.847-10.447-5.408-25.904-9.712-42.992-10.95a134.712 134.712 0 0 0-9.41-.357zm-5.688 57.215-2.96 29.51c1.08-.09 2.17-.15 3.273-.15 5.382 0 10.524 1.1 15.214 3.077l3.05-30.406a159.916 159.916 0 0 1-18.578-2.032zm.313 48.05c-11.6 0-20.798 9.2-20.798 20.8 0 11.595 9.2 20.796 20.797 20.796 11.594 0 20.798-9.203 20.798-20.798 0-11.595-9.202-20.798-20.8-20.798z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/abstract-034.svg b/static/_icons/abstract-034.svg
new file mode 100644
index 00000000..6c07eb0e
--- /dev/null
+++ b/static/_icons/abstract-034.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M149.216 490.984c-1.68-.019-3.339-.178-4.994-.292-28.965-2.053-54.896-14.28-74.91-31.984-11.405-10.122-20.833-21.948-28.055-34.322s-12.44-25.226-15.717-38.118c-4.07-16.097-5.124-31.855-4.26-46.152s3.764-27.223 7.639-38.41c4.37-12.579 9.915-22.835 15.57-30.963s11.35-14.221 16.303-18.548 9.114-6.943 12.192-8.325 5.184-1.534 5.875-.584.073 2.965-1.469 5.988-4.048 7.118-7.05 12.414-6.544 11.93-9.841 19.863-6.412 17.138-8.373 27.749c-1.754 9.431-2.537 19.952-1.91 31.108s2.626 22.934 6.757 34.467c3.294 9.248 7.983 18.492 13.954 27.02s13.268 16.33 21.739 22.783c14.822 11.346 33.818 18.72 53.465 18.986 17.96.295 37.119-5.405 53.025-16.941 12.871-9.279 23.892-22.723 31.286-38.411-7.348-24.496-9.01-51.278-4.112-77.552 1-5.313 2.153-10.603 3.672-15.773-4.608-9.532-10.45-18.308-17.333-25.559-10.989-12.033-26.131-20.976-42.155-30.086-16.868-9.275-35.293-18.428-53.025-30.67-18.969-12.793-36.19-30.529-47.884-52.87-6.061-11.87-10.062-25.057-11.457-38.702-1.459-14.286.376-28.68 5.288-41.916 7.041-18.202 19.217-31.892 33.196-40.31 15.083-9.032 31.275-12.21 46.12-10.953 16.427 1.408 30.754 7.506 42.45 15.627 3.653 2.537 7.137 5.222 10.282 8.032C210.506 31.31 232.036 21 256 21c24.038 0 45.634 10.368 60.663 26.727 3.15-2.835 6.453-5.622 10.134-8.18 11.696-8.12 26.17-14.218 42.597-15.626 14.846-1.258 30.89 1.921 45.974 10.953 13.978 8.418 26.154 22.108 33.196 40.31 4.912 13.235 6.893 27.63 5.434 41.916-1.394 13.645-5.395 26.831-11.457 38.703-11.693 22.34-29.062 40.076-48.03 52.87-17.732 12.241-36.01 21.394-52.878 30.67-16.024 9.11-31.166 18.052-42.156 30.085-6.93 7.301-12.858 16.095-17.479 25.705-.022.042.022.104 0 .146 1.48 5.074 2.838 10.27 3.82 15.48 4.897 26.275 3.235 53.057-4.114 77.552 7.394 15.689 18.415 29.133 31.286 38.411 15.907 11.537 34.919 17.237 52.878 16.942 19.648-.267 38.79-7.64 53.613-18.986 8.47-6.453 15.768-14.257 21.738-22.784s10.513-17.77 13.807-27.019c4.131-11.533 6.277-23.312 6.904-34.467s-.155-21.677-1.91-31.109c-1.96-10.61-5.221-19.817-8.519-27.749s-6.692-14.567-9.694-19.863-5.506-9.39-7.05-12.414-2.16-5.038-1.47-5.988 2.652-.797 5.73.585 7.237 3.997 12.19 8.324 10.797 10.42 16.451 18.549 11.2 18.384 15.57 30.962c3.875 11.188 6.626 24.114 7.491 38.41s-.19 30.056-4.26 46.152c-3.277 12.893-8.494 25.745-15.716 38.119s-16.503 24.2-27.908 34.321c-20.014 17.705-45.946 29.932-74.91 31.985-26.481 1.826-54.517-5.067-79.17-21.615-12.074-8.139-23.178-18.509-32.608-30.67a141.72 141.72 0 0 1-32.755 30.67c-21.572 14.48-45.594 21.588-69.035 21.907-1.675.024-3.461.019-5.141 0zm-7.932-87.337c-34.582 0-62.719-27.83-62.719-62.217s28.137-62.362 62.72-62.362 62.571 27.976 62.571 62.362-27.99 62.217-62.572 62.217zm229.579 0c-34.583 0-62.72-27.83-62.72-62.217s28.137-62.362 62.72-62.362 62.572 27.976 62.572 62.362-27.99 62.217-62.572 62.217zM256 372.539c5.043 0 9.107-13.916 9.107-31.109s-4.064-31.108-9.107-31.108-9.107 13.915-9.107 31.108 4.064 31.109 9.107 31.109zm0-128.815c3.308-4.303 6.712-8.41 10.429-12.268 17.409-17.617 36.621-29.27 54.493-38.411 18.505-9.77 35.695-17.523 49.94-26.873 14.82-10.021 27.42-20.96 34.371-34.03 3.754-6.769 6.504-13.832 7.491-20.738 1.024-7.138.73-14.438-1.175-20.447-2.352-8.313-8.185-15.792-14.982-20.885-7.424-5.604-16.958-8.434-25.998-8.763-10.102-.377-20.122 2.663-28.936 7.157-3.1 1.582-6 3.434-8.813 5.403 3.419 8.987 5.435 18.74 5.435 28.918 0 45.131-36.866 81.641-82.255 81.641s-82.255-36.51-82.255-81.641c0-10.178 2.016-19.93 5.435-28.918-2.784-1.942-5.601-3.84-8.666-5.403-8.814-4.494-18.835-7.534-28.936-7.157-9.04.33-18.575 3.159-25.998 8.763-6.798 5.093-12.63 12.572-14.982 20.885-1.906 6.01-2.2 13.31-1.175 20.447.987 6.906 3.737 13.97 7.49 20.739 6.952 13.069 19.553 24.008 34.371 34.029 14.246 9.35 31.436 17.104 49.94 26.873 17.872 9.14 36.938 20.794 54.347 38.41 3.695 3.836 7.137 7.993 10.429 12.269zm0-77.406c20.893 0 37.896-16.906 37.896-37.68S276.893 91.103 256 91.103s-37.896 16.76-37.896 37.535 17.002 37.68 37.896 37.68z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/anvil-impact.svg b/static/_icons/anvil-impact.svg
new file mode 100644
index 00000000..2cdcd2f0
--- /dev/null
+++ b/static/_icons/anvil-impact.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M413.375 69.906 336.937 191.47l-8.25-32.69-30.218 88.97 62.655-29.375.22 29.438 127.03-50.938-70.813-1.97 47.782-68.686-73.47 39.25 21.5-95.564zM210.22 102.094l-32 14.406 16.874 55.656-177.813 80.03 12.564 27.876L207.656 200l30.406 49.47 49.313-22.19-21.344-70.343-55.81-54.843zM197.593 266.78v20.345h-88.906c15.994 38.807 51.225 65.43 88.906 74.28v32.97h58.562c-12.118 30.528-33.505 55.684-58.47 77.594H172.22v18.686h284.34V471.97h-27.406c-28.734-21.895-50.055-47.018-61.625-77.595h63.658v-29.188c19.748-6.995 39.5-19.51 59.25-36.687-19.812-17.523-39.23-27.25-59.25-31.938v-29.78H197.594z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/anvil.svg b/static/_icons/anvil.svg
new file mode 100644
index 00000000..b0c2259c
--- /dev/null
+++ b/static/_icons/anvil.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M128.688 115.594v147.75h285v-147.75h-285zm-111.844 20.47c17.374 47.14 54.372 80.413 94.906 93.81v-93.81H16.844zm414.375 12.31v88.657c21.457-9.083 42.92-25.257 64.374-47.374-21.52-22.562-42.633-35.173-64.375-41.28zm-226.25 132.47c-12.15 38.536-33.897 71.5-60.595 100.47l257.844-.002c-28.705-29.016-49.952-62.054-61.5-100.468H204.97zM101.843 400v43.78h337.562V400H101.844z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/book-cover.svg b/static/_icons/book-cover.svg
new file mode 100644
index 00000000..7cd57aa7
--- /dev/null
+++ b/static/_icons/book-cover.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M196.73 35.23c-8.132.878-16.3 1.936-24.515 3.172C192.968 50.21 212.045 66.795 224 96c-24.896-22.512-44.232-39.5-75.795-53.512a686.283 686.283 0 0 0-26.656 5.64c22.69 10.745 49.026 26.094 75.114 51.306-57.456-25.454-81.792-31.066-120.23-39.4A965.564 965.564 0 0 0 39.5 71.743c54.813 3.532 103.127 19.644 187.346 47.717l2.015.673 1.503 1.504c5.794 5.793 15.356 9.254 25.203 9.353-2.725-39.43-18.787-67.802-58.836-95.76zm118.54 0c-40.05 27.958-56.11 56.33-58.836 95.76 9.847-.1 19.41-3.56 25.203-9.353l1.502-1.504 2.014-.672C369.374 91.39 417.687 75.277 472.5 71.745a966.86 966.86 0 0 0-36.934-11.71c-38.438 8.334-62.774 13.946-120.23 39.4 26.088-25.212 52.424-40.56 75.115-51.307a689.186 689.186 0 0 0-26.655-5.64c-31.563 14.014-50.9 31-75.795 53.513 11.954-29.205 31.032-45.79 51.785-57.598a591.705 591.705 0 0 0-24.515-3.172zM25 89.287v301.758c44.68.19 106.01 16.813 190 44.498v-301.04C128.034 105.534 81.67 90.71 25 89.288zm462 0c-56.67 1.423-103.034 16.246-190 45.217v301.05c84.317-27.698 143.413-42.5 190-44.2V89.287zm-254 55.195v200.325c15.47 3.1 30.71 3.292 46 .097V144.482c-7.227 3.058-15.14 4.518-23 4.518-7.86 0-15.773-1.46-23-4.518zm0 218.627v13.933c15.296 3.488 30.512 3.284 46-.1V363.22c-15.37 2.728-30.764 2.543-46-.11zm46 32.185c-15.226 2.856-30.633 3.058-46 .125v48.838c3.222 3.24 5.775 5.876 8.365 7.56 3.283 2.136 6.77 3.49 14.274 3.19l.18-.008h.18c11.61 0 15.954-4.04 23-10.836v-48.87z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/book-pile.svg b/static/_icons/book-pile.svg
new file mode 100644
index 00000000..f4167873
--- /dev/null
+++ b/static/_icons/book-pile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M341.79 95.5 65.54 166.379l127.84 58.11 276.025-72.64L341.789 95.5zm-1.577 18.984 74.858 33.059-72.551 19.09-77.258-32.916 74.951-19.233zm142.813 52.395L194.864 242.71l-3.057.805h-.002l-.041.01-2.857-1.3L44.73 178.15l-.184-.092c-5.585-2.793-8.012-1.992-10.77.11-2.757 2.1-5.515 6.88-6.275 12.956-1.519 12.153 3.616 27.58 23.916 34.346l.412.139L193.338 288.5l173.235-45.588V212.45l76-18.345v28.806l42.173-11.097c-4.36-14.037-5.33-29.146-1.72-44.934zm-58.453 50.086-40 9.656v103.186l21.947-21.948 18.053 12.498V216.965zm58.453 13.914-40.453 10.646v45.385l42.173-11.098c-4.36-14.036-5.33-29.145-1.72-44.933zM38.42 240.268c-1.803.036-3.177.782-4.642 1.898-2.758 2.101-5.516 6.88-6.276 12.957-1.519 12.153 3.616 27.579 23.916 34.346l.412.138L193.338 352.5l173.235-45.588v-45.387l-174.766 45.99-146.62-65.161a61.602 61.602 0 0 1-4.802-1.874 8.317 8.317 0 0 0-1.965-.212zm6.768 2.086.021.008-.279-.125.258.117zm437.838 52.525-40.453 10.646v45.385l42.173-11.097c-4.36-14.037-5.33-29.146-1.72-44.934zM38.42 304.268c-1.803.036-3.177.782-4.642 1.898-2.758 2.101-5.516 6.88-6.276 12.957-1.519 12.153 3.616 27.579 23.916 34.346l.412.138L193.338 416.5l173.235-45.588v-45.387l-174.766 45.99-146.62-65.161a61.602 61.602 0 0 1-4.802-1.874 8.317 8.317 0 0 0-1.965-.212zm6.768 2.086.021.008-.279-.125.258.117zm363.437 24.855-38.863 38.863 68.834-18.115-29.97-20.748z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/camping-tent.svg b/static/_icons/camping-tent.svg
new file mode 100644
index 00000000..43944a22
--- /dev/null
+++ b/static/_icons/camping-tent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="m361.155 91.245-18 .193.42 38.98c-45.773 13.285-108.533 19.738-166.474 23.573 35.097 96.284 99.357 173.77 157.845 257.13 20.718-19.655 51.11-31.983 83.46-36.01-20.8-18.109-36.634-27.966-58.833-70.438 31.27 37.085 52.579 48.467 77.623 62.006 3.263-13.094 8.938-24.638 18.721-32.674 8.667-7.12 20.026-10.654 33.53-10.344-46.874-59.763-101.67-117.054-127.83-189.435l-.462-42.98zM163.25 102.92l-17.998.244s.25 18.34.56 36.97c.156 9.316.325 18.703.489 25.929.06 2.636.117 4.58.174 6.542-34.378 83.733-69.154 160.993-123.92 233.442 33.635-1.387 66.326-1.203 98.552-.041C143.37 343.389 144.453 271.151 156.734 204c11.417 68.562 10.566 139.445 33.483 205.83 42.962 3.082 85.69 7.198 129.35 10.926-55.67-79.151-118.213-155.037-155.118-249.365-.05-1.782-.1-3.396-.152-5.737-.162-7.156-.333-16.523-.488-25.82-.31-18.594-.559-36.914-.559-36.914z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/companion-cube.svg b/static/_icons/companion-cube.svg
new file mode 100644
index 00000000..dc5b96ba
--- /dev/null
+++ b/static/_icons/companion-cube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M25 25v142h62.432c1.901-22.183 10.369-41.386 24.302-55.355C125.66 97.685 144.82 89.192 167 87.385V25H25zm192 0v46h78V25h-78zm128 0v62.432c22.183 1.901 41.386 10.369 55.355 24.302 13.96 13.925 22.453 33.086 24.26 55.266H487V25H345zM185 57v48h-9c-22 0-39.37 7.173-51.521 19.355-12.152 12.183-19.348 29.668-19.479 51.698l-.053 8.947H57v14h32v48h62.39c4.33-50.72 44.89-91.28 95.61-95.61V89h-48V57h-14zm128 0v32h-48v62.39c50.72 4.33 91.28 44.89 95.61 95.61H407v-48h48v-14h-48v-9c0-22-7.173-39.37-19.355-51.521-12.183-12.152-29.668-19.348-51.698-19.479l-8.947-.053V57h-14zm-57 112c-48.155 0-87 38.845-87 87s38.845 87 87 87 87-38.845 87-87-38.845-87-87-87zm-34.799 41.043c13.685-.168 29.758 9.24 34.799 24.363 5.041-15.124 21.114-24.53 34.799-24.363 18.492.227 28.641 20.276 28.535 31.314-.542 17.05-12.307 28.577-26.941 41.327C279.663 293.774 256 320.83 256 320.83s-23.663-27.056-36.393-38.146c-14.634-12.75-26.4-24.278-26.941-41.327-.106-11.038 10.043-31.087 28.535-31.314zM25 217v78h46v-78H25zm400 0v78h46v-78h-46zM89 265v48H57v14h48v9c0 22 7.173 39.37 19.355 51.521 12.183 12.152 29.668 19.348 51.698 19.479l8.947.053V455h14v-32h48v-62.39c-50.72-4.33-91.28-44.89-95.61-95.61H89zm271.61 0c-4.33 50.72-44.89 91.28-95.61 95.61V423h48v32h14v-48h9c22 0 39.37-7.173 51.521-19.355 12.152-12.183 19.348-29.668 19.479-51.698l.053-8.947H455v-14h-48v-48h-46.39zM25 345v142h142v-62.432c-22.183-1.901-41.386-10.369-55.355-24.302C97.685 386.34 89.192 367.18 87.385 345H25zm399.568 0c-1.901 22.183-10.369 41.386-24.302 55.355-13.925 13.96-33.086 22.453-55.266 24.26V487h142V345h-62.432zM217 441v46h78v-46h-78z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/corporal.svg b/static/_icons/corporal.svg
new file mode 100644
index 00000000..08f94515
--- /dev/null
+++ b/static/_icons/corporal.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 325.8">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M150,0C120.4,47.7,55.4,125.6,0,164.5v52.9c53.1-38.9,105.1-92.5,140.6-145.7l9.4-14.2,9.4,14.2c35.3,53,88,106.3,140.6,145.5v-52.6C243.6,125.6,179.3,47.6,150,0h0ZM150,108.4C120.4,156.1,55.4,234,0,272.9v52.9c53.1-38.9,105.1-92.5,140.6-145.7l9.4-14.2,9.4,14.2c35.3,53,88,106.3,140.6,145.5v-52.6c-56.4-38.9-120.7-116.9-150-164.6h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/_icons/diploma.svg b/static/_icons/diploma.svg
new file mode 100644
index 00000000..ba81f7e9
--- /dev/null
+++ b/static/_icons/diploma.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M440.41 67.996C305.221 82.672 154.69 102.263 24.955 128.82l41.068 278.137c84.113-17.286 175.36-32.728 265.59-45.207a404.446 404.446 0 0 0-4.63-19.385C245.851 354.53 163.671 369.2 90.36 385.582l-9.457 2.113-34.42-233.98-1.199-8.162 8.028-1.903c117.04-27.75 246.945-46.473 361.992-55.459l8.101-.632 42.905 236.183-9.498 1.131a4251.105 4251.105 0 0 0-36.885 4.574 515.021 515.021 0 0 0 5.328 20.397c20.837-2.417 41.486-4.672 61.789-6.701zm-31.794 38.846c-109.549 8.936-231.99 26.686-343.111 52.513L95.9 365.988c67.613-14.83 141.885-28.138 215.711-39.42-8.203-8.985-12.553-20.468-13.465-32.668-1.029-13.772 7.132-25.138 16.83-33.238 9.699-8.1 21.523-13.738 32.178-16.762 8.076-2.291 17.439-3.63 26.91-3.377a79.69 79.69 0 0 1 9.465.809c12.549 1.849 25.402 7.232 32.063 19.29 8.874 16.064 8.83 34.87 3.006 50.94a4202.77 4202.77 0 0 1 26.601-3.328zM173.4 172.346l2.631 17.804-73.998 10.926-2.629-17.805zm112.774 40.562 3.015 17.744-176.535 29.989-3.013-17.745zm-40.02 42.744 3.002 17.746-130.05 22.008-3.002-17.746zm124.649 2.895c-6.602.12-13.295 1.125-18.733 2.668-8.206 2.329-18.358 7.251-25.554 13.262-7.196 6.01-10.85 12.302-10.418 18.082.841 11.258 4.644 19.335 12.982 25.699 8.338 6.364 22.136 10.986 43.193 11.719 11.576.402 21.654-7.628 27.588-20.147 5.934-12.519 6.623-28.477-.021-40.506-2.916-5.279-9.587-8.808-18.934-10.185a58.923 58.923 0 0 0-7.283-.588 71.452 71.452 0 0 0-2.82-.004zm32.095 77.205c-8.366 7.734-19.065 12.635-31.25 12.21-9.477-.329-17.995-1.37-25.625-3.11 11.987 47.995 15.644 99.063 19.436 146.17 12.367-8.327 22.462-19.54 28.582-36.221l4.924-13.422 9.973 10.244c12.052 12.381 25.366 19.027 39.718 24.55-14.655-44.078-34.119-92.013-45.758-140.421z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/fishing.svg b/static/_icons/fishing.svg
new file mode 100644
index 00000000..53ee8206
--- /dev/null
+++ b/static/_icons/fishing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M455 32v198.47a16 16 0 0 0-7 13.208 16 16 0 0 0 7 13.226v66.774c0 5.75-1.877 8.85-4.262 10.836-2.384 1.987-5.657 2.887-9.258 2.287-7.16-1.193-16.37-8.05-16.474-28.77h15.533l-31.606-42.997-1.914 42.645H407c0 .106.005.21.006.316l-.002.035h.002c.128 26.794 14.79 43.74 31.514 46.527 8.4 1.4 17.126-.702 23.742-6.215C468.877 342.83 473 333.928 473 323.678v-66.79a16 16 0 0 0 7-13.21 16 16 0 0 0-7-13.227V32h-18zM191.97 142.678l-14.505.052 6.484 12.97c11.004 22.014 13.562 44.94 6.306 70.484 16.372-7.893 32.52-14.514 47.04-19.09 17.127-5.4 34.613-8.823 52.304-10.633-9.637-11.92-19.864-24.137-33.348-34.056-16.005-11.772-36.664-19.825-64.283-19.726zM321.173 212.9c-26.903-.003-53.246 3.41-78.47 11.362-29.805 9.395-69.467 29.167-100.985 50.238-15.76 10.536-29.53 21.437-38.99 31.195-9.458 9.76-13.73 18.572-13.73 21.983 0 1.115.658 3.355 3.328 6.55 2.67 3.192 7.133 7.02 12.975 10.918 11.683 7.798 28.768 15.954 48.064 23.338 10.86 4.156 22.445 8.07 34.225 11.647 4.63-5.44 9.13-10.773 13.082-15.685 4.6-5.715 8.51-10.923 11.09-14.957 1.933-3.025 2.8-5.784 3.103-6.27.1-.164.138-.074.133.343l18 .235c-.085 6.563-2.86 10.362-6.07 15.387-3.212 5.024-7.426 10.575-12.233 16.548-4.236 5.265-9.016 10.898-13.816 16.536 17.5-3.984 36.32-7.97 52.87-12.55 12.883-3.567 24.274-7.546 31.738-11.62 7.465-4.075 9.47-7.418 9.518-8.744l17.988.654c-.408 11.207-9.133 18.567-18.883 23.89-9.6 5.24-21.69 9.302-34.956 12.995 4.813.746 9.442 1.37 13.81 1.84 28.785 3.106 68.376 3.102 102.03-1.568 16.827-2.335 32.197-5.863 43.777-10.45 5.082-2.014 9.168-4.26 12.53-6.534-12.215-3.44-26.56-7.368-41.294-13.414-20.51-8.417-40.92-20.97-46.713-43.135-3.522-13.476 2.455-25.923 10.693-35.452 8.24-9.53 19.04-17.607 28.994-25.555s18.976-15.81 23.584-22.865c3.85-5.896 5.066-10.28 2.94-16.24-27.796-6.15-55.635-10.113-82.942-10.573-1.798-.03-3.595-.044-5.388-.045zm-307.55 24.39 11.028 15.585c25.106 35.484 28.82 103.86 19.66 151.705L41.4 419.783l14.653-4.99c31.135-10.605 49.9-25.726 63.056-41.373-8.873-4.267-16.915-8.706-23.8-13.3-6.772-4.52-12.463-9.17-16.792-14.35C74.188 340.594 71 334.563 71 327.68c0-12.59 7.967-23.33 18.807-34.512 4.653-4.8 10.03-9.647 15.92-14.486-18.32-23.38-43.376-37.776-73.06-39.977l-19.042-1.412zm332.317 10.388a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/rank-1.svg b/static/_icons/rank-1.svg
new file mode 100644
index 00000000..b38e8b6d
--- /dev/null
+++ b/static/_icons/rank-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255 471 91.7 387V41h328.6v346zm-147.3-93.74L255 453l149.3-75.76V57H107.7zm146.56-33.1-94.66-48.69v50l94.54 48.62 98.27-49.89v-49.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/rank-2.svg b/static/_icons/rank-2.svg
new file mode 100644
index 00000000..ed72ade4
--- /dev/null
+++ b/static/_icons/rank-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255 471 91.7 387V41h328.6v346zm-147.3-93.74L255 453l149.3-75.76V57H107.7v320.26zm146.43-65.76 98.27-49.89v-49.9l-98.14 49.82-94.66-48.69v50zm.13 32.66-94.66-48.69v50l94.54 48.62 98.27-49.89v-49.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/rank-3.svg b/static/_icons/rank-3.svg
new file mode 100644
index 00000000..8a5e5cd6
--- /dev/null
+++ b/static/_icons/rank-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255 471 91.7 387V41h328.6v346zm-147.3-93.74L255 453l149.3-75.76V57H107.7v320.26zm187.61-168.34-14.5-46 38.8-28.73-48.27-.43L256 87.94l-15.33 45.78-48.27.43 38.8 28.73-14.5 46 39.31-28zM254.13 311.5l98.27-49.89v-49.9l-98.14 49.82-94.66-48.69v50zm.13 32.66-94.66-48.69v50l94.54 48.62 98.27-49.89v-49.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/sergeant.svg b/static/_icons/sergeant.svg
new file mode 100644
index 00000000..a0af216e
--- /dev/null
+++ b/static/_icons/sergeant.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M255.978 39.21C226.38 86.89 161.383 164.77 106 203.713V256.6c53.113-38.92 105.113-92.538 140.56-145.71L256 96.735l9.44 14.157c35.333 53 87.963 106.298 140.56 145.473V203.77C349.61 164.835 285.346 86.825 255.978 39.21zm0 108.406C226.38 195.293 161.383 273.174 106 312.116v52.89C159.113 326.09 211.113 272.47 246.56 219.3l9.44-14.16 9.44 14.16c35.333 53 87.963 106.298 140.56 145.473v-52.597c-56.39-38.937-120.654-116.944-150.022-164.557zm0 107.782C226.38 303.075 161.383 380.956 106 419.898v52.89c53.113-38.918 105.113-92.536 140.56-145.707l9.44-14.16 9.44 14.16c35.333 53 87.963 106.298 140.56 145.473v-52.597c-56.39-38.938-120.654-116.945-150.022-164.558z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/steak.svg b/static/_icons/steak.svg
new file mode 100644
index 00000000..e084d923
--- /dev/null
+++ b/static/_icons/steak.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M294.818 43.27c-.957.003-1.917.014-2.88.035-46.15.993-96.56 23.687-128.614 54.82-41.965 40.758-91.926 108.163-118.896 173.047-13.486 32.442-21.17 64.22-19.93 91.305 1.24 27.085 10.723 49.188 32.54 65.546 15.71 11.78 28.638 10.986 44.814 2.72 16.175-8.268 34.067-25.324 52.433-45.405 36.732-40.162 74.766-92.452 121.008-107.932 61.794-20.685 98.278-34.43 120.926-46.785 22.646-12.353 31.392-22.466 40.74-39.08 7.302-12.974 8.365-26.067 5.03-39.882-3.334-13.814-11.388-28.167-22.45-41.62-22.127-26.903-56.253-49.946-83.706-60.003-12.75-4.67-26.652-6.79-41.016-6.764zm3.418 24.26c21.21-.103 42.145 4.338 58.493 16.677 47.554 35.895 86.454 58.96 54.377 111.88-32.076 52.923-177.004 58.17-217.56 20.06-1.663-10.596-12.613-91.45 10.176-121.653 12.52-10.007 54.02-26.77 94.513-26.965zm-119.87 43.66c-1.058 1.99-7.086 83.113-10.403 98.937-19.397 9.728-71.78 21.074-73.92 6.977 3.618-16.654 37.1-71.993 84.324-105.915zm278.095 26.248a93.708 93.708 0 0 1 3.026 9.996c4.2 17.4 2.736 35.916-6.84 52.933-10.34 18.374-23.007 32.528-47.808 46.057-24.8 13.53-61.8 27.285-123.832 48.05-36.878 12.346-75.83 61.892-113.438 103.012-18.804 20.56-37.417 39.008-57.525 49.285-5.895 3.014-12.05 5.204-18.322 6.418 3.03 1.73 6.143 3.338 9.165 4.728 8.116 3.734 16.547 5.668 17.197 5.686 14.037-.65 29.08-8.326 44.816-21.024 15.82-12.764 32.063-30.284 48.493-48.676 32.86-36.784 65.744-77.523 104.444-90.478 61.817-20.694 98.67-34.278 121.465-46.543 22.794-12.264 31.4-22.235 40.044-39.028 9.733-18.912 10.244-32.256 4.506-46.28-4.33-10.583-12.968-21.73-25.39-34.135zm-314.546 95.466c33.96-.19 69.09 16.75 104.688 36.092-71.258 37.318-141.89 180.326-187.133 133.99-18.206-20.105-19.433-119.77 30.147-153.564 17.043-11.616 34.51-16.418 52.297-16.518zm-36.463 73.213c-5.436.103-10.92 1.77-14.74 4.787-12.34 9.753-21.72 34.145-11.206 45.844 10.057 11.19 35.46 5.816 44.728-6.012 8.262-10.544 5.69-31.088-4.32-40.02-3.632-3.24-9.023-4.7-14.46-4.6z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/trash-can.svg b/static/_icons/trash-can.svg
new file mode 100644
index 00000000..a40ea6d5
--- /dev/null
+++ b/static/_icons/trash-can.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M199 103v50h-78v30h270v-30h-78v-50H199zm18 18h78v32h-78v-32zm-79.002 80 30.106 286h175.794l30.104-286H137.998zm62.338 13.38.64 8.98 16 224 .643 8.976-17.956 1.283-.64-8.98-16-224-.643-8.976 17.956-1.283zm111.328 0 17.955 1.284-.643 8.977-16 224-.64 8.98-17.956-1.284.643-8.977 16-224 .64-8.98zM247 215h18v242h-18V215z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/trophy-cup.svg b/static/_icons/trophy-cup.svg
new file mode 100644
index 00000000..67469cd6
--- /dev/null
+++ b/static/_icons/trophy-cup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M98.398 21.146a17.092 17.092 0 0 0-4.636.521c-20.49 5.262-33.163 20.63-36.116 38.649-2.952 18.019 2.168 38.346 12.676 58.193 20.695 39.086 63.262 77.08 117.852 85.85-5.61-6.72-11.05-14.246-16.274-22.375-39.008-12.57-70.021-42.344-85.67-71.899-9.206-17.387-12.846-34.491-10.82-46.857C77.437 50.862 83.482 42.89 98.238 39.1c.065-.017.068-.034.092-.053-.065-.143.105-.08 0 0a.68.68 0 0 0 .176.217c.527.493 1.689 2.24 2.207 5.14 1.036 5.804-.413 15.593-8.135 25.68l14.293 10.942c10.418-13.61 13.65-28.086 11.56-39.785-1.044-5.85-3.396-11.165-7.628-15.124-3.174-2.969-7.747-4.868-12.405-4.972zm315.204 0c-4.658.104-9.23 2.003-12.405 4.972-4.232 3.96-6.584 9.274-7.629 15.124-2.089 11.699 1.143 26.174 11.56 39.785l14.294-10.942c-7.722-10.087-9.171-19.876-8.135-25.68.518-2.9 1.68-4.647 2.207-5.14a.695.695 0 0 0 .176-.217c-.105-.08.065-.143 0 0 .024.019.027.036.092.053 14.756 3.79 20.801 11.76 22.828 24.127 2.026 12.366-1.614 29.47-10.82 46.857-15.649 29.555-46.662 59.33-85.67 71.899-5.223 8.129-10.665 15.655-16.274 22.375 54.59-8.77 97.157-46.764 117.852-85.85 10.508-19.847 15.628-40.174 12.676-58.193-2.953-18.02-15.626-33.387-36.116-38.649a17.092 17.092 0 0 0-4.636-.521zm-276.166 7.713c2.146 36.533 16.76 83.07 36.537 120.824 10.707 20.442 22.876 38.334 34.761 50.685C220.62 212.72 232 218.858 240 218.858h32c8 0 19.38-6.138 31.266-18.49 11.885-12.351 24.054-30.243 34.761-50.685 19.777-37.755 34.39-84.29 36.537-120.824H137.436zm95.564 208v16h46v-16h-46zm6.445 34c-2.458 25.967-12.796 57.873-24.437 76h81.984c-11.64-18.127-21.979-50.033-24.437-76h-33.11zm-38.445 94v14h110v-14H201zm-32 32v94h174v-94H169zm23 23h128v48H192v-48z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/two-coins.svg b/static/_icons/two-coins.svg
new file mode 100644
index 00000000..e94e1198
--- /dev/null
+++ b/static/_icons/two-coins.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M264.4 95.01c-35.6-.06-80.2 11.19-124.2 34.09C96.27 152 61.45 182 41.01 211.3c-20.45 29.2-25.98 56.4-15.92 75.8 10.07 19.3 35.53 30.4 71.22 30.4 35.69.1 80.29-11.2 124.19-34 44-22.9 78.8-53 99.2-82.2 20.5-29.2 25.9-56.4 15.9-75.8-10.1-19.3-35.5-30.49-71.2-30.49zm91.9 70.29c-3.5 15.3-11.1 31-21.8 46.3-22.6 32.3-59.5 63.8-105.7 87.8-46.2 24.1-93.1 36.2-132.5 36.2-18.6 0-35.84-2.8-50.37-8.7l10.59 20.4c10.08 19.4 35.47 30.5 71.18 30.5 35.7 0 80.3-11.2 124.2-34.1 44-22.8 78.8-52.9 99.2-82.2 20.4-29.2 26-56.4 15.9-75.7zm28.8 16.8c11.2 26.7 2.2 59.2-19.2 89.7-18.9 27.1-47.8 53.4-83.6 75.4 11.1 1.2 22.7 1.8 34.5 1.8 49.5 0 94.3-10.6 125.9-27.1 31.7-16.5 49.1-38.1 49.1-59.9 0-21.8-17.4-43.4-49.1-59.9-16.1-8.4-35.7-15.3-57.6-20zm106.7 124.8c-10.2 11.9-24.2 22.4-40.7 31-35 18.2-82.2 29.1-134.3 29.1-21.2 0-41.6-1.8-60.7-5.2-23.2 11.7-46.5 20.4-68.9 26.1 1.2.7 2.4 1.3 3.7 2 31.6 16.5 76.4 27.1 125.9 27.1s94.3-10.6 125.9-27.1c31.7-16.5 49.1-38.1 49.1-59.9z"/></svg>
\ No newline at end of file
diff --git a/static/_icons/wizard-face.svg b/static/_icons/wizard-face.svg
new file mode 100644
index 00000000..1991a1e8
--- /dev/null
+++ b/static/_icons/wizard-face.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M256.3 19.42C204 57.2 177.2 111 152.5 160.7c43.4-24.6 101.7-32.9 126.9-28.7-63.8 10.6-108 25.8-144.4 64.3-2.2 4.5-4.1 8.3-6.4 13.1 115.4-27.8 134.4-27 250.9-.7C368 158.6 343 126.6 304 65.83 345.9 118.4 428.1 208.1 424.3 190.6 401.4 85.73 324.2 23.49 256.3 19.42zM88 231.3c-31 7.4-53.9 17.5-62.8 26.7.9 11.7 6.7 22.1 17.5 32 11.8 10.8 29.6 20.4 51.3 28.1 2.69.9 5.39 1.8 8.1 2.7-8.4-11-11.2-26.3-13-41.1 0-15.4-3-33.5-1.1-48.4zm336 0c2.2 16.2.6 34.5-1.1 48.4-1.8 14.8-4.6 30.1-13 41.1 20.2-7 44.6-17.6 59.4-30.8 10.8-9.9 16.6-20.3 17.5-32-8.9-9.2-31.7-19.3-62.8-26.7zm-274.4.3-7 14h98.8l-7-14zm128 0-7 14h98.8l-7-14zM119 241c-4.7 1.3-9.4 2.6-14 4.1 1 19.9.6 47.6 11.6 64.5h2.4zm274 0v68.6h2.4c10.5-20.7 11.3-41.8 11.6-64.5-4.6-1.5-9.3-2.8-14-4.1zm-255.9 22.6c-.3 18.8 2 39.5 6.2 55.7 21.1-14.1 41.9-25.7 64.7-25.7 3.2 0 6.4.2 9.4.4l5.2-15.7c-5.6 5.7-12.9 8.9-23.2 8.5-25.2-.8-33.9-11.1-37.5-23.2zm109.4 0-12.4 37.2 21.9 27.4 21.9-27.4-12.4-37.2zm103.6 0c-3.6 12.1-12.3 22.4-37.5 23.2-10.3.4-17.6-2.8-23.2-8.5l5.2 15.7c3.1-.3 6.3-.4 9.4-.4 22.8 0 43.6 11.6 64.7 25.7 4.4-20.1 6.8-37.6 6.2-55.7zm-142.1 48c-20 0-43 14.5-68.9 32.4-19.2 13.3-39.9 28.1-63.3 38.4 28.6 6.1 65.8 4.8 98.2-2.6 21.3-4.8 40.5-12.1 53.7-20.5 8.5-5.5 14.1-11.1 17-16.4l-24.2-30.3c-3.7-.6-7.9-1-12.5-1zm96 0c-4.6 0-8.8.4-12.5 1l-24.2 30.3c2.9 5.3 8.5 10.9 17 16.4 13.2 8.4 32.4 15.7 53.7 20.5 32.4 7.4 69.6 8.7 98.2 2.6-23.4-10.3-44.1-25.1-63.3-38.4-25.9-17.9-48.9-32.4-68.9-32.4zm-48 46.7c-4.6 5.7-10.6 10.8-17.4 15.3h34.8c-6.8-4.5-12.8-9.6-17.4-15.3zm-56.7 33.3c-6.9 2.2-14 4.1-21.3 5.8-9.5 2.2-19.2 3.9-28.9 5.1 6.1 19.6 14.1 39.5 23 58.2l.1.2c4.3-6.7 9.4-13.1 13.5-19.8-2.4 13.9-3.3 27.9-2.3 41.8 1.7 3.3 3.5 6.5 5.3 9.7h134.6c3.6-6.3 7-12.7 10.3-19.2 5.4-21.9 3.9-42.8 5.4-64.2 3.1 11.5 6.1 23 8.5 34.7 5.8-13.6 11.1-27.6 15.4-41.4-9.7-1.2-19.4-2.9-28.9-5.1-7.3-1.7-14.4-3.6-21.3-5.8z"/></svg>
\ No newline at end of file
diff --git a/static/audio/Fire Themed GUI - Hammer Of Fire.wav b/static/audio/Fire Themed GUI - Hammer Of Fire.wav
new file mode 100644
index 00000000..2d39b418
Binary files /dev/null and b/static/audio/Fire Themed GUI - Hammer Of Fire.wav differ
diff --git a/static/audio/abilities/boom/Fire and Wood.wav b/static/audio/abilities/boom/Fire and Wood.wav
new file mode 100644
index 00000000..0d689f59
Binary files /dev/null and b/static/audio/abilities/boom/Fire and Wood.wav differ
diff --git a/static/audio/abilities/doublePersona/Magic Transition.wav b/static/audio/abilities/doublePersona/Magic Transition.wav
new file mode 100644
index 00000000..f00cbb99
Binary files /dev/null and b/static/audio/abilities/doublePersona/Magic Transition.wav differ
diff --git a/static/audio/abilities/emberStrike/Fire Impact 10.wav b/static/audio/abilities/emberStrike/Fire Impact 10.wav
new file mode 100644
index 00000000..3d3bd67b
Binary files /dev/null and b/static/audio/abilities/emberStrike/Fire Impact 10.wav differ
diff --git a/static/audio/abilities/emberStrike/Fire Impact 2.wav b/static/audio/abilities/emberStrike/Fire Impact 2.wav
new file mode 100644
index 00000000..e9a3511c
Binary files /dev/null and b/static/audio/abilities/emberStrike/Fire Impact 2.wav differ
diff --git a/static/audio/abilities/emberStrike/Fire Impact 20.wav b/static/audio/abilities/emberStrike/Fire Impact 20.wav
new file mode 100644
index 00000000..58e6c414
Binary files /dev/null and b/static/audio/abilities/emberStrike/Fire Impact 20.wav differ
diff --git a/static/audio/abilities/emberStrike/Fire Impact 8.wav b/static/audio/abilities/emberStrike/Fire Impact 8.wav
new file mode 100644
index 00000000..b13a3bc8
Binary files /dev/null and b/static/audio/abilities/emberStrike/Fire Impact 8.wav differ
diff --git a/static/audio/abilities/mindsnap/DeBuff 1.wav b/static/audio/abilities/mindsnap/DeBuff 1.wav
new file mode 100644
index 00000000..b8bdbe75
Binary files /dev/null and b/static/audio/abilities/mindsnap/DeBuff 1.wav differ
diff --git a/static/audio/abilities/mindsnap/DeBuff 2.wav b/static/audio/abilities/mindsnap/DeBuff 2.wav
new file mode 100644
index 00000000..d4e106e8
Binary files /dev/null and b/static/audio/abilities/mindsnap/DeBuff 2.wav differ
diff --git a/static/audio/abilities/powerReady/Power Ready (14).wav b/static/audio/abilities/powerReady/Power Ready (14).wav
new file mode 100644
index 00000000..36ead681
Binary files /dev/null and b/static/audio/abilities/powerReady/Power Ready (14).wav differ
diff --git a/static/audio/abilities/powerReady/Power Ready (17).wav b/static/audio/abilities/powerReady/Power Ready (17).wav
new file mode 100644
index 00000000..91cf8d89
Binary files /dev/null and b/static/audio/abilities/powerReady/Power Ready (17).wav differ
diff --git a/static/audio/abilities/stomp/Unspecified Impact Layer (1).wav b/static/audio/abilities/stomp/Unspecified Impact Layer (1).wav
new file mode 100644
index 00000000..cbd137d0
Binary files /dev/null and b/static/audio/abilities/stomp/Unspecified Impact Layer (1).wav differ
diff --git a/static/audio/abilities/stomp/Unspecified Impact Layer (2).wav b/static/audio/abilities/stomp/Unspecified Impact Layer (2).wav
new file mode 100644
index 00000000..19c7b964
Binary files /dev/null and b/static/audio/abilities/stomp/Unspecified Impact Layer (2).wav differ
diff --git a/static/audio/abilities/stomp/Unspecified Impact Layer (3).wav b/static/audio/abilities/stomp/Unspecified Impact Layer (3).wav
new file mode 100644
index 00000000..cd0df8e0
Binary files /dev/null and b/static/audio/abilities/stomp/Unspecified Impact Layer (3).wav differ
diff --git a/static/audio/abilities/warcry/Fire Themed GUI - Warrior Shout (2).wav b/static/audio/abilities/warcry/Fire Themed GUI - Warrior Shout (2).wav
new file mode 100644
index 00000000..0ff33585
Binary files /dev/null and b/static/audio/abilities/warcry/Fire Themed GUI - Warrior Shout (2).wav differ
diff --git a/static/audio/potion/Drink Potion.wav b/static/audio/potion/Drink Potion.wav
new file mode 100644
index 00000000..5b48ebf2
Binary files /dev/null and b/static/audio/potion/Drink Potion.wav differ
diff --git a/static/audio/sword/Metallic Weapon Swing (1).wav b/static/audio/sword/Metallic Weapon Swing (1).wav
new file mode 100644
index 00000000..8a13f9c4
Binary files /dev/null and b/static/audio/sword/Metallic Weapon Swing (1).wav differ
diff --git a/static/audio/sword/Metallic Weapon Swing (2).wav b/static/audio/sword/Metallic Weapon Swing (2).wav
new file mode 100644
index 00000000..4e728bfa
Binary files /dev/null and b/static/audio/sword/Metallic Weapon Swing (2).wav differ
diff --git a/static/audio/sword/Metallic Weapon Swing (3).wav b/static/audio/sword/Metallic Weapon Swing (3).wav
new file mode 100644
index 00000000..4aa4c292
Binary files /dev/null and b/static/audio/sword/Metallic Weapon Swing (3).wav differ
diff --git a/static/audio/sword/Metallic Weapon Swing (4).wav b/static/audio/sword/Metallic Weapon Swing (4).wav
new file mode 100644
index 00000000..113e7589
Binary files /dev/null and b/static/audio/sword/Metallic Weapon Swing (4).wav differ
diff --git a/static/audio/sword/Metallic Weapon Swing (5).wav b/static/audio/sword/Metallic Weapon Swing (5).wav
new file mode 100644
index 00000000..31224177
Binary files /dev/null and b/static/audio/sword/Metallic Weapon Swing (5).wav differ
diff --git a/static/icons/abilities/adrenaline.svg b/static/icons/abilities/adrenaline.svg
new file mode 100644
index 00000000..19139a18
--- /dev/null
+++ b/static/icons/abilities/adrenaline.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 473.64 473.639">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M63.891,0c46.3,37.518,62.25,65.617,53.53,93.102C79.824,63.87,40.104,47.112,0,32.598v36.608c36.057,8.926,71.558,21.116,104.804,46.54-13.053,16.635-34.362,33.918-62.75,53.73l81.99,35.407c-.466,3.448-.636,6.93-.507,10.407.573,15.082,7.218,28.014,16.3,38.914,7.177,8.615,15.9,16.206,25.077,23.468l-63.877,46.57L0,265.522v45.738c112.43,11.546,144.12,112.475,0,135.832v26.547h22.818l115.01-54.788c-46.436-55.056-3.446-101.025,44.4-127.89,20.244,15.41,39.46,30.752,47.838,48.93l8.487,18.41,8.485-18.41c3.777-8.196,9.772-15.81,17.055-23.118l15.303,115.51c49.028-28.366,133.015,6.997,141.394,41.355h52.85v-4.72l-68.87-83.24c-66.362,44.197-111.586-5.474-118.148-88.37,5.94-4.64,12.094-9.252,18.2-13.913,10.46-7.983,20.702-16.163,29.213-25.492,35.543,15.528,46.467,41.64,24.895,79.65l114.71-8.654v-43.199l-80.105,17.2c-5.02-24.163-5.625-41.7,22.13-65.864-21.682-3.325-43.248-5.917-64.68-7.045,1.468-4.655,2.386-9.55,2.58-14.7v-.002c.274-7.05-.69-14.093-2.848-20.81,32.581-10.003,64.05-23.323,93.912-39.75l-94.375-56.003c37.818-26.36,78.284-37.675,123.385-49.07V0h-70.675c-19.42,39.684-67.117,76.64-126.712,112.08,38.692,3.463,133.353,27.43,62.64,61.05-9.054-10.854-21.457-18.803-34.85-22.495-13.712-3.78-28.856-3.107-42.388,3.856-8.82,4.54-16.73,11.757-23.1,21.516-6.373-9.76-14.283-16.977-23.103-21.515-6.766-3.48-13.933-5.39-21.125-5.954-7.19-.566-14.406.21-21.262,2.1-16.032,4.418-30.65,14.93-39.792,29.236l-36.323-17.405c29.32-43.383,61.55-71.547,96.914-85.156C158.47,49.739,135.803,31.375,120.657.003h-56.766v-.003ZM189.124,167.023c1.23-.02,2.453.02,3.67.113,4.87.377,9.63,1.668,14.106,3.97,8.953,4.607,17.226,13.358,22.86,29.026l8.793,24.455,8.792-24.455c5.633-15.668,13.907-24.42,22.86-29.025,8.95-4.606,19.04-5.164,28.87-2.455,19.66,5.418,36.654,23.902,35.82,45.928-.386,10.132-4.602,18.803-11.982,27.66-7.38,8.86-17.894,17.5-29.428,26.302-18.87,14.403-40.57,29.167-54.933,49.314-14.363-20.146-36.062-34.91-54.933-49.314-11.533-8.803-22.048-17.443-29.428-26.3-7.38-8.86-11.597-17.53-11.98-27.66-.836-22.026,16.156-40.51,35.815-45.93,3.686-1.015,7.41-1.572,11.096-1.628h.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/aegis.svg b/static/icons/abilities/aegis.svg
new file mode 100644
index 00000000..db45bf0b
--- /dev/null
+++ b/static/icons/abilities/aegis.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 482.039 482.039">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M240.385,0l-9.232,1.437-62.868,9.765,3.586,23.08c-12.948,4.269-25.473,9.727-37.416,16.303l-14.51-18.03-7.28,5.86-49.56,39.89,14.163,17.594c-9.221,10.234-17.449,21.321-24.573,33.111l-20.78-8.046-3.374,8.715-22.976,59.325,20.26,7.846c-2.928,13.637-4.537,27.525-4.805,41.47l-21.02,3.267,11.2,72.1,20.634-3.206c4.348,13.326,9.953,26.209,16.74,38.474l-16.165,13.012,45.75,56.84,15.858-12.764c10.55,9.461,21.999,17.869,34.183,25.104l-7.27,18.773,68.042,26.347,7.266-18.76c13.846,2.856,27.937,4.357,42.074,4.482l3.115,20.05,72.1-11.2-3.168-20.386c13.329-4.499,26.199-10.26,38.433-17.205l13.075,16.24,56.84-45.747-13.315-16.543c9.2-10.494,17.369-21.848,24.394-33.906l20.11,7.787,26.35-68.038-20.63-7.988c2.676-13.521,4.059-27.267,4.133-41.05l22.29-3.462-1.434-9.234-9.765-62.866-22.85,3.55c-4.412-12.951-10.019-25.464-16.746-37.378l18.103-14.57-5.86-7.28-39.89-49.56-18.28,14.715c-10.177-8.962-21.17-16.953-32.835-23.868l8.562-22.112-8.713-3.375-59.326-22.973-8.564,22.12c-13.151-2.713-26.525-4.202-39.95-4.45-.166-.004-.33-.002-.494-.005L240.387.003l-.002-.003ZM224.787,21.337l3.108,20.008-35.164,5.463-3.11-20.006,35.166-5.465ZM303.684,29.767l33.184,12.85-7.312,18.882-33.184-12.853,7.31-18.88h.002ZM246.905,41.98c10.2.34,20.456,1.458,30.687,3.406l-5.4,13.94,68.042,26.35,5.402-13.952c8.757,5.376,17.085,11.42,24.91,18.08l-11.842,9.53,45.75,56.84,12.098-9.735c4.991,9.139,9.266,18.65,12.787,28.45l-15.443,2.398,11.2,72.1,15.98-2.483c-.232,10.497-1.293,20.96-3.174,31.29l-15.395-5.964-3.373,8.714-22.977,59.327,15.975,6.188c-5.507,9.141-11.738,17.825-18.633,25.97l-10.926-13.575-7.278,5.86-49.56,39.89,11.24,13.964c-9.468,5.197-19.337,9.624-29.514,13.24l-2.78-17.908-9.235,1.433-62.866,9.766,2.828,18.202c-10.853-.275-21.664-1.435-32.328-3.47l6.7-17.3-8.713-3.375-59.327-22.974-6.695,17.29c-9.279-5.7-18.075-12.15-26.3-19.286l14.302-11.512-5.86-7.28-39.888-49.56-14.02,11.285c-5.056-9.485-9.345-19.36-12.826-29.53l17.688-2.75-1.436-9.232-9.765-62.867-17.182,2.67c.388-10.657,1.63-21.265,3.715-31.723l15.826,6.128,26.35-68.04-15.258-5.91c5.568-8.893,11.829-17.333,18.726-25.24l10.118,12.57,56.84-45.75-9.778-12.147c9.156-4.855,18.672-8.996,28.465-12.387l2.366,15.234,72.1-11.202-2.324-14.96v-.003ZM117.105,58.834l12.694,15.772-27.723,22.312-12.694-15.77,27.723-22.316v.002ZM400.758,89.482l22.313,27.722-15.774,12.696-22.312-27.72,15.773-12.697h0ZM316.514,131.482c-1.922-.016-3.843.046-5.76.187-23.033,1.7-45.933,15.003-61.29,44.006l-7.906,14.933-8.445-14.636c-20.227-35.054-56.5-47.824-87.093-41.81-30.592,6.012-55.328,29.383-53.947,72.85,1.278,40.24,29.05,67.447,63.59,97.54,30.045,26.176,64.672,53.784,85.763,93.478,22.093-39.507,57.856-65.95,88.133-91.453,17.386-14.644,33.017-28.982,43.86-44.736,10.846-15.755,17.13-32.66,16.456-54.243-1.262-40.46-26.58-66.478-56.316-73.916-5.576-1.402-11.298-2.14-17.047-2.2h.002ZM42.591,145.143l18.88,7.31-12.85,33.186-18.88-7.31s12.85-33.186,12.85-33.186ZM455.241,189.779l5.463,35.164-20.01,3.11-5.462-35.164,20.01-3.11h-.001ZM41.341,254.079l5.465,35.165-20.006,3.108-5.465-35.163,20.007-3.11h0ZM433.187,296.409l18.88,7.312-12.85,33.185-18.88-7.312,12.85-33.186h0ZM74.461,352.11l22.313,27.723-15.775,12.695-22.312-27.722,15.774-12.696ZM379.735,385.13l12.695,15.77-27.723,22.316-12.695-15.774,27.723-22.312ZM152.42,420.36l33.186,12.852-7.31,18.88-33.185-12.85,7.31-18.882h-.001ZM289.082,435.233l3.11,20.01-35.164,5.463-3.11-20.008,35.164-5.465h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/aimedShot.svg b/static/icons/abilities/aimedShot.svg
new file mode 100644
index 00000000..ee001e54
--- /dev/null
+++ b/static/icons/abilities/aimedShot.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 471.624 471.626">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M245.157.002v57.75c91.033,4.56,164.143,77.686,168.717,168.718h57.75C466.989,103.35,368.279,4.62,245.156,0v.002ZM226.467.032C103.607,4.964,4.654,103.558,0,226.471h58.377c4.56-90.824,77.346-163.827,168.09-168.687V.032ZM236.157,107.252c-32.23,0-61.768,11.79-84.408,31.312l22.47,22.47c12.541-10.451,27.53-17.548,43.562-20.626l18.78,70.53,18.75-70.374c15.581,3.119,30.149,10.044,42.407,20.156l22.345-22.344c-22.465-19.41-51.782-31.125-83.906-31.125h0ZM333.281,151.595l-22.344,22.345c10.19,12.371,17.139,27.085,20.22,42.813l-70.095,18.687,70.125,18.656c-3.095,15.954-10.12,30.885-20.438,43.44l22.344,22.342c19.513-22.637,31.312-52.154,31.313-84.375,0-32.124-11.716-61.44-31.126-83.906v-.002ZM138.531,151.752c-19.478,22.446-31.28,51.697-31.28,83.75s11.885,61.6,31.467,84.22l22.532-22.532c-10.116-12.426-17.016-27.151-20.093-42.875l70.936-18.875-70.906-18.906c3.073-15.502,9.909-30.01,19.906-42.25l-22.562-22.532h0ZM.031,245.159c4.95,122.665,103.774,221.487,226.436,226.435v-58.34c-90.544-4.852-163.21-77.547-168.06-168.094H.03h0ZM413.843,245.159c-4.862,90.755-77.85,163.575-168.686,168.125v58.342c122.924-4.638,221.507-103.596,226.436-226.468h-57.75ZM236.563,259.909l-18.97,71.28c-16.208-3.188-30.995-10.455-43.22-20.687l-22.436,22.437c22.618,19.582,52.072,31.47,84.22,31.47s61.304-11.803,83.75-31.283l-22.345-22.343c-11.955,9.914-26.296,16.98-42.03,20.217l-18.97-71.093v.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/alorasTouch.svg b/static/icons/abilities/alorasTouch.svg
new file mode 100644
index 00000000..64b4a825
--- /dev/null
+++ b/static/icons/abilities/alorasTouch.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 460 460">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M133.4.3C82,.9,53.8,56.6,54.1,87.2c1.5,47.3,34.2,79.4,74.8,114.8,35.4,30.8,76.1,63.3,100.9,110,0,0,.1-.2.2-.3,0,0,.1.2.2.3,24.8-46.7,65.6-79.2,100.9-110,40.6-35.4,73.3-67.4,74.8-114.8.3-30.7-27.9-86.3-79.2-87-38-.5-82.6,25.7-96.6,67.7C216,25.9,171.4-.2,133.4.3ZM34.2,170c-8.8-.1-17.8,11.1-17.9,39.9,0,44.2-4.4,56.6,16.1,106.6,15,36.6,21.7,64.8,69.6,87.5,5.7,20,3.4,24.7-.4,41.8-3.6,16,33.4,18.9,60.5,5.5,29.1-15.9,26.6-59.6,21.5-89.2-6-34.5-25.1-41.6-41.5-56.3-17.1-24.5-21.1-68.8-48.9-86.7-5.8-3.7-35.4-7.5,5.3,93.9-53.6-13.3-43.8-74.8-47.7-120.3-1.2-13.6-8.8-22.5-16.6-22.6h0ZM425.8,170c-7.8.1-15.4,9.1-16.6,22.6-3.9,45.5,5.9,107-47.7,120.3,40.6-101.5,11.1-97.7,5.3-93.9-27.8,17.9-31.7,62.2-48.9,86.7-16.5,14.7-35.5,21.9-41.5,56.3-5.2,29.6-7.6,73.3,21.5,89.2,27.1,13.5,64.1,10.5,60.5-5.5-3.9-17.1-6.1-21.8-.4-41.8,47.9-22.7,54.7-50.9,69.6-87.5,20.4-49.9,16.2-62.4,16.1-106.6,0-28.8-9.1-40-17.9-39.9h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/berserk.svg b/static/icons/abilities/berserk.svg
new file mode 100644
index 00000000..17b6dbe1
--- /dev/null
+++ b/static/icons/abilities/berserk.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 455.391 440">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M419.691,0c-29.4,44.05-63.2,65.7-126.3,64.8-14.915-20.504-39.465-32.757-65.7-32.79-26.271.002-50.865,12.258-65.8,32.79-63,.9-96.85-20.77-126.2-64.8-30.29,45.43,21.04,110.9,112.2,112.4.617,10.15,3.371,20.079,8.1,29.2C16.531,161.1-11.489,352.1,3.691,428h80c0-48,16-112,64-144l-16,144c0,16,64,16,64,0,0-32,16-64,32-64s32,32,32,64c0,16,64,16,64,0l-16-144c48,32,64,96,64,144h80c15.2-75.9-12.8-267-152.4-286.4,4.764-9.114,7.552-19.043,8.2-29.2,91.1-1.5,142.5-66.96,112.2-112.4ZM163.691,87.8c13.5,15.7,27.2,31.3,48,40.2,0,0-22.9,15.7-32,8.7-10.1-7.9-16-48.9-16-48.9ZM291.691,87.8s-5.9,41-16,48.9c-9.1,7-32-8.7-32-8.7,20.8-8.9,34.5-24.5,48-40.2h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/bloodlust.svg b/static/icons/abilities/bloodlust.svg
new file mode 100644
index 00000000..506908fd
--- /dev/null
+++ b/static/icons/abilities/bloodlust.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 469.529 473.655">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M218.998,0c103.702,97.21,183.912,194.304,250.529,282.09v-112.404c-7.062-6.39-14.155-12.677-21.343-18.844,2.986-3.465,4.813-7.972,4.813-12.906,0-10.927-8.855-19.78-19.782-19.78-6.285,0-11.875,2.96-15.5,7.53-43.25-34.448-88.287-64.956-134-91.312,1.006-2.025,1.594-4.274,1.594-6.688,0-8.35-6.773-15.125-15.125-15.125-5.416,0-10.142,2.848-12.813,7.126C244.717,12.86,231.922,6.296,218.996,0h.002ZM79.435,18.123c5.11,5.177,10.18,10.36,15.22,15.593-4.225,1.173-7.38,4.29-8.345,9-1.812,8.844,4.727,19.92,14.625,24.72,3.642,1.766,7.237,2.42,10.406,2.124-2.535,4.11-4,8.974-4,14.157,0,14.89,12.05,26.938,26.94,26.938,8.68,0,16.41-4.097,21.343-10.47,88.686,101.2,165.598,208.4,235.156,306.72-7.4,6.047-12.126,15.23-12.126,25.53,0,18.213,14.756,32.97,32.97,32.97,6.274,0,12.13-1.77,17.123-4.813,3.086,4.354,6.193,8.76,9.25,13.063h31.532v-114.345c-41.357-69.223-154.77-193.34-184.533-213.31,24.14,33.4,45.1,64.336,64.813,94.03C262.319,144.28,166.366,60.442,79.434,18.124h0ZM51.215,33.373c-1.919.092-3.8.571-5.53,1.406-7.176,3.433-10.214,12.042-6.78,19.22,3.432,7.175,12.04,10.213,19.218,6.78,7.176-3.433,10.214-12.042,6.78-19.22-2.574-5.38-8.08-8.445-13.687-8.186h-.001ZM406.965,53.748c-1.454.05-2.858.357-4.155.968-6.918,3.256-8.265,13.625-3,23.156,5.265,9.53,15.144,14.632,22.063,11.375,6.918-3.258,8.264-13.627,3-23.157-4.278-7.744-11.6-12.56-17.907-12.344v.002ZM255.841,88.998c-1.983.123-3.845.72-5.436,1.78-6.366,4.236-6.168,14.688.437,23.344,6.607,8.655,17.104,12.236,23.47,8s6.168-14.688-.438-23.344c-4.954-6.492-12.078-10.155-18.03-9.78h-.003ZM0,127.31c91.018,100.043,158.696,190.397,212,271.595-8.48-1.364-18.445,4.948-20.25,13.594-6.22,29.777,12.896,53.913,47.593,61.155h125.657C267.028,333.914,130.218,190.704,0,127.31ZM30.03,229.155c-3.807.078-7.195,1.333-9.406,3.844-5.052,5.738-2.15,15.785,6.47,22.436,8.62,6.65,19.697,7.396,24.75,1.656,5.052-5.74,2.182-15.786-6.438-22.437-4.85-3.74-10.48-5.6-15.375-5.5h0ZM77.218,267.28c-14.89,0-26.937,12.048-26.937,26.938s12.047,26.968,26.936,26.968,26.97-12.08,26.97-26.97-12.08-26.936-26.97-26.936h0ZM156.938,370.75c-10.928,0-19.782,8.853-19.782,19.78s8.854,19.78,19.78,19.78,19.782-8.853,19.782-19.78-8.854-19.78-19.78-19.78Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/boom.svg b/static/icons/abilities/boom.svg
new file mode 100644
index 00000000..ca07df11
--- /dev/null
+++ b/static/icons/abilities/boom.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 484.61 481.972">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M150.528,0l86.455,98.443c2.138-1.109,4.295-2.18,6.47-3.215,14.37-6.805,27.684-11.083,39.76-12.103.75-.064,1.498-.113,2.243-.15L224.343,0h-73.815ZM0,52.75v27.722l.21-.25,128.432,107.3c3.31-3.817,6.687-7.576,10.127-11.276L0,52.752v-.002ZM287.897,101.585c-.982.017-2.017.07-3.11.163-8.734.738-20.327,4.21-33.337,10.37-.564.268-1.146.567-1.715.844l30.996,35.295c1.406-.72,2.808-1.43,4.193-2.1,13.245-6.395,25.504-10.477,36.683-11.554.592-.057,1.183-.1,1.774-.14l-21.385-29.032-.344.344c-2.62-2.62-6.88-4.304-13.754-4.19h0ZM0,104.402v148.353l69.13,47.274c.036-.995.088-1.993.172-2.996,1.02-12.077,5.298-25.392,12.104-39.762,8.213-17.34,20.215-36.21,35.324-55.348L0,104.403h0ZM326.181,153.027c-.875.025-1.802.083-2.784.178-7.853.756-18.432,4.027-30.346,9.78-23.826,11.508-53.028,32.712-80.87,60.554-27.843,27.84-49.048,57.044-60.555,80.87-5.754,11.914-9.025,22.494-9.782,30.346-.755,7.853.795,12.184,3.197,14.586,2.402,2.402,6.735,3.952,14.588,3.196,7.852-.757,18.432-4.028,30.345-9.782,7.81-3.77,16.202-8.6,24.928-14.347-17.195,39.23-28.067,89.333-34.394,153.564,37.517-129.093,80.838-109.43,114.544-6.287-18.62-109.564,99.38-61.623,185.008,5.397-66.417-101.782-124.625-177.518,4.55-188.135-124.058-5.07-140.995-44.53-21.876-102.653-58.372,6.19-105.555,15.9-143.54,32.65,4.806-7.536,8.915-14.8,12.206-21.613,5.754-11.914,9.023-22.494,9.78-30.346.756-7.852-.794-12.183-3.196-14.585-1.8-1.8-4.688-3.122-9.332-3.352-.823-.039-1.647-.046-2.47-.02h0ZM152.739,188.677c-3.353,3.61-6.6,7.226-9.734,10.842l37.066,30.97c2.872-3.275,5.795-6.504,8.768-9.687l-36.1-32.125h0ZM295.009,189.794c3.84.122,6.953,1.23,9.142,3.42,6.837,6.836,3.118,22.676-8.182,41.52-29.24,17.088-52.02,39.92-69.58,70.706-20.12,12.694-37.26,17.173-44.45,9.984-11.437-11.437,6.648-48.066,40.396-81.814,26.365-26.366,54.49-43.17,70.986-43.81.577-.02,1.14-.024,1.69-.007h-.002ZM131.109,213.932c-14.242,18.11-25.428,35.748-32.81,51.338-6.163,13.01-9.634,24.602-10.373,33.336-.738,8.734,1.033,13.87,4.026,16.86l-.1.1,31.152,21.304c.034-1.296.112-2.6.238-3.91,1.076-11.177,5.158-23.437,11.555-36.68,7.777-16.104,19.084-33.65,33.275-51.465l-36.965-30.882h.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/bulwark.svg b/static/icons/abilities/bulwark.svg
new file mode 100644
index 00000000..41c36c35
--- /dev/null
+++ b/static/icons/abilities/bulwark.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 397.95 468.351">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M194.71.007C133.165.412,71.063,9.547,7.24,27.819l-6.467,1.844-.28,6.72c-6.405,147.46,49.12,346.625,192.28,429.28l4.688,2.688,4.656-2.688c139.03-80.27,201.88-281.764,195.376-429.28l-.125-5.907-6.624-2.657C327.114,9.604,264.174.169,200.682.007c-1.984-.005-3.984-.013-5.97,0h-.002ZM195.054,18.632c1.86-.013,3.73-.006,5.593,0,59.47.15,118.43,8.782,178.28,25.343,3.956,139.034-57.428,327.223-181.468,402.625C69.369,368.954,14.909,183.58,19.021,44.006c60.047-16.615,118.307-25.005,176.034-25.373h-.001ZM198.835,35.193l-28.438,126.72-45.312-25.313,26.97,48.25-92.5,26.157,91.655,25.937-26.688,47.72,45.625-25.5,28.657,127.688,28.655-127.625,45.875,25.656-26.72-47.814,91.845-26-92.75-26.25,27.063-48.406-45.5,25.438-28.437-126.658Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/charge.svg b/static/icons/abilities/charge.svg
new file mode 100644
index 00000000..bcf916e6
--- /dev/null
+++ b/static/icons/abilities/charge.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 452 452">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M320,10.2c-44.6.3-96,14.5-134,36.7-36,34.3-32.5,92.9-74.7,138.8,4.4-.3,8.8-.6,13-1.1h-.3c17.8-2.6,32,10.4,34.7,25.1,1.4,7.3,0,15.5-5.1,22.1-4.5,5.9-11.6,10.1-20.5,11.9,14.6,31.9,32,62.2,57.1,89.1,10.7.7,23.6-.3,31-10.8l-8.5-51.1,1.6-2.8c14.1-25,15.3-32.2,15.7-49.6l.3-10.3c9.3,1.5,16.5,2.7,25.9,4.1-10.7-13.5-16.2-26.7-17.9-39.4-2.1-18.3,6.4-42,15.6-62.9l16.3,7.6c-7.9,17.2-14.8,31.9-14.1,53,2,15.2,11.2,32.5,37.4,53.4,6.7,4.3,13.2,11.7,18.1,19.3l-4.1,5.2c-18.5,23.5-33.8,45.4-40.3,70,11.6,30.5,38.9,76.1,71.1,98,12.6,2.8,38.1-9.6,49.1-16.3-7.2-14.4-16.5-27.7-27.7-40l-24.1,11.5-1.6-12.3c-1.3-10.1-8.5-17.7-18.4-26.6l-8.6-7.8,9.7-6.4c23.4-15.4,41.9-24.1,51.4-41.2l2.4-3.8,7.2-4.4c20.5-12.7,40.9-42.4,34.2-77l17.7-3.2c5.1,28.3-.2,52.2-21.3,79.2,6.8-1.3,12.9-2.9,18.2-4.8,11.8-4.2,19.6-9.5,24.9-17.1V64.2c-32.2-19-86.5-46.6-131.6-54.1h0ZM20.3,143.2c20,15.8,42.5,30.5,71.6,41.3,2.9-6.1,5.8-12.2,8.8-18.3-27.4-6.1-54.4-14.8-80.3-23h0ZM.4,198.2c34.6,16.5,74.8,30.1,127.4,28.1,6.7-.9,9.9-3.2,11.6-5.5,1.7-2.3,2.2-5,1.7-8-1.1-6.1-6.1-11.7-14.4-10.5h-.2s-.2,0-.2,0c-40.8,4.5-85.1-.4-126-4.3h0ZM165.8,274.8c-7.8-9.6-12.2-18.6-12.1-23,.1-3.8,5.9-9.9,9.9-9.9,10.4.4,4.5,24.8,2.2,32.8ZM177.6,306.6c6.2-.4,12.2.5,18.3,3.5,3.6,4,1.6,16.1,1.6,16.1l-19.9-19.6h0ZM222.3,345c-2.7,1.5-6.3,3-9.7,4l4.3,31.2-10.4-29.9c-3.2.5-6.5.7-9.8.8l5.4,31.5s-18.6-13.5-28.4-10.9c-11.2,3-22.1,27-22.1,27,0,0-8.9-20.4-16.7-17.9-6.2,2.1-19,44-4.1,54.4,15.7,10.9,52-23.9,52-23.9,0,0,20.4,33.9,35.5,30.2,8.1-2,9.5-23.2,9.5-23.2,0,0,36.1,18.7,51.6,10.5,11.1-5.8,14.7-34.4,14.7-34.4l-23.2,9.1s-5.2-29.9-17.2-33.7c-7.2-2.3-20,10.5-20,10.5l-11.6-35.5h0ZM376.8,352c10.3,11.9,19.1,24.8,26.1,38.6,3.7-2.2,7.4-4.3,11.1-6.3-7.2-13.5-15.6-26.1-27.2-37.1l-10,4.8Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/crushingBlow.svg b/static/icons/abilities/crushingBlow.svg
new file mode 100644
index 00000000..eccd2654
--- /dev/null
+++ b/static/icons/abilities/crushingBlow.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 465.479 474.16">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M53.682,0l36.696,67.596L.002,14.182v.058l102.127,106.376L0,74.346v.3l53.856,60.932L0,131.506v.014l196.608,95.675-68.502,34.29,76.547,18.104-42.896,55.227,72.892-11.634c5.323-8.462,9.98-16.897,13.958-25.48-18.586-11.336-30.994-31.8-30.994-55.165,0-35.66,28.91-64.57,64.572-64.57,22.323,0,41.986,11.335,53.58,28.556l36.55,2.15,35.013-37.644-59.405,9.334,23.363-78.582-63.15,59.25-21.5-112.395-21.354,110.425-48.256-53.547,6.737,61.11L54.2.001h-.52.002ZM284.788,222.244c-2.274,61.787-26.61,106.513-68.617,156.828l75.126,82.96,41.545-116.155c-6.507,2.467-13.803,3.007-20.984,1.083-18.23-4.885-29.204-23.86-24.32-42.086.206-.77.444-1.522.7-2.265l1.452-22.514,77.674-3.506h.004l65.41,41.467-11.62,24.1c-5.448,17.396-23.93,27.675-41.698,22.915-6.818-1.827-12.62-5.626-16.957-10.618l-22.757,119.707,104.506-33.964c-13.598-67.112-8.595-114.53,21.227-169.622l-83.105-42.59-97.586-5.74h0ZM320.268,298.094c-6.786.15-12.81,4.683-14.668,11.62-2.265,8.455,2.62,16.913,11.098,19.185,8.48,2.272,16.937-2.61,19.203-11.067,2.265-8.456-2.62-16.913-11.098-19.185-1.036-.278-2.097-.453-3.168-.523-.46-.03-.915-.04-1.368-.03h.001ZM387.872,316.204c-6.786.15-12.81,4.682-14.67,11.618-2.266,8.456,2.618,16.914,11.098,19.186,8.48,2.272,16.937-2.61,19.203-11.066,2.267-8.456-2.617-16.914-11.097-19.186-1.035-.278-2.096-.454-3.166-.523-.458-.03-.915-.04-1.367-.03h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/cut.svg b/static/icons/abilities/cut.svg
new file mode 100644
index 00000000..3feb64ce
--- /dev/null
+++ b/static/icons/abilities/cut.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 468.662 457.16">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M247.78,420.097C553.76,472.173,295.343,4.562,0,1.235,424.473-31.951,673.767,616.3,247.781,420.095v.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/daggerThrow.svg b/static/icons/abilities/daggerThrow.svg
new file mode 100644
index 00000000..7a3b14fb
--- /dev/null
+++ b/static/icons/abilities/daggerThrow.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 473.3 471.3">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M0,0v17.4l133.3,133.3c-3.9,6.4-5.9,13.4-6.3,20.1L0,43.8v35.8l191.4,191.4c-3.3,5.7-6.3,11.5-9.1,17.4L0,106v39l171.3,171.3c-2.2,6.7-4.1,13.6-5.8,20.6L0,171.4v33.6l158.3,157.6,2.1-2.1h0c0,.1,13.9-2.7,13.9-2.7,26.1-5.4,50.1-15,71.9-27.4,66.7,66,119.5,103,210.4,135.1l16.8,5.9-4.6-17.2c-24.8-92.5-69.2-136.4-139.3-206.4,13.4-22.5,23.5-47.4,29-74.9l2.8-13.7,1.8-1.8L205.9,0h-35l164.6,164.6c-7,1.7-13.8,3.7-20.5,6L144.5,0h-39.5l182.1,182.1c-5.8,2.8-11.5,5.9-17.1,9.2L78.6,0h-37.2l129.9,129.9c-1.4,0-2.7,0-4.1,0-5.9.3-11.9,1.8-17.5,4.8L15,0S0,0,0,0ZM168.7,148.3c5.2-.1,10.3,1.6,15,4.3,4.7,2.8,8.5,6.7,10.4,10.4,1.9,3.7,2.1,6.6.9,9.4l-3.2,7.6,7.1,4.2c17.7,10.4,31.4,22.2,44.6,37.8l5.9,6.9,7.1-5.7c22.8-18.3,49.7-31.7,80.1-39.7-6,22.1-14.9,42.3-26.6,60.7l-4.1,6.3,5.3,5.3c68.3,68.3,109.3,106.9,134.3,185.3-80-30.5-127.4-65.3-191.1-129l-5.2-5.2-6.3,3.8c-17.6,10.8-37,19.2-57.8,24.9,7.8-29.2,20.3-55.7,37.4-77.8l5.5-7.1-6.8-5.8c-16.4-13.8-31.4-27.8-41.4-45.2l-3.3-5.8-6.6,1.3c-8.2,1.7-17.1-3.5-21.5-12-4.4-8.5-4.8-18.6,5.6-28.5,4.7-4.5,9.8-6.5,15-6.6h0ZM267.8,247l-16.6,17.8c41.4,43.6,112.4,108.9,157.8,140.7-32-45.9-97.4-117-141.2-158.5h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/dazingBlow.svg b/static/icons/abilities/dazingBlow.svg
new file mode 100644
index 00000000..81f5b4ff
--- /dev/null
+++ b/static/icons/abilities/dazingBlow.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 477.548 479.169">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M1.657,0v54.064l76.18,58.4,141.902-7.525,8.45,30.682-60.562,5.877,37.727,19.617-41.247,32.694,31.352-.88c-24.938,26.547-49.458,53.393-74.567,78.935-15.745-23.004-28.3-47.16-35.853-71.05l-4.64-14.67L7.259,259.294l80.737,80.73c-25.172,32.576-54.14,58.558-84.51,83l-3.486,2.808v4.474c0,14.94,4.783,27.6,13.722,36.057,8.94,8.457,21.28,12.248,34.582,12.247h4.7l2.802-3.773c23.665-31.872,49.886-60.988,82.572-84.426l83.473,83.47,73.14-73.142-14.67-4.637c-25.647-8.106-50.247-21.622-73.74-38.29,29.318-28.954,59.594-57.008,88.91-85.312l8.352,48.865,86.038,9.654,42.137,148.15h45.53v-58.333l-51.237-117.03-99.217-1.42-13.776-47.277c71.532-70.573,134.693-144.153,159.935-238.356l3.15-11.76h-13.41l-1.188.317c-72.727,19.486-131.702,59.128-184.81,106.556l.353-33.556-32.925,44.076-11.1-42.062-124.79-10.03L65.683,0H1.656h0ZM450.295,28.228c-25.662,78.606-80.402,143.39-143.707,206.694l-12.17-57.89-29.593,21.755-10.73-39.038c57.485-56.983,118.99-106.68,196.2-131.52h0ZM238.915,175.031l15.087,54.904,28.097-20.655,8.674,41.264c-34.216,33.456-70.35,66.784-105.384,101.817l-7.597,7.598,8.577,6.468c23.2,17.497,47.904,32.252,74.082,42.422l-38.603,38.604-81.322-81.322-6.39,4.323c-36.53,24.72-65.005,55.87-90.137,89.17-7.597-.68-13.423-3.04-17.434-6.835-4.11-3.888-6.865-9.7-7.574-18.362,31.536-25.61,62.357-53.572,88.947-89.65l4.768-6.47-79.02-79.016,38.594-38.6c9.494,24.59,23.172,48.765,39.827,71.45l6.44,8.777,7.7-7.698c38.51-38.51,74.93-79.613,112.665-118.19h.003Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/deflect.svg b/static/icons/abilities/deflect.svg
new file mode 100644
index 00000000..cd4d67c3
--- /dev/null
+++ b/static/icons/abilities/deflect.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 472.844 459.2">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M.38,0l-.38,27.84,267.127,154.75-58.703,19.916,57.602,19.36-142.886,142.223-19.214-19.213-51.47,114.324,123.125-43.482-17.492-18.95,151.868-151.87,12.433,43.078,22.976-68.5,56.675-16.565-57.475-15.492-22.934-79.828-14.145,48.266L38.837.447.383,0h-.003ZM351.634,62.483c-4.53.02-9.035.12-13.51.302-3.275.134-6.528.32-9.76.547l31.25,108.786,104.05,28.045c6.204-39.085,8.902-80.275,9.18-120.075-35.454-10.725-76.726-17.288-116.674-17.595-1.512-.012-3.025-.015-4.537-.01h.001ZM314.764,64.583c-31.99,3.653-61.013,12.153-83.014,25.87l64.493,37.31,18.52-63.18h.001ZM462.944,204.58l-102.966,30.093-38.93,116.054-20.268-70.225-39.07,39.067c18.814,35.364,46.1,62.287,86.175,77.604,47.473-17.834,78.566-62.795,98.014-121.6,7.323-22.14,12.905-46.11,17.042-70.993h.003Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/doublePersona.svg b/static/icons/abilities/doublePersona.svg
new file mode 100644
index 00000000..11e2af09
--- /dev/null
+++ b/static/icons/abilities/doublePersona.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 313.32 473.23">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M264.14,68.04C234.76,26.44,195.39,1.26,152.31,0v473.23c43.08-1.26,82.45-26.44,111.83-68.05,30.15-42.69,49.18-102.41,49.18-168.57s-19.02-125.88-49.18-168.57ZM172.94,274.31c14.89-50.39,46.9-67.83,90.46-67.75,10.05.02,20.72.98,31.93,2.67.86,98.74-54.77,57.68-122.39,65.08Z"/>
+  <path d="M31.94,206.564c-10.05.02-20.717.973-31.93,2.67-.857,98.74,54.765,57.68,122.387,65.075-14.887-50.39-46.9-67.83-90.457-67.745Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/dragonBreath.svg b/static/icons/abilities/dragonBreath.svg
new file mode 100644
index 00000000..2a25b0ec
--- /dev/null
+++ b/static/icons/abilities/dragonBreath.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 481.231 480.65">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M0,0v61.32c76.696,54.194,157.847,147.575,64.827,125.566,57.116,55.067,104.12,26.786,174.037,135.492,30.42,47.297,7.473,80.54-29.785,90.524-47.88,12.828-114.353-30.45-57.82-54.314-59.296-1.45-66.954,47.977-38.727,80.237-27.93-9.635-46.01-34.308-43.034-60.605-36.043,48.278-5.362,93.284,54.313,102.43h357.42V136.08c-15.752-70.31-94.876-87.764-103.372-3.504,14.61-36.423,50.96-20.625,84.1,18.688-11.28-7.498-24.24-11.49-36.21-11.097-19.73.65-37.36,12.086-41.466,36.794,55.902-46.113,84.628,34.717,61.74,76.876-24.744,45.582-94.89-20.467-95.03-75.71-27.974,31.235-7.813,108.298,52.37,122.548-114.055-12.382-75.947-130.752-123.035-155.832C309.056,272.476,106.401,49.263,50.81.003H0v-.003Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/dynamite.svg b/static/icons/abilities/dynamite.svg
new file mode 100644
index 00000000..4aea6b86
--- /dev/null
+++ b/static/icons/abilities/dynamite.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 477.279 429.883">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M261.372,2.633c-2.8,2.78-4.1,9.46-.7,20.04,3.4,10.59,11.3,23.59,22.8,35.39,11.5,11.7,24.3,19.9,34.9,23.5,10.5,3.7,17.2,2.4,20-.3,2.8-2.8,4.2-9.5.8-20.1-3.4-10.6-11.3-23.6-22.8-35.32-11.6-11.76-24.4-19.94-34.9-23.57-6.2-1.5-15-4.44-20.1.36h0ZM350.472.793c-4,0-6.9,1.05-8.5,2.62-2.8,2.78-4.1,9.45-.7,20.04,3.4,10.58,11.3,23.61,22.8,35.31,11.5,11.8,24.3,20,34.9,23.6,10.5,3.6,17.2,2.4,20-.4,2.8-2.7,4.2-9.4.8-20-3.4-10.6-11.3-23.6-22.8-35.35-11.6-11.76-24.4-19.94-34.9-23.56-4.6-1.59-8.5-2.25-11.6-2.26h0ZM241.772,21.833l-31.2,30.63c5.8,17.4,13.4,32.7,24.2,44.8,12.8,14.5,29.9,24.9,55.1,29.7l1.5.3,27.4-26.8c-2.1-.5-4.2-1.1-6.3-1.9-14-4.8-28.7-14.4-41.9-27.9-13.2-13.5-22.5-28.4-27.1-42.48-.7-2.18-1.2-4.44-1.7-6.35ZM183.472,78.963l-120.8,118.3c5.7,16.5,13.2,31.1,23.5,42.7,12.8,14.5,29.9,24.9,55.1,29.7l4,.7,118-115.6c-37-11.4-63-38.6-79.8-75.8h0ZM363.472,92.763c-4,0-6.9,1-8.5,2.6-2.8,2.8-4.1,9.5-.7,20,3.4,10.6,11.3,23.6,22.8,35.4s24.3,19.9,34.9,23.6c10.5,3.6,17.2,2.4,20-.4.7-.7,1.3-1.6,1.8-2.8,13.2,11.3,24.3,26.2,25.3,35.8,1.3,11.7-3.5,21.7-12.8,32.4-9.4,10.7-23.2,21.2-37.4,32-14.1,10.7-28.5,21.6-39.3,34.4-10.7,12.9-17.9,28.7-14.7,46.4,2.9,15.6,11.3,31.8,25.1,42.9,13.7,11.2,33.4,16.8,55.1,9.7l8.6-2.8-5.6-17.1-8.6,2.8c-16.3,5.3-28.4,1.5-38.2-6.5-9.8-8-16.6-20.9-18.6-32.2-2.1-11.6,1.9-21.1,10.7-31.6,8.9-10.5,22.4-21,36.4-31.7,14.1-10.7,28.8-21.7,40-34.5,11.2-12.7,19.2-28.3,17.2-46.1-2.2-20.4-18.9-37.8-35.6-51-4-3.2-8.1-6.1-12.1-8.6-4.2-8.6-10.7-18.1-19.3-26.9-11.6-11.8-24.4-19.9-34.9-23.6-4.6-1.5-8.5-2.2-11.6-2.2h0ZM335.372,114.563l-27.3,26.8.2,1.5c4.2,25.3,14.3,42.7,28.5,55.8,11.9,11,27.1,19,44.3,25.1l31.3-30.6c-2.1-.5-4.2-1.1-6.3-1.8-14-4.8-28.7-14.5-41.9-28s-22.5-28.4-27.1-42.4c-.7-2.2-1.2-4.3-1.7-6.4h0ZM279.972,168.863l-118.1,115.6.7,4c4.1,25.3,14.2,42.6,28.5,55.7,11.4,10.6,25.7,18.4,42.2,24.4l120-117.5c-36.8-17.8-63.1-44.6-73.3-82.2h0ZM37.052,222.363c-11.64,9-23.69,22.4-34.25,33.5-2.84,2.8-4.19,9.5-.79,20.1,3.41,10.6,11.32,23.6,22.83,35.3,11.52,11.8,24.36,20,34.87,23.6,10.51,3.6,17.21,2.4,20.04-.4,12.72-12.3,25.72-25.1,36.62-35.8-36.88-11.6-62.65-38.9-79.32-76.3ZM132.172,313.563c-12.2,11.4-20.2,19.3-35.8,35.1-2.8,2.8-4.2,9.4-.8,20,3.4,10.6,11.3,23.6,22.8,35.4,11.6,11.7,24.4,19.9,34.9,23.5,10.5,3.7,17.2,2.5,20.1-.3,11.3-10.6,21.6-21.2,32.4-31.8-36.8-17.8-63.2-44.5-73.6-81.9h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/emberStrike.svg b/static/icons/abilities/emberStrike.svg
new file mode 100644
index 00000000..74996f05
--- /dev/null
+++ b/static/icons/abilities/emberStrike.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#000" d="M407.47 20.85c10.26 16.748 17.462 36.09 19.856 56.65-32.396-44.636-58-40.276-96.36-25.697 65.992 9.776 101.33 67.377 96.36 140.75 48.848-61.72 34.92-160.814-19.857-171.703zm-276.167 2.896c-.987-.002-1.985.006-2.994.024h-.003c-34.522.598-107.756 26.213-104.54 101.037 21.08-55.636 65.886-58.685 104.54-32.123 46.407 31.894 22.075 98.348-16.936 100.45 11.637-17.33 17.04-40.65 2.974-55.29-24.895-25.91-54.777 4.487-55.533 29.594-1.403 46.62 45.44 68.116 75.336 60.738 30.192-7.45 50.092 12.416 36.795 51.976-15.056 44.795-121.114 75.948-133.155-8.173 1.7 88.73 43.248 129.87 104.54 98.114 41.467-21.487 78.87 18.96 74.17 54.896-32.792-37.747-82.098 17.986-38.544 40.883 78.98 41.522 199.4 40.194 265.73-23.945 64.735-62.6 60.833-175.215 12.263-259.89-5.614 26.608-28.43 52.367-74.17 67.163 59.262-77.482 2.572-206.85-129.652-174.036 84.2 4.683 73.567 108.248 5.257 105.123-62.264-2.848-.79-156.296-126.074-156.54zM277.508 230.22c-56.683 51.454 15.914 153.65 88.95 141.837-33.543-9.43-64.745-51.995-54.833-100.05 31.558 66.125 129.923 66.127 137.49-16.85 29.98 68.665 13.327 147.842-36.478 182.18-58.45 40.295-156.124 24.466-181.955-58.83 19.527 19.775 58.78 32.23 82.654 28.722-92.908-26.93-106.546-145.142-35.828-177.01zM24.68 355.77c-16.486 116.72 99.137 117.28 130.425 29.306-48.323 24.538-100.24 29.99-130.425-29.305z"/></svg>
\ No newline at end of file
diff --git a/static/icons/abilities/execute.svg b/static/icons/abilities/execute.svg
new file mode 100644
index 00000000..0485041f
--- /dev/null
+++ b/static/icons/abilities/execute.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 465.223 475.532">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M290.813.002c-16.917.16-35.992,8.394-51.344,23.813-25.855,25.966-31.416,62.47-12.438,81.53,18.978,19.06,55.332,13.468,81.188-12.5,25.856-25.967,31.416-62.469,12.436-81.529C312.945,3.571,302.387-.106,290.813.002ZM0,14.94c41.975,60.496,108.395,103.37,178.063,130.53.768.296,1.542.584,2.312.876,74.676,28.292,158.988,40.7,228.22,31.875.072-.013.144-.018.217-.03,73.4-13.258,89.237-60.577-38.562-134.25C533.642,191.914,128.063,169.085,0,14.941h0ZM194.155,171.284c-3.861,2.091-7.503,4.562-10.874,7.375-12.204,10.163-20.78,24.71-26.75,42.187-10.988,32.16-12.56,73.362-13.375,109.563h40.064l.625,8.656,10.218,136.467h86.687l9.03-136.406.595-8.717h38.53c1.694-40.387-.062-81.073-12.25-111.594-3.295-8.256-7.23-15.796-12-22.5-36.92-4.4-74.495-12.92-110.5-25.032h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/exposeArmor.svg b/static/icons/abilities/exposeArmor.svg
new file mode 100644
index 00000000..da55f419
--- /dev/null
+++ b/static/icons/abilities/exposeArmor.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 444.845 479.125">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M140.5,0l16.156,53.81L62.282,4.905l63.063,77.625L12.062,101.686l113.28,19.625-59.718,75.19,65.03-33.407-1.78,58.843,19.844-37.344v-64.218l.75-1.75,31.906-74.75L140.499,0h.001ZM286.75,0l-36.905,39.623,33.342,79.03.75,1.75v69.723l15.5,29.187-1.625-54.436,65.532,34.062-63.064-77.625,113.28-19.624-113.28-19.156L363.343,4.909l-92.44,47.906L286.748.005l.002-.005ZM216.155,7.84l-49.186,114.5v153.5l34.936,34.94c2.916-65.435,7.976-128.936,15.25-187.72,7.606,61.433,12.744,128.775,15.532,198l32.625-32.624V122.342L216.156,7.842v-.002ZM0,191.125l37.344,94.062,193.905,193.938h30.813c-66.34-68.503-128.483-139.002-180.625-205.875,74.705,58.246,155.104,130.333,231.312,205.874h31.063L93.688,228.968,0,191.124h0ZM444.845,191.125l-93.626,37.812-115.594,115.593,18.156,18.125c36.278-32.102,72.315-62.265,107.125-89.406-27.302,35.015-57.36,71.02-89.31,107.217l20.339,20.314,115.532-115.53,37.375-94.126h.003ZM152.935,427.218l-51.906,51.906h28.594c12.594-12.481,25.292-24.857,38.094-37.125l-14.78-14.783-.002.002ZM192.31,466.624c-3.995,4.173-8.003,8.34-12.03,12.5h24.53l-12.5-12.5Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/frostStrike.svg b/static/icons/abilities/frostStrike.svg
new file mode 100644
index 00000000..c288a81f
--- /dev/null
+++ b/static/icons/abilities/frostStrike.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476.75 478.532">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M1.376.001v44.03l74.157,33.28-4.657,29.22,44.968,46.72-26.28,64.81,168.78,55.5v.564l-41.467,12.28,32.687,74.75-40.28-37.374-32.72-4.094-54.875-37.97,39.125,61.908,43.78-.563,52.564,47.876,33.312-7,186.28,94.594-42.623-87-29.188-127.906-38.563-37.375-9.343-48.47-34.44-32.72,12.25,74.19,56.064,63.06-11.094,39.126-14.156-41.156-35.5-15.25-26.063,18.625,54.095,32.53-84.094-21.592,18.126-38.563-62.812-47.656-23.406-144.47-48.125-15.186,9.937,65.406,28.03,3.937-44.968,35.5-21.03-110.124-48.47-11.094L73.909,0H1.376ZM97.032.001l5.624,13.155,68.97,18.97L138.876,0h-41.845.001ZM172.532.001l32.53,37.093-.813-37.094h-31.717ZM240.187,2.625l-15,38.5,6.72,33.562,23.25-33.562s-14.97-38.5-14.97-38.5ZM347.875,4.655l-36.532,7.846,14.314,36.81,22.22-44.655h-.002ZM344,61.187l-7.47,36.188,30.909-6.094-23.438-30.094h-.001ZM1.375,67.437v41.406l62.938-14.124L1.375,67.439v-.002ZM252.718,77.187l.125,33.813,56.94,54.593-23.22-83.22-33.844-5.187h-.001ZM50.688,115.625l-37.97,12.625,74.625,26.686-36.655-39.312h0ZM248.188,134.969l9.53,68.062,56.406,40.656-5.156-53.437-60.78-55.282h0ZM3.188,142.719l65.875,71.842,12.344-40.686L3.187,142.719h.001ZM11.688,196.937L0,236.657l41.374-14.126-29.687-25.594h0ZM50.063,233.061l-17.094,28.25,32.063,13.94,69.686-25.19-84.656-17h0ZM182.657,265.906l-52.438,1.25,51.125,36.344,24.032-2.47-22.718-35.125h0ZM27.001,279.501l-19.626,28.374,37.22,1.812-17.594-30.187h0ZM79.469,305.031l20.313,30.875,17.56-26.156-37.874-4.72h.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/goodBoys.svg b/static/icons/abilities/goodBoys.svg
new file mode 100644
index 00000000..62771ced
--- /dev/null
+++ b/static/icons/abilities/goodBoys.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 408.373 471.609">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M88.934,0l19.276,96.028c-12.818,11.406-22.692,26.194-29.42,43.24L0,130.63l64.453,63.37c-2.586,23.357.03,49.043,8.258,74.657l-42.033,54.215,68.018-1.02c15.12,22.18,33.708,39.877,53.62,51.962l10.68,90.296,40.932-68.666c17.495,4.93,35.126,5.94,51.883,2.508l63.63,73.657-19.257-95.92c12.855-11.425,22.75-26.248,29.487-43.34l78.702,8.628-68.175-67.03c.046-20.525-3.275-42.147-10.17-63.734l47.664-61.48-77.165,1.158c-12.764-18.617-27.715-34.38-43.844-46.768l-11.306-95.627-40.964,68.72c-17.463-4.908-35.06-5.91-51.786-2.485L88.934,0ZM190.732,93.45c44.422-.03,92.8,34.067,119.69,89.082,33.42,68.38,21.35,143.925-26.5,171.895,26.868-38.838,28.765-101.318.618-158.906-28.146-57.587-78.34-93.93-125.113-95.814,9.96-4.224,20.515-6.248,31.305-6.256h0ZM159.749,120.43c41.018-.062,85.61,31.394,110.477,82.274,31.83,65.127,19.096,137.01-28.506,160.9-.988.494-1.986.956-2.988,1.403-43.015-2.403-88.815-35.974-114.7-88.938-25.887-52.963-24.482-110.224-.3-146.35.96-.542,1.933-1.062,2.916-1.56,10.413-5.224,21.617-7.712,33.1-7.73h.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/gore.svg b/static/icons/abilities/gore.svg
new file mode 100644
index 00000000..3be4f398
--- /dev/null
+++ b/static/icons/abilities/gore.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 480.155 476.096">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M161.75,0l66.718,179.03L3.78,3.125l178.344,216.406L0,141.345l175.186,146.56-148.906-11.185,183.594,85.72-88.875,38.936,154.155,18.094-21.063,56.22,96.22-34.814,32.968,35.22,28.22-56.22,56.06-17.438-28.279-39.313,40.875-85-55.344,10.563-7.686-146.063-44.406,77.5-74.313-181.188,1.125,140.313L161.751,0h0ZM257.624,237.03c16.315-.184,40.993,12.932,63,34.94,29.342,29.34,42.85,63.397,30.156,76.092-12.695,12.696-46.783-.782-76.125-30.125-29.342-29.342-42.85-63.43-30.156-76.125,3.173-3.173,7.685-4.72,13.124-4.78v-.002ZM354.344,274.375c37.93,3.08,67.592,34.657,67.592,73.406,0,40.8-32.887,73.656-73.687,73.656-40.057,0-72.43-31.67-73.595-71.437,8.263,23.457,30.67,40.375,56.875,40.375,33.176,0,60.25-27.106,60.25-60.28,0-25.107-15.517-46.69-37.438-55.72h.003Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/guardian.svg b/static/icons/abilities/guardian.svg
new file mode 100644
index 00000000..c75485e6
--- /dev/null
+++ b/static/icons/abilities/guardian.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 421.396 474.247">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M18.5.005c-4.548-.098-8.965,1.524-12.37,4.541C-1.378,11.178-2.088,22.64,4.544,30.148c4.394,4.974,10.906,6.945,16.986,5.792l57.838,65.475-50.373,44.498,24.188,27.38c9.69-21.368,22.255-39.484,37.427-54.65l6.91,36.188c25.092-6.29,49.834-10.563,74.366-12.873l-23.912-27.07-38.66-12.483c17.117-12.9,36.734-22.97,58.62-30.474l-24.19-27.385-50.37,44.496L35.454,23.472c1.79-5.835.617-12.43-3.72-17.34C28.378,2.323,23.575.099,18.499.004h0ZM402.897.005c-5.075.096-9.876,2.319-13.232,6.127-4.338,4.91-5.514,11.506-3.723,17.343l-57.92,65.568-50.37-44.497-24.188,27.385c21.884,7.504,41.5,17.573,58.62,30.472l-38.66,12.485-23.255,26.324c24.71,1.863,49.367,5.706,74.118,11.46l6.498-34.03c15.173,15.166,27.74,33.282,37.43,54.65l24.185-27.38-50.372-44.498,57.838-65.475c6.08,1.153,12.593-.818,16.987-5.792,6.63-7.508,5.92-18.97-1.586-25.602-3.405-3.017-7.822-4.639-12.37-4.541h0ZM216.472,158.515c-39.56-.098-79.467,5.226-120.633,16.095-2.046,90.448,34.484,209.35,118.47,259.905,81.295-49.13,122.402-169.902,120.552-259.914-39.75-10.496-78.91-15.988-118.39-16.086h0ZM99.296,312.015L12.43,410.353.23,474.247l61.9-19.994,68.49-77.535c-12.86-20.108-23.246-42.03-31.324-64.703h0ZM327.499,318.125c-8.69,22.238-19.577,43.634-32.706,63.142l64.473,72.986,61.898,19.994-12.2-63.894-81.466-92.23v.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/hatch.svg b/static/icons/abilities/hatch.svg
new file mode 100644
index 00000000..452b0d75
--- /dev/null
+++ b/static/icons/abilities/hatch.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476.006 476.007">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M238.525,0c-61.262-.17-122.585,23.086-169.264,69.766C-10.614,149.642-21.094,271.85,36.224,363.797c-21.126-58.596-5.07-136.433,43.875-204.518-26.864,54.274-23.788,119.52,8.705,171.64-16.072-44.577-3.09-104.19,35.502-155.568-22.22,40.8-20.71,91,4.105,130.804-13.956-38.71,1.842-92.823,43.24-134.222,43.876-43.875,102.245-59.39,141.206-40.764-39.916-27.966-92.123-30.865-134.612-8.724,54.177-39.073,116.827-50.336,161.063-29.194-52.326-36.654-120.2-41.6-176.747-14.863,71.832-49.555,153.662-63.29,211.87-35.47C333.777,14.438,286.168.135,238.524,0h.001ZM374.433,42.919l.008.006v-.002s-.006-.003-.008-.004ZM339.308,93.251s.004.004.007.006v-.002s-.006-.003-.008-.004h.001ZM433.08,101.566c27.828,58.21,14.094,140.048-35.47,211.887,26.74-56.548,21.8-124.425-14.858-176.754,21.144,44.238,9.878,106.895-29.2,161.075,22.145-42.488,19.248-94.7-8.714-134.618,18.62,38.96,3.107,97.327-40.768,141.2-41.4,41.4-95.513,57.196-134.224,43.238,39.81,24.817,90.023,26.326,130.826,4.096-51.383,38.602-111.004,51.59-155.588,35.513,52.118,32.49,117.364,35.57,171.637,8.71-68.085,48.943-145.92,64.997-204.512,43.87,91.947,57.318,214.157,46.838,294.03-33.037,82.987-82.986,91.948-212.252,26.842-305.18h-.001ZM344.839,163.155l-.004-.007h-.002l.006.007ZM382.753,136.698l-.004-.007h-.002l.006.007Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/haymaker.svg b/static/icons/abilities/haymaker.svg
new file mode 100644
index 00000000..ab27bca7
--- /dev/null
+++ b/static/icons/abilities/haymaker.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 461 461">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M126.8,71.1l-11.2,2.3L94,3.9l6.6,72.7-10.8,2.3L67,10l8.4,93.1,27.2-5.7,1,4.9c-2.6,5.6-5.3,14-5.1,24.5,2.8,2.8,7.1,6.8,12.1,11.3l63.1,322.5,17.1-16.4-3.6,16.4h37.5s47.9-169.2,47.9-169.2l38.3,169.3h38.4s-34.2-215.7-34.2-215.7l1.6-16.8,77.3-55.9-68.7-75.7-35.2,6.1c5.6-8.5,9.3-22.3,10-36.4,7.8.1,32.9,2.7,40.7,3-1.6-14.5-20.9-23-39.7-27.1,2.8-29.8-4.9-35.3-30.2-36.4-25.3-1.2-32.4,7.2-34.2,27.9-18.5-.6-43.7,6-48.7,16.3,11.2,4.4,36.1,7.8,46.1,10.1,1.7,16.8,8.2,35.3,16.4,49.6l-23.4,4.1-51.5,43.1-52.2-47.8-3.1-15.4,28.3-5.9L120.6.3s6.2,70.8,6.2,70.8ZM94,3.9h0,0s0,0,0,0ZM348.3,170l-31.5,23.7.3-64.1,31.2,40.3ZM229.2,150.9l4.5,95.4-42.8,197.5-57.4-285.6c21.9,19.1,44.9,38.5,44.9,38.5l50.9-45.9h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/intimidatingRoar.svg b/static/icons/abilities/intimidatingRoar.svg
new file mode 100644
index 00000000..d4284b81
--- /dev/null
+++ b/static/icons/abilities/intimidatingRoar.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476 476">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M165.6,3.3c53.7,45.4,5.5,70.3-7.8,76.3-40.5,18.4-87.7-24.6-99.5-67.3-14.3,43.2-47.1,132.1,11.2,168.1-35.8,39.9-35.7,37-65.2-7.9-8.4,41.3-2.8,112.6,15.7,164.1,2-22.1,5-43.5,11.2-60.7l1.1-3,2.8-1.7c45.9-27.2,86.1-36,117.3-40.1-3-12.3-4.7-25.5-4.7-39.2s.1-6,.2-8.9l-82.1-40.7,35.5-14.9-45.3-45.2,89.7,51-29.2,12.2,32,30.6c2.5-26.4,11.2-50.1,24.3-68.5,15.7-22.1,38.4-36.6,63.9-36.6s48.2,14.5,63.9,36.6c13.2,18.5,21.9,42.4,24.4,68.9l40.1-41.3-38.1-10.9,84.1-70.1-42.9,60.5,45.2,14.3-88.2,49.7c.4,6.3.6,11.8.4,17.5,6.2-.9,12.5-1.5,18.7-1.6,5.8,0,11.5.4,16.7,1.3,14.8,4.2,40.8,45.8,45.1,57.7-2.9,14.3-13,25.4-22.4,34.8l44.9,95.9c5.9,12.6,2.8,28.4.5,40.3-2.4,12-9.3,23.5-21.7,27.5-23.7,5-40.5-7.7-54.3-23,.2,15.2,0,30.1-.4,44.9h94.4c27.4-32.1,28.2-70.2,24.9-111.1-24.7,25.5-45.1-14.3-57.4-41.6,29.3,26.7,70.1-42.9,59.3-106.7-5.4,15.8-42.6,27-59-27.7,50.4-13,54.4-78.4,60.5-110-21.2,26.9-33.3,42.1-65.6,24.3,38.8-28.3,7.1-73.3-26.7-91,23,33.7-57.3,89.8-81.1,66.5C287.2,25.4,217.9-4.1,165.6,3.3ZM236.6,88.9c-18.7,0-36,10.5-49.2,29-5.5,7.6-10.1,16.6-13.7,26.5,22.5,12.7,45.4,25.1,57.2,47.7-1.4,5.3-2.4,10.8-3.9,16l-44.4-10.6c7.1-12.6,27.8-11.6,39.7,3.2-7.6-11.3-19.1-20-38.9-21l-10.4-33.4c-4.7,13.7-7.4,29.2-7.4,45.6,0,29.2,8.5,55.5,21.8,74,13.2,18.5,30.5,29,49.2,29s36-10.5,49.2-29c1.4-1.9,2.6-3.9,3.9-5.9-2.2-17.1-3.9-39.4,3.1-52.2,3-4.7,9.9-6.1,14.5-7.6.8-18.8-2.2-39.9-7.9-55.9l-10,35c-17.1,1.3-27.8,8.2-35.2,17.4,8.1-4.5,25.6-6.4,36.4-8.8,1.1,5.7,2.8,11.4-2.8,17.9-13.3-4.4-29.6-1.4-40.9,2.8-1.2-5.4-3.3-11.1-4.7-15.7,11.4-23.2,34.5-36.2,56.9-49.6-3.5-9.5-8-18-13.3-25.4-13.2-18.5-30.5-29-49.2-29ZM307.5,219.5c-2.2,6.6-3,19.7-.8,33.1,2.1,13.7,6.6,27.3,10.2,34.2,6.9,2.5,13.8,5.1,20.7,7.7l25,118c9.6,10.8,24.3,26.9,39.2,22.4,14.2-7.3,10.9-33,9.2-45.6l-48.6-103.9c7.7-11.8,20.9-21.1,24.6-31.2-5.2-13.2-17.7-31.3-31-40.9-15.3-.5-35.8,1.9-48.5,6.2h0ZM197.3,223.7c7.8,0,22.1,15,39.8,13.9,15.9-.9,29.4-21.3,39.5-9.2,11,13.3-4,33.9-11.4,40,0,0-14.3-14.7-27.8-13.6-13.3,1-25.1,16.4-25.1,16.4-15.8-9.5-28.3-28.6-19.4-44.7,1.1-2,2.6-2.8,4.4-2.8h0ZM157.9,248.6c-29.9,3.7-67.1,11.2-110.7,36.5-10.1,39-10.7,79.1-14.4,114.8l-23.9,41.2c2.8,14.4,7.5,33.4,23.5,32.1,18-2.5,35.8-13.4,42.1-29-2.4-10.8-6.1-19.3-10.2-28,4.3-33.2,4.2-66,13.3-91.5l2.9-7.8c29.2,6.6,47.8,2.6,70.2-13.4l-1.2,19c-3.4,51.4-12,105.7-10.1,151.4h195.1c1.5-49.8.3-100.3-10.5-154.2-.7-3.7-1.3-7.6-2-11.8l-17.6-6.6c-3.8-6-6.9-12.9-8.9-18.5-15.4,18.3-36,30.1-58.9,30.1s-48.2-14.5-63.9-36.6c-5.9-8.2-10.9-17.6-14.8-27.7h0ZM130.2,336.8c-13,4-26.8,3.6-38.1,1.6-7.3,24.1-7.4,48.4-9.5,74.6,5,12.5,9,21.8,10.4,33.2-4.1,10.6-10,21-16.5,27.7h44.7c-1.8-43.5,5.1-91.6,9-137.1h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/lightningStorm.svg b/static/icons/abilities/lightningStorm.svg
new file mode 100644
index 00000000..fec0bfea
--- /dev/null
+++ b/static/icons/abilities/lightningStorm.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476.969 474">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M271.623,0l19,40.594L45.407,8.25l295.716,129.375-18.967-40.594,149.218,15.282L271.623,0ZM19.623,23.375l277.784,370.095-5.408-65.97,184.97,146.5-203.876-307.844,5.406,65.97L19.623,23.375ZM0,55.72l36.5,316.405,25.623-40.875,68.095,139.344-9.594-241.125-25.624,40.843L0,55.718v.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/mend.svg b/static/icons/abilities/mend.svg
new file mode 100644
index 00000000..e74526c6
--- /dev/null
+++ b/static/icons/abilities/mend.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 426.75 472.719">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M195.35.319c-8.6,1.31-16.5,5.4-20.7,9.7l26.1,158.7-17.6,5.6L110.15,26.319c-5.9-.8-14.3.61-22.2,4.81-8.1,4.3-14.4,11-17.2,17.39l69.1,142.9-15.2,10.5L30.1,101.719c-5.8,1.2-13.1,5.5-19.1,12.1-6.2,7-10.2,15.8-11,22.8l96.05,103.6c69.9-31.4,140.4-54.2,210.9-76.1l10.4-47.2c-8.5.6-16.6-.6-24.1-3.2-7.2-2.5-13.9-6.2-20.2-10.8l-11.7,53-18.3-.5L218.85,4.029C210.65.009,203.65-.471,195.35.319h0ZM289.75,11.449l-16.1,68.34c8.4,8.03,16.9,13.93,25.5,16.93s17.5,3.3,27.8,0l16.9-69.73v-.11c-3.7-14.58-42.4-21.77-54.1-15.43h0ZM395.55,176.419c-5.7.1-12.1,1.4-19.1,3.9-19,6.6-41.6,21.3-64.6,35.5l-.5-.4c-59.7,34.3-118.1,69.2-169.8,110.4v2.1c21.6,2.9,51.6,11.2,80.3,20.6,23,7.6,44.6,15.6,59.9,22.6-2.3-22-2.6-42.5-1.6-60.9-8.7,4.2-17,7.6-25.3,9.9-18.1,5.1-36.5,4.7-52.7-5.1l9.7-16c11.2,6.8,23.1,7.3,38,3.1,14.9-4.2,32.3-13.5,51.4-25.6,35.9-22.7,77.7-54.9,125.5-78.2-5.9-11.3-12.3-17.2-19.1-19.9-3.6-1.4-7.7-2.1-12.1-2h0ZM302.45,184.319c-43.3,13.6-86.5,27.6-129.3,43.7,16.3,4.3,32.8,11,45.4,21.7,26.2-16.5,53.1-32.3,80.1-47.8,1.5-6,2.5-11.6,3.8-17.6h0ZM141.75,240.319c-11,4.5-21.9,9.1-32.8,13.9l15.7,16.9.2.1c8.1,8.4,12.8,19.6,15.1,33,20.1-15.5,41-30.1,62.5-44.1-16.1-10.7-41.3-17.2-60.7-19.8ZM88.55,291.419c-4.7-.1-12.6,2-21,5.7-9.1,4.1-18.98,10-28.03,16-4.74,3.1-9.18,6.3-13.25,9.2,12.94.6,26.58,1.7,40.38,4.9,19.1,4.5,37.9,13.4,51,29.9,8.5-17.2,8.2-29.5,1.2-41-9.5-12.9-22.7-24.2-29.4-24.7h-.9ZM140.65,346.019c-1.1,13.4-3.4,27.9-5.6,39.5,61.2,9.5,110.1,34.1,160.2,55.3-4.7-16.7-8.2-32.8-10.6-48.3-11.6-6.2-39.4-17.3-68.4-26.9-27.4-9-56.6-16.8-75.6-19.6ZM119.45,375.719c-18,9.3-39.4,17.1-69.54,17.8-6.97,17.7-14.01,37.1-31.64,55.6,22.6.7,37.95-3.1,51.38-11,16.5-9.7,27.2-27,46.9-51.4l2.9-11ZM131.35,403.119c-3.5,15.6-7.9,32.1-12.8,49.3,20.7-13.2,44.9-27.1,71.9-34.8-18.7-6.2-38.2-11.3-59.1-14.5h0ZM223.45,429.819c-38.4,2.9-73.6,23.8-103.1,42.9h185.3c-1.2-3.2-2.3-6.4-3.4-9.6-26.9-10.8-52.5-22.7-78.8-33.3h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/poisonousSting.svg b/static/icons/abilities/poisonousSting.svg
new file mode 100644
index 00000000..8b5531af
--- /dev/null
+++ b/static/icons/abilities/poisonousSting.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 471.579 433.759">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M145.157.009c-1.535.012-3.06.03-4.595.063-14.17.307-28.304,1.539-42.313,3.687h-.03C57.749,9.967,30.043,29.072,14.812,53.759-.418,78.446-3.213,108.023,3.282,135.039c6.492,27.02,22.268,51.823,45.405,67.126,23.137,15.304,53.82,20.5,87.156,8.564,88.876-31.822,154.224-18.526,202,22.125,47.297,40.24,77.402,109.05,90.25,190.53,9.29,10.237-.1.206,9.657,10.375,9.74-8.25-.16-.032,9.593-8.406,49.368-122.298,18.986-236.885-52.062-315.69C333.647,41.304,241.777-.739,145.157.01h0ZM274.875,69.539l90.687,36.345c4.922,4.69,9.668,9.56,14.25,14.563-4.09-2.25-8.194-3.45-11.938-3.563-10.212-.307-17.585,7.21-13.593,21.875,8.252,30.456,55.747,34.927,45.187,5.5,9.34,12.627,17.642,26.007,24.75,40.03-6.273-8.833-12.323-12.982-17.342-13.093-13.9-.306-19.88,30.236-.875,77.188,20.765,51.37,43.424,59.815,45.906,31.438,3.183,34.31-.184,70.722-11.408,108.437-15.63-70.58-45.05-130.96-90.53-169.656-14.414-12.265-30.428-22.22-48-29.532l-40.907-22.313,77.53,2.938-111.25-56,102.22,5.03-54.687-49.187Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/pommelStrike.svg b/static/icons/abilities/pommelStrike.svg
new file mode 100644
index 00000000..6dfada70
--- /dev/null
+++ b/static/icons/abilities/pommelStrike.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 474.9 475.7">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M137,0L62.47,20.98l15.9,55.79,187.13-52.82-6.7-23.95h-121.8ZM242.5,48l-131,37,61.1,216.4,130.9-37-61-216.4ZM295.8,100.9l-19.4,5.5,24,85,19.5-5.5-24.1-85ZM113.1,152.5l-19.5,5.5,24,85,19.5-5.4-24-85.1ZM82.2,180.1L0,203.3v54.3l96.5-27.4-14.3-50.1ZM369.6,199.8l-55.7,34.7,6.5,24.6,28.4-8,24.4,89.6-220.2,62.6c-8.4-30-16.9-60-25.3-90l27.3-7.7-6.3-22.7-70.53-3.8,40.83,39.6-108.74,48.9s117.34,4.1,114.34,4.6c-3.1.5-31.3,84.4-31.3,84.4l88-45.2,22.9,64.3,70.6-76.4,94.4,49.7-24.7-70.9,113.5-5.6-77.7-53.7,94.6-66.3-113.4,3.5,8.1-56.2ZM336,272.7l-187.3,52.9,15.7,55.9,187.2-52.9-15.6-55.9Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/pounce.svg b/static/icons/abilities/pounce.svg
new file mode 100644
index 00000000..2ccf210e
--- /dev/null
+++ b/static/icons/abilities/pounce.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476.174 448.532">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M272.75.002c29.89,36.34,55.086,74.792,74.156,115.062-49.052-38.586-105.036-68.945-168.78-89.344,40.696,29.09,78.052,61.91,110.624,97.188-37.52-20.55-74.29-31.632-107.438-34.938,33.73,14.255,77.803,44.654,111.063,83.03.615.987,1.208,1.987,1.78,3,.03.024.066.042.095.064l-.03.03c-.02-.03-.046-.06-.064-.093-19.063-14.253-54.482-30.81-95.312-40.78-50.3-3.666-101.766.18-154.438,11.624,60.61,5.896,118.714,18.332,172.844,37.97-79.658,6.653-155.155,45.72-217.25,121.47,37.545-21.421,83.49-39.941,125.375-48.721,40.242-11.185,72.465-12.254,95.563-6.5.04-.004.085.004.125,0l-.032.03c-.03-.007-.06-.022-.093-.03-28.123,2.88-74.114,16.98-115.53,40.688-44.49,40.303-83.695,98.33-97.22,158.78h129.657c22.906-37.08,51.314-68.357,82.78-93.5-6.392,18.97-9.292,37.678-9.218,55.438,12.05-31.583,44.076-73.017,86.72-96.344,11.652,22.34,32.257,39.923,58.437,46.938,49.563,13.28,100.75-16.278,114.03-65.844,4.41-16.39,4.227-33.677-.53-49.97,18.47-69.046-6.238-141.86-56.563-200.842,9.922,38.16,12.75,77.235,5.844,114.47C386.524,94.154,337.377,41.557,272.75,0v.002ZM211.406,410.47l-.03.094.03.03v-.124ZM181.312,87.97c-.03-.012-.064-.02-.093-.03l-.032.03c.04.004.084-.004.125,0ZM366.062,198.095c25.482,28.396,40.14,73.42,39.438,101.44,15.463-40.44,16.46-62.094,4.97-96.595,13.306,5.783,24.22,15.16,31.936,26.625,3.704,26.134-8.748,63.216-22.375,79.313,14.565-9.242,26.246-21.02,35-35.375-.187,5.702-1.026,11.364-2.5,16.875-10.666,39.81-51.348,63.29-91.155,52.625-35.814-9.597-58.406-43.468-54.813-79.157,35.783,4.916,67.725,25.49,83.375,44.876-9.22-30.88-31.59-60.696-69.968-80.72,10.98-15.49,27.472-26.19,46.092-29.905v-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/powerShot.svg b/static/icons/abilities/powerShot.svg
new file mode 100644
index 00000000..c6847826
--- /dev/null
+++ b/static/icons/abilities/powerShot.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 477 477">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M68.4.2l-3.1,49.7-30.6-28.6-11.7,11.7,30,32.2L.2,68.4c41.8,51.5,65.3,68.4,119.2,67.8l22.3,23.9c3.2-3.3,6.3-6.5,9.6-9.7h0c3.5-3.5,7.1-7,10.6-10.4l-23.4-21.8C144.6,63.2,116.1,38.8,68.4.2h0ZM432.7,2.3c-1,0-2,0-3,0-2.3,0-4.7.2-7.2.4-19.9,1.8-44.9,9.5-72.7,22.8-55.5,26.5-122.2,74.9-185.7,138.4-63.5,63.5-111.9,130.2-138.6,185.9-13.3,27.8-21.1,52.9-22.9,72.8-1.8,19.9,2.2,34,11,42.8,8.8,8.8,22.9,12.8,42.8,11,19.9-1.8,45-9.6,72.8-22.9,47.2-22.6,102.5-61,156.9-110.9l-14.2-15.2c-2.1,1.9-4.2,3.9-6.2,5.8-8.9,6.3-17.5,11.4-25.2,15.1-8.8,4.2-16.6,6.6-22.2,7.1-5.6.5-8.1-.6-9.3-1.9s-2.4-3.8-1.9-9.3c.5-5.5,2.8-13.4,7.1-22.2,6.8-14.2,18.4-31.2,33.5-48.1h.1c2.2-2.4,4.4-4.9,6.6-7.3.3-.4.7-.7,1-1.1,1.2-1.3,2.5-2.6,3.8-3.8,20.8-20.8,42.6-36.6,60.3-45,8.8-4.2,16.6-6.5,22.1-7,.7,0,1.3-.1,1.9-.1.6,0,1.2,0,1.7,0,3.1.2,4.8,1,5.7,2,1.3,1.3,2.4,3.8,1.9,9.3-.5,5.5-2.8,13.3-7,22.1-3.9,8.1-9.3,17-16,26.3-.3.3-.6.6-.9,1l15.1,14.2c49.2-54,87-108.5,109.3-155.2,13.3-27.8,21-52.8,22.8-72.7,1.8-19.9-2.2-34-11-42.8-7.2-7.2-18-11.2-32.6-11.4h0ZM420.4,68.3c7.3-.2,13,1.6,16.9,5.5,18.1,18.1-10,77.3-65.6,147.1.4-8.3-1.5-16.6-7.4-22.5-4.7-4.7-11-6.9-17.6-7.4-2.2-.1-4.4-.1-6.6,0-8.9.8-18.4,3.9-28.5,8.8-20.3,9.7-43.4,26.6-65.4,48.6h0c-22,22-38.9,45.1-48.7,65.5-4.9,10.2-8,19.7-8.8,28.6-.8,8.9.9,17.9,7.3,24.2,5.7,5.7,13.7,7.7,21.8,7.4-68.3,53.8-125.8,80.6-143.6,62.8-24.7-24.7,36.6-126.2,136.8-226.4,84.6-84.6,170-141.4,209.5-142.3h0ZM236.9,210c-8.5,8.2-16.9,16.7-25,25.3l10.5,11.2c8.4-8.9,17.3-17.3,26.5-25.3l-11.9-11.2h0ZM289.5,259.1c-10.3,8.7-19.8,18-28.7,28.6l25,26.8h0c0,0,14.3,15.3,14.3,15.3h0c0,0,38,40.7,38,40.7l-73.9,23.7,211.1,81.6-81.6-211.1-22.6,70.6-39.7-37h0c0,0-15.2-14.3-15.2-14.3,0,0,0,0-.1.1l-26.7-24.9h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/recharge.svg b/static/icons/abilities/recharge.svg
new file mode 100644
index 00000000..44ceb67a
--- /dev/null
+++ b/static/icons/abilities/recharge.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 471.5 466">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M238.5,0c-3.7,0-7.4.1-11.1.27l.8,17.98c3.4-.16,6.8-.25,10.3-.25,118.8,0,215,96.2,215,215s-96.2,215-215,215c-89.6,0-166.35-54.7-198.65-132.6l27.63-8.3-48.43-34.3L0,327.3l22.55-6.7c34.63,85.2,118.35,145.4,215.95,145.4,128.6,0,233-104.4,233-233S367.1,0,238.5,0Z"/>
+  <path d="M207.7,2.04c-13.3,1.75-26.1,4.6-38.6,8.48l5.6,17.09c11.4-3.54,23.3-6.15,35.4-7.75l-2.4-17.82h0Z"/>
+  <path d="M150.7,17.16c-12.4,5.05-24.2,11.12-35.4,18.12l9.5,15.21c10.3-6.44,21.2-12.03,32.6-16.67l-6.7-16.66Z"/>
+  <path d="M98.9,46.5c-10.498,7.869-20.316,16.606-29.35,26.12l13.05,12.28c8.3-8.77,17.4-16.81,27-24.06l-4.8-6.57s-5.9-7.77-5.9-7.77Z"/>
+  <polygon points="168.4 55.08 164 72.52 381 128 385.4 110.6 168.4 55.08"/>
+  <path d="M56.57,87.5c-8.19,10.2-15.54,21.2-21.94,32.7l15.65,8.8c5.91-10.7,12.69-20.8,20.26-30.3l-13.97-11.2Z"/>
+  <path d="M184.2,96.3c-3.9,26,2.8,55.2,14.2,79.2,6.4,13.4,14.2,25.2,21.9,33.8,4.2,4.7,8.4,8.3,12.2,10.9l-5.4,21.2c-4.6.4-10,1.6-16,3.7-10.9,3.8-23.4,10.4-35.4,19.1-21.6,15.6-41.4,37.9-50.4,62.6l167.5,42.9c3.9-26-2.8-55.2-14.2-79.2-6.4-13.4-14.2-25.2-21.9-33.8-4.2-4.7-8.4-8.3-12.2-10.9l5.4-21.2c4.5-.5,10-1.6,16-3.7,10.9-3.8,23.4-10.4,35.4-19.1,21.6-15.6,41.4-37.9,50.4-62.6l-167.5-42.9h0Z"/>
+  <path d="M25.74,137.9c-5.33,12-9.7,24.4-13,37.3l17.48,4.2c3.03-11.8,7.04-23.2,11.95-34.2l-16.43-7.3Z"/>
+  <path d="M8.7,194.5c-2.09,12.5-3.2,25.4-3.2,38.5v.9l18-.2v-.7c0-12.1,1.02-24,2.95-35.6l-17.75-2.9Z"/>
+  <polygon points="96 338 91.6 355.4 308.6 410.9 313 393.5 96 338"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/rendingFrenzy.svg b/static/icons/abilities/rendingFrenzy.svg
new file mode 100644
index 00000000..f8694151
--- /dev/null
+++ b/static/icons/abilities/rendingFrenzy.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 470.093 476.752">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M338.72,0c-46.192,28.665-87.92,57.815-125.188,87.345-28.504-20.858-59.194-41.493-92.094-61.908,27.144,27.17,51.856,51.637,75.657,75.218-12.494,10.31-24.464,20.64-35.875,31.033C118.592,99.55,71.478,67.818,19.876,36.563c43.876,42.25,83.107,79.44,120.25,114.968-10.25,9.972-20.223,20.226-29.906,30.75-32.703-24.725-68.48-49.164-107.344-73.28,33.158,33.19,63.178,62.832,91.594,91.03C49.604,252.325,18.078,305.393,0,358.751c43.352-52.554,81.404-95.843,118-135.345,8.92,8.9,17.697,17.714,26.407,26.5-45.706,52.888-77.744,106.583-96.032,160.564,43.905-53.225,82.38-96.934,119.406-136.844,9.387,9.605,18.72,19.262,28,28.97-49.978,55.818-84.697,112.556-104.03,169.624,46.973-56.946,87.73-103.024,127.155-145.188,40.668,43.46,82.702,90.943,131.187,149.72-19.925-58.813-55.8-117.274-107.47-174.782,8.262-8.64,16.51-17.176,24.782-25.657,51.97,52.87,105.448,110.348,168.03,182.75-26.815-70.89-73.77-141.354-140.656-210.562,8.05-8.112,16.168-16.22,24.407-24.437,46.908,49.238,94.57,102.33,150.907,170.624-22.28-65.762-64.422-131.106-126.22-195.156,26.944-26.726,55.307-54.743,86.626-86.093-37.095,23.02-71.31,46.346-102.656,69.937-11.98-11.744-24.626-23.447-37.938-35.094,30.035-29.847,61.767-61.106,97.187-96.562-42.52,26.386-81.26,53.187-116.22,80.312-11.822-9.839-23.844-19.435-36.06-28.78C266.822,71.39,300.646,38.112,338.717.002l.003-.002ZM217.314,120.72c10.063,9.978,20.105,19.978,30.125,30-10.192,8.371-20.214,16.945-30.062,25.718-10.055-8.494-20.243-16.828-30.562-25,10.046-10.22,20.225-20.434,30.5-30.72v.002ZM267.344,170.78c11.128,11.248,22.165,22.485,33.157,33.845-9.159,7.335-18.191,14.826-27.094,22.47-10.528-10.215-21.271-20.207-32.22-29.97,8.691-8.809,17.41-17.59,26.157-26.344h0ZM164.22,174.656c9,8.656,17.979,17.334,26.937,26.033-8.795,8.487-17.391,17.176-25.782,26.062-9.33-8.041-18.8-15.917-28.406-23.625,9.11-9.65,18.182-19.092,27.25-28.47h.001ZM214.97,223.906c9.846,9.685,19.648,19.416,29.406,29.19-8.461,7.908-16.755,15.993-24.875,24.25-9.402-9.581-19.03-18.939-28.875-28.064,8.07-8.501,16.185-16.959,24.344-25.375h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/ripAndTear.svg b/static/icons/abilities/ripAndTear.svg
new file mode 100644
index 00000000..25301a4a
--- /dev/null
+++ b/static/icons/abilities/ripAndTear.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 478.19 476.161">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M85.167,0c23.14,15.444,46.098,31.27,68.55,47.572C108.662,26.678,59.207,11.655,4.347,3.327c46.697,26.72,91.596,55.58,135.705,85.524-37.203-18.033-77.48-32.22-121.602-41.37,58.218,34.322,109.368,72.465,154.71,114.206-57.34,47.213-107.065,104.703-147.57,174.166,27.11-24.29,54.91-47.545,82.868-70.68C61.742,321.033,24.85,386.683,0,463.808c20.36-24.62,40.988-48.203,61.905-70.817,44.7-67.485,89.567-147.11,148.856-170.418-29.61,30.708-63.36,75.164-98.25,118.145,40.99-40.437,83.09-77.46,126.415-111.512,61.598,70.49,110.757,149.38,152.145,235.873-6.738-44.794-16.796-87.384-30.03-127.666l46.444,65.53s-26.037-72.69-43.66-101.987c40.76,55.91,78.208,114.428,112.328,175.205-18.674-89.454-50.512-169.772-98.893-238.224,35.144,34.93,68.816,71.31,100.93,109.045-33.342-76.482-74.81-143.489-126.176-198.309,40.224-25.887,81.48-49.73,123.863-71.783-31.096,5.387-61.824,12.712-92.006,21.934,21.836-16.173,44.41-32.124,67.024-47.523-37.987,11.91-74.633,25.775-109.067,41.433,42.668-27.673,86.32-53.668,131.004-78.602h-.003c-67.47,18.055-130.83,42.19-188.998,73.548C227.537,45.89,161.821,15.893,85.168,0h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/riposte.svg b/static/icons/abilities/riposte.svg
new file mode 100644
index 00000000..27655cea
--- /dev/null
+++ b/static/icons/abilities/riposte.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 463.712 463.128">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M231.856,0l-6.252,41.475c-40.904,1.6-81.38,16.64-114.233,45.137L29.701,25.982l60.593,82.1c-28.1,33.614-42.45,74.828-43.054,116.206L0,231.272l47.573,7.17c2.384,38.934,16.966,77.26,43.765,108.758l-61.635,83.51,83.33-61.864c32.178,27.257,71.444,41.798,111.19,43.647l7.63,50.635,7.473-50.55c.853-.03,1.707-.052,2.56-.093-.843-.038-1.683-.09-2.524-.14l16.193-109.53c6.912-2.247,13.462-5.484,19.445-9.61l44.186,24.788-24.934-43.953c4.012-5.768,7.197-12.069,9.463-18.72l159.997-24.05-45.147-6.654c-.54-42.053-15.258-83.957-44.194-117.907l59.556-80.22h-.002l-80.392,59.333c-33.289-28.502-74.271-43.302-115.556-44.422L231.857,0h-.001ZM249.461,74.522c43.267,0,86.536,16.507,119.548,49.52,28.136,28.136,44.273,63.723,48.428,100.41l-113.322-16.705c-2.23-6.922-5.452-13.485-9.565-19.483l24.636-43.424-43.223,24.522c-6.295-4.49-13.244-7.984-20.603-10.358l-12.47-84.343c2.19-.084,4.38-.138,6.57-.138h0ZM220.241,77.062l-12.412,82.34c-6.777,2.308-13.19,5.571-19.046,9.69l-42.748-24.254,24.107,42.975c-4.229,6.068-7.541,12.726-9.83,19.76l-78.146,11.553c5.06-34.793,20.974-68.312,47.746-95.084,25.55-25.55,57.246-41.206,90.33-46.98h0ZM80.394,243.388l80.318,12.105c2.338,6.798,5.637,13.227,9.796,19.09l-24.826,43.76,43.963-24.942c5.566,3.795,11.616,6.826,17.988,9.012l16.325,108.306c-34.42-5.222-67.54-21.073-94.045-47.58-33.063-33.062-49.568-76.415-49.517-119.75h-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/rupture.svg b/static/icons/abilities/rupture.svg
new file mode 100644
index 00000000..e5d7a51a
--- /dev/null
+++ b/static/icons/abilities/rupture.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 479.424 480.935">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M0,0c47.647,56.45,115.417,144.717,81.997,187.354,56.01,18.077,119.235,143.897,150.99,175.052,1.477-24.13,23.964-14.4,51.776,7.51,10.106-14.555,19.463-30.113,28.04-46.437-71.51-21.026-159.736-152.712-108.915-135.123C145.611,134.59,52.79,42.258.001,0h-.001ZM392.732.126c.013.28.022.557.035.838,3.71,31.3,4.355,64.147,2.094,97.443,35.58,48.458,39.525,120.59,24.836,190.244-11.444,54.268-34.302,107.376-64.797,147.394,23.478,24.646,40.965,44.89,40.965,44.89,56.49-99.385,157.33-291.34-3.133-480.808h0ZM391.867,129.974c-11.03,90.59-42.957,181.907-92.518,252.078,14.08,12.273,28.75,26.505,42.31,40.304,27.426-37.093,49.073-86.927,59.75-137.562,11.892-56.388,10.05-113.31-9.542-154.82h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/skewer.svg b/static/icons/abilities/skewer.svg
new file mode 100644
index 00000000..8b5531af
--- /dev/null
+++ b/static/icons/abilities/skewer.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 471.579 433.759">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M145.157.009c-1.535.012-3.06.03-4.595.063-14.17.307-28.304,1.539-42.313,3.687h-.03C57.749,9.967,30.043,29.072,14.812,53.759-.418,78.446-3.213,108.023,3.282,135.039c6.492,27.02,22.268,51.823,45.405,67.126,23.137,15.304,53.82,20.5,87.156,8.564,88.876-31.822,154.224-18.526,202,22.125,47.297,40.24,77.402,109.05,90.25,190.53,9.29,10.237-.1.206,9.657,10.375,9.74-8.25-.16-.032,9.593-8.406,49.368-122.298,18.986-236.885-52.062-315.69C333.647,41.304,241.777-.739,145.157.01h0ZM274.875,69.539l90.687,36.345c4.922,4.69,9.668,9.56,14.25,14.563-4.09-2.25-8.194-3.45-11.938-3.563-10.212-.307-17.585,7.21-13.593,21.875,8.252,30.456,55.747,34.927,45.187,5.5,9.34,12.627,17.642,26.007,24.75,40.03-6.273-8.833-12.323-12.982-17.342-13.093-13.9-.306-19.88,30.236-.875,77.188,20.765,51.37,43.424,59.815,45.906,31.438,3.183,34.31-.184,70.722-11.408,108.437-15.63-70.58-45.05-130.96-90.53-169.656-14.414-12.265-30.428-22.22-48-29.532l-40.907-22.313,77.53,2.938-111.25-56,102.22,5.03-54.687-49.187Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/slingshot.svg b/static/icons/abilities/slingshot.svg
new file mode 100644
index 00000000..939d374a
--- /dev/null
+++ b/static/icons/abilities/slingshot.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 457.321 475.274">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M121.2,0c-2.838.003-5.676.125-8.5.365-22.6,1.92-44.724,11.21-61.347,26.587-16.32,15.096-27.204,36.473-26.69,61.45,3.875-.13,9.014-.284,14.847-.397,1.073-.02,2.088-.027,3.146-.043-.402-19.627,7.798-35.656,20.92-47.795,13.38-12.377,32-20.283,50.647-21.867,18.517-1.573,36.767,2.965,50.646,14.524,5.123-2.898,10.762-4.77,16.602-5.51,1.061-.132,2.125-.231,3.192-.297-2.443-2.757-5.079-5.335-7.89-7.715C160.931,5.937,141.059-.008,121.198.002l.002-.002ZM189.277,44.282c-2.986.057-5.93.6-8.842,1.477-1.103.255-2.188.579-3.25.972.026.04.05.082.075.12-3.47,1.38-6.817,3.335-9.692,6.35-3.5,3.673-6.077,9.9-4.693,15.998l.094.413.045.144c11.863-10.083,27.67-14.763,42.444-14.64.3.002.596.024.895.03l-.068-.868-.592-1.374c-2.704-6.274-8.677-8.048-13.11-8.49-1.099-.11-2.204-.154-3.308-.133h.002ZM241.32,65.52c-6.248.09-12.4.574-18.474,1.378l-.582.54,4.716,17.102c4.68-.57,9.39-.928,14.133-1.015,1.6-.03,3.207-.03,4.817,0,36.413.658,76.09,16.07,122.072,59.433l15.937-9.623c-49.936-48.12-95.313-67.04-137.684-67.806-1.652-.03-3.297-.035-4.936-.01h.001ZM189.03,76.115c-6.7,2.283-12.923,5.844-17.354,10.447l2.01,10.578c4.8-7.386,9.9-14.41,15.345-21.025h0ZM207.627,82.068c-4.65,5.218-9.075,10.81-13.297,16.738,5.564-1.297,11.307-1.985,17.088-2.13-.102-.656-.203-1.312-.3-1.958l-3.49-12.65h0ZM153.86,89.22c-10.62,5.178-21.06,10.89-31.368,16.828l14.736,8.645-.23-.047c.64.353,1.372.707,1.754,1.027.528.443.905.83,1.213,1.19,5.797-3.22,11.592-6.312,17.392-9.227l-3.497-18.416ZM44.352,105.976c-1.61.018-2.815-.007-4.496.025-8.207.16-14.15.39-16.605.478-2.228,1.913-6.242,5.488-11.158,11.178C5.463,125.327-.075,135.255,0,140.981c.095,7.15,3.73,19.28,9.736,30.228,6.007,10.948,14.408,20.872,21.87,25.426.002,0,2.58.932,6.513,1.07,3.934.138,9.176-.22,15.04-1.04,11.728-1.64,25.992-5.075,39.117-9.215,8.666-2.735,16.262-5.755,22.9-8.71-17.423-3.064-34.79-11.906-48.413-23.3-9.947-8.318-17.986-18.11-21.704-29.304-2.151-6.515-2.397-13.51-.707-20.16h0ZM214.482,114.572c-13.804-.118-26.667,3.534-35.956,11.37.29,1.234.584,2.44.873,3.696,7.614,33.128,13.767,73.212,9.864,97.246-5.603,34.496-31.537,84.64-56.23,125.106-14.89,24.398-29.136,45.285-38.177,58.144,10.07-.018,20.817,2.73,31.086,7.26,11.084,4.89,21.573,11.887,29.23,20.914,1.474,1.737,2.831,3.57,4.06,5.488,1.36-3.347,2.576-6.353,4.36-10.703,5.542-13.528,13.064-31.452,21.98-50.63,17.835-38.352,41.727-81.852,64.653-103.98,25.013-24.14,74.933-49.443,118.108-67.835,6.201-2.638,12.426-5.216,18.676-7.735-4.533-14.565-13.66-26.322-24.893-37.757-.622.35-1.232.7-1.86,1.052-35.47,19.846-79.24,38.213-106.96,35.963-3.385-.274-8.838-3.985-12.028-8.44-11.913-16.64-21.224-49.812-26.786-79.158h0ZM108.14,118.5c-.125.142-.195.26-.324.406-3.408,3.85-7.99,8.477-12.875,13.076-4.585,4.317-9.376,8.534-13.716,11.965,14.612,11.06,34.845,18.494,49.54,17.9.08-3.49-.12-7.653-.57-11.81-.688-6.327-1.887-12.74-3.016-17.247-.32-1.28-.697-2.544-1.13-3.79l-17.908-10.5h0ZM430.496,123.7c-2.163.02-4.4.502-6.305,1.614l-.428.252-.4.297s-2.87,2.124-7.9,5.642c14.61,14.434,22.734,32.15,28.22,50.262l4.314-1.457-.045.012c3.98-1.237,7.185-4.906,8.28-7.91,1.197-3.282,1.194-6.115.98-8.954-.425-5.676-2.144-11.535-4.497-17.277-2.354-5.742-5.26-11.186-9.092-15.605-1.915-2.21-4.043-4.27-7.263-5.73-1.61-.73-3.7-1.168-5.86-1.146h-.004ZM393.148,148.802l-13.875,8.377c5.383,5.814,10.47,12.035,14.83,18.9,1.41-8.554,1.554-17.292-.955-27.278h0ZM412.553,156.257c1.144,12.08-.52,22.994-2.93,33.05l15.717-5.33c-3.235-10.06-7.23-19.383-12.787-27.72h0ZM94.61,428.134c-.444,0-.878.012-1.3.03-6.752.316-9.117,1.857-10.17,4.693l-2.212,5.965c.14,4.046,1.104,8.02,2.834,11.68,3.7,7.818,10.09,14.155,17.732,18.603s16.732,7.043,26.115,5.9c7.178-.874,14.383-4.265,20.183-10.12.164-4.882-1.947-9.743-6.35-14.935-5.278-6.223-13.748-12.11-22.765-16.087-8.454-3.73-17.418-5.75-24.07-5.73h.003Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/smokeBomb.svg b/static/icons/abilities/smokeBomb.svg
new file mode 100644
index 00000000..2c93b7bf
--- /dev/null
+++ b/static/icons/abilities/smokeBomb.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 469 469">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M263.7.2c-20.4,0-39.6,6.7-52.8,18.1-8.8-6.1-19.3-9.3-30-9.3-27.8,0-50.6,21.5-52.8,48.8-18,5-30.8,21.4-30.8,40.6s.2,5.1.7,7.6c-2.9,5.9-4.5,12.3-4.5,18.9,0,23.2,18.9,42.1,42.1,42.1,2.4,0,4.8-.2,7.2-.6,1.4,2.9,3.1,5.7,5.1,8.2-17.4,3.3-27.1,17.2-23.3,36-9.3,4.6-16.9,6.2-17.2,18.3-.3,9.9,4.9,19,13.2,25.6-8.3,6.6-13.2,15.7-13.2,25.6s10.4,21.7,17.6,28.4c-7.4,9.7-7.9,25-.3,38.2.7,1.2,1.5,2.4,2.3,3.5l-14.6,49.4,48.4-30.4c7.1-.4,13.2-.9,20,.1,9.9,0,19.4-4.4,26.6-12.2,1.6.2,3.2.3,4.9.3,25.4,0,46.1-20.7,46.1-46.1s-.3-5.9-.8-8.8c14.2-4,25.6-14.5,30.8-28.3,8.7-2.7,16.6-7.6,22.8-14.3,27.7-.2,51.6-20,57.2-46.8,14.9-10.4,24.1-26.9,25-45,17.8-6.7,29.8-23.6,29.8-43.1s-19-44.4-43-46c-3.6-21.8-22.6-38.5-45.5-38.5s-2.1,0-3.1.1C324.2,17,296.6.2,263.7.2h0ZM263.7,15.5c28.1,0,52,15.2,54.4,34.5v.7c-9.5-9-22.2-14-35.5-13.9-17.2.1-33.2,8.7-42.8,23,9.5-8.7,21.9-13.6,34.7-13.7,28.5-.2,51.6,22.7,51.6,51.1h0c0,10.2-3.1,20.3-8.8,28.8,10.8-9.8,16.9-23.6,16.9-38.1,0-11-3.6-21.7-10.2-30.5,3.5-.9,6.9-1.6,10.7-1.7,16.9,0,30.7,13.8,30.7,30.7v8.8c4-.4,7.8-.9,11.6-1,17,0,30.7,13.8,30.7,30.7s-9.8,26.7-23.8,29.9l-6.2,1.4c.1,2.9.3,5.8.4,8.6,0,15.2-7.7,29.1-20.7,37l-3.1,1.9-.5,3.6c-3.1,21.2-21.6,37.1-43,37.1-2,0-4.4-.2-6.5-.3l-2.5,3c-5.6,6.7-15.6,12.1-25.8,14-3.6,13.8-12.1,23.3-28.8,27.4l-10.7.7,4.2,9.9c1.6,3.8,2.4,7.8,2.4,11.9,0,17-13.8,30.7-30.7,30.7-3.4,0-7.6-.9-11.3-1.7-5.5,7.5-9.4,12-20.2,13.7-7.8-.1-16.4-1.8-24.9.1l-17.3,10.9,3.7-12.4,2.1-5.7c-2.5-2.7-4.6-4.8-6.4-7.9-5.3-9-4.5-19.8,1.7-23.4,2.2-1.3,3.6-3.5,3.9-5.9.5-4.4-2.2-6.8-6.5-10.9-3.9-3.6-14.3-13.2-14.3-18.7,0-7.8,6.4-14.9,16.4-18.3l21.6-7.3-21.6-7.3c-10-3.4-16.4-10.5-16.4-18.3,0-3.9,13.2-8.2,16.7-11.9-3.1-13.3.2-24.4,16.4-27.8,3.5,0,7.8,1.1,11.6,2,3.3-5.1,6.6-9.9,10.8-14.6l-8.8-4.2c-7.1-3.4-12.3-9.7-14.4-17.2l-2.2-8.1c-6,2.2-10.8,4.5-17.2,4.6-14.8,0-26.8-12-26.8-26.8s1.3-9.6,3.8-13.8l1.7-2.8c-.9-3.5-1.7-6.2-1.7-9.9,0-13.7,10.3-25.2,23.9-26.6l7.2-.8c-.1-3.1-.3-6.1-.4-9,0-20.7,16.9-37.6,37.6-37.6s18.4,3.5,25.4,9.8l5.7,5.2,5.2-5.8c10.1-11.3,27.5-18.1,46.5-18.1h0ZM176.4,73.1c-13.5.1-26.5,9.5-32.5,23.4-8.1,18.7-1.5,39.6,14.8,46.7.6.3,1.2.5,1.9.7-10.9-8.7-14.1-25.1-7.8-39.6,7.5-17.3,25.8-26.1,40.9-19.5.4.2.7.4,1.1.6-7.5,3.7-12.4,10.2-13.3,17.7,0,.6-.1,1.2-.1,1.8,6-8.2,17.8-12.5,30-11.1,11.9,1.4,22.1,8.1,26.1,17.1,0-.2,0-.4.1-.6,1.5-13.3-9.8-25.7-25.3-27.7-1.6-.2-3.2-.3-4.8-.3-3,0-5.9.5-8.6,1.4-2.9-3.6-6.6-6.5-10.8-8.3-3.7-1.6-7.6-2.4-11.7-2.3h0ZM226.4,212.4c-18-.4-33.2,9.8-37.2,25-.6,2.3-.9,4.6-1,6.9,0-.1,0-.2,0-.3,5.4-16.7,25.5-25.1,44.7-18.8,0,0,0,0,0,0,19.2,6.3,30.4,24.9,25,41.5,0,0,0,0,0,0-1.4,4.3-3.9,8.3-7.3,11.5,8.4-4.5,14.3-11.7,16.6-20.2,4.9-18.7-8.5-38.4-30.1-44.1,0,0,0,0,0,0-3.5-.9-7.2-1.5-10.8-1.5h0ZM93.4,373.7c-26.3,0-47.6,21.3-47.6,47.6s21.3,47.6,47.6,47.6,47.6-21.3,47.6-47.6-1.5-13.4-4.1-19.3c-1.4-3.2-18.4,19.3-33.2,9.2-7.1-4.8-1.8-19.9,1.5-28.7,1.5-3.9,2.5-6.5,2.1-6.7-4.5-1.4-9.1-2-13.8-2h0ZM78.2,390.2c1.1.2-9,14,1.3,36.8,2.1,4.6-.3,10-5,12-4.7,2-10.2-.1-12.1-4.7-2-4.6,0-33.4,15.1-43.7.4-.3.6-.4.8-.4h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/spikeWall.svg b/static/icons/abilities/spikeWall.svg
new file mode 100644
index 00000000..9903bcf3
--- /dev/null
+++ b/static/icons/abilities/spikeWall.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 468.221 473.812">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M88.406,0l1.468,24.844c-7.493,3.44-14.667,7.408-21.436,11.968C56.525,30.617,7.843.876,7.843.876l26.438,68.563c-18.827,25.903-24.476,56.148-20.5,87.5-4.036,10.546-6.775,21.543-8.157,32.75-4.28,34.82,4.443,73.208,29.564,111.78C24.178,318.869,0,354.813,0,354.813l61.22-19.875c1.98,2.18,3.998,4.36,6.093,6.532,31.825,33.022,64.816,56.735,97.343,72.436-1.357,21.98-4.532,59.906-4.532,59.906l40.532-45.656c34.34,10.635,67.452,12.538,97.282,7.22,8.957,1.915,17.79,3.232,26.437,3.874,26.46,1.964,51.463-2.464,72.283-15.5,1.942-1.211,3.839-2.493,5.687-3.844,15.444,4.942,64.094,23.25,64.094,23.25l-34.906-57.062c4.48-8.064,8.3-17.044,11.375-26.97,9.51-30.692,13.66-59.886,13.375-87.374.002-.02-.003-.042,0-.063,4.158-29.67.89-60.38-8.282-89.562-3.378-10.728-7.514-21.202-12.375-31.344,15.212-13.58,32.595-28.75,32.595-28.75l-47.5,2.032c-8.474-13.175-18.222-25.552-29.094-36.843,5.347-17.464,21.908-64.907,21.908-64.907l-55.25,36.343c-.262-.183-.52-.38-.782-.562-24.558-17.015-52.748-28.888-83.125-33.25.924-11.743,1.72-21.625,1.72-21.625l-17.406,19.593c-31.27-10.284-63.304-15.307-93.656-14.47-21.283.588-41.732,4.05-60.532,10.595C95.875,8.82,88.405,0,88.405,0h.001ZM173.156,28.28c8.26.09,16.652.658,25.125,1.626-23.352,6.245-43.81,15.013-61.438,25.75-1.82-1.457-9.677-10.352-18.53-20.594,15.102-4.23,31.386-6.447,48.31-6.75,2.168-.038,4.345-.055,6.532-.03v-.002ZM241.843,41.78l-11.938,13.44c-11.7-2.576-23.596-4.165-35.562-4.75,4.397-1.344,8.9-2.63,13.563-3.782,11.515-2.845,22.86-4.438,33.937-4.907h0ZM91.093,45.626l1.53,26.344c-3.953,2.024-7.83,4.193-11.624,6.5-19.415,11.843-36.164,27.058-49,44.843,2.444-17.23,9.253-33.295,21.157-47.72,10.37-12.565,23.26-22.493,37.937-29.967ZM272.531,49.032c10.435,4.212,20.627,9.001,30.53,14.345l-4.562,19.28c-8.983-5.375-18.067-10.048-27.22-14.03.283-5.274.724-12.21,1.252-19.594h0ZM190.749,68.722c33.724,1.065,69.257,11.17,103.25,32.874l-4.656,19.594s6.89-5.636,15.22-12.438c21.385,15.353,42.013,35.488,61,61.094,6.913,9.325,12.885,18.596,18.03,27.75-11.63,10.287-22.28,19.594-22.28,19.594l31.5-1.344c7.023,15.705,11.562,31.02,13.905,45.72-16.35,8.71-59,29.373-59,29.373l59.625,13.875c-3.29,23.663-12.567,44.827-26.53,62.375-19.992,15.673-45.71,28.626-78.095,37.625-14.812-16.555-37.688-43.125-37.688-43.125l2.594,45.032c-31.706-11.987-64.888-30.877-95.874-54.283,6.14-19.402,20.97-61.843,20.97-61.843l-53.314,35.062c-26.48-23.94-50.176-50.712-68.562-78.156-.16-.976-.29-1.96-.438-2.938,21.096-4.256,50.813-9.75,50.813-9.75l-52.938-28.75c.747-17.35,3.87-34.413,9.532-50.625l24.186,7.75-17.625-23.718c.764-1.607,1.526-3.2,2.345-4.782,12.316-23.79,30.94-45.024,57.156-61.563,1.988-.446,3.987-.868,6-1.25,15.965,10.75,53.22,37.75,53.22,37.75l-12.346-40.905v.002ZM335.593,83.722c31.624,22.824,58.832,52.246,77.188,87.5-3.304,3.178-8.728,8.14-14.907,13.686-5.072-8.723-10.825-17.47-17.31-26.22-18.905-25.494-39.566-45.996-61.158-62.03,5.793-4.68,11.46-9.222,16.188-12.937h0ZM91.813,93.815c-7.594,8.932-14.254,18.618-19.876,28.906l-6.688-9c7.668-7.166,16.218-13.62,25.5-19.282.35-.214.71-.414,1.063-.626v.002ZM40.937,143.658l19.062,6.094c-6.742,19.452-10.13,39.89-10.53,60.47-.04-.085-.086-.168-.126-.25-8.156-17.232-13.81-34.135-16.53-50.376,2.316-5.497,5.046-10.808,8.124-15.938ZM23.687,196.846c2.588,7.178,5.518,14.227,8.78,21.125,5.833,12.32,12.784,24.582,20.657,36.655,1.034,5.658,2.275,11.277,3.72,16.844,4.967,19.042,12.262,37.398,21.72,54.655-43.19-45.79-58.08-90.447-54.876-129.28h0ZM429.717,214.283c4.823,17.464,7.594,36,7.938,55.532-2.115,14.63-6.24,28.865-12.562,42.375.395-2.295.74-4.602,1.03-6.937,3.503-28.023-.497-58.67-13.374-90.25l16.97-.72h-.002ZM85.313,297.188c21.512,24.926,46.452,48.21,73,68.5,24.674,18.86,50.713,35.157,76.81,47.625-32.876-2.213-62.096-14.434-86.81-33.28-27.445-20.928-49.14-50.188-63-82.844h0ZM427.593,344.97c-.803,2.886-1.646,5.761-2.53,8.624-8.284,26.728-21.605,43.83-38.345,54.312-12.555,7.862-27.34,12.04-43.875,12.906,5.973-2.924,11.756-6.222,17.313-9.875,12.958-8.522,24.402-18.87,34.03-30.687,13.3-10.688,24.41-22.53,33.407-35.28Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/stomp.svg b/static/icons/abilities/stomp.svg
new file mode 100644
index 00000000..cc15e891
--- /dev/null
+++ b/static/icons/abilities/stomp.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 479.431 431.976">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M200.128,0c-6.348.01-13.056.447-20.006,1.32-34.6,4.347-75.144,19.348-107.408,47.303l33.47,190.197.33,10.1c42.262,15.79,100.808,24.565,152.873,24.272,27.192-.154,52.657-2.762,72.982-7.8,20.325-5.04,35.188-12.803,41.803-20.917l.433.353c-14.317-48.847-60.635-88.597-135.474-56.27-12.09,5.612-24.333,12.902-36.332,21.685,11.24-16.29,23.786-29.055,36.76-38.453l.013-.12-27.066-14.183-35.343,25-10.793-15.256,27.546-19.484-27.5-14.41,8.67-16.554,35.964,18.842,34.57-24.457,1.62-16.186-30.2-17.918-35.16,22.433-10.05-15.757,27.208-17.36-27.97-16.595,9.538-16.072,36.08,21.408,37.088-23.664C255.227,10.847,232.294-.053,200.128,0h0ZM251.21,55.262l-16.522,10.54,14.602,8.665,1.92-19.205ZM243.157,135.802l-13.517,9.563,11.936,6.254,1.58-15.816h.001ZM378.727,265.712c-10.84,8.135-25.243,13.7-41.86,17.82-22.375,5.546-49.07,8.188-77.373,8.347-21.232.12-43.344-1.15-65.117-3.76l12.463,22.137c80.16,9.438,141.51-1.205,172.035-21.796.718-7.44.658-15.098-.15-22.75l.002.002ZM107.174,269.024l.996,30.464,58.595,8.456,9.58-22.312c-24.54-3.827-48.202-9.383-69.17-16.607h-.001ZM74.044,290.584c-2.51.75-4.906,1.515-7.175,2.3H19.352l24.928,11.085L0,329.599l45.677-4.822c2.33,1.773,5.212,3.498,8.62,5.166l-29.19,44.532,64.785-32.977c4.21.968,8.64,1.892,13.27,2.773l-10.733,66.783,61.413-59.744c5.551.539,11.108,1.017,16.67,1.435l11.673,77.528,50.93-75.073c2.03.013,4.05.034,6.096.034,2.436,0,4.85-.022,7.265-.04l56.216,76.782,6.903-79.364c5.663-.437,11.218-.92,16.625-1.457l60.782,59.9-10.762-66.976c4.528-.872,8.86-1.787,12.98-2.743l65.102,33.14-29.437-44.913c3.135-1.58,5.808-3.21,7.984-4.88l46.562,4.915-44.253-25.613,24.966-11.1h-48.592c-2.223-.77-4.564-1.52-7.016-2.253,5.408,3.254,8.34,6.724,8.34,10.326,0,18.587-77.737,33.652-173.627,33.652s-173.627-15.065-173.627-33.652c0-3.62,2.96-7.105,8.418-10.373h.004Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/stoneShatter.svg b/static/icons/abilities/stoneShatter.svg
new file mode 100644
index 00000000..35efc405
--- /dev/null
+++ b/static/icons/abilities/stoneShatter.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 475.394 475.452">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M137.566,0l21.832,149.004-83.165-78.248,40.946,125.732-74.765-6.927,39.33,68.112h71.87l-11.512-38.73,28.125,15.234,1.17-49.223,44.537,51.568,14.064-78.52,17.58,60.94,57.425-39.846-17.58,58.597,55.082-22.266-30.912,42.248h80.834l37.17-63.13-51.26,6.845,20.565-85.008-70.873,48.905,48.37-111.842-95.25,51.473-12.266-100.908-51.576,104.803-32.53-87.51-18.517,18.18L137.567,0h0ZM194.796,259.61l-48.064,34.892,20.48,27.527-127.039,16.723,8.42,66.527-.506,2.99L0,428.395v47.057h34.42l47.1-46.206-18.678-74.63,46.343-6.1,3.358,54.933,1.685.75,39.685,32.815-18.117,38.437h54.185l5.808-59.415-65.352-26.19-2.673-43.777,73.43-9.666-28.182-37.886,53.593-38.91h-31.81v.003ZM254.92,259.61l49.722,58.437-74.63,35.61-4.355.222,52.588,62.935-30.766,58.638h72.033l-2.315-73.403-53.628-43.697,58.706-28.014,73.418,17.262-45.13,72.213,41.003,55.112.19.527h69.838l-78.51-55.122,14.45-35.62,77.86,30.75v-34.606l-68.937-15.215,18.912-30.26-101.807-23.934-44.103-51.836h-24.54.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/stoneSkin.svg b/static/icons/abilities/stoneSkin.svg
new file mode 100644
index 00000000..f8b9476e
--- /dev/null
+++ b/static/icons/abilities/stoneSkin.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 472 472">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M190.1,15L8.1,121.5l119.6,54.3,148.3,11.7,42-24.3,17.3,11.6-46.2,26.8v148.9l53.6-14.6-64.6,52-110.9-59.6-2.2-1.5-71.3,6.6,75.9-32,100.8,52.1v-147.5l-145.9-11.5h-1.6c0-.1-1.5-.8-1.5-.8L.4,138.5v223.8l23.8,31.7,82,21,21.9-21.3,11.2,29.7,131.3,33.6v-52.2l4.2,2.3,5.5,2.9,4.8-3.9,4.2-3.3v52.2l182.4-106.3v-96.4l-24.6-11.9,24.6-38.8v-105.7l-90.2,52.3-1.1,34.1-88-58.7,85,5.4,79.5-46.1-184.9-47.1,1.6.6-64.4,5.8,5.3-20.9-24.2-6.2h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/stormStrike.svg b/static/icons/abilities/stormStrike.svg
new file mode 100644
index 00000000..35243cb5
--- /dev/null
+++ b/static/icons/abilities/stormStrike.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 474.18 474.86">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M0,0v39.72l130.88,73.84,94.9-45.12L130.28,0H0ZM196.98.1l95.3,57.34c-86.5,41.22-177.9,84.62-255.47,121.52l161.57,86.1,59.6-39.2-39.4-34.9c82.3-40.6,168.3-83.5,241.8-119.93L366.78.1h-169.8ZM341.18,151.16l-76.5,37.9,44.9,25.3c-54.2,35.6-111.8,73.6-160.6,105.7l325.2,154.8-187.4-147.2c57.6-32.3,117.5-65.9,168.8-94.6l-114.4-81.9ZM354.38,311.26l-33.9,18.9,139.3,74.3c-35.1-31.1-70.3-62.2-105.4-93.2h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/sunder.svg b/static/icons/abilities/sunder.svg
new file mode 100644
index 00000000..265eed8a
--- /dev/null
+++ b/static/icons/abilities/sunder.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 414.937 467.905">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M0,0v9.344c0,102.68,10.49,205.087,41.125,288.155,30.637,83.068,82.364,147.415,163.75,169.78l2.22.626,2.22-.5c89.269-19.03,141.643-83.64,170.372-167.56,28.728-83.92,35.25-187.777,35.25-290.5V0H0ZM18.814,18.688h377.34c-.413,98.8-7.497,197.342-34.125,275.125-27.21,79.487-73.39,136.637-154.375,154.78-73.28-21.03-119.914-78.696-149-157.562C30.179,213.819,19.448,116.901,18.811,18.687h.003ZM37.624,37.438c.807,84.13,12.486,172.823,39.314,244.812,7.825,20.998,16.874,40.495,27.25,58.063l45.844-38.438-40.75-75.063-5.47-10.062,10.97-3.344s38.865-11.786,60.406-18.25l20.437-7.25L100.782,37.438s-63.158,0-63.158,0ZM197.874,37.438l45.782,91.5,132.407-43.157c.69-16.205,1.053-32.366,1.155-48.344h-179.344ZM375.031,105.781l-122.906,40.064,24.908,49.78,25.875,48.72,53.28-1.845c10.245-42.834,16.03-89.664,18.844-136.72h0ZM265.002,212.845l-30.75,10.374,67.25,145.187c17.813-23.2,31.737-51.6,42.624-83.686,2.578-7.595,4.966-15.39,7.19-23.344l-53.626,1.844-5.844.22-2.75-5.158-24.094-45.437h0ZM165.782,217.531c-13.133,3.972-27.346,8.262-34.625,10.47l38.937,71.654,3.625,6.72-5.844,4.906-53.56,44.906c24.67,35.91,55.887,61.828,94.655,73.125,30.34-6.91,55.36-21.496,76.03-42.062l-119.216-169.72h-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/taunt.svg b/static/icons/abilities/taunt.svg
new file mode 100644
index 00000000..6e89c58d
--- /dev/null
+++ b/static/icons/abilities/taunt.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 479.47 474.81">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M386.03,199.16l93.44-32.72v-66.56l-93.44,99.28ZM0,53.72v84.09l99.28,46.72L0,53.72ZM423.4,0l-74.15,158.28,130.22-99.31V0h-56.07ZM317.12,0l-16.34,130.22L391.31,0h-74.19ZM223.68,0l22.78,118.56L282.09,0h-58.41ZM188.65,0h-65.43l68.34,124.41L188.65,0ZM89.34,0H0v14.59l140.75,132.57L89.34,0Z"/>
+  <path d="M360.9,216.5c-1.85-9.47-6.03-19.94-12.37-29.78-10.96-17.01-25.24-27.29-36.16-27.37-3.64-.03-6.9,1.07-9.56,3.43-2.42,2.16-4.12,5.17-5.12,8.82,1.25,1.57,2.48,3.17,3.65,4.84,11.65,16.57,19.58,37.63,22.47,61,8.61,7.78,17.56,11.76,24.72,10.78l54.59,35.94-104.59,57.81c-4.07,5.26-8.57,10.02-13.44,14.16-5.57-4.35-11.03-7.95-16.44-10.82,6.33-4.49,12.21-10.48,17.41-17.87,12.3-17.5,20.28-42.42,20.28-70.13,0-7.05-.51-13.91-1.49-20.52-.65-4.44-1.51-8.76-2.56-12.95-3.52-14.09-9.16-26.6-16.23-36.65-12.3-17.5-28.3-27.32-45.44-27.32s-33.13,9.82-45.43,27.32c-6.8,9.67-12.29,21.62-15.82,35.06-1.69,6.42-2.94,13.18-3.68,20.2-.51,4.84-.78,9.8-.78,14.86,0,27.71,7.98,52.63,20.28,70.13,4.54,6.45,9.58,11.86,15,16.12-5.51,2.62-11.07,6.02-16.69,10.22-3.81-3.52-7.32-7.35-10.5-11.44l-105.25-58.19,54.44-35.84c7.49.51,16.76-4.09,25.5-12.59,3.06-22.69,10.85-43.12,22.22-59.28.78-1.13,1.6-2.23,2.43-3.32-.93-4.32-2.75-7.89-5.5-10.34-2.65-2.37-5.92-3.47-9.56-3.44v.01c-10.92.08-25.16,10.36-36.13,27.37-6.48,10.05-10.7,20.77-12.5,30.41-49.04,22.67-113.9,63.9-113.9,63.9l148.43,126,15,67.78h144.28l11.32-64.65.09.09,152.25-129.22s-66.03-41.99-115.22-64.53ZM257.47,230.42l10.13-10.13c5.97,1.13,11.93,2.6,17.82,4.39v18.34l-.39,1.14c-9.07-3.11-18.41-5.32-27.91-6.63.23-2.36.34-4.74.35-7.11ZM195.13,243v-18.71c6.77-2.27,13.76-3.96,20.89-5.08l11.32,11.31c.01,2.1.08,4.14.25,6.14-11.27.94-22.11,3.38-32.06,7.34l-.4-1ZM240.09,333.25c-20.26,0-36.69-16.43-36.69-36.68s16.43-36.66,36.69-36.66,36.72,16.4,36.72,36.65-16.45,36.69-36.72,36.69Z"/>
+  <path d="M179.37,222.25c-1.69,6.42-2.94,13.18-3.68,20.2l3.68-20.2Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/unbreakable.svg b/static/icons/abilities/unbreakable.svg
new file mode 100644
index 00000000..fedfb9bf
--- /dev/null
+++ b/static/icons/abilities/unbreakable.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 434.08 473.916">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M151.41,0l13.176,64.625h41.957l-.002,18.69h-38.145l7.635,37.438h82.63l7.45-37.44h-40.88v-18.687h44.597L282.683.016,151.41.002v-.002ZM292.82,44.832l-18.823,94.608h-113.23l-18.99-93.127L0,95.989l148.973,247.342-60.967-203.168,17.9-5.37,39.247,130.784,72.35,10.62,71.53-10.696,39.094-130.664,17.905,5.358-60.018,200.587,148.066-244.865-141.26-51.085ZM283.112,285.282l-65.582,9.81-66.447-9.754,56.59,188.578v-152.847h18.69v152.847h.31l56.44-188.633h-.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/venom.svg b/static/icons/abilities/venom.svg
new file mode 100644
index 00000000..928cbdc1
--- /dev/null
+++ b/static/icons/abilities/venom.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 477.675 470.29">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M251.334,0c-17.095,0-30.953,13.86-30.953,30.954s13.857,30.953,30.952,30.953,30.954-13.857,30.954-30.953S268.429.001,251.333.001h.001ZM248.564,9.33c-1.963.883-3.61,2.304-5.22,3.915-7.128,7.128-7.344,18.743-.217,25.87,7.128,7.13,18.96,7.13,26.088,0,1.707-1.705,2.808-3.775,3.698-5.87-.526,4.734-2.46,9.416-6.087,13.043-8.487,8.487-22.166,8.268-30.653-.217h-.002c-8.484-8.483-8.703-22.166-.216-30.65,3.48-3.48,8.08-5.463,12.61-6.09h0ZM159.474,11.624c-23.916,0-43.302,19.384-43.302,43.3s19.386,43.3,43.3,43.3c3.23,0,6.375-.365,9.403-1.035,1.283,15.915,14.596,28.434,30.842,28.434,17.096,0,30.953-13.858,30.953-30.953,0-16.374-12.717-29.77-28.812-30.87.597-2.866.916-5.834.916-8.877,0-23.915-19.386-43.3-43.3-43.3h0ZM152.998,27.504c-2.674,1.203-4.917,3.14-7.11,5.333-9.717,9.716-10.012,25.55-.298,35.266,9.715,9.716,25.845,9.716,35.56,0,2.328-2.327,3.827-5.15,5.04-8.002-.718,6.454-3.354,12.837-8.3,17.782-11.565,11.568-30.216,11.27-41.782-.297h-.002c-11.566-11.566-11.863-30.22-.295-41.785,4.742-4.743,11.014-7.443,17.186-8.297h.001ZM307.842,64.906c-32.255,0-58.402,26.147-58.402,58.403s26.147,58.402,58.402,58.402,58.403-26.147,58.403-58.402-26.147-58.403-58.403-58.403ZM196.272,76.646c-1.85.83-3.4,2.17-4.918,3.688-6.72,6.72-6.926,17.668-.207,24.387,6.718,6.718,17.873,6.718,24.594,0,1.608-1.61,2.642-3.56,3.48-5.533-.494,4.46-2.317,8.873-5.735,12.293-8,8-20.896,7.794-28.895-.205s-8.206-20.895-.207-28.894c3.28-3.28,7.618-5.15,11.887-5.738v.002ZM301.162,79.363c-3.913,1.76-7.193,4.592-10.404,7.803-14.21,14.21-14.644,37.37-.433,51.582,14.21,14.21,37.803,14.21,52.013,0,3.402-3.404,5.596-7.53,7.37-11.704-1.05,9.438-4.905,18.773-12.137,26.006-16.92,16.92-44.2,16.485-61.118-.434-16.92-16.92-17.353-44.198-.434-61.117,6.937-6.936,16.11-10.887,25.14-12.136h.003ZM205.038,147.433c-23.87,0-43.22,19.348-43.22,43.217s19.35,43.22,43.22,43.22,43.216-19.35,43.216-43.22-19.347-43.215-43.216-43.215v-.002ZM201.518,159.236c-2.824,1.27-5.192,3.316-7.512,5.633-10.262,10.262-10.572,26.98-.31,37.242s27.294,10.262,37.554,0c2.456-2.457,4.04-5.436,5.32-8.45-.756,6.815-3.54,13.555-8.763,18.778-12.215,12.215-31.912,11.903-44.127-.312h-.002c-12.215-12.215-12.53-31.914-.312-44.13,5.008-5.007,11.632-7.86,18.152-8.76h0ZM283.84,227.342c-14.153,0-26.078,9.5-29.767,22.47-5.051-.104-10.102-.16-15.154-.166-64.15,0-122.217,7.86-165.02,20.92-21.403,6.53-39.006,14.3-51.93,23.623-14.435,12.847-25.627,24.45-20.85,42.916,5.49,36.45,32.217,68.37,70.718,91.483,43.34,26.017,102.216,41.702,167.08,41.702s123.74-15.685,167.08-41.703c38.48-23.103,65.2-55,70.71-91.427.707-4.507,1.486-9.716.51-14-2.14-11.28-10.294-21-21.344-28.973-12.925-9.324-30.528-17.092-51.93-23.623-25.175-7.682-55.657-13.545-89.524-17.087-2.313-14.808-15.12-26.137-30.578-26.137v.002ZM282.58,238.939c-1.85.832-3.4,2.17-4.92,3.688-6.718,6.72-6.923,17.668-.204,24.387s17.87,6.718,24.59,0c1.61-1.61,2.647-3.56,3.486-5.534-.496,4.464-2.32,8.876-5.74,12.296-7.997,8-20.894,7.794-28.893-.205-8-7.997-8.204-20.894-.205-28.893,3.28-3.28,7.618-5.148,11.887-5.737v-.002ZM238.918,268.344c5.286,0,10.512.074,15.707.183,4.226,12.065,15.707,20.72,29.215,20.72,12.17,0,22.69-7.023,27.748-17.235,33.278,3.444,62.996,9.144,86.897,16.437,20.132,6.144,36.143,13.47,46.447,20.903,9.27,6.687,13.307,12.79,14.027,17.976-.105,1.925-.285,3.844-.54,5.755-1.483,4.648-5.58,9.927-13.487,15.63-2.407,1.737-5.137,3.468-8.146,5.18-60.55-67.602-319.786-71.505-397.23-.867-2.423-1.428-4.647-2.867-6.65-4.312-7.927-5.72-12.026-11.013-13.5-15.67-.248-1.889-.425-3.786-.53-5.688.708-5.192,4.744-11.306,14.03-18.005,10.305-7.434,26.315-14.76,46.448-20.903,40.265-12.287,96.956-20.105,159.564-20.105h0ZM35.728,372.327c10.775,5.7,23.588,10.725,38.17,15.174,42.803,13.063,100.87,20.92,165.02,20.92s122.22-7.857,165.024-20.92c14.576-4.447,27.384-9.47,38.158-15.167-10.695,14.855-26.175,28.496-45.725,40.232-39.745,23.86-95.63,39.04-157.46,39.04s-117.714-15.18-157.46-39.04c-19.552-11.737-35.033-25.38-45.728-40.238h.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/warBanner.svg b/static/icons/abilities/warBanner.svg
new file mode 100644
index 00000000..da6c5adc
--- /dev/null
+++ b/static/icons/abilities/warBanner.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 387.189 381.543">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M375.84,17.553c-3.72.82-7.68,3.38-10.87,7.9-208.61-97.68-93.19,125.01-313.82,16.25C31.2,71.993,9.3,162.803,0,203.173c217.63,107.29,105.2-109.94,302.28-22.13l-79.78,200.5c8.98-.19,17.83-.9,26.53-2.08L385.78,35.073c4.33-12.66-1.98-19.3-9.94-17.52ZM309.44,162.983c-10.69-34.92,11.17-101.9,47.27-118.84l-47.27,118.84Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/warCry.svg b/static/icons/abilities/warCry.svg
new file mode 100644
index 00000000..c801e04b
--- /dev/null
+++ b/static/icons/abilities/warCry.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 467 467">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M245.4,301.9h-23.8l-12.1-40.9-63.8-19.8,1,39.4,41.9,47.3,16.1-14.3,12.2,141.8-109.2-122.2,19.4-58.2-10.4-125.2,23.1-9.8c18.4,71.3,73.1,96.4,73.1,96.4l20.6-28.9,20.6,28.9s54.7-25.1,73.1-96.4l23.1,9.8-10.4,125.2,19.4,58.2-109.2,122.2,12.2-141.8,16.1,14.3,41.9-47.3,1-39.4-63.8,19.8-12.1,40.9ZM371.2,366.7l-74.8,76.7,56.8-28,6.1,24,51.6-36-39.7-36.7ZM95.8,366.7l74.8,76.7-56.8-28-6.1,24-51.6-36,39.7-36.7ZM362.3,249l101.2-58.3C483.5,2.4,409.9-9.9,338,30.1c0,0,114.1-27.7,66.1,109.4l-35.8,14.7-6,94.8ZM104.7,249L3.5,190.7C-16.5,2.4,57.1-9.9,129,30.1c0,0-114.1-27.7-66.1,109.4l35.8,14.7,6,94.8ZM233.5,97.3l67.5,41.8s-3.2,35-42.4,64.7l-25.1-51.7-25.1,51.7c-39.2-29.7-42.4-64.7-42.4-64.7l67.5-41.8Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/weave.svg b/static/icons/abilities/weave.svg
new file mode 100644
index 00000000..3351bccd
--- /dev/null
+++ b/static/icons/abilities/weave.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 473.4 473.1">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M473.4,19.9V.1c-89.2-.1-178.5-.1-267.7-.1l138,9.7c-6,15.4-11.8,31.4-15.1,47.9-2.8,13.7-3.6,27.9-.9,41.9L188,28.6c-1.7-9.8-4.3-19.9-4-28.6h-18.8c-.2,6.1.4,12,1.4,17.7L131.8,0h-58.1c-6.8,11.5-11.7,24.3-13.8,38.7L13.6,0H0v13.1l52.5,43.8C33.9,65.1,15.2,78.3,0,95.5v46.8l64.8,83.9c-22.5,12.6-46,25.8-64.8,46.3v51.3l32.2,77.7c-11-.2-21.8.9-32.2,3.9v19.6c12.2-4.5,25.8-5.7,40.2-4.5l21.8,52.6h20.3l-23.8-57.2c33.2-26.5,75.1-43.6,118.9-44.1l70.2,90.8c-25.2,1.4-53.2,3.2-76.7,10.5h109.5c36.5-59.5,75.1-101.7,136.1-111.3,18.6,11.7,39.2,31.5,56.9,46.3v-24.3l-49.6-41.4c-3.5-68.9,17.1-117.9,41.6-151.9l8,4v-20.9l-9.5-4.8c-7.9-20.4-13.1-46.8-12.5-73.1.5-27.6,7.2-54.9,22-75.8ZM180.5,45.8l145.3,73.8c-29.9,27.3-43.5,62.8-46.5,102.3l-119.1-99.5c-.7-27.3,9-56.6,20.3-76.6ZM94.6,2.1l69.3,35.2c-11.5,20.3-20.8,43.4-22.3,69.6l-64.3-53.7c.3-20.5,6.6-36.5,17.3-51.1ZM5.4,118.8c17.7-20.3,40.3-40.1,63.3-48.4l64.3,53.7c-24.2,21.4-46.4,48.6-59.2,83.1L5.4,118.8ZM51.1,398.1L7.3,292.8c20.1-23.3,46.9-39.2,69.1-51.7l87.3,112.9c-41.6,3.3-80.6,19.8-112.6,44.1ZM87.5,224.9c13.6-35.7,35.3-67.1,59.9-88.7l125.8,104.9c-39.4,22.5-74.7,53.8-94.1,102.3l-91.6-118.5ZM267.8,458.2l-75.3-97.4c20.5-48,58.3-86.2,96-107l110.8,92.5c-58.2,14.3-97.3,57.5-131.5,111.9ZM404.8,326.6l-107.6-89.8c5.3-44.7,19.8-85.6,46.5-108.1l105,53.3c-23.7,33.9-43.7,81.4-43.9,144.6ZM432.7,95.3c-.5,21.5,2.4,42.6,7.6,61.5l-89.5-45.5c-7.3-15.7-7.4-32.2-3.9-50,3.3-16.2,9.7-33.2,16.3-50.2l89.5,6.3c-13.7,23.3-19.5,50.9-20,77.9Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/whirlwind.svg b/static/icons/abilities/whirlwind.svg
index aa92ec9e..05617248 100644
--- a/static/icons/abilities/whirlwind.svg
+++ b/static/icons/abilities/whirlwind.svg
@@ -1,13 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 345.1 348">
-  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
-  <path fill="#000"
-    d="M147.1,0l-47.3,14.2c-29.8,13.2-63.2,30.3-76.7,61.8,12-12.3,24.5-22.5,39.7-30.8C112.3,17.8,181.6,7.4,237.5,14.1c41.8,5,123.5,27.7,104.9,85.7-17.4,54.5-112.8,71.2-161.8,73.2s-13.6.3-20,0c-1.2,0-3.7.8-3.5-1,54.8-6.2,119.1-20,155-65.5,3.3-4.2,7.4-9.4,9-14.5-14.8,15.9-33.5,28.2-53.3,37.2-59.3,26.7-140.8,34.3-203.2,14.8C-22.1,117-19.8,54.2,61.2,20.5,87.9,9.4,118.3,2.7,147.1,0ZM62.2,84c.9.8,13.9-8.4,16-9.5,53.2-29.4,129.3-27,185.5-7.5,10.4,3.6,20.8,7.9,30,14,11.7-24.8-18.4-39.5-37.7-45.2-47.4-14.1-124.2-7.2-167.1,18.5-11.4,6.8-23,16.6-26.7,29.8ZM159.9,66.3c-29.9,1.8-62.9,9.7-87.1,27.9s-7.9,4-5.5,8.2,16.8,14.9,21.6,15.5,18.4-9.2,22.6-11c38.7-16.7,87.8-18.2,128.7-9.3s18.3,5.1,27.3,8.2l18.6-13.2c-36.6-20.8-84.3-28.7-126.2-26.2ZM249.1,115c-1.5-2.5-6.2-2.8-9-3.5-33.9-8.5-100.7-8.3-130.7,11.3-1,.6-1.8-.1-1.3,2.2,46.8,9.6,96.1,6.1,141-10Z" />
-  <path fill="#000"
-    d="M303.2,165c-31.2,32.8-74.4,58.8-119,68.5-42.3,9.2-90.9,4.2-120-31-.9-1.1-2.4-1.6-2-3.5,7.8,3.7,15.6,7.1,24,9.5,22.3,6.3,44.3,6.6,67.4,4.4l39.6-8.9-36.5-1c-39.3-3.7-77.1-17.4-106.5-44,18.6,7.9,37.3,14.9,57,19.5,44.9,10.4,94.8,12.4,140.2,4.2,19.3-3.5,38.1-9.5,55.8-17.7Z" />
-  <path fill="#000"
-    d="M221.2,234c-25.3,29.9-84.5,52-121,33.5s-20.3-15.9-20.5-26.5c43.8,24.8,98,12.6,141.5-7Z" />
-  <path fill="#000"
-    d="M158.2,317l-13.1,30.9-29.2.2c-11.9-16.6-21.8-35.1-26.7-55,19.3,16.5,42.6,29.3,69,24Z" />
-  <path fill="#000" d="M98.2,282c25.8,9.1,53.7,6.6,79-3-11,40.2-57.8,26-79,3Z" />
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 348 348">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <path d="M148.55,0l-47.3,14.2c-29.8,13.2-63.2,30.3-76.7,61.8,12-12.3,24.5-22.5,39.7-30.8C113.75,17.8,183.05,7.4,238.95,14.1c41.8,5,123.5,27.7,104.9,85.7-17.4,54.5-112.8,71.2-161.8,73.2s-13.6.3-20,0c-1.2,0-3.7.8-3.5-1,54.8-6.2,119.1-20,155-65.5,3.3-4.2,7.4-9.4,9-14.5-14.8,15.9-33.5,28.2-53.3,37.2-59.3,26.7-140.8,34.3-203.2,14.8C-20.65,117-18.35,54.2,62.65,20.5,89.35,9.4,119.75,2.7,148.55,0ZM63.65,84c.9.8,13.9-8.4,16-9.5,53.2-29.4,129.3-27,185.5-7.5,10.4,3.6,20.8,7.9,30,14,11.7-24.8-18.4-39.5-37.7-45.2-47.4-14.1-124.2-7.2-167.1,18.5-11.4,6.8-23,16.6-26.7,29.8v-.1ZM161.35,66.3c-29.9,1.8-62.9,9.7-87.1,27.9s-7.9,4-5.5,8.2,16.8,14.9,21.6,15.5,18.4-9.2,22.6-11c38.7-16.7,87.8-18.2,128.7-9.3s18.3,5.1,27.3,8.2l18.6-13.2c-36.6-20.8-84.3-28.7-126.2-26.2v-.1ZM250.55,115c-1.5-2.5-6.2-2.8-9-3.5-33.9-8.5-100.7-8.3-130.7,11.3-1,.6-1.8-.1-1.3,2.2,46.8,9.6,96.1,6.1,141-10Z"/>
+  <path d="M304.65,165c-31.2,32.8-74.4,58.8-119,68.5-42.3,9.2-90.9,4.2-120-31-.9-1.1-2.4-1.6-2-3.5,7.8,3.7,15.6,7.1,24,9.5,22.3,6.3,44.3,6.6,67.4,4.4l39.6-8.9-36.5-1c-39.3-3.7-77.1-17.4-106.5-44,18.6,7.9,37.3,14.9,57,19.5,44.9,10.4,94.8,12.4,140.2,4.2,19.3-3.5,38.1-9.5,55.8-17.7Z"/>
+  <path d="M222.65,234c-25.3,29.9-84.5,52-121,33.5s-20.3-15.9-20.5-26.5c43.8,24.8,98,12.6,141.5-7Z"/>
+  <path d="M159.65,317l-13.1,30.9-29.2.2c-11.9-16.6-21.8-35.1-26.7-55,19.3,16.5,42.6,29.3,69,24v-.1Z"/>
+  <path d="M99.65,282c25.8,9.1,53.7,6.6,79-3-11,40.2-57.8,26-79,3Z"/>
 </svg>
\ No newline at end of file
diff --git a/static/icons/abilities/wideSwing.svg b/static/icons/abilities/wideSwing.svg
new file mode 100644
index 00000000..60d8ce58
--- /dev/null
+++ b/static/icons/abilities/wideSwing.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 470.807 466.219">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M213.314.011C131.224.711,50.444,37.746,0,103.636c26.08-22.208,57.052-38.305,90.063-47.5C27.823,109.84-4.52,195.226,10.437,281.416c1.081-27.888,7.632-55.293,19.28-80.655,1.154,51.488,18.492,102.143,52.22,143.344-38.003-76.004-22.756-193.02,39.844-240.313,11.844-6.056,24.272-10.893,37.093-14.436,107.067-29.575,216.937,36.285,245.627,146.655,16.562,63.723,2.315,128.343-33.25,177.313-4.68,4.68-9.852,8.942-15.47,12.875-5.947-1.8-11.324-4.187-16.03-7.22-12.01-7.737-19.51-19.947-20.656-33.624-2.096-24.99,14.13-53.014,46.53-80.53l-29.717-22.095c-16.038,39.73-38.954,61.946-64.188,65.186-13.836,1.777-27.648-2.677-39.03-11.844-8.41-6.77-15.634-16.017-21.5-27.406-16.69,19.306-20.72,43.155-16,67.28,5.483,28.04,23.502,55.683,47.28,72.252,21.973,15.312,49.595,21.202,74.813,16.375,9.043-1.732,17.75-4.832,25.843-9.344,18.055-8.925,34.396-20.126,47.25-35,65.17-57.975,96.26-151.12,72.47-242.658C434.864,69.926,340.087-.707,236.814.386c-1.612.017-3.23.042-4.845.094-6.22-.368-12.44-.523-18.656-.47h.001ZM122.657,145.136c-12.53-.06-18.07,15.934-6.063,23.656l188.688,133.032c4.29-6.45,8.42-14.145,12.25-23.187l-185.22-130.596c-3.503-2.022-6.764-2.89-9.655-2.905Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/abilities/wildGrowth.svg b/static/icons/abilities/wildGrowth.svg
new file mode 100644
index 00000000..ddca39f0
--- /dev/null
+++ b/static/icons/abilities/wildGrowth.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 475.673 460.531">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M73.056,0c-11.966.114-21.575,10.038-27.69,34.406-1.684-.12-3.372-.162-5.06-.125-.69.015-1.36.048-2.032.093-55.335,3.656-56.578,101.698,35.622,245.313C1.958,103.977,38.286,53.122,118.178,122.687c-38.505,17.613-21.605,45.215-5.344,73.5-1.287-30.686,19.758-38.518,24.313-55.563,23.737,24.213,50.402,57.545,78.656,99.907,7.393,11.091,15.04,22.011,22.936,32.75-14.56,10.542-7.932,33.297-35.656,45.217,31.126.735,54.204-3.397,53.313-22.187,80.447,100.804,148.373,127.744,184.875,115-1.53,14.002,8.962,28.752-6.313,49.22,33.763-18.444,52.77-37.19,20.375-57.25,42.036-35.254,14.252-124.714-40.78-181.44,52.787-50.407-8.977-89.516-72.22-104.874,27.52,21.707,21.675,48.652,32.22,73-13.708-8.013-28.228-13.7-43.126-16.28-4.14-.718-8.307-1.222-12.5-1.44-71.263-5.38-67.123,47.11-.875,69.97-31.727-11.35-33.71-67.642,16.405-52.03l-.03-.19c86.477,40.41,130.355,169.808,84.81,177.876-23.083,4.09-55.358-11.07-94.06-49.375,19.28-4.406,31.163-23.904,53.78-40.75-15.274-.834-29.638-4.237-41.406-3.937-14.15.36-24.508,6.105-28.19,28.094-19.554-21.58-40.526-48.67-62.624-81.813C176.982,115.462,115.534,59.446,71.43,41.125c14.436-5.612,29.11-15.96,54.406-5.874C106.05,14.508,87.769-.139,73.056.001h0ZM85.806,299.875c29.458,75.44,9.59,124.826-60.157,113.75,111.215,39.413,130.842-22.563,60.157-113.75Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/allTolerances.svg b/static/icons/allTolerances.svg
new file mode 100644
index 00000000..2a30683c
--- /dev/null
+++ b/static/icons/allTolerances.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 466 438.765">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M233,0c-18.38,16.053-47.185,33.518-77.79,49.72-31.429,16.64-63.92,31.224-88.325,39.985,1.978,11.276,8.625,32.908,19.18,58.363,12.599,30.386,29.991,66.674,48.845,101.404,18.854,34.731,39.218,67.959,57.514,92.11,9.148,12.075,17.812,21.879,25.164,28.322,7.351,6.443,13.412,8.861,15.412,8.861s8.06-2.418,15.412-8.861,16.016-16.247,25.164-28.322c18.296-24.151,38.66-57.379,57.514-92.11,18.854-34.73,36.246-71.018,48.846-101.404,10.554-25.455,17.201-47.087,19.18-58.363-24.406-8.761-56.897-23.345-88.327-39.985-30.604-16.202-59.41-33.667-77.789-49.72ZM100.975,9.716C68.995,25.706,36.817,41.638,4.943,57.732l-4.943,2.496v5.537c0,11,4.334,26.468,10.46,44.848,6.127,18.38,14.22,38.641,22.49,55.178l16.1-8.05c-7.73-15.463-15.637-35.2-21.51-52.821-4.531-13.591-7.698-26.391-8.933-33.895,29.99-15.11,60.25-30.124,90.418-45.209l-8.05-16.1h0ZM365.025,9.716l-8.05,16.1c30.169,15.085,60.429,30.1,90.418,45.21-1.234,7.503-4.402,20.303-8.932,33.894-5.874,17.62-13.78,37.358-21.512,52.822l16.102,8.049c8.268-16.537,16.362-36.799,22.488-55.178,6.127-18.381,10.461-33.848,10.461-44.848v-5.537l-4.943-2.496c-31.874-16.094-64.053-32.026-96.032-48.016h0ZM233,46.088l6.777,7.755c7.366,8.43,27.707,20.13,49.31,29.832,21.605,9.702,44.603,18.144,59.12,23.682l5.793,2.21v6.198c0,6.305-1.831,12.916-4.621,21.258s-6.69,18.085-11.389,28.78c-9.396,21.389-21.982,46.542-35.078,70.706-13.096,24.165-26.675,47.295-38.152,64.67-5.739,8.688-10.92,15.916-15.477,21.313-2.278,2.698-4.372,4.938-6.594,6.808-2.221,1.87-4.282,3.976-9.265,4.211l-.424.02-.424-.02c-4.983-.235-7.044-2.34-9.265-4.21-2.222-1.87-4.316-4.11-6.594-6.81-4.556-5.396-9.738-12.624-15.477-21.312-11.477-17.375-25.056-40.505-38.152-64.67-13.096-24.164-25.682-49.317-35.078-70.707-4.698-10.694-8.599-20.437-11.389-28.779-2.79-8.342-4.621-14.953-4.621-21.258v-6.199l5.793-2.209c14.517-5.538,37.515-13.98,59.12-23.682,21.603-9.702,41.944-21.402,49.31-29.832l6.777-7.755ZM233,72.242c-12.288,10.561-30.065,19.479-48.713,27.853-19.6,8.803-38.986,16.077-53.34,21.506.608,2.68,1.504,6.005,2.744,9.713,2.523,7.542,6.247,16.888,10.8,27.25,9.103,20.724,21.517,45.56,34.421,69.37,12.904,23.809,26.325,46.638,37.348,63.325,5.511,8.344,10.454,15.172,14.21,19.622,1.073,1.27,1.707,1.816,2.53,2.654.823-.838,1.457-1.384,2.53-2.654,3.756-4.45,8.699-11.278,14.21-19.622,11.023-16.687,24.444-39.516,37.348-63.326s25.318-48.645,34.422-69.369c4.552-10.362,8.276-19.708,10.799-27.25,1.074-3.191,1.989-6.432,2.744-9.713-14.354-5.429-33.74-12.703-53.34-21.506-18.648-8.374-36.425-17.292-48.713-27.853h0ZM176.104,376.24l-14.208,11.05s9.676,12.468,22.915,25.01c13.238,12.543,29.456,26.465,48.189,26.465s34.95-13.922,48.19-26.465c13.238-12.542,22.914-25.01,22.914-25.01l-14.208-11.05s-8.991,11.534-21.085,22.992c-12.095,11.458-27.878,21.533-35.811,21.533s-23.716-10.075-35.81-21.533c-12.095-11.458-21.086-22.992-21.086-22.992Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/armorPenetration.svg b/static/icons/armorPenetration.svg
new file mode 100644
index 00000000..328704d8
--- /dev/null
+++ b/static/icons/armorPenetration.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 480 480">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M203.7,2.2l-17.1,78.3c16.9-6,35.1-9.3,54-9.4L203.7,2.2ZM433,75.1l-133.3,57.1c-3.8,39.7,34.4,73.8,69.1,72.9l64.2-130h0ZM242.1,89.7c-32.5,0-62.6,10.4-87,28.2l25.4,4.4h5.2l2.4,5.6c23.2,53-17.3,112.8-68.4,118.4l-5,.6-3.2-3.9-17-20.4c-.5,5.1-.8,10.3-.8,15.5,0,82,66.3,148.3,148.3,148.3s8.5-.2,12.6-.5l-33.8-26.5-4-3.1.4-5c3.7-43.3,44.8-80.4,90.1-80.7,10.5,0,21.1,1.9,31.6,6.1l4.7,1.9,1,5,10.1,50.8c22.1-25.9,35.4-59.5,35.4-96.3s-1-19.5-2.8-28.8l-4.5,9-2.2,4.5-5,.6c-50.9,6.4-104.3-42.3-94-99.3l1.9-5,3.6-2,24-10.3c-20.7-11-44.3-17.2-69.3-17.2h0ZM29.8,115.3l92.7,111.5c34-7.1,63.1-49.2,50.2-86.9L29.8,115.3h0ZM75.1,237.4L.3,280.2l85.4,16.2c-6.8-18.2-10.6-37.9-10.6-58.4s0-.4,0-.6h0ZM408.6,249.9c-1.4,20.2-6.5,39.9-15,58.2l86.1-7.9-71.1-50.3h0ZM307.5,289.4c-33.8.8-65.3,28.3-70.7,58.5l120.6,94.8-29.9-150.3c-6.7-2.1-13.4-3.2-20.1-3h0ZM162.3,384.7l8.6,93.2,52.2-73.9c-21.3-2.4-42-8.9-60.8-19.2h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/armory.svg b/static/icons/armory.svg
new file mode 100644
index 00000000..69b46066
--- /dev/null
+++ b/static/icons/armory.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 422.55 447.641">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M280.685,0l-102.848,205.699h13.711l13.364-13.363,6.363-6.364,19.727,19.727h70.273L376.222,25.826c-8.11-4.986-23.97-11.715-41.314-16.445-19.05-5.196-39.628-8.654-54.223-9.381ZM141.48.021c-14.576.771-34.953,4.21-53.838,9.36-17.344,4.73-33.204,11.46-41.314,16.445l74.947,179.873h36.44l38.722-77.445L141.48.021ZM170.73,22.584l36.25,84.584,41.984-83.971c-26.948,5.752-51.079,5.561-78.234-.613h0ZM43.691,66.298L0,131.838l65.88,39.529,15.24-15.24-37.429-89.829ZM378.859,66.298l-37.43,89.829,15.24,15.24,65.881-39.53-43.691-65.539ZM211.275,211.425l-20.42,20.42,20.42,30.63,20.42-30.63-20.42-20.42ZM108.275,223.7v30h75.518l-16.098-24.147,5.853-5.853h-65.273ZM249.002,223.7l5.853,5.853-16.098,24.147h75.518v-30h-65.273ZM119.877,271.7l-26.045,165.24c114.22,14.268,120.666,14.268,234.886,0l-26.045-165.24h-75.916l-15.482,23.222-15.482-23.223h-75.916Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/brawlers.svg b/static/icons/brawlers.svg
new file mode 100644
index 00000000..a3010908
--- /dev/null
+++ b/static/icons/brawlers.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476 476">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M237.9.5c-13.4,0-26.1,7.7-35.9,21.8-9.9,14.1-16.3,34.3-16.3,56.8s6.5,42.7,16.3,56.7c9.9,14.1,22.5,21.8,35.9,21.8s26-7.7,35.9-21.8c9.9-14.1,16.4-34.2,16.4-56.7s-6.5-42.7-16.4-56.8C263.9,8.2,251.3.5,237.9.5h0ZM87.6,43.5c-20.3.6-24,13.9-31.8,29C32.6,117.9.3,237.3.3,237.3l160.5-5.4,29.1,137.6-22.8,106h149.1l-22.3-106,24.2-137.5,157.5,5.3s-32.3-119.4-55.6-164.8c-7.8-15.1-11.5-28.5-31.8-29-17.9,0-32.4,15.6-32.4,34.7s14.5,34.7,32.4,34.7,7.3-.9,10.6-2.1l7.9,74.4-116.9-40.1c-.3.4-.6.9-.8,1.3-12.4,17.7-30.6,29.7-51.2,29.7s-38.8-12-51.2-29.7c-.3-.4-.5-.8-.8-1.2l-116.8,40,7.9-74.4c3.3,1.2,6.9,2.1,10.6,2.1,17.9,0,32.4-15.6,32.4-34.7s-14.5-34.7-32.4-34.7h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/chevron.svg b/static/icons/chevron.svg
new file mode 100644
index 00000000..716e9f17
--- /dev/null
+++ b/static/icons/chevron.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 402.9 258.6">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M398.2,68.7l-185.5,185.2c-6.2,6.2-16.2,6.3-22.4,0,0,0,0,0,0,0L4.7,68.7c-6.2-6.2-6.2-16.5,0-22.8L46.2,4.7c6.2-6.2,16.2-6.3,22.4,0,0,0,0,0,0,0l132.8,132.8L334.2,4.7c6.2-6.2,16.2-6.3,22.4,0,0,0,0,0,0,0l41.5,41.2c6.2,6.2,6.2,16.5,0,22.8"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/cog.svg b/static/icons/cog.svg
new file mode 100644
index 00000000..c4067c6b
--- /dev/null
+++ b/static/icons/cog.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<path fill="#000" d="M14.59 9.535c-0.839-1.454-0.335-3.317 1.127-4.164l-1.572-2.723c-0.449 0.263-0.972 0.414-1.529 0.414-1.68 0-3.042-1.371-3.042-3.062h-3.145c0.004 0.522-0.126 1.051-0.406 1.535-0.839 1.454-2.706 1.948-4.17 1.106l-1.572 2.723c0.453 0.257 0.845 0.634 1.123 1.117 0.838 1.452 0.336 3.311-1.12 4.16l1.572 2.723c0.448-0.261 0.967-0.41 1.522-0.41 1.675 0 3.033 1.362 3.042 3.046h3.145c-0.001-0.517 0.129-1.040 0.406-1.519 0.838-1.452 2.7-1.947 4.163-1.11l1.572-2.723c-0.45-0.257-0.839-0.633-1.116-1.113zM8 11.24c-1.789 0-3.24-1.45-3.24-3.24s1.45-3.24 3.24-3.24c1.789 0 3.24 1.45 3.24 3.24s-1.45 3.24-3.24 3.24z"></path>
+</svg>
diff --git a/static/icons/crystal.svg b/static/icons/crystal.svg
new file mode 100644
index 00000000..b089c478
--- /dev/null
+++ b/static/icons/crystal.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 335.253 469.345">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M166.5.002l-53.875,59.562v90.063l-34.75-60.188-35.563-17.594-9.344,43.53,48.376,83.783-19.97-5.345-28.75,10.5,19.658,23.5,30.28,8.125-59.155,15.844L0,279.752l34.25,12.498,66.875-17.937-27.875,48.28,5.562,62.72,33.813-15.72v33.126l46.812,66.626,46.78-66.625v-72.81l21.626,68.092,35.875,27.344,13.564-43.03-32.688-102.97,42.875,11.5,26.876-13.78-17.78-20.22-64.595-17.312-.092-.25,82.25-22.03,21.125-24.064-31.97-16.406-73.656,19.75,39-67.594-3.562-55.25-58.844,18.97v-33.097L166.504,0l-.004.002ZM160.78,109.564l22.438,115.03,39.876,12.032-39.875,12.032-22.436,115.03-22.375-114.53-41.595-12.533,41.594-12.53,22.374-114.532h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/down-dynamic.svg b/static/icons/down-dynamic.svg
deleted file mode 100644
index 0dadbfe9..00000000
--- a/static/icons/down-dynamic.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="448" height="448">
-  <path fill="currentColor"
-    d="m420.75 202-185.5 185.25a15.844 15.844 0 0 1-22.5 0L27.25 202c-6.25-6.25-6.25-16.5 0-22.75L68.75 138a15.844 15.844 0 0 1 22.5 0L224 270.75 356.75 138a15.844 15.844 0 0 1 22.5 0l41.5 41.25c6.25 6.25 6.25 16.5 0 22.75" />
-</svg>
\ No newline at end of file
diff --git a/static/icons/down.svg b/static/icons/down.svg
deleted file mode 100644
index 1644ff69..00000000
--- a/static/icons/down.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="448" height="448">
-  <path fill="#000"
-    d="m420.75 202-185.5 185.25a15.844 15.844 0 0 1-22.5 0L27.25 202c-6.25-6.25-6.25-16.5 0-22.75L68.75 138a15.844 15.844 0 0 1 22.5 0L224 270.75 356.75 138a15.844 15.844 0 0 1 22.5 0l41.5 41.25c6.25 6.25 6.25 16.5 0 22.75" />
-</svg>
\ No newline at end of file
diff --git a/static/icons/elements/_all-elements.svg b/static/icons/elements/_all-elements.svg
new file mode 100644
index 00000000..138ae5a3
--- /dev/null
+++ b/static/icons/elements/_all-elements.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476.626 453.502">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M238.155.002l-42.905,111.156-118.877,36.156,106.53-4.22-36.436,94.407,102.719-148.187,50.22,64.406L238.156,0v.002ZM288.561,63.689l36.376,102.28-102.344-6.75,172.063,53.876-46.5,67.126,128.47-104.28-116.94-7.69-71.124-104.56v-.002ZM165.094,162.659L0,173.501l87.936,71.375-.375,127.125,27.75-104.907,82.345,66.845-109.281-143.375,76.718-27.906h0ZM236.25,181.627c-22.404,0-44.817,25.943-67.22,77.875,43.462,77.53,88.133,86.365,134.438,0-22.403-51.93-44.816-77.875-67.22-77.875h.002ZM236.655,197.314c11.05,8.62,19,30.54,19,56.438s-7.95,47.818-19,56.437c-11.05-8.62-19-30.54-19-56.438s7.95-47.818,19-56.437h0ZM319.185,207.908l5.19,180.22-78.595-22.064,140.47,87.438-30.408-111.313,73.563-103.47-82.875,69.376-27.344-100.186h-.001ZM131.97,292.094l-43.594,159.595,98.906-61.53,120.656,39.436-90.5-58.217,87.094-54.188-171.22,56.53-1.343-81.624v-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/elements/all-elements.svg b/static/icons/elements/all-elements.svg
new file mode 100644
index 00000000..fe825120
--- /dev/null
+++ b/static/icons/elements/all-elements.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 470.197 470.199">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M235.099,0c-57.656,0-110.49,20.826-151.41,55.34l-.02.018c-14.922,11.324-27.811,25.103-38.114,40.748C16.93,135.054,0,183.116,0,235.1c0,60.03,22.573,114.835,59.67,156.406l-.428.428c2.47,2.472,4.99,4.866,7.545,7.2,42.715,43.82,102.358,71.065,168.31,71.065,129.73,0,235.1-105.367,235.1-235.098S364.827.001,235.097.001h.002ZM253.656,19.485c110.923,9.397,197.856,102.235,197.856,215.615,0,93.92-59.656,173.746-143.185,203.725,21.783-10.06,42.125-23.996,59.99-41.86,83.66-83.66,81.477-221.553-4.095-308.117-27.37-34.46-66.12-59.47-110.566-69.363ZM182.714,40.729c50.418,0,94.77,25.548,120.845,64.426-23.568-22.81-55.268-36.417-87.088-37.588-1.74-.064-3.482-.09-5.222-.08-26.108.163-51.995,8.817-73.223,27.744-37.01,33-47.4,93.67-11.256,132.697,24.97,26.964,70.172,34.654,98.377,6.775,9.363-9.253,15.098-21.745,16.107-34.748,1.01-13.002-3.07-26.867-13.68-36.925l-.002-.002c-6.717-6.365-15.495-10.193-24.725-10.723-9.23-.53-19.322,2.714-26.187,10.797-4.143,4.851-6.451,11.003-6.52,17.382-.087,6.48,2.615,13.847,8.807,18.47l.01.008.008.006c3.53,2.623,7.546,3.958,12.13,3.813,4.585-.147,10.325-2.614,13.293-7.69v-.003c1.62-2.77,2.21-5.36,1.828-8.705-.383-3.344-2.986-8.217-7.56-9.988-2.477-.96-3.87-1.053-6.464-.467-.617.14-1.33.36-2.078.7.265-.494.487-1.06.797-1.427,2.8-3.297,6.35-4.495,10.865-4.236,4.515.26,9.583,2.45,12.94,5.63,6.232,5.91,8.547,13.58,7.9,21.913-.647,8.334-4.617,16.978-10.607,22.9-19.7,19.47-52.966,13.852-71.52-6.183-28.257-30.51-19.83-79.463,9.98-106.043,43.082-38.41,110.765-25.763,147.365,17.128,16.63,19.486,26.923,44.188,29.785,69.752l.168-.02c-5.076,75.787-67.978,135.512-145.07,135.512-80.42,0-145.414-64.99-145.414-145.412,0-29.5,8.753-56.917,23.796-79.818,9.88-13.331,21.254-25.487,33.9-36.23,24.37-18.436,54.745-29.366,87.718-29.366h-.003ZM406.454,203.637c13.955,63.703-3.07,131.83-51.354,180.113-74.77,74.77-197.125,74.596-276.945.438-33.938-35.717-55.775-83.033-59.03-135.432,17.826,89.673,96.938,157.267,191.847,157.267,108.034,0,195.612-87.576,195.612-195.61,0-2.27-.053-4.526-.13-6.776h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/elements/earth.svg b/static/icons/elements/earth.svg
index 66cb6ef7..1b89c4bd 100644
--- a/static/icons/elements/earth.svg
+++ b/static/icons/elements/earth.svg
@@ -1,7 +1,17 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="668" height="640" viewBox="0 0 668 640">
-<g id="icomoon-ignore">
-</g>
-<path fill="#c68533" d="M667.219 465.608c-8.671 19.993-71.539 159.699-141.152 170.538-185.472 25.532-526.067-79.729-526.067-79.729v0 0l0.482-0.722c0.241-0.482 0.722-1.204 1.204-1.927l1.686-3.131c0.241-0.241 0.241-0.482 0.482-0.722l8.431-14.693 296.274-508.965c0 0 1.927-2.649 3.373-4.577 0 0 0 0 0 0 0.241-0.482 0.722-0.722 0.964-1.204s0.723-0.723 0.964-1.204c0.723-0.964 1.686-1.686 2.649-2.649 1.204-1.204 2.409-2.168 3.613-3.131 7.226-6.262 14.693-13.489 18.306-13.489 6.262 0 23.846 16.861 30.591 25.773 31.072 41.43 276.522 404.185 297.719 435.258 0.964 1.204 1.204 3.131 0.482 4.577z"></path>
-<path fill="#7f5322" d="M268.574 438.148c-179.933 0.241-208.114 61.904-268.574 118.269 0 0 0.241-0.241 0.482-0.722s0.722-1.204 1.204-1.927c0.482-0.722 1.204-1.927 1.686-3.131 0.241-0.241 0.241-0.482 0.482-0.722l2.168-3.613c1.686-3.131 3.854-6.744 6.504-11.080l296.274-508.965c0 0 1.927-2.649 3.373-4.577 0 0 0 0 0 0 0.723-0.722 1.204-1.445 1.927-2.168 0.722-0.964 1.686-1.686 2.649-2.649 1.204-1.204 2.409-2.168 3.613-3.131 0 0 0 0 0 0 1.445 0 26.496 3.372 70.094 114.174 59.977 153.677 71.539 309.763-121.882 310.244z"></path>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 668 668">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #7f5322;
+      }
+
+      .st1 {
+        fill: #c68533;
+      }
+    </style>
+  </defs>
+  <path class="st1" d="M667.219,479.608c-8.671,19.993-71.539,159.699-141.152,170.538C340.595,675.678,0,570.417,0,570.417h0l.482-.722c.241-.482.722-1.204,1.204-1.927l1.686-3.131c.241-.241.241-.482.482-.722l8.431-14.693L308.559,40.257s1.927-2.649,3.373-4.577h0c.241-.482.722-.722.964-1.204s.723-.723.964-1.204c.723-.964,1.686-1.686,2.649-2.649,1.204-1.204,2.409-2.168,3.613-3.131,7.226-6.262,14.693-13.489,18.306-13.489,6.262,0,23.846,16.861,30.591,25.773,31.072,41.43,276.522,404.185,297.719,435.258.964,1.204,1.204,3.131.482,4.577v-.003Z"/>
+  <path class="st0" d="M268.574,452.148c-179.933.241-208.114,61.904-268.574,118.269,0,0,.241-.241.482-.722s.722-1.204,1.204-1.927c.482-.722,1.204-1.927,1.686-3.131.241-.241.241-.482.482-.722l2.168-3.613c1.686-3.131,3.854-6.744,6.504-11.08L308.8,40.257s1.927-2.649,3.373-4.577h0c.723-.722,1.204-1.445,1.927-2.168.722-.964,1.686-1.686,2.649-2.649,1.204-1.204,2.409-2.168,3.613-3.131h0c1.445,0,26.496,3.372,70.094,114.174,59.977,153.677,71.539,309.763-121.882,310.244v-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/elements/fire.svg b/static/icons/elements/fire.svg
index d0b66be0..a7ed1d52 100644
--- a/static/icons/elements/fire.svg
+++ b/static/icons/elements/fire.svg
@@ -1,7 +1,17 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="461" height="640" viewBox="0 0 461 640">
-<g id="icomoon-ignore">
-</g>
-<path fill="#f45f31" d="M115.526 0s143.724 146.456 2.084 304.28l-3.959-8.844s-23.36-42.83-56.791-66.213c0 0 6.529 48.201-21.438 82.627s-69.037 158.981 13.266 253.278c0 0 54.429 67.51 142.567 74.247 85.499 6.529 174.469-39.126 211.952-84.92 0 0 48.989-54.591 55.564-124.717 8.798-92.745-12.733-118.304-12.733-118.304-11.414 25.652-29.055 47.044-48.201 64.454-0.092 0 23.059-298.122-282.309-375.887z"></path>
-<path fill="#f4a031" d="M184.749 338.058s46.951 66.815-19.007 119.647l-0.972-3.728s-6.39-18.359-18.012-29.703c0 0-0.556 19.354-13.891 31.046s-37.459 57.879-11.252 100.362c0 0 16.97 30.097 51.165 38.431 33.153 8.126 71.075-4.005 88.786-19.563 0 0 23.151-17.989 29.958-45.377 8.913-36.001 2.686-47.299 2.686-47.299-6.164 8.949-13.881 16.358-22.829 21.99l-0.322 0.189s28.476-115.596-86.309-165.996z"></path>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 640">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #f45f31;
+      }
+
+      .st1 {
+        fill: #f4a031;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M205.026,0s143.724,146.456,2.084,304.28l-3.959-8.844s-23.36-42.83-56.791-66.213c0,0,6.529,48.201-21.438,82.627s-69.037,158.981,13.266,253.278c0,0,54.429,67.51,142.567,74.247,85.499,6.529,174.469-39.126,211.952-84.92,0,0,48.989-54.591,55.564-124.717,8.798-92.745-12.733-118.304-12.733-118.304-11.414,25.652-29.055,47.044-48.201,64.454-.092,0,23.059-298.122-282.309-375.887h-.002Z"/>
+  <path class="st1" d="M274.249,338.058s46.951,66.815-19.007,119.647l-.972-3.728s-6.39-18.359-18.012-29.703c0,0-.556,19.354-13.891,31.046s-37.459,57.879-11.252,100.362c0,0,16.97,30.097,51.165,38.431,33.153,8.126,71.075-4.005,88.786-19.563,0,0,23.151-17.989,29.958-45.377,8.913-36.001,2.686-47.299,2.686-47.299-6.164,8.949-13.881,16.358-22.829,21.99l-.322.189s28.476-115.596-86.309-165.996h-.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/elements/frost.svg b/static/icons/elements/frost.svg
index 74ae243d..58601aa4 100644
--- a/static/icons/elements/frost.svg
+++ b/static/icons/elements/frost.svg
@@ -1,7 +1,17 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="574" height="640" viewBox="0 0 574 640">
-<g id="icomoon-ignore">
-</g>
-<path fill="#ade1e5" d="M573.343 38.223l-91.595 174.334-106.045 426.511c0 0.699-0.466 1.166-1.166 1.166s-1.166-0.466-1.166-1.166l-54.304-297.392-68.754-114.202c-0.699-1.166-2.331-1.631-3.496-0.933-0.233 0.233-0.699 0.466-0.933 0.933l-35.193 55.237-46.147 144.268c-0.466 1.166-1.864 1.631-3.030 1.166-0.466-0.233-0.933-0.699-1.166-1.166l-83.671-279.213-71.085-72.717c-13.052-13.518-0.933-34.261 16.314-34.027 37.291 0.233 86.234 10.022 124.458 20.976 70.386 20.044 161.049-43.351 262.899-30.532 99.752 12.819 164.079 6.759 164.079 6.759z"></path>
-<path fill="#eaffff" d="M573.343 38.223l-124.457 151.726c-3.496 4.428-5.827 9.556-7.225 14.916l-58.499 243.321c-0.699 3.030-3.729 4.661-6.526 3.962-2.098-0.466-3.729-2.331-4.195-4.428l-28.9-156.388c-0.699-4.195-2.564-8.391-4.894-11.886l-79.709-111.639c-1.631-2.331-5.128-3.030-7.458-1.398l-54.771 36.824c-5.127 3.496-8.856 8.391-10.954 14.45l-21.675 67.823c-0.933 2.797-3.962 4.661-6.759 3.729-1.864-0.466-3.263-1.864-3.729-3.729l-44.516-149.162c-2.331-7.691-7.225-13.984-13.984-18.179l-95.091-55.47c-0.233-2.331 0-4.661 0.699-6.759 1.398-5.361 5.128-10.022 10.255-12.352 15.149-7.924 81.107-20.743 159.651-5.827 48.477 9.323 170.371-48.944 236.796-35.892 83.671 16.547 139.141 24.938 161.049 28.201 3.496 0.466 5.827 3.729 5.361 7.225-0.233 0.233-0.233 0.699-0.466 0.932z"></path>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 640">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #eaffff;
+      }
+
+      .st1 {
+        fill: #ade1e5;
+      }
+    </style>
+  </defs>
+  <path class="st1" d="M606.343,38.223l-91.595,174.334-106.045,426.511c0,.699-.466,1.166-1.166,1.166s-1.166-.466-1.166-1.166l-54.304-297.392-68.754-114.202c-.699-1.166-2.331-1.631-3.496-.933-.233.233-.699.466-.933.933l-35.193,55.237-46.147,144.268c-.466,1.166-1.864,1.631-3.03,1.166-.466-.233-.933-.699-1.166-1.166L109.677,147.766,38.592,75.049c-13.052-13.518-.933-34.261,16.314-34.027,37.291.233,86.234,10.022,124.458,20.976,70.386,20.044,161.049-43.351,262.899-30.532,99.752,12.819,164.079,6.759,164.079,6.759v-.002Z"/>
+  <path class="st0" d="M606.343,38.223l-124.457,151.726c-3.496,4.428-5.827,9.556-7.225,14.916l-58.499,243.321c-.699,3.03-3.729,4.661-6.526,3.962-2.098-.466-3.729-2.331-4.195-4.428l-28.9-156.388c-.699-4.195-2.564-8.391-4.894-11.886l-79.709-111.639c-1.631-2.331-5.128-3.03-7.458-1.398l-54.771,36.824c-5.127,3.496-8.856,8.391-10.954,14.45l-21.675,67.823c-.933,2.797-3.962,4.661-6.759,3.729-1.864-.466-3.263-1.864-3.729-3.729l-44.516-149.162c-2.331-7.691-7.225-13.984-13.984-18.179L33.001,62.695c-.233-2.331,0-4.661.699-6.759,1.398-5.361,5.128-10.022,10.255-12.352,15.149-7.924,81.107-20.743,159.651-5.827C252.083,47.08,373.977-11.187,440.402,1.865c83.671,16.547,139.141,24.938,161.049,28.201,3.496.466,5.827,3.729,5.361,7.225-.233.233-.233.699-.466.932h-.003Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/elements/lightning.svg b/static/icons/elements/lightning.svg
index 7c9c5115..d9dd8abc 100644
--- a/static/icons/elements/lightning.svg
+++ b/static/icons/elements/lightning.svg
@@ -1,7 +1,17 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="434" height="640" viewBox="0 0 434 640">
-<g id="icomoon-ignore">
-</g>
-<path fill="#eac303" d="M306.207 12.874c0 0-239.311 274.023-232.414 274.023l148.276 5.058c7.586 0 16.552 21.609 11.724 27.126l-176.552 320 130.575-336.092-187.816 0.46 132.874-303.448h165.518c4.827-0.23 8.736 3.448 8.966 8.046 0 1.609-0.23 3.218-1.149 4.827z"></path>
-<path fill="#fced60" d="M354.023 0l-79.311 186.667h158.851l-376.322 453.333 174.713-336.552h-188.966l132.184-303.448z"></path>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 640">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fced60;
+      }
+
+      .st1 {
+        fill: #eac303;
+      }
+    </style>
+  </defs>
+  <path class="st1" d="M409.207,12.874s-239.311,274.023-232.414,274.023l148.276,5.058c7.586,0,16.552,21.609,11.724,27.126l-176.552,320,130.575-336.092-187.816.46L235.874.001h165.518c4.827-.23,8.736,3.448,8.966,8.046,0,1.609-.23,3.218-1.149,4.827h-.002Z"/>
+  <path class="st0" d="M457.023,0l-79.311,186.667h158.851l-376.322,453.333,174.713-336.552h-188.966L278.172,0h178.851Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/elements/nature.svg b/static/icons/elements/nature.svg
index bc1b6690..d843b6ae 100644
--- a/static/icons/elements/nature.svg
+++ b/static/icons/elements/nature.svg
@@ -1,7 +1,17 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="536" height="640" viewBox="0 0 536 640">
-<g id="icomoon-ignore">
-</g>
-<path fill="#a0ce3e" d="M44.993 523.156c-61.062-147.604-8.494-298.192 87.461-383.587s339.283-136.586 399.656-139.569c1.836 0 3.443 1.378 3.443 3.214 0 1.147-0.459 2.296-1.607 2.984-65.194 39.484-118.451 162.754-130.846 312.195-17.676 213.946-273.63 218.307-301.176 217.848-1.378 0-2.754 0.918-3.214 2.296-8.264 29.383 2.984 77.131 4.591 92.511 1.607 14.462-39.713 9.412-44.534-1.836-2.525-6.657-13.773-105.825-13.773-106.054z"></path>
-<path fill="#8bb737" d="M534.175 3.214c2.296-0.689 0.229-3.214-1.836-3.214-269.728 0.229-664.792 191.679-488.723 521.32 0.918 1.836 1.377 2.066 1.377 2.066-21.808-336.298 410.445-496.298 489.183-520.172z"></path>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 640">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #a0ce3e;
+      }
+
+      .st1 {
+        fill: #8bb737;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M96.993,523.156c-61.062-147.604-8.494-298.192,87.461-383.587C280.409,54.174,523.737,2.983,584.11,0c1.836,0,3.443,1.378,3.443,3.214,0,1.147-.459,2.296-1.607,2.984-65.194,39.484-118.451,162.754-130.846,312.195-17.676,213.946-273.63,218.307-301.176,217.848-1.378,0-2.754.918-3.214,2.296-8.264,29.383,2.984,77.131,4.591,92.511,1.607,14.462-39.713,9.412-44.534-1.836-2.525-6.657-13.773-105.825-13.773-106.054v-.002Z"/>
+  <path class="st1" d="M586.175,3.214c2.296-.689.229-3.214-1.836-3.214C314.611.229-80.453,191.679,95.616,521.32c.918,1.836,1.377,2.066,1.377,2.066C75.185,187.088,507.438,27.088,586.176,3.214h-.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/endGame.svg b/static/icons/endGame.svg
new file mode 100644
index 00000000..571ddbdf
--- /dev/null
+++ b/static/icons/endGame.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 450.584 480.223">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M224.141.008c-23.24.42-47.45,10.39-67.124,31.218,54.09-11.145,69.053,9.38,78.844,43.22,16.83,58.176-66.19,70.523-60.156-10.53-25.37,15.966-34.08,52.878,0,85.28,22.675,21.555,13.393,52.563-13.406,52.563-44.735.186-107.775-75.315-59.594-139.594-35.413,13.593-59.442,25.662-67.72,59.593-7.1-29.47,6.47-55.563,31.532-68.344-101.978,7.38-74.16,112.918-.594,134.31,65.69,19.1,4.9,108.815-49.062,29.782-5.833,112.267,64.145,131.99,136.094,181.063,31.776,21.673,46.344,34.713,46.344,55.25,0,35.486,52.656,35.953,52.656-3.156,0-21.18,18.167-34.655,53.406-56.783,57.705-36.23,102.22-91.155,102.22-130.218,0-69.113-42.904-90.754-107.158-118.658,53.15,59.41-40.205,83.995-57.718,42.282-15.19-36.18,6.475-59.857,33.656-61.406,69.004-3.936,92.73-81.274,43.03-116.844,11,20.999,5.597,43.889-12.84,60.129C298.083,25.223,263.711.319,226.394.008c-.75-.01-1.5-.011-2.25,0h-.003ZM417.736,48.32c-69.183,65.477,18.182,64.61-2,159.625,84.92-109.75-14.143-112.042,2-159.625ZM277.206,225.383c1.255-.01,2.5.026,3.75.093,3.396.185,6.76.636,10.06,1.376,26.422,5.92,48.41,29.86,49.5,64.656,1.15,36.58-25.886,65.358-52.06,89.157-13.09,11.898-26.29,22.706-36.47,32.374s-16.868,18.497-18.25,23.656l-9.03,33.688-9-33.688c-1.71-6.376-8.278-15.138-18.158-24.688s-22.696-19.988-35.5-31.5c-25.607-23.023-52.243-51-53.437-88.406-1.135-35.56,21.576-59.654,48.594-65.187,23.2-4.753,49.572,3.38,67.47,24.624,14.32-17.327,33.69-26.03,52.53-26.156h.001ZM257.142,291.07c-11.997.282-24.43,6.9-32.5,20.875-19.384-33.576-68.84-24.852-67.56,15.28,1.333,41.796,61.125,66.135,67.56,90.158,5.894-21.984,68.665-50.103,67.408-90.157-.736-23.43-17.37-36.567-34.907-36.155h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/experience.svg b/static/icons/experience.svg
new file mode 100644
index 00000000..7eff689d
--- /dev/null
+++ b/static/icons/experience.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 463.092 463.093">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M232.31,0C104.628,0,0,104.628,0,232.313s104.627,230.78,232.31,230.78,230.782-103.095,230.782-230.78S359.996,0,232.312,0h-.002ZM231.25,82l117.374,117.97-23.938,25.093-65.406-37.938v172.47c79.295-13.13,139.78-81.987,139.78-165,0-39.265-13.54-75.368-36.186-103.907,37.702,35.365,61.22,85.81,61.22,141.625.336,105.581-84.983,191.444-190.564,191.78-.406.001-.813.001-1.219,0-106.398,0-193.31-85.385-193.31-191.78,0-55.123,23.342-105.018,60.624-140.313-22.028,28.33-35.156,63.928-35.156,102.594,0,82.46,59.645,150.973,138.156,164.75v-168.72l-62.5,35.626-25.094-26.28,116.219-117.97Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/1h.svg b/static/icons/h1.svg
similarity index 100%
rename from static/icons/1h.svg
rename to static/icons/h1.svg
diff --git a/static/icons/1h1h.svg b/static/icons/h1h1.svg
similarity index 100%
rename from static/icons/1h1h.svg
rename to static/icons/h1h1.svg
diff --git a/static/icons/2h.svg b/static/icons/h2.svg
similarity index 100%
rename from static/icons/2h.svg
rename to static/icons/h2.svg
diff --git a/static/icons/hitChance.svg b/static/icons/hitChance.svg
new file mode 100644
index 00000000..2bdff671
--- /dev/null
+++ b/static/icons/hitChance.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 462 462">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M286.1,232.9c1.2,8.2-4.6,15.9-12.8,17,0,0,0,0,0,0l-147.2,20.6-21.3,32.5-82.6,11.6,21.3-32.6-24.5,3.4c-.3,0-.6.1-.8.2-.7,0-1.4.1-2.1.1-8.3,0-15.1-6.7-15.2-15,0-7.6,5.6-14,13.1-15,.3,0,.6,0,.9,0l24.5-3.4-29.5-25.5,82.6-11.5,29.4,25.5,147.3-20.6c.7,0,1.4-.1,2.1-.1,7.5,0,13.9,5.5,15,12.9h0ZM249.4,194.4c2.8-4.2,6.5-7.8,10.8-10.3,4.1-2.3,8.7-3.4,13.4-3,4.9.5,9.6,2.2,13.5,5,4.8,3.4,8.8,7.7,11.9,12.6,3.8,5.9,6.6,12.4,8.4,19.1,1.9,7.2,2.8,14.6,2.6,22-.2,6.8-1.3,13.5-3.5,20-1.8,5.6-4.7,10.8-8.5,15.4-3.3,3.9-7.6,6.9-12.4,8.6-4.5,1.5-9.3,1.6-13.8.3-4.7-1.4-8.9-3.8-12.5-7.1-2.1-1.9-4-4-5.7-6.2l-32.3,4.5c2,5.5,4.4,10.8,7.1,16,4.9,9.4,11.2,18,18.7,25.5,6.8,6.9,14.9,12.3,23.9,15.8,8.8,3.4,18.4,4.2,27.6,2.2,10-2.3,19.2-7.5,26.3-14.9,7.9-7.9,14.4-18.3,19.1-30.5,5-13.5,7.9-27.6,8.3-42,.6-15.8-1.2-31.7-5.5-46.9-3.8-14.3-10.1-27.8-18.5-39.9-7.6-10.7-16.4-18.9-25.8-24.4-8.4-5.1-18.1-7.7-28-7.6-9.4.3-18.5,3.3-26.3,8.7-8.2,5.8-15.1,13.2-20.2,21.9-5.4,9.2-9.5,19.1-12,29.5-1.8,7.1-2.9,14.2-3.6,21.5l31.2-4.4c1.4-4,3.2-7.7,5.6-11.2ZM447.7,159.4c-10.9-35.3-27.3-64.8-46.8-87.4-18.6-21.5-39.5-36.3-61.1-44.2-20.2-7.4-40.6-8.7-60-4.2-18.1,4.2-35.2,13.5-50.6,27.6-14.4,13.2-26.1,29.6-35.2,47.8-8.8,18-15.3,37-19.3,56.6-4.1,20-6.1,40.3-5.9,60.7l22.6-3.2c.4-13.6,2.1-27.1,5-40.3,3.3-15,8.7-29.4,16-42.9,7.4-13.4,16.7-25.1,28-34.1,11.9-9.4,24.9-15,38.3-16.6,14.2-1.8,28.8.7,42.9,7.5,14.9,7.1,29.1,18.8,41.5,34.8,12.9,16.6,23.5,37.5,30.7,61.9,7.1,24.2,10,49.5,8.7,74.6-1.3,24-6.4,46.4-14.7,65.7-8,18.6-18.9,33.9-31.8,44.9-12.3,10.5-26.3,16.9-41.5,18.7-14.1,1.5-28.4-.9-41.2-7.1-12.3-5.7-23.8-14.5-34-25.5-10.3-11.3-19-23.9-25.7-37.6-6.1-12.3-11-25.3-14.5-38.6l-22.5,3.1c4.5,19.9,11.2,39.3,20,57.8,8.5,18,19.3,34.9,32.2,50.1,13,15.2,27.8,27.8,43.9,36.8,17.2,9.6,36,15.1,55.7,14.9,21.3-.2,41.4-7,59.5-19.8,19.4-13.7,36-33.9,48.6-59.4,13.2-26.8,21.7-58.8,24-93.6,2.4-36.7-2-73.6-12.9-108.8h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/left.svg b/static/icons/left.svg
deleted file mode 100644
index 6527ba5c..00000000
--- a/static/icons/left.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="336" height="448">
-  <path fill="#000"
-    d="M292.75 75.25 160 208l132.75 132.75a15.844 15.844 0 0 1 0 22.5l-41.5 41.5a15.844 15.844 0 0 1-22.5 0l-185.5-185.5a15.844 15.844 0 0 1 0-22.5l185.5-185.5a15.844 15.844 0 0 1 22.5 0l41.5 41.5a15.844 15.844 0 0 1 0 22.5" />
-</svg>
\ No newline at end of file
diff --git a/static/icons/meat.svg b/static/icons/meat.svg
new file mode 100644
index 00000000..7dfa0334
--- /dev/null
+++ b/static/icons/meat.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 485.028 344.268">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M421.961.007c-4.05-.11-8.044,1.117-11.656,4-1.542,1.23-3.1,2.884-4.47,4.75-22.9,31.22-48.278,57.33-75.186,81-8.76,14.692,10.695,44.406,25.594,44.406,34.144-12.928,69.617-22.516,106.75-26.314,42.628-4.358,17.688-68.134-26.25-45.47C467.043,39.713,443.837.589,421.961.005v.002ZM292.275,10.1c-6.167-.108-12.215,1.172-17.595,4.28-1.556.901-3.03,1.937-4.406,3.095-.038-.056-.09-.13-.126-.186-79.912,66.402-116.334,73.468-158.22,86.844-6.886,2.2-12.27,7.18-16.5,15.5s-6.892,19.843-7.343,33.125c-.9,26.563,6.935,59.927,23.72,89.03,16.72,28.99,43.37,53.946,67.656,67.126,12.143,6.59,23.682,10.167,32.375,10.436,8.694.27,13.915-1.95,17.782-7.375,30.986-43.45,89.343-69.052,156.157-92.25-.005-.006.003-.023,0-.03,2.031-.661,3.989-1.53,5.842-2.594,8.2-4.738,13.535-12.897,16.282-22.125,2.747-9.227,3.22-19.75,2.03-31.25-.953-9.233-3.033-19.127-6.155-29.374-5.916,1.366-11.628,3.157-17.908,5.47,2.835,9.25,4.69,17.978,5.5,25.81,1.007,9.74.403,18.06-1.375,24.033-1.777,5.972-4.412,9.338-7.718,11.25-3.308,1.91-7.543,2.505-13.595,1.06-6.052-1.443-13.55-5.07-21.47-10.81-15.838-11.482-33.334-31.223-47.624-56-14.29-24.78-22.61-49.838-24.624-69.314-1.006-9.738-.403-18.027,1.375-24,1.78-5.973,4.414-9.37,7.72-11.28,1.653-.957,3.52-1.58,5.75-1.782.557-.05,1.147-.067,1.75-.063,1.81.014,3.824.272,6.094.814,6.05,1.444,13.518,5.04,21.437,10.78,8.218,5.957,16.884,14.166,25.314,24.126,5.07-4.055,9.34-8.25,13.406-13.188-8.97-10.46-18.366-19.26-27.75-26.062-9.354-6.78-18.733-11.61-28.094-13.844-2.311-.555-4.661-.931-7.03-1.125-.884-.068-1.77-.11-2.657-.124v-.003ZM300.242,44.288c-.438.024-.86.063-1.28.125-17.327,2.54-14.97,36.035,5.03,74.56,20,38.528,50.52,67.576,67.844,65.032,5.995-.88,9.263-5.687,10.658-12.875-1.67,2.187-3.847,3.484-6.72,3.907-15.316,2.248-42.316-23.093-60-57.156-17.682-34.064-19.254-63.91-3.937-66.157,3.638-.53,7.69.417,12.345,2.782-8.68-6.8-17.353-10.583-23.938-10.218h-.002ZM83.805,227.068c-16.555,1.844-35.304,3.26-57.063,4.376-49.128,2.523-25.555,71.576,30.094,52.22-49.365,29.9,3.86,86.927,26.97,46.75,10.362-18.016,21.88-33.79,34.375-47.814-8.42-9.644-16.078-20.224-22.563-31.47-4.469-7.748-8.415-15.786-11.812-24.06v-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/potion.svg b/static/icons/potion.svg
new file mode 100644
index 00000000..544ff1b3
--- /dev/null
+++ b/static/icons/potion.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 377.55 460">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M323.65,0l-14.5,20.4,49.5,35.1,14.5-20.3L323.65,0ZM266.25,12.3l-14.1,20.7,111.3,76.2,14.1-20.7L266.25,12.3h0ZM258.95,65.7l-69.9,82.8c-10.3-2.1-20.9-3.2-31.8-3.2C70.45,145.3,0,215.8,0,302.6c0,86.4,70.45,157.4,157.25,157.4s157.3-71,157.3-157.4c0-37.8-13.4-72.5-35.6-99.6l51.4-86.9-71.4-50.4ZM266.35,104.7l29.5,19.5-46.5,78c26.1,23.9,42.5,58.2,42.5,96.4,0,72-58.5,130.4-130.6,130.4S30.7,370.6,30.7,298.6s58.55-130.6,130.55-130.6c22.6,0,43.9,5.8,62.5,15.9l42.6-79.2ZM234.85,285.2c-47.3-.7-126.2,58.3-178.3,13.5.1,57.7,47,104.3,104.7,104.3,56.1,0,102-44,104.6-99.5-7-13.2-17.8-18.1-31-18.3ZM223.35,308.5c5.1-.1,9.7,1.5,12.7,5,6.9,7.9,3.2,22.4-8.3,32.4-11.4,10-26.3,11.7-33.2,3.8-6.9-7.9-3.2-22.4,8.2-32.4,6.5-5.6,14-8.6,20.6-8.8h0ZM166.85,357.6c1.2,0,2.4.1,3.7.3,9.9,1.5,17.2,8.2,16.2,15.1-1,7-9.8,11-19.8,10-9.9-2-17.2-8-16.2-15.3.9-6,7.7-10.1,16.1-10.1Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/provocation.svg b/static/icons/provocation.svg
new file mode 100644
index 00000000..b5756386
--- /dev/null
+++ b/static/icons/provocation.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 471 471">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M85.1,37.9v11.8c.9,109.9,50.1,220,147.5,314.1l6.5,6.3,6.5-6.3c96.8-93.9,147-204,147.8-314.1v-11.7c0,0-11.4,2.5-11.4,2.5-80.3,17.7-205.3,17.9-285.5,0l-11.5-2.6h0ZM119,70.4l11.4,2.6c61,13.6,156.7,13.5,217.7,0l11.5-2.5v11.7c-.8,84.9-39.6,169.9-114,242.1l-6.5,6.3-6.5-6.3c-74.9-72.4-113-157.3-113.6-242.1v-11.8c0,0,0,0,0,0ZM340.5,93.4c-60.4,11.2-141.8,11.4-202.2,0,3.6,73.1,36.8,146.2,100.9,210.8,63.8-64.5,97.6-137.8,101.3-210.9h0ZM.2,229.9l103.4,166.3,17.9-51.3,96.2,88.2-103.4-166.3-17.9,51.3L.2,229.9h0ZM470.8,229.9l-96.2,88.2-17.9-51.3-103.4,166.3,96.2-88.2,17.9,51.3,103.4-166.3h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/rewatch.svg b/static/icons/rewatch.svg
new file mode 100644
index 00000000..49b77750
--- /dev/null
+++ b/static/icons/rewatch.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 473.412 473.421">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M235.643.005C163.607.368,92.653,33.539,46.463,95.975c-69.83,94.39-59.125,223.32,19.85,304.993l-37.238,50.332,151.22-22.613-22.616-151.219-43.137,58.308c-44.08-54.382-47.723-133.646-4.16-192.53,30.676-41.466,77.863-63.504,125.758-63.753,16.507-.087,32.924,2.433,48.645,7.467l-6.963-46.55c-23.402-4.768-47.49-5.106-71.017-.997-59.232,7.322-113.994,39.918-148.157,91.215C94.298,64.738,162.422,24.71,234.691,22.884c16.676-.418,33.34,1.207,49.62,4.84l48.608-7.268C301.779,6.55,268.599-.164,235.645.003l-.002.002ZM448.573,22.06l-151.217,22.61,22.614,151.22,41.126-55.588c42.204,54.29,45.092,132.048,2.187,190.043-40.22,54.367-108.82,75.32-170.19,57.566l6.522,43.598c28.597,5.504,58.07,4.454,86.203-3.07,37.448-5.957,73.34-22.05,103.16-47.728-49.196,54.65-122.615,77.514-191.744,64.34l-55.8,8.344c99.03,43.7,218.402,14.77,285.51-75.938,69.13-93.445,59.34-220.743-17.483-302.53l39.114-52.866h-.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/right.svg b/static/icons/right.svg
deleted file mode 100644
index f1cecb7d..00000000
--- a/static/icons/right.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="304" height="448">
-  <path fill="#000"
-    d="m276.75 219.25-185.5 185.5a15.844 15.844 0 0 1-22.5 0l-41.5-41.5a15.844 15.844 0 0 1 0-22.5L160 208 27.25 75.25a15.844 15.844 0 0 1 0-22.5l41.5-41.5a15.844 15.844 0 0 1 22.5 0l185.5 185.5a15.844 15.844 0 0 1 0 22.5" />
-</svg>
\ No newline at end of file
diff --git a/static/icons/shrug.svg b/static/icons/shrug.svg
new file mode 100644
index 00000000..2cf2f0bc
--- /dev/null
+++ b/static/icons/shrug.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 472 461">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M236,0c-11.642,0-22.985,7.432-32.006,21.607-9.02,14.176-14.994,34.64-14.994,57.393s5.973,43.217,14.994,57.393c9.02,14.175,20.364,21.607,32.006,21.607s22.985-7.432,32.006-21.607c9.02-14.176,14.994-34.64,14.994-57.393s-5.973-43.217-14.994-57.393C258.986,7.432,247.642,0,236,0ZM156,131c-32,0-48,144-48,144,0-16-16-64-32-96C60,179-.002,195,0,205v22l60-16s32,128,48,128,48-112,48-112l16,234h128l16-234s32,112,48,112,48-128,48-128l60,16v-22c.027-10-60-26-76-26-16,32-32,80-32,96,0,0-16-144-48-144,0,0-10.902.02-25.727,1.74-2.092,4.725-4.453,9.187-7.082,13.317-11.246,17.673-27.904,29.943-47.191,29.943s-35.944-12.27-47.19-29.943c-2.63-4.13-4.99-8.592-7.083-13.317-14.825-1.72-25.727-1.74-25.727-1.74Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/sound-off.svg b/static/icons/sound-off.svg
new file mode 100644
index 00000000..28dbcca2
--- /dev/null
+++ b/static/icons/sound-off.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 443.564 352">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <g transform="translate(0 65.922)">
+    <path d="M237.73,7.236C219.24,1.976,197.72-.124,176.43.006c-35.46.21-70.26,6.61-89.25,14.86-14.08,43.14-16.33,127.92-6.73,180.52-8.46-4.27-18.34-6.55-28.45-6.56-28.72,0-52,17.91-52,40s23.28,40,52,40,52-17.91,52-40c-6.16-49.18-13.74-115.12-8.22-165.43,37.75-7.73,77.49-17.43,114.68-10.72-4.15,38.29-3.03,82.42,3.38,117.55-8.45-4.26-18.33-6.54-28.44-6.55-28.72,0-52,17.91-52,40s23.28,40,52,40,52-17.91,52-40c-4.62-72.49-18.78-132.77.33-196.44ZM212.91,34.526c-37.91-5.63-78.58,1.39-114.33,9.66.92-5,2.02-9.96,3.27-14.88,19.73-7.72,50.15-13.48,80.04-13.67,11.7-.07,23.32.71,34.18,2.56-1.19,5.2-2.24,10.67-3.16,16.33Z"/>
+    <polygon points="298.512 33.351 273.053 58.81 324.326 110.08 273.054 161.351 298.512 186.809 349.783 135.537 401.054 186.809 426.512 161.351 375.24 110.08 426.512 58.809 401.054 33.351 349.783 84.623 298.512 33.351 298.512 33.351"/>
+  </g>
+</svg>
diff --git a/static/icons/sound-on.svg b/static/icons/sound-on.svg
new file mode 100644
index 00000000..998a3abb
--- /dev/null
+++ b/static/icons/sound-on.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 443.564 352">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M299.564,0c128,64,128,288,0,352,192-64,192-288,0-352ZM251.564,16c64,50.843,64,270.217,0,321.06,128-50.843,128-270.217,0-321.06ZM176.434,65.922c-35.468.215-70.268,6.618-89.253,14.863-14.084,43.136-16.33,127.919-6.736,180.518-8.452-4.265-18.337-6.543-28.445-6.555-28.719,0-52,17.909-52,40s23.281,40,52,40,52-17.909,52-40c-6.166-49.187-13.74-115.12-8.225-165.437,37.756-7.722,77.49-17.422,114.688-10.715-4.152,38.294-3.029,82.424,3.379,117.552-8.452-4.265-18.337-6.543-28.446-6.554-28.719,0-52,17.908-52,40s23.281,40,52,40,52-17.909,52-40c-4.618-72.485-18.78-132.767.33-196.436-18.491-5.267-40.012-7.365-61.293-7.236h.001,0ZM181.89,81.557c11.697-.073,23.313.706,34.174,2.558-1.185,5.199-2.232,10.67-3.156,16.336-37.913-5.64-78.578,1.385-114.332,9.656.926-4.997,2.019-9.961,3.277-14.884,19.722-7.718,50.145-13.48,80.037-13.666h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/__stunned.svg b/static/icons/status-effects/__stunned.svg
new file mode 100644
index 00000000..b2ff45a0
--- /dev/null
+++ b/static/icons/status-effects/__stunned.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 460.114 363.19">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M90.28,100.59l5.6,22.8-15.6,17.6,23.4,1.6,11.9,20.3,9-21.8,22.8-5.1-17.9-15.1,2.1-23.4-19.9,12.4-21.4-9.3ZM345.68,8.86l7.6,15.22-7.9,15.01,16.7-2.8,11.6,12.5,2.9-16.8,15.2-7.37-15.1-7.74-2.2-16.88-12,11.95-16.8-3.09ZM286.28,56.99l-6.9,18.8-18.9,5.1,15.7,12.1-.4,7.9c-22.578,8.609-45.648,18.592-68.4,29.6-.1.033-.2.067-.3.1-59.286,28.788-112.899,62.824-148.86,94.5l-12.28-7.2-1.86-23.8-17.92,15.9-23.3-5.5,9.75,22L0,246.89l23.9-2.5,7.05,8.3c-15.622,19.045-21.126,34.79-15.94,45.6,7.485,15.711,36.98,20.013,82.27,12l-4.2,11.3-21.49,5.8,17.69,13.5-1.2,22.3,18.4-12.5,20.9,8-6.4-21.4,14.1-17.4-22.3-.7-7-10.7c21.812-4.381,46.306-11.292,72.3-20.4l6.9,18.6,14.6-22.9,27.2-.8-8.3-10.2c15.848-6.614,31.771-13.822,47.5-21.5,44.834-21.737,86.814-46.667,120.4-71.5l8.5,18-13.9,23.5,27.1-3.5,17.9,20.5,5.3-26.7,25-10.8-24-13.2-2.4-27.1-20,18.6-17.4-3.9c50.607-38.62,74.964-72.617,65.7-91.7-11.366-23.383-71.234-20.656-153.7,7l-.2-.9,12.4-15.4-19.8-.5-10.6-16.7ZM210.88,139.69c.233-.167.466-.333.7-.5,21.267-10.254,42.842-19.312,63.6-26.7v.2l.6-.4c7.928-2.889,15.714-5.529,23.3-7.9l10.9,4.2-2.1-6.7c51.971-14.654,87.846-14.09,95.4,1.5,7.627,15.643-14.357,44.328-58.4,76.2l-2-10.9,10-10.3-14.4-1.6-6.5-12.9-6.1,13.1-14.4,2.4,10.7,9.8-2.1,14.2,12.5-6.8,9.9,4.8c-24.66,17.565-54.485,34.989-86.1,50.3-14.477,6.992-29.13,13.444-43.6,19.2l4.3-15-25.3,9.7-22.5-15.1,1.6,27-17,13.3c-48.818,12.932-82.052,11.703-89.19-3.3-12.142-25.471,53.154-82.554,146.19-127.8h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/bleeding.svg b/static/icons/status-effects/bleeding.svg
index e24f1fdb..82f8b878 100644
--- a/static/icons/status-effects/bleeding.svg
+++ b/static/icons/status-effects/bleeding.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 713 1024">
-  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
   <defs>
     <style>
       .st0 {
@@ -12,6 +12,6 @@
       }
     </style>
   </defs>
-  <path class="st1" d="M335.8,0s387.8,237,376.4,642.5c-11.4,405.5-392.6,381.1-392.6,381.1C319.6,1023.6,6.6,1007.4,0,683,0,683-12.2,509.4,211.2,335.8c31-24.3,57.1-54.2,77-88.1,33.2-56,66.7-143,47.6-247.7h0Z"/>
-  <path class="st0" d="M335.8,0s384.5,232.6,376.4,644c-5.5,286.4-202.7,357.6-313.7,373.8-135.6,19.9-217.8-68.2-241.4-189.1-17.3-89.6,43.5-237.8,165.9-283.5C512.7,474.4,502,151.1,335.8,0h0Z"/>
+  <path class="st1" d="M491.3,0s387.8,237,376.4,642.5-392.6,381.1-392.6,381.1c0,0-313-16.2-319.6-340.6,0,0-12.2-173.6,211.2-347.2,31-24.3,57.1-54.2,77-88.1C476.9,191.7,510.4,104.7,491.3,0h0Z"/>
+  <path class="st0" d="M491.3,0s384.5,232.6,376.4,644c-5.5,286.4-202.7,357.6-313.7,373.8-135.6,19.9-217.8-68.2-241.4-189.1-17.3-89.6,43.5-237.8,165.9-283.5,189.7-70.8,179-394.1,12.8-545.2h0Z"/>
 </svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/buff.svg b/static/icons/status-effects/buff.svg
new file mode 100644
index 00000000..a03a7f07
--- /dev/null
+++ b/static/icons/status-effects/buff.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 403.4 469.6">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M4.7,400.9l185.5-185.2c6.2-6.2,16.2-6.3,22.4,0,0,0,0,0,0,0l185.5,185.2c6.2,6.2,6.2,16.5,0,22.8l-41.5,41.2c-6.2,6.2-16.2,6.3-22.4,0,0,0,0,0,0,0l-132.8-132.8-132.8,132.8c-6.2,6.2-16.2,6.3-22.4,0,0,0,0,0,0,0l-41.5-41.2c-6.2-6.2-6.2-16.5,0-22.8"/>
+  <path d="M5.2,189.9L190.7,4.7c6.2-6.2,16.2-6.3,22.4,0,0,0,0,0,0,0l185.5,185.2c6.2,6.2,6.2,16.5,0,22.8l-41.5,41.2c-6.2,6.2-16.2,6.3-22.4,0,0,0,0,0,0,0L201.9,121.2,69.2,253.9c-6.2,6.2-16.2,6.3-22.4,0,0,0,0,0,0,0L5.2,212.7c-6.2-6.2-6.2-16.5,0-22.8"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/confused.svg b/static/icons/status-effects/confused.svg
new file mode 100644
index 00000000..06c67f47
--- /dev/null
+++ b/static/icons/status-effects/confused.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 411.458 474.101">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M208.804,0C96.894-.001,18.231,38.287,4.136,80.671h.002c-25.93,77.97,72.846,117.983,216.416,92.307,78.262-14,182.29,16.69,123.08,80.35,151.465-68.768,22.753-120.352-128.742-102.648-88.326,10.322-160.02,11.012-170.92-37.805-7.92-35.467,76.538-71.817,167.17-77.25,89.626-5.373,183.32,37.95,170.533,64.828-17.172,36.097-126.9,7.75-120.308-25.113,2.21-11.017,19.864-15.988,42.05-14.6-30.58-10.615-72.8-11.888-79.427,12.846-4.788,17.872,27.71,42.46,72.418,53.73,54.674,13.782,115.05,5.32,115.05-46.136C411.458,36.28,319.161,0,208.803,0h0Z"/>
+  <path d="M338.286,273.799l-56.64,13.39,38.91-38.91c-18.73-20.82-45.76-37.6-77.88-46.21-12.96-3.48-26.29-5.44-39.71-5.84-1.75-.05-3.49-.07-5.24-.07-53.92.17-99.46,27.14-110.98,70.15-7.39,27.56,1.15,56.59,19.86,81.18,2.06,2.71-.42,8.23-3.51,11.09-51.88,48.18-12.11,89.94,25.12,51.4-16.99,47.31,24.36,66.46,46.72,24.53-2.46,47.79,41.42,54.25,51.97,8.76,12.31,50.24,66.51,34.65,47.31-33.29-1.43-5.05.67-9.28,4.67-10.51,33.49-10.34,58.97-33.09,67.16-63.66,5.56-20.75,2.32-42.26-7.76-62.01ZM149.296,344.759c-22.66-6.07-36.1-29.36-30.03-52.01,5.12-19.12,22.5-31.68,41.42-31.49,3.5.03,7.06.51,10.6,1.45,22.65,6.07,36.1,29.36,30.03,52.02-6.07,22.66-29.36,36.1-52.02,30.03ZM190.626,400.289c-31.33-8.9-.89-41.16,16.97-56.83,8.91,23.33,15.9,66.21-16.97,56.83ZM289.046,357.799c-4.41,16.44-21.31,26.2-37.76,21.8-16.44-4.41-26.2-21.31-21.79-37.75,3.72-13.88,16.33-22.99,30.06-22.86,2.54.03,5.12.37,7.69,1.06,16.45,4.4,26.2,21.31,21.8,37.75Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/debuff.svg b/static/icons/status-effects/debuff.svg
new file mode 100644
index 00000000..1caba6a4
--- /dev/null
+++ b/static/icons/status-effects/debuff.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 403.2 469.575">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M398.55,68.688l-185.5,185.2c-6.2,6.2-16.2,6.3-22.4,0h0L5.15,68.688c-6.2-6.2-6.2-16.5,0-22.8L46.65,4.688c6.2-6.2,16.2-6.3,22.4,0h0l132.8,132.8L334.65,4.688c6.2-6.2,16.2-6.3,22.4,0h0l41.5,41.2c6.2,6.2,6.2,16.5,0,22.8"/>
+  <path d="M398.05,279.688l-185.5,185.2c-6.2,6.2-16.2,6.3-22.4,0h0L4.65,279.688c-6.2-6.2-6.2-16.5,0-22.8l41.5-41.2c6.2-6.2,16.2-6.3,22.4,0h0l132.8,132.7,132.7-132.7c6.2-6.2,16.2-6.3,22.4,0h0l41.6,41.2c6.2,6.2,6.2,16.5,0,22.8"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/dot.svg b/static/icons/status-effects/dot.svg
new file mode 100644
index 00000000..1cfebe0b
--- /dev/null
+++ b/static/icons/status-effects/dot.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 472.677 474.686">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M301.557.006c-.496-.01-.984-.007-1.463.008-1.358.09-2.045.27-3.057.4l-96.077,150.685c1.53,6.565,3.088,13.04,4.778,19.226l-18.027,4.926c-9.073-33.212-15.026-70.992-26.538-94.735-5.757-11.872-12.47-19.702-20.625-23.246-6.714-2.92-15.483-3.28-27.63.6,17.258,50.103,24.184,102.383,33.495,143.826,4.933,21.958,10.617,40.805,18.21,54.317,7.59,13.51,16.324,21.482,29.108,24.625l-4.463,18.148c-18.367-4.515-31.723-17.217-40.94-33.62-4.192-7.46-7.682-15.74-10.726-24.673-30.794,33.74-75.13,70.583-137.602,98.473v135.72h140.437c22.443-42.52,44.626-79.104,66.23-105.74,22.48-27.712,44.393-46.065,68.247-46.47l-.19.006,2.985-.112-28.434-81.853,21.164-7.057-33.67-79.035,68.99,92.844-27.9,7.52,31.3,66.41,149.417-5.558c4.266-5.493,7.614-14.578,8.1-23.91.467-8.97-1.767-17.213-5.073-22.166l-119.5,3.42c.137-8.21-.404-16.456-1.55-24.627l130.184-45.302c2.502-6.403,2.67-15.49-.002-24.108-2.58-8.326-7.588-15.26-12.38-18.79l-130.13,43.943c-3.459-8.192-7.529-16.113-12.177-23.694l108.244-77.542c.024-6.105-2.634-14.563-7.788-21.476-5.365-7.196-12.655-12.406-19.1-14.172l-109.396,79.31c-6.44-5.683-13.267-10.506-20.36-14.316l71.172-111.678c-2.26-4.454-6.892-9.397-13.256-13.218C318.174,2.877,308.989.138,301.557.005h0ZM292.582,336.236c-3.66,51.045-31.82,66.58-31.82,95.014,0,14.116,15.503,26.684,31.82,26.684,15.958,0,32.457-12.494,32.457-27.357,0-29.613-27.877-43.213-32.458-94.34h.001Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/immobilize.svg b/static/icons/status-effects/immobilize.svg
new file mode 100644
index 00000000..f285f5ac
--- /dev/null
+++ b/static/icons/status-effects/immobilize.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 472 437.239">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M0,0v209.947l9.924,30.64c34.506-22.263,65.675-34.64,101.433-30.433L74.293,0H0ZM397.707,0l-37.064,210.154c35.758-4.206,66.927,8.17,101.433,30.434l9.924-30.64V0h-74.293ZM173.145,227.31c5.361,5.193,6.517,15.154,7.12,21.655l21.26,11.031c1.888,5.184-3.41,15.26-8.29,15.977l-12.995-6.743c-.973,6.645-1.787,12.547-4.783,17.797l9.486,4.924c6.546,3.397,14.294,2.037,19.485-1.197,3.128-1.949,5.71-4.43,7.863-7.223,7.377,1.392,15.502,1.969,23.709,1.969s16.332-.577,23.709-1.969c2.154,2.793,4.735,5.274,7.863,7.223,5.191,3.234,12.939,4.594,19.485,1.197l9.486-4.924c-2.996-5.25-3.81-11.152-4.783-17.797l-12.994,6.743c-4.88-.717-10.179-10.793-8.291-15.977l21.26-11.031c.603-6.5,1.759-16.462,7.12-21.654-2.663.092-5.482.912-8.27,1.97l-28.401,14.739c-6.546,3.397-9.895,10.514-10.239,16.62-.11,1.967.01,3.89.287,5.774-5.01.685-10.643,1.086-16.232,1.086s-11.222-.4-16.232-1.086c.276-1.883.397-3.807.287-5.773-.344-6.107-3.693-13.225-10.239-16.621l-28.402-14.739c-2.787-1.058-5.606-1.878-8.27-1.97h0ZM98.713,227.89c-37.724.526-74.546,20.941-96.358,44.897l7.249,19.81c31.68-38.692,77.26-50.786,120.38-39.818-.417-7.09-.23-13.694.319-20.293-10.395-3.33-21.028-4.742-31.59-4.595h0ZM373.287,227.89c-10.562-.146-21.195,1.266-31.59,4.596.55,6.6.736,13.204.319,20.293,43.12-10.968,88.7,1.126,120.38,39.819l7.249-19.81c-21.812-23.957-58.634-44.372-96.358-44.897h0ZM148.096,228.182c-.81,10.885-.266,29.41,2.834,43.607l9.734,3.965c2.586-11.223,2.906-32.67.065-42.97-3.732-2.342-7.926-3.739-12.633-4.602h0ZM323.904,228.182c-4.707.863-8.9,2.26-12.633,4.601-2.84,10.3-2.522,31.748.065,42.97l9.734-3.964c3.1-14.196,3.645-32.722,2.834-43.607h0ZM99.684,266.642c-27.276.344-53.959,12.954-71.176,31.323,1.704,5.264,3.41,10.527,5.113,15.79-6.285,37.74-8.29,77.163-2.838,108.579,1.055,8.222,4.829,15.139,11.516,14.898,10.581-.38,20.631-8.059,30.33-8.7,8.435-.45,14.473,2.946,21.142,5.087,6.67,2.141,13.051,3.436,18.21,2.36,10.989-4.862,15.247-20.824,25.505-24.791,10.459-5.374,23.473,2.55,33.567-.66,6.792-2.094,10.493-5.844,10.933-11.54-4.083-24.287-14.821-46.989-28.312-68.86,8.6-.557,18.822,5.084,27.074,11.04,4.113,7.971,7.819,16.16,10.924,24.613,5.29-5.878,14.188-14.14,10.51-21.804-5.364-10.173-10.077-19.009-16.282-28.32-2.506-3.763-41.568-31.013-61.416-31.075l-2.714-15.396c-6.42-1.613-12.942-2.43-19.446-2.538-.88-.014-1.76-.016-2.64-.006h0ZM372.316,266.642c-.88-.01-1.76-.008-2.64.007-6.504.108-13.026.925-19.446,2.537l-2.714,15.396c-19.848.062-58.91,27.313-61.416,31.074-6.205,9.312-10.918,18.148-16.282,28.32-3.678,7.666,5.22,15.927,10.51,21.805,3.105-8.454,6.81-16.642,10.924-24.613,8.252-5.956,18.474-11.597,27.074-11.039-13.49,21.87-24.229,44.572-28.312,68.86.44,5.695,4.14,9.445,10.933,11.538,10.094,3.21,23.108-4.713,33.567.66,10.258,3.968,14.516,19.93,25.506,24.792,5.158,1.076,11.539-.219,18.209-2.36,6.67-2.14,12.707-5.537,21.142-5.088,9.699.642,19.75,8.321,30.33,8.702,6.687.24,10.46-6.676,11.516-14.899,5.452-31.415,3.447-70.839-2.838-108.578,1.703-5.264,3.41-10.527,5.113-15.791-17.217-18.369-43.9-30.979-71.176-31.322h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/isBlocking.svg b/static/icons/status-effects/isBlocking.svg
index 498d1843..cf629639 100644
--- a/static/icons/status-effects/isBlocking.svg
+++ b/static/icons/status-effects/isBlocking.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 272 357.4">
-  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 358 358">
+  <!-- Generator: Adobe Illustrator 29.8.7, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
   <defs>
     <style>
       .st0 {
@@ -12,6 +12,6 @@
       }
     </style>
   </defs>
-  <path class="st1" d="M136,0C120,15.1,40,30.3,0,45.4v106c0,90.9,70,151.4,136,206V0Z"/>
-  <path class="st0" d="M136,0c16,15.1,96,30.3,136,45.4v106c0,90.9-70,151.4-136,206V0Z"/>
+  <path class="st1" d="M179,.3c-16,15.1-96,30.3-136,45.4v106c0,90.9,70,151.4,136,206V.3Z"/>
+  <path class="st0" d="M179,.3c16,15.1,96,30.3,136,45.4v106c0,90.9-70,151.4-136,206V.3Z"/>
 </svg>
\ No newline at end of file
diff --git a/static/icons/status-effects/vulnerable.svg b/static/icons/status-effects/vulnerable.svg
index 5c4916e1..b395f595 100644
--- a/static/icons/status-effects/vulnerable.svg
+++ b/static/icons/status-effects/vulnerable.svg
@@ -1,17 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 786 1024">
-  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
-  <defs>
-    <style>
-      .st0 {
-        fill: #6c7cd8;
-      }
-
-      .st1 {
-        fill: #2b3eaf;
-      }
-    </style>
-  </defs>
-  <path class="st1" d="M784.6,868.7c2.8,8.9,1.2,14.2-6.8,20.3-83.5,62.2-174.7,108.5-277.6,129.1-8.9,1.8-17.9,3.1-26.8,4.6-29.3-78-31.7-393.8-3.7-495.8,71.8,9.5,138.7,33,204.6,65.3.6-6.2,1.5-10.2,1.5-14.5,0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6-18.9-.2-37.8,0-56.8.8-68.7,2.8-136.8,11.7-203.4,30.8v161.2c67.2-33.6,135.6-58.9,210.5-66.2,29,167.3,35.1,332.8-2.2,498C240.9,1018.8,95.5,957.7,0,881c3.4-9.9,7.1-20.3,10.8-30.8,21.6-61.6,43.1-123.6,54.2-188.6,12-71.2,5.5-141.1-15.1-209.5-14.5-49-32-97.1-47.5-145.8-1.8-6.2-1.5-16,2.2-20.3,36.1-41.6,72.7-82.6,109.4-123,2.5-2.8,8.3-5.2,11.7-4,57.6,17.6,114.9,35.7,170.7,53.6-20,22.2-40.4,44.7-61.3,67.8,52.5,16.4,105.2,32.8,157.9,49.2,56.2,17.5,112.5,35,168.8,52.5.6-1.2,1.2-2.1,1.8-3.4-56.1-42.8-112.2-85.5-170.6-130-1-.7-1.9-1.5-2.9-2.2,1-.8,1.9-1.7,2.9-2.5,16.6-14.5,33-28.9,50.4-44.6-17-13.2-33.8-26.2-50.4-39.1-45-34.9-89.2-69.2-136-105.4,45.6-19.1,87.8-37,130-54.2C388.7,0,390.8,0,393,.4c3,.5,6.2,1.7,8.8,2.7,124.8,46.5,235.7,114.9,326.6,213.2,19.7,21.3,36.7,45.3,53.9,69,3.7,5.2,4.6,14.5,3.1,20.7-14.8,60.1-32.7,119.2-45.6,179.7-19.4,90.6-11.1,180.6,12.9,269.3,10.2,37.9,21,75.8,31.7,113.7h.2Z"/>
-  <path class="st0" d="M784.6,868.7c2.8,8.9,1.2,14.2-6.8,20.3-83.5,62.2-174.7,108.5-277.6,129.1-8.9,1.8-17.9,3.1-26.8,4.6-29.3-78-31.7-393.8-3.7-495.8,71.8,9.5,138.7,33,204.6,65.3.6-6.2,1.5-10.2,1.5-14.5,0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6v-70.1c56.2,17.5,112.5,35,168.8,52.5.6-1.2,1.2-2.1,1.8-3.4-56.1-42.8-112.2-85.5-170.6-130v-4.7c16.6-14.5,33-28.9,50.4-44.6-17-13.2-33.8-26.2-50.4-39.1V.3c3,.5,6.2,1.7,8.8,2.7,124.8,46.5,235.7,114.9,326.6,213.2,19.7,21.3,36.7,45.3,53.9,69,3.7,5.2,4.6,14.5,3.1,20.7-14.8,60.1-32.7,119.2-45.6,179.7-19.4,90.6-11.1,180.6,12.9,269.3,10.2,37.9,21,75.8,31.7,113.7h.2Z"/>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024">
+  <g id="Original_Art" class="st2">
+    <path fill="#6c7cd8" d="M-513.4,868.7c2.8,8.9,1.2,14.2-6.8,20.3-83.5,62.2-174.7,108.5-277.6,129.1-8.9,1.8-17.9,3.1-26.8,4.6-29.3-78-31.7-393.8-3.7-495.8,71.8,9.5,138.7,33,204.6,65.3.6-6.2,1.5-10.2,1.5-14.5,0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6-18.9-.2-37.8,0-56.8.8-68.7,2.8-136.8,11.7-203.4,30.8v161.2c67.2-33.6,135.6-58.9,210.5-66.2,29,167.3,35.1,332.8-2.2,498-100.2-5.5-245.6-66.6-341.1-143.3,3.4-9.9,7.1-20.3,10.8-30.8,21.6-61.6,43.1-123.6,54.2-188.6,12-71.2,5.5-141.1-15.1-209.5-14.5-49-32-97.1-47.5-145.8-1.8-6.2-1.5-16,2.2-20.3,36.1-41.6,72.7-82.6,109.4-123,2.5-2.8,8.3-5.2,11.7-4,57.6,17.6,114.9,35.7,170.7,53.6-20,22.2-40.4,44.7-61.3,67.8,52.5,16.4,105.2,32.8,157.9,49.2,56.2,17.5,112.5,35,168.8,52.5.6-1.2,1.2-2.1,1.8-3.4-56.1-42.8-112.2-85.5-170.6-130-1-.7-1.9-1.5-2.9-2.2,1-.8,1.9-1.7,2.9-2.5,16.6-14.5,33-28.9,50.4-44.6-17-13.2-33.8-26.2-50.4-39.1-45-34.9-89.2-69.2-136-105.4,45.6-19.1,87.8-37,130-54.2C-909.3,0-907.2,0-905,.4c3,.5,6.2,1.7,8.8,2.7,124.8,46.5,235.7,114.9,326.6,213.2,19.7,21.3,36.7,45.3,53.9,69,3.7,5.2,4.6,14.5,3.1,20.7-14.8,60.1-32.7,119.2-45.6,179.7-19.4,90.6-11.1,180.6,12.9,269.3,10.2,37.9,21,75.8,31.7,113.7,0,0,.2,0,.2,0Z"/>
+    <path fill="#6c7cd8" d="M-513.4,868.7c2.8,8.9,1.2,14.2-6.8,20.3-83.5,62.2-174.7,108.5-277.6,129.1-8.9,1.8-17.9,3.1-26.8,4.6-29.3-78-31.7-393.8-3.7-495.8,71.8,9.5,138.7,33,204.6,65.3.6-6.2,1.5-10.2,1.5-14.5,0-44.1-.3-88.4.3-132.5.3-11.1-3.7-15.1-14.2-16.9-89-16.8-178.5-27.7-268.9-28.6v-70.1c56.2,17.5,112.5,35,168.8,52.5.6-1.2,1.2-2.1,1.8-3.4-56.1-42.8-112.2-85.5-170.6-130v-4.7c16.6-14.5,33-28.9,50.4-44.6-17-13.2-33.8-26.2-50.4-39.1V.3c3,.5,6.2,1.7,8.8,2.7,124.8,46.5,235.7,114.9,326.6,213.2,19.7,21.3,36.7,45.3,53.9,69,3.7,5.2,4.6,14.5,3.1,20.7-14.8,60.1-32.7,119.2-45.6,179.7-19.4,90.6-11.1,180.6,12.9,269.3,10.2,37.9,21,75.8,31.7,113.7h.2v.1Z"/>
+  </g>
+  <g id="Generative_Object__x28_180_x2C__0_x29_">
+    <path fill="#6c7cd8" d="M512.4-.2v160.7c.1,0-50.2,38.6-50.2,38.6l53.2,47.5-174.2,132.9c3.5,4.5,6.9.8,10.5-.3l159.7-49.4c-.3.7,0,1.5,1,2v67.5l-49.9,1.6c-73.8,4.3-146.3,13.5-218.7,27.4-5.3,1-8.6,2.3-11.2,5.3-3.7,4.1-3.1,7.9-3.1,13.2l.4,127.7,1.3,17.1c63.6-31.1,134.2-56.4,205.3-65.1,11.2,51.5,15.2,104.1,17.6,157.1,3,100.4,3,210.6-13.7,308.2l-7.6,30.6c-113-15.4-217.2-67.2-307.6-135.5-6.6-5-6.6-11.1-4.6-18.2l25.5-89.3c34.3-120.1,42.1-212.6,9.9-335.4l-35.1-132.7c-1.8-6.7-4.1-17,0-23.1,17.6-26,35.4-51.1,57.1-73.3l23.6-24.2c27.3-28,56.9-52,88.7-75.1C358.4,65.9,433.4,27.9,512.4-.2Z"/>
+    <path fill="#2b3eaf" d="M512.4,399.6v-67.5c-1.1-.4-1.4-1.3-1.1-2l158.6-49.6-61.6-68.1,172.8-54c5.8-.1,9,2.6,12.4,6.5l101.8,114.2c7.6,8.5,11.4,17,7.6,28.6l-39,117.7c-27.6,83.2-38.5,162.9-20.6,250.7,8.3,42.8,20.1,83.1,34.3,124.2l27.9,80.6c-23.9,20-48.9,36.8-75.8,52.5-78.7,45.8-172.3,84.3-264.9,91.5-7.2-27.8-11.4-54.3-15.5-82.5-20.4-141.4-10.7-276.9,12.5-416,36.6,3.2,70.3,10.9,104.4,21.8,36.4,11.7,70.3,26.2,106.2,44.2l.4-160.8c-86-24.1-172.4-31.8-260.3-31.8v-.2h-.1Z"/>
+    <path fill="#2b3eaf" d="M512.5,160.6V-.2c2.4-.2,3.9-.3,6.2.6l130.4,54.3-136.5,105.8h0l-.1.1Z"/>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/static/icons/the-arena.svg b/static/icons/the-arena.svg
new file mode 100644
index 00000000..78c7f968
--- /dev/null
+++ b/static/icons/the-arena.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 470 470">
+  <!-- Generator: Adobe Illustrator 30.4.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 226)  -->
+  <path d="M131.4,56.8c-49.3,15.9-93.3,45.8-114.4,86,13.5-.9,10.6,14.5,10.6,29.9h-13.5c.3,20,4.5,22.5,4.5,22.5,8.8,0,8.8,16,8.8,32H10.6L0,389.2c0,2.8,3.5,5.3,9.9,7.5.2-25.6,1.5-47.5,8.7-47.5s8.7,24.5,8.8,52c6.8,1.3,14.7,2.5,23.5,3.6.2-27.4,1.5-51.6,11.7-51.6s11.6,25.7,11.7,54.1c9.2.8,19,1.6,29.4,2.2.1-28.5,1.4-54.3,13.7-54.3s13.6,26.7,13.7,55.8c8.3.4,16.8.7,25.5,1,.1-28.6,1.5-54.8,15.6-54.8s17.3,8,17.4,36.9c27.6,20.2,24,14.4,27.7,19,.1-29.1,1.5-55.9,17.6-55.9s17.5,26.8,17.6,55.9c9.9,0,19.7-.2,29.4-.4.1-28.9,1.4-55.6,15.6-55.6s15.5,26.1,15.6,54.8c6.9-.2,13.7-.5,20.6-.8l-34.5-77.3-30.5-2.6-24.5-113-35.3,3-13-52.7-15.9-2.3-48.7-109.5ZM117.7,102.8c13.7,0,13.7,16,13.7,32l-27.4,8c0-16,0-40,13.7-40ZM62.9,118.8c11.8,0,11.8,16,11.8,32l-23.5,4c0-16,0-36,11.8-36ZM172.3,179.2c15.7,0,15.7,16,15.7,32l-31.3,2c0-16,0-34,15.7-34h0ZM117.5,183.2c13.7,0,13.7,16,13.7,32l-27.4,2c0-16,0-34,13.7-34ZM62.7,189.2c11.8,0,11.8,16,11.8,32l-23.5,4c0-16,0-36,11.8-36ZM262,216.4l20,92.2c0-23.8.1-47.3,15.7-47.3s15.7,24,15.7,48c-1.4,5.7-1.5,6.2-2.2,7.7l28.7,64.2c1.4-15.2,4.7-25.9,12.7-25.9,12.3,0,13.6,25.8,13.7,54.3,9.6-.6,18.8-1.3,27.5-2.1.1-28.4,1.2-54.2,11.7-54.2s11.6,24.4,11.7,51.8c10.5-1.3,19.8-2.7,27.5-4.2.1-27.4,1.1-51.6,8.8-51.6s8.5,21.5,8.7,46.8c5.1-2.1,7.9-4.3,7.9-6.8l-9-138.1c-10.9-10-26.1-16.9-44.1-21.7l-19.9,14-30.3-2.8-20.7-21.1c-27.1-1.7-55.9-2.2-84-3.1h0ZM172.3,261.2c15.7,0,15.7,24,15.7,48h-31.3c0-24,0-48,15.7-48ZM235,261.2c17.6,0,17.6,24,17.6,48h-35.2c0-24,0-48,17.6-48ZM117.5,263.2c13.7,0,13.7,24,13.7,48h-27.4c0-24,0-48,13.7-48ZM352.5,263.2c13.7,0,13.7,24,13.7,48h-27.4c0-24,0-48,13.7-48ZM62.7,265.2c11.8,0,11.8,22,11.8,46l-23.5,2c0-24,0-48,11.8-48ZM405.4,265.2c11.8,0,11.8,24,11.8,48l-23.5-2c0-24,0-46,11.8-46ZM22.6,267.2c8.8,0,8.8,22,8.8,46l-17.6,2c0-24,0-48,8.8-48h0ZM449.4,267.2c8.8,0,8.8,24,8.8,48l-17.6-2c0-24,0-46,8.8-46h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/uninterruptable.svg b/static/icons/uninterruptable.svg
new file mode 100644
index 00000000..847d6683
--- /dev/null
+++ b/static/icons/uninterruptable.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 480.375 480.342">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M240.188,0C107.651,0,0,107.65,0,240.186s107.65,240.156,240.188,240.156c132.536,0,240.187-107.62,240.187-240.156S372.725,0,240.187,0h.001ZM240.188,18.686c122.436,0,221.5,99.064,221.5,221.5,0,17.96-2.133,35.412-6.157,52.125l-44.906-8.686-20.53-71.594-1.376-4.844-4.844-1.5-58.063-17.937-66.906-128.626-4.75-9.156-8.655,5.624-91.094,59.25-2.936,1.907-.97,3.374-47.936,167.377-70.22,29.436c-8.82-23.91-13.656-49.753-13.656-76.75C18.689,117.75,117.753,18.686,240.189,18.686h0ZM241,80.811l-52.53,104.595,16.218,134.438,90.125-61.938v62.97l-23.563,6.25,20.845,128.434c-16.646,3.988-34.03,6.095-51.908,6.095-88.813,0-165.33-52.117-200.656-127.47l74.406-31.217,4.126-1.72,1.25-4.312,48.187-168.28,73.5-47.845h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/unstoppable.svg b/static/icons/unstoppable.svg
new file mode 100644
index 00000000..c88bb5ea
--- /dev/null
+++ b/static/icons/unstoppable.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 476.906 474.344">
+  <!-- Generator: Adobe Illustrator 30.5.1, SVG Export Plug-In . SVG Version: 2.1.4 Build 3)  -->
+  <path d="M3.032.001C1.031,4.242-.004,8.874,0,13.564,0,30.85,13.93,45.108,31.093,45.657c2.274,7.447,4.881,14.787,7.814,22-7.123,5.912-11.688,14.818-11.688,24.72,0,17.628,14.465,32.124,32.094,32.124,3.66,0,7.18-.633,10.47-1.78,5.182,6.985,10.742,13.682,16.655,20.06-2.03,4.2-3.156,8.9-3.156,13.845,0,11.376,6.042,21.443,15.06,27.156,2.909-5.49,6.059-10.848,9.44-16.06-3.53-2.4-5.814-6.42-5.814-11.095,0-7.53,5.908-13.438,13.438-13.438,3.22,0,6.152,1.08,8.437,2.907,4.008-4.724,8.221-9.27,12.626-13.625-5.65-4.954-13.022-7.97-21.062-7.97-5.922,0-11.466,1.66-16.25,4.5-5.018-5.494-9.74-11.28-14.22-17.313,4.218-5.554,6.501-12.337,6.5-19.312,0-17.63-14.495-32.125-32.125-32.125-1.05,0-2.1.056-3.125.156-2.628-6.457-4.973-13.026-7.03-19.687,9.03-5.712,15.093-15.772,15.093-27.157,0-4.835-1.086-9.434-3.032-13.563H3.032ZM32.125.126c7.53,0,13.437,5.907,13.437,13.438s-5.908,13.437-13.438,13.437-13.437-5.907-13.437-13.438S24.594.126,32.125.126ZM59.312,78.939c7.53,0,13.438,5.907,13.438,13.437s-5.908,13.438-13.438,13.438-13.406-5.908-13.406-13.438,5.876-13.438,13.406-13.438h0ZM284.75,90.063c-106.228,0-192.125,85.93-192.125,192.157s85.897,192.124,192.125,192.124,192.156-85.898,192.156-192.125-85.93-192.158-192.156-192.158v.002ZM381.687,144.783c7.52,3.186,14.892,7.89,21.625,14.624,18.858,18.858,30.55,48.69,34.53,82.53,6.007,8.252,10.547,17.502,13.25,27.595,2.466,9.2,3.035,18.644,2.345,27.908-3.86-7.832-8.59-15.445-14.125-22.72-.77,30.396-7.25,62.106-19.813,90.813,3.03-16.998,4.635-34.97,4.938-54.03.312-19.598-.964-38.772-3.594-57.063-21.342-19.84-49.29-35.61-81.53-44.25-15.274-4.092-30.26-6.445-45.063-6.968,44.76-11.995,89.006-4.885,119.532,15.75-7.485-29.017-18.55-54.523-32.095-74.19h0ZM116.999,314.969c49.026,67.317,129.026,112.73,212.532,134.342-8.873,2.55-19.25,3.037-30.064,3.5-75.993,3.258-168.286-67.14-182.47-137.843h.002Z"/>
+</svg>
\ No newline at end of file
diff --git a/static/icons/up.svg b/static/icons/up.svg
deleted file mode 100644
index 5fc89805..00000000
--- a/static/icons/up.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="448" height="448">
-  <path fill="#000"
-    d="M420.75 332.75 379.25 374a15.844 15.844 0 0 1-22.5 0L224 241.25 91.25 374a15.844 15.844 0 0 1-22.5 0l-41.5-41.25c-6.25-6.25-6.25-16.5 0-22.75l185.5-185.25a15.844 15.844 0 0 1 22.5 0L420.75 310c6.25 6.25 6.25 16.5 0 22.75" />
-</svg>
\ No newline at end of file
diff --git a/static/images/_arena.png b/static/images/_arena.png
deleted file mode 100644
index 9facdd25..00000000
Binary files a/static/images/_arena.png and /dev/null differ
diff --git a/static/images/arena-bg-daylight-full-zoom.jpg b/static/images/arena-bg-daylight-full-zoom.jpg
deleted file mode 100644
index 75f54021..00000000
Binary files a/static/images/arena-bg-daylight-full-zoom.jpg and /dev/null differ
diff --git a/static/images/arena-bg-daylight-full.jpg b/static/images/arena-bg-daylight-full.jpg
deleted file mode 100644
index 7d0cb8ca..00000000
Binary files a/static/images/arena-bg-daylight-full.jpg and /dev/null differ
diff --git a/static/images/arena-bg-daylight.jpg b/static/images/arena-bg-daylight.jpg
deleted file mode 100644
index 007a1198..00000000
Binary files a/static/images/arena-bg-daylight.jpg and /dev/null differ
diff --git a/static/images/arena-bggg.jpg b/static/images/arena-bggg.jpg
deleted file mode 100644
index ba8aba58..00000000
Binary files a/static/images/arena-bggg.jpg and /dev/null differ
diff --git a/static/images/arena.png b/static/images/arena.png
deleted file mode 100644
index c4e79baa..00000000
Binary files a/static/images/arena.png and /dev/null differ
diff --git a/static/images/bg/arena-combat-4096x2304.webp b/static/images/bg/arena-combat-4096x2304.webp
new file mode 100644
index 00000000..9e26239c
Binary files /dev/null and b/static/images/bg/arena-combat-4096x2304.webp differ
diff --git a/static/images/bg/arena-combat-sandy-4096x2304.webp b/static/images/bg/arena-combat-sandy-4096x2304.webp
new file mode 100644
index 00000000..39bb42ec
Binary files /dev/null and b/static/images/bg/arena-combat-sandy-4096x2304.webp differ
diff --git a/static/images/bg/arena-cut-3000x1552.webp b/static/images/bg/arena-cut-3000x1552.webp
new file mode 100644
index 00000000..014ea1d3
Binary files /dev/null and b/static/images/bg/arena-cut-3000x1552.webp differ
diff --git a/static/images/bg/login-4096x2304.webp b/static/images/bg/login-4096x2304.webp
new file mode 100644
index 00000000..6de81f36
Binary files /dev/null and b/static/images/bg/login-4096x2304.webp differ
diff --git a/static/images/bg/parchment-2080x1170.webp b/static/images/bg/parchment-2080x1170.webp
new file mode 100644
index 00000000..ec877a48
Binary files /dev/null and b/static/images/bg/parchment-2080x1170.webp differ
diff --git a/static/images/bg/parchment-4096x2304.webp b/static/images/bg/parchment-4096x2304.webp
new file mode 100644
index 00000000..d4a3c0d1
Binary files /dev/null and b/static/images/bg/parchment-4096x2304.webp differ
diff --git a/static/images/bg/the-wild-2250x1500.webp b/static/images/bg/the-wild-2250x1500.webp
new file mode 100644
index 00000000..f4d79bff
Binary files /dev/null and b/static/images/bg/the-wild-2250x1500.webp differ
diff --git a/static/images/bg/the-wild-4096x2304.webp b/static/images/bg/the-wild-4096x2304.webp
new file mode 100644
index 00000000..6adb97d8
Binary files /dev/null and b/static/images/bg/the-wild-4096x2304.webp differ
diff --git a/static/images/bg/the-wild-grassland-2250x1500.webp b/static/images/bg/the-wild-grassland-2250x1500.webp
new file mode 100644
index 00000000..8629f7c8
Binary files /dev/null and b/static/images/bg/the-wild-grassland-2250x1500.webp differ
diff --git a/static/images/bg/the-wild-grassland-dark-4096x2304.webp b/static/images/bg/the-wild-grassland-dark-4096x2304.webp
new file mode 100644
index 00000000..51ef4d37
Binary files /dev/null and b/static/images/bg/the-wild-grassland-dark-4096x2304.webp differ
diff --git a/static/images/brush-center.png b/static/images/brush-center.png
deleted file mode 100644
index 1439fe5e..00000000
Binary files a/static/images/brush-center.png and /dev/null differ
diff --git a/static/images/brush-left.png b/static/images/brush-left.png
deleted file mode 100644
index eb0efa12..00000000
Binary files a/static/images/brush-left.png and /dev/null differ
diff --git a/static/images/brush-right.png b/static/images/brush-right.png
deleted file mode 100644
index 1ad0b4b2..00000000
Binary files a/static/images/brush-right.png and /dev/null differ
diff --git a/static/images/desktop-1920x1080.jpg b/static/images/desktop-1920x1080.jpg
deleted file mode 100644
index be7b22a9..00000000
Binary files a/static/images/desktop-1920x1080.jpg and /dev/null differ
diff --git a/static/images/elements/earth-621x619.webp b/static/images/elements/earth-621x619.webp
new file mode 100644
index 00000000..54784092
Binary files /dev/null and b/static/images/elements/earth-621x619.webp differ
diff --git a/static/images/elements/fire-477x730.webp b/static/images/elements/fire-477x730.webp
new file mode 100644
index 00000000..6256aeba
Binary files /dev/null and b/static/images/elements/fire-477x730.webp differ
diff --git a/static/images/elements/frost-452x622.webp b/static/images/elements/frost-452x622.webp
new file mode 100644
index 00000000..f6d521db
Binary files /dev/null and b/static/images/elements/frost-452x622.webp differ
diff --git a/static/images/elements/lightning-422x586.webp b/static/images/elements/lightning-422x586.webp
new file mode 100644
index 00000000..8337ca1d
Binary files /dev/null and b/static/images/elements/lightning-422x586.webp differ
diff --git a/static/images/elements/nature-425x704.webp b/static/images/elements/nature-425x704.webp
new file mode 100644
index 00000000..d3fd7a60
Binary files /dev/null and b/static/images/elements/nature-425x704.webp differ
diff --git a/static/images/equipment/axe.webp b/static/images/equipment/axe.webp
new file mode 100644
index 00000000..9834b0bc
Binary files /dev/null and b/static/images/equipment/axe.webp differ
diff --git a/static/images/equipment/bow.webp b/static/images/equipment/bow.webp
new file mode 100644
index 00000000..7079a4c6
Binary files /dev/null and b/static/images/equipment/bow.webp differ
diff --git a/static/images/equipment/cloth-robe.webp b/static/images/equipment/cloth-robe.webp
new file mode 100644
index 00000000..06849f44
Binary files /dev/null and b/static/images/equipment/cloth-robe.webp differ
diff --git a/static/images/equipment/dagger.webp b/static/images/equipment/dagger.webp
new file mode 100644
index 00000000..78fd44a3
Binary files /dev/null and b/static/images/equipment/dagger.webp differ
diff --git a/static/images/equipment/leather-harness.webp b/static/images/equipment/leather-harness.webp
new file mode 100644
index 00000000..02cf9780
Binary files /dev/null and b/static/images/equipment/leather-harness.webp differ
diff --git a/static/images/equipment/mace.webp b/static/images/equipment/mace.webp
new file mode 100644
index 00000000..62395194
Binary files /dev/null and b/static/images/equipment/mace.webp differ
diff --git a/static/images/equipment/ring.webp b/static/images/equipment/ring.webp
new file mode 100644
index 00000000..c01752bb
Binary files /dev/null and b/static/images/equipment/ring.webp differ
diff --git a/static/images/equipment/shield.webp b/static/images/equipment/shield.webp
new file mode 100644
index 00000000..832a6896
Binary files /dev/null and b/static/images/equipment/shield.webp differ
diff --git a/static/images/equipment/steel-cuirass.webp b/static/images/equipment/steel-cuirass.webp
new file mode 100644
index 00000000..81c0ae76
Binary files /dev/null and b/static/images/equipment/steel-cuirass.webp differ
diff --git a/static/images/equipment/sword.webp b/static/images/equipment/sword.webp
new file mode 100644
index 00000000..7a9f6cf1
Binary files /dev/null and b/static/images/equipment/sword.webp differ
diff --git a/static/images/equipment/two-handed-axe.webp b/static/images/equipment/two-handed-axe.webp
new file mode 100644
index 00000000..2f162f3e
Binary files /dev/null and b/static/images/equipment/two-handed-axe.webp differ
diff --git a/static/images/equipment/wooden-ring.webp b/static/images/equipment/wooden-ring.webp
new file mode 100644
index 00000000..3e5df82b
Binary files /dev/null and b/static/images/equipment/wooden-ring.webp differ
diff --git a/static/images/materials/cloth.webp b/static/images/materials/cloth.webp
new file mode 100644
index 00000000..f3a5cf0c
Binary files /dev/null and b/static/images/materials/cloth.webp differ
diff --git a/static/images/materials/essence-of-earth.webp b/static/images/materials/essence-of-earth.webp
new file mode 100644
index 00000000..2a72e3ce
Binary files /dev/null and b/static/images/materials/essence-of-earth.webp differ
diff --git a/static/images/materials/essence-of-fire.webp b/static/images/materials/essence-of-fire.webp
new file mode 100644
index 00000000..138845a1
Binary files /dev/null and b/static/images/materials/essence-of-fire.webp differ
diff --git a/static/images/materials/essence-of-frost.webp b/static/images/materials/essence-of-frost.webp
new file mode 100644
index 00000000..f4f3b86b
Binary files /dev/null and b/static/images/materials/essence-of-frost.webp differ
diff --git a/static/images/materials/essence-of-lightning.webp b/static/images/materials/essence-of-lightning.webp
new file mode 100644
index 00000000..5810be57
Binary files /dev/null and b/static/images/materials/essence-of-lightning.webp differ
diff --git a/static/images/materials/essence-of-nature.webp b/static/images/materials/essence-of-nature.webp
new file mode 100644
index 00000000..4ebb0fea
Binary files /dev/null and b/static/images/materials/essence-of-nature.webp differ
diff --git a/static/images/materials/leather.webp b/static/images/materials/leather.webp
new file mode 100644
index 00000000..97df0a20
Binary files /dev/null and b/static/images/materials/leather.webp differ
diff --git a/static/images/materials/steel.webp b/static/images/materials/steel.webp
new file mode 100644
index 00000000..21a34781
Binary files /dev/null and b/static/images/materials/steel.webp differ
diff --git a/static/images/materials/wood.webp b/static/images/materials/wood.webp
new file mode 100644
index 00000000..562201a8
Binary files /dev/null and b/static/images/materials/wood.webp differ
diff --git a/static/images/parchment-bg-1080x720.jpg b/static/images/parchment-bg-1080x720.jpg
deleted file mode 100644
index 59fb9003..00000000
Binary files a/static/images/parchment-bg-1080x720.jpg and /dev/null differ
diff --git a/static/images/parchment-bg-2250x1500.jpg b/static/images/parchment-bg-2250x1500.jpg
deleted file mode 100644
index ea08c762..00000000
Binary files a/static/images/parchment-bg-2250x1500.jpg and /dev/null differ
diff --git a/static/images/parchment-bg.jpg b/static/images/parchment-bg.jpg
deleted file mode 100644
index 47a7adb1..00000000
Binary files a/static/images/parchment-bg.jpg and /dev/null differ
diff --git a/static/images/races/creature/basher-goblin.webp b/static/images/races/creature/basher-goblin.webp
new file mode 100644
index 00000000..3fd009cb
Binary files /dev/null and b/static/images/races/creature/basher-goblin.webp differ
diff --git a/static/images/races/creature/beastmaster.webp b/static/images/races/creature/beastmaster.webp
new file mode 100644
index 00000000..92acde03
Binary files /dev/null and b/static/images/races/creature/beastmaster.webp differ
diff --git a/static/images/races/creature/blind-swordsman.webp b/static/images/races/creature/blind-swordsman.webp
new file mode 100644
index 00000000..16da5f59
Binary files /dev/null and b/static/images/races/creature/blind-swordsman.webp differ
diff --git a/static/images/races/creature/boar.png b/static/images/races/creature/boar.png
deleted file mode 100644
index 6c3bbd1c..00000000
Binary files a/static/images/races/creature/boar.png and /dev/null differ
diff --git a/static/images/races/creature/boar.webp b/static/images/races/creature/boar.webp
new file mode 100644
index 00000000..33a7b9d0
Binary files /dev/null and b/static/images/races/creature/boar.webp differ
diff --git a/static/images/races/creature/cannon.webp b/static/images/races/creature/cannon.webp
new file mode 100644
index 00000000..0683c324
Binary files /dev/null and b/static/images/races/creature/cannon.webp differ
diff --git a/static/images/races/creature/crazy-old-man.webp b/static/images/races/creature/crazy-old-man.webp
new file mode 100644
index 00000000..b76c5a2b
Binary files /dev/null and b/static/images/races/creature/crazy-old-man.webp differ
diff --git a/static/images/races/creature/dimachaerus.webp b/static/images/races/creature/dimachaerus.webp
new file mode 100644
index 00000000..6e8e894f
Binary files /dev/null and b/static/images/races/creature/dimachaerus.webp differ
diff --git a/static/images/races/creature/dragon-egg.webp b/static/images/races/creature/dragon-egg.webp
new file mode 100644
index 00000000..3e651abe
Binary files /dev/null and b/static/images/races/creature/dragon-egg.webp differ
diff --git a/static/images/races/creature/earth/armorillo.webp b/static/images/races/creature/earth/armorillo.webp
new file mode 100644
index 00000000..d4fbae90
Binary files /dev/null and b/static/images/races/creature/earth/armorillo.webp differ
diff --git a/static/images/races/creature/earth/elise-goddess-of-earth.webp b/static/images/races/creature/earth/elise-goddess-of-earth.webp
new file mode 100644
index 00000000..c248838d
Binary files /dev/null and b/static/images/races/creature/earth/elise-goddess-of-earth.webp differ
diff --git a/static/images/races/creature/earth/giant.webp b/static/images/races/creature/earth/giant.webp
new file mode 100644
index 00000000..319ab00a
Binary files /dev/null and b/static/images/races/creature/earth/giant.webp differ
diff --git a/static/images/races/creature/earth/vita-deserto.webp b/static/images/races/creature/earth/vita-deserto.webp
new file mode 100644
index 00000000..3ebcd5d2
Binary files /dev/null and b/static/images/races/creature/earth/vita-deserto.webp differ
diff --git a/static/images/races/creature/executioner.webp b/static/images/races/creature/executioner.webp
new file mode 100644
index 00000000..79a08cfb
Binary files /dev/null and b/static/images/races/creature/executioner.webp differ
diff --git a/static/images/races/creature/fire/bullrock.webp b/static/images/races/creature/fire/bullrock.webp
new file mode 100644
index 00000000..139937e4
Binary files /dev/null and b/static/images/races/creature/fire/bullrock.webp differ
diff --git a/static/images/races/creature/fire/cerberus.webp b/static/images/races/creature/fire/cerberus.webp
new file mode 100644
index 00000000..df958f28
Binary files /dev/null and b/static/images/races/creature/fire/cerberus.webp differ
diff --git a/static/images/races/creature/fire/giant.webp b/static/images/races/creature/fire/giant.webp
new file mode 100644
index 00000000..0f3e1670
Binary files /dev/null and b/static/images/races/creature/fire/giant.webp differ
diff --git a/static/images/races/creature/fire/ignius.webp b/static/images/races/creature/fire/ignius.webp
new file mode 100644
index 00000000..e6eb865b
Binary files /dev/null and b/static/images/races/creature/fire/ignius.webp differ
diff --git a/static/images/races/creature/fire/ragnar-god-of-fire.webp b/static/images/races/creature/fire/ragnar-god-of-fire.webp
new file mode 100644
index 00000000..a3e1e659
Binary files /dev/null and b/static/images/races/creature/fire/ragnar-god-of-fire.webp differ
diff --git a/static/images/races/creature/frost/breff.webp b/static/images/races/creature/frost/breff.webp
new file mode 100644
index 00000000..f5376726
Binary files /dev/null and b/static/images/races/creature/frost/breff.webp differ
diff --git a/static/images/races/creature/frost/frigus-mortis.webp b/static/images/races/creature/frost/frigus-mortis.webp
new file mode 100644
index 00000000..3a571aa6
Binary files /dev/null and b/static/images/races/creature/frost/frigus-mortis.webp differ
diff --git a/static/images/races/creature/frost/giant.webp b/static/images/races/creature/frost/giant.webp
new file mode 100644
index 00000000..b778638e
Binary files /dev/null and b/static/images/races/creature/frost/giant.webp differ
diff --git a/static/images/races/creature/frost/kyl-god-of-frost.webp b/static/images/races/creature/frost/kyl-god-of-frost.webp
new file mode 100644
index 00000000..9f4c96ba
Binary files /dev/null and b/static/images/races/creature/frost/kyl-god-of-frost.webp differ
diff --git a/static/images/races/creature/frost/mammoth.webp b/static/images/races/creature/frost/mammoth.webp
new file mode 100644
index 00000000..5dd21fb0
Binary files /dev/null and b/static/images/races/creature/frost/mammoth.webp differ
diff --git a/static/images/races/creature/frost/warrus.webp b/static/images/races/creature/frost/warrus.webp
new file mode 100644
index 00000000..830a6120
Binary files /dev/null and b/static/images/races/creature/frost/warrus.webp differ
diff --git a/static/images/races/creature/frost/yeti.webp b/static/images/races/creature/frost/yeti.webp
new file mode 100644
index 00000000..1f41769f
Binary files /dev/null and b/static/images/races/creature/frost/yeti.webp differ
diff --git a/static/images/races/creature/giant-scorpion.webp b/static/images/races/creature/giant-scorpion.webp
new file mode 100644
index 00000000..22a5ff8b
Binary files /dev/null and b/static/images/races/creature/giant-scorpion.webp differ
diff --git a/static/images/races/creature/golem.png b/static/images/races/creature/golem.png
deleted file mode 100644
index a62cadc0..00000000
Binary files a/static/images/races/creature/golem.png and /dev/null differ
diff --git a/static/images/races/creature/golem.webp b/static/images/races/creature/golem.webp
new file mode 100644
index 00000000..682a2bb8
Binary files /dev/null and b/static/images/races/creature/golem.webp differ
diff --git a/static/images/races/creature/grizzly-bear.webp b/static/images/races/creature/grizzly-bear.webp
new file mode 100644
index 00000000..d4a75ee3
Binary files /dev/null and b/static/images/races/creature/grizzly-bear.webp differ
diff --git a/static/images/races/creature/horn-goblin.webp b/static/images/races/creature/horn-goblin.webp
new file mode 100644
index 00000000..64a2abd8
Binary files /dev/null and b/static/images/races/creature/horn-goblin.webp differ
diff --git a/static/images/races/creature/hyena.webp b/static/images/races/creature/hyena.webp
new file mode 100644
index 00000000..c0b01104
Binary files /dev/null and b/static/images/races/creature/hyena.webp differ
diff --git a/static/images/races/creature/jester.png b/static/images/races/creature/jester.png
deleted file mode 100644
index 1392d53a..00000000
Binary files a/static/images/races/creature/jester.png and /dev/null differ
diff --git a/static/images/races/creature/jester.webp b/static/images/races/creature/jester.webp
new file mode 100644
index 00000000..390290a6
Binary files /dev/null and b/static/images/races/creature/jester.webp differ
diff --git a/static/images/races/creature/lightning/giant.webp b/static/images/races/creature/lightning/giant.webp
new file mode 100644
index 00000000..be6ab324
Binary files /dev/null and b/static/images/races/creature/lightning/giant.webp differ
diff --git a/static/images/races/creature/lightning/herald.webp b/static/images/races/creature/lightning/herald.webp
new file mode 100644
index 00000000..f4e7882b
Binary files /dev/null and b/static/images/races/creature/lightning/herald.webp differ
diff --git a/static/images/races/creature/lightning/onkh.webp b/static/images/races/creature/lightning/onkh.webp
new file mode 100644
index 00000000..18f3b80d
Binary files /dev/null and b/static/images/races/creature/lightning/onkh.webp differ
diff --git a/static/images/races/creature/lightning/oskar-god-of-lightning.webp b/static/images/races/creature/lightning/oskar-god-of-lightning.webp
new file mode 100644
index 00000000..85465d09
Binary files /dev/null and b/static/images/races/creature/lightning/oskar-god-of-lightning.webp differ
diff --git a/static/images/races/creature/lightning/ulwar.webp b/static/images/races/creature/lightning/ulwar.webp
new file mode 100644
index 00000000..5c3f85bc
Binary files /dev/null and b/static/images/races/creature/lightning/ulwar.webp differ
diff --git a/static/images/races/creature/lightning/vento-mico.webp b/static/images/races/creature/lightning/vento-mico.webp
new file mode 100644
index 00000000..02991443
Binary files /dev/null and b/static/images/races/creature/lightning/vento-mico.webp differ
diff --git a/static/images/races/creature/lightning/wyvern.webp b/static/images/races/creature/lightning/wyvern.webp
new file mode 100644
index 00000000..8a012fb0
Binary files /dev/null and b/static/images/races/creature/lightning/wyvern.webp differ
diff --git a/static/images/races/creature/lost-civilian.png b/static/images/races/creature/lost-civilian.png
deleted file mode 100644
index ceb56982..00000000
Binary files a/static/images/races/creature/lost-civilian.png and /dev/null differ
diff --git a/static/images/races/creature/lost-civilian.webp b/static/images/races/creature/lost-civilian.webp
new file mode 100644
index 00000000..504b5528
Binary files /dev/null and b/static/images/races/creature/lost-civilian.webp differ
diff --git a/static/images/races/creature/nature/.webp b/static/images/races/creature/nature/.webp
new file mode 100644
index 00000000..6f64dcc3
Binary files /dev/null and b/static/images/races/creature/nature/.webp differ
diff --git a/static/images/races/creature/nature/alora-goddess-of-nature.webp b/static/images/races/creature/nature/alora-goddess-of-nature.webp
new file mode 100644
index 00000000..aa11fc58
Binary files /dev/null and b/static/images/races/creature/nature/alora-goddess-of-nature.webp differ
diff --git a/static/images/races/creature/nature/erat-herba.webp b/static/images/races/creature/nature/erat-herba.webp
new file mode 100644
index 00000000..15e8db34
Binary files /dev/null and b/static/images/races/creature/nature/erat-herba.webp differ
diff --git a/static/images/races/creature/nature/giant.webp b/static/images/races/creature/nature/giant.webp
new file mode 100644
index 00000000..c990588f
Binary files /dev/null and b/static/images/races/creature/nature/giant.webp differ
diff --git a/static/images/races/creature/nature/owlbear.webp b/static/images/races/creature/nature/owlbear.webp
new file mode 100644
index 00000000..3c575438
Binary files /dev/null and b/static/images/races/creature/nature/owlbear.webp differ
diff --git a/static/images/races/creature/nature/rune-stag.webp b/static/images/races/creature/nature/rune-stag.webp
new file mode 100644
index 00000000..41b2bce5
Binary files /dev/null and b/static/images/races/creature/nature/rune-stag.webp differ
diff --git a/static/images/races/creature/netter-goblin.webp b/static/images/races/creature/netter-goblin.webp
new file mode 100644
index 00000000..fc628d86
Binary files /dev/null and b/static/images/races/creature/netter-goblin.webp differ
diff --git a/static/images/races/creature/nomad.png b/static/images/races/creature/nomad.png
deleted file mode 100644
index c1211d2f..00000000
Binary files a/static/images/races/creature/nomad.png and /dev/null differ
diff --git a/static/images/races/creature/nomad.webp b/static/images/races/creature/nomad.webp
new file mode 100644
index 00000000..94ce7d4a
Binary files /dev/null and b/static/images/races/creature/nomad.webp differ
diff --git a/static/images/races/creature/older-brother.webp b/static/images/races/creature/older-brother.webp
new file mode 100644
index 00000000..f74d6f3a
Binary files /dev/null and b/static/images/races/creature/older-brother.webp differ
diff --git a/static/images/races/creature/pitchfork-patrick.png b/static/images/races/creature/pitchfork-patrick.png
deleted file mode 100644
index c94b9105..00000000
Binary files a/static/images/races/creature/pitchfork-patrick.png and /dev/null differ
diff --git a/static/images/races/creature/pitchfork-patrick.webp b/static/images/races/creature/pitchfork-patrick.webp
new file mode 100644
index 00000000..e6f726d2
Binary files /dev/null and b/static/images/races/creature/pitchfork-patrick.webp differ
diff --git a/static/images/races/creature/plague-doctor.webp b/static/images/races/creature/plague-doctor.webp
new file mode 100644
index 00000000..c61cf1f9
Binary files /dev/null and b/static/images/races/creature/plague-doctor.webp differ
diff --git a/static/images/races/creature/poorest-knight-in-town.png b/static/images/races/creature/poorest-knight-in-town.png
deleted file mode 100644
index d23ab65c..00000000
Binary files a/static/images/races/creature/poorest-knight-in-town.png and /dev/null differ
diff --git a/static/images/races/creature/poorest-knight-in-town.webp b/static/images/races/creature/poorest-knight-in-town.webp
new file mode 100644
index 00000000..23ab163a
Binary files /dev/null and b/static/images/races/creature/poorest-knight-in-town.webp differ
diff --git a/static/images/races/creature/queen-arachnae.webp b/static/images/races/creature/queen-arachnae.webp
new file mode 100644
index 00000000..57f1e8b1
Binary files /dev/null and b/static/images/races/creature/queen-arachnae.webp differ
diff --git a/static/images/races/creature/rat.png b/static/images/races/creature/rat.png
deleted file mode 100644
index 7b90e9fc..00000000
Binary files a/static/images/races/creature/rat.png and /dev/null differ
diff --git a/static/images/races/creature/rat.webp b/static/images/races/creature/rat.webp
new file mode 100644
index 00000000..acde7470
Binary files /dev/null and b/static/images/races/creature/rat.webp differ
diff --git a/static/images/races/creature/regular-sized-combatant.webp b/static/images/races/creature/regular-sized-combatant.webp
new file mode 100644
index 00000000..9a99bcc9
Binary files /dev/null and b/static/images/races/creature/regular-sized-combatant.webp differ
diff --git a/static/images/races/creature/rhino.webp b/static/images/races/creature/rhino.webp
new file mode 100644
index 00000000..2f88178a
Binary files /dev/null and b/static/images/races/creature/rhino.webp differ
diff --git a/static/images/races/creature/sabertooth-tiger.png b/static/images/races/creature/sabertooth-tiger.png
deleted file mode 100644
index 84ea14d2..00000000
Binary files a/static/images/races/creature/sabertooth-tiger.png and /dev/null differ
diff --git a/static/images/races/creature/sabertooth-tiger.webp b/static/images/races/creature/sabertooth-tiger.webp
new file mode 100644
index 00000000..d06259ca
Binary files /dev/null and b/static/images/races/creature/sabertooth-tiger.webp differ
diff --git a/static/images/races/creature/scorch-ling.webp b/static/images/races/creature/scorch-ling.webp
new file mode 100644
index 00000000..1bef1d5a
Binary files /dev/null and b/static/images/races/creature/scorch-ling.webp differ
diff --git a/static/images/races/creature/secutor.webp b/static/images/races/creature/secutor.webp
new file mode 100644
index 00000000..29ba1653
Binary files /dev/null and b/static/images/races/creature/secutor.webp differ
diff --git a/static/images/races/creature/slinger-goblin.webp b/static/images/races/creature/slinger-goblin.webp
new file mode 100644
index 00000000..d73ae2c0
Binary files /dev/null and b/static/images/races/creature/slinger-goblin.webp differ
diff --git a/static/images/races/creature/spiderling.webp b/static/images/races/creature/spiderling.webp
new file mode 100644
index 00000000..ec4e51be
Binary files /dev/null and b/static/images/races/creature/spiderling.webp differ
diff --git a/static/images/races/creature/stabber-goblin.webp b/static/images/races/creature/stabber-goblin.webp
new file mode 100644
index 00000000..c2c426b8
Binary files /dev/null and b/static/images/races/creature/stabber-goblin.webp differ
diff --git a/static/images/races/creature/succubus.png b/static/images/races/creature/succubus.png
deleted file mode 100644
index 0957cfbf..00000000
Binary files a/static/images/races/creature/succubus.png and /dev/null differ
diff --git a/static/images/races/creature/succubus.webp b/static/images/races/creature/succubus.webp
new file mode 100644
index 00000000..83610b6c
Binary files /dev/null and b/static/images/races/creature/succubus.webp differ
diff --git a/static/images/races/creature/the-emperor.webp b/static/images/races/creature/the-emperor.webp
new file mode 100644
index 00000000..bdd63898
Binary files /dev/null and b/static/images/races/creature/the-emperor.webp differ
diff --git a/static/images/races/creature/the-engineer.webp b/static/images/races/creature/the-engineer.webp
new file mode 100644
index 00000000..c3fe5730
Binary files /dev/null and b/static/images/races/creature/the-engineer.webp differ
diff --git a/static/images/races/creature/the-grand-champion.webp b/static/images/races/creature/the-grand-champion.webp
new file mode 100644
index 00000000..6443e07d
Binary files /dev/null and b/static/images/races/creature/the-grand-champion.webp differ
diff --git a/static/images/races/creature/training-dummy.png b/static/images/races/creature/training-dummy.png
deleted file mode 100644
index be6eafa2..00000000
Binary files a/static/images/races/creature/training-dummy.png and /dev/null differ
diff --git a/static/images/races/creature/training-dummy.webp b/static/images/races/creature/training-dummy.webp
new file mode 100644
index 00000000..4ab96acc
Binary files /dev/null and b/static/images/races/creature/training-dummy.webp differ
diff --git a/static/images/races/creature/undead.png b/static/images/races/creature/undead.png
deleted file mode 100644
index 025bcb37..00000000
Binary files a/static/images/races/creature/undead.png and /dev/null differ
diff --git a/static/images/races/creature/war-elephant.webp b/static/images/races/creature/war-elephant.webp
new file mode 100644
index 00000000..2338f46e
Binary files /dev/null and b/static/images/races/creature/war-elephant.webp differ
diff --git a/static/images/races/creature/wolf.webp b/static/images/races/creature/wolf.webp
new file mode 100644
index 00000000..daf31554
Binary files /dev/null and b/static/images/races/creature/wolf.webp differ
diff --git a/static/images/races/creature/younger-brother.webp b/static/images/races/creature/younger-brother.webp
new file mode 100644
index 00000000..815b9311
Binary files /dev/null and b/static/images/races/creature/younger-brother.webp differ
diff --git a/static/images/races/dwarf/female-01-mugshot.png b/static/images/races/dwarf/female-01-mugshot.png
deleted file mode 100644
index 54dbc041..00000000
Binary files a/static/images/races/dwarf/female-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/dwarf/female-01.png b/static/images/races/dwarf/female-01.png
deleted file mode 100644
index 281cb20f..00000000
Binary files a/static/images/races/dwarf/female-01.png and /dev/null differ
diff --git a/static/images/races/dwarf/female-01.webp b/static/images/races/dwarf/female-01.webp
new file mode 100644
index 00000000..f1eaac80
Binary files /dev/null and b/static/images/races/dwarf/female-01.webp differ
diff --git a/static/images/races/dwarf/male-01-mugshot.png b/static/images/races/dwarf/male-01-mugshot.png
deleted file mode 100644
index 53706937..00000000
Binary files a/static/images/races/dwarf/male-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/dwarf/male-01.png b/static/images/races/dwarf/male-01.png
deleted file mode 100644
index f8a5f44f..00000000
Binary files a/static/images/races/dwarf/male-01.png and /dev/null differ
diff --git a/static/images/races/dwarf/male-01.webp b/static/images/races/dwarf/male-01.webp
new file mode 100644
index 00000000..d0dc8c14
Binary files /dev/null and b/static/images/races/dwarf/male-01.webp differ
diff --git a/static/images/races/elf/female-01-mugshot.png b/static/images/races/elf/female-01-mugshot.png
deleted file mode 100644
index 2bfe5994..00000000
Binary files a/static/images/races/elf/female-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/elf/female-01.png b/static/images/races/elf/female-01.png
deleted file mode 100644
index f05e5b32..00000000
Binary files a/static/images/races/elf/female-01.png and /dev/null differ
diff --git a/static/images/races/elf/female-01.webp b/static/images/races/elf/female-01.webp
new file mode 100644
index 00000000..ea4e9109
Binary files /dev/null and b/static/images/races/elf/female-01.webp differ
diff --git a/static/images/races/elf/male-01-mugshot.png b/static/images/races/elf/male-01-mugshot.png
deleted file mode 100644
index b5e0d05a..00000000
Binary files a/static/images/races/elf/male-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/elf/male-01.png b/static/images/races/elf/male-01.png
deleted file mode 100644
index f7f6a8da..00000000
Binary files a/static/images/races/elf/male-01.png and /dev/null differ
diff --git a/static/images/races/elf/male-01.webp b/static/images/races/elf/male-01.webp
new file mode 100644
index 00000000..15acf5a2
Binary files /dev/null and b/static/images/races/elf/male-01.webp differ
diff --git a/static/images/races/goblin/female-01-mugshot.png b/static/images/races/goblin/female-01-mugshot.png
deleted file mode 100644
index 55afdef3..00000000
Binary files a/static/images/races/goblin/female-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/goblin/female-01.png b/static/images/races/goblin/female-01.png
deleted file mode 100644
index 2a58b090..00000000
Binary files a/static/images/races/goblin/female-01.png and /dev/null differ
diff --git a/static/images/races/goblin/female-01.webp b/static/images/races/goblin/female-01.webp
new file mode 100644
index 00000000..3f6f4d5a
Binary files /dev/null and b/static/images/races/goblin/female-01.webp differ
diff --git a/static/images/races/goblin/male-01-mugshot.png b/static/images/races/goblin/male-01-mugshot.png
deleted file mode 100644
index e8f86aa8..00000000
Binary files a/static/images/races/goblin/male-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/goblin/male-01.png b/static/images/races/goblin/male-01.png
deleted file mode 100644
index 158a547f..00000000
Binary files a/static/images/races/goblin/male-01.png and /dev/null differ
diff --git a/static/images/races/goblin/male-01.webp b/static/images/races/goblin/male-01.webp
new file mode 100644
index 00000000..4cf202b2
Binary files /dev/null and b/static/images/races/goblin/male-01.webp differ
diff --git a/static/images/races/human/female-01-mugshot.png b/static/images/races/human/female-01-mugshot.png
deleted file mode 100644
index 056affa9..00000000
Binary files a/static/images/races/human/female-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/human/female-01.png b/static/images/races/human/female-01.png
deleted file mode 100644
index 835ea8e4..00000000
Binary files a/static/images/races/human/female-01.png and /dev/null differ
diff --git a/static/images/races/human/female-01.webp b/static/images/races/human/female-01.webp
new file mode 100644
index 00000000..c0dee422
Binary files /dev/null and b/static/images/races/human/female-01.webp differ
diff --git a/static/images/races/human/male-01-mugshot.png b/static/images/races/human/male-01-mugshot.png
deleted file mode 100644
index 28de3e86..00000000
Binary files a/static/images/races/human/male-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/human/male-01.png b/static/images/races/human/male-01.png
deleted file mode 100644
index bd454869..00000000
Binary files a/static/images/races/human/male-01.png and /dev/null differ
diff --git a/static/images/races/human/male-01.webp b/static/images/races/human/male-01.webp
new file mode 100644
index 00000000..157f56d2
Binary files /dev/null and b/static/images/races/human/male-01.webp differ
diff --git a/static/images/races/legacy/02.png b/static/images/races/legacy/02.png
deleted file mode 100644
index 2448e41b..00000000
Binary files a/static/images/races/legacy/02.png and /dev/null differ
diff --git a/static/images/races/legacy/_01 copy 2.png b/static/images/races/legacy/_01 copy 2.png
deleted file mode 100644
index 7b221781..00000000
Binary files a/static/images/races/legacy/_01 copy 2.png and /dev/null differ
diff --git a/static/images/races/legacy/_01 copy 3.png b/static/images/races/legacy/_01 copy 3.png
deleted file mode 100644
index d7f6d7dc..00000000
Binary files a/static/images/races/legacy/_01 copy 3.png and /dev/null differ
diff --git a/static/images/races/legacy/_01 copy 4.png b/static/images/races/legacy/_01 copy 4.png
deleted file mode 100644
index acb55043..00000000
Binary files a/static/images/races/legacy/_01 copy 4.png and /dev/null differ
diff --git a/static/images/races/legacy/_01 copy.png b/static/images/races/legacy/_01 copy.png
deleted file mode 100644
index 1c534ff9..00000000
Binary files a/static/images/races/legacy/_01 copy.png and /dev/null differ
diff --git a/static/images/races/legacy/_01.png b/static/images/races/legacy/_01.png
deleted file mode 100644
index ad424429..00000000
Binary files a/static/images/races/legacy/_01.png and /dev/null differ
diff --git a/static/images/races/legacy/__01 copy 2.png b/static/images/races/legacy/__01 copy 2.png
deleted file mode 100644
index ea7487c2..00000000
Binary files a/static/images/races/legacy/__01 copy 2.png and /dev/null differ
diff --git a/static/images/races/legacy/__01 copy 3.png b/static/images/races/legacy/__01 copy 3.png
deleted file mode 100644
index c09e27e9..00000000
Binary files a/static/images/races/legacy/__01 copy 3.png and /dev/null differ
diff --git a/static/images/races/legacy/__01 copy 4.png b/static/images/races/legacy/__01 copy 4.png
deleted file mode 100644
index dd5561c6..00000000
Binary files a/static/images/races/legacy/__01 copy 4.png and /dev/null differ
diff --git a/static/images/races/legacy/__01 copy.png b/static/images/races/legacy/__01 copy.png
deleted file mode 100644
index 340062a3..00000000
Binary files a/static/images/races/legacy/__01 copy.png and /dev/null differ
diff --git a/static/images/races/legacy/__01.png b/static/images/races/legacy/__01.png
deleted file mode 100644
index 7b221781..00000000
Binary files a/static/images/races/legacy/__01.png and /dev/null differ
diff --git a/static/images/races/legacy/___01 copy 2.png b/static/images/races/legacy/___01 copy 2.png
deleted file mode 100644
index b429918b..00000000
Binary files a/static/images/races/legacy/___01 copy 2.png and /dev/null differ
diff --git a/static/images/races/legacy/___01 copy.png b/static/images/races/legacy/___01 copy.png
deleted file mode 100644
index 0b4d056b..00000000
Binary files a/static/images/races/legacy/___01 copy.png and /dev/null differ
diff --git a/static/images/races/legacy/___01.png b/static/images/races/legacy/___01.png
deleted file mode 100644
index d2232b2a..00000000
Binary files a/static/images/races/legacy/___01.png and /dev/null differ
diff --git a/static/images/races/legacy/____01.png b/static/images/races/legacy/____01.png
deleted file mode 100644
index 9a9b6c48..00000000
Binary files a/static/images/races/legacy/____01.png and /dev/null differ
diff --git a/static/images/races/npc/brog.webp b/static/images/races/npc/brog.webp
new file mode 100644
index 00000000..23673dcf
Binary files /dev/null and b/static/images/races/npc/brog.webp differ
diff --git a/static/images/races/npc/doctore-varro.webp b/static/images/races/npc/doctore-varro.webp
new file mode 100644
index 00000000..3be2a05a
Binary files /dev/null and b/static/images/races/npc/doctore-varro.webp differ
diff --git a/static/images/races/npc/grukk.webp b/static/images/races/npc/grukk.webp
new file mode 100644
index 00000000..3761d200
Binary files /dev/null and b/static/images/races/npc/grukk.webp differ
diff --git a/static/images/races/npc/mira.webp b/static/images/races/npc/mira.webp
new file mode 100644
index 00000000..bbc930e6
Binary files /dev/null and b/static/images/races/npc/mira.webp differ
diff --git a/static/images/races/npc/mother-alora.webp b/static/images/races/npc/mother-alora.webp
new file mode 100644
index 00000000..6b6e107c
Binary files /dev/null and b/static/images/races/npc/mother-alora.webp differ
diff --git a/static/images/races/npc/nibsy.webp b/static/images/races/npc/nibsy.webp
new file mode 100644
index 00000000..3af68d4a
Binary files /dev/null and b/static/images/races/npc/nibsy.webp differ
diff --git a/static/images/races/npc/oswald.webp b/static/images/races/npc/oswald.webp
new file mode 100644
index 00000000..b14bc7c1
Binary files /dev/null and b/static/images/races/npc/oswald.webp differ
diff --git a/static/images/races/troll/__female-01.webp b/static/images/races/troll/__female-01.webp
new file mode 100644
index 00000000..3a1a84c2
Binary files /dev/null and b/static/images/races/troll/__female-01.webp differ
diff --git a/static/images/races/troll/__male-01.webp b/static/images/races/troll/__male-01.webp
new file mode 100644
index 00000000..f391788f
Binary files /dev/null and b/static/images/races/troll/__male-01.webp differ
diff --git a/static/images/races/troll/female-01-mugshot.png b/static/images/races/troll/female-01-mugshot.png
deleted file mode 100644
index 3cd32eb2..00000000
Binary files a/static/images/races/troll/female-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/troll/female-01.png b/static/images/races/troll/female-01.png
deleted file mode 100644
index 4f9ef91d..00000000
Binary files a/static/images/races/troll/female-01.png and /dev/null differ
diff --git a/static/images/races/troll/female-01.webp b/static/images/races/troll/female-01.webp
new file mode 100644
index 00000000..089fba81
Binary files /dev/null and b/static/images/races/troll/female-01.webp differ
diff --git a/static/images/races/troll/male-01-mugshot.png b/static/images/races/troll/male-01-mugshot.png
deleted file mode 100644
index c764b7cc..00000000
Binary files a/static/images/races/troll/male-01-mugshot.png and /dev/null differ
diff --git a/static/images/races/troll/male-01.png b/static/images/races/troll/male-01.png
deleted file mode 100644
index aad5eb68..00000000
Binary files a/static/images/races/troll/male-01.png and /dev/null differ
diff --git a/static/images/races/troll/male-01.webp b/static/images/races/troll/male-01.webp
new file mode 100644
index 00000000..32030991
Binary files /dev/null and b/static/images/races/troll/male-01.webp differ
diff --git a/static/images/races/troll/troll-male-alt-1.webp b/static/images/races/troll/troll-male-alt-1.webp
new file mode 100644
index 00000000..500645bc
Binary files /dev/null and b/static/images/races/troll/troll-male-alt-1.webp differ
diff --git a/static/images/races/troll/troll-male-alt-2.webp b/static/images/races/troll/troll-male-alt-2.webp
new file mode 100644
index 00000000..244f2e44
Binary files /dev/null and b/static/images/races/troll/troll-male-alt-2.webp differ
diff --git a/static/images/shield-1455x2329.webp b/static/images/shield-1455x2329.webp
new file mode 100644
index 00000000..0b5f8611
Binary files /dev/null and b/static/images/shield-1455x2329.webp differ
diff --git a/static/images/ui/battleborn-logo-3405x2231.webp b/static/images/ui/battleborn-logo-3405x2231.webp
new file mode 100644
index 00000000..ed523c72
Binary files /dev/null and b/static/images/ui/battleborn-logo-3405x2231.webp differ
diff --git a/static/images/ui/button/center.webp b/static/images/ui/button/center.webp
new file mode 100644
index 00000000..ef204608
Binary files /dev/null and b/static/images/ui/button/center.webp differ
diff --git a/static/images/ui/button/left.webp b/static/images/ui/button/left.webp
new file mode 100644
index 00000000..0161c991
Binary files /dev/null and b/static/images/ui/button/left.webp differ
diff --git a/static/images/ui/button/right.webp b/static/images/ui/button/right.webp
new file mode 100644
index 00000000..319b76ac
Binary files /dev/null and b/static/images/ui/button/right.webp differ
diff --git a/static/images/ui/frame-header.webp b/static/images/ui/frame-header.webp
new file mode 100644
index 00000000..e5d65c66
Binary files /dev/null and b/static/images/ui/frame-header.webp differ
diff --git a/static/images/ui/frame.webp b/static/images/ui/frame.webp
new file mode 100644
index 00000000..2cf1efde
Binary files /dev/null and b/static/images/ui/frame.webp differ
diff --git a/static/videos/emperor-defeat.mp4 b/static/videos/emperor-defeat.mp4
new file mode 100644
index 00000000..f3d28524
Binary files /dev/null and b/static/videos/emperor-defeat.mp4 differ
diff --git a/svelte-game-server/bun.lockb b/svelte-game-server/bun.lockb
deleted file mode 100755
index a4cdf5ec..00000000
Binary files a/svelte-game-server/bun.lockb and /dev/null differ
diff --git a/svelte-game-server/events/pvp/get-random-opponent.js b/svelte-game-server/events/pvp/get-random-opponent.js
deleted file mode 100644
index ba6707b0..00000000
--- a/svelte-game-server/events/pvp/get-random-opponent.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// import json from '../../package.json' assert { type: 'json' };
-// import { isNewerVersion } from '../../helpers';
-// import mongodb from 'mongodb';
-// const { ObjectId } = mongodb;
-
-// const { version: serverVersion } = json;
-
-export default async ({ minXp, maxXp, count }, { mongo }) => {
-  const collection = mongo.collection('game-states');
-
-  const experience = { $gte: minXp };
-
-  if (maxXp) {
-    experience.$lte = maxXp;
-  }
-
-  const matches = await collection
-    .find({
-      $expr: { $gte: [{ $size: '$characters' }, count] },
-      experience
-    })
-    .toArray();
-
-  if (matches.length !== 0) {
-    const randomOpponent = matches[Math.floor(Math.random() * matches.length)];
-
-    return randomOpponent.characters;
-  }
-
-  return [];
-};
diff --git a/svelte-game-server/events/store-game-state.js b/svelte-game-server/events/store-game-state.js
deleted file mode 100644
index a5435362..00000000
--- a/svelte-game-server/events/store-game-state.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import mongodb from 'mongodb';
-const { ObjectId } = mongodb;
-
-export default async (data, { ws, mongo }) => {
-  const gameStates = mongo.collection('game-states');
-  const updated = new Date();
-
-  const users = mongo.collection('users');
-
-  const user = await users.findOne({
-    token: data.token
-  });
-
-  if (!user) throw Error('User not logged in');
-
-  await gameStates.updateOne(
-    {
-      _id: ObjectId(user._id)
-    },
-    { $set: { ...data, updated } },
-    {
-      upsert: true
-    }
-  );
-
-  return Date.now() - 2 * 60 * 60 * 1000;
-};
diff --git a/svelte-game-server/events/user/authenticate.js b/svelte-game-server/events/user/authenticate.js
deleted file mode 100644
index c8577230..00000000
--- a/svelte-game-server/events/user/authenticate.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import json from '../../package.json' assert { type: 'json' };
-import { isNewerVersion } from '../../helpers';
-import mongodb from 'mongodb';
-const { ObjectId } = mongodb;
-
-const { version: serverVersion } = json;
-
-export default async ({ token, clientVersion, isDev }, { mongo }) => {
-  if (isNewerVersion(clientVersion, serverVersion) && !isDev)
-    throw Error(
-      `Your client is outdated, please try again soon (${clientVersion} < ${serverVersion})`
-    );
-
-  const user = await mongo.collection('users').findOne({ token });
-
-  if (!user)
-    throw Error(
-      "Couldn't fetch gameState, if the problem persists please contact admin on discord"
-    );
-
-  const gameState = await mongo.collection('game-states').findOne({ _id: ObjectId(user._id) });
-
-  const data = {
-    serverTimestampSnapshot: Date.now() - 2 * 60 * 60 * 1000
-  };
-
-  if (gameState) data.gameState = gameState;
-
-  return data;
-};
diff --git a/svelte-game-server/events/user/login.js b/svelte-game-server/events/user/login.js
deleted file mode 100644
index 9a68c18f..00000000
--- a/svelte-game-server/events/user/login.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const {
-  password: { hash, verify }
-} = Bun;
-
-export default async ({ email, password }, { ws, mongo }) => {
-  if (!email || !password) throw Error('Invalid login credentials');
-
-  const token = ws.data; // Buns .data is the websocket ID
-  const users = mongo.collection('users');
-  const updated = new Date();
-
-  email = email.toLowerCase().trim();
-
-  const user = await users.findOne({
-    email
-  });
-
-  if (!user) throw Error('Invalid login credentials');
-
-  const correctPassword = await verify(password, user.password);
-
-  if (!correctPassword) throw Error('Invalid login credentials');
-
-  await users.updateOne(
-    {
-      email
-    },
-    { $set: { token, updated } }
-  );
-
-  return token;
-};
diff --git a/svelte-game-server/events/user/password/request-reset.js b/svelte-game-server/events/user/password/request-reset.js
deleted file mode 100644
index 4f420d6d..00000000
--- a/svelte-game-server/events/user/password/request-reset.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Resend } from 'resend';
-import hashids from 'hashids';
-import { validateEmail } from '../../../helpers';
-
-const { RESEND_API_KEY, PASSWORD_RESET_HASH } = process.env;
-
-const Hashids = new hashids(PASSWORD_RESET_HASH);
-
-export default async ({ email, url }, { mongo }) => {
-  const collection = mongo.collection('users');
-
-  const LCemail = email.toLowerCase().trim();
-
-  if (!validateEmail(LCemail)) throw Error('Invalid email address format, please try again');
-
-  const user = await collection.findOne({
-    email: LCemail
-  });
-
-  if (!user) return;
-
-  if (user.pwr > new Date().getTime()) return;
-
-  const pwr = new Date().getTime() + 60000;
-  collection.updateOne(
-    { email: LCemail },
-    {
-      $set: {
-        pwr
-      }
-    }
-  );
-
-  try {
-    const token = Hashids.encode(pwr);
-    await new Resend(RESEND_API_KEY).emails.send({
-      from: '"Battle Brawlers" <noreply@worldseed.eu>',
-      to: email,
-      subject: 'Battle-brawlers password reset request',
-      html: `<p>Hello ${user.email}!</p><p>Here is your link to reset your password:<br><a href="${url}/reset-password/${token}">${url}/reset-password/${token}</a><br>The link expires in 10 minutes.</p><p>You can't reply to this email.</p>`
-    });
-  } catch (e) {
-    console.error(e);
-    throw Error('Failed to send mail');
-  }
-};
diff --git a/svelte-game-server/events/user/password/reset-eligibility.js b/svelte-game-server/events/user/password/reset-eligibility.js
deleted file mode 100644
index 2fffcf79..00000000
--- a/svelte-game-server/events/user/password/reset-eligibility.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import hashids from 'hashids';
-
-const { PASSWORD_RESET_HASH } = process.env;
-const Hashids = new hashids(PASSWORD_RESET_HASH);
-
-export default async ({ secret }, { mongo }) => {
-  const collection = mongo.collection('users');
-
-  const [pwr] = Hashids.decode(secret);
-
-  if (!pwr) throw Error('Reset link is either invalid or expired');
-
-  const user = await collection.findOne({
-    pwr
-  });
-
-  if (!user) throw Error('Reset link is either invalid or expired');
-
-  // 20 minutes
-  if (user.pwr + 1200000 < new Date().getTime())
-    throw Error('Reset link is either invalid or expired');
-
-  return user;
-};
diff --git a/svelte-game-server/events/user/password/set-new.js b/svelte-game-server/events/user/password/set-new.js
deleted file mode 100644
index 96a900b5..00000000
--- a/svelte-game-server/events/user/password/set-new.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import hashids from 'hashids';
-
-const {
-  password: { hash, verify }
-} = Bun;
-
-const { PASSWORD_RESET_HASH } = process.env;
-const Hashids = new hashids(PASSWORD_RESET_HASH);
-
-export default async ({ password, secret }, { mongo }) => {
-  const collection = mongo.collection('users');
-
-  const [pwr] = Hashids.decode(secret);
-
-  if (password.length < 3) throw Error('Your password needs to be at least 3 characters long');
-
-  const { matchedCount } = await collection.updateOne(
-    { pwr },
-    {
-      $set: {
-        password: await hash(password),
-        pwr: null
-      }
-    }
-  );
-
-  if (matchedCount) return;
-
-  throw Error('Reset link is either invalid or expired');
-};
diff --git a/svelte-game-server/events/user/register.js b/svelte-game-server/events/user/register.js
deleted file mode 100644
index 380af313..00000000
--- a/svelte-game-server/events/user/register.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { validateEmail } from '../../helpers';
-
-const {
-  password: { hash }
-} = Bun;
-
-export default async ({ email, password }, { mongo }) => {
-  const collection = mongo.collection('users');
-  const correctEmailFormat = email.toLowerCase().trim();
-
-  if (!password) throw Error('You need to provide a password');
-  if (password.length < 3) throw Error('Your password needs to be at least 3 characters long');
-  if (!validateEmail(correctEmailFormat))
-    throw Error('Invalid email address format, please try again');
-
-  const exists = await collection.findOne({
-    email: correctEmailFormat
-  });
-
-  if (exists) throw Error('A user with that email address already exists');
-
-  const date = new Date();
-
-  await collection.insertOne({
-    email: correctEmailFormat,
-    password: await hash(password),
-    token: null,
-    pwr: null,
-    created: date,
-    updated: date
-  });
-};
diff --git a/svelte-game-server/helpers.js b/svelte-game-server/helpers.js
deleted file mode 100644
index 7dea44b5..00000000
--- a/svelte-game-server/helpers.js
+++ /dev/null
@@ -1,111 +0,0 @@
-var validateEmail = (email) =>
-  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-    String(email)
-  );
-
-const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
-
-const filterSplit = (array, condition) =>
-  array.reduce(
-    ([hits, misses], item) =>
-      condition(item) ? [[...hits, item], misses] : [hits, [...misses, item]],
-    [[], []]
-  );
-
-const emptySlot = (obj) => typeof obj !== 'object' || !Object.keys(obj).length;
-
-const filledSlot = (obj) => !emptySlot(obj);
-
-const intToArray = (int, fill = undefined) =>
-  Array(int)
-    .fill(0)
-    .map((_, i) => (fill !== undefined ? fill : i));
-
-const parseVersion = (versionString) => {
-  const [major, minor, patch] = versionString.split('.').map(Number);
-
-  return {
-    major,
-    minor,
-    patch
-  };
-};
-
-const isNewerVersion = (oldVer, newVer) => {
-  const oldParts = oldVer.split('.');
-  const newParts = newVer.split('.');
-  for (var i = 0; i < newParts.length; i++) {
-    const a = ~~newParts[i]; // parse int
-    const b = ~~oldParts[i]; // parse int
-    if (a > b) return true;
-    if (a < b) return false;
-  }
-  return false;
-};
-
-const capitalizeFirstLetter = (string) => `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
-
-const transform = (data) =>
-  Object.entries(data).reduce(
-    (a, [key, value]) =>
-      typeof value === 'object' && value?.length === undefined && Object.keys(value).length
-        ? {
-            ...a,
-            ...Object.entries(transform(value)).reduce(
-              (ac, [k, v]) => ({
-                ...ac,
-                [`${key}.${k}`]: v
-              }),
-              {}
-            )
-          }
-        : {
-            ...a,
-            [key]: value
-          },
-    {}
-  );
-
-const mongoReady = (data) =>
-  Object.entries(transform(data)).reduce((a, [key, value]) => {
-    const unset = value === '$unset' && value;
-    const mainKey = (unset || '$set').replace('$', '');
-    return {
-      ...a,
-      [mainKey]: {
-        ...a[mainKey],
-        [key]: !!unset || value
-      }
-    };
-  }, {});
-
-const typeSizes = {
-  undefined: () => 0,
-  boolean: () => 4,
-  number: () => 8,
-  string: (item) => 2 * item.length,
-  object: (item) =>
-    !item ? 0 : Object.keys(item).reduce((total, key) => sizeOf(key) + sizeOf(item[key]) + total, 0)
-};
-
-const sizeOf = (value) => typeSizes[typeof value](value);
-
-const readableTimestamp = (timestamp) => new Date(timestamp).toLocaleString();
-
-const onlyUnique = (value, index, self) => self.indexOf(value) === index;
-
-export {
-  validateEmail,
-  sleep,
-  filterSplit,
-  emptySlot,
-  filledSlot,
-  intToArray,
-  parseVersion,
-  isNewerVersion,
-  capitalizeFirstLetter,
-  mongoReady,
-  sizeOf,
-  readableTimestamp,
-  onlyUnique
-};
diff --git a/svelte-game-server/index.js b/svelte-game-server/index.js
deleted file mode 100644
index ce170e91..00000000
--- a/svelte-game-server/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import aaw from 'async-await-websockets';
-import { MongoClient } from 'mongodb';
-import { sizeOf } from './helpers';
-
-const { PORT, MONGO_CONNECT } = process.env;
-
-const client = new MongoClient(MONGO_CONNECT, {
-  useNewUrlParser: true,
-  useUnifiedTopology: true
-});
-
-client.connect((error, mongo) => {
-  if (error) throw error;
-
-  aaw(
-    'events',
-    { mongo: mongo.db('battle-brawlers') },
-    undefined,
-    ({ event, websocketKey, _async, error, body, _response }, log) => {
-      const { version } = body || {};
-      const toLog = [];
-
-      toLog.push(`${error ? '🔴' : '🟢'} ${event}`);
-      toLog.push(version || 'n/a');
-      toLog.push(websocketKey);
-      toLog.push(sizeOf(body));
-      if (error) toLog.push(error);
-
-      log(toLog.join(' | '));
-    }
-  );
-});
diff --git a/svelte.config.js b/svelte.config.js
deleted file mode 100644
index cdf29302..00000000
--- a/svelte.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import adapter from '@sveltejs/adapter-vercel';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-/** @type {import('@sveltejs/kit').Config} */
-export default {
-  kit: {
-    adapter: adapter(),
-    alias: {
-      '@': 'src/*'
-    }
-  },
-  compilerOptions: {
-    runes: true
-  },
-  preprocess: vitePreprocess(),
-  vitePlugin: {
-    // set to true for defaults or customize with object
-    inspector: {
-      toggleKeyCombo: 'meta-shift',
-      showToggleButton: 'never',
-      holdMode: true
-    },
-    // This ignores "compilerOptions.runes = true" for external packages
-    // Ideally this is removed once third party packages supports Svelte 5 runes
-    dynamicCompileOptions({ filename }) {
-      if (filename.includes('node_modules')) {
-        return { runes: undefined }; // or false, check what works
-      }
-    }
-  }
-};
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 208ca700..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "types": ["bun-types"],
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "moduleResolution": "bundler",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "exclude": ["src/**/*.js"]
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
-}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..c70deb86
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,99 @@
+{
+  "cleanUrls": false,
+  "buildCommand": "node scripts/vercel-build.js",
+  "outputDirectory": "dist",
+  "rewrites": [
+    {
+      "source": "/",
+      "destination": "/pages/index.html"
+    },
+    {
+      "source": "/_internal/characters/:key",
+      "destination": "/pages/_internal/characters/$key.html"
+    },
+    {
+      "source": "/brawlers/:index",
+      "destination": "/pages/brawlers/$index.html"
+    },
+    {
+      "source": "/reset-password/:secret",
+      "destination": "/pages/reset-password/$secret.html"
+    },
+    {
+      "source": "/pve/:id",
+      "destination": "/pages/pve/$id.html"
+    },
+    {
+      "source": "/teamplay/:id",
+      "destination": "/pages/teamplay/$id.html"
+    },
+    {
+      "source": "/_internal/spa-testing/:route*",
+      "destination": "/pages/_internal/spa-testing/$$route.html"
+    },
+    {
+      "source": "/_internal/:page",
+      "destination": "/pages/_internal/:page.html"
+    },
+    {
+      "source": "/:page",
+      "destination": "/pages/:page.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/components/(.*)\\.html",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=300, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/js/chunk-(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/css/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/vibe-hyperspeed/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/static/images/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=86400"
+        }
+      ]
+    }
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
index 1a0053a7..eebbab33 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,35 +1,203 @@
-import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import autoImport from 'sveltekit-autoimport';
-import tailwindcss from '@tailwindcss/vite';
-import { componentsTypedefsPlugin } from './scripts/generate-component-typedefs';
+import { existsSync, readdirSync, cpSync } from 'fs';
+import { resolve } from 'path';
+import * as esbuild from 'esbuild';
+import vibe from '@ape-egg/vite-plugin-vibe';
+
+import { entitySource } from './scripts/entity-source.js';
+import { imagegen } from './scripts/imagegen.js';
+import { syncAll, ensureWebp } from './scripts/images.js';
+import { scanRoutes } from './scripts/routes.js';
+
+// Dynamic routes scanned from pages/ ($param segment = dynamic), kept in memory.
+let routes = [];
+
+// Dev runs from the worktree dir (<project>/.claude/worktrees/<name>); surface
+// that name so testers can tell which worktree's client they're looking at.
+const worktree = process.cwd().includes('/.claude/worktrees/')
+  ? process.cwd().split('/').pop()
+  : '';
+process.env.VITE_WORKTREE = worktree;
+
+const pageInputs = Object.fromEntries(
+  readdirSync('pages', { recursive: true })
+    .filter((f) => typeof f === 'string' && f.endsWith('.html'))
+    .map((f) => [`pages/${f.replace(/\.html$/, '')}`, resolve('pages', f)]),
+);
 
 export default defineConfig({
-  build: {
-    sourcemap: true
+  server: { port: 3001, allowedHosts: ['.test'] },
+  define: { 'import.meta.env.VITE_WORKTREE': JSON.stringify(worktree) },
+  // @ape-egg/vibe is symlinked from the local monorepo for active framework
+  // development. Pre-bundling it into .vite/deps freezes a snapshot, so edits to
+  // the runtime source don't reach the browser until a forced re-optimize. Keep
+  // it (and its /boot + /hot-module-refresh entries) out of dep optimization so
+  // source changes are live.
+  optimizeDeps: {
+    exclude: ['@ape-egg/vibe', '@ape-egg/vibe/boot', '@ape-egg/vibe/hot-module-refresh'],
   },
-  server: {
-    fs: {
-      allow: ['..']
-    }
+  build: {
+    rollupOptions: { input: pageInputs },
   },
   plugins: [
-    tailwindcss(),
-    autoImport({
-      components: [{ name: './src/components', flat: true }],
-      mapping: {
-        ENV: `import ENV from '@/constants/ENV_VARS'`,
-        app: `import app from '@/app.svelte'`,
-        Howl: `import { Howl, Howler } from 'howler'`
-      },
-      module: {
-        svelte: ['onMount', 'onDestroy'],
-        '@/ts/use': ['tooltip'],
-        'tailwind-merge': ['twMerge as tw']
-      },
-      include: ['**/*.svelte']
+    vibe({
+      debug: true,
+      preview: {
+        enabled: false,
+        css: ['/css/index.css'],
+        stageAttrs: ['battleborn-brawlers', 'stylecheat'],
+        vibeUrl: '/node_modules/@ape-egg/vibe/index.js',
+        // codieUrl: '/node_modules/@ape-egg/codie/codie.js',
+      },
     }),
-    componentsTypedefsPlugin(),
-    sveltekit()
-  ]
+    {
+      // Serve /static/images/*.webp from /images masters: regenerate on master
+      // change, delete when the master is gone, then let Vite serve the file.
+      name: 'image-webp',
+      configureServer(server) {
+        server.middlewares.use(async (req, res, next) => {
+          const match = req.url && req.url.split('?')[0].match(/^\/static\/images\/(.+\.webp)$/);
+          if (!match) return next();
+          try {
+            await ensureWebp(decodeURIComponent(match[1]));
+          } catch (error) {
+            console.error('[image-webp]', error.message);
+          }
+          next();
+        });
+      },
+    },
+    {
+      name: 'bundle-runtime-fetched',
+      async closeBundle() {
+        await syncAll();
+        cpSync('components', 'dist/components', { recursive: true });
+        cpSync('static', 'dist/static', { recursive: true });
+
+        // Vibe fetches component HTML at runtime and rewrites each <script>'s
+        // imports into dynamic import('/js/...'). Those modules must be valid,
+        // self-contained ESM in the browser. Raw-copying them shipped source
+        // with bare specifiers (e.g. seedrandom) and import.meta.env that only
+        // Vite's dev server resolves, so every runtime-fetched component (the
+        // sidebar, ability bars, …) failed to load in production. Bundle js/
+        // with esbuild: deps inlined, env baked in, zero Vite at runtime.
+        const envKeys = [
+          'VITE_VERCEL_ENV',
+          'VITE_WEBSOCKET_CONNECT',
+          'VITE_AUTO_EMAIL',
+          'VITE_AUTO_PASSWORD',
+          'VITE_WORKTREE',
+          'VITE_EMAILS_ADMIN',
+          'VITE_EMAILS_TESTER',
+        ];
+        const define = Object.fromEntries(
+          envKeys.map((k) => [
+            `import.meta.env.${k}`,
+            process.env[k] !== undefined ? JSON.stringify(process.env[k]) : 'undefined',
+          ]),
+        );
+        const entryPoints = readdirSync('js', { recursive: true })
+          .filter((f) => typeof f === 'string' && f.endsWith('.js'))
+          .map((f) => `js/${f}`);
+        // Source uses browser-style root-relative imports ('/js/foo.js'); map
+        // them back to the project's js/ directory so esbuild can resolve them.
+        const rootRelative = {
+          name: 'root-relative-js',
+          setup(b) {
+            b.onResolve({ filter: /^\/js\// }, (args) => ({ path: resolve(`.${args.path}`) }));
+          },
+        };
+        await esbuild.build({
+          entryPoints,
+          outdir: 'dist/js',
+          outbase: 'js',
+          bundle: true,
+          splitting: true,
+          format: 'esm',
+          define,
+          minify: true,
+          plugins: [rootRelative],
+          logLevel: 'warning',
+        });
+      },
+    },
+    // This blob is only used for local development of overriding values directly to file
+    // from /characters/<id>
+    {
+      name: 'entity-source',
+      configureServer(server) {
+        server.middlewares.use('/__source', entitySource());
+      },
+    },
+    {
+      name: 'imagegen',
+      configureServer(server) {
+        server.middlewares.use('/__imagegen', imagegen());
+      },
+    },
+    {
+      name: 'mpa-routes',
+      configResolved() {
+        routes = scanRoutes();
+      },
+      // Hand each dynamic page its route template; boot.js reads window.__ROUTE__.
+      transformIndexHtml(html, ctx) {
+        const match = routes.find((r) => ctx.filename.endsWith(r.file.slice(1)));
+        if (!match) return;
+        return [
+          {
+            tag: 'script',
+            injectTo: 'head-prepend',
+            children: `window.__ROUTE__=${JSON.stringify(match.route)}`,
+          },
+        ];
+      },
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const url = req.url.split('?')[0];
+
+          for (const { regex, file } of routes) {
+            if (new RegExp(regex).test(url)) {
+              req.url = file;
+              return next();
+            }
+          }
+
+          const page = url === '/' ? 'index' : url.slice(1);
+          const pagePath = `pages/${page}.html`;
+          if (existsSync(pagePath)) {
+            req.url = `/${pagePath}`;
+            return next();
+          }
+
+          next();
+        });
+
+        const rescan = (file) => {
+          if (file.includes('/pages/') && file.endsWith('.html')) routes = scanRoutes();
+        };
+        server.watcher.on('add', rescan);
+        server.watcher.on('unlink', rescan);
+      },
+      // Same clean-URL → pages/ routing for `vite preview` over the compiled
+      // output (bun run preview:compiled), so local preview matches Vercel.
+      configurePreviewServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const url = req.url.split('?')[0];
+
+          for (const { regex, file } of routes) {
+            if (new RegExp(regex).test(url)) {
+              req.url = file;
+              return next();
+            }
+          }
+
+          const page = url === '/' ? 'index' : url.slice(1);
+          if (existsSync(`compiled/pages/${page}.html`)) req.url = `/pages/${page}.html`;
+
+          next();
+        });
+      },
+    },
+  ],
 });