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

feat(points): add effect engines and effects shop
feat(settings): reduce animations switch
2026-10-01 15:09:25 +02:00 · 2026-10-01 15:09:25 +02:00 · 2026-10-01 15:09:25 +02:00 · 2026-10-01 14:12:34 +02:00
46 changed files with 1744 additions and 62 deletions
@@ -32,8 +32,10 @@ To Be Played is split into three repositories:
  years of full-time work, and its oldest unplayed game; most played and most loyal games; top genres and moods;
  trips to the moon, the longest gaming day, games started but under one hour; finished games per year; games per platform.
 - **Pile Points** (`/points`): points for playing games off your pile (start, finish by time to beat, 100 %, month and
-  streak bonuses; Core checks proof of play), spent in a small shop on an avatar border, a badge, a premium accent and a
+  streak bonuses; Core checks proof of play), spent in a small shop on an avatar border, a badge, a premium accent, a
-  banner frame, shown on the dashboard and the public profile. The balance is in the header.
+  banner frame, an effect for 100 % games and an animated page or banner background (CSS and SVG, in `effects.css`),
  shown on the dashboard and the public profile. The balance is in the header. Every effect stands still with the
  system setting "reduce motion" or the "Reduce animations" switch in the settings.
 - **Landing page**: next to the community numbers and the top games, three blocks: games per platform, top genres and
  finished games per year of all users.
 - **Library**: status filters, "short games" filter (up to 10 h), search, sorting by playtime, recently seen, newest
@@ -71,7 +73,7 @@ To Be Played is split into three repositories:
  every achievement is unlocked.
 - **Confetti**: opening a finished game plays a small confetti burst, a finished game with every achievement a big
  one; setting the status to finished plays it at once. Logo and accent colors, a canvas of our own (no library),
-  nothing with "reduce motion".
+  nothing with "reduce motion" (system or the settings switch).
 - **Finished?**: Core marks a game as finished by itself when the ending achievement is unlocked and the status was
  never set by hand. Otherwise the game page asks: "You unlocked the ending, finished?" or "You played longer than
  most players need, finished?", with "Mark as finished" and "Not yet".
@@ -85,7 +87,7 @@ To Be Played is split into three repositories:
  The owner arranges it with the same edit mode on the profile page itself (the tiles, incl. the stat groups of
  "Your stats"), and sets its look in the settings: accent, corners, banner and background from own game art
  ("Profile art" on a game's page). Visitors see the owner's look on that page only; light or dark mode stays theirs.
- **Appearance**: accent color, corner style, wide layout, page background and banner from your own game art.
+- **Appearance**: accent color, corner style, wide layout, reduce animations, page background and banner from your own game art.
  Saved in Auth, so it follows you to every device.
 - **Language**: kept in the browser and saved in Auth; after the login Auth's language wins when one is saved. Dark
  mode stays per device. The registration sends the browser language (`de` for a German browser, else `en`): Auth
@@ -107,6 +109,9 @@ To Be Played is split into three repositories:
 - **What's new**: a dialog on the dashboard shows the news entries the user has not seen yet, newest first. "Got it"
  marks them seen in Auth; closing the dialog any other way shows them again on the next dashboard visit. `/whats-new`
  (menu) lists all entries and marks them seen. Admins publish, preview, edit and delete entries on `/admin/news`.
 - **Broadcast mail**: admins write a mail in both languages on `/admin/broadcasts`, send it to all active users or to
  picked ones, send a test to themselves, confirm with the real recipient count, and see the history with the counts.
  Users turn platform mails off in the settings; account mails always come.
 - **Welcome page**: `/welcome` opens once after the first login (Auth `settings.welcomeSeenAt` is null; only the
  dashboard redirects, deep links stay). Feature cards with links, two next steps (Steam, import) with checks from
  `/me` and the library summary. "Let's go" and "Skip" stamp it in Auth and open the dashboard. The settings page
@@ -89,6 +89,8 @@
    },
    "WIDE_LAYOUT": "Breites Layout",
    "WIDE_LAYOUT_HINT": "Nutzt mehr Platz auf breiten Bildschirmen.",
    "REDUCE_MOTION": "Animationen reduzieren",
    "REDUCE_MOTION_HINT": "Shop-Effekte und Konfetti stehen still, auch auf fremden Profilen.",
    "BACKGROUND": "Hintergrund",
    "BACKGROUND_HINT": "Öffne ein Spiel in deiner Bibliothek und wähle „Als Hintergrund“.",
    "BACKGROUND_REMOVE": "Hintergrund entfernen",
@@ -130,7 +132,9 @@
    "PROFILE_TILES_HINT": "Wähle, was dein Profil zeigt und wo: öffne dein Profil und klicke auf \"Anpassen\".",
    "FAVORITE_PLATFORM": "Lieblingsplattform",
    "FAVORITE_PLATFORM_HINT": "Wird zuerst gewählt, wenn du ein Spiel für mehrere Plattformen hinzufügst.",
-    "FAVORITE_PLATFORM_NONE": "Keine"
+    "FAVORITE_PLATFORM_NONE": "Keine",
    "PLATFORM_MAILS": "Mails von der Plattform",
    "PLATFORM_MAILS_HINT": "Neuigkeiten und Ankündigungen per Mail. Mails zu deinem Konto kommen immer."
  },
  "VALIDATION": {
    "EMAIL_REQUIRED": "Email ist erforderlich.",
@@ -304,6 +308,7 @@
    "ADMIN_HINTS": "Hinweise",
    "WHATS_NEW": "Neuigkeiten",
    "ADMIN_NEWS": "Neuigkeiten verwalten",
    "ADMIN_BROADCASTS": "Rundmail",
    "PENDING_REQUESTS_one": "{{count}} Registrierung wartet",
    "PENDING_REQUESTS_other": "{{count}} Registrierungen warten"
  },
@@ -691,6 +696,35 @@
    "LOAD_ERROR": "Die Einträge konnten nicht geladen werden.",
    "NO_ACCESS": "Nur Admins können diese Seite öffnen."
  },
  "ADMIN_BROADCAST": {
    "NEW": "Neue Rundmail",
    "SUBJECT_EN": "Betreff (Englisch)",
    "SUBJECT_DE": "Betreff (Deutsch)",
    "BODY_EN": "Text (Englisch)",
    "BODY_DE": "Text (Deutsch)",
    "TEXT_HELP": "Nur Text, in beiden Sprachen. Betreff höchstens 150, Text höchstens 5000 Zeichen. Eine Fußzeile mit dem Link zum Abschalten wird angehängt.",
    "RECIPIENTS": "Empfänger",
    "ALL": "Alle aktiven Nutzer",
    "PICKED": "Ausgewählte Nutzer",
    "SEARCH": "E-Mail oder Name suchen",
    "PICKED_COUNT": "{{count}} ausgewählt",
    "REMOVE": "Entfernen",
    "TEST": "Test an mich senden",
    "TEST_SENT": "Testmail für dich eingereiht.",
    "SEND": "Senden...",
    "CONFIRM_TITLE": "Diese Mail senden?",
    "CONFIRM_TEXT": "An {{count}} Nutzer senden? Das kann nicht rückgängig gemacht werden.",
    "CONFIRM": "Senden",
    "CANCEL": "Abbrechen",
    "NO_RECIPIENTS": "Kein Empfänger: niemand ist aktiv und hat Mails an.",
    "SENT": "Mail für {{count}} Nutzer eingereiht.",
    "ERROR": "Die Aktion ist fehlgeschlagen.",
    "LIST": "Gesendete Mails",
    "COUNTS": "{{recipients}} Empfänger, {{sent}} gesendet, {{failed}} fehlgeschlagen",
    "EMPTY": "Noch keine Mails gesendet.",
    "LOAD_ERROR": "Die Mails konnten nicht geladen werden.",
    "NO_ACCESS": "Nur Admins können diese Seite öffnen."
  },
  "TILES": {
    "CUSTOMIZE": "Anpassen",
    "EDIT_HINT": "Verschiebe, vergrößere oder verstecke die Kacheln. Gespeichert wird erst mit \"Fertig\".",
@@ -826,7 +860,10 @@
      "AVATAR_BORDER": "Avatarrahmen",
      "BADGE": "Abzeichen",
      "ACCENT": "Akzent",
-      "BANNER_FRAME": "Bannerrahmen"
+      "BANNER_FRAME": "Bannerrahmen",
      "COMPLETED_EFFECT": "Effekt für 100 %",
      "PAGE_BACKGROUND": "Seitenhintergrund",
      "BANNER_BACKGROUND": "Bannerhintergrund"
    },
    "ITEMS": {
      "BORDER_GOLD": "Goldener Avatarrahmen",
@@ -836,7 +873,27 @@
      "ACCENT_GOLD": "Akzent Gold",
      "ACCENT_TEAL": "Akzent Türkis",
      "FRAME_GOLD": "Goldener Bannerrahmen",
-      "FRAME_NEON": "Neon-Bannerrahmen"
+      "FRAME_NEON": "Neon-Bannerrahmen",
      "FX_GOLD_SHINE": "Goldglanz",
      "FX_NEON_PULSE": "Neon-Puls",
      "FX_HOLO": "Holo-Folie",
      "FX_EMBER": "Glut",
      "BG_TRIANGLES": "Animierter Hintergrund: Dreiecke",
      "BN_TRIANGLES": "Animiertes Banner: Dreiecke",
      "BG_STARFIELD": "Animierter Hintergrund: Sternenhimmel",
      "BN_STARFIELD": "Animiertes Banner: Sternenhimmel",
      "BG_PIXELS": "Animierter Hintergrund: Pixel",
      "BN_PIXELS": "Animiertes Banner: Pixel",
      "BG_AURORA": "Animierter Hintergrund: Polarlicht",
      "BN_AURORA": "Animiertes Banner: Polarlicht",
      "BG_MESH": "Animierter Hintergrund: Farbverlauf",
      "BN_MESH": "Animiertes Banner: Farbverlauf",
      "BG_GRID": "Animierter Hintergrund: Synthwave-Gitter",
      "BN_GRID": "Animiertes Banner: Synthwave-Gitter",
      "BG_WAVES": "Animierter Hintergrund: Wellen",
      "BN_WAVES": "Animiertes Banner: Wellen",
      "BG_BOKEH": "Animierter Hintergrund: Bokeh-Lichter",
      "BN_BOKEH": "Animiertes Banner: Bokeh-Lichter"
    },
    "KINDS": {
      "STARTED": "Gestartet",
@@ -89,6 +89,8 @@
    },
    "WIDE_LAYOUT": "Wide layout",
    "WIDE_LAYOUT_HINT": "Uses more of a wide screen.",
    "REDUCE_MOTION": "Reduce animations",
    "REDUCE_MOTION_HINT": "Shop effects and confetti stand still, also on other profiles.",
    "BACKGROUND": "Background",
    "BACKGROUND_HINT": "Open a game in your library and choose \"Use as background\".",
    "BACKGROUND_REMOVE": "Remove background",
@@ -130,7 +132,9 @@
    "PROFILE_TILES_HINT": "Choose what your profile shows, and where: open your profile and click \"Customize\".",
    "FAVORITE_PLATFORM": "Favorite platform",
    "FAVORITE_PLATFORM_HINT": "Selected first when you add a game on more than one platform.",
-    "FAVORITE_PLATFORM_NONE": "None"
+    "FAVORITE_PLATFORM_NONE": "None",
    "PLATFORM_MAILS": "Mails from the platform",
    "PLATFORM_MAILS_HINT": "News and announcements by mail. Mails about your account always come."
  },
  "VALIDATION": {
    "EMAIL_REQUIRED": "Email is required.",
@@ -304,6 +308,7 @@
    "ADMIN_HINTS": "Hints",
    "WHATS_NEW": "What's new",
    "ADMIN_NEWS": "News",
    "ADMIN_BROADCASTS": "Mail",
    "PENDING_REQUESTS_one": "{{count}} registration waits",
    "PENDING_REQUESTS_other": "{{count}} registrations wait"
  },
