@sensiblestats/widget-react 0.54.0 → 0.56.0

package/dist/index.js

@@ -4152,6 +4152,24 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
   convRef.current = conversation;
   const optsRef = useRef11({ gameId, gameDay, fixtureId, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, refresh };
+  const resultRef = useRef11(null);
+  resultRef.current = result;
+  const refetch = useCallback8(async () => {
+    const conv = convRef.current;
+    if (!conv) return;
+    const opts = optsRef.current;
+    try {
+      const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
+      if (payload === null) return;
+      if (payload.clientStateJson == null && resultRef.current?.clientStateJson != null) {
+        setRawStatus(payload.status);
+        return;
+      }
+      setResult(toSubmitResult(payload));
+      setRawStatus(payload.status);
+    } catch {
+    }
+  }, []);
   const submit = useCallback8(async (answerJson) => {
     const conv = convRef.current;
     if (!conv || inFlightRef.current) return;
@@ -4161,7 +4179,14 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
       const opts = optsRef.current;
       const playResult = await conv.postPlay(opts.gameId, answerJson, opts.gameDay, opts.fixtureId);
       if (playResult !== null) {
-        setResult(playResult);
+        const hasFreshState = playResult.clientStateJson != null;
+        const isTerminal2 = playResult.alreadyPlayed === true;
+        const holdsState = resultRef.current?.clientStateJson != null;
+        if (!hasFreshState && !isTerminal2 && holdsState) {
+          await refetch();
+        } else {
+          setResult(playResult);
+        }
         if (playResult.pointsDelta != null) {
           opts.refresh?.();
         }
@@ -4171,22 +4196,10 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
       inFlightRef.current = false;
       setSubmitting(false);
     }
-  }, []);
+  }, [refetch]);
   const hydrate = useCallback8(() => {
-    const conv = convRef.current;
-    if (!conv) return;
-    const opts = optsRef.current;
-    void (async () => {
-      try {
-        const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
-        if (payload !== null) {
-          setResult(toSubmitResult(payload));
-          setRawStatus(payload.status);
-        }
-      } catch {
-      }
-    })();
-  }, []);
+    void refetch();
+  }, [refetch]);
   return { result, submitting, submit, hydrate, rawStatus };
 }
 
@@ -4288,7 +4301,7 @@ var ATTR_LABELS = {
   position: "Pos",
   nationality: "Nat",
   age: "Age",
-  shirtNumber: "Kit",
+  shirtNumber: "Shirt",
   apps: "Apps"
 };
 var ATTR_KEYS = [
@@ -4349,49 +4362,65 @@ function MysteryTigerGame({
           " left"
         ] })
       ] }),
-      guessResults.length === 0 && !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-legend", children: [
-        /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-legend-lead", children: "Guess any squad player \u2014 each guess reveals how close you are:" }),
-        /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrow", children: ATTR_KEYS.map((key) => /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtile ss-w-gtile--legend", 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: "\xB7" })
-        ] }, key)) })
-      ] }),
-      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];
-            const arrow = directionArrow(v);
-            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.value ?? v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
-                children: [
-                  /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
-                  /* @__PURE__ */ jsxs49("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: [
-                    tileFace(key, v),
-                    arrow && /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-dir", children: arrow })
-                  ] })
-                ]
-              },
-              key
-            );
-          }) })
-        ] }, gr.playerId);
-      }) }),
-      clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-hint", children: [
-        "\u{1F4A1} ",
-        clientState.hintLine
+      /* @__PURE__ */ jsxs49("div", { className: "ss-w-gscroll", children: [
+        !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-lead", children: [
+          guessResults.length === 0 ? "Guess a squad player \u2014 each guess compares it to the mystery player on Pos, Nat, Age, Shirt & Apps: " : "Tiles: ",
+          /* @__PURE__ */ jsxs49("span", { className: "ss-w-gt-key", children: [
+            /* @__PURE__ */ jsx55("b", { className: "ss-w-gt-key-ok", children: "\u2713" }),
+            " match \xB7 ",
+            /* @__PURE__ */ jsx55("b", { children: "\u25B2" }),
+            " higher \xB7 ",
+            /* @__PURE__ */ jsx55("b", { children: "\u25BC" }),
+            " lower"
+          ] })
+        ] }),
+        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];
+              const arrow = directionArrow(v);
+              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.value ?? v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
+                    /* @__PURE__ */ jsxs49("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: [
+                      tileFace(key, v),
+                      arrow && /* @__PURE__ */ jsx55("span", { className: "ss-w-gtile-dir", children: arrow })
+                    ] })
+                  ]
+                },
+                key
+              );
+            }) })
+          ] }, gr.playerId);
+        }) }),
+        clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-hint", children: [
+          "\u{1F4A1} ",
+          clientState.hintLine
+        ] }),
+        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"
+          ] })
+        ] })
       ] }),
