/* =========================================================
   Age of Doubloons - sys-trade.css
   貿易（市場・貿易タブ）と港の施設（教会・銀行・占い・商館・道具屋・酒場の追加欄）の見た目。
   共通部品（.sys-card .sys-row .sys-btn など）は css/sys.css。ここは足りない物だけ。
   ========================================================= */

/* ---------------- 貿易（tr-） ---------------- */
.tr-root,.px-root{font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.tr-list{display:flex;flex-direction:column}
.tr-row{gap:9px;flex-wrap:wrap}
/* 品名の列は最低 150px を目安にし、入りきらない時はボタンを次の行の右へ回す（2026-09-13 スマホで品名が 41px に潰れ、
   「オリ／ーブ／油」「名／産」と 1〜2 文字ずつ折り返していた。grow が flex:1（基準 0）だと、いくら狭くても折り返しが起きなかった） */
.tr-row .grow{flex:1 1 150px;min-width:0;overflow-wrap:anywhere}
.tr-row .tr-pr{flex:0 0 auto}
.tr-row .tr-btns{margin-left:auto;justify-content:flex-end}
.tr-row.tr-out{opacity:.55}
.tr-ic{flex:0 0 30px;display:flex;align-items:center;justify-content:center}
.tr-nm{color:#f1e4c0}
.tr-sub{color:#c4b795;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));line-height:1.6}
.tr-good{color:#7fe3a0}
.tr-bad{color:#e59a8a}
.tr-pr{display:flex;flex-direction:column;align-items:flex-end;min-width:74px;line-height:1.25}
.tr-pr small{font-size:max(var(--fs-min),calc(9.5px*var(--fs)));color:#b7a987}
.tr-btns{display:flex;gap:4px;flex-wrap:wrap}
.tr-btns .sys-btn{padding:4px 9px;min-width:34px}
.sys-btn.tr-main{background:linear-gradient(180deg,#b88a2c,#6a4a12);color:#fff6d8}
.tr-actions{display:flex;justify-content:flex-end;margin:8px 0 2px}
.tr-kv{margin-bottom:6px}
.tr-kv .v .sys-bar{margin-top:3px}
.tr-hold.over i{background:linear-gradient(90deg,#8a2416,#e5654a)}
.sys-tag.tr-crash{color:#ff9d8a;border-color:rgba(255,120,100,.45);background:rgba(255,90,70,.1)}
.tr-cardhead{display:flex;gap:8px;align-items:center}
.tr-cargo .tr-btns{margin-top:6px}
.tr-cargo1.sys-grid{grid-template-columns:1fr}   /* 9/29 積荷は1列（半分の幅で縦に並んでいた） */
.tr-cargo1 .tr-btns{display:flex;gap:8px;flex-wrap:wrap}
.tr-known .ds{margin-top:4px}
.tr-rank{flex:0 0 20px;height:20px;border-radius:10px;text-align:center;line-height:20px;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));font-weight:800;
  color:#2a1c05;background:linear-gradient(180deg,#f3d27a,#b88a2c)}
.tr-kind{flex:0 0 22px;height:22px;border-radius:5px;text-align:center;line-height:22px;font-size:max(var(--fs-min),calc(11px*var(--fs)));font-weight:800;
  background:rgba(255,255,255,.07);color:#cbbf9f}
.tr-kind.k-buy{color:#8fd0ff}
.tr-kind.k-sell,.tr-kind.k-offer{color:#7fe3a0}
.tr-kind.k-lose,.tr-kind.k-dump{color:#e59a8a}
.tr-off{opacity:.7}
.tr-offer-row{display:flex;align-items:center;gap:6px}
.sys-note.bad{color:#e59a8a}

/* ---------------- 港の施設（px-） ---------------- */
.px-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.px-head .sys-img,.px-head .sys-emo{border-radius:8px}
.px-lead{color:#d8cdae;font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.7}
.px-card .px-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
/* 狭いカードでは値段とボタンを折り返す（「寄進する」「占ってもらう」が右にはみ出して切れていた。2026-09-15） */
.px-card .px-foot{flex-wrap:wrap}
.px-card .px-foot .sys-btn{flex:1 1 auto;min-width:0;white-space:normal}
.px-card .fx{color:#9fd9b0;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));margin-top:3px}
.px-card.cur{border-color:rgba(127,227,160,.6);box-shadow:0 0 12px rgba(127,227,160,.15) inset}
.px-btns{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.px-btns .sys-btn{min-width:64px}
.px-result{margin:8px 0;padding:9px 11px;border-radius:9px;background:rgba(120,90,200,.12);border:1px solid rgba(180,150,255,.28);
  color:#e2d8f5;font-size:max(var(--fs-min),calc(12px*var(--fs)));line-height:1.8}
/* 文字とボタンが横に並ぶ札。ボタンが縮まないので、狭い画面では［今すぐ広げる］が
   札の外へはみ出して文字が切れていた（2026-09-24 オーナー「文字が切れてる」）。
   文字に最低 170px を与え、入らなければボタンを次の行へ送る */
.px-result.px-map{display:flex;flex-wrap:wrap;align-items:center;gap:10px;line-height:1.6;background:rgba(200,150,60,.12);border-color:rgba(232,194,92,.35);color:#f0e2bd}
.px-result.px-map .grow{flex:1 1 170px;min-width:0}
.px-result.px-map > img,.px-result.px-map > .it-ic{flex:0 0 auto}
.px-result.px-map .sys-btn{flex:0 0 auto;max-width:100%;margin-left:auto}
.px-destiny p{margin:4px 0 0;color:#d8cdae}
.px-lv{display:flex;gap:4px;margin:4px 0 6px}
.px-lv i{flex:1;height:7px;border-radius:3px;background:#0a0e16;border:1px solid rgba(255,255,255,.08)}
.px-lv i.on{background:linear-gradient(90deg,#8a6416,#e8c25c)}
.px-fx{margin:0;padding-left:16px;color:#c4b795;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));line-height:1.7}
.px-fx li.on{color:#9fd9b0}
.px-shop .px-row-lock{opacity:.45}
.px-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#cbbf9f}
.px-extra{margin-top:10px}
.px-bill{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#b7a987;margin-top:6px}

@media (max-width:820px){
  .tr-pr{min-width:60px}
  .tr-btns .sys-btn{padding:4px 7px}
}

/* 目安の港名・値段を途中で折り返さない（「リス／ボン」と切れていた。2026-09-17） */
.tr-sub .nw{white-space:nowrap}

/* 交易路帳（2026-09-17）：港名と品名・回数・売値の上乗せを段に分け、右に「利益の合計」 */
.tr-route-help{margin:0 0 6px}
.tr-route .grow{line-height:1.45}
.tr-route-p{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto}
.tr-route-p small{font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#b9a47a;white-space:nowrap}

/* 市場の「おすすめ」（2026-09-17）：いちばん儲かる品を金の枠で */
.tr-rec{border:1px solid rgba(255,214,110,.85);border-radius:10px;background:linear-gradient(90deg,rgba(255,200,80,.16),rgba(255,200,80,.04));box-shadow:0 0 12px rgba(255,200,80,.25)}
.tr-rec-tag{display:inline-block;margin-bottom:2px;padding:1px 8px;border-radius:9px;background:linear-gradient(180deg,#ffe29a,#e8a92c);color:#3a2204;font-weight:900;font-size:max(var(--fs-min),calc(11px*var(--fs)))}
.tr-sortnote{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#b9a47a;font-weight:600}

/* B：交易成功の札（trade.js winFlush）。港の画面（z 60）の上に出す */
.tr-win{position:fixed;inset:0;z-index:95;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:opacity .45s}
.tr-win.out{opacity:0}
.tr-win-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 26px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(46,32,10,.95),rgba(18,12,4,.95));border:2px solid #ffd66e;box-shadow:0 0 40px rgba(255,200,80,.6),0 10px 30px rgba(0,0,0,.6);
  animation:trWinPop .45s cubic-bezier(.2,1.5,.4,1)}
.tr-win-card small{font:800 13px/1 sans-serif;color:#ffe29a;letter-spacing:.2em}
.tr-win-card b{font:900 38px/1.1 "DIN Alternate","Helvetica Neue",sans-serif;color:#fff3c0;text-shadow:0 0 16px rgba(255,200,70,.95)}
.tr-win.big .tr-win-card b{font-size:48px}
.tr-win-boa{margin-top:4px;padding:2px 10px;border-radius:10px;background:rgba(90,200,240,.18);border:1px solid rgba(127,214,234,.7);color:#d8f6ff;font:800 13px sans-serif;white-space:nowrap}
.tr-win-rain{position:absolute;inset:0;overflow:hidden}
.tr-win-rain i{position:absolute;top:-30px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6cf,#f4d270 40%,#9c6f18 100%);box-shadow:0 0 6px rgba(255,210,90,.8);animation:trCoin 1.2s ease-in forwards}
@keyframes trCoin{0%{transform:translateY(0) rotateY(0)}100%{transform:translateY(105vh) rotateY(720deg)}}
@keyframes trWinPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* ボア・ヴィアージェンの札（市場の上） */
.tr-boa{margin:6px 0 8px;padding:7px 11px;border-radius:10px;background:linear-gradient(90deg,rgba(90,200,240,.16),rgba(90,200,240,.04));border:1px solid rgba(127,214,234,.6);color:#d8f6ff;font-size:max(var(--fs-min),calc(13px*var(--fs)))}
.tr-boa b{color:#fff}
.tr-boa small{display:block;margin-top:3px;color:#a9cfe0;font-size:max(var(--fs-min),calc(11px*var(--fs)))}
/* 依頼品の印（2026-09-23 要望 22） */
.sys-tag.tr-quest{background:rgba(120,180,255,.18);border-color:#9cc8ff;color:#e6f1ff}
.tr-rec-tag.tr-qtag{background:linear-gradient(180deg,#3d6fa8,#23446e);color:#eaf4ff;border-color:#9cc8ff}

/* 見本 ?tidy4（2026-09-27 要望112 の4）：道具屋の種類の切り替えと、個数の選択 */
.px-shoptypes{margin:2px 0 8px}
.px-qty{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-2px 0 8px;padding:6px 8px;border-radius:8px;background:rgba(255,235,190,.06);border:1px dashed rgba(232,194,92,.35)}
.px-qty .k{color:#e8c25c;font-weight:700;font-size:max(var(--fs-min),calc(12px*var(--fs)));margin-right:2px}
.px-qty .sys-btn{flex:1 1 auto;min-width:0;padding:6px 8px;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
/* 9/28（?oldmktable で前）：相場表を1港1行の見出し＋品の札に。札は名前と値の塊で折り返さない */
.tr-klist{display:flex;flex-direction:column;gap:6px}
.tr-krow{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(232,194,92,.18)}
.tr-krow.on{border-color:rgba(232,194,92,.6);background:rgba(232,194,92,.08)}
.tr-khead{font-size:max(var(--fs-min),calc(13px*var(--fs)));color:#f3e6c2;margin-bottom:3px}
.tr-kchips{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:3px}
.tr-klbl{flex:0 0 auto;font-size:max(var(--fs-min),calc(11px*var(--fs)));font-weight:700;color:#1f1406;background:#e8c25c;border-radius:4px;padding:0 5px;line-height:1.5}
.tr-klbl.buy{background:#8fb6d8}
.tr-chip{display:inline-block;white-space:nowrap;font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#e6dbc0;background:rgba(0,0,0,.28);border-radius:6px;padding:1px 7px;line-height:1.6}
.tr-chip b{color:#ffe6ab;font-weight:700}
.tr-chip.buy b{color:#bfe0ff}
.tr-kmore{margin-top:6px}
.tr-kmore summary{cursor:pointer;color:#e8c25c;font-size:max(var(--fs-min),calc(12.5px*var(--fs)));padding:6px 2px}
.tr-kmore .tr-klist{margin-top:4px}
.tr-khelp{margin-bottom:6px}