/* ---- click button animation ----- */
 .menuBtn{
  transition: transform .1s ease-in-out;
}

.menuBtn:active{
  transform: scale(0.8);
}

.menuBtn::after{
  transform: scale(1);
}

* {
  caret-color: transparent;
}

#mainGame.disabled #homeBtn { 
  pointer-events: none;
  cursor: pointer;
}

.wthTxtBorder2px {
  text-shadow: 
        -1.5px -1.5px 0px var(--edgeColor),
        -1px -1.5px 0px var(--edgeColor),
        0px -1.5px 0px var(--edgeColor),
        1px -1.5px 0px var(--edgeColor),
        1.5px -1.5px 0px var(--edgeColor),
        1.5px -1px 0px var(--edgeColor),
        1.5px  0px 0px var(--edgeColor),
        1.5px  1px 0px var(--edgeColor),
        1.5px  1.5px 0px var(--edgeColor),
        1px  1.5px 0px var(--edgeColor),
        0px  1.5px 0px var(--edgeColor),
        -1px  1.5px 0px var(--edgeColor),
        -1.5px  1.5px 0px var(--edgeColor),
        -1.5px  1px 0px var(--edgeColor),
        -1.5px  0px 0px var(--edgeColor),
        -1.5px -1px 0px var(--edgeColor)!important;
}

.wthTxtBorder3px {
  text-shadow: 
        -3px -3px 0px var(--edgeColor),
        -2px -3px 0px var(--edgeColor),
        -1px -3px 0px var(--edgeColor),
        0px -3px 0px var(--edgeColor),
        1px -3px 0px var(--edgeColor),
        2px -3px 0px var(--edgeColor),
        3px -3px 0px var(--edgeColor),
        3px -2px 0px var(--edgeColor),
        3px -1px 0px var(--edgeColor),
        3px 0px 0px var(--edgeColor),
        3px 1px 0px var(--edgeColor),
        3px 2px 0px var(--edgeColor),
        2px 3px 0px var(--edgeColor),
        1px 3px 0px var(--edgeColor),
        0px 3px 0px var(--edgeColor),
        -1px 3px 0px var(--edgeColor),
        -2px 3px 0px var(--edgeColor),
        -3px 3px 0px var(--edgeColor),
        -3px 2px 0px var(--edgeColor),
        -3px 1px 0px var(--edgeColor),
        -3px 0px 0px var(--edgeColor),
        -3px -1px 0px var(--edgeColor),
        -3px -2px 0px var(--edgeColor),
        -3px -3px 0px var(--edgeColor)!important;
}

body {
  position: relative;
  margin: 0;
}

/* //------------------------------------- */

#mainGame {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#mainGame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../images/desktop/bg.png);
  background-size: 100% 100%;
  background-position: 0% 21%;
  background-repeat: no-repeat;
}

.main-game-container{
  position: relative;
  width: 855px;
  height: 100%;
}

/* //------------------------------------- */
.top-section {
  width: 100%;
  position: relative;
}

.top-section .main-title {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* //------------------------------------- */
.schedule-bar {
  position: absolute;
  bottom: -16%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: max-content;
  height: auto;
  padding: 15px 50px;
  background: url(../images/schedule-bar.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.schedule-bar p{
  color: #fff;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
}

/* --------------------------------------------------- */
.drawCountsCon {
  position: absolute;
  bottom: -48%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: max-content;
  height: auto;
  padding: 10px 25px;
  background-color: #98000e;
  border: 3px solid #fff000;
  border-radius: 33px; 
  z-index: 2;
}

.drawCountsCon p {
  color: #fefcc0;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
}

.drawCountsCon span {
  color: #fffc00;
}

/* --------------------------------------------------- */
.navi-con {
  width: max-content;
  position: absolute;
  bottom: -70%;
  right: -4%;
  z-index: 3;
}

.menuBtn {
  height:80px;
  width: 80px;
  cursor: pointer;
  overflow: hidden;
}

#homeBtn {
  background-image: url(../images/navigation-btn/home-icon.png);
}

#musicBtn {
  background-image: url(../images/navigation-btn/music-icon.png);
}

#musicBtn.musicMuted {
  background-image: url(../images/navigation-btn/music-icon-off.png);
}

