/* ==========================================================================
   选手主页（/players/<id>）和选手数据页（/stats/players/<id>）
   --------------------------------------------------------------------------
   1. 选手主页：个人卡片、大数字、荣誉、能力雷达、近期比赛、队伍、比赛表
   2. 选手数据页：工具条、RATING 仪表、六项指标、分类卡片
   ========================================================================== */

/* ---------- 1. 选手主页 ---------- */

/* 个人卡片：头像 + 名字 + 队伍；下面一排大数字；最下面一行小字资料。右侧很淡的队标水印 */
.pp-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background:
    radial-gradient(ellipse 45% 85% at 30% 0%, var(--accent-soft), transparent 72%),
    var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.pp-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  width: 280px;
  height: 280px;
  transform: translateY(-50%);
  background: var(--team-mark) center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
}

.pp-hero > * { position: relative; z-index: 1; }
.pp-hero-top { display: flex; align-items: center; gap: var(--space-xl); min-width: 0; }
.pp-portrait { position: relative; flex: 0 0 auto; width: 128px; height: 128px; }

.pp-portrait > img:not(.pp-pac-overlay),
.pp-portrait-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  object-fit: cover;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-3xl);
  font-weight: 700;
}

.pp-pac-overlay { position: absolute; inset: -14%; width: 128%; height: 128%; transform: rotate(-6deg); }

.pp-identity { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-identity h1 { max-width: 100%; font-size: var(--font-2xl); line-height: 1.2; overflow-wrap: anywhere; }
.pp-identity .user-group-handle { color: var(--text-muted); font-size: var(--font-sm); }

.pp-team-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: 2px;
  padding: 4px 12px 4px 10px;
  color: var(--text-primary);
  background: var(--surface-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);
  transition: border-color var(--transition-fast);
}

.pp-team-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pp-team-chip-label { color: var(--text-muted); font-size: var(--font-xs); }

.pp-private-remark { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); font-size: var(--font-sm); }
.pp-private-remark label { color: var(--text-muted); }
.pp-private-remark input { width: 220px; height: 30px; }
.pp-private-remark .is-muted { color: var(--text-muted); }

/* 一排大数字：数字在上、名称在下，竖线隔开 */
.pp-facts {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
}

.pp-facts > div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 var(--space-md);
  border-left: 1px solid var(--border-color);
  text-align: center;
}

.pp-facts > div:first-child { border-left: 0; }
.pp-facts dt { color: var(--text-muted); font-size: var(--font-xs); }
.pp-facts dd { font-size: var(--font-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-win { color: var(--color-green); }
.pp-loss { color: var(--color-red); }

.pp-meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-xl); color: var(--text-muted); font-size: var(--font-xs); }
.pp-meta > div { display: flex; gap: 6px; min-width: 0; }
.pp-meta dd { color: var(--text-secondary); overflow-wrap: anywhere; }

/* 荣誉：一排小牌子，左边色条区分 MVP / EVP / 冠军 */
.pp-honors { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.pp-honor,
.pp-achievement {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: 7px 12px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pp-honor:hover, .pp-achievement:hover { color: var(--text-primary); background: var(--bg-hover); }
.pp-honor b, .pp-achievement b { flex: 0 0 auto; font-size: var(--font-xs); font-weight: 700; letter-spacing: .04em; }
.pp-honor-mvp { border-left-color: var(--color-gold); }
.pp-honor-mvp b { color: var(--color-gold); }
.pp-honor-evp { border-left-color: var(--color-green); }
.pp-honor-evp b { color: var(--color-green); }
.pp-honor-title { border-left-color: var(--color-purple); }
.pp-honor-title b { color: var(--color-purple); }

/* 标签页和各个面板 */
.pp-tabs { padding: 0 var(--space-sm); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
/* 标签页面板里有好几块时，块与块之间留出间距 */
.profile-tab-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--site-gap); }
.profile-tab-panel[hidden] { display: none !important; }

.pp-panel {
  min-width: 0;
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.pp-panel > h2 { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--font-md); }
.pp-panel > h2::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }

/* 资料页：一个框分左右两栏——左边能力值（雷达图 + 分数），右边近期比赛 */
.pp-overview-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 0; }
.pp-overview-column { min-width: 0; padding: var(--space-lg); }
.pp-overview-column + .pp-overview-column { border-left: 1px solid var(--border-color); }
.pp-overview-column > h2 { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--font-md); }
.pp-overview-column > h2::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }
.pp-skill-body { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
.pp-radar { width: 100%; height: auto; overflow: visible; }
.pp-radar-grid { fill: none; stroke: var(--border-color); stroke-width: 1; }
.pp-radar-axis { stroke: var(--border-color); stroke-width: 1; }
.pp-radar-shape { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.pp-radar-dot { fill: var(--accent); }
.pp-radar-label { fill: var(--text-secondary); font-size: 12px; font-weight: 600; }

.pp-skill-list { display: grid; gap: var(--space-md); }
.pp-skill-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px var(--space-sm); }
.pp-skill-list span { color: var(--text-secondary); font-size: var(--font-sm); }
.pp-skill-list b { font-variant-numeric: tabular-nums; }
.pp-skill-list small { margin-left: 2px; color: var(--text-muted); font-size: var(--font-xs); font-weight: 400; }

.pp-skill-list i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent) var(--pct), var(--surface-soft) var(--pct));
}

.pp-complete-link { margin-top: var(--space-lg); }

/* 近期比赛：左边一道色条（胜绿负红），右边比分 */
.pp-match-list { display: grid; margin: 0 calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)); }

.pp-match-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--space-md);
  row-gap: 2px;
  padding: 10px var(--space-lg) 10px calc(var(--space-lg) + 4px);
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.pp-match-row:hover { color: var(--text-primary); background: var(--bg-hover); }
.pp-match-row::before { content: ''; position: absolute; left: var(--space-sm); top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--border-strong); }
.pp-match-row.win::before { background: var(--color-green); }
.pp-match-row.loss::before { background: var(--color-red); }
.pp-match-opponent { grid-column: 1; grid-row: 1; font-size: var(--font-sm); }
.pp-vs { color: var(--text-muted); font-size: var(--font-xs); font-weight: 700; letter-spacing: .04em; }
.pp-match-event { grid-column: 1; grid-row: 2; overflow: hidden; color: var(--text-muted); font-size: var(--font-xs); text-overflow: ellipsis; white-space: nowrap; }
.pp-match-row time { grid-column: 2; grid-row: 1 / span 2; color: var(--text-muted); font-size: var(--font-xs); white-space: nowrap; }
.pp-match-row strong { grid-column: 3; grid-row: 1 / span 2; min-width: 52px; font-size: var(--font-lg); text-align: right; font-variant-numeric: tabular-nums; }
.pp-match-row.win strong { color: var(--color-green); }
.pp-match-row.loss strong { color: var(--color-red); }

/* 队伍页：当前队伍卡片 + 队友网格 */
.pp-team-current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--text-primary);
  background: var(--surface-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.pp-team-current:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pp-team-current-text { display: grid; }
.pp-team-current-text b { font-size: var(--font-lg); }
.pp-team-current-text span { color: var(--text-muted); font-size: var(--font-xs); }
/* 队友：卡片上面一行小标题 */
.pp-subhead { margin: var(--space-lg) 0 var(--space-sm); color: var(--text-secondary); font-size: var(--font-sm); font-weight: 600; }
.pp-teammates { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-sm); }

.pp-teammates a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-sm);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.pp-teammates a:hover { color: var(--text-primary); background: var(--bg-hover); }

.pp-teammates img,
.pp-teammates span {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  object-fit: cover;
  color: var(--text-muted);
  background: var(--surface-soft);
  border-radius: 50%;
  font-weight: 700;
}

.pp-teammates b { overflow: hidden; font-size: var(--font-sm); text-overflow: ellipsis; white-space: nowrap; }

