diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte
index d33e0ed..969442c 100644
--- a/frontend/src/routes/play/+page.svelte
+++ b/frontend/src/routes/play/+page.svelte
@@ -304,7 +304,7 @@
     <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}
+          {#each ['B', 'Y', 'T', 'E', '', 'C', 'A', 'L', 'M', ''] as ch}
             <span class="wt" class:on={ch}>{ch}</span>
           {/each}
         </span>
@@ -357,13 +357,13 @@
         <span class="motif m-bubble" aria-hidden="true">
           <span class="bub b-a" style="left:38px;top:12px"></span>
           <span class="bub b-b" style="left:73px;top:12px"></span>
-          <span class="bub b-c" style="left:108px;top:12px"></span>
-          <span class="bub b-d" style="left:143px;top:12px"></span>
-          <span class="bub b-a" style="left:178px;top:12px"></span>
+          <span class="bub b-d" style="left:108px;top:12px"></span>
+          <span class="bub b-a" style="left:143px;top:12px"></span>
+          <span class="bub b-b" style="left:178px;top:12px"></span>
           <span class="bub b-d" style="left:55px;top:41px"></span>
-          <span class="bub b-c" style="left:90px;top:41px"></span>
+          <span class="bub b-a" style="left:90px;top:41px"></span>
           <span class="bub b-b" style="left:125px;top:41px"></span>
-          <span class="bub b-a" style="left:160px;top:41px"></span>
+          <span class="bub b-d" style="left:160px;top:41px"></span>
           <span class="bub b-b" style="left:73px;top:70px"></span>
           <span class="bub b-c" style="left:108px;top:70px"></span>
           <span class="bub b-d" style="left:143px;top:70px"></span>
@@ -532,21 +532,21 @@
 
   /* 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; }
+  .m-word { padding: 18px 22px 66px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: center; }
   .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: 16px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: start; }
+  .m-ws { padding: 12px 16px 66px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: center; }
   .wc { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
   .wc.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 7px; box-shadow: 0 2px 7px 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: 22px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: start; }
+  .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: 37%; transform: translate(-50%, -50%); }
+  .m-bloom .p1 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(0, -56px); }
+  .m-bloom .p2 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(48px, -28px); }
+  .m-bloom .p3 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(48px, 28px); }
+  .m-bloom .p4 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(0, 56px); }
+  .m-bloom .p5 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(-48px, 28px); }
+  .m-bloom .p6 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(-48px, -28px); }
+  .m-match { padding: 18px 22px 66px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: center; }
   .mm { width: 50px; height: 50px; 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; }
@@ -554,7 +554,7 @@
   .bub { position: absolute; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); }
   /* shooter sits to the RIGHT (clear of the title); a diagonal dashed aim line runs up-left
      to the matching blue bubble at the cluster's center, like a shot being lined up */
-  .bub-aim { position: absolute; left: 62%; bottom: 82px; width: 2px; height: 90px; transform-origin: bottom center; transform: translateX(-50%) rotate(-33deg);
+  .bub-aim { position: absolute; left: 62%; bottom: 74px; width: 2px; height: 96px; transform-origin: bottom center; transform: translateX(-50%) rotate(-33deg);
              background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.65) 0 5px, transparent 5px 11px); }
   .bub-shooter { position: absolute; left: 62%; bottom: 46px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); }
   .b-a { background: radial-gradient(circle at 32% 28%, #fff, #f0a830 62%); }