(() => {
  const { Bodies } = Matter;
  const scenes = (window.PhysilinksSceneDefs =
    window.PhysilinksSceneDefs || []);

  scenes.push({
    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: 25,
        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" },
          },
        ),
      ];
    },
  });
})();