Add gameover and overall layout

Co-authored-by: Copilot <copilot@github.com>

src/App.svelte

@@ -1,19 +1,44 @@
 <script>
-  import { initializeGame, updateGame, getScore } from './game/game.js';
+  import {
+    initializeGame,
+    updateGame,
+    getScore,
+    isGameOver,
+    resetGame
+  } from './game/game.js';
 
   let game;
   let score = $state(0);
+  let highScore = $state(0);
+  let state = $state('start'); // start | playing | gameover
+
 
   window.setup = () => {
     createCanvas(400, 800).parent(game);
     initializeGame();
+    noLoop();
   };
 
   window.draw = () => {
     updateGame();
-    score = getScore();
+    score = Math.floor(getScore());
+
+    if (isGameOver()) {
+      state = 'gameover';
+      if (score > highScore) {
+        highScore = score;
+      }
+      noLoop();
+    }
   };
 
+  function playGame() {
+    resetGame();
+    score = 0;
+    state = 'playing';
+    loop();
+  }
+
   $effect(() => {
     new p5();
   });
@@ -24,11 +49,23 @@
 
   <div class="layout">
     <aside class="scoreboard">
-      <h2>Score</h2>
-      <p>{score}</p>
+      <h2>High Score</h2>
+      <p>{highScore}</p>
     </aside>
 
-    <div class="game-wrapper" bind:this={game}></div>
+    <div class="game-wrapper">
+      <div bind:this={game}></div>
+
+      {#if state !== 'playing'}
+        <div class="overlay">
+          <div class="overlay-card">
+            <h2>{state === 'gameover' ? 'Game over!' : 'Start new game'}</h2>
+            {#if state !== "start"} <p>Score: {score}</p> {/if }
+            <button onclick={playGame}>Play</button>
+          </div>
+        </div>
+      {/if}
+    </div>
 
     <aside class="right-panel"></aside>
   </div>
@@ -74,11 +111,47 @@
   }
 
   .game-wrapper {
+    position: relative;
+    width: 400px;
+    height: 800px;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
   }
 
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  .overlay-card {
+    background: rgba(255, 255, 255, 0.94);
+    color: #111;
+    padding: 28px;
+    border-radius: 18px;
+    min-width: 220px;
+  }
+
+  .overlay-card h2 {
+    margin-top: 0;
+  }
+
+  .overlay-card button {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 10px 28px;
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    background: #2b2d42;
+    color: white;
+  }
+
   .right-panel {
     width: 220px;
   }