.flexy{
    display: flex;
    justify-content: center;
    align-items: center;
}


.entity-bar1{
       border-start-end-radius: 5rem;
    border-end-end-radius: 5rem;
    background: #a7a7a700;
    position: absolute;
    z-index: 99;
    width: 100vw;
    height: 10vh;
    bottom: 0px;
    display: none;
    justify-content: space-around;
    align-items: center;
}


#IBContaner{
   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1;
 }


#IBContaner:hover{
    background: radial-gradient(#aeaeae00, #3100007d);
    box-shadow: 0px 4px 17px #000;
 }


#IBContaner> div{
   font-family: math;
    position: relative;
    width: 100%;
    height: 17%;
    bottom: 12%;
    font-size: clamp(44%, 55%, 2vh);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
    color: #ffd0be;
    background: linear-gradient(0deg, #101010, #525252);
}

img{
    max-height: 100%;
}


#insideBar{
       border-start-end-radius: 5rem;
    border-end-end-radius: 5rem;
    width: 100%;
    box-shadow: inset 0px 2px 0px #0e0e0e;
    background: linear-gradient(0deg, #7a7979, #d9cfad);
    padding-right: 27vw;
    overflow-x: scroll;
    display: flex;
    height: 100%;
    place-items: center;
    gap: 3.3vw;
}


#tarImg{
  right: 0;
    align-items: center;
    background: linear-gradient(-180deg, #000000, #6a6a6a);
    box-shadow: inset 0px -5px 10px #0c0c0c, inset 0px 6px 11px #424242, 0px 0px 11px #000;
    border-start-start-radius: 5rem;
    border-end-start-radius: 5rem;
    outline: 2px solid #c44747;
    outline-offset: 3px;
    justify-content: center;
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    min-width: 25%;
    display: flex;
}




#insideBar > img{
         aspect-ratio: 1;
    height: 9vh;
    border-radius: 1rem;

}

#entity-bar2{
     width: min(13vw, 50px);
    height: clamp(65vh, 100vw, 80vh);
    right: 0;
    bottom: 18vh;
    position: absolute;
    display: none;
    overflow: visible;
    filter: drop-shadow(-1px 0px 5px #000);
}

.entity-bar2{
    pointer-events: none;
    right: 0;
    height: 91%;
    width: 100%;
    display: flex;
    background: #151515;
    z-index: 7;
    position: absolute;
    border-start-end-radius: 0;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 6vh 0vh;
    clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 90%);
}





.entity-bar2 > img{
    height: calc(100% / 11);
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 3rem;
    filter: contrast(0.1) brightness(0.5);
}

#TTT{
    position: absolute;
    top: 10%;
    right: 100%;
    width: 0px;
    border-top: 8px solid #ffffff00;
    border-right: 8px solid #ffffff00;
    border-left: 10px solid #ffffff;
    border-bottom: 8px solid transparent;
    transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



#oppN{
    position: absolute;
    top: 0;
    left: 0;
    background: #232323;
    border: 2px dotted #757575;
    border-left: none;
    color: #ea5e5e;
    font-weight: bold;
    font-size: min(4vw, 15px);
    padding: 1vw 3vw;
    border-start-end-radius: 1rem;
    border-end-end-radius: 1rem;
}



