feat: phase 3 redesign, game images, auth system, vm guides, service isolation

- Redesign all internal pages to warm/gold aesthetic (catalog, game detail,
  documentary, about, donate, community, guides, contact, server-status,
  login, profile, admin, not-found)
- Add real cover images for all 4 games via Strapi CMS with getImageUrl helper
- Integrate NextAuth v5 with Authentik OIDC authentication
- Add new public pages: community, guides, contact, server-status
- Add new protected pages: login, profile, admin dashboard
- Remove legacy AFC/MercadoPago system entirely
- Add Docker Compose split files for service isolation (main, auth, fusionfall, nier)
- Add OpenFusion VM deployment configs (config.vm.ini, systemd service, README-VM)
- Add NieR Reincarnation server guide and desktop client guide
- Add architecture docs for multi-VM deployment
- Add healthcheck, SSE, contact, newsletter, admin API routes
- Add reusable UI components, skeleton loaders, activity feed, bookmark system
- Update deployment and game server documentation

apps/web/src/components/documentary/AudioPlayer.tsx

@@ -42,11 +42,11 @@ export function AudioPlayer({
   const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gray-900/95 backdrop-blur-sm border-t border-white/10">
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0f]/95 backdrop-blur-sm border-t border-[rgba(255,255,255,0.08)]">
       <div className="max-w-7xl mx-auto px-4 py-3">
         {/* Progress bar */}
         <div
-          className="w-full h-1 bg-gray-700 rounded-full mb-3 cursor-pointer"
+          className="w-full h-1 bg-[#1a1a24] rounded-full mb-3 cursor-pointer"
           onClick={(e) => {
             const rect = e.currentTarget.getBoundingClientRect();
             const ratio = (e.clientX - rect.left) / rect.width;
@@ -54,7 +54,7 @@ export function AudioPlayer({
           }}
         >
           <div
-            className="h-full bg-blue-500 rounded-full transition-all"
+            className="h-full bg-[#d4a574] rounded-full transition-all"
             style={{ width: `${progressPercent}%` }}
           />
         </div>
@@ -63,7 +63,7 @@ export function AudioPlayer({
           {/* Play/Pause */}
           <button
             onClick={onToggle}
-            className="w-10 h-10 flex items-center justify-center bg-white rounded-full text-black hover:bg-gray-200 transition-colors"
+            className="w-10 h-10 flex items-center justify-center bg-[#d4a574] rounded-full text-[#0a0a0f] hover:bg-[#e8c4a0] transition-colors"
             aria-label={isPlaying ? t("pause") : t("play")}
           >
             {isPlaying ? "\u23F8" : "\u25B6"}
@@ -71,19 +71,19 @@ export function AudioPlayer({
 
           {/* Track info */}
           <div className="flex-1 min-w-0">
-            <p className="text-sm text-white truncate">{trackTitle}</p>
-            <p className="text-xs text-gray-500">
+            <p className="text-sm text-[#f5f5f7] truncate">{trackTitle}</p>
+            <p className="text-xs text-[#6b6b75]">
               {formatTime(progress)} / {formatTime(duration)}
             </p>
           </div>
 
           {/* Speed selector */}
           <div className="flex items-center gap-2">
-            <span className="text-xs text-gray-500">{t("speed")}:</span>
+            <span className="text-xs text-[#6b6b75]">{t("speed")}:</span>
             <select
               value={playbackRate}
               onChange={(e) => onChangeRate(Number(e.target.value))}
-              className="bg-gray-800 border border-white/10 rounded px-2 py-1 text-xs text-white"
+              className="bg-[#12121a] border border-[rgba(255,255,255,0.08)] rounded px-2 py-1 text-xs text-[#f5f5f7]"
             >
               {RATES.map((r) => (
                 <option key={r} value={r}>
@@ -98,8 +98,8 @@ export function AudioPlayer({
             onClick={onToggleContinuous}
             className={`text-xs px-3 py-1 rounded border transition-colors ${
               continuousMode
-                ? "border-blue-500 text-blue-400"
-                : "border-white/10 text-gray-500 hover:text-white"
+                ? "border-[#d4a574] text-[#d4a574]"
+                : "border-[rgba(255,255,255,0.08)] text-[#6b6b75] hover:text-[#a0a0a8]"
             }`}
           >
             {continuousMode ? t("continuous_mode") : t("chapter_mode")}