/*--History------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#history-window{
    max-height:95vh;
    width:min(90vh, 90vw);
    overflow:hidden;
}

.history-head{
    border-bottom:var(--border-thick) solid rgb(60, 0, 5);
    background-color:rgb(95, 10, 30);
    height:2rem;
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.history-head-holder{
    font-size:calc(var(--font-size) * 0.5);
    width:calc(100% - min(7vh,7vw));
    height:100%;

    justify-content:space-between;
    align-items:center;
    display:flex;
}
.history-head-id{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:100%;
    width:25%;
}
.history-head-name{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:100%;
    width:57.5%;
}
.history-head-moves{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:100%;
    width:15%;
}
.history-holder{
    background-image:radial-gradient(ellipse, rgb(105, 20, 40), rgb(95, 10, 30));
    border:var(--border-thin) solid rgb(60, 0, 5);
    height:calc(80vh - min(5vh, 5vw));
    width:calc(100% - min(3vh, 3vw));
    padding-bottom:min(1vh, 1vw);
    padding-top:min(1vh, 1vw);
    border-radius:min(1vh, 1vw);
    transform:translate(-50%);
    margin-top:min(1vh, 1vw);
    margin-left:50%;

    text-align:center;
    overflow-x:hidden;
    overflow-y:auto;

    max-height:calc(95vh - 3rem - var(--button-height));
}
#history-back{
    margin-left:calc(50% - var(--button-height) * 0.75 * 3 / 2);
    margin-bottom:min(1vh, 1vw);
    margin-top:min(1vh, 1vw);
    height:calc(var(--button-height) * 0.75);
    width:calc(var(--button-height) * 0.75 * 3);
    font-size:calc(var(--button-font-size) * 0.65);
    aspect-ratio:auto;
}

.saved-game{
    font-size:calc(var(--font-size) * 0.5);
    border:var(--border-thin) solid rgb(60, 0, 5);
    height:calc(var(--button-font-size) * 2);
    background-color:rgb(125, 40, 60);
    width:calc(100% - min(3vh, 3vw));
    border-radius:var(--border-radius);
    margin-bottom:min(1vh, 1vw);
    margin-left:min(1vh, 1vw);
   
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.saved-game-id{
    padding-right:2.5%;
    padding-left:2.5%;
    height:100%;
    width:20%;

    justify-content:flex-start;
    align-items:center;
    user-select:text;
    display:flex;
}
.saved-game-name{
    height:100%;
    width:65%;

    justify-content:flex-start;
    align-items:center;
    user-select:text;
    display:flex;
}
.saved-game-moves{
    height:100%;
    width:15%;

    justify-content:flex-start;
    align-items:center;
    user-select:text;
    display:flex;
}

#history-filter-window{
    width:clamp(10rem, 15vw, 20rem);
    transform:translate(0px, 0px);
    left:var(--border-radius);
    top:var(--border-radius);
    overflow:hidden;
}
.history-filter-head{
    border-bottom:var(--border-thick) solid rgb(60, 0, 5);
    font-size:calc(var(--button-font-size) * 0.75);
    height:calc(var(--button-font-size) * 1.25);
    background-color:rgb(95, 10, 30);
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.history-filter-body{
    margin:min(1vh, 1vw);
}
select.history-filter{
    font-size:calc(var(--button-font-size) * 0.75);
    border:var(--border-thin) solid rgb(60, 0, 5);
    width:100%;
}

#player-stats{
    overflow:hidden;
    display:none;
}
.player-stats-head{
    border-bottom:var(--border-thick) solid rgb(60, 0, 5);
    background-color:rgb(95, 10, 30);
    padding:0.5rem;

    justify-content:center;
    align-items:center;
    display:flex;
}
.player-stats-body{
    padding:0.75rem;
}
#history-stats-back{
    margin-left:calc(50% - var(--button-height) * 0.75 * 3 / 2);
    margin-bottom:min(1vh, 1vw);
    margin-top:min(2vh, 2vw);
    height:calc(var(--button-height) * 0.75);
    width:calc(var(--button-height) * 0.75 * 3);
    font-size:calc(var(--button-font-size) * 0.65);
    aspect-ratio:auto;
}
#leaderboard-window-history{
    width:min(85vw, 35rem);
   
    max-height:90vh;
    padding:1rem;
    display:none;
}

/*--Select Color Window------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#select-color-window{
    max-width:60vh;
    width:60vw;
}
.color-select-text{
    font-size:var(--font-size);
    margin-top:var(--border-radius);
    width:100%;
   
    justify-content:center;
    align-items:flex-start;
    text-align:center;
    display:flex;
}
.color-holder{
    margin-top:min(5vh, 5vw);
    height:fit-content;
    width:100%;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}

.color-choice{
    border:var(--border-thick) solid rgb(60, 0, 5);
    background-color:rgb(105, 20, 40);
    border-radius:var(--border-radius);
    transform:translateY(0px);
    aspect-ratio:1;
    width:30%;
    
    background-position:center center;
    background-repeat:no-repeat;
    background-size:75%;
    cursor:pointer;
}
.color-choice:hover{
    transform:translateY(-1px);
}
.color-choice:active{
    transform:translateY(1px);
}

.color-choice-selected{
    border:var(--border-thick) solid rgb(230, 220, 200);
    box-shadow:0px 0px 10px rgb(230, 220, 200);
    cursor:default;
}
.color-choice-selected:hover{
    transform:translateY(0px);
}
.color-choice-selected:active{
    transform:translateY(0px);
}

#choose-white{
    background-image:url("../img/themes/theme 1/white/knight.png");
}
#choose-black{
    background-image:url("../img/themes/theme 1/black/knight.png");
}
#confirm-color{
    margin-left:calc(50% - var(--button-height) * 4.5 / 2);
    margin-bottom:var(--border-radius);
    margin-top:min(5vh, 5vw);
}

/*--Same Device Window------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#play-same-device-window{
    padding:var(--border-radius);
    display:none;
}
.play-same-device-text{
    font-size:var(--font-size);
    margin-bottom:min(5vh, 5vw);
    margin-top:min(3vh, 3vw);
    width:100%;
   
    justify-content:center;
    align-items:flex-start;
    text-align:center;
    display:flex;
}
.play-same-device-button-holder{
    justify-content:flex-start;
    flex-direction:column;
    align-items:center;
    display:flex;
}
#play-same-no{
    font-size:calc(var(--button-font-size) * 1.25);
    height:calc(var(--button-height) * 1.25);
    margin-bottom:min(3vh, 3vw);
}
#play-same-yes{
    font-size:calc(var(--button-font-size) * 0.75);
    height:calc(var(--button-height) * 0.75);
}

/*--Singleplayer AI----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#difficulty-window{
    padding:var(--border-radius);
    max-width:90vw;
}
.difficulty-window-head{
    font-size:var(--font-size);
    justify-content:center;
    align-items:flex-start;
    text-align:center;
    display:flex;
}
.difficulty-window-body{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    padding-bottom:min(7vh, 7vw);
    padding-top:min(5vh, 5vw);
}
.difficulty-window-body > *{
    font-size:clamp(0.7rem, 1.75vw, 2rem);
    width:calc(20% - var(--border-radius));
    margin-right:min(1vh, 1vw);
    margin-left:min(1vh, 1vw);
    max-width:min(20vh, 20vw);
}
.difficulty-window-foot{
    justify-content:center;
    align-items:center;
    display:flex;
    width:100%;
}

/*--Game Over----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#game-over-window{
    height:calc(clamp(1rem, 2vw, 2rem) * 10);
    width:calc(clamp(1rem, 2vw, 2rem) * 25);
    max-width:90vw;
}
.game-over-body{
    font-size:calc(clamp(1rem, 2vw, 2em) * 3);
    height:100%;
    width:100%;

    justify-content:center;
    align-items:center;
    white-space:nowrap;
    display:flex;
}
.game-over-text{
    top:calc(50% + calc(clamp(1rem, 2vw, 2rem) * 5) + var(--border-radius));
    font-size:calc(clamp(1rem, 2vw, 2em) * 1.5);
    transform:translate(-50%);
    left:50%;

    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    display:flex;
}
.game-over-buttons{
    top:calc(50% + calc(clamp(1rem, 2vw, 2rem) * 7) + var(--border-radius));
    font-size:calc(clamp(1rem, 2vw, 2em) * 1.5);
    width:calc(clamp(1rem, 2vw, 2rem) * 25);
    transform:translate(-50%);
    max-width:90vw;
    left:50%;

    justify-content:center;
    align-items:center;
    position:absolute;
    display:flex;
}
.game-over-buttons > *{
    margin-right:min(1vh, 1vw);
    margin-left:min(1vh, 1vw);
    aspect-ratio:3;
}

/*--Explain------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#explain-window{
    max-width:20rem;
    font-size:1rem;
    padding:1rem;
    width:100%;
}
.explain-window-body{
    text-transform:none;
}
.explain-window-foot{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-top:1rem;
    width:100%;
}
#explain-back{
    width:calc(var(--button-height) * 2.75 * 0.85 + 2 * var(--border-thick) + 2 * min(1vh, 1vw));
    font-size:calc(var(--button-font-size) * 0.6);
    height:calc(var(--button-height) * 0.6);
}

/*--Stalemate----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#stalemate-mask > *{
    width:calc(var(--button-height) * 0.6 * 10);
    display:none;
    padding:1em;
}
.stalemate-window-body{
    justify-content:center;
    align-items:center;
    text-align:center;
    flex-wrap:wrap;
    display:flex;

    margin-bottom:2rem;
    font-size:1.5rem;
    width:100%;
}
.stalemate-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    width:100%;
}
.stalemate-window-foot > *{
    font-size:calc(var(--button-font-size) * 0.6);
    height:calc(var(--button-height) * 0.6);
}

/*--Leaderboard--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#leaderboard-window{
    width:min(85vw, 40rem);
    max-height:90vh;
    padding:1rem;
}
.leaderboard{
    height:fit-content;
    font-size:0.7rem;
    width:100%;
}
.leaderboard-date{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-bottom:1rem;
}
.leaderboard-holder{
    border:var(--border-thin) solid rgb(60, 0, 5);
    border-radius:var(--border-radius);
    height:fit-content;
    overflow:hidden;
    width:100%;
}
.leaderboard-title-row{
    background-color:rgb(95, 10, 30);
}
.leaderboard-row{
    border-bottom:var(--border-thin) solid rgb(60, 0, 5);
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:1.5rem;
    width:100%;
}
#total-played-row{
    border-bottom:none;
}
.leaderboard-row > *{
    border-right:var(--border-thin) solid rgb(60, 0, 5);
    padding-left:0.5rem;
    height:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.leaderboard-row > *:last-child{
    border-right:none;
}

.leaderboard-num{
    flex-shrink:0;
    width:2rem;
}
.leaderboard-id{
    justify-content:center;
    padding-right:0.5rem;
    flex-shrink:0;
    width:4rem;
}
.leaderboard-name{
    overflow:hidden;
    width:100%;
}
.leaderboard-score{
    flex-shrink:0;
    width:3rem;
}
.leaderboard-total{
    width:100%;
}
#total-played{
    border-right-color:rgba(0, 0, 0, 0);
}
.leaderboard-score-hidden{
    opacity:0;
}

/*--Main Menu----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.main-menu-window{
    padding:0.5rem;
    display:none;
}
.main-menu-body{
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;

    overflow-x:hidden;
    overflow-y:auto;
    max-height:70vh;
}
.main-menu-button{
    height:calc(var(--button-height) * 0.75);
    margin-bottom:0.5rem;
    margin-right:1rem;
    margin-left:1rem;
    font-size:1rem;
    width:15rem;
}

#main-menu-window{
    display:block;
}

/*--Masks Mobile-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-aspect-ratio:0.8) and (orientation:portrait){
    #difficulty-window{
        width:90vw;
    }
    .difficulty-window-body{
        flex-direction:column;
    }
    .difficulty-window-body > *{
        font-size:var(--button-font-size * 0.5);
        margin-bottom:var(--border-radius);
        aspect-ratio:none;
        max-width:80vw;
        width:80vw;
    }

    .leaderboard-row > *{
        justify-content:center;
        padding-left:0px;
    }
    .leaderboard-num{
        flex-shrink:0;
        width:1.5rem;
    }
    .leaderboard-id{
        justify-content:center;
        padding-right:0rem;
        flex-shrink:0;
        width:3.5rem;
    }
    .leaderboard-name{
        justify-content:flex-start;
        padding-right:0.25rem;
        padding-left:0.25rem;
        width:100%;
    }
    .leaderboard-score{
        flex-shrink:0;
        width:1.5rem;
    }
}
@media only screen and (max-aspect-ratio:1.42){
    #history-window{
        top:calc(var(--button-font-size) * 4 + min(4vh, 4vw));
        transform:translate(-50%);
    }
    .history-holder{
        height:calc(80vh - min(5vh, 5vw) - var(--button-font-size) * 4);
    }
    #history-filter-window{
        left:calc((100% - min(90vh, 90vw)) / 2 - var(--border-thick));
    }
}
@media only screen and (min-aspect-ratio:1.5) and (orientation:landscape){
    #history-window{
        transform:translate(-50%, -50%);
        top:50%;
    }
    .history-holder{
        height:calc(80vh - min(5vh, 5vw));
    }
    #history-filter-window{
        left:var(--border-radius);
    }
}
@media only screen and (max-width:780px) and (max-height:420px) and (orientation:landscape){
    #leaderboard-window{
        padding-bottom:0.5rem;
        padding-top:0.5rem;
        max-height:94vh;
    }
    .leaderboard-date{
        margin-bottom:0.5rem;
    }
    #leaderboard-head{
        margin-bottom:0.5rem;
    }
    #leaderboard-foot{
        margin-top:0.5rem;
    }
    #leaderboard-window-history{
        transform:translate(0%, -50%);
        left:calc(clamp(10rem, 15vw, 20rem) + 1.5rem);
        padding-bottom:0.5rem;
        padding-top:0.5rem;
        max-height:94vh;
    }
}