@sensiblestats/widget-react 0.60.5 → 0.61.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.61.0
+
+### Minor Changes
+
+- Games: answer reveal with team crest, player photos in XI discs and quiz options, Beat the Grid header meta rendering (club crest, coach photo, country flag, full position label), comprehensive flag map additions including Congo, Kosovo, and 60+ more nationalities.
+
+## 0.60.6
+
+### Patch Changes
+
+- Games: Higher/Lower buttons fit phone-width cards (icons drop and type tightens on narrow cards, stacking below 180px), and Guess the XI shows a nationality's three-letter code at a size that fits its disc when there is no flag.
+
 ## 0.60.5
 
 ### Patch Changes

package/dist/index.cjs

@@ -236,7 +236,8 @@ var STRINGS = {
         optionsLabel: "Clubs",
         solved: "Solved!",
         failed: "Out of guesses",
-        detail: (n) => `${n} ${n === 1 ? "guess" : "guesses"} \xB7 back tomorrow`
+        detail: (n) => `${n} ${n === 1 ? "guess" : "guesses"} \xB7 back tomorrow`,
+        theAnswer: "The answer"
       },
       dailyQuiz: {
         questionOf: (i, n) => `Question ${i} of ${n}`,
@@ -531,7 +532,8 @@ var STRINGS = {
         optionsLabel: "Kul\xFCpler",
         solved: "Bildin!",
         failed: "Tahmin hakk\u0131n bitti",
-        detail: (n) => `${n} tahmin \xB7 yar\u0131n yine gel`
+        detail: (n) => `${n} tahmin \xB7 yar\u0131n yine gel`,
+        theAnswer: "Do\u011Fru cevap"
       },
       dailyQuiz: {
         questionOf: (i, n) => `Soru ${i} / ${n}`,
@@ -4769,6 +4771,7 @@ var import_react31 = require("react");
 
 // src/components/games/nationFlags.ts
 var FLAGS = {
+  // UK home nations (subdivision flags)
   england: "\u{1F3F4}\u{E0067}\u{E0062}\u{E0065}\u{E006E}\u{E0067}\u{E007F}",
   scotland: "\u{1F3F4}\u{E0067}\u{E0062}\u{E0073}\u{E0063}\u{E0074}\u{E007F}",
   wales: "\u{1F3F4}\u{E0067}\u{E0062}\u{E0077}\u{E006C}\u{E0073}\u{E007F}",
@@ -4776,6 +4779,7 @@ var FLAGS = {
   "republic of ireland": "\u{1F1EE}\u{1F1EA}",
   ireland: "\u{1F1EE}\u{1F1EA}",
   "united kingdom": "\u{1F1EC}\u{1F1E7}",
+  // Western & Southern Europe
   france: "\u{1F1EB}\u{1F1F7}",
   spain: "\u{1F1EA}\u{1F1F8}",
   portugal: "\u{1F1F5}\u{1F1F9}",
@@ -4785,17 +4789,27 @@ var FLAGS = {
   belgium: "\u{1F1E7}\u{1F1EA}",
   switzerland: "\u{1F1E8}\u{1F1ED}",
   austria: "\u{1F1E6}\u{1F1F9}",
+  luxembourg: "\u{1F1F1}\u{1F1FA}",
+  malta: "\u{1F1F2}\u{1F1F9}",
+  cyprus: "\u{1F1E8}\u{1F1FE}",
+  andorra: "\u{1F1E6}\u{1F1E9}",
+  liechtenstein: "\u{1F1F1}\u{1F1EE}",
+  "san marino": "\u{1F1F8}\u{1F1F2}",
+  monaco: "\u{1F1F2}\u{1F1E8}",
+  // Northern Europe
   denmark: "\u{1F1E9}\u{1F1F0}",
   sweden: "\u{1F1F8}\u{1F1EA}",
   norway: "\u{1F1F3}\u{1F1F4}",
   finland: "\u{1F1EB}\u{1F1EE}",
   iceland: "\u{1F1EE}\u{1F1F8}",
+  // Central & Eastern Europe
   poland: "\u{1F1F5}\u{1F1F1}",
   czechia: "\u{1F1E8}\u{1F1FF}",
   "czech republic": "\u{1F1E8}\u{1F1FF}",
   croatia: "\u{1F1ED}\u{1F1F7}",
   serbia: "\u{1F1F7}\u{1F1F8}",
   "bosnia and herzegovina": "\u{1F1E7}\u{1F1E6}",
+  bosnia: "\u{1F1E7}\u{1F1E6}",
   greece: "\u{1F1EC}\u{1F1F7}",
   romania: "\u{1F1F7}\u{1F1F4}",
   ukraine: "\u{1F1FA}\u{1F1E6}",
@@ -4803,10 +4817,29 @@ var FLAGS = {
   hungary: "\u{1F1ED}\u{1F1FA}",
   slovakia: "\u{1F1F8}\u{1F1F0}",
   slovenia: "\u{1F1F8}\u{1F1EE}",
+  bulgaria: "\u{1F1E7}\u{1F1EC}",
+  lithuania: "\u{1F1F1}\u{1F1F9}",
+  latvia: "\u{1F1F1}\u{1F1FB}",
+  estonia: "\u{1F1EA}\u{1F1EA}",
+  moldova: "\u{1F1F2}\u{1F1E9}",
+  belarus: "\u{1F1E7}\u{1F1FE}",
+  // South-East Europe / Balkans
   turkey: "\u{1F1F9}\u{1F1F7}",
   t\u00FCrkiye: "\u{1F1F9}\u{1F1F7}",
   albania: "\u{1F1E6}\u{1F1F1}",
   "north macedonia": "\u{1F1F2}\u{1F1F0}",
+  kosovo: "\u{1F1FD}\u{1F1F0}",
+  montenegro: "\u{1F1F2}\u{1F1EA}",
+  // Caucasus & Central Asia
+  armenia: "\u{1F1E6}\u{1F1F2}",
+  georgia: "\u{1F1EC}\u{1F1EA}",
+  azerbaijan: "\u{1F1E6}\u{1F1FF}",
+  kazakhstan: "\u{1F1F0}\u{1F1FF}",
+  uzbekistan: "\u{1F1FA}\u{1F1FF}",
+  kyrgyzstan: "\u{1F1F0}\u{1F1EC}",
+  tajikistan: "\u{1F1F9}\u{1F1EF}",
+  turkmenistan: "\u{1F1F9}\u{1F1F2}",
+  // South America
   brazil: "\u{1F1E7}\u{1F1F7}",
   argentina: "\u{1F1E6}\u{1F1F7}",
   uruguay: "\u{1F1FA}\u{1F1FE}",
@@ -4815,38 +4848,134 @@ var FLAGS = {
   peru: "\u{1F1F5}\u{1F1EA}",
   ecuador: "\u{1F1EA}\u{1F1E8}",
   paraguay: "\u{1F1F5}\u{1F1FE}",
+  venezuela: "\u{1F1FB}\u{1F1EA}",
+  bolivia: "\u{1F1E7}\u{1F1F4}",
+  guyana: "\u{1F1EC}\u{1F1FE}",
+  suriname: "\u{1F1F8}\u{1F1F7}",
+  // North & Central America
   mexico: "\u{1F1F2}\u{1F1FD}",
   "united states": "\u{1F1FA}\u{1F1F8}",
   usa: "\u{1F1FA}\u{1F1F8}",
   canada: "\u{1F1E8}\u{1F1E6}",
+  "costa rica": "\u{1F1E8}\u{1F1F7}",
+  panama: "\u{1F1F5}\u{1F1E6}",
+  honduras: "\u{1F1ED}\u{1F1F3}",
+  "el salvador": "\u{1F1F8}\u{1F1FB}",
+  guatemala: "\u{1F1EC}\u{1F1F9}",
+  nicaragua: "\u{1F1F3}\u{1F1EE}",
+  // Caribbean
   jamaica: "\u{1F1EF}\u{1F1F2}",
+  cuba: "\u{1F1E8}\u{1F1FA}",
+  haiti: "\u{1F1ED}\u{1F1F9}",
+  "dominican republic": "\u{1F1E9}\u{1F1F4}",
+  "trinidad and tobago": "\u{1F1F9}\u{1F1F9}",
+  trinidad: "\u{1F1F9}\u{1F1F9}",
+  "cura\xE7ao": "\u{1F1E8}\u{1F1FC}",
+  curacao: "\u{1F1E8}\u{1F1FC}",
+  barbados: "\u{1F1E7}\u{1F1E7}",
+  // West Africa
   nigeria: "\u{1F1F3}\u{1F1EC}",
   ghana: "\u{1F1EC}\u{1F1ED}",
   senegal: "\u{1F1F8}\u{1F1F3}",
   ivorycoast: "\u{1F1E8}\u{1F1EE}",
   "cote d'ivoire": "\u{1F1E8}\u{1F1EE}",
+  "c\xF4te d'ivoire": "\u{1F1E8}\u{1F1EE}",
   "ivory coast": "\u{1F1E8}\u{1F1EE}",
   cameroon: "\u{1F1E8}\u{1F1F2}",
+  mali: "\u{1F1F2}\u{1F1F1}",
+  guinea: "\u{1F1EC}\u{1F1F3}",
+  "guinea-bissau": "\u{1F1EC}\u{1F1FC}",
+  "sierra leone": "\u{1F1F8}\u{1F1F1}",
+  liberia: "\u{1F1F1}\u{1F1F7}",
+  "cape verde": "\u{1F1E8}\u{1F1FB}",
+  "gambia": "\u{1F1EC}\u{1F1F2}",
+  mauritania: "\u{1F1F2}\u{1F1F7}",
+  togo: "\u{1F1F9}\u{1F1EC}",
+  benin: "\u{1F1E7}\u{1F1EF}",
+  "burkina faso": "\u{1F1E7}\u{1F1EB}",
+  niger: "\u{1F1F3}\u{1F1EA}",
+  // Central & East Africa
+  "dr congo": "\u{1F1E8}\u{1F1E9}",
+  "democratic republic of the congo": "\u{1F1E8}\u{1F1E9}",
+  "congo dr": "\u{1F1E8}\u{1F1E9}",
+  "republic of the congo": "\u{1F1E8}\u{1F1EC}",
+  congo: "\u{1F1E8}\u{1F1EC}",
+  "congo republic": "\u{1F1E8}\u{1F1EC}",
+  "congo-brazzaville": "\u{1F1E8}\u{1F1EC}",
+  "central african republic": "\u{1F1E8}\u{1F1EB}",
+  gabon: "\u{1F1EC}\u{1F1E6}",
+  "equatorial guinea": "\u{1F1EC}\u{1F1F6}",
+  "south africa": "\u{1F1FF}\u{1F1E6}",
+  angola: "\u{1F1E6}\u{1F1F4}",
+  namibia: "\u{1F1F3}\u{1F1E6}",
+  botswana: "\u{1F1E7}\u{1F1FC}",
+  zimbabwe: "\u{1F1FF}\u{1F1FC}",
+  zambia: "\u{1F1FF}\u{1F1F2}",
+  malawi: "\u{1F1F2}\u{1F1FC}",
+  mozambique: "\u{1F1F2}\u{1F1FF}",
+  tanzania: "\u{1F1F9}\u{1F1FF}",
+  kenya: "\u{1F1F0}\u{1F1EA}",
+  uganda: "\u{1F1FA}\u{1F1EC}",
+  rwanda: "\u{1F1F7}\u{1F1FC}",
+  ethiopia: "\u{1F1EA}\u{1F1F9}",
+  eritrea: "\u{1F1EA}\u{1F1F7}",
+  djibouti: "\u{1F1E9}\u{1F1EF}",
+  somalia: "\u{1F1F8}\u{1F1F4}",
+  sudan: "\u{1F1F8}\u{1F1E9}",
+  "south sudan": "\u{1F1F8}\u{1F1F8}",
+  chad: "\u{1F1F9}\u{1F1E9}",
+  lesotho: "\u{1F1F1}\u{1F1F8}",
+  eswatini: "\u{1F1F8}\u{1F1FF}",
+  swaziland: "\u{1F1F8}\u{1F1FF}",
+  madagascar: "\u{1F1F2}\u{1F1EC}",
+  mauritius: "\u{1F1F2}\u{1F1FA}",
+  comoros: "\u{1F1F0}\u{1F1F2}",
+  seychelles: "\u{1F1F8}\u{1F1E8}",
+  // North Africa
   egypt: "\u{1F1EA}\u{1F1EC}",
   morocco: "\u{1F1F2}\u{1F1E6}",
   algeria: "\u{1F1E9}\u{1F1FF}",
   tunisia: "\u{1F1F9}\u{1F1F3}",
-  mali: "\u{1F1F2}\u{1F1F1}",
-  "south africa": "\u{1F1FF}\u{1F1E6}",
-  "dr congo": "\u{1F1E8}\u{1F1E9}",
+  // Middle East
+  "saudi arabia": "\u{1F1F8}\u{1F1E6}",
+  iran: "\u{1F1EE}\u{1F1F7}",
+  iraq: "\u{1F1EE}\u{1F1F6}",
+  lebanon: "\u{1F1F1}\u{1F1E7}",
+  syria: "\u{1F1F8}\u{1F1FE}",
+  jordan: "\u{1F1EF}\u{1F1F4}",
+  qatar: "\u{1F1F6}\u{1F1E6}",
+  "united arab emirates": "\u{1F1E6}\u{1F1EA}",
+  uae: "\u{1F1E6}\u{1F1EA}",
+  kuwait: "\u{1F1F0}\u{1F1FC}",
+  bahrain: "\u{1F1E7}\u{1F1ED}",
+  oman: "\u{1F1F4}\u{1F1F2}",
+  yemen: "\u{1F1FE}\u{1F1EA}",
+  israel: "\u{1F1EE}\u{1F1F1}",
+  palestine: "\u{1F1F5}\u{1F1F8}",
+  // East & South-East Asia
   japan: "\u{1F1EF}\u{1F1F5}",
   "south korea": "\u{1F1F0}\u{1F1F7}",
   korea: "\u{1F1F0}\u{1F1F7}",
+  china: "\u{1F1E8}\u{1F1F3}",
+  india: "\u{1F1EE}\u{1F1F3}",
+  thailand: "\u{1F1F9}\u{1F1ED}",
+  indonesia: "\u{1F1EE}\u{1F1E9}",
+  malaysia: "\u{1F1F2}\u{1F1FE}",
+  philippines: "\u{1F1F5}\u{1F1ED}",
+  vietnam: "\u{1F1FB}\u{1F1F3}",
+  // Oceania
   australia: "\u{1F1E6}\u{1F1FA}",
-  "saudi arabia": "\u{1F1F8}\u{1F1E6}",
-  iran: "\u{1F1EE}\u{1F1F7}",
-  "new zealand": "\u{1F1F3}\u{1F1FF}"
+  "new zealand": "\u{1F1F3}\u{1F1FF}",
+  fiji: "\u{1F1EB}\u{1F1EF}"
 };
 function nationalityFlag(nationality) {
   if (!nationality) return "\u{1F3F3}\uFE0F";
   const key = nationality.trim().toLowerCase();
   return FLAGS[key] ?? nationality.slice(0, 3).toUpperCase();
 }
+function isNationCode(flag) {
+  return /^[A-Z]{1,3}$/.test(flag);
+}
 
 // src/components/games/PlayerAvatar.tsx
 var import_react30 = require("react");
@@ -5545,6 +5674,23 @@ function CriterionIcon({ kind }) {
       return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(IconFlag, {});
   }
 }
+function HeaderVisual({ label, key: iKey, meta }) {
+  if (!meta) {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CriterionIcon, { kind: criterionIconKind(label, iKey) });
+  }
+  switch (meta.kind) {
+    case "club":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CrestShield, { src: meta.imageUrl, name: label, size: 24 });
+    case "coach":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PlayerAvatar, { name: label, imagePath: meta.imageUrl, className: "ss-g-btg-coach-av" });
+    case "country":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-btg-hdr-flag", "aria-hidden": "true", children: nationalityFlag(meta.country ?? label) });
+    case "position":
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, {});
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CriterionIcon, { kind: criterionIconKind(label, iKey) });
+  }
+}
 function parseClientState4(json) {
   if (!json) return null;
   try {
@@ -5623,7 +5769,7 @@ function SearchSheet({
           options: filtered.map((p) => ({
             key: p.id,
             content: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PlayerAvatar, { name: p.name, className: "ss-g-opt-av" }),
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PlayerAvatar, { name: p.name, imagePath: p.imagePath, className: "ss-g-opt-av" }),
               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-btg-result-name", children: p.name }),
               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-btg-result-plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(IconPlus, { size: 18 }) })
             ] })
