/* シミュレーターのスキルの選択の欄（発動させたいスキルの一覧・選択中のスキル） */
/* ---- スキル条件 ---- */

.kind-weapon {
  color: var(--kind-weapon);
}

.kind-armor {
  color: var(--kind-armor);
}

.kind-set {
  color: var(--kind-set);
}

.kind-group {
  color: var(--kind-group);
}

.skill-filter {
  width: 100%;
  margin-bottom: 8px;
}

/* 頭文字（あかさたな）のボタン。狭い画面でも 1 行に収まるよう、「すべて」以外は同じ幅に分ける */
.kana-index {
  display: grid;
  grid-template-columns: auto repeat(10, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 8px;
}

/* 頭文字のボタン・スキルの並び順のボタンと、スキル説明一覧の種類のボタン（押すと切り替わるボタン） */
.kana-button,
.order-button,
.kind-button {
  min-height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.kana-button:hover,
.order-button:hover,
.kind-button:hover {
  border-color: var(--accent);
}

.kana-button[aria-pressed="true"],
.order-button[aria-pressed="true"],
.kind-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

/* 武器スキル・防具スキルの並び順（五十音順・カテゴリー順）。項目名の横にボタンを並べる（狭い画面では折り返す） */
.skill-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  margin-bottom: 8px;
}

.skill-order-buttons {
  display: inline-flex;
  gap: 3px;
}

.order-button {
  padding: 0 10px;
  font-size: 0.85rem;
}

.skill-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-2);
}

.skill-group + .skill-group {
  margin-top: 10px;
}

.skill-group h3 {
  margin: 0 0 4px;
  font-size: 0.8rem;
}

.skill-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* カテゴリー順のときの、カテゴリー（アイコンの種類）ごとのまとまり。小見出しはアイコンとカテゴリーの名前 */
.skill-category + .skill-category {
  margin-top: 6px;
}

.skill-category h4 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.skill-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.85rem;
}

.skill-button:hover {
  border-color: var(--accent);
}

/* 選択中のスキルは半透明。押すと解除できることが分かるよう、マウスを乗せると少し濃くする */
.skill-button[aria-pressed="true"] {
  opacity: 0.4;
}

.skill-button[aria-pressed="true"]:hover {
  opacity: 0.7;
}

/* ---- 選択中のスキル ---- */

/*
 * スキルの枠の中の大きさは、すべて枠の文字サイズを基準にした値（em）で決める。
 * --selected-scale を変えると、比率を保ったまま枠ごと拡大・縮小できる（1 で標準の文字サイズ基準）。
 * .help-selected は、使い方の画面（help.html）の見本。本物と同じ大きさで描く
 */
#selected-summary,
.help-selected {
  --selected-scale: 0.87;
  --pip-size: 1.0733em;
  --pip-gap: 0.23em;
  /*
   * パネルが広いときは、新聞の段組みのように上から下へ流して複数の段に分け、枠は段の幅いっぱいに伸ばす。
   * 段の最小幅は、いちばん長いスキルが折り返さない幅（--selected-item-width。skill-picker.js の measureSelectedItemWidth で測る）
   */
  column-width: var(--selected-item-width, 240px);
  column-gap: 12px;
}

.selected-total {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--muted);
}

/*
 * 段組みで、種類（武器スキル・防具スキルなど）の途中では段を分けない（見出しの下の break-after: avoid だけでは、
 * Chrome で見出しだけが段の最後に残り、そのスキルが次の段に回ることがあるため）
 */
.selected-category {
  break-inside: avoid;
}

/* 区切り線は種類の下に引く（上に引くと、段組みで 2 段目の先頭に線が来て、見出しの高さが 1 段目とずれるため） */
.selected-category:not(:last-child) {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.selected-category h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 4px;
  font-size: 0.85rem;
  break-after: avoid; /* 見出しだけが段の最後に残らないようにする */
}

.selected-category ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--selected-scale) * 0.4em);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* スキルごとに枠で囲み、左に 2 行分の大きなアイコン、右の上段にスキル名と×ボタン、下段に「■■■□□ Lv3」 */
.selected-category li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.6667em;
  row-gap: 0.1333em;
  padding: 0.3em 0.6667em;
  border: 1px solid var(--border);
  border-radius: 0.5333em;
  background: var(--surface-2);
  font-size: calc(var(--selected-scale) * 1em);
  break-inside: avoid; /* 枠が 2 つの段にまたがらないようにする */
}

/* 枠の幅を測るために、全スキルの枠を一時的に並べる見えない入れ物 */
.selected-probe {
  position: absolute;
  visibility: hidden;
}

/* 通常のアイコンの大きさ指定（.skill-icon）より優先させる */
.selected-category .selected-icon {
  grid-row: 1 / -1;
  width: 2.8em;
  height: 2.8em;
}

/* スキル名と Lv はわずかに太くする（500 は Windows の日本語フォントにないので、1 段太い 600） */
.selected-name {
  grid-column: 2;
  font-size: 1.265em;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/*
 * 条件から外す×ボタン。枠の右上に置く。押せる範囲はスキル名の行より少し高いので、上下を枠の余白にはみ出させて、
 * 行の高さ（枠の縦幅）はスキル名で決まるようにする
 */
.selected-category .selected-remove {
  grid-column: 3;
  grid-row: 1;
  width: 1.6em;
  height: 1.6em;
  margin-block: -0.1em;
  margin-right: -0.3em;
  font-size: 1.15em;
  line-height: 1;
}

/* 枠の背景が --surface-2 なので、マウスを乗せたときの背景は別の色にする */
.selected-category .selected-remove:hover {
  background: var(--border);
}

/*
 * 武器や固定した装備に付いているスキルの印（その装備の部位のアイコン）。装備の分は外せないので、×ボタンの代わりに同じ位置・大きさで置く。
 * 色は、装備の分のレベルの四角（.pip.fixed）と同じ
 */
.selected-category .selected-fixed-mark {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-block: -0.1em;
  margin-right: -0.3em;
  font-size: 1.15em;
  color: var(--kind-weapon);
}

.selected-fixed-mark .part-icon {
  width: 1.1em;
  height: 1.1em;
  border-color: currentColor;
}

.selected-meter {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5333em;
  min-width: 0;
}

/* 幅が足りないときは、途中で折り返さずに四角の下の行へ回す */
/* Lv 表記の左の空きは、いちばん長いスキル名より右から始まるように skill-picker.js の measureSelectedItemWidth で決める */
.selected-level {
  margin-left: var(--selected-level-shift, 0px);
  color: var(--muted);
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* シリーズ・グループスキル: スキル名の下に、段階ごとの「四角 + 部位数 + 効果名」を縦に並べる */
.selected-category .rank-list {
  grid-column: 2 / -1;
  flex-direction: column;
  align-items: stretch;
  width: auto;
}

/* 行全体が押せるボタン。四角は .pip と同じ見た目（::before）で、文字だけ少し小さくする */
.selected-category .rank-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: auto;
  height: auto;
  min-height: calc(var(--pip-size) + 0.33em);
  text-align: left;
}

.selected-category .rank-row::before {
  flex: none;
}

.rank-text {
  font-size: 1.035em;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* キーボード操作時の枠は、四角だけでなく行全体を囲む */
.selected-category .rank-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 4px;
}

.selected-category .rank-row:focus-visible::before {
  outline: none;
}

/* 四角は左詰め。列の幅を最大レベル分に揃えるので、Lv の位置も行どうしで揃う */
.pips {
  display: flex;
  flex: none;
  width: calc(var(--pip-max, 7) * (var(--pip-size) + var(--pip-gap)));
}

/* 四角はボタン。見た目の四角（::before）より押せる範囲を広く取り、隣との間にすき間を作らない */
.pip {
  display: grid;
  place-items: center start;
  width: calc(var(--pip-size) + var(--pip-gap));
  height: calc(var(--pip-size) + 0.4em);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.pip::before {
  content: "";
  box-sizing: border-box;
  width: var(--pip-size);
  height: var(--pip-size);
  border: 1px solid var(--pip-border);
  border-radius: 2px;
  background: var(--pip-empty);
}

/* ---- スキルのプルダウン（skill-dropdown.js。護石チェッカーとマイ護石の登録欄のスキル欄） ---- */

/*
 * ボタンは、ふつうの選択欄（select）と同じ枠と高さにし、右端に ▼ を付ける。押すと、ボタンの下に、位置の基準の内側いっぱいの一覧が
 * 重なって開く（位置の基準は、護石チェッカーでは .charm-check-page（charm-check.css）、マイ護石の欄では .custom-charms-card
 * （custom-charms.css））。一覧は、「発動させたいスキル」の一覧のように、カテゴリーのまとまりの中にスキルのボタンを横に並べ、
 * まとまりは広い画面では 3 列に詰めて並べる（なるべくスクロールせずに全体が見えるように。入りきらなければ、一覧の中でスクロールする）
 */

.skill-dropdown-button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 4px 28px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  position: relative;
}

.skill-dropdown-button::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}

