/* ============================================================
   バトルモード 共通CSS
   ============================================================ */

/* ---- ページ全体（フッターは base.css で非表示） ---- */
body.battle-game-page {
  overflow: hidden;
}

/* ============================================================
   バトルモード HOME
   ============================================================ */
.bm-home-wrapper {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-height, 78px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', 'Hiragino Sans', sans-serif;
}

/* ---- 画面上部ヘッダー ---- */
.bm-top-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 10px 24px;
  background: linear-gradient(90deg, rgba(15,12,35,0.92) 0%, rgba(25,20,50,0.92) 20%, rgba(25,20,50,0.92) 80%, rgba(15,12,35,0.92) 100%);
  border-bottom: 3px solid rgba(200,170,80,0.6);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 0 rgba(240,210,120,0.25) inset;
}
.bm-top-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.65em;
  font-weight: 700;
  color: #f0d870;
  letter-spacing: 0.12em;
  text-shadow: 0 0 16px rgba(240,200,80,0.8), 0 2px 4px rgba(0,0,0,0.5);
}
.bm-top-header__resources {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.bm-resource {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(200,170,80,0.5);
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bm-resource--coin { color: #f0d870; }
.bm-resource--gem { color: #a0d8ff; }
.bm-resource-icon { font-size: 1.1em; }

/* ---- メインコンテンツ行（profile-wrapper相当）---- */
.bm-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  width: 94%;
  margin: 0 auto;
  gap: 2%;
  padding: 1.5rem 0 2rem;
  position: relative;
  z-index: 10;
  min-height: 0;
}

.bm-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
  z-index: 0;
}

/* ---- 左サイドバー ---- */
.bm-sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 24%;
  flex-shrink: 0;
}
.bm-sidebar-left__cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bm-sidebar-left__cards .bm-info-card {
  flex: none;
}

/* 左サイド・右サイド 共通ボタンベース（BATTLE / STORY / EVENTS / FRIENDS / GIFT / 設定 で統一） */
.bm-btn-base {
  width: 100%;
  padding: 1rem 1.2rem;
  background: rgba(8, 19, 30, 0.9);
  border: 2px solid rgba(140, 120, 80, 0.5);
  border-radius: 14px;
  color: #e8d8a0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.bm-btn-base:hover {
  background: rgba(16, 40, 61, 0.95);
  transform: translateY(-2px);
  border-color: rgba(200, 170, 80, 0.65);
}
.bm-btn-base:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.bm-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  text-align: left;
}
.bm-nav-btn .bm-nav-label,
.bm-nav-btn .bm-nav-sub {
  display: block;
  line-height: 1.3;
  white-space: nowrap;
}
.bm-nav-btn.bm-btn-base:hover {
  transform: translateY(-2px);
}
.bm-nav-btn--active {
  border-color: rgba(220, 190, 100, 0.75);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 210, 80, 0.25);
  background: linear-gradient(135deg, rgba(40, 35, 20, 0.95), rgba(25, 22, 12, 0.95));
}
.bm-nav-btn--active:hover {
  background: linear-gradient(135deg, rgba(55, 48, 28, 0.95), rgba(35, 30, 18, 0.95));
}
/* 左ボタン：1行目英語・2行目日本語の2行表示、ボタンに色を少し付ける */
.bm-nav-label {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0e0a8;
}
.bm-nav-sub {
  font-size: 0.9rem;
  color: rgba(200, 200, 200, 0.9);
}
/* BATTLE：ゴールド系のアクセント */
.bm-nav-btn#btnBattle.bm-btn-base {
  background: linear-gradient(135deg, rgba(35, 30, 18, 0.95), rgba(22, 19, 12, 0.95));
  border-color: rgba(200, 170, 80, 0.55);
}
.bm-nav-btn#btnBattle.bm-btn-base:hover {
  background: linear-gradient(135deg, rgba(48, 40, 22, 0.95), rgba(30, 26, 14, 0.95));
}
/* STORY：青系のアクセント */
.bm-nav-btn#btnStory.bm-btn-base {
  background: linear-gradient(135deg, rgba(18, 28, 40, 0.95), rgba(12, 20, 30, 0.95));
  border-color: rgba(80, 130, 180, 0.5);
}
.bm-nav-btn#btnStory.bm-btn-base:hover {
  background: linear-gradient(135deg, rgba(25, 38, 55, 0.95), rgba(18, 28, 42, 0.95));
}

/* ---- 中央エリア（profile_home の main-profile 相当）---- */
.bm-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

/* 古びた城風コンテナ（画像なし・コードで表現・下に少し伸ばしてレベルバーをボックス内に収める） */
.bm-castle-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4em 1.8em 1.5em;
  box-sizing: border-box;
  /* 石積み・古い城の雰囲気 */
  background: linear-gradient(165deg,
    rgba(55,50,45,0.92) 0%,
    rgba(40,36,32,0.95) 30%,
    rgba(35,31,28,0.96) 50%,
    rgba(38,34,30,0.95) 70%,
    rgba(48,43,38,0.92) 100%);
  border: 4px solid rgba(70,60,50,0.9);
  border-radius: 12px;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.4),
    inset 0 2px 0 rgba(120,100,80,0.25),
    0 0 0 1px rgba(90,75,60,0.8),
    0 8px 24px rgba(0,0,0,0.5),
    0 4px 0 rgba(50,42,35,0.9);
}
.bm-castle-container::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(100,85,70,0.4);
  border-radius: 8px;
  pointer-events: none;
}
/* 上部の空間に表示するニックネーム（ボタンと同じフォント） */
.bm-avatar-container__nickname {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e8d8a0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 12px rgba(240,200,80,0.4);
  margin-bottom: 0.6em;
  flex-shrink: 0;
  font-family: inherit;
}