@@ -5702,17 +5848,25 @@ function BeatTheGridGame({
           role: "grid",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ss-g-btg-corner" }),
-            cols.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ss-g-btg-colhdr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CriterionIcon, { kind: criterionIconKind(col, config.colsI18n?.[colIdx]?.key) }),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: col })
-            ] }, col)),
+            cols.map((col, colIdx) => {
+              const colMeta = config.colsMeta?.[colIdx];
+              return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ss-g-btg-colhdr", "data-meta": colMeta ? "true" : void 0, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HeaderVisual, { label: col, meta: colMeta }, config.colsI18n?.[colIdx]?.key),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: col })
+              ] }, col);
+            }),
             rows.map((rowLabel, rowIdx) => {
+              const rowMeta = config.rowsMeta?.[rowIdx];
               const abbr = rowAbbrev(rowLabel, s.rowAbbrev, config.rowsI18n?.[rowIdx]?.key);
+              const rowHeaderContent = rowMeta ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HeaderVisual, { label: rowLabel, meta: rowMeta }, config.rowsI18n?.[rowIdx]?.key),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: rowLabel })
+              ] }) : abbr === rowLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: rowLabel }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { "aria-hidden": "true", children: abbr }),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-sr", children: rowLabel })
+              ] });
               return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react34.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ss-g-btg-rowhdr", children: abbr === rowLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: rowLabel }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { "aria-hidden": "true", children: abbr }),
