Daily Word keyboard: maxed-out game layout + no-overflow board

From field testing.
* Keyboard redesigned to fill its area like a real phone game: a left block of
  larger, square, alphabetical letter keys (9 per row) + a right column with
  Backspace (top) / Enter (bottom) tucked in. Still flat, warm, on-brand.
  (Alphabetical per request; QWERTY is a one-line swap if it feels off to type.)
* Fixed the few-mm horizontal scroll on Long Word: the tile width budget now
  accounts for the inter-tile gaps + page padding, so the board can never exceed
  the viewport width.
* Board sits up toward the top (flex-start) instead of vertically centered, so
  the taller 6-letter board no longer crowds the keyboard.

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

frontend/src/lib/components/WordGame.svelte

@@ -18,7 +18,7 @@
   let message = $state('');
   let ready = $state(false);          // animate-in once loaded
 
-  const ROWS = 'qwertyuiop|asdfghjkl|zxcvbnm'.split('|').map((r) => r.split(''));
+  const LETTERS = 'abcdefghijklmnopqrstuvwxyz'.split('');
 
   const stateKey = $derived(`goodnews:word:${variant}:${date}`);
   const statsKey = $derived(`goodnews:word:${variant}:stats`);
@@ -188,15 +188,15 @@
 
     {#if status === 'playing'}
       <div class="keyboard">
-        {#each ROWS as row, ri (ri)}
-          <div class="krow">
-            {#if ri === 2}<button class="key wide enter" onclick={() => key('enter')} aria-label="Enter">↵</button>{/if}
-            {#each row as k (k)}
-              <button class="key {keyState[k] || ''}" onclick={() => key(k)}>{k.toUpperCase()}</button>
-            {/each}
-            {#if ri === 2}<button class="key wide" onclick={() => key('back')} aria-label="Backspace">⌫</button>{/if}
-          </div>
-        {/each}
+        <div class="letters">
+          {#each LETTERS as k (k)}
+            <button class="key {keyState[k] || ''}" onclick={() => key(k)}>{k.toUpperCase()}</button>
+          {/each}
+        </div>
+        <div class="controls">
+          <button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">⌫</button>
+          <button class="key ctl enter" onclick={() => key('enter')}>ENTER</button>
+        </div>
       </div>
     {/if}
   {/if}
@@ -221,38 +221,43 @@
     text-align: center; background: var(--ink); color: #fff; border-radius: 8px;
     padding: 7px 14px; width: fit-content; margin: 0 auto 12px; font-size: 0.86rem;
   }
-  /* Flat, warm, on-brand keys — off-white with a hairline border, soft radius,
-     no heavy raised shadow. Centered, never a full-bleed slab. */
-  .keyboard { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 0; max-width: 430px; }
-  .krow { display: flex; gap: 5px; justify-content: center; }
+  /* Keyboard fills its area like a real phone game: a left block of square,
+     alphabetical letter keys + a right column with Backspace (top) / Enter
+     (bottom) tucked in. Flat, warm, on-brand keys — off-white, hairline border. */
+  .keyboard { display: flex; align-items: stretch; gap: 6px; margin: 10px auto 0; max-width: 440px; }
+  .letters { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
+  .controls { display: grid; grid-template-rows: 1fr 1fr; gap: 5px; width: 50px; flex-shrink: 0; }
   .key {
-    flex: 1; min-width: 0; max-width: 42px; height: 48px; border: 1px solid var(--line); border-radius: 11px;
-    background: var(--surface); color: var(--ink); font-family: var(--label); font-weight: 600;
-    font-size: 0.92rem; cursor: pointer; text-transform: uppercase; transition: background 0.12s ease, transform 0.05s ease;
+    border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
+    font-family: var(--label); font-weight: 600; font-size: 0.95rem; cursor: pointer; text-transform: uppercase;
+    padding: 0; transition: background 0.12s ease, transform 0.05s ease;
   }
   .key:active { transform: translateY(1px); background: var(--bg); }
-  .key.wide { max-width: 56px; font-size: 1.1rem; }
-  .key.enter { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
+  .letters .key { aspect-ratio: 1; min-width: 0; }
+  .controls .key { height: 100%; font-size: 0.62rem; letter-spacing: 0.03em; }
+  .controls .back { font-size: 1.2rem; }
+  .controls .enter { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
   .key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; }
   .key.present { background: #d8b24a; border-color: #d8b24a; color: #fff; }
   .key.absent { background: #9aa6b2; border-color: #9aa6b2; color: #fff; }
   .key:hover { filter: brightness(0.98); }
   .muted { color: var(--muted); text-align: center; }
 
-  /* Mobile: a focused app screen — board sizes to fit BOTH width and the height
-     left above the keyboard, so the active row + keyboard are always visible. */
+  /* Mobile: a focused app screen — board sits up top and sizes to fit BOTH width
+     (never overflows → no horizontal scroll) and the height left above the
+     keyboard, so the active row + keyboard are always visible. */
   @media (max-width: 720px) {
     .wordgame { display: flex; flex-direction: column; height: 100%; max-width: 100%; }
     .play-area { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
-                 justify-content: center; padding: 4px 0; }
+                 justify-content: flex-start; padding: 8px 0 4px; }
     .board {
-      --tile: min(58px, calc((100vw - 44px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
+      --tile: min(58px, calc((100vw - 56px) / var(--cols)), calc((100dvh - 290px) / var(--rows)));
       gap: 4px; width: fit-content; margin: 0 auto 10px;
     }
     .row { grid-template-columns: repeat(var(--cols), var(--tile)); gap: 4px; }
     .tile { width: var(--tile); height: var(--tile); aspect-ratio: auto; font-size: calc(var(--tile) * 0.46); }
-    .keyboard { flex-shrink: 0; margin: 8px auto calc(env(safe-area-inset-bottom) + 4px); gap: 5px; }
-    .key { height: 46px; }
+    .keyboard { flex-shrink: 0; gap: 5px; margin: 8px auto calc(env(safe-area-inset-bottom) + 4px); }
+    .controls { width: 46px; }
   }
   .result { text-align: center; }
   .rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }