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")
                 }
               >