-                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-sr", children: rowLabel })
-                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ss-g-btg-rowhdr", "data-meta": rowMeta ? "true" : void 0, children: rowHeaderContent }),
                 cols.map((colLabel, colIdx) => {
                   const filled = findCellResult(filledCells, rowIdx, colIdx);
                   const isActive = activeCell?.row === rowIdx && activeCell?.col === colIdx;
@@ -5739,7 +5893,17 @@ function BeatTheGridGame({
                           }
                         ),
                         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-btg-rarity", children: filled.rarityScore }),
-                        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Silhouette, { size: 40 }),
+                        (() => {
+                          const entry = playerPool.find((p) => p.id === filled.playerId);
+                          return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                            PlayerAvatar,
+                            {
+                              name: entry?.name ?? "",
+                              imagePath: entry?.imagePath,
+                              className: "ss-g-btg-av"
+                            }
+                          );
+                        })(),
                         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-btg-name", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) })
                       ] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ss-g-btg-plus", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(IconPlus, { size: 22 }) })
                     },
@@ -5884,6 +6048,10 @@ function GuessTheXiGame({
   (clientState?.earnedReveals ?? []).forEach((r) => {
     if (r.slot && r.type !== "position") nameBySlot.set(r.slot, r.value);
   });
+  const lineupBySlot = /* @__PURE__ */ new Map();
+  (clientState?.lineup ?? []).forEach((e) => {
+    lineupBySlot.set(e.slot, { name: e.name, imagePath: e.imagePath });
+  });
   const filtered = config && !isOver ? config.teamPool.filter(
     (tm) => !guessedTeamIds.has(tm.teamId) && tm.teamName.toLowerCase().includes(query.toLowerCase())
   ) : [];
@@ -5916,15 +6084,31 @@ function GuessTheXiGame({
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ss-g-gxi-row", children: row.map((pos, c) => {
             const posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
             const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
+            const lineupEntry = pos.slot ? lineupBySlot.get(pos.slot) : void 0;
+            const flag = nationalityFlag(pos.nationality);
+            if (lineupEntry) {
+              return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ss-g-gxi-node", "data-revealed": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  PlayerAvatar,
+                  {
+                    name: lineupEntry.name,
+                    imagePath: lineupEntry.imagePath,
+                    className: "ss-g-gxi-disc ss-g-gxi-disc--photo"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(lineupEntry.name).last })
+              ] }, `${pos.slot}-${c}`);
+            }
             return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
               /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "span",
                 {
                   className: "ss-g-gxi-disc",
+                  "data-code": isNationCode(flag) ? "true" : void 0,
                   role: "img",
                   title: pos.nationality,
                   "aria-label": `${posLabel ? posLabel + " \u2014 " : ""}${pos.nationality}${name ? " \u2014 " + name : ""}`,
-                  children: nationalityFlag(pos.nationality)
+                  children: flag
                 }
               ),
               name ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos", children: posLabel })
