From cb311ec0da3fe47a532beed991f9ee2ded91259a Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 21:26:31 -0500
Subject: [PATCH] Move status message to left side of header on mobile

Align header-col-center to flex-start on mobile so the status and
final-turn badges sit flush left. Match final-turn-badge border-radius
and padding to status-message for consistent shape.

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

diff --git a/client/style.css b/client/style.css
index 9985145..0f6e6fb 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1691,8 +1691,8 @@ input::placeholder {
     gap: 6px;
     background: linear-gradient(135deg, #ff6b35 0%, #d63031 100%);
     color: #fff;
-    padding: 6px 14px;
-    border-radius: 8px;
+    padding: 6px 16px;
+    border-radius: 4px;
     font-weight: 700;
     letter-spacing: 0.05em;
     white-space: nowrap;
@@ -5097,12 +5097,15 @@ body.mobile-portrait #matchmaking-screen {
     margin-top: 50px;
 }
 
+body.mobile-portrait .header-col-center {
+    justify-content: flex-start;
+}
+
 body.mobile-portrait .status-message {
     font-size: 1.02rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    text-align: left;
 }
 
 body.mobile-portrait .round-info {