/* Statistics presentation; transactional state and game rules are unchanged. */
.ub-vivid .statsSection { padding-top: 28px; padding-bottom: 30px; }
.ub-vivid .statsSection .card-h { padding-bottom: 22px; }
.ub-vivid .statsSection .statGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 0; }
.ub-vivid .statsSection .statTile { min-width: 0; padding: 0 24px; border-right: 1px solid #ffffff16; }
.ub-vivid .statsSection .statTile:first-child { padding-left: 0; }
.ub-vivid .statsSection .statTile:last-child { padding-right: 0; border-right: 0; }
.ub-vivid .statsSection .statLabel { font-size: 12px; line-height: 1.5; color: #aab5c6; margin: 0 0 7px; }
.ub-vivid .statsSection .statNum { font-size: 28px; line-height: 1.25; font-weight: 650; }
.ub-vivid .statsSection .statTile.wide { display: flex; gap: 14px; align-items: center; }
.ub-vivid .statsSection .statTile.wide > div { min-width: 0; }
.ub-vivid .statsSection .ico-trophy { width: 28px; height: 28px; flex: 0 0 28px; color: #ebc47e; mask-image: url('ui-statistics/trophy.svg'); }
.ub-vivid .statsSection .statNum.best { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; font-size: 17px; line-height: 1.5; }
.ub-vivid .statsSection #stBest > span:first-child { color: #f5dfb1 !important; }
.ub-vivid .statsBreakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 26px; padding-top: 24px; border-top: 1px solid #ffffff16; }
.ub-vivid .statsBreakdown { min-width: 0; }
.ub-vivid .statsBreakdownHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ub-vivid .statsBreakdownHeading h3 { margin: 0; font: 550 13px/1.5 var(--font-body); color: #dde3ed; text-transform: none; }
.ub-vivid #statsInventoryTotal { color: #93a0b2; font-size: 11px; white-space: nowrap; }
.ub-vivid .statsSection .rarityCounts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; margin: 0; }
.ub-vivid .distributionLabel { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 7px; font-size: 12px; color: #bfc8d6; }
.ub-vivid .distributionLabel > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ub-vivid .distributionLabel > span::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--distribution-color); }
.ub-vivid .distributionLabel b { font-size: 12px; font-weight: 600; color: #eef2f8; font-variant-numeric: tabular-nums; }
.ub-vivid .distributionTrack { height: 5px; overflow: hidden; border-radius: 999px; background: #859bb516; }
.ub-vivid .distributionTrack > span { display: block; height: 100%; border-radius: inherit; background: var(--distribution-color); }
@media (max-width: 900px) {
  .ub-vivid .statsSection .statGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .ub-vivid .statsSection .statTile { padding: 0 20px; }
  .ub-vivid .statsSection .statTile:nth-child(odd) { padding-left: 0; }
  .ub-vivid .statsSection .statTile:nth-child(even) { padding-right: 0; border-right: 0; }
  .ub-vivid .statsBreakdowns { gap: 26px; }
}
@media (max-width: 540px) {
  .ub-vivid .statsSection .statNum { font-size: 25px; }
  .ub-vivid .statsSection .statNum.best { font-size: 15px; }
  .ub-vivid .statsSection .statTile { padding-right: 14px; padding-left: 14px; }
  .ub-vivid .statsSection .statTile.wide { gap: 8px; align-items: flex-start; }
  .ub-vivid .statsSection .ico-trophy { width: 19px; height: 19px; flex-basis: 19px; margin-top: 2px; }
  .ub-vivid .statsSection .statLabel { font-size: 11px; }
  .ub-vivid .statsBreakdowns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ub-vivid .statsBreakdown + .statsBreakdown { border-top: 1px solid #ffffff16; padding-top: 22px; }
}