/* ------------------------------------------------------------ タブ */
.tabs{max-width:1180px;margin:-12px auto 22px;padding:0 20px;display:flex;gap:6px;
  border-bottom:1px solid var(--line-soft)}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--ink-3);
  padding:10px 16px 9px;font-size:14px;font-weight:500;border-radius:0;margin-bottom:-1px}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
body:not([data-view="fusion"]) .head-right{visibility:hidden}

/* ------------------------------------------------------------ 強化優先度 */
.pv-lead{color:var(--ink-2);font-size:13px;margin:0 0 16px;max-width:820px}
.pv-lead strong{color:var(--ink);font-weight:500}
.pv-cols{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.pv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pv-head h2{margin:0}
.pv-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--ink-2);padding:6px 12px;font-size:12px;
  border-radius:3px;cursor:pointer;display:inline-flex;align-items:center}
.btn-ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn-ghost[aria-busy="true"]{opacity:.6;pointer-events:none}
.pv-note{color:var(--ink-3)!important;font-size:11.5px!important;margin:0 0 10px!important}
.pv-note.warn{color:var(--gold)!important}
.pv-sub{margin-top:20px!important}

.pv-fields{display:grid;gap:8px 12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pv-field{display:flex;flex-direction:column;gap:3px}
.pv-field span{font-size:11px;color:var(--ink-3);line-height:1.35}
.pv-field .in{display:flex;align-items:center;gap:6px}
.pv-field em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:1.2em}
.pv input[type=number],.pv input[type=text],.pv select{
  width:100%;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-soft);
  border-radius:3px;padding:6px 8px;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.pv select{font-family:var(--gothic);font-size:12.5px;padding:5px 6px}
