/* ============================================================
   寒蝉鸣泣之时奉 攻略站 — styles.css
   继承主站 duojin-meow-portal 设计语言，独立样式文件
   ============================================================ */

:root {
  /* 配色（与主站一致） */
  --color-bg: #FAF9F6;
  --color-text: #1A1A1A;
  --color-accent: #FF6B00;
  --color-muted: #666666;
  --color-panel: #F2F0EB;
  --color-line: rgba(26, 26, 26, 0.1);
  /* 攻略站扩展色 */
  --color-core: #FF6B00;          /* 原版核心篇强调 */
  --color-side: #8a8378;          /* 番外篇次级色 */
  --color-warn: #d24f00;          /* 警告深橙 */
  --color-save: #2d6a4f;          /* 存档建议绿（可选提示） */
  --color-badend: #c1121f;        /* 坏结局红 */
  --color-bg-soft: #fff8eb;       /* 暖白前景（标题区文字） */
  --accent-soft: rgba(255, 107, 0, 0.08);   /* 橙浅底 */
  --accent-border: rgba(255, 107, 0, 0.36); /* 橙边 */
  /* 字体（与主站一致） */
  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-sans: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", sans-serif;
  --font-mono: "SF Mono", "Monaco", "Consolas", monospace;
  /* 圆角 */
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-panel: 26px;
  /* 阴影 */
  --shadow-card: 0 24px 80px rgba(26, 26, 26, 0.08);
  --shadow-soft: 0 12px 40px rgba(26, 26, 26, 0.06);
  --shadow-warn: 0 18px 60px rgba(255, 107, 0, 0.1);

  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* 首页：整页用头图当背景，深色蒙版，所有内容叠在上面 */
body.player-home {
  background-color: #0d0d0d;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
    url("images/higurashi-hou-store-hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-bg-soft);
  min-height: 100vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.18s ease;
}
a:hover { color: var(--color-warn); }

img { display: block; max-width: 100%; }

/* ============================================================
   排版基础
   ============================================================ */

.section {
  width: min(1080px, calc(100% - 40px));
  scroll-margin-top: 90px;
  margin: 0 auto;
  padding: 48px 0;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 12px;
}

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 17px;
  color: var(--color-muted);
  line-height: 1.85;
  max-width: 760px;
  margin: 0 0 8px;
}

/* ============================================================
   顶部导航
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 246, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-line);
}
/* 首页：整页深色背景，导航透明 + 浅字，无需滚动切换 */
body.player-home .site-header {
  background: transparent;
  border-bottom-color: transparent;
}
body.player-home .site-brand { color: var(--color-bg-soft); text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
body.player-home .site-brand-tag { background: rgba(255, 107, 0, 0.22); color: var(--color-accent); }
body.player-home .nav-link { color: var(--color-bg-soft); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
body.player-home .nav-link:hover { color: var(--color-accent); background: rgba(255, 107, 0, 0.22); }
body.player-home .nav-link.is-active { color: var(--color-accent); background: rgba(255, 107, 0, 0.22); }
body.player-home .nav-link-external { color: #fff; border-color: rgba(255,255,255,0.7); }
body.player-home .nav-link-external:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.site-header-inner {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
}

.site-brand-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: all 0.18s ease;
}
.nav-link:hover {
  color: var(--color-accent);
  background: var(--accent-soft);
}
.nav-link.is-active {
  color: var(--color-accent);
  background: var(--accent-soft);
}
/* 外链主站入口（橙色描边胶囊，区别于站内导航） */
.nav-link-external {
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.nav-link-external:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ============================================================
   Hero（首页用，全屏头图 + 深色蒙版，风格对齐主站）
   ============================================================ */

.hero {
  position: relative;
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 100px 24px 60px;
  color: var(--color-bg-soft);
}

/* 蒙版层：首页不再需要（body 已铺图+蒙版），保留 class 供 play-order 等页面用 */
.hero-overlay {
  display: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 18px;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.55);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--color-bg-soft);
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.62);
}

.hero-subtitle {
  font-size: 20px;
  line-height: 1.7;
  color: rgba(255, 248, 235, 0.85);
  margin: 0 0 36px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
}

/* ============================================================
   胶囊按钮
   ============================================================ */

.pill-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 800;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.pill-button:hover {
  border-color: var(--accent-border);
  transform: translateY(-1px);
}
.pill-button.primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
.pill-button.primary:hover {
  background: var(--color-warn);
  border-color: var(--color-warn);
}

/* ============================================================
   首页：四个功能定位块
   ============================================================ */

.home-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.home-feature {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  padding: 36px 34px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  color: var(--color-bg-soft);
  cursor: default;
  text-align: left;
  font: inherit;
  width: 100%;
}
button.home-feature {
  cursor: pointer;
}
a.home-feature {
  cursor: pointer;
  text-decoration: none;
}
a.home-feature:hover,
button.home-feature:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(255, 107, 0, 0.2);
  color: var(--color-bg-soft);
}
.home-feature.is-coming {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.3);
}

