@sensiblestats/widget-react 0.29.2 → 0.29.4

package/dist/index.cjs

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
 // src/kickoff.ts
@@ -876,7 +876,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/ChatHeader.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -889,7 +889,7 @@ function ChatHeader({ onClose, closeLabel = "Close chat" }) {
 }
 
 // src/components/MessageList.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/components/Markdown.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
@@ -1469,17 +1469,20 @@ function resultClass(result) {
 function FormStrip({ form }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-form", children: form.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `ss-w-fandash-form-pill ${resultClass(r)}`, children: r }, `${r}-${i}`)) });
 }
-function FormRow({ name, form }) {
+function FormRow({ name, form, crestUrl }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-formrow", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-formrow-name", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ss-w-fandash-formrow-team", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: crestUrl ?? void 0, name, kind: "team" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-formrow-name", children: name })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormStrip, { form })
   ] });
 }
-function FixtureCard({ card, onTap }) {
+function FixtureCard({ card }) {
   const { data } = card;
   const h2h = data.h2H;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-fixture", onClick: () => onTap(card), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-fixture", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ss-w-fandash-eyebrow", children: [
         card.title,
         " \xB7 ",
@@ -1497,22 +1500,18 @@ function FixtureCard({ card, onTap }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-fixture-meta", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-fixture-metarow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-fixture-metakey", children: data.dateLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-fixture-metaval", children: data.kickoffLabel })
-        ] }),
-        data.venue ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-fixture-metarow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-fixture-metakey", children: data.venueLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-fixture-metaval", children: data.venue })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-fixture-kickoff", children: data.kickoffLabel }),
+        data.venue ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ss-w-fandash-fixture-venue", children: [
+          " \xB7 ",
+          data.venue
         ] }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-lastfive", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-eyebrow", children: data.formLabel }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-fixture-form", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormRow, { name: data.homeName, form: data.homeForm }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormRow, { name: data.awayName, form: data.awayForm })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormRow, { name: data.homeName, form: data.homeForm, crestUrl: data.homeCrestUrl }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormRow, { name: data.awayName, form: data.awayForm, crestUrl: data.awayCrestUrl })
       ] })
     ] }),
     h2h || data.fact ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-h2h", children: [
@@ -1582,16 +1581,19 @@ function CountdownCard({ card }) {
 }
 
 // src/components/dashboard/InjuriesCard.tsx
+var import_react10 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var SHOWN = 3;
 function ColHead({ name, crestUrl }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "ss-w-fandash-injuries-col-head", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Crest2, { url: crestUrl ?? void 0, name, kind: "team" }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-fandash-injuries-col-head-name", children: name })
   ] });
 }
-function InjuryList({ rows, emptyLabel }) {
+function InjuryList({ rows, emptyLabel, limit }) {
   if (rows.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-fandash-injuries-empty", children: emptyLabel });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "ss-w-fandash-injury-list", children: rows.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: "ss-w-fandash-injury-row", children: [
+  const shown = limit === void 0 ? rows : rows.slice(0, limit);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "ss-w-fandash-injury-list", children: shown.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: "ss-w-fandash-injury-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-fandash-injury-name", children: r.playerName }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "ss-w-fandash-injury-meta", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-fandash-injury-status", children: r.status }),
@@ -1600,21 +1602,36 @@ function InjuryList({ rows, emptyLabel }) {
     ] })
   ] }, `${r.playerName}-${i}`)) });
 }
-function InjuriesCard({ card }) {
+function InjuriesCard({ card, ui }) {
   const { data } = card;
+  const [expanded, setExpanded] = (0, import_react10.useState)(false);
+  const hidden = Math.max(0, data.ours.length - SHOWN) + Math.max(0, data.theirs.length - SHOWN);
+  const limit = expanded ? void 0 : SHOWN;
+  const showMore = ui?.showMore ?? ((n) => `Show ${n} more`);
+  const showLess = ui?.showLess ?? "Show less";
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-injuries", children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-fandash-injuries-cols", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-fandash-injuries-col", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColHead, { name: data.oursName, crestUrl: data.oursCrestUrl }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InjuryList, { rows: data.ours, emptyLabel: data.emptyLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InjuryList, { rows: data.ours, emptyLabel: data.emptyLabel, limit })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ss-w-fandash-injuries-divider" }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-fandash-injuries-col", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColHead, { name: data.theirsName, crestUrl: data.theirsCrestUrl }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InjuryList, { rows: data.theirs, emptyLabel: data.emptyLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InjuryList, { rows: data.theirs, emptyLabel: data.emptyLabel, limit })
       ] })
