:root{
  --gold: #e6c15a;
  --gold-soft: rgba(230,193,90,0.85);
  --panel-bg: rgba(0,0,0,0.45);
  --text-main: #f5f5f5;

  /* 終了後点滅（赤） */
  --ended-red: rgba(255, 60, 60, 0.22);
  --ended-red-2: rgba(255, 60, 60, 0.05);
  --ended-text: #ffb3b3;
  --ended-text-strong: #ff6666;

  /* 開始10分前点滅（オレンジ） */
  --soon-orange: rgba(255,140,0,0.25);
  --soon-orange-2: rgba(255,140,0,0.08);
  --soon-orange-text: #ffb347;
}

/* リセット */
*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  height: 100%;
  font-family: "Shippori Mincho B1", sans-serif;
}

/* 背景 */
body{
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.55)),
    url("zipang.png") center / cover no-repeat fixed;
  color: var(--text-main);
}

/* 中央レイアウト */
.main{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* パネル */
.portal{
  background: var(--panel-bg);
  padding: 48px 56px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  text-align: center;

  max-width: 700px;
  width: 90vw;
}

/* タイトル */
.portal h1{
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 32px;
}

/* リンク一覧（縦→横） */
.links{
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  min-width:160px;
  text-decoration:none;
  color:var(--gold-soft);
  font-size:16px;
  letter-spacing:0.05em;
  border:1px solid rgba(230,193,90,0.4);
  border-radius:6px;
  transition:all .25s ease;
}
.links a:hover{
  background:rgba(230,193,90,0.15);
  color:#fff;
  border-color:var(--gold);
}

/* フッター */
.footer{
  margin-top: 28px;
  font-size: 12px;
  opacity: 0.7;
}

/* ===== mobile only ===== */
@media (max-width: 480px){
  .portal{
    width: calc(100vw - 32px);
    padding: 32px 22px;
  }
  .portal h1{
    font-size: 20px;
    margin-bottom: 22px;
  }
  .links a{
    font-size: 16px;
    padding: 12px 0;
  }
}
@media (max-width: 600px){
  .portal{ padding: 26px 16px; }
  .portal h1{ font-size: 18px; }
}

.scheduleBox{
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(230,193,90,0.25);
  text-align: left;
}
.scheduleTitle{
  font-size: 17px;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: .95;
  margin-bottom: 10px;
}

/* イベント側の大枠 */
.scheduleBox .wrap{ width:100%; }

/* 上部バー（時計・設定） */
.scheduleBox .topbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  margin-bottom:10px;
  border:1px solid rgba(230,193,90,0.20);
  border-radius:8px;
  background:rgba(0,0,0,0.25);
}

/* 時計・ヒント */
.scheduleBox .clock{
  font-size:14px;
  color:var(--gold-soft);
  letter-spacing:0.06em;
}
.scheduleBox .hint{
  font-size:12px;
  opacity:.8;
}

/* 設定UI（セレクトのみ残す） */
.scheduleBox .actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.scheduleBox .check{
  font-size:12px;
  color:#ddd;
  opacity:.85;
}
.scheduleBox select{
  background:rgba(0,0,0,0.35);
  color:var(--text-main);
  border:1px solid rgba(230,193,90,0.25);
  border-radius:6px;
  padding:4px 6px;
  font-size:12px;
}

/* リスト枠 */
.scheduleBox .frame{
  border:1px solid rgba(230,193,90,0.20);
  border-radius:10px;
  background:rgba(0,0,0,0.20);
  overflow:hidden;
}
.scheduleBox .scroll{
  max-height:320px;
  overflow:auto;
}

/* 各スロット */
.scheduleBox .slot{
  padding:10px 12px;
  border-bottom:1px solid rgba(230,193,90,0.12);
}

.scheduleBox .slothead{
  display:grid;
  grid-template-columns: 52px 1fr auto; /* time / events / remain */
  gap:10px;
  align-items:center;
}

.scheduleBox .time{
  font-size:14px;
  color:#eaeaea;
  opacity:.95;
}

.scheduleBox .delta{
  font-size:12px;
  color:var(--gold-soft);
  opacity:.85;
  white-space:nowrap;
}

/* 中央のイベント表示（Copy無し） */
.scheduleBox .headerItems{ min-width:0; }
.scheduleBox .headerItemRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}
.scheduleBox .headerItemName{
  flex: 1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  color:#f2f2f2;
  opacity:.92;
}

/* インジケータ */
.scheduleBox .indicator{
  margin-top:8px;
  height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:999px;
  overflow:hidden;
}
.scheduleBox .indicatorFill{
  height:100%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.85;
}

/* ===== 終了後：赤点滅 ===== */
@keyframes endedBlink {
  0%   { background: var(--ended-red); }
  49%  { background: var(--ended-red); }
  50%  { background: var(--ended-red-2); }
  100% { background: var(--ended-red-2); }
}
.scheduleBox .slot.is-ended{
  animation: endedBlink 0.8s steps(1, end) infinite;
  border-left: 3px solid var(--ended-text-strong);
}
.scheduleBox .slot.is-ended .time{
  color: var(--ended-text);
  opacity: 1;
}
.scheduleBox .slot.is-ended .headerItemName{
  color: #ffe1e1;
  opacity: 1;
}
.scheduleBox .slot.is-ended .delta{
  color: var(--ended-text-strong);
  opacity: 1;
}
.scheduleBox .slot.is-ended .indicatorFill{
  background: linear-gradient(90deg, transparent, var(--ended-text-strong), transparent);
  opacity: .9;
}

/* ===== 開始10分前：オレンジ点滅 ===== */
@keyframes soonBlink {
  0%   { background: var(--soon-orange); }
  49%  { background: var(--soon-orange); }
  50%  { background: var(--soon-orange-2); }
  100% { background: var(--soon-orange-2); }
}
.scheduleBox .slot.is-soonblink{
  animation: soonBlink 1.0s steps(1,end) infinite;
  border-left: 3px solid var(--soon-orange-text);
}
.scheduleBox .slot.is-soonblink .time{
  color: var(--soon-orange-text);
  opacity: 1;
}
.scheduleBox .slot.is-soonblink .headerItemName{
  color:#ffe6c7;
  opacity: 1;
}
.scheduleBox .slot.is-soonblink .delta{
  color: var(--soon-orange-text);
  opacity: 1;
}