@sensiblestats/widget-react 0.50.0 → 0.50.2

package/dist/index.js

@@ -4172,6 +4172,13 @@ var ATTR_KEYS = [
   "shirtNumber",
   "apps"
 ];
+function verdictGlyph(v) {
+  if (v.verdict === "exact") return "\u2713";
+  if (v.verdict === "miss") return "\u2717";
+  if (v.direction === "up") return "\u2191";
+  if (v.direction === "down") return "\u2193";
+  return "\u2248";
+}
 function MysteryTigerGame({
   config,
   result,
@@ -4181,16 +4188,15 @@ function MysteryTigerGame({
   const [query, setQuery] = useState23("");
   const inputId = useId2();
   const clientState = parseClientState(result?.clientStateJson);
-  const alreadyGuessedIds = new Set(
-    clientState?.guessResults.map((g) => g.playerId) ?? []
-  );
+  const guessResults = clientState?.guessResults ?? [];
+  const alreadyGuessedIds = new Set(guessResults.map((g) => g.playerId));
   const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
   const filtered = config && !isOver ? config.squadPlayers.filter(
     (p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
   ) : [];
   function handleSelect(playerId) {
     if (!config || isOver || submitting) return;
-    const prevGuesses = clientState?.guessResults.map((g) => g.playerId) ?? [];
+    const prevGuesses = guessResults.map((g) => g.playerId);
     const newGuesses = [...prevGuesses, playerId];
     setQuery("");
     onSubmit(JSON.stringify({ guesses: newGuesses }));
@@ -4198,9 +4204,46 @@ function MysteryTigerGame({
   return /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt", "data-testid": "game-screen-mystery-tiger", children: [
     !config && /* @__PURE__ */ jsx55("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
     config && /* @__PURE__ */ jsxs49(Fragment9, { children: [
-      isOver && clientState && /* @__PURE__ */ jsxs49("div", { className: `ss-w-gt-banner ss-w-gt-banner--${clientState.solved ? "solved" : "failed"}`, children: [
-        /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-banner-label", children: clientState.solved ? "\u{1F42F} You found them!" : "\u{1F614} Better luck tomorrow" }),
-        clientState.revealedPlayerName && /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName })
+      /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-head", children: [
+        /* @__PURE__ */ jsxs49("div", { children: [
+          /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-title", children: "Mystery Tiger" }),
+          /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-sub", children: "Guess today's squad player" })
+        ] }),
+        clientState && !isOver && /* @__PURE__ */ jsxs49("span", { className: "ss-w-gt-left", children: [
+          clientState.guessesRemaining,
+          " left"
+        ] })
+      ] }),
+      guessResults.length > 0 && /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrows", children: guessResults.map((gr, i) => {
+        const player = config.squadPlayers.find((p) => p.id === gr.playerId);
+        return /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtguess", children: [
+          /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtguess-nm", children: [
+            i + 1,
+            " \xB7 ",
+            player?.name ?? `#${gr.playerId}`
+          ] }),
+          /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrow", children: ATTR_KEYS.map((key) => {
+            const v = gr[key];
+            return /* @__PURE__ */ jsxs49(
+              "div",
+              {
+                className: `ss-w-gtile ss-w-gtile--${v.verdict}`,
+                "data-testid": `verdict-${key}-${i}`,
+                "data-verdict": v.verdict,
+                "aria-label": `${ATTR_LABELS[key]}: ${v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
+                  /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: verdictGlyph(v) })
+                ]
+              },
+              key
+            );
+          }) })
+        ] }, gr.playerId);
+      }) }),
+      clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-hint", children: [
+        "\u{1F4A1} ",
+        clientState.hintLine
       ] }),
       !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtta", children: [
         /* @__PURE__ */ jsx55(
@@ -4235,38 +4278,15 @@ function MysteryTigerGame({
           p.id
         )) })
       ] }),
-      clientState && clientState.guessResults.length > 0 && /* @__PURE__ */ jsxs49("div", { children: [
-        /* @__PURE__ */ jsxs49("div", { className: "ss-w-gthdr", children: [
-          /* @__PURE__ */ jsx55("div", { className: "ss-w-gthdr-c ss-w-gthdr-c--name", children: "Player" }),
-          ATTR_KEYS.map((key) => /* @__PURE__ */ jsx55("div", { className: "ss-w-gthdr-c", children: ATTR_LABELS[key] }, key))
-        ] }),
-        /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrows", children: clientState.guessResults.map((gr, i) => {
-          const player = config.squadPlayers.find((p) => p.id === gr.playerId);
-          return /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtrow", children: [
-            /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrow-nm", children: player?.name ?? `#${gr.playerId}` }),
-            ATTR_KEYS.map((key) => {
-              const v = gr[key];
-              return /* @__PURE__ */ jsx55(
-                "div",
-                {
-                  className: `ss-w-gtile ss-w-gtile--${v.verdict}`,
-                  "data-testid": `verdict-${key}-${i}`,
-                  "data-verdict": v.verdict,
-                  "aria-label": `${ATTR_LABELS[key]}: ${v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
-                  children: v.direction && /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-dir", "aria-hidden": "true", children: v.direction === "up" ? "\u2191" : "\u2193" })
-                },
-                key
-              );
-            })
-          ] }, gr.playerId);
-        }) })
-      ] }),
-      clientState?.hintLine && !isOver && /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-hint", children: clientState.hintLine }),
-      !isOver && clientState && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-hint", children: [
-        clientState.guessesRemaining,
-        " guess",
-        clientState.guessesRemaining !== 1 ? "es" : "",
-        " remaining"
+      isOver && clientState && /* @__PURE__ */ jsxs49("div", { className: `ss-w-gt-banner ss-w-gt-banner--${clientState.solved ? "solved" : "failed"}`, children: [
+        /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-banner-label", children: clientState.solved ? "\u{1F42F} You found them!" : "\u{1F614} Out of guesses" }),
+        clientState.revealedPlayerName && /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName }),
+        /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-banner-sub", children: [
+          clientState.guessesUsed,
+          " guess",
+          clientState.guessesUsed === 1 ? "" : "es",
+          " \xB7 come back tomorrow"
+        ] })
       ] })
     ] })
   ] });
@@ -4282,22 +4302,6 @@ function parseClientState2(json) {
     return null;
   }
 }
-function AnsweredRow({
-  answered,
-  pair
-}) {
-  const cls = `ss-w-hlrrow ss-w-hlrrow--${answered.wasCorrect ? "correct" : "wrong"}`;
-  const icon = answered.wasCorrect ? "\u2713" : "\u2717";
-  return /* @__PURE__ */ jsxs50("div", { className: cls, children: [
-    /* @__PURE__ */ jsxs50("span", { className: "ss-w-hlrrow-names", children: [
-      pair?.playerAName ?? "?",
-      " vs ",
-      pair?.playerBName ?? "?"
-    ] }),
-    /* @__PURE__ */ jsx56("span", { className: "ss-w-hlrrow-pick", children: answered.pick }),
-    /* @__PURE__ */ jsx56("span", { className: "ss-w-hlrrow-icon", children: icon })
-  ] });
-}
 function HigherOrLowerGame({
   config,
   result,
@@ -4305,82 +4309,122 @@ function HigherOrLowerGame({
   onSubmit
 }) {
   const clientState = parseClientState2(result?.clientStateJson);
-  const answeredCount = clientState?.answeredPairs.length ?? 0;
-  const runEndedWrong = clientState?.answeredPairs.some((p) => !p.wasCorrect) ?? false;
+  const answeredPairs = clientState?.answeredPairs ?? [];
+  const answeredCount = answeredPairs.length;
+  const runEndedWrong = answeredPairs.some((p) => !p.wasCorrect);
   const allPairsAnswered = config != null && answeredCount >= config.pairs.length;
   const isOver = result?.alreadyPlayed === true || runEndedWrong || allPairsAnswered;
   const currentPair = config && !isOver ? config.pairs[answeredCount] ?? null : null;
+  const correctCount = answeredPairs.filter((p) => p.wasCorrect).length;
+  const score = clientState?.score ?? correctCount;
+  const runLength = clientState?.runLength ?? 0;
   function handlePick(pick) {
     if (!config || isOver || submitting || !currentPair) return;
-    const prevAnswers = clientState?.answeredPairs.map((p) => ({ pairIndex: p.pairIndex, pick: p.pick })) ?? [];
+    const prevAnswers = answeredPairs.map((p) => ({ pairIndex: p.pairIndex, pick: p.pick }));
     const newAnswers = [...prevAnswers, { pairIndex: currentPair.pairIndex, pick }];
     onSubmit(JSON.stringify({ answers: newAnswers }));
   }
   return /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl", "data-testid": "game-screen-higher-or-lower", children: [
     !config && /* @__PURE__ */ jsx56("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
     config && /* @__PURE__ */ jsxs50(Fragment10, { children: [
-      /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlctx", children: [
-        /* @__PURE__ */ jsx56("span", { className: "ss-w-hlctx-fam", children: config.statLabel }),
-        /* @__PURE__ */ jsx56("span", { className: "ss-w-hlctx-szn", children: config.seasonLabel })
+      /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-head", children: [
+        /* @__PURE__ */ jsxs50("div", { children: [
+          /* @__PURE__ */ jsx56("div", { className: "ss-w-hl-title", children: "Higher or Lower" }),
+          /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-sub", children: [
+            config.statLabel,
+            " \xB7 ",
+            config.seasonLabel
+          ] })
+        ] }),
+        runLength > 0 && !isOver && /* @__PURE__ */ jsxs50("span", { className: "ss-w-hl-streak", children: [
+          "\u{1F525} ",
+          runLength
+        ] })
       ] }),
-      currentPair && /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpair", children: [
-        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc", children: [
-          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: currentPair.playerAName }),
-          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val", children: currentPair.playerAValue })
+      currentPair && /* @__PURE__ */ jsxs50(Fragment10, { children: [
+        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-q", children: [
+          "Who has more ",
+          config.statLabel.toLowerCase(),
+          "?"
         ] }),
-        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
-          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: currentPair.playerBName }),
-          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val ss-w-hlpc-val--hidden", children: "?" })
+        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpair", children: [
+          /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc", children: [
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-av", "aria-hidden": "true", children: "\u26BD" }),
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: currentPair.playerAName }),
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-stat", children: config.statLabel }),
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val", children: currentPair.playerAValue })
+          ] }),
+          /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlbtns", children: [
+            /* @__PURE__ */ jsx56(
+              "button",
+              {
+                type: "button",
+                className: "ss-w-hlbtn ss-w-hlbtn--up",
+                disabled: submitting,
+                onClick: () => handlePick("higher"),
+                children: "Higher \u25B2"
+              }
+            ),
+            /* @__PURE__ */ jsx56("span", { className: "ss-w-hl-or", children: "or" }),
+            /* @__PURE__ */ jsx56(
+              "button",
+              {
+                type: "button",
+                className: "ss-w-hlbtn ss-w-hlbtn--dn",
+                disabled: submitting,
+                onClick: () => handlePick("lower"),
+                children: "Lower \u25BC"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-av", "aria-hidden": "true", children: "\u26BD" }),
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: currentPair.playerBName }),
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-stat", children: config.statLabel }),
+            /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val ss-w-hlpc-val--hidden", children: "?" })
+          ] })
         ] })
       ] }),
-      !isOver && currentPair && /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlbtns", children: [
-        /* @__PURE__ */ jsx56(
-          "button",
-          {
-            type: "button",
-            className: "ss-w-hlbtn",
-            disabled: submitting,
-            onClick: () => handlePick("higher"),
-            children: "Higher"
-          }
-        ),
-        /* @__PURE__ */ jsx56(
-          "button",
-          {
-            type: "button",
-            className: "ss-w-hlbtn",
-            disabled: submitting,
-            onClick: () => handlePick("lower"),
-            children: "Lower"
-          }
-        )
+      isOver && /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-over", children: [
+        /* @__PURE__ */ jsx56("div", { className: "ss-w-hl-over-title", children: runEndedWrong ? "Run over" : "Nice run!" }),
+        /* @__PURE__ */ jsx56("div", { className: "ss-w-hl-over-score", children: score }),
+        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-over-sub", children: [
+          correctCount,
+          " correct",
+          correctCount === 1 ? "" : "",
+          " \xB7 come back tomorrow for a new run"
+        ] })
       ] }),
-      clientState && clientState.answeredPairs.length > 0 && /* @__PURE__ */ jsx56("div", { className: "ss-w-hlresults", children: clientState.answeredPairs.map((answered) => {
+      answeredPairs.length > 0 && /* @__PURE__ */ jsx56("div", { className: "ss-w-hlresults", children: answeredPairs.map((answered) => {
         const pair = config.pairs.find((p) => p.pairIndex === answered.pairIndex);
-        const vCls = `ss-w-hlpc-val ss-w-hlpc-val--${answered.wasCorrect ? "correct" : "wrong"}`;
-        const badgeCls = `ss-w-hlpc-badge ss-w-hlpc-badge--${answered.wasCorrect ? "correct" : "wrong"}`;
-        return /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlrrow", children: [
-          /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpair", children: [
-            /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc", children: [
-              /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: pair?.playerAName ?? "?" }),
-              /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val", children: pair?.playerAValue })
-            ] }),
-            /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
-              /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: pair?.playerBName ?? "?" }),
-              /* @__PURE__ */ jsx56("div", { className: vCls, children: answered.playerBValue }),
-              /* @__PURE__ */ jsx56("div", { className: badgeCls, children: answered.wasCorrect ? "\u2713" : "\u2717" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx56(AnsweredRow, { answered, pair })
-        ] }, answered.pairIndex);
+        return /* @__PURE__ */ jsxs50(
+          "div",
+          {
+            className: `ss-w-hlrrow ss-w-hlrrow--${answered.wasCorrect ? "correct" : "wrong"}`,
+            children: [
+              /* @__PURE__ */ jsxs50("span", { className: "ss-w-hlrrow-names", children: [
+                pair?.playerAName ?? "?",
+                " ",
+                /* @__PURE__ */ jsx56("b", { className: "ss-w-hlrrow-val", children: pair?.playerAValue }),
+                " vs ",
+                pair?.playerBName ?? "?",
+                " ",
+                /* @__PURE__ */ jsx56("b", { className: "ss-w-hlrrow-val", children: answered.playerBValue })
+              ] }),
+              /* @__PURE__ */ jsx56("span", { className: "ss-w-hlrrow-pick", children: answered.pick }),
+              /* @__PURE__ */ jsx56("span", { className: "ss-w-hlrrow-icon", children: answered.wasCorrect ? "\u2713" : "\u2717" })
+            ]
+          },
+          answered.pairIndex
+        );
       }) })
     ] })
   ] });
 }
 
 // src/components/games/CareerPathGame.tsx
-import { useState as useState24, useId as useId3 } from "react";
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+import { useState as useState24, useId as useId3, Fragment as Fragment11 } from "react";
+import { Fragment as Fragment12, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 function parseClientState3(json) {
   if (!json) return null;
   try {
@@ -4389,29 +4433,19 @@ function parseClientState3(json) {
     return null;
   }
 }
-function SpellYear({ spell }) {
+function spellYears(spell) {
   const parts = [];
   if (spell.startYear) parts.push(String(spell.startYear));
   if (spell.endYear) parts.push(String(spell.endYear));
-  if (parts.length === 0) return null;
-  return /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-spell-yr", children: parts.join(" \u2013 ") });
+  return parts.join("\u2013");
 }
 function ClubSpellCard({ spell }) {
+  const years = spellYears(spell);
   return /* @__PURE__ */ jsxs51("div", { className: `ss-w-cpath-club${spell.isLoan ? " ss-w-cpath-club--loan" : ""}`, children: [
-    spell.crestUrl ? /* @__PURE__ */ jsx57(
-      "img",
-      {
-        src: spell.crestUrl,
-        alt: spell.clubName,
-        className: "ss-w-cpath-crest",
-        loading: "lazy"
-      }
-    ) : /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-crest ss-w-cpath-crest--fallback", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-club-info", children: [
-      /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-club-name", children: spell.clubName }),
-      /* @__PURE__ */ jsx57(SpellYear, { spell }),
-      spell.isLoan && /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-loan-badge", children: "Loan" })
-    ] })
+    spell.crestUrl ? /* @__PURE__ */ jsx57("img", { src: spell.crestUrl, alt: "", className: "ss-w-cpath-crest", loading: "lazy" }) : /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-crest ss-w-cpath-crest--fallback", "aria-hidden": "true", children: spell.clubName.slice(0, 3).toUpperCase() }),
+    /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-club-name", children: spell.clubName }),
+    years && /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-spell-yr", children: years }),
+    spell.isLoan && /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-loan-badge", children: "Loan" })
   ] });
 }
 function CareerPathGame({
@@ -4423,11 +4457,11 @@ function CareerPathGame({
   const [query, setQuery] = useState24("");
   const inputId = useId3();
   const clientState = parseClientState3(result?.clientStateJson);
-  const alreadyGuessedIds = new Set(
-    clientState?.guessResults.map((g) => g.playerId) ?? []
-  );
+  const alreadyGuessedIds = new Set(clientState?.guessResults.map((g) => g.playerId) ?? []);
   const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
   const visiblePath = clientState?.visiblePath ?? config?.initialPath ?? [];
+  const totalClubs = clientState?.totalClubs ?? config?.totalClubs ?? visiblePath.length;
+  const hiddenCount = Math.max(0, totalClubs - visiblePath.length);
   const filtered = config && !isOver ? config.typeaheadPool.filter(
     (p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
   ) : [];
@@ -4440,25 +4474,34 @@ function CareerPathGame({
   }
   return /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath", "data-testid": "game-screen-career-path", children: [
     !config && /* @__PURE__ */ jsx57("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
-    config && /* @__PURE__ */ jsxs51(Fragment11, { children: [
-      /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-ctx", children: [
-        /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-ctx-label", children: "Career clubs" }),
-        /* @__PURE__ */ jsxs51("span", { className: "ss-w-cpath-ctx-count", children: [
-          config.totalClubs,
-          " clubs total"
+    config && /* @__PURE__ */ jsxs51(Fragment12, { children: [
+      /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-head", children: [
+        /* @__PURE__ */ jsxs51("div", { children: [
+          /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-title", children: "Career Path" }),
+          /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-sub", children: "Which player had this career?" })
+        ] }),
+        clientState && !isOver && /* @__PURE__ */ jsxs51("span", { className: "ss-w-cpath-left", children: [
+          clientState.guessesRemaining,
+          " left"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-path", children: [
-        visiblePath.map((spell, i) => /* @__PURE__ */ jsx57(ClubSpellCard, { spell }, `${spell.clubName}-${i}`)),
-        (clientState?.totalClubs ?? config.totalClubs) > visiblePath.length && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hidden", children: [
-          "+",
-          (clientState?.totalClubs ?? config.totalClubs) - visiblePath.length,
-          " more clubs hidden"
+      /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-seq", children: [
+        visiblePath.map((spell, i) => /* @__PURE__ */ jsxs51(Fragment11, { children: [
+          i > 0 && /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-arrow", "aria-hidden": "true", children: "\u2192" }),
+          /* @__PURE__ */ jsx57(ClubSpellCard, { spell })
+        ] }, `${spell.clubName}-${i}`)),
+        hiddenCount > 0 && /* @__PURE__ */ jsxs51(Fragment12, { children: [
+          /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-arrow", "aria-hidden": "true", children: "\u2192" }),
+          /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hidden", children: [
+            "+",
+            hiddenCount,
+            " more"
+          ] })
         ] })
       ] }),
-      isOver && clientState && /* @__PURE__ */ jsxs51("div", { className: `ss-w-cpath-banner ss-w-cpath-banner--${clientState.solved ? "solved" : "failed"}`, children: [
-        /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-banner-label", children: clientState.solved ? "Career traced!" : "Better luck tomorrow" }),
-        clientState.revealedPlayerName && /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName })
+      clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hint", children: [
+        "\u{1F4A1} ",
+        clientState.hintLine
       ] }),
       !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-gtta", children: [
         /* @__PURE__ */ jsx57(
@@ -4468,7 +4511,7 @@ function CareerPathGame({
             type: "text",
             role: "textbox",
             className: "ss-w-gtta-i",
-            placeholder: "Search players\u2026",
+            placeholder: "Name the player\u2026",
             value: query,
             disabled: submitting || isOver,
             onChange: (e) => setQuery(e.target.value),
@@ -4493,12 +4536,15 @@ function CareerPathGame({
           p.id
         )) })
       ] }),
-      clientState?.hintLine && !isOver && /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-hint", children: clientState.hintLine }),
-      !isOver && clientState && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hint", children: [
-        clientState.guessesRemaining,
-        " guess",
-        clientState.guessesRemaining !== 1 ? "es" : "",
-        " remaining"
+      isOver && clientState && /* @__PURE__ */ jsxs51("div", { className: `ss-w-cpath-banner ss-w-cpath-banner--${clientState.solved ? "solved" : "failed"}`, children: [
+        /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-banner-label", children: clientState.solved ? "\u2705 Career traced!" : "\u{1F614} Out of guesses" }),
+        clientState.revealedPlayerName && /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName }),
+        /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-banner-sub", children: [
+          clientState.guessesUsed,
+          " guess",
+          clientState.guessesUsed === 1 ? "" : "es",
+          " \xB7 come back tomorrow"
+        ] })
       ] })
     ] })
   ] });
@@ -4506,7 +4552,7 @@ function CareerPathGame({
 
 // src/components/games/BeatTheGridGame.tsx
 import React, { useState as useState25, useId as useId4 } from "react";
-import { Fragment as Fragment12, jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
 function parseClientState4(json) {
   if (!json) return null;
   try {
@@ -4552,7 +4598,7 @@ function SearchSheet({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs52("div", { className: "ss-w-gtta", children: [
+    playerPool.length === 0 ? /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-sheet-empty", children: "No players available to search yet." }) : /* @__PURE__ */ jsxs52("div", { className: "ss-w-gtta", children: [
       /* @__PURE__ */ jsx58(
         "input",
         {
@@ -4617,18 +4663,23 @@ function BeatTheGridGame({
   const rows = config.rows;
   const cols = config.cols;
   return /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg", "data-testid": "game-screen-beat-the-grid", children: [
-    /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-ctx", children: [
-      /* @__PURE__ */ jsxs52("span", { className: "ss-w-btg-ctx-score", children: [
-        "Score: ",
-        clientState?.totalScore ?? 0
+    /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-head", children: [
+      /* @__PURE__ */ jsxs52("div", { children: [
+        /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-title", children: "Beat the Grid" }),
+        /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-sub", children: "Fill each cell with a player who fits" })
       ] }),
-      !isLocked2 && /* @__PURE__ */ jsxs52("span", { className: "ss-w-btg-ctx-left", children: [
-        config.maxGuesses - filledCells.length,
-        " cell",
-        config.maxGuesses - filledCells.length !== 1 ? "s" : "",
-        " left"
-      ] }),
-      isLocked2 && /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-ctx-done", children: "Complete" })
+      /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-ctx", children: [
+        /* @__PURE__ */ jsxs52("span", { className: "ss-w-btg-ctx-score", children: [
+          clientState?.totalScore ?? 0,
+          " pts"
+        ] }),
+        !isLocked2 && /* @__PURE__ */ jsxs52("span", { className: "ss-w-btg-ctx-left", children: [
+          config.maxGuesses - filledCells.length,
+          " cell",
+          config.maxGuesses - filledCells.length !== 1 ? "s" : "",
+          " left"
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs52(
       "div",
@@ -4657,7 +4708,7 @@ function BeatTheGridGame({
                   ].filter(Boolean).join(" "),
                   disabled: isLocked2 || submitting,
                   onClick: () => handleCellClick(rowIdx, colIdx),
-                  children: filled ? /* @__PURE__ */ jsxs52(Fragment12, { children: [
+                  children: filled ? /* @__PURE__ */ jsxs52(Fragment13, { children: [
                     /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-score", children: filled.rarityScore }),
                     filled.isCorrect && /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-check", "aria-hidden": "true", children: "\u2713" })
                   ] }) : /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-empty", "aria-hidden": "true", children: "+" })
@@ -4669,6 +4720,16 @@ function BeatTheGridGame({
         ]
       }
     ),
+    isLocked2 && /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-done", children: [
+      /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-done-label", children: "\u{1F532} Grid complete" }),
+      /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-done-score", children: clientState?.totalScore ?? 0 }),
+      /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-done-sub", children: [
+        filledCells.filter((c) => c.isCorrect).length,
+        "/",
+        filledCells.length,
+        " correct \xB7 come back tomorrow"
+      ] })
+    ] }),
     activeCell !== null && /* @__PURE__ */ jsx58(
       SearchSheet,
       {
@@ -4686,7 +4747,7 @@ function BeatTheGridGame({
 }
 
 // src/components/games/GuessTheXiGame.tsx
-import { Fragment as Fragment13, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 function parseClientState5(json) {
   if (!json) return null;
   try {
@@ -4709,6 +4770,7 @@ function GuessTheXiGame({
 }) {
   const clientState = parseClientState5(result?.clientStateJson);
   const isOver = result?.alreadyPlayed === true || clientState?.status === "solved" || clientState?.status === "failed";
+  const solved = clientState?.status === "solved";
   function handlePick(teamId) {
     if (!config || isOver || submitting) return;
     const prevGuesses = clientState?.guessHistory.map((g) => ({ teamId: g.teamId })) ?? [];
@@ -4717,15 +4779,24 @@ function GuessTheXiGame({
   }
   return /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi", "data-testid": "game-screen-guess-the-xi", children: [
     !config && /* @__PURE__ */ jsx59("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
-    config && /* @__PURE__ */ jsxs53(Fragment13, { children: [
-      /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-ctx", children: /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-ctx-label", children: config.poolLabel }) }),
-      config.positions.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pitch", children: config.positions.map((pos) => /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-pslot", children: [
+    config && /* @__PURE__ */ jsxs53(Fragment14, { children: [
+      /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-head", children: [
+        /* @__PURE__ */ jsxs53("div", { children: [
+          /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-title", children: "Guess the XI" }),
+          /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-sub", children: config.poolLabel })
+        ] }),
+        clientState && !isOver && /* @__PURE__ */ jsxs53("span", { className: "ss-w-gxi-left", children: [
+          "Guess ",
+          clientState.guessesUsed + 1,
+          "/6"
+        ] })
+      ] }),
+      config.positions.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pitch", children: config.positions.map((pos, i) => /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-pslot", children: [
         /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-pslot-pos", children: pos.slot }),
         /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-pslot-nat", children: pos.nationality })
-      ] }, pos.slot)) }),
+      ] }, `${pos.slot}-${i}`)) }),
       clientState && clientState.earnedReveals.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-reveals", children: clientState.earnedReveals.map((r, i) => /* @__PURE__ */ jsx59(RevealCard, { reveal: r }, i)) }),
-      isOver && clientState && /* @__PURE__ */ jsx59("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${clientState.status}`, children: /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-banner-label", children: clientState.status === "solved" ? `Solved! ${clientState.score} pts` : "Better luck tomorrow" }) }),
-      /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pool", children: config.teamPool.map((team) => {
+      !isOver ? /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pool", children: config.teamPool.map((team) => {
         const guessRecord = clientState?.guessHistory.find((g) => g.teamId === team.teamId);
         return /* @__PURE__ */ jsx59(
           "button",
@@ -4735,17 +4806,21 @@ function GuessTheXiGame({
               "ss-w-gxi-team-btn",
               guessRecord ? guessRecord.wasCorrect ? "ss-w-gxi-team-btn--correct" : "ss-w-gxi-team-btn--wrong" : ""
             ].filter(Boolean).join(" "),
-            disabled: isOver || submitting,
+            disabled: submitting,
             onClick: () => handlePick(team.teamId),
             children: team.teamName
           },
           team.teamId
         );
-      }) }),
-      !isOver && clientState && /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-hint", children: [
-        "Guess ",
-        clientState.guessesUsed + 1,
-        " of 6"
+      }) }) : clientState && /* @__PURE__ */ jsxs53("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${solved ? "solved" : "failed"}`, children: [
+        /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-banner-label", children: solved ? "\u2705 Solved!" : "\u{1F614} Out of guesses" }),
+        /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-banner-score", children: clientState.score }),
+        /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-banner-sub", children: [
+          clientState.guessesUsed,
+          " guess",
+          clientState.guessesUsed === 1 ? "" : "es",
+          " \xB7 come back tomorrow"
+        ] })
       ] })
     ] })
   ] });
