fix(play): quiz_carry embed question bar top + kicker + field fallbacks

- move embed question strip below header (avoid canvas bottom HUD overlap)
- add kicker label; raise z-index; widen typography
- normalizeQuizCarryQuestionFromAny: question/prompt/title; default stem if choices only
- formatQuizCarryQuestionHud: same field fallbacks
- play.js v=0.090

Made-with: Cursor

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

@@ -1490,14 +1490,16 @@
   }
 
   function normalizeQuizCarryQuestionFromAny(q) {
-    if (!q || !String(q.text || '').trim()) return null;
-    const text = String(q.text).trim();
+    if (!q) return null;
+    let text = String(q.text || q.question || q.prompt || q.title || '').trim();
     if (Array.isArray(q.choices) && q.choices.length >= 2) {
       const choices = q.choices.map((c) => String(c));
       let ci = Number(q.correctIndex);
       if (!Number.isFinite(ci) || ci < 0 || ci >= choices.length) ci = 0;
+      if (!text) text = 'เลือกคำตอบที่ถูกต้อง — หยิบตัวเลือกไปวางโซนส่งคำตอบ';
       return { text, choices, correctIndex: ci };
     }
+    if (!text) return null;
     const t = !!q.answerTrue;
     return { text, choices: ['จริง', 'เท็จ'], correctIndex: t ? 0 : 1 };
   }
@@ -1859,7 +1861,7 @@
   /** ข้อความใน HUD / โซนคำถาม — ไม่รวมตัวเลือก (แสดงบนแผนที่ตามจุดสี) */
   function formatQuizCarryQuestionHud(q) {
     if (!q) return '';
-    return String(q.text || '').trim();
+    return String(q.text || q.question || q.prompt || q.title || '').trim();
   }
 
   function quizCarryRestoreEmbedPhaseLabel() {

www/html/Game/public/play.html

@@ -121,34 +121,45 @@
       text-shadow: 0 0 48px rgba(255, 224, 102, 0.55), 0 4px 24px rgba(0, 0, 0, 0.65);
       letter-spacing: -0.04em;
     }
+    /* ด้านบน: ไม่ชน HUD ล่างบนแคนวาส + เห็นชัดกว่าแถบล่าง */
     #quiz-carry-embed-q-strip {
       position: fixed;
       left: 50%;
-      bottom: max(52px, calc(env(safe-area-inset-bottom) + 44px));
+      top: max(52px, calc(env(safe-area-inset-top) + 46px));
+      bottom: auto;
       transform: translateX(-50%);
-      z-index: 10075;
-      max-width: min(92vw, 640px);
-      padding: 0.45rem 0.75rem 0.5rem;
+      z-index: 10100;
+      max-width: min(92vw, min(640px, calc(100vw - 200px)));
+      padding: 0.4rem 0.75rem 0.48rem;
       border-radius: 12px;
-      background: rgba(12, 14, 28, 0.94);
-      border: 1px solid rgba(122, 162, 247, 0.45);
-      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+      background: rgba(12, 14, 28, 0.96);
+      border: 1px solid rgba(122, 162, 247, 0.55);
+      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
       pointer-events: none;
     }
     #quiz-carry-embed-q-strip.is-hidden { display: none !important; }
+    .quiz-carry-embed-q-strip-kicker {
+      display: block;
+      font: 800 0.58rem / 1.2 system-ui, "Kanit", sans-serif;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: #7aa2f7;
+      margin: 0 0 0.2rem;
+      text-align: center;
+    }
     #quiz-carry-embed-q-strip-text {
       margin: 0;
-      font: 600 clamp(0.78rem, 2.2vmin, 1.05rem) / 1.45 system-ui, "Kanit", sans-serif;
-      color: #f1f5f9;
+      font: 600 clamp(0.82rem, 2.4vmin, 1.12rem) / 1.45 system-ui, "Kanit", sans-serif;
+      color: #f8fafc;
       text-align: center;
-      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
-      max-height: 22vh;
+      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
+      max-height: min(28vh, 200px);
       overflow: auto;
     }
-    /* อยู่เหนือ overlay นับถอยหลัง (10080) เพื่อให้อ่านคำถามระหว่าง 3–2–1 */
+    /* ระหว่าง 3–2–1 อยู่เหนือ overlay นับถอยหลัง (10080) */
     #quiz-carry-embed-q-strip.quiz-carry-embed-q-strip--countdown {
-      z-index: 10082;
-      bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
+      z-index: 10120;
+      top: max(52px, calc(env(safe-area-inset-top) + 46px));
     }
     #play-quiz-scoreboard {
       position: fixed;
@@ -664,6 +675,7 @@
     <div id="quiz-carry-embed-countdown-inner"><span id="quiz-carry-embed-countdown-num">3</span></div>
   </div>
   <div id="quiz-carry-embed-q-strip" class="is-hidden" role="status" aria-live="polite" aria-atomic="true" aria-hidden="true">
+    <span class="quiz-carry-embed-q-strip-kicker">คำถาม · Question</span>
     <p id="quiz-carry-embed-q-strip-text"></p>
   </div>
   <div id="quiz-game-overlay" class="is-hidden" role="status" aria-live="polite" aria-atomic="true">
@@ -724,7 +736,7 @@
   </div>
   <script src="/Game/socket.io/socket.io.js"></script>
   <script src="js/version.js?v=0.0166"></script>
-  <script src="js/play.js?v=0.089"></script>
+  <script src="js/play.js?v=0.090"></script>
   <div class="version-tag">v —</div>
 </body>
 </html>