.home-feature-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}
.home-feature.is-coming .home-feature-num { color: rgba(255, 248, 235, 0.5); }

.home-feature-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.home-feature-title {
  font-family: var(--font-serif);
  font-size: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--color-bg-soft);
}
.home-feature-title .coming-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  background: rgba(255, 107, 0, 0.18);
  border: 1px solid rgba(255, 107, 0, 0.3);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.home-feature-desc {
  font-size: 16px;
  color: rgba(255, 248, 235, 0.62);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .home-features { grid-template-columns: 1fr; }
}

/* ============================================================
   剧透确认弹窗
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  padding: 20px;
  animation: modal-fade 0.2s ease;
}
.modal-overlay[hidden] { display: none; }

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  background: var(--color-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  padding: 36px 36px 30px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: modal-pop 0.25s ease;
}

@keyframes modal-pop {
  from { transform: scale(0.92) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-icon {
  font-size: 40px;
  color: var(--color-warn);
  margin-bottom: 12px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--color-text);
}
.modal-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-muted);
  margin: 0 0 24px;
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.intro-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  padding: 32px 36px;
  margin-bottom: 40px;
}

.intro-card p {
  margin: 0 0 14px;
  line-height: 1.9;
}
.intro-card p:last-child { margin-bottom: 0; }
.intro-card strong {
  color: var(--color-accent);
  font-weight: 800;
}
.intro-card .warn-inline {
  color: var(--color-warn);
  font-weight: 700;
}

/* ============================================================
   章节群容器
   ============================================================ */

.chapter-group {
  margin-bottom: 56px;
}

.chapter-group-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--accent-border);
}

.chapter-group-index {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.chapter-group-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.chapter-group-hint {
  font-size: 14px;
  color: var(--color-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   手风琴卡片（单篇）
   ============================================================ */

.accordion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}

.chapter-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chapter-card.is-open {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card);
}

/* 番外篇整体弱化 */
.chapter-card.is-side .chapter-card-header {
  background: rgba(242, 240, 235, 0.5);
}

.chapter-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease;
}
.chapter-card-header:hover {
  background: var(--accent-soft);
}
.chapter-card.is-open .chapter-card-header {
  background: var(--accent-soft);
}

/* 序号徽章 */
.chap-index {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  background: var(--color-accent);
  color: #fff;
}
.chapter-card.is-side .chap-index {
  background: var(--color-side);
}

/* 篇名 + 标签行 */
.chap-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chap-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-text);
}

