/* อีโมต/ท่าทาง (emote.js · 4 ต.ค.) — วงล้อเลือกท่า · ปุ่มข้างแชท · ปุ่มกลมจอสัมผัส · ฟองไอคอนเหนือหัว
   ชั้น: วงล้อ = Popup (--z-popup) ทั้งคอมและจอสัมผัส · ปุ่มกลมอยู่ใน #fabs (โซน tr ของ ui-root.js) ไม่ตั้งตำแหน่งเอง */

#emote-wheel { position: fixed; inset: 0; z-index: var(--z-popup, 300); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(20, 28, 36, .32), rgba(20, 28, 36, .12) 60%, transparent 80%); }
#emote-wheel[hidden] { display: none; }
#emote-wheel .ew-ring { --r: 122px; --s: 74px; position: relative; width: calc(var(--r) * 2 + var(--s)); height: calc(var(--r) * 2 + var(--s)); zoom: var(--ui, 1); }
#emote-wheel .ew-item, #emote-wheel .ew-close {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; cursor: pointer;
  font-family: var(--font, inherit); color: #3a2a12;
  background: radial-gradient(circle at 50% 30%, #fffaf0, #f1dfb8 75%);
  border: 2px solid #e8b64a; box-shadow: 0 0 0 2px #7a4a1a, 0 4px 10px #0005;
  translate: calc(-50% + var(--x, 0) * var(--r)) calc(-50% + var(--y, 0) * var(--r));
  animation: ewPop .16s ease-out both;
}
#emote-wheel .ew-item:hover, #emote-wheel .ew-item:focus-visible { background: radial-gradient(circle at 50% 30%, #fff, #f6d58a 75%); scale: 1.08; outline: none; }
#emote-wheel .ew-ic { font-size: 28px; line-height: 1; }
#emote-wheel .ew-item b { font: 600 13px/1.1 var(--font, inherit); white-space: nowrap; }
#emote-wheel .ew-item kbd { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; font: 700 11px/18px var(--font, inherit);
  background: #2f6f73; color: #fff; border: 1px solid #e8b64a; }
#emote-wheel.touch .ew-ring { --r: 100px; --s: 66px; }   /* จอแนวนอนสูง ~390px — วงเล็กลงให้พ้นแถบบนจอ */
#emote-wheel.touch .ew-item kbd { display: none; }   /* จอสัมผัสไม่มีแป้นตัวเลข */
#emote-wheel .ew-close { --x: 0; --y: 0; width: 58px; height: 58px; font-size: 20px; font-weight: 700;
  background: radial-gradient(circle at 50% 32%, #47525e, #2b333c 72%); color: #f3e8ce; }
#emote-wheel .ew-close small { font: 500 11px/1 var(--font, inherit); opacity: .85; }
@keyframes ewPop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

/* ปุ่ม 😊 ข้างช่องพิมพ์แชท (คอม) */
#chat .chat-bar #chat-emote { flex: none; min-width: 30px; padding: 0 6px; font-size: 16px; line-height: 1; cursor: pointer; }

/* ปุ่มกลมจอสัมผัส: หน้ายิ้มวาดด้วย CSS ชุดเดียวกับ ☰ / 💬 (ui-kit.css) — แผ่นครีม ตา+ปากสีแผ่นปุ่ม */
html.touch-ui body #hud #fabs [data-key="emote"]::before {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 33% 38%, #2b333c 0 2px, transparent 2.5px), radial-gradient(circle at 67% 38%, #2b333c 0 2px, transparent 2.5px), #f3e8ce;
}
html.touch-ui body #hud #fabs [data-key="emote"]::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% 1px; width: 10px; height: 5px;
  border: 2px solid #2b333c; border-top: 0; border-radius: 0 0 8px 8px;
}

/* ปุ่มอีโมตในวิดเจ็ตวงสนทนา (circle.js .ch-top) — นั่งคุยอยู่แล้วโบก/ปรบมือ/หัวเราะได้โดยไม่ต้องพิมพ์ */
#circle-hud .ch-top .ch-emo { margin-left: auto; flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer;
  background: #fffaf0; border: 1.5px solid #e8b64a; }

/* ฟองไอคอนเหนือหัว (main.js renderLabel · ent.emo) — ขอบทอง/ครีมให้อ่านออกบนหญ้า · เด้งเข้า จางออก */
.label .emo-bub { display: inline-grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 3px; border-radius: 50%;
  font-size: 22px; line-height: 1; background: #fffaf0; border: 2px solid #e8b64a; box-shadow: 0 0 0 1.5px #7a4a1a, 0 3px 6px #0004;
  animation: emoBub 2.6s ease-out both; position: relative; }
.label .emo-bub::after { content: ''; position: absolute; left: 50%; bottom: -7px; translate: -50% 0; border: 6px solid transparent; border-bottom: 0; border-top-color: #e8b64a; }
@keyframes emoBub { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 10% { opacity: 1; transform: translateY(0) scale(1.12); } 18% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }