/*!
 * PvP 3v3 シミュレータ (Pyodide) の CSS。
 *
 * 🔴 すべて `#pvpsim` 配下へスコープする。WP テーマ (AFFINGER + 子テーマ) は
 *    `table`/`th`/`img` に素の要素セレクタを当ててくるため、スコープを外すと本番だけ
 *    見た目が壊れる (2026-07-28 に PvP 評価リストで実際に踏んだ:
 *    子テーマの `…, #wp-calendar:not(.has-background) thead tr th, table{background-color:#fff}` が
 *    class セレクタに勝っていた)。ID を先頭に置いて specificity を確保する。
 *
 * 配色は maxbattle-simulator に倣った白基調 (user 指示 2026-07-29)。
 * 変数名は maxbattle の mbs-* と 1:1 で対応させてある (mbs-bg → pvpsim-bg 等)。
 * ページ幅を広げるための テーマ chrome 除去 CSS は generator 側 (inline) が持つ。
 *
 * ⚠️ このコメント内に「アスタリスク + スラッシュ」の並びを書かないこと。
 *    2026-07-29 に `**` + `/maxbattle-simulator/` と書いた結果コメントがそこで終わり、
 *    直後の `#pvpsim { }` ブロックごと CSS パーサに捨てられて背景も幅も効かなくなった
 *    (実機の cssRules を数えて発覚。静的読みでは気づけない)。
 */

/* 🔴 Google の関連検索チップ (`#google-anno-sa`) がコマンドのタップを奪う件は
   **CSS では直せない**ので、ここには書かない。main.js の neutralizeAnnoOverlay() が担当する。
   理由 (2026-07-31 実測): Google はこの要素の style 属性に
   `pointer-events: auto !important` を**インラインで**書き込む。
   インラインの `!important` は author stylesheet の `!important` より強いので、
   どんなセレクタを書いても負ける。JS で inline を直接上書きするしかない。
   ⚠️ ここに `#pvpsim [class*="google-anno"] { pointer-events: none !important }` の類を
      書き足さないこと。効かない上に「対処済み」に見えてしまう。 */

#pvpsim {
  /* maxbattle-simulator (style.css :9-30) と同じ値 */
  --pvpsim-primary: #667eea;
  --pvpsim-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --pvpsim-bg: #f5f5f5;
  --pvpsim-panel: #ffffff;
  --pvpsim-fg: #333333;
  --pvpsim-dim: #555555;
  --pvpsim-line: #e2e8f0;
  --pvpsim-accent: #a78bfa;
  --pvpsim-ok: #10b981;
  --pvpsim-warn: #f59e0b;
  --pvpsim-danger: #ef4444;
  --pvpsim-shadow: 0 2px 4px rgba(0, 0, 0, .08);
  background: var(--pvpsim-bg);
  color: var(--pvpsim-fg);
  padding: 16px;
  border-radius: 10px;
  font-family: "Segoe UI", "Hiragino Sans", "Meiryo", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  max-width: 100%;
  box-sizing: border-box;
  /* 日本語の折り返しで小書き仮名が行頭に来るのを防ぐ (禁則)。
     実測 2026-07-31: 狭い幅で「シ / ャドークロー」と割れていた。 */
  line-break: strict;
}
#pvpsim * { box-sizing: border-box; }
#pvpsim h3 { color: var(--pvpsim-fg); font-size: 17px; margin: 0 0 10px; }
#pvpsim .pvpsim-note {
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: #3730a3; margin-bottom: 12px;
}
#pvpsim .pvpsim-note.is-warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
#pvpsim .pvpsim-status { font-size: 12px; color: var(--pvpsim-dim); margin-bottom: 10px; }
#pvpsim .pvpsim-status.is-error { color: var(--pvpsim-danger); font-weight: 700; }
#pvpsim .pvpsim-row { display: flex; gap: 14px; flex-wrap: wrap; }
#pvpsim .pvpsim-card {
  background: var(--pvpsim-panel); border: 1px solid var(--pvpsim-line);
  border-radius: 8px; padding: 14px; flex: 1 1 420px; min-width: 340px;
  box-shadow: var(--pvpsim-shadow);
}
#pvpsim label { display: block; font-size: 11px; color: var(--pvpsim-dim); margin: 8px 0 2px; }
#pvpsim input, #pvpsim select {
  width: 100%; background: #fff; color: var(--pvpsim-fg);
  border: 1px solid #cbd5e1; border-radius: 5px; padding: 7px; font-size: 13px;
}
#pvpsim select { appearance: auto; }
#pvpsim input:focus, #pvpsim select:focus {
  outline: 2px solid var(--pvpsim-primary); outline-offset: 1px; border-color: var(--pvpsim-primary);
}
#pvpsim .pvpsim-btn {
  background: var(--pvpsim-grad); color: #fff; border: 0; border-radius: 6px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; margin: 8px 6px 0 0;
}
#pvpsim .pvpsim-btn:hover { filter: brightness(1.06); }
#pvpsim .pvpsim-btn.is-sub {
  background: #eef2f7; color: #334155; border: 1px solid #cbd5e1;
  padding: 5px 10px; font-size: 12px; font-weight: 500;
}
/* ---- シャドウアイコンの重ね (2026-07-31、user 要望) ----
   置き方は評価リスト (`.pvpr-thumb` / `.pvpr-shadow-overlay`) と**同じ**。
   ⚠️ `line-height: 0` が要る。無いと親の行間ぶん下に余白が出て、アイコンが画像の
      左下ではなく**その少し下**に浮く。
   ⚠️ 大きさは JS が size に比例させて inline で入れる (このツールは 24〜56px と
      場所ごとに画像サイズが違うため)。ここで固定 px を書かない。
   ⚠️ `max-width: none` はテーマの `img{max-width:100%}` に潰されないため。 */
#pvpsim .pvpsim-thumb {
  position: relative; display: inline-block; vertical-align: middle; line-height: 0;
}
#pvpsim .pvpsim-shadow-overlay {
  position: absolute; left: 0; bottom: 0; pointer-events: none;
  max-width: none !important; margin: 0 !important;
}

/* ---- ポケモン名のサジェスト (評価リストと同じ仕様、2026-07-31) ----
   ⚠️ **`#pvpsim` の外に置く**。パネルは body 直下へ挿す (fixed で入力欄の直下に出す)
      ため、`#pvpsim` 配下のスコープでは当たらない。冒頭のスコープ規律の明示的な例外。
   ⚠️ z-index は コマンド面 (60) より上、テーマの「トップへ戻る」(99999) より下。
      吊り上げ合戦にしない — バトル中は #page-top を畳んであるので競合しない。 */
