final final

assets/css/custom.css

@@ -15,6 +15,21 @@
     margin-left: 1rem !important;
 }
 
+#sound-toggle {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    margin-top: -8px;
+}
+
+#sound-toggle:hover {
+    transform: scale(1.1);
+}
+
+#sound-on-icon,
+#sound-off-icon {
+    font-size: 28px;
+}
+
 /* --- Base & Typography --- */
 :root {
     --font-family: 'Nunito', sans-serif;

index.php

@@ -38,8 +38,8 @@
                 <div class="d-flex align-items-center">
                     <h2 class="mb-0">Your Garden</h2>
                     <div id="sound-toggle" class="ms-3" style="cursor: pointer;">
-                        <svg id="sound-on-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
+                        <span id="sound-on-icon" style="font-size: 24px;">🔊</span>
-                        <svg id="sound-off-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x" style="display: none;"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>
+                        <span id="sound-off-icon" style="font-size: 24px; display: none;">🔇</span>
                     </div>
                 </div>
                 <div class="theme-switcher">