Merge pull request 'Add Prometheus-backed home server status' (#10) from feature/home-server-status-prometheus into main

Reviewed-on: #10

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 .DS_Store
 .idea/
 .vscode/
+
+source-bestiary/
+source-drops/

ASSETS.md

@@ -1,14 +0,0 @@
-# PSO Peeps Site Assets
-
-## Included
-
-- `hero.jpg` — cropped from the supplied Pioneer 2 screenshot for the homepage hero area.
-
-## Still expected / placeholders
-
-- `logo.png` — PSO Peeps logo.
-- `icons/discord.png` — Discord icon.
-- `icons/mastodon.png` — Mastodon icon.
-- `icons/bluesky.png` — Bluesky icon.
-
-The HTML references these paths directly so the final assets can be dropped in without changing markup.

backend/app.py

@@ -1939,3 +1939,117 @@ def hardcore_leaderboard_points_combined():
     return jsonify(rows[:100])
 
 # --- end Hardcore stats aggregator -------------------------------------------
+
+
+@app.get("/server-status")
+@app.get("/api/server-status")
+def public_server_status():
+    import json
+    import os
+    import urllib.parse
+    import urllib.request
+
+    prometheus_url = os.environ.get("PROMETHEUS_URL", "http://5.0.0.20:9090").rstrip("/")
+
+    def prom_value(query):
+        url = prometheus_url + "/api/v1/query?" + urllib.parse.urlencode({"query": query})
+        try:
+            with urllib.request.urlopen(url, timeout=2.5) as resp:
+                data = json.loads(resp.read().decode("utf-8"))
+        except Exception:
+            return 0
+
+        if data.get("status") != "success":
+            return 0
+
+        total = 0.0
+        for result in data.get("data", {}).get("result", []):
+            value = result.get("value", [None, "0"])[1]
+            try:
+                total += float(value)
+            except (TypeError, ValueError):
+                pass
+
+        return int(total)
+
+    def q(metric, labels):
+        label_text = ",".join(f'{k}="{v}"' for k, v in labels.items())
+        return f'sum({metric}{{{label_text}}}) or vector(0)'
+
+    def newserv(region, service, ship, version):
+        return prom_value(q("pso_newserv_clients_connected", {
+            "region": region,
+            "service": service,
+            "ship": ship,
+            "version": version,
+        }))
+
+    def adhoc(region, game):
+        return prom_value(q("psppeeps_adhoc_connected_clients_by_product", {
+            "region": region,
+            "service": f"{region}-psppeeps-adhoc",
+            "ship": "psp",
+            "game": game,
+        }))
+
+    us = {
+        "alis_v2": newserv("us", "us-newserv-live", "live", "v2"),
+        "alis_v3": newserv("us", "us-newserv-live", "live", "v3"),
+        "alis_bb": newserv("us", "us-newserv-live", "live", "v4"),
+        "abion_hcbb": newserv("us", "us-newserv-hardcore", "hardcore", "v4"),
+        "adhoc_psp1": adhoc("us", "psp1"),
+        "adhoc_psp2i": adhoc("us", "psp2i"),
+    }
+
+    eu = {
+        "palma_v2": newserv("eu", "eu-newserv-live", "live", "v2"),
+        "palma_v3": newserv("eu", "eu-newserv-live", "live", "v3"),
+        "palma_bb": newserv("eu", "eu-newserv-live", "live", "v4"),
+        "aiedo_hcbb": newserv("eu", "eu-newserv-hardcore", "hardcore", "v4"),
+        "adhoc_psp1": adhoc("eu", "psp1"),
+        "adhoc_psp2i": adhoc("eu", "psp2i"),
+    }
+
+    us_total = sum(us.values())
+    eu_total = sum(eu.values())
+
+    return jsonify({
+        "servers": [
+            {
+                "label": "US Server",
+                "players": us_total,
+                "ships": [
+                    {"label": "Alis", "rows": [
+                        {"label": "V2", "players": us["alis_v2"]},
+                        {"label": "V3", "players": us["alis_v3"]},
+                        {"label": "BB", "players": us["alis_bb"]},
+                    ]},
+                    {"label": "Abion", "rows": [
+                        {"label": "HC/BB", "players": us["abion_hcbb"]},
+                    ]},
+                    {"label": "AdHoc-US", "rows": [
+                        {"label": "PSP1", "players": us["adhoc_psp1"]},
+                        {"label": "PSP2i", "players": us["adhoc_psp2i"]},
+                    ]},
+                ],
+            },
+            {
+                "label": "EU Server",
+                "players": eu_total,
+                "ships": [
+                    {"label": "Palma", "rows": [
+                        {"label": "V2", "players": eu["palma_v2"]},
+                        {"label": "V3", "players": eu["palma_v3"]},
+                        {"label": "BB", "players": eu["palma_bb"]},
+                    ]},
+                    {"label": "Aiedo", "rows": [
+                        {"label": "HC/BB", "players": eu["aiedo_hcbb"]},
+                    ]},
+                    {"label": "AdHoc-EU", "rows": [
+                        {"label": "PSP1", "players": eu["adhoc_psp1"]},
+                        {"label": "PSP2i", "players": eu["adhoc_psp2i"]},
+                    ]},
+                ],
+            },
+        ],
+    })

scripts/import-newserv-bestiary-tables.py

@@ -0,0 +1,87 @@
+#!/usr/bin/env python3
+import json
+from pathlib import Path
+
+SOURCE = Path("source-bestiary/local-newserv/system/tables/battle-params.json")
+OUT = Path("site/generated/bestiary/bb")
+
+DIFFICULTY_ORDER = {
+    "Normal": 0,
+    "Hard": 1,
+    "Very Hard": 2,
+    "Ultimate": 3,
+}
+
+def label_episode(table_name):
+    ep, mode = table_name.split("-", 1)
+    return ep.replace("Episode", "Episode "), mode
+
+def enemy_label(value):
+    return str(value).replace("_", " ").title()
+
+def main():
+    data = json.loads(SOURCE.read_text())
+    OUT.mkdir(parents=True, exist_ok=True)
+
+    rows = []
+
+    for table_name, difficulties in data.items():
+        episode, mode = label_episode(table_name)
+
+        for difficulty, entries in difficulties.items():
+            for entry in entries:
+                stats = entry.get("Stats", {})
+                resist = entry.get("ResistData", {})
+                enemies = stats.get("Enemies") or []
+
+                for enemy in enemies:
+                    rows.append({
+                        "version": "bb",
+                        "episode": episode,
+                        "mode": mode,
+                        "difficulty": difficulty,
+                        "enemy": enemy_label(enemy),
+                        "enemy_key": enemy,
+                        "bp_index": entry.get("BPIndex"),
+                        "hp": stats.get("HP", 0),
+                        "atp": stats.get("ATP", 0),
+                        "dfp": stats.get("DFP", 0),
+                        "mst": stats.get("MST", 0),
+                        "ata": stats.get("ATA", 0),
+                        "evp": stats.get("EVP", 0),
+                        "lck": stats.get("LCK", 0),
+                        "esp": stats.get("ESP", 0),
+                        "exp": stats.get("EXP", 0),
+                        "meseta": stats.get("Meseta", 0),
+                        "efr": resist.get("EFR", 0),
+                        "eic": resist.get("EIC", 0),
+                        "eth": resist.get("ETH", 0),
+                        "elt": resist.get("ELT", 0),
+                        "edk": resist.get("EDK", 0),
+                    })
+
+    rows.sort(key=lambda row: (
+        row["episode"],
+        row["mode"],
+        DIFFICULTY_ORDER.get(row["difficulty"], 999),
+        row["enemy"],
+        row["bp_index"] if row["bp_index"] is not None else 9999,
+    ))
+
+    (OUT / "bb.json").write_text(json.dumps(rows, indent=2, sort_keys=True) + "\n")
+    (OUT / "index.json").write_text(json.dumps({
+        "mode": "bestiary",
+        "label": "BB",
+        "tables": [{
+            "version": "bb",
+            "label": "BB",
+            "path": "bb.json",
+            "rows": len(rows),
+        }],
+    }, indent=2, sort_keys=True) + "\n")
+
+    print(f"bb: {len(rows)} rows -> {OUT / 'bb.json'}")
+    print(f"index -> {OUT / 'index.json'}")
+
+if __name__ == "__main__":
+    main()

scripts/import-newserv-drop-tables.py

@@ -0,0 +1,187 @@
+#!/usr/bin/env python3
+import json
+import re
+from pathlib import Path
+
+NEWSERV = Path.home() / ".local/share/github/psopeeps-newserv"
+PEEPS_OUT = Path("site/generated/drops/peeps")
+HARDCORE_OUT = Path("site/generated/drops/hardcore")
+
+PEEPS_TABLES = {
+    "v1": NEWSERV / "system/tables/rare-table-v1.json",
+    "v2": NEWSERV / "system/tables/rare-table-v2.json",
+    "v3": NEWSERV / "system/tables/rare-table-v3.json",
+    "bb": NEWSERV / "system/tables/rare-table-v4.json",
+}
+
+HARDCORE_TABLES = {
+    "bb": Path("source-drops/hardcore/rare-table-v4.json"),
+}
+
+def strip_json_comments(text):
+    out = []
+    in_str = False
+    esc = False
+    i = 0
+    while i < len(text):
+        c = text[i]
+        n = text[i + 1] if i + 1 < len(text) else ""
+
+        if in_str:
+            out.append(c)
+            if esc:
+                esc = False
+            elif c == "\\":
+                esc = True
+            elif c == '"':
+                in_str = False
+            i += 1
+            continue
+
+        if c == '"':
+            in_str = True
+            out.append(c)
+            i += 1
+            continue
+
+        if c == "/" and n == "/":
+            while i < len(text) and text[i] not in "\r\n":
+                i += 1
+            continue
+
+        out.append(c)
+        i += 1
+
+    return "".join(out)
+
+def quote_hex_numbers(text):
+    return re.sub(r'(?<!["\w])0x[0-9A-Fa-f]+', lambda m: f'"{m.group(0)}"', text)
+
+
+def remove_trailing_commas(text):
+    out = []
+    in_str = False
+    esc = False
+    i = 0
+
+    while i < len(text):
+        c = text[i]
+
+        if in_str:
+            out.append(c)
+            if esc:
+                esc = False
+            elif c == "\\":
+                esc = True
+            elif c == '"':
+                in_str = False
+            i += 1
+            continue
+
+        if c == '"':
+            in_str = True
+            out.append(c)
+            i += 1
+            continue
+
+        if c == ",":
+            j = i + 1
+            while j < len(text) and text[j] in " \t\r\n":
+                j += 1
+            if j < len(text) and text[j] in "}]":
+                i += 1
+                continue
+
+        out.append(c)
+        i += 1
+
+    return "".join(out)
+
+def load_newserv_jsonish(path):
+    text = path.read_text(encoding="utf-8", errors="replace")
+    text = strip_json_comments(text)
+    text = quote_hex_numbers(text)
+    text = remove_trailing_commas(text)
+    return json.loads(text)
+
+def normalize_item_code(value):
+    if isinstance(value, str) and value.startswith("0x"):
+        return "0x" + value[2:].upper()
+    if isinstance(value, int):
+        return f"0x{value:06X}"
+    return str(value)
+
+def flatten_table(version, table):
+    rows = []
+
+    for game_mode, episodes in table.items():
+        if not isinstance(episodes, dict):
+            continue
+        for episode, difficulties in episodes.items():
+            if not isinstance(difficulties, dict):
+                continue
+            for difficulty, section_ids in difficulties.items():
+                if not isinstance(section_ids, dict):
+                    continue
+                for section_id, sources in section_ids.items():
+                    if not isinstance(sources, dict):
+                        continue
+                    for source, drops in sources.items():
+                        if not isinstance(drops, list):
+                            continue
+                        for drop in drops:
+                            if not isinstance(drop, list) or len(drop) < 2:
+                                continue
+
+                            rows.append({
+                                "version": version,
+                                "mode": str(game_mode),
+                                "episode": str(episode),
+                                "difficulty": str(difficulty),
+                                "section_id": str(section_id),
+                                "source": str(source),
+                                "rate": str(drop[0]),
+                                "item_code": normalize_item_code(drop[1]),
+                                "item": str(drop[2]) if len(drop) >= 3 and drop[2] else "",
+                            })
+
+    return rows
+
+def write_group(mode, label, tables, out_dir):
+    out_dir.mkdir(parents=True, exist_ok=True)
+
+    index = {
+        "mode": mode,
+        "label": label,
+        "tables": [],
+    }
+
+    labels = {"v1": "V1", "v2": "V2", "v3": "V3", "bb": "BB"}
+
+    for version, src in tables.items():
+        table = load_newserv_jsonish(src)
+        rows = flatten_table(version, table)
+
+        out_name = f"{version}.json"
+        out_path = out_dir / out_name
+        out_path.write_text(json.dumps(rows, indent=2, sort_keys=True) + "\n")
+
+        index["tables"].append({
+            "version": version,
+            "label": labels[version],
+            "path": out_name,
+            "rows": len(rows),
+        })
+
+        print(f"{mode} {version}: {len(rows)} rows -> {out_path}")
+
+    index_path = out_dir / "index.json"
+    index_path.write_text(json.dumps(index, indent=2, sort_keys=True) + "\n")
+    print(f"{mode} index -> {index_path}")
+
+def main():
+    write_group("peeps", "Peeps", PEEPS_TABLES, PEEPS_OUT)
+    write_group("hardcore", "Hardcore", HARDCORE_TABLES, HARDCORE_OUT)
+
+if __name__ == "__main__":
+    main()

site/ASSETS.md

@@ -1,14 +0,0 @@
-# PSO Peeps Site Assets
-
-## Included
-
-- `hero.jpg` — cropped from the supplied Pioneer 2 screenshot for the homepage hero area.
-
-## Still expected / placeholders
-
-- `logo.png` — PSO Peeps logo.
-- `icons/discord.png` — Discord icon.
-- `icons/mastodon.png` — Mastodon icon.
-- `icons/bluesky.png` — Bluesky icon.
-
-The HTML references these paths directly so the final assets can be dropped in without changing markup.

site/bestiary-tables.js

@@ -0,0 +1,389 @@
+(() => {
+  "use strict";
+
+  const qs = (sel) => document.querySelector(sel);
+
+  const DIFFICULTY_ORDER = {
+    Normal: 0,
+    Hard: 1,
+    "Very Hard": 2,
+    Ultimate: 3,
+  };
+
+  const NUMERIC_COLUMNS = new Set([
+    "hp", "atp", "dfp", "mst", "ata", "evp", "lck", "esp", "exp",
+    "efr", "eic", "eth", "elt", "edk",
+  ]);
+
+  const BP_TIERS = {
+    0: { hp: 1.00, atp: 1.00, exp: 1.00 },
+    1: { hp: 1.10, atp: 1.01, exp: 1.10 },
+    2: { hp: 1.15, atp: 1.02, exp: 1.15 },
+    3: { hp: 1.20, atp: 1.03, exp: 1.20 },
+    4: { hp: 1.30, atp: 1.04, exp: 1.30 },
+    5: { hp: 1.40, atp: 1.05, exp: 1.40 },
+    6: { hp: 1.50, atp: 1.06, exp: 1.50 },
+    7: { hp: 1.75, atp: 1.07, exp: 1.75 },
+    8: { hp: 2.00, atp: 1.08, exp: 2.00 },
+    9: { hp: 2.50, atp: 1.09, exp: 2.50 },
+    10: { hp: 3.00, atp: 1.10, exp: 3.00 },
+    11: { hp: 4.00, atp: 1.10, exp: 3.00 },
+  };
+
+  const COLUMN_GROUPS = {
+    stats: [
+      ["enemy", "Enemy"],
+      ["mode", "Mode"],
+      ["episode", "Episode"],
+      ["difficulty", "Difficulty"],
+      ["hp", "HP"],
+      ["atp", "ATP"],
+      ["dfp", "DFP"],
+      ["ata", "ATA"],
+      ["evp", "EVP"],
+      ["lck", "LCK"],
+      ["exp", "EXP"],
+    ],
+    resists: [
+      ["enemy", "Enemy"],
+      ["mode", "Mode"],
+      ["episode", "Episode"],
+      ["difficulty", "Difficulty"],
+      ["efr", "EFR"],
+      ["eic", "EIC"],
+      ["eth", "ETH"],
+      ["elt", "ELT"],
+      ["edk", "EDK"],
+      ["esp", "ESP"],
+    ],
+    all: [
+      ["enemy", "Enemy"],
+      ["mode", "Mode"],
+      ["episode", "Episode"],
+      ["difficulty", "Difficulty"],
+      ["hp", "HP"],
+      ["atp", "ATP"],
+      ["dfp", "DFP"],
+      ["mst", "MST"],
+      ["ata", "ATA"],
+      ["evp", "EVP"],
+      ["lck", "LCK"],
+      ["esp", "ESP"],
+      ["exp", "EXP"],
+      ["efr", "EFR"],
+      ["eic", "EIC"],
+      ["eth", "ETH"],
+      ["elt", "ELT"],
+      ["edk", "EDK"],
+    ],
+  };
+
+  function currentColumns() {
+    const view = qs("#bestiary-view")?.value || "stats";
+    return COLUMN_GROUPS[view] || COLUMN_GROUPS.stats;
+  }
+
+  const state = {
+    rows: [],
+    index: null,
+    table: null,
+    page: 1,
+    pageSize: 100,
+    sort: {
+      key: "enemy",
+      dir: "asc",
+    },
+    filters: {
+      mode: "",
+      episode: "",
+      difficulty: "",
+      search: "",
+    },
+  };
+
+  function esc(value) {
+    return String(value ?? "")
+      .replaceAll("&", "&")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#039;");
+  }
+
+  async function fetchJson(path) {
+    const res = await fetch(path, { cache: "no-store" });
+    if (!res.ok) throw new Error(`${path}: HTTP ${res.status}`);
+    return res.json();
+  }
+
+  function setStatus(message, kind = "") {
+    const box = qs("#bestiary-placeholder");
+    if (!box) return;
+    box.innerHTML = `<div class="drops-status ${kind ? `drops-status--${kind}` : ""}">${esc(message)}</div>`;
+  }
+
+  function uniqueSorted(rows, key) {
+    return [...new Set(rows.map((row) => row[key]).filter(Boolean))]
+      .sort((a, b) => String(a).localeCompare(String(b), undefined, { numeric: true }));
+  }
+
+  function fillSelect(select, values, allLabel) {
+    if (!select) return;
+    const previous = select.value;
+    select.innerHTML = `<option value="">${esc(allLabel)}</option>`;
+    for (const value of values) {
+      const opt = document.createElement("option");
+      opt.value = value;
+      opt.textContent = value;
+      select.appendChild(opt);
+    }
+    if ([...select.options].some((opt) => opt.value === previous)) {
+      select.value = previous;
+    }
+  }
+
+  function orderedDifficulties(rows) {
+    const present = new Set(rows.map((row) => row.difficulty).filter(Boolean));
+    return Object.keys(DIFFICULTY_ORDER).filter((value) => present.has(value));
+  }
+
+  function bpTier() {
+    const select = qs("#bestiary-tier");
+    const raw = String(select?.value || "");
+    const label = String(select?.selectedOptions?.[0]?.textContent || "");
+    const match = raw.match(/(\d+)$/) || label.match(/(\d+)/);
+    const tier = match ? Number(match[1]) : 0;
+    return BP_TIERS[tier] || BP_TIERS[0];
+  }
+
+  function xpBonusMultiplier() {
+    return Number(qs("#bestiary-xp-bonus")?.value || 1);
+  }
+
+  function displayValue(row, key) {
+    const value = row[key];
+
+    if (key === "exp" && row.difficulty !== "Ultimate") {
+      return Math.round(Number(value || 0) * xpBonusMultiplier());
+    }
+
+    if (row.difficulty !== "Ultimate") {
+      return value ?? "";
+    }
+
+    const tier = bpTier();
+
+    if (key === "hp") {
+      return Math.round(Number(value || 0) * tier.hp);
+    }
+
+    if (key === "atp") {
+      return Math.round(Number(value || 0) * tier.atp);
+    }
+
+    if (key === "exp" && tier.exp !== null) {
+      return Math.round(Number(value || 0) * tier.exp * xpBonusMultiplier());
+    }
+
+    return value ?? "";
+  }
+
+  function hasAnyBestiaryValue(row) {
+    const keys = ["hp", "atp", "dfp", "mst", "ata", "evp", "lck", "esp", "exp", "efr", "eic", "eth", "elt", "edk"];
+    return keys.some((key) => Number(row[key] || 0) !== 0);
+  }
+
+  function visibleRows() {
+    const search = state.filters.search.trim().toLowerCase();
+
+    return state.rows.filter((row) => {
+      if (!hasAnyBestiaryValue(row)) return false;
+      if (state.filters.mode && row.mode !== state.filters.mode) return false;
+      if (state.filters.episode && row.episode !== state.filters.episode) return false;
+      if (state.filters.difficulty && row.difficulty !== state.filters.difficulty) return false;
+
+      if (search) {
+        const haystack = [row.enemy, row.enemy_key, row.mode, row.episode, row.difficulty]
+          .join(" ")
+          .toLowerCase();
+        if (!haystack.includes(search)) return false;
+      }
+
+      return true;
+    });
+  }
+
+  function sortValue(row, key) {
+    if (key === "difficulty") return DIFFICULTY_ORDER[row.difficulty] ?? 999;
+    if (NUMERIC_COLUMNS.has(key)) return Number(displayValue(row, key) || 0);
+    return row[key] || "";
+  }
+
+  function sortedRows(rows) {
+    const { key, dir } = state.sort;
+    const factor = dir === "desc" ? -1 : 1;
+
+    return [...rows].sort((a, b) => {
+      const av = sortValue(a, key);
+      const bv = sortValue(b, key);
+
+      if (typeof av === "number" && typeof bv === "number") {
+        return (av - bv) * factor;
+      }
+
+      return String(av).localeCompare(String(bv), undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }) * factor;
+    });
+  }
+
+  function sortHeader(key, label) {
+    const active = state.sort.key === key;
+    const arrow = active ? (state.sort.dir === "asc" ? "▲" : "▼") : "";
+    const ariaSort = active ? (state.sort.dir === "asc" ? "ascending" : "descending") : "none";
+
+    return `<th aria-sort="${ariaSort}">
+      <button class="drops-sort-button ${active ? "is-active" : ""}" type="button" data-bestiary-sort="${esc(key)}">
+        <span>${esc(label)}</span>
+        <span class="drops-sort-arrow" aria-hidden="true">${arrow}</span>
+      </button>
+    </th>`;
+  }
+
+  function renderTable() {
+    const box = qs("#bestiary-placeholder");
+    if (!box) return;
+
+    const rows = sortedRows(visibleRows());
+    const totalPages = Math.max(1, Math.ceil(rows.length / state.pageSize));
+    state.page = Math.min(Math.max(1, state.page), totalPages);
+
+    const start = (state.page - 1) * state.pageSize;
+    const shown = rows.slice(start, start + state.pageSize);
+    const end = start + shown.length;
+
+    const columns = currentColumns();
+    if (!columns.some(([key]) => key === state.sort.key)) {
+      state.sort.key = "enemy";
+      state.sort.dir = "asc";
+    }
+
+    const body = shown.map((row) => `
+      <tr>
+        ${columns.map(([key]) => `<td data-label="${esc(key)}">${esc(displayValue(row, key))}</td>`).join("")}
+      </tr>
+    `).join("");
+
+    const rangeText = rows.length
+      ? ` Showing ${Number(start + 1).toLocaleString()}-${Number(end).toLocaleString()}.`
+      : "";
+
+    box.innerHTML = `
+      <div class="drops-summary">
+        <div>
+          <strong>BB Bestiary</strong>
+          <span>${rows.length.toLocaleString()} matching rows.${rangeText}</span>
+        </div>
+        <span>${state.rows.length.toLocaleString()} total rows</span>
+      </div>
+      <div class="drops-table-wrap">
+        <table class="drops-table bestiary-table">
+          <thead>
+            <tr>${columns.map(([key, label]) => sortHeader(key, label)).join("")}</tr>
+          </thead>
+          <tbody>${body || `<tr><td colspan="${columns.length}">No enemies match these filters.</td></tr>`}</tbody>
+        </table>
+      </div>
+      <div class="leaderboard-pager drops-pager">
+        <button type="button" data-bestiary-page="prev" ${state.page <= 1 ? "disabled" : ""}>Previous</button>
+        <span>Page ${state.page} of ${totalPages}</span>
+        <button type="button" data-bestiary-page="next" ${state.page >= totalPages ? "disabled" : ""}>Next</button>
+      </div>
+    `;
+  }
+
+  function populateFilters() {
+    fillSelect(qs("#bestiary-mode"), uniqueSorted(state.rows, "mode"), "All modes");
+    fillSelect(qs("#bestiary-episode"), uniqueSorted(state.rows, "episode"), "All episodes");
+    fillSelect(qs("#bestiary-difficulty"), orderedDifficulties(state.rows), "All difficulties");
+  }
+
+  async function loadBestiary() {
+    setStatus("Loading BB bestiary...");
+
+    state.index = await fetchJson("generated/bestiary/bb/index.json");
+    state.table = state.index.tables?.[0] || null;
+    state.rows = await fetchJson(`generated/bestiary/bb/${state.table.path}`);
+
+    populateFilters();
+    renderTable();
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    qs("#bestiary-mode")?.addEventListener("change", (event) => {
+      state.filters.mode = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#bestiary-episode")?.addEventListener("change", (event) => {
+      state.filters.episode = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#bestiary-difficulty")?.addEventListener("change", (event) => {
+      state.filters.difficulty = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#bestiary-view")?.addEventListener("change", () => {
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#bestiary-search")?.addEventListener("input", (event) => {
+      state.filters.search = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#bestiary-tier")?.addEventListener("change", () => {
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#bestiary-xp-bonus")?.addEventListener("change", () => {
+      renderTable();
+    });
+
+    qs("#bestiary-placeholder")?.addEventListener("click", (event) => {
+      const pageButton = event.target.closest("[data-bestiary-page]");
+      if (pageButton) {
+        state.page += pageButton.dataset.bestiaryPage === "next" ? 1 : -1;
+        renderTable();
+        return;
+      }
+
+      const button = event.target.closest("[data-bestiary-sort]");
+      if (!button) return;
+
+      const key = button.dataset.bestiarySort;
+      if (state.sort.key === key) {
+        state.sort.dir = state.sort.dir === "asc" ? "desc" : "asc";
+      } else {
+        state.sort.key = key;
+        state.sort.dir = "asc";
+      }
+
+      state.page = 1;
+      renderTable();
+    });
+
+    loadBestiary().catch((err) => {
+      setStatus(err?.message || "Unable to load bestiary.", "error");
+    });
+  });
+})();

