/* ============================================
   マックスバトル シミュレータ - スタイルシート v2 (Phase 5.5)
   OneDrive 元 UI 準拠 (ポップ紫グラデーション)
   命名規則: .mbs-* prefix (= MaxBattle Simulator)、Phase 3.5 a11y クラス維持
   設計書: docs/design/future/maxbattle_simulator.md §6.3.2 (モバイル) / §6.3.3 (a11y)
   ============================================ */

/* ---------- CSS 変数 ---------- */
:root {
  --mbs-primary: #667eea;
  --mbs-primary-dark: #5568d3;
  --mbs-secondary: #764ba2;
  --mbs-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --mbs-bg: #f5f5f5;
  --mbs-panel: #ffffff;
  --mbs-text: #333333;
  --mbs-text-muted: #555555;
  --mbs-border: #e2e8f0;
  --mbs-hp-color: #ef4444;
  --mbs-energy-color: #fbbf24;
  --mbs-meter-color: #a78bfa;
  --mbs-shield-color: #60a5fa;
  --mbs-success: #10b981;
  --mbs-warn: #f59e0b;
  --mbs-danger: #ef4444;
  --mbs-radius: 8px;
  --mbs-radius-sm: 6px;
  --mbs-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  --mbs-shadow-lg: 0 8px 24px rgba(102, 126, 234, 0.25);
}

/* ---------- Screen reader only (Phase 3.5 MF4 維持) ---------- */
.mbs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ローディング画面 ---------- */
.mbs-loader {
  position: fixed;
  inset: 0;
  background: var(--mbs-grad);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
}

.mbs-loader__inner {
  text-align: center;
  max-width: 360px;
  padding: 1.5rem;
}

.mbs-loader__title {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.mbs-loader__spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: mbs-spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.mbs-loader__msg { font-size: 1rem; margin-bottom: 0.5rem; }
.mbs-loader__detail { font-size: 0.85rem; opacity: 0.9; }
.mbs-loader__retry { margin-top: 1rem; }

/* Phase 6.C Phase 0 真因確定: .mbs-loader は display:flex で UA 既定 [hidden]{display:none}
 * を上書きしてしまうため、setHidden() で hidden 属性を set しても消えない。
 * これが「ブリッジを初期化中」永久残留の真因 (実際は bootstrap +1440ms で完了済)。
 * 同じ理由で .mbs-btn (inline-flex) も hidden 属性が効かなかった。 */
.mbs-loader[hidden] { display: none; }
.mbs-btn[hidden] { display: none; }

@keyframes mbs-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---------- ヘッダー ---------- */
.mbs-header {
  background: var(--mbs-grad);
  color: white;
  padding: 1.5rem 1rem;
  text-align: center;
}

.mbs-title { font-size: 1.6rem; margin: 0 0 0.4rem 0; font-weight: 700; }

.mbs-env-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ---------- メインシェル ---------- */
/* Phase 5.9: #content (AFFINGER chrome 除去後、max-width:1060px 中央寄せ) に従って
 * shell も max-width:100% へ。type-ranking と同じ 1060px ページ幅をフル活用する。
 * 旧 Phase 5.8 の 900px は #content (max-width:none) との組み合わせで「狭い枠の中の中身」
 * 状態になっていたため修正。 */
.mbs-shell {
  font-family: "Segoe UI", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  line-height: 1.6;
  color: var(--mbs-text);
  background-color: var(--mbs-bg);
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
}

.mbs-shell[hidden] { display: none; }

/* ---------- セクション ---------- */
.mbs-section {
  background: var(--mbs-panel);
  border-radius: var(--mbs-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--mbs-shadow);
}

.mbs-section[hidden] { display: none; }

.mbs-section__h {
  font-size: 1.2rem;
  color: var(--mbs-primary);
  margin: 0 0 0.4rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--mbs-border);
}

/* ---------- フォーム要素 ---------- */
.mbs-form-group { margin-bottom: 1rem; }

.mbs-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  color: var(--mbs-text-muted);
}

select,
input[type="number"],
input[type="text"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-sm);
  font-size: 0.95rem;
  background: white;
  color: var(--mbs-text);
  font-family: inherit;
}

select:focus, input:focus {
  outline: 2px solid var(--mbs-primary);
  outline-offset: 1px;
}

select:disabled, input:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

/* ---------- チェックボックス ---------- */
.mbs-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.mbs-checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mbs-primary);
}

/* Phase 7: ダイキノコトグル — checkbox + icon + text を 1 枠にまとめ視認性改善
 * 旧 `.mbs-checkbox-group` で section 3 grid 内で checkbox と label が
 * 別セルのように離れて見える問題 (スクショ 2026-05-13 232621) を解消。 */
.mbs-mushroom-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-sm);
  background: white;
  cursor: pointer;
  width: fit-content;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease;
}
.mbs-mushroom-toggle:has(input:checked) {
  border-color: var(--mbs-primary);
  background: #fff5e6;
}
.mbs-mushroom-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mbs-primary);
  flex-shrink: 0;
}
.mbs-mushroom-toggle__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}
.mbs-mushroom-toggle__text {
  line-height: 1.2;
  font-size: 0.95rem;
  color: var(--mbs-text);
}
.mbs-mushroom-toggle__text small {
  display: block;
  font-size: 0.75rem;
  color: var(--mbs-text-muted);
  font-weight: 400;
}

/* ---------- ボタン ---------- */
.mbs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: var(--mbs-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease, transform 60ms ease;
  font-family: inherit;
}

.mbs-btn--primary {
  background: var(--mbs-grad);
  color: white;
  box-shadow: var(--mbs-shadow-lg);
}

.mbs-btn--primary:hover { filter: brightness(1.08); }
.mbs-btn--primary:active { transform: translateY(1px); }

.mbs-btn--secondary {
  background: white;
  color: var(--mbs-primary);
  border: 1.5px solid var(--mbs-primary);
}

