Mobile: make in-game/post-match overlays scroll-safe on short screens

- GameTable Backdrop (Hakem/Trump/Round/Match-over): scroll when taller than the
  viewport via overflow-y-auto + min-h-full centering — no more clipped panels.
- DailyRewardModal: cap height + scroll (was overflow-hidden, clipped the 7-day grid).
- PostMatchRewardsModal: max-h uses dvh (mobile chrome safe).
- ScreenShell: add overflow-x-hidden so a too-wide child can't scroll horizontally.

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

src/components/GameTable.tsx

@@ -900,9 +900,10 @@ function Backdrop({ children }: { children: React.ReactNode }) {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="absolute inset-0 z-40 flex items-center justify-center bg-navy-950/70 backdrop-blur-sm p-5"
+      className="absolute inset-0 z-40 overflow-y-auto overscroll-contain bg-navy-950/70 backdrop-blur-sm"
     >
-      {children}
+      {/* min-h-full + centering: centers short panels, scrolls tall ones (no clip). */}
+      <div className="flex min-h-full items-center justify-center p-4 py-8">{children}</div>
     </motion.div>
   );
 }

src/components/online/DailyRewardModal.tsx

@@ -72,7 +72,7 @@ export function DailyRewardModal() {
             exit={{ scale: 0.9, opacity: 0 }}
             transition={{ type: "spring", stiffness: 220, damping: 20 }}
             onClick={(e) => e.stopPropagation()}
-            className="glass rounded-3xl p-7 w-full max-w-sm text-center relative overflow-hidden"
+            className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[88dvh] overflow-y-auto overflow-x-hidden"
           >
             {/* gold glow */}
             <div className="pointer-events-none absolute -inset-10 bg-gold-500/10 blur-3xl" />

src/components/online/PostMatchRewardsModal.tsx

@@ -83,7 +83,7 @@ export function PostMatchRewardsModal({
         initial={{ scale: 0.82, y: 28 }}
         animate={{ scale: 1, y: 0 }}
         transition={{ type: "spring", stiffness: 200, damping: 18 }}
-        className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[90vh] overflow-y-auto overflow-x-hidden"
+        className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[88dvh] overflow-y-auto overflow-x-hidden"
       >
         {/* radiating bg glow */}
         <div

src/components/online/ScreenHeader.tsx

@@ -42,7 +42,7 @@ export function ScreenShell({ children }: { children: React.ReactNode }) {
     // 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 safe-top safe-x">
+    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overflow-x-hidden overscroll-contain safe-top safe-x">
       <div className="mx-auto w-full max-w-2xl px-4 pt-3 pb-[max(6rem,calc(env(safe-area-inset-bottom)+5rem))] sm:px-6">{children}</div>
     </main>
   );