/* ============================================================
 * DATE A LIVE: LLB — 戦闘シミュレーター CSS (v3 - Box & D&D)
 * モバイルファースト
 * ============================================================ */

/* ---- Root ---- */
.battle-sim-root {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2d3748;
  padding: 8px;
  max-width: 100%;
  box-sizing: border-box;
}
.battle-sim-root * { box-sizing: border-box; }

/* ---- Hero ---- */
.bs-hero {
  background: linear-gradient(135deg, #fd79a8 0%, #a29bfe 100%);
  border-radius: 14px;
  padding: 16px;
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(253,121,168,0.25);
}
.bs-tagline {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  opacity: 0.85; margin-bottom: 4px;
}
.bs-title { margin: 0; font-size: 22px; font-weight: 800; }
.bs-title-sub {
  display: block; font-size: 11px; font-weight: 500;
  opacity: 0.9; margin-top: 4px;
}

/* ★ 修正 (2026-05-11): スマホではヘッダー枚を非表示にして画面広を確保
   PCでは従来通り表示。768px未満をスマホと見なす */
@media (max-width: 767px) {
  .battle-sim-root .bs-hero { display: none !important; }
}

/* ---- Sub Tabs (3画面切替) ---- */
.bs-subtabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: sticky; top: 0; z-index: 10;
}
.bs-subtab {
  flex: 1;
  border: none; background: transparent;
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  color: #718096;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.bs-subtab.is-active {
  background: linear-gradient(135deg, #fd79a8 0%, #a29bfe 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(253,121,168,0.3);
}
.bs-subtab i { margin-right: 4px; }

/* ---- Card ---- */
.bs-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.bs-section-head { margin-bottom: 12px; }
.bs-section-title {
  margin: 0 0 4px 0;
  font-size: 16px; font-weight: 700;
  color: #2d3748;
  display: flex; align-items: center; gap: 6px;
}
.bs-section-title-sm {
  margin: 12px 0 6px 0;
  font-size: 13px; font-weight: 700;
  color: #4a5568;
  display: flex; align-items: center; gap: 6px;
}
.bs-section-title i { color: #fd79a8; }
.bs-section-desc {
  font-size: 12px; color: #718096; margin: 0; line-height: 1.5;
}
.bs-muted { color: #a0aec0; font-size: 11px; }
.bs-muted-sm { font-size: 10px; }

/* ---- Data Status Footer ---- */
.bs-data-status {
  margin-top: 8px;
  padding: 8px 12px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 11px;
  color: #4a5568;
  text-align: center;
}
.bs-data-status i { color: #38b2ac; margin-right: 4px; }
.bs-data-status b { color: #fd79a8; font-weight: 700; }

/* ============================================================
 * Tab1: キャラボックス
 * ============================================================ */
.bs-box-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
/* ★ v1.8.2: 編成画面下部のキャラボックスは「重ね表示」ではなく必ずスクロールできるようにする。
   - max-height を画面の 40vh 程度に制限し、grid 子要素が増えても高さは固定。
   - overflow-y:auto により内部スクロール可能。
   - aspect-ratio を抑え、grid-auto-rows をきちんと指定して縦に積めるようにする (height: auto 抜けで
     親 flex に潰されないよう min-height:0 と display:block 化)。
   - 親 (.bs-section / .bs-formation-section) が flex のときに子の overflow:auto を効かせるため、
     親側にも min-height:0 を効かせる必要があるが、ここでは grid 自身の挙動だけで動く構成にする。 */
.bs-box-grid-team {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: min-content;
  gap: 6px;
  margin-top: 8px;
  max-height: 42vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f7fafc;
  /* iOS Safari で flex 親に押し潰されないようにする */
  min-height: 0;
}
.bs-box-grid-team::-webkit-scrollbar { width: 8px; }
.bs-box-grid-team::-webkit-scrollbar-track { background: #f7fafc; border-radius: 4px; }
.bs-box-grid-team::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }
.bs-box-grid-team::-webkit-scrollbar-thumb:hover { background: #a0aec0; }
.bs-box-cell {
  position: relative;
  aspect-ratio: 1 / 1.25;
  border-radius: 10px;
  background: #f7fafc;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: all 0.15s;
  user-select: none;
}
.bs-box-cell:hover { transform: translateY(-2px); border-color: #fd79a8; }

/* --- キャラボックス 複数選択モード --- */
.bs-box-cell.is-selected {
  border-color: #e53e3e;
  background: #fff5f5;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, .25);
}
.bs-box-cell.is-selectable .bs-box-check {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 2px solid #cbd5e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff;
  transition: all .15s;
}
.bs-box-cell.is-selectable .bs-box-check.is-on {
  background: #e53e3e; border-color: #e53e3e;
}
.bs-box-selbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  padding: 10px 14px; margin: 0 0 12px 0;
  border-radius: 10px;
  background: #fff5f5; border: 1px solid #feb2b2;
}
.bs-box-selbar-count { font-size: 13px; font-weight: 700; color: #c53030; }
.bs-box-selbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-btn-sm { padding: 5px 12px; font-size: 12px; }
.bs-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bs-box-add {
  background: linear-gradient(135deg, #ffeef5 0%, #f0e8ff 100%);
  border: 2px dashed #fd79a8;
  color: #fd79a8;
  cursor: pointer;
}
.bs-box-add i { font-size: 24px; }
.bs-box-add-lbl { font-size: 10px; font-weight: 700; margin-top: 4px; }

.bs-box-entry { background: #fff; }
.bs-box-icon {
  width: 100%; height: 75%; object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
}
.bs-box-stars {
  position: absolute;
  top: 5px;
  right: 5px; /* 左上は所属編成タグが使うため星は右上へ */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  color: #d69e2e;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  font-size: 8px;
}
/* 所属編成タグ（アイコン左上・編成ごとに色分け）: 同名キャラがどの編成のものか見分ける */
.bs-box-form-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  max-width: calc(100% - 10px);
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
  pointer-events: none;
}
.bs-box-footer {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #ffffff, #f7fafc);
  padding: 0;
}
.bs-box-power {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #a29bfe, #fd79a8);
  border: none;
  border-radius: 6px;
  padding: 2px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.bs-box-rar {
  position: absolute; top: 4px; right: 4px;
  font-size: 9px; font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  z-index: 2;
}
.bs-rar-1 { background: #a0aec0; }
.bs-rar-2 { background: linear-gradient(135deg, #4299e1, #3182ce); }
.bs-rar-3 { background: linear-gradient(135deg, #f6ad55, #ed8936); }
.bs-rar-5 { background: linear-gradient(135deg, #f5576c, #f093fb); }

.bs-box-el {
  position: absolute; top: 4px; left: 4px;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
  color: #fff; z-index: 2;
}
.el-power  { background: #f56565; }
.el-tech   { background: #4299e1; }
.el-spirit { background: #9f7aea; }
.el-none   { background: #a0aec0; }

.bs-box-name {
  font-size: 12px;
  font-weight: 800;
  color: #1f2937;
  margin-top: 1px;
  text-align: center;
  padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
}
.bs-box-nick {
  font-size: 10px;
  color: #6b7280;
  text-align: center;
  padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
}
.bs-box-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.bs-box-power {
  font-size: 10px;
  font-weight: 800;
  color: #7c3aed;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  padding: 1px 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.bs-box-hint {
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 12px;
  background: #fff7ed;
  border: 1px solid #fbd38d;
  border-radius: 8px;
  font-size: 12px;
  color: #c05621;
}
.bs-box-hint i { margin-right: 4px; }

/* ---- シミュレートに登録 モーダル ---- */
.bs-reg-label {
  display: block; font-size: 12px; font-weight: 800; color: #4a5568;
  margin: 14px 0 5px; letter-spacing: .02em;
}
.bs-reg-label:first-of-type { margin-top: 0; }
.bs-reg-radio {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 8px; transition: border-color .15s, background .15s;
}
.bs-reg-radio:hover { border-color: #fd79a8; }
.bs-reg-radio input { margin-top: 3px; flex-shrink: 0; }
.bs-reg-radio-t { font-size: 13px; font-weight: 800; color: #2d3748; }
.bs-reg-radio-d { font-size: 11px; color: #718096; margin-top: 2px; line-height: 1.45; }
.bs-reg-date { padding: 4px 0; }
.bs-reg-date-chk { display: flex; align-items: center; font-size: 13px; color: #2d3748; cursor: pointer; }
.bs-reg-date-sel { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #4a5568; }
.bs-modal .bs-reg-date-sel .bs-reg-sel { width: 76px; min-width: 0; flex: 0 0 auto; padding: 5px 6px; text-align: center; }
.bs-reg-preview {
  margin-top: 14px; padding: 10px 12px;
  background: #f7fafc; border: 1px dashed #cbd5e0; border-radius: 8px;
  font-size: 13px; color: #4a5568;
}
.bs-reg-preview b { color: #c0356a; }

/* ---- 自分が登録した敵編成 リスト (削除可能) ---- */
.bs-myteams { margin: 10px 0 4px; padding: 10px 12px; background: #fafbff; border: 1px solid #e6e8f0; border-radius: 10px; }
.bs-myteams-h { font-size: 12px; font-weight: 800; color: #4a5568; margin-bottom: 8px; }
.bs-myteams-h i { color: #fd79a8; margin-right: 5px; }
.bs-myteam-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid #eef0f5; }
.bs-myteam-row:first-of-type { border-top: none; }
.bs-myteam-name { flex: 1; min-width: 0; font-size: 13px; color: #2d3748; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-myteam-tag { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #718096; background: #edf2f7; border-radius: 5px; padding: 2px 7px; }
.bs-myteam-tag.pub { color: #1d4ed8; background: #dbeafe; }
.bs-myteam-del { flex: 0 0 auto; border: none; background: #fff0f3; color: #e53e6d; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.bs-myteam-del:hover { background: #fcd9e2; }

/* ---- 編成での D&D 表示 ---- */
.bs-box-draggable {
  cursor: grab;
  /* スマホで長押しドラッグしたときに画面が一緒にスクロールしないように
     縦方向のトースジェスチャーをブラウザで処理させず、
     ポインターイベントで制御する */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bs-box-draggable:active { cursor: grabbing; }
.bs-box-draggable.is-dragging { opacity: 0.4; }
.bs-box-draggable.is-placed {
  opacity: 0.4;
  filter: grayscale(0.7);
}
.bs-box-placed-tag {
  position: absolute;
  left: 50%;
  top: calc(68% - 12px);
  transform: translateX(-50%);
  background: rgba(45,55,72,0.82);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  z-index: 2;
}

/* ============================================================
 * Modals
 * ============================================================ */
.bs-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  /* 画面中央に配置（上下左右センタリング）＋端に貼り付かないよう余白 */
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  animation: bs-fadein 0.2s ease;
  /* ポップアップ背面のスクロール連動を防ぐ */
  overscroll-behavior: contain;
  touch-action: none;
}
@keyframes bs-fadein { from {opacity:0;} to {opacity:1;} }

/* スマホ Chrome のアドレスバー/ツールバーで上下が隠れないよう dvh を使う (未対応は vh フォールバック) */
.bs-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: bs-slideup 0.25s ease;
}
@keyframes bs-slideup { from {transform:translateY(40px);} to {transform:translateY(0);} }

/* ユーザー要望(2026-07-06): レアリティ表記(☆☆☆ / S3)を全体的に非表示。
   .bs-box-stars=ボックスの星、.bs-slot-rar=編成スロットのS3、
   .bs-chara-icon-rar=キャラ選択の S ランク、.bs-rar=キャラ編集ヘッダの S ランク。
   ※スキルのレア(.bs-skill-rar 等)は別物なので対象外。 */
.bs-box-stars,
.bs-slot-rar,
.bs-chara-icon-rar,
.bs-rar { display: none !important; }

/* ユーザー要望(2026-07-06): 敵/自編成プレビューでアイコン下の名前帯を非表示 */
.bs-sim-pv-name { display: none !important; }

.bs-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #fff 0%, #fef5fa 100%);
}
.bs-modal-head h3 {
  margin: 0; font-size: 15px; font-weight: 700;
  flex: 1;
}
.bs-modal-close {
  width: 32px; height: 32px;
  border: none; background: #f7fafc;
  border-radius: 50%;
  font-size: 18px; cursor: pointer;
  color: #4a5568;
}
.bs-modal-body {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  -webkit-overflow-scrolling: touch;
  /* ポップアップスクロールが背面に伝わらないよう chainをロック */
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.bs-modal-footer {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
  border-top: 1px solid #e2e8f0;
  display: flex; gap: 8px; justify-content: flex-end;
  background: #fff;
  flex-shrink: 0;
}
/* フッターボタンの文字は折り返さない（削除/キャンセル/複製/保存 が「削 除」等と改行されるのを防ぐ） */
.bs-modal-footer .bs-btn { white-space: nowrap; }
/* スマホ: 4ボタンが窮屈で文字が改行されるため、余白と文字を詰めて1行に収める
   （それでも入り切らない極狭幅では、文字は折らずボタン単位で2行に折り返す） */
@media (max-width: 480px) {
  .bs-modal-footer { gap: 6px; flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }
  .bs-modal-footer .bs-btn { padding: 9px 9px; font-size: 12.5px; gap: 3px; }
}

/* ---- フィルタ ---- */
.bs-modal-filters {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.bs-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}
.bs-input:focus { outline: none; border-color: #fd79a8; box-shadow: 0 0 0 3px rgba(253,121,168,0.15); }
.bs-input-search { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a0aec0" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat 8px center; padding-left: 32px; }
.bs-input-sm { padding: 4px 6px; font-size: 12px; }

.bs-chip-group {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.bs-chip-label {
  font-size: 11px; font-weight: 700; color: #4a5568;
  margin-right: 4px;
}
.bs-chip {
  border: 1px solid #cbd5e0;
  background: #fff;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  color: #4a5568;
  transition: all 0.15s;
}
.bs-chip.is-on {
  background: linear-gradient(135deg, #fd79a8, #a29bfe);
  color: #fff;
  border-color: transparent;
}

/* ---- キャラ選択グリッド ---- */
.bs-chara-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bs-chara-grid-5 {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 480px) {
  .bs-chara-grid-5 { grid-template-columns: repeat(4, 1fr); }
}
.bs-chara-card {
  position: relative;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.bs-chara-card:hover { border-color: #fd79a8; transform: translateY(-2px); }
/* ★ 既登録キャラの白色化演出は不要 (ユーザー要望) */
.bs-chara-card.is-dup { opacity: 1; }
.bs-chara-card-rar {
  position: absolute; top: 4px; right: 4px;
  font-size: 9px; font-weight: 800;
  padding: 2px 5px; border-radius: 4px;
  color: #fff; z-index: 2;
}
.bs-chara-card-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px;
}
.bs-chara-card-el {
  position: absolute; top: 4px; left: 4px;
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
  color: #fff; z-index: 2;
}
.bs-chara-card-name {
  font-size: 11px; font-weight: 700; color: #2d3748;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-chara-card-nick {
  font-size: 9px; color: #718096;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.bs-chara-card-dup {
  margin-top: 2px;
  font-size: 9px; font-weight: 700;
  color: #fff;
  background: #ed8936;
  border-radius: 3px;
  padding: 1px 4px;
}

.bs-empty {
  text-align: center;
  padding: 24px 12px;
  color: #a0aec0;
  font-size: 13px;
  grid-column: 1 / -1;
}
.bs-empty-lg { padding: 40px 16px; font-size: 14px; }

/* ============================================================
 * キャラエディタ (ステータス + スキル)
 * ============================================================ */
.bs-modal-editor { max-width: 700px; }
.bs-editor-head {
  background: linear-gradient(135deg, #fef5fa 0%, #f0e8ff 100%);
}
.bs-editor-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.bs-editor-info { flex: 1; }
.bs-editor-name {
  font-size: 14px; font-weight: 800; color: #2d3748;
}
.bs-editor-meta {
  margin-top: 4px;
  display: flex; gap: 4px;
}
.bs-rar {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  color: #fff;
}
.bs-el-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  color: #fff;
}

.bs-editor-h {
  font-size: 13px; font-weight: 700; color: #4a5568;
  margin: 16px 0 8px 0;
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #fed7e2;
}
.bs-editor-h i { color: #fd79a8; }
.bs-editor-h:first-child { margin-top: 0; }

/* ステータスグリッド (2行 × 3列) */
.bs-stat-grid-23 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bs-stat-cell {
  display: flex; flex-direction: column;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
}
.bs-stat-name {
  font-size: 13px; font-weight: 800; color: #2d3748;
  letter-spacing: 1px;
}
.bs-stat-desc {
  font-size: 9px; color: #a0aec0;
  margin-bottom: 4px;
}
.bs-stat-input {
  width: 100%;
  padding: 6px 4px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: #fff;
}
.bs-stat-input:focus {
  outline: none;
  border-color: #fd79a8;
  box-shadow: 0 0 0 3px rgba(253,121,168,0.2);
}

/* 必殺技リスト */
.bs-ult-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* 必殺技チップ - レアリティ別の色テーマ
   R5: 薄めの虹色 (文字が読める明るさ)
   R4: 薄緑
   R3: 黄色 (デフォルト)
   R2: 青
   R1: グレー */
.bs-ult-chip {
  /* デフォルト = R3 黄色 */
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #f59e0b;
  color: #92400e;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
  max-width: 100%;
}
.bs-ult-chip i { color: #d97706; }

/* R5: 薄めの虹色 (仮面のグラデーション) */
.bs-ult-chip.bs-ult-rar-5 {
  background: linear-gradient(90deg,
    rgba(255,126,179,0.32),
    rgba(255,184,108,0.32),
    rgba(255,241,112,0.40),
    rgba(109,238,177,0.32),
    rgba(111,200,255,0.32),
    rgba(201,139,255,0.32));
  border: 1.5px solid;
  border-image: linear-gradient(90deg, #ff7eb3, #ffb86c, #fff170, #6deeb1, #6fc8ff, #c98bff) 1;
  color: #4a148c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  font-weight: 800;
}
.bs-ult-chip.bs-ult-rar-5 i { color: #c026d3; }

/* R4: 薄緑 */
.bs-ult-chip.bs-ult-rar-4 {
  background: linear-gradient(135deg, #f1faf3, #d4f0db);
  border-color: #5dd078;
  color: #2a8a43;
}
.bs-ult-chip.bs-ult-rar-4 i { color: #5dd078; }

/* R3: 黄 (デフォルトと同じ、明示クラス) */
.bs-ult-chip.bs-ult-rar-3 {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #f59e0b;
  color: #92400e;
}
.bs-ult-chip.bs-ult-rar-3 i { color: #d97706; }

/* R2: 青 */
.bs-ult-chip.bs-ult-rar-2 {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #3b82f6;
  color: #1e40af;
}
.bs-ult-chip.bs-ult-rar-2 i { color: #2563eb; }

/* R1: グレー */
.bs-ult-chip.bs-ult-rar-1 {
  background: linear-gradient(135deg, #f9fafb, #e5e7eb);
  border-color: #9ca3af;
  color: #374151;
}
.bs-ult-chip.bs-ult-rar-1 i { color: #6b7280; }

/* スキルチップとしても使われるため、選択チップにも同じ色テーマを適用 */
.bs-skill-sel-chip.bs-ult-rar-5 {
  background: linear-gradient(90deg,
    rgba(255,126,179,0.32),
    rgba(255,184,108,0.32),
    rgba(255,241,112,0.40),
    rgba(109,238,177,0.32),
    rgba(111,200,255,0.32),
    rgba(201,139,255,0.32)) !important;
  border: 1.5px solid !important;
  border-image: linear-gradient(90deg, #ff7eb3, #ffb86c, #fff170, #6deeb1, #6fc8ff, #c98bff) 1 !important;
  color: #4a148c !important;
}
.bs-skill-sel-chip.bs-ult-rar-4 {
  background: linear-gradient(135deg, #f1faf3, #d4f0db) !important;
  border-color: #5dd078 !important;
  color: #2a8a43 !important;
}
.bs-skill-sel-chip.bs-ult-rar-3 {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}
.bs-skill-sel-chip.bs-ult-rar-2 {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: #3b82f6 !important;
  color: #1e40af !important;
}
.bs-skill-sel-chip.bs-ult-rar-1 {
  background: linear-gradient(135deg, #f9fafb, #e5e7eb) !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
}

.bs-locked {
  font-size: 9px;
  background: rgba(0,0,0,0.1);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}

/* スキル: 上 (選択中) - スクロールと一緒に上に流れる仕様に変更 (sticky解除) */
.bs-skill-selected-box {
  background: linear-gradient(135deg, #fffafc, #faf5ff);
  border: 1px solid #f5c2d7;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 12px;
  position: static;  /* ★ 以前は stickyだったが、上にスクロールされるよう static に */
  box-shadow: 0 2px 8px rgba(244, 114, 182, 0.08);
}
.bs-skill-selected-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #8b5cf6;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
}
.bs-skill-cnt {
  background: #f9a8d4;
  color: #6b21a8;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
}
.bs-skill-selected-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 28px;
}
.bs-skill-empty {
  font-size: 11px; color: #a0aec0;
  font-style: italic;
}
.bs-skill-sel-chip {
  background: rgba(255,255,255,0.96);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.bs-skill-sel-chip.bs-rar-1 { border-color: #cbd5e0; }
.bs-skill-sel-chip.bs-rar-2 { border-color: #4299e1; }
.bs-skill-sel-chip.bs-rar-3 { border-color: #ed8936; box-shadow: 0 0 4px rgba(237,137,54,0.2); }
.bs-skill-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
  color: #1f2937;
}
.bs-skill-rar {
  font-size: 9px; font-weight: 800;
  padding: 1px 4px; border-radius: 3px;
  color: #fff;
}
.bs-skill-rar.bs-rar-1 { background: #a0aec0; }
.bs-skill-rar.bs-rar-2 { background: #4299e1; }
.bs-skill-rar.bs-rar-3 { background: #ed8936; }
.bs-skill-rm {
  width: 18px; height: 18px;
  border: none; background: #fc8181;
  color: #fff;
  border-radius: 50%;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.bs-skill-lv-sel {
  font-size: 10px;
  padding: 1px 2px;
  border-radius: 4px;
  border: 1px solid #cbd5e0;
}

/* スキル: 下 (検索/一覧) */
.bs-skill-picker-box {
  background: #f7fafc;
  border-radius: 10px;
  padding: 8px;
}
.bs-skill-search-row { margin-bottom: 6px; }
.bs-skill-filter-row { margin-bottom: 8px; }
.bs-skill-picker-list {
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 8px;
}
.bs-skill-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
  transition: background 0.1s;
}
.bs-skill-row:hover { background: #fef5fa; }
.bs-skill-row.is-sel { background: linear-gradient(90deg, #fef5fa, #f0e8ff); }
.bs-skill-row.is-fav .bs-fav-btn { color: #f6ad55; }
.bs-skill-info { flex: 1; min-width: 0; }
.bs-skill-info .bs-skill-name {
  font-size: 12px; font-weight: 700; color: #2d3748;
  max-width: none;
}
.bs-skill-desc {
  font-size: 10px; color: #718096;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.bs-skill-state {
  font-size: 10px; font-weight: 700;
  color: #a0aec0;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #cbd5e0;
}
.bs-skill-state.is-on {
  background: #fd79a8; color: #fff; border-color: transparent;
}
.bs-fav-btn {
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: #cbd5e0;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.bs-fav-btn.is-on { color: #f6ad55; }

/* ============================================================
 * Tab2: 編成
 * ============================================================ */
.bs-formation-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.bs-formation-tab {
  border: 1px solid #cbd5e0;
  background: #fff;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  color: #4a5568;
}
.bs-formation-tab.is-active {
  background: linear-gradient(135deg, #fd79a8, #a29bfe);
  color: #fff; border-color: transparent;
}
.bs-formation-tab.is-add { color: #38b2ac; border-style: dashed; }

.bs-formation-head {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.bs-formation-name {
  flex: 1;
  font-size: 14px; font-weight: 700;
}

.bs-formation-area {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  background: linear-gradient(135deg, #fff5f5, #fef5fa);
  border-radius: 12px;
  padding: 8px 4px;
  border: 1px solid #fed7e2;
  /* ★ v1.8.0 ユーザー要望: PCで横にタブが広がると編成アイコンがどんどん大きくなってしまうため、
     上限サイズを設けて中央寄せにする。 5つスロット × 約 116px (中間ステップ) ≈ 600px くらいが上限として適切。 */
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.bs-formation-col {
  display: flex; flex-direction: column;
  gap: 4px; align-items: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.bs-formation-rank {
  font-size: 11px; font-weight: 800; color: #fd79a8;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.bs-form-slot {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1 / 1.2;
  border-radius: 8px;
  background: #fff;
  border: 2px solid #e2e8f0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
  box-sizing: border-box;
  /* スマホで編成スロットからドラッグするときの縦スクロール抑制 */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bs-form-slot.is-empty {
  background: #f7fafc;
  border-style: dashed;
  border-color: #cbd5e0;
}
.bs-form-slot.is-dragover {
  background: #fef5fa;
  border-color: #fd79a8;
  transform: scale(1.05);
}
.bs-form-slot.is-moving {
  border-color: #ed8936;
  box-shadow: 0 0 0 3px rgba(237,137,54,0.3);
}
.bs-form-slot-main { border-color: #fd79a8; }
.bs-form-slot-sub  { border-color: #a29bfe; }

.bs-slot-tag {
  position: absolute; top: 2px; left: 2px;
  font-size: 8px; font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  color: #fff;
  z-index: 2;
}
.bs-slot-tag-main { background: #fd79a8; }
.bs-slot-tag-sub  { background: #a29bfe; }

.bs-slot-icon {
  width: 100%;
  height: 70%;
  object-fit: cover;
}
.bs-slot-rar {
  position: absolute; top: 2px; right: 2px;
  font-size: 9px; font-weight: 800;
  padding: 1px 4px; border-radius: 3px;
  color: #fff; z-index: 2;
}
.bs-slot-el {
  position: absolute; bottom: 24px; right: 2px;
  font-size: 8px; font-weight: 700;
  padding: 1px 3px; border-radius: 2px;
  color: #fff; z-index: 2;
}
.bs-slot-name {
  font-size: 10px; font-weight: 700; color: #2d3748;
  text-align: center;
  padding: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.bs-slot-empty {
  color: #a0aec0;
  font-size: 16px;
  text-align: center;
}
.bs-slot-empty div { font-size: 9px; margin-top: 2px; }
.bs-slot-rm {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border: none; background: rgba(252,129,129,0.9);
  color: #fff;
  border-radius: 50%;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  z-index: 3;
  display: none;
}
.bs-form-slot:hover .bs-slot-rm { display: flex; align-items: center; justify-content: center; }

.bs-help-tip {
  margin-top: 10px;
  padding: 8px 10px;
  background: #ebf8ff;
  border-left: 3px solid #4299e1;
  font-size: 11px;
  color: #2c5282;
  border-radius: 4px;
}

/* ============================================================
 * Tab3: シミュレート
 * ============================================================ */
.bs-sim-select-row {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.bs-sim-label {
  font-size: 12px; font-weight: 700; color: #4a5568;
  display: flex; align-items: center; gap: 4px;
}
.bs-sim-select {
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}
/* ★ 2026-07-24: 編成セレクタ + コンディションを1行に横並び (ラベル行も同じ幅配分で揃える) */
.bs-sim-label-line,
.bs-sim-select-line {
  display: flex; align-items: center; gap: 8px;
}
.bs-sim-label-line .bs-sim-label { flex: 1 1 auto; min-width: 0; }
.bs-sim-select-line .bs-sim-select { flex: 1 1 auto; min-width: 0; }
.bs-sim-label-line .bs-sim-label-cond,
.bs-sim-select-line .bs-cond-select { flex: 0 0 110px; }
.bs-sim-label-line .bs-sim-label { white-space: nowrap; overflow: hidden; }
@media (max-width: 480px) {
  .bs-sim-label-line .bs-sim-label-cond,
  .bs-sim-select-line .bs-cond-select { flex: 0 0 92px; }
  .bs-sim-label-line .bs-sim-label-cond { font-size: 11px; }
  .bs-sim-label-line .bs-sim-label-cond i { display: none; }   /* 幅が足りず折り返すためアイコンは省略 */
  .bs-sim-select-line .bs-cond-select { padding-left: 8px; padding-right: 4px; }
}

.bs-sim-preview {
  background: #f7fafc;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 12px;
}
.bs-sim-preview-box {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 6px;
}
.bs-sim-preview-title {
  font-size: 12px; font-weight: 700; color: #2d3748;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}
.bs-sim-vs {
  text-align: center;
  font-size: 14px; font-weight: 800;
  color: #fd79a8;
  padding: 4px 0;
}
.bs-sim-enemy-name {
  font-size: 13px; font-weight: 700; color: #c53030;
  margin-bottom: 4px;
}
.bs-sim-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}
.bs-sim-pv-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.bs-sim-pv-rank {
  font-size: 9px; font-weight: 800; color: #fd79a8;
}
.bs-sim-pv-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1.5px solid #e2e8f0;
}
.bs-sim-pv-cell.bs-sim-pv-main { border-color: #fd79a8; }
.bs-sim-pv-cell.bs-sim-pv-sub  { border-color: #a29bfe; }
.bs-sim-pv-cell.is-empty {
  background: #f7fafc;
  border-style: dashed;
  display: flex; align-items: center; justify-content: center;
}
.bs-sim-pv-cell img {
  width: 100%; height: 100%; object-fit: cover;
}
.bs-sim-pv-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 8px; font-weight: 700;
  text-align: center;
  padding: 1px 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-sim-pv-empty { color: #cbd5e0; font-size: 12px; }

.bs-sim-action-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.bs-sim-info {
  font-size: 11px;
  color: #718096;
  text-align: center;
}

/* ============================================================
 * Buttons
 * ============================================================ */
.bs-btn {
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit;
  transition: all 0.15s;
}
.bs-btn-primary {
  background: linear-gradient(135deg, #fd79a8, #a29bfe);
  color: #fff;
  box-shadow: 0 2px 6px rgba(253,121,168,0.3);
}
.bs-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(253,121,168,0.4); }
.bs-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.bs-btn-outline {
  background: #fff;
  border: 1.5px solid #cbd5e0;
  color: #4a5568;
}
.bs-btn-outline:hover { border-color: #fd79a8; color: #fd79a8; }
.bs-btn-danger {
  background: #fc8181;
  color: #fff;
}
.bs-btn-sm { font-size: 11px; padding: 5px 10px; }
.bs-btn-lg {
  font-size: 15px; padding: 12px 20px;
  width: 100%; justify-content: center;
}

/* ============================================================
 * Progress
 * ============================================================ */
.bs-progress-area { margin-bottom: 12px; }
.bs-progress-bar {
  background: #edf2f7;
  border-radius: 10px;
  overflow: hidden;
  height: 14px;
  margin-bottom: 4px;
}
.bs-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fd79a8, #a29bfe);
  transition: width 0.2s;
}
.bs-progress-text {
  font-size: 11px;
  color: #4a5568;
  text-align: center;
  font-weight: 700;
}

/* ============================================================
 * Result
 * ============================================================ */
.bs-result-bigwrap {
  background: linear-gradient(135deg, #fff5f5 0%, #f0e8ff 100%);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  border: 2px solid #fed7e2;
}
.bs-result-vs-line {
  font-size: 12px; color: #4a5568;
  margin-bottom: 6px;
}
.bs-result-pname { font-weight: 800; color: #fd79a8; }
.bs-result-ename { font-weight: 800; color: #c53030; }

.bs-result-bigrate {
  margin: 12px 0;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.bs-result-bigrate-lbl {
  font-size: 12px; font-weight: 700;
  color: #718096;
  letter-spacing: 2px;
}
.bs-result-bigrate-val {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  margin-top: 4px;
}
/* ============================================================
 * ★ v1.8.3 (2026-05-13) コンパクトレイアウト (1回モード)
 *   勝利/敗北/引き分けを半分サイズにし、その隣に終了ターン・ログ件数タイルを並べる
 * ============================================================ */
.bs-result-compactrow {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 8px 0 4px;
}
.bs-result-bigrate-compact {
  margin: 0;
  padding: 10px 8px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bs-result-bigrate-compact .bs-result-bigrate-lbl {
  font-size: 10px;
  letter-spacing: 1px;
}
.bs-result-bigrate-compact .bs-result-bigrate-val {
  font-size: 28px;
  letter-spacing: -1px;
  margin-top: 2px;
}
.bs-result-tile-compact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 4px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.bs-result-tile-compact .bs-result-label {
  font-size: 10px;
  margin-bottom: 2px;
}
.bs-result-tile-compact .bs-result-value {
  font-size: 18px;
}
@media (max-width: 380px) {
  .bs-result-bigrate-compact .bs-result-bigrate-val { font-size: 24px; }
  .bs-result-tile-compact .bs-result-value { font-size: 16px; }
}
.bs-result-bigrate-win .bs-result-bigrate-val {
  background: linear-gradient(135deg, #38b2ac, #3182ce);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bs-result-bigrate-lose .bs-result-bigrate-val {
  background: linear-gradient(135deg, #e53e3e, #ed8936);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bs-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 12px;
}
@media (min-width: 480px) {
  .bs-result-grid { grid-template-columns: repeat(4, 1fr); }
}
.bs-result-tile {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.bs-result-label {
  font-size: 10px; font-weight: 700;
  color: #a0aec0;
  margin-bottom: 4px;
}
.bs-result-value {
  font-size: 16px; font-weight: 800;
  color: #2d3748;
}
.bs-result-elapsed {
  font-size: 10px; color: #a0aec0;
  margin-top: 8px;
}
/* ★ v2.1.13: 開幕SP統計の注記 */
.bs-result-spnote {
  margin-top: 6px;
  font-size: 10.5px;
  color: #a0aec0;
  text-align: center;
  line-height: 1.5;
}
.bs-result-bigrate-draw .bs-result-bigrate-val {
  background: linear-gradient(135deg, #718096, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
 * Sim Buttons (1回 / 100回 分割)
 * ============================================================ */
.bs-sim-action-row-split { gap: 6px; }
.bs-sim-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.bs-run-btn-half {
  width: 100%;
  padding: 12px 8px;
  font-size: 14px;
  justify-content: center;
}
@media (max-width: 360px) {
  .bs-sim-btn-group { grid-template-columns: 1fr; }
  .bs-run-btn-half { font-size: 13px; padding: 11px 8px; }
}

/* ============================================================
 * Result Tabs / 行動順ボタン
 * ============================================================ */
.bs-result-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.bs-result-tabbtn {
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
}
/* ★ v2.1.15: 詳細ログ 4ボタン (攻撃/速度/SP回復/全記録) を 2×2 グリッドで */
.bs-result-tabs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bs-result-tabs-grid .bs-result-tabbtn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* ============================================================
 * ★ v2.1.15: 攻撃ログモーダル (行動順モーダルのデザイン踏襲)
 * ============================================================ */
.bs-atk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-atk-item {
  background: #fff;
  border: 1.5px solid #cbd5e0;
  border-radius: 12px;
  padding: 9px 11px;
}
.bs-atk-left  { border-color: #90cdf4; background: #f8fbff; }
.bs-atk-right { border-color: #fc8181; background: #fffafa; }
.bs-atk-mainrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-atk-rank {
  font-weight: 800;
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex: none;
}
.bs-atk-left  .bs-atk-rank { color: #2b6cb0; }
.bs-atk-right .bs-atk-rank { color: #c53030; }
.bs-atk-icon-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bs-atk-icon-left  { box-shadow: 0 0 0 1.5px #90cdf4, 0 1px 2px rgba(0,0,0,0.08); }
.bs-atk-icon-right { box-shadow: 0 0 0 1.5px #fc8181, 0 1px 2px rgba(0,0,0,0.08); }
.bs-atk-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.bs-atk-badge {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  flex: none;
  white-space: nowrap;
}
.bs-atk-badge-ult    { background: #fefcbf; color: #975a16; border: 1px solid #f6e05e; }
.bs-atk-badge-normal { background: #edf2f7; color: #4a5568; border: 1px solid #e2e8f0; }
.bs-atk-arrowsym { color: #a0aec0; font-size: 13px; flex: none; }
.bs-atk-target {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bs-atk-target-left  { box-shadow: 0 0 0 1.5px #90cdf4, 0 1px 2px rgba(0,0,0,0.08); }
.bs-atk-target-right { box-shadow: 0 0 0 1.5px #fc8181, 0 1px 2px rgba(0,0,0,0.08); }
.bs-atk-target-dead .bs-atk-icon { filter: grayscale(1); opacity: 0.5; }
.bs-atk-skull {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #c53030;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.bs-atk-dodge {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  background: #2d3748;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}
.bs-atk-sub {
  margin: 7px 0 0 26px;
  font-size: 11px;
  color: #718096;
  line-height: 1.55;
}
.bs-atk-stun {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #805ad5;
  font-size: 12.5px;
  font-weight: 700;
}
.bs-atk-empty {
  text-align: center;
  color: #a0aec0;
  font-size: 13px;
  padding: 26px 0;
}

/* ============================================================
 * 行動順ポップアップ (Action Order Modal)
 * ============================================================ */
.bs-actorder-bg {
  position: fixed; inset: 0;
  background: rgba(20, 24, 40, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  backdrop-filter: blur(2px);
}
.bs-actorder-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  /* ターン進行でキャラが減ってもモーダルサイズを固定、
     レイアウトを変更しないため height を固定値にする。
     10体表示時、最後のキャラが下部に接するくらい十分な高さを確保 */
  height: 92vh;
  max-height: 92vh;
  height: 92dvh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  animation: bsAOIn 0.18s ease-out;
  /* 背面スクロール連動を防ぐ */
  overscroll-behavior: contain;
}
@keyframes bsAOIn {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);    opacity: 1; }
}
.bs-actorder-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #fd79a8, #a29bfe);
  color: #fff;
  position: relative;
}
.bs-actorder-arrow {
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.bs-actorder-arrow:hover { background: rgba(255,255,255,0.4); }
.bs-actorder-arrow:active { transform: scale(0.92); }
.bs-actorder-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.bs-actorder-close {
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bs-actorder-close:hover { background: rgba(255,255,255,0.4); }
.bs-actorder-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px env(safe-area-inset-bottom, 12px) 10px;
  background: #fafbff;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.bs-actorder-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* キャラが減った分は下の余白として残るので、
     リスト自身はコンテンツの高さのみを使う (伋されると黒三角ボタンの位置が変わる) */
  align-self: stretch;
}
.bs-ao-item {
  display: grid;
  grid-template-columns: 28px 44px 1fr auto 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  min-height: 56px;
}
.bs-ao-item:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.bs-ao-item:active {
  transform: scale(0.985);
}
.bs-ao-left {
  background: linear-gradient(90deg, #ebf8ff 0%, #fff 60%);
  border-color: #90cdf4;
}
.bs-ao-right {
  background: linear-gradient(90deg, #fff5f5 0%, #fff 60%);
  border-color: #fc8181;
}
.bs-ao-rank {
  font-size: 16px;
  font-weight: 900;
  color: #4a5568;
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1;
}
.bs-ao-left .bs-ao-rank { color: #2b6cb0; }
.bs-ao-right .bs-ao-rank { color: #c53030; }
.bs-ao-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #edf2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.bs-ao-left  .bs-ao-icon-wrap { box-shadow: 0 0 0 1.5px #90cdf4, 0 1px 2px rgba(0,0,0,0.1); }
.bs-ao-right .bs-ao-icon-wrap { box-shadow: 0 0 0 1.5px #fc8181, 0 1px 2px rgba(0,0,0,0.1); }
.bs-ao-icon {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bs-ao-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bs-ao-name {
  font-size: 13px;
  font-weight: 700;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.bs-ao-init {
  text-align: right;
  padding: 0 2px 0 4px;
  min-width: 56px;
  line-height: 1;
}
.bs-ao-init-lbl {
  font-size: 8px;
  font-weight: 700;
  color: #a0aec0;
  letter-spacing: 0.5px;
}
.bs-ao-init-val {
  font-size: 17px;
  font-weight: 900;
  color: #2d3748;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.bs-ao-left  .bs-ao-init-val { color: #2c5282; }
.bs-ao-right .bs-ao-init-val { color: #9b2c2c; }
.bs-ao-arrow {
  color: #a0aec0;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-ao-left  .bs-ao-arrow { color: #4299e1; }
.bs-ao-right .bs-ao-arrow { color: #e53e3e; }
@media (max-width: 360px) {
  .bs-actorder-modal { max-width: 340px; }
  .bs-ao-item { grid-template-columns: 24px 38px 1fr auto 12px; gap: 8px; padding: 7px 9px; min-height: 50px; }
  .bs-ao-icon-wrap { width: 38px; height: 38px; }
  .bs-ao-name { font-size: 12px; }
  .bs-ao-init-val { font-size: 15px; }
  .bs-actorder-title { font-size: 14px; }
}

/* ============================================================
 * 速度計算詳細モーダル
 * ============================================================ */
.bs-initcalc-bg {
  position: fixed; inset: 0;
  background: rgba(20, 24, 40, 0.6);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  backdrop-filter: blur(2px);
}
.bs-initcalc-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  animation: bsAOIn 0.18s ease-out;
}
.bs-initcalc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
}
.bs-initcalc-left .bs-initcalc-head {
  background: linear-gradient(135deg, #4299e1, #667eea);
}
.bs-initcalc-right .bs-initcalc-head {
  background: linear-gradient(135deg, #fc8181, #ed64a6);
}
.bs-initcalc-back, .bs-initcalc-close {
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.bs-initcalc-back:hover, .bs-initcalc-close:hover { background: rgba(255,255,255,0.4); }
.bs-initcalc-close { font-weight: 700; font-size: 16px; line-height: 1; }
.bs-initcalc-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bs-initcalc-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  object-fit: cover;
  flex-shrink: 0;
}
.bs-initcalc-name {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-initcalc-summary {
  padding: 10px 12px;
  background: #f7fafc;
  border-bottom: 1px solid #edf2f7;
}
.bs-initcalc-formula {
  font-size: 11px;
  color: #718096;
  text-align: center;
  font-weight: 600;
  margin-bottom: 4px;
}
.bs-initcalc-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bs-initcalc-eq-part {
  font-size: 11px;
  color: #2d3748;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bs-initcalc-eq-eq {
  font-size: 14px;
  color: #4a5568;
  font-weight: 800;
}
.bs-initcalc-eq-result {
  font-size: 18px;
  font-weight: 900;
  color: #2c5282;
  font-variant-numeric: tabular-nums;
}
.bs-initcalc-right .bs-initcalc-eq-result { color: #9b2c2c; }
.bs-initcalc-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  background: #fafbff;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.bs-initcalc-section-title {
  font-size: 11px;
  font-weight: 800;
  color: #4a5568;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  border-left: 3px solid #a29bfe;
  padding-left: 6px;
}
.bs-initcalc-section-mt { margin-top: 12px; }
.bs-initcalc-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.bs-initcalc-stat-init { border-color: #b794f4; box-shadow: 0 1px 3px rgba(159,122,234,0.15); }
.bs-initcalc-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f7fafc;
  border-bottom: 1px solid #edf2f7;
}
.bs-initcalc-stat-init .bs-initcalc-stat-head {
  background: linear-gradient(90deg, #faf5ff, #fff);
}
.bs-initcalc-stat-name {
  font-size: 12px;
  font-weight: 800;
  color: #2d3748;
  flex: 1;
}
.bs-initcalc-stat-weight {
  font-size: 10px;
  color: #805ad5;
  font-weight: 700;
  background: #e9d8fd;
  padding: 2px 6px;
  border-radius: 4px;
}
.bs-initcalc-stat-eff {
  font-size: 14px;
  font-weight: 900;
  color: #2d3748;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}
.bs-initcalc-stat-init .bs-initcalc-stat-eff { color: #6b46c1; }
.bs-initcalc-stat-body { padding: 4px 10px; }
.bs-initcalc-stat-body.is-empty { padding: 0; }
.bs-initcalc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px dashed #edf2f7;
}
.bs-initcalc-row:last-child { border-bottom: none; }
.bs-initcalc-row-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4a5568;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
}
.bs-initcalc-row-val {
  font-weight: 800;
  color: #2d3748;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bs-initcalc-row-base .bs-initcalc-row-val { color: #2b6cb0; }
.bs-initcalc-row-fix .bs-initcalc-row-val { color: #2f855a; }
.bs-initcalc-row-rat .bs-initcalc-row-val { color: #c05621; }
.bs-initcalc-row-sub {
  background: #f7fafc;
  margin: 4px -10px;
  padding: 4px 10px;
  border-bottom: none;
}
.bs-initcalc-row-sub .bs-initcalc-row-lbl,
.bs-initcalc-row-sub .bs-initcalc-row-val { color: #4a5568; font-weight: 700; }
.bs-initcalc-row-final {
  background: #ebf8ff;
  margin: 4px -10px -4px;
  padding: 6px 10px;
  border-top: 1px solid #bee3f8;
  border-bottom: none;
}
.bs-initcalc-row-final .bs-initcalc-row-lbl { color: #2c5282; font-weight: 800; }
.bs-initcalc-row-final .bs-initcalc-row-val { color: #2c5282; font-size: 13px; }
.bs-initcalc-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.bs-initcalc-tag-fix { background: #c6f6d5; color: #22543d; }
.bs-initcalc-tag-rat { background: #feebc8; color: #7b341e; }
.bs-initcalc-tag-sub { background: #e9d8fd; color: #44337a; }
.bs-initcalc-skill {
  font-size: 10.5px;
  color: #4a5568;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* スキル名 + キャスターアイコンのラッパー (スキル名の隣にアイコンを密着させる) */
.bs-initcalc-skill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.bs-initcalc-skill-wrap .bs-initcalc-skill {
  flex: 0 1 auto;
}
/* バフ提供元キャラのアイコン (スキル名の右隣) — 2026-05 拡大・赤丸削除 */
.bs-initcalc-caster-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  background: #edf2f7;
}
.bs-initcalc-caster-icon.bs-initcalc-caster-left,
.bs-initcalc-caster-icon.bs-initcalc-caster-right {
  box-shadow: none;
  border: none;
}
/* SUB加算行の右側値もファイナル色寄りに */
.bs-initcalc-row .bs-initcalc-tag-sub + .bs-initcalc-skill { color: #553c9a; }
/* ★ 2026-05-12 (v1.6.6) 他キャラ由来のバフはうっすら背景を付けて認識しやすくする */
.bs-initcalc-row-other { background: rgba(99, 179, 237, 0.06); }
.bs-initcalc-row-self  { background: transparent; }
/* 合計行の値カラー (青/赤を team で塗り分け) */
.bs-initcalc-right .bs-initcalc-row-final { background: #fff5f5; border-top-color: #fed7d7; }
.bs-initcalc-right .bs-initcalc-row-final .bs-initcalc-row-lbl,
.bs-initcalc-right .bs-initcalc-row-final .bs-initcalc-row-val { color: #9b2c2c; }
/* 行ラベルが長い場合に折り返さず ... 省略 */
.bs-initcalc-row-lbl { flex: 1 1 auto; min-width: 0; }
.bs-ao-name { /* 既存のellipsisを維持しつつ title 属性で全文をtooltip化 */ }
.bs-initcalc-footer {
  padding: 8px 12px;
  background: #fff;
  border-top: 1px solid #edf2f7;
  font-size: 10px;
  color: #718096;
}
.bs-initcalc-foot-title {
  font-weight: 800;
  color: #4a5568;
  margin-bottom: 3px;
}
.bs-initcalc-foot-line {
  font-family: 'Helvetica Neue', monospace;
  font-size: 9.5px;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.bs-initcalc-foot-note {
  font-size: 9.5px;
  color: #a0aec0;
  margin-top: 3px;
  line-height: 1.3;
}
@media (max-width: 360px) {
  .bs-initcalc-modal { max-width: 360px; }
  .bs-initcalc-name { font-size: 12.5px; }
  .bs-initcalc-eq-part { font-size: 10px; }
  .bs-initcalc-stat-name { font-size: 11.5px; }
  .bs-initcalc-row { font-size: 10.5px; }
}

/* ============================================================
 * Toast
 * ============================================================ */
.bs-toast {
  position: fixed;
  left: 50%; bottom: 80px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(45,55,72,0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.bs-toast.bs-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bs-error {
  padding: 14px;
  background: #fff5f5;
  border-left: 4px solid #f56565;
  color: #c53030;
  border-radius: 4px;
  font-size: 13px;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 360px) {
  .bs-box-grid { grid-template-columns: repeat(4, 1fr); }
  .bs-box-grid-team { grid-template-columns: repeat(4, 1fr); }
  .bs-box-name { font-size: 10px; }
  .bs-box-nick { font-size: 10px; }
  .bs-box-power { font-size: 9px; padding: 1px 6px; }
  .bs-formation-area { gap: 3px; padding: 6px 2px; }
  .bs-stat-grid-23 { gap: 6px; }
  .bs-stat-name { font-size: 12px; }
}
@media (min-width: 768px) {
  .battle-sim-root { padding: 16px; }
  .bs-box-grid { grid-template-columns: repeat(8, 1fr); }
  /* ★ v1.8.2: 編成画面のキャラボックスも PC では 8列グリッド、max-height も PC 向けに調整 */
  .bs-box-grid-team { grid-template-columns: repeat(8, 1fr); max-height: 38vh; }
  .bs-modal { max-height: 80vh; border-radius: 16px; max-width: 720px; align-self: center; }
  .bs-modal-bg { align-items: center; }
}

/* ============================================================
 * v3.1: キャラクター選択モーダル — アイコンのみグリッド
 * (編成シミュレーターと同様の表示スタイル)
 * ============================================================ */
.bs-chara-grid-icon {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (min-width: 480px) {
  .bs-chara-grid-icon { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 768px) {
  .bs-chara-grid-icon { grid-template-columns: repeat(8, 1fr); }
}
.bs-chara-icon-card {
  position: relative;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 2px;
  cursor: pointer;
  transition: all 0.15s;
  aspect-ratio: 1;
  overflow: hidden;
}
.bs-chara-icon-card:hover {
  border-color: #fd79a8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(253,121,168,0.25);
}
/* ★ 既登録キャラの白色化演出は不要 (ユーザー要望) - opacity調整を解除 */
.bs-chara-icon-card.is-dup { opacity: 1; }
.bs-chara-icon-card.bs-rar-border-3 { border-color: #ed8936; }
.bs-chara-icon-card.bs-rar-border-2 { border-color: #4299e1; }
.bs-chara-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.bs-chara-icon-rar {
  position: absolute;
  top: 3px; right: 3px;
  font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: 4px;
  color: #fff; z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.bs-chara-icon-dup {
  position: absolute;
  bottom: 3px; left: 3px;
  font-size: 10px; font-weight: 800;
  padding: 1px 5px; border-radius: 4px;
  color: #fff; background: #ed8936;
  z-index: 2;
}

/* ============================================================
 * v3.1+ : ユーザー指定カラーリング & UI改修
 *   - レアリティ色: ★3=黄, ★2=青, ★1=赤
 *   - Lvプルダウン: 横幅縮小 & スキル名と被らないようレイアウト調整
 *   - スキル一覧: 青一色を解消、見やすい配色に
 *   - 必殺技/スキル/ステータス周りの不要装飾を削除済(JS側)
 * ============================================================ */

/* レアリティバッジ色: 黄=★3 / 青=★2 / 赤=★1 */
.bs-rar-1 { background: linear-gradient(135deg, #fc8181, #e53e3e) !important; }
.bs-rar-2 { background: linear-gradient(135deg, #4299e1, #3182ce) !important; }
.bs-rar-3 { background: linear-gradient(135deg, #f6e05e, #d69e2e) !important; color: #5a3e00 !important; }
.bs-rar-5 { background: linear-gradient(135deg, #f5576c, #f093fb) !important; }

/* スキルチップの枠線色 (選択中の上段ピル) */
.bs-skill-sel-chip.bs-rar-1 { border-color: #e53e3e !important; box-shadow: 0 0 4px rgba(229,62,62,0.18); }
.bs-skill-sel-chip.bs-rar-2 { border-color: #3182ce !important; box-shadow: 0 0 4px rgba(49,130,206,0.18); }
.bs-skill-sel-chip.bs-rar-3 { border-color: #d69e2e !important; box-shadow: 0 0 4px rgba(214,158,46,0.20); }

/* スキルバッジ用 (★n) 単独色 */
.bs-skill-rar.bs-rar-1 { background: #e53e3e !important; color: #fff !important; }
.bs-skill-rar.bs-rar-2 { background: #3182ce !important; color: #fff !important; }
.bs-skill-rar.bs-rar-3 { background: #d69e2e !important; color: #fff !important; }

/* キャラ選択モーダルのレアボーダー色 (★3=黄、★2=青) */
.bs-chara-icon-card.bs-rar-border-3 { border-color: #d69e2e !important; }
.bs-chara-icon-card.bs-rar-border-2 { border-color: #3182ce !important; }

/* ---- Lvプルダウンを小さく + チップ内で被らないように ---- */
.bs-skill-lv-sel {
  font-size: 10px !important;
  padding: 1px 14px 1px 4px !important;
  border-radius: 4px;
  border: 1px solid #cbd5e0;
  width: auto !important;
  max-width: 56px !important;
  min-width: 44px !important;
  height: 20px;
  line-height: 18px;
  background: #fff;
  flex-shrink: 0;
}

/* 上段「選択中スキル」チップ: 横並びで縮まないようにレイアウト改善 */
.bs-skill-sel-chip {
  flex-wrap: nowrap;
  gap: 5px;
  padding: 3px 6px 3px 6px;
}
.bs-skill-sel-chip .bs-skill-name {
  max-width: 100px;
  flex: 0 1 auto;
}
.bs-skill-sel-chip .bs-skill-lv-sel {
  flex-shrink: 0;
}

/* ============================================================
 * スマホでの「選択中スキル」チップを小型化
 *  - チップ枚数が多い時も収まりやすく、ステッカーとして上に固定しないため見やすさを重視
 *  - フォントサイズ 1～2 だけ下げ、枠も軽量に
 * ============================================================ */
@media (max-width: 768px) {
  .bs-skill-sel-chip {
    padding: 2px 5px 2px 5px;
    font-size: 10px;       /* 以前 11px → 10px に 1pt 下げ */
    border-radius: 12px;   /* ソフトめに */
    gap: 4px;
    border-width: 1px !important;
  }
  .bs-skill-sel-chip .bs-skill-name {
    max-width: 78px;
    font-size: 10px;       /* 同じく下げ */
  }
  .bs-skill-sel-chip .bs-skill-lv-sel {
    font-size: 9px !important;
    max-width: 48px !important;
    min-width: 38px !important;
    height: 18px;
    line-height: 16px;
    padding: 0 12px 0 3px !important;
  }
  .bs-skill-sel-chip .bs-skill-rm {
    width: 14px; height: 14px;
    font-size: 10px;
  }
  .bs-skill-selected-list {
    gap: 3px;
  }
  .bs-skill-selected-lbl {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .bs-skill-sel-chip {
    font-size: 9.5px;
    padding: 2px 4px 2px 4px;
  }
  .bs-skill-sel-chip .bs-skill-name {
    max-width: 70px;
    font-size: 9.5px;
  }
}

/* ============================================================
 * スキル一覧 (下段ピッカー): 全部青一色を解消、レア色で左ボーダーのみ着色
 * ============================================================ */
.bs-skill-picker-box {
  background: #fafbfc !important;
  border: 1px solid #e2e8f0;
}
.bs-skill-picker-list {
  background: #fff !important;
  border: 1px solid #edf2f7;
}
.bs-skill-row {
  border-left: 4px solid transparent;
  background: #fff;
  color: #2d3748;
}
.bs-skill-row + .bs-skill-row {
  border-top: 1px solid #f1f5f9;
}
.bs-skill-row.bs-skill-rar-row-3 { border-left-color: #d69e2e; }
.bs-skill-row.bs-skill-rar-row-2 { border-left-color: #3182ce; }
.bs-skill-row.bs-skill-rar-row-1 { border-left-color: #e53e3e; }

.bs-skill-row:hover { background: #fff7fa !important; }
.bs-skill-row.is-sel {
  background: linear-gradient(90deg, #fff7fa, #faf5ff) !important;
}
.bs-skill-row.bs-skill-rar-row-3.is-sel { background: linear-gradient(90deg, #fffbe6, #fff7fa) !important; }
.bs-skill-row.bs-skill-rar-row-2.is-sel { background: linear-gradient(90deg, #ebf5ff, #fff7fa) !important; }
.bs-skill-row.bs-skill-rar-row-1.is-sel { background: linear-gradient(90deg, #ffefef, #fff7fa) !important; }

.bs-skill-row .bs-skill-info .bs-skill-name {
  color: #1a202c;
  font-size: 13px;
  font-weight: 700;
}

/* スキル説明は非表示 (JS側でも生成しないが念のため) */
.bs-skill-desc { display: none !important; }

/* 選択中バッジを少しコンパクトに */
.bs-skill-state {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid #cbd5e0;
  color: #718096;
  background: #fff;
}
.bs-skill-state.is-on {
  background: linear-gradient(135deg, #fd79a8, #e84393);
  color: #fff;
  border-color: transparent;
}

/* 必殺技チップ: 「固定」削除に合わせて余白整理 */
.bs-locked { display: none !important; }

/* ステータスセル: descを削除した分、入力欄を中心に余白調整 */
.bs-stat-cell {
  padding: 8px 6px;
}
.bs-stat-name {
  font-size: 14px;
  margin-bottom: 6px;
}

/* ============================================================
 * v3.2 改修: ユーザー指示によるUI修正
 *   1. スキルチップの色を薄く + 文字を見やすく
 *   2. ステータス入力: spinner ボタン非表示, descの右付き丸数字を消す
 *   3. 編成画面: 名前入力欄半分 + 総戦力ピル
 *   4. シミュレーション: プレビュー総戦力表示
 * ============================================================ */

/* ---- 1. 「選択中スキル」チップ: 色を淡く、文字を読みやすく ---- */
/* 共通: 白ベース + 細い色枠 + 濃いめの文字色 */
.bs-skill-sel-chip {
  background: #ffffff !important;
  color: #2d3748 !important;
  border-width: 1.5px !important;
}
.bs-skill-sel-chip .bs-skill-name {
  color: #2d3748 !important;
  font-weight: 700;
}

/* ★1 (赤系) → 淡いピンク背景 + 濃い赤文字 */
.bs-skill-sel-chip.bs-rar-1 {
  background: linear-gradient(135deg, #fff5f5, #ffe9e9) !important;
  border-color: #f5a5a5 !important;
  box-shadow: 0 0 0 1px rgba(229,62,62,0.06) !important;
}
.bs-skill-sel-chip.bs-rar-1 .bs-skill-name { color: #9b2c2c !important; }

/* ★2 (青系) → 淡いブルー背景 + 濃い紺文字 (今までは青背景に青文字で読みづらかった) */
.bs-skill-sel-chip.bs-rar-2 {
  background: linear-gradient(135deg, #f3f9ff, #e6f1fc) !important;
  border-color: #94c2eb !important;
  box-shadow: 0 0 0 1px rgba(49,130,206,0.06) !important;
}
.bs-skill-sel-chip.bs-rar-2 .bs-skill-name { color: #1e3a8a !important; }

/* ★3 (黄系) → 淡いベージュ背景 + 濃いブラウン文字 */
.bs-skill-sel-chip.bs-rar-3 {
  background: linear-gradient(135deg, #fffdf2, #fdf5d8) !important;
  border-color: #ecc94b !important;
  box-shadow: 0 0 0 1px rgba(214,158,46,0.06) !important;
}
.bs-skill-sel-chip.bs-rar-3 .bs-skill-name { color: #744210 !important; }

/* チップ内左の ★n バッジは淡い背景に合わせて濃いめのソリッドのまま (識別性確保) */
.bs-skill-sel-chip .bs-skill-rar.bs-rar-1 { background: #e53e3e !important; color: #fff !important; }
.bs-skill-sel-chip .bs-skill-rar.bs-rar-2 { background: #3182ce !important; color: #fff !important; }
.bs-skill-sel-chip .bs-skill-rar.bs-rar-3 { background: #d69e2e !important; color: #fff !important; }

/* Lvセレクトも背景に馴染ませる */
.bs-skill-sel-chip .bs-skill-lv-sel {
  background: #fff !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #2d3748 !important;
}

/* ×ボタンは少し落ち着かせる */
.bs-skill-sel-chip .bs-skill-rm {
  background: #fed7d7 !important;
  color: #c53030 !important;
}
.bs-skill-sel-chip .bs-skill-rm:hover {
  background: #fc8181 !important;
  color: #fff !important;
}

/* ---- 2. ステータス入力: 上下スピナー削除 + 0非表示時のスタイル ---- */
.bs-stat-input.bs-stat-input-nospin,
.bs-stat-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.bs-stat-input::-webkit-outer-spin-button,
.bs-stat-input::-webkit-inner-spin-button,
.bs-stat-input-nospin::-webkit-outer-spin-button,
.bs-stat-input-nospin::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* ---- 3. 編成画面: 名前入力欄の隣に「出力/削除」ボタン、下段にチーム総戦力を表示 ---- */
.bs-formation-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bs-formation-name {
  flex: 1 1 auto !important;
  min-width: 120px;
}
/* 編成名の下に表示される総戦力行 */
.bs-formation-power-row {
  display: flex;
  align-items: center;
  margin: 6px 0 10px 0;
}
.bs-formation-power {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  min-width: 0;
  justify-content: center;
}
.bs-formation-power-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #6b21a8;
  letter-spacing: 1px;
}
.bs-formation-power-val {
  font-size: 16px;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -0.3px;
}
@media (max-width: 480px) {
  .bs-formation-name {
    flex: 1 1 50% !important;
    font-size: 13px;
    padding: 7px 8px;
  }
  .bs-formation-power {
    padding: 6px 12px;
  }
  .bs-formation-power-val { font-size: 14px; }
}

/* ---- 4. シミュレーションプレビュー: 総戦力サブテキスト ---- */
.bs-sim-preview-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bs-sim-preview-power {
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ============================================================
 * キャラ詳細プレビューモーダル (閲覧専用、コンパクト、スマホ対応)
 * ============================================================ */
.bs-modal-bg-preview {
  align-items: center !important;
  z-index: 9998; /* スキル詳細(SkillDB)モーダルより低くして、スキル詳細を前面に出す */
}
.bs-modal-preview {
  width: 92%;
  max-width: 460px;
  max-height: 86vh;
  max-height: 86dvh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bs-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #fff 0%, #fef5fa 100%);
  flex-shrink: 0;
}
.bs-preview-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.bs-preview-info { flex: 1; min-width: 0; }
.bs-preview-name {
  font-size: 13px;
  font-weight: 800;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-preview-meta {
  margin-top: 3px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bs-preview-body {
  padding: 10px 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.bs-preview-power-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 6px 10px;
}
.bs-preview-power-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #6b21a8;
}
.bs-preview-power-val {
  font-size: 14px;
  font-weight: 800;
  color: #7c3aed;
}
.bs-preview-h {
  font-size: 12px;
  font-weight: 700;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #fed7e2;
  margin-top: 2px;
}
.bs-preview-h i { color: #fd79a8; }

/* ステータスグリッド (コンパクト版) */
.bs-preview-stat-grid {
  gap: 5px;
}
.bs-preview-stat-cell {
  padding: 4px 3px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.bs-preview-stat-lbl {
  font-size: 10px;
  font-weight: 800;
  color: #718096;
  letter-spacing: 0.5px;
}
.bs-preview-stat-val {
  font-size: 14px;
  font-weight: 800;
  color: #2d3748;
  line-height: 1.2;
}
.bs-preview-stat-lock {
  font-size: 9px;
  color: #94a3b8;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.bs-preview-stat-lock i { font-size: 8px; }

/* スキルスクロール領域 (重要: スキル欄だけスクロール) */
.bs-preview-skill-scroll {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bs-preview-skill-scroll::-webkit-scrollbar {
  width: 5px;
}
.bs-preview-skill-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}
.bs-preview-skill-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.bs-preview-skill-chip {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
}
.bs-preview-skill-chip .bs-skill-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none !important;
}
.bs-preview-skill-chip .bs-skill-rar {
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
}
.bs-preview-skill-chip .bs-skill-lv-sel {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: #4a5568;
}

/* スマホ向け微調整 */
@media (max-width: 480px) {
  .bs-modal-preview {
    width: 94%;
    max-width: 340px;
    max-height: 85vh;
  }
  .bs-preview-icon {
    width: 42px; height: 42px;
  }
  .bs-preview-name {
    font-size: 12px;
  }
  .bs-preview-stat-val {
    font-size: 13px;
  }
  .bs-preview-skill-scroll {
    max-height: 200px;
  }
  .bs-preview-skill-chip {
    font-size: 10px;
    padding: 3px 6px !important;
  }
  .bs-preview-skill-chip .bs-skill-rar {
    font-size: 9px;
    min-width: 24px;
  }
}

/* ============================================================
 * v3.3 追加修正 (ユーザー指示)
 *  - キャラ詳細プレビュー: スキルチップをクリック可能にする
 *  - 必殺ラベル(R4等)を読みやすくするためのコントラスト強化
 *  - レア1以外はLv表記を非表示 (DOMから削除済み)
 * ============================================================ */

/* スキルチップ全体をクリック可能にする */
.bs-preview-skill-chip-clickable {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.bs-preview-skill-chip-clickable:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 3px 8px rgba(0,0,0,0.10) !important;
}
.bs-preview-skill-chip-clickable:active {
  transform: translateY(0);
}

/* 必殺バッジ: 各レアリティで「必殺」が見えるように専用スタイル
   元の bs-skill-rar.bs-rar-* は !important で背景指定のため、
   ult用の差し替えクラス bs-skill-rar-ult-* で上書きする */
.bs-skill-rar-ult {
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  min-width: 28px;
  text-align: center;
}

/* R5: 虹/紫系 → 紫色背景 + 白文字 */
.bs-skill-rar-ult-5 {
  background: linear-gradient(135deg, #9333ea, #c026d3) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

/* R4: 緑系 → 濃い緑背景 + 白文字 (淡緑チップに白文字でくっきり) */
.bs-skill-rar-ult-4 {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

/* R3: 黄/オレンジ → 濃いオレンジ背景 + 白文字 */
.bs-skill-rar-ult-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

/* R2: 青系 */
.bs-skill-rar-ult-2 {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

/* R1: グレー系 */
.bs-skill-rar-ult-1 {
  background: linear-gradient(135deg, #6b7280, #4b5563) !important;
  color: #fff !important;
}

/* ================================================================
 * SP詳細モーダル (2026-05-10 v1.7.1 改修: 2×2 グリッドレイアウト)
 * ================================================================ */
/* ★ 2026-05-10 (v1.7.2) SP詳細モーダル UI 改修:
 *   - タブ (グループラベル) をもう少しコンパクトに
 *   - アイテム (キャラ枚) の高さとアイコンを大きく
 *   - アイコン上の「SUB」バッジはグループラベルと重複するため非表示化
 */
.bs-spdetail-modal {
  max-width: 980px;
  width: 96vw;
}
.bs-spdetail-body {
  padding: 6px 8px 16px;
}

/* ★ 2×2 グリッド: 上段 = 味方MAIN | 味方SUB, 下段 = 敵MAIN | 敵SUB */
.bs-spdetail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 6px 8px;
  padding: 3px;
}
/* ★ v2.1.16: サブ非表示化に伴い、味方MAIN→敵MAIN を縦1列 (計10体) で並べる */
.bs-spdetail-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 3px;
}
.bs-spdetail-stack .bs-spdetail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-spdetail-cell {
  display: flex; flex-direction: column;
  min-width: 0;
}
.bs-spdetail-empty {
  list-style: none; padding: 8px; text-align: center;
  color: #a0aec0; font-size: 11.5px;
}

/* ★ グループタブをコンパクト化 (側表示になりすぎるのを防ぐ) */
.bs-spdetail-group-h {
  margin: 1px 0 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.bs-spdetail-group-left.bs-spdetail-group-main  { background: linear-gradient(135deg, #3182ce, #2c5282); }
.bs-spdetail-group-left.bs-spdetail-group-sub   { background: linear-gradient(135deg, #63b3ed, #4299e1); }
.bs-spdetail-group-right.bs-spdetail-group-main { background: linear-gradient(135deg, #e53e3e, #c53030); }
.bs-spdetail-group-right.bs-spdetail-group-sub  { background: linear-gradient(135deg, #fc8181, #f56565); }

.bs-spdetail-list { margin: 0; padding: 0; list-style: none; }
.bs-spdetail-item-sub { opacity: 0.95; }
.bs-spdetail-item-sub .bs-ao-icon { filter: saturate(0.9); }

/* ★ キャラアイテムを大きめに (高さUP・アイコンUP・名前UP) */
.bs-spdetail-item-compact {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  margin: 5px 0 !important;
  min-height: 54px;
  border-radius: 8px;
  /* ★ 2026-05-10 修正: 親 flex の min-width:0 で子要素の ellipsis を有効化 */
  min-width: 0;
  overflow: hidden;
}
.bs-spdetail-item-compact .bs-ao-icon-wrap {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
}
.bs-spdetail-item-compact .bs-ao-icon {
  width: 42px; height: 42px; border-radius: 50%;
  display: block;
}
.bs-spdetail-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 0;        /* ★ flex item の子の ellipsis を確実に効かせるための保険 */
  display: flex !important;
  align-items: center;
  overflow: hidden !important;
}
.bs-spdetail-name {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  display: block;
}
.bs-spdetail-item-compact .bs-ao-arrow {
  flex: 0 0 auto;
  color: #a0aec0;
  font-size: 12px;
}

/* ★ SUB バッジは 「味方 SUB / 敵 SUB」 グループラベルで明示されているため非表示化 */
.bs-spdetail-subbadge {
  display: none !important;
}
.bs-ao-icon-wrap { position: relative; }

.bs-spdetail-max { color: #d69e2e !important; font-weight: 800; }
.bs-ao-init-val.bs-spdetail-max::after { content: ' MAX'; font-size: 9px; font-weight: 700; }

/* SP詳細 — キャラ詳細モーダル */
.bs-spchara-modal { max-width: 640px; }
.bs-spchara-body { padding: 4px 6px 14px; }
.bs-spchara-summary { padding: 8px 12px; }
.bs-spchara-empty {
  padding: 24px 14px; text-align: center;
  color: #718096; font-size: 12.5px;
}

.bs-spdetail-row .bs-initcalc-row-val {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.bs-spdetail-amt {
  font-weight: 800; font-size: 12.5px;
}
.bs-spdetail-amt-pos { color: #2f855a; }
.bs-spdetail-amt-neg { color: #c05621; }
.bs-spdetail-spchain {
  color: #718096; font-size: 11px; font-weight: 600;
}
.bs-spdetail-cap {
  margin-left: 6px;
  padding: 1px 6px; border-radius: 4px;
  background: #fefcbf; color: #744210;
  font-size: 10px; font-weight: 700;
}

/* ★ 2026-05-10 v1.7.1: ラッキー タグ (SP gain が MaxSP=1500 に強制 cap up された際の証) */

@media (max-width: 720px) {
  .bs-spdetail-modal { max-width: 100%; width: 100vw; }
  .bs-spchara-modal  { max-width: 100%; }
  .bs-spdetail-group-h { font-size: 10.5px; padding: 3px 5px; }
  .bs-spdetail-spchain { display: none; }  /* 狭い画面では before→after を省略 */
  .bs-spdetail-grid { gap: 5px; }
  .bs-spdetail-item-compact {
    padding: 6px 8px !important;
    gap: 8px !important;
    min-height: 46px;
  }
  .bs-spdetail-item-compact .bs-ao-icon-wrap,
  .bs-spdetail-item-compact .bs-ao-icon { width: 36px; height: 36px; }
  .bs-spdetail-name { font-size: 12px; }
}
@media (max-width: 420px) {
  .bs-spdetail-grid { gap: 4px; }
  .bs-spdetail-item-compact {
    padding: 5px 6px !important;
    gap: 7px !important;
    min-height: 42px;
  }
  .bs-spdetail-item-compact .bs-ao-icon-wrap,
  .bs-spdetail-item-compact .bs-ao-icon { width: 32px; height: 32px; }
  .bs-spdetail-name { font-size: 11.5px; }
}

/* ============================================================
 * v1.8.1 スマホ向けタッチドラッグ&ドロップ対応
 * ============================================================ */
/* ドラッグ対象は長押しメニュー/画像保存メニューを抑制 */
.bs-box-draggable,
.bs-form-slot {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bs-box-draggable img,
.bs-form-slot img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* スマホ用ドラッグゴースト */
.bs-touch-ghost {
  border-radius: 12px;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  background: #fff;
}

/* =========================================================== */
/*  全ターン詳細記録 モーダル (★ 2026-05-12 v1.7.5 新規)        */
/* =========================================================== */
.bs-fulllog-tabbtn {
  background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%) !important;
  color: #fff !important;
  border-color: #d63384 !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(232,67,147,0.3);
}
.bs-fulllog-tabbtn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,67,147,0.4); }

.bs-fulllog-bg { z-index: 10010; }
.bs-fulllog-modal {
  width: 96vw; max-width: 1200px; height: 92vh; max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a1d24 0%, #0e1116 100%);
  color: #e6e9ef;
  border: 1px solid #2a2f3a; border-radius: 12px;
  overflow: hidden;
}
.bs-fulllog-head {
  background: linear-gradient(135deg, #e84393 0%, #6c5ce7 100%);
  padding: 12px 16px; color: #fff;
}
.bs-fulllog-title { font-size: 17px; font-weight: 800; }
.bs-fulllog-title i { margin-right: 6px; }

.bs-fulllog-summary {
  padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 14px;
  background: #14171d; border-bottom: 1px solid #2a2f3a;
  font-size: 13px; color: #c5cad3;
}
.bs-fulllog-summary strong { color: #fd79a8; margin-right: 4px; }

/* ★ v1.8.0 ユーザー要望:
   - 絞り込みツールバー / キャラフィルタバーはスクロールと一緒に動くようにする (sticky解除)
   - チップサイズをもう少し小さくして画面をログ本体に譲る
   - モーダル本体の flex レイアウトで .bs-fulllog-content に flex:1 を与えているため、
     toolbar / charfilter は flex-shrink: 0 だが高さが小さいので content に十分面積が豊される。 */
.bs-fulllog-toolbar {
  padding: 4px 10px; display: flex; flex-wrap: wrap; gap: 4px;
  background: #11141a; border-bottom: 1px solid #2a2f3a;
  /* ★ sticky鎖止: position: static にしてコンテンツと一緒にスクロールさせる */
  position: static;
  flex-shrink: 0;
}
.bs-fulllog-chip {
  background: #1f242d; color: #97a0ad; border: 1px solid #2c323d;
  border-radius: 999px; padding: 2px 8px; font-size: 10.5px;
  font-weight: 600; cursor: pointer; transition: 0.15s;
  line-height: 1.3;
}
.bs-fulllog-chip.on {
  background: linear-gradient(135deg, #6c5ce7 0%, #00b894 100%);
  color: #fff; border-color: transparent;
}
.bs-fulllog-chip:hover { transform: translateY(-1px); }

.bs-fulllog-content {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  background:
    radial-gradient(ellipse at top, rgba(108,92,231,0.06) 0%, transparent 60%),
    #0e1116;
  scroll-behavior: smooth;
}
.bs-fulllog-content::-webkit-scrollbar { width: 10px; }
.bs-fulllog-content::-webkit-scrollbar-track { background: #11141a; }
.bs-fulllog-content::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 5px; }

.bs-fl-turn-section { margin-bottom: 22px; }
.bs-fl-turn-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(253,121,168,0.15) 0%, transparent 100%);
  border-left: 4px solid #fd79a8; border-radius: 4px;
}
.bs-fl-turn-badge {
  background: #fd79a8; color: #fff; font-weight: 800;
  padding: 2px 10px; border-radius: 4px; font-size: 13px;
}
.bs-fl-turn-label { font-weight: 700; color: #e6e9ef; flex: 1; }

.bs-fl-turn-body { display: flex; flex-direction: column; gap: 5px; padding-left: 4px; }

.bs-fl-block {
  background: #161a21; border: 1px solid #232831;
  border-radius: 6px; padding: 8px 10px; margin: 3px 0;
}
.bs-fl-block-initial { border-left: 3px solid #fdcb6e; background: #1a1d24; }
.bs-fl-block-turnstart { border-left: 3px solid #74b9ff; background: #161a21; }
.bs-fl-block-turnend { border-left: 3px solid #fd79a8; background: #1a1118; }
.bs-fl-block-action { border-left: 3px solid #00b894; padding: 10px 12px; }
.bs-fl-block-action.bs-fl-right { border-left-color: #e74c3c; }
.bs-fl-blockttl { font-weight: 700; color: #ffd86b; margin-bottom: 6px; font-size: 13px; }
.bs-fl-blockttl i { margin-right: 5px; }

.bs-fl-orderline { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-fl-orderchip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #1d2129; padding: 3px 8px; border-radius: 4px; font-size: 12px;
  border: 1px solid #2a2f3a;
}
.bs-fl-rank { background: #fdcb6e; color: #000; font-weight: 800; padding: 1px 5px; border-radius: 3px; font-size: 10px; }
.bs-fl-orderchip.bs-fl-left { border-color: #0984e3; color: #74b9ff; }
.bs-fl-orderchip.bs-fl-right { border-color: #d63031; color: #fab1a0; }

.bs-fl-snap-grid, .bs-fl-snap-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 6px;
}
.bs-fl-snap-item, .bs-fl-snap-card {
  background: #1d2129; padding: 6px 8px; border-radius: 4px;
  border: 1px solid #2a2f3a;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px;
}
.bs-fl-snap-card.dead { opacity: 0.45; filter: grayscale(0.7); }
.bs-fl-snap-card.bs-fl-left { border-left: 3px solid #0984e3; }
.bs-fl-snap-card.bs-fl-right { border-left: 3px solid #d63031; }
.bs-fl-snap-cardtop { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.bs-fl-snap-cardname { color: #e6e9ef; flex: 1; }

.bs-fl-hpbar-wrap {
  position: relative; height: 16px; background: #2a1218; border-radius: 8px;
  overflow: hidden; border: 1px solid #2a2f3a;
}
.bs-fl-hpbar {
  height: 100%;
  background: linear-gradient(90deg, #00b894 0%, #ffd86b 50%, #e74c3c 100%);
  transition: width 0.3s;
}
.bs-fl-hpbar-text {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
}
.bs-fl-snap-meta { display: flex; gap: 8px; font-size: 11px; color: #97a0ad; }
.bs-fl-snap-buffs { display: flex; flex-wrap: wrap; gap: 3px; }
.bs-fl-snap-buff {
  background: #2a2f3a; color: #fdcb6e; font-size: 10px;
  padding: 2px 5px; border-radius: 3px;
}

.bs-fl-row {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 8px; background: #14171d; border-radius: 4px;
  border-left: 2px solid #2a2f3a;
  font-size: 13px;
}
.bs-fl-row.bs-fl-left  { border-left-color: #0984e3; }
.bs-fl-row.bs-fl-right { border-left-color: #d63031; }
.bs-fl-row-buff { background: rgba(108,92,231,0.08); }
.bs-fl-row-heal { background: rgba(0,184,148,0.08); }
.bs-fl-row-sp.gain  { background: rgba(253,203,110,0.07); }
.bs-fl-row-sp.spend { background: rgba(231,76,60,0.08); }
.bs-fl-row-action.stun { background: rgba(253,203,110,0.12); }
/* ★ v1.8.1 不発ログの表示スタイル (確率判定でスキル/エフェクトが不発だったことを明示) */
.bs-fl-row-misfire {
  background: rgba(120,120,130,0.08);
  opacity: 0.85;
  border-left-color: #6b7280 !important;
}
.bs-fl-misfire-tag {
  color: #9ca3af;
  font-weight: 600;
  font-style: italic;
  font-size: 12px;
}

.bs-fl-evicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #2a2f3a; color: #97a0ad; font-size: 11px;
  flex-shrink: 0;
}
.bs-fl-evicon.heal  { background: #00b894; color: #fff; }
.bs-fl-evicon.attack { background: #e74c3c; color: #fff; }
.bs-fl-evicon.skill { background: #fd79a8; color: #fff; }
.bs-fl-evicon.sp    { background: #fdcb6e; color: #000; }
.bs-fl-evicon.misfire { background: #4b5563; color: #d1d5db; }

.bs-fl-evbody { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; line-height: 1.4; }
.bs-fl-name {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700;
}
.bs-fl-name.bs-fl-left  { color: #74b9ff; }
.bs-fl-name.bs-fl-right { color: #fab1a0; }
.bs-fl-icon {
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; border: 1px solid #2a2f3a;
}
.bs-fl-icon.bs-fl-left  { border-color: #0984e3; }
.bs-fl-icon.bs-fl-right { border-color: #d63031; }

.bs-fl-buff-tag { color: #fdcb6e; font-weight: 600; }
.bs-fl-buff-val { color: #00cec9; font-weight: 700; }
/* ★ 2026-05-12 (v1.7.6) デバフ表示 (敵→味方 または 味方→敵のスキル付与) は赤字 */
.bs-fl-debuff-val { color: #ff4d6d !important; font-weight: 800 !important; text-shadow: 0 0 4px rgba(255,77,109,0.3); }
.bs-fl-row-debuff { background: rgba(231,76,60,0.08) !important; border-left-color: #e74c3c !important; }
/* ★ v1.8.2: スキル名タップで説明ポップアップを出せるように cursor:pointer + 下線を付ける */
.bs-fl-skill   {
  color: #a29bfe; font-size: 11px;
  cursor: pointer;
  text-decoration: underline dotted rgba(162,155,254,0.5);
  text-underline-offset: 2px;
  transition: color 0.15s, text-shadow 0.15s;
}
.bs-fl-skill:hover, .bs-fl-skill.is-active {
  color: #c5bfff;
  text-shadow: 0 0 6px rgba(162,155,254,0.6);
}
.bs-fl-arrow   { color: #ffd86b; font-weight: 800; padding: 0 2px; }

/* ★ v1.8.2: スキル説明ポップオーバー (控えめなサイズ・ダークテーマ) */
.bs-fl-skill-pop {
  position: fixed;
  z-index: 100000;
  max-width: 280px;
  min-width: 180px;
  background: #1a1f2e;
  color: #e2e8f0;
  border: 1px solid #4a5568;
  border-left: 3px solid #a29bfe;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s, transform 0.12s;
  word-break: break-word;
  white-space: pre-wrap;
}
.bs-fl-skill-pop.is-show {
  opacity: 1;
  transform: translateY(0);
}
.bs-fl-skill-pop .bs-fl-skill-pop-title {
  font-weight: 800;
  color: #c5bfff;
  font-size: 12px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px dashed #4a5568;
}
.bs-fl-skill-pop .bs-fl-skill-pop-desc {
  color: #cbd5e0;
  font-size: 11px;
}
.bs-fl-skill-pop .bs-fl-skill-pop-empty {
  color: #718096;
  font-style: italic;
  font-size: 10px;
}

/* =========================================================== */
/*  ★ 2026-05-12 (v1.7.6) キャラクター絞り込みバー           */
/*  ★ v1.8.0: スクロールと一緒に動くよう position: static に、
               サイズもコンパクト化                          */
/* =========================================================== */
.bs-fulllog-charfilter {
  padding: 4px 10px;
  background: #11141a;
  border-bottom: 1px solid #2a2f3a;
  display: flex; flex-direction: column; gap: 3px;
  position: static;
}
.bs-fulllog-charrow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bs-fulllog-charrow-lbl {
  display: inline-block; min-width: 32px; font-size: 11px;
  font-weight: 800; padding: 2px 6px; border-radius: 3px;
}
.bs-fulllog-charrow-left .bs-fulllog-charrow-lbl {
  background: #0984e3; color: #fff;
}
.bs-fulllog-charrow-right .bs-fulllog-charrow-lbl {
  background: #d63031; color: #fff;
}
.bs-fulllog-charbtn {
  display: inline-flex; align-items: center; gap: 3px;
  background: #1f242d; color: #c5cad3;
  border: 1px solid #2c323d; border-radius: 14px;
  padding: 1px 6px 1px 1px; font-size: 10px; font-weight: 600;
  cursor: pointer; transition: 0.15s;
  line-height: 1.2;
}
.bs-fulllog-charbtn:hover { transform: translateY(-1px); background: #2a3340; }
.bs-fulllog-charbtn-icon {
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; border: 1px solid #2a2f3a;
}
.bs-fulllog-charbtn-left  .bs-fulllog-charbtn-icon,
.bs-fulllog-charbtn.bs-fulllog-charbtn-left  .bs-fulllog-charbtn-icon { border-color: #0984e3; }
.bs-fulllog-charbtn-right .bs-fulllog-charbtn-icon,
.bs-fulllog-charbtn.bs-fulllog-charbtn-right .bs-fulllog-charbtn-icon { border-color: #d63031; }
.bs-fulllog-charbtn-left.on {
  background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 0 0 2px #74b9ff inset, 0 0 10px rgba(116,185,255,0.5);
}
.bs-fulllog-charbtn-right.on {
  background: linear-gradient(135deg, #d63031 0%, #ff7675 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 0 0 2px #ff7675 inset, 0 0 10px rgba(255,118,117,0.5);
}
.bs-fulllog-charbtn-name {
  white-space: nowrap; text-overflow: ellipsis;
  max-width: 80px; overflow: hidden;
}
.bs-fulllog-charclear {
  align-self: flex-start;
  background: #2d3340; color: #ffd86b; border: 1px solid #4a5366;
  border-radius: 999px; padding: 2px 8px; font-size: 10px;
  font-weight: 700; cursor: pointer; transition: 0.15s;
}
.bs-fulllog-charclear:hover { background: #3a4150; transform: translateY(-1px); }
.bs-fulllog-charclear i { margin-right: 4px; }

.bs-fl-tag {
  display: inline-block; padding: 1px 6px;
  background: #2a2f3a; color: #c5cad3;
  border-radius: 3px; font-size: 10px; font-weight: 600;
}
.bs-fl-tag.crit    { background: #ffd86b; color: #000; }
.bs-fl-tag.counter { background: #6c5ce7; color: #fff; }
.bs-fl-tag.dodge   { background: #95a5a6; color: #fff; }
.bs-fl-tag.killed  { background: #c0392b; color: #fff; font-weight: 800; }
.bs-fl-tag.stun    { background: #fdcb6e; color: #000; }
.bs-fl-tag.cap     { background: #d63031; color: #fff; }

/* ★ v1.8.4 (2026-05-13) 複数体攻撃 "何体中 何体目" バッジ */
.bs-fl-tag.bs-fl-multihit-badge {
  background: linear-gradient(135deg, #ff8a8a, #ff6b6b);
  color: #fff;
  font-weight: 700;
  padding: 2px 8px;
  letter-spacing: 0.02em;
}

.bs-fl-action-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.bs-fl-action-dmg {
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px 8px; background: #0f1217; border-radius: 4px;
  margin-bottom: 4px;
}
.bs-fl-dmg-num {
  font-size: 22px; font-weight: 900;
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255,107,107,0.5);
  font-family: 'Roboto Mono', monospace;
}
.bs-fl-dmg-hp { font-size: 12px; color: #97a0ad; }

/* ★ v1.8.3 (2026-05-13) 複数体攻撃の追加ダメージ行 */
.bs-fl-action-extras {
  margin: 4px 0 6px;
  padding: 6px 8px;
  background: rgba(255, 107, 107, 0.06);
  border-left: 3px solid #ff8a8a;
  border-radius: 0 6px 6px 0;
}
.bs-fl-action-extras-ttl {
  font-size: 11px;
  color: #ff8a8a;
  font-weight: 700;
  margin-bottom: 4px;
}
.bs-fl-action-extras-ttl i { margin-right: 5px; }
.bs-fl-action-extra-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
}
.bs-fl-dmg-num-sub {
  font-size: 16px !important;
  color: #ff8a8a !important;
  text-shadow: 0 0 4px rgba(255, 138, 138, 0.4) !important;
}

/* ★ v1.8.4 (2026-05-13) 複数体攻撃バッジ
   ターゲットごとに独立した単体攻撃ログを出力するようになったため、
   ログ見出しに「複数体攻撃 (敵ランダム N体攻撃) · X / N 体目」バッジを付ける。 */
.bs-fl-multihit-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd27a;
  background: rgba(255, 169, 64, 0.12);
  border: 1px solid rgba(255, 169, 64, 0.45);
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.bs-fl-action-calc {
  margin-top: 4px; background: #11141a; border-radius: 4px;
  border: 1px solid #2a2f3a;
}
.bs-fl-action-calc summary {
  cursor: pointer; padding: 6px 10px; color: #fdcb6e; font-weight: 600;
  font-size: 12px; user-select: none;
}
.bs-fl-action-calc summary i { margin-right: 5px; }
.bs-fl-action-calc[open] summary { border-bottom: 1px solid #2a2f3a; }
.bs-fl-calc-body { padding: 8px 12px; font-family: 'Roboto Mono', monospace; font-size: 11.5px; color: #c5cad3; }
.bs-fl-calc-line { padding: 2px 0; line-height: 1.6; }
.bs-fl-calc-final { color: #ff6b6b; font-weight: 700; padding-top: 4px; border-top: 1px dashed #2a2f3a; margin-top: 4px; }
.bs-fl-calc-formula { color: #74b9ff; font-size: 10.5px; margin-top: 6px; padding-top: 4px; border-top: 1px dashed #2a2f3a; opacity: 0.85; }

.bs-fl-row-other { color: #97a0ad; font-family: 'Roboto Mono', monospace; font-size: 11px; }

@media (max-width: 768px) {
  .bs-fulllog-modal { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }
  .bs-fl-dmg-num { font-size: 18px; }
  .bs-fl-snap-grid, .bs-fl-snap-cards { grid-template-columns: 1fr 1fr; }
  /* ★ v1.8.0 スマホ: チップをさらにコンパクトにして、画面面積をログ本体により多く譲る */
  .bs-fulllog-chip { padding: 1px 6px; font-size: 9.5px; }
  .bs-fulllog-charbtn { font-size: 9px; padding: 1px 5px 1px 1px; }
  .bs-fulllog-charbtn-icon { width: 16px; height: 16px; }
  .bs-fulllog-charbtn-name { max-width: 60px; }
  .bs-fulllog-charclear { font-size: 9px; padding: 1px 6px; }
  .bs-fulllog-summary { padding: 4px 10px; gap: 8px; font-size: 11px; }
  .bs-fulllog-charfilter { padding: 3px 8px; }
  /* スマホで toolbar / charfilter をコンテンツと同じスクロール領域に入れる */
  .bs-fulllog-toolbar { gap: 3px; }
}

/* =========================================================== */
/*  ★ 2026-05-12 (v1.7.7) 全ターン詳細記録 — 追加スタイル        */
/* =========================================================== */

/* --- 攻撃ヘッダーの判定確率チップ (クリ/気絶/回避/カウンター) --- */
.bs-fl-prob-chip {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 1px;
  background: #1c2029;
  color: #6a7080;
  border: 1px solid #2c323d;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  transition: 0.15s;
  letter-spacing: 0.2px;
}
.bs-fl-prob-chip.bs-fl-prob-fired {
  color: #fffceb;
  background: linear-gradient(135deg, #f6c544 0%, #ffd86b 100%);
  border-color: #ffd86b;
  box-shadow: 0 0 8px rgba(255,216,107,0.6), 0 0 2px rgba(255,216,107,0.9) inset;
  text-shadow: 0 0 4px rgba(0,0,0,0.4);
  animation: bs-fl-prob-pulse 1.3s ease-in-out infinite;
}
@keyframes bs-fl-prob-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,216,107,0.6), 0 0 2px rgba(255,216,107,0.9) inset; }
  50%     { box-shadow: 0 0 14px rgba(255,216,107,0.9), 0 0 4px rgba(255,216,107,1)   inset; }
}
.bs-fl-prob-chip.bs-fl-prob-crit.bs-fl-prob-fired,
.bs-fl-prob-chip.bs-fl-prob-stun.bs-fl-prob-fired {
  background: linear-gradient(135deg, #f6c544 0%, #ffe27a 100%);
}
.bs-fl-prob-chip.bs-fl-prob-dodge.bs-fl-prob-fired,
.bs-fl-prob-chip.bs-fl-prob-counter.bs-fl-prob-fired {
  background: linear-gradient(135deg, #ffd86b 0%, #ffba3a 100%);
  color: #2a1f00;
}

/* --- 通常攻撃/スキル種別表示 (名前と判定チップの間) --- */
.bs-fl-attack-kind {
  display: inline-block;
  padding: 1px 7px;
  background: #2a2f3a;
  color: #c5cad3;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.bs-fl-attack-kind.normal { background: #2a2f3a; color: #95a5a6; }
.bs-fl-attack-kind.skill  {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: #fff;
}

/* --- 判定計算詳細 (クリ/回避/気絶/カウンター) --- */
.bs-fl-action-prob {
  margin-top: 4px;
}
.bs-fl-action-prob summary {
  color: #ffd86b !important;
}
.bs-fl-prob-section {
  padding: 6px 8px;
  margin-bottom: 6px;
  background: #14181f;
  border-radius: 4px;
  border-left: 2px solid #4a5366;
}
.bs-fl-prob-section.fired {
  border-left-color: #ffd86b;
  background: linear-gradient(to right, rgba(255,216,107,0.08), #14181f 60%);
}
.bs-fl-prob-title {
  font-weight: 800;
  color: #fdcb6e;
  margin-bottom: 4px;
  font-size: 12px;
}
.bs-fl-prob-section.fired .bs-fl-prob-title {
  color: #ffeb99;
  text-shadow: 0 0 4px rgba(255,216,107,0.5);
}

/* --- 行動順 計算詳細 (DEC+CON+SPI の内訳) --- */
.bs-fl-ord-detail {
  margin-top: 6px;
  background: #11141a;
  border: 1px solid #2a2f3a;
  border-radius: 4px;
}
.bs-fl-ord-detail summary {
  cursor: pointer;
  padding: 6px 10px;
  color: #74b9ff;
  font-weight: 700;
  font-size: 12px;
  user-select: none;
}
.bs-fl-ord-detail summary i { margin-right: 5px; }
.bs-fl-ord-detail[open] summary { border-bottom: 1px solid #2a2f3a; }
.bs-fl-ord-grid {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.bs-fl-ord-card {
  background: #161a21;
  border: 1px solid #2a2f3a;
  border-left: 3px solid #4a5366;
  border-radius: 4px;
  padding: 6px 8px;
}
.bs-fl-ord-card.bs-fl-left  { border-left-color: #0984e3; }
.bs-fl-ord-card.bs-fl-right { border-left-color: #d63031; }
.bs-fl-ord-name {
  display: flex; align-items: center; gap: 4px;
  font-weight: 700; color: #e6e9ef;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.bs-fl-ord-name .bs-fl-icon { width: 18px; height: 18px; border-radius: 50%; }
.bs-fl-ord-sum {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px; color: #ffd86b;
  background: #0f1217;
  padding: 3px 6px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.bs-fl-ord-stat {
  padding: 4px 5px;
  background: #11141a;
  border-radius: 3px;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-family: 'Roboto Mono', monospace;
  color: #c5cad3;
}
.bs-fl-ord-stl { color: #74b9ff; font-weight: 700; margin-bottom: 2px; }
.bs-fl-ord-stl strong { color: #fab1a0; margin-right: 3px; }
.bs-fl-ord-formula { color: #97a0ad; font-size: 10px; word-break: break-all; line-height: 1.4; }
.bs-fl-ord-srows { padding-left: 4px; margin-top: 2px; color: #97a0ad; }
.bs-fl-ord-srow  { color: #00cec9; font-size: 10px; }
.bs-fl-ord-sub   { color: #a29bfe; font-size: 9.5px; line-height: 1.4; }

/* --- 永続バフ表記 + ターン終了スナップショットの効果並び --- */
.bs-fl-tag-perm,
.bs-fl-snap-buff.bs-fl-snap-buff-perm,
.bs-fl-tag.bs-fl-tag-perm {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 0 6px rgba(0,206,201,0.4);
}
.bs-fl-snap-buff-debuff {
  color: #ff4d6d !important;
  font-weight: 800 !important;
  background: rgba(231,76,60,0.15) !important;
  border: 1px solid rgba(255,77,109,0.35);
}


/* ============================================================
 * 簡易速度シミュレーター (Tab 4) — 2026-06 追加
 * ============================================================ */
.bs-spd-note {
  font-size: .8rem; color: #9a7080; line-height: 1.6;
  background: #fff6fa; border: 1px dashed #ffc2d8; border-radius: 10px;
  padding: 10px 12px; margin: 0 0 14px;
}
.bs-spd-unit-card {
  background: #fff; border: 1px solid #ffe1ed; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.bs-spd-unit-h {
  font-size: .9rem; font-weight: 800; color: #e0599a; margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.bs-spd-unit-h i { color: #fd9bc0; }
.bs-spd-add-btn { width: 100%; }
.bs-spd-unit-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.bs-spd-unit-icon {
  width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
  border: 2px solid #ffd1e0; flex-shrink: 0; background: #fff5f8;
}
.bs-spd-unit-icon-sub { width: 40px; height: 40px; }
.bs-spd-unit-name { flex: 1; font-weight: 700; font-size: .9rem; color: #5a4a52; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-btn-xs { padding: 4px 9px !important; font-size: .72rem !important; flex-shrink: 0; }
.bs-spd-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bs-spd-stat-cell { display: flex; flex-direction: column; gap: 3px; }
.bs-spd-stat-cell .bs-stat-name { font-size: .72rem; font-weight: 800; color: #b06a8a; text-align: center; }
.bs-spd-skill-wrap { margin-top: 14px; border-top: 1px dashed #ffd9e6; padding-top: 10px; }
.bs-spd-selected { margin-bottom: 8px; }
.bs-spd-picker-list { max-height: 220px; overflow-y: auto; border: 1px solid #ffe1ed; border-radius: 8px; }
.bs-spd-calc-btn { width: 100%; font-size: 1rem; padding: 12px !important; margin-bottom: 16px; }

.bs-spd-rank-card {
  background: #fff; border: 1px solid #ffe1ed; border-radius: 12px; padding: 12px 14px;
}
.bs-spd-rank-empty { color: #999; font-size: .85rem; padding: 16px; text-align: center; }
.bs-spd-myrank {
  background: linear-gradient(135deg,#fff0f5,#fff8ec); border: 1px solid #ffc2d8;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: .9rem; color: #5a4a52;
}
.bs-spd-myrank b { color: #e0599a; font-size: 1.05rem; }
.bs-spd-myrank-pos { color: #e0599a; }
.bs-spd-rank-list {
  max-height: 460px; overflow-y: auto;
  border: 1px solid #ffe1ed; border-radius: 10px;
}
.bs-spd-rank-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid #fbe7ef;
}
.bs-spd-rank-row:last-child { border-bottom: none; }
.bs-spd-rank-row:nth-child(odd) { background: #fffafd; }
.bs-spd-rank-row.is-user {
  background: linear-gradient(135deg,#fff2c9,#ffe3ef);
  outline: 2px solid #ffb43d; outline-offset: -2px;
}
.bs-spd-rank-no {
  width: 30px; flex-shrink: 0; text-align: center;
  font-weight: 800; font-size: .95rem; color: #c98fae;
}
.bs-spd-rank-row:nth-child(1) .bs-spd-rank-no,
.bs-spd-rank-row:nth-child(2) .bs-spd-rank-no,
.bs-spd-rank-row:nth-child(3) .bs-spd-rank-no { color: #e0599a; }
.bs-spd-rank-icons {
  position: relative; width: 60px; flex-shrink: 0;
  display: flex; align-items: center;
}
.bs-spd-rank-main {
  width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
  border: 2px solid #ffd1e0; background: #fff5f8; z-index: 2;
}
.bs-spd-rank-sub {
  width: 28px; height: 28px; border-radius: 7px; object-fit: cover;
  border: 2px solid #d8e6ff; background: #f5f8ff; margin-left: -10px; align-self: flex-end; z-index: 1;
}
.bs-spd-rank-info { flex: 1; min-width: 0; }
.bs-spd-rank-form {
  font-size: .82rem; color: #5a4a52; font-weight: 700;
  line-height: 1.3; word-break: break-word; overflow-wrap: anywhere;
}
.bs-spd-rank-formsub {
  font-size: .66rem; color: #9a7a88; font-weight: 500;
  line-height: 1.3; margin-top: 1px; word-break: break-word; overflow-wrap: anywhere;
}
.bs-spd-rank-row.is-user .bs-spd-rank-form { color: #b8540a; font-weight: 800; }
.bs-spd-rank-val {
  flex-shrink: 0; font-weight: 800; font-size: 1rem; color: #e0599a;
  font-variant-numeric: tabular-nums;
}

/* 簡易速度: サブキャラ注意書き */
.bs-spd-subnote {
  font-size: .72rem;
  color: #b06a8a;
  margin: -4px 0 10px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .bs-initcalc-foot-line, .bs-initcalc-foot-note { font-size: 11px; line-height: 1.45; }
  .bs-spd-rank-formsub { font-size: 0.75rem; }
}

/* ★ 2026-08-15: 敵編成の行を [敵編成] [みんなが登録した編成] [コンディション] の3列に。
   横に長すぎる1本のプルダウンを半分ずつに分割して選びやすくする。 */
/* ★ 2026-08-15: 敵編成の行はグリッドで組む。
   広い画面 … [敵編成][みんなが登録した編成][コンディション] の3列
   狭い画面 … 1行目=[敵編成][コンディション]（自分の編成と同じ形にして統一感を出す）
              2行目=[みんなが登録した編成] を横いっぱい
   以前はラベルを display:none にしていたため、スマホで見出しが消え3行に割れていた。 */
.bs-enemy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 110px;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  margin-bottom: 12px;
}
.bs-enemy-grid .bs-sim-label { white-space: nowrap; overflow: hidden; min-width: 0; }
.bs-enemy-grid .bs-sim-select { min-width: 0; width: 100%; }
.bs-enemy-grid .ge-l1 { grid-area: 1 / 1; }
.bs-enemy-grid .ge-l2 { grid-area: 1 / 2; }
.bs-enemy-grid .ge-l3 { grid-area: 1 / 3; }
.bs-enemy-grid .ge-s1 { grid-area: 2 / 1; }
.bs-enemy-grid .ge-s2 { grid-area: 2 / 2; }
.bs-enemy-grid .ge-s3 { grid-area: 2 / 3; }
.bs-enemy-grid .bs-sim-select:disabled { background: #faf8fc; color: #b3a9c4; cursor: not-allowed; }

@media (max-width: 640px) {
  .bs-enemy-grid { grid-template-columns: 1fr 110px; row-gap: 4px; }
  .bs-enemy-grid .ge-l1 { grid-area: 1 / 1; }
  .bs-enemy-grid .ge-l3 { grid-area: 1 / 2; }
  .bs-enemy-grid .ge-s1 { grid-area: 2 / 1; }
  .bs-enemy-grid .ge-s3 { grid-area: 2 / 2; }
  .bs-enemy-grid .ge-l2 { grid-area: 3 / 1 / auto / span 2; margin-top: 6px; }
  .bs-enemy-grid .ge-s2 { grid-area: 4 / 1 / auto / span 2; }
}
@media (max-width: 480px) {
  .bs-enemy-grid { grid-template-columns: 1fr 92px; }
  .bs-enemy-grid .ge-l3 { font-size: 11px; }
  .bs-enemy-grid .ge-l3 i { display: none; }
  .bs-enemy-grid .ge-s3 { padding-left: 8px; padding-right: 4px; }
}
}