/* ============================================
   rules.css — 规则书阅读器布局样式
   配合 page-render.js renderRules() 使用
   暗底（#0d0d0d）、金色（#c9a84c）点缀、纯文字流式排版
   视觉风格对齐 worldview 世界观页面

   布局结构：
   .reader-layout (flex column)
     ├── .reader-nav-wrapper (sticky top)
     │     ├── .reader-nav (横向章节标签)
     │     └── .sub-nav-bar (子章节 pills，按需显示)
     └── .reader-main (正文区)
   ============================================ */

/* ---- 配色变量：与 worldview 世界观页面保持一致 ---- */
:root {
  --ash-dark: #0d0d0d;
  --ash-darker: #080808;
  --ash-gray: #1a1a1a;
  --ash-medium: #2d2d2d;
  --ash-light: #4a4a4a;
  --ash-dim: #8a8a8a;
  --ash-text: #c9c5b8;
  --ash-gold: #c9a84c;
  --ash-gold-dim: #8a7340;
  --ash-red: #8b3a3a;
  --ash-ember: #d46b3a;
  --ash-blue: #4a7c8a;
}

/* ---- 金边装饰线增强：置于「游戏规则」标题正下方 ---- */
.page-header--compact .divider {
  width: 80px;
  height: 2px;
  margin: 10px auto 6px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, var(--ash-gold-dim), var(--ash-gold), var(--ash-gold-dim), transparent);
}

/* ---- 种族分支导航 pills（已弃用，保留空壳） ---- */
.branch-nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 12px;
  padding: 0;
}
.branch-pill {
  padding: 4px 14px;
  font-size: 0.82rem;
  color: var(--ash-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.branch-pill:hover {
  color: var(--ash-gold);
}
.branch-pill.active {
  color: var(--ash-gold);
}

/* ---- 分支标题 ---- */
.branch-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--ash-gold);
  margin: 28px 0 10px;
  padding-bottom: 8px;
  scroll-margin-top: 12px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}

/* ---- 种族特质展示 ---- */
.race-traits-section {
  margin-top: 20px;
  padding-top: 16px;
}
.trait-item {
  margin-bottom: 12px;
  padding: 10px 0;
  background: transparent;
}
.trait-name {
  font-size: 0.9rem;
  color: var(--ash-gold);
  display: block;
  margin-bottom: 4px;
}
.trait-desc {
  font-size: 0.85rem;
  color: var(--ash-text);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
}

/* ---- 阅读器整体布局：上下堆叠 ---- */
.reader-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  position: relative;
}

/* ---- 顶部导航包裹层（sticky，极简） ---- */
.reader-nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.98);
}

/* ---- 横向章节标签导航（始终横向） ---- */
.reader-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px;
  gap: 8px;
  /* 隐藏横向滚动条 */
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.reader-nav::-webkit-scrollbar {
  display: none;
}

/* 导航标题（桌面端显示在左侧） */
.reader-nav-title {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: var(--ash-gold-dim);
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  flex-shrink: 0;
  display: none; /* 桌面端也隐藏，空间留给标签 */
  align-self: center;
  opacity: 0.5;
}

/* ---- 章节标签 — 极细金线选中指示 ---- */
.chapter-tab {
  flex-shrink: 0;
  padding: 6px 16px 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  color: var(--ash-dim);
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.chapter-tab .tab-title {
  display: inline;
}

.chapter-tab .tab-num {
  display: none;
}

.chapter-tab:hover {
  color: var(--ash-gold);
  border-bottom-color: rgba(201, 168, 76, 0.3);
}

.chapter-tab.active {
  color: var(--ash-gold);
  border-bottom-color: rgba(201, 168, 76, 0.5);
  background: transparent;
  font-weight: 600;
}

/* 空内容标签灰态 */
.chapter-tab.empty {
  color: var(--ash-medium);
  cursor: default;
}

.chapter-tab.empty .tab-num,
.chapter-tab.empty .tab-title {
  color: var(--ash-medium);
}

.chapter-tab.empty:hover {
  color: var(--ash-dim);
  background: transparent;
}

/* ---- 子章节导航条 ---- */
.sub-nav-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: rgba(13, 13, 13, 0.95);
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity:0;
  /* 拖拽时禁用文字选中 */
  -webkit-user-select: none;
  user-select: none;
}

