diff --git a/frontend/src/lib/components/WordGame.svelte b/frontend/src/lib/components/WordGame.svelte
index dba4e6f..6b0053e 100644
--- a/frontend/src/lib/components/WordGame.svelte
+++ b/frontend/src/lib/components/WordGame.svelte
@@ -19,7 +19,7 @@
   let message = $state('');
   let ready = $state(false);          // animate-in once loaded
 
-  const LETTERS = 'abcdefghijklmnopqrstuvwxyz'.split('');
+  const ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'].map((r) => r.split(''));
 
   const stateKey = $derived(`goodnews:word:${variant}:${date}`);
   const statsKey = $derived(`goodnews:word:${variant}:stats`);
@@ -191,15 +191,21 @@
     </div>
 
     {#if status === 'playing'}
-      <div class="keyboard">
-        <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 class="kbzone">
+        <div class="keyboard">
+          <div class="letters">
+            {#each ROWS as row, ri (ri)}
+              <div class="krow">
+                {#each row as k (k)}
+                  <button class="key {keyState[k] || ''}" onclick={() => key(k)}>{k.toUpperCase()}</button>
+                {/each}
+              </div>
+            {/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')} aria-label="Enter">↵</button>
+          </div>
         </div>
       </div>
     {/if}
@@ -238,19 +244,23 @@
   /* 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: 7px; margin: 12px auto 0; max-width: 460px; }
-  .letters { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
-  .controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 58px; flex-shrink: 0; }
+  .kbzone { display: block; }
+  .keyboard {
+    --kw: min(44px, calc((100vw - 126px) / 10));   /* uniform key width; row 1 (10) fills */
+    display: flex; align-items: stretch; gap: 6px; width: 100%; max-width: 470px; margin: 12px auto 0;
+  }
+  .letters { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+  .krow { display: flex; gap: 4px; justify-content: center; }       /* shorter rows auto-centre */
+  .controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 42px; flex-shrink: 0; }
   .key {
-    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
-    font-family: var(--label); font-weight: 700; font-size: 1.18rem; cursor: pointer; text-transform: uppercase;
+    border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
+    font-family: var(--label); font-weight: 700; font-size: 1.05rem; cursor: pointer; text-transform: uppercase;
     padding: 0; box-shadow: 0 2px 0 rgba(120, 108, 84, 0.22), 0 3px 6px rgba(60, 50, 30, 0.07);
     transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease, filter 0.12s ease;
   }
   .key:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bg); }
-  .letters .key { min-width: 0; height: 52px; }
-  .controls .key { height: 100%; font-size: 0.66rem; letter-spacing: 0.04em; }
-  .controls .back { font-size: 1.35rem; }
+  .krow .key { width: var(--kw); height: 50px; }
+  .controls .key { width: 100%; height: 100%; font-size: 1.3rem; }
   .controls .enter { background: var(--accent); border-color: var(--accent); color: #fff;
                      box-shadow: 0 2px 0 var(--accent-deep), 0 3px 6px rgba(0, 131, 173, 0.18); }
   .key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; box-shadow: 0 2px 0 #3a7d56; }
@@ -264,23 +274,21 @@
      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: flex-start; padding: 8px 0 4px; scrollbar-width: none; }
+    .play-area { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
+                 justify-content: flex-start; padding: 8px 0 0; scrollbar-width: none; }
     .play-area::-webkit-scrollbar { display: none; }  /* no stray scrollbar "divider" */
     .board {
       /* budget covers page padding + inter-tile gaps so 6 letters never overflow */
       --tile: min(64px, calc((100vw - 64px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
-      gap: 5px; width: fit-content; margin: 0 auto 10px;
+      gap: 5px; width: fit-content; margin: 0 auto;
     }
     .row { grid-template-columns: repeat(var(--cols), var(--tile)); gap: 5px; }
     .tile { width: var(--tile); height: var(--tile); aspect-ratio: auto; font-size: calc(var(--tile) * 0.46); }
-    /* Full width so the keys aren't squished — auto side margins on a flex item
-       shrink it to content and leave dead horizontal space. */
-    .keyboard { flex-shrink: 0; width: 100%; max-width: none; align-self: stretch; gap: 6px;
-                margin: 10px 0 calc(env(safe-area-inset-bottom) + 6px); }
-    .letters { gap: 5px; }
-    .letters .key { height: 50px; }
-    .controls { width: 48px; }
+    /* Float the keyboard up, centered in the space below the board. */
+    .kbzone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
+              padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
+    .keyboard { --kw: min(44px, calc((100vw - 120px) / 10)); width: 100%; max-width: none; margin: 0; }
+    .krow .key { height: 47px; }
   }
   .result { text-align: center; }
   .rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }