*{
  user-select: none;
}


body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: white;
  overflow: hidden;
}

.container {  
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.top-bar {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 5px;
  height: 65px;
}

.left-bar {
  display: flex;
  border-radius: 20px;
  padding: 5px;
  background-color: #141414;
  width: 20%;
}

.bar-button {
  color: white;
  position: relative;
  flex-grow: 1; 
  flex-basis: auto; 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #272727;
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s; 
  margin: 5px;
}

.bar-button:hover {
  background-color: #c01b37;
}

.middle-bar{
  display: flex;
  border-radius: 20px;
  padding: 5px;
  background-color: #141414;
  justify-content: center;
  align-items: center;
}

.right-bar{
  display: flex;
  border-radius: 20px;
  padding: 5px;
  background-color: #141414;
  width: 15%;
}

.create-button{
  color: white;
  position: relative;
  flex-grow: 1; 
  flex-basis: auto; 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #660f1d;
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s; 
  margin: 5px;
}

.create-button:hover {
  background-color: #c01b37;
}

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

.title{
  display: flex;
  gap:15px;
  border-radius: 20px;
  padding: 0px 10px;
}

.neverdie {
  color: white;
}
.pvp {
  color: red;
}

.menu {
  flex: 1;
  height: 100%;
}
.menu::-webkit-scrollbar {
  display: none;
}

/************************************/
.Lobby-menu{
  flex: 1;
  background-color: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  border-radius: 20px;
  padding: 10px;
  gap: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 72.5vh;
}
.Lobby-menu::-webkit-scrollbar {
  display: none;
}
.Lobby-topbar{
  width: 100%;
  display: flex;
}

.search-bar {
  width: 25%;
  padding: 10px;
  display: flex;
}

.search-bar input {
  width: 100%;
  padding: 10px 40px 10px 10px; 
  border: 1px solid #121212;
  border-radius: 4px;
  background-color: #2c2f33;
  color: #ffffff;
  font-size: 16px;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><circle cx="10" cy="10" r="7" stroke="white" stroke-width="2" fill="none"/><line x1="14" y1="14" x2="20" y2="20" stroke="white" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px 20px;
}

.search-bar input::placeholder {
  color: #b9bbbe;
}

.lobby-bar {
  display: flex;
  background-color: #1f1e1e;
  border-radius: 10px;
  width: 99%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.527);
  gap: 10px; 
  height: 7vh;
  align-items: center; 
  justify-content: space-between;
  padding: 10px;
  font-size: 2em;
  font-weight: bold;
}

.left-bar-lobby {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  gap: 6px;
}

.right-bar-lobby {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pdp img {
  width: 4.7vw; 
  height: auto;
  border-radius: 15px;
  border: 2px solid red;
  margin-bottom: -5px; 
  box-shadow: 15px 0 20px rgba(0, 0, 0, 0.637); 
}

.group, .gamemode, .bet, .join-button {
  color: white;
  padding: 0px 5px;
  border-radius: 5px;
  text-align: center;
}

.join-button {
  background-color: #c01b37;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  padding: 0px 3vw;
  transition: background-color 0.3s;
  height: 6.5vh;
}

.join-button:hover {
  background-color: #660f1d;
}

#gamemode-fight{
  color: #a0172f;
}

.map-conteneur {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallelogram {
  width: 12vw;
  height: 9vh;
  transform: skew(-25deg);
  margin-right: 2vw;
  border: 2px solid #c01b37;
}

.lobby-nbplayer{
  font-size: 1em;
  color: darkslategray;
  margin-right:25px;
}
/************************************/

.Request-menu{
  flex: 1;
  background-color: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  border-radius: 20px;
  padding: 10px;
  gap: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 72.5vh;
}
.Request-menu::-webkit-scrollbar {
  display: none;
}

.no-request{
  color : darkslategray;
  font-size: 2.4em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80%;
}
/************************************/

.Game-Menu{
  flex: 1;
  background-color: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  border-radius: 20px;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 72.5vh;
  /* height: 100%; */
}
.Game-Menu::-webkit-scrollbar {
  display: none;
}

.game-top, .game-middle, .game-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-top {
  margin: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.game-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.game-team {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px;
  font-weight: bold;
  font-size: 1.2em;
  width: 14vw;
}

.game-team p, .game-team-count p {
  color: white;
  font-size: 1.2em;
  margin: 0;
}

.game-bottom {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top:5px;
}

.game-bottom::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #36050d, #681010, #36050d);
}

.startButton {
  color: #c01b37;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 1vh;
}

.startButton:hover { 
  color: #5a0d1a;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 1vh;
}

.readyButton{
  color: #587c28;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 1vh;
}

.readyButton:hover { 
  color: #2e3f14;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 1vh;
}

.game-icon{
  width:40px;
  height: auto;
}
.game-bar-left{
  border-left: 2px solid #519fdb;
}
.game-bar-right{
  border-right: 2px solid #df1f1f;
}
.game-team-count p{
  font-size: 1em;
  color: darkslategray;
}
.game-swapteam{
  background-color: #660f1d;
  padding:5px;
  border-radius: 10px;
  border: 2px solid #c01b37;
  box-shadow: 4px 4px 4px rgba(187, 1, 1, 0.247);
  transition: scale 0.3s;
}

.game-swapteam:hover{
  scale: 1.1;
  transition: scale 0.3s;
}

.game-player-contenair{
  display: flex;
  flex-direction: column;
  width:35vw;
  height: 52vh;
  border: 2px solid #202020;
  box-shadow: 4px 4px 4px rgba(34, 34, 34, 0.247);
  border-radius: 10px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 7px;
}

.game-player-contenair::-webkit-scrollbar {
  display: none;
}
.game-player{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px;
  border-radius: 10px;
  background-color: #1f1e1e;
  font-size: 1.4em;
  height: 6vh;
}

.game-player-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

#game-ply-pdp{
  width: 3.5vw;
  height: auto;
  border-radius: 5px;
  margin-top: 6px;
  border: 1px solid red;
}

.game-kick-button{
  background-color: #c01b37;
  box-shadow: 4px 4px 4px rgba(187, 1, 1, 0.247);
  border-radius: 3px;
  height: 4vh;
  display: flex;
  align-items: center;
  padding: 0px 8px;
}
.game-kick-button:hover{
  background-color: #660f1d;
}
.game-owner{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2vh;
}

#game-owner{
  width: auto;
  height: 2vh;
}

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

.invite-button{
  justify-content: center;
  background-color: #819171;
  box-shadow: 4px 4px 4px rgba(129, 145, 113, 0.247);
  border-radius: 3px;
  width: 8vw;
  height: 5vh;
  display: flex;
  align-items: center;
  padding: 0px 8px;
  transition: scale 0.3s;
}

.invite-button:hover{
  scale: 1.1;
  transition: scale 0.3s;
}

/************************************/

.create-menu{
    flex: 1;
    background-color: #141414;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    border-radius: 20px;
    padding: 10px;
    gap: 15px;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 72.5vh;
}

.create-contenair {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.create-menu-border{
  width: 35vw;
  height:35vw;
  border: 2px solid #202020;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.middle-bar.create-menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.create-title{
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #202020;
  border-radius: 10px;
}


.map-selection {
  position: relative;
  width: 300px;
  height: 200px;
}

#map-image {
  width: 100%;
  height: 100%;
}

.arrow-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2em;
  z-index: 1;
  cursor: pointer;
  filter:invert(100%);
}

#prev-map {
  left: 5px; 
}

#next-map {
  right: 5px;
}

.arrow-button img {
  width: 30px;
  height: 30px;
}

.create-menu-content{
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.create-options{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.weapon-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh;
  overflow: hidden;
}

#weapon-dropdown {
  width: 20vw;
  max-width: 300px; 
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #c01b37;
  font-size: 1em;
  background-color: #1f1e1e;
  color: white;
  appearance: none;
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M2 0L0 2h4zM2 5L0 3h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

#weapon-dropdown option {
  background-color: #1f1e1e;
  color: white;
}

