diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte
index fb43544..15ad61d 100644
--- a/frontend/src/routes/play/+page.svelte
+++ b/frontend/src/routes/play/+page.svelte
@@ -5,8 +5,7 @@
   import { getJSON } from '$lib/api.js';
   import HubBar from '$lib/components/HubBar.svelte';
   import { pushGameStatesBatch } from '$lib/gamesync.js';
-  import { ritualState } from '$lib/ritual.js';
-  import { prefs, initPrefs } from '$lib/prefs.svelte.js';
+  import { initPrefs } from '$lib/prefs.svelte.js';
   import { auth } from '$lib/auth.svelte.js';
   import { isDevGated, blockedForViewer } from '$lib/devgate.js';
   import { trackGame } from '$lib/analytics.js';
@@ -41,9 +40,6 @@
   let date = $state('');
   let wordStatus = $state({ 5: null, 6: null });
   let wsStatus = $state(null);
-  // Daily Ritual ("today's calm set") — Brief · Daily Word · Word Search, keyed
-  // on the server puzzle date; the Brief tick is set on the home end-cap, read here.
-  let ritual = $state({ items: [], count: 0, total: 0 });
 
   function readWord(v) {
     try {
@@ -105,7 +101,6 @@
     wsStatus = ws;
     bloomStatus = readBloom();
     matchStatus = readMatch();
-    if (date) ritual = ritualState(date, prefs.data.ritual);
   }
   function fmtMs(ms) {
     const s = Math.round(ms / 1000);
@@ -286,68 +281,84 @@
     {view === 'hub' ? 'Back' : (view === 'play' ? 'Game Selection' : 'Play Hub')}
   </button>
   {#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>
-    {#if date && ritual.total}
-      <div class="calmset">
-        <p class="cs-head">Today's calm set</p>
-        <ul class="cs-items">
-          {#each ritual.items as it (it.key)}
-            <li class="cs-item" class:done={it.done}>
-              <span class="cs-mark" aria-hidden="true"></span>{#if it.done}{it.label}{:else}<a href={it.href}>{it.label}</a>{/if}
-            </li>
+    <div class="arcade-head">
+      <span class="eyelash" aria-hidden="true"></span>
+      <h1 class="play-title">Play</h1>
+      <span class="head-div" aria-hidden="true"></span>
+      <p class="head-sub">A few little games, fresh every morning. Pick one and dive in.</p>
+    </div>
+
+    <div class="arcade">
+      <button class="tile tile-word" onclick={() => openGame('word')}>
+        <span class="motif m-word" aria-hidden="true">
+          {#each ['B', 'Y', 'T', 'E', '', '', '', '', '', ''] as ch}
+            <span class="wt" class:on={ch}>{ch}</span>
           {/each}
-        </ul>
-        <p class="cs-foot">{ritual.count === ritual.total ? `All ${ritual.total} enjoyed today` : `${ritual.count} of ${ritual.total} enjoyed today`} · fresh set tomorrow · <a class="cs-edit" href="/account?section=calmset">make it yours</a></p>
-      </div>
-    {/if}
-    <div class="cards">
-      <button class="gamecard" onclick={() => openGame('word')}>
-        <div class="gc-icon">◧</div>
-        <div class="gc-body">
-          <h2>Daily Word</h2>
-          <p class="gc-sub">Guess the hopeful word · 5 or 6 letters</p>
-          <p class="gc-status" class:played={wordStatus['5'] || wordStatus['6']}>{wordLabel()}</p>
-        </div>
+        </span>
+        <span class="foot">
+          <span class="t-name">Daily Word</span>
+          <span class="t-clue">Today’s word · 5 or 6 letters</span>
+        </span>
       </button>
-      <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)}>{wsHubLabel()}</p>
-        </div>
+
+      <button class="tile tile-ws" onclick={() => openGame('wordsearch')}>
+        <span class="motif m-ws" aria-hidden="true">
+          <span class="wrow">G A M E S</span>
+          <span class="wrow hl">B Y T E S</span>
+          <span class="wrow">W O R D S</span>
+          <span class="wrow">S O L V E</span>
+        </span>
+        <span class="foot">
+          <span class="t-name">Word Search</span>
+          <span class="t-clue">Today’s themed grid</span>
+        </span>
       </button>
+
       {#if !bloomBlocked}
-        <button class="gamecard" onclick={() => openGame('bloom')}>
-          <div class="gc-icon">✿</div>
-          <div class="gc-body">
-            <h2>Bloom{#if isDevGated('bloom')}<span class="devtag">dev</span>{/if}</h2>
-            <p class="gc-sub">Make words from today’s letters</p>
-            <p class="gc-status" class:played={bloomStatus && bloomStatus.count > 0}>{bloomHubLabel()}</p>
-          </div>
+        <button class="tile tile-bloom" onclick={() => openGame('bloom')}>
+          <span class="motif m-bloom" aria-hidden="true">
+            <span class="petal pc">T</span>
+            <span class="petal p1">A</span><span class="petal p2">E</span><span class="petal p3">G</span>
+            <span class="petal p4">L</span><span class="petal p5">R</span><span class="petal p6">Y</span>
+          </span>
+          <span class="foot">
+            <span class="t-name">Bloom{#if isDevGated('bloom')}<span class="devtag">dev</span>{/if}</span>
+            <span class="t-clue">Today’s letter garden</span>
+          </span>
         </button>
       {/if}
+
       {#if !matchBlocked}
-        <button class="gamecard" onclick={() => openGame('match')}>
-          <div class="gc-icon">⧉</div>
-          <div class="gc-body">
-            <h2>Memory Match{#if isDevGated('match')}<span class="devtag">dev</span>{/if}</h2>
-            <p class="gc-sub">Find the pairs — icons or colors</p>
-            <p class="gc-status" class:played={matchStatus}>{matchHubLabel()}</p>
-          </div>
+        <button class="tile tile-match" onclick={() => openGame('match')}>
+          <span class="motif m-match" aria-hidden="true">
+            {#each [0, 1, 2, 3, 4, 5, 6, 7] as i}
+              <span class="mm" class:flip={i === 1 || i === 6}>{#if i === 1 || i === 6}<span class="dot"></span>{/if}</span>
+            {/each}
+          </span>
+          <span class="foot">
+            <span class="t-name">Memory Match{#if isDevGated('match')}<span class="devtag">dev</span>{/if}</span>
+            <span class="t-clue">Today’s board</span>
+          </span>
         </button>
       {/if}
-      {#if !blockedForViewer('zen', auth.user, $page.url)}
-        <a class="gamecard zencard" href="/zen">
-          <div class="gc-icon">🐟</div>
-          <div class="gc-body">
-            <h2>Zen Den{#if isDevGated('zen')}<span class="devtag">dev</span>{/if}</h2>
-            <p class="gc-sub">A calm corner — drop in with UB</p>
-            <p class="gc-status zen">Visit · no scores, just quiet</p>
-          </div>
-        </a>
-      {/if}
+
+      <!-- teased, not built yet -->
+      <div class="tile tile-bubble soon">
+        <span class="motif m-bubble" aria-hidden="true">
+          {#each ['a', 'b', 'c', 'd', 'a', 'd', 'c', 'b', 'a', 'c', 'b', 'd'] as k}<span class="bub b-{k}"></span>{/each}
+        </span>
+        <span class="ribbon">Coming soon</span>
+        <span class="foot">
+          <span class="t-name">Bubble Blaster</span>
+          <span class="t-clue">A gentle bubble-pop puzzle</span>
+        </span>
+      </div>
+
+      <div class="tile tile-more soon">
+        <span class="more-plus" aria-hidden="true">+</span>
+        <span class="t-name">More coming soon</span>
+        <span class="t-clue">Little games in the workshop</span>
+      </div>
     </div>
 
   {:else if view === 'select'}
@@ -455,51 +466,74 @@
          font-size: 0.7rem; color: var(--muted); }
   .tc-name { font-family: var(--serif); font-size: 1.7rem; color: var(--accent-deep); line-height: 1.15; }
 
-  /* Daily Ritual — "today's calm set". Gentle, non-instrumental. */
-  .calmset {
-    max-width: 460px; margin: 0 0 24px; padding: 14px 18px;
-    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
-  }
-  .cs-head {
-    margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.13em;
-    font-family: var(--label); font-size: 0.64rem; font-weight: 600; color: var(--accent-deep);
-  }
-  .cs-items { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
-  .cs-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--muted); }
-  .cs-item a { color: inherit; text-decoration: none; }
-  .cs-item a:hover { color: var(--accent-deep); }
-  .cs-item.done { color: var(--ink); }
-  .cs-mark {
-    width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line);
-    flex-shrink: 0; transition: background 0.16s ease, border-color 0.16s ease;
-  }
-  .cs-item.done .cs-mark {
-    background: var(--accent); border-color: var(--accent);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-size: 13px; background-repeat: no-repeat; background-position: center;
-  }
-  .cs-foot { margin: 12px 0 0; font-family: var(--label); font-size: 0.82rem; color: var(--muted); }
-  .cs-edit { color: var(--accent-deep); text-decoration: underline; white-space: nowrap; }
+  /* ===== Arcade hub (CD "Play - Arcade"): colored game tiles, whole-card tap, no
+     dashboard/streaks/XP — just games. Fonts match the rest of the hub. ===== */
+  @font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-var.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
+  @font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
+  @font-face { font-family: 'Space Mono'; src: url('/fonts/space-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
 
-  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
-  .gamecard {
-    display: flex; gap: 14px; align-items: center; text-align: left;
-    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
-    padding: 18px 20px; cursor: pointer; font: inherit; color: var(--ink);
-    box-shadow: var(--shadow); transition: border-color 0.14s ease, transform 0.14s ease;
+  .arcade-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 2px 0 24px; }
+  .eyelash { width: 34px; height: 4px; border-radius: 2px; background: #f0a830; flex: none; }
+  .play-title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.1rem); color: #e5882a; letter-spacing: -0.015em; line-height: 0.9; margin: 0; }
+  .head-div { width: 1px; height: 32px; background: rgba(120, 95, 50, 0.22); flex: none; }
+  .head-sub { color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 340px; margin: 0; }
+
+  .arcade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+  .tile {
+    position: relative; min-width: 0; min-height: 244px; border-radius: 22px; overflow: hidden;
+    border: none; padding: 0; margin: 0; width: 100%; box-sizing: border-box; display: block;
+    cursor: pointer; text-align: left; color: inherit; font-family: 'Hanken Grotesk', sans-serif;
+    transition: transform 0.18s cubic-bezier(.34, 1.4, .5, 1), box-shadow 0.18s ease;
+    -webkit-tap-highlight-color: transparent;
   }
-  .gamecard:hover { border-color: var(--accent); transform: translateY(-1px); }
-  /* The Zen Den isn't a game — give it a soft aqua identity so it reads as a calm corner. */
-  .zencard { text-decoration: none; background: linear-gradient(180deg, #f2fbfc, var(--surface)); }
-  .zencard:hover { border-color: #7cc3cc; }
-  .zencard .gc-status.zen { color: #2b8c98; font-weight: 600; }
-  .gc-icon { font-size: 2rem; color: var(--accent); line-height: 1; flex-shrink: 0; }
-  .gc-body h2 { font-size: 1.2rem; margin: 0 0 3px; }
-  .devtag { margin-left: 8px; font-size: 0.6rem; font-family: var(--label); font-weight: 700;
-            text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: #c2569b;
-            border-radius: 5px; padding: 2px 6px; vertical-align: middle; }
-  .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; }
+  .tile:hover { transform: translateY(-5px); }
+  .tile.soon { cursor: default; }
+  .tile.soon:hover { transform: none; }
+  .tile-word { background: #f0a830; box-shadow: 0 12px 26px -10px rgba(224, 148, 31, 0.55); }
+  .tile-ws { background: #2f7fb0; box-shadow: 0 12px 26px -10px rgba(47, 127, 176, 0.55); }
+  .tile-bloom { background: #5a9b63; box-shadow: 0 12px 26px -10px rgba(90, 155, 99, 0.55); }
+  .tile-match { background: #c0688c; box-shadow: 0 12px 26px -10px rgba(192, 104, 140, 0.55); }
+  .tile-bubble { background: linear-gradient(160deg, #6a6fc6, #4a4ea0); box-shadow: 0 12px 26px -10px rgba(74, 78, 160, 0.55); }
+  .tile-more { background: #efe6d4; border: 1.5px dashed #cdbb9a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 24px; text-align: center; }
+
+  .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 15px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(to top, rgba(50, 33, 12, 0.62), transparent); }
+  .t-name { font-weight: 800; font-size: 19px; color: #fff; }
+  .t-clue { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.84); }
+  .tile-more .t-name { color: #6f6757; font-size: 16px; }
+  .tile-more .t-clue { color: #a89a7c; }
+  .more-plus { font-family: 'Newsreader', serif; font-size: 42px; line-height: 1; color: #cdbb9a; }
+  .ribbon { position: absolute; top: 14px; right: 14px; font-family: 'Space Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.3); padding: 5px 10px; border-radius: 12px; }
+  .devtag { margin-left: 8px; font-size: 0.58rem; font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: rgba(0, 0, 0, 0.32); border-radius: 5px; padding: 2px 6px; vertical-align: middle; }
+
+  /* tile motifs — decorative; clipped by the tile's overflow:hidden */
+  .motif { position: absolute; inset: 0; pointer-events: none; }
+  .m-word { padding: 22px 22px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: start; }
+  .wt { aspect-ratio: 1; box-sizing: border-box; border: 2.5px solid rgba(255, 255, 255, 0.45); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(15px, 3.4vw, 22px); color: #cf7d1c; }
+  .wt.on { background: #fff; border-color: #fff; }
+  .m-ws { padding: 24px 22px 0; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; letter-spacing: 0.26em; }
+  .wrow { display: flex; justify-content: center; color: rgba(255, 255, 255, 0.42); padding: 4px 0; }
+  .wrow.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 9px; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.12); }
+  .m-bloom .petal { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }
+  .m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 40%; transform: translate(-50%, -50%); }
+  .m-bloom .p1 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(0, -56px); }
+  .m-bloom .p2 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(48px, -28px); }
+  .m-bloom .p3 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(48px, 28px); }
+  .m-bloom .p4 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(0, 56px); }
+  .m-bloom .p5 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(-48px, 28px); }
+  .m-bloom .p6 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(-48px, -28px); }
+  .m-match { padding: 24px 24px 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; align-content: start; }
+  .mm { aspect-ratio: 1; border-radius: 9px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
+  .mm.flip { background: #fff; }
+  .mm .dot { width: 17px; height: 17px; border-radius: 50%; background: #c0688c; }
+  .m-bubble { padding: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
+  .bub { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14); }
+  .b-a { background: radial-gradient(circle at 32% 28%, #fff, #f0a830 62%); }
+  .b-b { background: radial-gradient(circle at 32% 28%, #fff, #e8607f 62%); }
+  .b-c { background: radial-gradient(circle at 32% 28%, #fff, #4fb0e0 62%); }
+  .b-d { background: radial-gradient(circle at 32% 28%, #fff, #6ad0a8 62%); }
+
+  @media (max-width: 880px) { .arcade { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 560px) { .arcade { grid-template-columns: 1fr; } }
 
   /* Game-selection options */
   .opts { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }