fix(topbar): coin balance was clipped — compact large numbers + shrink bar

The Home top bar overflowed on narrow screens; in RTL the coins pill is the
far-left item so its leading digits got clipped (showed "04,240" for 104,240).
- CoinsPill: compact big balances (104,240 → 104K, 1.2M), shrink-0 +
  whitespace-nowrap; exact value in the tooltip.
- TopBar: tighter gaps, profile pill min-w-0 (shrinks/truncates first), icon+coins
  group shrink-0 so it never gets squeezed.

Verified: tsc + next build clean; web rebuilt on :1500.

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

src/components/online/TopBar.tsx

@@ -22,16 +22,16 @@ export function TopBar() {
   const xpPct = maxed ? 100 : Math.min(100, Math.max(0, Math.round((profile.xp / xpNeed) * 100)));
 
   return (
-    <div className="flex items-center justify-between gap-3">
+    <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 hover:bg-navy-800/80 transition"
+        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"
       >
-        <span className="relative size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
+        <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-[96px]">
-          <span className="flex items-center gap-1 text-sm font-bold text-cream max-w-28 truncate">
+        <span className="text-start leading-tight min-w-0 w-[88px] sm:w-24">
+          <span className="flex items-center gap-1 text-sm font-bold text-cream truncate">
             {profile.displayName}
             {profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
           </span>
@@ -48,7 +48,7 @@ export function TopBar() {
         </span>
       </button>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1.5 shrink-0">
         <button
           onClick={() => go("notifications")}
           className="glass rounded-full p-2 hover:bg-navy-800/80 transition relative"