/* =========================
   ベース
========================= */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* 背景：明るいグリーングラデ */
body {
  background: linear-gradient(
    135deg,
    #34d399 0%,
    #6ee7b7 50%,
    #c7f9e7 100%
  );
}

/* =========================
   全体（1600x900）
========================= */
.schedule-wrapper {
  width: 1600px;
  height: 900px;
  margin: 0 auto;
  padding: 32px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.88),
    rgba(255,255,255,0.78)
  );

  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* =========================
   ヘッダー背景（視認性改善）
========================= */
.schedule-header {
  background: linear-gradient(
    135deg,
    #1f9f76 0%,
    #34d399 60%,
    #6ee7b7 100%
  );
  border-radius: 18px;
  padding: 20px 28px;
  margin-bottom: 20px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* タイトル文字を強調 */
.schedule-header h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;

  /* 文字の縁取り的シャドウ */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 4px 8px rgba(0,0,0,0.35);
}

.schedule-header span {
  font-size: 18px;
  margin-left: 16px;
  color: #eafff4;
  opacity: 0.95;
}

/* =========================
   メイン
========================= */
.schedule-main {
  display: flex;
  height: calc(100% - 90px);
  gap: 24px;
}

/* =========================
   左：スケジュール本体
========================= */
.schedule-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.6),
    rgba(236,255,245,0.85)
  );

  border-radius: 18px;
  padding: 20px;
}

/* =========================
   1日分（帯）
========================= */
.schedule-day {
  display: flex;
  align-items: center;

  background: linear-gradient(
    90deg,
    #ecfdf5,
    #d1fae5
  );

  border-radius: 999px;
  padding: 8px 14px;
  min-height: 78px;
}

/* 日付ラベル */
.schedule-date {
  width: 110px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 999px;

  background: #34d399;
  color: #eafff4;
  font-weight: 800;
  letter-spacing: 0.05em;

  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
}

.schedule-date::first-line {
  font-size: 22px;
}

/* =========================
   配信アイテム
========================= */
.schedule-item {
  flex: 1;
  margin-left: 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: #7fe0b5;
  border-radius: 999px;
  padding: 6px 12px;

  box-shadow: 0 6px 12px rgba(16,185,129,0.25);
}

.schedule-game-art {
  width: 44px;
  border-radius: 6px;
}

.schedule-info {
  display: flex;
  flex-direction: column;
}

.schedule-time {
  font-size: 13px;
  font-weight: 700;
  color: #0b5d43;
}

.schedule-title {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}

/* =========================
   OFF DAY
========================= */
.schedule-off {
  flex: 1;
  margin-left: 12px;
  text-align: center;

  font-size: 24px;
  font-weight: 800;
  color: #ffffff;

  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 10px;
}

/* =========================
   過去配信
========================= */
.schedule-item.is-past {
  opacity: 0.55;
}

.schedule-ended {
  margin-right: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;

  background: rgba(0,0,0,0.22);
  border-radius: 999px;
  padding: 6px 10px;
}

/* =========================
   右：キャラクター
========================= */
.schedule-right {
  width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-right img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}
