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.test.jsx

@@ -0,0 +1,31 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import AppearanceCard from './AppearanceCard.jsx';
+
+const preferences = vi.hoisted(() => ({value: null}));
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('../context/PreferencesContext.jsx', () => ({usePreferences: () => preferences.value}));
+vi.mock('../hooks/useSaveAppearance.js', () => ({default: () => vi.fn()}));
+
+const show = (equipped) => {
+    preferences.value = {
+        appearance: {accent: 'violet', corners: 'default', wideLayout: false, reduceMotion: false, showBanner: true},
+        equipped,
+    };
+    render(<AppearanceCard/>);
+};
+
+afterEach(cleanup);
+
+describe('AppearanceCard', () => {
+    it('tells that the skin sets colors and corners only while a skin is worn', () => {
+        show({SKIN: 'SKIN_STEAM'});
+        expect(screen.getByText('SETTINGS.SKIN_OVERRIDES')).toBeTruthy();
+    });
+
+    it('shows no skin hint without a skin', () => {
+        show({});
+        expect(screen.queryByText('SETTINGS.SKIN_OVERRIDES')).toBeNull();
+    });
+});