adding storytelling elements

src/routes/Game.svelte

@@ -2,6 +2,8 @@
     import { querystring } from 'svelte-spa-router';
     import GameCanvas from '../components/GameCanvas.svelte';
     import HUD from '../components/HUD.svelte';
+    import QuoteToast from '../components/QuoteToast.svelte';
+    import LevelCompleteOverlay from '../components/LevelCompleteOverlay.svelte';
 
     // querystring is the part after ? in the URL e.g. "level=2"
     // we parse it safely — if missing, default to level 1
@@ -11,8 +13,12 @@
 </script>
 
 <div class="game-wrapper">
-    <GameCanvas levelNumber={levelNum}/>
+    {#key levelNum}
+        <GameCanvas levelNumber={levelNum}/>
+    {/key}
     <HUD levelNumber={levelNum}/>
+    <QuoteToast />
+    <LevelCompleteOverlay />
 </div>
 
 <style>

src/routes/Home.svelte

@@ -11,8 +11,8 @@
     <!--<img src="/backgrounds/title_bg.png" class="bg" alt="title background"/>-->
 
     <div class="content">
-        <h1>ColorQuest</h1>
-        <p>Bring color back to your world</p>
+        <h1>The Full Hue</h1>
+        <p>Bring back your full color</p>
         <button on:click={startGame}>begin</button>
     </div>
 </div>