#pvpsim .pvpsim-suggest {
  /* 🔴 **入力欄の箱に対する絶対配置**。`position: fixed` + 座標計算に戻さないこと。
     初版は fixed だったが、iOS Safari はキーボードが出ると visual viewport だけが縮み、
     `fixed` の基準 (layout viewport) とずれて **変な位置に出た** (user 報告 2026-07-31)。
     `top: 100%` なら入力欄に貼り付くので、キーボードでもスクロールでもずれない。
     ⚠️ 祖先に overflow を持つ要素が無いことを実測済 (10 代祖先まで visible)。 */
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px;
  z-index: 200; max-height: 46vh; overflow-y: auto;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); padding: 4px;
  font-family: "Segoe UI", "Hiragino Sans", "Meiryo", system-ui, -apple-system, sans-serif;
}
#pvpsim .pvpsim-suggest[hidden] { display: none; }
#pvpsim .pvpsim-suggest-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 8px; border-radius: 6px; font-size: 14px; color: #333;
  /* 指で押せる大きさ。評価リストと同じ 28px 画像 + 余白で 44px 前後になる。 */
  min-height: 44px; line-height: 1.3;
}
#pvpsim .pvpsim-suggest-item:hover, .pvpsim-suggest-item:active { background: #eef2ff; }
#pvpsim .pvpsim-suggest-item img { flex: none; width: 28px; height: 28px; object-fit: contain; }
#pvpsim .pvpsim-suggest-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pvpsim .pvpsim-sp-wrap { position: relative; }

#pvpsim .pvpsim-slotbox, #pvpsim .pvpsim-slot {
  border: 1px solid var(--pvpsim-line); border-radius: 6px;
  padding: 10px; margin-top: 10px; background: #fbfcfe;
}
#pvpsim .pvpsim-slot.is-active { border-color: var(--pvpsim-primary); background: #f5f3ff; }
#pvpsim .pvpsim-slot.is-ko { opacity: .5; }
#pvpsim .pvpsim-slot h4 {
  margin: 0 0 4px; font-size: 13px; color: var(--pvpsim-fg); font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
#pvpsim .pvpsim-pill {
  display: inline-block; font-size: 10px; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 1px 7px; color: #4338ca;
}
#pvpsim .pvpsim-pill.is-ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
#pvpsim .pvpsim-pill.is-no { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
#pvpsim .pvpsim-src { font-size: 10px; color: #7c8797; margin-top: 4px; }
/* 個体値 UI の即時再計算 (設計書 §5-1)。数値も文言も Python 側が作る。 */
#pvpsim .pvpsim-eval {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 8px;
  padding: 6px 9px; border-radius: 5px; background: #f1f5f9; border: 1px solid #e2e8f0;
}
#pvpsim .pvpsim-eval-cp { font-weight: 700; }
#pvpsim .pvpsim-eval-cp.over { color: #b45309; }
#pvpsim .pvpsim-eval-delta { color: var(--pvpsim-dim); }
#pvpsim .pvpsim-eval-err {
  color: #b91c1c; background: #fef2f2; border-color: #fecaca; display: block; font-weight: 600;
}
#pvpsim .pvpsim-warn {
  font-size: 12px; line-height: 1.5; margin-top: 5px;
  padding: 6px 9px; border-radius: 5px; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a;
}
#pvpsim .pvpsim-mini-btn {
  margin-top: 8px; padding: 5px 10px; font-size: 11px;
  background: #eef2f7; color: #334155; border: 1px solid #cbd5e1;
  border-radius: 5px; cursor: pointer;
}
#pvpsim .pvpsim-mini { display: flex; gap: 6px; }
#pvpsim .pvpsim-mini > div { flex: 1; }
#pvpsim .pvpsim-bar { height: 9px; background: #e5e9f0; border-radius: 5px; overflow: hidden; }
#pvpsim .pvpsim-bar > i { display: block; height: 100%; background: var(--pvpsim-grad); }
#pvpsim .pvpsim-sub { font-size: 13px; color: var(--pvpsim-dim); margin-top: 10px; }
#pvpsim .pvpsim-win { color: #047857; font-weight: 700; }
#pvpsim .pvpsim-legend { font-size: 11px; color: var(--pvpsim-dim); margin-top: 6px; }
/* 表はテーマの素セレクタに負けないよう ID から書く */
/* display:block + max-height で表の中だけスクロールさせる。
   これをしないと 1 戦ぶんの逐ターンログでページが 1 万 px を超える (実測)。 */
#pvpsim table.pvpsim-table {
  width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px;
  background: var(--pvpsim-panel); display: block; overflow: auto; max-height: 460px;
  border: 1px solid var(--pvpsim-line); border-radius: 6px;
}
#pvpsim table.pvpsim-table thead th {
  position: sticky; top: 0; background: #f1f5f9; z-index: 1;
}
#pvpsim table.pvpsim-table th, #pvpsim table.pvpsim-table td {
  text-align: left; padding: 5px 9px; border-bottom: 1px solid #eef1f5;
  background: transparent; color: var(--pvpsim-fg); white-space: nowrap;
}
#pvpsim table.pvpsim-table th { color: var(--pvpsim-dim); font-weight: 700; }
#pvpsim table.pvpsim-table tbody tr:nth-child(even) td { background: #fafbfd; }
#pvpsim .pvpsim-mono { font-variant-numeric: tabular-nums; }
#pvpsim .pvpsim-charged { color: #b45309; font-weight: 600; }
#pvpsim .pvpsim-fast { color: #475569; }
#pvpsim .pvpsim-shield { color: #047857; font-weight: 600; }
#pvpsim .pvpsim-claim {
  display: inline-block; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 4px; padding: 0 5px; margin: 1px 2px 1px 0; font-size: 10px; color: #4338ca;
}
@media (max-width: 640px) {
  #pvpsim { padding: 10px; }
  #pvpsim .pvpsim-card { min-width: 100%; flex-basis: 100%; }
  #pvpsim .pvpsim-btn { width: 100%; margin: 6px 0 0; }
}

