* {
  position: none;
  /* cursor: none; */
  /* pointer-events: none; */
}

html {
  /* cursor: none; */
  /* pointer-events: none; */
  scroll-behavior: smooth;
}

:root {
  --page-scale: 1;
  --page-scale-y: 1;
  --page-width: 100vw;
  --page-height: 100vh;
  --page-ratio: calc(16/9);
}

body {
  margin: 0;
  background-color: rgb(7, 12, 38);
  /* pointer-events: none; */
  /* position: fixed; */
}

h1 {
  font-family: Arial;
  color: red;
  text-align: center;
}

.loading-container {
  padding: 0%;
  margin: 0;
  position: fixed;
  z-index: 1000;
  /* background-image: url("../assets/image/bgloading.jpg"); */
  background-image: linear-gradient(to top right, #05AFE0, #105E9C, #3E27B5);
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* transform: scale(1.2, 1.2); */
}

#player-container {
  transform: scale(var(--page-scale));
}

.video-container {
  height: 100vh;
  /* display: flex; */
  background-color: rgb(0, 0, 0);
}

.game-infor {
  background-image: url("../assets/image/Cover.png");
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background-size: contain;
}

.myVideo {
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(1521px * var(--page-scale));
  height: calc(calc(1521px * var(--page-scale)) / var(--page-ratio));
  /* min-width: 100%; */
  /* min-height: 100%; */
  z-index: 0;
  /* z-index: 10000; */
}

#background-cover {
  right: 0;
  top: 0;
  width: calc(1521px * var(--page-scale));
  height: calc(calc(1521px * var(--page-scale)) / var(--page-ratio));
  position: absolute;
  pointer-events: none;
}

.game-container {
  position: relative;
  height: 0;
}

.section-fade-out {
  transition: all 250ms;
  opacity: 0;
}

.section-fade-in {
  transition: all 500ms;
  opacity: 1;
}

.wrapper {
  position: relative;
  overflow: hidden;
  scroll-behavior: smooth;
  transform: translateY(-100%);
  z-index: 100;
  height: calc(320px * var(--page-scale));
  width: 100vw;
  padding: 0;
  margin: 0;
  padding-top: calc(10px * var(--page-scale));
  transition: all 250ms;
}

.emty-space {
  height: calc(320px * var(--page-scale));
  width: 100vw;
}

.cover2 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: auto;
}

.wrapper-expand {
  transition: all 250ms;
  height: calc(380px * var(--page-scale));
}

.group {
  width: 100%;
  height: calc(290px * var(--page-scale));
  opacity: 0.2;
}

.background-blur {
  background-color: rgba(0, 0, 0, 0.6);
  /* background-image: linear-gradient(to top, rgba(18, 25, 53, 1) 0%, rgba(18, 25, 53, 1) 85%, rgba(18, 25, 53, 0) 100%); */
  position: fixed;
  top: 0 !important;
  height: 100%;
  width: 100vw;
  z-index: 1000;
  pointer-events: none;
}

.wrapper section {
  position: absolute;
  overflow: visible;
  margin-top: calc(10 * var(--page-scale));
  padding-right: calc(100px * var(--page-scale));
  display: flex;
  align-items: flex-end;
  /* column-gap: calc(20px * var(--page-scale)); */
  height: calc(220px * var(--page-scale-y));
  left: calc(106px * var(--page-scale-y));
  bottom: calc(15px * var(--page-scale));
}

.section-base {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#version {
  position: fixed;
  left: calc(5px * var(--page-scale));
  top: calc(5px * var(--page-scale));
  color: #32428A;
  /* color: white; */
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: calc(10px * var(--page-scale));
  line-height: 22px;
  z-index: 10;
  /* z-index: 10000; */
}

.title {
  color: white;
  text-align: left;
  z-index: 98;
  font-size: calc(25px * var(--page-scale));
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  line-height: calc(33px * var(--page-scale));
  position: absolute;
  width: calc(354px * var(--page-scale));
  /* height: calc(38px * var(--page-scale)); */
  left: calc(97px * var(--page-scale));
  margin: 0;
  padding: 0;
  /* top: calc(734px * var(--page-scale)); */
}

