diff --git a/src/components/GameAchievements.jsx b/src/components/GameAchievements.jsx
new file mode 100644
index 0000000..b98662c
--- /dev/null
+++ b/src/components/GameAchievements.jsx
@@ -0,0 +1,107 @@
+import {useMemo, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Trophy} from 'lucide-react';
+
+import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
+import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
+
+const formatUnlockedAt = (instant, locale) => {
+    if (!instant) return '';
+    try {
+        return new Date(instant).toLocaleDateString(locale, {year: 'numeric', month: 'short', day: 'numeric'});
+    } catch {
+        return '';
+    }
+};
+
+function AchievementIcon({appid, src, unlocked}) {
+    const [failed, setFailed] = useState(false);
+    if (!src || failed) return <div className="size-12 rounded-md bg-muted"/>;
+    return (
+        <img src={src} alt="" className={cn('size-12 rounded-md', !unlocked && 'grayscale')}
+             onError={() => {
+                 reportBrokenImage(appid, ACHIEVEMENT_ICONS);
+                 setFailed(true);
+             }}/>
+    );
+}
+
+export default function GameAchievements({game}) {
+    const {t, i18n} = useTranslation();
+
+    const sortedAchievements = useMemo(() => {
+        if (!game.achievements) return [];
+        return [...game.achievements].sort((a, b) => {
+            if (a.unlocked !== b.unlocked) return a.unlocked ? -1 : 1;
+            if (a.unlocked && b.unlocked) {
+                return (b.unlockedAt ?? '').localeCompare(a.unlockedAt ?? '');
+            }
+            return (a.displayName ?? a.apiName).localeCompare(b.displayName ?? b.apiName);
+        });
+    }, [game.achievements]);
+
+    const stats = [
+        [t('GAME_DETAIL.UNLOCKED'), game.achievementsUnlocked],
+        [t('GAME_DETAIL.REMAINING'), game.achievementsRemaining],
+        [t('GAME_DETAIL.COMPLETION'), `${game.completionPercent}%`],
+    ];
+
+    return (
+        <>
+            <Card className="p-6 gap-5">
+                <div className="flex items-baseline justify-between">
+                    <h2 className="flex items-center gap-2 text-lg font-semibold">
+                        <Trophy className="size-4 text-amber-500"/>
+                        {t('GAME_DETAIL.ACHIEVEMENTS')}
+                    </h2>
+                    <span className="text-sm text-muted-foreground tabular-nums">
+                        {game.achievementsUnlocked} / {game.achievementsTotal}
+                    </span>
+                </div>
+                <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
+                    <div
+                        className="h-full rounded-full bg-primary transition-all"
+                        style={{width: `${Math.min(100, game.completionPercent)}%`}}
+                    />
+                </div>
+                <div className="grid grid-cols-3 gap-3 text-center">
+                    {stats.map(([label, value]) => (
+                        <div key={label} className="rounded-lg bg-muted/50 p-3">
+                            <div className="text-2xl font-bold tabular-nums">{value}</div>
+                            <div className="text-xs text-muted-foreground">{label}</div>
+                        </div>
+                    ))}
+                </div>
+            </Card>
+
+            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {sortedAchievements.map((a) => {
+                    const icon = a.unlocked ? a.iconUrl : a.iconGrayUrl;
+                    return (
+                        <li
+                            key={a.apiName}
+                            className={cn(
+                                'flex items-start gap-3 rounded-xl border bg-card p-3',
+                                a.unlocked ? 'border-primary/40' : 'opacity-60',
+                            )}
+                        >
+                            <AchievementIcon key={icon} appid={game.appid} src={icon} unlocked={a.unlocked}/>
+                            <div className="min-w-0 flex-1">
+                                <div className="truncate font-medium">{a.displayName ?? a.apiName}</div>
+                                {a.description && (
+                                    <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{a.description}</div>
+                                )}
+                                {a.unlocked && a.unlockedAt && (
+                                    <div className="mt-1 text-xs text-primary tabular-nums">
+                                        {formatUnlockedAt(a.unlockedAt, i18n.language)}
+                                    </div>
+                                )}
+                            </div>
+                        </li>
+                    );
+                })}
+            </ul>
+        </>
+    );
+}
diff --git a/src/components/GameHeroCard.jsx b/src/components/GameHeroCard.jsx
new file mode 100644
index 0000000..24810be
--- /dev/null
+++ b/src/components/GameHeroCard.jsx
@@ -0,0 +1,134 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Clock, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, Merge, PanelTop, PencilLine, RotateCcw, Timer} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Badge} from '@/components/ui/badge';
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import GameCover from './GameCover.jsx';
+import GameStatusBadge from './GameStatusBadge.jsx';
+import ProfileArtMenu from './ProfileArtMenu.jsx';
+import TimeToBeat from './TimeToBeat.jsx';
+import useSaveAppearance from '../hooks/useSaveAppearance.js';
+import {usePreferences} from '../context/PreferencesContext.jsx';
+import {formatPlaytime} from '../utils/games.js';
+import {setGameHidden} from '../utils/hiddenGames.js';
+import {isSteamKey} from '../utils/manualGames.js';
+import {platformLabel} from '../utils/platforms.js';
+
+const SPEEDRUN_PREFIX = 'https://www.speedrun.com/';
+
+export default function GameHeroCard({game, manual, auditor, profileStyle, onCorrect, onMerge, onHiddenChanged, onProfileStyleSaved}) {
+    const {t} = useTranslation();
+    const {appearance} = usePreferences();
+    const saveAppearance = useSaveAppearance();
+    const [hiding, setHiding] = useState(false);
+
+    const onSteam = isSteamKey(game.appid);
+    // Core checks the link too; a link from the API must never run script.
+    const speedrunUrl = typeof game.speedrunUrl === 'string' && game.speedrunUrl.startsWith(SPEEDRUN_PREFIX)
+        ? game.speedrunUrl : null;
+    const isBackground = appearance.backgroundAppid === game.appid;
+    const isBanner = appearance.showBanner && appearance.bannerAppid === game.appid;
+
+    const toggleHidden = async () => {
+        const hidden = !game.hidden;
+        setHiding(true);
+        try {
+            const response = await setGameHidden(game.appid, hidden);
+            if (response.status === 401) return;
+            if (!response.ok) {
+                toast.error(t('GAME_DETAIL.HIDE_ERROR'));
+                return;
+            }
+            onHiddenChanged(hidden);
+            toast.success(t(hidden ? 'GAME_DETAIL.HIDDEN_TOAST' : 'GAME_DETAIL.SHOWN_TOAST'));
+        } catch (err) {
+            console.error('Hide game error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setHiding(false);
+        }
+    };
+
+    return (
+        <Card className="relative overflow-hidden p-0 gap-0 md:flex-row">
+            <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-full rounded-none md:w-96 md:shrink-0"/>
+            <div className="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>
+                    <div className="mt-3 flex flex-wrap gap-2">
+                        <Badge variant="secondary" className="tabular-nums">
+                            <Clock className="size-3"/>
+                            {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(game.playtimeMinutes)})}
+                        </Badge>
+                        <GameStatusBadge status={game.status}/>
+                        {platformLabel(game) && (
+                            <Badge variant="outline"><Gamepad2 className="size-3"/>{platformLabel(game)}</Badge>
+                        )}
+                    </div>
+                    <div className="mt-3">
+                        <TimeToBeat time={game.timeToBeat}/>
+                    </div>
+                    {speedrunUrl && (
+                        <Button asChild variant="outline" size="sm" className="mt-3">
+                            <a href={speedrunUrl} target="_blank" rel="noopener noreferrer">
+                                <Timer/>{t('GAME_DETAIL.OPEN_IN_SPEEDRUN')}<ExternalLink/>
+                            </a>
+                        </Button>
+                    )}
+                    {auditor && (
+                        <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={onCorrect}>
+                            <PencilLine/>{t('CORRECTION.OPEN')}
+                        </Button>
+                    )}
+                    {auditor && (
+                        <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={onMerge}>
+                            <Merge/>{t('MERGE.OPEN')}
+                        </Button>
+                    )}
+                </div>
+                {/* Store page, background and banner need Steam art, so a game off Steam has none of them.
+                    Hide is here too: only a Steam game can be hidden. */}
+                {onSteam && <div className="flex flex-wrap gap-2">
+                    <Button asChild variant="outline" size="sm">
+                        <a href={`https://store.steampowered.com/app/${game.appid}`} target="_blank" rel="noopener noreferrer">
+                            {t('GAME_DETAIL.OPEN_IN_STEAM')}<ExternalLink/>
+                        </a>
+                    </Button>
+                    {isBackground ? (
+                        <Button variant="outline" size="sm" onClick={() => saveAppearance({backgroundAppid: null})}>
+                            <ImageOff/>{t('GAME_DETAIL.REMOVE_BACKGROUND')}
+                        </Button>
+                    ) : (
+                        <Button variant="outline" size="sm" onClick={() => saveAppearance({backgroundAppid: game.appid})}>
+                            <ImageIcon/>{t('GAME_DETAIL.SET_BACKGROUND')}
+                        </Button>
+                    )}
+                    {isBanner ? (
+                        <Button variant="outline" size="sm" onClick={() => saveAppearance({bannerAppid: null})}>
+                            <RotateCcw/>{t('SETTINGS.BANNER_AUTO')}
+                        </Button>
+                    ) : (
+                        <Button variant="outline" size="sm"
+                                onClick={() => saveAppearance({bannerAppid: game.appid, showBanner: true})}>
+                            <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
+                        </Button>
+                    )}
+                    {profileStyle && (
+                        <ProfileArtMenu appid={game.appid} style={profileStyle} onSaved={onProfileStyleSaved}/>
+                    )}
+                    {!manual && (
+                        <Button variant="outline" size="sm" onClick={toggleHidden} disabled={hiding}>
+                            {game.hidden ? <Eye/> : <EyeOff/>}
+                            {t(game.hidden ? 'GAME_DETAIL.UNHIDE' : 'GAME_DETAIL.HIDE')}
+                        </Button>
+                    )}
+                </div>}
+            </div>
+        </Card>
+    );
+}
diff --git a/src/hooks/useGame.js b/src/hooks/useGame.js
new file mode 100644
index 0000000..9c039fa
--- /dev/null
+++ b/src/hooks/useGame.js
@@ -0,0 +1,39 @@
+import {useCallback, useEffect, useState} from 'react';
+import {request} from '../utils/api.js';
+import useAbortPrevious from './useAbortPrevious.js';
+
+export default function useGame(appid) {
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [reloads, setReloads] = useState(0);
+
+    // Another game starts empty, already in this render. A reload of the same game keeps the old data, so the edit
+    // cards keep what is typed.
+    const [dataAppid, setDataAppid] = useState(appid);
+    if (dataAppid !== appid) {
+        setDataAppid(appid);
+        setData(null);
+    }
+
+    const nextSignal = useAbortPrevious();
+    useEffect(() => {
+        const signal = nextSignal();
+        setIsLoading(true);
+        setError(null);
+        (async () => {
+            const {ok, status, data: json} = await request(
+                `${import.meta.env.VITE_CORE_API_URL}/api/library/games/${appid}`, {signal});
+            if (signal.aborted) return;
+            setIsLoading(false);
+            if (status === 401) return;
+            if (status === 404) setError('GAME_DETAIL.NOT_FOUND');
+            else if (!ok || !json) setError(status === 0 ? 'INFO.ERROR.NETWORK_FAILURE' : 'GAME_DETAIL.ERROR_LOAD');
+            else setData(json);
+        })();
+    }, [nextSignal, appid, reloads]);
+
+    const reload = useCallback(() => setReloads((n) => n + 1), []);
+
+    return {data, setData, isLoading, error, reload};
+}
diff --git a/src/pages/GameDetail.jsx b/src/pages/GameDetail.jsx
index 57656b1..1e69857 100644
--- a/src/pages/GameDetail.jsx
+++ b/src/pages/GameDetail.jsx
@@ -1,81 +1,38 @@
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {Link, useNavigate, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ArrowLeft, Clock, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, Merge, PanelTop, PencilLine, RotateCcw, ShieldOff, Timer, Trophy} from 'lucide-react';
-import {toast} from 'sonner';
+import {ArrowLeft, EyeOff, ShieldOff, Trophy} from 'lucide-react';
 
-import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
-import {cn} from '@/lib/utils';
 import BacklogCard from '../components/BacklogCard.jsx';
 import Confetti from '../components/Confetti.jsx';
-import GameCover from '../components/GameCover.jsx';
-import GameStatusBadge from '../components/GameStatusBadge.jsx';
+import GameAchievements from '../components/GameAchievements.jsx';
+import GameHeroCard from '../components/GameHeroCard.jsx';
 import ManualGameCard from '../components/ManualGameCard.jsx';
 import CompletedHint from '../components/CompletedHint.jsx';
 import FinishedHint from '../components/FinishedHint.jsx';
 import GameCorrectionDialog from '../components/GameCorrectionDialog.jsx';
 import GameMergeDialog from '../components/GameMergeDialog.jsx';
 import PlayingHint from '../components/PlayingHint.jsx';
-import TimeToBeat from '../components/TimeToBeat.jsx';
-import {formatPlaytime} from '../utils/games.js';
 import useCurrentUser from '../hooks/useCurrentUser.js';
-import useSaveAppearance from '../hooks/useSaveAppearance.js';
-import {usePreferences} from '../context/PreferencesContext.jsx';
+import useGame from '../hooks/useGame.js';
 import PageContainer from '../components/PageContainer.jsx';
-import ProfileArtMenu from '../components/ProfileArtMenu.jsx';
-import {request} from '../utils/api.js';
-import useAbortPrevious from '../hooks/useAbortPrevious.js';
-import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
 import {canCorrect} from '../utils/corrections.js';
 import {celebrationFor, celebrationLevel} from '../utils/confetti.js';