#homeBtn, #musicBtn, #musicBtn.musicMuted {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* --------------------------------------------------- */
.game-con {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ----------------- */
#game .intro {
  position: relative;
  height: 70%;
  width: 100%;
  bottom: 0;
}

#game .intro::before {
  left: -8%;
  background: url(../images/game/intro/dragon-main.png);
  animation: introAnimation 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

#game .intro::after{
  right: -8%;
  background: url(../images/game/intro/tiger-main.png);
  animation: introAnimation 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes introAnimation {
  0% { transform: translateY(0); }
  50% { transform: translateY(4%); }
  100% { transform: translateY(0); }
}

#game .intro::before,
#game .intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 65%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 1;
}

#game .intro-game-btns{
  position: absolute;
  bottom: -1%;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: url(../images/game/intro/bottom-panel.png);
  background-size: 100% 65%;
  background-position: bottom;
  background-repeat: no-repeat;
  padding: 15px 110px 24px;
}

#game .intro-game-btns #ruleBtn{
  background: url(../images/desktop/btn-rule.png);
  width: 30%;
  height: 95px;
}

#game .intro-game-btns #startbtn{
  background: url(../images/desktop/btn-start.png);
  width: 36%;
  height: 115px;
}

#game .intro-game-btns #recordBtn{
  background: url(../images/desktop/btn-record.png);
  width: 30%;
  height: 95px;
}

#game .intro-game-btns #ruleBtn, 
#game .intro-game-btns #startbtn, 
#game .intro-game-btns #recordBtn{
  position: relative;
  cursor: pointer;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#game .intro-game-btns .game-btn, .confirm-select-btn, #cvr {
  transition: transform .1s ease-in-out;
}

#game .intro-game-btns .game-btn.clicked, .confirm-select-btn.clicked, #cvr.clicked,#ConfirmBtn.clicked {
  transform: scale(0.8)!important;
}

#game .intro-game-btns #startbtn.point::before{
  content: '';
  position: absolute;
  top: -4px;
  right: -18%;
  height: 100px;
  width: 100px;
  background-image: url(../images/pointer.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  transform: translateX(-37%);
  animation: pointImg 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pointImg {
  0% { 
    transform: translateX(-37%);
    top: -32px;
  }
  50% { 
    transform: translateX(0%); 
    top: -41px;
  }
  100% { 
    transform: translateX(-37%);
    top: -32px;
  }
}

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

img.selection-title {
  height: 70px;
}

.selections-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;
  margin: 20px 0px;
}

.scissors-con, .rock-con, .paper-con{
  position: relative;
  height: 220px;
  width: 33%;
  cursor: pointer;
}

.scissors-con::before{ background-image: url(../images/game/selections/select-scissors.png); }
.scissors-con::after{ background-image: url(../images/game/selections/select-scissors-active.png); }

.rock-con::before{ background-image: url(../images/game/selections/select-rock.png); }
.rock-con::after{ background-image: url(../images/game/selections/select-rock-active.png); }

.paper-con::before{ background-image: url(../images/game/selections/select-paper.png); }
.paper-con::after{ background-image: url(../images/game/selections/select-paper-active.png); }

.scissors-con::before, .scissors-con::after,
.rock-con::before, .rock-con::after,
.paper-con::before, .paper-con::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: 203px 200px;
  background-repeat: no-repeat;
}

.confirm-select-btn{
  width: 220px;
  cursor: pointer;
}

.confirm-select-btn img {
  width: 100%;
}

.confirm-select-btn.disabled {
  pointer-events: none;
  cursor: auto;
}
/* -----selection animation---------------- */
.selections-grid .scissors-con, 
.selections-grid .rock-con, 
.selections-grid .paper-con{
  transform: translateX(0%) scale(1);
  transition: transform 0.3s ease-in-out; /* Smoother */
  will-change: transform; /* Helps browser optimize performance */
}

.selections-grid.scissors-selected .scissors-con { transform: translateX(0%) scale(1.2); }
.selections-grid.scissors-selected .rock-con { transform: translateX(10%) scale(1); }
.selections-grid.scissors-selected .paper-con { transform: translateX(10%) scale(1); }

.selections-grid.rock-selected .scissors-con { transform: translateX(-10%) scale(1); }
.selections-grid.rock-selected .rock-con { transform: translateX(0%) scale(1.2); }
.selections-grid.rock-selected .paper-con { transform: translateX(10%) scale(1); }

.selections-grid.paper-selected .scissors-con { transform: translateX(-10%) scale(1); }
.selections-grid.paper-selected .rock-con { transform: translateX(-10%) scale(1); }
.selections-grid.paper-selected .paper-con { transform: translateX(0%) scale(1.2); }

/* //------------------ */

.scissors-con::before, .rock-con::before, .paper-con::before{  opacity: 1; }
.scissors-con::after, .rock-con::after, .paper-con::after{ opacity: 0; }

.scissors-con.selected::before, .rock-con.selected::before, .paper-con.selected::before{  opacity: 0; }
.scissors-con.selected::after, .rock-con.selected::after, .paper-con.selected::after{ opacity: 1; }

/* ------------------------------------------------------------------------------------------------------- */
.showdown {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70%;
}

.countdown-con {
  position: relative;
  height: 177px;
  width: 177px;
  z-index: 2;
}

.countdown-three{
  background: url(../images/game/showdown/countdown/3.png);
}

.countdown-two{
  background: url(../images/game/showdown/countdown/2.png);
}

.countdown-one{
  background: url(../images/game/showdown/countdown/1.png);
}

.vs{
  background: url(../images/game/showdown/vs.png);
}

.countdown-three, .countdown-two, .countdown-one, .vs{
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.versus-con {
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 100%;
  width: 91%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.pc-side, .player-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.versus-con #pc,
.versus-con #player{
  height: 300px;
  width: 300px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.pc-side .pc-label, .player-side .player-label {
  height: 90px;
}

/* // showdown animation --- */
.countdown-three, .countdown-two, .countdown-one{
  transform: scale(1.5);
}

.vs {
  transform: scale(2.5);
}

.pc-side, .player-side {
  transform: scale(1.3);
}

.countdown-three, .countdown-two, .countdown-one, .vs,
.pc-side, .player-side{
  opacity: 0;
}

/* -when the countdown & showndown  show--- */
#game.showdown-phase .countdown-three{
  animation: showCount 0.1s linear forwards,
            countdownAnimation 0.5s ease-in-out forwards 0.1s,
            hideCount 0.02s linear forwards 1.1s;
}

#game.showdown-phase .countdown-two{
  animation: showCount 0.1s linear forwards 1.1s,
            countdownAnimation 0.5s ease-in-out forwards 1.1s,
            hideCount 0.02s linear forwards 2.1s;
}

#game.showdown-phase .countdown-one{
  animation: showCount 0.1s linear forwards 2.1s,
            countdownAnimation 0.5s ease-in-out forwards 2.1s,
            hideCount 0.02s linear forwards 3s;
}

#game.showdown-phase .vs{
  animation: showCount 0.1s linear forwards 3s;
}

#game.showdown-phase .pc-side, 
#game.showdown-phase .player-side {
  animation: showCount 0.1s linear forwards 3.3s,
            showFinalshowdown 0.2s ease-in-out forwards 3.3s;
}

@keyframes countdownAnimation {
  0% { transform: scale(1.5); }
  50% { transform: scale(0.6); }
  100% { transform: scale(1.2); }
}

@keyframes showFinalshowdown {
  0% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes hideCount{
  to { opacity: 0; }
}

@keyframes showCount{
  to { opacity: 1; }
}

/* -animate the winner side or if tie--- */
#game.showdown-phase .versus-con.lose .pc-side{
  opacity: 1;
  animation: pulse 1s ease-in-out forwards;
}

#game.showdown-phase .versus-con.tie .pc-side,
#game.showdown-phase .versus-con.tie .player-side{
  opacity: 1;
  animation: pulse 1s ease-in-out forwards;
}

#game.showdown-phase .versus-con.win .player-side{
  opacity: 1;
  animation: pulse 1s ease-in-out forwards;
}

@keyframes pulse {
  0% { transform: scale(1); }
  20% { transform: scale(1.2); }
  40% { transform: scale(1); }
  60% { transform: scale(1.2); }
  80% { transform: scale(1); }
  100% { transform: scale(1.2); }
}


/* //---------handle click game------------ */
#game.selection-phase #gameIntro.intro,

#game.showdown-phase #gameIntro.intro,
#game.showdown-phase #gameSelection.selections,

#game.showdown-result #gameIntro.intro,
#game.showdown-result #gameShowdown.showdown {
  display: none;
}

#game.selection-phase #gameSelection.selections,
#game.showdown-phase #gameShowdown.showdown {
  display: flex;
}


/* --------------------------------------- */
#popupContainer{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgb(0 0 0 / 50%);
  z-index: 9;
  overflow: hidden;
}

/* --------------------------------------- */
#popupContainer.open-lose-popup,
#popupContainer.open-lose-popup #loseContainer{
  display: flex;
}

#loseContainer {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
}

.tiger-lose {
  position: relative;
  width: 480px;
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiger-lose .tiger{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
  transform: scale(1.5);
}

.tiger-lose .tiger::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../images/lose_pop/tiger-lose.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(0);
}

.tiger-lose .shi,
.tiger-lose .bai{
  height: 200px;
  position: absolute;
  top: 38%;
  opacity: 0;
  transform: translateY(-50%) scale(1.5);
  z-index: 2;
}

.tiger-lose .shi{
  left: -14%;
}

.tiger-lose .bai{
  right: -27%;
}

/* ----lose animation----- */
#popupContainer.open-lose-popup .tiger-lose .tiger{
    animation: popTiger 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

#popupContainer.open-lose-popup .tiger-lose .tiger::before{
   animation: tigerLoseLoop 1s ease-in-out 0.3s infinite;
}

#popupContainer.open-lose-popup .tiger-lose .shi{
    animation: showAni 0.1s linear forwards 0.1s,
              popShiBai 0.5s ease-in-out forwards 0.1s;
}

#popupContainer.open-lose-popup .tiger-lose .bai{
    animation: showAni 0.1s linear forwards 0.3s,
              popShiBai 0.5s ease-in-out forwards 0.3s;
}

@keyframes popShiBai {
  0% { transform: translateY(-50%) scale(1.5); }
  50% { transform: translateY(-50%) scale(0.9); }
  100% { transform: translateY(-50%) scale(1); }
}

/* --------------------------------------- */
#popupContainer.open-tie-popup,
#popupContainer.open-tie-popup #tieContainer{
  display: flex;
}

#tieContainer {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
}

.tie-container {
  position: relative;
  width: 800px;
  height: 65%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tie-container .dragon{
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  transform: scale(1.5);
}

.tie-container .dragon::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../images/tie_pop/dragon-tie.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(0);
}

.tie-container .tiger{
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
}

.tie-container .tiger::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../images/tie_pop/tiger-tie.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(0);
}

.ping-jv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ping, .jv {
  height: 130px;
  opacity: 0;
  transform: scale(1.5);
}