site/bestiary.html

@@ -8,7 +8,7 @@
   <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="style.css?v=bestiary-table-viewer-20260613-3">
   <script src="app.js?v=saves-synced-20260609-2" defer></script>
 </head>
 <body>
@@ -33,21 +33,46 @@
         <form class="placeholder-form">
           <label for="bestiary-version">Version</label>
           <select id="bestiary-version">
-            <option>V2</option>
-            <option>V3</option>
-            <option>V4</option>
+            <option value="bb">BB</option>
           </select>
 
-          <label for="bestiary-episode" data-bestiary-episode-wrap hidden>Episode</label>
-          <select id="bestiary-episode" data-bestiary-episode-wrap hidden>
-            <option>Episode 1</option>
-            <option>Episode 2</option>
-            <option>Episode 4</option>
+          <label for="bestiary-mode">Mode</label>
+          <select id="bestiary-mode">
+            <option value="">All modes</option>
           </select>
 
+          <label for="bestiary-episode">Episode</label>
+          <select id="bestiary-episode">
+            <option value="">All episodes</option>
+          </select>
+
+          <label for="bestiary-difficulty">Difficulty</label>
+          <select id="bestiary-difficulty">
+            <option value="">All difficulties</option>
+          </select>
+
+          <label for="bestiary-xp-bonus">XP Bonus</label>
+          <select id="bestiary-xp-bonus">
+            <option value="1">No modifier</option>
+            <option value="5">5x</option>
+            <option value="10">10x</option>
+          </select>
+          <p class="drops-field-note">Applies EXP multiplier only.</p>
+
+          <label for="bestiary-view">View</label>
+          <select id="bestiary-view">
+            <option value="stats">Stats</option>
+            <option value="resists">Resists</option>
+            <option value="all">All</option>
+          </select>
+
+          <label for="bestiary-search">Search</label>
+          <input id="bestiary-search" type="search" placeholder="Enemy name...">
+
           <label for="bestiary-tier" data-bestiary-tier-wrap>BP Tier</label>
           <select id="bestiary-tier" data-bestiary-tier-wrap>
