/* stat 顏色：SPA（index.html）嗰四隻係為深色 tooltip 設計，喺淺底對比嚴重不足。
   以下係同色相加深版，對白底 ≥4.5:1。
   增益 #0f5f9e ← SPA #37c7ff  ／ 正面 #186f2a ← SPA #38ef4c
   負面 #b81f26 ← SPA #ff4545  ／ 特殊 #7d5600 ← SPA #ffe13c        */
*{box-sizing:border-box}
body{
  margin:0;padding:0;background:#fff;color:#202122;
  font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",-apple-system,sans-serif;
  font-size:16px;line-height:1.7;
}
a{color:#3366cc;text-decoration:none}
a:hover{text-decoration:underline}

/* ── 頂欄 ── */
.topbar{border-bottom:1px solid #a2a9b1;background:#f8f9fa;padding:0}
.topbar-in{max-width:1100px;margin:0 auto;padding:9px 18px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;font-size:13.5px}
.brand{font-weight:700;color:#12659f}
.topbar nav a{color:#3366cc;margin-left:14px}

.page{max-width:1100px;margin:0 auto;padding:18px 18px 70px}
.crumb{font-size:13px;color:#54595d;margin-bottom:12px}

h1{margin:0 0 2px;font-size:30px;font-weight:400;line-height:1.3;
  font-family:"Times New Roman",Georgia,"Microsoft JhengHei",serif;
  border-bottom:1px solid #a2a9b1;padding-bottom:7px}
.subtitle{margin:0 0 18px;font-size:14px;color:#54595d;font-style:italic}

h2{font-size:20px;font-weight:400;margin:26px 0 10px;padding-bottom:5px;
  border-bottom:1px solid #a2a9b1;
  font-family:"Times New Roman",Georgia,"Microsoft JhengHei",serif}
h3{font-size:16px;margin:18px 0 7px;font-weight:700}

/* ── 版面：正文 + 右側 infobox ── */
.layout{display:flex;gap:26px;align-items:flex-start}
.main{flex:1;min-width:0}

.infobox{
  flex:0 0 292px;border:1px solid #a2a9b1;background:#f8f9fa;
  font-size:13.5px;line-height:1.55;
}
.infobox .ib-title{background:#eaecf0;border-bottom:1px solid #a2a9b1;
  padding:9px 12px;font-weight:700;text-align:center;font-size:15px}
.infobox .ib-imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:11px;
  background:#fff;border-bottom:1px solid #c8ccd1}
.infobox .ib-imgs img{width:100%;aspect-ratio:1;object-fit:contain;
  border:1px solid #d69d22;border-radius:4px;background:#fff8e8}
.infobox table{width:100%;border-collapse:collapse}
.infobox th,.infobox td{padding:6px 11px;vertical-align:top;text-align:left;
  border-bottom:1px solid #e4e7eb}
.infobox th{width:38%;color:#54595d;font-weight:600}
.infobox tr:last-child th,.infobox tr:last-child td{border-bottom:0}
.ib-cta{padding:11px}
.ib-cta a{display:block;text-align:center;padding:10px;border:1px solid #2568b9;
  border-radius:4px;background:linear-gradient(#5aa9e8,#2073bd);color:#fff;
  font-weight:700;font-size:14.5px}
.ib-cta a:hover{text-decoration:none;filter:brightness(1.07)}

/* ── 目錄 ── */
.toc{display:inline-block;border:1px solid #a2a9b1;background:#f8f9fa;
  padding:10px 18px 10px 12px;margin:0 0 18px;font-size:14px}
.toc b{display:block;text-align:center;margin-bottom:5px}
.toc ol{margin:0;padding-left:22px}
.toc li{margin:2px 0}

/* ── 正文導語 ── */
.lead{margin:0 0 16px}

/* ── 表格 ── */
table.data{border-collapse:collapse;width:100%;font-size:14.5px;margin:6px 0 4px;
  border:1px solid #a2a9b1;background:#fff}
table.data th,table.data td{border:1px solid #c8ccd1;padding:7px 11px;text-align:left}
table.data thead th{background:#eaecf0;font-weight:700;font-size:13.5px}
table.data tbody tr:nth-child(2n){background:#f8f9fa}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
table.data td.icon{width:44px;padding:4px}
table.data td.icon img{width:36px;height:36px;object-fit:contain;display:block;
  border:1px solid #d69d22;border-radius:4px;background:#fff8e8}

/* 唔畀「裝備」欄食晒空間 —— 冇呢啲，部位欄會逼到「頭部」斷行。
   對應 mockup 嘅 inline width:80px / width:110px。 */
table.data.members td:nth-child(3),
table.data.members th:nth-child(3){width:80px}
table.data.members td:nth-child(4),
table.data.members th:nth-child(4){width:34%}
table.data.totals td:nth-child(2),
table.data.totals th:nth-child(2){width:110px}

/* 表格喺窄螢幕可以橫向捲，唔好撐爆版面 */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 成員能力值格 */
.mstats{font-size:13.5px}
.mdesc{font-size:13px;color:#54595d}
.hint{font-size:14px;color:#54595d;margin:6px 0}

/* stat 顏色：淺底可讀版（SPA 嗰四隻係為深色 tooltip 設計） */
.blue{color:#0f5f9e}.green{color:#186f2a}.red{color:#b81f26}.gold{color:#7d5600}

/* 組合加成：夾中指定部位就發動，唔使成套齊 */
.combos .combo-when{white-space:nowrap;font-weight:600;color:#54595d}
.combos td{vertical-align:top}

/* 活動頻道加成：客戶端淨係得說明文字，冇結構化來源，所以標明係參考、唔入加總 */
.mstats .channel{opacity:.72;font-size:12.5px;font-style:italic}
.mstats .channel::before{content:"※ ";color:#72777d;font-style:normal}

.hatnote{font-size:14px;color:#54595d;background:#f8f9fa;border-left:4px solid #c8ccd1;
  padding:8px 13px;margin:0 0 16px}
.empty{color:#72777d;font-style:italic}
ul.plain{margin:6px 0;padding-left:22px}
ul.plain li{margin:3px 0}
.charlist{font-size:14.5px;color:#202122;margin:6px 0}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 0;padding:0;list-style:none}
.tags a{padding:4px 11px;border:1px solid #c8ccd1;border-radius:3px;background:#f8f9fa;font-size:14px}

/* ── 列表頁：多欄套裝清單 ── */
.set-list{column-width:230px;column-gap:26px;list-style:none;margin:14px 0;padding:0}
.set-list li{break-inside:avoid;padding:3px 0;font-size:14.5px}
.set-list li a{display:inline}

@media (max-width:820px){
  .layout{flex-direction:column}
  .infobox{flex:none;width:100%;order:-1}
  .infobox .ib-imgs{grid-template-columns:repeat(6,1fr)}
  h1{font-size:25px}
}