global player pt. 12 sidebar shenanigans

src/routes/+layout.svelte

@@ -10,9 +10,32 @@
 <svelte:head
 	><link rel="icon" href={favicon} /><title>AMQ Train</title></svelte:head
 >
-{@render children()}
-<ClientOnly showFallback={false}>
-	{#snippet children()}
-		<GlobalPlayer />
-	{/snippet}
-</ClientOnly>
+
+<!--
+	App shell:
+	- Mobile/tablet: single column, player renders client-only (mobile bar/drawer)
+	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
+-->
+<div class="min-h-dvh lg:grid gap-16 lg:grid-cols-[1fr_340px]">
+	<main>
+		{@render children()}
+	</main>
+
+	<!-- Desktop sidebar column (in normal flow) -->
+	<aside class="hidden lg:block">
+		<ClientOnly showFallback={false}>
+			{#snippet children()}
+				<GlobalPlayer />
+			{/snippet}
+		</ClientOnly>
+	</aside>
+</div>
+
+<!-- Mobile player (client-only, overlays via fixed positioning inside GlobalPlayer) -->
+<div class="lg:hidden">
+	<ClientOnly showFallback={false}>
+		{#snippet children()}
+			<GlobalPlayer />
+		{/snippet}
+	</ClientOnly>
+</div>