From e4c4a3795f31fadddce24e650634daf6f2c579a1 Mon Sep 17 00:00:00 2001
From: Jevinca Marvella <mjevincamarvella@gmail.com>
Date: Tue, 2 Dec 2025 20:19:55 +0700
Subject: [PATCH] 2048

---
 2048.css      |  31 +++++++++--
 2048.html     | 143 +++++++++++++-------------------------------------
 Audio_2048.js |  28 ++++++++--
 3 files changed, 87 insertions(+), 115 deletions(-)
diff --git a/2048.css b/2048.css
index cc04407..252391e 100644
--- a/2048.css
+++ b/2048.css
@@ -1410,7 +1410,26 @@ h1 {
     position: fixed;
     top: clamp(10px, 2vh, 20px);
     left: clamp(10px, 2vw, 20px);
-    z-index: 100;
+    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 */
@@ -1482,9 +1501,7 @@ h1 {
 
 /* Volume Panel */
 .volume-panel {
-    position: absolute;
-    top: clamp(46px, 8vh, 60px);
-    left: 0;
+    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);
@@ -1496,6 +1513,11 @@ h1 {
         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 {
@@ -1639,4 +1661,3 @@ h1 {
         font-size: 11px;
     }
 }
-
diff --git a/2048.html b/2048.html
index 197dd56..2fbfa3d 100644
--- a/2048.html
+++ b/2048.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>2048</title>
+    <title>2048 - Neon Edition</title>
     <link rel="stylesheet" href="2048.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -20,13 +20,12 @@
 
     <!-- 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"
-      >
-        <!-- Icon Full Sound (all ON) -->
+      <!-- Backdrop Overlay (Hidden by default) -->
+      <div class="volume-backdrop" id="volume-backdrop"></div>
+    
+      <!-- Main Sound Button - HAPUS class "icon-btn" -->
+      <button class="btn-sound-main" id="btn-sound-main" title="Sound Settings">
+        <!-- Icon Full Sound (avg ≥ 60%) -->
         <svg
           class="sound-full"
           viewBox="0 0 24 24"
@@ -35,11 +34,10 @@
           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"
-          />
+          <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) -->
+        
+        <!-- Icon Medium Sound (avg ≥ 30% && < 60%) -->
         <svg
           class="sound-medium"
           viewBox="0 0 24 24"
@@ -52,7 +50,7 @@
           <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
         </svg>
 
-        <!-- Icon Low Sound (mostly muted) -->
+        <!-- Icon Low Sound (avg > 0% && < 30%) -->
         <svg
           class="sound-low"
           viewBox="0 0 24 24"
@@ -64,7 +62,7 @@
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
         </svg>
         
-        <!-- Icon Muted (all OFF) -->
+        <!-- Icon Muted (all volumes = 0%) -->
         <svg
           class="sound-muted"
           viewBox="0 0 24 24"
@@ -80,20 +78,18 @@
       </button>
 
       <!-- Volume Sliders Panel (Hidden by default) -->
-      <div class="volume-panel" id="volume-panel" style="display: none">
+      <div class="volume-panel" id="volume-panel">
         <!-- Music Volume -->
         <div class="volume-item">
           <div class="volume-header">
             <svg
-              class="volume-icon"
+              class="volume-icon icon-music"
               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"
-              />
+              <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>
@@ -112,7 +108,7 @@
         <div class="volume-item">
           <div class="volume-header">
             <svg
-              class="volume-icon"
+              class="volume-icon icon-pop"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -138,15 +134,13 @@
         <div class="volume-item">
           <div class="volume-header">
             <svg
-              class="volume-icon"
+              class="volume-icon icon-merge"
               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"
-              />
+              <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>
@@ -162,13 +156,10 @@
         </div>
       </div>
     </div>
+
     <!-- Top Right Controls -->
     <div class="top-controls">
-      <button
-        class="icon-btn btn-tutorial"
-        id="btn-tutorial"
-        title="How to Play"
-      >
+      <button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
         <svg
           viewBox="0 0 24 24"
           fill="none"
@@ -180,20 +171,14 @@
           <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"
-      >
+      <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"
-          />
+          <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>
@@ -223,12 +208,7 @@
     <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"
-          >
+          <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>
@@ -237,11 +217,10 @@
         <h2 class="tutorial-title">How to Play</h2>
 
         <div class="tutorial-content">
-          <!-- PC Controls - Hidden on Mobile -->
+          <!-- PC Controls -->
           <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>
@@ -253,10 +232,7 @@
                 </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>
@@ -271,7 +247,7 @@
             </div>
           </div>
 
-          <!-- Mobile Controls - Hidden on PC -->
+          <!-- Mobile Controls -->
           <div class="tutorial-section mobile-controls">
             <h3>📱 Mobile Controls</h3>
             <div class="swipe-demo">
@@ -283,8 +259,7 @@
           <div class="tutorial-section">
             <h3>🎯 Objective</h3>
             <p class="objective-text">
-              Combine tiles with the same numbers to reach
-              <strong>2048</strong>!
+              Combine tiles with the same numbers to reach <strong>2048</strong>!
             </p>
           </div>
         </div>
@@ -294,84 +269,39 @@
     <!-- 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"
-          >
+          <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 class="new-high-score" id="new-high-score-badge" style="display: none">
+            🏆 New High Score!
           </div>
 
-          <!-- high Score Display - show if NOT new record -->
-          <div
-            class="high-score-display"
-            id="high-score-display"
-            style="display: none"
-          >
+          <div class="high-score-display" id="high-score-display" style="display: none">
             <div class="high-score-label">High Score</div>
             <div class="high-score-value" id="modal-high-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"
-              />
+          <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"
-            >
+          <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>
@@ -379,6 +309,7 @@
         </div>
       </div>
     </div>
+
     <script src="Score_Request.js"></script>
     <script src="2048.js"></script>
     <script src="Audio_2048.js"></script>
@@ -388,4 +319,4 @@
     <script src="2048_Controls.js"></script>
     <script src="Main_2048.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Audio_2048.js b/Audio_2048.js
index f564076..2ba8b53 100644
--- a/Audio_2048.js
+++ b/Audio_2048.js
@@ -111,17 +111,37 @@ function initVolumeControl() {
 function setupVolumePanelEvents() {
     const btnSoundMain = document.getElementById('btn-sound-main');
     const volumePanel = document.getElementById('volume-panel');
+    const volumeBackdrop = document.getElementById('volume-backdrop');
     
     if (btnSoundMain && volumePanel) {
       btnSoundMain.addEventListener('click', (e) => {
         e.stopPropagation();
-        const isVisible = volumePanel.style.display === 'block';
-        volumePanel.style.display = isVisible ? 'none' : 'block';
+        const isActive = volumePanel.classList.contains('active');
+        
+        if (isActive) {
+          volumePanel.classList.remove('active');
+          if (volumeBackdrop) volumeBackdrop.classList.remove('active');
+        } else {
+          volumePanel.classList.add('active');
+          if (volumeBackdrop) volumeBackdrop.classList.add('active');
+        }
       });
       
+      // Close when clicking backdrop
+      if (volumeBackdrop) {
+        volumeBackdrop.addEventListener('click', () => {
+          volumePanel.classList.remove('active');
+          volumeBackdrop.classList.remove('active');
+        });
+      }
+      
+      // Close when clicking outside (desktop)
       document.addEventListener('click', (e) => {
-        if (!volumePanel.contains(e.target) && !btnSoundMain.contains(e.target)) {
-          volumePanel.style.display = 'none';
+        if (!volumePanel.contains(e.target) && 
+            !btnSoundMain.contains(e.target) &&
+            (!volumeBackdrop || !volumeBackdrop.contains(e.target))) {
+          volumePanel.classList.remove('active');
+          if (volumeBackdrop) volumeBackdrop.classList.remove('active');
         }
       });
       
