- replace text play/pause symbols with svg icons

- cap `pauseResumeButton` size at `300px` on desktop
- add glossy hover effect with pseudo-element
- improve button shadows and transitions
- implement `updateButtonIcon()` function for dynamic svg sizing

Author: TobiasMue91

tools/spotify_music_quiz_cards.html

@@ -84,36 +84,64 @@
         }
 
         #pauseResumeButton {
-            width: 60vmin;
-            height: 60vmin;
-            font-size: 30vmin;
-            padding-bottom: 4vmin;
+            width: min(60vmin, 300px);  /* Cap the max size on desktop */
+            height: min(60vmin, 300px);
             border: none;
             border-radius: 50%;
-            background: linear-gradient(145deg, #1DB954, #169c45);
-            color: white;
+            background: linear-gradient(145deg, #2FE075, #1DB954);
             cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 20px rgba(29, 185, 84, 0.3);
+            position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-weight: 900;
-            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2);
+            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+            box-shadow:
+                    0 2rem 4rem rgba(29, 185, 84, 0.2),
+                    0 1rem 2rem rgba(0, 0, 0, 0.1),
+                    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
+                    inset 0 2px 0 rgba(255, 255, 255, 0.2);
+            overflow: hidden;
+        }
+
+        #pauseResumeButton::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 50%;
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
 
         #pauseResumeButton:hover {
-            transform: scale(1.02);
-            box-shadow: 0 15px 30px rgba(29, 185, 84, 0.4);
+            transform: translateY(-4px);
+            background: linear-gradient(145deg, #34F07E, #1FCC5E);
+            box-shadow:
+                    0 3rem 5rem rgba(29, 185, 84, 0.25),
+                    0 1.5rem 3rem rgba(0, 0, 0, 0.15),
+                    inset 0 -2px 0 rgba(0, 0, 0, 0.1),
+                    inset 0 2px 0 rgba(255, 255, 255, 0.2);
+        }
+
+        #pauseResumeButton:hover::before {
+            opacity: 1;
         }
 
         #pauseResumeButton:active {
-            transform: scale(0.98);
-            box-shadow: 0 5px 15px rgba(29, 185, 84, 0.2);
+            transform: translateY(2px);
+            background: linear-gradient(145deg, #1DB954, #1AA54C);
+            box-shadow:
+                    0 1rem 2rem rgba(29, 185, 84, 0.15),
+                    0 0.5rem 1rem rgba(0, 0, 0, 0.1),
+                    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
 
-        #pauseResumeButton .play {
-            padding-left: 4vmin;
+        #pauseResumeButton svg {
+            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
         }
 
         #player {
@@ -199,7 +227,7 @@
 
 <div id="player" class="hidden">
     <div class="button-container">
-        <button id="pauseResumeButton"><span class="pause">||</span></button>
+        <button id="pauseResumeButton"><span class="play">▷</span></button>
         <a href="https://www.gptgames.dev/tools/spotify_qr_scanner" class="scan-button">
             Scan for next song
         </a>
@@ -256,7 +284,23 @@ <h2 class="text-xl font-bold mb-4">Create QR Codes from Playlist</h2>
             playerInstance.resume();
         }
         isPlaying = !isPlaying;
-        pauseResumeButton.innerHTML = isPlaying ? '<span class="pause">||</span>' : '<span class="play">▷</span>';
+        updateButtonIcon();
+    }
+
+    function updateButtonIcon() {
+        const size = Math.min(window.innerWidth, window.innerHeight) * 0.4; // 40% of viewport
+        const button = document.getElementById('pauseResumeButton');
+
+        if (isPlaying) {
+            button.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
+                <rect x="6" y="4" width="4" height="16" fill="white"/>
+                <rect x="14" y="4" width="4" height="16" fill="white"/>
+            </svg>`;
+        } else {
+            button.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" fill="white"/>
+            </svg>`;
+        }
     }
 
     function getUrlParameter(name) {
@@ -343,6 +387,7 @@ <h2 class="text-xl font-bold mb-4">Create QR Codes from Playlist</h2>
             document.getElementById('songCount').textContent = e.target.value;
         });
         document.getElementById('createQRButton').onclick = showPlaylistModal;
+        updateButtonIcon();
     });
 
     async function processPlaylist() {