feat(effects): polish 8 effects and add 7 new engines with parallax

Synthwave, fireflies, snow, sakura, nebula: CSS/SVG. Matrix and
constellation: canvas. Existing engines gain depth, color, glow, and
parallax (mouse and device tilt, opt-in on iOS)

src/components/AppearanceCard.jsx

@@ -1,3 +1,4 @@
+import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {ImageOff, Palette, RotateCcw} from 'lucide-react';
 
@@ -10,11 +11,27 @@ import {equippedSkin} from '../utils/rewards.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
 import {coverUrl} from '../utils/games.js';
+import {disableTilt, requestTilt, tiltAllowed, tiltNeedsPermission} from '../utils/parallax.js';
 
 export default function AppearanceCard() {
     const {t} = useTranslation();
     const {appearance, equipped} = usePreferences();
     const saveAppearance = useSaveAppearance();
+    const [tilt, setTilt] = useState(tiltAllowed);
+    const [tiltRefused, setTiltRefused] = useState(false);
+
+    // requestTilt() starts inside the tap, as iOS demands.
+    const changeTilt = (on) => {
+        if (!on) {
+            disableTilt();
+            setTilt(false);
+            return;
+        }
+        requestTilt().then((granted) => {
+            setTilt(granted);
+            setTiltRefused(!granted);
+        });
+    };
 
     return (
         <Card>
@@ -41,6 +58,18 @@ export default function AppearanceCard() {
                     <Switch id="reduceMotion" checked={appearance.reduceMotion}
                             onCheckedChange={(reduceMotion) => saveAppearance({reduceMotion})}/>
                 </div>
+                {tiltNeedsPermission() && (
+                    <div className="flex items-center justify-between gap-4">
+                        <div className="space-y-1">
+                            <Label htmlFor="tilt">{t('SETTINGS.TILT')}</Label>
+                            <p className="text-xs text-muted-foreground">
+                                {t(tiltRefused ? 'SETTINGS.TILT_DENIED' : 'SETTINGS.TILT_HINT')}
+                            </p>
+                        </div>
+                        <Switch id="tilt" checked={tilt} disabled={appearance.reduceMotion}
+                                onCheckedChange={changeTilt}/>
+                    </div>
+                )}
                 <div className="flex items-center justify-between gap-4">
                     <div className="space-y-1">
                         <Label id="background-label">{t('SETTINGS.BACKGROUND')}</Label>