feat(points): unlock items, progress bars and skins

Locked items show a progress bar until the goal is reached. Four
CSS-only skins (Pastel, Retro CRT, Cyberpunk, Steam) in skins.css,
light and dark. A skin overrides accent and corners; badges, borders,
frames, effects and game art stay on top. New Platinum shine and
Equalizer effects.

src/components/AppearanceCard.jsx

@@ -6,13 +6,14 @@ import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
 import {Switch} from '@/components/ui/switch';
 import {AccentPicker, CornersPicker} from './StylePickers.jsx';
+import {equippedSkin} from '../utils/rewards.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
 import {coverUrl} from '../utils/games.js';
 
 export default function AppearanceCard() {
     const {t} = useTranslation();
-    const {appearance} = usePreferences();
+    const {appearance, equipped} = usePreferences();
     const saveAppearance = useSaveAppearance();
 
     return (
@@ -23,6 +24,7 @@ export default function AppearanceCard() {
             <CardContent className="space-y-6">
                 <AccentPicker id="accent" value={appearance.accent} onChange={(accent) => saveAppearance({accent})}/>
                 <CornersPicker id="corners" value={appearance.corners} onChange={(corners) => saveAppearance({corners})}/>
+                {equippedSkin(equipped) && <p className="text-xs text-muted-foreground">{t('SETTINGS.SKIN_OVERRIDES')}</p>}
                 <div className="flex items-center justify-between gap-4">
                     <div className="space-y-1">
                         <Label htmlFor="wideLayout">{t('SETTINGS.WIDE_LAYOUT')}</Label>