New black/orange design, live traces with pictures, free-only default roster

- Lobby, play, reveal and final screens follow the new reference design
- After lock-in the rivals feed shows each agent's views and tool results with images
- Only free models (Mistral Large) are open signed out; sign in or paste a key to unlock more
- /api/config exposes the traces dataset for the nav link

arena/agent.py

@@ -44,6 +44,8 @@ async def run_agent(model_key: str, meta: dict, api_key: str, world: AgentWorld,
         intro = "Round start. Here is your first view. " + first.text
         chat.add_user(intro, first.image)
         trace.append({"role": "user", "text": intro, "image_ref": 0 if first.image else None})
+        emit({"type": "agent_thought", "agent": model_key, "step": 0, "kind": "start",
+              "text": intro, "image_ref": 0 if first.image else None})
         emit({"type": "agent_status", "agent": model_key, "status": "thinking", "step": 0})
 
         nudges, warned = 0, False
@@ -59,7 +61,7 @@ async def run_agent(model_key: str, meta: dict, api_key: str, world: AgentWorld,
                                          for c in turn.tool_calls]})
             # The game only forwards this once the human has locked in.
             emit({"type": "agent_thought", "agent": model_key, "step": world.steps,
-                  "text": turn.text, "reasoning": turn.reasoning,
+                  "kind": "assistant", "text": turn.text, "reasoning": turn.reasoning,
                   "tool_calls": [{"name": c.name, "args": c.args} for c in turn.tool_calls]})
 
             if not turn.tool_calls:
@@ -78,8 +80,11 @@ async def run_agent(model_key: str, meta: dict, api_key: str, world: AgentWorld,
             for call in turn.tool_calls:
                 obs = await world.execute(call.name, call.args)
                 results.append((call, obs))
+                image_ref = len(world.images) - 1 if obs.image else None
                 trace.append({"role": "tool", "name": call.name, "id": call.id, "text": obs.text,
-                              "image_ref": len(world.images) - 1 if obs.image else None})
+                              "image_ref": image_ref})
+                emit({"type": "agent_thought", "agent": model_key, "step": world.steps,
+                      "kind": "tool", "name": call.name, "text": obs.text, "image_ref": image_ref})
                 if obs.ticker:
                     emit({"type": "agent_action", "agent": model_key, "step": world.steps,
                           "max_steps": world.max_steps, "action": call.name, "text": obs.ticker})

arena/config.py

@@ -43,7 +43,9 @@ GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/v1beta/openai/"
 # `key` says where the credential comes from: an env var name, "byok" for
 # bring-your-own-key models the player unlocks with their own key, or "hf_login"
 # for models billed to the player's HF account via the Space's OAuth token.
-# `avatar` is a profile picture under static/avatars/. For BYOK models, `catalog`
+# `avatar` is a profile picture under static/avatars/, `org` the maker shown under
+# the name. `free=True` models are open to everyone; every other model needs the
+# player to sign in with Hugging Face (or paste their own key, for BYOK). For BYOK models, `catalog`
 # names the provider whose model list the lobby dropdown is filled from with the
 # player's key; `model_id` is the default selection.
 # Optional `max_images`: cap on images per request for providers that limit it
@@ -54,62 +56,62 @@ MODELS = {
         label="Mistral Large 4", provider="openai_compat", base_url=MISTRAL_BASE_URL,
         model_id=os.getenv("MISTRAL_MODEL", "mistral-large-4-0-2"),
         key="MISTRAL_API_KEY", color="#FF8205", default_on=True,
-        avatar="/static/avatars/mistral.webp",
+        avatar="/static/avatars/mistral.webp", org="Mistral", free=True,
     ),
     "mistral-medium": dict(
         label="Mistral Medium 3.5", provider="openai_compat", base_url=MISTRAL_BASE_URL,
         model_id=os.getenv("MISTRAL_MEDIUM_MODEL", "mistral-medium-latest"),
         key="MISTRAL_API_KEY", color="#FFAF00", default_on=False,
-        avatar="/static/avatars/mistral.webp",
+        avatar="/static/avatars/mistral.webp", org="Mistral",
     ),
     "qwen": dict(
         label="Qwen3.8-27B", provider="openai_compat", base_url=HF_ROUTER_BASE_URL,
         model_id="Qwen/Qwen3.8-27B", key="hf_login", color="#615CED", default_on=False,
-        avatar="/static/avatars/qwen.webp",
+        avatar="/static/avatars/qwen.webp", org="Qwen",
     ),
     "kimi": dict(
         label="Kimi-K3", provider="openai_compat", base_url=HF_ROUTER_BASE_URL,
         model_id="moonshotai/Kimi-K3", key="hf_login", color="#1F8FFF", default_on=False,
-        avatar="/static/avatars/kimi.webp",
+        avatar="/static/avatars/kimi.webp", org="Moonshot AI",
     ),
     "glm": dict(
         label="GLM-5.3-Flash", provider="openai_compat", base_url=HF_ROUTER_BASE_URL,
         model_id="zai-org/GLM-5.3-Flash", key="hf_login", color="#2BB673", default_on=False,
-        avatar="/static/avatars/glm.webp",
+        avatar="/static/avatars/glm.webp", org="Z.ai",
     ),
     "gemma": dict(
         label="Gemma-4-31B", provider="openai_compat", base_url=HF_ROUTER_BASE_URL,
         model_id="google/gemma-4-31B-it", key="hf_login", color="#4C8DF6", default_on=False,
-        avatar="/static/avatars/google.webp",
+        avatar="/static/avatars/google.webp", org="Google",
     ),
     "minimax": dict(
         label="MiniMax-M3", provider="openai_compat", base_url=HF_ROUTER_BASE_URL,
         model_id="MiniMaxAI/MiniMax-M3", key="hf_login", color="#F8514A", default_on=False,
-        avatar="/static/avatars/minimax.webp",
+        avatar="/static/avatars/minimax.webp", org="MiniMax",
     ),
     # Keys end up in DOM ids and CSS selectors: letters, digits, "-" and "_" only.
     "deepseek": dict(
         label="DeepSeek-V4.1-Flash", provider="openai_compat", base_url=HF_ROUTER_BASE_URL,
         model_id="deepseek-ai/DeepSeek-V4.1-Flash", key="hf_login", color="#4D6BFE", default_on=False,
-        avatar="/static/avatars/deepseek.webp",
+        avatar="/static/avatars/deepseek.webp", org="DeepSeek",
     ),
     "gpt": dict(
         label="GPT-6.1", provider="openai_responses",
         model_id=os.getenv("OPENAI_MODEL", "gpt-6.1-sol"), key="byok", key_hint="OpenAI API key",
         catalog="openai", color="#10A37F", default_on=False, reasoning_effort="medium",
-        avatar="/static/avatars/openai.webp",
+        avatar="/static/avatars/openai.webp", org="OpenAI",
     ),
     "claude": dict(
         label="Claude Opus 5.5", provider="anthropic",
         model_id=os.getenv("ANTHROPIC_MODEL", "claude-opus-5-5"), key="byok",
         key_hint="Anthropic API key", catalog="anthropic", color="#D97757", default_on=False,
-        avatar="/static/avatars/anthropic.webp",
+        avatar="/static/avatars/anthropic.webp", org="Anthropic",
     ),
     "gemini": dict(
-        label="Gemini 3.1 Pro", provider="openai_compat", base_url=GEMINI_BASE_URL,
+        label="Gemini-3.8-flash", provider="openai_compat", base_url=GEMINI_BASE_URL,
         model_id=os.getenv("GEMINI_MODEL", "gemini-3.8-flash"), key="byok",
         key_hint="Google AI Studio key", catalog="gemini", color="#A142F4", default_on=False,
-        avatar="/static/avatars/google.webp",
+        avatar="/static/avatars/google.webp", org="Google",
     ),
 }
 
@@ -128,6 +130,7 @@ def public_models() -> list:
         hf_login = m["key"] == "hf_login"
         out.append(dict(
             key=key, label=m["label"], color=m["color"], avatar=m.get("avatar", ""),
+            org=m.get("org", ""), free=bool(m.get("free")),
             byok=byok, hf_login=hf_login, model_id=m["model_id"] if byok else "",
             key_hint=m.get("key_hint", ""), default_on=m["default_on"],
             available=byok or hf_login or bool(server_key_for(key)),

arena/game.py

@@ -202,11 +202,11 @@ class Game:
         return rows
 
     def image(self, round_number: int, agent: str, idx: int) -> Optional[bytes]:
-        """Agent-view image for the replay -- only once that round is revealed."""
+        """What an agent saw -- only once the human has locked in (or the round is over)."""
         if not 1 <= round_number <= len(self.rounds):
             return None
         rnd = self.rounds[round_number - 1]
-        if rnd.reveal is None or agent not in rnd.worlds:
+        if not self.thoughts_unlocked(rnd) or agent not in rnd.worlds:
             return None
         images = rnd.worlds[agent].images
         return images[idx]["bytes"] if 0 <= idx < len(images) else None

arena/main.py

@@ -15,7 +15,8 @@ from pydantic import BaseModel, Field
 
 from . import catalog, streetview
 from .config import (GAMES_PER_IP_PER_HOUR, GOOGLE_MAPS_BROWSER_KEY, MODELS, ROUND_SECONDS,
-                     ROUNDS_PER_GAME, AGENT_MAX_STEPS, AGENT_MAX_GEOCODES, public_models, server_key_for)
+                     ROUNDS_PER_GAME, TRACES_REPO, AGENT_MAX_STEPS, AGENT_MAX_GEOCODES, public_models,
+                     server_key_for)
 from .game import GAMES, Game, prune_games
 
 mimetypes.add_type("image/webp", ".webp")  # missing from some slim images
@@ -75,7 +76,7 @@ def config(request: Request):
     return {"models": public_models(), "modes": streetview.location_modes(),
             "rounds": ROUNDS_PER_GAME, "round_seconds": ROUND_SECONDS,
             "max_steps": AGENT_MAX_STEPS, "max_geocodes": AGENT_MAX_GEOCODES, "maps_key": GOOGLE_MAPS_BROWSER_KEY,
-            "hf_user": user}
+            "hf_user": user, "traces_repo": TRACES_REPO}
 
 
 class NewGame(BaseModel):
