/* カレンダー全体のレイアウト調整 */
.calendar-wrapper {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.calendar-controls h2 {
  font-size: 1.5rem;
  min-width: 200px;
  text-align: center;
  color: #fff;
}

.calendar-controls button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}

.calendar-controls button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 曜日の行 */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

/* 日付グリッド */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  /* aspect-ratio: 1 / 1; を削除またはコメントアウト */
  min-height: 120px; /* 最低限の高さだけ確保する */
  
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  position: relative;
  transition: transform 0.1s;

  /* 中身を縦に並べるための設定を追加 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden; /* 枠外へのはみ出し防止 */
}

.calendar-day:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.day-number {
  font-size: 0.9rem;
  color: #ddd;
}

/* 今日の強調 */
.calendar-day.today {
  border: 2px solid #5abaff; /* テーマカラーに合わせて調整してください */
  background: rgba(90, 186, 255, 0.1);
}

/* 前後の月の空セル */
.calendar-day.empty {
  opacity: 0.3;
  background: transparent;
  border: none;
}

.event-container {
  display: flex;
  flex-wrap: wrap; /* アイコンが増えたら横に並べる */
  gap: 4px;
  justify-content: center;
  margin-top: 5px;
}

.char-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}

.event-label {
  width: 100%;
  font-size: 10px;
  text-align: center;
  padding: 2px 0;
  border-radius: 4px;
  color: white;
}

.theater { background: rgba(233, 30, 99, 0.6); } /* シアター用のピンク */
.abyss { background: rgba(33, 150, 243, 0.6); }   /* 螺旋用の青 */

/* アプデ当日 */
.version-up {
  background: rgba(255, 215, 0, 0.6); /* 金色系 */
  color: #fff;
  font-weight: bold;
}

/* ベータ更新 (V1〜V5) */
.beta {
  background: rgba(46, 204, 113, 0.6); /* 緑色系 */
  color: #eee;
}

/* 予告番組 */
.stream {
  background: rgba(230, 126, 34, 0.6); /* オレンジ系 */
  color: #fff;
}

/* 幽境の激戦 (独自の更新日) */
.leyline {
  background: rgba(155, 89, 182, 0.6); /* 紫色系 */
  color: #fff;
}


/* 日曜日の数字を赤っぽく */
.calendar-day.sunday .day-number {
  color: #ff6b6b;
}

/* 土曜日の数字を青っぽく */
.calendar-day.saturday .day-number {
  color: #6ba6ff;
}