/* 比赛表、荣誉列表 */
.pp-table-wrap { margin: 0 calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)); border-top: 1px solid var(--border-color); }
.pp-table-date { color: var(--text-muted); white-space: nowrap; }
.pp-table td.truncate { max-width: 220px; }
.pp-achievement-list { display: grid; gap: var(--space-sm); }
.pp-achievement { display: flex; }
.pp-achievement span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-achievement small { flex: 0 0 auto; color: var(--text-muted); }

@media (max-width: 1080px) {
  .pp-overview-panel { grid-template-columns: minmax(0, 1fr); }
  .pp-overview-column + .pp-overview-column { border-top: 1px solid var(--border-color); border-left: 0; }
}

@media (max-width: 760px) {
  .pp-hero { gap: var(--space-md); padding: var(--space-lg) var(--space-md); }
  .pp-hero::after { width: 180px; height: 180px; right: -50px; }
  .pp-hero-top { gap: var(--space-md); }
  .pp-portrait { width: 84px; height: 84px; }
  .pp-identity h1 { font-size: var(--font-xl); }
  .pp-facts { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-md); padding-top: var(--space-md); }
  .pp-facts > div:nth-child(3n + 1) { border-left: 0; }
  .pp-facts dd { font-size: var(--font-xl); }
  .pp-private-remark input { width: 100%; flex: 1 1 160px; }
  .pp-panel { padding: var(--space-md); }
  .pp-skill-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pp-radar { max-width: 280px; }
  .pp-skill-list { width: 100%; }
  .pp-overview-column { padding: var(--space-md); }
  .pp-match-list, .pp-table-wrap { margin: 0 calc(-1 * var(--space-md)) calc(-1 * var(--space-md)); }
  .pp-match-row { padding: 10px var(--space-md) 10px calc(var(--space-md) + 6px); }
}

/* ---------- 2. 选手数据页 ---------- */

/* 页头：头像 + 名字 + 队伍 / 地图数，右边返回链接 */
.pd-head { align-items: center; }
.pd-player { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }

.pd-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--surface-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.pd-avatar-fallback { display: grid; place-items: center; color: var(--text-muted); font-size: var(--font-xl); font-weight: 700; }
.pd-player-text { display: grid; gap: 2px; min-width: 0; }
.pd-player-name { font-size: var(--font-xl); overflow-wrap: anywhere; }
.pd-player-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-md); color: var(--text-muted); font-size: var(--font-sm); }
.pd-team-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-weight: 600; }

/* 工具条：左边两个下拉筛选，右边阵营切换 */
.pd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
}

.pd-filters { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.pd-filters label { display: grid; gap: 4px; color: var(--text-muted); font-size: var(--font-xs); }
.pd-filters select { width: 180px; }
.pd-stat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); color: var(--text-muted); font-size: var(--font-sm); }
.pd-side-switch, .pd-unit { display: inline-flex; align-items: center; gap: var(--space-sm); }
.pd-tabs { padding: 0 var(--space-sm); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }

/* 总览：左边三个 RATING 仪表（T / 总 / CT），右边六项指标 */
.pd-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.pd-summary-empty { grid-column: 1 / -1; }
.pd-rating-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: end; gap: var(--space-md); }
.pd-rating-gauge { --gauge-color: var(--accent); --gauge-size: 128px; --gauge-ring: 10px; display: grid; justify-items: center; min-width: 0; }
.pd-rating-main { --gauge-size: 176px; --gauge-ring: 12px; }
.pd-rating-t { --gauge-color: var(--color-t); }
.pd-rating-ct { --gauge-color: var(--color-ct); }

/* 半圆仪表：圆锥渐变画出“已走过”的那一段，再用遮罩挖空中间成一道弧 */
.pd-rating-arc {
  width: var(--gauge-size);
  height: calc(var(--gauge-size) / 2);
  border-radius: var(--gauge-size) var(--gauge-size) 0 0;
  background: conic-gradient(from 270deg at 50% 100%, var(--gauge-color) 0 var(--gauge-progress), var(--surface-soft) var(--gauge-progress) 50%, transparent 50%);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent calc(var(--gauge-size) / 2 - var(--gauge-ring)), var(--color-dark) calc(var(--gauge-size) / 2 - var(--gauge-ring) + 1px));
  mask: radial-gradient(circle at 50% 100%, transparent calc(var(--gauge-size) / 2 - var(--gauge-ring)), var(--color-dark) calc(var(--gauge-size) / 2 - var(--gauge-ring) + 1px));
}

