From 9239fd7a051175944e52e77940e186d682fbb2da Mon Sep 17 00:00:00 2001
From: Junaid Saeed Uppal <junaid.uppal@gmail.com>
Date: Sun, 22 Feb 2026 20:41:47 +0500
Subject: [PATCH] mobile support

---
 static/index.html | 122 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 86 insertions(+), 36 deletions(-)

diff --git a/static/index.html b/static/index.html
index 98a4bfd74..66e1c15e8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -451,42 +451,6 @@
     box-shadow: 0 20px 60px rgba(0,0,0,0.5);
   }
 
-  /* ── Mobile Responsive ── */
-  @media (max-width: 768px) {
-    .header {
-      flex-wrap: wrap; gap: 6px;
-      padding: 8px 12px;
-    }
-    .header h1 { font-size: 14px; }
-    .header .round-info { font-size: 12px; }
-
-    .grid {
-      grid-template-columns: 1fr;
-      height: auto;
-    }
-    .panel {
-      padding: 10px;
-      overflow-y: visible;
-    }
-
-    .chairs { gap: 4px; }
-    .chair { padding: 8px 4px; }
-    .chair-bet { font-size: 15px; }
-    .chair-label { font-size: 11px; }
-
-    .bets-feed { max-height: 180px; }
-    .bet-user { max-width: 90px; }
-
-    .hc-grid { grid-template-columns: 1fr; }
-
-    .history-table { font-size: 11px; display: block; overflow-x: auto; white-space: nowrap; }
-    .history-table th, .history-table td { padding: 3px 4px; }
-
-    .modal { width: 95vw; max-height: 90vh; padding: 14px; border-radius: 8px; }
-    .modal-stats { grid-template-columns: repeat(2, 1fr); }
-    .modal-header { gap: 8px; }
-    .modal-name { font-size: 14px; }
-  }
   .modal-close {
     float: right; background: none; border: none; color: var(--text2);
     font-size: 20px; cursor: pointer; padding: 0 4px;
@@ -539,6 +503,92 @@
   .modal-bets-table td { padding: 3px 6px; border-bottom: 1px solid #2d314830; }
   .bet-won { color: var(--green); }
   .bet-lost { color: var(--red); }
+
+  /* ── Mobile ── */
+  @media (max-width: 768px) {
+    .header {
+      flex-wrap: wrap; gap: 6px; padding: 8px 12px;
+    }
+    .header h1 { font-size: 13px; order: 1; }
+    .header .round-info { font-size: 11px; order: 2; }
+    .header .status { order: 3; width: 100%; justify-content: flex-end; }
+
+    .grid {
+      grid-template-columns: 1fr;
+      height: auto;
+      min-height: 100vh;
+    }
+    .panel {
+      padding: 10px;
+      overflow-y: visible;
+    }
+
+    .timer { font-size: 22px; }
+    .total-pot { font-size: 11px; }
+    .total-pot span { font-size: 13px; }
+
+    .chairs { gap: 4px; }
+    .chair { padding: 8px 4px; border-radius: 6px; }
+    .chair-bet { font-size: 14px; }
+    .chair-label { font-size: 11px; }
+    .chair-rank { font-size: 8px; }
+    .chair-predict { font-size: 7px; }
+
+    .top-bettors .tb-row { padding: 3px 4px; font-size: 11px; }
+    .tb-name { font-size: 11px; }
+    .tb-chip { font-size: 9px; padding: 1px 3px; }
+    .tb-total { font-size: 11px; min-width: 45px; }
+
+    .whale-trend-row { gap: 4px; font-size: 11px; }
+    .whale-trend-chair { font-size: 13px; min-width: 18px; }
+    .whale-trend-bar-bg { height: 16px; }
+    .whale-trend-pct { font-size: 11px; min-width: 34px; }
+    .whale-trend-amt { font-size: 9px; min-width: 40px; }
+
+    .bets-feed { max-height: 200px; font-size: 11px; }
+    .bet-user { max-width: 80px; font-size: 11px; }
+    .bet-amount { font-size: 11px; }
+    .bet-session { font-size: 9px; min-width: 40px; }
+
+    .lb-row { padding: 4px 2px; font-size: 11px; }
+    .lb-pnl { min-width: 50px; font-size: 11px; }
+
+    .hc-grid { grid-template-columns: 1fr; gap: 6px; }
+    .hc-player { font-size: 10px; }
+    .hc-name { font-size: 10px; }
+
+    .chart-container { height: 100px; }
+
+    .dist-row { gap: 4px; }
+    .dist-item { padding: 6px 2px; }
+    .dist-value { font-size: 16px; }
+    .dist-label { font-size: 9px; }
+    .dist-pct { font-size: 9px; }
+
+    .history-table { font-size: 10px; }
+    .history-table th, .history-table td { padding: 3px 3px; }
+    .hand-cards { font-size: 13px; }
+    .hand-tag { font-size: 8px; padding: 0px 3px; }
+    .history-hand { font-size: 10px; }
+    .history-pot { font-size: 8px; }
+
+    .biggest-winner { padding: 8px 10px; gap: 8px; }
+    .bw-crown { font-size: 16px; }
+    .bw-name { font-size: 12px; }
+    .bw-stats { font-size: 10px; }
+    .bw-pnl { font-size: 14px; }
+
+    .modal { width: 95vw; max-height: 90vh; padding: 14px; border-radius: 8px; }
+    .modal-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
+    .modal-stat { padding: 6px; }
+    .modal-stat-value { font-size: 14px; }
+    .modal-header { gap: 8px; }
+    .modal-name { font-size: 14px; }
+    .modal-avatar { width: 40px; height: 40px; }
+    .modal-bets-table { font-size: 10px; }
+
+    .panel-title { font-size: 9px; margin-bottom: 8px; }
+  }
 </style>
 </head>
 <body>