-import {setGameHidden} from '../utils/hiddenGames.js';
-import {isSteamKey} from '../utils/manualGames.js';
-import {platformLabel} from '../utils/platforms.js';
-
-const SPEEDRUN_PREFIX = 'https://www.speedrun.com/';
-
-const formatUnlockedAt = (instant, locale) => {
-    if (!instant) return '';
-    try {
-        return new Date(instant).toLocaleDateString(locale, {year: 'numeric', month: 'short', day: 'numeric'});
-    } catch {
-        return '';
-    }
-};
-
-function AchievementIcon({appid, src, unlocked}) {
-    const [failed, setFailed] = useState(false);
-    if (!src || failed) return <div className="size-12 rounded-md bg-muted"/>;
-    return (
-        <img src={src} alt="" className={cn('size-12 rounded-md', !unlocked && 'grayscale')}
-             onError={() => {
-                 reportBrokenImage(appid, ACHIEVEMENT_ICONS);
-                 setFailed(true);
-             }}/>
-    );
-}
 
 export default function GameDetail() {
-    const {t, i18n} = useTranslation();
+    const {t} = useTranslation();
     const {appid} = useParams();
-    const {appearance} = usePreferences();
-    const saveAppearance = useSaveAppearance();
     const navigate = useNavigate();
 
-    const [data, setData] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [hiding, setHiding] = useState(false);
-    const [error, setError] = useState(null);
+    const {data, setData, isLoading, error, reload} = useGame(appid);
     const [correcting, setCorrecting] = useState(false);
     const [merging, setMerging] = useState(false);
-    const [reloads, setReloads] = useState(0);
     const currentUser = useCurrentUser(true);
     const auditor = canCorrect(currentUser);
     const [savedProfileStyle, setSavedProfileStyle] = useState(null);
-    const profileStyle = savedProfileStyle ?? currentUser?.profileStyle;
     const [celebration, setCelebration] = useState(null);
     const shownLevel = useRef(null);
 
@@ -87,75 +44,7 @@ export default function GameDetail() {
         shownLevel.current = {appid: data.appid, level: celebrationLevel(data)};
     }, [data]);
 
