From 107f5de07c01ecb78f09e124f59fa397c4fb57a5 Mon Sep 17 00:00:00 2001
From: Tim Thomas <0800tim@gmail.com>
Date: Fri, 5 Jun 2026 12:04:53 +1200
Subject: [PATCH] fix(bracket+bet): heavier gold ring on selected Top 8 3rds +
 dark text on bet CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two visual bugs Tim flagged on 2026-06-05:

* The selected/unselected contrast on the Top 8 3rd-placed teams tiles
  was too subtle. The 3px inset gold ring + rgba(.., 0.6) border read
  as a faint outline next to the unpicked tiles, not as an unambiguous
  "this one is picked" affordance. Bumped to a 5px solid-gold inset
  with a 1px soft inner highlight + larger outer glow (24px / 0.55
  alpha vs 14px / 0.35). The picked tile now visibly lifts.

* /the-bet bottom CTA ("Pick your bracket to enter →") was rendering
  gold text on a gold pill. The pill's class .vt-bet-cta-primary set
  color: #15151a but .vt-bet-body a (same file, body-paragraph link
  styling) is (0,1,1) specificity vs (0,1,0) and was winning the
  cascade. Added !important to the CTA's color rule, matching the
  pattern .vt-bet-cta-ghost already uses for the same reason.

Refs: sessions/2026-06-05_orchestrator_bracket-save-on-exit.md
Signed-off-by: Tim Thomas <0800tim@gmail.com>
---
 apps/web/app/the-bet/the-bet.css        |  6 +++++-
 apps/web/app/world-cup-2026/bracket.css | 12 ++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/the-bet/the-bet.css b/apps/web/app/the-bet/the-bet.css
index 9ff5560d..ba5c37f3 100644
--- a/apps/web/app/the-bet/the-bet.css
+++ b/apps/web/app/the-bet/the-bet.css
@@ -271,9 +271,13 @@
   text-decoration: none !important;
   transition: transform 100ms ease;
 }
+/* `!important` because `.vt-bet-body a` (the body-link colour rule
+ * higher up in this file) is more specific than this class on its
+ * own, which made the CTA render as gold text on a gold pill.
+ * Tim 2026-06-05. */
 .vt-bet-cta-primary {
   background: #dca94b;
-  color: #15151a;
+  color: #15151a !important;
 }
 .vt-bet-cta-primary:hover {
   transform: translateY(-1px);
diff --git a/apps/web/app/world-cup-2026/bracket.css b/apps/web/app/world-cup-2026/bracket.css
index 23da89bf..822dee94 100644
--- a/apps/web/app/world-cup-2026/bracket.css
+++ b/apps/web/app/world-cup-2026/bracket.css
@@ -3228,12 +3228,16 @@ a.bracket-save-panel-cta-primary {
 }
 
 /* Selected: matches the .km-team.is-winner treatment - gold inner
- * ring + halo + a brighter scrim so the picked tile pops. */
+ * ring + halo + a brighter scrim so the picked tile pops. Tim
+ * 2026-06-05: bumped to a 5px solid-gold inset with a soft inner
+ * highlight + larger outer glow; the previous 3px ring wasn't
+ * reading strongly enough against the unselected tiles. */
 .bracket-thirds-tile.is-selected {
-  border-color: rgba(220, 169, 75, 0.6);
+  border-color: #dca94b;
   box-shadow:
-    inset 0 0 0 3px var(--vt-gold-400, #dca94b),
-    0 0 14px rgba(220, 169, 75, 0.35);
+    inset 0 0 0 5px var(--vt-gold-400, #dca94b),
+    inset 0 0 0 6px rgba(255, 220, 130, 0.35),
+    0 0 24px rgba(220, 169, 75, 0.55);
 }
 .bracket-thirds-tile.is-selected::after {
   background: linear-gradient(