add fade-in animations and conditional rendering to GuessesTable

src/lib/components/GuessesTable.svelte

@@ -11,15 +11,16 @@
     adjacent: boolean;
   }
 
-	let {
+  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
-		guesses,
+    $props();
-		correctBookId,
+
-	}: { guesses: Guess[]; correctBookId: string } = $props();
+  let hasGuesses = $derived(guesses.length > 0);
 </script>
 
-<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
+{#if hasGuesses}
+  <div class="bg-white rounded-2xl shadow-xl overflow-x-auto fade-in">
     <table class="w-full">
-		<thead>
+      <thead class="fade-in">
         <tr class="bg-linear-to-r from-gray-50 to-gray-300">
           <th
             class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
@@ -36,12 +37,12 @@
         </tr>
       </thead>
       <tbody>
-			{#each guesses as guess (guess.book.id)}
+        {#each guesses as guess, index (guess.book.id)}
           <tr
-					class="border-b border-gray-100 transition-colors {guess
+            class="border-b border-gray-100 transition-colors {guess.book.id ===
-						.book.id === correctBookId
+            correctBookId
               ? 'bg-green-200 animate-shine'
-						: 'hover:bg-gray-50'}"
+              : 'hover:bg-gray-50'} {index === 0 ? 'fade-in' : ''}"
           >
             <td
               class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
@@ -49,16 +50,12 @@
               {guess.book.id === correctBookId ? "✅" : "❌"}
               {guess.book.name}
             </td>
-					<td
+            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
-					>
               {guess.testamentMatch ? "✅" : "❌"}
               {guess.book.testament.charAt(0).toUpperCase() +
                 guess.book.testament.slice(1).toLowerCase()}
             </td>
-					<td
+            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-						class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
-					>
               {guess.sectionMatch ? "✅" : "❌"}
               {guess.adjacent ? "‼️ " : ""}{guess.book.section}
             </td>
@@ -67,6 +64,7 @@
       </tbody>
     </table>
   </div>
+{/if}
 
 <style>
   @keyframes shine {
@@ -79,13 +77,23 @@
   }
 
   .animate-shine {
-		background: linear-gradient(
+    background: linear-gradient(110deg, #dcffe7 45%, #f1fff5 50%, #dcffe7 55%);
-			110deg,
-			#dcffe7 45%,
-			#f1fff5 50%,
-			#dcffe7 55%
-		);
     background-size: 200% 100%;
     animation: shine 5s infinite;
   }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
 </style>

src/lib/components/WinScreen.svelte

@@ -73,7 +73,7 @@
 </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"
+  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}
@@ -147,3 +147,20 @@
     <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
   {/if}
 </div>
+
+<style>
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
+</style>

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
     defer
     src="https://umami.snail.city/script.js"
     data-website-id="5b8c31ad-71cd-4317-940b-6bccea732acc"
+    data-domains="bibdle.com,www.bibdle.com"
   ></script>
 </svelte:head>
 {@render children()}

src/routes/+page.svelte

@@ -338,17 +338,15 @@
 </script>
 
 <svelte:head>
-  <title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
+  <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title>
   <meta
     name="description"
     content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
   />
 </svelte:head>
 
-<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
+<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
-  <div
+  <div class="w-full max-w-3xl mx-auto px-4">
-    class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
-  >
     <h1
       class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
     >

src/routes/layout.css

@@ -5,3 +5,7 @@
 @theme {  
 	--font-triodion: "PT Serif", serif; 
 }
+
+html, body {
+	background: oklch(98.11% 0.02777 158.93);
+}