@@ -691,6 +696,35 @@
    "LOAD_ERROR": "The entries could not be loaded.",
    "NO_ACCESS": "Only admins can open this page."
  },
  "ADMIN_BROADCAST": {
    "NEW": "New mail",
    "SUBJECT_EN": "Subject (English)",
    "SUBJECT_DE": "Subject (German)",
    "BODY_EN": "Text (English)",
    "BODY_DE": "Text (German)",
    "TEXT_HELP": "Plain text, both languages. Subject max 150, text max 5000 characters. A footer with the opt-out link is added.",
    "RECIPIENTS": "Recipients",
    "ALL": "All active users",
    "PICKED": "Picked users",
    "SEARCH": "Search email or name",
    "PICKED_COUNT": "{{count}} picked",
    "REMOVE": "Remove",
    "TEST": "Send test to me",
    "TEST_SENT": "Test mail queued for you.",
    "SEND": "Send...",
    "CONFIRM_TITLE": "Send this mail?",
    "CONFIRM_TEXT": "Send to {{count}} users? This cannot be undone.",
    "CONFIRM": "Send",
    "CANCEL": "Cancel",
    "NO_RECIPIENTS": "No recipient: nobody active with mails on.",
    "SENT": "Mail queued for {{count}} users.",
    "ERROR": "The action failed.",
    "LIST": "Sent mails",
    "COUNTS": "{{recipients}} recipients, {{sent}} sent, {{failed}} failed",
    "EMPTY": "No mails sent yet.",
    "LOAD_ERROR": "The mails could not be loaded.",
    "NO_ACCESS": "Only admins can open this page."
  },
  "TILES": {
    "CUSTOMIZE": "Customize",
    "EDIT_HINT": "Move, resize or hide the tiles. Nothing is saved before \"Done\".",
@@ -826,7 +860,10 @@
      "AVATAR_BORDER": "Avatar border",
      "BADGE": "Badge",
      "ACCENT": "Accent",
-      "BANNER_FRAME": "Banner frame"
+      "BANNER_FRAME": "Banner frame",
      "COMPLETED_EFFECT": "Completed effect",
      "PAGE_BACKGROUND": "Page background",
      "BANNER_BACKGROUND": "Banner background"
    },
    "ITEMS": {
      "BORDER_GOLD": "Golden avatar border",
@@ -836,7 +873,27 @@
      "ACCENT_GOLD": "Gold accent",
      "ACCENT_TEAL": "Teal accent",
      "FRAME_GOLD": "Golden banner frame",
-      "FRAME_NEON": "Neon banner frame"
+      "FRAME_NEON": "Neon banner frame",
      "FX_GOLD_SHINE": "Gold shine",
      "FX_NEON_PULSE": "Neon pulse",
      "FX_HOLO": "Holographic foil",
      "FX_EMBER": "Embers",
      "BG_TRIANGLES": "Animated background: triangles",
      "BN_TRIANGLES": "Animated banner: triangles",
      "BG_STARFIELD": "Animated background: starfield",
      "BN_STARFIELD": "Animated banner: starfield",
      "BG_PIXELS": "Animated background: pixels",
      "BN_PIXELS": "Animated banner: pixels",
      "BG_AURORA": "Animated background: aurora",
      "BN_AURORA": "Animated banner: aurora",
      "BG_MESH": "Animated background: mesh gradient",
      "BN_MESH": "Animated banner: mesh gradient",
      "BG_GRID": "Animated background: synthwave grid",
      "BN_GRID": "Animated banner: synthwave grid",
      "BG_WAVES": "Animated background: waves",
      "BN_WAVES": "Animated banner: waves",
      "BG_BOKEH": "Animated background: bokeh",
      "BN_BOKEH": "Animated banner: bokeh"
    },
    "KINDS": {
      "STARTED": "Started",
@@ -9,6 +9,7 @@ import Dashboard from "./pages/Dashboard.jsx";
 import RegistrationPage from './pages/RegistrationPage.jsx';
 import SettingsPage from './pages/SettingsPage.jsx';
 import AdminHintsPage from './pages/AdminHintsPage.jsx';
 import AdminBroadcastPage from './pages/AdminBroadcastPage.jsx';
 import AdminNewsPage from './pages/AdminNewsPage.jsx';
 import WhatsNewPage from './pages/WhatsNewPage.jsx';
 import WelcomePage from './pages/WelcomePage.jsx';
@@ -28,6 +29,7 @@ import {Toaster} from '@/components/ui/sonner';
 import {TooltipProvider} from '@/components/ui/tooltip';
 import PageBackground from './components/PageBackground.jsx';
 import {usePreferences} from './context/PreferencesContext.jsx';
 import {backgroundEffect} from './utils/rewards.js';
 import {clearSession} from './utils/auth.js';
 import useSession from './hooks/useSession.js';
 import {UnsavedChangesGuard} from './hooks/useUnsavedChanges.js';
@@ -36,7 +38,7 @@ import {logout} from './utils/api.js';
 function App() {
    const {t} = useTranslation();
    const {active: isAuthenticated} = useSession();
-    const {appearance, syncPreferences} = usePreferences();
+    const {appearance, equipped, syncPreferences} = usePreferences();
    // Hooks for routing
    const navigate = useNavigate();
@@ -59,7 +61,9 @@ function App() {
            {/* isolate: the background layer sits behind the content but in front of this div's own background. */}
            <div className="isolate min-h-screen flex flex-col bg-background text-foreground font-sans">
                {/* A public profile shows the owner's background instead. */}
-                {isAuthenticated && !location.pathname.startsWith('/u/') && <PageBackground appid={appearance.backgroundAppid}/>}
+                {isAuthenticated && !location.pathname.startsWith('/u/') && (
                    <PageBackground appid={appearance.backgroundAppid} effect={backgroundEffect(equipped)}/>
                )}
                <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
                <main className="grow flex flex-col">
@@ -82,6 +86,7 @@ function App() {
                            <Route path="/admin/users" element={<AdminUsersPage/>}/>
                            <Route path="/admin/hints" element={<AdminHintsPage/>}/>
                            <Route path="/admin/news" element={<AdminNewsPage/>}/>
                            <Route path="/admin/broadcasts" element={<AdminBroadcastPage/>}/>
                        </Route>
                        <Route path="/u/:name" element={<PublicProfilePage/>}/>
                        <Route path="/impressum" element={<ImprintPage/>}/>
@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import {Link, NavLink, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ChartColumn, Coins, Dices, Eye, Languages, LayoutDashboard, Library, LogOut, Megaphone, Moon, Newspaper, Settings, Shield, Sun} from 'lucide-react';
+import {ChartColumn, Coins, Dices, Eye, Languages, LayoutDashboard, Library, LogOut, Mail, Megaphone, Moon, Newspaper, Settings, Shield, Sun} from 'lucide-react';
 import {toast} from 'sonner';
 import {Badge} from '@/components/ui/badge';
@@ -169,6 +169,9 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                                        <DropdownMenuItem asChild>
                                            <Link to="/admin/news"><Newspaper/>{t('NAV.ADMIN_NEWS')}</Link>
                                        </DropdownMenuItem>
                                        <DropdownMenuItem asChild>
                                            <Link to="/admin/broadcasts"><Mail/>{t('NAV.ADMIN_BROADCASTS')}</Link>
                                        </DropdownMenuItem>
                                    </>
                                )}
                                {isAdmin && (
@@ -55,6 +55,7 @@ describe('AppHeader', () => {
        expect(await screen.findByText('NAV.ADMIN')).toBeTruthy();
        expect(screen.getByText('NAV.ADMIN_NEWS')).toBeTruthy();
        expect(screen.getByText('NAV.ADMIN_BROADCASTS')).toBeTruthy();
        expect(screen.getByText('NAV.VIEW_AS.MENU')).toBeTruthy();
        expect(screen.queryByText('NAV.VIEW_AS.BADGE')).toBeNull();
        expect(screen.queryByLabelText('NAV.PENDING_REQUESTS:0')).toBeNull();
@@ -84,6 +85,7 @@ describe('AppHeader', () => {
        openMenu();
        expect(await screen.findByText('NAV.VIEW_AS.MENU')).toBeTruthy();
        expect(screen.queryByText('NAV.ADMIN')).toBeNull();
        expect(screen.queryByText('NAV.ADMIN_BROADCASTS')).toBeNull();
    });
    it('offers nothing of that to a user', async () => {
@@ -96,6 +98,7 @@ describe('AppHeader', () => {
        expect(screen.getByText('NAV.WHATS_NEW')).toBeTruthy();
        expect(screen.queryByText('NAV.ADMIN')).toBeNull();
        expect(screen.queryByText('NAV.ADMIN_NEWS')).toBeNull();
        expect(screen.queryByText('NAV.ADMIN_BROADCASTS')).toBeNull();
        expect(screen.queryByText('NAV.VIEW_AS.MENU')).toBeNull();
    });
 });
@@ -31,6 +31,14 @@ export default function AppearanceCard() {
                    <Switch id="wideLayout" checked={appearance.wideLayout}
                            onCheckedChange={(wideLayout) => saveAppearance({wideLayout})}/>
                </div>
                <div className="flex items-center justify-between gap-4">
                    <div className="space-y-1">
                        <Label htmlFor="reduceMotion">{t('SETTINGS.REDUCE_MOTION')}</Label>
                        <p className="text-xs text-muted-foreground">{t('SETTINGS.REDUCE_MOTION_HINT')}</p>
                    </div>
                    <Switch id="reduceMotion" checked={appearance.reduceMotion}
                            onCheckedChange={(reduceMotion) => saveAppearance({reduceMotion})}/>
                </div>
                <div className="flex items-center justify-between gap-4">
                    <div className="space-y-1">
                        <Label id="background-label">{t('SETTINGS.BACKGROUND')}</Label>
@@ -1,6 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 import {LOGO_COLORS} from './Logo.jsx';
 import {reduceMotion} from '../utils/appearance.js';
 const DURATION_MS = 2800;
 const PIECES = {small: 70, big: 240};
@@ -8,8 +9,6 @@ const GRAVITY = 0.12;
 // The speeds are per frame at 60 Hz; a faster screen moves the same distance in the same time.
 const FRAME_MS = 1000 / 60;
 const reducedMotion = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
 // The logo colors of the chosen accent and the accent itself.
 function colors() {
    const style = getComputedStyle(document.documentElement);
@@ -48,7 +47,7 @@ function pieces(size, width, height) {
 */
 export default function Confetti({size, onDone}) {
    const canvasRef = useRef(null);
-    const [reduce] = useState(reducedMotion);
+    const [reduce] = useState(reduceMotion);
    // In a ref: a new function from a re-render must not restart the animation, and the latest one runs at the end.
    const onDoneRef = useRef(onDone);
    onDoneRef.current = onDone;
@@ -34,4 +34,13 @@ describe('Confetti', () => {
        expect(container.querySelector('canvas')).toBeNull();
    });
    it('draws nothing when the reduce animations setting is on', () => {
        reducedMotion(false);
        document.documentElement.setAttribute('data-reduce-motion', '');
        const {container} = render(<Confetti size="small"/>);
        document.documentElement.removeAttribute('data-reduce-motion');
        expect(container.querySelector('canvas')).toBeNull();
    });
 });
@@ -11,7 +11,7 @@ import PointsBadge from './PointsBadge.jsx';
 import SteamAvatar from './SteamAvatar.jsx';
 import SyncStatusBadge from './SyncStatusBadge.jsx';
 import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
-import {lookClass} from '../utils/rewards.js';
+import {bannerEffect, lookClass} from '../utils/rewards.js';
 export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forceSync, editing, onCustomize, equipped}) {
    const {t} = useTranslation();
@@ -23,7 +23,7 @@ export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forc
        <Card className={cn('relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6',
            lookClass(equipped, 'BANNER_FRAME'))}>
            {/* A picked game, else the game played most in the last two weeks. */}
-            <HeroBanner appid={bannerAppid}/>
+            <HeroBanner appid={bannerAppid} effect={bannerEffect(equipped)}/>
            <div className="relative flex min-w-0 items-center gap-4">
                {/* The slot is there before the avatar loads, so the title does not jump. */}
                {hasSteamId && (
@@ -12,10 +12,10 @@ afterEach(() => {
    localStorage.clear();
 });
-const renderCard = async (equipped) => {
+const renderCard = async (equipped, bannerAppid) => {
    localStorage.setItem('tbp_session', '1');
    fetchRoutes({'GET /api/users/me': json(200, {displayName: 'Lobo', steamId: '1'}), 'GET /api/library/hero-art': json(200, {})});
-    renderWithProviders(<DashboardWelcomeCard sync={{}} forceSync={{}} equipped={equipped}/>);
+    renderWithProviders(<DashboardWelcomeCard bannerAppid={bannerAppid} sync={{}} forceSync={{}} equipped={equipped}/>);
    await screen.findByText(/Lobo/);
 };
@@ -29,6 +29,22 @@ describe('DashboardWelcomeCard looks', () => {
        expect(screen.getByText('POINTS.ITEMS.BADGE_COMPLETIONIST')).toBeTruthy();
    });
    it('shows a worn banner background instead of the game art', async () => {
        await renderCard({BANNER_BACKGROUND: 'BN_GRID'}, 620);
        const card = screen.getByText(/Lobo/).closest('[data-slot="card"]');
        expect(card.querySelector('[data-effect="grid"]')).not.toBeNull();
        expect(card.querySelector('img[src*="library_hero"]')).toBeNull();
    });
    it('shows the game art without a worn banner background', async () => {
        await renderCard({}, 620);
        const card = screen.getByText(/Lobo/).closest('[data-slot="card"]');
        expect(card.querySelector('[data-effect]')).toBeNull();
        expect(card.querySelector('img[src*="library_hero"]')).not.toBeNull();
    });
    it('keeps the default avatar ring without a worn border', async () => {
        await renderCard({});
@@ -0,0 +1,84 @@
 import {cn} from '@/lib/utils';
 export const EFFECTS = ['triangles', 'starfield', 'pixels', 'aurora', 'mesh', 'grid', 'waves', 'bokeh'];
 const range = (count) => Array.from({length: count}, (_, i) => i);
 // Three groups of eight triangles on a 1600x900 canvas; a fixed pattern, so the picture is the same on every visit.
 const TRIANGLES = range(3).map((group) => range(8).map((i) => {
    const x = (i * 211 + group * 97) % 1600;
    const y = (i * 137 + group * 263) % 900;
    const size = 80 + ((i * 53 + group * 29) % 90);
    return {
        points: `${x},${y - size} ${x - size * 0.87},${y + size / 2} ${x + size * 0.87},${y + size / 2}`,
        rotate: `rotate(${i * 40} ${x} ${y})`,
        opacity: 0.06 + ((i + group) % 4) * 0.04,
    };
 }));
 // One period is 1600 units; two periods make the band 2 widths wide, so a move of one width loops without a jump.
 const WAVE = 'M0 100 C200 30 600 30 800 100 C1000 170 1400 170 1600 100 C1800 30 2200 30 2400 100 '
    + 'C2600 170 3000 170 3200 100 L3200 200 L0 200 Z';
 /**
 * The markup of an animated page or banner background (CSS in effects.css). Fills its parent: pass `absolute inset-0`
 * or `fixed inset-0`. Nothing here is read by a screen reader.
 *
 * @param effect one of EFFECTS; anything else renders nothing
 */
 export default function EffectBackground({effect, className}) {
    if (!EFFECTS.includes(effect)) return null;
    return (
        <div aria-hidden="true" data-effect={effect}
             className={cn('fx fx-bg pointer-events-none overflow-hidden', `fx-bg-${effect}`, className)}>
            {shapes(effect)}
        </div>
    );
 }
 function shapes(effect) {
    switch (effect) {
        case 'triangles':
            return (
                <svg className="size-full" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
                    {TRIANGLES.map((triangles, group) => (
                        <g key={group} fill="currentColor" className={group === 1 ? 'text-foreground' : undefined}>
                            {triangles.map((triangle) => (
                                <polygon key={triangle.points} points={triangle.points} transform={triangle.rotate}
                                         opacity={triangle.opacity}/>
                            ))}
                        </g>
                    ))}
                </svg>
            );
        case 'starfield':
            return range(9).map((i) => <span key={i}/>);
        case 'pixels':
            return range(12).map((i) => (
                <span key={i} style={{
                    '--x': (i * 37) % 100, '--y': (i * 53 + 11) % 90,
                    '--dur': `${25 + ((i * 7) % 16)}s`, '--delay': `${-i * 3.1}s`,
                }}/>
            ));
        case 'aurora':
            return range(2).map((i) => <div key={i}/>);
        case 'mesh':
            return range(4).map((i) => <div key={i}/>);
        case 'grid':
            return range(2).map((i) => <div key={i}/>);
        case 'waves':
            return range(3).map((i) => (
                <svg key={i} viewBox="0 0 3200 200" preserveAspectRatio="none">
                    <path d={WAVE} fill="currentColor"/>
                </svg>
            ));
        case 'bokeh':
            return range(10).map((i) => (
                <span key={i} style={{
                    '--x': (i * 29 + 7) % 90, '--y': (i * 47 + 10) % 90, '--s': 8 + ((i * 13) % 33),
                    '--dur': `${30 + ((i * 5) % 21)}s`, '--delay': `${-i * 4.3}s`,
                }}/>
            ));
    }
 }
@@ -0,0 +1,26 @@
 // @vitest-environment jsdom
 import {afterEach, describe, expect, it} from 'vitest';
 import {cleanup, render} from '@testing-library/react';
 import EffectBackground, {EFFECTS} from './EffectBackground.jsx';
 afterEach(cleanup);
 describe('EffectBackground', () => {
    it.each(EFFECTS)('renders %s hidden from screen readers with its engine class and shapes', (effect) => {
        const {container} = render(<EffectBackground effect={effect} className="absolute inset-0"/>);
        const root = container.querySelector('[data-effect]');
        expect(root.dataset.effect).toBe(effect);
        expect(root.getAttribute('aria-hidden')).toBe('true');
        expect(root.classList.contains(`fx-bg-${effect}`)).toBe(true);
        expect(root.classList.contains('fx')).toBe(true);
        expect(root.classList.contains('absolute')).toBe(true);
        expect(root.children.length).toBeGreaterThan(0);
    });
    it('renders nothing for an unknown effect', () => {
        const {container} = render(<EffectBackground effect="matrix"/>);
        expect(container.firstChild).toBeNull();
    });
 });
@@ -1,23 +1,28 @@
-import {useState} from 'react';
+import {useRef, useState} from 'react';
 import {Gamepad2} from 'lucide-react';
 import {cn} from '@/lib/utils';
 import {coverUrl} from '@/utils/games.js';
 import {COVER, reportBrokenImage} from '@/utils/brokenImages.js';
 import useInView from '../hooks/useInView.js';
 /**
 * Steam store header (460x215). Falls back to a neutral tile when the app has no header image.
 *
 * @param imageUrl a game added by hand from IGDB, or a Steam header Core repaired; wins over the fixed Steam header
 * @param fx the classes of a completed effect (utils/rewards.js coverEffect); it holds still while the cover is off screen
 */
-export default function GameCover({appid, imageUrl, className}) {
+export default function GameCover({appid, imageUrl, fx, className}) {
    const src = imageUrl ?? coverUrl(appid);
    // Per URL: a reused cover (e.g. the next suggestion) loads and reports its own picture.
    const [failedSrc, setFailedSrc] = useState(null);
    const failed = failedSrc === src;
    const ref = useRef(null);
    const inView = useInView(ref, !!fx);
    return (
-        <div className={cn('aspect-[460/215] overflow-hidden rounded-md bg-muted', className)}>
+        <div ref={ref}
             className={cn('relative aspect-[460/215] overflow-hidden rounded-md bg-muted', fx, fx && !inView && 'fx-paused', className)}>
            {failed ? (
                <div className="flex size-full items-center justify-center text-muted-foreground">
                    <Gamepad2 className="size-1/3 max-h-8"/>
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import {afterEach, describe, expect, it, vi} from 'vitest';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render} from '@testing-library/react';
+import {act, cleanup, fireEvent, render} from '@testing-library/react';
 import GameCover from './GameCover.jsx';
 import {reportBrokenImage} from '../utils/brokenImages.js';
@@ -8,6 +8,7 @@ vi.mock('../utils/brokenImages.js', () => ({COVER: 'COVER', reportBrokenImage: v
 afterEach(() => {
    cleanup();
    vi.unstubAllGlobals();
    vi.clearAllMocks();
 });
@@ -38,4 +39,69 @@ describe('GameCover', () => {
        fireEvent.error(container.querySelector('img'));
        expect(reportBrokenImage).toHaveBeenCalledWith(220, 'COVER');
    });
    describe('completed effect', () => {
        const FX = 'fx fx-cover-gold-shine';
        let callbacks;
        let observers;
        beforeEach(() => {
            callbacks = [];
            observers = [];
            vi.stubGlobal('IntersectionObserver', class {
                constructor(callback) {
                    callbacks.push(callback);
                    observers.push(this);
                }
                observe = vi.fn();
                unobserve = vi.fn();
                disconnect = vi.fn();
            });
        });
        const tell = (target, isIntersecting) => act(() => callbacks[0]([{target, isIntersecting}]));
        it('animates on screen, holds its frame off screen and goes on when it comes back', () => {
            const {container} = render(<GameCover appid={620} fx={FX}/>);
            const root = container.firstChild;
            expect(root.classList.contains('fx-cover-gold-shine')).toBe(true);
            expect(root.classList.contains('fx-paused')).toBe(false);
            tell(root, false);
            expect(root.classList.contains('fx-paused')).toBe(true);
            tell(root, true);
            expect(root.classList.contains('fx-paused')).toBe(false);
        });
        it('watches every cover with one shared observer', () => {
            const {container} = render(<><GameCover appid={620} fx={FX}/><GameCover appid={220} fx={FX}/></>);
            expect(observers).toHaveLength(1);
            expect(observers[0].observe).toHaveBeenCalledTimes(2);
            expect(observers[0].observe).toHaveBeenCalledWith(container.children[0]);
        });
        it('stops watching when the cover goes', () => {
            const {unmount} = render(<GameCover appid={620} fx={FX}/>);
            unmount();
            expect(observers[0].unobserve).toHaveBeenCalledTimes(1);
            expect(observers[0].disconnect).toHaveBeenCalledTimes(1);
        });
        it('does not watch a cover without an effect', () => {
            render(<GameCover appid={620}/>);
            expect(observers).toHaveLength(0);
        });
        it('animates where the browser has no IntersectionObserver', () => {
            vi.stubGlobal('IntersectionObserver', undefined);
            const {container} = render(<GameCover appid={620} fx={FX}/>);
            expect(container.firstChild.classList.contains('fx-paused')).toBe(false);
        });
    });
 });
@@ -6,6 +6,7 @@ import {toast} from 'sonner';
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {cn} from '@/lib/utils';
 import GameCover from './GameCover.jsx';
 import GameStatusBadge from './GameStatusBadge.jsx';
 import ProfileArtMenu from './ProfileArtMenu.jsx';
@@ -16,12 +17,15 @@ import {formatPlaytime} from '../utils/games.js';
 import {setGameHidden} from '../utils/hiddenGames.js';
 import {isSteamKey} from '../utils/manualGames.js';
 import {platformLabel} from '../utils/platforms.js';
 import {coverEffect, detailEffect} from '../utils/rewards.js';
 const SPEEDRUN_PREFIX = 'https://www.speedrun.com/';
 // The spans of each completed effect decoration; effects.css places them.
 const DETAIL_ELEMENTS = {'fx-detail-gold-shine': 8, 'fx-detail-neon-pulse': 1, 'fx-detail-holo': 1, 'fx-detail-ember': 6};
 export default function GameHeroCard({game, manual, auditor, profileStyle, onCorrect, onMerge, onHiddenChanged, onProfileStyleSaved}) {
    const {t} = useTranslation();
-    const {appearance} = usePreferences();
+    const {appearance, equipped} = usePreferences();
    const saveAppearance = useSaveAppearance();
    const [hiding, setHiding] = useState(false);
@@ -31,6 +35,7 @@ export default function GameHeroCard({game, manual, auditor, profileStyle, onCor
        ? game.speedrunUrl : null;
    const isBackground = appearance.backgroundAppid === game.appid;
    const isBanner = appearance.showBanner && appearance.bannerAppid === game.appid;
    const detailFx = detailEffect(equipped, game.status);
    const toggleHidden = async () => {
        const hidden = !game.hidden;
@@ -54,8 +59,14 @@ export default function GameHeroCard({game, manual, auditor, profileStyle, onCor
    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"/>
+            {detailFx && (
-            <div className="flex flex-1 flex-col justify-between gap-4 p-6">
+                <div aria-hidden="true" className={cn('fx pointer-events-none absolute inset-0', detailFx)}>
                    {Array.from({length: DETAIL_ELEMENTS[detailFx]}, (_, i) => <span key={i}/>)}
                </div>
            )}
            <GameCover appid={game.appid} imageUrl={game.imageUrl} fx={coverEffect(equipped, game.status)}
                       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}`}
@@ -27,6 +27,13 @@ describe('PageBackground', () => {
        expect(container.innerHTML).toBe('');
    });
    it('shows a worn animated background instead of the art', () => {
        const {container} = render(<PageBackground appid={620} effect="aurora"/>);
        expect(container.querySelector('[data-effect="aurora"]')).not.toBeNull();
        expect(container.querySelector('img')).toBeNull();
    });
    it('starts with the library art again for another game', () => {
        const {container, rerender} = render(<PageBackground appid={620}/>);
        fireEvent.error(container.querySelector('img'));
@@ -1,15 +1,20 @@
 import {cn} from '@/lib/utils';
 import EffectBackground from './EffectBackground.jsx';
 import HeroArt from './HeroArt.jsx';
 /**
 * The art of a game behind a card's content, or the accent gradient without one. Put it first in a card with
 * `relative overflow-hidden`; the gradient keeps the text readable.
 *
 * @param effect a worn banner background (utils/rewards.js bannerEffect); it replaces the art
 */
-export default function HeroBanner({appid}) {
+export default function HeroBanner({appid, effect}) {
    return (
        <>
-            <HeroArt key={appid} appid={appid} className="pointer-events-none absolute inset-0 size-full object-cover opacity-60"/>
+            {effect
-            <div className={cn('pointer-events-none absolute inset-0', appid
+                ? <EffectBackground effect={effect} className="absolute inset-0"/>
                : <HeroArt key={appid} appid={appid} className="pointer-events-none absolute inset-0 size-full object-cover opacity-60"/>}
            <div className={cn('pointer-events-none absolute inset-0', effect || appid
                ? 'bg-gradient-to-r from-card via-card/85 to-card/60'
                : 'bg-gradient-to-br from-primary/15 via-transparent to-transparent')}/>
        </>
@@ -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}`}
@@ -1,9 +1,19 @@
 import EffectBackground from './EffectBackground.jsx';
 import HeroArt from './HeroArt.jsx';
 /**
- * Game art behind the whole page, blurred and dimmed so text on it stays readable.
+ * A worn animated background (utils/rewards.js backgroundEffect) or the game art behind the whole page, dimmed
 * (and the art blurred) so text on it stays readable. The effect wins over the art.
 */
-export default function PageBackground({appid}) {
+export default function PageBackground({appid, effect}) {
    if (effect) {
        return (
            <>
                <EffectBackground effect={effect} className="fixed inset-0 -z-10"/>
                <div aria-hidden="true" className="pointer-events-none fixed inset-0 -z-10 bg-background/40"/>
            </>
        );
    }
    if (!appid) return null;
    return (
@@ -11,7 +11,7 @@ import {usePreferences} from '../context/PreferencesContext.jsx';
 import usePersistSettings from '../hooks/usePersistSettings.js';
 import useSaveResponse from '../hooks/useSaveResponse.js';
 import {FAVORITE_PLATFORMS, saveFavoritePlatform} from '../utils/platforms.js';
-import {LANGUAGES, saveSettings} from '../utils/settings.js';
+import {LANGUAGES, savePlatformMails, saveSettings} from '../utils/settings.js';
 // Radix Select has no empty value.
 const NO_FAVORITE = 'NONE';
@@ -41,6 +41,13 @@ export default function PreferencesCard() {
        }
    };
    const handlePlatformMailsChange = async (next) => {
        if (await runSave(() => savePlatformMails(next))) {
            updateProfile((p) => ({...p, settings: {...p.settings, platformMails: next}}));
            toast.success(t('SETTINGS.SAVED'));
        }
    };
    return (
        <Card>
            <CardHeader>
@@ -83,6 +90,14 @@ export default function PreferencesCard() {
                        </SelectContent>
                    </Select>
                </div>
                <div className="flex items-center justify-between gap-4">
                    <div className="space-y-1">
                        <Label htmlFor="platformMails">{t('SETTINGS.PLATFORM_MAILS')}</Label>
                        <p className="text-xs text-muted-foreground">{t('SETTINGS.PLATFORM_MAILS_HINT')}</p>
                    </div>
                    <Switch id="platformMails" checked={profile?.settings?.platformMails ?? true}
                            onCheckedChange={handlePlatformMailsChange}/>
                </div>
            </CardContent>
        </Card>
    );
@@ -12,7 +12,7 @@ import {
 import {hasSession} from '../utils/auth.js';
 import useSession from '../hooks/useSession.js';
 import {LANGUAGES, saveSettings} from '../utils/settings.js';
-import {equippedAccent, loadWallet} from '../utils/rewards.js';
+import {cacheEquipped, equippedAccent, loadWallet, readCachedEquipped} from '../utils/rewards.js';
 import {storage} from '../utils/storage.js';
 const DARK_MODE_STORAGE_KEY = 'tbp_dark_mode';
@@ -52,17 +52,23 @@ export function PreferencesProvider({children}) {
    // Pile Points: balance, shop and worn looks of Core; null until loaded.
    const [wallet, setWallet] = useState(null);
    // The worn looks: the cached ones until the wallet answers.
    const [equipped, setEquipped] = useState(readCachedEquipped);
    // Layout effect: the cached look is set before the first paint.
    useLayoutEffect(() => {
-        applyAppearance(appearance, equippedAccent(wallet?.equipped));
+        applyAppearance(appearance, equippedAccent(equipped));
        cacheAppearance(appearance);
-    }, [appearance, wallet]);
+        cacheEquipped(equipped);
    }, [appearance, equipped]);
    const reloadWallet = useCallback(async () => {
        const started = generation.current;
        const {ok, data} = await loadWallet();
-        if (ok && generation.current === started) setWallet(data);
+        if (ok && generation.current === started) {
            setWallet(data);
            setEquipped(data.equipped ?? {});
        }
    }, []);
    // Grows on every language pick, so a load that started before does not undo it.
@@ -136,6 +142,7 @@ export function PreferencesProvider({children}) {
        savedAppearance.current = DEFAULT_APPEARANCE;
        setAppearanceState(DEFAULT_APPEARANCE);
        setWallet(null);
        setEquipped({});
    }, []);
    // Without a session the next user must not get this look.
@@ -166,6 +173,7 @@ export function PreferencesProvider({children}) {
                appearance,
                changeAppearance,
                wallet,
                equipped,
                reloadWallet,
                syncPreferences,
                resetAppearance,
@@ -109,3 +109,32 @@ describe('PreferencesProvider theme color', () => {
        expect(themeColor()).toBe('#09090b');
    });
 });
 describe('PreferencesProvider worn looks', () => {
    it('has the cached worn looks before the wallet answers and caches the answer', async () => {
        localStorage.setItem('tbp_session', '1');
        localStorage.setItem('tbp_equipped', JSON.stringify({PAGE_BACKGROUND: 'BG_GRID'}));
        fetchRoutes({
            'GET /api/users/me': json(200, {displayName: 'Lobo', settings: {}}),
            'GET /api/rewards/wallet': json(200, {balance: 0, catalog: [], owned: [], equipped: {PAGE_BACKGROUND: 'BG_MESH'}, history: []}),
        });
        render(<PreferencesProvider><Spy/></PreferencesProvider>);
        expect(preferences.wallet).toBeNull();
        expect(preferences.equipped).toEqual({PAGE_BACKGROUND: 'BG_GRID'});
        await act(() => preferences.syncPreferences());
        expect(preferences.equipped).toEqual({PAGE_BACKGROUND: 'BG_MESH'});
        expect(JSON.parse(localStorage.getItem('tbp_equipped'))).toEqual({PAGE_BACKGROUND: 'BG_MESH'});
    });
    it('ignores a damaged cache', () => {
        localStorage.setItem('tbp_session', '1');
        localStorage.setItem('tbp_equipped', '[1]');
        render(<PreferencesProvider><Spy/></PreferencesProvider>);
        expect(preferences.equipped).toEqual({});
    });
 });
@@ -0,0 +1,355 @@
 /*
 * Pile Points effects (utils/rewards.js LOOKS, components/EffectBackground.jsx). Only transform and opacity move.
 * Every effect looks good at frame 0, because that is the static picture: no animation, no motion.
 * Colors come from --primary, --foreground and --logo-*, so an effect follows the accent and works in both modes.
 * Backgrounds are a size container, so cq units size and move the shapes in a page and in a banner alike.
 */
@keyframes fx-sweep { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
@keyframes fx-slide { 0% { transform: translateX(-33.33%); } 60%, 100% { transform: translateX(33.33%); } }
@keyframes fx-breathe { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes fx-glow { from { opacity: 0.5; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }
@keyframes fx-spark-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-45%); opacity: 0; } }
@keyframes fx-ember { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-3rem); opacity: 0; } }
@keyframes fx-twinkle { 0%, 100% { transform: scale(0.2); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
 /* ---- COMPLETED_EFFECT, cover of a tile (GameCover has relative and overflow-hidden) ---- */
 .fx-cover-gold-shine::after,
 .fx-cover-neon-pulse::after,
 .fx-cover-holo::after,
 .fx-cover-ember::before,
 .fx-cover-ember::after {
    content: "";
    position: absolute;
    pointer-events: none;
 }
 /* The golden border is an inside outline in the look (a ring would be clipped by the card around a flush cover). */
 .fx-cover-gold-shine::after {
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.35) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: fx-sweep 4s ease-in-out infinite;
 }
 /* The ring is an inside outline in the look; the glow is inside, because the cover clips outside shadows. */
 .fx-cover-neon-pulse::after {
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 14px 2px var(--primary);
    opacity: 0.7;
    animation: fx-breathe 2.4s ease-in-out infinite alternate;
 }
 .fx-cover-holo { isolation: isolate; }
 .fx-cover-holo::after {
    top: 0;
    bottom: 0;
    left: -100%;
    width: 300%;
    mix-blend-mode: overlay;
    background: linear-gradient(120deg,
        transparent 30%,
        color-mix(in oklab, var(--logo-teal) 45%, transparent) 40%,
        color-mix(in oklab, var(--primary) 45%, transparent) 50%,
        color-mix(in oklab, var(--logo-violet) 45%, transparent) 60%,
        transparent 70%);
    animation: fx-slide 6s ease-in-out infinite;
 }
 .fx-cover-ember::before {
    inset: 0;
    background: linear-gradient(to top, rgb(249 115 22 / 0.35), transparent 55%);
 }
 /* Three sparks as gradient dots in one layer: they rise together. */
 .fx-cover-ember::after {
    inset: 0;
    background:
        radial-gradient(circle 2px at 22% 90%, #fdba74 60%, transparent),
        radial-gradient(circle 2px at 52% 78%, #fdba74 60%, transparent),
        radial-gradient(circle 2px at 80% 92%, #fdba74 60%, transparent);
    animation: fx-spark-rise 3s ease-out infinite;
 }
 /* ---- COMPLETED_EFFECT, details page (decoration behind the text of GameHeroCard; spans are the items) ---- */
 .fx-detail-gold-shine > span,
 .fx-detail-ember > span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    animation-delay: var(--d);
 }
 .fx-detail-gold-shine > span {
    width: 14px;
    height: 14px;
    background: #fbbf24;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    transform: scale(0.6);
    animation: fx-twinkle 2.6s ease-in-out infinite;
 }
 .fx-detail-gold-shine > :nth-child(1) { --x: 46%; --y: 12%; --d: 0s; }
 .fx-detail-gold-shine > :nth-child(2) { --x: 62%; --y: 70%; --d: -0.4s; }
 .fx-detail-gold-shine > :nth-child(3) { --x: 78%; --y: 18%; --d: -0.9s; }
 .fx-detail-gold-shine > :nth-child(4) { --x: 92%; --y: 55%; --d: -1.3s; }
 .fx-detail-gold-shine > :nth-child(5) { --x: 54%; --y: 42%; --d: -1.7s; }
 .fx-detail-gold-shine > :nth-child(6) { --x: 85%; --y: 86%; --d: -2.1s; }
 .fx-detail-gold-shine > :nth-child(7) { --x: 70%; --y: 44%; --d: -2.4s; }
 .fx-detail-gold-shine > :nth-child(8) { --x: 40%; --y: 82%; --d: -0.2s; }
 .fx-detail-neon-pulse > span {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 40%, color-mix(in oklab, var(--primary) 25%, transparent), transparent 70%);
    opacity: 0.8;
    animation: fx-glow 2.4s ease-in-out infinite alternate;
 }
 /* A faint rainbow sheen over the top edge. */
 .fx-detail-holo > span {
    position: absolute;
    inset: 0 0 auto;
    height: 35%;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--logo-teal) 18%, transparent),
        color-mix(in oklab, var(--primary) 18%, transparent),
        color-mix(in oklab, var(--logo-violet) 18%, transparent),
        transparent);
    animation: fx-breathe 6s ease-in-out infinite alternate;
 }
 .fx-detail-ember > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fb923c;
    box-shadow: 0 0 6px #f97316;
    animation: fx-ember 3s ease-out infinite;
 }
 .fx-detail-ember > :nth-child(1) { --x: 46%; --y: 70%; --d: 0s; }
 .fx-detail-ember > :nth-child(2) { --x: 58%; --y: 82%; --d: -0.5s; }
 .fx-detail-ember > :nth-child(3) { --x: 68%; --y: 66%; --d: -1s; }
 .fx-detail-ember > :nth-child(4) { --x: 78%; --y: 84%; --d: -1.5s; }
 .fx-detail-ember > :nth-child(5) { --x: 88%; --y: 72%; --d: -2s; }
 .fx-detail-ember > :nth-child(6) { --x: 52%; --y: 90%; --d: -2.5s; }
 /* ---- PAGE_BACKGROUND and BANNER_BACKGROUND (EffectBackground) ---- */
 .fx-bg { container-type: size; }
 .fx-bg > * { position: absolute; }
 /* triangles: three groups of triangles drifting apart */
@keyframes fx-tri-a { to { transform: translate(60px, -40px) rotate(5deg); } }
@keyframes fx-tri-b { to { transform: translate(-70px, 30px) rotate(-6deg); } }
@keyframes fx-tri-c { to { transform: translate(40px, 50px) rotate(4deg); } }
 .fx-bg-triangles { color: var(--primary); }
 .fx-bg-triangles g { transform-box: fill-box; transform-origin: center; }
 .fx-bg-triangles g:nth-child(1) { animation: fx-tri-a 45s ease-in-out infinite alternate; }
 .fx-bg-triangles g:nth-child(2) { animation: fx-tri-b 58s ease-in-out infinite alternate; }
 .fx-bg-triangles g:nth-child(3) { animation: fx-tri-c 70s ease-in-out infinite alternate; }
 /* starfield: three tiled layers (a tile of --t px moves up by one tile, so the loop is seamless) and 6 twinkles */
@keyframes fx-drift { to { transform: translateY(calc(var(--t) * -1)); } }
 .fx-bg-starfield { --star: color-mix(in oklab, var(--foreground) 70%, transparent); }
 .fx-bg-starfield > :nth-child(-n+3) {
    inset: 0;
    bottom: calc(var(--t) * -1);
    background-size: var(--t) var(--t);
    will-change: transform;
    animation: fx-drift linear infinite;
 }
 .fx-bg-starfield > :nth-child(1) {
    --t: 90px;
    animation-duration: 60s;
    background-image:
        radial-gradient(circle at 20% 30%, var(--star) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 80%, var(--star) 0 1px, transparent 1.5px);
 }
 .fx-bg-starfield > :nth-child(2) {
    --t: 140px;
    animation-duration: 90s;
    background-image:
        radial-gradient(circle at 15% 65%, var(--star) 0 1px, transparent 1.5px),
        radial-gradient(circle at 55% 20%, var(--star) 0 1px, transparent 1.5px),
        radial-gradient(circle at 85% 75%, var(--star) 0 1px, transparent 1.5px);
 }
 .fx-bg-starfield > :nth-child(3) {
    --t: 220px;
    animation-duration: 120s;
    background-image:
        radial-gradient(circle at 30% 40%, var(--star) 0 1.5px, transparent 2px),
        radial-gradient(circle at 75% 85%, var(--star) 0 1.5px, transparent 2px);
 }
 .fx-bg-starfield > :nth-child(n+4) {
    left: var(--x);
    top: var(--y);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--star);
    box-shadow: 0 0 6px var(--star);
    opacity: 0.65;
    animation: fx-breathe 3s ease-in-out infinite alternate;
    animation-delay: var(--d);
 }
 .fx-bg-starfield > :nth-child(4) { --x: 12%; --y: 20%; --d: 0s; }
 .fx-bg-starfield > :nth-child(5) { --x: 33%; --y: 62%; --d: -0.6s; }
 .fx-bg-starfield > :nth-child(6) { --x: 51%; --y: 14%; --d: -1.2s; }
 .fx-bg-starfield > :nth-child(7) { --x: 68%; --y: 48%; --d: -1.8s; }
 .fx-bg-starfield > :nth-child(8) { --x: 84%; --y: 26%; --d: -2.4s; }
 .fx-bg-starfield > :nth-child(9) { --x: 92%; --y: 78%; --d: -0.3s; }
 /* pixels: squares rise and turn; fade in at the base spot, out at the top, so the loop shows no jump */
@keyframes fx-float {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    10%, 90% { opacity: 0.8; }
    100% { transform: translateY(calc(var(--y) * -1cqh - 10px)) rotate(180deg); opacity: 0; }
 }
 .fx-bg-pixels > * {
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 4px;
    height: 4px;
    opacity: 0.8;
    background: var(--primary);
    animation: fx-float var(--dur) linear infinite;
    animation-delay: var(--delay);
 }
 .fx-bg-pixels > :nth-child(4n+2) { background: var(--logo-violet); }
 .fx-bg-pixels > :nth-child(4n+3) { background: var(--logo-blue); }
 .fx-bg-pixels > :nth-child(4n) { background: var(--logo-teal); }
 /* aurora: two soft ribbons waving across the top (elliptic gradients have no hard edge) */
@keyframes fx-wave-a {
    from { transform: rotate(-8deg) translateX(-10%) scaleY(1); }
    to { transform: rotate(-8deg) translateX(10%) scaleY(1.3); }
 }
 .fx-bg-aurora > * {
    left: -30%;
    width: 160%;
    height: 40%;
    transform: rotate(-8deg);
    will-change: transform;
    animation: fx-wave-a 20s ease-in-out infinite alternate;
 }
 .fx-bg-aurora > :nth-child(1) {
    top: -5%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 28%, transparent), transparent);
 }
 .fx-bg-aurora > :nth-child(2) {
    top: 12%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--logo-teal) 24%, transparent), transparent);
    animation-duration: 26s;
    animation-direction: alternate-reverse;
 }
 /* mesh: four big blobs in the corners; the gradient edge is the blur, a filter would cost every frame */
@keyframes fx-blob {
    from { transform: translate(-8%, -6%) scale(0.9); }
    to { transform: translate(8%, 6%) scale(1.1); }
 }
 .fx-bg-mesh > * {
    width: 60cqmax;
    height: 60cqmax;
    will-change: transform;
    animation: fx-blob 25s ease-in-out infinite alternate;
 }
 .fx-bg-mesh > :nth-child(1) {
    left: -15%; top: -20%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 30%, transparent), transparent);
 }
 .fx-bg-mesh > :nth-child(2) {
    right: -15%; top: -10%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--logo-teal) 26%, transparent), transparent);
    animation-duration: 28s;
 }
 .fx-bg-mesh > :nth-child(3) {
    left: -10%; bottom: -25%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--logo-violet) 26%, transparent), transparent);
    animation-duration: 32s;
 }
 .fx-bg-mesh > :nth-child(4) {
    right: -20%; bottom: -20%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 22%, transparent), transparent);
    animation-duration: 35s;
 }
 /* grid: a perspective floor moving one cell (40px) toward the viewer; the height keeps all points in front of the camera */
@keyframes fx-floor {
    from { transform: perspective(600px) rotateX(62deg) translateY(0); }
    to { transform: perspective(600px) rotateX(62deg) translateY(40px); }
 }
 .fx-bg-grid > :nth-child(1) {
    inset: 0 0 auto;
    height: 45%;
    background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--primary) 25%, transparent));
 }
 .fx-bg-grid > :nth-child(2) {
    left: -100%;
    top: 45%;
    width: 300%;
    height: 500px;
    transform-origin: top center;
    transform: perspective(600px) rotateX(62deg);
    background-image:
        repeating-linear-gradient(0deg, color-mix(in oklab, var(--primary) 35%, transparent) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, color-mix(in oklab, var(--primary) 35%, transparent) 0 1px, transparent 1px 40px);
    will-change: transform;
    animation: fx-floor 2s linear infinite;
 }
 /* waves: three bands 2 container widths wide (one period = one width), moving one width sideways */