-    ] })
+    ] }),
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-fandash-injuries-more",
+        "aria-expanded": expanded,
+        onClick: () => setExpanded((v) => !v),
+        children: expanded ? showLess : showMore(hidden)
+      }
+    ) : null
   ] });
 }
 
@@ -1691,21 +1708,60 @@ function LinksCard({ card }) {
 }
 
 // src/components/dashboard/PostMatchResultCard.tsx
+var import_react11 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
+function initials3(name) {
+  return name.trim().slice(0, 3).toUpperCase();
+}
+function PostMatchCrest({
+  url,
+  name,
+  side
+}) {
+  const [failed, setFailed] = (0, import_react11.useState)(false);
+  const cls = `ss-w-fandash-postmatch-crest ss-w-fandash-postmatch-crest--${side}`;
+  if (url && !failed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${cls} ss-w-fandash-postmatch-crest--fallback`, "aria-hidden": "true", children: initials3(name) });
+}
 function PostMatchResultCard({ card }) {
   const { data } = card;
+  const homeWon = data.homeScore >= data.awayScore;
+  const awayWon = data.awayScore >= data.homeScore;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-postmatch-result", children: [
-    card.title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-scoreboard", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-team", children: data.homeName }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-score", children: data.homeScore }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-sep", children: "\u2013" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-score", children: data.awayScore }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-team ss-w-fandash-postmatch-team--away", children: data.awayName })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-top", children: [
+      card.title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-pill", children: card.title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `ss-w-fandash-postmatch-tag ss-w-fandash-postmatch-tag--${data.outcome}`, children: data.resultLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-side ss-w-fandash-postmatch-side--home", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PostMatchCrest, { url: data.homeCrestUrl, name: data.homeName, side: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-team-name", children: data.homeName })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-score-main", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "span",
+          {
+            className: `ss-w-fandash-postmatch-score-value ss-w-fandash-postmatch-score-value--${homeWon ? "win" : "lose"}`,
+            children: data.homeScore
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-score-sep", children: "\u2013" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "span",
+          {
+            className: `ss-w-fandash-postmatch-score-value ss-w-fandash-postmatch-score-value--${awayWon ? "win" : "lose"}`,
+            children: data.awayScore
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-side ss-w-fandash-postmatch-side--away", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PostMatchCrest, { url: data.awayCrestUrl, name: data.awayName, side: "away" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ss-w-fandash-postmatch-team-name", children: data.awayName })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ss-w-fandash-postmatch-meta", children: [
-      data.resultLabel,
-      " \xB7 ",
       data.kickoffLabel,
       data.competition ? ` \xB7 ${data.competition}` : ""
     ] })
@@ -1717,38 +1773,75 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 function PostMatchGoalsCard({ card, onTap }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-postmatch-goals", onClick: () => onTap(card), children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "ss-w-fandash-postmatch-goal-list", children: card.data.goals.map((g, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: g.scoredByClub ? "ss-w-fandash-postmatch-goal ss-w-fandash-postmatch-goal--club" : "ss-w-fandash-postmatch-goal", children: g.text }, `${g.text}-${i}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "ss-w-fandash-postmatch-goal-list", children: card.data.goals.map((g, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { className: g.scoredByClub ? "ss-w-fandash-postmatch-goal ss-w-fandash-postmatch-goal--club" : "ss-w-fandash-postmatch-goal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ss-w-fandash-postmatch-goal-ball" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: g.text })
+    ] }, `${g.text}-${i}`)) }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
   ] });
 }
 
 // src/components/dashboard/PostMatchStatsCard.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
