From 60997e8ad4a988b35d7bc29710d3e83aa39be3ea Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 19:21:45 -0500
Subject: [PATCH] Compact final results for mobile, delay turn shake hint

Final results modal: keep BY POINTS and BY HOLES side-by-side on
mobile, compact spacing, buttons side-by-side, bottom padding for
mobile bar overlay.

Turn shake: delay 5s before first shake, 300ms every 2s.

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

diff --git a/client/style.css b/client/style.css
index aea4dd3..26f70d4 100644
--- a/client/style.css
+++ b/client/style.css
@@ -2812,26 +2812,63 @@ input::placeholder {
 /* Mobile adjustments for final results modal */
 @media (max-width: 500px) {
     .final-results-content {
-        padding: 20px 25px;
+        padding: 15px 12px;
+        width: 95%;
     }
 
     .final-results-content h2 {
-        font-size: 1.5rem;
+        font-size: 1.3rem;
+        margin-bottom: 10px;
+    }
+
+    .double-victory-banner {
+        padding: 8px 12px;
+        font-size: 0.95rem;
+        margin-bottom: 12px;
     }
 
     .final-rankings {
-        flex-direction: column;
-        gap: 15px;
+        flex-direction: row;
+        gap: 8px;
+        margin-bottom: 15px;
+    }
+
+    .final-ranking-section {
+        padding: 8px;
+    }
+
+    .final-ranking-section h3 {
+        font-size: 0.7rem;
+        margin-bottom: 6px;
+        padding-bottom: 4px;
     }
 
     .final-rank-row {
+        font-size: 0.8rem;
+        padding: 4px 5px;
+        margin-bottom: 2px;
+    }
+
+    .final-rank-row .rank-pos {
+        width: 22px;
         font-size: 0.9rem;
-        padding: 6px 8px;
+    }
+
+    .final-rank-row .rank-val {
+        font-size: 0.8rem;
+    }
+
+    .final-actions {
+        flex-direction: row;
+        gap: 8px;
+        padding-bottom: 60px;
     }
 
     .final-actions .btn {
-        min-width: 120px;
-        padding: 12px 20px;
+        min-width: 0;
+        flex: 1;
+        padding: 10px 12px;
+        font-size: 0.9rem;
     }
 }