feat(ui): add the ToBePlayed logo and name

The logo is a traced SVG whose colors follow the accent color;
violet shows it as designed. Favicon, PWA and Apple icons use
it with fixed colors. The header and landing page say
ToBePlayed instead of Game Log. Below 380 px the header shows
only the logo, and the home link keeps its name for screen
readers.

src/pages/LandingPage.jsx

@@ -9,6 +9,7 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
 import GameCover from '../components/GameCover.jsx';
+import Logo from '../components/Logo.jsx';
 import StatCard from '../components/StatCard.jsx';
 import {hasSession} from '../utils/auth.js';
 
@@ -59,7 +60,7 @@ export default function LandingPage() {
                 <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-primary/15 via-primary/5 to-transparent"/>
                 <div className="relative mx-auto max-w-3xl px-4 py-20 text-center md:py-28">
                     <Badge variant="outline" className="mb-6 gap-1.5 bg-background/60">
-                        <Gamepad2 className="size-3 text-primary"/> Game Log
+                        <span className="flex"><Logo className="h-4 w-auto"/></span> ToBePlayed
                     </Badge>
                     <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{t('MAIN.WELCOME')}</h1>
                     <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">{t('MAIN.DESCRIPTION')}</p>