added copy verse text button

src/lib/components/VerseDisplay.svelte

@@ -15,15 +15,16 @@
 			? dailyVerse.reference
 					.replace(/^Psalms /, "Psalm ")
 					.replace(/\s(\d+):/, " ?:")
-      : dailyVerse.reference.replace(/^Psalms /, "Psalm ")
+			: dailyVerse.reference.replace(/^Psalms /, "Psalm "),
 	);
 	let displayVerseText = $derived(
 		dailyVerse.verseText
 			.replace(/^([a-z])/, (c) => c.toUpperCase())
-      .replace(/[,:;-—]$/, "...")
+			.replace(/[,:;-—]$/, "..."),
 	);
 
 	let showReference = $state(false);
+	let copied = $state(false);
 
 	// Delay showing reference until GuessesTable animation completes
 	$effect(() => {
@@ -34,7 +35,8 @@
 
 		// Check if user already won today (page reload case)
 		const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
-    const alreadyWonToday = browser && localStorage.getItem(winTrackedKey) === "true";
+		const alreadyWonToday =
+			browser && localStorage.getItem(winTrackedKey) === "true";
 
 		if (alreadyWonToday) {
 			// User already won and is refreshing - show immediately
@@ -49,6 +51,21 @@
 			return () => clearTimeout(timeoutId);
 		}
 	});
+
+	function copyVerse() {
+		const fullReference = dailyVerse.reference.replace(
+			/^Psalms /,
+			"Psalm ",
+		);
+		const textToCopy = `"${displayVerseText}" — ${fullReference}`;
+		navigator.clipboard.writeText(textToCopy).then(() => {
+			copied = true;
+			(window as any).rybbit?.event("Copy Verse");
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		});
+	}
 </script>
 
 <Container class="w-full p-8 sm:p-12 bg-white/70 overflow-hidden">
@@ -68,6 +85,19 @@
 			>
 				{displayReference}
 			</p>
+			<div
+				transition:fade={{ duration: 300 }}
+				class="flex justify-center mt-3"
+			>
+				<button
+					onclick={copyVerse}
+					data-umami-event="Copy Verse"
+					class="flex items-center gap-1.5 px-3 py-1.5 text-xs big-text text-gray-600 bg-white/50 hover:bg-white/70 border border-gray-300 rounded-lg transition-colors cursor-pointer"
+				>
+					{copied ? "✅" : "📋"}
+					{copied ? "Copied!" : "Copy verse to clipboard"}
+				</button>
+			</div>
 		{/if}
 	</div>
 </Container>

src/lib/components/WinScreen.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { fade, fly } from "svelte/transition";
 	import { getBookById, toOrdinal } from "$lib/utils/game";
-	import { onMount } from "svelte";
 	import Container from "./Container.svelte";
 	import CountdownTimer from "./CountdownTimer.svelte";
 	import ChapterGuess from "./ChapterGuess.svelte";
@@ -475,12 +474,6 @@
 		padding-right: 32px;
 		transform: rotate(-2deg);
 		transform-origin: right center;
-	}
+		margin-top: -6px;
-
-	.received-hint {
-		padding-right: 0;
-		padding-left: 32px;
-		transform: rotate(2deg);
-		transform-origin: left center;
 	}
 </style>