/*
 * 個体比較(シミュ)のスタイル。色はページ側の:root(--navy/--paper/--line/--ink等)に依存する
 * (baseSpeedCalc.cssと同じ方針。このツールはsimulator.html以外での再利用を想定しないため、
 * ingredientCalc.css/expCalculator.cssのようなローカル変数の再マップ層は作らない)。
 *
 * 個体ごとの識別色(枠の縁取り・バッジ・グラフのアイコンラベル)は、js/individualCompare.jsの
 * INDIVIDUAL_COLORSがJSから直接インラインstyleで設定する(テーマに応じて反転しない固定色)。
 */
.cmp-tool{ padding:12px 0 0; }
.cmp-max-note{
  margin:0 0 8px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-max-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-bottom:8px;
}
.cmp-max-row .cmp-max-note{
  flex:1 1 auto;
  margin:0;
}
.cmp-skill-log-btn{
  flex:none;
  min-height:38px;
  padding-right:10px;
  padding-left:10px;
  font-size:var(--fs-xs);
}
.cmp-skill-log-btn[hidden]{ display:none; }

/* ---- パターン(1・2・3…)切り替えタブ。料理タブ「備蓄」(css/ingredientStock.cssの
   stock-pattern-*)と同じ見た目・考え方で、比較する個体の組み合わせをまるごと
   複数パターン保存し、タブで切り替えられるようにする。 ---- */
.cmp-pattern-bar{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:0 0 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cmp-pattern-tabs{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex:1 1 auto;
  min-width:0;
  padding-top:9px;
}
.cmp-pattern-tab{ position:relative; flex:none; }
.cmp-pattern-tab-select{
  display:flex;
  align-items:center;
  gap:4px;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:5px 32px;
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:8px 8px 0 0;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  max-width:48vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmp-pattern-tab-select:hover{ background:var(--paper); }
.cmp-pattern-tab.active .cmp-pattern-tab-select{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--navy);
}
.cmp-pattern-tab-dot{
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
}
.cmp-pattern-tab-del,
.cmp-pattern-tab-dup{
  position:absolute;
  top:-7px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border-radius:50%;
  font-size:11px;
  line-height:1;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--line);
  cursor:pointer;
}
.cmp-pattern-tab-dup{ left:-7px; }
.cmp-pattern-tab-del{ right:-7px; }
.cmp-pattern-tab-del:hover,
.cmp-pattern-tab-dup:hover{ color:var(--ink); border-color:var(--navy); }
/* display:flexを明示しているため、[hidden]の既定display:noneが負けてしまう
   (.cmp-pattern-addと同じ理由でガードが必要)。 */
.cmp-pattern-tab-dup[hidden]{ display:none; }
.cmp-pattern-add{
  flex:none;
  width:28px;
  height:28px;
  margin-bottom:1px;
  border-radius:8px 8px 0 0;
  border:1px dashed var(--line);
  border-bottom:none;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.cmp-pattern-add:hover{ background:var(--paper); color:var(--ink); }
.cmp-pattern-add[hidden]{ display:none; }
.cmp-pattern-name-input{
  width:100%;
  padding:8px 10px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  text-align:center;
}
.cmp-pattern-colors{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-bottom:16px;
}
.cmp-pattern-color-swatch{
  width:26px;
  height:26px;
  padding:0;
  border-radius:50%;
  border:2px solid var(--line);
  cursor:pointer;
}
.cmp-pattern-color-swatch.is-none{
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:12px;
  line-height:1;
}
.cmp-pattern-color-swatch.active{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

/* ---- 共通設定への入り口カード(おてつだいボーナスの評価・シミュレーション条件)。
   タップするとモーダルが開く。他の結果カード(.cmp-graph/.cmp-skill-energy-card等)と
   同じ「--paper地+細い枠線」のフラットな見た目に揃える(案内文は出さない。カード自体が
   タップ対象であることはカーソル・押下フィードバックで示す) ---- */
.cmp-sim-card{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
  font-size:var(--fs-xs);
  line-height:1.9;
  cursor:pointer;
  transition:background .15s ease;
}
.cmp-sim-card:active{ background:var(--paper-dim); }
.cmp-sim-card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cmp-sim-card-title-row .setting-pin.is-toggle{ margin-left:auto; }
.cmp-sim-card-title{ display:flex; align-items:center; gap:6px; min-width:0; }
.cmp-sim-cond-card-reset{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-sim-cond-card-reset:active{ background:var(--paper-dim); }
/* フィールドプリセット選択中に、詳細設定の「好みのきのみ」欄から直接内容を上書きした状態
   (プリセットが暗黙に想定する内容とズレていることを示す) */
.cmp-sim-card.is-overridden{
  border:2px solid var(--danger);
  padding:11px 13px;
}
/* ---- シミュレーション条件バナー(カードが画面外(上)へ出たら追従表示。.tab-bar(sticky)の
   すぐ下にJSでtopを合わせる) ---- */
.cmp-sim-banner{
  position:fixed;
  left:0;
  right:0;
  z-index:19;
  display:none;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  cursor:pointer;
}
.cmp-sim-banner.show{ display:block; }
.cmp-sim-banner.is-overridden{ border-bottom:2px solid var(--danger); }
.cmp-sim-banner-line{
  max-width:var(--content-max, 900px);
  margin:0 auto;
  padding:6px 16px;
}
.cmp-sim-card-title{
  font-weight:700;
  color:var(--ink);
  margin-bottom:2px;
}
/* シミュレーション条件の1行サマリー。アイコン主体で、はみ出す場合は横スクロール
   (折り返さず必ず1行に収める)。値が既定(なし)の項目は要素ごと出さない
   (いいキャンプチケットだけは常時表示、状態をON/OFFの見た目で示す)。 */
.cmp-sim-cond-line{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 2px;
}
.cmp-sim-icon-wrap{
  position:relative;
  flex:none;
  width:26px;
  height:26px;
  display:flex;
}
.cmp-sim-icon-wrap img{ width:100%; height:100%; object-fit:contain; }
.cmp-sim-icon-wrap.is-off img{ filter:grayscale(1); opacity:.35; }
.cmp-sim-icon-wrap.is-off .cmp-sim-icon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:#c0392b;
}
.cmp-sim-berry-icon{ flex:none; width:22px; height:22px; object-fit:contain; }
/* 好みのきのみが4種以上のときの残数バッジ(先頭3種のアイコン+この数字で縮める) */
.cmp-sim-berry-more{
  flex:none;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-sim-chip{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px 4px 6px;
  white-space:nowrap;
}
.cmp-sim-icon{ width:14px; height:14px; flex:none; }
.cmp-sim-chip-flip .cmp-sim-icon{ transform:rotate(180deg); }
.cmp-giant-berry-icon{
  position:relative;
  display:inline-flex;
  flex:none;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
}
.cmp-giant-berry-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.cmp-giant-berry-label{
  position:absolute;
  left:-3px;
  bottom:-3px;
  padding:2px 4px;
  border:1px solid var(--paper);
  border-radius:999px;
  background:#E4578B;
  color:#fff;
  font-size:8px;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
}
.cmp-sim-chip-giant{ padding-left:4px; }
.cmp-sim-giant-berry-chip .cmp-sim-chip-giant{ width:20px; height:20px; }
/* フィールドプリセット選択中は、そのフィールドの写真を背景に敷いたチップをサマリーに出す */
.cmp-sim-chip[style*="background-image"]{ text-shadow:0 1px 2px rgba(0,0,0,.6); }
/* イベントプリセット選択中は、サムネ+タイトルの小さいチップをサマリー先頭に出す
   (横スクロール前提の1行なので、タイトルは幅を絞って...で省略する) */
.cmp-sim-event-chip{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 8px 2px 2px;
  max-width:140px;
}
.cmp-sim-event-chip-thumb{
  flex:none;
  width:22px;
  height:22px;
  border-radius:5px;
  object-fit:cover;
}
.cmp-sim-event-chip-title{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.cmp-sim-target{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:2px;
  padding-left:4px;
  border-left:1px solid var(--line);
}
.cmp-sim-target-sp{
  flex:none;
  width:14px;
  height:14px;
  border-radius:50%;
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:14px;
  text-align:center;
}
.cmp-sim-target-type{ flex:none; width:14px; height:14px; object-fit:contain; }
.cmp-sim-target-more{ font-size:9px; font-weight:700; color:var(--ink-soft); }
/* おてつだいボーナスの評価カードだけはオレンジ枠で目立たせる(既定の25%評価が
   実際のシミュレーションと異なりうることに気付いてほしいため) */
.cmp-otebo-card{
  border:2px solid var(--warning);
  background:var(--warning-bg);
  padding:8px 14px;
  line-height:1.3;
}
.cmp-otebo-card:active{ filter:brightness(.96); }
/* ラベルとプレビュートグルを1行に収める(タップして設定の案内文は不要。カード全体が
   タップ対象であることは枠色とトグルの見た目自体で示す) */
.cmp-otebo-card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cmp-otebo-team-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}
.cmp-otebo-team-row[hidden]{ display:none; }
.cmp-otebo-team-label{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.cmp-otebo-team-pills{ flex:none; }
.cmp-otebo-team-pills button{
  min-width:28px;
  padding:4px 8px;
  font-size:var(--fs-xs);
}
/* 現在の評価方法(5%/25%)をボタン風に見せるだけのプレビュー。
   実際の切り替えはモーダル内の.cmp-otebo-eval-segで行う(このボタン自体はtabindex=-1で、
   クリックはカード側のクリックにそのままバブルしてモーダルを開く) */
.cmp-otebo-eval-preview{ display:flex; flex:none; }
.cmp-otebo-eval-preview button{ font-size:var(--fs-xs); padding:6px 10px; pointer-events:none; }
/* シミュレーション条件モーダルの横幅を、共通シェル(overlay-modal .modal-card)より
   1.3倍ほど広く使う(条件が多く1行に収めたい要素があるため) */
.cmp-sim-cond-modal .modal-card{ max-width:clamp(416px, 71.5vw, 832px); }
/* いいキャンプチケットとフィールドボーナスは、横に並べて1行に収める(広げた横幅を活かす)。
   入らない画面幅では折り返す。キャンプチケットのラベルは短縮し、元の説明はtitleに残す */
.cmp-sim-cond-combo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
  margin-bottom:10px;
}
.cmp-sim-cond-combo-row .cmp-camp-ticket-row,
.cmp-sim-cond-combo-row .cmp-field-bonus-row{
  margin-bottom:0;
}
.cmp-otebo-modal-title{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  margin:0 0 10px;
  padding-right:24px;
}
/* ---- シミュレーション条件モーダルの見出し行(タイトル+全部リセット)。
   ×ボタン(position:absolute)と重ならないよう右側に余白を空ける ---- */
.cmp-sim-cond-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 30px 10px 0;
}
.cmp-sim-cond-modal-head .cmp-otebo-modal-title{ margin:0; }
.cmp-sim-cond-title-group{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.cmp-sim-cond-title-group .setting-pin.is-toggle{ margin-top:0; }
.cmp-sim-cond-modal-head .cmp-otebo-modal-title{ display:flex; align-items:center; gap:6px; }
.cmp-sim-cond-reset-all{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-sim-cond-reset-all:active{ background:var(--paper-dim); }
.cmp-otebo-modal-text{
  font-size:var(--fs-base);
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 10px;
}
.cmp-otebo-eval-seg{ display:flex; width:100%; }
.cmp-otebo-eval-seg button{ flex:1; font-size:var(--fs-md); font-weight:700; padding:10px 4px; }
.cmp-otebo-remember-row{ margin-top:14px; }
.cmp-checkbox-row.cmp-otebo-remember-row{ font-size:var(--fs-xs); }

/* ---- いいキャンプ道具(お手つだい時間÷1.2)のON/OFF。UIは料理レシピ一覧の
   いいキャンプチケットのトグルを参照(あり=緑、なし=灰色のsegmented)。
   共通設定として全個体・両モードに効かせる ---- */
.cmp-camp-ticket-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
/* ラベルはアイコンのみ(文字を省いて横幅を詰める)。名前・説明はtitleツールチップに残す */
.cmp-camp-ticket-icon{ flex:none; width:24px; height:24px; object-fit:contain; }
.cmp-camp-ticket-toggle button{ padding:4px 12px; font-size:var(--fs-2xs); }
.cmp-camp-ticket-toggle button.active[data-val="on"]{ background:#4C9A5A; color:#fff; }
.cmp-camp-ticket-toggle button.active[data-val="off"]{ background:var(--line); color:var(--ink-soft); }

/* ---- フィールドボーナス(内部的には100+X%として扱うが、表示は「X%」のみ。共通設定)。
   「%」は本体の数値より控えめに見せるため、少し小さく薄い色にする ---- */
.cmp-field-bonus-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  flex-wrap:wrap;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-field-bonus-label{
  font-size:var(--fs-2xs);
  font-weight:600;
  color:var(--ink-soft);
}
.cmp-field-bonus-fixed{
  font-size:var(--fs-2xs);
  font-weight:600;
  color:var(--ink-soft);
  opacity:.75;
}
.cmp-field-bonus-input{
  width:44px !important;
  flex:none;
  text-align:right;
}
/* ネイティブのスピンボタンは刻み幅(1)が左右の±5%ボタンと食い違うので隠す */
.cmp-field-bonus-input::-webkit-inner-spin-button,
.cmp-field-bonus-input::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cmp-field-bonus-input{ -moz-appearance:textfield; }
/* 狭い横幅でも収まるよう、±5%ボタンは入力欄の左右に1つずつ置く(上下積みにしない) */
.cmp-field-bonus-step{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-field-bonus-step:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}

/* ---- フィールドプリセット(共通設定)。フィールドの写真アイコンを押すと、その週の
   好きなきのみ(好みのきのみ)を一括反映する。EXフィールドはさらにメイン1種・週間ボーナスを選べる ---- */
.cmp-field-preset{ margin-bottom:10px; }
.cmp-field-preset-label{
  font-size:var(--fs-2xs);
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.cmp-field-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
/* 通常フィールドとEXフィールドの間で強制改行する(flexの折り返しトリック) */
.cmp-field-preset-break{
  flex-basis:100%;
  width:0;
  height:0;
}
.cmp-field-preset-btn{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.cmp-field-preset-btn.active{
  outline:2px solid var(--navy);
  outline-offset:1px;
}
.cmp-field-preset-clear{
  text-shadow:none;
  background:var(--paper);
  color:var(--navy);
}
.cmp-field-preset-detail{
  margin-top:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
}
.cmp-field-preset-note{
  margin:0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-field-preset-sub-label{
  font-size:var(--fs-2xs);
  font-weight:600;
  color:var(--ink-soft);
  margin:6px 0 4px;
}
.cmp-field-preset-sub-label:first-child{ margin-top:0; }
.cmp-field-preset-main-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
/* フィールドプリセット内の18種きのみ複数選択(通常ワカクサ本島・ワカクサ本島EXのサブ)。
   詳細設定側の.cmp-favorite-berry-btnをそのまま使い回すので、並びだけここで定義する */
.cmp-field-preset-berry-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cmp-field-preset-main-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:none;
  padding:0;
  border:2px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  cursor:pointer;
}
.cmp-field-preset-main-btn img{ width:20px; height:20px; object-fit:contain; }
.cmp-field-preset-main-btn.active{
  border-color:#E8A93C;
  background:#FFF6E0;
}
.cmp-field-preset-bonus-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cmp-field-preset-bonus-btn{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:4px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-field-preset-bonus-btn.active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}
/* 現在どのボーナスが計算に反映されているかを常時テキストで示す(選んだボタンの
   titleツールチップだけだとスマホで気付きにくく、反映有無が分かりづらいため) */
.cmp-field-preset-bonus-desc{
  margin:6px 0 0;
  font-size:var(--fs-2xs);
  color:var(--navy);
}

/* ---- イベントプリセット(共通設定)。過去/未来のイベントを選ぶと、自由記述のボーナス
   説明文からスキル/食材/おてスピの数値を自動で読み取り、下の「詳細設定」の値に反映する ---- */
.cmp-event-preset{ margin-bottom:10px; }
.cmp-event-preset-row{
  display:flex;
  align-items:center;
  gap:6px;
}
/* プルダウンではなくモーダルを開くトリガー(見た目だけselectに寄せる) */
.cmp-event-preset-trigger{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-width:0;
  font:inherit;
  font-size:var(--fs-xs);
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
}
.cmp-event-preset-trigger span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
}
.cmp-event-preset-trigger .cmp-sim-icon{ flex:none; color:var(--ink-soft); }
.cmp-event-preset-detail{ margin-top:8px; }

/* ---- 条件モーダル内、選んだイベントの要約(タイトル+反映内容だけ)。
   「詳しく見る」を押すとホームの簡易カレンダーと同じ詳細ポップアップ(.hc-detail-*)を開く ---- */
.cmp-event-preset-summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
}
.cmp-event-preset-summary-banner{
  flex:none;
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:6px;
}
.cmp-event-preset-summary-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cmp-event-preset-summary-title{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink);
}
.cmp-event-preset-summary-applied{
  font-size:var(--fs-2xs);
  color:var(--navy);
}
.cmp-event-preset-summary-more{
  align-self:flex-end;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:2px 0;
  cursor:pointer;
}

/* ---- イベント詳細ポップアップ(.hc-detail-*)。index.html(ホームの簡易カレンダー)・
   update-timeline.htmlの詳細ポップアップと同じクラス名・見た目にして、サイト内で
   見た目を統一する。CSSもそちらから流用(このページではjs/pickupTable.jsも読み込んで
   ピックアップ表を同じ組み立て方で出す)。 ---- */
.hc-detail-card{ text-align:left; }
.overlay-modal .hc-detail-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  max-width:clamp(320px, 85vw, 1700px);
  min-width:min(320px, 100%);
  width:fit-content;
}
.hc-detail-header{
  flex:none;
  padding-right:24px;
  padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.hc-detail-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
}
.hc-detail-banner{
  display:block;
  width:100%;
  max-width:440px;
  aspect-ratio:2.2/1;
  object-fit:cover;
  border-radius:var(--radius-md);
  margin-bottom:var(--sp-3);
  background:var(--paper-dim);
}
.hc-detail-when{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.hc-detail-title{
  font-size:var(--fs-lg);
  font-weight:800;
  color:var(--navy);
  margin:2px 0 0;
  max-width:640px;
}
.hc-detail-official-link{
  display:inline-block;
  color:var(--navy);
  text-decoration:underline;
}
.hc-detail-body{
  font-size:var(--fs-sm);
  color:var(--ink);
  line-height:1.6;
}
.hc-detail-body ul{
  max-width:640px;
  margin:0;
  padding-left:1.1em;
}
.hc-detail-body li{ margin-bottom:6px; }
.hc-detail-body li:last-child{ margin-bottom:0; }
.hc-detail-section-title{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--navy);
  margin:var(--sp-3) 0 6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
}
.hc-detail-table-group{ max-width:100%; margin-top:12px; }
.hc-detail-table-fold{ max-width:100%; margin-top:12px; }
.hc-detail-table-fold > summary{
  color:var(--ink-soft);
  cursor:pointer;
  font-size:var(--fs-xs);
  font-weight:700;
  list-style:none;
}
.hc-detail-table-fold > summary::-webkit-details-marker{ display:none; }
.hc-detail-table-fold > summary::before{
  content:'>';
  display:inline-block;
  width:1em;
  margin-right:4px;
  transition:transform .15s ease;
}
.hc-detail-table-fold[open] > summary::before{ transform:rotate(90deg); }
.hc-detail-table-fold > .hc-detail-table-wrap{ margin-top:6px; }
.hc-detail-table-title{
  margin:0 0 5px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.hc-detail-table-wrap{ max-width:100%; overflow-x:auto; }
.hc-detail-data-table{
  width:max-content;
  min-width:100%;
  border-collapse:collapse;
  font-size:var(--fs-xs);
  line-height:1.4;
}
.hc-detail-data-table th,
.hc-detail-data-table td{
  border:1px solid var(--line);
  padding:5px 7px;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
.hc-detail-data-table th{ background:var(--paper-dim); font-weight:700; color:var(--navy); }
.hc-detail-data-table td:nth-child(n+3){ text-align:right; }
.hc-detail-table-note{ margin:5px 0 0; color:var(--ink-soft); font-size:var(--fs-xs); }
.hc-detail-source{ margin:8px 0 0; color:var(--ink-soft); font-size:var(--fs-xs); }
.hc-detail-source a{ color:var(--navy); font-weight:700; text-decoration:underline; }
.hc-detail-icons, .hc-detail-candy{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:var(--sp-2);
}
.hc-detail-icons img, .hc-detail-candy img{
  width:32px;
  height:32px;
  object-fit:contain;
  background:var(--paper-dim);
  border-radius:8px;
  border:1px solid var(--line);
}
.hc-detail-candy-name{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink);
}

/* ---- イベントプリセットの選択モーダル(バナー付きリスト) ---- */
.cmp-event-preset-modal .modal-card{
  max-width:min(94vw, 520px);
  max-height:min(86vh, 640px);
  overflow:auto;
}
.cmp-event-preset-filter{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.cmp-event-preset-filter-select{
  flex:1;
  font:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  padding:5px 6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.cmp-event-preset-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cmp-event-preset-item{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.cmp-event-preset-item[hidden]{ display:none; }
.cmp-event-preset-item:active{ background:var(--paper-dim); }
.cmp-event-preset-item-banner{
  display:block;
  width:64px;
  height:64px;
  flex:none;
  object-fit:cover;
}
.cmp-event-preset-item-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:6px 10px;
  min-width:0;
}
.cmp-event-preset-item-title{
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.cmp-event-preset-item-period{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}

/* ---- 高度な設定(フィールド/イベントプリセット・いいキャンプチケット・フィールドボーナス)の
   OFF/ONトグル。既定OFFで条件モーダルをシンプルに保ち、ONで詳細な項目を表示する ---- */
.cmp-advanced-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.cmp-advanced-toggle-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink);
}
.cmp-advanced-toggle button{ padding:4px 14px; font-size:var(--fs-2xs); }
.cmp-advanced-toggle button.active[data-val="on"]{ background:#4C9A5A; color:#fff; }
.cmp-advanced-toggle button.active[data-val="off"]{ background:var(--line); color:var(--ink-soft); }
.cmp-advanced-toggle-body[hidden]{ display:none; }

/* ---- 詳細設定(好みのきのみ・イベント/EXボーナスをまとめて畳む) ---- */
.cmp-advanced-details{ margin-bottom:10px; }
.cmp-advanced-details > summary{ font-weight:700; }
.cmp-advanced-details .cmp-favorite-berry-details,
.cmp-advanced-details .cmp-event-bonus-details{ margin-top:10px; }

/* ---- 好みのきのみ(複数選択可。共通設定) ---- */
.cmp-favorite-berry-details{ margin-bottom:10px; }
.cmp-favorite-berry-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.cmp-favorite-berry-action{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--navy);
  cursor:pointer;
}
.cmp-favorite-berry-action.active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}
.cmp-favorite-berry-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
/* アイコンのみ(文字ラベル無し)。図鑑「きのみ効率」タブのタイプ絞り込み(.be-type)と
   同じ丸アイコンボタンの見た目に揃える */
.cmp-favorite-berry-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:none;
  padding:0;
  border:2px solid var(--line);
  border-radius:50%;
  background:var(--paper-dim);
  cursor:pointer;
}
.cmp-favorite-berry-btn img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:none;
}
.cmp-favorite-berry-btn.active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}

/* ---- イベントボーナス(共通設定)。4種類それぞれに数値入力+対象(とくい/タイプ)の
   絞り込みを持つ。絞り込みUIは図鑑「きのみ効率」タブと同じbe-filters/be-typesを流用する
   (css/berryEfficiency.cssが個体比較と同じページに読み込まれているため) ---- */
.cmp-event-bonus-details{ margin-bottom:10px; }
.cmp-event-bonus-row{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.cmp-event-bonus-row:first-of-type{ margin-top:8px; border-top:none; padding-top:0; }
.cmp-event-bonus-label{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-event-bonus-input{
  width:56px !important;
  flex:none;
  text-align:right;
}
.cmp-event-bonus-quick{
  display:inline-flex;
  gap:4px;
  margin-left:4px;
}
.cmp-event-bonus-quick button{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-event-bonus-quick button:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}
/* おてスピ短縮・遅延のEXフィールド画像入りクイックボタン。数字は白文字+影で、
   写真の明暗によらず読めるようにする */
.cmp-event-bonus-quick-field{
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.cmp-event-target{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
/* display:flexがhidden属性の既定display:noneを上書きしてしまうため、明示的に上書きし直す */
.cmp-event-target[hidden]{ display:none; }
/* EXフィールドのボーナス(きのみ/食材/スキル)がこの欄の数値と別枠で計算に反映されている旨を
   示す注記(cmp-field-preset-bonus-descと同じ見た目)。表示するときだけJS側でhiddenを外す */
.cmp-event-bonus-ex-note{
  margin-top:6px;
  font-size:var(--fs-2xs);
  color:var(--navy);
}
/* とてもおおきなマゴのみ(3カテゴリ)の確率%・個数入力を縦に揃えるため、
   カテゴリ名の幅を最長の「ミュウ・ミュウツー」「他のエスパータイプ」(全角9文字)に固定する */
.cmp-giant-berry-cat-name{
  display:inline-block;
  min-width:8.6em;
}
.cmp-event-bonus-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.cmp-event-bonus-reset{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-event-bonus-reset:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}
/* 遅延対象のタイプ絞り込みだけに付ける全選択/全解除ボタン(be-typesの先頭に挿入) */
.cmp-select-all-types-btn{
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-select-all-types-btn:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}

/* ---- ボード一覧: 2枚目までは画面にほぼ収まるが、3枚目の端が少し見えるくらいの幅にする
   (ちょうど2枚分の幅だと3枚目以降の存在に気付きにくいため、あえて半端な幅にしてある)。
   3枚目以降は横スクロールで見られる。 ---- */
.cmp-boards{
  display:flex;
  gap:8px;
  align-items:stretch;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x proximity;
}
.cmp-board{
  flex:0 0 calc(44% - 4px);
  min-width:150px;
  scroll-snap-align:start;
  position:relative;
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:12px;
  padding:8px 8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cmp-save-toast{
  position:absolute;
  top:36px;
  left:50%;
  z-index:3;
  transform:translate(-50%, -4px);
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  box-shadow:0 3px 10px rgba(0,0,0,.14);
  color:var(--ink);
  font-size:var(--fs-2xs);
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease, transform .16s ease;
}
.cmp-save-toast:not([hidden]){
  transform:translate(-50%, 0);
  opacity:1;
}
.cmp-save-toast[hidden]{ display:block; visibility:hidden; }

/* ---- ヘッダー行: バッジ+保存/複製は左上、リセット(×)だけ右上 ---- */
.cmp-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
}
.cmp-board-head-left{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.cmp-board-head-right{
  flex:none;
  display:flex;
  align-items:center;
  gap:4px;
}
.cmp-board-badge{
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-2xs);
  font-weight:800;
}
.cmp-icon-btn{
  flex:none;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  border-radius:7px;
  padding:0;
  cursor:pointer;
}
.cmp-icon-btn svg{ width:13px; height:13px; }
.cmp-icon-btn:hover{ color:var(--navy); }
/* 5匹上限に達したときの「複製して追加」ボタン(押しても何も起きないことが分かるように) */
.cmp-icon-btn:disabled{ opacity:.35; cursor:not-allowed; }
.cmp-icon-btn:disabled:hover{ color:var(--ink-soft); }
.cmp-remove-btn{
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1;
}
.cmp-remove-btn:hover{ color:var(--danger); }

/* 単体表示(ボックス・個体評価・スキルログ)では、保存/呼び出しの用途が
   アイコンだけで伝わらないため文字ラベルを併記する。 */
.cmp-board-single .cmp-icon-btn[data-act="save"],
.cmp-board-single .cmp-icon-btn[data-act="load"],
.cmp-board-single .cmp-icon-btn[data-act="delete-saved"]{
  width:72px;
  box-sizing:border-box;
  padding:0 12px;
  gap:6px;
  font-size:var(--fs-xs);
  font-weight:700;
  white-space:nowrap;
}
.cmp-board-single .cmp-icon-btn[data-act="load"]{ width:96px; }
.cmp-board-single .cmp-icon-btn[data-act="save"]{ width:auto; }
.cmp-board-single .cmp-icon-btn[data-act="save"]::after{ content:'ボックスに保存'; }
.cmp-board-single .cmp-icon-btn[data-act="load"]::after{ content:'呼び出し'; }
.cmp-board-single .cmp-icon-btn[data-act="delete-saved"]::after{ content:'削除'; }
.cmp-board-single .cmp-icon-btn[data-act="delete-saved"]:hover{ color:var(--danger); }
.cmp-icon-btn[data-act="delete-saved"][hidden]{ display:none; }
.cmp-icon-btn[data-act="load"][hidden]{ display:none; }

/* スタメン管理の入力UIでは、枠の複製・左右移動・リセットを使わせない。 */
.cmp-board-hide-frame-actions .cmp-icon-btn[data-act="dup"],
.cmp-board-hide-frame-actions .cmp-icon-btn[data-act="move-left"],
.cmp-board-hide-frame-actions .cmp-icon-btn[data-act="move-right"],
.cmp-board-hide-frame-actions .cmp-icon-btn[data-act="remove"]{
  display:none;
}
.cmp-board-hide-frame-actions.cmp-board-show-frame-remove .cmp-icon-btn[data-act="remove"]{
  display:flex;
  width:auto;
  min-width:112px;
  padding:0 10px;
  gap:6px;
  font-size:var(--fs-xs);
  white-space:nowrap;
}
.cmp-board-hide-frame-actions.cmp-board-show-frame-remove .cmp-icon-btn[data-act="remove"]::after{
  content:'スロットから外す';
}
.cmp-board-hide-frame-actions.cmp-board-show-frame-remove{
  min-width:240px;
}

/* 個体を入力して保存できることを伝えるため、「保存」を次の操作として強調する。 */
.cmp-board-single .cmp-icon-btn[data-act="save"]{
  animation:save-action-glow 1.6s ease-in-out infinite;
}

/* シェアモードでカードをタップして開く入力UIでは、上部の操作内容を
   アイコンだけでなくラベルでも表示する。 */
.cmp-share-editing .cmp-icon-btn[data-act="dup"],
.cmp-share-editing .cmp-icon-btn[data-act="save"],
.cmp-share-editing .cmp-icon-btn[data-act="load"]{
  width:auto;
  min-width:72px;
  box-sizing:border-box;
  padding:0 9px;
  gap:5px;
  font-size:var(--fs-xs);
  font-weight:700;
  white-space:nowrap;
}
.cmp-share-editing .cmp-icon-btn[data-act="dup"]::after{ content:'コピー'; }
.cmp-share-editing .cmp-icon-btn[data-act="save"]::after{ content:'ボックスに保存'; }
.cmp-share-editing .cmp-icon-btn[data-act="load"]::after{ content:'ボックスから呼び出し'; }

/* 保存済み個体を呼び出すモーダル */
.cmp-saved-modal .modal-card{ max-width:min(94vw, 680px); }
.cmp-saved-modal-actions{
  display:flex;
  justify-content:flex-end;
  margin:0 0 8px;
}
.cmp-saved-add-box{
  min-height:34px;
  padding:6px 10px;
  font-size:var(--fs-xs);
}
.cmp-saved-add-box .tab-open-btn-icon{ width:16px; height:16px; }
.cmp-bulk-saved-modal .modal-card{ max-width:min(96vw, 680px); }
.cmp-bulk-slot-label{
  margin:0 0 5px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  text-align:center;
}
.cmp-bulk-slots{
  display:flex;
  justify-content:center;
  gap:clamp(2px, 1vw, 6px);
  min-width:0;
  margin:0 0 10px;
}
.cmp-bulk-slot{
  box-sizing:border-box;
  display:flex;
  flex:1 1 0;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:42px;
  min-height:64px;
  max-width:54px;
  padding:3px 4px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink-soft);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.cmp-bulk-slot.is-filled:hover{ background:var(--paper-dim); }
.cmp-bulk-slot-main{
  box-sizing:border-box;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:100%;
  min-height:58px;
  padding:3px 4px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.cmp-bulk-slot-main:disabled{
  cursor:default;
  opacity:1;
}
.cmp-bulk-slot-main:active:not(:disabled){ transform:translateY(1px); }
.cmp-bulk-slot-remove{
  position:absolute;
  top:-7px;
  right:-7px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-soft);
  font:inherit;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(35,43,72,.18);
}
.cmp-bulk-slot-remove:hover,
.cmp-bulk-slot-remove:focus-visible{
  border-color:var(--danger);
  color:var(--danger);
}
.cmp-bulk-slot.is-empty .cmp-bulk-slot-icon{ opacity:.5; }
.cmp-bulk-slot-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(28px, 8vw, 38px);
  height:clamp(28px, 8vw, 38px);
  font-size:20px;
  line-height:1;
}
.cmp-bulk-slot-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.cmp-bulk-slot-badge{
  font-size:var(--fs-2xs);
  font-weight:800;
  line-height:1;
}
.cmp-bulk-saved-modal .cmp-saved-search-input{ margin-top:2px; }
.cmp-saved-search-input{
  width:100%;
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 7px;
  margin-bottom:8px;
}
.cmp-saved-modal .be-filters,
.cmp-saved-modal .be-types,
.cmp-saved-modal .filter-chips{ margin-bottom:8px; }
/* 並び替え行(図鑑「ボックス」の.box-sort-row/.box-sort-labelと同じ見た目。
   ボタン自体はcss/tokens.cssの.segmented共通部品をそのまま使う) */
.cmp-saved-sort-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.cmp-saved-sort-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-saved-rows{
  max-height:52vh;
  overflow:auto;
  border-top:1px solid var(--line);
  padding-top:6px;
}
.cmp-saved-empty{
  padding:8px 6px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  text-align:center;
}
.cmp-saved-row{
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 4px;
  border-radius:7px;
  cursor:pointer;
}
.cmp-saved-row:hover{ background:var(--paper-dim); }
.cmp-saved-row-label{
  flex:1;
  min-width:0;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmp-saved-table{
  width:max-content;
  min-width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:var(--fs-2xs);
}
.cmp-saved-th,
.cmp-saved-td{
  height:34px;
  padding:4px 5px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  text-align:center;
  white-space:nowrap;
}
.cmp-saved-th{
  height:44px;
  color:var(--ink-soft);
  font-weight:700;
  vertical-align:middle;
}
.cmp-saved-th-name,
.cmp-saved-td-name{
  position:sticky;
  left:0;
  z-index:1;
  width:112px;
  min-width:112px;
  max-width:112px;
  text-align:left;
}
.cmp-saved-th-name{ z-index:2; }
.cmp-saved-th-sub{
  width:30px;
  min-width:30px;
  padding:3px 2px;
}
.cmp-saved-th-sub .cmp-skill-icon{ margin:auto; }
.cmp-saved-th-nature{
  width:54px;
  min-width:54px;
  padding:3px;
  font-size:9px;
  line-height:1.15;
}
.cmp-saved-td-name{
  overflow:hidden;
}
.cmp-saved-name-content{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  min-width:0;
  overflow:hidden;
}
.cmp-saved-td-name img{
  width:26px;
  height:26px;
  object-fit:contain;
  flex:none;
}
.cmp-saved-name-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  line-height:1.2;
}
.cmp-saved-name-text strong,
.cmp-saved-name-text small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmp-saved-name-text strong{ color:var(--ink); font-size:var(--fs-2xs); }
.cmp-saved-name-text small{ color:var(--ink-soft); font-size:10px; }
.cmp-saved-td-mark{ width:30px; min-width:30px; }
.cmp-saved-td-mark .cmp-skill-icon{ margin:auto; }
.cmp-saved-td-mark.is-empty{ color:var(--ink-soft); opacity:.55; }
.cmp-saved-table-row{ cursor:pointer; }
.cmp-saved-table-row:hover .cmp-saved-td{ background:var(--paper-dim); }
.cmp-saved-table-row:hover .cmp-saved-td-name{ background:var(--paper-dim); }
.cmp-saved-table-row.is-disabled{
  cursor:not-allowed;
}
.cmp-saved-table-row.is-disabled .cmp-saved-td{
  opacity:.42;
  filter:grayscale(1);
  color:var(--ink-soft);
  background:var(--paper-dim);
}
.cmp-saved-table-row.is-disabled .cmp-saved-td-name{
  background:var(--paper-dim);
}

/* iPhone幅では、固定幅の全列(ポケモン名+サブスキル8種+性格2種)が
   横スクロールなしで見えるように詰める。アイコン15〜16pxは維持し、
   名前だけは従来どおり省略表示する。 */
/* ページのviewportがinitial-scale:0.75のため、スマホ実機ではCSS上の幅が
   480pxを超えることがある。640pxまでをスマホ向けの詰め幅として扱う。 */
@media (max-width:640px){
  .cmp-saved-modal .modal-card{ padding-left:10px; padding-right:10px; }
  .cmp-saved-th,
  .cmp-saved-td{ padding-left:2px; padding-right:2px; }
  .cmp-saved-th-name,
  .cmp-saved-td-name{
    width:78px;
    min-width:78px;
    max-width:78px;
  }
  .cmp-saved-th-sub,
  .cmp-saved-td-mark{
    width:20px;
    min-width:20px;
  }
  .cmp-saved-th-sub{ padding-left:1px; padding-right:1px; }
  .cmp-saved-th-nature{
    width:38px;
    min-width:38px;
    padding-left:1px;
    padding-right:1px;
    font-size:8px;
  }
  .cmp-saved-td-name img{ width:22px; height:22px; }
  .cmp-saved-name-content{ gap:3px; }
}

/* ---- ポケモン選択 ---- */
/* ボード内で入力欄が横に広がり過ぎないよう、選択UIは約2/3幅にする。 */
.cmp-picker{ position:relative; width:66.6667%; }
.cmp-picker-input{
  width:100%;
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:9px;
  padding:6px 8px;
}
.cmp-picker-selected{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:9px;
  cursor:pointer;
}
/* display:flexが[hidden]の既定style(display:none)を上書きしてしまうため明示的に戻す */
.cmp-picker-selected[hidden]{ display:none; }
.cmp-picker-selected img{
  width:26px;
  height:26px;
  object-fit:contain;
  flex:none;
}
.cmp-picker-selected-name{
  flex:1;
  min-width:0;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmp-picker-selected-fixed{
  flex:none;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  font-weight:700;
}
.cmp-picker-selected-actions{
  flex:none;
  display:flex;
  align-items:center;
  gap:3px;
}
.cmp-picker-selected-action{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border:1px solid var(--line);
  border-radius:7px;
  padding:0;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-picker-selected-action:hover{ color:var(--navy); border-color:var(--navy); }
.cmp-picker-selected-action:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:1px;
}
.cmp-picker-selected-action svg{ width:15px; height:15px; }
.cmp-picker-selected-action[hidden]{ display:none; }
/* おてつだいシミュなどの入力ボードは、ポケモン名の入力欄を全幅にする。 */
.cmp-board-full-picker .cmp-picker{ width:100%; }
.cmp-picker-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;
}
.cmp-picker-dropdown.show{ display:block; }
.cmp-picker-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 5px;
  border-radius:7px;
  cursor:pointer;
}
.cmp-picker-row:hover{ background:var(--paper-dim); }
.cmp-picker-row img{ width:22px; height:22px; object-fit:contain; flex:none; }
.cmp-picker-row span{
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmp-picker-empty{
  padding:8px 6px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  text-align:center;
}

/* ---- ポケモン選択モーダル: 名前検索+絞り込み(とくい/タイプ/食材)+一覧(.cmp-picker-rowを流用) ---- */
/* ボード内の選択UIと揃え、従来最大幅(560px)の約2/3にする。 */
.cmp-pokemon-pick-modal .modal-card{ max-width:min(94vw, 373px); }
.cmp-pokemon-pick-modal .cmp-picker-input{ margin-bottom:10px; }
.cmp-pokemon-pick-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-pokemon-pick-modal .be-filters,
.cmp-pokemon-pick-modal .be-types,
.cmp-pokemon-pick-modal .filter-chips{ margin-bottom:8px; }
.cmp-pokemon-pick-list{
  display:flex;
  flex-direction:column;
  margin-top:8px;
  /* 絞り込み後も候補一覧の領域を確保し、モーダルが上下に動いたり
     小さくなったりしないようにする。候補が多い場合は従来どおりスクロールする。 */
  height:44vh;
  max-height:44vh;
  overflow-y:auto;
  border-top:1px solid var(--line);
  padding-top:6px;
}

/* ---- 進化系選択 ---- */
.cmp-evolution-pick-modal .modal-card{ max-width:min(94vw, 373px); }
.cmp-evolution-pick-note{
  margin:0 0 10px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.cmp-evolution-pick-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:54vh;
  overflow-y:auto;
}
.cmp-evolution-pick-row{
  box-sizing:border-box;
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink-soft);
  text-align:left;
  cursor:pointer;
}
.cmp-evolution-pick-row:hover{ background:var(--paper-dim); }
.cmp-evolution-pick-row:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:1px;
}
.cmp-evolution-pick-row.is-selected{
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
  font-weight:700;
}
.cmp-evolution-pick-row img{
  width:40px;
  height:40px;
  object-fit:contain;
  flex:none;
}
.cmp-evolution-pick-name{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-xs);
}
.cmp-evolution-pick-stage{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:500;
  white-space:nowrap;
}
.cmp-evolution-pick-row.is-selected .cmp-evolution-pick-stage{ color:var(--selected-soft-ink); }

/* ---- レベル・性格 ---- */
.cmp-row{
  display:flex;
  gap:6px;
}
.cmp-field{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cmp-field > label{
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
/* ラベル無しの項目(いつ育チェックボックス)を、隣のラベル付きセレクトと下端で揃える */
.cmp-field-end{
  justify-content:flex-end;
}
.cmp-checkbox-stack{
  flex:0 0 auto;
  gap:4px;
  align-items:flex-start;
}
.cmp-slot-field[hidden] + .cmp-checkbox-stack{ flex:1; }
.cmp-checkbox-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-checkbox-row input[type="checkbox"]{
  width:15px;
  height:15px;
  accent-color:var(--navy);
  cursor:pointer;
}
.cmp-ribbon-control{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
}
.cmp-ribbon-checkbox{ gap:4px; }
.cmp-ribbon-icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.cmp-ribbon-icon-button:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; border-radius:4px; }
.cmp-ribbon-icon{
  width:20px;
  height:20px;
  object-fit:contain;
}
.cmp-ribbon-select{
  position:absolute;
  z-index:4;
  left:20px;
  top:100%;
  width:auto;
  min-width:72px;
  padding:3px 4px;
}
.cmp-tool input[type="number"],
.cmp-tool select{
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 6px;
  width:100%;
}
/* ニックネーム入力欄。iOSはinputのfont-sizeが16px未満だと自動ズームするため16px以上にする */
.cmp-nickname-input{
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 6px;
  width:100%;
}

/* ---- レベル入力+クイックボタン(丸ボタン) ---- */
.cmp-level-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
}
.cmp-level-step{
  flex:none;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.cmp-level-step:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}
.cmp-level-step:disabled{
  opacity:.35;
  cursor:default;
}
.cmp-level-input{
  flex:0 0 46px;
  min-width:0;
  padding-left:4px;
  padding-right:2px;
  text-align:center;
  -moz-appearance:textfield;
}
.cmp-level-input::-webkit-outer-spin-button,
.cmp-level-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cmp-level-quick{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
}
.cmp-level-quick button{
  flex:none;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:8px;
  font-weight:700;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-level-quick button:active{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}

/* ---- サブスキル(タップで明暗が変わるボタン式) ---- */
.cmp-sub-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 6px;
}
.cmp-sub-btn{
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:6px 4px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  position:relative;
}
/* サブスキル名の左の小アイコン。色はcmp-skill-icon-*(S=グレー/M=青/きのみS・おてボ=オレンジ)。
   地色は反転させず、枠の有無+文字(アイコン含む)の濃淡だけで「ありなし」を示す
   (シェアモードのサブスキル表示と同じ考え方)。未選択はラベル文字・アイコンともに
   薄く落とし、選択中は文字色を枠と同じ色(縁取りが色付きのグループはその色、
   それ以外はselected-border)に揃える。グレー系アイコンはもともと薄い色なので、
   選択中は文字と同じ濃色に上げて視認性を保つ。 */
.cmp-sub-skill-visual{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:15px;
  height:15px;
}
.cmp-sub-skill-visual > .cmp-skill-icon{ width:13px; height:13px; }
.cmp-sub-btn:not(.active) > .cmp-sub-btn-label{ opacity:.6; }
.cmp-sub-btn:not(.active) > .cmp-sub-skill-visual > .cmp-skill-icon{ opacity:.3; }
.cmp-sub-btn:not(.active) .cmp-sub-skill-visual .cmp-skill-icon-gray{ opacity:.45; }
.cmp-sub-btn.active .cmp-skill-icon-gray{ color:var(--selected-border, var(--navy)); }
.cmp-sub-btn.active{
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
/* 縁取りの色分け(きのみS/おてボ=オレンジ、おてスピM/食材確率M/スキル確率M=青)は、
   選択中(.active)だけ色を出し、未選択は枠なし(透明)にする
   (枠あり/なしでも「ありなし」を示すシェアモードの見た目に合わせる)。
   選択中の文字色も、縁取りと同じ色に揃える。 */
.cmp-sub-btn-orange{ --selected-border:var(--warning); --selected-strong-border:var(--warning); --selected-soft-bg:color-mix(in srgb, var(--warning) 10%, var(--paper)); --selected-soft-ink:var(--warning); }
.cmp-sub-btn-blue{ --selected-border:var(--info); --selected-strong-border:var(--info); --selected-soft-bg:color-mix(in srgb, var(--info) 10%, var(--paper)); --selected-soft-ink:var(--info); }
.cmp-sub-btn.is-reservation-pending{
  background:var(--paper-dim);
  color:var(--ink-soft);
}
.cmp-sub-btn.is-reservation-pending > .cmp-sub-btn-label,
.cmp-sub-btn.is-reservation-pending > .cmp-sub-skill-visual > .cmp-skill-icon{ opacity:.45; }
.cmp-sub-btn.is-reservation-unlocked{ font-weight:700; }
.cmp-sub-reservation-marker{
  display:inline-flex;
  align-items:center;
  gap:2px;
  flex:none;
  white-space:nowrap;
  color:var(--ink-soft);
}
.cmp-sub-btn > .cmp-sub-reservation-marker{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  padding:1px 2px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent);
  transform:translate(-50%, -50%) scale(.9);
  transform-origin:center;
  pointer-events:none;
}
.cmp-sub-btn.is-reservation-unlocked > .cmp-sub-reservation-marker{
  left:auto;
  right:2px;
  top:2px;
  transform:none;
}
.cmp-sub-reservation-lock{ flex:none; }
.cmp-sub-reservation-pill,
.box-sub-reservation-pill{
  display:inline-flex;
  align-items:center;
  min-height:14px;
  padding:0 4px;
  border-radius:999px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:9px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
/* 予約状態のロックとLvピルは、サブスキル名の薄さに影響されず常に読めるようにする。 */
.cmp-sub-reservation-marker.is-pending,
.cmp-sub-reservation-marker.is-unlocked,
.cmp-sub-reservation-marker .cmp-sub-reservation-lock,
.cmp-sub-reservation-marker .cmp-sub-reservation-pill{ opacity:1; }
.cmp-sub-reservation-trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:80%;
  margin:6px auto 0;
  padding:6px 8px;
  border:1px solid var(--line);
  border-style:dashed;
  border-radius:8px;
  background:var(--selected-soft-bg);
  color:var(--ink-soft);
  font:inherit;
  font-size:var(--fs-2xs);
  cursor:pointer;
  text-align:center;
}
.cmp-sub-reservation-trigger-icon{
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex:none;
}
.cmp-sub-reservation-trigger-lock{ flex:none; }
.cmp-sub-reservation-trigger:hover{ border-color:var(--selected-border); }
.cmp-sub-reservation-rows{ display:grid; gap:8px; margin-top:10px; }
.cmp-sub-reservation-row{ display:flex; align-items:center; gap:8px; }
.cmp-sub-reservation-level{ flex:0 0 48px; font-weight:700; color:var(--ink-soft); }
.cmp-sub-reservation-value{
  flex:1;
  min-width:0;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.cmp-sub-reservation-value:hover{ border-color:var(--selected-border); }
.cmp-sub-reservation-note{ margin:8px 0 0; color:var(--ink-soft); font-size:var(--fs-xs); text-align:left; }
.cmp-sub-reservation-picker-modal .modal-card{ max-width:clamp(320px, 65vw, 520px); }
.cmp-sub-reservation-picker-grid{ margin-top:10px; }
.cmp-sub-reservation-option{ min-height:38px; }
.cmp-sub-reservation-option:disabled{ cursor:not-allowed; opacity:.55; }
.cmp-sub-reservation-clear{
  width:100%;
  margin-top:10px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font:inherit;
  cursor:pointer;
}

/* ---- 食材枠。選択中の食材(1〜3枠目)のアイコンのみを表示するボタン(タップで設定モーダルを開く)。
   いつ育トグルと横並びにするため、ラベル下の表示は食材アイコンだけに絞って小さくまとめる ---- */
.cmp-slot-row{
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px 7px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:9px;
  font:inherit;
  cursor:pointer;
  width:100%;
}
/* display:flexが[hidden]の既定style(display:none)を上書きしてしまうため明示的に戻す */
/* data-slot-rowは外側の.cmp-field(display:flex)に付くため、[hidden]の上書きはそちらに対して行う */
.cmp-slot-field[hidden]{ display:none; }
.cmp-slot-summary{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
}
.cmp-slot-summary img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:none;
}
/* ---- スキルレベル・性格▼▼(隣のスキル設定欄が非表示の個体だと行に1つだけ残るので左に詰めて幅を抑える) ---- */
.cmp-field-narrow{
  flex:0 0 calc(50% - 3px);
}
/* display:flexが[hidden]の既定style(display:none)を上書きしてしまうため明示的に戻す
   (.cmp-slot-field[hidden]と同じ理由。data-party-fieldは外側の.cmp-field(display:flex)に付く) */
.cmp-party-field[hidden]{ display:none; }
.cmp-extra-effect-select{
  width:100%;
  min-width:0;
  font-size:var(--fs-2xs);
}

/* ---- 食材枠モーダル(図鑑「食材確率」タブの個数表と同じ見た目のテーブル。
   .overlay-modal/.modal-cardはtokens.cssを流用。文字はすべて左揃え) ---- */
.cmp-slot-modal-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 12px;
}
.cmp-slot-modal-head img{
  width:40px;
  height:40px;
  object-fit:contain;
  flex:none;
}
.cmp-slot-modal-name{
  text-align:left;
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--navy);
}
.cmp-slot-modal-sub{
  text-align:left;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.cmp-slottable table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.cmp-slottable th,
.cmp-slottable td{
  border:1px solid var(--line);
  padding:7px 8px;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.cmp-slottable thead th{
  background:var(--paper-dim);
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  font-weight:700;
}
.cmp-slottable-cell{ white-space:nowrap; }
.cmp-slottable-cell span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.cmp-slottable-cell img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:none;
}
.cmp-slottable-badge{
  display:inline-block;
  min-width:16px;
  padding:0 4px;
  margin-right:4px;
  border-radius:4px;
  background:var(--navy);
  color:var(--paper);
  font-size:var(--fs-2xs);
  font-weight:800;
  text-align:center;
}
.cmp-slottable-na{ color:var(--ink-soft); opacity:.5; }
.cmp-slottable-pick{ cursor:pointer; font-weight:700; }
.cmp-slottable-pick:hover{ background:var(--paper-dim); }
.cmp-slottable-pick.active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.cmp-slot-modal-note{
  text-align:left;
  margin:10px 0 0;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  line-height:1.6;
}

/* ---- 仮想パーティボタン(食材枠と同じ.cmp-slot-rowを流用し、中央寄せのテキストにする) ---- */
.cmp-party-btn{
  justify-content:center;
  gap:4px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--navy);
}
/* ミュウのスキル設定はオール得意の特別枠であることが分かるようピンクの縁取りにする */
.cmp-party-btn.is-mew{ border-width:2px; border-color:#E86AAE; }
/* VSミュウツーでは実際のチーム構成を参照するため設定不可。ボタンごとグレーアウトして
   触れないことが分かるようにしつつ「自動計算」とだけ出す。 */
.cmp-party-btn.is-auto{
  opacity:.55;
  cursor:default;
  color:var(--ink-soft);
}
/* スキルログではパーティ構成を使わないため、スキル設定を操作不可にする。 */
.cmp-party-btn.is-skill-log-disabled{
  opacity:.55;
  cursor:default;
  color:var(--ink-soft);
}
.cmp-party-btn:disabled{ cursor:default; }
/* タイプ〇種(対象タイプの匹数)は数字の左にタイプアイコンを添える。
   ラティアスの有無はいいキャンプチケットと同じ「アイコン+ban重ね(なし時)」で示す。 */
.cmp-party-type-icon{ width:16px; height:16px; object-fit:contain; flex:none; }
.cmp-party-latias-icon{ width:18px; height:18px; }
/* ---- 仮想パーティモーダル: 匹数選択ボタンを横並びにする(.cmp-sub-btnを流用) ---- */
.cmp-party-modal-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}
.cmp-party-modal-row:last-child{ margin-bottom:0; }
.cmp-party-modal-row .cmp-sub-btn{ flex:none; }
.cmp-party-count-btn{
  display:flex;
  align-items:center;
  gap:4px;
}
.cmp-party-count-btn:disabled{ opacity:.35; cursor:not-allowed; }
/* ラティアスあり/なしグループの見出しアイコン(テキストラベルの代わり) */
.cmp-party-modal-row .cmp-party-latias-icon{
  width:22px;
  height:22px;
  margin-right:2px;
}
.cmp-mew-skill-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cmp-mew-skill-row:last-child{ margin-bottom:0; }
.cmp-mew-skill-pick{ flex:1 1 auto; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-2xs); font-weight:700; }
.cmp-mew-skill-label{ color:var(--ink); }
/* 幅は .cmp-tool input[type="number"](width:100%)より詳細度を上げて固定する。枠線・背景は継承 */
.cmp-tool input[type="number"].cmp-mew-skill-prob{ flex:0 0 auto; width:80px; text-align:right; }
.cmp-mew-skill-prob-unit{ flex:0 0 auto; font-size:var(--fs-2xs); color:var(--ink-soft); }
.cmp-mew-skill-reset{ margin-top:10px; width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper-dim); color:var(--ink); font-size:var(--fs-2xs); font-weight:700; cursor:pointer; }
.cmp-mew-skill-reset:hover{ background:var(--paper); }

.cmp-empty-hint{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  text-align:center;
  padding:10px 0;
}

/* ---- テキスト入出力 ---- */
.cmp-io{ margin-top:12px; }
.cmp-io textarea{
  width:100%;
  min-height:120px;
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  resize:vertical;
}
.cmp-io-actions{
  display:flex;
  gap:8px;
  margin-top:6px;
}
.cmp-io-btn{
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.cmp-io-btn.is-primary{
  background:var(--selected-bg);
  border-color:var(--selected-border, var(--navy));
  color:var(--selected-ink);
}
.cmp-io-msg{
  margin:6px 0 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-io-msg.is-error{ color:var(--danger); }

/* ---- グラフ比較表示(「個体比較」モード。縦棒のみ) ----
   順番: 総エナジー(積み上げ)→きのみ→食材→スキル。きのみ=緑・食材=オレンジ・スキル=青。
   個体の区別は各バーの脇に置くアイコン+A/B/C…バッジ(枠の色と共通)で行う
   (バーの上に重ねず、項目名の位置に置く)。 */
.cmp-graph{
  margin-top:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 10px;
}
.cmp-graph-mode-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
}
.cmp-graph-mode-label{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-graph-mode-toggle .segmented{
  width:100%;
  max-width:360px;
}
.cmp-graph-mode-toggle .segmented button{
  flex:1 1 0;
  font-size:var(--fs-base);
  font-weight:800;
  padding:10px 14px;
}
/* シミュ区間設定(1〜24時間)。±ボタン+8/12/16/24のクイック設定。 */
.cmp-duration-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:14px;
  padding:8px 10px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:10px;
}
.cmp-duration-label{
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-duration-control{
  display:flex;
  align-items:center;
  gap:4px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.cmp-duration-btn{
  width:1.6em;
  height:1.6em;
  line-height:1;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.cmp-duration-value{
  min-width:1.6em;
  text-align:center;
}
.cmp-duration-quick{
  display:flex;
  gap:4px;
}
.cmp-duration-quick-btn{
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
  cursor:pointer;
}
.cmp-duration-quick-btn.active{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--paper);
}
/* きのみゾーン: チーム比較結果のモード切り替え直下でON/OFFと持ち越し・交代先を設定する。 */
.cmp-berry-zone-setting{
  margin:12px 0;
  padding:10px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:10px;
}
.cmp-duration-row[hidden]{ display:none !important; }
.cmp-berry-zone-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cmp-berry-zone-toggle{ flex:none; }
.cmp-berry-zone-body{ margin-top:10px; }
.cmp-berry-zone-option{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:var(--fs-sm);
}
.cmp-berry-zone-option[hidden]{ display:none !important; }
.cmp-berry-zone-option label{ display:inline-flex; align-items:center; gap:3px; font-weight:700; }
.cmp-berry-zone-option input{
  width:48px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  text-align:right;
}
.cmp-berry-zone-main-option{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:10px;
}
.cmp-berry-zone-start-option{
  display:flex;
  flex-direction:column;
  min-width:0;
  align-items:flex-start;
  gap:6px;
}
.cmp-berry-zone-start-label{
  font-weight:700;
  line-height:1.25;
}
.cmp-berry-zone-start-value{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-weight:700;
}
.cmp-berry-zone-start-option .cmp-event-bonus-quick{ margin-left:0; }
.cmp-berry-zone-swap-option{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  margin-top:0;
}
.cmp-berry-zone-swap-preview{
  width:min(100%, 230px);
  padding:6px 7px 7px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  box-shadow:0 2px 8px rgba(35,43,72,.12);
}
.cmp-berry-zone-swap-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:20px;
}
.cmp-berry-zone-swap-preview-title{
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  font-weight:800;
}
.cmp-berry-zone-swap-open{
  padding:0;
  border:0;
  background:transparent;
  color:var(--info);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:800;
  cursor:pointer;
}
.cmp-berry-zone-swap-open:hover,
.cmp-berry-zone-swap-open:focus-visible{ color:var(--navy); text-decoration:underline; }
.cmp-berry-zone-swap-preview-body{
  display:flex;
  align-items:center;
  min-height:54px;
  margin-top:4px;
  padding-top:5px;
  border-top:1px solid var(--line);
}
.cmp-berry-zone-swap-preview-body.is-empty{
  justify-content:center;
  gap:5px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.cmp-berry-zone-swap-preview-body.is-empty svg{ color:var(--info); flex:none; }
.cmp-berry-zone-swap-mini-card{
  display:grid;
  grid-template-columns:46px minmax(0, 1fr);
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
}
.cmp-berry-zone-swap-mini-card > img{
  width:46px;
  height:46px;
  object-fit:contain;
}
.cmp-berry-zone-swap-mini-detail{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
}
.cmp-berry-zone-swap-mini-level{
  padding:1px 4px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:9px;
  font-weight:800;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.cmp-berry-zone-swap-mini-name{
  width:100%;
  overflow:hidden;
  color:var(--navy);
  font-size:var(--fs-xs);
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmp-berry-zone-swap-mini-rate{
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.2;
  white-space:nowrap;
}
.cmp-berry-zone-explore{
  width:100%;
  margin-top:10px;
  padding:7px 10px;
  border:1px solid var(--navy);
  border-radius:7px;
  background:var(--navy);
  color:var(--paper);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:800;
  cursor:pointer;
}
.cmp-berry-zone-explore:hover,
.cmp-berry-zone-explore:focus-visible{
  background:var(--navy-deep, #17365f);
}
.cmp-berry-zone-note{ margin:8px 0 0; color:var(--ink-soft); font-size:var(--fs-xs); line-height:1.45; }
.cmp-berry-zone-swap-card{ max-width:620px; }
.cmp-berry-zone-swap-card > [data-berry-zone-swap-board] > .cmp-board{ margin-top:10px; }
.cmp-berry-zone-swap-card .cmp-board{ border-color:var(--line) !important; }
/* 指標(総エナジー/食材/スキル)ごとのパネルを横に並べ、全体を1つの横スクロール
   領域にする(パネルの中で個別にスクロールさせない)。 */
.cmp-graph-body{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  overflow-x:auto;
  gap:18px;
  padding-bottom:4px;
}
.cmp-graph-body[hidden]{ display:none; }
.cmp-graph-row{ display:flex; flex-direction:column; gap:6px; flex:none; }
.cmp-graph-title{
  text-align:center;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-graph-title-note{
  margin-left:4px;
  font-size:.8em;
  font-weight:400;
}
.cmp-graph-bars{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:14px;
  /* ラベル(アイコン+バッジ)はtrackの下に絶対配置してはみ出すため、marginで
     その分の表示領域を確保する(paddingだと0基準線まで一緒にずれてしまう)。 */
  margin-bottom:32px;
}
/* 起点(0)のX軸。各trackの下端を貫く位置に引く
   (trackはvbarの中で先頭側の要素なので、bars全体の端と揃う)。 */
.cmp-graph-xaxis{
  position:absolute;
  left:0;
  right:0;
  top:auto;
  bottom:0;
  width:auto;
  height:1px;
  background:var(--ink-soft);
  opacity:.5;
  pointer-events:none;
}

/* いつ育ON: 食材・スキルは総エナジーに含まれない参考値であることを示す */
.cmp-graph-bar-dim{
  opacity:.35;
}
.cmp-graph-val{
  flex:none;
  font-size:var(--fs-2xs);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  white-space:nowrap;
}
.cmp-graph-val b{ font-weight:800; }
.cmp-graph-val small{ font-weight:600; color:var(--ink-soft); margin-left:2px; }

/* 縦から伸びる(下端基準・上へ) */
.cmp-graph-vbar{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:34px;
}
.cmp-graph-vtrack{
  position:relative;
  width:22px;
  height:110px;
  background:var(--paper-dim);
  border-radius:6px;
  overflow:visible;
}
.cmp-graph-vtrack .cmp-graph-bar{
  position:absolute;
  left:0;
  width:100%;
}
.cmp-graph-vtrack .cmp-graph-food-seg{ flex-direction:column; }
/* ラベルはtrackの外(0基準より下)に絶対配置する。wrap側の通常フローに置くと
   隣のY軸パネルより高さが増えてしまい、align-items:flex-endで0基準がずれるため。 */
.cmp-graph-vtrack .cmp-graph-label{
  position:absolute;
  left:50%;
  top:100%;
  margin-top:6px;
  transform:translateX(-50%);
}
/* Y軸(縦軸モードの左端。補助線+0/25/50/75/100%の目盛り) */
.cmp-graph-yaxis{
  flex:none;
  width:34px; /* 目盛りラベルが絶対配置で左にはみ出す分の領域を確保しておく */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.cmp-graph-yaxis-track{
  position:relative;
  width:1px;
  height:110px;
  background:var(--line);
}
.cmp-graph-ytick{
  position:absolute;
  right:4px;
  transform:translateY(50%);
  font-size:8px;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  white-space:nowrap;
}
.cmp-graph-val-v{
  display:block;
  font-size:var(--fs-2xs);
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cmp-graph-count-v{
  font-size:9px;
  color:var(--ink-soft);
  white-space:nowrap;
}

.cmp-graph-label{
  position:relative;
  flex:none;
  width:20px;
  height:20px;
}
.cmp-graph-label img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--line);
}
.cmp-graph-label-badge{
  position:absolute;
  bottom:-3px;
  right:-4px;
  width:13px;
  height:13px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  font-weight:800;
  border:1.5px solid var(--paper);
}
/* きのみゾーンをONにした瞬間だけ、スキルログと同じ発動カードを右から左へ流す。
   カード内で繰り返す演出ではなく、OFF→ONの1回だけDOMに追加して消す。 */
.cmp-berry-zone-awakening{
  position:fixed;
  z-index:1200;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.cmp-berry-zone-activation-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(68vw, 230px);
  min-height:170px;
  padding:16px 14px 12px;
  border:0;
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg, #be3f7c, #762553);
  color:#fff;
  box-shadow:0 10px 26px rgba(75,14,50,.42);
  opacity:0;
  transform:translateX(120vw);
  animation:cmp-berry-zone-card-travel 2.05s ease-in-out forwards;
}
.cmp-berry-zone-activation-card strong{
  font-size:var(--fs-md);
  font-weight:900;
  letter-spacing:.03em;
}
.cmp-berry-zone-activation-card img{
  width:82px;
  height:82px;
  margin:12px 0 0;
  object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.24));
}
@keyframes cmp-berry-zone-card-travel{
  0%{ opacity:0; transform:translateX(120vw); }
  20%{ opacity:1; transform:translateX(0); }
  70%{ opacity:1; transform:translateX(0); }
  100%{ opacity:0; transform:translateX(-120vw); }
}
@media (prefers-reduced-motion:reduce){
  .cmp-berry-zone-awakening{ display:none; }
}

.cmp-graph-bar-green{ background:var(--success); }
.cmp-graph-bar-pink{ background:#E4578B; }
.cmp-graph-bar-orange{ background:var(--warning); }
.cmp-graph-bar-blue{ background:var(--info); }

/* 食材バー: 食材の種類ごとに区切り、アイコン+個数のラベルをバーの中に描画する
   (背景色は種類ごとにJSが決めた固定色をインラインstyleで指定) */
.cmp-graph-food-seg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  overflow:hidden;
}
.cmp-graph-food-unknown-seg{
  background:#8b8f98;
  border-top:1px dashed rgba(255,255,255,.8);
  border-bottom:1px dashed rgba(255,255,255,.8);
}
.cmp-graph-food-icon{
  width:14px;
  height:14px;
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.cmp-graph-food-unknown-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.75);
  border-radius:3px;
  background:rgba(40,44,52,.3);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.cmp-graph-food-label{
  font-size:8px;
  font-weight:800;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
  white-space:nowrap;
}

.cmp-graph-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding-top:10px;
  margin-top:4px;
  border-top:1px solid var(--line);
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-graph-legend span{ display:inline-flex; align-items:center; gap:4px; }
.cmp-legend-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}
.cmp-legend-green{ background:var(--success); }
.cmp-legend-orange{ background:var(--warning); }
.cmp-legend-blue{ background:var(--info); }
.cmp-legend-giant-berry{ width:20px; height:20px; }
.cmp-graph-legend .cmp-giant-berry-label{ font-size:6px; padding:1px 3px; }

/* ---- スキル効果量カード: グラフとは別に数値だけを個体ごとに並べる ---- */
.cmp-skill-energy-card{
  margin-top:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 10px;
}
.cmp-skill-energy-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.cmp-skill-info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:20px;
  height:20px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-family:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.cmp-skill-info-btn:hover,
.cmp-skill-info-btn:focus-visible{
  border-color:var(--info);
  color:var(--info);
  outline:none;
}
.cmp-skill-energy-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:8px;
}
.cmp-skill-energy-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.cmp-skill-energy-item img{
  width:22px;
  height:22px;
  object-fit:contain;
  border-radius:50%;
  background:var(--paper-dim);
  border:1px solid var(--line);
}
.cmp-skill-energy-badge{
  width:15px;
  height:15px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
}
.cmp-skill-energy-values{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.cmp-skill-energy-row{
  display:flex;
  align-items:baseline;
  gap:4px;
}
/* 取得個数の下に添えるエナジー換算値(きのみバースト等、個数とエナジーの両方を出す場合) */
.cmp-skill-energy-row-sub{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-skill-energy-item b{
  font-size:var(--fs-sm);
  color:var(--ink);
}
.cmp-skill-energy-unit{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}

/* ---- スキル効果の計算範囲モーダル ---- */
.cmp-skill-info-modal .modal-card{
  max-width:min(94vw, 640px);
  box-sizing:border-box;
}
.cmp-skill-info-note{
  margin:0 0 12px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.55;
}
.cmp-skill-info-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.cmp-skill-info-column{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
}
.cmp-skill-info-column h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.3;
}
.cmp-skill-info-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}
.cmp-skill-info-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:28px;
  padding:4px 6px;
  border-radius:6px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.3;
}
.cmp-skill-info-item.is-team{
  background:var(--paper);
  color:var(--ink);
  font-weight:700;
}
.cmp-skill-info-team-badge{
  flex:none;
  padding:2px 5px;
  border-radius:999px;
  background:var(--info);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
}
.cmp-share-export-skill-card .cmp-skill-info-btn{ display:none; }

/* ---- 「5匹の合計」モード ----
   サマリーは3枚のカード(きのみ+スキルのエナジー/食材/スキル)に分ける。
   .cmp-sum-cardは.cmp-graph(--paper)の中にネストするカードなので、
   区別のため一段暗い--paper-dimを背景にする(「スキル」の3枚目は
   既存の.cmp-skill-energy-card=--paper背景のカードをそのまま使う)。 */
.cmp-sum-card{
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 10px;
}
.cmp-berry-zone-active .cmp-sum-energy-card{
  border-color:rgba(255,82,144,.9);
  box-shadow:
    inset 0 0 0 1px rgba(255,126,170,.95),
    inset 0 0 16px rgba(255,63,130,.42),
    0 0 14px rgba(255,63,130,.16);
}
.cmp-sum-card + .cmp-sum-card{ margin-top:12px; }

/* ① きのみ+スキルのエナジー: 100%積み上げ横棒。区画(=個体)の境目には縦の
   区切り線(カード背景色と同じ--paper-dim)を入れ、下の段に各個体のアイコン+
   A/B/C…バッジ(buildIndividualLabelと共通)を区画の幅に合わせて並べる。
   区画そのものの色は個体の識別色ではなく、その個体の内訳(きのみ=緑/スキル=青。
   個体比較モードの総エナジーバーと同じ配色)にする。 */
/* 日給(cmp-sum-stats)と週給(cmp-sum-weekly-card)を横に並べる行。幅が足りない画面では
   flex-wrap:wrapで自動的に縦積みになる(このファイルにメディアクエリは無く、既存の
   他カードと同じくflex-wrapだけで狭幅に対応する方針)。 */
.cmp-sum-headline-row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:10px;
}
.cmp-sum-stats{
  flex:1 1 200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
}
/* 日給側(cmp-sum-daily-value)と週給側(cmp-sum-weekly-value)は見た目を揃える
   (同じフォントサイズ・太さ・下の単位表記のスタイル)。 */
.cmp-sum-daily-value,
.cmp-sum-weekly-value{
  margin-top:4px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.cmp-sum-daily-value b,
.cmp-sum-weekly-value b{
  font-size:var(--fs-lg);
  font-weight:800;
}
.cmp-sum-daily-value span,
.cmp-sum-weekly-value span{
  font-size:var(--fs-2xs);
  margin-left:2px;
  opacity:.85;
}
.cmp-sum-daily-value b{ color:var(--ink); }
.cmp-sum-daily-value span{ color:var(--ink-soft); }
.cmp-sum-daily-zone-value{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:3px;
  row-gap:0;
}
.cmp-sum-daily-zone-value b{ font-size:var(--fs-xl); }
.cmp-sum-daily-zone-value span{ font-size:var(--fs-xs); }
/* ①カードにネストする「週給」カード。フィールドプリセット選択時はJS側で背景画像+暗幕の
   インラインstyle(has-field-bg)を直接付ける。未選択時はこのデフォルト背景(--paper。
   親.cmp-sum-card=--paper-dimより一段明るい)を使う。 */
.cmp-sum-weekly-card{
  flex:1 1 200px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background-size:cover;
  background-position:center;
}
.cmp-sum-weekly-card.has-field-bg{
  color:#fff;
  /* 明るい写真の上でも白文字が読めるよう、暗幕に加えて縁取り状の影を重ねる */
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
}
/* 日給側(cmp-sum-daily-head)と週給側(cmp-sum-weekly-head)の見出し行は、
   フォントサイズ・太さを揃える(週給側だけ日数±ボタンぶんjustify-content:space-between)。 */
.cmp-sum-daily-head,
.cmp-sum-weekly-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-2xs);
  font-weight:700;
}
.cmp-sum-daily-head{
  width:100%;
}
.cmp-sum-weekly-head{
  justify-content:space-between;
}
.cmp-sum-weekly-days{
  display:flex;
  align-items:center;
  gap:4px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cmp-sum-weekly-days-btn{
  width:1.4em;
  height:1.4em;
  line-height:1;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.cmp-sum-weekly-days-value{
  min-width:1.4em;
  text-align:center;
}
.cmp-sum-weekly-rank{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:var(--fs-2xs);
  font-weight:600;
  opacity:.9;
}
.cmp-sum-weekly-rank-icon{
  width:16px;
  height:16px;
  image-rendering:pixelated;
}
.cmp-zone-error{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.cmp-zone-transition-note{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.45;
}
.cmp-zone-daily-chart{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.cmp-zone-daily-title{ margin-bottom:8px; }
.cmp-zone-daily-bars{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  min-height:150px;
}
.cmp-zone-daily-item{
  display:grid;
  grid-template-rows:auto 104px auto auto;
  min-width:0;
  flex:1 1 0;
  text-align:center;
}
.cmp-zone-daily-value{ min-height:18px; font-size:var(--fs-2xs); font-weight:800; font-variant-numeric:tabular-nums; }
.cmp-zone-daily-track{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:3px 0;
  border-bottom:1px solid var(--line);
}
.cmp-zone-daily-fill{
  position:relative;
  width:min(32px, 80%);
  min-height:2px;
  overflow:hidden;
  border-radius:5px 5px 0 0;
  background:var(--success);
}
.cmp-zone-daily-uplift{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--info) 78%, transparent) 0 4px, color-mix(in srgb, var(--paper) 42%, transparent) 4px 7px);
}
.cmp-zone-daily-label{ margin-top:3px; font-size:var(--fs-xs); font-weight:700; }
.cmp-zone-daily-pct{ min-height:17px; color:var(--ink-soft); font-size:var(--fs-2xs); white-space:nowrap; }
.cmp-zone-daily-legend{ display:flex; justify-content:center; gap:10px; margin-top:8px; color:var(--ink-soft); font-size:var(--fs-2xs); }
.cmp-zone-daily-legend span{ display:inline-flex; align-items:center; gap:4px; }
.cmp-zone-daily-legend i{
  display:inline-block;
  width:12px;
  height:8px;
  background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--info) 78%, transparent) 0 3px, color-mix(in srgb, var(--paper) 42%, transparent) 3px 5px);
}
.cmp-sum-share-title{
  margin-top:14px;
}
.cmp-sum-sharebar{
  display:flex;
  width:100%;
  height:28px;
  margin-top:6px;
  /* overflow:hiddenにするとバー上に浮かせるラベル(cmp-sum-shareseg-label-float)まで
     切り取られてしまうため、バー自体には掛けない(色の塗り分けはcmp-sum-shareseg-fill側で
     角丸に切り抜く。ラベルはfillの外にあるので影響を受けない) */
}
/* 浮かせたラベルが上の見出しと重ならないよう、1つでもあれば上に余白を足す */
.cmp-sum-sharebar-has-float{ margin-top:30px; }
.cmp-sum-shareseg{
  position:relative;
  flex:none;
  display:flex;
  min-width:0;
}
.cmp-sum-shareseg-fill{
  display:flex;
  width:100%;
  height:100%;
}
.cmp-sum-shareseg:first-child .cmp-sum-shareseg-fill{ border-radius:8px 0 0 8px; overflow:hidden; }
.cmp-sum-shareseg:last-child .cmp-sum-shareseg-fill{ border-radius:0 8px 8px 0; overflow:hidden; }
.cmp-sum-shareseg:only-child .cmp-sum-shareseg-fill{ border-radius:8px; }
.cmp-sum-shareseg-part{ flex:none; height:100%; }
/* 区画の境目の縦の区切り線(カードの背景色と同じにして、切れ目に見せる) */
.cmp-sum-shareseg:not(:last-child){
  border-right:2px solid var(--paper-dim);
}
/* エナジー(上段)+割合(下段)の2行ラベル。既定はバー内(区画の色の上)に白抜きで中央配置。
   区画が狭いときは.cmp-sum-shareseg-label-floatを付けて、バーの上に浮かせることで
   隣のラベルとの重なりを避ける(浮かせた分、文字色もカードの背景に合わせて変える)。 */
