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/GameHeroCard.jsx

@@ -8,6 +8,7 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {cn} from '@/lib/utils';
 import GameCover from './GameCover.jsx';
+import FitText from './FitText.jsx';
 import GameStatusBadge from './GameStatusBadge.jsx';
 import ProfileArtMenu from './ProfileArtMenu.jsx';
 import TimeToBeat from './TimeToBeat.jsx';
@@ -68,8 +69,8 @@ export default function GameHeroCard({game, auditor, profileStyle, onCorrect, on
                        className="w-full rounded-none md:w-96 md:shrink-0"/>
             <div className="relative flex flex-1 flex-col justify-between gap-4 p-6">
                 <div>
-                    <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
-                        {game.name ?? `App ${game.appid}`}
+                    <h1 className="@container text-2xl md:text-3xl font-bold tracking-tight">
+                        <FitText wrapOnDesktop text={game.name ?? `App ${game.appid}`}/>
                     </h1>
                     <div className="mt-3 flex flex-wrap gap-2">
                         <Badge variant="secondary" className="tabular-nums">