/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.multiplayer-head{
    font-size:calc(var(--button-font-size) * 1.5);
    height:3rem;
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.multiplayer-body{
    position:relative;
    height:calc(100% - 3rem);
    width:100%;
}

.multiplayer-buttons{
    height:calc(var(--button-height) * 5);
    width:calc(var(--button-height) * 3);
    right:min(1vh, 1vw);
    top:min(1vh, 1vw);

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    position:absolute;
    display:flex;
}
button.challange-button{
    font-size:calc(var(--button-font-size) * 0.6);
    max-width:calc(var(--button-height) * 3);
    height:calc(var(--button-height) * 0.75);
    margin-bottom:min(1vh, 1vw);
}

.multiplayer-screen{
    width:calc(100% - var(--button-height) * 3.1 - var(--border-radius));
    right:calc(var(--button-height) * 3.1 + var(--border-radius));
    border:var(--border-thin) solid rgb(60, 0, 5);
    background-color:rgb(135, 50, 70);
    border-radius:min(1vh, 1vw);
    position:absolute;
    overflow:hidden;
    display:none;
    height:100%;
    top:0px;
}
#challange-multi-window{
    display:flex;
}
.multiplayer-sub-window{
    border:var(--border-thin) solid rgb(60, 0, 5);
    max-height:calc(100% - var(--border-radius));
    background-color:rgb(155, 70, 90);
    border-radius:min(1vh, 1vw);
    transform:translate(-50%);
    margin-top:min(1vh, 1vw);
    padding:min(1vh, 1vw);
    margin-left:50%;
    position:absolute;
}
.multiplayer-sub-window-full{
    width:calc(100% - min(4vh, 4vw));
}
.multiplayer-text{
    font-size:calc(var(--font-size) * 0.75);
    margin-bottom:min(1vh, 1vw);
}

/*--Challenges---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.challanges-holder{
    border:var(--border-thin) solid rgb(60, 0, 5);
    width:calc(100% - var(--border-thin) * 2);
    border-radius:min(1vh, 1vw);
    margin-bottom:min(5vh, 5vw);
    overflow:hidden;
}
.challanges-head{
    height:calc(var(--button-font-size) * 1.25);
    background-color:rgb(95, 10, 30);
    width:100%;

    justify-content:flex-start;
    align-items:center;
    overflow:hidden;
    display:flex;
}
.challanges-body{
    border-top:var(--border-thin) solid rgb(60,0,5);
    max-height:min(26.5vh, 26.5vw);
    width:100%;

    overflow-x:hidden;
    overflow-y:auto;
    display:none;
}

.ch-elem{
    padding-left:min(1vh,1vw);
    font-size:calc(clamp(1rem, 2.25vw, 2rem) * 0.55);
    height:100%;

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

    height:calc(var(--button-font-size) * 1.75);
    width:100%;
}
.ch-id{
    padding-right:2.5%;
    flex-shrink:0;
    width:10%;
}
.ch-id-head{
    flex-shrink:0;
    width:12.5%;
}
.ch-color{
    flex-shrink:0;
    width:12%;
}
.ch-turn{
    width:100%;
}
.ch-date{
    flex-shrink:0;
    width:15%;
}
.ch-action{
    padding-right:min(0.5vh, 0.5vw);
    padding-left:min(0.5vh, 0.5vw);
    width:100%;
}
.ch-status{
    flex-shrink:0;
    width:25%;
}
.ch-button{
    font-size:calc(clamp(1rem, 2.25vw, 2rem) * 0.6);
    aspect-ratio:auto;
    max-width:90%;
    height:75%;
    width:90%;
}
#active{
    max-height:70vh;
}

#show-leaderboard{
    margin-left:calc(50% - calc(var(--button-height) * 0.75 * 5 / 2));
    font-size:calc(var(--button-font-size) * 0.75);
    width:calc(var(--button-height) * 0.75 * 5);
    height:calc(var(--button-height) * 0.75);
    margin-bottom:1rem;
    aspect-ratio:auto;
}


/*--Invite Challenge---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#invite-select{
    width:min(calc(var(--button-font-size) * 17), 90vw);
}
.multiplayer-select{
    border:var(--border-thin) solid rgb(60, 0, 5);
    font-size:calc(var(--button-font-size) * 0.75);
    height:calc(var(--button-height) * 0.75);
    transform:translate(-50%);
    margin-bottom:1rem;
    margin-left:50%;
    max-width:90vw;
    width:100%;
}
.invite-buttons{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    height:var(--button-height);
    margin-top:1rem;
    width:100%;
}
#invite-confirm{
    height:calc(var(--button-height) * 0.75);
}

.challange-player-info-holder{
    justify-content:flex-start;
    align-items:flex-start;
    display:none;
    width:100%;
}
.challange-player-info{
    width:100%;
}
.challange-player-info-row{
    font-size:calc(var(--button-font-size) * 0.65);
    width:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.challange-player-info-title{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    width:calc(var(--button-font-size) * 5);
    flex-shrink:0;
    height:100%;
}
.challange-player-info-value{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:100%;
    width:100%;
}
.challange-player-info-stat{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-right:calc(var(--button-font-size) * 0.5);
    height:100%;
}
.challange-player-info-stat-value{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:100%;
    width:calc(var(--button-font-size) * 2.75);
}
.challange-player-info-label-holder{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-left:calc(var(--button-font-size) * 5);
    font-size:calc(var(--button-font-size) * 0.75);
    height:calc(var(--button-font-size) * 1.25);
    width:100%;
}
.challange-player-info-label{
    justify-content:flex-start;
    align-items:flex-end;
    display:flex;

    flex-shrink:0;
    height:100%;
    width:calc(var(--button-font-size) * 3.25);
}

/*--Multiplayer Mobile-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-aspect-ratio:0.8) and (orientation:portrait){
    .multiplayer-screen{
        border:none;
        border-top:var(--border-thin) solid rgb(60, 0, 5);
        height:calc(100% - calc(var(--button-height) * 1.5 + min(1vh, 1vw)));
        border-radius:0px;
        width:100%;
        right:0px;
        top:calc(var(--button-height) * 1.5 + min(1vh, 1vw));
    }
    .multiplayer-buttons{
        height:calc(var(--button-height) * 1.5 + min(1vh, 1vw));
        width:calc(100% - var(--border-radius));
        justify-content:space-evenly;
        flex-direction:row;
    }
    button.challange-button{
        height:var(--button-height);
        white-space:initial;
        width:24%;
    }
}
@media only screen and (max-height:480px) and (orientation:landscape){
    .challange-player-info-row{
        font-size:calc(var(--button-font-size) * 0.65);
    }
    .invite-buttons{
        margin-top:0.5rem;
    }
    .multiplayer-select{
        margin-bottom:0.5rem;
    }
}