/* ---- 画像 / タイプアイコン / 操作ガイド (user 指摘 2026-07-29「殺風景」「何をしていいか分からない」) ---- */
#pvpsim .pvpsim-slothead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#pvpsim .pvpsim-slotname { font-weight: 700; font-size: 15px; }
/* 🔴 ポケモン画像は **正方形の枠に固定し、縦横比は保って収める**。
   テーマの `img:not(…) { max-width:100%; height:auto }` が height 属性を無効化するため、
   これが無いと幅だけ揃って高さが画像ごとに変わる (実測 56px 指定に対し 36〜77px)。
   元画像は輪郭で切り抜かれていて縦横比がばらばら (100x128 / 128x82 等)。
   サイト既存の解 = `.pvpr-thumb-img` (リーグ評価リスト) と同じ形にしてある。
   ⚠️ 実際の px は `pokeImg()` が inline で入れる (呼び出し側でサイズが違うため)。
      ここに !important を書かないこと — スマホのバトル中モードの圧縮規則が効かなくなる。 */
#pvpsim .pvpsim-img {
  display: block; image-rendering: auto; flex: none;
  object-fit: contain; max-width: none;
}
#pvpsim .pvpsim-chip { display: inline-flex; align-items: center; gap: 6px; }
#pvpsim .pvpsim-chip img { flex: none; }
/* タイプアイコンも同じ理由で高さを固定する (こちらは全箇所 16px なので CSS だけで足りる) */
#pvpsim .pvpsim-type {
  vertical-align: -3px; flex: none;
  width: 16px; height: 16px; object-fit: contain; max-width: none;
}
#pvpsim .pvpsim-moverow { display: flex; align-items: center; gap: 6px; }
#pvpsim .pvpsim-moverow select { flex: 1; }
#pvpsim .pvpsim-guide {
  margin-top: 10px; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.6;
  background: #eef7ff; border: 1px solid #bfdbfe; color: #1e40af;
}
#pvpsim .pvpsim-guide b { color: #1e3a8a; }

/* ---- 行動ボタン (user 指摘: ゲージが溜まるまで何が押せるか直感的に) ---- */
#pvpsim .pvpsim-act {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: #eef7ff; border: 1px solid #bfdbfe;
}
#pvpsim .pvpsim-act-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
#pvpsim .pvpsim-act-energy { margin-left: auto; font-size: 12px; color: #1e40af; font-variant-numeric: tabular-nums; }
#pvpsim .pvpsim-act-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
#pvpsim .pvpsim-act-btn {
  flex: 1 1 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 700;
  background: #fff; border: 2px solid #93c5fd; color: #1e3a8a; text-align: left; position: relative;
}
#pvpsim .pvpsim-act-btn:hover:not(:disabled) { background: #f0f7ff; }
#pvpsim .pvpsim-act-btn.is-charged { border-color: #fbbf24; color: #92400e; }
#pvpsim .pvpsim-act-btn.is-locked { opacity: .55; cursor: not-allowed; border-color: #cbd5e1; color: #64748b; }
#pvpsim .pvpsim-act-btn em { font-style: normal; font-size: 11px; font-weight: 500; opacity: .85; }
#pvpsim .pvpsim-egauge {
  display: block; width: 100%; height: 5px; margin-top: 5px; border-radius: 3px;
  background: #e5e9f0; overflow: hidden;
}
#pvpsim .pvpsim-egauge > b { display: block; height: 100%; background: #fbbf24; }
#pvpsim .pvpsim-act-hint { margin-top: 8px; font-size: 12px; color: #1e40af; }

/* ---- 被弾表示 (user 指摘: ダメージが発生する様子が分かるように) ---- */
#pvpsim .pvpsim-slot.is-hit { border-color: #fca5a5; background: #fff5f5; }
#pvpsim .pvpsim-hit {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding: 5px 8px; border-radius: 5px; font-size: 12px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
}
#pvpsim .pvpsim-hit.is-charged { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
#pvpsim .pvpsim-hit-dmg { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
#pvpsim .pvpsim-slot .pvpsim-act-btns { margin-top: 8px; }

/* ---- バフ / デバフ / フォーム変化 (user 指摘: カード内で分かるように) ---- */
#pvpsim .pvpsim-buffs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
#pvpsim .pvpsim-buff {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; border: 1px solid;
}
#pvpsim .pvpsim-buff.is-up { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
#pvpsim .pvpsim-buff.is-down { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
#pvpsim .pvpsim-buff.is-form { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }

/* 控えカードをそのまま押して交代する (user 指摘 2026-07-29) */
#pvpsim .pvpsim-slot.is-switchable { cursor: pointer; transition: border-color .12s, background .12s; }
#pvpsim .pvpsim-slot.is-switchable:hover,
#pvpsim .pvpsim-slot.is-switchable:focus-visible {
  border-color: var(--pvpsim-primary);
  background: #f8f7ff;
  outline: none;
}
#pvpsim .pvpsim-slot-hint { margin-top: 6px; font-size: 12px; color: var(--pvpsim-primary); font-weight: 700; }

/* 相手のゲージ技の溜まり具合 (表示のみ、押せない) */
#pvpsim .pvpsim-foe-gauge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#pvpsim .pvpsim-foe-move {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #f9fafb;
  font-size: 12px; color: #6b7280;
}
#pvpsim .pvpsim-foe-move.is-ready { border-color: #fca5a5; background: #fff1f2; color: #b91c1c; font-weight: 700; }
#pvpsim .pvpsim-foe-move em { font-style: normal; opacity: .85; }

/* 相手のゲージ技が飛んできた時のシールド確認 (PVP-M-719) */
#pvpsim .pvpsim-shield-ask {
  border: 2px solid #f59e0b; background: #fffbeb; border-radius: 12px;
  padding: 12px 14px; margin: 10px 0;
}
#pvpsim .pvpsim-shield-head { font-size: 15px; font-weight: 700; color: #92400e; }
#pvpsim .pvpsim-shield-body { margin-top: 4px; font-size: 14px; color: #78350f; }
#pvpsim .pvpsim-shield-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#pvpsim .pvpsim-act-btn.is-shield { border-color: #2563eb; background: #eff6ff; }
#pvpsim .pvpsim-act-btn.is-noshield { border-color: #d1d5db; background: #f9fafb; }

/* ============================================================
   2026-07-30 手動モードの分かりにくさ 3 件 (user 指摘) への対応
   ① 控えを押しても交代にならない → 押せない時も押させて理由を出す
   ② 相手がシールドを使ったのが分からない → バトル画面に出す
   ③ ダメージのエフェクトが無い → /maxbattle-simulator/ の mbs-dmg-flash と同型
   ============================================================ */

