/* 知否知否 · "神"板块样式（深色底、金色线条）
   只在 body.theme-shen 的页面生效，不影响"时"板块的水墨淡雅外观。 */
body.theme-shen {
  --night: #0f1420;
  --night-2: #161c2c;
  --night-3: #1d2438;
  --gold: #c9a961;
  --gold-dim: #7a6a3f;
  --gold-soft: #e8dcc0;
  --star-text: #cfc7b3;
  --star-muted: #9a927d;
  --beast-qinglong: #7fb8a4;
  --beast-xuanwu: #7f92b8;
  --beast-baihu: #d8d4c8;
  --beast-zhuque: #d9826b;
  background: var(--night);
  background-image: none;
  color: var(--star-text);
}
.theme-shen a { color: var(--gold); }
.theme-shen a:hover { color: var(--gold-soft); }
.theme-shen a:focus-visible, .theme-shen button:focus-visible, .theme-shen summary:focus-visible, .theme-shen [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* 页头页脚 */
.theme-shen .site-header { border-bottom-color: rgba(201, 169, 97, 0.28); }
.theme-shen .brand, .theme-shen .brand:hover { color: var(--gold-soft); }
.theme-shen .brand-tagline { color: var(--star-muted); border-left-color: var(--gold-dim); }
.theme-shen .site-nav a { color: var(--star-muted); }
.theme-shen .site-nav a:hover, .theme-shen .site-nav a[aria-current="page"] { color: var(--gold-soft); }
.theme-shen .site-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--gold); }
.theme-shen .sub-nav { border-bottom-color: rgba(201, 169, 97, 0.28); background: rgba(22, 28, 44, 0.6); }
.theme-shen .sub-nav-mark { color: var(--gold); border-right-color: var(--gold-dim); }
.theme-shen .sub-nav a { color: var(--star-muted); }
.theme-shen .sub-nav a:hover, .theme-shen .sub-nav a[aria-current="page"] { color: var(--gold-soft); }
.theme-shen .sub-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--gold); }
.theme-shen .footer-inner { border-top-color: rgba(201, 169, 97, 0.28); color: var(--star-muted); }
.theme-shen .empty-note { color: var(--star-muted); }

/* 页面头部 */
.xx-page { display: flex; flex-direction: column; gap: 40px; padding-top: 40px; max-width: 1200px; margin: 0 auto; animation: rise 0.7s ease both; }
.xx-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.xx-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 0.3em; color: var(--gold-dim); }
.xx-eyebrow::before { content: ''; width: 48px; height: 1px; background: var(--gold-dim); }
.xx-hook { font-family: var(--display); font-size: clamp(30px, 5vw, 48px); line-height: 1.3; color: var(--gold-soft); }
.xx-answer { font-size: 17px; line-height: 1.9; color: var(--star-text); }

/* 星图与详情 */
.xx-explore { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.xx-ring { min-width: 0; }
.xx-svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; }
.xx-cap { margin: 0; max-width: 720px; width: 100%; font-size: 13.5px; line-height: 1.85; color: var(--star-muted); }
.xx-cap .xx-season-line { display: block; color: var(--gold-soft); margin-bottom: 4px; font-size: 14.5px; }

