@sensiblestats/widget-react 0.50.2 → 0.52.0

package/dist/index.cjs

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
 // src/kickoff.ts
@@ -138,6 +138,13 @@ var STRINGS = {
     leaderboardOffBoard: "Outside top 50",
     leaderboardThisWeek: "This week",
     leaderboardAllTime: "All time",
+    leaderboardEmptyFreshTitle: "New week, blank slate",
+    leaderboardEmptyFreshBody: "No scores yet. The first fan to play a game takes #1.",
+    leaderboardEmptyColdTitle: "Be the first up",
+    leaderboardEmptyColdBody: "Nobody's on the board yet. Play a game and you're #1.",
+    leaderboardEmptyCta: "Play today's games",
+    leaderboardLastWeekLabel: "Last week",
+    leaderboardAllTimeEmpty: "The all-time board fills as fans play \u2014 nothing here yet.",
     gamePlay: "Play",
     gameResume: "Resume",
     gameLocked: "Locked",
@@ -228,6 +235,13 @@ var STRINGS = {
     leaderboardOffBoard: "\u0130lk 50 d\u0131\u015F\u0131nda",
     leaderboardThisWeek: "Bu hafta",
     leaderboardAllTime: "T\xFCm zamanlar",
+    leaderboardEmptyFreshTitle: "Yeni hafta, temiz sayfa",
+    leaderboardEmptyFreshBody: "Hen\xFCz skor yok. Oynayan ilk taraftar 1. s\u0131raya ge\xE7er.",
+    leaderboardEmptyColdTitle: "\u0130lk sen ol",
+    leaderboardEmptyColdBody: "Panoda hen\xFCz kimse yok. Bir oyun oyna, 1. s\u0131ra senin.",
+    leaderboardEmptyCta: "Bug\xFCn\xFCn oyunlar\u0131n\u0131 oyna",
+    leaderboardLastWeekLabel: "Ge\xE7en hafta",
+    leaderboardAllTimeEmpty: "T\xFCm zamanlar panosu taraftarlar oynad\u0131k\xE7a dolar \u2014 hen\xFCz bir \u015Fey yok.",
     gamePlay: "Oyna",
     gameResume: "Devam et",
     gameLocked: "Kilitli",
@@ -337,6 +351,13 @@ function normalizeUi(cfg) {
     leaderboardOffBoard: strings.leaderboardOffBoard,
     leaderboardThisWeek: strings.leaderboardThisWeek,
     leaderboardAllTime: strings.leaderboardAllTime,
+    leaderboardEmptyFreshTitle: strings.leaderboardEmptyFreshTitle,
+    leaderboardEmptyFreshBody: strings.leaderboardEmptyFreshBody,
+    leaderboardEmptyColdTitle: strings.leaderboardEmptyColdTitle,
+    leaderboardEmptyColdBody: strings.leaderboardEmptyColdBody,
+    leaderboardEmptyCta: strings.leaderboardEmptyCta,
+    leaderboardLastWeekLabel: strings.leaderboardLastWeekLabel,
+    leaderboardAllTimeEmpty: strings.leaderboardAllTimeEmpty,
     gamePlay: strings.gamePlay,
     gameResume: strings.gameResume,
     gameLocked: strings.gameLocked,
@@ -1908,7 +1929,7 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_react11 = require("react");
@@ -4011,7 +4032,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/GamesLoginWall.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -4024,14 +4045,36 @@ var import_jsx_runtime53 = require("react/jsx-runtime");
 var GAME_ICONS = {
   "mystery-tiger": "\u{1F42F}",
   "daily-quiz": "\u{1F9E0}",
-  "career-path": "\u26BD",
-  "beat-the-grid": "\u{1F3AF}",
-  "guess-xi": "\u{1F4CB}",
-  "head-of-league": "\u{1F3C6}"
+  "career-path": "\u{1F9ED}",
+  "beat-the-grid": "\u{1F532}",
+  "guess-the-xi": "\u{1F4CB}",
+  "higher-or-lower": "\u{1F4C8}",
+  "matchday-predictor": "\u{1F3AF}",
+  "starting-xi": "\u{1F455}",
+  "stat-ladder": "\u{1FA9C}",
+  "fan-motm": "\u2B50"
+};
+var GAME_TITLES = {
+  "mystery-tiger": "Mystery Tiger",
+  "daily-quiz": "Daily Quiz",
+  "career-path": "Career Path",
+  "beat-the-grid": "Beat the Grid",
+  "guess-the-xi": "Guess the XI",
+  "higher-or-lower": "Higher or Lower",
+  "matchday-predictor": "Matchday Predictor",
+  "starting-xi": "Starting XI",
+  "stat-ladder": "Stat Ladder",
+  "fan-motm": "Fan MOTM"
 };
 function gameIcon(game) {
   return GAME_ICONS[game.gameId] ?? (game.kind === "fixture" ? "\u{1F4C5}" : "\u{1F3AE}");
 }
+function prettifyGameId(gameId) {
+  return gameId.split("-").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
+}
+function gameTitle(game) {
+  return game.title ?? GAME_TITLES[game.gameId] ?? prettifyGameId(game.gameId);
+}
 function formatCountdown(lockAtUtc) {
   const diff = new Date(lockAtUtc).getTime() - Date.now();
   if (diff <= 0) return null;
@@ -4072,7 +4115,7 @@ function GameTile({
   const statusClass = `ss-w-tile-status ss-w-tile-status--${game.status}`;
   const inner = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ss-w-tile-icon", children: gameIcon(game) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ss-w-tile-title", children: game.title ?? game.gameId }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ss-w-tile-title", children: gameTitle(game) }),
     countdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: statusClass, "data-testid": "tile-countdown", children: countdown }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: statusClass, children: statusLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: `ss-w-tile-chip ss-w-tile-chip--${game.ranked ? "skill" : "fun"}`, children: game.ranked ? "Skill" : "For fun" })
   ] });