/* ① 交代できない時のカード。押せることは示すが、誘い (is-switchable) とは見た目を分ける */
#pvpsim .pvpsim-slot.is-switch-blocked { cursor: pointer; }
#pvpsim .pvpsim-slot.is-switch-blocked:hover { border-color: var(--pvpsim-warn); }
#pvpsim .pvpsim-slot-hint.is-blocked { color: var(--pvpsim-dim); font-weight: 600; }

/* ② シールドが使われたことを、カードの外の帯で出す */
#pvpsim .pvpsim-shield-used {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46;
}
#pvpsim .pvpsim-shield-used.is-foe {
  border-color: #fecaca; background: #fef2f2; color: #991b1b;
}
#pvpsim .pvpsim-shield-used b { font-weight: 800; }

/* シールドで防いだカードは枠で分かるようにする (被弾 1 だと数字では見えない) */
#pvpsim .pvpsim-slot.is-hit-shielded { border-color: #6ee7b7; background: #f0fdfa; }
#pvpsim .pvpsim-slot.is-hit-charged { border-color: #fdba74; }

/* ③ ダメージ flash。移植元 = assets/maxbattle-simulator/style.css の .mbs-dmg-flash */
#pvpsim .pvpsim-slot { position: relative; }
#pvpsim .pvpsim-dmg-flash {
  position: absolute; right: 10px; top: 6px;
  pointer-events: none; font-weight: 900; font-size: 20px;
  font-variant-numeric: tabular-nums;
  animation: pvpsim-dmg-flash-anim 1.2s ease-out forwards;
  z-index: 5;
}
#pvpsim .pvpsim-dmg-flash[data-kind="received"] {
  color: #dc2626; text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}
#pvpsim .pvpsim-dmg-flash[data-kind="dealt"] {
  color: #b45309; text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}
#pvpsim .pvpsim-dmg-flash[data-kind="shielded"] {
  color: #047857; font-size: 15px; text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
}
@keyframes pvpsim-dmg-flash-anim {
  0%   { opacity: 0; transform: translateY(0) scale(.8); }
  20%  { opacity: 1; transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}
/* ⚠️ 動きを減らす設定の端末では animation を出さない (a11y) */
@media (prefers-reduced-motion: reduce) {
  #pvpsim .pvpsim-dmg-flash { animation: none; opacity: 1; }
}

/* 瀕死後に出す子を選ぶカード (2026-07-30、user 指摘「交代の選択肢が発生すべき」) */
#pvpsim .pvpsim-shield-ask.is-faint { border-color: #c7d2fe; background: #eef2ff; }
#pvpsim .pvpsim-shield-ask.is-faint .pvpsim-shield-head { color: #3730a3; }
#pvpsim .pvpsim-act-btn.is-faint-pick {
  border-color: var(--pvpsim-primary); background: #fff;
}
#pvpsim .pvpsim-act-btn.is-faint-pick:hover { background: #f5f3ff; }

/* 編成の操作とバトルの操作を分ける (2026-07-30、user 指摘
   「最適SCPに戻すのボタンの位置が少し違和感」) */
/* 編成カードの直下 = リーグ選択より前に置く (user 指摘 2026-07-30) */
#pvpsim .pvpsim-setup-actions {
  margin: 4px 0 12px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--pvpsim-line);
}
#pvpsim .pvpsim-battle-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
}
/* 自動進行の速さ (移植元 = assets/maxbattle-simulator の AI loop controls) */
#pvpsim .pvpsim-speed {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 10px; border: 1px solid var(--pvpsim-line); border-radius: 8px;
  background: #fafafa;
}
#pvpsim .pvpsim-speed label { display: inline; margin: 0; font-size: 12px; }
#pvpsim .pvpsim-speed input[type="range"] { width: 140px; }
#pvpsim #pvpsim-speed-display {
  font-size: 12px; color: var(--pvpsim-dim); font-variant-numeric: tabular-nums;
  min-width: 9em;
}
@media (max-width: 600px) {
  #pvpsim .pvpsim-speed input[type="range"] { width: 100px; }
}

/* 🔴 `hidden` 属性が author の `display` に負けるのを防ぐ (2026-07-30 実測で踏んだ)。
   `.pvpsim-speed { display: inline-flex }` を書いた結果、`hidden` を付けても
   手動モードで速度 UI が見えたままだった (UA の `[hidden]{display:none}` は
   author 宣言に負ける)。**component 内は hidden を最優先にする**。 */
#pvpsim [hidden] { display: none !important; }

/* ============================================================
   スマホ版 — バトル中モード `body.pvpsim-in-battle` (2026-07-31)

   user 要望「マックスバトルシミュレータの様な感じが良い」。
   手本 = assets/maxbattle-simulator/style.css の `:2007` 設計コメントと
          `:2343` からの @media (max-width: 768px) = `body.mbs-in-battle`。

   🔴 これを入れる前の実測 (390x844 / dsf 2 / is_mobile / localhost):
     - 編成 row が **2,804px** + 設定 UI 786px = **3,590px がバトル中も居座り**、
       バトル表示は **y = 4,371 = 5.2 画面ぶん下**から始まっていた
     - 自分の残り・相手の残り・コマンドを同時に見るのに **967〜1,235px 必要 / viewport は 844**
     - 表示中ボタン 15 個のうち **12 個が 44px 未満**
     - カード見出しが「ミミッキ / ュ」「エネルギ / ー 0」と中途半端に折り返していた
       (これは screenshot を目視して初めて見つけた。数値だけでは出てこない)

   ⚠️ CSS 冒頭の規律どおり **すべて `#pvpsim` 配下へスコープ**する。
   ⚠️ 変更は @media (max-width: 640px) の中に閉じる = デスクトップの見た目は変えない。
      機械検証 = scripts/verify_pvp_simulator_mobile.py
   ============================================================ */

/* ---- 指で押せる大きさ (バトル中に限らずスマホ全体) ---- */
@media (max-width: 640px) {
  /* 閾値 44px は iOS / Android のガイドラインの緩い方を採ったもの。
     ⚠️ 「当サイトが採る閾値」であって実機の仕様ではない。 */
  #pvpsim button { min-height: 44px; }
  #pvpsim .pvpsim-mini-btn { padding: 8px 10px; }
  #pvpsim .pvpsim-btn.is-sub { padding: 8px 10px; }
}