-      !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtta", children: [
+      !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gpin ss-w-gtta", children: [
         /* @__PURE__ */ jsx55(
           "input",
           {
@@ -4423,16 +4452,6 @@ function MysteryTigerGame({
           },
           p.id
         )) })
-      ] }),
-      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"
-        ] })
       ] })
     ] })
   ] });
@@ -4544,11 +4563,16 @@ function HigherOrLowerGame({
         ] })
       ] }),
       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__ */ jsx56("div", { className: "ss-w-hl-over-title", children: runEndedWrong ? "\u{1F6AB} Run over" : "\u{1F389} Perfect run!" }),
+        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-over-score", children: [
+          score,
+          /* @__PURE__ */ jsx56("span", { className: "ss-w-hl-over-unit", children: " pts" })
+        ] }),
         /* @__PURE__ */ jsxs50("div", { className: "ss-w-hl-over-sub", children: [
           correctCount,
-          " correct \xB7 come back tomorrow for a new run"
+          " correct in a row",
+          runEndedWrong ? " before a wrong pick" : "",
+          " \xB7 come back tomorrow for a new run"
         ] })
       ] })
     ] })
@@ -4613,22 +4637,34 @@ function CareerPathGame({
       /* @__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?" })
+          /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-sub", children: "Guess the mystery player from the clubs they've played for, oldest first." })
         ] }),
         clientState && !isOver && /* @__PURE__ */ jsxs51("span", { className: "ss-w-cpath-left", children: [
           clientState.guessesRemaining,
           " left"
         ] })
       ] }),
-      /* @__PURE__ */ jsx57("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: "\u203A" }),
-        /* @__PURE__ */ jsx57(ClubSpellCard, { spell })
-      ] }, `${spell.clubName}-${i}`)) }),
-      clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hint", children: [
-        "\u{1F4A1} ",
-        clientState.hintLine
+      /* @__PURE__ */ jsxs51("div", { className: "ss-w-gscroll", children: [
+        /* @__PURE__ */ jsx57("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: "\u203A" }),
+          /* @__PURE__ */ jsx57(ClubSpellCard, { spell })
+        ] }, `${spell.clubName}-${i}`)) }),
+        clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hint", children: [
+          "\u{1F4A1} ",
+          clientState.hintLine
+        ] }),
+        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"
+          ] })
+        ] })
       ] }),
-      !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-gtta", children: [
+      !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-gpin ss-w-gtta", children: [
         /* @__PURE__ */ jsx57(
           "input",
           {
@@ -4660,16 +4696,6 @@ function CareerPathGame({
           },
           p.id
         )) })
-      ] }),
-      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"
-        ] })
       ] })
     ] })
   ] });
