diff --git a/index.html b/index.html
index 16bfb5567..a68be3393 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/png" href="/images/DISCORD.png" />
     <meta
       name="viewport"
-      content="width=1366, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
     />
     <title>Open League Manager</title>
   </head>
diff --git a/src/App.css b/src/App.css
index 8c18f67a6..f33e4c02e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,6 +28,7 @@
   /* Typography */
   --font-sans: "Inter", "Avenir", "Helvetica", "Arial", sans-serif;
   --font-heading: "Barlow Condensed", "Inter", "Arial Narrow", sans-serif;
+  --text-2xs: 0.625rem;
 
   /* Primary: Emerald Green */
   --color-primary-50: #ecfdf5;
diff --git a/src/components/EndOfSeasonScreen.tsx b/src/components/EndOfSeasonScreen.tsx
index 9b65da2fa..e74cf60ae 100644
--- a/src/components/EndOfSeasonScreen.tsx
+++ b/src/components/EndOfSeasonScreen.tsx
@@ -98,7 +98,7 @@ export default function EndOfSeasonScreen({ gameState, onGameUpdate }: EndOfSeas
   };
 
   return (
-    <div className="max-w-4xl mx-auto py-8 px-4">
+    <div className="w-[92%] max-w-[2000px] mx-auto py-8 px-4">
       {step === "review" && (
         <>
           {/* Hero */}
@@ -129,7 +129,7 @@ export default function EndOfSeasonScreen({ gameState, onGameUpdate }: EndOfSeas
                 <p className="text-xs font-heading font-bold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1">
                   {userTeam?.name}
                 </p>
-                <p className="text-[11px] font-heading font-bold uppercase tracking-widest text-primary-500 mb-4">
+                <p className="text-xs font-heading font-bold uppercase tracking-widest text-primary-500 mb-4">
                   {t("endOfSeason.regularPhaseSummary")}
                 </p>
                 <div className="flex items-center justify-center gap-6 mb-4">
diff --git a/src/components/NegotiationFeedbackPanel.tsx b/src/components/NegotiationFeedbackPanel.tsx
index 9da0d3413..49704088e 100644
--- a/src/components/NegotiationFeedbackPanel.tsx
+++ b/src/components/NegotiationFeedbackPanel.tsx
@@ -41,7 +41,7 @@ export default function NegotiationFeedbackPanel({
     >
       <div className="flex items-center justify-between gap-3">
         <div>
-          <p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          <p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
             {t(titleKey)}
           </p>
           <p className="text-sm font-medium text-gray-900 dark:text-gray-100 mt-1">
@@ -70,13 +70,13 @@ export default function NegotiationFeedbackPanel({
 
       <div className="grid grid-cols-2 gap-3">
         <div className="space-y-1">
-          <p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          <p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
             {t(patienceKey)}
           </p>
           <ProgressBar value={feedback.patience} variant="success" size="md" showLabel />
         </div>
         <div className="space-y-1">
-          <p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          <p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
             {t(tensionKey)}
           </p>
           <ProgressBar value={feedback.tension} variant="danger" size="md" showLabel />
diff --git a/src/components/NextMatchDisplay.tsx b/src/components/NextMatchDisplay.tsx
index a6e078d3b..45d99f122 100644
--- a/src/components/NextMatchDisplay.tsx
+++ b/src/components/NextMatchDisplay.tsx
@@ -233,7 +233,7 @@ export default function NextMatchDisplay({
       <div className="flex items-center justify-end">
         <div className="px-2.5 py-1 rounded-md bg-navy-900/70 border border-navy-600 text-right">
           <p className="font-heading font-bold text-gray-100 text-base leading-none">{countdown}d</p>
-          <p className="text-[10px] text-gray-400 leading-none mt-1">
+          <p className="text-2xs text-gray-400 leading-none mt-1">
             {t("home.daysUntilMatch")}
           </p>
         </div>
diff --git a/src/components/TraitBadge.tsx b/src/components/TraitBadge.tsx
index c851b9a92..15bf514c0 100644
--- a/src/components/TraitBadge.tsx
+++ b/src/components/TraitBadge.tsx
@@ -47,8 +47,8 @@ export function TraitBadge({ trait: traitName, size = "sm" }: { trait: string; s
   if (!meta) return null;
 
   const sizeClasses = size === "xs"
-    ? "text-[9px] px-1.5 py-0.5 gap-0.5"
-    : "text-[10px] px-2 py-0.5 gap-1";
+    ? "text-2xs px-1.5 py-0.5 gap-0.5"
+    : "text-2xs px-2 py-0.5 gap-1";
 
   return (
     <span
@@ -70,7 +70,7 @@ export function TraitList({ traits, size = "sm", max }: { traits: string[]; size
     <div className="flex flex-wrap gap-1">
       {displayed.map(t => <TraitBadge key={t} trait={t} size={size} />)}
       {remaining > 0 && (
-        <span className="text-[10px] text-gray-500 font-heading self-center">+{remaining}</span>
+        <span className="text-2xs text-gray-500 font-heading self-center">+{remaining}</span>
       )}
     </div>
   );
diff --git a/src/components/champions/ChampionsTab.tsx b/src/components/champions/ChampionsTab.tsx
index fb8923ee2..e28af5733 100644
--- a/src/components/champions/ChampionsTab.tsx
+++ b/src/components/champions/ChampionsTab.tsx
@@ -432,8 +432,8 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
       <section className="rounded-2xl border border-navy-600 bg-navy-700 p-5">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div>
-            <p className="text-[11px] uppercase tracking-widest text-gray-400 font-heading">
-              {t("champions.patchLabel")}
+            <p className="text-xs uppercase tracking-widest text-gray-400 font-heading">
+              {t("champions.patchLabel", "Patch")}
             </p>
             <h2 className="mt-1 text-2xl font-heading font-bold text-white">
               {patch?.current_patch_label || t("champions.patchFallback")}
@@ -448,7 +448,7 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
             </p>
           </div>
 
-          <div className="min-w-[230px] rounded-xl border border-navy-600 bg-navy-800/30 px-4 py-3">
+          <div className="min-w-56 rounded-xl border border-navy-600 bg-navy-800/30 px-4 py-3">
             <div className="flex items-center justify-between text-xs text-gray-300">
               <span className="inline-flex items-center gap-1"><Search className="h-3.5 w-3.5" />
                 {t("champions.discoveryProgress")}</span>
@@ -457,8 +457,8 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
             <div className="mt-2 h-2 rounded-full bg-navy-700">
               <div className="h-2 rounded-full bg-primary-500" style={{ width: `${discoveredPct}%` }} />
             </div>
-            <p className="mt-2 text-[11px] text-gray-400">
-              {t("champions.staffMetaImpact")}: {formatStaffEffectPercent(staffEffects.metaDiscovery)} · {t("champions.staffMasteryImpact")}: {formatStaffEffectPercent(staffEffects.development)}
+            <p className="mt-2 text-xs text-gray-400">
+              {t("champions.staffMetaImpact", "Scout read")}: {formatStaffEffectPercent(staffEffects.metaDiscovery)} · {t("champions.staffMasteryImpact", "mastery learning")}: {formatStaffEffectPercent(staffEffects.development)}
             </p>
           </div>
         </div>
@@ -473,7 +473,7 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
               <button
                 type="button"
                 onClick={() => setMetaRoleFilter("ALL")}
-                className={`rounded-md border px-2 py-1 text-[11px] font-heading transition-colors ${metaRoleFilter === "ALL" ? "border-primary-500 bg-primary-500 text-white" : "border-navy-600 text-gray-300 hover:border-navy-500"}`}
+                className={`rounded-md border px-2 py-1 text-xs font-heading transition-colors ${metaRoleFilter === "ALL" ? "border-primary-500 bg-primary-500 text-white" : "border-navy-600 text-gray-300 hover:border-navy-500"}`}
               >
                 {t("common.all")}
               </button>
@@ -625,16 +625,16 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
                   </div>
                   <div className="flex items-center gap-3">
                     <div className="text-right">
-                      <p className={`text-[11px] font-heading uppercase tracking-wide ${soloQTierClass(soloQ.tier)}`}>
+                      <p className={`text-xs font-heading uppercase tracking-wide ${soloQTierClass(soloQ.tier)}`}>
                         {soloQ.tier}
                       </p>
-                      <p className="text-[11px] text-gray-100 font-semibold">
+                      <p className="text-xs text-gray-100 font-semibold">
                         {soloQ.lp} LP
                         <span className={`ml-1 ${soloQ.delta >= 0 ? "text-emerald-300" : "text-rose-300"}`}>
                           {soloQ.delta >= 0 ? `+${soloQ.delta}` : soloQ.delta}
                         </span>
                       </p>
-                      <p className="text-[10px] text-gray-300">x{soloQMult.toFixed(1)} mastery</p>
+                      <p className="text-2xs text-gray-300">x{soloQMult.toFixed(1)} mastery</p>
                     </div>
                     <img
                       src={soloQEmblemUrl(soloQ.tier)}
@@ -668,18 +668,18 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
                       >
                         <div className="mb-2 flex items-start justify-between gap-2">
                           <div>
-                            <p className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
+                            <p className="text-2xs font-heading uppercase tracking-wider text-gray-400">
                               P{slotIndex + 1}
                             </p>
                             <p className="font-heading text-xs font-bold uppercase tracking-wider text-gray-200">
                               {slotTitle}
                             </p>
                           </div>
-                          <p className={`text-[10px] font-heading uppercase tracking-wide ${gainHint.className}`}>
+                          <p className={`text-2xs font-heading uppercase tracking-wide ${gainHint.className}`}>
                             {t("champions.gain")} {gainHint.label}
                           </p>
                         </div>
-                        <p className="mb-2 text-[11px] text-gray-400">{slotDesc}</p>
+                        <p className="mb-2 text-xs text-gray-400">{slotDesc}</p>
 
                         <select
                           value={target}
@@ -710,13 +710,13 @@ export default function ChampionsTab({ gameState, onGameUpdate, onViewChampion }
                           />
                         </div>
                         <div className="mt-2 flex flex-wrap gap-2">
-                          <span className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
+                          <span className="text-2xs font-heading uppercase tracking-wider text-gray-400">
                             {t("champions.mastery")} {masteryValue}
                           </span>
-                          <span className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
+                          <span className="text-2xs font-heading uppercase tracking-wider text-gray-400">
                             {t("training.effectiveFocus")} x{gainHint.baseMult.toFixed(2)}
                           </span>
-                          <span className="text-[10px] font-heading uppercase tracking-wider text-gray-400">
+                          <span className="text-2xs font-heading uppercase tracking-wider text-gray-400">
                             SoloQ x{soloQMult.toFixed(1)}
                           </span>
                         </div>
diff --git a/src/components/dashboard/DashboardBlockerModal.tsx b/src/components/dashboard/DashboardBlockerModal.tsx
index 5ad471741..3c1f1b6da 100644
--- a/src/components/dashboard/DashboardBlockerModal.tsx
+++ b/src/components/dashboard/DashboardBlockerModal.tsx
@@ -66,7 +66,7 @@ export default function DashboardBlockerModal({
             <p className={getBlockerTextClassName(blocker.severity)}>
               {blocker.text}
             </p>
-            <p className="mt-1 text-[10px] font-heading uppercase tracking-widest text-gray-400">
+            <p className="mt-1 text-2xs font-heading uppercase tracking-widest text-gray-400">
               {t("notifications.goTo")} {blocker.tab} →
             </p>
           </button>
diff --git a/src/components/dashboard/DashboardSidebar.tsx b/src/components/dashboard/DashboardSidebar.tsx
index 83a3ae37c..515c31fce 100644
--- a/src/components/dashboard/DashboardSidebar.tsx
+++ b/src/components/dashboard/DashboardSidebar.tsx
@@ -83,7 +83,7 @@ function NavItem({
         <span
           className={
             collapsed
-              ? "absolute right-1.5 top-1.5 min-w-[1.1rem] rounded-full bg-primary-500 px-1.5 py-0.5 text-center text-[10px] font-bold text-white"
+              ? "absolute right-1.5 top-1.5 min-w-[1.1rem] rounded-full bg-primary-500 px-1.5 py-0.5 text-center text-2xs font-bold text-white"
               : "min-w-5 rounded-full bg-primary-500 px-2 py-0.5 text-center text-xs font-bold text-white"
           }
         >
@@ -279,7 +279,7 @@ export default function DashboardSidebar({
         {!isUnemployed && (
           <>
             {collapsed ? null : (
-              <p className="text-[10px] text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
+              <p className="text-2xs text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
                 {t("dashboard.sectionClub")}
               </p>
             )}
@@ -297,7 +297,7 @@ export default function DashboardSidebar({
         )}
 
         {collapsed ? null : (
-          <p className="text-[10px] text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
+          <p className="text-2xs text-gray-500 uppercase tracking-widest font-heading px-3 pt-3 pb-1">
             {t("dashboard.sectionWorld")}
           </p>
         )}
diff --git a/src/components/finances/FinancesTab.tsx b/src/components/finances/FinancesTab.tsx
index 27e7c891e..7bb43e5a8 100644
--- a/src/components/finances/FinancesTab.tsx
+++ b/src/components/finances/FinancesTab.tsx
@@ -332,7 +332,7 @@ export default function FinancesTab({
   ];
 
   return (
-    <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-5">
+    <div className="w-[92%] max-w-[2000px] mx-auto grid grid-cols-1 lg:grid-cols-3 2xl:grid-cols-4 gap-5">
       {/* Financial overview */}
       <Card accent="accent" className="lg:col-span-2">
         <CardHeader>{t("finances.overview")}</CardHeader>
diff --git a/src/components/home/HomeLatestNewsCard.tsx b/src/components/home/HomeLatestNewsCard.tsx
index a3021792c..d26a838ca 100644
--- a/src/components/home/HomeLatestNewsCard.tsx
+++ b/src/components/home/HomeLatestNewsCard.tsx
@@ -58,13 +58,13 @@ export default function HomeLatestNewsCard({
                 </p>
                 {article.match_score && (
                   <div className="flex items-center gap-1.5 mt-1">
-                    <span className="text-[10px] text-gray-500 dark:text-gray-400">
+                    <span className="text-2xs text-gray-500 dark:text-gray-400">
                       {getTeamName(teams, article.match_score.home_team_id)}
                     </span>
-                    <span className="text-[10px] font-heading font-bold text-primary-500">
+                    <span className="text-2xs font-heading font-bold text-primary-500">
                       {article.match_score.home_goals}-{article.match_score.away_goals}
                     </span>
-                    <span className="text-[10px] text-gray-500 dark:text-gray-400">
+                    <span className="text-2xs text-gray-500 dark:text-gray-400">
                       {getTeamName(teams, article.match_score.away_team_id)}
                     </span>
                   </div>
diff --git a/src/components/home/HomeLeagueDigestCard.tsx b/src/components/home/HomeLeagueDigestCard.tsx
index 2607ccd2f..55a68fac8 100644
--- a/src/components/home/HomeLeagueDigestCard.tsx
+++ b/src/components/home/HomeLeagueDigestCard.tsx
@@ -48,7 +48,7 @@ export default function HomeLeagueDigestCard({
                   <Badge variant="neutral" size="sm">
                     {t(`news.categories.${article.category}`)}
                   </Badge>
-                  <span className="text-[10px] text-gray-400 dark:text-gray-500">
+                  <span className="text-2xs text-gray-400 dark:text-gray-500">
                     {formatDateShort(article.date, lang)} - {article.source}
                   </span>
                 </div>
diff --git a/src/components/home/HomeLeaguePositionCard.tsx b/src/components/home/HomeLeaguePositionCard.tsx
index 709d670be..ef030b24c 100644
--- a/src/components/home/HomeLeaguePositionCard.tsx
+++ b/src/components/home/HomeLeaguePositionCard.tsx
@@ -124,7 +124,7 @@ export default function HomeLeaguePositionCard({
                       ? t("home.nextMatch")
                       : t("schedule.lastResult")}
                   </Badge>
-                  <span className="text-[10px] font-heading font-bold uppercase tracking-wider text-cyan-300/90">
+                  <span className="text-2xs font-heading font-bold uppercase tracking-wider text-cyan-300/90">
                     {t("schedule.round", {
                       number: spotlightFixture.matchday,
                     })}
@@ -167,7 +167,7 @@ export default function HomeLeaguePositionCard({
               return (
                 <div
                   key={entry.team_id}
-                  className={`grid grid-cols-[18px_1fr_24px_24px_44px] items-center gap-2 rounded px-2 py-1 text-[11px] ${isMine ? "bg-cyan-500/10 border border-cyan-400/30" : "bg-gray-50 dark:bg-navy-800/40"}`}
+                  className={`grid grid-cols-[18px_1fr_24px_24px_44px] items-center gap-2 rounded px-2 py-1 text-xs ${isMine ? "bg-cyan-500/10 border border-cyan-400/30" : "bg-gray-50 dark:bg-navy-800/40"}`}
                 >
                   <span className={`font-heading font-black ${isMine ? "text-cyan-300" : "text-gray-500 dark:text-gray-400"}`}>
                     {index + 1}
diff --git a/src/components/home/HomeNextOpponentCard.tsx b/src/components/home/HomeNextOpponentCard.tsx
index 916802167..46cd3bbed 100644
--- a/src/components/home/HomeNextOpponentCard.tsx
+++ b/src/components/home/HomeNextOpponentCard.tsx
@@ -85,7 +85,7 @@ export default function HomeNextOpponentCard({
                 {nextOpponent.recentForm.map((result, index) => (
                   <span
                     key={`${nextOpponent.opponent.id}-${index}`}
-                    className={`w-6 h-6 rounded flex items-center justify-center text-[10px] font-heading font-bold text-white ${
+                    className={`w-6 h-6 rounded flex items-center justify-center text-2xs font-heading font-bold text-white ${
                       result === "W"
                         ? "bg-green-500"
                         : result === "L"
diff --git a/src/components/home/HomePlayerMomentumCard.tsx b/src/components/home/HomePlayerMomentumCard.tsx
index 48e2bf750..99ba9a8a2 100644
--- a/src/components/home/HomePlayerMomentumCard.tsx
+++ b/src/components/home/HomePlayerMomentumCard.tsx
@@ -42,7 +42,7 @@ export default function HomePlayerMomentumCard({
             <div>
               <div className="flex items-center gap-1.5 mb-2">
                 <TrendingUp className="w-3.5 h-3.5 text-green-500" />
-                <span className="text-[10px] font-heading font-bold uppercase tracking-widest text-green-500">
+                <span className="text-2xs font-heading font-bold uppercase tracking-widest text-green-500">
                   {t("home.inForm")}
                 </span>
               </div>
@@ -70,7 +70,7 @@ export default function HomePlayerMomentumCard({
             <div>
               <div className="flex items-center gap-1.5 mb-2">
                 <TrendingDown className="w-3.5 h-3.5 text-red-500" />
-                <span className="text-[10px] font-heading font-bold uppercase tracking-widest text-red-500">
+                <span className="text-2xs font-heading font-bold uppercase tracking-widest text-red-500">
                   {t("home.lowMorale")}
                 </span>
               </div>
diff --git a/src/components/home/HomeRecentMessagesCard.tsx b/src/components/home/HomeRecentMessagesCard.tsx
index 92a14b58f..7783a2ac0 100644
--- a/src/components/home/HomeRecentMessagesCard.tsx
+++ b/src/components/home/HomeRecentMessagesCard.tsx
@@ -71,7 +71,7 @@ export default function HomeRecentMessagesCard({
                     {message.body}
                   </p>
                 </div>
-                <span className="text-[10px] text-gray-400 dark:text-gray-500 flex-shrink-0 mt-1">
+                <span className="text-2xs text-gray-400 dark:text-gray-500 flex-shrink-0 mt-1">
                   {formatDateShort(message.date, lang)}
                 </span>
               </div>
diff --git a/src/components/home/HomeRecentResultsCard.tsx b/src/components/home/HomeRecentResultsCard.tsx
index 953ef3ff9..8581c113b 100644
--- a/src/components/home/HomeRecentResultsCard.tsx
+++ b/src/components/home/HomeRecentResultsCard.tsx
@@ -48,7 +48,7 @@ export default function HomeRecentResultsCard({
                   className="flex items-center px-4 py-2.5 gap-3"
                 >
                   <span
-                    className={`w-5 h-5 rounded flex items-center justify-center text-[9px] font-heading font-bold text-white flex-shrink-0 ${
+                    className={`w-5 h-5 rounded flex items-center justify-center text-2xs font-heading font-bold text-white flex-shrink-0 ${
                       result.resultCode === "W"
                         ? "bg-green-500"
                         : result.resultCode === "L"
diff --git a/src/components/home/HomeRosterLineupCard.tsx b/src/components/home/HomeRosterLineupCard.tsx
index afd1a058a..966ea6c8a 100644
--- a/src/components/home/HomeRosterLineupCard.tsx
+++ b/src/components/home/HomeRosterLineupCard.tsx
@@ -164,7 +164,7 @@ export default function HomeRosterLineupCard({
                 ) : null}
 
                 <div className="relative z-10">
-                <p className="text-[10px] font-heading font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                <p className="text-2xs font-heading font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                   {role}
                 </p>
 
@@ -183,16 +183,16 @@ export default function HomeRosterLineupCard({
                     <p className="text-xs font-heading font-bold truncate text-gray-800 dark:text-gray-100">
                       {player?.match_name ?? "—"}
                     </p>
-                    <p className="text-[10px] text-gray-500 dark:text-gray-400">
+                    <p className="text-2xs text-gray-500 dark:text-gray-400">
                       {t("common.ovr")} {ovr ?? "—"}
                     </p>
                     {topChampion ? (
-                      <p className="text-[10px] text-primary-300 truncate">{topChampion}</p>
+                      <p className="text-2xs text-primary-300 truncate">{topChampion}</p>
                     ) : null}
                   </div>
                 </div>
 
-                <div className="mt-2 grid grid-cols-2 gap-1 text-[10px]">
+                <div className="mt-2 grid grid-cols-2 gap-1 text-2xs">
                   <div className="rounded bg-navy-900/60 px-1.5 py-1 text-center">
                     <p className="text-gray-400">{t("common.condition")}</p>
                     <p className="font-heading font-bold text-primary-400">
diff --git a/src/components/home/HomeSeasonStatusCard.tsx b/src/components/home/HomeSeasonStatusCard.tsx
index 68922bd9f..86a9a1826 100644
--- a/src/components/home/HomeSeasonStatusCard.tsx
+++ b/src/components/home/HomeSeasonStatusCard.tsx
@@ -54,7 +54,7 @@ export default function HomeSeasonStatusCard({
           </div>
           <div className="grid grid-cols-1 gap-3 md:grid-cols-2 md:min-w-[22rem]">
             <div className="rounded-xl bg-gray-50 px-4 py-3 dark:bg-navy-700/50">
-              <p className="text-[10px] font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+              <p className="text-2xs font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                 {t("season.opener")}
               </p>
               <p className="mt-1 text-sm font-heading font-bold text-gray-800 dark:text-gray-100">
@@ -71,7 +71,7 @@ export default function HomeSeasonStatusCard({
               )}
             </div>
             <div className="rounded-xl bg-gray-50 px-4 py-3 dark:bg-navy-700/50">
-              <p className="text-[10px] font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+              <p className="text-2xs font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                 {t("transfers.centre")}
               </p>
               <p className="mt-1 text-sm font-heading font-bold text-gray-800 dark:text-gray-100">
diff --git a/src/components/home/HomeTab.tsx b/src/components/home/HomeTab.tsx
index 62ee60249..213002585 100644
--- a/src/components/home/HomeTab.tsx
+++ b/src/components/home/HomeTab.tsx
@@ -236,7 +236,7 @@ export default function HomeTab({
             onNavigate={onNavigate}
           />
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          <div className="grid grid-cols-1 md:grid-cols-3 2xl:grid-cols-3 gap-5">
             {/* Next Match Card */}
             <Card accent="primary" className="md:col-span-2">
               <CardHeader>{t("home.nextMatch")}</CardHeader>
diff --git a/src/components/home/HomeThisWeekCard.tsx b/src/components/home/HomeThisWeekCard.tsx
index e4de963a4..c541dc5a2 100644
--- a/src/components/home/HomeThisWeekCard.tsx
+++ b/src/components/home/HomeThisWeekCard.tsx
@@ -102,14 +102,14 @@ export default function HomeThisWeekCard({ gameState }: HomeThisWeekCardProps) {
                 key={`${day.label}-${day.date.toISOString()}`}
                 className={`rounded-md border px-1.5 py-2 text-center ${day.isToday ? "border-accent-400/70 bg-accent-500/10" : "border-gray-100 dark:border-navy-600 bg-gray-50 dark:bg-navy-800/40"}`}
               >
-                <p className="text-[10px] font-heading font-bold text-gray-500 dark:text-gray-400">
+                <p className="text-2xs font-heading font-bold text-gray-500 dark:text-gray-400">
                   {day.label}
                 </p>
                 <p className="text-xs font-heading font-bold text-gray-800 dark:text-gray-100 mt-1">
                   {day.date.getDate()}
                 </p>
                 <p
-                  className={`text-[10px] mt-2 font-heading font-bold ${isMatchDay ? "text-primary-500" : isScrimDay ? "text-blue-500" : "text-gray-400 dark:text-gray-500"}`}
+                  className={`text-2xs mt-2 font-heading font-bold ${isMatchDay ? "text-primary-500" : isScrimDay ? "text-blue-500" : "text-gray-400 dark:text-gray-500"}`}
                 >
                   {isMatchDay
                     ? t("home.matchShort")
@@ -118,8 +118,8 @@ export default function HomeThisWeekCard({ gameState }: HomeThisWeekCardProps) {
                       : t("home.restShort")}
                 </p>
                 {isMatchDay ? (
-                  <p className="text-[10px] text-gray-500 dark:text-gray-400 truncate mt-1">
-                    {day.fixture?.match_type === "League"
+                  <p className="text-2xs text-gray-500 dark:text-gray-400 truncate mt-1">
+                    {day.fixture?.competition === "League"
                       ? t("home.leagueShort")
                       : t("home.otherShort")}
                   </p>
diff --git a/src/components/home/HomeTodayPlanCard.tsx b/src/components/home/HomeTodayPlanCard.tsx
index 4b0fb6a2c..3eac4a9e6 100644
--- a/src/components/home/HomeTodayPlanCard.tsx
+++ b/src/components/home/HomeTodayPlanCard.tsx
@@ -432,7 +432,7 @@ export default function HomeTodayPlanCard({
                             : option.label}
                     </span>
                     {suggestedDecision === option.id ? (
-                      <span className="mt-1 inline-block text-[10px] font-heading uppercase tracking-wider text-primary-600 dark:text-primary-300">
+                      <span className="mt-1 inline-block text-2xs font-heading uppercase tracking-wider text-primary-600 dark:text-primary-300">
                         {t("home.recommendedNow")}
                       </span>
                     ) : null}
@@ -443,7 +443,7 @@ export default function HomeTodayPlanCard({
                       {decisionImpactTags[option.id].map((tag) => (
                         <span
                           key={tag}
-                          className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400"
+                          className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400"
                         >
                           {tag}
                         </span>
diff --git a/src/components/inbox/InboxTab.tsx b/src/components/inbox/InboxTab.tsx
index e78d3af2c..f6f103496 100644
--- a/src/components/inbox/InboxTab.tsx
+++ b/src/components/inbox/InboxTab.tsx
@@ -301,7 +301,7 @@ export default function InboxTab({
   }
 
   return (
-    <div className="max-w-6xl mx-auto flex flex-col h-[calc(100dvh-9rem)] min-h-0">
+    <div className="w-[92%] max-w-[2000px] mx-auto flex flex-col h-[calc(100dvh-9rem)] min-h-0">
       <InboxToolbar
         allMessagesCount={allMessages.length}
         bulkSelectionEnabled={bulkSelectionEnabled}
diff --git a/src/components/manager/ManagerTab.tsx b/src/components/manager/ManagerTab.tsx
index 2322e447d..14f1178ad 100644
--- a/src/components/manager/ManagerTab.tsx
+++ b/src/components/manager/ManagerTab.tsx
@@ -107,7 +107,7 @@ export default function ManagerTab({ gameState }: ManagerTabProps) {
   };
 
   return (
-    <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-5">
+    <div className="w-[92%] max-w-[2000px] mx-auto grid grid-cols-1 md:grid-cols-3 2xl:grid-cols-4 gap-5">
       {/* Profile card */}
       <Card accent="primary" className="md:col-span-3">
         <div className="bg-gradient-to-r from-navy-700 to-navy-800 p-6 rounded-t-xl flex items-center gap-6 relative">
@@ -327,7 +327,7 @@ export default function ManagerTab({ gameState }: ManagerTabProps) {
             <div>
               <div className="text-center mb-2">
                 <p className="font-heading font-bold text-3xl text-gray-800 dark:text-gray-100">{mgr.satisfaction}%</p>
-                <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-0.5">{t('manager.board')}</p>
+                <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-0.5">{t('manager.board')}</p>
               </div>
               <ProgressBar value={mgr.satisfaction} variant="auto" size="md" />
               <div className="flex items-center justify-center gap-1.5 mt-2">
@@ -343,7 +343,7 @@ export default function ManagerTab({ gameState }: ManagerTabProps) {
             <div>
               <div className="text-center mb-2">
                 <p className="font-heading font-bold text-3xl text-gray-800 dark:text-gray-100">{mgr.fan_approval ?? 50}%</p>
-                <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-0.5">{t('manager.fans')}</p>
+                <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-0.5">{t('manager.fans')}</p>
               </div>
               <ProgressBar value={mgr.fan_approval ?? 50} variant="auto" size="md" />
               <div className="flex items-center justify-center gap-1.5 mt-2">
@@ -365,28 +365,32 @@ export default function ManagerTab({ gameState }: ManagerTabProps) {
         <Card className="md:col-span-3">
           <CardHeader>{t('manager.careerHistory')}</CardHeader>
           <CardBody className="p-0">
-            <table className="w-full text-left border-collapse">
-              <thead>
-                <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
-                  <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t('manager.club')}</th>
-                  <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t('manager.period')}</th>
-                  <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.played')}</th>
-                  <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.won')}</th>
-                  <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.lost')}</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
-                {mgr.career_history.map((entry, i) => (
-                  <tr key={i}>
-                    <td className="py-3 px-5 font-semibold text-sm text-gray-800 dark:text-gray-200">{entry.team_name}</td>
-                    <td className="py-3 px-5 text-sm text-gray-500 dark:text-gray-400">{entry.start_date.substring(0, 4)} — {entry.end_date?.substring(0, 4) || t('common.present')}</td>
-                    <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.matches}</td>
-                    <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.wins}</td>
-                    <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.losses}</td>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
+                    <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t('manager.club')}</th>
+                    <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t('manager.period')}</th>
+                    <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.played')}</th>
+                    <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.won')}</th>
+                    <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.drawn')}</th>
+                    <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t('common.lost')}</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
+                  {mgr.career_history.map((entry, i) => (
+                    <tr key={i}>
+                      <td className="py-3 px-5 font-semibold text-sm text-gray-800 dark:text-gray-200">{entry.team_name}</td>
+                      <td className="py-3 px-5 text-sm text-gray-500 dark:text-gray-400">{entry.start_date.substring(0, 4)} — {entry.end_date?.substring(0, 4) || t('common.present')}</td>
+                      <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.matches}</td>
+                      <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.wins}</td>
+                      <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.draws}</td>
+                      <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.losses}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </CardBody>
         </Card>
       )}
diff --git a/src/components/match/ChampionDraft.tsx b/src/components/match/ChampionDraft.tsx
index 5e117acf4..6d434bf5d 100644
--- a/src/components/match/ChampionDraft.tsx
+++ b/src/components/match/ChampionDraft.tsx
@@ -722,9 +722,9 @@ function teamLogo(name: string): string | null {
 }
 
 function tricodeSizeClass(code: string): string {
-  if (code.length >= 4) return "text-[26px]";
-  if (code.length === 3) return "text-[30px]";
-  return "text-[34px]";
+  if (code.length >= 4) return "text-2xl";
+  if (code.length === 3) return "text-3xl";
+  return "text-4xl";
 }
 
 function playerSeedPhotoUrl(photo?: string): string | null {
@@ -2574,7 +2574,7 @@ export default function ChampionDraft({
 
   return (
     <div className={`h-dvh bg-[#0a0a0a] text-white p-2 md:p-4 ${isCompactLayout ? "overflow-y-auto" : "overflow-hidden"}`}>
-      <div className={`w-[93%] max-w-none mx-auto flex flex-col gap-2 md:gap-3 ${isCompactLayout ? "min-h-full overflow-visible pb-3" : "h-full overflow-hidden"}`}>
+      <div className={`w-full max-w-[2000px] 2xl:max-w-[90vw] mx-auto flex flex-col gap-2 md:gap-3 ${isCompactLayout ? "min-h-full overflow-visible pb-3" : "h-full overflow-hidden"}`}>
         <section className="order-2 shrink-0 rounded-md overflow-hidden border border-[#222]">
           <div
             className={`relative flex items-stretch bg-linear-to-b from-[#032e35] via-[#021720] to-[#000] border-b-4 border-cyan-400 shadow-[0_0_16px_rgba(0,242,255,0.35)] ${topSectionHeightClass}`}
@@ -2592,7 +2592,7 @@ export default function ChampionDraft({
             <div className="absolute inset-0 bg-black/72" />
 
             <div className="relative z-10 border-t-2 border-cyan-400/90 bg-black/28 w-[250px] p-2.5">
-              <p className="font-heading uppercase font-bold tracking-[0.08em] mb-1 truncate text-cyan-100 [text-shadow:0_0_10px_rgba(0,0,0,0.9)] text-[13px]">
+              <p className="font-heading uppercase font-bold tracking-[0.08em] mb-1 truncate text-cyan-100 [text-shadow:0_0_10px_rgba(0,0,0,0.9)] text-sm">
                 {blueHeader}
               </p>
               <div className="flex gap-1">
@@ -2621,7 +2621,7 @@ export default function ChampionDraft({
             <div className="relative z-10 flex-1 flex flex-col items-center justify-center gap-1.5 px-2">
               {seriesLength > 1 && seriesLockedChampions.length > 0 ? (
                 <div className="flex flex-col items-center gap-1">
-                  <p className="text-[11px] uppercase tracking-[0.2em] text-gray-100 font-heading font-bold">
+                  <p className="text-xs uppercase tracking-[0.2em] text-gray-100 font-heading font-bold">
                     {t("match.draft.seriesBans", { defaultValue: "SERIES BANS" })}
                   </p>
                   <div className="flex flex-wrap items-center justify-center gap-1 max-w-[520px]">
@@ -2643,13 +2643,13 @@ export default function ChampionDraft({
                 </div>
               ) : null}
 
-              <p className="text-[11px] uppercase tracking-[0.2em] text-gray-300 font-semibold">
+              <p className="text-xs uppercase tracking-[0.2em] text-gray-300 font-semibold">
                 {t("match.draft.championSelection")}
               </p>
             </div>
 
             <div className="relative z-10 text-right border-t-2 border-orange-500/95 bg-black/28 w-[250px] p-2.5">
-              <p className="font-heading uppercase font-bold tracking-[0.08em] mb-1 truncate text-orange-100 [text-shadow:0_0_10px_rgba(0,0,0,0.9)] text-[13px]">
+              <p className="font-heading uppercase font-bold tracking-[0.08em] mb-1 truncate text-orange-100 [text-shadow:0_0_10px_rgba(0,0,0,0.9)] text-sm">
                 {redHeader}
               </p>
               <div className="flex gap-1 justify-end">
@@ -2733,14 +2733,14 @@ export default function ChampionDraft({
                     />
                   ) : null}
                   <p
-                    className={`w-full text-center ${isCompactLayout ? "text-[9px]" : tricodeSizeClass(blueTriCode)} leading-none font-black tracking-tight uppercase`}
+                    className={`w-full text-center ${isCompactLayout ? "text-2xs" : tricodeSizeClass(blueTriCode)} leading-none font-black tracking-tight uppercase`}
                   >
                     {blueTriCode}
                   </p>
                 </div>
 
                 {isCompactLayout ? (
-                  <p className="text-[8px] font-bold tracking-[0.12em] text-gray-300">VS</p>
+                  <p className="text-2xs font-bold tracking-[0.12em] text-gray-300">VS</p>
                 ) : (
                   <div className="w-10 h-10" />
                 )}
@@ -2754,7 +2754,7 @@ export default function ChampionDraft({
                     />
                   ) : null}
                   <p
-                    className={`w-full text-center ${isCompactLayout ? "text-[9px]" : tricodeSizeClass(redTriCode)} leading-none font-black tracking-tight uppercase`}
+                    className={`w-full text-center ${isCompactLayout ? "text-2xs" : tricodeSizeClass(redTriCode)} leading-none font-black tracking-tight uppercase`}
                   >
                     {redTriCode}
                   </p>
@@ -2768,7 +2768,7 @@ export default function ChampionDraft({
                   className="w-10 h-10 object-contain opacity-100 mt-1"
                 />
               ) : null}
-              <p className={`${isCompactLayout ? "text-[8px] tracking-[0.08em] mb-0.5" : "text-[11px] tracking-[0.15em] mb-1"} text-gray-300 uppercase`}>
+              <p className={`${isCompactLayout ? "text-2xs tracking-[0.08em] mb-0.5" : "text-xs tracking-[0.15em] mb-1"} text-gray-300 uppercase`}>
                 {t("match.draft.patchLabel", { patch: patchLabel })}
               </p>
             </div>
@@ -2794,10 +2794,10 @@ export default function ChampionDraft({
         </section>
 
         <section className={`order-1 rounded-md border border-cyan-400/25 bg-[#050608] p-2 md:p-3 shadow-[0_0_28px_rgba(18,215,255,0.06)] ${isCompactLayout ? "shrink-0 overflow-visible" : "flex-1 min-h-0 overflow-hidden"}`}>
-          <div className={`grid gap-2 md:gap-3 items-stretch ${isCompactLayout ? compactPanelsColsClass : "grid-cols-1 xl:grid-cols-[270px_minmax(0,1fr)_270px]"} ${isCompactLayout ? "h-auto min-h-0" : "h-full min-h-0"}`}>
-            <aside className={`${isCompactLayout ? "flex" : "hidden xl:flex"} h-full flex-col gap-2 min-h-0 overflow-y-auto scrollbar-draft pr-1`}>
+          <div className={`grid gap-2 md:gap-3 items-stretch ${isCompactLayout ? compactPanelsColsClass : "grid-cols-1 xl:grid-cols-[270px_minmax(0,1fr)_270px] 2xl:grid-cols-[320px_minmax(0,1fr)_320px]"} ${isCompactLayout ? "h-auto min-h-0" : "h-full min-h-0"}`}>
+            <aside className={`${isCompactLayout ? "flex" : "hidden xl:flex"} lg:w-[280px] xl:w-[300px] h-full flex-col gap-2 min-h-0 overflow-y-auto scrollbar-draft pr-1`}>
               {assistantCoachTips.length > 0 ? (
-                <div className="rounded-md border border-cyan-400/25 bg-[#0a0b0f] p-3 text-[12px] text-gray-200">
+                <div className="rounded-md border border-cyan-400/25 bg-[#0a0b0f] p-3 text-xs text-gray-200">
                   <p className="font-heading uppercase tracking-wide text-xs text-white mb-2">
                     {t("match.draft.tipsTitle")}
                   </p>
@@ -2820,7 +2820,7 @@ export default function ChampionDraft({
                           />
 
                           <div className="min-w-0 flex-1">
-                            <p className="text-[13px] font-semibold leading-none text-white truncate">
+                            <p className="text-sm font-semibold leading-none text-white truncate">
                               {tip.sourceName}
                             </p>
                             <div className="mt-1 flex items-center gap-1">
@@ -2832,7 +2832,7 @@ export default function ChampionDraft({
                                   loading="lazy"
                                 />
                               ) : null}
-                              <p className="text-[10px] uppercase tracking-wide text-cyan-300/90">
+                              <p className="text-2xs uppercase tracking-wide text-cyan-300/90">
                                 {tip.sourceRole
                                   ?? (tip.sourceType === "coach"
                                     ? t("match.draft.assistantCoach")
@@ -2843,7 +2843,7 @@ export default function ChampionDraft({
                         </div>
 
                         <p
-                          className={`mt-2 text-[12px] leading-snug ${
+                          className={`mt-2 text-xs leading-snug ${
                             tip.type === "ban" ? "text-orange-200" : tip.type === "pick" ? "text-cyan-200" : "text-yellow-200"
                           }`}
                         >
@@ -2858,7 +2858,7 @@ export default function ChampionDraft({
                               className="w-7 h-7 rounded-sm object-cover border border-orange-400/60"
                               loading="lazy"
                             />
-                            <span className="text-[11px] text-gray-200 truncate">{tip.champion.name}</span>
+                            <span className="text-xs text-gray-200 truncate">{tip.champion.name}</span>
                           </div>
                         ) : null}
                       </article>
@@ -2866,26 +2866,26 @@ export default function ChampionDraft({
                   })()}
                 </div>
               ) : (
-                <div className="rounded-md border border-cyan-400/25 bg-[#0a0b0f] p-3 text-[12px] text-gray-200">
+                <div className="rounded-md border border-cyan-400/25 bg-[#0a0b0f] p-3 text-xs text-gray-200">
                   <p className="font-heading uppercase tracking-wide text-xs text-white mb-2">
                     {t("match.draft.tipsTitle")}
                   </p>
-                  <p className="text-[12px] mb-1">• {t("match.draft.tip1")}</p>
-                  <p className="text-[12px] mb-1">• {t("match.draft.tip2")}</p>
-                  <p className="text-[12px]">• {t("match.draft.tip3")}</p>
+                  <p className="text-xs mb-1">• {t("match.draft.tip1")}</p>
+                  <p className="text-xs mb-1">• {t("match.draft.tip2")}</p>
+                  <p className="text-xs">• {t("match.draft.tip3")}</p>
                 </div>
               )}
 
-              <div className="rounded-md border border-orange-400/30 bg-[#0a0b0f] p-3 text-[12px] text-gray-200">
+              <div className="rounded-md border border-orange-400/30 bg-[#0a0b0f] p-3 text-xs text-gray-200">
                 <p className="font-heading uppercase tracking-wide text-xs text-white mb-2">
                   {t("match.draft.scoreTitle")}
                 </p>
-                <div className="mb-2 text-[11px] text-gray-300">
+                <div className="mb-2 text-xs text-gray-300">
                   <p>
                     {t("match.draft.winProb")} <span className="text-cyan-300 font-semibold">{controlledTriCode} {blueWinProb}%</span>
                   </p>
                 </div>
-                <div className="space-y-1 text-[11px]">
+                <div className="space-y-1 text-xs">
                   {scoreRows.map((row) => (
                     <p key={row.label} className="text-gray-300">
                       {row.label}
@@ -2896,7 +2896,7 @@ export default function ChampionDraft({
                   ))}
                 </div>
                 {controlledScrimBonusTotal > 0 ? (
-                  <div className="mt-2 rounded border border-cyan-400/20 bg-cyan-400/5 px-2 py-1.5 text-[10px] text-cyan-100">
+                  <div className="mt-2 rounded border border-cyan-400/20 bg-cyan-400/5 px-2 py-1.5 text-2xs text-cyan-100">
                     <p className="font-semibold uppercase tracking-wide">
                       {t("match.draft.scrimSignalTitle", { defaultValue: "Scrim prep" })} +{controlledScrimBonusTotal}
                     </p>
@@ -2905,7 +2905,7 @@ export default function ChampionDraft({
                     </p>
                   </div>
                 ) : null}
-                <div className="mt-2 pt-2 border-t border-white/10 text-[11px]">
+                <div className="mt-2 pt-2 border-t border-white/10 text-xs">
                   <p className="text-gray-300">
                     {t("match.draft.total")} <span className="float-right font-bold text-white">{controlledScore.total}</span>
                   </p>
@@ -2928,7 +2928,7 @@ export default function ChampionDraft({
               <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_auto_auto] gap-2 items-center">
                 <div className="flex flex-wrap gap-1">
                   <button
-                    className={`px-2 py-1 text-[11px] border rounded ${roleFilter === "ALL" ? "border-cyan-300/80 bg-cyan-400/10 text-cyan-100" : "border-white/20 text-gray-200"}`}
+                    className={`px-2 py-1 text-xs border rounded ${roleFilter === "ALL" ? "border-cyan-300/80 bg-cyan-400/10 text-cyan-100" : "border-white/20 text-gray-200"}`}
                     onClick={() => setRoleFilter("ALL")}
                   >
                     ALL
@@ -2936,7 +2936,7 @@ export default function ChampionDraft({
                   {ROLE_ORDER.map((role) => (
                       <button
                         key={`chip-${role}`}
-                        className={`px-2 py-1 text-[11px] border rounded ${roleFilter === role ? "border-cyan-300/80 bg-cyan-400/10 text-cyan-100" : "border-white/20 text-gray-200"}`}
+                        className={`px-2 py-1 text-xs border rounded ${roleFilter === role ? "border-cyan-300/80 bg-cyan-400/10 text-cyan-100" : "border-white/20 text-gray-200"}`}
                         onClick={() => setRoleFilter(role)}
                       >
                       {role}
@@ -2948,7 +2948,7 @@ export default function ChampionDraft({
                   {(["alpha", "meta", "mastery"] as const).map((mode) => (
                     <button
                       key={`sort-${mode}`}
-                      className={`px-2 py-1 text-[11px] border rounded ${sortMode === mode ? "border-orange-300/80 bg-orange-500/10 text-orange-100" : "border-white/20 text-gray-200"}`}
+                      className={`px-2 py-1 text-xs border rounded ${sortMode === mode ? "border-orange-300/80 bg-orange-500/10 text-orange-100" : "border-white/20 text-gray-200"}`}
                       onClick={() => setSortMode(mode)}
                     >
                       {mode === "alpha" ? "A-Z" : mode === "meta" ? "META" : "MAST"}
@@ -2960,7 +2960,7 @@ export default function ChampionDraft({
                   {(["ALL", "S", "A", "B", "C", "D"] as const).map((tier) => (
                     <button
                       key={`tier-${tier}`}
-                      className={`px-2 py-1 text-[11px] border rounded ${metaTierFilter === tier ? "border-cyan-300/80 bg-cyan-400/10 text-cyan-100" : "border-white/20 text-gray-200"}`}
+                      className={`px-2 py-1 text-xs border rounded ${metaTierFilter === tier ? "border-cyan-300/80 bg-cyan-400/10 text-cyan-100" : "border-white/20 text-gray-200"}`}
                       onClick={() => setMetaTierFilter(tier)}
                     >
                       {tier}
@@ -2971,7 +2971,7 @@ export default function ChampionDraft({
                 <input
                   value={searchTerm}
                   onChange={(event) => setSearchTerm(event.target.value)}
-                  className="rounded-md bg-[#111318] border border-white/15 px-2 py-1 text-[11px] md:py-1.5 md:text-xs w-36 md:w-44"
+                  className="rounded-md bg-[#111318] border border-white/15 px-2 py-1 text-xs md:py-1.5 md:text-xs w-36 md:w-44"
                   placeholder={t("match.draft.searchPlaceholder")}
                 />
 
@@ -2999,7 +2999,7 @@ export default function ChampionDraft({
                   <button
                     type="button"
                     onClick={handleSkipDraftDebug}
-                    className="rounded-md border border-fuchsia-300/60 bg-fuchsia-500/15 hover:bg-fuchsia-500/25 text-fuchsia-100 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wide"
+                    className="rounded-md border border-fuchsia-300/60 bg-fuchsia-500/15 hover:bg-fuchsia-500/25 text-fuchsia-100 px-2 py-1 text-2xs font-heading font-bold uppercase tracking-wide"
                   >
                     Skip draft (debug)
                   </button>
@@ -3015,7 +3015,7 @@ export default function ChampionDraft({
 
               {!finished && isUserTurn ? (
                 <div className="relative flex items-center justify-between gap-2 rounded-md border border-white/12 bg-[#0c1018] px-2 py-1.5">
-                  <p className="text-[11px] text-gray-300 truncate">
+                  <p className="text-xs text-gray-300 truncate">
                     {pendingChampionId
                       ? `${t("match.draft.selected")}: ${championById.get(pendingChampionId)?.name ?? pendingChampionId}`
                       : t("match.draft.selectThenConfirm")}
@@ -3024,7 +3024,7 @@ export default function ChampionDraft({
                     type="button"
                     onClick={handleConfirmPendingAction}
                     disabled={!pendingChampionId}
-                    className="rounded-md bg-orange-500 hover:bg-orange-400 disabled:opacity-40 disabled:cursor-not-allowed text-navy-900 px-3 py-1 text-[11px] font-heading font-bold uppercase tracking-wide"
+                    className="rounded-md bg-orange-500 hover:bg-orange-400 disabled:opacity-40 disabled:cursor-not-allowed text-navy-900 px-3 py-1 text-xs font-heading font-bold uppercase tracking-wide"
                   >
                     {currentStep?.type === "ban"
                       ? t("match.draft.actions.ban")
@@ -3043,7 +3043,7 @@ export default function ChampionDraft({
                 ) : visibleChampions.length === 0 ? (
                   <p className="relative text-sm text-gray-300">{t("match.draft.noChampionsForFilters")}</p>
                 ) : (
-                  <div className="relative grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 xl:grid-cols-16 gap-1">
+                  <div className="relative grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 xl:grid-cols-10 2xl:grid-cols-20 gap-1">
                     {visibleChampions.map((champion) => {
                       const isUsed = usedChampionIds.has(champion.id);
                       const showMastery = roleFilter !== "ALL";
@@ -3068,12 +3068,12 @@ export default function ChampionDraft({
                             loading="lazy"
                           />
                           <p
-                            className={`px-1 py-0.5 text-[10px] font-semibold truncate border-t ${isUsed ? "bg-[#090a0d] border-white/5 text-gray-500" : "bg-[#0a0b0f] border-white/10"}`}
+                            className={`px-1 py-0.5 text-2xs font-semibold truncate border-t ${isUsed ? "bg-[#090a0d] border-white/5 text-gray-500" : "bg-[#0a0b0f] border-white/10"}`}
                           >
                             {champion.name}
                           </p>
                           <div className="px-1 pb-1">
-                            <div className="flex items-center justify-between text-[9px] font-bold">
+                            <div className="flex items-center justify-between text-2xs font-bold">
                               <span className={metaTier === "?" ? "text-gray-500" : metaTier === "S" ? "text-red-400" : metaTier === "A" ? "text-orange-300" : "text-slate-300"}>{metaTier}</span>
                               {showMastery ? <span className="text-gray-400">{mastery}</span> : null}
                             </div>
@@ -3094,16 +3094,16 @@ export default function ChampionDraft({
               </div>
             </div>
 
-            <aside className={`${isCompactLayout ? "flex" : "hidden xl:flex"} h-full flex-col rounded-md border border-cyan-400/25 bg-[#0a0b0f] p-2 min-h-0 overflow-y-auto scrollbar-draft pr-1`}>
+            <aside className={`${isCompactLayout ? "flex" : "hidden xl:flex"} lg:w-[280px] xl:w-[300px] h-full flex-col rounded-md border border-cyan-400/25 bg-[#0a0b0f] p-2 min-h-0 overflow-y-auto scrollbar-draft pr-1`}>
               {selectedChampionCounterIntel ? (
                 <>
-                  <p className="text-[11px] font-heading uppercase tracking-wide text-gray-200 mb-2 text-right">
+                  <p className="text-xs font-heading uppercase tracking-wide text-gray-200 mb-2 text-right">
                     {t("match.draft.counterIntelTitle", {
                       defaultValue: "Counter intel · {{champion}}",
                       champion: selectedChampionCounterIntel.selectedChampion.name,
                     })}
                   </p>
-                  <p className="text-[10px] text-cyan-200/80 mb-2 text-right">
+                  <p className="text-2xs text-cyan-200/80 mb-2 text-right">
                     {selectedChampionCounterIntel.consulted
                       ? t("match.draft.counterIntelScaleFull", {
                         defaultValue: "Consulta aplicada: vista completa de counters",
@@ -3122,7 +3122,7 @@ export default function ChampionDraft({
                         || counterConsultUsesLeft <= 0
                         || consultedCounterChampionIds.has(pendingChampionId)
                       }
-                      className="rounded-md border border-cyan-300/40 bg-cyan-500/10 hover:bg-cyan-500/20 disabled:opacity-40 disabled:cursor-not-allowed text-cyan-100 px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-wide"
+                      className="rounded-md border border-cyan-300/40 bg-cyan-500/10 hover:bg-cyan-500/20 disabled:opacity-40 disabled:cursor-not-allowed text-cyan-100 px-2 py-1 text-2xs font-heading font-bold uppercase tracking-wide"
                     >
                       {t("match.draft.counterIntelConsult", { defaultValue: "Consulta al staff" })}
                       {` (${counterConsultUsesLeft})`}
@@ -3130,11 +3130,11 @@ export default function ChampionDraft({
                   </div>
 
                   <div className="space-y-1.5">
-                    <p className="text-[10px] font-heading uppercase tracking-wide text-cyan-200">
+                    <p className="text-2xs font-heading uppercase tracking-wide text-cyan-200">
                       {t("match.draft.counterIntelPros", { defaultValue: "In your favor" })}
                     </p>
                     {selectedChampionCounterIntel.favorable.length === 0 ? (
-                      <div className="rounded-sm border border-white/10 bg-[#111318] p-2 text-[10px] text-gray-500 text-center">
+                      <div className="rounded-sm border border-white/10 bg-[#111318] p-2 text-2xs text-gray-500 text-center">
                         {t("match.draft.counterIntelNoPros", { defaultValue: "No clear favorable counters detected." })}
                       </div>
                     ) : null}
@@ -3146,23 +3146,23 @@ export default function ChampionDraft({
                         <div className="flex items-center gap-2">
                           <img src={row.champion.image} alt={row.champion.name} className="w-9 h-9 object-cover rounded-sm" loading="lazy" />
                           <div className="min-w-0 flex-1">
-                            <p className="text-[11px] truncate">{row.champion.name}</p>
-                            <p className={`text-[9px] uppercase tracking-wide ${row.isPicked ? "text-cyan-200" : "text-gray-400"}`}>
+                            <p className="text-xs truncate">{row.champion.name}</p>
+                            <p className={`text-2xs uppercase tracking-wide ${row.isPicked ? "text-cyan-200" : "text-gray-400"}`}>
                               {row.isPicked
                                 ? t("match.draft.counterIntelPicked", { defaultValue: "Already picked by rival" })
                                 : t("match.draft.counterIntelPotential", { defaultValue: "Potential rival pick" })}
                             </p>
                           </div>
-                          <p className="text-[11px] text-cyan-300 font-semibold">+{row.value}</p>
+                          <p className="text-xs text-cyan-300 font-semibold">+{row.value}</p>
                         </div>
                       </div>
                     ))}
 
-                    <p className="pt-1 text-[10px] font-heading uppercase tracking-wide text-orange-200">
+                    <p className="pt-1 text-2xs font-heading uppercase tracking-wide text-orange-200">
                       {t("match.draft.counterIntelCons", { defaultValue: "Against your pick" })}
                     </p>
                     {selectedChampionCounterIntel.risky.length === 0 ? (
-                      <div className="rounded-sm border border-white/10 bg-[#111318] p-2 text-[10px] text-gray-500 text-center">
+                      <div className="rounded-sm border border-white/10 bg-[#111318] p-2 text-2xs text-gray-500 text-center">
                         {t("match.draft.counterIntelNoCons", { defaultValue: "No immediate hard counters found." })}
                       </div>
                     ) : null}
@@ -3174,14 +3174,14 @@ export default function ChampionDraft({
                         <div className="flex items-center gap-2">
                           <img src={row.champion.image} alt={row.champion.name} className="w-9 h-9 object-cover rounded-sm" loading="lazy" />
                           <div className="min-w-0 flex-1">
-                            <p className="text-[11px] truncate">{row.champion.name}</p>
-                            <p className={`text-[9px] uppercase tracking-wide ${row.isPicked ? "text-orange-200" : "text-gray-400"}`}>
+                            <p className="text-xs truncate">{row.champion.name}</p>
+                            <p className={`text-2xs uppercase tracking-wide ${row.isPicked ? "text-orange-200" : "text-gray-400"}`}>
                               {row.isPicked
                                 ? t("match.draft.counterIntelPicked", { defaultValue: "Already picked by rival" })
                                 : t("match.draft.counterIntelPotential", { defaultValue: "Potential rival pick" })}
                             </p>
                           </div>
-                          <p className="text-[11px] text-orange-300 font-semibold">-{row.value}</p>
+                          <p className="text-xs text-orange-300 font-semibold">-{row.value}</p>
                         </div>
                       </div>
                     ))}
@@ -3189,12 +3189,12 @@ export default function ChampionDraft({
                 </>
               ) : (
                 <>
-                  <p className="text-[11px] font-heading uppercase tracking-wide text-gray-200 mb-2 text-right">
+                  <p className="text-xs font-heading uppercase tracking-wide text-gray-200 mb-2 text-right">
                     {t("match.draft.enemyComfortTitle")}
                   </p>
                   <div className="space-y-1">
                     {rivalMasteryDisplay.length === 0 ? (
-                      <div className="rounded-sm border border-white/10 bg-[#111318] p-2 text-[10px] text-gray-500 text-center">
+                      <div className="rounded-sm border border-white/10 bg-[#111318] p-2 text-2xs text-gray-500 text-center">
                         {t("match.draft.enemyComfortUnknown")}
                       </div>
                     ) : null}
@@ -3208,9 +3208,9 @@ export default function ChampionDraft({
                             loading="lazy"
                           />
                           <div className="min-w-0 flex-1">
-                            <p className="text-[11px] truncate">{champion.name}</p>
-                            <p className="text-[10px] text-gray-400 truncate">{playerName}</p>
-                            <p className="text-[9px] uppercase tracking-wide text-cyan-200/70 truncate">
+                            <p className="text-xs truncate">{champion.name}</p>
+                            <p className="text-2xs text-gray-400 truncate">{playerName}</p>
+                            <p className="text-2xs uppercase tracking-wide text-cyan-200/70 truncate">
                               {source === "insignia"
                                 ? t("match.draft.masterySourceSignature")
                                 : source === "scouting"
@@ -3221,7 +3221,7 @@ export default function ChampionDraft({
                               <div className="h-full bg-cyan-400" style={{ width: `${Math.min(100, mastery)}%` }} />
                             </div>
                           </div>
-                          <p className="text-[11px] text-cyan-300 font-semibold">{mastery}</p>
+                          <p className="text-xs text-cyan-300 font-semibold">{mastery}</p>
                         </div>
                       </div>
                     ))}
@@ -3312,7 +3312,7 @@ function DraftSlot({
         className={`absolute inset-y-0 ${side === "blue" ? "left-0 border-r border-r-cyan-300/40" : "right-0 border-l border-l-orange-400/45"} ${compact ? "w-5" : "w-8"} bg-black/65 border-white/25 z-20 flex items-center justify-center`}
       >
         <span
-          className={`${compact ? "text-[9px] tracking-[0.04em]" : "text-[13px] tracking-[0.09em]"} font-black uppercase text-white z-30 leading-none [writing-mode:vertical-rl] [text-shadow:0_0_10px_rgba(0,0,0,0.95)] ${side === "blue" ? "rotate-180" : ""}`}
+          className={`${compact ? "text-2xs tracking-[0.04em]" : "text-sm tracking-[0.09em]"} font-black uppercase text-white z-30 leading-none [writing-mode:vertical-rl] [text-shadow:0_0_10px_rgba(0,0,0,0.95)] ${side === "blue" ? "rotate-180" : ""}`}
         >
           {playerName}
         </span>
@@ -3332,7 +3332,7 @@ function DraftSlot({
               event.stopPropagation();
               onSwapArm();
             }}
-            className={`w-5 h-5 rounded border text-[10px] leading-none text-white ${swapArmed ? "bg-cyan-500/35 border-cyan-300/80" : "bg-black/65 border-white/25"}`}
+            className={`w-5 h-5 rounded border text-2xs leading-none text-white ${swapArmed ? "bg-cyan-500/35 border-cyan-300/80" : "bg-black/65 border-white/25"}`}
             title={t("match.draft.swapTargetTitle")}
           >
             ▲
@@ -3343,7 +3343,7 @@ function DraftSlot({
               event.stopPropagation();
               onSwapArm();
             }}
-            className={`w-5 h-5 rounded border text-[10px] leading-none text-white ${swapArmed ? "bg-cyan-500/35 border-cyan-300/80" : "bg-black/65 border-white/25"}`}
+            className={`w-5 h-5 rounded border text-2xs leading-none text-white ${swapArmed ? "bg-cyan-500/35 border-cyan-300/80" : "bg-black/65 border-white/25"}`}
             title={t("match.draft.swapTargetTitle")}
           >
             ▼
diff --git a/src/components/match/DraftResultScreen.tsx b/src/components/match/DraftResultScreen.tsx
index 0228fcc20..46833e9c0 100644
--- a/src/components/match/DraftResultScreen.tsx
+++ b/src/components/match/DraftResultScreen.tsx
@@ -352,7 +352,7 @@ export default function DraftResultScreen({
         <section className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_320px] gap-4">
           <aside className="space-y-4 order-2">
             <div className="rounded-xl border border-yellow-400/25 bg-[#0a1433] p-4">
-              <p className="text-[11px] uppercase tracking-[0.2em] text-yellow-300">{t("match.draftResult.bestOfMatch")}</p>
+              <p className="text-xs uppercase tracking-[0.2em] text-yellow-300">{t("match.draftResult.bestOfMatch")}</p>
               <div className="mt-3 flex items-center gap-3">
                 {mvpPhoto ? (
                   <img
@@ -378,7 +378,7 @@ export default function DraftResultScreen({
             {controlledPrepInsight ? (
               <div className="rounded-xl border border-emerald-400/25 bg-emerald-500/10 p-4">
                 <div className="flex items-center justify-between gap-3">
-                  <p className="text-[11px] uppercase tracking-[0.2em] text-emerald-200">
+                  <p className="text-xs uppercase tracking-[0.2em] text-emerald-200">
                     {t(controlledPrepInsight.title.key, { defaultValue: controlledPrepInsight.title.defaultValue })}
                   </p>
                   <span className="rounded-full border border-emerald-300/30 bg-emerald-300/10 px-2 py-0.5 text-xs font-bold text-emerald-100">
@@ -396,7 +396,7 @@ export default function DraftResultScreen({
                   {controlledPrepInsight.details.map((detail) => (
                     <span
                       key={detail.key}
-                      className="rounded-full border border-white/10 bg-black/20 px-2 py-1 text-[11px] text-emerald-100"
+                      className="rounded-full border border-white/10 bg-black/20 px-2 py-1 text-xs text-emerald-100"
                     >
                       {t(detail.key, {
                         ...detail.values,
@@ -412,18 +412,18 @@ export default function DraftResultScreen({
             <div className="overflow-hidden rounded-xl border border-cyan-400/25 bg-[#0a1433] p-4 shadow-[0_16px_40px_rgba(0,0,0,0.28)]">
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <p className="text-[11px] uppercase tracking-[0.2em] text-cyan-200">{t("match.draftResult.goldAdvantage")}</p>
+                  <p className="text-xs uppercase tracking-[0.2em] text-cyan-200">{t("match.draftResult.goldAdvantage")}</p>
                   <p className="mt-1 text-xs text-gray-400">
                     {t("match.draftResult.duration")}: {selectedResult.durationMinutes}m
                   </p>
-                  <p className="mt-1 text-[10px] font-bold uppercase tracking-[0.14em] text-gray-400" aria-label={goldAxisLabel}>
+                  <p className="mt-1 text-2xs font-bold uppercase tracking-[0.14em] text-gray-400" aria-label={goldAxisLabel}>
                     <span className="text-cyan-200">+ {blueTri}</span>
                     <span className="mx-1 text-gray-600">·</span>
                     <span className="text-orange-200">- {redTri}</span>
                   </p>
                 </div>
                 <div className={`rounded-lg border px-3 py-2 text-right ${leadingSide === "red" ? "border-orange-400/35 bg-orange-500/10" : leadingSide === "blue" ? "border-cyan-400/35 bg-cyan-500/10" : "border-white/15 bg-white/5"}`}>
-                  <p className="text-[10px] uppercase tracking-[0.18em] text-gray-400">{t("match.draftResult.finalGold")}</p>
+                  <p className="text-2xs uppercase tracking-[0.18em] text-gray-400">{t("match.draftResult.finalGold")}</p>
                   <p className={`font-heading text-lg font-black ${leadingSide === "red" ? "text-orange-200" : leadingSide === "blue" ? "text-cyan-200" : "text-gray-200"}`}>
                     {leadingTri ? `${leadingTri} +${formatGoldDiff(finalGoldDiff)}` : t("match.draftResult.evenGold")}
                   </p>
@@ -431,7 +431,7 @@ export default function DraftResultScreen({
               </div>
 
               <div className="mt-4 rounded-xl border border-white/10 bg-[#061126] p-3 shadow-inner shadow-black/30">
-                <div className="mb-2 flex items-center justify-between text-[10px] font-bold uppercase tracking-[0.18em]">
+                <div className="mb-2 flex items-center justify-between text-2xs font-bold uppercase tracking-[0.18em]">
                   <span className="text-cyan-200">{blueTri}</span>
                   <span className="text-gray-500">+{formatGoldDiff(maxAbsGold)}</span>
                 </div>
@@ -508,7 +508,7 @@ export default function DraftResultScreen({
                     />
                   ) : null}
                 </svg>
-                <div className="mt-1 flex items-center justify-between text-[10px] font-bold uppercase tracking-[0.18em]">
+                <div className="mt-1 flex items-center justify-between text-2xs font-bold uppercase tracking-[0.18em]">
                   <span className="text-gray-500">0m</span>
                   <span className="text-gray-500">-{formatGoldDiff(maxAbsGold)}</span>
                   <span className="text-orange-200">{redTri}</span>
@@ -517,13 +517,13 @@ export default function DraftResultScreen({
 
               <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                 <div className="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2">
-                  <p className="text-[10px] uppercase tracking-[0.16em] text-gray-500">{t("match.draftResult.peakGold")}</p>
+                  <p className="text-2xs uppercase tracking-[0.16em] text-gray-500">{t("match.draftResult.peakGold")}</p>
                   <p className={`mt-1 font-bold ${peakGoldDiff.diff < 0 ? "text-orange-200" : "text-cyan-200"}`}>
                     {(peakGoldDiff.diff < 0 ? redTri : blueTri)} +{formatGoldDiff(peakGoldDiff.diff)} · {peakGoldDiff.minute}m
                   </p>
                 </div>
                 <div className="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2">
-                  <p className="text-[10px] uppercase tracking-[0.16em] text-gray-500">{t("match.draftResult.goldScale")}</p>
+                  <p className="text-2xs uppercase tracking-[0.16em] text-gray-500">{t("match.draftResult.goldScale")}</p>
                   <p className="mt-1 font-bold text-gray-200">±{formatGoldDiff(maxAbsGold)}</p>
                 </div>
               </div>
@@ -570,7 +570,7 @@ export default function DraftResultScreen({
           <div className="flex flex-col gap-4">
             <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
               <div className="rounded-xl border border-cyan-400/25 bg-[#0a1433] p-4 self-start">
-                <p className="text-[11px] uppercase tracking-[0.2em] text-cyan-200 mb-3">{blueTri}</p>
+                <p className="text-xs uppercase tracking-[0.2em] text-cyan-200 mb-3">{blueTri}</p>
                 <div className="grid grid-cols-[1fr_auto_auto_auto] gap-x-3 gap-y-1 items-center">
                   {blueRows.map((row) => {
                     const icon = resolvePlayerPhoto(row.playerId, row.playerName);
@@ -592,9 +592,8 @@ export default function DraftResultScreen({
                   })}
                 </div>
               </div>
-
               <div className="rounded-xl border border-cyan-400/25 bg-[#0a1433] p-4 self-start">
-                <p className="text-[11px] uppercase tracking-[0.2em] text-cyan-200 mb-3">{redTri}</p>
+                <p className="text-xs uppercase tracking-[0.2em] text-cyan-200 mb-3">{redTri}</p>
                 <div className="grid grid-cols-[1fr_auto_auto_auto] gap-x-3 gap-y-1 items-center">
                   {redRows.map((row) => {
                     const icon = resolvePlayerPhoto(row.playerId, row.playerName);
@@ -618,13 +617,13 @@ export default function DraftResultScreen({
               </div>
             </div>
 
-          <section className="rounded-xl border border-cyan-400/25 bg-[#0a1433] p-4 flex-1 w-full flex flex-col">
-            <p className="text-sm uppercase tracking-[0.2em] text-cyan-200 mb-3 text-center">{t("match.draftResult.gameTimeline")}</p>
-            <div className="space-y-2 flex flex-col flex-1 overflow-hidden">
-              <div className="h-px bg-white/10 shrink-0" />
-              {renderTimeline()}
-            </div>
-          </section>
+            <section className="rounded-xl border border-cyan-400/25 bg-[#0a1433] p-4 flex-1 w-full flex flex-col">
+              <p className="text-sm uppercase tracking-[0.2em] text-cyan-200 mb-3 text-center">{t("match.draftResult.gameTimeline")}</p>
+              <div className="space-y-2 flex flex-col flex-1 overflow-hidden">
+                <div className="h-px bg-white/10 shrink-0" />
+                {renderTimeline()}
+              </div>
+            </section>
           </div>
         </section>
       </div>
diff --git a/src/components/match/HalfTimeBreak.tsx b/src/components/match/HalfTimeBreak.tsx
index a5565365a..91002ea3f 100644
--- a/src/components/match/HalfTimeBreak.tsx
+++ b/src/components/match/HalfTimeBreak.tsx
@@ -232,7 +232,7 @@ export default function HalfTimeBreak({
 
       {/* Main Content */}
       <div className="flex-1 overflow-auto">
-        <div className="max-w-5xl mx-auto px-6 py-6 grid grid-cols-3 gap-6">
+        <div className="w-[92%] max-w-[2000px] mx-auto px-6 py-6 grid grid-cols-3 gap-6">
           {/* Left: First Half Summary */}
           <div className="flex flex-col gap-4">
             <div className="bg-white dark:bg-navy-800 rounded-xl border border-gray-200 dark:border-navy-700 shadow-sm p-4 transition-colors duration-300">
@@ -314,7 +314,7 @@ export default function HalfTimeBreak({
                               >
                                 {opt.label}
                               </p>
-                              <p className="text-[11px] text-gray-500 dark:text-gray-400">
+                              <p className="text-xs text-gray-500 dark:text-gray-400">
                                 {opt.description}
                               </p>
                           </div>
diff --git a/src/components/match/LolLiveMap.tsx b/src/components/match/LolLiveMap.tsx
index b52a4b5ac..e6bb78fd5 100644
--- a/src/components/match/LolLiveMap.tsx
+++ b/src/components/match/LolLiveMap.tsx
@@ -166,7 +166,7 @@ export default function LolLiveMap({ snapshot, championSelections }: LolLiveMapP
                 title={`${label} · ${unit.role} · ${unit.task}`}
               >
                 <div
-                  className={`relative w-7 h-7 rounded-full border-2 text-[9px] font-heading font-bold flex items-center justify-center text-white ${
+                  className={`relative w-7 h-7 rounded-full border-2 text-2xs font-heading font-bold flex items-center justify-center text-white ${
                     isBlue
                       ? "bg-cyan-600 border-cyan-300 shadow-[0_0_10px_rgba(34,211,238,0.65)]"
                       : "bg-rose-600 border-rose-300 shadow-[0_0_10px_rgba(251,113,133,0.65)]"
@@ -179,7 +179,7 @@ export default function LolLiveMap({ snapshot, championSelections }: LolLiveMapP
                   )}
 
                   {!unit.alive ? (
-                    <span className="absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full bg-black/85 border border-white/20 text-[9px] leading-4 text-center text-white">
+                    <span className="absolute -top-1 -right-1 min-w-4 h-4 px-1 rounded-full bg-black/85 border border-white/20 text-2xs leading-4 text-center text-white">
                       {respawnLeft ?? "X"}
                     </span>
                   ) : null}
@@ -190,9 +190,9 @@ export default function LolLiveMap({ snapshot, championSelections }: LolLiveMapP
         </div>
 
         {snapshot.lol_map ? (
-          <div className="mt-2 grid grid-cols-2 gap-2 text-[11px] text-gray-700 dark:text-gray-300">
+          <div className="mt-2 grid grid-cols-2 gap-2 text-xs text-gray-700 dark:text-gray-300">
             <div className="rounded border border-gray-200 px-2 py-1 dark:border-navy-600">
-              <p className="font-heading uppercase tracking-wider text-[10px] text-gray-500 dark:text-gray-400">{t("match.liveMap.dragon")}</p>
+              <p className="font-heading uppercase tracking-wider text-2xs text-gray-500 dark:text-gray-400">{t("match.liveMap.dragon")}</p>
               <p>
                 {snapshot.lol_map.objectives.dragon.alive
                   ? t("match.liveMap.aliveWithKind", {
@@ -204,7 +204,7 @@ export default function LolLiveMap({ snapshot, championSelections }: LolLiveMapP
               </p>
             </div>
             <div className="rounded border border-gray-200 px-2 py-1 dark:border-navy-600">
-              <p className="font-heading uppercase tracking-wider text-[10px] text-gray-500 dark:text-gray-400">{t("match.liveMap.baron")}</p>
+              <p className="font-heading uppercase tracking-wider text-2xs text-gray-500 dark:text-gray-400">{t("match.liveMap.baron")}</p>
               <p>
                 {snapshot.lol_map.objectives.baron.alive
                   ? t("match.liveMap.alive")
diff --git a/src/components/match/LolMatchLive.tsx b/src/components/match/LolMatchLive.tsx
index e7c92ec8b..4185bd351 100644
--- a/src/components/match/LolMatchLive.tsx
+++ b/src/components/match/LolMatchLive.tsx
@@ -997,10 +997,10 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
                   {blueBrand.logo ? <img src={blueBrand.logo} className="h-9 w-9 object-contain" alt={`${snapshot.home_team.name} logo`} loading="lazy" /> : null}
                 </div>
                 <div className="flex flex-col leading-[0.9]">
-                  <span className="text-[22px] font-black tracking-[-1px] text-[#00fcdb] sm:text-[34px]">{blueBrand.tag || blueTag}</span>
-                  <span className="text-[13px] font-bold text-white/55">{t("match.live")}</span>
+                  <span className="text-xl font-black tracking-[-1px] text-[#00fcdb] sm:text-4xl">{blueBrand.tag || blueTag}</span>
+                  <span className="text-sm font-bold text-white/55">{t("match.live")}</span>
                 </div>
-                <div className="ml-4 flex items-center gap-2 text-[16px] font-bold italic text-white sm:ml-7 sm:text-[24px]">
+                <div className="ml-4 flex items-center gap-2 text-base font-bold italic text-white sm:ml-7 sm:text-2xl">
                   <img src={ICON_TOWER} className="h-5 w-5 object-contain opacity-90" alt={t("match.liveA11y.towerIcon")} loading="lazy" />
                   <span>{blueTowers}</span>
                   <img src={ICON_GOLD} className="ml-2 h-5 w-5 object-contain" alt={t("match.liveA11y.goldIcon")} loading="lazy" />
@@ -1009,21 +1009,21 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
               </div>
 
               <div className="flex w-[24%] items-center justify-center gap-4">
-                <span className="text-[34px] font-black italic leading-none text-white sm:text-[48px]">{blueKills}</span>
+                <span className="text-4xl font-black italic leading-none text-white sm:text-5xl">{blueKills}</span>
                 <img src={ICON_LEC} className="h-7 w-7 object-contain opacity-95" alt={t("match.liveA11y.lecLogo")} loading="lazy" />
-                <span className="text-[34px] font-black italic leading-none text-white sm:text-[48px]">{redKills}</span>
+                <span className="text-4xl font-black italic leading-none text-white sm:text-5xl">{redKills}</span>
               </div>
 
               <div className="flex w-[38%] items-center justify-end px-4 text-right">
-                <div className="mr-4 flex items-center gap-2 text-[16px] font-bold italic text-white sm:mr-5 sm:text-[24px]">
+                <div className="mr-4 flex items-center gap-2 text-base font-bold italic text-white sm:mr-5 sm:text-2xl">
                   <span>{redGold}</span>
                   <img src={ICON_GOLD} className="h-5 w-5 object-contain" alt={t("match.liveA11y.goldIcon")} loading="lazy" />
                   <span className="ml-2">{redTowers}</span>
                   <img src={ICON_TOWER} className="h-5 w-5 object-contain opacity-90" alt={t("match.liveA11y.towerIcon")} loading="lazy" />
                 </div>
                 <div className="flex flex-col leading-[0.9]">
-                  <span className="text-[22px] font-black tracking-[-1px] text-[#ff4e00] sm:text-[34px]">{redBrand.tag || redTag}</span>
-                  <span className="text-[13px] font-bold text-white/55">{t("match.live")}</span>
+                  <span className="text-xl font-black tracking-[-1px] text-[#ff4e00] sm:text-4xl">{redBrand.tag || redTag}</span>
+                  <span className="text-sm font-bold text-white/55">{t("match.live")}</span>
                 </div>
                 <div className="ml-3 flex h-[42px] w-[42px] items-center justify-center border border-white/20 bg-white/5">
                   {redBrand.logo ? <img src={redBrand.logo} className="h-9 w-9 object-contain" alt={`${snapshot.away_team.name} logo`} loading="lazy" /> : null}
@@ -1041,16 +1041,16 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
                     <img key={`blue-dragon-${idx}`} src={iconSrc} className="h-[22px] w-[22px] object-contain" alt={t("match.liveA11y.dragonIcon")} loading="lazy" />
                   ))
                   : <img src={dragonIcon} className="h-[22px] w-[22px] object-contain opacity-35" alt={t("match.liveA11y.dragonIcon")} loading="lazy" />}
-                <div className="flex items-center gap-1 text-[20px] font-bold text-white/70">
+                <div className="flex items-center gap-1 text-xl font-bold text-white/70">
                   <img src={ICON_VOIDGRUB} className="h-4 w-4 object-contain" alt={t("match.liveA11y.voidgrubIcon")} loading="lazy" />
                   <span>{blueVoidgrubs}</span>
                 </div>
               </div>
 
-              <div className="text-[24px] font-black italic tracking-[1px] text-white sm:text-[32px]">{clock}</div>
+              <div className="text-2xl font-black italic tracking-[1px] text-white sm:text-[32px]">{clock}</div>
 
               <div className="flex items-center gap-2">
-                <div className="flex items-center gap-1 text-[20px] font-bold text-white/70">
+                <div className="flex items-center gap-1 text-xl font-bold text-white/70">
                   <span>{redVoidgrubs}</span>
                   <img src={ICON_VOIDGRUB} className="h-4 w-4 object-contain" alt={t("match.liveA11y.voidgrubIcon")} loading="lazy" />
                 </div>
@@ -1078,15 +1078,15 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
                           <div className="h-[36px] w-[36px] overflow-hidden rounded-[3px] border border-white/25 bg-black/45">
                             {entry.killerIcon
                               ? <img src={entry.killerIcon} className="h-full w-full object-cover" alt={t("match.liveA11y.killerIcon")} loading="lazy" />
-                              : <div className={`flex h-full w-full items-center justify-center text-[11px] font-bold ${entry.side === "red" ? "bg-[#22151a] text-red-200" : "bg-[#151a26] text-cyan-200"}`}>{actorInitials(entry.killerLabel, "K")}</div>}
+                              : <div className={`flex h-full w-full items-center justify-center text-xs font-bold ${entry.side === "red" ? "bg-[#22151a] text-red-200" : "bg-[#151a26] text-cyan-200"}`}>{actorInitials(entry.killerLabel, "K")}</div>}
                           </div>
-                          <div className={`flex h-[26px] w-[26px] items-center justify-center rounded-[3px] border text-[13px] ${entry.side === "red" ? "border-red-400/40 bg-red-500/10 text-red-200" : "border-cyan-400/40 bg-cyan-500/10 text-cyan-200"}`}>⚔</div>
+                          <div className={`flex h-[26px] w-[26px] items-center justify-center rounded-[3px] border text-sm ${entry.side === "red" ? "border-red-400/40 bg-red-500/10 text-red-200" : "border-cyan-400/40 bg-cyan-500/10 text-cyan-200"}`}>⚔</div>
                           <div className="h-[36px] w-[36px] overflow-hidden rounded-[3px] border border-white/25 bg-black/45">
                             {entry.victimIcon
                               ? <img src={entry.victimIcon} className="h-full w-full object-cover" alt={t("match.liveA11y.victimIcon")} loading="lazy" />
-                              : <div className={`flex h-full w-full items-center justify-center text-[11px] font-bold ${entry.side === "red" ? "bg-[#22151a] text-red-200" : "bg-[#151a26] text-cyan-200"}`}>{actorInitials(entry.victimLabel, "V")}</div>}
+                              : <div className={`flex h-full w-full items-center justify-center text-xs font-bold ${entry.side === "red" ? "bg-[#22151a] text-red-200" : "bg-[#151a26] text-cyan-200"}`}>{actorInitials(entry.victimLabel, "V")}</div>}
                           </div>
-                          <span className="ml-auto text-[11px] font-bold text-white/75">{entry.minute}'</span>
+                          <span className="ml-auto text-xs font-bold text-white/75">{entry.minute}'</span>
                         </div>
                       ) : (
                         <div className="flex items-center gap-[7px]">
@@ -1096,16 +1096,16 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
                               : null}
                           </div>
                           <div className="flex min-w-0 flex-1 flex-col">
-                            <span className={`truncate text-[10px] font-semibold uppercase tracking-[0.5px] ${entry.side === "red" ? "text-red-200" : "text-cyan-200"}`}>{entry.type}</span>
-                            <span className="truncate text-[10px] text-white/75">{entry.text}</span>
+                            <span className={`truncate text-2xs font-semibold uppercase tracking-[0.5px] ${entry.side === "red" ? "text-red-200" : "text-cyan-200"}`}>{entry.type}</span>
+                            <span className="truncate text-2xs text-white/75">{entry.text}</span>
                           </div>
-                          <span className="text-[11px] font-bold text-white/75">{entry.minute}'</span>
+                          <span className="text-xs font-bold text-white/75">{entry.minute}'</span>
                         </div>
                       )}
                       <div className={`mt-[5px] h-[2px] w-full bg-gradient-to-r ${entry.side === "red" ? "from-red-500/40 via-red-300 to-red-500/40" : "from-cyan-500/40 via-cyan-300 to-cyan-500/40"}`} />
                     </div>
                   )) : (
-                    <div className="rounded-[4px] border border-cyan-500/30 bg-black/75 px-2 py-1 text-[10px] text-white/65">
+                    <div className="rounded-[4px] border border-cyan-500/30 bg-black/75 px-2 py-1 text-2xs text-white/65">
                       {t("match.waitingFirstSkirmish")}
                     </div>
                   )}
@@ -1122,10 +1122,10 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
 
             <div className="w-full max-w-[260px] lg:w-[246px]">
               <div className="rounded border border-cyan-500/30 bg-black/70 p-2">
-                <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.6px] text-cyan-200/90">
+                <div className="mb-2 text-2xs font-semibold uppercase tracking-[0.6px] text-cyan-200/90">
                   {t("match.liveControls")}
                 </div>
-                <div className="grid grid-cols-2 gap-1 text-[10px]">
+                <div className="grid grid-cols-2 gap-1 text-2xs">
                   <button className="rounded border border-cyan-500/30 bg-black/60 px-2 py-1 text-white/90" onClick={() => setRunning((v) => !v)}>
                     {running ? t("match.pause") : t("match.play")}
                   </button>
@@ -1165,10 +1165,10 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
       {skipWarningOpen && !isSkipping ? (
         <div className="absolute inset-0 z-[60] flex items-center justify-center bg-black/55">
           <div className="w-[min(92vw,520px)] rounded border border-red-500/45 bg-[linear-gradient(180deg,rgba(44,8,10,0.95)_0%,rgba(24,5,6,0.95)_100%)] p-4 shadow-[0_18px_44px_rgba(0,0,0,0.6)]">
-            <h3 className="text-[15px] font-bold uppercase tracking-[0.5px] text-red-200">
+            <h3 className="text-sm font-bold uppercase tracking-[0.5px] text-red-200">
               {t("match.skipWarningTitle")}
             </h3>
-            <p className="mt-2 text-[13px] text-red-100/90">
+            <p className="mt-2 text-sm text-red-100/90">
               {t(
                 "match.skipWarningBody",
                 "Skip Match now re-simulates from minute 0. You will lose all progress from this live match.",
@@ -1176,13 +1176,13 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
             </p>
             <div className="mt-4 flex items-center justify-end gap-2">
               <button
-                className="rounded border border-white/20 bg-black/45 px-3 py-1.5 text-[12px] text-white/85"
+                className="rounded border border-white/20 bg-black/45 px-3 py-1.5 text-xs text-white/85"
                 onClick={() => setSkipWarningOpen(false)}
               >
                 {t("match.cancel")}
               </button>
               <button
-                className="rounded border border-red-400/50 bg-red-600/25 px-3 py-1.5 text-[12px] font-semibold text-red-100"
+                className="rounded border border-red-400/50 bg-red-600/25 px-3 py-1.5 text-xs font-semibold text-red-100"
                 onClick={() => {
                   void handleSkipMatch();
                 }}
@@ -1197,7 +1197,7 @@ export default function LolMatchLive({ gameState, snapshot, championSelections,
       {isSkipping ? (
         <div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[1px]">
           <div className="flex flex-col items-center rounded border border-cyan-500/40 bg-black/75 px-6 py-4 shadow-[0_14px_35px_rgba(0,0,0,0.55)]">
-            <span className="text-[17px] font-semibold tracking-[0.4px] text-cyan-100">
+            <span className="text-base font-semibold tracking-[0.4px] text-cyan-100">
               {t("match.clearingBattlefield")}
             </span>
             <div className="mt-3 h-8 w-8 animate-spin rounded-full border-2 border-cyan-300/35 border-t-cyan-200" />
diff --git a/src/components/match/LolResultScreen.tsx b/src/components/match/LolResultScreen.tsx
index 727b54c2b..ba11d26c7 100644
--- a/src/components/match/LolResultScreen.tsx
+++ b/src/components/match/LolResultScreen.tsx
@@ -250,7 +250,7 @@ export default function LolResultScreen({
 
   return (
     <div className="min-h-screen bg-[#0b1631] text-white p-4 md:p-6" style={{ backgroundImage: "radial-gradient(circle at 20% 15%, rgba(59,130,246,0.12), transparent 35%), radial-gradient(circle at 85% 15%, rgba(236,72,153,0.12), transparent 35%)" }}>
-      <div className="max-w-6xl mx-auto space-y-4">
+      <div className="w-[92%] max-w-[2000px] mx-auto space-y-4">
         <header className="rounded-2xl border border-cyan-400/20 bg-[#12274c]/95 px-6 py-5 text-center shadow-[0_10px_30px_rgba(0,0,0,0.35)]">
           <p className="text-xs uppercase tracking-[0.28em] text-slate-400">{t("match.matchOver")}</p>
           <h1 className={`mt-1 text-5xl font-heading uppercase ${userWon ? "text-emerald-400" : "text-rose-400"}`}>
@@ -303,7 +303,7 @@ export default function LolResultScreen({
 
         <section className="grid grid-cols-1 xl:grid-cols-[1.25fr_0.9fr] gap-4">
           <div className="rounded-2xl border border-cyan-400/15 bg-[#12274c]/90 p-4">
-            <p className="text-[11px] uppercase tracking-[0.22em] text-slate-400 mb-3">
+            <p className="text-xs uppercase tracking-[0.22em] text-slate-400 mb-3">
               {t("match.lolResult.performanceHeader")}
             </p>
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
@@ -335,7 +335,7 @@ export default function LolResultScreen({
           </div>
 
           <div className="rounded-2xl border border-white/10 bg-[#12274c]/90 p-4">
-            <p className="text-[11px] uppercase tracking-[0.22em] text-slate-400 mb-3">
+            <p className="text-xs uppercase tracking-[0.22em] text-slate-400 mb-3">
               {t("match.lolResult.teamStats")}
             </p>
             <div className="space-y-2 text-sm">
@@ -353,7 +353,7 @@ export default function LolResultScreen({
         </section>
 
         <section className="rounded-2xl border border-white/10 bg-[#12274c]/90 p-4">
-          <p className="text-[11px] uppercase tracking-[0.22em] text-slate-400 mb-3">
+          <p className="text-xs uppercase tracking-[0.22em] text-slate-400 mb-3">
             {t("match.lolResult.goldDiffOverTime")}
           </p>
           <div className="h-40 rounded-xl border border-white/10 bg-[#0b1835] p-3">
@@ -389,7 +389,7 @@ export default function LolResultScreen({
         </section>
 
         <section className="rounded-2xl border border-white/10 bg-[#12274c]/90 p-4">
-          <p className="text-[11px] uppercase tracking-[0.22em] text-slate-400 mb-2">
+          <p className="text-xs uppercase tracking-[0.22em] text-slate-400 mb-2">
             {t("match.lolResult.keyTimeline")}
           </p>
           <div className="space-y-1 max-h-52 overflow-auto pr-1">
diff --git a/src/components/match/MatchLive.tsx b/src/components/match/MatchLive.tsx
index b3f62e030..d95ebcc68 100644
--- a/src/components/match/MatchLive.tsx
+++ b/src/components/match/MatchLive.tsx
@@ -301,7 +301,7 @@ export default function MatchLive({
                   }`}
                 >
                   {s.icon}
-                  <span className="text-[10px]">{s.label}</span>
+                  <span className="text-2xs">{s.label}</span>
                 </button>
               ))}
             </div>
@@ -328,7 +328,20 @@ export default function MatchLive({
                 {t('match.subs')} ({userSide === "Home" ? snapshot.home_subs_made : snapshot.away_subs_made}/{snapshot.max_subs})
               </button>
               <div>
-                <p className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">{t('match.draftStrategy')}</p>
+                <p className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">{t('match.formation')}</p>
+                <div className="flex flex-wrap gap-1">
+                  {["4-4-2", "4-3-3", "3-5-2", "4-5-1", "4-2-3-1", "3-4-3"].map(f => {
+                    const cur = userSide === "Home" ? snapshot.home_team.formation : snapshot.away_team.formation;
+                    return (
+                      <button key={f} onClick={() => handleFormationChange(f)}
+                        className={`px-2 py-1 rounded text-xs font-heading transition-colors ${cur === f ? "bg-primary-500/20 text-primary-500 dark:text-primary-400 ring-1 ring-primary-500/50" : "bg-gray-100 text-gray-600 hover:text-gray-900 dark:bg-navy-700 dark:text-gray-400 dark:hover:text-gray-300"}`}
+                      >{f}</button>
+                    );
+                  })}
+                </div>
+              </div>
+              <div>
+                <p className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">{t('match.playStyle')}</p>
                 <div className="flex flex-wrap gap-1">
                   {[
                     { id: "Balanced", icon: <Target className="w-3 h-3" /> },
diff --git a/src/components/match/MatchPanels.tsx b/src/components/match/MatchPanels.tsx
index a123078fd..d0cc4e6ff 100644
--- a/src/components/match/MatchPanels.tsx
+++ b/src/components/match/MatchPanels.tsx
@@ -139,7 +139,7 @@ export function MatchStats({ snapshot }: { snapshot: MatchSnapshot }) {
               <span className="font-heading font-bold text-primary-400 tabular-nums">
                 {stat.home}
               </span>
-                <span className="text-gray-500 dark:text-gray-400 font-heading uppercase tracking-wider text-[10px]">
+                <span className="text-gray-500 dark:text-gray-400 font-heading uppercase tracking-wider text-2xs">
                 {stat.label}
               </span>
               <span className="font-heading font-bold text-indigo-400 tabular-nums">
@@ -195,7 +195,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
           if (players.length === 0) return null;
           return (
             <div key={pos} className="mb-3">
-              <p className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">
+              <p className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">
                 {pos}s
               </p>
               {players.map((p) => {
@@ -214,7 +214,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
                     className={`flex items-center gap-2 py-1 px-2 rounded text-xs ${isOff ? "opacity-40" : ""}`}
                   >
                     {isSubOn && (
-                      <span className="text-green-400 text-[10px]">▲</span>
+                      <span className="text-green-400 text-2xs">▲</span>
                     )}
                     <span
                        className={`font-medium flex-1 truncate ${isOff ? "line-through text-gray-600 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`}
@@ -222,7 +222,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
                       {p.name}
                     </span>
                     {yc > 0 && (
-                      <span className="w-3 h-4 rounded-sm bg-yellow-400 text-navy-900 text-[8px] flex items-center justify-center font-bold">
+                      <span className="w-3 h-4 rounded-sm bg-yellow-400 text-navy-900 text-2xs flex items-center justify-center font-bold">
                         {yc > 1 ? yc : ""}
                       </span>
                     )}
@@ -236,7 +236,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
                           style={{ width: `${p.condition}%` }}
                         />
                       </div>
-                       <span className="text-gray-500 dark:text-gray-400 tabular-nums text-[10px] w-6 text-right">
+                       <span className="text-gray-500 dark:text-gray-400 tabular-nums text-2xs w-6 text-right">
                         {Math.round(p.condition)}
                       </span>
                     </div>
@@ -250,7 +250,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
         {/* Bench */}
         {bench.length > 0 && (
            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-navy-700">
-             <p className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">
+             <p className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">
               {t("match.bench")}
             </p>
             {bench.map((p) => {
@@ -261,7 +261,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
                   className={`flex items-center gap-2 py-1 px-2 rounded text-xs ${wasSubbedOff ? "opacity-50" : ""}`}
                 >
                   {wasSubbedOff && (
-                    <span className="text-red-400 text-[10px]">▼</span>
+                    <span className="text-red-400 text-2xs">▼</span>
                   )}
                    <span className="text-gray-600 dark:text-gray-400 font-medium flex-1 truncate">
                     {p.name}
@@ -269,7 +269,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
                   <Badge variant="neutral" size="sm">
                     {translatePositionAbbreviation(t, p.role ?? "")}
                   </Badge>
-                   <span className="text-gray-500 dark:text-gray-400 tabular-nums text-[10px] w-6 text-right">
+                   <span className="text-gray-500 dark:text-gray-400 tabular-nums text-2xs w-6 text-right">
                     {Math.round(p.condition)}
                   </span>
                 </div>
@@ -281,7 +281,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
         {/* Sub History */}
         {snapshot.substitutions.filter((s) => s.side === side).length > 0 && (
            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-navy-700">
-             <p className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">
+             <p className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1">
               {t("match.substitutions")}
             </p>
             {snapshot.substitutions
@@ -289,7 +289,7 @@ export function Lineups({ snapshot }: { snapshot: MatchSnapshot }) {
               .map((sub, i) => (
                 <div
                   key={i}
-                  className="flex items-center gap-1.5 py-0.5 text-[11px]"
+                  className="flex items-center gap-1.5 py-0.5 text-xs"
                 >
                    <span className="text-gray-600 dark:text-gray-500 tabular-nums w-5 text-right font-heading">
                     {sub.minute}'
diff --git a/src/components/match/PostMatchHelpers.tsx b/src/components/match/PostMatchHelpers.tsx
index 67e59b674..ee9635ce1 100644
--- a/src/components/match/PostMatchHelpers.tsx
+++ b/src/components/match/PostMatchHelpers.tsx
@@ -31,7 +31,7 @@ export function QuickStat({
         <span className="font-heading font-bold text-primary-400 tabular-nums">
           {home}
         </span>
-        <span className="text-gray-600 dark:text-gray-500 font-heading uppercase tracking-wider text-[10px]">
+        <span className="text-gray-600 dark:text-gray-500 font-heading uppercase tracking-wider text-2xs">
           {label}
         </span>
         <span className="font-heading font-bold text-indigo-400 tabular-nums">
@@ -69,7 +69,7 @@ export function renderScorers(
   return (
     <div className="mb-3 last:mb-0">
       <p
-        className={`text-[10px] font-heading uppercase tracking-widest mb-1 ${
+        className={`text-2xs font-heading uppercase tracking-widest mb-1 ${
           side === "Home" ? "text-primary-400" : "text-indigo-400"
         }`}
       >
@@ -213,7 +213,7 @@ export function PlayerRatingsPanel({
               {p.rating.toFixed(1)}
             </span>
             <span className="text-gray-600 dark:text-gray-400 truncate flex-1">{p.name}</span>
-            <span className="text-gray-600 dark:text-gray-500 text-[10px] font-heading uppercase">
+            <span className="text-gray-600 dark:text-gray-500 text-2xs font-heading uppercase">
               {translatePositionAbbreviation(t, p.role ?? "")}
             </span>
           </div>
diff --git a/src/components/match/PostMatchScreen.tsx b/src/components/match/PostMatchScreen.tsx
index 20ea85af1..a3cdef989 100644
--- a/src/components/match/PostMatchScreen.tsx
+++ b/src/components/match/PostMatchScreen.tsx
@@ -372,7 +372,7 @@ export default function PostMatchScreen({
 
       {/* Main Content */}
       <div className="flex-1 overflow-auto">
-        <div className="max-w-5xl mx-auto px-6 py-6 grid grid-cols-3 gap-6">
+        <div className="w-[92%] max-w-[2000px] mx-auto px-6 py-6 grid grid-cols-3 gap-6">
           {/* Left: Match Events */}
           <div className="flex flex-col gap-4">
             <div className="bg-white dark:bg-navy-800 rounded-xl border border-gray-200 dark:border-navy-700 shadow-sm p-4 transition-colors duration-300">
@@ -483,19 +483,19 @@ export default function PostMatchScreen({
                                         entry.fixture.id,
                                       )
                                     }
-                                    className="shrink-0 rounded-md px-2 py-1 text-[10px] font-heading font-bold uppercase tracking-widest text-accent-400 hover:bg-gray-200 dark:hover:bg-navy-600/60 transition-colors"
+                                    className="shrink-0 rounded-md px-2 py-1 text-2xs font-heading font-bold uppercase tracking-widest text-accent-400 hover:bg-gray-200 dark:hover:bg-navy-600/60 transition-colors"
                                   >
                                     {t("match.viewDetails")}
                                   </button>
                                 )}
                               </div>
                               {scorerSummary && (
-                                <p className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                   {scorerSummary}
                                 </p>
                               )}
                               {statSummary && (
-                                <p className="mt-1 text-[10px] uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                                <p className="mt-1 text-2xs uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                   {statSummary}
                                 </p>
                               )}
@@ -511,7 +511,7 @@ export default function PostMatchScreen({
                   {isLeagueFixture && roundSummary && (
                     <>
                       <div>
-                        <p className="text-[10px] font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-2">
+                        <p className="text-2xs font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-2">
                           {t("home.leagueTable")}
                         </p>
                         <div className="flex flex-col gap-1 text-xs">
@@ -534,7 +534,7 @@ export default function PostMatchScreen({
                       </div>
 
                       <div>
-                        <p className="text-[10px] font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-2">
+                        <p className="text-2xs font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400 mb-2">
                           {t("home.topScorers")}
                         </p>
                         <div className="flex flex-col gap-1 text-xs">
@@ -623,7 +623,7 @@ export default function PostMatchScreen({
                                   <Star className="w-3 h-3 text-accent-400" />
                                 )}
                               </div>
-                              <p className="text-[11px] text-gray-500 dark:text-gray-400">
+                              <p className="text-xs text-gray-500 dark:text-gray-400">
                                 {opt.description}
                               </p>
                             </div>
diff --git a/src/components/match/PreMatchLineup.tsx b/src/components/match/PreMatchLineup.tsx
index 26aeaa6fa..b745b6abd 100644
--- a/src/components/match/PreMatchLineup.tsx
+++ b/src/components/match/PreMatchLineup.tsx
@@ -355,8 +355,8 @@ export default function PreMatchLineup({
       {/* Formation fit bar */}
       <div className="bg-white dark:bg-navy-800 rounded-xl border border-gray-200 dark:border-navy-700 shadow-sm p-3 flex items-center justify-between transition-colors duration-300">
         <div className="flex items-center gap-4">
-          <span className="text-[10px] font-heading uppercase tracking-widest text-gray-700 dark:text-gray-500">
-            {t("match.roleCoverage")}
+          <span className="text-2xs font-heading uppercase tracking-widest text-gray-700 dark:text-gray-500">
+            {t("match.formationFit")}
           </span>
           {LOL_ROLE_ORDER.map((role) => {
             const homeCount = homeTeam.players.filter((p) => getPlayerLolRole(p) === role).length;
@@ -365,7 +365,7 @@ export default function PreMatchLineup({
             const ok = actual === 1;
             return (
               <div key={role} className="flex items-center gap-1">
-                <span className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-400">
+                <span className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-400">
                   {role === "JUNGLE" ? "JG" : role}
                 </span>
                 <span
diff --git a/src/components/match/PreMatchSetup.tsx b/src/components/match/PreMatchSetup.tsx
index c72247bb7..fc95a1e28 100644
--- a/src/components/match/PreMatchSetup.tsx
+++ b/src/components/match/PreMatchSetup.tsx
@@ -272,7 +272,7 @@ export default function PreMatchSetup({
         </>
       }
     >
-      <div className="max-w-5xl mx-auto px-6 py-6 flex flex-col gap-6">
+      <div className="w-[92%] max-w-[2000px] mx-auto px-6 py-6 flex flex-col gap-6">
         <PreMatchLineup
           homeTeam={snapshot.home_team}
           homeBench={snapshot.home_bench || []}
diff --git a/src/components/match/SubPanel.tsx b/src/components/match/SubPanel.tsx
index 8bb0913c6..4ce78b2c8 100644
--- a/src/components/match/SubPanel.tsx
+++ b/src/components/match/SubPanel.tsx
@@ -142,7 +142,7 @@ export function SubPanel({
       onClick={onClose}
     >
       <div
-        className="bg-white dark:bg-navy-800 rounded-2xl border border-gray-200 dark:border-navy-600 shadow-2xl w-[1100px] max-h-[90vh] flex flex-col overflow-hidden transition-colors duration-300"
+        className="bg-white dark:bg-navy-800 rounded-2xl border border-gray-200 dark:border-navy-600 shadow-2xl max-w-[1100px] w-[95vw] max-h-[90vh] flex flex-col overflow-hidden transition-colors duration-300"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
@@ -214,7 +214,7 @@ export function SubPanel({
                             className={`flex flex-col items-center gap-0.5 transition-all cursor-pointer hover:scale-110 ${isSelected ? "scale-110" : ""}`}
                           >
                             <div
-                              className={`w-8 h-8 rounded-full flex items-center justify-center text-[9px] font-heading font-bold border-2 transition-all ${
+                              className={`w-8 h-8 rounded-full flex items-center justify-center text-2xs font-heading font-bold border-2 transition-all ${
                                 isSelected
                                   ? "bg-red-500/80 border-red-300 text-white ring-2 ring-red-500/50"
                                   : p.condition < 50
@@ -224,7 +224,7 @@ export function SubPanel({
                             >
                               {Math.round(p.condition)}
                             </div>
-                             <span className="text-[9px] text-gray-700 dark:text-white/70 font-medium truncate max-w-[56px]">
+                             <span className="text-2xs text-gray-700 dark:text-white/70 font-medium truncate max-w-[56px]">
                               {p.name.split(" ").pop()}
                             </span>
                           </button>
@@ -237,98 +237,99 @@ export function SubPanel({
 
               {/* On-field player table */}
               <div className="flex-1 overflow-auto px-4 py-2">
-                <table className="w-full text-left">
-                  <thead>
-                    <tr className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 border-b border-gray-200 dark:border-navy-700">
-                      <th className="py-2 pr-2">{t("match.player")}</th>
-                      <th className="py-2 w-12 text-center">
-                        {t("common.position")}
-                      </th>
-                      <th className="py-2 w-12 text-center">
-                        {t("common.ovr")}
-                      </th>
-                      <th className="py-2 w-24">{t("match.fitness")}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {team.players
-                      .filter((p) => !snapshot.sent_off.includes(p.id))
-                      .sort((a, b) => {
-                        const posOrd: Record<string, number> = {
-                          Goalkeeper: 1,
-                          Defender: 2,
-                          Midfielder: 3,
-                          Forward: 4,
-                        };
-                        return (
-                          (posOrd[a.role ?? ""] || 99) -
-                            (posOrd[b.role ?? ""] || 99) ||
-                          a.name.localeCompare(b.name)
-                        );
-                      })
-                      .map((p) => {
-                        const isSelected = selectedOff === p.id;
-                        const isSubOn = subbedOnIds.has(p.id);
-                        const ovr = getOvr(p);
-                        return (
-                          <tr
-                            key={p.id}
-                            onClick={() => {
-                              handleSelectOffPlayer(p.id);
-                            }}
-                            className={`cursor-pointer transition-colors text-sm ${
-                              isSelected
-                                ? "bg-red-500/10"
-                                 : "hover:bg-gray-100 dark:hover:bg-navy-700/50"
-                            }`}
-                          >
-                            <td className="py-2 pr-2">
-                              <div className="flex items-center gap-1.5">
-                                {isSelected && (
-                                  <UserMinus className="w-3.5 h-3.5 text-red-400 shrink-0" />
-                                )}
-                                {isSubOn && (
-                                  <span className="text-green-400 text-[10px]">
-                                    ▲
+                <div className="overflow-x-auto">
+                  <table className="w-full text-left">
+                    <thead>
+                      <tr className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 border-b border-gray-200 dark:border-navy-700">
+                        <th className="py-2 pr-2">{t("match.player")}</th>
+                        <th className="py-2 w-12 text-center">
+                          {t("common.position")}
+                        </th>
+                        <th className="py-2 w-12 text-center">
+                          {t("common.ovr")}
+                        </th>
+                        <th className="py-2 w-24">{t("match.fitness")}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {team.players
+                        .filter((p) => !snapshot.sent_off.includes(p.id))
+                        .sort((a, b) => {
+                          const posOrd: Record<string, number> = {
+                            Goalkeeper: 1,
+                            Defender: 2,
+                            Midfielder: 3,
+                            Forward: 4,
+                          };
+                          return (
+                            (posOrd[a.role ?? ""] || 99) -
+                              (posOrd[b.role ?? ""] || 99) ||
+                            a.name.localeCompare(b.name)
+                          );
+                        })
+                        .map((p) => {
+                          const isSelected = selectedOff === p.id;
+                          const isSubOn = subbedOnIds.has(p.id);
+                          const ovr = getOvr(p);
+                          return (
+                            <tr
+                              key={p.id}
+                              onClick={() => {
+                                handleSelectOffPlayer(p.id);
+                              }}
+                              className={`cursor-pointer transition-colors text-sm ${
+                                isSelected
+                                  ? "bg-red-500/10"
+                                   : "hover:bg-gray-100 dark:hover:bg-navy-700/50"
+                              }`}
+                            >
+                              <td className="py-2 pr-2">
+                                <div className="flex items-center gap-1.5">
+                                  {isSelected && (
+                                    <UserMinus className="w-3.5 h-3.5 text-red-400 shrink-0" />
+                                  )}
+                                  {isSubOn && (
+                                    <span className="text-green-400 text-[10px]">
+                                      ▲
+                                    </span>
+                                  )}
+                                  <span
+                                     className={`font-medium truncate ${isSelected ? "text-red-400" : "text-gray-700 dark:text-gray-300"}`}
+                                  >
+                                    {p.name}
                                   </span>
-                                )}
-                                <span
-                                   className={`font-medium truncate ${isSelected ? "text-red-400" : "text-gray-700 dark:text-gray-300"}`}
-                                >
-                                  {p.name}
-                                </span>
-                              </div>
-                            </td>
-                            <td className="py-2 w-12 text-center">
-                               <span className="text-xs font-heading text-gray-500 dark:text-gray-400">
-                                {translatePositionAbbreviation(t, p.role ?? "")}
-                              </span>
-                            </td>
-                             <td className="py-2 w-12 text-center font-heading font-bold text-gray-500 dark:text-gray-400">
-                              {ovr}
-                            </td>
-                            <td className="py-2 w-24">
-                              <div className="flex items-center gap-1.5">
-                                 <div className="flex-1 h-2 bg-gray-300 dark:bg-navy-600 rounded-full overflow-hidden transition-colors duration-300">
-                                  <div
-                                    className={`h-full ${condColor(p.condition)} rounded-full`}
-                                    style={{ width: `${p.condition}%` }}
-                                  />
                                 </div>
-                                <span
-                                  className={`text-xs tabular-nums font-heading w-7 text-right ${condText(p.condition)}`}
-                                >
-                                  {Math.round(p.condition)}
+                              </td>
+                              <td className="py-2 w-12 text-center">
+                                 <span className="text-xs font-heading text-gray-500 dark:text-gray-400">
+                                  {translatePositionAbbreviation(t, p.role ?? "")}
                                 </span>
-                              </div>
-                            </td>
-                          </tr>
-                        );
-                      })}
-                  </tbody>
-                </table>
+                              </td>
+                               <td className="py-2 w-12 text-center font-heading font-bold text-gray-500 dark:text-gray-400">
+                                {ovr}
+                              </td>
+                              <td className="py-2 w-24">
+                                <div className="flex items-center gap-1.5">
+                                   <div className="flex-1 h-2 bg-gray-300 dark:bg-navy-600 rounded-full overflow-hidden transition-colors duration-300">
+                                    <div
+                                      className={`h-full ${condColor(p.condition)} rounded-full`}
+                                      style={{ width: `${p.condition}%` }}
+                                    />
+                                  </div>
+                                  <span
+                                    className={`text-xs tabular-nums font-heading w-7 text-right ${condText(p.condition)}`}
+                                  >
+                                    {Math.round(p.condition)}
+                                  </span>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                    </tbody>
+                  </table>
+                </div>
               </div>
-            </div>
 
             {/* Right: Bench Players + Comparison */}
             <div className="flex-1 flex flex-col">
@@ -346,15 +347,15 @@ export function SubPanel({
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-1.5">
                       <UserMinus className="w-3 h-3 text-red-400" />
-                      <span className="text-[10px] text-red-300 font-heading font-bold truncate max-w-[100px]">
+                      <span className="text-2xs text-red-300 font-heading font-bold truncate max-w-[100px]">
                         {selectedPlayer.name}
                       </span>
                     </div>
-                     <span className="text-[9px] text-gray-500 dark:text-gray-400 font-heading uppercase">
+                     <span className="text-2xs text-gray-500 dark:text-gray-400 font-heading uppercase">
                       {t("common.vs")}
                     </span>
                     <div className="flex items-center gap-1.5">
-                      <span className="text-[10px] text-green-300 font-heading font-bold truncate max-w-[100px]">
+                      <span className="text-2xs text-green-300 font-heading font-bold truncate max-w-[100px]">
                         {comparedPlayer.name}
                       </span>
                       <UserPlus className="w-3 h-3 text-green-400" />
@@ -430,89 +431,92 @@ export function SubPanel({
                     {t("match.noBenchAvailable")}
                   </div>
                 ) : (
-                  <table className="w-full text-left">
-                    <thead>
-                       <tr className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 border-b border-gray-200 dark:border-navy-700">
-                        <th className="py-2 pr-2">{t("match.player")}</th>
-                        <th className="py-2 w-12 text-center">
-                          {t("common.position")}
-                        </th>
-                        <th className="py-2 w-12 text-center">
-                          {t("common.ovr")}
-                        </th>
-                        <th className="py-2 w-24">{t("match.fitness")}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {availableBench.map((p) => {
-                        const ovr = getOvr(p);
-                        // Off-position indicator: compare with selected player's position
-                        const posMatch = selectedPlayer
-                          ? (p.role ?? "") === (selectedPlayer.role ?? "")
-                          : true;
-                        return (
-                          <tr
-                            key={p.id}
-                            onClick={() => {
-                              handleSelectBenchPlayer(p.id);
-                            }}
-                            className={`transition-colors text-sm ${
-                              selectedOff
-                                ? selectedBench === p.id
-                                  ? "cursor-pointer bg-green-500/15 ring-1 ring-green-500/30"
-                                  : "cursor-pointer hover:bg-green-500/10"
-                                : "opacity-60"
-                            }`}
-                          >
-                            <td className="py-2 pr-2">
-                              <div className="flex items-center gap-1.5">
-                                {selectedOff && (
-                                  <UserPlus className="w-3.5 h-3.5 text-green-400/50 shrink-0" />
-                                )}
-                                 <span className="font-medium truncate text-gray-700 dark:text-gray-300">
-                                  {p.name}
-                                </span>
-                              </div>
-                            </td>
-                            <td className="py-2 w-12 text-center">
-                              <span
-                                   className={`text-xs font-heading ${!posMatch && selectedOff ? "text-yellow-400" : "text-gray-500 dark:text-gray-400"}`}
-                              >
-                                {translatePositionAbbreviation(t, p.role ?? "")}
-                                {!posMatch && selectedOff && " !"}
-                              </span>
-                            </td>
-                             <td className="py-2 w-12 text-center font-heading font-bold text-gray-500 dark:text-gray-400">
-                              {ovr}
-                            </td>
-                            <td className="py-2 w-24">
-                              <div className="flex items-center gap-1.5">
-                                 <div className="flex-1 h-2 bg-gray-300 dark:bg-navy-600 rounded-full overflow-hidden transition-colors duration-300">
-                                  <div
-                                    className={`h-full ${condColor(p.condition)} rounded-full`}
-                                    style={{ width: `${p.condition}%` }}
-                                  />
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-left">
+                      <thead>
+                         <tr className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 border-b border-gray-200 dark:border-navy-700">
+                          <th className="py-2 pr-2">{t("match.player")}</th>
+                          <th className="py-2 w-12 text-center">
+                            {t("common.position")}
+                          </th>
+                          <th className="py-2 w-12 text-center">
+                            {t("common.ovr")}
+                          </th>
+                          <th className="py-2 w-24">{t("match.fitness")}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {availableBench.map((p) => {
+                          const ovr = getOvr(p);
+                          // Off-position indicator: compare with selected player's position
+                          const posMatch = selectedPlayer
+                            ? (p.role ?? "") === (selectedPlayer.role ?? "")
+                            : true;
+                          return (
+                            <tr
+                              key={p.id}
+                              onClick={() => {
+                                handleSelectBenchPlayer(p.id);
+                              }}
+                              className={`transition-colors text-sm ${
+                                selectedOff
+                                  ? selectedBench === p.id
+                                    ? "cursor-pointer bg-green-500/15 ring-1 ring-green-500/30"
+                                    : "cursor-pointer hover:bg-green-500/10"
+                                  : "opacity-60"
+                              }`}
+                            >
+                              <td className="py-2 pr-2">
+                                <div className="flex items-center gap-1.5">
+                                  {selectedOff && (
+                                    <UserPlus className="w-3.5 h-3.5 text-green-400/50 shrink-0" />
+                                  )}
+                                   <span className="font-medium truncate text-gray-700 dark:text-gray-300">
+                                    {p.name}
+                                  </span>
                                 </div>
+                              </td>
+                              <td className="py-2 w-12 text-center">
                                 <span
-                                  className={`text-xs tabular-nums font-heading w-7 text-right ${condText(p.condition)}`}
+                                     className={`text-xs font-heading ${!posMatch && selectedOff ? "text-yellow-400" : "text-gray-500 dark:text-gray-400"}`}
                                 >
-                                  {Math.round(p.condition)}
+                                  {translatePositionAbbreviation(t, p.role ?? "")}
+                                  {!posMatch && selectedOff && " !"}
                                 </span>
-                              </div>
-                            </td>
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
+                              </td>
+                               <td className="py-2 w-12 text-center font-heading font-bold text-gray-500 dark:text-gray-400">
+                                {ovr}
+                              </td>
+                              <td className="py-2 w-24">
+                                <div className="flex items-center gap-1.5">
+                                   <div className="flex-1 h-2 bg-gray-300 dark:bg-navy-600 rounded-full overflow-hidden transition-colors duration-300">
+                                    <div
+                                      className={`h-full ${condColor(p.condition)} rounded-full`}
+                                      style={{ width: `${p.condition}%` }}
+                                    />
+                                  </div>
+                                  <span
+                                    className={`text-xs tabular-nums font-heading w-7 text-right ${condText(p.condition)}`}
+                                  >
+                                    {Math.round(p.condition)}
+                                  </span>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
                 )}
               </div>
+              </div>
 
               {/* Sub History */}
               {snapshot.substitutions.filter((s) => s.side === side).length >
                 0 && (
                  <div className="px-4 py-3 border-t border-gray-200 dark:border-navy-700">
-                   <p className="text-[10px] font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1.5">
+                   <p className="text-2xs font-heading uppercase tracking-widest text-gray-600 dark:text-gray-500 mb-1.5">
                     {t("match.history")}
                   </p>
                   {snapshot.substitutions
@@ -520,7 +524,7 @@ export function SubPanel({
                     .map((sub, i) => (
                       <div
                         key={i}
-                        className="flex items-center gap-1.5 py-0.5 text-[11px]"
+                        className="flex items-center gap-1.5 py-0.5 text-xs"
                       >
                          <span className="text-gray-600 dark:text-gray-500 tabular-nums w-5 text-right font-heading">
                           {sub.minute}'
diff --git a/src/components/match/lol-prototype/ui/panels.tsx b/src/components/match/lol-prototype/ui/panels.tsx
index 1f40ee687..7cbef5046 100644
--- a/src/components/match/lol-prototype/ui/panels.tsx
+++ b/src/components/match/lol-prototype/ui/panels.tsx
@@ -132,7 +132,7 @@ function Slot({ className = "h-4 w-4", trinket = false, goldBorder = false, item
     <div className={`${className} relative overflow-hidden border ${borderClass} bg-black`}>
       {effectiveIcon ? <img src={effectiveIcon} alt={itemKey ?? spellKey ?? "slot"} className="h-full w-full object-cover" loading="lazy" /> : null}
       {shouldShowCd ? (
-        <div className="absolute inset-0 flex items-center justify-center bg-black/55 text-[8px] font-black text-amber-300">
+        <div className="absolute inset-0 flex items-center justify-center bg-black/55 text-2xs font-black text-amber-300">
           {cooldownText}
         </div>
       ) : null}
@@ -215,7 +215,7 @@ function SidePane({ champion, team, championByPlayerId, timeSec }: {
     <div className={`side ${red ? "red" : "blue"} flex flex-1 items-center gap-[6px] px-[10px] ${red ? "border-r-[3px] border-r-orange-400" : "border-l-[3px] border-l-cyan-400"}`}>
       {red && (
         <div className={`stats flex min-w-0 flex-1 flex-col gap-[1px] px-[5px] text-right`}>
-          <div className="top-info flex flex-row-reverse justify-between text-[10px] font-black uppercase">
+          <div className="top-info flex flex-row-reverse justify-between text-2xs font-black uppercase">
             <span className="truncate">{name}{banished ? " (Realm)" : ""}</span>
             <span className="farm text-amber-300">{cs}</span>
           </div>
@@ -223,7 +223,7 @@ function SidePane({ champion, team, championByPlayerId, timeSec }: {
             <div className="hp h-[7px] rounded-[1px] bg-rose-400 shadow-[0_0_6px_rgba(248,113,113,0.3)]" style={{ width: `${hp <= 0 ? 0 : Math.max(8, hp * 100)}%` }} />
             <div className="mp ml-auto h-[2px] bg-blue-500" style={{ width: `${Math.max(8, mp * 55)}%` }} />
           </div>
-          <div className="kda text-[8px] font-bold text-white/45">{kda}</div>
+          <div className="kda text-2xs font-bold text-white/45">{kda}</div>
         </div>
       )}
 
@@ -248,16 +248,16 @@ function SidePane({ champion, team, championByPlayerId, timeSec }: {
           <div className="portrait-container relative h-[34px] w-[34px] border border-white/15 bg-black">
             {icon ? <img src={icon} alt={name} className={`h-full w-full object-cover ${champion && (!champion.alive || banished) ? "grayscale opacity-55" : ""}`} /> : null}
             {champion && !champion.alive && respawnText && (
-              <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-[12px] font-black text-amber-300">
+              <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-xs font-black text-amber-300">
                 {respawnText}
               </div>
             )}
             {banished && (
-              <div className="absolute inset-0 flex items-center justify-center bg-violet-900/55 text-[9px] font-black text-violet-200">
+              <div className="absolute inset-0 flex items-center justify-center bg-violet-900/55 text-2xs font-black text-violet-200">
                 REALM
               </div>
             )}
-            <div className="lvl absolute -bottom-[2px] -right-[2px] flex h-[12px] w-[12px] items-center justify-center border border-cyan-400 bg-black text-[8px] font-black">
+            <div className="lvl absolute -bottom-[2px] -right-[2px] flex h-[12px] w-[12px] items-center justify-center border border-cyan-400 bg-black text-2xs font-black">
               {level}
             </div>
           </div>
@@ -266,7 +266,7 @@ function SidePane({ champion, team, championByPlayerId, timeSec }: {
 
       {!red && (
         <div className="stats flex min-w-0 flex-1 flex-col gap-[1px] px-[5px] text-left">
-          <div className="top-info flex justify-between text-[10px] font-black uppercase">
+          <div className="top-info flex justify-between text-2xs font-black uppercase">
             <span className="truncate">{name}{banished ? " (Realm)" : ""}</span>
             <span className="farm text-amber-300">{cs}</span>
           </div>
@@ -274,7 +274,7 @@ function SidePane({ champion, team, championByPlayerId, timeSec }: {
             <div className="hp h-[7px] rounded-[1px] bg-emerald-400 shadow-[0_0_6px_rgba(74,222,128,0.3)]" style={{ width: `${hp <= 0 ? 0 : Math.max(8, hp * 100)}%` }} />
             <div className="mp h-[2px] bg-blue-500" style={{ width: `${Math.max(8, mp * 55)}%` }} />
           </div>
-          <div className="kda text-[8px] font-bold text-white/45">{kda}</div>
+          <div className="kda text-2xs font-bold text-white/45">{kda}</div>
         </div>
       )}
 
@@ -283,16 +283,16 @@ function SidePane({ champion, team, championByPlayerId, timeSec }: {
           <div className="portrait-container relative h-[34px] w-[34px] border border-white/15 bg-black">
             {icon ? <img src={icon} alt={name} className={`h-full w-full object-cover ${champion && (!champion.alive || banished) ? "grayscale opacity-55" : ""}`} /> : null}
             {champion && !champion.alive && respawnText && (
-              <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-[12px] font-black text-amber-300">
+              <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-xs font-black text-amber-300">
                 {respawnText}
               </div>
             )}
             {banished && (
-              <div className="absolute inset-0 flex items-center justify-center bg-violet-900/55 text-[9px] font-black text-violet-200">
+              <div className="absolute inset-0 flex items-center justify-center bg-violet-900/55 text-2xs font-black text-violet-200">
                 REALM
               </div>
             )}
-            <div className="lvl absolute -bottom-[2px] -left-[2px] flex h-[12px] w-[12px] items-center justify-center border border-orange-400 bg-black text-[8px] font-black">
+            <div className="lvl absolute -bottom-[2px] -left-[2px] flex h-[12px] w-[12px] items-center justify-center border border-orange-400 bg-black text-2xs font-black">
               {level}
             </div>
           </div>
@@ -342,9 +342,9 @@ export function LecLowerThirdPanel({ champions, championByPlayerId, timeSec = 0
             <SidePane champion={blue} team="blue" championByPlayerId={championByPlayerId} timeSec={timeSec} />
 
             <div className="gold-indicator flex w-[80px] items-center justify-center border-x border-white/[0.05] bg-[#080808]">
-              <span className={`arrow to-blue mr-[6px] text-[11px] ${toBlue ? "text-cyan-300 drop-shadow-[0_0_3px_rgba(34,211,238,1)]" : "text-transparent"}`}>◀</span>
-              <span className="gold-value text-[11px] font-black text-white">{diffLabel}</span>
-              <span className={`arrow to-red ml-[6px] text-[11px] ${!toBlue ? "text-orange-400 drop-shadow-[0_0_3px_rgba(249,115,22,1)]" : "text-transparent"}`}>▶</span>
+              <span className={`arrow to-blue mr-[6px] text-xs ${toBlue ? "text-cyan-300 drop-shadow-[0_0_3px_rgba(34,211,238,1)]" : "text-transparent"}`}>◀</span>
+              <span className="gold-value text-xs font-black text-white">{diffLabel}</span>
+              <span className={`arrow to-red ml-[6px] text-xs ${!toBlue ? "text-orange-400 drop-shadow-[0_0_3px_rgba(249,115,22,1)]" : "text-transparent"}`}>▶</span>
             </div>
 
             <SidePane champion={red} team="red" championByPlayerId={championByPlayerId} timeSec={timeSec} />
diff --git a/src/components/news/NewsTab.tsx b/src/components/news/NewsTab.tsx
index b29378e2e..9f6c8b917 100644
--- a/src/components/news/NewsTab.tsx
+++ b/src/components/news/NewsTab.tsx
@@ -120,7 +120,7 @@ export default function NewsTab({ gameState, onSelectTeam }: NewsTabProps) {
   }
 
   return (
-    <div className="max-w-6xl mx-auto flex flex-col gap-5">
+    <div className="w-[92%] max-w-[2000px] mx-auto flex flex-col gap-5">
       {/* Filters row */}
       <div className="flex items-center gap-2 flex-wrap">
         {/* Category pills */}
@@ -263,12 +263,12 @@ function HeroArticle({
       <div className="p-6">
         <div className="flex items-center gap-2 mb-3">
           <span
-            className={`inline-flex items-center gap-1.5 text-[10px] font-heading font-bold uppercase tracking-widest px-2.5 py-1 rounded-full ${meta.color} ${meta.bg}`}
+            className={`inline-flex items-center gap-1.5 text-2xs font-heading font-bold uppercase tracking-widest px-2.5 py-1 rounded-full ${meta.color} ${meta.bg}`}
           >
             {meta.icon}
             {meta.label}
           </span>
-          <span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
+          <span className="text-2xs text-gray-400 dark:text-gray-500 flex items-center gap-1">
             <Clock className="w-3 h-3" />
             {formatNewsDate(article.date)}
           </span>
@@ -299,7 +299,7 @@ function HeroArticle({
         </p>
 
         <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-100 dark:border-navy-700">
-          <p className="text-[10px] text-gray-400 dark:text-gray-600 font-heading uppercase tracking-widest">
+          <p className="text-2xs text-gray-400 dark:text-gray-600 font-heading uppercase tracking-widest">
             — {article.source}
           </p>
           {article.team_ids.length > 0 && onSelectTeam && (
@@ -311,7 +311,7 @@ function HeroArticle({
                     e.stopPropagation();
                     onSelectTeam(tid);
                   }}
-                  className="text-[10px] font-heading font-bold uppercase tracking-wider text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 bg-primary-500/5 hover:bg-primary-500/10 px-2 py-0.5 rounded-md transition-colors cursor-pointer"
+                  className="text-2xs font-heading font-bold uppercase tracking-wider text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 bg-primary-500/5 hover:bg-primary-500/10 px-2 py-0.5 rounded-md transition-colors cursor-pointer"
                 >
                   {getTeamName(gameState.teams, tid)}
                 </span>
@@ -350,7 +350,7 @@ function ArticleCard({
       <div className="p-4 flex-1 flex flex-col">
         <div className="flex items-center gap-2 mb-2">
           <span
-            className={`inline-flex items-center gap-1 text-[9px] font-heading font-bold uppercase tracking-widest px-2 py-0.5 rounded-full ${meta.color} ${meta.bg}`}
+            className={`inline-flex items-center gap-1 text-2xs font-heading font-bold uppercase tracking-widest px-2 py-0.5 rounded-full ${meta.color} ${meta.bg}`}
           >
             {meta.icon}
             {meta.label}
@@ -381,10 +381,10 @@ function ArticleCard({
         </p>
 
         <div className="flex items-center justify-between mt-3 pt-2 border-t border-gray-100 dark:border-navy-700">
-          <span className="text-[10px] text-gray-400 dark:text-gray-600 font-heading uppercase tracking-widest">
+          <span className="text-2xs text-gray-400 dark:text-gray-600 font-heading uppercase tracking-widest">
             {article.source}
           </span>
-          <span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
+          <span className="text-2xs text-gray-400 dark:text-gray-500 flex items-center gap-1">
             <Clock className="w-3 h-3" />
             {formatNewsDate(article.date)}
           </span>
@@ -429,7 +429,7 @@ function ArticleDetail({
           {/* Category + date */}
           <div className="flex items-center gap-3 mb-4">
             <span
-              className={`inline-flex items-center gap-1.5 text-[10px] font-heading font-bold uppercase tracking-widest px-2.5 py-1 rounded-full ${meta.color} ${meta.bg}`}
+              className={`inline-flex items-center gap-1.5 text-2xs font-heading font-bold uppercase tracking-widest px-2.5 py-1 rounded-full ${meta.color} ${meta.bg}`}
             >
               {meta.icon}
               {meta.label}
@@ -478,7 +478,7 @@ function ArticleDetail({
 
           {/* Footer */}
           <div className="mt-6 pt-4 border-t border-gray-100 dark:border-navy-700 flex items-center justify-between">
-            <p className="text-[10px] text-gray-400 dark:text-gray-600 font-heading uppercase tracking-widest">
+            <p className="text-2xs text-gray-400 dark:text-gray-600 font-heading uppercase tracking-widest">
               — {article.source}
             </p>
             {article.team_ids.length > 0 && onSelectTeam && (
@@ -487,7 +487,7 @@ function ArticleDetail({
                   <button
                     key={tid}
                     onClick={() => onSelectTeam(tid)}
-                    className="text-[10px] font-heading font-bold uppercase tracking-wider text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 bg-primary-500/5 hover:bg-primary-500/10 px-2.5 py-1 rounded-md transition-colors"
+                    className="text-2xs font-heading font-bold uppercase tracking-wider text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 bg-primary-500/5 hover:bg-primary-500/10 px-2.5 py-1 rounded-md transition-colors"
                   >
                     {getTeamName(gameState.teams, tid)}
                   </button>
diff --git a/src/components/playerProfile/PlayerProfile.tsx b/src/components/playerProfile/PlayerProfile.tsx
index 1f75b26ac..d739d3df1 100644
--- a/src/components/playerProfile/PlayerProfile.tsx
+++ b/src/components/playerProfile/PlayerProfile.tsx
@@ -793,7 +793,7 @@ export default function PlayerProfile({
   }
 
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="w-[92%] max-w-[2000px] mx-auto">
       <button
         onClick={onClose}
         className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors mb-4"
@@ -1073,7 +1073,7 @@ export default function PlayerProfile({
             ) : null}
             {transferOfferFeedback ? (
               <div className="rounded-md border border-primary-400/30 bg-primary-500/10 px-3 py-2 text-xs text-primary-100">
-                <p className="font-heading font-bold uppercase tracking-wider text-[10px] text-primary-200/90">
+                <p className="font-heading font-bold uppercase tracking-wider text-2xs text-primary-200/90">
                   {resolveBackendText(
                     transferOfferFeedback.feedback.headline_key,
                     transferOfferFeedback.feedback.headline_key,
diff --git a/src/components/playerProfile/PlayerProfileAttributesCard.tsx b/src/components/playerProfile/PlayerProfileAttributesCard.tsx
index c4072c3d3..9d9997e42 100644
--- a/src/components/playerProfile/PlayerProfileAttributesCard.tsx
+++ b/src/components/playerProfile/PlayerProfileAttributesCard.tsx
@@ -28,7 +28,7 @@ export default function PlayerProfileAttributesCard({
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                         {attrGroups.map((group) => (
                             <div key={group.label}>
-                                <h4 className="font-heading font-bold text-[11px] uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2 pb-1.5 border-b border-gray-100 dark:border-navy-600">
+                                <h4 className="font-heading font-bold text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2 pb-1.5 border-b border-gray-100 dark:border-navy-600">
                                     {group.label}
                                 </h4>
                                 <div className="flex items-center gap-2 rounded bg-gray-50 dark:bg-navy-800/40 px-1.5 -mx-1.5 mb-1.5">
diff --git a/src/components/playerProfile/PlayerProfileChampionsCard.tsx b/src/components/playerProfile/PlayerProfileChampionsCard.tsx
index 04c375207..833be40f0 100644
--- a/src/components/playerProfile/PlayerProfileChampionsCard.tsx
+++ b/src/components/playerProfile/PlayerProfileChampionsCard.tsx
@@ -48,11 +48,11 @@ export default function PlayerProfileChampionsCard({ champions, onViewChampion }
               <div className="relative z-10 p-2.5 h-full flex flex-col">
                 <div className="flex items-start justify-between">
                   {item.rank === "insignia" ? (
-                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-heading font-bold uppercase tracking-wide bg-amber-500/20 text-amber-300 border border-amber-300/35">
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-2xs font-heading font-bold uppercase tracking-wide bg-amber-500/20 text-amber-300 border border-amber-300/35">
                       <Crown className="w-3 h-3" /> {t("playerProfile.championInsignia")}
                     </span>
                   ) : (
-                    <span className="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-heading font-bold uppercase tracking-wide bg-white/20 text-white border border-white/35">
+                    <span className="inline-flex items-center px-2 py-0.5 rounded-md text-2xs font-heading font-bold uppercase tracking-wide bg-white/20 text-white border border-white/35">
                       #{item.rank}
                     </span>
                   )}
diff --git a/src/components/playerProfile/PlayerProfileHeroCard.tsx b/src/components/playerProfile/PlayerProfileHeroCard.tsx
index 56f6b3325..9071ce470 100644
--- a/src/components/playerProfile/PlayerProfileHeroCard.tsx
+++ b/src/components/playerProfile/PlayerProfileHeroCard.tsx
@@ -248,7 +248,7 @@ export default function PlayerProfileHeroCard({
 
             {isOwnClub && editingRole ? (
               <div className="mt-3 rounded-lg border border-amber-300/30 bg-amber-500/10 p-3 max-w-xl">
-                <p className="text-[11px] text-amber-200 mb-2">
+                <p className="text-xs text-amber-200 mb-2">
                   {t("playerProfile.rerollWarning", {
                     defaultValue:
                       "Cambiar posición hace un reroll y puede modificar el OVR del jugador.",
diff --git a/src/components/players/PlayersListTab.tsx b/src/components/players/PlayersListTab.tsx
index c50a24b11..1b86b793a 100644
--- a/src/components/players/PlayersListTab.tsx
+++ b/src/components/players/PlayersListTab.tsx
@@ -163,7 +163,7 @@ export default function PlayersListTab({
   const positions: LolRole[] = ["TOP", "JUNGLE", "MID", "ADC", "SUPPORT"];
 
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="w-[92%] max-w-[2000px] mx-auto">
       {/* Filters */}
       <div className="flex flex-wrap gap-3 mb-4 items-center">
         <div className="relative flex-1 min-w-[200px] max-w-sm">
@@ -343,7 +343,7 @@ export default function PlayersListTab({
                             <p className="font-semibold text-sm text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate">
                               {player.match_name}
                             </p>
-                            <p className="text-[11px] text-gray-500 dark:text-gray-400 truncate">
+                            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                               {player.full_name}
                             </p>
                           </div>
diff --git a/src/components/playoffs/PlayoffBracketBoard.tsx b/src/components/playoffs/PlayoffBracketBoard.tsx
index 92cba6c06..aff2245ea 100644
--- a/src/components/playoffs/PlayoffBracketBoard.tsx
+++ b/src/components/playoffs/PlayoffBracketBoard.tsx
@@ -122,12 +122,12 @@ export default function PlayoffBracketBoard({
   });
 
   const renderRound = ([matchday, fixtures]: [number, FixtureData[]], indexInLane: number, roundIndex: number) => (
-    <div key={`round-${matchday}`} className="relative min-w-[220px]">
+    <div key={`round-${matchday}`} className="relative min-w-56">
       {indexInLane > 0 ? (
         <div className="hidden lg:block absolute -left-6 top-1/2 w-6 h-px bg-cyan-300/40" />
       ) : null}
       <div className="rounded-xl border border-cyan-300/20 bg-navy-900/60 p-3">
-        <p className="text-[11px] font-heading font-bold uppercase tracking-[0.18em] text-cyan-200/90">
+        <p className="text-xs font-heading font-bold uppercase tracking-[0.18em] text-cyan-200/90">
           {playoffRoundLabel(split, roundIndex)}
         </p>
         <div className="mt-2 space-y-2">
@@ -138,7 +138,7 @@ export default function PlayoffBracketBoard({
             const matchNumber = fixtureOrder.get(fixture.id) ?? 0;
             return (
               <div key={fixture.id} className="rounded-lg border border-white/10 bg-white/[0.03] px-2.5 py-2">
-                <p className="text-[10px] font-heading font-bold uppercase tracking-wider text-cyan-300/85 mb-1">
+                <p className="text-2xs font-heading font-bold uppercase tracking-wider text-cyan-300/85 mb-1">
                   M{matchNumber} · BO{bestOf}
                 </p>
 
@@ -157,7 +157,7 @@ export default function PlayoffBracketBoard({
                   {getTeamName(teams, fixture.away_team_id)}
                 </button>
 
-                <p className="mt-1.5 text-[11px] text-gray-400 font-heading uppercase tracking-wider">
+                <p className="mt-1.5 text-xs text-gray-400 font-heading uppercase tracking-wider">
                   {score ? `${score.home} - ${score.away}` : t("tournaments.scheduled")}
                 </p>
               </div>
@@ -176,13 +176,13 @@ export default function PlayoffBracketBoard({
 
       <div className="space-y-5">
         <div>
-          <p className="text-[11px] font-heading font-bold uppercase tracking-[0.2em] text-cyan-300/90 mb-2">{t("tournaments.upperBracket")}</p>
+          <p className="text-xs font-heading font-bold uppercase tracking-[0.2em] text-cyan-300/90 mb-2">{t("tournaments.upperBracket")}</p>
           <div className="flex gap-3 overflow-x-auto pb-2">{upperRounds.map((round, i) => renderRound(round, i, rounds.indexOf(round)))}</div>
         </div>
 
         {lowerRounds.length > 0 ? (
           <div>
-            <p className="text-[11px] font-heading font-bold uppercase tracking-[0.2em] text-cyan-300/90 mb-2">{t("tournaments.lowerBracket")}</p>
+            <p className="text-xs font-heading font-bold uppercase tracking-[0.2em] text-cyan-300/90 mb-2">{t("tournaments.lowerBracket")}</p>
             <div className="flex gap-3 overflow-x-auto pb-1">{lowerRounds.map((round, i) => renderRound(round, i, rounds.indexOf(round)))}</div>
           </div>
         ) : null}
diff --git a/src/components/schedule/ScheduleCalendarView.tsx b/src/components/schedule/ScheduleCalendarView.tsx
index efb148ed0..050a21ad1 100644
--- a/src/components/schedule/ScheduleCalendarView.tsx
+++ b/src/components/schedule/ScheduleCalendarView.tsx
@@ -194,7 +194,7 @@ function FixtureChip({
       ) : null}
       <span
         className={`font-heading font-bold tabular-nums text-gray-700 dark:text-gray-200 ${
-          isFull ? "text-sm px-2" : "text-[10px] px-0.5"
+          isFull ? "text-sm px-2" : "text-2xs px-0.5"
         }`}
       >
         {score ? `${score.home}-${score.away}` : "vs"}
@@ -220,7 +220,7 @@ function FixtureChip({
         className={
           isFull
             ? "ml-auto"
-            : "ml-auto !text-[8px] !px-1 !py-0"
+            : "ml-auto !text-2xs !px-1 !py-0"
         }
       >
         BO{bo}
@@ -258,7 +258,7 @@ function ScrimChip({ scrim, gameState, size = "compact" }: ScrimChipProps) {
           loading="lazy"
         />
       ) : null}
-      <span className={`font-heading font-bold uppercase tracking-wider truncate ${isFull ? "text-xs" : "text-[10px]"}`}>
+      <span className={`font-heading font-bold uppercase tracking-wider truncate ${isFull ? "text-xs" : "text-2xs"}`}>
         {t("schedule.scrimVs", { team: opponentName, defaultValue: "Scrim vs {{team}}" })}
       </span>
     </div>
@@ -373,7 +373,7 @@ export default function ScheduleCalendarView({
           >
             <ChevronLeft className="w-4 h-4" />
           </button>
-          <h4 className="font-heading font-bold text-sm uppercase tracking-wider text-gray-700 dark:text-gray-200 min-w-[160px] text-center">
+          <h4 className="font-heading font-bold text-sm uppercase tracking-wider text-gray-700 dark:text-gray-200 min-w-40 text-center">
             {monthLabel}
           </h4>
           <button
@@ -399,7 +399,7 @@ export default function ScheduleCalendarView({
           {weekdayLabels.map((label, idx) => (
             <div
               key={`${label}-${idx}`}
-              className="text-center text-[10px] font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 py-1"
+              className="text-center text-2xs font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 py-1"
             >
               {label}
             </div>
@@ -439,7 +439,7 @@ export default function ScheduleCalendarView({
               >
                 <div className="flex items-center justify-between">
                   <span
-                    className={`text-[11px] font-heading font-bold tabular-nums ${
+                    className={`text-xs font-heading font-bold tabular-nums ${
                       isToday
                         ? "text-primary-500"
                         : inMonth
@@ -450,7 +450,7 @@ export default function ScheduleCalendarView({
                     {cell.getDate()}
                   </span>
                   {cellEvents.length > 1 ? (
-                    <span className="text-[9px] text-gray-400 dark:text-gray-500 tabular-nums">
+                    <span className="text-2xs text-gray-400 dark:text-gray-500 tabular-nums">
                       ×{cellEvents.length}
                     </span>
                   ) : null}
@@ -462,7 +462,7 @@ export default function ScheduleCalendarView({
                       title={t("schedule.seasonStartHint", "Día de inicio de la temporada regular")}
                     >
                       <Flag className="w-3 h-3 shrink-0" />
-                      <span className="text-[10px] font-heading font-bold uppercase tracking-wider truncate">
+                      <span className="text-2xs font-heading font-bold uppercase tracking-wider truncate">
                         {t("schedule.seasonStart", "Inicio de temporada")}
                       </span>
                     </div>
@@ -473,7 +473,7 @@ export default function ScheduleCalendarView({
                       title={t("schedule.playoffsStartEstimateHint", "Fecha estimada — los emparejamientos se generan al cerrar la liga regular")}
                     >
                       <Trophy className="w-3 h-3 shrink-0" />
-                      <span className="text-[10px] font-heading font-bold uppercase tracking-wider truncate">
+                      <span className="text-2xs font-heading font-bold uppercase tracking-wider truncate">
                         {t("schedule.playoffsStartEstimate", "Inicio playoffs (est.)")}
                       </span>
                     </div>
@@ -500,7 +500,7 @@ export default function ScheduleCalendarView({
                     <button
                       type="button"
                       onClick={() => setOpenDayKey(cellKey)}
-                      className="text-[9px] font-heading font-bold uppercase tracking-wider text-primary-500 hover:text-primary-600 dark:hover:text-primary-300 px-1 text-left transition-colors"
+                      className="text-2xs font-heading font-bold uppercase tracking-wider text-primary-500 hover:text-primary-600 dark:hover:text-primary-300 px-1 text-left transition-colors"
                     >
                       +{overflow} {t("schedule.moreMatches", "más")}
                     </button>
diff --git a/src/components/schedule/ScheduleTab.tsx b/src/components/schedule/ScheduleTab.tsx
index 751c67f53..512fc5f7e 100644
--- a/src/components/schedule/ScheduleTab.tsx
+++ b/src/components/schedule/ScheduleTab.tsx
@@ -149,7 +149,7 @@ export default function ScheduleTab({
   const standings = [...playerLeague.standings].sort(compareStandingsByLolScore);
 
   return (
-    <div className={view === "calendar" ? "w-full" : "max-w-6xl mx-auto"}>
+    <div className={view === "calendar" ? "w-full" : "w-[92%] max-w-[2000px] mx-auto"}>
       {isPreseason && (
         <Card accent="accent" className="mb-5">
           <CardBody>
diff --git a/src/components/scouting/ScoutingPlayerSearchCard.tsx b/src/components/scouting/ScoutingPlayerSearchCard.tsx
index f80f19f5b..e0de285a5 100644
--- a/src/components/scouting/ScoutingPlayerSearchCard.tsx
+++ b/src/components/scouting/ScoutingPlayerSearchCard.tsx
@@ -209,10 +209,10 @@ export default function ScoutingPlayerSearchCard({
                       >
                         {player.match_name}
                       </button>
-                      <div className="text-[10px] text-gray-500 dark:text-gray-500 mt-0.5 truncate">
+                      <div className="text-2xs text-gray-500 dark:text-gray-500 mt-0.5 truncate">
                         {player.full_name}
                       </div>
-                      <div className="text-[10px] text-gray-400 mt-0.5 flex items-center gap-1">
+                      <div className="text-2xs text-gray-400 mt-0.5 flex items-center gap-1">
                         <CountryFlag
                           code={player.nationality}
                           locale={i18n.language}
diff --git a/src/components/scouting/ScoutingScoutDetailsCard.tsx b/src/components/scouting/ScoutingScoutDetailsCard.tsx
index 1de70cc6f..37681b0b1 100644
--- a/src/components/scouting/ScoutingScoutDetailsCard.tsx
+++ b/src/components/scouting/ScoutingScoutDetailsCard.tsx
@@ -63,7 +63,7 @@ export default function ScoutingScoutDetailsCard({
                     <p className="font-heading font-bold text-sm text-gray-800 dark:text-gray-100">
                       {scout.first_name} {scout.last_name}
                     </p>
-                    <div className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5 flex items-center gap-1">
+                    <div className="text-2xs text-gray-400 dark:text-gray-500 mt-0.5 flex items-center gap-1">
                       <CountryFlag
                         code={scout.nationality}
                         locale={i18n.language}
@@ -78,7 +78,7 @@ export default function ScoutingScoutDetailsCard({
                 </div>
                 <div className="mt-2 grid grid-cols-2 gap-2">
                   <div>
-                    <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase">
+                    <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase">
                       {t("scouting.judgingAbility")}
                     </p>
                     <ProgressBar
@@ -88,7 +88,7 @@ export default function ScoutingScoutDetailsCard({
                     />
                   </div>
                   <div>
-                    <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase">
+                    <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase">
                       {t("scouting.judgingPotential")}
                     </p>
                     <ProgressBar
diff --git a/src/components/scouting/ScoutingTab.tsx b/src/components/scouting/ScoutingTab.tsx
index 6e446bbb7..5f217857b 100644
--- a/src/components/scouting/ScoutingTab.tsx
+++ b/src/components/scouting/ScoutingTab.tsx
@@ -91,7 +91,7 @@ export default function ScoutingTab({
   };
 
   return (
-    <div className="max-w-6xl mx-auto flex flex-col gap-5">
+    <div className="w-[92%] max-w-[2000px] mx-auto flex flex-col gap-5">
       {/* Header */}
       <div className="flex items-center gap-3">
         <ScanSearch className="w-5 h-5 text-primary-500" />
diff --git a/src/components/scrims/ScrimPlanningCard.tsx b/src/components/scrims/ScrimPlanningCard.tsx
index c15d179cc..2e69afe26 100644
--- a/src/components/scrims/ScrimPlanningCard.tsx
+++ b/src/components/scrims/ScrimPlanningCard.tsx
@@ -130,17 +130,17 @@ export default function ScrimPlanningCard({
         </p>
 
         <div className="mb-3 flex flex-wrap items-center gap-2">
-          <span className="rounded-full border border-gray-300 dark:border-navy-600 px-2.5 py-1 text-[11px] font-heading uppercase tracking-wide text-gray-600 dark:text-gray-300">
+          <span className="rounded-full border border-gray-300 dark:border-navy-600 px-2.5 py-1 text-xs font-heading uppercase tracking-wide text-gray-600 dark:text-gray-300">
             {t("training.scrims.weekCapacity")}: {slots}
           </span>
-          <span className="rounded-full border border-gray-300 dark:border-navy-600 px-2.5 py-1 text-[11px] font-heading uppercase tracking-wide text-gray-600 dark:text-gray-300">
+          <span className="rounded-full border border-gray-300 dark:border-navy-600 px-2.5 py-1 text-xs font-heading uppercase tracking-wide text-gray-600 dark:text-gray-300">
             {t("training.scrims.lossStreak")}: {streak}
           </span>
           <button
             type="button"
             disabled={isSaving || readOnly || !weeklyContext.slots.every((slot) => slot.canEdit)}
             onClick={autofillPlansFromObjective}
-            className="inline-flex items-center gap-1 rounded-full border border-gray-300 px-2.5 py-1 text-[11px] font-heading uppercase tracking-wide text-gray-600 transition-colors hover:border-gray-400 disabled:opacity-60 dark:border-navy-600 dark:text-gray-300 dark:hover:border-navy-500"
+            className="inline-flex items-center gap-1 rounded-full border border-gray-300 px-2.5 py-1 text-xs font-heading uppercase tracking-wide text-gray-600 transition-colors hover:border-gray-400 disabled:opacity-60 dark:border-navy-600 dark:text-gray-300 dark:hover:border-navy-500"
           >
             <WandSparkles className="h-3.5 w-3.5" />
             Rellenar por objetivo
@@ -168,7 +168,7 @@ export default function ScrimPlanningCard({
                       <CalendarDays className="h-4 w-4" />
                     </div>
                     <div className="min-w-0">
-                      <p className="text-[10px] font-heading font-bold uppercase tracking-wider text-gray-400">
+                      <p className="text-2xs font-heading font-bold uppercase tracking-wider text-gray-400">
                         {t("training.scrims.slot", "Slot")} {index + 1}
                       </p>
                       <p className="truncate font-heading text-sm font-bold uppercase tracking-wide text-gray-900 dark:text-white">
@@ -190,12 +190,12 @@ export default function ScrimPlanningCard({
                     ) : null}
                     {hasResult ? (
                       <span
-                        className={`rounded-full border px-2.5 py-1 text-[10px] font-heading font-bold uppercase tracking-wide ${slotContext?.resultWon ? "border-emerald-400/40 bg-emerald-500/15 text-emerald-300" : "border-rose-400/40 bg-rose-500/15 text-rose-300"}`}
+                        className={`rounded-full border px-2.5 py-1 text-2xs font-heading font-bold uppercase tracking-wide ${slotContext?.resultWon ? "border-emerald-400/40 bg-emerald-500/15 text-emerald-300" : "border-rose-400/40 bg-rose-500/15 text-rose-300"}`}
                       >
                         {slotContext?.resultWon ? "Win" : "Loss"}
                       </span>
                     ) : (
-                      <span className="rounded-full border border-gray-200 px-2.5 py-1 text-[10px] font-heading font-bold uppercase tracking-wide text-gray-400 dark:border-navy-600">
+                      <span className="rounded-full border border-gray-200 px-2.5 py-1 text-2xs font-heading font-bold uppercase tracking-wide text-gray-400 dark:border-navy-600">
                         {t("training.scrims.pending", "Pendiente")}
                       </span>
                     )}
@@ -212,7 +212,7 @@ export default function ScrimPlanningCard({
 
                     return (
                       <div key={`scrim-slot-${index}-plan-${priorityIndex}`} className="min-w-0">
-                        <label className="mb-1 flex items-center gap-1 text-[10px] font-heading font-bold uppercase tracking-wider text-gray-400">
+                        <label className="mb-1 flex items-center gap-1 text-2xs font-heading font-bold uppercase tracking-wider text-gray-400">
                           {priorityIndex > 0 ? <ChevronRight className="h-3 w-3" /> : null}
                           {label}
                         </label>
diff --git a/src/components/scrims/ScrimsTab.tsx b/src/components/scrims/ScrimsTab.tsx
index f7acaa4b8..490710dfa 100644
--- a/src/components/scrims/ScrimsTab.tsx
+++ b/src/components/scrims/ScrimsTab.tsx
@@ -331,7 +331,7 @@ export default function ScrimsTab({
   );
 
   return (
-    <div className="mx-auto flex max-w-7xl flex-col gap-5">
+    <div className="w-[92%] max-w-[2000px] mx-auto flex flex-col gap-5">
       <Card accent="primary">
         <CardBody>
           <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -355,7 +355,7 @@ export default function ScrimsTab({
                 <p className="text-2xl font-heading font-bold text-gray-900 dark:text-white">
                   {plannedScrims}/{weeklyCapacity}
                 </p>
-                <p className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                <p className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
                   {t("scrims.planned")}
                 </p>
               </div>
@@ -364,7 +364,7 @@ export default function ScrimsTab({
                 <p className="text-2xl font-heading font-bold text-gray-900 dark:text-white">
                   {wins}-{losses}
                 </p>
-                <p className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                <p className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
                   {t("scrims.weekRecord")}
                 </p>
               </div>
@@ -373,7 +373,7 @@ export default function ScrimsTab({
                 <p className="text-2xl font-heading font-bold text-gray-900 dark:text-white">
                   {weeklyContext.reputation}
                 </p>
-                <p className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                <p className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
                   {t("scrims.reputation")}
                 </p>
               </div>
@@ -424,7 +424,7 @@ export default function ScrimsTab({
               </Select>
               <p className="text-xs text-gray-500 dark:text-gray-400">{scrimFocusImpactText(objective)}</p>
               {objective ? (
-                <div className="flex flex-wrap items-center gap-2 text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                <div className="flex flex-wrap items-center gap-2 text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">
                   <span>Main growth:</span>
                   {objectiveGrowth.primary.map((tag) => (
                     <span key={`primary-${tag}`}>{tag} +</span>
@@ -558,7 +558,7 @@ export default function ScrimsTab({
                   />
                 ) : null}
                 <div className="min-w-0">
-                  <p className="text-[10px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                  <p className="text-2xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("scrims.todayOpponent", "Today's rival")}
                   </p>
                   <p className="truncate font-heading text-sm font-bold uppercase tracking-wide text-gray-900 dark:text-white">
@@ -584,7 +584,7 @@ export default function ScrimsTab({
             ) : null}
             {(todayContext.state === "PlayedNeedsReview" || todayContext.state === "Reviewed") && todayContext.report ? (
               <div className="mt-3 rounded-lg border border-gray-200 bg-transparent p-4 text-sm dark:border-navy-600">
-                <p className="font-heading text-[11px] font-bold uppercase tracking-wider text-gray-300">
+                <p className="font-heading text-xs font-bold uppercase tracking-wider text-gray-300">
                   {t("scrims.postScrimFeedback", "Post-scrim feedback")}
                 </p>
                 <p className="mt-1 text-gray-900 dark:text-gray-100">
@@ -639,7 +639,7 @@ export default function ScrimsTab({
                           {decisionImpactTags[option.id].map((tag) => (
                             <span
                               key={tag}
-                              className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400"
+                              className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400"
                             >
                               {tag}
                             </span>
@@ -690,7 +690,7 @@ export default function ScrimsTab({
                             {teamNameById.get(report.opponent_team_id) ?? report.opponent_team_id}
                           </p>
                         </div>
-                        <span className="shrink-0 text-[10px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                        <span className="shrink-0 text-2xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                           {report.won ? "W" : "L"}
                         </span>
                       </div>
@@ -722,8 +722,8 @@ export default function ScrimsTab({
                     {wins}-{losses} · {t("scrims.played", "Jugadas")}: {played} · {t("scrims.reportQuality", "Calidad")}: {weeklyContext.avgQuality}
                   </p>
                   <div className="mt-3 flex flex-wrap gap-2">
-                    <span className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">{weeklyMainGain}</span>
-                    <span className="text-[10px] font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">{weeklyMainFailure}</span>
+                    <span className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">{weeklyMainGain}</span>
+                    <span className="text-2xs font-heading uppercase tracking-wider text-gray-500 dark:text-gray-400">{weeklyMainFailure}</span>
                   </div>
                 </>
               ) : (
diff --git a/src/components/social/SocialEditor.tsx b/src/components/social/SocialEditor.tsx
index 08a4abce2..d788ef5b0 100644
--- a/src/components/social/SocialEditor.tsx
+++ b/src/components/social/SocialEditor.tsx
@@ -870,7 +870,188 @@ function AccountEditor({
                   }}
                 />
                 {team.name}
-              </label>
+              </label>                      <select
+                        value={template.language}
+                        onChange={(event) =>
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id ? { ...entry, language: event.target.value } : entry,
+                            ),
+                          )
+                        }
+                        className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                      >
+                        <option value="all">all</option>
+                        <option value="es">es</option>
+                        <option value="fr">fr</option>
+                        <option value="de">de</option>
+                        <option value="en">en</option>
+                      </select>
+                    </label>
+                    <label className="text-xs text-gray-500">
+                      slot
+                      <input
+                        value={template.slot}
+                        onChange={(event) =>
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id ? { ...entry, slot: event.target.value } : entry,
+                            ),
+                          )
+                        }
+                        className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                      />
+                    </label>
+                    <label className="text-xs text-gray-500">
+                      weight
+                      <input
+                        type="number"
+                        min={1}
+                        value={template.weight}
+                        onChange={(event) => {
+                          const nextWeight = Number.parseInt(event.target.value, 10);
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id
+                                ? { ...entry, weight: Number.isFinite(nextWeight) ? Math.max(1, nextWeight) : 1 }
+                                : entry,
+                            ),
+                          );
+                        }}
+                        className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                      />
+                    </label>
+                  </div>
+                  <input
+                    value={template.author_id ?? ""}
+                    onChange={(event) =>
+                      setTemplates((current) =>
+                        current.map((entry) =>
+                          entry.id === template.id
+                            ? { ...entry, author_id: event.target.value || null }
+                            : entry,
+                        ),
+                      )
+                    }
+                    placeholder="author_id (opcional)"
+                    className="w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                  />
+                  <textarea
+                    value={template.variants.join("\n---\n")}
+                    onChange={(event) =>
+                      setTemplates((current) =>
+                        current.map((entry) =>
+                          entry.id === template.id
+                            ? {
+                                ...entry,
+                                variants: event.target.value
+                                  .split("\n---\n")
+                                  .map((value) => value.trim())
+                                  .filter(Boolean),
+                              }
+                            : entry,
+                        ),
+                      )
+                    }
+                    className="min-h-[88px] w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                  />
+                  <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
+                    <label className="text-xs text-gray-500">
+                      requires_stomp
+                      <select
+                        value={
+                          typeof parsedConditions.requires_stomp === "boolean"
+                            ? String(parsedConditions.requires_stomp)
+                            : "any"
+                        }
+                        onChange={(event) => {
+                          const next: TemplateConditions = { ...parsedConditions };
+                          if (event.target.value === "any") delete next.requires_stomp;
+                          else next.requires_stomp = event.target.value === "true";
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id
+                                ? { ...entry, conditions_json: stringifyConditions(next) }
+                                : entry,
+                            ),
+                          );
+                        }}
+                        className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                      >
+                        <option value="any">any</option>
+                        <option value="true">true</option>
+                        <option value="false">false</option>
+                      </select>
+                    </label>
+                    <label className="text-xs text-gray-500">
+                      winner_team_slug
+                      <input
+                        value={parsedConditions.winner_team_slug ?? ""}
+                        onChange={(event) => {
+                          const next: TemplateConditions = {
+                            ...parsedConditions,
+                            winner_team_slug: event.target.value,
+                          };
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id
+                                ? { ...entry, conditions_json: stringifyConditions(next) }
+                                : entry,
+                            ),
+                          );
+                        }}
+                        className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-navy-500 dark:bg-navy-800 dark:text-gray-200"
+                      />
+                    </label>
+                    <label className="inline-flex items-center gap-1 self-end text-xs text-gray-500">
+                      <input
+                        type="checkbox"
+                        checked={Boolean(parsedConditions.requires_player_name)}
+                        onChange={(event) => {
+                          const next: TemplateConditions = {
+                            ...parsedConditions,
+                            requires_player_name: event.target.checked,
+                          };
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id
+                                ? { ...entry, conditions_json: stringifyConditions(next) }
+                                : entry,
+                            ),
+                          );
+                        }}
+                      />
+                      requires_player_name
+                    </label>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <label className="inline-flex items-center gap-1 text-xs text-gray-500">
+                      <input
+                        type="checkbox"
+                        checked={template.active}
+                        onChange={(event) =>
+                          setTemplates((current) =>
+                            current.map((entry) =>
+                              entry.id === template.id
+                                ? { ...entry, active: event.target.checked }
+                                : entry,
+                            ),
+                          )
+                        }
+                      />
+                      Activo
+                    </label>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setTemplates((current) => current.filter((entry) => entry.id !== template.id))
+                      }
+                      className="rounded-full border border-red-300 px-2 py-0.5 text-2xs font-bold uppercase tracking-wider text-red-500"
+                    >
+                      Eliminar
+                    </button>
+                  </div>
+                </div>
             );
           })}
         </div>
diff --git a/src/components/social/SocialTab.tsx b/src/components/social/SocialTab.tsx
index d1a9c64d3..7c44177c3 100644
--- a/src/components/social/SocialTab.tsx
+++ b/src/components/social/SocialTab.tsx
@@ -365,7 +365,7 @@ export default function SocialTab({ gameState, onGameUpdate }: SocialTabProps) {
               </span>
             </div>
 
-            <p className="mt-1 whitespace-pre-line text-[15px] leading-normal text-gray-900 dark:text-gray-100">
+            <p className="mt-1 whitespace-pre-line text-sm leading-normal text-gray-900 dark:text-gray-100">
               {post.body}
             </p>
 
diff --git a/src/components/squad/SquadRosterView.tsx b/src/components/squad/SquadRosterView.tsx
index 26a763ccd..28e073b8c 100644
--- a/src/components/squad/SquadRosterView.tsx
+++ b/src/components/squad/SquadRosterView.tsx
@@ -216,7 +216,7 @@ export default function SquadRosterView({
   };
 
   return (
-    <div className="max-w-7xl mx-auto flex flex-col gap-4">
+    <div className="w-[92%] max-w-[2000px] mx-auto flex flex-col gap-4">
       <Card>
         <div className="p-4 border-b border-[#22345d] bg-[#08132a] rounded-t-xl">
           <h3 className="text-sm font-heading font-bold text-blue-100 uppercase tracking-wide">
@@ -261,7 +261,7 @@ export default function SquadRosterView({
                     )}
                     <div className="min-w-0">
                       <p className="text-lg leading-none font-heading font-bold text-white truncate">{player.match_name}</p>
-                      <p className="mt-1 text-[11px] text-blue-200/70">{t("common.ovr", { defaultValue: "OVR" })} {ovr}</p>
+                      <p className="mt-1 text-xs text-blue-200/70">{t("common.ovr", { defaultValue: "OVR" })} {ovr}</p>
                     </div>
                   </div>
                 ) : (
@@ -269,7 +269,7 @@ export default function SquadRosterView({
                     <p className="text-xs font-heading font-bold uppercase tracking-wide text-amber-300">
                       {t("squad.missingRoleCoverage", { defaultValue: "Missing role coverage" })}
                     </p>
-                    <p className="mt-1 text-[11px] text-amber-100/80">
+                    <p className="mt-1 text-xs text-amber-100/80">
                       {t("squad.noRoleAvailable", { defaultValue: `No ${roleLabel} available` })}
                     </p>
                   </div>
@@ -383,10 +383,10 @@ export default function SquadRosterView({
 
                     <div className="min-w-0 flex items-center gap-2">
                       <div className="min-w-0">
-                        <p className="text-[28px] leading-none font-heading font-black text-amber-300 xl:hidden">{ovr}</p>
+                        <p className="text-3xl leading-none font-heading font-black text-amber-300 xl:hidden">{ovr}</p>
                         <p className="text-xl leading-none font-heading font-bold text-white truncate">{player.match_name}</p>
-                        <p className="text-[12px] text-blue-200/70 truncate">{player.full_name}</p>
-                        <p className="text-[11px] uppercase tracking-wide text-blue-200/70 xl:hidden">{ROLE_LABEL[role]}</p>
+                        <p className="text-xs text-blue-200/70 truncate">{player.full_name}</p>
+                        <p className="text-xs uppercase tracking-wide text-blue-200/70 xl:hidden">{ROLE_LABEL[role]}</p>
                       </div>
                       {wrongPos ? (
                         <span className="text-amber-400 shrink-0" title={t("squad.outOfPositionTooltip", { defaultValue: "Fuera de rol" })}>
@@ -396,8 +396,8 @@ export default function SquadRosterView({
                     </div>
 
                     <div className="hidden xl:block text-center">
-                      <p className="text-[30px] leading-none font-heading font-black text-amber-300">{ovr}</p>
-                      <p className="text-[11px] uppercase tracking-wide text-blue-200/65">{t("common.ovr")}</p>
+                      <p className="text-3xl leading-none font-heading font-black text-amber-300">{ovr}</p>
+                      <p className="text-xs uppercase tracking-wide text-blue-200/65">{t("common.ovr")}</p>
                     </div>
 
                     <div className="hidden xl:flex items-center gap-1.5 justify-start">
@@ -413,7 +413,7 @@ export default function SquadRosterView({
                       })}
                     </div>
 
-                    <div className="hidden xl:block min-w-[150px]">
+                    <div className="hidden xl:block min-w-36">
                       <div className="flex items-center justify-between mb-1">
                         <p className="text-[10px] uppercase tracking-wide text-blue-200/60">{t("common.morale")}</p>
                         <p className="text-[11px] font-heading font-bold text-emerald-300">{player.morale}</p>
@@ -423,7 +423,7 @@ export default function SquadRosterView({
                       </div>
                     </div>
 
-                    <div className="hidden xl:block min-w-[150px]">
+                    <div className="hidden xl:block min-w-36">
                       <div className="flex items-center justify-between mb-1">
                         <p className="text-[10px] uppercase tracking-wide text-blue-200/60">{t("common.condition")}</p>
                         <p className="text-[11px] font-heading font-bold text-amber-300">{player.condition}</p>
@@ -433,12 +433,12 @@ export default function SquadRosterView({
                       </div>
                     </div>
 
-                    <div className="hidden xl:block text-right min-w-[88px]">
+                    <div className="hidden xl:block text-right min-w-24">
                       <p className="text-sm font-heading font-bold text-white">{formatVal(annualWage)}</p>
                       <p className="text-[11px] text-blue-200/60">{t("common.per_year_with_slash")}</p>
                     </div>
 
-                    <div className="hidden xl:flex items-center justify-end gap-2 min-w-[100px] text-blue-200/70">
+                    <div className="hidden xl:flex items-center justify-end gap-2 min-w-24 text-blue-200/70">
                       <span className="text-sm">{formatContractMonth(player.contract_end)}</span>
                       <ChevronRight className="w-4 h-4" />
                     </div>
@@ -446,8 +446,8 @@ export default function SquadRosterView({
                     <div className="xl:hidden mt-2 grid grid-cols-2 gap-3">
                       <div>
                         <div className="flex items-center justify-between mb-1">
-                          <p className="text-[10px] uppercase tracking-wide text-blue-200/60">{t("common.morale")}</p>
-                          <p className="text-[11px] font-heading font-bold text-emerald-300">{player.morale}</p>
+                          <p className="text-2xs uppercase tracking-wide text-blue-200/60">{t("common.morale")}</p>
+                          <p className="text-xs font-heading font-bold text-emerald-300">{player.morale}</p>
                         </div>
                         <div className="w-full h-1.5 rounded-full bg-[#0a1b37] overflow-hidden">
                           <div className="h-full bg-emerald-400" style={{ width: `${clampBar(player.morale)}%` }} />
@@ -455,8 +455,8 @@ export default function SquadRosterView({
                       </div>
                       <div>
                         <div className="flex items-center justify-between mb-1">
-                          <p className="text-[10px] uppercase tracking-wide text-blue-200/60">{t("common.condition")}</p>
-                          <p className="text-[11px] font-heading font-bold text-amber-300">{player.condition}</p>
+                          <p className="text-2xs uppercase tracking-wide text-blue-200/60">{t("common.condition")}</p>
+                          <p className="text-xs font-heading font-bold text-amber-300">{player.condition}</p>
                         </div>
                         <div className="w-full h-1.5 rounded-full bg-[#0a1b37] overflow-hidden">
                           <div className="h-full bg-amber-400" style={{ width: `${clampBar(player.condition)}%` }} />
diff --git a/src/components/staff/StaffTab.tsx b/src/components/staff/StaffTab.tsx
index a1e3fcc35..8da454af6 100644
--- a/src/components/staff/StaffTab.tsx
+++ b/src/components/staff/StaffTab.tsx
@@ -279,7 +279,7 @@ export default function StaffTab({ gameState, onGameUpdate }: StaffTabProps) {
               {TEAM_IMPACT_ROWS.map((row) => (
                 <span
                   key={row.key}
-                  className="inline-flex items-center gap-1.5 rounded-full bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-[11px] font-heading uppercase tracking-wider text-primary-600 dark:text-primary-300"
+                  className="inline-flex items-center gap-1.5 rounded-full bg-primary-50 dark:bg-primary-500/10 px-2 py-1 text-xs font-heading uppercase tracking-wider text-primary-600 dark:text-primary-300"
                 >
                     <span>{t(row.labelKey)}</span>
                   <span className="font-bold tabular-nums">
@@ -362,13 +362,13 @@ export default function StaffTab({ gameState, onGameUpdate }: StaffTabProps) {
                       {/* Specialization + Wage */}
                       <div className="flex flex-wrap gap-1.5 mt-1.5">
                         {staff.specialization && (
-                          <span className="inline-flex items-center gap-1 text-[10px] bg-accent-50 dark:bg-accent-500/10 text-accent-600 dark:text-accent-400 px-1.5 py-0.5 rounded font-heading uppercase tracking-wider">
+                          <span className="inline-flex items-center gap-1 text-2xs bg-accent-50 dark:bg-accent-500/10 text-accent-600 dark:text-accent-400 px-1.5 py-0.5 rounded font-heading uppercase tracking-wider">
                             <Star className="w-3 h-3" />{" "}
                             {t(`staff.specializations.${staff.specialization}`)}
                           </span>
                         )}
                         {staff.wage > 0 && (
-                          <span className="text-[10px] bg-gray-100 dark:bg-navy-700 text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded font-heading uppercase tracking-wider">
+                          <span className="text-2xs bg-gray-100 dark:bg-navy-700 text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded font-heading uppercase tracking-wider">
                             {formatWeeklyAmount(
                               formatVal(staff.wage),
                               weeklySuffix,
@@ -398,14 +398,14 @@ export default function StaffTab({ gameState, onGameUpdate }: StaffTabProps) {
                       </div>
 
                       <div className="mt-3">
-                        <p className="text-[10px] font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5">
+                        <p className="text-2xs font-heading font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5">
                           {t("staff.lolImpactTitle")}
                         </p>
                         <div className="flex flex-wrap gap-1.5">
                           {impactRows.map((row) => (
                             <span
                               key={row.labelKey}
-                              className="inline-flex items-center gap-1 rounded bg-navy-50 dark:bg-navy-700/70 px-1.5 py-0.5 text-[10px] font-heading uppercase tracking-wider text-gray-600 dark:text-gray-300"
+                              className="inline-flex items-center gap-1 rounded bg-navy-50 dark:bg-navy-700/70 px-1.5 py-0.5 text-2xs font-heading uppercase tracking-wider text-gray-600 dark:text-gray-300"
                             >
                               <span>{t(row.labelKey)}</span>
                               <span className="font-bold tabular-nums text-primary-500">
diff --git a/src/components/tactics/TacticsTab.tsx b/src/components/tactics/TacticsTab.tsx
index 874b481ed..6651f5d89 100644
--- a/src/components/tactics/TacticsTab.tsx
+++ b/src/components/tactics/TacticsTab.tsx
@@ -290,7 +290,7 @@ function Section<T extends string>({
                 <span className="block font-heading text-sm font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">
                   {option.label}
                 </span>
-                <span className="mt-1 block text-[11px] leading-tight text-gray-500 dark:text-gray-400">
+                <span className="mt-1 block text-xs leading-tight text-gray-500 dark:text-gray-400">
                   {option.description}
                 </span>
               </button>
@@ -662,7 +662,7 @@ export default function TacticsTab({
                         <p className="truncate text-sm font-heading font-bold text-gray-900 dark:text-gray-100">
                           {row.playerName}
                         </p>
-                        <p className="text-[11px] text-gray-500 dark:text-gray-300">
+                        <p className="text-xs text-gray-500 dark:text-gray-300">
                           {Math.round(row.base)} OVR · {roleMetaLabels[row.role]}
                         </p>
                       </div>
@@ -701,7 +701,7 @@ export default function TacticsTab({
                           {row.modifier.toFixed(1)}
                         </p>
                       </div>
-                      <p className="text-[10px] text-gray-500 dark:text-gray-400">
+                      <p className="text-2xs text-gray-500 dark:text-gray-400">
                         ±{row.variance.toFixed(1)} {t("tactics.lol.variance")}
                       </p>
                     </div>
diff --git a/src/components/teamProfile/TeamProfile.tsx b/src/components/teamProfile/TeamProfile.tsx
index f84588cae..0cfc1ebfb 100644
--- a/src/components/teamProfile/TeamProfile.tsx
+++ b/src/components/teamProfile/TeamProfile.tsx
@@ -25,7 +25,7 @@ export default function TeamProfile({
   const { recentMatches } = useTeamProfileStats(team.id);
 
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="w-[92%] max-w-[2000px] mx-auto">
       <button
         onClick={onClose}
         className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors mb-4"
diff --git a/src/components/teamProfile/TeamProfileHistoryCard.tsx b/src/components/teamProfile/TeamProfileHistoryCard.tsx
index d0d05047b..0dba06f3c 100644
--- a/src/components/teamProfile/TeamProfileHistoryCard.tsx
+++ b/src/components/teamProfile/TeamProfileHistoryCard.tsx
@@ -19,66 +19,68 @@ export default function TeamProfileHistoryCard({
     <Card className="lg:col-span-3">
       <CardHeader>{t("teamProfile.seasonHistory")}</CardHeader>
       <CardBody className="p-0">
-        <table className="w-full text-left border-collapse">
-          <thead>
-            <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                {t("schedule.season", { number: "" })}
-              </th>
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
-                {t("common.position")}
-              </th>
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
-                {t("common.played")}
-              </th>
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
-                {t("common.won")}
-              </th>
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
-                {t("common.lost")}
-              </th>
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
-                {t("teamProfile.winRate")}
-              </th>
-              <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
-                {t("common.pts")}
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
-            {history.map((record, index) => {
-              const decisiveGames = record.won + record.lost;
-              const winRate = decisiveGames > 0
-                ? `${Math.round((record.won / decisiveGames) * 100)}%`
-                : "0%";
-
-              return (
-              <tr key={index}>
-                <td className="py-3 px-5 font-semibold text-sm text-gray-800 dark:text-gray-200">
-                  {record.season}/{record.season + 1}
-                </td>
-                <td className="py-3 px-5 text-center font-heading font-bold text-sm text-primary-500">
-                  #{record.league_position}
-                </td>
-                <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
-                  {record.played}
-                </td>
-                <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
-                  {record.won}
-                </td>
-                <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
-                  {record.lost}
-                </td>
-                <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
-                  {winRate}
-                </td>
-                <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
-                  {record.points}
-                </td>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                  {t("schedule.season", { number: "" })}
+                </th>
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                  {t("common.position")}
+                </th>
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                  {t("common.played")}
+                </th>
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                  {t("common.won")}
+                </th>
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                  {t("common.lost")}
+                </th>
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                  {t("teamProfile.winRate")}
+                </th>
+                <th className="py-3 px-5 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                  {t("common.pts")}
+                </th>
               </tr>
-            )})}
-          </tbody>
-        </table>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
+              {history.map((record, index) => {
+                const decisiveGames = record.won + record.lost;
+                const winRate = decisiveGames > 0
+                  ? `${Math.round((record.won / decisiveGames) * 100)}%`
+                  : "0%";
+
+                return (
+                <tr key={index}>
+                  <td className="py-3 px-5 font-semibold text-sm text-gray-800 dark:text-gray-200">
+                    {record.season}/{record.season + 1}
+                  </td>
+                  <td className="py-3 px-5 text-center font-heading font-bold text-sm text-primary-500">
+                    #{record.league_position}
+                  </td>
+                  <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                    {record.played}
+                  </td>
+                  <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                    {record.won}
+                  </td>
+                  <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                    {record.lost}
+                  </td>
+                  <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                    {winRate}
+                  </td>
+                  <td className="py-3 px-5 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                    {record.points}
+                  </td>
+                </tr>
+              )})}
+            </tbody>
+          </table>
+        </div>
       </CardBody>
     </Card>
   );
diff --git a/src/components/teamProfile/TeamProfileRecentMatchesCard.tsx b/src/components/teamProfile/TeamProfileRecentMatchesCard.tsx
index 01265a544..596e17ef3 100644
--- a/src/components/teamProfile/TeamProfileRecentMatchesCard.tsx
+++ b/src/components/teamProfile/TeamProfileRecentMatchesCard.tsx
@@ -49,7 +49,7 @@ export default function TeamProfileRecentMatchesCard({
               </div>
 
               <div className="text-center">
-                <p className="text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                <p className="text-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {sideLabel}
                 </p>
                 <p className="font-heading font-bold text-base text-gray-700 dark:text-gray-200 tabular-nums">
@@ -58,7 +58,7 @@ export default function TeamProfileRecentMatchesCard({
               </div>
 
               <div className="text-center">
-                <p className="text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                <p className="text-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {scoreLabel}
                 </p>
                 <p className="font-heading font-bold text-base text-gray-700 dark:text-gray-200 tabular-nums">
@@ -67,7 +67,7 @@ export default function TeamProfileRecentMatchesCard({
               </div>
 
               <div className="text-center">
-                <p className="text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                <p className="text-xs uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {economyLabel}
                 </p>
                 <p className="font-heading font-bold text-base text-gray-700 dark:text-gray-200 tabular-nums">
diff --git a/src/components/teams/TeamsListTab.tsx b/src/components/teams/TeamsListTab.tsx
index d939c496a..1726379e0 100644
--- a/src/components/teams/TeamsListTab.tsx
+++ b/src/components/teams/TeamsListTab.tsx
@@ -41,7 +41,7 @@ export default function TeamsListTab({ gameState, onSelectTeam }: TeamsListTabPr
   }).sort((a, b) => a.leaguePos - b.leaguePos);
 
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="w-[92%] max-w-[2000px] mx-auto">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {teamsData.map(({ team, roster, avgOvr, totalValue, leaguePos, standing }) => {
           const isUser = team.id === userTeamId;
diff --git a/src/components/tournaments/TournamentsTab.tsx b/src/components/tournaments/TournamentsTab.tsx
index 38f9d39bb..bf25ac33c 100644
--- a/src/components/tournaments/TournamentsTab.tsx
+++ b/src/components/tournaments/TournamentsTab.tsx
@@ -51,41 +51,11 @@ export default function TournamentsTab({
     if (loading) return <div className="text-center py-12"><Loader2 className="w-8 h-8 animate-spin text-gray-400 mx-auto" /></div>;
     const comps = allComps ?? [];
     return (
-      <div className="flex flex-col gap-4">
-        <h2 className="text-lg font-heading font-bold uppercase tracking-wide text-gray-800 dark:text-gray-100">
-          {t("tournaments.allCompetitions", "All Competitions")}
-        </h2>
-        {comps.length === 0 ? (
-          <div className="text-center py-12"><Trophy className="w-12 h-12 text-gray-300 dark:text-navy-600 mx-auto mb-3" />
-            <p className="text-gray-500 dark:text-gray-400 text-sm">{t("tournaments.noActive", "No active tournaments.")}</p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {comps.map((comp) => (
-              <button key={comp.id} onClick={() => setSelectedCompId(comp.id)}
-                className="text-left transition-all duration-200 rounded-xl hover:scale-[1.01]">
-                <Card className="h-full">
-                  <div className="p-5">
-                    <div className="flex items-center gap-3 mb-3">
-                      <div className="w-12 h-12 rounded-lg bg-gray-100 dark:bg-navy-700 flex items-center justify-center overflow-hidden">
-                        {comp.logo ? <img src={comp.logo} alt="" className="w-10 h-10 object-contain" />
-                          : <Globe className="w-6 h-6 text-gray-400" />}
-                      </div>
-                      <div>
-                        <h3 className="font-heading font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide text-sm">{comp.name}</h3>
-                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{comp.region}</p>
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
-                      <Users className="w-3.5 h-3.5" /><span>{comp.team_count} {t("tournaments.teams", "teams")}</span>
-                    </div>
-                    {comp.id === userTeamPrefix && <Badge variant="success" size="sm" className="mt-2">{t("tournaments.yourLeague", "Your League")}</Badge>}
-                  </div>
-                </Card>
-              </button>
-            ))}
-          </div>
-        )}
+      <div className="w-[92%] max-w-[2000px] mx-auto text-center py-12">
+        <Trophy className="w-12 h-12 text-gray-300 dark:text-navy-600 mx-auto mb-3" />
+        <p className="text-gray-500 dark:text-gray-400 text-sm">
+          {t("tournaments.noActive")}
+        </p>
       </div>
     );
   }
@@ -151,12 +121,30 @@ export default function TournamentsTab({
   const hasAcademyPlayoffsStarted = academyPlayoffFixtures.length > 0;
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-3">
-        <button onClick={() => setSelectedCompId(null)} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-navy-700"><ArrowLeft className="w-5 h-5" /></button>
-        <h2 className="text-lg font-heading font-bold uppercase tracking-wide text-gray-800 dark:text-gray-100">{league.name}</h2>
-        {selectedCompId === userTeamPrefix && <Badge variant="success" size="sm">{t("tournaments.yourLeague", "Your League")}</Badge>}
-      </div>
+    <div className="w-[92%] max-w-[2000px] mx-auto">
+      {isPreseason && (
+        <Card accent="accent" className="mb-5">
+          <CardBody>
+            <div className="flex flex-col gap-1.5">
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="accent" size="sm">
+                  {t(`season.phases.${seasonContext.phase}`)}
+                </Badge>
+                <span className="text-sm font-heading font-bold text-gray-800 dark:text-gray-100">
+                  {seasonContext.season_start
+                    ? t("season.startsOn", {
+                        date: formatMatchDate(seasonContext.season_start),
+                      })
+                    : t("season.noOpener")}
+                </span>
+              </div>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {t("season.tournamentsPreseasonHint")}
+              </p>
+            </div>
+          </CardBody>
+        </Card>
+      )}
 
       {/* Standings table */}
       <Card>
@@ -249,32 +237,53 @@ export default function TournamentsTab({
                   </p>
                 </div>
               ) : (
-                <table className="w-full text-left border-collapse">
-                  <thead>
-                    <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
-                      <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-8">#</th>
-                      <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t("common.team")}</th>
-                      <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("common.played")}</th>
-                      <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("common.won")}</th>
-                      <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("common.lost")}</th>
-                      <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("tournaments.mapScore")}</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
-                    {standings.map((entry, idx) => {
-                      const isUser = entry.team_id === userTeamId;
-                      return (
-                        <tr
-                          key={entry.team_id}
-                          onClick={() => onSelectTeam(entry.team_id)}
-                          className={`cursor-pointer transition-colors ${isUser ? "bg-primary-50 dark:bg-primary-500/10" : "hover:bg-gray-50 dark:hover:bg-navy-700/50"}`}
-                        >
-                          <td className="py-2 px-3 font-heading font-bold text-sm text-gray-400">{idx + 1}</td>
-                          <td className={`py-2 px-3 font-semibold text-sm ${isUser ? "text-primary-600 dark:text-primary-400" : "text-gray-800 dark:text-gray-200"}`}>{getTeamName(gameState.teams, entry.team_id)}</td>
-                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.played}</td>
-                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.won}</td>
-                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.lost}</td>
-                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{getStandingKillsFor(entry)}-{getStandingKillsAgainst(entry)}</td>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-left border-collapse">
+                    <thead>
+                      <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-8">
+                          #
+                        </th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                          {t("common.team")}
+                        </th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                          {t("common.played")}
+                        </th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                          {t("common.won")}
+                        </th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                          {t("common.lost")}
+                        </th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">
+                          {t("tournaments.mapScore")}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
+                      {standings.map((entry, idx) => {
+                        const isUser = entry.team_id === userTeamId;
+                        return (
+                          <tr
+                            key={entry.team_id}
+                            onClick={() => onSelectTeam(entry.team_id)}
+                            className={`cursor-pointer transition-colors ${isUser ? "bg-primary-50 dark:bg-primary-500/10" : "hover:bg-gray-50 dark:hover:bg-navy-700/50"}`}
+                          >
+                            {getTeamName(gameState.teams, entry.team_id)}
+                          </td>
+                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                            {entry.played}
+                          </td>
+                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                            {entry.won}
+                          </td>
+                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                            {entry.lost}
+                          </td>
+                          <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">
+                            {getStandingKillsFor(entry)}-{getStandingKillsAgainst(entry)}
+                          </td>
                         </tr>
                       );
                     })}
@@ -297,8 +306,8 @@ export default function TournamentsTab({
                     const first = fixtures[0];
                     return (
                       <div key={`overview-md-${md}`} className="px-4 py-3">
-                        <p className="text-[11px] uppercase tracking-wider text-gray-500 dark:text-gray-400 font-heading font-bold">
-                          {first.match_type === "Playoffs"
+                        <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 font-heading font-bold">
+                          {first.competition === "Playoffs"
                             ? `${t("schedule.playoffs")} · ${t("schedule.round", { number: md })}`
                             : t("schedule.matchday", { number: md })}
                         </p>
@@ -337,15 +346,46 @@ export default function TournamentsTab({
               ) : null}
 
               <Card>
-                <CardBody>
-                  <div className="flex items-center gap-3">
-                    <Badge variant="primary" size="md">
-                      #{userTeamStanding}
-                    </Badge>
-                    <div>
-                      <p className="font-heading font-bold text-sm text-gray-900 dark:text-white">{getTeamName(gameState.teams, userTeamId)}</p>
-                      <p className="text-xs text-gray-500">{t("tournaments.yourTeam")}</p>
-                    </div>
+                <CardHeader>{t("tournaments.leagueTable")}</CardHeader>
+                <CardBody className="p-0">
+                  <div className="overflow-x-auto">
+                  <table className="w-full text-left border-collapse">
+                    <thead>
+                      <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-8">#</th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t("common.team")}</th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("common.played")}</th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("common.won")}</th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("common.lost")}</th>
+                        <th className="py-2 px-3 font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-center">{t("tournaments.mapScore")}</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100 dark:divide-navy-600">
+                      {academyStandings.map((entry, idx) => {
+                        const isUserAcademy = gameState.manager.team_id
+                          ? gameState.teams.some(
+                              (team) =>
+                                team.id === entry.team_id &&
+                                team.parent_team_id === gameState.manager.team_id,
+                            )
+                          : false;
+                        return (
+                          <tr
+                            key={`academy-${entry.team_id}`}
+                            onClick={() => onSelectTeam(entry.team_id)}
+                            className={`cursor-pointer transition-colors ${isUserAcademy ? "bg-primary-50 dark:bg-primary-500/10" : "hover:bg-gray-50 dark:hover:bg-navy-700/50"}`}
+                          >
+                            <td className="py-2 px-3 font-heading font-bold text-sm text-gray-400">{idx + 1}</td>
+                            <td className={`py-2 px-3 font-semibold text-sm ${isUserAcademy ? "text-primary-600 dark:text-primary-400" : "text-gray-800 dark:text-gray-200"}`}>{getTeamName(gameState.teams, entry.team_id)}</td>
+                            <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.played}</td>
+                            <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.won}</td>
+                            <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{entry.lost}</td>
+                            <td className="py-2 px-3 text-center text-sm text-gray-600 dark:text-gray-400 tabular-nums">{getStandingKillsFor(entry)}-{getStandingKillsAgainst(entry)}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
                   </div>
                 </CardBody>
               </Card>
diff --git a/src/components/training/TrainingGroupsCard.tsx b/src/components/training/TrainingGroupsCard.tsx
index a8c98cf1e..9292a2f1f 100644
--- a/src/components/training/TrainingGroupsCard.tsx
+++ b/src/components/training/TrainingGroupsCard.tsx
@@ -194,7 +194,7 @@ export default function TrainingGroupsCard({
                       </option>
                     ))}
                   </Select>
-                  <span className="text-[10px] text-gray-400 tabular-nums">
+                  <span className="text-2xs text-gray-400 tabular-nums">
                     {count}
                   </span>
                   <button
@@ -220,16 +220,16 @@ export default function TrainingGroupsCard({
             <table className="w-full text-left text-sm">
               <thead>
                 <tr className="bg-gray-50 dark:bg-navy-700/50">
-                  <th className="py-2 px-3 text-[10px] font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
+                  <th className="py-2 px-3 text-2xs font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
                     {t("common.player")}
                   </th>
-                  <th className="py-2 px-3 text-[10px] font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
+                  <th className="py-2 px-3 text-2xs font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
                     {t("common.position")}
                   </th>
-                  <th className="py-2 px-3 text-[10px] font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
+                  <th className="py-2 px-3 text-2xs font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
                     {t("training.groups.group")}
                   </th>
-                  <th className="py-2 px-3 text-[10px] font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
+                  <th className="py-2 px-3 text-2xs font-heading font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400">
                     {t("training.effectiveFocus")}
                   </th>
                 </tr>
diff --git a/src/components/training/TrainingSettingsPanel.tsx b/src/components/training/TrainingSettingsPanel.tsx
index 80766f976..926bca809 100644
--- a/src/components/training/TrainingSettingsPanel.tsx
+++ b/src/components/training/TrainingSettingsPanel.tsx
@@ -72,7 +72,7 @@ export default function TrainingSettingsPanel({
                 <p className="font-heading font-bold text-sm uppercase tracking-wider text-gray-800 dark:text-gray-200">
                   {t(`training.schedules.${scheduleId}.label`)}
                 </p>
-                <p className="text-[11px] text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                   {t(`training.schedules.${scheduleId}.desc`)}
                 </p>
               </button>
@@ -123,7 +123,7 @@ export default function TrainingSettingsPanel({
                     {trainingFocusAttrs[focusId].map((attribute) => (
                       <span
                         key={attribute}
-                        className="text-[10px] bg-gray-100 dark:bg-navy-700 text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded font-heading uppercase tracking-wider"
+                        className="text-2xs bg-gray-100 dark:bg-navy-700 text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded font-heading uppercase tracking-wider"
                       >
                         {statLabel(attribute)}
                       </span>
@@ -157,7 +157,7 @@ export default function TrainingSettingsPanel({
                   >
                     {t(`training.intensities.${intensityId}.label`)}
                   </p>
-                  <p className="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
+                  <p className="text-2xs text-gray-500 dark:text-gray-400 mt-0.5">
                     {t(`training.intensities.${intensityId}.desc`)}
                   </p>
                 </button>
diff --git a/src/components/training/TrainingTab.tsx b/src/components/training/TrainingTab.tsx
index e4cc10180..eeb05cbd1 100644
--- a/src/components/training/TrainingTab.tsx
+++ b/src/components/training/TrainingTab.tsx
@@ -304,7 +304,7 @@ export default function TrainingTab({
   ];
 
   return (
-    <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-5">
+    <div className="w-[92%] max-w-[2000px] mx-auto grid grid-cols-1 lg:grid-cols-3 2xl:grid-cols-4 gap-5">
       <div className="lg:col-span-2 flex flex-col gap-5">
         {staffAdvice ? (
           <div
@@ -412,7 +412,7 @@ export default function TrainingTab({
                         <p className="truncate text-sm font-heading font-bold uppercase tracking-wider text-gray-800 dark:text-gray-100">
                           {player.match_name}
                         </p>
-                        <p className={`text-[11px] font-heading uppercase tracking-wide ${soloQTierClass(soloQ.tier)}`}>
+                        <p className={`text-xs font-heading uppercase tracking-wide ${soloQTierClass(soloQ.tier)}`}>
                           {soloQTierLabel} · {soloQ.lp} LP
                           <span className={`ml-1 ${soloQ.delta >= 0 ? "text-emerald-300" : "text-rose-300"}`}>
                             {soloQ.delta >= 0 ? `+${soloQ.delta}` : soloQ.delta}
diff --git a/src/components/transfers/TransferBidModal.tsx b/src/components/transfers/TransferBidModal.tsx
index 78450c414..2d05670c2 100644
--- a/src/components/transfers/TransferBidModal.tsx
+++ b/src/components/transfers/TransferBidModal.tsx
@@ -144,7 +144,7 @@ export default function TransferBidModal({
         />
         {myTeam && bidFee !== null && bidProjection ? (
           <div className="rounded-lg border border-gray-200 dark:border-navy-700 bg-white/70 dark:bg-navy-900/40 p-3 mb-3 space-y-2">
-            <p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            <p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("transfers.bidImpactTitle", {
                 defaultValue: "Projected impact",
               })}
diff --git a/src/components/transfers/TransferNegotiationHistory.tsx b/src/components/transfers/TransferNegotiationHistory.tsx
index a5e88538e..ebf13a23d 100644
--- a/src/components/transfers/TransferNegotiationHistory.tsx
+++ b/src/components/transfers/TransferNegotiationHistory.tsx
@@ -31,7 +31,7 @@ export default function TransferNegotiationHistory({
 
   return (
     <div className="rounded-lg border border-gray-200 dark:border-navy-700 bg-white/70 dark:bg-navy-900/40 p-3 mb-3 space-y-2">
-      <p className="text-[11px] font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+      <p className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
         {t("transfers.negotiationHistory")}
       </p>
       {managerFee !== null && managerFee !== undefined ? (
diff --git a/src/components/transfers/TransfersTab.tsx b/src/components/transfers/TransfersTab.tsx
index 840517dc6..992d0cc15 100644
--- a/src/components/transfers/TransfersTab.tsx
+++ b/src/components/transfers/TransfersTab.tsx
@@ -417,7 +417,7 @@ export default function TransfersTab({
     bidProjection.exceeds_finance;
 
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="w-[92%] max-w-[2000px] mx-auto">
       {/* Budget header */}
       {myTeam && (
         <Card accent="primary" className="mb-5">
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index d29b85ed6..ec28f211f 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -238,7 +238,7 @@ export function Select({
   };
 
   const sizes = {
-    xs: "py-0.5 text-[10px]",
+    xs: "py-0.5 text-2xs",
     sm: "py-1.5 text-xs",
     md: "py-2 text-sm",
   };
@@ -255,7 +255,7 @@ export function Select({
   const chevronSize = { xs: "w-3 h-3", sm: "w-4 h-4", md: "w-4 h-4" }[
     selectSize
   ];
-  const optionTextSize = { xs: "text-[10px]", sm: "text-xs", md: "text-sm" }[
+  const optionTextSize = { xs: "text-2xs", sm: "text-xs", md: "text-sm" }[
     selectSize
   ];
 
diff --git a/src/components/worldEditor/WorldEditorTab.tsx b/src/components/worldEditor/WorldEditorTab.tsx
index 16166b2e3..3c23f7cca 100644
--- a/src/components/worldEditor/WorldEditorTab.tsx
+++ b/src/components/worldEditor/WorldEditorTab.tsx
@@ -532,7 +532,7 @@ export default function WorldEditorTab({ onBack }: WorldEditorTabProps) {
 
   return (
     <div className="min-h-screen bg-gray-100 p-6 dark:bg-navy-900">
-      <div className="mx-auto max-w-7xl space-y-4">
+      <div className="w-[92%] max-w-[2000px] mx-auto space-y-4">
         <div className="flex items-center justify-between gap-3">
           <div className="flex items-center gap-3">
             {onBack ? (
@@ -615,7 +615,7 @@ export default function WorldEditorTab({ onBack }: WorldEditorTabProps) {
                     <button type="button" onClick={importPlayerRatingsFromExcel} disabled={!excelImportText.trim()} className="mt-2 w-full rounded-lg border border-primary-400 px-3 py-2 text-xs font-heading font-bold uppercase tracking-wider text-primary-600 hover:bg-primary-500/10 disabled:opacity-50 dark:text-primary-300">
                       Aplicar ratings por Player
                     </button>
-                    <p className="mt-2 text-[11px] text-gray-500 dark:text-gray-400">Busca por nombre in-game exacto normalizado. Ignora medias calculadas del Excel.</p>
+                    <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">Busca por nombre in-game exacto normalizado. Ignora medias calculadas del Excel.</p>
                   </div>
                 ) : null}
                 <div className="relative mb-3">
@@ -751,7 +751,7 @@ function ModeButton({ active, onClick, children }: { active: boolean; onClick: (
 }
 
 function ScopeButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
-  return <button type="button" onClick={onClick} className={`rounded-lg px-2 py-1.5 text-[11px] font-heading font-bold uppercase tracking-wider ${active ? "bg-accent-500 text-white" : "bg-gray-100 text-gray-500 dark:bg-navy-700 dark:text-gray-300"}`}>{children}</button>;
+  return <button type="button" onClick={onClick} className={`rounded-lg px-2 py-1.5 text-xs font-heading font-bold uppercase tracking-wider ${active ? "bg-accent-500 text-white" : "bg-gray-100 text-gray-500 dark:bg-navy-700 dark:text-gray-300"}`}>{children}</button>;
 }
 
 function DeleteButton({ onClick, children }: { onClick: () => void; children: ReactNode }) {
diff --git a/src/components/youthAcademy/YouthAcademyTab.tsx b/src/components/youthAcademy/YouthAcademyTab.tsx
index 35208c957..09d32e41b 100644
--- a/src/components/youthAcademy/YouthAcademyTab.tsx
+++ b/src/components/youthAcademy/YouthAcademyTab.tsx
@@ -236,7 +236,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
             <div className="text-center">
               <Users className="w-5 h-5 text-gray-400 dark:text-gray-500 mx-auto mb-1" />
               <p className="font-heading font-bold text-2xl text-gray-800 dark:text-gray-100">{youthPlayers.length}</p>
-              <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider">
+              <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider">
                 {t("youthAcademy.academyPlayersStartingMayus")}
               </p>
             </div>
@@ -250,7 +250,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
               <div className="w-full max-w-[120px] mx-auto mt-1.5 h-1.5 rounded-full bg-gray-200 dark:bg-navy-600 overflow-hidden">
                 <div className="h-full rounded-full bg-accent-400" style={{ width: `${avgOvr}%` }} />
               </div>
-              <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-1">
+              <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-1">
                 {t("youthAcademy.avgOvr")}
               </p>
             </div>
@@ -272,7 +272,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
                   <div className="h-full rounded-full bg-green-500" style={{ width: `${avgPotential}%` }} />
                 </div>
               )}
-              <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-1">
+              <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-1">
                 {t("youthAcademy.avgPotential")}
               </p>
             </div>
@@ -284,11 +284,11 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
               <Sparkles className="w-5 h-5 text-accent-400 mx-auto mb-1" />
               <p className="font-heading font-bold text-2xl text-accent-500">{highPotential}</p>
               {highPotential > 0 && (
-                <span className="inline-flex items-center font-bold font-heading uppercase tracking-wider rounded-md bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400 px-1.5 py-0.5 text-[10px]">
+                <span className="inline-flex items-center font-bold font-heading uppercase tracking-wider rounded-md bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400 px-1.5 py-0.5 text-2xs">
                   {t("youthAcademy.highPotentialBadge", "Talento")}
                 </span>
               )}
-              <p className="text-[10px] text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-1">
+              <p className="text-2xs text-gray-400 dark:text-gray-500 font-heading uppercase tracking-wider mt-1">
                 {t("youthAcademy.highPotential")}
               </p>
             </div>
@@ -370,7 +370,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
                               loading="lazy"
                             />
                           ) : (
-                            <span className="text-[10px] font-heading text-gray-300">{option.source_team_short_name}</span>
+                            <span className="text-2xs font-heading text-gray-300">{option.source_team_short_name}</span>
                           )}
                         </div>
                         <div className="min-w-0">
@@ -438,6 +438,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
                   className="w-full pl-9 pr-3 py-1.5 text-sm bg-gray-50 dark:bg-navy-700 border border-gray-200 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-gray-800 dark:text-gray-100 placeholder-gray-400"
                 />
               </div>
+              <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
               <thead>
                 <tr className="bg-gray-50 dark:bg-navy-800 border-b border-gray-200 dark:border-navy-600 text-xs">
@@ -559,7 +560,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
                         ) : (
                           <span className="inline-flex items-center gap-1 text-accent-500/60" title={t("youthAcademy.potentialHiddenHint", "Potencial oculto — requiere investigación")}>
                             <EyeOff className="w-3.5 h-3.5" />
-                            <span className="text-[10px] font-heading font-bold">{t("youthAcademy.hidden", "Oculto")}</span>
+                            <span className="text-2xs font-heading font-bold">{t("youthAcademy.hidden", "Oculto")}</span>
                           </span>
                         )}
                       </td>
@@ -571,7 +572,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
                               style={{ width: `${player.condition ?? 0}%` }}
                             />
                           </div>
-                          <span className="text-[11px] font-medium tabular-nums text-gray-700 dark:text-gray-300">
+                          <span className="text-xs font-medium tabular-nums text-gray-700 dark:text-gray-300">
                             {player.condition}%
                           </span>
                         </div>
@@ -601,6 +602,7 @@ export default function YouthAcademyTab({ gameState, onSelectPlayer, onGameUpdat
                 })}
               </tbody>
             </table>
+            </div>
             </>
           )}
         </CardBody>
diff --git a/src/pages/ChampionPage.tsx b/src/pages/ChampionPage.tsx
index 6d7d94e58..2a9b8c328 100644
--- a/src/pages/ChampionPage.tsx
+++ b/src/pages/ChampionPage.tsx
@@ -431,7 +431,7 @@ export default function ChampionPage({ championKey, onClose }: ChampionPageProps
                               {champKey}
                             </p>
                             {item.value !== undefined && (
-                              <p className="text-[10px] text-gray-400">
+                              <p className="text-2xs text-gray-400">
                                 {item.value} {item.value === 1 ? "game" : "games"}
                               </p>
                             )}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 17dd418e6..de387e72e 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -262,7 +262,7 @@ export default function Settings() {
                 }}
               />
               {isAndroid ? (
-                <span className="text-[10px] font-heading uppercase tracking-wide text-gray-400">
+                <span className="text-2xs font-heading uppercase tracking-wide text-gray-400">
                   {t("settings.uiScaleAndroidLocked", "Bloqueado en XS en Android")}
                 </span>
               ) : null}
@@ -524,7 +524,7 @@ export default function Settings() {
                 {APP_VERSION}
               </p>
             </div>
-            <span className="text-[10px] font-heading uppercase tracking-widest text-gray-400 dark:text-gray-600">
+            <span className="text-2xs font-heading uppercase tracking-widest text-gray-400 dark:text-gray-600">
               Open League Manager Community
             </span>
           </div>