/* Currency replaces a character, so it scales with its surrounding amount. */
.currency-symbol {
  display: inline-block;
  width: clamp(18px, 1.45em, 32px);
  height: clamp(18px, 1.45em, 32px);
  margin-inline: .06em .12em;
  line-height: 1;
  vertical-align: -.32em;
}
:is(#app, #dialog, #toast-region, #game-tooltip, .ui-click-rewards) .currency-symbol > .icon[data-icon='banknote'] {
  display: block;
  width: 100%; height: 100%; margin: 0;
  background-size: contain;
  background-position: center;
  vertical-align: baseline;
}
.cc-click-resources .resource-cash .currency-symbol { vertical-align: -.06em; }

.ui-number-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-number-slot {
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  overflow: hidden;
  vertical-align: -.16em;
}
.ui-number-glyph { position: relative; display: inline-block; width: 100%; height: 100%; vertical-align: top; line-height: 1.15; }
.ui-number-previous {
  position: absolute;
  inset: 0;
  transform: translateY(calc(-100% * var(--number-direction, 1)));
  pointer-events: none;
}
.ui-number-previous::before { content: attr(data-digit); }
@media (prefers-reduced-motion: reduce) {
  .ui-number-glyph { transform: none !important; }
  .ui-number-previous { display: none; }
}