.bet-selection {
  display: flex;
  align-items: center;
  height:5vh;
  overflow: hidden;
  gap: 10px;
  margin-left: 8px;
}

.bet-selection h1 {
  font-size: 1.5em;
}

.round-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh;
  overflow: hidden;
}

#bet {
  height: 2vh;
  width: 15vw;
  max-width: 15vw;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #c01b37;
  font-size: 1em;
  background-color: #1f1e1e;
  color: white;
  text-align: center;
}

#rounds{
  width: 14.5vw;
  max-width: 300px; 
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #c01b37;
  font-size: 1em;
  background-color: #1f1e1e;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  color: white;
}

.settings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid #202020;
  border-radius: 5px;
  width: 20vw;
  padding: 10px;
  background-color: #1f1e1e;
  gap: 10px;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.settings-item p {
  margin: 0;
  color: white;
  font-size: 1em;
}

.settings-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.create-gamemode{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5vh;
  overflow: hidden;
}
#gamemode-dropdown{
  width: 20vw;
  max-width: 300px; 
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #c01b37;
  font-size: 1em;
  background-color: #1f1e1e;
  color: white;
  appearance: none;
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M2 0L0 2h4zM2 5L0 3h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

#gamemode-dropdown option {
  background-color: #1f1e1e;
  color: white;
}
.button-create{
  margin-top: 5vh;
}
.button-create p {
  margin: 0;
  font-size: 1em;
}

/************************************/

.invite-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background-color: #1f1e1e;
  border: 1px solid #23272a;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  color: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invite-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.invite-title h1 {
  font-size: 24px;
  margin: 0;
  color: #ffffff;
}

.invite-close img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.invite-middle {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invite-middle p {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #b9bbbe;
}

.invite-middle input {
  width: 100%;
  padding: 10px;
  border: 1px solid #1f1e1e;
  border-radius: 4px;
  background-color: #23272a;
  color: #ffffff;
  font-size: 16px;
}

.invite-middle input::placeholder {
  color: #b9bbbe;
}
.invite-bottom{
  margin-top: 20px;
}

/************************************/
.duel-contenair{
  top: 5px;
  position: absolute;
  display: flex;
  justify-content: center;
}

.duel-hud{
  display: flex;;
  width: 15%;
  gap: 3vw;
  height: 5%;
}

.hudduel-conteinair{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 20vh; /* Fix the height */
}

.score-contenair{
  display:flex;
  width: 100%;
  height: 6vh;
}

.team-contenair {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3em;
}
.blue-team{
  background: linear-gradient(to right, #519fdb56, #519fdb);
}
.red-team{
  background: linear-gradient(to left, #df1f1f56, #df1f1f);
}


.score{
  background-color: #641515;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reverse p{
  transform: skew(25deg);
}
.reverse{
  transform: skew(-25deg);
}

.reverse2{
  transform: skew(25deg);
}
.reverse2 p{
  transform: skew(-25deg);
}

.score-track {
  display: flex;
  height: 4vh;
  width:  15vw;
  margin-top:1vh;
  flex-wrap: wrap;
  justify-content:space-evenly;
}

.score p {
  font-size: 1.5em;
  color: white;
}

.losange {
  width: 1.2vh;
  height: 1.2vh;
  transform: rotate(45deg);
}

.filled-red{
  background-color: #c01b37;
  border: 2px solid #c01b37;
}

.filled-blue{
  background-color: #519fdb;
  border: 2px solid #519fdb;
}

.blue{
  border: 2px solid #519fdb;
}
.red{
  border: 2px solid #c01b37;
}

/************************************/

.decompte {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  text-align: center;
}

.decompte-container {
  padding: 20px;
  border-radius: 50%; 
  width: 130px; 
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.decompte-text h1 {
  font-size: 8em; 
  color: white;
  margin: 0;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  animation: countdown 1s infinite;
}

@keyframes countdown {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.notify-handler{
  position: fixed;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  text-align: center;
  font-size: 2em;
  color : red;
  background-color: #1f1e1ecb;
}