* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Roboto", sans-serif;
  color: #45474b;
  font-weight: 500;
  background-color: #834e2e;
}
/* #app {
} */
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}
.absolute {
  position: absolute;
}
.overturned {
  transform: scaleX(-1);
}
/* .player {
} */
.player__bg {
  width: 120px;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.player__img {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 70px;
  height: 70px;
  object-fit: contain;
  z-index: 2;
  transform: translateX(-50%);
}
.player__img.player__padding {
  top: 3px;
}
/* .background {
  margin-top: 70px;
} */
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  background-color: #ffc700;
}
.header__stength {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #65b741;
  z-index: 3;
  opacity: 0;
  text-shadow: 1px 1px #000;
  transition: opacity 1s linear;
}
.header__stength.active {
  opacity: 1;
}
.header__number {
  color: #379237;
}

.header__target-number {
  color: #ff004d;
  font-size: 18px;
}
@keyframes pushLeft {
  from {
    transform: translate(10px, 10px);
  }
  to {
    transform: translate(10px, 0);
    transform: translate(-14px, 0);
    transform: translate(-146px, -6px);
  }
  to {
    opacity: 0;
  }
}
.header__bonus {
  position: absolute;
  top: 25%;
  left: 200px;
  color: #65b741;
  font-size: 24px;
  opacity: 0;
}
.header__bonus.active {
  opacity: 1;
  animation: pushLeft 1s linear;
}
.header__stength.active {
  opacity: 1;
}
.header__left {
  margin-left: 18px;
}
.header__right {
  display: flex;
  gap: 32px;
  margin-right: 12px;
}
.header__time-number {
  font-size: 20px;
  margin-left: 2px;
  font-weight: 500;
  color: #ff0000;
}
.header__level-number {
  font-size: 20px;
  margin-left: 12px;
  font-weight: 500;
  color: #11c211;
}
/* #F05941 */
/* #54B435 */
.header__exit {
  position: relative;
  display: inline-block;
  padding: 2px 15px;
  cursor: pointer;
  background: #f05941;
  border: 1px solid #495e57;
  color: #fff;
  outline: none;
  border-radius: 6px;
  min-height: 30px;
  height: 30px;
  z-index: 2;
  top: 10px;
}
.header__exit.success {
  background: #54b435;
}
.header__exit:active {
  transform: translateY(4px);
  transition: transform 0.2s linear;
}
.header__right-wrapper {
  margin-right: 18px;
}
.hook-wire {
  position: absolute;
  top: 54px;
  left: 48.4%;
  width: 2.6px;
  height: 20px;
  z-index: 2;
  transform-origin: top center;
  background-color: #5f3926;
}
.hook {
  position: absolute;
  top: calc(100% - 8px);
  right: -38px;
  transform: rotate(2.6deg);
  width: 80px;
}
@keyframes identifier {
  from {
    height: 20px;
  }
  to {
    height: 500px;
  }
}
.hook.r-stone {
  top: calc(100% - 3px);
  right: -14px;
  width: 34px;
}
.hook.t-stone {
  top: calc(100% - 4px);
  right: -22px;
  width: 56px;
}
.hook.s-gold {
  top: calc(100% - 1px);
  right: -23px;
  width: 50px;
}
.hook.sm-gold {
  top: calc(100% - 1px);
  right: -38.6px;
  width: 80px;
}
.hook.m-gold {
  top: calc(100% - 3px);
  right: -36px;
  width: 70px;
}
.hook.l-gold {
  top: calc(100% - 2px);
  right: -38.6px;
  width: 80px;
}
.hook.m-bag {
  top: calc(100% - 8px);
  right: -17px;
  width: 38px;
}
.hook.dia {
  top: calc(100% - 1px);
  right: -11px;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.hook.p-pig {
  top: calc(100% - 8px);
  right: -17px;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.hook.p-dpig {
  top: calc(100% - 28px);
  right: -38px;
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.hook.tnt-barrel {
  top: calc(100% - 2px);
  right: -14px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.hook.tnt-barrel-boom {
  top: calc(100% - 50px);
  right: -60px;
  width: 140px;
  height: 140px;
  object-fit: contain;
}
.hook.p-bone {
  top: calc(100% - 6px);
  right: -15px;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.hook.p-skull {
  top: calc(100% - 6px);
  right: -15px;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.start-line {
  position: relative;
  z-index: 2;
  height: 2px;
  background-color: #000;
}

.background {
  padding-top: 64%;
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
}
.background.map-1 {
  background-image: url("../public/images/background_1_out.jpeg");
}
.background.map-2 {
  background-image: url("../public/images/background_2_out.jpg");
}
.background.map-3 {
  background-image: url("../public/images/background_3_out.jpg");
}
.background.map-4 {
  background-image: url("../public/images/background_4_out.jpg");
}

.item {
  position: absolute;
  top: 30%;
  left: 46%;
}
/* Item */
.stone-1 {
  background-repeat: no-repeat;
  background-image: url("../public/images/da_1.png");
  width: 5.8%;
  height: 9%;
  background-size: contain;
}
.g-p-4 {
  padding: 4px;
}
.stone-2 {
  background-repeat: no-repeat;
  background-image: url("../public/images/da_2.png");
  width: 4.6%;
  height: 7.1%;
  background-size: contain;
}
.gold-4 {
  background-repeat: no-repeat;
  background-image: url("../public/images/vang_1.png");
  width: 10%;
  height: 16%;
  background-size: contain;
}
.gold-3 {
  background-repeat: no-repeat;
  background-image: url("../public/images/vang_2.png");
  width: 8%;
  height: 12.5%;
  background-size: contain;
}
.gold-2 {
  background-repeat: no-repeat;
  background-image: url("../public/images/vang_3.png");
  width: 4%;
  height: 6.3%;
  background-size: contain;
}
.gold-1 {
  background-repeat: no-repeat;
  background-image: url("../public/images/vang_4.png");
  width: 2.3%;
  height: 3.6%;
  background-size: contain;
}
.mystery-bag {
  background-repeat: no-repeat;
  background-image: url("../public/images/mysteryBag.png");
  width: 5%;
  height: 8%;
  background-size: contain;
}
.diamond {
  background-image: url("../public/images/diamond.png");
  background-repeat: no-repeat;
  width: 2.8%;
  height: 4.3%;
  background-size: contain;
}
.pig {
  background-image: url("../public/images/pig.png");
  background-repeat: no-repeat;
  width: 5%;
  height: 5%;
  background-size: contain;
}
.d-pig {
  background-image: url("../public/images/diamondPig.png");
  background-repeat: no-repeat;
  width: 5%;
  height: 5%;
  background-size: contain;
}
.tnt_barrel {
  background-image: url("../public/images/tnt_out.png");
  background-repeat: no-repeat;
  width: 6.8%;
  height: 10.6%;
  background-size: contain;
}
.bone {
  background-image: url("../public/images/bone.png");
  background-repeat: no-repeat;
  width: 3.3%;
  height: 5.1%;
  background-size: contain;
}
.skull {
  background-image: url("../public/images/skull.png");
  background-repeat: no-repeat;
  width: 3.3%;
  height: 5.1%;
  background-size: contain;
}
/* End */
.item__img {
  width: 30px;
  height: auto;
  object-fit: contain;
}
.items {
  position: absolute;
  right: 25%;
  bottom: -0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.gunpowder {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("../public/images/mine.png");
  width: 24px;
  height: 40px;
  margin: 0 -6px;
  background-size: contain;
}
.start {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s linear;
}
.miner {
  position: absolute;
  top: 0;
  right: 23%;
  background-repeat: no-repeat;
  background-image: url("../public/images/startMenu_out.png");
  width: 680px;
  height: 680px;
  background-size: contain;
}
.gold {
  position: absolute;
  top: 5rem;
  left: 2rem;
  background-repeat: no-repeat;
  background-image: url("../public/images/vang_1.png");
  width: 250px;
  height: 250px;
  background-size: contain;
}
@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.gold-blur {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 300px;
  height: 300px;
  background-color: #eedd00;
  opacity: 0.8;
  border-radius: 50rem;
  filter: blur(50px);
  animation: zoomIn 4s linear infinite;
}
.play {
  position: absolute;
  top: 9rem;
  left: 7rem;
  font-size: 2rem;
  color: #eedd00;
  font-weight: 600;
  text-shadow: 2px 2px #000;
  cursor: pointer;
  padding: 18px;
  user-select: none;
}
.guide {
  position: absolute;
  bottom: -23%;
  left: 18%;
  background-repeat: no-repeat;
  background-image: url("../public/images/huongdan_out.png");
  width: 300px;
  height: 300px;
  background-size: contain;
}
.show {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-image: url("../public/images/show_target-removebg.png");
  background-repeat: no-repeat;
  background-size: 900px 100%;
  background-position: top center;
  object-fit: contain;
  z-index: 999;
  opacity: 1;
  transition: opacity 1s linear;
}
.show__target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  padding: 64px 44px 30px 44px;
  display: inline-block;
  border-radius: 8px;
  border: 6px solid #e68200e6;
  color: #eedd00;
  background-color: #9b4e00;
  user-select: none;
  animation: scaleOut 1s linear;
}
.show__target-number {
  color: #07c800;
  display: block;
  text-align: center;
  margin-top: 24px;
}
.show__target-title {
  text-align: center;
  padding: 0;
}
.store {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-image: url("../public/images/store_background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  display: none;
  /* transition: opacity 1s linear; */
}
.store__container {
  width: 800px;
  height: auto;
  margin: 0 auto;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 64px;
  margin-top: 64px;
}
.title__text {
  background-repeat: no-repeat;
  width: 430px;
  height: 64px;
  object-fit: contain;
  background-image: url("../public/images/store_title.png");
}
.title__next-game {
  display: inline-block;
  background-color: #006600;
  color: #00fc00;
  border: 3px solid #0a4903;
  text-decoration: none;
  min-width: 150px;
  height: 50px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 50px;
}
.title__next-game:hover {
  opacity: 0.8;
}
.main {
  margin-top: 100px;
}
.store__list {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 24px;
}
.store__list-item {
  position: relative;
  bottom: 22px;
  width: 70px;
  height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
}
.store__list-item:hover {
  cursor: pointer;
}
.store__list-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 54px;
}
.store__list-item.tnt {
  background-image: url("../public/images/mine.png");
}
.store__list-item.enegry {
  background-image: url("../public/images/bottle_out.png");
}
.store__list-item.clover {
  background-image: url("../public/images/clover_out.png");
}
.store__list-item.stone-book {
  background-image: url("../public/images/book_out.png");
}
.store__list-item.polish {
  background-image: url("../public/images/polish_out.png");
}
.store__list-item-price {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  color: #0c9b06;
  font-size: 1.7rem;
  user-select: none;
}
.trader {
  position: relative;
  background-image: url("../public/images/trader-removebg.png");
  width: 162px;
  height: 164px;
  background-size: contain;
  background-position: top center;
}
.trader.happy {
  background-image: url("../public/images/traderSmile-removebg.png");
}
.trader.unhappy {
  background-image: url("../public/images/traderAngry-removebg.png");
}
.trader__chat {
  position: absolute;
  bottom: 50%;
  right: -8px;
  background-image: url("../public/images/chat_out.png");
  background-repeat: no-repeat;
  width: 800px;
  height: 200px;
  transform: scale(0.6);
  margin-left: auto;
}
.trader__chat-text {
  position: absolute;
  bottom: 50%;
  left: 0;
  text-align: center;
  font-size: 2rem;
  user-select: none;
}
.store__table {
  width: 100%;
  height: 100vh;
  background-image: url("../public/images/table.png");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
/* .visibility-item {
} */
.hidden-item {
  visibility: hidden;
  pointer-events: none;
}

.store__table-info {
  position: absolute;
  bottom: 74px;
  left: 50%;
  font-size: 20px;
  transform: translateX(-50%);
  text-align: center;
  color: #ffff00;
}
.myElement {
  top: 0;
  left: 0;
  position: absolute;
  cursor: move;
}

.header__money-title,
.header__time-title,
.header__level-title,
.header__target-title {
  font-size: 1rem;
}
.header__exit {
  font-size: 0.75rem;
}
.header__number,
.header__target-number,
.header__level-number,
.header__time-number {
  font-size: 1rem;
}