@keyframes fx-wave-x { to { transform: translateX(-50%); } }
 .fx-bg-waves > svg {
    left: 0;
    bottom: 0;
    width: 200%;
    color: var(--primary);
    animation: fx-wave-x linear infinite;
 }
 .fx-bg-waves > :nth-child(1) { height: 25%; opacity: 0.08; animation-duration: 14s; }
 .fx-bg-waves > :nth-child(2) { height: 32%; opacity: 0.12; animation-duration: 20s; animation-direction: reverse; }
 .fx-bg-waves > :nth-child(3) { height: 40%; opacity: 0.18; animation-duration: 28s; }
 /* bokeh: soft circles drifting up */
@keyframes fx-bokeh {
    0% { transform: translateY(8cqh); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-20cqh); opacity: 0; }
 }
 .fx-bg-bokeh > * {
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--s) * 1cqmin);
    height: calc(var(--s) * 1cqmin);
    opacity: 0.6;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--primary) 25%, transparent), transparent);
    animation: fx-bokeh var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
 }
 .fx-bg-bokeh > :nth-child(even) {
    background: radial-gradient(closest-side, color-mix(in oklab, var(--logo-teal) 22%, transparent), transparent);
 }
 /* ---- Off screen covers hold their frame (components/GameCover.jsx) ---- */
 .fx-paused,
 .fx-paused *,
 .fx-paused::before,
 .fx-paused::after {
    animation-play-state: paused;
 }
 /* ---- Static mode: the system setting and the "Reduce animations" setting (utils/appearance.js) ---- */