.mbs-btn--secondary:hover { background: #f5f3ff; }

.mbs-btn--large {
  font-size: 1.05rem;
  padding: 0.85rem 1.6rem;
  min-width: 200px;
}

.mbs-btn:disabled {
  filter: grayscale(0.6);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

/* ---------- ボス情報ボックス ---------- */
.mbs-info-box {
  background: #f8fafc;
  border-radius: var(--mbs-radius-sm);
  padding: 1rem;
}

.mbs-info-box[hidden] { display: none; }

.mbs-data-source {
  font-size: 0.8rem;
  color: #888;
  padding: 0.3rem 0.5rem;
  margin: 0.5rem 0 1rem;
}

.mbs-data-source a {
  color: #666;
  text-decoration: underline;
}

.mbs-boss-info__layout {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.mbs-boss-info__image-container {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mbs-boss-info__image[hidden] { display: none; }

.mbs-boss-info__image {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.mbs-boss-info__placeholder {
  font-size: 2.5rem;
  color: #cbd5e1;
}

.mbs-boss-info__details { flex: 1; min-width: 180px; }
.mbs-boss-info__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.mbs-stat { font-size: 0.95rem; }
.mbs-boss-info__moves { margin-top: 0.5rem; font-size: 0.9rem; color: var(--mbs-text-muted); }

/* Phase 5.10: ボス技 2 選 UI (boss_move_single + boss_move_aoe) */
.mbs-boss-moves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.mbs-boss-moves-grid .mbs-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
}
.mbs-boss-moves-grid .mbs-field__label {
  font-weight: 600;
  color: var(--mbs-text-muted);
}
.mbs-boss-moves-grid .mbs-field__help {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--mbs-text-muted);
  margin: 0.1rem 0 0;
}
@media (max-width: 480px) {
  .mbs-boss-moves-grid { grid-template-columns: 1fr; }
}

/* ---------- パーティ編成グリッド ---------- */
.mbs-party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.mbs-party-slot {
  background: #f8fafc;
  border-radius: var(--mbs-radius-sm);
  padding: 1rem;
  border: 1px solid var(--mbs-border);
}

.mbs-party-slot__h {
  font-size: 1rem;
  color: var(--mbs-primary);
  margin: 0 0 0.6rem 0;
  text-align: center;
}

.mbs-pokemon-image-container {
  width: 100px;
  height: 100px;
  margin: 0 auto 0.8rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mbs-pokemon-image {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.mbs-pokemon-image[hidden] { display: none; }

.mbs-pokemon-image-placeholder {
  font-size: 2.5rem;
  color: #cbd5e1;
}

/* PL/IV 入力 */
.mbs-pl-iv-group {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.mbs-pl-select-wrapper { flex: 0 0 60px; }
.mbs-iv-inputs-wrapper { flex: 1; }

.mbs-iv-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.mbs-iv-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
}

.mbs-iv-label { color: var(--mbs-text-muted); margin-bottom: 0.15rem; }

.mbs-iv-input {
  text-align: center;
  padding: 0.3rem 0.2rem;
  font-size: 0.85rem;
}

.mbs-pl-iv-hint {
  font-size: 0.75rem;
  color: var(--mbs-text-muted);
  margin: 0.4rem 0 0 0;
  font-style: italic;
}

.mbs-pl-iv-realstats {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #444;
  display: flex;
  gap: 0.8rem;
}

.mbs-realstat { font-weight: 500; }

.mbs-realstat-cp,
.mbs-realstat-hp {
  color: #1976d2;
  font-weight: 700;
}

/* ---------- シミュレーション設定 ---------- */
.mbs-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* ---------- 実行ボタン ---------- */
.mbs-action-section {
  text-align: center;
  margin-bottom: 1.5rem;
}

.mbs-status-text {
  margin: 0.6rem 0 0 0;
  color: var(--mbs-text-muted);
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* ============================================
   手動バトルセクション
   ============================================ */

.mbs-battle-arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .mbs-battle-arena { grid-template-columns: 1fr; }
}

.mbs-boss-status-panel,
.mbs-party-status-panel,
.mbs-active-pokemon-panel {
  background: #f8fafc;
  border-radius: var(--mbs-radius-sm);
  padding: 1rem;
}

.mbs-boss-status-panel h3,
.mbs-party-status-panel h3,
.mbs-active-pokemon-panel h3,
.mbs-action-panel h3 {
  font-size: 1rem;
  margin: 0 0 0.6rem 0;
  color: var(--mbs-primary);
}

.mbs-active-pokemon-panel { margin-bottom: 1rem; }

.mbs-boss-status-content,
.mbs-active-pokemon-content {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.mbs-boss-status-image,
.mbs-active-pokemon-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
}

.mbs-battle-pokemon-image {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.mbs-boss-status-info,
.mbs-active-pokemon-info { flex: 1; min-width: 0; }

.mbs-status-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.mbs-active-pokemon-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.mbs-active-pokemon-type {
  font-size: 0.8rem;
  color: var(--mbs-text-muted);
  font-weight: normal;
  margin-left: 0.4rem;
}

/* ---------- ステータスバー ---------- */
.mbs-status-bar-container { margin-bottom: 0.4rem; }

.mbs-status-bar-container label {
  font-size: 0.7rem;
  color: var(--mbs-text-muted);
  font-weight: 600;
  margin-bottom: 0.1rem;
  display: block;
}

.mbs-status-bar {
  position: relative;
  height: 16px;
  background: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.mbs-status-bar-fill {
  height: 100%;
  transition: width 200ms ease;
}

.mbs-hp-bar .mbs-status-bar-fill { background: var(--mbs-hp-color); }
.mbs-energy-bar .mbs-status-bar-fill { background: var(--mbs-energy-color); }
.mbs-meter-bar .mbs-status-bar-fill { background: var(--mbs-meter-color); }
.mbs-shield-bar .mbs-status-bar-fill { background: var(--mbs-shield-color); }

.mbs-status-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.mbs-boss-next-attack {
  font-size: 0.85rem;
  color: var(--mbs-text-muted);
  margin-top: 0.4rem;
}

/* ---------- パーティステータスグリッド ---------- */
.mbs-party-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mbs-party-member-status {
  background: white;
  border-radius: var(--mbs-radius-sm);
  padding: 0.4rem;
  border: 2px solid transparent;
  font-size: 0.8rem;
}

.mbs-party-member-status[data-active="true"] {
  border-color: var(--mbs-primary);
  background: #f5f3ff;
}

.mbs-party-member-status[data-fainted="true"] {
  opacity: 0.45;
  background: #f1f5f9;
}

.mbs-party-member-header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
  font-size: 0.78rem;
}

.mbs-mini-shield {
  margin-top: 0.2rem;
}

.mbs-mini-shield-bar {
  height: 5px;
  background: #dbeafe;
  border-radius: 3px;
  overflow: hidden;
}

.mbs-mini-shield-fill {
  height: 100%;
  background: var(--mbs-shield-color);
  transition: width 200ms ease;
}

.mbs-mini-shield-text {
  font-size: 0.68rem;
  color: var(--mbs-text-muted);
  display: block;
  margin-top: 0.05rem;
}

.mbs-party-member-index { font-weight: 700; color: var(--mbs-primary); }

/* Phase 5.12 #2: 画像入り custom combobox (party selector) */
/* 上の native <select> は a11y / form submit / 既存ロジック互換のため残しつつ視覚的に非表示にする */
.mbs-form-group:has(.mbs-combobox) .mbs-pokemon-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mbs-combobox-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mbs-combobox-anchor {
  width: 100%;
}
.mbs-combobox {
  position: relative;
  width: 100%;
}
.mbs-combobox__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  padding: 0.2rem 0.4rem;
  background: white;
}
.mbs-combobox__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: white;
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--mbs-text);
  text-align: left;
}
.mbs-combobox__search--always {
  flex: 1 1 200px;
  width: auto;
}
.mbs-combobox__toggle:hover,
.mbs-combobox__toggle:focus-visible {
  border-color: var(--mbs-primary);
  outline: 2px solid var(--mbs-primary);
  outline-offset: -2px;
}
.mbs-combobox__current-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
  border: 1px solid var(--mbs-border);
  flex-shrink: 0;
}
.mbs-combobox__current-img[hidden] { display: none; }
.mbs-combobox__input {
  border: none;
  flex: 1;
  width: auto;
  padding: 0.4rem 0;
  font-size: 1rem;
  outline: none;
  background: transparent;
}

.mbs-combobox__input:focus {
  outline: 2px solid #888;
  outline-offset: 1px;
}
.mbs-combobox__current-types {
  display: inline-flex;
  gap: 2px;
}
.mbs-combobox__current-types .mbs-type-icon { width: 16px; height: 16px; }
/* Phase 5.14-A A4: 長いポケモン名 (キョダイマックスゲンガー等) を 2 行表示許容してフル表示 */
.mbs-combobox__current-name {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  font-weight: 600;
}
.mbs-combobox__caret {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--mbs-text-muted);
  transition: transform 150ms ease;
}
.mbs-combobox__toggle[aria-expanded="true"] .mbs-combobox__caret {
  transform: rotate(180deg);
}
.mbs-combobox__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: white;
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-sm);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
}
.mbs-combobox__list[hidden] { display: none; }
.mbs-combobox__list li[role="option"] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--mbs-radius-sm);
  cursor: pointer;
}
.mbs-combobox__list li[role="option"]:hover,
.mbs-combobox__list li[role="option"]:focus,
.mbs-combobox__list li[role="option"].is-active {
  background: #eef2ff;
  outline: none;
}
.mbs-combobox__list li[aria-selected="true"] {
  background: #ede9fe;
  font-weight: 600;
}
.mbs-combobox__opt-img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}
.mbs-combobox__opt-types {
  display: inline-flex;
  gap: 2px;
}
.mbs-combobox__opt-types .mbs-type-icon { width: 16px; height: 16px; }
.mbs-combobox__opt-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbs-combobox__opt-meta {
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--mbs-text-muted);
}
.mbs-boss-combobox .mbs-combobox__current-name,
.mbs-move-combobox .mbs-combobox__current-name {
  line-height: 1.25;
}
.mbs-boss-combobox .mbs-combobox__list li[role="option"],
.mbs-move-combobox .mbs-combobox__list li[role="option"] {
  min-height: 40px;
}
.mbs-boss-combobox .mbs-combobox__opt-types,
.mbs-move-combobox .mbs-combobox__opt-types,
.mbs-boss-combobox .mbs-combobox__current-types,
.mbs-move-combobox .mbs-combobox__current-types {
  gap: 4px;
}
.mbs-boss-combobox .mbs-combobox__opt-types .mbs-type-icon,
.mbs-move-combobox .mbs-combobox__opt-types .mbs-type-icon,
.mbs-boss-combobox .mbs-combobox__current-types .mbs-type-icon,
.mbs-move-combobox .mbs-combobox__current-types .mbs-type-icon {
  width: 18px;
  height: 18px;
}

/* Phase 5.12 #1: タイプアイコン (技名前 / ポケモン名前 / ボス名前) 共通 */
.mbs-type-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.mbs-type-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}
.mbs-type-icons--inline .mbs-type-icon { width: 14px; height: 14px; }

/* Phase 5.12 #6: 戦闘中パーティカードのポケモン画像 */
.mbs-party-member-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid var(--mbs-border);
  flex-shrink: 0;
}

/* Phase 5.14-B B5/B8/#4: マックス技 Lv 管理 (パーティ slot 内 3 select) */
.mbs-dynamax-levels-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--mbs-border);
}
.mbs-dynamax-levels-label {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--mbs-muted);
}
.mbs-dynamax-levels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mbs-dynamax-level-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 0;
  min-width: 100px;
}
.mbs-dynamax-level-name {
  font-size: 0.75em;
  color: var(--mbs-muted);
}
.mbs-dynamax-level-item select {
  font-size: 0.85em;
  padding: 2px 4px;
}

