diff --git a/2048.html b/2048.html
index b79c70a..f0a0e84 100644
--- a/2048.html
+++ b/2048.html
@@ -1,238 +1,383 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>2048</title>
-    <link rel="stylesheet" href="2048.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
-</head>
-<body>
+    <link rel="stylesheet" href="2048.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
     <!-- Background Effects -->
     <div class="particles" aria-hidden="true"></div>
     <div class="starfield" aria-hidden="true"></div>
     <div class="cursor-light" aria-hidden="true"></div>
 
     <!-- SOUND CONTROL - KIRI ATAS -->
-<div class="sound-control-container">
-    <!-- Main Sound Button -->
-    <button class="icon-btn btn-sound-main" id="btn-sound-main" title="Sound Settings">
+    <div class="sound-control-container">
+      <!-- Main Sound Button -->
+      <button
+        class="icon-btn btn-sound-main"
+        id="btn-sound-main"
+        title="Sound Settings"
+      >
         <!-- Icon Full Sound (all ON) -->
-        <svg class="sound-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
-            <path d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>
+        <svg
+          class="sound-full"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+          <path
+            d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"
+          />
         </svg>
         <!-- Icon Medium Sound (some muted) -->
-        <svg class="sound-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
-            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
-            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
+        <svg
+          class="sound-medium"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          style="display: none"
+        >
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+          <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
         </svg>
         <!-- Icon Low Sound (mostly muted) -->
-        <svg class="sound-low" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
-            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
+        <svg
+          class="sound-low"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          style="display: none"
+        >
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
         </svg>
         <!-- Icon Muted (all OFF) -->
-        <svg class="sound-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
-            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
-            <line x1="23" y1="9" x2="17" y2="15"/>
-            <line x1="17" y1="9" x2="23" y2="15"/>
+        <svg
+          class="sound-muted"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          style="display: none"
+        >
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+          <line x1="23" y1="9" x2="17" y2="15" />
+          <line x1="17" y1="9" x2="23" y2="15" />
         </svg>
-    </button>
+      </button>
 
-    <!-- Volume Sliders Panel (Hidden by default) -->
-    <div class="volume-panel" id="volume-panel" style="display: none;">
+      <!-- Volume Sliders Panel (Hidden by default) -->
+      <div class="volume-panel" id="volume-panel" style="display: none">
         <!-- Music Volume -->
         <div class="volume-item">
-            <div class="volume-header">
-                <svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"/>
-                </svg>
-                <span class="volume-label">Music</span>
-                <span class="volume-value" id="vol-music-display">25%</span>
-            </div>
-            <input type="range" class="volume-slider" id="vol-music" min="0" max="100" value="25">
+          <div class="volume-header">
+            <svg
+              class="volume-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"
+              />
+            </svg>
+            <span class="volume-label">Music</span>
+            <span class="volume-value" id="vol-music-display">25%</span>
+          </div>
+          <input
+            type="range"
+            class="volume-slider"
+            id="vol-music"
+            min="0"
+            max="100"
+            value="25"
+          />
         </div>
 
         <!-- Pop SFX Volume -->
         <div class="volume-item">
-            <div class="volume-header">
-                <svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"/>
-                    <path d="M8 12h8M12 8v8"/>
-                </svg>
-                <span class="volume-label">Pop SFX</span>
-                <span class="volume-value" id="vol-pop-display">90%</span>
-            </div>
-            <input type="range" class="volume-slider" id="vol-pop" min="0" max="100" value="90">
+          <div class="volume-header">
+            <svg
+              class="volume-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M8 12h8M12 8v8" />
+            </svg>
+            <span class="volume-label">Pop SFX</span>
+            <span class="volume-value" id="vol-pop-display">90%</span>
+          </div>
+          <input
+            type="range"
+            class="volume-slider"
+            id="vol-pop"
+            min="0"
+            max="100"
+            value="90"
+          />
         </div>
 
         <!-- Merge SFX Volume -->
         <div class="volume-item">
-            <div class="volume-header">
-                <svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-                </svg>
-                <span class="volume-label">Merge SFX</span>
-                <span class="volume-value" id="vol-merge-display">100%</span>
-            </div>
-            <input type="range" class="volume-slider" id="vol-merge" min="0" max="100" value="100">
+          <div class="volume-header">
+            <svg
+              class="volume-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+              />
+            </svg>
+            <span class="volume-label">Merge SFX</span>
+            <span class="volume-value" id="vol-merge-display">100%</span>
+          </div>
+          <input
+            type="range"
+            class="volume-slider"
+            id="vol-merge"
+            min="0"
+            max="100"
+            value="100"
+          />
         </div>
+      </div>
     </div>
-</div>
     <!-- Top Right Controls -->
     <div class="top-controls">
-        <button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
-                <line x1="12" y1="17" x2="12.01" y2="17"/>
-            </svg>
-        </button>
-        <button class="icon-btn btn-restart-icon" id="btn-restart" title="Restart Game">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
-            </svg>
-        </button>
+      <button
+        class="icon-btn btn-tutorial"
+        id="btn-tutorial"
+        title="How to Play"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+      </button>
+      <button
+        class="icon-btn btn-restart-icon"
+        id="btn-restart"
+        title="Restart Game"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <path
+            d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
+          />
+        </svg>
+      </button>
     </div>
 
     <!-- Game Container -->
     <div class="game-container">
