Mobile: redesign TopBar profile chip + trim oversized Home actions

- Profile chip: replace cramped fixed-width (w-[88px]) 3-line stack with a
  clean 2-line layout (name on top; level · xp-bar · % on a flexing row),
  capped at max-w-[46%] so it never crowds the icon group or overflows.
- Hero "Play online" title text-2xl→text-xl on phones (sm:text-2xl), truncate.

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

src/components/HomeScreen.tsx

@@ -112,10 +112,10 @@ export function HomeScreen() {
               <Play className="size-7" fill="currentColor" />
             </span>
             <span className="flex-1 min-w-0">
-              <span className="block text-2xl font-black text-[#2a1f04] leading-tight">
+              <span className="block text-xl sm:text-2xl font-black text-[#2a1f04] leading-tight truncate">
                 {t("menu.online")}
               </span>
-              <span className="block text-xs text-[#2a1f04]/70">{t("menu.onlineDesc")}</span>
+              <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
             </span>
             <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
           </motion.button>

src/components/online/TopBar.tsx

@@ -25,26 +25,28 @@ export function TopBar() {
     <div className="flex items-center justify-between gap-2">
       <button
         onClick={() => go("profile")}
-        className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 min-w-0 hover:bg-navy-800/80 transition"
+        className="glass rounded-full ltr:pr-3 rtl:pl-3 ltr:pl-1 rtl:pr-1 py-1 flex items-center gap-2 min-w-0 max-w-[46%] hover:bg-navy-800/80 transition"
       >
         <span className="relative size-9 shrink-0 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
           <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
         </span>
-        <span className="text-start leading-tight min-w-0 w-[88px] sm:w-24">
+        <span className="text-start leading-tight min-w-0 flex-1">
           <span className="flex items-center gap-1 text-sm font-bold text-cream truncate">
-            {profile.displayName}
+            <span className="truncate">{profile.displayName}</span>
             {profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
           </span>
-          <span className="flex items-center justify-between text-[10px] text-gold-400/80 mt-0.5">
-            <span>{t("common.level")} {profile.level}</span>
-            <span className="text-cream/40 tabular-nums">{maxed ? "MAX" : `${xpPct}%`}</span>
+          <span className="mt-1 flex items-center gap-1.5">
+            <span className="text-[10px] text-gold-400/80 shrink-0 whitespace-nowrap">
+              {t("common.level")} {profile.level}
             </span>
-          <span className="mt-0.5 block h-1 w-full rounded-full bg-navy-900 overflow-hidden">
+            <span className="h-1.5 flex-1 min-w-6 rounded-full bg-navy-900 overflow-hidden">
               <span
                 className="block h-full rounded-full bg-gradient-to-r from-gold-500 to-gold-300"
                 style={{ width: `${xpPct}%` }}
               />
             </span>
+            <span className="text-[9px] text-cream/40 tabular-nums shrink-0">{maxed ? "MAX" : `${xpPct}%`}</span>
+          </span>
         </span>
       </button>