/* RSIGame page core — shared by every design version.
 *
 * A version page loads this, then calls Evo.boot(init). init(ctx) receives { games, compare, arms }
 * and mounts whatever sections that version has, using the building blocks below:
 *   Evo.mountGallery(root, opts)   filters + grid + load-more       (opts.card(g) to restyle cards)
 *   Evo.mountCompare(root, list)   before/after pairs
 *   Evo.mountHeroVideo(videoEl)    looping hero mosaic
 *   Evo.renderStrip/renderCats/renderTable(el, arms)   charts, colored by CSS vars --godot / --phaser
 *   Evo.videoFrame(mediaPath) + Evo.observe(el)        a poster+clip that only plays while on screen
 *   Evo.openModal(game, list)      the shared game detail dialog (markup injected here, styled per version)
 * Data comes from static/data (in repo); video/images from MEDIA (Hugging Face, or ./media on localhost).
 */
(() => {
  "use strict";

  const SCRIPT = document.currentScript.src;
  const ROOT = new URL("../../", SCRIPT).href;          // site root, wherever the version page lives
  // 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://rsigame-rsigame-page.static.hf.space/media";
  const qs = new URLSearchParams(location.search);
  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") === "local" || published ? `${ROOT}media` : REMOTE;

  const MAX_PLAYING = 12;
  const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const CATS = [["M", "Core Mechanics"], ["D", "Content Depth"], ["V", "Functional Visuals"], ["A", "Presentation & Art"]];
  const SHORT = { M: "Mechanics", D: "Depth", V: "Visuals", A: "Art" };
  const ENGINE_CLASS = { "Godot 4": "godot", Phaser: "phaser" };
  const MODEL_CLASS = { "GPT-5.5": "gpt", "Qwen3.8-27B": "qwen" };
  const GENRE_NAMES = { visualnovel: "Visual novel", openworld: "Open world", cardgame: "Card game" };
  const VERSIONS = [["v1", ""], ["v2", "v2/"], ["v3", "v3/"], ["v4", "v4/"]];

  const $ = (s, el = document) => el.querySelector(s);
  const h = (tag, attrs = {}, ...kids) => {
    const el = document.createElement(tag);
    for (const [k, v] of Object.entries(attrs)) {
      if (v == null || v === false) continue;
      if (k === "class") el.className = v;
      else if (k === "html") el.innerHTML = v;
      else if (k.startsWith("on")) el.addEventListener(k.slice(2), v);
      else el.setAttribute(k, v === true ? "" : v);
    }
    for (const kid of kids.flat()) if (kid != null) el.append(kid);
    return el;
  };
  const media = (p) => `${MEDIA}/${p}`;
  const data = (p) => `${ROOT}static/data/${p}`;
  const s100 = (x) => (x * 100).toFixed(1);
  const i100 = (x) => String(Math.round(x * 100));
  const genreName = (g) => GENRE_NAMES[g] || g[0].toUpperCase() + g.slice(1);
  const demoName = (id) => id.replace(/^\d+[_-]?/, "").replace(/[_-]+/g, " ").replace(/^./, (c) => c.toUpperCase());
  const demoNum = (id) => String(parseInt(id, 10) || "");
  const reqClass = (x) => (x >= 0.75 ? "s-hi" : x >= 0.4 ? "s-mid" : "s-lo");
  const key = (g) => `${g.arm}/${g.task}`;
  const esc = (t) => String(t).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
  const mean = (xs) => xs.reduce((a, b) => a + b, 0) / xs.length;
  const median = (xs) => { const t = [...xs].sort((a, b) => a - b), m = t.length >> 1; return t.length % 2 ? t[m] : (t[m - 1] + t[m]) / 2; };

  let GAMES = [];
  const byKey = new Map();

  // ---------- video manager: only what's on screen plays, never more than MAX_PLAYING videos ----------
  const playing = new Set();
  function play(video) {
    playing.delete(video);
    playing.add(video);
    if (!video.getAttribute("src")) video.src = video.dataset.src;
    video.play().catch(() => {});
    while (playing.size > MAX_PLAYING) {
      const oldest = playing.values().next().value;
      oldest.pause();
      playing.delete(oldest);
      if (oldest._pair) { oldest._pair.pause(); playing.delete(oldest._pair); }
    }
  }
  function pause(video) { video.pause(); playing.delete(video); }
  function pauseAll() { [...playing].forEach(pause); }
  const playAll = (el) => el.querySelectorAll("video").forEach(play);
  const pauseIn = (el) => el.querySelectorAll("video").forEach(pause);

  // a before/after pair replays the same inputs: keep the "after" clip locked to the "before" clock
  setInterval(() => {
    for (const v of playing) {
      const o = v._follower;
      if (o && !v.paused && v.readyState > 2 && o.readyState > 2 && Math.abs(v.currentTime - o.currentTime) > 0.2) o.currentTime = v.currentTime;
    }
  }, 500);

  const visibility = new IntersectionObserver((entries) => {
    for (const e of entries) {
      if (e.isIntersecting && !reduceMotion && modalHidden()) playAll(e.target);
      else pauseIn(e.target);
    }
  }, { threshold: 0.55 });
  const observe = (el) => { visibility.observe(el); };
  const unobserve = (el) => { visibility.unobserve(el); };

  function clipVideo(src) {
    const v = h("video", { muted: true, loop: true, playsinline: true, preload: "none", "data-src": media(src) });
    v.muted = true;
    v.addEventListener("playing", () => v.classList.add("ready"));
    return v;
  }

  function videoFrame(mediaPath, { alt = "", eager = false, cls = "frame", clip = "highlight" } = {}) {
    const frame = h("div", { class: cls });
    if (!mediaPath) {
      frame.append(h("div", { class: "no-media" }, "no replay — build failed"));
      return frame;
    }
    frame.append(h("img", { src: media(`${mediaPath}/poster.webp`), alt, loading: eager ? "eager" : "lazy", decoding: "async" }));
    frame.append(clipVideo(clip === "highlight" ? `${mediaPath}/highlight.mp4` : `${mediaPath}/demos/${clip}.mp4`));
    return frame;
  }

  /**
   * Before/after wipe: the two replays of the same demo stacked, the "after" one revealed right of a divider.
   * The divider sweeps on its own; pointer/drag takes over, and it resumes sweeping after the pointer leaves.
   * pairPath holds p0.mp4/p0.webp and final.mp4/final.webp.
   */
  function wipeFrame(pairPath, { alt = "", eager = false, cls = "frame wipe", before = "Round 0", after = "Final", auto = true } = {}) {
    const frame = h("div", { class: `${cls}${auto && !reduceMotion ? " auto" : ""}`, style: "--pos:50%" });
    const b = clipVideo(`${pairPath}/p0.mp4`), a = clipVideo(`${pairPath}/final.mp4`);
    b._follower = a;
    a._pair = b; b._pair = a;
    frame.append(
      h("img", { class: "w-img", src: media(`${pairPath}/p0.webp`), alt: `${alt} — ${before}`, loading: eager ? "eager" : "lazy", decoding: "async" }),
      b,
      h("div", { class: "w-after" },
        h("img", { class: "w-img", src: media(`${pairPath}/final.webp`), alt: `${alt} — ${after}`, loading: eager ? "eager" : "lazy", decoding: "async" }),
        a),
      h("span", { class: "w-label w-l" }, before),
      h("span", { class: "w-label w-r" }, after),
      h("div", { class: "w-handle", "aria-hidden": "true" }, h("i")));
    let resume;
    const setPos = (e) => {
      const r = frame.getBoundingClientRect();
      frame.style.setProperty("--pos", `${Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100))}%`);
    };
    frame.addEventListener("pointermove", (e) => {
      if (e.pointerType === "touch" && !frame.dragging) return;
      clearTimeout(resume);
      frame.classList.remove("auto");
      setPos(e);
    });
    frame.addEventListener("pointerdown", (e) => { if (e.pointerType === "touch") { frame.dragging = true; frame.classList.remove("auto"); setPos(e); } });
    const release = () => {
      frame.dragging = false;
      if (auto && !reduceMotion) resume = setTimeout(() => frame.classList.add("auto"), 1800);
    };
    frame.addEventListener("pointerup", release);
    frame.addEventListener("pointerleave", release);
    return frame;
  }

  /** Hover-to-play for an element holding a frame; also plays while on screen. */
  function wirePlayback(el) {
    if (!el.querySelector("video")) return;
    el.addEventListener("mouseenter", () => modalHidden() && playAll(el));
    if (reduceMotion) el.addEventListener("mouseleave", () => pauseIn(el));
    observe(el);
  }

  function mountHeroVideo(video, { src = "hero_mosaic.mp4", poster = "hero_mosaic.webp" } = {}) {
    video.poster = media(poster);
    if (reduceMotion) return;
    video.muted = true;
    video.src = media(src);
    new IntersectionObserver(([e]) => (e.isIntersecting && modalHidden() ? video.play().catch(() => {}) : video.pause())).observe(video);
  }

  // ---------- gallery ----------
  function defaultCard(g) {
    const frame = videoFrame(g.media, { alt: `${g.title} (${g.engine})` });
    frame.append(
      h("span", { class: "badge" }, h("i", { class: `dot ${ENGINE_CLASS[g.engine]}` }), g.engine),
      h("span", { class: "score-chip" }, s100(g.reward)));
    return h("button", { class: "card", "aria-label": `${g.title}, ${g.engine}, score ${s100(g.reward)}` },
      frame,
      h("div", { class: "card-body" },
        h("div", { class: "card-genre" }, `${genreName(g.genre)} · ${g.model}`),
        h("h3", {}, g.title),
        mdva(g)));
  }
  function mdva(g) {
    return h("div", { class: "mdva" }, CATS.map(([k, name]) =>
      h("div", { title: `${name}: ${s100(g[k])}` },
        h("span", {}, k, h("b", {}, i100(g[k]))),
        h("div", { class: "meter" }, h("i", { style: `width:${g[k] * 100}%` })))));
  }

  /**
   * Filters + grid + load more. opts:
   *   card(g) -> element (clicking it opens the modal; any <video> inside plays on screen/hover)
   *   pageSize, gridClass, placeholder, items(games) -> units to render (e.g. pair games by task)
   *   segment {key, label, options:[[value, text]]} -> the segmented filter (default: engine)
   *   sorts [[value, label, cmp]] -> sort options (first is the default)
   */
  function mountGallery(root, opts = {}) {
    const pageSize = opts.pageSize || 24;
    const makeCard = opts.card || defaultCard;
    const segment = opts.segment || { key: "engine", label: "Engine", options: [["", "All"], ["Godot 4", "Godot"], ["Phaser", "Phaser"]] };
    const sorts = opts.sorts || [
      ["score-desc", "Score: high → low", (a, b) => b.reward - a.reward],
      ["score-asc", "Score: low → high", (a, b) => a.reward - b.reward],
      ["title", "Title A → Z", (a, b) => a.title.localeCompare(b.title) || a.engine.localeCompare(b.engine)],
    ];
    const state = { seg: "", genre: "", sort: sorts[0][0], q: "", shown: pageSize };
    let filtered = [];

    const seg = h("div", { class: "seg", role: "group", "aria-label": segment.label },
      segment.options.map(([v, t], i) => h("button", { class: i ? "" : "on", "data-v": v }, t)));
    const genre = h("select", { "aria-label": "Genre" }, h("option", { value: "" }, "All genres"),
      [...new Set(GAMES.map((g) => g.genre))].sort().map((g) => h("option", { value: g }, genreName(g))));
    const sort = h("select", { "aria-label": "Sort" }, sorts.map(([v, t]) => h("option", { value: v }, t)));
    const q = h("input", { type: "search", placeholder: opts.placeholder || "Search games…", "aria-label": "Search" });
    const count = h("span", { class: "count" });
    const grid = h("div", { class: opts.gridClass || "grid" });
    const more = h("div", { class: "more" }, h("button", { class: "btn" }, "Load more"));
    root.replaceChildren(h("div", { class: "filters", role: "toolbar", "aria-label": "Gallery filters" }, seg, genre, sort, q, count), grid, more);

    function apply() {
      const needle = state.q.trim().toLowerCase();
      const gamesOk = (g) => (!state.seg || g[segment.key] === state.seg) && (!state.genre || g.genre === state.genre) &&
        (!needle || `${g.title} ${g.task} ${g.blurb}`.toLowerCase().includes(needle));
      if (opts.items) {
        filtered = opts.items(GAMES.filter(gamesOk), state);
      } else {
        filtered = GAMES.filter(gamesOk);
        filtered.sort(sorts.find(([v]) => v === state.sort)[2]);
      }
    }
    const modalList = () => (opts.items ? filtered.flatMap((u) => u.games) : filtered);
    function add(units) {
      for (const u of units) {
        const el = makeCard(u, modalList);
        if (!opts.items) el.addEventListener("click", () => openModal(u, modalList()));
        el.querySelectorAll("[data-play]").forEach(wirePlayback);
        if (!el.querySelector("[data-play]")) wirePlayback(el);
        grid.append(el);
      }
      const shown = Math.min(state.shown, filtered.length);
      count.textContent = `${shown} of ${filtered.length} ${opts.unitName || "games"}`;
      more.hidden = state.shown >= filtered.length;
    }
    function render() {
      grid.querySelectorAll("*").forEach(unobserve);
      pauseAll();
      grid.replaceChildren();
      if (!filtered.length) grid.append(h("p", { class: "empty" }, "No games match these filters."));
      add(filtered.slice(0, state.shown));
    }
    const refresh = () => { state.shown = pageSize; apply(); render(); };
    seg.addEventListener("click", (e) => {
      const b = e.target.closest("button");
      if (!b) return;
      seg.querySelectorAll("button").forEach((x) => x.classList.toggle("on", x === b));
      state.seg = b.dataset.v;
      refresh();
    });
    genre.addEventListener("change", () => { state.genre = genre.value; refresh(); });
    sort.addEventListener("change", () => { state.sort = sort.value; refresh(); });
    let t;
    q.addEventListener("input", () => { clearTimeout(t); t = setTimeout(() => { state.q = q.value; refresh(); }, 150); });
    more.firstChild.addEventListener("click", () => {
      const start = state.shown;
      state.shown += pageSize;
      add(filtered.slice(start, state.shown));
    });
    refresh();
    return { setSegment: (v) => seg.querySelector(`[data-v="${v}"]`)?.click() };
  }

  // ---------- before / after ----------
  function mountCompare(root, list, { before = "Initial generation", after = "After RSIGame" } = {}) {
    for (const { arm, task } of list) {
      const g = byKey.get(`${arm}/${task}`);
      if (!g) continue;
      const r = g.repaired;
      const side = (label, score, frame, cls) => h("div", { class: "compare-side" },
        h("div", { class: "compare-label" }, h("span", { class: cls }, label), score != null ? h("b", {}, s100(score)) : null),
        frame);
      const pending = h("div", { class: "frame pending" }, h("div", {}, h("b", {}, "Repaired build"), "coming soon"));
      const box = h("article", { class: "compare" },
        h("div", { class: "compare-head" },
          h("button", { onclick: () => openModal(g, GAMES) }, h("h3", {}, g.title)),
          h("span", { class: "pill" }, h("i", { class: `dot ${ENGINE_CLASS[g.engine]}` }), `${g.engine} · ${g.model}`)),
        h("div", { class: "compare-pair" },
          side(before, g.reward, videoFrame(g.media, { alt: `${g.title}, initial` }), "before"),
          r ? side(after, r.reward, videoFrame(r.media, { alt: `${g.title}, after RSIGame` }), "after")
            : side(after, null, pending, "after")));
      box.querySelectorAll(".frame").forEach((f) => f.querySelector("video") && observe(f));
      root.append(box);
    }
  }

  // ---------- modal ----------
  const MODAL_HTML = `
<div class="modal" id="modal" hidden role="dialog" aria-modal="true" aria-labelledby="m-title">
  <div class="modal-backdrop" data-close></div>
  <div class="modal-panel">
    <button class="modal-close" data-close aria-label="Close">✕</button>
    <div class="modal-media">
      <div class="player" id="m-player"><video id="m-video" controls muted playsinline></video></div>
      <div class="pair-ctl" id="m-pairctl" hidden></div>
      <div class="demo-tabs" id="m-tabs"></div>
      <div class="m-evo" id="m-evo" hidden></div>
      <div class="m-prompt"><h3>Task prompt</h3><p id="m-vision"></p></div>
      <div class="modal-nav">
        <button class="btn btn-sm" id="m-prev">← Prev</button><span id="m-pos"></span><button class="btn btn-sm" id="m-next">Next →</button>
      </div>
    </div>
    <div class="modal-info">
      <div class="m-meta" id="m-meta"></div>
      <h2 id="m-title"></h2>
      <p class="m-blurb" id="m-blurb"></p>
      <div class="m-score" id="m-score"></div>
      <div id="m-twin"></div>
      <h3 class="m-h">Judge breakdown</h3>
      <p class="m-hint" id="m-reqhint"></p>
      <div id="m-reqs"></div>
    </div>
  </div>
</div>
<div class="tip" id="tip" hidden></div>`;
  let modal, mVideo;
  const modalHidden = () => !modal || modal.hidden;
  const detailCache = new Map();
  let cur = null, curList = [], curDemo = null, curDetails = null, lastFocus = null;

  function initModal() {
    document.body.insertAdjacentHTML("beforeend", MODAL_HTML);
    modal = $("#modal");
    mVideo = $("#m-video");
    modal.addEventListener("click", (e) => { if (e.target.closest("[data-close]")) closeModal(); });
    $("#m-tabs").addEventListener("click", (e) => { const b = e.target.closest("button"); if (b) selectDemo(b.dataset.demo); });
    $("#m-prev").addEventListener("click", () => step(-1));
    $("#m-next").addEventListener("click", () => step(1));
    document.addEventListener("keydown", (e) => {
      if (modal.hidden) return;
      if (e.key === "Escape") closeModal();
      else if (e.key === "ArrowLeft" && !e.target.closest("video")) step(-1);
      else if (e.key === "ArrowRight" && !e.target.closest("video")) step(1);
    });
  }

  function loadDetails(g) {
    const k = key(g);
    const path = g.pair ? `evo/${k}.json` : `details/${k}.json`;
    if (!detailCache.has(k) && window.EVO_DETAILS) detailCache.set(k, Promise.resolve(window.EVO_DETAILS[k] || null));
    if (!detailCache.has(k)) detailCache.set(k, fetch(data(path)).then((r) => (r.ok ? r.json() : null)).catch(() => null));
    return detailCache.get(k);
  }

  function openModal(g, list) {
    if (modal.hidden) {
      lastFocus = document.activeElement;
      pauseAll();
      document.querySelectorAll("video").forEach((v) => v !== mVideo && v.pause());
      modal.hidden = false;
      document.body.style.overflow = "hidden";
    }
    cur = g;
    curList = list && list.includes(g) ? list : GAMES;
    if (g.pair) return openPairModal(g);
    modal.classList.remove("simple");
    stopPair();
    $("#m-player").replaceChildren(mVideo);
    $("#m-pairctl").hidden = true;
    $("#m-evo").hidden = true;
    $("#m-reqhint").textContent = "Scores for the selected demo; an item's score is its best demo. Click a requirement for the judge's reasoning.";
    setHash(`#game=${key(g)}`);
    $("#m-pos").textContent = `${curList.indexOf(g) + 1} / ${curList.length}`;
    $("#m-meta").replaceChildren(
      h("span", { class: "pill" }, h("i", { class: `dot ${ENGINE_CLASS[g.engine]}` }), g.engine),
      h("span", { class: "pill" }, g.harness ? `${g.model} · ${g.harness}` : g.model),
      h("span", { class: "pill" }, genreName(g.genre)));
    $("#m-title").textContent = g.title;
    $("#m-blurb").textContent = g.blurb;
    $("#m-vision").textContent = g.vision || "—";
    $("#m-score").replaceChildren(
      h("div", { class: "m-overall" }, h("b", {}, s100(g.reward)), h("span", {}, "Overall")),
      h("div", { class: "m-cats" }, CATS.map(([k, name]) => h("div", { class: "m-cat" },
        h("span", {}, name), h("div", { class: "meter" }, h("i", { style: `width:${g[k] * 100}%` })), h("b", {}, s100(g[k]))))));
    const twin = GAMES.find((x) => x.task === g.task && x.arm !== g.arm);
    $("#m-twin").replaceChildren(twin
      ? h("button", { class: "twin", onclick: () => openModal(twin, curList.includes(twin) ? curList : GAMES) },
          h("span", {}, "Same task built in ", h("i", { class: `dot ${ENGINE_CLASS[twin.engine]}` }), ` ${twin.engine}`),
          h("span", {}, h("b", {}, s100(twin.reward)), " →"))
      : "");
    const tabs = $("#m-tabs");
    tabs.replaceChildren();
    if (g.media) {
      tabs.append(h("button", { "data-demo": "" }, "Highlight"));
      g.demos.forEach((d) => tabs.append(h("button", { "data-demo": d.id, title: d.id },
        `${demoNum(d.id)}. ${demoName(d.id)}`, h("small", {}, `${Math.round(d.dur)}s`))));
    }
    $("#m-reqs").replaceChildren(h("p", { class: "m-hint" }, "Loading…"));
    curDetails = null;
    selectDemo(g.demos.length ? g.demos[0].id : null);
    loadDetails(g).then((d) => { if (cur === g) { curDetails = d; renderReqs(); } });
    $(".modal-close").focus({ preventScroll: true });
    $(".modal-info").scrollTop = 0;
  }

  function selectDemo(id) {
    curDemo = id || null;
    $("#m-tabs").querySelectorAll("button").forEach((b) => b.classList.toggle("on", (b.dataset.demo || null) === curDemo));
    if (!cur.media) {
      mVideo.removeAttribute("src");
      mVideo.removeAttribute("poster");
      mVideo.load();
    } else {
      mVideo.poster = media(`${cur.media}/poster.webp`);
      mVideo.src = media(curDemo ? `${cur.media}/demos/${curDemo}.mp4` : `${cur.media}/highlight.mp4`);
      mVideo.loop = !curDemo;
      mVideo.play().catch(() => {});
    }
    if (curDetails) renderReqs();
  }

  function renderReqs() {
    const root = $("#m-reqs");
    const open = new Set([...root.querySelectorAll(".req.open")].map((r) => r.dataset.id));
    root.replaceChildren();
    if (!curDetails || !curDetails.requirements.length) {
      root.append(h("p", { class: "m-hint" }, cur.build ? "No judge breakdown available." : "The build failed, so no demo could be judged (Overall = 0)."));
      return;
    }
    if (cur.pair) return renderPairReqs(root, open);
    let lastCat = "";
    for (const r of curDetails.requirements) {
      if (r.cat !== lastCat) { root.append(h("div", { class: "req-cat" }, r.cat)); lastCat = r.cat; }
      const shown = curDemo && r.per_demo[curDemo] != null ? r.per_demo[curDemo] : r.score;
      const bestDemo = Object.entries(r.per_demo).sort((a, b) => b[1] - a[1])[0]?.[0];
      const ratDemo = curDemo && r.rationale[curDemo] != null ? curDemo : bestDemo;
      const isOpen = open.has(r.id);
      const body = h("div", { class: "req-body", hidden: !isOpen },
        h("div", { class: "req-demos" }, Object.entries(r.per_demo).map(([d, sc]) =>
          h("button", { class: d === curDemo ? "on" : "", title: demoName(d), onclick: (e) => { e.stopPropagation(); selectDemo(d); } },
            `#${demoNum(d)} `, h("span", { class: reqClass(sc) }, i100(sc))))),
        r.rationale[ratDemo]
          ? h("p", { class: "rationale" }, r.rationale[ratDemo],
              ratDemo !== curDemo ? h("span", { class: "m-hint" }, ` (demo #${demoNum(ratDemo)})`) : null)
          : null);
      const item = h("div", { class: `req${isOpen ? " open" : ""}`, "data-id": r.id },
        h("button", { "aria-expanded": String(isOpen) },
          h("span", { class: "req-id" }, r.id),
          h("span", { class: "req-desc" }, r.description),
          h("span", { class: `req-score ${reqClass(shown)}` }, i100(shown))),
        body);
      item.firstChild.addEventListener("click", () => {
        const o = item.classList.toggle("open");
        body.hidden = !o;
        item.firstChild.setAttribute("aria-expanded", String(o));
      });
      root.append(item);
    }
  }

  // ---------- before/after modal ----------
  let pairView = null, pairMode = "wipe", curRound = null;
  let SIMPLE = false;  // boot({simple:true}): the game dialog shows the replay and scores only
  const signed = (x) => `${x >= 0 ? "+" : "−"}${Math.abs(x * 100).toFixed(1)}`;
  const deltaClass = (x) => (x > 0.005 ? "up" : x < -0.005 ? "down" : "flat");

  function sideBySide(pairPath, alt) {
    const side = (name, label, cls) => h("div", { class: "frame" },
      h("img", { class: "w-img", src: media(`${pairPath}/${name}.webp`), alt: `${alt} — ${label}` }),
      clipVideo(`${pairPath}/${name}.mp4`),
      h("span", { class: `w-label ${cls}` }, label));
    const el = h("div", { class: "sbs" }, side("p0", "Round 0", "w-l"), side("final", "Round 30", "w-r"));
    const [b, a] = el.querySelectorAll("video");
    b._follower = a; a._pair = b; b._pair = a;
    return el;
  }
  function stopPair() {
    if (!pairView) return;
    pairView.querySelectorAll("video").forEach((v) => { pause(v); v.removeAttribute("src"); v.load(); });
    pairView = null;
  }
  function mountPairPlayer(g) {
    stopPair();
    pairView = pairMode === "wipe"
      ? wipeFrame(g.pair, { alt: g.title, eager: true, cls: "wipe m-wipe", after: "Round 30" })
      : sideBySide(g.pair, g.title);
    $("#m-player").replaceChildren(pairView);
    $("#m-player").classList.toggle("is-sbs", pairMode !== "wipe");
    pairView.querySelectorAll("video").forEach(play);
    const ctl = $("#m-pairctl");
    const toggle = h("button", { class: "btn btn-sm", "aria-label": "Play or pause" }, "❚❚ Pause");
    toggle.addEventListener("click", () => {
      const vs = [...pairView.querySelectorAll("video")];
      const paused = vs[0].paused;
      vs.forEach((v) => (paused ? play(v) : pause(v)));
      toggle.textContent = paused ? "❚❚ Pause" : "▶ Play";
    });
    const restart = h("button", { class: "btn btn-sm" }, "↺ Restart");
    restart.addEventListener("click", () => pairView.querySelectorAll("video").forEach((v) => { v.currentTime = 0; play(v); }));
    const modes = h("div", { class: "seg seg-sm" },
      [["wipe", "Wipe"], ["sbs", "Side by side"]].map(([v, t]) => h("button", {
        class: pairMode === v ? "on" : "", onclick: () => { if (pairMode !== v) { pairMode = v; mountPairPlayer(cur); } },
      }, t)));
    ctl.replaceChildren(modes, toggle, restart,
      h("span", { class: "pair-demo" }, SIMPLE ? "Same inputs replayed on both builds" : `Demo ${demoNum(g.demo)} · ${demoName(g.demo)} · ${Math.round(g.dur)}s — same inputs on both builds`));
    ctl.hidden = false;
  }

  function openPairModal(g) {
    const r = g.repaired;
    mVideo.pause();
    mVideo.removeAttribute("src");
    setHash(`#game=${key(g)}`);
    $("#m-pos").textContent = `${curList.indexOf(g) + 1} / ${curList.length}`;
    $("#m-meta").replaceChildren(
      h("span", { class: "pill" }, h("i", { class: `dot ${MODEL_CLASS[g.model] || ""}` }), g.harness ? `${g.model} · ${g.harness}` : g.model),
      h("span", { class: "pill" }, g.engine),
      h("span", { class: "pill" }, genreName(g.genre)),
      h("span", { class: "pill" }, `${r.round} RSIGame rounds`));
    $("#m-title").textContent = g.title;
    $("#m-blurb").textContent = g.blurb;
    $("#m-vision").textContent = g.vision || "—";
    const d = r.reward - g.reward;
    $("#m-score").replaceChildren(
      h("div", { class: "m-overall m-pairscore" },
        h("div", {}, h("span", {}, "Round 0"), h("b", { class: "was" }, s100(g.reward))),
        h("i", { class: "arrow" }, "→"),
        h("div", {}, h("span", {}, `Round ${r.round}`), h("b", {}, s100(r.reward))),
        h("em", { class: `delta ${deltaClass(d)}` }, signed(d))),
      h("div", { class: "m-cats" }, CATS.map(([k, name]) => h("div", { class: "m-cat" },
        h("span", {}, name),
        h("div", { class: "meter meter-pair" }, h("i", { class: "m-final", style: `width:${r[k] * 100}%` }), h("i", { class: "m-p0", style: `left:${g[k] * 100}%` })),
        h("b", {}, `${i100(g[k])}→${i100(r[k])}`)))));
    const twin = GAMES.find((x) => x.task === g.task && x.arm !== g.arm);
    $("#m-twin").replaceChildren(twin
      ? h("button", { class: "twin", onclick: () => openModal(twin, curList.includes(twin) ? curList : GAMES) },
          h("span", {}, "Same task, generated by ", h("i", { class: `dot ${MODEL_CLASS[twin.model] || ""}` }), ` ${twin.model}`),
          h("span", {}, h("b", {}, `${s100(twin.reward)} → ${s100(twin.repaired.reward)}`), " →"))
      : "");
    $("#m-tabs").replaceChildren();
    modal.classList.toggle("simple", SIMPLE);
    if (SIMPLE) {
      $("#m-evo").hidden = true;
      $("#m-reqs").replaceChildren();
      mountPairPlayer(g);
      $(".modal-close").focus({ preventScroll: true });
      $(".modal-panel").scrollTop = 0;
      return;
    }
    $("#m-reqhint").textContent = "Item scores are the best over all demos, round 0 → round 30. Open an item to compare the judge's reasoning on the demo shown.";
    $("#m-reqs").replaceChildren(h("p", { class: "m-hint" }, "Loading…"));
    const evo = $("#m-evo");
    evo.hidden = false;
    evo.replaceChildren(h("p", { class: "m-hint" }, "Loading the 30 rounds…"));
    curDetails = null;
    mountPairPlayer(g);
    loadDetails(g).then((det) => {
      if (cur !== g) return;
      curDetails = det;
      renderReqs();
      renderEvo(g, det);
    });
    $(".modal-close").focus({ preventScroll: true });
    $(".modal-info").scrollTop = 0;
    $(".modal-media").scrollTop = 0;
  }

  function renderPairReqs(root, open) {
    let lastCat = "";
    for (const r of curDetails.requirements) {
      if (r.cat !== lastCat) { root.append(h("div", { class: "req-cat" }, r.cat)); lastCat = r.cat; }
      const isOpen = open.has(r.id);
      const dd = (r.final ?? 0) - (r.p0 ?? 0);
      const body = h("div", { class: "req-body", hidden: !isOpen },
        h("p", { class: "rationale was" }, h("b", {}, `Round 0 · ${r.p0_demo != null ? i100(r.p0_demo) : "—"}  `), r.why_p0 || "No rationale on this demo."),
        h("p", { class: "rationale" }, h("b", {}, `Round 30 · ${r.final_demo != null ? i100(r.final_demo) : "—"}  `), r.why_final || "No rationale on this demo."));
      const item = h("div", { class: `req${isOpen ? " open" : ""}`, "data-id": r.id },
        h("button", { "aria-expanded": String(isOpen) },
          h("span", { class: "req-id" }, r.id),
          h("span", { class: "req-desc" }, r.description),
          h("span", { class: `req-score req-pair ${deltaClass(dd)}` }, r.p0 != null ? `${i100(r.p0)}→${i100(r.final)}` : i100(r.final))),
        body);
      item.firstChild.addEventListener("click", () => {
        const o = item.classList.toggle("open");
        body.hidden = !o;
        item.firstChild.setAttribute("aria-expanded", String(o));
      });
      root.append(item);
    }
  }

  const VERDICT = { fixed: ["✓", "fixed", "s-hi"], fixed_incidentally: ["✓", "fixed", "s-hi"], failed: ["✗", "not fixed", "s-lo"] };
  function renderEvo(g, det) {
    const evo = $("#m-evo");
    const rounds = det?.rounds || [];
    if (!rounds.length) { evo.hidden = true; return; }
    const W = 640, L = 34, R = 12, T = 12, CH = 110, STRIP = 26, H = T + CH + 8 + STRIP + 18;
    const x = (r) => L + (r / g.repaired.round) * (W - L - R);
    const ys = g.curve.map((c) => c[1]);
    const lo = Math.max(0, Math.floor((Math.min(...ys) - 0.05) * 10) / 10), hi = Math.min(1, Math.ceil((Math.max(...ys) + 0.05) * 10) / 10);
    const y = (v) => T + CH - ((v - lo) / (hi - lo || 1)) * CH;
    const svg = s("svg", { viewBox: `0 0 ${W} ${H}`, class: "evo-chart", role: "img", "aria-label": "Score at each scored round and what every round did" });
    const step = hi - lo > 0.5 ? 0.2 : 0.1;
    for (let t = Math.ceil(lo / step - 1e-9) * step; t <= hi + 1e-9; t += step) {
      svg.append(s("line", { class: "grid-line", x1: L, x2: W - R, y1: y(t), y2: y(t) }),
        s("text", { class: "val-label", x: L - 6, y: y(t) + 4, "text-anchor": "end" }, String(Math.round(t * 100))));
    }
    svg.append(s("path", { class: "evo-line", d: g.curve.map((c, i) => `${i ? "L" : "M"}${x(c[0])},${y(c[1])}`).join("") }));
    g.curve.forEach(([r, v]) => {
      const dot = s("circle", { class: "evo-dot", cx: x(r), cy: y(v), r: 3.5 });
      const hit = s("circle", { class: "hit", cx: x(r), cy: y(v), r: 9, fill: "transparent" });
      hit.addEventListener("mousemove", (e) => showTip(e, `Round ${r}<br><b>${s100(v)}</b>`));
      hit.addEventListener("mouseleave", hideTip);
      svg.append(dot, hit);
    });
    const sy = T + CH + 8, cw = (W - L - R) / g.repaired.round;
    const detail = h("div", { class: "evo-detail" });
    const cells = [];
    rounds.forEach((rd) => {
      const v = VERDICT[rd.verdict];
      const cell = s("g", { class: `evo-cell ${rd.kind}`, tabindex: 0, role: "button", "aria-label": `Round ${rd.r}` });
      cell.append(s("rect", { x: x(rd.r) - cw + 1.5, y: sy, width: cw - 3, height: STRIP, rx: 3 }));
      if (v) cell.append(s("text", { class: `evo-mark ${v[2]}`, x: x(rd.r) - cw / 2, y: sy + STRIP / 2 + 4, "text-anchor": "middle" }, v[0]));
      const pick = () => { curRound = rd.r; cells.forEach((c) => c.classList.toggle("on", c === cell)); showRound(detail, rd); };
      cell.addEventListener("click", pick);
      cell.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); pick(); } });
      cell.addEventListener("mousemove", (e) => showTip(e, `Round ${rd.r} · ${rd.kind === "art" ? "art" : "repair"}${v ? ` · ${v[1]}` : ""}`));
      cell.addEventListener("mouseleave", hideTip);
      cells.push(cell);
      svg.append(cell);
    });
    [1, 10, 20, 30].filter((r) => r <= g.repaired.round).forEach((r) =>
      svg.append(s("text", { class: "val-label", x: x(r) - cw / 2, y: H - 4, "text-anchor": "middle" }, `R${r}`)));
    const nFixed = rounds.filter((rd) => VERDICT[rd.verdict]?.[0] === "✓").length;
    const nArt = rounds.filter((rd) => rd.kind === "art").length;
    evo.replaceChildren(
      h("div", { class: "evo-head" },
        h("h3", {}, `${rounds.length} rounds of RSIGame`),
        h("span", { class: "evo-legend" },
          h("i", { class: "sw repair" }), `repair ${rounds.length - nArt}`, h("i", { class: "sw art" }), `art ${nArt}`,
          h("b", { class: "s-hi" }, "✓"), ` verified fixed ${nFixed}`)),
      h("div", { class: "evo-chart-wrap" }, svg), detail);
    const start = [...rounds].reverse().find((rd) => VERDICT[rd.verdict]?.[0] === "✓" && rd.note) || rounds[rounds.length - 1];
    const idx = rounds.indexOf(start);
    cells[idx].dispatchEvent(new Event("click"));
  }
  function showRound(el, rd) {
    const v = VERDICT[rd.verdict];
    el.replaceChildren(...[
      h("div", { class: "evo-detail-head" },
        h("b", {}, `Round ${rd.r}`), h("span", { class: `pill kind-${rd.kind}` }, rd.kind === "art" ? "Art round" : "Repair round"),
        v ? h("span", { class: `pill ${v[2]}` }, `${v[0]} verified ${v[1]}`) : rd.verdict ? h("span", { class: "pill" }, rd.verdict.replace(/_/g, " ")) : null,
        rd.files || rd.assets ? h("span", { class: "evo-meta" }, [rd.files ? `${rd.files} file${rd.files > 1 ? "s" : ""} edited` : "", rd.assets ? `${rd.assets} assets generated` : ""].filter(Boolean).join(" · ")) : null),
      rd.ask ? h("p", {}, h("span", { class: "evo-k" }, rd.kind === "art" ? "Goal" : "Question"), rd.ask) : null,
      rd.found ? h("p", {}, h("span", { class: "evo-k" }, "Found"), rd.found) : null,
      rd.note ? h("p", {}, h("span", { class: "evo-k" }, "Verified"), rd.note) : null].filter(Boolean));
  }

  function setHash(hash) {
    try { history.replaceState(null, "", hash || location.pathname + location.search); } catch { /* sandboxed frame */ }
  }
  function closeModal() {
    modal.hidden = true;
    stopPair();
    mVideo.pause();
    mVideo.removeAttribute("src");
    mVideo.load();
    document.body.style.overflow = "";
    setHash("");
    if (lastFocus) lastFocus.focus({ preventScroll: true });
  }
  function step(d) {
    const i = curList.indexOf(cur);
    openModal(curList[(i + d + curList.length) % curList.length], curList);
  }

  // ---------- charts ----------
  const SVG = "http://www.w3.org/2000/svg";
  const s = (tag, attrs = {}, ...kids) => {
    const el = document.createElementNS(SVG, tag);
    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
    kids.forEach((k) => el.append(typeof k === "string" ? document.createTextNode(k) : k));
    return el;
  };
  function showTip(e, html) {
    const tip = $("#tip");
    tip.innerHTML = html;
    tip.hidden = false;
    const r = tip.getBoundingClientRect();
    tip.style.left = `${Math.min(e.clientX + 14, innerWidth - r.width - 8)}px`;
    tip.style.top = `${Math.max(8, e.clientY - r.height - 12)}px`;
  }
  const hideTip = () => { $("#tip").hidden = true; };

  function arms() {
    const out = [];
    for (const g of GAMES) {
      let a = out.find((x) => x.arm === g.arm);
      if (!a) out.push((a = { arm: g.arm, engine: g.engine, model: g.model, harness: g.harness, games: [] }));
      a.games.push(g);
    }
    return out;
  }
  const legend = (el, A) => el.replaceChildren(...A.map((a) =>
    h("span", {}, h("i", { class: `dot ${ENGINE_CLASS[a.engine]}` }), `${a.engine} · ${a.model}`)));

  function renderStrip(el, A, { width = 720, row = 150 } = {}) {
    const W = width, L = 92, R = 16, ROW = row, T = 8, B = 28, H = T + ROW * A.length + B;
    const x = (v) => L + v * (W - L - R);
    const svg = s("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": "Overall score of every game, by engine" });
    const axis = s("g", { class: "axis" });
    for (let t = 0; t <= 1.0001; t += 0.2) {
      svg.append(s("line", { class: "grid-line", x1: x(t), x2: x(t), y1: T, y2: H - B }));
      axis.append(s("text", { x: x(t), y: H - 8, "text-anchor": "middle" }, String(Math.round(t * 100))));
    }
    svg.append(axis);
    A.forEach((a, ri) => {
      const cy = T + ROW * ri + ROW / 2;
      const m = mean(a.games.map((g) => g.reward));
      svg.append(s("text", { class: "row-label", x: 0, y: cy - 4 }, a.engine));
      svg.append(s("text", { class: "val-label", x: 0, y: cy + 12 }, `mean ${s100(m)}`));
      const placed = [], D = 7.5, color = `var(--${ENGINE_CLASS[a.engine]})`;
      const sorted = [...a.games].sort((p, q) => q.reward - p.reward);
      [...a.games].sort((p, q) => p.reward - q.reward).forEach((g) => {
        const px = x(g.reward);
        let dy = 0;
        for (let k = 0; k < 40; k++) {
          dy = (k % 2 ? 1 : -1) * Math.ceil(k / 2) * 6.5;
          if (!placed.some((p) => Math.hypot(p.x - px, p.y - dy) < D)) break;
        }
        dy = Math.max(-ROW / 2 + 6, Math.min(ROW / 2 - 6, dy));
        placed.push({ x: px, y: dy });
        const dot = s("circle", { class: "strip-dot", cx: px, cy: cy + dy, r: 3.5, fill: color });
        const hit = s("circle", { class: "hit", cx: px, cy: cy + dy, r: 8, fill: "transparent" });
        hit.addEventListener("mousemove", (e) => { dot.setAttribute("r", 6); showTip(e, `${esc(g.title)}<br><b>${s100(g.reward)}</b> · ${esc(g.engine)}`); });
        hit.addEventListener("mouseleave", () => { dot.setAttribute("r", 3.5); hideTip(); });
        hit.addEventListener("click", () => { hideTip(); openModal(g, sorted); });
        svg.append(dot, hit);
      });
      svg.append(s("line", { class: "mean-line", x1: x(m), x2: x(m), y1: cy - ROW / 2 + 4, y2: cy + ROW / 2 - 4 }));
    });
    el.replaceChildren(svg);
  }

  function renderCats(el, A, { width = 440 } = {}) {
    const W = width, L = 136, R = 44, BAR = 12, GAP = 2, GROUP = 22, T = 4;
    const H = T + CATS.length * (A.length * (BAR + GAP) + GROUP);
    const x = (v) => v * (W - L - R);
    const svg = s("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": "Mean rubric category score by engine" });
    CATS.forEach(([k, name], ci) => {
      const y0 = T + ci * (A.length * (BAR + GAP) + GROUP);
      svg.append(s("text", { class: "row-label", x: 0, y: y0 + (A.length * (BAR + GAP)) / 2 + 4 }, name));
      A.forEach((a, ai) => {
        const v = mean(a.games.map((g) => g[k]));
        const y = y0 + ai * (BAR + GAP), w = Math.max(4, x(v));
        const bar = s("path", { d: `M${L},${y}h${w - 4}a4,4 0 0 1 4,4v${BAR - 8}a4,4 0 0 1 -4,4h${-(w - 4)}z`, fill: `var(--${ENGINE_CLASS[a.engine]})` });
        const hit = s("rect", { class: "hit", x: L, y: y - 1, width: W - L, height: BAR + 2, fill: "transparent" });
        hit.addEventListener("mousemove", (e) => showTip(e, `${esc(name)} · ${esc(a.engine)}<br><b>${s100(v)}</b> mean over ${a.games.length} games`));
        hit.addEventListener("mouseleave", hideTip);
        svg.append(bar, s("text", { class: "val-label", x: L + w + 6, y: y + BAR - 2 }, s100(v)), hit);
      });
    });
    el.replaceChildren(svg);
  }

  function renderTable(el, A) {
    const head = ["Engine", "Generator", "Games", "Overall", "Median", "Build fails", ...CATS.map(([k]) => SHORT[k])];
    const rows = A.map((a) => {
      const r = a.games.map((g) => g.reward);
      return [a.engine, a.harness ? `${a.model} (${a.harness})` : a.model, a.games.length, s100(mean(r)), s100(median(r)),
        a.games.filter((g) => !g.build).length, ...CATS.map(([k]) => s100(mean(a.games.map((g) => g[k]))))];
    });
    el.replaceChildren(
      h("thead", {}, h("tr", {}, head.map((c) => h("th", { scope: "col" }, c)))),
      h("tbody", {}, rows.map((r) => h("tr", {}, r.map((c) => h("td", {}, String(c)))))));
  }

  const JUDGE_NOTE = "Scores use the GameCraft-Bench rubric, judged by Qwen3.8-27B from replayed demos; Overall and category scores are averaged over three judging passes, per-requirement scores and rationales are from pass 1.";

  // ---------- chrome ----------
  function versionSwitcher() {
    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))));
  }
  function wireCopy(btn, codeEl) {
    btn.addEventListener("click", () => navigator.clipboard?.writeText(codeEl.textContent).then(() => {
      const t = btn.textContent;
      btn.textContent = "Copied";
      setTimeout(() => (btn.textContent = t), 1500);
    }));
  }

  async function boot(init, { dataset = "games.json", simple = false } = {}) {
    SIMPLE = simple;
    initModal();
    versionSwitcher();
    const [games, compare] = await Promise.all([
      window.EVO_DATASET || fetch(data(dataset)).then((r) => r.json()),
      fetch(data("compare.json")).then((r) => r.json()).catch(() => []),
    ]);
    GAMES = games;
    GAMES.forEach((g) => byKey.set(key(g), g));
    await init({ games: GAMES, compare, arms: arms() });
    const m = location.hash.match(/^#game=(.+)$/);
    if (m && byKey.has(decodeURIComponent(m[1]))) openModal(byKey.get(decodeURIComponent(m[1])), GAMES);
  }

  window.Evo = {
    boot, h, $, media, data, s100, i100, genreName, demoName, demoNum, key, esc, mean, median,
    CATS, SHORT, ENGINE_CLASS, MODEL_CLASS, JUDGE_NOTE, reduceMotion, signed, deltaClass,
    videoFrame, wipeFrame, wirePlayback, observe, unobserve, play, pause, pauseAll, mountHeroVideo,
    mountGallery, defaultCard, mdva, mountCompare, openModal, renderStrip, renderCats, renderTable, legend, wireCopy,
    showTip, hideTip, svg: s, loadDetails,
    get games() { return GAMES; }, byKey,
  };
})();