-            <option>BP+1</option><option>BP+2</option><option>BP+3</option>
+            
+            <option value="0">No modifier</option><option>BP+1</option><option>BP+2</option><option>BP+3</option>
             <option>BP+4</option><option>BP+5</option><option>BP+6</option>
             <option>BP+7</option><option>BP+8</option><option>BP+9</option>
             <option>BP+10</option><option>BP+11</option>
@@ -89,6 +114,6 @@
       </div>
 </footer>
   </div>
-  <script src="placeholder-pages.js?v=basic-pages-fixed-1" defer></script>
+  <script src="bestiary-tables.js?v=hide-zero-bestiary-rows-1" defer></script>
 </body>
 </html>

site/drop-tables.js

@@ -0,0 +1,498 @@
+(() => {
+  "use strict";
+
+  const qs = (sel) => document.querySelector(sel);
+
+  const state = {
+    index: null,
+    rows: [],
+    table: null,
+    filters: {
+      mode: "",
+      episode: "",
+      difficulty: "",
+      section: "",
+      search: "",
+    },
+    sort: {
+      key: "source",
+      dir: "asc",
+    },
+    page: 1,
+    pageSize: 100,
+  };
+
+  const RARE_MODIFIER_VERSIONS = new Set(["v2", "bb"]);
+
+  function esc(value) {
+    return String(value ?? "")
+      .replaceAll("&", "&")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#039;");
+  }
+
+  function labelValue(value) {
+    return String(value || "")
+      .replace(/^Episode(\d+)$/, "Episode $1")
+      .replace(/^VeryHard$/, "Very Hard")
+      .replaceAll("_", " ");
+  }
+
+  function setStatus(message, kind = "") {
+    const box = qs("#drops-placeholder");
+    if (!box) return;
+    box.innerHTML = `<div class="drops-status ${kind ? `drops-status--${kind}` : ""}">${esc(message)}</div>`;
+  }
+
+  function currentVersion() {
+    return qs("#drops-version")?.value || "v1";
+  }
+
+  function rareModifierEnabled() {
+    const selectedMode = qs("#drops-mode")?.value || "peeps";
+    return selectedMode === "peeps" && RARE_MODIFIER_VERSIONS.has(currentVersion());
+  }
+
+  function currentRareModifier() {
+    const select = qs("#drops-rare-modifier");
+    const pct = rareModifierEnabled() ? Number(select?.value || 0) : 0;
+    const label = select?.selectedOptions?.[0]?.textContent || "No modifier";
+    return { pct, label, multiplier: 1 + (pct / 100) };
+  }
+
+  function modifierMultiplierLabel(modifier) {
+    return `x${modifier.multiplier.toFixed(3).replace(/0+$/, "").replace(/\.$/, "")}`;
+  }
+
+  function updateRareModifierControls() {
+    const wrap = qs("#drops-rare-modifier-wrap");
+    const v2Note = qs("#drops-v2-note");
+    const select = qs("#drops-rare-modifier");
+    const enabled = rareModifierEnabled();
+
+    if (wrap) wrap.hidden = !enabled;
+    if (v2Note) v2Note.hidden = currentVersion() !== "v2";
+
+    if (!enabled && select) {
+      select.value = "0";
+    }
+  }
+
+  function formatOddsDenominator(value) {
+    if (!Number.isFinite(value) || value <= 0) return "—";
+
+    if (value >= 1000) {
+      return Math.round(value).toLocaleString();
+    }
+
+    if (value >= 100) {
+      return value.toFixed(1).replace(/\.0$/, "");
+    }
+
+    return value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+  }
+
+  function adjustedRate(rate) {
+    const text = String(rate || "");
+    const match = text.match(/^(\d+)\/(\d+)$/);
+    if (!match) return text || "—";
+
+    const num = Number(match[1]);
+    const den = Number(match[2]);
+    const modifier = currentRareModifier();
+
+    if (!rareModifierEnabled() || modifier.pct <= 0) {
+      return text;
+    }
+
+    const baseProbability = num / den;
+    const adjustedProbability = Math.min(1, baseProbability * modifier.multiplier);
+
+    if (adjustedProbability >= 1) {
+      return "1/1";
+    }
+
+    return `1/${formatOddsDenominator(1 / adjustedProbability)}`;
+  }
+
+  function rateCellHtml(rate) {
+    const base = String(rate || "—");
+    const adjusted = adjustedRate(base);
+    const modifier = currentRareModifier();
+
+    if (!rareModifierEnabled() || modifier.pct <= 0 || adjusted === base) {
+      return esc(base);
+    }
+
+    return esc(adjusted);
+  }
+
+  async function fetchJson(path) {
+    const res = await fetch(path, { cache: "no-store" });
+    if (!res.ok) throw new Error(`${path}: HTTP ${res.status}`);
+    return res.json();
+  }
+
+  function uniqueSorted(rows, key) {
+    return [...new Set(rows.map((row) => row[key]).filter(Boolean))]
+      .sort((a, b) => String(a).localeCompare(String(b)));
+  }
+
+  function fillSelect(select, values, allLabel) {
+    if (!select) return;
+    const previous = select.value;
+    select.innerHTML = `<option value="">${esc(allLabel)}</option>`;
+    for (const value of values) {
+      const opt = document.createElement("option");
+      opt.value = value;
+      opt.textContent = labelValue(value);
+      select.appendChild(opt);
+    }
+    if ([...select.options].some((opt) => opt.value === previous)) {
+      select.value = previous;
+    }
+  }
+
+  function populateVersions(index) {
+    const select = qs("#drops-version");
+    if (!select) return;
+
+    const previous = select.value || "v1";
+    select.innerHTML = "";
+
+    for (const table of index.tables || []) {
+      const opt = document.createElement("option");
+      opt.value = table.version;
+      opt.textContent = table.label;
+      select.appendChild(opt);
+    }
+
+    if ([...select.options].some((opt) => opt.value === previous)) {
+      select.value = previous;
+    }
+  }
+
+  function orderedDifficultyValues(rows) {
+    const order = ["Normal", "Hard", "VeryHard", "Ultimate"];
+    const present = new Set(rows.map((row) => row.difficulty).filter(Boolean));
+    const ordered = order.filter((value) => present.has(value));
+    const extras = [...present]
+      .filter((value) => !order.includes(value))
+      .sort((a, b) => String(a).localeCompare(String(b)));
+    return [...ordered, ...extras];
+  }
+
+  function populateFilters(rows) {
+    fillSelect(qs("#drops-rare-mode"), uniqueSorted(rows, "mode"), "All modes");
+    fillSelect(qs("#drops-episode"), uniqueSorted(rows, "episode"), "All episodes");
+    fillSelect(qs("#drops-difficulty"), orderedDifficultyValues(rows), "All difficulties");
+    fillSelect(qs("#drops-section"), uniqueSorted(rows, "section_id"), "All Section IDs");
+  }
+
+  const SORT_COLUMNS = [
+    ["mode", "Mode"],
+    ["episode", "Episode"],
+    ["difficulty", "Difficulty"],
+    ["section_id", "SECID"],
+    ["source", "Source"],
+    ["item", "Item"],
+    ["item_code", "Code"],
+    ["rate", "Rate"],
+  ];
+
+  const DIFFICULTY_SORT_ORDER = {
+    Normal: 0,
+    Hard: 1,
+    VeryHard: 2,
+    Ultimate: 3,
+  };
+
+  function rateSortValue(rate) {
+    const text = String(rate || "").replaceAll(",", "");
+    const match = text.match(/^(\d+(?:\.\d+)?)\/(\d+(?:\.\d+)?)$/);
+    if (!match) return Number.NEGATIVE_INFINITY;
+
+    const num = Number(match[1]);
+    const den = Number(match[2]);
+
+    if (!Number.isFinite(num) || !Number.isFinite(den) || den <= 0) {
+      return Number.NEGATIVE_INFINITY;
+    }
+
+    // Sort by actual probability, same as percentage conversion.
+    // 5/8 => 0.625, 1/8192 => 0.000122...
+    return num / den;
+  }
+
+  function sortValue(row, key) {
+    if (key === "difficulty") {
+      return DIFFICULTY_SORT_ORDER[row.difficulty] ?? 999;
+    }
+
+    if (key === "rate") {
+      return rateSortValue(adjustedRate(row.rate));
+    }
+
+    if (key === "item") {
+      return row.item || row.item_code || "";
+    }
+
+    return row[key] || "";
+  }
+
+  function sortedRows(rows) {
+    const { key, dir } = state.sort;
+    const factor = dir === "desc" ? -1 : 1;
+
+    return [...rows].sort((a, b) => {
+      const av = sortValue(a, key);
+      const bv = sortValue(b, key);
+
+      if (typeof av === "number" && typeof bv === "number") {
+        return (av - bv) * factor;
+      }
+
+      return String(av).localeCompare(String(bv), undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }) * factor;
+    });
+  }
+
+  function sortHeader(key, label) {
+    const active = state.sort.key === key;
+    const arrow = active ? (state.sort.dir === "asc" ? "▲" : "▼") : "";
+    const ariaSort = active ? (state.sort.dir === "asc" ? "ascending" : "descending") : "none";
+
+    return `<th aria-sort="${ariaSort}">
+      <button class="drops-sort-button ${active ? "is-active" : ""}" type="button" data-drops-sort="${esc(key)}">
+        <span>${esc(label)}</span>
+        <span class="drops-sort-arrow" aria-hidden="true">${arrow}</span>
+      </button>
+    </th>`;
+  }
+
+  function visibleRows() {
+    const search = state.filters.search.trim().toLowerCase();
+
+    return state.rows.filter((row) => {
+      if (state.filters.mode && row.mode !== state.filters.mode) return false;
+      if (state.filters.episode && row.episode !== state.filters.episode) return false;
+      if (state.filters.difficulty && row.difficulty !== state.filters.difficulty) return false;
+      if (state.filters.section && row.section_id !== state.filters.section) return false;
+
+      if (search) {
+        const haystack = [
+          row.mode,
+          row.episode,
+          row.difficulty,
+          row.section_id,
+          row.source,
+          row.item,
+          row.item_code,
+          row.rate,
+        ].join(" ").toLowerCase();
+
+        if (!haystack.includes(search)) return false;
+      }
+
+      return true;
+    });
+  }
+
+  function renderTable() {
+    const box = qs("#drops-placeholder");
+    if (!box) return;
+
+    const rows = sortedRows(visibleRows());
+    const tableLabel = state.table?.label || "BB";
+    const groupLabel = state.table?.groupLabel || "Peeps";
+    const totalPages = Math.max(1, Math.ceil(rows.length / state.pageSize));
+    state.page = Math.min(Math.max(1, state.page), totalPages);
+
+    const start = (state.page - 1) * state.pageSize;
+    const shown = rows.slice(start, start + state.pageSize);
+    const end = start + shown.length;
+
+    const body = shown.map((row) => {
+      const item = row.item || row.item_code || "—";
+      const itemCode = row.item_code || "—";
+
+      return `
+        <tr>
+          <td data-label="Mode">${esc(labelValue(row.mode))}</td>
+          <td data-label="Episode">${esc(labelValue(row.episode))}</td>
+          <td data-label="Difficulty">${esc(labelValue(row.difficulty))}</td>
+          <td data-label="Section ID">${esc(row.section_id || "—")}</td>
+          <td data-label="Source">${esc(labelValue(row.source || "—"))}</td>
+          <td data-label="Item">${esc(item)}</td>
+          <td data-label="Item Code">${esc(itemCode)}</td>
+          <td data-label="Rate">${rateCellHtml(row.rate || "—")}</td>
+        </tr>
+      `;
+    }).join("");
+
+    const rangeText = rows.length
+      ? ` Showing ${Number(start + 1).toLocaleString()}-${Number(end).toLocaleString()}.`
+      : "";
+    const modifier = currentRareModifier();
+    const modifierNote = rareModifierEnabled() && modifier.pct > 0
+      ? `<span>Rate modifier: ${esc(modifier.label)} / ${esc(modifierMultiplierLabel(modifier))}</span>`
+      : "";
+
+    box.innerHTML = `
+      <div class="drops-summary">
+        <div>
+          <strong>${esc(groupLabel)} ${esc(tableLabel)} drop table</strong>
+          <span>${rows.length.toLocaleString()} matching rows.${rangeText}</span>
+          ${modifierNote}
+        </div>
+        <span>${state.rows.length.toLocaleString()} total rows</span>
+      </div>
+      <div class="drops-table-wrap">
+        <table class="drops-table">
+          <thead>
+            <tr>
+              ${SORT_COLUMNS.map(([key, label]) => sortHeader(key, label)).join("")}
+            </tr>
+          </thead>
+          <tbody>${body || `<tr><td colspan="8">No drops match these filters.</td></tr>`}</tbody>
+        </table>
+      </div>
+      <div class="leaderboard-pager drops-pager">
+        <button type="button" data-drops-page="prev" ${state.page <= 1 ? "disabled" : ""}>Previous</button>
+        <span>Page ${state.page} of ${totalPages}</span>
+        <button type="button" data-drops-page="next" ${state.page >= totalPages ? "disabled" : ""}>Next</button>
+      </div>
+    `;
+  }
+
+  async function loadDropGroup() {
+    const selectedMode = qs("#drops-mode")?.value || "peeps";
+    const groupPath = selectedMode === "hardcore" ? "hardcore" : "peeps";
+    const groupLabel = selectedMode === "hardcore" ? "Hardcore" : "Peeps";
+
+    setStatus(`Loading ${groupLabel} drop tables...`);
+
+    state.index = await fetchJson(`generated/drops/${groupPath}/index.json`);
+
+    if (selectedMode === "peeps") {
+      populateVersions(state.index);
+    }
+
+    const version = selectedMode === "hardcore" ? "bb" : currentVersion();
+    const table = (state.index.tables || []).find((entry) => entry.version === version);
+
+    if (!table) {
+      setStatus(`No ${groupLabel} drop table is configured.`, "error");
+      return;
+    }
+
+    state.table = { ...table, groupLabel };
+    state.rows = await fetchJson(`generated/drops/${groupPath}/${table.path}`);
+
+    state.filters.mode = "";
+    state.filters.episode = "";
+    state.filters.difficulty = "";
+    state.filters.section = "";
+    state.filters.search = "";
+    state.page = 1;
+
+    if (qs("#drops-search")) qs("#drops-search").value = "";
+
+    populateFilters(state.rows);
+    updateRareModifierControls();
+
+    if (qs("#drops-rare-mode")) qs("#drops-rare-mode").value = "";
+    if (qs("#drops-episode")) qs("#drops-episode").value = "";
+    if (qs("#drops-difficulty")) qs("#drops-difficulty").value = "";
+    if (qs("#drops-section")) qs("#drops-section").value = "";
+
+    renderTable();
+  }
+
+  async function updateMode() {
+    const mode = qs("#drops-mode")?.value || "peeps";
+    const versionSelect = qs("#drops-version");
+    const versionLabel = document.querySelector('label[for="drops-version"]');
+    const v2Note = qs("#drops-v2-note");
+    const hardcoreNote = qs("#drops-hardcore-note");
+
+    if (versionSelect) versionSelect.hidden = mode === "hardcore";
+    if (versionLabel) versionLabel.hidden = mode === "hardcore";
+    if (v2Note) v2Note.hidden = true;
+    if (hardcoreNote) hardcoreNote.hidden = mode !== "hardcore";
+
+    try {
+      await loadDropGroup();
+    } catch (err) {
+      setStatus(err?.message || "Unable to load drop table.", "error");
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    qs("#drops-mode")?.addEventListener("change", updateMode);
+    qs("#drops-version")?.addEventListener("change", loadDropGroup);
+    qs("#drops-rare-modifier")?.addEventListener("change", () => {
+      state.page = 1;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#drops-rare-mode")?.addEventListener("change", (event) => {
+      state.filters.mode = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#drops-episode")?.addEventListener("change", (event) => {
+      state.filters.episode = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#drops-difficulty")?.addEventListener("change", (event) => {
+      state.filters.difficulty = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#drops-section")?.addEventListener("change", (event) => {
+      state.filters.section = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#drops-search")?.addEventListener("input", (event) => {
+      state.filters.search = event.target.value;
+      state.page = 1;
+      renderTable();
+    });
+
+    qs("#drops-placeholder")?.addEventListener("click", (event) => {
+      const pageButton = event.target.closest("[data-drops-page]");
+      if (pageButton) {
+        state.page += pageButton.dataset.dropsPage === "next" ? 1 : -1;
+        renderTable();
+        return;
+      }
+
+      const button = event.target.closest("[data-drops-sort]");
+      if (!button) return;
+
+      const key = button.dataset.dropsSort;
+      if (state.sort.key === key) {
+        state.sort.dir = state.sort.dir === "asc" ? "desc" : "asc";
+      } else {
+        state.sort.key = key;
+        state.sort.dir = "asc";
+      }
+
+      renderTable();
+    });
+
+    updateMode();
+  });
+})();

