/* ここからCSSコード */
    /* 自作ドロップダウンの汎用スタイル（特性・天候・フィールド対応） */
.custom-dropdown-container {
  position: relative;
  width: 100%;
}

.custom-dropdown-btn {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}

.custom-dropdown-container.open .dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  margin-top: 4px;
  padding: 4px 0;
  display: none;
  z-index: 200;
}

.custom-dropdown-container.open .custom-dropdown-menu {
  display: block;
}

.custom-option {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}

.custom-option:hover {
  background-color: #f0f0f0;
}

.custom-option .option-desc {
  font-size: 0.75rem;
  color: #888;
}


  /* クォークチャージ / こだいかっせい用UIスタイル */
.booster-boost-area {
  margin-top: 8px;
}
.booster-boost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #757575;
  border-radius: 8px;
  background-color: #f5f5f5;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.2s ease;
}
.booster-boost-btn input[type="checkbox"] {
  display: none;
}
.booster-boost-btn.active {
  border-color: #f57c00;
  background-color: #fff3e0;
  color: #e65100;
}
.booster-boost-btn.active .checkbox-icon {
  background-color: #f57c00;
  border-color: #f57c00;
}
.booster-boost-btn.active .checkbox-icon::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
}


/* 防御側追加ページ用スタイル */
.defender-extra-card {
  margin-top: 16px;
}
.type-select-group {
  display: flex;
  gap: 8px;
}
.type-select-group select {
  flex: 1;
}

/* ==================================================
   1. 基本スタイル & レイアウト
   ================================================== */
body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 20px 20px 100px 20px; /* 固定バーに被らないよう下に余白を設定 */
  color: rgba(0, 0, 0, 0.87);
}

.calculator-container {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* モバイル用 タブ切替 UI */
.tab-container {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  padding: 4px;
  box-sizing: border-box;
  gap: 4px;
}

.tab-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: bold;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tab-btn.active.attacker-tab {
  background-color: #fff3e0;
  color: #f57c00;
}

.tab-btn.active.defender-tab {
  background-color: #e3f2fd;
  color: #0288d1;
}

.btn-swap-small {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: transform 0.2s, background-color 0.2s;
}

.btn-swap-small:active {
  transform: rotate(180deg);
  background-color: #e0e0e0;
}

/* MUI Card風デザイン */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 
              0px 1px 1px 0px rgba(0,0,0,0.14), 
              0px 1px 3px 0px rgba(0,0,0,0.12);
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible; /* ドロップダウン表示のためvisibleに変更 */
  position: relative;
}

/* 2匹目フォーム用のカード間隔 */
.attacker-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 削除ボタン */
.btn-remove-card {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
}

.btn-remove-card:hover {
  background: #ffcdd2;
}

/* セクションヘッダー */
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h4 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
}

.icon-attacker { color: #f57c00; }
.icon-defender { color: #0288d1; }

.divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 16px 0;
}

/* ==================================================
   2. ヘッダーエリア
   ================================================== */
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 60px; /* 削除ボタンとの被り防止 */
}

.avatar-wrapper { position: relative; }

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-info { flex: 1; }
.type-badge { font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); margin: 0; }
.stats-summary { font-size: 0.875rem; font-weight: 500; margin: 2px 0 0 0; }

/* ==================================================
   3. フォーム & 入力コントロール
   ================================================== */
.stat-section { margin-bottom: 16px; }
.stat-section:last-child { margin-bottom: 0; }
.stat-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px 0; }

.sub-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  margin: 12px 0 8px 0;
}

.grid-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
  width: 100%;
}

.stat-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stat-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stat-box-sub {
  flex: 0.3;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 2px;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
}

input[type="number"], 
input[type="text"], 
select {
  width: 100%;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.9rem;
  background-color: #fff;
}

.rounded-select {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  font-size: 0.95rem;
  box-sizing: border-box;
}

/* オートコンプリート検索ボックス用スタイル */
.autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  z-index: 100;
}

.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.autocomplete-item:hover {
  background-color: #f0f0f0;
}

.autocomplete-item .move-category {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eee;
  color: #666;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
}

input[type="range"] { flex: 1; }

.btn-icon {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
}

.btn-icon:hover { background-color: rgba(0, 0, 0, 0.04); }

/* 性格補正グループ */
.toggle-group {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.toggle-btn {
  flex: 1;
  padding: 4px 0;
  text-align: center;
  border: none;
  background: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.toggle-btn:last-child { border-right: none; }

.attacker-card .toggle-btn.active {
  background-color: #fff3e0;
  color: #f57c00;
  font-weight: bold;
}

.defender-card .toggle-btn.active,
.fixed-damage-card .toggle-btn.active {
  background-color: #e3f2fd;
  color: #0288d1;
  font-weight: bold;
}

/* 定数ダメージレイアウト */
.fixed-damage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fixed-damage-label {
  font-size: 0.85rem;
  font-weight: 500;
  width: 120px;
}

.fixed-damage-toggle {
  flex: 1;
  max-width: 180px;
}

/* チェックボックス */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.checkbox-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.checkbox-btn input[type="checkbox"] { display: none; }

.checkbox-icon {
  width: 16px;
  height: 16px;
  border: 2px solid #757575;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.checkbox-btn.active {
  border-color: #f57c00;
  background-color: #fff3e0;
}

.checkbox-btn.active .checkbox-icon {
  background-color: #f57c00;
  border-color: #f57c00;
}

.checkbox-btn.active .checkbox-icon::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}

/* アクションエリア */
.action-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
}

