Mobile: compact Home vertical rhythm so footer fits without scroll

Logo/title/hero/tiles/footer spacing now scales down on small screens
(sm: breakpoints) so the menu fits common phone viewports — the sign-in/
language footer was being pushed below the fold.

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

src/components/HomeScreen.tsx

@@ -84,12 +84,12 @@ export function HomeScreen() {
         <motion.div
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
-          className="flex flex-col items-center text-center mt-5 mb-6"
+          className="flex flex-col items-center text-center mt-3 mb-4 sm:mt-5 sm:mb-6"
         >
-          <div className="size-16 rounded-2xl gold-border flex items-center justify-center bg-navy-900 mb-3 shadow-lg">
-            <span className="gold-text text-4xl font-black leading-none">♠</span>
+          <div className="size-12 sm:size-16 rounded-2xl gold-border flex items-center justify-center bg-navy-900 mb-2 sm:mb-3 shadow-lg">
+            <span className="gold-text text-3xl sm:text-4xl font-black leading-none">♠</span>
           </div>
-          <h1 className="gold-text text-5xl font-black tracking-tight">
+          <h1 className="gold-text text-4xl sm:text-5xl font-black tracking-tight">
             {t("app.title")}
           </h1>
           <p className="text-cream/60 mt-1 text-sm">{t("app.subtitle")}</p>
@@ -106,9 +106,9 @@ export function HomeScreen() {
             transition={{ delay: 0.05 }}
             whileTap={{ scale: 0.985 }}
             onClick={playOnline}
-            className="press-3d btn-gold relative w-full rounded-3xl px-5 py-5 flex items-center gap-4 text-start"
+            className="press-3d btn-gold relative w-full rounded-3xl px-5 py-4 sm:py-5 flex items-center gap-4 text-start"
           >
-            <span className="grid size-14 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+            <span className="grid size-12 sm:size-14 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
               <Play className="size-7" fill="currentColor" />
             </span>
             <span className="flex-1 min-w-0">
@@ -154,7 +154,7 @@ export function HomeScreen() {
         </div>
 
         {/* tiles */}
-        <div className="grid grid-cols-4 gap-2.5 mt-4">
+        <div className="grid grid-cols-4 gap-2.5 mt-3 sm:mt-4">
           <Tile icon={<User className="size-5" />} label={t("menu.profile")} tint="teal" onClick={() => nav("profile")} />
           <Tile icon={<Users className="size-5" />} label={t("menu.friends")} tint="sky" onClick={() => nav(isAuthed ? "friends" : "auth")} />
           <Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} tint="gold" onClick={() => nav("leaderboard")} />
@@ -164,7 +164,7 @@ export function HomeScreen() {
         <div className="flex-1" />
 
         {/* footer */}
-        <div className="flex items-center justify-between gap-2 pt-6 pb-2">
+        <div className="flex items-center justify-between gap-2 pt-4 sm:pt-6 pb-2">
           {isAuthed ? (
             <button
               onClick={signOut}