-        <!-- Header: Title + Scores -->
-        <div class="game-header">
-            <h1>2048</h1>
-            <div class="score-container">
-                <div class="score-box">
-                    <div class="score-label">SCORE</div>
-                    <div class="score-value" id="score">0</div>
-                </div>
-                <div class="score-box">
-                    <div class="score-label">HIGH SCORE</div>
-                    <div class="score-value" id="best-score">0</div>
-                </div>
-            </div>
+      <!-- Header: Title + Scores -->
+      <div class="game-header">
+        <h1>2048</h1>
+        <div class="score-container">
+          <div class="score-box">
+            <div class="score-label">SCORE</div>
+            <div class="score-value" id="score">0</div>
+          </div>
+          <div class="score-box">
+            <div class="score-label">HIGH SCORE</div>
+            <div class="score-value" id="best-score">0</div>
+          </div>
         </div>
+      </div>
 
-        <!-- Game Board -->
-        <div id="board"></div>
+      <!-- Game Board -->
+      <div id="board"></div>
     </div>
 
     <!-- Tutorial Modal -->
-    <div class="tutorial-overlay" id="tutorial-overlay" style="display: none;">
-        <div class="tutorial-modal">
-            <button class="modal-close" id="close-tutorial">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                    <line x1="18" y1="6" x2="6" y2="18"/>
-                    <line x1="6" y1="6" x2="18" y2="18"/>
-                </svg>
-            </button>
-            
-            <h2 class="tutorial-title">How to Play</h2>
-            
-            <div class="tutorial-content">
-                <!-- PC Controls - Hidden on Mobile -->
-                <div class="tutorial-section pc-controls">
-                    <h3>🖥️ PC Controls</h3>
-                    <div class="keys-container">
-                        <!-- WASD Keys -->
-                        <div class="keys-group">
-                            <div class="keys-grid-wasd">
-                                <div class="key-empty"></div>
-                                <div class="key-box">W</div>
-                                <div class="key-empty"></div>
-                                <div class="key-box">A</div>
-                                <div class="key-box">S</div>
-                                <div class="key-box">D</div>
-                            </div>
-                            <p class="keys-label">WASD</p>
-                        </div>
-                        
-                        <div class="keys-separator">or</div>
-                        
-                        <!-- Arrow Keys -->
-                        <div class="keys-group">
-                            <div class="keys-grid-arrow">
-                                <div class="key-empty"></div>
-                                <div class="key-box">↑</div>
-                                <div class="key-empty"></div>
-                                <div class="key-box">←</div>
-                                <div class="key-box">↓</div>
-                                <div class="key-box">→</div>
-                            </div>
-                            <p class="keys-label">Arrow Keys</p>
-                        </div>
-                    </div>
-                </div>
+    <div class="tutorial-overlay" id="tutorial-overlay" style="display: none">
+      <div class="tutorial-modal">
+        <button class="modal-close" id="close-tutorial">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
 
-                <!-- Mobile Controls - Hidden on PC -->
-                <div class="tutorial-section mobile-controls">
-                    <h3>📱 Mobile Controls</h3>
-                    <div class="swipe-demo">
-                        <div class="swipe-icon">👆</div>
-                        <p>Swipe in any direction</p>
-                    </div>
-                </div>
+        <h2 class="tutorial-title">How to Play</h2>
 
-                <div class="tutorial-section">
-                    <h3>🎯 Objective</h3>
-                    <p class="objective-text">Combine tiles with the same numbers to reach <strong>2048</strong>!</p>
+        <div class="tutorial-content">
+          <!-- PC Controls - Hidden on Mobile -->
+          <div class="tutorial-section pc-controls">
+            <h3>🖥️ PC Controls</h3>
+            <div class="keys-container">
+              <!-- WASD Keys -->
+              <div class="keys-group">
+                <div class="keys-grid-wasd">
+                  <div class="key-empty"></div>
+                  <div class="key-box">W</div>
+                  <div class="key-empty"></div>
+                  <div class="key-box">A</div>
+                  <div class="key-box">S</div>
+                  <div class="key-box">D</div>
                 </div>
+                <p class="keys-label">WASD</p>
+              </div>
+
+              <div class="keys-separator">or</div>
+
+              <!-- Arrow Keys -->
+              <div class="keys-group">
+                <div class="keys-grid-arrow">
+                  <div class="key-empty"></div>
+                  <div class="key-box">↑</div>
+                  <div class="key-empty"></div>
+                  <div class="key-box">←</div>
+                  <div class="key-box">↓</div>
+                  <div class="key-box">→</div>
+                </div>
+                <p class="keys-label">Arrow Keys</p>
+              </div>
             </div>
