diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index dfc5921..8c60b0c 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -46,7 +46,7 @@ export function HomeScreen() {
   const playOnline = () => nav(isAuthed ? "online" : "auth");
 
   return (
-    <main className="persian-pattern relative min-h-dvh w-full overflow-y-auto">
+    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overscroll-contain">
       <FloatingSuits />
       <div className="relative z-10 mx-auto w-full max-w-md p-4 sm:p-6 flex flex-col min-h-dvh">
         <div className="pt-1">
diff --git a/src/components/online/ScreenHeader.tsx b/src/components/online/ScreenHeader.tsx
index 5c8c48f..08750a9 100644
--- a/src/components/online/ScreenHeader.tsx
+++ b/src/components/online/ScreenHeader.tsx
@@ -32,8 +32,11 @@ export function ScreenHeader({
 
 export function ScreenShell({ children }: { children: React.ReactNode }) {
   return (
-    <main className="persian-pattern relative min-h-dvh w-full overflow-y-auto">
-      <div className="mx-auto w-full max-w-2xl p-4 sm:p-6">{children}</div>
+    // Fixed-height viewport scroller: body is `overflow:hidden` (for the game
+    // table), so the shell must own its scroll (h-dvh + overflow-y-auto) — with
+    // min-h-dvh the content just expands past the body and gets clipped.
+    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overscroll-contain">
+      <div className="mx-auto w-full max-w-2xl p-4 pb-24 sm:p-6 sm:pb-28">{children}</div>
     </main>
   );
 }