/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mask{
    background-color:rgba(0, 0, 0, 0.5);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.window{
    border:1px solid var(--background-accent-color);
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
    background-color:var(--background-color);
    width:min(calc(100vw - 5rem), 30rem);
    transform:translate(-50%, -50%);
    border-radius:0.5rem;
    padding-bottom:1.5rem;
    padding-right:1.5rem;
    padding-left:1.5rem;
    position:absolute;
    max-height:90vh;
    min-width:200px;
    overflow:hidden;
    left:50%;
    top:50%;
}
.window-head{
    position:relative;
    padding-bottom:1rem;
    height:4rem;
    width:100%;
}
.window-body{
    width:100%;
}
.window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:2rem;
    width:100%;
}

.window-title{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    height:100%;
    width:100%;
}
.window-exit{
    filter:invert(var(--button-invert));
    transform:translate(-50%, -50%);
    right:calc(0px - 1.5rem);
    top:calc(0px + 1.5rem);
    aspect-ratio:1;
    width:1.5rem;

    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;
    position:absolute;
    cursor:pointer;
    user-select:none;
    transition:ease-in-out 0.1s;
}
.window-exit:hover{
    transform:translate(-50%, -50%) scale(1.1);
}
.window-exit:active{
    transform:translate(-50%, -50%) scale(0.9);
}

.no-words{
    justify-content:center;
    align-items:center;
    text-align:center;
    font-weight:bold;
    display:flex;

    max-width:90vw;
    font-size:2rem;
    padding:1rem;
    width:20rem;
}

