fix: use separate CSS translate/scale properties for smooth animations

Tile pop and merge @keyframes were setting transform: scale() which
overrode transform: translate() used for tile positioning, causing
tiles to jump to (0,0) during animation. Fix by using individual CSS
properties: translate for positioning, scale in keyframes.

bmad/src/app.css

@@ -55,8 +55,8 @@ body {
 }
 
 @keyframes tile-pop {
-  0% { transform: scale(0); }
-  100% { transform: scale(1); }
+  0% { scale: 0; }
+  100% { scale: 1; }
 }
 
 @keyframes overlay-fade {
@@ -70,9 +70,9 @@ body {
 }
 
 @keyframes tile-merge {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.2); }
-  100% { transform: scale(1); }
+  0% { scale: 1; }
+  50% { scale: 1.2; }
+  100% { scale: 1; }
 }
 
 @media (prefers-reduced-motion: reduce) {

bmad/src/components/Grid.svelte

@@ -25,7 +25,7 @@
       style="
         width: var(--cell-size);
         height: var(--cell-size);
-        transform: translate(calc({col} * (var(--cell-size) + var(--grid-gap))), calc({row} * (var(--cell-size) + var(--grid-gap))));
+        translate: calc({col} * (var(--cell-size) + var(--grid-gap))) calc({row} * (var(--cell-size) + var(--grid-gap)));
         background: #cdc1b4;
       "
     ></div>

bmad/src/components/Tile.svelte

@@ -28,8 +28,8 @@
   style="
     width: var(--cell-size);
     height: var(--cell-size);
-    transform: translate(calc({col} * (var(--cell-size) + var(--grid-gap))), calc({row} * (var(--cell-size) + var(--grid-gap))));
-    transition: transform 100ms ease-in-out;
+    translate: calc({col} * (var(--cell-size) + var(--grid-gap))) calc({row} * (var(--cell-size) + var(--grid-gap)));
+    transition: translate 100ms ease-in-out;
     animation: {animation};
     background: {colors.bg};
     color: {colors.text};