Add win condition UI and zero-G grid level

scenes.js

@@ -2,9 +2,132 @@
   const { Bodies } = Matter;
 
   const scenes = [
+    {
+      id: "scene-grid",
+      name: "Zero-G Grid (default)",
+      config: {
+        gravity: 0,
+        spawnIntervalMs: 0,
+        autoSpawn: false,
+        minChain: 3,
+        palette: ["#38bdf8", "#f472b6", "#facc15", "#34d399", "#a78bfa"],
+        ballRadius: 24,
+        gridPadding: 0.08, // percent of viewport padding applied to both axes
+        gridBallScale: 0.38, // percent of cell size used as radius
+        gridLegend: {
+          A: "#38bdf8",
+          B: "#f472b6",
+          C: "#facc15",
+          D: "#34d399",
+          E: "#a78bfa",
+        },
+        winCondition: {
+          type: "clearCount",
+          target: 35,
+          nextSceneId: "scene1",
+          onWin: { setGravity: 0.88 },
+        },
+        gridLayouts: [
+          [
+            "AABBBBAA",
+            "ACCCBCCA",
+            "ACDDDDCA",
+            "ACEEEECA",
+            "ACEEEECA",
+            "ACDDDDCA",
+            "ACCCBCCA",
+            "AABBBBAA",
+          ],
+          [
+            "AAAABBBA",
+            "ABBBCCCA",
+            "ABCDDDCA",
+            "ABCEEECA",
+            "ABCEEECA",
+            "ABCDDDCA",
+            "ABBBCCCA",
+            "AAAABBBA",
+          ],
+          [
+            "AABBCCDD",
+            "ABBCCDEE",
+            "ABCCDEEA",
+            "ACCDDEEA",
+            "ACCDDEEA",
+            "ABCCDEEA",
+            "ABBCCDEE",
+            "AABBCCDD",
+          ],
+        ],
+        link: {
+          stiffness: 0.82,
+          lengthScale: 1.05,
+          damping: 0.06,
+          lineWidth: 3,
+          rope: true,
+          renderType: "line",
+          maxLengthMultiplier: 3.8,
+        },
+      },
+      createBodies: (w, h) => {
+        const pad = 0.08;
+        const usableW = w * (1 - pad * 2);
+        const usableH = h * (1 - pad * 2);
+        const gridSize = Math.min(usableW, usableH);
+        const gridX = (w - gridSize) / 2;
+        const gridY = (h - gridSize) / 2;
+        const wallThickness = Math.max(18, gridSize * 0.045);
+        const innerW = gridSize;
+        const innerH = gridSize;
+        const cx = gridX + innerW / 2;
+        const cy = gridY + innerH / 2;
+        return [
+          Bodies.rectangle(
+            cx,
+            gridY - wallThickness / 2,
+            innerW + wallThickness * 2,
+            wallThickness,
+            {
+              isStatic: true,
+              render: { fillStyle: "#0b1222", strokeStyle: "#0b1222" },
+            },
+          ),
+          Bodies.rectangle(
+            cx,
+            gridY + innerH + wallThickness / 2,
+            innerW + wallThickness * 2,
+            wallThickness,
+            {
+              isStatic: true,
+              render: { fillStyle: "#0b1222", strokeStyle: "#0b1222" },
+            },
+          ),
+          Bodies.rectangle(
+            gridX - wallThickness / 2,
+            cy,
+            wallThickness,
+            innerH + wallThickness * 2,
+            {
+              isStatic: true,
+              render: { fillStyle: "#0b1222", strokeStyle: "#0b1222" },
+            },
+          ),
+          Bodies.rectangle(
+            gridX + innerW + wallThickness / 2,
+            cy,
+            wallThickness,
+            innerH + wallThickness * 2,
+            {
+              isStatic: true,
+              render: { fillStyle: "#0b1222", strokeStyle: "#0b1222" },
+            },
+          ),
+        ];
+      },
+    },
     {
       id: "scene1",
-      name: "Balanced (default)",
+      name: "Balanced",
       config: {
         gravity: 0.88,
         spawnIntervalMs: 520,
@@ -266,6 +389,6 @@
 
   window.PhysilinksScenes = {
     scenes,
-    defaultSceneId: scenes[0]?.id || "scene1",
+    defaultSceneId: scenes[0]?.id || "scene-grid",
   };
 })();