Simplify start overlay and remove grid

app/LogoBreakout.tsx

@@ -470,23 +470,6 @@ export function LogoBreakout() {
       context.fillStyle = "#ffffff";
       context.fillRect(0, 0, WIDTH, HEIGHT);
 
-      context.save();
-      context.strokeStyle = "rgba(17, 17, 17, 0.045)";
-      context.lineWidth = 1;
-      for (let x = 0; x <= WIDTH; x += 40) {
-        context.beginPath();
-        context.moveTo(x, 0);
-        context.lineTo(x, HEIGHT);
-        context.stroke();
-      }
-      for (let y = 0; y <= HEIGHT; y += 40) {
-        context.beginPath();
-        context.moveTo(0, y);
-        context.lineTo(WIDTH, y);
-        context.stroke();
-      }
-      context.restore();
-
       for (const brick of game.bricks) {
         if (!brick.alive) continue;
         context.save();
@@ -576,7 +559,7 @@ export function LogoBreakout() {
         update(game, delta);
         draw(game);
       } else {
-        context.fillStyle = "#06172d";
+        context.fillStyle = "#ffffff";
         context.fillRect(0, 0, WIDTH, HEIGHT);
       }
       frame = requestAnimationFrame(loop);
@@ -606,10 +589,10 @@ export function LogoBreakout() {
       action: "Please wait",
     },
     ready: {
-      kicker: destroyed ? "Signal recovered" : "Mission ready",
-      title: destroyed ? "Keep it alive" : "Break the alliance",
-      copy: "Move with your pointer or arrow keys. Launch with click or Space.",
-      action: destroyed ? "Relaunch signal" : "Launch signal",
+      kicker: "",
+      title: "",
+      copy: "",
+      action: "Start",
     },
     paused: {
       kicker: "Field suspended",
@@ -692,23 +675,36 @@ export function LogoBreakout() {
         />
         {overlay && (
           <div className="game-overlay">
-            <div className="overlay-card">
-              <p className="overlay-kicker">{overlay.kicker}</p>
-              <h2>{overlay.title}</h2>
-              <p>{overlay.copy}</p>
+            {status === "ready" ? (
               <button
-                className="launch-button"
+                className="launch-button start-button"
                 type="button"
                 onClick={(event) => {
                   event.stopPropagation();
-                  if (status === "paused") togglePause();
-                  else launch();
+                  launch();
                 }}
-                disabled={status === "loading"}
               >
-                {overlay.action}
+                Start
               </button>
-            </div>
+            ) : (
+              <div className="overlay-card">
+                <p className="overlay-kicker">{overlay.kicker}</p>
+                <h2>{overlay.title}</h2>
+                <p>{overlay.copy}</p>
+                <button
+                  className="launch-button"
+                  type="button"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    if (status === "paused") togglePause();
+                    else launch();
+                  }}
+                  disabled={status === "loading"}
+                >
+                  {overlay.action}
+                </button>
+              </div>
+            )}
           </div>
         )}
       </div>

app/globals.css

@@ -207,6 +207,12 @@ main {
   background: var(--cyan);
 }
 
+.start-button {
+  min-width: 132px;
+  padding: 16px 30px;
+  font-size: 15px;
+}
+
 .launch-button:disabled {
   opacity: 0.45;
   cursor: wait;