minigame 2 add more design 2.8

www/html/Game/public/js/play.js

@@ -49,6 +49,8 @@
   /** เลื่อน BG แนวตั้งเท่าเศษส่วนของความสูงแคนวาส (จอ) */
   const STACK_TOWER_POST50_MAP_SHIFT_SCREEN_FRAC = 0.1;
   const STACK_TOWER_POST50_ANIM_MS = 680;
+  /** แมป mnn93hpi: สเกลความกว้าง/ความสูงชั้นของบล็อกในโลก (1 = ขนาดเดิม) */
+  const STACK_TOWER_BLOCK_WORLD_SCALE = 1.5;
   /** หลัง 50%: เลื่อนกล้องลงในมุมมองจอเท่าเศษส่วนของความสูงแคนวาส (เช่น 0.25 = 25% ของความสูงจอ) */
   const STACK_TOWER_POST50_VIEW_SHIFT_SCREEN_FRAC = 0.25;
   /** Mega Virus — balloon_boss ฉากภารกิจ (flow เดียวกับ crown / mno9kb07) รูปใน `/Game/img/MegaVirus` */
@@ -4380,6 +4382,10 @@
     return isStack() && currentPlayMapId() === STACK_TOWER_MISSION_MAP_ID;
   }
 
+  function getStackTowerBlockWorldScalePlay() {
+    return isStackTowerMissionUiMapPlay() ? STACK_TOWER_BLOCK_WORLD_SCALE : 1;
+  }
+
   function isStackTowerMissionPregameBlockingPlay() {
     if (!isStackTowerMissionUiMapPlay()) return false;
     return stackTowerMissionPhase != null && stackTowerMissionPhase !== 'live' && stackTowerMissionPhase !== 'ended';
@@ -4490,7 +4496,7 @@
       if (li < 0 || li >= m.layers.length) continue;
       if (li < hidPop) continue;
       const L = m.layers[li];
-      const lw = (L.w != null ? L.w : m.initialWidthTiles) * tileSize;
+      const lw = (L.w != null ? L.w : m.initialWidthTiles) * tileSize * getStackTowerBlockWorldScalePlay();
       const cxW = L.cx * tileSize;
       const yb = floorY - (li + 1 - hidPop) * layerWorldH;
       const xl = cxW - lw / 2;
@@ -8744,7 +8750,8 @@
       : autoW;
     stackFall = null;
     const towerMission = isStackTowerMissionUiMapPlay();
-    const towerLayerStripH = Math.max(14, tileSize * 0.31);
+    const towerMul = towerMission ? STACK_TOWER_BLOCK_WORLD_SCALE : 1;
+    const towerLayerStripH = Math.max(14, tileSize * 0.31) * towerMul;
     const missMax = Math.max(1, Math.min(20, Math.floor(Number(playStackTeamMissesMax) || 3)));
     stackMini = {
       topCenterX: towerCX,
@@ -8966,6 +8973,8 @@
     const land = getStackAreaBoundsPlay(mapData.stackLandArea, wMap, hMap);
     const fallWRaw = m.widthTiles != null && Number.isFinite(m.widthTiles) ? m.widthTiles : m.initialWidthTiles;
     const fallW = Math.max(0.85, Math.min(3.2, fallWRaw));
+    const wMul = getStackTowerBlockWorldScalePlay();
+    const fallWEff = fallW * wMul;
     let supportCx;
     let supportW;
     if (m.layers.length === 0) {
@@ -8978,15 +8987,15 @@
       supportW = Math.max(0.85, Math.min(3.2, swR));
     }
     const c1 = m.topCenterX + raw;
-    const half1 = fallW * 0.5;
-    const half0 = supportW * 0.5;
+    const half1 = fallWEff * 0.5;
+    const half0 = (m.layers.length === 0 ? supportW : supportW * wMul) * 0.5;
     const left = Math.max(supportCx - half0, c1 - half1);
     const right = Math.min(supportCx + half0, c1 + half1);
     const overlap = right - left;
     const missThreshold =
       m.layers.length === 0
-        ? Math.max(STACK_OVERLAP_MISS_MIN_ON_LAND, fallW * STACK_OVERLAP_MISS_FRAC_ON_LAND)
-        : Math.max(STACK_OVERLAP_MISS_MIN_ON_LAYER, fallW * STACK_OVERLAP_MISS_FRAC_ON_LAYER);
+        ? Math.max(STACK_OVERLAP_MISS_MIN_ON_LAND, fallWEff * STACK_OVERLAP_MISS_FRAC_ON_LAND)
+        : Math.max(STACK_OVERLAP_MISS_MIN_ON_LAYER, fallWEff * STACK_OVERLAP_MISS_FRAC_ON_LAYER);
     const overlapMiss = overlap < missThreshold;
     const placedCx = c1;
     let driftMiss = false;
@@ -9018,7 +9027,7 @@
       const bonus = perfect ? Math.min(4, comboBefore) : 0;
       pts = perfect ? (2 + bonus) : (miss ? 0 : 1);
     }
-    const supportRatio = fallW > 0 ? overlap / fallW : 0;
+    const supportRatio = fallWEff > 0 ? overlap / fallWEff : 0;
     return {
       miss,
       perfect,
@@ -9045,7 +9054,7 @@
     const m = stackMini;
     const actorSeat = m.pendingDropSeat != null ? m.pendingDropSeat : getStackDropActorSeat();
     const actorHeavy = !!m.pendingDropHeavy;
-    const tw = m.widthTiles * tileSize;
+    const tw = m.widthTiles * tileSize * getStackTowerBlockWorldScalePlay();
     const swingXW = (m.topCenterX + m.swingAmp * Math.sin(m.phase)) * tileSize;
     const lh = m.layerWorldH || Math.max(14, tileSize * 0.3);
     const swingLift = getStackTowerSwingLiftWorldPx(m.layers.length, lh);
@@ -9280,6 +9289,7 @@
     if (!stackMini) return;
     const m = stackMini;
     const towerHudLive = isStackTowerMissionHudActivePlay();
+    const wMul = getStackTowerBlockWorldScalePlay();
     ensureStackNextDropVisual();
     const layerWorldH = m.layerWorldH || Math.max(14, tileSize * 0.3);
     const stripH = m.blockStripH || Math.max(16, tileSize * 0.32);
@@ -9292,7 +9302,7 @@
     const nLay = m.layers.length;
     for (let i = hidLayers; i < nLay; i++) {
       const L = m.layers[i];
-      const lw = (L.w != null ? L.w : m.initialWidthTiles) * tileSize;
+      const lw = (L.w != null ? L.w : m.initialWidthTiles) * tileSize * wMul;
       const cxW = L.cx * tileSize;
       const yb = floorY - (i + 1 - hidLayers) * layerWorldH;
       const xl = cxW - lw / 2;
@@ -9319,7 +9329,7 @@
         const ti = fxX2.topLayerIndex;
         if (ti >= hidLayers && ti >= 0 && ti < m.layers.length) {
           const Ltop = m.layers[ti];
-          const lwT = (Ltop.w != null ? Ltop.w : m.initialWidthTiles) * tileSize;
+          const lwT = (Ltop.w != null ? Ltop.w : m.initialWidthTiles) * tileSize * wMul;
           const cxWT = Ltop.cx * tileSize;
           const ybT = floorY - (ti + 1 - hidLayers) * layerWorldH;
           const xlT = cxWT - lwT / 2;
@@ -9359,7 +9369,7 @@
       drawStackBlockSpriteOrHue(ctx, -drawW / 2, -drawH / 2, drawW, drawH, seatS, heavyS, hue, {});
       ctx.restore();
     } else {
-      const twWorld = m.widthTiles * tileSize;
+      const twWorld = m.widthTiles * tileSize * wMul;
       const drawStripPx = stripH * zoom;
       const swingDrawYDraw = isStackTowerMissionUiMapPlay() ? swingDrawY + visualLiftWorld : swingDrawY;
       const cableTopY = isStackTowerMissionUiMapPlay()

www/html/Game/public/play.html

@@ -3202,7 +3202,7 @@
   </div>
   <script src="/Game/socket.io/socket.io.js"></script>
     <script src="js/version.js?v=0.0306"></script>
-    <script src="js/play.js?v=0.0375"></script>
+    <script src="js/play.js?v=0.0376"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>

www/html/Login/index.html

@@ -45,6 +45,7 @@
     </div>
   </div>
 
+  <script src="../app-base.js"></script>
   <script src="login.js?v=0.02"></script>
 </body>
 </html>

www/html/Login/style.css

@@ -1,12 +1,11 @@
 * { box-sizing: border-box; }
 
-/* โทนสีตาม reference (localhost/testCSS) – ฟ้าไฟฟ้า / navy */
+/* โทนสีตาม reference – ฟ้าไฟฟ้า / navy */
 :root {
-  /* --jd-cyan: #00d4ff; */
-  /* --jd-cyan-glow: rgba(0, 212, 255, 0.6); */
-  /* --jd-cyan-soft: rgba(0, 212, 255, 0.35); */
-  /* --jd-navy: #0a0e1a; */
-  /* --jd-navy-overlay: rgba(5, 12, 28, 0.4); */
+  --jd-cyan: #00d4ff;
+  --jd-cyan-soft: rgba(0, 212, 255, 0.35);
+  --jd-panel-bg: rgba(6, 12, 26, 0.6);
+  --jd-panel-border: rgba(43, 210, 255, 0.85);
 }
 
 html {
@@ -37,6 +36,16 @@ body {
   overflow: hidden;
 }
 
+.login-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 44%, rgba(0, 180, 255, 0.2), transparent 52%),
+    linear-gradient(to bottom, rgba(2, 6, 18, 0.1), rgba(2, 6, 18, 0.35));
+  pointer-events: none;
+}
+
 .login-bg-img {
   position: absolute;
   top: 0;
@@ -81,6 +90,7 @@ body {
   align-items: flex-start;
   padding: clamp(1.5rem, 5vw, 2.5rem) 1rem 0;
   pointer-events: none;
+  box-sizing: border-box;
 }
 
 /* ชั้นที่ 3: ข้อความ + พาเนล (อยู่บนโลโก้) */
@@ -91,8 +101,8 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 2rem 1rem;
+  justify-content: flex-end;
+  padding: clamp(8.5rem, 12vh, 11rem) 1rem clamp(3.2rem, 7.5vh, 6.5rem);
   background: transparent;
 }
 
@@ -125,10 +135,9 @@ body {
 /* โลโก้ – ไม่มี filter สีเต็ม มีแค่ screen ที่ layer แม่ให้ดำโปร่ง */
 .brand-jd-img {
   display: block;
-  width: auto;
+  width: min(56vw, 680px);
   max-width: 100%;
   height: auto;
-  vertical-align: middle;
 }
 
 /* ซ่อนเพราะโลโก้รูปมี JUSTICE DIVERS อยู่แล้ว */
@@ -148,16 +157,21 @@ body {
   position: relative;
   z-index: 1;
   width: 100%;
-  max-width: clamp(340px, 32vw, 520px);
-  background: rgba(10, 14, 26, 0.72);
-  border: 1px solid var(--jd-cyan);
+  max-width: clamp(440px, 40vw, 620px);
+  min-height: clamp(290px, 30vh, 340px);
+  background: var(--jd-panel-bg);
+  border: 1px solid var(--jd-panel-border);
   border-radius: clamp(15px, 1.5vw, 20px);
-  padding: clamp(1rem, 1.2vw, 1.5rem) clamp(1.5rem, 2vw, 2rem) clamp(1rem, 1.2vw, 1.35rem);
+  padding: clamp(1.15rem, 1.4vw, 1.55rem) clamp(1.5rem, 2.2vw, 2.2rem) clamp(1.1rem, 1.3vw, 1.45rem);
   box-sizing: border-box;
   box-shadow:
-    0 0 28px var(--jd-cyan-soft),
-    0 0 56px rgba(0, 212, 255, 0.12),
+    0 0 0 1px rgba(170, 243, 255, 0.12),
+    0 18px 45px rgba(0, 0, 0, 0.38),
+    0 0 30px var(--jd-cyan-soft),
+    0 0 62px rgba(0, 212, 255, 0.12),
     inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 
 /* ตาม mock: หัวข้อกลาง พอดี */
@@ -169,35 +183,40 @@ body {
 
 .panel-title-img {
   display: block;
-  width: 50%;
-  max-width: 50%;
+  width: 56%;
+  max-width: 56%;
   height: auto;
   margin: 0 auto;
   object-fit: contain;
   object-position: center;
 }
 
-/* ตาม mock: ปุ่ม FB / Google เรียงแนวนอน มีระยะเล็กระหว่างปุ่ม */
+/* ปุ่ม FB / Google: แถวเดียวเต็มความกว้างพาเนล (100%) แบ่งซ้าย–ขวาเท่ากัน */
 .login-actions {
   display: flex;
   flex-direction: row;
-  gap: clamp(0.35rem, 1vw, 0.5rem);
-  justify-content: center;
   align-items: stretch;
+  justify-content: center;
+  gap: clamp(0.45rem, 1.3vw, 0.7rem);
+  width: 100%;
   max-width: 100%;
   margin: 0 auto;
 }
 
-/* ปุ่มโซเชียลใช้รูป – รักษา ratio ไม่ยืด */
+/* ปุ่มโซเชียลใช้รูป – ครึ่งแถวต่อปุ่ม รวมแถว = 100% */
 .btn-social {
   flex: 1 1 0;
+  width: auto;
   min-width: 0;
+  min-height: clamp(50px, 5.6vw, 60px);
   padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
   transition: transform 0.15s, opacity 0.15s;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-social:hover {
@@ -211,17 +230,11 @@ body {
   display: block;
   width: 100%;
   height: auto;
-  max-height: 52px;
-  vertical-align: middle;
+  max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
 
-.btn-facebook,
-.btn-google {
-  /* สไตล์มาจากรูปแล้ว */
-}
-
 /* ตาม mock: เส้นคั่น + "หรือ" กลาง */
 .login-or {
   text-align: center;
@@ -239,13 +252,14 @@ body {
   object-position: center;
 }
 
-/* ตาม mock: ปุ่ม Guest ไม่มีกรอบ ใช้เฉพาะรูปพื้นหลัง */
+/* ปุ่ม Guest: เต็มแนวคิดแบบ 100% แต่เว้นซ้าย–ขวาอย่างละ 20% (= กว้างปุ่ม 60% กลาง) */
 .btn-guest {
-  width: 100%;
-  max-width: 100%;
+  width: 58%;
+  max-width: 58%;
   min-height: clamp(44px, 5vh, 52px);
-  margin: 0 auto;
-  padding: clamp(0.4rem, 0.8vw, 0.55rem) 1rem;
+  margin-left: 21%;
+  margin-right: 21%;
+  padding: clamp(0.4rem, 0.8vw, 0.55rem) 0.5rem;
   border: none;
   border-radius: clamp(10px, 1vw, 12px);
   background-color: transparent;
@@ -257,6 +271,7 @@ body {
   cursor: pointer;
   transition: transform 0.15s, opacity 0.15s;
   display: block;
+  box-sizing: border-box;
 }
 
 .btn-guest:hover {
@@ -264,13 +279,13 @@ body {
   transform: translateY(-1px);
 }
 
-/* ตาม mock: ข้อความเล็กขาว ลิงก์นโยบายขีดเส้นใต้ */
+/* นโยบายความเป็นส่วนตัว – ตัวอักษร/รูปเล็กลง */
 .login-legal {
-  margin: clamp(0.5rem, 0.8vw, 0.65rem) 0 0 0;
+  margin: clamp(0.5rem, 0.75vw, 0.65rem) 0 0 0;
   text-align: center;
-  line-height: 1.45;
-  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
-  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.35;
+  font-size: clamp(0.6rem, 2.4vw, 0.72rem);
+  color: rgba(255, 255, 255, 0.85);
 }
 
 .login-legal a {
@@ -284,10 +299,18 @@ body {
   opacity: 0.9;
 }
 
+.btn-social:focus-visible,
+.btn-guest:focus-visible,
+.login-legal a:focus-visible {
+  outline: 2px solid #7ce9ff;
+  outline-offset: 2px;
+  border-radius: 10px;
+}
+
 .login-legal-img {
   display: block;
-  width: 100%;
-  max-width: 100%;
+  width: auto;
+  max-width: min(72%, 240px);
   height: auto;
   margin: 0 auto;
   object-fit: contain;
@@ -296,12 +319,30 @@ body {
 
 /* ========== Responsive: มือถือ / แท็บเล็ต / แนวตั้ง–แนวนอน ========== */
 
+/* มือถือ / แท็บเล็ก (≤768px): แถวเดียวเต็มความกว้าง ปรับ gap / ความสูง */
+@media (max-width: 768px) {
+  .login-actions {
+    flex-direction: row;
+    gap: clamp(0.3rem, 2vw, 0.55rem);
+  }
+
+  .btn-social {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+    min-height: clamp(44px, 11vw, 52px);
+  }
+
+  .btn-social-img {
+    max-height: 100%;
+  }
+}
+
 /* มือถือ แนวตั้ง (portrait) */
 @media (max-width: 480px) {
   .login-page {
-    padding: 1rem 0.75rem;
-    justify-content: flex-start;
-    padding-top: max(1rem, env(safe-area-inset-top));
+    justify-content: center;
+    padding: max(1rem, env(safe-area-inset-top)) 0.75rem max(1rem, env(safe-area-inset-bottom));
   }
 
   .login-brand {
@@ -322,72 +363,145 @@ body {
   .panel-title { margin-bottom: 0.5rem; }
 
   .login-actions {
-    flex-direction: column;
-    max-width: 100%;
-    gap: 0.5rem;
+    gap: 0.4rem;
   }
 
   .btn-social {
     min-height: 48px;
   }
 
+  .btn-social-img {
+    max-height: 90%;
+  }
+
   .login-or { margin: 0.4rem 0; }
 
   .btn-guest {
-    max-width: 100%;
+    width: 62%;
+    max-width: 62%;
+    margin-left: 19%;
+    margin-right: 19%;
     min-height: 48px;
   }
 
-  .login-legal { margin-top: 0.5rem; }
+  .login-legal { margin-top: 0.45rem; }
 
   .panel-title-img,
-  .login-or-img,
-  .login-legal-img {
+  .login-or-img {
     max-width: 100%;
   }
 
+  .login-legal-img {
+    max-width: min(68%, 200px);
+  }
+
   .login-char-img {
     max-height: 85vh;
   }
 }
 
-/* มือถือ แนวนอน (landscape) – ความสูงน้อย */
+/* มือถือ แนวนอน (landscape) – พาเนลกะทัดรัด ปุ่ม FB+Google แถวเดียวเต็มความกว้าง */
 @media (max-width: 896px) and (orientation: landscape) {
   .login-page {
-    padding: 0.5rem 1rem;
+    padding: max(0.35rem, env(safe-area-inset-top)) 0.75rem max(0.35rem, env(safe-area-inset-bottom));
     min-height: 100dvh;
+    min-height: 100svh;
     justify-content: center;
+    align-items: center;
   }
 
   .login-brand {
-    min-height: clamp(60px, 15vh, 90px);
-    margin-bottom: 0.5rem;
+    min-height: clamp(40px, 12vh, 72px);
+    margin-bottom: 0.35rem;
   }
 
   .login-logo-layer {
-    padding: 0.5rem 0.5rem 0;
+    overflow: hidden;
+    /* ดึงโลโก้ห่างจากขอบบน: safe-area + ระยะ breath */
+    padding: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.45rem)) max(0.5rem, env(safe-area-inset-right)) 0 max(0.5rem, env(safe-area-inset-left));
+    align-items: flex-start;
+  }
+
+  .login-logo-layer .brand-jd-img {
+    max-width: min(68vw, calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
+    max-height: min(10dvh, 10svh, 48px);
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    object-position: center top;
+    margin: 0 auto;
   }
 
   .login-panel {
-    max-width: min(380px, 90vw);
-    padding: 1rem 1.25rem;
+    max-width: min(360px, 88vw);
+    width: 100%;
+    padding: 0.65rem 1rem 0.75rem;
+    margin: 0 auto;
   }
 
-  .panel-title { margin-bottom: 0.4rem; }
+  .panel-title { margin-bottom: 0.35rem; }
+
+  .panel-title-img {
+    max-width: 55%;
+  }
 
   .login-actions {
     flex-direction: row;
-    max-width: 100%;
+    align-items: stretch;
+    gap: 0.35rem;
   }
 
-  .login-or { margin: 0.3rem 0; }
+  .btn-social {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+    min-height: 42px;
+  }
 
-  .btn-guest { min-height: 44px; }
+  .btn-social-img {
+    max-height: 90%;
+  }
 
-  .login-legal { margin-top: 0.4rem; }
+  .login-or { margin: 0.25rem 0; }
+
+  .btn-guest {
+    width: 62%;
+    max-width: 62%;
+    min-height: 42px;
+    margin-left: 19%;
+    margin-right: 19%;
+  }
+
+  .login-legal {
+    margin-top: 0.3rem;
+    font-size: clamp(0.52rem, 1.8vh, 0.62rem);
+  }
+
+  .login-legal-img {
+    max-width: min(65%, 180px);
+  }
 
   .login-char-img {
-    max-height: 65vh;
+    max-height: min(58vh, 100dvh - 120px);
+    object-position: center bottom;
+  }
+}
+
+/* แนวนอนจอเตี้ย (มือถือ/แท็บกว้าง): จำกัดโลโก้ไม่ล้นซ้าย–ขวา */
+@media (orientation: landscape) and (max-height: 520px) {
+  .login-logo-layer {
+    overflow: hidden;
+    padding: max(0.75rem, calc(env(safe-area-inset-top, 0px) + 0.45rem)) max(0.5rem, env(safe-area-inset-right)) 0 max(0.5rem, env(safe-area-inset-left));
+  }
+
+  .login-logo-layer .brand-jd-img {
+    max-width: min(65vw, calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
+    max-height: min(10dvh, 10svh, 50px);
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    object-position: center top;
+    margin: 0 auto;
   }
 }
 
@@ -402,16 +516,24 @@ body {
   }
 
   .login-actions {
-    max-width: 340px;
+    width: 100%;
   }
 
   .panel-title-img,
-  .login-or-img,
-  .login-legal-img {
+  .login-or-img {
     max-width: 340px;
   }
 
-  .btn-guest { max-width: 340px; }
+  .login-legal-img {
+    max-width: min(70%, 210px);
+  }
+
+  .btn-guest {
+    width: 62%;
+    max-width: 62%;
+    margin-left: 19%;
+    margin-right: 19%;
+  }
 
   .login-char-img {
     max-height: 78vh;
@@ -421,29 +543,47 @@ body {
 /* แท็บเล็ต แนวนอน */
 @media (min-width: 769px) and (max-width: 1024px) {
   .login-panel {
-    max-width: 420px;
+    max-width: 460px;
   }
 
   .login-actions {
-    max-width: 360px;
+    width: 100%;
   }
 
   .panel-title-img,
-  .login-or-img,
-  .login-legal-img {
+  .login-or-img {
     max-width: 360px;
   }
 
-  .btn-guest { max-width: 360px; }
+  .login-legal-img {
+    max-width: min(72%, 220px);
+  }
+
+  .btn-guest {
+    width: 62%;
+    max-width: 62%;
+    margin-left: 19%;
+    margin-right: 19%;
+  }
 }
 
-/* จอเล็กมาก + แนวตั้ง – ปุ่มโซเชียลเรียงเป็นแถวเดียวแนวนอนได้แต่ไม่บีบเกิน */
+/* จอเล็กมาก – แถวเดียวคงไว้ ลดช่องว่างระหว่างปุ่ม */
 @media (max-width: 360px) {
   .login-panel {
     padding: 1rem 0.75rem;
   }
 
   .login-actions {
-    gap: 0.35rem;
+    flex-direction: row;
+    gap: 0.28rem;
+  }
+
+  .btn-social {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .btn-social-img {
+    max-height: 44px;
   }
 }