Extract styles, add per-scene link tuning, update docs

main.js

@@ -17,6 +17,7 @@
     minChain: 3,
     palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
     ballRadius: 18,
+    link: { stiffness: 0.9, lengthScale: 1, damping: 0.05, lineWidth: 3 },
   };
 
   const scenes = [
@@ -24,11 +25,12 @@
       id: "scene1",
       name: "Balanced (default)",
       config: {
-        gravity: 0.88,
-        spawnIntervalMs: 720,
+        gravity: 1,
+        spawnIntervalMs: 520,
         minChain: 3,
         palette: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"],
-        ballRadius: 38,
+        ballRadius: 18,
+        link: { stiffness: 0.9, lengthScale: 1, damping: 0.05, lineWidth: 3 },
       },
       createBodies: (w, h) => [
         Bodies.rectangle(w / 2, h + 40, w, 80, {
@@ -56,6 +58,7 @@
         minChain: 3,
         palette: ["#fb7185", "#fbbf24", "#34d399", "#38bdf8"],
         ballRadius: 22,
+        link: { stiffness: 0.6, lengthScale: 1.2, damping: 0.01, lineWidth: 4 },
       },
       createBodies: (w, h) => [
         Bodies.rectangle(w / 2, h + 50, w, 100, {
@@ -87,6 +90,7 @@
         minChain: 3,
         palette: ["#e879f9", "#38bdf8", "#f97316", "#22c55e"],
         ballRadius: 16,
+        link: { stiffness: 1, lengthScale: 0.85, damping: 0.15, lineWidth: 3 },
       },
       createBodies: (w, h) => {
         const bodies = [
@@ -211,6 +215,7 @@
     currentScene = next;
     if (sceneSelectEl) sceneSelectEl.value = next.id;
     Object.assign(config, next.config);
+    config.link = { ...next.config.link };
     engine.gravity.y = config.gravity;
     highScore = loadHighScore(next.id);
     rebuildSceneBodies();
@@ -353,14 +358,16 @@
   const addToChain = (body) => {
     const last = chain.bodies[chain.bodies.length - 1];
     const dist = Vector.magnitude(Vector.sub(last.position, body.position));
+    const linkCfg = config.link || {};
     const constraint = Constraint.create({
       bodyA: last,
       bodyB: body,
-      length: dist,
-      stiffness: 0.9,
+      length: dist * (linkCfg.lengthScale ?? 1),
+      stiffness: linkCfg.stiffness ?? 0.9,
+      damping: linkCfg.damping ?? 0,
       render: {
         strokeStyle: chain.color,
-        lineWidth: 3,
+        lineWidth: linkCfg.lineWidth ?? 3,
       },
     });
     chain.constraints.push(constraint);