/* 中央: キャラ表示（レベルバーを最下部に配置） */
.bm-avatar-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}
/* アバター枠：profile_home の選択中アバターと同一（レアリティに応じた枠色・背景） */
.bm-avatar-display .bm-avatar-frame.bm-avatar-frame--profile-style.current-avatar-frame {
  width: 260px;
  height: 260px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  /* デフォルトは R 相当（レアリティ別で上書き） */
  border: 4px solid #6b6b6b;
  box-shadow: none;
}
.bm-avatar-display .bm-avatar-frame.current-avatar-frame--r {
  background-image: image-set(url('../avatar/R_background.webp') type('image/webp'), url('../avatar/R_background.png') type('image/png'));
  border: 4px solid #6b6b6b;
  box-shadow: none;
}
.bm-avatar-display .bm-avatar-frame.current-avatar-frame--sr {
  background-image: image-set(url('../avatar/SR_background.webp') type('image/webp'), url('../avatar/SR_background.png') type('image/png'));
  border: 4px solid #c62828;
  box-shadow: none;
}
.bm-avatar-display .bm-avatar-frame.current-avatar-frame--ssr {
  background-image: image-set(url('../avatar/SSR_background.webp') type('image/webp'), url('../avatar/SSR_background.png') type('image/png'));
  border: 4px solid #f4b400;
  box-shadow: 0 0 12px rgba(244, 180, 0, 0.7), 0 0 24px rgba(255, 215, 0, 0.4);
}
.bm-avatar-display .bm-avatar-frame .profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  background: transparent;
}
.bm-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* レベル・EXPバー（アバターとの間に隙間を確保） */
.bm-level-bar-container {
  width: 260px;
  margin-top: 14px;
  margin-bottom: 0;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(30,28,45,0.9), rgba(15,12,28,0.95));
  border: 2px solid rgba(200,170,80,0.45);
  border-radius: 10px 10px 0 0;
  padding: 8px 12px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 1px 0 rgba(220,200,120,0.15) inset;
}
.bm-level-label {
  font-size: 0.94em;
  color: #e8d8a0;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bm-level-arrow {
  color: #f0d870;
}
.bm-exp-bar-track {
  height: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(200,170,80,0.3);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.bm-exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(46,204,113,0.4);
}
.bm-stats-row {
  display: flex;
  gap: 10px;
  font-size: 0.88em;
  color: #c8d8ff;
}
.bm-avatar-skill-badge {
  margin-top: 4px;
  font-size: 0.85em;
  color: #f0d870;
}

