refactor: clean up home page UI

- Remove all emojis (flame icon in streak widget, 🔥 in stats footer,
  ✓ in completed badge) — they cheapened the overall feel
- Fix double carousel indicator: drop the animated progress sub-line
  below the active dot; the expanding pill shape is sufficient signal.
  Also removes the rAF animation loop and progressStart state.
- Remove 'X left' badge from Continue Reading shelf cards
- Remove 'X chapters ahead' text from hero card info row

ui/src/routes/+page.svelte

@@ -90,17 +90,13 @@
 	// Auto-advance carousel every CAROUSEL_INTERVAL ms when there are multiple books.
 	// autoAdvanceSeed is bumped on manual swipe/dot to restart the interval.
 	let autoAdvanceSeed = $state(0);
-	// progressStart tracks when the current interval began (for the progress bar).
-	let progressStart   = $state(browser ? performance.now() : 0);
 
 	$effect(() => {
 		if (heroBooks.length <= 1) return;
 		const len = heroBooks.length;
 		void autoAdvanceSeed; // restart when seed changes
-		progressStart = browser ? performance.now() : 0;
 		const id = setInterval(() => {
 			heroIndex = (heroIndex + 1) % len;
-			progressStart = browser ? performance.now() : 0;
 		}, CAROUSEL_INTERVAL);
 		return () => clearInterval(id);
 	});
@@ -109,8 +105,7 @@
 		autoAdvanceSeed++;
 	}
 
-	// ── Swipe handling ───────────────────────────────────────────────────────
-	let swipeStartX = 0;
+	// ── Swipe handling ───────────────────────────────────────────────────────	let swipeStartX = 0;
 	function onSwipeStart(e: TouchEvent) {
 		swipeStartX = e.touches[0].clientX;
 	}
@@ -127,22 +122,6 @@
 		resetAutoAdvance();
 	}
 
-	// ── Progress bar animation ───────────────────────────────────────────────
-	// rAF loop drives a 0→1 progress value that resets on each advance.
-	let rafProgress = $state(0);
-	$effect(() => {
-		if (!browser || heroBooks.length <= 1) return;
-		void autoAdvanceSeed; // re-subscribe so effect re-runs on manual nav
-		void heroIndex;
-		let raf: number;
-		function tick() {
-			rafProgress = Math.min((performance.now() - progressStart) / CAROUSEL_INTERVAL, 1);
-			raf = requestAnimationFrame(tick);
-		}
-		raf = requestAnimationFrame(tick);
-		return () => cancelAnimationFrame(raf);
-	});
-
 	function playChapter(slug: string, chapter: number) {
 		audioStore.autoStartChapter = chapter;
 		goto(`/books/${slug}/chapters/${chapter}`);
@@ -210,10 +189,6 @@
 						</svg>
 						Listen
 					</button>
-					{#if heroBook.book.total_chapters > 0 && heroBook.chapter < heroBook.book.total_chapters}
-						{@const ahead = heroBook.book.total_chapters - heroBook.chapter}
-						<span class="text-xs text-(--color-muted) hidden sm:inline">{ahead} chapters ahead</span>
-					{/if}
 					{#each parseGenres(heroBook.book.genres).slice(0, 2) as genre}
 						<span class="text-xs px-2 py-1 rounded-full bg-(--color-surface-3) text-(--color-muted)">{genre}</span>
 					{/each}
@@ -221,7 +196,7 @@
 			</div>
 		</div>
 
-		<!-- Dot indicators with animated progress line under active dot -->
+		<!-- Dot indicators -->
 		{#if heroBooks.length > 1}
 			<div class="flex items-center justify-center gap-2 mt-2.5">
 				{#each heroBooks as _, i}
@@ -229,21 +204,10 @@
 						type="button"
 						onclick={() => heroDot(i)}
 						aria-label="Go to book {i + 1}"
-						class="relative flex flex-col items-center gap-0.5 group/dot"
 					>
-						<!-- dot -->
 						<span class="block rounded-full transition-all duration-300 {i === heroIndex
 							? 'w-4 h-1.5 bg-(--color-brand)'
-							: 'w-1.5 h-1.5 bg-(--color-border) group-hover/dot:bg-(--color-muted)'}"></span>
-						<!-- progress line — only visible under the active dot -->
-						{#if i === heroIndex}
-							<span class="absolute -bottom-1.5 left-0 h-0.5 w-full bg-(--color-border) rounded-full overflow-hidden">
-								<span
-									class="block h-full bg-(--color-brand) rounded-full"
-									style="width: {rafProgress * 100}%"
-								></span>
-							</span>
-						{/if}
+							: 'w-1.5 h-1.5 bg-(--color-border) hover:bg-(--color-muted)'}"></span>
 					</button>
 				{/each}
 			</div>
@@ -256,9 +220,6 @@
 {#if streak > 0}
 <div class="mb-6 flex items-center gap-3 flex-wrap text-sm">
 	<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
-		<svg class="w-4 h-4 text-orange-400" fill="currentColor" viewBox="0 0 24 24">
-			<path d="M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
-		</svg>
 		<span class="font-semibold text-(--color-text)">{streak}</span>
 		<span class="text-(--color-muted)">day{streak !== 1 ? 's' : ''} reading</span>
 	</span>
@@ -293,12 +254,6 @@
 						<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
 							{m.home_chapter_badge({ n: String(chapter) })}
 						</span>
-						<!-- Chapters ahead badge -->
-						{#if book.total_chapters > 0 && chapter < book.total_chapters}
-							<span class="absolute top-1.5 left-1.5 text-xs bg-black/60 text-white font-medium px-1.5 py-0.5 rounded">
-								{book.total_chapters - chapter} left
-							</span>
-						{/if}
 					</div>
 				</a>
 				<!-- Listen button (hover overlay) -->
@@ -338,7 +293,7 @@
 							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
 						</div>
 					{/if}
-					<span class="absolute top-1.5 right-1.5 text-xs bg-green-600/90 text-white font-bold px-1.5 py-0.5 rounded">✓ Done</span>
+					<span class="absolute top-1.5 right-1.5 text-xs bg-green-600/90 text-white font-bold px-1.5 py-0.5 rounded">Done</span>
 				</div>
 				<div class="p-2">
 					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
@@ -597,6 +552,6 @@
 	<span><span class="font-semibold text-(--color-text)">{data.stats.totalChapters.toLocaleString()}</span> {m.home_stat_chapters()}</span>
 	{#if streak > 0}
 		<span class="w-px h-4 bg-(--color-border)"></span>
-		<span><span class="font-semibold text-(--color-text)">{streak}</span> day streak 🔥</span>
+		<span><span class="font-semibold text-(--color-text)">{streak}</span> day streak</span>
 	{/if}
 </div>