diff --git a/apps/web/src/components/StandardGameLayout.tsx b/apps/web/src/components/StandardGameLayout.tsx
new file mode 100644
index 00000000..36b42e0b
--- /dev/null
+++ b/apps/web/src/components/StandardGameLayout.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { css } from '../../styled-system/css'
+
+interface StandardGameLayoutProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Standard game layout that ensures:
+ * 1. Exact 100vh height with no scrolling (vertical or horizontal)
+ * 2. Navigation never covers game elements (safe area padding)
+ * 3. Perfect viewport fit on all devices
+ * 4. Consistent experience across all games
+ */
+export function StandardGameLayout({ children, className }: StandardGameLayoutProps) {
+  return (
+    <div className={css({
+      // Exact viewport sizing - no scrolling ever
+      height: '100vh',
+      width: '100vw',
+      overflow: 'hidden',
+
+      // Safe area for navigation (fixed at top: 4px, right: 4px)
+      // Navigation is ~60px tall, so we need padding-top of ~80px to be safe
+      paddingTop: '80px',
+      paddingRight: '4px', // Ensure nav doesn't overlap content on right side
+      paddingBottom: '4px',
+      paddingLeft: '4px',
+
+      // Box sizing to include padding in dimensions
+      boxSizing: 'border-box',
+
+      // Flex container for game content
+      display: 'flex',
+      flexDirection: 'column'
+    }, className)}>
+      {children}
+    </div>
+  )
+}
\ No newline at end of file