@sensiblestats/widget-react 0.49.0 → 0.50.0

package/dist/index.cjs

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react31 = require("react");
+var import_react39 = require("react");
 var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
 // src/kickoff.ts
@@ -1908,7 +1908,7 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-var import_react30 = require("react");
+var import_react38 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_react11 = require("react");
@@ -4011,7 +4011,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-var import_react28 = require("react");
+var import_react36 = require("react");
 
 // src/components/GamesLoginWall.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
@@ -4123,64 +4123,1385 @@ function GamesHub({
 }
 
 // src/components/GameScreenHost.tsx
+var import_react35 = require("react");
+
+// src/useGamePlay.ts
+var import_react28 = require("react");
+function toSubmitResult(payload) {
+  return {
+    // 'pending' means the play is recorded but awaiting resolution (fixture games)
+    alreadyPlayed: payload.status === "played" || payload.status === "graded" || payload.status === "pending",
+    score: payload.score,
+    isCorrect: payload.isCorrect,
+    clientStateJson: payload.clientStateJson,
+    attemptsUsed: payload.attemptsUsed
+  };
+}
+function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
+  const [result, setResult] = (0, import_react28.useState)(null);
+  const [submitting, setSubmitting] = (0, import_react28.useState)(false);
+  const [rawStatus, setRawStatus] = (0, import_react28.useState)(null);
+  const inFlightRef = (0, import_react28.useRef)(false);
+  const convRef = (0, import_react28.useRef)(conversation);
+  convRef.current = conversation;
+  const optsRef = (0, import_react28.useRef)({ gameId, gameDay, fixtureId, refresh });
+  optsRef.current = { gameId, gameDay, fixtureId, refresh };
+  const submit = (0, import_react28.useCallback)(async (answerJson) => {
+    const conv = convRef.current;
+    if (!conv || inFlightRef.current) return;
+    inFlightRef.current = true;
+    setSubmitting(true);
+    try {
+      const opts = optsRef.current;
+      const playResult = await conv.postPlay(opts.gameId, answerJson, opts.gameDay, opts.fixtureId);
+      if (playResult !== null) {
+        setResult(playResult);
+        if (playResult.pointsDelta != null) {
+          opts.refresh?.();
+        }
+      }
+    } catch {
+    } finally {
+      inFlightRef.current = false;
+      setSubmitting(false);
+    }
+  }, []);
+  const hydrate = (0, import_react28.useCallback)(() => {
+    const conv = convRef.current;
+    if (!conv) return;
+    const opts = optsRef.current;
+    void (async () => {
+      try {
+        const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
+        if (payload !== null) {
+          setResult(toSubmitResult(payload));
+          setRawStatus(payload.status);
+        }
+      } catch {
+      }
+    })();
+  }, []);
+  return { result, submitting, submit, hydrate, rawStatus };
+}
+
+// src/components/games/MysteryTigerGame.tsx
+var import_react29 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-function resolveScreen(gameId) {
-  switch (gameId) {
-    // D3/D4 cases go here
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gscreen-body", "data-testid": `game-screen-${gameId}`, children: gameId });
+function parseClientState(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+var ATTR_LABELS = {
+  position: "Pos",
+  nationality: "Nat",
+  age: "Age",
+  shirtNumber: "Kit",
+  apps: "Apps"
+};
+var ATTR_KEYS = [
+  "position",
+  "nationality",
+  "age",
+  "shirtNumber",
+  "apps"
+];
+function MysteryTigerGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const [query, setQuery] = (0, import_react29.useState)("");
+  const inputId = (0, import_react29.useId)();
+  const clientState = parseClientState(result?.clientStateJson);
+  const alreadyGuessedIds = new Set(
+    clientState?.guessResults.map((g) => g.playerId) ?? []
+  );
+  const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
+  const filtered = config && !isOver ? config.squadPlayers.filter(
+    (p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
+  ) : [];
+  function handleSelect(playerId) {
+    if (!config || isOver || submitting) return;
+    const prevGuesses = clientState?.guessResults.map((g) => g.playerId) ?? [];
+    const newGuesses = [...prevGuesses, playerId];
+    setQuery("");
+    onSubmit(JSON.stringify({ guesses: newGuesses }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt", "data-testid": "game-screen-mystery-tiger", children: [
+    !config && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+      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} Better luck tomorrow" }),
+        clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName })
+      ] }),
+      !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            role: "textbox",
+            className: "ss-w-gtta-i",
+            placeholder: "Search squad players\u2026",
+            value: query,
+            disabled: submitting || isOver,
+            onChange: (e) => setQuery(e.target.value),
+            autoComplete: "off",
+            "aria-label": "Search for a player",
+            "aria-autocomplete": "list"
+          }
+        ),
+        query.length > 0 && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((p) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          "div",
+          {
+            className: "ss-w-gtta-opt",
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handleSelect(p.id),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSelect(p.id);
+            },
+            tabIndex: 0,
+            children: p.name
+          },
+          p.id
+        )) })
+      ] }),
+      clientState && clientState.guessResults.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gthdr", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gthdr-c ss-w-gthdr-c--name", children: "Player" }),
+          ATTR_KEYS.map((key) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gthdr-c", children: ATTR_LABELS[key] }, key))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrows", children: clientState.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-gtrow", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrow-nm", children: player?.name ?? `#${gr.playerId}` }),
+            ATTR_KEYS.map((key) => {
+              const v = gr[key];
+              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                "div",
+                {
+                  className: `ss-w-gtile ss-w-gtile--${v.verdict}`,
+                  "data-testid": `verdict-${key}-${i}`,
+                  "data-verdict": v.verdict,
+                  "aria-label": `${ATTR_LABELS[key]}: ${v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
+                  children: v.direction && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-dir", "aria-hidden": "true", children: v.direction === "up" ? "\u2191" : "\u2193" })
+                },
+                key
+              );
+            })
+          ] }, gr.playerId);
+        }) })
+      ] }),
+      clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-hint", children: clientState.hintLine }),
+      !isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-hint", children: [
+        clientState.guessesRemaining,
+        " guess",
+        clientState.guessesRemaining !== 1 ? "es" : "",
+        " remaining"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/games/HigherOrLowerGame.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function parseClientState2(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function AnsweredRow({
+  answered,
+  pair
+}) {
+  const cls = `ss-w-hlrrow ss-w-hlrrow--${answered.wasCorrect ? "correct" : "wrong"}`;
+  const icon = answered.wasCorrect ? "\u2713" : "\u2717";
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cls, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "ss-w-hlrrow-names", children: [
+      pair?.playerAName ?? "?",
+      " vs ",
+      pair?.playerBName ?? "?"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlrrow-pick", children: answered.pick }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlrrow-icon", children: icon })
+  ] });
+}
+function HigherOrLowerGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const clientState = parseClientState2(result?.clientStateJson);
+  const answeredCount = clientState?.answeredPairs.length ?? 0;
+  const runEndedWrong = clientState?.answeredPairs.some((p) => !p.wasCorrect) ?? false;
+  const allPairsAnswered = config != null && answeredCount >= config.pairs.length;
+  const isOver = result?.alreadyPlayed === true || runEndedWrong || allPairsAnswered;
+  const currentPair = config && !isOver ? config.pairs[answeredCount] ?? null : null;
+  function handlePick(pick) {
+    if (!config || isOver || submitting || !currentPair) return;
+    const prevAnswers = clientState?.answeredPairs.map((p) => ({ pairIndex: p.pairIndex, pick: p.pick })) ?? [];
+    const newAnswers = [...prevAnswers, { pairIndex: currentPair.pairIndex, pick }];
+    onSubmit(JSON.stringify({ answers: newAnswers }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hl", "data-testid": "game-screen-higher-or-lower", children: [
+    !config && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlctx", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlctx-fam", children: config.statLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ss-w-hlctx-szn", children: config.seasonLabel })
+      ] }),
+      currentPair && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpair", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpc", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-name", children: currentPair.playerAName }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-val", children: currentPair.playerAValue })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-name", children: currentPair.playerBName }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-val ss-w-hlpc-val--hidden", children: "?" })
+        ] })
+      ] }),
+      !isOver && currentPair && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlbtns", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ss-w-hlbtn",
+            disabled: submitting,
+            onClick: () => handlePick("higher"),
+            children: "Higher"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ss-w-hlbtn",
+            disabled: submitting,
+            onClick: () => handlePick("lower"),
+            children: "Lower"
+          }
+        )
+      ] }),
+      clientState && clientState.answeredPairs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlresults", children: clientState.answeredPairs.map((answered) => {
+        const pair = config.pairs.find((p) => p.pairIndex === answered.pairIndex);
+        const vCls = `ss-w-hlpc-val ss-w-hlpc-val--${answered.wasCorrect ? "correct" : "wrong"}`;
+        const badgeCls = `ss-w-hlpc-badge ss-w-hlpc-badge--${answered.wasCorrect ? "correct" : "wrong"}`;
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlrrow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpair", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpc", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-name", children: pair?.playerAName ?? "?" }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-val", children: pair?.playerAValue })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-hlpc-name", children: pair?.playerBName ?? "?" }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: vCls, children: answered.playerBValue }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: badgeCls, children: answered.wasCorrect ? "\u2713" : "\u2717" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AnsweredRow, { answered, pair })
+        ] }, answered.pairIndex);
+      }) })
+    ] })
+  ] });
+}
+
+// src/components/games/CareerPathGame.tsx
+var import_react30 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function parseClientState3(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function SpellYear({ spell }) {
+  const parts = [];
+  if (spell.startYear) parts.push(String(spell.startYear));
+  if (spell.endYear) parts.push(String(spell.endYear));
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-spell-yr", children: parts.join(" \u2013 ") });
+}
+function ClubSpellCard({ spell }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-cpath-club${spell.isLoan ? " ss-w-cpath-club--loan" : ""}`, children: [
+    spell.crestUrl ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "img",
+      {
+        src: spell.crestUrl,
+        alt: spell.clubName,
+        className: "ss-w-cpath-crest",
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-crest ss-w-cpath-crest--fallback", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-club-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-club-name", children: spell.clubName }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SpellYear, { spell }),
+      spell.isLoan && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-loan-badge", children: "Loan" })
+    ] })
+  ] });
+}
+function CareerPathGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const [query, setQuery] = (0, import_react30.useState)("");
+  const inputId = (0, import_react30.useId)();
+  const clientState = parseClientState3(result?.clientStateJson);
+  const alreadyGuessedIds = new Set(
+    clientState?.guessResults.map((g) => g.playerId) ?? []
+  );
+  const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
+  const visiblePath = clientState?.visiblePath ?? config?.initialPath ?? [];
+  const filtered = config && !isOver ? config.typeaheadPool.filter(
+    (p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
+  ) : [];
+  function handleSelect(playerId) {
+    if (!config || isOver || submitting) return;
+    const prevGuesses = clientState?.guessResults.map((g) => g.playerId) ?? [];
+    const newGuesses = [...prevGuesses, playerId];
+    setQuery("");
+    onSubmit(JSON.stringify({ guesses: newGuesses }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath", "data-testid": "game-screen-career-path", children: [
+    !config && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-ctx", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-cpath-ctx-label", children: "Career clubs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "ss-w-cpath-ctx-count", children: [
+          config.totalClubs,
+          " clubs total"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-path", children: [
+        visiblePath.map((spell, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ClubSpellCard, { spell }, `${spell.clubName}-${i}`)),
+        (clientState?.totalClubs ?? config.totalClubs) > visiblePath.length && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-hidden", children: [
+          "+",
+          (clientState?.totalClubs ?? config.totalClubs) - visiblePath.length,
+          " more clubs hidden"
+        ] })
+      ] }),
+      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 ? "Career traced!" : "Better luck tomorrow" }),
+        clientState.revealedPlayerName && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName })
+      ] }),
+      !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-gtta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            role: "textbox",
+            className: "ss-w-gtta-i",
+            placeholder: "Search players\u2026",
+            value: query,
+            disabled: submitting || isOver,
+            onChange: (e) => setQuery(e.target.value),
+            autoComplete: "off",
+            "aria-label": "Search for a player",
+            "aria-autocomplete": "list"
+          }
+        ),
+        query.length > 0 && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((p) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "div",
+          {
+            className: "ss-w-gtta-opt",
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handleSelect(p.id),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSelect(p.id);
+            },
+            tabIndex: 0,
+            children: p.name
+          },
+          p.id
+        )) })
+      ] }),
+      clientState?.hintLine && !isOver && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "ss-w-cpath-hint", children: clientState.hintLine }),
+      !isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ss-w-cpath-hint", children: [
+        clientState.guessesRemaining,
+        " guess",
+        clientState.guessesRemaining !== 1 ? "es" : "",
+        " remaining"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/games/BeatTheGridGame.tsx
+var import_react31 = __toESM(require("react"), 1);
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function parseClientState4(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function findCellResult(cells, row, col) {
+  return cells.find((c) => c.row === row && c.col === col);
+}
+function SearchSheet({
+  row,
+  col,
+  rowLabel,
+  colLabel,
+  playerPool,
+  alreadyFilledIds,
+  onPick,
+  onDismiss
+}) {
+  const [query, setQuery] = (0, import_react31.useState)("");
+  const inputId = (0, import_react31.useId)();
+  const filtered = playerPool.filter(
+    (p) => !alreadyFilledIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-sheet", "data-testid": "btg-search-sheet", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-sheet-hdr", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-sheet-ctx", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-sheet-row", children: rowLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-sheet-sep", children: "\xD7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-sheet-col", children: colLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-btg-sheet-close",
+          "data-testid": "btg-sheet-dismiss",
+          "aria-label": "Dismiss",
+          onClick: onDismiss,
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-gtta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        "input",
+        {
+          id: inputId,
+          type: "text",
+          role: "textbox",
+          className: "ss-w-gtta-i",
+          placeholder: "Search players\u2026",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          autoComplete: "off",
+          "aria-label": `Search player for ${rowLabel} \xD7 ${colLabel}`,
+          "aria-autocomplete": "list",
+          autoFocus: true
+        }
+      ),
+      query.length > 0 && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-gtta-drop ss-w-btg-ta-list", role: "listbox", children: filtered.map((p) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        "div",
+        {
+          className: "ss-w-gtta-opt",
+          role: "option",
+          "aria-selected": false,
+          onClick: () => onPick(row, col, p.id),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") onPick(row, col, p.id);
+          },
+          tabIndex: 0,
+          children: p.name
+        },
+        p.id
+      )) })
+    ] })
+  ] });
+}
+function BeatTheGridGame({
+  config,
+  result,
+  submitting,
+  onSubmit,
+  playerPool
+}) {
+  const [activeCell, setActiveCell] = (0, import_react31.useState)(null);
+  const clientState = parseClientState4(result?.clientStateJson);
+  const filledCells = clientState?.cells ?? [];
+  const isLocked2 = result?.alreadyPlayed === true || clientState?.isComplete === true;
+  const alreadyFilledIds = new Set(filledCells.map((c) => c.playerId));
+  function handleCellClick(row, col) {
+    if (isLocked2 || submitting) return;
+    const alreadyFilled = findCellResult(filledCells, row, col);
+    if (alreadyFilled) return;
+    setActiveCell({ row, col });
+  }
+  function handlePick(row, col, playerId) {
+    setActiveCell(null);
+    const prevCells = filledCells.map((c) => ({ row: c.row, col: c.col, playerId: c.playerId }));
+    const newCells = [...prevCells, { row, col, playerId }];
+    onSubmit(JSON.stringify({ cells: newCells }));
+  }
+  if (!config) {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-btg", "data-testid": "game-screen-beat-the-grid", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const rows = config.rows;
+  const cols = config.cols;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg", "data-testid": "game-screen-beat-the-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-btg-ctx", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-ctx-score", children: [
+        "Score: ",
+        clientState?.totalScore ?? 0
+      ] }),
+      !isLocked2 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-ctx-left", children: [
+        config.maxGuesses - filledCells.length,
+        " cell",
+        config.maxGuesses - filledCells.length !== 1 ? "s" : "",
+        " left"
+      ] }),
+      isLocked2 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-ctx-done", children: "Complete" })
+    ] }),
+    /* @__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-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))
+        ]
+      }
+    ),
+    activeCell !== null && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      SearchSheet,
+      {
+        row: activeCell.row,
+        col: activeCell.col,
+        rowLabel: rows[activeCell.row] ?? "",
+        colLabel: cols[activeCell.col] ?? "",
+        playerPool,
+        alreadyFilledIds,
+        onPick: handlePick,
+        onDismiss: () => setActiveCell(null)
+      }
+    )
+  ] });
+}
+
+// src/components/games/GuessTheXiGame.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+function parseClientState5(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+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 })
+  ] });
+}
+function GuessTheXiGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const clientState = parseClientState5(result?.clientStateJson);
+  const isOver = result?.alreadyPlayed === true || clientState?.status === "solved" || clientState?.status === "failed";
+  function handlePick(teamId) {
+    if (!config || isOver || submitting) return;
+    const prevGuesses = clientState?.guessHistory.map((g) => ({ teamId: g.teamId })) ?? [];
+    const newGuesses = [...prevGuesses, { teamId }];
+    onSubmit(JSON.stringify({ guesses: newGuesses }));
+  }
+  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.jsx)("div", { className: "ss-w-gxi-ctx", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-ctx-label", children: config.poolLabel }) }),
+      config.positions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pitch", children: config.positions.map((pos) => /* @__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)) }),
+      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 && clientState && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${clientState.status}`, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-banner-label", children: clientState.status === "solved" ? `Solved! ${clientState.score} pts` : "Better luck tomorrow" }) }),
+      /* @__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: isOver || submitting,
+            onClick: () => handlePick(team.teamId),
+            children: team.teamName
+          },
+          team.teamId
+        );
+      }) }),
+      !isOver && clientState && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-hint", children: [
+        "Guess ",
+        clientState.guessesUsed + 1,
+        " of 6"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/games/DailyQuizGame.tsx
+var import_react32 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function parseClientState6(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function findResult(results, index) {
+  return results.find((r) => r.index === index);
+}
+function DailyQuizGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const [selections, setSelections] = (0, import_react32.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;
+  function handleSelect(questionIndex, optionIndex) {
+    if (isRevealed || submitting) return;
+    setSelections((prev) => new Map(prev).set(questionIndex, optionIndex));
+  }
+  function handleSubmit() {
+    if (!config || !allAnswered || isRevealed || submitting) return;
+    const answers = config.questions.map((q) => ({
+      index: q.index,
+      selectedOptionIndex: selections.get(q.index) ?? 0
+    }));
+    onSubmit(JSON.stringify({ answers }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-dq", "data-testid": "game-screen-daily-quiz", children: [
+    !config && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+      isRevealed && result?.score != null && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-dq-score", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ss-w-dq-score-val", children: result.score }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ss-w-dq-score-label", children: "pts" })
+      ] }),
+      !isRevealed && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-dq-prog", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        "div",
+        {
+          className: "ss-w-dq-prog-fill",
+          style: { width: `${Math.round(selections.size / config.questions.length * 100)}%` }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-dq-questions", children: config.questions.map((q) => {
+        const qResult = clientState ? findResult(clientState.results, q.index) : void 0;
+        const selectedIdx = selections.get(q.index);
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-dq-q", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-dq-qstem", children: q.stem }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ss-w-dq-opts", children: q.options.map((opt, optIdx) => {
+            let optCls = "ss-w-dq-qopt";
+            if (qResult) {
+              if (optIdx === qResult.correctOptionIndex) {
+                optCls += " ss-w-dq-qopt--correct";
+              } else if (optIdx === selectedIdx && !qResult.isCorrect) {
+                optCls += " ss-w-dq-qopt--wrong";
+              }
+            } else if (optIdx === selectedIdx) {
+              optCls += " ss-w-dq-qopt--selected";
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: optCls,
+                disabled: isRevealed || submitting,
+                onClick: () => handleSelect(q.index, optIdx),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ss-w-dq-qopt-letter", children: String.fromCharCode(65 + optIdx) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ss-w-dq-qopt-text", children: opt })
+                ]
+              },
+              optIdx
+            );
+          }) }),
+          qResult?.revealText && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: `ss-w-dq-qwhy ss-w-dq-qwhy--${qResult.isCorrect ? "correct" : "wrong"}`, children: qResult.revealText })
+        ] }, q.index);
+      }) }),
+      !isRevealed && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-dq-submit",
+          disabled: !allAnswered || submitting,
+          onClick: handleSubmit,
+          "aria-label": "Submit answers",
+          children: submitting ? "Submitting\u2026" : "Submit"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/games/MatchdayPredictorGame.tsx
+var import_react33 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function parseClientState7(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function isLocked(kickoffUtc) {
+  try {
+    return new Date(kickoffUtc).getTime() <= Date.now();
+  } catch {
+    return true;
+  }
+}
+function MatchdayPredictorGame({
+  config,
+  result,
+  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 clientState = parseClientState7(result?.clientStateJson);
+  const alreadyPlayed = result?.alreadyPlayed === true;
+  if (alreadyPlayed && clientState) {
+    if (!clientState.graded) {
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-live", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-live-score", children: [
+            clientState.predictedHomeScore,
+            " \u2013 ",
+            clientState.predictedAwayScore
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-live-label", children: "Locked in \u2014 awaiting result" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-fun", children: "For fun \u2014 not in the leaderboard" })
+      ] });
+    }
+    const r = clientState.result;
+    const actualScore = `${r.homeScore} \u2013 ${r.awayScore}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-live", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-live-score", children: actualScore }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-live-label", children: "Full-time result" }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-live-outcome", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `ss-w-mp-live-row${clientState.exactScoreCorrect ? " ss-w-mp-live-row--correct" : ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-live-row-key", children: "Exact score" }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-live-row-val", children: clientState.exactScoreCorrect ? "\u2713" : "\u2717" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `ss-w-mp-live-row${clientState.outcomeCorrect ? " ss-w-mp-live-row--correct" : ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-live-row-key", children: "Result (W/D/L)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-live-row-val", children: clientState.outcomeCorrect ? "\u2713" : "\u2717" })
+          ] }),
+          !clientState.firstScorerVoid && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: `ss-w-mp-live-row${clientState.firstScorerCorrect ? " ss-w-mp-live-row--correct" : ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-live-row-key", children: "First scorer" }),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "ss-w-mp-live-row-val", children: [
+              clientState.firstScorerCorrect ? "\u2713" : "\u2717",
+              r.firstScorerName ? ` ${r.firstScorerName}` : ""
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-fun", children: "For fun \u2014 not in the leaderboard" })
+    ] });
+  }
+  if (!config) {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const locked = isLocked(config.kickoffUtc);
+  const disabled = locked || submitting;
+  function handleSubmit() {
+    if (disabled || !config) return;
+    onSubmit(
+      JSON.stringify({
+        homeScore,
+        awayScore,
+        ...firstScorerPlayerId !== null ? { firstScorerPlayerId } : {}
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-pred-score", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-team", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-team-name", children: config.homeTeam.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-stepper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ss-w-mp-stepper-btn",
+              "aria-label": "-",
+              disabled: disabled || homeScore <= 0,
+              onClick: () => setHomeScore((s) => Math.max(0, s - 1)),
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-stepper-val", children: homeScore }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ss-w-mp-stepper-btn",
+              "aria-label": "+",
+              disabled,
+              onClick: () => setHomeScore((s) => s + 1),
+              children: "+"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-sep", children: "\u2013" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-team", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-team-name", children: config.awayTeam.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-stepper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ss-w-mp-stepper-btn",
+              "aria-label": "-",
+              disabled: disabled || awayScore <= 0,
+              onClick: () => setAwayScore((s) => Math.max(0, s - 1)),
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ss-w-mp-stepper-val", children: awayScore }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ss-w-mp-stepper-btn",
+              "aria-label": "+",
+              disabled,
+              onClick: () => setAwayScore((s) => s + 1),
+              children: "+"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    config.scorerPool.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "ss-w-mp-scorer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-scorer-label", children: "First scorer (optional)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-scorer-list", children: config.scorerPool.map((p) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        "button",
+        {
+          type: "button",
+          className: `ss-w-mp-scorer-opt${firstScorerPlayerId === p.playerId ? " ss-w-mp-scorer-opt--selected" : ""}`,
+          disabled,
+          onClick: () => setFirstScorerPlayerId((id) => id === p.playerId ? null : p.playerId),
+          children: p.playerName
+        },
+        p.playerId
+      )) })
+    ] }),
+    locked && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-live-label", children: "Submissions are now closed" }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-mp-savebtn",
+        disabled,
+        onClick: handleSubmit,
+        "aria-label": "Save prediction",
+        children: submitting ? "Saving\u2026" : "Save prediction"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "ss-w-mp-fun", children: "For fun \u2014 not in the leaderboard" })
+  ] });
+}
+
+// src/components/games/StartingXiGame.tsx
+var import_react34 = require("react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function parseClientState8(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function parseFormationRows(formation) {
+  const parts = formation.split("-").map(Number).filter((n) => n > 0);
+  if (parts.length === 0) return [1, 4, 3, 3];
+  return [1, ...parts];
+}
+function StartingXiGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const [picked, setPicked] = (0, import_react34.useState)([]);
+  const clientState = parseClientState8(result?.clientStateJson);
+  const alreadyPlayed = result?.alreadyPlayed === true;
+  if (alreadyPlayed) {
+    if (!clientState) {
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-status", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-status-label", children: "This game has been voided" }) }) });
+    }
+    if (clientState.status === "pending") {
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-status", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ss-w-sxi-status-label", children: [
+        "Prediction locked in (",
+        clientState.predictedCount,
+        " players) \u2014 awaiting result"
+      ] }) }) });
+    }
+    if (clientState.status === "graded") {
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ss-w-sxi-status ss-w-sxi-status--graded", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-status-score", children: clientState.score }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ss-w-sxi-status-label", children: [
+          clientState.correctCount,
+          " correct starters"
+        ] })
+      ] }) });
+    }
+  }
+  if (!config) {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const formationRows = parseFormationRows(config.formation);
+  const pickedSet = new Set(picked);
+  const canSubmit = picked.length === 11 && !submitting;
+  function togglePlayer(playerId) {
+    if (submitting) return;
+    setPicked((prev) => {
+      if (prev.includes(playerId)) {
+        return prev.filter((id) => id !== playerId);
+      }
+      if (prev.length >= 11) return prev;
+      return [...prev, playerId];
+    });
+  }
+  function handleSubmit() {
+    if (!canSubmit) return;
+    onSubmit(JSON.stringify({ predictedPlayerIds: picked }));
+  }
+  let slotIndex = 0;
+  const pitchRows = formationRows.map((count, rowIdx) => {
+    const rowSlots = picked.slice(slotIndex, slotIndex + count);
+    slotIndex += count;
+    return { rowIdx, count, rowSlots };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-formation", children: config.formation }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-pitch", children: pitchRows.map(({ rowIdx, count, rowSlots }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-pitch-row", children: Array.from({ length: count }).map((_, i) => {
+      const playerId = rowSlots[i];
+      const player = playerId != null ? config.squadSheet.find((p) => p.playerId === playerId) : void 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        "div",
+        {
+          className: `ss-w-sxi-pslot${player ? " ss-w-sxi-pslot--filled" : ""}`,
+          onClick: () => {
+            if (player) togglePlayer(player.playerId);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && player) togglePlayer(player.playerId);
+          },
+          tabIndex: player ? 0 : -1,
+          role: player ? "button" : void 0,
+          "aria-label": player ? `Remove ${player.playerName ?? ""}` : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-pslot-num", children: player?.jerseyNumber ?? (rowIdx === 0 ? "GK" : "?") }),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-pslot-name", children: player?.playerName ?? "" })
+          ]
+        },
+        i
+      );
+    }) }, rowIdx)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ss-w-sxi-squad", children: config.squadSheet.map((p) => {
+      const isPicked = pickedSet.has(p.playerId);
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        "div",
+        {
+          className: `ss-w-sxi-squad-row${isPicked ? " ss-w-sxi-squad-row--picked" : ""}`,
+          onClick: () => togglePlayer(p.playerId),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") togglePlayer(p.playerId);
+          },
+          tabIndex: 0,
+          role: "button",
+          "aria-pressed": isPicked,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ss-w-sxi-squad-name", children: p.playerName }),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ss-w-sxi-squad-pos", children: p.positionName })
+          ]
+        },
+        p.playerId
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-sxi-savebtn",
+        disabled: !canSubmit,
+        onClick: handleSubmit,
+        "aria-label": "Predict XI",
+        children: submitting ? "Submitting\u2026" : `Predict XI (${picked.length}/11)`
+      }
+    )
+  ] });
+}
+
+// src/components/games/StatLadderGame.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function parseClientState9(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function StatLadderGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const clientState = parseClientState9(result?.clientStateJson);
+  const revealed = clientState != null;
+  if (!config) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-sl", "data-testid": "game-screen-stat-ladder", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const mysteryName = revealed ? clientState.revealedRank2.playerName : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ss-w-sl", "data-testid": "game-screen-stat-ladder", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-sl-title", children: config.statLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-sl-ladder", children: config.ladder.map((rung) => {
+      const isMystery = rung.rank === 2;
+      let rowCls = "ss-w-sl-lrow";
+      if (isMystery) rowCls += " ss-w-sl-mystery";
+      if (isMystery && revealed) {
+        rowCls = rowCls.replace(" ss-w-sl-mystery", "");
+        rowCls += clientState.isCorrect ? " ss-w-sl-lrow--correct" : " ss-w-sl-lrow--wrong";
+      }
+      const displayName = isMystery ? revealed ? mysteryName : "?" : rung.playerName ?? "?";
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: rowCls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ss-w-sl-lrow-rank", children: [
+          "#",
+          rung.rank
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-sl-lrow-name", children: displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-sl-lrow-stat", children: rung.statValue })
+      ] }, rung.rank);
+    }) }),
+    revealed && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: `ss-w-sl-reveal ss-w-sl-reveal--${clientState.isCorrect ? "correct" : "wrong"}`, children: clientState.isCorrect ? "Correct!" : `Wrong \u2014 it was ${clientState.revealedRank2.playerName}` }),
+    !revealed && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ss-w-sl-picker", children: config.playerPool.map((p) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-sl-picker-opt",
+        disabled: submitting,
+        "aria-label": p.playerName,
+        onClick: () => onSubmit(JSON.stringify({ guessedPlayerId: p.playerId })),
+        children: p.playerName
+      },
+      p.playerId
+    )) })
+  ] });
+}
+
+// src/components/games/FanMotmGame.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function parseClientState10(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function FanMotmGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const clientState = parseClientState10(result?.clientStateJson);
+  const alreadyVoted = result?.alreadyPlayed === true;
+  if (!config) {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ss-w-motm", "data-testid": "game-screen-fan-motm", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const pickedId = clientState?.pickedPlayerId ?? null;
+  function handleVote(candidateId) {
+    if (alreadyVoted || submitting) return;
+    onSubmit(JSON.stringify({ pickedPlayerId: candidateId }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ss-w-motm", "data-testid": "game-screen-fan-motm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ss-w-motm-title", children: "Man of the Match \u2014 your vote" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ss-w-motm-votes", children: config.candidates.map((c) => {
+      const isVoted = alreadyVoted && pickedId === c.playerId;
+      const rowCls = `ss-w-motm-vrow${isVoted ? " ss-w-motm-vrow--voted" : ""}${alreadyVoted ? " ss-w-motm-vrow--result" : ""}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: rowCls,
+          "data-testid": `motm-candidate-${c.playerId}`,
+          disabled: alreadyVoted || submitting,
+          onClick: () => handleVote(c.playerId),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ss-w-motm-vfill", style: { width: isVoted ? "100%" : "0%" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "ss-w-motm-vrow-name", children: c.playerName })
+          ]
+        },
+        c.playerId
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "ss-w-motm-fun", children: "For fun \u2014 unranked community vote" })
+  ] });
+}
+
+// src/components/GameScreenHost.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var FIXTURE_GAME_IDS = /* @__PURE__ */ new Set([
+  "matchday-predictor",
+  "starting-xi",
+  "stat-ladder",
+  "fan-motm"
+]);
+var PENDING_POLL_INTERVAL_MS = 3e4;
+function safeParseConfig(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
   }
 }
 function GameScreenHost({
   selected,
   onBack,
+  conversation,
   ui
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gscreen", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("button", { type: "button", className: "ss-w-gscreen-back", onClick: onBack, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gscreen-back-arrow", "aria-hidden": "true", children: "\u2039" }),
+  const { gameId, fixtureId, gameDay = "" } = selected;
+  const [configJson, setConfigJson] = (0, import_react35.useState)(null);
+  (0, import_react35.useEffect)(() => {
+    setConfigJson(null);
+    if (!conversation) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const payload = await conversation.getGameConfig(gameId, fixtureId, gameDay || void 0);
+        if (!cancelled && payload?.configJson) {
+          setConfigJson(payload.configJson);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [conversation, gameId, fixtureId, gameDay]);
+  const { result, submitting, submit, hydrate, rawStatus } = useGamePlay(conversation, {
+    gameId,
+    gameDay,
+    fixtureId: fixtureId || void 0
+  });
+  (0, import_react35.useEffect)(() => {
+    if (conversation) hydrate();
+  }, [conversation, gameId]);
+  const hydrateRef = (0, import_react35.useRef)(hydrate);
+  hydrateRef.current = hydrate;
+  (0, import_react35.useEffect)(() => {
+    if (!FIXTURE_GAME_IDS.has(gameId)) return;
+    if (rawStatus !== "pending") return;
+    const timerId = setInterval(() => {
+      hydrateRef.current();
+    }, PENDING_POLL_INTERVAL_MS);
+    return () => clearInterval(timerId);
+  }, [gameId, rawStatus]);
+  const sharedProps = {
+    result,
+    submitting,
+    onSubmit: submit,
+    ui
+  };
+  function renderScreen() {
+    switch (gameId) {
+      case "mystery-tiger":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          MysteryTigerGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "higher-or-lower":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          HigherOrLowerGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "career-path":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          CareerPathGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "beat-the-grid":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          BeatTheGridGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson),
+            playerPool: []
+          }
+        );
+      case "guess-the-xi":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          GuessTheXiGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "daily-quiz":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          DailyQuizGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "matchday-predictor":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          MatchdayPredictorGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "starting-xi":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          StartingXiGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "stat-ladder":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          StatLadderGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "fan-motm":
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          FanMotmGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "ss-w-gscreen-body", "data-testid": `game-screen-${gameId}`, children: gameId });
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "ss-w-gscreen", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("button", { type: "button", className: "ss-w-gscreen-back", onClick: onBack, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ss-w-gscreen-back-arrow", "aria-hidden": "true", children: "\u2039" }),
       ui.back
     ] }),