.sub-nav-bar.visible {
  min-height: 36px;
  max-height: 80px;
  opacity: 1;
  padding: 8px 40px;       /* 左右留出箭头空间 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* 右侧渐变提示 */
  mask-image: linear-gradient(to right, transparent 0, black 20px, calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, calc(100% - 40px), transparent 100%);
}

.sub-nav-bar.visible:active {
  cursor: grabbing;
}

/* 彻底隐藏滚动条 */
.sub-nav-bar::-webkit-scrollbar { display: none; }
.sub-nav-bar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- 左右滚动箭头（已废弃，保留空壳） ---- */
.scroll-arrows { display: none; }
.scroll-arrow-btn { display: none; }

/* 子章节 pill — 极细金线选中指示 */
.sub-pill {
  flex-shrink: 0;
  padding: 4px 14px 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ash-dim);
  font-size: 0.85rem;
  font-family: 'Noto Serif SC', serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0.04em;
  position: relative;
}

.sub-pill:hover {
  color: var(--ash-gold);
  border-bottom-color: rgba(201, 168, 76, 0.3);
}

.sub-pill.active {
  color: var(--ash-gold);
  border-bottom-color: rgba(201, 168, 76, 0.5);
  background: transparent;
  font-weight: 600;
}

/* ---- 第三层导航：技能条目 pills ---- */
.detail-nav-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  background: rgba(13, 13, 13, 0.92);
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s ease;
  opacity:0;
  -webkit-user-select: none;
  user-select: none;
}

.detail-nav-bar.visible {
  min-height: 32px;
  max-height: 70px;
  opacity: 1;
  padding: 6px 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  mask-image: linear-gradient(to right, transparent 0, black 20px, calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, calc(100% - 40px), transparent 100%);
}

.detail-nav-bar.visible:active {
  cursor: grabbing;
}

/* 彻底隐藏滚动条 */
.detail-nav-bar::-webkit-scrollbar { display: none; }
.detail-nav-bar { -ms-overflow-style: none; scrollbar-width: none; }

/* 技能条目 pill（第三层）— 极细金线选中指示 */
.detail-pill {
  flex-shrink: 0;
  padding: 3px 12px 5px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--ash-dim);
  font-size: 0.8rem;
  font-family: 'Noto Serif SC', serif;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1.6;
  position: relative;
}

.detail-pill:hover {
  color: var(--ash-gold);
  border-bottom-color: rgba(201, 168, 76, 0.3);
}

.detail-pill.active {
  color: var(--ash-gold);
  border-bottom-color: rgba(201, 168, 76, 0.5);
  background: transparent;
  font-weight: 600;
}

/* ---- 章节概述区域 — 无边框纯文字 ---- */
.chapter-overview {
  margin-bottom: 28px;
  padding: 20px 0;
  background: transparent;
}

.chapter-overview .overview-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--ash-gold);
  margin: 20px 0 10px;
  letter-spacing: 0.06em;
}

.chapter-overview .overview-title:first-child {
  margin-top: 4px;
}

.chapter-overview .overview-subtitle {
  font-size: 1rem;
  color: var(--ash-gold);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}

.chapter-overview p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ash-text);
  margin-bottom: 10px;
  text-align: justify;
}

/* ---- 子分类前言区域 — 无边框纯文字 ---- */
.sub-section-preface {
  margin-bottom: 24px;
  padding: 16px 0;
  background: transparent;
}

.sub-preface-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: var(--ash-gold);
  margin: 0 0 12px;
  letter-spacing: 0.05em;
}

.sub-section-preface .overview-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ash-gold);
  margin: 16px 0 8px;
}

.sub-section-preface p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ash-text);
  margin-bottom: 10px;
  text-align: justify;
}

/* ---- 内容小标题样式（中文+冒号格式） ---- */
.content-subheading {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ash-gold);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
}

/* ---- 子分类快速目录（章节概览模式下的分类卡片列表） ---- */
.sub-category-list {
  margin-top: 8px;
}

