fix: max-w-360px container, floating header/nav, narrower buttons

PageTransition now caps at 360px centered, creating visible dark
background gutters on each side. Header and nav are floating pills
with rounded-[18px]. Buttons use w-[85%] not w-full.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/layout/BottomNav.tsx

@@ -15,8 +15,8 @@ export function BottomNav() {
   const navigate = useNavigate()
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-2">
-      <div className="flex items-center justify-around px-2 py-2.5 max-w-lg mx-auto bg-surface-1/95 backdrop-blur-xl border border-border/60 rounded-2xl shadow-xl shadow-black/30">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 px-5 pb-3 pt-1">
+      <div className="flex items-center justify-around px-3 py-3 bg-surface-2 border border-border rounded-[18px] shadow-2xl shadow-black/40">
         {NAV_ITEMS.map((item) => {
           const isActive = location.pathname === item.path
           const Icon = item.icon
@@ -25,36 +25,22 @@ export function BottomNav() {
             <motion.button
               key={item.path}
               onClick={() => navigate(item.path)}
-              className="flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-xl relative"
-              whileTap={{ scale: 0.9 }}
-              transition={{ type: 'spring', stiffness: 500, damping: 25 }}
-            >
-              <motion.div
-                animate={{
-                  scale: isActive ? 1.15 : 1,
-                  y: isActive ? -2 : 0,
-                }}
-                transition={{ type: 'spring', stiffness: 400, damping: 20 }}
+              className="flex flex-col items-center gap-1 px-2 py-1 rounded-xl relative"
+              whileTap={{ scale: 0.85 }}
             >
               <Icon
-                  size={22}
+                size={20}
                 className={isActive ? 'text-gold' : 'text-text-muted'}
-                  strokeWidth={isActive ? 2.5 : 2}
+                strokeWidth={isActive ? 2.5 : 1.8}
               />
-              </motion.div>
-
-              <span
-                className={`text-[10px] font-semibold ${isActive ? 'text-gold' : 'text-text-muted'}`}
-              >
+              <span className={`text-[9px] font-semibold ${isActive ? 'text-gold' : 'text-text-muted'}`}>
                 {item.label}
               </span>
-
               {isActive && (
                 <motion.div
-                  className="absolute -bottom-0.5 w-5 h-1 rounded-full bg-gold"
-                  layoutId="nav-indicator"
-                  transition={{ type: 'spring', stiffness: 400, damping: 30 }}
-                  style={{ boxShadow: '0 0 8px rgba(212, 168, 67, 0.6)' }}
+                  className="absolute -bottom-1 w-4 h-[3px] rounded-full bg-gold"
+                  layoutId="nav-dot"
+                  style={{ boxShadow: '0 0 6px rgba(212, 168, 67, 0.7)' }}
                 />
               )}
             </motion.button>

src/components/layout/Header.tsx

@@ -12,36 +12,30 @@ export function Header() {
   const navigate = useNavigate()
 
   return (
-    <header className="sticky top-0 z-50 px-4 pt-3 pb-2">
-      <div className="flex items-center justify-between px-4 py-2.5 bg-surface-1/90 backdrop-blur-xl border border-border/60 rounded-2xl shadow-lg shadow-black/20">
-        <div className="flex items-center gap-2">
-          <GoldCrown size={26} animate={false} />
-          <span className="text-base font-bold text-gold">EL3AB</span>
+    <header className="sticky top-0 z-50 px-5 pt-3 pb-1">
+      <div className="flex items-center justify-between px-5 py-3 bg-surface-2 border border-border rounded-[18px]">
+        <div className="flex items-center gap-2.5">
+          <GoldCrown size={24} animate={false} />
+          <span className="text-sm font-bold text-gold tracking-wide">EL3AB</span>
         </div>
 
         <div className="flex items-center gap-3">
           {profile && (
-            <motion.div
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-surface-2/80 border border-gold/30"
-              initial={{ scale: 0 }}
-              animate={{ scale: 1 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 25 }}
-            >
-              <Coins size={13} className="text-gold" />
-              <span className="text-xs font-bold text-gold">{profile.coins}</span>
-            </motion.div>
+            <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-3/80 border border-gold/20">
+              <Coins size={12} className="text-gold" />
+              <span className="text-[11px] font-bold text-gold">{profile.coins}</span>
+            </div>
           )}
 
           <div className="relative" onClick={() => navigate('/notifications')}>
-            <AnimatedIcon icon={Bell} size={20} color="var(--color-text-secondary)" onClick={() => {}} />
+            <AnimatedIcon icon={Bell} size={18} color="var(--color-text-secondary)" onClick={() => {}} />
             {unreadCount > 0 && (
               <motion.div
-                className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-coral flex items-center justify-center"
+                className="absolute -top-1 -right-1 w-3.5 h-3.5 rounded-full bg-coral flex items-center justify-center"
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
-                transition={{ type: 'spring', stiffness: 500, damping: 20 }}
               >
-                <span className="text-[10px] font-bold text-white">{unreadCount > 9 ? '9+' : unreadCount}</span>
+                <span className="text-[8px] font-bold text-white">{unreadCount > 9 ? '9+' : unreadCount}</span>
               </motion.div>
             )}
           </div>

src/components/layout/PageTransition.tsx

@@ -9,7 +9,7 @@ interface PageTransitionProps {
 export function PageTransition({ children, className = '' }: PageTransitionProps) {
   return (
     <motion.div
-      className={className}
+      className={`max-w-[360px] mx-auto w-full ${className}`}
       initial={{ opacity: 0, x: -20 }}
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: 20 }}

src/pages/PlayPage.tsx

@@ -136,11 +136,11 @@ export function PlayPage() {
       </div>
 
       {/* Action Buttons */}
-      <div className="flex flex-col gap-3 mt-2 pb-4">
-        <Button onClick={() => navigate('/matchmaking')} className="w-full" size="lg">
+      <div className="flex flex-col items-center gap-3 mt-2 pb-4">
+        <Button onClick={() => navigate('/matchmaking')} className="w-[85%]" size="lg">
           البحث عن خصم
         </Button>
-        <Button onClick={() => navigate('/bot-select')} variant="ghost" className="w-full" size="md">
+        <Button onClick={() => navigate('/bot-select')} variant="ghost" className="w-[85%]" size="md">
           <Cpu size={18} className="text-gold" />
           العب ضد الروبوت
         </Button>