Add the build scripts and docs; one index.html for every host

.gitignore

@@ -0,0 +1,3 @@
+media
+__pycache__/
+_shots/

README.md

@@ -7,4 +7,97 @@ sdk: static
 pinned: false
 ---
 
-EvoGame project page (preview).
+# EvoGame — project page
+
+Static site: plain HTML/CSS/JS, no build step, no framework. It shows every game we ran EvoGame on
+twice — the initial generation (round 0) and the same game after 30 EvoGame rounds — plus one game
+that visitors play in the browser.
+
+Live: https://wenyiwu0111-evogame-page.static.hf.space (a public HF static Space)
+
+## Run it locally
+
+```bash
+python -m http.server 8765        # then open http://127.0.0.1:8765
+```
+
+The page `fetch()`es JSON, so open it over HTTP, not as a `file://` path.
+
+Video, images and the playable builds are **not in this repo** (see *Media* below). By default they
+stream from the published site, so a fresh clone works with no extra files. To use a local copy
+instead, put it (or a symlink to it) at `./media` and open the page with `?media=local`:
+
+```bash
+ln -s /path/to/evogame-page-media media     # then http://127.0.0.1:8765/?media=local
+```
+
+## Layout
+
+```
+index.html              the page: game screen, hero, before/after, gallery, results, citation
+play.html               standalone Godot web player (one shared engine, one game pack per build)
+static/css/base.css     tokens + everything shared (cards, modal, charts, wipe comparison)
+static/css/v1.css       this design's own pieces (game screen, spotlight, pair cards)
+static/js/core.js       data loading, video scheduling, before/after wipe, game dialog, charts
+static/js/v1.js         this page: what goes where
+static/data/evo.json    one row per game: round-0 and round-30 scores, chosen demo, score curve
+static/data/evo/<arm>/<task>.json   per-requirement before/after + judge rationales + 30-round timeline
+static/data/play.json   the playable builds (engine + per-round .pck sizes)
+static/data/games.json  the 280 initial generations across both engines (used by v2–v4 only)
+_build/*.py             regenerate everything from the experiment runs (see below)
+v2/ v3/ v4/             earlier design drafts kept for reference; the live page is v1 (root)
+```
+
+`static/js/core.js` is shared by all four designs — change it carefully.
+
+## Media (not in this repo)
+
+Built into `/storage/admin/wenyi/evogame-page-media` on the lab machine:
+
+```
+pairs/<arm>/<task>/p0.mp4, final.mp4, p0.webp, final.webp   the same demo on both builds (54 MB)
+play/engine/godot.js, godot.wasm.gz, godot.audio*.js        one shared Godot 4.6.2 web engine (9 MB gz)
+play/<arm>/<task>/<r0|r30>/index.pck                        one game pack per playable build
+hero_evo.mp4 / .webp                                        the moving background: 30 games in one video
+baseline/...                                                clips for the v2–v4 drafts
+```
+
+Everything the live site needs is also in the Space repo, so the quickest way to get a full working
+copy is to clone the Space (below).
+
+## Rebuild the data
+
+Needs the experiment runs on the lab machine, and Godot 4.6.2 with web export templates for `build_web.py`.
+
+```bash
+python _build/build_pairs.py                 # before/after clips + evo.json + per-game detail JSON
+python _build/build_hero.py --evo --out hero_evo --cols 5 --rows 6 --tile 320x180 --gap 3
+python _build/build_web.py --games godot_qwen/platformer-dig-descent   # playable web builds
+python _build/build_media.py                 # only for the v2–v4 drafts (280 baseline games)
+```
+
+`build_pairs.py --reuse-media` rebuilds the JSON without re-encoding video.
+
+## Deploy
+
+The live site is the HF Space `WenyiWU0111/evogame-page` (sdk: static). It holds the page **and** its
+media, so a clone is a complete, runnable copy:
+
+```bash
+git clone https://huggingface.co/spaces/WenyiWU0111/evogame-page
+cd evogame-page && python -m http.server 8765
+```
+
+Push to that repo to publish (needs write access on the Space). The Space copy differs from this repo
+in two small ways, both injected at deploy time: `window.EVO_MEDIA = "media"` pins the media folder,
+and `window.EVO_NO_SWITCH = true` hides the v1–v4 switcher.
+
+## Notes for whoever picks this up
+
+- Scores are ×100 of the GameCraft-Bench reward, judged by Qwen3.8-27B over three passes; round 0 and
+  round 30 use the same scorer, judge and demo scripts, so the two sides are comparable.
+- Six games are missing from the gallery because their round 30 had not finished scoring; rerun
+  `build_pairs.py` to pick them up.
+- Authors, paper/code/dataset links and the BibTeX entry are still placeholders in `index.html`.
+- Videos never autoplay more than a handful at a time: cards hold a poster until they scroll into
+  view, at most 12 clips play at once, and the hero is one pre-composited video rather than 30.

_build/build_hero.py

@@ -0,0 +1,63 @@
+"""Composite the hero background: a COLSxROWS grid of highlight clips as ONE looping video.
+
+One decoder instead of COLS*ROWS - the page stays smooth. Picks the top games by reward,
+alternating engines, skipping duplicate tasks.
+
+  python _build/build_hero.py [--cols 6 --rows 3]
+"""
+import argparse, io, json, subprocess
+from pathlib import Path
+
+from PIL import Image
+
+PAGE = Path(__file__).resolve().parents[1]
+MEDIA = Path("/storage/admin/wenyi/evogame-page-media")
+
+ap = argparse.ArgumentParser()
+ap.add_argument("--cols", type=int, default=6)
+ap.add_argument("--rows", type=int, default=3)
+ap.add_argument("--seconds", type=float, default=10)
+ap.add_argument("--evo", action="store_true", help="use the round-30 clips of the before/after pairs")
+ap.add_argument("--out", default="hero_mosaic")
+ap.add_argument("--tile", default="320x180", help="cell size in the composite, WxH")
+ap.add_argument("--gap", type=int, default=0, help="dark gutter inside each cell, px")
+a = ap.parse_args()
+n = a.cols * a.rows
+
+if a.evo:
+    games = json.loads((PAGE / "static/data/evo.json").read_text())
+    for g in games:
+        g["clip"] = MEDIA / g["pair"] / "final.mp4"
+        g["reward"] = g["repaired"]["reward"]
+else:
+    games = [g for g in json.loads((PAGE / "static/data/games.json").read_text()) if g["media"]]
+    for g in games:
+        g["clip"] = MEDIA / g["media"] / "highlight.mp4"
+by_arm = {}
+for g in sorted(games, key=lambda g: -g["reward"]):
+    by_arm.setdefault(g["arm"], []).append(g)
+picked, seen = [], set()
+while len(picked) < n and any(by_arm.values()):
+    for arm in list(by_arm):
+        while by_arm[arm]:
+            g = by_arm[arm].pop(0)
+            if g["task"] not in seen:
+                picked.append(g); seen.add(g["task"]); break
+picked = picked[:n]
+
+W, H = map(int, a.tile.split("x"))
+g2 = a.gap * 2
+cmd = ["ffmpeg", "-y"]
+for g in picked:
+    cmd += ["-stream_loop", "-1", "-ss", "2", "-t", str(a.seconds), "-i", str(g["clip"])]
+fl = [f"[{i}:v]scale={W - g2}:{H - g2},pad={W}:{H}:{a.gap}:{a.gap}:color=0x05060a,setsar=1,fps=24[v{i}]" for i in range(n)]
+layout = "|".join(f"{(i % a.cols) * W}_{(i // a.cols) * H}" for i in range(n))
+fl.append("".join(f"[v{i}]" for i in range(n)) + f"xstack=inputs={n}:layout={layout}[out]")
+out = MEDIA / f"{a.out}.mp4"
+cmd += ["-filter_complex", ";".join(fl), "-map", "[out]", "-t", str(a.seconds), "-c:v", "libx264",
+        "-preset", "slow", "-crf", "30", "-pix_fmt", "yuv420p", "-movflags", "+faststart", "-an", str(out)]
+subprocess.run(cmd, check=True, stderr=subprocess.DEVNULL)
+png = subprocess.run(["ffmpeg", "-ss", "1", "-i", str(out), "-frames:v", "1", "-f", "image2pipe", "-c:v", "png", "-"],
+                     check=True, capture_output=True).stdout
+Image.open(io.BytesIO(png)).save(MEDIA / f"{a.out}.webp", "WEBP", quality=70)
+print(out, out.stat().st_size // 1024, "KB;", ", ".join(g["task"] for g in picked))

_build/build_media.py

@@ -0,0 +1,197 @@
+"""Build the page's media + data from the r0 baseline scoring runs.
+
+For every (arm, task) it writes, under MEDIA_OUT/baseline/<arm>/<task>/:
+  highlight.mp4   ~10 s montage of the most active window of up to 4 demos (640x360, no audio)
+  poster.webp     the busiest frame, for the card before the video loads
+  demos/<id>.mp4  every pass-1 demo, remuxed with faststart so it streams
+and into the page repo:
+  static/data/games.json                 one row per game (what the gallery needs)
+  static/data/details/<arm>/<task>.json  per-requirement scores + judge rationales (loaded on open)
+
+Scores come from pass 1 of r0_scores (judge qwen38-27b); reward/M/D/V/A are the CSV means.
+
+  python _build/build_media.py --arms godot_gpt phaser_gpt [--tasks a b] [--jobs 16] [--data-only]
+"""
+import argparse, csv, json, re, subprocess, sys
+from concurrent.futures import ProcessPoolExecutor
+from pathlib import Path
+
+import numpy as np
+from PIL import Image
+
+SCORES = Path("/storage/admin/wenyi/r0_scores")
+MEDIA_OUT = Path("/storage/admin/wenyi/evogame-page-media")
+PAGE = Path(__file__).resolve().parents[1]
+TASKS = {"godot": Path("/home/admin/wenyi/gamecraft-bench/tasks"),
+         "phaser": Path("/home/admin/wenyi/gamecraft-bench-web/tasks-web")}
+ARMS = {
+    "godot_gpt":   {"engine": "Godot 4", "model": "GPT-5.5", "harness": "Codex CLI"},
+    "phaser_gpt":  {"engine": "Phaser",  "model": "GPT-5.5", "harness": "OpenGame"},
+    "godot_qwen":  {"engine": "Godot 4", "model": "Qwen3.8-27B", "harness": ""},
+    "phaser_qwen": {"engine": "Phaser",  "model": "Qwen3.8-27B", "harness": ""},
+    "godot_kimi":  {"engine": "Godot 4", "model": "Kimi-K2.6", "harness": ""},
+    "godot_glm":   {"engine": "Godot 4", "model": "GLM-5.3-Flash", "harness": ""},
+}
+CATS = {"M": "Core Mechanics", "D": "Content Depth", "V": "Functional Visuals", "A": "Presentation & Art"}
+SEG_S, MAX_SEGS, FRAME_STEP_S = 2.5, 4, 0.5
+
+
+def run(cmd):
+    subprocess.run(cmd, check=True, stdout=subprocess.DEVNULL, stderr=subprocess.PIPE)
+
+
+def instruction_meta(engine_key, task):
+    md = (TASKS[engine_key] / task / "instruction.md").read_text()
+    title = re.search(r"^# (.+)$", md, re.M).group(1).strip()
+    m = re.search(r"## Core Vision\s+(.+?)(?:\n## |\Z)", md, re.S)
+    vision = re.sub(r"\s+", " ", m.group(1)).strip() if m else ""
+    toml = (TASKS[engine_key] / task / "task.toml").read_text()
+    d = re.search(r'^description\s*=\s*"(.*)"', toml, re.M)
+    return title, (d.group(1) if d else ""), vision
+
+
+def padded_from(task_dir):
+    """demo_id -> first padded frame index (frozen tail we should not show)."""
+    p = task_dir / "tail_padding.json"
+    if not p.exists():
+        return {}
+    return {x["demo"]: x["from"] for x in json.loads(p.read_text()).get("padded", [])}
+
+
+def activity(frames):
+    """Per-step visual change between consecutive 0.5 s frames."""
+    thumbs = [np.asarray(Image.open(f).convert("L").resize((64, 36)), dtype=np.float32) for f in frames]
+    return [float(np.abs(a - b).mean()) for a, b in zip(thumbs, thumbs[1:])]
+
+
+def best_window(demo):
+    """(start_s, score, busiest_frame) of the most active SEG_S window in the unpadded part."""
+    frames = sorted((demo["dir"] / "frames").glob("frame_*.png"))
+    usable = demo["dur"] - 0.3
+    if demo["pad_from_frame"] is not None:
+        usable = min(usable, demo["pad_from_frame"] / 30.0)
+    n = int(usable / FRAME_STEP_S)
+    frames = frames[: max(n, 2)]
+    if len(frames) < 2:
+        return 0.0, 0.0, frames[0] if frames else None
+    act = activity(frames)
+    w = max(1, int(SEG_S / FRAME_STEP_S))
+    sums = [sum(act[i:i + w]) for i in range(max(1, len(act) - w + 1))]
+    i = int(np.argmax(sums))
+    start = min(i * FRAME_STEP_S, max(0.0, usable - SEG_S))
+    busiest = frames[i + 1 + int(np.argmax(act[i:i + w]))] if act[i:i + w] else frames[i]
+    return start, sums[i], busiest
+
+
+def build_game(arm, task, data_only=False):
+    tdir = SCORES / arm / task
+    p1 = tdir / "p1"
+    out = MEDIA_OUT / "baseline" / arm / task
+    pads = padded_from(tdir)
+    demos = []
+    if (p1 / "demos").is_dir():
+        for d in sorted((p1 / "demos").iterdir()):
+            mp4 = d / f"{d.name}.mp4"
+            if not mp4.exists():
+                continue
+            dur = float(subprocess.run(["ffprobe", "-v", "error", "-show_entries", "format=duration",
+                                        "-of", "csv=p=0", str(mp4)], capture_output=True, text=True).stdout or 0)
+            demos.append({"id": d.name, "dir": d, "mp4": mp4, "dur": dur, "pad_from_frame": pads.get(d.name)})
+    has_media = bool(demos)
+    if has_media and not (data_only and (out / "highlight.mp4").exists()):
+        (out / "demos").mkdir(parents=True, exist_ok=True)
+        for d in demos:
+            run(["ffmpeg", "-y", "-i", str(d["mp4"]), "-c", "copy", "-an", "-movflags", "+faststart",
+                 str(out / "demos" / f"{d['id']}.mp4")])
+        wins = [(d, *best_window(d)) for d in demos]
+        # the MAX_SEGS most active demos, shown in their original order
+        picked = sorted(sorted(wins, key=lambda x: -x[2])[:MAX_SEGS], key=lambda x: x[0]["id"])
+        cmd, fl = ["ffmpeg", "-y"], []
+        for k, (d, start, _, _) in enumerate(picked):
+            cmd += ["-ss", f"{start:.2f}", "-t", str(SEG_S), "-i", str(d["mp4"])]
+            fl.append(f"[{k}:v]scale=640:360:force_original_aspect_ratio=decrease,pad=640:360:(ow-iw)/2:(oh-ih)/2,"
+                      f"fps=24,setsar=1,format=yuv420p[v{k}]")
+        fl.append("".join(f"[v{k}]" for k in range(len(picked))) + f"concat=n={len(picked)}:v=1:a=0[out]")
+        cmd += ["-filter_complex", ";".join(fl), "-map", "[out]", "-c:v", "libx264", "-preset", "slow",
+                "-crf", "30", "-movflags", "+faststart", "-an", str(out / "highlight.mp4")]
+        run(cmd)
+        busiest = max(wins, key=lambda x: x[2])[3]
+        Image.open(busiest).convert("RGB").resize((640, 360)).save(out / "poster.webp", "WEBP", quality=72)
+    return arm, task, [{"id": d["id"], "dur": round(d["dur"], 1)} for d in demos], has_media
+
+
+def details(arm, task):
+    p1 = SCORES / arm / task / "p1"
+    bpath = p1 / "breakdown.json"
+    if not bpath.exists():
+        return None
+    b = json.loads(bpath.read_text())
+    rationale = {}
+    jl = p1 / "judge_log.json"
+    if jl.exists():
+        for r in json.loads(jl.read_text()):
+            rationale.setdefault(r["requirement_id"], {})[r["demo_id"]] = r.get("rationale", "")
+    return {
+        "reward_p1": b.get("reward"), "build_ok": b.get("build_ok"), "formula": b.get("formula"),
+        "judge": b.get("judge", {}).get("model"),
+        "requirements": [{
+            "id": r["id"], "cat": CATS.get(r["id"][0], ""), "description": r["description"],
+            "score": r.get("aggregated"), "agg": r.get("agg"),
+            "per_demo": r.get("per_demo", {}), "rationale": rationale.get(r["id"], {}),
+        } for r in b.get("requirements", [])],
+    }
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--arms", nargs="+", default=["godot_gpt", "phaser_gpt"])
+    ap.add_argument("--tasks", nargs="*")
+    ap.add_argument("--jobs", type=int, default=16)
+    ap.add_argument("--data-only", action="store_true", help="skip media that already exists")
+    a = ap.parse_args()
+
+    rows = {}
+    for arm in a.arms:
+        for r in csv.DictReader(open(SCORES / f"{arm}.csv")):
+            if not a.tasks or r["task"] in a.tasks:
+                rows[(arm, r["task"])] = r
+
+    media = {}
+    with ProcessPoolExecutor(a.jobs) as ex:
+        futs = [ex.submit(build_game, arm, task, a.data_only) for arm, task in rows]
+        for f in futs:
+            try:
+                arm, task, demos, has_media = f.result()
+                media[(arm, task)] = (demos, has_media)
+                print("ok", arm, task, len(demos), flush=True)
+            except subprocess.CalledProcessError as e:
+                print("FAIL", e.cmd[-1], e.stderr.decode()[-400:], file=sys.stderr, flush=True)
+
+    data = PAGE / "static" / "data"
+    games = []
+    for (arm, task), r in rows.items():
+        if (arm, task) not in media:
+            continue
+        engine_key = arm.split("_")[0]
+        title, blurb, vision = instruction_meta(engine_key, task)
+        demos, has_media = media[(arm, task)]
+        det = details(arm, task)
+        if det:
+            (data / "details" / arm).mkdir(parents=True, exist_ok=True)
+            (data / "details" / arm / f"{task}.json").write_text(json.dumps(det, ensure_ascii=False))
+        f = lambda k: round(float(r[k]), 4)
+        games.append({
+            "arm": arm, "task": task, **ARMS[arm], "genre": task.split("-")[0],
+            "title": title, "blurb": blurb, "vision": vision,
+            "reward": f("reward"), "build": f("BUILD"), "M": f("M"), "D": f("D"), "V": f("V"), "A": f("A"),
+            "media": f"baseline/{arm}/{task}" if has_media else None, "demos": demos,
+            "repaired": None,
+        })
+    games.sort(key=lambda g: (g["arm"], -g["reward"]))
+    data.mkdir(parents=True, exist_ok=True)
+    (data / "games.json").write_text(json.dumps(games, ensure_ascii=False, indent=0))
+    print(f"wrote {len(games)} games")
+
+
+if __name__ == "__main__":
+    main()

_build/build_pairs.py

@@ -0,0 +1,253 @@
+"""Before/after pairs: the initial generation (round 0) next to the game after 30 EvoGame rounds.
+
+For every game with a scored round 30 it writes, under MEDIA_OUT/pairs/<arm>/<task>/:
+  p0.mp4 / final.mp4     the SAME demo replayed on both builds, cut to the same length (no padded tail, <= MAX_S)
+  p0.webp / final.webp   stills taken at the same moment of each clip
+and into the page repo:
+  static/data/evo.json                        one row per game: scores before/after, the chosen demo, score curve
+  static/data/evo/<arm>/<task>.json           per-requirement before/after + judge rationales + the 30-round timeline
+
+Both sides are scored by the same scorer/judge (qwen38-27b, 3 passes); scores are pass means, categories are
+pass means of the rubric variables. The demo shown is the common demo whose per-demo judge score rose the most.
+
+  python _build/build_pairs.py [--arms godot_gpt godot_qwen] [--tasks ...] [--jobs 16]
+"""
+import argparse, json, re, subprocess, sys
+from io import BytesIO
+from concurrent.futures import ProcessPoolExecutor
+from pathlib import Path
+
+from PIL import Image
+
+MEDIA_OUT = Path("/storage/admin/wenyi/evogame-page-media")
+PAGE = Path(__file__).resolve().parents[1]
+TASKS = Path("/home/admin/wenyi/gamecraft-bench/tasks")
+FINAL_ROUND = 30
+MAX_S = 20.0
+FPS = 30  # Godot scorer recordings
+REUSE = "--reuse-media" in sys.argv  # keep already-encoded clips (data-only rebuild)
+
+ARMS = {
+    "godot_gpt": {
+        "engine": "Godot 4", "model": "GPT-5.5", "harness": "Codex CLI",
+        "p0": lambda g: Path(f"/storage/admin/wenyi/r0_scores/godot_gpt/{g}"),
+        "loop": Path("/storage/admin/wenyi/newloop_self40/runs"),
+    },
+    "godot_qwen": {
+        "engine": "Godot 4", "model": "Qwen3.8-27B", "harness": "",
+        # the loop started from corpus_qwen; this is round 0 of exactly that build, scored the same way
+        "p0": lambda g: Path(f"/storage/admin/scored/qwen_{g}__G0"),
+        "loop": Path("/home/admin/wenyi/gamedoctor_run/newloop_selfqwen40/runs"),
+    },
+}
+CATS = {"M": "Core Mechanics", "D": "Content Depth", "V": "Functional Visuals", "A": "Presentation & Art"}
+
+
+def clip_text(t, n):
+    t = re.sub(r"\s+", " ", t or "").strip()
+    return t if len(t) <= n else t[: n - 1].rsplit(" ", 1)[0] + "…"
+
+
+def score_dir_ok(d):
+    s = d / "summary.json"
+    return s.exists() and not (d / "score_failed.txt").exists() and (d / "p1" / "breakdown.json").exists()
+
+
+def scores(d):
+    """reward and category means over the judging passes of one score dir."""
+    rewards = json.loads((d / "summary.json").read_text())["rewards"]
+    cats = {k: [] for k in CATS}
+    build = []
+    for p in sorted(d.glob("p[0-9]/breakdown.json")):
+        b = json.loads(p.read_text())
+        v = b.get("variables", {})
+        build.append(float(v.get("BUILD", 1.0 if b.get("build_ok") else 0.0)))
+        for k in CATS:
+            xs = [float(x) for n, x in v.items() if re.fullmatch(fr"{k}\d+", n)]
+            if xs:
+                cats[k].append(sum(xs) / len(xs))
+    out = {"reward": round(sum(rewards) / len(rewards), 4), "build": round(sum(build) / len(build), 2) if build else 0}
+    out.update({k: round(sum(xs) / len(xs), 4) if xs else 0.0 for k, xs in cats.items()})
+    return out
+
+
+def pad_from(d):
+    p = d / "tail_padding.json"
+    if not p.exists():
+        return {}
+    return {x["demo"]: x["from"] / FPS for x in json.loads(p.read_text()).get("padded", []) if x.get("from") is not None}
+
+
+def duration(mp4):
+    return float(subprocess.run(["ffprobe", "-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", str(mp4)],
+                                capture_output=True, text=True).stdout or 0)
+
+
+def per_demo_mean(breakdown):
+    acc = {}
+    for r in breakdown["requirements"]:
+        for demo, s in r.get("per_demo", {}).items():
+            acc.setdefault(demo, []).append(float(s))
+    return {d: sum(v) / len(v) for d, v in acc.items()}
+
+
+def rationales(d):
+    out = {}
+    jl = d / "p1" / "judge_log.json"
+    if jl.exists():
+        for r in json.loads(jl.read_text()):
+            out.setdefault(r["requirement_id"], {})[r["demo_id"]] = r.get("rationale", "")
+    return out
+
+
+def round_goal(e, plan):
+    """What the round set out to do. Art rounds carry their goal in art/polish, not in the plan question."""
+    q = plan.get("question") or e.get("question") or ""
+    if q and not q.lower().startswith("no development question"):
+        return q
+    for src in (e.get("art"), e.get("polish")):
+        if isinstance(src, dict) and src.get("goal"):
+            return src["goal"]
+    landed = (e.get("art_list") or {}).get("landed") or []
+    asked = [x.get("asked") for x in landed if isinstance(x, dict) and x.get("asked")]
+    return "Art: " + "; ".join(asked[:3]) if asked else ""
+
+
+def timeline(loop_game):
+    rj = loop_game / "rounds.json"
+    if not rj.exists():
+        return []
+    out = []
+    for e in json.loads(rj.read_text()):
+        plan = e.get("plan") or {}
+        ver = e.get("verification") or {}
+        prim = next((i for i in ver.get("issues", []) if i.get("role") == "primary"), None)
+        verdict = ver.get("primary_verdict") or (prim or {}).get("verdict")
+        out.append({
+            "r": e.get("round"),
+            "kind": "art" if e.get("kind") == "art" else "repair",
+            "ask": clip_text(round_goal(e, plan), 240),
+            "found": clip_text(e.get("primary_issue") or "", 220),
+            "verdict": verdict,
+            "note": clip_text((prim or {}).get("note") or "", 260),
+            "files": len((e.get("repair") or {}).get("files_edited") or []),
+            "assets": (e.get("generated_files") or {}).get("n", 0),
+            "build_ok": e.get("build_ok"),
+        })
+    return out
+
+
+def build_game(arm, task):
+    cfg = ARMS[arm]
+    p0d, loop_game = cfg["p0"](task), cfg["loop"] / task
+    fin = loop_game / f"round_{FINAL_ROUND:02d}" / "score"
+    if not score_dir_ok(p0d):
+        return arm, task, None, "no round-0 score"
+    if not score_dir_ok(fin):
+        return arm, task, None, f"round {FINAL_ROUND} not scored (yet)"
+
+    b0 = json.loads((p0d / "p1" / "breakdown.json").read_text())
+    b1 = json.loads((fin / "p1" / "breakdown.json").read_text())
+    m0, m1 = per_demo_mean(b0), per_demo_mean(b1)
+    pads0, pads1 = pad_from(p0d), pad_from(fin)
+    cands = []
+    for demo in sorted(set(m0) & set(m1)):
+        v0, v1 = p0d / "p1" / "demos" / demo / f"{demo}.mp4", fin / "p1" / "demos" / demo / f"{demo}.mp4"
+        if not (v0.exists() and v1.exists()):
+            continue
+        usable = min(pads0.get(demo, 1e9), duration(v0), pads1.get(demo, 1e9), duration(v1), MAX_S)
+        if usable >= 4:
+            cands.append((m1[demo] - m0[demo], usable, demo, v0, v1))
+    if not cands:
+        return arm, task, None, "no common replayable demo"
+    gain, usable, demo, v0, v1 = max(cands)
+
+    out = MEDIA_OUT / "pairs" / arm / task
+    out.mkdir(parents=True, exist_ok=True)
+    for src, name in ((v0, "p0"), (v1, "final")):
+        if REUSE and (out / f"{name}.mp4").exists() and (out / f"{name}.webp").exists():
+            continue
+        subprocess.run(["ffmpeg", "-y", "-v", "error", "-i", str(src), "-t", f"{usable:.2f}",
+                        "-vf", "scale=854:480:force_original_aspect_ratio=decrease,pad=854:480:(ow-iw)/2:(oh-ih)/2,fps=24,format=yuv420p",
+                        "-c:v", "libx264", "-preset", "slow", "-crf", "28", "-an", "-movflags", "+faststart",
+                        str(out / f"{name}.mp4")], check=True)
+        png = subprocess.run(["ffmpeg", "-v", "error", "-ss", f"{usable * 0.45:.2f}", "-i", str(out / f"{name}.mp4"),
+                              "-frames:v", "1", "-f", "image2pipe", "-c:v", "png", "-"], check=True, capture_output=True).stdout
+        Image.open(BytesIO(png)).convert("RGB").save(out / f"{name}.webp", "WEBP", quality=72)
+
+    s0, s1 = scores(p0d), scores(fin)
+    curve = [[0, s0["reward"]]]
+    for rd in sorted(loop_game.glob("round_*/score")):
+        r = int(rd.parent.name.split("_")[1])
+        if score_dir_ok(rd):
+            rw = json.loads((rd / "summary.json").read_text())["rewards"]
+            curve.append([r, round(sum(rw) / len(rw), 4)])
+
+    why0, why1 = rationales(p0d), rationales(fin)
+    reqs = []
+    for r in b1["requirements"]:
+        r0 = next((x for x in b0["requirements"] if x["id"] == r["id"]), None)
+        reqs.append({
+            "id": r["id"], "cat": CATS.get(r["id"][0], ""), "description": r["description"],
+            "p0": r0["aggregated"] if r0 else None, "final": r["aggregated"],
+            "p0_demo": r0["per_demo"].get(demo) if r0 else None, "final_demo": r["per_demo"].get(demo),
+            "why_p0": why0.get(r["id"], {}).get(demo, ""), "why_final": why1.get(r["id"], {}).get(demo, ""),
+        })
+    detail = {"demo": demo, "judge": b1.get("judge", {}).get("model"), "requirements": reqs, "rounds": timeline(loop_game)}
+    (PAGE / "static/data/evo" / arm).mkdir(parents=True, exist_ok=True)
+    (PAGE / "static/data/evo" / arm / f"{task}.json").write_text(json.dumps(detail, ensure_ascii=False))
+
+    return arm, task, {"s0": s0, "s1": s1, "demo": demo, "dur": round(usable, 1), "demo_gain": round(gain, 3), "curve": curve}, "ok"
+
+
+def instruction_meta(task):
+    md = (TASKS / task / "instruction.md").read_text()
+    title = re.search(r"^# (.+)$", md, re.M).group(1).strip()
+    m = re.search(r"## Core Vision\s+(.+?)(?:\n## |\Z)", md, re.S)
+    toml = (TASKS / task / "task.toml").read_text()
+    d = re.search(r'^description\s*=\s*"(.*)"', toml, re.M)
+    return title, (d.group(1) if d else ""), re.sub(r"\s+", " ", m.group(1)).strip() if m else ""
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--arms", nargs="+", default=list(ARMS))
+    ap.add_argument("--tasks", nargs="*")
+    ap.add_argument("--jobs", type=int, default=16)
+    ap.add_argument("--reuse-media", action="store_true", help="only rebuild data; keep encoded clips that exist")
+    a = ap.parse_args()
+
+    todo = [(arm, t.name) for arm in a.arms for t in sorted(ARMS[arm]["loop"].iterdir())
+            if t.is_dir() and (not a.tasks or t.name in a.tasks)]
+    rows, skipped = [], []
+    with ProcessPoolExecutor(a.jobs) as ex:
+        for f in [ex.submit(build_game, arm, task) for arm, task in todo]:
+            try:
+                arm, task, res, why = f.result()
+            except Exception as e:  # one broken game must not sink the batch
+                print("FAIL", type(e).__name__, str(e)[-300:], file=sys.stderr, flush=True)
+                continue
+            if res is None:
+                skipped.append((arm, task, why))
+                continue
+            title, blurb, vision = instruction_meta(task)
+            cfg = ARMS[arm]
+            s0, s1 = res["s0"], res["s1"]
+            rows.append({
+                "arm": arm, "task": task, "engine": cfg["engine"], "model": cfg["model"], "harness": cfg["harness"],
+                "genre": task.split("-")[0], "title": title, "blurb": blurb, "vision": vision,
+                "reward": s0["reward"], "build": s0["build"], **{k: s0[k] for k in CATS},
+                "pair": f"pairs/{arm}/{task}", "demo": res["demo"], "dur": res["dur"], "demo_gain": res["demo_gain"],
+                "repaired": {"round": FINAL_ROUND, "reward": s1["reward"], "build": s1["build"], **{k: s1[k] for k in CATS}},
+                "curve": res["curve"], "media": None, "demos": [],
+            })
+            print("ok", arm, task, f"{s0['reward']:.3f} -> {s1['reward']:.3f}", res["demo"], flush=True)
+    rows.sort(key=lambda g: (g["arm"], -(g["repaired"]["reward"] - g["reward"])))
+    (PAGE / "static/data/evo.json").write_text(json.dumps(rows, ensure_ascii=False, indent=0))
+    print(f"wrote {len(rows)} pairs; skipped {len(skipped)}:")
+    for s in skipped:
+        print("  skip", *s)
+
+
+if __name__ == "__main__":
+    main()

_build/build_web.py

@@ -0,0 +1,89 @@
+"""Playable builds: export a game's round-0 and round-30 Godot projects to the Web (single-threaded WASM).
+
+All exports share one engine (same 4.6.2 template), so it is stored once, gzipped:
+  MEDIA_OUT/play/engine/godot.js, godot.wasm.gz, godot.audio.worklet.js, godot.audio.position.worklet.js
+and each build only ships its game data:
+  MEDIA_OUT/play/<arm>/<task>/<r0|r30>/index.pck
+plus static/data/play.json for the page (sizes feed the loading bar).
+
+Needs Godot 4.6.2 with web export templates in ~/.local/share/godot/export_templates/4.6.2.stable.
+
+  python _build/build_web.py [--games godot_gpt/platformer-echo-climb ...]
+"""
+import argparse, gzip, json, shutil, subprocess, sys
+from pathlib import Path
+
+PAGE = Path(__file__).resolve().parents[1]
+MEDIA_OUT = Path("/storage/admin/wenyi/evogame-page-media")
+WORK = Path("/storage/admin/wenyi/evogame-web/work")
+PRESET = Path(__file__).with_name("web_export_presets.cfg")
+SOURCES = {
+    "godot_gpt": {"r0": lambda t: Path(f"/storage/admin/wenyi/r0_trees/godot_gpt/{t}/game"),
+                  "r30": lambda t: Path(f"/storage/admin/wenyi/newloop_self40/runs/{t}/round_30/tree")},
+    "godot_qwen": {"r0": lambda t: Path(f"/home/admin/wenyi/gamedoctor_run/godot/corpus_qwen/{t}"),
+                   "r30": lambda t: Path(f"/home/admin/wenyi/gamedoctor_run/newloop_selfqwen40/runs/{t}/round_30/tree")},
+}
+# what a visitor needs to know to play; read off each game's own help text
+CONTROLS = {
+    "godot_gpt/platformer-echo-climb": "A / D move · Space jump · R restart",
+    "godot_qwen/shooter-void-patrol": "WASD / arrows move · hold Space fire · X bomb",
+    "godot_gpt/shooter-sky-duel": "arrows fly · Space fire",
+    "godot_qwen/platformer-dig-descent": "Enter start · A / D steer · Space shoot down",
+}
+
+
+def export(src, work, out):
+    shutil.rmtree(work, ignore_errors=True)
+    work.parent.mkdir(parents=True, exist_ok=True)
+    subprocess.run(["rsync", "-a", "--exclude", "*.py", "--exclude", ".godot", f"{src}/", f"{work}/"], check=True)
+    shutil.copy(PRESET, work / "export_presets.cfg")
+    out.mkdir(parents=True, exist_ok=True)
+    log = work.with_suffix(".log").open("w")
+    subprocess.run(["godot", "--headless", "--path", str(work), "--import"], stdout=log, stderr=subprocess.STDOUT, timeout=900)
+    subprocess.run(["godot", "--headless", "--path", str(work), "--export-release", "Web", str(out / "index.html")],
+                   stdout=log, stderr=subprocess.STDOUT, timeout=900, check=True)
+    return out
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument("--games", nargs="+", default=list(CONTROLS))
+    a = ap.parse_args()
+    evo = {f"{g['arm']}/{g['task']}": g for g in json.loads((PAGE / "static/data/evo.json").read_text())}
+    engine = MEDIA_OUT / "play" / "engine"
+    rows = []
+    for key in a.games:
+        arm, task = key.split("/")
+        g = evo.get(key)
+        builds = {}
+        for rnd in ("r0", "r30"):
+            out = export(SOURCES[arm][rnd](task), WORK / task / rnd, MEDIA_OUT / "play" / arm / task / rnd)
+            if not (engine / "godot.wasm.gz").exists():
+                engine.mkdir(parents=True, exist_ok=True)
+                shutil.copy(out / "index.js", engine / "godot.js")
+                for w in ("audio.worklet.js", "audio.position.worklet.js"):
+                    shutil.copy(out / f"index.{w}", engine / f"godot.{w}")
+                raw = (out / "index.wasm").read_bytes()
+                (engine / "godot.wasm.gz").write_bytes(gzip.compress(raw, 9))
+                (engine / "sizes.json").write_text(json.dumps({"wasm": len(raw), "wasm_gz": (engine / "godot.wasm.gz").stat().st_size}))
+            # keep only what the shared player needs
+            for f in out.iterdir():
+                if f.name != "index.pck":
+                    f.unlink()
+            builds[rnd] = {"pck": f"play/{arm}/{task}/{rnd}/index.pck", "size": (out / "index.pck").stat().st_size}
+            print("exported", key, rnd, builds[rnd]["size"] // 1024, "KB", flush=True)
+        rows.append({
+            "arm": arm, "task": task, "title": g["title"] if g else task, "model": g["model"] if g else "",
+            "controls": CONTROLS.get(key, ""), "pair": g["pair"] if g else None,
+            "scores": {"r0": g["reward"], "r30": g["repaired"]["reward"]} if g else {},
+            "builds": builds,
+        })
+    old = json.loads((PAGE / "static/data/play.json").read_text()).get("games", []) if (PAGE / "static/data/play.json").exists() else []
+    rows += [r for r in old if f"{r['arm']}/{r['task']}" not in a.games]
+    sizes = json.loads((engine / "sizes.json").read_text())
+    (PAGE / "static/data/play.json").write_text(json.dumps({"engine": {"base": "play/engine/godot", **sizes}, "games": rows}, indent=1))
+    print("wrote static/data/play.json")
+
+
+if __name__ == "__main__":
+    sys.exit(main())

_build/web_export_presets.cfg

@@ -0,0 +1,34 @@
+[preset.0]
+
+name="Web"
+platform="Web"
+runnable=true
+dedicated_server=false
+custom_features=""
+export_filter="all_resources"
+include_filter="*.json"
+exclude_filter="*.py, demo_outputs/*"
+export_path="build/index.html"
+patches=PackedStringArray()
+encryption_include_filters=""
+encryption_exclude_filters=""
+seed=0
+encrypt_pck=false
+encrypt_directory=false
+script_export_mode=2
+
+[preset.0.options]
+
+custom_template/debug=""
+custom_template/release=""
+variant/extensions_support=false
+variant/thread_support=false
+vram_texture_compression/for_desktop=true
+vram_texture_compression/for_mobile=false
+html/export_icon=true
+html/custom_html_shell=""
+html/head_include=""
+html/canvas_resize_policy=2
+html/focus_canvas_on_start=true
+html/experimental_virtual_keyboard=false
+progressive_web_app/enabled=false

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>EvoGame</title>
+  <title>EvoGame: Self-Evolving Game Generation</title>
   <meta name="description" content="EvoGame turns open-ended game improvement into goal-oriented, state-controlled progressive development through agentic verification.">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -139,7 +139,6 @@
 
 <footer class="footer"><div class="wrap">EvoGame project page · demo media hosted on Hugging Face</div></footer>
 
-<script>window.EVO_MEDIA = "media"; window.EVO_NO_SWITCH = true;</script>
 <script src="static/js/core.js"></script>
 <script src="static/js/v1.js"></script>
 </body>

static/css/v2.css

@@ -0,0 +1,224 @@
+/* v2 — "paper page": light, academic, serif display. Loaded after base.css. */
+:root {
+  color-scheme: light;
+  --bg: #fbfaf7;
+  --bg-alt: #f3f1ea;
+  --surface: #ffffff;
+  --surface-2: #f6f5f0;
+  --border: #e3e0d6;
+  --text: #1b1c20;
+  --text-2: #46474f;
+  --muted: #6f707a;
+  --accent: #0f6f66;          /* deep teal */
+  --accent-soft: rgba(15, 111, 102, .08);
+  --accent-ink: #ffffff;
+  --godot: #2a78d6;           /* series 1 (light step) */
+  --phaser: #eb6834;          /* series 2 (light step) */
+  --bar: #0f6f66;
+  --track: #e8e5dc;
+  --hover-border: #c9c5b8;
+  --nav-bg: rgba(251, 250, 247, .8);
+  --nav-bg-solid: rgba(251, 250, 247, .95);
+  --chip-bg: rgba(20, 21, 26, .72);
+  --overlay: rgba(28, 27, 24, .5);
+  --stripe-a: #f1efe8;
+  --stripe-b: #e9e6dd;
+  --media-bg: #16171b;
+  --s-hi: #1e7a3c; --s-mid: #9a6100; --s-lo: #b8382a;
+  --radius: 10px;
+  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
+}
+
+body { font-size: 16px; line-height: 1.65; }
+h1, h2, h3 { font-weight: 500; letter-spacing: -0.005em; }
+.wrap.narrow { max-width: 1040px; }
+.wrap.wide { max-width: 1360px; }
+em { font-style: italic; }
+
+/* ---------- nav ---------- */
+.nav { height: 54px; border-bottom: 1px solid var(--border); background: var(--nav-bg-solid); }
+.brand { font: 600 20px var(--display); letter-spacing: 0; }
+.nav-links a { color: var(--text-2); font-size: 14px; }
+.nav-links a:hover { background: var(--surface-2); }
+.nav-links { min-width: 0; }
+@media (max-width: 720px) { .nav .nav-links a[href="#compare"] { display: none; } }
+html { scroll-padding-top: 64px; }
+
+/* ---------- title block ---------- */
+.title-block { padding-block: 116px 0; text-align: center; }
+.kicker { font: 600 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
+.title-block h1 { font: 500 clamp(56px, 9vw, 104px)/1 var(--display); letter-spacing: -0.02em; }
+.paper-title { font: 400 clamp(21px, 2.7vw, 30px)/1.3 var(--display); color: var(--text); max-width: 820px; margin: 16px auto 22px; text-wrap: balance; }
+.authors { font-size: 16px; color: var(--text-2); margin: 0; }
+.affil { font-size: 14px; color: var(--muted); margin: 2px 0 26px; }
+.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
+.link-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #202127; color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s; }
+.link-pill svg { width: 15px; height: 15px; flex: none; }
+.link-pill small { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #a9abb5; }
+.link-pill[aria-disabled="true"] { cursor: default; background: #4a4b52; }
+.link-pill.solid { background: var(--accent); }
+.link-pill.solid:hover { background: #0b5a53; }
+
+.teaser { margin: 48px auto 0; max-width: 1180px; }
+.teaser-frame { position: relative; aspect-ratio: 32 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--media-bg); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 40px rgba(40, 36, 20, .12); }
+.teaser-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+@media (max-width: 700px) { .teaser-frame { aspect-ratio: 16 / 9; } }
+.teaser figcaption, .fig figcaption, .diagram figcaption { font-size: 14px; color: var(--text-2); margin-top: 12px; text-align: left; max-width: 860px; }
+.teaser figcaption { margin-inline: auto; text-align: center; }
+figcaption b { color: var(--text); font-weight: 600; }
+
+/* ---------- sections ---------- */
+.section { padding-block: clamp(56px, 7vw, 88px); }
+.section.alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
+.h-section { font: 500 clamp(30px, 3.6vw, 40px)/1.15 var(--display); margin-bottom: 14px; }
+.lede { color: var(--text-2); margin: 0 0 28px; max-width: 760px; }
+.narrow-head { max-width: 1040px; margin: 0 auto; }
+.muted { color: var(--muted); }
+
+.tldr { display: flex; gap: 18px; align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin-bottom: 56px; }
+.tldr-tag { font: 700 12px var(--mono); color: var(--accent); flex: none; }
+.tldr p { margin: 0; font: 400 19px/1.5 var(--display); color: var(--text); }
+@media (max-width: 600px) { .tldr { flex-direction: column; gap: 6px; } }
+
+.abstract { display: grid; grid-template-columns: 1fr 250px; gap: 44px; align-items: start; }
+.prose p { margin: 0 0 16px; color: var(--text-2); text-align: justify; hyphens: auto; }
+.prose b { color: var(--text); font-weight: 600; }
+.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
+.facts div { padding: 14px 0; border-bottom: 1px solid var(--border); }
+.facts dt { font: 500 36px/1 var(--display); color: var(--accent); }
+.facts dd { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
+@media (max-width: 820px) {
+  .abstract { grid-template-columns: 1fr; gap: 20px; }
+  .facts { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
+  .prose p { text-align: left; }
+}
+
+/* ---------- method diagram ---------- */
+.diagram { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 26px 26px 18px; }
+.dg-row { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding-block: 16px; border-bottom: 1px dashed var(--border); }
+.dg-row:first-child { padding-top: 0; }
+.dg-row:nth-last-child(2) { border-bottom: 0; }
+.dg-label { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
+.dg-states, .dg-loop { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0; }
+.dg-states li:not(.arrow) { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
+.dg-states b, .dg-loop b { display: block; font: 600 17px var(--display); color: var(--text); }
+.dg-states span, .dg-loop span { display: block; font-size: 13px; line-height: 1.4; color: var(--text-2); margin-top: 2px; }
+.dg-states li:nth-child(1) { border-top: 3px solid #9fc9c3; }
+.dg-states li:nth-child(3) { border-top: 3px solid #4f9d94; }
+.dg-states li:nth-child(5) { border-top: 3px solid var(--accent); }
+.dg-exp li:not(.arrow) { border-top: 1px solid var(--border) !important; background: var(--surface-2); }
+.arrow { flex: 0 0 28px; position: relative; }
+.arrow::before { content: ""; position: absolute; left: 5px; right: 9px; top: 50%; height: 1.5px; background: var(--muted); }
+.arrow::after { content: ""; position: absolute; right: 5px; top: calc(50% - 4px); border: 4.5px solid transparent; border-left: 6px solid var(--muted); border-right: 0; }
+.dg-loop { gap: 10px; counter-reset: step; }
+.dg-loop li { flex: 1; position: relative; padding: 10px 14px 10px 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
+.dg-loop li.verify { background: var(--accent-soft); border-color: rgba(15, 111, 102, .35); }
+.dg-loop li.verify b { color: var(--accent); }
+.dg-loop i { font: 600 11px var(--mono); font-style: normal; color: var(--muted); }
+.dg-loop li:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translate(50%, -50%); color: var(--muted); font-size: 13px; background: var(--surface); line-height: 1; padding: 1px 0; z-index: 1; }
+.dg-return { grid-column: 2; margin: 8px 0 0; font-size: 13px; color: var(--accent); }
+.diagram figcaption { margin-top: 10px; }
+@media (max-width: 820px) {
+  .dg-row { grid-template-columns: 1fr; gap: 10px; }
+  .dg-return { grid-column: 1; }
+  .dg-states, .dg-loop { flex-direction: column; }
+  .arrow { flex: 0 0 22px; }
+  .arrow::before { left: 50%; right: auto; top: 3px; bottom: 9px; width: 1.5px; height: auto; }
+  .arrow::after { left: calc(50% - 4px); right: auto; top: auto; bottom: 3px; border: 4.5px solid transparent; border-top: 6px solid var(--muted); border-bottom: 0; }
+  .dg-loop li:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -10px; transform: translate(50%, 50%); padding: 0 4px; }
+  .diagram { padding: 18px 16px 14px; }
+}
+
+/* ---------- before / after ---------- */
+.compare { border-radius: 12px; padding: 18px 18px 20px; }
+.compare-head h3 { font: 500 23px var(--display); }
+.compare-head button:hover h3 { color: var(--accent); }
+.compare-label { font: 600 11px var(--font); letter-spacing: .08em; }
+.compare-label .after { color: var(--accent); }
+.compare-label b { font-family: var(--mono); font-size: 14px; }
+.pill { font-family: var(--font); border-radius: 999px; background: var(--surface-2); }
+.frame { border-radius: 8px; }
+.pending { color: var(--muted); }
+.pending b { font: 500 18px var(--display); color: var(--text-2); }
+
+/* ---------- gallery ---------- */
+.filters { top: 54px; background: var(--bg-alt); padding-block: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
+.seg { border-radius: 999px; padding: 3px; }
+.seg button { border-radius: 999px; padding: 5px 14px; }
+.seg button.on { background: var(--text); color: #fff; box-shadow: none; }
+.filters select, .filters input { border-radius: 999px; padding: 7px 14px; }
+.filters select:focus, .filters input:focus { outline: 2px solid rgba(15, 111, 102, .45); }
+.count { font-family: var(--font); }
+
+.grid.dense { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 16px; }
+.card.v2 { min-width: 0; }
+.card.v2 { background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
+.card.v2:hover, .card.v2:focus-visible { transform: none; box-shadow: none; }
+.card.v2 .frame { border-radius: 8px; border: 1px solid var(--border); transition: box-shadow .18s, transform .18s; }
+.card.v2:hover .frame, .card.v2:focus-visible .frame { box-shadow: 0 10px 28px rgba(40, 36, 20, .18); transform: translateY(-2px); }
+.card.v2:focus-visible .frame { outline: 2px solid var(--accent); outline-offset: 2px; }
+.card.v2 .c-body { padding: 9px 2px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
+.c-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.c-title { font: 500 17px/1.25 var(--display); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.c-score { font: 600 14px var(--mono); color: var(--text); flex: none; }
+.c-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
+.c-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 7px; }
+.c-cats span { display: flex; gap: 4px; font: 500 10px var(--mono); color: var(--muted); border-top: 2px solid var(--track); padding-top: 4px; position: relative; }
+.c-cats span i { position: absolute; left: 0; top: -2px; height: 2px; background: var(--bar); }
+.c-cats span b { font-weight: 500; color: var(--text-2); }
+.more .btn { border-radius: 999px; padding: 9px 22px; }
+@media (max-width: 520px) { .grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } .c-cats { display: none; } .c-title { font-size: 15px; } }
+
+/* ---------- results ---------- */
+.formula { font: 500 14px var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin: -12px 0 28px; overflow-x: auto; white-space: nowrap; }
+.fig { margin: 0 0 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; min-width: 0; }
+.fig-head { display: flex; justify-content: flex-end; }
+.legend { margin: 0 0 8px; }
+.fig-pair { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; margin-bottom: 28px; }
+.fig-pair .fig { margin: 0; }
+.fig-note { padding: 6px 4px; }
+.fig-note h3 { font: 500 20px var(--display); margin-bottom: 10px; }
+.fig-note p { margin: 0 0 8px; font-size: 14px; color: var(--text-2); }
+.fig-note b { color: var(--text); font-weight: 600; }
+@media (max-width: 820px) { .fig-pair { grid-template-columns: 1fr; } }
+.table-fig { padding: 0; overflow: hidden; }
+.table-fig figcaption { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--border); max-width: none; }
+.table-fig .table-wrap { margin: 0; border: 0; border-radius: 0; }
+.table { font-size: 14px; }
+.table th { font: 600 11px var(--font); letter-spacing: .06em; background: var(--surface-2); }
+.row-label { font-family: var(--font); }
+.strip-dot { stroke: #fff; }
+.tip { background: #1b1c20; border-color: #1b1c20; }
+
+/* ---------- citation / footer ---------- */
+.bibtex { background: var(--surface); color: var(--text); }
+.copy { background: var(--surface-2); }
+.footer { background: var(--bg); }
+
+/* ---------- modal ---------- */
+.modal-panel { background: var(--surface); border-color: var(--border); border-radius: 14px; box-shadow: 0 30px 80px rgba(20, 18, 10, .3); }
+.modal-media { background: var(--bg); }
+.modal-close { background: var(--surface); color: var(--text); }
+.player { border-radius: 8px; }
+.demo-tabs button { border-radius: 999px; background: var(--surface); }
+.demo-tabs button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+.demo-tabs button.on small { color: var(--accent); }
+.m-prompt h3 { font-family: var(--font); }
+.m-prompt p { font: 400 16px/1.55 var(--display); color: var(--text-2); }
+.modal-info h2 { font: 500 32px/1.15 var(--display); }
+.m-score { background: var(--bg); }
+.m-overall b { font-weight: 600; }
+.m-overall span, .req-cat { font-family: var(--font); }
+.twin { background: var(--surface); }
+.twin:hover { border-color: var(--accent); }
+.m-h { font: 500 21px var(--display); }
+.req { background: var(--surface); }
+.req.open { border-color: var(--hover-border); }
+.req-demos button { background: var(--surface-2); }
+.req-demos button.on { border-color: var(--accent); }
+.rationale { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text); }
+.btn { border-radius: 999px; }
+
+.brand, .h-section, .title-block h1 { color: var(--text); }

static/css/v3.css

@@ -0,0 +1,269 @@
+/* v3 — Arcade. Layered on base.css: tokens first, then arcade-specific pieces. */
+:root {
+  --bg: #0d0818;
+  --bg-alt: #120b22;
+  --surface: #1a1030;
+  --surface-2: #241640;
+  --border: #3a2764;
+  --text: #f4f0ff;
+  --text-2: #cbc1e8;
+  --muted: #9387b6;
+  --accent: #ffd23f;          /* arcade yellow */
+  --accent-ink: #1a1030;
+  --cyan: #3ef2ff;
+  --magenta: #ff4fd8;
+  --bar: #ffd23f;
+  --track: #2d1f4d;
+  --hover-border: #6d52b8;
+  --nav-bg: rgba(13, 8, 24, .7);
+  --nav-bg-solid: rgba(13, 8, 24, .94);
+  --chip-bg: rgba(13, 8, 24, .88);
+  --overlay: rgba(6, 3, 14, .88);
+  --stripe-a: #150d28;
+  --stripe-b: #1b1233;
+  --media-bg: #05030b;
+  --s-hi: #7cf29a; --s-mid: #ffd23f; --s-lo: #ff7a8a;
+  --radius: 0px;
+  --pixel: "Press Start 2P", ui-monospace, "SFMono-Regular", Menlo, monospace;
+  --display: var(--pixel);
+  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --shadow: 4px 4px 0 #000;
+}
+
+body.arcade { background:
+  radial-gradient(1200px 600px at 80% -10%, rgba(255, 79, 216, .10), transparent 60%),
+  radial-gradient(900px 500px at 0% 20%, rgba(62, 242, 255, .07), transparent 60%),
+  var(--bg); }
+
+/* pixel font only where it's a label, heading or number */
+h1, h2, .level h3, .chart-card h3, .m-h { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }
+h3 { font-family: var(--font); font-weight: 700; letter-spacing: -0.01em; }
+
+.scanlines {
+  position: fixed; inset: 0; z-index: 90; pointer-events: none;
+  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
+  opacity: .35; mix-blend-mode: multiply;
+}
+
+/* ---------- nav ---------- */
+.nav { height: 60px; border-bottom: 3px solid transparent; }
+.nav.scrolled { border-color: var(--border); }
+.brand { font: 400 13px var(--pixel); gap: 10px; }
+.coin { width: 14px; height: 14px; background: var(--accent); box-shadow: inset -3px -3px 0 #c79a12, 0 0 0 2px #000; }
+.nav-links a { font: 400 10px var(--pixel); color: var(--text-2); border-radius: 0; padding: 8px 10px; }
+.nav-links a:hover { background: var(--surface); color: var(--accent); }
+@media (max-width: 720px) { .nav-links a:not([href="#gallery"]):not([href="#compare"]) { display: none; } }
+
+/* ---------- buttons ---------- */
+.btn { font: 400 10px/1 var(--pixel); border-radius: 0; border: 3px solid var(--border); background: var(--surface);
+  box-shadow: var(--shadow); padding: 12px 13px; transition: transform .08s, box-shadow .08s, border-color .15s; }
+.btn:hover { border-color: var(--cyan); background: var(--surface-2); }
+.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
+.btn small { font: 400 7px var(--pixel); color: var(--magenta); letter-spacing: 0; }
+.btn-start { background: var(--accent); color: var(--accent-ink); border-color: #000; }
+.btn-start:hover { background: #ffe06e; border-color: #000; box-shadow: 4px 4px 0 var(--magenta); }
+.btn-sm { padding: 8px 10px; font-size: 9px; }
+.tri { display: inline-block; width: 8px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-right: 10px; vertical-align: -1px; }
+.blink { animation: blink 1s steps(2, start) infinite; }
+@keyframes blink { to { visibility: hidden; } }
+
+/* ---------- hero ---------- */
+.hero { min-height: auto; display: block; padding-block: 108px 56px; overflow: visible; }
+.hero-grid { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
+.insert-coin { font: 400 10px/1.6 var(--pixel); color: var(--cyan); margin: 0 0 22px; }
+.hero h1 { font-size: clamp(38px, 7.2vw, 84px); line-height: 1.05; letter-spacing: 0; text-shadow: none; display: flex; flex-wrap: wrap; }
+.h1-evo { color: var(--cyan); text-shadow: 4px 4px 0 #0b3e52, 8px 8px 0 #000; }
+.h1-game { color: var(--accent); text-shadow: 4px 4px 0 #9b2a86, 8px 8px 0 #000; }
+.hero-sub { font-size: clamp(16px, 1.9vw, 20px); color: var(--text); margin: 26px 0 8px; max-width: 560px; text-shadow: none; }
+.authors { color: var(--muted); margin: 0 0 28px; }
+.hero-cta { justify-content: flex-start; gap: 12px; }
+
+.cabinet { position: relative; background: linear-gradient(180deg, #2a1650, #1a0e33); border: 3px solid #000;
+  box-shadow: 0 0 0 3px var(--border), 10px 10px 0 #000; padding: 14px 16px 16px; }
+.marquee { font: 400 clamp(9px, 1.1vw, 12px)/1 var(--pixel); text-align: center; color: #fff; padding: 12px 8px; margin-bottom: 14px;
+  background: linear-gradient(90deg, var(--magenta), #7a3cff 50%, var(--cyan)); border: 3px solid #000;
+  text-shadow: 2px 2px 0 #000; letter-spacing: .08em; }
+.bezel { background: #07040f; border: 3px solid #000; padding: clamp(10px, 1.6vw, 18px); box-shadow: inset 0 0 0 3px #1f1340; }
+.crt { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 14px / 18px; background: var(--media-bg);
+  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9); }
+.crt video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
+.crt-glare { position: absolute; inset: 0; pointer-events: none;
+  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .10), transparent 45%),
+              repeating-linear-gradient(to bottom, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px);
+  box-shadow: inset 0 0 60px rgba(0, 0, 0, .75); }
+.controls { display: flex; align-items: center; gap: 14px; padding: 16px 10px 2px; }
+.stick { width: 16px; height: 16px; border-radius: 50%; background: #e23; box-shadow: 0 0 0 3px #000, 0 10px 0 -4px #111; margin-right: auto; }
+.btn-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px #000, inset -3px -3px 0 rgba(0, 0, 0, .3); }
+.b1 { background: var(--cyan); } .b2 { background: var(--accent); } .b3 { background: var(--magenta); }
+@media (max-width: 900px) {
+  .hero { padding-top: 88px; }
+  .hero-grid { grid-template-columns: 1fr; }
+  .cabinet { order: -1; }
+}
+
+/* ---------- hi-score ---------- */
+.hiscore-section { padding-block: 24px 40px; }
+.hiscore { max-width: 820px; margin: 0 auto; border: 3px solid var(--cyan); background: rgba(10, 6, 20, .85);
+  box-shadow: 0 0 0 3px #000, 8px 8px 0 #000, 0 0 40px rgba(62, 242, 255, .15); padding: clamp(18px, 3vw, 30px); }
+.hiscore-title { font: 400 clamp(12px, 2vw, 16px) var(--pixel); color: var(--accent); text-align: center; margin-bottom: 20px; }
+.star { font: 700 18px var(--font); color: var(--magenta); vertical-align: 1px; }
+.hiscore-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
+.hiscore-rows li { display: grid; grid-template-columns: 60px 1fr auto; align-items: baseline; gap: 14px; }
+.hiscore-rows .rank { font: 400 11px var(--pixel); color: var(--magenta); }
+.hiscore-rows li:nth-child(1) .rank { color: var(--accent); }
+.hiscore-rows li:nth-child(2) .rank { color: #d7deea; }
+.hiscore-rows li:nth-child(3) .rank { color: #e59a62; }
+.hiscore-rows .what { color: var(--text-2); font-size: 15px; border-bottom: 2px dotted var(--border); padding-bottom: 4px; min-width: 0; }
+.hiscore-rows b { font: 400 clamp(16px, 2.6vw, 24px) var(--pixel); color: var(--text); }
+@media (max-width: 520px) {
+  .hiscore-rows li { grid-template-columns: 44px 1fr auto; gap: 10px; }
+  .hiscore-rows .rank { font-size: 9px; }
+  .hiscore-rows .what { font-size: 13px; }
+}
+
+/* ---------- sections ---------- */
+.section-alt { background: var(--bg-alt); border-block: 3px solid var(--border); }
+.section-head { max-width: 820px; }
+.section-head h2 { font-size: clamp(18px, 3vw, 30px); line-height: 1.45; margin-bottom: 16px; }
+.section-head p + p { margin-top: 12px; }
+.section-head strong { color: var(--accent); }
+.kicker { font: 400 10px var(--pixel) !important; color: var(--magenta) !important; margin: 0 0 14px !important; }
+
+/* ---------- level select ---------- */
+.level-select { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
+.level { position: relative; background: var(--surface); border: 3px solid var(--border); box-shadow: var(--shadow); padding: 20px 18px 16px; }
+.level-tag { display: inline-block; font: 400 10px var(--pixel); background: var(--cyan); color: #04121a; padding: 6px 8px; margin-bottom: 14px; box-shadow: 3px 3px 0 #000; }
+.level h3 { font-size: 15px; color: var(--text); margin-bottom: 10px; }
+.level p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; }
+.level-stars { font-size: 18px; color: var(--accent); letter-spacing: 4px; }
+.level-boss { border-color: var(--accent); }
+.level-boss .level-tag { background: var(--accent); color: var(--accent-ink); }
+.level-arrow { align-self: center; color: var(--magenta); line-height: 0; }
+.level-arrow .tri { width: 12px; height: 16px; margin: 0; }
+.verify-loop { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 28px; }
+.verify { border: 3px dashed var(--hover-border); padding: 14px 16px; }
+.verify-key { font: 400 10px var(--pixel); color: var(--cyan); }
+.verify p { margin: 8px 0 0; color: var(--text-2); font-size: 14px; }
+.verify-mid { align-self: center; font: 400 10px var(--pixel); color: var(--accent-ink); background: var(--magenta); padding: 10px 12px; box-shadow: 3px 3px 0 #000; }
+.level-foot { color: var(--muted); margin: 18px 0 0; }
+@media (max-width: 860px) {
+  .level-select, .verify-loop { grid-template-columns: 1fr; }
+  .level-arrow { justify-self: center; transform: rotate(90deg); }
+  .verify-mid { justify-self: center; }
+}
+
+/* ---------- versus (before/after) ---------- */
+.compare { border: 3px solid var(--border); box-shadow: 6px 6px 0 #000; background: var(--surface); }
+.compare-head h3 { font-size: 18px; }
+.compare-head button:hover h3 { color: var(--accent); }
+.compare-pair { grid-template-columns: 1fr auto 1fr; align-items: center; }
+.vs { font: 400 clamp(14px, 2vw, 22px) var(--pixel); color: var(--accent); text-shadow: 3px 3px 0 var(--magenta); padding-top: 24px; }
+.compare-label { font: 400 9px var(--pixel); letter-spacing: 0; }
+.compare-label .before { color: var(--cyan); }
+.compare-label .after { color: var(--magenta); }
+.compare-label b { font: 400 12px var(--pixel); color: var(--accent); }
+.frame { border-radius: 0; border: 3px solid #000; }
+.pending b { font: 400 10px/1.8 var(--pixel); color: var(--magenta); }
+@media (max-width: 700px) { .compare-pair { grid-template-columns: 1fr; } .vs { justify-self: center; padding: 0; } }
+
+/* ---------- gallery ---------- */
+.filters { top: 60px; }
+.seg { border-radius: 0; border: 3px solid var(--border); padding: 3px; }
+.seg button { font: 400 9px var(--pixel); border-radius: 0; padding: 9px 12px; }
+.seg button.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
+.filters select, .filters input { border-radius: 0; border: 3px solid var(--border); }
+.filters select:focus, .filters input:focus { outline: 3px solid var(--cyan); outline-offset: 0; }
+.count { font: 400 9px var(--pixel); }
+
+.grid { gap: 22px; }
+.cart { position: relative; border: 3px solid var(--border); border-radius: 0; background: var(--surface); box-shadow: var(--shadow); overflow: visible; }
+.cart:hover, .cart:focus-visible { transform: translate(-3px, -3px); border-color: var(--cyan); box-shadow: 7px 7px 0 var(--magenta); }
+.cart-notch { position: absolute; top: -3px; left: 50%; width: 38%; height: 9px; transform: translateX(-50%); background: var(--bg); border: 3px solid var(--border); border-top: 0; z-index: 2; }
+.cart:hover .cart-notch, .cart:focus-visible .cart-notch { border-color: var(--cyan); }
+.cart .frame { border: 0; border-bottom: 3px solid #000; }
+.badge { font: 400 8px var(--pixel); border-radius: 0; padding: 6px 7px; box-shadow: 2px 2px 0 #000; }
+.dot { border-radius: 0; }
+.card-genre { font: 400 8px var(--pixel); color: var(--cyan); letter-spacing: 0; }
+.cart h3 { font-size: 16px; }
+.cart-score { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dotted var(--border); padding-top: 8px; }
+.cart-score span { font: 400 8px var(--pixel); color: var(--muted); }
+.cart-score b { font: 400 14px var(--pixel); color: var(--accent); }
+.pmeters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
+.pmeter { display: grid; grid-template-columns: 10px 1fr 26px; gap: 5px; align-items: center; }
+.pk, .pv { font: 400 8px var(--pixel); color: var(--muted); }
+.pv { text-align: right; color: var(--text-2); }
+.pbar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 8px; }
+.pbar i { background: var(--track); }
+.pbar i.on { background: var(--bar); }
+.no-media { font: 400 9px/1.8 var(--pixel); }
+.more .btn { font-size: 11px; }
+.empty { font: 400 11px var(--pixel); }
+
+/* ---------- leaderboards ---------- */
+.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
+.board { border: 3px solid var(--border); background: #0a0616; box-shadow: 6px 6px 0 #000; padding: 16px; min-width: 0; }
+.board-godot { border-top-color: var(--godot); }
+.board-phaser { border-top-color: var(--phaser); }
+.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
+.board-head span { font: 400 12px var(--pixel); display: inline-flex; align-items: center; gap: 8px; }
+.board-head small { font: 400 8px var(--pixel); color: var(--muted); }
+.board ol { list-style: none; margin: 0; padding: 0; }
+.board-row { width: 100%; display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; padding: 8px 6px; background: none; border: 0; border-bottom: 2px dotted #231740; cursor: pointer; text-align: left; }
+.board li:last-child .board-row { border-bottom: 0; }
+.board-row:hover { background: var(--surface); }
+.board-row:hover .board-title { color: var(--accent); }
+.board-rank { font: 400 10px var(--pixel); color: var(--muted); }
+.r1 .board-rank { color: var(--accent); } .r2 .board-rank { color: #d7deea; } .r3 .board-rank { color: #e59a62; }
+.board-title { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.board-title small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
+.board-score { font: 400 12px var(--pixel); color: var(--text); }
+@media (max-width: 860px) { .boards { grid-template-columns: 1fr; } }
+
+/* ---------- charts & table ---------- */
+.chart-card { border: 3px solid var(--border); box-shadow: 6px 6px 0 #000; }
+.chart-card h3 { font-size: 12px; color: var(--accent); line-height: 1.5; }
+.row-label { font-family: var(--font); }
+.table-wrap { border: 3px solid var(--border); border-radius: 0; box-shadow: 6px 6px 0 #000; }
+.table th { font: 400 8px var(--pixel); letter-spacing: 0; color: var(--cyan); }
+
+/* ---------- citation / footer ---------- */
+.bibtex { border: 3px solid var(--border); box-shadow: 6px 6px 0 #000; }
+.copy { font: 400 9px var(--pixel); border-radius: 0; border: 2px solid var(--border); padding: 7px 9px; }
+.footer { border-top: 3px solid var(--border); display: block; }
+.footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
+.footer-go { font: 400 10px var(--pixel); color: var(--magenta); }
+
+/* ---------- modal ---------- */
+.modal-panel { border: 3px solid var(--cyan); border-radius: 0; background: var(--bg-alt); box-shadow: 0 0 0 3px #000, 10px 10px 0 #000; }
+.modal-close { border-radius: 0; border: 3px solid var(--border); font: 400 12px var(--pixel); box-shadow: 3px 3px 0 #000; }
+.modal-close:hover { border-color: var(--magenta); color: var(--magenta); }
+.modal-media { border-right: 3px solid var(--border); }
+.player { border-radius: 0; border: 3px solid #000; }
+.demo-tabs button { border-radius: 0; border: 2px solid var(--border); }
+.demo-tabs button.on { border-color: var(--accent); background: rgba(255, 210, 63, .1); }
+.m-prompt { border-top: 3px dotted var(--border); }
+.m-prompt h3, .req-cat { font: 400 9px var(--pixel); color: var(--cyan); letter-spacing: 0; }
+.modal-nav { font: 400 9px var(--pixel); }
+.pill { border-radius: 0; font: 400 8px/1.4 var(--pixel); padding: 6px 7px; }
+.modal-info h2 { font-size: clamp(15px, 2vw, 20px); line-height: 1.5; }
+.m-score { border-radius: 0; border: 3px solid var(--border); background: #0a0616; }
+.m-overall b { font: 400 30px/1 var(--pixel); color: var(--accent); }
+.m-overall span { font: 400 8px var(--pixel); letter-spacing: 0; display: block; margin-top: 8px; }
+.m-cat b { font: 400 9px var(--pixel); }
+.m-cat .meter { height: 8px; border-radius: 0; }
+.m-cat .meter i, .meter i { border-radius: 0; }
+.meter { border-radius: 0; }
+.twin { border-radius: 0; border: 2px dashed var(--hover-border); }
+.twin b { font: 400 11px var(--pixel); color: var(--accent); }
+.m-h { font-size: 12px; color: var(--accent); margin-top: 26px; }
+.req { border-radius: 0; border: 2px solid var(--border); }
+.req-id { font: 400 9px var(--pixel); padding-top: 3px; }
+.req-score { font: 400 10px var(--pixel); padding-top: 2px; }
+.req-demos button { border-radius: 0; font: 400 8px/1.4 var(--pixel); padding: 4px 6px; }
+.rationale { border-radius: 0; border-left: 3px solid var(--accent); }
+
+/* ---------- motion ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .blink { animation: none; }
+  .cart, .btn { transition: none; }
+}

static/css/v4.css

@@ -0,0 +1,230 @@
+/* v4 — "Cinema": warm near-black, editorial serif, one amber accent, task-first. Loads after base.css. */
+:root {
+  --bg: #0b0a09;
+  --bg-alt: #100e0c;
+  --surface: #171512;
+  --surface-2: #201d19;
+  --border: #2a2621;
+  --text: #f3ede4;
+  --text-2: #c7bdaf;
+  --muted: #8d8376;
+  --accent: #f0a73a;
+  --accent-ink: #1b1206;
+  --godot: #3987e5;
+  --phaser: #d95926;
+  --bar: #f0a73a;
+  --track: #2c2823;
+  --hover-border: #4d443a;
+  --nav-bg: rgba(11, 10, 9, .5);
+  --nav-bg-solid: rgba(11, 10, 9, .93);
+  --chip-bg: rgba(8, 7, 6, .78);
+  --overlay: rgba(6, 5, 4, .9);
+  --stripe-a: #13110f;
+  --stripe-b: #181613;
+  --media-bg: #050403;
+  --s-hi: #9ad58a; --s-mid: #e8c36a; --s-lo: #ef8f7c;
+  --radius: 4px;
+  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
+  --gutter: clamp(16px, 4vw, 48px);
+}
+
+body.v4 { font-size: 15.5px; }
+.v4 h1, .v4 h2, .v4 h3 { font-weight: 400; letter-spacing: 0; }
+.v4 em { font-style: italic; }
+.v4 .wrap { max-width: 1320px; }
+.kicker, .v4 .section-head .kicker { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
+
+/* ---------- nav ---------- */
+.v4 .brand { font: 400 24px var(--display); letter-spacing: .01em; }
+.v4 .nav-links a { border-radius: 0; font-size: 13px; letter-spacing: .02em; }
+.v4 .nav-links a:hover { background: none; color: var(--accent); }
+
+/* ---------- buttons ---------- */
+.v4 .btn { border-radius: 999px; padding: 10px 20px; background: transparent; border-color: var(--hover-border); font-weight: 500; }
+.v4 .btn:hover { background: var(--surface); border-color: var(--text-2); }
+.v4 .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+.v4 .btn-primary:hover { background: #f7b95c; border-color: #f7b95c; transform: none; }
+
+/* ---------- masthead + theater ---------- */
+.masthead { padding: 108px var(--gutter) 72px; max-width: 1480px; margin: 0 auto; }
+.mast-grid { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
+.mast-copy h1 { font-size: clamp(64px, 9vw, 132px); line-height: .9; margin: 0 0 18px; }
+.mast-sub { font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--display); color: var(--text); margin: 0 0 14px; max-width: 30ch; }
+.mast-sub em { color: var(--accent); }
+.authors { color: var(--muted); margin: 0 0 28px; font-size: 14px; }
+.mast-cta { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.theater { margin: 0; min-width: 0; }
+.screen { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--media-bg); border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
+.screen-still, .screen-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.screen-video { transition: opacity .45s ease; }
+.screen.switching .screen-video { opacity: 0; }
+.screen-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,5,4,.88) 0%, rgba(6,5,4,.2) 38%, transparent 60%); pointer-events: none; }
+.screen-caption { position: absolute; left: clamp(14px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); right: 140px; text-align: left; display: grid; gap: 4px; }
+.now { font: 500 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
+.screen-title { font: 400 clamp(24px, 3.2vw, 42px)/1.05 var(--display); color: #fff; }
+.screen-meta { font-size: 13px; color: #d9d0c3; display: inline-flex; align-items: center; gap: 8px; }
+.screen-score { position: absolute; right: clamp(14px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); text-align: right; color: #fff; }
+.screen-score b { display: block; font: 400 clamp(40px, 5vw, 64px)/.9 var(--display); }
+.screen-score span { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #d9d0c3; }
+.screen-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); }
+.screen-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
+.screen:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+.rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
+.rail-item { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; opacity: .55; transition: opacity .2s; min-width: 0; }
+.rail-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; border-bottom: 2px solid transparent; }
+.rail-item:hover, .rail-item.on { opacity: 1; }
+.rail-item.on img { border-bottom-color: var(--accent); }
+.rail-label { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-2); }
+.rail-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 1080px) {
+  .mast-grid { grid-template-columns: 1fr; }
+  .mast-copy h1 { font-size: clamp(64px, 16vw, 120px); }
+}
+@media (max-width: 640px) {
+  .masthead { padding-top: 88px; }
+  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .screen-caption { right: 92px; }
+  .screen-meta { font-size: 11px; }
+}
+
+/* ---------- sections ---------- */
+.v4 .section { padding-block: clamp(72px, 10vw, 128px); }
+.v4 .section-alt { background: var(--bg-alt); }
+.v4 .section-head { max-width: 760px; margin-bottom: 44px; }
+.v4 .section-head h2 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1; margin-bottom: 16px; }
+.v4 .section-head p:not(.kicker) { font-size: 16.5px; line-height: 1.65; }
+
+/* ---------- overview ---------- */
+.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border); margin-bottom: clamp(56px, 8vw, 96px); }
+.figures div { padding: 26px 20px 22px; border-left: 1px solid var(--border); }
+.figures div:first-child { border-left: 0; padding-left: 0; }
+.figures b { display: block; font: 400 clamp(48px, 6vw, 76px)/1 var(--display); color: var(--text); }
+.figures span { color: var(--muted); font-size: 13.5px; }
+@media (max-width: 760px) {
+  .figures { grid-template-columns: repeat(2, 1fr); }
+  .figures div:nth-child(3) { border-left: 0; padding-left: 0; }
+  .figures div:nth-child(n+3) { border-top: 1px solid var(--border); }
+}
+.essay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); }
+.essay h2 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; }
+.essay h2 em { color: var(--accent); }
+.essay-body p { color: var(--text-2); font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
+.essay-body strong { color: var(--text); font-weight: 600; }
+.acts { list-style: none; padding: 0; margin: clamp(48px, 7vw, 88px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: act; }
+.acts li { padding: 26px 28px 8px 0; border-top: 1px solid var(--hover-border); position: relative; }
+.acts li + li { padding-left: 28px; border-left: 1px solid var(--border); }
+.acts li::after { content: "→"; position: absolute; right: -8px; top: 22px; color: var(--accent); font-size: 18px; }
+.acts li:last-child::after { content: none; }
+.act-no { font: italic 400 22px var(--display); color: var(--accent); }
+.acts h3 { font-size: 36px; margin: 2px 0 6px; }
+.acts p { color: var(--text-2); margin: 0 0 18px; }
+.acts-foot { color: var(--muted); max-width: 780px; margin: 24px 0 0; font-size: 15px; }
+@media (max-width: 860px) {
+  .essay { grid-template-columns: 1fr; }
+  .acts { grid-template-columns: 1fr; }
+  .acts li, .acts li + li { padding-left: 0; border-left: 0; }
+  .acts li::after { content: none; }
+}
+
+/* ---------- before / after ---------- */
+.v4 .compare-list { gap: 56px; }
+.v4 .compare { background: none; border: 0; padding: 0; border-radius: 0; }
+.v4 .compare-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
+.v4 .compare-head h3 { font-size: clamp(28px, 3.2vw, 40px); }
+.v4 .compare-pair { gap: 16px; }
+.v4 .compare-label { font-size: 10.5px; letter-spacing: .16em; }
+.v4 .compare-label b { font: 400 30px/1 var(--display); }
+.v4 .frame { border-radius: 2px; border: 0; }
+.v4 .pill { border-radius: 999px; background: transparent; }
+
+/* ---------- gallery toolbar ---------- */
+.v4 .filters { border-block: 1px solid var(--border); padding-block: 12px; margin-bottom: 36px; }
+.v4 .seg { border-radius: 999px; background: transparent; }
+.v4 .seg button { border-radius: 999px; }
+.v4 .seg button.on { background: var(--text); color: var(--bg); box-shadow: none; }
+.v4 .filters select, .v4 .filters input { border-radius: 999px; background: transparent; }
+.v4 .filters select option { background: var(--surface); color: var(--text); }
+.v4 .filters select:focus, .v4 .filters input:focus { outline-color: rgba(240,167,58,.6); }
+
+/* ---------- pair cards ---------- */
+.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); gap: 56px 36px; }
+.pairs.solo-mode { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 24px; }
+.pair { min-width: 0; }
+.pair-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
+.pair-head > div:first-child { min-width: 0; }
+.pair-genre { font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
+.pair-head h3 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.05; }
+.halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
+.half { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; min-width: 0; display: block; }
+.half .frame { border-radius: 2px; }
+.half .frame img { transition: transform .5s ease, filter .3s; }
+.half .frame video { opacity: 0; transition: opacity .3s; }
+.half .frame video.ready { opacity: 1; }
+.half:hover .frame img { transform: scale(1.03); }
+.half:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.half-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 2px 0; border-top: 2px solid transparent; }
+.half:hover .half-foot { border-top-color: var(--accent); }
+.half-engine { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
+.half-score { font: 400 30px/1 var(--display); color: var(--text); }
+
+.dumbbell { flex: none; width: 150px; display: grid; gap: 6px; justify-items: end; padding-bottom: 4px; }
+.db-track { position: relative; width: 100%; height: 12px; }
+.db-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--track); }
+.db-span { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--text-2); opacity: .55; }
+.db-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
+.db-dot.godot { background: var(--godot); } .db-dot.phaser { background: var(--phaser); }
+.db-label { font: 500 11px var(--mono); color: var(--text-2); white-space: nowrap; }
+@media (max-width: 520px) {
+  .pair-head { flex-direction: column; align-items: stretch; gap: 8px; }
+  .dumbbell { width: 100%; justify-items: start; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
+  .half-score { font-size: 24px; }
+  .half-engine { font-size: 12px; gap: 5px; }
+}
+.v4 .more .btn { padding: 12px 28px; }
+
+/* ---------- results ---------- */
+.h2h { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
+.h2h-side { display: grid; gap: 20px; min-width: 0; }
+@media (max-width: 960px) { .h2h { grid-template-columns: 1fr; } }
+.v4 .chart-card { border-radius: 2px; background: var(--surface); padding: 22px 22px 14px; }
+.v4 .chart-card h3 { font-size: 26px; }
+.scatter { overflow-x: auto; }
+.scatter svg { display: block; width: 100%; height: auto; min-width: 300px; margin-top: 10px; }
+.diag { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
+.axis-title { fill: var(--text-2); font: 500 12px var(--font); }
+.zone { fill: var(--muted); font: italic 400 16px var(--display); }
+.sc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
+.tally { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 20px 22px; display: grid; gap: 16px; }
+.tally-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.tally-row b { display: block; font: 400 52px/1 var(--display); }
+.tally-row span { color: var(--text-2); font-size: 13px; }
+.tally-big { display: grid; gap: 2px; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: 14px 0 0; cursor: pointer; }
+.tally-big span { font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
+.tally-big strong { font: 400 26px var(--display); color: var(--text); }
+.tally-big em { color: var(--accent); font-style: normal; font-size: 13px; }
+.tally-big:hover strong { color: var(--accent); }
+.v4 .table-wrap { border-radius: 2px; margin-top: 20px; }
+.v4 .table th { background: var(--surface-2); }
+
+/* ---------- citation / footer ---------- */
+.v4 .bibtex { border-radius: 2px; }
+.v4 .footer { font-size: 12px; }
+
+/* ---------- modal ---------- */
+.v4 .modal-panel { border-radius: 4px; background: var(--bg); }
+.v4 .modal-close { background: transparent; }
+.v4 .player { border-radius: 2px; }
+.v4 .demo-tabs button { border-radius: 999px; background: transparent; }
+.v4 .demo-tabs button.on { border-color: var(--accent); background: rgba(240,167,58,.1); }
+.v4 .modal-info h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; margin-top: 4px; }
+.v4 .m-score { border-radius: 2px; background: var(--surface); }
+.v4 .m-overall b { font: 400 60px/.9 var(--display); }
+.v4 .m-prompt p { font: 400 19px/1.45 var(--display); color: var(--text-2); }
+.v4 .twin { border-radius: 2px; }
+.v4 .m-h { font-size: 28px; margin-top: 28px; }
+.v4 .req { border-radius: 2px; }
+.v4 .rationale { font: italic 400 17px/1.45 var(--display); border-left-color: var(--accent); }

static/js/core.js

@@ -15,12 +15,14 @@
 
   const SCRIPT = document.currentScript.src;
   const ROOT = new URL("../../", SCRIPT).href;          // site root, wherever the version page lives
-  const HF = "https://huggingface.co/datasets/WenyiWU0111/evogame-page-media/resolve/main";
+  // Clips, posters and the playable builds are not in this repo; by default they stream from the
+  // published site. `?media=local` uses ./media instead (a copy or a symlink of the media folder),
+  // and a deployed copy can pin its own location with window.EVO_MEDIA.
+  const REMOTE = "https://wenyiwu0111-evogame-page.static.hf.space/media";
   const qs = new URLSearchParams(location.search);
-  const isLocal = /^(localhost|127\.0\.0\.1|0\.0\.0\.0|)$/.test(location.hostname) || location.protocol === "file:";
-  // a page can pin the media location (e.g. a self-contained bundle ships its clips next to the page)
+  const published = /(^|\.)static\.hf\.space$/.test(location.hostname) || location.hostname === "huggingface.co";
   const MEDIA = window.EVO_MEDIA ? new URL(window.EVO_MEDIA, ROOT).href.replace(/\/$/, "")
-    : qs.get("media") === "hf" ? HF : qs.get("media") === "local" || isLocal ? `${ROOT}media` : HF;
+    : qs.get("media") === "local" || published ? `${ROOT}media` : REMOTE;
 
   const MAX_PLAYING = 12;
   const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -780,7 +782,7 @@
 
   // ---------- chrome ----------
   function versionSwitcher() {
-    if (window.EVO_NO_SWITCH) return;
+    if (window.EVO_NO_SWITCH || published) return;
     const here = location.pathname.match(/\/(v\d)\/?(index\.html)?$/)?.[1] || "v1";
     document.body.append(h("nav", { class: "vswitch", "aria-label": "Design versions" },
       VERSIONS.map(([name, path]) => h("a", { href: `${ROOT}${path}${location.search}`, class: name === here ? "on" : "" }, name))));