@keyframes spin_pulse {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1.2);
        transform: rotate(180deg) scale(1.2);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

.roll_anim {
    animation-name: spin_pulse;
    animation-duration: 0.25s;
    animation-timing-function: linear;
}

* {
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
    font-weight: bold;
}

.pool_dice {
    display: flex;
    flex-wrap: wrap;
}

#dice_tray {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5ex;
    /* wide enough for 10 dice per row */
    max-width: 88ex;
    border: 1px solid black;
    border-radius: 1ex;
    /* horizontally center the tray */
    margin: auto;
    padding: 1ex;
}

.button {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: white;
    background-color: black;
    position: relative;
    text-align: center;
    min-width: 4ex;
    padding: 1ex 1.5ex 1ex 1.5ex;
    border-radius: 1ex;
    align-self: center;
}

.disabled {
    background-color: gray;
    cursor: default;
}

.tooltip {
    visibility: hidden;
    font-size: 90%;
    bottom: 75%;
    right: -1ex;
    background-color: cornsilk;
    color: black;
    text-align: center;
    padding: 0.5ex;
    border: 1px solid black;
    border-radius: 1ex;
    position: absolute;
    z-index: 1;
}

.button:hover .tooltip {
    visibility: visible;
    transition: visibility 0.1s;
    transition-delay: 0.67s;
}

#add_btn {
    min-width: 2.5ex;
    justify-self: center;
}

#roll_btn {
    justify-self: center;
    width: 7ex;
    margin-top: 1ex;
}

#help_btn {
    min-width: 2.5ex;
    width: 2.5ex;
    justify-self: center;
    margin-top: 1ex;
}

.total_lbl {
    justify-self: end;
    align-self: center;
    margin-right: 1ex;
}

.die_cell {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 6ex;
    height: 6ex;
    margin: 0ex 0.5ex 0ex 0.5ex;
    color: white;
}

.result_cell {
    display: grid;
    align-self: center;
    align-items: center;
    justify-items: center;
    width: 5ex;
    height: 5ex;
    border: 2px solid black;
    border-radius: 0.5ex;
}

.d4 {
    background-image: url("die_4.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.d6 {
    background-image: url("die_6.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.d8 {
    background-image: url("die_8.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.d10 {
    background-image: url("die_10.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.d12 {
    background-image: url("die_12.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.d20 {
    background-image: url("die_20.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.d100 {
    background-image: url("die_100.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

dialog {
    margin-top: 3ex;
    border: 1px solid black;
    border-radius: 1ex;
}

/******************************
    Dice pool chooser dialog
 ******************************/

#chdlg_choices_container {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 2ex;
}

#chdlg_counts_grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 0.5ex;
}

#pool_chooser_dlg .count_cell {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: grid;
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    width: 5ex;
    height: 5ex;
    color: black;
    background-color: white;
    border: 1px solid black;
    border-radius: 1ex;
}

#chdlg_sizes_grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 0.5ex;
    /* horizontally center when on a vertically oriented device */
    margin: auto;
}

#pool_chooser_dlg .size_cell {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: grid;
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    width: 7ex;
    height: 7ex;
    background-size: 6ex;
    background-position: center;
    color: white;
    border: 1px solid black;
    border-radius: 1ex;
}

#pool_chooser_dlg .selected_cell {
    border: 3px solid black;
    background-color: lightgray;
}

#chdlg_buttons_container {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    margin-top: 2ex;
    column-gap: 1ex;
}

@media (max-width: 65ex) {
    #chdlg_choices_container {
        grid-template-columns: auto;
        row-gap: 2ex;
    }
}

/*****************
    Help dialog
 *****************/

#help_dlg {
    max-width: 60ex;
}

@media (max-width: 76ex) {
    #help_dlg {
        margin-left: 2ex;
        margin-right: 2ex;
    }
}

#helpdlg_close_btn {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    align-content: center;
    width: 4ex;
    height: 4ex;
    border: 1.5px solid black;
    border-radius: 3ex;
    position: absolute;
    top: 2ex;
    right: 2ex;
}

#help_dlg h1 {
    font-size: 32px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.help_header {
    /* text-align: center; */
    margin-left: 1.5ex;
}

.help_grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1ex;
}

.example_btn {
    cursor: default;
    align-self: flex-start;
}

.help_btn_desc {
    margin-top: 1ex;
}