#popup{
    position: absolute;
    top: calc(2 * var(--padding-size) + var(--history-height));
    left: 50%;
    transform: translateX(-50%);

    width: min(100vw, 600px); height: auto;
    padding: var(--padding-size);
    gap: var(--padding-size);

    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr auto auto 1fr;

    grid-template-areas: 
    "title title"
    "title title"
    "id id"
    "desc desc";

    background-color: rgba(34, 34, 34, 0.4);
    backdrop-filter: blur(25px);
    color: white;
    z-index: 9999;

    display: none;
}

#popup.show{
    display: grid;
}

#popup.noId{
    grid-template-rows: 1fr 1fr auto 1fr;
}
#popup.noDesc{
    grid-template-rows: 1fr 1fr auto 1fr;
}

#popup.noId .id{
    display: none;
}
#popup.noDesc .desc{
    display: none;
}

#popup.singleBtn button{
    grid-column: 1/3;
}
#popup button.hide{
    display: none;
}

#popup.noId.noDesc{
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
    "title title"
    "title title";
}

#popup .title {
    grid-area: title;
    background-color: rgba(34, 34, 34, 0.4);
    min-height: calc(var(--moves-button-size) * 2);
}
#popup .id {
    grid-area: id;
    background-color: rgba(34, 34, 34, 0.4);
}
#popup .desc {
    grid-area: desc;
    background-color: rgba(34, 34, 34, 0.4);
}
/* #popup .yesBtn {
    grid-area: yesBtn;
}
#popup .noBtn {
    grid-area: noBtn;
} */

#popup .title {
    display: grid;
    place-items: center;
    text-align: center;
    font-size: clamp(16px, 4vw, 28px);
}

#popup .id,
#popup .desc {
    display: flex;
    flex-wrap: wrap;
    padding: var(--padding-size);
    column-gap: var(--padding-size);
    overflow: hidden;
}
#popup .id p:nth-of-type(2),
#popup .desc p:nth-of-type(2){
    flex: 1;
    min-width: 200px;
    overflow-x: scroll;
    white-space: nowrap;
}

#popup .yesBtn,
#popup .noBtn {
    text-align: center;
    background-color: rgba(34, 34, 34, 0.4);
}

#popup .yesBtn:hover,
#popup .noBtn:hover {
    filter: invert(1);
}