@sensiblestats/widget-react 0.55.0 → 0.56.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.56.0
+
+### Minor Changes
+
+- Fix the daily-games layout and clarity that made them hard to play:
+
+  - **Pinned search / input on every game.** The game screen now fills the panel with the board in an internal scroll region and the search box (or Beat the Grid's cell sheet) pinned to the bottom — no more scrolling to reach it. The typeahead menu opens upward so it is never clipped off the bottom edge.
+  - **Guess the XI formation.** The goalkeeper line now sits at the bottom (football convention) so the flags read as a real formation attacking upward.
+  - **Guess the XI hints on the pitch.** Earned reveals (from wrong guesses) are shown on the relevant flag — the revealed position or player name — instead of cryptic "row:col" codes like "1:1 G".
+  - **Career Path & Mystery Tiger explainers.** Each now opens with a one-line "how to play"; Mystery Tiger also shows a ✓ / ▲ / ▼ key so the tiles make sense.
+  - **Higher or Lower terminal.** Clearer end-of-run summary (labelled points, "correct in a row").
+
 ## 0.55.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -4399,43 +4399,65 @@ function MysteryTigerGame({
           " left"
         ] })
       ] }),
-      guessResults.length === 0 && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("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__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrows", children: guessResults.map((gr, i) => {
-        const player = config.squadPlayers.find((p) => p.id === gr.playerId);
-        return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess-nm", children: [
-            i + 1,
-            " \xB7 ",
-            player?.name ?? `#${gr.playerId}`
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrow", children: ATTR_KEYS.map((key) => {
-            const v = gr[key];
-            const arrow = directionArrow(v);
-            return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-              "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__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: [
-                    tileFace(key, v),
-                    arrow && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-dir", children: arrow })
-                  ] })
-                ]
-              },
-              key
-            );
-          }) })
-        ] }, gr.playerId);
-      }) }),
-      clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-hint", children: [
-        "\u{1F4A1} ",
-        clientState.hintLine
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gscroll", children: [
+        !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("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__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "ss-w-gt-key", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("b", { className: "ss-w-gt-key-ok", children: "\u2713" }),
+            " match \xB7 ",
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("b", { children: "\u25B2" }),
+            " higher \xB7 ",
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("b", { children: "\u25BC" }),
+            " lower"
+          ] })
+        ] }),
+        guessResults.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrows", children: guessResults.map((gr, i) => {
+          const player = config.squadPlayers.find((p) => p.id === gr.playerId);
+          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess-nm", children: [
+              i + 1,
+              " \xB7 ",
+              player?.name ?? `#${gr.playerId}`
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrow", children: ATTR_KEYS.map((key) => {
+              const v = gr[key];
+              const arrow = directionArrow(v);
+              return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                "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__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: [
+                      tileFace(key, v),
+                      arrow && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-dir", children: arrow })
+                    ] })
+                  ]
+                },
+                key
+              );
+            }) })
+          ] }, gr.playerId);
+        }) }),
+        clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-hint", children: [
+          "\u{1F4A1} ",
+          clientState.hintLine
+        ] }),
+        isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ss-w-gt-banner ss-w-gt-banner--${clientState.solved ? "solved" : "failed"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-label", children: clientState.solved ? "\u{1F42F} You found them!" : "\u{1F614} Out of guesses" }),
+          clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-banner-sub", children: [
+            clientState.guessesUsed,
+            " guess",
+            clientState.guessesUsed === 1 ? "" : "es",
+            " \xB7 come back tomorrow"
+          ] })
+        ] })
       ] }),
-      !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtta", children: [
+      !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gpin ss-w-gtta", children: [
         /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "input",
           {
@@ -4467,16 +4489,6 @@ function MysteryTigerGame({
           },
           p.id
         )) })
