/* 内页轻装饰（不含时间轴，时间轴已恢复原版双列布局） */



.screen-page::before {

  content: '';

  position: fixed;

  inset: 0;

  max-width: 430px;

  margin: 0 auto;

  pointer-events: none;

  z-index: 0;

  opacity: 0.04;

  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.5'%3E%3Cpath d='M30 0v60M0 30h60'/%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3C/g%3E%3C/svg%3E");

}



.screen-page > *:not(.topbar):not(.theme-tabs-bar):not(.theme-bg-layer):not(.theme-bg-veil):not(.tl-bg-layer):not(.tl-bg-veil) {
  position: relative;
  z-index: 1;
}



/* 关系图：名字在关系标签之上 */

.char-name-tag {

  z-index: 20;

  position: relative;

}



.char-btn--dyn {

  z-index: 12;

}



#graph-labels {

  z-index: 11;

}



.edge-badge {

  z-index: 6;

  font-size: 8px;

}



/* ── 作品介绍页 ── */



#screen-intro {

  background: #1c1008;

}



#screen-intro::before {

  opacity: 1;

  background-color: #1c1008;

  background-image:

    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),

    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 Q30 55 60 60 T120 60' fill='none' stroke='%23c9a84c' stroke-width='0.4' opacity='0.08'/%3E%3Cpath d='M0 30 Q40 25 80 32 T120 28' fill='none' stroke='%238b6914' stroke-width='0.3' opacity='0.06'/%3E%3Cpath d='M0 90 Q35 88 70 92 T120 88' fill='none' stroke='%235c3d1e' stroke-width='0.35' opacity='0.07'/%3E%3C/svg%3E");

  background-size: 180px 180px, 120px 120px;

}



#screen-intro .intro-topbar,
#screen-intro .topbar.intro-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(15, 8, 4, 0.98) 0%, rgba(20, 12, 6, 0.9) 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  padding-bottom: 12px;
  backdrop-filter: none;
}

#screen-intro .intro-topbar::after,
#screen-intro .topbar.intro-topbar::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.4), transparent);
  pointer-events: none;
}

#screen-intro .page-ornament {
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: 0.5em;
  color: rgba(201, 168, 76, 0.5);
  text-align: center;
  margin: 16px 0 8px;
}

#screen-intro .page-ornament::before,
#screen-intro .page-ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22%;
  height: 1px;
  transform: translateY(-50%);
  pointer-events: none;
}

#screen-intro .page-ornament::before {
  left: 0;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.35));
}

#screen-intro .page-ornament::after {
  right: 0;
  background: linear-gradient(to left, transparent, rgba(201, 168, 76, 0.35));
}



/* 封面 + 开篇 */

#screen-intro .intro-hero {
  border: 1px solid rgba(201, 168, 76, 0.16);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(40, 24, 12, 0.92), rgba(20, 12, 6, 0.96));
  overflow: visible;
}

#screen-intro .intro-book-stage {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 28px 24px 20px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201, 168, 76, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(12, 8, 4, 0.6) 0%, rgba(28, 16, 8, 0.3) 100%);
}



#screen-intro .intro-book {
  transform: perspective(600px) rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
  position: relative;
  max-width: 62%;
  border-radius: 4px;
  box-shadow:
    -8px 8px 30px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(201, 168, 76, 0.12),
    inset -2px 0 8px rgba(0, 0, 0, 0.4);
}



#screen-intro .intro-book::before {

  content: '';

  position: absolute;

  left: -10px;

  top: 4%;

  bottom: 4%;

  width: 14px;

  background: linear-gradient(90deg, #3d2814 0%, #5c3d1e 35%, #2a1810 100%);

  transform: rotateY(72deg);

  transform-origin: right center;

  border-radius: 2px 0 0 2px;

  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.55);

  z-index: -1;

}



#screen-intro .intro-book::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(105deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%);

  pointer-events: none;

  border-radius: 2px;

}



#screen-intro .intro-book img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 220px;

  object-fit: contain;

  border: 2px solid #c9a84c;

  border-radius: 2px 6px 6px 2px;

  box-shadow:

    0 0 30px rgba(201, 168, 76, 0.375),

    12px 10px 28px rgba(0, 0, 0, 0.55),

    4px 2px 8px rgba(0, 0, 0, 0.35);

}