.sub-cat-list-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ash-gold);
  margin-bottom: 14px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.sub-category-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  margin: 6px 6px 6px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  touch-action: manipulation;
}

.sub-category-card:hover {
  background: rgba(26, 26, 26, 0.6);
  transform: translateY(-1px);
}

.sub-category-card:active {
  transform: translateY(0);
}

.sub-category-card .sub-cat-name {
  font-size: 0.9rem;
  color: var(--ash-text);
  white-space: nowrap;
}

.sub-category-card:hover .sub-cat-name {
  color: var(--ash-gold);
}

.sub-category-card .sub-cat-count {
  font-size: 0.72rem;
  color: var(--ash-gold-dim);
  background: transparent;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---- 技能条目列表视图（子分类下的条目列表） ---- */
.ability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 16px;
}

/* 可点击技能卡片 */
.ability-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: transparent;
  border: none;
  color: var(--ash-text);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.ability-item::after {
  content: '→';
  font-size: 0.7rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  color: var(--ash-gold);
}

.ability-item:hover {
  color: var(--ash-gold);
  background: rgba(26, 26, 26, 0.5);
  transform: translateY(-1px);
}

.ability-item:hover::after {
  opacity: 0.6;
  transform: translateX(0);
}

.ability-item.active {
  color: var(--ash-gold);
}

.ability-item .ability-tag-hint {
  font-size: 0.62rem;
  padding: 1px 6px;
  background: transparent;
  color: var(--ash-gold-dim);
  font-family: 'Noto Sans SC', sans-serif;
}

/* ---- 技能详情视图 ---- */
.ability-detail {
  margin-top: 16px;
  animation: fadeInUp 0.25s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 技能主标题（选中技能时）— 对齐 section-title 风格 */
.ability-main-title {
  text-align: left;
  padding: 8px 0 12px;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.ability-main-title h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  color: var(--ash-gold);
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.ability-main-title .detail-eb {
  font-size: 0.82rem;
  color: var(--ash-gold-dim);
  font-family: 'Noto Serif SC', serif;
  margin-top: 2px;
  display: block;
}
/* 隐藏旧居中分隔线 */
.ability-main-title .heading-divider {
  display: none;
}

.ability-detail .detail-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ability-detail .detail-header h4 {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: var(--ash-gold);
  margin: 0;
  letter-spacing: 0.04em;
}

.ability-detail .detail-header .detail-eb {
  font-size: 0.82rem;
  color: var(--ash-gold-dim);
  font-family: 'Noto Serif SC', serif;
}

.ability-detail .detail-desc {
  color: var(--ash-text);
  line-height: 1.8;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.ability-detail .detail-desc p {
  margin-bottom: 16px;
  text-indent: 0;
  text-align: justify;
}

/* 等级表格增强样式 */
.ability-detail .level-table {
  margin-top: 12px;
  font-size: 0.84rem;
}

/* 种族详情 — 开放流式 */
.race-detail {
  padding: 8px 0 0;
}

.race-detail .detail-header h2 {
  font-size: 1.4rem;
  color: var(--ash-gold);
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.race-detail .attr-bars-mini {
  margin: 16px 0;
}

.race-detail-body {
  margin-top: 12px;
  line-height: 1.8;
}

.race-detail-body p {
  margin-bottom: 16px;
  text-align: justify;
}

/* 技能关键词标签 */
.ability-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ability-keywords .kw-tag {
  font-size: 0.68rem;
  padding: 2px 10px;
  background: transparent;
  border: none;
  color: #8cd4a0;
  font-family: 'Noto Sans SC', sans-serif;
}

/* ---- 内容面板（开放流式排版，对齐世界观页风格） ---- */
.reader-main {
  padding: 16px 40px 60px;
  overflow-y: visible;
  flex: 1;
}

/* ---- 章节面板 — 开开流式（无卡片框，对齐世界观页） ---- */
.reader-chapter {
  padding: 8px 0 0;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  min-height: auto;
}

/* 移除玻璃微光 */
.reader-chapter::before {
  display: none;
}

/* 章节标题 — 对齐世界观 .section-title 风格（金色下划线） */
.reader-chapter .chapter-heading {
  text-align: left;
  margin: 8px 0 16px;
}

.reader-chapter .chapter-heading .chapter-num {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--ash-gold-dim);
  letter-spacing: 0.12em;
  margin-bottom: 2px;
  display: block;
}

.reader-chapter .chapter-heading h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ash-gold);
  letter-spacing: 0.15em;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

/* 隐藏居中分隔线 — 已由 border-bottom 替代 */
.reader-chapter .chapter-heading .heading-divider {
  display: none;
}

/* 章节内容 — 对齐 worldview .text-block 排版 */
.reader-chapter .chapter-body {
  color: var(--ash-text);
  line-height: 1.8;
  font-size: 0.95rem;
}

.reader-chapter .chapter-body p {
  margin-bottom: 18px;
  text-align: justify;
}

.reader-chapter .chapter-body h3 {
  color: var(--ash-gold);
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  margin: 32px 0 14px;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}

.reader-chapter .chapter-body h4 {
  color: var(--ash-gold);
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
}

/* 子章节分隔 — 更轻 */
.reader-chapter .sub-section {
  margin-top: 32px;
  padding-top: 24px;
}

.reader-chapter .sub-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---- 占位/空内容章节 ---- */
.chapter-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: var(--ash-dim);
  font-size: 1rem;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.05em;
}
.chapter-placeholder::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto 16px;
}

