major styling and spacing

src/lib/components/VerseDisplay.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+  import Container from "./Container.svelte";
 
   let { data, isWon }: { data: PageData; isWon: boolean } = $props();
   let dailyVerse = $derived(data.dailyVerse);
@@ -11,15 +12,17 @@
   );
 </script>
 
-<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
+<Container class="w-full p-8 sm:p-12">
   <blockquote
     class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
   >
     {displayVerseText}
   </blockquote>
   {#if isWon}
-    <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
+    <p
+      class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+    >
       {displayReference}
     </p>
   {/if}
-</div>
+</Container>