From a74a3637284c315882a68d488a0ac80d3244af1a Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Thu, 25 Jun 2026 20:41:10 -0400
Subject: [PATCH] /play Bloom motif: center the flower vertically above the
 title (match other tiles)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bloom used a hardcoded % anchor so it read top-heavy with a gap below. Wrap the
petals in a fixed-size .bloom-ring and flex-center it in the space above the foot
(padding-bottom clears the title) — robust, no guessed percentage.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/play/+page.svelte | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte
index 969442c..4a0a8dd 100644
--- a/frontend/src/routes/play/+page.svelte
+++ b/frontend/src/routes/play/+page.svelte
@@ -327,9 +327,11 @@
       {#if !bloomBlocked}
         <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 class="bloom-ring">
+              <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>
           <span class="foot">
             <span class="t-name">Bloom{#if isDevGated('bloom')}<span class="devtag">dev</span>{/if}</span>
@@ -538,14 +540,17 @@
   .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); }
+  /* flex-center the flower in the space above the title (padding-bottom clears the foot) */
+  .m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 64px; box-sizing: border-box; }
+  .bloom-ring { position: relative; width: 150px; height: 150px; }
   .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: 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-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: 50%; transform: translate(-50%, -50%); }
+  .m-bloom .p1 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, -56px); }
+  .m-bloom .p2 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(48px, -28px); }
+  .m-bloom .p3 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(48px, 28px); }
+  .m-bloom .p4 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, 56px); }
+  .m-bloom .p5 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-48px, 28px); }
+  .m-bloom .p6 { left: 50%; top: 50%; 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; }