@@ -90,8 +91,9 @@ class NewGame(BaseModel):
 def create_game(body: NewGame, request: Request):
     prune_games()
     oauth = _hf_login(request)
-    if not oauth and any(MODELS.get(k, {}).get("key") == "hf_login" for k in body.models):
-        raise HTTPException(401, "sign in with Hugging Face to play the open models")
+    if not oauth and any(k in MODELS and MODELS[k]["key"] != "byok" and not MODELS[k].get("free")
+                         for k in body.models):
+        raise HTTPException(401, "sign in with Hugging Face to unlock more opponents")
     byok = {k: v.strip() for k, v in body.byok.items() if MODELS.get(k, {}).get("key") == "byok"}
     chosen = []
     for key in body.models:
@@ -206,5 +208,5 @@ async def events(game_id: str, request: Request):
 def agent_image(game_id: str, round_number: int, agent: str, idx: int):
     data = _game(game_id).image(round_number, agent, idx)
     if data is None:
-        raise HTTPException(404, "image unavailable (round not revealed yet?)")
+        raise HTTPException(404, "image unavailable (lock in your own guess first)")
     return Response(data, media_type="image/jpeg", headers={"Cache-Control": "private, max-age=3600"})

static/app.js

@@ -1,7 +1,7 @@
 "use strict";
 
 const HUMAN = "you";