@media (prefers-reduced-motion: reduce) {
    .fx, .fx *, .fx::before, .fx::after { animation: none !important; }
 }
 html[data-reduce-motion] .fx,
 html[data-reduce-motion] .fx *,
 html[data-reduce-motion] .fx::before,
 html[data-reduce-motion] .fx::after {
    animation: none !important;
 }
@@ -0,0 +1,38 @@
 import {useEffect, useState} from 'react';
 // One observer for every element, so 80 covers cost one observer and not 80. It lives while something is watched.
 const setters = new Map();
 let observer = null;
 const sharedObserver = () => {
    observer ??= new IntersectionObserver((entries) => {
        for (const entry of entries) setters.get(entry.target)?.(entry.isIntersecting);
    }, {rootMargin: '100px'});
    return observer;
 };
 /**
 * Whether the element of `ref` is on screen (or 100 px near it). True while `enabled` is false, and where the
 * browser has no IntersectionObserver; it also starts true, so the first paint is not held back.
 */
 export default function useInView(ref, enabled) {
    const [inView, setInView] = useState(true);
    useEffect(() => {
        const element = ref.current;
        if (!enabled || !element || typeof IntersectionObserver === 'undefined') return undefined;
        const watcher = sharedObserver();
        setters.set(element, setInView);
        watcher.observe(element);
        return () => {
            setters.delete(element);
            watcher.unobserve(element);
            if (setters.size === 0) {
                watcher.disconnect();
                observer = null;
            }
        };
    }, [ref, enabled]);
    return !enabled || inView;
 }
