@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@font-face {
  font-family: Hunters;
  src: url(./font/Hunters.otf);
  font-style: normal;
}

* {
  margin: 0;
  box-sizing: content-box;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  overflow: hidden;
}

.menuBox {
  width: 100%;
  height: 100%;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
}

.invitationMenu {
  position: relative;
  gap: 1.1979vw;
  padding: 1.9271vw 2.3438vw 1.9271vw 2.3438vw;
  align-items: center;
  /* display: flex; */
  display: none;
  flex-direction: column;
  background: radial-gradient(
        78.52% 62.67% at -13.94% 43.18%,
        rgba(0, 163, 255, 0.2) 0%,
        rgba(0, 0, 0, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(3, 8, 16, 0) 0%,
      rgba(3, 8, 16, 0.693) 100%
    ),
    rgba(3, 8, 16, 0.9);
  border: 0.1042vw solid #17273e;
  border-radius: 2.5521vw;
}

.invitationMenu::before {
  content: "";
  position: absolute;
  z-index: -1;
  display: flex;
  top: -0.4167vw;
  left: -0.4167vw;
  right: -0.4167vw;
  bottom: -0.4167vw;
  border: 0.1563vw solid #203247;
  border-radius: 2.8646vw;
}

.invitationMenu::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.9375vw;
  left: -0.9375vw;
  right: -0.9375vw;
  bottom: -0.9375vw;
  opacity: 0.5;
  border: 0.1563vw solid #203247;
  border-radius: 3.2292vw;
}

.menuEffectImg {
  width: 7.0313vw;
  height: 7.0313vw;
  position: absolute;
  left: -2.8563vw;
  top: -2.8521vw;
  z-index: 1;
  transition: 300ms;
}

.menuEffectImg:hover {
  transform: scale(1.05);
}

.menuInEffectImg {
  width: 15.3125vw;
  height: 17.4479vw;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 0px 0px 2.5521vw 0px;
  opacity: 0.03;
}

.menuInEffectImg2 {
  width: 19.8958vw;
  height: 16.5625vw;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.2;
  border-radius: 0px 2.5521vw 0px 0px;
}

.profileImg {
  position: relative;
  width: 2.3958vw;
  height: 2.3958vw;
  border: 0.1042vw solid rgba(0, 0, 0, 0.21);
  border-radius: 3.1488vw;
  background-size: cover;
  background-repeat: no-repeat;
}

.profileImg::before {
  content: "";
  position: absolute;
  display: flex;
  top: -0.3083vw;
  left: -0.3083vw;
  right: -0.3083vw;
  bottom: -0.3083vw;
  border: 0.1042vw solid #00a3ff;
  border-radius: 3.1488vw;
}

.profileImg::after {
  content: "";
  position: absolute;
  top: -0.6208vw;
  left: -0.6208vw;
  right: -0.6208vw;
  bottom: -0.6208vw;
  border: 0.0521vw solid rgba(0, 163, 255, 0.23);
  border-radius: 3.1488vw;
}

.topSide {
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profileBox {
  display: flex;
  gap: 0.8333vw;
  align-items: center;
}

.profileName {
  display: flex;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.25vw;
  line-height: 1.5104vw;
  color: #ffffff;
}

.profileName p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.0417vw;
  line-height: 1.25vw;
  color: rgba(255, 255, 255, 0.49);
}

.topSide i {
  font-size: 1.6vw;
  color: rgba(255, 255, 255, 0.25);
}

.dicegameTitle {
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9375vw;
}

.dicegameTitle i {
  color: white;
  font-size: 2.3vw;
}

.dicegameTitleText {
  width: 12.2917vw;
  display: flex;
  gap: 0.1042vw;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.0417vw;
  line-height: 1.25vw;
  color: rgba(255, 255, 255, 0.74);
}

.dicegameTitleText p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8333vw;
  line-height: 1.0938vw;
  color: rgba(255, 255, 255, 0.58);
}

.menuLine {
  width: 14.3229vw;
  height: 0.0521vw;
  background: rgba(255, 255, 255, 0.09);
}

.roundInputBox,
.betInputBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4688vw;
  z-index: 1;
}

.roundInputTitle,
.betInputTitle {
  display: flex;
  gap: 0.5167vw;
  align-items: center;
}

.roundInputTitle i,
.betInputTitle i {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.2vw;
}

