From aa2093d6c8be0864b586d5f28fbc651244ab8a9c Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 21 Feb 2026 23:17:53 -0500
Subject: [PATCH] Polish mobile bottom bar buttons and drawer transitions

- Redesign bottom bar buttons as pill-shaped with subtle glass border
- Active state: warm gradient fill with glow shadow
- Tap feedback: scale(0.95) press effect
- Drawer panels: iOS-style cubic-bezier spring curve, drop shadow
- Backdrop transition matches drawer timing
- Darker bottom bar background with softer border for depth

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

diff --git a/client/style.css b/client/style.css
index 7e845a0..d09dd76 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5181,9 +5181,10 @@ body.mobile-portrait .side-panel {
     padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
     z-index: 600;
     transform: translateY(100%);
-    transition: transform 0.3s ease-out;
+    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
 }
 
 body.mobile-portrait .side-panel.left-panel,
@@ -5218,7 +5219,7 @@ body.mobile-portrait .drawer-backdrop {
     z-index: 599;
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 body.mobile-portrait .drawer-backdrop.visible {
@@ -5254,40 +5255,45 @@ body.mobile-portrait .game-buttons {
 /* --- Mobile: Bottom bar --- */
 body.mobile-portrait #mobile-bottom-bar {
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
-    padding: 6px 16px;
-    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+    gap: 12px;
+    background: rgba(10, 10, 20, 0.7);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    padding: 8px 20px;
+    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
     width: 100%;
     z-index: 500;
     flex-shrink: 0;
-    border-top: 1px solid rgba(244, 164, 96, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.75rem;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.65);
+    font-size: 0.7rem;
     font-weight: 600;
-    padding: 6px 16px;
+    padding: 7px 20px;
     cursor: pointer;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
-    border-radius: 6px;
-    transition: background 0.15s, color 0.15s;
+    letter-spacing: 0.1em;
+    border-radius: 20px;
+    transition: all 0.25s ease;
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn:active {
-    background: rgba(244, 164, 96, 0.3);
-    color: #f4a460;
+    transform: scale(0.95);
 }
 
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn.active {
-    color: #f4a460;
-    background: rgba(244, 164, 96, 0.15);
+    color: #1a1a2e;
+    background: linear-gradient(135deg, #f4a460, #e8935a);
+    border-color: transparent;
+    box-shadow: 0 2px 12px rgba(244, 164, 96, 0.4);
 }
 
 /* --- Mobile: Non-game screens --- */