/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mask{
    background-color:rgba(0, 0, 0, 0.5);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
    z-index:2;
}
.window{
    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;
    position:absolute;
    max-height:90vh;
    min-width:200px;
    overflow:hidden;
    left:50%;
    top:50%;
}
.window-head{
    width:calc(100% - 3rem);
    padding-right:1.5rem;
    padding-left:1.5rem;
    position:relative;
    height:4rem;
}
.window-body{
    width:calc(100% - 3rem);
    padding-right:1.5rem;
    padding-left:1.5rem;
}
.window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:1rem;
    height:6rem;
    width:100%;
}

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

    color:var(--text-color);
    font-size:1.5rem;
    height:100%;
    width:100%;
}
.window-exit{
    background-color:var(--background-accent-color);
    filter:invert(var(--button-invert));
    transform:translate(-50%, -50%);
    border-radius:100%;
    aspect-ratio:1;
    width:2rem;
    right:0.5rem;
    top:50%;
    
    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;
    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;
}

/*--Rules Display------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.rule-window{
    border-radius:1rem;
    margin-bottom:1rem;
    padding:1rem;
    width:calc(100% - 2rem);
    height:fit-content;
}
.rule-title{
    color:var(--accent-color);
    margin-bottom:0.5rem;
    font-weight:bold;
    font-size:2rem;
}
.rule-text{
    margin-bottom:0.5rem;
    font-size:1rem;
    font-weight:600;
}
.rile-window-list{
    width:calc(100% - 2rem);
}
.rule-window-list-item{
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;

    margin-bottom:0.5rem;
    height:2rem;
    width:100%;
}
.rule-window-list-icon{
    background-color:var(--accent-color);
    border-radius:100%;
    margin-right:0.5rem;
    margin-top:0.3rem;
    aspect-ratio:1;
    height:0.75rem;
}
.rule-window-contact{
    justify-content:center;
    align-items:center;
    display:flex;
    font-size:1.25rem;
}
.rule-window-contact-link{
    color:var(--accent-color);
    margin-left:0.5rem;
}

/*--Ranks Display------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#rank-window{
    max-width:100%;
    width:50rem;
}
.rank-holder{
    height:fit-content;
    margin-top:2rem;
    width:100%;
}
.rank-row{
    margin-bottom:0.5rem;
    border-radius:1rem;
    height:3rem;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.rank-title{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-left:1rem;
    height:100%;
    width:6rem;
}
.rank-bar-holder{
    background-color:var(--background-accent-color-3);
    border-radius:1rem;
    overflow:hidden;
    height:1rem;
    width:100%;
}
.rank-bar{
    background-image:linear-gradient(to right, rgba(0, 0, 0, 0), var(--accent-color));
    border-radius:1rem;
    height:100%;
    width:50%;
}
.rank-points{
    justify-content:flex-end;
    align-items:center;
    display:flex;

    margin-right:1rem;
    flex-shrink:0;
    height:100%;
    width:3rem;
}

/*--Stats Display------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#stats-window{
    max-width:100%;
    width:34rem;
    max-height:52rem;
}
.stats-display-holder{
    justify-content:space-between;
    align-items:center;
    display:flex;
    width:100%;
}
.stats-display{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    border-radius:1rem;
    aspect-ratio:1.13;
    width:48%;
}
#stats-display-games{
    background-image:url("../assets/images/stats games.png");
    color:rgb(255, 255, 255);
}
#stats-display-wins{
    background-image:url("../assets/images/stats wins.png");
    color:rgb(0, 0, 0);
}
.stats-display-selected{
    background-color:var(--accent-color);
    color:rgb(0, 0, 0);
}
.stats-display-bottom{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-top:72.5%;
    height:2rem;
    width:100%;
}
.stats-display-image{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;

    border:2px solid var(--accent-color);
    background-color:var(--accent-color);
    border-radius:1rem;
    margin-left:1rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:100%;
}
.stats-display-image-game{
    background-image:url("../assets/icons/console.png");
}
.stats-display-image-win{
    background-image:url("../assets/icons/crown.png");
}
.stats-display-selected .stats-display-image-game{
    border:2px solid rgb(0, 0, 0);
}
.stats-display-value{
    justify-content:flex-end;
    align-items:center;
    font-weight:bold;
    display:flex;

    width:50%;
    margin-right:1rem;
    font-size:1.5rem;
    height:100%;
}
.stats-display-label{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    width:50%;
    margin-bottom:0.25rem;
    font-size:1.25rem;
    margin-left:1rem;
    flex-shrink:0;
    height:3rem;
}

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

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

    width:100%;
}
.ranking-distribution-row{
    border-bottom:1px solid var(--background-accent-color);
    padding-bottom:0.5rem;
    margin-bottom:1rem;
    height:2rem;
    width:100%;
}
.ranking-distribution-row-data{
    justify-content:space-between;
    align-items:center;
    display:flex;

    margin-bottom:0.25rem;
    height:50%;
    width:100%;
}
.ranking-distribution-row-percent{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    flex-shrink:0;
    width:1rem;
}
.ranking-distribution-row-label{
    justify-content:center;
    align-items:center;
    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:0.5rem;
    width:100%;
}
.ranking-distribution-row-bar{
    background-color:var(--accent-color);
    transition:ease-in-out 0.1s;
    height:100%;
    width:0px;
}
.rank-dist-element{
    box-shadow:0px 0px 1rem var(--background-accent-color);
    border:1px solid var(--background-accent-color);
    margin-bottom:0.5rem;
    margin-right:0.5rem;
    border-radius:1rem;
    aspect-ratio:1;
    height:7rem;
}
.rank-dist-element-value{
    justify-content:center;
    align-items:flex-end;
    font-weight:500;
    display:flex;

    font-size:2rem;
    height:4rem;
    width:100%;
}
.rank-dist-element-label{
    justify-content:center;
    align-items:flex-start;
    display:flex;

    color:rgb(100, 100, 100);
    font-size:1rem;
    height:2rem;
    width:100%;
}

/*--Yesterday----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#yesterday-window{
    max-height:100vh;
    height:100vh;
    max-width:100%;
    width:35rem;
}
.yesterday-letters{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-top:1.5rem;
    width:100%;
}
.yesterday-letter{
    margin-right:0.25rem;
    margin-left:0.25rem;
    font-weight:bold;
    font-size:1.5rem;
}
.yesterday-stats{
    justify-content:center;
    align-items:center;
    display:flex;

    transform:translate(-50%);
    margin-left:50%;
    height:2rem;
    width:12rem;
}
.yesterday-letter-highlight{
    color:var(--accent-color);
}
.yesterday-points-holder{
    border:1px solid var(--background-accent-color);
    border-radius:1rem;
    margin-top:1rem;
    height:9rem;
    width:100%;
}
.yesterday-points{
    border:1px solid var(--accent-color);
    border-radius:1rem;
    padding:1rem;
    height:3rem;
    width:calc(50% - 3rem);
}
.yesterday-points-selected{
    background-color:var(--accent-color);
}
.yesterday-points-top{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:1.5rem;
    width:100%;
}
.yesterday-points-icon{
    background-image:url("../assets/icons/check.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    margin-right:1rem;
    aspect-ratio:1;
    flex-shrink:0;
    height:100%;
}
.yesterday-points-value{
    justify-content:center;
    align-items:center;
    display:flex;

    font-size:1rem;
    height:100%;
}
.yesterday-points-label{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    font-size:1.25rem;
    height:2rem;
    width:100%;
}
.yesterday-words-holder{
    margin-bottom:1rem;
    margin-top:2rem;
    max-height:calc(100vh - 25rem);
    overflow-x:hidden;
    overflow-y:auto;
}
.yesterday-words{
    font-size:1rem;
}
.yesterday-words-row{
    margin-bottom:0.5rem;
    border-radius:1rem;
    height:2.5rem;
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;

    justify-content:space-between;
    align-items:center;
    display:flex;
}
.yesterday-word{
    justify-content:center;
    align-items:center;
    display:flex;

    border:1px solid var(--background-accent-color);
    margin-top:2px;
    border-radius:2.5rem;
    height:100%;
    width:calc(33% - 0.5rem);
}
.yesterday-word-highlight{
    color:var(--accent-color-2);
}
.yesterday-word-bold{
    font-weight:bold;
}
.yesterday-desc{
    background-color:var(--accent-color-2);
    margin-bottom:1rem;
    border-radius:1rem;
    height:7rem;
    width:100%;

    justify-content:center;
    flex-direction:column;
    align-items:center;
    display:flex;
}
.yesterday-desc-row{
    justify-content:center;
    align-items:center;
    display:flex;

    color:rgb(0, 0, 0);
    height:3rem;
    width:100%;
}
.yesterday-desc-bold{
    font-weight:bold;
}
.yesterday-desc-highlight{
    color:rgb(234, 203, 86);
}
.yesterday-divide-v{
    background-color:var(--background-accent-color);
    margin-right:0.5rem;
    margin-left:0.5rem;
    height:50%;
    width:1px;
}
.yesterday-divide-h{
    background-color:var(--background-accent-color);
    transform:translate(-50%);
    margin-bottom:0.5rem;
    margin-left:50%;
    margin-top:0.5rem;
    height:1px;
    width:80%;
}
.yesterday-all-letters{
    transform:translate(-50%);
    margin-left:50%;
    height:2rem;
    width:80%;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}
.yesterday-alphabet-letter{
    color:var(--background-accent-color-2);
}
.yesterday-alphabet-letter-highlight{
    color:var(--text-color);
    font-weight:500;
}

/*--Unlimited Games----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.new-unlimited-game-holder{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-bottom:1rem;
    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:1rem;
    border-radius:1rem;
    padding-right:1rem;
    padding-left:1rem;
    margin-left:1px;
    flex-shrink:0;
    height:4rem;
    
    justify-content:flex-start;
    align-items:center;
    position:relative;
    cursor:pointer;
    display:flex;
}
.unlimited-game-highlight{
    border:2px solid var(--accent-color);
    margin-left:0px;
}
.unlimited-game-all-stats{
    height:100%;
    width:100%;
}
.unlimited-game-stats{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    margin-right:1rem;
    height:100%;
    width:calc(100% - 2rem);
}
.unlimited-game-letters{
    height:100%;
    width:50%;

    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-points{
    height:100%;
    width:50%;

    justify-content:flex-start;
    flex-direction:column;
    align-items:center;
    display:flex;
}
.unlimited-game-points-value{
    height:50%;
    width:100%;

    justify-content:flex-end;
    align-items:flex-end;
    font-weight:bold;
    display:flex;
}
.unlimited-game-rank{
    justify-content:flex-end;
    align-items:flex-start;
    display:flex;

    color:var(--background-accent-color-2);
    font-size:1rem;
    height:50%;
    width:100%;
}
.unlimited-game-bar-holder{
    background-color:var(--background-accent-color);
    border-radius:0.25rem;
    height:0.5rem;
    width:calc(100% - 2rem);
    overflow:hidden;
}
.unlimited-game-bar{
    background-color:var(--accent-color);
    height:100%;
    width:50%;
}

.unlimited-game-delete{
    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;

    background-color:var(--background-accent-color);
    transition:ease-in-out 0.05s;
    border-radius:100%;
    user-select:none;
    cursor:pointer;
    aspect-ratio:1;
    flex-shrink:0;
    height:1.5rem;
}
.unlimited-game-delete:hover{
    transform:scale(1.05);
}
.unlimited-game-delete:active{
    transform:scale(0.95);
}

.new-unlimited-icon{
    background-image:url("../assets/icons/plus.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    filter:invert(1);
    margin-right:0.5rem;
    aspect-ratio:1;
    height:1.5rem;
}
#new-unlimited-game{
    width:15rem;
}

/*--Hints--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#hint-window{
    max-height:100vh;
    overflow-y:auto;
}
.hint-letters{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-top:2rem;
    width:100%;
}
.hint-letter{
    margin-right:0.25rem;
    margin-left:0.25rem;
    font-size:1.5rem;
    font-weight:bold;
}

.hint-stats{
    justify-content:center;
    align-items:center;
    display:flex;

    color:var(--text-color);
    margin-top:1rem;
    opacity:0.5;
    width:100%;
}
.hint-table{
    border:2px solid var(--accent-color);
    border-radius:1rem;
    transform:translate(-50%);
    height:fit-content;
    width:calc(100% - 2rem);
    overflow:hidden;
    margin-left:50%;
    margin-top:2rem;
}
.hint-table-row{
    border-bottom:1px solid var(--background-accent-color);
    height:3rem;
    width:100%;

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

    justify-content:center;
    align-items:center;
    display:flex;
}
.hint-table-col:last-child{
    border-right:none;
}
.hint-table-col-label{
    background-color:var(--accent-color-2);
    color:rgb(0, 0, 0);
    font-weight:bold;
}
.hint-letter-highlight{
    color:var(--accent-color);
}
.hint-col-highlight{
    background-color:var(--accent-color);
}
.combo-title{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:1.25rem;
    margin-bottom:1rem;
    margin-top:2rem;
    width:100%;
}
.combo-holder{
    justify-content:flex-start;
    align-items:flex-start;
    flex-wrap:wrap;
    display:flex;

    padding-bottom:2rem;
    max-height:12rem;
    width:100%;
}
.combo-item{
    border:1px solid var(--background-accent-color);
    margin-bottom:0.5rem;
    margin-right:0.25rem;
    margin-left:0.25rem;
    border-radius:2rem;
    height:2rem;
    width:calc(33% - 0.5rem - 2px);

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

/*--Game Won-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#game-won-window{
    height:36rem;
}
#game-won-body{
    transform:translateY(-5rem);
    pointer-events:none;
}
#game-won-foot{
    transform:translateY(-5rem);
}
.game-won-icon{
    background-image:url("../assets/icons/thropy.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:contain;

    transform:translate(-50%);
    margin-bottom:2rem;
    margin-left:50%;
    padding-top:2rem;
    aspect-ratio:1;
    height:10rem;
}
.game-won-title{
    justify-content:center;
    align-items:center;
    text-align:center;
    font-weight:bold;
    display:flex;

    margin-bottom:1rem;
    font-size:1.5rem;
    width:100%;
}
.game-won-text{
    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;

    margin-bottom:2rem;
    font-size:1.25rem;
    width:100%;
}
.game-won-stat-holder{
    justify-content:center;
    align-items:center;
    display:flex;
    padding-bottom:1rem;
}
.game-won-stat{
    border:1px solid var(--background-accent-color);
    margin-right:0.5rem;
    margin-left:0.5rem;
    border-radius:1rem;
    width:6rem;
    padding:1.5rem;
}
.game-won-stat-title{
    justify-content:center;
    align-items:center;
    display:flex;

    color:var(--background-accent-color-2);
    font-size:1rem;
    height:50%;
    width:100%;
}
.game-won-stat-value{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    height:50%;
    width:100%;
}

/*--Select Mode--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.select-mode-holder{
    justify-content:space-between;
    align-items:center;
    display:flex;
   
    margin-top:2rem;
    width:100%;
}
.select-mode{
    border:0.2rem solid var(--background-accent-color);
    border-radius:1rem;
    margin-bottom:2rem;
    height:11rem;
    width:calc(50% - 0.75rem);
    cursor:pointer;
    user-select:none;
    position:relative;
    transition:ease-in-out 0.05s;
}
.select-mode-selected{
    border:0.2rem solid var(--accent-color);
}
.select-mode-selected:active{
    background-color:var(--accent-color);
}
.select-mode-icon{
    background-color:var(--background-accent-color-3);
    border-radius:100%;
    transform:translate(-50%);
    margin-left:50%;
    margin-top:1.5rem;
    aspect-ratio:1;
    height:5rem;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:60%;
}
.select-mode-icon-selected{
    background-color:var(--accent-color);
}
.select-mode-icon-daily{
    background-image:url("../assets/icons/daily.png");
}
.select-mode-icon-unlimited{
    background-image:url("../assets/icons/unlimited.png");
}
.select-mode-name{
    justify-content:center;
    align-items:center;
    display:flex;

    font-size:1.25rem;
    font-weight:500;
    margin-top:1rem;
    width:100%;
}
.select-mode-check-holder{
    background-color:var(--background-accent-color);
    border-radius:100%;
    position:absolute;
    aspect-ratio:1;
    height:3rem;
    right:1rem;
    top:1rem;
    overflow:hidden;
}
.select-mode-check{
    background-color:var(--accent-color);
    display:none;
    height:100%;
    width:100%;

    background-image:url("../assets/icons/check mark.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:50%;
}
.select-mode-check-show{
    display:block;
}

/*--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-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%;
    }
    #yesterday-window{
        height:auto;
        max-height:auto;
        overflow-y:auto;
    }
    .yesterday-words-holder{
        max-height:auto;
        height:fit-content;
        min-height:30rem;
    }
}
@media only screen and (max-width: 850px) and (orientation:portrait){
    .window{
        transform:translate(-50%, 0px);
        max-height:100vh;
        height:100vh;
        width:100vw;
        left:50%;
        top:0px;
    }
    .window-head{
        border-bottom-right-radius:1rem;
        border-bottom-left-radius:1rem;
    }
    .window-body{
        height:calc(100% - 12rem);
    }
    
    .ranking-distribution-body{
        justify-content:center;
        align-items:center;
    }
    #game-won-body{
        transform:translateY(0rem);
    }
    #game-won-foot{
        transform:translateY(0rem);
    }
    #game-won-window{
          height:100vh;
    }
}
@media only screen and (max-height:830px){
    #stats-window{
        transform:translate(-50%, 0px);
        overflow-x:hidden;
        overflow-y:auto;
        max-height:100%;
        height:100%;
        top:0px;
    }
}