/* きのみ効率(図鑑)のスタイル。色は図鑑ページ側で定義済みのCSS変数を使う。 */
.be-tool{
  width:100%;
  max-width:var(--content-max, 900px);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
}
#panel-berry > .tab-intro{
  width:100%;
  max-width:var(--content-max, 900px);
  margin-inline:auto;
  padding-inline:16px;
}
.be-energy-row{ display:flex; flex-wrap:wrap; gap:8px; }
.be-sim-condition-host{ min-width:0; }
.be-sim-condition-host > .cmp-sim-card{ margin:0; }
.be-card{
  /* min-width:0 が無いと、中の overflow-x:auto な数式行が
     カード自体を押し広げてページごと横スクロールしてしまう */
  min-width:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
}
.be-card h2{
  margin:0 0 6px;
  font-size:.95rem;
  color:var(--navy);
}
.be-note{
  margin:0;
  font-size:.72rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.be-formula{
  margin:8px 0 0;
  padding:8px 10px;
  background:var(--paper-dim);
  border-radius:10px;
  font-size:.72rem;
  line-height:1.6;
  color:var(--navy);
  font-weight:700;
  overflow-x:auto;
  white-space:nowrap;
}
.be-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.be-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.be-filter{
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-soft);
  border-radius:999px;
  padding:4px 12px;
  font-size:.74rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
}
.be-filter.active{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--paper);
}
.be-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.be-search input[type="text"]{
  flex:1;
  min-width:0;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
}
/* ---- 名前検索の候補ドロップダウン(シミュ「個体比較」のポケモン選択と同じ見た目) ----
   絞り込みはせず、選ぶとその行までスクロール+点滅するだけ(js/berryEfficiency.js) */
