loads of mobile ui layout upgrades

frontend/src/routes/[fam]/+layout.svelte

@@ -126,7 +126,7 @@
 	});
 
 	$effect(() => {
-		if (!session || !famStore.initialized) return;
+		if (!isParent || !session || !famStore.initialized) return;
 		const rewards = famStore.rewards;
 		if (!mounted) {
 			mounted = true;
@@ -180,7 +180,7 @@
 	<div class="app-shell">
 		<Sidebar {famName} session={data.session} {isParent} {role} />
 		<TopNav
-			{role}
+			role={data.session ? role : ''}
 			seasons={famStore.seasons.filter((s) => s.active !== false)}
 			announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
 		>
@@ -191,7 +191,7 @@
 				{/if}
 			</button>
 		</TopNav>
-		<main class="app-main">
+		<main class="app-main" class:join-page={page.url.pathname.split('/')[2] === 'join'}>
 			<div class="page-wrap">
 				<div class="page-content" class:locked>{@render children()}</div>
 
@@ -218,7 +218,12 @@
 			</div>
 		</main>
 		{#if claimToast}
-			<div class="claim-toast">{claimToast}</div>
+			<a
+				class="claim-toast"
+				href={`/${page.params.fam}/${data.session?.username || page.params.username || ''}`}
+			>
+				{claimToast} — view dashboard →
+			</a>
 		{/if}
 		<Footer sidebar />
 	</div>
@@ -232,17 +237,33 @@
 <style>
 	.claim-toast {
 		position: fixed;
-		top: 3.5rem;
-		right: 1.5rem;
-		background: #059669;
-		color: white;
-		padding: 0.6rem 1rem;
-		border-radius: 8px;
+		top: 52px;
+		left: 220px;
+		right: 0;
+		background: #f59e0b;
+		color: #fff;
+		padding: 0.5rem 1.5rem;
 		font-size: 0.85rem;
-		z-index: 999;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		font-weight: 600;
+		z-index: 95;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+		text-decoration: none;
 		animation: fadein 0.2s;
 	}
+	.claim-toast:hover {
+		background: #d97706;
+	}
+	@media (max-width: 1023px) {
+		.claim-toast {
+			left: 56px;
+		}
+	}
+	@media (max-width: 639px) {
+		.claim-toast {
+			left: 0;
+			padding: 0.5rem 1rem;
+		}
+	}
 	.app-shell {
 		min-height: 100vh;
 		display: flex;
@@ -283,6 +304,16 @@
 			margin-left: 56px;
 		}
 	}
+	@media (max-width: 639px) {
+		.app-main {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		/* Join pages center their own content — no shell padding needed */
+		.app-main.join-page {
+			padding: 0;
+		}
+	}
 	.page-wrap {
 		position: relative;
 		min-height: 70vh;