.pv input:focus,.pv select:focus{outline:none;border-color:var(--gold)}
.pv-check{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.pv-check input{accent-color:var(--gold)}

.pv-crests td{vertical-align:middle;padding:5px 8px 5px 0}
.pv-crests td:first-child{font-family:var(--mincho);font-size:15px;color:var(--ink);white-space:nowrap}
.pv-crests td:first-child small{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-right:6px}
.pv-crests .lv{width:68px}
.pv-crests .rar{width:78px}
.pv-crests .fx{display:flex;gap:6px}
.pv-crests .fx select:first-child{min-width:0;flex:1.6}
.pv-crests .fx select:last-child{flex:1;min-width:72px}
.pv-crests .none{color:var(--ink-3);font-size:11.5px}
.pv-crests tr.off td:first-child{color:var(--ink-3)}

.pv-result{margin-top:14px}
.pv-kpis{display:flex;gap:10px;flex-wrap:wrap}
.pv-kpi{margin:0;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:3px;padding:9px 14px;min-width:150px}
.pv-kpi dt{font-size:10.5px;color:var(--ink-3);margin:0}
.pv-kpi dd{margin:2px 0 0;font-family:var(--mono);font-size:19px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pv-kpi dd small{font-size:11px;color:var(--ink-3);font-weight:400;margin-left:4px}

.pv-rank td{vertical-align:middle}
.pv-rank td.rk{font-family:var(--mono);color:var(--ink-3);width:2em}
.pv-rank tr.top td.rk{color:var(--gold);font-weight:600}
.pv-rank td.nm{color:var(--ink);white-space:nowrap}
.pv-rank td.nm small{color:var(--ink-3);font-family:var(--mono);font-size:10.5px;margin-left:6px}
.pv-rank td.ef{font-size:11.5px}
.pv-rank td.bar{min-width:150px}
.pv-rank .bw{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.pv-rank .bt{flex:1;height:6px;background:var(--surface-2);border-radius:1px;overflow:hidden;max-width:120px}
.pv-rank .bf{height:100%;background:var(--ink-3)}
.pv-rank tr.top .bf{background:var(--gold)}
.pv-rank .bv{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);min-width:4.6em;text-align:right}

.pv-plan{color:var(--ink-2);font-size:12.5px;line-height:2.1;margin:0 0 10px}
.pv-step{display:inline-block;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:0 8px;color:var(--ink);font-size:12px;line-height:1.9;white-space:nowrap}
.pv-step b{font-family:var(--mono);font-weight:600;color:var(--gold);margin-left:4px}
.pv-arrow{color:var(--ink-3);margin:0 5px}
.pv-levels{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2)}
.pv-levels span b{font-family:var(--mono);color:var(--ink);font-weight:500}

.pv-howto{margin-top:14px}
.pv-howto a{color:var(--ink-2)}

@media (max-width:900px){ .pv-cols{grid-template-columns:1fr} }
@media (max-width:760px){
  .tabs{padding:0 14px;margin:-6px auto 16px}
  .tab{flex:1;padding:10px 6px 9px}
  .pv-fields{grid-template-columns:1fr 1fr}
  .pv-actions{margin-left:0}
  .pv-rank td.ef{display:none}
  .pv-rank th:nth-child(3){display:none}
  .pv-rank td.bar{min-width:0}
  .pv-rank .bt{display:none}
  .pv input[type=number],.pv select{font-size:16px}
  .pv-kpis{display:grid;grid-template-columns:1fr 1fr}
  .pv-kpi{min-width:0}
  /* 紋章は1行に収まらないので、名前・レアリティ・Lv の下に融合バフを置く */
  .pv-crests thead{display:none}
  .pv-crests tbody tr{display:grid;grid-template-columns:1fr 92px 70px;gap:6px 8px;align-items:center;
    padding:8px 0;border-bottom:1px solid var(--line-soft)}
  .pv-crests tbody td{border:none;padding:0}
  .pv-crests tbody td:nth-child(4){grid-column:1/-1}
  .pv-crests tbody td:nth-child(4):has(.none){display:none}
  .pv-crests .rar,.pv-crests .lv{width:100%}
}

/* ステータスの表（通常攻撃・コンボ・クリティカル × 発生確率・ダメージ・ダメージアップ） */
.pv-matrix{margin-top:14px;table-layout:fixed}
.pv-matrix th,.pv-matrix td{padding:5px 8px 5px 0;vertical-align:middle}
.pv-matrix thead th{font-family:var(--gothic);letter-spacing:0;font-size:11px;font-weight:500}
.pv-matrix thead th:first-child{width:7.2em}
.pv-matrix tbody th{white-space:nowrap}
.pv input[type=number]::-webkit-inner-spin-button,.pv input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pv input[type=number]{-moz-appearance:textfield}
.pv-matrix tbody th{font-family:var(--gothic);font-size:12.5px;letter-spacing:0;color:var(--ink);font-weight:500}
.pv-matrix td.gap{color:var(--ink-3);font-size:11px;text-align:center}
.pv-matrix .in{display:flex;align-items:center;gap:4px}
.pv-matrix em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.pv-matrix tr:last-child td,.pv-matrix tr:last-child th{border-bottom:none}
@media (max-width:760px){
  .pv-matrix thead th:first-child{width:6.9em}
  .pv-matrix thead th{font-size:10px}
  .pv-matrix tbody th{font-size:10.5px}
  .pv-matrix input[type=text]{padding:6px 5px}
  .pv-matrix em{display:none}
  .pv-matrix th,.pv-matrix td{padding-right:5px}
}

/* ------------------------------------------------ 手持ちの紋章タブ */
.pv-lead a,.pv-howto a,.pv-rank a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-dim, #8A6A2E)}
.pv-cols .pv-result{margin-top:0}
.cs-save{display:flex;gap:8px;margin-bottom:8px}
.cs-save input{flex:1;min-width:0;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-soft);
  border-radius:3px;padding:7px 10px;font-family:var(--gothic);font-size:13px}