#screen-intro .intro-hero__body {

  padding: 16px 16px 18px;

  border-top: 1px solid rgba(201, 168, 76, 0.1);

}



/* 正文段落 */

#screen-intro .intro-body {
  color: rgba(196, 180, 158, 0.88);
  line-height: 2;
  font-size: 13px;
  margin: 0;
  font-weight: 400;
}

#screen-intro .intro-list {
  list-style: none;
  padding-left: 0;
}

#screen-intro .intro-list li {
  position: relative;
  padding-left: 0;
}

#screen-intro .intro-list li::before {
  content: '◈';
  color: rgba(201, 168, 76, 0.5);
  margin-right: 8px;
}



/* 小节卡片 */

#screen-intro .intro-section {
  background: linear-gradient(145deg, rgba(30, 18, 10, 0.92) 0%, rgba(20, 12, 6, 0.96) 100%);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

#screen-intro .intro-section::after {
  content: '✦';
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 28px;
  color: rgba(201, 168, 76, 0.06);
  pointer-events: none;
}

#screen-intro .intro-section__title {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
  font-size: 17px;
  font-weight: 600;
  color: #f9e596;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

#screen-intro .intro-section__title::before {
  content: '◆';
  font-size: 9px;
  color: rgba(212, 175, 55, 0.75);
  flex-shrink: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

#screen-intro .intro-section--red {
  --intro-accent: #8b1a1a;
  border-left: 3px solid rgba(139, 26, 26, 0.6);
}

#screen-intro .intro-section--gold {
  --intro-accent: #c9a84c;
  border-left: 3px solid rgba(201, 168, 76, 0.5);
}



/* 「── 故事梗概 ──」装饰标题 */
#screen-intro .intro-section__title--ornament {
  justify-content: center;
  gap: 10px;
}

#screen-intro .intro-section__title--ornament::before {
  display: none;
}

#screen-intro .intro-ornament-line,
#screen-intro .intro-ornament-dash {
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.5), transparent);
  height: 1px;
  flex: 1;
  display: inline-block;
  min-width: 20px;
  vertical-align: middle;
}

#screen-intro .intro-ornament-dash {
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  margin: 0 6px;
}

#screen-intro .intro-ornament-label {
  flex-shrink: 0;
  white-space: nowrap;
  color: #f9e596;
  font-size: 17px;
  letter-spacing: 0.14em;
}

#screen-intro .intro-line-label {
  font-weight: 700;
  font-style: normal;
}

#screen-intro .intro-line-label--anna {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: #c45c5c;
}

#screen-intro .intro-line-label--levin {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: #5a9a6e;
}

/* 核心人名：开篇首次出现，极细点线；注释由 JS 浮动层显示 */
#screen-intro .intro-char-mark {
  position: relative;
  display: inline;
  cursor: pointer;
  color: #d4b483;
  text-decoration: none;
  background: none;
  border-bottom: 1px dotted rgba(201, 168, 76, 0.4);
  transition: border-color 0.2s ease;
}

#screen-intro .intro-char-mark:hover,
#screen-intro .intro-char-mark:focus-visible {
  border-bottom-color: rgba(201, 168, 76, 0.65);
  outline: none;
  background: none;
}

#screen-intro .intro-char-mark::after,
#screen-intro .intro-char-mark::before {
  display: none;
}

.intro-tip-float {
  position: fixed;
  z-index: 9999;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  font-family: 'Noto Serif SC', Georgia, serif;
  color: #e8d5b7;
  background: rgba(28, 16, 8, 0.97);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(201, 168, 76, 0.1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.intro-tip-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



/* 废弃：旧人名链接类不再使用 */

#screen-intro .intro-char-link {

  text-decoration: none;

  border-bottom: none;

}



/* 兼容旧选择器 */

#screen-intro .rel-card,

#screen-intro .rounded-2xl {
  border: 1px solid rgba(201, 168, 76, 0.15);
  background: linear-gradient(145deg, rgba(30, 18, 10, 0.92) 0%, rgba(20, 12, 6, 0.96) 100%);
  border-radius: 14px;
}



#screen-intro .rel-card h3:not(.intro-section__title) {

  font-family: Cinzel, 'Noto Serif SC', serif;

  letter-spacing: 0.06em;

  color: rgba(201, 168, 76, 0.85);

  font-size: 13px;

}