Mobile sweep: fix matchmaking slot overflow + profile avatar picker art

- MatchmakingScreen: the 4 fixed w-16 slots (~292px) overflowed 320px phones;
  now grid-fluid (w-full, gap-2 sm:gap-3, max-w-xs) so they always fit.
- ProfileScreen avatar picker now renders <Avatar id> (god/legend medallions)
  instead of raw emoji — consistent with the displayed avatar and shop.

Swept Achievements/Leaderboard/BuyCoins/Auth/Shop/Profile/Lobby/Room — already
responsive (ScreenShell + min-w-0/truncate/shrink-0 throughout); no other
overflow found.

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

src/components/screens/MatchmakingScreen.tsx

@@ -126,14 +126,14 @@ export function MatchmakingScreen() {
           </>
         )}
 
-        <div className="grid grid-cols-4 gap-3 mt-8">
+        <div className="grid grid-cols-4 gap-2 sm:gap-3 mt-8 w-full max-w-xs">
           {slots.map((i) => {
             const p = mm.players[i];
             return (
               <div
                 key={i}
                 className={
-                  "w-16 h-20 rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
+                  "h-20 w-full rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
                   (p ? "glass gold-border" : "border border-dashed border-navy-700/60 bg-navy-900/30")
                 }
               >

src/components/screens/ProfileScreen.tsx

@@ -174,11 +174,11 @@ export function ProfileScreen() {
               key={a.id}
               onClick={() => updateProfile({ avatar: a.id })}
               className={cn(
-                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition",
+                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
                 profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
               )}
             >
-              {a.emoji}
+              <Avatar id={a.id} size={40} />
             </button>
           ))}
         </div>