/* 改版樣本共用元件（只用在樣本頁，不影響既有頁面）。圖表都用 HTML 排，手機上文字不會跟著縮小。
   data-aux：由原文規則推算出來的輔助數字（例如圖表刻度），不是原文內容，內容一致性檢查會略過 */

/* 重大規則：違反就砍帳號 */
.lb-alerts{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));margin:var(--sp-3) 0}
.lb-alert{background:#2A1517;border:1px solid #7A2E33;border-left:4px solid #E57373;border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);display:flex;gap:var(--sp-3);align-items:flex-start}
.lb-alert .gd-icon{flex:none;width:26px;height:26px;color:#F28B8B;margin-top:2px}
.lb-alert p{margin:0;font-size:15px}
.lb-alert strong{display:inline-block;margin-top:var(--sp-1);font-size:13px;color:#F8B4B4;border:1px solid #A8484E;border-radius:999px;padding:0 10px}

/* 主題卡片：圖示＋標題＋說明 */
.lb-cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin:var(--sp-3) 0}
.lb-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);min-width:0}
.lb-card h3{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-1);font:700 16px/1.4 var(--serif);color:var(--gold-hi)}
.lb-card h3 .gd-icon{width:20px;height:20px;color:var(--gold)}
.lb-card p{margin:0;font-size:14.5px}
.lb-card p+p{margin-top:var(--sp-1)}
.lb-badge{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:0 9px;margin-left:auto;white-space:nowrap}
.lb-badge.off{color:#AAB6CA;border:1px solid #4B5563}
.lb-badge.key{color:#0B1220;background:var(--gold)}
.lb-em{color:var(--gold-hi);font-weight:700}

/* 處罰輕重 */
.lb-scale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin:var(--sp-2) 0}
.lb-scale div{border-radius:var(--r-s);padding:var(--sp-2) var(--sp-3);font-size:14px}
.lb-scale div b{display:block;font-size:12.5px;font-weight:400;color:var(--text-2)}
.lb-scale .lv1{background:#2E2711;border:1px solid #8A6A1F}
.lb-scale .lv2{background:#2A1517;border:1px solid #A8484E}

/* 數值條列表（例：線上人數 → 等待秒數） */
.lb-bars{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;gap:6px}
.lb-bars li{display:grid;grid-template-columns:6.5em minmax(0,1fr) 3.6em;align-items:center;gap:var(--sp-2);font-size:14px}
.lb-bars .lb-track{height:22px;background:var(--line-soft);border-radius:4px;position:relative;overflow:hidden}
.lb-bars .lb-fill{position:absolute;inset:0 auto 0 0;background:#3A5A8C;border-radius:4px}
.lb-bars li.dbl .lb-fill{background:linear-gradient(90deg,#8A6A1F,var(--gold))}
.lb-bars .lb-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.lb-bars .lb-tag{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:#0B1220;background:var(--gold-hi);border-radius:999px;padding:0 7px;white-space:nowrap}

/* 步驟流程：桌面橫排有箭頭，手機直排 */
.lb-flow{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;gap:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:f}
.lb-flow li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4);counter-increment:f;font-size:15px}
.lb-flow li::before{content:counter(f);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#0B1220;font:900 17px var(--serif);margin-bottom:var(--sp-2)}
.lb-flow li h3{margin:0 0 var(--sp-1);font:700 16px var(--serif);color:var(--gold-hi)}
.lb-flow li p{margin:0}
/* 箭頭放在兩張卡中間的空隙正中央（空隙 = --sp-4，箭頭寬 8px） */
.lb-flow li:not(:last-child)::after{content:"";position:absolute;left:calc(100% + (var(--sp-4) - 8px) / 2);top:50%;width:0;height:0;border-style:solid;border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--gold);transform:translateY(-50%)}
@media (max-width:760px){
  .lb-flow{grid-template-columns:minmax(0,1fr)}
  .lb-flow li:not(:last-child)::after{left:50%;top:calc(100% + (var(--sp-4) - 8px) / 2);border-width:8px 8px 0 8px;border-color:var(--gold) transparent transparent transparent;transform:translateX(-50%)}
}
.lb-tip{display:flex;gap:var(--sp-2);align-items:flex-start;background:#2A2413;border:1px solid #C9962F;border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);font-size:14.5px;margin:var(--sp-3) 0}
.lb-tip .gd-icon{flex:none;color:var(--gold);width:20px;height:20px;margin-top:2px}

/* 公式卡 */
.lb-formulas{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin:var(--sp-3) 0}
.lb-formula{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);min-width:0}
.lb-formula h3{margin:0 0 var(--sp-2);font:700 16px var(--serif);color:var(--gold-hi)}
.lb-eq{background:#0E1830;border:1px solid #2A3A5C;border-radius:var(--r-s);padding:var(--sp-2) var(--sp-3);font-size:15px;line-height:1.7;color:#F3F0E8;overflow-wrap:anywhere}
.lb-eq.big{font-size:17px;text-align:center}
.lb-note{display:flex;gap:var(--sp-2);font-size:13.5px;margin:var(--sp-2) 0 0}
.lb-note b{flex:none;font-size:12px;font-weight:700;color:#0B1220;background:#AAB6CA;border-radius:4px;padding:0 6px;height:1.6em;line-height:1.6em;margin-top:1px}
.lb-note.limit b{background:#E57373}
.lb-note.eg b{background:var(--gold)}
.lb-mini{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:var(--sp-2)}
.lb-mini th,.lb-mini td{border:1px solid #2A3A5C;padding:4px 8px;text-align:center}
.lb-mini th{color:var(--text-2);font-weight:400}
.lb-mini td{font-variant-numeric:tabular-nums;font-weight:700}

/* 界限值階梯 */
.lb-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:end;margin:var(--sp-3) 0;list-style:none;padding:0}
.lb-ladder li{background:linear-gradient(180deg,#2F4A7A,#1C3378);border-radius:6px 6px 0 0;padding:var(--sp-2);display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--h);color:#F3F0E8}
.lb-ladder li b{font:900 22px var(--serif);color:var(--gold-hi);line-height:1.1}
.lb-ladder li span{font-size:12.5px;line-height:1.5;margin-top:4px}
.lb-ladder li.inf{background:linear-gradient(180deg,#8A6A1F,#4A3214)}

/* 對應關係（熟練度 → 能力） */
.lb-map{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.lb-map li{display:flex;align-items:center;gap:var(--sp-2);background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--r-s);padding:var(--sp-2) var(--sp-3);font-size:14.5px}
.lb-map li b{color:var(--c)}
.lb-map li i{color:var(--text-2);font-style:normal}

/* 強度刻度 */
.lb-levels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:var(--sp-1) 0;font-size:14px}
.lb-levels>span{color:var(--text-2);min-width:4.5em}
.lb-levels em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;border-radius:999px;padding:1px 10px;background:#173D2B;border:1px solid #2F7A52}
.lb-levels.poison em{background:#3A1A35;border-color:#8A3A7A}

/* 重大違規集中為一個警示區（GPT 審查：避免整頁過多紅色） */
.lb-alert-group{margin:var(--sp-3) 0}
.lb-alert-title{margin:0 0 var(--sp-1);font:700 16px var(--serif);color:#F8B4B4}
.lb-alert-group ul{margin:0;padding-left:1.2em;font-size:15px}
.lb-alert-group li+li{margin-top:var(--sp-1)}
/* 原始規則與換算示例分開標示 */
.lb-src{display:inline-block;font-size:12.5px;font-weight:700;color:#0B1220;background:#AAB6CA;border-radius:4px;padding:0 8px;margin:var(--sp-2) 0 0}
.lb-src.derived{background:var(--gold)}
.lb-derived{border:1px dashed rgba(212,176,106,.55);border-radius:var(--r-m);padding:var(--sp-2) var(--sp-3) var(--sp-3);margin:var(--sp-3) 0}
.lb-table-wrap{margin:var(--sp-2) 0}
.lb-table{min-width:0}
.lb-table caption{caption-side:top;text-align:left;font-size:13px;color:var(--text-2);padding:var(--sp-2) var(--sp-3) 0}
.lb-table tr.dbl td{color:var(--gold-hi)}
.lb-ladder li .lb-exc{font-style:normal;font-size:12px;line-height:1.45;margin-top:6px;padding:2px 6px;border-radius:4px;background:#2A2413;border:1px solid #8A6A1F;color:#F5E6C9}
.lb-mini caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--text-2);padding-bottom:4px}
.lb-table thead th,.lb-table td{white-space:normal}.lb-table .num{white-space:nowrap}
/* 依遊戲程式補充：不是原文，和原文分開標示（GPT 審查：補充文字要和原文區分） */
.lb-add{border:1px solid #2F7A52;border-left:4px solid #4CAF7A;background:#12261C;border-radius:var(--r-m);padding:var(--sp-2) var(--sp-3) var(--sp-3);margin:var(--sp-3) 0;font-size:14.5px}
.lb-add>.lb-src{background:#7FD1A3;margin:0 0 var(--sp-1)}
.lb-add p{margin:0}
.lb-limit{margin:var(--sp-2) 0 0}
.lb-cell-note{display:block;font-size:12px;color:#F8B4B4;font-weight:400}

/* 卡片頁：舊頁「名稱｜說明」一列一列的清單改成卡片網格（畫面說明、戰鬥介紹），由 tools/help-site/build-cardpage.mjs 產生 */
.cp-sec{--cp-c:var(--gold)}
.cp-sec.g{--cp-c:#7CBF4A}.cp-sec.a{--cp-c:#E0A030}.cp-sec.r{--cp-c:#D8B44A}.cp-sec.w{--cp-c:#9C88E6}.cp-sec.e{--cp-c:#E07AA0}.cp-sec.d{--cp-c:#8A93A6}
.cp-h2 small{font:400 13.5px var(--sans,inherit);color:var(--text-2);letter-spacing:0}
.cp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,16em),1fr));margin:var(--sp-3) 0;padding:0;list-style:none}
.cp-card{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--panel);border:1px solid var(--line-soft);border-top:3px solid var(--cp-c);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4)}
.cp-card h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;font:700 16.5px/1.4 var(--serif);color:var(--gold-hi)}
.cp-card p{margin:0;font-size:14.5px;line-height:1.7}
.cp-cost{font:700 12.5px/1.6 var(--sans,inherit);color:#F2B06A;border:1px solid #8A5A1F;border-radius:999px;padding:0 8px;white-space:nowrap}
.cp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.cp-tag{font-size:13px;line-height:1.6;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:6px;padding:1px 8px}
.cp-tag b{color:#8FC1FF;margin-right:6px}
.cp-tag a{color:var(--gold-hi)}
.cp-tag.dev{color:#AAB6CA;border-style:dashed}
.cp-tag.dev b{color:#AAB6CA;margin:0}
.cp-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;font-size:14.5px;line-height:1.75}
.cp-box h3{margin:0 0 var(--sp-1);font:700 16px var(--serif);color:var(--gold-hi)}
.cp-box p{margin:2px 0}
.cp-box .warn{color:#F8B4B4}
.cp-lead{font-size:16px;line-height:1.8;color:#F3F0E8;margin:var(--sp-3) 0 0;max-width:46em}
.cp-toc{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-4) 0 0}
.cp-toc a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--gold-hi);font-size:14px}
.cp-toc a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.cp-sec{scroll-margin-top:16px}
/* 道具說明：分組顏色、福袋內容清單 */
.cp-sec.it-g0{--cp-c:#7CBF4A}.cp-sec.it-g1{--cp-c:#5FA8E0}.cp-sec.it-g2{--cp-c:#E0A030}.cp-sec.it-g3{--cp-c:#9C88E6}.cp-sec.it-g4{--cp-c:#D8B44A}.cp-sec.it-g5{--cp-c:#4FC1B0}.cp-sec.it-g6{--cp-c:#E07070}.cp-sec.it-g7{--cp-c:#8A93A6}
.cp-card.it-wide{grid-column:1/-1}
.it-list{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.it-list li{font-size:13px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:6px;padding:1px 8px}
/* 任務屋：任務卡（條件／提示／獎勵分列）、特別獎勵「次數 → 獎勵」小格 */
.qp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,22em),1fr));margin:var(--sp-3) 0;padding:0;list-style:none}
.qp-card{display:flex;flex-direction:column;gap:8px;min-width:0;background:var(--panel);border:1px solid var(--line-soft);border-top:3px solid var(--gold);border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4)}
.qp-card h3{margin:0;font:700 17px/1.4 var(--serif);color:var(--gold-hi)}
.qp-desc p,.qp-row dd p{margin:0 0 4px}
.qp-desc{font-size:14.5px;line-height:1.7;color:#F3F0E8}
.qp-card dl{display:grid;gap:6px;margin:0}
.qp-row{display:grid;grid-template-columns:5em minmax(0,1fr);gap:8px;align-items:start;font-size:14px;line-height:1.7;border-top:1px dashed var(--line-soft);padding-top:6px}
.qp-row dt{color:var(--text-2);font-size:13px;padding-top:1px}
.qp-row dd{margin:0}
.qp-row.is-reward dd{color:var(--gold-hi);font-weight:700}
.qp-card.is-off{border-top-color:#8A93A6;opacity:.75}
.qp-warn{color:#F8B4B4}
.qp-card a,.qp-gifts a{color:var(--gold-hi)}
.qp-gift-head{display:flex;gap:16px;margin:0;font-size:13px;color:var(--text-2)}
.qp-gifts{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5em),1fr));margin:var(--sp-2) 0 var(--sp-3);padding:0;list-style:none}
.qp-gifts li{display:flex;gap:10px;align-items:baseline;min-width:0;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-s);padding:6px 10px;font-size:14.5px}
.qp-gifts b{flex:none;min-width:2.4em;color:var(--gold);font-variant-numeric:tabular-nums}
#qp-gift,#qp-tasks{scroll-margin-top:16px}
/* 技能介紹：職業入口（每列一系）、菜鳥新手技能表 */
.ti-hint{margin:0 0 var(--sp-2);font-size:14px;color:var(--text-2)}
.ti-who{margin:0 0 6px;font-size:13.5px;color:var(--text-2)}
.ti-row{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5em),1fr));margin:0 0 8px;padding:0;list-style:none}
.ti-row.is-mix{margin-top:var(--sp-3)}
.ti-row>li{display:flex;min-width:0}
.ti-job{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;color:inherit;text-decoration:none}
.ti-job b{color:var(--gold-hi);font-size:15px}
.ti-job small{color:var(--text-2);font-size:12.5px}
a.ti-job:hover{border-color:var(--gold);background:#182A49}
a.ti-job:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.ti-job.is-off{opacity:.7;border-style:dashed}
.ti-h3{margin:var(--sp-5) 0 var(--sp-2);font:700 17px var(--serif);color:var(--gold-hi)}
.ti-tablewrap{container-type:inline-size}
.ti-table{width:100%;border-collapse:collapse;font-size:14px}
.ti-table th,.ti-table td{padding:7px 8px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
.ti-table th{background:#14213A;color:var(--gold-hi);font-size:13px}
.ti-table .n{text-align:right;font-variant-numeric:tabular-nums}
/* 菜鳥新手技能表：窄畫面改成每招一張卡，不橫向捲動 */
@container (max-width:599px){
  .ti-table,.ti-table tbody{display:block}
  .ti-table thead{display:none}
  .ti-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-2)}
  .ti-table td{display:block;border:0;padding:0;white-space:normal;text-align:left}
  .ti-table td::before{content:attr(data-label);display:block;font-size:12px;color:var(--text-2)}
  .ti-table td:first-child{grid-column:1/-1;font-size:16px;font-weight:700;color:var(--gold-hi)}
  .ti-table td:first-child::before{display:none}
  .ti-table td:empty{display:none}
  .ti-table .n{text-align:left}
}
/* 道具說明：卡片緊湊一點（道具多、說明短） */
.cp-sec[class*="it-g"] .cp-card{padding:var(--sp-2) var(--sp-3);gap:2px}
.cp-sec[class*="it-g"] .cp-card h3{font-size:15.5px}