@@ -4689,6 +4715,15 @@ function parseClientState4(json) {
 function findCellResult(cells, row, col) {
   return cells.find((c) => c.row === row && c.col === col);
 }
+function shortName(name) {
+  if (!name) return "";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  const first = parts[0];
+  if (parts.length === 1) return first;
+  const last = parts[parts.length - 1];
+  return `${first.charAt(0)}. ${last}`;
+}
 function SearchSheet({
   row,
   col,
@@ -4806,56 +4841,61 @@ function BeatTheGridGame({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs52(
-      "div",
-      {
-        className: "ss-w-btg-grid",
-        style: { gridTemplateColumns: `auto repeat(${cols.length}, 1fr)` },
-        role: "grid",
-        children: [
-          /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--corner" }),
-          cols.map((col) => /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--colhdr", children: col }, col)),
-          rows.map((rowLabel, rowIdx) => /* @__PURE__ */ jsxs52(React.Fragment, { children: [
-            /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--rowhdr", children: rowLabel }),
-            cols.map((colLabel, colIdx) => {
-              const filled = findCellResult(filledCells, rowIdx, colIdx);
-              const isActive = activeCell?.row === rowIdx && activeCell?.col === colIdx;
-              return /* @__PURE__ */ jsx58(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": `btg-cell-${rowIdx}-${colIdx}`,
-                  "aria-label": `${rowLabel} ${colLabel}`,
-                  className: [
-                    "ss-w-btg-gc ss-w-btg-cell",
-                    filled ? filled.isCorrect ? "ss-w-btg-cell--correct" : "ss-w-btg-cell--wrong" : "",
-                    isActive ? "ss-w-btg-cell--active" : ""
-                  ].filter(Boolean).join(" "),
-                  disabled: isLocked2 || submitting,
-                  onClick: () => handleCellClick(rowIdx, colIdx),
-                  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: "+" })
-                },
-                `cell-${rowIdx}-${colIdx}`
-              );
-            })
-          ] }, rowIdx))
-        ]
-      }
-    ),
-    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"
+    /* @__PURE__ */ jsxs52("div", { className: "ss-w-gscroll", children: [
+      /* @__PURE__ */ jsxs52(
+        "div",
+        {
+          className: "ss-w-btg-grid",
+          style: { gridTemplateColumns: `auto repeat(${cols.length}, 1fr)` },
+          role: "grid",
+          children: [
+            /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--corner" }),
+            cols.map((col) => /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--colhdr", children: col }, col)),
+            rows.map((rowLabel, rowIdx) => /* @__PURE__ */ jsxs52(React.Fragment, { children: [
+              /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--rowhdr", children: rowLabel }),
+              cols.map((colLabel, colIdx) => {
+                const filled = findCellResult(filledCells, rowIdx, colIdx);
+                const isActive = activeCell?.row === rowIdx && activeCell?.col === colIdx;
+                return /* @__PURE__ */ jsx58(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": `btg-cell-${rowIdx}-${colIdx}`,
+                    "aria-label": `${rowLabel} ${colLabel}`,
+                    className: [
+                      "ss-w-btg-gc ss-w-btg-cell",
+                      filled ? filled.isCorrect ? "ss-w-btg-cell--correct" : "ss-w-btg-cell--wrong" : "",
+                      isActive ? "ss-w-btg-cell--active" : ""
+                    ].filter(Boolean).join(" "),
+                    disabled: isLocked2 || submitting,
+                    onClick: () => handleCellClick(rowIdx, colIdx),
+                    children: filled ? /* @__PURE__ */ jsxs52(Fragment13, { children: [
+                      /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-nm", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) }),
+                      /* @__PURE__ */ jsxs52("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: "+" })
+                  },
+                  `cell-${rowIdx}-${colIdx}`
+                );
+              })
+            ] }, rowIdx))
+          ]
+        }
+      ),
+      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(
+    activeCell !== null && /* @__PURE__ */ jsx58("div", { className: "ss-w-gpin", children: /* @__PURE__ */ jsx58(
       SearchSheet,
       {
         row: activeCell.row,
@@ -4867,7 +4907,7 @@ function BeatTheGridGame({
         onPick: handlePick,
         onDismiss: () => setActiveCell(null)
       }
-    )
+    ) })
   ] });
 }
 
@@ -4891,13 +4931,7 @@ function toRows(positions) {
     bucket.push(p);
     byRow.set(rowKey, bucket);
   });
-  return [...byRow.keys()].sort((a, b) => a - b).map((k) => byRow.get(k));
-}
-function RevealCard({ reveal }) {
-  return /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-reveal", "data-reveal-type": reveal.type ?? "", children: [
-    reveal.slot && /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-reveal-slot", children: reveal.slot }),
-    /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-reveal-val", children: reveal.value })
-  ] });
+  return [...byRow.keys()].sort((a, b) => b - a).map((k) => byRow.get(k));
 }
 function GuessTheXiGame({
   config,
@@ -4912,6 +4946,10 @@ function GuessTheXiGame({
   const solved = clientState?.status === "solved";
   const guessedTeamIds = new Set(clientState?.guessHistory.map((g) => g.teamId) ?? []);
   const rows = config ? toRows(config.positions) : [];
+  const revealBySlot = /* @__PURE__ */ new Map();
+  (clientState?.earnedReveals ?? []).forEach((r) => {
+    if (r.slot) revealBySlot.set(r.slot, r);
+  });
   const filtered = config && !isOver ? config.teamPool.filter(
     (t) => !guessedTeamIds.has(t.teamId) && t.teamName.toLowerCase().includes(query.toLowerCase())
   ) : [];
@@ -4923,6 +4961,7 @@ function GuessTheXiGame({
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
   const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
+  const revealCount = clientState?.earnedReveals.length ?? 0;
   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(Fragment14, { children: [
@@ -4930,7 +4969,7 @@ function GuessTheXiGame({
         /* @__PURE__ */ jsxs53("div", { children: [
           /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-title", children: "Guess the XI" }),
           /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-sub", children: [
-            "Which team? \xB7 flags only \xB7 ",
+            "Name the team \xB7 flags are each player's nationality \xB7 ",
             config.poolLabel
           ] })
         ] }),
@@ -4939,64 +4978,76 @@ function GuessTheXiGame({
           " left"
         ] })
       ] }),
-      rows.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pitch", children: rows.map((row, r) => /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-prow", children: row.map((pos, c) => /* @__PURE__ */ jsx59(
-        "div",
-        {
-          className: "ss-w-gxi-flag",
-          title: pos.nationality,
-          "aria-label": pos.nationality,
-          children: nationalityFlag(pos.nationality)
-        },
-        `${pos.slot}-${c}`
-      )) }, r)) }),
-      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 ? /* @__PURE__ */ jsxs53(Fragment14, { children: [
-        wrongGuesses.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-wrong", children: wrongGuesses.map((g) => {
+      /* @__PURE__ */ jsxs53("div", { className: "ss-w-gscroll", children: [
+        rows.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pitch", children: rows.map((row, r) => /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-prow", children: row.map((pos, c) => {
+          const rev = pos.slot ? revealBySlot.get(pos.slot) : void 0;
+          return /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-slot", children: [
+            /* @__PURE__ */ jsx59(
+              "div",
+              {
+                className: `ss-w-gxi-flag${rev ? " ss-w-gxi-flag--revealed" : ""}`,
+                title: pos.nationality,
+                "aria-label": rev ? `${pos.nationality} \u2014 revealed: ${rev.value}` : pos.nationality,
+                children: nationalityFlag(pos.nationality)
+              }
+            ),
+            rev && /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-flag-lab", children: rev.value })
+          ] }, `${pos.slot}-${c}`);
+        }) }, r)) }),
+        revealCount > 0 && !isOver && /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-revnote", children: [
+          "\u{1F50E} ",
+          revealCount,
+          " player",
+          revealCount === 1 ? "" : "s",
+          " revealed \u2014 highlighted on the pitch"
+        ] }),
+        !isOver && wrongGuesses.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-wrong", children: wrongGuesses.map((g) => {
           const team = config.teamPool.find((t) => t.teamId === g.teamId);
           return /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-wrong-pill", children: team?.teamName ?? `#${g.teamId}` }, g.teamId);
         }) }),
