Play: Game-Selection step + mobile sticky on-brand keyboard

Mobile polish for the games.
* New flow: Play Hub → Game Selection → Game. The 5/6 (word) and S/M/L (search)
  pickers move OFF the game screen onto a selection screen that shows each
  option's today-status. Back-button reads "Game Selection" in a game and
  "Play Hub" on the selection screen — buys vertical room for the keyboard.
* Daily Word on mobile now fills the height: the board scrolls in the middle and
  the keyboard is pinned at the bottom, always reachable (no scrolling down to
  type). Desktop stays inline.
* Keyboard restyled on-brand: warm cream keys (was cool generic grey), the label
  font, an accent-tinted Enter, and the same green/gold/grey feedback as the
  tiles; full-bleed, tactile press, safe-area aware.

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

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

@@ -4,14 +4,15 @@
   import WordGame from '$lib/components/WordGame.svelte';
   import WordSearchGame from '$lib/components/WordSearchGame.svelte';
 
-  let view = $state('hub'); // 'hub' | 'word' | 'wordsearch'
+  let view = $state('hub');      // 'hub' | 'select' | 'play'
+  let game = $state('word');     // 'word' | 'wordsearch'
   let variant = $state('5');
   let wsSize = $state('med');
   let date = $state('');
-  let wordStatus = $state({ 5: null, 6: null }); // null | {status, tries, max}
-  let wsStatus = $state(null);                    // null | {status, found, ms}
+  let wordStatus = $state({ 5: null, 6: null });
+  let wsStatus = $state(null);
 