-    resolveScreen(selected.gameId)
+    renderScreen()
   ] });
 }
 
 // src/components/GamesPanel.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function GamesPanel({
   loggedIn,
   games,
   ui,
   conversation
 }) {
-  const [selected, setSelected] = (0, import_react28.useState)(null);
-  if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(GamesLoginWall, { ui });
+  const [selected, setSelected] = (0, import_react36.useState)(null);
+  if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(GamesLoginWall, { ui });
   if (selected !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       GameScreenHost,
       {
         selected,
         onBack: () => setSelected(null),
-        conversation,
+        conversation: conversation ?? null,
         ui
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ss-w-mon-list", "data-testid": "games-hub", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ss-w-mon-list", "data-testid": "games-hub", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     GamesHub,
     {
       games,
-      onOpen: (g) => setSelected({ gameId: g.gameId, fixtureId: g.fixtureId }),
+      onOpen: (g) => setSelected({ gameId: g.gameId, fixtureId: g.fixtureId, gameDay: g.gameDay }),
       ui
     }
   ) });
 }
 
 // src/components/Leaderboard.tsx
-var import_react29 = require("react");
+var import_react37 = require("react");
 
 // src/components/LeaderboardRow.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function formatPoints(n) {
   return n.toLocaleString("en");
 }
@@ -4189,14 +5510,14 @@ function LeaderboardWeeklyRow({
   isMe
 }) {
   const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: rankClass, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: rankClass, children: [
       "#",
       row.rank
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-lb2-handle", children: row.handle }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
-    row.currentStreak > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "ss-w-lb2-streak", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ss-w-lb2-handle", children: row.handle }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
+    row.currentStreak > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "ss-w-lb2-streak", children: [
       "\u{1F525} ",
       row.currentStreak
     ] })
@@ -4207,28 +5528,28 @@ function LeaderboardAllTimeRow({
   isMe
 }) {
   const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: rankClass, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: rankClass, children: [
       "#",
       row.rank
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-lb2-handle", children: row.handle }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ss-w-lb2-handle", children: row.handle }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
   ] });
 }
 
 // src/components/Leaderboard.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Leaderboard({
   data,
   ui
 }) {
-  const [segment, setSegment] = (0, import_react29.useState)("weekly");
+  const [segment, setSegment] = (0, import_react37.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_runtime58.jsxs)("div", { className: "ss-w-lb2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-seg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  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)(
         "button",
         {
           type: "button",
@@ -4238,7 +5559,7 @@ function Leaderboard({
           children: ui.leaderboardThisWeek
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         "button",
         {
           type: "button",
@@ -4249,14 +5570,14 @@ function Leaderboard({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__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_runtime58.jsx)(
+    )) : data.allTimeTop.map((row) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       LeaderboardAllTimeRow,
       {
         row,
@@ -4264,29 +5585,29 @@ function Leaderboard({
       },
       row.operatorUserId
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
-    myRow != null && (offBoard ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ss-w-lb2-rows", children: [
-      segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
-      segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
+    /* @__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_runtime58.jsx)("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
+    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)) }) }) })
   ] });
 }
 
 // src/components/LeaderboardPanel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function LeaderboardPanel({ loggedIn, data, ui }) {
-  if (!loggedIn) return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(GamesLoginWall, { ui });
-  if (data === null) return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-mon-list" });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Leaderboard, { 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 }) });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [modal, setModal] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -4296,10 +5617,10 @@ function useIsModal() {
   }, []);
   return modal;
 }
-function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn }) {
+function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn, conversation }) {
   const { state, close, stop, send, reset } = controller;
   const isModal = useIsModal();
-  (0, import_react30.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -4310,11 +5631,11 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text);
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  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)(
       ChatHeader,
       {
         onClose: close,
@@ -4327,7 +5648,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         moreOptionsLabel: ui.moreOptions
       }
     ),
-    monitor && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    monitor && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       TabBar,
       {
         monitor,
@@ -4339,19 +5660,19 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         gamesEnabled: gamesResult?.enabled ?? false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "div",
       {
         style: !monitor || monitor.activeTab === "chat" ? { display: "contents" } : { position: "absolute", inset: 0, visibility: "hidden", display: "flex", flexDirection: "column" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MessageList, { controller, ui, slip, onDashboardTap, monitor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MessageList, { controller, ui, slip, onDashboardTap, monitor })
       }
     ),
-    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TodayPanel, { discovery, ui, monitor }),
-    monitor && monitor.activeTab === "following" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MatchesPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(OddsPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(GamesPanel, { loggedIn: !!loggedIn, games: gamesResult.games, ui }),
-    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LeaderboardPanel, { loggedIn: !!loggedIn, data: leaderboardResult.data, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.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_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 })
   ] });
 }
 
@@ -5304,10 +6625,315 @@ 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; }
+
+/* ---- 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 */
+.ss-w-gtta { position: relative; }
+.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); }
+.ss-w-gtta-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ss-w-ink); border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-gtta-opt:last-child { border-bottom: none; }
+.ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
+/* Column header labels: one cell per attribute */
+.ss-w-gthdr { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; padding: 0 2px; }
+.ss-w-gthdr-c { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-gthdr-c--name { text-align: left; }
+/* Guess rows */
+.ss-w-gtrows { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-gtrow { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; align-items: center; }
+.ss-w-gtrow-nm { font-size: 12px; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
+/* Verdict tiles */
+.ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; gap: 1px; transition: transform .1s; }
+.ss-w-gtile--exact { background: var(--ss-w-correct); color: #fff; }
+.ss-w-gtile--near { background: var(--ss-w-cta); color: var(--ss-w-cta-ink, #fff); }
+.ss-w-gtile--miss { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
+.ss-w-gtile-dir { font-size: 11px; line-height: 1; }
+/* Hint line */
+.ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
+/* Outcome banner: shown when solved or failed */
+.ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
+.ss-w-gt-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
+.ss-w-gt-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
+.ss-w-gt-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
+.ss-w-gt-banner-label { font-size: 12px; color: var(--ss-w-faint); }
+
+/* ---- Higher or Lower game screen (D3) ---- */
+.ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
+/* Stat context header: family name + season */
+.ss-w-hlctx { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
+.ss-w-hlctx-fam { font-size: 14px; font-weight: 750; color: var(--ss-w-ink); }
+.ss-w-hlctx-szn { font-size: 11.5px; color: var(--ss-w-faint); font-weight: 500; }
+/* Score chip */
+.ss-w-hl-score { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 3px 10px; }
+/* Pair card: two player cards + divider */
+.ss-w-hlpair { display: flex; align-items: stretch; gap: 0; border-radius: 14px; border: 1.5px solid var(--ss-w-line); overflow: hidden; background: var(--ss-w-panel); }
+/* Player card */
+.ss-w-hlpc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; }
+.ss-w-hlpc--b { border-left: 1px solid var(--ss-w-line); }
+.ss-w-hlpc-name { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.25; word-break: break-word; min-width: 0; }
+.ss-w-hlpc-val { font-size: 22px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
+.ss-w-hlpc-val--hidden { color: var(--ss-w-faint); font-size: 26px; }
+.ss-w-hlpc-val--correct { color: var(--ss-w-correct); }
+.ss-w-hlpc-val--wrong { color: var(--ss-w-cta); }
+.ss-w-hlpc-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 8px; }
+.ss-w-hlpc-badge--correct { color: #fff; background: var(--ss-w-correct); }
+.ss-w-hlpc-badge--wrong { color: var(--ss-w-cta-ink, #fff); background: var(--ss-w-cta); }
+/* Higher / Lower buttons */
+.ss-w-hlbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.ss-w-hlbtn { padding: 11px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
+.ss-w-hlbtn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
+.ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
+/* Answered pair result rows */
+.ss-w-hlresults { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; background: var(--ss-w-bubble); }
+.ss-w-hlrrow--correct { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
+.ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
+.ss-w-hlrrow-names { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-hlrrow-pick { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-hlrrow-icon { font-size: 14px; flex: none; }
+
+/* ---- Career Path game screen (D3) ---- */
+.ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
+/* Context header */
+.ss-w-cpath-ctx { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
+.ss-w-cpath-ctx-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
+.ss-w-cpath-ctx-count { font-size: 12px; font-weight: 600; color: var(--ss-w-accent); }
+/* Career path: vertical timeline of club spells */
+.ss-w-cpath-path { display: flex; flex-direction: column; gap: 4px; }
+/* Single club card */
+.ss-w-cpath-club { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
+.ss-w-cpath-club--loan { border-style: dashed; }
+/* Crest image / fallback */
+.ss-w-cpath-crest { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 4px; }
+.ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; }
+/* Club info: name + years */
+.ss-w-cpath-club-info { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; flex-wrap: wrap; }
+.ss-w-cpath-club-name { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-cpath-spell-yr { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
+.ss-w-cpath-loan-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-cta) 15%, var(--ss-w-panel)); color: var(--ss-w-cta-ink, #1b1300); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); flex: none; }
+/* Hidden clubs indicator */
+.ss-w-cpath-hidden { font-size: 11.5px; color: var(--ss-w-faint); font-style: italic; text-align: center; padding: 6px 0 2px; }
+/* Hint line */
+.ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
+/* Outcome banner */
+.ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
+.ss-w-cpath-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
+.ss-w-cpath-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
+.ss-w-cpath-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
+.ss-w-cpath-banner-label { font-size: 12px; color: var(--ss-w-faint); }
+
+/* ---- Beat the Grid game screen (D3) ---- */
+.ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
+/* Score/context row */
+.ss-w-btg-ctx { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.ss-w-btg-ctx-score { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-btg-ctx-left { font-size: 12px; color: var(--ss-w-faint); font-weight: 500; }
+.ss-w-btg-ctx-done { font-size: 12px; font-weight: 700; color: var(--ss-w-correct); }
+/* Grid layout \u2014 col count driven inline via style */
+.ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
+/* Generic grid cell */
+.ss-w-btg-gc { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; min-height: 42px; padding: 4px; font-size: 11px; word-break: break-word; line-height: 1.2; }
+/* Corner placeholder */
+.ss-w-btg-gc--corner { background: none; }
+/* Column header */
+.ss-w-btg-gc--colhdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
+/* Row header */
+.ss-w-btg-gc--rowhdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); writing-mode: horizontal-tb; }
+/* Interactive cells */
+.ss-w-btg-cell { flex-direction: column; gap: 2px; cursor: pointer; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); transition: border-color .12s, background .12s; }
+.ss-w-btg-cell:hover:not(:disabled) { border-color: var(--ss-w-accent); background: var(--ss-w-bubble); }
+.ss-w-btg-cell:disabled { cursor: not-allowed; opacity: .75; }
+.ss-w-btg-cell--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); }
+.ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
+.ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
+.ss-w-btg-cell-score { font-size: 14px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-btg-cell-check { font-size: 12px; color: var(--ss-w-correct); line-height: 1; }
+.ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
+/* Scoped search sheet: slides up over the grid */
+.ss-w-btg-sheet { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
+.ss-w-btg-sheet-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ss-w-btg-sheet-ctx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
+.ss-w-btg-sheet-row { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-btg-sheet-sep { font-size: 13px; color: var(--ss-w-faint); font-weight: 500; }
+.ss-w-btg-sheet-col { font-size: 12.5px; font-weight: 700; color: var(--ss-w-accent); }
+.ss-w-btg-sheet-close { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ss-w-faint); padding: 2px 6px; border-radius: 6px; line-height: 1; font: inherit; }
+.ss-w-btg-sheet-close:hover { color: var(--ss-w-ink); background: var(--ss-w-bubble); }
+
+/* ---- Guess the XI game screen (D3) ---- */
+.ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
+/* Context label (pool label) */
+.ss-w-gxi-ctx { display: flex; align-items: center; }
+.ss-w-gxi-ctx-label { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .05em; }
+/* 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; }
+/* 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; }
+/* Outcome banner */
+.ss-w-gxi-banner { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 10px; }
+.ss-w-gxi-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
+.ss-w-gxi-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
+.ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+/* Hint line */
+.ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
+
+/* ---- Daily Quiz game screen (D3) ---- */
+.ss-w-dq { display: flex; flex-direction: column; gap: 14px; }
+/* Score banner (post-reveal) */
+.ss-w-dq-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 10px; background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); border-radius: 12px; }
+.ss-w-dq-score-val { font-size: 26px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
+.ss-w-dq-score-label { font-size: 13px; font-weight: 650; color: var(--ss-w-faint); }
+/* Progress bar */
+.ss-w-dq-prog { height: 4px; border-radius: 999px; background: var(--ss-w-bubble); overflow: hidden; }
+.ss-w-dq-prog-fill { height: 100%; border-radius: 999px; background: var(--ss-w-accent); transition: width .25s ease; }
+/* Questions list */
+.ss-w-dq-questions { display: flex; flex-direction: column; gap: 16px; }
+/* Single question */
+.ss-w-dq-q { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-dq-qstem { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.4; }
+/* Options grid: 2 across */
+.ss-w-dq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.ss-w-dq-qopt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; color: var(--ss-w-ink); transition: background .1s, border-color .1s; }
+.ss-w-dq-qopt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
+.ss-w-dq-qopt:disabled { cursor: not-allowed; }
+.ss-w-dq-qopt--selected { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); }
+.ss-w-dq-qopt--correct { border-color: var(--ss-w-correct); background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); color: var(--ss-w-correct); }
+.ss-w-dq-qopt--wrong { border-color: color-mix(in srgb, var(--ss-w-cta) 50%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); opacity: .75; }
+/* Option letter badge */
+.ss-w-dq-qopt-letter { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--ss-w-faint); }
+.ss-w-dq-qopt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Why/reveal text */
+.ss-w-dq-qwhy { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
+.ss-w-dq-qwhy--correct { background: color-mix(in srgb, var(--ss-w-correct) 9%, var(--ss-w-panel)); color: var(--ss-w-correct); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line)); }
+.ss-w-dq-qwhy--wrong { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
+/* Submit button */
+.ss-w-dq-submit { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
+.ss-w-dq-submit:disabled { opacity: .4; cursor: not-allowed; }
+.ss-w-dq-submit:hover:not(:disabled) { opacity: .88; }
+
+/* \u2500\u2500 Matchday Predictor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.ss-w-mp { display: flex; flex-direction: column; gap: 14px; }
+/* Score prediction row */
+.ss-w-mp-pred-score { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
+.ss-w-mp-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
+.ss-w-mp-team-name { font-size: 12px; font-weight: 650; color: var(--ss-w-ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.ss-w-mp-stepper { display: flex; align-items: center; gap: 8px; }
+.ss-w-mp-stepper-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 18px; font-weight: 700; color: var(--ss-w-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .1s; }
+.ss-w-mp-stepper-btn:hover:not(:disabled) { background: var(--ss-w-bubble); }
+.ss-w-mp-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
+.ss-w-mp-stepper-val { font-size: 26px; font-weight: 800; color: var(--ss-w-ink); min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
+.ss-w-mp-sep { font-size: 22px; font-weight: 700; color: var(--ss-w-faint); padding: 0 4px; }
+/* First-scorer picker */
+.ss-w-mp-scorer { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-mp-scorer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
+.ss-w-mp-scorer-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.ss-w-mp-scorer-opt { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-ink); cursor: pointer; transition: background .1s, border-color .1s; }
+.ss-w-mp-scorer-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
+.ss-w-mp-scorer-opt--selected { 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-mp-scorer-opt:disabled { opacity: .35; cursor: not-allowed; }
+/* Save button */
+.ss-w-mp-savebtn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
+.ss-w-mp-savebtn:disabled { opacity: .4; cursor: not-allowed; }
+.ss-w-mp-savebtn:hover:not(:disabled) { opacity: .88; }
+/* Live / pending state */
+.ss-w-mp-live { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 14px 0; }
+.ss-w-mp-live-score { font-size: 30px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+.ss-w-mp-live-label { font-size: 12px; color: var(--ss-w-faint); font-style: italic; }
+.ss-w-mp-live-outcome { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.ss-w-mp-live-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); font-size: 12.5px; }
+.ss-w-mp-live-row--correct { border-color: color-mix(in srgb, var(--ss-w-correct) 40%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
+.ss-w-mp-live-row-key { color: var(--ss-w-faint); font-weight: 600; }
+.ss-w-mp-live-row-val { font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-mp-live-row--correct .ss-w-mp-live-row-val { color: var(--ss-w-correct); }
+/* For-fun note */
+.ss-w-mp-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
+
+/* \u2500\u2500 Starting XI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.ss-w-sxi { display: flex; flex-direction: column; gap: 14px; }
+.ss-w-sxi-formation { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
+/* Formation pitch area */
+.ss-w-sxi-pitch { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; border-radius: 12px; background: color-mix(in srgb, var(--ss-w-accent) 4%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); min-height: 260px; }
+.ss-w-sxi-pitch-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
+/* Player slot */
+.ss-w-sxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; }
+.ss-w-sxi-pslot-num { width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--ss-w-line); background: var(--ss-w-bubble); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); transition: border-color .1s, background .1s; }
+.ss-w-sxi-pslot--filled .ss-w-sxi-pslot-num { border-style: solid; border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); }
+.ss-w-sxi-pslot-name { font-size: 9.5px; font-weight: 600; color: var(--ss-w-ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+/* Squad picker */
+.ss-w-sxi-squad { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
+.ss-w-sxi-squad-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; transition: background .1s; }
+.ss-w-sxi-squad-row:hover:not(.ss-w-sxi-squad-row--picked) { background: var(--ss-w-bubble); }
+.ss-w-sxi-squad-row--picked { background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border-color: var(--ss-w-accent); }
+.ss-w-sxi-squad-name { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-sxi-squad-pos { font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-sxi-savebtn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
+.ss-w-sxi-savebtn:disabled { opacity: .4; cursor: not-allowed; }
+.ss-w-sxi-savebtn:hover:not(:disabled) { opacity: .88; }
+/* Pending / graded states */
+.ss-w-sxi-status { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 12px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); text-align: center; }
+.ss-w-sxi-status--graded { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
+.ss-w-sxi-status-score { font-size: 28px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
+.ss-w-sxi-status-label { font-size: 12.5px; color: var(--ss-w-faint); }
+
+/* \u2500\u2500 Stat Ladder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.ss-w-sl { display: flex; flex-direction: column; gap: 14px; }
+.ss-w-sl-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
+/* Ladder list */
+.ss-w-sl-ladder { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-sl-lrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); }
+.ss-w-sl-lrow-rank { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); width: 18px; flex: none; text-align: center; }
+.ss-w-sl-lrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
+.ss-w-sl-lrow-stat { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
+/* Mystery rung */
+.ss-w-sl-mystery { border: 1.5px dashed var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 5%, var(--ss-w-panel)); }
+.ss-w-sl-mystery .ss-w-sl-lrow-name { color: var(--ss-w-faint); font-style: italic; }
+/* Reveal overlay: correct / wrong */
+.ss-w-sl-lrow--correct { border-color: color-mix(in srgb, var(--ss-w-correct) 40%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
+.ss-w-sl-lrow--wrong { border-color: color-mix(in srgb, var(--ss-w-wrong, #e05050) 30%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-wrong, #e05050) 6%, var(--ss-w-panel)); }
+/* Player picker */
+.ss-w-sl-picker { display: flex; flex-wrap: wrap; gap: 6px; }
+.ss-w-sl-picker-opt { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-ink); cursor: pointer; transition: background .1s, border-color .1s; }
+.ss-w-sl-picker-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
+.ss-w-sl-picker-opt:disabled { opacity: .35; cursor: not-allowed; }
+.ss-w-sl-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
+.ss-w-sl-reveal--correct { background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); color: var(--ss-w-correct); }
+.ss-w-sl-reveal--wrong { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); }
+
+/* \u2500\u2500 Fan MOTM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.ss-w-motm { display: flex; flex-direction: column; gap: 14px; }
+.ss-w-motm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
+/* Vote candidate list */
+.ss-w-motm-votes { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-motm-vrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; transition: background .1s, border-color .1s; position: relative; overflow: hidden; }
+.ss-w-motm-vrow:hover:not(.ss-w-motm-vrow--voted):not(.ss-w-motm-vrow--result) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
+.ss-w-motm-vrow--voted { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); cursor: default; }
+.ss-w-motm-vrow--result { cursor: default; }
+.ss-w-motm-vrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); position: relative; z-index: 1; }
+.ss-w-motm-vrow-pct { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
+/* Share fill bar (behind content) */
+.ss-w-motm-vfill { position: absolute; top: 0; left: 0; height: 100%; background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); transition: width .4s ease; pointer-events: none; }
+.ss-w-motm-vrow--voted .ss-w-motm-vfill { background: color-mix(in srgb, var(--ss-w-accent) 18%, var(--ss-w-panel)); }
+/* For-fun note */
+.ss-w-motm-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -5332,23 +6958,23 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react31.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const logger = (0, import_react31.useMemo)(
+  const built = (0, import_react39.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const logger = (0, import_react39.useMemo)(
     () => built ? built.client.createEventLogger({
       operatorUserId: cfg?.userContext?.operatorUserId,
       anonymousUserId: cfg?.userContext?.anonymousUserId
     }) : null,
     [built?.client]
   );
-  const ui = (0, import_react31.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react31.useRef)(null);
-  const introDoneRef = (0, import_react31.useRef)(false);
-  const markIntroDone = (0, import_react31.useCallback)(() => {
+  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)(() => {
     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_react31.useState)(false);
+  const [hasToday, setHasToday] = (0, import_react39.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),
@@ -5356,15 +6982,15 @@ function StatsWidget(props) {
     isOpen: controller.state.isOpen,
     hasToday
   });
-  const getSchedule = (0, import_react31.useCallback)(
+  const getSchedule = (0, import_react39.useCallback)(
     (localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes) : Promise.resolve(null),
     [built]
   );
-  const getStates = (0, import_react31.useCallback)(
+  const getStates = (0, import_react39.useCallback)(
     (matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
     [built]
   );
-  const pinnedMatchIds = (0, import_react31.useMemo)(
+  const pinnedMatchIds = (0, import_react39.useMemo)(
     () => monitor.pins.filter((p) => p.kind === "match").map((p) => p.matchId),
     [monitor.pins]
   );
@@ -5376,19 +7002,19 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react39.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_react31.useRef)(0);
-  (0, import_react31.useEffect)(() => {
+  const prevLiveCountRef = (0, import_react39.useRef)(0);
+  (0, import_react39.useEffect)(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
   }, [discovery.liveCount, markTodayActivity]);
-  const slip = (0, import_react31.useMemo)(
+  const slip = (0, import_react39.useMemo)(
     () => {
       const handler = props.config?.onAddToSlip;
       return {
@@ -5411,18 +7037,18 @@ function StatsWidget(props) {
     },
     [props.config?.onAddToSlip, controller.state.conversationId, built, monitor.markInSlip]
   );
-  const onDashboardTap = (0, import_react31.useMemo)(
+  const onDashboardTap = (0, import_react39.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_react31.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!logger) return;
     const onHide = () => {
       logger.flushOnHide();
@@ -5439,14 +7065,14 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react39.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_runtime61.jsx)(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime61.jsx)(
+  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)(
     ChatPanel,
     {
       controller,
@@ -5459,7 +7085,7 @@ function StatsWidget(props) {
       leaderboardResult,
       loggedIn: !!operatorUserId
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,