.wrapper section .item {
  /* flex-grow: 0; */
  flex-shrink: 0;
  flex-basis: calc(300px * var(--page-scale));
  padding: 0;
  margin-right: calc(20px * var(--page-scale));
  transition: 250ms all;
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 10px;
  width: calc(300px * var(--page-scale));
  height: calc(220px * var(--page-scale));
  background-repeat: no-repeat;
  background-color: rgba(5, 28, 41, 1);
  background-position: top;
  background-size: contain;
  color: white;
  transform-origin: 50% 100%;
}
.item-focusing{
  /* margin: 0 calc(15px * var(--page-scale)); */
  /* transform: scale(1.33); */
  background-color: white !important;
  color: black !important;
  border: solid 3px yellow !important;
  outline: none !important;
  z-index: 1000 !important;
}
/* .wrapper section .item:focus {
  background-color: white;
  color: black;
  border: solid 3px yellow;
  outline: none !important;
  z-index: 1000;
} */

/* .wrapper section .item:hover {
  background-color: white;
  color: black;
  border: solid 1px yellow;
  outline: none !important;
  z-index: 1000;
} */
.wrapper section .item-enable-hover:hover {
  background-color: white;
  color: black;
  border: solid 1px yellow;
  outline: none !important;
  z-index: 1000;
}

.wrapper section .item a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* .wrapper section .item:focus .game-name {
  background-color: white;
} */
.wrapper section .item-focusing .game-name {
  background-color: white;
}

.wrapper section .item-enable-hover:hover .game-name {
  background-color: white;
}

.item img {
  margin: 0%;
  padding: 0%;
}

.game-name {
  text-align: left;
  position: absolute;
  padding-left: 5%;
  bottom: 0;
  width: 95%;
  background-color: rgba(5, 28, 41, 1);
  font-size: calc(20px * var(--page-scale));
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  line-height: calc(23px * var(--page-scale));
  height: calc(50px * var(--page-scale));
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  /* justify-content: center;; */
}

.lock-icon {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: calc(20px * var(--page-scale));
  /* width: 100%; */
}

.player-number {
  position: absolute;
  top: 0%;
  right: 0;
}

.player-number[data-single="1"] {
  background-image: url("../assets/image/singlePlayer.png");
  width: calc(87px * var(--page-scale));
  height: calc(36px * var(--page-scale));
  background-size: cover;
  /* height: auto; */
}

.player-number[data-single="4"] {
  background-image: url("../assets/image/multiPlayer.png");
  width: calc(79px * var(--page-scale));
  height: calc(33px * var(--page-scale));
  background-size: cover;
}

.player-number[data-single="5"] {
  background-image: url("../assets/image/multiPlayer2.png");
  width: calc(79px * var(--page-scale));
  height: calc(33px * var(--page-scale));
  background-size: cover;
}

.player-number[data-single="2"] {
  background-image: url("../assets/image/player2.png");
  width: calc(79px * var(--page-scale));
  height: calc(33px * var(--page-scale));
  background-size: cover;
}

.player-number[data-single="10"] {
  background-image: url("../assets/image/multiPlayer10.png");
  width: calc(79px * var(--page-scale));
  height: calc(33px * var(--page-scale));
  background-size: cover;
}

.player-number[data-single="3"] {
  background-image: url("../assets/image/multiPlayer3.png");
  width: calc(79px * var(--page-scale));
  height: calc(33px * var(--page-scale));
  background-size: cover;
}

.ui-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 97;
}

.popup-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1010;
}

.popup-base {
  position: absolute;
  width: max-content;
  height: max-content;
  transform: translate(-50%, -50%);
  top: 50vh;
  left: 50vw;
  display: none;
  z-index: 1010;
}

.tutorial-bg {
  width: calc(933px * var(--page-scale));
  z-index: 1010;
}

.popup-bg-blur {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  /* display: none; */
}

.error-bg {
  width: calc(933px * var(--page-scale));
  height: calc(591px * var(--page-scale));
  background: #051C29;
  opacity: 0.9;
  border: 1px solid #FBE345;
  box-sizing: border-box;
  border-radius: 30px;
}

.error-bg p {
  width: calc(933px * var(--page-scale));
  text-align: center;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: calc(25px * var(--page-scale));
  line-height: 38px;
  color: white;
  position: absolute;
  top: calc(300px * var(--page-scale));
}

.btn-ok-err {
  left: calc(466.5px * var(--page-scale));
  top: calc(460px * var(--page-scale));
}

.btn-ok-tutorial {
  left: calc(466.5px * var(--page-scale));
  top: calc(650px * var(--page-scale));
}

.tutorial-decor {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(219px * var(--page-scale));
  top: calc(20px * var(--page-scale));
  left: calc(20px * var(--page-scale));
}

.btn-anim {
  animation: buttonScale 0.2s linear;
}

