/* Diablo For Fans — 色板与排版沿用设计稿 */ :root{ --bg:#0c0b09; --bg-grad:radial-gradient(1100px 520px at 50% -180px,#191611 0%,#0c0b09 70%); --panel:#131110; --panel-2:#1b1814; --panel-3:#221d17; /* 浮层用的实心底。以前写成 var(--panel-1) 却从没定义过， 未定义的变量让整条 background 作废，装备详情浮层是全透明的， 底下的文字直接透上来。 */ --panel-1:#191612; --line-1:#1e1a15; --text-1:#f0e9dc; --line:#241f18; --line-2:#2f2820; --line-3:#3d3427; /* dim/muted 提过一档：原来 2.98:1，暗底小字根本看不清，现在 4.5:1 以上过 AA */ --text:#e7e0d2; --text-2:#ded5c2; --muted:#9d9486; --dim:#8b8478; --gold:#c8a45c; --gold-hi:#e6cb92; --gold-txt:#d9be82; /* 品牌包色板：字标金用于站标文字；熔橙**只用在「活的」元素**上 （实时状态、余烬光），别拿它当普通强调色，那样就不「活」了。 */ --brand-word:#e2c68e; --ember:#e27832; --brand:'Cormorant SC',Cinzel,Georgia,serif; --q-unique:#c8a05e; --q-set:#4fae4f; --q-runeword:#c9b98f; --q-normal:#b9b2a4; --q-magic:#7f9cd0; --stat:#8098cc; /* ── 字体 ────────────────────────────────────────────────────── 拉丁字自托管（app/static/fonts/，_tools/fetch_fonts.py 抓的）， 中日韩字用系统自带，**不走网络字体**。 2026-09-06 实测：挂 Google Fonts 时一个页面 22 个请求、1184 KB， 而本站其余全部资源加起来 26 KB——字体是整站的 45 倍，其中约 1 MB 是 Noto Sans/Serif SC 的中日韩分片（每片 44~63 KB、一页要十七片）。 中文字库天生这么大，网络字体这条路对中文站走不通。 换系统字还顺带修对一件事： 一标，苹方这些会自己按简繁挑 字形，比强行给繁体页套一份 Noto Sans SC 准。顺序按平台排。 */ --cjk:'PingFang SC','PingFang TC','Hiragino Sans GB','Microsoft YaHei', 'Microsoft JhengHei','Source Han Sans SC','Noto Sans CJK SC', 'WenQuanYi Micro Hei'; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --display:'Cinzel',var(--cjk),serif; --body:system-ui,-apple-system,'Segoe UI',var(--cjk),sans-serif; } *{box-sizing:border-box} /* .cmpbar/.statsug 这些设了 display:flex，会盖掉 hidden 属性 */ [hidden]{display:none!important} /* 给滚动条永久留位。不留的话，短页面（装备详情、登录、交易大厅）没有竖直 滚动条、可用宽度多出 10px，长页面又少 10px——切页面时顶栏和正文整体横跳 10px，站标和导航跟着一起挪。owner 2026-09-05 要的是「切页面顶栏一模一样」， 这一条属于同一件事。不支持这个属性的浏览器就当没写，退回原样。 */ /* 繁体页：把繁体字形的系统字排到前面。macOS 会按 lang 自己选苹方的简繁， 但 Windows 上「微软雅黑」只有简体字形，得显式让「微软正黑体」优先， 不然繁体页在 Windows 上会拿简体字形去显示繁体字（骨、直、么都不一样）。 */ html[lang="zh-Hant"]{ --cjk:'PingFang TC','PingFang SC','Microsoft JhengHei','Microsoft YaHei', 'Source Han Sans TC','Noto Sans CJK TC','Heiti TC'} html{scrollbar-gutter:stable} html,body{margin:0} body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.65; -webkit-font-smoothing:antialiased;text-wrap:pretty;min-height:100vh} .shell{min-height:100vh;background:var(--bg-grad)} a{color:var(--gold);text-decoration:none} a:hover{color:var(--gold-hi)} input,button,select,textarea{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer} ::selection{background:var(--gold);color:#14120f} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#100f0c} ::-webkit-scrollbar-thumb{background:#332d24;border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:#4c4337} input::placeholder,textarea::placeholder{color:var(--dim)} /* ---------- 顶栏 ---------- */ header.top{position:sticky;top:0;z-index:60;background:rgba(12,11,9,.95); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .top-in{max-width:1560px;margin:0 auto;padding:0 20px;height:64px; display:flex;align-items:center;gap:18px} .logo{display:flex;align-items:center;gap:11px;flex:none} /* 站标。标记是品牌包的兽瞳矢量图，不再用 span 拼菱形。 */ /* 站标用品牌包的横版锁定图（442x64，等比缩到高 34）。 原来的 .sigil / .wordmark 是「兽瞳图 + CSS 手排字标」，已删—— 字距字重要人工对齐品牌规格，跟交付的 PNG 也对不上。 */ .lockup{height:34px;width:auto;display:block;flex:none} /* 窄屏用的兽瞳版站标，默认不出现；见 base.html 里那两张图的说明 */ .lockup-sm{display:none;height:30px;width:auto;flex:none} @media(max-width:900px){.lockup{height:28px} }/* 导航吃掉站标和右侧之间的整段空白，标签在这段里居中。 flex:0 0 auto 的时候导航紧贴着站标，跟它挤在一起（owner 2026-09-05）。 居中的是「站标与右侧之间」的中点，不是页面正中——两侧宽度本来就不等， 要压成页面正中就得绝对定位，窄一点就会跟两边压到一起。 */ nav.main{display:flex;align-items:stretch;height:64px; flex:1 1 auto;min-width:0; /* safe center：装得下就居中，装不下自动退回左对齐。少了 safe 的话，超出的 部分会被均分到两头切掉——实测 901px 宽时首尾各被切掉 38px，「首页」和 「机制」都点不到，而且那个宽度没有横滚可用。 */ justify-content:safe center; /* 兜底的横滚。字号在 1360px 以下就收紧了（见下），正常不会溢出；真溢出时 至少还能滚过去，而不是把标签闷在看不见的地方。滚动条隐藏，别在顶栏里 多一条灰杠。 */ overflow-x:auto;overflow-y:hidden;scrollbar-width:none} nav.main::-webkit-scrollbar{display:none} nav.main a{position:relative;display:flex;align-items:center;padding:0 13px; font-size:14.5px;color:var(--muted);white-space:nowrap} nav.main a:hover{color:#e7dcc2} nav.main a.on{color:var(--text-2)} nav.main a.on::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px; background:linear-gradient(90deg,transparent,var(--gold) 28%,var(--gold) 72%,transparent)} /* 顶栏窄到一定程度就把导航的字号和间距收紧。断点定在 1400 而不是 900： 1320 以下顶栏搜索收起、1320 以上它又占回 360px，两种情况下导航能用的宽度 都掉到 450~600，而八个标签按 14.5px / 左右 13px 排出来，中文要 489px、 英文要 601px——不收紧就正好卡在边上。 */ @media(max-width:1400px){nav.main a{padding:0 10px;font-size:13px}} /* 窄屏：导航自己横向滚动。以前是把整页撑宽，手机上左右乱晃 */ @media(max-width:900px){ /* basis 0：导航只吃剩下的空间，语言开关和登录入口保持原样不被压。 右缘渐隐是「还能往右滚」的提示，只在这个宽度加——宽屏装得下， 再渐隐就成了平白把最后一个标签蒙掉一半。 */ nav.main{-webkit-overflow-scrolling:touch;flex:1 1 0; mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)} .top-right{flex:0 0 auto;margin-left:0} .top-in{gap:10px;padding:0 14px} .lockup{height:26px} /* 导航自己滚，但它的滚动内容还是会把 header 的 scrollWidth 撑大， 所以这里再夹一层。顶栏搜索在 1320px 以下已经收起，没有下拉层会被裁掉。 */ header.top{overflow:hidden} } /* 760px 以下站标换成兽瞳那一张。横版锁定在这个宽度要占 180px，减掉语言开关 和登录入口就没剩下什么了，导航被压成 0 宽——而宽度为 0 的横滚容器是滚不 出来的，八个标签一个都点不到。兽瞳版只占 30px，让出 150px 给导航。 */ @media(max-width:760px){ .lockup{display:none} .lockup-sm{display:block} /* 导航单独占一整行。 换成兽瞳站标之后导航仍然不够用：375px 上实测导航可见宽只有 146px， 而八个标签排开要 446px——「怪物 / 配装器 / 机制」整个在视口外，右缘那道 渐隐又只有 24px，看着不像能滚，等于在手机上找不到入口 （owner 2026-09-07 反馈）。根子是站标、语言开关、登录入口和导航挤在同一 行里分 375px，谁都不够。 让顶栏换行、导航独占第二行，可用宽度从 146px 变成 347px，前五六个标签 直接可见，剩下的一划就到。上面那行相应压到 48 高，加起来 92px， 仍然是个能一直吸顶的高度。 */ .top-in{flex-wrap:wrap;height:auto;row-gap:0;padding:0 14px} .logo,.top-right{height:48px;display:flex;align-items:center} .top-right{margin-left:auto} nav.main{order:3;flex:1 0 100%;height:44px; /* 独占一行之后不需要居中了：从左边排起，第一个标签紧贴左缘， 跟上面那行的站标对齐。居中会在左边留一段空白，看着像被截断了。 */ justify-content:flex-start; border-top:1px solid var(--line); /* 渐隐加宽到 32px：这是「右边还有」的唯一提示，24px 在手机上太含蓄 */ mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} /* 间距和字号再收一点：八个标签排开 473px，一行只有 347px。收到 8px/13px 之后能露出六个，最后两个一划就到。再往下收就挤得不像可点的东西了。 */ nav.main a{padding:0 8px;font-size:13px} /* 当前页那条下划线原来贴在 64px 高的顶栏底边上，换行之后要贴在导航行的 底边，不然它会压在分隔线外面 */ nav.main a.on::after{bottom:0} }.top-right{margin-left:auto;display:flex;align-items:center;justify-content:flex-end; gap:10px;min-width:0;flex:0 1 auto} /* 顶栏搜索。窗口窄的时候先挤搜索框，再整个收起—— 导航和账号入口不能被挤掉，那是随时要点的。 收起的断点是 1320 而不是 1240：搜索框一露面就占回 360px，而 flex 是按各自 的基准宽度按比例压的，压下去的那部分有一份落在导航头上。1241px 宽的英文页 实测导航被压到 489，八个标签要 513——搜索框刚冒出来就把导航挤到要横滚。 */ header .qwrap{position:relative;flex:0 1 360px;min-width:170px} @media(max-width:1320px){header .qwrap{display:none} }.qpill{display:flex;align-items:center;gap:8px;height:34px;padding:0 11px; background:var(--panel);border:1px solid var(--line-2);border-radius:8px} .qpill:focus-within{border-color:var(--line-3)} .qpill input{flex:1;background:none;border:0;outline:0;font-size:15px;min-width:0} .kbd{font-family:var(--mono);font-size:12px;color:var(--dim); border:1px solid var(--line-2);border-radius:4px;padding:1px 5px} /* 建议下拉。11 条就有 470px 高，矮一点的窗口直接顶到屏幕外，最后几条够不着， 所以统一夹一个上限并允许滚动（overflow:hidden 只是为了让圆角切住内容， 竖直方向要能滚）。 */ .qpanel{position:absolute;top:41px;left:0;right:0;background:var(--panel); border:1px solid var(--line-2);border-radius:10px; box-shadow:0 22px 56px rgba(0,0,0,.72);z-index:80; overflow-x:hidden;overflow-y:auto;max-height:min(66vh,470px)} .qpanel a{display:flex;align-items:center;gap:10px;padding:8px 12px; border-bottom:1px solid var(--line);color:var(--text-2)} .qpanel a:last-child{border-bottom:0} .qpanel a:hover,.qpanel a.sel{background:var(--panel-2)} .qpanel .tag{font-family:var(--mono);font-size:12px;color:var(--muted); background:var(--panel-3);border-radius:3px;padding:3px 0;width:74px;text-align:center;flex:none} .qpanel .nm{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .qpanel .meta{font-family:var(--mono);font-size:12.5px;color:var(--dim);flex:none} /* 一条都没搜到时的提示。以前是把面板清空，跟「还没开始搜」长得一模一样， 玩家看到的是「我打了字，什么也没发生」，分不清是没匹配还是搜索坏了。 内边距跟上面的 .qpanel a 对齐。 */ .qpanel .qnone{display:block;padding:10px 12px;font-size:13px;color:var(--dim)} .langsel{display:flex;gap:1px;background:var(--line);border-radius:6px;padding:1px} .langsel a{font-size:12.5px;padding:4px 8px;border-radius:5px;color:var(--muted);font-family:var(--mono)} .langsel a.on{background:var(--panel-3);color:var(--gold-txt)} .acct{display:flex;align-items:center;gap:6px;font-size:13px;padding:5px 10px; border:1px solid var(--line-2);border-radius:6px;color:var(--muted);white-space:nowrap} .acct:hover{border-color:var(--line-3);color:var(--gold-txt)} .acct.on{border-color:#54462f;color:var(--gold-txt)} .acctname{max-width:112px;overflow:hidden;text-overflow:ellipsis} .acctdot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none} /* ---------- 页面加载态 ---------- */ /* 见 templates/_loading.html。服务端直出，第一帧就在屏幕上；数据到位后由 site.js 的 pageReady() 撤掉。 盖在内容区上而不是整屏：顶栏和筛选行是服务端直出的、已经可以看可以点， 把它们也盖住反而显得更慢。 */ /* 装备库的列表面板也要当基准 */ .rlist{position:relative;min-height:50vh} .pageload{position:absolute;inset:0;z-index:20;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:14px; background:var(--bg);color:var(--dim);font-size:13.5px;letter-spacing:.06em} .pageload img{opacity:.55;animation:pl-breathe 1.8s ease-in-out infinite} /* 呼吸而不是旋转：这个站通篇没有旋转元素，转起来会很突兀。 */ @keyframes pl-breathe{0%,100%{opacity:.35;transform:scale(.94)} 50%{opacity:.7;transform:scale(1)}} .pageload-bar{width:132px;height:2px;border-radius:2px;overflow:hidden; background:var(--line-2);display:block} .pageload-bar b{display:block;width:38%;height:100%;border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:pl-sweep 1.15s ease-in-out infinite} /* 不是进度条——我们不知道还剩多少，画一个假的百分比是在骗人。 来回扫的一道光只说明「在动」，说的是实话。 */ @keyframes pl-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}} /* 谁把动画关了就别动，静态的那一版照样看得出是加载态 */ @media(prefers-reduced-motion:reduce){ .pageload img,.pageload-bar b{animation:none} .pageload-bar b{width:100%;opacity:.5} } /* ---------- 页脚 ---------- */ /* 一条扁的收尾带：三行，每行一整条内容横着排，居中但不贴边。 走到这一版之前错了两次：先是「品牌 | 数据」「商标声明 | 徽记」两端对齐， 内容删剩这么点之后中间空一大片；改成居中又变成一项一行，七行摞出 408px 高、两边照样空着（owner 2026-09-06：「做扁一点，内容不要往左或者往右 对齐就好」）。现在整块 170px 上下，横向由内容自己撑开。 */ .foot{margin-top:64px;border-top:1px solid var(--line);text-align:center; background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.5))} .foot-in{max-width:1180px;margin:0 auto;padding:24px 20px 26px} /* 每一行都是「居中的一串」：窄屏放不下时整项换行，不会把一个词劈开。 */ .foot-say,.foot-meta{margin:0;display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:0 10px;line-height:1.9} .foot-say{font-size:13.5px;color:var(--muted)} .foot-mark{opacity:.9;flex:none} .foot-name{font-family:var(--display);font-weight:600;font-size:15px; letter-spacing:.02em;color:var(--text-1)} .foot-meta{margin-top:4px;font-size:12.5px;color:var(--dim)} /* 分隔点用伪元素生成，不在模板里手打——三种语言各写一遍，早晚有一份忘了改。 颜色跟正文同一档：线条色（#3d3427）画描边够了，印字符在这层渐变底上看不见。 */ .foot-meta span+span::before{content:"·";margin-right:10px;color:var(--dim)} .foot-meta b{font-weight:400;font-family:var(--mono);color:var(--text-2)} /* 制作方徽记。**默认就是亮的**，不做「鼠标移上去才亮」那套——这块是要替 Inspired Work 带流量的，压暗等于把它藏起来（owner 2026-09-06）。 金色在深色底上本来就跳，再加一层很淡的外发光把它从背景里托出来； hover 只是把发光和字色再推一档，用来确认它可点。 */ .foot-seal{margin-top:14px;display:inline-flex;align-items:center;gap:11px} .foot-seal img{display:block;flex:none;transition:filter .15s ease; filter:drop-shadow(0 0 10px rgba(207,169,58,.22))} .foot-seal span{font-family:var(--display);font-size:12px;letter-spacing:.07em; color:var(--gold-txt);transition:color .15s ease} .foot-seal:hover img{filter:drop-shadow(0 0 16px rgba(207,169,58,.45))} .foot-seal:hover span{color:var(--gold-hi)} @media(max-width:900px){ .foot-in{padding:22px 16px 24px} .foot-say span{flex-basis:100%} /* 窄屏让说明自己占一行，别跟站名挤 */ /* 窄屏撤掉分隔点：那一行放不下会换行，`·` 就落在下一行的行首，看着像个 无缘无故的项目符号。改成靠间距分隔。 */ .foot-meta{gap:2px 14px} .foot-meta span+span::before{content:none} } /* 物品图标统一走平滑缩放。HD 资源一格 98px，显示时都是缩小， 用 pixelated（最近邻）缩小会丢像素、起锯齿——那是给旧版 28px 放大用的。 */ img{image-rendering:auto} /* 符文/宝石的三套镶嵌效果 */ .socketgrp{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px; padding:7px 0;border-bottom:1px solid var(--line)} .socketgrp:last-child{border-bottom:0} .socketwhere{font-family:var(--mono);font-size:12px;color:var(--gold-txt);padding-top:2px} .socketgrp .statline{display:block} /* 套装分段加成阶梯 */ .setstage{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px; padding:8px 0;border-bottom:1px solid var(--line)} .setstage:last-of-type{border-bottom:0} .stagen{font-family:var(--mono);font-size:12px;color:var(--gold);padding-top:3px} .stagebody{min-width:0} .stagebody .statline{display:block} /* 别人身上的分段加成压暗一档，当前这件保持亮色 */ .stageitem{color:var(--muted)} .stageitem em{font-style:normal;color:var(--dim);margin-right:7px} .stageitem.me{color:var(--stat)} .stageitem.me em{color:var(--q-set)} /* 重名怪的消歧标记 */ .dupTag{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim); border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;margin-left:6px; vertical-align:middle} /* 掉落分区 */ .dropsec{margin-bottom:12px} .dropsec:last-of-type{margin-bottom:0} .dropnote{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--dim)} /* 详情/比较页的符文图列：宽度跟着艺术栏走，比较 5 条时自动收成一列 */ .irow-art.art-runes{padding:16px 14px;align-content:center} /* .irow-art img 会把宽度按背包格数算（--gw*98px），符文格里的小图得压回去。 同权重下靠这条更靠后生效不保险，直接提高选择器权重。 */ .irow-art .rwslot img{width:34px!important;height:34px!important; max-width:34px;max-height:34px;filter:none} .irow-art .rwart{padding:0;border-bottom:0;width:100%; grid-template-columns:repeat(auto-fit,minmax(132px,1fr))} .irow-art .rwslot{background:var(--panel-2)} /* 符文之语详情：拿所需符文当「装备图」，两列排开。 镶嵌是有顺序的，所以每格标了序号，图案和名字都给全。 */ .rwart{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 14px; border-bottom:1px solid var(--line)} .rwslot{display:flex;align-items:center;gap:8px;padding:6px 8px; background:var(--panel-2);border:1px solid var(--line);border-radius:8px;min-width:0} .rwslot-n{font-family:var(--mono);font-size:11px;color:var(--dim);width:12px;flex:none} .rwslot img{width:34px;height:34px;object-fit:contain;flex:none} .rwslot-name{display:flex;flex-direction:column;min-width:0;line-height:1.3} .rwslot-name b{font-family:var(--mono);font-size:13px;color:var(--gold);font-weight:500} .rwslot-name em{font-style:normal;font-size:12px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 符文速查改成筛选器后要能点、能选中 */ .runepick{margin-bottom:16px} /* 默认要和页面底色一致，只有被选中的符文才高亮 —— 否则整块看着像被全选了 */ .runecell.chip{background:transparent;border:1px solid transparent; border-radius:8px;text-align:left} .runecell.chip:hover{background:var(--panel-2);border-color:var(--line)} .runecell.chip.on{background:var(--panel-3);border-color:#54462f; box-shadow:inset 2px 0 0 var(--gold)} /* 技能树：点击加点 + 悬停说明 */ .skbar{display:flex;align-items:center;gap:14px;padding:0 2px 12px} .skhint{color:var(--dim)} .sk{position:relative;transition:transform .1s,border-color .12s,background .12s} .sk.has{border-color:#54462f;background:var(--panel-3)} .sk.maxed{border-color:var(--gold);box-shadow:0 0 0 1px rgba(200,164,92,.35) inset} .sk.locked{opacity:.42} .sk.locked img{filter:grayscale(1)} .sklv.alloc{color:var(--gold-hi);font-weight:600} /* 点下去要有反馈，否则不知道到底加上没有 */ @keyframes skbump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}} @keyframes skdown{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}} .sk.bump{animation:skbump .18s ease-out} .sk.bumpdown{animation:skdown .18s ease-out} /* 数值旁边挂的可点说明 */ .kvhint{display:block;font-family:var(--body);font-size:12px;color:var(--gold-txt); letter-spacing:0;text-transform:none;margin-top:2px;border-bottom:1px dotted currentColor} .kvhint:hover{color:var(--gold-hi)} /* 「去哪刷」：区域优先，Boss 单列 */ .farmlead{margin:0 0 12px;font-size:14px;line-height:1.85;color:var(--text-2)} .farmlead b{color:var(--gold-txt);font-weight:500} /* 技能伤害与协同 */ .dmgbig{font-family:var(--mono);font-size:22px;color:var(--gold-hi);line-height:1.2} .dmgbig em{font-style:normal;font-size:13px;color:var(--muted);margin-left:8px} /* 单位串没配全时 JS 会输出一个空 ，光挂 8px 左边距，数字后面平白多出一块空隙 */ .dmgbig em:empty{display:none} /* 悬停说明 */ /* 技能详情现在整个在这个悬停提示里（右侧那个固定面板已经删掉，游戏里也没有）。 pointer-events 必须是 auto：提示里有 +/- 按钮，设成 none 就点不到了。 宽度按详情内容放宽，并给个最大高度免得长技能顶出屏幕。 */ .sktip{position:fixed;z-index:120;width:340px;max-width:calc(100vw - 16px); max-height:calc(100vh - 16px);overflow-y:auto;pointer-events:auto; background:var(--panel);border:1px solid var(--line-3);border-radius:10px; padding:4px 0;box-shadow:0 18px 44px rgba(0,0,0,.75)} .sktip .dhead{padding:10px 13px 0} .sktip .dsec{padding-left:13px;padding-right:13px} /* 只给「召唤物」那种整行的标题用。写成 .sktip b 会把说明句里的 **粗体** 也变成块级，一个词自己占一行。 */ .sktip .statline>b{display:block;font-size:15px;color:var(--gold-hi)} /* 提示框只有 340 宽，「抗性」这种两字标题会被折成两行。左边的标题不换行， 让右边的数值自己去折。 */ .sktip .basestat>span{white-space:nowrap} .sktip .basestat>b{text-align:right} .sktip p{margin:8px 0 0;font-size:13.5px;line-height:1.7;color:var(--text-2);white-space:pre-line} /* 「游戏没说的机制」：右边挂上依据的列名，方便核对 */ .hidrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.65} .hidrow:last-child{border-bottom:0} /* 多段的机制说明里写了换行（充能一击、雷霆之怒那种分几层讲的）， 默认会被折成一整坨。pre-line 只还原换行，不还原缩进空白。 */ .hidrow>span{white-space:pre-line} .hidrow code{font-family:var(--mono);font-size:11px;color:var(--dim);flex:none; max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .setlist a.miss{opacity:.5} /* ---------- 首页 ---------- */ .hero-search{margin-top:26px;max-width:640px} /* 装备库里的搜索框贴着结果列表放：先分类、再搜索、紧跟着就是列表， 视线不用退回页顶去找。首页那个是主视觉里的，规则不共用。 */ .items-page .hero-search{margin:0 0 12px;max-width:none} .hero-search .qwrap{position:relative} .hero-search .hs-box{height:54px;background:rgba(19,17,15,.94);border-color:#4a3d2b; box-shadow:0 12px 38px rgba(0,0,0,.5)} .hero-search .qpanel{position:absolute;top:60px;left:0;right:0;z-index:30} /* 徽记 */ /* 主视觉徽记。原来是 8 个 span 拼出来的菱形套菱形加一个「D」， 现在直接用品牌包的兽瞳矢量图。 */ /* 正文两栏 */ /* 挂单行 */ /* 符文之语速览 */ /* 宽度跟着符文名走：Zod 和 Thul 一样长的方格会把字挤掉 */ /* 工具入口 */ /* 交易步骤 */ /* ---------- 布局 ---------- */ .page{max-width:1560px;margin:0 auto;padding:22px 20px 60px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px} .panel-h{display:flex;align-items:center;justify-content:space-between; padding:11px 14px;border-bottom:1px solid var(--line);gap:12px} .panel-h h2{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.08em; font-weight:400;color:var(--muted)} /* .sub 有两种用法：单行标注（版本号、条数）和整段说明文字。 后者以前也走等宽字体，中文在 IBM Plex Mono 里没有字形，实际是在回退， 10.5px 的中文段落几乎没法读。按元素拆开。 */ .sub{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--dim)} p.sub{font-family:var(--body);font-size:15px;line-height:1.85;color:var(--muted)} .empty{padding:56px 20px;text-align:center;color:var(--dim);font-size:14px;line-height:1.7} /* ---------- 搜索主入口 ---------- */ .items-page{max-width:1400px} .hero-search{padding:6px 0 16px} .hs-box{display:flex;align-items:center;gap:12px;height:54px;padding:0 18px; background:var(--panel);border:1px solid var(--line-2);border-radius:12px; transition:border-color .15s,box-shadow .15s} .hs-box:focus-within{border-color:#4a3f2d;box-shadow:0 0 0 3px rgba(200,164,92,.08)} .hs-icon{color:var(--dim);flex:none} .hs-box:focus-within .hs-icon{color:var(--gold)} .hs-box input{flex:1;background:none;border:0;outline:0;font-size:16px;min-width:0;color:var(--text)} .hs-clear{background:none;border:0;color:var(--dim);font-size:14px;padding:6px;line-height:1} .hs-clear:hover{color:var(--text-2)} .hs-hint{margin-top:8px;padding-left:4px;font-size:13px;color:var(--dim)} .hs-hint b{font-family:var(--mono);font-weight:400;color:var(--muted); background:var(--panel-3);border-radius:4px;padding:2px 6px;margin:0 1px} /* ---------- 分类筛选 ---------- */ .facets{border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:4px 0;margin-bottom:16px} /* 每个筛选**必须**是整齐的一行。以前 flex-wrap:wrap，属性那行有 11 个芯片， 一换行整块就参差不齐。现在改成单行横向滚动：装不下就在行内滚， 页面结构不变形，手机上也照样能滑。 */ .frow{display:flex;align-items:center;gap:10px;padding:7px 2px;flex-wrap:nowrap;min-width:0} .fkey{line-height:1.4;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim); width:88px;flex:none;text-align:right} .fchips{display:flex;flex-wrap:nowrap;gap:5px;min-width:0; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-bottom:2px} .fchips::-webkit-scrollbar{display:none} /* 右端渐隐，提示"还能往右滑"；没溢出时看不出来 */ .fchips.over{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .fchips .chip{flex:none} .fspacer{flex:1} .chip{font-size:14px;line-height:1.2;padding:5px 12px;border-radius:16px; background:transparent;border:1px solid var(--line-2);color:var(--muted); transition:all .12s;white-space:nowrap} .chip:hover{border-color:var(--line-3);color:var(--text-2)} .chip.on{background:var(--gold);border-color:var(--gold);color:#14120f;font-weight:500} .fchips.fsub .chip{font-size:13.5px;padding:5px 10px;border-radius:14px} .fchips.fsub .chip.on{background:var(--panel-3);border-color:#54462f;color:var(--gold-hi)} .freset{font-size:13px;background:none;border:0;color:var(--dim); text-decoration:underline;text-underline-offset:3px} .freset:hover{color:var(--gold)} /* ---------- 结果 + 详情 ---------- */ .results{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start} /* 窄屏塌成一列时改用 flex，不是单列 grid：grid 项的包含块只有它自己那一格， 排在后面的 .detail 就没有可以 sticky 的空间。详情面板的窄屏规则写在 .detail 那一段。 */ @media(max-width:1000px){.results{display:flex;flex-direction:column;align-items:stretch} }.rlist{overflow:hidden} .sortbar{display:flex;gap:3px} .sortb{font-family:var(--mono);font-size:12.5px;padding:4px 9px;border-radius:6px; background:none;border:1px solid transparent;color:var(--dim)} .sortb:hover{color:var(--muted)} .sortb.on{background:var(--panel-3);border-color:var(--line-2);color:var(--gold-txt)} .rowlist{outline:0} .r{display:flex;align-items:center;gap:12px;padding:7px 14px;cursor:pointer; border-bottom:1px solid var(--line);scroll-margin:70px} .r:hover{background:var(--panel-2)} .r.on{background:#1f1b15;box-shadow:inset 2px 0 0 var(--gold)} .r-ico{width:38px;height:40px;display:grid;place-items:center;flex:none} .r-ico img{max-width:38px;max-height:40px;object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} .r-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .r-name{font-size:14.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .r-base{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .r-runes{font-family:var(--mono);font-size:13px;color:var(--q-runeword)} .r-tags{display:flex;gap:4px;flex:none} .r-lvl{font-family:var(--mono);font-size:13.5px;color:var(--dim);width:56px; text-align:right;flex:none} .tg{font-family:var(--mono);font-size:12px;font-style:normal;padding:2px 6px; border-radius:3px;background:var(--panel-3);color:var(--muted)} .tg.k-unique{color:var(--q-unique)} .tg.k-set{color:var(--q-set)} .tg.k-runeword{color:var(--q-runeword)} .tg.lad{background:#2a2118;color:var(--gold)} .q-unique{color:var(--q-unique)} .q-set{color:var(--q-set)} .q-runeword{color:var(--q-runeword)} .q-normal{color:var(--q-normal)} .num{font-family:var(--mono);font-size:13.5px;color:var(--muted)} /* ---------- 详情面板 ---------- */ .detail{position:sticky;top:82px;max-height:calc(100vh - 100px);overflow:auto} /* 窄屏把详情面板吸到视口底部。#detail 在 DOM 里排在整张列表后面，一塌成单列就掉到 几千像素以外（/items 不筛选 1292 行，面板落在 8500px 处），而选中一行时没有任何代码 把它滚进视野——手机上点一行等于完全没反应。吸底之后点哪行底部就换成哪行的内容； 滑到列表末尾它会自己回到原位，不会永远压着最后几行。 */ /* 窄屏改成居中弹层，不再吸底。吸底那一版从选中第一行起就一直占掉近一半屏幕， 375×812 上列表只剩四百来像素，翻 1315 件装备等于从门缝里看 （owner 2026-09-07）。逻辑在 js/sheet.js，那里写了完整来龙去脉。 没弹出来的时候面板整个不占位：它在 DOM 里排在列表后面，留着只会在页尾 拖一段空白。 */ @media(max-width:1000px){ .results .detail{display:none} /* 横向居中用 left/right:0 + margin:auto，不用 translate(-50%)： 后者要配 width:calc(100vw - 24px)，而 100vw **把滚动条也算进去**—— 弹层打开时 body 被锁成 overflow:hidden，滚动条没了，于是整体左偏一个 滚动条的宽度（实测偏 5px）。left/right:0 量的是真实可用宽度，没这问题。 */ .results .detail.as-sheet{display:block;position:fixed;z-index:201; /* 关闭按钮是相对它绝对定位的，见 .sheet-x */ left:0;right:0;margin-inline:auto;top:50%;transform:translateY(-50%); width:min(560px,calc(100% - 24px));max-height:min(78vh,720px); overflow:auto;-webkit-overflow-scrolling:touch; box-shadow:0 18px 50px rgba(0,0,0,.7)} } .sheet-back{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.62); backdrop-filter:blur(2px)} /* 弹层开着的时候别让背后的列表跟着滚 */ body.sheet-open{overflow:hidden} /* 关闭按钮吸在弹层右上角。各页是整块覆盖 innerHTML 的，这个按钮由 sheet.js 在每次重画之后重新塞回去。 */ /* 关闭按钮贴在弹层右下角，跟最后那一行（「完整页面 →」）并排。 原来是 float:right——它排在所有 .dsec 后面，于是自己单占一行， 白白吃掉一整行高度（owner 2026-09-07）。改成相对弹层绝对定位： 不占文档流、不挤内容，落在最后一行的右端。 注意 as-sheet 那边要有 position:relative，否则它会相对视口定位。 */ /* 关闭按钮在**最后一个小节内部**右浮动，跟那一行（一般是「完整页面 →」） 并排，不单占一行（owner 2026-09-07）。JS 负责把它塞进那个小节，见 sheet.js 的 putBtn()。 不用 position:absolute：弹层是可滚动的，absolute 的孩子会跟着内容滚走。 */ .sheet-x{float:right;margin:-3px -2px 0 10px; width:34px;height:34px;line-height:1;font-size:24px; background:var(--panel-3);border:1px solid var(--line-2);border-radius:8px; color:var(--muted);cursor:pointer} .sheet-x:hover{color:var(--gold);border-color:var(--line-3)} /* 关掉弹层的时候 sheet.js 刻意不去摘这个按钮（摘它会触发观察者、把弹层又弹 回来，见 sheet.js 里 hide() 的说明），所以非弹层状态下由 CSS 藏。 桌面端详情面板一直显示，这条同时保证那边不会冒出一个多余的叉。 */ .detail:not(.as-sheet) .sheet-x, .sktip:not(.as-sheet) .sheet-x{display:none} /* 技能说明在窄屏也走同一套居中弹层（逻辑在 skills.js）。宽屏它仍然是贴着 技能格弹出的悬停提示，坐标由 JS 现算，所以这里只覆盖弹层那一态。 */ .sktip.as-sheet{position:fixed;z-index:201;left:0;right:0;margin-inline:auto; /* 同上：关闭按钮相对它定位 */ top:50%;transform:translateY(-50%); width:min(560px,calc(100% - 24px));max-width:none; max-height:min(78vh,720px);overflow:auto;-webkit-overflow-scrolling:touch; box-shadow:0 18px 50px rgba(0,0,0,.7)} .dhead{padding:15px 16px 12px;border-bottom:1px solid var(--line); display:flex;gap:14px;align-items:flex-start} .dhead .ico{max-width:78px;max-height:156px;object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));flex:none} .dtitle{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25} .dbase{font-size:13px;color:var(--muted);margin-top:3px} .dtags{display:flex;gap:5px;margin-top:8px} .dsec{padding:12px 16px;border-bottom:1px solid var(--line)} .dsec:last-child{border-bottom:0} .dlabel{line-height:1.4;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim);margin-bottom:8px} .statline{color:var(--stat);font-size:15px;line-height:1.72} .basestat{line-height:1.5;display:flex;justify-content:space-between;gap:12px;font-size:14px; padding:3px 0;color:var(--muted)} .basestat b{color:var(--text-2);font-weight:400;font-family:var(--mono);font-size:14px} /* 物品详情页 */ /* ---------- 物品行：左图右属性 ---------- */ .detail-page{max-width:1080px} /* 装备详情 / 对比 / 交易页共用这一条。原来交易那一段里还有一条同名规则， 两条都在顶层、后一条静默盖掉前一条（gap 14 被改成 12），已合并到这里。 */ .crumbs{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:14px;font-family:var(--mono);font-size:13px;color:var(--dim)} .crumbs a{font-family:var(--mono);font-size:13px;color:var(--dim)} .crumbs a:hover{color:var(--gold)} .ghostbtn{margin-left:auto;font-size:14px;padding:5px 12px;border-radius:16px; background:none;border:1px solid var(--line-2);color:var(--muted)} .ghostbtn:hover{border-color:var(--gold);color:var(--gold)} .irow{display:grid;grid-template-columns:250px minmax(0,1fr) 268px;gap:0; margin-bottom:14px;overflow:hidden} @media(max-width:1080px){.irow{grid-template-columns:220px minmax(0,1fr)} .irow-side{grid-column:1/-1;border-left:0;border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} } @media(max-width:720px){.irow{grid-template-columns:1fr} .irow-art{border-right:0!important;border-bottom:1px solid var(--line);min-height:200px} }.irow-art{position:relative;display:grid;place-items:center;padding:24px 18px; border-right:1px solid var(--line); background: radial-gradient(120px 160px at 50% 42%,rgba(200,164,92,.09),transparent 70%), repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 28px), repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 28px), #100e0c} .irow-art img{ /* 按物品栏格数定尺寸。HD 资源本身一格就是 98px，这里按 1:1 铺， 等于用满原始分辨率；以前一格 56px 是配旧版 28px 图的 2 倍放大 */ width:calc(var(--gw,1) * 98px);height:calc(var(--gh,1) * 98px); max-width:100%;max-height:392px;object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.75))} .irow-noart{color:var(--dim);font-size:22px} .irow-rank{position:absolute;top:10px;left:12px;font-family:var(--mono);font-size:12px; color:var(--gold);background:#2a2118;border-radius:4px;padding:2px 7px} .irow-body{padding:18px 20px 20px;min-width:0; display:flex;flex-direction:column;justify-content:center} .irow-head{margin-bottom:14px} .irow-name{font-family:var(--display);font-size:23px;font-weight:700;margin:0;line-height:1.2} .irow-sub{margin-top:4px;font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap} .irow-tags{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap} .irow-stats .statline{font-size:15px;line-height:1.78} .irow-extra{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)} .setlist{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px} /* 比较模式引导条 */ .cmpbar{position:sticky;top:64px;z-index:50;display:flex;align-items:center;gap:12px; padding:10px 16px;margin-bottom:14px;border-radius:10px; background:linear-gradient(180deg,#221c12,#1a1610);border:1px solid #4a3f2d} .cmpbar .step{font-size:14px;color:var(--gold-hi);flex:none} .cmpbar .picks{display:flex;gap:6px;flex:1;flex-wrap:wrap;min-width:0} .cmppick{display:inline-flex;align-items:center;gap:6px;font-size:13px; background:#2a2118;border:1px solid #54462f;border-radius:14px;padding:3px 6px 3px 4px;color:var(--text-2)} .cmppick img{width:18px;height:18px;object-fit:contain} .cmppick button{background:none;border:0;color:var(--dim);font-size:14px;padding:0 2px;line-height:1} .cmppick button:hover{color:#e06b52} .cmpbar .acts{display:flex;gap:7px;flex:none} .btn-gold{font-size:14px;padding:6px 15px;border-radius:16px;background:var(--gold); border:1px solid var(--gold);color:#14120f;font-weight:500} .btn-gold:hover{background:var(--gold-hi)} .btn-gold[disabled]{opacity:.4;cursor:default} .r.picked{box-shadow:inset 2px 0 0 var(--gold-hi);background:#241d13} .r-pickno{font-family:var(--mono);font-size:12px;color:var(--gold); background:#2a2118;border-radius:3px;padding:2px 5px} /* 属性筛选 + 最近查看 */ .statsug{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:9px} .statsug .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)} .chip.stat{border-style:dashed} .chip.stat .n{font-family:var(--mono);font-size:12px;opacity:.7;margin-left:5px} .chip.staton{background:var(--panel-3);border-color:#54462f;border-style:solid;color:var(--gold-hi)} .recent{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:9px} .recent a{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:4px 10px 4px 5px; border-radius:14px;border:1px solid var(--line-2);color:var(--muted)} .recent a:hover{border-color:var(--line-3)} .recent img{width:17px;height:17px;object-fit:contain} .irow-side{border-left:1px solid var(--line);background:#100f0c;min-width:0; display:flex;flex-direction:column;justify-content:center} .sidesec{padding:14px 16px;border-bottom:1px solid var(--line)} .sidesec:last-child{border-bottom:0} /* 属性筛选：常驻一行 + 自定义输入 */ .frow-stat{align-items:flex-start} .statpick{position:relative;flex:0 0 150px} .statpick input{width:100%;background:var(--panel-2);border:1px dashed var(--line-2); border-radius:16px;padding:6px 11px;font-size:14px;outline:0;color:var(--text-2)} .statpick input:focus{border-style:solid;border-color:var(--line-3)} .statdrop{position:absolute;top:34px;left:0;width:300px;max-height:280px;overflow:auto; background:var(--panel);border:1px solid var(--line-2);border-radius:10px; box-shadow:0 18px 44px rgba(0,0,0,.7);z-index:70;padding:4px} .statdrop button{display:flex;width:100%;align-items:center;gap:10px;text-align:left; background:none;border:0;padding:7px 9px;border-radius:6px;font-size:14px;color:var(--text-2)} .statdrop button:hover{background:var(--panel-2)} .statdrop i{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--dim);font-style:normal} .r-hit{font-style:normal;color:var(--gold);margin-left:7px} .r-hit::before{content:"↔ "} /* ---------- 符文速查表 ---------- */ /* 底色要和页面一致。以前用 gap:1px + background:var(--line) 画网格线， 格子自己没底色，整块看着像被全选了。改成透明格 + 间距。 */ /* 符文速查/筛选格。**任何屏宽都只有图标和名字**：等级和「用到它的配方数」 原来各占一列，把一格撑到 200px，33 枚符文在手机上排成 33 行，比列表本身还长 （owner 2026-09-07）。那两个数进了 title——它们是参考信息，而挑符文时一眼要 扫的是图案和名字。 符文名在非英文页**双语**：中文玩家认的是「艾爾」不是「El」。英文页第二行会 跟第一行重复，所以模板里干脆不输出，格子也就能窄一截，两种语言两套宽度。 */ .runegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:4px;padding:10px 12px 12px;background:transparent} @media(min-width:640px){.runegrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}} /* 非英文页要摆两行字，格子得宽一点 */ html:not([lang="en"]) .runegrid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))} @media(min-width:640px){html:not([lang="en"]) .runegrid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}} .runecell{display:flex;align-items:center;gap:7px;padding:6px 7px; border-radius:8px;border:1px solid transparent;cursor:pointer} @media(min-width:640px){.runecell{gap:9px;padding:7px 9px}} .runecell:hover{background:var(--panel-2);border-color:var(--line)} .runecell.on{background:var(--panel-3);border-color:#54462f; box-shadow:inset 2px 0 0 var(--gold)} /* 符文图案本身就是要看清的东西——符文之语得照着顺序镶嵌，玩家会拿它对图。 原来 15px 根本认不出来（owner 2026-09-07）。 */ .runecell img{width:26px;height:26px;object-fit:contain;flex:none} @media(min-width:640px){.runecell img{width:30px;height:30px}} .runecell .rn{display:flex;flex-direction:column;gap:0;min-width:0;flex:1} .runecell .rn b{font-family:var(--mono);font-size:13.5px;font-weight:500; color:var(--q-runeword);line-height:1.3} @media(min-width:640px){.runecell .rn b{font-size:14px}} .runecell .rn span{font-size:12px;line-height:1.35;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(min-width:640px){.runecell .rn span{font-size:12.5px}} .chip.rune{font-family:var(--mono);font-size:13px;padding:5px 8px} /* ---------- 方块公式 ---------- */ .cgroup{border-bottom:1px solid var(--line)} .cgroup:last-child{border-bottom:0} .cghead{display:flex;align-items:center;gap:9px;padding:10px 14px; background:#100f0c;font-family:var(--display);font-size:14px;color:var(--gold-txt); position:sticky;top:64px;z-index:4;border-bottom:1px solid var(--line)} .cghead i{font-family:var(--mono);font-size:12px;font-style:normal;color:var(--dim); background:var(--panel-3);border-radius:9px;padding:2px 7px} /* 配方一行：材料 → 产出。 以前 .cin 是 flex:1，把整行剩下的宽度全吃掉，箭头和产出被顶到最右边。 157 条里有 42 条只有一个材料，中间就空出 1000px，眼睛要横扫过去才读得完。 改成三列网格：材料列按内容宽度收，箭头和产出紧跟其后，右边留白。 */ .crow{line-height:1.6;display:grid; grid-template-columns:minmax(0,max-content) auto minmax(0,max-content) 1fr; align-items:center;gap:10px;padding:9px 14px; border-bottom:1px solid var(--line);font-size:14px} .crow:last-child{border-bottom:0} .crow:hover{background:var(--panel-2)} .cin,.cout{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0} @media(max-width:760px){.crow{grid-template-columns:minmax(0,1fr);gap:4px} .carrow{transform:rotate(90deg);margin:0} }.cpart{display:inline-flex;align-items:center;gap:6px;color:var(--muted)} .cpart img{width:18px;height:18px;object-fit:contain;flex:none} .cdot{width:5px;height:5px;border-radius:50%;background:var(--line-3);flex:none;margin:0 6px} .cpn b{font-family:var(--mono);color:var(--gold);font-weight:500} .cpn em{font-style:normal;font-size:12.5px;color:var(--dim);margin-left:5px} .cpart.out .cpn{color:var(--gold-txt)} .cplus{font-style:normal;color:var(--line-3);font-size:13px} .carrow{font-style:normal;color:var(--gold);flex:none;margin:0 4px} .cmods{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px; padding:4px 0 2px 26px} .cmods .dlabel{margin:0} .cmods .statline{font-size:14px} /* ---------- 技能树 ---------- */ /* 单列。以前右边留了 340px 给固定详情面板，那个面板换成悬停提示之后就删了， 列一直空在那儿，三棵树被挤在左边三分之二。 */ .skillwrap{display:block} .trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media(max-width:900px){.trees{grid-template-columns:1fr} }.tree{overflow:hidden} .treegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px; position:relative} /* 前置连线。铺满整个网格，不吃鼠标事件，压在技能格底下。 */ .treelines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} /* 直角折线，跟游戏里的连法一致：贴着边缘进出，不斜穿过别的格子 */ .treelines polyline{fill:none;stroke:var(--line-3);stroke-width:2; stroke-linejoin:round;stroke-linecap:round} .treelines polyline.lit{stroke:var(--gold);stroke-width:2.5} .treegrid>.sk{position:relative;z-index:1} .sk{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 5px 9px; background:var(--panel-2);border:1px solid transparent;border-radius:8px; color:var(--muted);font-size:13px;line-height:1.35;text-align:center;min-width:0} .sk:hover{border-color:var(--line-3);background:var(--panel-3)} .sk.on{border-color:var(--gold);background:#221d17} /* HD 技能图标一帧 132x130，比旧版清楚得多，尺寸也放大一档 */ .sk img{width:60px;height:60px;object-fit:contain} .skn{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)} /* 需求等级不显示——悬停里有。只有加过点时才亮出 n/max，那是当前状态。 */ .sklv{display:none;font-family:var(--mono);font-size:12.5px;color:var(--dim)} .sklv.alloc{display:block} .sk.on .skn{color:var(--gold-hi)} .setlist{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px} /* ---------- 首页 4a「火柱居中」 ---------- */ /* 整屏一页：徽记 + 字标 + 搜索 + 数据量，底部压着实时战况。 颜色全部用已有变量，没有新色。 */ .h4{position:relative;min-height:calc(100vh - 64px);overflow:hidden;background:#070605; display:flex;flex-direction:column;margin:0 auto} /* 背景图放大并左移，让火柱落在页面中线上 */ .h4-fire{position:absolute;left:50%;top:50%;width:2200px;height:1240px; transform:translate(-50%,-44%) translateX(-560px);object-fit:cover;opacity:.95; pointer-events:none} /* 中央压暗 + 上下渐隐，保证文字对比度 */ .h4-shade{position:absolute;inset:0;pointer-events:none; background:radial-gradient(560px 380px at 50% 46%,rgba(7,6,5,.86),rgba(7,6,5,.3) 60%,rgba(7,6,5,0) 100%), linear-gradient(180deg,rgba(7,6,5,.75) 0%,rgba(7,6,5,0) 30%,rgba(7,6,5,0) 60%,rgba(7,6,5,.7) 100%)} .h4-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center; /* 设计稿里徽记顶边在 1080 高的视口上约 225px，也就是 ~21vh。 原来写的 8vh 只有 86px，整块比稿子高了 140px，上方留白全丢了。 */ padding:clamp(64px,15vh,200px) 20px 0;text-align:center} .h4-mark{width:116px;height:116px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.9))} .h4-word{margin-top:20px;font-family:var(--brand);font-weight:600;font-size:38px;line-height:1; letter-spacing:.2em;color:#f4e9d2;text-indent:.2em;text-shadow:0 2px 14px rgba(0,0,0,.95)} .h4-rule{display:flex;align-items:center;gap:9px;margin-top:12px;width:220px} .h4-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(200,164,92,.55))} .h4-rule i:last-child{background:linear-gradient(270deg,transparent,rgba(200,164,92,.55))} .h4-rule em{width:5px;height:5px;transform:rotate(45deg);background:var(--gold)} .h4-sub{margin-top:10px;font-family:var(--brand);font-weight:600;font-size:16px; letter-spacing:.44em;color:#d9b775;text-indent:.44em;text-shadow:0 2px 12px rgba(0,0,0,.95)} /* 下拉层的定位基准放在**空的那个 [data-qpanel] 上**，而不是整个表单： .qpanel 是绝对定位、top 写死 41px，按表单算就正好压在 68px 高的输入框上 （owner 2026-09-05 截图）。挂到紧跟在输入框后面那个零高度的 div 上， top:8px 就永远是「输入框下面 8px」，输入框在窄屏变矮也不用再改一次。 */ .h4-search{margin-top:46px;width:min(840px,100%);position:relative} .h4-search>[data-qpanel]{position:relative} .h4-search .qpanel{top:8px;z-index:40} .h4-box{display:flex;align-items:stretch;height:68px;background:rgba(14,12,11,.94); border:1px solid #4a3d2b;border-radius:16px;overflow:hidden; box-shadow:0 0 0 4px rgba(200,164,92,.06),0 30px 80px rgba(0,0,0,.8); transition:border-color .15s,box-shadow .15s} .h4-box:focus-within{border-color:#6d5a38; box-shadow:0 0 0 4px rgba(200,164,92,.12),0 30px 80px rgba(0,0,0,.8)} .h4-ico{display:grid;place-items:center;width:60px;color:var(--gold);flex:none} .h4-box input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:19px; color:var(--text);font-family:inherit} .h4-btn{margin:8px;padding:0 26px;border:0;border-radius:10px;background:var(--gold); color:#14120f;font-size:16px;font-weight:500;letter-spacing:.04em;cursor:pointer; font-family:inherit} .h4-btn:hover{background:var(--gold-hi)} .h4-stats{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px; font-family:var(--mono);font-size:14.5px;color:#b5ac9c;text-shadow:0 1px 10px rgba(0,0,0,.95)} .h4-stats b{font-weight:400;color:#f0e8d6} /* 每一项都是入口（版本号那项没有去处，仍是 span）。颜色跟旁边的文字一样， 不套全站的金色链接色——一排六项全金的话比上面的搜索框还抢眼。 */ .h4-stats a{color:inherit;border-bottom:1px solid transparent;padding-bottom:1px} .h4-stats a:hover{color:#f0e8d6;border-bottom-color:var(--gold)} .h4-stats a:hover b{color:var(--gold-hi)} /* ── 实时战况：左边时间轴，右边计量表 ── */ /* 两块都取不到时片段是空的，整条带连边框一起消失——页面上不留一个空壳， 也不摆「暂时取不到」这类话（owner 2026-09-06）。 */ .h4-live:empty{display:none} /* 只剩一块时让它占满整行，不然会缩在左半边、右边空一大条 */ .h4-live>:only-child{grid-column:1/-1;border-right:0} .h4-live{position:relative;z-index:2;width:min(1400px,calc(100% - 80px)); margin:auto auto 44px;display:grid; grid-template-columns:minmax(0,1fr) 340px;background:rgba(14,12,11,.92); border:1px solid var(--line-2);border-radius:14px;overflow:hidden;backdrop-filter:blur(10px)} .h4-live::before{content:'';position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--gold),transparent 72%);opacity:.8;z-index:1} .h4-tz{padding:20px 26px 22px;border-right:1px solid var(--line-2);min-width:0} .h4-head{display:flex;align-items:center;gap:9px} /* 下面这四条在替换首页样式段时被我整批删掉了，而模板还在用： 「经验 B」退化成纯文字、绿色状态点整个消失、两块标题失去字距。 补回来的同时把字号提一档——暗底上 11~12px 太吃力。 */ .livetitle{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--gold-hi)} .livedot{flex:none;width:7px;height:7px;border-radius:50%;background:#6ba86b; animation:lbpulse 2.6s ease-in-out infinite} @keyframes lbpulse{ 0%,100%{box-shadow:0 0 0 3px rgba(107,168,107,.18)} 50%{box-shadow:0 0 0 7px rgba(107,168,107,.05)}} @media(prefers-reduced-motion:reduce){.livedot{animation:none} } .h4-rule-txt{margin-left:auto;font-size:13px;color:var(--muted);text-align:right} /* 方案写的是 auto 1fr auto：两侧地带按内容占宽，**中间的进度条吃掉剩余空间**， 所以稿子里那条线很长。我原先写成了 1fr auto 1fr，正好反过来——地带把空间 占光、进度条缩成一小截。 两侧再加个 300px 上限：稿子的示例是「混沌避难所」这种短名，真实数据常是 「碎石荒野、碎石古墓一层、碎石古墓二层」，纯 auto 会被它撑开、又把条挤没。 */ .h4-tl{margin-top:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto; gap:22px;align-items:center} /* 两侧按内容占宽（跟方案一致），但给个上限：稿子的示例是「混沌避难所」这种 短名，真实数据常是「碎石荒野、碎石古墓一层、碎石古墓二层」，不封顶会把 中间那条进度条挤没。封了顶之后短名字时轨道自动缩、条就跟着变长。 */ .h4-slot{min-width:0;max-width:300px} .h4-slot.next{text-align:right} .h4-lab{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--gold)} .h4-lab.next{color:var(--muted)} /* 当前和下一个用**同样的字体、字号、颜色**。方案是 26 / 22 两档，但真实 地带名长短差很多，两档并排看着像没对齐；哪个是「当前」由上面那行标签的 颜色区分就够了。 */ .h4-zone{margin-top:7px;font-size:24px;line-height:1.32;color:#f0e8d6} .h4-zone.next{font-size:24px;color:#f0e8d6} .h4-tags{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap} /* 评级标签。拆成「说的是哪一项 | 等第」两格，等第那格按档位换底色。 原来整条只靠文字颜色分档，A 和 B、C 在暗底上几乎看不出差别 （owner 2026-09-05：「掉落 A 的标签要显眼一些，现在和 B、C 差别不大」）。 现在换的是**底色**不是字色：S 是渐变金、A 是实心金、B 是中性灰、 C 起转暗，明度一路往下掉，扫一眼就排得出高低，不用去比色相。 */ .tzt{display:inline-flex;align-items:stretch;border-radius:5px;overflow:hidden; border:1px solid var(--line-2);background:var(--panel-3); font-family:var(--mono);font-size:12.5px;line-height:1;white-space:nowrap} .tzt i{font-style:normal;display:flex;align-items:center;padding:0 8px; color:var(--muted);letter-spacing:.02em} .tzt b{display:flex;align-items:center;padding:6px 10px;font-weight:700;font-size:14px; background:#2a2620;color:var(--text-2)} /* 档位一共六级：S A B C D F，没有 E——不是猜的，拿三天 146 条排期数出来的 （经验档见过 S A B C F，掉落档 S A B C D F 都有）。 配色按「上半段拉明度、下半段拉色相」排： S A B C 底色一路变暗，相邻两档的对比度 1.8 倍以上，一眼看得出高低 D F 到这儿已经贴近面板底色、再压就没有余量了，改用色相分—— D 是中性暗灰，F 带明显的暗红，字色也跟着偏红 之所以要这么费劲：暗底上可用的明度区间本来就窄，六档均分下来相邻两档只差 1.1 倍，等于没分（owner 2026-09-05 的原话是「掉落 A 和 B、C 差别不大」）。 */ .tzt[data-t="S"]{border-color:#9a7833} .tzt[data-t="S"] i{color:#efdcaa} .tzt[data-t="S"] b{background:linear-gradient(180deg,#ffe9ad,#e2ba6c);color:#241d10; box-shadow:0 0 14px rgba(226,186,108,.5)} .tzt[data-t="A"]{border-color:#6b5527} .tzt[data-t="A"] i{color:#cdbb92} .tzt[data-t="A"] b{background:var(--gold);color:#241d10} .tzt[data-t="B"] b{background:#6f695d;color:#f6efe0} .tzt[data-t="C"] b{background:#45403a;color:#d8d0c2} .tzt[data-t="D"] b{background:#2c2823;color:#a79e90} .tzt[data-t="F"]{border-color:#402824} .tzt[data-t="F"] i{color:#9b8681} .tzt[data-t="F"] b{background:#2a1c19;color:#c08175} .h4-slot.next .h4-tags{justify-content:flex-end} /* 数据源还没发布下一格时的占位格。占的位置和真的那一格一模一样，只是 把地带名压到 muted——它不是一条数据，不该跟左边那格一样抢眼。 （早先这里是 .h4-tl.solo，收成两列；三列少一列比压暗一格更像坏了。） */ .h4-slot.pending .h4-zone{color:var(--muted)} .h4-pending{margin-top:11px;font-family:var(--mono);font-size:12.5px;line-height:1.5; color:var(--dim)} .h4-prog{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:8px; min-width:0} .tzclock{font-family:var(--mono);font-size:24px;line-height:1;color:var(--gold-hi)} .h4-bar{width:100%;display:flex;align-items:center} .h4-bar i{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none} .h4-bar i.end{background:none;border:2px solid var(--line-3)} .h4-bar span{flex:1;height:3px;background:#2a2419;position:relative;overflow:hidden} .h4-bar span b{position:absolute;left:0;top:0;bottom:0; background:linear-gradient(90deg,var(--gold),var(--gold-hi))} .h4-prog small{font-size:13.5px;color:var(--muted);font-family:var(--mono)} .h4-dc{padding:20px 26px 22px;display:flex;flex-direction:column;min-width:0} .dcdlc{margin-left:auto;font-size:13.5px;color:var(--gold-txt)} /* 三个大区各一行，全是「天梯 · 非专家」那一档（live.py 的 SHOW_LADDER）。 原来只有一行、报的是全服最高的那一档，44px 的大数字占掉半块地方，玩家 还得自己猜「我那个区到哪了」。现在一行一个区，数字和格子都按三行的量收小 （owner 2026-09-05：「进度条调整下大小，直接展示三个区域」）。 */ .dcbracket{margin-top:3px;font-family:var(--mono);font-size:12.5px; letter-spacing:.04em;color:var(--dim)} .dcrows{margin-top:14px;display:flex;flex-direction:column;gap:10px} .dcrow{display:grid;grid-template-columns:auto auto minmax(0,1fr); align-items:center;gap:10px} .dcreg{font-size:14px;color:var(--text-2);white-space:nowrap} .dcnum{font-family:var(--mono);font-size:19px;line-height:1;color:var(--gold-hi); white-space:nowrap} .dcnum em{font-style:normal;font-size:12px;color:var(--dim)} .h4-cells{display:flex;gap:3px;min-width:0} .h4-cells i{flex:1;height:11px;border-radius:2px;background:#221e17; border:1px solid var(--line-2)} .h4-cells i.on{background:var(--gold);border-color:var(--gold)} /* 已经现身人间的那一行转红，别让人以为还只是「进度高」 */ .dcrow.walking .dcnum{color:#e08c8c} .dcrow.walking .h4-cells i.on{background:#d07f7f;border-color:#d07f7f} .h4-msg{margin-top:16px;padding-top:13px;border-top:1px solid var(--line); font-size:14.5px;color:var(--text);line-height:1.6} .livesrc{position:relative;z-index:2;width:min(1400px,calc(100% - 80px)); margin:-32px auto 18px;text-align:right; font-size:13px;color:var(--muted)} .livesrc a{color:var(--gold-txt)} @media(max-width:1100px){.h4-live{grid-template-columns:1fr} .h4-tz{border-right:0;border-bottom:1px solid var(--line-2)} } @media(max-width:760px){.h4-live{width:calc(100% - 32px);margin:auto auto 40px} .h4-tl{grid-template-columns:1fr;gap:16px} .h4-slot.next{text-align:left} .h4-slot.next .h4-tags{justify-content:flex-start} .h4-prog{order:3;min-width:0} .h4-word{font-size:30px} .h4-box{height:58px} .h4-box input{font-size:16px} .h4-btn{padding:0 16px;font-size:14px} .h4-rule-txt{display:none} .livesrc{width:calc(100% - 32px);margin:-26px auto 14px} .h4-fire{transform:translate(-50%,-44%)} } /* ---------- 怪物图鉴 ---------- */ .mhp{font-family:var(--mono);font-size:14px;color:var(--text-2); width:130px;text-align:right;flex:none} .tg.imm-fire{color:#d98459} .tg.imm-cold{color:#7fb4d0} .tg.imm-light{color:#d6c96a} .tg.imm-poison{color:#7fb46a} .tg.imm-magic{color:#b08cd0} .tg.imm-phys{color:#b9b2a4} .mtbl{line-height:1.45;width:100%;border-collapse:collapse;font-size:14px} .mtbl th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim); font-weight:400;text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)} .mtbl th:first-child{text-align:left} .mtbl td{padding:5px 6px;text-align:right;font-family:var(--mono);font-size:14px;color:var(--muted)} .mtbl td:first-child{text-align:left;font-family:var(--body);font-size:14px} .mtbl tr.on td{color:var(--text-2);background:var(--panel-2)} .basestat b.immune{color:var(--gold)} .basestat b.pos{color:var(--q-set)} .basestat b.neg{color:#d07f7f} .ladtoggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer} .ladtoggle input{accent-color:var(--gold);width:13px;height:13px;margin:0} .droprow{line-height:1.5;display:flex;align-items:center;gap:8px;padding:3px 0;font-size:14px;color:var(--muted)} .droprow img{width:18px;height:18px;object-fit:contain;flex:none} .droprow i{width:18px;flex:none} .droprow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .droprow b{font-family:var(--mono);font-size:14px;color:var(--gold-txt);font-weight:400} .relbar{width:88px;height:4px;background:var(--panel-3);border-radius:2px; overflow:hidden;flex:none;margin-right:8px} .relbar i{display:block;height:100%;background:linear-gradient(90deg,#7a5f2e,var(--gold))} /* ---------- Build 配装器 ---------- */ .build-page{max-width:1500px} .lvlinput{width:64px;background:var(--panel-2);border:1px solid var(--line-2); border-radius:7px;padding:5px 9px;font-family:var(--mono);font-size:14px;outline:0} /* 从别处跳进来时高亮那一条。两秒淡出，不留下永久变色的卡片 */ @keyframes mechflash{ 0%{box-shadow:0 0 0 0 rgba(200,164,92,0);border-color:var(--line-1)} 15%{box-shadow:0 0 0 3px rgba(200,164,92,.45);border-color:var(--gold)} 100%{box-shadow:0 0 0 0 rgba(200,164,92,0);border-color:var(--line-1)} }.mech.flash{animation:mechflash 2.2s ease-out} /* 关键指标整行：铺成自适应多列，不再挤在 320px 的柱子里 */ .rating{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 24px;align-items:start} /* 评分区每组的外壳（build.js 的 group()）。.rating 是多列网格，网格项默认 min-width:auto——组里那些带长注解的 .metric 会把列撑出容器而不是换行， 在窄一点的窗口下直接溢出到面板外面。 */ .mcol{min-width:0} .mcol>.mgroup:first-child{margin-top:0} /* 对怪测算整行：怪物那块和结果那块并排 */ .vspanel .skdmg{padding:0} .vspanel .dsec{border-top:none} @media(min-width:900px){.vspanel .skdmg{display:grid; grid-template-columns:320px repeat(auto-fit,minmax(230px,1fr)); gap:0 18px;align-items:start;padding:0 14px 12px} } /* 佣兵的装备格子。底色跟上面的物品栏一样是石板，格子是同一套凹槽—— 不这样的话它跟旁边的数值栏长得一模一样，看不出是能点的配装区。 */ .mgridwrap{margin-top:6px;padding:9px;border-radius:6px; border:1px solid #59524733; background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18)), radial-gradient(120% 90% at 30% 0%,var(--stone-hi),transparent 60%), linear-gradient(160deg,var(--stone),var(--stone-lo)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E"), linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18)), radial-gradient(120% 90% at 30% 0%,var(--stone-hi),transparent 60%), linear-gradient(160deg,var(--stone),var(--stone-lo))} /* 佣兵装备格，照游戏里的佣兵栏摆： 武器 头盔 副手 武器 护甲 副手 四个位置**恒定存在**，哪种佣兵都一样（owner 2026-09-05）。以前是按这只 佣兵实际有几个槽位画几个（斥候 3、铁狼 4、野蛮人 4），块的高矮宽窄跟着 佣兵变，切一下整页就跳。这一只没有的部位画成 .mvoid：占着位子， 没有边框也点不动——游戏里那个位置本来也是空的。 */ .mdoll{display:grid;gap:7px; grid-template-columns:1fr 1fr 1fr;grid-template-rows:86px 86px; grid-template-areas:"wp hm of" "wp ar of"} .mdoll .m-wp{grid-area:wp} .mdoll .m-hm{grid-area:hm} .mdoll .m-ar{grid-area:ar} .mdoll .m-of{grid-area:of} .mvoid{border:1px dashed #3a352c;border-radius:3px;opacity:.45} /* 配装器：佣兵栏。跟关键指标一样是多列平铺 */ .mercrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;padding:12px 14px} .mercrow .fchips{display:flex;flex-wrap:wrap;gap:6px} .mercrow .lvlinput{width:80px} /* 一块里的第二段小标题（自带技能 → 光环）。上面留一道分隔， 免得两段的数值行糊成一片。 */ .dlabel.sublabel{margin-top:13px;padding-top:11px;border-top:1px solid var(--line-1)} /* 配装器：自己配一根魔法神符 */ .mcharm{padding:10px 12px;border-bottom:1px solid var(--line)} .mcrow{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap} .mcrow:last-child{margin-bottom:0} .mcrow label{width:42px;flex:none;font-size:12px;color:var(--dim)} .mcrow select{flex:1;min-width:0} .mcrow .sub{font-size:11.5px;color:var(--dim)} /* 物品名底下那行英文名。压暗一档、字号小一号，不跟正名抢注意力 */ .enname{font-family:var(--mono);font-size:11.5px;line-height:1.35;color:var(--dim); letter-spacing:.01em;margin:1px 0 2px} .irow-name + .enname{margin-bottom:3px} /* 选装备列表那一行放不下两行，跟在名字后面走 */ .enin{display:block;font-family:var(--mono);font-size:11px;font-style:normal;color:var(--dim)} /* 属性组：这一组里只会随机出一条 */ .rndgroup,.itip .rndg{margin:4px 0;padding:3px 0 3px 9px;border-left:2px solid var(--line-2)} .rndlabel,.itip .rndg em{display:block;font-size:11px;font-style:normal;color:var(--dim); letter-spacing:.03em;margin-bottom:1px} /* 受益于清单：整句照游戏的写法，加过点的那条亮起来 */ .bonrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:3px 0;font-size:12.5px;line-height:1.5;color:var(--dim)} .bonrow.on{color:var(--text-2)} .bonrow a,.bonrow b{color:var(--muted);font-weight:400} .bonrow.on a,.bonrow.on b{color:var(--gold-hi)} .bonrow a:hover{text-decoration:underline} .bonrow em{flex:none;font-family:var(--mono);font-size:11.5px;font-style:normal;color:var(--gold)} /* 对怪测算的步骤标题 */ .vstep{font-size:11.5px;color:var(--gold);letter-spacing:.04em;margin:0 0 6px} /* 配装器：穿不上时的提示框 */ .reqmask{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.62); display:flex;align-items:center;justify-content:center;padding:16px} .reqbox{width:340px;max-width:100%;background:var(--panel-1); border:1px solid var(--line-2);border-radius:12px; box-shadow:0 18px 46px rgba(0,0,0,.6);padding:16px 18px 14px} .reqbox h3{margin:0;font-size:15px;line-height:1.3} .reqbox .reqsub{margin:3px 0 0;font-size:12px;color:var(--dim)} .reqbox ul{margin:12px 0 0;padding:0;list-style:none} .reqbox li{display:flex;justify-content:space-between;gap:12px; padding:5px 0;border-top:1px solid var(--line-1); font-size:12.5px;color:var(--text-2)} .reqbox li b{font-family:var(--mono);font-weight:400;color:#d07f7f} .reqbtns{display:flex;gap:8px;margin-top:14px} .reqbtns button{flex:1;padding:7px 0;border-radius:7px;cursor:pointer; font-size:12.5px;border:1px solid var(--line-2); background:var(--panel-2);color:var(--text-2)} .reqbtns button:hover{border-color:var(--line-3)} .reqbtns button.go{background:#241d12;border-color:#54462f;color:var(--gold-hi)} /* 配装器：物品栏。10 列 × 4 行，跟游戏背包一样。格子和装备槽同一套凹槽 做法，神符按 misc.invwidth/invheight 占格，用 grid-area 压在空格上面。 */ .invgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(4,auto);gap:3px;padding:6px 14px 14px} .invcell{aspect-ratio:1;border:1px solid var(--cellline);border-radius:3px; background:linear-gradient(180deg,#0f0d0b,var(--cellbg)); box-shadow:inset 0 2px 5px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06); cursor:pointer;transition:border-color .12s} .invcell:hover{border-color:#8a7d68} /* 放好的神符：压在空格上面，占它真实的格数 */ .invitem{display:flex;align-items:center;justify-content:center;padding:2px; border:1px solid currentColor;border-radius:3px;cursor:pointer;overflow:hidden; background:linear-gradient(180deg,#171310,#0d0b09); box-shadow:inset 0 0 10px rgba(0,0,0,.7)} .invitem img{max-width:100%;max-height:100%;object-fit:contain} .invitem:hover{filter:brightness(1.25)} .invhint{padding:0 14px 10px;font-size:11.5px;color:#8d8375} /* 配装器：物品栏。10 列 × 4 行，跟游戏背包一样 */ .invgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px; padding:4px 12px 10px} .invcell{aspect-ratio:1;border:1px solid var(--line-2);border-radius:4px; background:linear-gradient(180deg,#14110d,#0b0a08);cursor:pointer;display:flex;align-items:center; justify-content:center;padding:2px;overflow:hidden; font-size:9.5px;line-height:1.15;text-align:center;color:var(--dim); transition:border-color .12s,background .12s} .invcell:hover{border-color:var(--line-3);background:var(--panel-2)} .invcell.on{border-color:#54462f;background:#17140f;color:var(--q-magic)} .invhint{padding:0 12px 8px;font-size:11.5px;color:var(--dim)} /* 配装器：装备悬停详情。样式对着游戏的物品提示走：名字按品质着色， 属性一行一条，需求单独一块。 */ /* z-index 要高过选装备弹层（.pickwrap 是 200），否则弹层一开 浮层就被压在底下，鼠标移上去什么都看不到。 */ .itip{position:fixed;z-index:230;width:290px;max-width:calc(100vw - 16px); background:var(--panel-1);border:1px solid var(--line-2);border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.55);padding:11px 13px;pointer-events:none} .itip .itname{font-size:15px;line-height:1.3} .itip .itbase{font-size:12px;color:var(--dim);margin-top:1px} /* 伤害/防御/耐久/需求：游戏里这几行是一行一条的白字，不是挤成一排的小字 */ .itip .itreq{margin-top:7px;padding-top:7px;border-top:1px solid var(--line-1)} .itip .itl{font-size:12.5px;line-height:1.5;color:var(--muted)} .itip .itsock{margin-top:7px;padding-top:7px;border-top:1px solid var(--line-1); font-size:12.5px;color:var(--q-magic)} .itip .itstats{margin-top:8px;padding-top:7px;border-top:1px solid var(--line-1)} .itip .itstats div{font-size:12.5px;line-height:1.55;color:var(--q-magic)} /* 配装器：关键指标。都是精确值，不是归一化的评分 */ .mgroup{font-size:11px;letter-spacing:.08em;color:var(--dim); padding:10px 2px 5px;border-top:1px solid var(--line-1)} .mgroup:first-child{border-top:0;padding-top:2px} .metric{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; align-items:baseline;padding:3px 2px;font-size:13.5px;color:var(--text-2)} .metric b{font-family:var(--mono);font-size:15px;color:var(--gold-hi);font-weight:400} .metric b.warn{color:#d0a35f} .metric em{grid-column:1/-1;font-style:normal;font-size:11.5px;color:var(--dim); font-family:var(--mono)} .metric.ok span{color:var(--q-set)} /* ── 配装器：属性分配 ─────────────────────────────────────── */ .allochead{display:flex;justify-content:space-between;align-items:baseline; padding:2px 2px 8px;font-size:13px;color:var(--muted)} .allochead b{font-family:var(--mono);font-size:15px;color:var(--gold-hi)} .allochead b.over{color:#d07f7f} .alloccols,.allocrow{display:grid;grid-template-columns:56px 34px 96px 40px 44px minmax(0,1fr); gap:8px;align-items:center} .alloccols{padding:0 2px 4px;font-size:11px;color:var(--dim);text-align:right} .alloccols span:first-child,.alloccols span:last-child{text-align:left} .allocrow{padding:5px 2px;border-top:1px solid var(--line-1);font-size:13.5px} .allocrow .an{color:var(--text-2)} .allocrow .ab,.allocrow .ag,.allocrow .at{font-family:var(--mono);text-align:right;color:var(--muted)} .allocrow .at{color:var(--gold-hi);font-size:14.5px} .allocrow .ag{color:var(--q-set)} .astep{display:flex;align-items:center;justify-content:center;gap:6px} .astep button{width:24px;height:24px;line-height:1;border-radius:6px; border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-2); font-size:15px;cursor:pointer} .astep button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi)} .astep button:disabled{opacity:.3;cursor:default} .astep b{min-width:30px;text-align:center;font-family:var(--mono);font-size:14px;color:var(--text-1)} .allocrow .need{font-size:11.5px;color:var(--dim);font-style:normal} .allocrow .need.bad{color:#d07f7f} .allocrow .need.ok{color:var(--q-set)} /* 装备和角色面板并排对照；关键指标、对怪测算各占一整行，见 build.html */ /* 物品栏是要照着游戏看的，给它足够的宽；角色面板是一列数字，窄一点不影响读 */ /* position:relative 是给加载态当定位基准的（.pageload 是 absolute）， 不然它会跑到 .shell 上去、把顶栏也盖住。 */ .buildgrid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 528px; gap:16px;align-items:start;min-height:60vh} @media(max-width:820px){.buildgrid{grid-template-columns:1fr} } /* 装备栏：照游戏物品栏的摆法和样子。左右两根竖着的武器位夹住中间的 头盔/护甲，护符贴头盔右边，两枚戒指夹着腰带。位置本身就是记号， 不用读字找槽位。 配色也照游戏：一整片暖灰石板，格子是比石板更暗的凹槽——游戏就是靠这个 明暗差让人一眼看出格子在哪。原来是黑底配更黑的格子，差值几乎为零， 格线全糊在一起。石头纹理用一张内联的分形噪声铺在渐变上，不额外请求图片。 */ /* 石板配色。装备栏和佣兵的装备格共用一套，这样一眼看得出「这里是配装的地方」 */ .gearpanel,.mgridwrap{ --stone:#3b3833; --stone-hi:#4a463f; --stone-lo:#2b2823; --cellbg:#191713; --cellline:#565048} .gearpanel{ background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18)), radial-gradient(120% 90% at 30% 0%,var(--stone-hi),transparent 60%), linear-gradient(160deg,var(--stone),var(--stone-lo)); border-color:#59524733} /* 石面的颗粒。SVG 内联，缺图也不会变成一块纯色 */ .gearpanel .doll,.gearpanel .invgrid{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E")} .gearpanel .panel-h{background:rgba(0,0,0,.22);border-bottom-color:#00000055} .doll{display:grid;padding:14px 14px 6px;gap:8px; grid-template-columns:1.2fr .78fr 1.05fr .78fr 1.2fr; grid-template-rows:118px 118px 112px; grid-template-areas: "wp . hm am sh" "wp . ar . sh" "gl r1 bl r2 bt"} /* 格子是凿进石板的凹槽：底色比石板暗一大截，上沿留一道高光 */ .slot{position:relative;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;padding:6px 5px;min-width:0;min-height:0; border:1px solid var(--cellline);border-radius:3px;cursor:pointer;text-align:center; background:linear-gradient(180deg,#0f0d0b,var(--cellbg)); box-shadow:inset 0 2px 5px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07); transition:border-color .12s,box-shadow .12s} .slot:hover{border-color:#8a7d68} .slot.filled{border-color:#8a6f3e} .slot.filled:hover{border-color:var(--gold)} .slot.unmet{border-color:#8f4a4a} .slot.tall{grid-row:span 2} /* 护符贴在头盔右下、戒指跟腰带同高：小方格居中，别撑满整格 */ .slot.tiny{width:62px;height:62px;justify-self:center;align-self:center;padding:4px} .slot.amu{align-self:end} /* 护符比头盔矮半格，贴着头盔右下角 */ .slot.short{height:64px;align-self:center} .slotico{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%} .slotico img{max-width:100%;max-height:100%;object-fit:contain} .slotcap{max-width:100%;font-size:11px;line-height:1.25;color:#a79c8b; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .slotcap.empty{color:#6f665a} .slot.tiny .slotcap{font-size:10px;display:block;white-space:nowrap} .slotbad{display:block;max-width:100%;font-size:9.5px;color:#e08b8b; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .slotx{position:absolute;top:2px;right:3px;border:0;background:transparent; color:#a79c8b;font-size:12px;line-height:1;cursor:pointer;padding:2px;opacity:0} .slot:hover .slotx{opacity:1} .slotx:hover{color:#e08b8b} /* 旧的竖排槽位样式已由上面的人偶布局取代 */ .sheet .basestat{padding:2px 0} .partline{font-family:var(--mono);font-size:12px;color:var(--dim); margin:-2px 0 7px;padding-left:2px} /* 旧的两列 .alloc 已由上面的分配器取代 */ .allocrow input{width:100%;min-width:0;background:var(--panel-2);border:1px solid var(--line-2); border-radius:6px;padding:4px 7px;font-family:var(--mono);font-size:14px;outline:0} .rating{padding:14px 16px} .whytext{font-size:14px;line-height:1.85;color:var(--muted)} .whytext p{margin:0 0 10px} .whytext b{color:var(--text-2);font-weight:500} .whytext em{color:var(--dim);font-style:normal} .pickwrap{position:fixed;inset:0;background:rgba(6,5,4,.78);z-index:200; display:flex;align-items:flex-start;justify-content:center;padding:80px 20px} .pickbox{width:min(560px,100%);max-height:70vh;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--line-2);border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.8);overflow:hidden} .pickhead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)} .pickhead input{flex:1;background:var(--panel-2);border:1px solid var(--line-2); border-radius:8px;padding:8px 11px;font-size:15px;outline:0} .picklist{overflow:auto;padding:6px} .pickrow{display:flex;width:100%;align-items:center;gap:10px;padding:7px 10px; background:none;border:0;border-radius:7px;text-align:left;font-size:14px;color:var(--text-2)} .pickrow:hover{background:var(--panel-2)} .pickrow img{width:22px;height:22px;object-fit:contain;flex:none} .pickrow i{width:22px;flex:none} .pickrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pickrow em{font-family:var(--mono);font-size:12px;color:var(--dim);font-style:normal} /* 配装器的技能树铺满整块，跟 /skills 一样——原来右边留了 300px 给一条 技能详情侧栏，说明还不如悬停那份全，白占掉四分之一的宽度。 */ #b-skills{padding:12px} .sk.has{border-color:#54462f;background:#221d17} .sk.has .skn{color:var(--gold-hi)} .sk.locked{opacity:.4} .skpts{font-family:var(--mono);font-size:12px;color:var(--gold)} .skdmg{background:var(--panel-2);border:1px solid var(--line);border-radius:10px; align-self:start;overflow:hidden} .skstep{display:flex;align-items:center;gap:9px} .skstep button{width:26px;height:26px;border-radius:6px;background:var(--panel-3); border:1px solid var(--line-2);color:var(--text-2);font-size:16px;line-height:1} .skstep button:hover{border-color:var(--gold);color:var(--gold)} .skstep b{font-family:var(--mono);font-size:16px;color:var(--gold-txt);min-width:22px;text-align:center} .monlist{display:flex;flex-direction:column;gap:2px;margin-top:6px} .monlist button{display:flex;align-items:center;gap:8px;width:100%;text-align:left; background:none;border:0;border-radius:6px;padding:5px 8px;font-size:14px;color:var(--text-2)} .monlist button:hover{background:var(--panel-3)} .monlist button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .monlist button em{font-family:var(--mono);font-size:12px;color:var(--dim);font-style:normal} .hitsbig{font-family:var(--display);font-size:26px;color:var(--gold-hi); text-align:center;padding:10px 0 4px} .hitsbig em{font-family:var(--body);font-size:14px;color:var(--muted);font-style:normal;margin-left:4px} /* ---------- 机制知识 ---------- */ .mech-page{max-width:900px} .mechhead{padding:16px 0 22px} .mechhead h1{font-family:var(--display);font-size:clamp(22px,3.4vw,32px);margin:0 0 10px; font-weight:700;color:var(--text)} .mechhead p{margin:0;color:var(--muted);font-size:16px;line-height:1.8;max-width:640px} .mechlist{display:flex;flex-direction:column;gap:10px} .mech{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden} .mech-head{display:grid;grid-template-columns:1fr auto;gap:4px 14px;width:100%; text-align:left;background:none;border:0;padding:14px 16px;align-items:baseline} .mech-head:hover{background:var(--panel-2)} .mech-title{font-family:var(--display);font-size:17px;color:var(--gold-txt);grid-column:1} .mech-more{font-family:var(--mono);font-size:12px;color:var(--dim);grid-column:2;grid-row:1} .mech-head.open .mech-more{color:var(--gold)} .mech-short{grid-column:1/-1;font-size:15px;color:var(--text-2);line-height:1.8} .mech-short b{color:var(--gold-hi);font-weight:500} .mech-short code{font-family:var(--mono);font-size:13.5px;color:var(--gold-txt)} .mech-body{padding:0 16px 16px;border-top:1px solid var(--line)} .mech-detail{font-size:15px;line-height:1.9;color:var(--muted);padding-top:12px} .mech-detail p{margin:0 0 11px} .mech-detail b{color:var(--text-2);font-weight:500} .mech-detail ul{margin:0 0 11px;padding-left:18px} .mech-detail li{margin-bottom:4px} .mech-detail code{font-family:var(--mono);font-size:13.5px;color:var(--gold-txt); background:var(--panel-3);border-radius:4px;padding:1px 5px} .mech-detail pre{font-family:var(--mono);font-size:13.5px;color:var(--text-2); background:#100f0c;border:1px solid var(--line);border-radius:8px; padding:10px 12px;overflow-x:auto;line-height:1.7;margin:0 0 11px} .tg.ver{background:#1c2a1c;color:var(--q-set)} /* 机制详解里的表格（mechanics.js 认 markdown 的 | 表格）。窄屏能横滚， 不把整页撑宽。 */ .mech-detail table{display:block;overflow-x:auto;width:100%;margin:12px 0; border-collapse:collapse;font-size:14px} .mech-detail th,.mech-detail td{padding:7px 14px 7px 0;text-align:left; border-bottom:1px solid var(--line);white-space:nowrap} .mech-detail th{font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--dim);font-weight:400;border-bottom-color:var(--line-2)} .mech-detail td{color:var(--text-2)} .mech-detail td:first-child{font-family:var(--mono)} .mech-detail ol{margin:10px 0;padding-left:22px} .mech-detail ol li{margin:4px 0} /* ---------- 精英词条 ---------- */ .tierbar{line-height:1.6;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline; padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px} .tierbar div{display:flex;align-items:baseline;gap:9px} .tierbar span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)} .tierbar b{font-family:var(--mono);font-size:13.5px;font-weight:400;color:var(--text-2)} .tierbar em{font-size:13px;color:var(--dim);font-style:normal;width:100%} .modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1px;background:var(--line)} .modcell{background:var(--panel);padding:11px 13px} .modcell.w-good{box-shadow:inset 3px 0 0 var(--q-set)} .modcell.w-bad{box-shadow:inset 3px 0 0 #7a4a4a} .modcell.w-neutral{box-shadow:inset 3px 0 0 var(--line-3)} .modname{font-size:15px;color:var(--gold-txt);margin-bottom:5px; display:flex;align-items:center;gap:7px} .modeff{font-size:14px;color:var(--muted);line-height:1.65} .modnote{font-size:13px;color:var(--dim);line-height:1.6;margin-top:5px} .modnote b{color:var(--text-2);font-weight:400} .modwar{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:7px} .modwar b{color:var(--gold);font-weight:400} /* ---------- 交易系统 ---------- */ .authtabs{display:flex;border-bottom:1px solid var(--line)} .authtabs a{flex:1;text-align:center;padding:13px;font-size:15px;color:var(--muted)} .authtabs a.on{color:var(--gold-txt);box-shadow:inset 0 -2px 0 var(--gold)} .autherr{background:#2a1616;border:1px solid #4a2626;border-radius:8px; padding:9px 12px;font-size:14px;color:#d09090;margin-bottom:14px} .fld{display:block;margin-bottom:12px} .fld>span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em; color:var(--dim);margin-bottom:5px} .fld input,.fld select,.fld textarea{width:100%;background:var(--panel-2); border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;font-size:16px;outline:0} .fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--line-3)} .fld textarea{min-height:80px;resize:vertical;line-height:1.6} .fld.row{display:flex;align-items:center;gap:8px} .fld>span em.sub{margin-left:6px;font-style:normal;letter-spacing:0;text-transform:none} /* 验证码弹框 */ .modalwrap{position:fixed;inset:0;z-index:90;background:rgba(8,7,6,.72); backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px} .modalbox{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line-2); border-radius:14px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.7)} .modalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .modalhead h3{margin:0;font-family:var(--display);font-size:19px;font-weight:600;color:var(--text)} .codeto{margin:0 0 14px;line-height:1.7;word-break:break-all} /* 六位数字：字距拉开、居中、等宽，跟邮件里那一版看着是同一个东西 */ .codein{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px; padding:14px 10px;font-family:var(--mono);font-size:26px;font-weight:700; letter-spacing:.42em;text-indent:.42em;text-align:center;color:var(--gold-hi);outline:0} .codein:focus{border-color:#54462f;box-shadow:0 0 0 3px rgba(200,164,92,.09)} .codein::placeholder{color:#3a342b;letter-spacing:.42em} .coderow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px} .coderow .sortb:disabled{opacity:.45;cursor:default} .codehint{margin:11px 0 0;text-align:center;line-height:1.7} .autherr{white-space:pre-line} .fld.row>span{margin:0;font-family:var(--body);font-size:14px;letter-spacing:0;color:var(--muted)} .fld.row input{width:auto;accent-color:var(--gold)} .btn-gold{background:var(--gold);border:0;border-radius:8px;color:#14120f; font-size:13.5px;font-weight:500;padding:10px 18px} .btn-gold:hover{background:var(--gold-hi)} .btn-gold:disabled{background:var(--line-3);color:var(--dim)} .repbadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono); font-size:12.5px;color:var(--gold-txt);background:var(--panel-3); border-radius:10px;padding:2px 8px} .tradeseller{display:flex;align-items:center;gap:7px;font-size:14px; color:var(--muted);flex:none;width:180px} .roomform{margin-top:4px} .roomrow{display:flex;gap:8px;flex-wrap:wrap} .roomin{flex:1;min-width:130px;background:var(--panel-2);border:1px solid var(--line-2); border-radius:8px;padding:8px 11px;font-family:var(--mono);font-size:15px;outline:0} .roomin:focus{border-color:var(--line-3)} .roomin.bad{border-color:#7a3a3a;background:#241616} .roomhint{font-size:13px;color:var(--dim);line-height:1.7;margin-top:6px} .roomerr{background:#241616;border:1px solid #4a2626;border-radius:8px;padding:8px 11px; font-size:13px;color:#d09090;line-height:1.7;margin-top:7px} .roomerr div{margin-bottom:2px} .fixbtn{background:var(--panel-3);border:1px solid var(--line-3);border-radius:6px; color:var(--gold);font-size:13px;padding:3px 9px;margin-top:4px} .repnum{font-family:var(--display);font-size:30px;color:var(--gold-hi);line-height:1} .dsec.hl{background:#1f1b15;box-shadow:inset 3px 0 0 var(--gold)} .tstat.s-confirmed{color:var(--q-set)} .tstat.s-pending{color:var(--gold)} .tstat.s-expired,.tstat.s-cancelled{color:#d07f7f} /* 挂单状态（listings.status）跟交易状态（trades.status）共用 .tstat， 但取值是另一套：open / traded / closed / expired。以前只写了交易那四个， 挂单状态的字就沿用正文色，「已成交」和「进行中」看起来一模一样。 */ .tstat.s-open{color:var(--gold)} .tstat.s-traded{color:var(--q-set)} .tstat.s-closed{color:var(--dim)} .roombox{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px; background:#100f0c;border:1px solid var(--line);border-radius:8px;padding:8px 11px} .roombox code{font-family:var(--mono);font-size:15px;color:var(--gold-hi); letter-spacing:.05em;background:var(--panel-3);border-radius:5px;padding:3px 9px} .confirmrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px} .reviewrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px} .reviewrow select,.reviewrow input{background:var(--panel-2);border:1px solid var(--line-2); border-radius:7px;padding:6px 9px;font-size:14px;outline:0} .reviewrow input{flex:1;min-width:140px} .revline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:14px} .revline b.r-good{color:var(--q-set)} .revline b.r-neutral{color:var(--muted)} .revline b.r-bad{color:#d07f7f} /* .fselect：破免符与背包咒符共用的下拉 */ .fselect{background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px; padding:5px 8px;font-size:14px;color:var(--text-2);outline:0} .fselect:focus{border-color:var(--line-3)} /* 配装器：背包咒符 */ .charms{display:flex;flex-direction:column;gap:6px} #b-charmadd{align-self:flex-start;margin-top:2px} /* ---------- 窄屏收边 ---------- */ @media(max-width:760px){ /* 手机上 88px 的右对齐标签太占地方，改成压在芯片上面。 不能靠 order 把标签提前：order 是按整个容器排序的，一行里塞了两组「标签+芯片」时 （/items 品质+分级、/monsters 难度+免疫、/build 等级+难度）两个标签会一起排到最前， 芯片就挂到别人的标题底下——/items 的「普通」在品质和分级里都存在，点错了还看不出来。 模板里本来就是标签在前，各占一整行自然换行，根本不需要 order。 */ .frow{flex-wrap:wrap;row-gap:4px;padding:6px 2px} .fkey{width:auto;flex:1 1 100%;text-align:left} .fchips{flex:1 1 100%} /* 只为宽屏对齐而留的空标签（#grow / #statrow），窄屏会占掉整整一行加一个 row-gap */ .fkey:empty{display:none} .fspacer{display:none} .facets .freset{margin-left:auto} } /* 必须放在文件末尾：同名同权重的 .page / .hero-in 定义在上面，写在那里会被覆盖 */ @media(max-width:900px){.page{padding-left:14px;padding-right:14px} } /* 中文不需要西文那种字距。这几条是等宽大写标签，中文下把字距收掉， 否则每个汉字后面都挂一个空隙，末尾还会多出半个字宽。 */ html[lang="zh"] .panel-h h2, html[lang="zh"] .fkey, html[lang="zh"] .dlabel, html[lang="zh"] .statsug .lbl, html[lang="zh"] .mtbl th, html[lang="zh"] .slotcap, html[lang="zh"] .tierbar span, html[lang="zh"] .fld>span{letter-spacing:.02em} /* 窄屏的怪物行：以前没有任何 @media 规则，375px 下名字框只有 29px */ @media(max-width:760px){.r{flex-wrap:wrap;row-gap:5px} .r-main{flex:1 1 100%;order:1} /* 物品行在名字前面多一个 38px 的 .r-ico（怪物行没有）。100% 的 flex-basis 容不下它， 图标被顶到单独一行，行高从 85.8px 涨到 130.8px。按 38px 图标 + 12px gap 让出基准， 图标就回到名字左边；怪物/符文之语的行没有这个兄弟节点，不受影响。 */ .r-ico + .r-main{flex-basis:calc(100% - 50px)} .r-tags{order:2} .mhp{order:3;width:auto;margin-left:auto} .r-lvl{order:4;width:auto} } /* 获取方式上的限制（不随机掉落 / 不计入编年史）。这块的存在本身就是信息： 有它说明这件东西拿不到或拿法特殊，比在「去哪刷」里给个假的击杀次数强。 */ .acqpanel .dsec{display:flex;flex-direction:column;gap:10px} .acqrow{display:flex;flex-direction:column;gap:3px} .acqrow b{font-weight:500;font-size:13.5px;color:var(--gold-txt)} .acqrow .sub{font-size:12.5px;line-height:1.7} /* 怪物按难度额外带的属性（MonProp.txt）。这些不是精英词条、也不是基础属性， 是写死在这只怪身上的加成，所以单列一块。 */ .bonusrow{display:flex;gap:10px;align-items:baseline;margin:5px 0} .blab{flex:none;width:48px;font-size:12px;color:var(--muted)} .btags{display:flex;flex-wrap:wrap;gap:6px} .btags .tg{font-size:12px;color:var(--text-2);background:var(--panel-3); border:1px solid var(--line-2);border-radius:4px;padding:3px 7px} /* 神殿表（机制页「神殿」那条展开后）。20 种，按增益/回复/功能/陷阱分组。 */ .shrtable{margin-top:14px;display:flex;flex-direction:column;gap:14px} .shrgroup .dlabel{margin-bottom:6px} .shrrow{display:grid;gap:4px 12px;padding:7px 0;border-top:1px solid var(--line); grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;align-items:baseline} @media(max-width:640px){.shrrow{grid-template-columns:1fr} }.shrname{color:var(--gold-txt);font-size:13.5px} .shreff{color:var(--text-2);font-size:13px;line-height:1.65} .shrmeta{display:flex;gap:8px;flex-wrap:wrap} .shrmeta i{font-style:normal;font-size:11.5px;color:var(--muted); background:var(--panel-3);border:1px solid var(--line);border-radius:4px;padding:2px 7px} /* 陷阱那一组用暖红压一下，让人一眼看出「这个别踩」 */ .shrrow.trap .shrname{color:#e08c8c} /* ---------- 全部条目索引 ---------- */ /* 列表页的表格都是 JS 现渲染的，服务端发出去的 HTML 里**一条详情链接都没有**。 搜索引擎虽然会执行 JS，但那是另一条慢得多的队列，对一个刚上线、抓取配额很低 的站等于把上千个详情页全押在 sitemap 上。这一段是服务端直出的纯链接索引。 **默认收起来。** 它存在的理由是「链接在 HTML 里」，那件事跟展不展开无关——
里的内容照样在源码里、照样被抓取和索引。摊开一大片只会把页面压得 很难看（owner 2026-09-07 指出），收起来之后页面上只剩一行，想按名字翻的人 点开就是一份 A–Z 索引，两头都占着。 它是给人看的真区块，不是塞给爬虫的暗链——
是浏览器原生的折叠， 点一下就能看到，跟用 CSS 藏起来不是一回事。 */ .idx{margin-top:16px} .idx>summary{cursor:pointer;list-style:none;user-select:none} .idx>summary::-webkit-details-marker{display:none} /* 自己画的箭头，展开时转 90 度 */ .idx>summary::after{content:"›";float:right;font-size:17px;color:var(--dim); transition:transform .15s;display:inline-block;line-height:1} .idx[open]>summary::after{transform:rotate(90deg)} .idx>summary:hover{background:var(--panel-2)} .idxlist{display:flex;flex-wrap:wrap;gap:2px 0;padding:10px 14px 14px; font-size:13px;line-height:1.95;border-top:1px solid var(--line)} .idxlist a{color:var(--dim);white-space:nowrap} .idxlist a:hover{color:var(--gold)} /* 分隔点用伪元素，不进 DOM 也不会被选中复制 */ .idxlist a:not(:last-child)::after{content:"·";color:var(--line-3);margin:0 7px} @media(max-width:760px){.idxlist{font-size:12.5px;padding:8px 12px 12px}} /* 「添加到主屏幕」引导条。贴底部，避开 iOS 的home 指示条（safe-area）。 */ .pwa-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60; display:flex;align-items:center;gap:10px; padding:11px 12px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px)); background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.45);font-size:13px} .pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pwa-txt b{font-weight:600;color:var(--fg)} .pwa-txt i{font-style:normal;color:var(--dim);font-size:12px} .pwa-txt i:empty{display:none} .pwa-go{flex:none;padding:6px 14px;border-radius:6px;cursor:pointer; background:var(--gold);border:0;color:#1a1408;font-weight:600;font-size:13px} .pwa-x{flex:none;width:28px;height:28px;line-height:1;cursor:pointer; background:transparent;border:0;color:var(--dim);font-size:20px} .pwa-x:hover{color:var(--fg)} @media (min-width:720px){.pwa-bar{left:auto;width:360px;right:16px;bottom:16px}}