-    // Another game starts empty, already in this render. A reload of the same game keeps the old data, so the edit
-    // cards keep what is typed.
-    const [dataAppid, setDataAppid] = useState(appid);
-    if (dataAppid !== appid) {
-        setDataAppid(appid);
-        setData(null);
-    }
-
-    const nextSignal = useAbortPrevious();
-    useEffect(() => {
-        const signal = nextSignal();
-        setIsLoading(true);
-        setError(null);
-        (async () => {
-            const {ok, status, data: json} = await request(
-                `${import.meta.env.VITE_CORE_API_URL}/api/library/games/${appid}`, {signal});
-            if (signal.aborted) return;
-            setIsLoading(false);
-            if (status === 401) return;
-            if (status === 404) setError('GAME_DETAIL.NOT_FOUND');
-            else if (!ok || !json) setError(status === 0 ? 'INFO.ERROR.NETWORK_FAILURE' : 'GAME_DETAIL.ERROR_LOAD');
-            else setData(json);
-        })();
-    }, [nextSignal, appid, reloads]);
-
-    const sortedAchievements = useMemo(() => {
-        if (!data?.achievements) return [];
-        return [...data.achievements].sort((a, b) => {
-            if (a.unlocked !== b.unlocked) return a.unlocked ? -1 : 1;
-            if (a.unlocked && b.unlocked) {
-                return (b.unlockedAt ?? '').localeCompare(a.unlockedAt ?? '');
-            }
-            return (a.displayName ?? a.apiName).localeCompare(b.displayName ?? b.apiName);
-        });
-    }, [data]);
-
     const manual = data?.source === 'MANUAL';
