From 5a7c90e7be50aa6472f2167727753df6f7d95d75 Mon Sep 17 00:00:00 2001 From: jay Date: Thu, 25 Jun 2026 20:16:48 -0400 Subject: [PATCH] /play: bubble shooter to the right aiming a blue center ball; space under top bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Bubble Blaster: shooter moves right (clear of the title), a diagonal dashed aim line runs up-left to a now-blue bubble at the cluster center (shooter + target share the blue — reads like lining up a matching shot). - Add breathing room between HubBar and the Play header (arcade-head top margin). Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/play/+page.svelte | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte index d6b1360..d33e0ed 100644 --- a/frontend/src/routes/play/+page.svelte +++ b/frontend/src/routes/play/+page.svelte @@ -365,7 +365,7 @@ - + @@ -495,7 +495,7 @@ @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; } - .arcade-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 24px; } + .arcade-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(16px, 3vw, 28px) 0 24px; } .head-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; } .hub-back { flex: none; align-self: flex-start; } .eyelash { width: 34px; height: 4px; border-radius: 2px; background: #f0a830; flex: none; } @@ -552,10 +552,11 @@ .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: 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); + /* 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); 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); } + .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%); } .b-b { background: radial-gradient(circle at 32% 28%, #fff, #e8607f 62%); } .b-c { background: radial-gradient(circle at 32% 28%, #fff, #4fb0e0 62%); }