.chap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.tag-core {
  background: var(--color-accent);
  color: #fff;
}
.tag-side {
  background: var(--color-panel);
  color: var(--color-side);
}
.tag-question { /* 出题篇 */ background: var(--color-accent); color: #fff; }
.tag-answer { /* 解题篇 */ background: #1A1A1A; color: var(--color-bg-soft); }
.tag-warn {
  background: rgba(193, 18, 31, 0.1);
  color: var(--color-badend);
}

/* 进入方式一句话 */
.chap-entry-hint {
  font-size: 14px;
  color: var(--color-muted);
  flex-shrink: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* 展开图标 */
.chap-toggle-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 20px;
  font-weight: 700;
  transition: transform 0.2s ease, color 0.18s ease;
}
.chapter-card.is-open .chap-toggle-icon {
  transform: rotate(45deg);
  color: var(--color-accent);
}

/* ============================================================
   手风琴展开内容
   ============================================================ */

.chapter-card-body {
  display: none;
  padding: 8px 22px 28px;
  border-top: 1px solid var(--color-line);
}
.chapter-card.is-open .chapter-card-body {
  display: block;
}

/* 内容区块标题 */
.body-block {
  margin: 20px 0 0;
}
.body-block-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 进入方式框 */
.entry-box {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.8;
}
.entry-box strong { color: var(--color-accent); font-weight: 800; }

/* 选项链列表 */
.choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: choice;
}
.choice-list li {
  position: relative;
  padding: 8px 0 8px 44px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
  line-height: 1.7;
  counter-increment: choice;
}
.choice-list li:last-child { border-bottom: none; }
.choice-list li::before {
  content: counter(choice);
  position: absolute;
  left: 0;
  top: 8px;
  width: 30px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  background: var(--color-panel);
  border-radius: 8px;
}

/* 关键步 ★ 标记 */
.choice-key {
  color: var(--color-accent);
  font-weight: 800;
}
.choice-arrow {
  color: var(--color-muted);
  font-weight: 700;
  margin: 0 4px;
}
.choice-note {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  background: var(--accent-soft);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}

/* 坏结局标记 */
.badend {
  color: var(--color-badend);
  font-weight: 700;
}
.badend-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-badend);
  background: rgba(193, 18, 31, 0.1);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}

/* TIPS 要点 */
.tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tips-list li {
  padding: 8px 0 8px 20px;
  position: relative;
  line-height: 1.7;
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
}
.tips-list li:last-child { border-bottom: none; }
.tips-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--color-accent);
  font-weight: 700;
}
.tips-name {
  font-weight: 700;
  color: var(--color-text);
}
.tips-effect {
  color: var(--color-muted);
  font-size: 14px;
  margin-left: 6px;
}

/* 存档/流程图提示框（降级为可选） */
.hint-box {
  background: rgba(45, 106, 79, 0.06);
  border: 1px solid rgba(45, 106, 79, 0.2);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-save);
}
.hint-box strong { color: var(--color-save); font-weight: 800; }

/* 剧透警告框 */
.warn-box {
  background: rgba(210, 79, 0, 0.06);
  border: 1px solid rgba(210, 79, 0, 0.3);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-warn);
  box-shadow: var(--shadow-warn);
}
.warn-box strong { color: var(--color-warn); font-weight: 800; }

/* 固定阅读提示 */
.fixed-read {
  background: var(--color-panel);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.7;
}
.fixed-read strong { color: var(--color-text); font-weight: 700; }

/* ============================================================
   顺序总览（横向五列，一屏看全）
   ============================================================ */

.overview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 28px;
}

/* 单列（一本书） */
.ov-book {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 列头：卷序号 + 卷名 */
.ov-book-head {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-panel);
}
.ov-book-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.ov-book-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

/* 篇章条目列表 */
.ov-list {
  list-style: none;
  margin: 0;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ov-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  line-height: 1.4;
  transition: background 0.18s ease;
}
/* 原版核心篇：橙色高亮 */
.ov-item.is-core {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}
/* 番外：灰色弱化 */
.ov-item.is-side {
  background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.06);
  opacity: 0.78;
}

