style: enhance UI readability for cards and badges

Increase card and badge sizes, adjust text sizes for better legibility.

Co-authored-by: Anay <129646663+anay1104@users.noreply.github.com>

frontend/src/components/PitchView.jsx

@@ -9,20 +9,20 @@ import { DraggablePlayer } from "./DraggablePlayer";
   proportions identical across every screen size (no element gets relatively
   bigger or smaller than another when the viewport changes).
 
-  Card: 80×96px (modest 6% bump from original 72×88)
-  Label strip: ~48px
-  Card slot total ≈ 145px per row
+  Card: 88×106px (larger for better legibility)
+  Label strip: ~52px
+  Card slot total ≈ 158px per row
 
-  DESIGN_WIDTH = 570: fits widest row (5 mids/defs) = 5×80 + 4×24 = 496 ≤ 570 ✓
-  4 starter rows + gaps ≈ 680px total height
-  Bench ≈ 210px
+  DESIGN_WIDTH = 620: fits widest row (5 mids/defs) = 5×88 + 4×24 = 536 ≤ 620 ✓
+  4 starter rows + gaps ≈ 780px total height
+  Bench ≈ 230px
 
   MAX_SCALE > 1 lets the pitch scale modestly on wide screens without badges
   and labels becoming disproportionately large.
 */
-const DESIGN_WIDTH = 570;
-const STARTERS_H   = 720;
-const BENCH_H      = 210;
+const DESIGN_WIDTH = 620;
+const STARTERS_H   = 780;
+const BENCH_H      = 230;
 // Gap between player card wrappers in px (in design space)
 const CARD_GAP     = 24;
 // Allow the pitch to scale up to 1.1× on wide screens so cards don't look

frontend/src/components/PlayerCardVisual.jsx

@@ -5,15 +5,15 @@ import { getPlayerPrice } from "../utils/fplLogic";
 import { PlayerContext } from "../PlayerContext";
 
 // Fixed card dimensions — these are design-space pixels (before PitchView scaling).
-// Sized to be prominent on desktop and scale gracefully on mobile via the
-// PitchView scale transform. Keeps proportions consistent across devices.
-const CARD_W = 80;
-const CARD_H = 96; // photo card height only (label strip is separate, in flow below)
+// Sized to be prominent and legible on desktop, scaling gracefully on mobile via
+// the PitchView scale transform. Keeps proportions consistent across devices.
+const CARD_W = 88;
+const CARD_H = 106; // photo card height only (label strip is separate, in flow below)
 
 // Badge sizing — using percentage of card width ensures badges scale proportionally
 // with the card rather than being fixed pixels that iOS may try to inflate.
-// 13.5% of 80px = ~10.8px at design scale, but will shrink/grow with the card.
-const BADGE_PCT = 0.135;
+// 15% of 88px = ~13px at design scale — large enough to read and tap comfortably.
+const BADGE_PCT = 0.15;
 
 export const PlayerCardVisual = ({
   player,
@@ -61,17 +61,17 @@ export const PlayerCardVisual = ({
                 className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transition-colors border border-red-400 shadow-lg cursor-pointer select-none"
                 title="Undo transfer"
               >
-                <RotateCcw size={5} strokeWidth={3} />
+                <RotateCcw size={7} strokeWidth={2.5} />
               </div>
             </div>
           )}
-          <Plus className="text-slate-500 group-hover:text-emerald-400 transition-colors mb-1" size={22} />
-          <span className="text-[9px] font-black text-slate-500 group-hover:text-emerald-400 uppercase tracking-widest">
+          <Plus className="text-slate-500 group-hover:text-emerald-400 transition-colors mb-1" size={24} />
+          <span className="text-[10px] font-black text-slate-500 group-hover:text-emerald-400 uppercase tracking-widest">
             {player.Pos}
           </span>
         </div>
         {/* Placeholder label area so blank slots have identical height to real cards */}
-        <div style={{ height: 50 }} />
+        <div style={{ height: 55 }} />
       </div>
     );
   }