-const HUMAN_COLOR = "#ffc53d";
+const HUMAN_COLOR = "#ff5a14";
 const ACTION_ICONS = {
   look: "👀", pan: "↻", zoom: "🔍", move: "🚶", view_map: "🗺️",
   place_pin: "📍", reverse_geocode: "🔎", submit_guess: "🔒",
@@ -84,39 +84,66 @@ function dotIcon(color, scale = 9) {
 }
 
 /* ================= Lobby ================= */
+const svgIcon = (id, cls = "i") => `<svg class="${cls}"><use href="#${id}"/></svg>`;
+
 async function initLobby() {
   state.cfg = await api("/api/config");
   loadMaps(state.cfg.maps_key).catch((e) => ($("#lobby-error").textContent = e.message));
   const hfUser = state.cfg.hf_user;
-  $("#hf-auth").innerHTML = hfUser
-    ? `<div class="hf-user"><img src="${esc(hfUser.avatar)}" alt=""><span>Signed in as <b>@${esc(hfUser.username)}</b></span></div>
-       <a class="hf-out" href="/oauth/huggingface/logout">Sign out</a>`
-    : `<a id="hf-login" class="btn hf" href="/oauth/huggingface/login">🤗 Sign in with Hugging Face</a>
-       <div class="hint">Required for the open models. Inference runs on your HF account.</div>`;
+
+  $("#nav-auth").innerHTML = hfUser
+    ? `<span class="nav-user">@${esc(hfUser.username)}</span>`
+    : `<a class="link accent" href="/oauth/huggingface/login">Sign in</a>`;
+  $("#sign-out-slot").innerHTML = hfUser ? `<a class="link muted" href="/oauth/huggingface/logout">Sign out</a>` : "";
+  if (state.cfg.traces_repo) $("#nav-traces").href = `https://huggingface.co/datasets/${state.cfg.traces_repo}`;
+  else $("#nav-traces").classList.add("hidden");
+  $("#hf-login").classList.toggle("hidden", !!hfUser);
+  $("#login-note").classList.toggle("hidden", !!hfUser);
+
+  const mins = Math.round(state.cfg.round_seconds / 60 * 10) / 10;
+  $("#rules-body").innerHTML = `<ul>
+    <li>${state.cfg.rounds} rounds, ${mins} minutes each. Everyone gets dropped at the same Street View spot.</li>
+    <li>The AIs play with tools: look, pan, zoom, move, a map, a pin, and up to ${state.cfg.max_steps} moves per round
+      plus ${state.cfg.max_geocodes} text-only place lookups.</li>
+    <li>While you play, their feed is blind: you see what they do, not what they see.
+      Lock in your guess and their reasoning and pictures go live.</li>
+    <li>Up to 5,000 points per round, decaying with distance. After each round, click an AI to replay its full trace.</li>
+    <li>Mistral Large is free for everyone. Sign in with Hugging Face for the open models (inference on your HF account),
+      or paste your own key for the closed ones. Keys stay in memory for the game only and are never logged.</li></ul>`;
+  $("#nav-rules").onclick = () => $("#rules-modal").classList.remove("hidden");
+  $("#rules-modal").onclick = (e) => { if (e.target.id === "rules-modal") $("#rules-modal").classList.add("hidden"); };
+
   const names = (pred) => state.cfg.models.filter(pred).map((m) => esc(m.label));
   const list = (xs) => xs.length > 1 ? `${xs.slice(0, -1).join(", ")} and ${xs.at(-1)}` : xs[0];
   const hfModels = names((m) => m.hf_login), byokModels = names((m) => m.byok);
   $("#key-hint").innerHTML = [
-    hfModels.length && `🤗 ${list(hfModels)} run on <b>your Hugging Face account</b> once you sign in.`,
-    byokModels.length && `🔑 ${list(byokModels)} play on <b>your own key</b>.`,
+    hfModels.length && `${list(hfModels)} run on your Hugging Face account once you sign in.`,
+    byokModels.length && `${list(byokModels)} play on your own key.`,
     (hfModels.length || byokModels.length) && "Keys and tokens are kept in memory for the game only and never logged.",
   ].filter(Boolean).join(" ");
+
   const nameInput = $("#player-name");
-  const syncAvatar = () => ($("#player-avatar").textContent = (nameInput.value.trim()[0] || "?").toUpperCase());
+  const syncAvatar = () => {
+    if (!hfUser?.avatar) $("#player-avatar").textContent = (nameInput.value.trim()[0] || "?").toUpperCase();
+  };
+  if (hfUser?.avatar) {
+    $("#player-avatar").classList.add("pic");
+    $("#player-avatar").innerHTML = `<img src="${esc(hfUser.avatar)}" alt="">`;
+  }
   nameInput.value = localStorage.getItem("arena.name") || hfUser?.username || "";
   nameInput.oninput = syncAvatar;
+  $("#name-change").onclick = () => { nameInput.focus(); nameInput.select(); };
   syncAvatar();
-  const mins = Math.round(state.cfg.round_seconds / 60 * 10) / 10;
-  $("#rules-hint").innerHTML =
-    `<span class="chip"><b>${state.cfg.rounds}</b> rounds</span>` +
-    `<span class="chip"><b>${mins}</b> min each</span>` +
-    `<span class="chip" title="look, pan, zoom, move, map, pin"><b>${state.cfg.max_steps}</b> AI moves / round</span>` +
-    `<span class="chip" title="text-only place lookups, on top of the moves"><b>+${state.cfg.max_geocodes}</b> geocodes</span>`;
+
+  const stat = (n, label, title = "") => `<div class="stat" title="${title}"><b>${n}</b><small>${label}</small></div>`;
+  $("#rules-hint").innerHTML = stat(state.cfg.rounds, "Rounds") + stat(mins, "Min each")
+    + stat(state.cfg.max_steps, "AI moves", "look, pan, zoom, move, map, pin")
+    + stat(`+${state.cfg.max_geocodes}`, "Geocodes", "text-only place lookups, on top of the moves");
 
   const modes = $("#mode-picker");
   state.cfg.modes.forEach((m) => {
     const b = document.createElement("button");
-    b.textContent = m === "world" ? "🌐 World" : `🏙️ ${m}`;
+    b.innerHTML = m === "world" ? `${svgIcon("i-globe", "")} World` : esc(m);
     b.className = m === state.mode ? "on" : "";
     b.onclick = () => {
       state.mode = m;
@@ -126,43 +153,55 @@ async function initLobby() {
   });
 
   const grid = $("#model-grid");
-  const syncCount = () => {
-    const n = state.selected.size;
-    $("#opp-count").textContent = n ? `${n} selected` : "pick at least one";
-  };
+  const total = state.cfg.models.length;
+  const syncCount = () => ($("#opp-count").textContent = `${state.selected.size} / ${total} Selected`);
   state.cfg.models.forEach((m) => {
     const el = document.createElement("div");
-    const needsLogin = m.hf_login && !hfUser;
-    el.className = "fighter" + (m.available ? "" : " disabled") + (m.byok ? " byok" : "")
-      + (m.hf_login ? " hf" : "") + (needsLogin ? " locked" : "");
+    // Free models are open to everyone; the rest need a Hugging Face login or the player's key.
+    const needsLogin = !m.byok && !m.free && !hfUser;
+    const offline = !m.available;
+    el.className = "fighter";
     el.style.setProperty("--c", m.color);
-    const tag = m.byok ? "🔑 your key" : needsLogin ? "🤗 sign in" : m.hf_login ? "🤗 your HF" : m.available ? "free" : "offline";
-    el.innerHTML = `<span class="check">✓</span>${avatarHtml(m.label, m.color, "lg", false, m.avatar)}
-                    <div class="fname">${esc(m.label)}</div><div class="ftag">${tag}</div>`;
+    const tag = offline ? "Offline" : m.hf_login ? "Your HF" : "Free";
+    el.innerHTML = `<span class="mark">${svgIcon("i-check", "")}</span><svg class="lock"><use href="#i-lock"/></svg>
+      ${avatarHtml(m.label, m.color, "lg", false, m.avatar)}
+      <div class="fname">${esc(m.label)}</div><div class="org">${esc(m.org || "")}</div>
+      ${m.byok ? `<div class="keyline">Your Key</div>` : `<div class="tag">${tag}</div>`}`;
+    const setLocked = (locked) => el.classList.toggle("locked", locked);
+    const toggle = (on) => {
+      on ? state.selected.add(m.key) : state.selected.delete(m.key);
+      el.classList.toggle("on", on);
+      syncCount();
+    };
     if (m.byok) {
+      const paste = document.createElement("button");
+      paste.className = "paste"; paste.textContent = "Paste key";
       const input = document.createElement("input");
-      input.type = "password"; input.placeholder = "paste key"; input.title = m.key_hint; input.autocomplete = "off";
+      input.type = "password"; input.placeholder = m.key_hint || "API key"; input.autocomplete = "off";
+      input.className = "hidden";
       const picker = byokPicker(m, el);
+      paste.onclick = (e) => {
+        e.stopPropagation();
+        paste.classList.add("hidden"); input.classList.remove("hidden"); input.focus();
+      };
       input.onclick = (e) => e.stopPropagation();
       input.oninput = () => {
         state.byok[m.key] = input.value.trim();
+        setLocked(!state.byok[m.key]);
         toggle(!!state.byok[m.key]);
         picker.refresh(state.byok[m.key]);
       };
-      el.append(input, picker.select);
+      el.append(paste, input, picker.select);
     }
-    const toggle = (on) => {
-      on ? state.selected.add(m.key) : state.selected.delete(m.key);
-      el.classList.toggle("on", on);
-      syncCount();
-    };
+    setLocked(m.byok || needsLogin || offline);
     el.onclick = () => {
-      if (!m.available) return;
-      if (m.byok && !state.byok[m.key]) { el.querySelector("input").focus(); return; }
+      if (offline) return;
+      if (m.byok && !state.byok[m.key]) { el.querySelector(".paste:not(.hidden)")?.click(); el.querySelector("input").focus(); return; }
       if (needsLogin) { nudgeLogin(); return; }
       toggle(!state.selected.has(m.key));
     };
-    if (m.default_on && m.available && !m.byok && !needsLogin) toggle(true);
+    // Only the free model starts selected; everything else is opt-in.
+    if (m.default_on && m.free && !offline) toggle(true);
     grid.appendChild(el);
   });
   syncCount();
@@ -177,6 +216,7 @@ function byokPicker(m, tile) {
   select.className = "hidden"; select.title = "Model";
   select.onclick = (e) => e.stopPropagation();
   select.onchange = () => (state.byokModel[m.key] = select.value);
+  const keyline = tile.querySelector(".keyline");
   const setOptions = (models) => {
     if (!models.some((x) => x.id === m.model_id)) models.unshift({ id: m.model_id, label: m.model_id });
     select.innerHTML = models.map((x) =>
@@ -186,7 +226,7 @@ function byokPicker(m, tile) {
   let timer, seq = 0;
   const refresh = (key) => {
     clearTimeout(timer);
-    tile.querySelector(".ftag").textContent = "🔑 your key";
+    keyline.textContent = "Your Key";
     if (!key) { select.classList.add("hidden"); delete state.byokModel[m.key]; return; }
     const mine = ++seq;
     timer = setTimeout(async () => {
@@ -200,7 +240,7 @@ function byokPicker(m, tile) {
         // Keep the default model playable; just say the list could not be loaded.
         select.classList.add("hidden");
         state.byokModel[m.key] = m.model_id;
-        tile.querySelector(".ftag").textContent = `⚠ ${e.message}`;
+        keyline.textContent = `⚠ ${e.message}`;
       }
     }, 600);
   };
@@ -209,7 +249,6 @@ function byokPicker(m, tile) {
 
 function nudgeLogin() {
   const btn = $("#hf-login");
-  if (!btn) return;
   btn.classList.remove("nudge"); void btn.offsetWidth; btn.classList.add("nudge");
   btn.scrollIntoView({ behavior: "smooth", block: "center" });
 }
@@ -300,12 +339,12 @@ function startRound(rnd) {
   state.guessMarker?.setMap(null);
   state.guessMarker = null;
   $("#guess-btn").disabled = true;
-  $("#guess-btn").textContent = "Place your pin";
+  $("#guess-btn").textContent = "Place your Pin";
   $("#guess-btn").onclick = submitGuess;
 
   renderRivals(rnd.agents);
   $("#rivals").classList.remove("unlocked");
-  $("#rivals .live").textContent = "LIVE · BLIND";
+  $("#live-mode").textContent = "Blind";
   if (rnd.human_locked) unlockThoughts();
   clearInterval(state.timerId);
   state.timerId = setInterval(tick, 250);
@@ -368,16 +407,16 @@ function renderRivals(agents) {
     const el = document.createElement("div");
     el.className = "rival"; el.id = `rival-${m.key}`;
     el.style.setProperty("--c", m.color);
-    el.innerHTML = `<div class="row">${avatarHtml(m.label, m.color, "sm", false, m.avatar)}${esc(m.label)}
+    el.innerHTML = `<div class="row">${avatarHtml(m.label, m.color, "", false, m.avatar)}<span class="nm">${esc(m.label)}</span>
         <span class="status ${a.status}">${statusText(a.status)}</span></div>
       <div class="bar"><i style="width:${(100 * a.step) / state.cfg.max_steps}%"></i></div>
-      <div class="last">${a.status === "locked" ? "🔒 locked in a guess" : "🧭 getting its bearings"}</div>
+      <div class="last">${svgIcon("i-info")}<span>${a.status === "locked" ? "Locked in a guess" : "Getting its bearings"}</span></div>
       <div class="feed"></div>`;
     list.appendChild(el);
   });
 }
 function statusText(s) {
-  return { thinking: "thinking", locked: "locked in", out: "no guess", error: "crashed" }[s] || s;
+  return { thinking: "Thinking", locked: "Locked in", out: "No guess", error: "Crashed" }[s] || s;
 }
 
 function onAgentAction(ev) {
@@ -385,7 +424,7 @@ function onAgentAction(ev) {
   if (!el) return;
   el.querySelector(".bar > i").style.width = `${(100 * ev.step) / ev.max_steps}%`;
   const last = el.querySelector(".last");
-  last.textContent = `${ACTION_ICONS[ev.action] || "•"} ${ev.text}  ·  step ${ev.step}/${ev.max_steps}`;
+  last.querySelector("span").textContent = `${ev.text} · step ${ev.step}/${ev.max_steps}`;
   last.classList.remove("flash"); void last.offsetWidth; last.classList.add("flash");
 }
 
@@ -398,11 +437,11 @@ function onAgentStatus(ev) {
   if (ev.status === "locked") {
     const left = Math.max(0, state.round.deadline_epoch - (Date.now() / 1000 + state.clockOffset));
     const used = state.cfg.round_seconds - left;
-    el.querySelector(".last").textContent = `🔒 locked in after ${ev.step} steps · ${Math.round(used)}s`;
+    el.querySelector(".last span").textContent = `Locked in after ${ev.step} steps · ${Math.round(used)}s`;
   } else if (ev.status === "error") {
-    el.querySelector(".last").textContent = "💥 the API call failed";
+    el.querySelector(".last span").textContent = "The API call failed";
   } else if (ev.status === "out") {
-    el.querySelector(".last").textContent = "⌛ ran out without a guess";
+    el.querySelector(".last span").textContent = "Ran out without a guess";
   }
   updateWaiting();
 }
@@ -415,7 +454,7 @@ async function unlockThoughts(retry = true) {
   rnd.thoughtsOpen = true;
   rnd.seenThoughts = new Set();
   $("#rivals").classList.add("unlocked");
-  $("#rivals .live").textContent = "LIVE · UNLOCKED";
+  $("#live-mode").textContent = "Unlocked";
   try {
     const r = await api(`/api/games/${state.game.game_id}/thoughts`);
     if (state.round === rnd) r.thoughts.forEach(onAgentThought);
@@ -435,9 +474,14 @@ function onAgentThought(ev) {
   const feed = $(`#rival-${ev.agent} .feed`);
   if (!feed) return;
   const el = document.createElement("div");
-  el.className = "thought"; el.dataset.seq = ev.seq;
-  el.innerHTML = `${ev.reasoning ? `<details><summary>thinking</summary><div class="thinking">${esc(ev.reasoning)}</div></details>` : ""}
-    ${ev.text ? `<div class="text">${esc(ev.text)}</div>` : ""}${callChips(ev.tool_calls)}`;
+  const kind = ev.kind || "assistant";
+  el.className = `thought ${kind}`; el.dataset.seq = ev.seq;
+  const title = kind === "start" ? "Round start" : kind === "tool" ? `${ACTION_ICONS[ev.name] || ""} ${esc(ev.name)}` : "";
+  el.innerHTML = `${title ? `<div class="tl">${title}</div>` : ""}
+    ${ev.reasoning ? `<details><summary>thinking</summary><div class="thinking">${esc(ev.reasoning)}</div></details>` : ""}
+    ${ev.text ? `<div class="text">${esc(ev.text)}</div>` : ""}${callChips(ev.tool_calls)}
+    ${traceImg(ev.agent, rnd.round, ev.image_ref)}`;
+  el.querySelector("img")?.addEventListener("click", (e) => openLightbox(e.target.src));
   // Backlog and live events can interleave: keep each feed in emission order.
   const after = [...feed.children].find((c) => +c.dataset.seq > ev.seq);
   const stick = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 30;
@@ -445,6 +489,15 @@ function onAgentThought(ev) {
   if (stick) feed.scrollTop = feed.scrollHeight;
 }
 
+function traceImg(agent, round, ref) {
+  return ref == null ? "" :
+    `<img loading="lazy" src="/api/games/${state.game.game_id}/rounds/${round}/images/${agent}/${ref}" alt="">`;
+}
+function openLightbox(src) {
+  $("#lightbox img").src = src;
+  $("#lightbox").classList.remove("hidden");
+}
+
 function callChips(calls) {
   return (calls || []).map((c) =>
     `<span class="call">${ACTION_ICONS[c.name] || ""} ${esc(c.name)}(${esc(Object.entries(c.args || {})
@@ -478,7 +531,7 @@ function onReveal(rev) {
   $("#round-table").classList.remove("hidden");
   renderRoundTable(rev);
   drawRevealMap(rev);
-  $("#next-btn").textContent = rev.game_over ? "Final results 🏆" : "Next round →";
+  $("#next-btn").textContent = rev.game_over ? "Final results" : "Next round →";
   $("#next-btn").onclick = rev.game_over ? showFinal : nextRound;
 }
 
@@ -493,11 +546,11 @@ function renderRoundTable(rev) {
       <td><div class="who">${avatarOf(key)}<div>${esc(labelOf(key))}
           <div class="sub">${fmtKm(p.distance_km)} · ${sub}</div></div></div></td>
       <td class="pts">${fmtPts(p.score)}<div class="sub">Σ ${fmtPts(rev.totals[key])}</div></td>
-      <td class="chev">${key === HUMAN ? "" : "›"}</td></tr>`;
+      <td class="chev">${key === HUMAN ? "" : "<span>Trace ›</span>"}</td></tr>`;
   }).join("");
   $("#round-table").innerHTML = `<table class="lb"><thead><tr><th>#</th><th>Player</th>
     <th style="text-align:right">Points</th><th></th></tr></thead><tbody>${rows}</tbody></table>
-    <p class="hint" style="padding:0 8px">Click an AI to replay everything it saw, thought and did.</p>`;
+    <p class="note">${svgIcon("i-info")}<span>Click an AI to replay everything it saw, thought and did.</span></p>`;
   $("#round-table").querySelectorAll("tr.clickable").forEach((tr) =>
     tr.addEventListener("click", () => openReplay(tr.dataset.key)));
 }
@@ -544,8 +597,7 @@ function openReplay(key) {
   const p = rev.participants[key];
   if (!p?.trace) return;
   const color = colorOf(key);
-  const img = (ref) => ref == null ? "" :
-    `<img loading="lazy" src="/api/games/${state.game.game_id}/rounds/${state.round.round}/images/${key}/${ref}" alt="">`;
+  const img = (ref) => traceImg(key, state.round.round, ref);
 
   let html = `<div class="verdict" style="--c:${color}">
     ${p.guess ? `Guessed <b>${esc(p.guess.country || `${p.guess.lat.toFixed(3)}, ${p.guess.lng.toFixed(3)}`)}</b>:
@@ -557,23 +609,21 @@ function openReplay(key) {
 
   for (const e of p.trace) {
     if (e.role === "user") {
-      html += `<div class="step"><div class="label">Game</div><div class="text">${esc(e.text)}</div>${img(e.image_ref)}</div>`;
+      html += `<div class="step"><div class="tl">Game</div><div class="text">${esc(e.text)}</div>${img(e.image_ref)}</div>`;
     } else if (e.role === "assistant") {
       const calls = callChips(e.tool_calls);
-      html += `<div class="step" style="--c:${color}"><div class="label">${esc(labelOf(key))}</div>
+      html += `<div class="step" style="--c:${color}"><div class="tl">${esc(labelOf(key))}</div>
         ${e.text ? `<div class="text">${esc(e.text)}</div>` : ""}
         ${e.reasoning ? `<details><summary>thinking</summary><div class="thinking">${esc(e.reasoning)}</div></details>` : ""}
         ${calls}</div>`;
     } else if (e.role === "tool") {
-      html += `<div class="step"><div class="label">${ACTION_ICONS[e.name] || ""} ${esc(e.name)} result</div>
+      html += `<div class="step"><div class="tl">${ACTION_ICONS[e.name] || ""} ${esc(e.name)} result</div>
         <div class="text muted">${esc(e.text)}</div>${img(e.image_ref)}</div>`;
     }
   }
   $("#replay-title").innerHTML = `${avatarOf(key, "sm")} ${esc(labelOf(key))}`;
   $("#replay-body").innerHTML = html;
-  $("#replay-body").querySelectorAll("img").forEach((im) => im.addEventListener("click", () => {
-    $("#lightbox img").src = im.src; $("#lightbox").classList.remove("hidden");
-  }));
+  $("#replay-body").querySelectorAll("img").forEach((im) => im.addEventListener("click", () => openLightbox(im.src)));
   $("#round-table").classList.add("hidden");
   $("#replay").classList.remove("hidden");
   $("#replay").scrollTop = 0;
@@ -588,7 +638,7 @@ function showFinal() {
   const myRank = order.indexOf(HUMAN) + 1;
   const beaten = order.length - myRank;
   const machines = order.length - 1;
-  $("#final-title").textContent = myRank === 1 ? "🏆 Humanity prevails!" : myRank === order.length ? "🤖 The machines win" : `You finished #${myRank}`;
+  $("#final-title").textContent = myRank === 1 ? "Humanity prevails" : myRank === order.length ? "The machines win" : `You finished #${myRank}`;
   $("#final-sub").textContent = `You beat ${beaten} of ${machines} AI opponent${machines > 1 ? "s" : ""} with ${fmtPts(totals[HUMAN])} points.`;
 
   const podiumOrder = [1, 0, 2].filter((i) => i < order.length);

static/index.html

@@ -3,46 +3,75 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>GeoGuessr Arena — you vs the machines</title>
+  <title>GeoGuess — you vs machines</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
 
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <symbol id="i-globe" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.6 3.8 5.6 3.8 9s-1.2 6.4-3.8 9c-2.6-2.6-3.8-5.6-3.8-9S9.4 5.6 12 3z"/></g></symbol>
+  <symbol id="i-pad" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M7 7h10a5 5 0 0 1 4.9 6l-.8 3.6a2.5 2.5 0 0 1-4.3 1.1L14.5 15h-5l-2.3 2.7a2.5 2.5 0 0 1-4.3-1.1L2.1 13A5 5 0 0 1 7 7z"/><path d="M7.5 10v3M6 11.5h3"/><circle cx="16" cy="10.5" r=".6" fill="currentColor"/><circle cx="17.5" cy="12.5" r=".6" fill="currentColor"/></g></symbol>
+  <symbol id="i-bot" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="7" width="16" height="12" rx="3"/><path d="M12 3v4M9.5 12v1.5M14.5 12v1.5M1.5 12v3M22.5 12v3"/></g></symbol>
+  <symbol id="i-lock" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V8a3 3 0 0 0-6 0v2z"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M6 12.5l4 4 8-9"/></symbol>
+  <symbol id="i-info" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.5v.5" stroke-linecap="round"/></g></symbol>
+  <symbol id="i-pen" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="M4 20l1-4L16 5l3 3L8 19l-4 1zM14 7l3 3"/></symbol>
+  <symbol id="i-back" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M20 12H5M11 6l-6 6 6 6"/></symbol>
+</svg>
+
+<header class="topbar">
+  <a class="brand" href="/"><span class="logo"><svg><use href="#i-globe"/></svg></span><span>GeoGuess</span></a>
+  <nav>
+    <button id="nav-rules" class="link">How it works</button>
+    <a id="nav-traces" class="link" target="_blank" rel="noopener">Traces</a>
+    <span id="nav-auth"></span>
+  </nav>
+</header>
+
 <!-- ============ LOBBY ============ -->
 <section id="lobby" class="screen active">
   <div class="lobby-wrap">
-    <header class="marquee">
-      <span class="eyebrow">🌍 GeoGuessr Arena</span>
-      <h1><span class="you">You</span><span class="vs">vs</span><span class="them">the machines</span></h1>
+    <div class="hero">
+      <h1>You <span class="vs">vs</span> Machines</h1>
       <p>Same drop, same clock. You roam Street View while AI agents walk, look, zoom and pin with tools.
-        Their feed stays blind until the reveal: you see <em>what</em> they do, never what they see.</p>
-    </header>
-
-    <div class="versus">
-      <div class="corner player-corner">
-        <div class="corner-label">Player 1</div>
-        <span id="player-avatar" class="avatar xl human" style="--c:var(--human)">?</span>
-        <input id="player-name" class="name-input" maxlength="40" placeholder="Your name" autocomplete="nickname">
-        <div class="field-label">Map</div>
-        <div id="mode-picker" class="segmented"></div>
-        <div class="rules" id="rules-hint"></div>
-        <div id="hf-auth" class="hf-auth"></div>
-      </div>
-
-      <div class="vs-badge">VS</div>
+        Their feed stays blind until you lock in: you see what they do, never what they see.</p>
+    </div>
 
-      <div class="corner machine-corner">
-        <div class="corner-label"><span>The machines</span><span class="count" id="opp-count"></span></div>
-        <div id="model-grid" class="roster"></div>
-        <p class="hint" id="key-hint"></p>
+    <div class="lobby-grid">
+      <div class="game-col">
+        <section class="panel">
+          <header class="panel-head"><span class="ico"><svg><use href="#i-pad"/></svg></span><h2>Your Game</h2></header>
+          <div class="panel-body">
+            <div class="player-row">
+              <span id="player-avatar" class="avatar md human"></span>
+              <input id="player-name" maxlength="40" placeholder="Your name" autocomplete="nickname">
+              <button id="name-change" class="link muted">Change <svg class="i"><use href="#i-pen"/></svg></button>
+              <span id="sign-out-slot"></span>
+            </div>
+            <h3 class="label">Map</h3>
+            <div id="mode-picker" class="segmented"></div>
+            <div id="rules-hint" class="stats"></div>
+            <p id="login-note" class="note hidden"><svg class="i"><use href="#i-info"/></svg>
+              <span>Sign in to unlock the open models and the rest of the roster. Inference runs on your HF account.</span></p>
+          </div>
+        </section>
+        <div class="cta">
+          <a id="hf-login" class="btn dark hidden" href="/oauth/huggingface/login">Sign in with Hugging Face</a>
+          <button id="start-btn" class="btn primary">Start Match</button>
+          <span id="lobby-error" class="error"></span>
+        </div>
       </div>
-    </div>
 
-    <div class="lobby-actions">
-      <button id="start-btn" class="btn primary big">▶ Start match</button>
-      <span id="lobby-error" class="error"></span>
+      <section class="panel opponents">
+        <header class="panel-head"><span class="ico"><svg><use href="#i-bot"/></svg></span><h2>Select Opponents</h2>
+          <span class="count" id="opp-count"></span></header>
+        <div class="panel-body">
+          <div id="model-grid" class="roster"></div>
+          <p class="note"><svg class="i"><use href="#i-info"/></svg><span id="key-hint"></span></p>
+        </div>
+      </section>
     </div>
   </div>
 </section>
@@ -51,26 +80,26 @@
 <section id="play" class="screen">
   <div id="pano"></div>
 
+  <button id="return-btn" class="btn dark return" title="Back to where you started"><svg class="i"><use href="#i-back"/></svg> Back to start</button>
+
   <div class="scoreboard">
-    <div class="cell"><small>Round</small><b id="hud-round">1/5</b></div>
+    <div class="cell round"><b id="hud-round">1/3</b><small>Rounds</small></div>
     <div class="timer" id="hud-timer">3:00</div>
-    <div class="cell"><small>Score</small><b id="hud-score">0</b></div>
+    <div class="cell score"><b id="hud-score">0</b><small>Score</small></div>
   </div>
 
-  <button id="return-btn" class="btn ghost return" title="Back to where you started">⟲ Back to start</button>
-
   <aside id="rivals" class="rivals">
-    <div class="rivals-head"><span>Rivals</span><span class="live">LIVE · BLIND</span></div>
+    <div class="rivals-head"><span>Rivals</span><span class="live"><i></i>Live <i></i><span id="live-mode">Blind</span></span></div>
     <div id="rival-list"></div>
   </aside>
 
   <div id="guess-box" class="guess-box">
     <div id="guess-map"></div>
-    <button id="guess-btn" class="btn primary" disabled>Place your pin</button>
+    <button id="guess-btn" class="btn dark" disabled>Place your Pin</button>
   </div>
 
   <div id="locked-banner" class="locked-banner hidden">
-    🔒 Locked in. <span id="waiting-text">Waiting for the machines…</span>
+    <b>Locked in.</b> <span id="waiting-text">Waiting for the machines…</span>
   </div>
 </section>
 
@@ -86,13 +115,13 @@
     <div id="round-table"></div>
     <div id="replay" class="replay hidden">
       <div class="replay-head">
-        <button id="replay-back" class="btn ghost small">← Results</button>
+        <button id="replay-back" class="btn dark small"><svg class="i"><use href="#i-back"/></svg> Results</button>
         <b id="replay-title"></b>
       </div>
       <div id="replay-body"></div>
     </div>
     <div class="reveal-actions">
-      <button id="next-btn" class="btn primary big">Next round →</button>
+      <button id="next-btn" class="btn primary">Next round →</button>
     </div>
   </aside>
 </section>
@@ -105,10 +134,16 @@
     <p id="final-sub" class="muted"></p>
     <div id="podium" class="podium"></div>
     <div id="final-table"></div>
-    <button id="again-btn" class="btn primary big">↻ Rematch</button>
+    <button id="again-btn" class="btn primary">Rematch</button>
   </div>
 </section>
 
+<div id="rules-modal" class="modal hidden">
+  <div class="modal-card">
+    <header class="panel-head"><span class="ico"><svg><use href="#i-info"/></svg></span><h2>How it works</h2></header>
+    <div class="panel-body" id="rules-body"></div>
+  </div>
+</div>
 <div id="loading" class="loading hidden"><div class="spinner"></div><span id="loading-text">Finding a place…</span></div>
 <div id="lightbox" class="lightbox hidden"><img alt=""></div>
 

static/style.css

@@ -1,305 +1,307 @@
+/* GeoGuess: black, square, one orange. */
 :root {
-  --bg: #0b0f1a;
-  --panel: rgba(14, 19, 33, 0.86);
-  --panel-solid: #121828;
-  --panel-2: #1a2440;
-  --line: rgba(255, 255, 255, 0.09);
-  --text: #eef1f8;
-  --muted: #8b93a7;
-  --accent: #ffc53d;
-  --accent-deep: #b8860b;
-  --accent-ink: #1a1300;
-  --hot: #6b8cff;
-  --good: #3ddc97;
-  --bad: #ff6b6b;
-  --human: #ffc53d;
-  --radius: 18px;
-  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
-  --display: "Bricolage Grotesque", Inter, system-ui, sans-serif;
+  --bg: #0c0c0e; --bar: #111113; --panel: #151517; --cell: #19191c;
+  --line: #2a2a2e; --line-2: #3a3a3f; --text: #f4f4f5; --muted: #8a8a92; --dim: #5c5c63;
+  --accent: #ff5a14; --accent-2: #ff7a3d; --good: #2fbf71; --bad: #ff4d4d;
+  --human: #ff5a14; --topbar: 64px;
+  --sans: "Inter Tight", Inter, system-ui, -apple-system, sans-serif;
   --mono: "JetBrains Mono", ui-monospace, monospace;
 }
-
 * { box-sizing: border-box; }
-html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
-  font-family: Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
-button, input { font: inherit; }
-.muted { color: var(--muted); }
-.small { font-size: 12px; }
+html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans);
+  -webkit-font-smoothing: antialiased; }
+button, input, select { font: inherit; color: inherit; }
+a { color: inherit; }
 .hidden { display: none !important; }
-.error { color: var(--bad); font-size: 14px; font-weight: 600; }
+.muted { color: var(--muted); }
+.error { color: var(--bad); font-size: 14px; }
+svg.i { width: 15px; height: 15px; vertical-align: -2px; flex: none; }
+
+/* ---------- top bar ---------- */
+.topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar); z-index: 40; display: flex; align-items: center;
+  justify-content: space-between; background: var(--bar); border-bottom: 1px solid #1e1e21; padding-right: 32px; }
+.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; font-size: 22px; font-weight: 500; }
+.brand .logo { width: var(--topbar); height: var(--topbar); background: var(--accent); display: grid; place-items: center; }
+.brand .logo svg { width: 34px; height: 34px; color: #2a0d00; }
+.topbar nav { display: flex; align-items: center; gap: 26px; font-size: 18px; }
+.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; color: var(--text);
+  display: inline-flex; align-items: center; gap: 6px; }
+.link:hover { color: var(--accent-2); }
+.link.accent { color: var(--accent); }
+.nav-user { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
 
-/* ---------- screens ---------- */
-.screen { display: none; position: fixed; inset: 0; }
+.screen { display: none; position: fixed; inset: var(--topbar) 0 0 0; overflow: hidden; }
 .screen.active { display: block; }
-#lobby, #final { overflow-y: auto;
-  background: radial-gradient(1200px 600px at 20% -10%, #1d2a52 0%, transparent 60%),
-              radial-gradient(900px 500px at 110% 110%, #3a2a0a 0%, transparent 55%),
-    var(--bg); }
+#lobby, #final { overflow-y: auto; }
 
 /* ---------- buttons ---------- */
-.btn { border: 1px solid var(--line); background: rgba(255,255,255,.07); color: var(--text);
-  padding: 10px 16px; border-radius: 12px; cursor: pointer; font-weight: 700; transition: transform .08s, filter .15s, background .15s; }
-.btn:hover:not(:disabled) { background: rgba(255,255,255,.13); }
-.btn:disabled { opacity: .45; cursor: not-allowed; }
-.btn.primary { background: var(--accent); color: var(--accent-ink); border: 0;
-  box-shadow: 0 5px 0 var(--accent-deep), 0 10px 24px rgba(255, 197, 61, .25);
-  font-family: var(--display); text-transform: uppercase; letter-spacing: .6px; }
-.btn.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--accent); }
-.btn.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep); }
-.btn.primary:disabled { box-shadow: 0 5px 0 var(--accent-deep); }
-.btn.big { padding: 16px 38px; font-size: 20px; border-radius: 16px; }
-.btn.small { padding: 6px 10px; font-size: 13px; }
-.btn.ghost { background: var(--panel); backdrop-filter: blur(8px); }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent;
+  border-radius: 0; padding: 16px 22px; font-size: 18px; font-weight: 500; cursor: pointer; text-decoration: none;
+  transition: background .12s, border-color .12s, opacity .12s; }
+.btn:disabled { cursor: not-allowed; opacity: .55; }
+.btn.primary { background: var(--accent); color: #fff; }
+.btn.primary:not(:disabled):hover { background: var(--accent-2); }
+.btn.dark { background: rgba(17,17,19,.92); color: var(--text); border-color: var(--line); }
+.btn.dark:not(:disabled):hover { border-color: var(--line-2); background: #1a1a1d; }
+.btn.small { padding: 8px 12px; font-size: 14px; }
+.btn.nudge { animation: nudge .5s 2; border-color: var(--accent); }
+@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
 
 /* ---------- avatars ---------- */
-.avatar { --s: 30px; width: var(--s); height: var(--s); flex: none; border-radius: 50%;
-  display: inline-grid; place-items: center; background: var(--c, #666); color: #fff;
-  font-family: var(--display); font-weight: 800; font-size: calc(var(--s) * .46); line-height: 1;
-  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 12px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
-.avatar.human { color: var(--accent-ink); text-shadow: none; }
-.avatar.pic { background: #fff; overflow: hidden; }
+.avatar { --s: 28px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center;
+  background: var(--c, #444); color: #fff; font-weight: 600; font-size: calc(var(--s) * .5); line-height: 1;
+  border-radius: 4px; overflow: hidden; }
+.avatar.pic { background: #fff; }
 .avatar.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.avatar.sm { --s: 22px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
-.avatar.lg { --s: 56px; }
-.avatar.xl { --s: 96px; box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(255, 197, 61, .25), 0 12px 40px rgba(255, 197, 61, .35); }
+.avatar.human { background: var(--human); }
+.avatar.sm { --s: 22px; }
+.avatar.md { --s: 40px; }
+.avatar.lg { --s: 48px; }
+.avatar.xl { --s: 88px; }
 
 /* ---------- lobby ---------- */
-.lobby-wrap { max-width: 1180px; margin: 0 auto; padding: 44px 24px 64px; }
-.marquee { text-align: center; margin-bottom: 34px; }
-.eyebrow { display: inline-block; font-family: var(--display); font-weight: 800; text-transform: uppercase;
-  letter-spacing: 3px; font-size: 13px; padding: 7px 16px; border-radius: 999px;
-  background: rgba(255,255,255,.07); border: 1px solid var(--line); }
-.marquee h1 { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 7.5vw, 92px);
-  line-height: .95; margin: 20px 0 16px; letter-spacing: -2px; text-transform: uppercase; }
-.marquee h1 .you { color: var(--accent); text-shadow: 0 0 40px rgba(255, 197, 61, .35); }
-.marquee h1 .vs { display: inline-block; font-size: .45em; vertical-align: middle; margin: 0 .2em;
-  padding: .12em .4em; border-radius: 12px; background: #fff; color: var(--bg); transform: rotate(-6deg) translateY(-.15em); }
-.marquee h1 .them { color: var(--text); }
-.marquee p { max-width: 640px; margin: 0 auto; color: var(--muted); line-height: 1.6; font-size: 17px; }
+.lobby-wrap { max-width: 1700px; margin: 0 auto; padding: 0 56px 64px; }
+.hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 48px; padding: 22px 56px 28px;
+  margin: 0 -56px; border-bottom: 1px solid #1e1e21;
+  background-image: linear-gradient(90deg, #1b1b1e 1px, transparent 1px); background-size: 130px 100%; }
+.hero h1 { margin: 0; font-size: clamp(54px, 6.4vw, 92px); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
+.hero h1 .vs { color: var(--accent); }
+.hero p { margin: 0; max-width: 660px; font-size: 15px; line-height: 1.35; color: #d8d8dc; }
 
-.versus { display: grid; grid-template-columns: 320px 64px 1fr; align-items: stretch; }
-@media (max-width: 900px) {
-  .versus { grid-template-columns: 1fr; gap: 0; }
-  .versus .vs-badge { margin: -14px auto; }
-}
-.corner { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 24px;
-  box-shadow: var(--shadow); position: relative; }
-.player-corner { border-top: 4px solid var(--accent); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
-.machine-corner { border-top: 4px solid var(--hot); }
-.corner-label { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
-  font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; width: 100%; }
-.player-corner .corner-label { justify-content: center; }
-.count { color: var(--hot); }
-.vs-badge { align-self: center; justify-self: center; z-index: 2; width: 72px; height: 72px; border-radius: 50%;
-  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 26px;
-  background: var(--accent); color: var(--accent-ink);
-  box-shadow: 0 0 0 6px var(--bg), 0 10px 30px rgba(255, 197, 61, .35); transform: rotate(-8deg); }
+.lobby-grid { display: grid; grid-template-columns: minmax(380px, 540px) 1fr; gap: 64px; margin-top: 56px; align-items: start; }
+.game-col { display: flex; flex-direction: column; gap: 12px; }
 
-.name-input { width: 100%; text-align: center; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line);
-  background: rgba(0,0,0,.3); color: var(--text); font-family: var(--display); font-weight: 700; font-size: 20px; }
-.name-input:focus { outline: none; border-color: var(--accent); }
-.field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: -6px; }
-.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.3);
-  border: 1px solid var(--line); width: 100%; }
-.segmented button { flex: 1; padding: 9px; border-radius: 10px; border: 0; background: transparent;
-  color: var(--muted); cursor: pointer; text-transform: capitalize; font-weight: 700; }
-.segmented button:hover { color: var(--text); }
-.segmented button.on { background: var(--accent); color: var(--accent-ink); }
-.rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
-.chip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07);
-  border: 1px solid var(--line); color: var(--muted); }
-.chip b { color: var(--text); }
-.hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }
+.panel { background: var(--panel); border: 1px solid #202023; }
+.panel-head { display: flex; align-items: center; height: 64px; border-bottom: 1px solid #202023; padding-right: 24px; }
+.panel-head .ico { width: 64px; height: 64px; background: var(--accent); display: grid; place-items: center; flex: none;
+  margin: -1px 0 -1px -1px; }
+.panel-head .ico svg { width: 32px; height: 32px; color: #1a0800; }
+.panel-head h2 { margin: 0 0 0 30px; font-size: 22px; font-weight: 500; }
+.panel-head .count { margin-left: auto; font-size: 18px; }
+.panel-body { padding: 40px 40px 28px; }
 
-.hf-auth { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); width: 100%;
-  display: flex; flex-direction: column; align-items: center; gap: 8px; }
-.hf-auth .hint { margin: 0; font-size: 12px; }
-.btn.hf { display: block; width: 100%; text-decoration: none; background: #fff; color: #111; border: 0; }
-.btn.hf:hover { background: #f1f1f1; }
-.btn.hf.nudge { animation: nudge .5s 2; box-shadow: 0 0 0 4px rgba(255, 197, 61, .6); }
-@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
-.hf-user { display: flex; align-items: center; gap: 9px; font-size: 14px; }
-.hf-user img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
-.hf-out { font-size: 12px; color: var(--muted); }
-.hf-out:hover { color: var(--text); }
+.player-row { display: flex; align-items: center; gap: 14px; background: var(--cell); border: 1px solid #222226; padding: 18px 20px; }
+.player-row input { flex: 1; min-width: 0; background: none; border: 0; font-size: 17px; outline: none; padding: 4px 0;
+  border-bottom: 1px solid transparent; }
+.player-row input:focus { border-bottom-color: var(--accent); }
+.player-row .link { font-size: 16px; }
+.player-row .link.muted { color: var(--muted); }
+.player-row .link.muted:hover { color: var(--text); }
 
-.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-top: 16px; }
-.fighter { position: relative; border: 2px solid var(--line); border-radius: 18px; padding: 14px 10px 12px;
-  background: rgba(0,0,0,.22); cursor: pointer; text-align: center; transition: transform .12s, border-color .12s, background .12s;
-  display: flex; flex-direction: column; align-items: center; gap: 8px; }
-.fighter:hover:not(.disabled) { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
-.fighter .avatar { filter: grayscale(.85) brightness(.75); transition: filter .12s; }
-.fighter.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, rgba(0,0,0,.2));
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 10px 26px color-mix(in srgb, var(--c) 25%, transparent); }
-.fighter.on .avatar { filter: none; }
-.fighter.disabled { opacity: .35; cursor: not-allowed; }
-.fighter.locked { opacity: .6; }
-.fighter.locked:hover { transform: none; border-color: var(--line); }
-.fighter.hf .ftag { color: var(--accent); }
-.fighter .fname { font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.15; }
-.fighter .ftag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
-.fighter.byok .ftag { color: var(--accent); }
-.fighter .check { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%;
-  border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: transparent; }
-.fighter.on .check { background: var(--c); border-color: var(--c); color: #fff; }
-.fighter input { width: 100%; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); text-align: center;
-  background: rgba(0,0,0,.4); color: var(--text); font-size: 12px; font-family: var(--mono); }
-.fighter input:focus { outline: none; border-color: var(--c); }
-.fighter select { width: 100%; margin-top: 6px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line);
-  background: rgba(0,0,0,.4); color: var(--text); font-size: 11.5px; font-family: var(--mono); text-overflow: ellipsis; }
-.fighter select:focus { outline: none; border-color: var(--c); }
+.panel .label { font-size: 22px; font-weight: 500; margin: 40px 0 12px; }
+.segmented { display: flex; gap: 8px; background: var(--cell); border: 1px solid #222226; padding: 12px; }
+.segmented button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px;
+  border: 0; background: none; color: var(--muted); font-size: 21px; cursor: pointer; text-transform: capitalize; }
+.segmented button svg { width: 30px; height: 30px; }
+.segmented button.on { background: var(--accent); color: #fff; }
+.segmented button:not(.on):hover { color: var(--text); }
+.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
+.stat { background: var(--cell); border: 1px solid #222226; padding: 16px 6px 12px; text-align: center; }
+.stat b { display: block; font-size: 38px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
+.stat small { color: var(--muted); font-size: 15px; }
+.note { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 14px; line-height: 1.25; margin: 28px 0 0; }
+.note .i { margin-top: 1px; }
+.cta { display: flex; flex-direction: column; gap: 12px; }
+.cta .btn { width: 100%; }
 
-.lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 34px; }
+.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+.fighter { position: relative; background: #121214; border: 1px solid #222226; padding: 18px 20px 16px; cursor: pointer;
+  display: flex; flex-direction: column; align-items: flex-start; min-height: 168px; transition: border-color .12s, background .12s; }
+.fighter:hover { border-color: color-mix(in srgb, var(--c) 60%, #222226); }
+.fighter.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #121214); }
+.fighter .avatar { margin-bottom: 14px; }
+.fighter .fname { font-size: 18px; font-weight: 500; padding-right: 24px; word-break: break-word; }
+.fighter .org { color: var(--muted); font-size: 15px; margin-top: 2px; }
+.fighter .tag { margin-top: 8px; border: 1px solid #2c2c31; background: #19191c; padding: 3px 7px; font-size: 15px; }
+.fighter .mark { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%;
+  border: 2px solid var(--c); display: grid; place-items: center; }
+.fighter .mark svg { width: 13px; height: 13px; color: #111; opacity: 0; }
+.fighter.on .mark { background: var(--c); }
+.fighter.on .mark svg { opacity: 1; }
+.fighter .lock { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; color: var(--dim); display: none; }
+.fighter.locked { background: #151517; border-color: #1c1c1f; }
+.fighter.locked .avatar { filter: grayscale(1) brightness(.55); }
+.fighter.locked .fname, .fighter.locked .org, .fighter.locked .tag { color: var(--dim); }
+.fighter.locked .mark { display: none; }
+.fighter.locked .lock { display: block; }
+.fighter .keyline { color: var(--accent); font-size: 15px; margin-top: 2px; }
+.fighter .paste { margin-top: 8px; border: 1px solid #2c2c31; background: #19191c; padding: 3px 7px; font-size: 15px;
+  color: var(--text); cursor: pointer; }
+.fighter .paste:hover { border-color: var(--accent); }
+.fighter input, .fighter select { width: 100%; margin-top: 8px; padding: 7px 9px; border: 1px solid #2c2c31; border-radius: 0;
+  background: #0d0d0f; color: var(--text); font-size: 12.5px; font-family: var(--mono); }
+.fighter input:focus, .fighter select:focus { outline: none; border-color: var(--accent); }
 
 /* ---------- play ---------- */
-#pano { position: absolute; inset: 0; background: #000; }
-.scoreboard { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex;
-  align-items: stretch; background: var(--panel); backdrop-filter: blur(12px); border: 1px solid var(--line);
-  border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
-.scoreboard .cell { padding: 8px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
-.scoreboard .cell small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
-.scoreboard .cell b { font-family: var(--display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
-.scoreboard .timer { background: rgba(0,0,0,.35); font-family: var(--mono); font-weight: 700; font-size: 28px;
-  color: var(--accent); min-width: 128px; text-align: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
-  display: grid; place-items: center; padding: 0 20px; }
+#pano { position: absolute; inset: 0; }
+.return { position: absolute; top: 32px; left: 34px; z-index: 5; padding: 14px 20px; font-size: 17px; }
+.scoreboard { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: stretch;
+  gap: 12px; background: rgba(17,17,19,.94); padding: 12px; }
+.scoreboard .cell { min-width: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 14px; }
+.scoreboard .cell b { font-size: 36px; font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+.scoreboard .cell small { font-size: 15px; text-transform: uppercase; margin-top: 3px; }
+.scoreboard .round { background: #505055; color: #e9e9ec; }
+.scoreboard .score { background: var(--accent); color: #fff; }
+.scoreboard .timer { min-width: 130px; display: grid; place-items: center; font-size: 40px; font-weight: 500;
+  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
 .scoreboard .timer.warn { color: var(--bad); animation: pulse 1s infinite; }
-@keyframes pulse { 50% { opacity: .5; } }
-.return { position: absolute; top: 14px; left: 14px; z-index: 5; }
+@keyframes pulse { 50% { opacity: .45; } }
 
-.rivals { position: absolute; top: 14px; right: 14px; width: 290px; z-index: 5; background: var(--panel);
-  backdrop-filter: blur(12px); border: 1px solid var(--line); border-top: 3px solid var(--hot); border-radius: var(--radius);
-  box-shadow: var(--shadow); padding: 12px 14px; max-height: calc(100vh - 320px); overflow-y: auto; }
-.rivals-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 800;
-  text-transform: uppercase; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 6px; }
-.live { font-family: Inter, sans-serif; font-size: 10px; letter-spacing: 1px; color: var(--hot); display: flex; align-items: center; gap: 5px; }
-.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); animation: pulse 1.2s infinite; }
-.rival { padding: 10px 0; border-top: 1px solid var(--line); }
-.rival:first-of-type { border-top: 0; }
-.rival .row { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
-.rival .status { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
-  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); }
-.rival .status.thinking::after { content: "…"; animation: pulse 1s infinite; }
-.rival .status.locked { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
-.rival .status.out, .rival .status.error { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
-.bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); margin: 8px 0 5px; overflow: hidden; }
-.bar > i { display: block; height: 100%; background: var(--c); width: 0; transition: width .4s; border-radius: 5px; }
-.rival .last { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.rival .last.flash { animation: flash .8s; }
+.rivals { position: absolute; top: 32px; right: 54px; width: 362px; z-index: 5; background: rgba(17,17,19,.95);
+  padding: 20px 20px 8px; max-height: calc(100vh - var(--topbar) - 470px); min-height: 120px; overflow-y: auto; }
+.rivals-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; text-transform: uppercase; margin-bottom: 6px; }
+.live { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; text-transform: none; }
+.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; }
+.live i:first-child { animation: pulse 1.4s infinite; }
+.rival { padding: 16px 0 14px; }
+.rival .row { display: flex; align-items: center; gap: 12px; font-size: 17px; }
+.rival .row .avatar { --s: 30px; }
+.rival .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rival .status { margin-left: auto; font-size: 14px; padding: 2px 6px; background: var(--c); color: #fff; white-space: nowrap; }
+.rival .status.locked { background: var(--good); color: #04220f; }
+.rival .status.out, .rival .status.error { background: var(--bad); color: #fff; }
+.bar { height: 5px; background: #4a4a50; margin: 12px 0 10px; }
+.bar > i { display: block; height: 100%; background: var(--c); width: 0; transition: width .4s; }
+.rival .last { display: flex; gap: 7px; align-items: center; font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
+.rival .last span { overflow: hidden; text-overflow: ellipsis; }
+.rival .last.flash span { animation: flash .8s; }
 @keyframes flash { from { color: var(--text); } }
-/* After the human locks in: the panel widens and shows each agent's reasoning. */
+
+/* After the human locks in, the panel widens into a live trace with pictures. */
 .rival .feed { display: none; }
-.rivals.unlocked { width: 400px; max-height: calc(100vh - 100px); border-top-color: var(--accent); }
-.rivals.unlocked .live { color: var(--accent); }
-.rivals.unlocked .live::before { background: var(--accent); }
-.rivals.unlocked .feed { display: block; max-height: 260px; overflow-y: auto; margin-top: 6px; padding-left: 10px;
+.rivals.unlocked { width: 460px; max-height: calc(100vh - var(--topbar) - 64px); }
+.rivals.unlocked #live-mode { color: var(--accent); }
+.rivals.unlocked .live i:nth-of-type(2) { background: var(--accent); }
+.rivals.unlocked .feed { display: block; max-height: 380px; overflow-y: auto; margin-top: 4px; padding-left: 12px;
   border-left: 2px solid var(--c); }
-.thought { padding: 6px 0; font-size: 12.5px; line-height: 1.45; border-top: 1px dashed var(--line); }
+.thought { padding: 8px 0; font-size: 13px; line-height: 1.45; border-top: 1px solid #222226; }
 .thought:first-child { border-top: 0; }
+.thought .tl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
 .thought .text { white-space: pre-wrap; }
-.thought details summary { cursor: pointer; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
+.thought.tool .text, .thought.start .text { color: var(--muted); font-size: 12px; }
+.thought details summary { cursor: pointer; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
 .thought .thinking { white-space: pre-wrap; color: var(--muted); font-size: 12px; margin: 4px 0; }
-.thought .call { display: inline-block; margin: 4px 4px 0 0; }
+.thought img { display: block; width: 100%; margin-top: 6px; cursor: zoom-in; border: 1px solid #2c2c31; }
 
-.guess-box { position: absolute; right: 14px; bottom: 14px; z-index: 6; width: 320px; transition: width .25s, opacity .25s;
-  opacity: .85; display: flex; flex-direction: column; gap: 10px; }
-.guess-box:hover, .guess-box.pinned { width: min(640px, 60vw); opacity: 1; }
-#guess-map { height: 210px; border-radius: var(--radius); overflow: hidden; border: 3px solid rgba(255,255,255,.9);
-  box-shadow: var(--shadow); transition: height .25s; }
-.guess-box:hover #guess-map, .guess-box.pinned #guess-map { height: min(440px, 52vh); }
-#guess-btn { width: 100%; padding: 14px; font-size: 18px; }
+.guess-box { position: absolute; right: 54px; bottom: 48px; z-index: 6; width: 362px; display: flex; flex-direction: column;
+  gap: 12px; transition: width .25s; }
+.guess-box:hover, .guess-box.pinned { width: min(640px, 56vw); }
+#guess-map { height: 318px; border: 1px solid rgba(255,255,255,.15); transition: height .25s; opacity: .9; }
+.guess-box:hover #guess-map, .guess-box.pinned #guess-map { height: min(460px, 52vh); opacity: 1; }
+#guess-btn { width: 100%; padding: 16px; font-size: 22px; }
+.guess-box.pinned #guess-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
 
-.locked-banner { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 7;
-  background: var(--panel); backdrop-filter: blur(10px); border: 2px solid var(--good); color: var(--text);
-  padding: 13px 24px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 700; white-space: nowrap; }
-
-@media (max-width: 760px) {
-  .scoreboard { top: 10px; }
-  .scoreboard .cell { padding: 6px 12px; }
-  .scoreboard .timer { min-width: 96px; font-size: 22px; padding: 0 12px; }
-  .return { top: auto; bottom: 14px; left: 14px; }
-  .rivals { top: 76px; left: 10px; right: auto; width: 200px; max-height: 34vh; padding: 8px 10px; }
-  .rival .last { display: none; }
-  .rivals.unlocked { width: calc(100vw - 20px); max-height: 60vh; }
-  .guess-box, .guess-box:hover, .guess-box.pinned { width: calc(100vw - 20px); right: 10px; bottom: 10px; }
-  .guess-box:not(.pinned) #guess-map { height: 150px; }
-}
+.locked-banner { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 7;
+  background: rgba(17,17,19,.95); border-left: 4px solid var(--accent); padding: 16px 24px; font-size: 17px; white-space: nowrap; }
 
 /* ---------- reveal ---------- */
-#reveal-map { position: absolute; left: 0; top: 0; bottom: 0; right: 460px; }
-.reveal-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 460px; background: var(--panel-solid);
-  border-left: 1px solid var(--line); display: flex; flex-direction: column; }
-@media (max-width: 900px) {
-  #reveal-map { right: 0; bottom: 55vh; }
-  .reveal-panel { width: 100%; top: 45vh; border-left: 0; border-top: 1px solid var(--line); }
-}
-.reveal-head { padding: 22px 22px 14px; background: linear-gradient(180deg, var(--panel-2), transparent); }
-.reveal-head .eyebrow { font-size: 11px; padding: 5px 12px; }
-.reveal-head h2 { font-family: var(--display); font-weight: 800; margin: 12px 0 6px; font-size: 30px; line-height: 1.1; letter-spacing: -.5px; }
+#reveal-map { position: absolute; left: 0; top: 0; bottom: 0; right: 500px; }
+.reveal-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 500px; background: var(--panel);
+  border-left: 1px solid #202023; display: flex; flex-direction: column; }
+.eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
+.reveal-head { padding: 28px 28px 18px; border-bottom: 1px solid #202023; }
+.reveal-head h2 { font-weight: 500; margin: 10px 0 6px; font-size: 36px; line-height: 1.05; letter-spacing: -.02em; }
 .reveal-head h2 em { font-style: normal; color: var(--accent); }
-#round-table, #replay { flex: 1; overflow-y: auto; padding: 4px 14px 10px; }
-.reveal-actions { padding: 16px 22px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
+#round-table, #replay { flex: 1; overflow-y: auto; padding: 14px 20px; }
+.reveal-actions { padding: 16px 20px 20px; border-top: 1px solid #202023; }
 .reveal-actions .btn { width: 100%; }
 
-.lb { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
-.lb th { text-align: left; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px;
-  font-weight: 700; padding: 4px 10px; }
-.lb td { padding: 10px; background: rgba(255,255,255,.04); }
-.lb td:first-child { border-radius: 12px 0 0 12px; }
-.lb td:last-child { border-radius: 0 12px 12px 0; }
+.lb { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 15px; }
+.lb th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
+  font-weight: 500; padding: 2px 12px; }
+.lb td { padding: 12px; background: var(--cell); border-top: 1px solid #222226; border-bottom: 1px solid #222226; }
+.lb td:first-child { border-left: 1px solid #222226; }
+.lb td:last-child { border-right: 1px solid #222226; }
 .lb tr.clickable { cursor: pointer; }
-.lb tr.clickable:hover td { background: rgba(255,255,255,.08); }
-.lb tr.me td { background: color-mix(in srgb, var(--human) 14%, transparent); }
-.lb tr.me td:first-child { box-shadow: inset 3px 0 0 var(--human); }
-.lb .rank { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--muted); width: 36px; text-align: center; }
-.lb tr:nth-child(1) .rank { color: var(--accent); }
-.lb .pts { font-family: var(--display); font-weight: 800; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
-.lb .who { display: flex; align-items: center; gap: 9px; font-weight: 700; }
-.lb .sub { font-size: 12px; color: var(--muted); font-weight: 500; font-family: Inter, sans-serif; }
-.lb .chev { color: var(--muted); text-align: right; width: 22px; font-size: 18px; }
+.lb tr.clickable:hover td { border-color: var(--line-2); background: #1e1e21; }
+.lb tr.me td { background: color-mix(in srgb, var(--accent) 10%, var(--cell)); }
+.lb tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
+.lb .rank { font-size: 20px; color: var(--muted); width: 40px; text-align: center; }
+.lb tbody tr:first-child .rank { color: var(--accent); }
+.lb .pts { font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }
+.lb .who { display: flex; align-items: center; gap: 10px; }
+.lb .sub { font-size: 13px; color: var(--muted); }
+.lb .chev { text-align: right; width: 70px; }
+.lb .chev span { font-size: 12px; border: 1px solid #2c2c31; padding: 3px 7px; color: var(--muted); white-space: nowrap; }
+.lb tr.clickable:hover .chev span { color: var(--text); border-color: var(--accent); }
 
-.replay-head { display: flex; align-items: center; gap: 10px; padding: 8px 4px 12px; position: sticky; top: -4px;
-  background: var(--panel-solid); z-index: 1; }
-.replay-head b { display: flex; align-items: center; gap: 8px; }
-.step { border-left: 2px solid var(--line); margin: 0 0 0 8px; padding: 2px 0 16px 18px; position: relative; }
-.step::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
-  background: var(--c, var(--muted)); box-shadow: 0 0 0 3px var(--panel-solid); }
-.step .label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 4px; }
-.step .text { white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
+.replay-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; position: sticky; top: -14px;
+  background: var(--panel); z-index: 1; }
+.replay-head b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 17px; }
+.step { border-left: 2px solid #2c2c31; margin: 0 0 0 6px; padding: 0 0 18px 18px; position: relative; }
+.step::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; background: var(--c, var(--dim)); }
+.step .tl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
+.step .text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
 .step details { margin-top: 6px; }
 .step summary { cursor: pointer; font-size: 12px; color: var(--muted); }
-.step .thinking { white-space: pre-wrap; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
-.call { display: inline-block; font-family: var(--mono); font-size: 12px; background: rgba(255,255,255,.07);
-  border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; margin: 5px 4px 0 0; }
-.step img { display: block; width: 100%; border-radius: 12px; margin-top: 8px; cursor: zoom-in; border: 1px solid var(--line); }
-.verdict { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--muted));
-  border-radius: 14px; padding: 14px; margin: 4px 0 16px; font-size: 14px; }
+.step .thinking { white-space: pre-wrap; font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
+.call { display: inline-block; font-family: var(--mono); font-size: 12px; background: #1e1e21; border: 1px solid #2c2c31;
+  padding: 3px 8px; margin: 6px 4px 0 0; word-break: break-all; }
+.step img { display: block; width: 100%; margin-top: 8px; cursor: zoom-in; border: 1px solid #2c2c31; }
+.verdict { background: var(--cell); border: 1px solid #222226; border-left: 4px solid var(--c, var(--dim)); padding: 16px;
+  margin: 0 0 18px; font-size: 15px; }
 
 /* ---------- final ---------- */
-.final-wrap { max-width: 780px; margin: 0 auto; padding: 56px 24px; text-align: center; }
-.final-wrap h1 { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 7vw, 68px); margin: 18px 0 10px;
-  letter-spacing: -1.5px; text-transform: uppercase; line-height: 1; }
-.final-wrap > p { font-size: 17px; }
-.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 44px 0 28px; }
-.podium .place { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
-.podium .nm { font-family: var(--display); font-weight: 800; font-size: 16px; }
-.podium .block { width: 100%; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; align-items: center;
-  justify-content: flex-start; padding-top: 14px; gap: 4px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, var(--panel-2)), var(--panel-solid));
-  border: 1px solid var(--line); border-bottom: 0; }
-.podium .block .n { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; }
-.podium .block .pts { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
-.podium .p1 .block { height: 190px; }
+.final-wrap { max-width: 820px; margin: 0 auto; padding: 56px 24px; text-align: center; }
+.final-wrap h1 { font-weight: 500; font-size: clamp(44px, 7vw, 80px); margin: 14px 0 10px; letter-spacing: -.035em; line-height: 1; }
+.final-wrap > p { font-size: 18px; }
+.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 48px 0 28px; }
+.podium .place { width: 190px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.podium .nm { font-size: 17px; }
+.podium .block { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 16px; gap: 4px;
+  background: var(--panel); border: 1px solid #222226; border-top: 4px solid var(--c); }
+.podium .p1 .block { height: 190px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); }
 .podium .p2 .block { height: 140px; }
 .podium .p3 .block { height: 105px; }
+.podium .block .n { font-size: 48px; line-height: 1; }
+.podium .block .pts { color: var(--muted); font-variant-numeric: tabular-nums; }
 #final-table { text-align: left; margin-bottom: 32px; }
+#again-btn { min-width: 320px; }
 
 /* ---------- overlays ---------- */
-.loading { position: fixed; inset: 0; background: rgba(5, 8, 15, .8); backdrop-filter: blur(6px); z-index: 50; display: flex;
-  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
-  font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
-.spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.12);
-  border-top-color: var(--accent); border-right-color: var(--hot); animation: spin .8s linear infinite; }
+.loading { position: fixed; inset: 0; background: rgba(8,8,10,.82); backdrop-filter: blur(4px); z-index: 50; display: flex;
+  flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-size: 20px; }
+.spinner { width: 46px; height: 46px; border: 4px solid #2a2a2e; border-top-color: var(--accent); border-radius: 50%;
+  animation: spin .8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 60; display: flex; align-items: center;
+.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 60; display: flex; align-items: center;
   justify-content: center; cursor: zoom-out; }
-.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 14px; }
+.lightbox img { max-width: 92vw; max-height: 92vh; }
+.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 55; display: grid; place-items: center; padding: 20px; }
+.modal-card { width: min(640px, 100%); background: var(--panel); border: 1px solid #222226; }
+.modal-card .panel-body { padding: 28px 32px; font-size: 16px; line-height: 1.5; color: #d8d8dc; }
+.modal-card ul { padding-left: 20px; margin: 0; }
+.modal-card li { margin-bottom: 8px; }
+
+/* ---------- small screens ---------- */
+@media (max-width: 1100px) {
+  .lobby-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
+  .hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
+}
+@media (max-width: 1000px) {
+  #reveal-map { right: 0; bottom: 55vh; }
+  .reveal-panel { width: 100%; top: 45vh; border-left: 0; border-top: 1px solid #202023; }
+}
+@media (max-width: 760px) {
+  :root { --topbar: 56px; }
+  .topbar { padding-right: 14px; }
+  .brand { font-size: 18px; }
+  .topbar nav { gap: 14px; font-size: 15px; }
+  #nav-rules, #nav-traces { display: none; }
+  .lobby-wrap { padding: 0 16px 40px; }
+  .hero { margin: 0 -16px; padding: 18px 16px; }
+  .panel-body { padding: 22px 16px; }
+  .stats { grid-template-columns: repeat(2, 1fr); }
+  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .return { top: auto; bottom: 14px; left: 10px; padding: 10px 12px; font-size: 14px; }
+  .scoreboard { top: 10px; padding: 6px; gap: 6px; }
+  .scoreboard .cell { min-width: 64px; padding: 4px 8px; }
+  .scoreboard .cell b { font-size: 22px; }
+  .scoreboard .cell small { font-size: 11px; }
+  .scoreboard .timer { min-width: 80px; font-size: 26px; }
+  .rivals { top: 90px; left: 10px; right: auto; width: 220px; max-height: 32vh; padding: 10px 12px; }
+  .rival .last { display: none; }
+  .rivals.unlocked { width: calc(100vw - 20px); max-height: 55vh; }
+  .guess-box, .guess-box:hover, .guess-box.pinned { width: calc(100vw - 20px); right: 10px; bottom: 10px; }
+  .guess-box:not(.pinned) #guess-map { height: 150px; }
+}