.ov-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}
.ov-item.is-core .ov-mark {
  background: var(--color-accent);
  color: #fff;
}
.ov-item.is-side .ov-mark {
  background: var(--color-panel);
  color: var(--color-side);
}

.ov-item-body {
  flex: 1;
  min-width: 0;
}
.ov-chap-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.ov-item.is-side .ov-chap-name { color: var(--color-muted); }
.ov-chap-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 3px;
  color: var(--color-accent);
}
.ov-item.is-side .ov-chap-tag { color: var(--color-side); }

/* 响应式：窄屏横向滚动，保持一屏感 */
@media (max-width: 900px) {
  .overview-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .ov-book {
    flex: 0 0 200px;
    min-width: 200px;
  }
}

/* ============================================================
   页脚
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-panel);
  padding: 32px 0;
  margin-top: 48px;
}
.footer-inner {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  color: var(--color-muted);
}
.footer-inner a { color: var(--color-muted); font-weight: 600; }
.footer-inner a:hover { color: var(--color-accent); }

/* 首页 footer：透明叠在头图上，浅色文字 */
body.player-home .site-footer {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.12);
}
body.player-home .footer-inner { color: rgba(255, 248, 235, 0.6); }
body.player-home .footer-inner a { color: rgba(255, 248, 235, 0.6); }
body.player-home .footer-inner a:hover { color: var(--color-accent); }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 720px) {
  :root { font-size: 16px; }
  .section { padding: 36px 0; }
  .intro-card { padding: 22px 20px; }
  .chapter-card-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
  }
  .chap-entry-hint {
    max-width: 100%;
    width: 100%;
    order: 3;
    padding-top: 4px;
  }
  .chap-toggle-icon { order: 4; }
  .chapter-card-body { padding: 8px 16px 22px; }
  .accordion { grid-template-columns: 1fr; }
  .overview-table { font-size: 13px; }
  .overview-table th, .overview-table td { padding: 9px 8px; }
  .overview-table td.col-entry { font-size: 12px; }
  .site-nav { gap: 2px; }
  .nav-link { padding: 6px 10px; font-size: 12px; }
  .hero { padding: 90px 16px 44px; min-height: auto; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* 隐藏移动端不需要的元素 */
@media (max-width: 480px) {
  .chap-title { font-size: 17px; }
  .chapter-group-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 无障碍：尊重减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   问答页样式
   ============================================================ */

/* 搜索栏 */
.quiz-search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 20px;
  flex-wrap: wrap;
}

.quiz-search-input {
  flex: 1;
  min-width: 200px;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.quiz-search-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.quiz-search-input::placeholder { color: var(--color-muted); opacity: 0.7; }

.quiz-search-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  white-space: nowrap;
}

/* LEVEL 标签 */
.quiz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.quiz-tab {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.18s ease;
}
.quiz-tab:hover {
  border-color: var(--accent-border);
  color: var(--color-accent);
}
.quiz-tab.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* LEVEL 信息卡 */
.quiz-info {
  margin-bottom: 24px;
}
.quiz-info-text {
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.8;
  margin: 0;
}
.quiz-info-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 15px;
}
.quiz-info-lv {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--color-accent);
  font-size: 16px;
}
.quiz-info-pass strong { color: var(--color-accent); }
.quiz-info-unlock { color: var(--color-muted); }
.quiz-info-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
}

/* 表格容器 */
.quiz-table-wrap {
  overflow-x: auto;
}

.quiz-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-size: 14px;
}
.quiz-table th,
.quiz-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  vertical-align: top;
}
.quiz-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-panel);
  position: sticky;
  top: 0;
  z-index: 1;
}
.quiz-table tbody tr:hover {
  background: var(--accent-soft);
}
.quiz-table tr:last-child td { border-bottom: none; }