/* Phase 5.14-A D21: 戦闘下部 swap ボタン内のポケモン画像 */
.mbs-action-swap-image {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid var(--mbs-border);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 4px;
}

.mbs-party-member-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbs-mini-hp-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.mbs-mini-hp-fill {
  height: 100%;
  background: var(--mbs-hp-color);
  transition: width 200ms ease;
}

.mbs-mini-hp-text {
  font-size: 0.7rem;
  color: var(--mbs-text-muted);
  display: block;
  margin-top: 0.1rem;
}

/* ---------- 行動選択パネル ---------- */
.mbs-action-panel {
  background: #f8fafc;
  border-radius: var(--mbs-radius-sm);
  padding: 0.5rem;
  margin-bottom: 1rem;
}

.mbs-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 200px;
}

.mbs-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mbs-action-pair {
  display: flex;
  gap: 0.4rem;
  flex: 1 1 100%;
}

.mbs-action-pair .mbs-action-btn {
  flex: 1 1 0;
}

.mbs-action-group[hidden] { display: none; }

.mbs-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--mbs-border);
  border-radius: var(--mbs-radius-sm);
  background: white;
  color: var(--mbs-text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px; /* Apple HIG / Material */
  font-family: inherit;
  transition: all 120ms ease;
}

.mbs-action-btn:hover:not(:disabled) {
  border-color: var(--mbs-primary);
  background: #f5f3ff;
}

.mbs-action-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.mbs-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mbs-action-key {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--mbs-primary);
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: ui-monospace, "Menlo", monospace;
}

.mbs-action-cost,
.mbs-action-target,
.mbs-action-desc {
  font-size: 0.75rem;
  color: var(--mbs-text-muted);
  font-weight: normal;
}

.mbs-utility-actions .mbs-action-btn {
  background: #fffbeb;
  border-color: #fbbf24;
}

.mbs-utility-actions .mbs-action-btn:hover:not(:disabled) {
  background: #fef3c7;
}

/* Phase 5.6: ダイマックス対象選択パネル (メーター満タン時に通常 action を hide して表示) */
.mbs-dynamax-select-actions {
  background: #f5f3ff;
  border: 2px solid var(--mbs-meter-color);
  border-radius: var(--mbs-radius-sm);
  padding: 0.6rem;
  align-items: center;
}

.mbs-dynamax-select-hint {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--mbs-secondary);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.mbs-dynamax-select-btn {
  border-color: var(--mbs-meter-color);
  background: white;
}

.mbs-dynamax-select-btn:hover:not(:disabled) {
  background: #ede9fe;
  border-color: var(--mbs-secondary);
}

.mbs-dynamax-cancel-btn {
  background: #f1f5f9;
  border-color: var(--mbs-border);
  margin-left: auto;
}

/* Phase 5.6: DODGE / COLLECT_MARK ボタンの残秒数 inline 表示 */
.mbs-action-btn-countdown {
  font-size: 0.78rem;
  color: var(--mbs-text-muted);
  margin-left: 0.4rem;
  font-weight: normal;
}

/* Phase 5.7: WAIT ボタンのサブテキスト (ユーザーに能動操作を促す) */
.mbs-action-sub {
  font-size: 0.72rem;
  color: var(--mbs-text-muted);
  margin-left: 0.3rem;
  font-weight: normal;
  font-style: italic;
}

/* Phase 5.14-A D14: 待機ボタンを行末 (右側) に独立配置。flex-wrap で 1 行目右端 or 2 行目右端に押し出される */
.mbs-action-wait {
  background: rgba(150, 150, 150, 0.15);
  border-color: rgba(150, 150, 150, 0.3);
  margin-left: auto;
  order: 99;  /* 他 action ボタンより必ず後置 */
  opacity: 0.55;
  font-size: 0.85rem;
}

.mbs-action-wait:hover:not(:disabled) {
  background: rgba(150, 150, 150, 0.25);
  opacity: 0.8;
}

/* Phase 5.12 #7: ダイマックスマーク出現 強調表示 */
.mbs-mark-indicator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.7rem 1rem;
  margin: 0 0 0.6rem 0;
  border-radius: var(--mbs-radius);
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  border: 2px solid #f59e0b;
  font-weight: 700;
  color: #78350f;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35);
  animation: mbs-mark-indicator-pulse 1.2s ease-in-out infinite;
}
.mbs-mark-indicator[hidden] {
  visibility: hidden;
  display: flex;
  pointer-events: none;
  animation: none;
}
.mbs-mark-indicator__icon {
  font-size: 1.4rem;
  text-shadow: 0 0 6px #fff;
}
.mbs-mark-indicator__sec {
  font-weight: normal;
  font-size: 0.85rem;
  color: #92400e;
  margin-left: 0.3rem;
}
@keyframes mbs-mark-indicator-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.55);
    transform: scale(1.015);
  }
}

/* Phase 5.12 #8: マーク取得 + 回避兼用 強調 (両 window 重複時) */
.mbs-action--mark-dodge-combo:not(:disabled) {
  background: linear-gradient(135deg, #fef3c7 0%, #c7e8ff 100%);
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
  animation: mbs-mark-dodge-pulse 1.4s ease-in-out infinite;
}

.mbs-action-btn--prominent:not(:disabled) {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 55%, #fbbf24 100%);
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}
@keyframes mbs-mark-dodge-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.55); }
}

/* Phase 15-B v1.54.0: Review #5 nice-to-have 中 — simulator 固有の hook 導入文 */
.mbs-lead {
  font-size: 1.02rem;
  color: #1f2937;
  line-height: 1.55;
  margin: 0.6rem 0 0.4rem;
  padding: 0 0.2rem;
  font-weight: 400;
  text-align: left;
}
@media (max-width: 768px) {
  .mbs-lead { font-size: 0.92rem; margin: 0.4rem 0 0.3rem; }
}

.mbs-disclaimer {
  font-size: 0.95rem;
  color: #555;
  padding: 0.7rem 1rem;
  background: rgba(255, 200, 100, 0.15);
  border-left: 4px solid #f59e0b;
  margin: 1rem 0;
  font-weight: 500;
  text-align: left;
}

.mbs-compat-note {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: #666;
  padding: 0.3rem 0.6rem;
}

.mbs-compat-note summary {
  cursor: pointer;
  font-weight: 500;
}

.mbs-compat-note ul {
  margin: 0.3rem 0 0 1.2rem;
  padding: 0;
}

.mbs-compat-note li {
  margin: 0.2rem 0;
}

.mbs-compat-note p {
  margin: 0.4rem 0 0 0;
  font-size: 0.8rem;
  color: #888;
}

/* ---------- タイマー ---------- */
.mbs-battle-timer-panel {
  text-align: center;
  background: #f8fafc;
  padding: 0.7rem;
  border-radius: var(--mbs-radius-sm);
  margin-bottom: 1rem;
}

.mbs-timer-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mbs-primary);
  font-family: ui-monospace, "Menlo", monospace;
}

.mbs-timer-tick {
  font-size: 0.85rem;
  color: var(--mbs-text-muted);
  margin-left: 0.4rem;
}

/* ---------- バトルログ ---------- */
.mbs-battle-log {
  background: #f8fafc;
  border-radius: var(--mbs-radius-sm);
  padding: 0.6rem;
}

.mbs-battle-log summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--mbs-primary);
  margin-bottom: 0.3rem;
  padding: 0.3rem 0;
}

.mbs-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.78rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mbs-border);
  margin-bottom: 0.5rem;
}

.mbs-log-filters label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.mbs-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  font-family: ui-monospace, "Menlo", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}

.mbs-log-list li {
  padding: 0.15rem 0.3rem;
  border-bottom: 1px solid #eef2f7;
}

.mbs-log-list li[data-kind="DAMAGE_DEALT"] { color: var(--mbs-success); }
.mbs-log-list li[data-kind="DAMAGE_RECEIVED"] { color: var(--mbs-danger); }
.mbs-log-list li[data-kind="DYNAMAX"] { color: var(--mbs-secondary); font-weight: 600; }
.mbs-log-list li[data-kind="DYNAMAX_START"] { color: var(--mbs-secondary); font-weight: 600; }
.mbs-log-list li[data-kind="FAINT"] { color: var(--mbs-danger); font-weight: 600; }
.mbs-log-list li[data-kind="INVALID"] { color: var(--mbs-warn); }
.mbs-log-list li[hidden] { display: none; }

/* ============================================
   結果モーダル (Phase 3.5 MF1 focus trap 維持)
   ============================================ */

.mbs-result-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mbs-result-modal[hidden] { display: none; }

.mbs-result-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
}

.mbs-result-modal__content {
  position: relative;
  background: white;
  border-radius: var(--mbs-radius);
  padding: 1.5rem;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.mbs-result-modal__h {
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  color: var(--mbs-primary);
  text-align: center;
}

.mbs-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.mbs-result-card {
  background: #f8fafc;
  border-radius: var(--mbs-radius-sm);
  padding: 0.8rem;
  text-align: center;
}

.mbs-result-card__label {
  font-size: 0.75rem;
  color: var(--mbs-text-muted);
  margin-bottom: 0.3rem;
}

.mbs-result-card__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mbs-text);
}


.mbs-result-modal__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

/* ============================================
   モバイル調整 (768px 以下)
   ============================================ */
@media (max-width: 768px) {
  /* Phase 8v2: モバイル全体圧縮 — setup 画面 + battle 画面とも縦詰め最優先 */
  .mbs-header { padding: 0.4rem 0.6rem; }
  .mbs-title { font-size: 1rem; margin: 0; line-height: 1.2; }
  .mbs-env-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; }
  .mbs-shell { padding: 0.5rem 0.5rem 1rem; }
  .mbs-section { padding: 0.5rem; margin-bottom: 0.5rem; }
  .mbs-section__h { font-size: 0.9rem; margin: 0 0 0.3rem; }
  .mbs-form-group { margin-bottom: 0.4rem; }
  .mbs-form-group label { font-size: 0.75rem; margin-bottom: 0.15rem; }
  .mbs-disclaimer { font-size: 0.7rem; margin: 0.3rem 0; padding: 0.3rem 0.4rem; }
  .mbs-compat-note { font-size: 0.7rem; margin-bottom: 0.3rem; }

  .mbs-action-buttons { gap: 0.5rem; }
  .mbs-action-btn { flex: 1 1 calc(50% - 0.25rem); justify-content: center; }
  .mbs-action-pair { flex-basis: 100%; }
  .mbs-utility-actions .mbs-action-btn { flex: 1 1 calc(50% - 0.25rem); }
  .mbs-party-status-grid { grid-template-columns: 1fr; }
  .mbs-result-grid { grid-template-columns: 1fr 1fr; }
  .mbs-pl-iv-group { flex-direction: column; align-items: stretch; }
  .mbs-pl-select-wrapper { flex: none; }

  /* === ボス選択 section === */
  .mbs-boss-info { padding: 0.4rem !important; }
  .mbs-boss-info__layout { gap: 0.4rem; }
  .mbs-boss-info__image-container { width: 60px !important; height: 60px !important; }
  .mbs-boss-info__image { max-width: 56px !important; max-height: 56px !important; }
  .mbs-boss-info__details { font-size: 0.75rem; }
  .mbs-boss-info__stats { gap: 0.3rem; flex-wrap: wrap; }
  .mbs-stat { font-size: 0.72rem; }
  .mbs-boss-info__moves { font-size: 0.72rem; margin-top: 0.15rem; }
  .mbs-boss-moves-grid { grid-template-columns: 1fr 1fr; gap: 0.25rem; margin-top: 0.2rem; }
  .mbs-field__help { font-size: 0.65rem; }

  /* === パーティ 3 cards 圧縮 === */
  .mbs-party-grid { gap: 0.4rem; }
  .mbs-party-slot { padding: 0.4rem !important; }
  .mbs-party-slot__h { font-size: 0.75rem; margin: 0 0 0.2rem; }
  .mbs-pokemon-image-container {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 0.3rem !important;
  }
  .mbs-pokemon-image { width: 44px !important; height: 44px !important; }
  .mbs-pl-iv-group {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }
  .mbs-pl-iv-group label { font-size: 0.7rem; margin: 0; }
  .mbs-pl-select-wrapper { flex: 0 0 auto !important; display: flex; align-items: center; gap: 0.2rem; }
  .mbs-pl-select { padding: 0.2rem 0.3rem !important; font-size: 0.75rem; }
  .mbs-iv-inputs-wrapper { flex: 1; display: flex; align-items: center; gap: 0.2rem; }
  .mbs-iv-inputs { gap: 0.2rem; }
  .mbs-iv-input-group { gap: 0.15rem; }
  .mbs-iv-label { font-size: 0.65rem; }
  .mbs-iv-input {
    width: 38px !important;
    padding: 0.15rem 0.3rem !important;
    font-size: 0.75rem !important;
  }
  .mbs-pl-iv-hint { font-size: 0.62rem; margin: 0.15rem 0 0; }
  .mbs-pl-iv-realstats { font-size: 0.65rem; margin-top: 0.15rem; gap: 0.4rem; }
  .mbs-dynamax-levels-group { margin-bottom: 0.3rem; }
  .mbs-dynamax-levels-label { font-size: 0.7rem; }
  .mbs-dynamax-levels-row { gap: 0.2rem; }
  .mbs-dynamax-level-item { font-size: 0.65rem; }
  .mbs-dynamax-level-name { font-size: 0.6rem; }
  .mbs-dynamax-attack-level, .mbs-dynamax-wall-level, .mbs-dynamax-recovery-level {
    padding: 0.1rem 0.2rem !important;
    font-size: 0.7rem !important;
  }

  /* === シミュレーション設定 圧縮 === */
  .mbs-settings-grid {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
  .mbs-weather-btn-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem !important;
    flex-wrap: nowrap;
  }
  .mbs-weather-btn {
    padding: 0.25rem 0.2rem !important;
    font-size: 0.65rem !important;
  }
  .mbs-weather-btn__label { font-size: 0.72rem; }
  .mbs-weather-btn__types { font-size: 0.55rem; }
  .mbs-mushroom-toggle {
    padding: 0.3rem 0.5rem !important;
  }
  .mbs-mushroom-toggle__icon { width: 28px !important; height: 28px !important; }
  .mbs-mushroom-toggle__text { font-size: 0.8rem; }
  .mbs-mushroom-toggle__text small { font-size: 0.65rem; }
  .mbs-field-effect-help summary { font-size: 0.7rem; padding: 0.2rem 0; }
  .mbs-field-effect-help__list { font-size: 0.7rem; }

  /* バトル開始ボタン (#mbs-action-section) compact */
  #mbs-action-section { padding: 0.3rem 0; }
  #mbs-run-button { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
}

/* ============================================
 * Phase 8: モバイル sticky サマリーバー + タブナビゲーション (画面幅 ≤768px のみ)
 * 「一望性」UX 改善 — スクロール 6000-8000px → タブ単位の閲覧へ。
 * + バトル開始時 (body.mbs-in-battle) は他 section を完全非表示にして
 *   バトル要素を 1 viewport に collap。
 * ============================================ */
.mbs-mobile-summary { display: none; }

