@import url("font_awesome/css/font-awesome.min.css");

@font-face {
    font-family: Roboto;
    src: url('../fonts/roboto.woff')
}

@font-face {
    font-family: njnaruto;
    src: url('../fonts/njnaruto.ttf')
}

:root{
    --COLOR1: #321d35;
    --COLOR2: #41337a;
    --COLOR3: #6594ac;
    --COLOR4: #c2efeb;
    --COLOR5: #ecfee8;
}

::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--COLOR3);
    border-radius: 10px;
}
  
::-webkit-scrollbar-thumb:hover {
    background-color: #4b7286;
}

@media only screen and (min-width : 600px){
    ::-webkit-scrollbar{
        width: 4px;
        height: 4px;
    }
}

::-webkit-meter-bar{
    background-color: var(--COLOR2);
    border: none;
}

::-webkit-meter-optimum-value{background-color: lime}

::-webkit-meter-even-less-good-value{background-color: red}

::-webkit-meter-suboptimum-value{background-color: orange}

::selection{
    background-color: var(--COLOR2);
    color: var(--COLOR5);
    padding: 3px
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

body, html{
    overflow: hidden;
    backface-visibility: hidden;
}

body{
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    width: 100%;
    height: 100vh;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    user-select: none;
    color: var(--COLOR5);
    background-color: #000000;
}

img{user-select: none;}

button, input, textarea{
    border: none;
    outline: none;
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

input, textarea{
    caret-color: var(--COLOR2);
    accent-color: var(--COLOR3);
}

input[type="file"]{display: none;}

button{cursor: pointer;}

button:disabled, input:disabled{
    opacity: .4;
    cursor: not-allowed;
}

dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background-color: #151531;
    background-image: linear-gradient(90deg, #151531, #10102b);
    width: 80%;
    max-width: 350px;
    border: none;
    border-radius: 10px;
    padding: 15px;
    user-select: none;
    outline: none;
    border: none;
    overflow-x: hidden;
}

dialog::backdrop{
    background-color: #000000;
    opacity: .4;
}

.remove-dialog{
    float: right;
    width: 25px;
    height: 25px;
    font-size: 1.15rem;
    background-color: orangered;
    color: #10102b;
    border-radius: 4px;
    display: grid;
    place-content: center;
}

#container{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #151531;
    background-image: linear-gradient(90deg, #2f2f5a, #482a81);
}

section{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow-y: auto;
}

#container section.current-section{
    visibility: visible;
    z-index: 10;
}

.notification{
    z-index: 1000000 !important;
    position: fixed !important;
    left: 50% !important;
    top: -100px;
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    transform: translateX(-50%) !important;
    transition: top 500ms ease;
    visibility: hidden;
}

.message-notification{
    width: 97%;
    max-width: 325px;
    height: fit-content;
    padding: 10px;
    border-radius: 6px;
    color: var(--COLOR5);
    background-image: linear-gradient(to right, var(--COLOR2), #201841);
}


#splash-screen{
    background: no-repeat center;
    background-image:  url('../images/bg.svg'), linear-gradient(to bottom left, var(--COLOR2), var(--COLOR1));
    background-size: cover;
}

#splash-screen{
    display: flex;
    justify-content: center;
    align-items: center;
}

#splash-screen::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: .4
}

#splash-screen > div{
    z-index: 100;
    width: 100%;
    max-width: 500px;
    min-width: 200px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px
}

.spinner{
    border: solid medium transparent;
    border-top: dodgerblue medium solid;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 25px;
    animation: spin 1.5s infinite forwards linear;
}

@keyframes spin{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

#splash-screen p{
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    gap: 5px;
}

#splash-screen > div > p:nth-child(2){
    font-size: 1.8rem;
    font-weight: 500;
}

#splash-screen p > img{
    width: px;
    height: 25px;
    vertical-align: middle;
    border-radius: 50%;
}

#home-screen{background-color: #05050e;}

#home-screen::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
    background: url('../images/bg.svg') no-repeat center;
    background-size: cover;
    opacity: .27
}

#home-screen > div:nth-child(3){
    width: 100%;
    height: 100%;
    padding-top: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px
}

#home-screen > div:nth-child(2){
    position: absolute;
    left: 25px;
    top: 25px;
    height: 40px;
    display: flex;
    align-items: center;
    column-gap: 7.5px;
}

#home-screen > div:nth-child(2) > span{
    font-size: 1rem;
    text-transform: uppercase;
}

#home-screen > div:nth-child(2) > meter{
    width: 75px;
    height: 17.5px;
}

#home-screen #avatar{
    position: absolute;
    right: 25px;
    top: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: linear-gradient(to right, var(--COLOR2), #5742ac);
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
}

#home-screen #avatar > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
}

#home-screen #game-title{
    font-family: njnaruto;
    font-size: 3rem;
    color: transparent;
    text-shadow: 0px 0px 100px var(--COLOR3);
    background: linear-gradient(to right, var(--COLOR2), var(--COLOR3));
    background-clip: text;
    -webkit-background-clip: text;
    vertical-align: middle;
    margin-top: 20px;
}

#home-screen #game-title > span{
    font-size: 1.75rem;
    float: right;
}

#home-screen #options div:nth-child(1){
    display: flex;
    flex-direction: column;
    gap: 27.5px
}

#home-screen #options div:nth-child(1) > button{
    width: 185px;
    height: 45px;
    font-size: 1.15rem;
}

#home-screen #options div:nth-child(1) > button .fa-globe{color: dodgerblue;}

.vs{
    font-family: njnaruto;
    display: inline-block;
    transition: transform 300ms;
}

#home-screen #options div:nth-child(2){
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 27.5px;
    gap: 8.3px
}

#home-screen #options div:nth-child(2) > button{
    width: 53.3px;
    height: 45px;
    font-size: 1.7rem;
}

#home-screen #options div:nth-child(2) > button > svg{
    width: 1.7rem;
    height: auto
}

#home-screen #options :is(div:nth-child(1) > button, div:nth-child(2) > button){
    background: linear-gradient(to right, var(--COLOR2), #5742ac);
    color: var(--COLOR5);
    transition: transform 300ms;
    border-radius: 5px;
}

#select-avatar > div:nth-child(2){
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    overflow: auto hidden;
    white-space: nowrap;
}

#select-avatar > div:nth-child(2) > div{
    position: relative;
    width: 60px;
    height: 60px;
    padding: 5px;
    display: inline-block;
    overflow: hidden;
    border: thin solid rgb(0, 0, 0);
    margin: 0;
    border-radius: 7px;
}

#select-avatar > div:nth-child(2) > div img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#select-avatar > div:nth-child(2) > div i{
    display: inline-block;
    width: 100%;
    height: 100%;
    color: var(--COLOR5);
    font-size: 1.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#select-avatar > div:nth-child(2) > div[data-avatar="import"]{
    background: no-repeat center;
    background-size: cover;
    position: relative;
}

#select-avatar > div:nth-child(2) > div[data-avatar="import"] > i{
    position: relative;
    z-index: 100;
}

#select-avatar > div:nth-child(2) > div[data-avatar="import"].selected::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background-color: rgb(0, 0, 0, .5);
}

.selected-avatar::after{
    content: url("../images/check.svg");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0 , .4);
}

#select-avatar > div:nth-child(3), #enter-name-dialog > div:nth-child(1){
    color: var(--COLOR5);
    padding-top: 30px;
    padding-bottom: 15px;
    margin: 0 auto;
    width: 100%;
}

#enter-name-dialog > div:nth-child(1){padding-top: 0;}

#select-avatar > div:nth-child(3) > label > span, #enter-name-dialog > div:nth-child(1) > label > span{
    display: inline-block;
    padding: 7.5px;
    background-color: var(--COLOR2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#enter-name-dialog > div:nth-child(1) > label > span{font-size: .85rem;}

#select-avatar > div:nth-child(3) > label > input, #enter-name-dialog > div:nth-child(1) > label > input{
    width: 100%;
    max-width: 225px;
    padding: 5px 5px;
    border-radius: 5px;
    border-top-left-radius: 0;
    font-size: 1rem
}