/* ---- 下一章按钮（速查模式已禁用，保留样式以防回退） ---- */
.next-chapter-btn {
  display: none;
  margin: 0 auto;
  padding: 12px 36px;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 4px;
  color: var(--ash-gold);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.next-chapter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 168, 76, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.next-chapter-btn:hover::before {
  opacity: 1;
}

.next-chapter-btn:hover {
  border-color: rgba(201, 168, 76, 0.6);
  box-shadow:
    0 0 24px rgba(201, 168, 76, 0.1),
    0 0 0 1px rgba(201, 168, 76, 0.1);
  color: #e0cc80;
  transform: translateY(-1px);
}

.next-chapter-btn:active {
  transform: translateY(0);
}

/* 最后章节的下一章按钮隐藏 */
.next-chapter-btn.last-chapter {
  opacity: 0.4;
  pointer-events: none;
}

.next-chapter-btn.last-chapter::after {
  content: '（已到末章）';
  font-size: 0.65rem;
  opacity: 0.5;
  margin-left: 8px;
}

/* 兼容降级：IntersectionObserver 不支持时始终显示按钮 */
@supports not (selector(:has(*))) {
  .next-chapter-btn {
    display: block !important;
  }
}

/* ---- 种族卡片（ch2 内部） ---- */
.race-card {
  background: transparent;
  border: none;
  padding: 20px 0;
  margin-bottom: 16px;
  transition: none;
}

.race-card:hover {
  background: rgba(26, 26, 26, 0.5);
}

.race-card .race-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.race-card .race-header h4 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ash-gold);
  margin: 0;
}

.race-card .race-desc {
  color: var(--ash-text);
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 10px;
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

/* 属性条 (种族卡片内) */
.attr-bars-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 10px 0;
}

.attr-bars-mini .attr-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
}

.attr-bars-mini .attr-item .attr-label {
  color: var(--ash-gold-dim);
  width: 24px;
  text-align: right;
}

.attr-bars-mini .attr-item .attr-bar {
  display: inline-block;
  height: 6px;
  border-radius: 3px;
  min-width: 4px;
}

.attr-bars-mini .attr-item .attr-val {
  font-size: 0.68rem;
}

.attr-val.pos { color: var(--ash-gold); }
.attr-val.neg { color: var(--ash-red); }
.attr-val.zero { color: #777; }

/* 特质标签列表 */
.trait-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.trait-tag {
  font-size: 0.72rem;
  padding: 3px 10px;
  background: transparent;
  border: none;
  color: var(--ash-gold-dim);
  cursor: default;
}

/* ---- 等级表格（极简无边框） ---- */
.level-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.85rem;
  background: transparent;
  border: none;
}

.level-table thead th {
  background: transparent;
  color: var(--ash-gold);
  padding: 10px 14px;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.level-table tbody td {
  padding: 8px 14px;
  color: var(--ash-text);
}

.level-table tbody tr:hover td {
  background: rgba(201, 168, 76, 0.03);
}

/* ---- 版本标签 ---- */
.version-tag {
  font-size: 0.62rem;
  padding: 2px 8px;
  vertical-align: middle;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0;
  display: inline-block;
}
.version-tag.new {
  color: #0c8;
}
.version-tag.modified {
  color: var(--ash-gold);
}

/* ---- 防御表格（攻击形态） ---- */
.attack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.attack-card {
  background: transparent;
  border: none;
  padding: 14px 0;
}
.attack-card h4 {
  color: var(--ash-ember);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.attack-card p {
  color: var(--ash-text);
  font-size: 0.84rem;
  line-height: 1.8;
  margin-bottom: 6px;
}
.tag-avail { color: #6bba6b; font-size: 0.78rem; }
.tag-unavail { color: #ba6b6b; font-size: 0.78rem; }
.tag-special { color: #c9a84c; font-size: 0.78rem; }

/* ---- 占位符（初始加载用，JS 填充前展示） ---- */
.rules-placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--ash-gold-dim);
}
.rules-placeholder h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: var(--ash-gold);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.rules-placeholder p {
  font-size: 1rem;
  color: var(--ash-gold-dim);
}

/* ---- 响应式：桌面端保持横向，移动端压缩尺寸 ---- */

/* 中等屏幕（≤1024px）：收窄阅读区 */
@media (max-width: 1024px) {
  .reader-main {
    padding: 20px 24px 60px;
  }
  .reader-chapter {
    padding: 24px 28px;
  }
}

/* 移动端（<=768px）：导航更紧凑，阅读区收窄 */
@media (max-width: 768px) {
  .reader-nav-wrapper {
    top: 0;
  }

  .reader-nav {
    padding: 6px 12px;
    gap: 4px;
  }

  .chapter-tab {
    padding: 4px 10px 6px;
    min-height: 28px;
    font-size: 0.82rem;
  }

  /* 移动端显示章节名，隐藏编号（全局已隐藏） */
  .chapter-tab .tab-title {
    display: inline;
  }

  /* 子章节 pills 移动端 */
  .sub-nav-bar.visible {
    padding: 6px 36px;
    gap: 6px;
  }

  .sub-pill {
    padding: 3px 12px 5px;
    font-size: 0.78rem;
  }

  /* 阅读区 */
  .reader-main {
    padding: 16px 14px 48px;
  }

  .reader-chapter {
    padding: 8px 0 0;
  }

  .reader-chapter .chapter-heading h2 {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
  }

  .reader-chapter .chapter-body {
    font-size: 0.93rem;
    line-height: 1.8;
  }

  /* 等级表格横向滚动 */
  .level-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.82rem;
  }
  .level-table thead th,
  .level-table tbody td {
    padding: 8px 10px;
    white-space: normal;
    min-width: 56px;
  }

  /* 攻击形态网格 */
  .attack-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 极小屏（<=480px）导航项更紧凑 */
@media (max-width: 480px) {
  .reader-nav {
    padding: 4px 8px;
    gap: 3px;
  }

  .chapter-tab {
    padding: 4px 8px 6px;
    font-size: 0.78rem;
    min-height: 26px;
  }

  /* 极小屏显示章节名，隐藏编号（全局已隐藏） */
  .chapter-tab .tab-title {
    display: inline;
  }

  .sub-pill {
    padding: 3px 10px 5px;
    font-size: 0.72rem;
  }

  .detail-pill {
    padding: 2px 8px 4px;
    font-size: 0.68rem;
  }

  .reader-chapter {
    padding: 4px 0 0;
  }

  .reader-chapter .chapter-heading h2 {
    font-size: 1.1rem;
  }

  .reader-chapter .chapter-body {
    font-size: 0.92rem;
  }

  .reader-main {
    padding: 12px 12px 36px;
  }
}

/* ---- 通用内容表格（ew-table，由 table_to_html 生成） ---- */
.ew-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.85rem;
  background: transparent;
  border: none;
}
.ew-table thead th {
  background: rgba(201, 168, 76, 0.08);
  color: var(--ash-gold);
  padding: 8px 12px;
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}
.ew-table tbody td {
  padding: 7px 12px;
  color: var(--ash-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ew-table tbody tr:hover td {
  background: rgba(201, 168, 76, 0.04);
}
.ew-table tbody tr:last-child td {
  border-bottom: none;
}

/* 移动端：表格横向滚动 */
@media (max-width: 768px) {
  .chapter-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ew-table {
    min-width: 480px;
    font-size: 0.82rem;
  }
  .ew-table thead th,
  .ew-table tbody td {
    padding: 7px 10px;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════
   能力条目卡片（.ability-card）— 由 build_ch4_full.py 渲染
   替代原始 docx 的合并单元格表格，展示神术/技能详情
   ══════════════════════════════════════════════════════════ */
.ability-card {
  margin: 18px 0;
  padding: 16px 18px;
  background: rgba(26, 26, 26, 0.5);
  border-left: 3px solid var(--ash-gold-dim);
  border-radius: 0 6px 6px 0;
}
/* 元信息栏：类型 | MP | 前置 | 最大等级 */
.ability-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.ab-type {
  font-family: 'Cinzel', serif;
  color: var(--ash-gold);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.ab-cost {
  color: var(--ash-ember);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(212, 107, 58, 0.1);
  border-radius: 3px;
}
.ab-prereq {
  color: var(--ash-blue);
  font-size: 0.8rem;
}
.ab-level {
  color: var(--ash-dim);
  font-size: 0.78rem;
}
/* 能力描述 */
.ability-desc {
  color: var(--ash-text);
  line-height: 1.85;
  font-size: 0.93rem;
  text-align: justify;
  margin-bottom: 8px;
}
/* 强化增益区 */
.ability-enhancement {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 168, 76, 0.15);
}
.enh-line {
  color: #a8d4aa;
  font-size: 0.84rem;
  padding: 3px 0;
  line-height: 1.6;
}
.enh-line::before {
  content: '✦ ';
  color: var(--ash-gold-dim);
  font-size: 0.72rem;
}

/* ══════════════════════════════════════════════════════════
   等级进度表（.ew-level-progress）— 双栏显示
   用于 1P-100P 等级奖励等长表格
   ══════════════════════════════════════════════════════════ */
.ew-level-progress {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.84rem;
  column-count: 2;
  column-gap: 24px;
}
.ew-level-progress thead {
  display: none; /* 隐藏表头，用第一行即可 */
}
.ew-level-progress tbody tr {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
}
.ew-level-progress tbody td:first-child {
  color: var(--ash-gold-dim);
  font-weight: 600;
  min-width: 40px;
}
.ew-level-progress tbody td:last-child {
  color: var(--ash-text);
}
.ew-level-progress tbody tr:hover td {
  background: rgba(201, 168, 76, 0.04);
}

/* 移动端：等级表单栏 */
@media (max-width: 768px) {
  .ew-level-progress {
    column-count: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   目录式小表（.ew-toc-table）— 编号+名称
   ══════════════════════════════════════════════════════════ */
.ew-toc-table {
  width: auto;
  margin: 10px 0 16px 20px;
  font-size: 0.88rem;
  border: none;
  background: transparent;
}
.ew-toc-table td {
  padding: 3px 14px 3px 0;
  color: var(--ash-text);
  border: none;
  vertical-align: top;
}
.ew-toc-table td:first-child {
  color: var(--ash-gold-dim);
  white-space: nowrap;
  min-width: 24px;
  text-align: right;
}

/* ---- 材料子分类标题（如 鱼、蔬菜、禽畜肉） ---- */
.material-category {
  color: var(--ash-gold);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 28px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.material-category:first-child {
  margin-top: 8px;
}

/* ---- 材料模板信息块 ---- */
.material-template {
  display: inline-block;
  background: rgba(212, 175, 55, 0.08);
  border-left: 3px solid var(--ash-gold-dim);
  padding: 5px 12px;
  margin: 4px 0 10px 0;
  font-size: 0.85rem;
  color: var(--ash-medium);
  letter-spacing: 0.3px;
}