-        /* @__PURE__ */ jsxs53("div", { className: "ss-w-gtta", children: [
-          /* @__PURE__ */ jsx59(
-            "input",
-            {
-              id: inputId,
-              type: "text",
-              role: "textbox",
-              className: "ss-w-gtta-i",
-              placeholder: "Name the team\u2026",
-              value: query,
-              disabled: submitting || isOver,
-              onChange: (e) => setQuery(e.target.value),
-              autoComplete: "off",
-              "aria-label": "Name the team",
-              "aria-autocomplete": "list"
-            }
-          ),
-          query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((t) => /* @__PURE__ */ jsx59(
-            "div",
-            {
-              className: "ss-w-gtta-opt",
-              role: "option",
-              "aria-selected": false,
-              onClick: () => handlePick(t.teamId),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") handlePick(t.teamId);
-              },
-              tabIndex: 0,
-              children: t.teamName
-            },
-            t.teamId
-          )) })
-        ] })
-      ] }) : 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"
+        isOver && 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"
+          ] })
         ] })
+      ] }),
+      !isOver && /* @__PURE__ */ jsxs53("div", { className: "ss-w-gpin ss-w-gtta", children: [
+        /* @__PURE__ */ jsx59(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            role: "textbox",
+            className: "ss-w-gtta-i",
+            placeholder: "Name the team\u2026",
+            value: query,
+            disabled: submitting || isOver,
+            onChange: (e) => setQuery(e.target.value),
+            autoComplete: "off",
+            "aria-label": "Name the team",
+            "aria-autocomplete": "list"
+          }
+        ),
+        query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((t) => /* @__PURE__ */ jsx59(
+          "div",
+          {
+            className: "ss-w-gtta-opt",
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handlePick(t.teamId),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handlePick(t.teamId);
+            },
+            tabIndex: 0,
+            children: t.teamName
+          },
+          t.teamId
+        )) })
       ] })
     ] })
   ] });