.cs-save input:focus{outline:none;border-color:var(--gold)}
.cs-save .btn-primary{padding:7px 18px}
.cs-slots{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.cs-slot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cs-slot:last-child{border-bottom:none}
.cs-meta{flex:1;min-width:180px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.cs-meta strong{color:var(--ink);font-weight:500;font-size:13.5px}
.cs-meta small{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.cs-sum{flex-basis:100%;font-size:11px;color:var(--ink-3);line-height:1.5}
.cs-btns{display:flex;gap:6px}
.cs-empty{color:var(--ink-3);font-size:12px;padding:8px 0}
@media (max-width:760px){
  .pv input[type=text]{font-size:16px}
  .cs-btns{width:100%}
  .cs-btns .btn-ghost{flex:1;justify-content:center;padding:8px 6px}
}

.cs-cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
#view-priority .pv-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media (max-width:900px){ .cs-cols,#view-priority .pv-cols{grid-template-columns:1fr} }
@media (max-width:760px){ .tab{white-space:nowrap;font-size:13px;padding:10px 2px 9px} }
.pv-count{margin:10px 0 8px!important;font-size:12.5px!important;color:var(--ink-2)!important}
.pv-count b{font-family:var(--mono);color:var(--ink);font-weight:600}
.pv-wg{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:6px}
.pv-wg .pv-check{margin-top:0}
.pv-star{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gold)}
.pv-star select{width:auto;min-width:96px}
.pv-star select:disabled{opacity:.45}

/* ------------------------------------------- 融合素材（手持ちの紋章タブ） */
.pv-crests .mat{display:inline-flex;align-items:center;gap:4px}
.pv-crests .matn{width:64px}
.pv-crests .mat em{font-style:normal;font-size:11px;color:var(--ink-3)}
.pv-crests .matl{display:none}
@media (max-width:760px){
  .pv-crests tbody td.matc{grid-column:1/-1;display:flex;align-items:center;gap:8px}
  .pv-crests tbody td.matc:has(.none){display:none}
  .pv-crests .matl{display:inline;font-size:11px;color:var(--ink-3)}
}

/* ------------------------------------------- 融合シミュレータのカード */
.c-hold{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2);
  border-top:1px solid var(--line-soft);padding-top:10px}
.c-hold b{color:var(--ink);font-weight:500}
.c-hold a{color:var(--gold);text-decoration:none;border-bottom:1px solid #8A6A2E}
.c-note{margin:0;color:var(--ink-3);font-size:11.5px}
.c-odds{width:100%;font-size:11.5px;margin-top:2px}
.c-odds th,.c-odds td{padding:3px 8px 3px 0;border-bottom:1px solid var(--line-soft)}
.c-odds th{font-family:var(--gothic);letter-spacing:0;text-transform:none;font-size:10.5px;font-weight:500}
.c-odds td.num{font-family:var(--mono);color:var(--ink)}
.c-odds tr:last-child td{border-bottom:none}
.c-res{margin:2px 0 0;font-size:11.5px;color:var(--ink-2)}
.c-res .up{color:var(--gold);font-weight:600}
.card .btn-primary:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:760px){
  .pv-crests .matl{white-space:nowrap}
  .pv-crests .matn{width:84px;flex:none}
}
.cs-cols{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.pv .pv-crests input.matn{width:68px}
@media (max-width:760px){ .pv .pv-crests input.matn{width:84px} }

/* ------------------------------------------- カードの位置を固定する */
/* 見出し：番号・名前・固定値を1行に。固定値は2行ぶんの高さで固定し、はみ出す文字は縮小 */
.card .c-head{height:40px;align-items:center;flex-wrap:nowrap}
.card .c-fixed{flex:1;min-width:0;white-space:nowrap;overflow:hidden;line-height:1.5}
/* バフの名前：高さ固定・1行 */
.card .opt{white-space:nowrap;overflow:hidden;height:30px;line-height:18px}
/* 手持ち・素材・確率・結果：いつも同じ行数・同じ高さ */
.c-hold{gap:3px}
.c-line{white-space:nowrap;overflow:hidden;height:20px;line-height:20px;font-size:12px}
.c-odds{table-layout:fixed;border-collapse:collapse}
.c-odds col.c1{width:62px}
.c-odds col.c2{width:84px}
.c-odds th,.c-odds td{white-space:nowrap;overflow:hidden;height:24px;line-height:18px}
.c-odds th.num,.c-odds td.num{text-align:right;padding-right:2px}
.c-res{color:var(--ink-2)}
.card .c-foot{height:40px}
.card .c-foot .btn-primary{width:150px;white-space:nowrap}
@media (max-width:760px){ .card .c-head{flex-wrap:nowrap} .card .c-fixed{flex-basis:auto;margin-left:auto} }
.card .c-fixed{text-align:right}

/* 手持ちの紋章：初期値の枠を短く、融合バフの枠を広く */
.pv-crests .fx select:first-child{flex:1 1 auto;min-width:0}
.pv-crests .fx select:last-child{flex:0 0 84px;min-width:0}

/* ------------------------------------------- 融合シミュレータ：狙い目と今のバフ */
/* 金＝今よりダメージが伸びる（文字と細い枠だけ）。青＝今の融合バフ（枠と文字）。白＝今回の結果（塗り） */
.card .opt.best,.card .val.best{color:var(--gold);border-color:rgba(227,172,76,.55);background:var(--surface-2)}
.card .opt.cur,.card .val.cur{color:#8EC1F0;border-color:#4E9BD1;box-shadow:inset 0 0 0 1px #4E9BD1}
.card .opt.best.cur,.card .val.best.cur{color:var(--gold)}
.card .opt.hit,.card .val.hit{background:#E6EAF5;color:#10131C;border-color:#E6EAF5;font-weight:600}
.card .opt.hit.best,.card .val.hit.best{box-shadow:inset 0 0 0 2px var(--gold);color:#10131C}
.card .opt.hit.cur,.card .val.hit.cur{box-shadow:inset 0 0 0 2px #4E9BD1}
.fx-legend{margin:0 0 12px;font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.fx-legend .lg{display:inline-block;font-size:10px;padding:0 6px;border-radius:2px;line-height:18px;margin-left:6px}
.fx-legend .lg:first-child{margin-left:0}
.fx-legend .lg-best{border:1px solid rgba(227,172,76,.55);color:var(--gold);background:var(--surface-2)}
.fx-legend .lg-cur{border:1px solid #4E9BD1;color:#8EC1F0;box-shadow:inset 0 0 0 1px #4E9BD1}
.fx-legend .lg-hit{border:1px solid #E6EAF5;color:#10131C;background:#E6EAF5;font-weight:600}
.c-odds .gold{color:var(--gold)}

/* ------------------------------------------- ステータスと紋章タブの配置 */
/* 左：ステータス・保存と呼び出し／右：手持ちの紋章。狭い画面ではステータス→紋章→保存の順に積む */
.cs-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  grid-template-areas:"stats crests" "save crests";align-items:start}
.cs-stats{grid-area:stats;min-width:0}
.cs-crests{grid-area:crests}
.cs-savep{grid-area:save}
@media (max-width:1000px){
  .cs-cols{grid-template-columns:1fr;grid-template-areas:"stats" "crests" "save"}
}
/* 融合シミュレータ：凡例とリセット */
.fx-bar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:0 0 12px}
.fx-bar .fx-legend{margin:0;flex:1;min-width:0}
.fx-bar .btn-reset{height:30px;padding:0 16px;font-size:12px;white-space:nowrap}

/* 融合ボタン・融合回数・素材の残りを1行にまとめる */
.card .c-foot{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;height:40px}
.card .c-foot .btn-primary{width:118px;padding:8px 0;text-align:center}
.card .c-foot .counts{margin-left:0}
.card .c-mat{min-width:0;text-align:right;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.card .c-mat > span{display:block;overflow:hidden}
.card .c-mat b{color:var(--ink);font-weight:600;font-family:var(--mono)}
.card .c-mat b.neg{color:#E5544B}
.card .c-mat-off{color:var(--ink-3)}
.card .c-mat a{color:var(--gold);text-decoration:none}
.c-odds td.gold{color:var(--gold)}

/* 値の枠：上段に今の Lv での上昇量、下段のかっこに初期値（高さは固定） */
.card .val{display:flex;flex-direction:column;justify-content:center;align-items:center;height:40px;line-height:1.2;overflow:hidden}
.card .val b{display:block;font-weight:inherit;width:100%;white-space:nowrap;overflow:hidden}
.card .val small{display:block;font-size:9.5px;opacity:.7;white-space:nowrap}
/* バフ名は押して選べる。選択中（直前の結果ではないもの）は白い細枠 */
.card .opt{cursor:pointer}
.card .opt.sel{box-shadow:inset 0 0 0 1px #E6EAF5;color:var(--ink)}
.card .opt.sel.best{color:var(--gold)}

/* 強化の優先度の表：紋章名／レア／Lv、バフ名／補正値、ほかの効果を列でそろえる */
.pv-rank td.nm{font-family:var(--mincho);font-size:14px}
.pv-rank td.rr{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.pv-rank td.lvv{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);padding-right:14px}
.pv-rank td.bn{font-size:12px;color:var(--ink);white-space:nowrap}
.pv-rank td.pv2{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap;padding-right:14px}
.pv-rank td.ot{font-size:11px;color:var(--ink-3)}
.pv-rank .short{display:none}
@media (max-width:760px){
  .pv-rank th.ot,.pv-rank td.ot{display:none}
  .pv-rank .full{display:none}
  .pv-rank .short{display:inline}
  .pv-rank th:nth-child(3){display:table-cell}
}
.pv-rank th.num{text-align:right}
@media (max-width:760px){
  .pv-rank th.dg,.pv-rank td.dg,.pv-rank th.xp,.pv-rank td.xp{display:none}
  .pv-rank td.nm{font-size:13px}
  .pv-rank th,.pv-rank td{padding-right:6px}
}
.pv-rank .mr{display:none}
@media (max-width:760px){
  .pv-rank th.rr,.pv-rank td.rr{display:none}
  .pv-rank .mr{display:block;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);line-height:1.1}
}

/* 融合カードの表：バフ／値の範囲（基準値）／素材N個での確率。行数は全カードでそろえる */
.c-imp col.c0{width:22%}
.c-imp col.c2{width:66px}
.c-imp th,.c-imp td{height:22px;line-height:16px;padding:2px 6px 2px 0}
.c-imp th{font-size:10px}
.c-imp td{font-size:11.5px;color:var(--ink-2)}
.c-imp td.rg{font-family:var(--mono);font-size:11px;color:var(--ink)}
.c-imp td.rg small{color:var(--ink-3);font-size:10px;margin-left:2px}
.c-imp tr.sec td{color:var(--ink-3);font-size:10.5px;border-bottom:1px solid var(--line-soft)}
.c-imp tr.cur td{color:var(--ink)}
.c-imp tr.sum td{color:var(--ink);font-weight:600;border-top:1px solid var(--line)}
.c-imp tr.pad td{border-bottom:none}
.card .opt{cursor:default}
.c-imp td.rg{font-size:10.5px;letter-spacing:-.02em}
.c-imp tr td{box-sizing:border-box;height:22px}
.c-imp tr.gold td{color:var(--gold)}
.c-imp tr.gold td.rg small{color:rgba(227,172,76,.75)}
.fx-bar{justify-content:flex-end}

/* 融合ボタンは白地に黒文字。選択値（今回の結果・融合前は今のバフ）は金 */
.card .c-foot .btn-primary{background:#E6EAF5;color:#10131C;border-color:#E6EAF5}
.card .c-foot .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF}
.card .c-foot .btn-primary:disabled{background:var(--raised);color:var(--ink-3);border-color:var(--line);opacity:1}
.card .opt.hit,.card .val.hit{background:var(--gold);color:#1A1305;border-color:var(--gold);box-shadow:none;font-weight:600}
.card .val.hit small{opacity:.8}
/* 確率の見出しは2行（何の確率かを書く） */
.c-imp thead th{height:32px;line-height:13px;vertical-align:bottom}
.c-imp th.pr{white-space:normal;font-size:9.5px}
.c-imp col.c2{width:92px}

/* 高いグレードを引いたときの左端の光（枠の色・光る演出）はやめる。良し悪しは表の金色で示す */
.card[data-grade]::before{background:var(--line)}
.card.flare{animation:none}

/* カードの並び：バフ名 → 値の枠 → 融合ボタン・回数・素材 → 表（いちばん下） */
.card .c-foot{order:1}
.card .c-hold{order:2}
/* 表：見出し（列名・「現在以上」「現在超過」）は太字、合計は細字 */
.c-imp thead th{font-weight:700;color:var(--ink-2)}
.c-imp tr.sec td{font-weight:700;color:var(--ink-2)}
.c-imp tr.sum td{font-weight:400;color:var(--ink-2)}

/* 区分（現在／現在以上／現在超過）を左端の縦長の帯と色で示す */
.c-imp col.cb{width:22px}
.c-imp col.c0{width:20%}
.c-imp td.band{padding:0;text-align:center;vertical-align:middle;border-bottom:3px solid var(--surface);
  font-size:10px;font-weight:700;letter-spacing:.08em;border-radius:3px 0 0 3px}
.c-imp td.band span{writing-mode:vertical-rl;text-orientation:upright;display:inline-block;line-height:1}
.c-imp td.b-cur{font-size:9.5px;letter-spacing:0}
.c-imp .b-cur{background:#2B3350;color:var(--ink-2)}
.c-imp .b-ge,.c-key .b-ge{background:rgba(78,155,209,.30);color:#A9D2F5}
.c-imp .b-gt,.c-key .b-gt{background:rgba(111,201,150,.30);color:#A6E3C0}
.c-imp tr.g-cur td:not(.band){background:rgba(43,51,80,.35)}
.c-imp tr.g-ge td:not(.band){background:rgba(78,155,209,.06)}
.c-imp tr.g-gt td:not(.band){background:rgba(111,201,150,.06)}
.c-imp tr td:not(.band){border-bottom:1px solid rgba(43,51,80,.6)}
.c-imp tr.first td:not(.band){border-top:3px solid var(--surface)}
.c-imp td.nm{padding-left:6px}
.c-imp tr.pad td:not(.band){border-bottom:none}
.c-key{margin:4px 0 0;font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;height:16px;line-height:16px}
.c-key .k{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin:0 3px 0 6px}
.c-key .k:first-child{margin-left:0}
.c-imp tbody td:not(.band){line-height:16px;white-space:nowrap;overflow:hidden;vertical-align:middle}
.c-imp td.rg small{line-height:1;vertical-align:baseline}
.c-imp tr.gold td.band.b-ge{color:#A9D2F5}
.c-imp tr.gold td.band.b-gt{color:#A6E3C0}
.c-imp col.c0{width:17%}
.c-imp col.c2{width:78px}
.c-imp th.pr{font-size:9px}
.c-imp td.band span{font-size:10.5px;letter-spacing:.12em;padding:2px 0}
.c-imp td.band span{writing-mode:horizontal-tb;text-orientation:mixed;line-height:11px;letter-spacing:0;padding:0}
/* 値の範囲と基準値は別の列。どちらも右寄せで、% の位置をそろえる */
.c-imp col.cs{width:27%}
.c-imp td.rg,.c-imp td.bs{text-align:right;font-family:var(--mono);font-size:10.5px;padding-right:8px}
.c-imp td.rg{color:var(--ink)}
.c-imp td.bs{color:var(--ink-3)}
.c-imp tr.gold td.bs{color:rgba(227,172,76,.8)}
.c-imp col.c0{width:16%}
.c-imp col.cs{width:23%}
.c-imp td.rg,.c-imp td.bs{font-size:10px;padding-right:6px}
.c-imp thead th.num{padding-right:6px}
.c-imp thead th:last-child,.c-imp td.num{padding-right:0}
.c-imp col.c0{width:19%}
.c-imp col.cs{width:21%}
.c-imp td.nm{font-size:11px;padding-left:5px}
/* 確率は合計を太字、内訳は細字 */
.c-imp tr.rec td.num{font-weight:400;color:var(--ink-2)}
.c-imp tr.sum td.num,.c-imp tr.solo td.num{font-weight:700;color:var(--ink)}
.c-imp tr.gold td.num{color:var(--gold)}

/* ------------------------------------------- 見出しとタブを上に固定 */
header{position:sticky;top:0;z-index:30;margin-bottom:0;transition:padding .15s}
header h1{transition:font-size .15s}
.tabs{position:sticky;top:var(--head-h, 0px);z-index:29;background:var(--ground);
  margin-top:0;padding-top:12px;box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax 0 -100vmax)}
.wrap{padding-top:22px}
body.scrolled header{padding:10px 0 8px}
body.scrolled header h1{font-size:20px}
@media (max-width:760px){
  .tabs{margin-top:0;padding-top:6px}
  .wrap{padding-top:16px}
  body.scrolled header{padding:8px 0 6px}
  body.scrolled header h1{font-size:18px}
}
.wrap{padding-top:0}
@media (max-width:760px){ .wrap{padding-top:0} .tabs{margin-bottom:14px} }

/* ------------------------------------------- スマホ：融合シミュレータを1枚ずつ横にスライド */
.fx-pick,.fx-bar .btn-reset .short{display:none}
@media (max-width:760px){
  /* 縦にスクロールせず収まるよう、融合タブでは見出しを最初から細くする */
  body[data-view="fusion"] header{padding:8px 0 6px}
  body[data-view="fusion"] header h1{font-size:18px}
  /* 紋章のボタン（6列×2段。12個目はリセット） */
  .fx-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0 0 10px}
  .fx-pick{display:contents}
  .fx-pick button,.fx-bar .btn-reset{height:30px;padding:0;border-radius:3px;font-size:12px;white-space:nowrap}
  .fx-pick button{background:var(--surface);border:1px solid var(--line-soft);color:var(--ink-3);font-family:var(--mincho)}
  .fx-pick button.gr{color:var(--ink-2)}
  .fx-pick button.on{background:var(--gold);border-color:var(--gold);color:#1A1305;font-weight:700}
  .fx-bar .btn-reset{font-size:10.5px}
  .fx-bar .btn-reset .full{display:none}
  .fx-bar .btn-reset .short{display:inline}
  /* カードは横に並べ、1枚ずつ止まる */
  #view-fusion .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  #view-fusion .grid::-webkit-scrollbar{display:none}
  #view-fusion .grid .card{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  /* 1枚が画面に収まるよう詰める */
  #view-fusion .card{padding:12px;gap:8px}
  #view-fusion .card .c-head{height:32px}
  #view-fusion .card .opt{height:28px}
  #view-fusion .card .val{height:34px}
  #view-fusion .card .c-foot{height:36px}
  #view-fusion .card .c-hold{padding-top:6px}
  .c-imp tr td,.c-imp th,.c-imp td{height:19px}
  .c-imp thead th{height:26px}
  .c-key{margin-top:2px;height:14px;line-height:14px;font-size:9.5px}
  #view-fusion .model{margin-top:20px}
}

/* ------------------------------------------- スマホ：さらに詰めて1画面に収める */
@media (max-width:760px){
  /* 見出しは固定せず、スクロールすると消える。タブだけ上に残す */
  header{position:relative}
  .tabs{top:0}
  .tab{padding:8px 2px 7px}
  body[data-view="fusion"] header{padding:6px 0 4px}
  body[data-view="fusion"] header h1{font-size:16px}
  .tabs{margin-bottom:8px}
  /* 紋章のボタン */
  .fx-bar{gap:4px;margin:0 0 8px}
  .fx-pick button,.fx-bar .btn-reset{height:26px;font-size:11.5px}
  .fx-bar .btn-reset{font-size:10px}
  /* カードの中 */
  #view-fusion .card{padding:10px 12px;gap:6px}
  #view-fusion .card .c-head{height:26px}
  #view-fusion .card .c-name{font-size:15px}
  #view-fusion .card .c-fixed{font-size:9px;line-height:1.35}
  #view-fusion .card .opt{height:26px;line-height:16px;padding:4px 3px}
  #view-fusion .card .opts,#view-fusion .card .vals{gap:4px}
  #view-fusion .card .val{height:31px}
  #view-fusion .card .val small{font-size:9px}
  #view-fusion .card .c-foot{height:30px;gap:10px}
  #view-fusion .card .c-foot .btn-primary{width:92px;height:30px;padding:0;font-size:12.5px}
  #view-fusion .card .counts .n{font-size:20px}
  #view-fusion .card .counts .cap{font-size:8.5px}
  #view-fusion .card .c-mat{font-size:11px}
  #view-fusion .card .c-hold{padding-top:4px}
  .c-imp tr td,.c-imp th,.c-imp td{height:18px;line-height:14px}
  .c-imp thead th{height:24px}
  .c-imp td.band span{line-height:10px;font-size:9.5px}
  .c-key{height:12px;line-height:12px;font-size:9px;margin-top:2px}
}
@media (max-width:760px){
  #view-fusion .card .val{padding:2px 1px}
  #view-fusion .card .val b{font-size:11.5px;line-height:14px}
  #view-fusion .card .val small{line-height:11px}
}

/* 値の枠：上段（Lv込みの値）と下段（基準値）が重ならないよう、高さは中身に合わせて伸ばす
   （端末のフォントによっては固定の高さに収まらず、2行が重なって見えていた） */
.card .val{height:auto;min-height:40px;overflow:visible;gap:1px}
.card .val b,.card .val small{display:block;line-height:1.2;flex:none}
@media (max-width:760px){
  #view-fusion .card .val{height:auto;min-height:33px;padding:3px 1px;overflow:visible}
  #view-fusion .card .val b{font-size:11.5px;line-height:1.2}
  #view-fusion .card .val small{font-size:9px;line-height:1.2}
}