fix: center content properly on desktop using margin-inline-end

Use CSS variable --desktop-nav-width (72px on lg+) with
marginInlineEnd for RTL-correct nav offset. Content now
truly centers in the remaining viewport space.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/layout/AppShell.tsx

@@ -9,10 +9,10 @@ export function AppShell() {
   return (
     <div className="min-h-dvh">
       <DesktopNav />
-      <div className="flex flex-col min-h-dvh lg:pr-[72px]">
+      <div className="flex flex-col min-h-dvh" style={{ marginInlineEnd: 'var(--desktop-nav-width, 0px)' }}>
         <Header />
         <main className="flex-1 pb-[calc(var(--bottom-nav-height)+env(safe-area-inset-bottom))] lg:pb-6">
-          <div className="w-full max-w-[720px] mx-auto">
+          <div className="w-full max-w-[680px] mx-auto">
             <Outlet />
           </div>
         </main>

src/components/layout/Header.tsx

@@ -9,9 +9,9 @@ interface HeaderProps {
 
 export function Header({ coins = 0, gems = 0, level = 1, unreadCount = 0 }: HeaderProps) {
   return (
-    <header className="sticky top-0 z-40 bg-bg-1/95 backdrop-blur-sm border-b border-white/6 lg:pr-[72px]"
-      style={{ paddingTop: 'env(safe-area-inset-top)' }}>
-      <div className="flex items-center justify-between h-[var(--header-height)] px-5 max-w-[720px] mx-auto">
+    <header className="sticky top-0 z-40 bg-bg-1/95 backdrop-blur-sm border-b border-white/6"
+      style={{ paddingTop: 'env(safe-area-inset-top)', marginInlineEnd: 'var(--desktop-nav-width)' }}>
+      <div className="flex items-center justify-between h-[var(--header-height)] px-5 max-w-[680px] mx-auto">
         <div className="flex items-center gap-3">
           <Link to="/" className="text-gold font-bold text-lg font-latin tracking-tight">
             EL3AB

src/index.css

@@ -55,6 +55,7 @@
   /* Sizes */
   --header-height: 56px;
   --bottom-nav-height: 64px;
+  --desktop-nav-width: 0px;
   --touch-min: 48px;
   --touch-comfortable: 56px;
 }
@@ -111,6 +112,12 @@ input, button, textarea, select {
   unicode-bidi: embed;
 }
 
+@media (min-width: 1024px) {
+  :root {
+    --desktop-nav-width: 72px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;