From 958f091c56a5e57cc520bd6ce1c373cfa2f2d6e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 24 Aug 2026 08:35:18 +0200
Subject: [PATCH] Polish home CTAs, panel rounding, and 404 label; fix dev-mode
 SW crash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Shorten CTA labels to "Play Demo" / "Load Table"
- Fix mismatched corner radii on the hero and table-staging panels
- Add horizontal padding to the in-game "insert coin" hint on mobile
- Match the 404 page's "TILT" eyebrow label size to the rest of the site
- Only register the service worker in production — it precaches
  /404.html, which doesn't exist as a static file under `next dev` and
  was failing cache.addAll() on every load

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/not-found.tsx                        | 2 +-
 components/RegisterServiceWorker.tsx     | 4 ++++
 components/landing/AttractHero.tsx       | 6 +++---
 components/landing/TableStaging.tsx      | 2 +-
 components/pinball/PinballCanvasImpl.tsx | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/not-found.tsx b/app/not-found.tsx
index 6b33987..5c11739 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -4,7 +4,7 @@ import { buttonClassName } from "@/components/ui/Button";
 export default function NotFound() {
   return (
     <main className="flex flex-1 flex-col items-center justify-center gap-6 px-4 py-24 text-center">
-      <p className="font-mono text-sm tracking-[0.3em] text-arc">TILT</p>
+      <p className="font-mono text-xs tracking-[0.3em] text-arc">TILT</p>
       <h1 className="font-display text-5xl font-black tracking-wide text-marquee sm:text-7xl">
         TABLE NOT FOUND
       </h1>
diff --git a/components/RegisterServiceWorker.tsx b/components/RegisterServiceWorker.tsx
index 5e9d812..1cca7ba 100644
--- a/components/RegisterServiceWorker.tsx
+++ b/components/RegisterServiceWorker.tsx
@@ -4,6 +4,10 @@ import { useEffect } from "react";
 
 export default function RegisterServiceWorker() {
   useEffect(() => {
+    // sw.js precaches /404.html, which only exists as a static file after
+    // `next build`'s static export — under `next dev` it 404s and fails the
+    // whole cache.addAll(), so only register outside of development.
+    if (process.env.NODE_ENV !== "production") return;
     if (!("serviceWorker" in navigator)) return;
     navigator.serviceWorker.register("/sw.js").catch((err) => {
       console.error("Service worker registration failed:", err);
diff --git a/components/landing/AttractHero.tsx b/components/landing/AttractHero.tsx
index 0433dd1..f669930 100644
--- a/components/landing/AttractHero.tsx
+++ b/components/landing/AttractHero.tsx
@@ -33,7 +33,7 @@ export default function AttractHero() {
 
   return (
     <FileDropZone onFile={handleFile} onError={setError} className="w-full max-w-4xl">
-      <div className="relative overflow-hidden rounded-t-3xl rounded-b-lg border-2 border-chrome/40 bg-ash shadow-2xl">
+      <div className="relative overflow-hidden rounded-lg border-2 border-chrome/40 bg-ash shadow-2xl">
         {/* Backglass glow — stands in for real playfield art; GI-lamp amber + a cyan tube accent. */}
         <div
           aria-hidden
@@ -64,10 +64,10 @@ export default function AttractHero() {
 
           <div className="mt-4 flex flex-col items-center gap-3 sm:flex-row">
             <Button type="button" variant="primary" onClick={() => router.push("/play")}>
-              Insert Coin — Play Demo
+              Play Demo
             </Button>
             <label htmlFor={VPX_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer")}>
-              Load Your Table
+              Load Table
             </label>
           </div>
 
diff --git a/components/landing/TableStaging.tsx b/components/landing/TableStaging.tsx
index 891aa9d..eac4dab 100644
--- a/components/landing/TableStaging.tsx
+++ b/components/landing/TableStaging.tsx
@@ -30,7 +30,7 @@ export default function TableStaging({ vpxFile, onPlay, onCancel }: TableStaging
   };
 
   return (
-    <div className="relative overflow-hidden rounded-t-3xl rounded-b-lg border-2 border-chrome/40 bg-ash shadow-2xl">
+    <div className="relative overflow-hidden rounded-lg border-2 border-chrome/40 bg-ash shadow-2xl">
       <div className="relative flex flex-col items-center gap-5 px-4 py-14 text-center sm:px-8">
         <p className="font-mono text-xs tracking-[0.3em] text-arc">TABLE SELECTED</p>
         <h2 className="max-w-lg truncate font-display text-3xl font-black tracking-wide text-paper sm:text-4xl">
diff --git a/components/pinball/PinballCanvasImpl.tsx b/components/pinball/PinballCanvasImpl.tsx
index 6d72ba2..e1229bb 100644
--- a/components/pinball/PinballCanvasImpl.tsx
+++ b/components/pinball/PinballCanvasImpl.tsx
@@ -68,7 +68,7 @@ export default function PinballCanvasImpl({ tableData, rom, tableInfo }: Pinball
               real coin-op cabinet — pressing 1 alone does nothing until a
               credit is added. Surfaced here since it's the first thing
               anyone hits and easy to mistake for the app not responding. */}
-          <p className="font-mono text-xs text-chrome">
+          <p className="max-w-md px-4 text-center font-mono text-xs text-chrome">
             If Start doesn&apos;t respond: press <span className="text-arc">4</span> to insert a coin, then{" "}
             <span className="text-arc">1</span> to start.
           </p>