Screens that already fit no longer scroll or rubber-band

- API-key gate is now a fixed, out-of-flow overlay (inset-0, overflow
  hidden, overscroll-none) with its own internal scroller, so the document
  has no scrollable height on phones. It can't be panned or bounced.
- Home/create mains are flex columns with min-h-dvh and a flex-1 content
  area, and the empty state's mobile padding was trimmed, so a short/empty
  library is exactly viewport height instead of overflowing by ~76px.
  Long pages (the create form, decks) still scroll normally.
- html/body get overscroll-behavior: none to stop pull-to-refresh and
  rubber-banding on fitting screens.

Verified with a scroll probe (gate and empty library: scrollHeight ==
viewport; create still scrolls) plus zoom 6/6, install sheet 64/64,
pwa 16/16, final-ux 12/12, retry 14/14, security 8/8, contrast 20/20.

components/ApiKeyGate.tsx

@@ -118,7 +118,7 @@ function GateScreen() {
   };
 
   return (
-    <div className="gate-bg relative min-h-dvh w-full overflow-hidden">
+    <div className="gate-bg fixed inset-0 overflow-hidden overscroll-none">
       {/* corner controls: theme + help ---------------------------------- */}
       <div
         className="fixed z-20 flex items-center gap-2"
@@ -153,7 +153,7 @@ function GateScreen() {
       </div>
 
       {/* card ----------------------------------------------------------- */}
-      <div className="relative z-10 flex min-h-[100dvh] items-center justify-center px-5 py-10">
+      <div className="relative z-10 flex h-full items-center justify-center overflow-y-auto overscroll-contain px-5 py-10">
         <motion.div
           initial={reduceMotion ? false : { opacity: 0, y: 14 }}
           animate={{ opacity: 1, y: 0 }}