-      ] }),
-      isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `ss-w-gt-banner ss-w-gt-banner--${clientState.solved ? "solved" : "failed"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-label", children: clientState.solved ? "\u{1F42F} You found them!" : "\u{1F614} Out of guesses" }),
-        clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-banner-sub", children: [
-          clientState.guessesUsed,
-          " guess",
-          clientState.guessesUsed === 1 ? "" : "es",
-          " \xB7 come back tomorrow"
-        ] })
       ] })
     ] })
   ] });
@@ -4588,11 +4600,16 @@ function HigherOrLowerGame({
         ] })
       ] }),
       isOver && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-over", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hl-over-title", children: runEndedWrong ? "Run over" : "Nice run!" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hl-over-score", children: score }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hl-over-title", children: runEndedWrong ? "\u{1F6AB} Run over" : "\u{1F389} Perfect run!" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl-over-score", children: [
+          score,
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hl-over-unit", children: " pts" })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("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"
         ] })
       ] })
     ] })
@@ -4657,22 +4674,34 @@ function CareerPathGame({
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-head", children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-title", children: "Career Path" }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-sub", children: "Which player had this career?" })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-sub", children: "Guess the mystery player from the clubs they've played for, oldest first." })
         ] }),
         clientState && !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "ss-w-cpath-left", children: [
           clientState.guessesRemaining,
           " left"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-seq", children: visiblePath.map((spell, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react30.Fragment, { children: [
-        i > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-arrow", "aria-hidden": "true", children: "\u203A" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ClubSpellCard, { spell })
-      ] }, `${spell.clubName}-${i}`)) }),
-      clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-hint", children: [
-        "\u{1F4A1} ",
-        clientState.hintLine
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-gscroll", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-seq", children: visiblePath.map((spell, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react30.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-arrow", "aria-hidden": "true", children: "\u203A" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ClubSpellCard, { spell })
+        ] }, `${spell.clubName}-${i}`)) }),
+        clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-hint", children: [
+          "\u{1F4A1} ",
+          clientState.hintLine
+        ] }),
+        isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-cpath-banner ss-w-cpath-banner--${clientState.solved ? "solved" : "failed"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-label", children: clientState.solved ? "\u2705 Career traced!" : "\u{1F614} Out of guesses" }),
+          clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-banner-sub", children: [
+            clientState.guessesUsed,
+            " guess",
+            clientState.guessesUsed === 1 ? "" : "es",
+            " \xB7 come back tomorrow"
+          ] })
+        ] })
       ] }),
-      !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-gtta", children: [
+      !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-gpin ss-w-gtta", children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "input",
           {
@@ -4704,16 +4733,6 @@ function CareerPathGame({
           },
           p.id
         )) })
-      ] }),
-      isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-cpath-banner ss-w-cpath-banner--${clientState.solved ? "solved" : "failed"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-label", children: clientState.solved ? "\u2705 Career traced!" : "\u{1F614} Out of guesses" }),
-        clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-banner-sub", children: [
-          clientState.guessesUsed,
-          " guess",
-          clientState.guessesUsed === 1 ? "" : "es",
-          " \xB7 come back tomorrow"
-        ] })
       ] })
     ] })
   ] });
@@ -4859,59 +4878,61 @@ function BeatTheGridGame({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-      "div",
-      {
-        className: "ss-w-btg-grid",
-        style: { gridTemplateColumns: `auto repeat(${cols.length}, 1fr)` },
-        role: "grid",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-gc ss-w-btg-gc--corner" }),
-          cols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-gc ss-w-btg-gc--colhdr", children: col }, col)),
-          rows.map((rowLabel, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react31.default.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsx)(
-                "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__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-nm", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-cell-score", children: [
-                      filled.rarityScore,
-                      filled.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-check", "aria-hidden": "true", children: " \u2713" })
-                    ] })
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-empty", "aria-hidden": "true", children: "+" })
-                },
-                `cell-${rowIdx}-${colIdx}`
-              );
-            })
-          ] }, rowIdx))
-        ]
-      }
-    ),
-    isLocked2 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-done", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-done-label", children: "\u{1F532} Grid complete" }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-done-score", children: clientState?.totalScore ?? 0 }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-done-sub", children: [
-        filledCells.filter((c) => c.isCorrect).length,
-        "/",
-        filledCells.length,
-        " correct \xB7 come back tomorrow"
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-gscroll", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        "div",
+        {
+          className: "ss-w-btg-grid",
+          style: { gridTemplateColumns: `auto repeat(${cols.length}, 1fr)` },
+          role: "grid",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-gc ss-w-btg-gc--corner" }),
+            cols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-gc ss-w-btg-gc--colhdr", children: col }, col)),
+            rows.map((rowLabel, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react31.default.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsx)(
+                  "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__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-nm", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-cell-score", children: [
+                        filled.rarityScore,
+                        filled.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-check", "aria-hidden": "true", children: " \u2713" })
+                      ] })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-empty", "aria-hidden": "true", children: "+" })
+                  },
+                  `cell-${rowIdx}-${colIdx}`
+                );
+              })
+            ] }, rowIdx))
+          ]
+        }
+      ),
+      isLocked2 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-done", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-done-label", children: "\u{1F532} Grid complete" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg-done-score", children: clientState?.totalScore ?? 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-done-sub", children: [
+          filledCells.filter((c) => c.isCorrect).length,
+          "/",
+          filledCells.length,
+          " correct \xB7 come back tomorrow"
+        ] })
       ] })
     ] }),
-    activeCell !== null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    activeCell !== null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-gpin", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       SearchSheet,
       {
         row: activeCell.row,
@@ -4923,7 +4944,7 @@ function BeatTheGridGame({
         onPick: handlePick,
         onDismiss: () => setActiveCell(null)
       }
-    )
+    ) })
   ] });
 }
 
@@ -4947,13 +4968,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__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-reveal", "data-reveal-type": reveal.type ?? "", children: [
-    reveal.slot && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-reveal-slot", children: reveal.slot }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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,
@@ -4968,6 +4983,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())
   ) : [];
@@ -4979,6 +4998,7 @@ function GuessTheXiGame({
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
   const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
+  const revealCount = clientState?.earnedReveals.length ?? 0;
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi", "data-testid": "game-screen-guess-the-xi", children: [
     !config && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
     config && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
@@ -4986,7 +5006,7 @@ function GuessTheXiGame({
         /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-title", children: "Guess the XI" }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("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
           ] })
         ] }),
@@ -4995,64 +5015,76 @@ function GuessTheXiGame({
           " left"
         ] })
       ] }),
-      rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pitch", children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-prow", children: row.map((pos, c) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        "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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-reveals", children: clientState.earnedReveals.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RevealCard, { reveal: r }, i)) }),
-      !isOver ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-        wrongGuesses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-wrong", children: wrongGuesses.map((g) => {
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gscroll", children: [
+        rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pitch", children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-prow", children: row.map((pos, c) => {
+          const rev = pos.slot ? revealBySlot.get(pos.slot) : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-slot", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "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__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-flag-lab", children: rev.value })
+          ] }, `${pos.slot}-${c}`);
+        }) }, r)) }),
+        revealCount > 0 && !isOver && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-wrong", children: wrongGuesses.map((g) => {
           const team = config.teamPool.find((t) => t.teamId === g.teamId);
           return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-wrong-pill", children: team?.teamName ?? `#${g.teamId}` }, g.teamId);
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gtta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            "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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((t) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            "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__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${solved ? "solved" : "failed"}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-banner-label", children: solved ? "\u2705 Solved!" : "\u{1F614} Out of guesses" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-banner-score", children: clientState.score }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-banner-sub", children: [
-          clientState.guessesUsed,
-          " guess",
-          clientState.guessesUsed === 1 ? "" : "es",
-          " \xB7 come back tomorrow"
+        isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${solved ? "solved" : "failed"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-banner-label", children: solved ? "\u2705 Solved!" : "\u{1F614} Out of guesses" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-banner-score", children: clientState.score }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-banner-sub", children: [
+            clientState.guessesUsed,
+            " guess",
+            clientState.guessesUsed === 1 ? "" : "es",
+            " \xB7 come back tomorrow"
+          ] })
         ] })
+      ] }),
+      !isOver && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gpin ss-w-gtta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "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__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((t) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "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
+        )) })
       ] })
     ] })
   ] });
@@ -5749,7 +5781,7 @@ function GamesPanel({
   const [selected, setSelected] = (0, import_react37.useState)(null);
   if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(GamesLoginWall, { ui });
   if (selected !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ss-w-gscreen-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       GameScreenHost,
       {
         selected,
@@ -6934,7 +6966,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; }
@@ -6988,7 +7037,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); }
@@ -7147,13 +7198,18 @@ 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); }
+.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; }