/* 列宽 */
.q-col-lv { width: 50px; font-family: var(--font-mono); font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.q-col-num { width: 44px; font-family: var(--font-mono); color: var(--color-muted); white-space: nowrap; }
.q-col-q { min-width: 200px; line-height: 1.6; }
.q-col-a { min-width: 100px; }
.q-col-a strong { color: var(--color-accent); font-weight: 800; }
.q-col-j { min-width: 150px; color: var(--color-muted); font-size: 13px; line-height: 1.5; }

/* 图片题标记 */
.q-img-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--color-badend);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-right: 6px;
  vertical-align: middle;
}

/* 空结果 */
.quiz-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-muted);
  font-size: 16px;
}

/* 问答页响应式 */
@media (max-width: 720px) {
  .quiz-search-input { height: 44px; font-size: 15px; }
  .quiz-tab { font-size: 12px; padding: 6px 12px; }
  .quiz-table { font-size: 13px; }
  .quiz-table th, .quiz-table td { padding: 8px 8px; }
  .q-col-j { display: none; } /* 移动端隐藏日文原题列 */
}

/* ============================================================
   剧情百科页样式
   ============================================================ */

/* 标签页 */
.wiki-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 32px;
}
.wiki-tab {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.18s ease;
}
.wiki-tab:hover {
  border-color: var(--accent-border);
  color: var(--color-accent);
}
.wiki-tab.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* 面板 */
.wiki-panel { display: none; }
.wiki-panel.is-active { display: block; }

.wiki-panel-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
}
.wiki-panel-desc {
  font-size: 15px;
  color: var(--color-muted);
  margin: 0 0 24px;
  line-height: 1.7;
}
.wiki-subtitle {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--color-text);
}

/* ---- 角色卡片（主角组）---- */
.char-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

.char-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--char-color, var(--color-accent));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.char-card.is-open {
  box-shadow: var(--shadow-card);
}

.char-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease;
}
.char-card-header:hover { background: var(--accent-soft); }

.char-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.char-head-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.char-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.char-jp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.3;
}
.char-club {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--accent-soft);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  margin-top: 4px;
}

.char-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-muted);
  transition: transform 0.2s ease, color 0.18s ease;
}
.char-card.is-open .char-toggle {
  transform: rotate(45deg);
  color: var(--color-accent);
}

.char-card-body {
  display: none;
  padding: 0 18px 20px;
  border-top: 1px solid var(--color-line);
}
.char-card.is-open .char-card-body {
  display: block;
}

.char-info {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px 14px;
  margin: 16px 0 14px;
  font-size: 14px;
}
.char-info dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  padding-top: 2px;
}
.char-info dd {
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
}

.char-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  padding: 12px 14px;
  background: var(--color-panel);
  border-radius: 12px;
}

/* ---- 配角组 ---- */
.char-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.char-sub-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.char-sub-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 4px;
}
.char-sub-role {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  margin: 0 0 4px;
}
.char-sub-cv {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 8px;
}
.char-sub-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* ---- 世界观设定卡片 ---- */
.setting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.setting-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 20px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.setting-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.setting-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.setting-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 800;
}
.setting-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}
.setting-summary {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 10px;
  line-height: 1.6;
}
.setting-detail {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.8;
}

/* ---- 症候群表格 ---- */
.syndrome-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-size: 14px;
}
.syndrome-table th,
.syndrome-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.syndrome-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-panel);
}
.syndrome-table tr.is-severe { background: rgba(193, 18, 31, 0.04); }
.syndrome-table tr:last-child td { border-bottom: none; }
.syn-level {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--color-accent);
  white-space: nowrap;
}
.syndrome-table tr.is-severe .syn-level { color: var(--color-badend); }
.syn-name { font-weight: 700; }
.syn-symptom { line-height: 1.6; }
.syn-example { color: var(--color-muted); font-size: 13px; }
.syn-action { color: var(--color-muted); font-size: 13px; }

