feat: mobile nav, radio layout/requests, leaderboard tabs, client i18n, habbo background, navbar fixes

src/components/language-switcher.tsx

@@ -58,15 +58,15 @@ export function LanguageSwitcher() {
 
       {open && (
         <div
-          className="absolute right-0 mt-1 min-w-[160px] rounded-md shadow-lg z-50 py-1"
-          style={{ backgroundColor: "var(--color-dropdown)" }}
+          className="absolute right-0 mt-1 min-w-[160px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+          style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
         >
           {LOCALES.map((l) => (
             <button
               key={l.code}
               type="button"
               onClick={() => switchLocale(l.code)}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-semibold transition-colors ${
+              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-all duration-100 rounded-lg mx-1 ${
                 l.code === locale ? "opacity-100" : "opacity-70 hover:opacity-100"
               }`}
               style={{
@@ -74,6 +74,15 @@ export function LanguageSwitcher() {
                 background: "none",
                 border: "none",
                 cursor: "pointer",
+                width: "calc(100% - 8px)",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--color-primary) 10%, transparent)";
+                e.currentTarget.style.color = "var(--color-primary)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.color = "var(--color-text)";
               }}
             >
               <img