@media (max-width: 768px) {
  .mbs-mobile-summary {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--mbs-border);
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .mbs-mobile-summary__row { display: flex; gap: 0.4rem; }
  .mbs-mobile-summary__label { color: var(--mbs-text-muted); flex-shrink: 0; }
  .mbs-mobile-summary__value {
    font-weight: 600; color: var(--mbs-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Phase 8v2: バトル → セットアップ戻るボタン */
.mbs-back-to-setup {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 1px solid var(--mbs-border);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: var(--mbs-text-muted);
  cursor: pointer;
  margin-bottom: 0.4rem;
  transition: background 120ms, color 120ms;
}
.mbs-back-to-setup:hover { background: #f0f4f8; color: var(--mbs-primary); border-color: var(--mbs-primary); }

/* Phase 8 B-5: バトル開始時に非戦闘要素を完全非表示 (mobile/desktop 共通) */
body.mbs-in-battle #mbs-section-boss,
body.mbs-in-battle #mbs-section-party,
body.mbs-in-battle #mbs-section-settings,
body.mbs-in-battle .mbs-data-source,
body.mbs-in-battle .mbs-disclaimer,
body.mbs-in-battle .mbs-compat-note {
  display: none !important;
}

/* モバイルバトル中はヘッダーも非表示 (sticky summary が boss 名表示するので冗長) */
@media (max-width: 768px) {
  body.mbs-in-battle .mbs-header { display: none !important; }
  /* "バトル開始 (リセット)" ボタン領域も超コンパクト */
  body.mbs-in-battle #mbs-action-section {
    padding: 0.2rem 0 !important;
    margin: 0 0 0.2rem !important;
  }
  body.mbs-in-battle #mbs-action-section .mbs-btn--large {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.8rem !important;
    min-height: 0 !important;
  }
}

/* Phase 10: バトル中の縦圧縮 (desktop + mobile 共通)。
 * モバイル限定の超詰めルール (画像 32px、sticky bottom、超小 font 等) は下の @media に残し、
 * desktop 100% zoom でも「一望性」が得られる中圧縮ルールを media query 外で定義する。
 * 同セレクタ + 同 specificity の場合は下の @media (≤768px) ルールがソース順で勝つ。 */

/* ヘッダもバトル中は非表示 (desktop でも、sticky summary バーは mobile 限定で別途) */
body.mbs-in-battle .mbs-header { display: none !important; }

/* セクション全般 - バトル中はコンパクト */
body.mbs-in-battle .mbs-section { padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
body.mbs-in-battle #mbs-action-section { padding: 0.3rem 0 !important; margin: 0 0 0.3rem !important; }

/* h2/h3 セクション見出しを撤去 */
body.mbs-in-battle #mbs-battle-section h2,
body.mbs-in-battle #mbs-battle-section h3 { display: none !important; }

/* battle-arena: desktop は 2 col、mobile @media で 1 col 上書き */
body.mbs-in-battle .mbs-battle-arena { gap: 0.4rem; }

/* パネルの装飾を flat 化、padding 縮減、colored card 撤去 */
body.mbs-in-battle .mbs-boss-status-panel,
body.mbs-in-battle .mbs-party-status-panel,
body.mbs-in-battle .mbs-active-pokemon-panel,
body.mbs-in-battle .mbs-action-panel {
  background: #fff !important;
  padding: 0.5rem 0.6rem !important;
  border: 1px solid var(--mbs-border);
  border-radius: 4px;
  margin-bottom: 0.35rem;
  box-shadow: none !important;
}

/* 画像 48px (desktop)、mobile で 32px に上書き */
body.mbs-in-battle .mbs-boss-status-image,
body.mbs-in-battle .mbs-active-pokemon-image {
  width: 48px !important;
  height: 48px !important;
}
body.mbs-in-battle .mbs-battle-pokemon-image { width: 48px !important; height: 48px !important; }

/* ボスステータス grid: [img 48px] + [info 単列] */
body.mbs-in-battle .mbs-boss-status-content {
  display: grid !important;
  grid-template-columns: 48px 1fr;
  column-gap: 0.5rem;
  align-items: center;
}
body.mbs-in-battle .mbs-boss-status-info { min-width: 0; }

/* アクティブポケモン: [img 48px] + [info 1col stack] — 4 status を縦並び */
body.mbs-in-battle .mbs-active-pokemon-content {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
}
body.mbs-in-battle .mbs-active-pokemon-info {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* ステータスバー grid: 48px label + 1fr bar + 60px 数値 (重要: [hidden] override) */
body.mbs-in-battle .mbs-status-bar-container[hidden] { display: none !important; }
body.mbs-in-battle .mbs-status-bar-container {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 60px !important;
  align-items: center;
  gap: 0.3rem !important;
  margin: 0.12rem 0 !important;
}
body.mbs-in-battle .mbs-status-bar-container label {
  font-size: 0.72rem !important;
  color: var(--mbs-text-muted);
  margin: 0;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
body.mbs-in-battle .mbs-status-bar {
  height: 10px !important;
  position: relative;
}
body.mbs-in-battle .mbs-status-bar-text,
body.mbs-in-battle .mbs-boss-status-panel #mbs-manual-boss-hp-text {
  position: absolute !important;
  inset: auto !important;
  left: calc(100% + 0.3rem) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  color: var(--mbs-text) !important;
  text-shadow: none !important;
  background: transparent !important;
  white-space: nowrap;
  padding: 0 !important;
  min-width: 0;
  display: inline-block !important;
}
body.mbs-in-battle .mbs-status-bar-container .mbs-status-bar {
  grid-column: 2;
  overflow: visible !important;
}

/* ポケモン名 + タイプアイコン + パーティ番号 + 交代ボタン名 を全部非表示 (desktop + mobile) */
body.mbs-in-battle .mbs-status-name,
body.mbs-in-battle .mbs-active-pokemon-name,
body.mbs-in-battle .mbs-party-member-name,
body.mbs-in-battle .mbs-type-icons,
body.mbs-in-battle .mbs-active-pokemon-type,
body.mbs-in-battle .mbs-party-member-index,
body.mbs-in-battle .mbs-action-swap-name,
body.mbs-in-battle .mbs-action-target,
body.mbs-in-battle [id^="mbs-action-swap-name-"] {
  display: none !important;
}

/* フェーズ表記コンパクト */
body.mbs-in-battle .mbs-boss-next-attack {
  font-size: 0.72rem !important;
  margin: 0.15rem 0 0 !important;
  line-height: 1.2 !important;
}

/* パーティ status grid: 3 列 + 名前 ellipsis (desktop でも) */
body.mbs-in-battle .mbs-party-status-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0.25rem !important;
}
body.mbs-in-battle .mbs-party-member-status {
  padding: 0.3rem 0.4rem !important;
  font-size: 0.72rem !important;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
body.mbs-in-battle .mbs-mini-hp-bar { height: 4px !important; }
body.mbs-in-battle .mbs-mini-hp-text { font-size: 0.68rem !important; }
body.mbs-in-battle .mbs-mini-shield { margin-top: 0.15rem !important; }
body.mbs-in-battle .mbs-mini-shield-bar { height: 4px !important; }
body.mbs-in-battle .mbs-mini-shield-text {
  font-size: 0.62rem !important;
  margin-top: 0 !important;
  line-height: 1;
  color: var(--mbs-shield-color, #2563eb) !important;
}

/* アクションボタンレイアウト */
body.mbs-in-battle .mbs-action-buttons { gap: 0.25rem !important; flex-wrap: wrap; }
body.mbs-in-battle .mbs-action-btn {
  padding: 0.4rem 0.5rem !important;
  font-size: 0.8rem !important;
  min-height: 0 !important;
  line-height: 1.2;
  flex-direction: column;
  gap: 0.1rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 待機ボタン撤去 (バトル中) */
body.mbs-in-battle .mbs-action-wait { display: none !important; }

/* mark-indicator__keyhint 非表示 (キーボード hint 不要、UI 整然性のため) */
body.mbs-in-battle .mbs-mark-indicator__keyhint { display: none !important; }

/* 攻撃 1 行 3 列 grid (fast / charge1 / charge2)、回避/マーク取得 pair は full-row 2 列 */
body.mbs-in-battle .mbs-attack-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0.3rem !important;
}
body.mbs-in-battle #mbs-action-fast,
body.mbs-in-battle #mbs-action-charge-1,
body.mbs-in-battle #mbs-action-charge-2 {
  flex: none !important;
  grid-column: auto !important;
}
body.mbs-in-battle .mbs-action-pair--util {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.3rem !important;
}
body.mbs-in-battle .mbs-action-pair--util .mbs-action-btn { flex: none !important; }

/* 交代 1 行 3 列 grid */
body.mbs-in-battle .mbs-swap-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0.3rem !important;
}
body.mbs-in-battle .mbs-swap-actions .mbs-action-btn {
  flex: none !important;
  flex-direction: column !important;
  padding: 0.35rem 0.4rem !important;
  font-size: 0.72rem !important;
  gap: 0.15rem;
}
body.mbs-in-battle .mbs-action-swap-image { width: 36px !important; height: 36px !important; }
body.mbs-in-battle .mbs-swap-actions .mbs-action-name { font-size: 0.7rem !important; line-height: 1; }

/* アクションボタン内 spans */
body.mbs-in-battle .mbs-action-name {
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.15;
  font-size: 0.82rem;
}
body.mbs-in-battle .mbs-action-duration,
body.mbs-in-battle .mbs-action-cost {
  display: block;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--mbs-text-muted);
}
body.mbs-in-battle .mbs-action-key { display: block; font-size: 0.65rem; }

/* Phase 11: アナウンスバナー (3 種) をアクションパネル上部に絶対配置して、
 * 表示/非表示でアクションボタン位置がずれないように固定スロット化。
 * クリック時のアイコン位置移動による誤タップを防止。 */
body.mbs-in-battle .mbs-action-panel {
  position: relative;
}
body.mbs-in-battle .mbs-action-panel .mbs-boss-announce,
body.mbs-in-battle .mbs-action-panel .mbs-mark-indicator,
body.mbs-in-battle .mbs-action-panel .mbs-boss-rampage-banner {
  position: absolute !important;
  top: 0.3rem !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  margin: 0 !important;
  z-index: 5;
}
/* Phase 21 UI hotfix: boss-announce / boss-rampage と mark-indicator が同時表示
 * されるシナリオで重ならないよう、mark-indicator を下にスタックする (DOM 順は
 * boss-announce → boss-rampage → mark-indicator、`~` 後続兄弟 selector で動作)。
 * 「マーク出現中」とボス攻撃アナウンス両方を読めるようにする。 */
body.mbs-in-battle .mbs-action-panel .mbs-boss-announce:not([hidden]) ~ .mbs-mark-indicator,
body.mbs-in-battle .mbs-action-panel .mbs-boss-rampage-banner:not([hidden]) ~ .mbs-mark-indicator {
  top: 2.1rem !important;  /* 0.3rem (元 top) + 1.8rem (1 バナー高さ) */
}
/* 両バナー同時 visible 時は mark-indicator をさらに下に */
body.mbs-in-battle .mbs-action-panel .mbs-boss-announce:not([hidden]) ~ .mbs-boss-rampage-banner:not([hidden]) ~ .mbs-mark-indicator {
  top: 3.9rem !important;  /* 0.3rem + 1.8rem × 2 */
}
/* mark-indicator が下にスタックされる場合、action-buttons もスタック分下げて
 * 重ならないようにする (CSS のみ、JS 不要)。 */
body.mbs-in-battle .mbs-action-panel:has(.mbs-boss-announce:not([hidden]) ~ .mbs-mark-indicator:not([hidden])) .mbs-action-buttons,
body.mbs-in-battle .mbs-action-panel:has(.mbs-boss-rampage-banner:not([hidden]) ~ .mbs-mark-indicator:not([hidden])) .mbs-action-buttons {
  margin-top: 3.6rem !important;
}
body.mbs-in-battle .mbs-action-panel .mbs-action-buttons {
  margin-top: 1.8rem !important;  /* 上部にバナー領域 1.8rem 確保、ボタン位置不動 */
}

/* アナウンスバナー (boss-announce / mark-indicator / boss-rampage) 1 行コンパクト + [hidden] override */
body.mbs-in-battle .mbs-boss-announce[hidden],
body.mbs-in-battle .mbs-mark-indicator[hidden],
body.mbs-in-battle .mbs-boss-rampage-banner[hidden] {
  display: none !important;
}
body.mbs-in-battle .mbs-boss-announce,
body.mbs-in-battle .mbs-mark-indicator,
body.mbs-in-battle .mbs-boss-rampage-banner {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.78rem !important;
  margin: 0.2rem 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  min-height: 0 !important;
}
body.mbs-in-battle .mbs-boss-announce__icon,
body.mbs-in-battle .mbs-mark-indicator__icon,
body.mbs-in-battle .mbs-boss-rampage-icon {
  font-size: 1rem !important;
  flex-shrink: 0;
  margin: 0 !important;
}
body.mbs-in-battle .mbs-boss-announce__text,
body.mbs-in-battle .mbs-mark-indicator__text,
body.mbs-in-battle .mbs-boss-rampage-text {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
}

/* バトルログ縮小 */
body.mbs-in-battle .mbs-battle-log {
  max-height: 100px;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
body.mbs-in-battle .mbs-battle-log summary { font-size: 0.8rem; padding: 0.2rem 0; }
body.mbs-in-battle .mbs-battle-log[open] .mbs-log-list { max-height: 100px; }

/* 補助 UI */
body.mbs-in-battle .mbs-dynamax-bar-container,
body.mbs-in-battle .mbs-meter-bar-container {
  padding: 0.2rem 0.4rem !important;
}
body.mbs-in-battle .mbs-timer-banner,
body.mbs-in-battle .mbs-eta-banner {
  padding: 0.25rem 0.4rem !important;
  font-size: 0.78rem !important;
  margin: 0.25rem 0 !important;
}

@media (max-width: 768px) {
  /* バトル開始 → 1 viewport (~750-900px) に全要素を縦詰めする超圧縮レイアウト。
   * ポケGO ユーザーはスマホメイン、スクロール無しで操作可能を目指す。 */
  body.mbs-in-battle .mbs-shell { padding: 0.5rem 0.5rem 6rem; }  /* bottom = sticky actions 分 */
  body.mbs-in-battle .mbs-section { padding: 0.4rem 0.5rem; margin-bottom: 0.4rem; }

  /* h3 セクション見出しを撤去 (スペース節約) */
  body.mbs-in-battle #mbs-battle-section h2,
  body.mbs-in-battle #mbs-battle-section h3 { display: none; }

  /* バトル中は超アグレッシブ縦詰めモード — iPhone viewport (~750-900px) に全要素を 1 画面で */
  body.mbs-in-battle .mbs-battle-arena { display: block; }

  /* パネルの装飾を最小限に (border のみ薄い) */
  body.mbs-in-battle .mbs-boss-status-panel,
  body.mbs-in-battle .mbs-party-status-panel,
  body.mbs-in-battle .mbs-active-pokemon-panel,
  body.mbs-in-battle .mbs-action-panel {
    background: #fff !important;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--mbs-border);
    border-radius: 4px;
    margin-bottom: 0.25rem;
    box-shadow: none !important;
  }

  /* ボスステータスを 1 行 + HP バー 1 行 (画像 32px) */
  body.mbs-in-battle .mbs-boss-status-image,
  body.mbs-in-battle .mbs-active-pokemon-image {
    width: 32px !important;
    height: 32px !important;
  }
  body.mbs-in-battle .mbs-battle-pokemon-image { width: 32px !important; height: 32px !important; }

  /* ステータスバー: 48px ラベル (ゲージ/メーター/シールド 改行回避) + bar + 数値 の grid。
   * 数値は bar 内 absolute → 右側 col 3 を 60px 確保。改行なしで整列。
   * 重要: [hidden] override — display:grid !important が UA [hidden]{display:none} を上書き
   * してしまうため、リセット後 shield_hp=0 でも shield bar が残留する bug を防止 (同 pattern: Phase 6.C). */
  body.mbs-in-battle .mbs-status-bar-container[hidden] { display: none !important; }
  body.mbs-in-battle .mbs-status-bar-container {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 60px !important;
    align-items: center;
    gap: 0.3rem !important;
    margin: 0.1rem 0 !important;
  }
  body.mbs-in-battle .mbs-status-bar-container label {
    font-size: 0.65rem !important;
    color: var(--mbs-text-muted);
    margin: 0;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
  }
  body.mbs-in-battle .mbs-status-bar {
    height: 8px !important;
    position: relative;
  }
  /* 数値: bar の右側 (grid col 3) に absolute で配置 — バー上に重なるのを回避。
   * ボス HP テキスト #mbs-manual-boss-hp-text は元来 color:#fff (赤背景前提) なので
   * モバイルバトル中の白背景に合わせて var(--mbs-text) に上書き。 */
  body.mbs-in-battle .mbs-status-bar-text,
  body.mbs-in-battle .mbs-boss-status-panel #mbs-manual-boss-hp-text {
    position: absolute !important;
    inset: auto !important;
    left: calc(100% + 0.3rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
    color: var(--mbs-text) !important;
    text-shadow: none !important;
    background: transparent !important;
    white-space: nowrap;
    padding: 0 !important;
    min-width: 0;
    display: inline-block !important;
  }
  body.mbs-in-battle .mbs-status-bar-container .mbs-status-bar {
    grid-column: 2;
    overflow: visible !important;
  }

  /* アクティブポケモン: [img 36px] + [info 1col stack] — 4 status bar が 1 列 4 行で揃う */
  body.mbs-in-battle .mbs-active-pokemon-content {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 0.4rem;
    align-items: center;
  }
  body.mbs-in-battle .mbs-active-pokemon-image {
    align-self: center;
  }
  body.mbs-in-battle .mbs-active-pokemon-info {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  /* ボスステータスも明示 grid: [img 32px] + [info 単列] */
  body.mbs-in-battle .mbs-boss-status-content {
    display: grid !important;
    grid-template-columns: 32px 1fr;
    column-gap: 0.4rem;
    align-items: center;
  }
  body.mbs-in-battle .mbs-boss-status-info { min-width: 0; }

  /* 名前 + フェーズ をさらにコンパクト */
  body.mbs-in-battle .mbs-status-name {
    font-size: 0.8rem !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }
  body.mbs-in-battle .mbs-boss-next-attack {
    font-size: 0.65rem !important;
    margin: 0.1rem 0 0 !important;
    line-height: 1.1 !important;
  }

  /* パーティ status grid: 横並び 3 列、超 compact。
   * minmax(0, 1fr) で 3 列目はみ出し防止。 */
  body.mbs-in-battle .mbs-party-status-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.15rem !important;
  }
  body.mbs-in-battle .mbs-party-member-status {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.65rem !important;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  body.mbs-in-battle .mbs-party-member-name {
    font-size: 0.65rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  body.mbs-in-battle .mbs-mini-hp-bar { height: 3px !important; }
  body.mbs-in-battle .mbs-mini-hp-text { font-size: 0.6rem !important; }
  /* シールド表示 (交代後も保持される shield_hp の残量を party 各メンバーに常時表示) */
  body.mbs-in-battle .mbs-mini-shield { margin-top: 0.1rem !important; }
  body.mbs-in-battle .mbs-mini-shield-bar { height: 3px !important; }
  body.mbs-in-battle .mbs-mini-shield-text {
    font-size: 0.55rem !important;
    margin-top: 0 !important;
    line-height: 1;
    color: var(--mbs-shield-color, #2563eb) !important;
  }

  /* ユーザー要望: バトル中はポケモン名 + タイプアイコン + パーティ番号 + 交代ボタン名 を全部非表示
   * (sticky summary バーで既に表示済み、冗長なので) */
  body.mbs-in-battle .mbs-status-name,
  body.mbs-in-battle .mbs-active-pokemon-name,
  body.mbs-in-battle .mbs-party-member-name,
  body.mbs-in-battle .mbs-type-icons,
  body.mbs-in-battle .mbs-active-pokemon-type,
  body.mbs-in-battle .mbs-party-member-index,
  body.mbs-in-battle .mbs-action-swap-name,
  body.mbs-in-battle .mbs-action-target,
  body.mbs-in-battle [id^="mbs-action-swap-name-"] {
    display: none !important;
  }

  /* Phase 8v2: 旧 duplicate block (display:flex / 1fr grid) は撤去済 — 上の
   * 「grid 3 部構成」「2 行 × 2 列 active info」「3 列 grid party」が有効。 */

  /* アクションボタン群を画面下に sticky で常時アクセス可能に */
  body.mbs-in-battle .mbs-action-panel {
    position: sticky;
    bottom: 0;
    background: #fff !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.12);
    z-index: 50;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 0;
    padding: 0.3rem 0.5rem;
  }
  body.mbs-in-battle .mbs-action-buttons {
    gap: 0.2rem !important;
    flex-wrap: wrap;
  }
  body.mbs-in-battle .mbs-action-btn {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.7rem !important;
    min-height: 0 !important;
    line-height: 1.2;
    flex-direction: column;
    gap: 0.05rem;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  body.mbs-in-battle .mbs-action-btn small { font-size: 0.6rem; }

  /* Phase 8v3-B: 待機ボタンをモバイルバトル中は撤去 (ゲーム性に不要) */
  body.mbs-in-battle .mbs-action-wait { display: none !important; }

  /* Phase 11-D: モバイルバトル中はキーアイコン [1]/[Z]/[X]/[Q]/[W]/[E]/[M]/[R]/[1]/[2]/[3] を非表示。
   * タッチ操作なのでキーボードショートカット hint は不要、UI ノイズ削減。 */
  body.mbs-in-battle .mbs-action-key { display: none !important; }

  /* Phase 8v3 追加: モバイルではマーク indicator の「! [M] で取得」部分を非表示
   * (キーボード操作 hint はデスクトップ専用、モバイルは「ダイマックスマーク出現 (残N秒)」のみで十分) */
  body.mbs-in-battle .mbs-mark-indicator__keyhint { display: none !important; }

  /* Phase 8v3-C: 攻撃 3 ボタン (fast / charge1 / charge2) を 1 行 3 列 grid に。
   * 「回避 / マーク取得」pair は full-row、待機は撤去 (B)。 */
  body.mbs-in-battle .mbs-attack-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.2rem !important;
  }
  body.mbs-in-battle #mbs-action-fast,
  body.mbs-in-battle #mbs-action-charge-1,
  body.mbs-in-battle #mbs-action-charge-2 {
    flex: none !important;
    grid-column: auto !important;
    padding: 0.3rem 0.25rem !important;
  }
  body.mbs-in-battle .mbs-action-pair--util {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.2rem !important;
  }
  body.mbs-in-battle .mbs-action-pair--util .mbs-action-btn {
    flex: none !important;
  }

  /* Phase 8v3-D: 交代 3 ボタン (SWAP_TO_0/1/2) を 1 行 3 列 grid に */
  body.mbs-in-battle .mbs-swap-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.2rem !important;
  }
  body.mbs-in-battle .mbs-swap-actions .mbs-action-btn {
    flex: none !important;
    flex-direction: column !important;
    padding: 0.25rem 0.3rem !important;
    font-size: 0.6rem !important;
    gap: 0.1rem;
  }
  body.mbs-in-battle .mbs-action-swap-image {
    width: 26px !important;
    height: 26px !important;
  }
  body.mbs-in-battle .mbs-swap-actions .mbs-action-name {
    font-size: 0.6rem !important;
    line-height: 1;
  }

  body.mbs-in-battle .mbs-action-name {
    display: block;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.1;
    font-size: 0.72rem;
  }
  body.mbs-in-battle .mbs-action-duration,
  body.mbs-in-battle .mbs-action-cost {
    display: block;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--mbs-text-muted);
  }
  body.mbs-in-battle .mbs-action-key { display: block; font-size: 0.6rem; }

  /* Phase 8v3: アナウンスバナー (boss-announce / mark-indicator / rampage) を 1 行コンパクト化。
   * 重要: [hidden] 属性のときは display:none を維持しなければ常時表示されてしまう
   * (Phase 6.C で .mbs-loader[hidden] 修正したのと同じ CSS specificity 問題)。 */
  body.mbs-in-battle .mbs-boss-announce[hidden],
  body.mbs-in-battle .mbs-mark-indicator[hidden],
  body.mbs-in-battle .mbs-boss-rampage-banner[hidden] {
    display: none !important;
  }
  body.mbs-in-battle .mbs-boss-announce,
  body.mbs-in-battle .mbs-mark-indicator,
  body.mbs-in-battle .mbs-boss-rampage-banner {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
    margin: 0.15rem 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center;
    gap: 0.3rem;
    min-height: 0 !important;
  }
  body.mbs-in-battle .mbs-boss-announce__icon,
  body.mbs-in-battle .mbs-mark-indicator__icon,
  body.mbs-in-battle .mbs-boss-rampage-icon {
    font-size: 0.85rem !important;
    flex-shrink: 0;
    margin: 0 !important;
  }
  body.mbs-in-battle .mbs-boss-announce__text,
  body.mbs-in-battle .mbs-mark-indicator__text,
  body.mbs-in-battle .mbs-boss-rampage-text {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 !important;
  }

  /* バトルログを default で閉じる + さらに縮小 */
  body.mbs-in-battle .mbs-battle-log {
    max-height: 50px;
    font-size: 0.65rem;
    margin-top: 0.2rem;
  }
  body.mbs-in-battle .mbs-battle-log summary {
    font-size: 0.7rem;
    padding: 0.15rem 0;
  }
  body.mbs-in-battle .mbs-battle-log[open] .mbs-log-list { max-height: 50px; }

  /* ダイマックスゲージ等の補助 UI をコンパクト */
  body.mbs-in-battle .mbs-dynamax-bar-container,
  body.mbs-in-battle .mbs-meter-bar-container {
    padding: 0.15rem 0.3rem !important;
  }

  /* 残時間カウントダウン バナーをコンパクト */
  body.mbs-in-battle .mbs-timer-banner,
  body.mbs-in-battle .mbs-eta-banner {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.7rem !important;
    margin: 0.2rem 0 !important;
  }
}

/* ============================================
 * Phase 5.8: バトル中の compact mode (OneDrive 元 "一望感" 再現)
 * main.js の initBattleSection() で body.mbs-in-battle を付与、
 * onResetBattle() で削除。バトル前のセットアップ画面では通常 padding 維持。
 * OneDrive web/css/style.css の #manual-battle-section { padding: 0.8rem !important }
 * を body class でガードして再現。
 * ============================================ */
body.mbs-in-battle #mbs-battle-section.mbs-section {
  padding: 0.55rem;
  margin-bottom: 0.45rem;
}

body.mbs-in-battle .mbs-battle-arena {
  gap: 0.3rem;
}

body.mbs-in-battle .mbs-battle-log {
  max-height: 100px;
  overflow-y: auto;
}

body.mbs-in-battle .mbs-section__h {
  font-size: 1rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.2rem;
}

body.mbs-in-battle .mbs-action-buttons {
  gap: 0.4rem;
}

body.mbs-in-battle .mbs-action-group {
  gap: 0.3rem;
}

/* ============================================
 * Phase 5.8: ボス赤系 / パーティ青系 グラデ (OneDrive 元カラー verbatim)
 * 視覚的識別性のため、Phase 5.5 で全部紫だったのを OneDrive 元と同じ
 * 赤グラデ (#ff6b6b → #c94b4b) / 青グラデ (#4fc3f7 → #29b6f6) に戻す。
 * ============================================ */
.mbs-boss-status-panel {
  background: linear-gradient(135deg, #ff6b6b 0%, #c94b4b 100%);
  color: #ffffff;
  border-radius: var(--mbs-radius-sm);
  padding: 0.8rem;
  box-shadow: var(--mbs-shadow);
}

.mbs-boss-status-panel h3,
.mbs-boss-status-panel .mbs-status-name,
.mbs-boss-status-panel #mbs-manual-boss-name,
.mbs-boss-status-panel #mbs-manual-boss-hp-text,
.mbs-boss-status-panel #mbs-manual-boss-phase {
  color: #ffffff !important;
}

.mbs-boss-status-panel .mbs-status-bar-container,
.mbs-boss-status-panel .mbs-hp-bar {
  background: rgba(255, 255, 255, 0.25);
}

.mbs-party-status-panel {
  background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
  color: #ffffff;
  border-radius: var(--mbs-radius-sm);
  padding: 0.8rem;
  box-shadow: var(--mbs-shadow);
}

.mbs-party-status-panel h3 {
  color: #ffffff !important;
}

/* Phase 5.12 #6: 白カード + 白文字 で読めなかった問題を修正。
   カード背景が白なので文字は黒系に強制する (青背景の panel ヘッダのみ白)。 */
.mbs-party-status-panel .mbs-party-member-name,
.mbs-party-status-panel .mbs-party-member-index,
.mbs-party-status-panel .mbs-mini-hp-text {
  color: #1f2937 !important;
}

/* mini hp bar の背景を半透明白へ (青背景上で見えやすく) */
.mbs-party-status-panel .mbs-mini-hp-bar {
  background: rgba(255, 255, 255, 0.3);
}

/* 気絶 / アクティブ slot の枠線も白系で */
.mbs-party-status-panel .mbs-party-member-status[data-active="true"] {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  border-radius: var(--mbs-radius-sm);
}

.mbs-party-status-panel .mbs-party-member-status[data-fainted="true"] {
  opacity: 0.45;
}

/* ============================================================
   Phase 5.13-D #20: ボス select の視認性向上 (ボックスらしさ + ▼ アイコン)
   ============================================================ */
#mbs-boss-select,
#mbs-field-effect,
#mbs-weather,
#mbs-placement-stage,
#mbs-boss-move-single,
#mbs-boss-move-aoe,
.mbs-fast-move-select,
.mbs-charge-move-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.4rem;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M0 0 L6 8 L12 0 Z' fill='%231f2937'/></svg>");
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  font-weight: 500;
  font-size: 1rem;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 12rem;
}

#mbs-boss-select:hover,
#mbs-field-effect:hover,
#mbs-weather:hover,
#mbs-placement-stage:hover,
.mbs-fast-move-select:hover,
.mbs-charge-move-select:hover {
  border-color: #1d4ed8;
}

#mbs-boss-select:focus,
#mbs-field-effect:focus,
#mbs-weather:focus,
#mbs-placement-stage:focus,
.mbs-fast-move-select:focus,
.mbs-charge-move-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* ボス select は他より少し強調 (枠太め + ボックス感) */
#mbs-boss-select {
  border-width: 2px;
  border-color: #c94b4b;
  background-color: #fff8f8;
  font-size: 1.05rem;
  font-weight: 600;
}

