/* วงสนทนา (circle.js · server/circle.js · 3 ต.ค.) — วิดเจ็ต HUD · หน้าเต็ม · ฉลองตอนครบ
   โทนเดียวกับหน้าต่างสังคม (ui-social.css): ครีม #fffaf0 · ทีล #2f6f73 · ทอง #e8b64a (ห้องแชท) · น้ำตาล #342c26
   ⚠️ ไม่มีตัวเลขแต้ม/อันดับ · แถบขยับ = เรืองนุ่ม ๆ (ไม่กระพริบแรง) · ตัวหนังสือ ≥ 13px · สถานะ = ไอคอน + ข้อความ (ไม่ใช้สีอย่างเดียว)
   จอสัมผัส: วิดเจ็ตอยู่โซน tr (ui-root.js ZONES) — ไฟล์นี้ไม่ตั้งตำแหน่งให้มันบนจอสัมผัส · ชั้นใช้ --z-* เท่านั้น */

/* ── วิดเจ็ต ─────────────────────────────────────────── */
/* คอม: z 10 เท่าชิ้น HUD อื่น (#mapbox · #party-hud) — หน้าต่างคอมเริ่มที่ z 21 ต้องอยู่เหนือวิดเจ็ต · จอสัมผัสใช้ชั้นของโซน (ui-touch.css) */
#circle-hud { position: fixed; right: 6px; top: 46%; width: 228px; box-sizing: border-box; z-index: 10; cursor: pointer;
  padding: 8px 10px 9px; border-radius: 14px; background: linear-gradient(#fffaf0, #f6ead0); border: 2px solid #e8b64a; color: #342c26;
  box-shadow: 0 3px 10px rgba(50, 35, 10, .28); font-size: 13px; }