#select-avatar > div:nth-child(3) > label > input:is(:hover, :focus),
#enter-name-dialog > div:nth-child(1) > label > input:is(:hover, :focus){
    outline: solid thin var(--COLOR2);
}

#select-avatar > div:nth-child(3) > p, #enter-name-dialog > div:nth-child(1) > p{
    color: orangered;
    font-size: .9rem;
    margin-block-start: 10px;
}

#enter-name-dialog > div:nth-child(2){
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

#enter-name-dialog > div:nth-child(2) button{
    padding: 5px 15px;
    font-size: 16px;
    border-radius: 3px;
    color: var(--COLOR5)
}

#enter-name-dialog > div:nth-child(2) button:nth-child(1){
    background-color: var(--COLOR3);
}

#achievement-dialog{
    width: 95%;
    padding: 10px;
    overflow: hidden;
}

#achievement-dialog > div:nth-child(2){
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px
}

#achievement-dialog > div:nth-child(2) > div{
    width: 110px;
    color: var(--COLOR5);
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    position: relative 
}

#achievement-dialog > div:nth-child(2) > div > span{
    position: absolute;
    bottom: -6px;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
    height: 3px;
    width: 0%;
    border-radius: 25px;
    background-color: var(--COLOR3);
    transition: width 200ms ease-out;
}

#achievement-dialog > div:nth-child(2) > div.selected-option > span{width: 100%}

#achievement-dialog > div:nth-child(3){
    height: 72vh;
    max-height: 450px;
    position: relative; 
}

#achievement-dialog > div:nth-child(3) > div{
    width: 100%;
    height: calc(100% - 25px);
    margin-top: 25px;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden auto;
}

#achievement-dialog > div:nth-child(3) > div:nth-child(1){padding-right: 10px}

#achievement-dialog > div:nth-child(3) > div.open{
    visibility: visible;
    z-index: 100;
}

.achievement-box{
    width: 97%;
    max-width: 325px;
    height: fit-content;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-block: 30px;
    border-radius: 6px;
    position: relative;
    display: flex;
    gap: 15px;
    color: var(--COLOR5);
    background-image: linear-gradient(to right, var(--COLOR2), #201841);
}

.achievement-box.locked{opacity: .7}

.achievement-box.locked::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    z-index: 1000;
    background-color: #000000;
    opacity: .27;
}

.achievement-box > .fa-trophy{
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.achievement-box > .gold{
    color: gold
}

.achievement-box > .silver{
    color: silver
}

.achievement-box > div{
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.achievement-box > div span:nth-child(1){
    font-size: 1.2rem;
}

.achievement-box > div span:nth-child(2){
    font-size: .75rem;
    align-self: flex-end;
    color: lightgreen
}

#stats > div{
    display: flex;
    justify-content: space-between;
    margin: 23px 10px;
    color: var(--COLOR5);
    font-size: 1.05rem;
}

#stats > div > span:nth-child(2){color: lightgreen;}

#xp-display{
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#xp-display > span{
    color: transparent;
    background-image: linear-gradient(45deg, var(--COLOR2), var(--COLOR3));
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 2.25rem;
    font-weight: 1000;
    text-align: center;
    letter-spacing: 3px;
}

#xp-display > meter{
    width: 200px;
    height: 25px;
}

#leaderboard-dialog{
    width: 90%;
    padding: 15px 10px
}

#leaderboard-dialog div:nth-child(2){
    height: 70vh;
    max-height: 450px;
    overflow: hidden auto;
    margin-top: 40px;
    padding-right: 10px;
}

#leaderboard-dialog table{
    color: var(--COLOR5);
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#leaderboard-dialog table caption{
    caption-side: top;
    width: 100%;
    text-align: center;
    background-color: var(--COLOR2);
    padding: 7px;
    font-size: 1.2rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#leaderboard-dialog table td, #leaderboard-dialog table th{
    padding: 10px 5px;
    overflow: hidden;
}

#leaderboard-dialog table td:not(:nth-child(2)){text-align: center;}

#leaderboard-dialog table td:last-child{color: goldenrod}

#leaderboard-dialog table tbody > tr:nth-child(1) > td:first-child{color: gold}

#leaderboard-dialog table tbody > tr:nth-child(1) > td:first-child::after{content: "st"}

