body{
    background-color:#080015;
    overflow:hidden;
}
@font-face {
  font-family: "Lol";
  src: url('BeaufortforLOL-Regular.otf');}
@font-face {
  font-family: "Lolb";
  src: url('BeaufortforLOL-Bold.otf');}
@font-face {
  font-family: "Loln";
  src: url('Spiegel-Regular.otf');}

      
.main{
    background-image: url("Wallpaper.jpg");
    color:white;
    width : 100%;
    height : 100%;
    position:absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    left:0;
    top:0;
}
.maincontainer{
    background-color:rgb(1, 10, 19);
    width : 70%;
    height : 70%;
    border-radius: 0;

    border : solid 1px goldenrod;
}
.formcontainer{
  width : 100%;
  height : 100%;
  display : flex;
    align-items: center;
    justify-content: center;
  flex-direction: column;
}
.formulaire{
    background:linear-gradient(62deg, rgba(73, 156, 234, 0.11) 0%, rgba(26, 188, 188, 0.192) 100%);
    width : 12%;
    height : 12%;
    position:absolute;
    display : flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 500;
    border : 2px solid rgba(218, 165, 32, 0.418);
    background: linear-gradient(130deg, #003b6bb9, #0337a77a, #003b6bb9,#0337a77a, #003b6bb9,#0337a77a);
    background-size: 300% 300%;
    -webkit-animation: Animation 2s  infinite linear;
    -moz-animation: Animation 2s  infinite linear;
    animation: Animation 2s  infinite linear;
}
.formulaire:hover{
  background: linear-gradient(130deg, #1973bd, #234da8, #1973bd,#234da8, #1973bd,#234da8);
  background-size: 300% 300%;
    -webkit-animation: Animation 1s  infinite linear;
    -moz-animation: Animation 1s  infinite linear;
    animation: Animation 1s  infinite linear;
}
@-webkit-keyframes Animation {
    0%{background-position:0% 0%}
    99.99%{background-position:60% 60%}
    100%{background-position:0% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:0% 0%}
    99.99%{background-position:60% 60%}
    100%{background-position:0% 0%}
}
@keyframes Animation { 
    0%{background-position:0% 0%}
    99.999999%{background-position:60% 60%}
    100%{background-position:0% 0%}
}
.boutonglow{
  background: linear-gradient(130deg, #003b6bb9, #0337a77a, #003b6bb9,#0337a77a, #003b6bb9,#0337a77a);
    background-size: 300% 300%;
    -webkit-animation: Animation 2s  infinite linear;
    -moz-animation: Animation 2s  infinite linear;
    animation: Animation 2s  infinite linear;
}
.boutonglow:hover{
  background: linear-gradient(130deg, #1973bd, #234da8, #1973bd,#234da8, #1973bd,#234da8);
  background-size: 300% 300%;
    -webkit-animation: Animation 1s  infinite linear;
    -moz-animation: Animation 1s  infinite linear;
    animation: Animation 1s  infinite linear;
}
.zindex{
  z-index:99999;
}
.listejoueurs{
    width:11%;
    height:70%;
    background-color:rgb(1, 10, 19);
    border-radius: 0;
    border : solid 1px goldenrod;
    position:relative;
}
.flex{
    display:flex;
    height:100%;
    gap:1%;
    align-items: center;
    justify-content: center;
    z-index: -50;
}
.chatroom{
    width:13%;
    height:70%;
    background-color:rgb(1, 10, 19);
    border-radius: 0;
    border : solid 1px goldenrod;
    position:relative;
    z-index: 0;
}
.chatroom > .container{
    display: flex;
    flex-direction: column;
    width:100%;
    height:95%;
    top:1%;
    position:absolute;
}
.input{
    background-color : #080015;
    border-top : solid 1px rgba(218, 165, 32, 0.747);
    border-bottom : solid 1px rgba(218, 165, 32, 0.747);
    border-right:none;
    border-left:none;
    color : white;
    width:100%;
    border-radius: 0;
    font-family: "Lol";
}
#messages{
    
    height:85% ;
    width:100%;
    overflow-y:scroll;
    overflow-x: hidden;
    padding:0;
    font-family: "Loln";
}
#messages > li {
  padding-left: 5px;
}
ul{
    list-style: none;
}
::-webkit-scrollbar {
    width: 8px;
    position: relative ;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #101010; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius:4px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  span{
    text-align: center;
    font-family: "Lolb";
    font-size: 4vh;
    color:rgb(200, 155, 60);
  }
  .logo{
    position: absolute;
    top:1%;
    left:4%;
    background-image: url('Logo.png');
    height: 10vh;
    width:10vh;
    z-index: 500;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
  }

  .titre {
    text-align: center;
    position: absolute;
    top: 1%;
    left: 50%;
    height: 12vh;
    width: 70vw;
    transform: translateX(-50%);
    font-family: "Lol";
    font-size: 10vh;
    color: rgb(240, 195, 100); /* Couleur jaune clair */
    -webkit-text-fill-color: rgb(240, 195, 100); /* Couleur du texte */
    -webkit-text-stroke: 3px rgba(0, 0, 0, 0.3); /* Contour noir */
    text-shadow: #000 1px 0 10px;
    filter: brightness(1.0) contrast(1.1); /* Ajustements de luminosité et contraste */
}

  li{
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .formulaire > input{
    width:50%;
    height:2vh;
  }
  .formulaire > span{
    font-size: 2vh;
  }
  
  .bouton{
    display:flex; 
    gap:5px;
  }
  .bouton > button{
    background-color: #080015;
    color:white;
    border-radius: 10px;
    text-decoration: none;
    border:none;
    height:25px;
    cursor: pointer;
    transition: all 0.1s;
    font-family: "Lol";
    font-size:1.2vh;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;

  }
  .bouton > button:hover{
    background-color: #151515;
    transform : scale(1.1);
    
  }
.disparaitre{
  animation: disp 0.5s forwards !important;
  opacity: 1;
  transform: scale(1) ;  
  display:block;
  animation-fill-mode: forwards;
}
@keyframes disp{
  0%{
    opacity: 1;
    transform: scale(1) ;
    display:flex;
  }
  99%{
    opacity: 0;
    transform: scale(0) ;
    display:flex;
  }
  100%{
    opacity: 0;
    transform: scale(0) ;
    display:none;
  }
}
.listejoueurs > .container{
  display: flex;
  flex-direction: column;
  width:100%;
  height:95%;
  top:1%;
  position:absolute;
  font-family: "Lolb";
  font-size: 1.5vh;
  color: rgb(240,220,180);
}
.listejoueurs > .container > #joueursliste > #userList > li {
  padding-bottom: 10%;
}

#userList{
  padding-left: 10%;
}
.règles{
  position: absolute;
  text-align: left;
  width:13%;
  bottom:2%;
  left: 2%;
  font-family: "Lol";  
  font-size: 3vh;
  color:rgb(240, 195, 100);
  text-shadow: #000 1px 0 10px;
  cursor: default;
}
.règle{
  position: absolute;
  width:80%;
  height:80%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  z-index: 99999;
  transition: all 0.25s;
  border-radius: 0;
  background-color:rgb(1, 10, 19);
  border : 1px solid rgb(240, 195, 100);
  box-shadow: #101010 0 0 20px;
  display : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:5%;
  transition-delay: 0.1s;
}
.règles:hover + .règle{
  transform:translate(-50%,-50%) scale(1);
}
.règle:hover{
  transform:translate(-50%,-50%) scale(1);
}
.règle > span{
  color:white;
  font-family: "Loln";
  text-align: left;
  font-size: 2.2vh;
  width : 90%;
  height : 8%;
  align-items: center;
  display:flex;
  gap : 2%;
}
img{
  height:100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
}
.boutonlancement{
  height:15%;
  width:15%;
  display:none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px 6px #398092;
  border-radius: 5px;
  transition: all 0.25s;
  font-size:4vh;
  font-family: "Lolb";
  color: rgb(240,220,180);
  cursor: pointer;
  background: linear-gradient(130deg, #003b6bb9, #0337a77a, #003b6bb9,#0337a77a, #003b6bb9,#0337a77a);
    background-size: 300% 300%;
    -webkit-animation: Animation 2s  infinite linear;
    -moz-animation: Animation 2s  infinite linear;
    animation: Animation 2s  infinite linear;
}

.boutonlancement:hover{
  background: linear-gradient(130deg, #1973bd, #234da8, #1973bd,#234da8, #1973bd,#234da8);
  background-size: 300% 300%;
    -webkit-animation: Animation 0.8s  infinite linear;
    -moz-animation: Animation 0.8s  infinite linear;
    animation: Animation 0.8s  infinite linear;
  transform : scale(1.1)
}
@keyframes shadows{
  0%{
    box-shadow: 0 0 8px 6px #398092;
  }
  50%{
    box-shadow: 0 0 8px 6px #1c8cb8;
  }
  0%{
    box-shadow: 0 0 8px 6px #398092;
  }
}
.attente{
  font-size: 3vh;
  display:none;
  font-family: "Lol";
  color: rgb(240,220,180);
}
.p1{
  color: rgb(240,220,180) !important;
  animation : points 3s linear infinite;
}
.p2{
  color: rgb(240,220,180) !important;
  animation : points 3s linear infinite;
  animation-delay: 1s;
}
.p3{
  color: rgb(240,220,180) !important;
  animation : points 3s linear infinite;
  animation-delay: 2s;
}
@keyframes points{
  0%{
    opacity:1 ;
  }
  33%{
    opacity:0 ;
  }
  66%{
    opacity:1 ;
  }
  100%{
    opacity:1 ;
  }
}
.equipes{
  width:40vw;
  height:40vh;
  background-color:#050010;
  border-radius:0;
  border : 3px solid rgb(240, 195, 100,0.6);
  display:none;
  overflow:hidden;
  position:relative;
}
.equipe1{
  width:50%;
}
.equipe2{
  width:50%;
}
.joueurs{
  border : 1px solid rgb(240, 195, 100,0.5);
  height:20%;
  width:20vw;
  display:flex;
  align-items: center;
  color:white;
  justify-content: flex-start;
}
.equipe1 > .joueurs{
    justify-content: left;
}
.equipe2 > .joueurs{
    justify-content: right;
}
.VS{
  position:absolute;
  color: rgb(240, 195, 100,0.8);
  font-size:5vh;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.joueurs > img{
  height:50%;
  padding-right:10px;
  padding-left:10px;
}
.joueurs{
  font-size:2.2vmin;
  font-family: "Lol";
  color: rgb(240,220,180);
}
.equipe1 > .joueurs > .cont > .role{
  right: 0;
  position: relative;
  padding-right: 2vw;
  text-align:right;
}
.cont{
  display:flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
}
.equipe2 > .joueurs > .cont > .role{
  left: 0;
  position: relative;
  padding-left: 2vw;
}
.boutonfin{
  height:10%;
  width:10%;
  background-color:#202020;
  display:none;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 8px 6px #398092;
  border-radius: 5px;
  transition: all 0.25s;
  font-size:1vh;
  font-family: "Lolb";
  color: rgb(240,220,180);
  cursor: pointer;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index: 999;
}
.boutonfin:hover{
  height:10.8%;
  width:10.8%;
}

.formscontain{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:50%;
  justify-content: space-around;
}
.ligneform{
  display:flex;
  gap:10px;
  width:100%;
  justify-content : center;
  align-items:center;
  font-size: 1vh;
  height:18%;
}
p{
  padding:0;
  margin:0;
}
select{
  color: rgb(240,220,180);
  background-color:#222;
  border:none;
  font-size:2vh;
  font-family: "Lol";
}
.flexhor{
  display:flex;
  width:100%;
  border: 2px solid rgb(240, 195, 100,0.6);
  font-size: 1vh;
  height:72%;

}
.flexvert{
  display:none;
  flex-direction:column;
  gap:10px;
  width:50%;
  height:50%;
  justify-content : center;
  align-items:center;
  border-radius:3.2vh;
  overflow:hidden;
  background-color:#050010;
  border : 3px solid rgb(240, 195, 100,0.6);
    
}
.ligneform > span{
  font-size: 2vh !important;
}
form{
  padding: 0;
  margin:0;
  display:flex;
  justify-content: space-around;
  justify-content : center;
  align-items:center;
}
.boutonvalidation{
  height:15%;
  width: 20%;
  background-color:#202020;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 8px 6px #398092;
  border-radius: 5px;
  transition: all 0.25s;
  font-family: "Lolb";
  color: rgb(240,220,180);
  cursor: pointer;
  margin-bottom: 8px;
  font-size: 2vh
}
.boutonvalidation:hover{
  transform:scale(1.1);
}
.formscontain1{
  display:none;
  background-color:#050010;
  border : 3px solid rgb(240, 195, 100,0.6);
  border-radius:3.2vh;
  width:70%;
  height:80%;
  background-size: 100% 100%;
  justify-content: center; 
  align-items: flex-end;
}
.blueside{
  background-image: url(blueside.png);
}
.redside{
  background-image: url(redside.png);
}
.ligneform1{
  display:flex;
  justify-content: space-evenly;
  width: 100%;
}
p{
  padding:0;
  margin:0;
}
.boutonvalider{
  height:10%;
  width: 16%;
  background-color:#202020;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 8px 6px #398092;
  border-radius: 5px;
  transition: all 0.25s;
  font-family: "Lolb";
  color: rgb(240,220,180);
  cursor: pointer;
  margin-bottom: 8px;
  font-size: 2vh;

}
.ligneform1 > span{
  font-size: 2vh !important;
}
.boutonvalider:hover{
  transform: scale(1.08);
}
.boutonreveal{
  height:5%;
  width: 8%;
  background-color:#202020;
  display:none;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 8px 6px #398092;
  border-radius: 5px;
  transition: all 0.25s;
  font-family: "Lolb";
  color: rgb(240,220,180);
  cursor: pointer;
  margin-top: 20px;
  font-size: 2vh
}
.boutonreveal:hover{
  transform: scale(1.08);
}
.attente > .joueursprets {
  font-size: 3vh !important;
  font-family: "Lol" !important;
  color: rgb(240,220,180) !important;
}
.attente > .nbjoueurs{
  font-size: 3vh !important;
  font-family: "Lol" !important;
  color: rgb(240,220,180) !important;
}
@keyframes fadein{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.role1.fade{
  opacity: 0;
  animation: fadein 1s ease 1s forwards;

}
.role2.fade{
  opacity: 0;
  animation: fadein 1s ease 2s forwards;

}
.role3.fade{
  opacity: 0;
  animation: fadein 1s ease 3s forwards;

}
.role4.fade{
  opacity: 0;
  animation: fadein 1s ease 4s forwards;

}
.role5.fade{
  opacity: 0;
  animation: fadein 1s ease 5s forwards;

}
.role6.fade{
  opacity: 0;
  animation: fadein 1s ease 6s forwards;

}
.role7.fade{
  opacity: 0;
  animation: fadein 1s ease 7s forwards;

}
.role8.fade{
  opacity: 0;
  animation: fadein 1s ease 8s forwards;

}
.role9.fade{
  opacity: 0;
  animation: fadein 1s ease 9s forwards;

}
.role10.fade{
  opacity: 0;
  animation: fadein 1s ease 10s forwards;

}
.tpsgame{
  background-color : #222;
  border : solid 1px #404040;
  color : rgb(240,220,180);
  width:5%;
  font-family: "Lol";
  font-size: 1.5vh !important;
  transform: translateY(5%);
}
#tpsgamepoint{
  color : rgb(240,220,180);
}

.points{
  width:60vw;
  height:60vh;
  background-color:#050010;
  border-radius:0;
  border : 3px solid rgb(240, 195, 100,0.6);
  display:none;
  overflow:hidden;
  position:relative;
}

.joueurpoints{
  border : 1px solid rgb(240, 195, 100,0.5);
  height:20%;
  width:30vw;
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  gap : 5%;

}
.equipe1 > .joueurpoints{
    justify-content: left;
}
.equipe2 > .joueurpoints{
    justify-content: right;
}
#boutonpoints{
  z-index: 500;
}
.pseudal{
  font-family: "Lolb";
  font-size: 3vh;
  color:rgb(200, 155, 60);
  padding:20px;
}
.rolepoint{
  color : rgb(240,220,180);
  font-family: "Lol";
  font-size: 3vh
}
.pointjoueur{
  color : rgb(240,220,180);
  font-family: "Lol";
  font-size: 3vh
}
.detailpoints{
  background-color:#222;
  width:fit-content;
  border:2px solid rgb(240, 195, 100);
  border-radius: 15px;
  opacity: 0;
  display:none; 
  position:absolute;
  transform:translateY(110%);
  color : rgb(240,220,180);
  font-family: "Lol";
  font-size: 2vh;
  padding: 5px;
}
.pointjoueur:hover + .detailpoints{
  opacity: 1;
  display:block;
}
.bas{
  transform:translateY(-110%) !important;
}
.restart{
    height:5%;
    width: 6.5%;
    background-color:#202020;
    display:none;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 8px 6px #398092;
    border-radius: 5px;
    transition: all 0.25s;
    font-family: "Lolb";
    color: rgb(240,220,180);
    cursor: pointer;
    font-size: 2vh;
    z-index:5000;
    position:absolute;
    top:5%;
    right:5%;
  }
  .restart:hover{
    transform: scale(1.08);
}
.classementcontainer{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:fit-content;
}
.classement{
  position: absolute;
  width:150%;
  height:130%;
  top:50%;
  left:100%;
  transform:translate(-65%,-87%) scale(0);
  z-index: 999;
  transition: all 0.25s;
  border-radius: 0;
  background-color:#050010;
  border : 2px solid rgba(240, 196, 100, 0.767);
  box-shadow: #101010 0 0 20px;
  transition-delay: 0.1s;
}
.couronne:hover + .classement{
  transform:translate(0%,-50%) scale(1);
}
.classement:hover{
  transform:translate(0%,-50%) scale(1);
}
#leaders{
  font-size: 1.8vh;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 95%;
  padding:0;
  width: 90%;
  padding-left:5%;
}
#lesleaders{
  padding-top: 1.8vh;
}
.playerguess{
  width : 6vmin;
  height : 2vmin;
  color: white;
  font-size:2vmin;
  text-align:center;
  position:absolute;
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 4 colonnes de largeur égale */
  gap: 10px;
}
.picturerole{
  width:6vmin;
  height:6vmin;
  background-color : #a38226;
  background-image : url("https://cdn-icons-png.freepik.com/512/4409/4409005.png?ga=GA1.1.1690722846.1721491085");
  background-size:cover;
  border-radius : 50%;
  border : 2px solid #a38226;
  text-align:left;
  z-index:0;
  cursor:pointer;
  transition : all 0.3s;
}
.picturerole::after{
  width: 0;
  height: 0;
  border-left: 3vmin solid transparent;
  border-right: 3vmin solid transparent;
  border-top: 6vmin solid #a38226;
  content : "";
  transform : translate(1px,60%);
  position : absolute;
  z-index:-2;
}
.picturerole::before{
  width: 0;
  height: 0;
  border-left: calc(3vmin - 0px) solid transparent;
  border-right: calc(3vmin - 0px) solid transparent;
  border-top: 6vmin solid #010a13;
  content : "";
  transform : translate(+1px,calc(60% - 4px));
  position : absolute;
  z-index:-1;
}
.picturerole:hover{
  box-shadow: 0 0 8px 6px #398092;
}
.décalage{
    transform:translateX(0vmin);
}
.options{
  transform : translate(0,0);
  display:flex;
  align-items: center;
  justify-content: center;
}
.options::before{
  display:none;
}
.options::after{
  display:none;
}
.hidden{
  display:none
}
.blueside > .guess1{
  top:30.5vh;
  left:34.5vw;
}
.blueside > .guess2{
  top:37.5vh;
  left:39.5vw;
}
.blueside > .guess3{
  top:43.5vh;
  left:45vw;
}
.blueside > .guess4{
  top: 56.5vh;
  left:58.5vw;
}
.blueside > .guess5{
  top: 56.8vh;
  left:54.5vw;
}
.redside > .guess1{
  top:27.5vh;
  left:38vw;
}
.redside > .guess2{
  top:32.5vh;
  left:46vw;
}
.redside > .guess3{
  top:38.5vh;
  left:50vw;
}
.redside > .guess4{
  top: 50.5vh;
  left:62vw;
}
.redside > .guess5{
  top: 55vh;
  left:65vw;
}
.nomjoueurs{
  font-size: 1.5vmin !important;
  color: rgb(236, 203, 130) !important;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-100%);
}
.picturerole.impo{
  background-image : url(imposteur.png) !important;
  background-size: 100% !important;
}
.picturerole.face{
  background-image : url(face.jpg) !important;
  background-size: 100% !important;
}
.picturerole.hero{
  background-image : url(faker.jpg) !important;
  background-size: 100% !important;
}
.picturerole.serp{
  background-image : url(serpentin.jpg) !important;
  background-size: 100% !important;
}
.picturerole.maso{
  background-image : url(maso.png) !important;
  background-size: 100% !important;
}
.picturerole.chovy{
  background-image : url(chovy.png) !important;
  background-size: cover !important;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-position: center;
}
.ChoixDesRoles{
  display:none;
  margin : 50px;
  flex-wrap: wrap;
  gap: 10px;
}
.role-option {
  display: flex;
  Justify-content : flex-start;
  padding:10px;
}
.role-label {
  margin-left: 5px;
  color:rgb(240,220,180);
  font-size:2vh;
  font-family: "Lol";
}
.choixroles{
  flex-direction:column;
  display: flex;
  align-items: flex-start
}
#Lazone{
  position:fixed;
  bottom: 1%;
  right: 1%;
  display: flex;
  transform: scale(0.5);
}