@@ -5933,22 +6117,32 @@ function GuessTheXiGame({
         ] }),
         !isOver && wrongGuesses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ss-g-gxi-wrong", children: [
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-wrong-l", children: t.notThem }),
-          wrongGuesses.map((g) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ss-g-gxi-wrong-chip", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CrestShield, { name: teamName(g.teamId), size: 18 }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("s", { children: teamName(g.teamId) })
-          ] }, g.teamId))
+          wrongGuesses.map((g) => {
+            const crestUrl = config?.teamPool.find((tm) => tm.teamId === g.teamId)?.crestUrl;
+            return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ss-g-gxi-wrong-chip", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CrestShield, { src: crestUrl, name: teamName(g.teamId), size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("s", { children: teamName(g.teamId) })
+            ] }, g.teamId);
+          })
         ] }),
-        isOver && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-          ResultCard,
-          {
-            tone: solved ? "win" : failed ? "lose" : "neutral",
-            title: solved ? t.solved : failed ? t.failed : ui.games.alreadyPlayedTitle,
-            score: clientState?.score ?? result?.score ?? 0,
-            detail: clientState ? t.detail(clientState.guessesUsed) : void 0,
-            onBack,
-            ui
-          }
-        )
+        isOver && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            ResultCard,
+            {
+              tone: solved ? "win" : failed ? "lose" : "neutral",
+              title: solved ? t.solved : failed ? t.failed : ui.games.alreadyPlayedTitle,
+              score: clientState?.score ?? result?.score ?? 0,
+              detail: clientState ? t.detail(clientState.guessesUsed) : void 0,
+              onBack,
+              ui
+            }
+          ),
+          (solved || failed) && clientState?.answer && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ss-g-gxi-answer", "data-testid": "gxi-answer-reveal", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-answer-label", children: t.theAnswer }),
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CrestShield, { src: clientState.answer.crestUrl, name: clientState.answer.teamName, size: 32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-answer-name", children: clientState.answer.teamName })
+          ] })
+        ] })
       ] }),
       !isOver && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(FooterBar, { children: [
         query.length > 0 && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -5958,7 +6152,7 @@ function GuessTheXiGame({
             options: filtered.map((tm) => ({
               key: tm.teamId,
               content: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CrestShield, { name: tm.teamName, size: 28 }),
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CrestShield, { src: tm.crestUrl, name: tm.teamName, size: 28 }),
                 /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { children: tm.teamName })
               ] })
             })),
