.damage-selector, .damage-effect-indicator {
width: 20px;
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;
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;
}