-    const onSteam = !!data && isSteamKey(data.appid);
-    // Core checks the link too; a link from the API must never run script.
-    const speedrunUrl = typeof data?.speedrunUrl === 'string' && data.speedrunUrl.startsWith(SPEEDRUN_PREFIX)
-        ? data.speedrunUrl : null;
-    const isBackground = !!data && appearance.backgroundAppid === data.appid;
-    const isBanner = !!data && appearance.showBanner && appearance.bannerAppid === data.appid;
-
-    const toggleHidden = async () => {
-        const hidden = !data.hidden;
-        setHiding(true);
-        try {
-            const response = await setGameHidden(data.appid, hidden);
-            if (response.status === 401) return;
-            if (!response.ok) {
-                toast.error(t('GAME_DETAIL.HIDE_ERROR'));
-                return;
-            }
-            setData((d) => ({...d, hidden}));
-            toast.success(t(hidden ? 'GAME_DETAIL.HIDDEN_TOAST' : 'GAME_DETAIL.SHOWN_TOAST'));
-        } catch (err) {
-            console.error('Hide game error:', err);
-            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
-        } finally {
-            setHiding(false);
-        }
-    };
-
-    const stats = data ? [
-        [t('GAME_DETAIL.UNLOCKED'), data.achievementsUnlocked],
-        [t('GAME_DETAIL.REMAINING'), data.achievementsRemaining],
-        [t('GAME_DETAIL.COMPLETION'), `${data.completionPercent}%`],
-    ] : [];
 
     return (
         <PageContainer className="p-4 md:p-8 space-y-6">
@@ -184,83 +73,10 @@ export default function GameDetail() {
                             <EyeOff className="size-4 shrink-0"/>{t('GAME_DETAIL.HIDDEN_NOTE')}
                         </div>
                     )}