#leaderboard-dialog table tbody > tr:nth-child(2) > td:first-child{color: silver}

#leaderboard-dialog table tbody > tr:nth-child(2) > td:first-child::after{content: "nd"}

#leaderboard-dialog table tbody > tr:nth-child(3) > td:first-child{color: burlywood}

#leaderboard-dialog table tbody > tr:nth-child(3) > td:first-child::after{content: "rd"}

#leaderboard-dialog table td:first-child:not(#leaderboard-dialog table tbody > tr:nth-child(1) > td:first-child, #leaderboard-dialog table tbody > tr:nth-child(2) > td:first-child, #leaderboard-dialog table tbody > tr:nth-child(3) > td:first-child)::after{
    content: "th"
}

#leaderboard-dialog table td:first-child{font-size: 1.3rem;}

#leaderboard-dialog table td:first-child::after{font-size: 1rem;}

#leaderboard-dialog table tbody td:nth-child(2) > div{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px
}

#leaderboard-dialog table tbody td:nth-child(2) > div > img{
    width: 25%;
    height: 25%;
    object-fit: contain;
    object-position: center;
    flex-shrink: 2;
    border-radius: 50%;
}

#leaderboard-dialog table tbody td:nth-child(2) > div > span{
    flex-grow: 2;
    width: 75%;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#leaderboard-dialog table tbody tr.d{
    opacity: .55;
    background: linear-gradient(to right, rgb(27, 27, 27), rgb(0, 0, 0))
}

#leaderboard-dialog table tbody tr.d > td:nth-child(3){color: gray}

#leaderboard-dialog table tbody tr.u{
    background: linear-gradient(to right, #59345f, var(--COLOR1));
}

#settings-dialog{
    width: 90%;
    color: var(--COLOR5);   
}

#settings-dialog > div:nth-child(2){font-size: 1.3rem;}

#settings-dialog > div:nth-child(3){
    padding-block: 25px;
    display: flex;
    flex-direction: column;
    font-size: .95rem;
    gap: 25px;
}

#settings-dialog > div:nth-child(3) > div:nth-child(1){
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px 40px
}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div > *{display: block;}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div > input[type="radio"]{display: none;}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div > label{margin-block: 10px;}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div > span{font-size: 1.05rem;}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div > label > span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div > input[type="radio"]:checked + label > span{background-color: var(--COLOR3);}

#settings-dialog > div:nth-child(3) > div:nth-child(2) input[type="checkbox"]{
    width: 18px;
    height: 18px;
}

#settings-dialog > div:nth-child(3) > div:nth-child(2), #settings-dialog > div:nth-child(3) > div:nth-child(1) > div > label{
    display: flex;
    align-items: center;
    gap: 10px
}

#settings-dialog > div:nth-child(3) > div:nth-child(1) > div:nth-child(2){flex-grow: 2;}

#settings-dialog > div:nth-child(4){
    width: 100%;
    display: flex;
    justify-content: flex-end;
}    

#settings-dialog > div:nth-child(4) > button{
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 3px;
    color: var(--COLOR5);
    background-color: var(--COLOR3);
}

#select-multiplayer-mode{color: var(--COLOR5);}

#select-multiplayer-mode > div:nth-child(2){font-size: 1.3rem;}

#select-multiplayer-mode > div:nth-child(3){
    display: flex;
    justify-content: space-evenly;
    margin-block: 25px;
}

#select-multiplayer-mode > div:nth-child(3) > div{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    text-align: center;
    padding: 7.5px;
    background-image: linear-gradient(to right, var(--COLOR2), #5742ac);;
    border-radius: 7.5px;
    cursor: pointer;
}

#select-multiplayer-mode > div:nth-child(3) > div > i{font-size: 2rem;}

#select-multiplayer-mode > div:nth-child(3) > div > span{font-size: .9rem;}

#connection-dialog{
    width: fit-content;
    overflow: hidden;
}

#connection-dialog > div:nth-child(3){
    color: orangered;
    font-size: 1.2rem;
    margin: 30px 10px 10px;
    min-width: 200px;
    display: none
}

