fix: improve Android tablet keyboard-safe layout

Use dynamic viewport sizing and keyboard-aware spacing to keep new-game inputs and navigation reachable in PWA landscape mode on Android tablets. Refs #30.

Made-with: Cursor

src/components/App.tsx

@@ -33,6 +33,35 @@ export default function App() {
   const validationModal = useValidationModal();
   const completionModal = useCompletionModal();
 
+  // Keep viewport height stable on Android tablets when virtual keyboard opens.
+  useEffect(() => {
+    const root = document.documentElement;
+
+    const updateViewportVars = () => {
+      const viewport = window.visualViewport;
+      const appHeight = viewport ? viewport.height : window.innerHeight;
+      const keyboardOffset = viewport
+        ? Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)
+        : 0;
+
+      root.style.setProperty('--app-height', `${Math.round(appHeight)}px`);
+      root.style.setProperty('--keyboard-offset', `${Math.round(keyboardOffset)}px`);
+    };
+
+    updateViewportVars();
+    window.addEventListener('resize', updateViewportVars);
+    window.addEventListener('orientationchange', updateViewportVars);
+    window.visualViewport?.addEventListener('resize', updateViewportVars);
+    window.visualViewport?.addEventListener('scroll', updateViewportVars);
+
+    return () => {
+      window.removeEventListener('resize', updateViewportVars);
+      window.removeEventListener('orientationchange', updateViewportVars);
+      window.visualViewport?.removeEventListener('resize', updateViewportVars);
+      window.visualViewport?.removeEventListener('scroll', updateViewportVars);
+    };
+  }, []);
+
   // Game lifecycle handlers
   const handleCreateGame = useCallback(async (gameData: any) => {
     try {