/* =========================================================
   Age of Doubloons - sys-ships.css
   船と造船所（js/sys/ships.js）の見た目。共通部品は css/sys.css を使い、足りない物だけここに書く。
   ========================================================= */

.shp-root{font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#cdc2a4}
.shp-dim{color:#c4b795;font-size:max(var(--fs-min),calc(10.5px*var(--fs)))}
.shp-bad{color:#e59a8a}
.shp-warn{margin-top:6px;font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#ffb49a;font-weight:700}
.shp-why{flex-basis:100%;font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#a8977a;margin-top:3px}

/* 小さな切り替え（船の状態／造船所、造船所の中の区分） */
.shp-sub{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.shp-sub .sys-btn.on{color:#2a1c05;background:linear-gradient(180deg,#f3d27a,#b88a2c);border-color:#ffe9a8}
.shp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d2452c;margin-left:3px;vertical-align:middle}

/* 二回押しの確認中のボタン */
.sys-btn.shp-confirm{background:linear-gradient(180deg,#a8402a,#5a1a0e);border-color:#ffb49a;color:#fff;animation:shpPulse .8s ease-in-out infinite alternate}
@keyframes shpPulse{from{box-shadow:0 0 0 rgba(255,140,90,0)}to{box-shadow:0 0 10px rgba(255,140,90,.55)}}

/* 船の絵：カードの画像（ship_<id>_card）か、無ければ絵文字＋配色の小さな船 */
.shp-art{position:relative;width:var(--sz,120px);max-width:100%;aspect-ratio:16/10;flex:none;
  display:flex;align-items:center;justify-content:center;border-radius:7px;overflow:hidden;
  background:linear-gradient(180deg,#27425e 0%,#3c6384 55%,#1d3550 56%,#132338 100%);
  border:1px solid rgba(232,194,92,.25)}
.shp-art img.sys-img{width:100%;height:100%;object-fit:cover}
.shp-art .sys-emo{position:absolute;left:6%;top:8%;opacity:.9;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.shp-swatch{position:relative;display:block;width:62%;height:62%;margin-top:4%}
.shp-swatch i{position:absolute;display:block}
.shp-swatch .h{left:6%;right:6%;bottom:6%;height:30%;background:var(--hull);border-top:3px solid var(--trim);border-radius:0 0 40% 40% / 0 0 90% 90%;box-shadow:inset 0 -3px 5px rgba(0,0,0,.35)}
.shp-swatch .m{left:49%;bottom:32%;width:3%;height:62%;background:#4a3824}
.shp-swatch .s{left:27%;bottom:42%;width:46%;height:40%;background:var(--sail);border-radius:3px 3px 30% 30%;box-shadow:inset -4px 0 6px rgba(0,0,0,.18)}
.shp-swatch .f{left:52%;top:0;width:22%;height:12%;background:var(--flag);border-radius:0 2px 2px 0}

/* 船の状態 */
.shp-hero{display:flex;gap:12px;align-items:flex-start}
.shp-hero-txt{flex:1;min-width:0}
.shp-hero-txt .nm{font-size:max(var(--fs-min),calc(14px*var(--fs)));margin-bottom:3px}
.shp-hull{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:max(var(--fs-min),calc(11px*var(--fs)))}
.shp-hull .k{color:#b7a987;flex:none}
.shp-hull .sys-bar{flex:1;height:8px}
.shp-hull .v{flex:none;font-weight:800;color:#dfd4b4;font-variant-numeric:tabular-nums}
.shp-hull.low .sys-bar i{background:linear-gradient(90deg,#7a1e12,#e0503a)}
.shp-kv{margin-bottom:6px}
.shp-kv small{font-weight:400}
.shp-effs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.shp-eff{display:inline-block;font-size:max(var(--fs-min),calc(10.5px*var(--fs)));padding:1px 7px;border-radius:9px;margin:0 4px 3px 0;
  background:rgba(127,227,160,.08);color:#9fe8b4;border:1px solid rgba(127,227,160,.25)}
.shp-pcard{text-align:center}
.shp-pcard .ds{min-height:1.6em}
.shp-pips{display:inline-flex;gap:2px;vertical-align:middle;margin:3px 0}
.shp-pips i{display:block;width:9px;height:9px;border-radius:2px;background:#221b10;border:1px solid rgba(232,194,92,.4)}
.shp-pips i.on{background:linear-gradient(180deg,#ffe08a,#b88a2c);border-color:#ffe9a8}
.shp-pips i.lock{opacity:.25;border-style:dashed}
.shp-own{gap:10px;flex-wrap:wrap}
.shp-own.on{background:rgba(255,215,110,.05)}
.shp-own .nm{font-weight:800;color:#f1e4c0}

/* 造船所 */
.shp-yard-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(232,194,92,.18)}
.shp-yard-head .grow{flex:1;min-width:0}
.shp-yard-head .nm{font-weight:800;color:#f1e4c0;font-size:max(var(--fs-min),calc(13px*var(--fs)))}
.shp-ships{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.shp-ship .shp-art{width:100%;margin-bottom:6px}
.shp-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.shp-decor .ic{display:flex;align-items:center;gap:6px}
.shp-chip{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.3)}
.shp-cloth{display:inline-block;border-radius:4px;border:1px solid rgba(255,235,190,.45);box-shadow:inset 0 0 6px rgba(0,0,0,.35);vertical-align:middle}   /* 帆布の色の見本（2026-09-26） */

/* 性能の比較表（横に長いので枠の中だけ横に動かす） */
.shp-tbl-wrap{overflow-x:auto;margin-bottom:6px}
.shp-tbl{width:100%;border-collapse:collapse;font-size:max(var(--fs-min),calc(11px*var(--fs)));white-space:nowrap;font-variant-numeric:tabular-nums}
.shp-tbl th{color:#b7a987;font-weight:700;text-align:right;padding:4px 6px;border-bottom:1px solid rgba(232,194,92,.25)}
.shp-tbl th:first-child,.shp-tbl td.nm{text-align:left}
.shp-tbl td{text-align:right;padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.05);color:#dfd4b4}
.shp-tbl td.nm{font-weight:800;color:#f1e4c0}
.shp-tbl td.eff{font-size:max(var(--fs-min),calc(10px*var(--fs)));color:#9fe8b4;text-align:left;white-space:normal;min-width:110px;line-height:1.5}
.shp-tbl tr.on td{background:rgba(255,215,110,.08)}
.shp-tbl tr.locked td{opacity:.5}
.shp-tbl small{display:inline-block;margin-left:3px;font-size:max(var(--fs-min),calc(9.5px*var(--fs)))}
.shp-tbl small.up{color:#7fe3a0}
.shp-tbl small.dn{color:#e59a8a}

/* 改装の行 */
.shp-part{align-items:flex-start;gap:10px;padding:8px 0}
.shp-part .ic{font-size:calc(22px*var(--fs-big));width:30px;text-align:center;flex:none}
.shp-part .nm{font-weight:800;color:#f1e4c0}
.shp-part .ds{color:#ab9e7e;font-size:max(var(--fs-min),calc(10px*var(--fs)));margin-top:2px}
.shp-next{margin-top:3px;font-size:max(var(--fs-min),calc(11px*var(--fs)))}
.shp-next b{color:#ffe08a}
.shp-mats{margin-top:3px;font-size:max(var(--fs-min),calc(10.5px*var(--fs)))}
.shp-mat{display:inline-flex;align-items:center;gap:3px;margin-right:8px;color:#9fe8b4}
.shp-mat.lack{color:#e59a8a}
.shp-buy{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}

/* 船名 */
.shp-rename{display:flex;gap:6px;align-items:center}
.shp-name-in{flex:1;min-width:0;max-width:260px;padding:5px 8px;border-radius:6px;font-family:inherit;font-size:max(var(--fs-min),calc(12px*var(--fs)));
  color:#f1e4c0;background:rgba(0,0,0,.4);border:1px solid rgba(232,194,92,.4)}

/* 出港のカットイン（盤面の手を止めないよう、押せない・2秒で消える） */
.shp-cutin{position:fixed;left:0;right:0;top:30%;height:0;z-index:50;pointer-events:none;display:none}
.shp-cutin.on{display:block}
.shp-cutin-band{position:absolute;left:0;right:0;top:0;height:180px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(90deg,rgba(10,16,28,0) 0%,rgba(10,16,28,.85) 18%,rgba(10,16,28,.85) 82%,rgba(10,16,28,0) 100%);
  background-size:cover;background-position:center;
  border-top:1px solid rgba(232,194,92,.55);border-bottom:1px solid rgba(232,194,92,.55);
  animation:shpCut 2.1s ease both}
.shp-cutin-art .shp-art{box-shadow:0 6px 24px rgba(0,0,0,.5)}
.shp-cutin-fig{font-size:calc(60px*var(--fs-big));filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.shp-cutin-txt .t1{font-family:"Hiragino Mincho ProN",serif;font-size:calc(34px*var(--fs-big));font-weight:800;color:#ffe08a;letter-spacing:.2em;text-shadow:0 0 16px rgba(255,200,80,.6)}
.shp-cutin-txt .t2{font-size:max(var(--fs-min),calc(14px*var(--fs)));color:#f1e4c0;margin-top:4px}
@keyframes shpCut{
  0%{opacity:0;transform:translate(-60px,-50%)}
  14%{opacity:1;transform:translate(0,-50%)}
  82%{opacity:1;transform:translate(14px,-50%)}
  100%{opacity:0;transform:translate(60px,-50%)}
}
@media (prefers-reduced-motion:reduce){.shp-cutin-band{animation:none}}

@media (max-width:820px){
  .shp-hero{flex-direction:column}
  .shp-hero .shp-art{width:100%}
  .shp-cutin-band{height:140px;gap:10px}
  .shp-cutin-txt .t1{font-size:calc(24px*var(--fs-big))}
}

/* ---------------- 船の姿（ships.js viewHTML・2026-09-12） ----------------
   船の一枚絵を大きく出し、改装・装飾（旗の装飾・帆の紋章・船首像・樽・銘板）を上に重ねる。下に姿の段階と改装の進み具合 */
.shv{margin:0 0 10px}
.shv-pic{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(232,194,92,.5);box-shadow:0 4px 14px rgba(0,0,0,.45);container-type:inline-size}
.shv-art{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.shv-pic > img.shv-cloth{position:absolute;left:0;top:0;width:100%;height:auto;transform:none}   /* 帆布の色に塗った帆（2026-09-26） */
.shv-empty{display:flex;align-items:center;justify-content:center;font-size:64px;background:#1c2a38}
.shv-pic > img:not(.shv-art), .shv-pic > span{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.shv-pic > .shv-flag{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) skewY(-5deg);box-shadow:0 2px 6px rgba(0,0,0,.45);border-radius:2px}
.shv-crest{mix-blend-mode:multiply;opacity:.88}
.shv-pic > .shv-fig{transform:translate(-50%,-50%) scaleX(var(--flip,1));filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
/* 樽：絵の左端の大砲の切れ端を見せないよう、右寄せで樽の部分（幅 365 / 568）だけを出す */
.shv-pic > .shv-barrel{aspect-ratio:365/568;transform:translate(-50%,-100%);
  background:url(../assets/prop_barrel.webp) right center/auto 100% no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* 銘板：絵の幅に合わせた大きさ（文字の大きさを画面に合わせると、狭い絵では船体より大きなラベルに見えた） */
.shv-plate{padding:.15em .6em;border-radius:.25em;background:linear-gradient(180deg,#f3d98a,#a87a26);border:1px solid #5a3d0c;
  color:#3a2408;font-weight:800;font-size:2.4cqw;line-height:1.3;font-family:"Hiragino Mincho ProN",serif;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.shv-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.shv-foot b{color:#f1e4c0;font-size:max(var(--fs-min),calc(14px*var(--fs)))}
.shv-tier{padding:2px 10px;border-radius:10px;font-weight:800;font-size:max(var(--fs-min),calc(11px*var(--fs)));border:1px solid}
.shv-tier.t1{color:#cdbf98;border-color:rgba(255,255,255,.22)}
.shv-tier.t2{color:#8fd0ff;border-color:rgba(143,208,255,.55)}
.shv-tier.t3{color:#ffd166;border-color:rgba(255,209,102,.75);box-shadow:0 0 10px rgba(255,209,102,.4)}
.shv-bar{position:relative;flex:1 1 100%;height:8px;border-radius:4px;background:#0a0e16;border:1px solid rgba(255,255,255,.08)}
.shv-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8a6416,#e8c25c 70%,#fff0be)}
.shv-bar em{position:absolute;top:-3px;width:2px;height:14px;margin-left:-1px;background:#ffe9a8;opacity:.75}
.shv-note{flex:1 1 100%;font-size:max(var(--fs-min),calc(11px*var(--fs)));color:#b8ab88}

/* 狭い画面（スマホ縦）の性能の比較：表をやめて船ごとのかたまりに（横スクロールしない。2026-09-15） */
@media (max-width:560px){
  .shp-tbl-wrap{overflow-x:visible}
  .shp-tbl{white-space:normal}
  .shp-tbl thead{display:none}
  .shp-tbl tbody,.shp-tbl tr{display:block}
  .shp-tbl tr{padding:7px 2px 6px;border-bottom:1px solid rgba(232,194,92,.22)}
  .shp-tbl td{display:inline-block;border:0;padding:2px 10px 2px 0;text-align:left}
  .shp-tbl td.nm{display:block;font-size:max(var(--fs-min),calc(12.5px*var(--fs)));padding-bottom:3px}
  .shp-tbl td.pr{float:right;padding-right:0}
  .shp-tbl td[data-l]::before{content:attr(data-l) ' ';color:#b7a987;font-weight:700;font-size:.92em}
  .shp-tbl td.eff{display:block;min-width:0;padding-top:3px}
}

/* 乗り換えられない理由（押せないボタンの説明をスマホでも読めるよう、文字で出す。2026-09-16） */
.shp-why{color:#e8b98a}

/* 台の特色のアイコン（ui_gim_*、2026-09-16）：文字の行に並べる */
.shp-gim b .sys-img{width:24px;height:24px;vertical-align:-6px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* 絵のアイコンは見出しの左に並べる（絵が別の行に浮いていた） */
.shp-gim>b{display:flex;align-items:center;gap:6px}
.shp-gim>b .sys-img,.shp-gim>b .sys-emo{flex:0 0 auto;display:inline-block;vertical-align:middle}
/* 小さい画面：造船所の見出しで「所持 ◯◯枚」に押されて港名が 1〜2 文字ずつ折れていた（2026-09-23 幅320） */
@media (max-width:380px){
  .shp-yard-head{flex-wrap:wrap}
  .shp-yard-head .grow{flex:1 1 55%}
  .shp-yard-head .sys-price{flex:1 1 100%;text-align:right}
}
/* 見本 ?ux4：改装の一覧の上の一行（今すぐ改装できる部品の数） */
.shp-uxhead{margin:6px 0 8px;padding:6px 10px;border-radius:8px;background:rgba(232,194,92,.12);border:1px solid rgba(232,194,92,.3);color:#f1e4c0;font-size:max(var(--fs-min),calc(12px*var(--fs)))}
.shp-uxhead b{color:#ffd66e}
/* 見本 ?dye：船舶染色師（10/3） */
.shp-dyes{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}
.shp-dyes .sys-btn{display:inline-flex;align-items:center;gap:5px}
.shp-dyes .sys-btn.on{color:#2a1c05;background:linear-gradient(180deg,#f3d27a,#b88a2c);border-color:#ffe9a8}
.shp-dsw{display:inline-block;border-radius:50%;border:1px solid rgba(255,240,200,.75);box-shadow:inset 0 0 3px rgba(0,0,0,.5);vertical-align:-2px;margin-right:3px;flex:none}
/* 見本 ?reelcus：スロット細工師の工房（10/3） */
.ws-opts{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.ws-opt{display:flex;flex-direction:column;align-items:center;gap:2px;width:78px;padding:4px;border-radius:8px;border:1px solid rgba(220,180,100,.35);background:rgba(20,14,8,.55);color:#f3e6c8;font:inherit;cursor:pointer}
.ws-opt img{width:62px;height:40px;object-fit:contain}
.ws-opt small{font-size:10px;line-height:1.25;text-align:center;white-space:nowrap;letter-spacing:-.02em}
.ws-opt.on{border-color:#ffe9a8;box-shadow:0 0 0 2px rgba(243,210,122,.6);background:rgba(90,66,20,.6)}
.ws-none{display:flex;align-items:center;justify-content:center;width:62px;height:40px;font-weight:700;color:#e8d5a8}
.ws-reel{display:block;width:30px;height:40px;border-radius:4px;border:1px solid rgba(220,180,100,.5)}
/* 説明の箇条書き：「・」を行頭に取り残さない（10/3 幅320 の点検） */
.shp-li{position:relative;padding-left:1em;margin-top:2px}
.shp-li::before{content:'・';position:absolute;left:0}