:root {
  --digit-cols: 10;
  --digit-size: calc((60ch - 30px) / var(--digit-cols));
  --bar-height: 5px;
}

.prob-area {
  position: relative;
}

.num-row, .bar-row {
  display: grid;
  grid-template-columns: repeat(var(--digit-cols), var(--digit-size));
}
.bar-row {
  height: var(--bar-height);
}

.digit, .op {
  display: grid;
  place-items: center;

  font-size: calc(var(--digit-size));
  aspect-ratio: 1;
  line-height: 1;
}

.bar {
  background: var(--ink);
}

.feedback-overlay {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: start center;

  font-size: calc(3 * var(--digit-size));
  opacity: 0;
  animation: feedback-pop 1s ease forwards;
}
.feedback-overlay.right { color: #0f0; }
.feedback-overlay.wrong { color: #f00; }

@keyframes feedback-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  25%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

.emoji-pop {
  display: inline-block;
  pointer-events: none;
  animation: emoji-pop 1s linear;
  animation-iteration-count: 3;
}
.six-seven {
  animation-iteration-count: 67;
}

@keyframes emoji-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(2); }
  50%  { transform: scale(3); }
  75%  { transform: scale(2); }
  100% { transform: scale(1); }
}

.option-row {
  display: grid;
  grid-template-columns: 23ch 1fr;
  column-gap: 1ch;
}
.option-row > :first-child {
  display: grid;
  place-items: center end;
  white-space: nowrap;
}

.option-row input, .option-row select {
  width: 5ch;
}

.option-row select:disabled {
  opacity: 1;
  color: var(--ink);
}
.option-row:has(input:disabled), .option-row:has(select:disabled) {
  opacity: 0.5;
  color: var(--ink-muted);
}