@@ -6106,6 +6300,8 @@ function DailyQuizGame({
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "ss-g-dq-stem", children: current.stem }),
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "ss-g-dq-opts", children: current.options.map((opt, optIdx) => {
         const selected = optIdx === selectedIdx;
+        const imagePath = current.optionImagePaths?.[optIdx] ?? void 0;
+        const playerName = opt;
         return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
           "button",
           {
@@ -6115,6 +6311,7 @@ function DailyQuizGame({
             disabled: submitting,
             onClick: () => handleSelect(current.index, optIdx),
             children: [
+              current.optionImagePaths && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PlayerAvatar, { name: playerName, imagePath, className: "ss-g-dq-opt-av" }),
               /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ss-g-dq-badge", "aria-hidden": "true", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(IconCheck, {}) : String.fromCharCode(65 + optIdx) }),
               /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(OptionName, { text: opt })
             ]
@@ -8386,6 +8583,16 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Labels stay on one line: Turkish "DAHA FAZLA" wrapped to two in a ~115px button. */
 .ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
 .ss-g-hl-btns .ss-g-btn svg { flex: none; }
+/* Phone-width cards: the info column is ~230px, too narrow for "DAHA FAZLA" + icon side by side.
+   Drop the icons and tighten the type first; stack the buttons only when even that cannot fit. */
+.ss-g-hl-info { container: hlinfo / inline-size; }
+@container hlinfo (max-width: 280px) {
+  .ss-g-hl-btns .ss-g-btn svg { display: none; }
+  .ss-g-hl-btns .ss-g-btn { font-size: 12px; letter-spacing: 0; padding: 0 4px; }
+}
+@container hlinfo (max-width: 180px) {
+  .ss-g-hl-btns { flex-direction: column; }
+}
 .ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }
 /* Clear the VS badge that straddles the seam between the two cards. */
 .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
@@ -8422,11 +8629,20 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }
 .ss-g-gxi-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-pitch-chip); border: 2px solid var(--ss-g-pitch-ink); font-size: 22px; line-height: 1; }
 .ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }
+.ss-g-gxi-disc[data-code] { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ss-g-pitch-ink); }
 .ss-g-gxi-pos { max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-pitch-chip); color: var(--ss-g-pitch-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }
 .ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .ss-g-gxi-wrong-l { font-size: 12px; color: var(--ss-g-muted); }
 .ss-g-gxi-wrong-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; color: var(--ss-g-muted); }
+/* u407: lineup photo \u2014 fills the 44px disc like the flag does */
+.ss-g-gxi-disc--photo { overflow: hidden; border: 2px solid var(--ss-w-accent); }
+.ss-g-gxi-disc--photo img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-gxi-disc--photo .ss-w-av-initials { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; color: var(--ss-g-pitch-ink); }
+/* u407: answer reveal \u2014 prominent row using theme tokens, works on dark/navy/light surfaces */
+.ss-g-gxi-answer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ss-g-warm); border: 1.5px solid var(--ss-g-line-warm); }
+.ss-g-gxi-answer-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-g-muted); flex: none; }
+.ss-g-gxi-answer-name { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--ss-g-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* ---- Daily Quiz (u393) ---- */
 .ss-g-dq-stem { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
@@ -8451,6 +8667,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-dq-rq-opt--correct { background: var(--ss-g-correct); color: var(--ss-g-on-correct); }
 .ss-g-dq-rq-opt--wrong { background: var(--ss-g-wrong); color: var(--ss-g-on-correct); }
 .ss-g-dq-why { font-size: 13px; color: var(--ss-g-ink-2); }
+/* u407: player avatar in quiz option \u2014 centered in top half, badge at top-left unaffected */
+.ss-g-dq-opt-av { position: absolute; top: 7px; right: 10px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 13px; font-weight: 700; flex: none; }
+.ss-g-dq-opt-av img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-dq-opt-av .ss-w-av-initials { font-size: 11px; }
 
 /* ---- Career Path (u393) ---- */
 .ss-g-cp-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }
@@ -8527,9 +8747,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* While the search sheet is pinned below, the grid shrinks its rows to share the body with it
    instead of pushing the bottom row under the sheet. */
 .ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }
-.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
+.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; overflow: hidden; }
+.ss-g-btg-colhdr[data-meta] { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 11px; letter-spacing: 0; }
 .ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }
-.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
+.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; overflow: hidden; }
+.ss-g-btg-rowhdr[data-meta] { font-size: 10px; font-family: var(--ss-g-font-body); font-weight: 700; letter-spacing: -0.01em; text-transform: none; word-break: normal; overflow-wrap: normal; hyphens: none; line-height: 1.25; padding: 0 2px; }
 .ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
 .ss-g-btg-cell:disabled { cursor: default; }
 .ss-g-btg-cell[data-state="active"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }
@@ -8557,6 +8779,17 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-btg-sheet .ss-g-opts { max-height: 160px; }
 .ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }
+/* u407: cell avatar replaces Silhouette */
+.ss-g-btg-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 12px; font-weight: 700; }
+.ss-g-btg-av img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-btg-av .ss-w-av-initials { font-size: 12px; }
+/* u407: coach photo in row/col header */
+.ss-g-btg-coach-av { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 10px; font-weight: 700; }
+.ss-g-btg-coach-av img { width: 100%; height: 100%; object-fit: cover; }
+/* u407: country flag emoji in header \u2014 sized to match other header icons */
+.ss-g-btg-hdr-flag { font-size: 20px; line-height: 1; flex: none; }
+/* u407: club crest in col/row header */
+.ss-g-btg-colhdr .ss-g-crest, .ss-g-btg-rowhdr .ss-g-crest { width: 28px; height: 28px; flex: none; }
 
 /* \u2500\u2500 Starting XI (u393) \u2500\u2500 */
 .ss-g-xi-pitch { position: relative; flex: none; height: 400px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(180deg, var(--ss-g-pitch) 0 40px, color-mix(in srgb, var(--ss-g-pitch) 88%, var(--ss-g-pitch-mark)) 40px 80px); border: 1px solid var(--ss-g-pitch-line); }