UNO refactor (stage 1): hub shell with nav rail + internal-scroll panel

Rebuild ScreenShell into a UNO-style app shell: a persistent NavRail (vertical
side rail in landscape, bottom tab bar in portrait — Home/Profile/Shop/Friends/
Leaderboard/Achievements, active highlighted gold) + a content panel that owns
its own scroll so the page never scrolls as a whole and uses the width in
landscape. Reskins all 10 menu screens at once. Transient screens (auth,
matchmaking, room) opt out via hideNav. New nav.home i18n key.

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

src/components/screens/AuthScreen.tsx

@@ -14,7 +14,7 @@ export function AuthScreen() {
   const done = () => go("online");
 
   return (
-    <ScreenShell>
+    <ScreenShell hideNav>
       <ScreenHeader title={t("auth.title")} />
       <div className="glass rounded-3xl p-6 max-w-md mx-auto">
         <p className="text-center text-cream/60 text-sm mb-5">{t("auth.subtitle")}</p>

src/components/screens/MatchmakingScreen.tsx

@@ -69,7 +69,7 @@ export function MatchmakingScreen() {
 
   if (queued) {
     return (
-      <ScreenShell>
+      <ScreenShell hideNav>
         <div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
           <div className="text-5xl mb-4">⏳</div>
           <h1 className="gold-text text-2xl font-black">{t("queue.title")}</h1>
@@ -101,7 +101,7 @@ export function MatchmakingScreen() {
   }
 
   return (
-    <ScreenShell>
+    <ScreenShell hideNav>
       <div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
         <motion.div
           animate={ready ? {} : { rotate: 360 }}

src/components/screens/RoomScreen.tsx

@@ -74,7 +74,7 @@ export function RoomScreen() {
   };
 
   return (
-    <ScreenShell>
+    <ScreenShell hideNav>
       <ScreenHeader
         title={t("room.title")}
         back="online"