site/drops.html

@@ -8,7 +8,7 @@
   <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="style.css?v=drops-peeps-table-viewer-20260613-3">
   <script src="app.js?v=saves-synced-20260609-2" defer></script>
 </head>
 <body>
@@ -37,25 +37,64 @@
             <option value="hardcore">Hardcore</option>
           </select>
 
-          <label for="drops-version" data-drops-version-wrap>Version</label>
-          <select id="drops-version" data-drops-version-wrap>
-            <option>V1</option>
-            <option>V2</option>
-            <option>V3</option>
-            <option>V4</option>
-          </select>
+          <div id="drops-peeps-controls">
+            <label for="drops-version">Version</label>
+            <select id="drops-version">
+              <option value="v1">V1</option>
+              <option value="v2">V2</option>
+              <option value="v3">V3</option>
+              <option value="bb">BB</option>
+            </select>
+            <p class="drops-field-note" id="drops-v2-note" hidden>V2 drop tables apply to PSO PC only.</p>
+            <p class="drops-field-note" id="drops-hardcore-note" hidden>Hardcore uses the BB/V4 drop table.</p>
 
-          <label for="drops-episode" data-drops-episode-wrap hidden>Episode</label>
-          <select id="drops-episode" data-drops-episode-wrap hidden>
-            <option>Episode 1</option>
-            <option>Episode 2</option>
-            <option>Episode 4</option>
-          </select>
+            <div id="drops-rare-modifier-wrap" hidden>
+              <label for="drops-rare-modifier">Rare bonus modifier</label>
+              <select id="drops-rare-modifier">
+                <option value="0">No modifier</option>
+                <option value="0.1">Brutal Peeps +1 (+0.1%)</option>
+                <option value="0.2">Brutal Peeps +2 (+0.2%)</option>
+                <option value="0.5">Brutal Peeps +3 (+0.5%)</option>
+                <option value="0.6">Brutal Peeps +4 (+0.6%)</option>
+                <option value="0.8">Brutal Peeps +5 (+0.8%)</option>
+                <option value="0.9">Brutal Peeps +6 (+0.9%)</option>
+                <option value="1.0">Brutal Peeps +7 (+1.0%)</option>
+                <option value="2.0">Brutal Peeps +8 (+2.0%)</option>
+                <option value="3.0">Brutal Peeps +9 (+3.0%)</option>
+                <option value="4.0">Brutal Peeps +10 (+4.0%)</option>
+                <option value="5.0">Brutal Peeps +11 (+5.0%)</option>
+              </select>
+              <p class="drops-field-note">Applies to the Rate column for V2 PC and BB/V4.</p>
+            </div>
+
+            <label for="drops-rare-mode">Mode</label>
+            <select id="drops-rare-mode">
+              <option value="">All modes</option>
+            </select>
+
+            <label for="drops-episode">Episode</label>
+            <select id="drops-episode">
+              <option value="">All episodes</option>
+            </select>
+
+            <label for="drops-difficulty">Difficulty</label>
+            <select id="drops-difficulty">
+              <option value="">All difficulties</option>
+            </select>
+
+            <label for="drops-section">Section ID</label>
+            <select id="drops-section">
+              <option value="">All Section IDs</option>
+            </select>
+
+            <label for="drops-search">Search</label>
+            <input id="drops-search" type="search" placeholder="Enemy, box, item, code...">
+          </div>
         </form>
       </section>
 
       <section class="card placeholder-results-card">
