/* 10-18 跨页过渡：同站跳转时旧页停在原处直到新页第一帧（不闪白），安娜桌宠（view-transition-name: anna-pet）钉在原位 */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
/* 万缕千丝攻略站 样式。颜色只用 tokens.css 的变量。 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.75 var(--font);}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.3;color:var(--ink);font-weight:700}
.muted{color:var(--muted)}
.small{font-size:12.5px}
small.alt{display:block;color:var(--muted);font-size:11.5px;line-height:1.4;font-weight:400}
.empty{color:var(--muted);padding:24px;border:1px dashed var(--line-strong);border-radius:var(--radius);text-align:center;background:var(--surface)}

/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:1320px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);flex:none}
.brand:hover{text-decoration:none}
/* 旧的编织线小图标 .emblem 与文字站名 .brand-t 已撤（10-16），站标样式见文末「站标」段 */
.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-grp{display:flex;gap:2px;padding:0 6px;border-left:1px solid var(--line)}
.nav-grp:first-child{border-left:0;padding-left:0}
.nav a{color:var(--ink-2);padding:6px 9px;border-radius:var(--radius);font-size:14.5px;white-space:nowrap}
.nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav a[aria-current]{color:var(--accent);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.nav a.nav-sim{color:var(--accent);font-weight:700}
.search{position:relative;flex:none;width:250px}
.search input,.hero-search input{width:100%;height:34px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg);color:var(--ink);padding:0 10px;font:inherit;font-size:13.5px}
.search input:focus,.hero-search input:focus,.fsearch:focus{outline:2px solid color-mix(in srgb,var(--accent-2) 45%,transparent);outline-offset:0;border-color:var(--accent-2)}
.qres{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);max-height:420px;overflow:auto;z-index:60}
.qres a{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;color:var(--ink);border-bottom:1px solid var(--line)}
.qres a:last-child{border-bottom:0}
.qres a:hover,.qres a.on{background:var(--surface-2);text-decoration:none}
.qres a span{color:var(--muted);font-size:12px;flex:none}
.theme-btn{flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;font-size:15px}

