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/components/AppHeader.jsx

@@ -1,6 +1,6 @@
 import {Link, NavLink, useLocation} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {Dices, Gamepad2, Languages, LayoutDashboard, Library, LogOut, Moon, Settings, Sun} from 'lucide-react';
+import {Dices, Languages, LayoutDashboard, Library, LogOut, Moon, Settings, Sun} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {
@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import {usePreferences} from '@/context/PreferencesContext.jsx';
 import {cn} from '@/lib/utils';
+import Logo from './Logo.jsx';
 import PageContainer from './PageContainer.jsx';
 import SteamAvatar from './SteamAvatar.jsx';
 import useSteamProfile from '../hooks/useSteamProfile.js';
@@ -43,11 +44,10 @@ export default function AppHeader({isAuthenticated, onLogout}) {
     return (
         <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
             <PageContainer className="flex h-16 items-center gap-2 px-4 md:px-8">
-                <Link to={isAuthenticated ? '/dashboard' : '/'} className="mr-2 flex items-center gap-2 font-bold tracking-tight whitespace-nowrap">
-                    <span className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                        <Gamepad2 className="size-5"/>
-                    </span>
-                    <span className="text-lg">Game Log</span>
+                <Link to={isAuthenticated ? '/dashboard' : '/'} aria-label="ToBePlayed" className="mr-2 flex items-center gap-2 font-bold tracking-tight whitespace-nowrap">
+                    <Logo className="h-8 w-auto shrink-0"/>
+                    {/* On a narrow phone the menu and buttons need the room; the logo alone stays. */}
+                    <span className="hidden text-lg min-[380px]:inline">ToBePlayed</span>
                 </Link>
 
                 {isAuthenticated && (