.players-shell { max-width:1240px; margin:0 auto; padding:0 34px; }
.players-header { border-bottom:1px solid #e7e7e7; }
.players-header nav a.active { color:#1a222e; }
.players-home-link { padding:14px 23px; border-radius:999px; color:#fff; background:#1a222e; box-shadow:0 10px 22px rgba(26, 34, 46, 0.16); }
.players-main { padding:78px 0 100px; }
.players-heading { position:relative; margin:0 0 36px; }
.players-heading h1 { max-width:900px; margin:0; font-size:clamp(42px,6vw,70px); line-height:1.08; letter-spacing:-.06em; white-space:pre-line; }
.players-heading > p:not(.eyebrow) { max-width:760px; margin:22px 0 0; color:var(--muted); font-size:17px; line-height:1.8; }
.players-action-link { position:absolute; right:0; bottom:6px; }
.players-filter-card { display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr 1fr 1fr auto; align-items:end; gap:12px; padding:16px; margin-bottom:20px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 15px 35px rgba(26, 34, 46, 0.05); }
.players-filter-card label { display:grid; gap:6px; min-width:0; }
.players-filter-card label span { color:var(--muted); font-size:12px; font-weight:800; }
.players-filter-card input, .players-filter-card select { width:100%; min-height:42px; padding:0 12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fdfdfd; font:inherit; font-size:13px; outline:none; }
.players-filter-card input:focus, .players-filter-card select:focus { border-color:var(--lavender); box-shadow:0 0 0 4px rgba(36, 46, 61, 0.1); }
.searchable-filter-picker { position:relative; }
.searchable-filter-picker > input[type="search"] { position:relative; z-index:1; }
.searchable-filter-options { position:absolute; z-index:8; top:calc(100% + 6px); left:0; right:0; max-height:240px; overflow-y:auto; padding:6px; border:1px solid #c9cdd4; border-radius:12px; background:#fff; box-shadow:0 16px 34px rgba(26, 34, 46, 0.16); }
.searchable-filter-option { display:block; width:100%; padding:9px 10px; border:0; border-radius:8px; color:var(--ink); background:transparent; text-align:left; font:inherit; font-size:13px; font-weight:700; }
.searchable-filter-option:hover, .searchable-filter-option[aria-selected="true"] { color:var(--primary-dark); background:#f5f5f5; }
.searchable-filter-empty { padding:11px 10px; color:var(--muted); text-align:center; font-size:13px; }
.players-filter-card .button { min-height:42px; white-space:nowrap; }
.players-more { display: flex; justify-content: center; margin: 24px 0 0; }
.players-more[hidden] { display: none; }
.players-more-text { color: #9aa5bb; font-size: 12px; }
.players-count { margin:0 0 16px; color:var(--muted); font-size:14px; }
.players-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.player-directory-card, .player-card { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:start; gap:12px; width:100%; min-height:144px; padding:14px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; box-shadow:0 15px 35px rgba(26, 34, 46, 0.05); transition:transform .2s, box-shadow .2s, border-color .2s; font:inherit; }
.player-directory-card:hover { transform:translateY(-4px); border-color:#c9cdd4; box-shadow:0 20px 40px rgba(26, 34, 46, 0.11); }
.player-card-avatar-wrap { display:block; width:78px; height:78px; overflow:hidden; border-radius:18px; background:var(--lavender-soft); }
.player-directory-card .player-avatar, .player-card .player-avatar { display:block; width:78px; height:78px; object-fit:cover; }
.player-directory-main { display:block; min-width:0; }
.player-directory-name-row { display:flex; align-items:center; gap:9px; min-height:28px; min-width:0; }
.player-directory-name-row strong { display:block; overflow:hidden; font-size:22px; line-height:1.15; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }
.player-card-gender { display:inline-flex; flex:0 0 26px; width:26px; height:28px; align-items:center; justify-content:center; transform:translateY(1px); font-family:"Segoe UI Symbol", "Arial Unicode MS", sans-serif; font-size:24px; font-weight:400; line-height:1; }
.player-card-gender-male { color:#2788dc; }
.player-card-gender-female { color:#ed3eae; }
.player-card-gender-unknown { color:#8a96ad; font-family:inherit; font-size:20px; font-weight:800; }
.player-card-game-list { display:block; min-width:0; overflow:hidden; margin-top:14px; color:#242e3d; font-size:13px; font-weight:800; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.player-card-game-item { display:inline; }
.player-card-game-text { color:inherit; }
.player-game-mark { display:inline-block; margin-right:7px; color:#23a879; font-size:11px; }
.player-card-skill-list { display:flex; flex-wrap:wrap; gap:8px; min-width:0; margin-top:9px; }
.player-card-skill-item { display:inline-flex; min-width:0; max-width:100%; }
/* 技能胶囊（游戏模式 · 考核等级 · 单考/双考）：保持单行不换行；字号收小以容纳完整文字 */
.player-card-skill-pill { display:inline-flex; align-items:center; max-width:100%; min-height:28px; overflow:hidden; padding:0 6px; border-radius:9px; color:#9b6e25; background:#fff5de; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.player-card-introduction { display:-webkit-box; overflow:hidden; margin-top:12px; color:var(--muted); font-size:12px; line-height:1.6; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.player-card-empty { color:var(--muted); font-size:13px; }
.player-detail-dialog { width:min(calc(100% - 30px),940px); padding:0; border:0; border-radius:24px; background:#fff; box-shadow:0 30px 80px rgba(26, 34, 46, 0.25); }
/* 详情左右两栏：左＝资料，右＝客户评价（评价区独立滚动，与试音页一致） */
.player-detail-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 22px; align-items: start; }
.player-detail-main { display: grid; gap: 0; min-width: 0; }
.player-detail-side { min-width: 0; }
.player-detail-reviews { display: flex; flex-direction: column; max-height: min(500px, 62vh); border: 1px solid var(--line); border-radius: 16px; background: #fdfdfd; }
.player-detail-reviews > strong { display: block; flex: none; padding: 14px 16px; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; color: var(--ink); background: #fff; font-size: 14px; }
.player-detail-dialog::backdrop { background:rgba(26, 34, 46, 0.32); backdrop-filter:blur(7px); }
.player-detail-card { position:relative; padding:32px; }
@media (max-width: 760px) { .player-detail-layout { grid-template-columns: minmax(0,1fr); } .player-detail-reviews { max-height: none; } }
.player-detail-header { display:flex; align-items:flex-start; gap:16px; padding-right:0; }
.player-detail-avatar { width:100px; height:100px; object-fit:cover; border-radius:20px; background:var(--lavender-soft); }
.player-detail-identity { min-width:0; }
.player-detail-header h2 { margin:0; font-size:28px; }
.player-detail-name-row { display:flex; align-items:center; gap:10px; }
.player-detail-gender { display:inline-flex; align-items:center; justify-content:center; width:26px; height:28px; font-family:"Segoe UI Symbol", "Arial Unicode MS", sans-serif; font-size:24px; font-weight:400; line-height:1; }
.player-detail-gender-male { color:#2788dc; }
/* 手游陪玩标记（详情）：性别右边的蓝色小方块（2026-09-26 起） */
.player-detail-mobile { display:inline-flex; flex:0 0 26px; width:26px; height:26px; align-items:center; justify-content:center; border-radius:7px; color:#fff; background:linear-gradient(135deg,#242e3d,#242e3d); font-size:15px; font-weight:800; line-height:1; }
.player-detail-gender-female { color:#ed3eae; }
.player-detail-gender-unknown { color:#8a96ad; font-family:inherit; font-size:18px; font-weight:800; }
/* 卡片：头像单独一列；接单数 / 评分是名字下面的一行胶囊 */
.player-card-side { display: grid; gap: 8px; align-content: start; justify-items: center; min-width: 0; }
.player-card-stats { display: grid; gap: 9px; justify-items: center; }
.player-card-stat { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 9px; color: #6f6f6f; background: #f3f3f3; font-size: 12px; font-weight: 700; white-space: nowrap; }
.player-card-stat.rating { color: #b9770e; background: #fff4e0; }
.player-card-stat.rating::before { content: '★'; color: #f5a524; margin-right: 3px; font-size: 11px; }
.player-card-stat.unrated { color: #9a9a9a; background: #f5f5f5; }

/* 详情：接单数 / 评分与音频按钮同一行 */
.player-detail-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.player-detail-meta-row > * { flex: 0 0 auto; }
.player-detail-meta-row .player-detail-audio { margin-top: 0; }
.player-detail-audio { display: inline-flex; align-items: center; margin-top: 10px; }
.player-detail-stat { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 10px; color: #6f6f6f; background: #f3f3f3; font-size: 12.5px; font-weight: 700; }
.player-detail-stat b { font-size: 15px; font-weight: 800; }
.player-detail-stat.rating { color: #b9770e; background: #fff4e0; }
.player-detail-stat.rating::before { content: '★'; margin-right: 1px; color: #f5a524; font-size: 12px; }
.player-detail-stat.unrated { color: #9a9a9a; background: #f5f5f5; font-weight: 600; }

.player-detail-audio { margin-top:10px; }
.player-detail-audio-media { display:none; }
.player-detail-audio-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:36px; padding:0 16px; border:1px solid #c9cdd4; border-radius:999px; color:#1a222e; background:linear-gradient(135deg,#f8f8f8 0%,#eee8ff 100%); box-shadow:0 6px 16px rgba(36, 46, 61, 0.16); cursor:pointer; font:inherit; font-size:12.5px; font-weight:800; white-space:nowrap; transition:color .2s, background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.player-detail-audio-button:hover { border-color:#5a6472; box-shadow:0 10px 22px rgba(36, 46, 61, 0.24); transform:translateY(-1px); }
.player-detail-audio-button.is-playing { border-color:#242e3d; color:#fff; background:linear-gradient(135deg,#242e3d 0%,#1a222e 100%); box-shadow:0 10px 22px rgba(36, 46, 61, 0.3); }
.player-detail-audio-button.is-error { border-color:#ffd1d9; color:#c25769; background:#fff2f4; box-shadow:none; cursor:not-allowed; transform:none; }
.player-detail-audio-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#242e3d,#1a222e); font-size:10px; line-height:1; box-shadow:0 3px 8px rgba(26, 34, 46, 0.35); }
.player-detail-audio-button.is-playing .player-detail-audio-icon { color:#242e3d; background:#fff; font-size:11px; box-shadow:none; }
.player-detail-audio-button.is-error .player-detail-audio-icon { color:#c25769; background:#ffe0e5; box-shadow:none; }
.player-detail-section { margin-top:24px; padding-top:18px; border-top:1px solid #edf0f7; }
.player-detail-section strong { display:block; margin-bottom:10px; color:var(--ink); font-size:14px; }
.player-detail-section p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; white-space:pre-line; }
.player-detail-tags { display:flex; flex-wrap:wrap; gap:7px; }
.player-detail-option-box { display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid #e7e7e7; border-radius:12px; background:#fdfdfd; }
.player-detail-game-pill { padding:6px 10px; border-radius:8px; color:#5366d8; background:#eef2ff; font-size:13px; font-weight:800; }
.player-detail-skill-box { gap:9px; }
.player-detail-skill-pill { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:10px; color:#9b6e25; background:#fff5de; font-size:14px; font-weight:800; }
.player-detail-muted { color:var(--muted); font-size:13px; }
.player-detail-skill-list { display:grid; gap:7px; margin:0; padding-left:20px; color:var(--muted); font-size:13px; line-height:1.7; }
.player-detail-introduction { white-space:pre-line; }
/* 个人介绍：内容太长时不再把卡片撑高，改成固定高度的独立滚动区（店长 2026-10-21） */
.player-detail-introduction {
    max-height: 200px;
    margin: 0;
    padding: 12px 14px;
    overflow-y: auto;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #fdfdfd;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(31, 36, 48, .2) transparent;
}
.player-detail-introduction::-webkit-scrollbar { width: 6px; }
.player-detail-introduction::-webkit-scrollbar-thumb { background: rgba(31, 36, 48, .18); border-radius: 999px; }
.player-detail-introduction::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 620px) { .player-detail-introduction { max-height: 168px; padding: 10px 12px; } }
/* 陪玩展示页：981~1180px 之间用 3 列，避免卡片被压得过窄（≤980px 走下面的 2 列） */
@media (max-width:1180px) { .players-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:980px) { .players-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.players-filter-card { grid-template-columns:repeat(2,minmax(0,1fr)); }.players-filter-card .button { justify-self:start; }.players-action-link { position:static; display:inline-block; margin-top:20px; } }
@media (max-width:620px) { .players-shell { padding:0 18px; }.players-main { padding:52px 0 70px; }.players-heading h1 { font-size:44px; }.players-heading > p:not(.eyebrow) { font-size:15px; }.players-filter-card { grid-template-columns:1fr; padding:15px; border-radius:18px; }.players-grid { grid-template-columns:1fr; }.player-directory-card { grid-template-columns:88px minmax(0,1fr); gap:15px; min-height:0; padding:16px; border-radius:20px; }.player-card-avatar-wrap, .player-directory-card .player-avatar, .player-card .player-avatar { width:88px; height:88px; border-radius:19px; }.player-directory-name-row strong { font-size:20px; }.player-card-gender { flex-basis:26px; width:26px; height:28px; font-size:24px; }.player-card-game-list { margin-top:13px; font-size:12px; }.player-game-mark { margin-right:6px; }.player-card-skill-list { margin-top:8px; }.player-card-skill-pill { min-height:31px; padding:0 9px; font-size:12px; }.player-card-introduction { margin-top:13px; font-size:12px; }.player-detail-card { padding:26px 22px; }.player-detail-name-row { gap:8px; }.player-detail-gender { width:24px; height:27px; font-size:23px; }.player-detail-audio { margin-top:8px; }.player-detail-audio-button { min-height:32px; padding-right:11px; font-size:11px; }.player-detail-option-box { padding:10px; }.player-detail-skill-pill { min-height:31px; padding:0 10px; font-size:13px; } }

.player-directory-name-row { gap: 5px; }
.player-card-gender { flex-basis: 22px; width: 22px; height: 25px; font-size: 21px; }
.player-detail-name-row { gap: 6px; }
.player-detail-gender { width: 22px; height: 25px; font-size: 21px; }
.player-directory-main { align-self: start; padding-top: 1px; }

@media (max-width: 620px) {
    .players-shell { padding-right: 12px; padding-left: 12px; }
    .players-main { padding: 30px 0 44px; }
    .players-heading { margin-bottom: 22px; }
    .players-heading h1 { font-size: 34px; line-height: 1.1; }
    .players-heading > p:not(.eyebrow) { margin-top: 12px; font-size: 13px; line-height: 1.55; }
    .players-filter-card { gap: 9px; padding: 11px; margin-bottom: 14px; border-radius: 15px; }
    .players-filter-card input, .players-filter-card select, .players-filter-card .button { min-height: 38px; padding: 0 10px; font-size: 12px; }
    .players-grid { gap: 10px; }
    .player-directory-card, .player-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 11px; border-radius: 16px; }
    .player-card-avatar-wrap, .player-directory-card .player-avatar, .player-card .player-avatar { width: 64px; height: 64px; border-radius: 14px; }
    .player-directory-name-row { gap: 4px; min-height: 22px; }
    .player-directory-name-row strong { font-size: 17px; }
    .player-card-gender { flex-basis: 18px; width: 18px; height: 20px; font-size: 18px; }
    .player-card-game-list { margin-top: 8px; font-size: 10px; }
    .player-game-mark { margin-right: 4px; font-size: 8px; }
    .player-card-skill-list { gap: 5px; margin-top: 5px; }
    .player-card-skill-pill { min-height: 24px; padding: 0 7px; border-radius: 7px; font-size: 10px; }
    .player-card-introduction { margin-top: 7px; font-size: 10px; line-height: 1.45; }
    .player-detail-dialog { width: calc(100% - 20px); border-radius: 18px; }
    .player-detail-card { padding: 20px 16px; }
    .player-detail-avatar { width: 76px; height: 76px; border-radius: 16px; }
    .player-detail-header { gap: 10px; padding-right: 30px; }
    .player-detail-header h2 { font-size: 22px; }
    .player-detail-name-row { gap: 5px; }
    .player-detail-gender { width: 20px; height: 22px; font-size: 19px; }
    .player-detail-section { margin-top: 17px; padding-top: 13px; }
    .player-detail-section strong { margin-bottom: 7px; font-size: 12px; }
    .player-detail-section p, .player-detail-muted { font-size: 12px; line-height: 1.6; }
    .player-detail-option-box { gap: 5px; padding: 8px; }
    .player-detail-game-pill, .player-detail-skill-pill { padding: 5px 8px; font-size: 11px; }
    .player-detail-skill-pill { min-height: 27px; }
}

@media (max-width: 620px) {
    .players-main { padding-top: 28px; }
    .players-heading h1 { font-size: 31px; }
    .players-filter-card { width: min(calc(100% - 24px), 348px); box-sizing: border-box; padding: 12px 14px; margin-right: auto; margin-left: auto; }
    .players-filter-card label { width: min(100%, 300px); justify-self: center; }
    .players-filter-card input, .players-filter-card select, .players-filter-card .searchable-filter-picker { width: 100%; box-sizing: border-box; }
    .players-filter-card .button { justify-self: center; width: auto; min-width: 108px; padding-right: 17px; padding-left: 17px; }
    .searchable-filter-options { max-height: 36vh; }
    .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .player-directory-card, .player-card { display: flex; min-height: 0; flex-direction: column; gap: 7px; padding: 10px; border-radius: 15px; }
    .player-card-avatar-wrap, .player-directory-card .player-avatar, .player-card .player-avatar { width: 52px; height: 52px; border-radius: 13px; }
    .player-directory-main { width: 100%; padding-top: 0; }
    .player-directory-name-row { min-height: 20px; }
    .player-directory-name-row strong { font-size: 15px; }
    .player-card-game-list { margin-top: 5px; font-size: 9px; }
    .player-card-skill-list { gap: 4px; margin-top: 4px; }
    .player-card-skill-pill { min-height: 21px; padding: 0 6px; font-size: 9px; }
    .player-card-introduction { display: -webkit-box; margin-top: 5px; font-size: 9px; line-height: 1.35; -webkit-line-clamp: 2; }
}

/* ===== 手机端优化（2026-10-11 店长反馈）：筛选两列 + 陪玩页两列紧凑卡 + 首页一行一张 ===== */
@media (max-width: 620px) {
.players-filter-card { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin-right: 0; margin-left: 0; }
.players-filter-card label { width: auto; justify-self: stretch; }
.players-filter-card .button { grid-column: 1 / -1; justify-self: center; min-width: 128px; }
/* 陪玩展示页：两列紧凑卡（头像+名字同排 → 游戏 → 数据胶囊一行 → 技能 → 简介两行） */
.players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.players-grid .player-directory-card, .players-grid .player-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "avatar name" "games games" "stats stats" "skill skill" "desc desc"; align-items: center; align-content: start; gap: 5px 8px; padding: 10px; }
.players-grid .player-card-side, .players-grid .player-directory-main { display: contents; }
.players-grid .player-card-avatar-wrap { grid-area: avatar; }
.players-grid .player-directory-name-row { grid-area: name; }
.players-grid .player-card-stats { grid-area: stats; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; }
.players-grid .player-card-game-list { grid-area: games; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players-grid .player-card-skill-list { grid-area: skill; }
.players-grid .player-card-introduction { grid-area: desc; display: -webkit-box; margin-top: 0; font-size: 10px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.players-grid .player-card-avatar-wrap, .players-grid .player-directory-card .player-avatar, .players-grid .player-card .player-avatar { width: 52px; height: 52px; border-radius: 13px; }
.players-grid .player-directory-name-row strong { font-size: 15px; }
.players-grid .player-card-stat { min-height: 22px; padding: 0 7px; font-size: 10px; }
.players-grid .player-card-skill-pill { min-height: 21px; padding: 0 6px; font-size: 10px; }
/* 首页：一行一张横向卡（头像+数据在左，信息完整不截断） */
#player-list .player-card { flex-direction: row; align-items: flex-start; gap: 11px; padding: 12px; }
#player-list .player-card-side { flex: 0 0 96px; }
#player-list .player-avatar { width: 64px; height: 64px; border-radius: 14px; }
#player-list .player-directory-name-row strong { font-size: 17px; }
#player-list .player-card-stat { min-height: 24px; padding: 0 8px; font-size: 10px; }
#player-list .player-card-skill-pill { font-size: 10px; }
#player-list .player-card-introduction { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; }
#player-list .player-card-game-list { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* 详情「擅长游戏」胶囊：对齐试音页的 `.dialog-pill.game`（淡紫底 + 紫字 + 紫描边） */
.player-detail-game-pill { color: #5366d8; background: #eef2ff; border: 1px solid #c9d2f7; }