From 038f47051f30b654d1fe8a8c7741b3a96fb87d53 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Mon, 1 Jun 2026 08:35:33 -0400
Subject: [PATCH] mobile: compact action buttons to one row, shrink/lighten
 D-pad

On phones the primary buttons now read START / WATCH / SHOP (short labels via
spans toggled by media query) with tighter padding so they fit a single row.
The on-screen D-pad is smaller (44px) and more transparent so it covers less
of the chat/game underneath.
---
 html/index.html            |  4 ++--
 html/styles/stylesheet.css | 32 ++++++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/html/index.html b/html/index.html
index 9684d57..042442d 100644
--- a/html/index.html
+++ b/html/index.html
@@ -100,10 +100,10 @@
             <div id="connectionStatus">Status: <span id="statusValue">Connecting...</span></div>
             <div id="creditsDisplay" style="display:none; margin-top:4px; font-size:13px; font-family:monospace; color:#0f0; background:#001a00; padding:4px 8px; border:1px solid #0a0; border-radius:4px; font-weight:bold;"></div>
             <button id="startButton" style="background: #0a5c0a; color: #ff0; border: 2px solid #0f0; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; display: none;">
-                🎮 START GAME
+                🎮 <span class="lbl-full">START GAME</span><span class="lbl-short">START</span>
             </button>
             <button id="watchGamesButton" style="background: #053655; color: #0af; border: 2px solid #0af; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; margin-left: 10px;">
-                👁️ WATCH GAMES
+                👁️ <span class="lbl-full">WATCH GAMES</span><span class="lbl-short">WATCH</span>
             </button>
             <button id="shopButton" style="background: #004400; color: #0f0; border: 2px solid #0f0; padding: 8px 16px; font-weight: bold; cursor: pointer; margin-top: 5px; margin-left: 10px; display: none;">
                 🛒 SHOP
diff --git a/html/styles/stylesheet.css b/html/styles/stylesheet.css
index 90c1e30..956b90d 100644
--- a/html/styles/stylesheet.css
+++ b/html/styles/stylesheet.css
@@ -319,6 +319,9 @@ li.debug {
    ========================================================================= */
 #touch-dpad { display: none; }
 
+/* Short button labels (START / WATCH) are shown only on mobile; see media query. */
+.lbl-short { display: none; }
+
 @media (max-width: 820px) {
     /* Stack the desktop 3-column grid into a single column.
        Rows: header / status / game / CHAT(flex) / input / footer.
@@ -372,6 +375,19 @@ li.debug {
     #messageBox { max-height: none; height: 100%; }
     .footer { font-size: 9px; padding: 2px 4px; line-height: 1.3; }
 
+    /* Use the short labels (START / WATCH) and compact the three primary action
+       buttons so they share a single row on most phones. */
+    .lbl-full { display: none; }
+    .lbl-short { display: inline; }
+    #startButton, #watchGamesButton, #shopButton {
+        padding: 7px 6px !important;
+        font-size: 13px !important;
+        margin: 5px 0 0 0 !important;
+        flex: 1 1 0;
+        min-width: 0;
+        white-space: nowrap;
+    }
+
     /* Fixed-width modals would overflow tiny screens — make them fit */
     #payment-ui, #history-panel, #leaderboard-panel {
         min-width: 0 !important;
@@ -390,26 +406,26 @@ li.debug {
 body.touch #touch-dpad { display: grid; }
 #touch-dpad {
     grid-template-areas: ".  up    ." "left . right" ".  down  .";
-    gap: 8px;
+    gap: 6px;
     position: fixed;
     right: 12px;
     bottom: 70px;
     z-index: 1500;
-    opacity: 0.55;
+    opacity: 0.4;
     touch-action: none;
 }
 #touch-dpad button {
-    width: 54px; height: 54px;
-    font-size: 22px;
-    background: rgba(0,40,0,0.85);
+    width: 44px; height: 44px;
+    font-size: 17px;
+    background: rgba(0,40,0,0.5);
     color: #0f0;
-    border: 2px solid #0f0;
-    border-radius: 10px;
+    border: 2px solid rgba(0,255,0,0.7);
+    border-radius: 9px;
     padding: 0;
     -webkit-user-select: none; user-select: none;
     touch-action: manipulation;
 }
-#touch-dpad button:active { background: #0f0; color: #000; }
+#touch-dpad button:active { background: rgba(0,255,0,0.9); color: #000; }
 #dpad-up { grid-area: up; }
 #dpad-down { grid-area: down; }
 #dpad-left { grid-area: left; }