@charset "UTF-8";
/* ==================== 富文本正文统一排版 ====================
   服务两处：
     1) 首页「游戏资料」板块  view/index/gate/index.html（story / create 两个 panel）
     2) 资料详情页            view/index/main/news_detail.html（仅资料分支）
   规格：docs/superpowers/specs/2026-09-12-游戏资料正文排版-design.md

   要点：正文限宽 760px 居中（中文一行约 35 字，原先 1200px 是 60+ 字），
        标题一并进容器以对齐正文左缘。

   颜色变量一律带 fallback：首页的 --text/--line 来自 home.css/navbar.css，
   详情页的来自 theme.css —— 两处来源不同，任一侧缺失时不得退化成黑字。 */

/* 限宽容器。width:100% 与详情页既有 `> div { width:100% }` 链式规则不冲突
   （那是另一个属性，max-width 仍会限制它的结果）。 */
.rich-text,
.rich-title {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.rich-text {
  color: var(--text, #e8e2d0);
  font-size: 15px;
  line-height: 1.9;
}

/* ---------- 段落 ---------- */
.rich-text p { margin: 0 0 1.2em; }
.rich-text p:last-child { margin-bottom: 0; }

/* ---------- 图片 ---------- */
.rich-text img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(212, 175, 55, .25));
  margin: 1.75em 0;
}

/* ---------- 兜底：运营日后在后台加入的块级标签 ---------- */
.rich-text h2,
.rich-text h3,
.rich-text h4 {
  color: var(--gold-light, #f0d68a);
  line-height: 1.5;
  margin: 1.6em 0 .7em;
}
.rich-text ul,
.rich-text ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.rich-text li { margin-bottom: .5em; }
.rich-text blockquote {
  margin: 1.4em 0;
  padding: .6em 1em;
  border-left: 2px solid var(--gold, #d4af37);
  color: var(--text-muted, #9a937f);
}
.rich-text table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.rich-text th,
.rich-text td {
  border: 1px solid var(--line, rgba(212, 175, 55, .25));
  padding: .5em .8em;
}

/* 详情页 news-details.css 的
   `.main > .main-bg > .main-content > .main-content-right > .content > div`
   特异性 (0,6,0)，会把 color:white 强加给正文 div，普通 .rich-text (0,1,0) 压不过。
   此处用同特异性 + 后加载取胜（本文件在 news-details.css 之后引入）。
   不用 !important —— 那是无法解释的优先级。
   该选择器只在详情页结构下命中：首页 gate 不 extend layout，没有这条链。 */
.main > .main-bg > .main-content > .main-content-right > .content > .rich-text {
  color: var(--text, #e8e2d0);
}

/* ---------- 响应式：限宽只在桌面生效 ---------- */
@media (max-width: 768px) {
  .rich-text,
  .rich-title { max-width: 100%; }
  .rich-text { font-size: 14px; }
}