@@ -5693,7 +5744,7 @@ function GamesPanel({
   const [selected, setSelected] = useState31(null);
   if (!loggedIn) return /* @__PURE__ */ jsx66(GamesLoginWall, { ui });
   if (selected !== null) {
-    return /* @__PURE__ */ jsx66("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx66(
+    return /* @__PURE__ */ jsx66("div", { className: "ss-w-gscreen-wrap", children: /* @__PURE__ */ jsx66(
       GameScreenHost,
       {
         selected,
@@ -6878,7 +6929,24 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-tile-chip--fun { color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
 
 /* Game screen host: back-row + placeholder body */
-.ss-w-gscreen { display: flex; flex-direction: column; gap: 0; }
+/* Game screen fills the panel; the board scrolls internally and the search/input bar stays
+   pinned at the bottom so the fan never has to scroll to reach it. */
+.ss-w-gscreen-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px; overflow: hidden; }
+.ss-w-gscreen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
+.ss-w-gscreen > .ss-w-gxi, .ss-w-gscreen > .ss-w-gt, .ss-w-gscreen > .ss-w-cpath,
+.ss-w-gscreen > .ss-w-btg, .ss-w-gscreen > .ss-w-hl { flex: 1; min-height: 0; }
+/* Scrollable board + guess-history region. */
+.ss-w-gscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
+/* Bottom-pinned bar (search input / action). */
+.ss-w-gpin { flex-shrink: 0; padding-top: 10px; }
+/* Heads stay put above the scroll region. */
+.ss-w-gxi-head, .ss-w-gt-head, .ss-w-cpath-head, .ss-w-btg-head { flex-shrink: 0; }
+/* Mystery Tiger explainer key (\u2713 / \u25B2 / \u25BC). */
+.ss-w-gt-key { white-space: nowrap; }
+.ss-w-gt-key b { font-weight: 800; color: var(--ss-w-ink); }
+.ss-w-gt-key-ok { color: var(--ss-w-correct) !important; }
+/* Higher or Lower terminal score unit. */
+.ss-w-hl-over-unit { font-size: 14px; font-weight: 700; color: var(--ss-w-faint); }
 .ss-w-gscreen-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0 10px; align-self: flex-start; }
 .ss-w-gscreen-back-arrow { font-size: 11px; font-weight: 700; }
 .ss-w-gscreen-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; color: var(--ss-w-faint); font-size: 13px; text-align: center; }
@@ -6932,7 +7000,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-gtta-i { width: 100%; box-sizing: border-box; padding: 9px 12px; 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; outline: none; transition: border-color .12s; }
 .ss-w-gtta-i:focus { border-color: var(--ss-w-accent); }
 .ss-w-gtta-i:disabled { opacity: .5; cursor: not-allowed; }
-.ss-w-gtta-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 10px; max-height: 180px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
+/* Opens UPWARD (bottom-anchored) because the input is pinned to the panel's bottom edge \u2014 a
+   downward menu would be clipped off-screen. */
+.ss-w-gtta-drop { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); top: auto; z-index: 10; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 10px; max-height: 200px; overflow-y: auto; box-shadow: 0 -4px 16px rgba(0,0,0,.16); }
 .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); }
@@ -6944,10 +7014,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Guess rows \u2014 one labelled block per guess */
 .ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
 /* First-load legend (empty state) */
-.ss-w-gt-legend { display: flex; flex-direction: column; gap: 8px; }
-.ss-w-gt-legend-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.35; }
-.ss-w-gtile--legend { background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); color: var(--ss-w-faint); }
-.ss-w-gtile--legend .ss-w-gtile-lab { opacity: .9; }
+.ss-w-gt-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.4; }
 .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; }
