fix: make Play page buttons bigger and more spacious

- Primary CTA: wider (88%), taller (py-6), larger text (xl)
- Secondary CTA: wider (82%), taller (py-5), thicker border
- Time control tiles: bigger (py-5), larger text (base)
- More gap between sections (gap-5) and buttons (gap-5)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/PlayPage.tsx

@@ -42,7 +42,7 @@ export function PlayPage() {
         variants={stagger}
         initial="hidden"
         animate="show"
-        className="flex flex-col gap-4"
+        className="flex flex-col gap-5"
       >
         {/* === 1. PAGE HEADER — Ribbon Banner === */}
         <motion.div variants={fadeUp} className="flex justify-center">
@@ -166,7 +166,7 @@ export function PlayPage() {
         </motion.div>
 
         {/* === 4. TIME CONTROL SECTION === */}
-        <motion.div variants={fadeUp} className="space-y-3">
+        <motion.div variants={fadeUp} className="space-y-4">
           {/* Section ribbon header */}
           <div className="flex justify-center">
             <div
@@ -223,7 +223,7 @@ export function PlayPage() {
           </div>
 
           {/* Time Options Grid */}
-          <div className="grid grid-cols-3 gap-2.5">
+          <div className="grid grid-cols-3 gap-3">
             {Object.entries(TIME_CONTROLS)
               .filter(([, v]) => v.category === activeCategory)
               .map(([key, tc]) => {
@@ -241,7 +241,7 @@ export function PlayPage() {
                     }}
                   >
                     <div
-                      className={`py-4 px-2 text-center font-black text-sm transition-all rounded-xl border-[3px] ${
+                      className={`py-5 px-3 text-center font-black text-base transition-all rounded-xl border-[3px] ${
                         isSelected
                           ? 'border-gold text-gold'
                           : 'border-border/60 text-text-secondary'
@@ -264,10 +264,10 @@ export function PlayPage() {
         </motion.div>
 
         {/* === 5. ACTION BUTTONS === */}
-        <motion.div variants={fadeUp} className="flex flex-col items-center gap-3">
+        <motion.div variants={fadeUp} className="flex flex-col items-center gap-5 mt-2">
           {/* Primary: Find opponent — massive 3D gold */}
           <motion.button
-            className="relative w-[80%] cursor-pointer"
+            className="relative w-[88%] cursor-pointer"
             whileTap={{ y: 4 }}
             transition={{ type: 'spring', stiffness: 600, damping: 20 }}
             onClick={() => {
@@ -276,10 +276,10 @@ export function PlayPage() {
             }}
           >
             <div
-              className="relative flex items-center justify-center gap-3 py-5 rounded-2xl font-black text-lg text-background overflow-hidden"
+              className="relative flex items-center justify-center gap-3 py-6 rounded-2xl font-black text-xl text-background overflow-hidden"
               style={{
                 background: 'linear-gradient(180deg, #FFE066 0%, #FFC83D 70%, #C9972E 100%)',
-                boxShadow: '0 6px 0 0 #9B6B1A, 0 8px 24px rgba(255,200,60,0.3)',
+                boxShadow: '0 7px 0 0 #9B6B1A, 0 10px 28px rgba(255,200,60,0.3)',
               }}
             >
               {/* Animated glow */}
@@ -294,14 +294,14 @@ export function PlayPage() {
                 }}
                 transition={{ duration: 2, repeat: Infinity }}
               />
-              <Swords size={22} className="text-background" />
+              <Swords size={24} className="text-background" />
               <span>البحث عن خصم</span>
             </div>
           </motion.button>
 
           {/* Secondary: Play vs bot — purple 3D */}
           <motion.button
-            className="relative w-[72%] cursor-pointer"
+            className="relative w-[82%] cursor-pointer"
             whileTap={{ y: 3 }}
             transition={{ type: 'spring', stiffness: 600, damping: 20 }}
             onClick={() => {
@@ -310,13 +310,13 @@ export function PlayPage() {
             }}
           >
             <div
-              className="flex items-center justify-center gap-3 py-4 rounded-2xl font-black text-sm text-text-primary border-2 border-purple/40"
+              className="flex items-center justify-center gap-3 py-5 rounded-2xl font-black text-base text-text-primary border-3 border-purple/40"
               style={{
                 background: 'linear-gradient(180deg, rgba(180,77,255,0.15) 0%, rgba(180,77,255,0.05) 100%)',
-                boxShadow: '0 5px 0 0 rgba(120,40,180,0.4)',
+                boxShadow: '0 6px 0 0 rgba(120,40,180,0.4)',
               }}
             >
-              <Cpu size={18} className="text-purple" />
+              <Cpu size={20} className="text-purple" />
               <span>العب ضد الروبوت</span>
             </div>
           </motion.button>