One consistent top bar across the whole hub (HubBar everywhere)

There were three different top bars (home3/detail vs /play vs /art). Unify on the
shared HubBar:
- HubBar is now fully self-contained (own @font-face + hardcoded hub colors) so it
  renders identically regardless of the host page's tokens/fonts.
- /art: dropped its bespoke gallery bar for <HubBar active="art" />.
- /play: dropped its bar for <HubBar active="games" />; the contextual in-game
  step-back (Game Selection / Play Hub) moves into the page body as a secondary
  ".gameback" control, shown only in game views (the global nav is in HubBar).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/art/+page.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { getJSON } from '$lib/api.js';
   import { afterNavigate, goto } from '$app/navigation';
+  import HubBar from '$lib/components/HubBar.svelte';
 
   // Virtual frames the viewer can switch between — remembered locally, no account needed.
   const FRAMES = [
@@ -86,23 +87,7 @@
 {/snippet}
 
 <div class="room">
-  <header class="bar">
-    <a class="brand" href="/" aria-label="upbeatBytes home">
-      <img src="/logo.svg" alt="upbeatBytes" width="586" height="196" />
-    </a>
-    <nav class="nav">
-      <a href="/">News</a>
-      <a href="/play">Games</a>
-      <a href="/art" aria-current="page">Art</a>
-      <a class="acct" href="/account" aria-label="Your account">
-        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
-             stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <circle cx="12" cy="8" r="3.3" />
-          <path d="M5.5 19.2a6.5 6.5 0 0 1 13 0" />
-        </svg>
-      </a>
-    </nav>
-  </header>
+  <HubBar active="art" />
 
   <main class="gallery">
     <button class="back" onclick={goBack} aria-label="Go back">
@@ -204,23 +189,6 @@
     flex-direction: column;
   }
 
-  .bar {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 14px clamp(16px, 5vw, 56px);
-    max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box;
-  }
-  .brand { display: block; line-height: 0; }
-  .brand img { height: 34px; width: auto; display: block; }
-  .nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 26px); }
-  .nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
-  .nav a:hover { color: var(--ink); }
-  .nav a[aria-current="page"] { color: var(--accent); }
-  .acct {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 38px; height: 38px; border-radius: 50%; color: var(--muted);
-  }
-  .acct:hover { color: var(--accent); background: #eef6f9; }
-
   .gallery {
     flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
     padding: clamp(6px, 1.5vw, 16px) clamp(20px, 5vw, 56px) clamp(20px, 5vw, 56px);