fansunited-frontend-components 0.0.28 → 0.0.29

package/components.js

@@ -33573,6 +33573,12 @@ const ma = rn(/* @__PURE__ */ a.jsx("path", {
       justifyContent: "space-between",
       flexDirection: e.isMobile ? "column-reverse" : "row",
       gap: e.spacingScale.md
+    },
+    // Sign-in wrapper to always position at flex-end
+    signInWrapper: {
+      display: "flex",
+      justifyContent: "flex-end",
+      flex: 1
     }
   };
 }, Zm = ({
@@ -33607,7 +33613,7 @@ const ma = rn(/* @__PURE__ */ a.jsx("path", {
     ] }) }) }) }),
     /* @__PURE__ */ a.jsxs(U, { sx: C.bottomContainer, children: [
       r,
-      i
+      /* @__PURE__ */ a.jsx(U, { sx: C.signInWrapper, children: i })
     ] })
   ] });
 }, g3 = (e) => ({
@@ -75406,6 +75412,12 @@ const f5 = rd(/* @__PURE__ */ a.jsx("path", {
       justifyContent: "space-between",
       flexDirection: e.isMobile ? "column-reverse" : "row",
       gap: e.spacingScale.md
+    },
+    // Sign-in wrapper to always position at flex-end
+    signInWrapper: {
+      display: "flex",
+      justifyContent: "flex-end",
+      flex: 1
     }
   };
 }, lee = ({
@@ -75440,7 +75452,7 @@ const f5 = rd(/* @__PURE__ */ a.jsx("path", {
     ] }) }) }) }),
     /* @__PURE__ */ ye(re, { sx: v.bottomContainer, children: [
       r,
-      i
+      /* @__PURE__ */ Q(re, { sx: v.signInWrapper, children: i })
     ] })
   ] });
 }, see = (e) => ({
@@ -79326,7 +79338,7 @@ const Ate = (e, t) => {
     color: e.textPrimary,
     mb: e.spacingScale.md,
     textAlign: "center",
-    fontSize: "1.25rem"
+    fontSize: "1.25em"
   },
   // Tabs container
   tabsContainer: {
@@ -79352,7 +79364,7 @@ const Ate = (e, t) => {
     borderRadius: e.borderRadius.sm,
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 500,
-    fontSize: { xs: "0.85rem", sm: "0.9rem" },
+    fontSize: { xs: "0.85em", sm: "0.9em" },
     color: e.textColor,
     bgcolor: "transparent",
     border: "1px solid transparent",
@@ -79404,7 +79416,7 @@ const Ate = (e, t) => {
     px: e.spacingScale.xs,
     py: "2px",
     borderRadius: e.borderRadius.xs,
-    fontSize: "0.7rem",
+    fontSize: "0.7em",
     fontWeight: 600,
     fontFamily: e.fontFamilySecondary,
     textTransform: "uppercase",
@@ -79484,7 +79496,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilySecondary,
     color: e.textColor,
     lineHeight: 1.6,
-    fontSize: { xs: "0.95rem", sm: "1rem" },
+    fontSize: { xs: "0.95em", sm: "1em" },
     opacity: 0.9
   },
   // Fallback title
@@ -79492,7 +79504,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
     color: e.textPrimary,
-    fontSize: { xs: "1.1rem", sm: "1.25rem" },
+    fontSize: { xs: "1.1em", sm: "1.25em" },
     textAlign: "center"
   },
   // Fallback percentage
@@ -79500,14 +79512,14 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 600,
     color: e.primaryColor,
-    fontSize: { xs: "1rem", sm: "1.1rem" },
+    fontSize: { xs: "1em", sm: "1.1em" },
     textAlign: "center"
   },
   // Fallback message
   fallbackMessage: {
     fontFamily: e.fontFamilySecondary,
     color: e.textColor,
-    fontSize: { xs: "0.9rem", sm: "0.95rem" },
+    fontSize: { xs: "0.9em", sm: "0.95em" },
     opacity: 0.7,
     textAlign: "center",
     fontStyle: "italic"
@@ -79517,7 +79529,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
     color: e.textPrimary,
-    fontSize: { xs: "1rem", sm: "1.1rem" },
+    fontSize: { xs: "1em", sm: "1.1em" },
     lineHeight: 1.3,
     flex: 1,
     minWidth: 0,
@@ -79527,7 +79539,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 600,
     color: e.primaryColor,
-    fontSize: "0.9rem",
+    fontSize: "0.9em",
     bgcolor: "rgba(255, 255, 255, 0.08)",
     px: e.spacingScale.sm,
     py: e.spacingScale.xs,
@@ -79539,7 +79551,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilySecondary,
     color: e.textColor,
     lineHeight: 1.5,
-    fontSize: { xs: "0.85rem", sm: "0.9rem" },
+    fontSize: { xs: "0.85em", sm: "0.9em" },
     opacity: 0.85,
     mt: e.spacingScale.xs,
     overflow: "hidden"
@@ -79668,7 +79680,7 @@ const Ate = (e, t) => {
     width: { xs: "100%", md: "auto" },
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 500,
-    fontSize: { xs: "0.85rem", sm: "0.9rem" },
+    fontSize: { xs: "0.85em", sm: "0.9em" },
     color: e.textColor,
     bgcolor: "transparent",
     border: "none",
@@ -79720,7 +79732,7 @@ const Ate = (e, t) => {
   },
   // Tab label text
   tabLabel: {
-    fontSize: { xs: "0.8rem", sm: "0.9rem" },
+    fontSize: { xs: "0.8em", sm: "0.9em" },
     fontWeight: "inherit",
     fontFamily: e.fontFamilySecondary,
     color: "inherit",
@@ -79734,7 +79746,7 @@ const Ate = (e, t) => {
     px: e.spacingScale.xs,
     py: e.spacingScale["3xs"],
     borderRadius: e.borderRadius.sm,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     fontFamily: e.fontFamilySecondary,
     minWidth: "auto",
@@ -79813,7 +79825,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilySecondary,
     color: e.textColor,
     lineHeight: 1.6,
-    fontSize: { xs: "0.95rem", sm: "1rem" },
+    fontSize: { xs: "0.95em", sm: "1em" },
     opacity: 0.9
   },
   // Fallback title
@@ -79821,7 +79833,7 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
     color: e.textPrimary,
-    fontSize: { xs: "1.1rem", sm: "1.25rem" },
+    fontSize: { xs: "1.1em", sm: "1.25em" },
     textAlign: "center"
   },
   // Fallback percentage
@@ -79829,14 +79841,14 @@ const Ate = (e, t) => {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 600,
     color: e.primaryColor,
-    fontSize: { xs: "1rem", sm: "1.1rem" },
+    fontSize: { xs: "1em", sm: "1.1em" },
     textAlign: "center"
   },
   // Fallback message
   fallbackMessage: {
     fontFamily: e.fontFamilySecondary,
     color: e.textColor,
-    fontSize: { xs: "0.9rem", sm: "0.95rem" },
+    fontSize: { xs: "0.9em", sm: "0.95em" },
     opacity: 0.7,
     textAlign: "center",
     fontStyle: "italic"
@@ -79919,7 +79931,7 @@ const Ate = (e, t) => {
                       fontFamily: l.secondary,
                       color: A,
                       lineHeight: 1.6,
-                      fontSize: "0.95rem",
+                      fontSize: "0.95em",
                       opacity: 0.9
                     },
                     dangerouslySetInnerHTML: {
@@ -79934,7 +79946,7 @@ const Ate = (e, t) => {
                     fontFamily: l.secondary,
                     color: A,
                     lineHeight: 1.6,
-                    fontSize: "0.95rem",
+                    fontSize: "0.95em",
                     opacity: 0.9
                   },
                   dangerouslySetInnerHTML: {
@@ -80471,7 +80483,7 @@ const Ate = (e, t) => {
     flex: "none",
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 500,
-    fontSize: "0.9rem",
+    fontSize: "0.9em",
     color: e.textColor,
     bgcolor: "transparent",
     border: "none",
@@ -80530,7 +80542,7 @@ const Ate = (e, t) => {
   },
   // Tab label text
   tabLabel: {
-    fontSize: e.isMobile ? "0.8rem" : "0.9rem",
+    fontSize: e.isMobile ? "0.8em" : "0.9em",
     fontWeight: "inherit",
     fontFamily: e.fontFamilySecondary,
     color: "inherit",
@@ -80544,7 +80556,7 @@ const Ate = (e, t) => {
     px: e.spacingScale.xs,
     py: e.spacingScale["3xs"],
     borderRadius: e.borderRadius.sm,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     fontFamily: e.fontFamilySecondary,
     minWidth: "auto",
@@ -81366,7 +81378,7 @@ const Ate = (e, t) => {
     width: e.isMobile ? "100%" : "auto",
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 500,
-    fontSize: { xs: "0.85rem", sm: "0.9rem" },
+    fontSize: { xs: "0.85em", sm: "0.9em" },
     color: e.textColor,
     bgcolor: "transparent !important",
     background: "transparent !important",
@@ -81427,7 +81439,7 @@ const Ate = (e, t) => {
   },
   // Tab label text
   tabLabel: {
-    fontSize: { xs: "0.8rem", sm: "0.9rem" },
+    fontSize: { xs: "0.8em", sm: "0.9em" },
     fontWeight: "inherit",
     fontFamily: e.fontFamilySecondary,
     color: "inherit",
@@ -81441,7 +81453,7 @@ const Ate = (e, t) => {
     px: e.spacingScale.xs,
     py: e.spacingScale["3xs"],
     borderRadius: e.borderRadius.sm,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     fontFamily: e.fontFamilySecondary,
     minWidth: "auto",
@@ -82930,7 +82942,7 @@ const Gte = (e) => {
   },
   liveText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     color: e.dangerColor || "#d32f2f",
     fontWeight: 600,
     textTransform: "uppercase",
@@ -82948,7 +82960,7 @@ const Gte = (e) => {
     display: "flex",
     alignItems: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     borderRadius: e.mdBorderRadius,
     border: `1px solid ${e.textColor || e.darkTextColor}20`,
@@ -82964,7 +82976,7 @@ const Gte = (e) => {
   },
   matchResultScoreText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: e.textColor || e.darkTextColor,
     lineHeight: 1
@@ -83029,7 +83041,7 @@ const Gte = (e) => {
   },
   text: {
     fontFamily: "inherit",
-    fontSize: e.isMobile ? "0.625rem" : "0.75rem",
+    fontSize: e.isMobile ? "0.625em" : "0.75em",
     fontWeight: 600,
     textAlign: "center"
   },
@@ -83130,7 +83142,7 @@ const Gte = (e) => {
     teamName: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.75rem" : "0.875rem",
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
       fontWeight: 600,
       textAlign: "center",
       maxWidth: "120px",
@@ -83140,7 +83152,7 @@ const Gte = (e) => {
     teamNameInline: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: "0.75rem",
+      fontSize: "0.75em",
       fontWeight: 600,
       textAlign: "left",
       overflow: "hidden"
@@ -83161,7 +83173,7 @@ const Gte = (e) => {
     teamLogoText: {
       fontFamily: e.fontFamilySecondary,
       color: e.textSecondary,
-      fontSize: e.isMobile ? "0.625rem" : "0.75rem",
+      fontSize: e.isMobile ? "0.625em" : "0.75em",
       fontWeight: 600,
       textAlign: "center"
     },
@@ -83192,7 +83204,7 @@ const Gte = (e) => {
     scoreDisplay: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: e.isMobile ? "1.25rem" : "1.5rem",
+      fontSize: e.isMobile ? "1.25em" : "1.5em",
       color: e.textPrimary,
       minWidth: e.isMobile ? "1.5rem" : "1.75rem",
       // Much more compact display
@@ -83204,7 +83216,7 @@ const Gte = (e) => {
     separator: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 400,
-      fontSize: e.isMobile ? "1.25rem" : "1.5rem",
+      fontSize: e.isMobile ? "1.25em" : "1.5em",
       color: e.textSecondary
     },
     // Central score container with home score, separator, away score
@@ -83424,7 +83436,7 @@ const roe = (e) => {
     fontFamily: e.fontFamilySecondary,
     color: e.textPrimary,
     // Keep desktop font size for split variant, only use smaller on extra small
-    fontSize: e.isExtraSmall ? "0.75rem" : "0.875rem",
+    fontSize: e.isExtraSmall ? "0.75em" : "0.875em",
     fontWeight: 600,
     textAlign: "left",
     overflow: "hidden"
@@ -83445,7 +83457,7 @@ const roe = (e) => {
     fontFamily: e.fontFamilySecondary,
     color: e.textSecondary,
     // Keep desktop font size for split variant, only use smaller on extra small
-    fontSize: e.isExtraSmall ? "0.625rem" : "0.75rem",
+    fontSize: e.isExtraSmall ? "0.625em" : "0.75em",
     fontWeight: 600,
     textAlign: "center"
   },
@@ -83470,7 +83482,7 @@ const roe = (e) => {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
     // Keep desktop font size for split variant, only use smaller on extra small
-    fontSize: e.isExtraSmall ? "1.5rem" : "2rem",
+    fontSize: e.isExtraSmall ? "1.5em" : "2em",
     color: e.textPrimary,
     minWidth: e.isExtraSmall ? "2.5rem" : "3rem",
     textAlign: "center",
@@ -83574,7 +83586,7 @@ const loe = (e) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center",
@@ -83608,14 +83620,14 @@ const loe = (e) => {
   pointsText: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 700,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     lineHeight: 1,
     color: e.textPrimary
   },
   ptsLabel: {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 500,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     lineHeight: 1,
     color: e.textSecondary,
     opacity: 0.9
@@ -83636,19 +83648,19 @@ const loe = (e) => {
   tooltipText: {
     fontFamily: e.fontFamilySecondary,
     color: e.textPrimary,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     lineHeight: 1.3
   },
   tooltipSubtext: {
     fontFamily: e.fontFamilySecondary,
     color: e.textSecondary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     lineHeight: 1.3
   },
   tooltipAlternative: {
     fontFamily: e.fontFamilySecondary,
     color: e.textPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     lineHeight: 1.3,
     paddingLeft: e.spacingScale.xs
   },
@@ -83674,7 +83686,7 @@ const loe = (e) => {
     }
   },
   mobileIcon: {
-    fontSize: "1rem",
+    fontSize: "1em",
     color: e.textPrimary
   }
 }), ad = (e) => {
@@ -83904,7 +83916,7 @@ const loe = (e) => {
     drawIconText: {
       fontFamily: e.fontFamilyPrimary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "1.25rem" : "1.5rem",
+      fontSize: e.isMobile ? "1.25em" : "1.5em",
       fontWeight: 600
     },
     selectedDrawIconText: {
@@ -83913,14 +83925,14 @@ const loe = (e) => {
     teamName: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.75rem" : "0.875rem",
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
       fontWeight: 600,
       textAlign: "center"
     },
     drawLabel: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.75rem" : "0.875rem",
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
       fontWeight: 600,
       textAlign: "center"
     }
@@ -83982,7 +83994,7 @@ const loe = (e) => {
   teamLogoText: {
     fontFamily: e.fontFamilySecondary,
     color: e.textSecondary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     textAlign: "center"
   },
@@ -83990,7 +84002,7 @@ const loe = (e) => {
   optionLabel: {
     fontFamily: e.fontFamilySecondary,
     color: e.textPrimary,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     fontWeight: 600,
     flex: 1
   },
@@ -84216,7 +84228,7 @@ const goe = (e) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.ixExtraSmall ? "left" : "center"
@@ -84295,7 +84307,7 @@ const goe = (e) => {
   cornersDisplay: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
-    fontSize: e.isMobile ? "1.5rem" : "2rem",
+    fontSize: e.isMobile ? "1.5em" : "2em",
     color: e.textPrimary,
     minWidth: e.isMobile ? "2.5rem" : "3rem",
     textAlign: "center",
@@ -84363,7 +84375,7 @@ const goe = (e) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center"
@@ -84446,7 +84458,7 @@ const goe = (e) => {
     optionLabel: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.875rem" : "1rem",
+      fontSize: e.isMobile ? "0.875em" : "1em",
       fontWeight: 600,
       textAlign: "center"
     }
@@ -84556,7 +84568,7 @@ const goe = (e) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center"
@@ -84680,7 +84692,7 @@ const goe = (e) => {
     teamName: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.75rem" : "0.875rem",
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
       fontWeight: 600,
       textAlign: "center"
     },
@@ -84702,7 +84714,7 @@ const goe = (e) => {
       userSelect: "none",
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: e.isMobile ? "0.75rem" : "0.875rem",
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
       color: e.textSecondary,
       backgroundColor: "transparent",
       minWidth: e.isMobile ? "auto" : "120px",
@@ -84751,7 +84763,7 @@ const goe = (e) => {
       width: e.isExtraSmall ? "50%" : "25%",
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: e.isMobile ? "0.75rem" : "0.875rem",
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
       color: e.textSecondary,
       bgcolor: "transparent",
       border: "none",
@@ -84845,7 +84857,7 @@ const goe = (e) => {
     playerAvatarText: {
       fontFamily: e.fontFamilySecondary,
       color: e.textSecondary,
-      fontSize: e.isMobile ? "0.625rem" : "0.75rem",
+      fontSize: e.isMobile ? "0.625em" : "0.75em",
       fontWeight: 600,
       textAlign: "center",
       lineHeight: 1
@@ -84855,7 +84867,7 @@ const goe = (e) => {
     },
     playerAvatarIcon: {
       color: e.textSecondary,
-      fontSize: e.isMobile ? "1.25rem" : "1.5rem"
+      fontSize: e.isMobile ? "1.25em" : "1.5em"
     },
     selectedPlayerAvatarIcon: {
       color: e.onPrimary
@@ -84863,7 +84875,7 @@ const goe = (e) => {
     playerName: {
       fontFamily: e.fontFamilySecondary,
       color: e.textSecondary,
-      fontSize: e.isMobile ? "0.625rem" : "0.75rem",
+      fontSize: e.isMobile ? "0.625em" : "0.75em",
       fontWeight: 500,
       textAlign: "center",
       lineHeight: 1.2,
@@ -84902,7 +84914,7 @@ const goe = (e) => {
     checkboxLabel: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.875rem" : "1rem",
+      fontSize: e.isMobile ? "0.875em" : "1em",
       fontWeight: 500
     }
   };
@@ -85113,7 +85125,7 @@ const voe = (e) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center"
@@ -85357,7 +85369,7 @@ const voe = (e) => {
     participationText: {
       fontFamily: i.primary,
       fontWeight: 500,
-      fontSize: s ? "1.125rem" : "1.25rem",
+      fontSize: s ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: o.textPrimary,
       textAlign: "center"
@@ -85372,29 +85384,29 @@ const voe = (e) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "0.25rem",
+      gap: r["2xs"],
       bgcolor: o.palette.neutral.softBg,
       borderRadius: n.sm,
-      minWidth: s ? "2.5rem" : "3rem",
-      px: s ? "0.25rem" : "0.5rem",
-      py: s ? "0.125rem" : "0.25rem"
+      minWidth: s ? r["2xl"] : r["3xl"],
+      px: s ? r["2xs"] : r.xs,
+      py: s ? r["3xs"] : r["2xs"]
     },
     timeValue: {
       fontFamily: i.primary,
       fontWeight: 500,
-      fontSize: s ? "1rem" : "1.5rem",
+      fontSize: s ? "1em" : "1.5em",
       color: o.textPrimary
     },
     timeLabel: {
       fontFamily: i.secondary,
       fontWeight: 400,
-      fontSize: s ? "0.625rem" : "0.75rem",
+      fontSize: s ? "0.625em" : "0.75em",
       color: o.textSecondary
     },
     separator: {
       fontFamily: i.primary,
       fontWeight: 400,
-      fontSize: s ? "1rem" : "1.25rem",
+      fontSize: s ? "1em" : "1.25em",
       color: o.textSecondary,
       display: "flex",
       alignItems: "center",
@@ -85441,8 +85453,8 @@ const voe = (e) => {
   title: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
-    fontSize: "1rem",
-    lineHeight: "1.25rem",
+    fontSize: "1em",
+    lineHeight: "1.25em",
     color: e.textPrimary,
     textAlign: "center",
     marginBottom: e.spacingScale.sm
@@ -85470,8 +85482,8 @@ const voe = (e) => {
   questionText: {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 400,
-    fontSize: "1rem",
-    lineHeight: "1rem",
+    fontSize: "1em",
+    lineHeight: "1em",
     color: e.textSecondary,
     marginBottom: "2px"
   },
@@ -85496,7 +85508,7 @@ const voe = (e) => {
   selectionText: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 500,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     color: e.textPrimary
   },
   playerAvatar: {
@@ -85510,17 +85522,17 @@ const voe = (e) => {
     justifyContent: "center",
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
-    fontSize: "0.625rem",
+    fontSize: "0.625em",
     flexShrink: 0,
     overflow: "hidden"
   },
   playerAvatarIcon: {
     color: e.textSecondary,
-    fontSize: "0.75rem"
+    fontSize: "0.75em"
   },
   editButton: {
     padding: "2px 6px",
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 500,
     color: e.primaryColor,
     backgroundColor: "transparent",
@@ -85542,7 +85554,7 @@ const voe = (e) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: "white",
     flexShrink: 0
@@ -85559,7 +85571,7 @@ const voe = (e) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     color: e.primaryColor,
     flexShrink: 0
   },
@@ -85574,6 +85586,7 @@ const voe = (e) => {
     "--TableCell-paddingX": "0.5rem",
     "--TableCell-paddingY": "0.375rem",
     cursor: "default",
+    fontSize: "1em",
     "& > tbody > tr:hover": {
       backgroundColor: "transparent"
     },
@@ -85582,7 +85595,6 @@ const voe = (e) => {
       verticalAlign: "middle",
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: "0.75rem",
       color: e.textPrimary
     },
     "& > tbody > tr > td": {
@@ -85620,7 +85632,7 @@ const voe = (e) => {
     display: "flex",
     alignItems: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "1em",
     padding: "2px 6px",
     minHeight: "20px",
     borderRadius: e.borderRadius.sm,
@@ -85628,14 +85640,6 @@ const voe = (e) => {
     backgroundColor: e.neutralSoftBg,
     width: "fit-content"
   },
-  predictionChip: {
-    display: "flex",
-    alignItems: "center",
-    gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
-    padding: "2px 6px",
-    minHeight: "20px"
-  },
   editIconButton: {
     padding: "4px",
     minHeight: "24px",
@@ -85650,7 +85654,7 @@ const voe = (e) => {
       backgroundColor: `${e.textPrimary}15`
     },
     "& svg": {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: e.textPrimary
     }
   }
@@ -85678,7 +85682,7 @@ const voe = (e) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.25rem" : "1.5rem",
+      fontSize: t ? "1.25em" : "1.5em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: "center",
@@ -85687,7 +85691,7 @@ const voe = (e) => {
     questionText: {
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: t ? "1rem" : "1.125rem",
+      fontSize: t ? "1em" : "1.125em",
       lineHeight: 1.3,
       color: e.textSecondary,
       textAlign: "center",
@@ -85701,7 +85705,7 @@ const voe = (e) => {
     cancelButton: {
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: "0.875rem",
+      fontSize: "0.875em",
       borderRadius: e.borderRadius.sm,
       padding: `${e.spacingScale.sm} ${e.spacingScale.md}`,
       minWidth: t ? "100px" : "120px",
@@ -85715,7 +85719,7 @@ const voe = (e) => {
     saveButton: {
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: "0.875rem",
+      fontSize: "0.875em",
       borderRadius: e.borderRadius.sm,
       padding: `${e.spacingScale.sm} ${e.spacingScale.md}`,
       minWidth: t ? "100px" : "120px",
@@ -85751,7 +85755,7 @@ const voe = (e) => {
         transform: "scale(1.05)"
       },
       "& svg": {
-        fontSize: "1.25rem"
+        fontSize: "1.25em"
       }
     }
   };
@@ -86938,7 +86942,7 @@ const voe = (e) => {
     },
     liveText: {
       fontFamily: e.fontFamilySecondary,
-      fontSize: "0.875rem",
+      fontSize: "0.875em",
       color: e.dangerColor,
       fontWeight: 600,
       textTransform: "uppercase",
@@ -86956,7 +86960,7 @@ const voe = (e) => {
       display: "flex",
       alignItems: "center",
       gap: e.spacingScale.xs,
-      fontSize: "0.75rem",
+      fontSize: "0.75em",
       padding: "2px 6px",
       minHeight: "20px",
       borderRadius: e.borderRadius.sm,
@@ -86973,7 +86977,7 @@ const voe = (e) => {
     },
     matchResultScoreText: {
       fontFamily: e.fontFamilyPrimary,
-      fontSize: "0.75rem",
+      fontSize: "0.75em",
       fontWeight: 600,
       color: e.textColor,
       lineHeight: 1
@@ -87583,7 +87587,7 @@ const voe = (e) => {
     alignItems: "center",
     alignSelf: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     minHeight: "20px",
     borderRadius: e.borderRadius.sm,
@@ -87600,7 +87604,7 @@ const voe = (e) => {
   },
   matchResultScoreText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: e.textColor,
     lineHeight: 1
@@ -88950,7 +88954,7 @@ const voe = (e) => {
       alignItems: "center",
       alignSelf: "center",
       gap: e.spacingScale.xs,
-      fontSize: "0.75rem",
+      fontSize: "0.75em",
       padding: "2px 6px",
       minHeight: "20px",
       borderRadius: e.borderRadius.sm,
@@ -88967,7 +88971,7 @@ const voe = (e) => {
     },
     matchResultScoreText: {
       fontFamily: e.fontFamilyPrimary,
-      fontSize: "0.75rem",
+      fontSize: "0.75em",
       fontWeight: 600,
       color: e.textColor,
       lineHeight: 1
@@ -88993,18 +88997,18 @@ const voe = (e) => {
   }, I = {
     fontFamily: r.primary,
     fontWeight: 700,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     lineHeight: 1,
     color: y
   }, b = {
     fontFamily: r.primary,
     fontWeight: 500,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     color: n.textSecondary
   }, R = {
     fontFamily: r.primary,
     fontWeight: 500,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     color: n.textSecondary
   };
   return /* @__PURE__ */ a.jsxs(U, { sx: v, children: [
@@ -89016,7 +89020,7 @@ const voe = (e) => {
       {
         sx: {
           ...R,
-          fontSize: "0.625rem"
+          fontSize: "0.625em"
         },
         children: o("matchQuiz.points.pts")
       }
@@ -89123,7 +89127,7 @@ const voe = (e) => {
         display: "flex",
         alignItems: "center",
         gap: h.xs,
-        fontSize: "0.75rem",
+        fontSize: "1em",
         padding: "2px 6px",
         minHeight: "20px",
         borderRadius: m,
@@ -89147,13 +89151,13 @@ const voe = (e) => {
         justifyContent: "center",
         fontFamily: v,
         fontWeight: 600,
-        fontSize: "0.625rem",
+        fontSize: "0.625em",
         flexShrink: 0,
         overflow: "hidden"
       }, me = {
         fontFamily: v,
         fontWeight: 500,
-        fontSize: f ? "0.75rem" : "0.875rem",
+        fontSize: f ? "0.75em" : "0.875em",
         color: y
       };
       if (V === Ae.CORRECT_SCORE || V === Ae.CORRECT_SCORE_HT || V === Ae.CORRECT_SCORE_ADVANCED) {
@@ -89234,7 +89238,7 @@ const voe = (e) => {
           ) : /* @__PURE__ */ a.jsx(
             Lu,
             {
-              sx: { fontSize: "0.75rem", color: C }
+              sx: { fontSize: "0.75em", color: C }
             }
           ) }),
           /* @__PURE__ */ a.jsx(H, { sx: me, children: Re })
@@ -89255,7 +89259,7 @@ const voe = (e) => {
         display: "flex",
         alignItems: "center",
         gap: h.xs,
-        fontSize: "0.75rem",
+        fontSize: "0.875em",
         padding: "2px 6px",
         minHeight: "20px",
         borderRadius: m,
@@ -89279,13 +89283,13 @@ const voe = (e) => {
         justifyContent: "center",
         fontFamily: v,
         fontWeight: 600,
-        fontSize: "0.625rem",
+        fontSize: "0.625em",
         flexShrink: 0,
         overflow: "hidden"
       }, xe = {
         fontFamily: v,
         fontWeight: 500,
-        fontSize: f ? "0.75rem" : "0.875rem",
+        fontSize: f ? "0.75em" : "0.875em",
         color: y
       };
       if (J === Ae.CORRECT_SCORE || J === Ae.CORRECT_SCORE_HT || J === Ae.CORRECT_SCORE_ADVANCED) {
@@ -89371,7 +89375,7 @@ const voe = (e) => {
             ) : /* @__PURE__ */ a.jsx(
               Lu,
               {
-                sx: { fontSize: "0.75rem", color: C }
+                sx: { fontSize: "0.75em", color: C }
               }
             ) }),
             /* @__PURE__ */ a.jsx(H, { sx: xe, children: qe.map((je) => je == null ? void 0 : je.name).join(", ") })
@@ -89823,7 +89827,7 @@ const voe = (e) => {
                                 sx: {
                                   color: y,
                                   fontFamily: v,
-                                  fontSize: "1.25rem",
+                                  fontSize: "1.25em",
                                   fontWeight: 600,
                                   lineHeight: "1.2"
                                 },
@@ -89836,7 +89840,7 @@ const voe = (e) => {
                                 sx: {
                                   color: C,
                                   fontFamily: I,
-                                  fontSize: "1rem",
+                                  fontSize: "1em",
                                   fontWeight: 400,
                                   lineHeight: "1.4"
                                 },
@@ -90057,7 +90061,7 @@ const voe = (e) => {
       color: u
     },
     avatarIcon: {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: v
     },
     noLeaderboardText: {
@@ -91134,6 +91138,7 @@ const Woe = Gg("ChevronsRight", [
       "--TableCell-paddingX": "0.5rem",
       "--TableCell-paddingY": "0.375rem",
       cursor: "default",
+      fontSize: "1em",
       "& > tbody > tr:hover": {
         backgroundColor: "transparent"
       },
@@ -91142,7 +91147,6 @@ const Woe = Gg("ChevronsRight", [
         verticalAlign: "middle",
         fontFamily: e.fontFamilyPrimary,
         fontWeight: 600,
-        fontSize: "0.75rem",
         color: e.textPrimary
       },
       "& > tbody > tr > td": {
@@ -91207,7 +91211,7 @@ const Woe = Gg("ChevronsRight", [
       whiteSpace: "nowrap"
     },
     avatarIcon: {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: e.onPrimaryColor
     },
     // Pagination styles
@@ -92848,6 +92852,7 @@ const Woe = Gg("ChevronsRight", [
       "--TableCell-paddingX": "0.5rem",
       "--TableCell-paddingY": "0.375rem",
       cursor: "default",
+      fontSize: "0.75em",
       "& > tbody > tr:hover": {
         backgroundColor: "transparent"
       },
@@ -92856,7 +92861,6 @@ const Woe = Gg("ChevronsRight", [
         verticalAlign: "middle",
         fontFamily: e.fontFamilyPrimary,
         fontWeight: 600,
-        fontSize: "0.75rem",
         color: e.textPrimary
       },
       "& > tbody > tr > td": {
@@ -92921,7 +92925,7 @@ const Woe = Gg("ChevronsRight", [
       whiteSpace: "nowrap"
     },
     avatarIcon: {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: e.onPrimaryColor
     },
     // Pagination styles
@@ -93945,7 +93949,7 @@ const dne = (e, t) => {
   },
   liveText: {
     fontFamily: e.fontFamilySecondary,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     color: e.dangerColor,
     fontWeight: 600,
     textTransform: "uppercase",
@@ -93963,7 +93967,7 @@ const dne = (e, t) => {
     display: "flex",
     alignItems: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     minHeight: "20px",
     borderRadius: e.borderRadius.sm,
@@ -93980,7 +93984,7 @@ const dne = (e, t) => {
   },
   matchResultScoreText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: e.textColor,
     lineHeight: 1
@@ -94016,7 +94020,7 @@ const dne = (e, t) => {
   numberDisplay: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
-    fontSize: e.isMobile ? "1.5rem" : "2rem",
+    fontSize: e.isMobile ? "1.5em" : "2em",
     color: e.textPrimary,
     minWidth: e.isMobile ? "3.5rem" : "4.5rem",
     maxWidth: e.isMobile ? "5rem" : "6rem",
@@ -94094,7 +94098,7 @@ const dne = (e, t) => {
               textAlign: "center",
               fontFamily: n.primary,
               fontWeight: 600,
-              fontSize: r ? "1.5rem" : "2rem"
+              fontSize: r ? "0.75em" : "1em"
             }
           }
         }
@@ -94123,14 +94127,14 @@ const dne = (e, t) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center"
     },
     description: {
       fontFamily: e.fontFamilySecondary,
-      fontSize: t ? "0.875rem" : "0.9375rem",
+      fontSize: t ? "0.875em" : "0.9375em",
       color: e.textSecondary,
       textAlign: "center",
       mt: e.spacingScale.xs,
@@ -94162,14 +94166,14 @@ const dne = (e, t) => {
   pointsText: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 700,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     lineHeight: 1,
     color: e.textPrimary
   },
   ptsLabel: {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 500,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     lineHeight: 1,
     color: e.textSecondary,
     opacity: 0.9
@@ -94190,19 +94194,19 @@ const dne = (e, t) => {
   tooltipText: {
     fontFamily: e.fontFamilySecondary,
     color: e.textPrimary,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     lineHeight: 1.3
   },
   tooltipSubtext: {
     fontFamily: e.fontFamilySecondary,
     color: e.textSecondary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     lineHeight: 1.3
   },
   tooltipAlternative: {
     fontFamily: e.fontFamilySecondary,
     color: e.textPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     lineHeight: 1.3,
     paddingLeft: e.spacingScale.xs
   },
@@ -94228,7 +94232,7 @@ const dne = (e, t) => {
     }
   },
   mobileIcon: {
-    fontSize: "1rem",
+    fontSize: "1em",
     color: e.textPrimary
   }
 }), ld = dr({
@@ -94375,7 +94379,7 @@ const dne = (e, t) => {
   },
   text: {
     fontFamily: "inherit",
-    fontSize: e.isMobile ? "0.625rem" : "0.75rem",
+    fontSize: e.isMobile ? "0.625em" : "0.75em",
     fontWeight: 600,
     textAlign: "center"
   },
@@ -94438,7 +94442,7 @@ const dne = (e, t) => {
     optionLabel: {
       fontFamily: e.fontFamilySecondary,
       color: e.textPrimary,
-      fontSize: e.isMobile ? "0.875rem" : "1rem",
+      fontSize: e.isMobile ? "0.875em" : "1em",
       fontWeight: 600,
       textAlign: "center"
     }
@@ -94548,7 +94552,7 @@ const dne = (e, t) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center"
@@ -94611,7 +94615,7 @@ const dne = (e, t) => {
   },
   textInput: {
     fontFamily: e.fontFamilySecondary,
-    fontSize: e.isMobile ? "0.875rem" : "1rem",
+    fontSize: e.isMobile ? "0.875em" : "1em",
     lineHeight: "1.5",
     color: `${e.textPrimary} !important`,
     backgroundColor: `${e.neutralSoftBg} !important`,
@@ -94632,7 +94636,7 @@ const dne = (e, t) => {
   },
   select: {
     fontFamily: e.fontFamilySecondary,
-    fontSize: e.isMobile ? "0.875rem" : "1rem",
+    fontSize: e.isMobile ? "0.875em" : "1em",
     color: `${e.textPrimary} !important`,
     backgroundColor: `${e.neutralSoftBg} !important`,
     borderColor: `${e.neutralOutlinedBorder} !important`,
@@ -94646,7 +94650,7 @@ const dne = (e, t) => {
   },
   option: {
     fontFamily: e.fontFamilySecondary,
-    fontSize: e.isMobile ? "0.875rem" : "1rem",
+    fontSize: e.isMobile ? "0.875em" : "1em",
     color: `${e.textPrimary} !important`,
     bgcolor: "transparent",
     "&:hover": {
@@ -94683,7 +94687,7 @@ const dne = (e, t) => {
     bgcolor: f.background.surface,
     borderColor: f.neutral.outlinedBorder,
     color: f.neutral.outlinedColor,
-    fontSize: l ? "0.875rem" : "1rem",
+    fontSize: l ? "0.875em" : "1em",
     lineHeight: "1.5",
     "&:hover": {
       bgcolor: f.neutral.outlinedHoverBg
@@ -94735,7 +94739,7 @@ const dne = (e, t) => {
     }
   }, C = {
     fontFamily: i.secondary,
-    fontSize: l ? "0.875rem" : "1rem",
+    fontSize: l ? "0.875em" : "1em",
     color: `${f.neutral.outlinedColor} !important`,
     bgcolor: `${f.background.popup} !important`,
     "&:hover": {
@@ -95003,7 +95007,7 @@ const dne = (e, t) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.125rem" : "1.25rem",
+      fontSize: t ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: e.isExtraSmall ? "left" : "center"
@@ -95231,7 +95235,7 @@ const dne = (e, t) => {
     participationText: {
       fontFamily: i.primary,
       fontWeight: 500,
-      fontSize: s ? "1.125rem" : "1.25rem",
+      fontSize: s ? "1.125em" : "1.25em",
       lineHeight: 1.2,
       color: o.textPrimary,
       textAlign: "center"
@@ -95246,29 +95250,29 @@ const dne = (e, t) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "0.25rem",
+      gap: r["2xs"],
       bgcolor: o.palette.neutral.softBg,
       borderRadius: n.sm,
-      minWidth: s ? "2.5rem" : "3rem",
-      px: s ? "0.25rem" : "0.5rem",
-      py: s ? "0.125rem" : "0.25rem"
+      minWidth: s ? r["2xl"] : r["3xl"],
+      px: s ? r["2xs"] : r.xs,
+      py: s ? r["3xs"] : r["2xs"]
     },
     timeValue: {
       fontFamily: i.primary,
       fontWeight: 500,
-      fontSize: s ? "1rem" : "1.5rem",
+      fontSize: s ? "1em" : "1.5em",
       color: o.textPrimary
     },
     timeLabel: {
       fontFamily: i.secondary,
       fontWeight: 400,
-      fontSize: s ? "0.625rem" : "0.75rem",
+      fontSize: s ? "0.625em" : "0.75em",
       color: o.textSecondary
     },
     separator: {
       fontFamily: i.primary,
       fontWeight: 400,
-      fontSize: s ? "1rem" : "1.25rem",
+      fontSize: s ? "1em" : "1.25em",
       color: o.textSecondary,
       display: "flex",
       alignItems: "center",
@@ -95315,8 +95319,8 @@ const dne = (e, t) => {
   title: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 600,
-    fontSize: "1rem",
-    lineHeight: "1.25rem",
+    fontSize: "1em",
+    lineHeight: "1.25em",
     color: e.textPrimary,
     textAlign: "center",
     marginBottom: e.spacingScale.sm
@@ -95344,8 +95348,8 @@ const dne = (e, t) => {
   questionText: {
     fontFamily: e.fontFamilySecondary,
     fontWeight: 400,
-    fontSize: "1rem",
-    lineHeight: "1rem",
+    fontSize: "1em",
+    lineHeight: "1em",
     color: e.textSecondary,
     marginBottom: "2px"
   },
@@ -95370,31 +95374,11 @@ const dne = (e, t) => {
   selectionText: {
     fontFamily: e.fontFamilyPrimary,
     fontWeight: 500,
-    fontSize: "0.875rem",
     color: e.textPrimary
   },
-  playerAvatar: {
-    width: "20px",
-    height: "20px",
-    borderRadius: "50%",
-    backgroundColor: e.neutralSoftBg,
-    color: "#FFFFFF",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontFamily: e.fontFamilyPrimary,
-    fontWeight: 600,
-    fontSize: "0.625rem",
-    flexShrink: 0,
-    overflow: "hidden"
-  },
-  playerAvatarIcon: {
-    color: e.textSecondary,
-    fontSize: "0.75rem"
-  },
   editButton: {
     padding: "2px 6px",
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 500,
     color: e.primaryColor,
     backgroundColor: "transparent",
@@ -95409,34 +95393,6 @@ const dne = (e, t) => {
       backgroundColor: `${e.primaryColor}10`
     }
   },
-  yesNoIcon: {
-    width: "20px",
-    height: "20px",
-    borderRadius: "50%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "0.75rem",
-    fontWeight: 600,
-    color: "white",
-    flexShrink: 0
-  },
-  yesIcon: {
-    backgroundColor: "#4CAF50"
-  },
-  noIcon: {
-    backgroundColor: "#F44336"
-  },
-  cornersIcon: {
-    width: "20px",
-    height: "20px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "0.75rem",
-    color: e.primaryColor,
-    flexShrink: 0
-  },
   // Table styles
   tableContainer: {
     overflowX: "auto",
@@ -95445,9 +95401,10 @@ const dne = (e, t) => {
   },
   table: {
     backgroundColor: e.surfaceVariant,
-    "--TableCell-paddingX": "0.5rem",
-    "--TableCell-paddingY": "0.375rem",
+    "--TableCell-paddingX": "0.5em",
+    "--TableCell-paddingY": "0.375em",
     cursor: "default",
+    fontSize: "1em",
     "& > tbody > tr:hover": {
       backgroundColor: "transparent"
     },
@@ -95456,7 +95413,6 @@ const dne = (e, t) => {
       verticalAlign: "middle",
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: "0.75rem",
       color: e.textPrimary
     },
     "& > tbody > tr > td": {
@@ -95469,11 +95425,12 @@ const dne = (e, t) => {
   },
   headerCell: {
     textAlign: "left",
-    padding: "0.375rem 0.5rem"
+    padding: "0.375em 0.5em",
+    fontSize: "0.75em"
   },
   headerCellAction: {
     textAlign: "center",
-    padding: "0.375rem 0.5rem",
+    padding: "0.375em 0.5em",
     width: "30px"
   },
   predictionCell: {
@@ -95494,7 +95451,7 @@ const dne = (e, t) => {
     display: "flex",
     alignItems: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     minHeight: "20px",
     borderRadius: e.borderRadius.sm,
@@ -95506,7 +95463,7 @@ const dne = (e, t) => {
     display: "flex",
     alignItems: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     minHeight: "20px"
   },
@@ -95524,7 +95481,7 @@ const dne = (e, t) => {
       backgroundColor: `${e.textPrimary}15`
     },
     "& svg": {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: e.textPrimary
     }
   }
@@ -95549,7 +95506,7 @@ const dne = (e, t) => {
     title: {
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: t ? "1.25rem" : "1.5rem",
+      fontSize: t ? "1.25em" : "1.5em",
       lineHeight: 1.2,
       color: e.textPrimary,
       textAlign: "center",
@@ -95558,7 +95515,7 @@ const dne = (e, t) => {
     questionText: {
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: t ? "1rem" : "1.125rem",
+      fontSize: t ? "1em" : "1.125em",
       lineHeight: 1.3,
       color: e.textSecondary,
       textAlign: "center",
@@ -95572,7 +95529,7 @@ const dne = (e, t) => {
     cancelButton: {
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: "0.875rem",
+      fontSize: "0.875em",
       borderRadius: e.borderRadius.sm,
       padding: `${e.spacingScale.sm} ${e.spacingScale.md}`,
       minWidth: t ? "100px" : "120px",
@@ -95586,7 +95543,7 @@ const dne = (e, t) => {
     saveButton: {
       fontFamily: e.fontFamilySecondary,
       fontWeight: 500,
-      fontSize: "0.875rem",
+      fontSize: "0.875em",
       borderRadius: e.borderRadius.sm,
       padding: `${e.spacingScale.sm} ${e.spacingScale.md}`,
       minWidth: t ? "100px" : "120px",
@@ -95622,7 +95579,7 @@ const dne = (e, t) => {
         transform: "scale(1.05)"
       },
       "& svg": {
-        fontSize: "1.25rem"
+        fontSize: "1.25em"
       }
     }
   };
@@ -97320,6 +97277,7 @@ const dne = (e, t) => {
     "--TableCell-paddingX": "0.5rem",
     "--TableCell-paddingY": "0.375rem",
     cursor: "default",
+    fontSize: "1em",
     "& > tbody > tr:hover": {
       backgroundColor: "transparent"
     },
@@ -97328,7 +97286,6 @@ const dne = (e, t) => {
       verticalAlign: "middle",
       fontFamily: e.fontFamilyPrimary,
       fontWeight: 600,
-      fontSize: "0.75rem",
       color: e.textPrimary
     },
     "& > tbody > tr > td": {
@@ -97393,7 +97350,7 @@ const dne = (e, t) => {
     whiteSpace: "nowrap"
   },
   avatarIcon: {
-    fontSize: "1rem",
+    fontSize: "1em",
     color: e.onPrimaryColor
   },
   // Pagination styles
@@ -97431,11 +97388,7 @@ const dne = (e, t) => {
     flexDirection: "column",
     justifyContent: "space-between",
     gap: "40px",
-    // p: props.spacingScale.xl,
     boxShadow: "md",
-    // border: props.brandingColors?.borderColor
-    //   ? `${props.borderSize} solid ${props.brandingColors.borderColor}`
-    //   : "none",
     border: "none",
     overflow: "hidden",
     backgroundImage: `url(${e.finalImage})`,
@@ -97477,7 +97430,7 @@ const dne = (e, t) => {
       display: "flex",
       alignItems: "center",
       gap: b.xs,
-      fontSize: "0.75rem",
+      fontSize: "0.875em",
       padding: "2px 6px",
       minHeight: "20px",
       borderRadius: p,
@@ -97487,7 +97440,7 @@ const dne = (e, t) => {
     }, D = {
       fontFamily: y,
       fontWeight: 500,
-      fontSize: A ? "0.75rem" : "0.875rem",
+      fontSize: "0.875em",
       color: f
     };
     if (z === Pt.BOOLEAN) {
@@ -97500,7 +97453,7 @@ const dne = (e, t) => {
       display: "flex",
       alignItems: "center",
       gap: b.xs,
-      fontSize: "0.75rem",
+      fontSize: "0.75em",
       padding: "2px 6px",
       minHeight: "20px",
       borderRadius: p,
@@ -97510,7 +97463,7 @@ const dne = (e, t) => {
     }, D = {
       fontFamily: y,
       fontWeight: 500,
-      fontSize: A ? "0.75rem" : "0.875rem",
+      fontSize: A ? "0.75em" : "0.875em",
       color: f
     };
     if (z === Pt.BOOLEAN) {
@@ -97520,7 +97473,9 @@ const dne = (e, t) => {
     return z === Pt.NUMBER ? /* @__PURE__ */ a.jsx(U, { sx: E, children: /* @__PURE__ */ a.jsx(H, { sx: D, children: w }) }) : z === Pt.ENUM || z === Pt.FREE_INPUT ? /* @__PURE__ */ a.jsx(U, { sx: E, children: /* @__PURE__ */ a.jsx(H, { sx: D, children: w }) }) : null;
   }, k = (w) => {
     var O;
-    const z = t.fixtures.find((M) => M.id === w), E = (O = e == null ? void 0 : e.fixtures) == null ? void 0 : O.find((M) => M.id === w);
+    const z = t.fixtures.find((M) => M.id === w), E = (O = e == null ? void 0 : e.fixtures) == null ? void 0 : O.find(
+      (M) => M.id === w
+    );
     if (!z || !E) return null;
     const D = E.correct === !0;
     return /* @__PURE__ */ a.jsx(
@@ -97608,7 +97563,7 @@ const dne = (e, t) => {
                             sx: {
                               color: f,
                               fontFamily: C,
-                              fontSize: "0.875rem",
+                              fontSize: "0.875em",
                               fontWeight: 600
                             },
                             children: [
@@ -97657,7 +97612,10 @@ const dne = (e, t) => {
                               children: c("eventGame.yourPrediction")
                             }
                           ),
-                          T(E.prediction, z.outcomeType)
+                          T(
+                            E.prediction,
+                            z.outcomeType
+                          )
                         ]
                       }
                     ),
@@ -97685,7 +97643,10 @@ const dne = (e, t) => {
                               children: c("eventGame.correctPrediction")
                             }
                           ),
-                          P(z.outcome, z.outcomeType)
+                          P(
+                            z.outcome,
+                            z.outcomeType
+                          )
                         ]
                       }
                     )
@@ -97978,7 +97939,7 @@ const dne = (e, t) => {
                                 sx: {
                                   color: f,
                                   fontFamily: y,
-                                  fontSize: "1.25rem",
+                                  fontSize: "1.25em",
                                   fontWeight: 600,
                                   lineHeight: "1.2"
                                 },
@@ -97991,7 +97952,7 @@ const dne = (e, t) => {
                                 sx: {
                                   color: m,
                                   fontFamily: C,
-                                  fontSize: "1rem",
+                                  fontSize: "1em",
                                   fontWeight: 400,
                                   lineHeight: "1.4"
                                 },
@@ -98137,7 +98098,7 @@ const dne = (e, t) => {
       color: c
     },
     avatarIcon: {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: C
     },
     noLeaderboardText: {
@@ -98912,6 +98873,7 @@ const dne = (e, t) => {
       backgroundColor: e.surfaceVariant,
       "--TableCell-paddingX": "0.5rem",
       "--TableCell-paddingY": "0.375rem",
+      fontSize: "1em",
       cursor: "default",
       "& > tbody > tr:hover": {
         backgroundColor: "transparent"
@@ -98921,7 +98883,6 @@ const dne = (e, t) => {
         verticalAlign: "middle",
         fontFamily: e.fontFamilyPrimary,
         fontWeight: 600,
-        fontSize: "0.75rem",
         color: e.textPrimary
       },
       "& > tbody > tr > td": {
@@ -98986,7 +98947,7 @@ const dne = (e, t) => {
       whiteSpace: "nowrap"
     },
     avatarIcon: {
-      fontSize: "1rem",
+      fontSize: "1em",
       color: e.onPrimaryColor
     },
     // Pagination styles
@@ -99343,7 +99304,7 @@ const dne = (e, t) => {
   },
   liveText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.875rem",
+    fontSize: "0.875em",
     color: e.dangerColor || "#d32f2f",
     fontWeight: 600,
     textTransform: "uppercase",
@@ -99361,7 +99322,7 @@ const dne = (e, t) => {
     display: "flex",
     alignItems: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     borderRadius: e.mdBorderRadius,
     border: `1px solid ${e.textColor || e.darkTextColor}20`,
@@ -99377,7 +99338,7 @@ const dne = (e, t) => {
   },
   matchResultScoreText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: e.textColor || e.darkTextColor,
     lineHeight: 1
@@ -99848,7 +99809,7 @@ const dne = (e, t) => {
     alignItems: "center",
     alignSelf: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     minHeight: "20px",
     borderRadius: e.borderRadius.sm,
@@ -99865,7 +99826,7 @@ const dne = (e, t) => {
   },
   matchResultScoreText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: e.textColor,
     lineHeight: 1
@@ -100391,7 +100352,7 @@ const dne = (e, t) => {
     alignItems: "center",
     alignSelf: "center",
     gap: e.spacingScale.xs,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     padding: "2px 6px",
     minHeight: "20px",
     borderRadius: e.borderRadius.sm,
@@ -100408,7 +100369,7 @@ const dne = (e, t) => {
   },
   matchResultScoreText: {
     fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75rem",
+    fontSize: "0.75em",
     fontWeight: 600,
     color: e.textColor,
     lineHeight: 1