feat(points): apply worn effects on covers, details and backgrounds

src/components/MostPlayedCard.jsx

@@ -6,8 +6,9 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
 import {formatPlaytime} from '../utils/games.js';
+import {coverEffect} from '../utils/rewards.js';
 
-export default function MostPlayedCard({games, syncing}) {
+export default function MostPlayedCard({games, syncing, equipped}) {
     const {t} = useTranslation();
     const maxMinutes = games[0]?.playtimeMinutes || 1;
     return (
@@ -37,7 +38,8 @@ export default function MostPlayedCard({games, syncing}) {
                                 <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">
                                     {index + 1}
                                 </span>
-                                <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 sm:w-24 shrink-0"/>
+                                <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}`}