diff --git a/src/__tests__/GoogleOAuthButton.test.tsx b/src/__tests__/GoogleOAuthButton.test.tsx
index 4606ce5..5e84a46 100644
--- a/src/__tests__/GoogleOAuthButton.test.tsx
+++ b/src/__tests__/GoogleOAuthButton.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
 
 const MockApiError = vi.hoisted(() =>
   class extends Error {
@@ -24,11 +24,11 @@ vi.mock('@/lib/api-client', () => ({
   ApiError: MockApiError,
 }));
 
-// ── Import after mocks ────────────────────────────────────────────────────────
+// -- Import after mocks --------------------------------------------------------
 
 import { GoogleOAuthButton } from '@/features/auth/GoogleOAuthButton';
 
-// ── Google GIS mock helpers ───────────────────────────────────────────────────
+// -- Google GIS mock helpers ---------------------------------------------------
 
 function setupGoogleMock() {
   const mockPrompt = vi.fn();
@@ -56,7 +56,7 @@ afterEach(() => {
   clearGoogleMock();
 });
 
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
 
 describe('GoogleOAuthButton', () => {
   it('renders the Google sign-in button', () => {
diff --git a/src/__tests__/ResetPasswordPage.test.tsx b/src/__tests__/ResetPasswordPage.test.tsx
index 67528b8..93a2ce3 100644
--- a/src/__tests__/ResetPasswordPage.test.tsx
+++ b/src/__tests__/ResetPasswordPage.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { ResetPasswordPage } from '@/features/auth/ResetPasswordPage';
 
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
 
 const MockApiError = vi.hoisted(() =>
   class extends Error {
@@ -36,7 +36,7 @@ vi.mock('@/lib/routes', () => ({
   ROUTES: { login: '/login', dashboard: '/dashboard' },
 }));
 
-// ── Helpers ───────────────────────────────────────────────────────────────────
+// -- Helpers -------------------------------------------------------------------
 
 function renderPage(token = 'valid-token') {
   return render(<ResetPasswordPage token={token} />);
@@ -47,7 +47,7 @@ beforeEach(() => {
   mockResetPassword.mockResolvedValue(undefined);
 });
 
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
 
 describe('ResetPasswordPage', () => {
   it('renders the form with disabled submit when token is missing', () => {
diff --git a/src/__tests__/VerifyEmailConfirmPage.test.tsx b/src/__tests__/VerifyEmailConfirmPage.test.tsx
index fe87de7..f2c8a2a 100644
--- a/src/__tests__/VerifyEmailConfirmPage.test.tsx
+++ b/src/__tests__/VerifyEmailConfirmPage.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
 
 const MockApiError = vi.hoisted(() =>
   class extends Error {
@@ -35,7 +35,7 @@ vi.mock('@/lib/routes', () => ({
   ROUTES: { dashboard: '/dashboard', login: '/login', verifyEmail: '/verify-email' },
 }));
 
-// ── Import after mocks ────────────────────────────────────────────────────────
+// -- Import after mocks --------------------------------------------------------
 
 import { VerifyEmailConfirmPage } from '@/features/auth/VerifyEmailConfirmPage';
 
@@ -48,7 +48,7 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
 
 describe('VerifyEmailConfirmPage', () => {
   it('shows verifying spinner immediately', () => {
diff --git a/src/__tests__/mobileResponsive.test.ts b/src/__tests__/mobileResponsive.test.ts
new file mode 100644
index 0000000..5f95bdf
--- /dev/null
+++ b/src/__tests__/mobileResponsive.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const css = readFileSync(join(process.cwd(), 'src/styles/globals.css'), 'utf8');
+
+describe('mobile responsive safety rules', () => {
+  it('keeps app shell and page containers constrained on small screens', () => {
+    expect(css).toContain('max-width: 100vw');
+    expect(css).toContain('.app__main');
+    expect(css).toContain('min-width: 0');
+    expect(css).toContain('@media (max-width: 720px)');
+    expect(css).toContain('.app__sidebar { display: none; }');
+    expect(css).toContain('.bottomnav { display: flex; }');
+  });
+
+  it('stacks major desktop grids and converts wide rows for mobile', () => {
+    expect(css).toContain('.responsive-split');
+    expect(css).toContain('.responsive-sidebar');
+    expect(css).toContain('.responsive-room');
+    expect(css).toContain('grid-template-columns: minmax(0, 1fr) !important');
+    expect(css).toContain('.leaderboard-row');
+    expect(css).toContain('.match-history-row');
+    expect(css).toContain('.friends-row');
+  });
+
+  it('keeps dropdowns, modals, tabs, and toasts inside the viewport', () => {
+    expect(css).toContain('.dropdown-panel');
+    expect(css).toContain('max-width: calc(100vw - 24px)');
+    expect(css).toContain('.modal, .modal-lg');
+    expect(css).toContain('.tabs');
+    expect(css).toContain('overflow-x: auto');
+    expect(css).toContain('.toast-stack');
+  });
+});
diff --git a/src/__tests__/profileApi.test.ts b/src/__tests__/profileApi.test.ts
index 9302665..a76888b 100644
--- a/src/__tests__/profileApi.test.ts
+++ b/src/__tests__/profileApi.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
-// ── profileApi unit tests ─────────────────────────────────────────────────────
+// -- profileApi unit tests -----------------------------------------------------
 // Tests use fetch mocking to verify the API client builds correct requests.
 
 const mockFetch = vi.fn();
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 735a713..7f452a3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,28 +4,37 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import { ToastProvider } from '@/components/ui/Toast';
 import { AuthProvider } from '@/features/auth/AuthProvider';
+import { ThemeProvider } from '@/lib/theme';
 
 const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] });
 const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'SimPle — Social Gaming Platform',
+  title: 'SimPle - Social Gaming Platform',
   description: 'A premium social gaming platform. Play sharp little games with friends, climb leaderboards, and build your profile.',
 };
 
+const themeBootScript = `(function(){try{var s=localStorage.getItem('simple.theme');if(!s){s=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches)?'light':'dark';}document.documentElement.setAttribute('data-theme',s);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`;
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
       <body>
-        {/* Google Identity Services — loaded once for the whole app */}
+        <Script
+          id="simple-theme-boot"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{ __html: themeBootScript }}
+        />
         <Script
           id="google-gis"
           src="https://accounts.google.com/gsi/client"
           strategy="lazyOnload"
         />
-        <ToastProvider>
-          <AuthProvider>{children}</AuthProvider>
-        </ToastProvider>
+        <ThemeProvider>
+          <ToastProvider>
+            <AuthProvider>{children}</AuthProvider>
+          </ToastProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/src/components/friends/InviteFriendModal.tsx b/src/components/friends/InviteFriendModal.tsx
index 715d951..2a2f5bd 100644
--- a/src/components/friends/InviteFriendModal.tsx
+++ b/src/components/friends/InviteFriendModal.tsx
@@ -58,7 +58,7 @@ export function InviteFriendModal({ open, onClose, preselectedGameId }: Props) {
           <div className="row between" style={{ marginBottom:6 }}>
             <span className="label">Game</span>
           </div>
-          <div className="row" style={{ gap:6, flexWrap:'wrap' }}>
+          <div className="row mobile-wrap" style={{ gap:6, flexWrap:'wrap' }}>
             {GAMES.slice(0,6).map(g => (
               <button key={g.id} onClick={() => setGame(g.id)} className="chip" style={{
                 cursor:'pointer', height:30,
@@ -86,7 +86,7 @@ export function InviteFriendModal({ open, onClose, preselectedGameId }: Props) {
           ) : friends.map(f => {
             const on = picked.has(f.id);
             return (
-              <button key={f.id} onClick={() => toggle(f.id)} className="row" style={{ width:'100%', padding:'10px 12px', borderBottom:'1px solid var(--border-1)', background: on ? 'var(--red-soft)' : 'transparent', gap:12, textAlign:'left' }}>
+              <button key={f.id} onClick={() => toggle(f.id)} className="row mobile-wrap" style={{ width:'100%', padding:'10px 12px', borderBottom:'1px solid var(--border-1)', background: on ? 'var(--red-soft)' : 'transparent', gap:12, textAlign:'left' }}>
                 <Avatar user={f} showPresence size="sm" />
                 <div style={{ flex:1, minWidth:0 }}>
                   <div style={{ fontSize:13, fontWeight:600 }}>{f.display}</div>
diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index 1b14376..f5eeb38 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -1,22 +1,26 @@
 'use client';
-import React from 'react';
+import React, { useState } from 'react';
 import { Sidebar } from './Sidebar';
 import { Topbar } from './Topbar';
 import { BottomNav } from './BottomNav';
+import { MobileNavDrawer } from './MobileNavDrawer';
 
 export function AppShell({ children }: { children: React.ReactNode }) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
   return (
     <div className="app">
       <div className="app__sidebar">
         <Sidebar />
       </div>
       <header className="app__topbar">
-        <Topbar />
+        <Topbar onMenuClick={() => setDrawerOpen(true)} />
       </header>
       <main className="app__main">
         {children}
       </main>
       <BottomNav />
+      <MobileNavDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
     </div>
   );
 }
diff --git a/src/components/layout/MobileNavDrawer.tsx b/src/components/layout/MobileNavDrawer.tsx
new file mode 100644
index 0000000..aba65ab
--- /dev/null
+++ b/src/components/layout/MobileNavDrawer.tsx
@@ -0,0 +1,132 @@
+'use client';
+import React, { useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Icon } from '@/components/ui/Icons';
+import { Avatar } from '@/components/ui/Avatar';
+import { FRIEND_REQUESTS } from '@/mock/friends';
+import { NOTIFICATIONS } from '@/mock/notifications';
+import { ROUTES } from '@/lib/routes';
+import { useAuth } from '@/features/auth/AuthProvider';
+
+const NAV_PRIMARY = [
+  { href: ROUTES.dashboard, label: 'Dashboard', icon: 'home' },
+  { href: ROUTES.games, label: 'Game Library', icon: 'library' },
+  { href: ROUTES.friends, label: 'Friends', icon: 'users', badgeCount: FRIEND_REQUESTS.length },
+  { href: ROUTES.leaderboards, label: 'Leaderboards', icon: 'trophy' },
+];
+const NAV_SESSION = [
+  { href: ROUTES.lobby('SP-7F-29'), label: 'Active Lobby', icon: 'controller' },
+  { href: ROUTES.profile('me'), label: 'My Profile', icon: 'user' },
+];
+const NAV_META = [
+  { href: ROUTES.settings, label: 'Settings', icon: 'settings' },
+];
+
+interface MobileNavDrawerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function MobileNavDrawer({ open, onClose }: MobileNavDrawerProps) {
+  const pathname = usePathname();
+  const { user } = useAuth();
+  const notifCount = NOTIFICATIONS.length;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    onClose();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  if (!open) return null;
+
+  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/');
+
+  return (
+    <>
+      <div
+        className="mobile-drawer-overlay"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="mobile-drawer" role="dialog" aria-label="Navigation menu" aria-modal="true">
+        <div className="mobile-drawer__header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+            <div className="brand" style={{ flexShrink: 0 }}>
+              <div className="brand__logo" aria-hidden="true" />
+              <div>
+                <div className="brand__name">SimPle</div>
+                <div className="brand__tag">v0.4 - beta</div>
+              </div>
+            </div>
+            {notifCount > 0 && (
+              <span
+                className="chip chip--red chip--mono"
+                style={{ fontSize: 10, padding: '2px 7px', flexShrink: 0 }}
+              >
+                {notifCount} new
+              </span>
+            )}
+          </div>
+          <button
+            className="btn btn-ghost btn-icon btn-sm"
+            onClick={onClose}
+            aria-label="Close navigation"
+            style={{ flexShrink: 0 }}
+          >
+            <Icon name="x" size={18} />
+          </button>
+        </div>
+
+        <nav className="mobile-drawer__nav">
+          <DrawerNavGroup label="Play" items={NAV_PRIMARY} isActive={isActive} />
+          <DrawerNavGroup label="Session" items={NAV_SESSION} isActive={isActive} />
+          <DrawerNavGroup label="Account" items={NAV_META} isActive={isActive} />
+        </nav>
+
+        {user && (
+          <div className="mobile-drawer__footer">
+            <div className="surface" style={{ padding: 10, display: 'flex', gap: 10, alignItems: 'center' }}>
+              <Avatar user={{ initials: user.initials, color: user.color, status: 'online' }} showPresence />
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.displayName}</div>
+                <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-lo)' }}>@{user.username}</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function DrawerNavGroup({ label, items, isActive }: {
+  label: string;
+  items: { href: string; label: string; icon: string; badgeCount?: number }[];
+  isActive: (href: string) => boolean;
+}) {
+  return (
+    <div className="nav-group">
+      <div className="nav-group__label drawer-nav-label">{label}</div>
+      {items.map(item => {
+        const active = isActive(item.href);
+        return (
+          <Link key={item.href} href={item.href} className={`nav-item drawer-nav-item ${active ? 'nav-item--active' : ''}`}>
+            <Icon name={item.icon} size={17} stroke={active ? 2 : 1.75} style={{ flexShrink: 0 }} />
+            <span className="drawer-nav-label">{item.label}</span>
+            {item.badgeCount ? (
+              <span className="nav-item__badge">{item.badgeCount}</span>
+            ) : null}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/layout/Topbar.tsx b/src/components/layout/Topbar.tsx
index 3a9c46b..1b764d0 100644
--- a/src/components/layout/Topbar.tsx
+++ b/src/components/layout/Topbar.tsx
@@ -10,24 +10,53 @@ import { ROUTES } from '@/lib/routes';
 import { CreateLobbyModal } from '@/components/lobby/CreateLobbyModal';
 import { InviteFriendModal } from '@/components/friends/InviteFriendModal';
 import { useAuth } from '@/features/auth/AuthProvider';
+import { useTheme } from '@/lib/theme';
 
-export function Topbar() {
+export function Topbar({ onMenuClick }: { onMenuClick?: () => void }) {
   const [notifOpen, setNotifOpen] = useState(false);
   const [lobbyOpen, setLobbyOpen]  = useState(false);
   const [inviteOpen, setInviteOpen] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const current = window.scrollY;
+      if (current > lastScrollY.current && current > 80) {
+        setHidden(true);
+      } else {
+        setHidden(false);
+      }
+      lastScrollY.current = current;
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
 
   return (
-    <header className="topbar">
-      <div className="row" style={{ flex:1, gap:8 }}>
-        <div style={{ position:'relative', maxWidth:480, flex:1 }}>
+    <header className={`topbar${hidden ? ' topbar--hidden' : ''}`}>
+      <button
+        className="btn btn-ghost btn-icon btn-sm topbar__nav-btn"
+        onClick={onMenuClick}
+        aria-label="Open navigation menu"
+      >
+        <Icon name="menu" size={20} />
+      </button>
+
+      <div className="row topbar__search" style={{ flex:1, gap:8 }}>
+        <div style={{ position:'relative', maxWidth:480, flex:1, minWidth:0 }}>
           <Icon name="search" size={15} style={{ position:'absolute', left:11, top:11, color:'var(--text-lo)' }} />
           <input className="input" placeholder="Search games, friends, lobbies…" style={{ paddingLeft:34 }} />
           <span className="chip chip--mono" style={{ position:'absolute', right:8, top:7, height:24, fontSize:10 }}>⌘ K</span>
         </div>
       </div>
-      <div className="row" style={{ gap:8 }}>
+      <div className="row topbar__actions" style={{ gap:8 }}>
+        <button className="btn btn-ghost btn-icon btn-sm topbar__search-btn" aria-label="Search">
+          <Icon name="search" size={16} />
+        </button>
         <Button variant="ghost" size="sm" icon="plus" onClick={() => setLobbyOpen(true)}>Create Lobby</Button>
         <Button variant="ghost" size="sm" icon="users" onClick={() => setInviteOpen(true)}>Invite</Button>
+        <ThemeToggleButton />
         <NotificationBell open={notifOpen} setOpen={setNotifOpen} />
         <div style={{ width:1, height:28, background:'var(--border-1)' }} />
         <UserMenuButton />
@@ -39,6 +68,22 @@ export function Topbar() {
   );
 }
 
+function ThemeToggleButton() {
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <button
+      className="btn btn-ghost btn-icon btn-sm"
+      onClick={toggleTheme}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
+      title={`Switch to ${isDark ? 'light' : 'dark'} theme`}
+    >
+      <Icon name={isDark ? 'sun' : 'moon'} size={15} />
+    </button>
+  );
+}
+
 function NotificationBell({ open, setOpen }: { open: boolean; setOpen: (v: boolean | ((p: boolean) => boolean)) => void }) {
   const ref = useRef<HTMLDivElement>(null);
   const count = NOTIFICATIONS.length;
@@ -58,7 +103,7 @@ function NotificationBell({ open, setOpen }: { open: boolean; setOpen: (v: boole
         {count > 0 && <span style={{ position:'absolute', top:4, right:5, width:7, height:7, borderRadius:999, background:'var(--red-500)', boxShadow:'0 0 0 2px var(--bg-1)' }} />}
       </button>
       {open && (
-        <div className="card-elev" style={{ position:'absolute', right:0, top:'calc(100% + 8px)', width:340, zIndex:40, padding:0, overflow:'hidden' }}>
+        <div className="card-elev dropdown-panel dropdown-panel--wide" style={{ position:'absolute', right:0, top:'calc(100% + 8px)', width:340, zIndex:40, padding:0, overflow:'hidden' }}>
           <div style={{ padding:'12px 14px', borderBottom:'1px solid var(--border-2)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
             <div style={{ fontWeight:600, fontFamily:'var(--font-display)' }}>Notifications</div>
             <span className="chip chip--red chip--mono">{count} new</span>
@@ -120,18 +165,18 @@ function UserMenuButton() {
   return (
     <div ref={ref} style={{ position:'relative' }}>
       <button
-        className="row"
+        className="row user-menu-trigger"
         onClick={() => setOpen(value => !value)}
         style={{ background:'transparent', border:'1px solid var(--border-2)', padding:'4px 10px 4px 4px', borderRadius:999, gap:8 }}
         aria-expanded={open}
         aria-label="Account menu"
       >
         <Avatar user={{ initials:user.initials, color:user.color, status:'online' }} size="sm" showPresence />
-        <span style={{ fontSize:12.5, fontWeight:500 }}>{user.displayName.split(' ')[0]}</span>
+        <span className="user-menu-trigger__name" style={{ fontSize:12.5, fontWeight:500 }}>{user.displayName.split(' ')[0]}</span>
         <Icon name="chevronDown" size={13} style={{ color:'var(--text-lo)' }} />
       </button>
       {open && (
-        <div className="card-elev" style={{ position:'absolute', right:0, top:'calc(100% + 8px)', width:190, zIndex:40, padding:8 }}>
+        <div className="card-elev dropdown-panel" style={{ position:'absolute', right:0, top:'calc(100% + 8px)', width:190, zIndex:40, padding:8 }}>
           <button className="btn btn-ghost btn-sm" style={{ width:'100%', justifyContent:'flex-start' }} onClick={() => router.push(ROUTES.profile('me'))}>
             <Icon name="user" size={14} /> My Profile
           </button>
diff --git a/src/components/lobby/ChatPanel.tsx b/src/components/lobby/ChatPanel.tsx
index 0937b95..bf0c05a 100644
--- a/src/components/lobby/ChatPanel.tsx
+++ b/src/components/lobby/ChatPanel.tsx
@@ -25,7 +25,7 @@ export function ChatPanel({ chat, onSend, title = 'Chat', compact = false }: Cha
   };
 
   return (
-    <div className="card" style={{ padding: 0, display: 'flex', flexDirection: 'column', minHeight: compact ? 280 : 320 }}>
+    <div className="card" style={{ padding: 0, display: 'flex', flexDirection: 'column', minHeight: compact ? 280 : 320, minWidth: 0 }}>
       <div className="row between" style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-1)' }}>
         <div className="row" style={{ gap: 8 }}>
           <Icon name="message" size={14} style={{ color: 'var(--text-lo)' }} />
@@ -42,12 +42,12 @@ export function ChatPanel({ chat, onSend, title = 'Chat', compact = false }: Cha
                 <span style={{ fontSize: 12, fontWeight: 600, color: m.me ? 'var(--red-400)' : 'var(--text-hi)' }}>{m.from}</span>
                 <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-lo)' }}>{m.when}</span>
               </div>
-              <div style={{ fontSize: 13, color: 'var(--text-md)', marginTop: 2 }}>{m.text}</div>
+              <div style={{ fontSize: 13, color: 'var(--text-md)', marginTop: 2, overflowWrap: 'anywhere' }}>{m.text}</div>
             </div>
           </div>
         ))}
       </div>
-      <div style={{ padding: '10px 12px', borderTop: '1px solid var(--border-1)', display: 'flex', gap: 8 }}>
+      <div style={{ padding: '10px 12px', borderTop: '1px solid var(--border-1)', display: 'flex', gap: 8, minWidth: 0 }}>
         <input
           className="input"
           placeholder="Message…"
diff --git a/src/components/lobby/CreateLobbyModal.tsx b/src/components/lobby/CreateLobbyModal.tsx
index 822d657..3c978a5 100644
--- a/src/components/lobby/CreateLobbyModal.tsx
+++ b/src/components/lobby/CreateLobbyModal.tsx
@@ -84,9 +84,9 @@ export function CreateLobbyModal({ open, onClose }: Props) {
         </div>
 
         <div className="surface" style={{ padding:12 }}>
-          <div className="row" style={{ gap:10 }}>
+          <div className="row mobile-wrap" style={{ gap:10 }}>
             <Icon name="link" size={14} style={{ color:'var(--text-lo)' }} />
-            <span className="mono" style={{ fontSize:12, color:'var(--text-md)' }}>simple.gg/j/SP-7F-29</span>
+            <span className="mono" style={{ fontSize:12, color:'var(--text-md)', overflowWrap:'anywhere' }}>simple.gg/j/SP-7F-29</span>
             <div className="grow" />
             <span className="chip chip--mono">Auto-expires 30m</span>
           </div>
diff --git a/src/components/ui/Icons.tsx b/src/components/ui/Icons.tsx
index 528151d..47fb01b 100644
--- a/src/components/ui/Icons.tsx
+++ b/src/components/ui/Icons.tsx
@@ -45,6 +45,8 @@ const PATHS: Record<string, React.ReactNode> = {
   link:         <><path d="M10 14a4 4 0 0 1 0-5.7l2.8-2.8a4 4 0 1 1 5.7 5.7L17 12.7"/><path d="M14 10a4 4 0 0 1 0 5.7l-2.8 2.8a4 4 0 1 1-5.7-5.7L7 11.3"/></>,
   crown:        <><path d="M3 8l4 4 5-6 5 6 4-4v10H3z"/></>,
   sparkle:      <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></>,
+  sun:          <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></>,
+  moon:         <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>,
   eye:          <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
   eyeOff:       <><path d="M3 3l18 18"/><path d="M10.6 6.1A10 10 0 0 1 22 12s-1.7 2.9-4.6 4.8M6.6 6.6C3.6 8.4 2 12 2 12s4 7 10 7c2 0 3.7-.5 5.2-1.2"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></>,
   refresh:      <><path d="M21 12a9 9 0 1 0-3 6.7L21 16"/><path d="M21 21v-5h-5"/></>,
@@ -57,6 +59,7 @@ const PATHS: Record<string, React.ReactNode> = {
   list:         <><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>,
   signal:       <><path d="M2 20h2M7 17v3M12 13v7M17 9v11M22 4v16"/></>,
   rocket:       <><path d="M5 19a4 4 0 0 1-2-3l3-3 2 2-3 3a4 4 0 0 1-2 1z"/><path d="M14 10a8 8 0 0 1 8-8 8 8 0 0 1-8 8z"/><path d="M9 11c1-4 5-8 9-8l4 4c0 4-4 8-8 9l-3-2z"/><circle cx="16" cy="8" r="1.5"/></>,
+  menu:         <><path d="M4 6h16M4 12h16M4 18h16"/></>,
 };
 
 interface IconProps {
diff --git a/src/features/auth/AuthPage.tsx b/src/features/auth/AuthPage.tsx
index b4c5575..2d04707 100644
--- a/src/features/auth/AuthPage.tsx
+++ b/src/features/auth/AuthPage.tsx
@@ -50,9 +50,9 @@ export function AuthPage({ initialMode }: { initialMode: Mode }) {
   };
 
   return (
-    <div style={{ minHeight:'100vh', display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--bg-0)' }}>
+    <div className="responsive-auth" style={{ minHeight:'100vh', background:'var(--bg-0)' }}>
       <AuthLeft />
-      <div style={{ display:'grid', placeItems:'center', padding:32 }}>
+      <div style={{ display:'grid', placeItems:'center', padding:32, minWidth: 0 }}>
         <div style={{ width:'100%', maxWidth:420 }}>
           {status !== 'anonymous' ? (
             <div style={{ textAlign:'center', color:'var(--text-md)' }}>Checking your session...</div>
@@ -87,7 +87,7 @@ export function AuthPage({ initialMode }: { initialMode: Mode }) {
 
 function AuthLeft() {
   return (
-    <div style={{ position:'relative', overflow:'hidden', background:'linear-gradient(180deg, #0A0E18 0%, #07090F 100%)', padding:48, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
+    <div className="auth-left" style={{ position:'relative', overflow:'hidden', background:'linear-gradient(180deg, #0A0E18 0%, #07090F 100%)', padding:48, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
       <div className="grid-bg" style={{ opacity:0.5 }} />
       <div className="row" style={{ gap:10, zIndex:2, position:'relative' }}>
         <div className="brand__logo" style={{ width:30, height:30 }} />
diff --git a/src/features/dashboard/DashboardPage.tsx b/src/features/dashboard/DashboardPage.tsx
index e3dee5d..5423d35 100644
--- a/src/features/dashboard/DashboardPage.tsx
+++ b/src/features/dashboard/DashboardPage.tsx
@@ -29,7 +29,7 @@ export function DashboardPage() {
           <div className="page-title">Good evening, {u.display.split(' ')[0]}.</div>
           <div className="page-sub">{onlineFriends.length} friends online · {NOTIFICATIONS.filter(n => n.kind === 'invite').length} invite waiting</div>
         </div>
-        <div className="row" style={{ gap:8 }}>
+        <div className="row mobile-actions" style={{ gap:8 }}>
           <Button variant="ghost" icon="ai" onClick={() => router.push(ROUTES.games)}>Play vs AI</Button>
           <Button variant="ghost" icon="users" onClick={() => setInviteOpen(true)}>Invite friend</Button>
           <Button icon="plus" onClick={() => setLobbyOpen(true)}>Create lobby</Button>
@@ -37,7 +37,7 @@ export function DashboardPage() {
       </div>
 
       {/* Hero + side panel */}
-      <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:18, marginTop:24 }}>
+      <div className="responsive-split" style={{ gridTemplateColumns:'1.6fr 1fr', marginTop:24 }}>
         <HeroPanel />
         <SideQuickPanel />
       </div>
@@ -81,7 +81,7 @@ export function DashboardPage() {
       </section>
 
       {/* Friends + Matches */}
-      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, marginTop:28 }}>
+      <div className="responsive-split" style={{ gridTemplateColumns:'1fr 1fr', marginTop:28 }}>
         <OnlineFriendsPanel />
         <RecentMatchesPanel />
       </div>
@@ -113,18 +113,18 @@ function HeroPanel() {
     <div className="card-elev" style={{ padding:20, position:'relative', overflow:'hidden' }}>
       <div style={{ position:'absolute', inset:0, background:'radial-gradient(600px 280px at 100% -20%, rgba(240,57,75,0.18), transparent 60%)' }} />
       <div style={{ position:'relative' }}>
-        <div className="row between">
+        <div className="row between mobile-wrap">
           <span className="chip chip--red chip--mono"><span className="dot dot--playing" /> Season 4 · ranked open</span>
           <span className="chip chip--mono">Region: {u.region}</span>
         </div>
-        <div className="row" style={{ marginTop:22, gap:18 }}>
+        <div className="row mobile-stack" style={{ marginTop:22, gap:18 }}>
           <Avatar user={u} size="xl" showPresence />
           <div style={{ flex:1, minWidth:0 }}>
-            <div className="row" style={{ gap:10 }}>
+            <div className="row mobile-wrap" style={{ gap:10 }}>
               <div className="font-display" style={{ fontSize:24, fontWeight:600 }}>{u.display}</div>
               <span className="chip chip--mono">@{u.username}</span>
             </div>
-            <div className="row" style={{ gap:10, marginTop:8 }}>
+            <div className="row mobile-wrap" style={{ gap:10, marginTop:8 }}>
               <span className="chip chip--red chip--mono"><Icon name="crown" size={12} /> {u.rank}</span>
               <span className="chip chip--mono">{u.elo} ELO</span>
               <span className="chip chip--mono">Lv {u.level}</span>
@@ -138,7 +138,7 @@ function HeroPanel() {
             </div>
           </div>
         </div>
-        <div className="row" style={{ gap:8, marginTop:20 }}>
+        <div className="row mobile-actions" style={{ gap:8, marginTop:20 }}>
           <Button icon="play" onClick={() => router.push(ROUTES.games)}>Quick match</Button>
           <Button variant="ghost" icon="controller" onClick={() => router.push(ROUTES.lobby('SP-7F-29'))}>Open active lobby</Button>
         </div>
@@ -232,7 +232,7 @@ function OnlineFriendsPanel() {
       </div>
       <div className="col" style={{ marginTop:12, gap:6 }}>
         {online.map(f => (
-          <div key={f.id} className="row" style={{ padding:'10px 8px', borderRadius:10, gap:12 }}>
+          <div key={f.id} className="row mobile-wrap" style={{ padding:'10px 8px', borderRadius:10, gap:12 }}>
             <Avatar user={f} showPresence />
             <div style={{ flex:1, minWidth:0 }}>
               <div className="row" style={{ gap:8 }}>
diff --git a/src/features/friends/FriendsPage.tsx b/src/features/friends/FriendsPage.tsx
index f216faf..2b7d183 100644
--- a/src/features/friends/FriendsPage.tsx
+++ b/src/features/friends/FriendsPage.tsx
@@ -26,7 +26,7 @@ export function FriendsPage() {
           <div className="page-title">Friends</div>
           <div className="page-sub">{FRIENDS.length} total · {online.length} online · {FRIEND_REQUESTS.length} pending requests</div>
         </div>
-        <div className="row" style={{ gap: 8 }}>
+        <div className="row mobile-actions" style={{ gap: 8 }}>
           <Button variant="ghost" icon="share">Share invite link</Button>
           <Button
             icon="plus"
@@ -35,7 +35,7 @@ export function FriendsPage() {
         </div>
       </div>
 
-      <div className="row" style={{ marginTop: 22, gap: 12, justifyContent: 'space-between', flexWrap: 'wrap' }}>
+      <div className="row mobile-wrap" style={{ marginTop: 22, gap: 12, justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <Tabs
           value={tab}
           onChange={setTab}
@@ -46,7 +46,7 @@ export function FriendsPage() {
             { value: 'suggest',  label: 'Suggestions',  count: SUGGESTED.length, icon: 'sparkle' },
           ]}
         />
-        <div style={{ position: 'relative', minWidth: 260 }}>
+        <div style={{ position: 'relative', width: 'min(100%, 260px)' }}>
           <Icon name="search" size={15} style={{ position: 'absolute', left: 11, top: 11, color: 'var(--text-lo)' }} />
           <input
             className="input"
@@ -58,7 +58,7 @@ export function FriendsPage() {
         </div>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 18, marginTop: 22 }}>
+      <div className="responsive-split" style={{ gridTemplateColumns: '2fr 1fr', marginTop: 22 }}>
         <div className="card" style={{ padding: 18 }}>
           {tab === 'requests' ? <RequestsList /> :
            tab === 'suggest'  ? <SuggestionsList /> :
@@ -87,14 +87,14 @@ function FriendList({ list }: { list: Friend[] }) {
   if (!list.length) return <EmptyState icon="users" title="Nobody matches that." body="Try clearing the search or invite someone new." />;
   return (
     <div className="col" style={{ gap: 2 }}>
-      <div className="row" style={{ padding: '6px 10px' }}>
+      <div className="friends-header row" style={{ padding: '6px 10px' }}>
         <div className="uppercase-label" style={{ flex: 1 }}>Player</div>
         <div className="uppercase-label" style={{ width: 160 }}>Status</div>
         <div className="uppercase-label" style={{ width: 80, textAlign: 'right' }}>ELO</div>
         <div style={{ width: 170 }} />
       </div>
       {list.map(f => (
-        <div key={f.id} className="row" style={{ padding: '10px', borderRadius: 10, gap: 12 }}>
+        <div key={f.id} className="friends-row row" style={{ padding: '10px', borderRadius: 10, gap: 12 }}>
           <Avatar user={f} showPresence />
           <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{ fontSize: 13.5, fontWeight: 600 }}>{f.display}</div>
@@ -123,7 +123,7 @@ function RequestsList() {
   return (
     <div className="col" style={{ gap: 8 }}>
       {FRIEND_REQUESTS.map(r => (
-        <div key={r.id} className="surface row" style={{ padding: 14, gap: 12 }}>
+        <div key={r.id} className="surface row mobile-wrap" style={{ padding: 14, gap: 12 }}>
           <Avatar user={r} />
           <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.display}</div>
@@ -145,7 +145,7 @@ function SuggestionsList() {
   return (
     <div className="col" style={{ gap: 8 }}>
       {SUGGESTED.map(s => (
-        <div key={s.id} className="surface row" style={{ padding: 14, gap: 12 }}>
+        <div key={s.id} className="surface row mobile-wrap" style={{ padding: 14, gap: 12 }}>
           <Avatar user={s} />
           <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{ fontSize: 13.5, fontWeight: 600 }}>{s.display}</div>
@@ -221,7 +221,7 @@ function EmptyFriends({ onAdd }: { onAdd: () => void }) {
       title="Your roster is empty — let's fix that."
       body="Add friends to invite them to lobbies, see when they're online, and climb leaderboards together."
       action={
-        <div className="row" style={{ gap: 8, justifyContent: 'center' }}>
+        <div className="row mobile-actions" style={{ gap: 8, justifyContent: 'center' }}>
           <Button icon="plus" onClick={onAdd}>Add a friend</Button>
           <Button variant="ghost" icon="share">Copy invite link</Button>
         </div>
diff --git a/src/features/games/GameDetailPage.tsx b/src/features/games/GameDetailPage.tsx
index 4191a72..812e689 100644
--- a/src/features/games/GameDetailPage.tsx
+++ b/src/features/games/GameDetailPage.tsx
@@ -31,7 +31,7 @@ export function GameDetailPage({ gameId }: { gameId: string }) {
         <Icon name="chevronLeft" size={14} /> Game library
       </button>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, marginTop: 18 }}>
+      <div className="responsive-split" style={{ gridTemplateColumns: '1.4fr 1fr', marginTop: 18 }}>
         <div className="card-elev" style={{ padding: 0, overflow: 'hidden' }}>
           <GameArt game={game} h={260} />
           <div style={{ padding: 22 }}>
@@ -40,12 +40,12 @@ export function GameDetailPage({ gameId }: { gameId: string }) {
                 <div className="font-display" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em' }}>{game.name}</div>
                 <div style={{ fontSize: 13, color: 'var(--text-lo)', marginTop: 4 }}>{game.tag}</div>
               </div>
-              <div className="row" style={{ gap: 6, flexWrap: 'wrap' }}>
+              <div className="row mobile-wrap" style={{ gap: 6, flexWrap: 'wrap' }}>
                 {game.cats.map(c => <span key={c} className="chip">{c}</span>)}
               </div>
             </div>
 
-            <div className="row" style={{ gap: 18, marginTop: 18, flexWrap: 'wrap' }}>
+            <div className="row mobile-wrap" style={{ gap: 18, marginTop: 18, flexWrap: 'wrap' }}>
               <InlineStat label="Players" value={`${game.minPlayers}–${game.maxPlayers}`} icon="users" />
               <InlineStat label="Duration" value={game.duration} icon="clock" />
               <InlineStat label="Difficulty" value={game.difficulty} icon="signal" />
@@ -78,25 +78,29 @@ export function GameDetailPage({ gameId }: { gameId: string }) {
             <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600 }}>Start a match</div>
             <div className="page-sub">Choose a mode</div>
             <div className="col" style={{ marginTop: 16, gap: 10 }}>
-              <ActionButton
-                color="#F0394B" icon="play"
-                title="Play vs AI" sub={`Difficulty · ${aiLevel}`}
-                onClick={() => router.push(ROUTES.room(`${game.id}-ai`))}
-              />
-              <div className="row" style={{ gap: 6, flexWrap: 'wrap', padding: '0 4px 4px' }}>
-                {game.aiLevels.map(lvl => (
-                  <button
-                    key={lvl}
-                    className="chip"
-                    onClick={() => setAiLevel(lvl)}
-                    style={{
-                      background: aiLevel === lvl ? 'var(--red-soft)' : undefined,
-                      color: aiLevel === lvl ? 'var(--red-400)' : undefined,
-                      borderColor: aiLevel === lvl ? 'rgba(240,57,75,0.3)' : undefined,
-                      cursor: 'pointer',
-                    }}
-                  >{lvl}</button>
-                ))}
+              <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
+                <ActionButton
+                  color="#F0394B" icon="play"
+                  title="Solo vs AI" sub={`Difficulty · ${aiLevel}`}
+                  onClick={() => router.push(ROUTES.room(`${game.id}-ai`))}
+                  noBorder
+                />
+                <div className="row" style={{ gap: 6, flexWrap: 'wrap', padding: '6px 14px 10px', borderTop: '1px solid var(--border-1)' }}>
+                  <span style={{ fontSize: 11, color: 'var(--text-lo)', alignSelf: 'center', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>Level:</span>
+                  {game.aiLevels.map(lvl => (
+                    <button
+                      key={lvl}
+                      className="chip"
+                      onClick={() => setAiLevel(lvl)}
+                      style={{
+                        background: aiLevel === lvl ? 'var(--red-soft)' : undefined,
+                        color: aiLevel === lvl ? 'var(--red-400)' : undefined,
+                        borderColor: aiLevel === lvl ? 'rgba(240,57,75,0.3)' : undefined,
+                        cursor: 'pointer',
+                      }}
+                    >{lvl}</button>
+                  ))}
+                </div>
               </div>
               <ActionButton
                 color="#38BDF8" icon="users"
@@ -117,8 +121,8 @@ export function GameDetailPage({ gameId }: { gameId: string }) {
           </div>
 
           <div className="card" style={{ padding: 18 }}>
-            <div className="row between">
-              <div className="row" style={{ gap: 8 }}>
+            <div className="row between mobile-wrap">
+              <div className="row" style={{ gap: 8, minWidth: 0 }}>
                 <div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(56,189,248,0.10)', color: 'var(--ice-400)', display: 'grid', placeItems: 'center' }}>
                   <Icon name="users" size={14} />
                 </div>
@@ -131,7 +135,7 @@ export function GameDetailPage({ gameId }: { gameId: string }) {
             </div>
             <div className="col" style={{ marginTop: 12, gap: 8 }}>
               {FRIENDS.slice(0, 3).map(f => (
-                <div key={f.id} className="row" style={{ gap: 10 }}>
+                <div key={f.id} className="row mobile-wrap" style={{ gap: 10 }}>
                   <Avatar user={f} size="sm" showPresence />
                   <div style={{ flex: 1, minWidth: 0 }}>
                     <div style={{ fontSize: 12.5, fontWeight: 600 }}>{f.display}</div>
@@ -162,23 +166,30 @@ function InlineStat({ label, value, icon }: { label: string; value: string; icon
   );
 }
 
-function ActionButton({ color, icon, title, sub, onClick }: {
-  color: string; icon: string; title: string; sub: string; onClick: () => void;
+function ActionButton({ color, icon, title, sub, onClick, noBorder }: {
+  color: string; icon: string; title: string; sub: string; onClick: () => void; noBorder?: boolean;
 }) {
   return (
     <button
       onClick={onClick}
-      className="surface row"
-      style={{ padding: 14, gap: 12, width: '100%', textAlign: 'left', border: '1px solid var(--border-1)' }}
+      style={{
+        display: 'flex', flexDirection: 'row', alignItems: 'center', flexWrap: 'nowrap',
+        gap: 12, padding: 14, width: '100%', textAlign: 'left', cursor: 'pointer',
+        background: noBorder ? 'var(--bg-2)' : 'linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--bg-2)',
+        border: noBorder ? 'none' : '1px solid var(--border-1)',
+        borderRadius: noBorder ? 0 : 'var(--r-md)',
+        transition: 'background 0.15s',
+        boxSizing: 'border-box',
+      }}
     >
-      <div style={{ width: 38, height: 38, borderRadius: 10, background: `${color}1f`, color, display: 'grid', placeItems: 'center', border: `1px solid ${color}44` }}>
+      <div style={{ width: 38, height: 38, flexShrink: 0, borderRadius: 10, background: `${color}1f`, color, display: 'grid', placeItems: 'center', border: `1px solid ${color}44` }}>
         <Icon name={icon} size={18} />
       </div>
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--text-hi)' }}>{title}</div>
-        <div className="mono" style={{ fontSize: 11, color: 'var(--text-lo)' }}>{sub}</div>
+      <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
+        <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--text-hi)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</div>
+        <div style={{ fontSize: 11, color: 'var(--text-lo)', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</div>
       </div>
-      <Icon name="chevronRight" size={16} style={{ color: 'var(--text-lo)' }} />
+      <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="var(--text-lo)" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><path d="M9 6l6 6-6 6"/></svg>
     </button>
   );
 }
diff --git a/src/features/games/LibraryPage.tsx b/src/features/games/LibraryPage.tsx
index 7f9f2e2..44089b6 100644
--- a/src/features/games/LibraryPage.tsx
+++ b/src/features/games/LibraryPage.tsx
@@ -31,7 +31,7 @@ export function LibraryPage() {
           <div className="page-title">Game Library</div>
           <div className="page-sub">{GAMES.length} games · 6,432 players online right now</div>
         </div>
-        <div style={{ position: 'relative', minWidth: 280 }}>
+        <div style={{ position: 'relative', width: 'min(100%, 280px)' }}>
           <Icon name="search" size={15} style={{ position: 'absolute', left: 11, top: 11, color: 'var(--text-lo)' }} />
           <input
             className="input"
@@ -43,13 +43,13 @@ export function LibraryPage() {
         </div>
       </div>
 
-      <div className="row" style={{ marginTop: 22, gap: 12, justifyContent: 'space-between', flexWrap: 'wrap' }}>
+      <div className="row mobile-wrap" style={{ marginTop: 22, gap: 12, justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <Tabs
           value={filter}
           onChange={setFilter}
           items={FILTERS.map(f => ({ value: f, label: f, count: f === 'All' ? GAMES.length : undefined }))}
         />
-        <div className="row" style={{ gap: 8 }}>
+        <div className="row mobile-actions" style={{ gap: 8 }}>
           <Button size="sm" variant="ghost" icon="filter">More filters</Button>
           <Button size="sm" variant="ghost" icon="list">Sort: Popular</Button>
         </div>
@@ -78,14 +78,14 @@ export function LibraryPage() {
 function FeaturedBanner({ onEnter }: { onEnter: () => void }) {
   const g = GAMES[3];
   return (
-    <div className="card-elev" style={{ marginTop: 20, padding: 0, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 200 }}>
+    <div className="card-elev responsive-split" style={{ marginTop: 20, padding: 0, overflow: 'hidden', gridTemplateColumns: '1fr 1fr', minHeight: 200 }}>
       <div style={{ padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
         <span className="chip chip--red chip--mono" style={{ alignSelf: 'flex-start' }}>
           <Icon name="sparkle" size={12} /> Spotlight
         </span>
         <div className="font-display" style={{ fontSize: 28, fontWeight: 600, marginTop: 14 }}>Chess Lite · Blitz Season</div>
         <p style={{ marginTop: 8, maxWidth: 380 }}>3-minute blitz with bullet endings. Climb a dedicated ladder for the next 4 weeks.</p>
-        <div className="row" style={{ gap: 8, marginTop: 18 }}>
+        <div className="row mobile-actions" style={{ gap: 8, marginTop: 18 }}>
           <Button onClick={onEnter}>Enter event</Button>
           <Button variant="ghost">Read rules</Button>
         </div>
diff --git a/src/features/landing/LandingPage.tsx b/src/features/landing/LandingPage.tsx
index 5093560..2d2e103 100644
--- a/src/features/landing/LandingPage.tsx
+++ b/src/features/landing/LandingPage.tsx
@@ -7,6 +7,7 @@ import { Icon } from '@/components/ui/Icons';
 import { GameArt } from '@/components/ui/GameArt';
 import { GAMES } from '@/mock/games';
 import { ROUTES } from '@/lib/routes';
+import { useTheme } from '@/lib/theme';
 
 export function LandingPage() {
   return (
@@ -25,6 +26,7 @@ export function LandingPage() {
 }
 
 function LandingNav() {
+  const { theme, toggleTheme } = useTheme();
   return (
     <div className="landing__nav">
       <div className="container row" style={{ height:64, justifyContent:'space-between' }}>
@@ -39,6 +41,13 @@ function LandingNav() {
           <a href="#tech">Tech</a>
         </nav>
         <div className="row" style={{ gap:8 }}>
+          <button
+            className="btn btn-ghost btn-icon btn-sm"
+            onClick={toggleTheme}
+            aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+          >
+            <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={15} />
+          </button>
           <Link href={ROUTES.login}><Button variant="ghost" size="sm">Sign in</Button></Link>
           <Link href={ROUTES.register}><Button size="sm" iconRight="arrowRight">Start playing</Button></Link>
         </div>
diff --git a/src/features/leaderboards/LeaderboardPage.tsx b/src/features/leaderboards/LeaderboardPage.tsx
index b18016f..6f5f5eb 100644
--- a/src/features/leaderboards/LeaderboardPage.tsx
+++ b/src/features/leaderboards/LeaderboardPage.tsx
@@ -36,9 +36,9 @@ export function LeaderboardPage() {
         <StatCard label="Best season" value="Master" hint="Season 2"   icon="crown" />
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 18, marginTop: 24 }}>
+      <div className="responsive-sidebar" style={{ gridTemplateColumns: '1fr 320px', marginTop: 24 }}>
         <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
-          <div className="row between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-1)' }}>
+          <div className="row between mobile-wrap" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-1)' }}>
             <Tabs
               value={game}
               onChange={setGame}
@@ -51,7 +51,7 @@ export function LeaderboardPage() {
             />
             <Button size="sm" variant="ghost" icon="refresh">Refresh</Button>
           </div>
-          <div className="row" style={{ padding: '10px 18px' }}>
+          <div className="leaderboard-header row" style={{ padding: '10px 18px' }}>
             <div className="uppercase-label" style={{ width: 60 }}>Rank</div>
             <div className="uppercase-label" style={{ flex: 1 }}>Player</div>
             <div className="uppercase-label" style={{ width: 80 }}>Region</div>
@@ -60,7 +60,7 @@ export function LeaderboardPage() {
           </div>
           {LEADERBOARD_GLOBAL.map(r => <LBRow key={r.rank} row={r} />)}
           <div style={{ padding: '12px 18px', borderTop: '1px dashed var(--border-2)', background: 'var(--red-soft)' }}>
-            <div className="row" style={{ alignItems: 'center' }}>
+            <div className="leaderboard-row row" style={{ alignItems: 'center' }}>
               <div className="mono" style={{ width: 60, fontWeight: 700, color: 'var(--red-400)' }}>#142</div>
               <div className="row" style={{ flex: 1, gap: 10 }}>
                 <Avatar user={CURRENT_USER} size="sm" />
@@ -86,14 +86,14 @@ function LBRow({ row }: { row: LeaderboardRow }) {
   const medals = ['#F59E0B', '#94A3B8', '#B45309'];
   const medal = row.rank <= 3 ? medals[row.rank - 1] : null;
   return (
-    <div className="row" style={{ padding: '10px 18px', borderTop: '1px solid var(--border-1)' }}>
+    <div className="leaderboard-row row" style={{ padding: '10px 18px', borderTop: '1px solid var(--border-1)' }}>
       <div className="mono" style={{ width: 60, fontWeight: 600, color: medal ?? 'var(--text-md)', display: 'flex', alignItems: 'center', gap: 6 }}>
         {medal && <Icon name="crown" size={14} />}
         #{row.rank}
       </div>
-      <div className="row" style={{ flex: 1, gap: 10 }}>
+      <div className="row" style={{ flex: 1, gap: 10, minWidth: 0 }}>
         <Avatar user={{ initials: row.name.split(' ').map(s => s[0]).slice(0, 2).join(''), color: PALETTE[row.rank % 8] }} size="sm" />
-        <span style={{ fontWeight: 600 }}>{row.name}</span>
+        <span style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{row.name}</span>
       </div>
       <div className="mono" style={{ width: 80, color: 'var(--text-md)' }}>{row.country}</div>
       <div className="mono" style={{ width: 100, textAlign: 'right', fontWeight: 600 }}>{row.elo.toLocaleString()}</div>
diff --git a/src/features/lobby/LobbyPage.tsx b/src/features/lobby/LobbyPage.tsx
index 5ad0576..a8961e5 100644
--- a/src/features/lobby/LobbyPage.tsx
+++ b/src/features/lobby/LobbyPage.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/Button';
@@ -28,12 +28,12 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
   ]);
   const [aiFill, setAiFill] = useState(false);
   const [privacy, setPrivacy] = useState('private');
-  const [timeMode, setTimeMode] = useState('Blitz · 3+2');
+  const [timeMode, setTimeMode] = useState('Blitz  -  3+2');
   const [chat, setChat] = useState<ChatMessage[]>(DEFAULT_LOBBY_CHAT);
 
   const slotsWithAi = slots.map(s =>
     s.kind === 'empty' && aiFill
-      ? { kind: 'ai' as const, user: { initials: 'AI', color: '#A78BFA', display: `AI · ${game.aiLevels[1]}` }, ready: true }
+      ? { kind: 'ai' as const, user: { initials: 'AI', color: '#A78BFA', display: `AI  -  ${game.aiLevels[1]}` }, ready: true }
       : s
   );
   const allReady = slotsWithAi.every(s => s.kind === 'empty' || s.ready);
@@ -51,15 +51,15 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
     <div className="page">
       <div className="between" style={{ flexWrap: 'wrap', gap: 12 }}>
         <div>
-          <div className="row" style={{ gap: 8 }}>
+          <div className="row mobile-wrap" style={{ gap: 8 }}>
             <span className="chip chip--red chip--mono"><span className="dot dot--playing" />Lobby active</span>
             <span className="chip chip--mono">{privacy === 'private' ? 'Private' : 'Public'}</span>
             <span className="chip chip--mono">{timeMode}</span>
           </div>
-          <div className="page-title" style={{ marginTop: 10 }}>{game.name} · Lobby</div>
-          <div className="page-sub">Hosted by you · region Auto · est. start in 30s</div>
+          <div className="page-title" style={{ marginTop: 10 }}>{game.name}  -  Lobby</div>
+          <div className="page-sub">Hosted by you  -  region Auto  -  est. start in 30s</div>
         </div>
-        <div className="row" style={{ gap: 8 }}>
+        <div className="row mobile-actions" style={{ gap: 8 }}>
           <button
             className="chip chip--mono"
             onClick={copyCode}
@@ -74,17 +74,17 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
         </div>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18, marginTop: 22 }}>
+      <div className="responsive-split" style={{ gridTemplateColumns: '1.6fr 1fr', marginTop: 22 }}>
         <div className="col" style={{ gap: 18 }}>
           <div className="card-elev" style={{ padding: 22 }}>
-            <div className="row between">
+            <div className="row between mobile-wrap">
               <div>
                 <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600 }}>
-                  Players · {slotsWithAi.filter(s => s.kind !== 'empty').length} / {slots.length}
+                  Players  -  {slotsWithAi.filter(s => s.kind !== 'empty').length} / {slots.length}
                 </div>
                 <div className="page-sub">Host can kick or promote.</div>
               </div>
-              <div className="row" style={{ gap: 6 }}>
+              <div className="row mobile-actions" style={{ gap: 6 }}>
                 <Button size="sm" variant="ghost" icon="plus" onClick={() => setSlots(s => [...s, { kind: 'empty' }])}>Add slot</Button>
                 <Button size="sm" variant="ghost" icon="refresh" onClick={() => setSlots(s => s.map(slot => slot.kind === 'empty' ? slot : { ...slot, ready: !slot.ready }))}>Toggle ready</Button>
               </div>
@@ -94,16 +94,16 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
               {slotsWithAi.map((s, i) => <SlotCard key={i} slot={s} seat={i + 1} />)}
             </div>
 
-            <div className="row between" style={{ marginTop: 18 }}>
-              <div className="row" style={{ gap: 8 }}>
+            <div className="row between mobile-wrap" style={{ marginTop: 18 }}>
+              <div className="row mobile-wrap" style={{ gap: 8 }}>
                 <Toggle on={aiFill} onChange={setAiFill} label="Fill empty seats with AI" />
-                <span className="chip chip--mono">AI · {game.aiLevels[1]}</span>
+                <span className="chip chip--mono">AI  -  {game.aiLevels[1]}</span>
               </div>
-              <div className="row" style={{ gap: 8 }}>
+              <div className="row mobile-actions" style={{ gap: 8 }}>
                 {allReady ? (
                   <Button size="lg" icon="play" onClick={() => router.push(ROUTES.room(lobbyId))}>Start match</Button>
                 ) : (
-                  <Button size="lg" disabled icon="clock">Waiting for ready…</Button>
+                  <Button size="lg" disabled icon="clock">Waiting for ready...</Button>
                 )}
               </div>
             </div>
@@ -112,7 +112,7 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
           <div className="card" style={{ padding: 18 }}>
             <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600 }}>Match settings</div>
             <div className="grid grid-3" style={{ marginTop: 12 }}>
-              <SettingDropdown label="Time control" value={timeMode} options={['Bullet · 1+0', 'Blitz · 3+2', 'Rapid · 10+5', 'Classic · 30+30']} onChange={setTimeMode} />
+              <SettingDropdown label="Time control" value={timeMode} options={['Bullet  -  1+0', 'Blitz  -  3+2', 'Rapid  -  10+5', 'Classic  -  30+30']} onChange={setTimeMode} />
               <SettingDropdown label="Privacy" value={privacy === 'private' ? 'Private (link)' : 'Public'} options={['Private (link)', 'Public']} onChange={v => setPrivacy(v === 'Private (link)' ? 'private' : 'public')} />
               <SettingDropdown label="Rated" value="Ranked" options={['Ranked', 'Casual']} />
               <SettingDropdown label="Region" value="Auto" options={['Auto', 'NA-East', 'Asia-SEA']} />
@@ -134,12 +134,12 @@ export function LobbyPage({ lobbyId }: { lobbyId: string }) {
 function SlotCard({ slot, seat }: { slot: LobbySlot; seat: number }) {
   if (slot.kind === 'empty') {
     return (
-      <div className="surface" style={{ padding: 16, borderStyle: 'dashed', display: 'flex', alignItems: 'center', gap: 12, minHeight: 80 }}>
+      <div className="surface mobile-wrap" style={{ padding: 16, borderStyle: 'dashed', display: 'flex', alignItems: 'center', gap: 12, minHeight: 80 }}>
         <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--bg-3)', color: 'var(--text-lo)', display: 'grid', placeItems: 'center', border: '1px dashed var(--border-3)' }}>
           <Icon name="plus" size={16} />
         </div>
-        <div style={{ flex: 1 }}>
-          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-md)' }}>Seat {seat} · Empty</div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-md)' }}>Seat {seat}  -  Empty</div>
           <div className="mono" style={{ fontSize: 11, color: 'var(--text-lo)' }}>Invite a friend or fill with AI</div>
         </div>
         <Button size="sm" variant="ghost" icon="plus">Invite</Button>
@@ -149,17 +149,17 @@ function SlotCard({ slot, seat }: { slot: LobbySlot; seat: number }) {
 
   const isAi = slot.kind === 'ai';
   return (
-    <div className="surface" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, minHeight: 80, borderColor: slot.ready ? 'rgba(52,211,153,0.25)' : 'var(--border-2)' }}>
+    <div className="surface mobile-wrap" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, minHeight: 80, borderColor: slot.ready ? 'rgba(52,211,153,0.25)' : 'var(--border-2)' }}>
       <Avatar user={slot.user!} />
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div className="row" style={{ gap: 8 }}>
+        <div className="row mobile-wrap" style={{ gap: 8 }}>
           <span style={{ fontWeight: 600, fontSize: 13.5 }}>{slot.user?.display}</span>
           {slot.kind === 'host' && <span className="chip chip--red chip--mono"><Icon name="crown" size={11} /> Host</span>}
           {isAi && <span className="chip chip--mono"><Icon name="ai" size={11} /> AI</span>}
         </div>
-        <div className="mono" style={{ fontSize: 11, color: 'var(--text-lo)' }}>{isAi ? 'Difficulty: Hard' : `Seat ${seat} · Auto`}</div>
+        <div className="mono" style={{ fontSize: 11, color: 'var(--text-lo)' }}>{isAi ? 'Difficulty: Hard' : `Seat ${seat}  -  Auto`}</div>
       </div>
-      <div className="row" style={{ gap: 6 }}>
+      <div className="row mobile-wrap" style={{ gap: 6 }}>
         <span className={`chip ${slot.ready ? 'chip--success' : 'chip--warn'}`}>
           <span className={`dot ${slot.ready ? 'dot--online' : 'dot--away'}`} />
           {slot.ready ? 'Ready' : 'Not ready'}
@@ -182,7 +182,7 @@ function SettingDropdown({ label, value, options, onChange }: {
         <Icon name="chevronDown" size={14} style={{ color: 'var(--text-lo)' }} />
       </button>
       {open && (
-        <div className="card-elev" style={{ position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 6, zIndex: 20, padding: 6, overflow: 'hidden' }}>
+        <div className="card-elev dropdown-panel" style={{ position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 6, zIndex: 20, padding: 6, overflow: 'hidden' }}>
           {options.map(o => (
             <button
               key={o}
@@ -217,7 +217,7 @@ function InviteFriendsPanel() {
       </div>
       <div className="col" style={{ marginTop: 10, gap: 4, maxHeight: 280, overflow: 'auto' }}>
         {list.map(f => (
-          <div key={f.id} className="row" style={{ padding: '8px 6px', borderRadius: 8, gap: 10 }}>
+          <div key={f.id} className="row mobile-wrap" style={{ padding: '8px 6px', borderRadius: 8, gap: 10 }}>
             <Avatar user={f} size="sm" showPresence />
             <div style={{ flex: 1, minWidth: 0 }}>
               <div style={{ fontSize: 12.5, fontWeight: 600 }}>{f.display}</div>
diff --git a/src/features/profile/ProfilePage.tsx b/src/features/profile/ProfilePage.tsx
index 2ba4ab8..c437b1c 100644
--- a/src/features/profile/ProfilePage.tsx
+++ b/src/features/profile/ProfilePage.tsx
@@ -163,7 +163,7 @@ export function ProfilePage({ userId }: { userId: string }) {
     return (
       <div className="page">
         <div className="card-elev" style={{ padding: 40, textAlign: 'center', color: 'var(--text-lo)' }}>
-          Loading profile…
+          Loading profile...
         </div>
       </div>
     );
@@ -186,7 +186,7 @@ export function ProfilePage({ userId }: { userId: string }) {
   return (
     <div className="page">
       <div className="card-elev" style={{ overflow: 'hidden', padding: 0 }}>
-        <div style={{ height: 160, position: 'relative', background: profile.bannerUrl ? `url(${profile.bannerUrl}) center/cover` : `linear-gradient(135deg, ${localBannerColor ?? profile.bannerFallbackColor} 0%, #1B2238 55%, #0B0F18 100%)` }}>
+        <div className="profile-banner" style={{ height: 160, position: 'relative', background: profile.bannerUrl ? `url(${profile.bannerUrl}) center/cover` : `linear-gradient(135deg, ${localBannerColor ?? profile.bannerFallbackColor} 0%, #1B2238 55%, #0B0F18 100%)` }}>
           <div className="grid-bg" style={{ opacity: 0.5 }} />
           {isOwn && (
             <div style={{ position: 'absolute', top: 14, right: editing ? 170 : 14 }}>
@@ -202,7 +202,7 @@ export function ProfilePage({ userId }: { userId: string }) {
               />
               <Button size="sm" variant="ghost" icon="more" aria-label="Cover options" onClick={() => setBannerMenuOpen(v => !v)} />
               {bannerMenuOpen && (
-                <div className="card" style={{ position: 'absolute', top: 36, right: 0, zIndex: 5, minWidth: 190, padding: 6 }}>
+                <div className="card dropdown-panel mobile-menu-panel" style={{ position: 'absolute', top: 36, right: 0, zIndex: 5, minWidth: 190, padding: 6 }}>
                   <button className="row" style={{ width: '100%', gap: 8, padding: 8, fontSize: 13 }} onClick={() => bannerInputRef.current?.click()}>
                     <Icon name="edit" size={14} /> {profile.hasUploadedBanner ? 'Change cover picture' : 'Upload cover picture'}
                   </button>
@@ -237,7 +237,7 @@ export function ProfilePage({ userId }: { userId: string }) {
                 <div className="row" style={{ gap: 6 }}>
                   <Button size="sm" variant="ghost" onClick={() => setEditing(false)}>Cancel</Button>
                   <Button size="sm" icon="check" onClick={handleSave} disabled={saveLoading}>
-                    {saveLoading ? '…' : 'Save'}
+                    {saveLoading ? '...' : 'Save'}
                   </Button>
                 </div>
               ) : (
@@ -248,9 +248,9 @@ export function ProfilePage({ userId }: { userId: string }) {
             </div>
           )}
         </div>
-        <div style={{ padding: '0 24px 24px', marginTop: -44 }}>
-          <div className="row between" style={{ alignItems: 'flex-end', flexWrap: 'wrap', gap: 12 }}>
-            <div className="row" style={{ gap: 18, alignItems: 'flex-end' }}>
+        <div style={{ padding: '0 24px 24px', marginTop: -44, position: 'relative', zIndex: 1 }}>
+          <div className="row between mobile-wrap" style={{ alignItems: 'flex-end', flexWrap: 'wrap', gap: 12 }}>
+            <div className="row mobile-wrap profile-header-inner" style={{ gap: 18, alignItems: 'flex-end' }}>
               <div style={{ position: 'relative' }}>
                 <input
                   ref={avatarInputRef}
@@ -279,7 +279,7 @@ export function ProfilePage({ userId }: { userId: string }) {
                   </button>
                 )}
                 {avatarMenuOpen && (
-                  <div className="card" style={{ position: 'absolute', left: 0, top: 84, zIndex: 5, minWidth: 210, padding: 6 }}>
+                  <div className="card dropdown-panel mobile-menu-panel" style={{ position: 'absolute', left: 0, top: 84, zIndex: 5, minWidth: 210, padding: 6 }}>
                     <button className="row" style={{ width: '100%', gap: 8, padding: 8, fontSize: 13 }} onClick={() => avatarInputRef.current?.click()}>
                       <Icon name="edit" size={14} /> Upload profile picture
                     </button>
@@ -307,12 +307,12 @@ export function ProfilePage({ userId }: { userId: string }) {
                   </div>
                 )}
               </div>
-              <div style={{ paddingBottom: 6 }}>
+              <div style={{ paddingBottom: 6, minWidth: 0 }}>
                 {!editing ? (
                   <>
-                    <div className="font-display" style={{ fontSize: 24, fontWeight: 600 }}>{profile.displayName}</div>
+                    <div className="font-display profile-display-name" style={{ fontSize: 24, fontWeight: 600 }}>{profile.displayName}</div>
                     <div className="mono" style={{ fontSize: 12, color: 'var(--text-lo)' }}>
-                      @{profile.username} · joined {joinedYear}{regionText ? ` · ${regionText}` : ''}
+                      @{profile.username}  -  joined {joinedYear}{regionText ? `  -  ${regionText}` : ''}
                     </div>
                     {profile.statusMessage && (
                       <div style={{ fontSize: 12, color: 'var(--text-md)', marginTop: 4 }}>{profile.statusMessage}</div>
@@ -326,7 +326,7 @@ export function ProfilePage({ userId }: { userId: string }) {
                 )}
               </div>
             </div>
-            <div className="row" style={{ gap: 8 }}>
+            <div className="row mobile-wrap" style={{ gap: 8 }}>
               <span className="chip chip--mono">{profile.elo} ELO</span>
               <span className="chip chip--mono">Lv {profile.level}</span>
               <span className="chip chip--mono">{profile.profileType}</span>
@@ -358,12 +358,12 @@ export function ProfilePage({ userId }: { userId: string }) {
         </div>
       </div>
 
-      {/* Stats — placeholders until Module 10 */}
+      {/* Stats - placeholders until Module 10 */}
       <div className="grid grid-4" style={{ marginTop: 18 }}>
-        <StatCard label="Matches"     value="—"  hint="Module 10"   icon="controller" />
-        <StatCard label="Win rate"    value="—"  hint="Module 10"   icon="trophy" />
-        <StatCard label="Best streak" value="—"  hint="Module 10"   icon="flame" />
-        <StatCard label="Friends"     value="—"  hint="Module 3"    icon="users" accent="ice" />
+        <StatCard label="Matches"     value="-"  hint="Module 10"   icon="controller" />
+        <StatCard label="Win rate"    value="-"  hint="Module 10"   icon="trophy" />
+        <StatCard label="Best streak" value="-"  hint="Module 10"   icon="flame" />
+        <StatCard label="Friends"     value="-"  hint="Module 3"    icon="users" accent="ice" />
       </div>
 
       <div style={{ marginTop: 24 }}>
@@ -391,7 +391,7 @@ export function ProfilePage({ userId }: { userId: string }) {
 
 function ProfileOverview() {
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18 }}>
+    <div className="responsive-split" style={{ gridTemplateColumns: '1.4fr 1fr' }}>
       <PerformanceChart />
       <div className="col" style={{ gap: 18 }}>
         <FavoriteGames compact />
@@ -447,7 +447,7 @@ function MatchHistoryTable() {
   const matches = [...RECENT_MATCHES, ...RECENT_MATCHES.map((m, i) => ({ ...m, id: m.id + 'x' + i, when: '4d ago' }))];
   return (
     <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
-      <div className="row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-1)' }}>
+      <div className="match-history-header row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-1)' }}>
         <div className="uppercase-label" style={{ width: 120 }}>Result</div>
         <div className="uppercase-label" style={{ flex: 1 }}>Game / Opponent</div>
         <div className="uppercase-label" style={{ width: 120 }}>Duration</div>
@@ -457,7 +457,7 @@ function MatchHistoryTable() {
       {matches.map(m => {
         const c = m.result === 'win' ? 'var(--success)' : m.result === 'loss' ? 'var(--danger)' : 'var(--text-lo)';
         return (
-          <div key={m.id} className="row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-1)' }}>
+          <div key={m.id} className="match-history-row row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-1)' }}>
             <div className="row" style={{ width: 120, gap: 8 }}>
               <div style={{ width: 6, height: 18, background: c, borderRadius: 3 }} />
               <span style={{ textTransform: 'uppercase', fontSize: 11, color: c, fontWeight: 600, letterSpacing: '0.06em', fontFamily: 'var(--font-mono)' }}>{m.result}</span>
diff --git a/src/features/room/GameRoomPage.tsx b/src/features/room/GameRoomPage.tsx
index 0dd6bff..e5fbcb1 100644
--- a/src/features/room/GameRoomPage.tsx
+++ b/src/features/room/GameRoomPage.tsx
@@ -57,9 +57,9 @@ export function GameRoomPage({ matchId }: { matchId: string }) {
   };
 
   return (
-    <div style={{ padding: '22px 36px 36px', maxWidth: 1440, margin: '0 auto' }}>
+    <div className="page game-room-page">
       <div className="row between" style={{ marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
-        <div className="row" style={{ gap: 8 }}>
+        <div className="row mobile-scroll-row" style={{ gap: 8 }}>
           <button className="btn btn-ghost btn-sm" onClick={() => router.push(ROUTES.games)}>
             <Icon name="chevronLeft" size={14} /> Exit
           </button>
@@ -67,14 +67,14 @@ export function GameRoomPage({ matchId }: { matchId: string }) {
           <span className="chip chip--mono">{isAi ? 'Vs AI · Hard' : 'Vs Friend'}</span>
           <span className="chip chip--mono">Lobby SP-7F-29</span>
         </div>
-        <div className="row" style={{ gap: 8 }}>
+        <div className="row mobile-actions" style={{ gap: 8 }}>
           <Button size="sm" variant="ghost" icon="pause" onClick={() => setPaused(true)}>Pause</Button>
           <Button size="sm" variant="ghost" icon="flag" onClick={() => setResolved('loss')}>Forfeit</Button>
           <Button size="sm" variant="ghost" icon="settings">Settings</Button>
         </div>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 320px', gap: 18, alignItems: 'start' }}>
+      <div className="responsive-room" style={{ gridTemplateColumns: '260px 1fr 320px' }}>
         <div className="col" style={{ gap: 14 }}>
           <PlayerPanel user={CURRENT_USER} you turn={turn === 'you'} score={score.you} timer="04:18" />
           <div className="card" style={{ padding: 18 }}>
@@ -85,13 +85,13 @@ export function GameRoomPage({ matchId }: { matchId: string }) {
           <PlayerPanel user={opp} turn={turn === 'opp'} score={score.opp} timer="05:02" />
         </div>
 
-        <div className="card-elev" style={{ padding: 20 }}>
-          <div className="row between" style={{ marginBottom: 14 }}>
-            <div className="row" style={{ gap: 8 }}>
+        <div className="card-elev" style={{ padding: 20, overflow: 'hidden' }}>
+          <div className="row between mobile-wrap" style={{ marginBottom: 14 }}>
+            <div className="row mobile-wrap" style={{ gap: 8 }}>
               <span className="chip chip--red chip--mono"><span className="dot dot--playing" /> {turn === 'you' ? 'Your move' : "Opponent's move"}</span>
               <span className="chip chip--mono">Round 3 / 5</span>
             </div>
-            <div className="row" style={{ gap: 8 }}>
+            <div className="row mobile-actions" style={{ gap: 8 }}>
               <Button size="sm" variant="ghost" icon="bolt">Hint</Button>
               <Button size="sm" variant="ghost" icon="refresh">Undo</Button>
             </div>
@@ -128,7 +128,7 @@ export function GameRoomPage({ matchId }: { matchId: string }) {
       >
         <p>The match is paused for both players. Your opponent has been notified.</p>
         <div className="surface" style={{ marginTop: 14, padding: 12 }}>
-          <div className="row" style={{ gap: 8 }}>
+            <div className="row" style={{ gap: 8, alignItems: 'flex-start' }}>
             <Icon name="shield" size={14} style={{ color: 'var(--text-lo)' }} />
             <span className="mono" style={{ fontSize: 11, color: 'var(--text-lo)' }}>Pauses are limited to 2 per match (1 used).</span>
           </div>
@@ -221,7 +221,7 @@ function SudokuBoard({ selected, setSelected }: { selected: number; setSelected:
   const col = selected % 9;
   const box = [Math.floor(row / 3), Math.floor(col / 3)];
   return (
-    <div className="sudoku" style={{ maxWidth: 520, margin: '0 auto' }}>
+    <div className="sudoku" style={{ margin: '0 auto' }}>
       {Array.from({ length: 81 }).map((_, i) => {
         const v = SUDOKU_GIVEN[i];
         const r = Math.floor(i / 9), c = i % 9;
diff --git a/src/features/settings/SettingsPage.tsx b/src/features/settings/SettingsPage.tsx
index 3d82a2e..9b77454 100644
--- a/src/features/settings/SettingsPage.tsx
+++ b/src/features/settings/SettingsPage.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button } from '@/components/ui/Button';
 import { Avatar } from '@/components/ui/Avatar';
@@ -9,6 +9,7 @@ import { accountApi, type Session } from '@/features/auth/accountApi';
 import { ApiError } from '@/lib/api-client';
 import { useAuth } from '@/features/auth/AuthProvider';
 import { profileApi, type UserProfile, type UsernameChangeRequest } from '@/features/profile/profileApi';
+import { useTheme } from '@/lib/theme';
 
 const LINK_PLATFORMS = [
   { value: 'github',    label: 'GitHub' },
@@ -67,8 +68,8 @@ export function SettingsPage() {
         <div className="page-sub">Account, gameplay, notifications and more.</div>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24, marginTop: 22 }}>
-        <aside className="card" style={{ padding: 8, height: 'fit-content' }}>
+      <div className="settings-layout" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24, marginTop: 22 }}>
+        <aside className="card settings-nav" style={{ padding: 8, height: 'fit-content' }}>
           {SECTIONS.map(s => (
             <button
               key={s.id}
@@ -88,7 +89,7 @@ export function SettingsPage() {
           ))}
         </aside>
 
-        <div>
+        <div style={{ minWidth: 0 }}>
           {tab === 'account' && <AccountSettings />}
           {tab === 'theme'   && <ThemeSettings />}
           {tab === 'notify'  && <NotifySettings />}
@@ -101,7 +102,7 @@ export function SettingsPage() {
 
 function SettingCard({ title, sub, children }: { title: string; sub?: string; children: React.ReactNode }) {
   return (
-    <div className="card" style={{ padding: 22, marginBottom: 18 }}>
+    <div className="card setting-card" style={{ padding: 22, marginBottom: 18 }}>
       <div style={{ marginBottom: 14 }}>
         <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>{title}</div>
         {sub && <div className="page-sub">{sub}</div>}
@@ -113,12 +114,12 @@ function SettingCard({ title, sub, children }: { title: string; sub?: string; ch
 
 function SettingRow({ label, hint, right }: { label: string; hint?: string; right: React.ReactNode }) {
   return (
-    <div className="row between" style={{ padding: '12px 0', borderTop: '1px solid var(--border-1)' }}>
+    <div className="row between setting-row" style={{ padding: '12px 0', borderTop: '1px solid var(--border-1)', flexWrap: 'wrap', gap: 8 }}>
       <div style={{ minWidth: 0 }}>
         <div style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</div>
         {hint && <div style={{ fontSize: 12, color: 'var(--text-lo)', marginTop: 2 }}>{hint}</div>}
       </div>
-      <div>{right}</div>
+      <div style={{ minWidth: 0 }}>{right}</div>
     </div>
   );
 }
@@ -136,7 +137,7 @@ function AccountSettings() {
   const toast = useToast();
   const { user, logout } = useAuth();
 
-  // ── Profile card (Module 2) ───────────────────────────────────────────────
+  // -- Profile card (Module 2) -----------------------------------------------
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [profileForm, setProfileForm] = useState({ displayName: '', bio: '', visibility: 'Public' as UserProfile['visibility'], profileType: 'Player' as UserProfile['profileType'] });
   const [linkForm, setLinkForm] = useState<UserProfile['links']>([]);
@@ -154,6 +155,8 @@ function AccountSettings() {
   const [localBannerColor, setLocalBannerColor] = useState<string | null>(null);
   // Warn when Save Changes is clicked while there are unsaved link edits.
   const [linksConflict, setLinksConflict] = useState(false);
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [sessionsLoading, setSessionsLoading] = useState(false);
 
   useEffect(() => {
     profileApi.getMe().then(p => {
@@ -168,7 +171,7 @@ function AccountSettings() {
     accountApi.getSessions().then(setSessions).catch(() => {});
   }, []);
 
-  // ── Change password ───────────────────────────────────────────────────────
+  // -- Change password -------------------------------------------------------
   const [showChangePw, setShowChangePw] = useState(false);
   const [pwForm, setPwForm] = useState({ current: '', next: '', confirm: '' });
   const [pwLoading, setPwLoading] = useState(false);
@@ -192,7 +195,7 @@ function AccountSettings() {
     }
   };
 
-  // ── Change email ──────────────────────────────────────────────────────────
+  // -- Change email ----------------------------------------------------------
   const [showChangeEmail, setShowChangeEmail] = useState(false);
   const [newEmail, setNewEmail] = useState('');
   const [emailLoading, setEmailLoading] = useState(false);
@@ -211,9 +214,6 @@ function AccountSettings() {
     }
   };
 
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [sessionsLoading, setSessionsLoading] = useState(false);
-
   const loadSessions = useCallback(async () => {
     setSessionsLoading(true);
     try {
@@ -224,7 +224,7 @@ function AccountSettings() {
     } finally {
       setSessionsLoading(false);
     }
-  }, [toast]);
+  }, [toast, setSessions]);
 
   const handleRevokeSession = async (id: string) => {
     try {
@@ -251,7 +251,7 @@ function AccountSettings() {
     }
   };
 
-  // ── Delete account ────────────────────────────────────────────────────────
+  // -- Delete account --------------------------------------------------------
   const [showDelete, setShowDelete] = useState(false);
   const [deletePassword, setDeletePassword] = useState('');
   const [deleteLoading, setDeleteLoading] = useState(false);
@@ -326,7 +326,7 @@ function AccountSettings() {
       <SettingCard title="Profile" sub="Public info shown to other players.">
         {profile ? (
           <>
-            <div className="row" style={{ gap: 18 }}>
+            <div className="row mobile-stack settings-profile-row" style={{ gap: 18 }}>
               <div style={{ position: 'relative', cursor: 'pointer' }} title="Click to upload a new avatar">
                 <Avatar user={{ initials: profile.initials, color: localAvatarColor ?? profile.color, status: 'online' }} src={profile.avatarUrl} size="xl" />
                 <label style={{
@@ -356,7 +356,7 @@ function AccountSettings() {
                   <Icon name={avatarUploading ? 'refresh' : 'edit'} size={16} style={{ color: '#fff' }} />
                 </label>
               </div>
-              <div className="col" style={{ gap: 6, minWidth: 150 }}>
+              <div className="col settings-avatar-opts" style={{ gap: 6 }}>
                 {profile.hasUploadedAvatar ? (
                   <Button size="sm" variant="ghost" icon="trash" onClick={async () => {
                     setAvatarUploading(true);
@@ -384,7 +384,7 @@ function AccountSettings() {
                 )}
               </div>
               <div className="col" style={{ flex: 1, gap: 10 }}>
-                <div style={{
+                <div className="profile-banner" style={{
                   minHeight: 72, borderRadius: 8, border: '1px solid var(--border-1)',
                   background: profile.bannerUrl ? `url(${profile.bannerUrl}) center/cover` : `linear-gradient(135deg, ${localBannerColor ?? profile.bannerFallbackColor} 0%, #1B2238 55%, #0B0F18 100%)`,
                   position: 'relative', overflow: 'hidden'
@@ -535,7 +535,7 @@ function AccountSettings() {
               <div className="col" style={{ gap: 8 }}>
                 {linkForm.map((link, index) => (
                   <div key={link.id} className="col" style={{ gap: 4 }}>
-                    <div className="row" style={{ gap: 8, alignItems: 'center' }}>
+                    <div className="row link-form-row" style={{ gap: 8, alignItems: 'center' }}>
                     <select className="input" aria-label="Link platform" value={link.platform}
                       onChange={e => {
                         const newPlatform = e.target.value;
@@ -726,14 +726,14 @@ function AccountSettings() {
             </div>
           </>
         ) : (
-          <div style={{ fontSize: 13, color: 'var(--text-lo)', padding: '8px 0' }}>Loading…</div>
+          <div style={{ fontSize: 13, color: 'var(--text-lo)', padding: '8px 0' }}>Loading...</div>
         )}
       </SettingCard>
 
       <SettingCard title="Login & security">
         <SettingRow
           label="Email"
-          hint={user ? `${user.email} · ${user.isEmailVerified ? 'verified' : 'unverified'}` : '—'}
+          hint={user ? `${user.email}  -  ${user.isEmailVerified ? 'verified' : 'unverified'}` : '-'}
           right={
             showChangeEmail ? (
               <div className="row" style={{ gap: 6 }}>
@@ -745,7 +745,7 @@ function AccountSettings() {
                   style={{ width: 180 }}
                 />
                 <Button size="sm" onClick={handleChangeEmail} disabled={emailLoading || !newEmail}>
-                  {emailLoading ? '…' : 'Send link'}
+                  {emailLoading ? '...' : 'Send link'}
                 </Button>
                 <Button size="sm" variant="ghost" onClick={() => setShowChangeEmail(false)}>Cancel</Button>
               </div>
@@ -769,7 +769,7 @@ function AccountSettings() {
                   value={pwForm.confirm} onChange={e => setPwForm(f => ({ ...f, confirm: e.target.value }))} style={{ width: 220 }} />
                 <div className="row" style={{ gap: 6 }}>
                   <Button size="sm" onClick={handleChangePassword} disabled={pwLoading || !pwForm.current || !pwForm.next}>
-                    {pwLoading ? '…' : 'Update'}
+                    {pwLoading ? '...' : 'Update'}
                   </Button>
                   <Button size="sm" variant="ghost" onClick={() => setShowChangePw(false)}>Cancel</Button>
                 </div>
@@ -811,7 +811,7 @@ function AccountSettings() {
                 <Button size="sm" onClick={handleDeleteAccount}
                   disabled={deleteLoading || !deletePassword}
                   style={{ background: 'var(--danger)', borderColor: 'var(--danger)', color: '#fff' }}>
-                  {deleteLoading ? '…' : 'Delete'}
+                  {deleteLoading ? '...' : 'Delete'}
                 </Button>
                 <Button size="sm" variant="ghost" onClick={() => setShowDelete(false)}>Cancel</Button>
               </div>
@@ -827,66 +827,68 @@ function AccountSettings() {
 }
 
 function ThemeSettings() {
-  const [theme, setTheme] = useState('midnight');
-  const [accent, setAccent] = useState('#F0394B');
-  const [density, setDensity] = useState('Default');
-  const themes = [
-    { id: 'midnight', name: 'Midnight', a: '#0A0E18', b: '#161C2E' },
-    { id: 'obsidian', name: 'Obsidian', a: '#070B14', b: '#10162A' },
-    { id: 'slate',    name: 'Slate',    a: '#0F172A', b: '#1E293B' },
-  ];
-  return (
-    <>
-      <SettingCard title="Appearance" sub="Dark-first. Light coming later.">
-        <div className="grid grid-3">
-          {themes.map(t => (
-            <button
-              key={t.id}
-              onClick={() => setTheme(t.id)}
-              className="surface"
-              style={{
-                padding: 14, textAlign: 'left', cursor: 'pointer',
-                border: theme === t.id ? '1px solid rgba(240,57,75,0.4)' : undefined,
-                background: theme === t.id ? 'var(--red-soft)' : undefined,
-              }}
-            >
-              <div style={{ height: 60, borderRadius: 8, background: `linear-gradient(180deg, ${t.a}, ${t.b})`, border: '1px solid var(--border-2)' }} />
-              <div className="row between" style={{ marginTop: 10 }}>
-                <span style={{ fontSize: 13, fontWeight: 600 }}>{t.name}</span>
-                {theme === t.id && <span className="chip chip--red chip--mono"><Icon name="check" size={11} />Active</span>}
-              </div>
-            </button>
-          ))}
+  const { theme, setTheme } = useTheme();
+
+  const options = [
+    {
+      id: 'dark' as const,
+      name: 'Dark',
+      sub: 'Midnight blue - default',
+      preview: (
+        <div style={{ position: 'relative', height: 60, borderRadius: 8, background: 'linear-gradient(180deg, #0A0E18, #161C2E)', border: '1px solid #252E48', overflow: 'hidden' }}>
+          <div style={{ position: 'absolute', top: 8, left: 8, width: 18, height: 6, borderRadius: 3, background: '#F0394B' }} />
+          <div style={{ position: 'absolute', top: 8, left: 30, width: 38, height: 6, borderRadius: 3, background: '#252E48' }} />
+          <div style={{ position: 'absolute', top: 22, left: 8, right: 8, height: 24, borderRadius: 5, background: '#161C2E', border: '1px solid #252E48' }} />
         </div>
-      </SettingCard>
-
-      <SettingCard title="Accent color">
-        <div className="row" style={{ gap: 10 }}>
-          {['#F0394B', '#38BDF8', '#A78BFA', '#34D399', '#F59E0B', '#F472B6'].map(c => (
-            <button
-              key={c}
-              onClick={() => setAccent(c)}
-              aria-label={c}
-              style={{
-                width: 34, height: 34, borderRadius: 999, background: c, cursor: 'pointer',
-                border: accent === c ? '2px solid #fff' : '2px solid transparent',
-                boxShadow: accent === c ? `0 0 0 2px var(--bg-0), 0 0 0 4px ${c}` : 'none',
-              }}
-            />
-          ))}
+      ),
+    },
+    {
+      id: 'light' as const,
+      name: 'Light',
+      sub: 'Soft ink - paper white',
+      preview: (
+        <div style={{ position: 'relative', height: 60, borderRadius: 8, background: 'linear-gradient(180deg, #FFFFFF, #F4F6FB)', border: '1px solid #DEE3EF', overflow: 'hidden' }}>
+          <div style={{ position: 'absolute', top: 8, left: 8, width: 18, height: 6, borderRadius: 3, background: '#D62133' }} />
+          <div style={{ position: 'absolute', top: 8, left: 30, width: 38, height: 6, borderRadius: 3, background: '#DEE3EF' }} />
+          <div style={{ position: 'absolute', top: 22, left: 8, right: 8, height: 24, borderRadius: 5, background: '#FFFFFF', border: '1px solid #DEE3EF' }} />
         </div>
-      </SettingCard>
+      ),
+    },
+  ];
 
-      <SettingCard title="Density">
-        <SettingRow label="UI density" hint="Compact saves space, comfortable feels premium." right={
-          <div className="tabs">
-            {['Compact', 'Default', 'Comfortable'].map(d => (
-              <button key={d} className={`tab ${d === density ? 'tab--active' : ''}`} onClick={() => setDensity(d)}>{d}</button>
-            ))}
-          </div>
-        } />
-      </SettingCard>
-    </>
+  return (
+    <SettingCard title="Appearance" sub="Choose your visual mode. Persists across sessions.">
+      <div className="grid grid-2">
+        {options.map(option => (
+          <button
+            key={option.id}
+            onClick={() => setTheme(option.id)}
+            className="surface"
+            aria-pressed={theme === option.id}
+            style={{
+              padding: 14,
+              textAlign: 'left',
+              cursor: 'pointer',
+              border: theme === option.id ? '1px solid rgba(240,57,75,0.4)' : '1px solid var(--border-2)',
+              background: theme === option.id ? 'var(--red-soft)' : 'var(--bg-2)',
+            }}
+          >
+            {option.preview}
+            <div className="row between" style={{ marginTop: 12 }}>
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 600 }}>{option.name}</div>
+                <div className="mono" style={{ fontSize: 11, color: 'var(--text-lo)', marginTop: 2 }}>{option.sub}</div>
+              </div>
+              {theme === option.id && <span className="chip chip--red chip--mono"><Icon name="check" size={11} />Active</span>}
+            </div>
+          </button>
+        ))}
+      </div>
+      <div className="surface row" style={{ marginTop: 12, padding: 12, gap: 10 }}>
+        <Icon name="sparkle" size={14} style={{ color: 'var(--ice-400)' }} />
+        <span style={{ fontSize: 12.5, color: 'var(--text-md)' }}>SimPle follows your system preference until you choose one explicitly.</span>
+      </div>
+    </SettingCard>
   );
 }
 
@@ -895,12 +897,12 @@ function NotifySettings() {
   const toggle = (k: keyof typeof states) => setStates(s => ({ ...s, [k]: !s[k] }));
   return (
     <SettingCard title="Notifications" sub="Choose where and when SimPle reaches out.">
-      <SettingRow label="Lobby invites" hint="In-app · email" right={<Toggle on={states.lobby} onChange={() => toggle('lobby')} label="" />} />
+      <SettingRow label="Lobby invites" hint="In-app  -  email" right={<Toggle on={states.lobby} onChange={() => toggle('lobby')} label="" />} />
       <SettingRow label="Friend requests" right={<Toggle on={states.friend} onChange={() => toggle('friend')} label="" />} />
       <SettingRow label="Direct messages" hint="In-app only" right={<Toggle on={states.dm} onChange={() => toggle('dm')} label="" />} />
       <SettingRow label="Match results" hint="Win/loss summaries" right={<Toggle on={states.result} onChange={() => toggle('result')} label="" />} />
       <SettingRow label="Season announcements" right={<Toggle on={states.season} onChange={() => toggle('season')} label="" />} />
-      <SettingRow label="Email digest" hint="Weekly · Sunday 19:00" right={<Toggle on={states.digest} onChange={() => toggle('digest')} label="" />} />
+      <SettingRow label="Email digest" hint="Weekly  -  Sunday 19:00" right={<Toggle on={states.digest} onChange={() => toggle('digest')} label="" />} />
     </SettingCard>
   );
 }
@@ -1013,5 +1015,3 @@ function SessionsList({
     </div>
   );
 }
-
-
diff --git a/src/lib/mock-api.ts b/src/lib/mock-api.ts
index 12e5688..fb63a0a 100644
--- a/src/lib/mock-api.ts
+++ b/src/lib/mock-api.ts
@@ -14,7 +14,7 @@ import type {
 
 const delay = (ms = 300) => new Promise<void>(r => setTimeout(r, ms));
 
-// ── Auth ──────────────────────────────────────────────────────────────────────
+// -- Auth ----------------------------------------------------------------------
 export async function login(_email: string, _password: string): Promise<User> {
   await delay(700);
   return CURRENT_USER;
@@ -34,7 +34,7 @@ export async function logout(): Promise<void> {
   await delay(200);
 }
 
-// ── User profile ──────────────────────────────────────────────────────────────
+// -- User profile --------------------------------------------------------------
 export async function getUserById(id: string): Promise<User> {
   await delay(200);
   void id;
@@ -52,7 +52,7 @@ export async function searchUsers(query: string): Promise<User[]> {
   return [];
 }
 
-// ── Friends ───────────────────────────────────────────────────────────────────
+// -- Friends -------------------------------------------------------------------
 export async function getFriends(): Promise<Friend[]> {
   await delay(200);
   return FRIENDS;
@@ -88,7 +88,7 @@ export async function removeFriend(friendId: string): Promise<void> {
   void friendId;
 }
 
-// ── Games ─────────────────────────────────────────────────────────────────────
+// -- Games ---------------------------------------------------------------------
 export async function getGames(): Promise<Game[]> {
   await delay(200);
   return GAMES;
@@ -99,13 +99,13 @@ export async function getGameById(id: string): Promise<Game | undefined> {
   return GAMES.find(g => g.id === id);
 }
 
-// ── Matches ───────────────────────────────────────────────────────────────────
+// -- Matches -------------------------------------------------------------------
 export async function getRecentMatches(): Promise<Match[]> {
   await delay(200);
   return RECENT_MATCHES;
 }
 
-// ── Notifications ─────────────────────────────────────────────────────────────
+// -- Notifications -------------------------------------------------------------
 export async function getNotifications(): Promise<Notification[]> {
   await delay(100);
   return NOTIFICATIONS;
@@ -115,19 +115,19 @@ export async function markAllRead(): Promise<void> {
   await delay(200);
 }
 
-// ── Achievements ──────────────────────────────────────────────────────────────
+// -- Achievements --------------------------------------------------------------
 export async function getAchievements(): Promise<Achievement[]> {
   await delay(200);
   return ACHIEVEMENTS;
 }
 
-// ── Leaderboards ──────────────────────────────────────────────────────────────
+// -- Leaderboards --------------------------------------------------------------
 export async function getLeaderboard(_scope: 'global' | 'friends' = 'global'): Promise<LeaderboardRow[]> {
   await delay(300);
   return LEADERBOARD_GLOBAL;
 }
 
-// ── Lobbies ───────────────────────────────────────────────────────────────────
+// -- Lobbies -------------------------------------------------------------------
 export async function createLobby(gameId: string, options: Record<string, unknown> = {}): Promise<{ id: string }> {
   await delay(400);
   void gameId; void options;
diff --git a/src/lib/theme.tsx b/src/lib/theme.tsx
new file mode 100644
index 0000000..12e088d
--- /dev/null
+++ b/src/lib/theme.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+const STORAGE_KEY = 'simple.theme';
+
+interface ThemeContextValue {
+  theme: Theme;
+  isDark: boolean;
+  isLight: boolean;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeCtx = createContext<ThemeContextValue | null>(null);
+
+function applyTheme(theme: Theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    // Ignore storage failures in private browsing or locked-down contexts.
+  }
+
+  let meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+  if (!meta) {
+    meta = document.createElement('meta');
+    meta.setAttribute('name', 'theme-color');
+    document.head.appendChild(meta);
+  }
+  meta.setAttribute('content', theme === 'light' ? '#F7F8FC' : '#0A0E18');
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof document !== 'undefined') {
+      const current = document.documentElement.getAttribute('data-theme');
+      if (current === 'light' || current === 'dark') return current;
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === 'light' || stored === 'dark') return stored;
+      } catch {
+        // Ignore storage failures and fall back to dark.
+      }
+    }
+    return 'dark';
+  });
+
+  const setTheme = useCallback((nextTheme: Theme) => {
+    setThemeState(nextTheme);
+    applyTheme(nextTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [setTheme, theme]);
+
+  useEffect(() => {
+    const media = window.matchMedia?.('(prefers-color-scheme: light)');
+    if (!media) return;
+
+    const onChange = (event: MediaQueryListEvent) => {
+      try {
+        if (localStorage.getItem(STORAGE_KEY)) return;
+      } catch {
+        return;
+      }
+      setTheme(event.matches ? 'light' : 'dark');
+    };
+
+    media.addEventListener('change', onChange);
+    return () => media.removeEventListener('change', onChange);
+  }, [setTheme]);
+
+  const value = useMemo<ThemeContextValue>(() => ({
+    theme,
+    isDark: theme === 'dark',
+    isLight: theme === 'light',
+    setTheme,
+    toggleTheme,
+  }), [setTheme, theme, toggleTheme]);
+
+  return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  return useContext(ThemeCtx) ?? {
+    theme: 'dark',
+    isDark: true,
+    isLight: false,
+    setTheme: () => {},
+    toggleTheme: () => {},
+  };
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 011a042..d698489 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
 @import "tailwindcss";
 
-/* ─── SimPle Design Tokens ─── */
+/* --- SimPle Design Tokens --- */
 :root {
   --bg-0: #05080F;
   --bg-1: #0A0E18;
@@ -70,7 +70,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
-html, body { height: 100%; }
+html, body { min-height: 100%; max-width: 100%; overflow-x: clip; }
 body {
   margin: 0;
   font-family: var(--font-body);
@@ -81,6 +81,9 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+#__next, main, section, article, aside, header, footer, nav { min-width: 0; }
+img, svg, canvas, video { max-width: 100%; }
+
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid var(--bg-1); }
@@ -91,13 +94,15 @@ p { margin: 0; color: var(--text-md); line-height: 1.55; }
 a { color: inherit; text-decoration: none; }
 button { font: inherit; cursor: pointer; border: none; background: none; }
 
-/* ─── App Shell ─── */
+/* --- App Shell --- */
 .app {
   display: grid;
   grid-template-columns: var(--sidebar-w) 1fr;
   grid-template-rows: var(--topbar-h) 1fr;
   grid-template-areas: "sidebar topbar" "sidebar main";
   min-height: 100vh;
+  min-width: 0;
+  max-width: 100vw;
   background:
     radial-gradient(1200px 600px at -10% -20%, rgba(240,57,75,0.06), transparent 60%),
     radial-gradient(900px 500px at 110% 10%, rgba(56,189,248,0.04), transparent 60%),
@@ -105,9 +110,9 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 }
 .app__sidebar { grid-area: sidebar; }
 .app__topbar  { grid-area: topbar; }
-.app__main    { grid-area: main; overflow: auto; }
+.app__main    { grid-area: main; overflow: auto; min-width: 0; max-width: 100%; }
 
-/* ─── Sidebar ─── */
+/* --- Sidebar --- */
 .sidebar {
   height: 100vh;
   position: sticky; top: 0;
@@ -170,7 +175,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   color: var(--red-400); border: 1px solid rgba(240,57,75,0.25);
 }
 
-/* ─── Topbar ─── */
+/* --- Topbar --- */
 .topbar {
   height: var(--topbar-h);
   position: sticky; top: 0; z-index: 20;
@@ -180,24 +185,68 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   border-bottom: 1px solid var(--border-1);
   display: flex; align-items: center;
   gap: 16px; padding: 0 22px;
+  min-width: 0;
+}
+.topbar { transition: transform 0.25s ease; }
+.topbar--hidden { transform: translateY(-100%); }
+.topbar__nav-btn { display: none !important; }
+.topbar__search-btn { display: none !important; }
+
+/* --- Mobile Nav Drawer overrides (labels always visible in drawer) --- */
+.drawer-nav-label { display: flex !important; }
+.drawer-nav-item { justify-content: flex-start !important; padding: 9px 12px !important; }
+.drawer-nav-item .drawer-nav-label { flex: 1; }
+
+/* --- Mobile Nav Drawer --- */
+.mobile-drawer-overlay {
+  position: fixed; inset: 0; z-index: 50;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+.mobile-drawer {
+  position: fixed; left: 0; top: 0; bottom: 0; z-index: 51;
+  width: min(280px, 85vw);
+  background: var(--bg-2);
+  border-right: 1px solid var(--border-2);
+  display: flex; flex-direction: column;
+  overflow-y: auto;
+  animation: drawer-in 0.22s ease;
+}
+@keyframes drawer-in {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+.mobile-drawer__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 12px 10px;
+  border-bottom: 1px solid var(--border-1);
+}
+.mobile-drawer__nav {
+  flex: 1; padding: 8px 10px;
+}
+.mobile-drawer__footer {
+  padding: 10px;
+  border-top: 1px solid var(--border-1);
 }
 
-/* ─── Surfaces ─── */
+/* --- Surfaces --- */
 .surface {
   background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--bg-2);
   border: 1px solid var(--border-1);
   border-radius: var(--r-md);
 }
-.card     { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-md); }
-.card-elev { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
+.card     { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-md); min-width: 0; max-width: 100%; }
+.card-elev { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-2); min-width: 0; max-width: 100%; }
 
-/* ─── Buttons ─── */
+/* --- Buttons --- */
 .btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
   height: 38px; padding: 0 16px; border-radius: var(--r-sm);
   font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
   transition: transform .08s, background .15s, border-color .15s, box-shadow .15s, color .15s;
   white-space: nowrap; font-family: var(--font-body); cursor: pointer;
+  max-width: 100%;
 }
 .btn:active { transform: translateY(1px); }
 .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--border-focus); }
@@ -217,12 +266,14 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 .btn-icon { width: 38px; padding: 0; }
 .btn-icon.btn-sm { width: 32px; }
 
-/* ─── Chips ─── */
+/* --- Chips --- */
 .chip {
   display: inline-flex; align-items: center; gap: 6px;
   height: 24px; padding: 0 10px; border-radius: 999px;
   font-size: 11.5px; font-weight: 500;
   background: var(--bg-3); color: var(--text-md); border: 1px solid var(--border-2);
+  max-width: 100%;
+  min-width: 0;
 }
 .chip--red     { background: var(--red-soft); color: var(--red-400); border-color: rgba(240,57,75,0.3); }
 .chip--ice     { background: rgba(56,189,248,0.08); color: var(--ice-400); border-color: rgba(56,189,248,0.25); }
@@ -230,7 +281,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 .chip--warn    { background: rgba(245,158,11,0.08); color: var(--warning); border-color: rgba(245,158,11,0.25); }
 .chip--mono    { font-family: var(--font-mono); letter-spacing: 0.04em; }
 
-/* ─── Dots ─── */
+/* --- Dots --- */
 .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
 .dot--online   { background: var(--presence-online);  box-shadow: 0 0 0 3px rgba(52,211,153,0.18); }
 .dot--away     { background: var(--presence-away);    box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
@@ -241,7 +292,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   50%      { box-shadow: 0 0 0 6px rgba(240,57,75,0.06); }
 }
 
-/* ─── Avatar ─── */
+/* --- Avatar --- */
 .avatar {
   width: 36px; height: 36px; border-radius: 999px;
   display: inline-flex; align-items: center; justify-content: center;
@@ -259,11 +310,12 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 }
 .avatar--lg .avatar__presence { width: 16px; height: 16px; }
 
-/* ─── Inputs ─── */
+/* --- Inputs --- */
 .input {
   height: 38px; background: var(--bg-2); border: 1px solid var(--border-2);
   border-radius: var(--r-sm); color: var(--text-hi); padding: 0 12px;
   font: inherit; width: 100%;
+  min-width: 0; max-width: 100%;
   transition: border-color .15s, box-shadow .15s, background .15s;
 }
 .input::placeholder { color: var(--text-dim); }
@@ -273,7 +325,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 .input-lg     { height: 46px; padding: 0 14px; }
 .label        { font-size: 12px; color: var(--text-md); font-weight: 500; }
 
-/* ─── Game tile art ─── */
+/* --- Game tile art --- */
 .tile-art { position: relative; overflow: hidden; border-radius: var(--r-md); }
 .tile-art::after {
   content: ""; position: absolute; inset: 0;
@@ -283,7 +335,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   pointer-events: none;
 }
 
-/* ─── Skeleton ─── */
+/* --- Skeleton --- */
 .skel {
   background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-4) 50%, var(--bg-3) 100%);
   background-size: 200% 100%;
@@ -294,8 +346,9 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 
 .hr { height: 1px; background: var(--border-1); border: 0; margin: 0; }
 
-/* ─── Tabs ─── */
-.tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; }
+/* --- Tabs --- */
+.tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+.tabs::-webkit-scrollbar { display: none; }
 .tab {
   height: 30px; padding: 0 12px; border-radius: 7px;
   font-size: 12.5px; font-weight: 500; color: var(--text-md);
@@ -305,10 +358,11 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 .tab:hover     { color: var(--text-hi); background: var(--bg-tint); }
 .tab--active   { background: var(--bg-4); color: var(--text-hi); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; }
 
-/* ─── Modal ─── */
+/* --- Modal --- */
 .modal-backdrop {
   position: fixed; inset: 0; background: rgba(3,5,10,0.65); backdrop-filter: blur(8px);
   z-index: 50; display: grid; place-items: center;
+  padding: 16px;
   animation: fadeIn .14s ease;
 }
 .modal {
@@ -323,8 +377,8 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 @keyframes fadeIn  { from { opacity: 0; }                                    to { opacity: 1; } }
 @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
 
-/* ─── Toast ─── */
-.toast-stack { position: fixed; right: 18px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
+/* --- Toast --- */
+.toast-stack { position: fixed; right: 18px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 60; max-width: calc(100vw - 24px); }
 .toast {
   background: var(--bg-3); border: 1px solid var(--border-2);
   border-left: 3px solid var(--red-500);
@@ -337,10 +391,11 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 .toast--info    { border-left-color: var(--ice-400); }
 @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
 
-/* ─── Layout helpers ─── */
-.row     { display: flex; align-items: center; gap: 12px; }
-.col     { display: flex; flex-direction: column; gap: 12px; }
-.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+/* --- Layout helpers --- */
+.row     { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.col     { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
+.row > *, .between > *, .col > * { min-width: 0; }
 .grow    { flex: 1; min-width: 0; }
 .muted   { color: var(--text-lo); }
 .mono    { font-family: var(--font-mono); }
@@ -350,15 +405,15 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   font-size: 10.5px; color: var(--text-lo); font-family: var(--font-mono);
 }
 
-/* ─── Pages ─── */
-.page        { padding: 28px 36px 64px; max-width: var(--max-w); margin: 0 auto; }
+/* --- Pages --- */
+.page        { padding: 28px 36px 64px; max-width: var(--max-w); margin: 0 auto; min-width: 0; width: 100%; }
 .page-title  { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
 .page-sub    { color: var(--text-lo); font-size: 13.5px; margin-top: 4px; }
 .section     { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
-.section-head  { display: flex; align-items: flex-end; justify-content: space-between; }
+.section-head  { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; }
 .section-title { font-size: 16px; font-weight: 600; color: var(--text-hi); font-family: var(--font-display); }
 
-/* ─── Glow ring ─── */
+/* --- Glow ring --- */
 .glow-ring { position: relative; }
 .glow-ring::before {
   content: ""; position: absolute; inset: -1px;
@@ -370,24 +425,52 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   pointer-events: none;
 }
 
-/* ─── Grids ─── */
+/* --- Grids --- */
 .grid   { display: grid; gap: 14px; }
 .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
 .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
 .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
+.responsive-split,
+.responsive-sidebar,
+.responsive-room,
+.responsive-auth {
+  display: grid;
+  gap: 18px;
+  min-width: 0;
+}
+.responsive-split { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
+.responsive-sidebar { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
+.responsive-room { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(280px, 320px); align-items: start; }
+.responsive-auth { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
+.mobile-wrap { flex-wrap: wrap; }
+.mobile-stack { min-width: 0; }
+.mobile-actions { flex-wrap: wrap; }
+.mobile-scroll-row { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+.mobile-scroll-row::-webkit-scrollbar { display: none; }
+.mobile-menu-panel,
+.dropdown-panel {
+  max-width: calc(100vw - 24px);
+}
 @media (max-width: 1280px) { .grid-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
 @media (max-width: 980px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
+@media (max-width: 980px) {
+  .responsive-split,
+  .responsive-sidebar,
+  .responsive-room {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+}
 @media (max-width: 560px)  { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
 
 .divider-v { width: 1px; align-self: stretch; background: var(--border-1); }
 
-/* ─── Progress bars ─── */
+/* --- Progress bars --- */
 .bar { position: relative; height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
 .bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--red-500), var(--red-400)); border-radius: 999px; }
 .bar--ice .bar__fill     { background: linear-gradient(90deg, var(--ice-500), var(--ice-400)); }
 .bar--success .bar__fill { background: linear-gradient(90deg, #10B981, var(--success)); }
 
-/* ─── Landing ─── */
+/* --- Landing --- */
 .landing {
   min-height: 100vh;
   background:
@@ -402,7 +485,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 }
 .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
 
-/* ─── Grid bg ─── */
+/* --- Grid bg --- */
 .grid-bg {
   position: absolute; inset: 0;
   background-image:
@@ -414,8 +497,8 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   pointer-events: none;
 }
 
-/* ─── Sudoku ─── */
-.sudoku { display: grid; grid-template-columns: repeat(9, 1fr); background: var(--border-2); gap: 1px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-2); }
+/* --- Sudoku --- */
+.sudoku { display: grid; grid-template-columns: repeat(9, 1fr); background: var(--border-2); gap: 1px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-2); width: min(100%, 520px); max-width: 100%; }
 .sudoku__cell { aspect-ratio: 1; background: var(--bg-3); display: grid; place-items: center; font-family: var(--font-mono); font-size: 20px; color: var(--text-hi); position: relative; cursor: pointer; }
 .sudoku__cell--given    { background: #11172A; color: var(--text-md); }
 .sudoku__cell--selected { background: rgba(240,57,75,0.16); color: var(--red-300); box-shadow: inset 0 0 0 1px var(--red-500); }
@@ -425,7 +508,7 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 .sudoku__cell:nth-child(n+19):nth-child(-n+27),
 .sudoku__cell:nth-child(n+46):nth-child(-n+54)     { border-bottom: 1px solid var(--border-3); }
 
-/* ─── Bottom nav ─── */
+/* --- Bottom nav --- */
 .bottomnav {
   display: none;
   position: fixed; left: 0; right: 0; bottom: 0;
@@ -440,10 +523,10 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 }
 .bottomnav__item--active { color: var(--red-500); }
 
-/* ─── Focus ─── */
+/* --- Focus --- */
 :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 6px; }
 
-/* ─── Responsive ─── */
+/* --- Responsive --- */
 @media (max-width: 1080px) {
   :root { --sidebar-w: 72px; }
   .sidebar { padding: 14px 10px; align-items: center; }
@@ -451,6 +534,40 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   .nav-item span:not(.nav-item__badge), .nav-group__label { display: none; }
   .nav-item { justify-content: center; padding: 10px; }
   .nav-item--active::before { left: -10px; }
+  /* Hamburger shows whenever sidebar is collapsed or hidden */
+  .topbar__nav-btn { display: flex !important; }
+  /* Pin badge to corner so it doesn't displace the centered icon */
+  .app__sidebar .nav-item__badge {
+    position: absolute; top: 5px; right: 5px; margin-left: 0;
+    min-width: 15px; height: 15px; padding: 0 4px;
+    font-size: 9px; display: flex; align-items: center; justify-content: center;
+  }
+}
+@media (max-width: 800px) {
+  /* Long search bar gives way to icon-only search button */
+  .topbar { justify-content: space-between; }
+  .topbar__search { display: none !important; }
+  .topbar__search-btn { display: flex !important; }
+}
+@media (max-width: 1000px) {
+  .settings-layout { grid-template-columns: 1fr !important; }
+  .settings-nav {
+    display: flex; flex-direction: row; flex-wrap: wrap;
+    overflow-x: auto; gap: 4px; padding: 4px !important;
+  }
+  .settings-nav .row { flex: 0 0 auto; width: auto !important; }
+  .settings-profile-row { flex-direction: column !important; align-items: stretch !important; }
+  .settings-avatar-opts { width: 100%; }
+  .link-form-row { flex-wrap: wrap !important; }
+  .link-form-row select { flex: 0 0 100% !important; width: 100% !important; }
+  .link-form-row > input { flex: 1 1 auto !important; min-width: 100px; width: auto !important; }
+  .setting-row { align-items: flex-start !important; flex-direction: column; flex-wrap: wrap; gap: 8px; }
+  .setting-row > div:last-child,
+  .setting-row .col,
+  .setting-row .row { width: 100% !important; }
+  .setting-row .col { align-items: stretch !important; }
+  .setting-row input,
+  .setting-row select { width: 100% !important; max-width: 100% !important; }
 }
 @media (max-width: 720px) {
   .app {
@@ -460,9 +577,234 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
   }
   .app__sidebar { display: none; }
   .page { padding: 18px 16px 88px; }
-  .topbar { padding: 0 14px; }
+  .topbar { padding: 0 12px; gap: 8px; }
+  .topbar__actions { gap: 6px !important; }
+  .topbar__actions > .btn { width: 34px; padding: 0; overflow: hidden; font-size: 0; gap: 0; }
+  .topbar__actions > .btn svg { flex: none; }
+  .profile-display-name { font-size: clamp(16px, 4.5vw, 24px) !important; overflow-wrap: anywhere; word-break: break-word; }
+  /* Stack avatar above name on mobile — keeps name text below the dark banner zone */
+  .profile-header-inner { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
+  .user-menu-trigger { padding: 4px !important; gap: 0 !important; }
+  .user-menu-trigger__name,
+  .user-menu-trigger > svg { display: none; }
+  .dropdown-panel { position: fixed !important; top: calc(var(--topbar-h) + 8px) !important; right: 12px !important; left: auto !important; width: min(340px, calc(100vw - 24px)) !important; }
   .bottomnav { display: flex; }
+  .page-title { font-size: 24px; overflow-wrap: anywhere; }
+  .section-head { align-items: flex-start; flex-direction: column; }
+  .btn { min-height: 38px; white-space: normal; }
+  .btn-sm { min-height: 32px; }
+  .btn-lg { min-height: 44px; padding-inline: 16px; }
+  .chip { overflow: hidden; text-overflow: ellipsis; }
+  .modal-backdrop { align-items: start; overflow-y: auto; }
+  .modal, .modal-lg { width: min(100%, calc(100vw - 24px)); }
+  .modal__head, .modal__body, .modal__foot { padding-inline: 16px; }
+  .modal__foot { flex-wrap: wrap; }
+  .modal__foot .btn { flex: 1 1 140px; }
+  .toast-stack { left: 12px; right: 12px; bottom: 78px; }
+  .toast { min-width: 0; max-width: none; width: 100%; }
+  .responsive-split,
+  .responsive-sidebar,
+  .responsive-room,
+  .responsive-auth {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+  .responsive-auth > :first-child { display: none !important; }
+  .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
+  .mobile-stack > .btn,
+  .mobile-stack > button:not(.btn-icon) { width: 100%; }
+  .mobile-actions { align-items: stretch !important; flex-wrap: wrap !important; }
+  .mobile-actions > .btn,
+  .mobile-actions > button:not(.btn-icon) { flex: 1 1 auto; min-width: 0; }
+  .mobile-scroll-row { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; }
+  .mobile-scroll-row > * { flex: 0 0 auto; }
+  .avatar--xl { width: 78px; height: 78px; font-size: 26px; }
+  .sudoku__cell { font-size: clamp(13px, 5vw, 20px); }
+  .leaderboard-header { display: none; }
+  .leaderboard-row {
+    display: grid !important;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    row-gap: 4px;
+    align-items: center;
+  }
+  .leaderboard-row > :nth-child(3) { display: none; }
+  .leaderboard-row > :nth-child(4) { width: auto !important; }
+  .leaderboard-row > :nth-child(5) { grid-column: 2 / 4; width: auto !important; text-align: left !important; font-size: 11px; }
+  .match-history-header { display: none; }
+  .match-history-row {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: 4px;
+    align-items: start;
+  }
+  .match-history-row > :nth-child(1) { width: auto !important; grid-column: 1 / 3; }
+  .match-history-row > :nth-child(3) { width: auto !important; grid-column: 1; }
+  .match-history-row > :nth-child(4) { width: auto !important; grid-column: 2; text-align: right !important; }
+  .match-history-row > :nth-child(5) { width: auto !important; grid-column: 1 / 3; text-align: left !important; }
+  .friends-header { display: none; }
+  .friends-row {
+    display: grid !important;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    row-gap: 6px;
+    align-items: center;
+  }
+  .friends-row > :nth-child(3) { grid-column: 2 / 4; width: auto !important; }
+  .friends-row > :nth-child(4) { grid-column: 2; width: auto !important; text-align: left !important; }
+  .friends-row > :nth-child(5) { grid-column: 1 / 4; width: auto !important; justify-content: flex-start !important; flex-wrap: wrap; }
+  .setting-card { padding: 16px !important; }
 }
 
 .hide-scroll::-webkit-scrollbar { display: none; }
 .hide-scroll { scrollbar-width: none; }
+
+/* Light theme */
+[data-theme="light"] {
+  --bg-0: #EEF1F8;
+  --bg-1: #F7F8FC;
+  --bg-2: #FFFFFF;
+  --bg-3: #F4F6FB;
+  --bg-4: #EAEFF7;
+  --bg-tint: #F0F3F9;
+
+  --border-1: #ECEFF6;
+  --border-2: #DEE3EF;
+  --border-3: #C7CEDD;
+  --border-focus: rgba(214,33,51,0.55);
+
+  --text-hi: #0A0E18;
+  --text-md: #404A66;
+  --text-lo: #6E7790;
+  --text-dim: #99A0B6;
+
+  --red-300: #FF7884;
+  --red-400: #E5374A;
+  --red-500: #D62133;
+  --red-600: #B11625;
+  --red-700: #8B0F1B;
+  --red-glow: rgba(214,33,51,0.20);
+  --red-soft: rgba(214,33,51,0.08);
+
+  --ice-300: #38BDF8;
+  --ice-400: #0284C7;
+  --ice-500: #0369A1;
+  --violet-400: #7C3AED;
+
+  --success: #059669;
+  --warning: #B45309;
+  --danger: #DC2626;
+  --info: #0284C7;
+
+  --presence-online: #10B981;
+  --presence-away: #D97706;
+  --presence-playing: #DC2626;
+  --presence-offline: #94A3B8;
+
+  --shadow-1: 0 1px 0 rgba(255,255,255,1) inset, 0 1px 2px rgba(15,20,34,0.06);
+  --shadow-2: 0 1px 0 rgba(255,255,255,1) inset, 0 4px 16px rgba(15,20,34,0.07);
+  --shadow-3: 0 1px 0 rgba(255,255,255,1) inset, 0 16px 40px rgba(15,20,34,0.10);
+  --shadow-red: 0 0 0 1px rgba(214,33,51,0.35), 0 10px 30px rgba(214,33,51,0.20);
+}
+
+[data-theme="light"] body { background: var(--bg-1); color: var(--text-hi); }
+
+[data-theme="light"] .app {
+  background:
+    radial-gradient(1200px 600px at -10% -20%, rgba(214,33,51,0.05), transparent 60%),
+    radial-gradient(900px 500px at 110% 10%, rgba(56,189,248,0.05), transparent 60%),
+    var(--bg-1);
+}
+
+[data-theme="light"] .sidebar {
+  background: linear-gradient(180deg, #FCFCFE 0%, #F2F4FB 100%);
+  border-right-color: var(--border-1);
+}
+
+[data-theme="light"] .topbar,
+[data-theme="light"] .bottomnav {
+  background: rgba(255,255,255,0.78);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+}
+
+[data-theme="light"] .grid-bg {
+  background-image:
+    linear-gradient(rgba(15,20,34,0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15,20,34,0.045) 1px, transparent 1px);
+}
+
+[data-theme="light"] .skel {
+  background: linear-gradient(90deg, #EEF1F8 0%, #E2E7F2 50%, #EEF1F8 100%);
+  background-size: 200% 100%;
+}
+
+[data-theme="light"] ::-webkit-scrollbar-thumb {
+  background: var(--border-3);
+  border: 2px solid var(--bg-1);
+}
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
+
+[data-theme="light"] .btn-primary {
+  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 6px 18px rgba(214,33,51,0.30);
+}
+[data-theme="light"] .btn-secondary { background: var(--bg-2); }
+[data-theme="light"] .btn-secondary:hover { background: var(--bg-3); }
+
+[data-theme="light"] .surface { background: var(--bg-2); }
+[data-theme="light"] .card,
+[data-theme="light"] .card-elev { background: var(--bg-2); }
+[data-theme="light"] .card-elev { box-shadow: var(--shadow-2); }
+
+[data-theme="light"] .tabs { background: var(--bg-3); border-color: var(--border-2); }
+[data-theme="light"] .tab--active {
+  background: var(--bg-2);
+  box-shadow: 0 1px 2px rgba(15,20,34,0.06);
+}
+
+[data-theme="light"] .input { background: var(--bg-2); }
+[data-theme="light"] .input:focus {
+  background: #FFFFFF;
+  box-shadow: 0 0 0 4px rgba(214,33,51,0.10);
+}
+
+[data-theme="light"] .bar { background: var(--bg-4); }
+
+[data-theme="light"] .landing {
+  background:
+    radial-gradient(900px 600px at 80% -10%, rgba(214,33,51,0.08), transparent 60%),
+    radial-gradient(800px 500px at 0% 100%, rgba(56,189,248,0.06), transparent 60%),
+    var(--bg-1);
+}
+
+/* Landing nav in light mode: white glassy bar instead of near-black */
+[data-theme="light"] .landing__nav {
+  background: rgba(255,255,255,0.88);
+  border-bottom-color: var(--border-2);
+}
+
+/* Force light text for buttons/labels inside always-dark banner panels */
+.profile-banner .btn,
+.profile-banner label { color: rgba(255,255,255,0.92) !important; border-color: rgba(255,255,255,0.28) !important; }
+.profile-banner .btn:hover { background: rgba(255,255,255,0.12) !important; }
+
+/* AuthLeft panel always dark — force white text inside regardless of theme */
+.auth-left { color: rgba(255,255,255,0.9); }
+/* h1-h5 have explicit color: var(--text-hi) — override with higher specificity */
+.auth-left h1, .auth-left h2, .auth-left h3 { color: rgba(255,255,255,0.95); }
+.auth-left p { color: rgba(255,255,255,0.72); }
+[data-theme="light"] .auth-left .chip,
+[data-theme="light"] .auth-left .chip--mono {
+  background: rgba(255,255,255,0.1);
+  border-color: rgba(255,255,255,0.2);
+  color: rgba(255,255,255,0.82);
+}
+[data-theme="light"] .auth-left .surface {
+  background: rgba(255,255,255,0.08);
+  border-color: rgba(255,255,255,0.15);
+}
+[data-theme="light"] .auth-left .muted { color: rgba(255,255,255,0.55); }
+
+[data-theme="light"] .chip--red { color: var(--red-600); }
+[data-theme="light"] .chip--ice { color: var(--ice-500); }
+[data-theme="light"] .chip--success { color: var(--success); }
+[data-theme="light"] .chip--warn { color: var(--warning); }
+
+[data-theme="light"] :focus-visible { outline-color: var(--border-focus); }