@@ -7066,8 +7133,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-btg-cell--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)); }
 .ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
 .ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
-.ss-w-btg-cell-score { font-size: 14px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
-.ss-w-btg-cell-check { font-size: 12px; color: var(--ss-w-correct); line-height: 1; }
+.ss-w-btg-cell-nm { font-size: 8.5px; font-weight: 600; line-height: 1.05; color: var(--ss-w-ink); text-align: center; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.ss-w-btg-cell-score { font-size: 12px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
+.ss-w-btg-cell--correct .ss-w-btg-cell-score { color: var(--ss-w-correct); }
+.ss-w-btg-cell-check { color: var(--ss-w-correct); line-height: 1; }
 .ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
 /* Scoped search sheet: slides up over the grid */
 .ss-w-btg-sheet { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
@@ -7089,12 +7158,21 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
    space-between distributes the formation lines top\u2192bottom like a pitch (GK at the back, forwards
    forward); yard-line stripes reinforce the read. Without a height the lines collapse together. */
-.ss-w-gxi-pitch { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 300px; padding: 18px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line));
+/* A football pitch is grass-green regardless of the operator accent, so the field uses fixed
+   green values (not --ss-w-correct, which is a muted per-operator token that vanished on dark
+   themes) plus visible horizontal yard-lines and a brighter halfway line. */
+.ss-w-gxi-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 210px; padding: 14px 10px; border-radius: 14px; border: 1px solid rgba(46, 160, 86, .38);
   background:
-    linear-gradient(180deg, color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)), color-mix(in srgb, var(--ss-w-correct) 4%, var(--ss-w-panel))),
-    repeating-linear-gradient(180deg, transparent 0 40px, color-mix(in srgb, var(--ss-w-ink) 4%, transparent) 40px 80px); }
-.ss-w-gxi-prow { display: flex; justify-content: center; align-items: center; gap: 14px; }
-.ss-w-gxi-flag { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); box-shadow: 0 1px 3px rgba(0,0,0,.14); overflow: hidden; }
+    linear-gradient(180deg, rgba(46, 160, 86, .015) 0, rgba(46, 160, 86, .015) 49.5%, rgba(255,255,255,.14) 49.5%, rgba(255,255,255,.14) 50.5%, rgba(46, 160, 86, .015) 50.5%),
+    repeating-linear-gradient(180deg, transparent 0 31px, rgba(255,255,255,.045) 31px 32px),
+    linear-gradient(180deg, rgba(46, 160, 86, .28), rgba(38, 132, 71, .16)); }
+.ss-w-gxi-prow { display: flex; justify-content: center; align-items: flex-start; gap: 12px; }
+.ss-w-gxi-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 46px; }
+.ss-w-gxi-flag { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; background: rgba(9, 12, 10, .55); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 1px 3px rgba(0,0,0,.3); overflow: hidden; }
+/* A slot whose player has been revealed by a wrong guess. */
+.ss-w-gxi-flag--revealed { border-color: var(--ss-w-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-w-accent) 45%, transparent); }
+.ss-w-gxi-flag-lab { font-size: 8px; line-height: 1.05; font-weight: 700; text-align: center; color: var(--ss-w-accent); max-width: 46px; word-break: break-word; }
+.ss-w-gxi-revnote { font-size: 11px; color: var(--ss-w-faint); }
 /* Wrong-guess trail */
 .ss-w-gxi-wrong { display: flex; flex-wrap: wrap; gap: 6px; }
 .ss-w-gxi-wrong-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); text-decoration: line-through; }