/* 下部バー: ニュース（左）・CONFIRM（中央）・SHARE（右） */
.bm-bottom-bar {
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 0;
  flex-shrink: 0;
}
.bm-news-panel {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(200,170,80,0.35);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.bm-news-header {
  font-size: 0.82em;
  color: #f0d870;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.bm-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  color: #c0c8e0;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.bm-news-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-confirm-btn {
  background: linear-gradient(135deg, rgba(60,50,30,0.9), rgba(40,35,20,0.9));
  border: 1px solid rgba(200,170,80,0.55);
  border-radius: 8px;
  color: #e8d8a0;
  font-size: 0.9em;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 1px 0 rgba(255,220,120,0.15) inset;
}
.bm-confirm-btn:hover {
  background: linear-gradient(135deg, rgba(80,65,40,0.95), rgba(55,48,28,0.95));
  border-color: rgba(255,210,80,0.75);
}
.bm-share-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.bm-share-btn {
  background: linear-gradient(135deg, rgba(60,50,30,0.9), rgba(40,35,20,0.9));
  border: 1px solid rgba(200,170,80,0.55);
  border-radius: 8px;
  color: #e8d8a0;
  font-size: 0.85em;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 1px 0 rgba(255,220,120,0.15) inset;
}
.bm-share-btn:hover {
  background: linear-gradient(135deg, rgba(80,65,40,0.95), rgba(55,48,28,0.95));
  border-color: rgba(255,210,80,0.75);
}
.bm-share-btn small {
  display: block;
  font-size: 0.85em;
  opacity: 0.9;
}

/* ---- 右サイドバー：設定・プロフィールに戻る ---- */
.bm-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 240px;
  flex-shrink: 0;
}
.bm-sidebar-right__btn {
  display: block;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
.bm-sidebar-right__btn--settings {
  margin-bottom: 0;
}
.bm-coin-notif, .bm-gem-notif {
  font-size: 0.8em;
  color: #f0d870;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bm-gem-notif {
  color: #80d0ff;
}
/* 左サイド: 情報カード（1行目英語・2行目日本語の2行表示、ボタンに色を少し付ける） */
.bm-info-card {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem;
  text-align: left;
}
.bm-info-card .bm-info-card__header,
.bm-info-card .bm-info-card__sub {
  display: block;
  line-height: 1.3;
}
.bm-info-card--event {
  border-color: rgba(80, 140, 100, 0.55);
  background: linear-gradient(135deg, rgba(18, 35, 28, 0.95), rgba(12, 28, 22, 0.95));
}
.bm-info-card--friends {
  border-color: rgba(70, 120, 180, 0.55);
  background: linear-gradient(135deg, rgba(18, 28, 42, 0.95), rgba(12, 22, 35, 0.95));
}

/* 未実装ボタン：グレーカバー */
.bm-coming-soon-wrap {
  position: relative;
}
.bm-coming-soon-wrap .bm-info-card {
  pointer-events: none;
  opacity: 0.55;
}
.bm-coming-soon-badge {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 10px;
  pointer-events: auto;
}
.bm-coming-soon-wrap .bm-nav-btn {
  pointer-events: none;
  opacity: 0.6;
}
.bm-info-card--gift {
  border-color: rgba(200, 160, 80, 0.55);
  background: linear-gradient(135deg, rgba(40, 32, 18, 0.95), rgba(28, 24, 12, 0.95));
}
.bm-info-card--gift:hover {
  background: linear-gradient(135deg, rgba(52, 42, 25, 0.95), rgba(36, 30, 18, 0.95));
}
.bm-info-card__header {
  font-size: 1rem;
  font-weight: 700;
  color: #e8d8a0;
  letter-spacing: 0.04em;
}
.bm-info-card__sub {
  font-size: 0.8rem;
  color: rgba(200, 200, 200, 0.9);
  margin-top: 0;
}
.bm-gift-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 2;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* プロフィールに戻る：目立つデザイン（ゴールド系・強調） */
.bm-back-btn {
  margin-top: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1520;
  background: linear-gradient(180deg, #f0d870 0%, #d4a84b 50%, #c49430 100%);
  border: 2px solid rgba(255, 220, 120, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 20px rgba(240, 200, 80, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.bm-back-btn:hover {
  color: #1a1520;
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 28px rgba(240, 200, 80, 0.35);
}
.bm-back-btn:active {
  transform: translateY(0);
}

/* ---- ステージ選択モーダル ---- */
.bm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.bm-modal-overlay[hidden] {
  display: none !important;
}
.bm-modal {
  background: linear-gradient(160deg, rgba(15,10,40,0.97), rgba(5,5,20,0.97));
  border: 1px solid rgba(200,170,80,0.55);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 760px;
  width: 94%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 0 60px rgba(0,0,0,0.8), 0 0 30px rgba(200,170,80,0.12);
}
.bm-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #a0a8c0;
  font-size: 1.4em;
  cursor: pointer;
  padding: 4px 8px;
}
.bm-modal-close:hover { color: #fff; }
.bm-modal-title {
  text-align: center;
  font-size: 1.55em;
  color: #f0d870;
  margin: 0 0 20px;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(240,200,80,0.5);
}
.bm-chapter-block {
  margin-bottom: 16px;
}
.bm-chapter-header {
  font-size: 0.85em;
  font-weight: 700;
  color: #c0d0ff;
  border-bottom: 1px solid rgba(150,150,255,0.25);
  padding-bottom: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.bm-stage-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bm-stage-btn {
  background: linear-gradient(135deg, rgba(30,20,60,0.85), rgba(15,10,40,0.85));
  border: 1px solid rgba(150,130,80,0.45);
  border-radius: 8px;
  color: #e0e8ff;
  cursor: pointer;
  padding: 8px 14px;
  text-align: left;
  display: grid;
  grid-template-columns: 48px 1fr 1fr auto;
  gap: 0 12px;
  align-items: center;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  font-family: inherit;
  position: relative;
}
.bm-stage-btn:hover:not([disabled]) {
  background: linear-gradient(135deg, rgba(50,35,100,0.9), rgba(25,15,65,0.9));
  border-color: rgba(200,170,80,0.65);
  transform: translateX(3px);
}
.bm-stage-btn--cleared {
  border-color: rgba(80,200,100,0.5);
}
.bm-stage-btn--cleared::after {
  content: '✓ クリア';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #60e080;
  font-size: 0.75em;
  font-weight: 700;
}
.bm-stage-btn--locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.bm-stage-num {
  font-size: 1.1em;
  font-weight: 700;
  color: #f0d870;
}
.bm-stage-title {
  font-size: 0.85em;
  font-weight: 600;
}
.bm-stage-enemy {
  font-size: 0.75em;
  color: #a0b0d0;
}
.bm-stage-reward {
  font-size: 0.72em;
  color: #c0d8a0;
  white-space: nowrap;
}
.bm-stage-lock-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
}

/* ============================================================
   バトルゲーム画面
   ============================================================ */

/* バトルモードのサイトヘッダーをゲームモードと同じスタイルに */
.battle-home-page .site-header,
.battle-game-page .site-header {
  background: linear-gradient(90deg, rgba(8, 12, 30, 0.97) 0%, rgba(14, 18, 42, 0.95) 60%, rgba(8, 12, 30, 0.97) 100%);
  border-bottom: 1px solid rgba(180, 150, 90, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(220, 190, 120, 0.15) inset;
}
.battle-home-page .top-bar,
.battle-game-page .top-bar {
  display: flex;
  align-items: center;
}
.battle-home-page .nav-bar,
.battle-game-page .nav-bar {
  gap: 0;
}
.battle-home-page .nav-bar a,
.battle-game-page .nav-bar a {
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: rgba(220, 200, 160, 0.9);
  position: relative;
}
.battle-home-page .nav-bar a:hover,
.battle-game-page .nav-bar a:hover {
  color: #ffd87a;
  background-color: rgba(180, 150, 90, 0.12);
}
.battle-home-page .nav-bar a:not(:last-child)::after,
.battle-game-page .nav-bar a:not(:last-child)::after {
  content: '/';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(180, 150, 90, 0.5);
  font-weight: 300;
  pointer-events: none;
}

/* バトルゲーム画面: ヘッダー分の高さを考慮 */
.battle-game-page .bg-arena {
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
}
.battle-game-page .battle-wrapper {
  min-height: calc(100vh - var(--header-height));
}

.bg-arena {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45) saturate(1.2);
  z-index: 0;
}

.battle-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  padding: 10px 14px 24px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- ヘッダー ---- */
.battle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(200,170,80,0.4);
  border-radius: 8px;
}
.battle-back-btn {
  color: #a0b0d0;
  text-decoration: none;
  font-size: 0.82em;
  flex-shrink: 0;
  transition: color 0.2s;
}
.battle-back-btn:hover { color: #d0e0ff; }
.battle-stage-name {
  font-size: 1.1em;
  font-weight: 700;
  color: #f0d870;
  flex: 1;
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(240,200,80,0.6);
}
.battle-enemy-special {
  font-size: 0.72em;
  color: #ff9060;
  background: rgba(200,80,30,0.25);
  border: 1px solid rgba(200,80,30,0.4);
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
}

/* ---- メイン戦闘エリア ---- */
.battle-arena {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 14px;
  align-items: start;
  flex: 1;
}

/* ---- バトルカード ---- */
.battle-card {
  background: linear-gradient(160deg, rgba(10,8,30,0.88), rgba(5,3,18,0.9));
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.battle-card--player {
  border: 2px solid rgba(80,160,255,0.6);
  box-shadow: 0 0 20px rgba(80,160,255,0.15), inset 0 0 12px rgba(0,0,60,0.3);
}
.battle-card--enemy {
  border: 2px solid rgba(255,80,80,0.6);
  box-shadow: 0 0 20px rgba(255,80,80,0.15), inset 0 0 12px rgba(60,0,0,0.3);
}

.battle-card__header {
  text-align: center;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c0d0ff;
  border-bottom: 1px solid rgba(200,170,80,0.3);
  padding-bottom: 5px;
}
.battle-card--enemy .battle-card__header {
  color: #ffc0c0;
}

.battle-card__info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85em;
}
.battle-card__lv {
  color: #a0c0ff;
  font-weight: 600;
}
.battle-hp-hearts {
  color: #ff6070;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 2px;
}
.battle-rarity-badge {
  font-size: 0.82em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.battle-rarity-badge--r { background: #555; color: #ccc; }
.battle-rarity-badge--sr { background: #2255aa; color: #90c0ff; }
.battle-rarity-badge--ssr { background: #705020; color: #ffd060; }

.battle-card__avatar-frame {
  width: 100%;
  aspect-ratio: 1/1.1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  position: relative;
}
.battle-card__avatar-frame--enemy {
  background: rgba(30,5,5,0.4);
}
.battle-player-frame--r {
  background-image: image-set(url('../avatar/R_background.webp') type('image/webp'), url('../avatar/R_background.png') type('image/png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #6b6b6b;
}
.battle-player-frame--sr {
  background-image: image-set(url('../avatar/SR_background.webp') type('image/webp'), url('../avatar/SR_background.png') type('image/png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #c62828;
}
.battle-player-frame--ssr {
  background-image: image-set(url('../avatar/SSR_background.webp') type('image/webp'), url('../avatar/SSR_background.png') type('image/png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #f4b400;
  box-shadow: 0 0 10px rgba(244,180,0,0.6);
}
.battle-avatar-img,
.battle-enemy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.15s ease;
}

/* ---- HPバー ---- */
.battle-card__hp-label {
  font-size: 0.8em;
  color: #a0a8c0;
  margin-top: 4px;
}
.battle-hp-bar {
  height: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.battle-hp-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
.battle-hp-fill--player {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
}
.battle-hp-fill--enemy {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
}
.battle-card__hp-num {
  font-size: 0.82em;
  color: #c0c8e0;
  text-align: right;
}
.battle-card__atk {
  font-size: 0.82em;
  color: #f0d870;
}
.battle-card__special {
  font-size: 0.76em;
  color: #ff9060;
  background: rgba(200,80,30,0.2);
  border-radius: 4px;
  padding: 2px 5px;
  text-align: center;
  margin-top: 2px;
}

/* ---- 撃破/敗北アニメーション（振動しながら下に消える）---- */
@keyframes battle-defeat-shake {
  0%, 100% { transform: translateX(0) translateY(0); }
  10% { transform: translateX(-4px) translateY(2px); }
  20% { transform: translateX(4px) translateY(4px); }
  30% { transform: translateX(-3px) translateY(8px); }
  40% { transform: translateX(3px) translateY(14px); }
  50% { transform: translateX(-2px) translateY(22px); }
  60% { transform: translateX(2px) translateY(32px); }
  70% { transform: translateX(-1px) translateY(44px); }
  80% { transform: translateX(1px) translateY(58px); }
  90% { transform: translateX(0) translateY(74px); }
}
@keyframes battle-defeat-fade {
  0% { opacity: 1; }
  50% { opacity: 0.85; }
  100% { opacity: 0; }
}
.battle-card--enemy-defeat {
  animation: battle-defeat-shake 1.1s ease-out forwards, battle-defeat-fade 1.1s ease-out forwards;
  pointer-events: none;
}
.battle-card--player-defeat {
  animation: battle-defeat-shake 1.1s ease-out forwards, battle-defeat-fade 1.1s ease-out forwards;
  pointer-events: none;
}

/* ---- バトル終了オーバーレイ（VICTORY! / LOSE + スペースキー案内）---- */
.battle-end-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
}
.battle-end-overlay[hidden] {
  display: none !important;
}
.battle-end-overlay__content {
  text-align: center;
}
.battle-end-overlay__content[hidden] {
  display: none !important;
}
.battle-end-overlay__content--victory .battle-end-overlay__title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  color: #f0d870;
  text-shadow: 0 0 30px rgba(240, 200, 80, 0.9), 0 0 60px rgba(240, 180, 40, 0.5), 0 4px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  animation: battle-victory-pop 0.5s ease-out;
}
@keyframes battle-victory-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.battle-end-overlay__content--victory .battle-end-overlay__hint {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.battle-end-overlay__content--lose .battle-end-overlay__title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  color: #c0a0a0;
  text-shadow: 0 0 20px rgba(120, 80, 80, 0.6), 0 2px 6px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.battle-end-overlay__content--lose .battle-end-overlay__hint--subtle {
  font-size: 0.9rem;
  color: rgba(200, 180, 180, 0.55);
}

/* ---- スキルボタン ---- */
.battle-skill-btn {
  margin-top: 4px;
  background: linear-gradient(135deg, rgba(80,40,120,0.7), rgba(50,20,90,0.7));
  border: 1px solid rgba(150,100,220,0.5);
  border-radius: 6px;
  color: #d0b0ff;
  font-size: 0.72em;
  font-family: inherit;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s, opacity 0.2s;
}
.battle-skill-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.battle-skill-btn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(100,60,160,0.85), rgba(70,35,120,0.85));
  border-color: rgba(180,130,255,0.7);
}
.battle-skill-btn.skill-active {
  background: linear-gradient(135deg, rgba(150,80,220,0.9), rgba(100,50,180,0.9));
  border-color: rgba(220,170,255,0.8);
  box-shadow: 0 0 12px rgba(180,100,255,0.4);
}
.battle-skill-cd {
  color: #a080d0;
  font-size: 0.9em;
}

/* ---- 中央列 ---- */
.battle-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.battle-vs-text {
  font-size: 2.5em;
  font-weight: 900;
  color: #f0d870;
  text-shadow: 0 0 20px rgba(240,200,80,0.8), 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.1em;
  line-height: 1;
}

/* タイマーバー */
.battle-timer-wrap {
  width: 100%;
  max-width: 260px;
}
.battle-timer-label {
  font-size: 0.85em;
  font-weight: 700;
  color: #e8d8a0;
  text-align: center;
  margin-bottom: 3px;
}
.battle-timer-track {
  height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(200,170,80,0.35);
}
.battle-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #e74c3c, #f39c12);
  border-radius: 5px;
  transition: width 0.5s linear;
}

/* コンボ表示 */
.battle-combo-display {
  font-size: 1.1em;
  font-weight: 700;
  color: #f0d870;
  text-shadow: 0 0 10px rgba(240,200,80,0.7);
  animation: comboAppear 0.2s ease;
}
@keyframes comboAppear {
  from { transform: scale(1.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* タイピングエリア */
.battle-typing-area {
  width: 100%;
  max-width: 300px;
  background: rgba(0,0,0,0.72);
  border: 2px solid rgba(200,170,80,0.55);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
}
.battle-typing-label {
  font-size: 0.8em;
  color: #a0b0d0;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

/* ---- 単語カード (typing-word-card風) ---- */
.battle-word-card {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
}
.battle-word-card__jp {
  font-size: 1.9rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
/* 日本語（短文）: 表示を小さくし改行しない */
.battle-word-card--jp-short .battle-word-card__jp {
  font-size: 1.35rem;
  white-space: nowrap;
}
.battle-word-card__romaji {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(200, 220, 255, 0.9);
  word-break: break-all;
  line-height: 1.3;
}
.battle-word-card__romaji .typed-letter {
  color: #f0d870;
}

.battle-word-display {
  font-size: 1.3em;
  font-family: 'Consolas', 'Courier New', monospace;
  min-height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  word-break: break-all;
  padding: 4px 0;
}
.battle-typed-part {
  color: #f0d870;
}
.battle-remain-part {
  color: #e0e8ff;
}
.battle-input {
  width: 100%;
  margin-top: 6px;
  background: rgba(30,30,60,0.6);
  border: 1px solid rgba(150,130,200,0.4);
  border-radius: 6px;
  color: transparent;
  caret-color: #f0d870;
  font-size: 1em;
  padding: 4px 8px;
  font-family: 'Consolas', monospace;
  outline: none;
}
.battle-input:focus {
  border-color: rgba(200,170,80,0.65);
  box-shadow: 0 0 8px rgba(200,170,80,0.2);
}
.battle-input.input-error {
  border-color: rgba(255,80,60,0.7);
  box-shadow: 0 0 8px rgba(255,80,60,0.3);
  animation: inputShake 0.15s ease;
}
@keyframes inputShake {
  0%   { transform: translateX(0); }
  33%  { transform: translateX(-4px); }
  66%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* バトルゲーム画面では入力枠を非表示（キー入力は hidden の input で受け付ける） */
.battle-game-page .battle-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

/* ヒットバナー */
.battle-hit-banner {
  font-size: 1.1em;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 4px;
  animation: hitBannerAnim 0.6s ease forwards;
}
@keyframes hitBannerAnim {
  0% { transform: scale(1.4); opacity: 0; }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}
.battle-hit-banner--crit {
  color: #ff6040;
  text-shadow: 0 0 15px rgba(255,100,50,0.9);
  background: rgba(200,50,10,0.3);
  border: 1px solid rgba(255,100,50,0.5);
}
.battle-hit-banner--perfect {
  color: #f0d870;
  text-shadow: 0 0 15px rgba(240,200,80,0.9);
  background: rgba(180,140,20,0.3);
  border: 1px solid rgba(240,200,80,0.5);
}
.battle-hit-banner--hit {
  color: #80e0ff;
  background: rgba(20,80,180,0.25);
}

/* ---- ダメージ数字エフェクト ---- */
.dmg-float {
  position: fixed;
  font-weight: 900;
  pointer-events: none;
  z-index: 200;
  animation: dmgFloat 1s ease forwards;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
  line-height: 1;
}
.dmg-float--normal { color: #80e0ff; font-size: 1.4em; }
.dmg-float--crit   { color: #ff6040; font-size: 2em; }
.dmg-float--perfect { color: #f0d870; font-size: 1.6em; }
.dmg-float--enemy  { color: #ff8060; font-size: 1.2em; }

@keyframes dmgFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(-20px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-55px) scale(0.8); }
}

/* ---- 攻撃エフェクト ---- */
.battle-attack-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 8px;
  opacity: 0;
}
.battle-attack-effect.flash-player {
  background: radial-gradient(circle, rgba(150,200,255,0.6), transparent 70%);
  animation: flashPlayer 0.3s ease;
}
.battle-attack-effect.flash-enemy {
  background: radial-gradient(circle, rgba(255,120,60,0.55), transparent 70%);
  animation: flashEnemy 0.35s ease;
}
@keyframes flashPlayer {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes flashEnemy {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* プレイヤーアバター攻撃スライド */
@keyframes playerAttack {
  0%   { transform: translateX(0) scale(1); }
  30%  { transform: translateX(45px) scale(1.05); }
  70%  { transform: translateX(45px) scale(1.05); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes enemyHit {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-12px); }
  40%  { transform: translateX(10px); }
  60%  { transform: translateX(-8px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
@keyframes enemyAttack {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-40px) scale(1.05); }
  70%  { transform: translateX(-40px) scale(1.05); }
  100% { transform: translateX(0); }
}
@keyframes playerHit {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(10px); }
  50%  { transform: translateX(-8px); }
  75%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.player-attacking .battle-avatar-img { animation: playerAttack 0.5s ease forwards; }
.enemy-hit .battle-enemy-img         { animation: enemyHit 0.35s ease forwards; }
.enemy-attacking .battle-enemy-img   { animation: enemyAttack 0.5s ease forwards; }
.player-hit .battle-avatar-img       { animation: playerHit 0.35s ease forwards; }

/* スラッシュエフェクトライン */
.slash-effect {
  position: fixed;
  pointer-events: none;
  z-index: 150;
  width: 140px;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(150,200,255,0.9), transparent);
  border-radius: 2px;
  animation: slashAnim 0.35s ease forwards;
  transform-origin: left center;
}
@keyframes slashAnim {
  0%   { opacity: 0; transform: scaleX(0); }
  25%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1) translateX(20px); }
}

/* ---- カウントダウン ---- */
.battle-countdown {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  z-index: 300;
}
.battle-countdown[hidden] {
  display: none !important;
}
.battle-countdown__num {
  font-size: 8em;
  font-weight: 900;
  color: #f0d870;
  text-shadow: 0 0 40px rgba(240,200,80,0.8), 0 0 80px rgba(240,150,50,0.5);
  animation: countPulse 1s ease-in-out;
}
@keyframes countPulse {
  0%   { transform: scale(1.6); opacity: 0; }
  30%  { transform: scale(1); opacity: 1; }
  80%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* ---- バトル結果オーバーレイ ---- */
.battle-result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
/* [hidden] のときは非表示（display:flex が [hidden] の display:none を上書きするため明示） */
.battle-result-overlay[hidden] {
  display: none !important;
}
.battle-result-box {
  background: linear-gradient(160deg, rgba(15,10,40,0.98), rgba(5,3,18,0.98));
  border-radius: 14px;
  padding: 22px 28px;
  width: 90vw;
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: resultAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.battle-result-box--victory {
  border: 2px solid rgba(240,200,80,0.7);
  box-shadow: 0 0 60px rgba(240,200,80,0.25);
}
.battle-result-box--defeat {
  border: 2px solid rgba(200,60,40,0.7);
  box-shadow: 0 0 60px rgba(200,60,40,0.2);
}
@keyframes resultAppear {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.battle-result-title {
  font-size: 1.9em;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.battle-result-title--victory {
  color: #f0d870;
  text-shadow: 0 0 20px rgba(240,200,80,0.7);
}
.battle-result-title--defeat {
  color: #ff6050;
  text-shadow: 0 0 20px rgba(200,60,40,0.7);
}
.battle-result-stats {
  font-size: 0.78em;
  color: #c0c8e0;
  line-height: 1.7;
}
.battle-result-rewards {
  font-size: 0.82em;
  color: #f0d870;
  font-weight: 600;
}
.battle-result-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.battle-result-btn {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.82em;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.battle-result-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.battle-result-btn--home {
  background: linear-gradient(135deg, #3a5080, #2a3868);
  color: #c0d0ff;
  border: 1px solid rgba(100,150,255,0.4);
}
.battle-result-btn--retry {
  background: linear-gradient(135deg, #4a8050, #2a6030);
  color: #c0e0c0;
  border: 1px solid rgba(100,200,100,0.4);
}

/* ====  スキル発動バナー  ==== */
.skill-activate-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: 900;
  color: #d0a0ff;
  text-shadow: 0 0 20px rgba(180,100,255,0.9);
  z-index: 400;
  pointer-events: none;
  animation: skillBanner 1.2s ease forwards;
  white-space: nowrap;
}
@keyframes skillBanner {
  0%  { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100%{ opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ============================================================
   profile_home に追加するバトルモードボタン
   ============================================================ */
.battle-mode-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(60,30,100,0.7), rgba(30,10,60,0.7));
  border: 2px solid rgba(150,100,220,0.55);
  border-radius: 10px;
  color: #d0b0ff;
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  letter-spacing: 0.03em;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.battle-mode-nav-btn:hover {
  background: linear-gradient(135deg, rgba(90,50,150,0.85), rgba(50,20,100,0.85));
  border-color: rgba(200,150,255,0.75);
  transform: translateX(3px);
  color: #e8d0ff;
}
.battle-mode-nav-icon {
  font-size: 1.3em;
  flex-shrink: 0;
}
.battle-mode-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}
.battle-mode-nav-label {
  font-size: 1em;
  font-weight: 700;
}
.battle-mode-nav-sub {
  font-size: 0.7em;
  color: #a080d0;
  font-weight: 400;
}

/* ============================================================
   ストーリーモーダル
   ============================================================ */
.bm-story-modal {
  max-width: 800px;
  width: 95%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 1.75rem;
}

.bm-story-chapters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.bm-story-chapter-block {
  border: 1px solid rgba(100, 80, 200, 0.4);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10, 5, 30, 0.5);
}

.bm-story-chapter-header {
  background: linear-gradient(90deg, rgba(60, 40, 140, 0.85), rgba(80, 60, 160, 0.6));
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bm-story-chapter-num {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #b0a0e0;
  font-weight: 600;
  text-transform: uppercase;
}

.bm-story-chapter-stages {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.45rem;
}

.bm-story-stage-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(150, 130, 220, 0.18);
  border-radius: 6px;
  color: #d0c8f0;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, border-color 0.18s;
  font-size: 0.84rem;
  font-family: inherit;
}

.bm-story-stage-btn:hover:not([disabled]) {
  background: rgba(100, 80, 200, 0.18);
  border-color: rgba(150, 130, 220, 0.45);
}

.bm-story-stage-btn--cleared {
  border-color: rgba(46, 204, 113, 0.4) !important;
  background: rgba(46, 204, 113, 0.07) !important;
}

.bm-story-stage-btn--locked {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}

.bm-story-stage-display {
  font-weight: 700;
  color: #a090e0;
  min-width: 2.4rem;
  flex-shrink: 0;
}

.bm-story-stage-title-text {
  flex: 1;
  font-weight: 600;
}

.bm-story-stage-enemy-info {
  font-size: 0.74rem;
  color: #8878b8;
  white-space: nowrap;
}

.bm-story-stage-icons {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  min-width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}

.bm-story-clear-mark {
  color: #2ecc71;
  font-weight: bold;
}

.bm-story-coin-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f5c842;
  background: rgba(245, 200, 66, 0.13);
  border: 1px solid rgba(245, 200, 66, 0.35);
  border-radius: 12px;
  padding: 0.12rem 0.55rem;
  white-space: nowrap;
}

/* ============================================================
   ストーリー前置きオーバーレイ
   ============================================================ */
.bm-story-prologue-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-story-prologue-overlay[hidden] {
  display: none;
}

.bm-story-prologue-box {
  max-width: 620px;
  width: 94%;
  background: linear-gradient(135deg, rgba(12, 8, 35, 0.99), rgba(25, 18, 55, 0.99));
  border: 1px solid rgba(120, 100, 220, 0.5);
  border-radius: 14px;
  padding: 2.75rem 2.25rem 2.25rem;
  text-align: center;
  box-shadow: 0 0 50px rgba(100, 80, 200, 0.35);
  animation: prologueFadeIn 0.45s ease;
}

@keyframes prologueFadeIn {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bm-story-prologue-chapter-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: #9888cc;
  margin-bottom: 0.45rem;
  font-weight: 600;
  text-transform: uppercase;
}

.bm-story-prologue-stage-name {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ede5ff;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(120, 100, 220, 0.3);
}

.bm-story-prologue-text {
  font-size: 0.93rem;
  color: #bdb5d8;
  line-height: 1.9;
  margin-bottom: 2rem;
  white-space: pre-line;
}

.bm-story-prologue-btns {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bm-story-prologue-start-btn {
  padding: 0.72rem 1.8rem;
  background: linear-gradient(90deg, #6a4caf, #8a6ccf);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}

.bm-story-prologue-start-btn:hover {
  background: linear-gradient(90deg, #7a5cbf, #9a7cdf);
  transform: translateY(-1px);
}

.bm-story-prologue-cancel-btn {
  padding: 0.72rem 1.4rem;
  background: transparent;
  color: #8878b8;
  border: 1px solid rgba(120, 100, 220, 0.3);
  border-radius: 8px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}

.bm-story-prologue-cancel-btn:hover {
  border-color: rgba(120, 100, 220, 0.6);
  color: #c0b0e0;
}

/* ============================================================
   プロローグ フェードアウト
   ============================================================ */
.bm-story-prologue-overlay {
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: center;
}
.bm-story-prologue-overlay.bm-prologue-fading {
  opacity: 0 !important;
  transform: scale(0.94);
}

/* ============================================================
   バトルゲームページ: カウントダウン中ゆっくりfade-in
   ============================================================ */
.battle-game-page .page-content {
  animation: pageFadeIn 0.5s ease-out forwards, pageForceVisible 0.01s 1.5s forwards;
}

/* ============================================================
   リザルトページ レイアウト
   ============================================================ */
.br-layout {
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  align-self: start;
}
.br-ad-col {
  position: sticky;
  top: calc(var(--header-height, 60px) + 16px);
}
.br-ad-col .adsbygoogle {
  min-height: 400px;
  width: 100%;
}
.br-main-col {
  min-width: 0;
}

/* ---- 中央ボックス ---- */
.br-box {
  background: linear-gradient(160deg, rgba(15,10,40,0.97), rgba(5,5,20,0.97));
  border-radius: 18px;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: resultAppear 0.55s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes resultAppear {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.br-box--victory { border: 2px solid rgba(240,200,80,0.7); box-shadow: 0 0 50px rgba(240,200,80,0.18); }
.br-box--defeat  { border: 2px solid rgba(200,60,40,0.7);  box-shadow: 0 0 50px rgba(200,60,40,0.15); }

/* ---- タイトル ---- */
.br-title {
  font-size: 2.3em;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}
.br-title--victory { color: #f0d870; text-shadow: 0 0 25px rgba(240,200,80,0.7); }
.br-title--defeat  { color: #ff6050; text-shadow: 0 0 25px rgba(200,60,40,0.7); }

/* ---- ステージ情報 ---- */
.br-stage-info {
  font-size: 0.95em;
  color: #a0b0d0;
  letter-spacing: 0.05em;
}

/* ---- アバターセクション ---- */
.br-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.br-avatar-wrap {
  position: relative;
  display: inline-block;
}
.br-avatar-frame {
  width: 112px;
  height: 112px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.br-avatar-frame--r {
  background-image: image-set(url('../avatar/R_background.webp') type('image/webp'), url('../avatar/R_background.png') type('image/png'));
  border: 3px solid #6b6b6b;
}
.br-avatar-frame--sr {
  background-image: image-set(url('../avatar/SR_background.webp') type('image/webp'), url('../avatar/SR_background.png') type('image/png'));
  border: 3px solid #c62828;
}
.br-avatar-frame--ssr {
  background-image: image-set(url('../avatar/SSR_background.webp') type('image/webp'), url('../avatar/SSR_background.png') type('image/png'));
  border: 3px solid #f4b400;
  box-shadow: 0 0 14px rgba(244,180,0,0.7), 0 0 28px rgba(255,215,0,0.4);
}
.br-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.br-lv-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #1a1040;
  border: 1px solid rgba(200,170,80,0.7);
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 700;
  color: #f0d870;
  padding: 2px 8px;
  white-space: nowrap;
}
.br-rarity-badge {
  font-size: 0.78em;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
}
.br-rarity-badge--r   { background: #555; color: #ccc; }
.br-rarity-badge--sr  { background: #2255aa; color: #90c0ff; }
.br-rarity-badge--ssr { background: #705020; color: #ffd060; }

/* ---- EXP ゲージ ---- */
.br-exp-wrap {
  width: 100%;
  max-width: 290px;
}
.br-exp-label {
  font-size: 0.82em;
  color: #a0b0d0;
  margin-bottom: 4px;
  text-align: left;
}
.br-exp-track {
  height: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.br-exp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8855ff, #cc88ff);
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.br-exp-nums {
  font-size: 0.8em;
  color: #a0b0d0;
  text-align: right;
  margin-top: 4px;
}

/* ---- LEVEL UP バナー ---- */
.br-levelup-banner {
  font-size: 1.2em;
  font-weight: 900;
  color: #f0d870;
  text-shadow: 0 0 20px rgba(240,200,80,0.8);
  letter-spacing: 0.12em;
  animation: lvupFlash 1.2s ease forwards;
}
@keyframes lvupFlash {
  0%  { opacity: 0; transform: scale(0.7); }
  30% { opacity: 1; transform: scale(1.1); }
  70% { opacity: 1; transform: scale(1); }
  100%{ opacity: 1; }
}

/* ---- Stats グリッド ---- */
.br-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.br-stat-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 6px;
}
.br-stat-label {
  font-size: 0.78em;
  color: #a0b0d0;
  margin-bottom: 5px;
}
.br-stat-value {
  font-size: 1.05em;
  font-weight: 700;
  color: #e0e8ff;
}

/* ---- リワード ---- */
.br-rewards {
  background: rgba(240,200,80,0.08);
  border: 1px solid rgba(240,200,80,0.3);
  border-radius: 12px;
  padding: 10px 18px;
  width: 100%;
}
.br-rewards__title {
  font-size: 0.75em;
  color: #c0a840;
  margin-bottom: 8px;
  letter-spacing: 0.08em;
}
.br-rewards__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.br-rewards__item {
  font-size: 1em;
  font-weight: 700;
  color: #f0d870;
}

/* ---- 敗北メッセージ ---- */
.br-defeat-msg {
  font-size: 0.88em;
  color: #a0b0d0;
  font-style: italic;
}

/* ---- ボタン ---- */
.br-btns {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.br-home-btn {
  display: inline-block;
  padding: 9px 28px;
  background: linear-gradient(135deg, #3a5080, #2a3868);
  color: #c0d0ff;
  border: 1px solid rgba(100,150,255,0.4);
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.04em;
}
.br-home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  color: #ddeeff;
}

/* ---- モバイル ---- */
@media (max-width: 820px) {
  .br-layout {
    grid-template-columns: 1fr;
    padding: 16px 8px 32px;
  }
  .br-ad-col { display: none; }
  .br-box { padding: 14px 12px; }
  .br-title { font-size: 1.7em; }
}

/* ============================================================
   敵次回攻撃ゲージ
   ============================================================ */
.battle-enemy-atk-gauge-wrap {
  margin-top: 6px;
}
.battle-enemy-atk-gauge-label {
  font-size: 0.62em;
  color: #ff9060;
  margin-bottom: 2px;
  text-align: center;
}
.battle-enemy-atk-gauge-track {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.battle-enemy-atk-gauge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f39c12, #e74c3c);
  border-radius: 3px;
  transition: width 0.5s linear;
}

/* ============================================================
   ギフトボックス モーダル内リスト
   ============================================================ */
.bm-gift-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.bm-gift-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,170,80,0.3);
  border-radius: 8px;
  padding: 8px 12px;
}
.bm-gift-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-gift-item__source {
  font-size: 0.72em;
  color: #a0a8c8;
  font-weight: 600;
}
.bm-gift-item__msg {
  font-size: 0.82em;
  color: #c0c8e0;
}
.bm-gift-item__amount {
  font-size: 1em;
  font-weight: 700;
  color: #f0d870;
}
.bm-gift-item__claim-btn {
  padding: 4px 12px;
  background: linear-gradient(135deg, #5a3c8f, #7a5caf);
  border: 1px solid rgba(180,140,255,0.45);
  border-radius: 6px;
  color: #e0d0ff;
  font-size: 0.78em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, transform 0.1s;
  flex-shrink: 0;
}
.bm-gift-item__claim-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7a5caf, #9a7ccf);
  transform: translateY(-1px);
}
.bm-gift-item__claim-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bm-gift-empty-msg {
  text-align: center;
  color: #7870a0;
  font-size: 0.88em;
  padding: 16px 0;
}