Update index.html

index.html

@@ -50,8 +50,9 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            aspect-ratio: 1 / 1; 
+            /* aspect-ratio: 1 / 1;  REMOVED: This caused centering issues on non-square cells */
             transition: transform 0.3s ease-in-out;
+            transform-origin: center center; /* Ensure rotation happens exactly in the middle */
         }
 
         .cell-text {
@@ -1762,7 +1763,7 @@
                     gridHtml += `
                         <div class="grid-cell" style="position: relative; ${borderStyle} background-color: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                             ${innerBg}
-                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg); z-index: 1; position: relative;">
+                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg); transform-origin: center center; z-index: 1; position: relative;">
                                 ${contentHtml}
                             </div>
                         </div>