<script lang="ts">
	import { fade, fly } from "svelte/transition";
	import { getBookById, toOrdinal } from "$lib/utils/game";
	import {
		getVerseSnippet,
		shareResult,
		copyToClipboard as clipboardCopy,
	} from "$lib/utils/share";
	import Container from "./Container.svelte";
	import CountdownTimer from "./CountdownTimer.svelte";
	import StreakCounter from "./StreakCounter.svelte";
	import ChapterGuess from "./ChapterGuess.svelte";

	interface StatsData {
		solveRank: number;
		guessRank: number;
		totalSolves: number;
		averageGuesses: number;
		tiedCount: number;
		percentile: number;
	}

	interface WeightedMessage {
		text: string;
		weight: number;
	}

	let {
		statsData,
		correctBookId,
		handleShare,
		copyToClipboard,
		copied = $bindable(false),
		statsSubmitted,
		guessCount,
		reference,
		onChapterGuessCompleted,
		shareText,
		verseText,
		streak = 0,
		streakPercentile = null,
		isLoggedIn = false,
		anonymousId = "",
	}: {
		statsData: StatsData | null;
		correctBookId: string;
		handleShare: () => void;
		copyToClipboard: () => void;
		copied: boolean;
		statsSubmitted: boolean;
		guessCount: number;
		reference: string;
		onChapterGuessCompleted: () => void;
		shareText: string;
		verseText: string;
		streak?: number;
		streakPercentile?: number | null;
		isLoggedIn?: boolean;
		anonymousId?: string;
	} = $props();

	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
	let hasWebShare = $derived(
		typeof navigator !== "undefined" && "share" in navigator,
	);
	let copySuccess = $state(false);
	let bubbleCopied = $state(false);
	let copyTracked = $state(false);
	let showSnippetOption = $state(false);
	let includeSnippet = $state(false);
	let showProgressDropdown = $state(false);

	let effectiveShareText = $derived(
		includeSnippet
			? (() => {
					const snippet = getVerseSnippet(verseText);
					const lines = shareText.split("\n");
					return [
						...lines.slice(0, -1),
						snippet,
						lines[lines.length - 1],
					].join("\n");
				})()
			: shareText,
	);

	// List of congratulations messages with weights
	const congratulationsMessages: WeightedMessage[] = [
		{ text: "Congratulations!", weight: 10 },
		{ text: "You got it!", weight: 1000 },
		{ text: "Yup.", weight: 100 },
		{ text: "Very nice!", weight: 1 },
	];

	// Function to select a random message based on weights
	function getRandomCongratulationsMessage(): string {
		// Special case for first try success
		if (guessCount === 1) {
			const n = Math.random();
			if (n < 0.99) {
				return "First try!";
			} else {
				return "Axios!";
			}
		}

		const totalWeight = congratulationsMessages.reduce(
			(sum, msg) => sum + msg.weight,
			0,
		);
		let random = Math.random() * totalWeight;

		for (const message of congratulationsMessages) {
			random -= message.weight;
			if (random <= 0) {
				return message.text;
			}
		}

		// Fallback to first message if something goes wrong
		return congratulationsMessages[0].text;
	}

	// Generate the congratulations message
	let congratulationsMessage = $derived(getRandomCongratulationsMessage());
</script>