.pd-rating-copy { display: grid; justify-items: center; margin-top: calc(var(--gauge-size) / -4); text-align: center; }
.pd-rating-copy strong { font-size: var(--font-xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pd-rating-main .pd-rating-copy strong { font-size: var(--font-3xl); }
.pd-rating-t .pd-rating-copy strong { color: var(--color-t); }
.pd-rating-ct .pd-rating-copy strong { color: var(--color-ct); }
.pd-rating-copy em { color: var(--text-secondary); font-size: var(--font-xs); font-style: normal; }
.pd-rating-copy span { margin-top: 2px; color: var(--text-muted); font-size: var(--font-xs); letter-spacing: .04em; white-space: nowrap; }

.pd-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
.pd-metric { display: grid; gap: 6px; min-width: 0; }
.pd-metric > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.pd-metric b { font-size: var(--font-lg); font-variant-numeric: tabular-nums; }
.pd-metric span { color: var(--text-muted); font-size: var(--font-xs); letter-spacing: .04em; }
.pd-metric i { display: block; height: 5px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent) var(--pct), var(--surface-soft) var(--pct)); }

/* 六个分类卡片：标题前的色块和下面的进度条用同一个颜色 */
.pd-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-gap); align-items: start; }
.pd-single-category { grid-template-columns: minmax(0, 520px); }

.pd-category {
  --cat: var(--accent);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.pd-category:has(.pd-dot-1) { --cat: var(--color-red); }
.pd-category:has(.pd-dot-2) { --cat: var(--color-green); }
.pd-category:has(.pd-dot-3) { --cat: var(--color-t); }
.pd-category:has(.pd-dot-4) { --cat: var(--color-ct); }
.pd-category:has(.pd-dot-5) { --cat: var(--color-purple); }
.pd-category:has(.pd-dot-6) { --cat: var(--color-gold); }

.pd-category summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 12px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  list-style: none;
}

.pd-category summary::-webkit-details-marker { display: none; }
.pd-category[open] summary { border-bottom: 1px solid var(--border-color); }
.pd-category-title { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; }
.pd-category-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cat); }
.pd-category-score { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-category-score small { color: var(--text-muted); font-size: var(--font-xs); font-weight: 400; }
.pd-category-score i { grid-column: 1 / -1; display: block; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cat) var(--pct), var(--surface-soft) var(--pct)); }
.pd-chevron { width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--transition-fast); }
.pd-category[open] .pd-chevron { margin-top: 4px; transform: rotate(-135deg); }
.pd-category-body { display: grid; gap: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.pd-category-row { display: grid; gap: 5px; }
.pd-category-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-sm); }
.pd-category-row span { color: var(--text-secondary); }
.pd-category-row b { font-variant-numeric: tabular-nums; }
.pd-category-row i { display: block; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cat) var(--pct), var(--surface-soft) var(--pct)); }

/* 其他标签页：趋势图、表格、多杀 */
.pd-panel { min-width: 0; padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.pd-panel > h3 { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--font-md); }
.pd-panel > h3::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }
.pd-chart-box { position: relative; height: 280px; }

