/* ══════════════════════════════════════════════════════════
 * 第五人格 · 教学手册  |  设计系统
 * 风格：庄园哥特 —— 深色底 + 朱砂红 + 鎏金
 * ══════════════════════════════════════════════════════════ */

/* ══════════ TOKENS ══════════ */
:root {
  /* 主色 */
  --ink:        #14121a;   /* 最深底 */
  --ink-2:      #1c1a24;   /* 次深底 */
  --panel:      #232029;   /* 卡片 */
  --panel-2:    #2b2733;   /* 卡片悬停/嵌套 */
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.14);

  /* 强调色 */
  --cinnabar:   #c0392b;   /* 朱砂（监管者/危险） */
  --cinnabar-l: #e05a4a;
  --amber:      #d4a24c;   /* 鎏金（品牌主色） */
  --amber-l:    #e8be74;
  --jade:       #3d9970;   /* 青碧（求生者/正向） */
  --jade-l:     #52b788;
  --slate:      #5b7fa6;   /* 石青（信息） */

  /* 文字 */
  --t1:         #ece9f1;
  --t2:         rgba(236,233,241,.72);
  --t3:         rgba(236,233,241,.45);
  --t4:         rgba(236,233,241,.28);

  /* 字体 */
  --f-body: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --f-disp: 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --f-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --r:   10px;
  --r-s: 6px;
  --r-l: 16px;
  --maxw: 1280px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--t1);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 细腻纹理底（z-index:-1：永远垫在内容下方，避免干扰层叠） */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(212,162,76,.055), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 100%, rgba(192,57,43,.055), transparent 60%);
}

::selection { background: rgba(212,162,76,.3); }

/* 键盘焦点可见性 */
:focus-visible {
  outline: 2px solid rgba(212,162,76,.65);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 回顶按钮 */
.to-top {
  position: fixed; right: 16px; bottom: 22px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid rgba(212,162,76,.35);
  color: var(--amber-l); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.to-top.on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:active { background: rgba(212,162,76,.2); }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,162,76,.4); }

/* ══════════ LAYOUT ══════════ */
/* 注意：.shell 不得设 z-index（会形成层叠上下文，把内部 .side 的 z-index:80
 * 锁在本层，导致移动端抽屉被 z-index:70 的 .side-mask 盖住、无法点击） */
.shell {
  position: relative;
  display: grid;
  grid-template-columns: 258px 1fr;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
}

/* ══════════ SIDEBAR ══════════ */
.side {
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  padding: 0 0 40px;
  display: flex; flex-direction: column;
}

.brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.brand::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--amber), transparent);
}
.brand-mark {
  font-family: var(--f-disp);
  font-size: 21px; font-weight: 900;
  letter-spacing: 2px;
  color: var(--t1);
  display: flex; align-items: center; gap: 9px;
}
.brand-mark .dia {
  width: 9px; height: 9px; flex-shrink: 0;
  background: var(--cinnabar);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(192,57,43,.8);
}
.brand-sub {
  font-size: 10.5px; color: var(--t4); letter-spacing: 3px;
  margin-top: 6px; text-transform: uppercase;
  font-family: var(--f-mono);
}

/* 搜索 */
.search-wrap { padding: 14px 16px 10px; position: relative; }
.search {
  width: 100%; padding: 9px 12px 9px 32px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-s); color: var(--t1);
  font-size: 13px; font-family: var(--f-body);
  outline: none; transition: border-color .15s, background .15s;
}
.search:focus { border-color: rgba(212,162,76,.5); background: var(--panel-2); }
.search::placeholder { color: var(--t4); }
.search-ico {
  position: absolute; left: 27px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--t4); pointer-events: none;
}
.search-clear {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--t4); cursor: pointer;
  width: 26px; height: 26px; display: none;
  align-items: center; justify-content: center; line-height: 1;
  border-radius: 6px;
}
.search-clear.on { display: flex; }
.search-clear:hover { color: var(--cinnabar-l); background: rgba(255,255,255,.06); }