-                    <Card className="relative overflow-hidden p-0 gap-0 md:flex-row">
-                        <GameCover appid={data.appid} imageUrl={data.imageUrl} className="w-full rounded-none md:w-96 md:shrink-0"/>
-                        <div className="flex flex-1 flex-col justify-between gap-4 p-6">
-                            <div>
-                                <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
-                                    {data.name ?? `App ${data.appid}`}
-                                </h1>
-                                <div className="mt-3 flex flex-wrap gap-2">
-                                    <Badge variant="secondary" className="tabular-nums">
-                                        <Clock className="size-3"/>
-                                        {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(data.playtimeMinutes)})}
-                                    </Badge>
-                                    <GameStatusBadge status={data.status}/>
-                                    {platformLabel(data) && (
-                                        <Badge variant="outline"><Gamepad2 className="size-3"/>{platformLabel(data)}</Badge>
-                                    )}
-                                </div>
-                                <div className="mt-3">
-                                    <TimeToBeat time={data.timeToBeat}/>
-                                </div>
-                                {speedrunUrl && (
-                                    <Button asChild variant="outline" size="sm" className="mt-3">
-                                        <a href={speedrunUrl} target="_blank" rel="noopener noreferrer">
-                                            <Timer/>{t('GAME_DETAIL.OPEN_IN_SPEEDRUN')}<ExternalLink/>
-                                        </a>
-                                    </Button>
-                                )}
-                                {auditor && (
-                                    <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={() => setCorrecting(true)}>
-                                        <PencilLine/>{t('CORRECTION.OPEN')}
-                                    </Button>
-                                )}
-                                {auditor && (
-                                    <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={() => setMerging(true)}>
-                                        <Merge/>{t('MERGE.OPEN')}
-                                    </Button>
-                                )}
-                            </div>
-                            {/* Store page, background and banner need Steam art, so a game off Steam has none of them.
-                                Hide is here too: only a Steam game can be hidden. */}
-                            {onSteam && <div className="flex flex-wrap gap-2">
-                                <Button asChild variant="outline" size="sm">
-                                    <a href={`https://store.steampowered.com/app/${data.appid}`} target="_blank" rel="noopener noreferrer">
-                                        {t('GAME_DETAIL.OPEN_IN_STEAM')}<ExternalLink/>
-                                    </a>
-                                </Button>
-                                {isBackground ? (
-                                    <Button variant="outline" size="sm" onClick={() => saveAppearance({backgroundAppid: null})}>
-                                        <ImageOff/>{t('GAME_DETAIL.REMOVE_BACKGROUND')}
-                                    </Button>
-                                ) : (
-                                    <Button variant="outline" size="sm" onClick={() => saveAppearance({backgroundAppid: data.appid})}>
-                                        <ImageIcon/>{t('GAME_DETAIL.SET_BACKGROUND')}
-                                    </Button>
-                                )}
-                                {isBanner ? (
-                                    <Button variant="outline" size="sm" onClick={() => saveAppearance({bannerAppid: null})}>
-                                        <RotateCcw/>{t('SETTINGS.BANNER_AUTO')}
-                                    </Button>
-                                ) : (
-                                    <Button variant="outline" size="sm"
-                                            onClick={() => saveAppearance({bannerAppid: data.appid, showBanner: true})}>
-                                        <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
-                                    </Button>
-                                )}
-                                {profileStyle && (
-                                    <ProfileArtMenu appid={data.appid} style={profileStyle} onSaved={setSavedProfileStyle}/>
-                                )}
-                                {!manual && (
-                                    <Button variant="outline" size="sm" onClick={toggleHidden} disabled={hiding}>
-                                        {data.hidden ? <Eye/> : <EyeOff/>}
-                                        {t(data.hidden ? 'GAME_DETAIL.UNHIDE' : 'GAME_DETAIL.HIDE')}
-                                    </Button>
-                                )}
-                            </div>}
-                        </div>
-                    </Card>
+                    <GameHeroCard game={data} manual={manual} auditor={auditor} profileStyle={savedProfileStyle ?? currentUser?.profileStyle}
+                                  onCorrect={() => setCorrecting(true)} onMerge={() => setMerging(true)}
+                                  onHiddenChanged={(hidden) => setData((d) => ({...d, hidden}))}
+                                  onProfileStyleSaved={setSavedProfileStyle}/>
 
                     {/* The finished question also answers "are you playing it?". */}
                     {!(data.finishedHint && ['BACKLOG', 'PLAYING'].includes(data.status)) && (
@@ -293,75 +109,19 @@ export default function GameDetail() {
                         </Card>
                     )}
 
-                    {data.hasAchievements && data.statsVisible && (
-                        <>
-                            <Card className="p-6 gap-5">
-                                <div className="flex items-baseline justify-between">
-                                    <h2 className="flex items-center gap-2 text-lg font-semibold">
-                                        <Trophy className="size-4 text-amber-500"/>
-                                        {t('GAME_DETAIL.ACHIEVEMENTS')}
-                                    </h2>
-                                    <span className="text-sm text-muted-foreground tabular-nums">
-                                        {data.achievementsUnlocked} / {data.achievementsTotal}
-                                    </span>
-                                </div>
-                                <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
-                                    <div
-                                        className="h-full rounded-full bg-primary transition-all"
-                                        style={{width: `${Math.min(100, data.completionPercent)}%`}}
-                                    />
-                                </div>
-                                <div className="grid grid-cols-3 gap-3 text-center">
-                                    {stats.map(([label, value]) => (
-                                        <div key={label} className="rounded-lg bg-muted/50 p-3">
-                                            <div className="text-2xl font-bold tabular-nums">{value}</div>
-                                            <div className="text-xs text-muted-foreground">{label}</div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </Card>
-
-                            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                                {sortedAchievements.map((a) => {
-                                    const icon = a.unlocked ? a.iconUrl : a.iconGrayUrl;
-                                    return (
-                                        <li
-                                            key={a.apiName}
-                                            className={cn(
-                                                'flex items-start gap-3 rounded-xl border bg-card p-3',
-                                                a.unlocked ? 'border-primary/40' : 'opacity-60',
-                                            )}
-                                        >
-                                            <AchievementIcon key={icon} appid={data.appid} src={icon} unlocked={a.unlocked}/>
-                                            <div className="min-w-0 flex-1">
-                                                <div className="truncate font-medium">{a.displayName ?? a.apiName}</div>
-                                                {a.description && (
-                                                    <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{a.description}</div>
-                                                )}
-                                                {a.unlocked && a.unlockedAt && (
-                                                    <div className="mt-1 text-xs text-primary tabular-nums">
-                                                        {formatUnlockedAt(a.unlockedAt, i18n.language)}
-                                                    </div>
-                                                )}
-                                            </div>
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        </>
-                    )}
+                    {data.hasAchievements && data.statsVisible && <GameAchievements game={data}/>}
                 </>
             )}
             {celebration && <Confetti key={celebration.id} size={celebration.size} onDone={() => setCelebration(null)}/>}
             {/* Outside the content: the reload after a save must not close it. */}
             {data && auditor && (
                 <GameCorrectionDialog game={data} open={correcting} onOpenChange={setCorrecting}
-                                      onChanged={() => setReloads((n) => n + 1)}/>
+                                      onChanged={reload}/>
             )}
             {auditor && data && (
                 <GameMergeDialog game={data} open={merging} onOpenChange={setMerging} onMerged={(merged) => {
                     // A new key loads through the address; the same key needs a reload.
-                    if (merged === data.appid) setReloads((n) => n + 1);
+                    if (merged === data.appid) reload();
                     else navigate(`/library/${merged}`, {replace: true});
                 }}/>
             )}