.pd-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.pd-data-grid > div { display: grid; gap: 2px; padding: var(--space-md) var(--space-lg); background: var(--bg-card); }
.pd-data-grid dt { color: var(--text-muted); font-size: var(--font-xs); }
.pd-data-grid dd { font-size: var(--font-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .pd-summary { grid-template-columns: minmax(0, 1fr); }
  .pd-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pd-toolbar { padding: var(--space-md); }
  .pd-filters { width: 100%; }
  .pd-filters label { flex: 1 1 140px; }
  .pd-filters select { width: 100%; }
  .pd-summary { gap: var(--space-xl); padding: var(--space-lg) var(--space-md); }
  .pd-rating-gauge { --gauge-size: 92px; --gauge-ring: 8px; }
  .pd-rating-main { --gauge-size: 124px; --gauge-ring: 10px; }
  .pd-rating-main .pd-rating-copy strong { font-size: var(--font-2xl); }
  .pd-rating-copy strong { font-size: var(--font-lg); }
  .pd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
  .pd-category-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 3. 选手对比（/players/compare，照 HLTV） ---------- */
/* 左右两张卡；每项一行，占优的加粗、外侧一条绿线，落后的变灰、外侧一条红线（左卡画在左边，右卡画在右边） */
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--site-gap); }
.compare-submit { grid-column: 1 / -1; justify-self: center; }
.compare-card { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) 0; overflow: hidden; }

.compare-card-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); min-height: 56px; }
.compare-card-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  color: var(--text-muted);
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  font-size: var(--font-xl);
  font-weight: 700;
}

.compare-card-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.compare-card-avatar.is-empty { background: transparent; border: 1px dashed var(--border-strong); }
.compare-card-name { display: grid; gap: 4px; min-width: 0; }
.compare-card-name > a,
.compare-card-name > b { overflow: hidden; color: var(--text-primary); font-size: var(--font-lg); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.compare-card-name > a:hover { color: var(--accent); }
.compare-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: var(--font-sm); white-space: nowrap; }
.compare-card-maps::before { content: "·"; margin-right: 6px; }
.compare-lead { padding: 3px var(--space-sm); color: var(--color-green); background: var(--green-soft); border-radius: var(--radius-pill); font-size: var(--font-xs); font-weight: 700; white-space: nowrap; }
.compare-pick { width: 100%; }

.compare-stats { display: grid; margin: 0 calc(-1 * var(--space-lg)); border-top: 1px solid var(--border-color); }
.compare-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 38px;
  padding: 0 var(--space-lg);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.compare-stats > div:last-child { border-bottom: 0; }
.compare-stats dt { min-width: 0; font-size: var(--font-sm); }
.compare-stats dd { margin: 0; font-size: var(--font-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare-stats > .is-better { color: var(--text-primary); font-weight: 700; }
.compare-stats > .is-worse { color: var(--text-muted); }
.compare-card.is-a .compare-stats > div { border-left: 3px solid transparent; }
.compare-card.is-b .compare-stats > div { border-right: 3px solid transparent; }
.compare-card.is-a .compare-stats > .is-better { border-left-color: var(--color-green); }
.compare-card.is-a .compare-stats > .is-worse { border-left-color: var(--color-red); }
.compare-card.is-b .compare-stats > .is-better { border-right-color: var(--color-green); }
.compare-card.is-b .compare-stats > .is-worse { border-right-color: var(--color-red); }
.compare-hint { margin-top: var(--space-md); color: var(--text-muted); font-size: var(--font-sm); text-align: center; }

@media (max-width: 760px) {
  .compare-grid { gap: var(--space-sm); }
  .compare-card { gap: var(--space-sm); padding: var(--space-md) var(--space-md) 0; }
  .compare-card-head { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm); min-height: 0; }
  .compare-card-avatar { width: 40px; height: 40px; font-size: var(--font-lg); }
  .compare-card-name > a,
  .compare-card-name > b { font-size: var(--font-md); }
  .compare-card-meta { flex-wrap: wrap; row-gap: 2px; }
  .compare-card-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .compare-card-maps { flex-basis: 100%; }
  .compare-card-maps::before { content: none; }
  .compare-lead { grid-column: 1 / -1; justify-self: start; }
  .compare-stats { margin: 0 calc(-1 * var(--space-md)); }
  .compare-stats > div { align-items: baseline; min-height: 36px; padding: 9px var(--space-md); }
  .compare-stats dt { font-size: var(--font-xs); }
  .compare-stats dd { font-size: var(--font-sm); }
}