/*
 * 鍛冶屋(2026-09-14 ユーザー裁定・装備強化)。
 *
 * **app.css には1行も足さない**(別担当が同時に触っているため)。ここに置くのは
 * 鍛冶屋の画面だけが使う差分で、面・文字・タグ・ボタンは app.css の物をそのまま借りる。
 * 色は app.css の変数(--danger-* / --heal-* / --reward-* / --line-*)だけを読む —
 * 同じ意味は同じ色、という体系をこのファイルのために崩さない。
 */

/* 所持(強化石・ゴールド)。費用の行を読むための前提なので、一覧より一段沈める */
.smithy-purse {
  background: var(--bg-sunken);
}

.smithy-purse .row .k {
  min-width: 7em;
}

/* 一覧の1枚。選ばれている枚だけが縁で立ち上がる(どれの話か迷わせない) */
.smithy-item {
  text-align: left;
  width: 100%;
}

.smithy-item.is-selected {
  border-color: var(--reward-line);
  box-shadow: 0 0 0 1px var(--reward-line) inset;
}

/* 天秤の主役2つ。**次の段階と成功率は同じ行で並べて読ませる** —
   離すと「+8にする」と「40%」が別々の情報として処理され、天秤にならない */
.smithy-odds {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--bg-sunken);
}

.smithy-next {
  font-size: 17px;
  font-weight: 600;
  color: var(--reward-fg);
}

.smithy-rate {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* 消滅の告知。押す直前の位置に、赤で1行だけ */
.note.smithy-warn {
  color: var(--danger-fg);
}

/* 直前の結果。成功は緑・消滅は赤で、同じ位置に同じ形で出る */
.smithy-result .row .k {
  min-width: 5em;
}

.smithy-result.is-forged {
  border-color: var(--heal-line);
  background: var(--heal-bg);
}

.smithy-result.is-forged .card-head .name {
  color: var(--heal-fg);
}

.smithy-result.is-broken {
  border-color: var(--danger-line);
  background: var(--danger-bg);
}

.smithy-result.is-broken .card-head .name {
  color: var(--danger-fg);
}

/* 街の施設カードの並び(治療師・商店・闘技場・酒場)に鍛冶屋を揃える。
   施設の小絵がまだ無いので武器の図像を仮に使っており、図像の器だけ合わせる(★仮) */
.card-head .fac-ico.is-placeholder {
  opacity: .9;
}

.smithy-tabs { display: flex; gap: 8px; margin-top: 16px; }
.smithy-tabs button { flex: 1; }
.reroll-step { margin: 22px 0 8px; font-size: 16px; }
.reroll-targets, .reroll-materials { max-height: 340px; overflow-y: auto; padding: 2px; }
.reroll-checkout .row { gap: 12px; }
.reroll-checkout .row .v { min-width: 0; overflow-wrap: anywhere; }
.smithy-reroll-result { margin-top: 12px; border-color: var(--reward-line); }
.smithy-fusion-outcomes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.reroll-up { color: var(--heal-fg); }
.reroll-down { color: var(--danger-fg); }
/* 件数が多いときも能力行を含むカードの高さを保ち、一覧側だけスクロールする。 */
.reroll-targets > .smithy-item, .reroll-materials > .smithy-item { flex-shrink: 0; }
.reroll-item-head { flex-wrap: wrap; align-items: center; }
.reroll-item-head .name { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }

/* 合成台：本体・素材を常に対で見せ、候補一覧は選択時だけ開く。 */
.fusion-bench { max-width: 680px; margin: 18px auto 0; }
.fusion-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.fusion-purse { color: var(--text); font-variant-numeric: tabular-nums; }
.fusion-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; gap: 8px; }
.fusion-plus { align-self: center; text-align: center; font-size: 24px; color: var(--reward-fg); }
button.fusion-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; min-height: 228px; padding: 16px 12px 12px; white-space: normal; border: 1px solid var(--reward-line); border-radius: 10px; background: linear-gradient(180deg, var(--bg-raise), var(--bg-sunken)); text-align: center; box-shadow: inset 0 1px 0 var(--line-soft); }
button.fusion-slot.is-empty { border-style: dashed; }
button.fusion-slot:hover:not(:disabled), button.fusion-slot:focus-visible { border-color: var(--reward-fg); background: var(--bg-raise); }
.fusion-slot-label { align-self: flex-start; font-size: 12px; color: var(--reward-fg); letter-spacing: .12em; }
.fusion-slot-art { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--line-soft); border-radius: 50%; background: var(--bg-sunken); color: var(--muted); font-size: 26px; }
.fusion-slot-art .item-ico { width: 42px; height: 42px; margin: 0; object-fit: contain; image-rendering: pixelated; }
.fusion-slot-name { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.fusion-slot-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.fusion-slot-foot { margin-top: auto; padding-top: 6px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.fusion-checkout { margin-top: 14px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-sunken); }
.fusion-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fusion-rates > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.fusion-rates strong { color: var(--reward-fg); font-variant-numeric: tabular-nums; }
.fusion-caption { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.fusion-action { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.fusion-price { display: flex; flex-direction: column; gap: 4px; min-width: 100px; font-size: 12px; }
.fusion-price strong { font-size: 17px; color: var(--text); }
.fusion-action > button { flex: 1; min-height: 48px; font-weight: 600; }
.fusion-help { margin-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.fusion-help summary { padding: 14px 0; cursor: pointer; }
.fusion-help p { margin: 0 0 10px; line-height: 1.7; }
.fusion-search { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-sunken); color: var(--text); font: inherit; font-size: 16px; }
.fusion-picker .stack { margin-top: 12px; }
.fusion-picker .smithy-item { flex-shrink: 0; }
@media (max-width: 480px) {
  .fusion-bench { margin-top: 12px; }
  .fusion-pair { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 5px; }
  .fusion-plus { font-size: 20px; }
  button.fusion-slot { min-height: 218px; padding: 12px 8px 10px; gap: 8px; }
  .fusion-slot-name { font-size: 13px; }
  .fusion-slot-art { width: 52px; height: 52px; }
  .fusion-slot-art .item-ico { width: 34px; height: 34px; }
  .fusion-checkout { padding: 12px; }
  .fusion-action { gap: 12px; }
}
.fusion-confirm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.fusion-confirm-pair > div { min-width: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-sunken); }
.fusion-confirm-pair .fusion-caption { margin: 0 0 8px; }
.fusion-confirm-pair .card-head { gap: 5px; }
.fusion-confirm-pair .name { font-size: 13px; }
.fusion-confirm-pair .note, .fusion-confirm-pair .muted { font-size: 12px; }
.fusion-probabilities { margin-top: 12px; font-size: 12px; }
.fusion-probabilities summary { padding: 8px 0; cursor: pointer; color: var(--muted); }
.fusion-probabilities[open] summary { margin-bottom: 8px; }