/* ---- 选角助手 picker ---- */
.navpick-open{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;margin-right:4px;border:1px solid var(--line,#36312a);border-radius:999px;background:transparent;color:var(--muted,#9d9c97);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.navpick-open:hover,.navpick-open:focus-visible{border-color:var(--gold,#d5b576);color:var(--gold,#f1d7a0);background:#232322}
.pick-dialog{display:flex;flex-direction:column;width:min(94vw,720px);max-height:92vh;padding:0;border:1px solid var(--gold,#d5b576);border-radius:8px;background:#141517;color:var(--text,#e7e2d8);box-shadow:0 24px 80px rgba(0,0,0,.6)}
.pick-dialog::backdrop{background:rgba(0,0,0,.78)}
.pick-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line,#36312a)}
.pick-head h2{margin:0;font-size:16px;font-weight:700;color:var(--gold-light,#f1d7a0);letter-spacing:.5px}
.pick-head .pick-close{padding:4px 10px;border:1px solid var(--line,#36312a);border-radius:4px;background:#232322;color:var(--text,#e7e2d8);font:inherit;font-size:15px;line-height:1;cursor:pointer}
.pick-head .pick-close:hover{border-color:var(--gold,#d5b576);color:var(--gold,#f1d7a0)}
.pick-body{flex:1;overflow:auto;padding:16px 18px}
.pick-step-label{margin:0 0 4px;font-size:12px;color:var(--muted,#9d9c97);letter-spacing:.12em;text-transform:uppercase}
.pick-step-title{margin:0 0 14px;font-size:17px;font-weight:700}
.pick-step-title small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--muted,#9d9c97)}
.pick-factions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick-faction{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 12px;border:1px solid var(--line,#36312a);border-radius:8px;background:#1c1d1f;font:inherit;color:var(--text,#e7e2d8);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pick-faction strong{font-size:20px;letter-spacing:4px}
.pick-faction span{font-size:12px;color:var(--muted,#9d9c97)}
.pick-faction.ally:hover{border-color:#4d7dff;box-shadow:0 0 0 1px #4d7dff}
.pick-faction.horde:hover{border-color:#e2452c;box-shadow:0 0 0 1px #e2452c}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.pick-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border:1px solid var(--line,#36312a);border-radius:8px;background:#1c1d1f;font:inherit;color:var(--text,#e7e2d8);cursor:pointer;transition:border-color .15s,transform .15s}
.pick-item .rec-badge{position:absolute;top:-9px;right:-6px;padding:2px 8px;border-radius:999px;background:var(--gold,#d5b576);color:#171713;font-size:11px;font-weight:800;letter-spacing:.02em;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pick-item.rec{border-color:var(--gold,#d5b576);box-shadow:0 0 0 1px var(--gold,#d5b576);background:#241d10}
.pick-item img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.pick-item span{font-size:13px;font-weight:600;line-height:1.2}
.pick-item:hover,.pick-item:focus-visible{border-color:var(--gold,#d5b576);transform:translateY(-1px)}
.pick-random{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:12px;border:1px dashed #c9a35c;border-radius:8px;background:#241d10;color:var(--gold-light,#f1d7a0);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.pick-random:hover{background:#362a14}
.pick-rec{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid var(--gold,#d5b576);border-radius:8px;background:#241d10}
.pick-rec .rec-label{font-size:13px;font-weight:700;color:var(--gold-light,#f1d7a0);letter-spacing:.05em;white-space:nowrap}
.pick-rec .rec-img{width:34px;height:34px;border-radius:6px;object-fit:cover}
.pick-rec b{font-size:15px;color:var(--gold-light,#f1d7a0)}
.pick-rec .rec-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pick-rec .rec-use{padding:8px 16px;border:1px solid var(--gold,#d5b576);border-radius:999px;background:#2a2317;color:var(--gold-light,#f1d7a0);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pick-rec .rec-use:hover{background:#3b3019}
.pick-rec .rec-again{padding:8px 14px;border:1px solid var(--line,#36312a);border-radius:999px;background:#232322;color:var(--text,#e7e2d8);font:inherit;font-size:13px;cursor:pointer}
.pick-rec .rec-again:hover{border-color:var(--gold,#d5b576);color:var(--gold,#f1d7a0)}
.pick-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pick-back{padding:8px 14px;border:1px solid var(--line,#36312a);border-radius:6px;background:#232322;color:var(--muted,#c9c6be);font:inherit;font-size:13px;cursor:pointer}
.pick-back:hover{border-color:var(--gold,#d5b576);color:var(--gold,#f1d7a0)}
.pick-result{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 0 2px}
.pick-result .pr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.pick-result .pr-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line,#36312a);border-radius:999px;background:#1c1d1f;font-size:14px;font-weight:700}
.pick-result .pr-chip img{width:30px;height:30px;border-radius:5px;object-fit:cover}
.pick-result .pr-arrow{color:var(--gold,#d5b576);font-size:18px}
.pick-result .pr-note{margin:8px 0 0;font-size:12px;color:var(--muted,#9d9c97)}
.pick-foot .pick-done{padding:9px 22px;border:1px solid var(--gold,#d5b576);border-radius:999px;background:#2a2317;color:var(--gold-light,#f1d7a0);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pick-foot .pick-done:hover{background:#3b3019}
.pick-share-box{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.pick-share-box img{width:100%;max-width:340px;height:auto;border:1px solid var(--line,#36312a);border-radius:8px;background:#111}
.pick-share-box a{padding:8px 18px;border:1px solid var(--gold,#d5b576);border-radius:999px;background:#2a2317;color:var(--gold-light,#f1d7a0);font:inherit;font-size:13px;font-weight:700;text-decoration:none}
.pick-share-box a:hover{background:#3b3019}
@media(max-width:600px){.pick-factions{grid-template-columns:1fr}.pick-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}}
@media (prefers-reduced-motion: reduce){.pick-item,.navpick-open,.pick-faction,.pick-random,.pick-back,.pick-done,.pick-close,.pick-rec,.rec-use,.rec-again{transition:none}.pick-item:hover,.pick-item:focus-visible{transform:none}}

/* ---- 选角分享图 v2：保存 / 分享 / 长按保存 ---- */
.pick-share-box img{width:auto;height:auto;max-width:360px;max-height:56vh}
.pick-share-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pick-share-box .pick-share-acts a,.pick-share-box .pick-share-acts button{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:1px solid var(--gold,#d5b576);border-radius:999px;background:#2a2317;color:var(--gold-light,#f1d7a0);font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.pick-share-box .pick-share-acts a:hover,.pick-share-box .pick-share-acts button:hover{background:#3b3019}
.pick-share-box .pick-share-acts [hidden]{display:none}
.pick-share-hint{margin:0;max-width:360px;font-size:12px;line-height:1.7;color:var(--muted,#9d9c97);text-align:center}
.pick-share-hint.bad{color:#f0a2a2}
.pick-share-hint.ok{color:#a8d6a3}
/* 内页顶部导航里的选角按钮：与「赞助」按钮同尺寸 */
.socialnav .navpick-open{min-height:36px;padding:5px 11px;margin-right:0;font-size:12px;font-weight:700}
@media(max-width:600px){.pick-share-box img{max-width:100%}}