fix: declare grid-template-columns so the battle grid lays out as a grid, not a single column

CSS Grid without an explicit grid-template-columns defaults to a
single-column layout, so the 64-144 tiles stacked vertically and
the user saw a long column instead of an 8x8 (or 10x8 or 12x12)
battlefield. Set the column count via a CSS variable on the grid
root, written by match.js after the match snapshot loads (CSS attr()
for non-content properties is not yet shipped in Safari or Firefox).

public/assets/styles.css

@@ -20,7 +20,7 @@ table.bf-grid button[data-zone="bravo"] { outline: 3px solid #0c0; }
 .bf-errors { color: #c00; }
 .bf-toast { background: #dfd; padding: 0.5rem 1rem; margin: 0.5rem 0; }
 .bf-match { display: flex; gap: 1rem; }
-.bf-grid { display: grid; gap: 1px; background: #ddd; padding: 1px; width: max-content; }
+.bf-grid { display: grid; gap: 1px; background: #ddd; padding: 1px; width: max-content; grid-template-columns: repeat(var(--bf-cols, 8), 2.5rem); }
 .bf-tile { width: 2.5rem; height: 2.5rem; border: 0; background: #fff; padding: 0; position: relative; }
 .bf-tile[data-bf-terrain="forest"] { background: #cfc; }
 .bf-tile[data-bf-terrain="rough"] { background: #fec; }

public/js/match.js

@@ -66,6 +66,10 @@ function renderGrid(root, match) {
   const { width, height, terrain } = match.battlefield;
   root.setAttribute('data-bf-width', String(width));
   root.setAttribute('data-bf-height', String(height));
+  // Set the column count via a CSS variable so the grid-template-columns
+  // declaration can read it portably (CSS attr() for non-content properties
+  // is not yet supported in Safari or Firefox as of mid-2026).
+  root.style.setProperty('--bf-cols', String(width));
 
   const unitsByKey = {};
   match.units.forEach((unit) => {