Word Search polish: constant cell size, 28-word themes, per-size variety, palette

Playtesting fixes:
* Constant cell size (~32px) — the board GROWS with the grid instead of shrinking
  letters into a fixed box. Fixes Small's oversized spacing; on a narrow phone the
  largest grid gently scales to fit (the standard word-search compromise).
* Themes now gather ~28 words (LLM asked for 28; curated fallbacks ~22 each), and
  each size samples its OWN subset — so every tier is a distinct puzzle. Large is
  now reliably full (14 words on 14×14), fixing the "13 words / 11 listed" mismatch.
* Tiers: small 8×8/6, med 11×11/10, large 14×14/14.
* Word list is now a framed "Find these · n/total" palette panel (pill chips that
  take on each found word's colour) instead of loose text under the grid.
* Size chips use qualitative labels (cosy / balanced / a longer sit) so no count
  can ever contradict the actual puzzle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/WordSearchGame.svelte

@@ -154,12 +154,15 @@
       {/each}
     </div>
 
-    <ul class="words">
-      {#each words as w (w)}
-        <li class:got={found.includes(w)}
-            style={wordColor.has(w) ? `background:${PALETTE[wordColor.get(w)]};color:#2a2f36` : ''}>{w}</li>
-      {/each}
-    </ul>
+    <div class="palette">
+      <p class="plabel">Find these · {foundWords.length}/{words.length}</p>
+      <ul class="words">
+        {#each words as w (w)}
+          <li class:got={found.includes(w)}
+              style={wordColor.has(w) ? `background:${PALETTE[wordColor.get(w)]};color:#2a2f36` : ''}>{w}</li>
+        {/each}
+      </ul>
+    </div>
 
     {#if status === 'done'}
       <div class="result rise">
@@ -183,22 +186,28 @@
   .theme .lbl { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.64rem;
                 font-family: var(--label); color: var(--muted); margin-bottom: 2px; }
   .grid {
-    display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px;
-    width: min(100%, 420px); margin: 0 auto 16px; touch-action: none; user-select: none;
-    -webkit-user-select: none; border-radius: 10px; padding: 6px; background: var(--surface);
-    border: 1px solid var(--line);
+    /* Constant cell size — the board grows with the grid; on a narrow phone the
+       biggest grid gently shrinks to fit the width. */
+    --cell: min(32px, calc((100vw - 44px) / var(--n)));
+    display: grid; grid-template-columns: repeat(var(--n), var(--cell)); gap: 2px;
+    width: fit-content; max-width: 100%; margin: 0 auto 16px; touch-action: none;
+    user-select: none; -webkit-user-select: none; border-radius: 10px; padding: 6px;
+    background: var(--surface); border: 1px solid var(--line);
   }
   .grid.done { opacity: 0.9; }
   .cell {
-    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
-    font-family: var(--label); font-weight: 600; font-size: clamp(0.62rem, 2.7vw, 1rem);
+    width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center;
+    font-family: var(--label); font-weight: 600; font-size: calc(var(--cell) * 0.5);
     color: var(--ink); border-radius: 5px; background: transparent; text-transform: uppercase;
   }
   .cell.sel { background: var(--accent) !important; color: #fff !important; }
-  .words { list-style: none; display: flex; flex-wrap: wrap; gap: 7px 9px; justify-content: center;
-           padding: 0; margin: 0 0 14px; }
-  .words li { font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink);
-              padding: 2px 9px; border-radius: 999px; }
+  .palette { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
+             padding: 12px 14px 14px; margin: 0 auto 16px; max-width: 440px; box-shadow: var(--shadow); }
+  .plabel { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; font-family: var(--label);
+            color: var(--muted); text-align: center; margin: 0 0 10px; }
+  .words { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 0; }
+  .words li { font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink);
+              padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); transition: background 0.2s ease; }
   .hint { text-align: center; color: var(--muted); font-size: 0.84rem; margin: 0; }
   .result { text-align: center; }
   .rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 12px; }