@sensiblestats/widget-react 0.55.0 → 0.57.0

package/dist/index.js

@@ -1687,18 +1687,19 @@ function computeGameDay(timezone) {
   return new Intl.DateTimeFormat("en-CA", { timeZone: timezone }).format(/* @__PURE__ */ new Date());
 }
 function useGames(conversation, { activeTab, operatorTimezone }) {
-  const [enabled, setEnabled] = useState4(true);
+  const [enabled, setEnabled] = useState4(false);
   const [games, setGames] = useState4([]);
   const [loading, setLoading] = useState4(false);
   const [refreshCount, setRefreshCount] = useState4(0);
   const inFlightRef = useRef5(false);
-  const enabledRef = useRef5(true);
+  const hardOffRef = useRef5(false);
   const conversationRef = useRef5(conversation);
   conversationRef.current = conversation;
   const tzRef = useRef5(operatorTimezone ?? DEFAULT_TZ);
   tzRef.current = operatorTimezone ?? DEFAULT_TZ;
+  const ready = conversation != null;
   useEffect5(() => {
-    if (!enabledRef.current) return;
+    if (hardOffRef.current) return;
     let active = true;
     const doFetch = async () => {
       const conv = conversationRef.current;
@@ -1710,10 +1711,12 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
         const result = await conv.getGames(gameDay);
         if (!active) return;
         if (result === null) {
-          enabledRef.current = false;
+          hardOffRef.current = true;
           setEnabled(false);
+          setGames([]);
         } else {
           setGames(result.games);
+          setEnabled(result.games.length > 0);
         }
       } catch {
       } finally {
@@ -1725,7 +1728,7 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
     let intervalId;
     if (activeTab === "games") {
       intervalId = window.setInterval(() => {
-        if (!enabledRef.current) {
+        if (hardOffRef.current) {
           window.clearInterval(intervalId);
           return;
         }
@@ -1734,9 +1737,10 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
     }
     return () => {
       active = false;
+      inFlightRef.current = false;
       if (intervalId !== void 0) window.clearInterval(intervalId);
     };
-  }, [activeTab, refreshCount]);
+  }, [activeTab, refreshCount, ready]);
   const refresh = useCallback4(() => {
     setRefreshCount((c) => c + 1);
   }, []);
@@ -4362,43 +4366,65 @@ function MysteryTigerGame({
           " left"
         ] })
       ] }),
-      guessResults.length === 0 && !isOver && /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-lead", children: "Guess any squad player \u2014 each guess reveals how close you are on position, nationality, age, shirt and apps." }),
-      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",
           {
@@ -4430,16 +4456,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"
-        ] })
       ] })
     ] })
   ] });
@@ -4551,11 +4567,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"
         ] })
       ] })
     ] })
@@ -4620,22 +4641,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",
           {
@@ -4667,16 +4700,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"
-        ] })
       ] })
     ] })
   ] });
@@ -4822,59 +4845,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-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"
+    /* @__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,
@@ -4886,7 +4911,7 @@ function BeatTheGridGame({
         onPick: handlePick,
         onDismiss: () => setActiveCell(null)
       }
-    )
+    ) })
   ] });
 }
 
@@ -4910,13 +4935,48 @@ function toRows(positions) {
     bucket.push(p);
     byRow.set(rowKey, bucket);
   });
-  return [...byRow.keys()].sort((a, b) => a - b).map((k) => byRow.get(k));
+  return [...byRow.keys()].sort((a, b) => b - a).map((k) => byRow.get(k));
+}
+function formationLabel(rows) {
+  if (rows.length < 2) return "";
+  const gkFirst = [...rows].reverse();
+  return gkFirst.slice(1).map((r) => r.length).join("-");
+}
+var FORMATION_POSITIONS = {
+  "4-4-2": [["GK"], ["LB", "CB", "CB", "RB"], ["LM", "CM", "CM", "RM"], ["ST", "ST"]],
+  "4-3-3": [["GK"], ["LB", "CB", "CB", "RB"], ["CM", "CM", "CM"], ["LW", "ST", "RW"]],
+  "4-2-3-1": [["GK"], ["LB", "CB", "CB", "RB"], ["CDM", "CDM"], ["LW", "CAM", "RW"], ["ST"]],
+  "4-1-4-1": [["GK"], ["LB", "CB", "CB", "RB"], ["CDM"], ["LM", "CM", "CM", "RM"], ["ST"]],
+  "4-5-1": [["GK"], ["LB", "CB", "CB", "RB"], ["LM", "CM", "CM", "CM", "RM"], ["ST"]],
+  "4-4-1-1": [["GK"], ["LB", "CB", "CB", "RB"], ["LM", "CM", "CM", "RM"], ["CAM"], ["ST"]],
+  "4-1-2-1-2": [["GK"], ["LB", "CB", "CB", "RB"], ["CDM"], ["LM", "RM"], ["CAM"], ["ST", "ST"]],
+  "3-5-2": [["GK"], ["CB", "CB", "CB"], ["LWB", "CM", "CM", "CM", "RWB"], ["ST", "ST"]],
+  "3-4-3": [["GK"], ["CB", "CB", "CB"], ["LM", "CM", "CM", "RM"], ["LW", "ST", "RW"]],
+  "5-3-2": [["GK"], ["LWB", "CB", "CB", "CB", "RWB"], ["CM", "CM", "CM"], ["ST", "ST"]],
+  "5-4-1": [["GK"], ["LWB", "CB", "CB", "CB", "RWB"], ["LM", "CM", "CM", "RM"], ["ST"]]
+};
+function lineFallback(lineIdx, totalLines) {
+  if (lineIdx === 0) return "GK";
+  if (lineIdx === totalLines - 1) return "FWD";
+  if (lineIdx === 1) return "DEF";
+  return "MID";
+}
+function positionsBySlot(formation, rowsAttackFirst) {
+  const gkFirst = [...rowsAttackFirst].reverse();
+  const template = FORMATION_POSITIONS[formation];
+  const map = /* @__PURE__ */ new Map();
+  gkFirst.forEach((line, li) => {
+    line.forEach((entry, ci) => {
+      if (!entry.slot) return;
+      const label = template?.[li]?.[ci] ?? lineFallback(li, gkFirst.length);
+      map.set(entry.slot, label);
+    });
+  });
+  return map;
 }
