/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face{
    src:url("../assets/fonts/Inter Variable.ttf");
    font-family:"Inter";
}

*{
    -webkit-tap-highlight-color:transparent;
}
:root{
    --background-color:         rgb(255, 255, 255);
    --background-accent-color:  rgb(234, 234, 234);
    --background-accent-color-2:rgb(200, 200, 200);
    --accent-color:             rgb(255, 215, 000);
    --accent-color-dark:        rgb(230, 195, 000);
    --text-color:               rgb(000, 000, 000);

    --button-invert:0;
    --mode:0;
}
body{
    background-color:var(--background-color);
    font-family:"Inter";
    overflow-x:hidden;
    overflow-y:auto;
    color:var(--text-color);
    padding:0;
    margin:0;
}
.main-page{
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.main-page-body{
    justify-content:center;
    align-items:flex-start;
    display:flex;

    transform:translate(-50%);
    width:min(95vw, 75rem);
    margin-left:50%;
    height:100%;
}
.alert{
    border:1px solid var(--background-accent-color);
    box-shadow:0px 0px 1rem rgba(0, 0, 0, 0.2);
    background-color:var(--background-color);
    transform:translate(-50%);
    border-radius:1rem;
    text-align:center;
    position:absolute;
    font-size:2rem;
    padding:1rem;
    display:none;
    left:50%;
    top:8%;
}

/*--Elements------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
ul{
    transform:translate(-1rem);
}
select{
    color:var(--text-color);
    background-color:var(--accent-color-dark);
    transition:ease-in-out 0.05s;
    border-radius:0.5rem;
    font-family:"Inter";
    font-weight:bold;
    padding:0.7rem;
    font-size:1rem;
    cursor:pointer;
    outline:0;
    border:0;
}
select:hover{
    transform:scale(1.05);
}
b{
    margin-right:0.5rem;
}
a{
    color:var(--text-color);
    text-decoration:none;
}

button{
    color:var(--text-color);
    border:1px solid var(--background-accent-color);
    background-color:var(--background-color);
    border-radius:1.5rem;
    font-size:1.5rem;
    height:3rem;
    padding:0.5rem;
    padding-left:2rem;
    padding-right:2rem;

    cursor:pointer;
    user-select:none;
    transition:ease-in-out 0.1s;
    font-family:"Inter";
}
button:hover{
    transform:translateY(-1px);
}
button:active{
    transform:translateY(1px);
}
.highlight-button{
    border:1px solid var(--accent-color-dark);
    background-color:var(--accent-color);
}

/*--Page Head----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.main-page-head{
    border-bottom:1px solid var(--accent-color-dark);
    background-color:var(--accent-color);
    flex-shrink:0;
    height:4rem;
    width:100%;

    justify-content:center;
    align-items:center;
    display:flex;
}
.main-page-head-holder{
    justify-content:space-between;
    align-items:center;
    display:flex;

    width:min(95vw, 70rem);
}
.head-container{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;
}

.head-button{
    all:unset;
    filter:invert(var(--button-invert));
    transition:ease-in-out 0.05s;
    cursor:pointer;
    aspect-ratio:1;
    height:2.5rem;
    outline:0;
    border:0;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;
}
.head-button:hover{
    transform:scale(1.05);
}
.head-button:active{
    transform:scale(0.95);
}
#yesterday{
    background-image:url("../assets/icons/yesterday.png");
}
#stat{
    background-image:url("../assets/icons/stats.png");
}
#rank{
    background-image:url("../assets/icons/rank.png");
}
#help{
    background-image:url("../assets/icons/help.png");
}
#list{
    background-image:url("../assets/icons/list.png");
    display:none;
}
#dark{
    background-image:url("../assets/icons/dark mode.png");
}
#plus{
    background-image:url("../assets/icons/plus.png");
    display:none;
}

.head-l{
    justify-content:flex-start;
}
.head-l > *{
    margin-right:1rem;
}
.head-r{
    justify-content:flex-end;
}
.head-r > *{
    margin-left:1rem;
}

/*--Page Body Left-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.body-l{
    width:calc(50% - 0.5rem);
    margin-right:0.5rem;
    height:100%;
}
.current-guess{
    justify-content:center;
    align-items:center;
    overflow-y:hidden;
    flex-wrap:wrap;
    display:flex;

    margin-top:5%;
    height:12rem;
    width:100%;
}
.current-guess::after{
    background-color:var(--accent-color);
    width:0.5rem;
    height:3rem;
    content:"";
    animation:input-blink infinite 1s;
}
.current-guess-char{
    margin-right:0.25rem;
    margin-left:0.25rem;
    font-weight:bold;
    font-size:3rem;
}
.current-guess-highlight-char{
    color:var(--accent-color);
}
@keyframes input-blink{
    0%  {opacity:1;}
    5%  {opacity:0;}
    45% {opacity:0;}
    50% {opacity:1;}
}

.hex-holder{
    margin-top:2rem;
    height:50%;
    width:100%;
}
.hex-row{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;

    margin-bottom:0.5%;
    margin-top:0.5%;
    height:32%;
    width:100%;
}
.hex{
    background-color:var(--background-accent-color);
    aspect-ratio:1.13;
    font-size:3rem;
    height:100%;

    transition:ease-in-out 0.1s;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    user-select:none;
    cursor:pointer;
    outline:none;
    display:flex;

    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );
}
.hex:hover{
    transform:scale(1.025);
}
.hex:active{
    transform:scale(0.975);
}
.highlight-hex{
    background-color:var(--accent-color);
}

.hex-u{
    transform:translateY(-2%);
}
.hex-d{
    transform:translateY(2%);
}
.hex-ul{
    transform:translate(22%, 50%);
}
.hex-ur{
    transform:translate(-22%, 50%);
}
.hex-dl{
    transform:translate(22%, -50%);
}
.hex-dr{
    transform:translate(-22%, -50%);
}

.hex-u:hover{
    transform:translateY(-2%) scale(1.025);
}
.hex-d:hover{
    transform:translateY(2%) scale(1.025);
}
.hex-ul:hover{
    transform:translate(22%, 50%) scale(1.025);
}
.hex-ur:hover{
    transform:translate(-22%, 51%) scale(1.025);
}
.hex-dl:hover{
    transform:translate(22%, -51%) scale(1.025);
}
.hex-dr:hover{
    transform:translate(-22%, -51%) scale(1.025);
}

.hex-u:active{
    transform:translateY(-2%) scale(0.975);
}
.hex-d:active{
    transform:translateY(2%) scale(0.975);
}
.hex-ul:active{
    transform:translate(22%, 51%) scale(0.975);
}
.hex-ur:active{
    transform:translate(-22%, 51%) scale(0.975);
}
.hex-dl:active{
    transform:translate(22%, -51%) scale(0.975);
}
.hex-dr:active{
    transform:translate(-22%, -51%) scale(0.975);
}

.guess-button-holder{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;

    margin-top:2rem;
    width:100%;
}
.guess-button-holder > *{
    margin-right:0.5rem;
    margin-left:0.5rem;
}
.guess-button-icon{
    background-position:center center;
    background-repeat:no-repeat;
    height:100%;
    width:100%;
    filter:invert(var(--button-invert));
}
#guess-reload{
    aspect-ratio:1;
    padding:0.5rem;
}
#guess-hint{
    aspect-ratio:1;
    padding:0.5rem;
}
.guess-reload-icon{
    background-image:url("../assets/icons/reload.png");
    background-size:100%;
}
.guess-hint-icon{
    background-image:url("../assets/icons/hint.png");
    background-size:130%;
}

/*--Page Body Right----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.body-r{
    height:calc(100% - 1rem);
    width:calc(50% - 0.5rem);
    margin-left:0.5rem;
    
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}

.score-display{
    margin-bottom:1rem;
    margin-top:1rem;
    flex-shrink:0;
    height:3rem;
    width:100%;

    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.score-display-text-holder{
    flex-shrink:0;
    width:7.5rem;
    height:100%;
}
.score-display-text{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:1.5rem;
    
    height:50%;
    width:100%;
}
#score-display-next{
    margin-top:0.25rem;
    font-size:0.9rem;
    opacity:0.5;
}
.score-display-bar{
    position:relative;
    height:100%;
    width:100%;
}
.score-bar-line-holder{
    background-color:var(--background-accent-color);
    transform:translate(1rem, -50%);
    width:calc(100% - 2rem);
    border-radius:0.25rem;
    position:absolute;
    overflow:hidden;
    height:0.25rem;
    left:0px;
    top:50%;
}
.score-bar-line{
    transition:ease-in-out 0.1s;
    background-color:var(--accent-color);
    position:absolute;
    height:100%;
    width:0%;
    left:0px;
    top:0px;
}
.score-bar-points-holder{
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;

    justify-content:space-between;
    align-items:center;
    display:flex;
}
.score-bar-point{
    background-color:var(--background-accent-color);
    height:1rem;
    border-radius:100%;
    aspect-ratio:1;
}
#score-bar-max-points{
    justify-content:center;
    align-items:center;
    display:flex;

    height:2rem;
}
.score-bar-point-highlight{
    background-color:var(--accent-color);
    height:2rem;
    opacity:0;

    transition:ease-in-out 0.1s;
    justify-content:center;
    align-items:center;
    display:flex;
}
.score-bar-point-highlight:first-child{
    opacity:1;
}

.guessed-words-window{
    border:1px solid var(--background-accent-color);
    background-color:var(--background-color);
    width:calc(100% - 2rem);
    padding-bottom:1rem;
    padding-right:1rem;
    border-radius:1rem;
    padding-left:1rem;
    height:100%;
    position:relative;
    cursor:default;
}
.guessed-words-window-head{
    font-size:1.75rem;
    height:4rem;
    width:100%;
    

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.guessed-words-window-body{
    margin-top:1rem;
    height:calc(100% - 4rem);
    max-height:44rem;
    width:100%;

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    flex-wrap:wrap;
    display:flex;
}
.guessed-word{
    border-bottom:1px solid var(--background-accent-color-2);
    text-transform:capitalize;
    padding-bottom:0.25rem;
    margin-bottom:1rem;
    margin-right:1rem;
    width:8rem;
}
.guessed-words-window-expand{
    background-image:url("../assets/icons/expand.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    cursor:pointer;
    display:none;

    filter:invert(var(--button-invert));
    border-radius:100%;
    aspect-ratio:1;
    height:2rem;
    right:1rem;
    top:1rem;
}
.expand-up{
    transform:scaleY(-1);
}

/*css 25 */ 
.guessed-words-window-body {
  overflow-x: auto;  
  overflow-y: auto;  
}

/* Style the scrollbar so it's visible when overflow happens */
.guessed-words-window-body::-webkit-scrollbar {
  height: 8px;  
}

.guessed-words-window-body::-webkit-scrollbar-track {
  background: #f1f1f1;  
}

.guessed-words-window-body::-webkit-scrollbar-thumb {
  background: #888;     
  border-radius: 4px;
}

.guessed-words-window-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*css 25 end*/
/**/ 
/*--Mobile Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) and (orientation:portrait){
    :root{
        font-size:12px;
    }
    
    .guess-button-holder{
        height:fit-content;
        flex-wrap:wrap;
        margin-top:3rem;
    }
    .guess-button-holder > *{
        margin-bottom:0.5rem;
    }
    .guess-button-holder > *:nth-child(1){
        width:9rem;
    }
    .guess-button-holder > *:nth-child(4){
        width:9rem;
    }
    
    .hex-holder{
        height:fit-content;
    }
    .hex-row{
        height:fit-content;
    }
    .hex{
        aspect-ratio:1.13;
        flex-shrink:0;
        height:auto;
        width:30%;
    }
    .hint-table-col{
        font-size:1.25rem;
    }
}
@media only screen and (max-width: 768px) and (orientation:landscape){
    :root{
        font-size:12px;
    }
    body{
        padding-bottom:2rem;
        overflow-y:auto;
    }
    .current-guess{
        overflow-y:hidden;
        flex-wrap:wrap;
        margin-top:5%;
        height:15vh;
    }
    .current-guess > *{
        font-size:2rem;
    }
    .hex-holder{
        margin-top:1rem;
        height:55%;
        width:100%;
    }
    .hex-holder > * > *{
        font-size:2rem;
    }
    .guess-button-holder{
        margin-top:1rem;
    }
    .guessed-words-window-body{
        overflow-y:auto;
    }
}
@media only screen and (max-width: 850px) and (orientation:portrait){
    .main-page-body{
        flex-direction:column;
        justify-content:flex-start;   
    }
    .body-l{
        position:absolute;
        width:100%;
        order:1;
        left:0px;
        top:9rem;
    }
    .body-r{
        position:absolute;
        height:fit-content;
        width:100%;
        order:0;
        left:0px;
        top:0px;
    }
    
    .current-guess{ 
        height:3rem;
        flex-wrap:nowrap;
        overflow-x:hidden;
    }
    .current-guess > *{
        font-size:2rem;
    }
    .guessed-words-window{
        width:calc(100% - 3rem);
        padding-bottom:0px;
        height:fit-content;
        cursor:pointer;
    }
    .guessed-words-window-expand{
        display:block;
    }
    .guessed-words-window-head{
        font-size:1.125rem;
    }
    .guessed-words-window-body{
        transition:ease-in-out 0.1s;
        padding-bottom:1rem;
        display:none;
        max-height:37rem;
    }
    .expand-guessed{
        display:flex;
    }
    .score-display-bar{
        width:calc(100% - 9rem);
    }
}