Word Search select: put Today's theme in a standout accent card

The theme was floating between the title and the size options; give it its own
soft accent-tinted card so it reads as the day's headline, distinct from the
size choices.

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

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

@@ -169,7 +169,10 @@
   {:else if view === 'select'}
     <h1 class="seltitle">{game === 'word' ? 'Daily Word' : 'Word Search'}</h1>
     {#if game === 'wordsearch' && wsTheme}
-      <p class="wstheme"><span>Today’s theme</span>{wsTheme}</p>
+      <div class="themecard">
+        <span class="tc-label">Today’s theme</span>
+        <span class="tc-name">{wsTheme}</span>
+      </div>
     {/if}
     <p class="sub">{game === 'word' ? 'Pick your length.' : 'Pick your size.'}</p>
     <div class="opts">
@@ -212,9 +215,11 @@
   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; }
-  .wstheme { font-family: var(--serif); font-size: 1.6rem; color: var(--accent-deep); margin: 4px 0 18px; }
-  .wstheme span { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem;
-                  font-family: var(--label); color: var(--muted); margin-bottom: 3px; }
+  .themecard { background: var(--accent-soft); border-radius: 16px; padding: 16px 22px;
+               margin: 8px 0 24px; max-width: 460px; text-align: center; box-shadow: var(--shadow); }
+  .tc-label { display: block; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.66rem;
+              font-family: var(--label); font-weight: 600; color: var(--accent-deep); margin-bottom: 4px; }
+  .tc-name { font-family: var(--serif); font-size: 1.7rem; color: var(--accent-deep); line-height: 1.15; }
 
   .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
   .gamecard {