minigame 3add more design 1.66

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

@@ -15,6 +15,9 @@
   const previewMode = params.get('preview') === '1';
   const forceDefaultCharacter = params.get('defaultChar') === '1';
   const editorEmbedReturn = params.get('editorEmbed') === '1';
+  if (previewMode && editorEmbedReturn) {
+    try { document.documentElement.classList.add('play-preview-editor-embed'); } catch (e) { /* ignore */ }
+  }
   const playMapIdFromQuery = (params.get('map') || '').trim();
   /** mapId จาก join / game-start — ใช้จับฉาก crown เมื่อ URL ไม่มี ?map= */
   let playSessionMapId = playMapIdFromQuery;

www/html/Game/public/play.html

@@ -551,7 +551,7 @@
       z-index: 10120;
       top: max(52px, calc(env(safe-area-inset-top) + 46px));
     }
-    /* พรีวิว embed quiz_carry: How to play + Ready / START ก่อน 3–2–1 */
+    /* พรีวิว embed quiz_carry: How to play — โครง/โกลว์ให้ใกล้ gauntlet-crown-howto (Stack mnn93hpi รูป2) */
     #quiz-carry-pregame-overlay {
       position: fixed;
       inset: 0;
@@ -562,12 +562,15 @@
       padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
       box-sizing: border-box;
     }
+    html.play-preview-editor-embed #quiz-carry-pregame-overlay {
+      z-index: 10138;
+    }
     #quiz-carry-pregame-overlay.is-hidden { display: none !important; }
     .quiz-carry-pregame-backdrop {
       position: absolute;
       inset: 0;
-      background: rgba(4, 6, 14, 0.78);
-      backdrop-filter: blur(10px);
+      background: rgba(6, 8, 18, 0.78);
+      backdrop-filter: blur(5px);
     }
     .quiz-carry-pregame-sr-only {
       position: absolute;
@@ -585,63 +588,74 @@
       z-index: 1;
       display: flex;
       flex-direction: column;
-      align-items: stretch;
-      max-width: min(94vw, 900px);
-      width: 100%;
-      max-height: min(94vh, 900px);
-      overflow: hidden;
-      background: rgba(10, 12, 26, 0.55);
+      align-items: center;
+      width: min(96vw, 920px);
+      max-width: min(96vw, 920px);
+      max-height: min(92vh, 640px);
+      overflow: visible;
+      padding: clamp(4px, 1.2vw, 10px);
+      background: transparent;
       border: none;
-      border-radius: 4px;
+      border-radius: 14px;
       box-shadow: none;
       pointer-events: auto;
     }
     .quiz-carry-pregame-art {
-      flex: 1 1 auto;
+      flex: 0 1 auto;
+      width: 100%;
       min-height: 0;
       margin: 0;
       padding: 0;
-      overflow: auto;
+      overflow: visible;
       background: transparent;
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       justify-content: center;
     }
     .quiz-carry-pregame-howto-img {
       display: block;
       width: 100%;
       height: auto;
-      max-height: min(62vh, 560px);
+      max-height: min(88vh, 600px);
       object-fit: contain;
-      object-position: top center;
+      object-position: center center;
       border: none;
       outline: none;
-      box-shadow: none;
+      pointer-events: none;
+      filter: drop-shadow(0 0 18px rgba(0, 255, 240, 0.25)) drop-shadow(0 0 22px rgba(255, 0, 200, 0.2));
     }
     .quiz-carry-pregame-footer {
+      position: absolute;
+      left: 50%;
+      bottom: clamp(6px, 1.6vmin, 14px);
+      transform: translateX(-50%);
+      width: min(92%, 280px);
       flex: 0 0 auto;
-      padding: 0.85rem 1rem 1rem;
-      background: linear-gradient(180deg, rgba(8, 10, 22, 0.2), rgba(8, 10, 22, 0.96));
-      border-top: none;
+      padding: 0;
+      background: transparent;
+      border: none;
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 0.65rem;
+      gap: 4px;
+      pointer-events: none;
     }
     .quiz-carry-pregame-status {
       margin: 0;
+      max-width: 100%;
       text-align: center;
-      font: 700 clamp(0.8rem, 2.4vw, 0.95rem) / 1.35 system-ui, "Kanit", sans-serif;
-      color: #fbcfe8;
-      text-shadow: 0 0 16px rgba(244, 114, 182, 0.5);
+      font: 800 clamp(0.75rem, 2vw, 0.9rem) / 1.35 system-ui, "Kanit", sans-serif;
+      color: #f8fafc;
+      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55);
       letter-spacing: 0.02em;
     }
     .quiz-carry-pregame-actions {
       display: flex;
       flex-wrap: wrap;
-      gap: 0.85rem 1.25rem;
+      gap: 0.5rem 1rem;
       justify-content: center;
       align-items: center;
+      pointer-events: auto;
     }
     .quiz-carry-pregame-primary-btn {
       background: transparent;
@@ -654,7 +668,7 @@
     }
     .quiz-carry-pregame-primary-btn:hover:not(:disabled):not(.is-read-only) {
       transform: scale(1.03);
-      filter: brightness(1.08);
+      filter: brightness(1.08) drop-shadow(0 0 10px rgba(0, 255, 240, 0.35));
     }
     .quiz-carry-pregame-primary-btn.is-pressed:not(.is-start-phase) {
       filter: brightness(1.12) drop-shadow(0 0 12px rgba(94, 234, 212, 0.55));
@@ -668,7 +682,7 @@
     }
     .quiz-carry-pregame-primary-btn img {
       display: block;
-      width: min(220px, 42vw);
+      width: min(240px, 70vw);
       height: auto;
     }
     #play-quiz-scoreboard {
@@ -2753,7 +2767,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.0260"></script>
+    <script src="js/play.js?v=0.0261"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>