.roulette-gameplay-lobby {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* Top-bar div CSS */
.top-bar {
  /* Display Settings */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Size */
  width: 100%;
  height: 20%;
}
#countdown {
  font-size: 2em;
}

.flash {
  animation: flash 1.5s infinite;
}

@keyframes flash {
  0%,
  100% {
    color: red;
    transform: scale(1.5);
  }
  50% {
    color: white;
    transform: scale(1);
  }
}

/* Zero-board div CSS */
.zero-board {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 250px;
  transform: scale(1.4);
}
.roulette-outside-bets-board {
  display: flex;
  top: -50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.roulette-inside-bets-board {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.number-board {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
}

.zero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(37, 116, 25);
  border: 1px solid #ffffff; /* Example border */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  /* clip-path: polygon(75% 0, 100% 0, 100% 100%, 75% 100%, 0% 50%); */
  width: 60px;
  height: 150px;
  color: #ffffff;
  font-size: 24px;
}

.roulette_overlay {
  /* display: none; Hidden by default */
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: rgba(0, 0, 0, 0); /* Start with transparent */
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
  z-index: 5;
  overflow: hidden;
  animation: fadeInBackground 2s forwards;
}

@keyframes fadeInBackground {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

/* 1-36 board */
.one-36 {
  width: 500px;
  height: 100%;
}

.top-row {
  display: flex;
  justify-content: space-between;
}

.mid-row {
  display: flex;
  justify-content: space-between;
}

.bottom-row {
  display: flex;
  justify-content: space-between;
}

.red-box {
  position: relative;
  width: calc(100% / 12); /* Adjust width based on the number of elements */
  height: 50px; /* Adjust height as needed */
  border: 1px solid #ffffff; /* Example border */
  box-sizing: border-box; /* Ensure borders are included in the width */
  text-align: center; /* Optional: Center text horizontally */
  color: white;
  line-height: 50px; /* Optional: Center text vertically */

  background-color: #ff0000;
}
.blk-box {
  position: relative;
  width: calc(100% / 12); /* Adjust width based on the number of elements */
  height: 50px; /* Adjust height as needed */
  border: 1px solid #ffffff; /* Example border */
  box-sizing: border-box; /* Ensure borders are included in the width */
  text-align: center; /* Optional: Center text horizontally */
  color: white;
  line-height: 50px; /* Optional: Center text vertically */
  background-color: #000000;
}

/* (dozen inline bet) 1st, 2nd and 3rd */
.dozen-inline-bet {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  top: -50px;
  width: 41.66px;
  height: 150px;
}
.line-1st-2nd-3rd- {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.line-1st-2nd-3rd- > div {
  width: 100%; /* Adjust width based on the number of elements */
  height: calc(100% / 3); /* Adjust height as needed */
  border: 1px solid #ffffff; /* Example border */
  box-sizing: border-box; /* Ensure borders are included in the width */
  text-align: center; /* Optional: Center text horizontally */
  line-height: 50px; /* Optional: Center text vertically */
  color: #ffffff;
}

/* 1-12, 13-24, 25-36 boardline */
.dozen-bet-line {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 500px;
  height: 50px;
}

.l1 {
  border: 1px solid #ffffff;
  height: 100%;
  display: flex;
  flex: 1;
  justify-content: center; /* Align horizontally to the center */
  align-items: center; /* Align vertically to the center */
  font-family: "Merriweather", serif; /* Change the font family */
  color: #ffffff; /* Change the font color to red */
  font-size: 24px;
}

/*Even and Odd line*/
.even-odd-line {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 500px;
  height: 50px;
}
.even-odd-line > div {
  width: calc(100% / 6); /* Adjust width based on the number of elements */
  height: 100%; /* Adjust height as needed */
  border: 1px solid #ffffff; /* Example border */
  box-sizing: border-box; /* Ensure borders are included in the width */
  text-align: center; /* Optional: Center text horizontally */
  line-height: 50px; /* Optional: Center text vertically */
}

.l2 {
  display: flex;
  flex: 1;
  justify-content: center; /* Align horizontally to the center */
  align-items: center; /* Align vertically to the center */
  color: #ffffff; /* Change the font color to red */
  font-size: 24px;
}

.red {
  display: flex;
  flex: 1;
  justify-content: center; /* Align horizontally to the center */
  align-items: center; /* Align vertically to the center */
  background-color: #ff0000;
}
.blk {
  display: flex;
  flex: 1;
  justify-content: center; /* Align horizontally to the center */
  align-items: center; /* Align vertically to the center */
  background-color: #000000;
}

.bottom-bar {
  /* Display Settings */
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Size */
  width: 100%;
  height: 22%;
  padding: 10px;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;

  width: 20%;
}

.undo {
  /* Display Settings */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Color */
  background: linear-gradient(rgba(95, 57, 16, 0.8), rgb(147, 90, 27));

  /* Size */
  width: 70px;
  height: 70px;

  /* Misc */
  border-radius: 50%;
  border: 5px solid rgba(145, 88, 25, 0.6);
  box-shadow: var(--button-shadow-default);

  /* Font */
  font-size: 15px;

  user-select: none;

  transition: all 0.55s ease;
}

.undo img {
  width: 50%;
}

/* test start  */

/* test end */

.timer-display {
  position: absolute;

  top: 11%;
  left: 1.5%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Color */
  background: linear-gradient(
    rgba(238, 213, 104, 0.1),
    rgba(235, 153, 30, 0.1)
  );

  /* Size */
  width: 145px;
  height: 35px;

  /* Font */
  font-size: 12px;

  /* Misc */
  padding: 5px;
  border-radius: 10px;
  border: 3px solid white;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

  transform: skewX(-5deg);
}

.spin-button {
  /* Display Settings */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Color */
  /* background: linear-gradient(rgba(95, 57, 16, 0.8), rgb(147, 90, 27)); */
  background: linear-gradient(rgba(16, 57, 95, 0.8), rgb(27, 90, 147));
  /* Size */
  width: 100px;
  height: 100px;

  /* Misc */
  border-radius: 50%;
  /* border: 5px solid rgba(145, 88, 25, 0.6); */
  border: 5px solid rgba(25, 88, 145, 0.6);
  box-shadow: var(--button-shadow-default);

  /* Font */
  font-size: 25px;

  user-select: none;

  transition: all 0.55s ease;
}

.roulette-player-info-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  /* Size */
  height: 100%;

  /* Misc */
  padding: 20px;
  margin-right: 40px;
}

.credits-display,
.wins-display {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Color */
  background: linear-gradient(
    rgba(238, 213, 104, 0.1),
    rgba(235, 153, 30, 0.1)
  );

  /* Size */
  width: 250px;
  height: 35px;

  /* Font */
  font-size: 12px;

  /* Misc */
  padding: 5px;
  border-radius: 10px;
  border: 3px solid white;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

  transform: skewX(-5deg);
}