.weapon-stats {
  position: absolute;
  inset: 70.5% auto auto 7%;
  width: 53%;
  color: #d4be78;
  font: 600 clamp(.46rem, .95vw, .9rem) Type_Font_1, Impact, sans-serif;
}
.weapon-stats:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 7%;
}
.stat-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) 4em;
  align-items: center;
  gap: .45em;
  margin-block: .18em;
}
.stat-bar {
  --delta-color: #c3ad6e;
  height: 1.35em;
  background:
    repeating-linear-gradient(90deg, transparent 0 62%, #211c16 62% 100%) 0 0 / 5% 100%,
    linear-gradient(90deg, #c3ad6e var(--base-end, 0%), var(--delta-color) 0 var(--delta-end, 0%), #383024 0);
}
.stat-row[data-change="better"] { --stat-change: #7bc64c; }
.stat-row[data-change="worse"] { --stat-change: #f36d56; }
.stat-row .stat-bar { --delta-color: var(--stat-change, #c3ad6e); }
.stat-value b { color: var(--stat-change, inherit); }
.stat-estimate { color: var(--muted); }

.stat-row > span:first-child { text-transform: uppercase; }
.stat-estimate { grid-column: 1 / -1; }


.stat-source { grid-column: 1 / -1; color: var(--muted); }