#mbs-boss-select:hover {
  border-color: #b94343;
  background-color: #fff0f0;
}

/* ============================================================
   Phase 5.13-D #18: ボス攻撃予告 banner (gold gradient + pulse)
   ============================================================ */
.mbs-boss-announce {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0 0.8rem 0;
  border-radius: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: mbs-boss-announce-pulse 1.0s infinite;
  box-shadow: 0 2px 8px rgba(255, 100, 100, 0.4);
}

.mbs-boss-announce[hidden] {
  visibility: hidden;
  display: flex;
  pointer-events: none;
}

/* AOE は赤系グラデ (回避不可) */
.mbs-boss-announce[data-kind="aoe"] {
  background: linear-gradient(135deg, #ff4444 0%, #c92020 100%);
  box-shadow: 0 0 12px rgba(255, 60, 60, 0.6);
}

/* 単体 dodge_window は黄色系 (回避チャンス) */
.mbs-boss-announce[data-kind="dodge"] {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #1f1f1f;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* Phase 21 UI hotfix: 回避入力済み時は緑系で「入力済み」を視覚的に明示。
 * icon spin も停止し落ち着いた状態を示す。 */
.mbs-boss-announce[data-kind="dodge-done"] {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}
.mbs-boss-announce[data-kind="dodge-done"] .mbs-boss-announce__icon {
  animation: none;
}

/* 単体 announce (回避不能) はオレンジ系 */
.mbs-boss-announce[data-kind="single"] {
  background: linear-gradient(135deg, #ff8c4a 0%, #c2570e 100%);
}

.mbs-boss-announce__icon {
  font-size: 1.4rem;
  display: inline-block;
  animation: mbs-boss-announce-icon-spin 1.2s infinite linear;
}

.mbs-boss-rampage-banner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0;
  background: rgba(255, 100, 100, 0.2);
  border-left: 4px solid #ef4444;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  animation: mbs-boss-rampage-pulse 1s ease-in-out infinite;
}

.mbs-boss-rampage-banner[hidden] {
  display: none;
}

.mbs-boss-rampage-banner--active {
  background: linear-gradient(90deg, rgba(255, 80, 80, 0.5), rgba(220, 30, 30, 0.6));
  color: #ffffff;
  font-size: 1.05rem;
}

.mbs-boss-rampage-icon {
  margin-right: 0.4rem;
}

@keyframes mbs-boss-announce-pulse {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.025); }
  100% { transform: scale(1.0); }
}

