Fix: screens can't scroll (min-h-dvh under overflow-hidden body)

body is overflow:hidden (to lock the game table), so a min-h-dvh shell just
expands past the viewport and is clipped — its overflow-y-auto never engages.
Make ScreenShell + HomeScreen fixed-height h-dvh scroll containers (with
overscroll-contain + bottom padding). Fixes Profile/Friends/Shop/Leaderboard/
Lobby/BuyCoins/Notifications and the home menu on short viewports.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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">

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">
+    // Fixed-height viewport scroller: body is `overflow:hidden` (for the game
-      <div className="mx-auto w-full max-w-2xl p-4 sm:p-6">{children}</div>
+    // 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>
   );
 }