diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index 8b15a4e..38f0242 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -453,423 +453,188 @@
 	{/if}
 </svelte:head>
 
-{#if isMobile}
-	<!-- Mobile: mini bar + expandable drawer -->
-	<div
-		class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl"
-	>
-		<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
-			<button
-				class="inline-flex h-8 w-8 items-center justify-center rounded border"
-				type="button"
-				onclick={() => toggleUiOpen()}
-				aria-label={snap.uiOpen ? "Close player" : "Open player"}
-				title={snap.uiOpen ? "Close player" : "Open player"}
-			>
-				{#if snap.uiOpen}
-					<X class="h-4 w-4" />
-				{:else}
-					<ChevronsUpDown class="h-4 w-4" />
-				{/if}
-			</button>
+<!-- Mobile UI is allowed to render as an overlay even if this component is mounted
+     inside the desktop sidebar column. We hide it on lg+ via CSS, not by unmounting. -->
+<div
+	class="lg:hidden fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl"
+>
+	<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
+		<button
+			class="inline-flex h-8 w-8 items-center justify-center rounded border"
+			type="button"
+			onclick={() => toggleUiOpen()}
+			aria-label={snap.uiOpen ? "Close player" : "Open player"}
+			title={snap.uiOpen ? "Close player" : "Open player"}
+		>
+			{#if snap.uiOpen}
+				<X class="h-4 w-4" />
+			{:else}
+				<ChevronsUpDown class="h-4 w-4" />
+			{/if}
+		</button>
 
-			<div
-				class="min-w-0 flex-1"
-				role="button"
-				tabindex="0"
-				aria-label={snap.uiOpen ? "Close player" : "Open player"}
-				onclick={(e) => {
-					const t = e.target as HTMLElement | null;
-					// Only toggle when tapping the track info area. Avoid toggling from
-					// the button zones (above/below/side) by not attaching handlers to the
-					// whole bar.
-					if (t?.closest("button,input,label,a")) return;
-					toggleUiOpen();
-				}}
-				onkeydown={(e) => {
-					if (e.key !== "Enter" && e.key !== " ") return;
-					const t = e.target as HTMLElement | null;
-					if (t?.closest("button,input,label,a")) return;
-					e.preventDefault();
-					toggleUiOpen();
-				}}
-			>
-				{#if snap.currentTrack}
-					<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-						{#if typeNumberLabel(snap.currentTrack)}
-							<span
-								class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-							>
-								{typeNumberLabel(snap.currentTrack)}
-							</span>
-						{/if}
-						<span class="truncate">
-							{(
-								snap.currentTrack.animeName ??
-								snap.currentTrack.album ??
-								""
-							).trim()}
+		<div
+			class="min-w-0 flex-1"
+			role="button"
+			tabindex="0"
+			aria-label={snap.uiOpen ? "Close player" : "Open player"}
+			onclick={(e) => {
+				const t = e.target as HTMLElement | null;
+				// Only toggle when tapping the track info area. Avoid toggling from
+				// the button zones (above/below/side) by not attaching handlers to the
+				// whole bar.
+				if (t?.closest("button,input,label,a")) return;
+				toggleUiOpen();
+			}}
+			onkeydown={(e) => {
+				if (e.key !== "Enter" && e.key !== " ") return;
+				const t = e.target as HTMLElement | null;
+				if (t?.closest("button,input,label,a")) return;
+				e.preventDefault();
+				toggleUiOpen();
+			}}
+		>
+			{#if snap.currentTrack}
+				<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+					{#if typeNumberLabel(snap.currentTrack)}
+						<span
+							class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+						>
+							{typeNumberLabel(snap.currentTrack)}
 						</span>
-					</div>
-
-					<div class="mt-1 text-foreground/80">
-						{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
-						<span class="text-sm text-muted-foreground">
-							— {(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
-						</span>
-					</div>
-				{:else}
-					<div class="truncate text-sm font-medium">{nowPlayingLabel()}</div>
-				{/if}
-
-				<div class="text-xs text-muted-foreground">
-					{formatTime(currentTime)} / {formatTime(duration)}
+					{/if}
+					<span class="truncate">
+						{(
+							snap.currentTrack.animeName ??
+							snap.currentTrack.album ??
+							""
+						).trim()}
+					</span>
 				</div>
 
-				<label class="mt-2 block">
-					<span class="sr-only">Seek</span>
-					<input
-						class="w-full"
-						type="range"
-						min="0"
-						max={Math.max(0, duration)}
-						step="0.1"
-						bind:value={currentTime}
-						disabled={!snap.currentTrack || duration <= 0}
-					/>
-				</label>
+				<div class="mt-1 text-foreground/80">
+					{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
+					<span class="text-sm text-muted-foreground">
+						— {(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
+					</span>
+				</div>
+			{:else}
+				<div class="truncate text-sm font-medium">{nowPlayingLabel()}</div>
+			{/if}
+
+			<div class="text-xs text-muted-foreground">
+				{formatTime(currentTime)} / {formatTime(duration)}
 			</div>
 
-			<button
-				class="inline-flex h-8 w-8 items-center justify-center rounded border"
-				type="button"
-				disabled={!canPrev}
-				aria-label="Previous"
-				title="Previous"
-				onclick={() => {
-					prev(currentTime);
-					void syncAndAutoplay();
-				}}
-			>
-				<SkipBack class="h-4 w-4" />
-			</button>
-
-			<button
-				class="inline-flex h-8 w-8 items-center justify-center rounded border"
-				type="button"
-				aria-label={isPlaying ? "Pause" : "Play"}
-				title={isPlaying ? "Pause" : "Play"}
-				onclick={() => {
-					if (!audioEl) return;
-					if (audioEl.paused) void audioEl.play();
-					else audioEl.pause();
-				}}
-				disabled={!snap.currentTrack}
-			>
-				{#if isPlaying}
-					<PauseIcon class="h-4 w-4" />
-				{:else}
-					<PlayIcon class="h-4 w-4" />
-				{/if}
-			</button>
-
-			<button
-				class="inline-flex h-8 w-8 items-center justify-center rounded border"
-				type="button"
-				disabled={!canNext}
-				aria-label="Next"
-				title="Next"
-				onclick={() => {
-					next();
-					void syncAndAutoplay();
-				}}
-			>
-				<SkipForward class="h-4 w-4" />
-			</button>
+			<label class="mt-2 block">
+				<span class="sr-only">Seek</span>
+				<input
+					class="w-full"
+					type="range"
+					min="0"
+					max={Math.max(0, duration)}
+					step="0.1"
+					bind:value={currentTime}
+					disabled={!snap.currentTrack || duration <= 0}
+				/>
+			</label>
 		</div>
 
-		{#if snap.uiOpen}
-			<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3">
-				<div class="mx-auto max-w-4xl space-y-3">
-					<div class="flex flex-wrap items-center gap-2">
-						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
-							type="button"
-							onclick={() => toggleShuffle()}
-							aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
-							title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
-						>
-							<Shuffle class="h-4 w-4" />
-						</button>
-						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
-							type="button"
-							onclick={() => toggleWrap()}
-							aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
-							title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
-						>
-							<Repeat class="h-4 w-4" />
-						</button>
+		<button
+			class="inline-flex h-8 w-8 items-center justify-center rounded border"
+			type="button"
+			disabled={!canPrev}
+			aria-label="Previous"
+			title="Previous"
+			onclick={() => {
+				prev(currentTime);
+				void syncAndAutoplay();
+			}}
+		>
+			<SkipBack class="h-4 w-4" />
+		</button>
 
-						<label class="ml-auto flex items-center gap-2 text-sm">
-							<span class="text-muted-foreground" aria-hidden="true">
-								<Volume2 class="h-4 w-4" />
-							</span>
-							<span class="sr-only">Volume</span>
-							<input
-								type="range"
-								min="0"
-								max="1"
-								step="0.01"
-								value={snap.volume}
-								oninput={(e) =>
-									setVolume(
-										Number((e.currentTarget as HTMLInputElement).value),
-									)}
-							/>
-						</label>
-					</div>
+		<button
+			class="inline-flex h-8 w-8 items-center justify-center rounded border"
+			type="button"
+			aria-label={isPlaying ? "Pause" : "Play"}
+			title={isPlaying ? "Pause" : "Play"}
+			onclick={() => {
+				if (!audioEl) return;
+				if (audioEl.paused) void audioEl.play();
+				else audioEl.pause();
+			}}
+			disabled={!snap.currentTrack}
+		>
+			{#if isPlaying}
+				<PauseIcon class="h-4 w-4" />
+			{:else}
+				<PlayIcon class="h-4 w-4" />
+			{/if}
+		</button>
 
-					<div class="space-y-1">
-						<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
-
-						{#if snap.queue.length === 0}
-							<p class="text-sm text-muted-foreground">Queue is empty.</p>
-						{:else}
-							<ul class="overflow-auto rounded border">
-								{#each queueDisplay as item (item.track.id)}
-									<li
-										class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
-									>
-										<button
-											class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
-											type="button"
-											onclick={() => {
-												jumpToTrack(item.track.id);
-												void syncAndAutoplay();
-											}}
-										>
-											{#if item.isCurrent}
-												<span class="text-muted-foreground">▶ </span>
-											{/if}
-											<div class="min-w-0 flex-1">
-												<div
-													class="flex flex-wrap items-baseline gap-x-2 gap-y-1"
-												>
-													{#if typeNumberLabel(item.track)}
-														<span
-															class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-														>
-															{typeNumberLabel(item.track)}
-														</span>
-													{/if}
-													<span class="truncate text-sm"
-														>{animeLabel(item.track)}</span
-													>
-												</div>
-
-												<div class="mt-1 text-foreground/80">
-													{(item.track.title ?? "").trim() || "Unknown title"}
-													<span class="text-sm text-muted-foreground">
-														— {(item.track.artist ?? "").trim() ||
-															"Unknown Artist"}
-													</span>
-												</div>
-											</div>
-										</button>
-
-										<button
-											class="inline-flex h-8 w-8 items-center justify-center rounded border"
-											type="button"
-											onclick={() => removeTrack(item.track.id)}
-											aria-label="Remove from queue"
-											title="Remove from queue"
-										>
-											<ListX class="h-4 w-4" />
-										</button>
-									</li>
-								{/each}
-							</ul>
-						{/if}
-					</div>
-				</div>
-			</div>
-		{/if}
+		<button
+			class="inline-flex h-8 w-8 items-center justify-center rounded border"
+			type="button"
+			disabled={!canNext}
+			aria-label="Next"
+			title="Next"
+			onclick={() => {
+				next();
+				void syncAndAutoplay();
+			}}
+		>
+			<SkipForward class="h-4 w-4" />
+		</button>
 	</div>
-{:else}
-	<!-- Desktop: sticky, in-flow sidebar (sticks vertically, flows horizontally in the layout column) -->
-	<aside
-		class="sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex flex-col"
-	>
-		<div class="flex items-center gap-2 border-b px-3 py-3">
-			<div class="min-w-0 flex-1">
-				<div class="truncate text-sm font-semibold">Player</div>
 
-				{#if snap.currentTrack}
-					<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-						{#if typeNumberLabel(snap.currentTrack)}
-							<span
-								class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
-							>
-								{typeNumberLabel(snap.currentTrack)}
-							</span>
-						{/if}
-						<span class="truncate">
-							{(
-								snap.currentTrack.animeName ??
-								snap.currentTrack.album ??
-								""
-							).trim()}
+	{#if snap.uiOpen}
+		<div class="max-h-[65dvh] overflow-y-auto border-t px-3 py-3">
+			<div class="mx-auto max-w-4xl space-y-3">
+				<div class="flex flex-wrap items-center gap-2">
+					<button
+						class="inline-flex h-8 w-8 items-center justify-center rounded border"
+						type="button"
+						onclick={() => toggleShuffle()}
+						aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
+						title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
+					>
+						<Shuffle class="h-4 w-4" />
+					</button>
+					<button
+						class="inline-flex h-8 w-8 items-center justify-center rounded border"
+						type="button"
+						onclick={() => toggleWrap()}
+						aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
+						title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
+					>
+						<Repeat class="h-4 w-4" />
+					</button>
+
+					<label class="ml-auto flex items-center gap-2 text-sm">
+						<span class="text-muted-foreground" aria-hidden="true">
+							<Volume2 class="h-4 w-4" />
 						</span>
-					</div>
-
-					<div class="mt-1 text-foreground/80">
-						{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
-						<span class="text-sm text-muted-foreground">
-							— {(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
-						</span>
-					</div>
-				{:else}
-					<div class="truncate text-xs text-muted-foreground">
-						{nowPlayingLabel()}
-					</div>
-				{/if}
-			</div>
-
-			<button
-				class="inline-flex h-8 w-8 items-center justify-center rounded border"
-				type="button"
-				onclick={() => toggleUiOpen()}
-				aria-label={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
-				title={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
-			>
-				{#if snap.uiOpen}
-					<PanelRightClose class="h-4 w-4" />
-				{:else}
-					<PanelRightOpen class="h-4 w-4" />
-				{/if}
-			</button>
-		</div>
-
-		{#if snap.uiOpen}
-			<div class="flex min-h-0 flex-col">
-				<div class="space-y-2 px-3 py-3">
-					<div class="flex items-center justify-between gap-2">
-						<div class="text-xs text-muted-foreground">
-							{formatTime(currentTime)} / {formatTime(duration)}
-						</div>
-						<div class="flex items-center gap-2">
-							<button
-								class="inline-flex h-8 w-8 items-center justify-center rounded border"
-								type="button"
-								onclick={() => toggleShuffle()}
-								aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
-								title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
-							>
-								<Shuffle class="h-4 w-4" />
-							</button>
-							<button
-								class="inline-flex h-8 w-8 items-center justify-center rounded border"
-								type="button"
-								onclick={() => toggleWrap()}
-								aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
-								title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
-							>
-								<Repeat class="h-4 w-4" />
-							</button>
-						</div>
-					</div>
-
-					<label class="block">
-						<span class="sr-only">Seek</span>
+						<span class="sr-only">Volume</span>
 						<input
-							class="w-full"
 							type="range"
 							min="0"
-							max={Math.max(0, duration)}
-							step="0.1"
-							bind:value={currentTime}
-							disabled={!snap.currentTrack || duration <= 0}
+							max="1"
+							step="0.01"
+							value={snap.volume}
+							oninput={(e) =>
+								setVolume(Number((e.currentTarget as HTMLInputElement).value))}
 						/>
 					</label>
-
-					<div class="flex items-center gap-2">
-						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
-							type="button"
-							disabled={!canPrev}
-							aria-label="Previous"
-							title="Previous"
-							onclick={() => {
-								prev(currentTime);
-								void syncAndAutoplay();
-							}}
-						>
-							<SkipBack class="h-4 w-4" />
-						</button>
-
-						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
-							type="button"
-							aria-label={isPlaying ? "Pause" : "Play"}
-							title={isPlaying ? "Pause" : "Play"}
-							onclick={() => {
-								if (!audioEl) return;
-								if (audioEl.paused) void audioEl.play();
-								else audioEl.pause();
-							}}
-							disabled={!snap.currentTrack}
-						>
-							{#if isPlaying}
-								<PauseIcon class="h-4 w-4" />
-							{:else}
-								<PlayIcon class="h-4 w-4" />
-							{/if}
-						</button>
-
-						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
-							type="button"
-							disabled={!canNext}
-							aria-label="Next"
-							title="Next"
-							onclick={() => {
-								next();
-								void syncAndAutoplay();
-							}}
-						>
-							<SkipForward class="h-4 w-4" />
-						</button>
-
-						<label class="ml-auto flex items-center gap-2 text-sm">
-							<span class="text-muted-foreground" aria-hidden="true">
-								<Volume2 class="h-4 w-4" />
-							</span>
-							<span class="sr-only">Volume</span>
-							<input
-								type="range"
-								min="0"
-								max="1"
-								step="0.01"
-								value={snap.volume}
-								oninput={(e) =>
-									setVolume(
-										Number((e.currentTarget as HTMLInputElement).value),
-									)}
-							/>
-						</label>
-					</div>
-
-					<div class="border-t pt-2">
-						<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
-					</div>
 				</div>
 
-				<div class="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
+				<div class="space-y-1">
+					<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
+
 					{#if snap.queue.length === 0}
 						<p class="text-sm text-muted-foreground">Queue is empty.</p>
 					{:else}
-						<ul class="rounded border">
+						<ul class="overflow-auto rounded border">
 							{#each queueDisplay as item (item.track.id)}
 								<li
 									class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
@@ -926,11 +691,236 @@
 					{/if}
 				</div>
 			</div>
-		{/if}
-	</aside>
-{/if}
+		</div>
+	{/if}
+</div>
+<!-- Desktop UI stays in-flow in the right grid column. Hide on small screens via CSS. -->
+<aside
+	class="hidden lg:flex sticky top-4 h-[calc(100dvh-2rem)] overflow-hidden bg-background flex-col"
+>
+	<div class="flex items-center gap-2 border-b px-3 py-3">
+		<div class="min-w-0 flex-1">
+			<div class="truncate text-sm font-semibold">Player</div>
+
+			{#if snap.currentTrack}
+				<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+					{#if typeNumberLabel(snap.currentTrack)}
+						<span
+							class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+						>
+							{typeNumberLabel(snap.currentTrack)}
+						</span>
+					{/if}
+					<span class="truncate">
+						{(
+							snap.currentTrack.animeName ??
+							snap.currentTrack.album ??
+							""
+						).trim()}
+					</span>
+				</div>
+
+				<div class="mt-1 text-foreground/80">
+					{(snap.currentTrack.title ?? "").trim() || "Unknown title"}
+					<span class="text-sm text-muted-foreground">
+						— {(snap.currentTrack.artist ?? "").trim() || "Unknown Artist"}
+					</span>
+				</div>
+			{:else}
+				<div class="truncate text-xs text-muted-foreground">
+					{nowPlayingLabel()}
+				</div>
+			{/if}
+		</div>
+
+		<button
+			class="inline-flex h-8 w-8 items-center justify-center rounded border"
+			type="button"
+			onclick={() => toggleUiOpen()}
+			aria-label={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
+			title={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
+		>
+			{#if snap.uiOpen}
+				<PanelRightClose class="h-4 w-4" />
+			{:else}
+				<PanelRightOpen class="h-4 w-4" />
+			{/if}
+		</button>
+	</div>
+
+	{#if snap.uiOpen}
+		<div class="flex min-h-0 flex-col">
+			<div class="space-y-2 px-3 py-3">
+				<div class="flex items-center justify-between gap-2">
+					<div class="text-xs text-muted-foreground">
+						{formatTime(currentTime)} / {formatTime(duration)}
+					</div>
+					<div class="flex items-center gap-2">
+						<button
+							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							type="button"
+							onclick={() => toggleShuffle()}
+							aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
+							title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
+						>
+							<Shuffle class="h-4 w-4" />
+						</button>
+						<button
+							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							type="button"
+							onclick={() => toggleWrap()}
+							aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
+							title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
+						>
+							<Repeat class="h-4 w-4" />
+						</button>
+					</div>
+				</div>
+
+				<label class="block">
+					<span class="sr-only">Seek</span>
+					<input
+						class="w-full"
+						type="range"
+						min="0"
+						max={Math.max(0, duration)}
+						step="0.1"
+						bind:value={currentTime}
+						disabled={!snap.currentTrack || duration <= 0}
+					/>
+				</label>
+
+				<div class="flex items-center gap-2">
+					<button
+						class="inline-flex h-8 w-8 items-center justify-center rounded border"
+						type="button"
+						disabled={!canPrev}
+						aria-label="Previous"
+						title="Previous"
+						onclick={() => {
+							prev(currentTime);
+							void syncAndAutoplay();
+						}}
+					>
+						<SkipBack class="h-4 w-4" />
+					</button>
+
+					<button
+						class="inline-flex h-8 w-8 items-center justify-center rounded border"
+						type="button"
+						aria-label={isPlaying ? "Pause" : "Play"}
+						title={isPlaying ? "Pause" : "Play"}
+						onclick={() => {
+							if (!audioEl) return;
+							if (audioEl.paused) void audioEl.play();
+							else audioEl.pause();
+						}}
+						disabled={!snap.currentTrack}
+					>
+						{#if isPlaying}
+							<PauseIcon class="h-4 w-4" />
+						{:else}
+							<PlayIcon class="h-4 w-4" />
+						{/if}
+					</button>
+
+					<button
+						class="inline-flex h-8 w-8 items-center justify-center rounded border"
+						type="button"
+						disabled={!canNext}
+						aria-label="Next"
+						title="Next"
+						onclick={() => {
+							next();
+							void syncAndAutoplay();
+						}}
+					>
+						<SkipForward class="h-4 w-4" />
+					</button>
+
+					<label class="ml-auto flex items-center gap-2 text-sm">
+						<span class="text-muted-foreground" aria-hidden="true">
+							<Volume2 class="h-4 w-4" />
+						</span>
+						<span class="sr-only">Volume</span>
+						<input
+							type="range"
+							min="0"
+							max="1"
+							step="0.01"
+							value={snap.volume}
+							oninput={(e) =>
+								setVolume(Number((e.currentTarget as HTMLInputElement).value))}
+						/>
+					</label>
+				</div>
+
+				<div class="border-t pt-2">
+					<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
+				</div>
+			</div>
+
+			<div class="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
+				{#if snap.queue.length === 0}
+					<p class="text-sm text-muted-foreground">Queue is empty.</p>
+				{:else}
+					<ul class="rounded border">
+						{#each queueDisplay as item (item.track.id)}
+							<li
+								class="flex items-center gap-2 border-b px-2 py-2 last:border-b-0"
+							>
+								<button
+									class="min-w-0 flex-1 truncate text-left text-sm hover:underline"
+									type="button"
+									onclick={() => {
+										jumpToTrack(item.track.id);
+										void syncAndAutoplay();
+									}}
+								>
+									{#if item.isCurrent}
+										<span class="text-muted-foreground">▶ </span>
+									{/if}
+									<div class="min-w-0 flex-1">
+										<div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+											{#if typeNumberLabel(item.track)}
+												<span
+													class="rounded bg-muted px-2 py-0.5 text-sm text-muted-foreground"
+												>
+													{typeNumberLabel(item.track)}
+												</span>
+											{/if}
+											<span class="truncate text-sm"
+												>{animeLabel(item.track)}</span
+											>
+										</div>
+
+										<div class="mt-1 text-foreground/80">
+											{(item.track.title ?? "").trim() || "Unknown title"}
+											<span class="text-sm text-muted-foreground">
+												— {(item.track.artist ?? "").trim() || "Unknown Artist"}
+											</span>
+										</div>
+									</div>
+								</button>
+
+								<button
+									class="inline-flex h-8 w-8 items-center justify-center rounded border"
+									type="button"
+									onclick={() => removeTrack(item.track.id)}
+									aria-label="Remove from queue"
+									title="Remove from queue"
+								>
+									<ListX class="h-4 w-4" />
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</aside>
 
-<!-- Single global audio element (hidden but functional) -->
 <audio
 	bind:this={audioEl}
 	class="hidden"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 12cbc37..460534a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,15 +21,15 @@
 		{@render children()}
 	</main>
 
-	<!-- Desktop sidebar column (in normal flow).
-	     Reserve space in the grid, but render the player only once below. -->
-	<aside class="hidden lg:block"></aside>
+	<!-- Desktop sidebar column (in normal flow) -->
+	<aside class="hidden lg:block">
+		<ClientOnly showFallback={false}>
+			{#snippet children()}
+				<GlobalPlayer />
+			{/snippet}
+		</ClientOnly>
+	</aside>
 </div>
 
-<!-- Single GlobalPlayer instance (client-only).
-     It renders either the desktop sidebar UI or the mobile bar/drawer internally. -->
-<ClientOnly showFallback={false}>
-	{#snippet children()}
-		<GlobalPlayer />
-	{/snippet}
-</ClientOnly>
+<!-- Mobile player is rendered by the same GlobalPlayer instance above.
+     On small screens, it uses fixed positioning internally so it can overlay. -->