.be-search-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 3px);
  left:0;
  right:0;
  z-index:9;
  max-height:230px;
  overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:3px;
}
.be-search-dropdown.show{ display:block; }
.be-search-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 5px;
  border-radius:7px;
  cursor:pointer;
}
.be-search-row:hover{ background:var(--paper-dim); }
.be-search-row img{ width:22px; height:22px; object-fit:contain; flex:none; }
.be-search-row span{
  font-size:var(--fs-2xs);
  color:var(--ink);
}
.be-search-empty{
  padding:8px 6px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  text-align:center;
}
.be-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.74rem;
  color:var(--ink-soft);
  cursor:pointer;
}
.be-itsuiku-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.be-itsuiku-check{
  box-sizing:border-box;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.be-itsuiku-check input[type="checkbox"]{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--selected-strong-border);
  cursor:pointer;
}
.be-itsuiku-check.active{
  border:3px solid var(--selected-strong-border);
  padding:3px 7px;
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.be-count{
  font-size:.72rem;
  color:var(--ink-soft);
  font-weight:700;
}

/* ---- レベル入力+クイックボタン。ラベルを上、入力+ボタンを下の行にして、
   ボタン列が数値入力の隣(同じ行)に収まる横幅を確保する ---- */
.be-level-field{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.be-level-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.be-level-input{
  flex:0 0 60px;
  min-width:0;
  padding:6px 4px;
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  font-weight:700;
  text-align:center;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:8px;
}
.be-level-quick{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
.be-level-quick button{
  flex:none;
  min-width:34px;
  height:30px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:.76rem;
  font-weight:700;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
}
.be-level-quick button:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}

/* ---- 「きのみの数S」あり/なしトグル ---- */
.be-toggle2{
  display:inline-flex;
  gap:4px;
  padding:3px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:999px;
}
.be-toggle2-btn{
  border:1.5px solid transparent;
  background:transparent;
  border-radius:999px;
  padding:4px 12px;
  font-family:inherit;
  font-size:.74rem;
  font-weight:700;
  cursor:pointer;
  color:var(--ink-soft);
}
.be-toggle2-btn.be-toggle2-on.active{
  background:#F8E479;
  border-color:#E4A745;
  color:#20243B;
}
.be-toggle2-btn.be-toggle2-off.active{
  background:var(--line);
  border-color:var(--line);
  color:var(--ink-soft);
}

/* ---- おやすみリボンの段階ステッパー(プルダウンの代わりに−/＋でスムーズに切り替える) ---- */
.be-ribbon-field{
  display:flex;
  align-items:center;
  gap:8px;
}
.be-ribbon-stepper{
  display:flex;
  align-items:center;
  gap:6px;
}
.be-ribbon-stepper button{
  width:26px;
  height:26px;
  flex:none;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink);
  font:inherit;
  font-size:.85rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.be-ribbon-stepper button:active{ background:var(--selected-bg); color:var(--selected-ink); }
.be-ribbon-stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.be-ribbon-val{
  min-width:4.4em;
  text-align:center;
  font-size:.78rem;
  font-weight:800;
  color:var(--ink);
}

/* ---- 2種類の値の色分け ----
   きのみ100%(pure)と通常おてつだい(normal)を、順位・数値・バーで同じ色に統一している。 */
.be-tool{
  --be-pure:#3B63C4;
  --be-normal:#C07A18;
}
:root[data-theme="dark"] .be-tool,
:root[data-theme="dark-blue"] .be-tool{
  --be-pure:#8FA9F0;
  --be-normal:#E8B75A;
}
.be-k-pure{ color:var(--be-pure); }
.be-k-normal{ color:var(--be-normal); }

.be-sortrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.be-sortlabel{
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-soft);
}

.be-list{
  display:flex;
  flex-direction:column;
}
.be-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 0;
  border-top:1px solid var(--line);
  /* 並べ替え時のFLIPアニメーションはJS側でtransformを付け外しする */
  will-change:transform;
}
.be-row:first-child{ border-top:none; }
/* 名前検索で選んだ行を一時的に点滅させる(js/searchHit.jsのflashHitが付け外しするクラス) */
.be-row.search-highlight{ background-color:var(--moon-soft); transition:background-color .5s ease; }
/* 順位は上下2段。行ごとのいつ育オプションで選んだ方だけ大きく濃く出す */
.be-rank{
  flex:none;
  width:26px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.be-rank span{
  font-size:.62rem;
  font-weight:700;
  opacity:.55;
}
.be-rank span.is-key{
  font-size:.82rem;
  font-weight:800;
  opacity:1;
}
.be-icon-wrap{
  position:relative;
  flex:none;
}
.be-icon{
  display:block;
  flex:none;
  width:34px;height:34px;
  object-fit:contain;
  background:var(--paper-dim);
  border-radius:8px;
}
/* おやすみリボンが実際に効いている個体だけ、アイコン右下に段階アイコンのバッジを付ける */
.be-ribbon-badge{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:16px;
  height:16px;
  object-fit:contain;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  padding:1px;
}
.be-main{
  flex:1;
  min-width:0;
}
.be-name-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.be-name{
  font-size:.8rem;
  font-weight:700;
  color:var(--navy);
}
/* とくいのバッジ。絞り込みボタンと同じ色分けにする */
.be-sp{
  font-size:.62rem;
  font-weight:700;
  border-radius:999px;
  padding:1px 7px;
  border:1px solid currentColor;
}
.be-sp-きのみ{ color:#3E8E5A; }
.be-sp-食材{ color:#C07A18; }
.be-sp-スキル{ color:#5A6BC4; }
.be-sp-オール{ color:#A0559E; }
/* ダークモードでは暗い文字色だとバッジが沈むので、明るい方に振る
   (塗りつぶしの絞り込みボタンは白文字なのでそのままでよい) */
:root[data-theme="dark"] .be-sp-きのみ,
:root[data-theme="dark-blue"] .be-sp-きのみ{ color:#6FD59A; }
:root[data-theme="dark"] .be-sp-食材,
:root[data-theme="dark-blue"] .be-sp-食材{ color:#E8B75A; }
:root[data-theme="dark"] .be-sp-スキル,
:root[data-theme="dark-blue"] .be-sp-スキル{ color:#93A6F0; }
:root[data-theme="dark"] .be-sp-オール,
:root[data-theme="dark-blue"] .be-sp-オール{ color:#D08BCE; }
.be-filter.be-sp-きのみ.active{ background:#3E8E5A; border-color:#3E8E5A; }
.be-filter.be-sp-食材.active{ background:#C07A18; border-color:#C07A18; }
.be-filter.be-sp-スキル.active{ background:#5A6BC4; border-color:#5A6BC4; }
.be-filter.be-sp-オール.active{ background:#A0559E; border-color:#A0559E; }
.be-filter.active{ color:#fff; }
.be-meta{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:.66rem;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.be-berry{
  flex:none;
  width:16px;
  height:16px;
  object-fit:contain;
}
.be-skill-note-row{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
}
.be-skill-note{
  font-size:.6rem;
  line-height:1.4;
  color:var(--ink-soft);
}
.be-special-info{
  flex:none;
  min-width:22px;
  height:20px;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:.62rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
}
.be-special-info:hover{ border-color:var(--navy); color:var(--navy); }
.be-special-modal .modal-card{ max-width:min(94vw, 440px); }
.be-special-modal-title{
  margin:0 0 8px;
  padding-right:24px;
  color:var(--ink);
  font-size:var(--fs-md);
  font-weight:800;
}
.be-special-modal-note{
  margin:0 0 12px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.55;
}
.be-special-list{ display:flex; flex-direction:column; gap:7px; }
.be-special-item{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-dim);
}
.be-special-item > img{
  flex:none;
  width:34px;
  height:34px;
  object-fit:contain;
}
.be-special-item-text{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap:1px;
  color:var(--ink);
  font-size:var(--fs-2xs);
}
.be-special-item-text strong,
.be-special-item-text span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.be-special-item-text strong{ font-weight:800; }
.be-special-item-text > span{ color:var(--ink-soft); }
.be-special-item-summary{ font-size:.64rem; }
.be-special-edit{
  flex:none;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
}
.be-special-edit:hover{ background:var(--selected-bg); }
.be-special-empty{
  margin:0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.6;
}
/* 既存シミュの個体ボードを特殊スキル設定モーダルのホストとして再利用する。
   ボード本体は画面外に置き、内側のfixedモーダルだけを表示する。 */
.be-special-settings-host{
  position:absolute !important;
  left:-10000px !important;
  top:0 !important;
  width:1px !important;
  min-height:1px !important;
  overflow:visible !important;
}
.be-skill{
  flex:none;
  color:var(--be-normal);
  font-weight:700;
}

/* タイプ絞り込み。出現フィールド早見表と同じ考え方で、
   何も選んでいない間は全部そのまま、1つでも選んだら未選択を沈める */
.be-types{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.be-type{
  flex:none;
  width:30px;
  height:30px;
  padding:0;
  border:2px solid transparent;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  line-height:0;
  transition:opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.be-type img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.be-types.has-selection .be-type{ opacity:.34; }
.be-types.has-selection .be-type.active{ opacity:1; }
.be-type.active{
  border-color:var(--navy);
  transform:scale(1.06);
}
/* バーは2本を同じ物差しで縦に並べる。下は通常おてつだい(きのみ+スキル) */
.be-bars{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.be-bar{
  position:relative;
  height:5px;
  border-radius:999px;
  background:var(--paper-dim);
  overflow:hidden;
}
.be-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:currentColor;
}
/* 通常側がきのみ100%に届かないときの差分 */
.be-lost{
  position:absolute;
  top:0;
  bottom:0;
  border-radius:999px;
  background:repeating-linear-gradient(
    -45deg,
    rgba(200,85,61,.42) 0 2px,
    rgba(200,85,61,.12) 2px 4px
  );
}
.be-val{
  flex:none;
  min-width:58px;
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
/* 数値も順位と同じで、行ごとのいつ育オプションで選んだ方を大きく濃く */
.be-val > span{
  font-size:.66rem;
  font-weight:700;
  opacity:.6;
}
.be-val > span.is-key{
  font-size:.92rem;
  font-weight:800;
  opacity:1;
}
/* きのみ100%との差分 */
.be-val .be-drop{
  color:#C8553D;
  font-size:.55rem;
  font-weight:700;
  opacity:1;
  white-space:nowrap;
}
:root[data-theme="dark"] .be-val .be-drop,
:root[data-theme="dark-blue"] .be-val .be-drop{ color:#F0907A; }
.be-empty{
  margin:12px 0;
  font-size:.78rem;
  color:var(--ink-soft);
}