From cb49fd545bf3a27662919f4eb68c33decddd5187 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 21:31:20 -0500
Subject: [PATCH] Add gradient backgrounds to all status messages, match
 final-turn badge size

- Default gradient on base .status-message (dark green)
- Add round-over/game-over (gold) and reveal (purple) gradient styles
- Tag action prompts (swap, flip, discard) as your-turn type
- Match final-turn badge font size and padding to status message on mobile
- Hide status message when empty

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/app.js    |  8 ++++----
 client/style.css | 28 +++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/client/app.js b/client/app.js
index ef1b381..528377c 100644
--- a/client/app.js
+++ b/client/app.js
@@ -923,16 +923,16 @@ class GolfGame {
                     this.displayHeldCard(data.card, true);
                     this.renderGame();
                 }
-                this.showToast('Swap with a card or discard', '', 3000);
+                this.showToast('Swap with a card or discard', 'your-turn', 3000);
                 break;
 
             case 'can_flip':
                 this.waitingForFlip = true;
                 this.flipIsOptional = data.optional || false;
                 if (this.flipIsOptional) {
-                    this.showToast('Flip a card or skip', '', 3000);
+                    this.showToast('Flip a card or skip', 'your-turn', 3000);
                 } else {
-                    this.showToast('Flip a face-down card', '', 3000);
+                    this.showToast('Flip a face-down card', 'your-turn', 3000);
                 }
                 this.renderGame();
                 break;
@@ -2959,7 +2959,7 @@ class GolfGame {
                 this.hideToast();
             } else {
                 const remaining = requiredFlips - uniquePositions.length;
-                this.showToast(`Select ${remaining} more card${remaining > 1 ? 's' : ''} to flip`, '', 5000);
+                this.showToast(`Select ${remaining} more card${remaining > 1 ? 's' : ''} to flip`, 'your-turn', 5000);
             }
             return;
         }
diff --git a/client/style.css b/client/style.css
index 0f6e6fb..2a57aa8 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1665,6 +1665,12 @@ input::placeholder {
     text-align: center;
     white-space: nowrap;
     color: #fff;
+    background: linear-gradient(135deg, #4a6741 0%, #3d5a35 100%);
+}
+
+/* Empty status - hide completely */
+.status-message:empty {
+    display: none;
 }
 
 .status-message.your-turn {
@@ -1684,6 +1690,19 @@ input::placeholder {
     color: #fff;
 }
 
+/* Round/game over status */
+.status-message.round-over,
+.status-message.game-over {
+    background: linear-gradient(135deg, #f0c040 0%, #d4a017 100%);
+    color: #2d3436;
+}
+
+/* Reveal status */
+.status-message.reveal {
+    background: linear-gradient(135deg, #8b7eb8 0%, #6b5b95 100%);
+    color: #fff;
+}
+
 /* Final turn badge - enhanced V3 with countdown */
 .final-turn-badge {
     display: flex;
@@ -1701,7 +1720,7 @@ input::placeholder {
 }
 
 .final-turn-badge .final-turn-text {
-    font-size: 0.85rem;
+    font-size: 0.9rem;
 }
 
 .final-turn-badge.hidden {
@@ -5125,11 +5144,14 @@ body.mobile-portrait .mute-btn {
 }
 
 body.mobile-portrait .final-turn-badge {
-    font-size: 0.6rem;
-    padding: 2px 6px;
+    padding: 6px 16px;
     white-space: nowrap;
 }
 
+body.mobile-portrait .final-turn-badge .final-turn-text {
+    font-size: 1.02rem;
+}
+
 /* --- Mobile: Game table — opponents pinned top, rest centered in remaining space --- */
 body.mobile-portrait .game-table {
     display: flex;