.dice-roll {
  font: 800 clamp(3rem, 12vw, 5.5rem) / 1 var(--display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.dice-roll[data-tone="win"] {
  color: var(--win);
}

.dice-roll[data-tone="loss"] {
  color: var(--loss);
}

.dice-track {
  position: relative;
  width: min(100%, 32rem);
  padding-top: 1.25rem;
}

.dice-bar {
  position: relative;
  height: 0.9rem;
  overflow: hidden;
  border-radius: 99px;
  background: var(--chip-red);
}

.dice-win {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--chip-green);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  transition:
    left 0.15s,
    width 0.15s;
}

/* A pointer above the bar at the rolled number. */
.dice-marker {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 0.55rem solid transparent;
  border-top: 0.9rem solid var(--ink);
  border-bottom: 0;
  transform: translateX(-50%);
  transition: left 0.7s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.dice-marker[data-tone="win"] {
  border-top-color: var(--win);
}

.dice-marker[data-tone="loss"] {
  border-top-color: var(--loss);
}

.dice-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dice-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 0;
  text-align: center;
}

.dice-figures dt {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dice-figures dd {
  margin: 0;
  font: 700 1.35rem/1.3 var(--display);
}

#target {
  width: 100%;
  accent-color: var(--accent);
}