+function splitWidths(homeNum, awayNum) {
+  const total = homeNum + awayNum;
+  if (total <= 0) return { home: "50%", away: "50%" };
+  const homePct = Math.round(homeNum / total * 1e3) / 10;
+  return { home: `${homePct}%`, away: `${Math.round((100 - homePct) * 10) / 10}%` };
+}
 function PostMatchStatsCard({ card, onTap }) {
+  const { data } = card;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-postmatch-stats", onClick: () => onTap(card), children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ss-w-fandash-postmatch-stat-rows", children: card.data.rows.map((r, i) => {
-      const leftValue = card.data.clubIsHome ? r.clubValue : r.oppValue;
-      const rightValue = card.data.clubIsHome ? r.oppValue : r.clubValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-fandash-postmatch-stat-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-value", children: leftValue }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-label", children: r.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-value", children: rightValue })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ss-w-fandash-postmatch-stat-rows", children: data.rows.map((r, i) => {
+      const leftValue = data.clubIsHome ? r.clubValue : r.oppValue;
+      const rightValue = data.clubIsHome ? r.oppValue : r.clubValue;
+      const homeNum = data.clubIsHome ? r.clubNum : r.oppNum;
+      const awayNum = data.clubIsHome ? r.oppNum : r.clubNum;
+      const { home, away } = splitWidths(homeNum, awayNum);
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-fandash-postmatch-stat", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-fandash-postmatch-stat-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-value ss-w-fandash-postmatch-stat-value--home", children: leftValue }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-label", children: r.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-value ss-w-fandash-postmatch-stat-value--away", children: rightValue })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-fandash-postmatch-stat-bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-bar-home", style: { width: home } }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-postmatch-stat-bar-away", style: { width: away } })
+        ] })
       ] }, `${r.label}-${i}`);
     }) }),
+    data.rows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-fandash-postmatch-legend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "ss-w-fandash-postmatch-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", { className: "ss-w-fandash-postmatch-legend-swatch ss-w-fandash-postmatch-legend-swatch--home" }),
+        data.homeName
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "ss-w-fandash-postmatch-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", { className: "ss-w-fandash-postmatch-legend-swatch ss-w-fandash-postmatch-legend-swatch--away" }),
+        data.awayName
+      ] })
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
   ] });
 }
 
 // src/components/dashboard/PostMatchTopPerformerCard.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function initials4(playerName) {
+  const words = playerName.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = words[0].charAt(0);
+  const last = words[words.length - 1].charAt(0);
+  return (words.length > 1 ? `${first}${last}` : first).toUpperCase();
+}
 function PostMatchTopPerformerCard({ card, onTap }) {
   const { data } = card;
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("button", { type: "button", className: "ss-w-fandash-card ss-w-fandash-card--tap ss-w-fandash-postmatch-performer", onClick: () => onTap(card), children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ss-w-fandash-postmatch-performer-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-postmatch-performer-name", children: data.playerName }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-postmatch-performer-rating", children: data.ratingLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ss-w-fandash-postmatch-perf-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-postmatch-perf-avatar", "aria-hidden": "true", children: initials4(data.playerName) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-postmatch-perf-name", children: data.playerName }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-postmatch-perf-rating", children: data.ratingLabel })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "ss-w-fandash-card-cta", children: card.actionLabel })
   ] });
