major styling and spacing

src/lib/components/WinScreen.svelte

@@ -2,6 +2,8 @@
   import { fade } from "svelte/transition";
   import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
   import { onMount } from "svelte";
+  import Container from "./Container.svelte";
+  import CountdownTimer from "./CountdownTimer.svelte";
 
   interface StatsData {
     solveRank: number;
@@ -36,7 +38,7 @@
   const congratulationsMessages: WeightedMessage[] = [
     { text: "Congratulations!", weight: 10 },
     { text: "You got it!", weight: 1000 },
-    { text: "Yup,", weight: 100 },
+    { text: "Yup.", weight: 100 },
     { text: "Very nice!", weight: 1 },
   ];
 
@@ -73,75 +75,81 @@
   let congratulationsMessage = $derived(getRandomCongratulationsMessage());
 </script>
 
-<div
-  class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center fade-in"
->
-  <!-- <h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-    {congratulationsMessage}
-  </h2> -->
-  <p class="text-xl sm:text-3xl md:text-4xl">
-    {congratulationsMessage} The verse is from
-    <span class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span>.
-  </p>
-  <p
-    class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
+<div class="flex flex-col gap-6">
+  <Container
+    class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
   >
-    Your grade: {grade}
-  </p>
+    <p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
+      {congratulationsMessage} The verse is from
+      <span class="font-black text-3xl md:text-4xl">{bookName}</span>.
+    </p>
+    <p class="text-lg sm:text-xl md:text-2xl mt-4">
+      You guessed correctly after {guessCount}
+      {guessCount === 1 ? "guess" : "guesses"}.
+      <span class="font-bold bg-white/40 rounded px-1.5 py-0.75">{grade}</span>
+    </p>
 
-  {#if hasWebShare}
-    <button
-      onclick={handleShare}
-      data-umami-event="Share"
-      class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
-    >
-      📤 Share
-    </button>
-    <button
-      onclick={() => {
-        copyToClipboard();
-        copySuccess = true;
-        setTimeout(() => {
-          copySuccess = false;
-        }, 3000);
-      }}
-      data-umami-event="Copy to Clipboard"
-      class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
-        copySuccess
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
-      }`}
-    >
-      {copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
-    </button>
-  {:else}
-    <button
-      onclick={handleShare}
-      data-umami-event="Share"
-      class={`mt-4 text-2xl font-bold p-2 ${
-        copied
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
-      } rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
-    >
-      {copied ? "Copied to clipboard!" : "📤 Share"}
-    </button>
-  {/if}
+    <div class="flex justify-center mt-6">
+      {#if hasWebShare}
+        <!-- mobile and arc in production -->
+        <button
+          onclick={handleShare}
+          data-umami-event="Share"
+          class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+        >
+          📤 Share
+        </button>
+        <button
+          onclick={() => {
+            copyToClipboard();
+            copySuccess = true;
+            setTimeout(() => {
+              copySuccess = false;
+            }, 3000);
+          }}
+          data-umami-event="Copy to Clipboard"
+          class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
+            copySuccess ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
+          }`}
+        >
+          {copySuccess ? "✅ Copied!" : "📋 Copy"}
+        </button>
+      {:else}
+        <!-- dev mode and desktop browsers -->
+        <button
+          onclick={handleShare}
+          data-umami-event="Copy to Clipboard"
+          class={`text-2xl font-bold p-4 ${
+            copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
+          } rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
+        >
+          {copied ? "✅ Copied!" : "📋 Share"}
+        </button>
+      {/if}
+    </div>
 
-  <p class="pt-6 big-text text-gray-100!">
-    {getNextGradeMessage(guessCount)}
-  </p>
+    <p class="pt-6 big-text text-gray-700!">
+      {getNextGradeMessage(guessCount)}
+    </p>
+  </Container>
+
+  <CountdownTimer />
 
   <!-- Statistics Display -->
   {#if statsData}
-    <div class="mt-6" in:fade={{ delay: 800 }}>
-      <div class="grid grid-cols-3 gap-4 gap-x-8 text-center">
+    <Container
+      class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 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">
             #{statsData.solveRank}
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             You were the {toOrdinal(statsData.solveRank)} person to solve today
           </div>
         </div>
@@ -155,7 +163,7 @@
                 100
             )}%
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
             total solves
           </div>
@@ -166,15 +174,19 @@
           <div class="text-3xl sm:text-4xl font-black">
             {statsData.averageGuesses}
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             People guessed correctly after {statsData.averageGuesses}
             {statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
           </div>
         </div>
       </div>
-    </div>
+    </Container>
   {:else if !statsSubmitted}
-    <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
+    <Container
+      class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+    >
+      <div class="text-sm opacity-80">Submitting stats...</div>
+    </Container>
   {/if}
 </div>