#connection-dialog > button.remove-dialog{
    background-color: transparent;
    color: #4b7286;
}

#connection-dialog > div:nth-child(2) > div.spinner{
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

#connection-dialog > div:nth-child(2) > div:nth-child(2){
    text-align: center;
    color: var(--COLOR5)
}

#start-game-dialog{
    width: 95%;
    color: var(--COLOR5);
}

#start-game-dialog > div:nth-child(2){
    margin-top: 50px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 50px
}

#start-game-dialog > div:nth-child(2) > div:nth-child(2){
    font-family: njnaruto;
    font-size: 1.5rem;
    width: 10%;
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)){
    display: flex;
    flex-flow: row nowrap;
    column-gap: 7px;
    overflow: hidden;
    text-align: center;
    width: 45%;
    height: 100%;
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)) > div:nth-child(1){
    width: 40%;
    display: flex;
    align-items: center;
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)) > div:nth-child(1) div{
    width: 100%;
    height: 50%;
    min-height: 40px;
    border-radius: 50%;
    background: center no-repeat;
    background-size: cover;
    position: relative;
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)) > div:nth-child(1) div::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1000;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(to right, var(--COLOR2), #5742ac)
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)) > div:nth-child(2){
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)) > div:nth-child(2) > span:nth-child(1){
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: linear-gradient(to right, var(--COLOR2), #5742ac);
    padding: 3px;
    min-width: 70px;
    min-height: 22px;
}

#start-game-dialog > div:nth-child(2) > :is(div:nth-child(1), div:nth-child(3)) > div:nth-child(2) > span:nth-child(2){
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .8rem;
}

#start-game-dialog > div:nth-child(3), #connect-with-friend-dialog > div:nth-child(3){
    display: flex;
    justify-content: flex-end;
    gap: 15px
}

#start-game-dialog > div:nth-child(3) > button, #connect-with-friend-dialog > div:nth-child(3) > button{
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 3px;
    color: var(--COLOR5);
    background-color: var(--COLOR3);
}

#connect-with-friend-dialog{
    max-width: 280px;
}

#connect-with-friend-dialog > div:nth-child(2){
    margin-top: 50px;
}

#connect-with-friend-dialog > div:nth-child(2) > div{
    margin-bottom: 25px;
}

#connect-with-friend-dialog > div:nth-child(2) > div > div{
    margin: 0 auto;
    position: relative
}

#connect-with-friend-dialog > div:nth-child(2) > div > div > input{
    width: 100%;
    font-size: .95rem;
    padding: 5px 40px 5px 10px;
    background-color: whitesmoke;
    color: black;
    border-radius: 7px;
}

#connect-with-friend-dialog > div:nth-child(2) > div > div > input::placeholder{
    color: rgb(158, 158, 158);
}

#connect-with-friend-dialog > div:nth-child(2) > div > div > button{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    background: transparent;
    color: var(--COLOR2)
}

#connect-with-friend-dialog > div:nth-child(2) > div > button{
    width: 100%;
    font-size: .95rem;
    padding: 5px;
    border-radius: 7px;
    background-color: var(--COLOR2);
    color: var(--COLOR5);
    margin-top: 25px;
}

#game-screen{
    background-color: #05050e;
    color: var(--COLOR5);
}

#game-screen > div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    max-width: 601px;
    max-height: 769px;
}

#game-screen > div > div:nth-child(1), #game-screen > div > div:nth-child(3){
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    width: 100%;
    background-image: linear-gradient(90deg, #151531, #10102b)
}

#game-screen > div > div:nth-child(1) > div:nth-child(2){
    font-family: njnaruto;
    font-size: 1.35rem;
    text-align: center;
    width: 15%;
}

#game-screen > div > div:nth-child(1) > div:is(:nth-child(1), :nth-child(3)){
    width: 42.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

#game-screen > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#game-screen > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(2){
    width: 10%;
    height: 100%;
    text-align: center;
    color: var(--COLOR4)
}

#game-screen > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2),
#game-screen > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1){
    display: flex;
    width: 90%;
    column-gap: 5px
}

#game-screen > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1), #game-screen > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1){
    height: 50px;
    width: 40%;
    background: url("../images/avatar2.svg") no-repeat center;
    background-size: contain;
}

