Stage 17 (#12): lines-off board variant (gapless checkerboard), Settings toggle

Add a 'Grid lines' preference (default off): when off the board drops the 1px grid
gaps for a gapless checkerboard (plain cells alternate shades; tiles get rounded
corners and a soft right-side shadow so adjacent gapless tiles still read apart),
saving ~14px of width. When on, the classic lined grid returns. Persisted with the
other board-style prefs; wired through Board's new lines prop. e2e locks the default
and the toggle.

ui/src/game/Board.svelte

@@ -16,6 +16,7 @@
     zoomed,
     variant,
     labelMode,
+    lines,
     locale,
     focus,
     oncell,
@@ -32,6 +33,8 @@
     zoomed: boolean;
     variant: Variant;
     labelMode: BoardLabelMode;
+    /** Draw 1px grid lines between cells; when false the board is a gapless checkerboard. */
+    lines: boolean;
     locale: Locale;
     focus: { row: number; col: number } | null;
     oncell: (row: number, col: number) => void;
@@ -94,7 +97,7 @@
 
 <div class="viewport" class:zoomed bind:this={viewport}>
   <div class="scaler" style="--z: {z};">
-    <div class="grid">
+    <div class="grid" class:gridless={!lines}>
       {#each board as rowCells, r (r)}
         {#each rowCells as cell, c (c)}
           {@const p = pending.get(key(r, c))}
@@ -107,6 +110,7 @@
             class:pending={!!p && !cell}
             class:hl={!!cell && highlight.has(key(r, c)) && !flash}
             class:flash={!!cell && flash && highlight.has(key(r, c))}
+            class:dark={premium[r][c] === '' && !cell && !p && (r + c) % 2 === 1}
             data-cell
             data-row={r}
             data-col={c}
@@ -187,6 +191,28 @@
   .cell.pending {
     background: var(--tile-pending);
   }
+  /* Lines-off variant: a gapless checkerboard. The 1px grid gaps (and the cell-line they
+     reveal) collapse, saving ~14px of board width; plain cells alternate shades, and tiles
+     get rounded corners and a soft right-side shadow so adjacent gapless tiles still read
+     as separate pieces. */
+  .grid.gridless {
+    gap: 0;
+    padding: 0;
+    background: var(--board-bg);
+  }
+  .grid.gridless .cell {
+    border-radius: 0;
+  }
+  .grid.gridless .cell.dark {
+    background: color-mix(in srgb, var(--cell-bg) 88%, #000);
+  }
+  .grid.gridless .cell.filled,
+  .grid.gridless .cell.pending {
+    border-radius: 4px;
+    box-shadow:
+      inset 0 -2px 0 var(--tile-edge),
+      2px 0 3px -1px rgba(0, 0, 0, 0.4);
+  }
   .cell.hl {
     background: var(--tile-recent);
     /* The bottom edge goes darker than the highlighted fill (not lighter, as the plain