/* ปุ่มไม้ตาย + ช็อตตอนกด (ult-hud.js) — สีมาจาก icon ของไม้ตายใน skills.json (--ult-c) */
#ult-btn {
  --ult-c: #e8b64a; --ult-p: 0%;
  /* เหนือปุ่ม AUTO (ขวาของแถบช่องลัด) — ซ้ายของแถบช่องลัดชนปุ่ม "ส่ง" ของกล่องแชท (ภาพทดสอบ 24 ก.ย.) */
  position: absolute; left: calc(100% + 22px); bottom: calc(100% + 10px); width: 64px; height: 64px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: none; font-family: var(--font-head);
}
#ult-btn[hidden] { display: none; }
/* วงเกจ: ส่วนที่เต็มเป็นสีไม้ตาย ส่วนที่ยังขาดเป็นไม้เข้ม — อ่านได้จากหางตา */
#ult-btn .ult-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ult-c) var(--ult-p), #3a2f22 0); box-shadow: 0 2px 6px #0006, inset 0 0 0 2px #e8b64a; }
#ult-btn .ult-core { position: absolute; inset: 6px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 35% 30%, #3a8589, #1f4d50 70%); border: 2px solid #e8b64a; color: #fff6dc; }
#ult-btn .ult-ic { font-size: 22px; line-height: 1; filter: grayscale(.6) brightness(.8); }
#ult-btn .ult-pct { font-style: normal; font-size: 10.5px; line-height: 1.1; color: #e8d8b0; }
#ult-btn .ult-key { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; border-radius: 6px; font-size: 11px; line-height: 18px;
  background: #fffdf6; color: #6b4510; border: 1px solid #e8b64a; }
#ult-btn.ready .ult-ic { filter: none; color: var(--ult-c); text-shadow: 0 0 8px var(--ult-c); }
#ult-btn.ready .ult-pct { color: #fff; font-weight: 700; }
#ult-btn.ready .ult-ring { animation: ult-pulse 1.2s ease-in-out infinite; }
#ult-btn.flash .ult-core { animation: ult-pop .5s ease-out; }
#ult-btn.nope { animation: ult-nope .3s; }
@keyframes ult-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ult-c) 45%, transparent), 0 0 18px var(--ult-c), inset 0 0 0 2px #fff2b0; } }
@keyframes ult-pop { 40% { transform: scale(1.18); } }
@keyframes ult-nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* มือถือ: ลอยเหนือกลุ่มปุ่มโจมตี (กลุ่มนั้นเป็น grid ตายตัว แทรกเข้าไปไม่ได้ — บทเรียนจากปุ่ม AUTO) */
/* เหนือโค้งปุ่มสกิลกลม — ตำแหน่งเดิม (206px) ทับช่องลัดวงนอกสุด */
#ult-btn.touch { position: fixed; left: auto; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 296px); margin: 0; width: 60px; height: 60px; z-index: 19; }
/* ⚠️ เดิม z-index 30 เหนือหน้าต่าง (.win 20) — ลอยทับปุ่ม × ปิดหน้าต่าง/ปุ่ม + ค่าสถานะ/แถว ▲ สกิล กดซ้ำโดนไม้ตายแทน (รีวิว UX 27 ก.ย.)
   → อยู่ใต้หน้าต่าง · ซ่อนตอนเปิดเมนู/แชท (ไม่มีทางกดไม้ตายระหว่างนั้นอยู่แล้ว) */
