@sensiblestats/widget-react 0.49.0 → 0.50.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo3, useRef as useRef11, useState as useState25 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo3, useRef as useRef13, useState as useState33 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/kickoff.ts
@@ -1871,7 +1871,7 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect13, useState as useState24 } from "react";
+import { useEffect as useEffect14, useState as useState32 } from "react";
 
 // src/components/ChatHeader.tsx
 import { useEffect as useEffect8, useRef as useRef8, useState as useState8 } from "react";
@@ -3974,7 +3974,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-import { useState as useState22 } from "react";
+import { useState as useState30 } from "react";
 
 // src/components/GamesLoginWall.tsx
 import { jsx as jsx52 } from "react/jsx-runtime";
@@ -4086,64 +4086,1385 @@ function GamesHub({
 }
 
 // src/components/GameScreenHost.tsx
-import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
-function resolveScreen(gameId) {
-  switch (gameId) {
-    // D3/D4 cases go here
-    default:
-      return /* @__PURE__ */ jsx55("div", { className: "ss-w-gscreen-body", "data-testid": `game-screen-${gameId}`, children: gameId });
+import { useEffect as useEffect13, useRef as useRef12, useState as useState29 } from "react";
+
+// src/useGamePlay.ts
+import { useCallback as useCallback8, useRef as useRef11, useState as useState22 } from "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] = useState22(null);
+  const [submitting, setSubmitting] = useState22(false);
+  const [rawStatus, setRawStatus] = useState22(null);
+  const inFlightRef = useRef11(false);
+  const convRef = useRef11(conversation);
+  convRef.current = conversation;
+  const optsRef = useRef11({ gameId, gameDay, fixtureId, refresh });
+  optsRef.current = { gameId, gameDay, fixtureId, refresh };
+  const submit = useCallback8(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 = useCallback8(() => {
+    const conv = convRef.current;
+    if (!conv) return;
+    const opts = optsRef.current;
+    void (async () => {
+      try {
+        const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
+        if (payload !== null) {
+          setResult(toSubmitResult(payload));
+          setRawStatus(payload.status);
+        }
+      } catch {
+      }
+    })();
+  }, []);
+  return { result, submitting, submit, hydrate, rawStatus };
+}
+
+// src/components/games/MysteryTigerGame.tsx
+import { useState as useState23, useId as useId2 } from "react";
+import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
+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] = useState23("");
+  const inputId = useId2();
+  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__ */ jsxs49("div", { className: "ss-w-gt", "data-testid": "game-screen-mystery-tiger", children: [
+    !config && /* @__PURE__ */ jsx55("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ jsxs49(Fragment9, { children: [
+      isOver && clientState && /* @__PURE__ */ jsxs49("div", { className: `ss-w-gt-banner ss-w-gt-banner--${clientState.solved ? "solved" : "failed"}`, children: [
+        /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-banner-label", children: clientState.solved ? "\u{1F42F} You found them!" : "\u{1F614} Better luck tomorrow" }),
+        clientState.revealedPlayerName && /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-banner-name", children: clientState.revealedPlayerName })
+      ] }),
+      !isOver && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtta", children: [
+        /* @__PURE__ */ jsx55(
+          "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__ */ jsx55("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((p) => /* @__PURE__ */ jsx55(
+          "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__ */ jsxs49("div", { children: [
+        /* @__PURE__ */ jsxs49("div", { className: "ss-w-gthdr", children: [
+          /* @__PURE__ */ jsx55("div", { className: "ss-w-gthdr-c ss-w-gthdr-c--name", children: "Player" }),
+          ATTR_KEYS.map((key) => /* @__PURE__ */ jsx55("div", { className: "ss-w-gthdr-c", children: ATTR_LABELS[key] }, key))
+        ] }),
+        /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrows", children: clientState.guessResults.map((gr, i) => {
+          const player = config.squadPlayers.find((p) => p.id === gr.playerId);
+          return /* @__PURE__ */ jsxs49("div", { className: "ss-w-gtrow", children: [
+            /* @__PURE__ */ jsx55("div", { className: "ss-w-gtrow-nm", children: player?.name ?? `#${gr.playerId}` }),
+            ATTR_KEYS.map((key) => {
+              const v = gr[key];
+              return /* @__PURE__ */ jsx55(
+                "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__ */ jsx55("span", { className: "ss-w-gtile-dir", "aria-hidden": "true", children: v.direction === "up" ? "\u2191" : "\u2193" })
+                },
+                key
+              );
+            })
+          ] }, gr.playerId);
+        }) })
+      ] }),
+      clientState?.hintLine && !isOver && /* @__PURE__ */ jsx55("div", { className: "ss-w-gt-hint", children: clientState.hintLine }),
+      !isOver && clientState && /* @__PURE__ */ jsxs49("div", { className: "ss-w-gt-hint", children: [
+        clientState.guessesRemaining,
+        " guess",
+        clientState.guessesRemaining !== 1 ? "es" : "",
+        " remaining"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/games/HigherOrLowerGame.tsx
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs50 } from "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__ */ jsxs50("div", { className: cls, children: [
+    /* @__PURE__ */ jsxs50("span", { className: "ss-w-hlrrow-names", children: [
+      pair?.playerAName ?? "?",
+      " vs ",
+      pair?.playerBName ?? "?"
+    ] }),
+    /* @__PURE__ */ jsx56("span", { className: "ss-w-hlrrow-pick", children: answered.pick }),
+    /* @__PURE__ */ jsx56("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__ */ jsxs50("div", { className: "ss-w-hl", "data-testid": "game-screen-higher-or-lower", children: [
+    !config && /* @__PURE__ */ jsx56("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ jsxs50(Fragment10, { children: [
+      /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlctx", children: [
+        /* @__PURE__ */ jsx56("span", { className: "ss-w-hlctx-fam", children: config.statLabel }),
+        /* @__PURE__ */ jsx56("span", { className: "ss-w-hlctx-szn", children: config.seasonLabel })
+      ] }),
+      currentPair && /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpair", children: [
+        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc", children: [
+          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: currentPair.playerAName }),
+          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val", children: currentPair.playerAValue })
+        ] }),
+        /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
+          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: currentPair.playerBName }),
+          /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val ss-w-hlpc-val--hidden", children: "?" })
+        ] })
+      ] }),
+      !isOver && currentPair && /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlbtns", children: [
+        /* @__PURE__ */ jsx56(
+          "button",
+          {
+            type: "button",
+            className: "ss-w-hlbtn",
+            disabled: submitting,
+            onClick: () => handlePick("higher"),
+            children: "Higher"
+          }
+        ),
+        /* @__PURE__ */ jsx56(
+          "button",
+          {
+            type: "button",
+            className: "ss-w-hlbtn",
+            disabled: submitting,
+            onClick: () => handlePick("lower"),
+            children: "Lower"
+          }
+        )
+      ] }),
+      clientState && clientState.answeredPairs.length > 0 && /* @__PURE__ */ jsx56("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__ */ jsxs50("div", { className: "ss-w-hlrrow", children: [
+          /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpair", children: [
+            /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc", children: [
+              /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: pair?.playerAName ?? "?" }),
+              /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-val", children: pair?.playerAValue })
+            ] }),
+            /* @__PURE__ */ jsxs50("div", { className: "ss-w-hlpc ss-w-hlpc--b", children: [
+              /* @__PURE__ */ jsx56("div", { className: "ss-w-hlpc-name", children: pair?.playerBName ?? "?" }),
+              /* @__PURE__ */ jsx56("div", { className: vCls, children: answered.playerBValue }),
+              /* @__PURE__ */ jsx56("div", { className: badgeCls, children: answered.wasCorrect ? "\u2713" : "\u2717" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx56(AnsweredRow, { answered, pair })
+        ] }, answered.pairIndex);
+      }) })
+    ] })
+  ] });
+}
+
+// src/components/games/CareerPathGame.tsx
+import { useState as useState24, useId as useId3 } from "react";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs51 } from "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__ */ jsx57("span", { className: "ss-w-cpath-spell-yr", children: parts.join(" \u2013 ") });
+}
+function ClubSpellCard({ spell }) {
+  return /* @__PURE__ */ jsxs51("div", { className: `ss-w-cpath-club${spell.isLoan ? " ss-w-cpath-club--loan" : ""}`, children: [
+    spell.crestUrl ? /* @__PURE__ */ jsx57(
+      "img",
+      {
+        src: spell.crestUrl,
+        alt: spell.clubName,
+        className: "ss-w-cpath-crest",
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-crest ss-w-cpath-crest--fallback", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-club-info", children: [
+      /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-club-name", children: spell.clubName }),
+      /* @__PURE__ */ jsx57(SpellYear, { spell }),
+      spell.isLoan && /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-loan-badge", children: "Loan" })
+    ] })
+  ] });
+}
+function CareerPathGame({
+  config,
+  result,
+  submitting,
+  onSubmit
+}) {
+  const [query, setQuery] = useState24("");
+  const inputId = useId3();
+  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__ */ jsxs51("div", { className: "ss-w-cpath", "data-testid": "game-screen-career-path", children: [
+    !config && /* @__PURE__ */ jsx57("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ jsxs51(Fragment11, { children: [
+      /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-ctx", children: [
+        /* @__PURE__ */ jsx57("span", { className: "ss-w-cpath-ctx-label", children: "Career clubs" }),
+        /* @__PURE__ */ jsxs51("span", { className: "ss-w-cpath-ctx-count", children: [
+          config.totalClubs,
+          " clubs total"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-path", children: [
+        visiblePath.map((spell, i) => /* @__PURE__ */ jsx57(ClubSpellCard, { spell }, `${spell.clubName}-${i}`)),
+        (clientState?.totalClubs ?? config.totalClubs) > visiblePath.length && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hidden", children: [
+          "+",
+          (clientState?.totalClubs ?? config.totalClubs) - visiblePath.length,
+          " more clubs hidden"
+        ] })
+      ] }),
+      isOver && clientState && /* @__PURE__ */ jsxs51("div", { className: `ss-w-cpath-banner ss-w-cpath-banner--${clientState.solved ? "solved" : "failed"}`, children: [
+        /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-banner-label", children: clientState.solved ? "Career traced!" : "Better luck tomorrow" }),
+        clientState.revealedPlayerName && /* @__PURE__ */ jsx57("div", { className: "ss-w-cpath-banner-name", children: clientState.revealedPlayerName })
+      ] }),
+      !isOver && /* @__PURE__ */ jsxs51("div", { className: "ss-w-gtta", children: [
+        /* @__PURE__ */ jsx57(
+          "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__ */ jsx57("div", { className: "ss-w-gtta-drop", role: "listbox", children: filtered.map((p) => /* @__PURE__ */ jsx57(
+          "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__ */ jsx57("div", { className: "ss-w-cpath-hint", children: clientState.hintLine }),
+      !isOver && clientState && /* @__PURE__ */ jsxs51("div", { className: "ss-w-cpath-hint", children: [
+        clientState.guessesRemaining,
+        " guess",
+        clientState.guessesRemaining !== 1 ? "es" : "",
+        " remaining"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/games/BeatTheGridGame.tsx
+import React, { useState as useState25, useId as useId4 } from "react";
+import { Fragment as Fragment12, jsx as jsx58, jsxs as jsxs52 } from "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] = useState25("");
+  const inputId = useId4();
+  const filtered = playerPool.filter(
+    (p) => !alreadyFilledIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-sheet", "data-testid": "btg-search-sheet", children: [
+    /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-sheet-hdr", children: [
+      /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-sheet-ctx", children: [
+        /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-sheet-row", children: rowLabel }),
+        /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-sheet-sep", children: "\xD7" }),
+        /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-sheet-col", children: colLabel })
+      ] }),
+      /* @__PURE__ */ jsx58(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-btg-sheet-close",
+          "data-testid": "btg-sheet-dismiss",
+          "aria-label": "Dismiss",
+          onClick: onDismiss,
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs52("div", { className: "ss-w-gtta", children: [
+      /* @__PURE__ */ jsx58(
+        "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__ */ jsx58("div", { className: "ss-w-gtta-drop ss-w-btg-ta-list", role: "listbox", children: filtered.map((p) => /* @__PURE__ */ jsx58(
+        "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] = useState25(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__ */ jsx58("div", { className: "ss-w-btg", "data-testid": "game-screen-beat-the-grid", children: /* @__PURE__ */ jsx58("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const rows = config.rows;
+  const cols = config.cols;
+  return /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg", "data-testid": "game-screen-beat-the-grid", children: [
+    /* @__PURE__ */ jsxs52("div", { className: "ss-w-btg-ctx", children: [
+      /* @__PURE__ */ jsxs52("span", { className: "ss-w-btg-ctx-score", children: [
+        "Score: ",
+        clientState?.totalScore ?? 0
+      ] }),
+      !isLocked2 && /* @__PURE__ */ jsxs52("span", { className: "ss-w-btg-ctx-left", children: [
+        config.maxGuesses - filledCells.length,
+        " cell",
+        config.maxGuesses - filledCells.length !== 1 ? "s" : "",
+        " left"
+      ] }),
+      isLocked2 && /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-ctx-done", children: "Complete" })
+    ] }),
+    /* @__PURE__ */ jsxs52(
+      "div",
+      {
+        className: "ss-w-btg-grid",
+        style: { gridTemplateColumns: `auto repeat(${cols.length}, 1fr)` },
+        role: "grid",
+        children: [
+          /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--corner" }),
+          cols.map((col) => /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--colhdr", children: col }, col)),
+          rows.map((rowLabel, rowIdx) => /* @__PURE__ */ jsxs52(React.Fragment, { children: [
+            /* @__PURE__ */ jsx58("div", { className: "ss-w-btg-gc ss-w-btg-gc--rowhdr", children: rowLabel }),
+            cols.map((colLabel, colIdx) => {
+              const filled = findCellResult(filledCells, rowIdx, colIdx);
+              const isActive = activeCell?.row === rowIdx && activeCell?.col === colIdx;
+              return /* @__PURE__ */ jsx58(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": `btg-cell-${rowIdx}-${colIdx}`,
+                  "aria-label": `${rowLabel} ${colLabel}`,
+                  className: [
+                    "ss-w-btg-gc ss-w-btg-cell",
+                    filled ? filled.isCorrect ? "ss-w-btg-cell--correct" : "ss-w-btg-cell--wrong" : "",
+                    isActive ? "ss-w-btg-cell--active" : ""
+                  ].filter(Boolean).join(" "),
+                  disabled: isLocked2 || submitting,
+                  onClick: () => handleCellClick(rowIdx, colIdx),
+                  children: filled ? /* @__PURE__ */ jsxs52(Fragment12, { children: [
+                    /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-score", children: filled.rarityScore }),
+                    filled.isCorrect && /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-check", "aria-hidden": "true", children: "\u2713" })
+                  ] }) : /* @__PURE__ */ jsx58("span", { className: "ss-w-btg-cell-empty", "aria-hidden": "true", children: "+" })
+                },
+                `cell-${rowIdx}-${colIdx}`
+              );
+            })
+          ] }, rowIdx))
+        ]
+      }
+    ),
+    activeCell !== null && /* @__PURE__ */ jsx58(
+      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
+import { Fragment as Fragment13, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
+function parseClientState5(json) {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function RevealCard({ reveal }) {
+  return /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-reveal", "data-reveal-type": reveal.type ?? "", children: [
+    reveal.slot && /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-reveal-slot", children: reveal.slot }),
+    /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-reveal-val", children: reveal.value })
+  ] });
+}
+function 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__ */ jsxs53("div", { className: "ss-w-gxi", "data-testid": "game-screen-guess-the-xi", children: [
+    !config && /* @__PURE__ */ jsx59("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ jsxs53(Fragment13, { children: [
+      /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-ctx", children: /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-ctx-label", children: config.poolLabel }) }),
+      config.positions.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pitch", children: config.positions.map((pos) => /* @__PURE__ */ jsxs53("div", { className: "ss-w-gxi-pslot", children: [
+        /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-pslot-pos", children: pos.slot }),
+        /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-pslot-nat", children: pos.nationality })
+      ] }, pos.slot)) }),
+      clientState && clientState.earnedReveals.length > 0 && /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-reveals", children: clientState.earnedReveals.map((r, i) => /* @__PURE__ */ jsx59(RevealCard, { reveal: r }, i)) }),
+      isOver && clientState && /* @__PURE__ */ jsx59("div", { className: `ss-w-gxi-banner ss-w-gxi-banner--${clientState.status}`, children: /* @__PURE__ */ jsx59("span", { className: "ss-w-gxi-banner-label", children: clientState.status === "solved" ? `Solved! ${clientState.score} pts` : "Better luck tomorrow" }) }),
+      /* @__PURE__ */ jsx59("div", { className: "ss-w-gxi-pool", children: config.teamPool.map((team) => {
+        const guessRecord = clientState?.guessHistory.find((g) => g.teamId === team.teamId);
+        return /* @__PURE__ */ jsx59(
+          "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__ */ jsxs53("div", { className: "ss-w-gxi-hint", children: [
+        "Guess ",
+        clientState.guessesUsed + 1,
+        " of 6"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/games/DailyQuizGame.tsx
+import { useState as useState26 } from "react";
+import { Fragment as Fragment14, jsx as jsx60, jsxs as jsxs54 } from "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] = useState26(/* @__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__ */ jsxs54("div", { className: "ss-w-dq", "data-testid": "game-screen-daily-quiz", children: [
+    !config && /* @__PURE__ */ jsx60("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
+    config && /* @__PURE__ */ jsxs54(Fragment14, { children: [
+      isRevealed && result?.score != null && /* @__PURE__ */ jsxs54("div", { className: "ss-w-dq-score", children: [
+        /* @__PURE__ */ jsx60("span", { className: "ss-w-dq-score-val", children: result.score }),
+        /* @__PURE__ */ jsx60("span", { className: "ss-w-dq-score-label", children: "pts" })
+      ] }),
+      !isRevealed && /* @__PURE__ */ jsx60("div", { className: "ss-w-dq-prog", children: /* @__PURE__ */ jsx60(
+        "div",
+        {
+          className: "ss-w-dq-prog-fill",
+          style: { width: `${Math.round(selections.size / config.questions.length * 100)}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsx60("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__ */ jsxs54("div", { className: "ss-w-dq-q", children: [
+          /* @__PURE__ */ jsx60("div", { className: "ss-w-dq-qstem", children: q.stem }),
+          /* @__PURE__ */ jsx60("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__ */ jsxs54(
+              "button",
+              {
+                type: "button",
+                className: optCls,
+                disabled: isRevealed || submitting,
+                onClick: () => handleSelect(q.index, optIdx),
+                children: [
+                  /* @__PURE__ */ jsx60("span", { className: "ss-w-dq-qopt-letter", children: String.fromCharCode(65 + optIdx) }),
+                  /* @__PURE__ */ jsx60("span", { className: "ss-w-dq-qopt-text", children: opt })
+                ]
+              },
+              optIdx
+            );
+          }) }),
+          qResult?.revealText && /* @__PURE__ */ jsx60("div", { className: `ss-w-dq-qwhy ss-w-dq-qwhy--${qResult.isCorrect ? "correct" : "wrong"}`, children: qResult.revealText })
+        ] }, q.index);
+      }) }),
+      !isRevealed && /* @__PURE__ */ jsx60(
+        "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
+import { useState as useState27 } from "react";
+import { jsx as jsx61, jsxs as jsxs55 } from "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] = useState27(0);
+  const [awayScore, setAwayScore] = useState27(0);
+  const [firstScorerPlayerId, setFirstScorerPlayerId] = useState27(null);
+  const clientState = parseClientState7(result?.clientStateJson);
+  const alreadyPlayed = result?.alreadyPlayed === true;
+  if (alreadyPlayed && clientState) {
+    if (!clientState.graded) {
+      return /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: [
+        /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-live", children: [
+          /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-live-score", children: [
+            clientState.predictedHomeScore,
+            " \u2013 ",
+            clientState.predictedAwayScore
+          ] }),
+          /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-live-label", children: "Locked in \u2014 awaiting result" })
+        ] }),
+        /* @__PURE__ */ jsx61("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__ */ jsxs55("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: [
+      /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-live", children: [
+        /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-live-score", children: actualScore }),
+        /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-live-label", children: "Full-time result" }),
+        /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-live-outcome", children: [
+          /* @__PURE__ */ jsxs55("div", { className: `ss-w-mp-live-row${clientState.exactScoreCorrect ? " ss-w-mp-live-row--correct" : ""}`, children: [
+            /* @__PURE__ */ jsx61("span", { className: "ss-w-mp-live-row-key", children: "Exact score" }),
+            /* @__PURE__ */ jsx61("span", { className: "ss-w-mp-live-row-val", children: clientState.exactScoreCorrect ? "\u2713" : "\u2717" })
+          ] }),
+          /* @__PURE__ */ jsxs55("div", { className: `ss-w-mp-live-row${clientState.outcomeCorrect ? " ss-w-mp-live-row--correct" : ""}`, children: [
+            /* @__PURE__ */ jsx61("span", { className: "ss-w-mp-live-row-key", children: "Result (W/D/L)" }),
+            /* @__PURE__ */ jsx61("span", { className: "ss-w-mp-live-row-val", children: clientState.outcomeCorrect ? "\u2713" : "\u2717" })
+          ] }),
+          !clientState.firstScorerVoid && /* @__PURE__ */ jsxs55("div", { className: `ss-w-mp-live-row${clientState.firstScorerCorrect ? " ss-w-mp-live-row--correct" : ""}`, children: [
+            /* @__PURE__ */ jsx61("span", { className: "ss-w-mp-live-row-key", children: "First scorer" }),
+            /* @__PURE__ */ jsxs55("span", { className: "ss-w-mp-live-row-val", children: [
+              clientState.firstScorerCorrect ? "\u2713" : "\u2717",
+              r.firstScorerName ? ` ${r.firstScorerName}` : ""
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-fun", children: "For fun \u2014 not in the leaderboard" })
+    ] });
+  }
+  if (!config) {
+    return /* @__PURE__ */ jsx61("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: /* @__PURE__ */ jsx61("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__ */ jsxs55("div", { className: "ss-w-mp", "data-testid": "game-screen-matchday-predictor", children: [
+    /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-pred-score", children: [
+      /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-team", children: [
+        /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-team-name", children: config.homeTeam.name }),
+        /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-stepper", children: [
+          /* @__PURE__ */ jsx61(
+            "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__ */ jsx61("span", { className: "ss-w-mp-stepper-val", children: homeScore }),
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              type: "button",
+              className: "ss-w-mp-stepper-btn",
+              "aria-label": "+",
+              disabled,
+              onClick: () => setHomeScore((s) => s + 1),
+              children: "+"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx61("span", { className: "ss-w-mp-sep", children: "\u2013" }),
+      /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-team", children: [
+        /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-team-name", children: config.awayTeam.name }),
+        /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-stepper", children: [
+          /* @__PURE__ */ jsx61(
+            "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__ */ jsx61("span", { className: "ss-w-mp-stepper-val", children: awayScore }),
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              type: "button",
+              className: "ss-w-mp-stepper-btn",
+              "aria-label": "+",
+              disabled,
+              onClick: () => setAwayScore((s) => s + 1),
+              children: "+"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    config.scorerPool.length > 0 && /* @__PURE__ */ jsxs55("div", { className: "ss-w-mp-scorer", children: [
+      /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-scorer-label", children: "First scorer (optional)" }),
+      /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-scorer-list", children: config.scorerPool.map((p) => /* @__PURE__ */ jsx61(
+        "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__ */ jsx61("div", { className: "ss-w-mp-live-label", children: "Submissions are now closed" }),
+    /* @__PURE__ */ jsx61(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-mp-savebtn",
+        disabled,
+        onClick: handleSubmit,
+        "aria-label": "Save prediction",
+        children: submitting ? "Saving\u2026" : "Save prediction"
+      }
+    ),
+    /* @__PURE__ */ jsx61("div", { className: "ss-w-mp-fun", children: "For fun \u2014 not in the leaderboard" })
+  ] });
+}
+
+// src/components/games/StartingXiGame.tsx
+import { useState as useState28 } from "react";
+import { jsx as jsx62, jsxs as jsxs56 } from "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] = useState28([]);
+  const clientState = parseClientState8(result?.clientStateJson);
+  const alreadyPlayed = result?.alreadyPlayed === true;
+  if (alreadyPlayed) {
+    if (!clientState) {
+      return /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-status", children: /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-status-label", children: "This game has been voided" }) }) });
+    }
+    if (clientState.status === "pending") {
+      return /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-status", children: /* @__PURE__ */ jsxs56("div", { className: "ss-w-sxi-status-label", children: [
+        "Prediction locked in (",
+        clientState.predictedCount,
+        " players) \u2014 awaiting result"
+      ] }) }) });
+    }
+    if (clientState.status === "graded") {
+      return /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ jsxs56("div", { className: "ss-w-sxi-status ss-w-sxi-status--graded", children: [
+        /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-status-score", children: clientState.score }),
+        /* @__PURE__ */ jsxs56("div", { className: "ss-w-sxi-status-label", children: [
+          clientState.correctCount,
+          " correct starters"
+        ] })
+      ] }) });
+    }
+  }
+  if (!config) {
+    return /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: /* @__PURE__ */ jsx62("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__ */ jsxs56("div", { className: "ss-w-sxi", "data-testid": "game-screen-starting-xi", children: [
+    /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-formation", children: config.formation }),
+    /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-pitch", children: pitchRows.map(({ rowIdx, count, rowSlots }) => /* @__PURE__ */ jsx62("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__ */ jsxs56(
+        "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__ */ jsx62("div", { className: "ss-w-sxi-pslot-num", children: player?.jerseyNumber ?? (rowIdx === 0 ? "GK" : "?") }),
+            /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-pslot-name", children: player?.playerName ?? "" })
+          ]
+        },
+        i
+      );
+    }) }, rowIdx)) }),
+    /* @__PURE__ */ jsx62("div", { className: "ss-w-sxi-squad", children: config.squadSheet.map((p) => {
+      const isPicked = pickedSet.has(p.playerId);
+      return /* @__PURE__ */ jsxs56(
+        "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__ */ jsx62("span", { className: "ss-w-sxi-squad-name", children: p.playerName }),
+            /* @__PURE__ */ jsx62("span", { className: "ss-w-sxi-squad-pos", children: p.positionName })
+          ]
+        },
+        p.playerId
+      );
+    }) }),
+    /* @__PURE__ */ jsx62(
+      "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
+import { jsx as jsx63, jsxs as jsxs57 } from "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__ */ jsx63("div", { className: "ss-w-sl", "data-testid": "game-screen-stat-ladder", children: /* @__PURE__ */ jsx63("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }) });
+  }
+  const mysteryName = revealed ? clientState.revealedRank2.playerName : null;
+  return /* @__PURE__ */ jsxs57("div", { className: "ss-w-sl", "data-testid": "game-screen-stat-ladder", children: [
+    /* @__PURE__ */ jsx63("div", { className: "ss-w-sl-title", children: config.statLabel }),
+    /* @__PURE__ */ jsx63("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__ */ jsxs57("div", { className: rowCls, children: [
+        /* @__PURE__ */ jsxs57("div", { className: "ss-w-sl-lrow-rank", children: [
+          "#",
+          rung.rank
+        ] }),
+        /* @__PURE__ */ jsx63("div", { className: "ss-w-sl-lrow-name", children: displayName }),
+        /* @__PURE__ */ jsx63("div", { className: "ss-w-sl-lrow-stat", children: rung.statValue })
+      ] }, rung.rank);
+    }) }),
+    revealed && /* @__PURE__ */ jsx63("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__ */ jsx63("div", { className: "ss-w-sl-picker", children: config.playerPool.map((p) => /* @__PURE__ */ jsx63(
+      "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
+import { jsx as jsx64, jsxs as jsxs58 } from "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__ */ jsx64("div", { className: "ss-w-motm", "data-testid": "game-screen-fan-motm", children: /* @__PURE__ */ jsx64("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__ */ jsxs58("div", { className: "ss-w-motm", "data-testid": "game-screen-fan-motm", children: [
+    /* @__PURE__ */ jsx64("div", { className: "ss-w-motm-title", children: "Man of the Match \u2014 your vote" }),
+    /* @__PURE__ */ jsx64("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__ */ jsxs58(
+        "button",
+        {
+          type: "button",
+          className: rowCls,
+          "data-testid": `motm-candidate-${c.playerId}`,
+          disabled: alreadyVoted || submitting,
+          onClick: () => handleVote(c.playerId),
+          children: [
+            /* @__PURE__ */ jsx64("div", { className: "ss-w-motm-vfill", style: { width: isVoted ? "100%" : "0%" } }),
+            /* @__PURE__ */ jsx64("span", { className: "ss-w-motm-vrow-name", children: c.playerName })
+          ]
+        },
+        c.playerId
+      );
+    }) }),
+    /* @__PURE__ */ jsx64("div", { className: "ss-w-motm-fun", children: "For fun \u2014 unranked community vote" })
+  ] });
+}
+
+// src/components/GameScreenHost.tsx
+import { jsx as jsx65, jsxs as jsxs59 } from "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__ */ jsxs49("div", { className: "ss-w-gscreen", children: [
-    /* @__PURE__ */ jsxs49("button", { type: "button", className: "ss-w-gscreen-back", onClick: onBack, children: [
-      /* @__PURE__ */ jsx55("span", { className: "ss-w-gscreen-back-arrow", "aria-hidden": "true", children: "\u2039" }),
+  const { gameId, fixtureId, gameDay = "" } = selected;
+  const [configJson, setConfigJson] = useState29(null);
+  useEffect13(() => {
+    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
+  });
+  useEffect13(() => {
+    if (conversation) hydrate();
+  }, [conversation, gameId]);
+  const hydrateRef = useRef12(hydrate);
+  hydrateRef.current = hydrate;
+  useEffect13(() => {
+    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__ */ jsx65(
+          MysteryTigerGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "higher-or-lower":
+        return /* @__PURE__ */ jsx65(
+          HigherOrLowerGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "career-path":
+        return /* @__PURE__ */ jsx65(
+          CareerPathGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "beat-the-grid":
+        return /* @__PURE__ */ jsx65(
+          BeatTheGridGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson),
+            playerPool: []
+          }
+        );
+      case "guess-the-xi":
+        return /* @__PURE__ */ jsx65(
+          GuessTheXiGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "daily-quiz":
+        return /* @__PURE__ */ jsx65(
+          DailyQuizGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "matchday-predictor":
+        return /* @__PURE__ */ jsx65(
+          MatchdayPredictorGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "starting-xi":
+        return /* @__PURE__ */ jsx65(
+          StartingXiGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "stat-ladder":
+        return /* @__PURE__ */ jsx65(
+          StatLadderGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      case "fan-motm":
+        return /* @__PURE__ */ jsx65(
+          FanMotmGame,
+          {
+            ...sharedProps,
+            config: safeParseConfig(configJson)
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx65("div", { className: "ss-w-gscreen-body", "data-testid": `game-screen-${gameId}`, children: gameId });
+    }
+  }
+  return /* @__PURE__ */ jsxs59("div", { className: "ss-w-gscreen", children: [
+    /* @__PURE__ */ jsxs59("button", { type: "button", className: "ss-w-gscreen-back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx65("span", { className: "ss-w-gscreen-back-arrow", "aria-hidden": "true", children: "\u2039" }),
       ui.back
     ] }),
-    resolveScreen(selected.gameId)
+    renderScreen()
   ] });
 }
 
 // src/components/GamesPanel.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function GamesPanel({
   loggedIn,
   games,
   ui,
   conversation
 }) {
-  const [selected, setSelected] = useState22(null);
-  if (!loggedIn) return /* @__PURE__ */ jsx56(GamesLoginWall, { ui });
+  const [selected, setSelected] = useState30(null);
+  if (!loggedIn) return /* @__PURE__ */ jsx66(GamesLoginWall, { ui });
   if (selected !== null) {
-    return /* @__PURE__ */ jsx56("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx66("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx66(
       GameScreenHost,
       {
         selected,
         onBack: () => setSelected(null),
-        conversation,
+        conversation: conversation ?? null,
         ui
       }
     ) });
   }
-  return /* @__PURE__ */ jsx56("div", { className: "ss-w-mon-list", "data-testid": "games-hub", children: /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx66("div", { className: "ss-w-mon-list", "data-testid": "games-hub", children: /* @__PURE__ */ jsx66(
     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
-import { useState as useState23 } from "react";
+import { useState as useState31 } from "react";
 
 // src/components/LeaderboardRow.tsx
-import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs60 } from "react/jsx-runtime";
 function formatPoints(n) {
   return n.toLocaleString("en");
 }
@@ -4152,14 +5473,14 @@ function LeaderboardWeeklyRow({
   isMe
 }) {
   const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
-  return /* @__PURE__ */ jsxs50("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
-    /* @__PURE__ */ jsxs50("span", { className: rankClass, children: [
+  return /* @__PURE__ */ jsxs60("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
+    /* @__PURE__ */ jsxs60("span", { className: rankClass, children: [
       "#",
       row.rank
     ] }),
-    /* @__PURE__ */ jsx57("span", { className: "ss-w-lb2-handle", children: row.handle }),
-    /* @__PURE__ */ jsx57("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
-    row.currentStreak > 0 && /* @__PURE__ */ jsxs50("span", { className: "ss-w-lb2-streak", children: [
+    /* @__PURE__ */ jsx67("span", { className: "ss-w-lb2-handle", children: row.handle }),
+    /* @__PURE__ */ jsx67("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
+    row.currentStreak > 0 && /* @__PURE__ */ jsxs60("span", { className: "ss-w-lb2-streak", children: [
       "\u{1F525} ",
       row.currentStreak
     ] })
@@ -4170,28 +5491,28 @@ function LeaderboardAllTimeRow({
   isMe
 }) {
   const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
-  return /* @__PURE__ */ jsxs50("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
-    /* @__PURE__ */ jsxs50("span", { className: rankClass, children: [
+  return /* @__PURE__ */ jsxs60("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
+    /* @__PURE__ */ jsxs60("span", { className: rankClass, children: [
       "#",
       row.rank
     ] }),
-    /* @__PURE__ */ jsx57("span", { className: "ss-w-lb2-handle", children: row.handle }),
-    /* @__PURE__ */ jsx57("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
+    /* @__PURE__ */ jsx67("span", { className: "ss-w-lb2-handle", children: row.handle }),
+    /* @__PURE__ */ jsx67("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
   ] });
 }
 
 // src/components/Leaderboard.tsx
-import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs61 } from "react/jsx-runtime";
 function Leaderboard({
   data,
   ui
 }) {
-  const [segment, setSegment] = useState23("weekly");
+  const [segment, setSegment] = useState31("weekly");
   const myRow = segment === "weekly" ? data.myWeeklyRow : data.myAllTimeRow;
   const offBoard = myRow !== null && myRow !== void 0 && myRow.rank === -1;
-  return /* @__PURE__ */ jsxs51("div", { className: "ss-w-lb2", children: [
-    /* @__PURE__ */ jsxs51("div", { className: "ss-w-seg", children: [
-      /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs61("div", { className: "ss-w-lb2", children: [
+    /* @__PURE__ */ jsxs61("div", { className: "ss-w-seg", children: [
+      /* @__PURE__ */ jsx68(
         "button",
         {
           type: "button",
@@ -4201,7 +5522,7 @@ function Leaderboard({
           children: ui.leaderboardThisWeek
         }
       ),
-      /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx68(
         "button",
         {
           type: "button",
@@ -4212,14 +5533,14 @@ function Leaderboard({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx58("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx68("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ jsx68(
       LeaderboardWeeklyRow,
       {
         row,
         isMe: row.operatorUserId === data.myWeeklyRow?.operatorUserId
       },
       row.operatorUserId
-    )) : data.allTimeTop.map((row) => /* @__PURE__ */ jsx58(
+    )) : data.allTimeTop.map((row) => /* @__PURE__ */ jsx68(
       LeaderboardAllTimeRow,
       {
         row,
@@ -4227,29 +5548,29 @@ function Leaderboard({
       },
       row.operatorUserId
     )) }),
-    /* @__PURE__ */ jsx58("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
-    myRow != null && (offBoard ? /* @__PURE__ */ jsx58("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ jsxs51("div", { className: "ss-w-lb2-rows", children: [
-      segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ jsx58(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
-      segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ jsx58(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
+    /* @__PURE__ */ jsx68("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
+    myRow != null && (offBoard ? /* @__PURE__ */ jsx68("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ jsxs61("div", { className: "ss-w-lb2-rows", children: [
+      segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ jsx68(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
+      segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ jsx68(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
     ] })),
-    segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ jsx58("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ jsx58("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ jsx58("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
+    segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ jsx68("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ jsx68("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ jsx68("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
   ] });
 }
 
 // src/components/LeaderboardPanel.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function LeaderboardPanel({ loggedIn, data, ui }) {
-  if (!loggedIn) return /* @__PURE__ */ jsx59(GamesLoginWall, { ui });
-  if (data === null) return /* @__PURE__ */ jsx59("div", { className: "ss-w-mon-list" });
-  return /* @__PURE__ */ jsx59("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx59(Leaderboard, { data, ui }) });
+  if (!loggedIn) return /* @__PURE__ */ jsx69(GamesLoginWall, { ui });
+  if (data === null) return /* @__PURE__ */ jsx69("div", { className: "ss-w-mon-list" });
+  return /* @__PURE__ */ jsx69("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx69(Leaderboard, { data, ui }) });
 }
 
 // src/components/ChatPanel.tsx
-import { jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs62 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = useState24(false);
-  useEffect13(() => {
+  const [modal, setModal] = useState32(false);
+  useEffect14(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -4259,10 +5580,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();
-  useEffect13(() => {
+  useEffect14(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -4273,11 +5594,11 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
-  return /* @__PURE__ */ jsxs52("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsxs62("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ jsx70(
       ChatHeader,
       {
         onClose: close,
@@ -4290,7 +5611,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         moreOptionsLabel: ui.moreOptions
       }
     ),
-    monitor && /* @__PURE__ */ jsx60(
+    monitor && /* @__PURE__ */ jsx70(
       TabBar,
       {
         monitor,
@@ -4302,19 +5623,19 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         gamesEnabled: gamesResult?.enabled ?? false
       }
     ),
-    /* @__PURE__ */ jsx60(
+    /* @__PURE__ */ jsx70(
       "div",
       {
         style: !monitor || monitor.activeTab === "chat" ? { display: "contents" } : { position: "absolute", inset: 0, visibility: "hidden", display: "flex", flexDirection: "column" },
-        children: /* @__PURE__ */ jsx60(MessageList, { controller, ui, slip, onDashboardTap, monitor })
+        children: /* @__PURE__ */ jsx70(MessageList, { controller, ui, slip, onDashboardTap, monitor })
       }
     ),
-    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ jsx60(TodayPanel, { discovery, ui, monitor }),
-    monitor && monitor.activeTab === "following" && /* @__PURE__ */ jsx60(MatchesPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ jsx60(OddsPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ jsx60(GamesPanel, { loggedIn: !!loggedIn, games: gamesResult.games, ui }),
-    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ jsx60(LeaderboardPanel, { loggedIn: !!loggedIn, data: leaderboardResult.data, ui }),
-    /* @__PURE__ */ jsx60(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: handleSend, onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ jsx70(TodayPanel, { discovery, ui, monitor }),
+    monitor && monitor.activeTab === "following" && /* @__PURE__ */ jsx70(MatchesPanel, { monitor, ui, slip }),
+    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ jsx70(OddsPanel, { monitor, ui, slip }),
+    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ jsx70(GamesPanel, { loggedIn: !!loggedIn, games: gamesResult.games, ui, conversation }),
+    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ jsx70(LeaderboardPanel, { loggedIn: !!loggedIn, data: leaderboardResult.data, ui }),
+    /* @__PURE__ */ jsx70(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: handleSend, onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -5267,10 +6588,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
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -5304,14 +6930,14 @@ function StatsWidget(props) {
     [built?.client]
   );
   const ui = useMemo3(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = useRef11(null);
-  const introDoneRef = useRef11(false);
-  const markIntroDone = useCallback8(() => {
+  const rootRef = useRef13(null);
+  const introDoneRef = useRef13(false);
+  const markIntroDone = useCallback9(() => {
     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] = useState25(false);
+  const [hasToday, setHasToday] = useState33(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),
@@ -5319,11 +6945,11 @@ function StatsWidget(props) {
     isOpen: controller.state.isOpen,
     hasToday
   });
-  const getSchedule = useCallback8(
+  const getSchedule = useCallback9(
     (localDate, utcOffsetMinutes) => built ? built.conversation.getSchedule(localDate, utcOffsetMinutes) : Promise.resolve(null),
     [built]
   );
-  const getStates = useCallback8(
+  const getStates = useCallback9(
     (matchIds) => built ? built.conversation.getStates(matchIds) : Promise.resolve(null),
     [built]
   );
@@ -5339,14 +6965,14 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  useEffect14(() => {
+  useEffect15(() => {
     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 = useRef11(0);
-  useEffect14(() => {
+  const prevLiveCountRef = useRef13(0);
+  useEffect15(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
@@ -5381,11 +7007,11 @@ function StatsWidget(props) {
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
   const conversationId = controller.state.conversationId ?? void 0;
-  useEffect14(() => {
+  useEffect15(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!logger) return;
     const onHide = () => {
       logger.flushOnHide();
@@ -5402,14 +7028,14 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  useEffect14(() => {
+  useEffect15(() => {
     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__ */ jsx61(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ jsx61("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__ */ jsx61(
+  return /* @__PURE__ */ jsx71(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ jsx71("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__ */ jsx71(
     ChatPanel,
     {
       controller,
@@ -5420,9 +7046,10 @@ function StatsWidget(props) {
       discovery,
       gamesResult,
       leaderboardResult,
-      loggedIn: !!operatorUserId
+      loggedIn: !!operatorUserId,
+      conversation: built?.conversation ?? null
     }
-  ) : /* @__PURE__ */ jsx61(
+  ) : /* @__PURE__ */ jsx71(
     ChatFab,
     {
       label: ui.launcherLabel,