diff --git a/Leaderboard.css b/Leaderboard.css
index 0b14c99..aedb23e 100644
--- a/Leaderboard.css
+++ b/Leaderboard.css
@@ -198,7 +198,9 @@ h1::before {
     box-shadow: 0 0 15px rgba(0, 234, 255, 0.8);
 }
 
-/* Leaderboard Item */
+/* --- LEADERBOARD ITEMS & COLORS (HARMONISASI) --- */
+
+/* Base Item Style */
 .leaderboard-item {
     display: flex;
     align-items: center;
@@ -206,7 +208,7 @@ h1::before {
     padding: 18px 25px;
     border-radius: 14px;
     background: rgba(30, 0, 50, 0.5);
-    border: 1px solid rgba(0, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
     position: relative;
 }
@@ -217,57 +219,105 @@ h1::before {
     box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
 }
 
-/* Rank Styles */
-.leaderboard-item.rank-1 {
-    background: linear-gradient(135deg, rgba(0, 234, 255, 0.25), rgba(0, 255, 136, 0.2));
-    border: 2px solid rgba(0, 234, 255, 0.6);
-    box-shadow: 
-        0 0 25px rgba(0, 234, 255, 0.4),
-        inset 0 0 25px rgba(0, 234, 255, 0.15);
-}
-
-.leaderboard-item.rank-2 {
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(204, 0, 255, 0.15));
-    border: 2px solid rgba(255, 0, 255, 0.5);
-    box-shadow: 0 0 18px rgba(255, 0, 255, 0.3);
-}
-
-.leaderboard-item.rank-3 {
-    background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(75, 0, 130, 0.2));
-    border: 2px solid rgba(138, 43, 226, 0.5);
-    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
-}
-
-/* Rank Badge */
-.rank-badge {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 17px;
-    font-weight: bold;
-    flex-shrink: 0;
+/* === RANK 1: CYAN NEON (Juara) === */
+.leaderboard-item.rank-1, 
+.your-rank-container.rank-1 .your-rank-item {
+    background: linear-gradient(90deg, rgba(0, 234, 255, 0.25) 0%, rgba(0, 234, 255, 0.05) 100%);
+    border: 2px solid #00eaff;
+    box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);
 }
 
 .rank-1 .rank-badge {
-    background: linear-gradient(135deg, #00eaff, #00ff88);
-    color: #0c001a;
-    box-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
+    background: #00eaff;
+    color: #000;
+    box-shadow: 0 0 15px #00eaff;
     animation: pulseBadge 2s ease-in-out infinite;
 }
 
-.rank-2 .rank-badge {
-    background: linear-gradient(135deg, #ff00ff, #cc00ff);
+.rank-1 .player-name {
+    /* 1. Matikan efek gradient aneh pada teks */
+    background: none;
+    -webkit-text-fill-color: initial;
+    background-clip: border-box;
+
+    /* 2. Samakan ukuran font dengan yang lain (sebelumnya 22px jadi 20px) */
+    font-size: 20px; 
+    
+    /* 3. Warna Putih Solid + Sedikit Glow Cyan biar tetap spesial tapi rapi */
     color: #ffffff;
-    box-shadow: 0 0 18px rgba(255, 0, 255, 0.7);
+    text-shadow: 0 0 10px rgba(0, 234, 255, 0.8);
+    
+    /* Hapus filter drop-shadow berlebih */
+    filter: none;
+}
+
+/* FIX: Warna Score Rank 1 jadi Putih Solid (Anti Silau) */
+.rank-1 .score-value {
+    /* 1. Ukuran disamakan dengan yang lain */
+    font-size: 22px !important; 
+    
+    /* 2. Warna Teks Putih Solid */
+    background: none !important;
+    -webkit-text-fill-color: initial !important;
+    color: #ffffff !important;
+    
+    /* 3. GLOWING: Ganti bayangan hitam jadi cahaya Cyan */
+    text-shadow: 0 0 10px #00eaff, 0 0 20px rgba(0, 234, 255, 0.4) !important;
+    
+    /* Reset filter */
+    filter: none !important;
+}
+
+/* === RANK 2: MAGENTA NEON (Runner Up) === */
+.leaderboard-item.rank-2,
+.your-rank-container.rank-2 .your-rank-item {
+    background: linear-gradient(90deg, rgba(255, 0, 255, 0.25) 0%, rgba(255, 0, 255, 0.05) 100%);
+    border: 2px solid #ff00ff;
+    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
+}
+
+.rank-2 .rank-badge {
+    background: #ff00ff;
+    color: #fff;
+    box-shadow: 0 0 15px #ff00ff;
+}
+
+.rank-2 .score-value {
+    color: #fff;
+    text-shadow: 0 0 10px #ff00ff;
+}
+
+.rank-2 .player-score {
+    color: #ff00ff;
+}
+
+/* === RANK 3: VIOLET NEON (Third) === */
+.leaderboard-item.rank-3,
+.your-rank-container.rank-3 .your-rank-item {
+    background: linear-gradient(90deg, rgba(138, 43, 226, 0.25) 0%, rgba(138, 43, 226, 0.05) 100%);
+    border: 2px solid #8a2be2;
+    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
 }
 
 .rank-3 .rank-badge {
-    background: linear-gradient(135deg, #8a2be2, #4b0082);
-    color: #ffffff;
-    box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
+    background: #8a2be2;
+    color: #fff;
+    box-shadow: 0 0 15px #8a2be2;
+}
+
+.rank-3 .score-value {
+    color: #fff;
+    text-shadow: 0 0 10px #8a2be2;
+}
+
+.rank-3 .player-score {
+    color: #a855f7;
+}
+
+/* === RANK OTHER === */
+.leaderboard-item.rank-other {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .rank-other .rank-badge {
@@ -276,6 +326,7 @@ h1::before {
     border: 1px solid rgba(0, 255, 255, 0.3);
 }
 
+/* Animation */
 @keyframes pulseBadge {
     0%, 100% { 
         transform: scale(1);
@@ -287,7 +338,7 @@ h1::before {
     }
 }
 
-/* Player Info */
+/* Player Info Common */
 .player-info {
     flex: 1;
     display: flex;
@@ -305,22 +356,11 @@ h1::before {
     text-overflow: ellipsis;
 }
 
-.rank-1 .player-name {
-    background: linear-gradient(90deg, #00eaff, #00ff88);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-shadow: none;
-    filter: drop-shadow(0 0 6px rgba(0, 234, 255, 0.5));
-    font-size: 22px;
-}
-
-/* Score */
+/* Score Common */
 .player-score {
     font-weight: 700;
     font-size: 18px;
     color: #00eaff;
-    text-shadow: 0 0 12px rgba(0, 234, 255, 0.7);
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -332,25 +372,6 @@ h1::before {
     font-size: 22px;
 }
 
-.rank-1 .score-value {
-    font-size: 25px;
-    background: linear-gradient(90deg, #00eaff, #ff00ff);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    filter: drop-shadow(0 0 10px rgba(0, 234, 255, 0.8));
-}
-
-.rank-2 .player-score {
-    color: #ff00ff;
-    text-shadow: 0 0 12px rgba(255, 0, 255, 0.7);
-}
-
-.rank-3 .player-score {
-    color: #a855f7;
-    text-shadow: 0 0 12px rgba(138, 43, 226, 0.6);
-}
-
 .score-label {
     font-size: 11px;
     text-transform: uppercase;
@@ -358,15 +379,26 @@ h1::before {
     color: rgba(200, 200, 255, 0.5);
 }
 
-/* Your Rank Fixed Section */
+/* Badge Size Common */
+.rank-badge {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 17px;
+    font-weight: bold;
+    flex-shrink: 0;
+}
+
+/* Your Rank Section Structure */
 .your-rank-container {
-    background: rgba(20, 0, 40, 0.9);
-    border-radius: 14px;
-    padding: 15px 25px;
-    border: 2px solid rgba(0, 255, 136, 0.6);
-    box-shadow: 
-        0 0 25px rgba(0, 255, 136, 0.4),
-        inset 0 0 20px rgba(0, 255, 136, 0.15);
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin-top: 20px;
 }
 
 .your-rank-item {
@@ -375,15 +407,34 @@ h1::before {
     gap: 20px;
     padding: 18px 25px;
     border-radius: 14px;
-    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 234, 255, 0.1));
+    /* Default style if not top 3 */
+    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 0, 0, 0.5));
     border: 2px solid rgba(0, 255, 136, 0.5);
     box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
 }
 
-/* Responsive */
+/* --- RESPONSIVE FIX (MODE LAPTOP/LAYAR KECIL) --- */
+
+@media screen and (max-width: 1440px) {
+    /* Mencegah container nabrak tombol back */
+    .container {
+        width: 88%;
+        padding: 30px 50px;
+        max-height: 90vh;
+    }
+
+    .btn-back {
+        top: 20px;
+        left: 20px;
+        width: 45px;
+        height: 45px;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 35px 30px;
+        width: 95%;
     }
 
     h1 {
@@ -394,18 +445,6 @@ h1::before {
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
     }
-
-    .btn-back {
-        width: 45px;
-        height: 45px;
-        top: 20px;
-        left: 20px;
-    }
-
-    .btn-back svg {
-        width: 20px;
-        height: 20px;
-    }
 }
 
 @media (max-width: 480px) {
diff --git a/Leaderboard.php b/Leaderboard.php
index 3cfb4bb..689876a 100644
--- a/Leaderboard.php
+++ b/Leaderboard.php
@@ -1,7 +1,7 @@
 <?php
 header('Content-Type: application/json');
 require 'Connection.php';
-session_start(); // Penting untuk tahu siapa yang login
+session_start();
 
 $response = [
     "status" => "error",
@@ -9,8 +9,12 @@ $response = [
     "user_rank" => null
 ];
 
-// 1. Ambil Top 10 Global
-$query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10";
+// ---------------------------------------------------------
+// 1. Ambil Top 10 Global (DIPERBAIKI)
+// Ditambahkan "user_id ASC" agar urutannya PASTI (Konsisten)
+// Jika skor sama, user dengan ID lebih kecil (daftar duluan) akan di atas
+// ---------------------------------------------------------
+$query = "SELECT username, score FROM leaderboard ORDER BY score DESC, user_id ASC LIMIT 10";
 $result = $conn->query($query);
 
 if ($result && $result->num_rows > 0) {
@@ -19,7 +23,9 @@ if ($result && $result->num_rows > 0) {
     }
 }
 
-// 2. Ambil Ranking User yang sedang Login (Jika ada session)
+// ---------------------------------------------------------
+// 2. Ambil Ranking User Login (DIPERBAIKI)
+// ---------------------------------------------------------
 if (isset($_SESSION['user_id'])) {
     $my_id = $_SESSION['user_id'];
     
@@ -33,14 +39,26 @@ if (isset($_SESSION['user_id'])) {
         $myScore = $scoreRow['score'];
         $myUsername = $scoreRow['username'];
 
-        // Hitung Ranking (Count berapa orang yang score-nya lebih tinggi)
-        // Logika: Jumlah orang dengan score > score saya, ditambah 1
-        $rankQuery = $conn->prepare("SELECT COUNT(*) as rank_above FROM leaderboard WHERE score > ?");
-        $rankQuery->bind_param("i", $myScore);
+        // --- LOGIKA BARU ---
+        // Hitung ranking dengan Tie-Breaker.
+        // Rank = Jumlah orang yang skornya LEBIH BESAR
+        //        DITAMBAH Jumlah orang yang skornya SAMA tapi ID-nya LEBIH KECIL (dia di atas kita)
+        
+        $rankQuery = $conn->prepare("
+            SELECT COUNT(*) as rank_above 
+            FROM leaderboard 
+            WHERE score > ? 
+            OR (score = ? AND user_id < ?)
+        ");
+        
+        // Kita bind 3 parameter: score, score, id
+        $rankQuery->bind_param("iii", $myScore, $myScore, $my_id);
+        
         $rankQuery->execute();
         $rankResult = $rankQuery->get_result();
         $rankRow = $rankResult->fetch_assoc();
         
+        // Rank adalah jumlah orang di atas kita + 1
         $myRank = $rankRow['rank_above'] + 1;
 
         $response['user_rank'] = [