html.menu-open #ult-btn.touch, html.chat-open #ult-btn.touch,
html:has(#windows .win:not([hidden])) #ult-btn.touch, html:has(.sheet:not([hidden])) #ult-btn.touch { visibility: hidden; }
/* ⚠️ z-index อย่างเดียวไม่พอ: หน้าต่างทั้งกลุ่มอยู่ใน #windows ที่เป็นชั้นต่ำกว่า — ปุ่มยังลอยทับ (วัดซ้ำ 27 ก.ย.) → ซ่อนตอนมีหน้าต่างเปิด */
#ult-btn.touch .ult-key { display: none; }

/* ── ช็อตไม้ตาย: ขอบจอสีไม้ตาย + แถบชื่อพาดกลางจอ 1.3 วิ ── */
#ult-cine { --ult-c: #e8b64a; position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#ult-cine[hidden] { display: none; }
#ult-cine .ult-vig { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--ult-c) 55%, transparent) 100%); }
#ult-cine .ult-band { position: absolute; left: 0; right: 0; top: 30%; display: grid; justify-items: center; gap: 2px; padding: 10px 0;
  background: linear-gradient(90deg, transparent, #1f1a12cc 20%, #1f1a12cc 80%, transparent); color: #fff6dc; opacity: 0; transform: translateX(-12%); }
#ult-cine .ult-band small { font: 700 11px/1 var(--font-head); letter-spacing: .3em; color: var(--ult-c); }
#ult-cine .ult-band b { font: 700 30px/1.1 var(--font-head); text-shadow: 0 0 12px var(--ult-c), 0 2px 0 #000; }
#ult-cine .ult-band i { font-style: normal; font-size: 12px; color: #e8d8b0; }
#ult-cine.go .ult-vig { animation: ult-vig 1.3s ease-out forwards; }
#ult-cine.go .ult-band { animation: ult-band 1.3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ult-vig { 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ult-band { 15% { opacity: 1; transform: translateX(0); } 75% { opacity: 1; transform: translateX(2%); } 100% { opacity: 0; transform: translateX(10%); } }
@media (prefers-reduced-motion: reduce) { #ult-cine.go .ult-band, #ult-btn.ready .ult-ring { animation-duration: .01s; } }
/* ป้าย A (AUTO กดไม้ตายเอง · ult-hud.js) — มุมซ้ายบน เพราะมุมขวาบนเป็นป้ายปุ่มลัด R */
#ult-btn .ult-auto { right: auto; left: -3px; top: -3px; }
#ult-btn.touch .ult-auto { left: -2px; top: -2px; width: 22px; height: 22px; }

/* ── ไม้ตายในหน้าต่างสกิล (ui.js renderSkills · 28 ก.ย.) — แถวบนสุด วงเรืองสีประจำไม้ตาย · ขั้นถัดไปจางลง ── */
.sk-list .sk-head.ult-head { color: #8a5a10; }
.sk-list .sk-row.sk-ult { border: 1.5px solid #e8c878; background: linear-gradient(#fffaf0, #fbefd2); box-shadow: 0 0 0 3px #e8b64a1f; }
.sk-list .sk-row.sk-ult.next { opacity: .72; border-style: dashed; box-shadow: none; background: #fbf5e6; }
.sk-list .sk-ult .ic.ult-ic { display: grid; place-items: center; border-radius: 50%; font: 700 22px/1 var(--font-head, inherit); color: #fff;
  background: radial-gradient(circle at 50% 38%, #fffbe8 0 18%, var(--ult-c) 62%, color-mix(in srgb, var(--ult-c) 70%, #3e2c16));
  border: 2px solid #e8b64a; text-shadow: 0 1px 2px #00000055; box-shadow: 0 0 10px color-mix(in srgb, var(--ult-c) 55%, transparent); }
.sk-list .sk-ult .ult-tag { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font: 700 12px/1.6 var(--font-head, inherit);
  color: #4a3008; background: linear-gradient(#f7d77a, #e8b64a); vertical-align: 1px; }
.sk-list .sk-ult.next .ult-tag { color: #6b5a40; background: #efe3c4; }
.sk-list .sk-ult .ult-bar span { background: linear-gradient(90deg, #e8b64a, var(--ult-bar, #f2c14e)); }
.sk-list .sk-ult .ult-desc { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #5a4630; }

/* ภาพเหรียญไม้ตาย (assets/ui/skills/<id>.png · 28 ก.ย.) ในปุ่มวงกลม — เกจยังไม่เต็ม = ภาพหม่น · เต็มแล้ว = สีเต็ม
   ตัวเลขเกจอยู่บนภาพ มีเงาให้อ่านออกทุกสี */
#ult-btn .ult-core::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ult-img) center / cover no-repeat;
  filter: grayscale(.7) brightness(.55); transition: filter .3s; }
#ult-btn.ready .ult-core::before { filter: none; }
#ult-btn .ult-core > * { position: relative; }
#ult-btn .ult-ic { display: none; }
#ult-btn .ult-pct { font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#ult-btn.ready .ult-pct { align-self: end; margin-bottom: 4px; font-size: 10px; padding: 0 5px; border-radius: 6px; background: #1f4d50cc; }