-  function readStatus(v) {
+  function readWord(v) {
     try {
       const s = JSON.parse(localStorage.getItem(`goodnews:word:${v}:${date}`) || 'null');
       if (s && (s.status === 'won' || s.status === 'lost')) {
@@ -20,50 +21,71 @@
     } catch { /* ignore */ }
     return null;
   }
-  function readWs() {
-    let inProgress = null;
-    for (const sz of ['small', 'med', 'large']) {
-      try {
-        const s = JSON.parse(localStorage.getItem(`goodnews:wordsearch:${sz}:${date}`) || 'null');
-        if (s && Array.isArray(s.foundWords)) {
-          const st = { status: s.status, found: s.foundWords.length, ms: s.ms };
-          if (st.status === 'done') return st;          // prefer a finished one
-          if (st.found > 0 && !inProgress) inProgress = st;
-        }
-      } catch { /* ignore */ }
-    }
-    return inProgress;
+  function readWsSize(sz) {
+    try {
+      const s = JSON.parse(localStorage.getItem(`goodnews:wordsearch:${sz}:${date}`) || 'null');
+      if (s && Array.isArray(s.foundWords)) return { status: s.status, found: s.foundWords.length, ms: s.ms };
+    } catch { /* ignore */ }
+    return null;
   }
   function refreshStatus() {
-    wordStatus = { 5: readStatus('5'), 6: readStatus('6') };
-    wsStatus = readWs();
+    wordStatus = { 5: readWord('5'), 6: readWord('6') };
+    let ws = null;
+    for (const sz of ['small', 'med', 'large']) {
+      const s = readWsSize(sz);
+      if (s && s.status === 'done') { ws = s; break; }
+      if (s && s.found > 0 && !ws) ws = s;
+    }
+    wsStatus = ws;
   }
   function fmtMs(ms) {
     const s = Math.round(ms / 1000);
     return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0');
   }
-  function wsLabel() {
+
+  // Hub card one-liners
+  function wordLabel() {
+    const a = wordStatus['5'], b = wordStatus['6'];
+    if (!a && !b) return 'Guess the day’s word';
+    const part = (s, mx) => s ? (s.status === 'won' ? `${s.tries}/${mx}` : 'X') : '–';
+    return `Today · 5:${part(a, 6)}  6:${part(b, 7)}`;
+  }
+  function wsHubLabel() {
     if (!wsStatus) return 'Find the day’s themed words';
     if (wsStatus.status === 'done') return `Today: cleared${wsStatus.ms ? ' · ' + fmtMs(wsStatus.ms) : ''}`;
     if (wsStatus.found > 0) return `Today: ${wsStatus.found} found`;
     return 'Find the day’s themed words';
   }
 
-  function wordLabel() {
-    const a = wordStatus['5'], b = wordStatus['6'];
-    const done = [a, b].filter(Boolean);
-    if (done.length === 0) return 'Play today’s word';
-    const parts = [];
-    if (a) parts.push(`5·${a.status === 'won' ? a.tries + '/6' : 'X'}`);
-    if (b) parts.push(`6·${b.status === 'won' ? b.tries + '/7' : 'X'}`);
-    return `Today: ${parts.join('  ')}`;
+  // Game-selection option statuses
+  function wordOpt(v) {
+    const s = wordStatus[v];
+    if (!s) return 'Play';
+    return s.status === 'won' ? `Solved ${s.tries}/${s.max}` : 'Out of guesses';
+  }
+  function wsOpt(sz) {
+    const s = readWsSize(sz);
+    if (!s) return 'Play';
+    if (s.status === 'done') return `Cleared${s.ms ? ' · ' + fmtMs(s.ms) : ''}`;
+    if (s.found > 0) return `${s.found} found`;
+    return 'Play';
   }
 
+  function openGame(g) { game = g; view = 'select'; refreshStatus(); }
+  function pick(v) { if (game === 'word') variant = v; else wsSize = v; view = 'play'; }
+  function back() {
+    view = view === 'play' ? 'select' : 'hub';
+    refreshStatus();
+  }
+
+  const WS_OPTS = [
+    ['small', 'Small', 'cosy · 8×8'],
+    ['med', 'Medium', 'balanced · 11×11'],
+    ['large', 'Large', 'a longer sit · 14×14'],
+  ];
+
   onMount(async () => {
-    try {
-      const p = await getJSON('/api/puzzle/word?variant=5');
-      date = p.date;
-    } catch { /* offline — game view will surface it */ }
+    try { date = (await getJSON('/api/puzzle/word?variant=5')).date; } catch { /* offline */ }
     refreshStatus();
   });
 </script>
@@ -73,22 +95,22 @@
 <header class="bar">
   <div class="container inner">
     <a class="brand" href="/"><img class="logo" src="/logo.svg" alt="Upbeat Bytes" /></a>
-    {#if view !== 'hub'}
-      <button class="back" onclick={() => { view = 'hub'; refreshStatus(); }}>
-        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>Play hub
-      </button>
-    {:else}
+    {#if view === 'hub'}
       <a class="back" href="/"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>News</a>
+    {:else}
+      <button class="back" onclick={back}>
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>{view === 'play' ? 'Game Selection' : 'Play Hub'}
+      </button>
     {/if}
   </div>
 </header>
 
-<main class="container page">
+<main class="container page" class:gameview={view === 'play' && game === 'word'}>
   {#if view === 'hub'}
     <h1>Play</h1>
     <p class="sub">A small calm thing after the brief. One of each a day — no rush, no score to beat but your own.</p>
     <div class="cards">
-      <button class="gamecard" onclick={() => (view = 'word')}>
+      <button class="gamecard" onclick={() => openGame('word')}>
         <div class="gc-icon">◧</div>
         <div class="gc-body">
           <h2>Daily Word</h2>
@@ -96,28 +118,45 @@
           <p class="gc-status" class:played={wordStatus['5'] || wordStatus['6']}>{wordLabel()}</p>
         </div>
       </button>
-      <button class="gamecard" onclick={() => (view = 'wordsearch')}>
+      <button class="gamecard" onclick={() => openGame('wordsearch')}>
         <div class="gc-icon">▦</div>
         <div class="gc-body">
           <h2>Word Search</h2>
           <p class="gc-sub">Find the day’s themed words</p>
-          <p class="gc-status" class:played={wsStatus && (wsStatus.status === 'done' || wsStatus.found > 0)}>{wsLabel()}</p>
+          <p class="gc-status" class:played={wsStatus && (wsStatus.status === 'done' || wsStatus.found > 0)}>{wsHubLabel()}</p>
         </div>
       </button>
     </div>
-  {:else if view === 'word'}
-    <div class="variant">
-      <button class="vchip" class:on={variant === '5'} onclick={() => (variant = '5')}>Daily Word<span>5 letters · 6 guesses</span></button>
-      <button class="vchip" class:on={variant === '6'} onclick={() => (variant = '6')}>Long Word<span>6 letters · 7 guesses</span></button>
+
+  {:else if view === 'select'}
+    <h1 class="seltitle">{game === 'word' ? 'Daily Word' : 'Word Search'}</h1>
+    <p class="sub">{game === 'word' ? 'Pick your length.' : 'Pick your size.'}</p>
+    <div class="opts">
+      {#if game === 'word'}
+        <button class="opt" onclick={() => pick('5')}>
+          <span class="opt-main"><strong>Daily Word</strong><span>5 letters · 6 guesses</span></span>
+          <span class="opt-go" class:done={wordStatus['5']}>{wordOpt('5')}</span>
+        </button>
+        <button class="opt" onclick={() => pick('6')}>
+          <span class="opt-main"><strong>Long Word</strong><span>6 letters · 7 guesses</span></span>
+          <span class="opt-go" class:done={wordStatus['6']}>{wordOpt('6')}</span>
+        </button>
+      {:else}
+        {#each WS_OPTS as [sz, name, desc] (sz)}
+          <button class="opt" onclick={() => pick(sz)}>
+            <span class="opt-main"><strong>{name}</strong><span>{desc}</span></span>
+            <span class="opt-go" class:done={readWsSize(sz)}>{wsOpt(sz)}</span>
+          </button>
+        {/each}
+      {/if}
     </div>
-    <WordGame {variant} onstatus={refreshStatus} />
-  {:else if view === 'wordsearch'}
-    <div class="variant">
-      <button class="vchip" class:on={wsSize === 'small'} onclick={() => (wsSize = 'small')}>Small<span>cosy</span></button>
-      <button class="vchip" class:on={wsSize === 'med'} onclick={() => (wsSize = 'med')}>Medium<span>balanced</span></button>
-      <button class="vchip" class:on={wsSize === 'large'} onclick={() => (wsSize = 'large')}>Large<span>a longer sit</span></button>
-    </div>
-    <WordSearchGame size={wsSize} onstatus={refreshStatus} />
+
+  {:else if view === 'play'}
+    {#if game === 'word'}
+      <WordGame {variant} onstatus={refreshStatus} />
+    {:else}
+      <WordSearchGame size={wsSize} onstatus={refreshStatus} />
+    {/if}
   {/if}
 </main>
 
@@ -130,6 +169,7 @@
   .back svg { width: 17px; height: 17px; display: block; }
   .page { padding: 22px 20px 70px; }
   h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 6px 0 6px; }
+  .seltitle { font-size: clamp(1.7rem, 4.5vw, 2.2rem); }
   .sub { color: var(--muted); margin: 0 0 24px; max-width: 540px; }
 
   .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
@@ -145,13 +185,27 @@
   .gc-sub { color: var(--muted); font-size: 0.86rem; margin: 0 0 8px; }
   .gc-status { font-size: 0.84rem; color: var(--accent-deep); font-weight: 600; margin: 0; }
 
-  .variant { display: flex; gap: 10px; justify-content: center; margin: 0 0 22px; }
-  .vchip {
-    display: flex; flex-direction: column; align-items: center; gap: 2px;
-    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
-    border-radius: 12px; padding: 8px 18px; font: inherit; font-weight: 600; cursor: pointer;
+  /* Game-selection options */
+  .opts { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
+  .opt {
+    display: flex; align-items: center; justify-content: space-between; gap: 14px;
+    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
+    padding: 16px 18px; cursor: pointer; font: inherit; color: var(--ink);
+    box-shadow: var(--shadow); transition: border-color 0.14s ease, transform 0.14s ease;
+  }
+  .opt:hover { border-color: var(--accent); transform: translateY(-1px); }
+  .opt-main { display: flex; flex-direction: column; text-align: left; }
+  .opt-main strong { font-size: 1.1rem; }
+  .opt-main span { color: var(--muted); font-size: 0.82rem; }
+  .opt-go { flex-shrink: 0; font-size: 0.82rem; font-weight: 600; color: #fff; background: var(--accent);
+            border-radius: 999px; padding: 6px 14px; }
+  .opt-go.done { background: var(--accent-soft); color: var(--accent-deep); }
+
+  /* Full-height game layout on mobile so the keyboard is always reachable. */
+  @media (max-width: 720px) {
+    .page.gameview {
+      height: calc(100dvh - 64px); padding: 10px 16px 0;
+      display: flex; flex-direction: column; overflow: hidden;
+    }
   }
-  .vchip span { font-weight: 400; font-size: 0.72rem; color: var(--muted); }
-  .vchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
-  .vchip.on span { color: rgba(255,255,255,0.8); }
 </style>