@keyframes popPingJv {
  0% { transform: scale(1.5); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ----tie animation----- */
#popupContainer.open-tie-popup .tie-container .dragon,
#popupContainer.open-tie-popup .tie-container .tiger{
    animation: popTiger 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

#popupContainer.open-tie-popup .tie-container .dragon::before,
#popupContainer.open-tie-popup .tie-container .tiger::before{
   animation: tigerLoseLoop 1s ease-in-out 0.3s infinite;
}

#popupContainer.open-tie-popup .tie-container .ping{
    animation: showAni 0.1s linear forwards 0.1s,
              popPingJv 0.5s ease-in-out forwards 0.1s;
}

#popupContainer.open-tie-popup .tie-container .jv{
    animation: showAni 0.1s linear forwards 0.3s,
              popPingJv 0.5s ease-in-out forwards 0.3s;
}

/* --------------------------------------- */
#popupContainer.open-win-popup,
#popupContainer.open-win-popup #winContainer{
  display: flex;
}

#winContainer {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
}

.tiger-win {
  position: relative;
  width: 480px;
  height: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiger-win .tiger{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: absolute;
  transform: scale(1.5);
}

.tiger-win .tiger::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../images/win_pop/tiger-win.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(0);
}

.tiger-win .sheng,
.tiger-win .li{
  height: 200px;
  position: absolute;
  top: 54%;
  opacity: 0;
  transform: translateY(-50%) scale(1.5);
  z-index: 2;
}

.tiger-win .sheng{
  left: -14%;
}

.tiger-win .li{
  right: -27%;
}

/* ----win animation----- */
#popupContainer.open-win-popup .tiger-win .tiger{
    animation: popTiger 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

#popupContainer.open-win-popup .tiger-win .tiger::before{
   animation: tigerLoseLoop 1s ease-in-out 0.3s infinite;
}

#popupContainer.open-win-popup .tiger-win .sheng{
    animation: showAni 0.1s linear forwards 0.1s,
              popShengLi 0.5s ease-in-out forwards 0.1s;
}

#popupContainer.open-win-popup .tiger-win .li{
    animation: showAni 0.1s linear forwards 0.3s,
              popShengLi 0.5s ease-in-out forwards 0.3s;
}

@keyframes popShengLi {
  0% { transform: translateY(-50%) scale(1.5); }
  50% { transform: translateY(-50%) scale(0.9); }
  100% { transform: translateY(-50%) scale(1); }
}


/* ------lose tie win key animtion--------------------------------- */
@keyframes showAni{
    to { opacity: 1; }
}

@keyframes popTiger {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes tigerLoseLoop {
  0% { transform: translateY(0); }
  50% { transform: translateY(2%); }
  100% { transform: translateY(0); }
}

/* --------------------------------------- */
#popupContainer.open-value-result-popup,
#popupContainer.open-value-result-popup #valueResultContainer{
  display: flex;
}

#valueResultContainer {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.value-result {
  position: relative;
  width: 450px;
  height: 550px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 33px;
}

.treasure-box{
  height: 260px;
}

#winValue {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -41px;
}

.digits {
  display: block;
  height: 62px;
  width: 45px;
  margin: 0px 1px;
}

.digits.digit-1 {
  height: 60px;
  width: 35px;
}

.digit-0 { background: url(../images/popup/numbers/0.png); }
.digit-1 { background: url(../images/popup/numbers/1.png); }
.digit-2 { background: url(../images/popup/numbers/2.png); }
.digit-3 { background: url(../images/popup/numbers/3.png); }
.digit-4 { background: url(../images/popup/numbers/4.png); }
.digit-5 { background: url(../images/popup/numbers/5.png); }
.digit-6 { background: url(../images/popup/numbers/6.png); }
.digit-7 { background: url(../images/popup/numbers/7.png); }
.digit-8 {background: url(../images/popup/numbers/8.png);}
.digit-9 { background: url(../images/popup/numbers/9.png); }

