From 118912dd139352d71cc3f6f3a9aec53cf48f8e4b Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 17:08:57 -0500
Subject: [PATCH] Add subtle dark gradient to mobile header for status bar
 visibility

Replaces background:none with a dark-to-transparent gradient so the
status message and mute button are visible against the green felt.
Reverts mute button circle in favor of the gradient approach.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/style.css | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/client/style.css b/client/style.css
index 852f1ee..befe2b2 100644
--- a/client/style.css
+++ b/client/style.css
@@ -4966,15 +4966,15 @@ body.mobile-portrait .game-header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 2px 0;
-    padding-top: env(safe-area-inset-top, 0px);
+    padding: 6px 8px;
+    padding-top: calc(6px + env(safe-area-inset-top, 0px));
     font-size: 0.75rem;
     min-height: 0;
     width: 100%;
     margin-left: 0;
     gap: 4px;
-    margin-bottom: 8px;
-    background: none;
+    margin-bottom: 4px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
 }
 
 body.mobile-portrait .header-col-left {
@@ -5020,16 +5020,8 @@ body.mobile-portrait #leave-game-btn {
 }
 
 body.mobile-portrait .mute-btn {
-    font-size: 0.85rem;
-    padding: 4px;
-    background: rgba(0, 0, 0, 0.35);
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.9;
+    font-size: 0.95rem;
+    padding: 2px;
 }
 
 body.mobile-portrait .final-turn-badge {