@media (max-width: 640px) {
  /* ---- ① 編成 UI を畳む = 実測 3,590px を回収する ---- */
  body.pvpsim-in-battle #pvpsim .pvpsim-setup-only { display: none; }
  /* 見出しと「これは何か」の説明もバトル中は畳む (maxbattle も見出しを消している)。
     🔴 ただし **注意書き (.is-warn) は残す** — 「実機とは異なる場合があります」は
        結果を見せている最中にこそ効く断り書きなので、消さない。 */
  body.pvpsim-in-battle #pvpsim > h3 { display: none; }
  body.pvpsim-in-battle #pvpsim > .pvpsim-note:not(.is-warn) { display: none; }
  body.pvpsim-in-battle #pvpsim > .pvpsim-note.is-warn {
    margin-bottom: 6px; padding: 6px 9px; font-size: 11px; line-height: 1.45;
  }
  body.pvpsim-in-battle #pvpsim { padding: 8px; }

  /* バトル中の操作列は 3 列に畳む (縦に 5 段積むとバトル表示がまた下がる)。
     ⚠️ 高さ 44px は維持する。 */
  body.pvpsim-in-battle #pvpsim .pvpsim-battle-actions {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-battle-actions > .pvpsim-btn {
    width: auto; margin: 0; padding: 6px 4px; font-size: 11px; line-height: 1.25;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-speed { grid-column: 1 / -1; }

  /* ---- ② **両陣営を左右に並べる** (user 指摘 2026-07-31 第 2 波) ----
     逐語:「理想はスマホの縦画面で、左と右に両陣営が並んでおり、コマンドバトルが進む様子がわかること」

     旧実装は `column-reverse` で 相手を上・自分を下に積んでいた。実機の並びには忠実だが、
     実測 2026-07-31: 両陣営で **643px** 使い、コマンド面 (fixed 84px) を引いた
     可視領域 760px にぎりぎりで、テーマ chrome 525px を足すと**スクロールしないと戦況が見えない**。
     左右に割ると縦は約半分になり、両陣営 + コマンドが一度に目に入る。

     ⚠️ 基底の `@media (max-width: 640px)` に `.pvpsim-card { min-width: 100%; flex-basis: 100% }`
        が居る (:161)。**それを上書きしないと 2 カラムにならない** ので min-width: 0 まで書く。
     ⚠️ `min-width: 0` は「はみ出さないため」に必須。flex item の既定 `min-width: auto` だと
        中身 (長いポケモン名) が縮まず、横スクロールが出る。
     ⚠️ 左が自分・右が相手。DOM も sides[0] (自分) → sides[1] (相手) の順なので
        `row` のままで並びが合う。順序を CSS で反転しない (読み上げ順と食い違う)。 */
  body.pvpsim-in-battle #pvpsim #pvpsim-out .pvpsim-row {
    flex-direction: row; flex-wrap: nowrap; gap: 6px; align-items: flex-start;
  }
  body.pvpsim-in-battle #pvpsim #pvpsim-out .pvpsim-card {
    flex: 1 1 0; min-width: 0; max-width: none;
  }
  /* 🔴 **場に出ている子をカードの先頭へ**。枠の並び順どおりに描くと、相手の active が
     3 番目に来ることがあり (実測)、一番見たいものを探すことになる。
     maxbattle も boss (= active) が上・控えが下。
     ⚠️ 見出しを `.pvpsim-side-head` で 1 つの箱にまとめてあるので、flex 化しても
        「陣営 B (相手) [シールド 2/2] [交代できる]」が縦にほどけない。 */
  body.pvpsim-in-battle #pvpsim #pvpsim-out .pvpsim-card {
    padding: 6px; box-shadow: none;
    display: flex; flex-direction: column;
  }
  /* 2 カラムだと 1 列あたり実測 ~187px しかないので、陣営見出しを縦に積んで折り返させる。
     横並びのままだと「陣営 A (自分) [シールド 2/2] [交代できる]」が入りきらない。 */
  body.pvpsim-in-battle #pvpsim #pvpsim-out .pvpsim-side-head {
    flex-wrap: wrap; gap: 3px; font-size: 11px; line-height: 1.3;
  }
  body.pvpsim-in-battle #pvpsim #pvpsim-out .pvpsim-side-head { order: -2; }
  body.pvpsim-in-battle #pvpsim #pvpsim-out .pvpsim-slot.is-active { order: -1; }

  /* ---- ③ 縦を詰める。狙い = 相手の残り + 自分の残り が 1 画面に入ること ---- */
  body.pvpsim-in-battle #pvpsim .pvpsim-slot,
  body.pvpsim-in-battle #pvpsim .pvpsim-slotbox { padding: 5px 7px; margin-top: 5px; }
  body.pvpsim-in-battle #pvpsim .pvpsim-img { width: 32px !important; height: 32px !important; }
  body.pvpsim-in-battle #pvpsim .pvpsim-bar { height: 6px; }
  body.pvpsim-in-battle #pvpsim .pvpsim-legend,
  body.pvpsim-in-battle #pvpsim .pvpsim-guide { font-size: 11px; margin-top: 5px; }
  body.pvpsim-in-battle #pvpsim .pvpsim-guide { padding: 6px 8px; }

  /* 控え 2 体は 1 行に圧縮 (画像 24px + 名前 + 細い HP バー)。
     倒せる情報だけ残す = 誰が控えに居て、どれくらい残っているか。 */
  body.pvpsim-in-battle #pvpsim .pvpsim-slot:not(.is-active) .pvpsim-img {
    width: 24px !important; height: 24px !important;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot:not(.is-active) h4 { font-size: 11px; }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot:not(.is-active) .pvpsim-bar { height: 4px; }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot:not(.is-active) .pvpsim-slot-hint {
    margin-top: 3px; font-size: 11px;
  }

  /* 🔴 見出しは **名前の行 / 数値の行 の 2 段**にする。
     `h4` は flex (名前チップ | HP・エネルギー) で、1 カラムだった頃は横並びで足りていた。
     2 カラム化 (2026-07-31 第 2 波) で 1 列 **187px** になり、横並びだと
     数値側が 117px を占めて**名前が幅 0 に潰れて消えた** (実測: chip.w=0 / name.w=0。
     `overflow:hidden` なので警告も出ず、見た目には「名前が無い」ようにしか見えない)。
     → 縦に積めば両方 1 行で読める。
     ⚠️ `justify-content: space-between` は基底に居るが、column にすると
        「上下に離す」意味になってしまうので `flex-start` へ戻す。
     ⚠️ 名前は `min-width: 0` + ellipsis を残す。長い名前 (デカヌチャン等) で
        また潰れるのを防ぐのはこの 2 つ。 */
  body.pvpsim-in-battle #pvpsim .pvpsim-slot h4 {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; flex-wrap: nowrap;
    gap: 1px; font-size: 12px; margin-bottom: 3px;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot h4 .pvpsim-chip {
    flex: 0 0 auto; min-width: 0; max-width: 100%; gap: 4px;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot h4 .pvpsim-chip > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot h4 > .pvpsim-mono {
    flex: 0 0 auto; white-space: nowrap; font-size: 11px; line-height: 1.3;
  }
  /* 場に出ている子だけ画像を 28px にする。
     実測 2026-07-31 (2 カラム 187px): 名前の必要幅 60px に対し 55px しか無く
     「ミミッキュ」が「ミミッ…」になっていた。**足りないのは 5px** なので、
     画像 32→28px (4px) と chip の gap 4→2px (2px) の 6px で足りる。
     ⚠️ 控えは 24px のまま。ここを一緒に縮めると場に出ている子との区別が消える。
     ⚠️ `!important` は基底の `.pvpsim-img { width:32px !important }` に勝つために要る。 */
  body.pvpsim-in-battle #pvpsim .pvpsim-slot.is-active h4 .pvpsim-img {
    width: 28px !important; height: 28px !important;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-slot.is-active h4 .pvpsim-chip { gap: 2px; }

  /* 相手のゲージ技チップは **1 行に収める**。
     実測 2026-07-31: 幅 139px に対し 12px の折り返しで 2 行になり
     「ゴッドバー / ド」「かえんほう / しゃ」と技名が途中で割れていた。
     技名だけを縮めて … で切り、残り必要量 (あと NN) は必ず読めるようにする。 */
  body.pvpsim-in-battle #pvpsim .pvpsim-foe-gauge { gap: 4px; margin-top: 5px; }
  body.pvpsim-in-battle #pvpsim .pvpsim-foe-move {
    display: flex; width: 100%; font-size: 11px; padding: 2px 7px; gap: 4px;
    white-space: nowrap; overflow: hidden;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-foe-move > .pvpsim-type { flex: 0 0 auto; }
  body.pvpsim-in-battle #pvpsim .pvpsim-foe-move > b {
    flex: 1 1 auto; min-width: 0; font-weight: inherit;
    overflow: hidden; text-overflow: ellipsis;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-foe-move em {
    flex: 0 0 auto; margin-left: auto; padding-left: 4px;
  }

  /* ---- ④ コマンドは **場に出ている子のカードの中** に置く ----
     user 指摘 2026-07-31 第 2 波:「技ボタンが下にあるとわかりにくい。そのポケモンのカード内に入れられないか」

     経緯: 2026-07-30 の user 指示は元から「コマンドは場に出ている子のカードの中」だった。
     それを一度 `position: fixed` で画面下へ出したのは、**1 カラムだと縦に入りきらなかった**ため
     (当時 doc 1,886px)。左右 2 カラム化で縦が半分になり、カード内へ戻せるようになった。
     → **DOM も見た目も「カードの中」で一致**する。どの子の技なのかが位置で分かる。

     ⚠️ 1 列は実測 **187px** しかないので **技を縦に積む** (3 列に割ると 1 個 59px で読めない)。
        縦積みなら 1 個が列幅いっぱい × 44px 以上になり、指で押しやすい。
     ⚠️ `position: fixed` を復活させないこと。戻すと「下にあってわかりにくい」に逆戻りする。
        画面内に居るかは verify_pvp_simulator_mobile.py の COMMAND OFF SCREEN が見る。
     ⚠️ 質問 (シールド / 瀕死) も同じ扱い。こちらは選択肢が 2〜3 個で文言が短いので横並びのまま。 */
  body.pvpsim-in-battle #pvpsim .pvpsim-slot.is-active .pvpsim-act-btns {
    display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-shield-btns {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-act-btn {
    flex: none; padding: 5px 7px; font-size: 12px; gap: 1px; border-radius: 6px;
    min-height: 44px; justify-content: center;
  }
  body.pvpsim-in-battle #pvpsim .pvpsim-act-btn em { font-size: 10px; line-height: 1.2; }
  body.pvpsim-in-battle #pvpsim .pvpsim-egauge { margin-top: 3px; height: 4px; }

  /* 🔴 テーマの「トップへ戻る」がコマンドの上に乗ってタップを奪う。
     実測 2026-07-31: `#page-top` は `position: fixed; z-index: 99999` で、
     3 つ目のコマンド (じゃれつく) の**中心を奪っていた** = その技が押せない。
     `elementFromPoint` で当てて初めて分かった (幾何だけ見ていると見落とす)。
     ⚠️ z-index の吊り上げ合戦にしない (99999 に勝つ数字を書くのは次の事故の元)。
        バトル中だけ引っ込めるのが素直。バトルを抜ければ戻る。
     ⚠️ **この 1 行だけ `#pvpsim` の外**。冒頭のスコープ規律の明示的な例外で、
        `body.pvpsim-in-battle` が付くのはこのページのバトル中だけなので影響は閉じている。
     ⚠️ `!important` が要る。テーマは jQuery の fadeIn で **インラインに
        `style="display: block"`** を書き込む (実測) ので、素の宣言では必ず負ける。 */
  body.pvpsim-in-battle #page-top { display: none !important; }

  /* 🔴 reCAPTCHA バッジがタップを奪う件。**対処を 2026-07-31 に変更した**。
     旧: `bottom: 104px` で上へ逃がしていた = 画面下に固定していたコマンドバーを避けるため。
     🔴 技ボタンを**カード内へ戻した**ことで前提が消え、**逆にカードへかぶった**
        (実測 本番 390x844: バッジ y 680〜740 が控えカードに重なり、
         `elementFromPoint` で デカヌチャン のタップが IFRAME に取られていた)。
     → 位置は既定へ戻し、**バトル中はタップを通さないだけ**にする。
     ⚠️ `display:none` にしない = reCAPTCHA の利用条件はバッジの**表示**を求めている。
        `pointer-events` を切っても表示は残るので条件を満たす。
     ⚠️ 位置で避ける方式は「下に何を置いたか」に依存して壊れる。今回それで踏んだ。
        タップを通さない方式は**レイアウトが変わっても壊れない**。 */
  body.pvpsim-in-battle .grecaptcha-badge { pointer-events: none !important; }

  /* ---- ⑤ ログ表はバトル中は控えめに (下へ流す情報) ---- */
  body.pvpsim-in-battle #pvpsim table.pvpsim-table { max-height: 220px; font-size: 11px; }
  body.pvpsim-in-battle #pvpsim table.pvpsim-table th,
  body.pvpsim-in-battle #pvpsim table.pvpsim-table td { padding: 3px 6px; }
}

/* パーティ相性診断 (2026-07-30) */
#pvpsim .pvpsim-diagnose {
  margin-top: 12px; padding: 14px 16px; border: 1px solid var(--pvpsim-line);
  border-radius: 10px; background: var(--pvpsim-panel);
}
#pvpsim .pvpsim-diagnose h4 { margin: 0 0 8px; font-size: 15px; }
#pvpsim .pvpsim-diag-main { font-size: 18px; margin-bottom: 4px; }