-        <div class="blank-data-box" id="drops-placeholder">Drop table placeholder</div>
+        <div class="blank-data-box drops-box" id="drops-placeholder">Drop table placeholder</div>
       </section>
     </main>
 
@@ -88,6 +127,6 @@
       </div>
 </footer>
   </div>
-  <script src="placeholder-pages.js?v=basic-pages-fixed-1" defer></script>
+  <script src="drop-tables.js?v=drops-peeps-table-viewer-20260613-12" defer></script>
 </body>
 </html>

site/generated/bestiary/bb/index.json

@@ -0,0 +1,12 @@
+{
+  "label": "BB",
+  "mode": "bestiary",
+  "tables": [
+    {
+      "label": "BB",
+      "path": "bb.json",
+      "rows": 3216,
+      "version": "bb"
+    }
+  ]
+}

site/generated/drops/hardcore/index.json

@@ -0,0 +1,12 @@
+{
+  "label": "Hardcore",
+  "mode": "hardcore",
+  "tables": [
+    {
+      "label": "BB",
+      "path": "bb.json",
+      "rows": 7200,
+      "version": "bb"
+    }
+  ]
+}

site/generated/drops/peeps/index.json

@@ -0,0 +1,30 @@
+{
+  "label": "Peeps",
+  "mode": "peeps",
+  "tables": [
+    {
+      "label": "V1",
+      "path": "v1.json",
+      "rows": 5328,
+      "version": "v1"
+    },
+    {
+      "label": "V2",
+      "path": "v2.json",
+      "rows": 7872,
+      "version": "v2"
+    },
+    {
+      "label": "V3",
+      "path": "v3.json",
+      "rows": 5636,
+      "version": "v3"
+    },
+    {
+      "label": "BB",
+      "path": "bb.json",
+      "rows": 7200,
+      "version": "bb"
+    }
+  ]
+}