.digit-0, .digit-1, .digit-2, .digit-3, .digit-4,
.digit-5, .digit-6, .digit-7, .digit-8, .digit-9 {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#cvr {
  cursor: pointer;
  width: 40%;
  margin-top: 12px;
}

.confirm-value {
  width: 100%;
}

#valueResultContainer .close-popup {
  position: absolute;
  top: 21%;
  right: 1%;
  height: 50px;
  width: 50px;
  background: url(../images/btn-close.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

img.gem-green {
  position: absolute;
  top: 38%;
  right: 4%;
  height: 70px;
}


img.gem-red {
  position: absolute;
  top: 54%;
  left: 7%;
  height: 70px;
}

img.gem-purple {
  position: absolute;
  bottom: 16%;
  right: 6%;
  height: 50px;
}

.close-popup.disabled,
.confirm-value.disabled {
  cursor: auto;
  pointer-events: none;
}

/* / result value popup animation -------- */
.value-result,
#valueResultContainer .close-popup,
img.gem-green, img.gem-red, img.gem-purple,
.treasure-box, #winValue, .confirm-value {
  transform: scale(0);
}

#popupContainer.open-value-result-popup .value-result {
  animation: scaleUp 0.3s ease-in-out forwards;
}

#popupContainer.open-value-result-popup .treasure-box {
  animation: scaleUp 0.3s ease-in-out 0.1s forwards;
}

#popupContainer.open-value-result-popup #winValue {
  animation: scaleUp 0.3s ease-in-out 0.2s forwards;
}

#popupContainer.open-value-result-popup img.gem-green {
  animation: scaleUp 0.3s ease-in-out 0.3s forwards,
              gemShining 1.7s ease-in-out 0.7s infinite;
}

#popupContainer.open-value-result-popup img.gem-red {
  animation: scaleUp 0.3s ease-in-out 0.3s forwards,
              gemShining2 1.4s ease-in-out 0.7s infinite;
}

#popupContainer.open-value-result-popup img.gem-purple{
  animation: scaleUp 0.3s ease-in-out 0.4s forwards,
            gemShining3 1.5s ease-in-out 0.7s infinite;
}

#popupContainer.open-value-result-popup .close-popup {
  animation: scaleUp 0.3s ease-in-out 0.4s forwards;
}

#popupContainer.open-value-result-popup .confirm-value {
  animation: scaleUp 0.3s ease-in-out 0.5s forwards;
}