/*--Stats Display------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.stats-display-holder{
    justify-content:space-between;
    align-items:center;
    display:flex;
    width:100%;
}
.stats-display{
    background-color:var(--background-accent-color);
    border-radius:1rem;
    width:48%;
    height:10rem;

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.stats-display-value{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:5rem;
    height:100%;
    width:100%;
}
.stats-display-label{
    justify-content:center;
    align-items:center;
    display:flex;

    flex-shrink:0;
    height:1.5rem;
    width:100%;
}

/*--Ranking Distribution-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.ranking-distribution{
    margin-top:2rem;
    width:100%;
}
.ranking-distribution-head{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    padding-bottom:1rem;
    width:100%;
}
.ranking-distribution-body{
    width:100%;
}
.ranking-distribution-row{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:1.5rem;
    width:100%;
}
.ranking-distribution-row-label{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    flex-shrink:0;
    width:5rem;
}
.ranking-distribution-row-value{
    justify-content:flex-end;
    align-items:center;
    font-weight:bold;
    display:flex;

    flex-shrink:0;
    width:2rem;
}
.ranking-distribution-row-bar-holder{
    background-color:var(--background-accent-color);
    border-radius:1rem;
    user-select:none;
    overflow:hidden;
    height:50%;
    width:100%;
}
.ranking-distribution-row-bar{
    background-color:var(--accent-color);
    transition:ease-in-out 0.1s;
    height:100%;
    width:0px;
}

/*--Yesterday----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.yesterday-letters{
    justify-content:center;
    align-items:center;
    display:flex;

    width:100%;
}
.yesterday-letter{
    margin-right:0.25rem;
    margin-left:0.25rem;
    font-weight:bold;
    font-size:1.5rem;
}
.yesterday-letter-highlight{
    color:var(--accent-color);
}
.yesterday-points{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-top:1rem;
    opacity:0.5;
    width:100%;
}
.yesterday-words-holder{
    margin-bottom:2rem;
    margin-top:2rem;
    max-height:calc(90vh - 11rem);
    overflow-x:hidden;
    overflow-y:auto;
}
.yesterday-words{
    justify-content:center;
    display:grid;
    gap:1rem;
    font-size:1rem;
    grid-template-columns:repeat(auto-fill, 7rem);
    overflow-y:auto;
}
.yesterday-word{
    border-bottom:1px solid var(--background-accent-color);
    width:calc(100% - 0.5rem);
    padding-bottom:0.25rem;
    padding-right:0.25rem;
    padding-left:0.25rem;
}
.yesterday-word-highlight{
    color:var(--accent-color-dark);
}

/*--Unlimited Games----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.new-unlimited-game-holder{
    justify-content:center;
    align-items:center;
    display:flex;
    width:100%;
}
.unlimited-games-holder{
    max-height:calc(100vh - 13rem);
    height:fit-content;
    margin-top:2rem;
    width:100%;

    overflow-x:hidden;
    overflow-y:auto;
}
.unlimited-games{
    height:fit-content;
    width:100%;

    flex-direction:column-reverse;
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;
}
.unlimited-game{
    border:1px solid var(--background-accent-color);
    width:calc(100% - 2rem - 4px);
    margin-bottom:0.5rem;
    border-radius:1rem;
    padding-right:1rem;
    padding-left:1rem;
    margin-left:1px;
    flex-shrink:0;
    height:5rem;
    
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.unlimited-game-highlight{
    border:2px solid var(--accent-color);
    margin-left:0px;
}
.unlimited-game-letters{
    flex-shrink:0;
    height:100%;
    width:60%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.unlimited-letter{
    margin-right:0.25rem;
    font-size:1.5rem;
    font-weight:bold;
}
.unlimited-letter-highlight{
    color:var(--accent-color);
}
.unlimited-game-stats{
    flex-shrink:0;
    height:100%;
    width:30%;
}
.unlimited-game-points{
    padding-bottom:5%;
    height:45%;
    width:100%;

    justify-content:flex-start;
    align-items:flex-end;
    font-weight:bold;
    display:flex;
}
.unlimited-game-rank{
    padding-top:5%;
    opacity:0.5;
    height:45%;
    width:100%;

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

.unlimited-game-delete{
    filter:invert(var(--button-invert));
    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    transition:ease-in-out 0.05s;
    user-select:none;
    cursor:pointer;
    aspect-ratio:1;
    margin-left:3%;
    width:7%;
}
.unlimited-game-delete:hover{
    transform:scale(1.05);
}
.unlimited-game-delete:active{
    transform:scale(0.95);
}

/*--Hints--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.hint-letters{
    justify-content:center;
    align-items:center;
    display:flex;

    width:100%;
}
.hint-letter{
    margin-right:0.25rem;
    margin-left:0.25rem;
    font-size:1.5rem;
    font-weight:bold;
}
.hint-letter-highlight{
    color:var(--accent-color);
}
.hint-stats{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-top:1rem;
    opacity:0.5;
    width:100%;
}
.hint-table{
    border:1px solid var(--background-accent-color-2);
    transform:translate(-50%);
    border-right:none;
    border-bottom:none;
    height:fit-content;
    width:min(calc(100vw - 5rem), 30rem);
    margin-left:50%;
    margin-top:2rem;
}
.hint-table-row{
    border-bottom:1px solid var(--background-accent-color-2);
    height:3rem;
    width:100%;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}
.hint-table-col{
    border-right:1px solid var(--background-accent-color-2);
    font-size:1.5rem;
    height:100%;
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.hint-table-col-label{
    background-color:var(--background-accent-color);
    font-weight:bold;
}

/*--Animations---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@keyframes fade-in{
    from {opacity:0;}
    to   {opacity:1;}
}
@keyframes fade-out{
    from {opacity:1;}
    to   {opacity:0;}
}

/*--Mobile Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) and (orientation:landscape){
    .window{
        transform:translate(-50%, 0px);
        max-height:none;
        top:1rem;
    }
    .stats-display{
        height:5rem;
    }
    .stats-display-value{
        font-size:2.5rem;
    }
    .ranking-distribution{
        margin-top:1rem;
    }
    #stats-window{
        top:0.25rem;
    }
    #stats-window-head{
        padding-bottom:0rem;
    }
    #stats-window-foot{
        margin-top:1.25rem;
    }
    #hint-window-head{
        padding-bottom:0rem;
    }
    .hint-stats{
        margin-top:0.5rem;
    }
    .hint-table{
        margin-top:1rem;
    }
    .hint-table-row{
        height:2rem;
    }
    .hint-table-col{
        font-size:1.25rem;
    }
    .mask{
        overflow-y:auto;
        position:fixed;
        height:100%;
    }
}