/* for num diget */
  #display-container { 
    display: flex;
    gap: 15px;
    position: absolute;
    z-index: 9;
    height: 100%;
    justify-content: center;
    align-items: center;
   }

  #DigtC{    
    border-bottom: 0.1px solid #000000;
    justify-content: center;
    align-items: center;
    display: flex;
    background: #252525;
    box-shadow: inset 0px -5px 10px #000000, inset 0px 6px 11px #737373;
    border-radius: 4rem;
    /* list-style: none; */
    width: 80%;
    max-width: 125px;
    aspect-ratio: 1;
    text-align: center;
    position: relative;
}
  /* SVG Styling */
  .digit-svg { width:min(4vw, 13px);  }
  .segment { fill: #1a1a1a; transition: fill 0.1s; } /* Off state */
  .on { fill: #ff4136; filter: drop-shadow(0 0 5px #ff4136); } /* On state (Matrix Green) */








  /* start end game  */
  #SPcontainer{
        transform: translate(-2vw, -3vh);
    width: 85vw;
    height: 85vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 4rem;
    border-start-start-radius: .5rem;
    background: linear-gradient(25deg, #000000de, #c2c2c28a), url(./public/512-transparent.png) no-repeat 45% 50% fixed, radial-gradient(circle at 75% 10%, #004aff 19%, transparent 28%), radial-gradient(circle at 33% 90%, #ff1919 20%, transparent 29%), #000;
    box-shadow: rgba(0, 0, 0, 0.76) -3.5vw 2.5vh 30px;
    animation: SP 10s ease-in 0s;

  }

@keyframes SP{
  50%{ transform: translate(2vw, 5vh);}
  100%{ transform: translate(-2vw, -3vh);}
}

  #VS{
    font-size: min(30px, 9vw);
    color: #e1e1e1;
    letter-spacing: 2px;
    text-shadow: 0px 0px 2px #797979, 0px 0px 3px #ffffff;
    font-weight: bolder;
  }

.PNJ{
   color: #d8d8d8;
    text-shadow: 2px 3px 4px #000;
    font-weight: bold;
    letter-spacing: 2px;
    border-start-start-radius: .5rem;
    border-start-end-radius: 1rem;
    border-end-start-radius: 0.2rem;
    filter: drop-shadow(-5px 11px 15px #000);
    border-end-end-radius: 1rem;
    background: linear-gradient(90deg, #232323 4%, #2ea6fb);
    left: -5vw;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7%;
}

.PNJ::before{
    left: 0px;
    top: 5.8vh;
    position: absolute;
    z-index: -1;
    content: "";
    width: 1px;
    height: 1px;
    border-left: none;
    border-top: none;
    border-right: 5.1vw solid #232323;
    border-bottom: 1.5vh solid #00000000;
}



.looser{
 background: linear-gradient(90deg, #232323 4%, #fb2e2e);
}


#waitingF{
      top: 0;
    display: none;
    opacity: 0;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    height: 100%;
    position: fixed;
    width: 100%;
    transition: all 1s;
    background: linear-gradient(0deg, black, #311200b8);
    z-index: 999;
}

#exitWF{
    font-size: 9vw;
    color: #ff693f;
    letter-spacing: 2px;
    text-shadow: 1px 2px 9px #000, 1px 2px 3px #000;
    font-weight: bolder;
}

#delFriend{
    color: #8a8a8a;
    background: #5b0e04;
    width: 77%;
    text-align: center;
    display: flex;
    height: 10%;
    justify-content: center;
    align-items: center;
    border-radius: .3rem;
}

#closeF{
   color: #d9a300;
    background: #2a2a2a;
    border-radius: 2rem;
    width: 95px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
}

.invited{
    color: #fff;
    background: repeating-linear-gradient(45deg, black, #0c3900 30px);
    width: 98%;
    text-align: center;
    display: flex;
    height: 20%;
    justify-content: center;
    align-items: center;
    border-radius: .3rem;
}



#playAgainHTML{
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
        background: linear-gradient(90deg, black, #5b2a00, black);
    z-index: 999;
    position: absolute;
}

#playAgainHTML>div{
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 2rem;
    width: 30vw;
    height: 7vh;
    outline: 2px solid #ff1d11;
    outline-offset: 4px;
}


#REPLAY{
    color: yellow;
    font-size: min(30px, 9vw);
    font-weight: bold;
    background: linear-gradient(0deg, #1b15008f, #00000017);
    width: 50%;
    padding: 3px;
    text-align: center;
    border-radius: 1rem;
}











#talkBAR{
    display: flex;
    transition: all .5s cubic-bezier(0.86, 0, 0.07, 1);
    visibility: hidden;
    opacity: 0;
     width: 80%;
    border-radius: 3rem;
    height: 5vh;
    background: linear-gradient(0deg, #777777, #dedede00);
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    top: -7vh;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0px 0px 2px #ff1d11;
}

#talkBAR>div{
    display: flex;
    justify-content: center;
    align-items: center;
}

#talkBTN{
    border: 1px solid #8b8b8b;
    width: max(4vw, 33px);
    height: max(3vh, 20px);
    font-size: 15px;
    font-weight: bold;
    background: linear-gradient(0deg, #171717, #696969);
    color: #fff;
    letter-spacing: 1px;
    border-radius: 1rem;
    border-end-start-radius: 0rem;
    position: absolute;
    justify-content: center;
    align-items: center;
    display: flex;
    left: 1px;
    top: -6vh;
}



.showMSG{
    display: flex;
    opacity: 0;
    width: 100vw;
    text-align: center;
    display: flex;
    justify-content: center;
    font-size:  10px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 60vh;
    animation: talkMSG 1s linear 0s;
}

@keyframes talkMSG{
    0%{  opacity: 0;  top: 60vh; font-size: 10px; }
    20%{ opacity: .3; top: 55vh; font-size: 20px; }
    40%{ opacity: .6; top: 50vh; font-size: 30px; }
    60%{ opacity: .9; top: 45vh; font-size: 25px; }
    80%{ opacity: .3; top: 40vh; font-size: 15px; }
    100%{ opacity: 0; top: 35vh; font-size: 10px; }
}