.roundInputTitleText,
.betInputTitleText {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375vw;
  color: rgba(255, 255, 255, 0.62);
}

.custom-select {
  position: relative;
  width: 15.0417vw;
  height: 2.4479vw;
}

.custom-select select {
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding-left: 1vw;
  background: radial-gradient(
    93.09% 93.09% at 50% 57.98%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 0.0521vw solid rgba(255, 255, 255, 0.06);
  border-radius: 0.625vw;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375vw;
  line-height: 1.1458vw;
  color: rgba(255, 255, 255, 0.3);
}

.custom-select select option {
  background: rgba(11, 20, 35, 0.95);
  color: rgba(255, 255, 255, 0.53);
  outline: none;
  border: none;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8333vw;
  line-height: 180%;
}

.custom-select select option:hover {
  background-color: #f5f5f5;
}

.custom-select select option:checked {
  background: rgba(25, 40, 65, 0.95);
  color: white;
}

.custom-select i {
  color: rgba(255, 255, 255, 0.21);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.bet-input {
  display: inline-block;
  position: relative;
}

.bet-input input {
  overflow: hidden;
  width: 15.0417vw;
  height: 2.1354vw;
  padding-left: 1vw;
  background: radial-gradient(
    93.09% 93.09% at 50% 57.98%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 0.0521vw solid rgba(255, 255, 255, 0.06);
  border-radius: 0.625vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9375vw;
  line-height: 1.1458vw;
  color: rgba(32, 218, 106, 0.79);
}

.bet-input input:focus {
  outline: none;
  background: radial-gradient(
    93.09% 93.09% at 50% 57.98%,
    rgba(255, 255, 255, 0.21) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.invitationButtonBox {
  display: flex;
  gap: 0.3646vw;
  width: 100%;
  z-index: 1;
}

.sendButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.5854vw;
  height: 2.2917vw;
  background: radial-gradient(
    129.55% 129.55% at 50% 50%,
    #00a3ff 0%,
    rgba(0, 163, 255, 0) 100%
  );
  border-radius: 0.5729vw 0px 0px 0.5729vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9375vw;
  line-height: 1.1458vw;
  color: rgba(0, 0, 0, 0.42);
  gap: 0.4688vw;
  transition: 300ms;
}

.sendButton i {
  font-size: 1vw;
  color: rgba(0, 0, 0, 0.42);
  transition: 300ms;
}

.sendButton:hover {
  cursor: pointer;
  color: black;
  filter: drop-shadow(0px 0px 2.0833vw rgba(2, 129, 202, 0.8));
}

.sendButton:hover i {
  color: black;
}

.cancelButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2917vw;
  height: 2.2917vw;
  background: radial-gradient(
    129.55% 129.55% at 50% 50%,
    #db3030 0%,
    rgba(230, 48, 48, 0) 100%
  );
  border-radius: 0px 0.5729vw 0.5729vw 0px;
  transition: 300ms;
}

.cancelButton i {
  color: rgba(0, 0, 0, 0.41);
  font-size: 1.2vw;
  pointer-events: none;
}

.cancelButton:hover {
  filter: drop-shadow(0px 0px 1.9271vw #cf3033);
  cursor: pointer;
}

.cancelButton:hover i {
  color: black;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
  75% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0);
  }
}

.inviteAcceptMenu {
  position: relative;
  gap: 1.1979vw;
  padding: 1.9271vw 2.3438vw 1.9271vw 2.3438vw;
  align-items: center;
  /* display: flex; */
  display: none;
  flex-direction: column;
  background: radial-gradient(
        78.52% 62.67% at -13.94% 43.18%,
        rgba(0, 163, 255, 0.2) 0%,
        rgba(0, 0, 0, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(3, 8, 16, 0) 0%,
      rgba(3, 8, 16, 0.693) 100%
    ),
    rgba(3, 8, 16, 0.9);
  border: 0.1042vw solid #17273e;
  border-radius: 2.5521vw;
}

.diceGameInfoBox {
  gap: 0.8854vw;
  width: 100%;
  display: flex;
}

.diceGameInfo {
  width: 7.8125vw;
  height: 2.1875vw;
  background: radial-gradient(
    133.33% 133.33% at 50% 50%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0.4688vw;
  display: flex;
  padding-left: 0.6771vw;
  align-items: center;
  gap: 0.5208vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8441vw;
  color: rgba(255, 255, 255, 0.68);
}

.diceGameInfo i {
  font-size: 1.25vw;
  color: white;
}

.diceInvitedButton {
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 987;
}

.diceInvitedAcceptButton {
  gap: 0.3125vw;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 11.8333vw;
  height: 1.9271vw;
  background: rgba(45, 201, 126, 0.1);
  border-radius: 0.4688vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.8328vw;
  color: rgba(255, 255, 255, 0.3);
  transition: all 1s;
}

.diceInvitedAcceptButton:hover {
  background: rgba(45, 201, 126, 0.404);
}

.yKey {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9375vw;
  height: 0.9375vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.6814vw;
  color: rgba(255, 255, 255, 0.3);
  border: 0.0426vw solid rgba(255, 255, 255, 0.3);
  border-radius: 0.1705vw;
}

.diceInvitedCancelButton {
  display: flex;
  gap: 0.3125vw;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 5.3125vw;
  height: 1.9271vw;
  background: rgba(202, 72, 72, 0.16);
  border-radius: 0.4688vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.8328vw;
  color: rgba(255, 255, 255, 0.3);
  transition: all 1s;
}

.diceInvitedCancelButton:hover {
  background: rgba(202, 72, 72, 0.416);
}

.gamePage {
  background-size: cover;
  position: relative;
  padding-top: 1vw;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(3, 8, 16, 0) 0%,
      rgba(3, 8, 16, 0.693) 100%
    ),
    rgba(3, 8, 16, 0.9);
}

.gameTopSide {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.6583vw;
}

.gameTitleBox {
  position: relative;
  display: flex;
  flex-direction: column;
  animation: shake 0.8s infinite;
  transition: 300ms;
}

.gameTitleBox:hover {
  scale: 1.05;
}

.gameTitle {
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 2.6373vw;
  line-height: 100%;
  background: linear-gradient(90deg, #00a3ff 51.81%, #c03d3d 52.09%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
}

.gameTitle p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.6748vw;
  line-height: 100%;
  background: #ffffff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: center;
}

.gameTitleImg {
  left: -1vw;
  top: -5vw;
  position: absolute;
  width: 7.0313vw;
  height: 7.0313vw;
  transform: rotate(30deg);
}

.gameDescription {
  width: 31.3542vw;
  color: white;
  display: flex;
  gap: 0.3125vw;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 1.0417vw;
  line-height: 117%;
  text-align: center;
  color: #ffffff;
}

.gameDescription p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.0417vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.gameCenterSide {
  display: flex;
  gap: 6.7708vw;
}

.gameInfoSide {
  margin-top: 2.9688vw;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3.125vw;
}

.gameInfoBox {
  display: flex;
  gap: 0.9896vw;
}

.gameInfoRound {
  align-items: center;
  display: flex;
  gap: 0.6771vw;
  padding-left: 1.25vw;
  width: 10.4688vw;
  height: 3.75vw;
  background: radial-gradient(
    117.22% 117.22% at 50% 50%,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 1.3542vw 0px 0px 1.3542vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.0417vw;
  line-height: 117%;
  color: rgba(255, 255, 255, 0.68);
}

.gameInfoRound:hover {
  background: radial-gradient(
    117.22% 117.22% at 50% 50%,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.gameInfoRound i {
  color: white;
  font-size: 1.85vw;
}

.gameInfoBet {
  display: flex;
  align-items: center;
  gap: 0.7292vw;
  padding-left: 1.25vw;
  width: 12.8125vw;
  height: 3.75vw;
  background: radial-gradient(
    117.22% 117.22% at 50% 50%,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0px 1.3542vw 1.3542vw 0px;
  font-size: 1.85vw;
  color: #40dc75;
}

.gameInfoBet:hover {
  background: radial-gradient(
    117.22% 117.22% at 50% 50%,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.gameInfoBetText {
  display: flex;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375vw;
  line-height: 1.1458vw;
  color: rgba(255, 255, 255, 0.83);
}

.gameInfoBetText p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.0417vw;
  line-height: 117%;
  color: #40dc75;
}

.gameDiceTimeBox {
  gap: 3.5417vw;
  display: flex;
  align-items: center;
}

.single-chart {
  width: 12.5vw;
  justify-content: space-around;
}

.circular-chart {
  display: block;
  margin: 0.5208vw auto;
  max-width: 80%;
  max-height: 13.0208vw;
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1.2;
}

.circle {
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  transition: all 1s ease-in-out;
}
/* 
#animpath{
    transition: all 4s ease-in-out;
} */

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: white;
}

.percentage {
  fill: white;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.32em;
  text-anchor: middle;
}

.percentage2 {
  text-anchor: middle;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.2em;
  fill: rgba(255, 255, 255, 0.32);
}

.rollDice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5417vw;
  height: 3.5417vw;
  background: radial-gradient(
    94.12% 94.12% at 50% 50%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0.5208vw;
}

.rollDice {
  color: white;
  font-size: 2.3vw;
}

.gameInfoSideBottom {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}

.nextArrowBox {
  display: flex;
  gap: 1.1458vw;
  align-items: center;
}

.fa-arrow-left-long {
  font-size: 2.4vw;
  color: #00a3ff;
  opacity: 0.12;
}

.fa-arrow-right-long {
  font-size: 2.4vw;
  color: #d14242;
}

.roundSay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.9583vw;
  height: 1.4063vw;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1.4583vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.7292vw;
  color: rgba(255, 255, 255, 0.35);
}

.blueteam {
  background: #00a3ff;
}

.redteam {
  background: #ce4e4e;
}

.teamBox {
  margin-top: 6.5vw;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.teamProfile {
  position: relative;
  width: 5.9896vw;
  height: 5.9896vw;
  background-size: cover;
  border-radius: 3.8021vw;
}

.teamProfile::before {
  content: "";
  position: absolute;
  display: flex;
  top: -0.5208vw;
  left: -0.5208vw;
  right: -0.5208vw;
  bottom: -0.5208vw;
  border: 0.0521vw solid #00a3ff;
  border-radius: 3.8021vw;
}

.teamProfileName {
  margin-top: 1.1458vw;
  display: flex;
  flex-direction: column;
  gap: 0.1563vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  text-align: center;
  font-size: 1.3542vw;
  line-height: 117%;
  color: #ffffff;
}

.teamProfileName p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.25vw;
  line-height: 117%;
  color: rgba(255, 255, 255, 0.47);
}

.teamProgressBar {
  margin-top: 2.3958vw;
  position: relative;
  display: flex;
  flex-direction: column;
}

.progressBar {
  padding: 0.2083vw;
  display: flex;
  width: 14.4271vw;
  background: radial-gradient(
    97.01% 97.01% at 50% 50%,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 0.0521vw solid rgba(255, 255, 255, 0.04);
  border-radius: 0.1042vw;
}

.progress {
  position: relative;
  width: 50%;
  height: 0.2604vw;
  border-radius: 0.1042vw;
  transition: 300ms;
}

.progress::after {
  content: "\00a0";
  display: block;
  width: 0.625vw;
  height: 0.625vw;
  position: absolute;
  top: -0.15vw;
  right: 0;
  background: #d9d9d9;
  border-radius: 2.3438vw;
}

.progress-bar::after span {
  content: "%40";
  position: absolute;
  top: -1.0417vw;
  right: 0;
  font-size: 0.7292vw;
  font-weight: bold;
  color: white;
}

.progress-text {
  position: absolute;
  top: 1.2vw;
  right: -0.5vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.2vw;
  line-height: 90%;
  color: #ffffff;
}

.teamRoundDiceBoxs {
  margin-top: 3.3333vw;
  display: flex;
  gap: 0.7292vw;
}

.teamRoundDiceBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2083vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.7292vw;
  line-height: 117%;
  text-align: center;
  color: #ffffff;
}

.teamRoundDice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3958vw;
  height: 2.3958vw;
  background: radial-gradient(
    117.86% 117.86% at 50% 50%,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 0.0521vw solid rgba(255, 255, 255, 0.02);
  border-radius: 0.4688vw;
}

.teamRoundDice i {
  font-size: 1.8vw;
  color: white;
}

.redteamProfile {
  position: relative;
  width: 5.9896vw;
  height: 5.9896vw;
  background-size: cover;
  border-radius: 3.8021vw;
}

.redteamProfile::before {
  content: "";
  position: absolute;
  display: flex;
  top: -0.5208vw;
  left: -0.5208vw;
  right: -0.5208vw;
  bottom: -0.5208vw;
  border: 0.0521vw solid #ce4e4e;
  border-radius: 3.8021vw;
}

.teamBgEffect {
  position: absolute;
  width: 8.4375vw;
  height: 8.4375vw;
  opacity: 0.7;
  filter: blur(158.824px);
}

.gameBottomSide {
  gap: 2.4479vw;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.gameButtonDescription {
  width: 24.8438vw;
  display: flex;
  flex-direction: column;
  gap: 0.3646vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.1458vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.74);
}

.gameButtonDescription p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375vw;
  line-height: 117%;
  text-align: center;

  color: rgba(255, 255, 255, 0.63);
}

.gameButtonBox {
  display: flex;
  gap: 0.3646vw;
}

.gameRollDiceButton {
  gap: 0.4604vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.8125vw;
  height: 2.8646vw;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.7292vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.1458vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.47);
  transition: 300ms;
  cursor: pointer;
}

.gameRollDiceButtonPassive {
  gap: 0.4604vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.8125vw;
  height: 2.8646vw;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0.7292vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.1458vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.47);
  transition: 300ms;
}

.gameRollDiceButton i {
  transition: 300ms;
  font-size: 1.35vw;
  color: rgba(255, 255, 255, 0.22);
}

.gameRollDiceButton:hover {
  background: #00a3ff;
  font-weight: 500;
  color: black;
  box-shadow: 0px 0px 5vw rgba(0, 163, 255, 0.3);
}

.gameRollDiceButton:hover i {
  color: black;
}

.gameLeaveButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8646vw;
  height: 2.8646vw;
  background: rgba(202, 69, 69, 0.29);
  border-radius: 0.7292vw;
  transition: 300ms;
}

.gameLeaveButton i {
  font-size: 1.2vw;
  color: rgba(255, 255, 255, 0.2);
  transition: 300ms;
}

.gameLeaveButton:hover {
  cursor: pointer;
  background: #ca4545;
  box-shadow: 0px 0px 5.125vw rgba(221, 48, 62, 0.5);
}

.gameLeaveButton:hover i {
  color: black;
}

.gamepagebgeffect {
  width: 56.4063vw;
  height: 25.625vw;
  position: absolute;
  top: 0;
  pointer-events: none;
}

.gamepageeffect1 {
  width: 52.7604vw;
  height: 45.8854vw;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.gamepageeffect2 {
  width: 52.7604vw;
  height: 45.8854vw;
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
}

.queueNotify {
  gap: 0.4688vw;
  padding-left: 0.8854vw;
  align-items: center;
  top: 1.9792vw;
  left: 0;
  width: 16.9271vw;
  height: 2.3438vw;
  background: linear-gradient(
    90deg,
    rgba(0, 163, 255, 0.06) 0%,
    rgba(0, 163, 255, 0) 100%
  );
  position: absolute;
  display: none;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;

  line-height: 117%;
  color: rgba(255, 255, 255, 0.37);
}

.queueNotify i {
  font-size: 1vw;
  color: rgba(255, 255, 255, 0.42);
}

.gameWonSide,
.gameDrawSide,
.gameLoseSide {
  margin-top: 4.7917vw;
  display: none;
  flex-direction: column;
  align-items: center;
}

.gameWonText {
  display: flex;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.1448vw;
  line-height: 90%;
  text-align: center;
  color: rgba(255, 255, 255, 0.59);
}

.gameWonText p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 2.9586vw;
  line-height: 110%;
  text-align: center;
  text-transform: uppercase;
  color: #40dc75;
}

.gameWonDescription {
  width: 23.6703vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.0417vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.gameWonSide,
.gameDrawSide,
.gameLoseSide i {
  margin-top: 1.3021vw;
  font-size: 6.5vw;
  color: #40dc75;
}

.gameWonPrice {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 2.2896vw;
  line-height: 117%;
  text-align: center;
  color: #40dc75;
}

.gameWonButton {
  margin-top: 2.0833vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.8016vw;
  height: 3.0911vw;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2.633vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.3738vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.37);
  transition: 300ms;
}

.gameWonButton:hover {
  cursor: pointer;
  color: black;
  background: #40dc75;
}

.gameDrawButton {
  margin-top: 2.0833vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.8016vw;
  height: 3.0911vw;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2.633vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.3738vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.37);
  
  transition: 300ms;
}

.gameDrawButton:hover {
  background: #fff;
  color: black;
  cursor: pointer;
}

.gameLoseButton {
  margin-top: 2.0833vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.8016vw;
  height: 3.0911vw;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2.633vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 1.3738vw;
  line-height: 117%;
  text-align: center;
  color: rgba(255, 255, 255, 0.37);
  transition: 300ms;
}

.gameLoseButton:hover {
  background: #cc4d4d;
  color: white;
  cursor: pointer;
}

/* FLEX */
.gameLeaveConfirm {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.gameLeaveBox {
  align-items: center;
  padding: 2.0833vw;
  display: flex;
  flex-direction: column;
  gap: 1.5104vw;
  background: radial-gradient(
      68.26% 100% at 50% 0%,
      rgba(0, 163, 255, 0.102) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    rgba(2, 7, 15, 0.95);
  border: 0.1042vw solid #17273e;
  border-radius: 1.3542vw;
}

.gameLeaveText {
  width: 32.1354vw;
  display: flex;
  gap: 0.9896vw;
  flex-direction: column;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 1.875vw;
  text-align: center;
  color: #ffffff;
}

.gameLeaveBox p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.25vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.67);
}

.gameLeaveButtonBox {
  gap: 1.0938vw;
  display: flex;
}

.gameLeaveContinueButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.8021vw;
  height: 2.6563vw;
  background: radial-gradient(
    129.55% 129.55% at 50% 50%,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0.625vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.25vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.31);
  transition: 300ms;
}

.gameLeaveContinueButton:hover {
  cursor: pointer;
  color: white;
  background: radial-gradient(
    129.55% 129.55% at 50% 50%,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.gameLeaveAcceptButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 265px;

  height: 2.6563vw;
  background: radial-gradient(
    129.55% 129.55% at 50% 50%,
    #ca3d3d 0%,
    rgba(204, 64, 64, 0) 100%
  );
  border-radius: 0.625vw;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.25vw;
  text-align: center;
  color: rgba(0, 0, 0, 0.53);
  transition: 300ms;
}

.gameLeaveAcceptButton:hover {
  cursor: pointer;
  color: black;
  filter: drop-shadow(0px 0px 3.4375vw rgba(205, 49, 50, 1));
}

.notifyPage {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  /* display: flex; */
  justify-content: center;

  align-items: flex-end;
}

.notifyBoxDenied {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9896vw;
}

.notifyBoxDenied svg {
  bottom: 0;
  position: absolute;
}

.notifyBoxSuccess {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9896vw;
}

.notifyBoxSuccess svg {
  bottom: 0;
  position: absolute;
}

.notifyTitle {
  width: 12.2917vw;
  gap: 0.2604vw;
  z-index: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.8333vw;
  line-height: 117%;
  color: #ffffff;
}

.notifyTitle p {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 0.625vw;
  line-height: 117%;
  color: rgba(255, 255, 255, 0.46);
}

.notifyLine {
  z-index: 1;
  width: 7.2396vw;
  height: 0.1563vw;
  background: #00a3ff;
}

.denied {
  color: #c14646;
}

.inputAmount {
  -webkit-appearance: none;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.startGameSide {
  display: none;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  position: absolute;
  background: linear-gradient(
    108deg,
    rgba(0, 163, 255, 0.5) 0%,
    rgba(0, 163, 255, 0.25) 50%,
    rgba(206, 78, 78, 0.25) 50.01%,
    rgba(206, 78, 78, 0.5) 100%
  );
  z-index: 9999;
  width: 100%;
  height: 100%;
  transition: 250ms ease-in-out;
  animation: startgame 1s ease-in-out;
}

@keyframes startgame {
  0% {
    opacity: 0;
    background: linear-gradient(
      108deg,
      rgba(0, 163, 255, 0.5) 0%,
      rgba(0, 163, 255, 0.25) 19.79%,
      rgba(84, 128, 182, 0) 48.44%,
      rgba(206, 78, 78, 0.25) 78.13%,
      rgba(206, 78, 78, 0.5) 100%
    );
  }

  100% {
    opacity: 1;
    background: linear-gradient(
      108deg,
      rgba(0, 163, 255, 0.5) 0%,
      rgba(0, 163, 255, 0.25) 50%,
      rgba(206, 78, 78, 0.25) 50.01%,
      rgba(206, 78, 78, 0.5) 100%
    );
  }
}

.startText {
  font-family: Hunters;
  font-size: 24.1937vw;
  font-style: normal;
  font-weight: 400;
  line-height: 90%; /* 241.55px */
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.53) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}