@keyframes mbs-boss-rampage-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes mbs-boss-announce-icon-spin {
  0%   { transform: rotate(0deg) scale(1.0); }
  50%  { transform: rotate(0deg) scale(1.2); }
  100% { transform: rotate(0deg) scale(1.0); }
}

/* ============================================================
   Phase 5.13-D #19: ダメージ表示 flash アニメ (active カードに +1234 をオーバーレイ)
   ============================================================ */
.mbs-dmg-flash {
  position: absolute;
  pointer-events: none;
  font-weight: 900;
  font-size: 1.6rem;
  color: #fde68a;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 200, 0, 0.6);
  animation: mbs-dmg-flash-anim 1.2s ease-out forwards;
  z-index: 50;
}

.mbs-dmg-flash[data-kind="received"] {
  color: #fca5a5;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(220, 38, 38, 0.6);
}

@keyframes mbs-dmg-flash-anim {
  0%   { opacity: 0; transform: translateY(0px) scale(0.8); }
  20%  { opacity: 1; transform: translateY(-8px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-32px) scale(1.0); }
}

/* active カード/ボスエリアを relative にして flash を絶対配置できるように */
.mbs-manual-active-area,
.mbs-manual-boss-area {
  position: relative;
}

/* ============================================================
   Phase 5.13-D #13/#14/#15: combobox 検索 input + 行高揃え + 図鑑順 (順序は JS 側)
   ============================================================ */