@@ -1824,10 +1917,10 @@ function RestingFormCard({ card }) {
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/useLiveClock.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 var TICK_MS = 6e4;
 var MAX_LIVE_TICK_MINUTES = 15;
 function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
@@ -1836,10 +1929,10 @@ function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
   return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
 }
 function useLiveClock(minute, clockRunning, receivedAtMs) {
-  const [displayMinute, setDisplayMinute] = (0, import_react10.useState)(
+  const [displayMinute, setDisplayMinute] = (0, import_react12.useState)(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
     if (!clockRunning) return;
     const id = window.setInterval(() => {
@@ -1852,16 +1945,16 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
 
 // src/components/dashboard/LiveScoreCard.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-function initials3(name) {
+function initials5(name) {
   return name.trim().slice(0, 3).toUpperCase();
 }
 function LiveCrest({ url, name, side }) {
-  const [failed, setFailed] = (0, import_react11.useState)(false);
+  const [failed, setFailed] = (0, import_react13.useState)(false);
   const cls = `ss-w-fandash-live-crest ss-w-fandash-live-crest--${side}`;
   if (url && !failed) {
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: cls, src: url, alt: "", "aria-hidden": "true", onError: () => setFailed(true) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `${cls} ss-w-fandash-live-crest--fallback`, "aria-hidden": "true", children: initials3(name) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `${cls} ss-w-fandash-live-crest--fallback`, "aria-hidden": "true", children: initials5(name) });
 }
 function scorersLine(goalEvents) {
   if (!goalEvents || goalEvents.length === 0) return null;
@@ -1875,7 +1968,7 @@ function LiveScoreCard({
 }) {
   const { data } = card;
   const seedKey = `${data.minute}:${data.homeScore}:${data.awayScore}`;
-  const seedRef = (0, import_react11.useRef)(null);
+  const seedRef = (0, import_react13.useRef)(null);
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
@@ -1915,9 +2008,9 @@ function LiveScoreCard({
 }
 
 // src/components/dashboard/LiveTimelineCard.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var SHOWN = 3;
+var SHOWN2 = 3;
 function EventIcon({ type }) {
   if (type === "goal") {
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ico ss-w-fandash-live-tl-ico--goal", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ss-w-fandash-live-tl-ball" }) });
@@ -1957,12 +2050,12 @@ function EventRow({ e }) {
   ] });
 }
 function LiveTimelineCard({ card, ui }) {
-  const [expanded, setExpanded] = (0, import_react12.useState)(false);
+  const [expanded, setExpanded] = (0, import_react14.useState)(false);
   const events = card.data.events;
   if (!events || events.length === 0) return null;
   const sorted = [...events].sort((a, b) => b.minute - a.minute);
-  const rest = sorted.length - SHOWN;
-  const shown = expanded ? sorted : sorted.slice(0, SHOWN);
+  const rest = sorted.length - SHOWN2;
+  const shown = expanded ? sorted : sorted.slice(0, SHOWN2);
   const showMore = ui?.showMore ?? ((n) => `Show ${n} more`);
   const showLess = ui?.showLess ?? "Show less";
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-live-timeline", children: [
@@ -1982,7 +2075,7 @@ function LiveTimelineCard({ card, ui }) {
 }
 
 // src/components/dashboard/MomentumWave.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var WIDTH = 270;
 var HEIGHT = 56;
@@ -2005,7 +2098,7 @@ function MomentumWave({
 }) {
   if (points.length === 0) return null;
   const { area, line, lastX, lastY } = buildPaths(points);
-  const clipId = (0, import_react13.useId)();
+  const clipId = (0, import_react15.useId)();
   const topClipId = `${clipId}-top`;
   const bottomClipId = `${clipId}-bottom`;
   const topClass = clubIsHome ? "ss-w-fandash-live-mom-home" : "ss-w-fandash-live-mom-away";
@@ -2038,7 +2131,7 @@ function MomentumWave({
 
 // src/components/dashboard/LiveStatsCard.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-function splitWidths(homeNum, awayNum) {
+function splitWidths2(homeNum, awayNum) {
   const total = homeNum + awayNum;
   if (total <= 0) return { home: "50%", away: "50%" };
   const homePct = Math.round(homeNum / total * 1e3) / 10;
@@ -2053,7 +2146,7 @@ function LiveStatsCard({ card }) {
       const awayValue = data.clubIsHome ? r.oppValue : r.clubValue;
       const homeNum = data.clubIsHome ? r.clubNum : r.oppNum;
       const awayNum = data.clubIsHome ? r.oppNum : r.clubNum;
-      const { home, away } = splitWidths(homeNum, awayNum);
+      const { home, away } = splitWidths2(homeNum, awayNum);
       return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-stat", children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-stat-row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-stat-value ss-w-fandash-live-stat-value--home", children: homeValue }),
@@ -2099,11 +2192,11 @@ function ClubFanDashboard({ dashboard, onTap, ui }) {
 function FanDashboardCard({ card, onTap, ui, goalEvents }) {
   switch (card.cardType) {
     case "fixture":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FixtureCard, { card, onTap });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FixtureCard, { card });
     case "countdown":
       return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CountdownCard, { card });
     case "injuries":
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InjuriesCard, { card });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InjuriesCard, { card, ui });
     case "reasonToBet":
       return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ReasonToBetCard, { card });
     case "whereToWatch":
@@ -2187,11 +2280,11 @@ function turnAnchor(messages) {
 }
 function MessageList({ controller, ui, slip, onDashboardTap }) {
   const { state, send } = controller;
-  const listRef = (0, import_react14.useRef)(null);
-  const endRef = (0, import_react14.useRef)(null);
-  const pinnedRef = (0, import_react14.useRef)(true);
-  const anchoredTurnRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const listRef = (0, import_react16.useRef)(null);
+  const endRef = (0, import_react16.useRef)(null);
+  const pinnedRef = (0, import_react16.useRef)(true);
+  const anchoredTurnRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     const anchor = turnAnchor(state.messages);
     const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
@@ -2246,10 +2339,10 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
 }
 
 // src/components/ChatInput.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = (0, import_react15.useState)("");
+  const [value, setValue] = (0, import_react17.useState)("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -2272,8 +2365,8 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const [modal, setModal] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -2286,7 +2379,7 @@ function useIsModal() {
 function ChatPanel({ controller, ui, slip, onDashboardTap }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -2699,10 +2792,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }
 .ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }
 /* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */
-.ss-w-fandash-fixture-meta { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--ss-w-line); padding-top: 8px; }
-.ss-w-fandash-fixture-metarow { display: flex; align-items: baseline; gap: 9px; }
-.ss-w-fandash-fixture-metakey { flex: none; width: 44px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
-.ss-w-fandash-fixture-metaval { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-fandash-fixture-venue { font-weight: 600; }
 .ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }
 /* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */
 .ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }
@@ -2712,7 +2804,12 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* last-five: one row per side, team name left, form pills right */
 .ss-w-fandash-fixture-form { display: flex; flex-direction: column; gap: 5px; }
 .ss-w-fandash-formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ss-w-fandash-formrow-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ss-w-fandash-formrow-team .ss-w-bi-crest { width: 20px; height: 20px; }
+.ss-w-fandash-formrow-team .ss-w-bi-crest-mono { font-size: 9px; }
 .ss-w-fandash-formrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
+.ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }
+.ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 .ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }
 .ss-w-fandash-form-pill {
   display: inline-grid; place-items: center; width: 16px; height: 16px;
@@ -2776,35 +2873,76 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
 .ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }
 
