fix: move hamburger backdrop outside <header> so drawer items are not blurred

ui/src/lib/components/AudioPlayer.svelte

@@ -1443,7 +1443,7 @@
 {#if showChapterPanel && audioStore.chapters.length > 0}
 	<ChapterPickerOverlay
 		chapters={audioStore.chapters}
-		activeChapter={chapter}
+		activeChapter={audioStore.chapter}
 		zIndex="z-[60]"
 		onselect={playChapter}
 		onclose={() => { showChapterPanel = false; }}

ui/src/routes/+layout.svelte

@@ -754,15 +754,6 @@
 				></div>
 			{/if}
 
-			<!-- Backdrop for mobile hamburger menu -->
-			{#if menuOpen}
-				<div
-					class="fixed inset-0 z-40 sm:hidden"
-					style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
-					onpointerdown={() => { menuOpen = false; }}
-					aria-hidden="true"
-				></div>
-			{/if}
 			{:else}
 				<div class="ml-auto">
 					<a
@@ -895,6 +886,17 @@
 		{/if}
 	</header>
 
+	<!-- Backdrop for mobile hamburger menu — outside <header> so the blur
+	     only affects page content below, not the drawer items themselves -->
+	{#if menuOpen}
+		<div
+			class="fixed top-14 inset-x-0 bottom-0 z-40 sm:hidden"
+			style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
+			onpointerdown={() => { menuOpen = false; }}
+			aria-hidden="true"
+		></div>
+	{/if}
+
 	<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
 		{#key page.url.pathname + page.url.search}
 			<div in:fade={{ duration: 180, delay: 60 }} out:fade={{ duration: 100 }}>