/* Pax Dei 中文站 —— 复刻 gaming.tools 的深色结构 */
:root {
  --bg: #111827;        /* gray-900 */
  --bg2: #1f2937;       /* gray-800 */
  --bg3: #374151;       /* gray-700 */
  --line: #000;
  --soft: rgba(255, 255, 255, .08);
  --ink: #f3f4f6;       /* gray-100 */
  --ink2: #d1d5db;      /* gray-300 */
  --mut: #9ca3af;       /* gray-400 */
  --mut2: #6b7280;      /* gray-500 */
  --grn: #166534;       /* green-800 */
  --grn2: #15803d;      /* green-700 */
  --gold: #d4b06a;
  --gold2: #a8813c;
  --r-poor: #8a8f98;
  --r-common: #9aa4ab;
  --r-uncommon: #4caf50;
  --r-rare: #3b82f6;
  --r-epic: #a855f7;
  --r-legendary: #f59e0b;
  --hd: 112px;
  /* 统一交互节奏：所有可点元素共用同一条缓动与同一档阴影，避免各写各的 */
  --tr: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
  --sh-hover: 0 10px 26px rgba(0, 0, 0, .42);
  --gold-line: rgba(212, 176, 106, .5);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17.5px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
/* 作者样式里的 display 会盖掉 UA 的 [hidden]{display:none}，显式兜一条 */
[hidden] { display: none !important; }

/* ---------------- 全局交互反馈 ----------------
   键盘用户此前完全看不到焦点在哪（只有 input:focus 有样式）；
   补一条金色焦点环，鼠标点击不触发（:focus-visible 的语义），不影响观感。 */
/* 注意：这里不要再写 border-radius —— outline 会跟随元素自身圆角，
   覆盖 border-radius 反而会让卡片一聚焦就"方掉"。 */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.search input:focus-visible { outline: none; }
a, button { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(212, 176, 106, .32); color: #fff; }

/* 深色主题下系统滚动条是亮灰的，很跳；统一成低对比深色（scrollbar-color 可继承，写在根上即可） */
html { scrollbar-width: thin; scrollbar-color: #3b4453 var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3b4453; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #4c566a; }

/* 导航下拉：原来是 display 硬切，补 120ms 淡入 */
@keyframes nvIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.nvi.open > .nvd { animation: nvIn .12s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- header ---------------- */
header {
  position: fixed; top: 0; left: 0; z-index: 50; width: 100%;
  background: var(--bg); border-bottom: 1px solid #000;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
/* 三列：品牌 | 搜索（正中） | 账号入口。左右同为 1fr，搜索才真正落在页面中轴 */
.hd-in {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr);
  height: 70px; padding: 0 16px; max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; justify-self: start; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 8px; flex: 0 0 38px;
  background: linear-gradient(145deg, var(--gold), var(--gold2));
  color: #241b08; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.brand .bt { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.brand .bs {
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  color: var(--gold); text-transform: uppercase; margin-top: 5px;
}
/* 品牌两段都不许折行（"Pax / Dei / 中文站" 竖成三行很难看） */
.brand .bt, .brand .bs, .brand .bv { white-space: nowrap; }
/* 版本号：纯白文字，不做胶囊。之前那个金色小胶囊边框会被读成「一个可点的按钮」，
   实际它不可点 —— 这里去掉底与边框，只留字号/字重/字距，靠字距和主标题拉开层次。 */
.brand .bv {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.6;
  color: #fff; margin-top: 4px; align-self: center;
}
/* 头是三列等分（品牌 | 搜索 620 | 账号入口），窗口 ~981–1080px 时品牌列只剩 ~150px，
   刚好放不下「中文站」→ 会折成三行。这一档只留「Pax Dei」。 */
@media (max-width: 1080px) { .brand .bs, .brand .bv { display: none; } }
/* 极窄屏（手机竖屏）：品牌只留 ✦ 图标，把 ~85px 让给搜索框 ——
   166px 的输入框连 placeholder 都放不下，比少两个字母的品牌名伤得多。 */
@media (max-width: 480px) {
  .brand .bt { display: none; }
  .brand { gap: 0; }
}

.search { position: relative; flex: 1 1 auto; max-width: 720px; margin-left: auto; }
/* 顶栏里的搜索框：占满中列即等于居中；窄屏退化为「品牌 + 搜索」两列 */
.hd-in > .search { width: 100%; max-width: none; margin: 0; justify-self: center; }
@media (max-width: 980px) {
  /* 第 3 列留给顶栏的账号入口 */
  .hd-in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hd-in > .search { justify-self: stretch; }
  .acctbtn { padding: 0 11px; }
}
.search input {
  width: 100%; height: 42px; padding: 0 14px 0 38px;
  background: var(--bg2); border: 1px solid #000; border-radius: 8px;
  color: var(--ink); font-size: 16px; outline: none;
}
.search input::placeholder { color: var(--mut2); }
.search input:focus { border-color: var(--grn2); box-shadow: 0 0 0 3px rgba(21, 128, 61, .25); }
.search::before {
  content: "⌕"; position: absolute; left: 13px; top: 50%; transform: translateY(-52%);
  font-size: 22px; color: var(--mut2); pointer-events: none;
}
.sug {
  position: absolute; top: 48px; left: 0; right: 0; z-index: 60;
  background: var(--bg2); border: 1px solid #000; border-radius: 8px;
  max-height: 420px; overflow: auto; display: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.sug.on { display: block; }
.sug a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.sug a:hover, .sug a.on { background: var(--bg3); }
.sug img { width: 30px; height: 34px; object-fit: contain; }
.sug .s1 { font-size: 16px; }
.sug .s2 { font-size: 14px; color: var(--mut); margin-left: auto; text-align: right; }

/* 顶栏最右上角：账号入口。
   未登录 = 金色主按钮（账号/交易是本站主推入口，页头右端该有个金色锚点与左侧 logo 呼应）；
   已登录 = 退成低调身份牌（金框 + 游戏 ID，长了省略号截断），不再抢视觉。
   放这儿是因为登录是高频动作、要一直看得见；「装到桌面」是一次性动作，已收进「关于」页。 */
.hdacct { justify-self: end; min-width: 0; }
.acctbtn {
  display: inline-flex; align-items: center; gap: 7px; max-width: 190px;
  height: 38px; padding: 0 14px; border: 0; border-radius: 9px;
  background: linear-gradient(145deg, var(--gold), var(--gold2)); color: #241b08;
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
.acctbtn:not(.logged):hover { filter: brightness(1.08); }
.acctbtn .ai {
  width: 16px; height: 16px; flex: 0 0 16px; fill: none;
  stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}
.acctbtn .at { overflow: hidden; text-overflow: ellipsis; }
/* 已登录：金框身份牌，跟普通导航项区分开 */
.acctbtn.logged { background: var(--bg2); border: 1px solid var(--gold-line); color: var(--ink); }
.acctbtn.logged:hover { background: var(--bg3); color: #fff; }
/* 「当前就在账号页」（#/login、#/me…）；金底上用白环才看得见 */
.acctbtn:not(.logged).on { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.acctbtn.logged.on { background: var(--grn); border-color: var(--grn); color: #fff; }

/* ---------------- 二级导航（悬停下拉） ---------------- */
.navbar {
  display: flex; align-items: center; gap: 2px; overflow-x: auto;
  height: 42px; padding: 0 8px; max-width: 1280px; margin: 0 auto;
  scrollbar-width: none;
}
.navbar::-webkit-scrollbar { display: none; }
.nvi { position: relative; flex: 0 0 auto; }
.nvb {
  background: none; border: 0; padding: 7px 13px; border-radius: 7px;
  font-size: 15.5px; font-weight: 600; color: var(--ink2); white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.nvi:hover > .nvb, .nvi.on > .nvb { background: var(--bg2); color: #fff; }
.nvi.on > .nvb { background: var(--grn); color: #fff; }
.nvb .car { font-size: 10.5px; opacity: .7; }
/* 用 position:fixed —— .navbar 有 overflow-x:auto（窄屏横滚），
   绝对定位的下拉会被它整块裁掉；坐标由 JS 在展开时算。 */
.nvd {
  position: fixed; top: 0; left: 0; z-index: 70; min-width: 190px;
  background: var(--bg2); border: 1px solid #000; border-radius: 9px;
  padding: 6px; display: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
.nvi.open > .nvd { display: block; }
.nvd a {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 6px; font-size: 15.5px; white-space: nowrap;
}
.nvd a:hover { background: var(--bg3); }
.nvd a .cnt { margin-left: auto; font-size: 13px; color: var(--mut2); }
.nvd a.on { color: var(--gold); }
.nvd .sep { height: 1px; background: var(--soft); margin: 5px 4px; }
.navbar .sp { flex: 1 1 auto; }

main { max-width: 1280px; margin: 0 auto; padding: 22px 16px 70px; }
.spacer { height: var(--hd); }

/* ---------------- 通用 ---------------- */
.crumb { font-size: 14.5px; color: var(--mut); margin-bottom: 14px; }
.crumb a { color: var(--gold); }
h1.title { font-size: 29px; margin: 0 0 4px; letter-spacing: -.4px; }
.sub { font-size: 15px; color: var(--mut); }
.hintline {
  font-size: 14.5px; color: var(--mut); line-height: 1.65;
  margin: 7px 0 0; padding: 8px 12px; border-left: 2px solid var(--gold2);
  background: rgba(212, 176, 106, .06); border-radius: 0 6px 6px 0;
}
.hintline b { color: var(--ink2); }
.card {
  background: var(--bg2); border: 1px solid #000; border-radius: 10px; padding: 16px 18px;
}
.card > h2 {
  font-size: 14.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px;
}
/* ---------------- 首页 hero：官方壁纸打底 ----------------
   结构：.heroimg（<picture>，只放图）→ ::after（只做渐变压暗）→ 子元素 z-index:1 压在最上。
   之所以把「图」和「渐变」拆开，是为了让压暗强度能独立调，改渐变不会动到图片本身。 */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid #000; border-radius: 14px;
  padding: 40px 26px 34px; text-align: center; margin-bottom: 24px;
  background: #0f141b;                       /* 图加载失败时的兜底底色 */
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}
/* 背景图用 <picture> + <img>，不用 background-image。三个原因：
   ① 格式协商：WebP 优先、JPEG 回退，交给 <source type> 挑 —— 比在 CSS image-set 里
      塞 type() 兼容得更干净（后者在部分 Safari 上不认 type 提示）。
   ② 高清档位：srcset 的 1x/2x 是标准语义，2x 那档直接放**裁切后的原生分辨率**
      （3950 宽，零缩放）。旧版是「4K 裁完先缩到 2400 存文件、浏览器再缩到 1248」，
      两次重采样叠加，这才是「看着不清」的真凶。
   ③ 优先级：img 上能挂 fetchpriority="high" —— 首屏第一眼就是它。
   ⚠️ 不要再加 blur。旧版那个 blur(1.3px) 本意是「让文字浮起来」，代价是把整张图糊掉；
   文字现在靠 .hero::after 的遮罩压底色就够（实测最坏情况白字对比度仍有 ~10:1）。 */
.heroimg { position: absolute; inset: 0; z-index: 0; display: block; }
.heroimg img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;   /* 与旧版 background-position 完全一致：换图不动构图 */
  filter: saturate(1.14) brightness(1.70) contrast(1.02);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(88% 114% at 50% 36%,
      rgba(9, 13, 18, .02) 0%, rgba(9, 13, 18, .16) 48%,
      rgba(8, 11, 15, .42) 78%, rgba(7, 10, 13, .60) 100%),
    linear-gradient(180deg,
      rgba(8, 11, 15, .46) 0%, rgba(8, 11, 15, .06) 30%,
      rgba(8, 11, 15, .08) 62%, rgba(7, 10, 13, .54) 100%);
}
/* 图片层要排除在外：它得留在 z-index:0，否则会盖到上面的遮罩（::after）上面，
   遮罩就白做了。其余子元素（标题/搜索/统计/署名）提到 z-index:1 压在最上。 */
.hero > *:not(.heroimg) { position: relative; z-index: 1; }

/* ---- hero 文字：白色描边 + 深色外圈（双层描边字）----
   先记一条容易搞反的：**白字叠白边，本身不增加可读性** —— 同色只会把笔画撑粗。
   真正把字形从照片杂物里「抠」出来的是白边**外面那一圈深色**；白边的价值在观感：
   它让笔画看起来是一笔实心的白描边字（游戏标题的常见做法）。
   两层都用 text-shadow 画，不用 -webkit-text-stroke：后者以字形中线为基线，
   会把 1px 的细笔画自身吃掉一圈，中文小字尤其糊。
   绘制顺序 = 列表顺序，**第一个画在最上层** —— 所以「贴字白边」必须写在前、
   「外圈深色」写在后，深色才会只从白边外面露出一圈。
   两档尺寸：--e*1 给大字号（标题/统计数字），--e*2 给小字号（副标题/统计标签），
   小字号那档半径收一半，否则 1px 深边会跟相邻汉字的外圈连成一片。 */
.hero {
  --ew1: -1px -1px 0 rgba(255, 255, 255, .62), 0 -1px 0 rgba(255, 255, 255, .62),
    1px -1px 0 rgba(255, 255, 255, .62), -1px 0 0 rgba(255, 255, 255, .62),
    1px 0 0 rgba(255, 255, 255, .62), -1px 1px 0 rgba(255, 255, 255, .62),
    0 1px 0 rgba(255, 255, 255, .62), 1px 1px 0 rgba(255, 255, 255, .62);
  --ed1: -2px -2px 0 rgba(0, 0, 0, .62), 0 -2px 0 rgba(0, 0, 0, .62),
    2px -2px 0 rgba(0, 0, 0, .62), -2px 0 0 rgba(0, 0, 0, .62),
    2px 0 0 rgba(0, 0, 0, .62), -2px 2px 0 rgba(0, 0, 0, .62),
    0 2px 0 rgba(0, 0, 0, .62), 2px 2px 0 rgba(0, 0, 0, .62);
  --ew2: -0.5px -0.5px 0 rgba(255, 255, 255, .5), 0 -0.5px 0 rgba(255, 255, 255, .5),
    0.5px -0.5px 0 rgba(255, 255, 255, .5), -0.5px 0 0 rgba(255, 255, 255, .5),
    0.5px 0 0 rgba(255, 255, 255, .5), -0.5px 0.5px 0 rgba(255, 255, 255, .5),
    0 0.5px 0 rgba(255, 255, 255, .5), 0.5px 0.5px 0 rgba(255, 255, 255, .5);
  --ed2: -1px -1px 0 rgba(0, 0, 0, .70), 0 -1px 0 rgba(0, 0, 0, .70),
    1px -1px 0 rgba(0, 0, 0, .70), -1px 0 0 rgba(0, 0, 0, .70),
    1px 0 0 rgba(0, 0, 0, .70), -1px 1px 0 rgba(0, 0, 0, .70),
    0 1px 0 rgba(0, 0, 0, .70), 1px 1px 0 rgba(0, 0, 0, .70);
}
.hero h1 {
  font-size: 31.5px; margin: 0 0 8px; color: #fff;
  /* 描边之后还留一层 3px 的柔晕，管「整行不糊」（描边只解决笔画，不解决行） */
  text-shadow: var(--ew1), var(--ed1), 0 3px 16px rgba(0, 0, 0, .72);
}
.hero p {
  color: #c8cdd6; margin: 0 0 18px; font-size: 16px;
  text-shadow: var(--ew2), var(--ed2), 0 1px 10px rgba(0, 0, 0, .62);
}
.hero .stats { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 20px; }
.hero .stats b {
  display: block; font-size: 26.5px; color: var(--gold);
  text-shadow: var(--ed1);       /* 金色数字只要深色外圈；白描边会把金色冲淡成「贴纸」 */
}
/* 14px 的标签太小，双层描边会糊 —— 只留深色外圈 */
.hero .stats span { font-size: 14px; color: #aab1bd; text-shadow: var(--ed2); }
/* 图片署名（官方要求转发时注明 @playPaxDei） */
.hero .credit {
  position: absolute; right: 10px; bottom: 7px; z-index: 1;
  font-size: 11px; color: rgba(255, 255, 255, .40); letter-spacing: .02em;
  pointer-events: none;
}

/* ---------------- 关于页 ---------------- */
.abcard { margin-top: 14px; }
.abp { font-size: 15px; color: var(--ink2); line-height: 1.78; margin: 0 0 6px; }
.abp:last-child { margin-bottom: 0; }
.abp + .abp { margin-top: 9px; }
.abp a { color: var(--gold); }
.abhint { font-size: 13.5px; color: var(--mut); line-height: 1.65; margin: 12px 0 0; }
.abhint a { color: var(--gold); }
.qqrow {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(212, 176, 106, .11), rgba(212, 176, 106, .02));
  border: 1px solid rgba(212, 176, 106, .32); border-radius: 10px;
  cursor: pointer; user-select: none; transition: .15s;
}
.qqrow:hover { border-color: rgba(212, 176, 106, .55); background: linear-gradient(135deg, rgba(212, 176, 106, .16), rgba(212, 176, 106, .04)); }
.qqic {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 11px;
  background: linear-gradient(145deg, var(--gold), var(--gold2)); color: #241b08;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
}
.qqnum { display: flex; flex-direction: column; min-width: 0; }
.qqnum b { font-size: 27px; color: var(--gold); letter-spacing: .07em; line-height: 1.15; }
.qqnum > span { font-size: 13.5px; color: var(--mut); margin-top: 2px; }
.qqcopytip {
  margin-left: auto; flex: 0 0 auto; font-size: 13px; color: var(--mut);
  border: 1px solid #3a3f47; border-radius: 6px; padding: 4px 10px; transition: .15s;
}
.qqcopytip.on { color: var(--grn2); border-color: var(--grn2); }
.dlbtn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
  padding: 11px 21px; border-radius: 9px; font-size: 16px; font-weight: 700;
  background: linear-gradient(145deg, var(--gold), var(--gold2)); color: #241b08;
  text-decoration: none; transition: .15s; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.dlbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dlbtn span { font-size: 15px; }
/* 次级按钮：描金不填充，避免一屏里两个金色实心块在抢注意力 */
.dlbtn.ghost {
  background: rgba(212, 176, 106, .10); color: var(--gold);
  border: 1px solid rgba(212, 176, 106, .5); box-shadow: none;
}
.dlbtn.ghost:hover { background: rgba(212, 176, 106, .2); filter: none; }
/* 装到桌面：分平台说明，一行一条 */
.inslist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inslist li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; color: var(--mut); line-height: 1.6;
  padding: 9px 12px; border-left: 2px solid rgba(212, 176, 106, .35);
  background: rgba(255, 255, 255, .022); border-radius: 0 7px 7px 0;
}
.inslist li b { flex: 0 0 auto; color: var(--ink2); font-weight: 700; }
.inslist li span { min-width: 0; }
@media (max-width: 560px) {
  .inslist li { flex-direction: column; gap: 2px; }
}

.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.catgrid a {
  background: var(--bg2); border: 1px solid #000; border-radius: 10px;
  padding: 15px 16px; transition: var(--tr);
}
.catgrid a:hover { background: var(--bg3); border-color: rgba(212, 176, 106, .5); transform: translateY(-2px); box-shadow: var(--sh-hover); }
.catgrid a:active { transform: translateY(0); }
.catgrid b { display: block; font-size: 17.5px; }
.catgrid span { font-size: 14px; color: var(--mut); }

/* ---------------- 区块标题（首页 / 关于页共用） ---------------- */
.secttl { position: relative; margin: 30px 0 14px; padding-left: 13px; }
.secttl::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 5px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
}
.secttl h2 { font-size: 20px; margin: 0; letter-spacing: -.2px; }
.secttl i { display: block; font-style: normal; font-size: 14px; color: var(--mut); margin-top: 4px; }
.loadbox { padding: 26px 0; text-align: center; color: var(--mut2); font-size: 15px; }

/* ---------------- 生产职业路线卡片（首页） ---------------- */
.profsec { margin-top: 4px; }
.profgrp { margin-top: 18px; }
.profgrp > h3 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700; color: var(--ink2); margin: 0 0 10px;
}
.profgrp > h3 i { font-style: normal; font-weight: 400; font-size: 13.5px; color: var(--mut2); }
/* grid-auto-rows:1fr 让「每一行」等高（行内默认 stretch 撑满），配合下面三行文字锁死单行，
   16 张卡在所有断点下都是同一个高度，不会因为文案长短参差不齐。 */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); grid-auto-rows: 1fr; gap: 11px; }
.pcard {
  position: relative; overflow: hidden; display: flex; align-items: stretch; gap: 13px;
  padding: 14px 15px; background: var(--bg2); border: 1px solid #000; border-radius: 11px;
  transition: var(--tr);
}
/* 顶部一道金色流光，hover 时点亮 —— 比单纯换背景更有质感 */
.pcard::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px; opacity: 0; transition: opacity .16s ease;
  background: linear-gradient(90deg, transparent, rgba(212, 176, 106, .55), transparent);
}
.pcard:hover {
  background: var(--bg3); border-color: rgba(212, 176, 106, .6);
  transform: translateY(-2px); box-shadow: var(--sh-hover);
}
.pcard:hover::after { opacity: 1; }
.pcard:active { transform: translateY(0); }
.pcard .pic {
  align-self: flex-start;
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, rgba(212, 176, 106, .16), rgba(0, 0, 0, .28));
  border: 1px solid var(--soft); transition: var(--tr);
}
.pcard:hover .pic { border-color: rgba(212, 176, 106, .45); transform: scale(1.05); }
.pcard .pic img { width: 44px; height: 44px; object-fit: contain; }
.pcard .pbd { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* 三行文字统一「单行 + 省略号」：卡片高度只由行高决定，与文案长度完全解耦 */
.pcard .pnm {
  font-size: 17px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard:hover .pnm { color: var(--gold); }
.pcard .pen {
  font-style: normal; font-size: 12.5px; color: var(--mut2); letter-spacing: .02em; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .pds {
  font-style: normal; font-size: 13.5px; color: var(--mut); line-height: 1.55; margin-top: 7px;
  /* 固定两行：介绍都控制在 20 字以内，正好占满两行或一行半，
     min-height 补足到两行高 → 无论文案长短，卡片高度完全一致 */
  min-height: 42px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard .pmeta { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: auto; padding-top: 9px; }
.pcard .pmeta > span {
  font-size: 12.5px; color: var(--mut); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--soft); border-radius: 6px; padding: 2px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.pcard .pmeta b { color: var(--gold); font-weight: 700; margin-right: 3px; }
/* 注：右侧那个圆形「→」箭头已去掉 —— 悬停时的金色描边 + 上浮 + 标题转金
   已经足够表达「可点进去」，多一个圆钮反而让卡片右边缘变碎。 */
@media (max-width: 640px) {
  .pgrid { grid-template-columns: 1fr; }
}

/* ---------------- 首页「全部资料」紧凑索引 ---------------- */
.idxsec { margin-top: 34px; }
.catidx { background: var(--bg2); border: 1px solid #000; border-radius: 11px; padding: 5px 16px; }
.cirow { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; }
.cirow + .cirow { border-top: 1px solid var(--soft); }
.cirow > b {
  flex: 0 0 62px; font-size: 14px; font-weight: 700; color: var(--gold);
  letter-spacing: .06em; padding-top: 3px;
}
.cilinks { display: flex; flex-wrap: wrap; gap: 5px 7px; flex: 1 1 auto; }
.cilinks a {
  font-size: 14px; color: var(--ink2); padding: 3px 9px; border-radius: 6px;
  background: rgba(255, 255, 255, .04); border: 1px solid transparent; transition: var(--tr);
}
.cilinks a:hover { color: var(--gold); border-color: rgba(212, 176, 106, .45); background: rgba(212, 176, 106, .1); }
.cilinks a:active { transform: translateY(1px); }
/* 分类后面的条数：原来用 --mut2(#6b7280) 压在深底上，实测对比度 ~2.9:1（AA 要 4.5:1），
   基本糊在背景里。改成金色小徽标（~6:1），既是可读的信息，也和本站的金色点缀同一套语言。 */
.cilinks a i {
  font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.55;
  color: var(--gold); background: rgba(212, 176, 106, .14);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px;
  transition: var(--tr);
}
.cilinks a:hover i { color: #241b08; background: var(--gold); }
@media (max-width: 560px) {
  .cirow { flex-direction: column; gap: 7px; }
  .cirow > b { flex: none; padding-top: 0; }
}

/* ---------------- 物品卡片 ---------------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px;
}
.grid.list { grid-template-columns: 1fr; }
.icard {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  background: var(--bg2); border: 1px solid #000; border-radius: 9px;
  transition: .12s; min-width: 0;
}
.icard:hover { background: var(--bg3); }
.icard img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.icard .nm { min-width: 0; flex: 1 1 auto; }
.icard .z {
  font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icard .e {
  font-size: 13.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icard .sub { font-size: 13px; color: var(--mut2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard .z .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #6ee7a0; margin-left: 5px; vertical-align: 1px;
}
.icard .rt { display: flex; gap: 4px; flex: 0 0 auto; align-items: center; }
.icard .rt .tag { padding: 2px 7px; font-size: 11.5px; margin: 0; white-space: nowrap; }

.tag {
  display: inline-block; font-size: 13px; padding: 2px 9px; border-radius: 20px;
  background: var(--bg3); color: var(--ink2); margin: 0 5px 5px 0;
}
.tag.r-poor { color: var(--r-poor); }
.tag.r-common { color: var(--r-common); }
.tag.r-uncommon { color: var(--r-uncommon); }
.tag.r-rare { color: var(--r-rare); }
.tag.r-epic { color: var(--r-epic); }
.tag.r-legendary { color: var(--r-legendary); }
.tag.tier { background: rgba(212, 176, 106, .16); color: var(--gold); }

/* 官方层级图标（6 格圆环，点亮 N 格 = Tier N） */
.tieric {
  display: inline-block;          /* 全局 img{display:block} 会让它换行 */
  width: 21px; height: 21px; flex: 0 0 auto; object-fit: contain;
  image-rendering: -webkit-optimize-contrast; vertical-align: middle;
}
.tieric.big { width: 1.15em; height: 1.15em; margin-left: 9px; vertical-align: -.14em; }

/* ---------------- 筛选栏 ---------------- */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 16px 0 14px; padding: 10px 12px;
  background: var(--bg2); border: 1px solid #000; border-radius: 10px;
}
.fdd { position: relative; }
.fdd > button {
  background: var(--bg3); border: 1px solid #000; border-radius: 7px;
  padding: 6px 12px; font-size: 15px; font-weight: 600; color: var(--ink2);
  display: flex; align-items: center; gap: 6px;
}
.fdd > button:hover { background: #4b5563; }
.fdd > button.act { background: var(--grn); color: #fff; }
.fdd > button .car { font-size: 10.5px; opacity: .75; }
.fdpanel {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 65;
  min-width: 168px; max-height: 340px; overflow: auto;
  background: var(--bg2); border: 1px solid #000; border-radius: 9px;
  padding: 5px; display: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
.fdd.open .fdpanel { display: block; }
.fdpanel button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 10px; border-radius: 6px; font-size: 15px; white-space: nowrap;
}
.fdpanel button:hover { background: var(--bg3); }
.fdpanel button.on { color: var(--gold); font-weight: 600; }
.filterbar .sp { flex: 1 1 auto; }
.filterbar .cnt { font-size: 14px; color: var(--mut); margin-left: 4px; }
.viewbtn {
  background: var(--bg3); border: 1px solid #000; border-radius: 7px;
  padding: 6px 11px; font-size: 15px; color: var(--ink2);
}
.viewbtn:hover { background: #4b5563; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.chips button {
  background: var(--bg2); border: 1px solid #000; border-radius: 20px;
  padding: 4px 12px; font-size: 14.5px; color: var(--ink2);
}
.chips button:hover { background: var(--bg3); }
.chips button.on { background: var(--grn); color: #fff; border-color: var(--grn2); }
.chips .sp { flex: 1 1 auto; }

/* ---------------- 详情页 ---------------- */
.dhead { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.dhead .bigicon {
  width: 112px; height: 112px; flex: 0 0 112px; object-fit: contain;
  background: var(--bg2); border: 1px solid #000; border-radius: 12px; padding: 8px;
}
.dhead .desc { color: var(--ink2); font-size: 16px; line-height: 1.7; margin: 8px 0 6px; max-width: 860px; }
.dhead .descen { color: var(--mut); font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; max-width: 860px; }
.dhead .en { color: var(--mut); font-size: 16px; margin: 2px 0 0; }
@media (max-width: 620px) {
  .dhead { flex-direction: column-reverse; }
  .dhead .bigicon { width: 84px; height: 84px; flex-basis: 84px; }
}
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cols.wide { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 860px) { .cols, .cols.wide { grid-template-columns: 1fr; } }

table.tt { width: 100%; border-collapse: collapse; font-size: 16px; }
table.tt td { padding: 7px 4px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
table.tt tr:last-child td { border-bottom: none; }
table.tt .sec {
  font-size: 15px; font-weight: 700; color: var(--gold);
  padding-top: 14px; letter-spacing: .04em;
}
table.tt .qty { text-align: right; color: var(--ink2); font-weight: 600; white-space: nowrap; }
table.tt .hint { color: var(--mut); font-size: 15px; }

.ent { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ent img { width: 34px; height: 38px; object-fit: contain; flex: 0 0 38px; }
.ent .z { font-size: 16px; }
.ent .e { font-size: 13px; color: var(--mut); }
a.ent:hover .z { color: var(--gold); text-decoration: underline; }
/* 名字解析不到的行（市场里 8 个纯数字 id，见 app.js 的 dispName）：
   不可点 → 去掉指针与悬停变金，名字灰一档和「卖得出去的真名」区分开。
   .ispace 是等宽空位，保证没图标的行和有图标的行左边对齐。 */
.ent.nolink { cursor: default; }
.ent.nolink .z { color: var(--mut); }
.ent .ispace { flex: 0 0 38px; height: 38px; }

table.dt { width: 100%; border-collapse: collapse; font-size: 16px; }
table.dt th, table.dt td { padding: 7px 10px; border: 1px solid var(--soft); text-align: left; }
table.dt th { background: #182130; color: var(--mut); font-size: 14.5px; font-weight: 600; }
table.dt td:last-child { color: var(--ink2); }

/* 属性表 */
table.st { width: 100%; border-collapse: collapse; font-size: 16px; }
table.st th {
  text-align: left; font-size: 13.5px; font-weight: 600; color: var(--mut);
  padding: 5px 8px; border-bottom: 1px solid var(--soft);
}
table.st td { padding: 6px 8px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
table.st tr:last-child td { border-bottom: none; }
table.st .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.st .v { color: var(--gold); font-weight: 600; }
table.st .g {
  font-size: 14px; color: var(--mut); margin: 12px 0 2px; font-weight: 700;
  letter-spacing: .04em;
}
table.st img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
table.st .sn { display: flex; align-items: center; gap: 8px; }

.note {
  background: var(--bg); border: 1px solid #000; border-radius: 9px;
  padding: 13px 16px; font-size: 15px; color: var(--ink2); margin-top: 14px;
}
.note b { color: var(--gold); }
.empty { text-align: center; color: var(--mut); padding: 60px 20px; }
.empty b { display: block; font-size: 19.5px; color: var(--ink2); margin-bottom: 6px; }

footer {
  text-align: center; color: var(--mut2); font-size: 14.5px;
  padding: 26px 16px 40px; border-top: 1px solid var(--soft); margin-top: 40px;
}
footer a { color: var(--mut); text-decoration: underline; }
/* 备案号：单独一行、字号略小以不抢视觉；纯文本不可点（用户要求）。
   色用 --mut 而非 --mut2：在 --bg 上 7.16:1，保证清晰可辨。 */
footer .fbeian { display: block; margin-top: 9px; font-size: 13.5px; color: var(--mut); }
.langrow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.langrow span {
  font-size: 13px; color: var(--mut); background: var(--bg3);
  padding: 2px 8px; border-radius: 5px;
}
.pill { display: inline-block; font-size: 13.5px; padding: 3px 10px; border-radius: 20px;
  background: rgba(22, 101, 52, .35); color: #6ee7a0; margin-left: 8px; vertical-align: 2px; }
.pill.gold { background: rgba(212, 176, 106, .18); color: var(--gold); }

/* ---------------- 首页快捷入口 ---------------- */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-bottom: 24px; }
.quick a {
  background: var(--bg2); border: 1px solid #000; border-radius: 10px;
  padding: 14px 16px; transition: var(--tr);
}
.quick a:hover { background: var(--bg3); border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--sh-hover); }
.quick a:active { transform: translateY(0); }
.quick b { display: block; font-size: 17.5px; color: var(--gold); }
.quick span { font-size: 14px; color: var(--mut); }
/* 手机上仍保两列：竖排 6 行会把首屏下半截全吃掉，两列刚好放下主标题 */
@media (max-width: 640px) {
  .quick { grid-template-columns: 1fr 1fr; gap: 9px; }
  .quick a { padding: 12px 13px; }
  .quick b { font-size: 16.5px; }
  .quick span { font-size: 13px; }
}

/* ---------------- 市场行情 ---------------- */
.mk-sum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px;
  margin-bottom: 14px;
}
.mk-sum > div {
  background: var(--bg); border: 1px solid #000; border-radius: 9px;
  padding: 10px 12px; text-align: center;
}
.mk-sum b { display: block; font-size: 21px; color: var(--gold); letter-spacing: -.3px; }
.mk-sum span { font-size: 13.5px; color: var(--mut); }
@media (max-width: 620px) { .mk-sum { grid-template-columns: repeat(2, 1fr); } }

table.mk { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.mk th {
  text-align: left; font-size: 13.5px; font-weight: 600; color: var(--mut);
  padding: 6px 8px; border-bottom: 1px solid var(--soft); white-space: nowrap;
}
table.mk td { padding: 7px 8px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
table.mk tr:last-child td { border-bottom: none; }
table.mk .r { text-align: right; white-space: nowrap; }
table.mk .hl { color: var(--gold); font-weight: 600; }
table.mk .ent img { width: 30px; height: 34px; flex: 0 0 30px; }
table.mk .ent .ispace { flex: 0 0 30px; height: 34px; }
table.mk .ent .z { font-size: 15.5px; }
table.mk a:hover .z { color: var(--gold); }
.mk .wsub {
  font-style: normal; font-size: 13px; color: var(--mut2);
  margin-left: 6px; letter-spacing: .02em;
}
.mkhint { font-size: 14px; color: var(--mut); margin: 12px 0 0; }
.mkhint a { color: var(--gold); }

/* ---------------- 生物出没地图 ---------------- */
.mapcard .maptabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.maptab {
  font-size: 14.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px;
  border: 1px solid #000; background: var(--bg3); color: var(--ink2);
}
.maptab:hover { background: #4b5563; }
.maptab.on { background: var(--gold); border-color: var(--gold); color: #241b08; }
.mapwrap { width: 100%; }
.mapbox {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid #000; border-radius: 10px; background: #141a24;
  cursor: grab; touch-action: none; user-select: none;
}
.mapbox.grab { cursor: grabbing; }
.mapbox.nobg { background: #0f141c; }
.mappane {
  position: absolute; left: 0; top: 0; width: 1000px; height: 1000px;
  transform-origin: 0 0; will-change: transform;
}
/* 分层（显式 z-index，杜绝「标记被压在底图下面」）：
   0 底图  <  1 玩家上报密度  <  2 分区名  <  3 标记 */
.mapimg { display: block; width: 1000px; height: 1000px; pointer-events: none; z-index: 0; }
.mapheat {
  position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; z-index: 1;
  pointer-events: none; image-rendering: auto; opacity: .9;
}
.mapnoimg {
  position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  color: var(--mut); font-size: 15px; padding: 20px;
}
.mapnoimg b { color: var(--ink2); font-size: 18.5px; }
.mapzn { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mapzn span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 17.5px; font-weight: 700; color: #f4ead6; opacity: .9;
  paint-order: stroke; -webkit-text-stroke: 3px rgba(20, 16, 8, .78);
  letter-spacing: .3px;
}
.mkmain { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mpin {
  position: absolute; transform: translate(-50%, -50%) scale(var(--ik, 1));
  display: block; pointer-events: none;
}
/* 标记一律用内联 SVG —— 真矢量，缩放不糊 */
.mpin svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 点类标记（刷新点 / 市场摊位 / 通用点）：鲜红矢量圆 + 白描边 + 外发光，暗底图上高对比 */
.mpin.sp, .mpin.stall, .mpin.dot {
  width: var(--sz, 13px); height: var(--sz, 13px); color: #e8362c;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 6px rgba(232, 54, 44, .75));
}
.mpin.poi { width: var(--isz, 22px); height: var(--isz, 22px); }
.mpin.poi img {
  width: var(--isz, 22px); height: var(--isz, 22px); display: block;
  filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, .92)) drop-shadow(0 1px 2.5px rgba(0, 0, 0, .9));
}
.mapctl {
  position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px;
}
.mapctl button {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid #000;
  background: rgba(31, 41, 55, .88); color: var(--ink); font-size: 17.5px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.mapctl button:hover { background: #4b5563; }
.mapzoom {
  position: absolute; left: 8px; bottom: 8px; font-size: 13.5px; color: var(--mut);
  background: rgba(17, 24, 39, .78); padding: 2px 7px; border-radius: 6px; pointer-events: none;
}
.mkchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mkchip {
  font-size: 14.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid #000;
  background: var(--bg3); color: var(--mut); display: inline-flex; align-items: center; gap: 5px;
}
.mkchip:hover { background: #4b5563; }
.mkchip.on { background: var(--grn2); border-color: #000; color: #eafaf0; }
.mkchip .cnt { font-size: 13px; opacity: .8; }
.mapgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
.mapcard2 {
  display: block; border: 1px solid #000; border-radius: 10px; overflow: hidden;
  background: var(--bg2); text-decoration: none; color: inherit;
}
.mapcard2:hover { border-color: var(--gold2); }
.mapcard2 img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #141a24; }
.mapcard2 .b { padding: 9px 11px 11px; }
.mapcard2 .b b { display: block; font-size: 16px; color: var(--ink); }
.mapcard2 .b span { font-size: 14px; color: var(--mut); }
.maplegend .lght {
  width: 28px; height: 11px; border-radius: 3px; display: inline-block;
  background: linear-gradient(90deg, rgba(232, 54, 44, .16), #e8362c);
}
.maplegend .lgpoi {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: #6ee7a8;
}
.maplegend .lgstall {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  background: #e8362c; border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(232, 54, 44, .8);
}
.maptab .cnt, .mkchip .cnt { font-size: 13px; opacity: .78; margin-left: 4px; }

/* ---------------- 市场筛选 ---------------- */
.gridfilters { margin: 0 0 12px; display: flex; flex-direction: column; gap: 7px; }
.gridfilters .frow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gridfilters .flab {
  font-size: 14px; color: var(--mut); width: 34px; flex: 0 0 auto; font-weight: 600;
}
table.mk td .rel {
  font-size: 13.5px; color: var(--mut); font-variant-numeric: tabular-nums;
}
table.mk td .rel.lo { color: var(--r-uncommon); }
table.mk td .sub2 {
  display: block; font-size: 12px; color: var(--mut2); font-weight: 400;
}
table.mk td.hl { color: var(--gold); font-weight: 700; }
.maplegend {
  display: flex; align-items: center; gap: 12px; margin-top: 9px;
  font-size: 14.5px; color: var(--mut); flex-wrap: wrap;
}
.maplegend .lg { display: flex; align-items: center; gap: 6px; }
.maplegend .sp { flex: 1 1 auto; }
.lgdot { width: 13px; height: 13px; border-radius: 50%; background: #e8362c; border: 2px solid #fff; display: inline-block; }
.lgheat {
  width: 28px; height: 11px; border-radius: 3px; display: inline-block;
  background: linear-gradient(90deg, rgba(232, 54, 44, .14), #e8362c);
}
.maphint { margin: 7px 0 0; font-size: 14.5px; color: var(--mut); line-height: 1.6; }
.maphint b { color: var(--ink2); }
.maplegend .maplink { margin-left: auto; color: var(--gold); text-decoration: none; font-weight: 600; }
.maplegend .maplink:hover { text-decoration: underline; }

/* ---------------- 市场区域页：左「物品行情」 + 右「摊位地图」 ----------------
   价格和位置不该分两个标签页看。悬停左侧某行 → 右侧地图上卖这个物品的摊位高亮。 */
.mksplit {
  display: grid; grid-template-columns: minmax(0, 1fr) 392px;
  gap: 16px; align-items: start; margin-top: 16px;
}
.mksplit.nomap { grid-template-columns: minmax(0, 1fr); }
.mksecttl {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px;
}
.mksecttl h2 { font-size: 16px; margin: 0; }
.mksecttl > span { font-size: 13.5px; color: var(--mut2); }
/* 右侧整列吸附：翻左侧长表时地图一直在视野里 */
.mkaside { position: sticky; top: 78px; }
.mkhl.on { color: var(--gold); font-weight: 600; }

/* 「摊位」列：有售摊位数的按钮。触屏没有 hover，靠它把高亮钉住 */
.mkloc {
  font: inherit; font-size: 13.5px; font-weight: 700; min-width: 30px;
  padding: 2px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--soft); background: rgba(255, 255, 255, .05); color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mkloc:hover { background: rgba(212, 176, 106, .18); border-color: rgba(212, 176, 106, .5); }
.mkloc.on { background: var(--gold); border-color: var(--gold); color: #241b08; }
.dash { color: var(--mut2); }
/* 整行悬停反馈，指明「这一行正对应地图上的点」 */
tr.mkrow:hover td { background: rgba(255, 255, 255, .035); }
tr.mkrow:hover a.ent .z { color: var(--gold); }

/* 高亮态：非相关摊位淡出、目标摊位提亮放大。
   .mapbox.hlmode .mpin.stall.hl 比 .mpin.stall（2 类）多两级，稳赢原有配色 */
.mpin.stall { transition: opacity .12s ease; }
.mapbox.hlmode .mpin.stall { opacity: .15; }
/* 目标摊位提亮 + 放大 1.7 倍：摊位常常几个挤在一小片，只换颜色是不够醒目的 */
.mapbox.hlmode .mpin.stall.hl {
  opacity: 1; z-index: 6; color: #ffd166;
  transform: translate(-50%, -50%) scale(calc(var(--ik, 1) * 1.7));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 10px rgba(255, 209, 102, .95));
}
.mkcard { overflow-x: auto; }

@media (max-width: 980px) {
  .mksplit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* 单列时把地图吸在顶部：DOM 里它排在列表之后，不改顺序就要翻几百行才看得见。
     （方形地图按「视口高的 38%」定尺寸并居中 —— 只设 max-height 会让方框变成非方框被裁切） */
  .mkaside {
    order: -1;
    position: sticky; top: 62px; z-index: 5;
    background: var(--bg); padding-bottom: 6px;
    border-bottom: 1px solid var(--soft);
  }
  .mkaside .mapbox { width: min(100%, 38vh); margin: 0 auto; }
  .mkaside .maplegend, .mkaside .maphint { display: none; }
}

@media (max-width: 640px) {
  /* 手机上台表 7 列太挤：砍掉「在售」「相对」，只留 物品/最低总价/单价/挂牌/摊位。
     只作用于市场区域页的 .mkcard，别影响单服页那张 5 列的同类表。 */
  .mkcard table.mk th:nth-child(5), .mkcard table.mk td:nth-child(5),
  .mkcard table.mk th:nth-child(7), .mkcard table.mk td:nth-child(7) { display: none; }
}

/* 技能升级经验表 */
table.st.xp td { font-variant-numeric: tabular-nums; }
table.st.xp td:first-child { color: var(--mut); width: 78px; }

/* ---------------- 服务器状态 ---------------- */
.newsbox { margin-top: 16px; }
.newsrow { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--soft); align-items: flex-start; }
.newsrow:last-child { border-bottom: none; }
.newsrow time { flex: 0 0 84px; font-size: 14px; color: var(--mut2); padding-top: 2px; }
.newsrow .nb { flex: 1 1 auto; min-width: 0; }
.newsrow p { margin: 0; font-size: 15.5px; color: var(--ink2); line-height: 1.6; }
/* 维护公告：中文译文 + 可展开的英文原文 */
.newsorig { margin-top: 7px; }
.newsorig summary {
  cursor: pointer; display: inline-block; list-style: none;
  font-size: 13.5px; color: var(--mut); padding: 2px 10px; border-radius: 20px; background: var(--bg3);
}
.newsorig summary::-webkit-details-marker { display: none; }
.newsorig summary:hover { background: var(--bg2); color: var(--ink2); }
.newsorig summary::before { content: "▸ "; }
.newsorig[open] summary::before { content: "▾ "; }
.newsorig .norigen {
  margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid var(--soft);
  background: var(--bg); border-radius: 0 7px 7px 0;
  font-size: 14.5px; color: var(--mut); line-height: 1.6;
}
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.wcard { background: var(--bg2); border: 1px solid #000; border-radius: 10px; padding: 14px 16px; }
.wtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wname { font-size: 18.5px; font-weight: 700; margin-right: 2px; }
.statuss { font-size: 13.5px; font-weight: 600; padding: 2px 10px; border-radius: 20px; }
.statuss.on { background: rgba(22, 101, 52, .45); color: #6ee7a0; }
.statuss.off { background: rgba(153, 27, 27, .4); color: #fca5a5; }
.popchip { font-size: 13.5px; font-weight: 600; padding: 2px 10px; border-radius: 20px; }
.popchip.p-low, .zchip.p-low { background: rgba(22, 101, 52, .28); color: #86efac; }
.popchip.p-medium, .zchip.p-medium { background: rgba(180, 120, 20, .3); color: #fcd34d; }
.popchip.p-high, .zchip.p-high, .popchip.p-full, .zchip.p-full { background: rgba(180, 60, 20, .32); color: #fca5a5; }
.popchip.p-off { background: var(--bg3); color: var(--mut); }
.wmeta { font-size: 13.5px; color: var(--mut2); margin: 6px 0 10px; }
.wmeta .mlink { color: var(--gold); margin-left: 6px; }
.domains { display: flex; flex-direction: column; gap: 9px; }
.dom .dh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.dom .dh b { font-size: 15px; color: var(--gold); }
.dom .mk { font-size: 13px; color: var(--mut2); }
a.mk:hover { color: var(--gold); text-decoration: underline; }
.zones { display: flex; flex-wrap: wrap; gap: 5px; }
.zchip {
  font-size: 13.5px; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--soft);
  color: var(--ink2); background: var(--bg3);
}
.zchip:hover { border-color: var(--gold); color: var(--gold); }
.zchip i { font-style: normal; margin-left: 5px; font-size: 12px; opacity: .95; }
@media (max-width: 620px) {
  .wgrid { grid-template-columns: 1fr; }
  .newsrow { flex-direction: column; gap: 2px; }
}

/* ================================================================
   工匠台 / 技能：可制作物品（配方表 + 筛选）
   ================================================================ */
.tag.link { color: var(--gold); border: 1px solid rgba(212, 176, 106, .45); }
.tag.link:hover { background: rgba(212, 176, 106, .16); }
.tag.big { font-size: 15px; padding: 4px 12px; margin-left: 10px; vertical-align: 3px; }
.gold { color: var(--gold); }
.gold:hover { text-decoration: underline; }
.hint2 { color: var(--mut); font-size: 15px; margin: 4px 0 0; }

.rtool {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 12px;
}
.rtool .rin {
  flex: 1 1 200px; min-width: 160px; max-width: 320px;
  height: 38px; padding: 0 13px; border-radius: 8px;
  background: var(--bg3); border: 1px solid #000; color: var(--ink);
  font-size: 15.5px; outline: none;
}
.rtool .rin::placeholder { color: var(--mut2); }
.rtool .rin:focus { border-color: var(--grn2); box-shadow: 0 0 0 3px rgba(21, 128, 61, .22); }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip {
  background: var(--bg2); border: 1px solid var(--soft); color: var(--ink2);
  border-radius: 8px; padding: 6px 12px; font-size: 14.5px; font-weight: 600;
}
.rchip i { font-style: normal; color: var(--mut2); margin-left: 5px; font-size: 13px; }
.rchip:hover { border-color: var(--gold); color: var(--gold); }
.rchip.on { background: var(--grn); border-color: var(--grn); color: #fff; }
.rchip.on i { color: rgba(255, 255, 255, .75); }

.rtwrap { max-height: 760px; overflow: auto; border: 1px solid var(--soft); border-radius: 10px; }
table.rt { width: 100%; border-collapse: collapse; font-size: 16px; }
table.rt thead th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  background: #182130; color: var(--mut); font-size: 14.5px; font-weight: 600;
  padding: 9px 10px; border-bottom: 1px solid var(--soft); white-space: nowrap;
}
table.rt td { padding: 8px 10px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
table.rt tr:last-child td { border-bottom: none; }
table.rt tbody tr:hover { background: rgba(255, 255, 255, .035); }
table.rt .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rt .v { color: var(--gold); font-weight: 600; }
table.rt .qc { white-space: nowrap; }
table.rt .qc .tieric { width: 22px; height: 22px; margin-right: 6px; vertical-align: -5px; }
table.rt .qc .tn { color: var(--mut); font-size: 14px; margin-right: 6px; }
table.rt .ent img { width: 34px; height: 38px; flex: 0 0 38px; }
.rtempty { color: var(--mut); font-size: 15px; padding: 18px 0 4px; }

/* 技能页：工匠台卡片网格 */
.stgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.stcard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border-radius: 10px; text-align: center;
  background: var(--bg); border: 1px solid var(--soft);
}
.stcard:hover { background: var(--bg3); border-color: var(--gold); transform: translateY(-2px); }
.stcard img { width: 46px; height: 46px; object-fit: contain; }
.stcard b { font-size: 15.5px; color: var(--ink); }
.stcard:hover b { color: var(--gold); }
.stcard span { font-size: 13.5px; color: var(--mut2); }

.chipsrow { display: flex; flex-wrap: wrap; gap: 9px; }
.chipbig {
  flex: 1 1 130px; padding: 11px 14px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--soft);
}
.chipbig:hover { border-color: var(--gold); background: var(--bg3); }
.chipbig b { display: block; font-size: 16px; }
.chipbig:hover b { color: var(--gold); }
.chipbig span { font-size: 13.5px; color: var(--mut2); }

/* ================================================================
   移动端 / 安全区（三端适配收尾）
   - iPhone 刘海屏：固定头 / 底栏要避开圆角与底部横条
   - 表格（属性 / 配方 / 行情）在窄屏会顶破容器，统一给横向滚动兜底
   ================================================================ */
header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* 表格兜底：窄屏宁可卡片内横滑，也不要整页被撑宽（手机上整页横滑最难用）。
   只挑「直接含表格」的卡片 —— 地图卡（.mapcard）里没有表格，
   不会被卷进滚动容器（那会破坏拖拽/缩放与图钉提示）。 */
@media (max-width: 860px) {
  .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  table.dt, table.rt, table.mk, table.st { font-size: 15px; }
  table.dt th, table.dt td { padding: 6px 7px; }
  table.rt td { padding: 7px 7px; }
  .dhead .bigicon { width: 78px; height: 78px; flex-basis: 78px; }
}

/* ============================================================================
   交易市场 + 账号（trade.js）
   沿用站点深色体系：卡片用 --bg2，强调用 --gold，正向用 --grn。
   ============================================================================ */

/* ---- 浮动提示 ---- */
.ttoast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px);
  z-index: 300; max-width: min(560px, 88vw); padding: 11px 20px;
  background: #1b2433; border: 1px solid var(--gold-line); border-radius: 10px;
  color: var(--ink); font-size: 15.5px; box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .22s ease, transform .22s ease; pointer-events: none;
}
.ttoast.on { opacity: 1; transform: translate(-50%, 0); }
.ttoast.bad { border-color: rgba(248, 113, 113, .55); background: #2a1a1c; }

/* ---- 表单 ---- */
.tauth { max-width: 470px; margin: 26px auto 70px; }
.tform { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.tform label { font-size: 14.5px; color: var(--ink2); margin-top: 12px; }
.tform input, .tin, .tsel, .tpickin {
  height: 44px; padding: 0 13px; background: var(--bg2); color: var(--ink);
  border: 1px solid #000; border-radius: 9px; font-size: 16px; outline: none; width: 100%;
}
.tform input:focus, .tin:focus, .tsel:focus, .tpickin:focus {
  border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(212, 176, 106, .18);
}
.tsel { width: auto; min-width: 132px; }
.tin.sm { height: 40px; }
.tin.xs { height: 34px; width: 86px; padding: 0 8px; font-size: 15px; }
.trow { display: flex; gap: 8px; align-items: center; }
.trow .tin { flex: 1 1 auto; }
.trowline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.tlab2 { flex: 0 0 52px; font-size: 14.5px; color: var(--mut); }
.thint { font-size: 13px; color: var(--mut2); font-weight: 400; }
.thint.risk { color: #f0a04b; }
.thint2 { font-size: 13.5px; color: var(--mut); line-height: 1.65; margin: 6px 0; }
.tnote2 {
  margin-top: 26px; padding: 13px 16px; font-size: 14px; line-height: 1.7;
  color: var(--mut); background: var(--bg2); border: 1px solid var(--soft); border-radius: 10px;
}
.tnote2 b { color: var(--ink2); }
.twarn {
  margin: 14px 0; padding: 11px 15px; border-radius: 10px; font-size: 14.5px;
  background: rgba(240, 160, 75, .1); border: 1px solid rgba(240, 160, 75, .35); color: #f0c08a;
}
.twarn a { color: var(--gold); }
/* 「我的」页的绑定/换绑邮箱行 */
.tbind {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 15px; border-radius: 10px;
  background: var(--panel2, rgba(255, 255, 255, .03));
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
}
/* .tlab2 是按「世界/类型」那种两字标签定的宽度，这里「换绑邮箱」四个字会被压成两行 */
.tbind > .tlab2 { flex: 0 0 auto; width: auto; white-space: nowrap; }
.tbind .tin { flex: 1 1 240px; min-width: 0; }
.tbind .tin.sm { flex: 0 1 150px; }
.tbind .tbtn { flex: 0 0 auto; }
.tmini { margin: 2px 0 4px; }
.tmini a { font-size: 13.5px; color: var(--gold); cursor: pointer; }
.trecover {
  background: var(--bg2); border: 1px solid var(--soft); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 8px;
}
.tauthlinks { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14.5px; }
.tauthlinks a { color: var(--gold); }

/* ---- 按钮 ---- */
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: 9px;
  font-size: 15.5px; font-weight: 600; white-space: nowrap; background: var(--bg3);
  color: var(--ink2); transition: var(--tr);
}
.tbtn:hover { filter: brightness(1.12); }
.tbtn:disabled { opacity: .5; pointer-events: none; }
.tbtn.p { background: linear-gradient(145deg, var(--gold), var(--gold2)); color: #241b08; }
.tbtn.g { background: transparent; border-color: var(--soft); color: var(--ink2); }
.tbtn.g:hover { background: var(--bg3); }
.tbtn.xs { height: 30px; padding: 0 11px; font-size: 13.5px; font-weight: 500; }
.tbtn.danger { color: #f08a8a; border-color: rgba(248, 113, 113, .35); background: transparent; }
.tbtn.danger:hover { background: rgba(248, 113, 113, .12); }

/* ---- 板块首页 ---- */
.tradehero { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tradehero > div { flex: 1 1 320px; }
.tradehero .tbtn { margin-top: 6px; }
.tsearch { position: relative; margin: 4px 0 18px; }
.tsearch input {
  width: 100%; height: 48px; padding: 0 16px; background: var(--bg2); color: var(--ink);
  border: 1px solid #000; border-radius: 10px; font-size: 16px; outline: none;
}
.tsearch input:focus { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(212, 176, 106, .16); }
.tfilter { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchips button {
  height: 34px; padding: 0 14px; border-radius: 20px; font-size: 14px;
  background: var(--bg2); border: 1px solid #000; color: var(--mut); transition: var(--tr);
}
.tchips button:hover { background: var(--bg3); }
.tchips button.on { background: var(--grn); border-color: var(--grn2); color: #eafaf0; }
.secttl-h {
  font-size: 17px; margin: 26px 0 12px; padding-left: 12px; border-left: 3px solid var(--gold);
}
.secttl-h i { font-style: normal; font-size: 14px; color: var(--mut); margin-left: 6px; }

/* ---- 挂单卡片 ---- */
.tlist { display: flex; flex-direction: column; gap: 11px; }
.tlist.dim { opacity: .62; }
.tcard {
  background: var(--bg2); border: 1px solid #000; border-radius: 12px;
  padding: 13px 16px; transition: var(--tr);
}
.tcard:hover { border-color: rgba(212, 176, 106, .35); }
.tcard.mine {
  border-color: rgba(212, 176, 106, .45);
  background: linear-gradient(180deg, rgba(212, 176, 106, .07), var(--bg2));
}
.thead { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mut); flex-wrap: wrap; }
.ttype { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 6px; }
.ttype.tsell { background: rgba(212, 176, 106, .16); color: var(--gold); }
.ttype.tbuy { background: rgba(76, 175, 80, .16); color: #6ede7a; }
.ttype.tswap { background: rgba(59, 130, 246, .16); color: #6ea8f0; }
.tworld { color: var(--ink2); }
.tsp { flex: 1 1 auto; }
.ttime { font-size: 13px; color: var(--mut2); }
.tst { font-size: 12px; padding: 1px 8px; border-radius: 6px; }
.tst.done { background: rgba(76, 175, 80, .16); color: #6ede7a; }
.tst.exp { background: rgba(156, 163, 175, .16); color: var(--mut); }
.tbody { margin: 10px 0 9px; display: flex; flex-direction: column; gap: 6px; }
.tside { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 16px; }
.tlab { flex: 0 0 auto; font-size: 12.5px; padding: 2px 8px; border-radius: 6px; }
.tlab.give { background: rgba(248, 113, 113, .14); color: #f0a0a0; }
.tlab.want { background: rgba(76, 175, 80, .14); color: #7ed487; }
.tv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tgold { color: var(--gold); font-weight: 700; }
.tplus { color: var(--mut2); font-size: 13px; }
.tmut { color: var(--mut2); }
.titem { display: inline-flex; align-items: center; gap: 6px; }
.titem img { width: 26px; height: 30px; object-fit: contain; }
.titem a { color: var(--ink); }
.titem a:hover { color: var(--gold); }
.tqty { color: var(--mut); font-size: 14px; }
.tnote { font-size: 14px; color: var(--mut); padding-left: 2px; line-height: 1.55; word-break: break-word; }

/* ---- 挂单卡片：地点 chips + 价格语义（2026-10-14 玩家反馈「看不出是总价还是单价」） ----
   世界 / 地图 / 见面点各一枚 chip：原来三者挤成一行「Demeter · Arcadia省 ID：GO…」，
   玩家会把整行当成一句话读，分不清哪些是系统字段、哪些是留言。 */
.tlochips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tchip {
  font-style: normal; font-size: 12px; line-height: 1.7; padding: 1px 7px;
  border-radius: 5px; white-space: nowrap;
}
.tchip.world { background: rgba(59, 130, 246, .16); color: #6ea8f0; }
.tchip.place { background: rgba(212, 176, 106, .15); color: var(--gold); }
.tchip.zone { background: var(--bg3); color: var(--ink2); }
/* 「总价」小戳 —— 紧贴金币数字，不与 .tv 的 flex gap 打架 */
.tmode {
  font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--mut2);
  background: var(--bg3); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px;
}
/* 换算出来的「≈N 金/个」 */
.tper { font-size: 13px; color: var(--mut); margin-left: 8px; }
.tfoot {
  display: flex; align-items: center; gap: 9px; padding-top: 9px;
  border-top: 1px solid var(--soft); font-size: 13.5px; flex-wrap: wrap;
}
.towner { color: var(--gold); font-weight: 600; }
.tveri { font-size: 12px; color: #6ede7a; background: rgba(21, 128, 61, .2); padding: 1px 7px; border-radius: 5px; }
.texp { color: var(--mut2); font-size: 12.5px; }

/* ---- 我的 / 店铺页头 ---- */
.tmehead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.tmehead > div:first-child { flex: 1 1 320px; }
.tmeact { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- 物品头 / 行情条 ---- */
.titemhead { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; flex-wrap: wrap; }
.tbigicon { width: 62px; height: 70px; object-fit: contain; }
.tmkt {
  display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 15px; margin: 0 0 16px;
  background: var(--bg2); border: 1px solid var(--soft); border-radius: 10px;
  font-size: 14px; color: var(--mut);
}
.tmkt b { color: var(--ink2); }
.tmkt .tgold { color: var(--gold); }
.chk { color: #6ede7a; }
.warnx { color: #f0a04b; }

/* ---- 盘口 ---- */
.tbook { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 720px) { .tbook { grid-template-columns: 1fr; } }
.tbside { background: var(--bg2); border: 1px solid #000; border-radius: 12px; overflow: hidden; }
.tbside.full { margin-top: 14px; }
.tbhd { padding: 9px 14px; font-size: 14.5px; font-weight: 700; background: var(--bg3); }
.tbside.sell .tbhd { color: #f0a0a0; }
.tbside.buy .tbhd { color: #7ed487; }
.tbside.swap .tbhd { color: #6ea8f0; }
.tbhd i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--mut2); margin-left: 7px; }
.tbrow {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 14.5px; border-top: 1px solid var(--soft); flex-wrap: wrap;
}
.tbrow.mine { background: rgba(212, 176, 106, .08); }
.tbprice { flex: 0 0 108px; color: var(--ink); font-weight: 700; }
.tbprice i { font-style: normal; font-size: 12.5px; color: var(--mut2); font-weight: 400; }
.tbq { color: var(--mut); font-size: 14px; }
.tbrow .towner { font-size: 14px; }
.tempty { padding: 18px 14px; text-align: center; color: var(--mut2); font-size: 14px; }
.swaprow .tarrow { color: var(--gold); }

/* ---- 发布 ---- */
.tpublish { max-width: 820px; }
.tsec {
  background: var(--bg2); border: 1px solid #000; border-radius: 12px;
  padding: 13px 16px; margin: 12px 0;
}
.tsec.give { border-left: 3px solid #bb4455; }
.tsec.want { border-left: 3px solid var(--grn2); }
.tsechd { font-size: 14.5px; font-weight: 700; margin-bottom: 10px; }
.tsec.give .tsechd { color: #f0a0a0; }
.tsec.want .tsechd { color: #7ed487; }
.tsechd i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--mut2); margin-left: 7px; }
.titems { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px; }
.titemrow {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  background: var(--bg3); border-radius: 9px; flex-wrap: wrap;
}
.titemrow img { width: 28px; height: 32px; object-fit: contain; }
.titemrow .tnm { font-size: 15.5px; }
.txdel { background: none; border: none; color: var(--mut2); font-size: 15px; padding: 2px 6px; }
.txdel:hover { color: #f08a8a; }
.tseg { display: inline-flex; border: 1px solid #000; border-radius: 9px; overflow: hidden; }
.tseg button { height: 42px; padding: 0 17px; background: var(--bg2); color: var(--mut); border: none; font-size: 15px; }
.tseg button.on { background: var(--gold); color: #241b08; font-weight: 700; }
.tseg.sm button { height: 34px; padding: 0 12px; font-size: 14px; }
.tpick { position: relative; }
.tpickin { height: 40px; font-size: 15px; }
.tsug {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--bg2); border: 1px solid var(--gold-line); border-radius: 10px;
  max-height: 320px; overflow-y: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: none;
}
.tsug.on { display: block; }
.tsug a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.tsug a:hover, .tsug a.on { background: var(--bg3); }
.tsug img { width: 28px; height: 32px; object-fit: contain; }
.tsug .s1 { font-size: 15.5px; }
.tsug .s2 { font-size: 13.5px; color: var(--mut); margin-left: auto; }
.tunit { font-size: 13.5px; color: var(--mut); }

/* ================= 交易地点地图标注（2026-10-13 新增） =================
   发布页两栏：左侧表单自适应，右侧 420px 大地图随滚动吸顶；
   窄屏折成单栏，地图收进可展开块（先不加载底图，省手机流量）。 */
.tpublish.wide { max-width: 1180px; }
.tpubgrid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
.tpcol-form { min-width: 0; }
.tpcol-map { position: sticky; top: calc(var(--hd) + 14px); }
.trowline.al-top { align-items: flex-start; }
/* 「见面地点」是 4 个字，默认 52px 的标签列会把它折成两行 */
.tpubgrid .trowline .tlab2 { flex: 0 0 auto; min-width: 58px; white-space: nowrap; }
.tpubgrid .tchips button {
  height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #000;
  background: var(--bg2); color: var(--mut); font-size: 14px;
}
.tpubgrid .tchips button:hover { background: var(--bg3); color: var(--ink2); }
.tpubgrid .tchips button.on { background: var(--gold); border-color: var(--gold); color: #241b08; font-weight: 700; }
.tchips button .pvpk {
  font-style: normal; font-size: 10.5px; font-weight: 700; margin-left: 5px;
  padding: 0 5px; border-radius: 6px; background: rgba(248, 113, 113, .22); color: #f08a8a;
}
.tchips button.on .pvpk { background: rgba(36, 27, 8, .3); color: #241b08; }
.tloc { font-size: 14px; color: var(--ink2); }
.tmaphead {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink2);
}
#np-toggle, #me-toggle { margin-left: auto; display: none; }   /* 宽屏不需要「展开」按钮 */
.tmapbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tmaptip { display: none; font-size: 13px; color: var(--gold); padding: 6px 2px; }
.tmaptip.on { display: block; }
.tmapempty {
  padding: 42px 16px; text-align: center; color: var(--mut2); font-size: 14px;
  border: 1px dashed var(--soft); border-radius: 10px;
}
.tpvp { margin-top: 8px; font-size: 13.5px; color: #f0a04b; }
/* 水滴 pin：**尖端**为锚点（覆盖 .mpin 默认的圆心锚点）；--ik 反向缩放保持屏幕尺寸恒定。
   transform-origin 必须设成 50% 100%（底部中心）：否则 translate 之后的 scale 会绕
   盒子中心缩放，把尖端整体推离落点约 (1/2 - 1/2k)*高度 那么多像素（k≈0.42 时约 10px，
   看着"差不多对"，放大后就越错越明显）。 */
.mpin.place {
  width: 26px; height: 34px; transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(var(--ik, 1));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75)) drop-shadow(0 0 7px rgba(212, 176, 106, .5));
}
/* 上次保存的点：略透明，方便看清这次挪了多远。底图是浅色羊皮纸，
   透明度压太低（曾用 .45）金 pin 会直接糊掉看不见，这里保持可辨认。 */
.mpin.place.saved { opacity: .72; }
.mpin.place.pending { opacity: 1; }
.mapbox.annot { cursor: crosshair; }
.mapbox.annot.grab { cursor: grabbing; }

/* 「我的」页：5 图缩略卡管理入口 */
.tpmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.tpmcard {
  display: block; padding: 0; text-align: left; overflow: hidden; cursor: pointer;
  background: var(--bg2); border: 1px solid #000; border-radius: 11px; color: var(--ink);
  transition: var(--tr);
}
.tpmcard:hover { background: var(--bg3); }
.tpmcard.has { border-color: var(--gold-line); }
.tpmcard .thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: #0f141c; }
.tpmcard .thumb img { width: 100%; height: 100%; object-fit: contain; opacity: .9; }
.tpmcard .thumb .dot {
  position: absolute; right: 8px; top: 8px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 0 8px var(--gold);
}
.tpmcard .n { display: block; padding: 8px 10px 0; font-size: 14.5px; font-weight: 600; }
.tpmcard .n .pvpk {
  font-style: normal; font-size: 10.5px; font-weight: 700; margin-left: 5px;
  padding: 0 5px; border-radius: 6px; background: rgba(248, 113, 113, .2); color: #f08a8a;
}
.tpmcard .s { display: block; padding: 2px 10px 10px; font-size: 12.5px; color: var(--mut); }
.tpmview { margin: 6px 0 20px; padding: 12px 14px; background: var(--bg2); border: 1px solid #000; border-radius: 12px; }
.tpmview .mapbox { max-width: 520px; margin: 0 auto; }

@media (max-width: 1079px) {
  .tpubgrid { grid-template-columns: 1fr; }
  .tpcol-map { position: static; }
  #np-toggle { display: inline-block; }
  .tpcol-map:not(.open) .tmapbody { display: none; }
  .tpcol-map:not(.open) { padding: 12px 14px; background: var(--bg2); border: 1px solid #000; border-radius: 12px; }
}

/* ================= 挂单卡片上的交易地点缩略图 + 大地图浮层（2026-10-14） =================
   缩略图是正方形（源 400×400），与底图同比例 → pin 的 left/top 百分比与落点严格对应。
   带地点的卡片改两栏：左侧 96px 缩略图，右侧内容 `.tmain`。 */
.tcard.hasmap { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 13px; align-items: start; }
.tmain { min-width: 0; }
.tthumb {
  position: relative; display: block; width: 96px; aspect-ratio: 1 / 1;
  padding: 0; overflow: hidden; cursor: zoom-in;
  background: #0f141c; border: 1px solid var(--soft); border-radius: 9px;
  transition: var(--tr);
}
.tthumb:hover { border-color: var(--gold-line); }
.tthumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .86; transition: var(--tr); }
.tthumb:hover img { opacity: 1; }
/* 缩略图小，pin 缩到 0.56 一档；--ik 被 .mpin.place 的 scale() 消费 */
.tthumb .mpin.place.live { --ik: .56; }
.tthumb .tzoom {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 11.5px; padding: 3px 0; color: #f4ead6;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .74));
  opacity: 0; transition: var(--tr);
}
.tthumb:hover .tzoom { opacity: 1; }
/* 只选了图、没落点的：左下角一个小角标，别让人以为「没显示」 */
.tthumb.nomark::after {
  content: '未标点'; position: absolute; left: 4px; bottom: 4px;
  font-size: 10.5px; padding: 1px 5px; border-radius: 5px;
  color: #f0c66a; background: rgba(0, 0, 0, .62);
}

/* 「每行两条」：宽屏双列、窄屏回落单列 */
.tlist.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; align-items: start; }
@media (max-width: 900px) { .tlist.two { grid-template-columns: 1fr; } }

/* ---- 大地图浮层（点缩略图打开） ---- */
.tlight { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 22px; }
.tlight[hidden] { display: none; }
.tlight-bd { position: absolute; inset: 0; background: rgba(6, 9, 14, .74); }
.tlight-box {
  position: relative; width: min(680px, 100%); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--gold-line); border-radius: 14px;
  box-shadow: 0 26px 74px rgba(0, 0, 0, .62);
}
.tlight-hd {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--soft); font-size: 15px; font-weight: 600; color: var(--ink2);
}
.tlight-x {
  background: none; border: none; color: var(--mut); font-size: 17px; line-height: 1;
  padding: 2px 8px; cursor: pointer; border-radius: 7px;
}
.tlight-x:hover { color: var(--ink); background: var(--bg3); }
.tlight-map { padding: 12px; }
/* 地图面板本身是 aspect-ratio:1/1，用宽上限同时把高度压在 68vh 内（正方形，宽=高），
   再加标题栏与内边距后仍能完整落在视口里。 */
.tlight-map .mapwrap { max-width: min(560px, 68vh); margin: 0 auto; }
/* 浮层里这个点就是用户唯一要看的东西 —— 不能沿用编辑态的 .mpin.place.saved
   （opacity .72，那是为了让人看清「这次挪了多远」）。这里是只读展示，给足存在感。 */
.tlight .mpin.place {
  opacity: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .82)) drop-shadow(0 0 11px rgba(212, 176, 106, .95));
}
body.tlight-on { overflow: hidden; }

/* ================= 玩家家园（2026-10-14） =================
   左「安家的玩家」名单 + 右「家园地图」。悬停左侧某行 → 地图上他家的金色水滴
   放大发光、其余淡出，配方照搬市场区域页的 .hlmode，只把锚点从圆心换成水滴尖端。 */
.tradeact { display: flex; gap: 8px; flex-wrap: wrap; }
/* .tradehero > div 是 flex:1 1 320px（给标题用的），按钮组不能跟着被拉宽 */
.tradehero > .tradeact { flex: 0 0 auto; }
.thomenote {
  margin: -6px 0 16px; padding: 9px 13px; font-size: 13.5px; line-height: 1.6;
  color: var(--mut); background: var(--bg2);
  border: 1px solid var(--soft); border-left: 3px solid var(--gold); border-radius: 9px;
}
.thomenote b { color: var(--ink2); }

.thomesplit { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.thomelisthd { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.thomelisthd h2 { font-size: 16px; margin: 0; }
.thomelisthd h2 i { font-style: normal; color: var(--gold); font-size: 14px; }
.thomelisthd > span { font-size: 13.5px; color: var(--mut2); }

.thomerows { display: flex; flex-direction: column; gap: 6px; }
.thomerow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; cursor: pointer; font: inherit;
  background: var(--bg2); border: 1px solid var(--soft); border-radius: 10px;
  color: var(--ink); transition: var(--tr);
}
.thomerow:hover { background: var(--bg3); border-color: var(--gold-line); }
.thomerow.on { background: rgba(212, 176, 106, .14); border-color: var(--gold); }
.thomerow.mine { border-color: var(--gold-line); }
.thomerow .av {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #241b08;
  background: linear-gradient(145deg, var(--gold), var(--gold2)); border-radius: 50%;
}
.thomerow .n { font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.thomerow .n .me {
  font-style: normal; font-size: 10.5px; font-weight: 700; margin-left: 6px;
  padding: 0 5px; border-radius: 6px; color: #241b08; background: var(--gold);
}
.thomerow .l {
  margin-left: auto; font-size: 13px; color: var(--mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thomeempty {
  padding: 30px 16px; text-align: center; color: var(--mut2); font-size: 14px;
  border: 1px dashed var(--soft); border-radius: 10px;
}

/* 地图上方的图选择：带人数角标，人数为 0 的淡显（仍可点，进去看空图） */
.tmapsel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tmchip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; padding: 5px 10px; cursor: pointer;
  color: var(--ink2); background: var(--bg2);
  border: 1px solid var(--soft); border-radius: 999px; transition: var(--tr);
}
.tmchip:hover { background: var(--bg3); }
.tmchip.on { color: #241b08; background: linear-gradient(145deg, var(--gold), var(--gold2)); border-color: var(--gold); }
.tmchip.zero { opacity: .58; }
.tmchip .cnt {
  font-style: normal; font-size: 11.5px; font-weight: 700; min-width: 17px; text-align: center;
  padding: 0 5px; border-radius: 999px; background: rgba(0, 0, 0, .3);
}
.tmchip.on .cnt { background: rgba(0, 0, 0, .18); }

/* 悬停高亮：非相关的家淡出、目标家提亮放大。
   transform 必须带 translate(-50%,-100%)（水滴尖端锚点）——照抄市场页的
   translate(-50%,-50%) 会让 pin 在悬停那一瞬间整体往下跳半个身位。 */
.mpin.place.home { transition: opacity .12s ease; }
.mapbox.hlmode .mpin.place.home { opacity: .15; }
.mapbox.hlmode .mpin.place.home.hl {
  opacity: 1; z-index: 6;
  transform: translate(-50%, -100%) scale(calc(var(--ik, 1) * 1.8));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 10px rgba(255, 209, 102, .95));
}
.thomemap { position: sticky; top: calc(var(--hd) + 14px); }

/* 「登记我的家」浮层：比只读浮层多一条操作栏 + 备注行，内容更高 → 允许滚动 */
.tlight.he .tlight-box { overflow-y: auto; }
.he-bar, .he-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0;
}
.he-foot { padding-bottom: 2px; }
.he-foot .tin { flex: 1 1 220px; }
.tlight.he .tmaptip { padding: 8px 14px 0; }
.tlight.he .tlight-map .mapwrap { max-width: min(520px, 56vh); }

@media (max-width: 1079px) {
  .thomesplit { grid-template-columns: 1fr; gap: 12px; }
  /* 单列时地图提到最前并吸住：它排在 DOM 后面，不提上去就要翻很久才看得见 */
  .thomemap {
    order: -1; position: sticky; top: 62px; z-index: 5;
    background: var(--bg); padding-bottom: 6px;
  }
  .thomemap .mapwrap { width: min(100%, 38vh); margin: 0 auto; }
}