@@ -153,11 +153,11 @@ export const PlayerCardVisual = ({
   };
 
   // EV text sizes — primary GW gets the strongest visual weight, subsequent
-  // GWs taper down. The WebkitTextSizeAdjust fix prevents iOS inflation.
+  // GWs taper down. Sized for comfortable reading at the larger card scale.
   const evStyles = [
-    "text-emerald-400 text-[10px] font-extrabold",
-    "text-emerald-500 text-[8px] font-bold",
-    "text-emerald-600 text-[6px] font-semibold",
+    "text-emerald-400 text-[12px] font-extrabold",
+    "text-emerald-500 text-[10px] font-bold",
+    "text-emerald-600 text-[8px] font-semibold",
   ];
 
   const isTransferIn = Boolean(player.replacedPlayer || onSolverUndo);
@@ -215,7 +215,7 @@ export const PlayerCardVisual = ({
                   minHeight: 0,
                   touchAction: "manipulation",
                 }}
-                className={`flex items-center justify-center rounded-full text-[5px] font-bold leading-none transition-colors shadow-md transform-gpu cursor-pointer select-none
+                className={`flex items-center justify-center rounded-full text-[6px] font-bold leading-none transition-colors shadow-md transform-gpu cursor-pointer select-none
                   ${isCap
                     ? activeChipType === "tc"
                       ? "bg-purple-500 text-white border border-purple-300"
@@ -237,7 +237,7 @@ export const PlayerCardVisual = ({
                   minHeight: 0,
                   touchAction: "manipulation",
                 }}
-                className={`flex items-center justify-center rounded-full text-[5px] font-bold leading-none transition-colors shadow-md cursor-pointer select-none
+                className={`flex items-center justify-center rounded-full text-[6px] font-bold leading-none transition-colors shadow-md cursor-pointer select-none
                   ${isVice ? "bg-slate-300 text-slate-900 border border-white" : "bg-slate-900/90 text-slate-400 border border-slate-700 hover:text-white"}`}
               >
                 V
@@ -259,7 +259,7 @@ export const PlayerCardVisual = ({
               }}
               className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400 shadow-md cursor-pointer select-none"
             >
-              <RotateCcw size={5} strokeWidth={3} />
+              <RotateCcw size={7} strokeWidth={2.5} />
             </div>
           ) : player.replacedPlayer ? (
             <div
@@ -276,7 +276,7 @@ export const PlayerCardVisual = ({
               }}
               className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400 shadow-md cursor-pointer select-none"
             >
-              <RotateCcw size={5} strokeWidth={3} />
+              <RotateCcw size={7} strokeWidth={2.5} />
             </div>
           ) : null}
         </div>
@@ -337,21 +337,21 @@ export const PlayerCardVisual = ({
           textSizeAdjust: "none",
         }}
       >
-        <div className={`w-full text-center py-[2px] truncate px-1 font-bold text-[8px] leading-tight rounded-t shadow-md
+        <div className={`w-full text-center py-[3px] truncate px-1 font-bold text-[9px] leading-tight rounded-t shadow-md
           ${isTransferIn ? "bg-cyan-600 text-white" : "bg-slate-950 text-slate-100 border border-slate-700"}`}>
           {player.Name}
         </div>
-        <div className="w-full bg-slate-200 border-x border-slate-700 flex justify-center items-center gap-1 py-[2px] shadow-inner">
-          <span className={`text-[8px] font-black flex items-baseline gap-[2px] leading-none ${isBlankThisGw ? "text-slate-400" : "text-slate-800"}`}>
+        <div className="w-full bg-slate-200 border-x border-slate-700 flex justify-center items-center gap-1 py-[3px] shadow-inner">
+          <span className={`text-[9px] font-black flex items-baseline gap-[2px] leading-none ${isBlankThisGw ? "text-slate-400" : "text-slate-800"}`}>
             {isBlankThisGw ? "-" : (player[`${activeGW}_xMins`] ?? 90)}
-            <span className="text-[6px] font-bold text-slate-500 uppercase tracking-tight">xMins</span>
+            <span className="text-[7px] font-bold text-slate-500 uppercase tracking-tight">xMins</span>
           </span>
-          <span className="text-slate-400 font-light text-[8px] leading-none">|</span>
-          <span className="text-[8px] font-black text-emerald-700 leading-none">
+          <span className="text-slate-400 font-light text-[9px] leading-none">|</span>
+          <span className="text-[9px] font-black text-emerald-700 leading-none">
             £{getPlayerPrice(player).toFixed(1)}
           </span>
         </div>
-        <div className="w-full bg-slate-900 border-x border-b border-slate-700 flex items-center rounded-b shadow-md px-0.5 overflow-hidden" style={{ height: 17 }}>
+        <div className="w-full bg-slate-900 border-x border-b border-slate-700 flex items-center rounded-b shadow-md px-0.5 overflow-hidden" style={{ height: 19 }}>
           <div className="flex items-center justify-center w-full whitespace-nowrap overflow-hidden">
             {renderFixtures(player.Team, activeGW)}
           </div>