#game-screen > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2),
#game-screen > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2){
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: .9rem;
}

#game-screen > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > span:nth-child(1),
#game-screen > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > span:nth-child(1){
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#game-screen > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > span:nth-child(2),
#game-screen > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(1) > div:nth-child(2) > span:nth-child(2){
    width: 95%;
    text-align: center;
}

#game-screen > div > div:nth-child(2){
    flex-grow: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#game-screen > div > div:nth-child(2) > div{
    width: 90%;
    height: 70%;
    max-width: 400px;
    max-height: 400px;
    position: relative;
}

#game-board{
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

#game-board td{
    width: calc(100% / 3);
    height: calc(100% / 3);
    border: medium solid var(--COLOR5);
    text-align: center;
    vertical-align: middle;
    font-family: njnaruto;
    font-size: 3rem;
    transition: all 250ms;
    cursor: pointer;
}

#game-board tr:first-child > td{border-top: none;}

#game-board tr:last-child > td{border-bottom: none;}

#game-board tr > td:first-child{border-left: none;}

#game-board tr > td:last-child{border-right: none;}

#game-screen > div > div:nth-child(2) > div > .blocker{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100000;
}

#game-screen > div > div:nth-child(2) > div > div.line{
    border-radius: 10px;
    position: absolute;
    background-color: tomato;
    max-width: 400px;
    max-height: 400px;
    z-index: 1000;
    transition-property: scale, height;
    transition: 900ms ease;
}

#game-screen > div > div:nth-child(2) > div > div.line.hr{
    width: 90%;
    height: 10px;
    scale: 0 1
}

#game-screen > div > div:nth-child(2) > div > div.line.vr{
    width: 10px; 
    height: 90%;
    scale: 1 0
}

#game-screen > div > div:nth-child(2) > div > div.line.d{
    width: 10px; 
    height: 0%
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(1){
    left: 50%;
    transform: translateX(-50%);
    top: 16.665%
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(2){
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(3){
    left: 50%;
    transform: translateX(-50%);
    top: 83.325%
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(4){
    top: 50%;
    transform: translateY(-50%);
    left: 16.665%
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(5){
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(6){
    top: 50%;
    transform: translateY(-50%);
    left: 83.325%
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(7){
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); 
}

#game-screen > div > div:nth-child(2) > div > div.line:nth-child(8){
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); 
}

#game-screen > div > div:nth-child(3) > button{
    background-color: transparent;
    color: #77b6d6;
    border: #4b7286 thin solid;
    padding: 5px;
    border-radius: 2.5px;
    position: relative;
}

#game-screen > div > div:nth-child(3) > button:nth-child(2) > div:nth-child(1){
    width: 17px;
    height: 17px;
    background-color: orangered;
    color: white;
    border-radius: 50%;
    font-size: .8rem;
    position: absolute;
    top: -25%;
    right: -25%;
    visibility: hidden;
    text-align: center;
}

#chatting-dialog, #gameover-dialog{
    width: 93%;
    padding: 7.5px;
}

#chatting-dialog{overflow: hidden}

#chatting-dialog > .remove-dialog, #gameover-dialog > .remove-dialog{
    background-color: transparent;
    color: #4b7286;
}

#chatting-dialog::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/chat-bg.svg') no-repeat;
    background-size: cover;
    z-index: -1000;
    opacity: .15;
}

#chatting-dialog > div:nth-child(2){
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    height: 70vh;
    max-height: 400px;
}

#messages-container{
    width: 100%;
    height: 330.5px;
    padding-right: 7.5px;
    overflow: hidden auto;
}

#messages-container > #scroll-reliever{
    position: absolute;
    right: 22px;
    transform: translateX(50%);
    bottom: 84.5px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 30px;
    background-color: transparent;
    color: #6594ac;
    z-index: 10000;
    cursor: pointer;
    font-size: 1.7rem;
    font-weight: 900;
    text-shadow: 0px 0px 17px #000;
    transition: 200ms ease;
}

#messages-container > #intersector{
    float: left;
    width: 100%;
    height: 1px;
}