<div class="flex flex-col gap-6">
	<Container
		class="w-full px-4 sm:px-6 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 dark:text-gray-100 shadow-2xl text-center fade-in"
	>
		<div class="flex flex-col gap-3">
			<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
				{congratulationsMessage} The verse is from
				<span class="font-black font-triodion text-3xl md:text-4xl"
					>{bookName}</span
				>.
			</p>
			<p class="text-lg sm:text-xl md:text-2xl">
				You guessed correctly after {guessCount}
				{guessCount === 1 ? "guess" : "guesses"}.
			</p>
			<!-- {#if streak >= 7}
				<p
					class="italic tracking-wider px-8 font-semibold text-gray-500"
				>
					Thank you for making BIBDLE part of your daily routine!
				</p>
			{/if} -->
		</div>
	</Container>

	<!-- S++ Bonus Challenge for first try -->
	{#if guessCount === 1}
		<ChapterGuess
			{reference}
			bookId={correctBookId}
			onCompleted={onChapterGuessCompleted}
		/>
	{/if}

	<div class="flex flex-row gap-3 items-stretch w-full">
		<div class="flex-2 min-w-0 flex flex-col">
			<CountdownTimer />
		</div>
		{#if streak > 0}
			<div class="flex-1 min-w-0 flex flex-col">
				<StreakCounter {streak} {streakPercentile} />
			</div>
		{/if}
	</div>

	<!-- Statistics Display -->
	{#if statsData}
		<Container
			class="w-full p-4 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
		>
			<div
				class="grid grid-cols-3 gap-4 gap-x-8 text-center"
				in:fade={{ delay: 800 }}
			>
				<!-- Solve Rank Column -->
				<div class="flex flex-col">
					<div
						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
					>
						#{statsData.solveRank}
					</div>
					<div class="text-sm sm:text-sm opacity-90 mt-1">
						You were the {toOrdinal(statsData.solveRank)} person to solve
						today
					</div>
				</div>

				<!-- Guess Rank Column -->
				<div class="flex flex-col">
					<div
						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
					>
						{toOrdinal(statsData.guessRank)}
					</div>
					<div class="text-sm sm:text-sm opacity-90 mt-1">
						You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
						{statsData.totalSolves === 1
							? "solve"
							: "solves"}{statsData.tiedCount > 0
							? `, tied with ${statsData.tiedCount} ${statsData.tiedCount === 1 ? "other" : "others"}`
							: ""}.<br />
						{#if statsData.percentile <= 25}
							<span class="font-bold">
								(Top {statsData.percentile}%)
							</span>
						{/if}
					</div>
				</div>

				<!-- Average Column -->
				<div class="flex flex-col">
					<div
						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
					>
						{statsData.averageGuesses}
					</div>
					<div class="text-sm sm:text-sm opacity-90 mt-1">
						People solved after {statsData.averageGuesses}
						{statsData.averageGuesses === 1 ? "guess" : "guesses"} on
						average
					</div>
				</div>
			</div>
		</Container>
	{:else if !statsSubmitted}
		<Container
			class="w-full p-6 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
		>
			<div class="text-sm opacity-80">Submitting stats...</div>
		</Container>
	{/if}

	<div class="share-card" in:fly={{ y: 40, duration: 400, delay: 600 }}>
		<div class="big-text font-black! text-center text-gray-300!">
			Share your result
		</div>
		<div class="chat-window">
			<!-- Received bubble: primary action (share / copy) -->
			<div class="bubble-wrapper received-wrapper">
				<button
					class="bubble bubble-received"
					class:success={copySuccess}
					aria-label={hasWebShare ? "Share" : "Copy to clipboard"}
					data-umami-event={hasWebShare
						? "Share"
						: "Copy to Clipboard"}
					onclick={() => {
						if (hasWebShare) {
							shareResult(effectiveShareText);
						} else {
							if (!copyTracked) {
								copyTracked = true;
							}
							clipboardCopy(effectiveShareText);
							copySuccess = true;
							setTimeout(() => {
								copySuccess = false;
							}, 3000);
						}
					}}
				>
					{#if hasWebShare}
						📤 Tap here to share
					{:else if copySuccess}
						✅ Copied!
					{:else}
						📋 Copy to clipboard
					{/if}
				</button>
			</div>

			<!-- Sent bubble: share text preview -->
			<div class="bubble-wrapper">
				<button
					class="bubble bubble-sent"
					aria-label="Copy to clipboard"
					data-umami-event="Copy to Clipboard"
					onclick={() => {
						if (!copyTracked) {
							copyTracked = true;
						}
						clipboardCopy(effectiveShareText);
						showSnippetOption = true;
						bubbleCopied = true;
						setTimeout(() => {
							bubbleCopied = false;
						}, 2000);
					}}>{effectiveShareText}</button
				>
				{#if hasWebShare}
					<span class="copy-hint"
						>{bubbleCopied ? "copied!" : "(tap to copy)"}</span
					>
				{:else}
					<span class="copy-hint"
						>{bubbleCopied ? "copied!" : ""}</span
					>
				{/if}
			</div>
		</div>
		{#if streak >= 7}
			<div class="big-text tracking-widest! font-black! text-center mt-4">
				Thank you for making Bibdle part of your daily routine! —George
			</div>
		{/if}
	</div>

	{#if showSnippetOption}
		<div class="snippet-toggle-row mr-4" in:fly={{ y: -8, duration: 220 }}>
			<span class="snippet-label">Show verse snippet in share?</span>
			<button
				class="snippet-toggle"
				class:on={includeSnippet}
				onclick={() => (includeSnippet = !includeSnippet)}
				aria-pressed={includeSnippet}
				aria-label="Show snippet in share"
			>
				<span class="toggle-thumb"></span>
			</button>
		</div>
	{/if}

	{#if isLoggedIn}
		<div class="signin-prompt">
			<a
				href="/progress"
				class="progress-btn w-full"
				data-umami-event="See your progress (logged in)"
			>
				<span>📈 See your progress</span>
				<svg class="progress-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
					<path d="m9 18 6-6-6-6" />
				</svg>
			</a>
		</div>
	{:else}
		<div class="signin-prompt">
			<button
				type="button"
				class="progress-btn w-full"
				aria-expanded={showProgressDropdown}
				onclick={() => (showProgressDropdown = !showProgressDropdown)}
				data-umami-event="See your progress (logged out)"
			>
				<span>📈 See your progress</span>
				<svg class="progress-chev" class:open={showProgressDropdown} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
					<path d="m6 9 6 6 6-6" />
				</svg>
			</button>
			{#if showProgressDropdown}
				<p class="signin-text text-gray-800 dark:text-gray-300">
					Create an account (or sign in) to track your progress
				</p>
			<form method="POST" action="/auth/apple" class="w-full">
				<input type="hidden" name="anonymousId" value={anonymousId} />
				<button
					type="submit"
					class="apple-signin-btn"
					data-umami-event="Sign in with Apple"
				>
					<svg
						class="apple-icon"
						viewBox="0 0 24 24"
						fill="currentColor"
					>
						<path
							d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
						/>
					</svg>
					Sign in with Apple
				</button>
			</form>
			<form method="POST" action="/auth/google" class="w-full">
				<input type="hidden" name="anonymousId" value={anonymousId} />
				<button
					type="submit"
					class="google-signin-btn"
					data-umami-event="Sign in with Google"
				>
					<svg
						class="google-icon"
						viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							fill="#4285F4"
							d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
						/>
						<path
							fill="#34A853"
							d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
						/>
						<path
							fill="#FBBC05"
							d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
						/>
						<path
							fill="#EA4335"
							d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
						/>
					</svg>
					Sign in with Google
				</button>
			</form>
			{/if}
		</div>
	{/if}

	<div class="signin-prompt">
		<a
			href="https://discord.gg/yWQXbGK8SD"
			target="_blank"
			rel="noopener noreferrer"
			class="discord-btn w-full"
			data-umami-event="Join the BIBDLE Discord"
		>
			<svg
				class="discord-icon"
				viewBox="0 0 127.14 96.36"
				fill="currentColor"
				aria-hidden="true"
			>
				<path
					d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
				/>
			</svg>
			<span>Join the BIBDLE Discord!</span>
			<svg class="progress-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="m9 18 6-6-6-6" />
			</svg>
		</a>
	</div>

	<div class="signin-prompt">
		<a
			href="https://donate.stripe.com/9B6aEZ9WgeZF3qYfF987K00"
			target="_blank"
			rel="noopener noreferrer"
			class="progress-btn w-full"
			data-umami-event="Support bibdle's development"
		>
			<span>❤️ Support bibdle's development</span>
			<svg class="progress-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="m9 18 6-6-6-6" />
			</svg>
		</a>
		<div class="big-text font-black! text-center text-gray-300! mt-2">
			BIBDLE will be ad-free forever.
		</div>
	</div>
</div>

<style>
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	:global(.fade-in) {
		animation: fadeIn 0.5s ease-out;
	}

	/* ── Share card ── */
	.share-card {
		background: oklch(94% 0.028 298.626);
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 1.25rem;
		padding: 1.25rem;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		width: 100%;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
		position: relative;
		overflow: hidden;
	}

	@media (prefers-color-scheme: dark) {
		.share-card {
			background: oklch(22% 0.025 298.626);
			border-color: rgba(255, 255, 255, 0.1);
		}
	}

	.share-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
		opacity: 0.04;
		pointer-events: none;
	}

	/* ── Chat window ── */
	.chat-window {
		--sent-color: #0b93f6;
		--received-color: #3a3a3c;
		--bg: oklch(94% 0.028 298.626);
		display: flex;
		flex-direction: column;
		padding: 0 0.5rem 0;
		gap: 0.6rem;
	}

	@media (prefers-color-scheme: dark) {
		.chat-window {
			--bg: oklch(22% 0.025 298.626);
		}
	}

	/* ── Bubble wrappers ── */
	.bubble-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
	}

	.received-wrapper {
		align-items: flex-start;
	}

	/* ── Shared bubble base ── */
	.bubble {
		position: relative;
		max-width: 255px;
		margin-bottom: 0;
		padding: 10px 20px;
		line-height: 1.3;
		word-wrap: break-word;
		border-radius: 25px;
		text-align: left;
		white-space: pre-wrap;
		font-size: 1rem;
		cursor: pointer;
		transition:
			filter 80ms ease,
			transform 80ms ease;
		user-select: none;
	}

	/* ── Sent bubble (share text preview) ── */
	.bubble-sent {
		color: white;
		background: var(--sent-color);
		transform: rotate(-2deg);
	}

	.bubble-sent:hover {
		background-color: #2ea8ff;
		transform: rotate(-2deg) translateY(-2px);
	}

	.bubble-sent:hover::before {
		background-color: #2ea8ff;
	}

	.bubble-sent:active {
		background-color: #0878d4;
		transform: rotate(-2deg) scale(0.97);
	}

	.bubble-sent:active::before {
		background-color: #0878d4;
	}

	/* Sent tail: bottom-right */
	.bubble-sent::before,
	.bubble-sent::after {
		position: absolute;
		bottom: 0;
		height: 25px;
		content: "";
	}

	.bubble-sent::before {
		width: 20px;
		right: -7px;
		background-color: var(--sent-color);
		border-bottom-left-radius: 16px 14px;
	}

	.bubble-sent::after {
		width: 26px;
		right: -26px;
		border-bottom-left-radius: 10px;
		background-color: var(--bg);
	}

	/* ── Received bubble (action button) ── */
	.bubble-received {
		color: #f5f5f7;
		background: var(--received-color);
		transform: rotate(2deg);
		padding: 14px 24px;
		font-size: 1.1rem;
		font-weight: 700;
		min-width: 14rem;
		text-align: center;
	}

	.bubble-received:hover {
		background-color: #4a4a4e;
		transform: rotate(2deg) translateY(-2px);
	}

	.bubble-received:hover::before {
		background-color: #4a4a4e;
	}

	.bubble-received:active {
		background-color: #2a2a2c;
		transform: rotate(2deg) scale(0.97);
	}

	.bubble-received:active::before {
		background-color: #2a2a2c;
	}

	.bubble-received.success {
		background: #c7f7d4;
		color: #155724;
	}

	/* Received tail: bottom-left (mirror of sent) */
	.bubble-received::before,
	.bubble-received::after {
		position: absolute;
		bottom: 0;
		height: 25px;
		content: "";
	}

	.bubble-received::before {
		width: 20px;
		left: -7px;
		background-color: var(--received-color);
		border-bottom-right-radius: 16px 14px;
	}

	.bubble-received::after {
		width: 26px;
		left: -26px;
		border-bottom-right-radius: 10px;
		background-color: var(--bg);
	}

	.bubble-received.success::before {
		background-color: #c7f7d4;
	}

	/* ── Copy hints ── */
	.copy-hint {
		font-size: 0.68rem;
		color: #444;
		font-weight: 400;
		letter-spacing: 0.01em;
		padding-right: 32px;
		transform: rotate(-2deg);
		transform-origin: right center;
		margin-top: -6px;
	}

	@media (prefers-color-scheme: dark) {
		.copy-hint {
			color: #aaa;
		}
	}

	/* ── Snippet toggle row ── */
	.snippet-toggle-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5rem;
		padding: 0 0.25rem;
	}

	.snippet-label {
		font-size: 0.72rem;
		color: #666;
		letter-spacing: 0.01em;
		user-select: none;
	}

	@media (prefers-color-scheme: dark) {
		.snippet-label {
			color: #999;
		}
	}

	.snippet-toggle {
		position: relative;
		width: 36px;
		height: 20px;
		border-radius: 10px;
		background: #ccc;
		border: none;
		cursor: pointer;
		transition: background 200ms ease;
		flex-shrink: 0;
		padding: 0;
	}

	.snippet-toggle.on {
		background: #34c759;
	}

	.toggle-thumb {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: white;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		transition: transform 200ms ease;
	}

	.snippet-toggle.on .toggle-thumb {
		transform: translateX(16px);
	}

	/* ── See your progress button (neobrutalist) ── */
	.progress-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.85rem 1.25rem;
		background: #fff;
		color: #111;
		border: 2px solid #000;
		border-radius: 0.75rem;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		cursor: pointer;
		box-shadow: 6px 6px 0 0 #000;
		transition:
			transform 80ms ease,
			box-shadow 80ms ease;
	}

	.progress-btn:hover {
		transform: translate(-2px, -2px);
		box-shadow: 8px 8px 0 0 #000;
	}

	.progress-btn:active {
		transform: translate(2px, 2px);
		box-shadow: 2px 2px 0 0 #000;
	}

	.progress-chev {
		width: 1.25rem;
		height: 1.25rem;
		transition: transform 200ms ease;
	}

	.progress-chev.open {
		transform: rotate(180deg);
	}

	@media (prefers-color-scheme: dark) {
		.progress-btn {
			background: #111827;
			color: #f9fafb;
			border-color: #fff;
			box-shadow: 6px 6px 0 0 #fff;
		}
		.progress-btn:hover {
			box-shadow: 8px 8px 0 0 #fff;
		}
		.progress-btn:active {
			box-shadow: 2px 2px 0 0 #fff;
		}
	}

	.signin-prompt {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		/*padding: 1rem 0 0.25rem;*/
	}

	/* ── Discord button (neobrutalist, discord purple) ── */
	.discord-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.85rem 1.25rem;
		background: #5865f2;
		color: #fff;
		border: 2px solid #000;
		border-radius: 0.75rem;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		cursor: pointer;
		box-shadow: 6px 6px 0 0 #000;
		transition:
			transform 80ms ease,
			box-shadow 80ms ease,
			background-color 120ms ease;
	}

	.discord-btn:hover {
		transform: translate(-2px, -2px);
		box-shadow: 8px 8px 0 0 #000;
		background: #4752c4;
	}

	.discord-btn:active {
		transform: translate(2px, 2px);
		box-shadow: 2px 2px 0 0 #000;
		background: #3c45a5;
	}

	@media (prefers-color-scheme: dark) {
		.discord-btn {
			border-color: #fff;
			box-shadow: 6px 6px 0 0 #fff;
		}
		.discord-btn:hover {
			box-shadow: 8px 8px 0 0 #fff;
		}
		.discord-btn:active {
			box-shadow: 2px 2px 0 0 #fff;
		}
	}

	.discord-icon {
		width: 1.25rem;
		height: 1.25rem;
		flex-shrink: 0;
	}

	.signin-text {
		font-size: 0.85rem;
		text-align: center;
		font-weight: 500;
	}

	.apple-signin-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.6rem 1rem;
		width: 100%;
		margin-bottom: 0.6rem;
		background: #000;
		color: #fff;
		border-radius: 0.5rem;
		font-size: 0.95rem;
		font-weight: 600;
		border: none;
		cursor: pointer;
		transition:
			background 150ms ease,
			transform 80ms ease;
	}

	.apple-signin-btn:hover {
		background: #222;
		transform: translateY(-1px);
	}

	.apple-signin-btn:active {
		background: #111;
		transform: scale(0.98);
	}

	@media (prefers-color-scheme: dark) {
		.apple-signin-btn {
			background: #fff;
			color: #000;
		}
		.apple-signin-btn:hover {
			background: #e5e5e5;
		}
		.apple-signin-btn:active {
			background: #ccc;
		}
	}

	.apple-icon {
		width: 1.1rem;
		height: 1.1rem;
		flex-shrink: 0;
	}

	.google-signin-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.6rem 1rem;
		width: 100%;
		background: #000;
		color: #fff;
		border-radius: 0.5rem;
		font-size: 0.95rem;
		font-weight: 600;
		border: none;
		cursor: pointer;
		transition:
			background 150ms ease,
			transform 80ms ease;
	}

	.google-signin-btn:hover {
		background: #222;
		transform: translateY(-1px);
	}

	.google-signin-btn:active {
		background: #111;
		transform: scale(0.98);
	}

	@media (prefers-color-scheme: dark) {
		.google-signin-btn {
			background: #fff;
			color: #000;
		}
		.google-signin-btn:hover {
			background: #e5e5e5;
		}
		.google-signin-btn:active {
			background: #ccc;
		}
	}

	.google-icon {
		width: 1.1rem;
		height: 1.1rem;
		flex-shrink: 0;
	}
</style>