@keyframes scaleUp {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes gemShining {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(0.8) rotate(40deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(0.8) rotate(-32deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes gemShining2 {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(0.8) rotate(10deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(0.8) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes gemShining3 {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(0.8) rotate(-10deg); }
  50% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(0.8) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* --------------------------------------- */
#popupContainer.open-rule-gameplay-popup,
#popupContainer.open-rule-gameplay-popup #rulesGameplayContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#rulesGameplayContainer {
  position: relative;
  display: none;
  width: 600px;
  background: linear-gradient(180deg, #ffbe21 0%, #a12d00 100%);
  border-radius: 15px;
  padding: 50px 25px 35px;
}

#rulesGameplayContainer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 98%;
  width: 99%;
  background: linear-gradient(180deg, #fff1c0 0%, #d2821a 100%);
  border-radius: 15px;
  z-index: 1;
}

img#rgCloseBtn {
  position: absolute;
  top: -6%;
  right: -7%;
  height: 40px;
  cursor: pointer;
}

img.rg-label {
  position: absolute;
  top: -7%;
  left: 50%;
  transform: translate(-50%);
  width: 40%;
  z-index: 2;
}

.rg-grid,
.rg-contents {
  position: relative;
  z-index: 2;
}

.rg-grid{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.rg-grid img{
  height: 200px;
}

.rg-contents {
  padding: 15px 15px 15px 10px;
  border-radius: 15px;
  background: #fcf3d9;
  border: 2px solid #d52e00;
}

.rg-contents .dets{
  font-size: 16px;
  color: #3b3b3b;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
  padding-left: 10px;
}

.rg-contents .dets p,
.rg-contents .dets span,
.rg-contents .dets div{
  direction: ltr;
}

.rg-contents .dets::-webkit-scrollbar {
  width: 5px;
}

.rg-contents .dets::-webkit-scrollbar-thumb {
  background: #3b3b3b52; 
  border-radius: 10px;
}

.rg-contents .dets .highlight{
  color: #c20000;
}

/* --------------------------------------- */
#popupContainer.open-record-popup,
#popupContainer.open-record-popup #recordContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#recordContainer {
  position: relative;
  display: none;
  width: 350px;
  height: 400px;
  background: rgb(255 255 255 / 50%);
  border-radius: 15px;
  padding: 5px;
}

.record-container {
  height: 100%;
  width: 100%;
  border-radius: 15px;
  background: #fcebb2;
  overflow: hidden;
}

.record-label {
  position: relative;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #ffaa17 0%, #d43c00 100%);
  padding: 15px;
  font-size: 22px;
  font-weight: 600;
  color: #fcebb2;
}

.record-table {
  padding: 15px;
}

.table-head {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 5px;
  font-size: 16px;
  color: white;
  background: #ca3000;
  border-radius: 10px;
  margin-bottom: 10px;
}

.time-column {
  width: 60%;
  text-align: center;
}

.bonus-column {
  width: 40%;
  text-align: center;
}

.record-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-height: 250px;
  overflow-x: hidden;
  overflow-y: auto;
}

.record-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #7f2107;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 5px;
}

.record-row:last-child {
  margin-bottom: 0px;
}

.record-row:nth-child(even) {
  background: #fff;
}

span.record-close{
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
  height: 45px;
  width: 45px;
  border-radius: 100%;
  overflow: hidden;
  cursor: pointer;
  z-index: 3;
}

span.record-close::after,
span.record-close::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 50%;
  width: 3px;
  background: #fff;
  border-radius: 5px;
}

span.record-close::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

span.record-close::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.record-table p{
  text-align: center;
  font-size: 22px;
  font-weight: 600;
}

/* --------------------------------------- */
#popupContainer.open-sysmtempromt-popup, 
#popupContainer.open-sysmtempromt-popup #sysmtempromtContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#sysmtempromtContainer {
  display: none;
  position: relative;
  width: 450px;
  height: 200px;
  background: linear-gradient(180deg, #ffbe21 0%, #a12d00 100%);
  border-radius: 15px;
  padding: 35px;
}

#sysmtempromtContainer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 98%;
    width: 99%;
    background: linear-gradient(180deg, #fff1c0 0%, #d2821a 100%);
    border-radius: 15px;
    z-index: 1;
}

img#spCloseBtn {
  position: absolute;
  top: -35%;
  right: -9%;
  height: 40px;
  cursor: pointer;
}

p#sysmtempromtTxt {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: 600;
  color: #d52e00;
  text-align: center;
}

#ConfirmBtn {
  position: absolute;
  z-index: 2;
  width: 35%;
  height: auto;
  bottom: -17%;
  transition: transform .1s ease-in-out;
}

@media screen and (max-height: 666px){
  .main-game-container {
    width: 750px;
  }

  .schedule-bar p {
    font-size: 22px;
  }

  .drawCountsCon p {
    font-size: 18px;
  }

  .menuBtn {
    height: 70px;
    width: 70px;
  }
}

/* 針對接近 2560x1440 的解析度套用的樣式 */
@media only screen and (min-width: 2500px) and (max-width: 2620px) {
  #game .intro::before, #game .intro::after { 
    width: 94%;
}
#game .intro::before {
    left: -34%;
    
}
#game .intro::after {
    right: -30%;
    
}
}