.challenge-overlay.opening-crawl-active {
  padding: 0;
  background: #03050d;
  backdrop-filter: none;
}

.opening-crawl-active .challenge-content {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
}

.opening-crawl {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #15182c 0%, #090b18 43%, #02040b 100%);
  color: #f4c773;
}

.opening-crawl::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image:
    radial-gradient(2px 2px at 10% 15%, #fff3cf 90%, transparent),
    radial-gradient(1px 1px at 22% 73%, #cbd9ff 90%, transparent),
    radial-gradient(2px 2px at 37% 41%, #fff2c8 90%, transparent),
    radial-gradient(1px 1px at 53% 89%, #ffffff 90%, transparent),
    radial-gradient(2px 2px at 68% 24%, #b8d6ff 90%, transparent),
    radial-gradient(1px 1px at 82% 62%, #fff1d5 90%, transparent),
    radial-gradient(2px 2px at 94% 8%, #ffffff 90%, transparent);
  background-size: 440px 370px;
  opacity: .72;
  pointer-events: none;
  animation: openingStarsDown 48s linear infinite;
}

.opening-crawl::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, #17133016, transparent 65%), linear-gradient(90deg, #03050d6b, transparent 16%, transparent 84%, #03050d6b);
  pointer-events: none;
}

.opening-crawl-viewport {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #675735 #0b0d19;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 89%, transparent);
}

.opening-crawl-copy {
  width: min(690px, calc(100% - 40px));
  margin: 0 auto;
  padding: max(28px, 5vh) 0 75px;
  text-align: center;
  text-shadow: 0 2px 12px #f0b65840;
  transform-origin: center top;
  animation: openingWordsDown 30s linear both;
}

.opening-crawl-eyebrow {
  display: block;
  color: #f7d995;
  font-size: clamp(9px, 1.1vw, 13px);
  font-weight: 900;
  letter-spacing: .25em;
}

.opening-crawl h2 {
  margin: 14px 0 20px;
  color: #ffe1a0;
  font-size: clamp(30px, 6vw, 62px);
  line-height: .94;
  letter-spacing: .06em;
  text-shadow: 0 4px 0 #9d603e, 0 0 35px #f2b8596b;
}

.opening-crawl p {
  margin: 0 auto 15px;
  max-width: 640px;
  color: #f4c773;
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .02em;
}

.opening-crawl p strong { color: #fff0b6; }
.opening-crawl .opening-crawl-signoff { margin-top: 21px; color: #ffe8a7; font-size: clamp(14px, 1.55vw, 18px); }

.opening-crawl-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 22px 15px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #03050ddd 25%, #03050d 75%);
}

.opening-crawl-footer span { color: #b1a6a0; font-size: 9px; font-weight: 900; letter-spacing: .22em; }
.opening-crawl-footer button {
  width: min(340px, 100%);
  padding: 13px 18px;
  border: 2px solid #ffe4a8;
  background: #e9b765;
  box-shadow: 5px 5px 0 #7c493c;
  color: #1d2030;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
}
.opening-crawl-footer button:hover { background: #ffda8b; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #7c493c; }

@keyframes openingStarsDown { to { transform: translateY(190px); } }
@keyframes openingWordsDown {
  from { transform: perspective(900px) rotateX(8deg) translateY(0) scale(.96); }
  to { transform: perspective(900px) rotateX(4deg) translateY(18vh) scale(1); }
}

@media (max-width: 600px) {
  .opening-crawl-copy { width: calc(100% - 34px); padding-top: 52px; padding-bottom: 70px; }
  .opening-crawl h2 { margin: 12px 0 16px; }
  .opening-crawl p { margin-bottom: 14px; font-size: 12px; }
  .opening-crawl-footer { padding-top: 14px; }
}

@media (max-height: 560px) {
  .opening-crawl-copy { padding-top: 30px; }
  .opening-crawl h2 { margin: 10px 0 18px; font-size: clamp(30px, 5vw, 54px); }
  .opening-crawl-footer { padding: 9px 15px max(10px, env(safe-area-inset-bottom)); }
  .opening-crawl-footer span { display: none; }
  .opening-crawl-footer button { padding: 8px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-crawl::before, .opening-crawl-copy { animation: none; }
  .opening-crawl-copy { transform: none; }
}