-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 })
-  ] });
+function surname(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  return parts.length ? parts[parts.length - 1] : name;
 }
 function GuessTheXiGame({
   config,
@@ -4931,6 +4991,12 @@ function GuessTheXiGame({
   const solved = clientState?.status === "solved";
   const guessedTeamIds = new Set(clientState?.guessHistory.map((g) => g.teamId) ?? []);
   const rows = config ? toRows(config.positions) : [];
+  const formation = config?.hasRealFormation ? formationLabel(rows) : "";
+  const posBySlot = config?.hasRealFormation ? positionsBySlot(formation, rows) : /* @__PURE__ */ new Map();
+  const nameBySlot = /* @__PURE__ */ new Map();
+  (clientState?.earnedReveals ?? []).forEach((r) => {
+    if (r.slot && r.type !== "position") nameBySlot.set(r.slot, r.value);
+  });
   const filtered = config && !isOver ? config.teamPool.filter(
     (t) => !guessedTeamIds.has(t.teamId) && t.teamName.toLowerCase().includes(query.toLowerCase())
   ) : [];
@@ -4942,14 +5008,18 @@ function GuessTheXiGame({
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
   const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
+  const revealCount = nameBySlot.size;
   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: [
       /* @__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__ */ jsxs53("div", { className: "ss-w-gxi-title", children: [
+            "Guess the XI",
+            formation && /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-form", "aria-label": `Formation ${formation}`, children: formation })
+          ] }),
           /* @__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
           ] })
         ] }),
@@ -4958,64 +5028,78 @@ 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 posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
+          const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
+          return /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-slot", children: [
+            /* @__PURE__ */ jsx59(
+              "div",
+              {
+                className: `ss-w-gxi-flag${name ? " ss-w-gxi-flag--revealed" : ""}`,
+                title: pos.nationality,
+                "aria-label": `${posLabel ? posLabel + " \u2014 " : ""}${pos.nationality}${name ? " \u2014 " + name : ""}`,
+                children: nationalityFlag(pos.nationality)
+              }
+            ),
+            posLabel && /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-pos", children: posLabel }),
+            name && /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-flag-lab", children: surname(name) })
+          ] }, `${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
+        )) })
       ] })
     ] })
   ] });
@@ -5712,7 +5796,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,
@@ -6897,7 +6981,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; }
@@ -6951,7 +7052,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); }
@@ -7101,7 +7204,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
 /* 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-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+/* Formation pill next to the title, e.g. "4-2-3-1". */
+.ss-w-gxi-form { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 26%, var(--ss-w-line)); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
 .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; }
 /* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
@@ -7110,13 +7215,22 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* 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: 8px; min-height: 300px; padding: 18px 10px; border-radius: 14px; border: 1px solid rgba(46, 160, 86, .38);
+.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, 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: center; gap: 12px; }
+.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); }
+/* Position label shown under every flag (GK, CB, CM, ST\u2026) \u2014 reads the formation and marks the
+   keeper's end. Muted so it sits behind the flag, not competing with it. */
+.ss-w-gxi-pos { font-size: 8.5px; line-height: 1.05; font-weight: 800; letter-spacing: .04em; text-align: center; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
+/* Player surname, shown under the position once a wrong guess reveals it \u2014 in the accent colour. */
+.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; }