#circle-hud[hidden] { display: none; }
#circle-hud .ch-top { display: flex; align-items: center; gap: 6px; }
#circle-hud .ch-ic { font-size: 18px; }
#circle-hud .ch-name { flex: 1; min-width: 0; font: 800 15px/1.2 var(--font-head, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#circle-hud .ch-n { font-weight: 700; color: #6b5a44; white-space: nowrap; }
#circle-hud .ch-row { display: flex; align-items: baseline; margin-top: 6px; }
#circle-hud .ch-lbl { font: 700 13px var(--font-head, inherit); color: #2f6f73; }
#circle-hud .ch-pct { margin-left: auto; font: 800 14px var(--font-head, inherit); font-style: normal; color: #2f6f73; }
.ch-track, .cc-track { position: relative; height: 10px; margin-top: 3px; border-radius: 999px; background: #e9dcc0; box-shadow: inset 0 1px 2px #0002; overflow: hidden; }
.ch-track i, .cc-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4f9a9e, #2f6f73); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
/* แถบเพิ่ม: เรืองนุ่ม ๆ 1.6 วิ (ไม่มีตัวเลขเด้ง) */
#circle-hud.glow .ch-track, .cc-prog.glow .cc-track { animation: ccGlow 1.6s ease-out; }
#circle-hud.glow .ch-track i, .cc-prog.glow .cc-track i { background: linear-gradient(90deg, #5fb0a8, #3f8a8e 60%, #ffe39a); }
@keyframes ccGlow { 0% { box-shadow: inset 0 1px 2px #0002, 0 0 0 0 #ffe39a00; } 35% { box-shadow: inset 0 1px 2px #0002, 0 0 10px 3px #ffe39acc; } 100% { box-shadow: inset 0 1px 2px #0002, 0 0 0 0 #ffe39a00; } }
#circle-hud.done .ch-track i, .cc-prog.done .cc-track i { background: linear-gradient(90deg, #f2cb6a, #e8b64a); }
#circle-hud .ch-st { display: block; margin-top: 4px; color: #8a5a1a; font-size: 13px; line-height: 1.3; }
#circle-hud .ch-mem { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed #e0cda0; display: grid; gap: 2px; }
#circle-hud .ch-mem li { display: flex; align-items: center; gap: 5px; min-width: 0; }
#circle-hud .ch-mem i { font-style: normal; font-size: 9px; }
#circle-hud .ch-mem .cc-face { width: 22px; height: 22px; }
#circle-hud .ch-mem b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#circle-hud .ch-mem small { color: #8a7a5a; font-size: 12px; white-space: nowrap; }
#circle-hud .ch-mem .more { color: #8a7a5a; justify-content: flex-end; }
#circle-hud .ch-open { display: block; width: 100%; margin-top: 7px; min-height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid #b9954a; background: linear-gradient(#f2cb6a, #e8b64a); color: #4a3512; font: 800 14px var(--font-head, inherit); box-shadow: 0 2px 0 #9a7a2e; }
#circle-hud .ch-open:focus-visible { outline: 3px solid #2f6f73; outline-offset: 2px; }
/* จอสัมผัส: แถบบางในโซนบนกลาง (ใต้ป้ายมอน/แถบพิธี) — ชื่อห้อง · คน · % + หลอด · แตะ = เปิดหน้าเต็ม
   รายชื่อ/สถานะ/ปุ่มดูในหน้าเต็ม (จอแนวนอนสูงแค่ ~390px — กล่องสูงชนปุ่มต่อสู้) */
html.touch-ui body #hud .hz-tc > #circle-hud { width: min(340px, 100%) !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 2px 7px; padding: 5px 10px 6px; border-radius: 12px; }
html.touch-ui #circle-hud[hidden] { display: none !important; }
html.touch-ui #circle-hud .ch-top, html.touch-ui #circle-hud .ch-row { display: contents; }
html.touch-ui #circle-hud .ch-ic { font-size: 15px; }
html.touch-ui #circle-hud .ch-name { font-size: 14px; }
html.touch-ui #circle-hud .ch-n { font-size: 13px; }
html.touch-ui #circle-hud .ch-lbl { display: none; }
html.touch-ui #circle-hud .ch-pct { margin: 0; }
html.touch-ui #circle-hud .ch-track { grid-column: 1 / -1; height: 8px; margin-top: 1px; }
html.touch-ui #circle-hud .ch-mem, html.touch-ui #circle-hud .ch-st, html.touch-ui #circle-hud .ch-open { display: none; }
/* หน้าต่างอื่นเปิดทับ (จอสัมผัส) — ไม่ต้องซ่อน: ชั้น Screen บังอยู่แล้ว */

/* ── หน้าเต็ม ─────────────────────────────────────────── */
#windows .win[data-win="circle"] { box-sizing: border-box; width: min(96vw, 960px); height: min(88vh, 640px); max-height: none; display: flex; flex-direction: column; }
html[data-skin="wood"] body .win[data-win="circle"] > .body { max-height: none; }
#windows .win[data-win="circle"] > .body { padding: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; position: relative; container: ccw / inline-size; }
.cc { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(190px, 220px); grid-template-rows: minmax(0, 1fr);
  background: #fffaf0; color: #342c26; font-size: 14px; }
.cc.cc-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.cc-none .sx-btn { min-width: 200px; }
.cc-none p { margin: 0; max-width: 420px; line-height: 1.5; color: #6b5a44; }
.cc-tabs { display: none; }
/* แถบวงบาง ๆ ใต้หัว (เฉพาะจอแคบที่เป็นแท็บ) — เห็น % ตลอดทุกแท็บ */
.cc-strip { display: none; }
.cc > section { min-height: 0; overflow-y: auto; padding: 10px 12px; }
.cc-info { display: flex; flex-direction: column; gap: 10px; background: #fbf5e7; border-right: 1px solid #e3d2a8; }
.cc-room { display: flex; align-items: center; gap: 8px; }
.cc-cup { font-size: 26px; align-self: flex-start; }
.cc-room > div { flex: 1; min-width: 0; display: grid; }
.cc-room b { font: 800 17px/1.2 var(--font-head, inherit); overflow-wrap: anywhere; }
.cc-room small { font-size: 13px; color: #7a6a4a; }
.cc-n { font-weight: 700; color: #6b5a44; white-space: nowrap; align-self: flex-start; }
.cc-prog, .cc-rew { padding: 10px; border-radius: 12px; background: #fffdf7; border: 1px solid #e6dabb; }
.cc-ph { display: flex; align-items: center; gap: 6px; }
.cc-ph b { font: 800 16px var(--font-head, inherit); color: #2f6f73; }
.cc-pct { margin-left: auto; font: 800 18px var(--font-head, inherit); font-style: normal; color: #2f6f73; }
.cc-q { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: #2f6f73; color: #fffdf6; font: 800 14px/1 var(--font-head, inherit); }
.cc-q:focus-visible { outline: 3px solid #e8b64a; outline-offset: 2px; }
.cc-track { height: 12px; margin-top: 6px; }
.cc-stages { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.cc-stages li { display: grid; justify-items: center; gap: 1px; padding: 4px 2px; border-radius: 9px; opacity: .55; }
.cc-stages li.past { opacity: .85; }
.cc-stages li.on { opacity: 1; background: #fbebb9; box-shadow: inset 0 0 0 1.5px #e8b64a; }
.cc-stages small { font-size: 13px; color: #7a6a4a; white-space: nowrap; letter-spacing: -.2px; }
.cc-stages b { font-size: 12px; line-height: 1.2; color: #4a3520; }
.cc-emo { font-size: 20px; line-height: 1.2; }
.cc-icon { width: 26px; height: 26px; object-fit: contain; }
/* ภาพ Astra ใบ 34 (4 ต.ค.) — ถ้วยชาหัวห้อง/วิดเจ็ต · ขั้นวงใหญ่ขึ้นให้อ่านออก */
.cc-stages .cc-icon { width: 34px; height: 34px; }
.cc-cup .cc-icon { width: 40px; height: 40px; display: block; }
#circle-hud .ch-ic .cc-icon, .cs-ic .cc-icon { width: 22px; height: 22px; display: block; }
.cc-st { margin: 6px 0 0; font-size: 13px; color: #8a5a1a; }
.cc-rh { display: flex; align-items: baseline; gap: 6px; }
.cc-rh b { font: 800 14px var(--font-head, inherit); }
.cc-rh em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; color: #b0761a; }
.cc-rl { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.cc-rl li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cc-rl li span { display: grid; }
.cc-rl small { font-weight: 500; font-size: 13px; color: #7a6a4a; }
.cc-dt { margin-top: 8px; font-size: 13px; }
.cc-dt summary { cursor: pointer; font-weight: 700; color: #2f6f73; min-height: 28px; display: flex; align-items: center; }
.cc-dt ol { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 3px; }
.cc-dt li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 4px 8px; border-radius: 8px; background: #f6efdd; }
.cc-dt li b { margin-left: auto; }
.cc-dt li.next { background: #fbebb9; box-shadow: inset 3px 0 0 #e8b64a; }
.cc-dt li.got { opacity: .7; }
.cc-dt li i { font-style: normal; color: #2c7a3c; }
.cc-dt p { margin: 4px 0 0; color: #6b5a44; line-height: 1.45; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: auto; }

.cc-chat { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
.cc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.cc-empty { margin: auto; text-align: center; color: #8a7a5a; max-width: 320px; line-height: 1.5; }
.cc-ln { display: flex; gap: 8px; align-items: flex-start; }
/* ภาพหน้าจริง (เหมือน .pv-face ของปาร์ตี้ v2) — ระหว่างรอ = ไอคอนอาชีพ */
.cc-face { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 60%, #fff4d6, #efddb2); box-shadow: 0 0 0 2px #e8b64a; }
.cc-face img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cc-face img.real { object-fit: cover; padding: 0; transform: scale(1.12); }
.cc-ln .cc-face { width: 34px; height: 34px; }
.cc-ln small b[data-who] { cursor: pointer; text-decoration: underline dotted #2f6f7380; text-underline-offset: 3px; }
.cc-ln > div { max-width: 82%; padding: 5px 11px 6px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid #ecdfbf; }
.cc-ln small { font-size: 12px; color: #8a7a5a; }
.cc-ln small b { color: #2f6f73; cursor: pointer; }
.cc-ln time { margin-left: 4px; }
.cc-ln p { margin: 1px 0 0; overflow-wrap: anywhere; line-height: 1.4; }
.cc-ln.me { flex-direction: row-reverse; }
.cc-ln.me > div { border-radius: 14px 4px 14px 14px; background: #e6f3f1; border-color: #bfdcd8; }
.cc-ln.sys { justify-content: center; }
.cc-ln.sys p { font-size: 13px; color: #8a7a5a; }
.cc-send { flex: none; display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid #e3d2a8; background: #fbf5e7; }
.cc-send input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #d8c69a; background: #fffdf7; color: #342c26; font: 500 15px var(--font, inherit); }
.cc-send input:focus { outline: none; border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333; }
.cc-send .sx-btn { min-width: 76px; }

.cc-mem { background: #fbf5e7; border-left: 1px solid #e3d2a8; }
.cc-mem h4 { margin: 2px 0 8px; font: 800 15px var(--font-head, inherit); color: #2f6f73; }
.cc-mem h4 span { color: #7a6a4a; font-weight: 700; }
.cc-mem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cc-mem li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 6px 22px 6px 8px; border-radius: 10px; background: #fffdf7; border: 1px solid #ecdfbf; min-height: 44px; }
.cc-mem li[data-who] { cursor: pointer; }
.cc-mem li[data-who]:hover { background: #fff6e2; }
.cc-mem .cc-face { width: 42px; height: 42px; grid-row: span 2; }
.cc-more { position: absolute; right: 8px; top: 6px; color: #8a7a5a; font-weight: 800; }
.cc-mi { display: grid; min-width: 0; }
.cc-mi b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-mi small { font-size: 12px; color: #7a6a4a; }
.cc-ms { font-size: 12px; color: #6b5a44; display: flex; align-items: center; gap: 4px; }
.cc-ms i { font-style: normal; font-size: 9px; }
.cc-note { margin: 10px 0 0; font-size: 12px; color: #8a7a5a; line-height: 1.4; }

/* กติกา [?] — แผ่นในหน้าต่าง (ไม่ใช่ชั้นใหม่) */
.cc-help { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(40, 30, 15, .35); }
.cc-help[hidden] { display: none; }
.cc-help-in { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 12px 16px 14px; border-radius: 14px; background: #fffaf0; border: 2px solid #e8b64a; box-shadow: 0 10px 30px #0005; }
.cc-help-in header { display: flex; align-items: center; }
.cc-help-in header b { flex: 1; font: 800 16px var(--font-head, inherit); color: #2f6f73; }
.cc-help-in header button { width: 36px; height: 36px; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: #6b5a44; }
.cc-help-in ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.cc-help-in li { display: flex; gap: 8px; line-height: 1.4; font-size: 14px; }
.cc-help-in li i { font-style: normal; flex: none; width: 22px; text-align: center; }

/* แคบ (แท็บเล็ตตั้ง/มือถือแนวนอน/หน้าต่างย่อ): แท็บ แชท · สมาชิก · รางวัล แสดงทีละแผง */
@container ccw (max-width: 860px) {
  .cc:not(.cc-none) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .cc-strip { display: grid; grid-template-columns: auto minmax(0, max-content) auto minmax(60px, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(#fffaf0, #f6ead0); border-bottom: 1px solid #e3d2a8; }
  .cs-name { font: 800 14px var(--font-head, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-lbl { font: 700 13px var(--font-head, inherit); color: #2f6f73; white-space: nowrap; }
  .cc-strip .cc-track { margin: 0; height: 9px; }
  .cs-pct { font: 800 15px var(--font-head, inherit); font-style: normal; color: #2f6f73; }
  .cc-strip .cc-q { width: 30px; height: 30px; }
  .cc-strip.glow .cc-track { animation: ccGlow 1.6s ease-out; }
  .cc-strip.done .cc-track i { background: linear-gradient(90deg, #f2cb6a, #e8b64a); }
  .cc-prog .cc-q { display: none; }
  .cc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 10px; background: #fbf5e7; border-bottom: 1px solid #e3d2a8; }
  .cc-tabs button { min-height: 40px; border-radius: 10px; cursor: pointer; border: 2px solid #e0cda0; background: #fffdf7; color: #6b5a44; font: 700 15px var(--font-head, inherit); }
  .cc-tabs button.on { background: linear-gradient(#f2cb6a, #e8b64a); border-color: #b9954a; color: #4a3512; }
  .cc > section { display: none; border: 0; }
  .cc[data-tab="chat"] > .cc-chat, .cc[data-tab="mem"] > .cc-mem, .cc[data-tab="info"] > .cc-info { display: flex; flex-direction: column; }
  .cc[data-tab="mem"] > .cc-mem { display: block; }
  .cc-mem ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* แท็บรางวัล: ข้อมูลวง + รางวัล วางคู่กันถ้ากว้างพอ */
  .cc[data-tab="info"] > .cc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-content: start; }
  .cc-info > .cc-room, .cc-info > .cc-acts { grid-column: 1 / -1; }
}
/* แท็บแชทบนจอแคบยังเห็นแถบวงเล็ก ๆ ไหม? → ไม่ต้อง: วิดเจ็ต HUD ถูกบังด้วยชั้น Screen แต่แท็บ "รางวัล" อยู่ห่างแตะเดียว */

/* ── ฉลองตอนครบ (ชั้น Popup) — อุ่น ๆ: การ์ดครีม + ประกายลอยช้า ๆ ไม่มีแสงวาบ/สปินแบบกาชา ── */
#circle-cele { position: fixed; inset: 0; z-index: var(--z-popup, 300); display: grid; place-items: center; pointer-events: none; }
#circle-cele .cel-in { pointer-events: auto; position: relative; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; display: grid; justify-items: center; gap: 6px;
  padding: 18px 20px 16px; border-radius: 18px; text-align: center; color: #342c26;
  background: radial-gradient(circle at 50% 0%, #fff6dc, #fffaf0 60%); border: 2px solid #e8b64a; box-shadow: 0 12px 40px rgba(60, 40, 10, .35), 0 0 0 6px #ffe39a40;
  animation: celIn .6s cubic-bezier(.2, .9, .3, 1.1); }
#circle-cele.out .cel-in { animation: celOut .4s ease-in forwards; }
@keyframes celIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes celOut { to { opacity: 0; transform: translateY(8px); } }
#circle-cele .cel-ic .cc-emo { font-size: 40px; }
#circle-cele .cel-ic .cc-icon { width: 56px; height: 56px; }
#circle-cele b { font: 800 22px var(--font-head, inherit); color: #2f6f73; }
#circle-cele p { margin: 0; line-height: 1.45; color: #5b4a36; }
#circle-cele ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 5px; width: 100%; }
#circle-cele li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #fbf1d8; font-weight: 700; text-align: left; }
#circle-cele small { color: #b0761a; font-weight: 700; }
#circle-cele .sx-btn { margin-top: 4px; min-width: 140px; }
#circle-cele .cel-sp { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
#circle-cele .cel-sp i { position: absolute; bottom: -10px; width: 7px; height: 7px; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 6px #ffe39a; opacity: 0; animation: celSp 3.2s ease-out infinite; }
#circle-cele .cel-sp i:nth-child(2n) { background: #bfe6dc; box-shadow: 0 0 6px #bfe6dc; }
#circle-cele .cel-sp i:nth-child(1) { left: 8%; animation-delay: .1s; } #circle-cele .cel-sp i:nth-child(2) { left: 18%; animation-delay: .9s; }
#circle-cele .cel-sp i:nth-child(3) { left: 28%; animation-delay: .4s; } #circle-cele .cel-sp i:nth-child(4) { left: 38%; animation-delay: 1.6s; }
#circle-cele .cel-sp i:nth-child(5) { left: 50%; animation-delay: .2s; } #circle-cele .cel-sp i:nth-child(6) { left: 60%; animation-delay: 1.2s; }
#circle-cele .cel-sp i:nth-child(7) { left: 70%; animation-delay: .6s; } #circle-cele .cel-sp i:nth-child(8) { left: 80%; animation-delay: 2s; }
#circle-cele .cel-sp i:nth-child(9) { left: 90%; animation-delay: 1s; } #circle-cele .cel-sp i:nth-child(10) { left: 44%; animation-delay: 2.4s; }
@keyframes celSp { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-260px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ch-track i, .cc-track i { transition: none; }
  #circle-hud.glow .ch-track, .cc-prog.glow .cc-track, #circle-cele .cel-in, #circle-cele .cel-sp i { animation: none; }
}