Card layout improvements for headtohead page

src/lib/components/SongPlayer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { songPlayerStore, currentTimeStore, togglePlay, setVolume } from '$lib/stores/songPlayer';
+  import { songPlayerStore, currentTimeStore, togglePlay } from '$lib/stores/songPlayer';
 
   export let hash: string;
   export let preferBeatLeader = false;
@@ -11,11 +11,6 @@
   function onToggle() {
     togglePlay(hash, preferBeatLeader);
   }
-
-  function onVolumeInput(e: Event) {
-    const v = Number((e.target as HTMLInputElement).value);
-    setVolume(v);
-  }
 </script>
 
 <div class="player">
@@ -29,13 +24,6 @@
   <div class="timeline" title="Progress">
     <div class="progress" style="width: {($songPlayerStore?.currentHash ? (currentTime / ($songPlayerStore?.duration || 1)) : 0) * 100}%"></div>
   </div>
-  <div class="time">
-    {Math.floor(currentTime / 60)}:{String(Math.floor(currentTime % 60)).padStart(2, '0')} /
-    {Math.floor(($songPlayerStore?.duration || 0) / 60)}:{String(Math.floor(($songPlayerStore?.duration || 0) % 60)).padStart(2, '0')}
-  </div>
-  <div class="volume">
-    <input type="range" min="0" max="1" step="0.01" value={$songPlayerStore?.volume} on:input={onVolumeInput} />
-  </div>
   <slot />
 </div>
 
@@ -44,8 +32,6 @@
   .play { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: transparent; color: white; cursor: pointer; }
   .timeline { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
   .progress { height: 100%; background: rgba(255,255,255,0.6); }
-  .time { font-size: 11px; opacity: 0.8; min-width: 80px; text-align: right; }
-  .volume input { width: 80px; }
 </style>