.damage-selector, .damage-effect-indicator, label {
  width: 20px;
}

.damage-selector, .damage-effect-indicator {
  height: 30px;
}

.damage-selector {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  display: inline-block;
}

.damage-effect-indicator {
  position: absolute;
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  font-family: monospace;
}

.damage-selector.clear {
  background-color: white;
}

.damage-selector.bruise {
  background-color: orange;
}

.damage-selector.lethal {
  background-color: red;
}

label input[type="radio"] {
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 0;
}

label {
  display: none;
  margin: 0 auto;
  padding: 0;
}

label:first-of-type {
  display: block;
}

label:has(input:checked) {
  display: none;
}

label:has(+ label input:checked) {
  display: none;
}

label:has(input:checked) + label {
  display: block;
}