site/home-leaderboard.js

@@ -65,7 +65,7 @@
       return;
     }
 
-    const top = rows.slice(0, 5);
+    const top = rows.slice(0, 10);
 
     if (!top.length) {
       list.innerHTML = `<li><span class="rank">1.</span><span>—</span></li>`;

site/index.html

@@ -8,8 +8,9 @@
   <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css?v=home-hardcore-preline-20260610-1">
+  <link rel="stylesheet" href="style.css?v=home-status-two-boxes-2">
   <script src="app.js?v=account-status-label-20260609" defer></script>
+  <script src="server-status.js?v=home-status-prometheus-2" defer></script>
 </head>
 <body>
   <div class="site-shell">
@@ -52,30 +53,48 @@
 
         <h1 id="server-status-heading" class="section-title">Server Status</h1>
 
-        <div class="status-list" role="list" aria-label="Current server player counts">
-          <div class="status-row status-parent" role="listitem"><span>US Server</span><span></span></div>
+        <div class="status-list status-list--regions" role="list" aria-label="Current server player counts" data-server-status="loading">
+          <div class="status-region" role="group" aria-label="US Server player counts">
+            <div class="status-region-header">
+              <span>US Server</span><span>Loading…</span>
+            </div>
+            <div class="status-ship">
+              <div class="status-ship-name">Alis</div>
+              <div class="status-row"><span>V2</span><span>—</span></div>
+              <div class="status-row"><span>V3</span><span>—</span></div>
+              <div class="status-row"><span>BB</span><span>—</span></div>
+            </div>
+            <div class="status-ship">
+              <div class="status-ship-name">Abion</div>
+              <div class="status-row"><span>HC/BB</span><span>—</span></div>
+            </div>
+            <div class="status-ship">
+              <div class="status-ship-name">AdHoc-US</div>
+              <div class="status-row"><span>PSP1</span><span>—</span></div>
+              <div class="status-row"><span>PSP2i</span><span>—</span></div>
+            </div>
+          </div>
 
-          <div class="status-row status-parent" role="listitem"><span>Alis</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>V2</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>V3</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>BB</span><span>0 Players</span></div>
-
-          <div class="status-row status-parent" role="listitem"><span>Abion</span><span></span></div>
-          <div class="status-row status-child" role="listitem"><span>HC</span><span>0 Players</span></div>
-
-          <div class="status-row status-parent" role="listitem"><span>EU Server</span><span></span></div>
-
-          <div class="status-row status-parent" role="listitem"><span>Palma</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>V2</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>V3</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>BB</span><span>0 Players</span></div>
-
-          <div class="status-row status-parent" role="listitem"><span>Aiedo</span><span></span></div>
-          <div class="status-row status-child" role="listitem"><span>HC</span><span>0 Players</span></div>
-
-          <div class="status-row status-parent" role="listitem"><span>PSP Ship</span><span></span></div>
-          <div class="status-row status-child" role="listitem"><span>PSP1</span><span>0 Players</span></div>
-          <div class="status-row status-child" role="listitem"><span>PSP2i</span><span>0 Players</span></div>
+          <div class="status-region" role="group" aria-label="EU Server player counts">
+            <div class="status-region-header">
+              <span>EU Server</span><span>Loading…</span>
+            </div>
+            <div class="status-ship">
+              <div class="status-ship-name">Palma</div>
+              <div class="status-row"><span>V2</span><span>—</span></div>
+              <div class="status-row"><span>V3</span><span>—</span></div>
+              <div class="status-row"><span>BB</span><span>—</span></div>
+            </div>
+            <div class="status-ship">
+              <div class="status-ship-name">Aiedo</div>
+              <div class="status-row"><span>HC/BB</span><span>—</span></div>
+            </div>
+            <div class="status-ship">
+              <div class="status-ship-name">AdHoc-EU</div>
+              <div class="status-row"><span>PSP1</span><span>—</span></div>
+              <div class="status-row"><span>PSP2i</span><span>—</span></div>
+            </div>
+          </div>
         </div>
       </section>
 
@@ -90,22 +109,11 @@
 
         <section class="card leaderboard-card" aria-labelledby="hardcore-heading">
           <h2 id="hardcore-heading" class="section-title">Hardcore Leaderboard</h2>
-          <ol class="leaderboard-list leaderboard-list--home-hardcore" id="home-hardcore-leaderboard-body" aria-label="Top five hardcore players">
+          <ol class="leaderboard-list leaderboard-list--home-hardcore" id="home-hardcore-leaderboard-body" aria-label="Top ten hardcore players">
             <li><span class="rank">1.</span><span>Loading...</span></li>
           </ol>
           <a class="small-link home-leaderboard-more" href="leaderboards.html">more</a>
         </section>
-
-        <section class="card leaderboard-card" aria-labelledby="crank-heading">
-          <h2 id="crank-heading" class="section-title">C Rank Points</h2>
-          <ol class="leaderboard-list" aria-label="Top five C Rank point totals">
-            <li><span class="rank">1.</span><span>—</span></li>
-            <li><span class="rank">2.</span><span>—</span></li>
-            <li><span class="rank">3.</span><span>—</span></li>
-            <li><span class="rank">4.</span><span>—</span></li>
-            <li><span class="rank">5.</span><span>—</span></li>
-          </ol>
-        </section>
       </aside>
     </main>
 
@@ -139,6 +147,6 @@
     </footer>
   </div>
   <script src="hero-cycle.js?v=force-cycle-3" defer></script>
-  <script src="home-leaderboard.js?v=home-hardcore-preline-20260610-1" defer></script>
+  <script src="home-leaderboard.js?v=home-hardcore-top10-1" defer></script>
 </body>
 </html>

site/server-status.js

@@ -0,0 +1,46 @@
+(() => {
+  const list = document.querySelector(".status-list");
+  if (!list) return;
+
+  const esc = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#39;",
+  }[ch]));
+
+  const players = (value) => {
+    const n = Number(value || 0);
+    return `${n.toLocaleString()} ${n === 1 ? "Player" : "Players"}`;
+  };
+
+  const render = (data) => {
+    const servers = Array.isArray(data?.servers) ? data.servers : [];
+    if (!servers.length) return;
+
+    list.classList.add("status-list--regions");
+    list.innerHTML = servers.map((server) => `
+      <div class="status-region" role="group" aria-label="${esc(server.label)} player counts">
+        <div class="status-row status-parent status-server" role="listitem">
+          <span>${esc(server.label)}</span><span>${players(server.players)}</span>
+        </div>
+        ${(server.ships || []).map((ship) => `
+          <div class="status-row status-parent status-ship" role="listitem">
+            <span>${esc(ship.label)}</span><span></span>
+          </div>
+          ${(ship.rows || []).map((row) => `
+            <div class="status-row status-child" role="listitem">
+              <span>${esc(row.label)}</span><span>${players(row.players)}</span>
+            </div>
+          `).join("")}
+        `).join("")}
+      </div>
+    `).join("");
+  };
+
+  fetch("/api/server-status", { cache: "no-store" })
+    .then((res) => res.ok ? res.json() : null)
+    .then((data) => data && render(data))
+    .catch(() => {});
+})();

