/* =========================================================
   Age of Doubloons - sys-chara.css
   船長（キャラクター）画面（js/sys/chara.js・2026-09-12）
   金＝能力（スキルで上げた分）、緑＝装備・船・船員・名声などの＋
   ========================================================= */
.ch-root{--ch-b:#e8c25c;--ch-g:#6fe39a}
.ch-head{display:flex;gap:14px;align-items:stretch;margin-bottom:10px}
.ch-pic{flex:0 0 auto;width:min(36%,190px);display:flex;align-items:flex-end;justify-content:center;
  border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,rgba(255,220,140,.22),rgba(0,0,0,.35) 70%);
  border:1px solid rgba(232,194,92,.35)}
/* 枠いっぱいに船長を出す（2026-09-24 オーナー「枠に対して人物が小さすぎ。全身入れる必要ない」）。
   全身の絵を contain で入れていたので、上下に大きな余白ができて人物が小さく見えていた。
   cover で枠を埋め、顔が真ん中に来るように少し上を見せる（脚は切れてよい） */
.ch-full{display:block;width:100%;height:100%;min-height:170px;object-fit:cover;object-position:50% 14%}
/* 行と行の間を詰める（2026-09-25 オーナー「港や航海メニュー、ステータスとかがごちゃごちゃしすぎてて見づらい」） */
.ch-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
/* 「能力を上げる（残り N pt）」は欄の幅で折り返す（2026-09-13：ボタンは改行しない決まり（.sys-btn）なので、幅 402px の iPhone では
   211px になって欄（179px）からはみ出し、航海メニューに横スクロールが出て右側が切れた） */