.btn-add {
  background: none;
  border: none;
  color: #2e7d32;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
}

.btn-add:hover { background-color: rgba(46, 125, 50, 0.04); }

.btn-swap {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s, background-color 0.2s;
}

.btn-swap:hover {
  background-color: #f0f0f0;
  transform: rotate(180deg);
}

/* ==================================================
   4. 最下部固定 ダメージ計算結果表示バー
   ================================================== */
.damage-result-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  padding: 10px 16px;
  box-sizing: border-box;
  z-index: 1000; /* 最上面レイヤーに表示 */
}

.result-inner {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ゲージ（プログレスバー） */
.gauge-container {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  background-color: #4caf50; /* 赤・黄などダメージ率に応じて変化可能 */
  border-radius: 5px;
  transition: width 0.3s ease;
}

/* 計算テキスト結果 */
.result-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: bold;
  color: #333;
}

.result-text-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.damage-num {
  font-size: 1.05rem;
  color: #222;
}

.damage-percent {
  font-size: 0.9rem;
  color: #555;
}

.damage-knockout {
  font-size: 0.95rem;
  color: #333;
}

.btn-toggle-detail {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #666;
  cursor: pointer;
  padding: 2px 4px;
}

/* レスポンシブ */
@media (max-width: 600px) {
  body { padding: 12px 12px 100px 12px; }
  .tab-container { display: flex; }
  .section-header, .action-center-swap { display: none; }
  .section-wrapper { display: none; }
  .section-wrapper.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* ==================================================
   5. PC・タブレット向け（画面幅 601px 以上）レイアウト
   ================================================== */
@media (min-width: 601px) {
  /* コンテナ幅を拡張し、左右2カラムに横並び配置 */
  .calculator-container {
    max-width: 960px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
  }

  /* モバイル用タブ切替バーは非表示 */
  .tab-container {
    display: none !important;
  }

  /* 両方のセクション（Attacker / Defender）を常に表示 */
  .section-wrapper {
    display: flex !important;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
  }

  /* セクションヘッダーを表示 */
  .section-header {
    display: flex;
  }

  /* PC用の中間交換ボタンを表示（カードの中央付近に配置） */
  .action-center-swap {
    display: flex;
    align-self: flex-start;
    margin-top: 180px; /* カードの高さに合わせて上下位置を微調整 */
    flex-shrink: 0;
  }

  /* 最下部計算結果バーの最大幅もPC用に拡張 */
  .result-inner {
    max-width: 960px;
  }
}

/* ==================================================
   カスタム 持ち物ドロップダウン用スタイル
   ================================================== */
.item-dropdown-container {
  position: relative;
  width: 100%;
}

.item-dropdown-btn {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

.dropdown-arrow {
  font-size: 0.75rem;
  color: #666;
  transition: transform 0.2s;
}

.item-dropdown-container.open .dropdown-arrow {
  transform: rotate(180deg);
}

.item-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  margin-top: 4px;
  padding: 4px 0;
  display: none;
  z-index: 200;
}

.item-dropdown-container.open .item-dropdown-menu {
  display: block;
}

.item-option {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 0.9rem;
}

.item-option:hover {
  background-color: #f0f0f0;
}

.item-option .item-desc {
  font-size: 0.75rem;
  color: #888;
}

/* ゲージコンテナ（相対配置にして内部ゲージを重ねる） */
.gauge-container {
  position: relative;
  width: 100%;
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* 確定で残るHP（実線カラー） */
.gauge-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  z-index: 2;
}

/* 乱数によるダメージ変動幅（半透明） */
.gauge-random {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0.5;
  transition: width 0.3s ease, background-color 0.3s ease;
  z-index: 1;
}

/* ゲージ下に要素を並べるレイアウト */
.result-info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.result-main-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fixed-damage-summary {
  font-size: 0.85rem;
  color: #666;
  font-weight: bold;
}

/* 連続技・急所チェック関連スタイル */
.hit-count-group, .triple-crit-group {
  margin-top: 8px;
}

/* ==================================================
   ドロップダウン・選択ボタンのサイズ拡大
   ================================================== */

/* 1. 選択ボタン本体（持ち物・天候・フィールド・その他セレクトボックス）の拡大 */
.rounded-select,
.custom-dropdown-btn,
.ability-select,
.item-dropdown-btn {
  padding: 9px 14px !important; /* 上下左右の余白を拡大 */
  font-size: 1.05rem !important; /* フォントサイズを0.95remから1.05remへ拡大 */
  min-height: 26px;              /* タッチ操作しやすい高さを確保 */
}

/* 2. ドロップダウンを展開した際の各選択肢（候補）の拡大 */
.custom-option,
.item-option {
  padding: 9px 10px !important; /* 候補アイテムの上下余白を拡大 */
  font-size: 1rem !important;    /* 候補のフォントサイズを0.9remから1remへ拡大 */
}

/* 3. 選択肢内の説明テキスト（desc）のフォントサイズ拡大 */
.custom-option .option-desc,
.item-option .item-desc {
  font-size: 0.85rem !important; /* 説明文を0.75remから0.85remへ拡大 */
}