From 33eb4cf4941aa84dc96a518f3651386ff02b2efd Mon Sep 17 00:00:00 2001
From: giteaadmin <giteaadmin@localhost>
Date: Mon, 4 May 2026 19:11:02 +0000
Subject: [PATCH] minigame 4add more design 1.2

---
 www/html/Game/public/play.html | 77 +++++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 29 deletions(-)

diff --git a/www/html/Game/public/play.html b/www/html/Game/public/play.html
index f33272d..819004c 100644
--- a/www/html/Game/public/play.html
+++ b/www/html/Game/public/play.html
@@ -1720,61 +1720,80 @@
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-scoreboard.play-cyber-scoreboard--crown-strip {
       padding-left: 0;
     }
+    /* quiz_carry: แสดงผู้เล่นครบ — ไม่ scroll / ไม่ clip แนวนอน (ห่อหลายแถวได้) */
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-score-list.play-cyber-score-list--crown-strip {
       padding-left: 0;
+      overflow-x: visible;
+      overflow-y: visible;
+      flex-wrap: wrap;
+      max-height: none;
+      align-content: flex-start;
+      row-gap: clamp(4px, 0.8vw, 10px);
+      scrollbar-width: none;
+      -ms-overflow-style: none;
     }
-    /* quiz_carry: TIME แถวบนเต็มจอ — SCORE ชิดโปรไฟล์ขวาบน (ไม่ใช้ grid ซ้าย | ขวา) */
+    #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-score-list.play-cyber-score-list--crown-strip::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+    /* quiz_carry: TIME ชิดซ้ายกลางแนวตั้ง — แถวบน: SCORE + โปรไฟล์ */
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left {
       padding-left: env(safe-area-inset-left, 0px);
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      align-items: flex-start;
-      align-content: flex-start;
-      column-gap: 0.45rem;
+      display: grid;
+      grid-template-columns: minmax(4.5rem, 17vw) minmax(0, 1fr) auto;
+      grid-template-rows: auto 1fr;
+      column-gap: clamp(8px, 1.5vw, 16px);
       row-gap: 0.35rem;
+      align-items: start;
+      box-sizing: border-box;
+      min-height: 100%;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-center-stack {
       grid-area: unset;
-      order: 1;
-      flex: 1 0 100%;
+      grid-column: 1;
+      grid-row: 1 / -1;
       width: 100%;
-      max-width: 100%;
+      max-width: none;
+      align-self: center;
+      justify-self: start;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      justify-content: flex-start;
+      align-items: flex-start;
+      justify-content: center;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-scoreboard.play-cyber-scoreboard--crown-strip {
       grid-area: unset;
-      order: 2;
-      flex: 0 1 auto;
-      width: auto;
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: stretch;
+      align-self: start;
+      width: 100%;
       min-width: 0;
-      max-width: min(70vw, calc(100vw - 9rem));
-      margin-left: auto;
+      max-width: none;
+      margin-left: 0;
       margin-right: 0;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-self {
       grid-area: unset;
-      grid-row: unset;
-      order: 3;
-      flex: 0 0 auto;
-      justify-self: unset;
+      grid-column: 3;
+      grid-row: 1;
+      justify-self: end;
+      align-self: start;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-time-block {
-      text-align: center;
+      text-align: left;
       max-width: 100%;
+      min-width: 0;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-time-head {
-      align-items: center;
+      align-items: flex-start;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip.play-cyber-hud--score-flush-left .play-cyber-time-sub {
-      text-align: center;
-      max-width: min(92vw, 520px);
-      margin-left: auto;
-      margin-right: auto;
+      text-align: left;
+      max-width: 100%;
+      margin-left: 0;
+      margin-right: 0;
     }
     #play-cyber-hud.play-cyber-hud--gauntlet-crown-strip .play-cyber-center-stack {
       grid-area: crownTime;
@@ -2826,7 +2845,7 @@
   </div>
   <script src="/Game/socket.io/socket.io.js"></script>
     <script src="js/version.js?v=0.0258"></script>
-    <script src="js/play.js?v=0.0263"></script>
+    <script src="js/play.js?v=0.0266"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>