/* 診断が「どの編成同士の話か」を画像つきで出す (user 指摘 2026-07-31) */
#pvpsim .pvpsim-diag-vs {
  display: flex; align-items: stretch; gap: 10px; margin: 8px 0 12px;
}
#pvpsim .pvpsim-diag-team {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--pvpsim-line); border-radius: 8px; padding: 8px 10px; background: #fbfcfe;
}
#pvpsim .pvpsim-diag-side {
  font-size: 12px; font-weight: 700; color: var(--pvpsim-dim);
  padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--pvpsim-line);
}
#pvpsim .pvpsim-diag-x {
  align-self: center; flex: none; font-weight: 800; font-size: 13px; color: var(--pvpsim-primary);
}
#pvpsim .pvpsim-diag-mon {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
}
#pvpsim .pvpsim-diag-mon .pvpsim-img { flex: none; }
#pvpsim .pvpsim-diag-info { min-width: 0; }
#pvpsim .pvpsim-diag-name {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pvpsim .pvpsim-diag-cp { font-size: 11px; font-weight: 500; color: var(--pvpsim-dim); }
/* 個体値と実数値。ミラーでは種が同じなのでここが勝敗を分ける (user 指摘 2026-07-31)。
   実数値は桁を揃えて上下で見比べられるようにする。 */
