/* 章カードはアラート・回想と同じモーダル層。暗転中の入力はJSで止める。 */
.episode-transition {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: clamp(24px, 7vw, 88px);
  background: #050409;
  opacity: 1;
  transition: opacity 600ms cubic-bezier(.32, .72, 0, 1);
  outline: none;
  isolation: isolate;
}
.episode-transition.hidden { display: none; }
.episode-transition.is-leaving { opacity: 0; }
.episode-card { width: min(720px, 100%); text-align: center; }
.episode-card-number,
.episode-card-status,
.episode-card-progress { font-family: var(--font-en); letter-spacing: .2em; }
.episode-card-number { color: #bcb0d4; font-size: 13px; }
.episode-card h2 {
  margin: 28px 0 34px;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  font-size: clamp(25px, 4.2vw, 44px);
  line-height: 1.7;
  letter-spacing: .08em;
  text-wrap: balance;
  color: #f4effb;
}
.episode-card-rule { width: 64px; height: 1px; margin: 0 auto 28px; background: #a78bce; }
.episode-card-status { font-size: clamp(10px, 1.7vw, 12px); color: #9c8bb9; line-height: 1.8; }
.episode-card-progress { position: absolute; bottom: 26px; right: 30px; font-size: 10px; color: #766884; }
.episode-continue {
  display: block;
  margin: 44px auto 0;
  padding: 14px 24px;
  min-height: 48px;
  border: 1px solid #bca6da55;
  border-radius: 100px;
  background: #100c19;
  color: #d8cce9;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 300ms cubic-bezier(.32, .72, 0, 1), background 300ms cubic-bezier(.32, .72, 0, 1);
}
.episode-continue[hidden] { display: none; }
.episode-continue:disabled { opacity: 0; pointer-events: none; }
.episode-continue:hover { background: #21182f; }
.episode-continue:focus-visible { outline: 2px solid #c8b3e4; outline-offset: 5px; }
.episode-transition.is-starting .episode-card { animation: episode-card-arrive 550ms cubic-bezier(.32, .72, 0, 1) both; }
.episode-transition.is-ending { animation: episode-blackout 650ms cubic-bezier(.32, .72, 0, 1) both; }
.episode-transition.is-ending .episode-card { animation: episode-card-arrive 500ms 350ms cubic-bezier(.32, .72, 0, 1) both; }
.episode-transition.is-ending::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, #d2b4ff30 6px, transparent 7px 12px);
  animation: episode-signal-break 650ms steps(1) both;
}
.episode-transition.is-ending h2 { animation: episode-rgb-break 650ms steps(1) both; }
body.episode-intermission #toast-notify { visibility: hidden; }
@keyframes episode-card-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes episode-blackout { from { opacity: 0; } to { opacity: 1; } }
@keyframes episode-signal-break {
  0% { opacity: .65; transform: translateY(-3px); }
  24% { opacity: .2; transform: translateY(3px); }
  42% { opacity: .5; transform: translateY(-1px); }
  68%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes episode-rgb-break {
  0%, 38% { text-shadow: 2px 0 #f15c9d, -2px 0 #67cadc; }
  24%, 56%, 100% { text-shadow: none; }
}
@media (max-height: 480px) {
  .episode-transition { padding: 20px 28px; }
  .episode-card h2 { margin: 14px 0 18px; font-size: clamp(20px, 3vw, 30px); line-height: 1.4; }
  .episode-card-rule { margin-bottom: 14px; }
  .episode-continue { margin-top: 22px; }
  .episode-card-progress { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .episode-transition,
  .episode-transition .episode-card,
  .episode-transition.is-ending h2,
  .episode-transition.is-ending::after { animation: none; transition: none; }
  .episode-transition.is-ending::after { opacity: 0; }
}