/* 2026-10-04.5 全系統標明傷害屬性（js/dt-badge.js）＋📊 能力總表（js/hero-stats.js）
   使用者：「想問一下怎麼看出腳色或物品是什麼元素屬性」「或傷害屬性」「不夠明確可以全系統標明嗎」
           「要有資訊表看得出這個腳色英雄最終輸出的傷害或能力職防禦直 減傷 閃避等等」
   顏色一定配圖示＋字（.short 只有圖示的：title、aria-label 有完整的字）；淺色（羊皮紙）、深色（夜戰主題、冒險者資料、酒館卡片）各一套，字跟底的對比都在 5:1 以上 */

/* ───────── 傷害屬性的標籤 ───────── */
.dt-badge {
  --dt-ink: #454b56; --dt-bg: #e7e9ee; --dt-line: #aab2bf;
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin: 0 2px; padding: 0 6px 0 4px; height: 20px; border-radius: 999px;
  border: 1px solid var(--dt-line); background: var(--dt-bg); color: var(--dt-ink); font-size: 11.5px; font-weight: 800; line-height: 1; white-space: nowrap;
  text-shadow: none; letter-spacing: 0;
}
.dt-badge i { font-style: normal; font-size: 12px; line-height: 1; }
.dt-badge b { font-weight: 800; }
.dt-badge.short { padding: 0 3px; min-width: 20px; justify-content: center; }
.dt-magic { --dt-ink: #8a2479; --dt-bg: #f8e1f2; --dt-line: #dc9ccd; }
.dt-fire { --dt-ink: #a3360a; --dt-bg: #fde4d3; --dt-line: #eea37a; }
.dt-cold { --dt-ink: #17598a; --dt-bg: #dcedf9; --dt-line: #8ec2e6; }
.dt-poison { --dt-ink: #3b6510; --dt-bg: #e5f2d0; --dt-line: #a2cf72; }
.dt-shadow { --dt-ink: #5a389a; --dt-bg: #ebe2f8; --dt-line: #ad93dc; }
.dt-lightning { --dt-ink: #6f5200; --dt-bg: #fbefbd; --dt-line: #e0c24e; }
.dt-sup { --dt-ink: #1e6b46; --dt-bg: #dbf1e3; --dt-line: #86c9a2; }
/* 深色的地方：夜戰主題、冒險者資料（深色面板）、酒館卡片、技能預覽 */
[data-theme="night"] .dt-badge, .sheet.hs2-sheet .dt-badge, .tcard .dt-badge, .skfx-sheet .dt-badge { --dt-ink: #dfe5ee; --dt-bg: #2a2d33; --dt-line: #5c6470; }
[data-theme="night"] .dt-magic, .sheet.hs2-sheet .dt-magic, .tcard .dt-magic, .skfx-sheet .dt-magic { --dt-ink: #ff9fe3; --dt-bg: #3a1f35; --dt-line: #8a4a7c; }
[data-theme="night"] .dt-fire, .sheet.hs2-sheet .dt-fire, .tcard .dt-fire, .skfx-sheet .dt-fire { --dt-ink: #ffb07a; --dt-bg: #3c2418; --dt-line: #8a5232; }
[data-theme="night"] .dt-cold, .sheet.hs2-sheet .dt-cold, .tcard .dt-cold, .skfx-sheet .dt-cold { --dt-ink: #a6dcff; --dt-bg: #18303f; --dt-line: #3e6e8e; }
[data-theme="night"] .dt-poison, .sheet.hs2-sheet .dt-poison, .tcard .dt-poison, .skfx-sheet .dt-poison { --dt-ink: #bdee86; --dt-bg: #22311a; --dt-line: #557a36; }
[data-theme="night"] .dt-shadow, .sheet.hs2-sheet .dt-shadow, .tcard .dt-shadow, .skfx-sheet .dt-shadow { --dt-ink: #cdb0ff; --dt-bg: #2a2140; --dt-line: #6a5498; }
[data-theme="night"] .dt-lightning, .sheet.hs2-sheet .dt-lightning, .tcard .dt-lightning, .skfx-sheet .dt-lightning { --dt-ink: #ffe36a; --dt-bg: #3a3214; --dt-line: #8a7630; }
[data-theme="night"] .dt-sup, .sheet.hs2-sheet .dt-sup, .tcard .dt-sup, .skfx-sheet .dt-sup { --dt-ink: #86e6ae; --dt-bg: #183326; --dt-line: #3e8a62; }
/* 酒館卡片：職業後面一個小圓（只有圖示） */
.tc-sub .dt-badge.short { height: 16px; min-width: 16px; margin: 0 0 0 3px; padding: 0 2px; }
.tc-sub .dt-badge.short i { font-size: 10px; }
/* 怪物的小卡：名字後面 */
.foe-chip .dt-badge.short { height: 17px; min-width: 17px; margin-left: 3px; }
.res-hint .dt-badge { margin: 1px 3px; }
.hs2-lv .dt-badge { font-size: 11px; margin-left: 6px; }
.skill-line .dt-badge { margin: 0 4px; }
.st-name .dt-badge { margin-left: 4px; }
.tv-summon-n { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.mt-skill-t .dt-badge { margin-left: 4px; }
.tvw-sk { white-space: nowrap; }
.tvw-sk .dt-badge.short { height: 17px; min-width: 17px; margin: 0 1px 0 3px; }
/* 物品欄、布陣的裝備格：附魔的元素（左上角） */
.equip-slot { position: relative; }
.equip-slot .es-en { position: absolute; top: 2px; left: 3px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)); }

/* 戰鬥畫面：傷害數字照屬性上色（打敵人的；物理照舊白色、爆擊照舊金色） */
.bt-says .exp-say.hit.dt-magic:not(.crit) { color: #ff9fe3; }
.bt-says .exp-say.hit.dt-fire:not(.crit) { color: #ffb07a; }
.bt-says .exp-say.hit.dt-cold:not(.crit) { color: #a8e4ff; }
.bt-says .exp-say.hit.dt-poison:not(.crit) { color: #c4f060; }
.bt-says .exp-say.hit.dt-shadow:not(.crit) { color: #d4a8ff; }
.bt-says .exp-say.hit.dt-lightning:not(.crit) { color: #fff45a; }

/* 說明頁的屬性對照表：一種一張小卡（手機一欄、寬的畫面兩欄） */
.dt-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 6px 0 2px; }
@media (min-width: 640px) { .dt-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dt-lg-row { min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); }
.dt-lg-row p { margin: 2px 0 0; line-height: 1.45; }
.dt-lg-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dt-lg-h .dt-badge { margin: 0; font-size: 12.5px; height: 22px; }
.dt-legend .dt-num { display: inline-block; min-width: 3.2em; padding: 1px 6px; border-radius: 4px; background: #1a1e26; font-weight: 900; text-align: center; color: #ffffff; }
.dt-legend .dt-num.n-magic { color: #ff9fe3; } .dt-legend .dt-num.n-fire { color: #ffb07a; } .dt-legend .dt-num.n-cold { color: #a8e4ff; }
.dt-legend .dt-num.n-poison { color: #c4f060; } .dt-legend .dt-num.n-shadow { color: #d4a8ff; } .dt-legend .dt-num.n-lightning { color: #fff45a; }
.dt-legend .dt-num.n-crit { color: #ffe04a; }

/* ───────── 📊 能力總表 ───────── */
.hst { display: grid; gap: 12px; min-width: 0; }
.hst-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hst-mode .seg { flex: 0 1 auto; }
.hst-mode > small { flex: 1 1 100%; }
.hst-sec { min-width: 0; padding: 10px 10px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); }
.hst-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 6px; font-size: 15px; color: var(--text); }
.hst-big { font-size: 13px; color: var(--muted); font-weight: 700; }
.hst-big b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.hst-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.hst-tbl th, .hst-tbl td { padding: 4px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.hst-tbl tr:last-child th, .hst-tbl tr:last-child td { border-bottom: 0; }
.hst-tbl th { font-weight: 700; color: var(--text-2); width: 42%; }
.hst-tbl th small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; line-height: 1.3; }
.hst-tbl td b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.hst-tbl tr.zero td b { color: var(--muted); font-weight: 600; }
.hst-tbl tr.over td b { color: var(--warn); }
.hst-cap { display: inline-block; vertical-align: middle; width: 54px; height: 6px; margin: 0 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hst-cap i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.hst-cap.full i, .hst-re.full .hst-cap i { background: var(--win); }
.hst-capt { color: var(--muted); font-size: 11px; white-space: nowrap; }
.hst-over { display: block; color: var(--warn); font-size: 11.5px; font-weight: 700; }
.hst-dmg-t { margin: 0 0 4px; }
.hst-sks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hst-sk { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.hst-sk.basic { border-color: var(--line-3); }
.hst-sk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.hst-sk-h b { color: var(--text); }
.hst-sk-h small { margin-left: auto; }
.hst-sk-n { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 3px 0 1px; font-size: 13px; color: var(--text-2); }
.hst-sk-n b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.hst-sk-n b.crit { color: var(--gold); }
.hst-sk small { display: block; line-height: 1.35; }
.hst-sk-h small { display: inline; }
.hst-edm { margin: 6px 0 0; }
.hst-ehp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.hst-ehp > div { padding: 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.hst-ehp small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.hst-ehp b { display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hst-res { display: grid; gap: 4px; margin-top: 6px; }
.hst-re { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 2px 6px; }
.hst-re > b { font-variant-numeric: tabular-nums; color: var(--text); min-width: 3em; }
.hst-re .hst-cap { width: auto; margin: 0; }
.hst-re small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; margin: -1px 0 3px; }
.hst-from > summary { cursor: pointer; list-style: revert; }
.hst-src { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.hst-src-r { display: grid; grid-template-columns: minmax(0, 7.5em) auto minmax(0, 1fr); align-items: start; gap: 2px 8px; font-size: 12.5px; padding-bottom: 4px; border-bottom: 1px dashed var(--line); }
.hst-src-k { color: var(--text-2); }
.hst-src-v { font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.hst-src-p { display: flex; flex-wrap: wrap; gap: 3px; }
.hst-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; height: 19px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.hst-chip i { font-style: normal; font-weight: 600; color: var(--muted); }
.hst-chip.neg, .hst-chip.cap { color: var(--danger-text); }
.hst-cmp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.hst-cmp-pick select { flex: 1 1 200px; min-width: 0; }
.hst-cmp-t th { width: auto; }
.hst-cmp-t thead th { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line-2); overflow-wrap: anywhere; }
.hst-cmp-t td { font-variant-numeric: tabular-nums; }
.hst-cmp-t td.up { color: var(--win); font-weight: 800; }
.hst-cmp-t td.down { color: var(--loss); font-weight: 800; }
.tvw-hst { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; background: var(--surface-2); }
.tvw-hst > summary { cursor: pointer; }
.tvw-hst-in { margin-top: 8px; }
.tvw-hst-in .hst-sec { background: var(--surface); }
@media (max-width: 420px) {
  .hst-ehp { grid-template-columns: minmax(0, 1fr); }
  .hst-tbl th { width: 46%; }
  .hst-src-r { grid-template-columns: minmax(0, 1fr) auto; }
  .hst-src-p { grid-column: 1 / -1; }
}
/* 冒險者資料的分頁多了「📊 能力」：一排 6 格（手機也一排） */
.hs2-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
@media (max-width: 420px) { .hs2-tab { font-size: 11px; letter-spacing: -0.02em; } .hs2-tab .tv3-tab-lock { margin-left: 0; } }