@@ -4753,7 +4828,7 @@ function GuessTheXiGame({
 
 // src/components/games/DailyQuizGame.tsx
 import { useState as useState26 } from "react";
-import { Fragment as Fragment14, jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
 function parseClientState6(json) {
   if (!json) return null;
   try {
@@ -4789,7 +4864,7 @@ function DailyQuizGame({
   }
   return /* @__PURE__ */ jsxs54("div", { className: "ss-w-dq", "data-testid": "game-screen-daily-quiz", children: [
     !config && /* @__PURE__ */ jsx60("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
-    config && /* @__PURE__ */ jsxs54(Fragment14, { children: [
+    config && /* @__PURE__ */ jsxs54(Fragment15, { children: [
       isRevealed && result?.score != null && /* @__PURE__ */ jsxs54("div", { className: "ss-w-dq-score", children: [
         /* @__PURE__ */ jsx60("span", { className: "ss-w-dq-score-val", children: result.score }),
         /* @__PURE__ */ jsx60("span", { className: "ss-w-dq-score-label", children: "pts" })
@@ -6600,101 +6675,121 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-gtta-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ss-w-ink); border-bottom: 1px solid var(--ss-w-line); }
 .ss-w-gtta-opt:last-child { border-bottom: none; }
 .ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
-/* Column header labels: one cell per attribute */
-.ss-w-gthdr { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; padding: 0 2px; }
-.ss-w-gthdr-c { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-gthdr-c--name { text-align: left; }
-/* Guess rows */
-.ss-w-gtrows { display: flex; flex-direction: column; gap: 4px; }
-.ss-w-gtrow { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; align-items: center; }
-.ss-w-gtrow-nm { font-size: 12px; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
-/* Verdict tiles */
-.ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; gap: 1px; transition: transform .1s; }
-.ss-w-gtile--exact { background: var(--ss-w-correct); color: #fff; }
-.ss-w-gtile--near { background: var(--ss-w-cta); color: var(--ss-w-cta-ink, #fff); }
+/* Header: title + sub + remaining chip */
+.ss-w-gt-head { display: flex; align-items: flex-start; gap: 8px; }
+.ss-w-gt-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-gt-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
+.ss-w-gt-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
+/* Guess rows \u2014 one labelled block per guess */
+.ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
+/* Verdict tiles: label on top, verdict glyph below */
+.ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; gap: 2px; min-width: 0; }
+.ss-w-gtile-lab { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
+.ss-w-gtile-v { font-size: 15px; font-weight: 800; line-height: 1; }
+.ss-w-gtile--exact { background: var(--ss-w-correct); color: #062611; }
+.ss-w-gtile--near { background: var(--ss-w-accent); color: #241700; }
 .ss-w-gtile--miss { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
-.ss-w-gtile-dir { font-size: 11px; line-height: 1; }
 /* Hint line */
-.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
-/* Outcome banner: shown when solved or failed */
-.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
+.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
+/* Terminal outcome banner */
+.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
 .ss-w-gt-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
-.ss-w-gt-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
-.ss-w-gt-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
-.ss-w-gt-banner-label { font-size: 12px; color: var(--ss-w-faint); }
+.ss-w-gt-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
+.ss-w-gt-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
+.ss-w-gt-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-gt-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
 
-/* ---- Higher or Lower game screen (D3) ---- */
+/* ---- Higher or Lower game screen (D3) \u2014 artifact hl-pair/pcard/hlb layout ---- */
 .ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
-/* Stat context header: family name + season */
-.ss-w-hlctx { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
-.ss-w-hlctx-fam { font-size: 14px; font-weight: 750; color: var(--ss-w-ink); }
-.ss-w-hlctx-szn { font-size: 11.5px; color: var(--ss-w-faint); font-weight: 500; }
-/* Score chip */
-.ss-w-hl-score { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 3px 10px; }
-/* Pair card: two player cards + divider */
-.ss-w-hlpair { display: flex; align-items: stretch; gap: 0; border-radius: 14px; border: 1.5px solid var(--ss-w-line); overflow: hidden; background: var(--ss-w-panel); }
-/* Player card */
-.ss-w-hlpc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; }
-.ss-w-hlpc--b { border-left: 1px solid var(--ss-w-line); }
-.ss-w-hlpc-name { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.25; word-break: break-word; min-width: 0; }
-.ss-w-hlpc-val { font-size: 22px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
-.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); font-size: 26px; }
-.ss-w-hlpc-val--correct { color: var(--ss-w-correct); }
-.ss-w-hlpc-val--wrong { color: var(--ss-w-cta); }
-.ss-w-hlpc-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 8px; }
-.ss-w-hlpc-badge--correct { color: #fff; background: var(--ss-w-correct); }
-.ss-w-hlpc-badge--wrong { color: var(--ss-w-cta-ink, #fff); background: var(--ss-w-cta); }
-/* Higher / Lower buttons */
-.ss-w-hlbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.ss-w-hlbtn { padding: 11px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
-.ss-w-hlbtn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
+/* Header: title + sub + streak chip */
+.ss-w-hl-head { display: flex; align-items: flex-start; gap: 8px; }
+.ss-w-hl-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-hl-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
+.ss-w-hl-streak { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
+/* Question line */
+.ss-w-hl-q { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }
+/* Pair: player A | Higher/Lower | player B */
+.ss-w-hlpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
+.ss-w-hlpc { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; text-align: center; min-width: 0; }
+.ss-w-hlpc-av { width: 42px; height: 42px; border-radius: 50%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 20px; flex: none; }
+.ss-w-hlpc-name { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); line-height: 1.15; }
+.ss-w-hlpc-stat { font-size: 8.5px; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
+.ss-w-hlpc-val { font-size: 30px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
+.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); }
+/* Higher / Lower \u2014 middle column */
+.ss-w-hlbtns { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
+.ss-w-hl-or { text-align: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); }
+.ss-w-hlbtn { font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 9px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--ss-w-line); white-space: nowrap; transition: border-color .1s, background .1s; }
+.ss-w-hlbtn--up { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); border-color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
+.ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
+.ss-w-hlbtn:hover:not(:disabled) { border-color: var(--ss-w-accent); }
 .ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
-/* Answered pair result rows */
-.ss-w-hlresults { display: flex; flex-direction: column; gap: 4px; }
-.ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; background: var(--ss-w-bubble); }
-.ss-w-hlrrow--correct { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
+/* Run-over terminal panel */
+.ss-w-hl-over { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
+.ss-w-hl-over-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); }
+.ss-w-hl-over-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
+.ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
+/* Answered history \u2014 clean single-line rows with the revealed value */
+.ss-w-hlresults { display: flex; flex-direction: column; gap: 5px; }
+.ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
+.ss-w-hlrrow--correct { background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 30%, var(--ss-w-line)); }
 .ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
 .ss-w-hlrrow-names { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-hlrrow-pick { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-hlrrow-val { font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
+.ss-w-hlrrow-pick { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); flex: none; }
 .ss-w-hlrrow-icon { font-size: 14px; flex: none; }
+.ss-w-hlrrow--correct .ss-w-hlrrow-icon { color: var(--ss-w-correct); }
+.ss-w-hlrrow--wrong .ss-w-hlrrow-icon { color: var(--ss-w-cta); }
 
-/* ---- Career Path game screen (D3) ---- */
+/* ---- Career Path game screen (D3) \u2014 artifact cpath/club/cto layout ---- */
 .ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
-/* Context header */
-.ss-w-cpath-ctx { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
-.ss-w-cpath-ctx-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
-.ss-w-cpath-ctx-count { font-size: 12px; font-weight: 600; color: var(--ss-w-accent); }
-/* Career path: vertical timeline of club spells */
-.ss-w-cpath-path { display: flex; flex-direction: column; gap: 4px; }
-/* Single club card */
-.ss-w-cpath-club { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
-.ss-w-cpath-club--loan { border-style: dashed; }
-/* Crest image / fallback */
-.ss-w-cpath-crest { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 4px; }
-.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; }
-/* Club info: name + years */
-.ss-w-cpath-club-info { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; flex-wrap: wrap; }
-.ss-w-cpath-club-name { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-cpath-spell-yr { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
-.ss-w-cpath-loan-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-cta) 15%, var(--ss-w-panel)); color: var(--ss-w-cta-ink, #1b1300); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); flex: none; }
-/* Hidden clubs indicator */
-.ss-w-cpath-hidden { font-size: 11.5px; color: var(--ss-w-faint); font-style: italic; text-align: center; padding: 6px 0 2px; }
+/* Header */
+.ss-w-cpath-head { display: flex; align-items: flex-start; gap: 8px; }
+.ss-w-cpath-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
+.ss-w-cpath-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
+/* Career sequence \u2014 horizontal crests with arrows */
+.ss-w-cpath-seq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 13px 11px; }
+.ss-w-cpath-arrow { align-self: center; color: var(--ss-w-faint); font-size: 13px; padding-top: 10px; }
+/* Single club \u2014 small vertical card */
+.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
+.ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
+.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-faint); }
+.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
+.ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
+.ss-w-cpath-loan-badge { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-accent) 15%, var(--ss-w-panel)); color: var(--ss-w-accent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
+.ss-w-cpath-club--loan .ss-w-cpath-crest { border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
+/* Hidden clubs chip */
+.ss-w-cpath-hidden { align-self: center; font-size: 9px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }
 /* Hint line */
-.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
-/* Outcome banner */
-.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
+.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
+/* Terminal outcome */
+.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
 .ss-w-cpath-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
-.ss-w-cpath-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
-.ss-w-cpath-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
-.ss-w-cpath-banner-label { font-size: 12px; color: var(--ss-w-faint); }
+.ss-w-cpath-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
+.ss-w-cpath-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
+.ss-w-cpath-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-cpath-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
 
-/* ---- Beat the Grid game screen (D3) ---- */
+/* ---- Beat the Grid game screen (D3) \u2014 artifact grid/gc layout ---- */
 .ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
-/* Score/context row */
-.ss-w-btg-ctx { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
-.ss-w-btg-ctx-score { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
-.ss-w-btg-ctx-left { font-size: 12px; color: var(--ss-w-faint); font-weight: 500; }
-.ss-w-btg-ctx-done { font-size: 12px; font-weight: 700; color: var(--ss-w-correct); }
+/* Header */
+.ss-w-btg-head { display: flex; align-items: flex-start; gap: 8px; }
+.ss-w-btg-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-btg-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
+.ss-w-btg-ctx { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
+.ss-w-btg-ctx-score { font-size: 13px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
+.ss-w-btg-ctx-left { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
+/* Terminal summary */
+.ss-w-btg-done { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
+.ss-w-btg-done-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-btg-done-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
+.ss-w-btg-done-sub { font-size: 11px; color: var(--ss-w-faint); }
+/* Empty search pool note */
+.ss-w-btg-sheet-empty { font-size: 12px; color: var(--ss-w-faint); text-align: center; padding: 14px 8px; }
 /* Grid layout \u2014 col count driven inline via style */
 .ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
 /* Generic grid cell */
@@ -6727,9 +6822,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* ---- Guess the XI game screen (D3) ---- */
 .ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
-/* Context label (pool label) */
-.ss-w-gxi-ctx { display: flex; align-items: center; }
-.ss-w-gxi-ctx-label { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .05em; }
+/* Header */
+.ss-w-gxi-head { display: flex; align-items: flex-start; gap: 8px; }
+.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
+.ss-w-gxi-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
 /* Positions pitch: compact slot grid */
 .ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
 .ss-w-gxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 10px; min-width: 52px; }
@@ -6747,11 +6844,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
 .ss-w-gxi-team-btn--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); color: var(--ss-w-correct); }
 .ss-w-gxi-team-btn--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); text-decoration: line-through; opacity: .65; }
-/* Outcome banner */
-.ss-w-gxi-banner { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 10px; }
+/* Terminal outcome banner */
+.ss-w-gxi-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
 .ss-w-gxi-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
-.ss-w-gxi-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
+.ss-w-gxi-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
 .ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-gxi-banner-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
+.ss-w-gxi-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
 /* Hint line */
 .ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
 
@@ -7046,7 +7145,8 @@ function StatsWidget(props) {
       discovery,
       gamesResult,
       leaderboardResult,
-      loggedIn: !!operatorUserId
+      loggedIn: !!operatorUserId,
+      conversation: built?.conversation ?? null
     }
   ) : /* @__PURE__ */ jsx71(
     ChatFab,