/* 1. 親要素の調整（高さを揃える設定） */
#gacha-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  /* align-items: start; を削除、または stretch に変更（デフォルトは stretch です） */
  align-items: stretch; 
}

/* 2. カード自体の調整 */
.version-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 親のグリッドの高さに合わせる */
  box-sizing: border-box; /* パディングを含めた計算にする */
  
  background-color: #0D0D0D;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.452);
  color: #fff;
}

/* 3. 中身の押し上げ（集録祈願がない場合でもフッターを下に固定したい場合） */
.phases-wrapper {
  flex-grow: 1; /* これを入れると、集録祈願がないカードでもこのエリアが伸びて、下部が揃います */
}

/* ★画像サイズを変更したい場合はここをいじってください★ */
.char-icon {
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ★星5キャラのサイズ */
.size-5 {
  width: 110px; 
  height: 110px;
}

/* ★星4キャラのサイズ（少し小さくする例） */
.size-4 {
  width: 65px;
  height: 65px;
}

/* 星5背景（キャラ画像自体の背景色） */
.bg-5 {
  background: linear-gradient(180deg, #945c2c, #b27330);
}

/* 星4背景（キャラ画像自体の背景色） */
.bg-4 {
  background: linear-gradient(180deg, #5e5789, #9c75b7);
}

/* その他レイアウト維持 */
.version-header {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.phases-wrapper {
  display: flex;
  justify-content: space-around;
  gap: 15px;
}

.phase-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.char-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.phase-title {
  margin-bottom: 10px;
  color: #aaa;
  font-size: 0.9rem;
}

/* 1. 集録祈願セクション全体の中央揃え */
.chronicled-wrapper {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #444;
  display: flex;           /* 追加 */
  flex-direction: column;  /* 追加 */
  align-items: center;     /* 追加：これで「集録祈願」の文字も画像も中央へ */
}

/* 2. 集録祈願の画像サイズだけを個別に変更 */
.chronicled-wrapper .char-icon {
  width: 70px;  /* ここを好きなサイズに変更してください */
  height: 70px; /* ここを好きなサイズに変更してください */
  /* 通常の .char-icon より小さく（あるいは大きく）設定できます */
}

/* キャラクター画像とバッジを包む親要素 */
.char-wrapper {
  position: relative; /* バッジを右上に固定する基準になります */
  display: inline-block;
}

/* 右上の数字バッジ */
.count-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white; /* 白い四角 */
  color: black;            /* 文字は黒 */
  font-size: 11px;         /* 小さめ */
  font-weight: bold;
  padding: 1px 4px;
  border-bottom-left-radius: 4px; /* 角を少し丸める */
  z-index: 2;              /* 画像より上に表示 */
  line-height: 1;
}

/* 祈願履歴のタイトル中央揃え */
.gacha-header h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* 絞り込み中キャラの表示エリア */
.selected-char-banner {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  margin-bottom: 20px;
  transition: background 0.2s;
}

.selected-char-banner:hover {
  background: rgba(255, 255, 255, 0.2);
}

.selected-char-banner img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.selected-char-banner span {
  font-weight: bold;
  color: #fff;
}

/* クリックできることを示すポインタ */
.char-wrapper {
  cursor: pointer;
}

/* スマホ表示の時は1列にする */
@media (max-width: 1000px) {
  #gacha-grid {
    grid-template-columns: 1fr;
  }
}