#pvpsim .pvpsim-diag-iv,
#pvpsim .pvpsim-diag-stat {
  font-size: 11px; line-height: 1.45; color: var(--pvpsim-dim);
  font-variant-numeric: tabular-nums;
}
#pvpsim .pvpsim-diag-stat b { color: var(--pvpsim-fg); font-weight: 700; }
/* 各体の実測内訳。因果の寄与ではないので、数値を目立たせすぎない */
#pvpsim .pvpsim-diag-contrib {
  font-size: 11px; line-height: 1.45; color: var(--pvpsim-dim);
  font-variant-numeric: tabular-nums;
  margin-top: 2px; padding-top: 2px; border-top: 1px dotted var(--pvpsim-line);
}
#pvpsim .pvpsim-diag-contrib b { color: var(--pvpsim-fg); }
/* ---- 各体の働きの比較図 (2026-07-31) ----
   カード内に数字を並べても他の子と見比べられない、という user 指摘への対応。
   6 体を **1 本の共通軸**に載せ、削った量の降順に並べる。
   2 系列とも単位は HP なので 1 つの軸に同居してよい (単位の違う 2 軸は重ねない)。
   色は validator 実走で決定: 青 #2a78d6 / 橙 #eb6834
   = CVD ΔE 24.7 / 通常視 33.6 / 対白 3:1 いずれも PASS。 */
#pvpsim .pvpsim-diag-sw.is-dealt { background: #2a78d6; }
#pvpsim .pvpsim-diag-sw.is-taken { background: #eb6834; }
/* 自分と相手を **左右に分ける** (user 指摘 2026-07-31)。
   構造は編成表示 (.pvpsim-diag-vs) と同じ = desktop は左右、スマホは縦積み。
   ⚠️ 軸の最大は JS 側で両陣営共通にしてある。左右で別々に正規化すると
      棒の長さの意味が変わり、左右に分けた意味が無くなる。 */
#pvpsim .pvpsim-work-vs {
  display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 4px;
}
#pvpsim .pvpsim-work-panel {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--pvpsim-line); border-radius: 8px; padding: 8px 10px; background: #fbfcfe;
}
#pvpsim .pvpsim-work-panel.is-mine { background: #f8f9ff; }
#pvpsim .pvpsim-work-row {
  padding: 6px 0; border-bottom: 1px solid var(--pvpsim-line);
}
#pvpsim .pvpsim-work-row:last-of-type { border-bottom: 0; }
#pvpsim .pvpsim-work-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
/* まとめの 1 指標 = 差し引き (削った - 受け止めた)。
   色は診断の発散配色と同じ意味づけ (青 = その陣営に有利 / 赤 = 不利)。
   文字色は濃い段にして本文コントラストを確保 (実測 6.1〜6.5:1)。 */
#pvpsim .pvpsim-work-net {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#pvpsim .pvpsim-work-net.is-plus { color: #1c5cab; }
#pvpsim .pvpsim-work-net.is-minus { color: #b91c1c; }
#pvpsim .pvpsim-work-name {
  font-size: 12px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* [ラベル][棒][数値] の 3 列。数値は右端で桁を揃える */
#pvpsim .pvpsim-work-bars {
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 3.4em;
  align-items: center; gap: 3px 6px;
}
#pvpsim .pvpsim-work-label { font-size: 10px; color: var(--pvpsim-dim); }
#pvpsim .pvpsim-work-track {
  height: 9px; background: #eef2f7; border-radius: 3px; overflow: hidden;
}
#pvpsim .pvpsim-work-track > i { display: block; height: 100%; border-radius: 3px; }
#pvpsim .pvpsim-work-track > i.is-dealt { background: #2a78d6; }
#pvpsim .pvpsim-work-track > i.is-taken { background: #eb6834; }
#pvpsim .pvpsim-work-val {
  font-size: 11px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--pvpsim-fg); font-weight: 700;
}
#pvpsim .pvpsim-diag-mon { align-items: flex-start; }
#pvpsim .pvpsim-diag-mon .pvpsim-img { margin-top: 2px; }
#pvpsim .pvpsim-diag-moves {
  font-size: 11px; color: var(--pvpsim-dim); line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 2px 6px;
}
/* 折り返しは **技と技の間**でだけ起こす (技名の途中で切らない) */
#pvpsim .pvpsim-diag-move { white-space: nowrap; }
#pvpsim .pvpsim-diag-moves .pvpsim-type { width: 13px; height: 13px; vertical-align: -2px; }

