From 182e57f05a92e3122b9a8a1df3f1b62943425739 Mon Sep 17 00:00:00 2001
From: ivyvi <130733091+yerxiiiii@users.noreply.github.com>
Date: Wed, 9 Sep 2026 01:59:40 +0800
Subject: [PATCH] Fix mobile HUD layout so top chrome, scoreboard, and FPV no
 longer overlap.

Stack the phone scoreboard under the control row, shrink side feeds and bottom board, and hide match chrome while the coach menu is open.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/src/football/CommentaryDanmaku.jsx |   6 +-
 app/src/football/FootballHud.jsx       | 116 +++++++++++++++++--------
 app/src/football/FootballTitle.jsx     |  65 ++++++++++----
 app/src/football/StrategyBoard.jsx     |  32 ++++---
 app/src/football/StrategyPanel.jsx     |  24 +++--
 app/src/football/TeamFpv.jsx           |  23 ++---
 6 files changed, 175 insertions(+), 91 deletions(-)

diff --git a/app/src/football/CommentaryDanmaku.jsx b/app/src/football/CommentaryDanmaku.jsx
index e5eea8a..1478dc1 100644
--- a/app/src/football/CommentaryDanmaku.jsx
+++ b/app/src/football/CommentaryDanmaku.jsx
@@ -165,10 +165,10 @@ export default function CommentaryDanmaku() {
       aria-hidden
       sx={{
         position: "fixed",
-        top: { xs: "5.5rem", md: "6.25rem" },
+        top: { xs: "32%", md: "6.25rem" },
         left: 0,
         right: 0,
-        height: { xs: "38%", md: "42%" },
+        height: { xs: "28%", md: "42%" },
         zIndex: 11,
         pointerEvents: "none",
         overflow: "hidden",
@@ -183,7 +183,7 @@ export default function CommentaryDanmaku() {
             left: "100%",
             whiteSpace: "nowrap",
             fontFamily: ANTON,
-            fontSize: { xs: "0.95rem", md: "1.15rem" },
+            fontSize: { xs: "0.82rem", md: "1.15rem" },
             letterSpacing: "0.04em",
             color: it.team === "red" ? RED_ACCENT : it.team === "blue" ? BLUE_ACCENT : CREAM,
             textShadow: `0 1px 0 ${COMIC_INK}, 0 0 10px rgba(0,0,0,0.65)`,
diff --git a/app/src/football/FootballHud.jsx b/app/src/football/FootballHud.jsx
index f491dc7..cf3db22 100644
--- a/app/src/football/FootballHud.jsx
+++ b/app/src/football/FootballHud.jsx
@@ -103,12 +103,14 @@ function BackButton() {
     <Box
       sx={{
         position: "fixed",
-        top: "1.25rem",
-        left: "1.5rem",
-        zIndex: 10,
+        top: { xs: "0.55rem", sm: "1.25rem" },
+        left: { xs: "0.5rem", sm: "1.5rem" },
+        zIndex: 12,
         pointerEvents: "auto",
         display: "flex",
-        gap: "0.45rem",
+        flexWrap: "nowrap",
+        maxWidth: { xs: "calc(100vw - 3.5rem)", sm: "none" },
+        gap: { xs: "0.28rem", sm: "0.45rem" },
       }}
     >
       <Box
@@ -116,12 +118,13 @@ function BackButton() {
           ...scorePlateSx,
           flexDirection: "row",
           minWidth: "unset",
-          padding: "6px 14px",
+          padding: { xs: "5px 8px", sm: "6px 14px" },
         }}
       >
         <Box
           component="button"
           type="button"
+          aria-label={t(locale, "back")}
           onClick={() => { uiClick(); useGame.setState({ menuOpen: true }); }}
           sx={{
             appearance: "none",
@@ -134,7 +137,7 @@ function BackButton() {
             color: CREAM,
             cursor: "pointer",
             fontFamily: ANTON,
-            fontSize: "0.82rem",
+            fontSize: { xs: "0.72rem", sm: "0.82rem" },
             letterSpacing: "0.08em",
             textTransform: "uppercase",
             lineHeight: 1,
@@ -150,7 +153,10 @@ function BackButton() {
             },
           }}
         >
-          <BackArrowIcon /> {t(locale, "back")}
+          <BackArrowIcon />
+          <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+            {t(locale, "back")}
+          </Box>
         </Box>
       </Box>
       <DanmakuToggleButton />
@@ -168,7 +174,7 @@ function DanmakuToggleButton() {
         ...scorePlateSx,
         flexDirection: "row",
         minWidth: "unset",
-        padding: "6px 12px",
+        padding: { xs: "5px 8px", sm: "6px 12px" },
       }}
     >
       <Box
@@ -189,7 +195,7 @@ function DanmakuToggleButton() {
           color: enabled ? CREAM : "rgba(250,248,242,0.45)",
           cursor: "pointer",
           fontFamily: MONO,
-          fontSize: "0.65rem",
+          fontSize: { xs: "0.55rem", sm: "0.65rem" },
           letterSpacing: "0.1em",
           textTransform: "uppercase",
           lineHeight: 1,
@@ -212,7 +218,7 @@ function SpeedToggleButton() {
         ...scorePlateSx,
         flexDirection: "row",
         minWidth: "unset",
-        padding: "6px 12px",
+        padding: { xs: "5px 8px", sm: "6px 12px" },
       }}
     >
       <Box
@@ -237,7 +243,7 @@ function SpeedToggleButton() {
           color: n > 1 ? ORANGE : CREAM,
           cursor: "pointer",
           fontFamily: MONO,
-          fontSize: "0.65rem",
+          fontSize: { xs: "0.55rem", sm: "0.65rem" },
           letterSpacing: "0.08em",
           textTransform: "uppercase",
           lineHeight: 1,
@@ -267,48 +273,61 @@ function Scoreboard() {
     <Box
       sx={{
         position: "fixed",
-        top: "1.25rem",
+        // Phones: sit under the chrome row so Back / 弹幕 / GitHub never collide.
+        top: { xs: "2.85rem", sm: "1.25rem" },
         left: "50%",
         transform: "translateX(-50%)",
-        zIndex: 10,
+        zIndex: 11,
         pointerEvents: "none",
+        maxWidth: { xs: "min(14rem, calc(100vw - 1.2rem))", sm: "none" },
       }}
     >
-      <Box sx={scorePlateSx}>
+      <Box
+        sx={{
+          ...scorePlateSx,
+          minWidth: { xs: 0, sm: 240 },
+          width: { xs: "100%", sm: "auto" },
+          padding: { xs: "5px 14px 4px", sm: "10px 24px 8px" },
+        }}
+      >
         {/* Score line */}
         <Box
           sx={{
             fontFamily: ANTON,
-            fontSize: "1.6rem",
+            fontSize: { xs: "1.05rem", sm: "1.6rem" },
             lineHeight: 1,
             letterSpacing: "0.04em",
             color: CREAM,
             display: "flex",
             alignItems: "center",
-            gap: "0.5em",
+            justifyContent: "center",
+            gap: { xs: "0.28em", sm: "0.5em" },
             animation: isGoal
               ? `${goalFlash} 0.6s ease infinite`
               : "none",
             "@media (prefers-reduced-motion: reduce)": { animation: "none" },
           }}
         >
-          <Box component="span" sx={{ color: RED_ACCENT }}>RED</Box>
+          <Box component="span" sx={{ color: RED_ACCENT, display: { xs: "none", sm: "inline" } }}>RED</Box>
+          <Box component="span" sx={{ color: RED_ACCENT, display: { xs: "inline", sm: "none" }, fontSize: "0.72em" }}>R</Box>
           <Box component="span" sx={{ color: CREAM }}>{red}</Box>
           <Box component="span" sx={{ color: "rgba(250,248,242,0.4)", mx: "0.1em" }}>—</Box>
           <Box component="span" sx={{ color: CREAM }}>{blue}</Box>
-          <Box component="span" sx={{ color: BLUE_ACCENT }}>BLUE</Box>
+          <Box component="span" sx={{ color: BLUE_ACCENT, display: { xs: "none", sm: "inline" } }}>BLUE</Box>
+          <Box component="span" sx={{ color: BLUE_ACCENT, display: { xs: "inline", sm: "none" }, fontSize: "0.72em" }}>B</Box>
         </Box>
 
         {/* Timer */}
         <Box
           sx={{
             fontFamily: MONO,
-            fontSize: "1.1rem",
+            fontSize: { xs: "0.85rem", sm: "1.1rem" },
             letterSpacing: "0.12em",
             color: CREAM,
-            mt: "4px",
+            mt: { xs: "2px", sm: "4px" },
             fontVariantNumeric: "tabular-nums",
             opacity: 0.9,
+            textAlign: "center",
           }}
         >
           {time}
@@ -318,13 +337,14 @@ function Scoreboard() {
         <Box
           sx={{
             fontFamily: ANTON,
-            fontSize: "0.6rem",
+            fontSize: { xs: "0.5rem", sm: "0.6rem" },
             letterSpacing: "0.14em",
             textTransform: "uppercase",
-            mt: "4px",
+            mt: { xs: "2px", sm: "4px" },
             color: isGoal ? COMIC_ORANGE : "rgba(250, 248, 242, 0.55)",
             animation: isGoal ? `${pulseGlow} 1s ease infinite` : "none",
             "@media (prefers-reduced-motion: reduce)": { animation: "none" },
+            textAlign: "center",
           }}
         >
           {label}
@@ -383,16 +403,18 @@ export function MatchResultBanner() {
         aria-live="polite"
         sx={{
           position: "fixed",
-          top: "8.75rem",
+          top: { xs: "5.5rem", sm: "8.75rem" },
           left: "50%",
           translate: "-50% 0",
-          zIndex: 11,
+          zIndex: 13,
           pointerEvents: "none",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          gap: "0.65rem",
-          rotate: "-1.5deg",
+          gap: { xs: "0.45rem", sm: "0.65rem" },
+          width: { xs: "calc(100vw - 1.25rem)", sm: "auto" },
+          maxWidth: "28rem",
+          rotate: { xs: "-0.6deg", sm: "-1.5deg" },
           animation: `${slamIn} 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both`,
           "@media (prefers-reduced-motion: reduce)": { animation: "none" },
         }}
@@ -407,7 +429,9 @@ export function MatchResultBanner() {
             outlineOffset: 0,
             borderRadius: 0,
             background: GLASS,
-            padding: "10px 34px 12px",
+            padding: { xs: "8px 16px 10px", sm: "10px 34px 12px" },
+            width: { xs: "100%", sm: "auto" },
+            boxSizing: "border-box",
             boxShadow: `7px 7px 0 ${COMIC_INK}, 7px 7px 0 2px ${accent}55`,
             "&::after": {
               content: '""',
@@ -421,7 +445,7 @@ export function MatchResultBanner() {
           <Box
             sx={{
               fontFamily: ANTON,
-              fontSize: "clamp(1.8rem, 5.5vw, 3.1rem)",
+              fontSize: "clamp(1.35rem, 7vw, 3.1rem)",
               lineHeight: 0.95,
               letterSpacing: "0.06em",
               textTransform: "uppercase",
@@ -429,7 +453,8 @@ export function MatchResultBanner() {
               textShadow: win
                 ? `3px 3px 0 ${COMIC_INK}`
                 : `3px 3px 0 ${COMIC_INK}, 3px 3px 0 ${COMIC_ORANGE}66`,
-              whiteSpace: "nowrap",
+              whiteSpace: { xs: "normal", sm: "nowrap" },
+              textAlign: "center",
             }}
           >
             {headline}
@@ -567,7 +592,11 @@ function EventTicker() {
     <Box
       sx={{
         position: "fixed",
-        bottom: "11.5rem",
+        // Sit just above the bottom strategy board (shorter on phones).
+        bottom: {
+          xs: "calc(5.6rem + env(safe-area-inset-bottom, 0px))",
+          sm: "11.5rem",
+        },
         left: "50%",
         transform: "translateX(-50%)",
         zIndex: 10,
@@ -576,6 +605,7 @@ function EventTicker() {
         flexDirection: "column",
         alignItems: "center",
         gap: "4px",
+        maxWidth: "calc(100vw - 1rem)",
       }}
     >
       {events.map((ev, i) => (
@@ -583,15 +613,18 @@ function EventTicker() {
           key={`${ev.type}-${ev.time}-${i}`}
           sx={{
             fontFamily: MONO,
-            fontSize: "0.7rem",
+            fontSize: { xs: "0.58rem", sm: "0.7rem" },
             letterSpacing: "0.1em",
             textTransform: "uppercase",
             color: CREAM,
             background: "rgba(16, 16, 24, 0.75)",
             border: `1px solid rgba(255, 122, 47, 0.35)`,
             borderRadius: 0,
-            padding: "4px 12px",
+            padding: { xs: "3px 8px", sm: "4px 12px" },
             whiteSpace: "nowrap",
+            maxWidth: "100%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
             opacity: 1 - i * 0.25,
             animation: `${fadeSlideUp} 0.3s ease both`,
             animationDelay: `${i * 0.08}s`,
@@ -619,8 +652,9 @@ function PenaltyIndicator() {
     <Box
       sx={{
         position: "fixed",
-        top: "17.5rem",
-        right: "1.25rem",
+        top: { xs: "auto", sm: "17.5rem" },
+        bottom: { xs: "calc(7.6rem + env(safe-area-inset-bottom, 0px))", sm: "auto" },
+        right: { xs: "0.55rem", sm: "1.25rem" },
         left: "auto",
         transform: "none",
         zIndex: 12,
@@ -654,6 +688,12 @@ function PenaltyIndicator() {
 
 // ── Main export ───────────────────────────────────────────────────────────
 export default function FootballHud() {
+  const entered = useGame((s) => s.entered);
+  const menuOpen = useGame((s) => s.menuOpen);
+  // Title / pause overlay is opaque — keep match chrome out of the way so
+  // it cannot peek through or steal layout on phones.
+  if (!entered || menuOpen) return null;
+
   return (
     <Box
       sx={{
@@ -669,11 +709,13 @@ export default function FootballHud() {
       <GitHubLink
         sx={{
           position: "fixed",
-          // Keep clear of blue FPV (starts ~6.85rem)
-          top: { xs: "1.15rem", md: "1.2rem" },
-          right: "1.5rem",
+          top: { xs: "0.55rem", sm: "1.2rem" },
+          right: { xs: "0.5rem", sm: "1.5rem" },
           zIndex: 12,
           pointerEvents: "auto",
+          width: { xs: "36px", sm: "48px" },
+          height: { xs: "36px", sm: "48px" },
+          "& svg": { width: { xs: "20px", sm: "28px" }, height: { xs: "20px", sm: "28px" } },
         }}
       />
       <MatchResultBanner />
diff --git a/app/src/football/FootballTitle.jsx b/app/src/football/FootballTitle.jsx
index be84119..f37e8b0 100644
--- a/app/src/football/FootballTitle.jsx
+++ b/app/src/football/FootballTitle.jsx
@@ -257,7 +257,7 @@ export default function FootballTitle({ onKickOff }) {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        p: "2.4rem 1.4rem 1.8rem",
+        p: { xs: "1.1rem 0.85rem 1.1rem", sm: "2.4rem 1.4rem 1.8rem" },
         background: INK,
         opacity: menuOpen ? 1 : 0,
         pointerEvents: menuOpen ? "auto" : "none",
@@ -282,8 +282,8 @@ export default function FootballTitle({ onKickOff }) {
         aria-hidden
         sx={{
           position: "absolute",
-          top: "1.25rem",
-          left: "1.5rem",
+          top: { xs: "0.75rem", sm: "1.25rem" },
+          left: { xs: "0.75rem", sm: "1.5rem" },
           zIndex: 1,
           display: "flex",
           alignItems: "center",
@@ -299,7 +299,7 @@ export default function FootballTitle({ onKickOff }) {
           sx={{
             position: "relative",
             display: "block",
-            height: "2.1rem",
+            height: { xs: "1.7rem", sm: "2.1rem" },
             filter: "drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5))",
           }}
         >
@@ -341,9 +341,38 @@ export default function FootballTitle({ onKickOff }) {
         </Box>
       </Box>
       )}
-      {ready && <PreorderButton sx={{ ...row(0.1) }} />}
-      {ready && <GitHubLink sx={{ ...row(0.18) }} />}
-      {ready && <LangToggle sx={{ ...row(0.22) }} />}
+      {ready && (
+        <PreorderButton
+          sx={{
+            ...row(0.1),
+            display: { xs: "none", sm: "block" },
+          }}
+        />
+      )}
+      {ready && (
+        <GitHubLink
+          sx={{
+            ...row(0.18),
+            // On phones there is no shop plate above — park next to the duck row.
+            top: { xs: "0.65rem", md: "5.15rem" },
+            right: { xs: "0.75rem", md: "1.5rem" },
+            width: { xs: "36px", md: "48px" },
+            height: { xs: "36px", md: "48px" },
+            "& svg": { width: { xs: "20px", md: "28px" }, height: { xs: "20px", md: "28px" } },
+          }}
+        />
+      )}
+      {ready && (
+        <LangToggle
+          sx={{
+            ...row(0.22),
+            top: { xs: "3.35rem", md: "8.75rem" },
+            right: { xs: "0.75rem", md: "1.5rem" },
+            transform: { xs: "scale(0.92)", md: "none" },
+            transformOrigin: "top right",
+          }}
+        />
+      )}
 
       {/* Boot gate: one centered spinner on bare ink with the match's
           step line until fonts, brand art and the game core are in. A
@@ -400,7 +429,7 @@ export default function FootballTitle({ onKickOff }) {
           maxWidth: "min(48rem, 94vw)",
           flex: "1 1 auto",
           minHeight: 0,
-          pt: { xs: "2.6rem", md: "1rem" },
+          pt: { xs: "3.4rem", sm: "2.6rem", md: "1rem" },
         }}
       >
         {bootFailed ? (
@@ -428,7 +457,7 @@ export default function FootballTitle({ onKickOff }) {
           component="h1"
           tone="dark"
           accent={ORANGE}
-          fontSize="clamp(3.2rem, 8.5vw, 5.8rem)"
+          fontSize="clamp(2.35rem, 11vw, 5.8rem)"
           lines={[
             { text: "Microduck" },
             { text: "Football 3v3", variant: "outline", scale: 0.62 },
@@ -439,14 +468,15 @@ export default function FootballTitle({ onKickOff }) {
         <Typography
           sx={{
             mx: "auto",
-            mt: "1.1rem",
-            "@media (max-height: 700px)": { mt: "0.8rem" },
+            mt: { xs: "0.7rem", sm: "1.1rem" },
+            "@media (max-height: 700px)": { mt: "0.55rem" },
             maxWidth: "38ch",
-            fontSize: { xs: "0.95rem", sm: "1.05rem" },
-            lineHeight: 1.5,
+            fontSize: { xs: "0.85rem", sm: "1.05rem" },
+            lineHeight: 1.45,
             letterSpacing: "-0.012em",
             color: "rgba(255, 255, 255, 0.72)",
             textWrap: "balance",
+            px: { xs: "0.25rem", sm: 0 },
             ...row(0.24),
           }}
         >
@@ -463,8 +493,8 @@ export default function FootballTitle({ onKickOff }) {
             display: "inline-flex",
             flexDirection: "column",
             alignItems: "center",
-            mt: "1.4rem",
-            "@media (max-height: 700px)": { mt: "1rem" },
+            mt: { xs: "0.9rem", sm: "1.4rem" },
+            "@media (max-height: 700px)": { mt: "0.75rem" },
             ...row(0.32),
           }}
         >
@@ -544,9 +574,10 @@ export default function FootballTitle({ onKickOff }) {
           position: "relative",
           width: "100%",
           textAlign: "center",
-          mt: "1.2rem",
-          pt: "1.15rem",
+          mt: { xs: "0.85rem", sm: "1.2rem" },
+          pt: { xs: "0.85rem", sm: "1.15rem" },
           borderTop: "1px solid rgba(255, 255, 255, 0.08)",
+          display: { xs: "none", sm: "block" },
           ...row(0.5),
         }}
       >
diff --git a/app/src/football/StrategyBoard.jsx b/app/src/football/StrategyBoard.jsx
index 67c1a9a..7a3b0dc 100644
--- a/app/src/football/StrategyBoard.jsx
+++ b/app/src/football/StrategyBoard.jsx
@@ -86,7 +86,7 @@ function TeamTags({ team, strategy, locale, isUser, onOpenCoach }) {
         border: `2px solid ${accent}`,
         boxShadow: `inset 0 0 0 1px ${COMIC_INK}`,
         background: GLASS,
-        p: "0.45rem 0.55rem",
+        p: { xs: "0.35rem 0.4rem", sm: "0.45rem 0.55rem" },
         pointerEvents: isUser ? "auto" : "none",
         cursor: isUser ? "pointer" : "default",
       }}
@@ -104,7 +104,7 @@ function TeamTags({ team, strategy, locale, isUser, onOpenCoach }) {
       <Box
         sx={{
           fontFamily: ANTON,
-          fontSize: "0.72rem",
+          fontSize: { xs: "0.62rem", sm: "0.72rem" },
           letterSpacing: "0.1em",
           textTransform: "uppercase",
           color: accent,
@@ -117,7 +117,7 @@ function TeamTags({ team, strategy, locale, isUser, onOpenCoach }) {
       <Box
         sx={{
           fontFamily: MONO,
-          fontSize: "0.52rem",
+          fontSize: { xs: "0.46rem", sm: "0.52rem" },
           fontWeight: 600,
           letterSpacing: "0.04em",
           color: CREAM,
@@ -161,13 +161,13 @@ export default function StrategyBoard() {
       sx={{
         position: "fixed",
         left: "50%",
-        bottom: "0.85rem",
+        bottom: { xs: "calc(0.45rem + env(safe-area-inset-bottom, 0px))", sm: "0.85rem" },
         transform: "translateX(-50%)",
         zIndex: 10,
-        width: "min(44rem, calc(100vw - 1.5rem))",
+        width: { xs: "calc(100vw - 0.9rem)", sm: "min(44rem, calc(100vw - 1.5rem))" },
         display: "flex",
         flexDirection: "column",
-        gap: "0.4rem",
+        gap: { xs: "0.25rem", sm: "0.4rem" },
         pointerEvents: "none",
         "& > *": { pointerEvents: "auto" },
       }}
@@ -177,24 +177,28 @@ export default function StrategyBoard() {
           border: `2px solid ${COMIC_INK}`,
           background: GLASS,
           boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.08)`,
-          p: "0.5rem 0.7rem 0.55rem",
+          p: { xs: "0.3rem 0.45rem 0.35rem", sm: "0.5rem 0.7rem 0.55rem" },
           display: "flex",
-          flexDirection: "column",
-          gap: "0.4rem",
+          flexDirection: { xs: "row", sm: "column" },
+          alignItems: { xs: "center", sm: "stretch" },
+          gap: { xs: "0.55rem", sm: "0.4rem" },
         }}
       >
-        <PossBar redPct={redPct} locale={locale} />
+        <Box sx={{ flex: { xs: "1 1 0", sm: "none" }, minWidth: 0, width: { sm: "100%" } }}>
+          <PossBar redPct={redPct} locale={locale} />
+        </Box>
         <Box
           sx={{
             display: "flex",
             justifyContent: "center",
             alignItems: "baseline",
-            gap: "0.55rem",
+            gap: "0.35rem",
             fontFamily: ANTON,
-            fontSize: "0.95rem",
+            fontSize: { xs: "0.82rem", sm: "0.95rem" },
             letterSpacing: "0.08em",
             color: CREAM,
             lineHeight: 1,
+            flex: "none",
           }}
         >
           <Box component="span" sx={{ color: RED_ACCENT }}>{shotsR}</Box>
@@ -202,7 +206,7 @@ export default function StrategyBoard() {
             component="span"
             sx={{
               fontFamily: MONO,
-              fontSize: "0.5rem",
+              fontSize: { xs: "0.42rem", sm: "0.5rem" },
               letterSpacing: "0.14em",
               textTransform: "uppercase",
               color: "rgba(255,255,255,0.45)",
@@ -214,7 +218,7 @@ export default function StrategyBoard() {
         </Box>
       </Box>
 
-      <Box sx={{ display: "flex", gap: "0.45rem" }}>
+      <Box sx={{ display: "flex", gap: "0.35rem" }}>
         <TeamTags
           team="red"
           strategy={board?.strategy?.red}
diff --git a/app/src/football/StrategyPanel.jsx b/app/src/football/StrategyPanel.jsx
index e6f1d7b..e928d15 100644
--- a/app/src/football/StrategyPanel.jsx
+++ b/app/src/football/StrategyPanel.jsx
@@ -144,12 +144,13 @@ function ChipGroup({ label, options, labels, value, onChange, disabled }) {
                 background: on ? "rgba(255,122,47,0.18)" : "rgba(0,0,0,0.25)",
                 color: on ? CREAM : "rgba(255,255,255,0.72)",
                 fontFamily: ANTON,
-                fontSize: "0.72rem",
+                fontSize: { xs: "0.68rem", sm: "0.72rem" },
                 letterSpacing: "0.06em",
                 textTransform: "uppercase",
                 lineHeight: 1,
-                px: "0.65rem",
-                py: "0.45rem",
+                px: { xs: "0.55rem", sm: "0.65rem" },
+                py: { xs: "0.5rem", sm: "0.45rem" },
+                minHeight: { xs: "2rem", sm: "unset" },
                 opacity: disabled ? 0.45 : 1,
                 "&:hover": disabled ? undefined : { borderColor: ORANGE },
               }}
@@ -330,19 +331,24 @@ export default function StrategyPanel({ compact = false, formationLocked = false
       aria-label={t(locale, "teamTactics")}
       sx={{
         width: "100%",
-        maxWidth: compact ? "24rem" : "32rem",
+        maxWidth: compact ? "24rem" : { xs: "100%", sm: "32rem" },
         mx: "auto",
-        mt: compact ? 0 : "1.35rem",
-        p: compact ? "0.75rem 0.85rem" : "0.95rem 1.05rem",
+        mt: compact ? 0 : { xs: "0.75rem", sm: "1.35rem" },
+        p: compact
+          ? "0.75rem 0.85rem"
+          : { xs: "0.7rem 0.75rem", sm: "0.95rem 1.05rem" },
         border: `2px solid rgba(255,255,255,0.14)`,
         boxShadow: `inset 0 0 0 1px ${COMIC_INK}`,
         background: "rgba(16,16,24,0.72)",
         display: "flex",
         flexDirection: "column",
-        gap: compact ? "0.55rem" : "0.75rem",
+        gap: compact ? "0.55rem" : { xs: "0.55rem", sm: "0.75rem" },
         textAlign: "left",
-        maxHeight: compact ? "70vh" : undefined,
-        overflowY: compact ? "auto" : undefined,
+        maxHeight: compact
+          ? "70vh"
+          : { xs: "min(48vh, 26rem)", sm: "none" },
+        overflowY: compact ? "auto" : { xs: "auto", sm: "visible" },
+        WebkitOverflowScrolling: "touch",
       }}
     >
       <Typography
diff --git a/app/src/football/TeamFpv.jsx b/app/src/football/TeamFpv.jsx
index 7d84519..0e7d4d1 100644
--- a/app/src/football/TeamFpv.jsx
+++ b/app/src/football/TeamFpv.jsx
@@ -17,9 +17,9 @@ function FpvSlot({ team, locale, canvasRef }) {
   return (
     <Box
       sx={{
-        width: "min(14rem, 32vw)",
+        width: { xs: "min(5.1rem, 24vw)", sm: "min(14rem, 32vw)" },
         pointerEvents: "none",
-        border: `2px solid ${accent}`,
+        border: { xs: `1.5px solid ${accent}`, sm: `2px solid ${accent}` },
         boxShadow: `inset 0 0 0 1px ${COMIC_INK}, 0 8px 24px rgba(0,0,0,0.45)`,
         background: "#0a0a10",
         overflow: "hidden",
@@ -30,16 +30,16 @@ function FpvSlot({ team, locale, canvasRef }) {
           display: "flex",
           justifyContent: "space-between",
           alignItems: "baseline",
-          px: "0.4rem",
-          pt: "0.25rem",
-          pb: "0.15rem",
+          px: { xs: "0.25rem", sm: "0.4rem" },
+          pt: { xs: "0.15rem", sm: "0.25rem" },
+          pb: { xs: "0.1rem", sm: "0.15rem" },
           background: "rgba(8,8,12,0.95)",
         }}
       >
         <Box
           sx={{
             fontFamily: ANTON,
-            fontSize: "0.58rem",
+            fontSize: { xs: "0.48rem", sm: "0.58rem" },
             letterSpacing: "0.1em",
             textTransform: "uppercase",
             color: accent,
@@ -56,6 +56,7 @@ function FpvSlot({ team, locale, canvasRef }) {
             textTransform: "uppercase",
             color: "rgba(255,255,255,0.45)",
             lineHeight: 1,
+            display: { xs: "none", sm: "block" },
           }}
         >
           {t(locale, "fpvLabel")}
@@ -120,21 +121,21 @@ export default function TeamFpv() {
     <Box
       sx={{
         position: "fixed",
-        // Clear Back / Scoreboard / GitHub row
-        top: "6.85rem",
+        // Clear compact (xs) / full (sm+) top chrome row
+        top: { xs: "7.15rem", sm: "6.85rem" },
         left: 0,
         right: 0,
         zIndex: 11,
         display: "flex",
         justifyContent: "space-between",
         alignItems: "flex-start",
-        px: "max(0.75rem, calc(50% - 24rem))",
-        gap: "0.75rem",
+        px: { xs: "0.45rem", sm: "max(0.75rem, calc(50% - 24rem))" },
+        gap: { xs: "0.35rem", sm: "0.75rem" },
         pointerEvents: "none",
       }}
     >
       <FpvSlot team="red" locale={locale} canvasRef={redRef} />
-      <Box sx={{ flex: "1 1 10rem", maxWidth: "12rem" }} />
+      <Box sx={{ flex: { xs: "1 1 2rem", sm: "1 1 10rem" }, maxWidth: { xs: "4rem", sm: "12rem" } }} />
       <FpvSlot team="blue" locale={locale} canvasRef={blueRef} />
     </Box>
   );