#messages-container:empty::after{
    content: "No messages";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    color: var(--COLOR5);
    white-space: nowrap;
    font-size: 1.4rem;
    opacity: .5;
}

#chatting-dialog > div:nth-child(2) > div:nth-child(2){
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7.5px;
}

#message-entery{
    resize: none;
    width: 83.5%;
    height: 55px;
    padding: 7px 10px 2px;
    border-radius: 7px;
    flex-shrink: 2;
    background-color: #2a2a41;
    font-size: .9rem;
    color: var(--COLOR5);
    caret-color: #81c5e7;
}

#message-entery::selection{
    background-color: #71a8c4;
    color: #000000;
}

#message-entery::placeholder{
    color: rgb(139, 139, 139)
}

#send-message{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    background-color: #6594ac;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 200ms;
}

.message-box{
    width: 87%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    margin-block: 15px;
    color: var(--COLOR5);
    float: left;
}

.message-box > div:nth-child(1){
    width: 12%;
}

.message-box > div:nth-child(2){
    width: 88%;
}

.message-box > div:nth-child(1), .message-box > div:nth-child(2){
    overflow: hidden;
}

.message-box > div:nth-child(1) > img{
    width: 25px;
    height: auto;
    object-position: center;
    object-fit: cover;
    border-radius: 50%;
}

.message-box > div:nth-child(2){
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 10px 10px 20px;
    background-color: var(--COLOR2);
    border-bottom-right-radius: 10px;
    clip-path: polygon(0% 10%, 100% 10%, 100% 100%, 5% 100%, 5% 20%, 0% 10%, 10% 2%);
    position: relative;
}

.message-box > div:nth-child(2)::before{
    content: "";
    display: block;
    height: 10px;
    width: 100%;
}

.message-box > div:nth-child(2) > div:nth-child(2){
    margin-top: 5px;
    font-size: .75rem;
    display: flex;
    justify-content: flex-end;
    color: rgb(182, 182, 182);
}

.message-box > div:nth-child(2) > div:nth-child(1){
    height: fit-content;
    overflow-wrap: break-word;
    flex-grow: 2;
}

.player-message,
.player-message > div:nth-child(1) > img,
.player-message > div:nth-child(2) > div:nth-child(1),
.player-message > div:nth-child(2) > div:nth-child(2)
{
    transform: scaleX(-1);
}

.player-message{float: right;}

.player-message > div:nth-child(2){background-color: var(--COLOR1);}

#gameover-dialog{width: 80%}

#gameover-dialog > div:nth-child(2){margin-top: 40px}

#gameover-dialog > div:nth-child(2) > div:nth-child(1){
    font-size: 2.1rem;
    text-align: center;
    font-family: njnaruto;
    font-weight: 900;
    margin: auto;
    width: auto;
    height: auto;
    color: transparent;
    background-image: linear-gradient(90deg, var(--COLOR5), var(--COLOR3));
    background-clip: text;
    -webkit-background-clip: text;
}

#gameover-dialog > div:nth-child(2) > div:nth-child(2){
    color: transparent;
    font-size: 1.4rem;
    text-align: center;
    margin: auto;
    margin-block: 20px;
    font-weight: 900;
    width: fit-content;
    background-clip: text;
    -webkit-background-clip: text;
}

#gameover-dialog > div:nth-child(2) > div:nth-child(2).lose{
    background-image: linear-gradient(90deg, #9c27b0, orangered);
}

#gameover-dialog > div:nth-child(2) > div:nth-child(2).won{
    background-image: linear-gradient(90deg, #2196f3, lime);
}

#gameover-dialog > div:nth-child(2) > div:nth-child(2).tie{
    background-image: linear-gradient(90deg, rgb(104, 104, 104), #969696);
}

#gameover-dialog > div:nth-child(3){
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

#gameover-dialog > div:nth-child(3) button{
    padding: 5px 15px;
    font-size: 17px;
    border-radius: 3px;
    color: var(--COLOR5)
}

#gameover-dialog > div:nth-child(3) button:nth-child(1){
    background-color: rgba(128, 128, 128, .25);
}

#gameover-dialog > div:nth-child(3) button:nth-child(2){
    background-color: #4b7286;
}