/* =========================================================
   Age of Doubloons - sys-crew.css
   船員（酒場・名簿・士気）の見た目。共通部品は css/sys.css。
   ========================================================= */

.crew-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* 肖像：画像が来たら <img class="sys-img">、無い間は役職の絵文字 */
.crew-face{
  display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden;
  border-radius:10px;background:radial-gradient(circle at 40% 35%,#4a3a22,#1a130a);
  border:2px solid rgba(232,194,92,.35);box-shadow:0 2px 6px rgba(0,0,0,.45) inset;
}
.crew-face .sys-img{width:100%;height:100%;object-fit:cover}
.crew-face.r1{border-color:rgba(255,255,255,.22)}
.crew-face.r2{border-color:rgba(127,227,160,.55)}
.crew-face.r3{border-color:rgba(143,208,255,.6)}
.crew-face.r4{border-color:rgba(214,160,255,.65)}
.crew-face.r5{border-color:rgba(255,209,102,.85);box-shadow:0 0 10px rgba(255,209,102,.35)}
.crew-face.shadow{filter:brightness(.35) grayscale(1)}
.crew-face.keeper{border-radius:50%}
.crew-facebtn{appearance:none;background:none;border:0;padding:0;cursor:pointer;line-height:0}
.crew-facebtn:hover .crew-face{border-color:#ffe9a8}

/* カード */
.crew-card{display:flex;flex-direction:column;gap:5px}
.crew-card.story{border-color:rgba(255,209,102,.6);box-shadow:0 0 14px rgba(255,205,90,.18) inset}
.crew-top{display:flex;align-items:center;gap:9px}
.crew-top .grow{flex:1;min-width:0}
.crew-skill{color:#e8d8a8;font-size:max(var(--fs-min),calc(11px*var(--fs)));line-height:1.6}
.crew-skill.weak{color:#c9a58a}
.crew-act{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px}
.crew-act .grow{flex:1}
.crew-ribbon{
  position:absolute;top:-8px;right:8px;font-size:max(var(--fs-min),calc(9.5px*var(--fs)));font-weight:800;padding:1px 8px;border-radius:8px;
  color:#2a1c05;background:linear-gradient(180deg,#f3d27a,#b88a2c);border:1px solid #ffe9a8;
}

/* 士気 */
.crew-morale{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:8px 11px;margin-bottom:8px}
.crew-mhead{display:flex;align-items:center;gap:7px;font-size:max(var(--fs-min),calc(12.5px*var(--fs)));color:#f1e4c0;margin-bottom:6px}
.crew-mhead .grow{flex:1}
.crew-memo{font-size:max(var(--fs-min),calc(18px*var(--fs)));line-height:1}
.crew-mbar{height:8px}
.crew-morale.m-good .crew-mbar i{background:linear-gradient(90deg,#3f8a4e,#7fe3a0)}
.crew-morale.m-ok .crew-mbar i{background:linear-gradient(90deg,#8a6416,#e8c25c 70%,#fff0be)}
.crew-morale.m-low .crew-mbar i{background:linear-gradient(90deg,#8a4a16,#e59a5a)}
.crew-morale.m-bad .crew-mbar i{background:linear-gradient(90deg,#7a1c12,#e5604a)}
.crew-morale.m-bad{border-color:rgba(229,96,74,.45)}
.crew-kv{margin:4px 0 2px}
.crew-bill{margin-top:4px}
.crew-bill .bad,.sys-note.bad{color:#e59a8a}
.crew-effects{display:flex;flex-wrap:wrap;gap:4px}
.crew-effects .sys-tag{font-size:max(var(--fs-min),calc(10.5px*var(--fs)));margin:0}

/* 加入演出 */
.crew-banner{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:10px 12px;border-radius:10px;
  background:linear-gradient(90deg,rgba(120,86,24,.45),rgba(0,0,0,.25));border:1px solid rgba(232,194,92,.5);
  animation:crewIn .5s ease-out;
}
.crew-banner.story{border-color:#ffe9a8;box-shadow:0 0 18px rgba(255,205,90,.3)}
.crew-banner .grow{flex:1;min-width:0}
.crew-bt{font-weight:800;color:#ffe08a;font-size:max(var(--fs-min),calc(13.5px*var(--fs)))}
.crew-line{color:#f1e4c0;font-size:max(var(--fs-min),calc(12px*var(--fs)));font-style:italic;margin:3px 0}
@keyframes crewIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 酒場 */
.crew-keeper{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:max(var(--fs-min),calc(12px*var(--fs)));color:#dfd4b4}
.crew-keeper .grow{flex:1;min-width:0}
.crew-off{opacity:.6}

@media (max-width:820px){
  .crew-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}