/* ブランド/ニュートラルの色トークンはcss/tokens.cssが定義済み。
     このページ固有の色(スキル/食材チャートの色)とcontent-maxだけをここで足す。 */
  :root{
    --bar-skill:#8FB0E5;
    --bar-ingredient:#8FC79B;
    --content-max:900px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0 0 92px;background:var(--paper-dim);color:var(--ink);font-family:"Noto Sans JP",sans-serif;}
  header{
    background:var(--header-bg);
    color:var(--on-dark);
    padding:20px 16px 16px;
    text-align:left;
    position:relative;
  }
  .app-version{
    position:absolute;
    top:8px;
    right:12px;
    font-size:var(--fs-2xs);
    color:var(--moon);
    opacity:.85;
    white-space:nowrap;
  }
  .build-time{
    position:absolute;
    top:21px;
    right:12px;
    font-size:var(--fs-2xs);
    color:var(--moon);
    opacity:.6;
    white-space:nowrap;
  }
  header h1{
    margin:0;
    font-weight:900;
    font-size:var(--fs-lg);
    letter-spacing:.02em;
  }
  header .sub{
    margin-top:4px;
    font-size:var(--fs-sm);
    color:var(--moon);
  }

  /* ---- タブ切り替え ----
     料理「備蓄」のパターン切り替えと同じ、台紙からラベルが立ち上がる
     インデックス式。ラベルが長い機能もあるため、横スクロール1行で扱う。 */
  .tab-bar{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:flex-end;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    /* 横スクロールの最中に指が斜めにぶれても縦(ページ)へ持っていかれないよう、
       このバー自体のジェスチャーを横方向だけに限定する。 */
    touch-action:pan-x;
    scrollbar-width:thin;
    gap:14px;
    padding:9px 16px 0;
    background:var(--paper-dim);
    border-bottom:1px solid var(--line);
  }
  .tab-btn{
    position:relative;
    display:flex;
    flex:none;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid var(--line);
    border-bottom:none;
    border-radius:8px 8px 0 0;
    background:var(--paper-dim);
    color:var(--ink-soft);
    font-weight:700;
    font-size:var(--fs-xs);
    padding:7px 12px 8px;
    cursor:pointer;
    white-space:nowrap;
  }
  .tab-btn .tab-icon{ width:15px; height:15px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
  .tab-btn .tab-icon .ui-icon{ width:15px; height:15px; display:block; }
  /* 図鑑ページでは図鑑タブだけを表示し、個体タブはsimulator.htmlに分離する。 */
  html[data-pokedex-tab-mode="individual"] #tabBar .tab-btn:is([data-tab="list"], [data-tab="supercompare"], [data-tab="berry"], [data-tab="ingredient"], [data-tab="skill"], [data-tab="ingpattern"], [data-tab="basespeed"], [data-tab="dreamlottery"], [data-tab="dreamfacelist"]),
  html[data-pokedex-tab-mode="individual"] #panel-list,
  html[data-pokedex-tab-mode="individual"] #panel-supercompare,
  html[data-pokedex-tab-mode="individual"] #panel-berry,
  html[data-pokedex-tab-mode="individual"] #panel-ingredient,
  html[data-pokedex-tab-mode="individual"] #panel-skill,
  html[data-pokedex-tab-mode="individual"] #panel-ingpattern,
  html[data-pokedex-tab-mode="individual"] #panel-basespeed,
  html[data-pokedex-tab-mode="individual"] #panel-dreamlottery,
  html[data-pokedex-tab-mode="individual"] #panel-dreamfacelist,
  html[data-pokedex-tab-mode="pokedex"] #tabBar .tab-btn:is([data-tab="exp"], [data-tab="compare"], [data-tab="box"], [data-tab="hyouka"], [data-tab="dreamface"], [data-tab="progress"], [data-tab="dreamlottery"]),
  html[data-pokedex-tab-mode="pokedex"] #panel-exp,
  html[data-pokedex-tab-mode="pokedex"] #panel-compare,
  html[data-pokedex-tab-mode="pokedex"] #panel-box,
  html[data-pokedex-tab-mode="pokedex"] #panel-hyouka,
  html[data-pokedex-tab-mode="pokedex"] #panel-dreamface,
  html[data-pokedex-tab-mode="pokedex"] #panel-progress,
  html[data-pokedex-tab-mode="pokedex"] #panel-dreamlottery{
    display:none !important;
  }
  /* 機能不十分で非公開中のタブ(#dreamlottery)。個体／図鑑どちらの入口でも
     割り当て外のため、上のカテゴリ別ルールでタブバーと内容を非表示にする。 */
  .tab-btn:disabled{ opacity:.4; cursor:default; }
  .tab-btn.active{
    z-index:1;
    margin-bottom:-1px;
    background:var(--paper);
    border-color:var(--navy);
    color:var(--ink);
    box-shadow:0 1px 0 var(--paper);
  }
  .tab-btn[data-tab="dreamfacelist"].active{
    border-color:var(--dreamface-theme);
    color:var(--dreamface-theme-ink);
  }
  .tab-panel{ display:none; }
  .tab-panel.show{ display:block; }
  /* ---- 食材パターン(ingredient-calc)をサイトのトンマナに合わせる ----
     色や見た目は.ingcalcのCSS変数の上書きだけで済ませ、css/ingredientCalc.css
     本体側の見た目の値は極力変更しない方針。
     --moonはライト/ダークモードで固定色のため、選択行の強調も
     カレンダーの今日セル強調と同じ手法(半透明の金色)で統一している。 */
  .ingcalc{
    --ic-bg:transparent;
    --ic-card:var(--paper);
    --ic-ink:var(--ink);
    --ic-ink-sub:var(--ink-soft);
    --ic-line:var(--line);
    --ic-accent:var(--navy);
    --ic-accent-bg:var(--paper-dim);
    --ic-mark:var(--moon);
    --ic-mark-deep:var(--navy-deep);
    --ic-mark-row:rgba(246,203,90,.14);
    --ic-good:#7CB342;
    --ic-bad:#E4574D;
    --ic-font:inherit;
    padding:0;
    max-width:none;
  }

  /* ---- 経験値計算ツール(expCalculator)をサイトのトンマナに合わせる ----
     色や見た目は.ec-toolのCSS変数の上書きだけで済ませ、css/expCalculator.css
     本体側の見た目の値は極力変更しない方針(ingcalcと同じやり方)。 */
  .ec-tool{
    --ec-navy:var(--navy);
    --ec-navy-deep:var(--navy-deep);
    --ec-navy-soft:var(--ink-soft);
    --ec-moon:var(--moon);
    --ec-moon-soft:var(--moon-soft);
    --ec-paper:var(--paper-dim);
    --ec-card:var(--paper);
    --ec-line:var(--line);
    --ec-text-sub:var(--ink-soft);
    /* --ec-navy/--ec-moonは役割によって(通常の文字色 or 塗り背景)使われ方が違う。
       塗り背景として使う箇所の文字色は、この2つに任せてbg/文字色のペアで一緒に
       反転させる(--selected-bg/--selected-ink・--accent/--accent-inkと同じ考え方)。
       ダークモードでは--navyが明転する(暗地の強調色→明地の強調色になる)ため、
       文字色側もそれに追従させないと、地の色が明るくなった瞬間に文字が沈んでしまう。 */
    --ec-on-navy-fill:var(--selected-ink);
    --ec-on-moon-fill:var(--accent-ink);
    background:transparent;
    padding:0;
    max-width:none;
  }

  .ingpattern-credit{
    margin:14px 0 0;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    line-height:1.6;
  }
  .ingpattern-credit a{ color:var(--ink-soft); }

  /* おやすみリボンの段階アイコン。選択中の段階だけ出す */
  .ribbon-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    vertical-align:-4px;
    margin-left:4px;
  }

  main{
    max-width:var(--content-max);
    margin:0 auto;
    padding:16px;
  }
  .search-bar{
    position:relative;
    max-width:var(--content-max);
    margin:0 auto 16px;
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--fs-sm);
    color:var(--ink-soft);
  }
  .search-bar label{ font-weight:600; color:var(--ink); }
  /* ---- 名前検索の候補ドロップダウン(きのみ効率・シミュ「おてつだいシミュ」と同じ見た目) ----
     絞り込みはせず、選ぶとその行までスクロール+点滅するだけ(js/probabilityTab.js) */
  .search-picker-dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    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;
  }
  .search-picker-dropdown.show{ display:block; }
  .search-picker-row{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 5px;
    border-radius:7px;
    cursor:pointer;
  }
  .search-picker-row:hover{ background:var(--paper-dim); }
  .search-picker-row img{ width:22px; height:22px; object-fit:contain; flex:none; }
  .search-picker-row span{
    font-size:var(--fs-2xs);
    color:var(--ink);
  }
  .search-picker-empty{
    padding:8px 6px;
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    text-align:center;
  }
  .action-row{
    max-width:var(--content-max);
    margin:0 auto 16px;
    padding:0 16px;
  }
  .search-bar input{
    flex:none;
    width:160px;
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:8px;
    /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
    font-size:16px;
    color:var(--ink);
    background:var(--paper);
  }

  /* ---- お手伝いスピード表 ---- */
  .speed-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:10px;
    cursor:pointer;
    transition:background-color .5s ease;
  }
  .speed-row.tap-active, .speed-row.search-highlight{ background-color:var(--moon-soft); }
  .speed-label{
    flex:none;
    width:64px;
    text-align:center;
    font-weight:700;
    font-size:var(--fs-md);
    color:var(--navy);
    background:var(--paper-dim);
    border:1px solid var(--line);
    border-radius:8px;
    padding:6px 4px;
  }
  .icons{
    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .icons figure{
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:52px;
  }
  .icons img{
    width:44px;
    height:44px;
    object-fit:contain;
    background:var(--paper-dim);
    border-radius:8px;
    border:1px solid var(--line);
  }
  .icons .ph{
    width:44px;
    height:44px;
    border-radius:8px;
    background:var(--paper-dim);
    border:1px dashed var(--line);
  }
  .icons figcaption{
    margin-top:2px;
    /* 52px幅の中で名前を1行に収めるための専用サイズ。--fs-2xsだと
       「ライチュウ」等5文字級の名前が折り返してしまうため、スケールの
       最小段よりさらに小さいこのサイズを維持する。 */
    font-size:.6rem;
    line-height:1.1;
    text-align:center;
    color:var(--ink-soft);
    word-break:break-all;
  }

  @keyframes tap-pulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.3); }
  }
  .tap-pulse{
    animation:tap-pulse .5s ease-in-out 3;
    will-change:transform;
  }

  /* ---- スキル確率表 / 食材確率表 (ランキング行) ---- */
  .row{
    display:grid;
    grid-template-columns:36px 44px minmax(0,1fr) auto auto;
    align-items:center;
    gap:12px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 12px;
    margin-bottom:8px;
    cursor:pointer;
    transition:background-color .5s ease;
  }
  .row.tap-active, .row.search-highlight{ background-color:var(--moon-soft); }
  .rank{
    font-weight:900;
    color:var(--ink-soft);
    text-align:center;
    font-size:var(--fs-base);
  }
  .row:nth-child(-n+3) .rank{ color:var(--navy); }
  .icon-wrap img{
    width:40px;
    height:40px;
    object-fit:contain;
    border-radius:8px;
    background:var(--paper-dim);
    border:1px solid var(--line);
    display:block;
  }
  .icon-wrap .ph{
    width:40px;
    height:40px;
    border-radius:8px;
    background:var(--paper-dim);
    border:1px dashed var(--line);
  }
  /* はみ出したぶんは切り落とす。名前は…で省略され、食材アイコンは入りきらない端末で
     右端が欠ける(詳しい内訳は行タップのポップアップで見られる) */
  .info{ min-width:0; overflow:hidden; }
  .info .name{
    font-weight:600;
    font-size:var(--fs-base);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .info .type{
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
  }
  .info .skill{
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* 食材確率表では、行にはA/B/Cのアイコンだけを並べる(名前も個数も出さない)。
     並び順がそのままA→B→Cを表す。詳しい内訳は行タップのポップアップに任せている。 */
  .info .ingredients{
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:3px;
  }
  .info .ingredients img{
    width:22px;
    height:22px;
    object-fit:contain;
    flex:none;
  }
  .info .ing-none{ font-size:var(--fs-xs); color:var(--ink-soft); }
  /* 料理タブ: 使用食材はアイコン+個数で並べる(食材確率タブの.ingredientsと違い、
     こちらは個数そのものが料理を見分ける手がかりになるため常に表示する) */
  .rcp-ings{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-top:3px;
  }
  .rcp-ing{
    display:inline-flex;
    align-items:center;
    gap:2px;
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
  }
  .rcp-ing img{ width:20px; height:20px; object-fit:contain; flex:none; }
  /* 料理名は食材と違い名前そのものが手がかりになるため、省略せず折り返す */
  .rcp-row .info .name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
  /* カテゴリの折りたたみを廃止したため、行ごとにカテゴリ名を小さく添える(.info .typeを流用) */
  .rcp-name-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
  .rcp-row.is-tappable{ cursor:pointer; }
  .rcp-row.is-tappable:hover{ border-color:var(--navy); }
  /* 合計食材数をカテゴリ色分けの丸で囲む(カレー=オレンジ/サラダ=黄緑/デザート=ピンク)。
     背景色は行の組み立て時にJS側(js/recipeList.jsのRECIPE_CATEGORY_COLORS)がインラインで付ける */
  .rcp-row .rank{ display:flex; align-items:center; justify-content:center; }
  .rcp-cat-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    font-weight:800;
    font-size:var(--fs-2xs);
    color:#20243B;
    line-height:1;
  }
  @media (max-width:520px){
    .rcp-cat-badge{ width:25px; height:25px; }
  }
  /* なべ容量の上限フィルタ。実際のゲーム仕様(かけら拡張フェーズ・いいキャンプチケット・
     鍋拡張スキル・日曜日/イベントボーナス)から上限値を計算する。下限・スライダは廃止。
     見出しは「条件・サブスキル」と同じopt-fold(囲み無し・矢印のみ)にし、いいキャンプ
     チケットのトグルだけは畳んでいても操作できるよう見出し行(summary)の中に置く。 */
  .rcp-nabe-fold > summary{ flex-wrap:wrap; }
  /* summary内のトグルは、クリックしても開閉を誤発火させないようJS側でpreventDefaultする。
     見出しより主張しすぎない小さめの補助トグルにする。あり=緑、なし=グレー。 */
  .rcp-ticket-label{ font-size:var(--fs-2xs); color:var(--ink-soft); }
  .rcp-nabe-fold > summary .rcp-ticket-toggle{
    padding:2px;
  }
  .rcp-nabe-fold > summary .rcp-ticket-toggle button{
    padding:3px 9px;
    font-size:var(--fs-2xs);
    line-height:1.25;
  }
  .rcp-ticket-toggle button.active[data-val="on"]{
    background:#4C9A5A;
    color:#fff;
  }
  .rcp-ticket-toggle button.active[data-val="off"]{
    background:var(--line);
    color:var(--ink-soft);
  }
  .rcp-nabe-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:9px;
  }
  .rcp-nabe-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 10px;
    font-size:var(--fs-xs);
    color:var(--ink);
  }
  .rcp-nabe-row select, .rcp-nabe-row input[type="number"]{
    padding:4px 6px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:var(--fs-xs);
    color:var(--ink);
    background:var(--paper);
  }
  .rcp-nabe-row input[type="number"]{ width:64px; }
  /* 日曜日/イベントボーナスは補助設定なので、他の行より小さく控えめに表示する */
  .rcp-nabe-row-sub{ font-size:var(--fs-2xs); color:var(--ink-soft); }
  .rcp-nabe-row-sub .filter-chip{ font-size:var(--fs-2xs); padding:3px 8px; }
  .rcp-nabe-row-sub input[type="number"]{ font-size:var(--fs-2xs); padding:3px 5px; width:52px; }
  .rcp-nabe-note{ margin:2px 0 0; font-size:var(--fs-2xs); color:var(--ink-soft); }
  /* スキルレベル・発動回数はiOSでホイール選択できるselectに統一し、
     料理パワーアップの設定全体を1行に収める。 */
  .rcp-nabe-skill-row{
    flex-wrap:nowrap;
    gap:5px;
    white-space:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .rcp-nabe-skill-row::-webkit-scrollbar{ display:none; }
  .rcp-nabe-skill-row label{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .rcp-nabe-row .rcp-nabe-skill-select{
    width:44px;
    min-width:44px;
    padding:4px 5px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
  }
  /* 現在のレベルの1回あたり増加量、発動回数まで含めた合計増加量 */
  .rcp-nabe-skill-effect{ color:var(--ink-soft); }
  .rcp-nabe-skill-total{ font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }
  /* 料理ポップアップ。数直線グラフの目盛りが窮屈にならないよう、既定のモーダル幅より広めにする */
  #recipeChartModal .modal-card{ max-width:min(94vw, 480px); }
  .rcp-modal-head{ display:flex; align-items:center; gap:10px; margin-right:28px; }
  .rcp-modal-head img{ width:44px; height:44px; object-fit:contain; border-radius:8px; background:var(--paper-dim); border:1px solid var(--line); flex:none; }
  .rcp-modal-title{ font-weight:700; font-size:var(--fs-md); }
  .rcp-modal-note{ margin:10px 0; font-size:var(--fs-xs); color:var(--ink-soft); }
  #recipeChartScope{ margin-bottom:10px; }
  #recipeChartTypes{ margin-bottom:10px; }
  /* 数値は指標ごとに1列。1列目(確率)のあとに、発動回数や獲得数の列が横に並ぶ。
     並べ替えに使っている列は .is-sorted で強調する。 */
  .value{
    text-align:right;
    min-width:104px;
  }
  .value-group{
    display:flex;
    gap:14px;
  }
  .value-extra{
    text-align:right;
    min-width:86px;
  }
  .metric-label{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.04em;
    color:var(--ink-soft);
    margin-bottom:2px;
  }
  /* 引きの名前(AAA/ABB)の横に、その個体で増える食材のアイコンを添える */
  .metric-label img{
    width:17px;
    height:17px;
    object-fit:contain;
    flex:none;
  }
  .value .pct{
    font-weight:700;
    font-size:var(--fs-md);
    color:var(--navy);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
  }
  .value-extra .pct{
    font-weight:600;
    font-size:var(--fs-sm);
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
  }
  /* 獲得数順(食材を絞り込んだとき)の主役数値に添えるアイコン。指定しないと
     画像の実寸で表示されてしまう */
  .value .pct img, .value-extra .pct img{
    width:16px;
    height:16px;
    object-fit:contain;
    flex:none;
  }
  .value.is-sorted .pct, .value-extra.is-sorted .pct{
    color:var(--navy);
    font-weight:800;
  }
  .value-extra.is-sorted .metric-label{ color:var(--navy); }
  .value .bar-track, .value-extra .bar-track{
    margin-top:4px;
    margin-left:auto;
    width:94px;
    height:6px;
    border-radius:3px;
    background:var(--paper-dim);
    overflow:hidden;
  }
  .value-extra .bar-track{ width:76px; height:4px; }
  /* 並べ替えに使っていない列のバーは、主役の列より控えめにする */
  .value:not(.is-sorted) .bar-fill, .value-extra:not(.is-sorted) .bar-fill{ opacity:.45; }
  .value .bar-fill{
    height:100%;
    border-radius:3px;
  }
  .value .pct, .value-extra .pct, .metric-sub{ font-variant-numeric:tabular-nums; }
  /* 主役の数値の下に添える控えめな行(生産量のエナジーなど)。
     食材確率タブでは食材ごとの内訳(複数行になりうる)を出すため、折り返しを許可し、
     .value列の幅に収まる程度の最大幅で止める(でないとgridの列自体が広がって
     隣の列や名前列を圧迫してしまう)。 */
  .metric-sub{
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    margin-top:1px;
    white-space:normal;
    max-width:112px;
    text-align:right;
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:2px;
  }
  /* アイコン+数字の内訳(食材確率タブなど)。指定しないと画像の実寸で表示されてしまう */
  .metric-sub img{
    width:13px;
    height:13px;
    object-fit:contain;
    flex:none;
    vertical-align:middle;
  }
  .value-extra.is-sorted .metric-sub{ color:var(--ink); }
  #panel-skill .value .bar-fill{ background:var(--bar-skill); }
  #panel-ingredient .value .bar-fill{ background:var(--bar-ingredient); }
  /* スキル確率表のバーは、絞り込みチップと同じ系統色にする。
     どのスキル系統が上位を占めているかが、ランキングを流し見るだけで分かる。 */
  #panel-skill .bar-fill[data-group="energy"]    { background:#E0A63C; }
  #panel-skill .bar-fill[data-group="shard"]     { background:#C58AD8; }
  #panel-skill .bar-fill[data-group="genki"]     { background:#5FBE7E; }
  #panel-skill .bar-fill[data-group="help"]      { background:#E08A5F; }
  #panel-skill .bar-fill[data-group="ingredient"]{ background:#7FA8DE; }
  #panel-skill .bar-fill[data-group="cook"]      { background:#D96F8E; }
  #panel-skill .bar-fill[data-group="other"]     { background:#8E93B8; }
  /* 狭い画面では数値の列が並びきらないので、名前・アイコンの列を詰めて
     バーと文字を小さくする。それでも足りない場合は数値の列を縦に積む。 */
  @media (max-width:760px){
    .row{ grid-template-columns:28px 36px minmax(0,1fr) auto auto; gap:8px; }
    .value{ min-width:72px; }
    .value-extra{ min-width:62px; }
    .value-group{ gap:8px; }
    .value .bar-track{ width:64px; }
    .value-extra .bar-track{ width:54px; }
    .value .pct{ font-size:var(--fs-sm); }
    .value-extra .pct{ font-size:var(--fs-xs); }
  }
  @media (max-width:520px){
    /* 数値の列を縦に積んで横幅を空け、そのぶんを名前と食材アイコンに回す */
    .value-group{ flex-direction:column; gap:5px; }
    .value-extra{ min-width:58px; }
    .info .ingredients img{ width:18px; height:18px; }
  }
  /* 狭い画面では、名前と食材アイコンに幅を回すために数値まわりを一段詰める */
  @media (max-width:440px){
    .value{ min-width:64px; }
    .metric-sub{ font-size:var(--fs-2xs); }
  }
  @media (max-width:360px){
    .info .ingredients{ gap:3px; }
    .info .ingredients img{ width:16px; height:16px; }
  }

  /* ---- 折りたたみブロック (絞り込み / マップ) ----
     どちらも縦に長いので畳めるようにしてある。既定は開いた状態。
     閉じていても今の状態が分かるよう、見出しの右に要約(選択中の条件・件数)を出す。
     見出しは「条件・サブスキル」(opt-fold)と同じく、囲み(枠線・背景)や
     「開く/畳む」の文字バッジを持たない矢印マーカーだけの中見出しに統一している。 */
  .panel-fold{
    max-width:var(--content-max);
    margin:0 auto 14px;
    padding:0 16px;
  }
  .panel-fold > summary,
  .panel-fold > .fold-summary{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    list-style:none;
    padding:2px 0;
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--ink);
    user-select:none;
  }
  .panel-fold > summary::-webkit-details-marker{ display:none; }
  .panel-fold > summary::before{
    content:'';
    width:8px;
    height:8px;
    border-right:2px solid var(--ink-soft);
    border-bottom:2px solid var(--ink-soft);
    transform:rotate(-45deg);
    transition:transform .15s ease;
    flex:none;
    margin-left:2px;
  }
  .panel-fold[open] > summary::before{ transform:rotate(45deg); }
  /* details ではなく div+button にした折りたたみ(下の is-preview 用)。
     見た目は summary とそろえ、開閉は .is-open クラスで切り替える。
     <button>要素はブラウザ既定の枠線・背景(OSネイティブのボタン外観)を持つため、
     summaryにはそもそも無いこの見た目を明示的に消しておく必要がある。 */
  .panel-fold > .fold-summary{
    width:100%;
    text-align:left;
    font-family:inherit;
    border:none;
    background:none;
  }
  .panel-fold > .fold-summary::before{
    content:'';
    width:8px;
    height:8px;
    border-right:2px solid var(--ink-soft);
    border-bottom:2px solid var(--ink-soft);
    transform:rotate(-45deg);
    transition:transform .15s ease;
    flex:none;
    margin-left:2px;
  }
  .panel-fold.is-open > .fold-summary::before{ transform:rotate(45deg); }
  .panel-fold > .fold-summary .fold-note{ margin-left:auto; }
  .fold-note{
    margin-left:auto;
    font-size:var(--fs-xs);
    font-weight:400;
    color:var(--ink-soft);
    text-align:right;
  }
  .fold-body{ padding-top:12px; }

  /* is-preview は通常の開閉だけを行う。
     以前の「縮小して覗かせる」方式は、transform + mask の合成レイヤーが
     スクロール中に再合成される際、グラフが白く抜けることがあったため廃止する。 */
  .panel-fold.is-preview:not(.is-open) > .fold-body{
    display:none;
  }
  .panel-fold.is-preview > .fold-preview{ display:none; }
  .panel-fold.is-preview:not(.is-open) > .fold-preview{
    display:block;
    position:relative;
    margin-top:7px;
    overflow:hidden;
    cursor:pointer;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--paper-dim);
  }
  .fold-preview::after{
    content:"タップして開く";
    position:absolute;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    padding:3px 12px;
    border-radius:999px;
    background:var(--navy);
    color:var(--paper);
    font-size:var(--fs-2xs);
    font-weight:700;
    white-space:nowrap;
    pointer-events:none;
    box-shadow:0 2px 6px rgba(0,0,0,.18);
  }
  .fold-preview img{
    display:none;
    width:100%;
    height:190px;
    object-fit:cover;
    object-position:top;
  }
  .fold-preview.prob-map-preview img{
    height:240px;
    object-fit:fill;
    object-position:center;
  }
  html:not([data-theme]) .fold-preview img[data-preview-theme="light"],
  html[data-theme="light"] .fold-preview img[data-preview-theme="light"],
  html[data-theme="dark"] .fold-preview img[data-preview-theme="dark"],
  html[data-theme="dark-blue"] .fold-preview img[data-preview-theme="dark-blue"]{
    display:block;
  }

  /* ---- 絞り込み (メインスキル / 食材) ----
     どちらも「何も選んでいない＝全部表示」。選んだものはOR条件で足し合わせる。 */
  .filter-block{
    max-width:var(--content-max);
    margin:0 auto 14px;
    padding:0 16px;
  }
  .fold-body .filter-block{ padding:0; margin-bottom:12px; }
  .fold-body .filter-block:last-child{ margin-bottom:0; }

  /* 「最終進化のみ」など、単独のオン/オフ */
  .filter-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:var(--fs-sm);
    color:var(--ink);
    cursor:pointer;
    user-select:none;
  }
  .filter-toggle input{ width:16px; height:16px; accent-color:var(--navy); cursor:pointer; }

  /* 期待値計算の前提(レベル・サブスキルなど)。ふだんは触らない項目なので、
     既定では畳んでおいて絞り込み欄の場所を取らないようにする */
  .opt-fold > summary{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    list-style:none;
    user-select:none;
    padding:2px 0;
  }
  .opt-fold > summary::-webkit-details-marker{ display:none; }
  .opt-fold > summary::before{
    content:'';
    width:6px;
    height:6px;
    border-right:2px solid var(--ink-soft);
    border-bottom:2px solid var(--ink-soft);
    transform:rotate(-45deg);
    transition:transform .15s ease;
    flex:none;
  }
  .opt-fold[open] > summary::before{ transform:rotate(45deg); }
  .opt-fold > .opt-grid{ margin-top:9px; }

  /* 期待値計算の前提(レベル・サブスキルなど) */
  .opt-grid{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 16px;
  }
  .opt-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:var(--fs-xs);
    color:var(--ink);
  }
  .opt-item input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--navy); cursor:pointer; }
  .opt-item input[type="number"], .opt-item select{
    padding:4px 6px;
    border:1px solid var(--line);
    border-radius:6px;
    /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
    font-size:16px;
    color:var(--ink);
    background:var(--paper);
  }
  .opt-item input[type="number"]{ width:58px; }
  .opt-note{
    margin:8px 0 0;
    padding-left:1.1em;
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    line-height:1.6;
  }
  .opt-note li{ margin-bottom:2px; }
  .opt-note li:last-child{ margin-bottom:0; }

  /* ---- 並べ替えの切り替え ---- */
  .list-head{
    max-width:var(--content-max);
    margin:20px auto 8px;
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .list-head .section-heading{ margin:0; padding:0; }
  .sort-switch{
    margin-left:auto;
    display:inline-flex;
    flex-wrap:wrap;
    gap:4px;
    padding:3px;
    background:var(--paper-dim);
    border:1px solid var(--line);
    border-radius:999px;
  }
  .sort-switch button{
    font:inherit;
    font-size:var(--fs-xs);
    font-weight:700;
    padding:5px 12px;
    border:none;
    background:transparent;
    border-radius:999px;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .sort-switch button.active{
    background:var(--selected-bg);
    color:var(--selected-ink);
  }
  .filter-head{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:7px;
  }
  .filter-title{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); }
  .filter-count{ font-size:var(--fs-xs); color:var(--ink-soft); margin-left:auto; }
  .filter-clear{
    font:inherit;
    font-size:var(--fs-xs);
    padding:3px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink-soft);
    cursor:pointer;
  }
  .filter-clear:hover{ background:var(--paper-dim); }
  .filter-clear:disabled{ opacity:.4; cursor:default; }
  .filter-clear:disabled:hover{ background:var(--paper); }
  /* 一覧・グラフのモーダルを開く導線。入力欄や絞り込み項目ではなく、
     押して別画面を開くボタンだと分かるよう、アイコン・矢印・押下感を持たせる。 */
  .tab-open-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:38px;
    font:inherit;
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1.2;
    padding:8px 12px;
    border-radius:9px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 2px 0 var(--line);
    cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .1s ease;
  }
  .tab-open-btn:hover{
    background:var(--paper-dim);
    border-color:var(--ink-soft);
  }
  .tab-open-btn:active{
    transform:translateY(1px);
    box-shadow:0 1px 0 var(--line);
  }
  .tab-open-btn:focus-visible{
    outline:2px solid var(--selected-bg);
    outline-offset:2px;
  }
  .tab-open-btn-icon{
    width:18px;
    height:18px;
    flex:none;
    color:var(--navy);
  }
  .tab-open-btn::after{
    content:'›';
    margin-left:2px;
    color:var(--ink-soft);
    font-size:1.2em;
    line-height:1;
  }
  .filter-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .filter-chip{
    font:inherit;
    font-size:var(--fs-xs);
    line-height:1.2;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink-soft);
    cursor:pointer;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .filter-chip:hover{ background:var(--paper-dim); }
  .filter-chip.active{
    background:var(--navy);
    border-color:var(--navy);
    color:var(--paper);
    font-weight:700;
  }
  /* メインスキルは効果の系統で色分けする。選択していない間は下線だけで示し、
     選ぶと系統色で塗る(凡例を別に置かなくても対応が分かるように) */
  .filter-chip[data-group]{ border-bottom-width:2px; }
  .filter-chip[data-group="energy"]    { border-bottom-color:#E0A63C; }
  .filter-chip[data-group="shard"]     { border-bottom-color:#C58AD8; }
  .filter-chip[data-group="genki"]     { border-bottom-color:#5FBE7E; }
  .filter-chip[data-group="help"]      { border-bottom-color:#E08A5F; }
  .filter-chip[data-group="ingredient"]{ border-bottom-color:#7FA8DE; }
  .filter-chip[data-group="cook"]      { border-bottom-color:#D96F8E; }
  .filter-chip[data-group="other"]     { border-bottom-color:#8E93B8; }
  /* 料理タブのカテゴリ絞り込み。合計食材数の丸バッジと同じ配色に揃える */
  .filter-chip[data-group="curry"]  { border-bottom-color:#E8963C; }
  .filter-chip[data-group="salad"]  { border-bottom-color:#9ED14C; }
  .filter-chip[data-group="dessert"]{ border-bottom-color:#EC8FC0; }
  .filter-chip[data-group="curry"].active  { background:#E8963C; border-color:#E8963C; color:#20243B; }
  .filter-chip[data-group="salad"].active  { background:#9ED14C; border-color:#9ED14C; color:#20243B; }
  .filter-chip[data-group="dessert"].active{ background:#EC8FC0; border-color:#EC8FC0; color:#20243B; }
  .filter-chip[data-group].active{ border-color:currentColor; }
  .filter-chip[data-group="energy"].active    { background:#E0A63C; border-color:#E0A63C; color:#20243B; }
  .filter-chip[data-group="shard"].active     { background:#C58AD8; border-color:#C58AD8; color:#20243B; }
  .filter-chip[data-group="genki"].active     { background:#5FBE7E; border-color:#5FBE7E; color:#20243B; }
  .filter-chip[data-group="help"].active      { background:#E08A5F; border-color:#E08A5F; color:#20243B; }
  .filter-chip[data-group="ingredient"].active{ background:#7FA8DE; border-color:#7FA8DE; color:#20243B; }
  .filter-chip[data-group="cook"].active      { background:#D96F8E; border-color:#D96F8E; color:#20243B; }
  .filter-chip[data-group="other"].active     { background:#8E93B8; border-color:#8E93B8; color:#20243B; }

  /* 食材はアイコンで選ぶ。文字より一覧性が高く、行側の表示とも見た目がそろう */
  .filter-chip.ing-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 10px 4px 6px;
  }
  .filter-chip.ing-chip img{
    width:20px;
    height:20px;
    object-fit:contain;
    flex:none;
  }

  /* アイコンだけの1行モード(食材19種)。名前を出すと何行にもなるので、
     アイコンだけの丸ボタンを横に並べる。狭い画面では収まらないので横スクロールにする。 */
  .filter-chips.is-icon-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  .filter-chips.is-icon-row .filter-chip.ing-chip{
    flex:none;
    padding:3px;
    border-radius:50%;
    line-height:0;
  }
  .filter-chips.is-icon-row .filter-chip.ing-chip img{
    width:26px;
    height:26px;
  }
  /* 数値(食材エナジー)をアイコンの下に出す版。円ではなく縦積みの角丸にする
     (図鑑・食材/確率タブの絞り込みのみ。他のis-icon-row利用箇所には影響させない) */
  .filter-chips.is-icon-row .filter-chip.ing-chip.has-sublabel{
    flex-direction:column;
    gap:1px;
    padding:4px 3px 3px;
    border-radius:10px;
    line-height:normal;
  }
  .ing-chip-sublabel{
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }
  .filter-chip.ing-chip.active .ing-chip-sublabel{ color:var(--navy); }
  /* 選択中は塗りではなく縁取りで示す。中のアイコンを塗りつぶさないため */
  .filter-chips.is-icon-row .filter-chip.ing-chip.active{
    background:var(--paper);
    border-color:var(--navy);
    box-shadow:0 0 0 2px var(--navy) inset;
  }
  /* 収まらなくなる手前でアイコンを一段小さくして、横スクロール無しで済む幅を広げる */
  @media (max-width:880px){
    .filter-chips.is-icon-row .filter-chip.ing-chip img{ width:22px; height:22px; }
  }

  /* 2択の排他選択(食材ABC枠考慮/Aのみ、なべ容量の基準など)の切り替え */
  .filter-mode{
    display:inline-flex;
    flex-wrap:wrap;
    gap:4px;
    padding:3px;
    background:var(--paper-dim);
    border:1px solid var(--line);
    border-radius:999px;
  }
  .filter-mode button{
    font:inherit;
    font-size:var(--fs-xs);
    font-weight:700;
    padding:4px 12px;
    border:none;
    background:transparent;
    border-radius:999px;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .filter-mode button.active{
    background:var(--selected-bg);
    color:var(--selected-ink);
  }
  .filter-empty{
    max-width:var(--content-max);
    margin:0 auto;
    padding:24px 16px;
    text-align:center;
    font-size:var(--fs-sm);
    color:var(--ink-soft);
  }
  /* スキル確率・食材確率タブの「もっと見る」(config.maxRows使用時のみ出る) */
  .prob-load-more-wrap{
    display:flex;
    justify-content:center;
    padding:8px 0 4px;
  }

  .chart-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
  }
  .chart-head-label{ font-size:var(--fs-xs); font-weight:700; color:var(--ink); }

  /* ---- 食材ごとのドットプロット ----
     食材19種を縦に並べ、横軸は全行で共通の「1日のエナジー」の数直線。
     その食材を持つポケモンを1匹1点として置くので、同じ行の中でも行をまたいでも
     同じ目盛りで位置を比べられる。いちばん右の1匹だけアイコンで示す。
     アイコンの大きさは--ing-dot-sizeで一元管理する(マップ「出現フィールド」の
     --field-icon-sizeと同じ考え方)。既定値は狭い画面で自動的に縮小し、
     「表示サイズ」トグルで選ぶとどの画面幅でもその値を優先する。 */
  :root{ --ing-dot-size:24px; }
  @media (max-width:600px){ :root{ --ing-dot-size:19px; } }
  .hbar-list{ display:flex; flex-direction:column; gap:3px; }
  .dot-row{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    align-items:center;
    gap:10px;
  }
  .hbar-name{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }
  .hbar-name img{ width:20px; height:20px; object-fit:contain; flex:none; }
  .dot-lane{
    position:relative;
    /* アイコンを3段までずらして置くので、その高さを確保する */
    height:calc(var(--ing-dot-size) * 2.2);
    /* 目盛り線は JS 側で背景として敷く(全行で同じ位置に来る) */
    background-repeat:repeat-y;
    border-bottom:1px solid var(--line);
  }
  /* 0からその食材の最大値までの横バー。アイコンの下に敷いて、
     行ごとの長さ＝食材同士の差を一目で追えるようにする */
  .dot-bar{
    position:absolute;
    left:0;
    top:50%;
    height:calc(var(--ing-dot-size) * .33);
    margin-top:calc(var(--ing-dot-size) * -.167);
    border-radius:4px;
    background:var(--bar-ingredient);
    opacity:.35;
  }

  /* 1匹＝1アイコン。値が近いものは段(tier)を変えて縦にずらす */
  .dot{
    position:absolute;
    left:0;
    width:var(--ing-dot-size);
    height:var(--ing-dot-size);
    margin-left:calc(var(--ing-dot-size) / -2);
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:hidden;
    transition:opacity .12s ease, transform .12s ease, width .15s ease, height .15s ease, margin .15s ease;
  }
  .dot img{ width:calc(var(--ing-dot-size) * .875); height:calc(var(--ing-dot-size) * .875); object-fit:contain; }
  .dot.tier-0{ top:2px; }
  .dot.tier-1{ top:50%; margin-top:calc(var(--ing-dot-size) / -2); }
  .dot.tier-2{ bottom:2px; }
  /* 3段とも埋まった場所＝本当に密集しているところ。薄く小さくして背景の群れとして見せ、
     手前の子の邪魔をしないようにする(カーソルを合わせれば元の大きさで前に出る) */
  .dot.is-crowded{ opacity:.4; transform:scale(.72); z-index:1; }
  .dot:hover, .dot.is-crowded:hover{
    opacity:1;
    z-index:5;
    transform:scale(1.15);
    border-color:var(--navy);
  }
  /* いちばん稼げる1匹は縁を強調して、どれが最大かひと目で分かるようにする */
  .dot-top{
    border:2px solid var(--bar-ingredient);
    box-shadow:0 0 0 2px var(--paper);
    z-index:3;
    opacity:1 !important;
  }
  /* とくい/タイプの絞り込みに当てはまらないアイコンは除外せず薄く残す(マップと同じ考え方)。
     いちばん稼げる1匹(.dot-top)でも当てはまらなければ薄くする(opacity:1!importantに勝たせる) */
  .dot.dot-dim{ opacity:.25; }
  .dot.dot-dim:hover{ opacity:1; }
  .dot-top.dot-dim{ opacity:.35 !important; }
  .dot-top.dot-dim:hover{ opacity:1 !important; }
  .dot-axis .dot-lane{ height:16px; border-bottom:0; background-image:none !important; }
  .dot-tick{
    position:absolute;
    top:0;
    transform:translateX(-50%);
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  @media (max-width:600px){
    .dot-row{ grid-template-columns:24px minmax(0,1fr); gap:6px; }
    .hbar-name img{ width:16px; height:16px; }
    .dot-tick{ font-size:var(--fs-2xs); }
  }
  /* ---- 食材の個数ポップアップ ---- */
  .ing-overlay{
    position:fixed;
    inset:0;
    /* 料理タブの食材モーダル(.overlay-modal、同じz-index)の上から開くことがあるため、
       常にその1段上に来るようにしておく */
    z-index:calc(var(--app-popup-z, 140) + 1);
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(17,21,46,.55);
    padding:20px;
    padding-bottom:calc(20px + var(--app-nav-inset-bottom, 88px));
    padding-left:calc(20px + var(--app-nav-inset-left, 0px));
  }
  .ing-overlay.open{ display:flex; }
  .ing-modal{
    position:relative;
    width:100%;
    max-width:clamp(340px, 52vw, 620px);
    max-height:100%;
    overflow:auto;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
  }
  .ing-modal-close{
    position:absolute;
    top:8px;
    right:10px;
    width:30px;
    height:30px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink-soft);
    font-size:var(--fs-md);
    line-height:1;
    cursor:pointer;
  }
  .ing-modal-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    padding-right:34px;
  }
  .ing-modal-head img{
    width:52px;
    height:52px;
    object-fit:contain;
    border-radius:10px;
    background:var(--paper-dim);
    border:1px solid var(--line);
    flex:none;
  }
  .ing-modal-name{ font-weight:800; font-size:var(--fs-md); color:var(--ink); }
  .ing-modal-sub{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:2px; }
  .ing-modal table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--fs-sm);
  }
  .ing-modal th, .ing-modal td{
    border:1px solid var(--line);
    padding:7px 8px;
    text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .ing-modal thead th{
    background:var(--paper-dim);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    font-weight:700;
  }
  .ing-modal td.ing-cell{
    text-align:left;
    white-space:nowrap;
  }
  .ing-modal td.ing-cell span{
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .ing-modal td.ing-cell img{
    width:22px;
    height:22px;
    object-fit:contain;
    flex:none;
  }
  .ing-modal .slot-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;
  }
  .ing-modal td.ing-na{ color:var(--ink-soft); opacity:.5; }
  .ing-modal-note{
    margin:12px 0 0;
    padding-left:1.1em;
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    line-height:1.6;
  }
  .ing-modal-note li{ margin-bottom:2px; }
  .ing-modal-note li:last-child{ margin-bottom:0; }
  /* 食材が固定されていないポケモン向けの1文だけの注記はリストにしない */
  p.ing-modal-note{ padding-left:0; }
  /* グラフからの遷移時、その食材が入っている枠を表内で強調する */
  .ing-modal .slot-badge.is-highlight{ background:var(--bar-ingredient); color:#20243B; }
  .ing-modal tr.is-highlight td{ background:var(--paper-dim); }

  /* ---- スキル効果表(全メインスキルのレベル別効果量) ---- */
  #skillEffectModal .modal-card.skill-effect-card{
    max-width:min(94vw, 640px);
    max-height:min(86vh, 720px);
    overflow:auto;
  }
  /* タイトル・表示レベルは、下の表をスクロールしても見えたままにする
     (modal-card自体がスクロールコンテナなので、そこにposition:stickyで貼り付ける)。
     コンテナの上端パディング分だけ負のマージン+同じ分のパディングで打ち消し、
     スクロール前から枠いっぱいに敷いておく(隙間が先にスクロールして消えないように)。 */
  #skillEffectModal .skill-effect-head{
    position:sticky;
    top:calc(var(--sp-4) * -1);
    z-index:2;
    margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 12px;
    padding:var(--sp-4) var(--sp-4) 12px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .skill-effect-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-right:34px;
    margin-bottom:12px;
  }
  .skill-effect-title{ font-weight:800; font-size:var(--fs-md); color:var(--ink); }
  .skill-effect-lv{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    font-weight:700;
  }
  .skill-effect-lv-label{ white-space:nowrap; }
  .skill-effect-lv-stepper{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .skill-effect-lv-stepper button{
    width:26px;
    height:26px;
    flex:none;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--paper-dim);
    color:var(--ink);
    font:inherit;
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1;
    cursor:pointer;
  }
  .skill-effect-lv-stepper button:active{ background:var(--selected-bg); color:var(--selected-ink); }
  .skill-effect-lv-stepper button:disabled{ opacity:.4; cursor:not-allowed; }
  .skill-effect-lv-val{
    min-width:2.6em;
    text-align:center;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .skill-effect-table table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--fs-sm);
  }
  .skill-effect-table th, .skill-effect-table td{
    border:1px solid var(--line);
    padding:7px 8px;
    text-align:left;
  }
  .skill-effect-table thead th{
    background:var(--paper-dim);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    font-weight:700;
    white-space:nowrap;
  }
  .skill-effect-table td.se-lv{
    text-align:center;
    font-variant-numeric:tabular-nums;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .skill-effect-table td.se-effect strong{ color:var(--ink); }
  .skill-effect-table td.se-effect .se-note{
    display:block;
    margin-top:2px;
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
  }
  /* スキル名をタップすると、そのスキルのレベル別一覧(skillDetailModal)を開く */
  .skill-effect-table td.se-name{
    cursor:pointer;
    color:var(--navy);
    font-weight:700;
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:2px;
  }
  .skill-effect-table td.se-name:hover{ background:var(--paper-dim); }
  .skill-effect-foot{
    margin:12px 0 0;
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    line-height:1.5;
  }
  .skill-effect-subtitle{
    margin:18px 0 10px;
    font-weight:800;
    font-size:var(--fs-sm);
    color:var(--ink);
  }
  .skill-effect-table td.se-pokemon{
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    white-space:nowrap;
  }
  /* レベル×匹数の表(countTable)は列数が多いので、数値セルは中央寄せ・折り返し無しにして詰める */
  .skill-effect-table td.se-effect-num{
    text-align:center;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  /* ミュウのオールマイティーで選べる可変スキル一覧 */
  .mew-variable-skills{
    margin-top:18px;
  }
  .mew-variable-skills-title{
    margin:0 0 4px;
    font-weight:800;
    font-size:var(--fs-sm);
    color:var(--ink);
  }
  .mew-variable-skills-note{
    margin:0 0 10px;
    font-size:var(--fs-2xs);
    color:var(--ink-soft);
    line-height:1.5;
  }
  .mew-variable-skills-section + .mew-variable-skills-section{
    margin-top:14px;
  }
  .mew-variable-skills-label{
    margin:0 0 6px;
    font-weight:700;
    font-size:var(--fs-xs);
    color:var(--ink-soft);
  }
  .mew-variable-skills table{ margin:0; }
  .mew-variable-skills th:last-child,
  .mew-variable-skills td:last-child{
    width:7em;
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .mew-variable-skills td:first-child{
    color:var(--navy);
    font-weight:700;
  }
  @media (max-width:600px){
    .skill-effect-table{ font-size:var(--fs-xs); }
    .skill-effect-table th, .skill-effect-table td{ padding:5px 6px; }
  }
  /* スキル効果表の上から開く、レベル別一覧モーダル(2段目)。既存モーダルより1段上に来るようにする */
  #skillDetailModal{ z-index:var(--progress-detail-child-z, calc(var(--app-popup-z, 140) + 1)); }

  /* ---- きのみエナジー(18種のレベル別エナジー折れ線グラフ) ---- */
  #berryEnergyModal .modal-card.berry-energy-card{
    max-width:min(94vw, 880px);
    max-height:min(92vh, 760px);
    overflow:auto;
  }
  #berryEnergyModal .be-types{ margin-bottom:10px; }
  #berryEnergyModal .be-energy-toprow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
  }
  #berryEnergyModal .be-energy-checks{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  #berryEnergyModal .be-giant-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  #berryEnergyModal .be-giant-mult-input{
    flex:0 0 46px;
  }
  #berryEnergyModal .be-energy-bottomrow{ margin-top:12px; }
  #berryEnergyModal .chart-card{ overflow:visible; }

  /* ---- おてスピランキング(きのみ効率タブのボタンで開くポップアップ) ---- */
  #speedRankingModal .modal-card.speed-ranking-card{
    max-width:min(94vw, 720px);
    max-height:min(92vh, 760px);
    overflow:auto;
  }
  #speedRankingModal .search-bar{ margin:0 0 12px; padding:0; max-width:none; }
  #speedRankingModal .be-types{ margin-bottom:10px; }
  .be-line{
    fill:none;
    stroke-width:2;
    transition:opacity .15s ease;
  }
  .be-line-dim{ opacity:.12; }
  .be-line-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    transition:opacity .15s ease;
  }
  .be-line-icon-dim{ opacity:.12; }
  /* ---- タップ/ドラッグで動く縦のカーソルと、各タイプの交点を表示する窓 ---- */
  .be-cursor-line{
    stroke:var(--ink-soft);
    stroke-width:1.5;
    stroke-dasharray:4 3;
    pointer-events:none;
    display:none;
  }
  .be-cursor-dot{
    pointer-events:none;
    stroke:var(--paper);
    stroke-width:1.5;
    display:none;
  }
  .be-cursor-hit{ fill:transparent; cursor:crosshair; touch-action:none; }
  #berryEnergyTooltip{ max-height:calc(100% - 32px); overflow-y:auto; }
  #berryEnergyTooltip .be-cursor-row{
    display:flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
  }
  #berryEnergyTooltip .be-cursor-row img{ width:16px; height:16px; object-fit:contain; flex:none; }
  #berryEnergyTooltip .be-cursor-row .val{ margin-left:auto; color:var(--moon); font-weight:700; }

  .ing-modal-section-title{
    margin:14px 0 6px;
    font-size:var(--fs-xs);
    font-weight:700;
    color:var(--ink-soft);
  }
  .ing-field-list{ display:flex; flex-wrap:wrap; gap:6px; }
  .ing-field-pill{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper-dim);
    font-size:var(--fs-xs);
    color:var(--ink);
  }
  .ing-field-note{ margin-top:6px; font-size:var(--fs-xs); color:var(--ink-soft); }
  .ing-field-note a{ color:var(--navy); text-decoration:underline; }

  /* ---- マップ (散布図) ---- */
  .section-heading{
    max-width:var(--content-max);
    margin:20px auto 8px;
    padding:0 16px;
    font-weight:700;
    font-size:var(--fs-md);
    color:var(--ink);
  }
  .map-wrap{
    max-width:var(--content-max);
    margin:0 auto;
    padding:0 16px;
  }
  .chart-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px;
    position:relative;
  }
  .axis-label{ font-size:var(--fs-xs); fill:var(--ink-soft); }
  .tick-label{ font-size:var(--fs-2xs); fill:#898781; }
  .gridline{ stroke:#e1e0d9; stroke-width:1; }
  .baseline{ stroke:var(--line); stroke-width:1; }
  .hit{ fill:transparent; cursor:pointer; }
  /* アイコンの下の丸い台。目盛り線や隣のアイコンと切り分ける */
  .dot-bg{
    fill:var(--paper);
    stroke:var(--line);
    stroke-width:1;
    pointer-events:none;
  }
  .dot-group:hover .dot-bg, .dot-group:focus .dot-bg{ stroke:var(--navy); stroke-width:2; }
  .dot-group.tap-selected .dot-bg{ stroke:var(--navy); stroke-width:2; }
  .dot-icon{ cursor:pointer; }
  .dot-ph{
    fill:var(--paper-dim);
    stroke:var(--line);
    stroke-width:1;
    stroke-dasharray:3,2;
    cursor:pointer;
  }
  .dot-group:hover .dot-icon, .dot-group:focus .dot-icon{
    filter:drop-shadow(0 0 3px rgba(27,34,69,.55));
  }
  .tap-ring{
    fill:none;
    stroke:var(--navy);
    stroke-width:2;
    opacity:0;
    pointer-events:none;
  }
  .dot-group.tap-selected .tap-ring{ opacity:1; }
  /* タイプ/とくいの絞り込みに当てはまらない点は、除外せず薄く残す
     (全体の分布との位置関係を見比べられるように)。ホバー/フォーカス中は見やすく戻す */
  .dot-group-dim{ opacity:.25; }
  .dot-group-dim:hover, .dot-group-dim:focus{ opacity:.7; }
  .chart-note{
    margin-top:14px;
    padding-top:12px;
    padding-left:1.1em;
    border-top:1px solid var(--line);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
  }
  .chart-note li{ margin-bottom:4px; }
  .chart-note li:last-child{ margin-bottom:0; }
  /* おやすみリボンの段階アイコン。選択中の段階だけ出す */
  .ribbon-icon{
    width:20px;
    height:20px;
    object-fit:contain;
    vertical-align:-4px;
    margin-left:4px;
  }

  /* ---- 表示範囲ボックス (グラフの下) ----
     グラフを見ながら範囲を変えられるよう、グラフのすぐ下に置いている。
     1軸につき1行で、縦軸・横軸それぞれの下限と上限を数値で指定する。 */
  .range-box{
    margin-top:14px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--paper-dim);
  }
  .range-box-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  .range-box-title{
    font-size:var(--fs-xs);
    font-weight:700;
    color:var(--ink);
  }
  .range-box-actions{
    margin-left:auto;
    display:flex;
    gap:6px;
  }
  .range-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:5px 0;
    font-size:var(--fs-xs);
    color:var(--ink-soft);
  }
  .range-caption{
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .range-axis{
    display:inline-block;
    padding:0 5px;
    height:18px;
    line-height:18px;
    text-align:center;
    border-radius:5px;
    background:var(--navy);
    color:var(--paper);
    font-size:var(--fs-2xs);
    font-weight:800;
  }
  .range-nums{
    display:flex;
    align-items:center;
    gap:5px;
    margin-left:auto;
  }
  .range-input{
    width:72px;
    padding:4px 6px;
    border:1px solid var(--line);
    border-radius:6px;
    /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする
       (4桁の値[きのみエナジー等]も入るため、widthも64px→72pxへ広げて収まりを確保) */
    font-size:16px;
    color:var(--ink);
    background:var(--paper);
  }
  .range-sep{ color:var(--ink-soft); }
  .range-reset{
    border:1px solid var(--line);
    background:var(--paper-dim);
    color:var(--ink-soft);
    border-radius:6px;
    padding:4px 10px;
    font-size:var(--fs-xs);
    cursor:pointer;
  }
  .range-reset:hover{ background:var(--line); }
  .tooltip{
    position:absolute;
    top:16px;
    right:16px;
    pointer-events:none;
    background:var(--header-bg);
    color:var(--on-dark);
    border-radius:8px;
    padding:8px 10px;
    font-size:var(--fs-xs);
    line-height:1.5;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    opacity:0;
    transition:opacity .15s;
    z-index:10;
    max-width:200px;
  }
  .tooltip.show{ opacity:1; }
  .tooltip .t-name{
    font-weight:700;
    font-size:var(--fs-sm);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .tooltip .t-name img{
    width:22px;
    height:22px;
    object-fit:contain;
    border-radius:5px;
    background:var(--paper);
  }
  .tooltip .t-row .val{ color:var(--moon); font-weight:700; }
  .tooltip .t-sub{ margin-left:4px; color:var(--on-dark); opacity:.75; font-size:var(--fs-2xs); }
  .tooltip .t-ingredients-row{ display:flex; align-items:flex-start; gap:3px; }
  .tooltip .t-ingredients{ display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
  .tooltip .t-ingredient{ display:inline-flex; align-items:center; gap:1px; }
  .tooltip .t-ingredient-slot{ font-size:10px; color:var(--on-dark); opacity:.75; }
  .tooltip .t-ingredient img{ width:18px; height:18px; object-fit:contain; vertical-align:middle; }
  .ing-chart-tooltip{
    position:fixed;
    top:8px;
    right:auto;
    max-width:min(260px, calc(100% - 32px));
    z-index:130;
  }
  .dot.is-tooltip-selected{ border-color:var(--navy); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--navy); }

  .site-footer{
    max-width:var(--content-max);
    margin:24px auto 0;
    padding:14px 16px 24px;
    border-top:1px solid var(--line);
    font-size:var(--fs-xs);
    color:var(--ink-soft);
    text-align:left;
    line-height:1.6;
  }
  .site-footer a{ color:var(--ink-soft); }
  /* ---- 各タブの説明文(既定は畳んでおく) ----
     説明が長いと本題の表や入力欄が画面外へ押し出されるため、
     初回だけ読めばよい内容は「この表について」等の見出しに畳んでいる。 */
  .tab-about{
    max-width:var(--content-max);
    margin:12px auto 0;
    padding:0 12px;
    font-size:var(--fs-2xs);
    line-height:1.65;
    color:var(--ink-soft);
  }
  /* 補足説明を開ける場所だと気づけるよう、見出しだけを本文より一段強くする。
     囲みボタンにはせず、情報アイコンと開閉矢印で役割を示す。 */
  .tab-about > summary{
    cursor:pointer;
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--navy);
    padding:5px 2px;
    border-bottom:1px dashed var(--line);
  }
  .tab-about > summary::-webkit-details-marker{ display:none; }
  .tab-about > summary::before{
    content:"ⓘ";
    font-size:.95em;
    color:var(--ink-soft);
  }
  .tab-about > summary::after{
    content:"›";
    font-size:1.15em;
    line-height:1;
    transition:transform .15s ease;
  }
  .tab-about[open] > summary::after{ transform:rotate(90deg); }
  .tab-about > summary:hover{ color:var(--selected-bg); }
  .tab-about > summary:focus-visible{
    outline:2px solid var(--selected-bg);
    outline-offset:2px;
    border-radius:4px;
  }
  .tab-about p{ margin:7px 0 0; }
  .tab-about ul{ margin:7px 0 0; padding-left:1.2em; }
  .tab-about ul li{ margin-bottom:4px; }
  .tab-about ul li:last-child{ margin-bottom:0; }
  /* 図鑑タブの中では、ツール自身のカード幅に揃うよう余白を打ち消す。
     ここでmarginを一括で0にしているのは、上の margin:auto を残したままだと
     縦並びのflex(.be-tool)の中で幅いっぱいに伸びず、
     中央に縮こまってしまうため(cross軸のauto marginはstretchを打ち消す)。 */
  .be-tool > .tab-about{ margin:0; padding:0 2px; }

  /* ---- PCモード: コンテンツに左余白を確保(下部ナビ自体のPC用スタイルはcss/bottomNav.css) ---- */
  html[data-layout="pc"]{
    padding:0 0 0 116px;
    --content-max:1400px;
  }
  html[data-layout="pc"] body{
    padding:0 0 0 116px;
  }

.standalone-panel{display:block;}