feat: implement initial language resolution for SSR and local storage support

- Added a function to determine the initial language based on server-side rendering and local storage.
- Updated i18n initialization to use the resolved initial language instead of the default.

src/components/layout/player-bottom-nav.tsx

@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation";
 import { BarChart3, ClipboardList, Home, Wallet } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
+import { playerViewportFixedBarClass } from "@/lib/player-viewport";
 import { cn } from "@/lib/utils";
 
 const tabs = [
@@ -48,10 +49,13 @@ export function PlayerBottomNav() {
 
   return (
     <nav
-      className="fixed bottom-0 left-0 right-0 z-50 border-t border-[#e4ebf5] bg-white/96 pb-[env(safe-area-inset-bottom,0px)] shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md"
+      className={cn(
+        playerViewportFixedBarClass,
+        "bottom-0 border-t border-[#e4ebf5] bg-white/96 pb-[env(safe-area-inset-bottom,0px)] shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur-md",
+      )}
       aria-label={t("nav.aria")}
     >
-      <div className="mx-auto grid h-14 w-full max-w-lg grid-rows-1 grid-cols-4">
+      <div className="grid h-14 w-full grid-cols-4 grid-rows-1">
         {tabs.map(({ href, labelKey, labelDefault, icon: Icon, match }) => {
           const active = match(pathname);
           const label = t(labelKey, { defaultValue: labelDefault });