/*--Main Game Elements-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.main-game-holder{
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.game-holder{
    width:min(calc(100% - calc(var(--button-height) * 8)), 90vh);
    transform:translate(-50%, -50%);
    position:absolute;
    aspect-ratio:1;
    left:50%;
    top:50%;
}
canvas{
    border:var(--border-thick) solid rgb(60, 0, 5);
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    background-color:rgb(125, 40, 60);
    border-radius:var(--border-radius);
    transform:translate(-50%, -50%);
    position:absolute;
    left:50%;
    top:50%;
}

.last-move{
    transform:translate(-100%, 100%);
    font-size:calc(var(--button-font-size) * 1);
    position:absolute;
    bottom:0px;
    left:0px;

    justify-content:flex-end;
    align-items:center;
    display:flex;
}
.indicator{
    border-bottom:var(--border-thick) solid rgb(60, 0, 5);
    border-left:var(--border-thick) solid rgb(60, 0, 5);
    border-bottom-left-radius:var(--border-radius);
    font-size:calc(var(--button-font-size) * 0.7);
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    height:calc(var(--button-height) * 0.6);
    width:calc(var(--button-height) * 3.2);
    background-color:rgb(96, 11, 31);
    right:0px;

    justify-content:center;
    align-items:center;
    position:absolute;
    font-weight:bold;
    display:flex;
}
#turn-indicator{
    top:0px;
}
#color-indicator{
    top:calc(var(--button-height) * 0.6 + var(--border-thick) + min(0.5vh, 0.5vw));
    border-top:var(--border-thick) solid rgb(60, 0, 5);
    border-top-left-radius:var(--border-radius);
    right:0px;
}
.copyright{
    font-size:calc(var(--button-font-size) * 0.5);
    width:calc(var(--input-height) * 5.1);
    bottom:min(1vh, 1vw);
    right:min(1vh, 1vw);

    position:absolute;
    text-align:right;
}

/*--Main Game Buttons--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.buttons-l{
    width:calc(var(--button-height) * 3.2);
    height:fit-content;
    left:min(1vh, 1vw);
    top:min(1vh, 1vw);

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    pointer-events:none;
    position:absolute;
    display:flex;
}
.button-row-l{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-bottom:min(1vh, 1vw);
    height:100%;
    width:100%;
}
.button-row-l > button{
    font-size:calc(var(--button-font-size) * 0.6);
    height:calc(var(--button-height) * 0.6);
    
    pointer-events:all;
    aspect-ratio:none;
    max-width:100%;
    width:100%;
}
.buttons-r{
    top:calc(var(--button-height) * 1.2 + var(--border-thick) * 2 + min(2vh, 2vw));
    width:calc(var(--button-height) * 3);
    height:fit-content;
    right:min(1vh, 1vw);
    
    justify-content:flex-start;
    align-items:flex-end;
    flex-direction:column;
    pointer-events:none;
    position:absolute;
    display:flex;
}
.buttons-r > *{
    font-size:calc(var(--button-font-size) * 0.6);
    height:calc(var(--button-height) * 0.6);
    margin-bottom:min(1vh, 1vw);
    pointer-events:all;
    aspect-ratio:none;
    max-width:100%;
    width:100%;
}
#exp-date{
    height:calc(var(--button-height) * 0.6 * 1.5);
}

/*--Main Game Letters--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.letters{
    height:calc(var(--button-font-size) * 0.75);
    position:absolute;
    width:100%;
    left:0px;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}
#letters-top{
    transform:translateY(-100%);
    top:0px;
}
#letters-bottom{
    transform:translateY(100%);
    bottom:0px;
    top:auto;
}

.numbers{
    width:calc(var(--button-font-size) * 0.75);
    height:100%;
    top:0px;

    justify-content:space-evenly;
    flex-direction:column;
    align-items:center;
    position:absolute;
    display:flex;
}
#numbers-left{
    transform:translate(-100%);
    left:0px;
}
#numbers-right{
    transform:translate(100%);
    right:0px;
    left:auto;
}

.char{
    font-size:calc(var(--button-font-size) * 0.75);
    text-shadow:0px 0px 10px rgba(0,0,0,0.3);
    height:100%;
    width:100%;

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

/*--Spectating---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#spectating-window{
    width:calc(var(--button-height) * 2.75 * 0.85);
    transform:translate(0%, 0%);
    padding:min(1vh, 1vw);
    bottom:min(1vh, 1vw);
    left:min(1vh, 1vw);

    position:absolute;
    display:none;
    top:auto;
}
.spectating-window-row{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    font-size:calc(var(--button-font-size) * 0.7);
    margin-bottom:min(1vh, 1vw);
    height:20%;
    width:100%;
}
.spectating-window-buttons{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:var(--border-radius);
    height:20%;
    width:100%;
}
.skip-button{
    height:calc(var(--button-font-size) * 1.25);
    width:40%;
    
    justify-content:center;
    align-items:center;
    aspect-ratio:auto;
    display:flex;

    background-image:url("../img/arrow right.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
}
#spec-back{
    width:calc(var(--button-height) * 2.75 * 0.85 + 2 * var(--border-thick) + 2 * min(1vh, 1vw));
    top:calc(-1 * var(--button-height) * 0.6 - var(--border-radius));
    font-size:calc(var(--button-font-size) * 0.6);
    height:calc(var(--button-height) * 0.6);
    left:calc(-1 * var(--border-thick));

    aspect-ratio:auto;
    position:absolute;
}
#backward{
    background-image:url("../img/arrow left.png");
}

/*--Masks Mobile-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-aspect-ratio:1) and (orientation:portrait){
    .game-holder{
        width:49vw;
        top:calc(50% + 1rem);
    }
    .last-move{
        transform:translate(0%, 175%);
    }
}
@media only screen and (max-aspect-ratio:0.85) and (orientation:portrait){
    .game-holder{
        width:57vw;
    }
}
@media only screen and (max-aspect-ratio:0.75) and (orientation:portrait){
    .game-holder{
        width:65vw;
    }
}
@media only screen and (max-aspect-ratio:0.7) and (orientation:portrait){
    .game-holder{
        width:70vw;
    }
}
@media only screen and (max-aspect-ratio:0.61) and (orientation:portrait){
    .game-holder{
        width:80vw;
    }
}
@media only screen and (max-aspect-ratio:0.54) and (orientation:portrait){
    .game-holder{
        width:75vw;
    }
}
@media only screen and (max-aspect-ratio:0.61) and (orientation:portrait) and (max-width:400px) and (max-width:700px){
    .game-holder{
        width:70vw;
    }
    .last-move{
        transform:translate(-100%, 100%);
    }
}
@media only screen and (max-height:420px) and (max-width:780px) and (orientation:landscape){
    .game-holder{
        max-width:75vh;
    }
    :root{
        font-size:3.5vh;
    }
}
@media only screen and (max-aspect-ratio:1) and (orientation:portrait) and (max-width:780px){
    .last-move{
        transform:translate(-100%, 100%);
    }
}