.mbs-combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-sm);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  z-index: 50;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.mbs-combobox__panel[hidden] { display: none; }

.mbs-combobox__search {
  width: calc(100% - 1rem);
  margin: 0.4rem 0.5rem 0.4rem 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--mbs-border);
  border-radius: 0.4rem;
  font-size: 1rem;
  background: #fff;
  color: #1f2937;
}
.mbs-combobox__search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Phase 5.13-D #13: panel 内の list は position 解除 (panel が absolute なので) */
.mbs-combobox__panel .mbs-combobox__list {
  position: static;
  border: none;
  box-shadow: none;
  flex: 1;
  max-height: 280px;
  margin: 0;
  padding: 0 0.25rem 0.4rem 0.25rem;
}

/* Phase 5.13-D #15: 行高揃え (画像サイズに左右されない) */
.mbs-combobox__list li[role="option"] {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
}
.mbs-boss-combobox .mbs-combobox__list li[role="option"],
.mbs-move-combobox .mbs-combobox__list li[role="option"] {
  padding: 0.45rem 0.55rem;
}

.mbs-field-effect-help {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  background: rgba(200, 200, 200, 0.08);
  padding: 0.4rem 0.6rem;
  border-radius: 0.3rem;
}

.mbs-field-effect-help summary {
  cursor: pointer;
  font-weight: 600;
}

.mbs-field-effect-help__list {
  margin: 0.3rem 0 0 1rem;
  padding: 0;
}

.mbs-field-effect-help__list li {
  margin: 0.2rem 0;
}

body.mbs-in-battle .mbs-boss-status-image,
body.mbs-in-battle .mbs-active-pokemon-image {
  width: 60px;
  height: 60px;
}

body.mbs-in-battle .mbs-battle-pokemon-image {
  width: 60px;
  height: 60px;
}

/* ============================================================
   Phase 5.14 続編 C10: 天候選択 UI (type-ranking 風 button group)
   ============================================================ */
.mbs-hidden-select {
  display: none !important;
}
.mbs-weather-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.mbs-weather-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  min-width: 88px;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #555;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.25;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  font-family: inherit;
}
.mbs-weather-btn:hover {
  border-color: #1e88e5;
}
.mbs-weather-btn:focus-visible {
  outline: 2px solid #1e88e5;
  outline-offset: 2px;
}
.mbs-weather-btn[aria-pressed="true"] {
  background: #1e88e5;
  color: #fff;
  border-color: #1e88e5;
}
.mbs-weather-btn__label {
  font-size: 13px;
  font-weight: 600;
}
.mbs-weather-btn__types {
  font-size: 10px;
  color: #888;
  margin-top: 2px;
}
.mbs-weather-btn[aria-pressed="true"] .mbs-weather-btn__types {
  color: rgba(255, 255, 255, 0.85);
}