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/pages/LandingPage.jsx

@@ -9,6 +9,7 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
 import GameCover from '../components/GameCover.jsx';
+import FitText from '../components/FitText.jsx';
 import Logo from '../components/Logo.jsx';
 import StatCard from '../components/StatCard.jsx';
 import {YearBars} from '../components/stats/FinishedStats.jsx';
@@ -30,7 +31,7 @@ function RankedGames({title, games, formatValue}) {
                     <li key={g.appid} className="flex items-center gap-3 px-5 py-3">
                         <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">{idx + 1}</span>
                         <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
-                        <span className="min-w-0 flex-1 truncate font-medium">{g.name ?? `App ${g.appid}`}</span>
+                        <span className="@container min-w-0 flex-1 font-medium"><FitText text={g.name ?? `App ${g.appid}`}/></span>
                         <span className="text-sm text-muted-foreground tabular-nums">{formatValue(g.value ?? 0)}</span>
                     </li>
                 ))}