/*
 * 図鑑「全種族×全個体」(js/superSpeciesCompare.js)のスタイル。
 * 色はページ側の:root / css/tokens.css の変数に依存する
 * (individualCompare.css と同じ方針。pokedex.html 以外での再利用は想定しない)。
 */
.ssc-tool{ padding:12px 0 0; }

/* ---- 見出し ---- */
.ssc-hero{ margin-bottom:12px; }
.ssc-kicker{
  display:inline-block;
  font-size:var(--fs-2xs);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin-bottom:2px;
}
.ssc-hero h2{
  margin:0;
  font-size:var(--fs-lg);
  color:var(--ink);
}
.ssc-hero p{
  margin:4px 0 0;
  font-size:var(--fs-xs);
  line-height:1.7;
  color:var(--ink-soft);
}

/* ---- 操作カード ---- */
.ssc-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.ssc-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 14px;
  margin-bottom:12px;
}
.ssc-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.ssc-field-wide{ flex-basis:100%; }
.ssc-field-target{ flex:1 1 200px; }
.ssc-field-level{ width:5.5em; }
.ssc-label{
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.ssc-field select,
.ssc-field input[type="number"],
.ssc-field input[type="text"]{
  font:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  width:100%;
}

/* 食材の比較対象は、食材タブと同じアイコン付きピルで選ぶ。 */
.ssc-ingredient-chips{
  width:100%;
  margin:0;
}

/* 好みのきのみは折りたたみ見出しをカードの左端に揃える。 */
.ssc-card .cmp-favorite-berry-details{
  align-self:stretch;
  margin:0 0 10px;
}

/* セグメント切り替え(役割・おてボ評価・表示切替) */
.ssc-segmented{
  display:inline-flex;
  align-self:flex-start;
  flex-wrap:wrap;
  gap:4px;
  padding:3px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
}
.ssc-segmented button{
  box-sizing:border-box;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  padding:5px 12px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:var(--radius-pill);
  color:var(--ink-soft);
  cursor:pointer;
}
.ssc-segmented button.active{
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}

.ssc-level-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ssc-level-row{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:10px 14px;
}
.ssc-level-checks{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
}
.ssc-level-quick{
  display:inline-flex;
  gap:4px;
}
.ssc-level-quick button{
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.ssc-level-quick button:hover{ background:var(--paper-dim); }

.ssc-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
}
.ssc-controls [hidden]{ display:none; }

/* ---- きのみ選択(複数選択可、きのみガチャのチップ選択を参考) ---- */
.ssc-berry-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.ssc-berry-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
  cursor:pointer;
}
.ssc-berry-chip.active{
  background:var(--paper);
  border-color:var(--navy);
  box-shadow:0 0 0 2px var(--navy) inset;
}
.ssc-berry-chip-icon{ position:relative; display:inline-block; line-height:0; }
.ssc-berry-chip-icon > img{ width:26px; height:26px; object-fit:contain; }
.ssc-berry-chip-icon > img.ssc-berry-chip-type{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--paper);
  box-shadow:0 0 0 1px var(--line);
}

.ssc-run{
  flex:1 1 100%;
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  padding:10px 16px;
  border:1px solid var(--success);
  border-radius:var(--radius-pill);
  background:var(--success);
  color:#fff;
  cursor:pointer;
}
.ssc-run:disabled{ opacity:.55; cursor:default; }

/* ---- 比較個体を検索 ----
   個体入力はおてつだいシミュの個体ボード(js/individualCompare.jsのcreateBoard、
   css/individualCompare.cssの.cmp-board系)をそのまま流用する。ニックネーム・
   保存/呼び出し・いつ育・おやすみリボン・スキルレベル・スキル設定は、この検索
   専用ボードでは使わないため、このカードの中でだけ非表示にする。 */