.skill-dropdown-button[aria-expanded="true"] {
  border-color: var(--accent);
}

/* ボタンと「×」の入れ物。「×」をボタンの右寄り（▼ の左）に重ねる（一覧の位置の基準にはしない） */
.skill-dropdown-control {
  position: relative;
}

/* スキルを選んでいるときは、「×」と区切りの線の分だけボタンの右を空ける（スキル名が「×」の下に入り込まないように） */
.skill-dropdown-control:has(.skill-dropdown-clear:not([hidden])) .skill-dropdown-button {
  padding-right: 80px;
}

/*
 * スキルを外す「×」。マイセット・マイ護石の削除の「×」（buttons.css の .delete-x）と同じ大きさにし、押しやすいよう丸い範囲を取る。
 * 一覧を開く ▼ と押し間違えないよう、▼ から離して置き、あいだに縦の区切りの線を引く（ユーザーの指示。線より右と、
 * 「×」の外は、今までどおり一覧を開く）
 */
.skill-dropdown-clear {
  position: absolute;
  top: 50%;
  right: 44px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

/* 「×」と ▼ のあいだの縦の区切りの線（「×」の右 8px。▼ の側の押せる範囲が分かるように） */
.skill-dropdown-clear::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: -8px;
  border-left: 1px solid var(--border);
  pointer-events: none;
}

.skill-dropdown-clear[hidden] {
  display: none;
}

.skill-dropdown-clear:hover {
  background: var(--border);
  color: var(--text);
}

.skill-dropdown-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.skill-dropdown-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-dropdown-text.empty {
  color: var(--muted);
}

/* 一覧の上下の位置はボタンのすぐ下（top を決めないので、ボタンの次の位置に置かれる）、左右は位置の基準の内側いっぱい */
.skill-dropdown-list {
  position: absolute;
  z-index: 20;
  left: 16px;
  right: 16px;
  margin-top: 4px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 6px 10px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
}

/* 絞り込みの入力欄（一覧の中でスクロールしても、上に残る） */
.skill-dropdown-search {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: -6px 0 0;
  padding: 6px 0 4px;
  background: var(--surface);
}

.skill-dropdown-filter {
  width: 100%;
}

.skill-dropdown-empty {
  margin: 4px 2px 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* 種類（武器スキル・防具スキル）の見出し。押せない */
.skill-dropdown-kind {
  margin: 4px 0 3px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* カテゴリーのまとまりを、広い画面では 3 列（狭くなるにつれて 2 列・1 列）に詰めて並べる。まとまりは列の途中で分けない */
.skill-dropdown-columns {
  columns: 3 260px;
  column-gap: 8px;
}

/*
 * カテゴリーのまとまり。背景は、そのカテゴリーのアイコンの色（.icon-<種類> の --icon-color）を地の色に薄く混ぜたもの
 * （見出しは少し濃く。武器の一覧のレア度の色（base.css の .rarity-group）と同じ割合）
 */
.skill-dropdown-group {
  break-inside: avoid;
  margin-bottom: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--icon-color) 20%, var(--surface));
}

.skill-dropdown-category {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--icon-color) 40%, var(--surface));
  font-size: 0.8rem;
  font-weight: 700;
}

.skill-dropdown-options {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
}

/* スキルのボタン（シミュレーターのスキルの一覧の .skill-button と同じ形。アイコンは付けない） */
.skill-dropdown-option {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}

.skill-dropdown-option:hover {
  border-color: var(--accent);
}

/* 「なし」は、一覧の先頭に 1 つだけ（カテゴリーの外） */
.skill-dropdown-listbox > .skill-dropdown-option {
  color: var(--muted);
}

/* ほかのスキル欄で選んでいるスキル（選べない） */
.skill-dropdown-option.taken {
  opacity: 0.35;
  cursor: not-allowed;
}

.skill-dropdown-option.taken:hover {
  border-color: var(--border);
}

/* マウスやキーボードで指している選択肢（枠を太くする）と、選んでいる選択肢（強調の色と太字） */
.skill-dropdown-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.skill-dropdown-option[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}