@@ -4123,7 +4166,7 @@ function GamesHub({
 }
 
 // src/components/GameScreenHost.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/useGamePlay.ts
 var import_react28 = require("react");
@@ -4783,6 +4826,90 @@ function BeatTheGridGame({
   ] });
 }
 
+// src/components/games/GuessTheXiGame.tsx
+var import_react32 = require("react");
+
+// src/components/games/nationFlags.ts
+var FLAGS = {
+  england: "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}",
+  scotland: "\u{1F3F4}\u{E0067}\u{E0062}\u{E0073}\u{E0063}\u{E0074}\u{E007F}",
+  wales: "\u{1F3F4}\u{E0067}\u{E0062}\u{E0077}\u{E006C}\u{E0073}\u{E007F}",
+  "northern ireland": "\u{1F1EC}\u{1F1E7}",
+  "republic of ireland": "\u{1F1EE}\u{1F1EA}",
+  ireland: "\u{1F1EE}\u{1F1EA}",
+  "united kingdom": "\u{1F1EC}\u{1F1E7}",
+  france: "\u{1F1EB}\u{1F1F7}",
+  spain: "\u{1F1EA}\u{1F1F8}",
+  portugal: "\u{1F1F5}\u{1F1F9}",
+  germany: "\u{1F1E9}\u{1F1EA}",
+  italy: "\u{1F1EE}\u{1F1F9}",
+  netherlands: "\u{1F1F3}\u{1F1F1}",
+  belgium: "\u{1F1E7}\u{1F1EA}",
+  switzerland: "\u{1F1E8}\u{1F1ED}",
+  austria: "\u{1F1E6}\u{1F1F9}",
+  denmark: "\u{1F1E9}\u{1F1F0}",
+  sweden: "\u{1F1F8}\u{1F1EA}",
+  norway: "\u{1F1F3}\u{1F1F4}",
+  finland: "\u{1F1EB}\u{1F1EE}",
+  iceland: "\u{1F1EE}\u{1F1F8}",
+  poland: "\u{1F1F5}\u{1F1F1}",
+  czechia: "\u{1F1E8}\u{1F1FF}",
+  "czech republic": "\u{1F1E8}\u{1F1FF}",
+  croatia: "\u{1F1ED}\u{1F1F7}",
+  serbia: "\u{1F1F7}\u{1F1F8}",
+  "bosnia and herzegovina": "\u{1F1E7}\u{1F1E6}",
+  greece: "\u{1F1EC}\u{1F1F7}",
+  romania: "\u{1F1F7}\u{1F1F4}",
+  ukraine: "\u{1F1FA}\u{1F1E6}",
+  russia: "\u{1F1F7}\u{1F1FA}",
+  hungary: "\u{1F1ED}\u{1F1FA}",
+  slovakia: "\u{1F1F8}\u{1F1F0}",
+  slovenia: "\u{1F1F8}\u{1F1EE}",
+  turkey: "\u{1F1F9}\u{1F1F7}",
+  t\u00FCrkiye: "\u{1F1F9}\u{1F1F7}",
+  albania: "\u{1F1E6}\u{1F1F1}",
+  "north macedonia": "\u{1F1F2}\u{1F1F0}",
+  brazil: "\u{1F1E7}\u{1F1F7}",
+  argentina: "\u{1F1E6}\u{1F1F7}",
+  uruguay: "\u{1F1FA}\u{1F1FE}",
+  colombia: "\u{1F1E8}\u{1F1F4}",
+  chile: "\u{1F1E8}\u{1F1F1}",
+  peru: "\u{1F1F5}\u{1F1EA}",
+  ecuador: "\u{1F1EA}\u{1F1E8}",
+  paraguay: "\u{1F1F5}\u{1F1FE}",
+  mexico: "\u{1F1F2}\u{1F1FD}",
+  "united states": "\u{1F1FA}\u{1F1F8}",
+  usa: "\u{1F1FA}\u{1F1F8}",
+  canada: "\u{1F1E8}\u{1F1E6}",
+  jamaica: "\u{1F1EF}\u{1F1F2}",
+  nigeria: "\u{1F1F3}\u{1F1EC}",
+  ghana: "\u{1F1EC}\u{1F1ED}",
+  senegal: "\u{1F1F8}\u{1F1F3}",
+  ivorycoast: "\u{1F1E8}\u{1F1EE}",
+  "cote d'ivoire": "\u{1F1E8}\u{1F1EE}",
+  "ivory coast": "\u{1F1E8}\u{1F1EE}",
+  cameroon: "\u{1F1E8}\u{1F1F2}",
+  egypt: "\u{1F1EA}\u{1F1EC}",
+  morocco: "\u{1F1F2}\u{1F1E6}",
+  algeria: "\u{1F1E9}\u{1F1FF}",
+  tunisia: "\u{1F1F9}\u{1F1F3}",
+  mali: "\u{1F1F2}\u{1F1F1}",
+  "south africa": "\u{1F1FF}\u{1F1E6}",
+  "dr congo": "\u{1F1E8}\u{1F1E9}",
+  japan: "\u{1F1EF}\u{1F1F5}",
+  "south korea": "\u{1F1F0}\u{1F1F7}",
+  korea: "\u{1F1F0}\u{1F1F7}",
+  australia: "\u{1F1E6}\u{1F1FA}",
+  "saudi arabia": "\u{1F1F8}\u{1F1E6}",
+  iran: "\u{1F1EE}\u{1F1F7}",
+  "new zealand": "\u{1F1F3}\u{1F1FF}"
+};
+function nationalityFlag(nationality) {
+  if (!nationality) return "\u{1F3F3}\uFE0F";
+  const key = nationality.trim().toLowerCase();
+  return FLAGS[key] ?? nationality.slice(0, 3).toUpperCase();
+}
+
 // src/components/games/GuessTheXiGame.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function parseClientState5(json) {
@@ -4793,6 +4920,16 @@ function parseClientState5(json) {
     return null;
   }
 }
+function toRows(positions) {
+  const byRow = /* @__PURE__ */ new Map();
+  positions.forEach((p, i) => {
+    const rowKey = Number(p.slot?.split(":")[0]) || i + 1;
+    const bucket = byRow.get(rowKey) ?? [];
+    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 }),
@@ -4805,51 +4942,90 @@ function GuessTheXiGame({
   submitting,
   onSubmit
 }) {
+  const [query, setQuery] = (0, import_react32.useState)("");
+  const inputId = (0, import_react32.useId)();
   const clientState = parseClientState5(result?.clientStateJson);
   const isOver = result?.alreadyPlayed === true || clientState?.status === "solved" || clientState?.status === "failed";
   const solved = clientState?.status === "solved";
+  const guessedTeamIds = new Set(clientState?.guessHistory.map((g) => g.teamId) ?? []);
+  const rows = config ? toRows(config.positions) : [];
+  const filtered = config && !isOver ? config.teamPool.filter(
+    (t) => !guessedTeamIds.has(t.teamId) && t.teamName.toLowerCase().includes(query.toLowerCase())
+  ) : [];
   function handlePick(teamId) {
     if (!config || isOver || submitting) return;
     const prevGuesses = clientState?.guessHistory.map((g) => ({ teamId: g.teamId })) ?? [];
     const newGuesses = [...prevGuesses, { teamId }];
+    setQuery("");
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
+  const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
   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: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-head", children: [
         /* @__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.jsx)("div", { className: "ss-w-gxi-sub", children: config.poolLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-sub", children: [
+            "Which team? \xB7 ",
+            config.poolLabel
+          ] })
         ] }),
         clientState && !isOver && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "ss-w-gxi-left", children: [
-          "Guess ",
-          clientState.guessesUsed + 1,
-          "/6"
+          Math.max(0, 6 - clientState.guessesUsed),
+          " left"
         ] })
       ] }),
-      config.positions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pitch", children: config.positions.map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-pslot", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-pslot-pos", children: pos.slot }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-pslot-nat", children: pos.nationality })
-      ] }, `${pos.slot}-${i}`)) }),
+      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.jsx)("div", { className: "ss-w-gxi-pool", children: config.teamPool.map((team) => {
-        const guessRecord = clientState?.guessHistory.find((g) => g.teamId === team.teamId);
-        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          "button",
-          {
-            type: "button",
-            className: [
-              "ss-w-gxi-team-btn",
-              guessRecord ? guessRecord.wasCorrect ? "ss-w-gxi-team-btn--correct" : "ss-w-gxi-team-btn--wrong" : ""
-            ].filter(Boolean).join(" "),
-            disabled: submitting,
-            onClick: () => handlePick(team.teamId),
-            children: team.teamName
-          },
-          team.teamId
-        );
-      }) }) : clientState && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${solved ? "solved" : "failed"}`, children: [
+      !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) => {
+          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: [
@@ -4864,7 +5040,7 @@ function GuessTheXiGame({
 }
 
 // src/components/games/DailyQuizGame.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function parseClientState6(json) {
   if (!json) return null;
@@ -4883,7 +5059,7 @@ function DailyQuizGame({
   submitting,
   onSubmit
 }) {
-  const [selections, setSelections] = (0, import_react32.useState)(/* @__PURE__ */ new Map());
+  const [selections, setSelections] = (0, import_react33.useState)(/* @__PURE__ */ new Map());
   const clientState = parseClientState6(result?.clientStateJson);
   const isRevealed = (clientState?.results.length ?? 0) > 0 || result?.alreadyPlayed === true;
   const allAnswered = config != null && selections.size === config.questions.length;
@@ -4963,7 +5139,7 @@ function DailyQuizGame({
 }
 
 // src/components/games/MatchdayPredictorGame.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function parseClientState7(json) {
   if (!json) return null;
@@ -4986,9 +5162,9 @@ function MatchdayPredictorGame({
   submitting,
   onSubmit
 }) {
-  const [homeScore, setHomeScore] = (0, import_react33.useState)(0);
-  const [awayScore, setAwayScore] = (0, import_react33.useState)(0);
-  const [firstScorerPlayerId, setFirstScorerPlayerId] = (0, import_react33.useState)(null);
+  const [homeScore, setHomeScore] = (0, import_react34.useState)(0);
+  const [awayScore, setAwayScore] = (0, import_react34.useState)(0);
+  const [firstScorerPlayerId, setFirstScorerPlayerId] = (0, import_react34.useState)(null);
   const clientState = parseClientState7(result?.clientStateJson);
   const alreadyPlayed = result?.alreadyPlayed === true;
   if (alreadyPlayed && clientState) {
@@ -5138,7 +5314,7 @@ function MatchdayPredictorGame({
 }
 
 // src/components/games/StartingXiGame.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function parseClientState8(json) {
   if (!json) return null;
@@ -5159,7 +5335,7 @@ function StartingXiGame({
   submitting,
   onSubmit
 }) {
-  const [picked, setPicked] = (0, import_react34.useState)([]);
+  const [picked, setPicked] = (0, import_react35.useState)([]);
   const clientState = parseClientState8(result?.clientStateJson);
   const alreadyPlayed = result?.alreadyPlayed === true;
   if (alreadyPlayed) {
@@ -5403,8 +5579,8 @@ function GameScreenHost({
   ui
 }) {
   const { gameId, fixtureId, gameDay = "" } = selected;
-  const [configJson, setConfigJson] = (0, import_react35.useState)(null);
-  (0, import_react35.useEffect)(() => {
+  const [configJson, setConfigJson] = (0, import_react36.useState)(null);
+  (0, import_react36.useEffect)(() => {
     setConfigJson(null);
     if (!conversation) return;
     let cancelled = false;
@@ -5426,12 +5602,12 @@ function GameScreenHost({
     gameDay,
     fixtureId: fixtureId || void 0
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (conversation) hydrate();
   }, [conversation, gameId]);
-  const hydrateRef = (0, import_react35.useRef)(hydrate);
+  const hydrateRef = (0, import_react36.useRef)(hydrate);
   hydrateRef.current = hydrate;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!FIXTURE_GAME_IDS.has(gameId)) return;
     if (rawStatus !== "pending") return;
     const timerId = setInterval(() => {
@@ -5549,7 +5725,7 @@ function GamesPanel({
   ui,
   conversation
 }) {
-  const [selected, setSelected] = (0, import_react36.useState)(null);
+  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)(
@@ -5573,7 +5749,7 @@ function GamesPanel({
 }
 
 // src/components/Leaderboard.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/LeaderboardRow.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -5613,18 +5789,58 @@ function LeaderboardAllTimeRow({
   ] });
 }
 
-// src/components/Leaderboard.tsx
+// src/components/LeaderboardEmpty.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
+function LeaderboardEmpty({
+  segment,
+  lastWeek,
+  weeklyPrize,
+  onPlay,
+  ui
+}) {
+  if (segment === "alltime") {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-lb-empty ss-w-lb-empty--alltime", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: "\u{1F4CA}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "ss-w-lb-empty-body", children: ui.leaderboardAllTimeEmpty })
+    ] });
+  }
+  const fresh = lastWeek != null;
+  const title = fresh ? ui.leaderboardEmptyFreshTitle : ui.leaderboardEmptyColdTitle;
+  const body = fresh ? ui.leaderboardEmptyFreshBody : ui.leaderboardEmptyColdBody;
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-lb-empty", children: [
+    weeklyPrize && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-prize", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-prize-icon", "aria-hidden": "true", children: "\u{1F3C6}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-prize-body", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-prize-text", children: weeklyPrize }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-lb-empty-hero", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: fresh ? "\u{1F3C6}" : "\u{1F3AE}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h4", { className: "ss-w-lb-empty-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "ss-w-lb-empty-body", children: body }),
+      onPlay && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "ss-w-lb-empty-cta", onClick: onPlay, children: ui.leaderboardEmptyCta })
+    ] }),
+    fresh && lastWeek && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-lb-last", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-lb-last-label", children: ui.leaderboardLastWeekLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-lb-last-champ", "aria-hidden": "true", children: "\u{1F947}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-lb-last-handle", children: lastWeek.handle }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-lb-last-points", children: formatPoints(lastWeek.points) })
+    ] })
+  ] });
+}
+
+// src/components/Leaderboard.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function Leaderboard({
   data,
-  ui
+  ui,
+  onPlay
 }) {
-  const [segment, setSegment] = (0, import_react37.useState)("weekly");
+  const [segment, setSegment] = (0, import_react38.useState)("weekly");
   const myRow = segment === "weekly" ? data.myWeeklyRow : data.myAllTimeRow;
   const offBoard = myRow !== null && myRow !== void 0 && myRow.rank === -1;
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-lb2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-seg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  const isEmpty = segment === "weekly" ? data.weeklyTop.length === 0 : data.allTimeTop.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ss-w-lb2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ss-w-seg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         "button",
         {
           type: "button",
@@ -5634,7 +5850,7 @@ function Leaderboard({
           children: ui.leaderboardThisWeek
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         "button",
         {
           type: "button",
@@ -5645,44 +5861,64 @@ function Leaderboard({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-      LeaderboardWeeklyRow,
-      {
-        row,
-        isMe: row.operatorUserId === data.myWeeklyRow?.operatorUserId
-      },
-      row.operatorUserId
-    )) : data.allTimeTop.map((row) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-      LeaderboardAllTimeRow,
+    isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      LeaderboardEmpty,
       {
-        row,
-        isMe: row.operatorUserId === data.myAllTimeRow?.operatorUserId
-      },
-      row.operatorUserId
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
-    myRow != null && (offBoard ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ss-w-lb2-rows", children: [
-      segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
-      segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
-    ] })),
-    segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
+        segment,
+        lastWeek: data.lastWeek,
+        weeklyPrize: data.weeklyPrize,
+        onPlay,
+        ui
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        LeaderboardWeeklyRow,
+        {
+          row,
+          isMe: row.operatorUserId === data.myWeeklyRow?.operatorUserId
+        },
+        row.operatorUserId
+      )) : data.allTimeTop.map((row) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        LeaderboardAllTimeRow,
+        {
+          row,
+          isMe: row.operatorUserId === data.myAllTimeRow?.operatorUserId
+        },
+        row.operatorUserId
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
+      myRow != null && (offBoard ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ss-w-lb2-rows", children: [
+        segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
+        segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
+      ] })),
+      segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
+    ] })
   ] });
 }
 
 // src/components/LeaderboardPanel.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-function LeaderboardPanel({ loggedIn, data, ui }) {
