Daily Word mobile: true viewport + flat warm keyboard + height-aware tiles

Make Daily Word feel like a focused mobile app screen, not a page with a keyboard.
* True viewport: while view==='play' && game==='word', a $effect locks body scroll
  and hides the site footer (mobile only), so the keyboard is genuinely pinned, not
  riding the document scroll. Effect cleanup ALWAYS removes the class on re-run or
  unmount, so leaving /play (back button OR any navigation) can never strand it.
* Keyboard restyled on-brand + modern: flat off-white (--surface) keys with a
  hairline border, soft 11px radius, no heavy raised shadow, ~46px tall, ↵ / ⌫
  glyphs, centered (max-width 430) instead of a full-bleed beige slab.
* Tiles now size to fit BOTH width and the height left above the keyboard
  (--tile = min(cap, width/cols, (100dvh-budget)/rows), gap 4px), so the active row
  and keyboard are always visible — Long Word's 6×7 gets slightly smaller tiles.

Real-device Safari/Chrome is the final check (100dvh + safe-area handling).

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

frontend/src/app.css

@@ -65,3 +65,12 @@ button { font-family: inherit; cursor: pointer; }
 @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
 .rise { animation: rise 0.5s ease both; }
 @media (prefers-reduced-motion: reduce) { .rise { animation: none; } html { scroll-behavior: auto; } }
+
+/* Daily Word on mobile becomes a focused, full-viewport screen: lock body scroll
+   and hide the site footer so the on-screen keyboard is truly pinned (not riding
+   the page's scroll). The .playing-word class is toggled by /play and always
+   removed on navigation via effect cleanup. Mobile only — desktop is unaffected. */
+@media (max-width: 720px) {
+  html.playing-word, html.playing-word body { overflow: hidden; }
+  html.playing-word footer.site { display: none; }
+}

frontend/src/lib/components/WordGame.svelte

@@ -154,7 +154,7 @@
     <p class="muted">Loading today’s puzzle…</p>
   {:else}
     <div class="play-area">
-      <div class="board" style="--len:{length}">
+      <div class="board" style="--cols:{length}; --rows:{maxGuesses}">
         {#each Array(maxGuesses) as _, r (r)}
           {@const g = guesses[r]}
           {@const cs = cols[r] || null}
@@ -190,7 +190,7 @@
       <div class="keyboard">
         {#each ROWS as row, ri (ri)}
           <div class="krow">
-            {#if ri === 2}<button class="key wide enter" onclick={() => key('enter')}>Enter</button>{/if}
+            {#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}
@@ -206,7 +206,7 @@
   .wordgame { max-width: 480px; margin: 0 auto; opacity: 0; transform: translateY(6px); }
   .wordgame.ready { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.3s ease; }
   .board { display: grid; gap: 6px; margin: 0 auto 18px; width: min(100%, 340px); }
-  .row { display: grid; grid-template-columns: repeat(var(--len), 1fr); gap: 6px; }
+  .row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; }
   .tile {
     aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
     border: 2px solid var(--line); border-radius: 8px; font-family: var(--label);
@@ -221,33 +221,38 @@
     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;
   }
-  .keyboard { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
+  /* 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; }
   .key {
-    flex: 1; min-width: 0; max-width: 44px; height: 54px; border: none; border-radius: 8px;
+    flex: 1; min-width: 0; max-width: 42px; height: 48px; border: 1px solid var(--line); border-radius: 11px;
-    background: #e9e2d4; color: var(--ink); font-family: var(--label); font-weight: 600;
+    background: var(--surface); color: var(--ink); font-family: var(--label); font-weight: 600;
-    font-size: 1rem; cursor: pointer; text-transform: uppercase;
+    font-size: 0.92rem; cursor: pointer; text-transform: uppercase; transition: background 0.12s ease, transform 0.05s ease;
-    box-shadow: 0 1.5px 0 rgba(70, 58, 36, 0.16); transition: background 0.12s ease, transform 0.05s ease;
   }
-  .key:active { transform: translateY(1px); box-shadow: none; }
+  .key:active { transform: translateY(1px); background: var(--bg); }
-  .key.wide { max-width: 66px; font-size: 0.68rem; letter-spacing: 0.03em; }
+  .key.wide { max-width: 56px; font-size: 1.1rem; }
-  .key.enter { background: var(--accent-soft); color: var(--accent-deep); }
+  .key.enter { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
-  .key.correct { background: #4a9d6e; color: #fff; box-shadow: 0 1.5px 0 rgba(40, 90, 60, 0.32); }
+  .key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; }
-  .key.present { background: #d8b24a; color: #fff; box-shadow: 0 1.5px 0 rgba(150, 110, 20, 0.32); }
+  .key.present { background: #d8b24a; border-color: #d8b24a; color: #fff; }
-  .key.absent { background: #9aa6b2; color: #fff; box-shadow: 0 1.5px 0 rgba(80, 90, 100, 0.32); }
+  .key.absent { background: #9aa6b2; border-color: #9aa6b2; color: #fff; }
-  .key:hover { filter: brightness(0.97); }
+  .key:hover { filter: brightness(0.98); }
   .muted { color: var(--muted); text-align: center; }
 
-  /* Mobile: fill the height — board scrolls in the middle, keyboard pinned at the
+  /* Mobile: a focused app screen — board sizes to fit BOTH width and the height
-     bottom and always reachable (full-bleed, on-brand, safe-area aware). */
+     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; }
-    .board { margin-bottom: 12px; }
+    .board {
-    .keyboard { flex-shrink: 0; margin: 6px -16px 0; gap: 6px; background: var(--bg);
+      --tile: min(58px, calc((100vw - 44px) / var(--cols)), calc((100dvh - 300px) / var(--rows)));
-                border-top: 1px solid var(--line); padding: 9px 6px calc(9px + env(safe-area-inset-bottom)); }
+      gap: 4px; width: fit-content; margin: 0 auto 10px;
-    .key { height: 50px; }
+    }
+    .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; }
   }
   .result { text-align: center; }
   .rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }

frontend/src/routes/play/+page.svelte

@@ -73,6 +73,16 @@
 
   function openGame(g) { game = g; view = 'select'; refreshStatus(); }
   function pick(v) { if (game === 'word') variant = v; else wsSize = v; view = 'play'; }
+
+  // Daily Word on mobile = a focused viewport: lock scroll + hide footer. Cleanup
+  // ALWAYS removes the class (re-run or unmount), so leaving /play can't strand it.
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    if (view === 'play' && game === 'word') {
+      document.documentElement.classList.add('playing-word');
+      return () => document.documentElement.classList.remove('playing-word');
+    }
+  });
   function back() {
     view = view === 'play' ? 'select' : 'hub';
     refreshStatus();