/* ---------- 主体 ---------- */
main.main{max-width:1320px;margin:0 auto;padding:18px 20px 60px;min-height:70vh}
.crumbs{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted)}
.crumbs i{font-style:normal;margin:0 6px;opacity:.6}
.sec-h{margin:6px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sec-h h1{font-size:30px;margin:0 0 6px}
.lead{font-size:16px;color:var(--ink-2);margin:4px 0 0;max-width:62em}
.h-sm{font-family:var(--font);font-size:13px;letter-spacing:.12em;color:var(--muted);font-weight:600;margin:0 0 10px;text-transform:uppercase}
.meta{font-size:12.5px;color:var(--muted);margin-top:8px}
.st-tag{display:inline-block;padding:0 7px;border:1px solid var(--warn);color:var(--warn);border-radius:10px;font-size:11.5px;line-height:18px}
.spb{display:inline-block;vertical-align:middle;margin-left:8px;font:600 11px/18px var(--font);padding:0 7px;border-radius:10px;letter-spacing:.02em}
.spb-l{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.spb-h{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.btn{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--surface);font-size:14px;cursor:pointer}
.btn:hover{text-decoration:none;border-color:var(--ink-2)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-accent:hover{filter:brightness(1.06);border-color:var(--accent)}

/* ---------- 首页：样式在文件末尾 home:start…home:end 段（10-16 首页重做）；.kicker 故事页在用，.weave/.w-* 保留 ---------- */
.kicker{font-size:12.5px;letter-spacing:.14em;color:var(--muted);margin:0 0 6px}
.weave{width:100%;height:100%;display:block}
.weave .warp{stroke:var(--line-strong);stroke-width:2;opacity:.55}
.weave .weft{fill:none;stroke-width:10;stroke-linecap:round}
.weave .warp-over{fill:var(--line-strong)}
.w-cai{stroke:var(--r-cai)}.w-dietrich{stroke:var(--r-dietrich)}.w-theodora{stroke:var(--r-theodora)}.w-leda{stroke:var(--r-leda)}
.fc1{stroke:var(--accent)}.fc2{stroke:var(--accent-2)}.fc3{stroke:var(--gold)}
.r-cai{--rc:var(--r-cai)}.r-dietrich{--rc:var(--r-dietrich)}.r-theodora{--rc:var(--r-theodora)}.r-leda{--rc:var(--r-leda)}.r-none{--rc:var(--muted)}
.rsec{display:inline-block;min-width:44px;margin-right:8px;font-size:12px;color:var(--muted)}

/* ---------- 人物 ---------- */
.mono{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;background:color-mix(in srgb,var(--rc) 16%,var(--surface));color:var(--rc);font-family:var(--font-head);font-weight:700;font-size:19px;flex:none;border:2px solid color-mix(in srgb,var(--rc) 55%,transparent);overflow:hidden}
.mono img{width:100%;height:100%;object-fit:cover}
.mono-s{width:32px;height:32px;font-size:13px;border-width:1.5px;border-radius:6px}
.mono-m{width:46px;height:46px;font-size:18px}
.mono-xl{width:112px;height:112px;font-size:46px;border-width:3px}
.filters{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flabel{font-size:12.5px;color:var(--muted);width:48px;flex:none}
.fchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}
.fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fsearch{height:34px;border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 10px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink);max-width:340px;width:100%}
.tfilter{margin:4px 0 10px}
.catf{margin:6px 0}
.jump{display:flex;gap:14px;margin:4px 0 10px;font-size:14px}
.db-intro{margin:18px 0}
.db-intro .fig img{max-height:320px;object-fit:cover}
.rdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rc);border:2px solid var(--rc)}
.rdot.ring{background:transparent}
.rchip.rc-ring{background:transparent;color:var(--rc);box-shadow:inset 0 0 0 1.5px var(--rc)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.ccard{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.ccard:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--shadow)}
.ccard-b{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ccard-n{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px}
.ccard-e{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard-r{display:flex;gap:4px;align-items:center;margin-top:3px}
.dlc{font-style:normal;font-size:10.5px;color:var(--gold);border:1px solid var(--gold);border-radius:3px;padding:0 4px;line-height:15px}
.tier{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 5px;border-radius:3px;color:#fff;font:700 12px/1 var(--font)}
.tier-t0{background:var(--tier-t0)}.tier-x{background:var(--muted)}
.tier-s{background:var(--tier-s)}.tier-a{background:var(--tier-a)}.tier-b{background:var(--tier-b)}.tier-c{background:var(--tier-c)}.tier-d{background:var(--tier-d)}
.ent-h{display:flex;gap:22px;align-items:flex-start;padding:10px 0 18px;margin-bottom:6px}
.ent-hb{flex:1;min-width:0}
.ent-art{flex:none;display:block;width:320px;height:420px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);cursor:zoom-in;
  background:radial-gradient(120% 80% at 50% 30%,var(--surface) 0%,var(--surface-2) 100%)}
.ent-art img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:transform .25s}
.ent-art:hover img{transform:scale(1.02)}
.ent-art.wide{width:330px;height:200px}
.ent-art.wide img{object-position:50% 20%}
.cicon{width:22px;height:22px;vertical-align:-5px;margin-right:4px;object-fit:contain}
.cls-a{display:inline-flex;align-items:center;gap:2px}
.ent-names .cicon{width:44px;height:44px;margin-right:2px}
.ent-names{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ent-names h1{font-size:34px;margin:0}
.ent-names .tier{height:26px;min-width:30px;font-size:15px}
.ent-alt{color:var(--muted);font-size:14px}
.tier-tag{font-size:12.5px;padding:2px 9px;border-radius:12px;background:var(--surface-2);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;font-size:12.5px;background:var(--surface-2);color:var(--ink-2)}
.c-dlc{color:var(--gold)}.c-pro{background:var(--ink);color:var(--bg)}
.rchip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:12.5px;color:#fff;background:var(--rc,var(--muted))}
/* 线别标签：主角小头像 + 线名 */
.lt{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 3px;border-radius:6px;font-size:12.5px;line-height:1;color:var(--ink-2);white-space:nowrap;
  background:color-mix(in srgb,var(--rc,var(--muted)) 13%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,var(--muted)) 35%,transparent)}
.lt img{width:22px;height:22px;border-radius:4px;object-fit:cover;object-position:50% 20%;flex:none;background:var(--surface-2)}
.lt b{font-weight:700;color:color-mix(in srgb,var(--rc,var(--ink)) 70%,var(--ink))}
.lt.r-none{padding-left:10px}
.lt-ring{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 55%,transparent)}
.lt-s{height:24px;padding:0 8px 0 2px;gap:5px;font-size:12px}
.lt-s img{width:20px;height:20px}
.lt-icon{padding:2px;gap:0;height:auto}
.lt-icon img{width:20px;height:20px}
.quick{display:flex;flex-wrap:wrap;gap:0;margin:12px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.quick .q{display:flex;flex-direction:column;padding:8px 14px;border-right:1px solid var(--line);min-width:110px}
.quick .q:last-child{border-right:0}
.quick .q span{font-size:11.5px;color:var(--muted)}
.quick .q b{font-size:14px;font-weight:600}
.quick .q-wide{flex:1;min-width:240px}
.ent-act{display:flex;gap:8px;flex-wrap:wrap}
.gspark{flex:none;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.gspark:hover{text-decoration:none;border-color:var(--line-strong)}
.gs-h{font-size:12px;color:var(--muted)}
.gs-row{display:flex;gap:7px;align-items:flex-end;height:112px}
.gs{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:24px;height:100%;position:relative}
.gs i{display:block;width:12px;border-radius:3px 3px 0 0;min-height:3px}
.gs b{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;order:-1;margin-bottom:2px}
.gs em{font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-strong);margin:8px 0 18px;overflow-x:auto}
.tab{background:none;border:0;padding:10px 16px;font:inherit;font-size:15px;color:var(--ink-2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.pane{display:none}
.pane.on{display:block}
.no-js .pane{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.two h2{font-size:17px;margin:4px 0 10px}
.two section>h2:not(:first-child){margin-top:22px}
.statbars{display:flex;flex-direction:column;gap:5px;max-width:520px}
.sb-row{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:10px;font-size:13.5px}
.sb-k{color:var(--ink-2)}
.sb-track{height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.sb-fill{display:block;height:100%;border-radius:6px}
.sb-fill.neg{opacity:.45}
.sb-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.st-hp{background:var(--st-hp)}.st-str{background:var(--st-str)}.st-mag{background:var(--st-mag)}.st-dex{background:var(--st-dex)}.st-spd{background:var(--st-spd)}.st-lck{background:var(--st-lck)}.st-def{background:var(--st-def)}.st-res{background:var(--st-res)}.st-cha{background:var(--st-cha)}
.gm{display:inline-block;font-size:12px;padding:0 6px;border-radius:3px;color:#fff;margin-right:3px;line-height:19px}
/* 职业成长加成九格（10-16）：固定游戏内顺序，深浅＝加多少 */
.gmg{display:grid;grid-template-columns:repeat(9,32px);gap:2px}
.gmg-th{min-width:310px}
.gmg-h{margin-top:3px;font:400 11px var(--font);color:var(--muted)}
.gmg-h span{text-align:center}
.gmg-c[class*="gm-"]{box-shadow:none}
.gmg-c{display:inline-block;height:22px;line-height:22px;text-align:center;font-size:11.5px;font-variant-numeric:tabular-nums;border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.gmg-legend{font-size:13px;color:var(--ink-2);margin:6px 0 0}
.gmg-legend .gmg-c{width:32px;margin:0 2px;vertical-align:1px}
.gm-l1{background:color-mix(in srgb,var(--c,var(--heat)) 24%,var(--surface));color:var(--ink)}
.gm-l2{background:color-mix(in srgb,var(--c,var(--heat)) 44%,var(--surface));color:var(--ink)}
.gm-l3{background:color-mix(in srgb,var(--c,var(--heat)) 66%,var(--surface));color:var(--ink);font-weight:600}
.gm-l4{background:color-mix(in srgb,var(--c,var(--heat)) 86%,#000 0%);color:#fff;font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.gm-l5{background:var(--c,var(--heat));color:#fff;font-weight:800;text-shadow:0 1px 1px rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.gm-n1{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 14%,var(--surface)) 0 4px,var(--surface) 4px 7px);color:var(--bad);font-weight:600}
.gm-n2,.gm-n3{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 30%,var(--surface)) 0 4px,color-mix(in srgb,var(--bad) 10%,var(--surface)) 4px 7px);color:var(--bad);font-weight:800}
.kv{display:flex;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv .k{flex:none;width:72px;color:var(--muted)}
.route-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:22px}
.route-card{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.route-card.main{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.rc-h{font-weight:700;margin-bottom:6px}
.rc-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:14px}
.rc-chain small{color:var(--muted);margin-left:2px}
.arr{color:var(--muted)}
.route-card p{font-size:13.5px;color:var(--ink-2);margin:8px 0 0}
.rc-build{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px}
.rc-build .rb{display:flex;gap:8px;padding:2px 0}
.rc-build .rk{flex:none;width:44px;color:var(--muted)}
.rlist{display:flex;flex-direction:column;gap:10px}
.rrow{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.rbody div{font-size:14px;padding:2px 0}
.rk{display:inline-block;width:52px;color:var(--muted);font-size:12.5px}
.whos{display:flex;flex-wrap:wrap;gap:6px}
.who{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:13.5px}
.who:hover{text-decoration:none;border-color:var(--line-strong)}
.vmention{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.vmention h2{font-size:18px}
.vmention ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.vmention li{padding:10px 14px;background:var(--surface);border-left:3px solid var(--accent-2);border-radius:var(--radius)}
.vmention q{display:block;color:var(--ink-2);font-size:14px;margin-top:4px}
.ts{font-family:var(--mono);font-size:12px;color:var(--muted)}

.recruit-all{margin:8px 0 26px}
.rc-people{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.rc-person{scroll-margin-top:70px}
.rc-person>.who{margin-bottom:6px}
.rc-person:target .rrow{border-color:var(--accent)}

/* ---------- 数据库分类（10-16） ---------- */
.dbcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:20px}
.dbcard{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.dbcard:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--shadow)}
.dbcard .iicon{grid-row:1/3;width:44px;height:44px;margin:0}
.dbcard-t{font-weight:700;font-size:16px}.dbcard-s{font-size:12.5px;color:var(--muted)}
.dbtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.dbtab{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer}
.dbtab .iicon{width:24px;height:24px;margin:0;vertical-align:0}
.dbtab small{color:var(--muted);font-size:11.5px}
.dbtab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dbtab.on small{color:var(--bg);opacity:.7}
.dbq{margin:2px 0 10px;max-width:420px}
.dbpane-h{font-size:18px;margin:6px 0 4px}
.dbpane-h small{font:400 13px var(--font);color:var(--muted)}
/* 名字格本身保持表格单元格（display:flex 会让它脱离表格，行高和分隔线对不上；10-16 Teemo：「名称列和其他列的排版不一致」），排版放进里层 */
.db-nm{min-width:150px}
.db-nmw{display:flex;align-items:center;gap:8px}
.db-nmw > span{display:flex;flex-direction:column}

/* ---------- 招募对照表（10-16） ---------- */
.rc-picks{display:flex;flex-wrap:wrap;gap:8px 4px;margin:0 0 14px}
.rc-pick{cursor:pointer}
.rc-pick .tt{pointer-events:none}
.rc-pick.dim{opacity:.25}
.rc-filt{margin-bottom:10px}
.rc-wrap{max-height:none}
.rc-tbl{table-layout:fixed;min-width:980px}
.rc-tbl th:first-child{width:150px}
.rc-tbl thead th{position:sticky;top:56px;z-index:2}
.rc-who{background:var(--surface);vertical-align:middle}
.rc-who .tt-s{vertical-align:middle;margin-right:6px}
.rc-who .tt-s .tt-face{width:44px;height:44px}
.rc-nm{font-weight:700;color:var(--ink);font-size:14px}
.rc-c{font-size:12.5px;vertical-align:top}
.rc-c summary{cursor:pointer;list-style:none}
.rc-c summary::-webkit-details-marker{display:none}
.rc-m{display:inline-block;font-weight:700;font-size:12px;border-radius:3px;padding:0 6px;margin-right:4px;line-height:19px}
.m-scout .rc-m,.rc-m.m-scout{background:color-mix(in srgb,var(--accent-2) 18%,var(--surface));color:var(--accent-2)}
.m-auto .rc-m,.rc-m.m-auto{background:color-mix(in srgb,var(--good) 18%,var(--surface));color:var(--good)}
.m-special .rc-m,.rc-m.m-special{background:color-mix(in srgb,var(--gold) 22%,var(--surface));color:var(--warn)}
.m-na{color:var(--muted);background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.rc-when{display:inline-block;color:var(--ink-2);margin-right:4px}
.rc-keys{display:block;color:var(--ink);margin-top:2px}
.rc-unclear{display:inline-block;font-size:11px;color:#fff;background:var(--warn);border-radius:3px;padding:0 5px;margin-right:4px;line-height:17px}
.rc-d{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);color:var(--ink-2)}
.rc-d p{margin:4px 0}.rc-d ul{margin:4px 0;padding-left:1.2em}
.rc-miss{color:var(--bad)}.rc-todo{color:var(--warn)}
tr.rc-hit th,tr.rc-hit td{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}

/* ---------- 梯度（10-16 改：方形大头像、综合排名、来源分组） ---------- */
.tier-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.seg{height:36px;padding:0 16px;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer}
.seg.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.seg-sel{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.seg-sel select{height:36px;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;padding:0 12px;max-width:420px}
.seg-sel select.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tt{display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:84px;color:var(--ink);text-decoration:none}
.tt:hover{text-decoration:none}
.tt-face{display:block;width:76px;height:76px;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.tt-face img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transition:transform .15s}
.tt:hover .tt-face{border-color:var(--accent)}
.tt:hover .tt-face img{transform:scale(1.06)}
.tt-ini{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 28px var(--font-head);color:var(--muted)}
.tt-n{font-size:12.5px;line-height:1.3;text-align:center;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-s{width:auto;flex-direction:row}
.tt-s .tt-face{width:52px;height:52px}
.tt-s .tt-n{display:none}
.tiers .tpeople{gap:10px 6px;padding:10px 12px}
.tiers .trow{grid-template-columns:72px 1fr}
.rank-tbl td{vertical-align:middle}
.rk-n{font:700 18px var(--font-head);color:var(--muted);text-align:center;width:46px}
.rk-who{width:64px}
.rk-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.rk-name a{color:var(--ink)}
.rk-why{font-size:12.5px;color:var(--ink-2);max-width:40em}
.rk-bar{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--surface-2);vertical-align:middle;margin-right:6px;overflow:hidden}
.rk-bar i{display:block;height:100%;background:var(--accent)}
.rk-src summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rk-src summary::-webkit-details-marker{display:none}
.rk-src summary small{color:var(--muted);margin-left:4px}
.rk-src ul{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;columns:2;column-gap:16px}
.rk-src li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);break-inside:avoid}
.dchip{display:inline-block;color:#fff;border-radius:3px;padding:0 5px;font:600 11.5px/18px var(--font)}
.tiers{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:24px}
.trow{display:grid;grid-template-columns:64px 1fr;border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.tlabel{display:flex;align-items:center;justify-content:center;color:#fff;font:700 28px/1 var(--font-head)}
.tpeople{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.tier-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.tier-note{font-size:13px;color:var(--muted);margin:0 0 10px;min-height:1em}
.tlabel.tier-t0{font-size:24px}
.tier-why{margin-top:10px}
.tier-why h2{font-size:20px}
.ol-grp{display:grid;grid-template-columns:52px 1fr;gap:12px;margin-bottom:12px}
.ol-grp .tlabel{border-radius:var(--radius);font-size:20px;align-self:start;height:44px}
.ol-grp ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:6px 18px}
.ol-grp li{display:flex;align-items:flex-start;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.ol-grp li .who{flex:none}
.ol-txt{color:var(--ink-2);padding-top:3px}

/* ---------- 职业 ---------- */
.cls-grp{margin-bottom:22px}
.cls-grp h2{font-size:19px;margin:0 0 8px}
.cls-grp table{table-layout:fixed;min-width:680px}
.cls-grp th:nth-child(1){width:16%}.cls-grp th:nth-child(2){width:32%}.cls-grp th:nth-child(3){width:7%}.cls-grp th:nth-child(4){width:27%}
.cls-grp h2 small{font-family:var(--font);font-size:13px;color:var(--muted);font-weight:400}

/* ---------- 栏目与文章 ---------- */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:22px}
.acard{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.acard:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--shadow)}
.acard-t{font-weight:700;font-size:15px}
.acard-s{font-size:13px;color:var(--ink-2);line-height:1.55}
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.sec-side{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:thin;padding-right:4px}
.sec-side .agrid{grid-template-columns:1fr;gap:6px}
.sec-side .acard{padding:9px 12px}
.sec-side .acard-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art{display:block}
.art.has-toc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start}
.art-h{grid-column:1/-1;margin-bottom:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.art-h h1{font-size:30px;margin:0 0 6px}
.toc{position:sticky;top:76px;font-size:13px;max-height:calc(100vh - 100px);overflow:auto}
.toc-h{font-size:12px;letter-spacing:.12em;color:var(--muted);margin-bottom:6px}
.toc ol{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.toc li a{display:block;padding:3px 0 3px 12px;color:var(--ink-2);margin-left:-2px;border-left:2px solid transparent}
.toc li.lv3 a{padding-left:24px;font-size:12.5px}
.toc li a.on{color:var(--accent);border-left-color:var(--accent)}
.pn{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.pn a{display:flex;flex-direction:column;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.pn a small{color:var(--muted)}
.pn-next{text-align:right}

/* 正文 */
.prose{max-width:780px;font-size:15.5px}
.prose h2{font-size:22px;margin:34px 0 10px;padding-top:6px}
.prose h3{font-size:18px;margin:26px 0 8px}
.prose h4{font-size:16px;margin:20px 0 6px}
.prose h2:first-child,.prose h3:first-child{margin-top:4px}
.prose p{margin:10px 0}
.prose ul,.prose ol{padding-left:1.4em;margin:8px 0}
.prose li{margin:3px 0}
.prose strong{color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:3px}
.prose pre{background:var(--surface-2);padding:12px 14px;border-radius:var(--radius);overflow:auto}
.prose blockquote{margin:14px 0;padding:4px 16px;border-left:3px solid var(--gold);color:var(--ink-2);background:color-mix(in srgb,var(--gold) 7%,transparent)}
.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.prose figure{margin:16px 0}
.fig{margin:18px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{padding:7px 12px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line)}
.fig-icon{display:inline-block;border:0;background:none;margin:4px}
.fig-icon img{width:auto;max-width:96px}
.fig-icon figcaption{border:0;padding:2px 0;text-align:center}
.prose .fig + .fig{margin-top:-6px}
.img-todo{margin:14px 0;padding:18px;border:2px dashed var(--warn);border-radius:var(--radius);color:var(--warn);font-size:13px;text-align:center}
.prose figcaption{font-size:12.5px;color:var(--muted)}
.anchor{opacity:0;margin-left:8px;font-size:.7em;color:var(--muted)}
h2:hover .anchor,h3:hover .anchor{opacity:1}
.src-line{font-size:12.5px;color:var(--muted)}
.lk-dead{border-bottom:1px dotted var(--muted)}
.lk-char{font-weight:600}
.tbl-wrap{overflow-x:auto;margin:12px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;font-size:14px}
.tbl th,.tbl td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:var(--surface-2);font-weight:600;font-size:13px;white-space:nowrap;position:sticky;top:0}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 50%,transparent)}
.tbl-stats td,.tbl-stats th{text-align:center;font-variant-numeric:tabular-nums}
.tbl-stats tbody th{text-align:left;color:var(--muted);font-weight:500}
.tbl-db td{font-size:13.5px}
.iicon{width:28px;height:28px;object-fit:contain;vertical-align:-8px;margin-right:6px}
.box{margin:16px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.box-title,.box summary{padding:8px 14px;font-weight:700;font-size:14px}
.box-body{padding:2px 14px 6px}
.box-body>:first-child{margin-top:6px}
.box-tip{border-left:4px solid var(--good)}.box-tip .box-title{color:var(--good)}
.box-warn{border-left:4px solid var(--warn)}.box-warn .box-title{color:var(--warn)}
.box-key{border-left:4px solid var(--accent)}.box-key .box-title{color:var(--accent)}
details.box summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details.box summary::-webkit-details-marker{display:none}
details.box summary::before{content:"▸";color:var(--muted);transition:transform .15s}
details.box[open] summary::before{transform:rotate(90deg)}
.box-spoiler{border-left:4px solid var(--bad)}
.sp-badge{font-size:11px;color:#fff;background:var(--bad);border-radius:3px;padding:0 5px;line-height:17px}

/* 视频（10-16 ui1：按主题分组的中文列表，封面在左） */
.vlist{margin:4px 0 30px}
.vt-bar{position:sticky;top:56px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.vt-chips{display:flex;flex-wrap:wrap;gap:6px}
.vt-chip{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.vt-chip:hover{border-color:var(--ink-2)}
.vt-chip small{color:var(--muted);font-size:11.5px}
.vt-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.vt-chip.on small{color:var(--bg);opacity:.7}
.vt-only{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.vt-only input{width:16px;height:16px;accent-color:var(--accent)}
.vg{padding:24px 0 8px}
.vg + .vg{border-top:1px solid var(--line)}
.vg-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-bottom:4px}
.vg-h h2{font-size:22px;margin:0}
.vg-n{font-size:13px;color:var(--muted)}
.vg-h p{flex-basis:100%;margin:0;color:var(--ink-2);font-size:14px}
.vr{display:grid;grid-template-columns:208px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px dashed var(--line)}
.vr:last-child{border-bottom:0}
.vr-cover{position:relative;display:block;align-self:start;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--surface-2)}
.vr-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.vr:hover .vr-cover img{transform:scale(1.04)}
.vr-ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px}
.vr-plat{position:absolute;left:6px;top:6px;font-size:11px;line-height:18px;padding:0 6px;border-radius:3px;color:var(--on-overlay);background:var(--overlay)}
.vr-dur{position:absolute;right:6px;bottom:6px;font:600 11.5px/18px var(--mono);padding:0 6px;border-radius:3px;color:var(--on-overlay);background:var(--overlay)}
.vr-b{min-width:0}
.vr-t{font:700 17px/1.45 var(--font);margin:0 0 4px}
.vr-t a{color:var(--ink)}
.vr-t a:hover{color:var(--accent);text-decoration:none}
.vr-ch{white-space:nowrap}
.vr-ch .lk-av,.gp-b .vr-ch .lk-av{width:1.25em;height:1.25em;vertical-align:-.28em;margin:0 3px 0 1px}
.vr-s{margin:0 0 8px;color:var(--ink-2);font-size:14px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vr-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.vr-m b{color:var(--ink-2);font-weight:600}
.vr-a{margin-left:auto;display:inline-flex;gap:16px;font-size:13.5px}
.vr-txt{font-weight:700;color:var(--accent)}
.vr-src{color:var(--muted)}
.vg-more{display:inline-block;margin:8px 0 0;border:0;background:none;color:var(--accent-2);font:inherit;font-size:14px;cursor:pointer;padding:6px 0}
.vlist[data-topic="all"] .vr.more{display:none}
.vlist:not([data-topic="all"]) .vg-more{display:none}
.vlist.only .vr[data-text="0"]{display:none}
@media (max-width:860px){
  .vt-bar{position:static;padding:8px 0}
  .vt-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .vt-chips::-webkit-scrollbar{display:none}
}
@media (max-width:600px){
  .vg-h h2{font-size:19px}
  .vr{grid-template-columns:128px minmax(0,1fr);gap:12px;padding:12px 0}
  .vr-t{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .vr-s{font-size:13px;margin-bottom:6px}
  .vr-m{gap:2px 10px;font-size:12px}
  .vr-a{margin-left:0;width:100%;gap:18px;padding-top:2px}
  .vr-txt,.vr-src{display:inline-block;padding:4px 0}
}

/* 站长页 */
.owner-tag{font:600 12px/22px var(--font);color:#fff;background:var(--accent-2);border-radius:11px;padding:0 10px;vertical-align:middle}
.ostats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.ostat{padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.ostat h3{font-size:14px;margin:0 0 4px}

/* 页脚 */
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{max-width:1320px;margin:0 auto;padding:22px 20px;display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap}

/* ---------- 窄屏 ---------- */
@media (max-width:1100px){
  .search{width:180px}
  .sec-grid{grid-template-columns:1fr}
  .sec-side{position:static;max-height:none;overflow:visible;padding-right:0;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
  .sec-side .agrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:860px){
  .top-in{height:auto;flex-wrap:wrap;padding:8px 16px;gap:8px 12px}
  .nav{order:3;flex-basis:100%;margin:0 -16px;padding:0 16px 2px}
  .search{flex:1;width:auto}
  main.main{padding:14px 16px 48px}
  .two{grid-template-columns:1fr}
  .art.has-toc{grid-template-columns:1fr}
  .toc{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;background:var(--surface)}
  .ent-h{gap:14px}
  .mono-xl{width:72px;height:72px;font-size:30px}
  .ent-art{width:100%;height:320px}
  .ent-art.wide{width:100%;height:170px}
  .ent-h{flex-wrap:wrap}
  .gspark{order:3;flex-basis:100%}
  .gs-row{justify-content:space-between;height:90px}
  .ent-names h1{font-size:26px}
  .quick .q{border-right:0;border-bottom:1px solid var(--line);flex:1 1 45%}
  .rrow{grid-template-columns:1fr}
  .ostats{grid-template-columns:1fr}
  .tt{width:64px}.tt-face{width:58px;height:58px}.tt-n{max-width:64px;font-size:11.5px}
  .tiers .trow{grid-template-columns:44px 1fr}
  .rk-src ul{columns:1}
  .rank-tbl .rk-why{display:none}
  .ol-grp ul{grid-template-columns:1fr}
  .ol-grp{grid-template-columns:40px 1fr}
  .sec-h h1,.art-h h1{font-size:25px}
}
@media (max-width:480px){
  .cgrid{grid-template-columns:1fr 1fr}
  .ccard{padding:8px;gap:8px}
  .ccard .mono{width:34px;height:34px;font-size:15px}
}

/* 自绘信息图 */
.fig-diagram{padding:10px 8px 0}
.dg{width:100%;height:auto;display:block}
.dg-th{fill:none;stroke-width:5;stroke-linecap:round}
.dg-dot{fill:var(--surface);stroke:var(--ink);stroke-width:3;r:9px}
.dg-lab{font:600 14px var(--font);fill:var(--ink)}
.dg-mk{font:13px var(--font);fill:var(--ink-2)}
.dg-h{font:700 16px var(--font-head);fill:var(--ink)}
.dg-box{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5}
.dg-box.st-spd{fill:color-mix(in srgb,var(--st-spd) 22%,var(--surface))}
.dg-neg{fill:color-mix(in srgb,var(--bad) 12%,var(--surface))}.dg-pos{fill:color-mix(in srgb,var(--good) 14%,var(--surface))}
.dg-res{fill:color-mix(in srgb,var(--accent) 18%,var(--surface));stroke:var(--accent)}
.dg-big{font:700 26px var(--font);fill:var(--ink)}.dg-op{font:700 22px var(--font);fill:var(--muted)}
.dg-cell{fill:color-mix(in srgb,var(--st-spd) 35%,var(--surface))}.dg-cell-on{fill:var(--accent)}
.dg-good{fill:var(--good)}.dg-bad{fill:var(--bad)}.dg-warn{fill:var(--warn)}
.dg-pill{stroke-width:1.5}.dg-me{fill:color-mix(in srgb,var(--accent-2) 20%,var(--surface));stroke:var(--accent-2)}
.dg-en{fill:color-mix(in srgb,var(--bad) 16%,var(--surface));stroke:var(--bad)}.dg-nn{fill:var(--surface-2);stroke:var(--line)}
.dg-pilltxt{font:600 15px var(--font);fill:var(--ink);text-anchor:middle}
.dg-arrow{stroke:var(--muted);stroke-width:2;fill:none;marker-end:none}
.dg-track{fill:var(--surface-2);stroke:var(--line-strong)}.dg-fill{fill:var(--gold)}
.dg-cell2{stroke:var(--line-strong);stroke-width:1}.dg-g0{fill:color-mix(in srgb,var(--gold) 18%,var(--surface))}
.dg-g1{fill:color-mix(in srgb,var(--accent) 35%,var(--surface))}.dg-g2{fill:color-mix(in srgb,var(--accent) 75%,var(--surface))}

/* 年表 */
.tl{list-style:none;margin:14px 0;padding:0;border-left:3px solid var(--line-strong)}
.tl-i{position:relative;display:grid;grid-template-columns:190px 1fr;gap:16px;padding:10px 0 10px 18px}
.tl-i::before{content:"";position:absolute;left:-8px;top:16px;width:13px;height:13px;border-radius:50%;background:var(--surface);border:3px solid var(--gold)}
.tl-r-fodlan::before{border-color:var(--accent-2)}.tl-r-dagda::before{border-color:var(--accent)}
.tl-y{font-weight:700;font-size:14px;line-height:1.5}
.tl-y small{display:block;font-weight:400;color:var(--muted)}
.tl-reg{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:0 8px}
.tl-t{font-weight:700}
.tl-b p{margin:4px 0;font-size:14px;color:var(--ink-2)}
.tl-who{font-size:13px;color:var(--muted)}
.tl-sp summary{cursor:pointer;color:var(--bad);font-size:13px}
.tl-light summary{color:var(--warn)}
@media (max-width:860px){.tl-i{grid-template-columns:1fr;gap:4px}}

/* 可学技能与强力技能标注（10-16） */
.sk{display:inline-flex;align-items:center;gap:3px;margin:2px 3px 2px 0;padding:1px 7px 1px 2px;border-radius:12px;font-size:12.5px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.skk{font-style:normal;font-size:10.5px;width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--line);color:var(--ink-2)}
.sk-s{background:color-mix(in srgb,var(--accent) 22%,var(--surface));color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--accent)}
.sk-a{background:color-mix(in srgb,var(--gold) 20%,var(--surface));color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.sk-b{background:color-mix(in srgb,var(--accent-2) 14%,var(--surface));color:var(--ink)}
.skb{font:700 10.5px/15px var(--font);color:#fff;border-radius:3px;padding:0 4px;margin-left:3px}
.skb-s{background:var(--accent)}.skb-a{background:var(--warn)}.skb-b{background:var(--accent-2)}
.sk-tbl td{min-width:90px}
.pf-h{white-space:nowrap}
.pf{display:block;font:500 11px var(--font);margin-top:2px}
.pf-s{color:var(--good)}.pf-w{color:var(--muted)}
.sk-top{margin:0 0 14px;padding:12px 16px;border:1px solid var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.sk-top h3{margin:0 0 6px;font-size:16px}
.sk-top ul{list-style:none;margin:0;padding:0}
.sk-top li{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.sk-legend{font-size:12.5px;color:var(--muted)}

/* 正文人名带头像（10-16） */
.lk-char{white-space:nowrap}
.lk-av{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 15%;vertical-align:-6px;margin:0 3px 0 1px;border:1px solid var(--line)}
h1 .lk-av,h2 .lk-av,h3 .lk-av{width:1.1em;height:1.1em;vertical-align:-.2em}

/* 招式详情：沿用 tt 方形头像，补可见姓名。 */
.skd-people{display:flex;flex-wrap:wrap;gap:12px 18px;margin:12px 0}
.skd-person{display:inline-flex;align-items:center;gap:7px;font-size:13px}

/* 物品详情：gpt-6.1-sol · 工人 gpt-itempage1 */
.itd-icon{flex:none;object-fit:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.itd-section{margin:24px 0;overflow-wrap:anywhere}
.itd-section .kv>span:last-child{min-width:0}
.itd-people,.itd-links{display:flex;flex-wrap:wrap;gap:12px}
.itd-person{display:flex;align-items:center;gap:8px;max-width:100%}
.itd-person .tt-s{flex:none}

/* 10-16 Teemo：中文页面不显示日文/英文别名（以后做语言切换再出现；搜索关键词里仍保留） */
body:not(.owner) .alt, body:not(.owner) .ent-alt{display:none !important}

/* 正文物品链接：与招式共用首现钩子。 */
.itd-inline{white-space:nowrap}
.itd-inline-icon{width:18px;height:18px;object-fit:contain;vertical-align:-3px;margin:0 3px 0 1px}

/* 故事首页（10-16 ui1：按阅读顺序的长页，左边一根线串起各节） */
.st-hero{position:relative;margin:0 0 6px}
.st-hero-img{display:block;width:100%;height:420px;object-fit:cover;object-position:50% 26%;border-radius:var(--radius);
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 98%);mask-image:linear-gradient(to bottom,#000 50%,transparent 98%)}
.st-hero-t{position:relative;margin-top:-118px;max-width:760px;padding:0 2px}
.st-hero-t h1{font-size:46px;margin:0 0 6px;letter-spacing:.1em}
.st-hero-t .lead{font-size:16.5px;line-height:1.8}
.st-path{list-style:none;margin:30px 0 20px;padding:0;position:relative}
.st-path::before{content:"";position:absolute;left:21px;top:40px;bottom:60px;width:2px;opacity:.6;
  background:linear-gradient(var(--r-cai),var(--r-dietrich) 35%,var(--r-theodora) 65%,var(--r-leda))}
.st-ch{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,.85fr);gap:0 34px;align-items:center;padding:32px 0}
.st-ch + .st-ch::after{content:"";position:absolute;left:78px;right:0;top:0;border-top:1px solid var(--line)}
.st-no{align-self:start;margin-top:2px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--bg);border:2px solid var(--gold);font:700 15px var(--font-head);color:var(--gold)}
.st-heavy .st-no{border-color:var(--bad);color:var(--bad)}
.st-k{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 6px;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.st-k .spb{margin-left:2px;letter-spacing:0}
.spb-n{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.st-txt h2{font-size:25px;margin:0 0 10px;line-height:1.35}
.st-txt h2 a{color:var(--ink)}
.st-txt h2 a:hover{color:var(--accent);text-decoration:none}
.st-lead{margin:0 0 12px;font-size:15.5px;line-height:1.85;color:var(--ink-2);max-width:40em}
.st-go{font-weight:700;color:var(--accent)}
.st-heavy .st-go{color:var(--bad)}
.st-fig{display:block;border-radius:6px;overflow:hidden;aspect-ratio:16/9;
  background:radial-gradient(circle at 50% 75%,color-mix(in srgb,var(--gold) 20%,var(--surface-2)),var(--surface-2) 70%)}
.st-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.st-fig:hover img{transform:scale(1.03)}
.st-fig img.st-cut{object-fit:contain;object-position:50% 100%}
.st-faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:center;height:100%;padding:0 14px}
.st-faces img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.st-faces img:nth-child(odd){transform:translateY(-10px)}
.st-faces img:nth-child(even){transform:translateY(10px)}
.st-heavy .st-fig img{filter:saturate(.75) brightness(.9)}
@media (max-width:860px){
  .st-hero-img{height:230px}
  .st-hero-t{margin-top:-64px}
  .st-hero-t h1{font-size:32px}
  .st-hero-t .lead{font-size:15px}
  .st-path{margin-top:18px}
  .st-path::before{left:15px}
  .st-ch{grid-template-columns:32px minmax(0,1fr);gap:12px 14px;padding:22px 0;align-items:start}
  .st-ch + .st-ch::after{left:46px}
  .st-no{width:32px;height:32px;font-size:12.5px;grid-row:1}
  .st-fig{grid-column:2;grid-row:1}
  .st-txt{grid-column:2;grid-row:2}
  .st-txt h2{font-size:20px}
  .st-lead{font-size:14.5px;line-height:1.75}
  .st-faces{gap:5px;padding:0 8px}
}

/* ui2:start — 招募页、人物页「招募」「好感与支援」页签（10-16 ui2）。源文件 tools/ui2/ui2.css，改那边再跑 tools/ui2/splice.py */
.rcx [hidden],.rcp [hidden]{display:none!important}
.rcx.searching .rcx-top,.rcx.searching .rcx-warn{display:none}

/* 条件小块：图标＋数字，名声★ 支援♥ 金钱● 道具图 外传书 委托板 限时⚠ */
.cv{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 6px;border-radius:12px;font-size:12.5px;line-height:1;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);text-decoration:none}
a.cv:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink)}
.cv b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;font-size:13.5px}
.cv .ic{font-size:14px}
.cv-ren{background:color-mix(in srgb,var(--gold) 15%,var(--surface))}
.cv-sup{background:color-mix(in srgb,var(--accent) 11%,var(--surface))}
.cv-gold{background:color-mix(in srgb,var(--gold) 15%,var(--surface))}
.cv-item{padding-left:2px;gap:5px;background:color-mix(in srgb,var(--itm-tile) 12%,var(--surface));color:var(--ink)}
.cv-item em{font-style:normal;font-weight:700;color:var(--ink);margin-left:-2px}
.cv-item .itm-i{width:20px;height:20px;border-radius:5px}
.cv-para{background:color-mix(in srgb,var(--accent-2) 13%,var(--surface));color:var(--ink)}
.cv-quest{background:color-mix(in srgb,var(--accent-2) 9%,var(--surface));color:var(--ink)}
.cv-talk{color:var(--ink)}
.cv-warn{background:color-mix(in srgb,var(--bad) 13%,var(--surface));color:var(--bad);font-weight:600}
.cv-ch{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);padding:0 8px}
.cv-late{color:var(--warn);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 55%,transparent);font-weight:600}
.cv-wide{white-space:normal;height:auto;min-height:24px;padding:4px 10px;line-height:1.45;border-radius:8px;color:var(--ink-2)}
.cv-big{height:28px;font-size:13px}.cv-big b{font-size:15px}
.ic-real{-webkit-mask:none!important;mask:none!important;background:none!important;object-fit:contain}
.cv-item .itd-inline{display:inline-flex;align-items:center;gap:4px;color:var(--ink);text-decoration:none}
.cv-item .itd-inline:hover{color:var(--accent-2)}
.cv-item .itd-inline-icon{width:20px;height:20px;margin:0;border-radius:4px}
.itm-i{display:inline-block;object-fit:contain;flex:none}
.itm-g{display:inline-flex;align-items:center;justify-content:center;background:var(--itm-tile);border-radius:5px}
.itm-g .ic{--icc:var(--itm-glyph);font-size:13px}

/* 页头 */
.rcx-h .lead{max-width:46em}
.rcx-how{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:10px 0 0;font-size:14px;color:var(--ink-2)}
.rcx-how .ic{--icc:var(--accent)}
.rcx-how a{font-weight:700}

/* 主角线大标签 */
.rcx-lords{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:2px 0 14px}
.rcx-lord{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px 9px 9px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.rcx-lord .lf{width:58px;height:58px;border-radius:9px;object-fit:cover;object-position:50% 12%;background:var(--surface-2);flex:none;filter:grayscale(.55);opacity:.8;transition:filter .15s,opacity .15s}
.rcx-ln{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rcx-ln b{font-family:var(--font-head);font-size:18px;white-space:nowrap}
.rcx-ln small{font-size:12px;color:var(--muted);white-space:nowrap}
.rcx-lord:hover{border-color:var(--line-strong)}
.rcx-lord:hover .lf{filter:none;opacity:1}
.rcx-lord[aria-selected="true"]{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 10%,var(--surface));box-shadow:inset 0 0 0 1px var(--rc),0 8px 20px -8px color-mix(in srgb,var(--rc) 60%,transparent)}
.rcx-lord[aria-selected="true"] .lf{filter:none;opacity:1}
.rcx-lord[aria-selected="true"] .rcx-ln b{color:color-mix(in srgb,var(--rc) 65%,var(--ink))}
.rcx-hit{position:absolute;top:-7px;right:-5px;min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font:700 12px/22px var(--font);text-align:center;font-style:normal;padding:0 6px}

/* 找人 + 图例 */
.rcx-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 12px}
.rcx-tools .fsearch{max-width:260px}
.rcx-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px;color:var(--muted)}
.rcx-legend .lg{display:inline-flex;align-items:center;gap:5px}
.rcx-legend em{font-style:normal}
.rcx-nohit{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--surface-2);font-size:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rcx-nohit button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 3px;border-radius:15px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.rcx-nohit .lf{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 12%}

/* 一条线 */
.rcx-panel{display:none}
.rcx-panel.on{display:block;animation:rcxIn .18s ease-out}
@keyframes rcxIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.rcx-top{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:stretch;margin:0 0 12px}
.rcx-stats{display:flex;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.rcx-stats div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 18px;font-size:12px;color:var(--muted);border-right:1px solid var(--line);white-space:nowrap}
.rcx-stats div:last-child{border-right:0}
.rcx-stats b{font:700 28px/1.1 var(--font-head);color:var(--ink)}
.rcx-stats div:nth-child(2) b{color:color-mix(in srgb,var(--rc) 70%,var(--ink))}
.rcx-stats .mute b{color:var(--muted)}
.rcx-picks{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 16px;padding:10px 16px;border-radius:12px;background:color-mix(in srgb,var(--rc) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--rc) 28%,var(--line))}
.rcx-pk-h{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.rcx-pk-l{display:flex;gap:10px}
.rcx-pk{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);font-size:12px}
.rcx-pk:hover{text-decoration:none}
.rcx-pk b{font-weight:600}
.rcx-pf{width:46px;height:46px;border-radius:9px;object-fit:cover;object-position:50% 12%;border:1px solid var(--line);background:var(--surface-2)}
.rcx-pk:hover .rcx-pf{border-color:var(--rc)}
.rcx-picks p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.65}
.rcx-picks p a{white-space:nowrap}
.rcx-warn{display:flex;gap:8px;align-items:center;margin:0 0 6px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--bad) 8%,var(--surface));color:var(--ink);font-size:13.5px;border-left:3px solid var(--bad)}
.rcx-rule{display:flex;gap:8px;align-items:baseline;margin:0 0 6px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}

.rcx-bh{display:flex;align-items:center;gap:8px;font:700 15px/1.4 var(--font);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.rcx-bh small{font-weight:400;color:var(--muted);font-size:12.5px}
.rcx-bh em{font-style:normal;font-weight:400;color:var(--muted);font-size:12.5px;margin-left:auto}

/* 剧情送的 */
.rcx-free{display:flex;flex-wrap:wrap;gap:8px}
.rcx-free-i{display:flex;align-items:center;gap:9px;padding:4px 14px 4px 4px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.rcx-free-i:hover{text-decoration:none;border-color:var(--line-strong)}
.rcx-ff{width:42px;height:42px;border-radius:7px;object-fit:cover;object-position:50% 12%;background:var(--surface-2)}
.rcx-free-i span{display:flex;flex-direction:column;line-height:1.3}
.rcx-free-i b{font-size:14px}.rcx-free-i small{font-size:11.5px;color:var(--muted)}

/* 可挖角：一人一行 */
.rcx-list{display:flex;flex-direction:column;gap:6px}
.rcx-row{background:var(--surface);border:1px solid var(--line);border-radius:10px;scroll-margin-top:90px;transition:border-color .15s,box-shadow .15s}
.rcx-row>summary{display:grid;grid-template-columns:50px minmax(0,1fr) minmax(0,400px) 18px;align-items:center;gap:16px;padding:6px 14px 6px 6px;cursor:pointer;list-style:none}
.rcx-row>summary::-webkit-details-marker{display:none}
.rcx-row:hover{border-color:var(--line-strong)}
.rcx-row[open]{border-color:color-mix(in srgb,var(--rc) 55%,var(--line));box-shadow:var(--shadow)}
.rcx-row.rcx-flash{box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 45%,transparent)}
.rcx-face{display:block;width:50px;height:50px;border-radius:8px;object-fit:cover;object-position:50% 12%;background:var(--surface-2)}
.rcx-ini{display:flex;align-items:center;justify-content:center;font:700 20px var(--font-head);color:var(--muted)}
.rcx-nm{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.rcx-nm1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rcx-nm1 b{font-size:15.5px}
.rcx-ol{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.rcx-rec{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:9px;font-size:11px;color:var(--warn);font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 55%,transparent)}
.rcx-cv{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.rcx-chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);justify-self:center;margin-top:-4px;transition:transform .15s}
.rcx-row[open] .rcx-chev{transform:rotate(-135deg);margin-top:4px}
.rcx-d{padding:2px 18px 14px 70px;border-top:1px dashed var(--line);font-size:14px}
.rcx-sum{margin:10px 0;color:var(--ink-2);line-height:1.8;max-width:56em}
.rcx-facts{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:3px;max-width:56em}
.rcx-facts li{display:grid;grid-template-columns:18px 34px minmax(0,1fr);gap:6px;align-items:baseline;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.rcx-facts li .ic{align-self:start;justify-self:center;margin-top:.3em}
.rcx-facts li .cv{vertical-align:middle;margin:-2px 4px -2px 0}
.rcx-facts li b{color:var(--muted);font-weight:600;font-size:12.5px}
.rcx-f-warn span{color:var(--bad)}
.rcx-f-mute{opacity:.8}
.rcx-others{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 4px}
.rcx-o-h{font-size:12px;color:var(--muted);margin-right:2px}
.rcx-o{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 6px 0 3px;border-radius:14px;background:color-mix(in srgb,var(--rc) 10%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 35%,transparent);color:var(--ink-2);font-size:12px}
.rcx-o:hover{text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--rc)}
.rcx-o .lf{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 12%;margin-right:2px}
.rcx-o .cv{height:22px;background:transparent;padding:0 3px;gap:2px}
.rcx-o-t{padding:0 4px}
.rcx-o.na{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.rcx-o.na .lf{filter:grayscale(1);opacity:.6}
.rcx-gap{margin:4px 0 0;font-size:12px;color:var(--muted)}
.rcx-more{display:inline-block;margin-top:8px;font-size:13px;font-weight:600}

/* 招不到的 */
.rcx-na{margin:22px 0 0;border:1px dashed var(--line-strong);border-radius:10px}
.rcx-na>summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-2);list-style:none}
.rcx-na>summary::-webkit-details-marker{display:none}
.rcx-na>summary small{font-weight:400;color:var(--muted);font-size:12.5px}
.rcx-na[open]>summary small{display:none}
.rcx-na-g{padding:2px 14px 10px}
.rcx-na-g p{display:flex;align-items:center;gap:6px;margin:6px 0;font-size:13px;color:var(--ink-2)}
.rcx-na-p{display:flex;flex-wrap:wrap;gap:6px}
.rcx-na-i{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 3px;border-radius:15px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:12.5px}
.rcx-na-i:hover{text-decoration:none;color:var(--ink)}
.rcx-nf{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--surface-2)}
.rcx-foot{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);margin:16px 0 0}

/* 招募文章 */
.rcx-guides{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.rcx-gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rcx-g{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.rcx-g:first-child{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:inset 3px 0 0 var(--accent)}
.rcx-g b{font-size:15px}.rcx-g small{color:var(--muted);font-size:12.5px;line-height:1.55}
.rcx-g:hover{text-decoration:none;border-color:var(--line-strong)}

/* 人物页「招募」页签 */
.rcp-lead{font-size:16px;margin:0 0 14px;color:var(--ink)}
.rcp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rcp-card{border:1px solid var(--line);border-top:3px solid var(--rc);border-radius:10px;background:var(--surface);padding:12px 12px 12px}
.rcp-card.s-na{background:transparent;border-style:dashed;border-top:3px solid color-mix(in srgb,var(--rc) 35%,transparent)}
.rcp-card.s-na .lf{filter:grayscale(1);opacity:.55}
.rcp-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rcp-h .lf{width:38px;height:38px;border-radius:8px;object-fit:cover;object-position:50% 12%;background:var(--surface-2)}
.rcp-h b{font-family:var(--font-head);font-size:16px}
.rcp-st{font-size:12px;padding:1px 8px;border-radius:10px;background:var(--surface-2);color:var(--muted);line-height:20px}
.s-scout .rcp-st{background:color-mix(in srgb,var(--accent-2) 15%,var(--surface));color:var(--accent-2);font-weight:600}
.s-free .rcp-st{background:color-mix(in srgb,var(--good) 15%,var(--surface));color:var(--good);font-weight:600}
.rcp-best{font-size:11px;color:var(--warn);display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:9px;font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 55%,transparent)}
.rcp-cv{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.rcp-na{font-size:12.5px;color:var(--muted);margin:10px 0 0;display:flex;gap:6px;align-items:baseline;line-height:1.55}
.rcp-how{margin-top:10px;font-size:13.5px}
.rcp-how summary{cursor:pointer;color:var(--accent-2);font-size:13px;font-weight:600}
.rcp-how p{margin:6px 0;color:var(--ink-2);line-height:1.7}
.rcp-when{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.rcp-later{display:flex;flex-direction:column;gap:6px;margin:14px 0 6px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.rcp-l{display:grid;grid-template-columns:18px 48px minmax(0,1fr);gap:6px;font-size:13.5px;color:var(--ink-2);align-items:baseline}
.rcp-l .ic{align-self:center}

/* 人物页「好感与支援」页签 */
.bnd-best{padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));margin:0 0 20px}
.bnd-bh{font:700 17px var(--font-head);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.bnd-bh .ic{--icc:var(--accent)}
.bnd-bl{display:flex;flex-wrap:wrap;gap:10px}
.gft-in{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.gft-in:hover{text-decoration:none;border-color:var(--accent)}
.gft-in img{width:38px;height:38px;border-radius:7px}
.gft-in-t{display:flex;align-items:baseline;gap:8px;min-width:0}
.gft-in b{font-size:15px}.gft-in small{color:color-mix(in srgb,var(--gold) 80%,var(--ink));font-weight:700;font-size:13px}
.bnd-best p{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.bnd-g{margin:0 0 20px}
.bnd-g h3{display:flex;align-items:center;gap:3px;font:700 15px var(--font);margin:0 0 8px}
.bnd-g h3 small{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:8px}
.gft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.gft{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--ink);min-width:0}
.gft:hover{text-decoration:none;border-color:var(--line-strong)}
.gft-l{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.gft{position:relative;padding-right:18px}
.gft-ok{position:absolute;right:5px;top:5px;font-size:12px}
.gft-i{width:34px;height:34px;border-radius:6px;flex:none}
.gft-ig{display:inline-flex;align-items:center;justify-content:center;background:var(--itm-tile)}
.gft-ig .ic{--icc:var(--itm-glyph)}
.gft-b{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.gft-b b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gft-b small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gft-grid-s{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.gft-grid-s .gft-i{width:26px;height:26px}
.gft-grid-s .gft{padding-top:3px;padding-bottom:3px}
.bnd-like{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--ink-2);margin:-6px 0 8px}
.bnd-like span{display:inline-flex;align-items:baseline;gap:4px}
.bnd-like b{color:var(--muted);font-weight:600;margin-right:4px}
.bnd-sup h3 .ic{--icc:var(--accent-2)}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px 8px}
.sup{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);font-size:12.5px}
.sup:hover{text-decoration:none}
.sup-f{position:relative;display:block;width:60px;height:60px}
.sup-f img,.sup-ini{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:9px;object-fit:cover;object-position:50% 12%;border:1px solid var(--line);background:var(--surface-2);font:700 22px var(--font-head);color:var(--muted)}
.sup:hover .sup-f img{border-color:var(--accent-2)}
.sup-g{position:absolute;left:-5px;bottom:-5px;width:23px;height:23px;border-radius:50%;font:700 12px/19px var(--font);text-align:center;font-style:normal;color:var(--accent-ink);background:var(--muted);border:2px solid var(--bg)}
.sup-a{background:var(--accent)}.sup-b{background:var(--accent-2)}.sup-c{background:var(--tier-d)}
.sup-h{position:absolute;right:-6px;top:-6px;font-size:17px;filter:drop-shadow(0 0 1.5px var(--bg)) drop-shadow(0 0 1px var(--bg))}
.sup-n{max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1100px){
  .rcx-lords{gap:8px}
  .rcx-lord{gap:8px;padding:8px}
  .rcx-lord .lf{width:46px;height:46px}
  .rcx-ln b{font-size:16px}
  .rcx-top{grid-template-columns:1fr}
  .rcp-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .rcx-lords{gap:6px;margin-bottom:12px}
  .rcx-lord{flex-direction:column;gap:4px;padding:7px 2px 6px;text-align:center;border-radius:10px}
  .rcx-lord .lf{width:44px;height:44px;border-radius:8px}
  .rcx-ln b{font-size:12.5px;font-family:var(--font)}
  .rcx-ln small,.rcx-pian{display:none}
  .rcx-hit{top:-6px;right:-3px}
  .rcx-tools{gap:8px}
  .rcx-tools .fsearch{max-width:none}
  .rcx-legend{gap:4px 12px}
  .rcx-legend .lg:nth-child(n+3){display:none}
  .rcx-h .lead{font-size:15px}
  .rcx-stats{border:0;background:transparent;border-radius:0}
  .rcx-stats div{flex-direction:row;align-items:baseline;gap:4px;padding:0 12px 0 0;border:0;font-size:12.5px}
  .rcx-stats b{font:700 16px var(--font)}
  .rcx-top{gap:8px}
  .rcx-picks{grid-template-columns:auto 1fr;padding:8px 12px;gap:6px 12px}
  .rcx-pf{width:40px;height:40px}
  .rcx-ol{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.45}
  .rcx-picks p{grid-column:1/-1}
  .rcx-row>summary{grid-template-columns:46px minmax(0,1fr) 12px;gap:3px 10px;padding:6px 10px 6px 6px}
  .rcx-face{width:46px;height:46px;grid-row:1/3}
  .rcx-nm{grid-column:2}
  .rcx-cv{grid-column:2;gap:4px}
  .rcx-chev{grid-column:3;grid-row:1/3}
  .rcx-d{padding:2px 12px 12px}
  .rcx-bh em{display:none}
  .rcx-facts li{grid-template-columns:18px 30px minmax(0,1fr)}
  .rcp-grid{grid-template-columns:1fr}
  .bnd-best{padding:12px}
  .bnd-bl{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .gft-in{padding:4px 8px 4px 4px;gap:7px;min-width:0}
  .gft-in img{width:32px;height:32px}
  .gft-in-t{flex-direction:column;gap:0;line-height:1.3}
  .gft-in b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .gft-in small{font-size:12px}
  .gft-grid{grid-template-columns:1fr 1fr}
  .gft-grid-s{grid-template-columns:1fr 1fr}
  .sup-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .sup-f,.sup-f img,.sup-ini{width:54px;height:54px}
}
/* ui2:end */

/* ui2-icons:start — 由 site/gen/icons.py --css 生成，别手改 */
.ic{display:inline-block;width:1.05em;height:1.05em;flex:none;vertical-align:-.16em;background:var(--icc,currentColor);-webkit-mask:var(--im) center/contain no-repeat;mask:var(--im) center/contain no-repeat}
.ic-renown{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .4c.6 4 1.8 5.9 7.6 7.6C9.8 9.7 8.6 11.6 8 15.6 7.4 11.6 6.2 9.7.4 8 6.2 6.3 7.4 4.4 8 .4z'/%3E%3C/svg%3E");--icc:var(--gold)}
.ic-support{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 14.6C4.9 12.4 1 9.5 1 5.6 1 3.3 2.8 1.5 5 1.5c1.3 0 2.4.6 3 1.6.6-1 1.7-1.6 3-1.6 2.2 0 4 1.8 4 4.1 0 3.9-3.9 6.8-7 9z'/%3E%3C/svg%3E");--icc:var(--accent)}
.ic-heart-o{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 14.6C4.9 12.4 1 9.5 1 5.6 1 3.3 2.8 1.5 5 1.5c1.3 0 2.4.6 3 1.6.6-1 1.7-1.6 3-1.6 2.2 0 4 1.8 4 4.1 0 3.9-3.9 6.8-7 9zM8 12.4C5.6 10.6 2.8 8.4 2.8 5.7c0-1.3 1-2.4 2.3-2.4.9 0 1.7.5 2.1 1.3L8 6l.8-1.4c.4-.8 1.2-1.3 2.1-1.3 1.3 0 2.3 1.1 2.3 2.4 0 2.7-2.8 4.9-5.2 6.7z'/%3E%3C/svg%3E");--icc:var(--accent)}
.ic-coin{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 2a5 5 0 1 1 0 10A5 5 0 0 1 8 3zm0 1.8L11.2 8 8 11.2 4.8 8z'/%3E%3C/svg%3E");--icc:var(--gold)}
.ic-bag{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 1.5h4l-.8 2.3H6.8zM5.2 4.6h5.6C13.4 6.4 15 9 15 11.6c0 2-1.6 3.4-3.6 3.4H4.6C2.6 15 1 13.6 1 11.6 1 9 2.6 6.4 5.2 4.6z'/%3E%3C/svg%3E")}
.ic-book{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 2.6C3.4 1.8 5.8 1.9 7.3 3.1V14c-1.5-1-3.9-1.1-5.8-.4zM8.7 3.1c1.5-1.2 3.9-1.3 5.8-.5v11c-1.9-.7-4.3-.6-5.8.4z'/%3E%3C/svg%3E");--icc:var(--accent-2)}
.ic-quest{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5.5 1h5v1.5h-5zM3 2.5h10V15H3zM5.2 6h5.6v1.4H5.2zm0 3h5.6v1.4H5.2zm0 3h3.6v1.4H5.2z'/%3E%3C/svg%3E");--icc:var(--accent-2)}
.ic-dialog{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 2.5h13v9H8.2l-3.7 3v-3h-3zM4 6.2h1.6v1.6H4zm3.2 0h1.6v1.6H7.2zm3.2 0H12v1.6h-1.6z'/%3E%3C/svg%3E");--icc:var(--ink-2)}
.ic-warn{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.2l7.2 13.3H.8zM7.2 5.8h1.6v4.4H7.2zm0 5.5h1.6v1.6H7.2z'/%3E%3C/svg%3E");--icc:var(--bad)}
.ic-flag{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 1h1.6v14H2.5zM4.1 1.8h9.4l-2.4 3.4 2.4 3.4H4.1z'/%3E%3C/svg%3E");--icc:var(--muted)}
.ic-lock{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.8 7h10.4v8H2.8zM4 7V5.2a4 4 0 0 1 8 0V7h-1.8V5.2a2.2 2.2 0 0 0-4.4 0V7z'/%3E%3C/svg%3E");--icc:var(--muted)}
.ic-join{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.2 1.8a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6zM1 14.2C1 11.2 3.3 9 6.2 9s5.2 2.2 5.2 5.2zM12.3 4.5h1.4v2.1h2.1V8h-2.1v2.1h-1.4V8h-2.1V6.6h2.1z'/%3E%3C/svg%3E");--icc:var(--good)}
.ic-fish{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8c2.2-3.4 6.4-4.6 9.6-2.2L14.8 3v10l-4.2-2.8C7.4 12.6 3.2 11.4 1 8zM4.4 7h1.5v1.5H4.4z'/%3E%3C/svg%3E")}
.ic-meat{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 1.2A4.8 4.8 0 0 1 14.8 6c0 3-2.6 4.8-5.2 4.8L7 13.4a1.7 1.7 0 1 1-2.6.2 1.7 1.7 0 1 1 .2-2.6L7.2 8.4C7 5.2 7.6 1.2 10 1.2z'/%3E%3C/svg%3E")}
.ic-leaf{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.6 1.4C6.8 1.2 1.8 5 2.4 12.2L1.2 13.6l1 .9 1.3-1.4c7.1.7 11.3-3.7 11.1-11.7zM4.6 11.4c2-2.6 4.4-4.6 7-6l.5.7c-2.6 1.4-4.9 3.3-6.8 5.8z'/%3E%3C/svg%3E")}
.ic-calendar{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 3h12v12H2zM3.6 6.4v7h8.8v-7zM4.5 1h1.6v2H4.5zm5.4 0h1.6v2H9.9z'/%3E%3C/svg%3E");--icc:var(--muted)}
.ic-gift{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 6h5.2v3H2zm6.8 0H14v3H8.8zM3 9.6h4.2V15H3zm5.8 0H13V15H8.8zM8 6C6.2 2.4 3.2 2.8 3.6 4.5 3.9 5.7 6 6 8 6zm0 0c1.8-3.6 4.8-3.2 4.4-1.5C12.1 5.7 10 6 8 6z'/%3E%3C/svg%3E")}
.ic-spark{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .8l1.7 5 5 1.7-5 1.7L8 14.2l-1.7-5-5-1.7 5-1.7z'/%3E%3C/svg%3E");--icc:var(--gold)}
.ic-tip{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a4.6 4.6 0 0 0-2.6 8.4V11h5.2V9.4A4.6 4.6 0 0 0 8 1zM5.6 12.2h4.8v1.4H5.6zm.9 2h3v.8h-3z'/%3E%3C/svg%3E");--icc:var(--gold)}
.ic-check{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.2 12.2L1.8 7.8l1.5-1.5 2.9 2.9 6.5-6.5 1.5 1.5z'/%3E%3C/svg%3E");--icc:var(--good)}
.ic-clock{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.8a5.2 5.2 0 1 1 0 10.4A5.2 5.2 0 0 1 8 2.8zM7.2 4.2h1.6v3.5l2.6 1.6-.8 1.3-3.4-2.1z'/%3E%3C/svg%3E");--icc:var(--muted)}
/* ui2-icons:end */

/* 栏目文章列表（10-16 ui1：小缩略图＋标题＋一句话，细线分隔，不再一摞方块） */
.alist{list-style:none;margin:0;padding:0}
.alist li + li{border-top:1px solid var(--line)}
.al{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;color:var(--ink)}
.al.has-img{grid-template-columns:76px minmax(0,1fr)}
.al img{display:block;width:76px;height:50px;object-fit:cover;border-radius:4px;background:var(--surface-2);box-shadow:0 0 0 1px var(--line)}
.al-b{min-width:0}
.al-t{display:block;font-weight:700;font-size:14.5px;line-height:1.45}
.al-t .spb{margin-left:6px;font-size:10.5px;line-height:16px;padding:0 6px;vertical-align:1px}
.al-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.al:hover{text-decoration:none}
.al:hover .al-t{color:var(--accent)}
.al:hover img{box-shadow:0 0 0 2px var(--accent)}
.sec-side .h-sm{margin-bottom:4px}
.sec-list .alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.sec-list .alist li + li{border-top:0}
.sec-list .alist li{border-bottom:1px solid var(--line)}
.sec-list .al.has-img{grid-template-columns:132px minmax(0,1fr);gap:16px}
.sec-list .al img{width:132px;height:80px}
.sec-list .al{padding:14px 0}
.sec-list .al-t{font-size:16px}
.sec-list .al-s{font-size:13.5px;color:var(--ink-2)}
@media (max-width:1100px){
  .sec-side .alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .sec-side .alist li + li{border-top:0}
  .sec-side .alist li{border-bottom:1px solid var(--line)}
}
@media (max-width:700px){
  .sec-side .alist,.sec-list .alist{grid-template-columns:1fr}
  .sec-list .al.has-img{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .sec-list .al img{width:96px;height:62px}
}

/* 线别头像（10-16 ui1）：人物图鉴筛选、卡片角标、章节一览分组 */
.fchip-lord{padding-left:3px;gap:6px}
.fchip-lord img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 1.5px var(--rc)}
.fchip-lord.on img{box-shadow:0 0 0 1.5px var(--bg)}
.ccard-r .lt-icon{padding:0;background:none;box-shadow:none}
.ccard-r .lt-icon img{width:20px;height:20px;border-radius:4px;box-shadow:0 0 0 1.5px var(--rc)}
.ccard-r .lt-icon.lt-ring img{opacity:.55;box-shadow:0 0 0 1.5px var(--rc) inset}
.lf-s{width:26px;height:26px;border-radius:5px;object-fit:cover;object-position:50% 20%;vertical-align:-7px;margin-right:6px;box-shadow:0 0 0 1px var(--line)}
.chips .lt{height:26px}

/* 手机体检（10-16 ui1）：grid 里的 1fr 默认按子元素最小内容撑开，宽表格/长下拉会把整页撑出横向滚动 */
.two>*,.sec-grid>*,.feat>*,.hero>*{min-width:0}
.seg-sel{min-width:0;max-width:100%}
.seg-sel select{min-width:0;max-width:100%}
@media (max-width:860px){
  .seg-sel{flex:1 1 100%}
  .seg-sel select{width:100%}
}
.art>*,.art .prose{min-width:0}
.prose{overflow-wrap:break-word}
.prose a,.prose code{overflow-wrap:anywhere}
@media (max-width:860px){
  .art.has-toc{grid-template-columns:minmax(0,1fr)}
}
.toc-d>summary{list-style:none;cursor:default}
.toc-d>summary::-webkit-details-marker{display:none}
.toc-n{display:none}
@media (min-width:861px){.toc-d>summary{pointer-events:none}}
@media (max-width:860px){
  .toc{padding:0 12px}
  .toc-d>summary{cursor:pointer;display:flex;align-items:center;gap:8px;margin:0;padding:11px 0;font-size:13px;letter-spacing:.06em;color:var(--ink-2)}
  .toc-d>summary::after{content:"展开";margin-left:auto;color:var(--accent-2);letter-spacing:0;font-size:12.5px}
  .toc-d[open]>summary::after{content:"收起"}
  .toc-n{display:inline;color:var(--muted);letter-spacing:0}
  .toc-d[open] ol{margin-bottom:10px}
  /* 顶栏：栏目条能横滑，右边渐隐提示还有 */
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  /* 人物图鉴筛选：每行一条横滑，不把头像挤到第二屏 */
  #cfilter .frow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  #cfilter .frow::-webkit-scrollbar{display:none}
  #cfilter .fchip{flex:none;height:32px}
}

/* 梯度页尾：各来源的梯度（10-16） */
.seg-link{display:inline-flex;align-items:center;text-decoration:none}
.tsrc{margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.tsrc h2{margin:0 0 4px}
.tsrc-pick{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.tsrc-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tsrc-gh{flex:none;width:84px;font-size:13px;color:var(--muted)}
.tsrc-b{display:inline-flex;flex-direction:column;align-items:flex-start;padding:5px 11px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;line-height:1.3;cursor:pointer;text-align:left}
.tsrc-b small{font-size:11.5px;color:var(--muted);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsrc-b:hover{border-color:var(--accent-2)}
.tsrc-b.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tsrc-b.on small{color:var(--bg);opacity:.75}
@media (max-width:640px){.tsrc-gh{width:100%}}

/* 人物对比（characters/compare/）的样式已挪到 assets/compare.css（10-16 侧会话「人物对比」重做）；.sq 人物页也在用，留在这里 */
.sq{display:inline-block;width:8px;height:8px;border-radius:2px;flex:none}

/* 点图看大图（10-16） */
.zoom-ov{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--overlay);cursor:zoom-out;padding:16px}
.zoom-ov img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}
.rk{white-space:nowrap}

/* 招募页展开区两个按钮（10-16） */
.rcx-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rcx-gift{display:inline-flex;align-items:center;gap:8px}
.rcx-gi{display:inline-flex;gap:2px}
.rcx-gi img{width:24px;height:24px;object-fit:contain;background:rgba(255,255,255,.85);border-radius:4px;padding:1px}

/* 人物页「能力数据」（10-16 二版：参考 UP 主人物分析图的「表格清晰」——全部通栏表格） */
.ab{display:flex;flex-direction:column;gap:18px}
.ab-card{padding:16px 18px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.ab-card h2{font-size:17px;margin:0}
.ab-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px}
.ab-h p{margin:0;font-size:12.5px;color:var(--muted)}
.ab-t{width:100%;border-collapse:collapse;font-size:14px}
.ab-t th,.ab-t td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:center;font-variant-numeric:tabular-nums}
.ab-t thead th{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border-bottom:1px solid var(--line-strong);white-space:nowrap}
.ab-t thead th:first-child{background:transparent}
.ab-t tbody tr:last-child th,.ab-t tbody tr:last-child td{border-bottom:0}
.ab-t tbody th{text-align:left;font-weight:600;color:var(--ink-2);white-space:nowrap;width:1%;padding-right:14px}
.ab-t tbody th small{display:block;font-size:11.5px;font-weight:400;color:var(--muted)}
.ab-t .sq{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;vertical-align:2px}
.ab-v{font-size:15.5px;font-weight:600;color:var(--ink)}
.ab-rk{font-size:12.5px;color:var(--muted)}
.q5{color:var(--q5) !important;font-weight:700}.q4{color:var(--q4) !important;font-weight:700}.q3{color:var(--q3) !important;font-weight:600}
.q2{color:var(--q2) !important;font-weight:600}.q1{color:var(--q1) !important}.q0{color:var(--q0) !important}
.ab-rk-top{font-weight:700}
.ab-rkrow th,.ab-rkrow td{padding-top:2px !important}
.ab-t .ab-sum{background:color-mix(in srgb,var(--gold) 14%,var(--surface));font-weight:700;color:var(--ink)}
.ab-t thead .ab-sum{background:color-mix(in srgb,var(--gold) 26%,var(--surface-2))}
.ab-pfs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.ab-pfrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.ab-pfl{font-size:13px;color:var(--muted);margin:0 2px 0 12px}
.ab-pfl:first-child{margin-left:0}
.pfc{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13.5px;border:1px solid var(--line)}
.pfc-s{background:color-mix(in srgb,var(--good) 16%,var(--surface));border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.pfc-w{background:color-mix(in srgb,var(--bad) 12%,var(--surface));border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.pfc-b{background:color-mix(in srgb,var(--gold) 18%,var(--surface));border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.ab-sk td,.ab-sk th{text-align:left}
.ab-sk thead th{text-align:left}
.ab-sk .ab-skn{white-space:nowrap;width:1%;padding-right:16px}
.ab-sk tbody td:last-child{color:var(--ink-2);font-size:14px}
@media (max-width:640px){.ab-card{padding:12px}.ab-t th,.ab-t td{padding:7px 5px}.ab-v{font-size:14px}.ab-sk .ab-skn{white-space:normal}}

/* 悬停提示框：[data-tt]（技能等），手机点一下出现（10-16） */
.tip{position:absolute;z-index:95;max-width:320px;padding:10px 13px;border-radius:6px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:13.5px;line-height:1.55;pointer-events:auto}
.tip h4{margin:0;font-size:15px;font-family:var(--font)}
.tip .tip-s{font-size:12px;color:var(--muted);margin-top:1px}
.tip .tip-b{margin:6px 0 0}
.tip .tip-w{margin:6px 0 0;padding-top:6px;border-top:1px dashed var(--line);color:var(--ink-2)}
.tip .tip-w b{margin-right:4px}
.tip .tip-a{display:inline-block;margin-top:6px;font-size:12.5px}

/* 可学技能：每个熟练度一行（10-16） */
.skl-card{padding:6px 14px}
.skl-t thead th{text-align:left}
.skl-t tbody th.pf-h{vertical-align:top;padding-top:12px;width:110px}
.skl-t .pf{margin-left:6px}
.skl-seq{text-align:left !important;line-height:2.1}
.skl-r{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 14px 2px 0}
.skl-rk{display:inline-block;min-width:24px;padding:0 5px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font:700 12px/20px var(--font);text-align:center}
.sk.sk-minor{opacity:.62;font-size:12px;padding-top:0;padding-bottom:0}
.sk.sk-minor:hover{opacity:1}

/* 职业表：能力代表色、点表头排序、总成长、条件小图标（10-16） */
.gmg-c[style*="--st-lck"].gm-l4,.gmg-c[style*="--st-lck"].gm-l5{color:#2a2208;text-shadow:none}
.gms{all:unset;cursor:pointer;text-align:center;border-radius:3px;padding:1px 0;color:var(--muted)}
.gms:hover{color:var(--ink);background:var(--surface-2)}
.gms.on{color:var(--accent);font-weight:700}
.gms.on::after{content:"↓";font-size:10px;margin-left:1px}
.gms.on.asc::after{content:"↑"}
.gmg-th small{margin-left:6px;font-weight:400;font-size:11px;color:var(--muted)}
.gm-tot-h .gms{font-weight:600;color:var(--ink-2)}
.gm-tot{font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap}
.gm-tot-neg{color:var(--bad)}
.cls-cond{white-space:nowrap}
.cls-cond .cv{margin:2px 4px 2px 0}
.cls-tbl th:nth-child(2){width:15%}
.cv-lv,.cv-pf{display:inline-flex;align-items:center;gap:2px;padding:1px 7px;border-radius:10px;font-size:12.5px;background:var(--surface-2);color:var(--ink-2)}
.cv-lv b,.cv-pf b{color:var(--ink)}
.sk .skk-i{width:18px;height:18px;object-fit:contain;margin-right:4px;vertical-align:-4px;flex:none}
.pf-ic{object-fit:contain;vertical-align:-4px;margin-right:4px}
.pfc .pf-ic{vertical-align:-3px}
.skl-t .pf-h .pf-ic{vertical-align:-6px}
.who{font-size:12px;color:var(--muted)}
.box-who{border-style:dashed;opacity:.8;font-size:13px}

/* 职业表四个视图（10-16） */
.cls-views[data-v="g"] .vv:not(.vv-g),.cls-views[data-v="s"] .vv:not(.vv-s),
.cls-views[data-v="f"] .vv:not(.vv-f),.cls-views[data-v="k"] .vv:not(.vv-k){display:none}
.cls-bar{position:sticky;top:56px;z-index:5;background:var(--bg);padding:8px 0 6px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.cls-seg{margin:0 0 6px}
.gmg-legend .gmg-c{width:22px;height:14px}
.cls-k{display:flex;flex-direction:column;gap:5px;min-width:380px;white-space:normal}
.cls-ms{display:inline-flex;align-items:center;gap:6px}
.cls-ms small{font-size:11.5px;color:var(--gold);font-weight:700}
.cls-ks,.cls-kx{display:flex;flex-wrap:wrap;gap:4px}
.cls-kx .cv{height:22px}
.cv .pf-ic{margin-right:2px}
.pf-ic{background:#2c3342;border-radius:4px;padding:1px;box-sizing:border-box}

/* home:start — 首页（10-16 首页重做 · Claude Opus 5.5；生成器 site/gen/pages_home.py，脚本在 site.js 末尾「首页」段）。只管 .hm-* 和 body.pg-home */
/* 首屏的搜索框在视野里时，顶栏搜索先藏起来（滚过首屏再出现），免得一屏两个搜索框 */
body.pg-home:not(.hm-search-off) .top .search{visibility:hidden}

/* 首屏：左边安娜的对话框＋搜索＋大家常问，右边安娜立绘；背后是游戏里的斗技场（真实素材淡入），不用自绘线条装饰 */
.hm-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:448px;margin:2px 0 30px;
  border:1px solid var(--line);border-radius:8px;
  background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 62%),
             linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 65%,var(--surface)))}
.hm-bg{position:absolute;z-index:-1;top:0;right:0;width:64%;height:100%;border-radius:0 8px 8px 0;object-fit:cover;object-position:50% 40%;opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%);mask-image:linear-gradient(90deg,transparent,#000 46%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hm-bg{opacity:.5}}
:root[data-theme="dark"] .hm-bg{opacity:.5}
/* .home-anna[data-anim]：留给以后换成动态立绘（Live2D 之类）的容器 */
.hm-anna{grid-column:2;grid-row:1;align-self:stretch;justify-self:center;display:flex;align-items:flex-end;margin:0;overflow:hidden;line-height:0}
.hm-anna picture{display:block}
.hm-anna img{display:block;width:auto;height:500px;margin-bottom:-58px;filter:drop-shadow(0 10px 26px rgba(20,16,10,.28))}
.hm-main{grid-column:1;grid-row:1;align-self:center;min-width:0;max-width:830px;padding:38px 10px 54px 48px}
.hm-kick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 30px;font:600 13px/1.4 var(--font);letter-spacing:.18em;color:var(--muted)}
.hm-kick .hm-brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.hm-kick .hm-brand svg{display:block;width:auto}
.hm-kick .hm-bm{height:24px}.hm-kick .hm-bw{height:18px}
.hm-kick i{width:1px;height:14px;background:var(--line-strong)}

/* 对话框：像游戏里的对白框——名牌、正文、右下角跳动的小三角；点一下换一句 */
.hm-say{position:relative;margin:0 0 24px;padding:26px 30px 22px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow);cursor:pointer;-webkit-user-select:none;user-select:none}
.hm-say::before,.hm-say::after{content:"";position:absolute;top:46%;border-style:solid;border-color:transparent}
.hm-say::before{right:-13px;border-width:11px 0 11px 13px;border-left-color:var(--line-strong)}
.hm-say::after{right:-11px;border-width:10px 0 10px 12px;border-left-color:var(--surface)}
.hm-say:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.hm-plate{position:absolute;top:-14px;left:22px;display:inline-flex;align-items:baseline;gap:7px;padding:2px 14px 3px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font:700 15px/1.5 var(--font-head);letter-spacing:.12em;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.hm-plate small{font:500 11.5px var(--font);letter-spacing:.04em;opacity:.88}
.hm-line{display:grid;margin:0;font:600 25px/1.6 var(--font-head);color:var(--ink);letter-spacing:.02em;text-wrap:pretty;min-height:3.2em;align-content:center}
.hm-line>span{grid-area:1/1}
.hm-ghost{visibility:hidden}
.hm-next{position:absolute;right:18px;bottom:12px;border-style:solid;border-width:8px 6px 0;border-color:var(--accent) transparent transparent;animation:hm-bob 1.2s ease-in-out infinite}
@keyframes hm-bob{50%{transform:translateY(3px)}}

/* 搜索 */
.hm-search{position:relative;display:flex;align-items:center;gap:6px;height:60px;padding:0 7px 0 18px;background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow)}
.hm-search:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 18%,transparent),var(--shadow)}
.hm-sico{flex:none;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.hm-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;padding:0 6px;outline:0}
.hm-search input::placeholder{color:var(--muted)}
.hm-go{flex:none;height:46px;padding:0 24px;border:0;border-radius:9px;background:var(--accent);color:var(--accent-ink);font:700 16px var(--font);letter-spacing:.14em;cursor:pointer}
.hm-go:hover{filter:brightness(1.07)}
.hm-search .qres{top:calc(100% + 6px);border-radius:10px;max-height:min(460px,62vh)}
.hm-search .qres a{padding:10px 16px;font-size:15px}
.qres .qhint{padding:9px 16px;font-size:12.5px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}

/* 大家常问 */
.hm-hot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0}
.hm-hot-k{font-size:12.5px;color:var(--muted);letter-spacing:.14em;margin-right:4px}
.hm-q{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 4px;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--ink);font-size:14px;white-space:nowrap}
.hm-q:not(:has(.hm-ico)){padding-left:14px}
.hm-q:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.hm-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--itm-tile)}
.hm-ico img{width:100%;height:100%;object-fit:cover}
.hm-ico-ui img{width:19px;height:19px;object-fit:contain}
.hm-stats{margin:20px 0 0;font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* 分区标题 */
.hm-sec{margin:0 0 40px}
.hm-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hm-h h2{margin:0;font-size:25px;letter-spacing:.08em}
.hm-h h2 a{color:var(--ink)}
.hm-h p{margin:0;font-size:14px;color:var(--muted)}

/* 三张大卡：梯度／模拟器（高）／招募 */
.hm-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.hm-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 24px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.hm-tier{grid-column:1/span 7;grid-row:1;border-top:3px solid var(--accent)}
.hm-sim{grid-column:8/span 5;grid-row:1/span 2;border-top:3px solid var(--accent-2)}
.hm-recruit{grid-column:1/span 7;grid-row:2;border-top:3px solid var(--gold)}
.hm-k{margin:0;font-size:13px;color:var(--muted);letter-spacing:.1em}
.hm-card h3,.hm-faq h3{margin:2px 0 6px;font-size:26px;letter-spacing:.05em}
.hm-card h3 a,.hm-faq h3 a{color:var(--ink)}
.hm-card h3 a::after,.hm-faq h3 a::after{content:"→";display:inline-block;margin-left:8px;font:400 .72em var(--font);color:var(--accent);transition:transform .15s}
.hm-card h3 a:hover,.hm-faq h3 a:hover{text-decoration:none}
.hm-card h3 a:hover::after,.hm-faq h3 a:hover::after{transform:translateX(4px)}
.hm-d{margin:0 0 16px;font-size:14px;color:var(--ink-2)}
.hm-tiers{display:flex;flex-direction:column;gap:14px}
.hm-trow{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:12px}
.hm-trow .tier{min-width:42px;height:42px;margin-top:2px;border-radius:4px;font-size:16px}
.hm-faces{display:flex;flex-wrap:wrap;gap:10px 8px}
.hm-face{display:flex;flex-direction:column;align-items:center;width:64px;color:var(--ink);font-size:12.5px;line-height:1.3}
.hm-face img,.hm-face i{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius);object-fit:cover;background:var(--surface-2);border:1px solid var(--line);font:700 22px var(--font-head);font-style:normal;transition:border-color .15s,transform .15s}
.hm-face-l{width:84px;font-size:13.5px;font-weight:700}
.hm-face-l img,.hm-face-l i{width:84px;height:84px}
.hm-face span{max-width:100%;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-face:hover{text-decoration:none}
.hm-face:hover img{border-color:var(--accent);transform:translateY(-2px)}
.hm-more{display:flex;flex-wrap:wrap;gap:6px 18px;margin:auto 0 0;padding-top:16px;font-size:14px}
.hm-more a:first-child{font-weight:700;color:var(--accent)}
.hm-shot{display:block;margin:2px 0 16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hm-shot img{display:block;width:100%;height:auto;transition:transform .3s}
.hm-shot:hover img{transform:scale(1.02)}
.hm-links{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--line)}
.hm-links li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.hm-links li:last-child{border-bottom:0;padding-bottom:0}
.hm-links li>a{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--ink);line-height:1.45}
.hm-links li>a:hover{text-decoration:none}
.hm-links li>a:hover b{color:var(--accent)}
.hm-links b{font-size:16px}
.hm-links span{font-size:13px;color:var(--muted)}
.hm-cls{display:flex;gap:4px;flex:none}
.hm-cls img{display:block;width:36px;height:36px;border-radius:4px}
.hm-lords{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto}
.hm-lord{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 10px 6px 6px;border:1px solid var(--line);border-left:4px solid var(--rc);border-radius:var(--radius);
  background:color-mix(in srgb,var(--rc) 7%,var(--surface));color:var(--ink)}
.hm-lord:hover{text-decoration:none;border-color:var(--rc)}
.hm-lord img{flex:none;width:48px;height:48px;border-radius:4px;object-fit:cover}
.hm-lord-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.hm-lord-t b{font-size:15px;white-space:nowrap}
.hm-lord-t span{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* 攻略：新手问答＋四条线逐章 */
.hm-gwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px}
.hm-faq{display:flex;flex-direction:column;padding:22px 24px;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line))}
.hm-faq ol{list-style:none;margin:4px 0 16px;padding:0}
.hm-faq li a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline;padding:9px 0;color:var(--ink);
  border-bottom:1px dashed color-mix(in srgb,var(--accent) 28%,var(--line))}
.hm-faq li:last-child a{border-bottom:0}
.hm-faq li b{font:700 20px/1 var(--font-head);color:var(--accent);text-align:right}
.hm-faq li span{font-size:15px}
.hm-faq li a:hover{text-decoration:none}
.hm-faq li a:hover span{color:var(--accent)}
.hm-faq-all{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);font-weight:700;letter-spacing:.06em}
.hm-faq-all:hover{text-decoration:none;filter:brightness(1.07)}
.hm-route{display:flex;flex-direction:column;gap:12px;min-width:0}
.hm-route>.hm-k{display:flex;justify-content:space-between;gap:10px;margin-bottom:-2px}
.hm-k-a{font-weight:600;letter-spacing:.04em}
.hm-faq h3{letter-spacing:.02em}
.hm-walks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hm-walk{position:relative;display:block;height:258px;overflow:hidden;border:1px solid var(--line);border-bottom:3px solid var(--rc);border-radius:var(--radius);
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 10%,var(--surface)),color-mix(in srgb,var(--rc) 26%,var(--surface)))}
.hm-walk img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 4%;transition:transform .35s}
.hm-walk:hover{text-decoration:none}
.hm-walk:hover img{transform:scale(1.04)}
.hm-walk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(transparent,var(--overlay) 70%)}
.hm-walk-t{position:absolute;z-index:1;left:12px;right:10px;bottom:10px;display:flex;flex-direction:column;line-height:1.4}
.hm-walk-t b{font:700 20px var(--font-head);letter-spacing:.08em;color:var(--on-overlay)}
.hm-walk-t small{font-size:12.5px;color:var(--on-overlay);opacity:.86;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hm-part{display:flex;align-items:center;gap:12px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.hm-part:hover{text-decoration:none;border-color:var(--line-strong)}
.hm-part:hover b{color:var(--accent)}
.hm-part img{flex:none;width:96px;height:58px;border-radius:3px;object-fit:cover}
.hm-part>span{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.hm-part b{font-size:15px}
.hm-part small{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-otherg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:13.5px}
.hm-otherg>span{margin-right:2px;font-size:12.5px;color:var(--muted);letter-spacing:.1em}
.hm-otherg a{padding:3px 11px;border-radius:12px;background:var(--surface-2);color:var(--ink-2)}
.hm-otherg a:hover{text-decoration:none;color:var(--accent)}

/* 其余栏目：带图的目录 */
.hm-mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
.hm-m{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.hm-m:hover{text-decoration:none}
.hm-m:hover b{color:var(--accent)}
.hm-m-img{flex:none;display:flex;align-items:center;width:104px;height:70px}
.hm-m-t{display:flex;flex-direction:column;min-width:0;line-height:1.5}
.hm-m-t b{font:700 17px var(--font-head);letter-spacing:.04em}
.hm-m-t span{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hm-pic{display:block;width:104px;height:70px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius)}
.hm-pic img{display:block;width:100%;height:100%;object-fit:cover}
.hm-stack{display:flex;align-items:center}
.hm-stack img{display:block;flex:none}
.hm-round img{width:40px;height:40px;margin-left:-19px;border-radius:50%;object-fit:cover;background:var(--surface-2);box-shadow:0 0 0 2px var(--surface)}
.hm-round img:first-child,.hm-tiles img:first-child{margin-left:0}
.hm-tiles img{width:34px;height:34px;margin-left:-11px;border-radius:7px;box-shadow:0 0 0 2px var(--surface)}
.hm-covers{position:relative;width:104px;height:70px}
.hm-covers img{position:absolute;width:82px;height:46px;object-fit:cover;border-radius:3px;border:1px solid var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.hm-covers img:nth-child(2){left:11px;top:12px}
.hm-covers img:nth-child(3){left:22px;top:24px}

/* 最近更新 */
.hm-recent ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.hm-recent li a{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);color:var(--ink);font-size:14.5px}
.hm-rsec{flex:none;min-width:48px;padding-top:2px;font-size:12px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.hm-next{animation:none}.hm-walk img,.hm-shot img,.hm-face img{transition:none}}

@media (max-width:1100px){
  .hm-hero{grid-template-columns:minmax(0,1fr) 330px}
  .hm-anna img{height:440px;margin-bottom:-50px}
  .hm-main{padding-left:36px}
  .hm-line{font-size:22px}
  .hm-tier{grid-column:1/-1}
  .hm-sim{grid-column:1/span 6;grid-row:auto}
  .hm-recruit{grid-column:7/span 6;grid-row:auto}
  .hm-lords{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-gwrap{grid-template-columns:1fr}
  .hm-mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  /* 手机首屏：安娜头像＋对话框一行，下面搜索、常问 */
  .hm-hero{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"kick kick" "anna say" "search search" "hot hot" "stats stats";
    align-items:end;column-gap:14px;min-height:0;margin:0 0 24px;padding:14px 14px 20px;border-radius:6px}
  .hm-main{display:contents}
  .hm-bg{width:100%;height:150px;border-radius:6px 6px 0 0;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
  .hm-kick{grid-area:kick;margin:0 0 20px;font-size:11.5px;letter-spacing:.12em}
  .hm-anna{grid-area:anna;align-self:start;justify-self:start;margin-top:4px;overflow:visible}
  .hm-anna img{width:76px;height:76px;margin:0;border-radius:50%;object-fit:cover;filter:none;
    background:color-mix(in srgb,var(--gold) 26%,var(--surface));box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--gold) 70%,transparent)}
  .hm-say{grid-area:say;margin:0;padding:20px 16px 16px;border-radius:12px}
  .hm-say::before{right:auto;left:-12px;top:28px;border-width:9px 12px 9px 0;border-color:transparent var(--line-strong) transparent transparent}
  .hm-say::after{right:auto;left:-10px;top:29px;border-width:8px 11px 8px 0;border-color:transparent var(--surface) transparent transparent}
  .hm-plate{top:-13px;left:14px;font-size:13.5px;padding:1px 11px 2px}
  .hm-line{font-size:16.5px;line-height:1.6;min-height:4.8em}
  .hm-next{right:12px;bottom:8px;border-width:6px 5px 0}
  .hm-search{grid-area:search;margin-top:16px;height:54px;padding-left:14px}
  .hm-search input{font-size:16px}
  .hm-go{height:42px;padding:0 16px;font-size:15px}
  .hm-hot{grid-area:hot;gap:7px;margin-top:14px}
  .hm-hot-k{flex-basis:100%;margin:0;font-size:12px}
  .hm-q{height:34px;padding-right:12px;font-size:13.5px}
  .hm-ico-ui img{width:17px;height:17px}
  .hm-stats{grid-area:stats;margin-top:14px;font-size:11.5px}
  .hm-sec{margin-bottom:30px}
  .hm-h h2{font-size:21px}
  .hm-h p{font-size:13px}
  .hm-bento{grid-template-columns:1fr;gap:14px}
  .hm-tier,.hm-sim,.hm-recruit{grid-column:1;grid-row:auto}
  .hm-card,.hm-faq{padding:16px 16px 16px}
  .hm-card h3,.hm-faq h3{font-size:22px}
  .hm-faces{gap:8px 6px}
  .hm-face{width:58px;font-size:12px}
  .hm-face img,.hm-face i{width:58px;height:58px}
  .hm-face-l{width:74px}
  .hm-face-l img,.hm-face-l i{width:74px;height:74px}
  .hm-trow{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .hm-trow .tier{min-width:34px;height:34px;font-size:14px}
  .hm-cls img{width:30px;height:30px}
  .hm-lords{gap:8px}
  .hm-walks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-walk{height:200px}
  .hm-parts{grid-template-columns:1fr}
  .hm-mgrid{grid-template-columns:1fr}
  .hm-m{padding:13px 0}
  .hm-m-img,.hm-pic,.hm-covers{width:92px;height:62px}
  .hm-recent ul{grid-template-columns:1fr}
}
@media (max-width:420px){
  .hm-links li{flex-wrap:wrap}
  .hm-cls{flex-basis:100%}
  .hm-lord{padding:5px 8px 5px 5px;gap:8px}
  .hm-lord img{width:40px;height:40px}
}
/* 模拟器截图深浅各一张，跟着主题换 */
.hm-shot .hm-shot-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hm-shot .hm-shot-light{display:none}:root:not([data-theme="light"]) .hm-shot .hm-shot-dark{display:block}}
:root[data-theme="dark"] .hm-shot .hm-shot-light{display:none}
:root[data-theme="dark"] .hm-shot .hm-shot-dark{display:block}

/* 画廊精选：左一张大图带看点，右边按原图比例排 */
.hm-h-more{margin-left:auto;font-size:14px;font-weight:600}
.hm-art-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px;align-items:start}
.hm-art-f{margin:0}
.hm-art-f .gl-z{max-height:560px;aspect-ratio:var(--ar)}
.hm-art-f figcaption{display:flex;flex-direction:column;gap:2px;padding:10px 2px 0;line-height:1.5}
.hm-art-f figcaption b{font:700 18px var(--font-head);letter-spacing:.04em}
.hm-art-f figcaption span{font-size:13px;color:var(--muted)}
.hm-art-f figcaption span a{color:var(--accent-2)}
.hm-art-f figcaption p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.hm-art-j{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:12px 10px}
.hm-art-j .gl-i{display:grid;grid-template-rows:minmax(0,1fr) auto}
.hm-art-j .gl-z{aspect-ratio:3/4}
.hm-art-j .gl-z img{object-position:50% 22%}
.hm-art-j .gl-i.wide{grid-column:span 2}
.hm-art-j .gl-i.wide .gl-z{aspect-ratio:auto;height:100%}
.hm-art-j .gl-i.wide .gl-z img{object-position:50% 40%}
.hm-art-j .gl-cut .gl-z img{object-position:50% 100%}
@media (max-width:860px){
  .hm-art-g{grid-template-columns:1fr;gap:14px}
  .hm-art-f .gl-z{max-height:380px;margin:0 auto}
  .hm-art-j .gl-i.hm-odd{display:none}
  .hm-art-j{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}
  .hm-h-more{margin-left:0;flex-basis:100%;font-size:13.5px}
}
/* home:end */

/* ==== 站标 BEGIN（tools/brand/brand.css → make_brand.py 写进 site.css；改这里再跑生成器，别直接改 site.css 这一段） ==== */
/* 徽记四色：浅色用主角线原色，深色提亮（紫色原色在深底上太暗）。字标里的金色部件在浅底上用深一档的金，免得发虚。
   --bm-shield 是旧方案纹章盾的底色：浅色页面用深墨蓝，深色页面用亮一档的蓝灰（不然盾和页面糊在一起）。 */
:root{--bm-red:#b8452f;--bm-blue:#1f6f9f;--bm-gold:#c89b3c;--bm-violet:#6a4c93;--bm-gold-ink:#a8781f;--bm-shield:#1d2433}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bm-red:#e0694f;--bm-blue:#5fb0e0;--bm-gold:#d8b25a;--bm-violet:#a68ad8;--bm-gold-ink:#d8b25a;--bm-shield:#34425e}}
:root[data-theme="dark"]{--bm-red:#e0694f;--bm-blue:#5fb0e0;--bm-gold:#d8b25a;--bm-violet:#a68ad8;--bm-gold-ink:#d8b25a;--bm-shield:#34425e}
/* 页头：徽记｜站名字标｜两行小字「火焰纹章 / 万缕千丝攻略」 */
.top .brand{display:flex;align-items:center;gap:0;color:var(--ink);flex:none}
.top .brand:hover{text-decoration:none}
.brand-em{display:block;height:38px;width:auto;flex:none;margin-right:7px}
.brand-wm{display:block;height:25px;width:auto;flex:none}
.brand-sub{display:flex;flex-direction:column;justify-content:center;margin-left:10px;padding-left:10px;border-left:1px solid var(--line-strong);
  font:500 10.5px/1.45 var(--font);letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.brand-sub b{font-weight:500;color:var(--ink-2)}
.top .brand:hover .brand-sub b{color:var(--accent)}
/* 顶栏放不下就换两行（10-16 Teemo：1366 宽首页导航最后一项被挤掉；栏目还会加「地图」「任务」）：
   桌面默认一行，栏目收紧、搜索框 170 宽；窗口窄到一行放不下时（断点由 layout.py 按栏目字数算出，写在每页 <style id="nav-fit">），
   第一行站标＋搜索＋深浅切换，第二行整行放栏目。手机（≤860）沿用原来的两行布局。 */
@media (min-width:861px){.top-in{gap:14px}.top .nav a{padding:6px 7px}.top .nav-grp{padding:0 4px}.top .search{width:170px}}
@media (max-width:860px){
  .brand-em{height:32px;margin-right:6px}
  .brand-wm{height:21px}
  .brand-sub{margin-left:8px;padding-left:8px;font-size:9.5px;letter-spacing:.08em;line-height:1.4}
}
@media (max-width:360px){.brand-sub{display:none}}
/* 页脚站名 */
.foot-brand{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.foot-brand .brand-em{height:26px;margin:0}
.foot-brand .brand-wm{height:17px}
.foot-brand b{font-weight:600;color:var(--ink-2);font-size:12.5px;letter-spacing:.06em}
/* 万缕千丝·安娜手帖（10-17 定名）：安娜头像｜两行字标（上小字「万缕千丝」、下大字「安娜手帖」） */
.brand-em.is-img{height:46px;width:46px;object-fit:contain;margin-right:9px}
.brand-stack{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;flex:none}
.brand-pre{display:block;height:12px;width:auto}
.brand-stack .brand-wm{height:22px}
.top .brand:hover .brand-pre path{fill:var(--accent);stroke:var(--accent)}
@media (max-width:860px){.brand-em.is-img{height:38px;width:38px;margin-right:7px}.brand-stack{gap:4px}.brand-pre{height:10.4px}.brand-stack .brand-wm{height:19px}}
.foot-brand .brand-em.is-img{height:30px;width:30px}
/* ==== 站标 END ==== */

/* 正文人名头像放大（10-16：「人物头像通常太小看不清，应该大一些好分辨」） */
.lk-char .lk-av{width:28px !important;height:28px !important;border-radius:50%;vertical-align:-8px;margin-right:4px;object-fit:cover}
td .lk-char .lk-av,th .lk-char .lk-av{width:34px !important;height:34px !important;vertical-align:-11px}

/* 开发者模式（10-16） */
.devbar{position:sticky;top:0;z-index:60;padding:6px 16px;font-size:13px;background:#3d2c0a;color:#f5d48a;text-align:center}
.devbar a{color:#fff;margin-left:10px}
.devlink{position:fixed;right:14px;bottom:14px;z-index:60;padding:6px 12px;border-radius:16px;font-size:12.5px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow)}
.devlink:hover{text-decoration:none;opacity:.9}

/* 滚动条跟主题走（10-16：「页面内的这种白色的 scroll bar 会让我感觉很出戏」） */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* 攻略首页：一条条攻略按阶段分组（10-16） */
.gd-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gd-nav a{padding:4px 12px;border:1px solid var(--line-strong);border-radius:16px;font-size:13.5px;color:var(--ink-2)}
.gd-nav a:hover{text-decoration:none;border-color:var(--accent);color:var(--ink)}
.gd-grp{margin:26px 0 8px}
.gd-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.gd-h h2{font-size:20px;margin:0}
.gd-h p{margin:0;font-size:13px;color:var(--muted)}
.gd-more{margin-left:auto;font-size:13.5px;font-weight:600}

/* 游戏内真实图标（img.ic-real）：固定为字号大小，不吃外层「格子里的图片撑满」规则，不套线描图标的遮罩（10-16：支援配对爱心太大） */
img.ic.ic-real{width:1.15em !important;height:1.15em !important;max-width:none;object-fit:contain;-webkit-mask:none !important;mask:none !important;background:none !important;vertical-align:-.2em;border:0;border-radius:0;box-shadow:none}
.who-face{width:40px;height:40px;border-radius:6px;object-fit:cover;object-position:50% 15%;margin-right:6px;vertical-align:middle;border:1px solid var(--line)}

/* 链接分色（10-16：「链接最好不要都用蓝色，不同的类别链接可以是不同的颜色」）：人物 陶土红、职业 青绿、物品 金棕、加护 紫、章节 石板灰；普通页面链接保持蓝 */
a.lk-char{color:var(--lk-char)}
a.lk-class{color:var(--lk-class)}
a.lk-item,a.itd-inline{color:var(--lk-item)}
a.lk-god{color:var(--lk-god)}
a.lk-chap{color:var(--lk-chap);text-decoration:underline dotted;text-underline-offset:3px}
a.lk-char,a.lk-class,a.lk-item,a.lk-god{font-weight:600}

/* mapquest:start — 世界地图 .mp-* ／ 任务 .qs-*（10-16 ui-mapquest · Claude Opus 5.5；源文件 tools/mq/map.css＋quests.css，改完跑 tools/mq/splice.py） */
/* 带 display 的块，hidden 属性要能真藏住 */
.mp-new[hidden],.mp-rbar[hidden],.mp-gb[hidden],.mp-sug[hidden],.mp-card[hidden],.mp-drill[hidden],.qs-chs[hidden],.qs-urg-b[hidden],.qs-last-b[hidden],.qs-none[hidden]{display:none !important}
/* 地图针（.ic 的 CSS mask，颜色跟字走） */
.mp-i-pin{--im:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 .8a5.4 5.4 0 0 0-5.4 5.4C2.6 10 8 15.4 8 15.4s5.4-5.4 5.4-9.2A5.4 5.4 0 0 0 8 .8zm0 3.2a2.2 2.2 0 1 1 0 4.4A2.2 2.2 0 0 1 8 4z'/%3E%3C/svg%3E")}
/* 别的页面链过来的「在地图上看」 */
.mp-link{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--accent-2) 45%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--accent-2) 8%,var(--surface));color:var(--accent-2);font-size:13.5px;font-weight:600;white-space:nowrap}
.mp-link:hover{text-decoration:none;border-color:var(--accent-2)}
.mp-link b{font-weight:400;opacity:.8}
.mp-link-row{display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 0 2px}
/* 逐章攻略页末尾「本章提到的地点」 */
.mp-wk-box{margin:28px 0 8px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.mp-wk-box h2{font-size:17px;margin:0 0 10px}
.mp-wk-l{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mp-wk{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font-size:13.5px}
.mp-wk:hover{text-decoration:none;border-color:var(--accent-2);color:var(--accent-2)}
.mp-wk .ic{color:var(--accent-2)}

/* ---------- 世界地图 /map/ v2：左面板＋地图＋详情卡片；手机是满屏地图＋底部抽屉 ---------- */
.mp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 24px;flex-wrap:wrap;margin:2px 0 12px}
.mp-head h1{font-size:28px;margin:0 0 2px}
.mp-head .lead{margin:0;font-size:15px}
.mp-stat{display:flex;gap:16px;margin:0;color:var(--muted);font-size:13px;white-space:nowrap}
.mp-stat b{font:700 19px/1 var(--font-head);color:var(--ink);margin-right:3px}
.mp-app{position:relative;display:grid;grid-template-columns:316px minmax(0,1fr);height:clamp(520px,calc(100vh - 236px),960px);border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
/* 类别代表色（图标底色），深浅两色都用 tokens */
.mp-c-town{--cc:var(--accent)}.mp-c-gate{--cc:var(--gold)}.mp-c-post{--cc:var(--accent-2)}.mp-c-temple{--cc:var(--r-leda)}.mp-c-base{--cc:var(--st-def)}
.mp-c-dun{--cc:var(--st-mag)}.mp-c-feast{--cc:var(--st-str)}.mp-c-mount{--cc:var(--st-spd)}.mp-c-ore{--cc:var(--st-res)}.mp-c-fish{--cc:var(--st-spd)}
.mp-c-veg{--cc:var(--good)}.mp-c-item{--cc:var(--st-lck)}.mp-c-field{--cc:var(--st-dex)}.mp-c-city{--cc:var(--accent-2)}.mp-c-fac{--cc:var(--gold)}
.mp-cb{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--cc,var(--muted));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-overlay) 55%,transparent)}
.mp-cb .ic{--icc:var(--on-overlay);font-size:12px}

/* 左面板 */
.mp-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line);background:var(--surface)}
.mp-handle{display:none}
.mp-find{position:relative;padding:12px 12px 8px}
.mp-q{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:20px;background:var(--bg);color:var(--muted);cursor:text}
.mp-q:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-2) 22%,transparent)}
.mp-q input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;color:var(--ink);font:inherit;font-size:14px}
.mp-sug{position:absolute;left:12px;right:12px;top:calc(100% - 4px);z-index:40;max-height:min(440px,60vh);overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow)}
.mp-sug-h{padding:6px 12px 2px;font-size:11.5px;color:var(--muted);letter-spacing:.08em}
.mp-sug button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.mp-sug button:hover,.mp-sug button.on{background:var(--surface-2)}
.mp-sug button small{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.mp-sug .mp-av{width:26px;height:26px}
.mp-sug-none{padding:10px 12px;color:var(--muted);font-size:13.5px}
/* 10-17 搜索模块：下拉里每条前面的类别（买／材料／人物／委托／坐骑／地点） */
.mp-sug-k{flex:none;min-width:2.9em;padding:0 5px;border:1px solid currentColor;border-radius:4px;font-size:12px;line-height:18px;text-align:center;color:var(--muted)}
.mp-sug-k-buy{color:var(--lk-item)}.mp-sug-k-gat{color:var(--good)}.mp-sug-k-rc{color:var(--lk-char)}.mp-sug-k-qs{color:var(--lk-chap)}.mp-sug-k-mt{color:var(--gold)}.mp-sug-k-pl{color:var(--accent-2)}
.mp-pscroll{flex:1;min-height:0;overflow:auto;padding:0 12px 14px;overscroll-behavior:contain}
.mp-blk{padding:10px 0 4px;border-top:1px solid var(--line)}
.mp-res:not(:empty){padding-bottom:10px}
.mp-blk-h{display:flex;align-items:center;gap:6px;margin:6px 0 7px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.mp-blk-h small{font-weight:400;color:var(--muted)}
.mp-blk-h .ic{font-size:14px}
.mp-cat-all{margin-left:auto;display:flex;gap:2px}
.mp-cat-all button{border:0;background:none;padding:2px 6px;color:var(--accent-2);font:inherit;font-size:12px;font-weight:500;cursor:pointer;border-radius:4px}
.mp-cat-all button:hover{background:var(--surface-2)}
.mp-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
.mp-lords{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;flex:1 1 100%}
.mp-lord{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 2px 3px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:11.5px;line-height:1.2;cursor:pointer}
.mp-lord span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-lord img{width:26px;height:26px;border-radius:4px;object-fit:cover;object-position:50% 18%}
.mp-lord[aria-pressed="true"]{border-color:var(--rc);box-shadow:inset 0 0 0 1px var(--rc);color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--rc) 9%,var(--surface))}
.mp-part{display:inline-flex;border:1px solid var(--line-strong);border-radius:15px;overflow:hidden}
.mp-pt{height:28px;padding:0 11px;border:0;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.mp-pt+.mp-pt{border-left:1px solid var(--line-strong)}
.mp-pt[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:600}
/* 类别开关（显示数量；关掉的变淡） */
.mp-cats{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mp-cat{display:flex;align-items:center;gap:7px;min-width:0;height:34px;padding:0 8px 0 5px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.mp-cat:hover{border-color:var(--line-strong)}
.mp-cat-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-cat-c{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.mp-cat-c i{font-style:normal;color:var(--good);font-weight:600}
.mp-cat[aria-pressed="false"]{background:transparent;color:var(--muted);border-style:dashed}
.mp-cat[aria-pressed="false"] .mp-cb{filter:grayscale(1);opacity:.45}
.mp-prog{margin:10px 0 4px}
.mp-prog-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-2)}
.mp-prog-t b{color:var(--good);font-size:14px}
.mp-prog-t label{display:inline-flex;align-items:center;gap:4px;color:var(--muted);cursor:pointer}
.mp-prog-b{height:6px;margin-top:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.mp-prog-b i{display:block;height:100%;background:var(--good);border-radius:3px}
.mp-quick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.mp-quick-box:empty{display:none}
.mp-qk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer}
.mp-qk:hover{border-color:var(--ink-2)}
.mp-qk small{color:var(--muted);font-size:11.5px}
.mp-qk-t{padding-left:10px}
.mp-av{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 15%;flex:none;background:var(--surface-2)}
.mp-ii{width:22px;height:22px;flex:none;object-fit:contain;border-radius:4px}
.mp-ig{display:inline-grid;place-items:center;background:var(--itm-tile)}
.mp-ig .ic{--icc:var(--itm-glyph);font-size:13px}
.mp-it{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--ink);font-weight:600}
.mp-it span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-it:hover{color:var(--lk-item,var(--accent-2));text-decoration:none}
/* 搜索结果（面板里） */
.mp-rh{display:flex;align-items:center;gap:10px;margin-top:2px}
.mp-rh>div{flex:1;min-width:0}
.mp-rh .mp-ii{width:40px;height:40px;border-radius:6px}
.mp-rh .mp-ig .ic{font-size:20px}
.mp-rh .mp-av{width:42px;height:42px;border-radius:8px}
.mp-rh h2{margin:0;font-size:18px}
.mp-rh h2 a{color:var(--ink)}
.mp-rh p{margin:1px 0 0;font-size:12.5px;color:var(--muted)}
.mp-sum{display:flex;gap:6px;margin:10px 0 2px}
.mp-sum span{flex:1;padding:5px 9px;border-radius:6px;background:var(--surface-2);font-size:12px;color:var(--muted)}
.mp-sum b{display:block;font:700 17px/1.2 var(--font-head);color:var(--ink)}
.mp-rl{list-style:none;margin:2px 0 6px;padding:0}
.mp-rl li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.mp-rl li:last-child{border-bottom:0}
.mp-go{display:flex;align-items:center;gap:8px;flex:1;min-width:0;border:0;background:none;padding:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mp-go>span{display:flex;flex-direction:column;min-width:0}
.mp-go b{font-size:13.5px}
.mp-go small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-go:hover b{color:var(--accent-2)}
.mp-pr{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;font-size:13px}
.mp-pr small{color:var(--muted);font-weight:400}
.mp-pr-l{font-weight:500;color:var(--ink-2)}
.mp-rl li.is-lk{opacity:.6}
.mp-rg{margin-top:8px;border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.mp-rg-h{display:flex;align-items:baseline;gap:8px}
.mp-rg-h .mp-go{flex:none;font:700 14px var(--font)}
.mp-rg-h em{margin-left:auto;font-style:normal;font-weight:700;font-size:12.5px;color:var(--accent)}
.mp-rg-b{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:5px}
.mp-rg-b .mp-it{font-weight:500;font-size:13px}
.mp-rg-b .mp-pr{color:var(--muted);font-size:12px;margin-left:2px;font-weight:400}
.mp-tog{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.mp-none{margin:8px 0 0;padding:10px;border:1px dashed var(--line-strong);border-radius:6px;color:var(--muted);font-size:13px}
.mp-more-n{padding:6px 10px;font-size:12.5px;color:var(--muted)}
.mp-more-n button{border:0;background:none;padding:0;color:var(--accent-2);font:inherit;cursor:pointer}
.mp-x{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.mp-x:hover{background:var(--surface-2);color:var(--ink)}

/* 地图 */
.mp-mapwrap{position:relative;min-width:0;min-height:0;overflow:hidden}
.mp-view{position:absolute;inset:0;overflow:hidden;background:color-mix(in srgb,var(--accent-2) 22%,var(--surface-2));touch-action:none;cursor:grab;outline:0;user-select:none;-webkit-user-select:none}
.mp-view.is-drag{cursor:grabbing}
.mp-view:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-2)}
.mp-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.mp-tl{position:absolute;transform-origin:0 0}
.mp-tile{position:absolute;max-width:none;opacity:0;transition:opacity .15s;pointer-events:none;-webkit-user-drag:none}
.mp-tile.on{opacity:1}
.mp-tl-hd{opacity:0;transition:opacity .35s;pointer-events:none}
.mp-tl-hd.on{opacity:1}
.mp-whole{display:block;max-width:none;pointer-events:none}
.mp-pins{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* 地点针（第三版 10-17）：图标按底图上烤着的同款图标原大画（--w 大陆图坐标里的边长 × --k 缩放），正好盖住、任何缩放都清楚；
   城镇、关卡缩远时至少 16px；没有游戏图标的点是类别色小圆 */
.mp-pin{--sz:calc(var(--w,27) * var(--k,.5) * 1px);position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;color:var(--on-overlay);font:500 12.5px/1.2 var(--font)}
.mp-pin.mp-t-town,.mp-pin.mp-t-gate,.mp-pin.mp-t-city,.mp-pin.mp-t-fac{--sz:max(16px,calc(var(--w,27) * var(--k,.5) * 1px))}
.mp-pin.is-hit,.mp-pin.is-sel,.mp-pin.is-plan{--sz:max(24px,calc(var(--w,27) * var(--k,.5) * 1px))}
.mp-pin:not(.has-ic){--sz:20px}
.mp-pin::before{content:"";position:absolute;left:calc(max(var(--sz),26px) / -2);top:calc(max(var(--sz),26px) / -2);width:max(var(--sz),26px);height:max(var(--sz),26px);border-radius:50%}
.mp-pd{position:absolute;left:calc(var(--sz) / -2);top:calc(var(--sz) / -2);width:var(--sz);height:var(--sz);display:grid;place-items:center;border-radius:50%;background:var(--cc,var(--muted));border:2px solid var(--on-overlay);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.45);transition:transform .12s}
.mp-pd .ic{--icc:var(--on-overlay);font-size:11px}
.mp-pd b{font-size:12px;line-height:1;color:var(--on-overlay)}
.mp-pd img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.mp-pnb[hidden]{display:none}
.mp-pin.has-ic .mp-pd{background:none;border:0;box-shadow:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.mp-pin.is-cap{z-index:6}
.mp-pin.is-cap .mp-pd img{opacity:0}   /* 帝都：底图上的金色城徽本来就大而清楚，不另画 */
.mp-pin.has-ic.is-hit .mp-pd{box-shadow:0 0 0 3px var(--cc),0 0 0 9px color-mix(in srgb,var(--cc) 35%,transparent)}
/* 选中：外圈呼吸光环（减少动态时不动） */
.mp-pin.is-sel::after{content:"";position:absolute;left:calc(var(--sz) * -.8);top:calc(var(--sz) * -.8);width:calc(var(--sz) * 1.6);height:calc(var(--sz) * 1.6);border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 90%,transparent),0 0 16px 5px color-mix(in srgb,var(--gold) 45%,transparent),inset 0 0 12px 2px color-mix(in srgb,var(--gold) 30%,transparent);pointer-events:none;z-index:-1;animation:mp-breathe 2.6s ease-in-out infinite}
@keyframes mp-breathe{0%,100%{transform:scale(.94);opacity:1}50%{transform:scale(1.14);opacity:.45}}
.mp-paused .mp-pin.is-sel::after{animation-play-state:paused}
/* 名声刚够：关卡亮一下 */
.mp-pin.just-open .mp-pd{animation:mp-unlock 1.2s ease-out}
@keyframes mp-unlock{0%{filter:grayscale(1) brightness(.8)}35%{filter:brightness(1.7) drop-shadow(0 0 10px var(--gold))}100%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--gold) 80%,transparent))}}
@media (prefers-reduced-motion:reduce){.mp-pin.is-sel::after,.mp-pin.just-open .mp-pd{animation:none}}
/* 矢量地名牌（canvas）、海面水光（WebGL）：屏幕坐标，夹在底图和针之间 */
.mp-sea,.mp-lbls{position:absolute;left:0;top:0;pointer-events:none}
.mp-sea[hidden]{display:none}
/* 边缘的云：世界坐标，缩得比较小时才淡淡出现，极慢地左右漂 */
.mp-cloud{position:absolute;height:auto;max-width:none;pointer-events:none;opacity:calc(var(--cloud,0) * .85);animation:mp-drift 100s ease-in-out infinite alternate;-webkit-user-drag:none}
@keyframes mp-drift{from{transform:translateX(-110px)}to{transform:translateX(110px)}}
.mp-paused .mp-cloud{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mp-cloud{animation:none}}
/* 已标记：图标右下角一个绿勾，针淡一点 */
.mp-pin.is-done .mp-pd::after{content:"✓";position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:var(--good);color:var(--accent-ink);font:700 10px/1 var(--font);box-shadow:0 0 0 1.5px var(--on-overlay)}
.mp-cbi{width:24px;height:24px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.mp-tag .mp-cbi{width:18px;height:18px}
.mp-pin:hover .mp-pd,.mp-pin:focus-visible .mp-pd{transform:scale(1.12)}
.mp-pin.is-src .mp-pd{border-style:dashed}
.mp-pin.is-done:not(.is-sel):not(.is-hit){opacity:.7}
/* 放大时我们的图标和底图上印的同款图标一样大、正好盖住，始终是清楚的矢量级小图（不再把针变透明） */
.mp-pin.has-ic:hover .mp-pd{transform:scale(1.12)}
.mp-pl{position:absolute;left:calc(var(--sz) / 2 + 4px);top:-11px;display:none;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:4px;background:var(--overlay);color:var(--on-overlay);font-size:12.5px;line-height:22px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.mp-pl em{font-style:normal;font-weight:700;color:color-mix(in srgb,var(--gold) 75%,var(--on-overlay))}
.mp-pin.lbl .mp-pl,.mp-pin:hover .mp-pl,.mp-pin:focus-visible .mp-pl{display:inline-flex}
.mp-pin.lbl-l .mp-pl{left:auto;right:calc(var(--sz) / 2 + 4px)}
.mp-pin:hover,.mp-pin:focus-visible,.mp-pin.is-sel{z-index:5}
.mp-pin.is-hit{z-index:3}
/* 名声（10-17 晚 Teemo：「点击名声以后的解锁区域节点的显示更明显一点」）：选了名声（.mp-rn-on）后
   能到＝亮金圈＋浅金底；这一级新开＝青圈＋向外扩散的脉冲；到不了＝图标变灰压暗、底下垫深色圆片盖住底图上烤着的彩色图标。不压陆地。
   圈的颜色是固定值（画在地图上，深浅主题底图一样）。 */
.mp-rn-on .mp-pin.is-in:not(.is-sel):not(.is-hit):not(.is-cap)::before{--rs:max(calc(var(--sz) * 1.5),22px);left:calc(var(--rs) / -2);top:calc(var(--rs) / -2);width:var(--rs);height:var(--rs);background:radial-gradient(closest-side,rgba(255,248,214,.62),rgba(255,226,120,.3) 72%,rgba(255,220,100,0));box-shadow:0 0 0 2.5px #ffd447,0 0 0 4px rgba(70,46,0,.55),0 0 12px 4px rgba(255,200,60,.6)}
.mp-rn-on .mp-pin.is-in:not(.is-sel):not(.is-hit) .mp-pd{filter:drop-shadow(0 0 1px #fff6d6) drop-shadow(0 1px 2px rgba(0,0,0,.4)) brightness(1.08) saturate(1.1)}
.mp-rn-on .mp-pin.is-new:not(.is-sel):not(.is-hit):not(.is-cap)::before{background:radial-gradient(closest-side,rgba(226,255,255,.66),rgba(64,232,255,.3) 72%,rgba(64,232,255,0));box-shadow:0 0 0 3px #3fe9ff,0 0 0 4.5px rgba(0,36,52,.6),0 0 14px 5px rgba(50,225,255,.7)}
.mp-rn-on .mp-pin.is-new:not(.is-sel):not(.is-hit)::after{content:"";position:absolute;--rs:max(calc(var(--sz) * 1.5),22px);left:calc(var(--rs) / -2);top:calc(var(--rs) / -2);width:var(--rs);height:var(--rs);border-radius:50%;border:2.5px solid #3fe9ff;box-sizing:border-box;pointer-events:none;animation:mp-ping 1.9s ease-out infinite}
@keyframes mp-ping{0%{transform:scale(.95);opacity:.95}100%{transform:scale(2.2);opacity:0}}
.mp-paused .mp-pin.is-new::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mp-rn-on .mp-pin.is-new::after{animation:none;transform:scale(1.35);opacity:.6}}
.mp-rn-on .mp-pin.is-out:not(.is-sel):not(.is-hit)::before{--rs:max(calc(var(--sz) * 1.08),12px);left:calc(var(--rs) / -2);top:calc(var(--rs) / -2);width:var(--rs);height:var(--rs);background:rgba(26,28,32,.66);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.mp-rn-on .mp-pin.is-out:not(.is-sel):not(.is-hit) .mp-pd{filter:grayscale(1) brightness(.6) contrast(.85)}
.mp-rn-on .mp-pin.is-out:not(.is-sel):not(.is-hit):not(.has-ic) .mp-pd{background:#5b5f66;border-color:#9a9ea6}
.mp-rn-on .mp-pin.is-out:not(.is-sel):not(.is-hit) .mp-gb{opacity:.75}
/* 关卡：针下一块小牌。够了＝金色「名声N ✓」；不够＝灰底「🔒名声N」 */
.mp-pin.mp-t-gate{z-index:2}
.mp-gb{position:absolute;left:0;top:calc(var(--sz) / 2 + 1px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:2px;height:16px;padding:0 5px;border-radius:8px;background:color-mix(in srgb,var(--overlay) 90%,var(--muted));color:var(--on-overlay);font:700 10.5px/16px var(--font);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.5);pointer-events:none;z-index:1}
.mp-gb .ic{font-size:9.5px;--icc:currentColor}
.mp-gb b{margin-left:1px;font-size:10px}
.mp-gb.b-open{background:var(--gold);color:var(--overlay);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.5)}
.mp-z-far .mp-gb{height:14px;line-height:14px;padding:0 4px;font-size:9.5px}
.mp-z-far .mp-gb .ic{font-size:8.5px}
.mp-pin.is-lock .mp-pd{filter:grayscale(1) brightness(.85) drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.mp-pin.is-lock:hover .mp-pd{filter:grayscale(.4) drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.mp-pin.is-lock .mp-pl{background:color-mix(in srgb,var(--overlay) 88%,var(--muted))}
.mp-pin.is-open.mp-t-gate .mp-pd{filter:drop-shadow(0 0 1.5px rgba(255,246,214,.95)) drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 85%,transparent))}
.mp-pl-t{color:color-mix(in srgb,var(--on-overlay) 78%,transparent);font-weight:500}
.mp-pin:not(:hover):not(:focus-visible):not(.is-sel) .mp-pl-t{display:none}
/* 搜索命中：大一圈，标签常显；其他针淡下去 */
.mp-hl .mp-pin:not(.is-hit):not(.is-sel){opacity:.35}
.mp-hl .mp-cl{opacity:.35}
.mp-pin.is-hit:not(.has-ic) .mp-pd{border-width:3px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 7px color-mix(in srgb,var(--cc) 40%,transparent)}
.mp-pin.is-hit.is-buy{--cc:var(--accent)}
.mp-pin.is-hit.is-gather{--cc:var(--good)}
.mp-pin.is-hit .mp-pl{left:calc(var(--sz) / 2 + 8px);top:-12px;height:24px;line-height:24px;font-size:13px}
.mp-pin.is-hit.lbl-l .mp-pl{left:auto;right:calc(var(--sz) / 2 + 8px)}
.mp-pin.is-sel:not(.has-ic) .mp-pd{border-width:3px}
.mp-pin.is-sel .mp-pl{left:calc(var(--sz) * .8 + 6px)}
.mp-pin.is-sel.lbl-l .mp-pl{left:auto;right:calc(var(--sz) * .8 + 6px)}
/* 送礼模式：有「最爱」的地方＝金色大星标；只有「喜欢」的＝银色小标 */
.mp-pin.is-love .mp-pd{--cc:var(--gold)}
.mp-pin.is-love.is-hit .mp-pd{box-shadow:0 0 0 3px var(--gold),0 0 0 9px color-mix(in srgb,var(--gold) 45%,transparent)}
.mp-pin.is-love .mp-pd::before{content:"★";position:absolute;right:-8px;top:-9px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--overlay);font:700 12px/1 var(--font);box-shadow:0 0 0 1.5px var(--on-overlay)}
.mp-pin.is-like .mp-pd{--cc:var(--muted)}
.mp-pin.is-like.is-hit .mp-pd{transform:scale(.82);box-shadow:0 0 0 2px var(--on-overlay),0 0 0 5px color-mix(in srgb,var(--muted) 50%,transparent)}
.mp-pin.is-like .mp-pd::before{content:"☆";position:absolute;right:-7px;top:-8px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font:700 10px/1 var(--font);box-shadow:0 0 0 1.5px var(--on-overlay)}
.mp-pl .mp-lv-love{color:color-mix(in srgb,var(--gold) 85%,var(--on-overlay))}
.mp-pl .mp-lv-like{color:color-mix(in srgb,var(--on-overlay) 75%,transparent);font-weight:500}
.mp-lgd{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 2px;font-size:12px;color:var(--ink-2)}
.mp-lgd span{display:inline-flex;align-items:center;gap:4px}
.mp-lgd b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px}
.mp-lgd .lv{background:var(--gold);color:var(--overlay)}
.mp-lgd .lk{background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mp-gf{margin:6px 0 2px}
.mp-gf-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2);margin:6px 0 4px}
.mp-gf-h b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px}
.mp-gf-l{display:flex;flex-wrap:wrap;gap:4px 12px}
.mp-gf-l .mp-it{font-weight:500;font-size:13px}
.mp-gf-l .mp-pr{color:var(--muted);font-size:12px;font-weight:400;margin-left:2px}
.mp-cap-t{position:absolute;left:50%;top:12px;z-index:2;transform:translateX(-50%);padding:6px 14px;border-radius:16px;background:var(--overlay);color:var(--on-overlay);font-size:13.5px;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.mp-cap-t small{font-weight:400;opacity:.8;margin-left:6px}
/* 聚合圈：缩远时同一片的节点合成一个数字圈，点开放大 */
.mp-cl{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer}
.mp-cl b{position:absolute;left:-14px;top:-14px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--overlay);color:var(--on-overlay);font:700 12.5px/1 var(--font);font-variant-numeric:tabular-nums;border:2.5px solid var(--cc,var(--on-overlay));box-shadow:0 2px 5px rgba(0,0,0,.45);transition:transform .12s}
.mp-cl.big b{left:-18px;top:-18px;width:36px;height:36px;font-size:13.5px}
.mp-cl:hover b{transform:scale(1.12)}
/* 地图上的按钮 */
.mp-maps{position:absolute;left:12px;top:12px;z-index:2;display:flex;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.mp-mt{height:30px;padding:0 13px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}
.mp-mt[aria-selected="true"]{background:var(--ink);color:var(--bg);font-weight:600}
.mp-zoom{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.mp-zoom button{width:34px;height:34px;border:0;background:none;color:var(--ink);font:500 19px/1 var(--font);cursor:pointer}
.mp-zoom button+button{border-top:1px solid var(--line)}
.mp-zoom button:hover{background:var(--surface-2)}
.mp-zoom button[data-z="fit"]{font-size:15px}
.mp-drill{position:absolute;left:50%;bottom:14px;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border:0;border-radius:17px;background:var(--overlay);color:var(--on-overlay);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.mp-card-on .mp-drill{left:calc((100% - 428px) / 2)}
/* 名声刻度条：地图底部正中（和左上「世界地图／帝都城内」同一套浅色底），1–12 格，选中那格金底、以下浅金；有关卡开放的那级下面一个小点 */
.mp-rbar{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:36px;padding:0 5px 0 11px;background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow);white-space:nowrap}
.mp-card-on .mp-rbar{left:calc((100% - 428px) / 2)}
.mp-rb-t{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--ink-2)}
.mp-rb-t .ic-renown{width:16px;height:16px}
.mp-rb-c{display:flex;gap:2px}
.mp-rb-l{position:relative;width:24px;height:26px;padding:0;border:0;border-radius:5px;background:var(--surface-2);color:var(--ink-2);font:600 12.5px/26px var(--font);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s,color .12s}
.mp-rb-l:hover{background:color-mix(in srgb,var(--gold) 28%,var(--surface-2));color:var(--ink)}
.mp-rb-l.has-g::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:color-mix(in srgb,var(--gold) 70%,var(--muted))}
.mp-rb-l.is-in{background:color-mix(in srgb,var(--gold) 26%,var(--surface-2));color:var(--ink)}
.mp-rb-l[aria-pressed="true"]{background:var(--gold);color:var(--overlay);font-weight:800;transform:scale(1.08);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mp-rb-l[aria-pressed="true"]::after{background:var(--overlay)}
.mp-rb-l:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
.mp-rb-lg{display:flex;align-items:center;gap:9px;padding:0 8px 0 4px;border-left:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.mp-rb-lg>span{display:inline-flex;align-items:center;gap:4px}
.mp-rb-lg i{width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.mp-rb-lg .lg-in{border:2.5px solid #e9b400;background:rgba(255,236,170,.6)}
.mp-rb-lg .lg-new{border:2.5px solid #12bfd6;background:rgba(120,240,255,.45)}
.mp-rb-lg b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.mp-view .mp-drill{bottom:58px}
.mp-toast{position:absolute;left:50%;top:14px;z-index:4;transform:translate(-50%,-8px);padding:7px 14px;border-radius:16px;background:var(--overlay);color:var(--on-overlay);font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.mp-toast.on{opacity:1;transform:translate(-50%,0)}
.mp-nojs{position:absolute;inset:auto 0 45%;text-align:center;color:var(--muted)}
/* 详情卡片：桌面浮在地图右侧 */
.mp-card{position:absolute;top:12px;right:12px;z-index:3;width:360px;max-height:calc(100% - 24px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.28);overflow:hidden}
.mp-card-h{display:flex;align-items:flex-start;gap:8px;padding:12px 10px 10px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.mp-card-t{flex:1;min-width:0}
.mp-card-t h2{margin:0;font-size:19px}
.mp-card-b{flex:1;min-height:0;overflow:auto;padding:4px 14px 14px;font-size:13.5px;overscroll-behavior:contain}
.mp-card-b h3{display:flex;align-items:center;gap:6px;margin:14px 0 6px;font:700 13.5px/1.4 var(--font)}
.mp-card-b h3 small{font-weight:400;color:var(--muted);font-size:12px}
.mp-card-b h3 .ic{font-size:14px;color:var(--ink-2)}
.mp-done{flex:none;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:15px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.mp-done .ic{font-size:13px;--icc:var(--muted)}
.mp-done.on{background:var(--good);border-color:var(--good);color:var(--accent-ink);font-weight:600}
.mp-done.on .ic{--icc:var(--accent-ink)}
.mp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mp-tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 3px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:12px}
.mp-tag .mp-cb{width:18px;height:18px}
.mp-tag .mp-cb .ic{font-size:10px}
.mp-tag-rn{gap:3px;padding-left:8px;background:color-mix(in srgb,var(--gold) 16%,var(--surface));color:var(--ink)}
.mp-tag-rn .ic-renown{width:14px;height:14px}
.mp-tag-rn.no{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);font-weight:600}
.mp-p{margin:8px 0 0;color:var(--ink-2);line-height:1.65}
.mp-cap{margin:4px 0 0;font-size:12px;color:var(--muted)}
.mp-ok{color:var(--good);font-weight:700}
.mp-ng{color:var(--bad);font-weight:700}
.mp-flav{margin:12px 0 0;padding-left:10px;border-left:2px solid var(--line-strong);color:var(--muted);font-size:12.5px;line-height:1.6}
.mp-shop{margin-top:6px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mp-shop-h{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-2);font-weight:700;font-size:13px;cursor:pointer;list-style:none}
.mp-shop-h::-webkit-details-marker{display:none}
.mp-shop-h small{margin-left:auto;font-weight:400;color:var(--muted);font-size:12px}
.mp-shop-h::after{content:"▾";color:var(--muted);font-size:11px;transition:transform .15s}
.mp-shop:not([open]) .mp-shop-h::after{transform:rotate(-90deg)}
.mp-sk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--itm-tile);color:var(--itm-glyph);font-size:11px;font-weight:700}
.mp-gl{width:100%;border-collapse:collapse;font-size:13px}
.mp-gl td{padding:4px 10px;border-top:1px solid var(--line);vertical-align:middle}
.mp-gl tr:first-child td{border-top:0}
.mp-gl td:first-child{width:100%;max-width:0}
.mp-gl .mp-pr{font-weight:600}
.mp-gl .mp-cat-r td{padding:5px 10px 2px;font-size:11.5px;color:var(--muted);letter-spacing:.06em;border-top:0;background:var(--surface)}
.mp-gl tr.is-q td{background:color-mix(in srgb,var(--gold) 14%,var(--surface))}
.mp-gl tr.is-lk td{opacity:.55}
.mp-lock{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border-radius:10px;background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);font-size:11.5px;font-weight:600;white-space:nowrap}
.mp-lock .ic{font-size:11px;--icc:var(--bad)}
.mp-rn{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--ink-2);white-space:nowrap;font-weight:500}
.mp-up{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px;background:var(--surface-2);font-size:11px;font-weight:700;color:var(--ink-2)}
.mp-only{margin-left:6px;color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap}
.mp-far{margin-left:6px;padding:0 5px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:600;vertical-align:1px;white-space:nowrap}
.mp-barter{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;white-space:nowrap}
.mp-barter .mp-ii{width:18px;height:18px}
.mp-gath{display:flex;flex-direction:column;gap:6px}
.mp-gath-r{display:flex;align-items:flex-start;gap:8px}
.mp-gath-r>b{flex:none;width:48px;padding-top:3px;font-size:12px;color:var(--muted);font-weight:600}
.mp-gath-r>div{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
.mp-gath-r .mp-it{font-weight:500;font-size:13px}
.mp-gath-r .is-q .mp-it,.mp-rg-b .is-q{background:color-mix(in srgb,var(--gold) 18%,transparent);border-radius:4px;padding-right:4px}
.mp-gate-r{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mp-rc{display:flex;flex-wrap:wrap;gap:6px}
.mp-rcp{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 3px;border-radius:17px;background:color-mix(in srgb,var(--good) 12%,var(--surface));color:var(--ink)}
.mp-rcp:hover{text-decoration:none;filter:brightness(.97)}
.mp-rcp img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.mp-rcp small{color:var(--good);font-weight:600;font-size:11.5px}
.mp-qs{list-style:none;margin:0;padding:0}
.mp-qs li{padding:3px 0;font-size:13px}
.mp-qs small{color:var(--muted);margin-left:6px;font-size:11.5px}
.mp-tolink{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
/* 页下：名声表、资料说明 */
.mp-sec{margin-top:28px}
.mp-sec h2{font-size:22px;margin:0 0 4px}
.mp-sec-l{margin:0 0 6px;color:var(--muted);font-size:13.5px}
.mp-rt td,.mp-rt th{vertical-align:top}
.mp-rt-lv{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.mp-rt-lv b{font:700 15px var(--font-head)}
.mp-rt-lv:hover{border-color:var(--gold)}
.mp-rt tr.on{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.mp-rt-ul{margin:4px 0 0;padding-left:16px;font-size:13px;color:var(--ink-2)}
.mp-rt-gates,.mp-rt-qs{font-size:13px}
.mp-rt-pl{display:inline-block;margin:0 4px 4px 0;padding:1px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.mp-rt-pl:hover{border-color:var(--gold);color:var(--ink)}
.mp-rt-qs a{display:block}
.mp-notes details{border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:var(--surface)}
.mp-notes summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.mp-notes ul{margin:8px 0;padding-left:18px;color:var(--ink-2);font-size:13.5px}
@media (max-width:1100px){
  .mp-app{grid-template-columns:288px minmax(0,1fr)}
  .mp-card{width:330px}
  .mp-card-on .mp-drill{left:calc((100% - 404px) / 2)}
}
/* 手机：地图占满屏，面板是底部抽屉（收起只露搜索框；把手点一下或上下拖，半屏／全屏）；点地点时详情从底部升起 */
@media (max-width:860px){
  .mp-head{margin:0 0 8px}
  .mp-head h1{font-size:22px}
  .mp-head .lead,.mp-stat{display:none}
  .mp-app{display:block;margin:0 -16px;height:calc(100svh - 112px);min-height:480px;border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .mp-mapwrap{position:absolute;inset:0}
  .mp-panel{position:absolute;left:0;right:0;bottom:0;z-index:6;height:88px;border-right:0;border-radius:14px 14px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.28);transition:height .25s ease}
  .dr-1 .mp-panel{height:52%}
  .dr-2 .mp-panel{height:calc(100% - 52px)}
  .mp-handle{display:block;flex:none;width:100%;height:20px;padding:0;border:0;background:none;cursor:pointer}
  .mp-handle i{display:block;width:42px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--line-strong)}
  .mp-find{padding:2px 12px 8px}
  .mp-sug{top:calc(100% - 6px)}
  .dr-0 .mp-pscroll{visibility:hidden}
  .mp-cats{grid-template-columns:1fr 1fr}
  .mp-maps{left:10px;top:10px}
  .mp-zoom{left:auto;right:10px;top:10px;bottom:auto}
  .mp-rbar{left:10px;top:50px;bottom:auto;transform:none;gap:5px;height:32px;padding:0 4px 0 8px}
  .mp-card-on .mp-rbar{left:10px}
  .mp-rb-t{font-size:12px}
  .mp-rb-t>span{display:none}
  .mp-rb-lg{display:none}
  .mp-rb-l{width:20px;height:24px;font-size:12px;line-height:24px}
  .mp-view .mp-drill{bottom:100px}
  .mp-card-on .mp-drill{display:none}
  .mp-card{left:0;right:0;top:auto;bottom:0;width:auto;max-height:66%;border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0;z-index:7}
  .mp-card-on .mp-panel{visibility:hidden}
  .mp-toast{top:54px}
  .mp-rt th:nth-child(4),.mp-rt td:nth-child(4){display:none}
}
/* 第四版：所选线底图上没有的地点照样画，淡一点 */
.mp-pin.is-off:not(.is-sel):not(.is-hit) .mp-pd{filter:grayscale(1) brightness(.78) contrast(.9) drop-shadow(0 1px 1.5px rgba(0,0,0,.4))}   /* 不透明：底图上若烤着这个点的图标也要盖住 */
.mp-v4 .mp-pin.is-cap .mp-pd img{opacity:1}   /* 第四版底图上我们的路压过城徽，帝都图标照常画 */
/* 第四版：图标在屏幕上不小于 22px；名声光圈只比图标大一圈 */
.mp-v4 .mp-pin{--sz:max(22px,calc(var(--w,27) * var(--k,.5) * 1px))}
.mp-v4.mp-rn-on .mp-pin.is-in:not(.is-sel):not(.is-hit):not(.is-cap)::before,.mp-v4.mp-rn-on .mp-pin.is-new:not(.is-sel):not(.is-hit)::after{--rs:calc(var(--sz) * 1.32)}
.mp-v4.mp-rn-on .mp-pin.is-in:not(.is-sel):not(.is-hit):not(.is-cap)::before{box-shadow:0 0 0 2px #ffd447,0 0 0 3.2px rgba(70,46,0,.55),0 0 8px 2px rgba(255,200,60,.5)}
.mp-v4.mp-rn-on .mp-pin.is-new:not(.is-sel):not(.is-hit):not(.is-cap)::before{box-shadow:0 0 0 2.4px #3fe9ff,0 0 0 3.6px rgba(0,36,52,.6),0 0 9px 3px rgba(50,225,255,.6)}
.mp-v4.mp-rn-on .mp-pin.is-out:not(.is-sel):not(.is-hit)::before{--rs:calc(var(--sz) * 1.02)}
/* 全屏（10-17 Teemo）：地图铺满窗口；电脑上左面板浮在地图上、可收起；卡片在点的另一侧 */
html.mp-fs-on,html.mp-fs-on body{overflow:hidden}
.mp-app.mp-fs{position:fixed;top:var(--mp-top,0px);left:0;right:0;bottom:0;z-index:40;height:auto;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.mp-zoom .mp-fsb{font-size:17px}
.mp-pcb,.mp-pob{display:none}
@media (min-width:861px){
  .mp-app.mp-fs{display:block}
  .mp-app.mp-fs .mp-mapwrap{position:absolute;inset:0}
  .mp-app.mp-fs .mp-panel{position:absolute;left:12px;top:12px;bottom:12px;width:316px;z-index:6;border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.3);overflow:hidden}
  .mp-app.mp-fs .mp-pcb{display:block;position:absolute;right:6px;top:6px;z-index:2;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink-2);font:600 17px/22px var(--font);cursor:pointer}
  .mp-app.mp-fs .mp-pcb:hover{border-color:var(--accent-2);color:var(--ink)}
  .mp-app.mp-fs.mp-pcol .mp-panel{display:none}
  .mp-app.mp-fs.mp-pcol .mp-pob{display:inline-flex;align-items:center;gap:5px;position:absolute;left:12px;top:56px;z-index:6;height:34px;padding:0 14px;border:1px solid var(--line-strong);border-radius:17px;background:var(--surface);color:var(--ink);font:600 13.5px var(--font);box-shadow:var(--shadow);cursor:pointer}
  .mp-app.mp-fs:not(.mp-pcol) .mp-maps,.mp-app.mp-fs:not(.mp-pcol) .mp-zoom{left:340px}
  .mp-app.mp-fs:not(.mp-pcol) .mp-rbar{left:calc(50% + 164px)}
  .mp-app.mp-fs.mp-card-on:not(.mp-card-left):not(.mp-pcol) .mp-rbar{left:calc(50% - 44px)}
  .mp-app.mp-fs.mp-card-on.mp-card-left .mp-rbar{left:calc(50% + 378px)}
  .mp-app.mp-fs.mp-pcol.mp-card-on.mp-card-left .mp-rbar{left:calc(50% + 214px)}
  .mp-app.mp-fs.mp-pcol.mp-card-on:not(.mp-card-left) .mp-rbar{left:calc(50% - 214px)}
  .mp-app.mp-fs .mp-card{top:12px;max-height:calc(100% - 24px)}
  .mp-app.mp-card-left .mp-card{right:auto;left:12px}
  .mp-app.mp-fs.mp-card-left:not(.mp-pcol) .mp-card{left:340px}
}
@media (max-width:860px){
  .mp-app.mp-fs{display:block;height:auto}
  .mp-app.mp-fs .mp-card{max-height:52%}
}
/* 第四版底图四边是平涂的天蓝云色（#b2cfec）：视口底色同色，图外不露一条深色 */
.mp-v4 .mp-view{background:#b2cfec}
/* 字号（10-17 Teemo：「右侧方框中的文字显得过小」）：地点卡正文 15px、标题 20px、标签和小字不低于 13px，物品名和图标跟着放大、卡片加宽；左面板小字不低于 13px */
.mp-app .mp-card{width:404px}
.mp-app .mp-card-h{padding:14px 12px 12px 16px}
.mp-app .mp-card-t h2{font-size:20px;line-height:1.35}
.mp-app .mp-card-b{padding:6px 16px 16px;font-size:15px;line-height:1.6}
.mp-app .mp-card-b h3{font-size:15px;margin:16px 0 8px}
.mp-app .mp-card-b h3 small{font-size:13px}
.mp-app .mp-card-b h3 .ic{font-size:16px}
.mp-app .mp-card .mp-tag{font-size:13px}
.mp-app .mp-card .mp-tag .mp-cbi{width:20px;height:20px}
.mp-app .mp-card .mp-done{font-size:13.5px}
.mp-app .mp-card .mp-p{line-height:1.7}
.mp-app .mp-card .mp-ii{width:26px;height:26px}
.mp-app .mp-card .mp-barter .mp-ii{width:22px;height:22px}
.mp-app .mp-card .mp-it{gap:7px}
.mp-app .mp-card .mp-gf-l .mp-it,.mp-app .mp-card .mp-gath-r .mp-it,.mp-app .mp-card .mp-rg-b .mp-it{font-size:15px}
.mp-app .mp-card .mp-pr,.mp-app .mp-card .mp-gf-l .mp-pr,.mp-app .mp-card .mp-rg-b .mp-pr{font-size:14px}
.mp-app .mp-card .mp-gl{font-size:15px}
.mp-app .mp-card .mp-gl .mp-cat-r td{font-size:13px}
.mp-app .mp-card .mp-shop-h{font-size:15px}
.mp-app .mp-card .mp-shop-h small,.mp-app .mp-card .mp-shop-h::after{font-size:13px}
.mp-app .mp-card .mp-sk{font-size:13px}
.mp-app .mp-card .mp-flav{font-size:14px;line-height:1.65}
.mp-app .mp-card .mp-cap,.mp-app .mp-card .mp-gath-r>b,.mp-app .mp-card .mp-gf-h,.mp-app .mp-card .mp-gf-h b,.mp-app .mp-card .mp-lgd,.mp-app .mp-card .mp-lgd b{font-size:13px}
.mp-app .mp-card .mp-lock,.mp-app .mp-card .mp-lock .ic,.mp-app .mp-card .mp-rn,.mp-app .mp-card .mp-up,.mp-app .mp-card .mp-only,.mp-app .mp-card .mp-far{font-size:13px}
.mp-app .mp-card .mp-barter{font-size:14px}
.mp-app .mp-card .mp-qs li{font-size:15px}
.mp-app .mp-card .mp-qs small,.mp-app .mp-card .mp-rcp small{font-size:13px}
.mp-app .mp-card .mp-tolink{font-size:14px}
.mp-app .mp-card .mp-gate-z{font-size:14px}
.mp-app .mp-card .mp-tog,.mp-app .mp-card .mp-more-n{font-size:13.5px}
.mp-app .mp-panel .mp-lord{font-size:13px}
.mp-app .mp-panel .mp-tab,.mp-app .mp-panel .mp-sel select,.mp-app .mp-panel .mp-nw-h b{font-size:14px}
.mp-app .mp-panel .mp-sel,.mp-app .mp-panel .mp-nw-h,.mp-app .mp-panel .mp-nw,.mp-app .mp-panel .mp-sub-h,.mp-app .mp-panel .mp-more-a,.mp-app .mp-panel .mp-pl-b,.mp-app .mp-panel .mp-fg,.mp-app .mp-panel .mp-show>summary,.mp-app .mp-panel .mp-blk-h,.mp-app .mp-panel .mp-prog-t,.mp-app .mp-panel .mp-qk,.mp-app .mp-panel .mp-rh p,.mp-app .mp-panel .mp-cat{font-size:13.5px}
.mp-app .mp-panel .mp-nw-n,.mp-app .mp-panel .mp-nw-z small,.mp-app .mp-panel .mp-nw-xl,.mp-app .mp-panel .mp-nw-x .mp-nw,.mp-app .mp-panel .mp-rct b,.mp-app .mp-panel .mp-rct small,.mp-app .mp-panel .mp-rcd-s,.mp-app .mp-panel .mp-c,.mp-app .mp-panel .mp-dl,.mp-app .mp-panel .mp-gift-w,.mp-app .mp-panel .mp-gift-x,.mp-app .mp-panel .mp-plan li span,.mp-app .mp-panel .mp-plan li::before,.mp-app .mp-panel .mp-pl-b small,.mp-app .mp-panel .mp-ql li small,.mp-app .mp-panel .mp-mtl li>small,.mp-app .mp-panel .mp-pn,.mp-app .mp-panel .mp-cat-c,.mp-app .mp-panel .mp-cat-all button,.mp-app .mp-panel .mp-qk small,.mp-app .mp-panel .mp-sum span,.mp-app .mp-panel .mp-go small,.mp-app .mp-panel .mp-rg-h em,.mp-app .mp-panel .mp-rg-b .mp-pr,.mp-app .mp-panel .mp-tog,.mp-app .mp-panel .mp-more-n,.mp-app .mp-panel .mp-lgd,.mp-app .mp-panel .mp-lgd b,.mp-app .mp-panel .mp-gf-h,.mp-app .mp-panel .mp-gf-h b,.mp-app .mp-panel .mp-gf-l .mp-pr,.mp-app .mp-panel .mp-pr{font-size:13px}
.mp-app .mp-sug-h,.mp-app .mp-sug button small{font-size:13px}
.mp-app .mp-panel .mp-ql li a,.mp-app .mp-panel .mp-gf-l .mp-it,.mp-app .mp-panel .mp-rg-b .mp-it{font-size:14px}
.mp-app .mp-panel .mp-nw-x .mp-nw{height:24px}
@media (max-width:1100px){.mp-app .mp-card{width:380px}}
@media (max-width:860px){.mp-app .mp-card{width:auto}.mp-app .mp-card-b{font-size:15px}}
.mp-app .mp-panel .mp-lord{padding:4px 0 3px;letter-spacing:-.04em}
/* 面板里选了东西（材料、买东西、招募、委托、坐骑、搜索）：地图上对应的地点闪（10-17 Teemo：「对应的地点应该有闪烁特效」）——白圈带类别色光一明一暗、图标略放大，1.3 秒一循环 */
.mp-pin.is-hit:not(.is-sel)::after{content:"";position:absolute;--rs:max(calc(var(--sz) * 1.75),36px);left:calc(var(--rs) / -2);top:calc(var(--rs) / -2);width:var(--rs);height:var(--rs);border-radius:50%;box-sizing:border-box;border:3px solid #fff;box-shadow:0 0 0 2px var(--cc,#ff5a7a),0 0 14px 5px color-mix(in srgb,var(--cc,#ff5a7a) 75%,transparent),inset 0 0 10px 2px color-mix(in srgb,var(--cc,#ff5a7a) 55%,transparent);pointer-events:none;z-index:-1;animation:mp-hitpulse 1.3s ease-in-out infinite}
.mp-pin.is-hit .mp-pd{animation:mp-hitpop 1.3s ease-in-out infinite}
.mp-pin.is-hit{--cc:#ff5a7a}
.mp-pin.is-hit.is-buy{--cc:#ff7a3c}
.mp-pin.is-hit.is-gather{--cc:#2fd47a}
@keyframes mp-hitpulse{0%,100%{opacity:.3;transform:scale(.82)}50%{opacity:1;transform:scale(1.1)}}
@keyframes mp-hitpop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.mp-paused .mp-pin.is-hit::after,.mp-paused .mp-pin.is-hit .mp-pd{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mp-pin.is-hit::after,.mp-pin.is-hit .mp-pd{animation:none}.mp-pin.is-hit::after{opacity:.95}}
/* 名声页签里已经有 1–12 级：电脑上面板展开时不再在地图底部重复一条，面板收起时才浮在地图上；手机照旧在地图顶上 */
@media (min-width:861px){.mp-app:not(.mp-pcol) .mp-rbar{display:none}}
/* 帝都（10-17 Teemo：「帝都始终是正常显示 并有光圈，不管在任何场景下」）：任何状态都不变灰、不半透明；自带一圈柔和暖白光晕（不闪，和名声金圈、物品闪烁区分开） */
.mp-app .mp-pin.is-cap,.mp-app.mp-hl .mp-pin.is-cap{opacity:1 !important}
.mp-app .mp-pin.is-cap .mp-pd{opacity:1 !important;filter:drop-shadow(0 0 2px rgba(255,250,236,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important}
.mp-app .mp-pins .mp-pin.is-cap::before{--rs:max(calc(var(--sz) * 1.9),46px) !important;content:"" !important;left:calc(var(--rs) / -2) !important;top:calc(var(--rs) / -2) !important;width:var(--rs) !important;height:var(--rs) !important;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,240,.62),rgba(255,246,222,.32) 62%,rgba(255,242,210,0)) !important;box-shadow:0 0 0 2px rgba(255,253,246,.92),0 0 0 3.4px rgba(60,48,30,.35),0 0 16px 5px rgba(255,248,228,.55) !important;animation:none !important}

/* ---------- 地图左侧面板（10-16 重做）：我的进度＋五个页签 ---------- */
.mp-me{padding:10px 12px 8px;border-bottom:1px solid var(--line);background:var(--surface)}
.mp-me-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.mp-me-l .mp-lord{padding:4px 1px 3px}
.mp-me-l .mp-lord.r-none{--rc:var(--accent-2)}
.mp-me-r{display:flex;gap:8px;margin-top:8px}
.mp-sel{display:flex;align-items:center;gap:6px;flex:1;min-width:0;height:32px;padding:0 4px 0 9px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);font-size:12.5px;color:var(--muted)}
.mp-sel>span{display:inline-flex;align-items:center;gap:3px;flex:none}
.mp-sel select{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:600;outline:0;cursor:pointer}
.mp-sel select:disabled{color:var(--muted);cursor:default}
.mp-sel option{background:var(--surface);color:var(--ink)}
/* 名声 X 新开放：这一级刚开的关卡／设施（点了飞过去），下一个有新东西的等级淡一点 */
.mp-new{margin-top:8px;padding:8px 9px 7px;border-radius:8px;background:color-mix(in srgb,var(--gold) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 32%,var(--line))}
.mp-nw-h{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.mp-nw-h b{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;color:var(--ink)}
.mp-nw-h .ic-renown{width:15px;height:15px}
.mp-nw-n{margin-left:auto;height:22px;padding:0 8px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:11px;background:var(--surface);color:var(--ink);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.mp-nw-n:hover{border-color:var(--gold)}
.mp-nw-l,.mp-nw-x{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.mp-nw{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px 0 3px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.mp-nw:hover{border-color:var(--gold)}
.mp-nw .mp-cbi{width:20px;height:20px}
.mp-nw .mp-cb{width:18px;height:18px}
.mp-nw-z{padding:0 9px 0 7px}
.mp-nw-dot{width:11px;height:11px;flex:none;border-radius:50%;box-sizing:border-box;border:2.5px solid #12bfd6;background:rgba(120,240,255,.45)}
.mp-nw-z small{font-size:11px;font-weight:500;color:var(--muted)}
.mp-gate-z{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-2)}
.mp-gate-z span{padding:1px 8px;border-radius:9px;background:var(--surface-2);color:var(--ink)}
.mp-gate-z i{font-style:normal;color:var(--muted)}
.mp-nw-x{margin-top:5px;padding-top:5px;border-top:1px dashed color-mix(in srgb,var(--gold) 30%,var(--line))}
.mp-nw-xl{font-size:11.5px;color:var(--muted);margin-right:2px}
.mp-nw-x .mp-nw{height:22px;font-size:11.5px;font-weight:500;color:var(--ink-2);background:transparent}
.mp-nw-x .mp-nw .mp-cbi{width:16px;height:16px}
/* 材料页签：按类折叠 */
.mp-mat>summary{cursor:pointer;list-style:none}
.mp-mat>summary::-webkit-details-marker{display:none}
.mp-mat>summary::after{content:"\25BE";margin-left:auto;color:var(--muted);font-size:11px;transition:transform .15s}
.mp-mat:not([open])>summary::after{transform:rotate(-90deg)}
.mp-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--surface)}
.mp-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.mp-tab .ic{font-size:16px;color:var(--muted)}
.mp-tab:hover{color:var(--ink)}
.mp-tab[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.mp-tab[aria-selected="true"] .ic{color:var(--accent)}
.mp-panel .mp-find{padding:10px 12px 6px}
.mp-panel .mp-q{height:36px}
.mp-sub-h{display:flex;align-items:baseline;gap:6px;margin:10px 0 6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.mp-sub-h small{font-weight:400;color:var(--muted)}
/* 招募：头像格 */
.mp-rcg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.mp-rct{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:5px 2px 4px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.mp-rct img,.mp-rct-i{width:44px;height:44px;border-radius:6px;object-fit:cover;object-position:50% 15%;background:var(--surface-2)}
.mp-rct-i{display:grid;place-items:center;font-weight:700;color:var(--ink-2)}
.mp-rct b{max-width:100%;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-rct small{font-size:10.5px;color:var(--good);font-weight:600;white-space:nowrap}
.mp-rct:hover{border-color:var(--line-strong)}
.mp-rct.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.mp-rct.is-wait{opacity:.6}
.mp-rct.is-wait small{color:var(--muted)}
.mp-rct.is-wait img{filter:grayscale(.7)}
.mp-rcd{margin:4px 0 6px;padding:10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg)}
.mp-rcd-h{display:flex;align-items:center;gap:10px}
.mp-rcd-h img{width:52px;height:52px;border-radius:8px;object-fit:cover;object-position:50% 15%}
.mp-rcd-h>div{flex:1;min-width:0}
.mp-rcd-h h2{margin:0;font-size:18px}
.mp-rcd-h h2 a{color:var(--ink)}
.mp-rcd-s{display:inline-block;margin-top:2px;font-size:12px;font-weight:700}
.mp-rcd-s.ok{color:var(--good)}
.mp-rcd-s.wait{color:var(--warn)}
.mp-cs{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.mp-c{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:11px;background:var(--surface-2);color:var(--ink-2);font-size:12px;white-space:nowrap}
.mp-c .ic{font-size:12px}
.mp-c.no{background:color-mix(in srgb,var(--warn) 15%,var(--surface));color:var(--warn);font-weight:600}
.mp-c-w{background:color-mix(in srgb,var(--accent-2) 12%,var(--surface));color:var(--ink)}
.mp-dl{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.mp-rcd .mp-gf-h{margin:10px 0 4px}
.mp-gf-h .lv{background:var(--gold);color:var(--overlay)}
.mp-gf-h .lk{background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mp-gf-h small{font-weight:400;color:var(--muted)}
.mp-gifts{list-style:none;margin:0;padding:0}
.mp-gifts li{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:3px 0;border-bottom:1px dashed var(--line)}
.mp-gifts li:last-child{border-bottom:0}
.mp-gifts li.is-x .mp-it{opacity:.55}
.mp-gift-w{flex:none;display:inline-flex;align-items:center;gap:5px;max-width:58%;padding:2px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--accent-2);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-gift-w:hover{border-color:var(--accent-2)}
.mp-gift-w em{font-style:normal;color:var(--ink-2);font-weight:600}
.mp-gift-x{font-size:11.5px;color:var(--muted)}
.mp-plan{margin:0;padding:0;list-style:none;counter-reset:mpp}
.mp-plan li{position:relative;display:flex;flex-direction:column;gap:2px;padding:5px 0 5px 28px;border-bottom:1px solid var(--line)}
.mp-plan li:last-child{border-bottom:0}
.mp-plan li::before{counter-increment:mpp;content:counter(mpp);position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--overlay);font:700 12px/20px var(--font);text-align:center}
.mp-plan li .mp-gift-w{align-self:flex-start;max-width:100%}
.mp-plan li span{font-size:12px;color:var(--ink-2)}
.mp-more-a{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600}
.mp-pls{display:flex;flex-wrap:wrap;gap:4px}
.mp-pl-b{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 4px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer}
.mp-pl-b:hover{border-color:var(--accent-2)}
.mp-pl-b .mp-cbi{width:20px;height:20px}
.mp-pl-b small{color:var(--muted);font-size:11.5px}
/* 委托列表：本章截止红色 */
.mp-ql{list-style:none;margin:0;padding:0}
.mp-ql li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;align-items:center;padding:6px 0 6px 8px;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.mp-ql li a{grid-column:1;color:var(--ink);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-ql li small{grid-column:1;font-size:11.5px;color:var(--muted)}
.mp-ql li .mp-gift-w{grid-column:2;grid-row:1/3;max-width:120px}
.mp-ql li.is-last{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,transparent)}
.mp-ql li.is-last small{color:var(--bad);font-weight:600}
.mp-ql li.is-lim small{color:var(--warn)}
/* 坐骑 */
.mp-mtl{list-style:none;margin:0;padding:0}
.mp-mtl li{padding:6px 0;border-bottom:1px solid var(--line)}
.mp-mtl li.on{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.mp-mtl li>small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.mp-mt-b{display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;border:0;background:none;padding:0;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.mp-mt-b:hover b{color:var(--accent-2)}
.mp-fg{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:12.5px}
/* 「显示」折叠 */
.mp-show{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.mp-show>summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);padding:4px 0}
/* 地图上：买齐路线的编号和虚线、每件最便宜的店 */
.mp-path{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mp-path polyline{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:7 6;stroke-linecap:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.mp-pn{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;border-radius:50%;background:var(--gold);color:var(--overlay);font:700 11.5px/1 var(--font);font-style:normal}
.mp-pnb{position:absolute;left:-9px;top:-9px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--overlay);font:700 12px/1 var(--font);font-style:normal;box-shadow:0 0 0 2px var(--on-overlay),0 1px 3px rgba(0,0,0,.5)}
.mp-pin.is-best .mp-pd{box-shadow:0 0 0 3px var(--gold),0 0 0 9px color-mix(in srgb,var(--gold) 45%,transparent),0 0 18px 6px color-mix(in srgb,var(--gold) 35%,transparent)}
@media (max-width:860px){
  .mp-me{padding:4px 10px 6px}
  .dr-0 .mp-tabs,.dr-0 .mp-me{display:none}
}
/* 「名声」页签 */
.mp-tab .ic-renown{width:16px;height:16px;filter:grayscale(.6) opacity(.8)}
.mp-tab[aria-selected="true"] .ic-renown{filter:none}
.mp-rn-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:4px 0 10px}
.mp-rn-grid .mp-rb-l{width:auto;height:34px;font-size:15px;line-height:34px;border-radius:7px}
.mp-rn-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.mp-rn-lg>span{display:inline-flex;align-items:center;gap:5px}
.mp-rn-lg b{color:var(--ink);font-variant-numeric:tabular-nums}
.mp-rn-lg i{width:13px;height:13px;border-radius:50%;box-sizing:border-box}
.mp-rn-lg .lg-in{border:2.5px solid #e9b400;background:rgba(255,236,170,.6)}
.mp-rn-lg .lg-new{border:2.5px solid #12bfd6;background:rgba(120,240,255,.45)}
.mp-rn-lg .lg-out{background:#5b5f66;border:1.5px solid #9a9ea6}
.mp-res .mp-new{margin:0 0 10px}

/* ---------- 任务 /quests/ ---------- */
.qs-head{margin:4px 0 12px}
.qs-head h1{font-size:30px;margin:0 0 4px}
.qs-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;font-size:14px}
.qs-links a{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.qs-lords{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:4px 0 10px}
.qs-lord{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px 7px 7px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.qs-lord:hover{border-color:var(--line-strong)}
.qs-lord[aria-selected="true"]{border-color:var(--rc);box-shadow:0 0 0 2px color-mix(in srgb,var(--rc) 28%,transparent);background:color-mix(in srgb,var(--rc) 7%,var(--surface))}
.qs-lord.r-none{--rc:var(--ink-2)}
.qs-lord.r-salvation{--rc:var(--accent-2)}
.qs-lord-f{width:42px;height:42px;flex:none;border-radius:6px;object-fit:cover;object-position:50% 18%;background:var(--surface-2)}
.qs-lord-all{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:6px;background:var(--surface-2);font-size:20px}
.qs-lord-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.qs-lord-t b{font:700 15px/1.3 var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-lord-t small{color:var(--muted);font-size:12px;white-space:nowrap}
.qs-chs{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--rc,var(--accent-2)) 6%,var(--surface))}
.qs-chs-l{flex:none;font-size:13px;font-weight:600;color:var(--ink-2)}
.qs-chs-b{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.qs-chs-b::-webkit-scrollbar{display:none}
.qs-ch{flex:none;min-width:34px;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);font:600 13.5px var(--font);font-variant-numeric:tabular-nums;cursor:pointer}
.qs-ch:hover{border-color:var(--rc,var(--ink-2))}
.qs-ch[aria-pressed="true"]{background:var(--rc,var(--ink));border-color:var(--rc,var(--ink));color:var(--accent-ink)}
.qs-ch-all{font-weight:500}
.qs-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 8px}
.qs-q{max-width:260px}
.qs-fs{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.qs-fs-l{font-size:12.5px;color:var(--muted);margin-right:2px;white-space:nowrap;flex:none}
.qs-f{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}
.qs-f small{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.qs-f:hover{border-color:var(--line-strong)}
.qs-f[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.qs-f[aria-pressed="true"] small{color:inherit;opacity:.75}
.qs-hide{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;margin-left:auto}
.qs-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:4px 0 8px;font-size:13.5px;color:var(--ink-2)}
.qs-sum b{font:700 18px/1 var(--font-head);color:var(--ink);margin:0 2px}
.qs-sum .qs-sum-u b{color:var(--bad)}
.qs-sum .qs-bar{flex:1 1 160px;max-width:240px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;align-self:center}
.qs-sum .qs-bar i{display:block;height:100%;background:var(--good);border-radius:3px}
.qs-sum .qs-clr{border:0;background:none;padding:0;color:var(--accent-2);font:inherit;font-size:13px;cursor:pointer}
/* 列表＝一张表：勾选｜任务｜什么时候｜谁给·在哪｜奖励｜展开 */
.qs-head-row,.qs-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.3fr) 72px;gap:0 14px;align-items:start}
.qs-head-row{padding:7px 12px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--muted)}
.qs-list{border:1px solid var(--line);border-radius:0 0 8px 8px;background:var(--surface)}
.qs-row{border-top:1px solid var(--line);scroll-margin-top:80px}
.qs-row:first-child{border-top:0}
.qs-main{padding:10px 12px}
.qs-row.qs-u{box-shadow:inset 3px 0 0 var(--bad)}
.qs-row:target,.qs-row.is-flash{background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.qs-ck{position:relative;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;cursor:pointer}
.qs-ck input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.qs-ck span{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--surface)}
.qs-ck span .ic{opacity:0;--icc:var(--accent-ink);font-size:14px}
.qs-ck input:checked+span{background:var(--good);border-color:var(--good)}
.qs-ck input:checked+span .ic{opacity:1}
.qs-ck input:focus-visible+span{outline:2px solid var(--accent-2);outline-offset:1px}
.qs-tt h3{margin:0;font:700 15px/1.45 var(--font)}
.qs-tt h3 a{color:var(--ink)}
.qs-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.qs-k{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font-size:11.5px;font-weight:600}
.qs-tags .qs-k-6{background:color-mix(in srgb,var(--accent-2) 14%,var(--surface));color:var(--accent-2)}
.qs-tags .qs-k-7{background:color-mix(in srgb,var(--gold) 16%,var(--surface))}
.qs-urg-b,.qs-last-b{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:4px;background:color-mix(in srgb,var(--bad) 13%,var(--surface));color:var(--bad);font-size:11.5px;font-weight:700}
.qs-urg-b .ic,.qs-last-b .ic{--icc:var(--bad);font-size:12px}
.qs-last-b{background:var(--bad);color:var(--accent-ink)}
.qs-last-b .ic{--icc:var(--accent-ink)}
.qs-when{display:flex;flex-direction:column;gap:3px;font-size:13px}
.qs-wl{display:flex;align-items:center;gap:6px;min-width:0;line-height:1.35}
.qs-lf{width:20px;height:20px;flex:none;border-radius:4px;object-fit:cover;object-position:50% 18%}
.qs-lf-s{width:18px;height:18px;vertical-align:-4px;margin-right:4px}
.qs-wl-f{flex:none;color:var(--ink-2)}
.qs-wl-u{display:inline-flex;align-items:center;gap:3px;min-width:0;color:var(--ink-2);flex-wrap:wrap}
.qs-wl-u small{color:var(--muted);font-size:11.5px;margin-left:3px}
.qs-wl-u .ic{font-size:12px}
.qs-wl.qs-urg .qs-wl-u{color:var(--bad);font-weight:600}
.qs-wl.qs-urg .qs-wl-u .ic{--icc:var(--bad)}
.qs-app[data-route] .qs-wl{display:none}
.qs-app[data-route=""] .qs-wl,.qs-app[data-route="cai"] .qs-wl[data-route="cai"],.qs-app[data-route="dietrich"] .qs-wl[data-route="dietrich"],.qs-app[data-route="theodora"] .qs-wl[data-route="theodora"],.qs-app[data-route="leda"] .qs-wl[data-route="leda"],.qs-app[data-route="salvation"] .qs-wl[data-route="salvation"]{display:flex}
.qs-app:not([data-route=""]) .qs-wl .qs-lf{display:none}
.qs-who{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;color:var(--ink-2)}
.qs-giver{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600}
.qs-av{width:24px;height:24px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 15%;border:1px solid var(--line)}
.qs-av-i{display:inline-grid;place-items:center;background:var(--surface-2);font-size:12px;color:var(--ink-2)}
.qs-av-s{width:20px;height:20px}
.qs-pl{display:inline-flex;align-items:flex-start;gap:4px;line-height:1.45;color:var(--ink-2)}
a.qs-pl:hover{color:var(--accent-2);text-decoration:none}
.qs-pl .ic{margin-top:3px;flex:none;color:var(--accent-2)}
.itd-pl{display:inline-flex;align-items:flex-start;gap:3px;color:var(--accent-2)}
.itd-pl:hover{text-decoration:underline}
.itd-pl .ic{margin-top:3px;flex:none}
.qs-rw{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.qs-rw .cv{max-width:100%}
.qs-rw-t{font-size:13px;color:var(--ink-2)}
.qs-cv-rec{background:color-mix(in srgb,var(--good) 13%,var(--surface));color:var(--ink);padding-left:2px;gap:4px}
.qs-cv-rec small{color:var(--good);font-weight:700;font-size:11.5px}
.qs-cv-rec:hover,.qs-cv-cls:hover,.qs-cv-area:hover{text-decoration:none;filter:brightness(.97)}
.qs-cv-cls{background:color-mix(in srgb,var(--lk-class,var(--accent-2)) 13%,var(--surface));color:var(--ink);gap:5px}
.qs-cv-cls b{color:var(--lk-class,var(--accent-2))}
.qs-cv-area{background:color-mix(in srgb,var(--accent-2) 10%,var(--surface));color:var(--ink)}
.qs-cv-sal{background:color-mix(in srgb,var(--accent-2) 12%,var(--surface))}
.qs-cv-dlc{background:color-mix(in srgb,var(--gold) 16%,var(--surface))}
.qs-cv-un{padding-left:8px}
.qs-tg{justify-self:end;display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.qs-tg:hover{border-color:var(--line-strong);color:var(--ink)}
.qs-tg[aria-expanded="true"]{background:var(--surface-2)}
.qs-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 22px;margin:0 12px 12px 12px;padding:10px 14px;border-radius:6px;background:var(--surface-2);font-size:13.5px;color:var(--ink-2)}
.qs-more[hidden]{display:none}
.qs-blk h4{margin:4px 0 4px;font:700 12.5px/1.4 var(--font);color:var(--muted);letter-spacing:.06em}
.qs-blk p{margin:0 0 4px;line-height:1.6}
.qs-steps{margin:0;padding-left:20px;line-height:1.6}
.qs-req{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.qs-byr{list-style:none;margin:2px 0 4px;padding:0}
.qs-byr li{padding:1px 0}
.qs-byr .ic{font-size:12px}
.qs-gos{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:2px}
.qs-goto{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.qs-dis p{color:var(--muted)}
.qs-unv{grid-column:1/-1;margin:2px 0 0;font-size:12px;color:var(--muted)}
.qs-row.is-done .qs-tt h3 a{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.qs-row.is-done .qs-when,.qs-row.is-done .qs-who,.qs-row.is-done .qs-rw,.qs-row.is-done .qs-tags{opacity:.5}
.qs-none{margin:0;padding:24px;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;background:var(--surface);color:var(--muted);text-align:center}
.qs-foot{margin-top:24px}
.qs-foot details{border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:var(--surface)}
.qs-foot summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.qs-foot ul{margin:8px 0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:1100px){
  .qs-lords{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 手机：一条任务一张卡：勾选在左，名字一行，时间、地点、奖励各一行 */
@media (max-width:760px){
  .qs-head h1{font-size:25px}
  .qs-lords{display:flex;gap:6px;overflow-x:auto;margin:4px -12px 8px;padding:2px 12px 4px;scrollbar-width:none}
  .qs-lords::-webkit-scrollbar{display:none}
  .qs-lord{flex:none;gap:7px;padding:5px 9px 5px 5px}
  .qs-lord-f,.qs-lord-all{width:34px;height:34px}
  .qs-lord-t b{font-size:14px}
  .qs-chs{padding:6px 8px;gap:6px}
  .qs-tools{gap:8px}
  .qs-q{max-width:none;flex:1 1 100%}
  .qs-fs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;padding-bottom:1px}
  .qs-fs::-webkit-scrollbar{display:none}
  .qs-f{flex:none}
  .qs-hide{margin-left:0}
  .qs-head-row{display:none}
  .qs-list{border-radius:8px}
  .qs-main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tt tg" "when when" "who who" "rw rw";gap:6px 8px;padding:10px 10px 10px 12px}
  .qs-ck{grid-area:ck}.qs-tt{grid-area:tt}.qs-when{grid-area:when}.qs-who{grid-area:who;flex-direction:row;flex-wrap:wrap;gap:2px 10px}.qs-rw{grid-area:rw}.qs-tg{grid-area:tg;align-self:start}
  .qs-tg span{display:none}
  .qs-more{margin:0 8px 10px 8px;grid-template-columns:1fr}
}
/* mapquest:end */

/* 人物页大图：统一游戏内头像大图＋初期/五年后切换＋官方立绘按钮（10-16） */
.ent-pt{flex:none;width:300px}
.ent-pf{width:300px;height:300px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#16302f;box-shadow:var(--shadow)}
.ent-pf img{width:100%;height:100%;object-fit:cover;display:block}
.ent-pb{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.ent-pv{display:inline-flex;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden}
.ent-pv button{all:unset;cursor:pointer;padding:3px 12px;font-size:13px;color:var(--ink-2)}
.ent-pv button.on{background:var(--ink);color:var(--bg)}
.ent-offi{font-size:13px;padding:3px 12px;border:1px solid var(--line-strong);border-radius:16px;color:var(--ink-2)}
.ent-offi:hover{text-decoration:none;border-color:var(--accent);color:var(--ink)}
@media (max-width:640px){.ent-pt{width:100%}.ent-pf{width:100%;height:auto;aspect-ratio:1}}

/* 行内小图标固定尺寸（10-16：配图说明里的物品图标被「说明区图片撑满」放大几十倍） */
img.itd-inline-icon,img.skk-i,img.pf-ic,img.lk-av,.fig figcaption img,figcaption img{max-width:none}
img.itd-inline-icon{width:18px !important;height:18px !important;display:inline-block;vertical-align:-3px;margin:0 2px 0 0;border:0;box-shadow:none}
figcaption img.skk-i,figcaption img.pf-ic{width:18px !important;height:18px !important}
figcaption img.lk-av{width:24px !important;height:24px !important}

/* gallery:start — 画廊页、首页精选、人物页小入口、灯箱（10-16 · Claude Opus 5.5；生成器 site/gen/pages_gallery.py，脚本在 site.js「画廊」段） */
/* 等高行排版：每张按原图比例占宽，不裁画；最后一行不硬拉满 */
.gl-just{--rh:230px;display:flex;flex-wrap:wrap;gap:12px 10px}
.gl-just::after{content:"";flex-grow:999}
.gl-i{display:flex;flex-direction:column;flex:var(--ar) 1 calc(var(--ar) * var(--rh));min-width:0;margin:0}
.gl-i[hidden]{display:none}
.gl-z{position:relative;display:block;aspect-ratio:var(--ar);overflow:hidden;border-radius:var(--radius);background:var(--surface-2);cursor:zoom-in}
.gl-z img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gl-z:hover img{transform:scale(1.03)}
.gl-cut .gl-z{background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--gold) 18%,var(--surface-2)))}
.gl-cut .gl-z img{object-fit:contain;object-position:50% 100%}
.gl-i figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;padding:5px 2px 0;font-size:12px;line-height:1.4;color:var(--muted)}
.gl-by{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}
.gl-i figcaption a{flex:none;color:var(--muted)}
.gl-i figcaption a:hover{color:var(--accent-2)}

/* 画廊页 */
.gl-bar{margin:0 0 18px;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.gl-seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.gl-seg small{margin-left:4px;opacity:.7}
.gl-now{margin:0 0 6px;font-size:13px;color:var(--muted)}
.gl-now b{color:var(--ink)}
.gl-people{display:flex;flex-wrap:wrap;gap:8px 6px;padding:2px 6px 6px 2px}
.gl-people.gl-fold{max-height:128px;overflow:hidden}
.gl-more{margin-top:4px;font-size:13px}
.gl-p{position:relative;display:block;width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:6px;background:var(--surface-2);cursor:pointer;overflow:visible}
.gl-p img,.gl-p i,.gl-p .gl-p-all{display:grid;place-items:center;width:100%;height:100%;border-radius:4px;object-fit:cover;font:700 15px var(--font-head);font-style:normal;color:var(--ink-2)}
.gl-p .gl-p-all{font:600 13px var(--font);background:var(--surface)}
.gl-p b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gl-p small{position:absolute;right:-5px;bottom:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ink);color:var(--bg);font:600 10.5px/18px var(--font);text-align:center}
.gl-p:hover{border-color:var(--line-strong)}
.gl-p.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.gl-sec{margin:0 0 34px}
.gl-sec[hidden]{display:none}
.gl-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 12px}
.gl-sh h2{margin:0;font-size:22px}
.gl-sh h2 small{font:500 13px var(--font);color:var(--muted);margin-left:4px}
.gl-sh p{margin:0;font-size:13.5px;color:var(--muted)}

/* 壁纸：缩略图左下角写设备和分辨率，图下有「下载原图」 */
.gl-oseg{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.gl-oseg .seg{height:30px;padding:0 12px;font-size:13px}
.gl-res{position:absolute;left:6px;bottom:6px;padding:1px 7px;border-radius:3px;background:var(--overlay);color:var(--on-overlay);font-size:11px;line-height:18px;pointer-events:none}
.gl-wa{display:inline-flex;gap:10px;flex:none}
.gl-wa a{color:var(--muted)}
.gl-wa a[download]{color:var(--accent-2);font-weight:600}
.gl-lb-dl{display:inline-flex;align-items:center;height:34px;margin-top:6px;padding:0 16px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink) !important;font-weight:700;text-decoration:none !important}
/* 人物页小入口 */
.ent-gal{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:13.5px}
.ent-gal:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.ent-gal-th{display:flex}
.ent-gal-th img{width:38px;height:38px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 2px var(--surface)}
.ent-gal-th img+img{margin-left:-10px}
.ent-gal b{color:var(--accent)}

/* 灯箱：大图＋作品名、作者、平台、原帖；左右键或左右滑换张，Esc 关 */
.gl-lb{position:fixed;inset:0;z-index:210;display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:minmax(0,1fr) auto;background:var(--overlay);-webkit-backdrop-filter:blur(10px) brightness(.45);backdrop-filter:blur(10px) brightness(.45);color:var(--on-overlay)}
.gl-lb-img{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:20px 0 8px}
.gl-lb-img img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:3px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.gl-lb-cap{grid-column:1/-1;grid-row:2;padding:4px 20px 20px;text-align:center;line-height:1.55}
.gl-lb-cap h4{margin:0;font:700 17px var(--font-head);color:var(--on-overlay)}
.gl-lb-cap p{margin:2px auto 0;max-width:46em;font-size:13.5px;opacity:.86}
.gl-lb-cap a{color:var(--on-overlay);text-decoration:underline;text-underline-offset:3px}
.gl-lb-btn{align-self:center;justify-self:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--on-overlay);font-size:22px;line-height:1;cursor:pointer}
.gl-lb-btn:hover{background:rgba(255,255,255,.24)}
.gl-lb-prev{grid-column:1;grid-row:1}.gl-lb-next{grid-column:3;grid-row:1}
.gl-lb-x{position:absolute;top:12px;right:14px;width:40px;height:40px}
.gl-lb-n{position:absolute;top:20px;left:20px;font-size:12.5px;opacity:.7}
body.gl-lock{overflow:hidden}

@media (max-width:860px){
  .gl-just{--rh:128px;gap:10px 6px}
  .gl-i figcaption{font-size:11px}
  .gl-i figcaption a{display:none}
  .gl-i figcaption .gl-wa a[download]{display:inline}
  .gl-bar{position:static;margin:0 0 14px;padding:4px 0 10px}
  .gl-people,.gl-people.gl-fold{flex-wrap:nowrap;max-height:none;overflow-x:auto;scrollbar-width:none;padding:2px 6px 8px 2px}
  .gl-more{display:none}
  .gl-people::-webkit-scrollbar{display:none}
  .gl-p{flex:none;width:46px;height:46px}
  .gl-lb{grid-template-columns:0 minmax(0,1fr) 0}
  .gl-lb-btn.gl-lb-prev,.gl-lb-btn.gl-lb-next{display:none}
  .gl-lb-img{padding:56px 8px 8px}
}
/* gallery:end */

/* 路线卡配装标签（对比页旧样式挪走后补回原来的效果，10-16） */
.rc-build .rk{display:inline-block;font-size:12.5px;font-weight:700;line-height:22px;padding:0 8px;border-radius:4px}

/* 职业表不出横向滚动条（10-16：「明明中间有很多空间，但是还是有横向的 scroll bar」）：条件小块之间可换行，小块内部不断开；表格按容器宽排 */
.cls-tbl{width:100%}
.cls-tbl .cls-cond{white-space:normal;min-width:120px}
.cls-tbl .cls-cond .cv{white-space:nowrap;margin:2px 4px 2px 0}
.cls-tbl td:nth-child(2){min-width:90px}
.cls-tbl .gm-tot{min-width:64px}

/* 最高档改叫 SS（10-16），沿用原 T0 的颜色 */
.tier-ss{background:var(--tier-t0)}
.tlabel.tier-ss{font-size:24px}

/* 数据库名字列：等级徽章跟在名字右边按字宽；没图标的留空位（10-16） */
.db-nmw > span{align-items:flex-start}
.db-nml{display:flex !important;flex-direction:row !important;align-items:center;gap:6px;flex-wrap:wrap}
.db-nml .skb{flex:none;width:auto;min-width:0;padding:0 6px;line-height:18px;font-size:12px}
.iicon-none{display:inline-block;flex:none}
.dbtab .iicon-none,.tbl-db .iicon-none{width:24px;height:24px}
.tbl-arts td{vertical-align:middle}
.tbl-arts td:last-child{min-width:14em}

/* 分阶段配装（pages_builds，10-16 Teemo：「每个核心阶段都有一套build」） */
.bd-lead{color:var(--ink-2);font-size:14px;margin:4px 0 14px}
.bd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bd-tab{font:inherit;font-size:14px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.bd-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.bd-route{display:none}
.bd-route.on{display:block}
.bd-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;margin:0 0 12px;padding:10px 12px;border-radius:var(--radius);background:var(--surface-2,var(--surface))}
.bd-cs{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.bd-cs small{color:var(--muted);font-weight:400;margin-left:2px}
.bd-chain .arr{color:var(--muted)}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bd-stage{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.bd-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.bd-h a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:16px}
.bd-lv{font:700 12.5px/20px var(--font);padding:0 8px;border-radius:4px;background:var(--accent);color:#fff}
.bd-human{font-size:11.5px;line-height:18px;padding:0 6px;border-radius:4px;border:1px solid var(--accent);color:var(--accent)}
.bd-when{flex-basis:100%;color:var(--muted);font-size:12px}
.bd-r{display:grid;grid-template-columns:4.6em 1fr;gap:6px;align-items:start;font-size:13.5px}
.bd-k{color:var(--muted);font-size:12.5px;line-height:24px}
.bd-v{min-width:0;line-height:24px}
.bd-chips{display:flex;flex-wrap:wrap;gap:4px}
.bd-none{color:var(--muted)}
.bd-sub{display:block;color:var(--muted);font-size:12px;line-height:18px}
.bd-bat{display:inline-flex;align-items:center;gap:6px}
.bd-bat-i{width:26px;height:26px;object-fit:contain}
.bd-why{font-size:13px;color:var(--ink-2);margin:4px 0 0;padding-top:6px;border-top:1px dashed var(--line)}
.bd-cond{font-size:12.5px;color:var(--muted)}
.bd-cond summary{cursor:pointer}
.bd-cond ul{margin:4px 0 0;padding-left:18px}
.bd-dev{font-size:11.5px;color:#b07d2a;background:rgba(176,125,42,.08);border-radius:4px;padding:4px 6px;word-break:break-all}
@media (max-width:560px){.bd-grid{grid-template-columns:1fr}}
.rc-more{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600}

/* 数据库数字浅色：同一类里越强越深（pages_db HEAT） */
.tbl .hv{font-variant-numeric:tabular-nums}

/* contrib:start — 玩家投稿在别的页面上的样子（10-16 · Claude Opus 5.5；生成器 site/gen/pages_contrib.py，脚本 assets/contrib.js）：
   人物页的玩家配装（游戏装备栏那样一条条）、点赞评论、分享入口；整屏写稿、玩家投稿页、审核页的样式在 assets/contrib.css */
.ct-badge{display:inline-block;font:600 11.5px/18px var(--font);padding:0 6px;border-radius:4px;background:color-mix(in srgb,var(--accent-2) 14%,transparent);color:var(--accent-2);margin-right:6px;vertical-align:1px}
.bd-tab.on .ct-badge{background:rgba(255,255,255,.22);color:inherit}
.ct-by{margin:-4px 0 10px;font-size:13px;color:var(--muted)}
.ct-by b{color:var(--ink-2);font-weight:600}
.ct-who{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink);padding:1px 8px 1px 2px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
a.ct-who:hover{text-decoration:none;border-color:var(--lk-char)}
.ct-cls{padding-left:4px}
.ct-av{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none;background:var(--surface-2)}
.ct-av-t{display:inline-grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-2)}
.ct-more{font-size:13.5px;font-weight:600}
/* 一条条的配装：左图标、名字、右边关键数值或一句效果（像游戏里的战技、装备栏） */
.sl{display:flex;flex-direction:column;gap:3px;min-width:0}
.sl-h{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em;margin:2px 0 1px}
.sl-r{display:flex;align-items:center;gap:8px;min-height:32px;padding:3px 8px;border-radius:4px;background:color-mix(in srgb,var(--surface-2) 70%,transparent);font-size:13.5px;min-width:0}
.sl-i{flex:none;width:24px;height:24px;object-fit:contain;border-radius:3px}
.sl-i0{display:inline-block;background:var(--line)}
.sl-n{flex:none;font-weight:600;color:var(--ink);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.sl-n:hover{text-decoration:underline}
.sl-x{flex:1;min-width:0;text-align:right;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ct-stage{gap:8px}
.ct-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.ct-shots{margin-top:12px}
/* 玩家文字里的图和表 */
.cm-fig{margin:14px 0;max-width:100%}
.cm-fig img{display:block;max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2)}
.cm-fig figcaption{font-size:13px;color:var(--muted);margin-top:4px}
.cm-gal{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cm-gal .cm-fig{margin:0;flex:0 1 220px}
.cm-gal .cm-fig img{width:100%;height:140px;object-fit:cover}
.cm-tbl td,.cm-tbl th{white-space:normal}
/* 点赞、评论（每套配装、每张路线卡、玩家投稿） */
.sc{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.sc[hidden]{display:none}
.route-card .sc{margin-top:10px}
.sc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sc-like,.sc-cm{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:15px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;cursor:pointer}
.sc-like b,.sc-cm b{font-variant-numeric:tabular-nums;color:var(--ink)}
.sc-like:hover,.sc-cm:hover{border-color:var(--accent)}
.sc-like.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
.sc-like.on b{color:var(--accent)}
.sc-ic{display:inline-flex}
.sc-msg{font-size:12.5px;color:var(--bad)}
.sc-panel{margin-top:10px}
.sc-panel[hidden]{display:none}
.sc-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.sc-list li{padding:8px 10px;border-radius:var(--radius);background:var(--surface-2);font-size:14px}
.sc-list li p{margin:2px 0 0}
.sc-list .sc-none{background:none;color:var(--muted);padding:0}
.sc-m{display:flex;gap:10px;font-size:12.5px;color:var(--muted)}
.sc-m b{color:var(--ink-2)}
.sc-form{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px;align-items:start}
.sc-form .ct-in,.sc-form .ct-ta{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg);color:var(--ink);font:inherit;font-size:14px;padding:6px 10px}
.sc-form .ct-in{height:36px}
.sc-form .ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sc-acts{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.sc-acts small{color:var(--muted)}
.sc-out{grid-column:1/-1;margin:0;font-size:13px;color:var(--good)}
.sc-sort{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;color:var(--muted)}
/* 人物页「分阶段配装」末尾：分享你的配装 */
.ct-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface)}
.ct-share-t,.ct-bar-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.ct-share-t span,.ct-bar-t span{font-size:13px;color:var(--muted)}
/* 人物页「培养」：推荐路线卡下面 */
.ct-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:-8px 0 22px;padding:10px 14px;border-radius:var(--radius);background:var(--surface-2)}
.ct-bar .ct-more{flex-basis:100%}
.ct-mini{list-style:none;margin:0;padding:0;flex-basis:100%;display:flex;flex-direction:column;gap:4px}
.ct-mini li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13.5px}
.ct-mini-c{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;color:var(--ink-2)}
.ct-mini-c .bd-cs{font-weight:400;font-size:13px}
.ct-mini-c .cicon{width:18px;height:18px}
.ct-mini small{color:var(--muted)}
/* 攻略首页：投稿攻略 */
.ct-gcta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;font-size:14px;color:var(--ink-2)}
/* 站长区：参考素材｜投稿审核｜开发者版 */
.ct-onav{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ct-onav a{padding:4px 12px;border:1px solid var(--line-strong);border-radius:16px;font-size:13.5px;color:var(--ink-2)}
.ct-onav a[aria-current]{border-color:var(--accent);color:var(--accent);font-weight:700}
.foot .muted a{color:var(--accent-2)}
/* 顶栏登录状态：没登录「登录」，登录后名字，点开「我的账号／我的投稿／我的队伍／退出」 */
.acct{position:relative;flex:none}
.acct[hidden]{display:none}
.acct-in{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:16px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.acct-in:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.acct-btn{display:inline-flex;align-items:center;gap:6px;height:32px;max-width:160px;padding:0 8px 0 3px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.acct-btn[aria-expanded="true"]{border-color:var(--accent)}
.acct-av{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px}
.acct-me{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);overflow:hidden}
.acct-me:hover,.acct-me[aria-current="page"]{border-color:var(--accent);text-decoration:none}
.acct-me .acct-av{width:100%;height:100%;font-size:15px}
.acct-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.av-t{background:var(--accent);color:var(--accent-ink);font-weight:700}
.role-b{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 6px;border-radius:9px;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;vertical-align:middle}
.role-owner{background:var(--accent);color:var(--accent-ink)}
.role-admin{background:var(--accent-2);color:var(--bg)}
.acct-me.has-role{width:auto;gap:5px;padding:0 8px 0 0;border-radius:18px}
.acct-me.has-role .acct-av{width:32px;height:32px}
@media (max-width:600px){
  .acct-me.has-role{position:relative;width:36px;padding:0;border-radius:50%;overflow:visible}
  .acct-me.has-role .acct-av{border-radius:50%;overflow:hidden}
  .acct-me.has-role .role-b{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);height:14px;padding:0 4px;font-size:9.5px;box-shadow:0 0 0 2px var(--bg)}
}
.acct-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-car{font-style:normal;font-size:10px;color:var(--muted)}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:150px;display:flex;flex-direction:column;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow)}
.acct-menu[hidden]{display:none}
.acct-menu a,.acct-out{display:block;padding:7px 10px;border-radius:4px;color:var(--ink);font:inherit;font-size:14px;text-align:left;background:none;border:0;cursor:pointer}
.acct-menu a:hover,.acct-out:hover{background:var(--surface-2);text-decoration:none}
.acct-out{border-top:1px solid var(--line);border-radius:0 0 4px 4px;margin-top:4px;color:var(--bad)}
@media (max-width:600px){.acct-n,.acct-car{display:none}.acct-btn{padding:0 2px}.acct-in{padding:0 10px}}
@media (max-width:600px){
  .sc-form{grid-template-columns:1fr}
  .sl-n{max-width:60%}
}
/* contrib:end */

/* 人物页「背景介绍」（pages_bio） */
.bio{display:flex;flex-direction:column;gap:18px;max-width:980px}
.bio-intro p{font-size:15.5px;line-height:1.85;margin:0;padding:14px 18px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.bio-sec h2{font-size:17px;margin:0 0 10px}
.bio-t th{width:7em;color:var(--muted);font-weight:500}
.bio-rels,.bio-sups{display:flex;flex-wrap:wrap;gap:10px}
.bio-rel{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;min-width:200px}
.bio-rel span{display:flex;flex-direction:column}
.bio-rel small{color:var(--muted);font-size:12.5px}
.bio-sup{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--ink);text-decoration:none;width:72px;text-align:center}
.bio-st{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:10px 14px;margin-bottom:8px}
.bio-st h3{font-size:15px;margin:0 0 6px}
.bio-st summary{cursor:pointer;font-weight:700}
.bio-sp{margin-left:10px;font-weight:400;font-size:12.5px;color:var(--muted)}
.bio-st p{margin:8px 0 0;line-height:1.8}
.st-h{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line-strong);cursor:help}
.st-h:hover{color:var(--accent)}
.ab-exp td,.ab-exp th{border-top:1px solid var(--line-strong)}
.bio-site{margin-left:8px;color:var(--muted);font-size:12px}
.cls-gsum{margin-left:12px;font-size:14px;font-weight:500;color:var(--muted)}.cls-gsum b{color:var(--ink);font-size:16px}
.stn{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.st-c-hp{color:var(--st-hp)}.st-c-str{color:var(--st-str)}.st-c-mag{color:var(--st-mag)}.st-c-spd{color:var(--st-spd)}.st-c-dex{color:var(--st-dex)}
.st-c-def{color:var(--st-def)}.st-c-res{color:var(--st-res)}.st-c-lck{color:var(--st-lck)}.st-c-cha{color:var(--st-cha)}
.stc{font-weight:600}

/* 能力总表 */
.sa-view{display:none}.sa-view.on{display:block}
.sa-t th.sa-sort{cursor:pointer;white-space:nowrap;user-select:none}
.sa-t th.sa-sort:hover{color:var(--accent)}
.sa-t th[data-dir="desc"]::after{content:" ▼";font-size:10px}
.sa-t th[data-dir="asc"]::after{content:" ▲";font-size:10px}
.sa-t td.sa-n{text-align:right;font-variant-numeric:tabular-nums}
.sa-who a{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;white-space:nowrap}
.sa-t td,.sa-t th{padding:6px 8px}

/* 路线卡重排（10-16 Teemo：「培养界面排版的路线卡片排版很混乱」）：一条路线一张通栏卡，配装按 标签｜内容 两列 */
.route-cards{grid-template-columns:1fr !important;gap:14px}
.route-card{padding:16px 18px}
.rc-h{font-size:16px}
.rc-chain{gap:6px 8px;margin:4px 0 2px}
.rc-build{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:6px 24px;font-size:13.5px}
.rc-build .rb{display:grid !important;grid-template-columns:4.5em 1fr;gap:10px;align-items:start;padding:4px 0}
.rc-build .rk{width:auto !important;text-align:center;align-self:start}
.rc-build .rv{min-width:0;line-height:1.7}
.rc-chips{display:flex;flex-wrap:wrap;gap:6px 10px}
.rc-it{display:inline-flex;align-items:center;gap:4px}
.rc-it small{color:var(--muted);font-size:12px}
@media (max-width:560px){.rc-build{grid-template-columns:1fr}}
/* 首页搜索下拉被下面卡片挡住（10-16）：hero 用了 isolation 自成层叠上下文，整个 hero 抬到后面内容之上；下拉高度按屏幕剩余空间收 */
.hm-hero{z-index:5}
.hm-search .qres{box-shadow:0 18px 40px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2)}
/* 四主角逐章卡：每张图各自的缩放和取景（10-16 Teemo：「人物希望摆放更好一点，尤其是最右边的人物」） */
.hm-walk img{transform:scale(var(--s,1));transform-origin:var(--o,50% 0);object-position:var(--p,50% 4%)}
.hm-walk:hover img{transform:scale(calc(var(--s,1) * 1.04))}
.hm-walk.r-cai{--p:50% 2%;--s:1.04;--o:45% 0}
.hm-walk.r-dietrich{--p:58% 0;--s:1.08;--o:58% 0}
.hm-walk.r-theodora{--p:52% 0;--s:1.08;--o:52% 0}
.hm-walk.r-leda{--p:62% 0;--s:1.32;--o:60% 2%}
/* 人名串小头像（charchain.py） */
.cch{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin:1px 0;padding:1px 8px 1px 2px;border-radius:999px;background:var(--surface-2);color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap}
.cch img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--surface)}
.cch:hover{color:var(--accent)}

/* 武器/道具详情页头紧凑（10-16） */
.itd-h{align-items:center;gap:16px;margin-bottom:10px}
.itd-h .itd-icon{width:64px;height:64px}
.itd-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.itd-title h1{margin:0}
.itd-tag{font-size:13px;line-height:24px;padding:0 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.itd-tag b{color:var(--ink)}
.itd-h .lead{margin:6px 0 0}
.itd-quick{display:flex !important;flex-wrap:wrap;gap:0;width:fit-content;max-width:100%}
.itd-quick .q{min-width:76px;padding:8px 14px}

/* 分阶段配装 v2：游戏装备栏式竖排（10-16 Teemo：「最好类似游戏中的战技那种一条条的显示」） */
.bd-v2 .bs-grid{display:flex;flex-direction:column;gap:10px}
.bs-blk{display:flex;flex-direction:column;gap:2px}
.bs-h{font-size:12px;color:var(--muted);letter-spacing:.06em;margin:2px 0 2px}
.bs{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;min-height:32px;padding:3px 8px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-2),transparent);color:var(--ink);text-decoration:none;font-size:13.5px}
a.bs:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,var(--surface-2)),transparent)}
.bs-i{width:26px;height:26px;object-fit:contain;display:block;border-radius:4px}
i.bs-i{background:color-mix(in srgb,var(--line) 60%,transparent)}
.bs-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bs-s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14em}
.bs-eq{grid-column:2;justify-self:start;font-size:11px;line-height:16px;padding:0 6px;border-radius:3px;background:var(--accent);color:#fff;margin-top:-2px}
.bs:has(.bs-eq){grid-template-columns:26px auto auto 1fr}
.bs:has(.bs-eq) .bs-eq{grid-column:auto;margin:0}
.bs:has(.bs-eq) .bs-s{justify-self:end}
.bs-empty{opacity:.55}
.bs-empty .bs-n{font-weight:400;color:var(--muted)}
.bs-kv{display:grid;grid-template-columns:4.6em 1fr;gap:6px;font-size:13.5px;margin-top:6px}
.bs-kv>span{color:var(--muted);font-size:12px;line-height:22px}
.bd-v2{gap:8px}
.bd-grid:has(.bd-v2){grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
/* 路线卡特技/战技：一条一行（图标｜名字｜条件靠右），像游戏状态页的列表 */
.rc-chips{display:flex !important;flex-direction:column !important;gap:2px !important}
.rc-it{display:grid !important;grid-template-columns:24px auto 1fr;align-items:center;gap:8px;min-height:30px;padding:2px 8px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-2),transparent);color:var(--ink);text-decoration:none}
a.rc-it:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,var(--surface-2)),transparent)}
.rc-ic{width:24px;height:24px;object-fit:contain;border-radius:4px;display:block}
i.rc-ic{background:color-mix(in srgb,var(--line) 60%,transparent)}
.rc-nm{font-weight:600;white-space:nowrap}
.rc-it small{justify-self:end;text-align:right;color:var(--muted);font-size:12px}

/* v2 配装卡修正：日期行不撑满；名字不截断，说明文字截断 */
.bd-v2 .bd-when{flex-basis:auto !important}
.bs{grid-template-columns:26px max-content minmax(0,1fr) !important}
.bs-n{overflow:visible !important}
.bs-s{justify-self:end;max-width:100% !important;min-width:0}
.itd-rf-sum th,.itd-rf-sum td{border-top:2px solid var(--line-strong);font-weight:700}
/* 能力总表对齐（10-16 Teemo：「都没对齐」）：表头和数字一律居中，人物格一行（小头像＋名字） */
.sa-t{table-layout:fixed;width:100%}
.sa-t th:first-child{width:150px}
.sa-t th.sa-num,.sa-t td.sa-n{text-align:center !important}
.sa-t td.sa-n{font-variant-numeric:tabular-nums;font-size:14px}
.sa-t td.sa-n[data-v="-1"]{color:var(--muted)}
.sa-t th.sa-sum,.sa-t td:last-child{font-weight:700}
.sa-who{padding:4px 8px !important;vertical-align:middle}
.sa-who a{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;white-space:nowrap}
.sa-who img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 12%;flex:none}
.sa-t td,.sa-t th{vertical-align:middle;padding:6px 6px}
/* 公式框：一行一个等式，大字、居左、和正文分开 */
.box-formula{border:1px solid color-mix(in srgb,var(--accent-2) 45%,var(--line));background:color-mix(in srgb,var(--accent-2) 7%,var(--surface));border-radius:var(--radius);padding:12px 18px;margin:12px 0}
.box-formula>.box-h,.box-formula>summary{display:none}
.box-formula p{margin:0;padding:5px 0;font-size:16.5px;line-height:1.6;font-weight:600;letter-spacing:.02em}
.box-formula p+p{border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}
.box-formula p small{display:block;font-weight:400;font-size:13px;color:var(--muted);letter-spacing:0}
.box-formula>.box-title{display:none}

.ab-rl{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line-strong)}
.ab-rl:hover{color:var(--accent)}
/* 背景介绍：关系卡、支援对象（不套 thumb 链接） */
.bio-face{width:48px;height:48px;border-radius:8px;object-fit:cover;object-position:50% 10%;flex:none;background:var(--surface-2)}
.bio-rel{display:flex;align-items:center;gap:12px;min-width:240px;max-width:360px}
.bio-rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.bio-sups{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
.bio-sup{width:auto}
.bio-sup .bio-face{width:56px;height:56px}
.cls-wp{white-space:nowrap}.cls-wp img{margin-right:3px;vertical-align:middle}.cls-mv{text-align:center}
.q-it{display:inline-flex;align-items:center;gap:4px;margin-right:10px;vertical-align:middle}
.q-it img{width:22px;height:22px;object-fit:contain}
.q-eff{margin-left:8px;font-weight:400;font-size:13.5px;color:var(--ink-2)}
/* 通用时间窗口（timewin.py） */
.tw{display:flex;flex-direction:column;gap:3px;min-width:320px;max-width:560px}
.tw-r{display:grid;grid-template-columns:92px 46px 1fr 84px;align-items:center;gap:8px;font-size:12.5px;line-height:20px}
.tw-who{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:600;color:var(--ink)}
.tw-who img{width:20px;height:20px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.tw-ch{color:var(--muted);white-space:nowrap}
.tw-bar{position:relative;height:10px;border-radius:5px;background:color-mix(in srgb,var(--line) 55%,transparent)}
.tw-fill{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--rc,var(--accent))}
.tw-cai{background:var(--r-cai,#c0504d)}.tw-dietrich{background:var(--r-dietrich,#3d7cc9)}.tw-theodora{background:var(--r-theodora,#c9a13d)}.tw-leda{background:var(--r-leda,#7b5cc9)}
.tw-open-l{border-top-left-radius:0;border-bottom-left-radius:0;-webkit-mask:linear-gradient(90deg,transparent,#000 18px)}
.tw-open-r{border-top-right-radius:0;border-bottom-right-radius:0;-webkit-mask:linear-gradient(270deg,transparent,#000 18px)}
.tw-d{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.tw-axis .tw-bar{height:16px;background:none}
.tw-axis .tw-bar i{position:absolute;top:0;bottom:0;border-left:1px dashed var(--line)}
.tw-axis .tw-bar b{position:absolute;top:0;left:3px;font-size:10.5px;font-weight:400;color:var(--muted);white-space:nowrap}
.tw-yr{color:var(--muted);font-weight:400}
td.itd-when{min-width:340px}
.itd-ob th{white-space:nowrap}
td.itd-when{min-width:460px}
.tw{max-width:none}
.tw-r{grid-template-columns:88px 42px minmax(180px,1fr) 84px}
.tw-axis .tw-bar b{font-size:10px}
.bd-draft{margin-left:6px;font-size:11px;padding:0 5px;border-radius:3px;background:var(--surface-2);color:var(--muted)}
.gl-lb-img{overflow:hidden;touch-action:none}.gl-lb-img img{transition:transform .08s ease-out;will-change:transform}
/* 文章里人名旁的头像再大 15%（10-16 Teemo）：28→32、表格里 34→39 */
.lk-char .lk-av{width:32px !important;height:32px !important;vertical-align:-10px}
td .lk-char .lk-av,th .lk-char .lk-av{width:39px !important;height:39px !important;vertical-align:-13px}
/* 攻略首页：视频攻略精选（按主题，每组 4 张卡） */
.gp-grp{margin:18px 0 26px}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gp-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;color:var(--ink);text-decoration:none}
.gp-c:hover{border-color:var(--accent)}
.gp-img{aspect-ratio:16/9;background:var(--surface-2);display:block;overflow:hidden}
.gp-img img{width:100%;height:100%;object-fit:cover;display:block}
.gp-b{display:flex;flex-direction:column;gap:5px;padding:10px 12px 12px}
.gp-b b{font-size:14.5px;line-height:1.45}
.gp-b small{font-size:12.5px;color:var(--ink-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gp-b i{font-style:normal;font-size:12px;color:var(--muted)}
.gd-fold{margin:18px 0}
.gd-fold summary{cursor:pointer;font-weight:700;padding:8px 0}

/* 10-17 好感怎么涨：每种涨法一行，条＝这一下占一级的多少（人物页好感 tab、好感栏目） */
.bnd-rate{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);margin:0 0 20px}
.bnd-rate .bnd-bh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bnd-rate .bnd-bh small{font-size:12.5px;color:var(--muted);font-weight:400}
.br-more{margin-left:auto;font-size:13px}
.br-l0{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(160px,1.6fr) minmax(70px,.7fr) minmax(120px,1.2fr);column-gap:14px}
.br-l0 li{display:contents}
.br-l0 li>span{padding:8px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;min-width:0}
.br-l0 li:first-child>span{border-top:0}
.br-n{font-weight:600}
.br-n small{font-weight:400;color:var(--muted);font-size:12px}
.br-bar{flex:1;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;min-width:60px}
.br-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#d9b44a,#f3d36b)}
.br-p{font-variant-numeric:tabular-nums;font-size:13.5px;min-width:42px;text-align:right}
.br-t{text-align:left;font-weight:600}
.br-x{font-size:13px;color:var(--ink-2)}
.br-l{font-size:12.5px;color:var(--muted)}
@media (max-width:760px){
  .br-l0{grid-template-columns:1fr auto}
  .br-l0 li{display:grid;grid-template-columns:subgrid;grid-column:1/-1;border-top:1px solid var(--line);padding:6px 0}
  .br-l0 li>span{border-top:0;padding:3px 0}
  .br-v{grid-column:1/-1}
}
/* 10-17 路线结构图：站点胶囊、头像圈 */
.dg-struct .dg-th{stroke-width:6}
.dg-stn{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.dg-st1{font:600 14px var(--font);fill:var(--ink)}
.dg-st2{font:12px var(--font);fill:var(--muted)}
.dg-avb{fill:var(--surface);stroke-width:3}
.dg-struct .dg-lab{font:700 15px var(--font)}

/* 10-17 配装 v2 补：骑乘特技羁绊标、饰品备用标、库里没名字的格子（灰字）、同一路线各阶段同名栏对齐的占位行 */
.bs:has(.bs-eq){grid-template-columns:26px max-content max-content minmax(0,1fr) !important}
.bs-spare{background:var(--surface-2) !important;color:var(--muted) !important;box-shadow:inset 0 0 0 1px var(--line)}
.bs-bond{background:color-mix(in srgb,var(--accent) 55%,var(--surface-2)) !important}
div.bs{cursor:default}
.bs-gen .bs-n{font-weight:400;color:var(--ink-2)}
.db-gen{font-weight:400;color:var(--ink-2)}
#db-battalions td:nth-child(3){word-break:keep-all}   /* 军团兵「加成」只在两项之间换行（配合生成器里能力名与数值间的 U+2060） */   /* 数据库表里没有简中名的条目：效果前半句当名字（10-17） */
.bs-pad{visibility:hidden}
.bs-blk-pad .bs-h{visibility:hidden}
.bd-v2 .bd-when{display:block;min-height:18px;line-height:18px}
.bd-lv[data-tt]{cursor:help}
@media (max-width:560px){.bs-pad,.bs-blk-pad{display:none}}

/* 10-17 逐章攻略首页：线路切换＋章节卡片 */
.r-prologue{--rc:var(--muted)}.r-war{--rc:var(--accent)}.r-salvation{--rc:var(--accent-2)}.r-para{--rc:var(--gold)}
.wk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px}
.wk-tab{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.wk-tab:hover{border-color:var(--rc)}
.wk-tab.on{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 16%,var(--surface));box-shadow:inset 0 0 0 1px var(--rc)}
.wk-face{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--rc);background:var(--surface-2);display:grid;place-items:center}
.wk-face img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.wk-glyph{font:700 15px var(--font-head);color:var(--rc)}
.wk-tn{display:flex;flex-direction:column;line-height:1.2;font-weight:700;font-size:14.5px;text-align:left}
.wk-tn small{font-weight:400;font-size:11.5px;color:var(--muted)}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.wk-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}
.wk-c:hover{border-color:var(--rc);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.wk-img{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;display:block}
.wk-img img{width:100%;height:100%;object-fit:cover;display:block}
.wk-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 22%,var(--surface-2)),var(--surface-2))}
.wk-no{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:6px;background:color-mix(in srgb,var(--rc) 88%,#000);color:#fff;font:700 14px var(--font-head);letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.wk-b{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.wk-t{font-weight:700;font-size:16px;line-height:1.35}
.wk-s{font-size:13px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){
  .wk-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .wk-tab{flex:none}
  .wk-grid{grid-template-columns:1fr}
}
.bd-v .bs{grid-template-columns:26px minmax(0,1fr) !important;background:none;padding-left:0}
.bd-v .bs .bs-s{display:none}
a.lk-skill{color:var(--lk-class)}

/* 10-17 自查：攻略卡片铺满一行；正文竖图别占满一屏；军团兵「谁能带」不折行 */
.gp-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.prose .fig img{width:auto;max-width:100%;max-height:min(640px,78vh);margin:0 auto}
.prose .fig{background:var(--surface-2)}
.db-tbl td.nowrap,table td.nowrap{white-space:nowrap}

/* 10-17 自查：手机上人物页首屏先给名字和要点——立绘缩成左侧小方块，不再占满一屏 */
@media (max-width:640px){
  .ent-h.has-art{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .ent-h.has-art .ent-hb{flex:1 1 calc(100% - 118px);min-width:0}
  .ent-h.has-art .gspark{flex:1 1 100%;order:3}
  .ent-h.has-art .ent-pt{width:104px}
  .ent-h.has-art .ent-pf{width:104px;height:104px;aspect-ratio:auto}
  .ent-h.has-art .ent-pb{gap:4px}
  .ent-h.has-art .ent-pb button,.ent-h.has-art .ent-pb a{font-size:11px;padding:2px 6px}
  .ent-h.has-art .ent-hb h1{font-size:24px}
}

/* 10-17 小巧思：最近看过、回到顶部、复制小节链接 */
.qres-h{padding:6px 12px 4px;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.totop{position:fixed;right:18px;bottom:22px;z-index:60;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:color .15s,border-color .15s}
.totop:hover{color:var(--accent);border-color:var(--accent)}
.totop[hidden]{display:none}
.copytip{margin-left:10px;font-size:12px;font-weight:400;color:var(--good);vertical-align:middle}
@media (max-width:760px){.totop{right:12px;bottom:72px}}

/* 10-17 首页本周清单 */
.hm-week .hm-h{display:flex;align-items:baseline;gap:12px}
.hw-reset{margin-left:auto;border:1px solid var(--line-strong);background:none;color:var(--ink-2);border-radius:999px;padding:3px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.hw-reset:hover{color:var(--accent);border-color:var(--accent)}
.hw-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.hw-l li{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:opacity .2s}
.hw-l label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer}
.hw-l input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.hw-l b{font-size:14.5px;white-space:nowrap}
.hw-l small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-l a{color:var(--muted);text-decoration:none;padding:0 2px}
.hw-l a:hover{color:var(--accent)}
.hw-l li.done{opacity:.5}
.hw-l li.done b{text-decoration:line-through}
/* 数据库大表：表头吸顶（第 11 条） */
.tbl-wrap{position:relative}
.db-tbl thead th,.sa-t thead th{position:sticky;top:0;z-index:2;background:var(--surface-2)}

/* 10-17 首页：高粉视频攻略一排（替换一半自写攻略入口） */
.hm-vids{margin-top:22px}
.hm-vids .hm-k{display:flex;align-items:baseline;gap:10px}
.hm-vids .hm-k-a{margin-left:auto}
.hm-vgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gp-img{position:relative}
.hm-vt{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:5px;background:rgba(10,12,18,.78);color:#f3e7cf;font-style:normal;font-size:11.5px;font-weight:600}

/* ---------- 全站「我的进度」（10-17：顶栏小胶囊、选线和章节；招募页、逐章、人物页跟着变；site.js「我的进度」段） ---------- */
.prg-st{white-space:nowrap}
.cv.prg-st{font-weight:700}
.prg-now{color:var(--good)}
.prg-soon,.prg-late{color:var(--bad)}
.prg-early{color:var(--muted)}
.prg-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 2px;font-size:14px;color:var(--ink-2)}
.prg-k{font-size:12.5px;color:var(--muted)}
.prg-which{height:24px;padding:0 10px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer}
.prg-which:hover{border-color:var(--accent)}
.prg-line b{color:var(--ink)}
.prg-line .prg-st{font-size:12.5px;font-weight:700}
.lt.prg-cur{box-shadow:0 0 0 2px var(--accent)}
.wk-c.wk-cur{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){
}

/* 10-17 Teemo：「对于pc来说，每一行的文字量少了一点点」——宽屏正文栏放宽，一行约多 6–8 个字 */
@media (min-width:1200px){.prose{max-width:960px}.art.has-toc{grid-template-columns:190px minmax(0,1fr);gap:32px}}
/* 10-17 逐章线路切换：多人头像拼成小格子 */
.wk-multi{display:grid;width:100%;height:100%}
.wk-multi.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.wk-multi.n2{grid-template-columns:1fr 1fr}
.wk-multi img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
/* 10-17 Teemo：线路切换的头像有点小——放大 */
.wk-tab{padding:6px 16px 6px 6px;gap:10px}
.wk-face{width:46px;height:46px}
.wk-tn{font-size:15.5px}
.wk-tn small{font-size:12px}
@media (max-width:480px){
  .top .search{min-width:90px}
}
/* 10-17 逐章卡片封面：本章人物立绘横排（不用战场地图），底色是线路色 */
.wk-cv{display:flex;width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 55%,#0d1118),color-mix(in srgb,var(--rc) 18%,#0d1118));overflow:hidden}
.wk-cv img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;object-position:50% 12%;mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.wk-cv.n1 img{flex:0 0 62%;margin:0 auto;mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
.wk-cv img+img{margin-left:-8%}
/* 10-17 Teemo「职业图片…有点小」：职业表里的职业图标放大到 40px（手机 34px），名字不折行 */
.cls-tbl .cls-a{gap:8px;white-space:nowrap}
.cls-tbl .cicon{width:40px;height:40px;margin-right:0;vertical-align:middle}
.cls-tbl td{vertical-align:middle}
@media (max-width:640px){.cls-tbl .cicon{width:34px;height:34px}.cls-tbl .cls-a{gap:6px}}
/* 10-17 布局巡检：手机上职业表按固定百分比分列，武器图标和成长格子溢出压住「移动」「总成长」——窄屏改成按内容排、整表横滑 */
@media (max-width:760px){.cls-grp table.cls-tbl{table-layout:auto;min-width:0}.cls-grp .cls-tbl th{width:auto}}
/* 10-17 Teemo「人物筛选做得偏小」「擅长用图标，而不是文字」：人物图鉴筛选面板整体放大；擅长一行是熟练度图标块，选中的填强调色 */
#cfilter{gap:12px;padding:16px 18px}
#cfilter .fsearch{height:40px;max-width:420px;padding:0 12px;font-size:15px}
#cfilter .flabel{width:60px;font-size:14px}
#cfilter .frow{gap:8px}
#cfilter .fchip{height:36px;padding:0 15px;border-radius:18px;border-color:var(--line-strong);font-size:15px}
#cfilter .fchip:hover{border-color:var(--accent)}
#cfilter .fchip-lord{padding-left:4px;gap:8px}
#cfilter .fchip-lord img{width:28px;height:28px}
#cfilter .fchip-w{width:46px;height:46px;padding:0;justify-content:center;border-radius:10px}
#cfilter .fchip-w .pf-ic{width:32px;height:32px;margin:0;vertical-align:0}
#cfilter .fchip-w.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
@media (max-width:860px){#cfilter .frow-w{flex-wrap:wrap;overflow:visible;margin-right:0;padding-right:0}#cfilter .frow-w .flabel{width:100%}}
.cls-tbl td:first-child{white-space:nowrap}
.cls-tbl .cicon{max-width:none;flex:none}
/* 10-17 布局巡检：顶栏是两行（约 102px 高），吸顶的目录、筛选条、表头原来按 56/76px 算，滑上去就钻到顶栏底下被挡住 */
:root{--toph:102px}
.toc,.sec-side{top:calc(var(--toph) + 14px);max-height:calc(100vh - var(--toph) - 28px)}
.vt-bar,.cls-bar,.rc-tbl thead th{top:calc(var(--toph) - 1px)}
@media (max-width:1100px){.sec-side{max-height:none}}
@media (max-width:860px){.toc{max-height:none}}
/* 10-17 布局巡检：攻略页某组只有一两张卡（如「加护」）时 auto-fit 把一张卡撑满整行，封面图大到一屏——少于三张时按四列宽排 */
.gp-grid:not(:has(> :nth-child(3))){grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* 10-17 布局巡检：手机上人物页九项能力表的「第9名」被拆成两行 */
.ab-rk{white-space:nowrap}
/* 10-17 布局巡检：手机上数据库大表的「效果」「获取」列被挤到 80px，一行字折成十几行、每行 300px 高——长文字列给最小宽度，整表横滑 */
@media (max-width:760px){.tbl-db td.db-tx{min-width:240px}}
/* 10-17 布局巡检：「表头吸顶」原来没生效——外框 overflow-x:auto 自成滚动框，吸顶只在框里吸；数据库表的类名也写成了 .db-tbl（实际是 .tbl-db）。
   宽屏（≥1100px，这些表都放得下）外框不再当滚动框，表头贴在顶栏下面；手机照旧横滑 */
@media (min-width:1100px){
  .tbl-wrap:has(> .tbl-db),.tbl-wrap:has(> .sa-t){overflow:visible}
  .tbl-db thead th,.sa-t thead th{position:sticky;top:calc(var(--toph) - 1px);z-index:3;background:var(--surface-2)}
  .tbl-wrap:has(> .tbl-db) thead th:first-child,.tbl-wrap:has(> .sa-t) thead th:first-child{border-top-left-radius:var(--radius)}
  .tbl-wrap:has(> .tbl-db) thead th:last-child,.tbl-wrap:has(> .sa-t) thead th:last-child{border-top-right-radius:var(--radius)}
}
/* 10-17 布局巡检：首页四条线卡片的副标题有一行有两行，篇名高低不齐——副标题统一占两行高 */
.hm-walk-t small{min-height:2.8em}
/* 10-17 布局巡检：人物图鉴点了筛选，卡片 display:flex 盖过了 hidden，不合条件的人照样显示——筛选等于没用 */
#cgrid .ccard[hidden]{display:none}
/* 10-17 布局巡检：手机上能力总表固定布局挤在 358px 里，十一列数字叠成一团——窄屏给表最小宽度，外框横滑；人物列收窄 */
@media (max-width:760px){.sa-t{min-width:660px}.sa-t th:first-child{width:112px}.sa-who img{width:26px;height:26px}}

/* 机制页链接一排（攻略首页站内整理、视频页「机制」主题末尾；10-17） */
.mech-row{display:flex;align-items:flex-start;gap:12px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.mech-row>b{flex:none;font-size:14px;line-height:30px;color:var(--ink-2)}
.mech-ls{display:flex;flex-wrap:wrap;gap:6px 8px}
.mech-l{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:15px;font-size:14px;color:var(--ink);background:var(--bg)}
.mech-l:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.mech-all{display:inline-flex;align-items:center;height:30px;padding:0 6px;font-size:13.5px;font-weight:600}
@media (max-width:600px){.mech-row{flex-direction:column;gap:6px}.mech-row>b{line-height:1.4}}

/* 10-17 人物图鉴竖卡（设计稿第 2 节 · Claude Opus 5.5 人物图鉴子代理）：1366 宽一行 7 张、手机 3 张；
   方形大头像＋左上梯度，下面名字、初始职业（职业图标）、四条主角线（能招才亮）。筛选面板第一行：左搜索、右两个按钮 */
.sec-n{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);letter-spacing:.02em}
#cfilter .cf-top{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
#cfilter .cf-top .fsearch{flex:1 1 280px}
.cf-act{display:flex;gap:8px;margin-left:auto;flex:none}
.cf-act .btn{height:40px;padding:0 16px;font-size:14.5px;font-weight:600;border-radius:20px;text-decoration:none}
.cf-act .btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
#cgrid.cg-l{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px 12px}
#cgrid.cg-l .ccard{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
#cgrid .ccard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow);text-decoration:none}
#cgrid .ccard:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-color:var(--accent);transform:translateY(-3px)}
#cgrid .ccard[hidden]{display:none}
#cgrid.cg-l .cc-pic{position:relative;display:block;aspect-ratio:1/1;background:#17232a;overflow:hidden;border-bottom:1px solid var(--line)}
#cgrid.cg-l .cc-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .2s ease}
#cgrid.cg-l .ccard:hover .cc-pic img{transform:scale(1.04)}
#cgrid.cg-l .cc-mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 44px/1 var(--font-head);color:#e9e2d4}
#cgrid.cg-l .cc-pic .tier{position:absolute;left:7px;top:7px;min-width:30px;height:24px;padding:0 6px;border-radius:5px;font-size:13.5px;box-shadow:0 1px 4px rgba(0,0,0,.45)}
#cgrid.cg-l .ccard-b{display:flex;flex-direction:column;gap:3px;padding:9px 10px 10px;min-width:0;line-height:1.35}
#cgrid.cg-l .ccard-n{display:block;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cgrid.cg-l .ccard-e{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2);min-width:0}
#cgrid.cg-l .ccard-e>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cgrid.cg-l .ccard-e .cicon{width:20px;height:20px;margin:0;flex:none}
#cgrid.cg-l .ccard-r{display:flex;align-items:center;gap:6px;margin-top:6px;min-height:22px}
#cgrid.cg-l .ccard-r .lt-icon{padding:0;background:none;box-shadow:none;line-height:0}
#cgrid.cg-l .ccard-r .lt-icon img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 20%;opacity:1;box-shadow:0 0 0 2px var(--rc)}
#cgrid.cg-l .ccard-r .lt-icon.lt-off img{filter:grayscale(1);opacity:.28;box-shadow:0 0 0 1px var(--line-strong)}
#cgrid.cg-l .cc-later{font-size:12px;color:var(--muted);line-height:22px}
@media (max-width:600px){
  .cf-act{width:100%;margin-left:0}
  .cf-act .btn{flex:1 1 0;justify-content:center;height:38px;padding:0 8px;font-size:14px}
  #cfilter .cf-top .fsearch{max-width:none;flex-basis:100%}
}
@media (max-width:480px){
  #cgrid.cg-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #cgrid.cg-l .ccard{border-radius:8px}
  #cgrid.cg-l .ccard-b{padding:6px 7px 8px;gap:2px}
  #cgrid.cg-l .ccard-n{font-size:13.5px}
  #cgrid.cg-l .ccard-e{font-size:11.5px;gap:3px}
  #cgrid.cg-l .ccard-e .cicon{width:16px;height:16px}
  #cgrid.cg-l .ccard-r{gap:4px;margin-top:4px;min-height:18px}
  #cgrid.cg-l .ccard-r .lt-icon img{width:17px;height:17px;box-shadow:0 0 0 1.5px var(--rc)}
  #cgrid.cg-l .cc-later{font-size:11px;line-height:18px}
  #cgrid.cg-l .cc-pic .tier{left:5px;top:5px;min-width:24px;height:20px;font-size:12px;padding:0 4px}
}

/* 10-17 首页首屏以下（Claude Opus 5.5 · 数据库总台子代理）：
   攻略区左边「新手问答」比右边四张主角线卡高，右边下面空一大块 → 四张卡跟着拉高（并排两列时）；
   「还想知道」的说明文字里夹了能力名上色（<span class="stc">），被 .hm-m-t span 的块样式拆成一行一段 → 里面的 span 恢复行内。 */
@media (min-width:1101px){
  .hm-route .hm-walks{flex:1 1 auto;grid-auto-rows:minmax(258px,1fr)}
  .hm-route .hm-walk{height:auto;min-height:258px}
  .hm-route .hm-walk.r-dietrich{--p:24% 0;--s:1;--o:24% 0}   /* 卡变高后图按高度放大，迪托利希的头在原图偏左，不改会被切出框 */
}
.hm-m-t span span{display:inline;-webkit-line-clamp:unset;font-size:inherit;color:inherit;overflow:visible}
/* 10-17 首页手机版：「高粉视频攻略」6 张整宽卡竖着排要两千多像素 → 横着滑，一屏露出一张多 */
@media (max-width:760px){
  .hm-vids .hm-vgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .hm-vids .hm-vgrid::-webkit-scrollbar{display:none}
  .hm-vids .hm-vgrid > .gp-c{scroll-snap-align:start}
}

/* ---------- 机制页、攻略页文末：最后编辑、历史版本、编辑这页（10-17 wiki · Claude Opus 5.5；site/gen/pages_wiki.py，脚本 assets/wiki.js） ---------- */
.wi-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:780px;margin:30px 0 6px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.art.has-toc>.wi-bar{grid-column:-2/-1}   /* 有目录时放在正文那一栏（窄屏只有一栏） */
@media (min-width:1200px){.wi-bar{max-width:960px}}
.wi-last b{color:var(--ink-2);font-weight:600}
.wi-hist{margin-left:auto;color:var(--ink-2)}
.wi-bar .wi-edit{height:32px;padding:0 14px;font-size:13.5px;text-decoration:none}
.wi-mine{flex-basis:100%;padding:6px 10px;border-radius:var(--radius);background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.wi-mine.st-p{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.wi-mine[hidden]{display:none}
/* 10-17 数据库总台：搜到军团兵点进 db/battalions/#it-…，那一行标出来（军团兵没有单独页） */
.tbl-db tr:target > td{background:color-mix(in srgb,var(--accent-2) 14%,transparent)}

/* 技能评级只靠底色深浅（10-17 Teemo：「颜色变深就好了」，S/A/B 字母会和技能等级 D/C/B 混）；技能页字放大 */
.sk{font-size:14px;padding:2px 9px 2px 3px;gap:4px}
.sk-s{background:color-mix(in srgb,var(--accent) 78%,#000);color:#fff;font-weight:700;box-shadow:none}
.sk-a{background:color-mix(in srgb,var(--accent) 42%,var(--surface));color:var(--ink);font-weight:600;box-shadow:none}
.sk-b{background:color-mix(in srgb,var(--accent) 18%,var(--surface));color:var(--ink);box-shadow:none}
.sk-s .skk{background:rgba(255,255,255,.22);color:#fff}
.sk-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.skl-t td,.skl-t th{font-size:14px}
.skl-rk{font-size:14px}
.skb{font-size:11.5px;padding:0 5px}

/* 人物筛选：性别（10-17） */
.flabel-2{margin-left:18px}
.fchip-g{gap:4px}
.g-ic{font-size:15px;line-height:1}
.g-m{color:#4f8fe0}.g-f{color:#e0608a}
.fchip-g.on .g-ic{color:inherit}


/* ---------- 账号、投稿功能没开（线上还没绑存储）：site.js 在 html 上加 acct-closed / comm-closed，要账号、要投稿存储的入口都藏起来（10-17） ---------- */
.acct-pending .needs-acct,.acct-pending .needs-comm{visibility:hidden}
.acct-closed .needs-acct,.comm-closed .needs-comm,
.acct-closed a[href$="account/"],.acct-closed a[href*="account/?next="],
.comm-closed a[href$="contribute/"],.comm-closed a[href*="contribute/?"]{display:none !important}
.fw-soon{max-width:520px;margin:56px auto;padding:28px 24px;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.fw-soon h2{margin:0 0 16px;font-size:22px}
.fw-soon .btn{text-decoration:none}
/* 10-17 人物图鉴两种头像尺寸（Claude Opus 5.5 · 人物图鉴子代理）：#cgrid.cg-s 小头像＝改竖卡之前的横卡（默认，48px 头像框），
   #cgrid.cg-l 大头像＝竖卡（上面那段）。同一份卡片，只换排法；切换按钮只有图标 */
#cgrid.cg-s .cc-pic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--rc) 16%,var(--surface));border:2px solid color-mix(in srgb,var(--rc) 55%,transparent)}
#cgrid.cg-s .cc-pic img{width:100%;height:100%;object-fit:cover}
#cgrid.cg-s .cc-mono{font:700 19px/1 var(--font-head);color:var(--rc)}
#cgrid.cg-s .cc-pic .tier,#cgrid.cg-l .ccard-n .tier{display:none}
#cgrid.cg-s .ccard-e .cicon,#cgrid.cg-s .ccard-r .lt-off{display:none}
#cgrid.cg-s .ccard-n .cc-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cgrid.cg-s .cc-later{font-size:12px;color:var(--muted);line-height:20px}
#cgrid.cg-s .ccard:hover{transform:translateY(-2px)}
@media (max-width:480px){#cgrid.cg-s .cc-pic{width:34px;height:34px}}
#cgrid .ccard[hidden]{display:none!important}
#cfilter .cf-size{display:inline-flex;flex:none;margin-left:auto;border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;background:var(--bg)}
#cfilter .cf-size+.cf-act{margin-left:0}
.cf-sz{display:inline-flex;align-items:center;justify-content:center;width:46px;height:38px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer}
.cf-sz+.cf-sz{border-left:1px solid var(--line-strong)}
.cf-sz:hover{color:var(--accent)}
.cf-sz.on{background:var(--ink);color:var(--bg)}
.cf-sz:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* 性别筛选：只放徽记图标（gpt-gendericon1 出图），和擅长一样大；没图时退回 ♂♀ 符号 */
#cfilter .fchip-g .g-ic{font-size:24px;font-weight:700}
@media (max-width:600px){
  #cfilter .cf-size{margin-left:0}
  #cfilter .cf-size+.cf-act{flex:1 1 0;width:auto;min-width:0}
}

/* 兵种类型与有效/特效图标（10-17 兵种图标子代理；icons.py 的 type_icon / eff_chip）
   图形是游戏里的步兵/骑兵/飞行/重装图标原图；有效＝橙框（威力×2），特效＝红框（威力×3），颜色取自游戏的有效图标底色 */
.ti{display:inline-block;width:20px;height:20px;border-radius:5px;vertical-align:-5px;flex:none;object-fit:contain}
.ti+.ti{margin-left:2px}
.ti-tx{width:auto;height:auto;padding:0 5px;font-size:12px;line-height:18px;font-weight:700;color:#f6ecd2;background:#2a2622;border-radius:5px;vertical-align:1px}
.eff{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:2px;border-radius:7px;line-height:0;vertical-align:-7px;margin:0 2px;
  background:var(--eff-c)}
.eff>img{display:block;border-radius:5px;object-fit:contain}
.eff-2{--eff-c:linear-gradient(160deg,#d0914f,#8a5d34)}
.eff-3{--eff-c:linear-gradient(160deg,#c23a4c,#7a2a31)}
.eff-tx{display:inline-block;min-width:18px;padding:0 4px;border-radius:5px;background:#2a2622;color:#f6ecd2;font-size:11.5px;font-weight:700;text-align:center;white-space:nowrap}
.eff-row{display:inline-flex;gap:2px;margin-right:6px;vertical-align:-7px}
.eff-row .eff{margin:0;vertical-align:0}
.quick .q-effs b{display:flex;gap:4px;align-items:center;padding-top:2px}
.quick .q-effs .eff{margin:0;vertical-align:0}
.q-ty b{display:flex;gap:4px;align-items:center;padding-top:2px}
.q-ty .ti{width:24px;height:24px}
.cls-ty{display:inline-flex;gap:2px;margin-left:2px}
.cls-ty .ti{width:18px;height:18px;vertical-align:0}
.bs-ef{display:inline-flex;gap:2px;align-items:center}
.bs-ef .eff{margin:0;vertical-align:0;padding:1px;border-radius:5px}
.bs-ef .eff>img{border-radius:4px}
.bs:has(.bs-ef){grid-template-columns:26px max-content auto minmax(0,1fr) !important}
.bs:has(.bs-ef):has(.bs-eq){grid-template-columns:26px max-content auto auto minmax(0,1fr) !important}
.bt-wst .eff,.bt-row .eff{margin:0 3px;vertical-align:-6px}
/* 10-18 性别图标换成和「擅长」武器图标同一套米白像素画（gpt-gendericon2；Teemo：「参考下面的剑，斧图标风格来画男女图标」），按钮、尺寸、底块、选中态也和武器一致 */
#cfilter .fchip-g{width:46px;height:46px;padding:0;justify-content:center;border-radius:10px}
#cfilter .fchip-g .g-img{width:32px;height:32px;margin:0;vertical-align:0}
#cfilter .fchip-g.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
/* 梯度和性别同一行：宽屏照旧排一行（分组不占位）；手机上分成两行，梯度一行横滑，性别另起一行，不被挤到屏幕外 */
#cfilter .frow-tg .fgrp{display:contents}
@media (max-width:860px){
  #cfilter .frow-tg{flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow:visible;margin-right:0;padding-right:0;gap:10px}
  #cfilter .frow-tg .fgrp{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin-right:-14px;padding-right:14px}
  #cfilter .frow-tg .fgrp::-webkit-scrollbar{display:none}
  #cfilter .frow-tg .flabel-2{margin-left:0}
}

/* 表格点表头排序（10-17） */
th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.th-sort:hover{color:var(--accent)}
th.th-sort::after{content:"";display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;opacity:.25;transform:translateY(2px)}
th.th-sort.sorted{color:var(--accent)}
th.th-sort.sorted::after{opacity:1}
th.th-sort.sorted-rev::after{border-top-color:transparent;border-bottom-color:currentColor;transform:translateY(-2px)}
th.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* 文章末尾「参考来源」（FW_SRC_FOOTER=1 时出） */
.refs{margin-top:36px;padding-top:14px;border-top:1px solid var(--line)}
.refs h2{font-size:16px;margin:0 0 8px;color:var(--ink-2)}
.refs ol{margin:0;padding-left:22px;font-size:13.5px;color:var(--muted);line-height:1.8}
.refs a{color:var(--ink-2)}

/* 人物页「培养」：人类攻略正文＋其他攻略链接＋站内整理折叠（10-17） */
.hg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 4px;font-size:15px}
.hg-head b{font:700 19px/1.4 var(--font-head);color:var(--ink)}
.hg-head .hg-full{font-size:13.5px}
.hg-more{margin-top:32px;padding-top:12px;border-top:1px solid var(--line)}
.hg-more h2{font-size:17px;margin:0 0 8px}
.hg-more ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hg-more li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.hg-more li span{font-size:13px;color:var(--muted)}
.hg-own{margin-top:24px;border:1px solid var(--line);border-radius:8px;padding:0 14px}
.hg-own>summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--ink-2)}
.hg-own[open]>summary{border-bottom:1px solid var(--line);margin-bottom:10px}

.hg-more a *,.hg-head b *{font-size:inherit!important}

/* ==== 10-17 职业大图（职业大图子代理）：素材 tools/class_art.py → site/assets/img/class-art/、data/class_art.json ====
   Teemo「职业图太糊太小」→ 搜来的原图。职业表：有大图的用头肩图做主视觉、像素图标缩成右下角角标；没大图的像素图标放进同样大小的格子，行高一致。
   职业页首屏：设定稿放进同纸色卡片（--paper＝原图四边中位色，图和卡片接得上；四边羽化），深色模式压一点亮度、加深色投影，像放在桌上的画稿；
   职业展示截图按 16:9。点图用站内 a[data-zoom] 灯箱看原图。 */
.cls-tbl .cls-a{display:flex;align-items:center;gap:12px;white-space:nowrap}
.cls-pic{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:84px;height:96px;border-radius:6px;overflow:hidden;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.cls-pic.has-art{background:var(--paper,#f8f4ea);box-shadow:0 0 0 1px var(--line)}
.cls-tbl .cls-pic .cls-bust{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.cls-tbl .cls-pic-px .cicon{width:64px;height:64px}
.cls-tbl .cls-pic .cls-badge{position:absolute;right:3px;bottom:3px;width:26px;height:26px;border-radius:4px;box-shadow:0 0 0 1.5px var(--surface),0 1px 4px rgba(0,0,0,.35)}
.cls-a:hover .cls-pic{box-shadow:0 0 0 2px var(--lk-class)}
.cls-nm{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:5em;font-size:15px;line-height:1.3}   /* 最长的职业名 5 个字：各组表格第一列一样宽 */
.cls-nm .cls-ty{margin-left:0}
.cls-tbl td:first-child{padding-top:8px;padding-bottom:8px}
.cls-grp th:nth-child(1){width:18%}
@media (max-width:760px){
  .cls-pic{width:64px;height:74px}
  .cls-tbl .cls-pic-px .cicon{width:50px;height:50px}
  .cls-tbl .cls-pic .cls-badge{width:22px;height:22px}
  .cls-tbl .cls-a{gap:8px}
  .cls-nm{font-size:14px}
}
/* 职业页首屏 */
.ent-h.cls-hero{display:grid;gap:28px;align-items:start;padding-top:6px}
.cls-hero-tall{grid-template-columns:auto minmax(0,1fr)}
.cls-hero-tall .cls-art{width:clamp(250px,calc(446px * var(--ar) + 24px),400px)}   /* 卡片宽跟着图的宽高比走：竖长的设定稿占满 446px 高，带长枪盾牌的宽图也不缩小 */
.cls-hero-wide{grid-template-columns:minmax(0,800px) minmax(340px,1fr)}
.cls-hero .ent-names{margin-top:2px}
.cls-hero h2{font-size:17px;margin:4px 0 10px}
.cls-hero-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 28px;margin-top:18px}
.cls-hero-req{margin-top:18px}
.cls-art{margin:0;min-width:0}
.cls-art-a{position:relative;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;cursor:zoom-in;
  background:var(--paper,#f8f4ea);box-shadow:0 0 0 1px var(--line),0 2px 10px rgba(29,36,51,.08)}
.cls-art-artbook .cls-art-a,.cls-art-promo .cls-art-a{height:470px;padding:12px}
.cls-art-artbook .cls-art-img,.cls-art-promo .cls-art-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent),linear-gradient(180deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent),linear-gradient(180deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-composite:intersect}
.cls-art-showcase .cls-art-a{aspect-ratio:16/9;background:#11151c}
.cls-art-showcase .cls-art-img{display:block;width:100%;height:100%;object-fit:cover}
.cls-art-a::after{content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;opacity:0;transition:opacity .15s;
  background:rgba(12,16,24,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat}
.cls-art-a:hover::after,.cls-art-a:focus-visible::after{opacity:1}
.cls-art-src{margin-top:6px;font-size:12px;color:var(--muted);text-align:center}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cls-art.is-light .cls-art-a{filter:brightness(.88) saturate(.95);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 12px 32px rgba(0,0,0,.5)}
  :root:not([data-theme="light"]) .cls-pic.has-art.is-light{filter:brightness(.9)}
}
:root[data-theme="dark"] .cls-art.is-light .cls-art-a{filter:brightness(.88) saturate(.95);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 12px 32px rgba(0,0,0,.5)}
:root[data-theme="dark"] .cls-pic.has-art.is-light{filter:brightness(.9)}
@media (max-width:1100px){
  .cls-hero-wide{grid-template-columns:1fr}
}
@media (max-width:860px){
  .ent-h.cls-hero{grid-template-columns:1fr;gap:16px}
  .cls-art-artbook .cls-art-a,.cls-art-promo .cls-art-a{height:min(440px,118vw)}
  .cls-hero-tall .cls-art{width:auto}
  .cls-hero-sub{grid-template-columns:1fr;gap:14px}
  .cls-hero-req,.cls-hero-sub{margin-top:8px}
}
/* 转职链：等级写在要转的职业前面（→ Lv5 猎兵） */
.lv-at{font-size:12px;font-weight:600;color:var(--muted);margin-right:4px;white-space:nowrap}
/* 正文里职业、技能链接带小图标（10-17 Teemo：「职业最好带上小图标」） */
.lk-ci,.lk-si{width:20px;height:20px;object-fit:contain;vertical-align:-4px;margin:0 3px 0 1px;max-width:none}
.lk-ci{border-radius:4px}
h1 .lk-ci,h2 .lk-ci,h3 .lk-ci,h1 .lk-si,h2 .lk-si,h3 .lk-si{width:1em;height:1em;vertical-align:-.12em}
a.lk-class,a.lk-skill{white-space:nowrap}
/* 10-17 Teemo：「希望这些的默认字体大一点点。所有的都是，以及上方的标签字体也大一点点」 */
.prose{font-size:16.5px}
.prose figcaption{font-size:13.5px}
.nav a{font-size:15.5px}
.kv-note{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.hg-own-open{margin-top:34px;padding-top:6px;border-top:1px solid var(--line)}
a.lk-bat{font-weight:600;white-space:nowrap}
a.bs{text-decoration:none;color:inherit}
/* 起步推荐里的「好挖」（C/D 档，门槛低）用中性色，和「推荐」区分 */
.rcx-rec.rcx-easy{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* 10-18 数据库 ↔ 地图：列表里地图针；短锚点滚到分类节时别被顶栏挡住 */
.db-mp{display:inline-flex;align-items:center;margin-left:6px;color:var(--accent-2);vertical-align:-2px}
.db-mp:hover{color:var(--accent)}
.tbl-db[id^="db-"],h2[id^="db-"],section[id^="db-"]{scroll-margin-top:90px}
/* 10-18 地图卡片委托列表照游戏「クエスト一覧」：整行深色横条、金色细边、地图针＋任务名，右端短牌（限时红、种类灰），目的地另标 */
.mp-qrow{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:4px}
.mp-qrow a{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line));border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 85%,transparent),var(--surface));color:var(--ink);font-size:13.5px;text-decoration:none;min-width:0}
.mp-qrow a:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface));text-decoration:none}
.mp-qrow .mp-i-pin{flex:none;color:var(--gold)}
.mp-qrow b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-qr-k,.mp-qr-lim,.mp-qr-to{flex:none;padding:1px 8px;border-radius:999px;font-size:11.5px;line-height:1.6;white-space:nowrap}
.mp-qr-k{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.mp-qr-to{color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent)}
.mp-qr-lim{display:inline-flex;align-items:center;gap:3px;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.mp-qr-lim .ic{--icc:var(--bad);font-size:11px}
.mp-qr-more{display:inline-block;margin:2px 0 8px;font-size:13px;color:var(--accent-2)}
.mp-qrow .ic-book{flex:none;--icc:var(--gold)}