fix(home): remove empty space, add greeting, better quick-action layout

- Content starts from TOP (justify-content: flex-start) — no more void
- Player greeting: 'أهلاً [name] 👋' with level display
- Quick action buttons redesigned: icon circles with labels below
  (Challenges ⚡, Season 🎖️, Gift 🎁, Puzzles 🧩)
- Gift button has breathe-glow animation (attention grabber)
- Puzzles button added for direct access
- Game tiles: aspect ratio 1.1 (slightly shorter, fits better)
- Grid gap reduced to 12px for tighter layout
- Page scrolls if content overflows
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/modules/play/scenes/table.js

@@ -14,23 +14,38 @@ const games = [
 ];
 
 export function mountTable(el) {
+  const player = store.get('player');
+  const username = player?.display_name || player?.username || 'Player';
+
   el.innerHTML = `
     <div class="play-home">
-      <!-- Daily widget -->
-      <div id="daily-widget" style="display:flex;gap:10px;width:100%;max-width:340px;margin-bottom:14px;">
-        <button class="daily-btn" id="btn-challenges" style="flex:1;background:linear-gradient(135deg,#1e3a5f,#2563EB);border:none;border-radius:12px;padding:12px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:transform 0.1s;">
-          <span style="font-size:20px;">⚡</span>
-          <span style="color:#f8fafc;font-size:12px;font-weight:700;">التحديات</span>
+      <!-- Player greeting -->
+      <div style="width:100%;max-width:340px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;">
+        <div style="font-size:16px;font-weight:700;color:#f8fafc;">أهلاً ${username} 👋</div>
+        <div style="font-size:11px;color:#64748b;">المستوى ${player?.level || 1}</div>
+      </div>
+
+      <!-- Quick actions row -->
+      <div id="daily-widget" style="display:flex;gap:8px;width:100%;max-width:340px;margin-bottom:16px;">
+        <button class="quick-btn" id="btn-challenges">
+          <span class="qb-icon" style="background:linear-gradient(135deg,#1e40af,#3b82f6);">⚡</span>
+          <span class="qb-label">تحديات</span>
         </button>
-        <button class="daily-btn" id="btn-battlepass" style="flex:1;background:linear-gradient(135deg,#3b1f5e,#8B5CF6);border:none;border-radius:12px;padding:12px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:transform 0.1s;">
-          <span style="font-size:20px;">🎖️</span>
-          <span style="color:#f8fafc;font-size:12px;font-weight:700;">الموسم</span>
+        <button class="quick-btn" id="btn-battlepass">
+          <span class="qb-icon" style="background:linear-gradient(135deg,#5b21b6,#8b5cf6);">🎖️</span>
+          <span class="qb-label">الموسم</span>
         </button>
-        <button class="daily-btn" id="btn-daily-reward" style="flex:1;background:linear-gradient(135deg,#5f3a1e,#E4AC38);border:none;border-radius:12px;padding:12px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:transform 0.1s;">
-          <span style="font-size:20px;">🎁</span>
-          <span style="color:#f8fafc;font-size:12px;font-weight:700;">هدية</span>
+        <button class="quick-btn breathe-glow" id="btn-daily-reward">
+          <span class="qb-icon" style="background:linear-gradient(135deg,#92400e,#e4ac38);">🎁</span>
+          <span class="qb-label">هدية</span>
+        </button>
+        <button class="quick-btn" id="btn-puzzles-home">
+          <span class="qb-icon" style="background:linear-gradient(135deg,#065f46,#10b981);">🧩</span>
+          <span class="qb-label">أحجيات</span>
         </button>
       </div>
+
+      <!-- Games -->
       <div class="games-grid">
         ${games.map(g => `
           <div class="game-tile" data-game="${g.key}" style="--game-color:${g.color};--game-gradient:${g.gradient};">
@@ -49,21 +64,26 @@ export function mountTable(el) {
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         height: 100%;
-        padding: 24px 16px;
+        padding: 16px 16px 0;
+        overflow-y: auto;
       }
+      .quick-btn { display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;background:none;border:none;cursor:pointer;padding:6px;transition:transform 0.1s; }
+      .quick-btn:active { transform:scale(0.9); }
+      .qb-icon { width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,0.3); }
+      .qb-label { font-size:10px;font-weight:600;color:#94a3b8; }
       .games-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 14px;
+        gap: 12px;
         width: 100%;
         max-width: 340px;
       }
       .game-tile {
         position: relative;
-        aspect-ratio: 1;
-        border-radius: 20px;
+        aspect-ratio: 1.1;
+        border-radius: 18px;
         overflow: hidden;
         cursor: pointer;
         transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
@@ -228,6 +248,10 @@ export function mountTable(el) {
     audio.play('click');
     scene.push('daily-reward');
   });
+  el.querySelector('#btn-puzzles-home')?.addEventListener('click', () => {
+    audio.play('click');
+    scene.push('puzzles');
+  });
 
   // Juice: staggered bounce-in for tiles + floating idle
   const tiles = el.querySelectorAll('.game-tile');