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>
   );