fix(layout): fit names on phones without sideways scroll

Display and game names shrink to 0.875rem, then end with an ellipsis
(FitText + fit-text utility, CSS container units, full text in title).
Rows and buttons wrap at large fonts, header points chip can shrink.
Guard: scripts/check-overflow.js.

src/components/MostPlayedCard.jsx

@@ -5,6 +5,7 @@ import {ArrowRight, Trophy} from 'lucide-react';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
+import FitText from './FitText.jsx';
 import {formatPlaytime} from '../utils/games.js';
 import {coverEffect} from '../utils/rewards.js';
 
@@ -13,7 +14,7 @@ export default function MostPlayedCard({games, syncing, equipped}) {
     const maxMinutes = games[0]?.playtimeMinutes || 1;
     return (
         <Card className="gap-0 py-0">
-            <div className="flex items-center justify-between px-5 py-4 border-b">
+            <div className="flex flex-wrap items-center justify-between gap-x-3 px-5 py-4 border-b">
                 <h2 className="flex items-center gap-2 font-semibold">
                     <Trophy className="size-4 text-amber-500"/>
                     {t('DASHBOARD.MOST_PLAYED')}
@@ -40,9 +41,9 @@ export default function MostPlayedCard({games, syncing, equipped}) {
                                 </span>
                                 <GameCover appid={g.appid} imageUrl={g.imageUrl} fx={coverEffect(equipped, g.status)}
                                            className="w-16 sm:w-24 shrink-0"/>
-                                <div className="min-w-0 flex-1">
-                                    <div className="truncate font-medium group-hover:text-primary transition-colors">
-                                        {g.name ?? `App ${g.appid}`}
+                                <div className="@container min-w-0 flex-1">
+                                    <div className="font-medium group-hover:text-primary transition-colors">
+                                        <FitText text={g.name ?? `App ${g.appid}`}/>
                                     </div>
                                     <div className="mt-2 h-1.5 rounded-full bg-muted">
                                         <div