-  if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(GamesLoginWall, { ui });
-  if (data === null) return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-mon-list" });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Leaderboard, { data, ui }) });
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var EMPTY_PAYLOAD = {
+  week: "",
+  weeklyTop: [],
+  myWeeklyRow: null,
+  allTimeTop: [],
+  myAllTimeRow: null,
+  weeklyPrize: null,
+  lastWeek: null
+};
+function LeaderboardPanel({ loggedIn, data, loading, onPlay, ui }) {
+  if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(GamesLoginWall, { ui });
+  if (data === null && loading) return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ss-w-mon-list" });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Leaderboard, { data: data ?? EMPTY_PAYLOAD, ui, onPlay }) });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react38.useState)(false);
-  (0, import_react38.useEffect)(() => {
+  const [modal, setModal] = (0, import_react39.useState)(false);
+  (0, import_react39.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -5695,7 +5931,7 @@ function useIsModal() {
 function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn, conversation }) {
   const { state, close, stop, send, reset } = controller;
   const isModal = useIsModal();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -5706,11 +5942,11 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text);
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       ChatHeader,
       {
         onClose: close,
@@ -5723,7 +5959,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         moreOptionsLabel: ui.moreOptions
       }
     ),
-    monitor && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    monitor && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       TabBar,
       {
         monitor,
@@ -5735,19 +5971,28 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         gamesEnabled: gamesResult?.enabled ?? false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "div",
       {
         style: !monitor || monitor.activeTab === "chat" ? { display: "contents" } : { position: "absolute", inset: 0, visibility: "hidden", display: "flex", flexDirection: "column" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MessageList, { controller, ui, slip, onDashboardTap, monitor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MessageList, { controller, ui, slip, onDashboardTap, monitor })
       }
     ),
-    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TodayPanel, { discovery, ui, monitor }),
-    monitor && monitor.activeTab === "following" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MatchesPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(OddsPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(GamesPanel, { loggedIn: !!loggedIn, games: gamesResult.games, ui, conversation }),
-    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LeaderboardPanel, { loggedIn: !!loggedIn, data: leaderboardResult.data, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: handleSend, onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TodayPanel, { discovery, ui, monitor }),
+    monitor && monitor.activeTab === "following" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MatchesPanel, { monitor, ui, slip }),
+    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(OddsPanel, { monitor, ui, slip }),
+    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(GamesPanel, { loggedIn: !!loggedIn, games: gamesResult.games, ui, conversation }),
+    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      LeaderboardPanel,
+      {
+        loggedIn: !!loggedIn,
+        data: leaderboardResult.data,
+        loading: leaderboardResult.loading,
+        onPlay: () => monitor.setActiveTab("games"),
+        ui
+      }
+    ),
+    (!monitor || monitor.activeTab !== "games" && monitor.activeTab !== "leaderboard") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: handleSend, onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -6701,6 +6946,20 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Off-board treatment: dashed pill indicating rank is outside top N */
 .ss-w-lbgap { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 10px; }
 
+/* ---- Leaderboard empty / weekly-reset default state ---- */
+.ss-w-lb-empty { display: flex; flex-direction: column; gap: 12px; flex: 1; }
+.ss-w-lb-empty-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 16px; border: 1px dashed color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); border-radius: 14px; background: color-mix(in srgb, var(--ss-w-cta) 6%, var(--ss-w-panel)); }
+.ss-w-lb-empty--alltime { align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }
+.ss-w-lb-empty-icon { font-size: 30px; line-height: 1; }
+.ss-w-lb-empty-title { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--ss-w-ink); }
+.ss-w-lb-empty-body { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-faint); }
+.ss-w-lb-empty-cta { margin-top: 6px; border: none; border-radius: 10px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); cursor: pointer; }
+.ss-w-lb-empty-cta:hover { filter: brightness(1.04); }
+.ss-w-lb-last { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--ss-w-line); font-size: 11px; }
+.ss-w-lb-last-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ss-w-faint); }
+.ss-w-lb-last-handle { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-lb-last-points { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+
 /* ---- Mystery Tiger game screen (D3) ---- */
 .ss-w-gt { display: flex; flex-direction: column; gap: 10px; }
 /* Typeahead wrapper: relative so the dropdown can position under it */
@@ -6760,9 +7019,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-hlbtns { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
 .ss-w-hl-or { text-align: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); }
 .ss-w-hlbtn { font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 9px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--ss-w-line); white-space: nowrap; transition: border-color .1s, background .1s; }
-.ss-w-hlbtn--up { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); border-color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
-.ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
-.ss-w-hlbtn:hover:not(:disabled) { border-color: var(--ss-w-accent); }
+/* Both options are neutral until picked \u2014 an amber default read as "already selected". */
+.ss-w-hlbtn--up, .ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
+.ss-w-hlbtn:hover:not(:disabled) { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); color: var(--ss-w-accent); }
 .ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
 /* Run-over terminal panel */
 .ss-w-hl-over { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
@@ -6789,18 +7048,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
 .ss-w-cpath-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
 /* Career sequence \u2014 horizontal crests with arrows */
-.ss-w-cpath-seq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 13px 11px; }
-.ss-w-cpath-arrow { align-self: center; color: var(--ss-w-faint); font-size: 13px; padding-top: 10px; }
+.ss-w-cpath-seq { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 13px 11px; overflow-x: auto; overscroll-behavior-x: contain; }
+.ss-w-cpath-arrow { align-self: center; flex: none; color: var(--ss-w-faint); font-size: 13px; padding-top: 10px; }
 /* Single club \u2014 small vertical card */