.xx-ring-line { fill: none; stroke: var(--gold-dim); stroke-width: 1; }
.xx-ring-line.is-outer { stroke-width: 1.6; }
.xx-ring-line.is-thin { stroke-width: 0.6; }
.xx-tick { stroke: var(--gold-dim); stroke-width: 0.6; }
.xx-cardinal { stroke: var(--gold); stroke-width: 1; opacity: 0.8; }
.xx-sector { fill: transparent; cursor: pointer; transition: fill 0.25s ease; }
.xx-sector:hover { fill: rgba(201, 169, 97, 0.06); }
.xx-sector.is-season { fill: rgba(201, 169, 97, 0.08); }
.xx-sector.is-selected { fill: rgba(201, 169, 97, 0.16); }
.xx-beast { cursor: pointer; }
.xx-beast-name { font-family: var(--display); font-size: 38px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.xx-beast-sub { font-family: var(--body); font-size: 15px; letter-spacing: 0.15em; fill: var(--star-muted); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.xx-beast-sub.is-now { fill: var(--gold); }
.xx-node { cursor: pointer; }
.xx-node-bg { fill: var(--night); stroke: var(--gold-dim); stroke-width: 0.8; transition: fill 0.2s ease, stroke 0.2s ease; }
.xx-node:hover .xx-node-bg { fill: var(--night-3); stroke: var(--gold); }
.xx-node-text { font-family: var(--body); font-size: 27px; fill: var(--gold-soft); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.xx-node.is-dim { opacity: 0.4; }
.xx-node.is-selected .xx-node-bg { fill: #2a2416; stroke-width: 1.8; }
.xx-center { cursor: pointer; }
.xx-center-bg { fill: var(--night-2); stroke: var(--gold-dim); stroke-width: 1; transition: fill 0.2s ease; }
.xx-center:hover .xx-center-bg, .xx-center.is-selected .xx-center-bg { fill: var(--night-3); stroke: var(--gold); }
.xx-center-title { font-family: var(--display); font-size: 40px; fill: var(--gold); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.xx-center-sub { font-family: var(--body); font-size: 14px; letter-spacing: 0.2em; fill: var(--star-muted); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.xx-compass { font-family: var(--body); font-size: 14px; letter-spacing: 0.1em; fill: var(--gold-dim); text-anchor: middle; dominant-baseline: central; pointer-events: none; }

.xx-panel-slot { min-width: 0; }
.xx-panel { display: flex; flex-direction: column; border: 1px solid var(--gold-dim); background: var(--night-2); min-width: 0; overflow: hidden; container-type: inline-size; }
/* 图片位在文字下面，占用剩下的所有空间；文字很多时最矮也保持 5:2 */
.xx-image { flex: 1 1 0; min-height: 130px; min-height: 40cqw; position: relative; overflow: hidden; background: var(--night-3); border-top: 1px solid var(--gold-dim); }
.xx-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.xx-image.is-empty { display: flex; align-items: center; justify-content: center; background: rgba(201, 169, 97, 0.05); border-top-style: dashed; }
.xx-image-note { font-size: 13px; letter-spacing: 0.25em; color: var(--gold-dim); }
.zimg-ai-badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; font-size: 10.5px; letter-spacing: 0.1em; color: var(--gold-soft); background: rgba(15, 20, 32, 0.72); border: 1px solid var(--gold-dim); border-radius: 3px; pointer-events: none; }
.xx-panel-body { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.xx-panel-body.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.xx-panel-kicker { font-size: 13px; letter-spacing: 0.25em; color: var(--star-muted); }
.xx-panel-title { font-family: var(--display); font-size: 36px; line-height: 1.2; color: var(--gold-soft); }
.xx-fields { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.xx-field dt { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dim); }
.xx-field dd { margin: 2px 0 0; font-size: 15px; line-height: 1.85; color: var(--star-text); }
.xx-field.is-ext dd { padding: 10px 14px; border-left: 2px solid var(--gold); background: rgba(201, 169, 97, 0.07); }
.xx-panel-text { font-size: 15px; line-height: 1.9; color: var(--star-text); }
.xx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xx-chip {
  min-width: 44px; min-height: 44px; padding: 4px 12px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: 18px; color: var(--gold-soft); background: transparent;
  border: 1px solid var(--gold-dim); cursor: pointer;
}
.xx-chip:hover { border-color: var(--gold); background: var(--night-3); }
.xx-stepper { flex: none; display: flex; justify-content: space-between; gap: 12px; padding: 10px 22px 14px; border-top: 1px dashed var(--gold-dim); }
.xx-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px;
  font-family: var(--body); font-size: 14px; letter-spacing: 0.1em; color: var(--gold-soft);
  background: transparent; border: 1px solid var(--gold-dim); cursor: pointer;
}
.xx-btn:hover { border-color: var(--gold); background: var(--night-3); }

/* 下方内容 */
.xx-section { display: flex; flex-direction: column; gap: 16px; }
.xx-section .section-title { color: var(--star-muted); }
.xx-section .section-title::after { background: rgba(201, 169, 97, 0.28); }
.xx-intro { max-width: 760px; font-size: 16px; line-height: 2; color: var(--star-text); }
.xx-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.xx-use { padding: 16px 18px; border: 1px solid rgba(201, 169, 97, 0.35); background: var(--night-2); }
.xx-use h3 { font-family: var(--display); font-size: 24px; color: var(--gold-soft); }
.xx-use p { margin-top: 4px; font-size: 14.5px; line-height: 1.85; color: var(--star-text); }
.xx-misreads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.xx-misread { border: 1px solid rgba(201, 169, 97, 0.35); background: var(--night-2); }
.xx-misread summary { min-height: 52px; padding: 8px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 15.5px; color: var(--gold-soft); }
.xx-misread summary::-webkit-details-marker { display: none; }
.xx-misread summary::after { content: '＋'; margin-left: auto; color: var(--gold); }
.xx-misread[open] summary::after { content: '－'; }
.xx-misread p { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.9; color: var(--star-text); }
.xx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; max-width: 760px; }
.xx-step { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(201, 169, 97, 0.28); }
.xx-step-no {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 17px; color: var(--night); background: var(--gold); border-radius: 50%;
}
.xx-step h3 { font-size: 16px; color: var(--gold-soft); font-weight: 600; }
.xx-step p { margin-top: 2px; font-size: 14.5px; line-height: 1.85; color: var(--star-text); }
.theme-shen .tip-box { border-color: var(--gold-dim); }
.theme-shen .tip-box .tip-label { color: var(--gold); }
.theme-shen .tip-box p { color: var(--star-text); }
.theme-shen .notes { border-left-color: var(--gold); }
.theme-shen .notes summary { color: var(--star-muted); }
.theme-shen .notes summary::after { color: var(--gold); }
.theme-shen .notes-body p { color: var(--star-muted); }

@media (min-width: 960px) {
  .xx-explore { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); grid-template-rows: auto auto; column-gap: 40px; row-gap: 12px; }
  .xx-ring { grid-column: 1; grid-row: 1; }
  .xx-cap { grid-column: 1; grid-row: 2; }
  /* 详情框：高度由左边圆图决定（自身内容不撑高），内容多时文字区内部滚动 */
  .xx-panel-slot { grid-column: 2; grid-row: 1; position: relative; align-self: stretch; }
  .xx-panel { position: absolute; inset: 0; }
}
/* 笔记本等较窄的宽屏：星图变小，详情框也变矮，文字和图片位收紧一点，保证文字不用滚动 */
@media (min-width: 960px) and (max-width: 1399px) {
  .xx-image { min-height: 110px; min-height: 32cqw; }
  .xx-panel-body { padding: 14px 18px 12px; gap: 8px; }
  .xx-panel-title { font-size: 32px; }
  .xx-fields { gap: 8px; }
  .xx-field dd { font-size: 14px; line-height: 1.75; }
  .xx-field.is-ext dd { padding: 8px 12px; }
  .xx-panel-text { font-size: 14px; line-height: 1.8; }
  .xx-stepper { padding: 8px 18px 10px; }
}
@media (max-width: 899px) {
  .theme-shen .brand-tagline { display: none; }
  .theme-shen .site-nav { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 639px) {
  .xx-page { padding-top: 24px; gap: 32px; }
  .xx-uses, .xx-misreads { grid-template-columns: minmax(0, 1fr); }
  .xx-panel-body { padding: 16px 18px 14px; }
  .xx-stepper { padding: 10px 18px 14px; }
  .xx-panel-title { font-size: 36px; }
  .xx-answer { font-size: 16px; }
  .theme-shen .site-nav { gap: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .xx-page { animation: none; }
  .xx-sector, .xx-node-bg, .xx-center-bg { transition: none; }
}

/* ---------- 民间神灵：神龛卡片墙 ---------- */
.sl-group[hidden], .sl-card[hidden], .sl-empty[hidden] { display: none; }
.sl-origin-note { max-width: 760px; padding-left: 14px; border-left: 2px solid var(--gold-dim); font-size: 14px; line-height: 1.85; color: var(--star-muted); }
.sl-filters { display: flex; flex-direction: column; gap: 10px; }
.sl-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sl-filter-label { flex: none; width: 3em; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dim); }
.sl-chip {
  min-height: 40px; padding: 4px 14px; font-family: var(--body); font-size: 14px; letter-spacing: 0.08em;
  color: var(--star-text); background: transparent; border: 1px solid var(--gold-dim); cursor: pointer;
}
.sl-chip:hover { border-color: var(--gold); background: var(--night-3); }
.sl-chip.is-on { color: var(--gold-soft); border-color: var(--gold); background: rgba(201, 169, 97, 0.16); }
.sl-count { font-size: 13px; letter-spacing: 0.1em; color: var(--star-muted); }
.sl-wall { display: flex; flex-direction: column; gap: 40px; }
.sl-group { display: flex; flex-direction: column; gap: 16px; }
.sl-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 8px; border-bottom: 1px solid rgba(201, 169, 97, 0.28); }
.sl-group-title { font-family: var(--display); font-size: 30px; line-height: 1.3; color: var(--gold-soft); }
.sl-group-line { font-size: 14px; color: var(--star-muted); }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sl-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 16px 14px; text-align: left;
  font-family: var(--body); color: var(--star-text); background: var(--night-2);
  border: 1px solid rgba(201, 169, 97, 0.35); border-radius: 30px 30px 4px 4px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.sl-card:hover { border-color: var(--gold); background: var(--night-3); transform: translateY(-2px); }
.sl-card-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; }
.sl-card-name { font-family: var(--display); font-size: 28px; line-height: 1.2; color: var(--gold-soft); }
.sl-pill { flex: none; padding: 0 8px; font-size: 12px; letter-spacing: 0.1em; line-height: 22px; color: var(--gold); border: 1px solid var(--gold); border-radius: 2px; white-space: nowrap; }
.sl-card-line { flex: 1 1 auto; font-size: 14px; line-height: 1.75; color: var(--star-text); }
.sl-card-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-role { padding: 0 8px; font-size: 12px; line-height: 22px; color: var(--star-muted); background: rgba(201, 169, 97, 0.08); border-radius: 2px; }
.sl-empty { padding: 32px 0; text-align: center; color: var(--star-muted); }

body:has(.sl-dialog[open]) { overflow: hidden; }
.sl-dialog {
  padding: 0; width: min(720px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 900px);
  color: var(--star-text); background: var(--night-2); border: 1px solid var(--gold-dim); border-radius: 4px; overflow: hidden;
}
.sl-dialog[open] { display: flex; flex-direction: column; }
.sl-dialog::backdrop { background: rgba(8, 11, 20, 0.75); }
.sl-close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--gold-soft); background: rgba(15, 20, 32, 0.85); border: 1px solid var(--gold-dim); border-radius: 50%; cursor: pointer;
}
.sl-close:hover { border-color: var(--gold); }
.sl-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.sl-image { position: relative; width: 100%; aspect-ratio: 7 / 3; overflow: hidden; background: var(--night-3); border-bottom: 1px solid var(--gold-dim); }
.sl-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-image.is-empty { display: flex; align-items: center; justify-content: center; background: rgba(201, 169, 97, 0.05); border-bottom-style: dashed; }
.sl-image-note { font-size: 13px; letter-spacing: 0.25em; color: var(--gold-dim); }
.sl-detail { display: flex; flex-direction: column; gap: 14px; padding: 20px 26px 26px; }
.sl-detail-kicker { font-size: 13px; letter-spacing: 0.2em; color: var(--star-muted); }
.sl-detail-title { font-family: var(--display); font-size: 44px; line-height: 1.15; color: var(--gold-soft); }
.sl-detail-alias { margin-top: -6px; font-size: 14px; color: var(--star-muted); }
.sl-detail-line { font-family: var(--display); font-size: 20px; line-height: 1.6; color: var(--gold); }
.sl-detail-body { font-size: 15.5px; line-height: 1.95; color: var(--star-text); }
.sl-origin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sl-origin-label { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dim); }
.sl-syslink { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 14px; letter-spacing: 0.05em; text-decoration: none; color: var(--gold); border: 1px solid var(--gold); }
a.sl-syslink:hover { background: rgba(201, 169, 97, 0.16); color: var(--gold-soft); }
.sl-syslink.is-soon { color: var(--star-muted); border-style: dashed; border-color: var(--gold-dim); cursor: default; }
.sl-fields { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sl-field dt { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dim); }
.sl-field dd { margin: 2px 0 0; font-size: 15px; line-height: 1.85; color: var(--star-text); }
.sl-field.is-custom dd { padding: 10px 14px; border-left: 2px solid var(--gold); background: rgba(201, 169, 97, 0.07); }
.sl-stepper { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--gold-dim); }
.sl-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px;
  font-family: var(--body); font-size: 14px; letter-spacing: 0.1em; color: var(--gold-soft);
  background: transparent; border: 1px solid var(--gold-dim); cursor: pointer;
}
.sl-btn:hover { border-color: var(--gold); background: var(--night-3); }

@media (max-width: 639px) {
  .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sl-card { padding: 14px 12px 12px; border-radius: 22px 22px 4px 4px; }
  .sl-card-name { font-size: 24px; }
  .sl-card-line { font-size: 13px; }
  .sl-filter-label { width: 100%; }
  .sl-dialog { width: 100vw; height: 100vh; max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
  .sl-detail { padding: 16px 18px 22px; }
  .sl-detail-title { font-size: 38px; }
  .sl-detail-line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-card { transition: none; }
  .sl-card:hover { transform: none; }
}

/* ---------- 上古神话：关系图谱与故事长卷 ---------- */
.sh-view[hidden] { display: none; }
.sh-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.sh-tab {
  min-height: 44px; padding: 6px 22px; font-family: var(--body); font-size: 15px; letter-spacing: 0.15em;
  color: var(--star-text); background: transparent; border: 1px solid var(--gold-dim); cursor: pointer;
}
.sh-tab:hover { border-color: var(--gold); background: var(--night-3); }
.sh-tab.is-on { color: var(--gold-soft); border-color: var(--gold); background: rgba(201, 169, 97, 0.16); }

.sh-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 8px; }
.sh-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--star-muted); }
.sh-legend-name { color: var(--gold-soft); letter-spacing: 0.1em; }
.sh-hint { margin-bottom: 8px; font-size: 13px; color: var(--star-muted); }
.sh-graph-wrap { overflow-x: auto; border: 1px solid rgba(201, 169, 97, 0.28); background: var(--night-2); scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.sh-svg { display: block; width: 100%; min-width: 900px; height: auto; }
.sh-rowline { stroke: rgba(201, 169, 97, 0.16); stroke-width: 1; stroke-dasharray: 3 6; }
.sh-rowlabel { font-family: var(--display); font-size: 20px; opacity: 0.85; }
.sh-edge { transition: opacity 0.2s ease; }
.sh-edge-label { font-family: var(--body); font-size: 14px; fill: var(--star-muted); paint-order: stroke; stroke: var(--night-2); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.sh-node { cursor: pointer; transition: opacity 0.2s ease; }
.sh-node-bg { fill: var(--night); stroke-width: 1.4; transition: fill 0.2s ease; }
.sh-node:hover .sh-node-bg, .sh-node:focus .sh-node-bg { fill: var(--night-3); }
.sh-node:focus { outline: none; }
.sh-node:focus-visible .sh-node-bg { stroke-width: 2.6; }
.sh-node-text { font-family: var(--display); font-size: 24px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sh-svg.is-focus .sh-node:not(.is-on) { opacity: 0.25; }
.sh-svg.is-focus .sh-edge:not(.is-on) { opacity: 0.1; }
.sh-svg.is-focus .sh-edge.is-on .sh-edge-label { fill: var(--gold-soft); }

.sh-stories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 860px; }
.sh-story { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px dashed rgba(201, 169, 97, 0.28); }
.sh-story-no {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 19px; color: var(--night); background: var(--gold); border-radius: 50%;
}
.sh-story-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-story-title { font-family: var(--display); font-size: 30px; line-height: 1.3; color: var(--gold-soft); }
.sh-story-meaning { font-size: 14px; letter-spacing: 0.05em; color: var(--gold); }
.sh-story-text { font-size: 16px; line-height: 2; color: var(--star-text); }
.sh-story-source { font-size: 13.5px; line-height: 1.85; color: var(--star-muted); }
.sh-story-tip { padding: 8px 14px; font-size: 14px; line-height: 1.85; color: var(--star-text); border-left: 2px solid var(--gold-dim); background: rgba(201, 169, 97, 0.06); }
.sh-story-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-chip {
  min-height: 36px; padding: 2px 14px; font-family: var(--display); font-size: 18px; color: var(--gold-soft);
  background: transparent; border: 1px solid var(--gold-dim); cursor: pointer;
}
.sh-chip:hover { background: var(--night-3); }

.sh-rel-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-rel-btn {
  width: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; text-align: left;
  font-family: var(--body); font-size: 14px; color: var(--star-text); background: transparent; border: 1px solid rgba(201, 169, 97, 0.28); cursor: pointer;
}
.sh-rel-btn:hover { border-color: var(--gold); background: var(--night-3); }
.sh-rel-type { font-size: 12px; letter-spacing: 0.1em; }
.sh-rel-arrow { color: var(--gold-dim); }
.sh-rel-name { font-family: var(--display); font-size: 18px; color: var(--gold-soft); }
.sh-rel-label { font-size: 13px; color: var(--star-muted); }

.sh-huang { display: flex; flex-direction: column; gap: 16px; }
.sh-huang-head { font-size: 13px; letter-spacing: 0.3em; color: var(--gold-dim); }
.sh-huang-names { font-family: var(--display); font-size: 20px; color: var(--gold-soft); }

@media (max-width: 639px) {
  .sh-story { gap: 12px; }
  .sh-story-title { font-size: 26px; }
  .sh-story-text { font-size: 15px; }
  .sh-tab { flex: 1 1 0; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-edge, .sh-node { transition: none; }
}

/* ---------- 古籍书架 ---------- */
.gj-shelves { display: flex; flex-direction: column; gap: 34px; }
.gj-shelf { display: flex; flex-direction: column; gap: 14px; }
.gj-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; padding: 18px 18px 0; min-height: 210px; }
.gj-plank { height: 14px; margin: 0 -6px; background: #2a2416; border-top: 1px solid var(--gold-dim); border-bottom: 1px solid rgba(201, 169, 97, 0.2); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25); }
.gj-book {
  position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 58px; padding: 26px 0;
  background: #1f3b38; border: 1px solid var(--gold-dim); border-bottom: 0; border-radius: 3px 3px 0 0; cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.gj-book[data-cat="1"] { background: #232c4a; }
.gj-book[data-cat="2"] { background: #472a2a; }
.gj-book[data-cat="3"] { background: #37294a; }
.gj-book::before, .gj-book::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: rgba(201, 169, 97, 0.55); }
.gj-book::before { top: 12px; }
.gj-book::after { bottom: 12px; }
.gj-book:hover, .gj-book:focus-visible { transform: translateY(-16px); border-color: var(--gold); }
.gj-book-title { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--display); font-size: 25px; line-height: 1.1; letter-spacing: 0.15em; color: var(--gold-soft); }
.gj-book-core {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 13px; line-height: 1; color: var(--night); background: var(--gold); border-radius: 2px;
}
.gj-book:has(.gj-book-core) .gj-book-title { margin-top: 26px; }
.gj-purposes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 860px; }
.gj-purpose { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0; border-bottom: 1px dashed rgba(201, 169, 97, 0.28); }
.gj-purpose-want { flex: 1 1 260px; font-size: 15.5px; color: var(--star-text); }
.gj-purpose-books { display: flex; flex-wrap: wrap; gap: 8px; }
.gj-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.gj-core-card { text-align: left; font-family: var(--body); color: var(--star-text); cursor: pointer; }
.gj-core-card:hover { border-color: var(--gold); background: var(--night-3); }
.gj-chip { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 639px) {
  .gj-row { padding: 14px 8px 0; gap: 8px; }
  .gj-book { width: 50px; }
  .gj-book-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gj-book { transition: none; }
  .gj-book:hover, .gj-book:focus-visible { transform: none; }
}

/* ==========================================================
   道教神谱（三角形塔 + 右侧面板）：.dj-*
   详情弹窗沿用 .sl-* 的样式
   ========================================================== */
.dj-explore { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.dj-tower-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dj-tower { width: 100%; max-width: 520px; height: auto; display: block; }
.dj-tower-hint { font-size: 13px; letter-spacing: 0.15em; color: var(--star-muted); }
.dj-layer { cursor: pointer; outline: none; }
.dj-layer-bg { fill: rgba(201, 169, 97, 0.10); stroke: var(--gold-dim); stroke-width: 1.2; transition: fill 0.2s, stroke 0.2s; }
.dj-layer:hover .dj-layer-bg { fill: rgba(201, 169, 97, 0.22); stroke: var(--gold); }
.dj-layer:focus-visible .dj-layer-bg { stroke: var(--gold-soft); stroke-width: 2.4; }
.dj-layer.is-on .dj-layer-bg { fill: var(--gold); stroke: var(--gold-soft); }
.dj-layer.is-side .dj-layer-bg { stroke-dasharray: 5 4; fill: transparent; }
.dj-layer.is-side.is-on .dj-layer-bg { fill: var(--gold); }
.dj-layer-name { font-family: var(--display); font-size: 25px; text-anchor: middle; fill: var(--gold-soft); pointer-events: none; }
.dj-layer-count { font-size: 13px; letter-spacing: 0.1em; text-anchor: middle; fill: var(--star-muted); pointer-events: none; }
.dj-layer.is-on .dj-layer-name, .dj-layer.is-on .dj-layer-count { fill: var(--night); }
.dj-layer.is-side .dj-layer-name { font-size: 19px; }

.dj-panel {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  background: var(--night-2); border: 1px solid var(--gold-dim); border-top: 2px solid var(--gold); border-radius: 2px;
}
.dj-panel-head { display: flex; align-items: center; gap: 12px; }
.dj-tier-no {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  font-size: 14px; color: var(--night); background: var(--gold); border-radius: 50%;
}
.dj-tier-name { font-family: var(--display); font-size: 32px; line-height: 1.2; color: var(--gold-soft); }
.dj-tier-line { font-size: 15px; line-height: 1.8; color: var(--star-text); }
.dj-gods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dj-god {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
  padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--star-text);
  background: var(--night); border: 1px solid var(--gold-dim); border-radius: 2px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.dj-god:hover { border-color: var(--gold); background: var(--night-3); transform: translateY(-2px); }
.dj-god-name { font-family: var(--display); font-size: 22px; line-height: 1.25; color: var(--gold-soft); }
.dj-god-id { font-size: 12px; line-height: 1.55; color: var(--star-muted); }
.dj-tier-note { font-size: 13px; line-height: 1.8; color: var(--star-muted); padding-top: 10px; border-top: 1px dashed rgba(122, 106, 63, 0.6); }
@media (max-width: 860px) {
  .dj-explore { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dj-tower { max-width: 420px; }
  .dj-panel { padding: 18px 16px; }
}

/* ==========================================================
   佛教体系（六道轮回圆盘 + 三界 + 卡片墙）：.fj-*
   详情弹窗、卡片墙沿用 .sl-* 的样式，标签页沿用 .sh-tab
   ========================================================== */
.fj-tabpage { display: flex; flex-direction: column; gap: 28px; padding-top: 14px; }
.fj-tabpage[hidden] { display: none; }
.fj-explore { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.fj-wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fj-wheel { width: 100%; max-width: 520px; height: auto; display: block; }
.fj-hint { font-size: 13px; letter-spacing: 0.15em; color: var(--star-muted); }
.fj-wheel-ring { fill: none; stroke: var(--gold-dim); stroke-width: 1; stroke-dasharray: 3 6; }
.fj-wheel-arrow { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fj-sector { cursor: pointer; outline: none; }
.fj-sector-bg { fill: rgba(201, 169, 97, 0.10); stroke: var(--gold-dim); stroke-width: 1.2; transition: fill 0.2s, stroke 0.2s; }
.fj-sector:hover .fj-sector-bg { fill: rgba(201, 169, 97, 0.22); stroke: var(--gold); }
.fj-sector:focus-visible .fj-sector-bg { stroke: var(--gold-soft); stroke-width: 2.6; }
.fj-sector.is-on .fj-sector-bg { fill: var(--gold); stroke: var(--gold-soft); }
.fj-sector-name { font-family: var(--display); font-size: 27px; text-anchor: middle; fill: var(--gold-soft); pointer-events: none; }
.fj-sector-sub { font-size: 12px; letter-spacing: 0.1em; text-anchor: middle; fill: var(--star-muted); pointer-events: none; }
.fj-sector.is-on .fj-sector-name, .fj-sector.is-on .fj-sector-sub { fill: var(--night); }
.fj-hub { fill: var(--night-2); stroke: var(--gold); stroke-width: 1.4; }
.fj-hub-title { font-family: var(--display); font-size: 26px; text-anchor: middle; fill: var(--gold-soft); }
.fj-hub-sub { font-size: 12px; letter-spacing: 0.15em; text-anchor: middle; fill: var(--star-muted); }

.fj-panel {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  background: var(--night-2); border: 1px solid var(--gold-dim); border-top: 2px solid var(--gold); border-radius: 2px;
}
.fj-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.fj-panel-name { font-family: var(--display); font-size: 36px; line-height: 1.2; color: var(--gold-soft); }
.fj-panel-line { font-size: 16px; line-height: 1.8; color: var(--gold); }

.fj-worlds { display: flex; flex-direction: column; gap: 10px; }
.fj-world {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 16px 20px;
  background: var(--night-2); border: 1px solid var(--gold-dim); border-left: 3px solid var(--gold-dim); border-radius: 2px;
  transition: border-color 0.25s, background 0.25s;
}
.fj-world.is-hit { border-color: var(--gold); border-left-color: var(--gold); background: var(--night-3); }
.fj-world-name { font-family: var(--display); font-size: 30px; line-height: 1.2; color: var(--gold-soft); }
.fj-world-body { display: flex; flex-direction: column; gap: 8px; }
.fj-world-line { font-size: 15px; line-height: 1.8; color: var(--gold); }
@media (max-width: 860px) {
  .fj-explore { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fj-wheel { max-width: 420px; }
  .fj-panel { padding: 18px 16px; }
  .fj-world { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 14px; }
}

/* ==========================================================
   "神"入口页（三界地图）：.si-*
   ========================================================== */
.si-map { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--gold-dim); border-radius: 2px; overflow: hidden; }
.si-layer { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 26px 28px; }
.si-layer + .si-layer { border-top: 1px dashed var(--gold-dim); }
.si-layer-0 { background: radial-gradient(circle at 20% 30%, rgba(232, 220, 192, 0.10) 0 1px, transparent 2px) 0 0 / 46px 46px, radial-gradient(circle at 70% 60%, rgba(232, 220, 192, 0.08) 0 1px, transparent 2px) 0 0 / 61px 61px, linear-gradient(180deg, #1d2438, #161c2c); }
.si-layer-1 { background: var(--night-2); }
.si-layer-2 { background: linear-gradient(180deg, #121722, #0b0f18); }
.si-layer-side { display: flex; flex-direction: column; gap: 8px; }
.si-layer-char { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--gold); opacity: 0.9; }
.si-layer-name { font-family: var(--display); font-size: 28px; line-height: 1.2; color: var(--gold-soft); }
.si-layer-line { font-size: 15px; line-height: 1.7; color: var(--gold); }
.si-layer-note { font-size: 13px; line-height: 1.8; color: var(--star-muted); }
.si-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-content: start; }
.si-card { display: flex; flex-direction: column; gap: 8px; }
.si-card-main {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 16px 18px; text-decoration: none;
  color: var(--star-text); background: rgba(15, 20, 32, 0.78); border: 1px solid var(--gold-dim); border-radius: 2px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.si-card-main:hover { border-color: var(--gold); background: var(--night-3); transform: translateY(-2px); color: var(--star-text); }
.si-card-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; }
.si-card-name { font-family: var(--display); font-size: 28px; line-height: 1.2; color: var(--gold-soft); }
.si-card-line { flex: 1 1 auto; font-size: 14px; line-height: 1.75; color: var(--star-text); }
.si-card-go { font-size: 13px; letter-spacing: 0.15em; color: var(--gold); }
.si-extra { gap: 6px 8px; }
.si-extra .sl-syslink { min-height: 30px; padding: 0 10px; font-size: 13px; }
.si-thread {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px;
  padding: 18px 24px; text-decoration: none; color: var(--star-text);
  background: var(--night-2); border: 1px solid var(--gold-dim); border-left: 3px solid var(--gold); border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
}
.si-thread:hover { border-color: var(--gold); background: var(--night-3); color: var(--star-text); }
.si-thread-tag { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dim); }
.si-thread-name { font-family: var(--display); font-size: 28px; color: var(--gold-soft); }
.si-thread-line { font-size: 15px; color: var(--gold); }
.si-thread-note { grid-column: 2 / 4; font-size: 13px; line-height: 1.7; color: var(--star-muted); }
.si-thread .si-card-go { grid-column: 4; grid-row: 1 / 3; }
.si-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.si-route { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--night-2); border: 1px solid var(--gold-dim); border-radius: 2px; }
.si-route-name { font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--gold-soft); }
.si-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.si-arrow { color: var(--gold-dim); }
@media (max-width: 860px) {
  .si-layer { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px; }
  .si-layer-side { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .si-layer-char { font-size: 44px; }
  .si-layer-line, .si-layer-note { flex: 1 1 100%; }
  .si-thread { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .si-thread-note, .si-thread .si-card-go { grid-column: auto; grid-row: auto; }
}