/* 司令官の職選択: 濃紺の面、細い真鍮色の枠、指令を選択材料として見せる。 */
.commander-job-picker { width: 100%; max-width: 920px; margin: 0 auto; }
.commander-job-lead { margin: 0 0 14px; color: var(--text-dim); }
.commander-job-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.commander-job-card {
  min-height: 142px;
  margin: 0;
  border-color: #b9a16d99;
  background: linear-gradient(145deg, #2c3947, #202b37);
  box-shadow: inset 0 0 0 2px #111b2338;
}
.commander-job-card:hover:not(:disabled) { border-color: #e0c58e; background: #334252; }
.commander-job-head { display: flex; align-items: center; gap: 9px; }
.commander-job-head .name { font: 600 18px/1.3 "Yu Mincho", "Hiragino Mincho ProN", serif; }
.commander-job-icon { display: inline-flex; color: #e4cc98; }
.commander-order-name { margin-top: 14px; color: #efd39a; font-weight: 700; }
.commander-order-description { margin-top: 5px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.commander-job-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #b9a16d99;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #263442, #1b2632);
}
.commander-job-prompt button { flex: 0 0 auto; }
body.is-commander-pick .screen { width: 100%; max-width: 980px; margin-inline: auto; padding-top: clamp(24px, 7vh, 72px); }

@media (min-width: 1100px) {
  body.is-gate.is-commander-pick .screen > * { width: 100%; max-width: 920px; }
}

@media (max-width: 720px) {
  .commander-job-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .commander-job-card { min-height: 132px; padding: 12px; }
  .commander-job-head .name { font-size: 16px; }
  .commander-job-prompt { align-items: stretch; flex-direction: column; }
}

@media (max-width: 390px) {
  .commander-job-grid { grid-template-columns: 1fr; }
  .commander-job-card { min-height: 0; }
}
/* はじめの姿選択は、プレビューと選択肢を同時に見て決める。 */
body.is-appearance-pick .screen { width:100%; max-width:940px; margin-inline:auto; padding:24px; }
body.is-gate.is-appearance-pick .screen>* { max-width:none; width:100%; }
.appearance-heading h1 { text-align:center; font-size:28px; margin:8px 0; }
.appearance-heading .sub { text-align:center; margin-bottom:20px; }
.appearance-layout { display:grid; grid-template-columns:34% minmax(0,1fr); gap:28px; }
.appearance-preview { display:flex; align-items:center; justify-content:center; align-self:start; position:sticky; top:20px; padding-top:45px; }
.appearance-figure { width:170px!important; height:auto!important; aspect-ratio:848/1264; }
.appearance-choices h3 { margin:12px 0 8px; font-size:14px; }
.appearance-choices .appearance-picker { justify-content:flex-start!important; gap:6px; }
.appearance-hairs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.appearance-hair { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 3px; border-radius:2px; font-size:14px; }
.appearance-lock-note { font-size:14px; color:var(--text-dim); margin:20px 0 8px; }
.appearance-choices>.btn-lg { min-height:40px; font-size:15px; padding:10px; margin-top:0; }
@media(max-width:700px) {
 body.is-appearance-pick .screen { padding:16px 12px; }
 .appearance-heading h1 { font-size:23px; }
 .appearance-layout { grid-template-columns:100px minmax(0,1fr); gap:12px; }
 .appearance-preview { padding-top:40px; }
 .appearance-figure { width:100px!important; }
 .appearance-hairs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
 .appearance-hair { font-size:14px; padding:4px 1px; }
 .appearance-choices .appearance-picker button { font-size:14px; padding:6px 8px; }
}
.appearance-hair.is-on { border-color:#d9b86f; color:#ead2a0; background:#ffffff12; }