/* 统计页显示模式与职业分析图。样式只服务 stats.html,不进全站 styles.css,
 * 避免为了一页图表去抬所有页面的样式版本号。 */

/* 模式 A:职业分析 + 职业对战 + 选手战绩。模式 B:职业分析 + 卡组 + 卡组构成。
 * 属性在 stats-boot.js 里于首帧前写上,这里用 !important 压过区块自己的 hidden 切换。 */
html[data-stats-mode="a"] #deck-list-block,
html[data-stats-mode="a"] #stats-deck-comp {
  display: none !important;
}

html[data-stats-mode="b"] #stats-player-section,
html[data-stats-mode="b"] #stats-matchup {
  display: none !important;
}

/* 范围收进弹窗后不再占左栏。压过 styles.css 里「左范围 / 右结果」的两列网格。 */
.stats-layout {
  display: block;
}

.stats-export {
  justify-content: flex-end;
  margin-block-end: 0.85rem;
  padding-block-start: 0;
  border-block-start: 0;
}

/* 顶栏:标题可缩,切换和范围按钮不换行、不把页面撑出横向滚动。
 * 范围按钮放最后,窄屏也保持在最右(比赛页的 mode-seg 在 48rem 下会被 order 推到最后)。 */
body[data-page="stats"] .header-inner,
body[data-page="stats"] .header-actions {
  flex-wrap: nowrap;
  min-inline-size: 0;
}

body[data-page="stats"] .header-title-group {
  flex: 1 1 auto;
  min-inline-size: 2rem;
}

body[data-page="stats"] .header-actions {
  flex: 0 1 auto;
  max-inline-size: 100%;
}

body[data-page="stats"] #app-header .mode-seg {
  flex: none;
}

.stats-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  white-space: nowrap;
  max-inline-size: 100%;
}

.stats-scope-btn-short {
  display: none;
}

.stats-scope-count {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--text-xs);
  line-height: 1.2;
  padding: 0.08rem 0.42rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.stats-scope-count.is-empty {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* 和赛事设置同一套 dialog-head。碗要并排,所以比默认 40rem 再宽一点;
 * 窄屏 92vw 低于大碗的 32rem 容器查询,自动改成上下排。 */
#stats-scope-dialog {
  inline-size: min(92vw, 52rem);
  max-inline-size: calc(100vw - 1.25rem);
}

#stats-scope-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  flex-wrap: wrap;
}

#stats-scope-dialog .dialog-head-actions {
  flex-wrap: wrap;
}

#stats-scope-dialog .dialog-body {
  min-inline-size: 0;
}

@media (max-width: 48rem) {
  body[data-page="stats"] .header-actions .mode-seg { order: 0; }
  body[data-page="stats"] #stats-scope-btn { order: 1; }
}

/* 320 宽时「统计范围」四个字会把标题挤成省略号。短标签仍是范围,届数在徽章上。 */
@media (max-width: 23.5rem) {
  .stats-scope-btn-label { display: none; }
  .stats-scope-btn-short { display: inline; }

  body[data-page="stats"] .header-inner {
    padding-inline: 0.45rem;
    gap: 0.28rem;
  }

  body[data-page="stats"] #app-header .mode-seg-btn {
    padding: 0.35rem 0.42rem;
  }
}

#stats-sve-deck-note {
  margin: 0 0 0.85rem;
}

.stats-class-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.9rem;
  align-items: start;
}

.stats-chart {
  margin: 0;
  padding: 0.85rem 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-inline-size: 0;
}

.stats-chart-title {
  margin: 0 0 0.65rem;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.stats-chart-body {
  display: grid;
  grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.stats-pie {
  width: 100%;
  height: auto;
  overflow: visible;
}

.stats-pie-slice {
  stroke: var(--surface);
  stroke-width: 1.25;
}

.stats-pie text {
  font-family: var(--font);
}

.stats-sample {
  font-size: var(--text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  fill: var(--warning);
  color: var(--warning);
  white-space: nowrap;
  min-inline-size: 2.4rem;
}

.stats-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-inline-size: 0;
}

.stats-legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.35rem;
  align-items: center;
  min-block-size: 1.45rem;
}

.stats-legend .icon,
.stats-win-row .icon,
.stats-matchup .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  filter: none;
}

.stats-legend-name,
.stats-win-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.stats-legend-pct,
.stats-win-pct,
.stats-matchup-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--text-sm);
}

.stats-legend .stats-sample:empty,
.stats-win-row .stats-sample:empty {
  visibility: hidden;
}

.stats-win-bars {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.stats-win-row {
  display: grid;
  grid-template-columns: 1.25rem 4.25rem minmax(0, 1fr) 2.75rem 2.6rem;
  gap: 0.4rem;
  align-items: center;
}

.stats-win-track {
  position: relative;
  block-size: 0.72rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.stats-win-fill {
  block-size: 100%;
  border-radius: inherit;
  min-inline-size: 0;
}

#stats-matchup-hint {
  margin: 0 0 0.75rem;
}

.stats-matchup-wrap {
  overflow-x: auto;
  max-inline-size: 100%;
}

.stats-matchup {
  border-collapse: separate;
  border-spacing: 0;
  inline-size: max-content;
  min-inline-size: 100%;
  font-size: var(--text-sm);
}

.stats-matchup th,
.stats-matchup td {
  padding: 0.4rem 0.5rem;
  border-block-end: 1px solid var(--border-soft);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.stats-matchup thead th {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  border-block-end-color: var(--border);
}

.stats-matchup-corner,
.stats-matchup tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--surface);
  text-align: start;
}

.stats-matchup-head {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.stats-matchup td.is-empty {
  color: var(--text-muted);
}

.stats-matchup td.is-same {
  background: var(--surface-2);
}

.stats-matchup .stats-sample {
  display: block;
  min-inline-size: 0;
  font-size: 0.68rem;
}

@media (max-width: 860px) {
  .stats-class-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 卡组筹码在窄屏上不能被长名字撑出页面。样式只盖统计页,不动全站筹码。 */
#deck-chip-row .deck-chip {
  min-inline-size: 0;
  max-inline-size: 100%;
}

#deck-chip-row .deck-chip-name {
  min-inline-size: 0;
}

.stats-section,
#deck-list-block {
  min-inline-size: 0;
}

/* 进化对决不统计卡组。theme-init 首帧就把游戏写在 html[data-mode],
 * 不能等 stats.js 才藏,否则模式 B 会先闪出卡组区。 */
html[data-mode="sve"] #deck-list-block,
html[data-mode="sve"] #stats-deck-comp {
  display: none !important;
}

html[data-mode="sve"][data-stats-mode="b"] #stats-sve-deck-note[hidden] {
  display: block !important;
}

@media (max-width: 520px) {
  .stats-chart-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-pie {
    max-inline-size: 16rem;
    margin-inline: auto;
  }

  .stats-win-row {
    grid-template-columns: 1.25rem minmax(0, 1fr) 2.6rem 2.5rem;
  }

  .stats-win-name {
    display: none;
  }
}