.ch-info .ch-sp{white-space:normal;max-width:100%;line-height:1.3}
.ch-sp .ch-spn{white-space:nowrap}   /* 「（残り 6 pt）」はひとまとまりで次の行へ（数と pt の間で切れないように） */
.ch-rank{font-size:max(var(--fs-min),calc(15px*var(--fs)));color:#f3e2b0;font-weight:800}
.ch-rank .lv,.ch-sh .lv{white-space:nowrap}
.ch-rank .lv b{font-size:calc(26px*var(--fs-big,1));color:#ffe08a}
.ch-rank .rn{margin-left:6px}
.ch-rt{font-size:max(var(--fs-min),calc(9.5px*var(--fs)));color:#9d9174;letter-spacing:.10em;margin-top:-3px}
.ch-title{font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#ffd98a}
.ch-exp .sys-bar{height:8px}
.ch-expn{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#cdbf98;font-variant-numeric:tabular-nums}
.ch-kv{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));color:#dccfae}
.ch-kv b{color:#ffe08a}
.ch-sp{align-self:flex-start;margin-top:2px}
.ch-sp.has{animation:pulseSP 1.6s infinite;border-color:#ffe29a}

/* 色の説明は 1 行に収める（2 行あって、能力の表より目立っていた） */
.ch-legend{display:flex;flex-wrap:nowrap;gap:0 14px;white-space:nowrap;overflow:hidden;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#b8ab88;margin:2px 0 4px}
.ch-legend i{display:inline-block;width:11px;height:7px;border-radius:2px;margin-right:5px;vertical-align:middle}
.ch-legend i.b{background:var(--ch-b)}
.ch-legend i.g{background:var(--ch-g)}

.ch-stat{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:8px 10px;margin-bottom:7px}
.ch-sh{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.ch-sh .ic{font-size:max(var(--fs-min),calc(16px*var(--fs)))}
.ch-sh .nm{font-weight:800;color:#f1e4c0;font-size:max(var(--fs-min),calc(13px*var(--fs)))}
.ch-sh .lv{font-weight:800;color:#ffe08a;font-size:max(var(--fs-min),calc(12px*var(--fs)));font-variant-numeric:tabular-nums}
.ch-sh .lv small{color:#c4b795;font-weight:700}
.ch-pips{display:flex;gap:2px;margin-left:auto;min-width:0;flex-shrink:1;overflow:hidden}
/* 小さい画面（幅390px以下）では、20個の点が入りきらず行が横にはみ出していた（2026-09-23） */
@media (max-width:390px){.ch-pips{gap:1px}.ch-pips i{width:4px}}
.ch-pips i{width:6px;height:10px;border-radius:2px;background:rgba(255,255,255,.1)}
.ch-pips i.on{background:var(--ch-b)}
.ch-line{margin-top:5px}
.ch-lt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:max(var(--fs-min),calc(11.5px*var(--fs)));color:#cdc2a4}
.ch-lt .t{font-size:max(var(--fs-min),calc(15px*var(--fs)));color:#fff0c8;font-variant-numeric:tabular-nums}
.ch-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(0,0,0,.4);margin:3px 0}
.ch-bar i{display:block;height:100%}
.ch-bar i.b{background:linear-gradient(90deg,#a47c22,var(--ch-b))}
.ch-bar i.g{background:linear-gradient(90deg,#2f9c5c,var(--ch-g));box-shadow:0 0 6px rgba(111,227,154,.6)}
.ch-ld{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:max(var(--fs-min),calc(10.5px*var(--fs)))}
.ch-ld .b{color:var(--ch-b)}
.ch-ld .g{color:var(--ch-g);font-weight:800}
.ch-chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.ch-chip{display:inline-block;padding:1px 7px;border-radius:9px;font-size:max(var(--fs-min),calc(10px*var(--fs)));
  color:#bff5d2;background:rgba(111,227,154,.1);border:1px solid rgba(111,227,154,.35);white-space:nowrap}
.ch-chip.neg{color:#f3b3a3;background:rgba(229,154,138,.1);border-color:rgba(229,154,138,.4)}
.ch-chip.base{color:#e8d9ae;background:rgba(232,194,92,.1);border-color:rgba(232,194,92,.35)}

.ch-orow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.05);font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.ch-orow .n{color:#cdc2a4;min-width:7.5em}
.ch-orow b{color:var(--ch-g);font-variant-numeric:tabular-nums;min-width:4.5em}
.ch-orow b.neg{color:#e59a8a}
.ch-ship{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.ch-shipimg{width:120px;height:auto;max-height:80px;object-fit:contain;border-radius:6px}
.ch-shipnm{font-weight:800;color:#f1e4c0;font-size:max(var(--fs-min),calc(13px*var(--fs)))}
.ch-equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.ch-slot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 9px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.ch-slot .sl{font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#c4b795;min-width:3em}
.ch-slot .nm{font-weight:800;color:#f1e4c0}
.ch-slot.empty .nm{color:#ab9e7e;font-weight:600}

@media (max-width:560px){
  .ch-pic{width:40%}
  .ch-full{min-height:150px}
}
/* 船長の名前（2026-09-23） */
.ch-nm{font-weight:900;font-size:max(var(--fs-min),calc(16px*var(--fs)));color:#ffe3a0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.ch-nmb{font:inherit;font-size:max(var(--fs-min),calc(11px*var(--fs)));font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid rgba(232,194,92,.6);background:rgba(255,255,255,.06);color:#e8d6a8;cursor:pointer}
.ch-nmhint{font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#c9ba90;margin:2px 0 4px}
/* 装備の枠を押して選ぶ（2026-09-25） */
.ch-slot[data-chslot]{cursor:pointer}
.ch-slot[data-chslot]:hover{border-color:rgba(232,194,92,.6)}
.ch-slotmore{margin-left:auto;flex:0 0 auto;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));color:#e8c25c;font-weight:800;white-space:nowrap}
.ch-pick-now{margin:0 0 8px;color:#e9dcbc}
.ch-pick-now small{color:#b7a987;margin-left:4px}
.ch-pick-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ch-pick-row .grow{flex:1;min-width:0;line-height:1.45}
.ch-pick-row small{color:#b7a987;overflow-wrap:anywhere}
.ch-pick-row .ch-eqb{flex:0 0 auto;min-width:64px}