.stage-intro-scene {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #000;
  color: #f3fbff;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

body.stage-intro-active #ui-layer > *,
body.stage-intro-active #overlay-layer > *,
body.stage-outro-active #ui-layer > *,
body.stage-outro-active #overlay-layer > *,
body.final-ending-active #ui-layer > *,
body.final-ending-active #overlay-layer > * {
  display: none !important;
}

.stage-intro-video {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  object-fit: cover;
  background: #000;
}

.final-recovery-montage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #000;
}

.final-recovery-frame {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 90ms ease;
  background: #000;
}

.final-recovery-frame.is-visible {
  opacity: 1;
}

.final-recovery-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.final-ending-scene {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #06111b;
  color: #f3fbff;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.final-ending-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 13, 22, 0.42), rgba(3, 13, 22, 0.12) 48%, rgba(3, 13, 22, 0.58)),
    url("../assets/images/final-outro/stage1.png") center / cover no-repeat;
  filter: saturate(1.08) brightness(0.78);
}

.final-ending-characters {
  position: absolute;
  left: 230px;
  bottom: 90px;
  display: flex;
  align-items: flex-end;
  gap: 54px;
}

.final-ending-student {
  width: 360px;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.42));
}

.final-ending-robok {
  width: 300px;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.42));
}

.final-ending-card {
  position: absolute;
  right: 170px;
  top: 255px;
  box-sizing: border-box;
  width: 650px;
  padding: 46px 54px 48px;
  border: 1px solid rgba(152, 224, 255, 0.36);
  border-radius: 8px;
  background: rgba(7, 23, 36, 0.78);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.final-ending-kicker {
  margin: 0 0 14px;
  color: rgba(117, 222, 255, 0.94);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.final-ending-card h1 {
  margin: 0;
  color: #ffffff;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
}

.final-ending-card p:not(.final-ending-kicker) {
  margin: 28px 0 34px;
  color: rgba(235, 249, 255, 0.9);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

#final-ending-home-btn {
  min-width: 190px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid rgba(105, 218, 255, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(48, 180, 225, 0.96), rgba(22, 112, 166, 0.98));
  color: #ffffff;
  font: inherit;
  font-size: 21px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

#final-ending-home-btn:hover,
#final-ending-home-btn:focus-visible {
  filter: brightness(1.08);
  outline: none;
}

.stage-intro-skip-btn,
.stage-intro-play-btn,
.stage-intro-start-btn {
  font: inherit;
  cursor: pointer;
}

.stage-intro-skip-btn {
  position: absolute;
  right: 54px;
  top: 46px;
  z-index: 3;
  min-width: 168px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(168, 224, 255, 0.38);
  border-radius: 8px;
  background: rgba(9, 22, 34, 0.62);
  color: rgba(235, 250, 255, 0.88);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.stage-intro-skip-btn:hover,
.stage-intro-skip-btn:focus-visible {
  border-color: rgba(160, 232, 255, 0.72);
  background: rgba(18, 47, 68, 0.72);
  color: #ffffff;
  outline: none;
}

.stage-intro-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  min-width: 360px;
  min-height: 64px;
  padding: 0 30px;
  border: 1px solid rgba(160, 232, 255, 0.58);
  border-radius: 8px;
  background: rgba(6, 20, 31, 0.78);
  color: #f0fbff;
  font-size: 22px;
  font-weight: 800;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.stage-intro-popup-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(38, 97, 126, 0.22), transparent 46%),
    rgba(0, 0, 0, 0.54);
  animation: stage-intro-fade-in 320ms ease both;
}

.stage-intro-popup {
  box-sizing: border-box;
  width: 820px;
  min-height: 390px;
  padding: 40px 52px 42px;
  border: 1px solid rgba(146, 218, 255, 0.44);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14, 35, 50, 0.94), rgba(8, 18, 28, 0.95));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  animation: stage-intro-popup-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stage-intro-kicker {
  margin: 0 0 12px;
  color: rgba(117, 222, 255, 0.94);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
}

.stage-intro-popup h1 {
  margin: 0;
  color: #ffffff;
  font-size: 54px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(86, 204, 255, 0.24);
}

.stage-intro-copy {
  display: grid;
  gap: 18px;
  margin: 34px auto 36px;
  max-width: 720px;
  color: rgba(234, 248, 255, 0.92);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.stage-intro-copy p {
  margin: 0;
}

.stage-intro-start-btn {
  min-width: 190px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid rgba(105, 218, 255, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(48, 180, 225, 0.96), rgba(22, 112, 166, 0.98));
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(74, 207, 255, 0.18);
  transition:
    transform 160ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
}

.stage-intro-start-btn:hover,
.stage-intro-start-btn:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(74, 207, 255, 0.28);
}

@keyframes stage-intro-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes stage-intro-popup-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}