:root {
  --bg: #0e1015;
  --surface: #161922;
  --surface-2: #1d212c;
  --surface-3: #242936;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e9ebf2;
  --muted: #8c94a8;
  --accent: #f0623c;
  --coach: #c08cff;
  --hunter: #ff7a59;
  --survivor: #4aa3f0;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(240, 98, 60, 0.12), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(74, 163, 240, 0.1), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

button { font: inherit; color: inherit; }
input, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- 顶部 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 16, 21, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px 10px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), #ff9166);
  box-shadow: 0 6px 18px rgba(240, 98, 60, 0.3);
}

.brand-text h1 { margin: 0; font-size: 16px; letter-spacing: 0.3px; }
.brand-text p { margin: 0; font-size: 12px; color: var(--muted); }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  min-width: 240px;
  transition: border-color 0.15s, background 0.15s;
}
.search:focus-within { border-color: var(--border-strong); background: var(--surface-3); }
.search-icon { color: var(--muted); font-size: 15px; }
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
}
.search input::placeholder { color: var(--muted); }

/* 搜索框下方：站点访问量（Cloudflare Web Analytics 的 Page views） */
.topbar-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.pageviews {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0.2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.pageviews[hidden] { display: none; }
.pageviews .pv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(240, 98, 60, 0.8);
}
.pageviews b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.competition-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 12px;
  overflow-x: auto;
}
.competition-label { font-size: 12px; color: var(--muted); flex: none; }
.competition-switch { display: flex; gap: 10px; }

.comp-btn {
  --accent: #f0623c;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 0 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.comp-btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.comp-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.comp-league {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--accent);
}
.comp-name { font-size: 13px; }
.comp-state { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }

/* ---------- 标签页 ---------- */
.tabs {
  position: sticky;
  top: 106px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  background: linear-gradient(var(--bg) 70%, transparent);
  overflow-x: auto;
}
.tab {
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* 主页面：赛程赛果 */
.tab.is-primary {
  font-size: 16px;
  font-weight: 700;
  padding: 12px 18px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.tab.is-primary.is-active { color: var(--accent); border-bottom-width: 3px; }
.tab-divider {
  flex: none;
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 8px;
}
/* 次要页面：弱化一档，避免与主页面争视觉重量 */
.tab.is-secondary { font-size: 12.5px; padding: 10px 12px; color: var(--muted); }
.tab.is-secondary.is-active { color: var(--text); }

/* ---------- 布局 ---------- */
.view {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fade 0.22s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 32px;
  font-size: 12px;
  color: var(--muted);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.panel-muted { background: var(--surface-2); }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-head h2, .panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.panel-head-right { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--muted); font-size: 12px; }
.pad { padding: 12px 0; }

/* ---------- 概要 ---------- */
.hero {
  --accent: #f0623c;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    var(--surface);
}
.hero-league { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.4px; }
.hero-main h2 { margin: 6px 0 2px; font-size: 24px; letter-spacing: 0.5px; }
.hero-sub { margin: 0; color: var(--muted); font-size: 12px; }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.hero-updated { font-size: 12px; color: var(--muted); }

.badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
}
.badge-ongoing { color: #7fe0a6; border-color: rgba(127, 224, 166, 0.4); background: rgba(127, 224, 166, 0.08); }
.badge-upcoming { color: #7fc4ff; border-color: rgba(127, 196, 255, 0.4); background: rgba(127, 196, 255, 0.08); }
.badge-finished { color: var(--muted); }
.badge-edited { color: #ffc978; border-color: rgba(255, 201, 120, 0.4); background: rgba(255, 201, 120, 0.08); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tile-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-label { font-size: 12px; color: var(--muted); }

.team-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.team-chip {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color 0.15s, transform 0.15s;
}
.team-chip:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.team-chip-name { font-weight: 700; font-size: 14px; }
.team-chip-meta { font-size: 11px; color: var(--muted); }
.team-chip-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.team-chip-mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.team-chip-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

/* ---------- 来源 ---------- */
.source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.source {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.source-main { display: flex; flex-direction: column; gap: 2px; }
.source-title { font-weight: 600; text-decoration: none; }
.source-title:hover { color: var(--accent); text-decoration: underline; }
.source-pub { font-size: 12px; color: var(--muted); }
.source-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--muted); }
.source-type {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(240, 98, 60, 0.14);
  color: #ff9b7a;
}
.source-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.roadmap { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.roadmap li { margin-bottom: 6px; }
.roadmap b { color: var(--text); font-weight: 600; }

/* ---------- 战队 ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.team-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.team-card:hover { border-color: var(--border-strong); transform: translateY(-2px); background: var(--surface-3); }
.team-card-head { display: flex; align-items: center; gap: 12px; }
.team-card-head > div:nth-child(2) { flex: 1; min-width: 0; }
.team-card-name { margin: 0; font-size: 16px; }
.team-card-count { font-size: 12px; color: var(--muted); flex: none; }
/* 战队卡片 / 详情页的「求生平均逃脱人数」：数值加粗，标签用弱化色 */
.team-card-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.team-avg-escapes { font-size: 12px; color: var(--muted); flex: none; }
.team-avg-escapes b { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }

.team-badge {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
  line-height: 1.05;
  text-align: center;
  padding: 2px 4px;
  overflow: hidden;
  word-break: break-all;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.team-badge[data-len="5"], .team-badge[data-len="6"] { font-size: 10px; }
.team-badge[data-len="7"], .team-badge[data-len="8"] { font-size: 9px; }
.team-badge[data-len="9"], .team-badge[data-len="10"] { font-size: 8px; }
.team-badge.has-logo { padding: 3px; }
.team-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.team-badge-lg { width: 58px; height: 58px; font-size: 17px; border-radius: 12px; }
.team-badge-lg[data-len="5"], .team-badge-lg[data-len="6"] { font-size: 13px; }
.team-badge-lg[data-len="7"], .team-badge-lg[data-len="8"] { font-size: 11px; }
.team-badge-lg[data-len="9"], .team-badge-lg[data-len="10"] { font-size: 10px; }

.roster { display: flex; flex-direction: column; gap: 8px; }
.roster-group { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: start; }
.roster-role { font-size: 11px; color: var(--muted); padding-top: 3px; }
.roster-names { display: flex; flex-wrap: wrap; gap: 6px; }
.roster-name {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.detail-name { margin: 0 0 6px; font-size: 20px; }

.detail-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.detail-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.detail-col-head { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.member {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.12s;
}
.member:hover { background: var(--surface-3); }
.member-handle { font-size: 13px; }
.member-title { font-size: 11px; color: var(--muted); }

/* ---------- 表格 ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.field-grow { flex: 1; min-width: 180px; }
.field select, .field input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
}
.field select:focus, .field input:focus { border-color: var(--accent); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; transition: background 0.12s; }
.table tbody tr:hover { background: var(--surface-2); }
.cell-name { font-weight: 600; }
.cell-ign { color: var(--muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.team-pill {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.tag-coach .dot { background: var(--coach); }
.tag-hunter .dot { background: var(--hunter); }
.tag-survivor .dot { background: var(--survivor); }

/* ---------- 按钮 ---------- */
.btn {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: #ff7048; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 6px 10px; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { color: #ff8f8f; border-color: rgba(255, 143, 143, 0.35); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 143, 143, 0.12); }
.btn-file { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.btn-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.feedback {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid var(--border);
}
.feedback.is-ok { color: #7fe0a6; border-color: rgba(127, 224, 166, 0.35); background: rgba(127, 224, 166, 0.08); }
.feedback.is-error { color: #ff9c9c; border-color: rgba(255, 156, 156, 0.35); background: rgba(255, 156, 156, 0.08); }

/* ---------- 结构说明 ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.schema {
  margin: 0;
  padding: 14px;
  background: #0b0d12;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #b9c2d6;
}

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 36px 20px; }
.empty-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}
.empty h3 { margin: 0 0 6px; font-size: 15px; }
.empty p { margin: 0; color: var(--muted); font-size: 13px; }
.empty-actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; }

.weeks { display: flex; flex-direction: column; gap: 16px; }
.week {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.week-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.week-head h4 { margin: 0; font-size: 13px; letter-spacing: 0.6px; color: var(--accent); }
.day { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.day:last-child { border-bottom: 0; }
.day-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

.match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.match-item {
  display: grid;
  grid-template-columns: 104px 1fr 34px 1fr 96px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
}
.match-item.is-today {
  border-color: rgba(240, 98, 60, 0.5);
  box-shadow: inset 0 0 0 1px rgba(240, 98, 60, 0.22);
}
.match-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.match-team {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px;
}
.match-team:hover { color: var(--accent); text-decoration: underline; }
.match-team-home { text-align: right; }
.match-team-away { text-align: left; }
.match-vs { color: var(--muted); font-size: 11px; text-align: center; }
.match-state { font-size: 12px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.match-state.is-score { color: var(--text); font-weight: 700; }
.match-state.is-today { color: var(--accent); font-weight: 600; }
.match-state.is-pending { color: #ffc978; }
.match-state.is-ongoing { color: #ffc978; font-weight: 700; }
.match-item.is-ongoing { border-color: #6b5a33; }

.team-match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 列宽下限改为 min(348px, 100%)：宽屏保持每行 >=348px，窄屏不再把行撑出横向滚动条 */
  grid-template-columns: repeat(auto-fill, minmax(min(348px, 100%), 1fr));
  gap: 8px;
}
.team-match {
  /* 固定列：日期时段 / 主客 / 对手 / 胜负 —— 队名与主客居中，逐行上下对齐 */
  display: grid;
  grid-template-columns: 142px 34px 1fr 52px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
}
.team-match-when { flex: none; color: var(--muted); font-size: 12px; }
.team-match-side {
  justify-self: center;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--muted);
}
.team-match .match-team { justify-self: center; }
.team-match .match-state { justify-self: center; }
.team-match-result {
  justify-self: center;
  font-size: 10px;
  line-height: 1.6;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--muted);
}
.team-match-result.is-win {
  color: var(--accent);
  font-weight: 600;
  border-color: rgba(240, 98, 60, 0.45);
  background: rgba(240, 98, 60, 0.12);
}
/* 负 = 蓝色（取调色板里的 --survivor 蓝），与胜场的强调色区分开 */
.team-match-result.is-loss {
  color: var(--survivor);
  border-color: rgba(74, 163, 240, 0.45);
  background: rgba(74, 163, 240, 0.12);
}
.team-match.is-openable { cursor: pointer; }
.team-match.is-openable:hover { border-color: var(--border-strong); background: var(--surface-3); }

/* 窄屏（手机 / 超窄窗口）：固定列收窄并允许压缩，避免队名把整行挤出行外被裁切。
   日期列换行成两行，四列依旧固定，因此每行的队名、主客仍然上下对齐。 */
@media (max-width: 460px) {
  .team-match { grid-template-columns: minmax(0, 96px) 30px minmax(0, 1fr) 52px; gap: 6px; padding: 8px 10px; }
}

/* ---------- 弹窗 ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 8, 12, 0.66);
  backdrop-filter: blur(4px);
  animation: fade 0.15s ease;
}
.modal {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.modal-close:hover { color: var(--text); }
.modal-role {
  display: inline-block;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--muted);
}
.modal-name { margin: 10px 0 2px; font-size: 22px; }
.modal-ign {
  margin: 0 0 16px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--muted);
}
.modal-note { margin: 16px 0 0; }
body.is-modal-open { overflow: hidden; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .topbar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .search { min-width: 0; }
  .tabs { top: 168px; }
  .detail-cols { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .hero-side { align-items: flex-start; }
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .match-item { grid-template-columns: 84px 1fr 24px 1fr; }
  .match-item .match-state { grid-column: 1 / -1; text-align: left; padding-left: 84px; }
  .match-team-home { text-align: left; }
}

/* ---------- 赛果：单局比分与积分榜 ---------- */
.match-item.is-played { padding-bottom: 9px; }
.match-team.is-winner { color: var(--accent); }
.match-team.is-winner::after {
  content: "胜";
  font-size: 9px;
  margin-left: 3px;
  vertical-align: super;
  opacity: 0.85;
}

.match-games {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: -2px;
}
.game-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.game-chip .game-label { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; color: var(--muted); }
.game-chip .game-score { font-weight: 600; }
.game-chip.is-ot { border-color: rgba(240, 98, 60, 0.45); }
.game-chip.is-ot .game-label { color: var(--accent); }
.game-chip .game-chip-time { font-size: 10px; color: var(--muted); }

.standings-table tbody tr { cursor: default; }
.standings-table tbody td { font-variant-numeric: tabular-nums; }
.standings-rank { width: 44px; color: var(--muted); }
.standings-team { display: inline-flex; align-items: center; gap: 8px; }
.standings-logo { width: 22px; height: 22px; object-fit: contain; }
.standings-note { margin: 10px 0 0; }
.standings-source { margin: 6px 0 0; }
.standings-source a { color: var(--accent); }

/* ---------- 单局明细 ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    var(--surface);
}
.page-kicker {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--accent);
  font-weight: 700;
}
.page-head-main h2 { margin: 6px 0 0; font-size: 24px; }
.page-head-side { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.page-head-link { flex: none; font-size: 12px; }

/* ---------- 选手单局数据 ---------- */
.mvp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffce6a;
  background: rgba(255, 206, 106, 0.12);
  border: 1px solid rgba(255, 206, 106, 0.32);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}
.mvp-badge i { font-style: normal; font-size: 11px; }
.mvp-badge-sm { font-size: 11px; padding: 0 7px; }
.mvp-badge-lg { font-size: 14px; padding: 3px 12px; vertical-align: middle; }
.cell-mvp { white-space: nowrap; }

/* 常用角色：选手名旁的「角色(使用次数)」小标签，默认只展示前三名 */
.char-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.char-chip {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.char-chips-sm .char-chip { font-size: 10px; padding: 0 6px; }
.cell-name .char-chips { display: flex; }
.cell-chars { min-width: 0; }
.col-chars { white-space: normal; }
.detail-chars { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-chars .char-chips { margin-top: 0; }
.detail-chars-label { font-size: 11px; color: var(--muted); }
.char-chip.is-unknown { opacity: 0.7; }
.member { flex-wrap: wrap; }
.member-chars { flex: 1 1 100%; }
.pool-pick { display: inline-flex; align-items: baseline; }
.pool-player { margin-left: 4px; font-size: 11px; color: var(--muted); }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.member-meta { margin-left: auto; }
.detail-sub { margin: 0; font-size: 12px; color: var(--muted); }
.detail-side { margin-left: auto; }
.player-stats { margin-top: 20px; }
.player-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.player-stats-head h4 { margin: 0; font-size: 14px; }
.player-stats-sub { margin: 22px 0 10px; font-size: 13px; font-weight: 600; }
.stats-table { font-variant-numeric: tabular-nums; }
.stats-table thead th:first-child { width: 55%; }
.stats-table .stats-label { color: var(--text); }
.stats-table .stats-value { font-weight: 600; }
.stats-table .num { text-align: right; white-space: nowrap; }

/* 选手详情页：指标表 + 右侧能力雷达，两栏等高 */
.player-stats-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
  gap: 14px;
  align-items: stretch;
}
.player-stats-body .table-wrap { height: 100%; }
.radar-panel {
  position: relative;
  min-height: 240px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.radar-panel.is-survivor { --radar-color: var(--survivor); }
.radar-panel.is-hunter { --radar-color: var(--hunter); }
.radar-head {
  position: absolute;
  top: 9px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.radar-head h5 { margin: 0; font-size: 12px; font-weight: 600; }
.radar-canvas {
  position: absolute;
  top: 30px;
  left: 6px;
  right: 6px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-canvas svg { display: block; width: 100%; height: 100%; }
.radar-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-ring-outer { stroke: var(--border-strong); }
.radar-axis { stroke: var(--border); stroke-width: 1; }
.radar-area {
  fill: var(--radar-color, var(--accent));
  fill-opacity: 0.22;
  stroke: var(--radar-color, var(--accent));
  stroke-width: 1.6;
  stroke-linejoin: round;
}
/* 联赛平均水平：灰色虚线，作为本人的对照基准 */
.radar-average {
  fill: var(--muted);
  fill-opacity: 0.12;
  stroke: var(--muted);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
  pointer-events: none;
}
.radar-legend {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 10.5px;
  color: var(--muted);
}
.radar-key { display: inline-flex; align-items: center; gap: 4px; }
.radar-key i { width: 10px; height: 10px; border-radius: 2px; }
.radar-key-self i { background: var(--radar-color, var(--accent)); }
.radar-key-avg i { background: var(--muted); opacity: 0.6; }
.radar-key-avg { cursor: default; }
/* 某项缺数据时，图下补一句说明，图例整体上移 */
.radar-note {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  margin: 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}
.radar-panel.has-note .radar-legend { bottom: 34px; }
.radar-dot {
  fill: var(--radar-color, var(--accent));
  stroke: var(--surface-2);
  stroke-width: 1;
}
/* 数据点命中区：透明但可命中，比 3px 的点大得多，方便鼠标悬停 */
.radar-vertex { cursor: pointer; }
.radar-hit { fill: transparent; pointer-events: all; }
.radar-vertex:hover .radar-dot { fill: var(--text); stroke-width: 2; }
/* 悬停提示（内容与位置由 app.js 填充） */
.radar-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 88px;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}
.radar-tip[hidden] { display: none; }
.radar-tip-name { display: block; margin-bottom: 2px; font-size: 11.5px; }
.radar-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.radar-tip-row .muted { font-size: 10.5px; }
.radar-tip-row b { font-variant-numeric: tabular-nums; }
.radar-label { font-size: 10px; fill: var(--text); }
.radar-label .radar-value { font-size: 9px; fill: var(--muted); }
.radar-label .radar-rank { font-size: 9px; font-weight: 600; fill: var(--radar-color, var(--accent)); }
/* 打开能力雷达时的展开动效：只有「本人的数据」这一层从中心展开，数据点随后依次亮起。
   网格、灰色联赛平均线与所有文字都不参与动画（文字不位移、不缩放）。
   缩放中心要落在雷达中心 (150,150)：viewBox 是 "-30 0 360 300"（左边留了 30 单位给名次标签），
   这里量到的 transform-origin 是以视图框左上角为基准的偏移，所以直接写 150px 150px。 */
.radar-shape {
  transform-box: view-box;
  transform-origin: 150px 150px;
  animation: radar-expand 620ms cubic-bezier(0.2, 0.8, 0.25, 1.04) both;
}
.radar-vertex { animation: radar-fade-in 240ms ease-out both; animation-delay: calc(var(--i, 0) * 45ms + 260ms); }
@keyframes radar-expand {
  from { opacity: 0; transform: scale(0.04); }
  55% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
@keyframes radar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .radar-shape,
  .radar-vertex { animation: none; }
}
/* 窄窗口下雷达图移到指标表下方；必须排在基础规则之后，才能覆盖网格列定义 */
@media (max-width: 860px) {
  .player-stats-body { grid-template-columns: 1fr; }
  .radar-panel { min-height: 300px; }
}
.stats-leaderboard thead th:first-child { width: auto; }
.stats-leaderboard .num { text-align: right; }
/* 选手数据页：求生者 / 监管者切换（胶囊分组的当前项用阵营色） */
.role-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.role-switch-btn {
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 1px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.role-switch-btn:hover { color: var(--text); }
.role-switch-btn.is-active { color: #10131a; font-weight: 600; }
.role-switch-btn[data-role="survivor"].is-active { background: var(--survivor); }
.role-switch-btn[data-role="hunter"].is-active { background: var(--hunter); }
/* 选手数据页列多，压缩字号 / 内边距，保证窄窗口下也能一屏看全（不出现横向滚动） */
.table.stats-leaderboard { font-size: 11.5px; }
.table.stats-leaderboard thead th { font-size: 11px; padding: 7px 7px; white-space: normal; }
.table.stats-leaderboard tbody td { padding: 6px 7px; }
.stats-leaderboard .col-rank { width: 26px; }
.stats-leaderboard .team-pill { padding: 1px 6px; font-size: 10px; }
.stats-leaderboard .cell-chars { max-width: 158px; }
.stats-leaderboard .char-chips { gap: 3px; }
.stats-leaderboard .char-chip { font-size: 10px; padding: 0 5px; }
.stats-leaderboard .num { font-variant-numeric: tabular-nums; }
.stats-leaderboard .col-sort button { white-space: normal; text-align: left; }
.col-rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 44px; }
.col-sort button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.col-sort button:hover { color: var(--text); }
.col-sort.is-active button { color: var(--accent); }
.col-sort i { font-style: normal; font-size: 9px; }
/* 角色数据页：角色 × pick / ban / pick率 / ban率（监管表多一列平均淘汰人数；点角色名进详情页）。
   列宽一律用百分比，任何窗口宽度下都按同一比例铺满，「角色」列不会被撑成一大片空白；
   数字列表头与数据统一右对齐，两者贴在同一条竖线上。比率列绝不能没有宽度——固定布局会把剩余
   宽度全给没写宽度的列，列一宽表头贴列头、数字贴列尾，看着就是「表头和内容没对齐」（真实踩过两次）。 */
.char-table { table-layout: fixed; min-width: 600px; }
.char-table thead th:first-child { width: 4%; }
.char-table thead th:nth-child(2) { width: 30%; }
.char-table thead th:nth-child(3),
.char-table thead th:nth-child(4) { width: 9%; }
.char-table thead th:nth-child(5),
.char-table thead th:nth-child(6) { width: 11%; }
/* 平均淘汰人数这列的表头最长，且排序后还要放得下箭头，宽度比其它数字列宽一档 */
.char-table thead th.col-avg { width: 16%; }
.char-table thead th,
.char-table tbody td { padding-left: 8px; padding-right: 8px; }
.char-table thead th:nth-child(n + 3),
.char-table tbody td.num { text-align: right; }
.char-table .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.char-table .char-rate { font-weight: 500; }
.char-name-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.char-name-btn:hover { color: var(--accent); text-decoration: underline; }
/* 角色详情页：使用选手 / 禁用队伍不再挤在表格的一列里，单独成块 */
.char-facts { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 14px 0 0; }
.char-fact dt { font-size: 11px; color: var(--muted); }
.char-fact dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.char-detail-block .char-users { gap: 8px 16px; }
.char-detail-block .char-user-chip { font-size: 12px; }
.char-detail-block .char-ban-teams { gap: 6px; }
.char-users { display: flex; flex-wrap: wrap; gap: 5px 10px; }
/* 选手 + 其「该角色成绩」（仅监管表）：整组一起换行；每次登场一条，条与条之间可断行 */
.char-user { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.char-user-grade { display: inline-flex; flex-wrap: wrap; gap: 3px 10px; font-size: 10.5px; color: var(--muted); }
.char-user-half { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 禁用队伍：作为「ban」旁边的独立一列，队名(次数) 从上到下换行 */
.char-ban-teams { display: flex; flex-wrap: wrap; gap: 4px; }
.char-ban-team {
  font-size: 10.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.char-user-chip {
  font: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.char-user-chip:hover { border-color: var(--accent); color: var(--accent); }
.honor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.honor {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 12px;
}
.honor-star { color: #ffce6a; }
.honor-when { font-variant-numeric: tabular-nums; }
.player-stats-note { margin: 10px 0 0; font-size: 12px; }
.player-stats-source { margin: 6px 0 0; font-size: 12px; }
.player-stats-source a { color: var(--accent); }
.page-head-stats { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; }
.page-head-stats dt { font-size: 11px; color: var(--muted); }
.page-head-stats dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 点整张比赛卡即进入单局明细：卡片可点 + 右侧提示 */
.match-item.is-openable { cursor: pointer; }
.match-item.is-openable:hover { border-color: var(--border-strong); background: var(--surface-2); }
.match-open-hint { font-size: 11px; color: var(--muted); align-self: center; }
.match-item.is-openable:hover .match-open-hint { color: var(--accent); }

.modal-lg { width: min(900px, 100%); max-height: 86vh; overflow-y: auto; }

.match-detail { margin-top: 4px; }
.detail-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 0 4px;
}
.detail-team { font-size: 20px; font-weight: 600; }
.detail-team.is-winner { color: var(--accent); }
.detail-team.is-winner::after {
  content: "胜";
  font-size: 10px;
  margin-left: 4px;
  vertical-align: super;
  opacity: 0.85;
}
.detail-total {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.detail-meta { text-align: center; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.detail-meta b { color: var(--text); }

.detail-game {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px 12px;
  margin-bottom: 10px;
}
.detail-game.is-ot { border-color: rgba(240, 98, 60, 0.45); }
.detail-game-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.game-tag {
  min-width: 34px;
  text-align: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
}
.detail-game.is-ot .game-tag { color: var(--accent); border-color: rgba(240, 98, 60, 0.45); }
.game-map { color: var(--muted); }
.game-time { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
.game-total {
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.detail-half { padding: 8px 0 2px; }
.detail-half + .detail-half { border-top: 1px dashed var(--border); }
.half-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.half-label { font-weight: 600; }
.half-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.half-note { color: var(--muted); }
.half-time { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
.half-side {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
/* 正文没点名阵营、由官方赛后数据补全时：虚线边框示意「这一项是补的」 */
.half-side.is-inferred { border-style: dashed; }
.half-side.is-unknown { opacity: 0.6; }

.pool-list {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 4px 10px;
  margin: 8px 0 0;
  font-size: 12px;
}
.pool-list dt { color: var(--muted); }
.pool-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pool-pick {
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pool-bans { color: var(--muted); font-size: 11px; }
.pool-bans.is-none { opacity: 0.55; }
.pool-ban-cell { grid-column: 2; margin-top: -2px; }

.detail-note {
  margin: 4px 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(240, 98, 60, 0.08);
  border: 1px solid rgba(240, 98, 60, 0.28);
  font-size: 12px;
  line-height: 1.6;
}
.detail-ot-note {
  margin: 4px 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(240, 98, 60, 0.08);
  border: 1px solid rgba(240, 98, 60, 0.28);
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.detail-ot-note b { color: var(--text); }
.detail-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.detail-sources li { display: flex; gap: 8px; }
.detail-sources a { color: var(--accent); }

/* ---------- 每周总结 ---------- */
.week-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.week-btn {
  position: relative;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.week-btn:hover { color: var(--text); border-color: var(--border-strong); }
.week-btn.is-active {
  color: #10131a;
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
}
.week-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--hunter);
  vertical-align: 1px;
}
.week-btn.is-active .week-dot { background: #10131a; opacity: 0.5; }
/* 每个周次右侧的「输出」按钮：导出该周总结的无损图片（PNG） */
.week-item { display: inline-flex; align-items: center; gap: 4px; }
.week-export {
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s;
}
.week-export:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.week-export:disabled { opacity: 0.55; cursor: default; color: var(--muted); }

/* 每周总结的「求生者 / 监管者」两组标题：跟随阵营主题色 */
.master-role { --role-color: var(--accent); }
.master-role + .master-role { margin-top: 20px; }
.master-role-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--role-color);
}
.master-role-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--role-color);
}

.master-grid {
  /* 阵营配色：求生者蓝色、监管者橙色（作用于「大师」卡与「本周之最」） */
  --role-color: var(--accent);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
}
.master-role.is-survivor, .master-grid.is-survivor { --role-color: var(--survivor); }
.master-role.is-hunter, .master-grid.is-hunter { --role-color: var(--hunter); }
.master-card {
  border: 1px solid color-mix(in srgb, var(--role-color) 26%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--role-color) 7%, transparent), transparent 58%),
    var(--surface-2);
  padding: 13px 15px 11px;
}
.master-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.master-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; color: var(--role-color); }
/* 指标名跟在标题后面用括号标注 */
.master-suffix { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.master-winners { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.master-winner { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; }
.master-name { font-weight: 600; }
.master-value { font-variant-numeric: tabular-nums; }
.master-winner .team-pill { font-size: 11px; }
.master-empty { font-size: 12px; color: var(--muted); }

/* 「本周之最」（最佳求生队伍 / 最佳监管者）：不允许并列，样式与大师卡区分开 */
.master-card.is-best {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--role-color) 48%, var(--border));
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--role-color) 14%, transparent), transparent 62%),
    var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.best-head { display: flex; align-items: center; gap: 8px; }
.best-kicker {
  flex: none;
  font-size: 10px;
  line-height: 1.6;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--role-color);
  border: 1px solid color-mix(in srgb, var(--role-color) 55%, transparent);
}
.best-winner { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-left: auto; }
.best-winner .master-name { font-size: 15px; }
.best-winner .master-value { font-size: 15px; }
@media (max-width: 560px) {
  .best-winner { margin-left: 0; }
}
.team-badge-sm { width: 30px; height: 30px; border-radius: 8px; font-size: 10px; }

/* ---------- 选手头像 / 角色头像 ----------
   图片来自 biligame 第五人格 WIKI（见 assets/js/data/photos.js）；缺图时视图层不渲染 <img>，
   所以这里只管有图时的样式：选手头像统一圆形，角色头像统一圆角方形。 */
.player-avatar {
  flex: none;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
}
.player-avatar-xs { width: 18px; height: 18px; }
.player-avatar-sm { width: 24px; height: 24px; }
.player-avatar-lg { width: 64px; height: 64px; border-width: 2px; }

.char-icon {
  flex: none;
  display: block;
  object-fit: contain;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.char-icon-xs { width: 16px; height: 16px; border-radius: 4px; }
.char-icon-sm { width: 26px; height: 26px; border-radius: 7px; }
.char-icon-lg { width: 54px; height: 54px; border-radius: 12px; }

/* 选手名旁的圆形头像（选手数据表 / 选手名录表） */
.player-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

/* 角色名 / 角色标签里的头像：行内 flex 排布，文字与图标垂直居中 */
.char-chip { display: inline-flex; align-items: center; gap: 3px; }
.char-name-btn { display: inline-flex; align-items: center; gap: 8px; }
.char-detail-title { display: flex; align-items: center; gap: 10px; }
.roster-name { display: inline-flex; align-items: center; gap: 5px; }
.member-handle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* 基线对齐的容器里，图标要显式居中，否则会被抬到基线之上 */
.pool-pick .char-icon,
.master-winner .player-avatar { align-self: center; }