-.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
+.ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; flex: none; }
 .ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
 .ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-faint); }
-.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
+.ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.15; max-width: 56px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
 .ss-w-cpath-loan-badge { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-accent) 15%, var(--ss-w-panel)); color: var(--ss-w-accent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
 .ss-w-cpath-club--loan .ss-w-cpath-crest { border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
 /* Hidden clubs chip */
-.ss-w-cpath-hidden { align-self: center; font-size: 9px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }
+.ss-w-cpath-hidden { align-self: center; flex: none; white-space: nowrap; font-size: 9px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }
 /* Hint line */
 .ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
 /* Terminal outcome */
@@ -6864,23 +7123,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
 .ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
 .ss-w-gxi-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
-/* Positions pitch: compact slot grid */
-.ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
-.ss-w-gxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 10px; min-width: 52px; }
-.ss-w-gxi-pslot-pos { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-accent); }
-.ss-w-gxi-pslot-nat { font-size: 10px; color: var(--ss-w-faint); font-weight: 500; text-align: center; line-height: 1.2; }
+/* Pitch: a flag per slot laid out in formation rows on a green field */
+.ss-w-gxi-pitch { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)), color-mix(in srgb, var(--ss-w-correct) 4%, var(--ss-w-panel))); }
+.ss-w-gxi-prow { display: flex; justify-content: space-around; align-items: center; gap: 8px; }
+.ss-w-gxi-flag { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 19px; 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; }
+/* 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; }
 /* Earned reveals */
 .ss-w-gxi-reveals { display: flex; flex-direction: column; gap: 4px; }
 .ss-w-gxi-reveal { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 22%, var(--ss-w-line)); border-radius: 8px; }
 .ss-w-gxi-reveal-slot { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-cta-ink, #1b1300); background: var(--ss-w-cta); border-radius: 6px; padding: 1px 6px; flex: none; }
 .ss-w-gxi-reveal-val { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
-/* Team pool: responsive flex grid of buttons */
-.ss-w-gxi-pool { display: flex; flex-wrap: wrap; gap: 6px; }
-.ss-w-gxi-team-btn { font: inherit; font-size: 12.5px; font-weight: 650; border-radius: 10px; padding: 9px 14px; cursor: pointer; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); transition: background .1s, border-color .1s; }
-.ss-w-gxi-team-btn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
-.ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
-.ss-w-gxi-team-btn--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); color: var(--ss-w-correct); }
-.ss-w-gxi-team-btn--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); text-decoration: line-through; opacity: .65; }
 /* Terminal outcome banner */
 .ss-w-gxi-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
 .ss-w-gxi-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