/* 导航 */
.nav { flex: 1; padding: 6px 0; }
.nav-group { margin-bottom: 6px; }
.nav-label {
  font-size: 9.5px; letter-spacing: 2.5px; color: var(--t4);
  padding: 10px 20px 5px; text-transform: uppercase;
  font-family: var(--f-mono);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; cursor: pointer;
  font-size: 13px; color: var(--t2);
  border-left: 2px solid transparent;
  transition: all .13s;
  user-select: none;
}
.nav-item:hover { background: rgba(255,255,255,.035); color: var(--t1); }
.nav-item.on {
  color: var(--amber-l); border-left-color: var(--amber);
  background: linear-gradient(90deg, rgba(212,162,76,.12), transparent);
  font-weight: 500;
}
.nav-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-count {
  margin-left: auto; font-size: 10px; color: var(--t4);
  font-family: var(--f-mono);
  background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 8px;
}
/* 二级导航：直达大页内的小节 */
.nav-sub {
  padding: 5px 20px 5px 47px; cursor: pointer;
  font-size: 12px; color: var(--t3);
  transition: all .13s; user-select: none;
  position: relative;
}
.nav-sub::before {
  content: ''; position: absolute; left: 30px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  background: var(--t4); transform: rotate(45deg);
}
.nav-sub:hover { color: var(--amber-l); background: rgba(255,255,255,.035); }
.nav-sub:hover::before { background: var(--amber); }

.side-foot {
  margin-top: auto; padding: 14px 20px 0;
  border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--t4); line-height: 1.7;
}
.side-foot b { color: var(--t3); font-weight: 500; }

/* ══════════ MAIN ══════════ */
.main { min-width: 0; padding: 0 0 80px; }

/* Hero */
.hero {
  padding: 40px 44px 32px;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: linear-gradient(135deg, rgba(212,162,76,.05), transparent 55%);
}
.hero.hidden { display: none; }   /* Hero 仅在总览页显示 */
.hero-eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 4px;
  color: var(--amber); text-transform: uppercase; margin-bottom: 12px;
}
.hero h1 {
  font-family: var(--f-disp);
  font-size: 40px; font-weight: 900; line-height: 1.15;
  letter-spacing: 1px; margin-bottom: 12px;
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero p {
  font-size: 14.5px; color: var(--t2); max-width: 660px; line-height: 1.8;
}
.hero-stats {
  display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap;
}
.hstat { }
.hstat-n {
  font-family: var(--f-disp); font-size: 26px; font-weight: 900;
  color: var(--amber-l); line-height: 1;
}
.hstat-l { font-size: 11px; color: var(--t4); letter-spacing: 1.5px; margin-top: 5px; }

/* 内容区 */
.content { padding: 34px 44px 0; max-width: 1000px; }

.view { display: none; animation: fade .25s ease; }
.view.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 章节标题 */
.sec-title {
  font-family: var(--f-disp);
  font-size: 25px; font-weight: 900; letter-spacing: .5px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 11px;
}
.sec-title::before {
  content: ''; width: 4px; height: 22px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--amber), var(--cinnabar));
  border-radius: 2px;
}
.sec-desc { font-size: 13.5px; color: var(--t3); margin-bottom: 26px; max-width: 720px; }

.sub-title {
  font-size: 16px; font-weight: 700; color: var(--t1);
  margin: 30px 0 13px; display: flex; align-items: center; gap: 9px;
}
.sub-title .ico { font-size: 16px; }

/* ══════════ 卡片 ══════════ */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--line-2); }
.card + .card { margin-top: 10px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ══════════ 规则表 ══════════ */
.rule-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rule-row {
  display: flex; gap: 16px; padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; align-items: baseline;
  transition: background .13s;
}
.rule-row:last-child { border-bottom: none; }
.rule-row:hover { background: rgba(255,255,255,.025); }
.rule-k {
  width: 130px; flex-shrink: 0; color: var(--t3); font-size: 12.5px;
}
.rule-v { flex: 1; color: var(--t1); }
.rule-src {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(212,162,76,.15); color: var(--amber-l);
  flex-shrink: 0; font-family: var(--f-mono);
}
.rule-src.todo { background: rgba(192,57,43,.18); color: #e88a7e; }

/* ══════════ 时间线 ══════════ */
.flow { position: relative; padding-left: 26px; }
.flow::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: linear-gradient(180deg, var(--amber), var(--cinnabar), transparent);
}
.flow-item { position: relative; padding-bottom: 20px; }
.flow-item::before {
  content: ''; position: absolute; left: -23px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--amber);
}
.flow-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.flow-phase { font-size: 15px; font-weight: 700; color: var(--t1); }
.flow-time {
  font-size: 10.5px; font-family: var(--f-mono); color: var(--amber);
  background: rgba(212,162,76,.13); padding: 1px 8px; border-radius: 10px;
}
.flow-d { font-size: 13px; color: var(--t2); line-height: 1.75; }

/* ══════════ 角色库 ══════════ */
.filters {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px;
  align-items: center;
}
.filter-lab { font-size: 11px; color: var(--t3); letter-spacing: 1px; margin-right: 2px; font-family: var(--f-mono); }
.chip {
  padding: 5px 13px; border-radius: 16px;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--t2); font-size: 12.5px; cursor: pointer;
  transition: all .13s; font-family: var(--f-body);
  user-select: none;
}
.chip:hover { border-color: var(--amber); color: var(--amber-l); }
.chip.on {
  background: var(--amber); border-color: var(--amber);
  color: #1a1520; font-weight: 700;
}
.chip.s-on { background: var(--jade); border-color: var(--jade); color: #0f1a14; font-weight: 700; }
.chip.h-on { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; font-weight: 700; }

.char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
}
.char {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 15px;
  cursor: pointer; transition: all .15s;
  position: relative; overflow: hidden;
}
.char::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--jade); opacity: .55; transition: opacity .15s;
}
.char.hunter::before { background: var(--cinnabar); }
.char:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-2px); }
.char:hover::before { opacity: 1; }
.char.open { background: var(--panel-2); border-color: rgba(212,162,76,.35); }
.char-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.char-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.char-alias { font-size: 11px; color: var(--t4); margin-left: auto; text-align: right; }

/* 角色头像 */
.ava {
  position: relative; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line-2);
}
.ava-fb {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-disp); font-size: 19px; font-weight: 900;
  color: var(--amber-l); background: var(--panel-2);
}
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava { cursor: zoom-in; }
/* ══════════ 头像大图弹层 ══════════ */
.ava-lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,9,14,.9); backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.ava-lb.on { display: flex; }
/* 原图查看容器：overflow 滚动 + margin:auto 防溢出裁剪 */
.lb-wrap {
  position: absolute; inset: 0; display: flex;
  overflow: auto; padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.lb-wrap .ava-lb-img { margin: auto; flex-shrink: 0; }
.ava-lb-img { cursor: zoom-in; }
.ava-lb-img.zoomed {
  max-width: none !important; max-height: none !important; cursor: zoom-out;
  box-shadow: none;
}
.ava-lb-img {
  max-width: min(340px, 78vw); max-height: 66vh;
  border-radius: 18px; border: 1px solid var(--line-2);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  background: var(--panel-2); object-fit: contain;
}.ava-lb-fb {
  width: 220px; height: 220px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-disp); font-size: 88px; font-weight: 900;
  color: var(--amber-l); background: var(--panel-2); border: 1px solid var(--line-2);
}
.ava-lb-cap {
  position: absolute; left: 16px; right: 16px;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  text-align: center; color: var(--t3); font-size: 12.5px; letter-spacing: .5px;
}
.ava-lb-cap b { color: var(--t1); }
.ava-lb-x {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-2);
  color: var(--t2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ava-lb-x:hover { color: var(--t1); border-color: var(--amber); }
/* 详情区身份头：大头像 + 角色名 */
.cd-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
/* 全身立绘：详情身份头左侧，缺失时 JS onerror 自移除；点击走 avaLb 弹层放大 */
.cd-pt-wrap { flex-shrink: 0; cursor: zoom-in; line-height: 0; }
.cd-portrait { height: 128px; width: auto; max-width: 92px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); border-radius: 6px; }
.ava-lg { width: 64px; height: 64px; border-radius: 12px; }
.ava-lg .ava-fb { font-size: 28px; }
.cd-hero-t b { display: block; font-size: 17px; font-weight: 900; color: var(--t1); font-family: var(--f-disp); letter-spacing: 1px; }
.cd-hero-t span { font-size: 11.5px; color: var(--t3); }
/* 详情分享深链按钮 */
.cd-share {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
  color: var(--t3); font-size: 11.5px; padding: 6px 11px; border-radius: 14px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.cd-share:hover { color: var(--amber-l); border-color: var(--amber); }
/* 时装速认：横滑卡 */
.skin-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.skin-card { width: 132px; flex-shrink: 0; }
.skin-img {
  width: 132px; height: 132px; object-fit: cover; object-position: top;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel-2); cursor: zoom-in; display: block;
}
.skin-img:hover { border-color: var(--amber); }
.skin-n { font-size: 12.5px; font-weight: 700; color: var(--t1); margin-top: 6px; }
.skin-d { font-size: 11px; color: var(--t3); line-height: 1.6; margin-top: 3px; }
.char-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.tag {
  font-size: 10px; padding: 1.5px 7px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: var(--t3);
  letter-spacing: .3px;
}
.tag.jade { background: rgba(61,153,112,.16); color: var(--jade-l); }
.tag.red { background: rgba(192,57,43,.16); color: #e88a7e; }
.tag.amber { background: rgba(212,162,76,.14); color: var(--amber-l); }
.tag.slate { background: rgba(91,127,166,.18); color: #8fb3d4; }

.char-core { font-size: 12px; color: var(--amber-l); margin-bottom: 6px; font-weight: 500; }
.char-desc { font-size: 12.5px; color: var(--t2); line-height: 1.7; }

.char-body {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .2s, margin .2s;
  opacity: 0;
}
.char.open .char-body { max-height: none; opacity: 1; margin-top: 9px; }
.char-body-inner {
  padding-top: 10px; border-top: 1px dashed var(--line-2);
  font-size: 12.5px; color: var(--t2); line-height: 1.75;
}

/* 展开提示 */
.char-more {
  margin-top: 9px; font-size: 10.5px; color: var(--t4);
  letter-spacing: .5px; transition: color .15s;
}
.char:hover .char-more { color: var(--amber-l); }
.char.open .char-more { display: none; }

/* ════════ 角色卡展开：详细资料 ════════ */
.char-grid .char.open { grid-column: 1 / -1; }   /* 展开时占满整行，保证阅读宽度 */
.cd-sec { margin-bottom: 15px; }
.cd-sec:last-child { margin-bottom: 0; }
.cd-sec-h {
  font-size: 11.5px; font-weight: 700; color: var(--amber-l);
  letter-spacing: 2px; margin-bottom: 8px;
  font-family: var(--f-mono);
  display: flex; align-items: center; gap: 7px;
}
.cd-sec-h::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212,162,76,.3), transparent);
}
/* 技能条目 */
.cd-skill {
  display: flex; gap: 12px; padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px; align-items: baseline;
}
.cd-skill:last-child { border-bottom: none; }
.cd-skill-n {
  width: 118px; flex-shrink: 0; color: var(--t1); font-weight: 600;
}
.cd-skill-e { flex: 1; color: var(--t2); line-height: 1.7; }
/* 定位一句话 */
.cd-pos {
  font-size: 12.5px; color: var(--t1); line-height: 1.75; margin-bottom: 9px;
  padding: 8px 12px; background: rgba(212,162,76,.07);
  border-left: 2px solid rgba(212,162,76,.4); border-radius: var(--r-s);
}
/* 小节标签（基础/进阶）——语义内容用 t3 保证深底可读性 */
.cd-lab {
  font-size: 10.5px; color: var(--t3); letter-spacing: 1.5px;
  margin: 9px 0 4px; font-family: var(--f-mono);
}
/* 资料列表 */
.cd-list { list-style: none; }
.cd-list li {
  font-size: 12.5px; color: var(--t2); line-height: 1.75;
  padding-left: 14px; position: relative;
}
.cd-list li::before {
  content: '·'; position: absolute; left: 2px;
  color: var(--t4); font-weight: 900;
}
.cd-list.adv li::before { color: var(--amber); }
.cd-list.cd-counter li::before { color: var(--cinnabar-l); }
.cd-text { font-size: 12.5px; color: var(--t2); line-height: 1.75; }
.cd-text.gold { color: #e6cd96; }
/* 克制关系双栏 */
.cd-mu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-mu-col {
  background: rgba(255,255,255,.025); border-radius: var(--r-s);
  padding: 9px 12px; border: 1px solid var(--line);
}
.cd-mu-h {
  font-size: 11px; font-weight: 700; margin-bottom: 6px;
  letter-spacing: 1.5px; font-family: var(--f-mono);
}
.cd-mu-col.good { border-color: rgba(61,153,112,.25); }
.cd-mu-col.good .cd-mu-h { color: var(--jade-l); }
.cd-mu-col.bad { border-color: rgba(192,57,43,.25); }
.cd-mu-col.bad .cd-mu-h { color: #e88a7e; }
.cd-fallback { font-size: 12.5px; color: var(--t3); line-height: 1.8; }

/* 难度条 */
.diff { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.diff-lab { font-size: 10px; color: var(--t4); font-family: var(--f-mono); }
.diff-bars { display: flex; gap: 2.5px; }
.diff-bar { width: 13px; height: 3.5px; border-radius: 2px; background: rgba(255,255,255,.12); }
.diff-bar.on-e { background: var(--jade); }
.diff-bar.on-m { background: var(--amber); }
.diff-bar.on-h { background: var(--cinnabar); }

/* ══════════ 地图 ══════════ */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.map {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px;
  transition: all .15s;
}
.map:hover { border-color: var(--line-2); }
.map-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
/* 地图俯视图缩略图（点击弹大图） */
.map-thumb {
  width: 56px; height: 56px; flex-shrink: 0; align-self: center;
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line-2);
  cursor: zoom-in;
}
.map-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-thumb:hover { border-color: var(--amber); }
/* 弹层大图模式（俯视图要看清板窗） */
.ava-lb-img.lb-lg { max-width: min(680px, 92vw); max-height: 78vh; border-radius: 12px; }
.map-name { font-size: 17px; font-weight: 700; font-family: var(--f-disp); letter-spacing: .5px; }
.map-size {
  font-size: 10px; padding: 1.5px 8px; border-radius: 9px;
  background: rgba(91,127,166,.18); color: #8fb3d4; font-family: var(--f-mono);
}
.map-alias { font-size: 11px; color: var(--t4); }
.map-feat { font-size: 12.5px; color: var(--t2); line-height: 1.75; margin-bottom: 11px; }
.map-areas { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.map-area {
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,.05); color: var(--t3);
}
.map-side { margin-bottom: 9px; }
.map-side-h {
  font-size: 11px; letter-spacing: 1.5px; margin-bottom: 5px;
  display: flex; align-items: center; gap: 6px; font-family: var(--f-mono);
}
.map-side-h.s { color: var(--jade-l); }
.map-side-h.h { color: #e88a7e; }
.map-side ul { list-style: none; padding-left: 0; }
.map-side li {
  font-size: 12px; color: var(--t2); line-height: 1.7;
  padding-left: 13px; position: relative;
}
.map-side li::before {
  content: '·'; position: absolute; left: 3px;
  color: var(--t4); font-weight: 900;
}
.map-tip {
  font-size: 11.5px; color: var(--t3); line-height: 1.7;
  padding: 9px 11px; border-radius: var(--r-s);
  background: rgba(212,162,76,.07);
  border-left: 2px solid rgba(212,162,76,.4);
  margin-top: 10px;
}

/* ══════════ 天赋 ══════════ */
.talent-side { display: flex; gap: 8px; margin-bottom: 22px; }
.branch {
  border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 12px; overflow: hidden;
  background: var(--panel);
}
.branch-h {
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.branch-h:hover { background: rgba(255,255,255,.025); }
.branch-name { font-size: 15px; font-weight: 700; }
.branch-en {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 2px;
  color: var(--t4);
}
.branch-desc { font-size: 11.5px; color: var(--t3); margin-left: auto; }
.branch-arrow { color: var(--t4); transition: transform .2s; font-size: 12px; }
.branch.open .branch-arrow { transform: rotate(90deg); }
.branch-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.branch.open .branch-body { max-height: 3200px; }
.branch-inner { padding: 0 16px 14px; }

.talent {
  padding: 11px 13px; border-radius: var(--r-s);
  background: var(--panel-2); margin-bottom: 7px;
  border-left: 2px solid var(--line-2);
}
.talent.ult { border-left-color: var(--amber); background: rgba(212,162,76,.07); }
.talent-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.talent-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.talent-alias {
  font-size: 11px; color: var(--amber-l);
  background: rgba(212,162,76,.13); padding: 1px 7px; border-radius: 4px;
}
.talent-ult-badge {
  font-size: 9.5px; color: #1a1520; background: var(--amber);
  padding: 1px 6px; border-radius: 4px; font-weight: 700;
  margin-left: auto; font-family: var(--f-mono);
}
.talent-eff { font-size: 12.5px; color: var(--t2); line-height: 1.7; }
.talent-note {
  font-size: 11.5px; color: var(--t3); line-height: 1.65; margin-top: 5px;
  padding-top: 5px; border-top: 1px dashed var(--line);
}

/* 配点方案 */
.build {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 17px; background: var(--panel); margin-bottom: 10px;
  transition: border-color .15s;
}
.build:hover { border-color: var(--line-2); }
.build-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.build-name { font-size: 15.5px; font-weight: 700; }
.build-for { font-size: 11.5px; color: var(--t4); }
.build-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 7px; flex-wrap: wrap; }
.build-lab { font-size: 10.5px; color: var(--t4); width: 46px; flex-shrink: 0; font-family: var(--f-mono); }
.build-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.bchip {
  font-size: 11.5px; padding: 2px 9px; border-radius: 4px;
  background: rgba(212,162,76,.14); color: var(--amber-l);
}
.bchip.sec { background: rgba(255,255,255,.06); color: var(--t2); }
.build-why {
  font-size: 12px; color: var(--t3); line-height: 1.7; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--line);
}

/* 克制建议 */
.counter {
  display: flex; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); margin-bottom: 8px;
}
.counter-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.counter-t { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.counter-d { font-size: 12.5px; color: var(--t2); line-height: 1.7; }

/* ══════════ 折叠块 ══════════ */
.acc {
  border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 9px; overflow: hidden; background: var(--panel);
}
.acc-h {
  padding: 13px 16px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; font-size: 14.5px; font-weight: 600;
}
.acc-h:hover { background: rgba(255,255,255,.025); }
.acc-ico { font-size: 15px; }
.acc-arrow { margin-left: auto; color: var(--t4); font-size: 12px; transition: transform .2s; }
.acc.open .acc-arrow { transform: rotate(90deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc.open .acc-body { max-height: 6000px; }
.acc-inner { padding: 0 16px 15px; }

/* 条目 */
.tip-item {
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.tip-item:last-child { border-bottom: none; padding-bottom: 0; }
.tip-item:first-child { padding-top: 4px; }
.tip-t {
  font-size: 13.5px; font-weight: 700; color: var(--t1);
  margin-bottom: 4px; display: flex; align-items: baseline; gap: 7px;
}
.tip-t::before {
  content: ''; width: 5px; height: 5px; flex-shrink: 0;
  background: var(--amber); transform: rotate(45deg); margin-top: 6px;
}
.tip-d { font-size: 12.5px; color: var(--t2); line-height: 1.8; padding-left: 12px; }
.tip-d b { color: var(--amber-l); font-weight: 600; }

/* ══════════ 关键词条 ══════════ */
.kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.kw {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 11px 13px;
}
.kw-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.kw-icon { font-size: 14px; }
.kw-name { font-size: 13.5px; font-weight: 700; }
.kw-what { font-size: 11.5px; color: var(--t4); margin-bottom: 5px; }
.kw-how { font-size: 12px; color: var(--t2); line-height: 1.7; }

/* ══════════ 术语 ══════════ */
.glossary-cat { margin-bottom: 22px; }
.gl-row {
  display: flex; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; align-items: baseline;
}
.gl-row:last-child { border-bottom: none; }
.gl-term {
  width: 168px; flex-shrink: 0; color: var(--amber-l);
  font-weight: 600; font-size: 12.5px;
}
.gl-def { flex: 1; color: var(--t2); line-height: 1.75; }

/* ══════════ 速查/对答 ══════════ */
.qa {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); margin-bottom: 9px; overflow: hidden;
}
.qa-q {
  padding: 13px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  user-select: none;
}
.qa-q:hover { background: rgba(255,255,255,.025); }
.qa-q-mark {
  color: var(--amber); font-family: var(--f-disp); font-weight: 900;
  flex-shrink: 0; font-size: 15px;
}
.qa-arrow { margin-left: auto; color: var(--t4); font-size: 12px; transition: transform .2s; }
.qa.open .qa-arrow { transform: rotate(90deg); }
.qa-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.qa.open .qa-a { max-height: 1600px; }
.qa-a-inner {
  padding: 0 16px 15px 42px;
  font-size: 12.5px; color: var(--t2); line-height: 1.8;
}
.qa-a-inner b { color: var(--amber-l); font-weight: 600; }

/* 发言解读 */
.saying {
  display: flex; gap: 14px; padding: 10px 13px;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
  align-items: baseline; flex-wrap: wrap;
}
.saying:last-child { border-bottom: none; }
.saying-s {
  color: var(--t1); font-weight: 600; min-width: 190px;
}
.saying-s::before { content: '「'; color: var(--t4); }
.saying-s::after  { content: '」'; color: var(--t4); }
.saying-arrow { color: var(--t4); }
.saying-r { flex: 1; color: var(--t2); min-width: 180px; }

/* ══════════ 清单 ══════════ */
.check-list { list-style: none; }
.check-item {
  display: flex; gap: 10px; padding: 8px 0; align-items: flex-start;
  font-size: 13px; color: var(--t2); line-height: 1.7;
  border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.check-item:last-child { border-bottom: none; }
.check-box {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px;
  border: 1.5px solid var(--line-2); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: transparent;
  transition: all .15s;
}
.check-item.done .check-box {
  background: var(--jade); border-color: var(--jade); color: #0f1a14;
}
.check-item.done .check-txt { color: var(--t4); text-decoration: line-through; }

/* ══════════ 警告框 ══════════ */
.note {
  padding: 12px 15px; border-radius: var(--r-s);
  font-size: 12.5px; line-height: 1.75; margin: 14px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
.note-ico { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.note.warn {
  background: rgba(192,57,43,.1); border: 1px solid rgba(192,57,43,.25);
  color: #eab0a7;
}
.note.info {
  background: rgba(91,127,166,.1); border: 1px solid rgba(91,127,166,.25);
  color: #a8c4dd;
}
.note.gold {
  background: rgba(212,162,76,.1); border: 1px solid rgba(212,162,76,.25);
  color: #e6cd96;
}
.note b { color: #fff; font-weight: 600; }

/* ══════════ 阵容构成 ══════════ */
.comp {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 17px; background: var(--panel); margin-bottom: 10px;
  transition: border-color .15s;
}
.comp:hover { border-color: var(--line-2); }
.comp-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.comp-name { font-size: 15.5px; font-weight: 700; }
.comp-members { display: flex; gap: 5px; flex-wrap: wrap; }
.comp-core {
  font-size: 12.5px; color: var(--t1); line-height: 1.75;
  padding: 8px 12px; background: rgba(212,162,76,.07);
  border-left: 2px solid rgba(212,162,76,.4); border-radius: var(--r-s);
}

/* ══════════ 首页水平入口 ══════════ */
.entry { cursor: pointer; }
.entry-ico { font-size: 21px; margin-bottom: 7px; }
.entry-t { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.entry-d { font-size: 12px; color: var(--t2); line-height: 1.7; }
.entry-go {
  margin-top: 9px; font-size: 11.5px; color: var(--amber-l);
  font-weight: 600; letter-spacing: .5px;
  transition: color .13s, transform .13s;
}
.entry:hover .entry-go { color: var(--amber); transform: translateX(3px); }

/* 手册结构跳转链接 */
.go-link {
  display: inline-block; margin-top: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--amber-l);
  cursor: pointer; letter-spacing: .5px; user-select: none;
  transition: color .13s, transform .13s;
}
.go-link:hover { color: var(--amber); transform: translateX(3px); }

/* 锚点跳转：高亮目标小节一瞬 + 预留 sticky 顶栏高度 */
.sub-title { scroll-margin-top: 60px; }
.flash-target { animation: flashHL 1.6s ease; }
@keyframes flashHL {
  0% { background: rgba(212,162,76,.16); }
  100% { background: transparent; }
}

/* ══════════ 空状态 ══════════ */
.empty {
  text-align: center; padding: 60px 20px; color: var(--t4);
}
.empty-ico { font-size: 40px; margin-bottom: 12px; opacity: .4; }
.empty-txt { font-size: 14px; }

/* ══════════ 页脚 ══════════ */
.foot {
  margin-top: 50px; padding: 26px 44px 0;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--t4); line-height: 1.9;
  max-width: 1000px;
}
.foot b { color: var(--t3); font-weight: 500; }
.foot-tag {
  font-family: var(--f-disp); font-size: 14px;
  color: var(--amber); margin-bottom: 8px; letter-spacing: 1px;
}

/* ══════════ 移动端顶栏 ══════════ */
.mobile-bar {
  display: none; position: sticky; top: 0; z-index: 60;
  flex-direction: column;
  background: rgba(20,18,26,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.mb-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 5px 12px;
}
.mb-title {
  font-family: var(--f-disp); font-size: 16px; font-weight: 900; letter-spacing: 1px;
  flex: 1; min-width: 0;
}
/* 图标按钮：44px 级触控目标 + SVG 图标 */
.mb-icon-btn {
  background: none; border: none; color: var(--t2);
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 9px;
  transition: background .13s, color .13s;
}
.mb-icon-btn:hover { background: rgba(255,255,255,.07); color: var(--t1); }
.mb-icon-btn:active { background: rgba(212,162,76,.18); color: var(--amber-l); }
/* 搜索态：顶栏变形为搜索栏 */
.mb-search-row { display: none; }
.mobile-bar.searching .mb-main { display: none; }
.mobile-bar.searching .mb-search-row { display: flex; }
.m-search-wrap { position: relative; flex: 1; min-width: 0; }
.m-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--t4); pointer-events: none;
}
.m-search-wrap .search { padding: 9px 12px 9px 33px; }
.m-cancel {
  background: none; border: none; color: var(--amber-l);
  font-size: 13.5px; font-family: var(--f-body); cursor: pointer;
  padding: 10px 4px 10px 10px; flex-shrink: 0;
}
.m-cancel:active { color: var(--amber); }
.side-mask {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.6);
}
.side-mask.on { display: block; }

/* ══════════ 移动端底部标签栏 ══════════ */
.tab-bar { display: none; }
@media (max-width: 980px) {
  .tab-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: rgba(20,18,26,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .tab {
    flex: 1; background: none; border: none; color: var(--t3);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 0 3px; cursor: pointer; font-family: var(--f-body);
    border-radius: 8px; transition: color .13s;
  }
  .tab span { font-size: 10px; letter-spacing: 1px; }
  .tab.on { color: var(--amber-l); }
  .tab:active { background: rgba(255,255,255,.06); }
  /* 内容底部留出标签栏高度 */
  .main { padding-bottom: 100px; }
  .to-top { bottom: 78px; }
}

/* 快速跳转横向滑动标签 */
.chip-scroll { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 6px; }
.chip-scroll .chip { white-space: nowrap; flex-shrink: 0; }
.map { scroll-margin-top: 60px; }

/* ══════════ 响应式 ══════════ */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .mobile-bar { display: flex; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
    width: 268px; transform: translateX(-100%);
    transition: transform .24s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .side.on { transform: translateX(0); }
  .hero { padding: 28px 20px 24px; }
  .hero h1 { font-size: 28px; }
  .content { padding: 24px 20px 0; }
  .foot { padding: 22px 20px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .char-grid { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .kw-grid { grid-template-columns: 1fr; }
  .gl-term { width: 128px; }
  .rule-k { width: 104px; }
  /* iOS：输入框字号 ≥16px 防聚焦自动放大 */
  .search { font-size: 16px; }
  /* 触控增强：筛选按钮加大触控面积、间距防误触 */
  .chip { padding: 8px 14px; }
  .filters { gap: 8px; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 24px; }
  .hero-stats { gap: 18px; }
  .hstat-n { font-size: 21px; }
  .sec-title { font-size: 21px; }
  .saying-s { min-width: 100%; }
  .gl-row { flex-direction: column; gap: 3px; }
  .gl-term { width: auto; }
  .cd-mu { grid-template-columns: 1fr; }
  .cd-skill { flex-direction: column; gap: 2px; }
  .cd-skill-n { width: auto; }
  .cd-portrait { height: 92px; max-width: 68px; }
  .cd-hero { gap: 10px; }
}

/* ══════════ 高亮搜索结果 ══════════ */
mark {
  background: rgba(212,162,76,.32); color: var(--amber-l);
  padding: 0 2px; border-radius: 2px;
}

/* ══════════ 打印 ══════════ */
@media print {
  .side, .mobile-bar, .search-wrap, .filters, .to-top { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .view { display: block !important; }
  .card, .map, .char, .build, .kw, .acc, .qa { break-inside: avoid; }
}