@supports (height:100dvh) {
    body,
    html,
    .grid-container,
    .new-game-dialog-backdrop {
        height: 100dvh;
    }
}

 @supports not (height:100dvh) {
    body,
    html,
    .grid-container,
    .new-game-dialog-backdrop {
        height: 100vh;
    }
 }

/* body {
    width: 100vw;
} */

.grid-container {
    display: flex;
    /* flex-flow: row nowrap; */
    /* justify-content: space-between; */
    /* align-items: stretch; */
}

.app-container {
    /* height: calc(100% - 10px);
    width: calc(100% - 10px); */
    flex-grow: 1;
}


.header {
    /* grid-area: header; */
    /* text-align: center; */
    /* line-height: 70px; */
    min-height: var(--header-height);
}
/* .main-container {
    grid-area: main-container;
    height: calc(100% - 10px);
    width: calc(100% - 10px);
} */

.left-sidebar-ads,
.right-sidebar-ads {
    min-width: 130px;
    max-width: 250px;
    flex: 1 1 auto;
}

.ads {
    display: flex;
    align-items: center;
    justify-content: center;
}



@media (max-width:768px) {
    .left-sidebar-ads {
        display: none;
    }
}

@media (max-width:480px) {
    .grid-container {
        display: grid;
        grid-template-areas:
            "app-container"
            "right-sidebar-ads";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .app-container {
        grid-area: app-container;
    }
    
    .right-sidebar-ads {
        grid-area: right-sidebar-ads;
        height: 130px;
        min-width: 100%;
    }
}

@media (max-width:240px), (max-height: 240px) {
    body {
        display: none;
    }
}