site/style.css

@@ -1842,900 +1842,76 @@ button.inline-link,
   padding: 2rem;
 }
 
-.key-sync-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  margin-right: 1.1rem;
-  white-space: nowrap;
-}
-
-.key-sync-dot {
-  width: 0.65rem;
-  height: 0.65rem;
-  border-radius: 999px;
-  display: inline-block;
-  flex: 0 0 auto;
-  vertical-align: middle;
-}
-
-.key-sync-dot.is-synced {
-  background: #38d66b;
-  box-shadow: 0 0 0 2px rgba(56, 214, 107, 0.15);
-}
-
-.key-sync-dot.is-syncing {
-  background: #e05252;
-  box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.16);
-}
-
-.key-sync-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  margin-right: 1.1rem;
-  white-space: nowrap;
-}
-
-.key-sync-dot {
-  width: 0.65rem;
-  height: 0.65rem;
-  border-radius: 999px;
-  display: inline-block;
-  flex: 0 0 auto;
-  vertical-align: middle;
-}
-
-.key-sync-dot.is-synced {
-  background: #38d66b;
-  box-shadow: 0 0 0 2px rgba(56, 214, 107, 0.15);
-}
-
-.key-sync-dot.is-syncing {
-  background: #e05252;
-  box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.16);
-}
-
-.key-sync-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  margin-right: 1.1rem;
-  white-space: nowrap;
-}
-
-.key-sync-dot {
-  width: 0.65rem;
-  height: 0.65rem;
-  border-radius: 999px;
-  display: inline-block;
-  flex: 0 0 auto;
-  vertical-align: middle;
-}
-
-.key-sync-dot.is-synced {
-  background: #38d66b;
-  box-shadow: 0 0 0 2px rgba(56, 214, 107, 0.15);
-}
-
-.key-sync-dot.is-syncing {
-  background: #e05252;
-  box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.16);
-}
-
-#key-sync-summary.key-sync-summary .key-sync-status {
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: 0.45rem !important;
-  margin-right: 1.1rem !important;
-  white-space: nowrap !important;
-}
-
-#key-sync-summary.key-sync-summary .key-sync-dot {
-  display: inline-block !important;
-  width: 0.65rem !important;
-  height: 0.65rem !important;
-  min-width: 0.65rem !important;
-  min-height: 0.65rem !important;
-  border-radius: 999px !important;
-  background-color: #e05252 !important;
-  box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.16) !important;
-  opacity: 1 !important;
-  visibility: visible !important;
-}
-
-#key-sync-summary.key-sync-summary .key-sync-dot.is-synced {
-  background-color: #38d66b !important;
-  box-shadow: 0 0 0 2px rgba(56, 214, 107, 0.15) !important;
-}
-
-#key-sync-summary .key-sync-dot {
-  display: inline-block !important;
-  width: auto !important;
-  height: auto !important;
-  min-width: 0 !important;
-  min-height: 0 !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  font-size: 0.95rem !important;
-  line-height: 1 !important;
-  color: #e05252 !important;
-}
-
-#key-sync-summary .key-sync-dot.is-synced {
-  color: #38d66b !important;
-}
-
-/* homepage server status touch-up */
-.server-status-card .site-intro {
-  margin: 0 0 1.35rem;
-  color: var(--text);
-  line-height: 1.65;
-}
-
-.status-list {
-  margin-top: 1.25rem;
-}
-
-.status-server {
-  margin-top: 1.2rem;
-  color: var(--text);
-  font-family: var(--mono);
-  font-weight: 900;
-}
-
-.status-server:first-child {
-  margin-top: 0;
-}
-
-.status-label {
-  margin: 0.25rem 0 0.4rem;
-  color: var(--muted);
-  font-family: var(--mono);
-  font-size: 0.76rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.status-ship {
-  padding-top: 0.25rem;
-  font-family: var(--mono);
-  font-weight: 900;
-}
-
-.status-ship--solo {
-  justify-content: flex-start;
-}
-
-.status-child {
-  padding-left: 1.15rem;
-  color: var(--muted);
-}
-
-
-/* Hardcore leaderboard table */
-.leaderboard-box {
-  align-items: stretch;
-  justify-content: flex-start;
-  min-height: 260px;
-  text-align: left;
-}
-
-#leaderboard-page-size-wrap {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.leaderboard-status {
-  display: grid;
-  min-height: 220px;
-  place-items: center;
-  color: var(--muted);
-  font-weight: 700;
-  text-align: center;
-}
-
-.leaderboard-status--error {
-  color: #ff9a9a;
-}
-
-.leaderboard-table-wrap {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.leaderboard-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.92rem;
-}
-
-.leaderboard-table th,
-.leaderboard-table td {
-  border-bottom: 1px solid var(--line);
-  padding: 0.8rem 0.65rem;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.leaderboard-table th {
-  color: var(--muted);
-  font-size: 0.72rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.leaderboard-sort {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  letter-spacing: inherit;
-  padding: 0;
-  text-transform: inherit;
-}
-
-.leaderboard-sort:hover,
-.leaderboard-sort:focus {
-  color: var(--text);
-}
-
-.leaderboard-table td:nth-child(1),
-.leaderboard-table td:nth-child(3),
-.leaderboard-table td:nth-child(4),
-.leaderboard-table td:nth-child(7),
-.leaderboard-table td:nth-child(8) {
-  font-variant-numeric: tabular-nums;
-}
-
-.leaderboard-pager {
-  align-items: center;
-  color: var(--muted);
-  display: flex;
-  font-size: 0.85rem;
-  font-weight: 700;
-  gap: 1rem;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-.leaderboard-pager button {
-  border: 1px solid var(--line);
-  border-radius: 0.45rem;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  padding: 0.6rem 0.85rem;
-  text-transform: uppercase;
-}
-
-.leaderboard-pager button:disabled {
-  cursor: not-allowed;
-  opacity: 0.35;
-}
-
-@media (max-width: 720px) {
-  .leaderboard-table {
-    min-width: 720px;
-  }
-}
-
-
-/* Keep wide leaderboard table contained on small screens */
-.placeholder-results-card,
-.leaderboard-box {
+/* Bestiary: keep the results card at page width and scroll the table horizontally when it's too wide (e.g. the "All" view). Touches width/scroll only — no colors, fonts, spacing, or layout of the table. */
+.placeholder-results-card {
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
+  contain: inline-size;
 }
 
-.leaderboard-table-wrap {
-  min-width: 0;
+#bestiary-placeholder .drops-table-wrap {
+  width: 100%;
   max-width: 100%;
+  min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+}\n\n
+/* Home right column: stretch Hardcore leaderboard after C Rank removal */
+.right-stack {
+  display: flex;
+  flex-direction: column;
 }
 
-.leaderboard-table {
-  min-width: 820px;
+.right-stack .leaderboard-card {
+  flex: 1;
+}
+\n
+
+
+/* Home layout: stretch right column to match server status card */
+.home-grid {
+  align-items: stretch;
 }
 
-.leaderboard-table th,
-.leaderboard-table td {
-  box-sizing: border-box;
+.right-stack {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.leaderboard-table td:nth-child(1),
-.leaderboard-table td:nth-child(3),
-.leaderboard-table td:nth-child(4),
-.leaderboard-table td:nth-child(7),
-.leaderboard-table td:nth-child(8) {
-  font-variant-numeric: tabular-nums;
+.right-stack .leaderboard-card {
+  flex: 1 1 auto;
+}
+
+
+/* Home server status: split US/EU into two inner boxes */
+.server-card .status-list.status-list--regions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+.server-card .status-region {
+  display: grid;
+  gap: 0.35rem;
+  padding: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 0.45rem;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.server-card .status-region .status-row {
+  grid-template-columns: minmax(0, 1fr) max-content;
 }
 
 @media (max-width: 720px) {
-  .leaderboard-box {
-    display: block;
-    padding: 1rem;
-  }
-
-  .leaderboard-table {
-    width: 820px;
-    min-width: 820px;
-  }
-
-  .leaderboard-pager {
-    min-width: 0;
-    max-width: 100%;
+  .server-card .status-list.status-list--regions {
+    grid-template-columns: 1fr;
   }
 }
 
-
-/* Mobile containment for wide leaderboard tables */
-html,
-body {
-  max-width: 100%;
-  overflow-x: hidden;
-}
-
-.site-shell,
-.placeholder-layout,
-.placeholder-control-card,
-.placeholder-results-card,
-.blank-data-box,
-.leaderboard-box {
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-}
-
-.leaderboard-box {
-  overflow: hidden;
-}
-
-.leaderboard-table-wrap {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-
-.leaderboard-table {
-  width: max-content;
-  min-width: 820px;
-  max-width: none;
-}
-
-@media (max-width: 720px) {
-  .site-shell {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .placeholder-results-card {
-    overflow: hidden;
-  }
-
-  .leaderboard-box {
-    display: block;
-    width: 100%;
-    padding: 1rem;
-  }
-
-  .leaderboard-table-wrap {
-    width: 100%;
-  }
-
-  .leaderboard-table {
-    width: max-content;
-    min-width: 820px;
-  }
-}
-
-/* Hard clamp mobile leaderboard overflow */
-@media (max-width: 720px) {
-  html,
-  body {
-    width: 100%;
-    max-width: 100%;
-    overflow-x: hidden;
-  }
-
-  .site-shell,
-  .hero,
-  .nav-bar,
-  .placeholder-layout,
-  .card,
-  .placeholder-control-card,
-  .placeholder-results-card,
-  .footer-bar {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    overflow-x: hidden;
-  }
-
-  .blank-data-box.leaderboard-box {
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    padding: 1rem;
-  }
-
-  .leaderboard-table-wrap {
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    overscroll-behavior-x: contain;
-  }
-
-  .leaderboard-table {
-    display: table;
-    width: 820px;
-    min-width: 820px;
-    max-width: none;
-  }
-
-  .leaderboard-pager {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-}
-
-/* Final mobile leaderboard containment: keep page width fixed, scroll table only */
-@media (max-width: 720px) {
-  html,
-  body {
-    width: 100%;
-    max-width: 100vw;
-    overflow-x: hidden;
-  }
-
-  .site-shell {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100vw;
-    min-width: 0;
-    overflow-x: hidden;
-  }
-
-  .placeholder-layout,
-  .placeholder-control-card,
-  .placeholder-results-card {
-    box-sizing: border-box;
-    width: calc(100vw - 1rem) !important;
-    max-width: calc(100vw - 1rem) !important;
-    min-width: 0 !important;
-    overflow: hidden !important;
-  }
-
-  .placeholder-results-card,
-  .blank-data-box.leaderboard-box {
-    contain: inline-size;
-  }
-
-  .blank-data-box.leaderboard-box {
-    box-sizing: border-box;
-    display: block;
-    width: 100% !important;
-    max-width: 100% !important;
-    min-width: 0 !important;
-    overflow: hidden !important;
-  }
-
-  .leaderboard-table-wrap {
-    box-sizing: border-box;
-    display: block;
-    inline-size: 100% !important;
-    max-inline-size: 100% !important;
-    min-inline-size: 0 !important;
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-    -webkit-overflow-scrolling: touch;
-    overscroll-behavior-x: contain;
-  }
-
-  .leaderboard-table {
-    inline-size: max-content !important;
-    width: max-content !important;
-    min-width: 820px !important;
-    max-width: none !important;
-  }
-
-  .leaderboard-pager {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-}
-
-
-/* Disable failed mobile card experiment */
-.leaderboard-mobile-wrap {
-  display: none !important;
-}
-
-/* Home page Hardcore leaderboard */
-.home-leaderboard-wrap {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.home-leaderboard-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-}
-
-.home-leaderboard-table th,
-.home-leaderboard-table td {
-  border-bottom: 1px solid var(--line);
-  padding: 0.65rem 0.45rem;
-  text-align: left;
-  white-space: nowrap;
-}
-
-.home-leaderboard-table th {
-  color: var(--muted);
-  font-size: 0.68rem;
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.home-leaderboard-table td:nth-child(2) {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.home-leaderboard-table th:nth-child(2) {
-  text-align: right;
-}
-
-.home-leaderboard-more {
-  display: inline-block;
-  margin-top: 0.85rem;
-}
-
-/* Home Hardcore compact leaderboard list */
-.home-leaderboard-wrap {
-  width: 100%;
-}
-
-.home-leaderboard-list {
-  display: grid;
-  gap: 0;
-  width: 100%;
-}
-
-.home-leaderboard-row {
-  align-items: center;
-  border-bottom: 1px solid var(--line);
-  display: grid;
-  gap: 0.65rem;
-  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
-  min-width: 0;
-  padding: 0.55rem 0;
-}
-
-.home-leaderboard-row:last-child {
-  border-bottom: 0;
-}
-
-.home-leaderboard-row--head {
-  color: var(--muted);
-  font-size: 0.68rem;
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  padding-top: 0;
-  text-transform: uppercase;
-}
-
-.home-leaderboard-rank {
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-}
-
-.home-leaderboard-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-leaderboard-points {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.home-leaderboard-status {
-  color: var(--muted);
-}
-
-.home-leaderboard-status--alive {
-  color: #9fd6a3;
-}
-
-.home-leaderboard-status--dead {
-  color: #f09a9a;
-}
-
-.home-leaderboard-empty {
-  color: var(--muted);
-  padding: 0.65rem 0;
-}
-
-.home-leaderboard-more {
-  display: inline-block;
-  margin-top: 0.8rem;
-}
-
-/* Home Hardcore entries inside standard leaderboard-list */
-.leaderboard-list--home-hardcore .home-hardcore-entry {
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  min-width: 0;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-points {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-status {
-  color: var(--muted);
-}
-
-.home-leaderboard-more {
-  display: inline-block;
-  margin-top: 0.8rem;
-}
-
-
-/* Align Home Hardcore leaderboard columns like an invisible table */
-.leaderboard-list--home-hardcore .home-hardcore-entry {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 5.25rem 4.25rem;
-  gap: 0.75rem;
-  align-items: baseline;
-  min-width: 0;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-points {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-status {
-  color: var(--muted);
-  text-align: left;
-  white-space: nowrap;
-}
-
-/* Home Hardcore leaderboard: invisible table columns */
-.leaderboard-list.leaderboard-list--home-hardcore li.home-hardcore-row {
-  display: grid;
-  grid-template-columns: 2rem minmax(0, 1fr) 5.5rem 4.25rem;
-  gap: 0.75rem;
-  align-items: baseline;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-points {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.leaderboard-list--home-hardcore .home-hardcore-status {
-  color: var(--muted);
-  text-align: left;
-  white-space: nowrap;
-}
-
-/* Home Hardcore invisible table matching C Rank list */
-.home-hardcore-table {
-  border-collapse: collapse;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 0.95rem;
-  font-variant-numeric: tabular-nums;
-  width: 100%;
-}
-
-.home-hardcore-table td {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
-  color: var(--text-soft);
-  padding: 0.25rem 0;
-  vertical-align: baseline;
-  white-space: nowrap;
-}
-
-.home-hardcore-table tr:last-child td {
-  border-bottom: 0;
-}
-
-.home-hardcore-table .rank {
-  color: var(--muted);
-  width: 2rem;
-}
-
-.home-hardcore-table .home-hardcore-name {
-  max-width: 8rem;
-  overflow: hidden;
-  padding-right: 0.75rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-hardcore-table .home-hardcore-points {
-  padding-right: 0.75rem;
-  text-align: right;
-  width: 5.5rem;
-}
-
-.home-hardcore-table .home-hardcore-status {
-  color: var(--muted);
-  text-align: left;
-  width: 4rem;
-}
-
-/* Home Hardcore leaderboard: visually match C Rank list */
-.home-hardcore-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 0.95rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.45;
-  margin: 0;
-  width: 100%;
-}
-
-.home-hardcore-table td {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
-  color: var(--text-soft);
-  padding: 0.25rem 0;
-  vertical-align: baseline;
-  white-space: nowrap;
-}
-
-.home-hardcore-table tr:last-child td {
-  border-bottom: 0;
-}
-
-.home-hardcore-table .rank {
-  color: var(--muted);
-  padding-right: 0.75rem;
-  width: 2rem;
-}
-
-.home-hardcore-table .home-hardcore-name {
-  max-width: 8rem;
-  overflow: hidden;
-  padding-right: 1.25rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-hardcore-table .home-hardcore-points {
-  padding-left: 1rem;
-  padding-right: 1.25rem;
-  text-align: right;
-  width: 5.75rem;
-}
-
-.home-hardcore-table .home-hardcore-status {
-  color: var(--muted);
-  padding-left: 0.75rem;
-  text-align: left;
-  width: 4rem;
-}
-
-.home-leaderboard-more {
-  display: inline-block;
-  margin-top: 0.8rem;
-}
-
-/* Home Hardcore leaderboard: aligned grid rows */
-.home-hardcore-table {
-  display: block;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 0.95rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.45;
-  width: 100%;
-}
-
-.home-hardcore-table tbody {
-  display: grid;
-  gap: 0;
-  width: 100%;
-}
-
-.home-hardcore-table tr {
-  align-items: baseline;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
-  display: grid;
-  gap: 0.9rem;
-  grid-template-columns: 2rem minmax(0, 1fr) 6.25rem 4.25rem;
-  padding: 0.25rem 0;
-}
-
-.home-hardcore-table tr:last-child {
-  border-bottom: 0;
-}
-
-.home-hardcore-table td {
-  border-bottom: 0 !important;
-  color: var(--text-soft);
-  display: block;
-  padding: 0 !important;
-  white-space: nowrap;
-}
-
-.home-hardcore-table .rank {
-  color: var(--muted);
-}
-
-.home-hardcore-table .home-hardcore-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.home-hardcore-table .home-hardcore-points {
-  text-align: right;
-}
-
-.home-hardcore-table .home-hardcore-status {
-  color: var(--muted);
-  text-align: left;
-}
-
-/* Home Hardcore padded line inside standard leaderboard-list */
-.leaderboard-list--home-hardcore .home-hardcore-line {
-  white-space: pre;
-}