/* レギュレーションの選択は **ページの最初** (user 指摘 2026-07-31)。
   ここを変えると編成が丸ごと入れ替わるので、編成カードより前に置く。 */
#pvpsim .pvpsim-league {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--pvpsim-line); border-radius: 8px; background: var(--pvpsim-panel);
}
#pvpsim .pvpsim-league label {
  display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--pvpsim-dim);
}
#pvpsim .pvpsim-league select {
  width: auto; max-width: 100%; min-height: 44px; font-size: 15px; font-weight: 600;
}
#pvpsim .pvpsim-league .pvpsim-legend { margin-top: 6px; }
@media (max-width: 640px) {
  #pvpsim .pvpsim-league select { width: 100%; }
}

/* ---- 相性診断の図 (2026-07-31) ----
   配色は dataviz skill の validator を実走させて決めた (目視で決めていない):
     発散の 2 極 = 青 #2a78d6 ↔ 赤 #e34948 (CVD ΔE 21.6 / 通常視 32.3 / 対白 3:1 以上)
     表のセル    = 淡い段 #86b6ef ↔ #ee9a97 (CVD ΔE 12.5 / 通常視 17.9、黒文字 9.1:1 以上)
   ⚠️ 飽和色は**小さなマークだけ**に使う (棒と凡例)。表のセルのような大きな面は淡い段。
   ⚠️ 五分は**塗らない**。淡い 3 色にすると通常視でも見分けられない (ΔE 15 未満を実測)。
   ⚠️ 色だけで意味を持たせない。セルにも凡例にも数字を書く。 */
#pvpsim .pvpsim-diag-figure { margin: 12px 0; }
#pvpsim .pvpsim-diag-figtitle {
  font-size: 12px; font-weight: 700; color: var(--pvpsim-dim); margin-bottom: 6px;
}
/* 積み上げ横棒。仕切り線は引かず **2px の隙間**で分ける */
#pvpsim .pvpsim-diag-bar {
  display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden;
  background: transparent;
}
#pvpsim .pvpsim-diag-bar > i { display: block; min-width: 3px; }
#pvpsim .pvpsim-diag-bar > i:first-child { border-radius: 4px 0 0 4px; }
#pvpsim .pvpsim-diag-bar > i:last-child { border-radius: 0 4px 4px 0; }
#pvpsim .pvpsim-diag-bar > i.is-win { background: #2a78d6; }
#pvpsim .pvpsim-diag-bar > i.is-loss { background: #e34948; }
#pvpsim .pvpsim-diag-bar > i.is-draw { background: #c3c2b7; }
#pvpsim .pvpsim-diag-key {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  font-size: 12px; color: var(--pvpsim-dim);
}
#pvpsim .pvpsim-diag-keyitem { display: inline-flex; align-items: center; gap: 5px; }
#pvpsim .pvpsim-diag-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
#pvpsim .pvpsim-diag-sw.is-win { background: #2a78d6; }
#pvpsim .pvpsim-diag-sw.is-loss { background: #e34948; }
#pvpsim .pvpsim-diag-sw.is-draw { background: #c3c2b7; }

/* 先発 3×3 の表。テーマの素の table セレクタに負けないよう ID から書く */
#pvpsim table.pvpsim-diag-table {
  width: 100%; border-collapse: separate; border-spacing: 2px;
  background: transparent; font-size: 12px; table-layout: fixed;
}
#pvpsim table.pvpsim-diag-table th,
#pvpsim table.pvpsim-diag-table td {
  background: transparent; color: var(--pvpsim-fg); border: 0;
  padding: 4px 3px; text-align: center; vertical-align: middle;
}
#pvpsim table.pvpsim-diag-table th span {
  display: block; font-size: 10px; font-weight: 600; line-height: 1.25;
  color: var(--pvpsim-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pvpsim table.pvpsim-diag-table th .pvpsim-img { margin: 0 auto; }
/* ⚠️ 角の見出しは折り返して全部見せる。上の `th span` が nowrap + ellipsis なので
   **overflow と text-overflow も戻さないと**「自分の先発 \ …」と切れる (実測)。 */
#pvpsim .pvpsim-diag-corner span {
  font-size: 9px; font-weight: 500; text-align: left; line-height: 1.3;
  white-space: normal; overflow: visible; text-overflow: clip;
}
#pvpsim td.pvpsim-diag-cell {
  border-radius: 5px; font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #0b0b0b; background: #ffffff; box-shadow: inset 0 0 0 1px var(--pvpsim-line);
}
#pvpsim td.pvpsim-diag-cell.is-win { background: #86b6ef; box-shadow: none; }
#pvpsim td.pvpsim-diag-cell.is-loss { background: #ee9a97; box-shadow: none; }

@media (max-width: 640px) {
  #pvpsim .pvpsim-work-vs { flex-direction: column; gap: 6px; }
  #pvpsim table.pvpsim-diag-table th span { font-size: 9px; }
  #pvpsim td.pvpsim-diag-cell { font-size: 11px; padding: 6px 2px; }
}

/* パーティ相性診断の操作は **バトルの操作とは別の箱**に置く
   (user 指摘 2026-07-31「バトル開始ボタンの横に並んでいると紛らわしい」)。
   1 戦を進める操作ではなく、押すと今のバトルを捨てて 18 戦をまとめて回すため。 */
#pvpsim .pvpsim-diag-actions {
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--pvpsim-line); border-radius: 8px; background: #fafbfd;
}
#pvpsim .pvpsim-diag-actions-head {
  font-size: 13px; font-weight: 700; color: var(--pvpsim-dim); margin-bottom: 6px;
}
#pvpsim .pvpsim-diag-actions .pvpsim-btn { margin: 0; }
#pvpsim .pvpsim-diag-actions .pvpsim-legend { margin-top: 6px; }

@media (max-width: 640px) {
  /* 縦 1 列にして VS を間に挟む */
  #pvpsim .pvpsim-diag-vs { flex-direction: column; gap: 6px; }
  #pvpsim .pvpsim-diag-x { align-self: center; }
  /* バトル中は診断の操作を出さない (押すとそのバトルが消えるため) */
  body.pvpsim-in-battle #pvpsim .pvpsim-diag-actions { display: none; }
}