.btn-ok {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(400px * var(--page-scale));
  height: calc(60px * var(--page-scale));
  background: #D1204B;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  text-align: center;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: calc(36px * var(--page-scale));
  line-height: 38px;
  /* padding-top: calc(15px * var(--page-scale)); */
  align-items: center;
  display: flex;
  justify-content: center;
}

#err-icon {
  position: absolute;
  width: calc(216px * var(--page-scale));
  height: calc(230px * var(--page-scale));
  left: calc(358px * var(--page-scale));
  top: calc(50px * var(--page-scale));
}

.logo {
  position: absolute;
  transform-origin: 0 0;
  top: 2vw;
  left: 2vw;
  width: calc(212.07px * var(--page-scale));
  height: calc(58px * var(--page-scale));
  left: calc(109px * var(--page-scale));
  top: calc(61px * var(--page-scale));
}

.loading-logo {
  position: absolute;
  transform: translate(-50%, -50%);
  /* transform-origin: 50% 50%; */
  top: 50%;
  left: 50%;
  width: calc(212.07px * var(--page-scale));
  height: calc(58px * var(--page-scale));
}

.game-infor #game-icon {
  transition: 250ms all;
  position: absolute;
  left: calc(268.5px * var(--page-scale));
  top: calc(235px * var(--page-scale));
  transform: translate(-50%, -50%);
  max-height: calc(212px * var(--page-scale));
  max-width: calc(297px * var(--page-scale));
  transition: all 250ms;
}

.game-infor #game-content {
  position: absolute;
  width: auto;
  max-height: calc(280px * var(--page-scale));
  left: calc(100px * var(--page-scale));
  top: calc(357px * var(--page-scale));
  transition: all 250ms;
}

.collapse-info {
  transition: all 250ms;
  transform: translate(0, calc(-40px * var(--page-scale))) scale(0.8);
}

.collapse-comming {
  transition: all 250ms;
  transform: translate(0, calc(-100px * var(--page-scale)));
}

.comming-soon {
  position: absolute;
  width: 100vw;
  height: 100vh;
  text-align: center;
  margin: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}

.comming-img {
  position: absolute;
  width: calc(902px * var(--page-scale));
  height: calc(81px * var(--page-scale));
  left: calc(872px * var(--page-scale));
  top: calc(667px * var(--page-scale));
  background: #051C29;
  opacity: 0.9;
  border: 1px solid #FBE345;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-size: calc(26px * var(--page-scale));
  color: white;
  text-align: center;
  padding-top: calc(20px * var(--page-scale));
}

span {
  color: #FBE345;
}

img {
  pointer-events: none;
}

#debug {
  position: absolute;
  font-size: 100px;
}

.login-form {
  margin: 0;
  padding: 0;
  background-color: #4CAF50;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  top: 0%;
  left: 0;
}

input[type=submit] {
  background-color: #4CAF50;
  width: 100%;
  color: rgb(0, 0, 0);
  padding: 15px;
  margin: 10px 0px;
  border: none;
  cursor: pointer;
}

form {
  transform: translate(-50%, -50%);
  position: absolute;
  border: 3px solid #f1f1f1;
  width: 50%;
  top: 50%;
  left: 50%;
}

input[type=text], input[type=password], #submitBtn {
  width: 100%;
  margin: 8px 0;
  padding: 12px 20px;
  display: inline-block;
  border: 2px solid green;
  box-sizing: border-box;
}

input[type=submit]:hover {
  opacity: 0.7;
}

.container {
  padding: 25px;
  background-color: lightblue;
}

.iframe {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: white;
  top: 0;
  left: 0;
  z-index: 1005;
  padding: 0;
  margin: 0;
  visibility: hidden;
  border: none;
  outline: none;
}

/* iframe {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
} */

@keyframes buttonScale {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  60% {
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 300px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: rgb(184, 182, 182); /* Black background color */
  color: rgb(0, 0, 0); /* White text color */
  text-align: center; /* Centered text */
  border-radius: 20px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 10000; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 20px; /* 30px from the bottom */
  font-family: Montserrat;
  font-style: normal;
  font-size: 15px;
  opacity: 0;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  opacity: 0;
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 1s, fadeout 1s 1s;
  animation: fadein 1s, fadeout 1s 1s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  0% {opacity: 0;}
  100% { opacity: 1;}
}

@keyframes fadein {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-webkit-keyframes fadeout {
  0% { opacity: 1;}
  100% { opacity: 0;}
}

@keyframes fadeout {
  0% { opacity: 1;}
  100% { opacity: 0;}
}