.ssc-search{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:12px;
  padding:0;
  overflow:hidden;
}
.ssc-search [hidden]{ display:none; }
.ssc-search-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 14px;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
}
.ssc-search-toggle-chevron{ color:var(--ink-soft); font-size:var(--fs-xs); }
.ssc-search-preview{
  padding:0 14px 12px;
  cursor:pointer;
}
.ssc-search-preview-empty{
  margin:0;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.ssc-search-preview-table{ width:auto; }
.ssc-search-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 14px 14px;
}
.ssc-search-board .cmp-board{
  width:100%;
  flex:none;
  min-width:0;
}
.ssc-search-board .cmp-board-head,
.ssc-search-board .cmp-checkbox-stack,
.ssc-search-board [data-party-field]{
  display:none;
}
.ssc-search-board .cmp-field:has([data-nickname]),
.ssc-search-board .cmp-field:has([data-skill-level]){
  display:none;
}
.ssc-search-status{
  margin:0;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.ssc-rank-mode{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
}
.ssc-rank-mode .ssc-label{ flex:0 0 auto; }

/* ---- 結果 ---- */
.ssc-results-head{ margin-bottom:10px; }
.ssc-results-head h3{
  margin:0;
  font-size:var(--fs-md);
  color:var(--ink);
}
.ssc-results-head p{
  margin:3px 0 0;
  font-size:var(--fs-2xs);
  line-height:1.6;
  color:var(--ink-soft);
}

.ssc-loading{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 4px;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.ssc-loading span{
  width:14px;
  height:14px;
  border:2px solid var(--line);
  border-top-color:var(--ink-soft);
  border-radius:50%;
  animation:ssc-spin .8s linear infinite;
}
@keyframes ssc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ssc-loading span{ animation:none; }
}
.ssc-empty{
  padding:16px 4px;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}
.ssc-limit-note{
  margin:6px 0 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}

/* ---- 全個体テーブル(サブスキル・性格の見せ方はボックスの表を流用) ---- */
.ssc-tablewrap{
  overflow:auto;
  max-height:72vh;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  -webkit-overflow-scrolling:touch;
}
.ssc-table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  font-size:var(--fs-2xs);
  background:var(--paper);
}
.ssc-table th,
.ssc-table td{
  padding:5px 6px;
  border-bottom:1px solid var(--line);
  text-align:center;
  white-space:nowrap;
}
.ssc-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-weight:700;
}
.ssc-table tbody tr:last-child td{ border-bottom:none; }

.ssc-th-rank, .ssc-td-rank{ width:2.4em; color:var(--ink-soft); }
.ssc-td-rank{ font-weight:700; }
.ssc-th-specialty, .ssc-td-specialty{ width:3.6em; }
.ssc-th-icon, .ssc-td-icon{ width:34px; }
.ssc-td-icon img{ width:26px; height:26px; object-fit:contain; vertical-align:middle; }
.ssc-th-name, .ssc-td-name{
  text-align:left;
  width:6ch;
  max-width:6ch;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ssc-td-name{ font-weight:600; color:var(--ink); }
.ssc-th-food, .ssc-td-food{ text-align:left; color:var(--ink-soft); }
.ssc-food-icons{ display:inline-flex; gap:2px; vertical-align:middle; }
.ssc-food-icon{ width:18px; height:18px; object-fit:contain; }
.ssc-th-sub{ width:26px; }
.ssc-th-sub svg{ width:15px; height:15px; vertical-align:middle; }
.ssc-td-sub{ width:26px; }
.ssc-table .cmp-skill-icon{ display:inline-flex; vertical-align:middle; }
.ssc-th-nat-up{ color:var(--danger); }
.ssc-th-nat-down{ color:var(--info); }
.ssc-th-val, .ssc-td-val{ text-align:right; }
.ssc-td-val{
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.ssc-specialty{
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  border:1px solid currentColor;
  border-radius:var(--radius-pill);
  padding:0 5px;
}
.ssc-specialty-きのみ{ color:#3E8E5A; }
.ssc-specialty-食材{ color:#C07A18; }
.ssc-specialty-スキル{ color:#5A6BC4; }
.ssc-specialty-オール{ color:#A0559E; }
:root[data-theme="dark"] .ssc-specialty-きのみ,
:root[data-theme="dark-blue"] .ssc-specialty-きのみ{ color:#6FD59A; }
:root[data-theme="dark"] .ssc-specialty-食材,
:root[data-theme="dark-blue"] .ssc-specialty-食材{ color:#E8B75A; }
:root[data-theme="dark"] .ssc-specialty-スキル,
:root[data-theme="dark-blue"] .ssc-specialty-スキル{ color:#93A6F0; }
:root[data-theme="dark"] .ssc-specialty-オール,
:root[data-theme="dark-blue"] .ssc-specialty-オール{ color:#D08BCE; }