/* ---- Spoiler 遮罩 ---- */
.spoiler {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 16px;
}
.spoiler-content {
  padding: 24px 26px;
}
.spoiler-item {
  margin-bottom: 20px;
}
.spoiler-item:last-child { margin-bottom: 0; }
.spoiler-item h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--color-warn);
  margin: 0 0 8px;
}
.spoiler-item p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  color: var(--color-text);
}

.spoiler-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(8px);
  color: var(--color-bg-soft);
  cursor: pointer;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.spoiler-cover .spoiler-icon {
  font-size: 32px;
  color: var(--color-warn);
}
.spoiler-cover span:nth-child(2) {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
}
.spoiler-action {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spoiler.is-revealed .spoiler-cover {
  opacity: 0;
  pointer-events: none;
}

/* ---- 版本时间线 ---- */
.timeline {
  position: relative;
  padding-left: 32px;
  margin-top: 24px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-line);
}
.timeline-item {
  position: relative;
  margin-bottom: 28px;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -27px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-muted);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-line);
}
.timeline-dot.is-highlight {
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--accent-border);
}
.timeline-content {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 18px 22px;
}
.timeline-content:has(.timeline-dot.is-highlight),
.timeline-item:has(.is-highlight) .timeline-content {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.timeline-date {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}
.timeline-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  margin: 4px 0 4px;
}
.timeline-platform {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 8px;
}
.timeline-content > p:last-child {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* 百科页响应式 */
@media (max-width: 720px) {
  .char-grid { grid-template-columns: 1fr; }
  .wiki-tab { font-size: 13px; padding: 8px 14px; }
  .syndrome-table { font-size: 12px; }
  .syndrome-table th, .syndrome-table td { padding: 8px 8px; }
  .timeline { padding-left: 26px; }
  .chap-wiki-meta { flex-direction: column; gap: 2px; }
}

/* ============================================================
   篇章梗概样式
   ============================================================ */

.chap-group-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 800;
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-border);
  color: var(--color-text);
}
.chap-group-title:first-child { margin-top: 20px; }

.chap-wiki-card {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: box-shadow 0.18s ease;
}
.chap-wiki-card.is-core {
  border-left: 4px solid var(--color-accent);
}
.chap-wiki-card.is-side {
  border-left: 4px solid var(--color-side);
  opacity: 0.82;
}

.chap-wiki-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.chap-wiki-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}
.chap-wiki-type {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.chap-wiki-type.tag-core { background: var(--color-accent); color: #fff; }
.chap-wiki-type.tag-side { background: var(--color-panel); color: var(--color-side); }

.chap-wiki-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.chap-wiki-era {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}
.chap-wiki-first {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
}

.chap-wiki-summary {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}

/* ============================================================
   外传角色群像样式
   ============================================================ */

.guest-group {
  margin-bottom: 28px;
}
.guest-group-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--color-text);
}
.guest-group-src {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  margin-left: 8px;
}
.guest-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.guest-member {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.guest-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
}
.guest-role {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  line-height: 1.4;
}
.guest-cv {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
}

/* ============================================================
   组织架构树样式
   ============================================================ */

.org-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
}
.org-desc {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 16px;
  line-height: 1.6;
}

.org-tree {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  box-shadow: var(--shadow-soft);
}

.org-level {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.org-level-row {
  flex-wrap: wrap;
}

.org-node {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center;
  min-width: 140px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.org-node.is-top {
  border-color: var(--color-muted);
  background: var(--color-panel);
}
.org-node.is-highlight {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--color-accent);
  font-size: 16px;
}
.org-node.is-side {
  opacity: 0.72;
  font-size: 14px;
}
.org-role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
}

.org-connector {
  width: 2px;
  height: 20px;
  background: var(--color-line);
  margin: 0 auto;
}

.org-divider {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  margin: 16px 0;
}

/* 组织架构响应式 */
@media (max-width: 720px) {
  .org-level { flex-direction: column; align-items: center; }
  .org-level-row { flex-direction: row; }
  .org-node { min-width: 110px; font-size: 14px; padding: 8px 12px; }
}

