/* ============================================================
   蟑螂之家 · 静态信息页共用样式（关于 / 隐私政策 / 联系我们）
   这三张页面刻意不引 style.css：游戏主样式里第 1 行那坨压缩历史 CSS 动不得，
   而它带了一堆 .app-shell / .sidebar 之类的布局，套到纯文章页上只会互相打。
   这里只用同一套配色与字体变量，视觉上和游戏保持一家。
   ============================================================ */
:root{
  --bg:#f3f5f0;--ink:#1d2a25;--muted:#81908a;--line:#dfe5df;
  --green:#285f48;--lime:#c8e86a;--warm:#ece6da;--card:#fff;
  --deep:#203e31;--shadow:0 18px 50px rgba(31,58,44,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Manrope,"Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green)}
.mono{font-family:"DM Mono",monospace}

/* ---------- 顶部条 ---------- */
.doc-topbar{
  background:var(--deep);color:#f3f6ee;
  padding:15px 22px;display:flex;align-items:center;justify-content:space-between;
  gap:12px 16px;flex-wrap:wrap;
}
.doc-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#f3f6ee}
.doc-brand-mark{
  width:31px;height:31px;border:1px solid #aacb91;border-radius:9px;
  display:grid;place-items:center;color:var(--lime);font-size:17px;
}
.doc-brand-name{font-weight:800;letter-spacing:-.4px;font-size:15px;line-height:1.3}
.doc-brand-text{display:flex;flex-direction:column}
.doc-brand-sub{font:10px "DM Mono",monospace;color:#9cb5a3;letter-spacing:1.4px;margin-top:2px;line-height:1.2}
.doc-back{
  font:11px "DM Mono",monospace;letter-spacing:.6px;color:var(--lime);
  text-decoration:none;border:1px solid #4a7460;border-radius:999px;
  padding:7px 14px;transition:background .18s,border-color .18s;white-space:nowrap;
}
.doc-back:hover{background:#2c5744;border-color:#6d9a7f}
.doc-topnav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.doc-topnav a{
  font-size:12px;color:#c3d5c8;text-decoration:none;padding:2px 0;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.doc-topnav a:hover{color:var(--lime);border-color:#6d9a7f}
.doc-topnav a[aria-current="page"]{color:var(--lime);font-weight:600}

/* ---------- 文章容器 ---------- */
.doc-wrap{width:min(760px,100%);margin:0 auto;padding:36px 20px 8px}
.doc-eyebrow{
  font:10px "DM Mono",monospace;letter-spacing:2px;color:#8d9a92;
  text-transform:uppercase;margin:0;
}
.doc-title{font-size:30px;font-weight:800;letter-spacing:-.7px;margin:9px 0 10px;line-height:1.3}
.doc-lead{color:#5d6b64;font-size:14px;margin:0}
.doc-meta{font:11px "DM Mono",monospace;color:#9aa79f;margin-top:14px;letter-spacing:.3px}

/* ---------- 卡片 ---------- */
.doc-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;box-shadow:var(--shadow);margin-top:18px;
}
.doc-card > h2{
  font-size:16px;margin:0 0 13px;letter-spacing:-.2px;
  display:flex;align-items:center;gap:9px;line-height:1.5;
}
.doc-num{
  font:10px "DM Mono",monospace;color:var(--green);background:#eef4e7;
  border-radius:6px;padding:3px 7px;letter-spacing:1px;flex:none;
}
.doc-card h3{font-size:13.5px;margin:20px 0 8px;letter-spacing:-.1px}
.doc-card h3:first-child{margin-top:0}
.doc-card p{margin:0 0 11px;color:#3c4a44}
.doc-card p:last-child{margin-bottom:0}
.doc-card ul,.doc-card ol{margin:0 0 12px;padding-left:20px;color:#3c4a44}
.doc-card ul:last-child,.doc-card ol:last-child{margin-bottom:0}
.doc-card li{margin-bottom:6px}
.doc-card li:last-child{margin-bottom:0}
.doc-card li::marker{color:#9ab98a}
.doc-card strong{color:var(--ink);font-weight:700}
.doc-card code{
  font:12px "DM Mono",monospace;background:#f2f6ef;border:1px solid #e3eade;
  border-radius:5px;padding:1px 5px;color:#3c5a49;word-break:break-all;
}
.doc-card a{text-decoration:none;border-bottom:1px solid #c3d8b5}
.doc-card a:hover{color:#1c4a35;border-color:#8ab273}

/* ---------- 提示条 ---------- */
.doc-note{
  background:#f7faf3;border:1px solid #e2ecda;border-left:3px solid var(--lime);
  border-radius:10px;padding:13px 16px;font-size:13px;color:#3f5147;margin:0 0 13px;
}
.doc-warn{
  background:#fdf7ee;border:1px solid #f0e3cd;border-left:3px solid #dba94f;
  border-radius:10px;padding:13px 16px;font-size:13px;color:#5b4a2c;margin:0 0 13px;
}
.doc-note p,.doc-warn p{margin:0 0 8px;color:inherit;font-size:inherit}
.doc-note p:last-child,.doc-warn p:last-child{margin-bottom:0}

/* ---------- 表格 ---------- */
.doc-table{width:100%;border-collapse:collapse;font-size:13px;margin:2px 0 13px}
.doc-table th,.doc-table td{
  text-align:left;padding:10px 11px;border-bottom:1px solid var(--line);
  vertical-align:top;color:#3c4a44;
}
.doc-table th{
  font:10px "DM Mono",monospace;letter-spacing:1px;color:#8d9a92;
  text-transform:uppercase;background:#fafcf8;font-weight:500;
}
.doc-table tr:last-child td{border-bottom:0}
.doc-table td strong{color:var(--ink)}

/* ---------- 步骤 / 循环图 ---------- */
.doc-steps{display:grid;gap:10px;margin:4px 0 13px}
.doc-step{
  display:flex;gap:12px;align-items:flex-start;
  background:#fafcf8;border:1px solid #e8efe3;border-radius:12px;padding:12px 14px;
}
.doc-step-n{
  flex:none;width:23px;height:23px;border-radius:7px;background:var(--deep);
  color:var(--lime);font:11px "DM Mono",monospace;
  display:grid;place-items:center;margin-top:2px;
}
.doc-step-body strong{display:block;font-size:13px;margin-bottom:2px}
.doc-step-body span{font-size:12.5px;color:#5d6b64}

/* ---------- 联系块 ---------- */
.doc-contact{
  background:#f7faf3;border:1px dashed #cfe0c2;border-radius:13px;
  padding:16px 18px;margin:4px 0 13px;
}
.doc-contact-label{font:10px "DM Mono",monospace;letter-spacing:1.2px;color:#8d9a92;text-transform:uppercase}
.doc-contact a.doc-mail{
  display:inline-block;margin-top:6px;font:14px "DM Mono",monospace;
  color:var(--green);text-decoration:none;border-bottom:1px solid #b9d3a9;
  word-break:break-all;transition:color .18s,border-color .18s;
}
.doc-contact a.doc-mail:hover{color:#1c4a35;border-color:#8ab273}
.doc-contact small{display:block;margin-top:7px;font-size:12px;color:#7d8a82}

/* ---------- 页脚 ---------- */
.doc-footer{
  width:min(760px,100%);margin:16px auto 44px;padding:18px 20px 0;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px 20px;flex-wrap:wrap;font-size:11px;color:#a0aaa4;
}
.doc-footer nav{display:flex;gap:15px;flex-wrap:wrap}
.doc-footer a{color:#738b7c;text-decoration:none}
.doc-footer a:hover{color:#2b5c46;text-decoration:underline}
.doc-footer .doc-copy{max-width:340px}

/* ---------- 手机 ---------- */
@media(max-width:560px){
  body{font-size:13.5px}
  .doc-wrap{padding:24px 15px 6px}
  .doc-title{font-size:23px}
  .doc-lead{font-size:13px}
  .doc-card{padding:19px 17px;border-radius:14px}
  .doc-table th,.doc-table td{padding:9px 8px;font-size:12.5px}
  .doc-footer{padding:16px 15px 0;margin-bottom:32px}
  .doc-topnav{gap:11px}
}

/* ---------- 攻略页：目录 / 图组 / 链接网格 / 相关阅读 ---------- */
.doc-toc{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow);margin-top:18px;
}
.doc-toc-label{
  font:10px "DM Mono",monospace;letter-spacing:1.6px;color:#8d9a92;
  text-transform:uppercase;margin:0;
}
.doc-toc ol{margin:9px 0 0;padding-left:19px;columns:2;column-gap:26px}
.doc-toc li{margin-bottom:5px;font-size:13px;break-inside:avoid}
.doc-toc li::marker{color:#9ab98a}
.doc-toc a{color:#3c5a49;text-decoration:none;border-bottom:1px solid #cfe0c2}
.doc-toc a:hover{color:var(--green);border-color:#8ab273}
@media(max-width:560px){.doc-toc ol{columns:1}}

.doc-figures{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:6px 0 13px;
}
.doc-figure{margin:0;background:#fafcf8;border:1px solid #e8efe3;border-radius:12px;overflow:hidden}
.doc-figure img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eef2ec}
.doc-figure figcaption{padding:9px 11px;font-size:12px;color:#5d6b64;line-height:1.55}
.doc-figure figcaption b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}

.doc-see{
  background:var(--deep);color:#e8f0e6;border-radius:16px;
  padding:20px 22px;margin-top:18px;
}
.doc-see-label{
  font:10px "DM Mono",monospace;letter-spacing:1.8px;color:#9cb5a3;
  text-transform:uppercase;margin:0;
}
.doc-see ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.doc-see li{font-size:13px}
.doc-see a{color:var(--lime);text-decoration:none;border-bottom:1px solid #4a7460;padding-bottom:1px}
.doc-see a:hover{color:#fff;border-color:#8ab273}
.doc-see span{display:block;font-size:12px;color:#9cb5a3;margin-top:2px}

/* 链接网格：权重写成 .doc-links .doc-link（0,2,0），
   才压得住卡片里的 .doc-card a（0,1,1）与 .doc-card a:hover（0,2,1，靠后写赢） */
.doc-links{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.doc-links .doc-link{
  display:block;background:#fafcf8;border:1px solid #e8efe3;border-radius:12px;
  padding:13px 15px;text-decoration:none;transition:background .18s,border-color .18s,transform .18s;
}
.doc-links .doc-link:hover{background:#f4f9ee;border-color:#cfe0c2;transform:translateY(-1px)}
.doc-links .doc-link strong{display:block;font-size:13px;color:var(--ink);margin-bottom:3px}
.doc-links .doc-link span{font-size:12px;color:#5d6b64;line-height:1.6}
.doc-links .doc-link em{
  display:block;margin-top:7px;font:10px "DM Mono",monospace;letter-spacing:1.2px;
  color:#8d9a92;font-style:normal;text-transform:uppercase;
}