feat: add floating music player with per-language theme songs

Add a MusicPlayer Vue component that plays background music based on
the current locale (Dynasty for zh, Dominion for en, Dreams Collide
for ja). The player auto-plays on load, persists play/pause state to
localStorage, and retries on first user interaction when the browser
blocks autoplay. Also switch body font to Geist Sans.

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

Author: Kosthi

public/RushDB_Dominion.mp3

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import { ui, type Lang } from '../../i18n/ui';
+
+const props = defineProps<{
+  lang: Lang;
+}>();
+
+const translations = ui[props.lang];
+const isPlaying = ref(false);
+const audioRef = ref<HTMLAudioElement | null>(null);
+
+const musicSrc: Record<Lang, string> = {
+  zh: '/RushDB_Dynasty.mp4',
+  en: '/RushDB_Dominion.mp3',
+  ja: '/RushDB_Dreams_Collide.mp3',
+};
+
+const STORAGE_KEY = 'rushdb-music-playing';
+
+function toggle() {
+  const audio = audioRef.value;
+  if (!audio) return;
+
+  if (isPlaying.value) {
+    audio.pause();
+    isPlaying.value = false;
+  } else {
+    audio.play().then(() => {
+      isPlaying.value = true;
+    }).catch(() => {
+      isPlaying.value = false;
+    });
+  }
+
+  try {
+    localStorage.setItem(STORAGE_KEY, String(isPlaying.value));
+  } catch {}
+}
+
+function onAudioEnded() {
+  const audio = audioRef.value;
+  if (audio) {
+    audio.currentTime = 0;
+    audio.play().catch(() => {
+      isPlaying.value = false;
+    });
+  }
+}
+
+onMounted(() => {
+  const audio = audioRef.value;
+  if (!audio) return;
+
+  audio.volume = 0.5;
+
+  // Autoplay unless user explicitly paused before
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'false') return;
+  } catch {}
+
+  audio.play().then(() => {
+    isPlaying.value = true;
+  }).catch(() => {
+    // Browser blocked autoplay; retry on first user interaction
+    isPlaying.value = false;
+    const resumeOnce = () => {
+      audio.play().then(() => {
+        isPlaying.value = true;
+        try { localStorage.setItem(STORAGE_KEY, 'true'); } catch {}
+      }).catch(() => {});
+      document.removeEventListener('click', resumeOnce);
+      document.removeEventListener('touchstart', resumeOnce);
+      document.removeEventListener('keydown', resumeOnce);
+    };
+    document.addEventListener('click', resumeOnce, { once: true });
+    document.addEventListener('touchstart', resumeOnce, { once: true });
+    document.addEventListener('keydown', resumeOnce, { once: true });
+  });
+});
+
+onUnmounted(() => {
+  const audio = audioRef.value;
+  if (audio) {
+    audio.pause();
+  }
+});
+</script>
+
+<template>
+  <button
+    class="music-player"
+    :class="{ 'is-playing': isPlaying }"
+    type="button"
+    :aria-label="translations.a11y.musicToggle"
+    @click="toggle"
+  >
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6Z" />
+    </svg>
+  </button>
+  <audio ref="audioRef" preload="auto" :src="musicSrc[lang]" @ended="onAudioEnded" />
+</template>

public/RushDB_Dreams_Collide.mp3

@@ -196,6 +196,7 @@ export const ui = {
       scrollProgress: '页面滚动进度',
       mainNavigation: '主导航',
       backToTop: '返回顶部',
+      musicToggle: '播放/暂停背景音乐',
     },
     blog: {
       title: '博客',
@@ -404,6 +405,7 @@ export const ui = {
       scrollProgress: 'Page scroll progress',
       mainNavigation: 'Main navigation',
       backToTop: 'Back to top',
+      musicToggle: 'Toggle background music',
     },
     blog: {
       title: 'Blog',
@@ -612,6 +614,7 @@ export const ui = {
       scrollProgress: 'ページスクロール進捗',
       mainNavigation: 'メインナビゲーション',
       backToTop: 'トップへ戻る',
+      musicToggle: 'BGMの再生/一時停止',
     },
     blog: {
       title: 'ブログ',

public/RushDB_Dynasty.mp4

@@ -3,6 +3,7 @@ import '../styles/global.css';
 import { getI18n, type Lang } from '../i18n';
 import NavBar from '../components/vue/NavBar.vue';
 import BackToTop from '../components/vue/BackToTop.vue';
+import MusicPlayer from '../components/vue/MusicPlayer.vue';
 
 interface Props {
   title: string;
@@ -61,7 +62,7 @@ const metaDescription = description || descriptions[lang];
     <meta name="theme-color" content="#050712" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#fdf6e3" media="(prefers-color-scheme: light)" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
       rel="stylesheet"
     />
 
@@ -152,6 +153,7 @@ const metaDescription = description || descriptions[lang];
     <slot />
 
     <BackToTop client:idle lang={lang} />
+    <MusicPlayer client:idle lang={lang} />
 
     <script is:inline>
       document.documentElement.classList.add('js');

public/fonts/GeistVF.woff2

@@ -1,5 +1,13 @@
       @import './theme-tokens.css';
 
+      @font-face {
+        font-family: "Geist Sans";
+        src: url("/fonts/GeistVF.woff2") format("woff2");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+
       :root {
         /* Typography Scale - 1.25 ratio (Major Third) */
         --text-xs: 0.75rem;
@@ -113,7 +121,7 @@
       }
 
       body {
-        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+        font-family: "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, sans-serif;
         background: var(--bg-primary);
         color: var(--text-primary);
@@ -2542,6 +2550,54 @@
         }
       }
 
+      /* Music Player */
+      .music-player {
+        position: fixed;
+        bottom: 2rem;
+        left: 2rem;
+        z-index: 1000;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: var(--accent-gradient);
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: var(--shadow-lg);
+        transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
+        animation: fadeInUp 0.3s ease;
+      }
+
+      .music-player:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 12px 40px rgba(34, 211, 238, 0.4);
+      }
+
+      .music-player:active {
+        transform: translateY(-2px);
+      }
+
+      .music-player.is-playing {
+        animation: spin 3s linear infinite;
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      @media (max-width: 768px) {
+        .music-player {
+          bottom: 1.5rem;
+          left: 1.5rem;
+          width: 44px;
+          height: 44px;
+        }
+      }
+
       @media (prefers-reduced-motion: reduce) {
         * {
           animation: none !important;