+          </div>
+
+          <!-- Mobile Controls - Hidden on PC -->
+          <div class="tutorial-section mobile-controls">
+            <h3>📱 Mobile Controls</h3>
+            <div class="swipe-demo">
+              <div class="swipe-icon">👆</div>
+              <p>Swipe in any direction</p>
+            </div>
+          </div>
+
+          <div class="tutorial-section">
+            <h3>🎯 Objective</h3>
+            <p class="objective-text">
+              Combine tiles with the same numbers to reach
+              <strong>2048</strong>!
+            </p>
+          </div>
         </div>
+      </div>
     </div>
 
-   <!-- Game Over Modal -->
-<div class="game-over-overlay" id="game-over-overlay" style="display: none;">
-    <div class="game-over-modal">
+    <!-- Game Over Modal -->
+    <div class="game-over-overlay" id="game-over-overlay" style="display: none">
+      <div class="game-over-modal">
         <!-- Close Button (X) -->
         <button class="game-over-close" id="game-over-close">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <line x1="18" y1="6" x2="6" y2="18"/>
-                <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
         </button>
 
         <!-- Title -->
         <div class="game-over-title">No More Moves!</div>
         <div class="game-over-subtitle">Game Over</div>
-        
+
         <!-- Score Section -->
         <div class="game-over-score">
-            <div class="game-over-score-label">Your Score</div>
-            <div class="game-over-score-value" id="final-score">0</div>
-            
-            <!-- New High Score Badge - show if new record -->
-            <div class="new-high-score" id="new-high-score-badge" style="display: none;">
-                New High Score
-            </div>
-            
-            <!-- Best Score Display - show if NOT new record -->
-            <div class="best-score-display" id="best-score-display" style="display: none;">
-                <div class="best-score-label">High Score</div>
-                <div class="best-score-value" id="modal-best-score">0</div>
-            </div>
+          <div class="game-over-score-label">Your Score</div>
+          <div class="game-over-score-value" id="final-score">0</div>
+
+          <!-- New High Score Badge - show if new record -->
+          <div
+            class="new-high-score"
+            id="new-high-score-badge"
+            style="display: none"
+          >
+            New High Score
+          </div>
+
+          <!-- Best Score Display - show if NOT new record -->
+          <div
+            class="best-score-display"
+            id="best-score-display"
+            style="display: none"
+          >
+            <div class="best-score-label">High Score</div>
+            <div class="best-score-value" id="modal-best-score">0</div>
+          </div>
         </div>
 
         <!-- Action Buttons - ICON ONLY -->
         <div class="game-over-buttons">
-            <!-- Restart Button -->
-            <button class="btn-game-icon btn-restart-game" id="btn-play-again" title="Restart Game">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
-                </svg>
-            </button>
-            
-            <!-- Home Button -->
-            <button class="btn-game-icon btn-home-game" id="btn-home" title="Back to Home">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-                    <polyline points="9 22 9 12 15 12 15 22"/>
-                </svg>
-            </button>
+          <!-- Restart Button -->
+          <button
+            class="btn-game-icon btn-restart-game"
+            id="btn-play-again"
+            title="Restart Game"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
+              />
+            </svg>
+          </button>
+
+          <!-- Home Button -->
+          <button
+            class="btn-game-icon btn-home-game"
+            id="btn-home"
+            title="Back to Home"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <polyline points="9 22 9 12 15 12 15 22" />
+            </svg>
+          </button>
         </div>
+      </div>
     </div>
-</div>
+    <script src="Score_Request.js"></script>
     <script src="2048.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/2048.js b/2048.js
index 5b858c8..9adc49f 100644
--- a/2048.js
+++ b/2048.js
@@ -591,6 +591,16 @@ function goHome() {
    ------------------------ */
 function showGameOver() {
   const finalScore = currentScore;
+
+  // --- TAMBAHKAN BAGIAN INI (MULAI) ---
+  // Mengecek apakah fungsi saveScore ada (dari file Score_Request.js)
+  if (typeof saveScore === 'function') {
+      console.log("Mengirim skor ke database:", finalScore); // Debugging
+      saveScore(finalScore);
+  } else {
+      console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
+  }
+
   const isNewHighScore = finalScore >= bestScore && finalScore > 0;
   
   const finalScoreEl = document.getElementById('final-score');
@@ -972,5 +982,4 @@ function getTileColor(value) {
     2048: '#ffd700'
   };
   return colors[value] || '#00eaff';
-}
-
+}
\ No newline at end of file
diff --git a/Leaderboard.php b/Leaderboard.php
index dbdea31..6af6f98 100644
--- a/Leaderboard.php
+++ b/Leaderboard.php
@@ -1,6 +1,6 @@
 <?php
 header('Content-Type: application/json');
-require 'Koneksi.php';
+require 'Connection.php';
 
 $query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10";
 $result = $conn->query($query);
diff --git a/Score_Request.js b/Score_Request.js
index 61dab53..c277b75 100644
--- a/Score_Request.js
+++ b/Score_Request.js
@@ -1,5 +1,5 @@
 function saveScore(score) {
-    fetch('Save_Score.php', {
+    fetch('Score.php', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