-/* post-match result: full-time scoreboard -- team names flank the score, meta line underneath */
-.ss-w-fandash-postmatch-scoreboard { display: flex; align-items: center; gap: 8px; }
-.ss-w-fandash-postmatch-team { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
-.ss-w-fandash-postmatch-team--away { text-align: right; }
-.ss-w-fandash-postmatch-score { flex: none; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
-.ss-w-fandash-postmatch-sep { flex: none; font-size: 14px; font-weight: 700; color: var(--ss-w-faint); }
-.ss-w-fandash-postmatch-meta { font-size: 11.5px; color: var(--ss-w-faint); }
-
-/* post-match goals: a plain list, the club's own goals picked out in the accent color */
-.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
-.ss-w-fandash-postmatch-goal { font-size: 12.5px; color: var(--ss-w-faint); }
+/* post-match result: full-time scoreboard, mirroring the live card's crest + big-score treatment.
+   A neutral "Full time" pill sits left of a coloured Win/Draw/Loss tag; the 3-column main row
+   (home crest+name | score | away crest+name, away reversed) puts the winner's score in full ink
+   and the loser's dimmed; a centered meta line sits under a divider. */
+.ss-w-fandash-postmatch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
+.ss-w-fandash-postmatch-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 6px; padding: 3px 8px; }
+.ss-w-fandash-postmatch-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
+.ss-w-fandash-postmatch-tag--win { color: var(--ss-w-pos); }
+.ss-w-fandash-postmatch-tag--loss { color: var(--ss-w-neg); }
+.ss-w-fandash-postmatch-tag--draw { color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
+.ss-w-fandash-postmatch-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.ss-w-fandash-postmatch-side--away { flex-direction: row-reverse; text-align: right; }
+.ss-w-fandash-postmatch-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
+.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--home { background: var(--ss-w-home); }
+.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--away { background: var(--ss-w-away); }
+.ss-w-fandash-postmatch-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }
+.ss-w-fandash-postmatch-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
+.ss-w-fandash-postmatch-score-value--win { color: var(--ss-w-ink); }
+.ss-w-fandash-postmatch-score-value--lose { color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }
+.ss-w-fandash-postmatch-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ss-w-line); font-size: 12px; color: var(--ss-w-faint); text-align: center; }
+
+/* post-match goals: a football-ball icon per goal (mirrors the live timeline ball, duplicated here
+   under the postmatch prefix), text dimmed for opponent goals and picked out in full ink + bold
+   for the club's own goals */
+.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.ss-w-fandash-postmatch-goal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-goal-ball { width: 11px; height: 11px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }
 .ss-w-fandash-postmatch-goal--club { color: var(--ss-w-ink); font-weight: 650; }
 
