/* Readable glass panels for story information and synopsis. */
.story-page .intro-card,
.story-page .info-card {
  border-color: rgba(167, 139, 250, 0.28);
  background:
    radial-gradient(115% 72% at 22% 0%, rgba(139, 112, 226, 0.1), transparent 52%),
    linear-gradient(145deg, rgba(31, 29, 55, 0.94), rgba(18, 21, 39, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 24px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
}

.story-page .intro-title,
.story-page .info-title {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  color: #cbbcf4;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.09);
}

.story-page .intro-title::before,
.story-page .info-title::before {
  content: "";
  flex: 0 0 clamp(1.8rem, 6vw, 2.6rem);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.78), rgba(136, 114, 220, 0.62));
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.1);
}

.story-page .intro-body,
.story-page .info-body,
.story-page .info-body p {
  color: #dce0e9;
}

@media (prefers-reduced-transparency: reduce) {
  .story-page .intro-card,
  .story-page .info-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}