@@ -7032,7 +7286,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -7057,23 +7311,23 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react39.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const logger = (0, import_react39.useMemo)(
+  const built = (0, import_react40.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const logger = (0, import_react40.useMemo)(
     () => built ? built.client.createEventLogger({
       operatorUserId: cfg?.userContext?.operatorUserId,
       anonymousUserId: cfg?.userContext?.anonymousUserId
     }) : null,
     [built?.client]
   );
-  const ui = (0, import_react39.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react39.useRef)(null);
-  const introDoneRef = (0, import_react39.useRef)(false);
-  const markIntroDone = (0, import_react39.useCallback)(() => {
+  const ui = (0, import_react40.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
+  const rootRef = (0, import_react40.useRef)(null);
+  const introDoneRef = (0, import_react40.useRef)(false);
+  const markIntroDone = (0, import_react40.useCallback)(() => {
     introDoneRef.current = true;
   }, []);
   const convStorageKey = `ss-w-conv:${cfg?.operatorId ?? ""}:${cfg?.userContext?.operatorUserId ?? "anon"}`;
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0, convStorageKey);
-  const [hasToday, setHasToday] = (0, import_react39.useState)(false);
+  const [hasToday, setHasToday] = (0, import_react40.useState)(false);
   const monitor = useLiveMonitor({
     getLiveMonitor: (pins) => built ? built.conversation.getLiveMonitor(pins) : Promise.resolve(null),
     getMarketOdds: (matchId, dev) => built ? built.conversation.getMarketOdds(matchId, dev) : Promise.resolve(null),
@@ -7081,15 +7335,15 @@ function StatsWidget(props) {
     isOpen: controller.state.isOpen,
     hasToday
   });
-  const getSchedule = (0, import_react39.useCallback)(
+  const getSchedule = (0, import_react40.useCallback)(
     (localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes) : Promise.resolve(null),
     [built]
   );
-  const getStates = (0, import_react39.useCallback)(
+  const getStates = (0, import_react40.useCallback)(
     (matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
     [built]
   );
-  const pinnedMatchIds = (0, import_react39.useMemo)(
+  const pinnedMatchIds = (0, import_react40.useMemo)(
     () => monitor.pins.filter((p) => p.kind === "match").map((p) => p.matchId),
     [monitor.pins]
   );
@@ -7101,19 +7355,19 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     setHasToday(todayHasContent);
   }, [todayHasContent]);
   const gamesResult = useGames(built?.conversation ?? null, { activeTab: monitor.activeTab });
   const leaderboardResult = useLeaderboard(built?.conversation ?? null, { activeTab: monitor.activeTab });
   const markTodayActivity = monitor.markTodayActivity;
-  const prevLiveCountRef = (0, import_react39.useRef)(0);
-  (0, import_react39.useEffect)(() => {
+  const prevLiveCountRef = (0, import_react40.useRef)(0);
+  (0, import_react40.useEffect)(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
   }, [discovery.liveCount, markTodayActivity]);
-  const slip = (0, import_react39.useMemo)(
+  const slip = (0, import_react40.useMemo)(
     () => {
       const handler = props.config?.onAddToSlip;
       return {
@@ -7136,18 +7390,18 @@ function StatsWidget(props) {
     },
     [props.config?.onAddToSlip, controller.state.conversationId, built, monitor.markInSlip]
   );
-  const onDashboardTap = (0, import_react39.useMemo)(
+  const onDashboardTap = (0, import_react40.useMemo)(
     () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input), logger) : void 0,
     [built, logger]
   );
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
   const conversationId = controller.state.conversationId ?? void 0;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!logger) return;
     const onHide = () => {
       logger.flushOnHide();
@@ -7164,14 +7418,14 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     ChatPanel,
     {
       controller,
@@ -7185,7 +7439,7 @@ function StatsWidget(props) {
       loggedIn: !!operatorUserId,
       conversation: built?.conversation ?? null
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,