/* ============================================================
   Switch 奉版本更新样式
   ============================================================ */

.version-update-section {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px dashed var(--color-line);
}
.version-update-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--color-text);
}
.version-update-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

/* 版本对比表 */
.version-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-size: 14px;
}
.version-table th,
.version-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  line-height: 1.7;
}
.version-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-panel);
}
.version-table tr:last-child td { border-bottom: none; }
.ver-num {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--color-muted);
  white-space: nowrap;
  width: 70px;
}
.ver-num.is-major {
  color: var(--color-accent);
}
.ver-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
  width: 120px;
}
.ver-list {
  margin: 0;
  padding-left: 18px;
}
.ver-list li { margin-bottom: 4px; }
.ver-note {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  margin-left: 4px;
}

/* DLC 专栏 */
.dlc-box {
  margin-top: 24px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  box-shadow: var(--shadow-warn);
}
.dlc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dlc-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-accent);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.dlc-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}
.dlc-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
}
.dlc-type {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 16px;
  line-height: 1.6;
}
.dlc-features {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dlc-features li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 107, 0, 0.12);
}
.dlc-features li:last-child { border-bottom: none; }
.dlc-features strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 4px;
}
.dlc-features span {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}
.dlc-source {
  font-size: 12px;
  color: var(--color-muted);
  margin: 16px 0 0;
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 720px) {
  .version-table { font-size: 12px; }
  .version-table th, .version-table td { padding: 8px 8px; }
  .dlc-box { padding: 18px 16px; }
}

/* ============================================================
   路线图页样式
   ============================================================ */

/* 图例 */
.route-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 28px;
  font-size: 14px;
  color: var(--color-muted);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-swatch {
  display: inline-block;
  width: 18px;
  height: 14px;
  border-radius: 4px;
}
.legend-core { background: var(--color-accent); }
.legend-side { background: var(--color-panel); border: 1px solid #ccc; }
.legend-gate { background: #1a1a1a; }
.legend-branch { background: #fff8eb; border: 2px solid var(--color-accent); }

/* 章节标题 */
.route-section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
}
.route-section-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0 0 20px;
}

/* 缩放控件（sticky 在路线图框内右上角，跟随框内滚动常驻） */
.zoom-controls {
  position: sticky;
  top: 8px;
  /* sticky 横向定位：右浮 + 留出滚动条宽度，避免被遮挡 */
  margin-left: auto;
  margin-right: 0;
  width: fit-content;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: 4px;
  margin-bottom: 8px;
}
.zoom-btn {
  min-width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.zoom-btn:hover {
  background: var(--accent-soft);
  color: var(--color-accent);
}
.zoom-display {
  font-size: 13px;
  min-width: 52px;
}

/* 缩放视口（可滚动，高度顶满视口） */
.zoom-viewport {
  overflow: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  /* 顶满视口：减去导航栏 + 页面顶部 padding + 标题/图例/说明占位 */
  height: calc(100vh - 140px);
  min-height: 520px;
}

/* 缩放内容（被缩放的元素，横向居中） */
.zoom-content {
  transform-origin: top center;
  transition: transform 0.2s ease;
  width: fit-content;
  margin: 0 auto;
}

/* Mermaid 图样式覆盖 */
.zoom-content .mermaid {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.zoom-content .mermaid svg {
  max-width: none !important;
}

/* 路线图响应式 */
@media (max-width: 720px) {
  .zoom-controls {
    padding: 3px;
  }
  .zoom-btn { min-width: 32px; height: 32px; font-size: 16px; padding: 0 8px; }
  .zoom-display { font-size: 11px; min-width: 42px; }
  .route-legend { gap: 12px; font-size: 12px; }
  .zoom-viewport { padding: 14px; height: calc(100vh - 160px); min-height: 420px; }
}