.cmp-sum-shareseg-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.15;
  white-space:nowrap;
  pointer-events:none;
}
.cmp-sum-shareseg-label-energy{
  font-size:var(--fs-2xs);
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.cmp-sum-shareseg-label-pct{
  font-size:9px;
  font-weight:700;
  color:#fff;
  opacity:.9;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.cmp-sum-shareseg-label-float{
  top:auto;
  bottom:100%;
  margin-bottom:4px;
  transform:translateX(-50%);
}
.cmp-sum-shareseg-label-float .cmp-sum-shareseg-label-energy{
  color:var(--ink);
  text-shadow:none;
}
.cmp-sum-shareseg-label-float .cmp-sum-shareseg-label-pct{
  color:var(--ink-soft);
  text-shadow:none;
}
.cmp-sum-sharelabels{
  display:flex;
  width:100%;
  margin-top:8px;
}
.cmp-sum-sharelabel{
  flex:none;
  display:flex;
  justify-content:center;
  min-width:0;
}
/* 料理エナジー区画のラベル: ABCDE(.cmp-graph-label)と同じ丸アイコンを、
   選んでいるレシピの数だけ並べる(データラベルは持たない)。 */
.cmp-sum-cooking-label{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px;
}
.cmp-sum-cooking-label-icon{
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:contain;
  background:var(--paper);
  border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--line);
}

/* ② 食材: 食材の種類ごとに行を分け、各行を「どの個体が何個持ってきたか」の
   積み上げ横棒にする(区画の色は個体の識別色=枠の色と共通)。 */
.cmp-sum-food-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.cmp-sum-food-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cmp-sum-food-head{
  display:flex;
  align-items:center;
  gap:6px;
}
.cmp-sum-food-head img{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:none;
}
.cmp-sum-food-name{
  flex:1;
  min-width:0;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmp-sum-food-total{
  flex:none;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
/* 横軸は個数。食材ごとに100%へ引き伸ばさず、全食材を通した最大個数(rawMax)を
   基準にtrackの中でbarの幅を伸縮させる(track=横軸の基準、bar=その食材の合計個数、
   barの中の区画=個体ごとの内訳)。 */
.cmp-sum-food-track{
  width:100%;
  height:20px;
  border-radius:6px;
  background:var(--paper);
  overflow:hidden;
}
.cmp-sum-food-bar{
  display:flex;
  height:100%;
}
.cmp-sum-food-seg{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  overflow:hidden;
}
/* 区切り線はtrackの背景色(--paper)に合わせ、trackが透けて見えているように見せる
   (--paper-dimだと track/card どちらの背景とも色が違って浮いてしまうため)。 */
.cmp-sum-food-seg:not(:last-child){
  border-right:3px solid var(--paper);
}
.cmp-sum-food-seg-label{
  font-size:8px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

/* ---- 「詳細」/「コンパクト」切替の見出し行(食材カード) ---- */
.cmp-sum-card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cmp-sum-card-title-row .cmp-graph-title{ text-align:left; }
.cmp-sum-food-mode-seg{ flex:none; }
.cmp-sum-food-mode-seg button{
  font-size:var(--fs-2xs);
  padding:4px 10px;
}

/* ---- 食材カードの「コンパクト」表示: チーム全体の食材構成を1本の100%積み上げ横棒
   (食材の種類で色分け)にし、その下に個体ごとの持ち物をアイコン+数値だけで並べる ---- */
.cmp-sum-food-sharebar{
  display:flex;
  width:100%;
  height:28px;
  border-radius:8px;
  overflow:hidden;
  margin-top:6px;
}
.cmp-sum-food-sharebar-seg{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  overflow:hidden;
}
.cmp-sum-food-sharebar-seg:not(:last-child){
  border-right:2px solid var(--paper-dim);
}
.cmp-sum-food-sharebar-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
.cmp-sum-food-sharebar-label{
  font-size:8px;
  font-weight:800;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cmp-sum-food-compact-body{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:14px;
}
.cmp-sum-food-compact-list{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cmp-sum-food-compact-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.cmp-sum-food-compact-item{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cmp-sum-food-compact-item img{
  width:18px;
  height:18px;
  object-fit:contain;
}
.cmp-sum-food-compact-none{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}

/* ---- 「チームで備蓄を開く」リンク: 旧レシピ充足率パネルと同じ場所に置く、
   ボタン1つだけの軽いパネル。「コンパクト」では一覧の右側の余白を使って横に並べ置き
   (cmp-sum-food-compact-body内でflex:1として一覧の残り幅いっぱいに広がる)、
   「食材ごと」では一覧自体がフル幅のため下にフル幅で置く(cmp-sum-recipe-panel-standalone)。 ---- */
.cmp-sum-recipe-panel{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
}
/* 「食材ごと」でフル幅の一覧の下に単独で置く時だけ、区切りが要るので
   上マージン+背景の箱を足す(「コンパクト」で一覧と横並びの時は、箱の余白ぶん
   タイトルが一覧より下に沈んで見えるため付けない)。 */
.cmp-sum-recipe-panel-standalone{
  margin-top:14px;
  padding:8px;
  border-radius:10px;
  background:var(--paper-dim);
}
.cmp-team-stock-link-btn{
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
}
.cmp-team-stock-link-btn:hover{ background:var(--paper); }

/* ---- 料理エナジーカード(「チームで比較」の食材カードの下)。カテゴリ絞り込み
   チップ(filter-chip、排他選択)+選んだレシピのカード一覧(レシピ選択モーダルの
   .stock-card=buildRecipePickCardをそのまま流用、+/－・直接入力もそこで完結)
   +合計を並べる。カードの並びも「レシピを選ぶ」モーダル(.stock-columns)と同じ
   3列グリッドにし、横に間延びしない元のサイズのまま並べる。 ---- */
.cmp-cooking-cat-filter{ margin-bottom:10px; }
.cmp-cooking-recipe-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:10px;
}
.cmp-cooking-total-row{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:10px;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}
.cmp-cooking-total-row b{
  font-size:var(--fs-lg);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ---- レシピ選択モーダル: 「チームで備蓄」(css/ingredientStock.css、css/ingredientUtilize.css)
   と同じ.stock-columns/.stock-column/.stock-card/.ut-recipe-slotsをそのまま流用し、
   カテゴリ3列+カテゴリごとのスロットで全カテゴリを常時表示する。5枠ぶんのボードを持つ
   「チームで備蓄を開く」モーダルと同様、通常の.modal-card(max-width:640px)より広げる。 ---- */
.cmp-recipe-pick-modal .modal-card.cmp-recipe-pick-card{
  max-width:min(96vw, 1100px);
  width:auto;
}
.cmp-recipe-pick-modal .filter-chips{ margin-top:8px; }
.cmp-recipe-pick-columns{
  margin-top:10px;
  max-height:65vh;
  overflow-y:auto;
}
/* カテゴリ見出しは「チームで備蓄」と違いタップでの絞り込みを持たないため、
   立体ボタンの見た目は流用しつつクリック可能に見えないようにする。 */
.cmp-recipe-pick-columns .stock-column-head{ cursor:default; }

/* ---- 「チームで備蓄を開く」モーダル: js/ingredientUtilize.jsをmountして表示する。
   5枠ぶんのボード等、通常の.modal-card(max-width:640px)より広い表示が要るため広げる。 ---- */
.cmp-team-stock-modal .modal-card.cmp-team-stock-card{
  max-width:min(96vw, 1100px);
  width:auto;
}

/* =========================================================================
   サブスキル・性格の共通アイコン(図鑑「ボックス」タブの box-icon と同じ絵柄・配色)。
   色: S=グレー / M=青、きのみS・おてボ=オレンジ、性格▲▲=赤 / ▼▼=青。
   おてボは「塗りつぶした円 + 反転色の chevrons-up」を重ねた合成アイコン。
   ========================================================================= */
.cmp-skill-icon{ display:inline-flex; flex:none; }
.cmp-skill-icon svg{ width:100%; height:100%; }
.cmp-skill-icon-orange{ color:var(--warning); }
.cmp-skill-icon-blue{ color:var(--info); }
.cmp-skill-icon-gray{ color:var(--ink-soft); }
.cmp-skill-icon-red{ color:var(--danger); }
.cmp-skill-icon-flip{ transform:scaleY(-1); }
.cmp-skill-icon-otebo{ position:relative; }
.cmp-skill-icon-otebo-bg{ position:absolute; inset:0; width:100%; height:100%; }
.cmp-skill-icon-otebo-fg{
  position:absolute; inset:0; width:100%; height:100%;
  stroke:var(--paper) !important;
  stroke-width:2.4;
}

/* =========================================================================
   性格の「アイコン+文字」チップ(編集モード)
   ネイティブ<select>の選択肢内にはアイコンを置けないため、セレクトの左に
   現在の選択を示す小さなチップ(▲▲=赤・▼▼=青)を添える。
   ========================================================================= */
.cmp-nature-control{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.cmp-nature-control select{ flex:1; min-width:0; }
.cmp-nature-chip{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:1px;
  padding:3px 4px;
  border-radius:6px;
  font-size:var(--fs-2xs);
  font-weight:800;
  line-height:1;
  border:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
}
.cmp-nature-chip .cmp-skill-icon{ width:11px; height:11px; }
.cmp-nature-chip.is-up{
  color:var(--danger);
  border-color:var(--danger);
}
.cmp-nature-chip.is-down{
  color:var(--info);
  border-color:var(--info);
}

/* =========================================================================
   編集モード / シェアモード の切り替え
   ========================================================================= */
.cmp-view-mode-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.cmp-view-mode-left{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  min-width:0;
  gap:8px;
}
.cmp-bulk-load-btn{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-bottom-width:3px;
  border-radius:9px;
  background:linear-gradient(var(--paper), var(--paper-dim));
  color:var(--ink);
  box-shadow:0 2px 0 var(--line), 0 3px 7px rgba(35,43,72,.14);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.cmp-bulk-load-btn:hover{ background:var(--paper); }
.cmp-bulk-load-btn:active{
  transform:translateY(2px);
  box-shadow:0 0 0 var(--line), 0 1px 3px rgba(35,43,72,.14);
}
.cmp-bulk-load-btn .ui-icon{ flex:none; }
.cmp-share-tools{
  display:flex;
  gap:6px;
}
.cmp-share-tools[hidden]{ display:none; }
.cmp-share-tools .cmp-io-btn{
  padding:6px 12px;
  font-size:var(--fs-2xs);
}
.cmp-share-msg{
  margin:0 0 8px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-share-msg[hidden]{ display:none; }
.cmp-share-msg.is-error{ color:var(--danger); }

/* =========================================================================
   シェアモード: 5匹ぶんを横スクロールなしで並べる閲覧専用カード。
   カード = gridの1列。項目ごとの行(アイコン/名前/食材/…)を固定の行番号に置き、
   subgrid対応ブラウザでは5枚で同じ項目が同じ高さにそろう。
   ========================================================================= */
.cmp-share-boards{
  display:grid;
  grid-template-columns:minmax(88px, max-content) repeat(5, minmax(0, 190px));
  /* A〜Eの内容で最も高いカードを基準に、全カードの行高を揃える。 */
  grid-template-rows:repeat(9, auto) auto;
  column-gap:6px;
  row-gap:4px;
  justify-content:start;
  align-items:start;
}
/* [hidden]属性 + display:grid/flex の優先度対策(このサイト共通の注意点)。
   編集モードのボード一覧もシェアモード中はhiddenで隠すため両方に効かせる。 */
.cmp-share-boards[hidden]{ display:none !important; }
.cmp-boards[hidden]{ display:none !important; }
.cmp-share-export{
  display:block;
  color:var(--ink);
}
.cmp-share-export-header{
  margin-bottom:16px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.cmp-share-export-header-title{
  margin-bottom:2px;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:800;
}
.cmp-share-export-cond-line{
  flex-wrap:wrap;
  overflow:visible;
  row-gap:4px;
}
.cmp-share-export-results{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:12px;
  row-gap:16px;
  margin-top:16px;
  align-items:start;
}
/* 「チームで比較」の保存画像は、もとの縦並び(1列)のレイアウトに戻す
   (週給・食材の2枚だけなので折り返す必要がなく、食材カードは幅を確保したい)。 */
.cmp-share-export-results.cmp-share-export-results-stack{
  display:flex;
  flex-direction:column;
  row-gap:16px;
}
.cmp-share-export-results > .cmp-graph-row,
.cmp-share-export-results > .cmp-sum-card,
.cmp-share-export-skill-card{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:12px 10px;
  background:var(--paper);
  border:0;
  border-radius:12px;
}
.cmp-share-export-results > .cmp-graph-row,
.cmp-share-export-results > .cmp-share-export-skill-card{
  /* 保存画像ではグラフを含むカード自体を80%に縮小し、各列の中央へ置く。 */
  width:100%;
  zoom:.8;
  justify-self:center;
}
.cmp-share-export-results > .cmp-graph-row .cmp-graph-bars{ justify-content:center; }
.cmp-share-export-results > .cmp-sum-card + .cmp-sum-card{ margin-top:0; }
.cmp-share-export-skill-card{
  margin-top:0;
}
/* 保存画像の出典クレジット(左寄せ2行)。aタグに専用の色指定はせず、ブラウザ既定の
   リンク色+下線のまま「リンクだと分かる見た目」だけを出す(実際には静止画なので押せない)。 */
.cmp-share-export-footer{
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid var(--line);
  text-align:left;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-share-export-footer-line + .cmp-share-export-footer-line{ margin-top:2px; }
.cmp-share-legend{
  grid-column:1;
  grid-row:1 / span 9;
  align-self:stretch;
  display:grid;
  grid-template-rows:subgrid;
  grid-template-rows:subgrid;
  row-gap:inherit;
  align-content:start;
  padding:6px 5px 8px 0;
  color:var(--ink-soft);
}
.cmp-share-legend-row{
  min-width:0;
  display:flex;
  align-items:center;
  padding-right:4px;
  font-size:9px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
}
.cmp-share-legend-row.has-divider{ border-top:1px solid var(--line); }
.cmp-share-legend-sub{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(4, minmax(17px, auto));
  row-gap:2px;
  align-content:start;
}
.cmp-share-legend-sub > span,
.cmp-share-legend-sub-pair > span{
  display:flex;
  align-items:center;
  gap:3px;
}
.cmp-share-legend-sub-pair{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.cmp-share-legend-sub .cmp-skill-icon{
  flex:none;
}
.cmp-share-card{
  grid-row:1 / span 9;
  display:grid;
  grid-template-rows:subgrid;
  grid-template-rows:subgrid;
  row-gap:inherit;
  align-content:start;
  align-self:stretch;
  box-sizing:border-box;
  padding:6px 5px 8px;
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:10px;
}
.cmp-share-card-wrap{
  grid-row:1 / span 10;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  row-gap:4px;
}
.cmp-share-daily-legend{
  grid-column:1;
  grid-row:10;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:4px 5px 5px 0;
  color:var(--ink-soft);
  font-size:9px;
  font-weight:800;
  line-height:17px;
}
.cmp-share-daily-legend div:first-of-type{ margin-top:3px; }
.cmp-share-card.is-interactive{
  cursor:pointer;
  transition:box-shadow .16s ease, transform .16s ease;
}
.cmp-share-card.is-interactive:hover{
  box-shadow:0 4px 12px rgba(17,21,46,.14);
  transform:translateY(-1px);
}
.cmp-share-card.is-interactive:active{ transform:translateY(0); }
.cmp-share-card.is-interactive:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
}
.cmp-share-card.is-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--ink-soft);
  border-style:dashed;
}
.cmp-share-empty-label{
  font-size:var(--fs-2xs);
  font-weight:700;
}
/* シェアカードから開く個体編集モーダル。中身は既存の編集ボードを移動して使うため、
   モーダルを閉じた後も入力状態・保存済み個体との紐付けをそのまま保つ。 */
.cmp-share-edit-modal .modal-card{
  max-width:min(94vw, 520px);
  box-sizing:border-box;
}
.cmp-share-edit-card > [data-share-edit-board]{ min-width:0; }
.cmp-share-edit-card > [data-share-edit-board] > .cmp-board{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  flex:none;
}
/* カード内の各行。項目ごとに横位置(中身の並び)をそろえる */
.cmp-share-row{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px;
}
.cmp-share-row.has-divider{
  border-top:1px solid var(--line);
  padding-top:3px;
}
.cmp-share-row-head{
  flex-wrap:nowrap;
  justify-content:space-between;
  gap:3px;
}
.cmp-share-row-face{ justify-content:center; }
.cmp-share-row-name{
  flex-direction:column;
  align-items:center;
  gap:0;
  text-align:center;
}
.cmp-share-row-ing{ align-content:flex-start; }
.cmp-share-row-nature{
  flex-wrap:nowrap;
  align-content:flex-start;
  white-space:nowrap;
}
/* サブスキルは編集モードと同じ2×4の並び。行自体をgridにする */
.cmp-share-row-sub{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 3px;
  align-content:start;
}
.cmp-share-subcell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:17px;
  padding:1px;
  border:1px solid transparent;
  border-radius:4px;
}
.cmp-share-subcell .cmp-skill-icon{ width:13px; height:13px; }
.cmp-share-subcell .cmp-share-reservation-lock{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  flex:none;
  color:var(--ink-soft);
  padding:1px;
  box-sizing:content-box;
  border:1px solid var(--ink-soft);
  border-radius:999px;
  background:var(--paper);
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.cmp-share-subcell.is-reservation-pending > .cmp-skill-icon{ opacity:.3; }
.cmp-share-subcell.is-reservation-pending .cmp-share-reservation-lock{
  color:var(--ink-soft);
  opacity:.75;
}
.cmp-share-sublevel{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:900;
  line-height:1;
  color:var(--ink-soft);
}
.cmp-share-subcell.is-on{
  background:var(--paper-dim);
  border-color:var(--line);
}
.cmp-share-subcell.is-on.is-orange{ border-color:var(--warning); }
.cmp-share-subcell.is-on.is-blue{ border-color:var(--info); }
.cmp-share-subcell.is-on.is-reservation-pending.is-orange{
  border-color:color-mix(in srgb, var(--warning) 40%, var(--line));
}
.cmp-share-subcell.is-on.is-reservation-pending.is-blue{
  border-color:color-mix(in srgb, var(--info) 40%, var(--line));
}
.cmp-share-subcell.is-off .cmp-skill-icon{ opacity:.16; }
/* S系(灰色)は紙色に埋もれやすいため、シェアモードだけ濃色+少し大きめで表示する。 */
.cmp-share-subcell.is-on.is-gray{
  background:var(--paper);
  border-color:var(--ink-soft);
}
.cmp-share-subcell.is-on.is-reservation-pending.is-gray{
  border-color:color-mix(in srgb, var(--ink-soft) 40%, var(--line));
}
.cmp-share-subcell.is-on.is-gray .cmp-skill-icon-gray{ color:var(--ink); }
.cmp-share-subcell.is-off .cmp-skill-icon-gray{ opacity:.38; }
.cmp-share-subcell.is-on.is-gray .cmp-share-sublevel{ color:var(--ink); }
.cmp-share-subcell.is-on.is-blue .cmp-share-sublevel{ color:var(--info); }
.cmp-share-subcell.is-on.is-orange .cmp-share-sublevel{ color:var(--warning); }
.cmp-share-subcell.is-off .cmp-share-sublevel{ opacity:.38; }
.cmp-share-legend-sub .cmp-skill-icon-gray{ color:var(--ink); }
.cmp-share-badge{
  flex:none;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
}
.cmp-share-lv{
  flex:none;
  font-size:9px;
  font-weight:800;
  color:var(--ink-soft);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 4px;
  font-variant-numeric:tabular-nums;
}
.cmp-share-row-face img{
  width:40px;
  height:40px;
  object-fit:contain;
}
.cmp-share-row-name{
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.cmp-share-nick{
  display:block;
  color:var(--navy);
}
.cmp-share-species{
  display:block;
  font-size:9px;
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-share-nature{
  display:inline-flex;
  align-items:center;
  gap:1px;
  padding:2px 3px;
  border-radius:5px;
  font-size:9px;
  font-weight:800;
  line-height:1;
  border:1px solid var(--line);
}
.cmp-share-nature .cmp-skill-icon{ width:12px; height:12px; }
.cmp-share-nature.is-up{
  color:var(--danger);
  border-color:var(--danger);
}
.cmp-share-nature.is-down{
  color:var(--info);
  border-color:var(--info);
}
.cmp-share-nature.is-none{
  color:var(--ink-soft);
  border-color:var(--line);
  justify-content:center;
  min-width:18px;
}
.cmp-share-row-ing img{
  width:18px;
  height:18px;
  object-fit:contain;
}
.cmp-share-flag{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:1px 3px;
  border-radius:4px;
  font-size:8px;
  font-weight:800;
  color:var(--ink-soft);
  background:var(--paper-dim);
  border:1px solid var(--line);
  white-space:nowrap;
}
.cmp-share-flag img{ width:11px; height:11px; object-fit:contain; }
.cmp-share-flag .cmp-skill-icon{ width:11px; height:11px; }
.cmp-share-itsuiku-off{
  color:var(--ink-soft);
  opacity:.58;
  background:var(--paper-dim);
  border-style:dashed;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.cmp-share-itsuiku-off .lucide,
.cmp-share-itsuiku-off [data-icon]{
  flex:none;
  margin-right:1px;
}
.cmp-share-itsuiku-on{
  color:var(--success, #2f9e44);
  border-color:var(--success, #2f9e44);
}
.cmp-share-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  padding:1px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper-dim);
}
.cmp-share-ribbon img{ width:100%; height:100%; object-fit:contain; }
.cmp-share-ribbon-off{
  color:var(--ink-soft);
  opacity:.45;
}
.cmp-share-ribbon-off .lucide,
.cmp-share-ribbon-off [data-icon]{
  width:14px;
  height:14px;
}
.cmp-share-daily{
  display:grid;
  grid-template-rows:18px 17px 17px 32px;
  box-sizing:border-box;
  min-height:89px;
  padding:4px 5px 5px;
  border-top:1px solid var(--line);
  background:var(--paper);
  border-radius:0 0 8px 8px;
}
.cmp-share-daily-title{
  margin:0;
  color:var(--ink-soft);
  font-size:9px;
  font-weight:800;
  text-align:center;
}
.cmp-share-daily-metric{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  padding:1px 2px;
  color:var(--ink-soft);
  font-size:8px;
  line-height:1.15;
  border-top:1px solid var(--line);
}
.cmp-share-daily-ingredient-detail{
  padding:2px 2px 0;
  color:var(--ink-soft);
  font-size:7px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.cmp-share-daily-metric:first-of-type{
  border-top:0;
}
.cmp-share-daily-ingredients{
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:2px 5px;
  align-content:flex-start;
  overflow:hidden;
}
.cmp-share-daily-ingredient{
  display:inline-flex;
  align-items:center;
  gap:1px;
  font-size:8px;
  font-variant-numeric:tabular-nums;
}
.cmp-share-daily-ingredient img{
  width:15px;
  height:15px;
  object-fit:contain;
}
.cmp-share-daily-metric .lucide,
.cmp-share-daily-metric [data-icon]{
  color:var(--navy);
  margin-bottom:1px;
}
.cmp-share-daily-metric b{
  color:var(--ink);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.cmp-share-daily-label{ white-space:nowrap; margin-right:auto; }

/* 単独利用する共通ポケモン選択モーダルも、個体入力の候補行と同じ見た目。 */
.cmp-pokemon-pick-list button.cmp-picker-row{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:var(--ink);}
.cmp-pokemon-pick-list button.cmp-picker-row:hover{background:var(--paper-dim);}
.cmp-pokemon-pick-list button.cmp-picker-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}