.charsheet {
    background-color:#F9BE49;
}

.sheet-runner {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    grid-gap: 10px;
    grid-template-areas:
        "name       name       age       "
        "power      power      power     "
        "roll       appearance appearance"
        "harm       appearance appearance"
        "questions  questions  questions "
        "endgame    endgame    endgame   "
        ;
}
.sheet-runner .sheet-block {
    display: grid;
    background-color:#F9D080;
    border-start-start-radius: 16px 100%;
    border-end-end-radius: 16px 100%;
    padding: 8px 16px;
}
.sheet-runner .sheet-name {
    grid-area: name;
}
.sheet-runner .sheet-age {
    grid-area: age;
}
.sheet-runner .sheet-power {
    grid-area: power;
}
.sheet-runner .sheet-appearance {
    grid-area: appearance;
}
.sheet-runner .sheet-roll {
    grid-area: roll;
}
.sheet-runner .sheet-harm {
    grid-area: harm;
    justify-self: end;
    justify-items: stretch;
    align-self: center;
    text-align: center;
}
.sheet-runner .sheet-questions {
    grid-area: questions;
}
.sheet-runner .sheet-endgame {
    grid-area: endgame;
}

.sheet-block label {
    width: inherit;
    display: grid;
    align-items: center;
    white-space: nowrap;
}

.sheet-block label input[type=text],
.sheet-block label input[type=number],
.sheet-block label textarea,
.sheet-block label select {
    width: inherit;
}

/* Hide the radio button and style the label span */
.sheet-harm input[type=radio] {
    display: none;
}

.sheet-harm input[type=radio] + span
{
    cursor: pointer;

    border:1px solid black;
    border-top-left-radius: 3em 100%;
    border-top-right-radius: 3em 100%;
    border-bottom-right-radius: 3em 100%;
    border-bottom-left-radius: 3em 100%;
    padding: 0.25em 1.5em;
    text-align: center;

    background: #F9D080;
    box-shadow: 3px 3px 6px black;
}

.sheet-harm input[type=radio]:checked + span
{
    background: #F9BE4A;
    box-shadow: 0px 0px 7px 0px #000000 inset;
}