/* 戰鬥英雄辨識（docs/design/COMBAT_IDENTITY_HANDOFF.md）：主將頭像列 */
.leader-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100px + var(--safe-b, 0px)); display: flex; gap: 6px; pointer-events: auto; z-index: 6; }
.lb-item { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 10px; border: 2px solid #5d5040; background: #1d1813cc; overflow: visible; box-shadow: 0 2px 6px #0009; }
.lb-item.r5 { border-color: #ff3b6b; } .lb-item.r4 { border-color: #ff8f1f; } .lb-item.r3 { border-color: #a653ea; } .lb-item.r2 { border-color: #3f8ee0; }
.lb-item > .px-av, .lb-item > img { position: absolute; inset: 1px; width: auto !important; height: auto !important; border-radius: 8px; background-position: center; }
/* 冷卻：從 12 點鐘方向順時針退去的暗色扇形（讀戰鬥裡實際的剩餘冷卻） */
.lb-cd { position: absolute; inset: 0; border-radius: 8px; background: conic-gradient(rgba(0, 0, 0, .42) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
.lb-hp { position: absolute; left: 3px; right: 3px; bottom: -5px; height: 4px; border-radius: 2px; background: #000a; overflow: hidden; }
.lb-hp b { display: block; height: 100%; width: calc(var(--hp, 1) * 100%); background: #4cd964; }
.lb-item.ready { box-shadow: 0 0 10px #ffd24a, 0 2px 6px #0009; }
.lb-item.dead { filter: grayscale(1) brightness(.55); }
.lb-item.dead .lb-cd { background: rgba(0, 0, 0, .5); }
.lb-item.focus { outline: 2px solid #ffe27a; outline-offset: 2px; }
.lb-skill { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; font-style: normal; font-size: 12px; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; opacity: 0; pointer-events: none; }
.lb-item.cast { animation: lbCast .9s ease-out; }
.lb-item.cast .lb-skill { animation: lbName 1.4s ease-out; }
@keyframes lbCast { 0% { transform: scale(1.18); box-shadow: 0 0 16px #fff; } 100% { transform: scale(1); } }
@keyframes lbName { 0% { opacity: 1; transform: translate(-50%, 4px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
body.sheet-open .leader-bar { display: none; }
/* 手機：放在右側、技能按鈕上方的直排，不蓋住技能、任務、導覽 */
@media (max-width: 640px) {
  .leader-bar { left: auto; right: 6px; transform: none; bottom: calc(222px + var(--safe-b, 0px)); flex-direction: column-reverse; gap: 8px; }
  .lb-item { width: 40px; height: 40px; }
  .lb-skill { left: auto; right: 100%; bottom: 50%; transform: translateY(50%); margin: 0 6px 0 0; }
  @keyframes lbName { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
  .lb-item.cast .lb-skill { animation: lbNameM 1.4s ease-out; }
  @keyframes lbNameM { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .lb-item.cast, .lb-item.cast .lb-skill { animation-duration: .01s; } .lb-item.cast .lb-skill { opacity: 1; } }
/* 首領進場提示：收在血條上方，不佔畫面中央（D） */
#bossbar.intro::before { content: attr(data-intro); position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: 14px; color: #ffd24a; text-shadow: 0 2px 0 #000, 0 0 8px #ff3b3b; white-space: nowrap; animation: bbIntro 1.8s ease-out forwards; }
@keyframes bbIntro { 0% { opacity: 0; transform: translate(-50%, 6px) scale(1.3); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 手機：追蹤卡移到左下（任務框上方），不蓋住右側的主將頭像列與技能鈕 */
@media (max-width: 640px) {
  #heroFocus { left: 6px !important; right: auto !important; bottom: calc(150px + var(--safe-b, 0px)) !important; top: auto !important; width: min(220px, 58vw) !important; }
}
body.sheet-open #heroFocus { display: none; } /* 開著面板時不顯示追蹤卡 */

/* ---------- 養成深度：技能圖示、秘境、會長技能、技能特化、附魔（ui-depth.js）---------- */
.skic { display: inline-block; flex-shrink: 0; image-rendering: pixelated; background-repeat: no-repeat; border-radius: 4px; vertical-align: middle; }
.cmd-bar [data-cmd] .skic { pointer-events: none; }
.dg-list, .tal-list { display: flex; flex-direction: column; gap: 8px; }
.card.dg, .card.tal { display: flex; gap: 10px; align-items: center; }
.card.dg .grow, .card.tal .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card.dg.locked, .card.tal.locked { opacity: 0.55; }
.card.tal.on { box-shadow: inset 0 0 0 2px var(--gold, #ffd24a); }
.dg-btns { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.dg .lvbar { height: 6px; margin: 2px 0; }
.dg .lvbar.warn i { background: #e0703a; }
.tal-loadout { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.tal-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.tal-slot.empty { justify-content: center; color: #aaa; font-size: 24px; min-height: 64px; }
.mast-row.spec { align-items: flex-start; gap: 8px; }
.spec-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.spec-chip { font-size: 11px; padding: 2px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.spec-chip.A { background: rgba(80, 200, 110, 0.3); }
.spec-chip.B { background: rgba(230, 80, 70, 0.3); }
.spec-chip.empty { color: #aaa; }
.spec-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 2px; }
.spec-pick .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; height: auto; padding: 6px 8px; }
.ench-slot { margin: 6px 0; }
.ench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 6px; }
.ench-grid .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; height: auto; padding: 6px 8px; }
@media (max-width: 480px) { .card.dg, .card.tal { flex-wrap: wrap; } .dg-btns { flex-direction: row; flex-wrap: wrap; width: 100%; } }