/* 常客名录的「万象台」页：和择人页同一套画风（叶子点将）。对话框切到万象台时整张换成青黛底、毛笔字标题；
   上面一排小叶子选人，下面左边整张叶子牌，右边称号和攒放，技能写在宣纸上。拍卖场那一页不受影响。
   毛笔字先借系统楷体，跟择人页一样。 */
.roster-tabs{margin:2px 0 6px}
.npc-dialog{--wx-brush:"Ma Shan Zheng","STKaiti","KaiTi","Kaiti SC","BiauKai",serif;--wx-serif:"Noto Serif SC","Songti SC","SimSun",serif;--wx-ink:#29231b;--wx-ink2:#5b4e3c;--wx-zhu:#b8432f;--wx-gold:#bd9550;--wx-gold2:#f4d88d;
  --wx-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .16  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.npc-dialog.roster-idiom .npc-sheet{border-color:#6f5a39;background:repeating-linear-gradient(90deg,rgba(189,149,80,.05) 0 1px,transparent 1px 46px),radial-gradient(ellipse at 50% 22%,#17383d,#0b2025 72%)}
.npc-dialog.roster-idiom .npc-sheet-head h2{font-family:var(--wx-brush);font-size:34px;line-height:1.1;letter-spacing:.1em;color:var(--wx-gold2)}
.npc-dialog.roster-idiom .npc-roster-hint{color:#8fa29a}

/* 选人：九张小叶子，竖着的立绘不压扁；选中的那张抬起来、描金。 */
.hero-picker{gap:6px;padding:4px 2px 6px;scrollbar-color:rgba(189,149,80,.35) transparent}
#valuation-app .hero-pick{flex:0 0 64px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;color:#8fa29a;font:inherit;cursor:pointer;transition:transform .15s}
.hero-pick-face{display:block;width:56px;aspect-ratio:204/256;border-radius:3px;overflow:hidden;border:2px solid #2a5156;background:#0f3a3f;transition:border-color .15s,box-shadow .15s}
.hero-pick-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;image-rendering:pixelated}
.hero-pick-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 16px/1.2 var(--wx-brush)}
#valuation-app .hero-pick:not([aria-selected=true]) .hero-pick-face img{filter:saturate(.55) brightness(.75)}
#valuation-app .hero-pick:hover .hero-pick-face{border-color:#4f7a7f}
#valuation-app .hero-pick[aria-selected=true]{color:var(--wx-gold2);transform:translateY(-3px)}
#valuation-app .hero-pick[aria-selected=true] .hero-pick-face{border-color:var(--wx-gold2);box-shadow:0 4px 0 #6f5326}
#valuation-app .hero-pick:focus-visible{outline:none}
#valuation-app .hero-pick:focus-visible .hero-pick-face{outline:2px solid var(--wx-gold2);outline-offset:2px}

/* 一位人物：左边叶子牌（跨两行），右上称号和攒放，右下宣纸。 */
.hero-card{--s:1;display:grid;grid-template-columns:calc(212px * var(--s)) minmax(0,1fr);grid-template-rows:auto 1fr;gap:12px 20px;align-items:start;padding:6px 4px 4px}
.hero-card[hidden]{display:none}
.hero-leaf-box{grid-row:1 / span 2;width:calc(212px * var(--s));height:calc(352px * var(--s))}
.hero-leaf{position:relative;width:212px;height:352px;transform:scale(var(--s));transform-origin:0 0;border-radius:6px;background:var(--wx-grain),linear-gradient(#f3e5c5,#e4cfa6);border:3px solid var(--wx-ink);
  box-shadow:inset 0 0 0 4px #f3e5c5,inset 0 0 0 5.5px var(--wx-ink),0 14px 30px rgba(0,0,0,.5);overflow:hidden;color:var(--wx-ink);box-sizing:border-box}
.hero-leaf-no{position:absolute;left:15px;top:9px;font:900 12px/1 var(--wx-serif);color:var(--wx-zhu);letter-spacing:.15em}
.hero-leaf-art{position:absolute;left:14px;right:60px;top:30px;bottom:96px;border:2px solid var(--wx-ink);background:#0f3a3f;overflow:hidden}
.hero-leaf-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;image-rendering:pixelated}
.hero-leaf-title{position:absolute;right:10px;top:12px;width:44px;padding:8px 0;background:#fbf4e2;border:2px solid var(--wx-ink);writing-mode:vertical-rl;display:flex;align-items:center;font:400 36px/1.05 var(--wx-brush);letter-spacing:.04em;box-sizing:border-box}
.hero-leaf-real{position:absolute;right:16px;bottom:100px;writing-mode:vertical-rl;font:700 14px var(--wx-serif);color:var(--wx-ink2);letter-spacing:.12em}
.hero-leaf-zan{position:absolute;left:14px;right:14px;bottom:30px;height:58px;margin:0;border-top:1.5px solid var(--wx-ink);padding-top:7px;font:400 19px/1.35 var(--wx-brush);text-align:center;box-sizing:border-box}
.hero-leaf-hp{position:absolute;left:12px;bottom:8px;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:900;color:var(--wx-ink2)}
.hero-leaf-hp b{background:var(--wx-zhu);color:#fff1e2;border-radius:3px;padding:0 5px;font-size:12px;line-height:17px}
.hero-leaf-icon{position:absolute;right:10px;bottom:6px;width:22px;height:22px;border-radius:3px;image-rendering:pixelated}

.hero-side{min-width:0;display:flex;flex-direction:column;gap:10px}
.hero-name{margin:0;font:400 40px/1.1 var(--wx-brush);letter-spacing:.08em;color:#f6e7c4}
.hero-name small{margin-left:10px;font:700 15px var(--wx-serif);letter-spacing:.06em;color:#c9b48a}
.hero-steps{display:flex;flex-direction:column;gap:6px}
.hero-step{margin:0;padding:7px 10px;border-radius:9px;background:#10292d;border:1.5px solid #2a5156;font-size:13px;line-height:1.45;color:#e8d9b6}
.hero-step em{font-style:normal;font-size:11px;font-weight:900;color:#0b2025;background:var(--wx-gold);border-radius:4px;padding:1px 5px;margin-right:6px}
.hero-step.fire em{background:#d65a40;color:#fff}
.hero-diff{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:#8fa29a}
.hero-diff-dots{display:inline-flex;gap:5px;margin-left:2px}
.hero-diff-dots i{width:9px;height:9px;transform:rotate(45deg);background:#28474b;border:1px solid #3d6267}
.hero-diff-dots i.on{background:var(--wx-gold2);border-color:#fff3c9}

/* 宣纸：小传 + 技能，墨字。 */
.hero-paper{min-width:0;padding:12px 14px 8px;border-radius:6px;background:var(--wx-grain),linear-gradient(#f4e7c8,#e8d5ad);color:#2f2a22;box-shadow:inset 0 0 0 1.5px #b9a47d,0 8px 20px rgba(0,0,0,.35)}
.hero-intro{margin:0 0 6px;font:italic 13px/1.6 var(--wx-serif);color:var(--wx-ink2)}
.hero-skills{list-style:none;margin:0;padding:0}
.hero-skill{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:start;padding:8px 0;border-top:1px dashed #b9a47d}
.hero-skill-kind{display:grid;place-items:center;height:20px;border-radius:5px;background:#4d6a76;color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.hero-skill[data-kind=active] .hero-skill-kind{background:#c98a1e}
.hero-skill[data-kind=combo] .hero-skill-kind{background:#9a3a2a}
.hero-skill[data-kind=tip] .hero-skill-kind{background:#8a8070}
.hero-skill-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.hero-skill-text b{font:800 15px var(--wx-serif);color:var(--wx-ink)}
.hero-skill-text span{font-size:13px;line-height:1.6;color:#3a3329;text-wrap:pretty}

/* 手机：叶子牌缩到六成放左边，右边称号和攒放；宣纸铺满下面。小叶子一排横着滑。 */
@media(max-width:719px){
  .npc-dialog.roster-idiom .npc-sheet-head h2{font-size:28px}
  .hero-picker{gap:4px}
  #valuation-app .hero-pick{flex-basis:50px}
  .hero-pick-face{width:44px}
  .hero-pick-name{font-size:14px}
  .hero-card{--s:.58;grid-template-rows:auto auto;gap:12px;padding:4px 0 0}
  .hero-leaf-box{grid-row:1}
  .hero-side{gap:7px}
  .hero-name{font-size:30px}
  .hero-name small{display:block;margin:2px 0 0;font-size:13px}
  .hero-step{padding:5px 7px;font-size:12px;line-height:1.4}
  .hero-paper{grid-column:1 / -1;padding:10px 12px 6px}
}
@media(prefers-reduced-motion:reduce){#valuation-app .hero-pick,.hero-pick-face{transition:none}}
