fix(player): one menu at a time, and inside the screen it opens on

Two defects in the video control bar, reported together because they present
together: the menus cover each other, and in portrait they cover the edge of
the screen instead of the video.

DR-256 (a) — audio track, quality and subtitles each owned a `show…` boolean
and no toggle cleared the others. Opening a second menu stacked it over the
first in the same corner: the newer panel hid rows of the older, both stayed
live, and both kept taking clicks. A single `openMenu` value replaces the three
booleans, which makes "at most one menu is open" a property of the state rather
than something every handler has to remember to enforce. The desktop volume
popup was a fourth uncoordinated menu in the same row, so `VolumeControl` grew
optional controlled-open props and joined the group; without them it still
manages itself, which is how MiniPlayer and AudioPlayer keep it.

DR-256 (b) — every panel was `absolute right-0` against *its own icon button*.
Those icons sit mid-row, so a 200-220 px panel extended left from a point well
inside the bar and hung off the left edge of a phone in portrait: half the
tracks could not be read, let alone tapped. One shared panel now anchors to the
control ROW's right edge, clamped to `min(20rem, 100vw - 2rem)` wide and
`min(300px, 45vh)` tall. A full-screen dismiss layer inside the controls subtree
closes it on a tap elsewhere — inside, so the tap never reaches the container's
gesture layer and cannot toggle playback (DR-098).

The volume popup had the same placement bug from the other side: `left-full`
opened it rightward from an icon near the right end of every bar it appears in.
It opens upward, right-aligned, now. And the icon row wraps rather than
overflowing — in portrait the transport controls plus nine icons are wider than
the screen, which pushed fullscreen and close past the edge.

The test renders the real component and drives the toggles, because neither
fault is visible from a helper: both are properties of the composition. It was
written first and failed on both counts — `["Audio Track", "Subtitles"]` open at
once, and no shared panel to anchor.

src/lib/components/player/VolumeControl.svelte

@@ -7,16 +7,31 @@
 
   interface Props {
     size?: "sm" | "md" | "lg";
+    /**
+     * Controlled open state. Omit it and the slider manages its own; pass it
+     * (with `onOpenChange`) when the host has other menus that must not be
+     * open at the same time — the video player's control bar does.
+     *
+     * TRACES: DR-256
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
   }
 
-  let { size = "md" }: Props = $props();
+  let { size = "md", open, onOpenChange }: Props = $props();
 
   // On Android, volume is controlled by system volume buttons (not a slider)
   const isAndroid = platform() === "android";
 
-  let showSlider = $state(false);
+  let selfOpen = $state(false);
+  const showSlider = $derived(open ?? selfOpen);
   let sliderValue = $state($mergedVolume);
 
+  function setOpen(next: boolean) {
+    if (onOpenChange) onOpenChange(next);
+    else selfOpen = next;
+  }
+
   // Sync slider with merged volume (handles both local and remote)
   $effect(() => {
     sliderValue = $mergedVolume;
@@ -44,7 +59,7 @@
   }
 
   function toggleSlider() {
-    showSlider = !showSlider;
+    setOpen(!showSlider);
   }
 
   // Icon sizes based on prop (use $derived for reactivity)
@@ -106,7 +121,7 @@
     <!-- Volume Slider (toggle on click) -->
     {#if showSlider}
       <div
-        class="absolute left-full ml-2 bg-[var(--color-surface)] rounded-lg shadow-lg p-3 z-[70] flex items-center gap-2"
+        class="absolute bottom-full right-0 mb-2 max-w-[calc(100vw-2rem)] bg-[var(--color-surface)] rounded-lg shadow-lg p-3 z-[70] flex items-center gap-2"
         role="group"
         aria-label="Volume controls"
       >
@@ -153,9 +168,6 @@
 
 <!-- Click outside to close volume slider -->
 {#if showSlider}
-  <button
-    class="fixed inset-0 z-[65]"
-    onclick={() => (showSlider = false)}
-    aria-label="Close volume"
+  <button class="fixed inset-0 z-[65]" onclick={() => setOpen(false)} aria-label="Close volume"
   ></button>
 {/if}