-/* post-match stats: club value / stat label / opponent value, three columns per row */
-.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 5px; }
-.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
+/* post-match stats: home value / stat label / away value, oriented by venue (u316), each row now
+   backed by a home/away split bar -- the big upgrade from plain text -- plus a legend. Mirrors
+   LiveStatsCard's split-bar treatment under the postmatch-prefixed classes; the shared
+   --ss-w-home/--ss-w-away/--ss-w-track tokens are defined above. */
+.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 15px; }
+.ss-w-fandash-postmatch-stat { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }
 .ss-w-fandash-postmatch-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
-.ss-w-fandash-postmatch-stat-row .ss-w-fandash-postmatch-stat-value:last-child { text-align: right; }
+.ss-w-fandash-postmatch-stat-value--home { color: var(--ss-w-home); }
+.ss-w-fandash-postmatch-stat-value--away { color: var(--ss-w-away); text-align: right; }
 .ss-w-fandash-postmatch-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }
-
-/* post-match top performer: player name left, rating pill right */
-.ss-w-fandash-postmatch-performer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.ss-w-fandash-postmatch-performer-name { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
-.ss-w-fandash-postmatch-performer-rating { flex: none; font-size: 12px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 2px 9px; }
-
-/* post-match next: the upcoming fixture teaser -- opponent left, when-label right */
-.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.ss-w-fandash-postmatch-next-opponent { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
-.ss-w-fandash-postmatch-next-when { flex: none; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-stat-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }
+.ss-w-fandash-postmatch-stat-bar-home { height: 100%; background: var(--ss-w-home); }
+.ss-w-fandash-postmatch-stat-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }
+.ss-w-fandash-postmatch-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-fandash-postmatch-legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.ss-w-fandash-postmatch-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.ss-w-fandash-postmatch-legend-swatch--home { background: var(--ss-w-home); }
+.ss-w-fandash-postmatch-legend-swatch--away { background: var(--ss-w-away); }
+
+/* post-match top performer (full mockup treatment): gradient initials avatar + name + a
+   prominent rating chip. Avatar gradient reuses the --ss-w-away token, same pairing as the live
+   crest fallback; "?" renders through the same avatar span when the name is blank. */
+.ss-w-fandash-postmatch-perf-row { display: flex; align-items: center; gap: 12px; }
+.ss-w-fandash-postmatch-perf-avatar {
+  flex: none; width: 42px; height: 42px; border-radius: 50%;
+  display: grid; place-items: center;
+  font-size: 14px; font-weight: 800; color: #fff;
+  background: linear-gradient(135deg, var(--ss-w-away), color-mix(in srgb, var(--ss-w-away) 55%, #000));
+}
+.ss-w-fandash-postmatch-perf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
+.ss-w-fandash-postmatch-perf-rating { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 11px; }
+
+/* post-match next (v1, modest): whenLabel is already a complete localized phrase (opponent +
+   venue + kickoff) composed server-side, so this card renders just that one line -- dressed up
+   with an accent rule rather than a duplicated opponent line. The richer opponent-headline/venue-
+   chip/crest layout from the mockup needs a server field split and is deferred. */
+.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--ss-w-accent); padding-left: 10px; }
+.ss-w-fandash-postmatch-next-when { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.3; }
 
 /* resting next: the between-matches fixture teaser -- when-label left, competition badge right */
 .ss-w-fandash-resting-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@@ -2931,11 +3069,11 @@ function injectStyles(root) {
 function StatsWidget(props) {
   const injectedClient = "client" in props ? props.client : void 0;
   const cfg = props.config;
-  const built = (0, import_react17.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
-  const ui = (0, import_react17.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = (0, import_react17.useRef)(null);
+  const built = (0, import_react19.useMemo)(() => buildClient(props), [injectedClient, cfg?.operatorId, cfg?.publicKey, cfg?.baseUrl]);
+  const ui = (0, import_react19.useMemo)(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
+  const rootRef = (0, import_react19.useRef)(null);
   const controller = useChatStream(built?.conversation ?? emptyConversation(), ui.starters, built ? ui.greetingMessage : void 0);
-  const slip = (0, import_react17.useMemo)(
+  const slip = (0, import_react19.useMemo)(
     () => ({
       onAddToSlip: props.config?.onAddToSlip,
       conversationId: controller.state.conversationId ?? void 0,
@@ -2948,11 +3086,11 @@ function StatsWidget(props) {
     }),
     [props.config?.onAddToSlip, controller.state.conversationId, built]
   );
-  const onDashboardTap = (0, import_react17.useMemo)(
+  const onDashboardTap = (0, import_react19.useMemo)(
     () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input)) : void 0,
     [built]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);