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

src/app/globals.css

@@ -110,16 +110,36 @@ body {
 /* ── Atom theme components ────────────────────────────────── */
 @layer components {
   .nav-item {
-    @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!;
-    color: var(--color-navbar-text, #1e293b);
+    @apply flex h-auto md:h-[54px] items-center text-[13px] font-bold transition-all duration-150 ease-in-out px-3 md:px-4 relative;
+    color: var(--color-navbar-text, #64748b);
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+  }
+  .nav-item::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) scaleX(0);
+    width: 70%;
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+    background-color: var(--color-primary, #eeb425);
+    transition: transform 0.2s ease-in-out;
+  }
+  .nav-item:hover::after {
+    transform: translateX(-50%) scaleX(1);
+  }
+  .nav-item:hover {
+    color: var(--color-primary, #eeb425);
   }
   .dropdown-item {
-    @apply block py-2 px-4 font-semibold transition duration-200;
+    @apply block py-2 px-4 text-sm font-semibold transition-all duration-100 rounded-lg mx-1;
     color: var(--color-text);
   }
   .dropdown-item:hover {
-    background-color: var(--color-primary, #eeb425);
-    color: var(--button-text-color, #1a1a2e);
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary, #eeb425);
   }
 }
 
@@ -164,10 +184,14 @@ body {
 }
 
 .site-bg {
-  background: url("/assets/images/background-light.jpg") no-repeat fixed right bottom;
+  background:
+    linear-gradient(to bottom, rgba(255,255,255,0.88), rgba(248,250,252,0.95)),
+    url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
 }
 .app.dark .site-bg {
-  background: url("/assets/images/background-dark.jpg") no-repeat fixed right bottom;
+  background:
+    linear-gradient(to bottom, rgba(15,17,23,0.92), rgba(15,17,23,0.97)),
+    url("/assets/images/background-dark.jpg") no-repeat fixed center / cover;
 }
 
 .article-body {
@@ -858,3 +882,53 @@ td {
   background: color-mix(in srgb, #f97316 20%, transparent);
   border-color: #f97316;
 }
+
+/* ── Radio sidebar ──────────────────────────────────────────── */
+.radio-layout {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+.radio-sidebar {
+  flex: none;
+  width: 200px;
+  position: sticky;
+  top: 5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.radio-sidebar-link:hover {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  text-decoration: none;
+}
+@media (max-width: 48rem) {
+  .radio-layout {
+    flex-direction: column;
+  }
+  .radio-sidebar {
+    position: static;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
+    overflow-x: auto;
+  }
+  .radio-sidebar-head {
+    display: none;
+  }
+  .radio-sidebar-link {
+    font-size: 0.82rem;
+    padding: 0.35rem 0.6rem;
+    white-space: nowrap;
+  }
+}
+
+/* ── Skeleton shimmer animation ─────────────────────────────── */
+@keyframes shimmer {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}