diff --git a/frontend/src/lib/components/WordGame.svelte b/frontend/src/lib/components/WordGame.svelte
index 9d043b5..dba4e6f 100644
--- a/frontend/src/lib/components/WordGame.svelte
+++ b/frontend/src/lib/components/WordGame.svelte
@@ -265,16 +265,22 @@
   @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; }
+                 justify-content: flex-start; padding: 8px 0 4px; scrollbar-width: none; }
+    .play-area::-webkit-scrollbar { display: none; }  /* no stray scrollbar "divider" */
     .board {
-      --tile: min(64px, calc((100vw - 56px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
+      /* 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;
     }
     .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); }
-    .keyboard { flex-shrink: 0; gap: 6px; margin: 10px auto calc(env(safe-area-inset-bottom) + 6px); }
+    /* 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: 50px; }
+    .controls { width: 48px; }
   }
   .result { text-align: center; }
   .rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }