diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte
index 24e6084..d6b1360 100644
--- a/frontend/src/routes/play/+page.svelte
+++ b/frontend/src/routes/play/+page.svelte
@@ -355,18 +355,18 @@
       <!-- teased, not built yet -->
       <div class="tile tile-bubble soon">
         <span class="motif m-bubble" aria-hidden="true">
-          <span class="bub b-a" style="left:22px;top:16px"></span>
-          <span class="bub b-b" style="left:62px;top:16px"></span>
-          <span class="bub b-c" style="left:102px;top:16px"></span>
-          <span class="bub b-d" style="left:142px;top:16px"></span>
-          <span class="bub b-a" style="left:182px;top:16px"></span>
-          <span class="bub b-d" style="left:42px;top:50px"></span>
-          <span class="bub b-c" style="left:82px;top:50px"></span>
-          <span class="bub b-b" style="left:122px;top:50px"></span>
-          <span class="bub b-a" style="left:162px;top:50px"></span>
-          <span class="bub b-b" style="left:62px;top:84px"></span>
-          <span class="bub b-a" style="left:102px;top:84px"></span>
-          <span class="bub b-d" style="left:142px;top:84px"></span>
+          <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:55px;top:41px"></span>
+          <span class="bub b-c" 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-b" style="left:73px;top:70px"></span>
+          <span class="bub b-a" style="left:108px;top:70px"></span>
+          <span class="bub b-d" style="left:143px;top:70px"></span>
           <span class="bub-aim"></span>
           <span class="bub-shooter b-c"></span>
         </span>
@@ -535,8 +535,8 @@
   .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: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; align-content: start; }
-  .wc { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(11px, 2.6vw, 15px); color: rgba(255, 255, 255, 0.42); }
+  .m-ws { padding: 16px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: start; }
+  .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%); }
@@ -546,15 +546,16 @@
   .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; }
+  .m-match { padding: 22px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: start; }
+  .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; }
   /* bubble shooter: a packed cluster up top, a dashed aim line, a loaded shooter below */
-  .bub { position: absolute; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); }
-  .bub-aim { position: absolute; left: 50%; top: 122px; bottom: 72px; width: 2px; transform: translateX(-50%);
-             background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0 5px, transparent 5px 11px); }
-  .bub-shooter { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); }
+  .bub { position: absolute; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); }
+  /* diagonal dashed aim line, anchored at the shooter and tilted up-left like it's being aimed */
+  .bub-aim { position: absolute; left: 50%; bottom: 84px; width: 2px; height: 64px; transform-origin: bottom center; transform: translateX(-50%) rotate(-22deg);
+             background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.65) 0 5px, transparent 5px 11px); }
+  .bub-shooter { position: absolute; left: 50%; 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%); }
   .b-b { background: radial-gradient(circle at 32% 28%, #fff, #e8607f 62%); }
   .b-c { background: radial-gradient(circle at 32% 28%, #fff, #4fb0e0 62%); }