.die {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 2fr 5fr 3fr;
    cursor: pointer;
}

.die .rolled {
    grid-row: 3;
    grid-column: 1;
    padding-left: 0.5em;
    font-size: calc(var(--dice-size) / 5);
    font-weight: bold;
}

.die .symbols {
    display: grid;
    grid-row: 2;
    grid-column: 1 / 3;
    grid-template-rows: repeat(var(--rows), 1fr);
    grid-template-columns: repeat(var(--columns), 1fr);
    align-items: center;
}

.die .symbols .symbol {
    text-align: center;
    font-size: calc(var(--dice-size) * 5 / 6 / var(--squish-factor));
}

.die .symbol-detection, .die .symbol-attack {
    font-size: calc(var(--dice-size) / 7);
    color: var(--color-text-bad);
    grid-row: 1;
    padding-top: 0.2em;
}

.die .symbol-detection *, .die .symbol-attack * {
    color: var(--color-text-bad);
}

.die .symbol-detection {
    text-align: right;
    padding-right: 0.2em;
    grid-column: 2;
}

.die .symbol-attack {
    padding-left: 0.2em;
    grid-column: 1;
}

.die .symbol-weight {
    text-align: right;
    align-self: flex-end;
    grid-row: 3;
    grid-column: 2;
    padding-right: 0.425em;
    padding-bottom: 0.425em;
    font-size: calc(var(--dice-size) / 7);
}