diff --git a/2048.css b/2048.css
index f76363c..40524ca 100644
--- a/2048.css
+++ b/2048.css
@@ -1042,373 +1042,4 @@ h1 {
     filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.5));
     line-height: 1;
     letter-spacing: -1px;
-}
-
-/* ===========================
-   ICON BUTTONS - Enhanced Color
-=========================== */
-.game-over-buttons {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    margin-top: 42px;
-}
-
-/* Icon Button Base Style */
-.btn-game-icon {
-    width: clamp(70px, 10vw, 80px);
-    height: clamp(70px, 10vw, 80px);
-    padding: 0;
-    background: rgba(255, 255, 255, 0.06);
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(10px);
-    box-shadow: 
-        0 8px 30px rgba(0, 0, 0, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    position: relative;
-    overflow: hidden;
-}
-
-.btn-game-icon svg {
-    width: clamp(32px, 5vw, 38px);
-    height: clamp(32px, 5vw, 38px);
-    transition: all 0.3s ease;
-    position: relative;
-    z-index: 2;
-}
-
-/* Shine Effect */
-.btn-game-icon::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
-    transition: left 0.5s ease;
-}
-
-.btn-game-icon:hover::before {
-    left: 100%;
-}
-
-.btn-game-icon:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.4);
-    box-shadow: 
-        0 12px 40px rgba(0, 0, 0, 0.5),
-        0 0 40px rgba(255, 255, 255, 0.15),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    transform: translateY(-4px);
-}
-
-.btn-game-icon:active {
-    transform: translateY(0);
-    box-shadow: 
-        0 4px 20px rgba(0, 0, 0, 0.4),
-        inset 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-/* Restart Button - EMERALD GREEN */
-.btn-restart-game {
-    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
-    border-color: rgba(16, 185, 129, 0.6);
-    box-shadow: 
-        0 8px 30px rgba(0, 0, 0, 0.4),
-        0 0 30px rgba(16, 185, 129, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.btn-restart-game svg {
-    color: #10b981;
-    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5));
-}
-
-.btn-restart-game:hover {
-    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
-    border-color: rgba(16, 185, 129, 0.9);
-    box-shadow: 
-        0 12px 40px rgba(0, 0, 0, 0.5),
-        0 0 50px rgba(16, 185, 129, 0.5),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-.btn-restart-game:hover svg {
-    transform: rotate(180deg);
-    color: #34d399;
-}
-
-/* Home Button - SKY BLUE */
-.btn-home-game {
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(2, 132, 199, 0.2));
-    border-color: rgba(14, 165, 233, 0.6);
-    box-shadow: 
-        0 8px 30px rgba(0, 0, 0, 0.4),
-        0 0 30px rgba(14, 165, 233, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.btn-home-game svg {
-    color: #0ea5e9;
-    filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.5));
-}
-
-.btn-home-game:hover {
-    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(2, 132, 199, 0.3));
-    border-color: rgba(14, 165, 233, 0.9);
-    box-shadow: 
-        0 12px 40px rgba(0, 0, 0, 0.5),
-        0 0 50px rgba(14, 165, 233, 0.5),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-.btn-home-game:hover svg {
-    transform: scale(1.1);
-    color: #38bdf8;
-}
-
-/* ==========================
-   ADVANCED SOUND CONTROL
-========================== */
-.sound-control-container {
-    position: fixed;
-    top: clamp(10px, 2vh, 20px);
-    left: clamp(10px, 2vw, 20px);
-    z-index: 101;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-}
-
-/* Backdrop Overlay untuk Mobile */
-.volume-backdrop {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(8px);
-    z-index: 99;
-    animation: fadeIn 0.2s ease-out;
-}
-
-.volume-backdrop.active {
-    display: block;
-}
-
-/* Main Sound Button */
-.btn-sound-main {
-    width: clamp(40px, 6.5vw, 52px);
-    height: clamp(40px, 6.5vw, 52px);
-    padding: 0;
-    background: rgba(30, 0, 50, 0.9);
-    backdrop-filter: blur(15px);
-    border: 2px solid rgba(0, 217, 255, 0.5);
-    border-radius: 14px;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 
-        0 5px 20px rgba(0, 0, 0, 0.4),
-        0 0 25px rgba(0, 217, 255, 0.25),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    position: relative;
-}
-
-.btn-sound-main svg {
-    width: clamp(20px, 3.5vw, 26px);
-    height: clamp(20px, 3.5vw, 26px);
-    color: rgba(0, 234, 255, 0.95);
-    transition: all 0.3s ease;
-    position: absolute;
-}
-
-.btn-sound-main:hover {
-    background: rgba(0, 234, 255, 0.18);
-    border-color: rgba(0, 234, 255, 0.85);
-    box-shadow: 
-        0 7px 28px rgba(0, 0, 0, 0.5),
-        0 0 40px rgba(0, 234, 255, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.15);
-    transform: translateY(-2px);
-}
-
-.btn-sound-main:hover svg {
-    color: rgba(0, 234, 255, 1);
-    transform: scale(1.12);
-}
-
-.btn-sound-main:active {
-    transform: translateY(0);
-}
-
-/* Muted State - Red */
-.btn-sound-main.all-muted {
-    background: rgba(60, 0, 10, 0.9) !important;
-    border-color: rgba(255, 60, 60, 0.7) !important;
-    box-shadow: 
-        0 5px 20px rgba(0, 0, 0, 0.4),
-        0 0 25px rgba(255, 60, 60, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
-}
-
-.btn-sound-main.all-muted svg {
-    color: rgba(255, 80, 80, 0.95) !important;
-}
-
-.btn-sound-main.all-muted:hover {
-    background: rgba(255, 60, 60, 0.2) !important;
-    border-color: rgba(255, 80, 80, 0.9) !important;
-}
-
-/* Volume Panel */
-.volume-panel {
-    display: none;
-    background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98));
-    backdrop-filter: blur(25px);
-    border: 2px solid rgba(0, 217, 255, 0.4);
-    border-radius: 18px;
-    padding: 20px 18px;
-    min-width: clamp(240px, 30vw, 280px);
-    box-shadow: 
-        0 20px 60px rgba(0, 0, 0, 0.7),
-        0 0 50px rgba(0, 217, 255, 0.3),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
-    z-index: 102;
-}
-
-.volume-panel.active {
-    display: block;
-}
-
-@keyframes slideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-15px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Volume Item */
-.volume-item {
-    margin-bottom: 18px;
-}
-
-.volume-item:last-child {
-    margin-bottom: 0;
-}
-
-.volume-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 8px;
-}
-
-.volume-icon {
-    width: 18px;
-    height: 18px;
-    color: rgba(0, 234, 255, 0.8);
-}
-
-.volume-label {
-    font-size: 13px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.9);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    flex: 1;
-}
-
-.volume-value {
-    font-size: 12px;
-    font-weight: 700;
-    color: rgba(0, 234, 255, 0.9);
-    min-width: 40px;
-    text-align: right;
-}
-
-/* Volume Slider */
-.volume-slider {
-    width: 100%;
-    height: 6px;
-    -webkit-appearance: none;
-    appearance: none;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    outline: none;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.volume-slider::-webkit-slider-track {
-    height: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
-
-.volume-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    background: linear-gradient(135deg, #00eaff 0%, #0099ff 100%);
-    border-radius: 50%;
-    cursor: pointer;
-    box-shadow: 
-        0 2px 10px rgba(0, 234, 255, 0.5),
-        0 0 20px rgba(0, 234, 255, 0.3);
-    transition: all 0.2s;
-}
-
-.volume-slider::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
-    box-shadow: 
-        0 4px 15px rgba(0, 234, 255, 0.7),
-        0 0 30px rgba(0, 234, 255, 0.5);
-}
-
-.volume-slider::-moz-range-track {
-    height: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
-
-.volume-slider::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    background: linear-gradient(135deg, #00eaff 0%, #0099ff 100%);
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    box-shadow: 
-        0 2px 10px rgba(0, 234, 255, 0.5),
-        0 0 20px rgba(0, 234, 255, 0.3);
-    transition: all 0.2s;
-}
-
-.volume-slider::-moz-range-thumb:hover {
-    transform: scale(1.2);
-}
-
-/* Slider Fill Effect */
-.volume-slider {
-    background: linear-gradient(to right, 
-        rgba(0, 234, 255, 0.3) 0%, 
-        rgba(0, 234, 255, 0.3) var(--value, 0%), 
-        rgba(255, 255, 255, 0.1) var(--value, 0%), 
-        rgba(255, 255, 255, 0.1) 100%);
-}
+}
\ No newline at end of file
diff --git a/2048.html b/2048.html
index a20eb6a..95e6002 100644
--- a/2048.html
+++ b/2048.html
@@ -7,8 +7,10 @@
     <link rel="stylesheet" href="2048_Background_Effects.css"/>
     <link rel="stylesheet" href="2048_Floating_Particles.css"/>
     <link rel="stylesheet" href="2048.css"/>
-    <link rel="stylesheet" href="2048_Responsive.css"/>
     <link rel="stylesheet" href="2048_Tiles_Colors.css"/>
+    <link rel="stylesheet" href="2048_Sound.css"/>
+    <link rel="stylesheet" href="2048_Button.css"/>
+    <link rel="stylesheet" href="2048_Responsive.css"/>
     <link rel="preconnect" href="https://fonts.googleapis.com"/>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
     <link
diff --git a/2048_Button.css b/2048_Button.css
new file mode 100644
index 0000000..8cc891e
--- /dev/null
+++ b/2048_Button.css
@@ -0,0 +1,129 @@
+/* ===========================
+   ICON BUTTONS - Enhanced Color
+=========================== */
+.game-over-buttons {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    margin-top: 42px;
+}
+
+/* Icon Button Base Style */
+.btn-game-icon {
+    width: clamp(70px, 10vw, 80px);
+    height: clamp(70px, 10vw, 80px);
+    padding: 0;
+    background: rgba(255, 255, 255, 0.06);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+    box-shadow: 
+        0 8px 30px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-game-icon svg {
+    width: clamp(32px, 5vw, 38px);
+    height: clamp(32px, 5vw, 38px);
+    transition: all 0.3s ease;
+    position: relative;
+    z-index: 2;
+}
+
+/* Shine Effect */
+.btn-game-icon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    transition: left 0.5s ease;
+}
+
+.btn-game-icon:hover::before {
+    left: 100%;
+}
+
+.btn-game-icon:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 
+        0 12px 40px rgba(0, 0, 0, 0.5),
+        0 0 40px rgba(255, 255, 255, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    transform: translateY(-4px);
+}
+
+.btn-game-icon:active {
+    transform: translateY(0);
+    box-shadow: 
+        0 4px 20px rgba(0, 0, 0, 0.4),
+        inset 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Restart Button - EMERALD GREEN */
+.btn-restart-game {
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
+    border-color: rgba(16, 185, 129, 0.6);
+    box-shadow: 
+        0 8px 30px rgba(0, 0, 0, 0.4),
+        0 0 30px rgba(16, 185, 129, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.btn-restart-game svg {
+    color: #10b981;
+    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.5));
+}
+
+.btn-restart-game:hover {
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
+    border-color: rgba(16, 185, 129, 0.9);
+    box-shadow: 
+        0 12px 40px rgba(0, 0, 0, 0.5),
+        0 0 50px rgba(16, 185, 129, 0.5),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.btn-restart-game:hover svg {
+    transform: rotate(180deg);
+    color: #34d399;
+}
+
+/* Home Button - SKY BLUE */
+.btn-home-game {
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(2, 132, 199, 0.2));
+    border-color: rgba(14, 165, 233, 0.6);
+    box-shadow: 
+        0 8px 30px rgba(0, 0, 0, 0.4),
+        0 0 30px rgba(14, 165, 233, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.btn-home-game svg {
+    color: #0ea5e9;
+    filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.5));
+}
+
+.btn-home-game:hover {
+    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(2, 132, 199, 0.3));
+    border-color: rgba(14, 165, 233, 0.9);
+    box-shadow: 
+        0 12px 40px rgba(0, 0, 0, 0.5),
+        0 0 50px rgba(14, 165, 233, 0.5),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.btn-home-game:hover svg {
+    transform: scale(1.1);
+    color: #38bdf8;
+}
\ No newline at end of file
diff --git a/2048_Sound.css b/2048_Sound.css
new file mode 100644
index 0000000..3ef6521
--- /dev/null
+++ b/2048_Sound.css
@@ -0,0 +1,238 @@
+/* ==========================
+   ADVANCED SOUND CONTROL
+========================== */
+.sound-control-container {
+    position: fixed;
+    top: clamp(10px, 2vh, 20px);
+    left: clamp(10px, 2vw, 20px);
+    z-index: 101;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+}
+
+/* Backdrop Overlay untuk Mobile */
+.volume-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(8px);
+    z-index: 99;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.volume-backdrop.active {
+    display: block;
+}
+
+/* Main Sound Button */
+.btn-sound-main {
+    width: clamp(40px, 6.5vw, 52px);
+    height: clamp(40px, 6.5vw, 52px);
+    padding: 0;
+    background: rgba(30, 0, 50, 0.9);
+    backdrop-filter: blur(15px);
+    border: 2px solid rgba(0, 217, 255, 0.5);
+    border-radius: 14px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 
+        0 5px 20px rgba(0, 0, 0, 0.4),
+        0 0 25px rgba(0, 217, 255, 0.25),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    position: relative;
+}
+
+.btn-sound-main svg {
+    width: clamp(20px, 3.5vw, 26px);
+    height: clamp(20px, 3.5vw, 26px);
+    color: rgba(0, 234, 255, 0.95);
+    transition: all 0.3s ease;
+    position: absolute;
+}
+
+.btn-sound-main:hover {
+    background: rgba(0, 234, 255, 0.18);
+    border-color: rgba(0, 234, 255, 0.85);
+    box-shadow: 
+        0 7px 28px rgba(0, 0, 0, 0.5),
+        0 0 40px rgba(0, 234, 255, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+.btn-sound-main:hover svg {
+    color: rgba(0, 234, 255, 1);
+    transform: scale(1.12);
+}
+
+.btn-sound-main:active {
+    transform: translateY(0);
+}
+
+/* Muted State - Red */
+.btn-sound-main.all-muted {
+    background: rgba(60, 0, 10, 0.9) !important;
+    border-color: rgba(255, 60, 60, 0.7) !important;
+    box-shadow: 
+        0 5px 20px rgba(0, 0, 0, 0.4),
+        0 0 25px rgba(255, 60, 60, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+}
+
+.btn-sound-main.all-muted svg {
+    color: rgba(255, 80, 80, 0.95) !important;
+}
+
+.btn-sound-main.all-muted:hover {
+    background: rgba(255, 60, 60, 0.2) !important;
+    border-color: rgba(255, 80, 80, 0.9) !important;
+}
+
+/* Volume Panel */
+.volume-panel {
+    display: none;
+    background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98));
+    backdrop-filter: blur(25px);
+    border: 2px solid rgba(0, 217, 255, 0.4);
+    border-radius: 18px;
+    padding: 20px 18px;
+    min-width: clamp(240px, 30vw, 280px);
+    box-shadow: 
+        0 20px 60px rgba(0, 0, 0, 0.7),
+        0 0 50px rgba(0, 217, 255, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+    z-index: 102;
+}
+
+.volume-panel.active {
+    display: block;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-15px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Volume Item */
+.volume-item {
+    margin-bottom: 18px;
+}
+
+.volume-item:last-child {
+    margin-bottom: 0;
+}
+
+.volume-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.volume-icon {
+    width: 18px;
+    height: 18px;
+    color: rgba(0, 234, 255, 0.8);
+}
+
+.volume-label {
+    font-size: 13px;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.9);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    flex: 1;
+}
+
+.volume-value {
+    font-size: 12px;
+    font-weight: 700;
+    color: rgba(0, 234, 255, 0.9);
+    min-width: 40px;
+    text-align: right;
+}
+
+/* Volume Slider */
+.volume-slider {
+    width: 100%;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    outline: none;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.volume-slider::-webkit-slider-track {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(135deg, #00eaff 0%, #0099ff 100%);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 
+        0 2px 10px rgba(0, 234, 255, 0.5),
+        0 0 20px rgba(0, 234, 255, 0.3);
+    transition: all 0.2s;
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 
+        0 4px 15px rgba(0, 234, 255, 0.7),
+        0 0 30px rgba(0, 234, 255, 0.5);
+}
+
+.volume-slider::-moz-range-track {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+.volume-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(135deg, #00eaff 0%, #0099ff 100%);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 
+        0 2px 10px rgba(0, 234, 255, 0.5),
+        0 0 20px rgba(0, 234, 255, 0.3);
+    transition: all 0.2s;
+}
+
+.volume-slider::-moz-range-thumb:hover {
+    transform: scale(1.2);
+}
+
+/* Slider Fill Effect */
+.volume-slider {
+    background: linear-gradient(to right, 
+        rgba(0, 234, 255, 0.3) 0%, 
+        rgba(0, 234, 255, 0.3) var(--value, 0%), 
+        rgba(255, 255, 255, 0.1) var(--value, 0%), 
+        rgba(255, 255, 255, 0.1) 100%);
+}
\ No newline at end of file
diff --git a/2048_Tutorial_Logic.js b/2048_Tutorial_Logic.js
index f13bbce..a22dd83 100644
--- a/2048_Tutorial_Logic.js
+++ b/2048_Tutorial_Logic.js
@@ -1,24 +1,19 @@
-/* ----------------------------------------------------
-   FILE: Tutorial_Logic.js
-   ---------------------------------------------------- */
-
-// Kita buat fungsi agar bisa dipanggil manual jika perlu
 function checkAndShowTutorial() {
-    // 1. Ambil user terbaru saat fungsi dijalankan
+    // Ambil user terbaru saat fungsi dijalankan
     const currentUser = sessionStorage.getItem("loggedInUser") || "guest";
     const tutorialKey = 'tutorialSeen_' + currentUser;
 
-    // DEBUG: Cek di Console browser (tekan F12 -> Console)
+    // Cek di Console browser (tekan F12 -> Console)
     console.log(`[Tutorial Check] User: ${currentUser}`);
     console.log(`[Tutorial Check] Key: ${tutorialKey}`);
     
-    // 2. Cek status di LocalStorage
+    // Cek status di LocalStorage
     const hasSeenTutorial = localStorage.getItem(tutorialKey);
     console.log(`[Tutorial Check] Status Seen: ${hasSeenTutorial}`);
 
     const tutorialOverlay = document.getElementById('tutorial-overlay');
 
-    // 3. Logic: Jika belum pernah lihat (null) -> Tampilkan
+    // Logic: Jika belum pernah lihat (null) -> Tampilkan
     if (!hasSeenTutorial && tutorialOverlay) {
         console.log("-> Menampilkan Tutorial untuk user baru.");
         tutorialOverlay.style.display = 'flex';
@@ -48,5 +43,4 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
-// (Opsional) Bikin global biar bisa dipanggil dari file lain/console
 window.checkTutorial = checkAndShowTutorial;
\ No newline at end of file
diff --git a/Leaderboard.css b/Leaderboard.css
index b35c1ea..e67eb43 100644
--- a/Leaderboard.css
+++ b/Leaderboard.css
@@ -1,15 +1,18 @@
-/* Leaderboard.css */
-
 /* Main Container */
 .container {
-    margin-top: 70px;
+    height: auto !important;       
+    max-height: none !important;   
+    min-height: 500px;             
+    margin-top: 0;
     position: relative;
     z-index: 2;
     background: rgba(20, 0, 40, 0.65);
     border-radius: 20px;
     padding: 40px 100px;
-    width: 98%;
+    width: 90%;
     max-width: 1600px;
+    height: auto; 
+    max-height: none;
     border: 2px solid rgba(0, 255, 255, 0.4);
     box-shadow: 
         0 0 25px rgba(0, 255, 255, 0.4),
@@ -74,9 +77,10 @@ h1::before {
     display: flex;
     flex-direction: column;
     gap: 14px;
-    max-height: 500px;
-    overflow-y: auto;
-    padding-right: 10px;
+    max-height: none;
+    overflow-y: visible;
+    height: auto;
+    padding-right: 0px;
     padding-bottom: 5px;
     margin-bottom: 20px;
 }
@@ -222,6 +226,22 @@ h1::before {
     box-shadow: none;
     padding: 0;
     margin-top: 20px;
+    position: relative;
+    border-top: 1px solid rgba(0, 255, 136, 0.2); /* Garis hijau tipis */
+    box-shadow: 0 -15px 20px -10px rgba(0, 255, 136, 0.1); /* Glow hijau ke atas */
+}
+
+.your-rank-container::before {
+    content: '';
+    position: absolute;
+    top: -1px; /* Pas di garis border */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50px;
+    height: 2px;
+    background: #00ff88;
+    box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
+    border-radius: 2px;
 }
 
 .your-rank-item {
@@ -233,4 +253,4 @@ h1::before {
     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);
-}
\ No newline at end of file
+}
diff --git a/Leaderboard_Base.css b/Leaderboard_Base.css
index ee62f95..0906738 100644
--- a/Leaderboard_Base.css
+++ b/Leaderboard_Base.css
@@ -8,12 +8,15 @@
 
 body {
     font-family: 'Arial', sans-serif;
-    background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
+    background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%) fixed; 
+    background-size: cover;
     min-height: 100vh;
     display: flex;
     justify-content: center;
-    align-items: center;
-    overflow: hidden;
+    align-items: flex-start;
+    overflow-y: auto;
+    padding-top: 50px;
+    padding-bottom: 50px;
     position: relative;
 }
 
@@ -35,4 +38,32 @@ body {
     background: radial-gradient(circle, #00ffff, #0099ff);
     box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
     pointer-events: none;
+}
+
+/* Leaderboard_Base.css - Bagian Paling Bawah */
+
+/* === KUSTOMISASI SCROLLBAR BROWSER UTAMA === */
+/* Lebar Scrollbar */
+::-webkit-scrollbar {
+    width: 12px;
+    background: #0b0015; /* Latar belakang track gelap */
+}
+
+/* Track (Jalur) */
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Thumb (Batang Scroll) */
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #3b0066, #ff00ff); /* Gradasi Ungu ke Pink */
+    border-radius: 6px;
+    border: 3px solid #0b0015; /* Memberi jarak agar terlihat melayang */
+}
+
+/* Efek Hover di Scrollbar */
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #5e00a3, #ff33ff);
+    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); /* Efek glow saat disentuh */
 }
\ No newline at end of file