@@ -54,7 +54,7 @@ describe('useSaveAppearance', () => {
        const [url, request] = fetch.mock.calls[0];
        expect(url).toContain('/api/users/settings/appearance');
        expect(request.method).toBe('PUT');
-        expect(JSON.parse(request.body)).toEqual({accent: 'blue', corners: 'default', wideLayout: false, backgroundAppid: null, bannerAppid: null, showBanner: true});
+        expect(JSON.parse(request.body)).toEqual({accent: 'blue', corners: 'default', wideLayout: false, backgroundAppid: null, bannerAppid: null, showBanner: true, reduceMotion: false});
    });
    it('puts the old value back when Auth refuses', async () => {
@@ -119,7 +119,7 @@ describe('useSaveAppearance', () => {
    });
    it('waits for a running load from Auth, then keeps its values for the fields not changed here', async () => {
-        const fromServer = {accent: 'green', corners: 'default', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: false};
+        const fromServer = {accent: 'green', corners: 'default', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: false, reduceMotion: false};
        let answerMe;
        fetchRoutes({
            [PUT]: json(204),
@@ -206,7 +206,7 @@ describe('useSaveAppearance', () => {
        });
        expect(result.current.preferences.appearance.corners).toBe('round');
-        expect(puts()[2]).toEqual({accent: 'green', corners: 'round', wideLayout: true, backgroundAppid: null, bannerAppid: null, showBanner: true});
+        expect(puts()[2]).toEqual({accent: 'green', corners: 'round', wideLayout: true, backgroundAppid: null, bannerAppid: null, showBanner: true, reduceMotion: false});
    });
    it('sends nothing for a change that waited for the load when a reset came first', async () => {
@@ -0,0 +1,322 @@
 import {useCallback, useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {Loader2, Search, Send, X} from 'lucide-react';
 import {toast} from 'sonner';
 import {Button} from '@/components/ui/button';
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
 } from '@/components/ui/dialog';
 import {Input} from '@/components/ui/input';
 import {Label} from '@/components/ui/label';
 import {Textarea} from '@/components/ui/textarea';
 import PageContainer from '../components/PageContainer.jsx';
 import {fetchUsers} from '../utils/admin.js';
 import {fetchBroadcasts, fetchRecipientCount, sendBroadcast, sendTestBroadcast} from '../utils/broadcasts.js';
 import {formatDateTime} from '../utils/format.js';
 import {MAX_BROADCAST_BODY_LENGTH, MAX_BROADCAST_SUBJECT_LENGTH} from '../utils/limits.js';
 const emptyForm = () => ({subjectEn: '', subjectDe: '', bodyEn: '', bodyDe: ''});
 const SEARCH_SIZE = 20;
 /**
 * PLATFORM_ADMIN only: write a mail in both languages, send it to all active users or to picked ones, and see the
 * history with the counts. Auth checks the role.
 */
 export default function AdminBroadcastPage() {
    const {t, i18n} = useTranslation();
    const [entries, setEntries] = useState([]);
    const [status, setStatus] = useState('loading');
    const [form, setForm] = useState(emptyForm);
    const [mode, setMode] = useState('all');
    const [picked, setPicked] = useState([]);
    const [query, setQuery] = useState('');
    const [found, setFound] = useState([]);
    const [confirm, setConfirm] = useState(null);
    const [busy, setBusy] = useState(false);
    const load = useCallback(async () => {
        try {
            const response = await fetchBroadcasts();
            if (response.status === 401) return;
            if (response.status === 403) {
                setStatus('forbidden');
                return;
            }
            if (!response.ok) {
                setStatus('error');
                return;
            }
            setEntries((await response.json()).results);
            setStatus('ready');
        } catch (err) {
            console.error('Admin broadcast error:', err);
            setStatus('error');
        }
    }, []);
    useEffect(() => {
        load();
    }, [load]);
    const trimmed = () => ({
        subjectEn: form.subjectEn.trim(),
        subjectDe: form.subjectDe.trim(),
        bodyEn: form.bodyEn.trim(),
        bodyDe: form.bodyDe.trim(),
    });
    const incomplete = Object.values(trimmed()).some((value) => !value);
    const userIds = () => (mode === 'all' ? null : picked.map((user) => user.id));
    const change = (field) => (event) => setForm({...form, [field]: event.target.value});
    const sendTest = async () => {
        setBusy(true);
        try {
            const response = await sendTestBroadcast(trimmed());
            if (response.status === 401) return;
            if (response.ok) toast.success(t('ADMIN_BROADCAST.TEST_SENT'));
            else toast.error(t('ADMIN_BROADCAST.ERROR'));
        } catch (err) {
            console.error('Admin broadcast test error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setBusy(false);
        }
    };
    const submit = async (event) => {
        event.preventDefault();
        setConfirm({count: null});
        try {
            const response = await fetchRecipientCount(userIds());
            if (response.status === 401) return;
            if (!response.ok) throw new Error(`count ${response.status}`);
            const {count} = await response.json();
            setConfirm((current) => (current ? {count} : current));
        } catch (err) {
            console.error('Admin broadcast count error:', err);
            toast.error(t('ADMIN_BROADCAST.ERROR'));
            setConfirm(null);
        }
    };
    const send = async () => {
        setBusy(true);
        try {
            const response = await sendBroadcast({...trimmed(), userIds: userIds()});
            if (response.status === 401) return;
            if (response.ok) {
                const data = await response.json();
                toast.success(t('ADMIN_BROADCAST.SENT', {count: data.recipientCount}));
                setConfirm(null);
                setForm(emptyForm());
                setPicked([]);
                setFound([]);
                await load();
            } else {
                toast.error(t(response.status === 409 ? 'ADMIN_BROADCAST.NO_RECIPIENTS' : 'ADMIN_BROADCAST.ERROR'));
            }
        } catch (err) {
            console.error('Admin broadcast send error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setBusy(false);
        }
    };
    const search = async () => {
        try {
            const response = await fetchUsers(query.trim(), 'ACTIVE', 0, SEARCH_SIZE);
            if (response.status === 401) return;
            if (!response.ok) throw new Error(`search ${response.status}`);
            const {content} = await response.json();
            setFound(content.filter((user) => !user.blocked && !user.deletedAt));
        } catch (err) {
            console.error('Admin broadcast search error:', err);
            toast.error(t('ADMIN_BROADCAST.ERROR'));
        }
    };
    const toggle = (user) => setPicked((current) => (current.some((p) => p.id === user.id)
        ? current.filter((p) => p.id !== user.id)
        : [...current, {id: user.id, email: user.email, displayName: user.displayName}]));
    if (status === 'forbidden') {
        return (
            <PageContainer className="px-4 py-6 md:px-8">
                <p className="text-sm text-muted-foreground">{t('ADMIN_BROADCAST.NO_ACCESS')}</p>
            </PageContainer>
        );
    }
    return (
        <PageContainer className="space-y-4 px-4 py-6 md:px-8">
            <Card>
                <CardHeader>
                    <CardTitle>{t('ADMIN_BROADCAST.NEW')}</CardTitle>
                </CardHeader>
                <CardContent>
                    <form onSubmit={submit} className="space-y-4">
                        <div className="space-y-2">
                            <Label htmlFor="broadcastSubjectEn">{t('ADMIN_BROADCAST.SUBJECT_EN')}</Label>
                            <Input id="broadcastSubjectEn" required maxLength={MAX_BROADCAST_SUBJECT_LENGTH}
                                   value={form.subjectEn} onChange={change('subjectEn')}/>
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="broadcastBodyEn">{t('ADMIN_BROADCAST.BODY_EN')}</Label>
                            <Textarea id="broadcastBodyEn" required maxLength={MAX_BROADCAST_BODY_LENGTH}
                                      value={form.bodyEn} onChange={change('bodyEn')}/>
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="broadcastSubjectDe">{t('ADMIN_BROADCAST.SUBJECT_DE')}</Label>
                            <Input id="broadcastSubjectDe" required maxLength={MAX_BROADCAST_SUBJECT_LENGTH}
                                   value={form.subjectDe} onChange={change('subjectDe')}/>
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="broadcastBodyDe">{t('ADMIN_BROADCAST.BODY_DE')}</Label>
                            <Textarea id="broadcastBodyDe" required maxLength={MAX_BROADCAST_BODY_LENGTH}
                                      value={form.bodyDe} onChange={change('bodyDe')}/>
                            <p className="text-xs text-muted-foreground">{t('ADMIN_BROADCAST.TEXT_HELP')}</p>
                        </div>
                        <div className="space-y-2">
                            <p className="text-sm font-medium">{t('ADMIN_BROADCAST.RECIPIENTS')}</p>
                            <div className="flex gap-2">
                                {['all', 'picked'].map((value) => (
                                    <Button key={value} type="button" variant={mode === value ? 'default' : 'outline'}
                                            aria-pressed={mode === value} onClick={() => setMode(value)}>
                                        {t(`ADMIN_BROADCAST.${value.toUpperCase()}`)}
                                    </Button>
                                ))}
                            </div>
                        </div>
                        {mode === 'picked' && (
                            <div className="space-y-3">
                                <div className="flex gap-2">
                                    <Input aria-label={t('ADMIN_BROADCAST.SEARCH')} placeholder={t('ADMIN_BROADCAST.SEARCH')}
                                           value={query} onChange={(event) => setQuery(event.target.value)}
                                           onKeyDown={(event) => {
                                               if (event.key === 'Enter') {
                                                   event.preventDefault();
                                                   search();
                                               }
                                           }}/>
                                    <Button type="button" variant="outline" size="icon"
                                            aria-label={t('ADMIN_BROADCAST.SEARCH')} onClick={search}>
                                        <Search/>
                                    </Button>
                                </div>
                                {found.length > 0 && (
                                    <ul className="space-y-1">
                                        {found.map((user) => (
                                            <li key={user.id}>
                                                <label className="flex items-center gap-2 text-sm">
                                                    <input type="checkbox" className="accent-primary"
                                                           checked={picked.some((p) => p.id === user.id)}
                                                           onChange={() => toggle(user)}/>
                                                    {[user.email, user.displayName].filter(Boolean).join(' · ')}
                                                </label>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                                <p className="text-sm text-muted-foreground">
                                    {t('ADMIN_BROADCAST.PICKED_COUNT', {count: picked.length})}
                                </p>
                                {picked.length > 0 && (
                                    <ul className="flex flex-wrap gap-2">
                                        {picked.map((user) => (
                                            <li key={user.id} className="flex items-center gap-1 rounded-md border px-2 py-1 text-sm">
                                                {user.email}
                                                <button type="button" aria-label={`${t('ADMIN_BROADCAST.REMOVE')} ${user.email}`}
                                                        onClick={() => toggle(user)}>
                                                    <X className="size-3"/>
                                                </button>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </div>
                        )}
                        <div className="flex flex-wrap gap-2">
                            <Button type="button" variant="outline" disabled={busy || incomplete} onClick={sendTest}>
                                {t('ADMIN_BROADCAST.TEST')}
                            </Button>
                            <Button type="submit" disabled={busy || incomplete || (mode === 'picked' && picked.length === 0)}>
                                <Send/>{t('ADMIN_BROADCAST.SEND')}
                            </Button>
                        </div>
                    </form>
                </CardContent>
            </Card>
            <Card>
                <CardHeader>
                    <CardTitle>{t('ADMIN_BROADCAST.LIST')}</CardTitle>
                </CardHeader>
                <CardContent>
                    {status === 'loading' && <Loader2 className="size-5 animate-spin text-muted-foreground"/>}
                    {status === 'error' && <p className="text-sm text-destructive">{t('ADMIN_BROADCAST.LOAD_ERROR')}</p>}
                    {status === 'ready' && entries.length === 0 && (
                        <p className="text-sm text-muted-foreground">{t('ADMIN_BROADCAST.EMPTY')}</p>
                    )}
                    {status === 'ready' && entries.length > 0 && (
                        <ul className="divide-y">
                            {entries.map((entry) => (
                                <li key={entry.id} className="space-y-1 py-3">
                                    <p className="text-xs text-muted-foreground">
                                        {formatDateTime(entry.createdAt, i18n.language)}
                                        {' · '}
                                        {t('ADMIN_BROADCAST.COUNTS', {
                                            recipients: entry.recipientCount, sent: entry.sentCount, failed: entry.failedCount,
                                        })}
                                    </p>
                                    <p className="font-medium">{entry.subjectEn}</p>
                                    <p className="font-medium">{entry.subjectDe}</p>
                                    <p className="whitespace-pre-line break-words text-sm text-muted-foreground">{entry.bodyEn}</p>
                                    <p className="whitespace-pre-line break-words text-sm text-muted-foreground">{entry.bodyDe}</p>
                                </li>
                            ))}
                        </ul>
                    )}
                </CardContent>
            </Card>
            <Dialog open={!!confirm} onOpenChange={(open) => { if (!open && !busy) setConfirm(null); }}>
                {confirm && (
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>{t('ADMIN_BROADCAST.CONFIRM_TITLE')}</DialogTitle>
                            <DialogDescription asChild>
                                <div>
                                    {confirm.count === null && <Loader2 className="size-5 animate-spin"/>}
                                    {confirm.count === 0 && t('ADMIN_BROADCAST.NO_RECIPIENTS')}
                                    {confirm.count > 0 && t('ADMIN_BROADCAST.CONFIRM_TEXT', {count: confirm.count})}
                                </div>
                            </DialogDescription>
                        </DialogHeader>
                        <DialogFooter>
                            <DialogClose asChild>
                                <Button type="button" variant="outline">{t('ADMIN_BROADCAST.CANCEL')}</Button>
                            </DialogClose>
                            <Button type="button" disabled={busy || !confirm.count} onClick={send}>
                                {busy && <Loader2 className="animate-spin"/>}
                                {t('ADMIN_BROADCAST.CONFIRM')}
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                )}
            </Dialog>
        </PageContainer>
    );
 }
@@ -0,0 +1,161 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import {toast} from 'sonner';
 import AdminBroadcastPage from './AdminBroadcastPage.jsx';
 import {PreferencesProvider} from '../context/PreferencesContext.jsx';
 import {fetchRoutes, json} from '../test/fetchRoutes.js';
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
 const ENTRY = {id: 1, subjectEn: 'Maintenance', subjectDe: 'Wartung', bodyEn: 'We pause.', bodyDe: 'Wir pausieren.',
    createdBy: 1, createdAt: '2026-10-01T10:00:00Z', recipientCount: 5, sentCount: 4, failedCount: 1};
 const USERS = {content: [
    {id: 7, email: 'ann@example.com', displayName: 'Ann', blocked: false, deletedAt: null},
    {id: 8, email: 'bob@example.com', displayName: 'Bob', blocked: true, deletedAt: null},
 ]};
 const withRoutes = (routes) => fetchRoutes({
    'GET /api/admin/broadcasts': json(200, {results: [ENTRY]}),
    'GET /api/admin/broadcasts/recipient-count': json(200, {count: 42}),
    'POST /api/admin/broadcasts': json(201, {recipientCount: 42}),
    'POST /api/admin/broadcasts/test': json(204),
    'GET /api/admin/users': json(200, USERS),
    ...routes,
 });
 const posts = (suffix) => fetch.mock.calls.filter(([url, init]) => init?.method === 'POST' && url.endsWith(suffix));
 const body = (call) => JSON.parse(call[1].body);
 const renderPage = () => render(<MemoryRouter><PreferencesProvider><AdminBroadcastPage/></PreferencesProvider></MemoryRouter>);
 const fill = () => {
    fireEvent.change(screen.getByLabelText('ADMIN_BROADCAST.SUBJECT_EN'), {target: {value: ' Hello '}});
    fireEvent.change(screen.getByLabelText('ADMIN_BROADCAST.BODY_EN'), {target: {value: ' Body en '}});
    fireEvent.change(screen.getByLabelText('ADMIN_BROADCAST.SUBJECT_DE'), {target: {value: ' Hallo '}});
    fireEvent.change(screen.getByLabelText('ADMIN_BROADCAST.BODY_DE'), {target: {value: ' Inhalt '}});
 };
 const TRIMMED = {subjectEn: 'Hello', subjectDe: 'Hallo', bodyEn: 'Body en', bodyDe: 'Inhalt'};
 describe('AdminBroadcastPage', () => {
    beforeEach(() => {
        localStorage.setItem('tbp_session', '1');
        withRoutes({});
    });
    afterEach(() => {
        cleanup();
        localStorage.clear();
        vi.clearAllMocks();
    });
    it('lists the history with the counts', async () => {
        renderPage();
        expect(await screen.findByText('Maintenance')).toBeTruthy();
        expect(screen.getByText('Wartung')).toBeTruthy();
        expect(screen.getByText(/ADMIN_BROADCAST\.COUNTS/)).toBeTruthy();
    });
    it('sends the trimmed test mail and keeps the form', async () => {
        renderPage();
        await screen.findByText('Maintenance');
        const test = screen.getByText('ADMIN_BROADCAST.TEST').closest('button');
        expect(test.disabled).toBe(true);
        fill();
        fireEvent.click(test);
        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('ADMIN_BROADCAST.TEST_SENT'));
        expect(body(posts('/test')[0])).toEqual(TRIMMED);
        expect(screen.getByLabelText('ADMIN_BROADCAST.SUBJECT_EN').value).toBe(' Hello ');
    });
    it('sends to all after the confirmation with the count, then empties the form', async () => {
        renderPage();
        await screen.findByText('Maintenance');
        fill();
        fireEvent.click(screen.getByText('ADMIN_BROADCAST.SEND'));
        expect(await screen.findByText('ADMIN_BROADCAST.CONFIRM_TEXT:42')).toBeTruthy();
        expect(posts('/broadcasts')).toEqual([]);
        fireEvent.click(screen.getByText('ADMIN_BROADCAST.CONFIRM'));
        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('ADMIN_BROADCAST.SENT:42'));
        expect(body(posts('/broadcasts')[0])).toEqual({...TRIMMED, userIds: null});
        await waitFor(() => expect(screen.getByLabelText('ADMIN_BROADCAST.SUBJECT_EN').value).toBe(''));
        expect(screen.queryByText('ADMIN_BROADCAST.CONFIRM_TEXT:42')).toBeNull();
    });
    it('sends to the picked users only and leaves a blocked one out of the list', async () => {
        renderPage();
        await screen.findByText('Maintenance');
        fill();
        const send = screen.getByText('ADMIN_BROADCAST.SEND').closest('button');
        fireEvent.click(screen.getByText('ADMIN_BROADCAST.PICKED'));
        expect(send.disabled).toBe(true);
        fireEvent.change(screen.getByRole('textbox', {name: 'ADMIN_BROADCAST.SEARCH'}), {target: {value: 'a'}});
        fireEvent.click(screen.getByRole('button', {name: 'ADMIN_BROADCAST.SEARCH'}));
        const ann = await screen.findByLabelText(/ann@example\.com/);
        expect(screen.queryByLabelText(/bob@example\.com/)).toBeNull();
        fireEvent.click(ann);
        expect(screen.getByText('ADMIN_BROADCAST.PICKED_COUNT:1')).toBeTruthy();
        fireEvent.click(send);
        await screen.findByText('ADMIN_BROADCAST.CONFIRM_TEXT:42');
        expect(fetch.mock.calls.some(([url]) => url.includes('/recipient-count?userIds=7'))).toBe(true);
        fireEvent.click(screen.getByText('ADMIN_BROADCAST.CONFIRM'));
        await waitFor(() => expect(posts('/broadcasts')).toHaveLength(1));
        expect(body(posts('/broadcasts')[0]).userIds).toEqual([7]);
    });
    it('cannot send when nobody would get the mail', async () => {
        withRoutes({'GET /api/admin/broadcasts/recipient-count': json(200, {count: 0})});
        renderPage();
        await screen.findByText('Maintenance');
        fill();
        fireEvent.click(screen.getByText('ADMIN_BROADCAST.SEND'));
        expect(await screen.findByText('ADMIN_BROADCAST.NO_RECIPIENTS')).toBeTruthy();
        expect(screen.getByText('ADMIN_BROADCAST.CONFIRM').closest('button').disabled).toBe(true);
    });
    it('keeps the confirmation closed when it was cancelled before the count arrived', async () => {
        let answer;
        withRoutes({'GET /api/admin/broadcasts/recipient-count': () => new Promise((resolve) => { answer = resolve; })});
        renderPage();
        await screen.findByText('Maintenance');
        fill();
        fireEvent.click(screen.getByText('ADMIN_BROADCAST.SEND'));
        fireEvent.click(await screen.findByText('ADMIN_BROADCAST.CANCEL'));
        await waitFor(() => expect(screen.queryByText('ADMIN_BROADCAST.CANCEL')).toBeNull());
        answer(json(200, {count: 42}));
        await waitFor(() => expect(fetch.mock.calls.some(([url]) => url.includes('/recipient-count'))).toBe(true));
        await new Promise((resolve) => setTimeout(resolve, 20));
        expect(screen.queryByText('ADMIN_BROADCAST.CONFIRM_TEXT:42')).toBeNull();
    });
    it('does not offer the send while a field is blank', async () => {
        renderPage();
        await screen.findByText('Maintenance');
        fill();
        fireEvent.change(screen.getByLabelText('ADMIN_BROADCAST.BODY_DE'), {target: {value: '   '}});
        expect(screen.getByText('ADMIN_BROADCAST.SEND').closest('button').disabled).toBe(true);
    });
    it('shows "no access" to a non-admin', async () => {
        withRoutes({'GET /api/admin/broadcasts': json(403, {})});
        renderPage();
        expect(await screen.findByText('ADMIN_BROADCAST.NO_ACCESS')).toBeTruthy();
        expect(screen.queryByText('ADMIN_BROADCAST.SEND')).toBeNull();
    });
 });
@@ -60,7 +60,7 @@ const Dashboard = () => {
    const hasSteamId = !!userData?.steamId;
    const showLibrary = hasSteamId || steamData.count > 0;
-    const {appearance, wallet} = usePreferences();
+    const {appearance, equipped} = usePreferences();
    const steamProfile = useSteamProfile(hasSteamId);
    const bannerAppid = appearance.showBanner
        ? appearance.bannerAppid ?? activity?.recentGames?.[0]?.appid ?? null
@@ -99,7 +99,8 @@ const Dashboard = () => {
        switch (id) {
            case 'GAME_COUNT': return showLibrary && <SteamGameCount targetCount={steamData.count}/>;
            case 'MOST_PLAYED':
-                return showLibrary && <MostPlayedCard games={topGames.slice(0, TOP_GAMES[size])} syncing={sync.isRunning}/>;
+                return showLibrary && <MostPlayedCard games={topGames.slice(0, TOP_GAMES[size])} syncing={sync.isRunning}
                                       equipped={equipped}/>;
            case 'PLAYING':
                return showLibrary && (
                    <CurrentlyPlayingCard games={playing.slice(0, PLAYING_GAMES[size])} syncing={sync.isRunning} wide={size === 'L'}/>
@@ -127,7 +128,7 @@ const Dashboard = () => {
    return (
        <PageContainer className="p-4 md:p-8 space-y-6">
            <DashboardWelcomeCard bannerAppid={bannerAppid} avatarUrl={steamProfile?.avatarUrl}
-                                  equipped={wallet?.equipped}
+                                  equipped={equipped}
                                  sync={sync} forceSync={forceSync} editing={editing} onCustomize={() => setEditing(true)}/>
            <TileGrid tiles={DASHBOARD_TILES} titles={DASHBOARD_TITLES} layout={layout} renderTile={renderTile} editing={editing}
@@ -0,0 +1,52 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {act, cleanup, screen, waitFor} from '@testing-library/react';
 import GameDetail from './GameDetail.jsx';
 import {fetchRoutes, json} from '../test/fetchRoutes.js';
 import {renderWithProviders} from '../test/renderWithProviders.jsx';
 import WalletLoader from '../test/WalletLoader.jsx';
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
 const game = {
    appid: 220, name: 'Half-Life 2', playtimeMinutes: 100, playtime2Weeks: 0, source: 'STEAM',
    rating: null, notes: null, priority: null, hasAchievements: false, statsVisible: false, achievements: [],
 };
 const renderDetail = (status) => {
    fetchRoutes({
        'GET /api/users/me': json(200, {settings: {}}),
        'GET /api/rewards/wallet': json(200, {balance: 0, catalog: [], owned: [], equipped: {COMPLETED_EFFECT: 'FX_GOLD_SHINE'}, history: []}),
        'GET /api/library/games/220': json(200, {...game, status}),
    });
    return renderWithProviders(<><WalletLoader/><GameDetail/></>, {path: '/library/:appid', entries: ['/library/220']});
 };
 beforeEach(() => localStorage.setItem('tbp_session', '1'));
 afterEach(() => {
    cleanup();
    localStorage.clear();
 });
 describe('GameDetail completed effect', () => {
    it('decorates the card of a COMPLETED game with the worn effect and its cover', async () => {
        const {container} = renderDetail('COMPLETED');
        await waitFor(() => expect(container.querySelector('.fx-detail-gold-shine')).not.toBeNull());
        const decoration = container.querySelector('.fx-detail-gold-shine');
        expect(decoration.getAttribute('aria-hidden')).toBe('true');
        expect(decoration.children).toHaveLength(8);
        expect(container.querySelector('.fx-cover-gold-shine')).not.toBeNull();
    });
    it('shows nothing for a FINISHED game', async () => {
        const {container} = renderDetail('FINISHED');
        await screen.findByText('Half-Life 2');
        await waitFor(() => expect(fetch.mock.calls.some(([url]) => url.includes('/rewards/wallet'))).toBe(true));
        await act(async () => {});
        expect(container.querySelector('.fx-detail-gold-shine')).toBeNull();
        expect(container.querySelector('.fx-cover-gold-shine')).toBeNull();
    });
 });
@@ -0,0 +1,42 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {cleanup, screen, waitFor} from '@testing-library/react';
 import GameLibrary from './GameLibrary.jsx';
 import {fetchRoutes, json} from '../test/fetchRoutes.js';
 import {renderWithProviders} from '../test/renderWithProviders.jsx';
 import WalletLoader from '../test/WalletLoader.jsx';
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
 vi.mock('../hooks/useLibrarySync.js', () => ({default: () => ({status: 'OK', lastSyncedAt: null, isRunning: false})}));
 vi.mock('../hooks/useForceSync.js', () => ({default: () => ({trigger: vi.fn(), busy: false})}));
 const games = [
    {appid: 620, name: 'Portal 2', playtimeMinutes: 0, status: 'COMPLETED'},
    {appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'FINISHED'},
 ];
 beforeEach(() => {
    localStorage.setItem('tbp_session', '1');
    fetchRoutes({
        'GET /api/users/me': json(200, {settings: {}}),
        'GET /api/rewards/wallet': json(200, {balance: 0, catalog: [], owned: [], equipped: {COMPLETED_EFFECT: 'FX_GOLD_SHINE'}, history: []}),
        'GET /api/library/games': json(200, {content: games, page: 0, size: 20, totalElements: 2, totalPages: 1}),
        'GET /api/library/games-count': json(200, {count: 2, hasSteamId: true}),
    });
 });
 afterEach(() => {
    cleanup();
    localStorage.clear();
 });
 describe('GameLibrary completed effect', () => {
    it('puts the worn effect on the cover of a COMPLETED game only', async () => {
        renderWithProviders(<><WalletLoader/><GameLibrary/></>, {entries: ['/library']});
        const cover = async (name) => (await screen.findByText(name)).closest('li').querySelector('img').parentElement;
        await waitFor(async () => expect((await cover('Portal 2')).classList.contains('fx-cover-gold-shine')).toBe(true));
        expect((await cover('Half-Life 2')).classList.contains('fx-cover-gold-shine')).toBe(false);
    });
 });
@@ -20,6 +20,8 @@ import GameCover from '../components/GameCover.jsx';
 import LibraryTabs from '../components/LibraryTabs.jsx';
 import GameStatusBadge from '../components/GameStatusBadge.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import {coverEffect} from '../utils/rewards.js';
 import {apiFetch, request} from '../utils/api.js';
 import useAbortPrevious from '../hooks/useAbortPrevious.js';
 import {platformLabel} from '../utils/platforms.js';
@@ -41,6 +43,7 @@ const SORT_OPTIONS = [
 export default function GameLibrary() {
    const {t} = useTranslation();
    const {equipped} = usePreferences();
    const [searchParams, setSearchParams] = useSearchParams();
    const page = Math.max(0, parseInt(searchParams.get('page') ?? '0', 10) || 0);
@@ -286,7 +289,8 @@ export default function GameLibrary() {
                                    to={`/library/${g.appid}`}
                                    className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3 transition-colors hover:bg-muted/50"
                                >
-                                    <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"/>
                                    <span className="min-w-0 flex-1 truncate font-medium group-hover:text-primary transition-colors">
                                        {g.name ?? `App ${g.appid}`}
                                    </span>
@@ -1,3 +1,4 @@
 import {useRef} from 'react';
 import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {Coins} from 'lucide-react';
@@ -8,8 +9,10 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
 import {cn} from '@/lib/utils';
 import EffectBackground from '../components/EffectBackground.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import useInView from '../hooks/useInView.js';
 import {formatDate} from '../utils/format.js';
 import {buyItem, equipItem, LOOKS, SLOTS} from '../utils/rewards.js';
@@ -143,9 +146,13 @@ export default function PointsPage() {
    );
 }
-// A sample of the look: a ring on a circle, a pill with the badge icon, a color dot or a framed box.
+// A sample of the look: a ring on a circle, a pill with the badge icon, a color dot, a framed box, a tile with its
 // effect or a box with the animated background.
 function Preview({code}) {
    const look = LOOKS[code];
    const ref = useRef(null);
    // The shop shows 20 animated previews at once; the ones off screen hold their frame.
    const inView = useInView(ref, !!(look?.cover || look?.effect));
    if (!look) return null;
    if (look.Icon) {
        return <span className={cn('flex size-8 items-center justify-center rounded-full', look.className)}><look.Icon className="size-4"/></span>;
@@ -153,5 +160,15 @@ function Preview({code}) {
    if (look.accent) {
        return <span data-accent={look.accent} className="size-8 rounded-full bg-primary"/>;
    }
    if (look.cover) {
        return <span ref={ref} className={cn('relative h-8 w-14 shrink-0 overflow-hidden rounded-md bg-muted', look.cover, !inView && 'fx-paused')}/>;
    }
    if (look.effect) {
        return (
            <span ref={ref} className={cn('relative h-8 w-14 shrink-0 overflow-hidden rounded-md bg-background', !inView && 'fx-paused')}>
                <EffectBackground effect={look.effect} className="absolute inset-0"/>
            </span>
        );
    }
    return <span className={cn('size-8 shrink-0 bg-muted', look.className, code.startsWith('BORDER') ? 'rounded-full' : 'rounded-md')}/>;
 }
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, screen, waitFor, within} from '@testing-library/react';
+import {act, cleanup, fireEvent, screen, waitFor, within} from '@testing-library/react';
 import {toast} from 'sonner';
 import PointsPage from './PointsPage.jsx';
 import {fetchRoutes, json} from '../test/fetchRoutes.js';
@@ -16,6 +16,9 @@ const wallet = (extra = {}) => ({
        {code: 'BORDER_GOLD', slot: 'AVATAR_BORDER', price: 150},
        {code: 'BORDER_NEON', slot: 'AVATAR_BORDER', price: 200},
        {code: 'BADGE_PILE_SLAYER', slot: 'BADGE', price: 100},
        {code: 'FX_GOLD_SHINE', slot: 'COMPLETED_EFFECT', price: 300},
        {code: 'BG_GRID', slot: 'PAGE_BACKGROUND', price: 450},
        {code: 'BN_GRID', slot: 'BANNER_BACKGROUND', price: 300},
    ],
    owned: ['BADGE_PILE_SLAYER'],
    equipped: {},
@@ -47,6 +50,42 @@ afterEach(() => {
 });
 describe('PointsPage', () => {
    it('shows the effect slots with a preview of each look', async () => {
        await renderPage();
        const card = (slot) => screen.getByText(`POINTS.SLOTS.${slot}`).closest('[data-slot="card"]');
        const cover = within(card('COMPLETED_EFFECT')).getByText('POINTS.ITEMS.FX_GOLD_SHINE').closest('li').firstChild;
        expect(cover.classList.contains('fx-cover-gold-shine')).toBe(true);
        expect(card('PAGE_BACKGROUND').querySelector('[data-effect="grid"]')).not.toBeNull();
        expect(card('BANNER_BACKGROUND').querySelector('[data-effect="grid"]')).not.toBeNull();
    });
    it('holds the frame of previews that are off screen', async () => {
        const callbacks = [];
        vi.stubGlobal('IntersectionObserver', class {
            constructor(callback) { callbacks.push(callback); }
            observe = vi.fn();
            unobserve = vi.fn();
            disconnect = vi.fn();
        });
        try {
            await renderPage();
            const card = (slot) => screen.getByText(`POINTS.SLOTS.${slot}`).closest('[data-slot="card"]');
            const cover = within(card('COMPLETED_EFFECT')).getByText('POINTS.ITEMS.FX_GOLD_SHINE').closest('li').firstChild;
            const banner = card('BANNER_BACKGROUND').querySelector('[data-effect="grid"]').parentElement;
            expect(cover.classList.contains('fx-paused')).toBe(false);
            act(() => callbacks[0]([{target: cover, isIntersecting: false}, {target: banner, isIntersecting: false}]));
            expect(cover.classList.contains('fx-paused')).toBe(true);
            expect(banner.classList.contains('fx-paused')).toBe(true);
            act(() => callbacks[0]([{target: cover, isIntersecting: true}]));
            expect(cover.classList.contains('fx-paused')).toBe(false);
        } finally {
            vi.unstubAllGlobals();
        }
    });
    it('groups the catalog by slot and disables Buy below the price', async () => {
        await renderPage();
@@ -10,7 +10,7 @@ import {cn} from '@/lib/utils';
 import GameCover from '../components/GameCover.jsx';
 import GameStatusBadge, {STATUS_META} from '../components/GameStatusBadge.jsx';
 import {formatDay} from '../utils/format.js';
-import {equippedAccent, lookClass} from '../utils/rewards.js';
+import {backgroundEffect, bannerEffect, coverEffect, equippedAccent, lookClass} from '../utils/rewards.js';
 import PointsBadge from '../components/PointsBadge.jsx';
 import {GAME_STATUSES} from '../utils/limits.js';
 import {formatPlaytime} from '../utils/games.js';
@@ -135,7 +135,7 @@ export default function PublicProfilePage() {
                return library.playing?.length > 0
                    && <Playing games={library.playing.slice(0, PLAYING_GAMES[size])} compact={size === 'S'}/>;
            case 'FINISHED':
-                return library.finished?.length > 0 && <Finished games={library.finished.slice(0, FINISHED_GAMES[size])}/>;
+                return library.finished?.length > 0 && <Finished games={library.finished.slice(0, FINISHED_GAMES[size])} equipped={equipped}/>;
            default: return statGroupTile(id, library.stats, false);
        }
    };
@@ -153,10 +153,10 @@ export default function PublicProfilePage() {
    // The owner's accent and corners apply to this page only; light or dark mode stays the viewer's.
    return (
        <div data-accent={equippedAccent(equipped) ?? style.accent} data-corners={style.corners}>
-            <PageBackground appid={style.backgroundAppid}/>
+            <PageBackground appid={style.backgroundAppid} effect={backgroundEffect(equipped)}/>
            <PageContainer className="p-4 md:p-8 space-y-6">
                <Card className={cn('relative overflow-hidden p-6 md:p-8', lookClass(equipped, 'BANNER_FRAME'))}>
-                    <HeroBanner appid={style.bannerAppid}/>
+                    <HeroBanner appid={style.bannerAppid} effect={bannerEffect(equipped)}/>
                    <div className="relative">
                        <p className="text-sm font-medium text-muted-foreground">{t('PROFILE.TITLE')}</p>
                        <h1 className="mt-1 text-3xl md:text-4xl font-bold tracking-tight break-words">{profile.displayName}</h1>
@@ -247,7 +247,7 @@ function Playing({games, compact}) {
    );
 }
-function Finished({games}) {
+function Finished({games, equipped}) {
    const {t} = useTranslation();
    return (
        <Card className="gap-0 py-0">
@@ -257,7 +257,8 @@ function Finished({games}) {
            <ul className="divide-y">
                {games.map((g) => (
                    <li key={g.appid} className="flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-3">
-                        <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"/>
                        <span className="min-w-0 flex-1 truncate font-medium">{g.name ?? `App ${g.appid}`}</span>
                        {g.rating && (
                            <span className="flex items-center gap-0.5" aria-label={t('BACKLOG.RATING_STARS', {count: g.rating})}>
@@ -44,6 +44,17 @@ describe('PublicProfilePage', () => {
        expect(fetch.mock.calls[2][1].headers['X-Profile-Ticket']).toBe('the-ticket');
    });
    it('wears the effects of the owner: background, banner and the cover of a COMPLETED game', async () => {
        mockBackends({style: {accent: 'red'}, equipped: {
            PAGE_BACKGROUND: 'BG_STARFIELD', BANNER_BACKGROUND: 'BN_WAVES', COMPLETED_EFFECT: 'FX_NEON_PULSE'}});
        const {container} = renderPage();
        expect(await screen.findByText('Portal 2')).toBeTruthy();
        await waitFor(() => expect(container.querySelector('[data-effect="starfield"]')).not.toBeNull());
        expect(screen.getByText('Lobo').closest('[data-slot="card"]').querySelector('[data-effect="waves"]')).not.toBeNull();
        expect(screen.getByText('Portal 2').closest('li').querySelector('.fx-cover-neon-pulse')).not.toBeNull();
    });
    it('still shows the profile when the looks call fails', async () => {
        mockBackends({style: {accent: 'red'}, rewardsStatus: 500});
        renderPage();
@@ -31,6 +31,7 @@ const authRoutes = (me) => ({
    'PUT /api/users/settings/appearance': noBody,
    'PUT /api/users/settings/profile-style': noBody,
    'PUT /api/users/settings/favorite-platform': noBody,
    'PUT /api/users/settings/platform-mails': noBody,
    'GET /api/version': json(404, {}),
 });
@@ -186,11 +187,20 @@ describe('SettingsPage appearance', () => {
        fireEvent.click(appearanceCard().getByRole('button', {name: 'SETTINGS.CORNER_OPTIONS.ROUND'}));
        await waitFor(() => expect(appearancePuts()).toHaveLength(2));
-        expect(appearancePuts()[1]).toEqual({accent: 'green', corners: 'round', wideLayout: false, backgroundAppid: null, bannerAppid: null, showBanner: true});
+        expect(appearancePuts()[1]).toEqual({accent: 'green', corners: 'round', wideLayout: false, backgroundAppid: null, bannerAppid: null, showBanner: true, reduceMotion: false});
        expect(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.GREEN'}).getAttribute('aria-pressed')).toBe('true');
        expect(appearanceCard().getByRole('button', {name: 'SETTINGS.ACCENT_OPTIONS.VIOLET'}).getAttribute('aria-pressed')).toBe('false');
    });
    it('saves the reduce animations switch', async () => {
        renderPage(profile());
        fireEvent.click(await screen.findByRole('switch', {name: 'SETTINGS.REDUCE_MOTION'}));
        await waitFor(() => expect(appearancePuts()).toHaveLength(1));
        expect(appearancePuts()[0].reduceMotion).toBe(true);
    });
    it('removes the background', async () => {
        localStorage.setItem('tbp_appearance', JSON.stringify({backgroundAppid: 620}));
        renderPage(profile());
@@ -247,6 +257,29 @@ describe('SettingsPage favorite platform', () => {
    });
 });
 describe('SettingsPage platform mails', () => {
    beforeEach(() => localStorage.setItem('tbp_session', '1'));
    afterEach(() => {
        cleanup();
        localStorage.clear();
    });
    it('is on by default and saves the opt-out', async () => {
        toast.success.mockClear();
        renderPage(profile());
        const mails = await screen.findByRole('switch', {name: 'SETTINGS.PLATFORM_MAILS'});
        expect(mails.getAttribute('aria-checked')).toBe('true');
        fireEvent.click(mails);
        await waitFor(() => expect(puts()).toEqual([{enabled: false}]));
        expect(fetch.mock.calls.find(([, init]) => init?.method === 'PUT')[0]).toContain('/api/users/settings/platform-mails');
        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('SETTINGS.SAVED'));
        expect(mails.getAttribute('aria-checked')).toBe('false');
    });
 });
 describe('SettingsPage session', () => {
    beforeEach(() => localStorage.setItem('tbp_session', '1'));
@@ -1,5 +1,6 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "./effects.css";
@import "@fontsource-variable/inter";
@custom-variant dark (&:is(.dark *));
@@ -0,0 +1,9 @@
 import {useEffect} from 'react';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 /** Loads the preferences and the wallet like App does after the login, so a page under test sees the worn looks. */
 export default function WalletLoader() {
    const {syncPreferences} = usePreferences();
    useEffect(() => { syncPreferences(); }, [syncPreferences]);
    return null;
 }
@@ -9,6 +9,7 @@ export const CORNERS = ['sharp', 'default', 'round'];
 // bannerAppid null: the dashboard banner shows the game played most in the last two weeks.
 export const DEFAULT_APPEARANCE = {
    accent: 'violet', corners: 'default', wideLayout: false, backgroundAppid: null, bannerAppid: null, showBanner: true,
    reduceMotion: false,
 };
 export const appid = (value) => (Number.isInteger(value) && value > 0 ? value : null);
@@ -22,6 +23,7 @@ export const normalizeAppearance = (value) => ({
    backgroundAppid: appid(value?.backgroundAppid),
    bannerAppid: appid(value?.bannerAppid),
    showBanner: value?.showBanner !== false,
    reduceMotion: value?.reduceMotion === true,
 });
 /**
@@ -41,8 +43,14 @@ export const cacheAppearance = (appearance) => storage.set(STORAGE_KEY, JSON.str
 export const applyAppearance = (appearance, accentOverride = null, root = document.documentElement) => {
    root.dataset.accent = accentOverride ?? appearance.accent;
    root.dataset.corners = appearance.corners;
    root.toggleAttribute('data-reduce-motion', appearance.reduceMotion === true);
 };
 /** True when the system asks for reduced motion or the "Reduce animations" setting is on. */
 export const reduceMotion = () =>
    (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false)
    || document.documentElement.hasAttribute('data-reduce-motion');
 /**
 * PUT /api/users/settings/appearance on Auth. The caller handles the response status.
 */
@@ -1,22 +1,23 @@
 // @vitest-environment jsdom
-import {afterEach, describe, expect, it} from 'vitest';
+import {afterEach, describe, expect, it, vi} from 'vitest';
 import {
    applyAppearance,
    cacheAppearance,
    DEFAULT_APPEARANCE,
    normalizeAppearance,
    readCachedAppearance,
    reduceMotion,
 } from './appearance.js';
 describe('normalizeAppearance', () => {
    it('keeps known values', () => {
-        const appearance = {accent: 'blue', corners: 'round', wideLayout: true, backgroundAppid: 620, bannerAppid: 1086940, showBanner: false};
+        const appearance = {accent: 'blue', corners: 'round', wideLayout: true, backgroundAppid: 620, bannerAppid: 1086940, showBanner: false, reduceMotion: true};
        expect(normalizeAppearance(appearance)).toEqual(appearance);
    });
    it('replaces unknown or missing values with the defaults', () => {
-        expect(normalizeAppearance({accent: 'red;x', corners: 'pointy', wideLayout: 'yes', backgroundAppid: -1, bannerAppid: '620', showBanner: 'no'}))
+        expect(normalizeAppearance({accent: 'red;x', corners: 'pointy', wideLayout: 'yes', backgroundAppid: -1, bannerAppid: '620', showBanner: 'no', reduceMotion: 'yes'}))
            .toEqual(DEFAULT_APPEARANCE);
        expect(normalizeAppearance(null)).toEqual(DEFAULT_APPEARANCE);
        expect(normalizeAppearance({backgroundAppid: 1.5})).toEqual(DEFAULT_APPEARANCE);
@@ -27,9 +28,9 @@ describe('appearance cache', () => {
    afterEach(() => localStorage.clear());
    it('reads back what was cached', () => {
-        cacheAppearance({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: true});
+        cacheAppearance({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: true, reduceMotion: false});
-        expect(readCachedAppearance()).toEqual({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: true});
+        expect(readCachedAppearance()).toEqual({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: true, reduceMotion: false});
    });
    it('falls back to the defaults for a broken or empty cache', () => {
@@ -58,3 +59,41 @@ describe('applyAppearance', () => {
        expect(root.dataset.accent).toBe('gold');
    });
 });
 describe('reduce motion', () => {
    afterEach(() => {
        document.documentElement.removeAttribute('data-reduce-motion');
        vi.unstubAllGlobals();
    });
    const mediaQuery = (matches) => vi.stubGlobal('matchMedia', () => ({matches}));
    it('is set on the root by applyAppearance and removed again', () => {
        const root = document.createElement('html');
        applyAppearance({accent: 'blue', corners: 'default', reduceMotion: true}, null, root);
        expect(root.hasAttribute('data-reduce-motion')).toBe(true);
        applyAppearance({accent: 'blue', corners: 'default', reduceMotion: false}, null, root);
        expect(root.hasAttribute('data-reduce-motion')).toBe(false);
    });
    it('is on for the system media query', () => {
        mediaQuery(true);
        expect(reduceMotion()).toBe(true);
    });
    it('is on for the setting', () => {
        mediaQuery(false);
        document.documentElement.setAttribute('data-reduce-motion', '');
        expect(reduceMotion()).toBe(true);
    });
    it('is off for neither', () => {
        mediaQuery(false);
        expect(reduceMotion()).toBe(false);
    });
 });
@@ -0,0 +1,30 @@
 import {apiFetch} from './api.js';
 const AUTH = () => import.meta.env.VITE_API_URL;
 const JSON_HEADERS = {'Content-Type': 'application/json'};
 /**
 * PLATFORM_ADMIN only (403 otherwise): {results: [{id, subjectEn, subjectDe, bodyEn, bodyDe, createdBy, createdAt,
 * recipientCount, sentCount, failedCount}]}, newest first.
 */
 export const fetchBroadcasts = () => apiFetch(`${AUTH()}/api/admin/broadcasts`);
 /**
 * {count}: the active users with platform mails on, among `userIds`; all of them when `userIds` is null.
 */
 export const fetchRecipientCount = (userIds) =>
    apiFetch(`${AUTH()}/api/admin/broadcasts/recipient-count${userIds ? `?userIds=${userIds.join(',')}` : ''}`);
 /**
 * `broadcast` is {subjectEn, subjectDe, bodyEn, bodyDe, userIds}. 201 {recipientCount}, 409 NO_RECIPIENTS, or 400 for a
 * blank or too long field.
 */
 export const sendBroadcast = (broadcast) =>
    apiFetch(`${AUTH()}/api/admin/broadcasts`, {method: 'POST', headers: JSON_HEADERS, body: JSON.stringify(broadcast)});
 /**
 * 204: the draft goes to the admin's own address only, in the admin's language.
 */
 export const sendTestBroadcast = (broadcast) =>
    apiFetch(`${AUTH()}/api/admin/broadcasts/test`,
        {method: 'POST', headers: JSON_HEADERS, body: JSON.stringify(broadcast)});
@@ -33,3 +33,6 @@ export const MAX_HINT_LENGTH = 500;
 // Auth NewsRequest @Size(max = 100) and @Size(max = 2000)
 export const MAX_NEWS_TITLE_LENGTH = 100;
 export const MAX_NEWS_TEXT_LENGTH = 2000;
 // Auth BroadcastRequest @Size(max = 150) and @Size(max = 5000)
 export const MAX_BROADCAST_SUBJECT_LENGTH = 150;
 export const MAX_BROADCAST_BODY_LENGTH = 5000;
@@ -1,10 +1,11 @@
 import {Swords, Trophy} from 'lucide-react';
 import {apiFetch, request} from './api.js';
 import {storage} from './storage.js';
 const REWARDS_URL = `${import.meta.env.VITE_CORE_API_URL}/api/rewards`;
 const JSON_HEADERS = {'Content-Type': 'application/json'};
-export const SLOTS = ['AVATAR_BORDER', 'BADGE', 'ACCENT', 'BANNER_FRAME'];
+export const SLOTS = ['AVATAR_BORDER', 'BADGE', 'ACCENT', 'BANNER_FRAME', 'COMPLETED_EFFECT', 'PAGE_BACKGROUND', 'BANNER_BACKGROUND'];
 // The shop catalog of Core (ShopItem) as looks: only these classes are ever applied, never a string from the server.
 // An unknown code is skipped.
@@ -17,6 +18,28 @@ export const LOOKS = {
    ACCENT_TEAL: {accent: 'teal'},
    FRAME_GOLD: {className: 'ring-2 ring-amber-400 ring-offset-2 ring-offset-background'},
    FRAME_NEON: {className: 'ring-2 ring-fuchsia-500 ring-offset-2 ring-offset-background shadow-[0_0_14px] shadow-fuchsia-500/60'},
    // Completed effects (effects.css): `cover` is the class set of a tile, `detail` the decoration of the details page.
    FX_GOLD_SHINE: {cover: 'fx fx-cover-gold-shine outline outline-2 -outline-offset-2 outline-amber-400', detail: 'fx-detail-gold-shine'},
    FX_NEON_PULSE: {cover: 'fx fx-cover-neon-pulse outline outline-2 -outline-offset-2 outline-primary', detail: 'fx-detail-neon-pulse'},
    FX_HOLO: {cover: 'fx fx-cover-holo', detail: 'fx-detail-holo'},
    FX_EMBER: {cover: 'fx fx-cover-ember', detail: 'fx-detail-ember'},
    // Page and banner backgrounds: BG_ and BN_ of a name share one engine (components/EffectBackground.jsx).
    BG_TRIANGLES: {effect: 'triangles'},
    BG_STARFIELD: {effect: 'starfield'},
    BG_PIXELS: {effect: 'pixels'},
    BG_AURORA: {effect: 'aurora'},
    BG_MESH: {effect: 'mesh'},
    BG_GRID: {effect: 'grid'},
    BG_WAVES: {effect: 'waves'},
    BG_BOKEH: {effect: 'bokeh'},
    BN_TRIANGLES: {effect: 'triangles'},
    BN_STARFIELD: {effect: 'starfield'},
    BN_PIXELS: {effect: 'pixels'},
    BN_AURORA: {effect: 'aurora'},
    BN_MESH: {effect: 'mesh'},
    BN_GRID: {effect: 'grid'},
    BN_WAVES: {effect: 'waves'},
    BN_BOKEH: {effect: 'bokeh'},
 };
 /** The premium accent worn, or null (then the appearance accent applies). */
@@ -25,12 +48,41 @@ export const equippedAccent = (equipped) => LOOKS[equipped?.ACCENT]?.accent ?? n
 /** The classes of the item worn in a slot, or undefined. */
 export const lookClass = (equipped, slot) => LOOKS[equipped?.[slot]]?.className;
 // Only a COMPLETED game shows the completed effect (FINISHED is not 100 %).
 const completedLook = (equipped, status) => (status === 'COMPLETED' ? LOOKS[equipped?.COMPLETED_EFFECT] : undefined);
 /** The cover classes of the completed effect worn, or undefined. */
 export const coverEffect = (equipped, status) => completedLook(equipped, status)?.cover;
 /** The details page decoration class of the completed effect worn, or undefined. */
 export const detailEffect = (equipped, status) => completedLook(equipped, status)?.detail;
 /** The effect name of the page background worn, or null (then the game art applies). */
 export const backgroundEffect = (equipped) => LOOKS[equipped?.PAGE_BACKGROUND]?.effect ?? null;
 /** The effect name of the banner background worn, or null. */
 export const bannerEffect = (equipped) => LOOKS[equipped?.BANNER_BACKGROUND]?.effect ?? null;
 /** The badge worn: `{code, Icon, className}` or null. */
 export const equippedBadge = (equipped) => {
    const look = LOOKS[equipped?.BADGE];
    return look?.Icon ? {code: equipped.BADGE, ...look} : null;
 };
 const EQUIPPED_STORAGE_KEY = 'tbp_equipped';
 /** The last known worn looks, so the first paint does not flash the item 10 art before the wallet answers. */
 export const readCachedEquipped = () => {
    try {
        const value = JSON.parse(storage.get(EQUIPPED_STORAGE_KEY));
        return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
    } catch {
        return {};
    }
 };
 export const cacheEquipped = (equipped) => storage.set(EQUIPPED_STORAGE_KEY, JSON.stringify(equipped));
 /** GET /api/rewards/wallet on Core: `{ok, status, data}`. Data is the balance, catalog, owned codes, worn looks and history. */
 export const loadWallet = () => request(`${REWARDS_URL}/wallet`);
@@ -0,0 +1,26 @@
 import {describe, expect, it} from 'vitest';
 import {backgroundEffect, bannerEffect, coverEffect, detailEffect, LOOKS} from './rewards.js';
 describe('effects worn', () => {
    const equipped = {COMPLETED_EFFECT: 'FX_GOLD_SHINE', PAGE_BACKGROUND: 'BG_STARFIELD', BANNER_BACKGROUND: 'BN_WAVES'};
    it('shows the completed effect only on a COMPLETED game', () => {
        expect(coverEffect(equipped, 'COMPLETED')).toContain('fx-cover-gold-shine');
        expect(detailEffect(equipped, 'COMPLETED')).toBe('fx-detail-gold-shine');
        expect(coverEffect(equipped, 'FINISHED')).toBeUndefined();
        expect(detailEffect(equipped, 'FINISHED')).toBeUndefined();
    });
    it('ignores an unknown or missing code', () => {
        expect(coverEffect({COMPLETED_EFFECT: 'FX_FUTURE'}, 'COMPLETED')).toBeUndefined();
        expect(coverEffect(undefined, 'COMPLETED')).toBeUndefined();
        expect(backgroundEffect({PAGE_BACKGROUND: 'BG_FUTURE'})).toBeNull();
        expect(bannerEffect({})).toBeNull();
    });
    it('maps a background and a banner of one name to the same engine', () => {
        expect(backgroundEffect(equipped)).toBe('starfield');
        expect(bannerEffect(equipped)).toBe('waves');
        expect(LOOKS.BG_GRID.effect).toBe(LOOKS.BN_GRID.effect);
    });
 });
@@ -58,3 +58,11 @@ export const markWelcomeSeen = () =>
        method: 'PUT',
        signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
    });
 /** PUT on Auth, 204: turns the broadcast mails on or off. The caller handles the response status. */
 export const savePlatformMails = (enabled) =>
    apiFetch(`${import.meta.env.VITE_API_URL}/api/users/settings/platform-mails`, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({enabled}),
    });
Author	SHA1	Message	Date
lobo	249973dd69	feat(points): apply worn effects on covers, details and backgrounds Build, Test & Push Frontend / docker (push) Successful in 27s Details Build, Test & Push Frontend / quality-check (push) Successful in 28s Details	2026-10-01 15:09:25 +02:00
lobo	dd45c0b5f6	feat(points): add effect engines and effects shop	2026-10-01 15:09:25 +02:00
lobo	2ec5833f29	feat(settings): reduce animations switch	2026-10-01 15:09:25 +02:00
lobo	fa0857f55d	feat(broadcasts): add admin broadcast page and user opt-out switch Admin page /admin/broadcasts to write, test and send broadcasts in both languages; confirms the recipient count before send. History shows the counts. A new switch in settings lets users opt out of platform mails; account mails always come. Subject and body are plain text only.	2026-10-01 14:12:34 +02:00