/* =====================================================================
   商会・品 (WP-C) — 商会タブ / 品シート / 入手のトースト・祝祭 / 選ぶシート
   ui.css のトークン (--iron-*, --gold*, --t-*, --sp-*) と kit の部品を土台に重ねる。
   押せる場所は最低 44×44。値段は金貨の印 (.ui-g-gold) + 数字 (表の数字)。
   ===================================================================== */

/* ---------- 共通の小物 ---------- */
.wpc-dic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--glow, #000) 55%, transparent)) drop-shadow(0 1px 0 #000); }
.wpc-dic canvas { width: 24px; height: 24px; }
.wpc-gold { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; color: var(--accent-hi); font-weight: 700; }
.wpc-dim { color: var(--ink-faint); font-weight: 500; }
.wpc-cur { font-size: 11px; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }
.wpc-caret { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wpc-caret.in { width: 16px; height: 16px; margin-left: -4px; opacity: 0.8; }
.wpc-delta { gap: 2px 7px; font-size: 12px; }
.wpc-empty { padding: 14px 8px; text-align: center; font-size: 13px; color: var(--ink-dim); }
.wpc-empty.big { padding: 28px 12px; line-height: 1.8; }
.wpc-hint { margin: 2px 4px 8px; font-size: 11.5px; line-height: 1.7; color: var(--ink-faint); text-align: center; }
.wpc-tag { flex: 0 0 auto; padding: 1px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: #b8ab92; border: 1px solid #4a3d36; border-radius: 2px; background: rgba(0,0,0,0.35); }
.wpc-tag.dead { color: #ff9a8a; border-color: #6a2a24; }
.wpc-x {
  flex: 0 0 auto; width: var(--hit); height: var(--hit); margin: -8px -8px -8px 0;
  font-family: var(--font); font-size: 20px; line-height: 1; color: var(--ink-dim);
  background: none; border: 0; cursor: pointer; touch-action: manipulation;
}

/* =====================================================================
   商会タブ
   ===================================================================== */
/* ページは流さない: 番人・区分・(分類) は上に固定、一覧の箱が残りの高さを受け持ち、頁で送る */
#town-screen > .wpc-shop { flex: 1 1 0; min-height: 0; }
.wpc-shop { display: flex; flex-direction: column; gap: 6px; }
.wpc-shop > * { flex: 0 0 auto; }
.wpc-shop > .ui-whisper { min-height: var(--hit); padding: 2px 10px 2px 2px; }
.wpc-shop > .ui-whisper .ui-whisper-bust { width: 38px; height: 38px; }
.wpc-shop > .ui-whisper .ui-whisper-line { font-size: 12px; }
.wpc-bar { display: grid; gap: 6px; }
.wpc-bar .ui-seg-b .ui-badge { margin-left: 2px; }
.wpc-bar .ui-chips { margin: 0 -12px; }
.wpc-bar .ui-chips-in { padding: 0 12px; }
.wpc-bar .ui-chip { min-width: var(--hit); justify-content: center; }
.wpc-cats .ui-chip .ui-badge { margin-left: 2px; }

/* 一覧の見出し (題・頁送り) と箱 */
.wpc-lhead { display: flex; align-items: center; gap: 8px; min-height: var(--hit); padding: 0 2px; }
.wpc-lhead-t { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; color: var(--accent-hi); }
.wpc-lhead-t::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 2px; transform: rotate(45deg); background: linear-gradient(135deg, #f3d58b, #8a6d2e); }
.wpc-lhead-s { min-width: 0; flex: 1 1 auto; font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpc-list { flex: 1 1 0 !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; }
.wpc-list > * { flex-shrink: 0; }
.wpc-kindbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 8px 0 12px;
  font-family: var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation;
  background: var(--grain), var(--plate-hi); border: 1px solid #4a3d36; border-radius: 3px;
}
.wpc-kindbtn-l { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.1em; }
.wpc-kindbtn-v { font-size: 13px; font-weight: 800; color: var(--accent-hi); }
.wpc-kindgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 2px; }
.wpc-kindgrid .ui-btn { min-height: 52px; padding: 4px 6px; }

/* ---------- まとめての札 ---------- */
.wpc-bulk {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px 0;
  background: var(--corners), var(--grain), radial-gradient(120% 70% at 50% 0%, rgba(201,162,74,0.09), rgba(0,0,0,0) 60%), var(--plate);
  border: 1px solid #5a4a36; border-radius: 3px;
  box-shadow: var(--plate-edge), 0 0 18px rgba(201,162,74,0.08);
}
.wpc-bulk-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.wpc-bulk .ui-btn { min-width: 0; min-height: 56px; padding: 6px 8px; gap: 6px; font-size: 14px; letter-spacing: 0.06em; }
.wpc-bulk .ui-btn .ui-btn-t { max-width: 100%; }
.wpc-bulk .ui-btn .ui-btn-s { max-width: 100%; font-size: 11.5px; color: #cdbf9f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpc-bulk .ui-btn:disabled .ui-btn-s { color: var(--ink-faint); }
.wpc-exbtn {
  display: flex; align-items: center; gap: 10px; width: calc(100% + 24px); min-height: var(--hit); margin: 0 -12px; padding: 2px 12px;
  font-family: var(--font); font-size: 11.5px; line-height: 1.5; text-align: left; color: var(--ink-dim);
  background: rgba(0,0,0,0.22); border: 0; border-top: 1px solid #2c2427; cursor: pointer; touch-action: manipulation;
}
.wpc-exbtn-t { flex: 1 1 auto; min-width: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpc-exbtn-t .wpc-keep-dot { display: inline-block; margin: 0 8px 1px 2px; vertical-align: middle; }
.wpc-exbtn-more { flex: 0 0 auto; font-weight: 700; color: var(--accent); letter-spacing: 0.12em; }
.wpc-exbtn-more::after { content: " ›"; }
.wpc-keep-dot { flex: 0 0 auto; width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #f3d58b, #8a6d2e); box-shadow: 0 0 4px rgba(243,213,139,0.6); }

/* ---------- 売却する持ち物（縦に折り返す一覧） ---------- */
.wpc-drow { flex: 0 0 auto; padding: 4px 8px 5px; background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge); }
.wpc-drow.reserve { border-style: dashed; border-color: #3a3030; }
.wpc-drow.dead .wpc-dic { filter: grayscale(0.9) brightness(0.7); }
.wpc-drow-h { display: flex; align-items: center; gap: 6px; height: 22px; margin-bottom: 3px; }
.wpc-drow-h .wpc-dic { width: 22px; height: 22px; }
.wpc-drow-h .wpc-dic canvas { width: 22px; height: 22px; }
.wpc-drow-h .wpc-tag { padding: 0 6px; line-height: 1.5; }
.wpc-doll-nm { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wpc-doll-cnt { margin-left: auto; font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.wpc-doll-sum { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.wpc-drow-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 6px; min-width: 0; height: auto; touch-action: pan-y; }
.wpc-sale-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 5px; border: 1px solid #33292a; background: #0d0a0d; }
.wpc-sale-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.wpc-sale-info > * { min-width: 0; white-space: normal; }
.wpc-sale-price { font-size: 12px; }
.wpc-sell-one { min-width: 44px; }
.wpc-drow-tiles .wpc-cell { flex: 0 0 46px; width: 46px; height: 52px; padding: 2px 1px; }
.wpc-drow-tiles .wpc-cell-art { height: 33px; }
.wpc-drow-tiles .wpc-cell-art canvas { width: 33px; height: 33px; }
.wpc-bag-empty { align-self: center; padding: 0 4px; font-size: 12px; color: var(--ink-faint); }

/* 品の札 */
.wpc-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: var(--hit); height: 66px; padding: 5px 2px 4px;
  font-family: var(--font); color: var(--ink);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--edge, #3a302c) 16%, transparent), rgba(0,0,0,0) 62%), #0d0a0d;
  border: 1px solid var(--edge, #3a302c); border-radius: 2px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 0 6px color-mix(in srgb, var(--edge, #000) 22%, transparent);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-tap) ease-out, filter var(--t-tap) ease-out;
}
.wpc-cell:active { transform: scale(0.95); filter: brightness(0.9); }
.wpc-cell-art { display: flex; align-items: center; justify-content: center; height: 38px; }
.wpc-cell-art canvas { width: 36px; height: 36px; }
.wpc-cell.unid .wpc-cell-art canvas { filter: brightness(0.62) saturate(0.6); }
.wpc-cell-p { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--accent-hi); text-shadow: 0 1px 0 #000; }
.wpc-cell-p .ui-g { margin-right: 0.15em; }
.wpc-cell-p.unid { color: #b4e6ff; }
.wpc-cell-k { font-style: normal; font-size: 10px; margin-right: 2px; color: #7fd0ff; letter-spacing: 0; }
.wpc-cell-new {
  position: absolute; top: 2px; right: 2px; padding: 0 3px; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.4;
  color: #1a0d04; background: linear-gradient(180deg, #ffd08a, #ff9a3a); border-radius: 1px; box-shadow: 0 0 6px rgba(255,140,40,0.85);
}
.wpc-cell-seal {
  position: absolute; top: 2px; left: 4px; font-size: 13px; font-weight: 800; line-height: 1;
  color: #ffe0a8; text-shadow: 0 0 6px rgba(127,208,255,0.8), 0 1px 0 #000;
}
.wpc-cell-keep { position: absolute; top: 5px; left: 5px; width: 5px; height: 5px; transform: rotate(45deg); background: linear-gradient(135deg, #f3d58b, #8a6d2e); box-shadow: 0 0 4px rgba(243,213,139,0.7); }
.wpc-cell-up { position: absolute; top: 1px; left: 4px; font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--up); text-shadow: 0 0 6px rgba(127,214,138,0.7), 0 1px 0 #000; }
.wpc-cell.rar-sr { box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 0 10px rgba(255,154,46,0.45); }
.wpc-cell.rar-lr { box-shadow: inset 0 0 10px rgba(0,0,0,0.9), 0 0 12px rgba(255,59,59,0.55); }

/* ---------- 買う: 棚の行 ---------- */
.wpc-stock { display: grid; gap: 8px; }
.wpc-srow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  min-height: 72px;
  background: var(--grain), var(--plate); border: 1px solid #33292a; border-left: 3px solid var(--edge, #4a3d36); border-radius: 3px;
  box-shadow: var(--plate-edge);
}
.wpc-srow.up { background: var(--grain), linear-gradient(90deg, rgba(110,190,95,0.12), rgba(0,0,0,0) 55%), var(--plate); }
.wpc-srow-info {
  width: 100%; box-sizing: border-box; min-width: 0; display: flex; align-items: flex-start; gap: 10px; min-height: 64px; padding: 8px 8px 8px 10px;
  font-family: var(--font); color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.wpc-srow-info:active { filter: brightness(0.9); }
.wpc-srow-ic {
  position: relative;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  background: radial-gradient(circle, color-mix(in srgb, var(--edge, #3a302c) 18%, transparent), rgba(0,0,0,0) 65%), #0d0a0d;
  border: 1px solid var(--edge, #3a302c); border-radius: 2px; box-shadow: inset 0 0 8px rgba(0,0,0,0.9);
}
.wpc-srow-count { position: absolute; right: -2px; bottom: -2px; padding: 0 3px; border: 1px solid #665337; border-radius: 3px; background: #100d10; color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.wpc-srow-ic canvas { width: 36px; height: 36px; }
.wpc-srow-t { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.wpc-srow-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wpc-srow-nm { min-width: 0; font-size: 14.5px; font-weight: 800; letter-spacing: 0.03em; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.wpc-srow-meta { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; }
.wpc-srow-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; min-height: 18px; }
.wpc-srow-who { flex-basis: 100%; min-width: 0; font-size: 11.5px; color: var(--ink-dim); white-space: normal; overflow-wrap: anywhere; }
.wpc-srow-lv { font-size: 11px; color: var(--ink-dim); white-space: nowrap; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; line-height: 1.45; }
.wpc-srow-lv.ng { color: #e08a7a; }
.wpc-buy { display: flex; align-items: center; padding: 8px 8px 8px 0; }
.wpc-buy-main {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: var(--grain), var(--plate-hi); border: 1px solid #5a4a36;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.08), inset 0 0 0 1px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.6);
  transition: transform var(--t-tap) ease-out, filter var(--t-tap) ease-out;
}
.wpc-buy-main { flex-direction: column; gap: 1px; width: 72px; padding: 3px 4px; border-radius: 3px; box-sizing: border-box; }
.wpc-buy-main:active:not(:disabled) { transform: scale(0.96); filter: brightness(0.9); }
.wpc-buy-p { font-size: 13.5px; }
.wpc-buy-l { font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--ink-dim); white-space: nowrap; }
.wpc-buy-main.eq { border-color: #8a6d2e; background: var(--grain), linear-gradient(180deg, #2c2318 0%, #1c160f 60%, #130f0a 100%); box-shadow: inset 0 1px 0 rgba(255,226,160,0.14), 0 0 0 1px rgba(201,162,74,0.25), 0 0 14px rgba(201,162,74,0.18); }
.wpc-buy-main.eq .wpc-buy-l { color: var(--accent-hi); }
.wpc-buy-main.short .wpc-buy-p { color: #e4776f; }
.wpc-buy-main:disabled { opacity: 0.5; filter: grayscale(0.4); cursor: default; }
.wpc-buy.with-scroll { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
.wpc-buy-scroll.ui-btn { width: 72px; min-height: 44px; padding: 5px 3px; box-sizing: border-box; font-size: 11.5px; letter-spacing: 0; }

/* =====================================================================
   品シート (ItemSheet)
   ===================================================================== */
.wpc-isheet .ui-sheet-body { text-align: left; padding-top: 6px; }
.wpc-isheet { border-top-width: 2px !important; }
.wpc-is-top { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: center; padding: 2px 0 10px; }
.wpc-is-art {
  position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--sheet-accent, #c9a24a) 30%, transparent), rgba(0,0,0,0) 66%), #0b090c;
  border: 1px solid color-mix(in srgb, var(--sheet-accent, #c9a24a) 70%, #000); border-radius: 3px;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.9), 0 0 16px color-mix(in srgb, var(--sheet-accent, #c9a24a) 25%, transparent);
}
.wpc-is-art canvas { width: 84px; height: 84px; }
.wpc-is-seal { position: absolute; right: 6px; bottom: 2px; font-size: 22px; font-weight: 800; color: #ffe0a8; text-shadow: 0 0 10px rgba(127,208,255,0.9), 0 1px 0 #000; }
.wpc-is-hd { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wpc-is-name { font-size: 19px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.35; overflow-wrap: anywhere; }
.wpc-is-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wpc-rtag { padding: 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; border: 1px solid currentColor; border-radius: 2px; background: rgba(0,0,0,0.35); text-shadow: none; }
.wpc-is-cat { font-size: 12px; color: var(--ink-dim); }
.wpc-is-grade .wpc-is-first { margin-left: 0; }
.wpc-is-unid { padding: 0 6px; font-size: 10.5px; font-weight: 700; color: #b4e6ff; border: 1px solid #36506a; border-radius: 2px; }
.wpc-is-curse { padding: 0 6px; font-size: 10.5px; font-weight: 700; color: #ffb0a4; border: 1px solid #7a2a24; border-radius: 2px; }
.wpc-is-stat { font-size: 13px; font-weight: 700; color: #9fc4ee; line-height: 1.5; }
.wpc-is-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); }
.wpc-is-note { margin: 2px 0 8px; font-size: 13px; color: #b4e6ff; }
.wpc-is-lab { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }
/* 主役の段: 隊と控えの全員 (押せばその場で装備) */
.wpc-is-pick { margin: 2px 0 12px; }
.wpc-is-picklab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }
.wpc-is-note.gold { color: var(--accent-hi); }
.wpc-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.wpc-dchip {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px;
  min-height: 60px; padding: 6px 6px 6px 6px; text-align: left;
  font-family: var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: var(--grain), var(--plate-hi); border: 1px solid #3a3029; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.06), 0 2px 6px rgba(0,0,0,0.5);
  transition: transform var(--t-tap) ease-out, filter var(--t-tap) ease-out;
}
.wpc-dchip:active:not(.off) { transform: scale(0.96); filter: brightness(0.92); }
.wpc-dchip-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wpc-dchip-top .wpc-dic { width: 26px; height: 26px; }
.wpc-dchip-nm { min-width: 0; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpc-dchip-sub { display: block; min-height: 16px; font-size: 11.5px; line-height: 1.3; }
.wpc-sd { display: inline-flex; flex-wrap: wrap; gap: 0 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wpc-sd .up { color: var(--up); } .wpc-sd .dn { color: var(--down); } .wpc-sd .eq, .wpc-sd .more { color: var(--ink-faint); font-weight: 500; }
.wpc-dchip-why { color: #c9a39a; font-weight: 700; letter-spacing: 0.08em; }
.wpc-dchip-bag { color: var(--ink-dim); }
.wpc-dchip.off { cursor: default; opacity: 0.5; filter: grayscale(0.7); box-shadow: none; }
.wpc-dchip.best { border-color: #c9a24a; background: var(--grain), linear-gradient(180deg, #2c2318 0%, #1c160f 60%, #130f0a 100%); box-shadow: 0 0 0 1px rgba(201,162,74,0.45), 0 0 14px rgba(201,162,74,0.25); }
.wpc-dchip-best { position: absolute; top: -7px; right: 6px; padding: 0 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; color: #1a1206; background: linear-gradient(180deg, #f3d58b, #c9a24a); border-radius: 2px; box-shadow: 0 0 6px rgba(243,213,139,0.6); }
.wpc-dchip-dead { position: absolute; top: 3px; right: 6px; font-size: 13px; font-weight: 800; color: #e4554f; }
.wpc-dchip-rsv { position: absolute; bottom: 4px; right: 5px; font-size: 9.5px; color: var(--ink-faint); border: 1px solid #3a3029; padding: 0 3px; border-radius: 2px; }
.wpc-dchip.best .wpc-dchip-dead { right: 46px; }
/* WP-B の「誰に装備させる？」(UI.equipChooserEl) を品シートの主役の段に。棚では手元の見出し (値段つき) を使う */
.wpc-is-pick .wpc-chooser-el { margin: 0; }

.wpc-chooser .wpc-chooser-el .pt-ch-h { display: none; }
/* 「すべての変化」の釦だけは残す (変化が2つを超える者がいるとき) */
.wpc-chooser .wpc-chooser-el .pt-ch-h:has(.pt-ch-all) { display: flex; justify-content: flex-end; }
.wpc-chooser .wpc-chooser-el .pt-ch-h .pt-ch-t { display: none; }
/* 人業を選ぶシートの見出し (品の絵と名前) */
.wpc-ch-hd { display: flex; align-items: center; gap: 10px; text-align: left; margin: 2px 0 10px; }
.wpc-ch-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wpc-ch-nm { font-size: 16px; font-weight: 800; }
.wpc-ch-st { font-size: 12px; color: #9fc4ee; font-weight: 700; }
.wpc-ch-lab { text-align: left; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }
.wpc-is-delta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding: 9px 12px;
  background: rgba(0,0,0,0.32); border: 1px solid #2c2427; border-radius: 3px;
}
.wpc-is-delta.center { justify-content: center; margin: 8px 0 2px; }
.wpc-is-delta .wpc-delta { font-size: 13px; }
.wpc-is-lines { display: grid; gap: 2px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.wpc-is-lore {
  margin: 0 0 4px; padding: 2px 0 2px 12px; font-size: 13px; line-height: 1.8; color: #b2a68f;
  border-left: 2px solid #5a4a36;
}
.wpc-is-top.wpc-revealed .wpc-is-art { animation: wpc-reveal 0.9s ease-out both; }
.wpc-is-top.wpc-revealed .wpc-is-name { animation: wpc-name-in 0.6s ease 0.25s both; }
@keyframes wpc-reveal {
  0% { filter: brightness(2.6); box-shadow: 0 0 40px #f3d58b; }
  100% { filter: none; }
}
@keyframes wpc-name-in { from { opacity: 0; transform: translateY(4px); letter-spacing: 0.3em; } to { opacity: 1; transform: none; } }

/* 操作 (決め手 56px + 補助の段) */
.wpc-act-main { display: flex; align-items: stretch; gap: 0; }
.wpc-act-main.split > .ui-btn { border-radius: 3px 0 0 3px; }
.wpc-act-more {
  flex: 0 0 auto; width: 56px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-hi); cursor: pointer; touch-action: manipulation;
  background: var(--grain), linear-gradient(180deg, #2c2318 0%, #1c160f 60%, #130f0a 100%);
  border: 1px solid #8a6d2e; border-left-color: #4a3a22; border-radius: 0 3px 3px 0;
}
.wpc-act-more:active { filter: brightness(0.9); }
.wpc-act-sec { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.wpc-act-sec.n1 { --n: 1; } .wpc-act-sec.n2 { --n: 2; } .wpc-act-sec.n3 { --n: 3; } .wpc-act-sec.n4 { --n: 4; }
.wpc-act-sec .ui-btn { padding: 6px 8px; font-size: 13.5px; letter-spacing: 0.04em; gap: 6px; }
.wpc-act-sec .ui-btn .ui-cost { padding: 1px 5px; font-size: 11.5px; }
.wpc-isheet .ui-sheet-foot .ui-btn.s-lg .ui-btn-s { color: #cdbf9f; }

/* =====================================================================
   選ぶシート (装備させる・渡す・鑑定・買う相手)
   ===================================================================== */
.wpc-picklist { display: grid; gap: 8px; margin: 8px 0 2px; text-align: left; }
.wpc-prow { display: flex; align-items: center; gap: 4px; background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge); }
.wpc-prow.t-gold { border-color: #8a6d2e; }
.wpc-prow-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 12px;
  font-family: var(--font); color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.wpc-prow-main:disabled { opacity: 0.45; cursor: default; }
.wpc-prow-main:active:not(:disabled) { filter: brightness(0.9); }
.wpc-prow-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wpc-prow-title { font-size: 14.5px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpc-prow-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; color: var(--ink-dim); }
.wpc-prow-r { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--accent-hi); font-weight: 800; }
.wpc-prow-act.ui-btn { flex: 0 0 auto; width: auto; min-width: 72px; margin: 6px 8px 6px 0; }
/* 鑑定の結果: 「装備」「売る」を並べる (売るは売値つき・細め)。狭い画面では2つとも詰める */
.wpc-prow-act.ui-btn:has(+ .wpc-prow-act) { margin-right: 0; }
.wpc-prow-act.sell.ui-btn { min-width: 58px; padding: 3px 10px; }
.wpc-prow-act.sell .ui-btn-s { font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .wpc-reveal .wpc-prow-act.ui-btn, .ap-sum .wpc-prow-act.ui-btn { min-width: 54px; padding-left: 8px; padding-right: 8px; } }
.wpc-odds { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wpc-odds b { font-size: 16px; color: #b4e6ff; font-variant-numeric: tabular-nums; }
.wpc-oddsbar { display: block; width: 58px; height: 4px; background: #120d10; border: 1px solid #2a2226; border-radius: 1px; overflow: hidden; }
.wpc-oddsbar i { display: block; height: 100%; background: linear-gradient(90deg, #1d5a86, #7fd0ff); }

/* 一括の確認・除外の内訳 */
.wpc-cbody { text-align: left; }
.wpc-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.wpc-strip .wpc-cell { width: 50px; height: 50px; padding: 2px; }
.wpc-strip .wpc-cell-art { height: auto; }
.wpc-strip-more { align-self: center; font-size: 12px; color: var(--ink-dim); padding: 0 6px; }
/* 切り替え (装備の候補も売る) */
.wpc-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 10px 0 0; padding: 8px 12px;
  font-family: var(--font); text-align: left; color: var(--ink); cursor: pointer; touch-action: manipulation;
  background: var(--grain), var(--plate-hi); border: 1px solid #3a3029; border-radius: 3px;
}
.wpc-toggle-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wpc-toggle-l { font-size: 14px; font-weight: 800; }
.wpc-toggle-s { font-size: 11.5px; color: var(--ink-dim); }
.wpc-switch { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 13px; background: #120d10; border: 1px solid #4a3d36; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out; }
.wpc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8cdb6, #6e6457); box-shadow: 0 1px 2px #000; transition: transform var(--t-fast) ease-out, background var(--t-fast) ease-out; }
.wpc-toggle.on .wpc-switch { background: linear-gradient(180deg, #3a2c14, #1c160f); border-color: #b8913e; }
.wpc-toggle.on .wpc-switch::after { transform: translateX(20px); background: radial-gradient(circle at 35% 30%, #fff3c0, #d6a93c 55%, #6e4c12); }
.wpc-keepnote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.6; color: var(--ink-dim); background: rgba(0,0,0,0.3); border: 1px solid #2c2427; border-radius: 3px; }
.wpc-keep-lab { font-weight: 800; color: var(--accent); letter-spacing: 0.14em; }
.wpc-exlist { display: grid; gap: 10px; margin: 6px 0 2px; text-align: left; }
.wpc-exsec .wpc-strip { justify-content: flex-start; }
.wpc-exsec { padding: 8px 10px; background: rgba(0,0,0,0.25); border: 1px solid #2c2427; border-radius: 3px; }
.wpc-exsec.none { opacity: 0.55; }
.wpc-exh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wpc-exh-t { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.wpc-exh-n { font-size: 12px; color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.wpc-exnote { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.wpc-exnote.foot { text-align: center; margin: 4px 0 0; }

/* =====================================================================
   入手のトースト・祝祭カード
   ===================================================================== */
.ui-toast.wpc-loot-toast { padding-top: 6px; padding-bottom: 6px; }
.wpc-loot-toast .ui-toast-t { display: flex; flex-direction: column; gap: 1px; }
.wpc-lt-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.wpc-lt-nm { font-weight: 800; }
.wpc-lt-nm.rar-c { color: #f1ead9; }
.wpc-lt-unid { padding: 0 5px; font-size: 10px; letter-spacing: 0.08em; color: #b4e6ff; border: 1px solid #36506a; border-radius: 2px; line-height: 1.5; }
.wpc-lt-who { font-size: 12px; color: #cdbf9f; font-weight: 700; }
.wpc-lt-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 11.5px; }
.wpc-lt-l2.dim { color: #b2a68f; font-weight: 500; }
.wpc-lt-tgt { color: #cdbf9f; font-size: 11.5px; }
.wpc-loot-toast .ui-toast-act { min-height: var(--hit); }
.ui-toast-t > .wpc-delta { display: flex; margin-top: 2px; font-size: 11.5px; }
.wpc-loot .ui-sheet-banner { letter-spacing: 0.1em; white-space: nowrap; gap: 8px; }
.wpc-loot .ui-sheet-banner::before, .wpc-loot .ui-sheet-banner::after { flex-basis: 22px; }

.ui-sheet.k-celebrate.wpc-loot { padding-top: 14px; }
.ui-sheet.k-celebrate.wpc-loot.rar-sr { animation: rar-glow-sr 1.6s ease-in-out 0.4s infinite; }
.ui-sheet.k-celebrate.wpc-loot.rar-lr { animation: rar-glow-lr 1.2s ease-in-out 0.5s infinite; overflow: hidden; }
.wpc-loot .ig-art { margin: 6px auto 8px; }
.wpc-loot .ig-art canvas.spr { max-width: 120px; max-height: 120px; }
.wpc-cel-name { display: block; margin-top: 2px; font-size: 19px; line-height: 1.45; }
.wpc-loot .ig-rarity { margin-top: 6px; }
.wpc-loot .ig-desc { margin: 10px 2px 6px; }
.wpc-loot .ig-who { margin: 2px 0 0; }
.wpc-cel-foot { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 8px; }
.wpc-cel-foot .ui-btn { min-height: 56px; }

/* ---------- 狭い画面 (360px 前後) ---------- */
@media (max-width: 374px) {
  .wpc-bulk .ui-btn { font-size: 13px; padding: 6px 4px; letter-spacing: 0.02em; }
  .wpc-srow-info { gap: 8px; padding-left: 8px; }
  .wpc-srow-ic { width: 42px; height: 42px; }
  .wpc-is-top { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .wpc-is-art { width: 84px; height: 84px; }
  .wpc-is-art canvas { width: 72px; height: 72px; }
  .wpc-act-sec .ui-btn { font-size: 12.5px; padding: 6px 4px; }
}

/* ---------- 背の低い画面: 番人のひとことは1行に ---------- */
@media (max-height: 700px) {
  .wpc-shop > .ui-whisper .ui-whisper-line { -webkit-line-clamp: 1; }
  .wpc-shop { gap: 6px; }
}

/* ---------- 視差を減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-sheet.k-celebrate.wpc-loot.rar-sr, .ui-sheet.k-celebrate.wpc-loot.rar-lr,
  .wpc-is-top.wpc-revealed .wpc-is-art, .wpc-is-top.wpc-revealed .wpc-is-name { animation: none !important; }
  .wpc-cell, .wpc-buy-main { transition-duration: 0.12s; }
}

/* ===== 鑑定を試みる (src/ui/appraise.js) — 1点ずつの判定の舞台 ===== */
.ap { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ap-prog { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-dim); }
.ap-prog-n { flex: 0 0 auto; font-weight: 700; letter-spacing: 0.08em; }
.ap-prog-bar { flex: 1 1 auto; height: 4px; background: #241d1e; border-radius: 2px; overflow: hidden; }
.ap-prog-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4a7fa8, #7fd0ff); transition: width 0.4s ease; }
.ap-stage {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 2px;
  align-items: start; min-height: 150px; padding: 10px 12px; text-align: left; color: inherit; font: inherit; cursor: default;
  background: var(--grain), var(--plate); border: 1px solid #33292a; border-radius: 3px; box-shadow: var(--plate-edge);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ap-stage.busy { border-color: #36506a; }
.ap-stage.ok { border-color: var(--accent); box-shadow: var(--plate-edge), 0 0 18px rgba(243,213,139,0.25); }
.ap-stage.ng { border-color: #5a2a26; }
.ap-art {
  grid-row: 1 / span 4; position: relative; display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border: 1px solid var(--edge, #4a3d33); border-radius: 3px; background: radial-gradient(circle at 50% 45%, #2a2224, #120e10);
}
.ap-art canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.ap-seal { position: absolute; right: 6px; bottom: 2px; font-size: 22px; font-weight: 800; color: #ffe0a8; text-shadow: 0 0 10px rgba(127,208,255,0.9), 0 1px 0 #000; }
.ap-art.busy { animation: ap-pulse 1.1s ease-in-out infinite; }
.ap-art.busy::after { content: ""; position: absolute; inset: -4px; border-radius: 4px; border: 1px solid rgba(127,208,255,0.5); animation: ap-ring 1.1s ease-out infinite; }
.ap-art.ok { animation: ap-burst 0.8s ease-out both; }
.ap-art.ng canvas { filter: grayscale(0.85) brightness(0.6); }
.ap-art.ng { animation: ap-shake 0.4s ease both; }
@keyframes ap-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(127,208,255,0); } 50% { box-shadow: 0 0 16px rgba(127,208,255,0.45); } }
@keyframes ap-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
@keyframes ap-burst { 0% { transform: scale(0.86); box-shadow: 0 0 0 var(--edge, #f3d58b); filter: brightness(2.2); } 55% { transform: scale(1.06); } 100% { transform: scale(1); box-shadow: 0 0 22px color-mix(in srgb, var(--edge, #f3d58b) 55%, transparent); filter: none; } }
@keyframes ap-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.ap-name { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.35; overflow-wrap: anywhere; }
.ap-stage.ok .ap-name { animation: wpc-name-in 0.6s ease 0.15s both; }
.ap-who { font-size: 11.5px; color: var(--ink-dim); }
.ap-msg { margin-top: 4px; font-size: 15px; font-weight: 700; color: #b4e6ff; letter-spacing: 0.06em; min-height: 1.5em; }
.ap-msg.ok { font-size: 20px; color: var(--accent-hi); text-shadow: 0 0 12px rgba(243,213,139,0.6); animation: ap-pop 0.45s ease-out both; }
.ap-msg.ng { font-size: 18px; color: #ff8f86; animation: ap-pop 0.35s ease-out both; }
@keyframes ap-pop { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: none; } }
.ap-detail { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.ap-grade { color: var(--ink-dim); }
.ap-stat { font-weight: 700; color: #9fc4ee; line-height: 1.45; }
.ap-fail { color: #c9a6a0; line-height: 1.5; }
.ap-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 13px; }
.ap-pip { min-width: 16px; text-align: center; color: #5a5048; }
.ap-pip.now { color: #7fd0ff; animation: ap-pulse-t 1s ease-in-out infinite; }
.ap-pip.ok { color: var(--accent-hi); font-weight: 800; }
.ap-pip.ng { color: #c4544a; }
@keyframes ap-pulse-t { 50% { opacity: 0.35; } }
.ap-sum > .wpc-prow { min-width: 0; }
.ap-sum-name { display: flex; align-items: center; min-width: 0; }
.ap-sum-name .wpc-prow-title { min-width: 0; }
.ap-msg .ap-first { font-size: 12px; letter-spacing: 0.08em; }
.ap-sum-worn { padding: 2px 4px; font-size: 12px; color: var(--ink-dim); text-align: center; }
.ap-sum-fail { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 12.5px; border: 1px dashed #4a3433; border-radius: 3px; }
.ap-sum-fail-l { font-weight: 700; color: #c9a6a0; letter-spacing: 0.1em; }
.ap-sum-fail-n { color: var(--ink-dim); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .ap-art.busy, .ap-art.busy::after, .ap-art.ok, .ap-art.ng, .ap-msg.ok, .ap-msg.ng, .ap-pip.now, .ap-stage.ok .ap-name { animation: none !important; }
}

/* ===== 品質と鍛え直し (src/ui/reforge.js) ===== */
.rf-q { display: inline-block; padding: 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; border: 1px solid currentColor; border-radius: 2px; background: rgba(0,0,0,0.35); white-space: nowrap; }
.rf-q.q-top { color: #ffd76a; box-shadow: 0 0 6px rgba(255,200,80,0.45); }
.rf-q.q-hi { color: #9fe08a; }
.rf-q.q-mid { color: #c9c2b0; }
.rf-q.q-lo { color: #d99a8f; }
.rf-q.none { color: var(--ink-dim); border-style: dashed; }
.rf-q.big { font-size: 15px; padding: 2px 10px; }
.pl-detail-q { margin-top: 4px; font-size: 12px; color: var(--ink-dim); }
.rf-sheet .rf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin: 2px 0 8px; }
.rf-name { font-size: 15px; font-weight: 800; }
.rf-where { font-size: 11.5px; color: var(--ink-dim); }
.rf-now, .rf-cmp { padding: 10px 12px; border: 1px solid rgba(201,162,92,0.35); border-radius: 4px; background: rgba(0,0,0,0.3); }
.rf-k { font-size: 11px; letter-spacing: 0.2em; color: var(--ink-dim); margin-bottom: 4px; }
.rf-meter { display: flex; align-items: center; gap: 10px; }
.rf-meter-bar { position: relative; flex: 1; height: 10px; border: 1px solid rgba(201,162,92,0.5); border-radius: 2px; background: rgba(0,0,0,0.5); overflow: hidden; }
.rf-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: 0.85; }
.rf-meter-mid { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: rgba(255,255,255,0.45); }
.rf-meter-n { min-width: 2.4em; text-align: right; font-size: 18px; font-weight: 800; }
.rf-meter.q-top { color: #ffd76a; } .rf-meter.q-hi { color: #9fe08a; } .rf-meter.q-mid { color: #c9c2b0; } .rf-meter.q-lo { color: #d99a8f; }
.rf-stat { margin-top: 6px; font-size: 12px; color: var(--ink, #e8dcc0); }
.rf-note { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--ink-dim); }
.rf-block { margin-top: 8px; font-size: 12px; color: #e8a090; }
.rf-last { margin-top: 8px; padding: 6px 10px; font-size: 12.5px; border-left: 3px solid; background: rgba(0,0,0,0.25); }
.rf-last.took { color: #bfe9b0; border-color: #4f8a3c; }
.rf-last.kept { color: #c9c2b0; border-color: #6b6250; }
.rf-last.took.dn { color: #e8b0a4; border-color: #8a4a3c; }
/* 鍛え直し中… (鎚を打つたびに揺れて火花が光る。押すと結果へ) */
.rf-forge { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 22px 12px 14px; border: 1px solid rgba(201,162,92,0.35); border-radius: 4px; background: radial-gradient(ellipse at 50% 40%, rgba(255,140,40,0.12), rgba(0,0,0,0.35) 70%); color: inherit; font: inherit; cursor: pointer; }
.rf-forge-art { position: relative; display: block; line-height: 0; }
.rf-forge-art::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,120,0.75), rgba(255,140,40,0) 65%); opacity: 0; pointer-events: none; }
.rf-forge-msg { font-size: 17px; font-weight: 800; letter-spacing: 0.18em; color: #f2c879; min-width: 9em; text-align: left; }
.rf-forge-skip { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.1em; }
.rf-forge.hit .rf-forge-art { animation: rf-strike 0.32s ease-out; }
.rf-forge.hit .rf-forge-art::after { animation: rf-spark 0.4s ease-out; }
@keyframes rf-strike { 0% { transform: translateY(3px) scale(0.97); } 35% { transform: translateY(-2px) scale(1.02); } 100% { transform: none; } }
@keyframes rf-spark { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .rf-forge.hit .rf-forge-art, .rf-forge.hit .rf-forge-art::after { animation: none; } }
.rf-big { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rf-big-arrow { font-size: 18px; color: var(--ink-dim); }
.rf-verdict { margin: 6px 0 8px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; }
.rf-verdict.up { color: #9fe08a; } .rf-verdict.dn { color: #e8a090; } .rf-verdict.eq { color: var(--ink-dim); }
.rf-diff { display: grid; gap: 2px; }
.rf-diff-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 2px 0; border-bottom: 1px dotted rgba(201,162,92,0.18); }
.rf-diff-l { color: var(--ink-dim); }
.rf-diff-a { text-align: right; }
.rf-diff-arrow { color: var(--ink-dim); }
.rf-diff-b { text-align: right; font-weight: 800; }
.rf-diff-b.up { color: #9fe08a; } .rf-diff-b.dn { color: #e8a090; }
.rf-diff-eq { font-size: 12px; color: var(--ink-dim); }
.rf-doll { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.rf-doll-n { color: var(--ink-dim); }
.rf-intro { padding: 8px 10px; margin-bottom: 6px; border: 1px solid rgba(201,162,92,0.3); border-radius: 4px; background: rgba(0,0,0,0.25); }
.rf-intro-t { font-size: 12.5px; }
.rf-intro-s { margin-top: 3px; font-size: 11.5px; color: var(--ink-dim); }
.rf-grp { margin-bottom: 8px; }
.rf-grp .wpc-drow-h { margin-bottom: 4px; }
.rf-row .wpc-srow-l3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 付呪 (src/ui/enchant.js) — 術の格で札の色を分ける: 常 = 薄い金 / ◇稀 = 青 / ◆秘 = 紫 / ★極 = 金 */
.ec-tag { display: inline-block; padding: 1px 7px; border: 1px solid rgba(201,162,92,0.45); border-radius: 3px; font-size: 12px; font-weight: 700; color: #e8dcc0; background: rgba(0,0,0,0.3); white-space: nowrap; }
.ec-tag.t-u { color: #8fc4ff; border-color: rgba(120,170,255,0.55); }
.ec-tag.t-r { color: #d6a8ff; border-color: rgba(190,130,255,0.55); }
.ec-tag.t-x { color: #ffd76a; border-color: rgba(255,210,100,0.7); background: rgba(80,60,10,0.35); }
.ec-tag.big { font-size: 15px; padding: 2px 10px; }
.ec-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ec-h { font-weight: 800; color: #f2c879; }
.ec-row .wpc-srow-l3, .ec-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ec-row.off { opacity: 0.55; }
.ec-room { font-size: 11.5px; color: #c9b88a; }
.ec-val { font-size: 12px; color: #bfe9b0; }
.ec-why { font-size: 11.5px; color: #e8a090; }
.ec-holder { margin-left: 6px; vertical-align: middle; }
.ec-afx { display: grid; gap: 8px; margin-top: 8px; }
.ec-afx-row { padding: 8px 10px; border: 1px solid rgba(201,162,92,0.25); border-radius: 4px; background: rgba(0,0,0,0.22); }
.ec-afx-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ec-afx-t { font-size: 12.5px; }
.ec-afx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ec-page-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
/* 入手のカードの装備できるLv */
.ig-eqlv { font-size: 12px; color: #c9b88a; margin-top: 4px; text-align: center; }
.ig-eqlv.ng { color: #e0705a; }

/* 比較する人業は館と同じ肖像。控えが増えても横に流して選べる。 */
.wpc-characters { flex: 0 0 auto; min-width: 0; }
.wpc-character-strip { display: flex; gap: 5px; overflow-x: auto; padding: 3px; scrollbar-width: thin; touch-action: pan-x; }
.wpc-character { flex: 0 0 55px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 66px; padding: 3px; border: 1px solid #594a38; border-radius: 3px; background: var(--plate); color: var(--ink-dim); font: inherit; cursor: pointer; }
.wpc-character > :is(canvas,img) { width: 44px; height: 44px; image-rendering: pixelated; }
.wpc-character > span { max-width: 55px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
.wpc-character.selected { border-color: var(--accent-hi); color: var(--accent-hi); background: #362a19; box-shadow: inset 0 0 0 1px var(--accent-hi); }
.wpc-character:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 1px; }
.wpc-comparison-label { padding: 3px 5px; color: var(--accent-hi); font-size: 11px; }
.wpc-comparison { display: flex; flex: 1 1 100%; flex-direction: column; gap: 3px; min-width: 0; }
.wpc-current { color: var(--ink-dim); }
.wpc-effect.lost { color: #f4a49b; }
.wpc-effect.got { color: #a4d9b0; }
@media (max-height: 600px) {
  .wpc-character { min-height: 48px; flex-basis: 48px; }
  .wpc-character > :is(canvas,img) { width: 30px; height: 30px; }
}
/* 横向きなど背の低い画面では商会の箱を流し、棚の高さを潰さない。 */
@media (max-height: 500px) {
  .wpc-shop { overflow-y: auto; overscroll-behavior: contain; }
  .wpc-shop > .wpc-list { flex: 0 0 auto !important; min-height: 140px; overflow-y: visible; }
}
/* 武器種別と特殊効果の絞り込みを組み合わせる。 */
.wpc-shop .wpc-lhead { flex-wrap: wrap; }
.wpc-shop .wpc-lhead .gf-open { margin-left: auto; }
.wpc-shop > .gf-summary { max-height: 100px; overflow-y: auto; }

/* スマホの購入画面は棚を広く使う。比較相手は横一列の小さな顔と名前で選ぶ。 */
@media (max-width: 600px), (max-height: 500px) {
  .wpc-shop.seg-buy { gap: 4px; }
  .wpc-shop.seg-buy > .ui-whisper { display: none; }
  .seg-buy .wpc-character-strip { padding-block: 2px; }
  .seg-buy .wpc-character {
    flex: 0 0 auto; flex-direction: row; min-height: 44px; gap: 4px; padding: 3px 6px;
  }
  .seg-buy .wpc-character > :is(canvas,img) { width: 28px; height: 28px; }
  .seg-buy .wpc-comparison-label { display: none; }
  .seg-buy .wpc-bar { gap: 4px; }
  .wpc-shop.seg-buy > .gf-summary { max-height: 52px; }
}

/* 特性名と実際の効果を一組ずつ折り返し、狭い一覧でも全文を読める。 */
.ec-filter { margin-left: auto; }
.ec-filter-summary { flex: 0 0 auto; min-width: 0; max-height: 100px; overflow-y: auto; }
.ec-effect { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; min-width: 0; max-width: 100%; }
.ec-effect .ec-tag { white-space: normal; }
.ec-effect .ec-val, .ec-prow .ec-val { white-space: normal; overflow-wrap: anywhere; }
.ec-row .ec-tags { align-items: flex-start; flex-direction: column; }
.ec-row .wpc-srow-t, .ec-prow .wpc-srow-t { min-width: 0; }
@media (max-width: 600px) {
  .ec-filter-summary { max-height: 64px; }
}

.ec-guide { flex: 0 0 auto; }
.ec-guide > summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; font-size: 12.5px; color: var(--accent-hi); }
.ec-guide:not([open]) { padding-block: 0; margin-bottom: 0; }
@media (max-width: 600px), (max-height: 500px) {
  .wpc-shop.seg-enchant { gap: 4px; }
  .wpc-shop.seg-enchant > .ui-whisper { display: none; }
  .ec-guide[open] { max-height: 26dvh; overflow-y: auto; }
}

/* 鑑定結果: 広い画面は横並び、狭い画面は品の説明と操作を二段に分ける。 */
.wpc-reveal-actions { display: flex; align-items: stretch; gap: 6px; flex: 0 0 auto; padding: 6px 8px 6px 0; }
.wpc-reveal-actions .wpc-prow-act.ui-btn { margin: 0; min-height: 44px; }
.wpc-reveal-actions [data-act="extract"] { white-space: nowrap; }
.ap-sum .wpc-prow-title, .wpc-reveal .wpc-prow-title { white-space: normal; overflow-wrap: anywhere; }
.ap-sum-name { flex-wrap: wrap; gap: 3px 6px; }
@media (min-width: 768px) {
  .ui-sheet.wpc-revealsheet, .ui-sheet.ap-sheet { max-width: min(860px, calc(100vw - 48px)); }
}
@media (max-width: 767px) {
  .ap-sum > .wpc-prow, .wpc-reveal > .wpc-prow { flex-direction: column; align-items: stretch; gap: 0; }
  .wpc-reveal-actions { padding: 0 8px 8px; }
  .wpc-reveal-actions .wpc-prow-act.ui-btn { flex: 1 1 0; min-width: 0; width: 0; padding-left: 6px; padding-right: 6px; }
}

/* 鍛え直し: 探す操作を固定し、装備中と共有の袋を分ける。 */
.rf-guide > summary { min-height: 44px; align-content: center; cursor: pointer; color: var(--accent-hi); font-size: 12.5px; }
.rf-guide:not([open]) { padding-block: 0; margin-bottom: 0; }
.rf-guide[open] { max-height: 150px; overflow-y: auto; }
.rf-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rf-field { display: grid; gap: 3px; min-width: 0; color: var(--ink-dim); font-size: 11px; }
.rf-select { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #5a4a36; border-radius: 3px; background: #181319; color: var(--ink); font: inherit; font-size: 12px; }
.rf-select:focus-visible, .rf-guide > summary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.rf-grp { min-width: 0; padding: 8px; border: 1px solid #3c3030; border-radius: 4px; background: rgba(0,0,0,.18); }
.rf-grp.reserve { border-style: dashed; }
.rf-grp .rf-row + .rf-row { margin-top: 6px; }
.rf-row .wpc-srow-info { min-width: 0; }
.rf-row .wpc-srow-l1, .rf-row .wpc-srow-nm { white-space: normal; overflow: visible; }
.rf-row .wpc-buy { flex: 0 0 auto; max-width: 45%; }
.rf-row .wpc-buy-main { min-height: 52px; min-width: 72px; max-width: 100%; padding-inline: 6px; }
.rf-row .wpc-buy-p { font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.rf-row-block { display: block; margin-top: 3px; font-size: 11px; color: #e8a090; }
.rf-sheet .rf-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); justify-content: start; gap: 2px 10px; text-align: left; }
.rf-item-art { grid-row: span 2; line-height: 0; }
.rf-item-art canvas { width: 48px; height: 48px; }
.rf-sheet .rf-where { grid-column: 2; }
.rf-funds { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0 10px; font-size: 12px; color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.rf-quality { display: grid; gap: 4px; text-align: center; }
.rf-quality .rf-k { margin: 0; letter-spacing: .08em; }
.rf-diff-head { color: var(--ink-dim); font-size: 10px; }
.rf-diff-row { grid-template-columns: minmax(0, 1fr) minmax(3em, auto) 12px minmax(3em, auto); }
.rf-diff-head > :not(:first-child) { text-align: right; }
.rf-sheet.ui-sheet .ui-sheet-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rf-sheet .ui-sheet-foot > :nth-child(3), .rf-sheet .ui-sheet-foot > :only-child { grid-column: 1 / -1; }
.rf-sheet .ui-sheet-foot .ui-btn { min-width: 0; padding: 8px; font-size: 13px; letter-spacing: .04em; }
.rf-sheet .ui-sheet-foot .ui-btn-s { white-space: normal; font-size: 11px; }
@media (max-width: 600px), (max-height: 500px) {
  .wpc-shop.seg-forge { gap: 4px; }
  .wpc-shop.seg-forge > .ui-whisper { display: none; }
  .rf-grp { padding: 6px; }
}
.rf-diff-l, .rf-diff-head > :first-child { text-align: left; }
html.pc-input .ui-sheet.rf-sheet { max-width: 720px; }
.rf-sheet .ui-sheet-foot .ui-btn { flex-wrap: wrap; }
.rf-sheet .ui-cost { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* 付呪: 巻物と品の用途・場所を選び、書き込み先だけをスクロールする。 */
.ec-controls .rf-select:disabled { opacity: .55; }
.ec-list > .rf-grp { min-width: 0; }
.ec-list .wpc-srow + .wpc-srow { margin-top: 6px; }
.ec-h { height: auto; min-height: 28px; line-height: 1.5; }
.ec-row .wpc-srow-l1, .ec-row .wpc-srow-nm { white-space: normal; overflow: visible; }
.ec-row .wpc-buy, .ec-prow .wpc-buy { flex: 0 0 auto; max-width: 42%; }
.ec-row .wpc-buy-main, .ec-prow .wpc-buy-main { min-height: 48px; min-width: 72px; max-width: 100%; padding-inline: 6px; }
.ec-row .wpc-buy-p { white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ec-item-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 2px 10px; text-align: left; margin-bottom: 10px; }
.ec-item-art { grid-row: span 2; line-height: 0; }
.ec-item-art canvas { width: 48px; height: 48px; }
.ec-item-head .rf-where { grid-column: 2; }
.ec-warning { padding: 8px 10px; border: 1px solid #83533d; border-left: 3px solid #bd7956; border-radius: 3px; background: rgba(110,40,20,.14); color: #edb39e; font-size: 12px; line-height: 1.7; text-align: left; }
.ec-source-block { margin-top: 8px; text-align: left; }
.ec-sheet .ec-afx-t { text-align: left; line-height: 1.6; }
.ec-afx-top { align-items: baseline; }
.ec-sheet .ec-afx-acts > .ui-btn { flex: 1 1 0; min-width: 0; }
.ec-write-sheet.ui-sheet { height: 84dvh; }
.ec-write-sheet .ui-sheet-body { display: flex; flex-direction: column; gap: 6px; overflow: hidden; text-align: left; }
.ec-write-sheet .ui-sheet-body > :not(.ec-target-list) { flex: 0 0 auto; }
.ec-write-sheet .ec-page-head { margin: 0; }
.ec-write-note { color: var(--ink-dim); font-size: 11.5px; line-height: 1.6; }
.ec-target-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px; }
.ec-ready { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12px; color: var(--ink); cursor: pointer; }
.ec-ready input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #c9a25c; }
.ec-target-count { min-height: 30px; font-size: 12px; color: var(--accent-hi); }
.ec-target-list { flex: 1 1 0 !important; min-height: 0; overflow-y: auto; }
.ec-sub { align-items: flex-start; flex-direction: column; }
.ec-before { color: var(--ink-dim); font-size: 12px; }
.ec-lower { color: #edb39e; }
.ec-sheet .ui-sheet-foot { grid-template-columns: 1fr; }
html.pc-input .ui-sheet.ec-source-sheet { max-width: 720px; }
@media (max-height: 500px) {
  .ec-write-sheet.ui-sheet { height: calc(100dvh - 44px); max-height: calc(100dvh - 44px); }
  .ec-write-sheet .ui-grab { display: none; }
  .ec-write-sheet .ui-sheet-body { padding-block: 4px; gap: 4px; }
  .ec-write-sheet .ui-sheet-foot { padding-block: 6px; }
}
.ec-row .ec-sub { align-items: flex-start; }
@media (max-height: 500px) {
  .ec-target-controls .rf-field { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; }
}

/* 武魂の操作欄を残し、在庫だけを縦にスクロールする。 */
.bk-panel { display:flex; flex-direction:column; flex:1 1 0; min-height:0; gap:6px; min-width:0; }
.bk-panel .ec-afx-row { overflow-wrap:anywhere; padding:10px; border:1px solid var(--line); flex-shrink:0; }
.bk-panel .ec-afx-acts { display:flex; gap:6px; flex-wrap:wrap; }
.bk-panel .ec-afx-acts > * { flex:1; }
.bk-panel .ec-list { overflow-y:auto !important; min-height:80px; }
.bk-panel .rf-select, .ec-sheet .rf-select { width:100%; max-width:100%; min-height:44px; }
.bk-panel details { flex:0 0 auto; max-height:30vh; overflow:auto; }

/* 武魂：操作欄を残し、候補だけを画面内でスクロールする。 */
.bk-panel > * { flex-shrink: 0; }
.bk-panel .ec-list { flex: 1 1 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); align-content: start; gap: 8px; min-height: 80px; }
.bk-panel .ec-afx-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; background: linear-gradient(135deg,rgba(201,162,92,.08),rgba(0,0,0,.24)); }
.bk-panel .ec-afx-row > .ui-btn { width: 100%; min-height: 44px; }
.bk-panel .ec-afx-row > .ui-btn:last-child { margin-top: auto; }
.bk-meta { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted,#b2a699); overflow-wrap: anywhere; }
.bk-title { font-weight: bold; color: var(--gold,#c9a25c); }
.bk-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.bk-panel .rf-select, .bk-sheet .rf-select { min-width: 0; box-sizing: border-box; }
.bk-sheet .ec-afx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bk-sheet .ec-afx-row > span { min-width: 0; flex: 1; }
.bk-sheet .ui-sheet-body > .ui-btn { width: 100%; min-height: 44px; margin: 8px 0; }
.bk-sheet .ui-sheet-body { overflow-x: hidden; }
.bk-sheet p { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .bk-panel .ec-afx-acts > .ui-btn { font-size: 12px; min-height: 44px; padding-inline: 6px; }
  .bk-panel .ec-list { grid-template-columns: minmax(0,1fr); }
  .bk-sheet .ec-afx-row { flex-wrap: wrap; }
  .bk-sheet .ec-afx-row > .ui-btn { min-height: 44px; }
}

.rf-note, .bk-sheet p { font-family: var(--font); word-break: keep-all; overflow-wrap: break-word; line-break: strict; text-wrap: pretty; }

/* 保管中の武魂は一つにつき一行。詳しい数値は詳細で読む。 */
.bk-panel .ec-list.bk-stock-list { grid-template-columns: minmax(0,1fr); }
.bk-stock-row { display:flex; align-items:center; gap:6px; min-width:0; border-bottom:1px solid var(--line); }
.bk-stock-row > .ui-btn { width:auto; flex:none; min-height:44px; padding-inline:8px; }
.bk-stock-row > .bk-stock-main { flex:1; min-width:0; text-align:left; justify-content:flex-start; }
/* 色を受け継ぐ丸い宝石。白い光と暗い縁で立体感を付ける。 */
.bk-gem { display:inline-block; flex:none; width:14px; height:14px; margin-right:7px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff 0%,transparent 40%),radial-gradient(circle at 40% 35%,transparent 30%,#0009 100%),currentColor; box-shadow:inset 0 0 0 1px #ffffff55,0 0 5px currentColor; }
.bk-stock-main .ui-btn-t { min-width:0; overflow:hidden; }
.bk-stock-main .ui-btn-l { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.bk-equipment { overflow-y:auto; min-height:0; align-content:start; padding:2px; }
.bk-slot-icon { display:flex; flex-direction:column; align-items:center; gap:5px; flex:none; }
.bk-sockets { display:flex; gap:3px; justify-content:center; }
.bk-socket { display:block; width:10px; height:10px; border-radius:50%; }
.bk-socket:not(.bk-gem) { background:#08070a; box-shadow:inset 0 1px 3px #000,0 0 0 1px #786850; }
.bk-socket.bk-gem { margin:0; }
.bk-sheet .bk-stock-row { margin-bottom:6px; }
@media(max-width:400px){ .bk-sheet .bk-stock-row>.ui-btn { padding-inline:5px; font-size:12px; } }
.bk-panel .wpc-lhead > .ui-btn { margin-left:auto; }

/* 長い名前でも、末尾の加算値・割合は残す。 */
.bk-stock-main .ui-btn-t { flex:1; align-items:stretch; }
.bk-stock-main .ui-btn-l { display:flex; }
.bk-name-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.bk-name-value { flex:none; white-space:pre; }

.bk-filter-field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; color:var(--ink); }
.bk-filter-sheet .rf-select { width:100%; min-height:44px; min-width:0; }
.bk-practice .tut-step-note { margin-block:12px; padding:12px; border:1px solid var(--accent); }
.bk-practice .pt-slots { margin-block:10px; }
.bk-sheet .wpc-lhead { justify-content:space-between; flex-wrap:wrap; }

.wpc-is-bukon { margin-top:12px; padding:10px; border:1px solid var(--line); text-align:left; }
.bk-detail-slots { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:8px; }
.bk-detail-slots .bk-detail-slot { width:100%; display:flex; align-items:center; justify-content:flex-start; text-align:left; gap:8px; min-height:44px; min-width:44px; max-width:100%; padding:6px 10px; box-sizing:border-box; }
.bk-detail-slot .bk-socket { flex:none; width:14px; height:14px; }
.bk-detail-slot .ui-btn-t { min-width:0; }
.bk-detail-slot .ui-btn-l { overflow-wrap:anywhere; }
.bk-detail-empty { color:var(--ink-dim); border:1px dashed var(--line); }

.bk-copy-more { min-height:32px; padding:8px; text-align:center; color:var(--ink-dim); }

.bk-panel .wpc-lhead-t { max-width:100%; min-width:0; overflow-wrap:anywhere; white-space:normal; }

/* 武魂と操作を一行に保ち、持ち主は名前の枠の右端に置く。 */
.bk-stock-row { flex-wrap:nowrap; gap:4px; }
.bk-stock-row > .ui-btn { font-size:11px; padding-inline:5px; }
.bk-stock-main { gap:4px; }
.bk-stock-main .bk-gem { width:10px; height:10px; margin-right:0; }
.bk-installed-note { flex:0 1 auto; min-width:0; max-width:35%; margin-left:auto; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font-size:11px; }
.bk-other-owner { background:rgba(80,150,200,.16); box-shadow:inset 3px 0 #79b9df; }
.bk-stock-row > .bk-lock { width:48px; padding-inline:3px; }
.bk-lock[aria-pressed="true"] { color:#ffe0a0; background:#654819; border-color:#d4ac63; }

/* 一覧の武魂は宝石と効果量付きの名前を一組にする。 */
.bk-name-line { flex-wrap:nowrap; gap:6px; }
.bk-name-line > .bk-gem { margin:0; }
.bk-name-line > span { min-width:0; overflow-wrap:anywhere; }

/* 小画面の既存指定より優先して一覧の文字を一回り小さくする。 */
.bk-sheet .bk-stock-row > .ui-btn { font-size:11px; }

/* 武魂一覧は名前の右に三つの操作を固定し、本文だけ縦にスクロールする。 */
.bk-list-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.bk-list-sheet .bk-stock-row > .ui-btn:not(.bk-stock-main) { width:48px; min-width:44px; padding-inline:3px; white-space:nowrap; }
.bk-panel > .ui-btn { flex:none; min-height:44px; margin-bottom:8px; }
.bk-equip-sheet .bk-equipment { overflow-y:visible; }

/* 宿せない装備は操作も見た目も無効にする。 */
.bk-equip-sheet .pt-slot:disabled { filter:grayscale(1) brightness(.4); opacity:.55; cursor:default; }
.bk-equip-sheet .wpc-character > img { display:block; flex-shrink:0; object-fit:contain; }

/* 鍛え直しは装備と共通袋を同じ内側の箱で流す。 */
.seg-forge .bk-panel { overflow-y: auto; display: block; }
.rf-bag-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 6px; padding-bottom: 8px; }
.rf-bag-list > .ui-btn { min-width: 0; min-height: 54px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; white-space: normal; }
.shop-sort { flex-wrap: wrap; flex-shrink: 0; }
.shop-sort select { flex: 1; min-width: 0; max-width: 100%; }

.wpc-is-equip-lv { margin-top:6px; color:var(--text, #e6ddca); font-size:13px; }
.wpc-gen-compare { min-height:32px; white-space:normal; font-size:11px; }
.wpc-gen-comparison { min-width:0; }
.wpc-gen-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; }
.wpc-gen-table th, .wpc-gen-table td { padding:8px 4px; text-align:left; vertical-align:top; overflow-wrap:anywhere; border-bottom:1px solid #514635; }
.wpc-gen-table th:nth-child(1) { width:23%; }
.wpc-gen-table th:nth-child(2) { width:29%; }
.wpc-gen-table tr.on { background:#d5b55e18; }
.wpc-gen-stat .up { color:#9cce89; }
.wpc-gen-stat .dn { color:#ee9c91; }

/* 一括合成は完成品を先に見せ、素材の内訳は必要な時だけ開く。 */
.ui-sheet.bk-batch-confirm { max-width:600px; }
.bk-batch-confirm .ui-sheet-body { text-align:left; }
.bk-batch-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding:12px; border:1px solid var(--line); background:#c9a24a10; font-size:16px; }
.bk-batch-summary strong { color:var(--accent); overflow-wrap:anywhere; min-width:0; }
.bk-batch-balance { margin:6px 0 16px; text-align:right; color:var(--ink-dim); font-size:12px; }
.bk-batch-results { display:grid; gap:10px; }
.bk-batch-result { min-width:0; padding:12px; border:1px solid var(--line); background:#0003; border-radius:4px; }
.bk-batch-name { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; }
.bk-batch-name > .bk-gem { margin:0; }
.bk-batch-name > strong, .bk-batch-name > span:not(.bk-batch-count) { min-width:0; overflow-wrap:anywhere; }
.bk-batch-count { flex:none; margin-left:auto; font-size:12px; color:var(--ink); }
.bk-batch-change { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin-top:10px; text-align:center; font-size:18px; }
.bk-batch-change strong { display:block; overflow-wrap:anywhere; }
.bk-batch-label { display:block; margin-bottom:2px; color:var(--ink-dim); font-size:11px; font-weight:400; }
.bk-batch-after { color:var(--accent); }
.bk-batch-arrow { color:var(--ink-dim); font-size:16px; }
.bk-batch-location { margin:8px 0 0; color:var(--ink-dim); font-size:12px; overflow-wrap:anywhere; }
.bk-batch-warning { margin:12px 0; padding:10px; border-left:3px solid #d6a067; background:#d6a06712; color:#efc697; font-size:13px; }
.bk-batch-materials { margin-top:14px; border-block:1px solid var(--line); }
.bk-batch-materials summary { padding:12px 4px; min-height:44px; box-sizing:border-box; cursor:pointer; font-size:13px; }
.bk-batch-material { padding:10px 4px; border-top:1px solid var(--line); }
.bk-batch-note { margin:12px 0 0; color:var(--ink-dim); font-size:12px; line-height:1.7; }
.bk-batch-confirm .ui-sheet-foot { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.bk-batch-confirm .ui-sheet-foot .ui-btn { min-height:48px; min-width:0; padding:8px 4px; font-size:14px; letter-spacing:0; }
@media(max-width:360px), (max-height:600px) {
  .bk-batch-result, .bk-batch-summary { padding:9px; }
  .bk-batch-balance { margin-bottom:10px; }
}

/* 回収人も商会と同じ枠の中で一覧だけを流す。 */
.ui-sheet.inf-trader { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
.inf-trader .ui-sheet-body { display: flex; overflow: hidden; text-align: left; }
.inf-trader .ui-sheet-body > .wpc-shop { flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden; }
.inf-trader .bk-panel { flex: 1 1 0; min-height: 0; }
.inf-trader .wpc-srow-ic canvas { max-width: 100%; }
.inf-trade-guide { padding: 6px 0; font-size: 12px; color: var(--ink-dim); }
.inf-trade-guide summary { min-height: 32px; cursor: pointer; }
@media (max-height: 580px) {
  .inf-trader .ui-sheet-body > .wpc-shop { overflow-y: auto; }
  .inf-trader .wpc-list { flex: 0 0 auto !important; min-height: 140px; overflow: visible; }
}

.inf-trader .wpc-shop.seg-buy > .wpc-list { min-height: 100px; }
@media (max-height: 760px) {
  .inf-trader .wpc-shop.seg-buy { overflow-y: auto; }
  .inf-trader .wpc-shop.seg-buy > .wpc-list { flex: 0 0 auto !important; overflow: visible; }
}