/* ---- 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.webp);
  background-size: 100% 100%;
  background-position: 0% 21%;
  background-repeat: no-repeat;
}

.main-game-container{
  position: relative;
  width: 725px;
  height: 635px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
}

/* ---------------------------------------------------------- */
.title-event-time {
  position: relative;
  width: 44%;
  top: -24px;
}

.title-event-time .main-title {
  width: 100%;
}

/* //------------------------------------- */
.event-time {
  width: max-content;
  height: auto;
  position: absolute;
  bottom: 3%;
  left: 50.5%;
  transform: translate(-50%, -50%);
}

.event-time p{
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
}

/* --------------------------------------------------- */
.drawCountsCon {
  width: max-content;
  height: auto;
  padding: 6px 15px;
  background-color: #461313;
  border: 3px solid #ffa200;
  border-radius: 33px; 
  position: absolute;
  bottom: -35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.drawCountsCon span {
  color: #fecb0d;
}

/* --------------------------------------------------- */
.navi-con {
  width: max-content;
  position: absolute;
  top: 58%;
  right: -42%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

#homeBtn {
  background-image: url(../images/buttons/home-icon.webp);
}

#musicBtn {
  background-image: url(../images/buttons/music-icon.webp);
}

#musicBtn.music-muted {
  background-image: url(../images/buttons/music-icon-off.webp);
}

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

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

.center-animation {
  position: absolute;
  bottom: -7%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, 0%);
}

/* --------------------------------------------------- */
.game-buttons {
  position: absolute;
  bottom: 13%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-btn {
  position: relative;
  height: 100px;
  width: 100px;
  cursor: pointer;
}

.game-btn .icon{
  width: 100%;
}

.game-btn.click .icon { 
  animation: click 0.2s ease-out forwards;
}

@keyframes click { 
  0% { transform: scale(1); } 
  50% { transform: scale(0.8); }
  100% { transform: scale(1); } 
}

.game-btn img.txt {
  width: 100%;
  position: absolute;
  bottom: -39%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
}

.start-btn {
  width: 266px;
  height: 133px;
  position: relative;
  top: 27px;
  cursor: pointer;
  background-image: url("../images/buttons/btn-start.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.start-btn.click {
  animation: click-start 0.2s ease-out forwards;
}

@keyframes click-start { 
  0% { background-image: url("../images/buttons/btn-start.webp"); } 
  50% { background-image: url("../images/buttons/btn-start-click.webp"); }
  100% { background-image: url("../images/buttons/btn-start.webp"); } 
}

/* --------------------------------------------------- */
#mainGame.playing .center-animation{
  display: none;
}

#mainGame.disabled .center-animation,
#mainGame.disabled .navi-con{
  pointer-events: none;
}

#mainGame .cards{
  display: none;
}

#mainGame.playing .cards{
  display: grid;
}

#mainGame.playing .cards {
  width: 100%;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 0;
  position: relative;
  margin-top: 72px;
}

/* ---------- */
.cards .card {
  background: transparent;
  border: none;
  border-radius: 0;
  width: 130px;
  height: 170px;
  perspective: 1000px;
  transition: transform 1s;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow-y: unset;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
}

/* ---------- */
.cards .card .back{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  transform: translate(0, 0px);
  backface-visibility: hidden;
}

.cards .card .fly {
  position: absolute;
  height: 80%;
  width: 152%;
  z-index: 10;
  opacity: 0;
  backface-visibility: hidden;
}

/* ---------- */
.cards .card .f1 { transform: translate(-114%, 242%); }
.cards .card .f2 { transform: translate(-105%, 242%); }
.cards .card .f3 { transform: translate(-13%, 242%); }
.cards .card .f4 { transform: translate(105%, 242%); }
.cards .card .f5 { transform: translate(114%, 242%); }

/* ---------- */
@keyframes placecard-1 {
  0% { opacity: 0; transform: translate(-114%, 300%) scale(1.2) rotate(-10deg); }
  10% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(-41%, 95%) scale(1) rotate(0deg); }
}

@keyframes placecard-2 {
  0% { opacity: 0; transform: translate(-105%, 300%) scale(1.2) rotate(-10deg); }
  10% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(-31%, 95%) scale(1) rotate(0deg); }
}

@keyframes placecard-3 {
  0% { opacity: 0; transform: translate(-13%, 300%) scale(1.2) rotate(-10deg); }
  10% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(-13%, 95%) scale(1) rotate(0deg); }
}

@keyframes placecard-4 {
  0% { opacity: 0; transform: translate(105%, 300%) scale(1.2) rotate(-10deg); }
  10% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(3%, 95%) scale(1) rotate(0deg); }
}

@keyframes placecard-5 {
  0% { opacity: 0; transform: translate(114%, 300%) scale(1.2) rotate(-10deg); }
  10% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; transform: translate(0%, 95%) scale(1) rotate(0deg); }
}

.cards.placeCard1 .f1 { animation: placecard-1 0.3s ease-out forwards; }
.cards.placeCard2 .f2 { animation: placecard-2 0.3s ease-out forwards; }
.cards.placeCard3 .f3 { animation: placecard-3 0.3s ease-out forwards; }
.cards.placeCard4 .f4 { animation: placecard-4 0.3s ease-out forwards; }
.cards.placeCard5 .f5 { animation: placecard-5 0.3s ease-out forwards; }

/* ---------- */
@keyframes dropcard {
  0% { opacity: 0; transform: translateY(0px); }
  20% { opacity: 1; transform: translateY(-15px);}
  100% { opacity: 1; transform: translateY(20px); }
}

.cards.dropCard1 .b1 { animation: dropcard 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }
.cards.dropCard2 .b2 { animation: dropcard 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }
.cards.dropCard3 .b3 { animation: dropcard 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }
.cards.dropCard4 .b4 { animation: dropcard 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }
.cards.dropCard5 .b5 { animation: dropcard 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }

/* --------------------------------------------------- */
#mainGame .show-cards{
  display: none;
  height: 75px;
  width: 205px;
  background-image: url(../images/buttons/show-cards-btn.webp);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  cursor: pointer;
}

#mainGame .show-cards.click{ 
  animation: clickShowCardsBtn 0.2s ease-out forwards;
}

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

/* --------------------------------------------------- */
.cards .card .content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 6;
  transform: translate(0, 20px) rotateY( 180deg );
  backface-visibility: hidden;
}

.cards.flip .card { animation: flipCard 0.5s ease-out forwards; }

.cards.flip .card.c2 { animation-delay: 0.2s; }
.cards.flip .card.c3 { animation-delay: 0.4s; }
.cards.flip .card.c4 { animation-delay: 0.6s; }
.cards.flip .card.c5 { animation-delay: 0.8s; }

@keyframes flipCard { 
  to { transform: rotateY(180deg) } 
}

/* --------------------------------------------------- */
#mainGame .award-name-con{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../images/award-name/award-name-bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  height: 85px;
  width: 245px;
  position: relative;
  z-index: 10;
  top: -7%;
  transform: scale(0);
}

#mainGame .award-name-con #awardName{
  width: 42%;
  height: auto;
  position: relative;
  top: -8%;
  transform: scale(0);
}

/* ------------ */
#mainGame .award-name-con.pop, 
#mainGame .award-name-con.pop #awardName{
  animation: awardNamePop 0.3s ease-out forwards;
}

#mainGame .award-name-con.pop #awardName{ animation-delay: 0.1s; }

@keyframes awardNamePop { 
  to { transform: scale(1); } 
}

/* --------------------------------------------------- */
#mainGame.playing .character {
  display: flex;
}

#mainGame .character {
  display: none;
  position: absolute;
  bottom: 14%;
  right: -24%;
  height: 344px;
}

#mainGame .character::after {
  content: '';
  height: 20%;
  width: 100%;
  background-image: url(../images/animations/shadow.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: absolute;
  bottom: 4%;
  left: 6%;
  z-index: -1;
  transform: scale(0.8);
}

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

/* --------------------------------------- */
#bonusPopupContainer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

#bonusPopupContainer.disabled {
  pointer-events: none;
  cursor: auto;
}

#bonusPopupContainer.disabled .bonus-confirm {
  filter: brightness(0.5);
}

#popupContainer.open-bonus-popup,
#popupContainer.open-bonus-popup #bonusPopupContainer{
  display: flex;
}

.bonus-outer-con {
  position: relative;
  width: 300px;
  height: 345px;
}

.bonus-outer-con::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -61px;
  height: 100px;
  width: 100px;
  background-image: url('../images/bonus/gift-1.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: -1;
}

.bonus-outer-con::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: -61px;
  height: 100px;
  width: 100px;
  background-image: url('../images/bonus/gift-2.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: -1;
}

.bonus-inner-con {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-image: url('../images/bonus/pop-bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#closeWinPop {
  position: absolute;
  top: 15%;
  right: -4%;
  width: 50px;
  height: 50px;
  z-index: 2;
  cursor: pointer;
}

#closeWinPop:active{
  transform: scale(0.8);
}

#closeWinPop::after{
  transform: scale(1);
}

#closeWinPop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('../images/buttons/close.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.win-animation {
  position: absolute;
  bottom: 12%;
  left: 0;
  z-index: 2;
  height: auto;
  width: 100%;
  pointer-events: none;
}

.winpop-bottom {
  position: relative;
  margin-bottom: -78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}

.prize-con {
  position: relative;
  width: 289px;
  height: 103px;
  background-image: url('../images/bonus/price-bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.prize-outer {
  position: relative;
  transform: translateY(-17%) translateZ(0);
  -webkit-transform: translateY(-17%) translateZ(0);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
  z-index: 3;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

#prize {
  background: linear-gradient(to bottom, #ffc000 0%, #ff0000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  filter: 
    drop-shadow(1px 0 0 white) 
    drop-shadow(-1px 0 0 white) 
    drop-shadow(0 1px 0 white) 
    drop-shadow(0 -1px 0 white) 
    drop-shadow(1px 1px 0 white) 
    drop-shadow(-1px -1px 0 white) 
    drop-shadow(1px -1px 0 white) 
    drop-shadow(-1px 1px 0 white);
}

.bonus-confirm {
  margin-top: -16px;
  position: relative;
  height: 53px;
  width: 155px;
  cursor: pointer;
  z-index: 2;
}

.bonus-confirm.click{ 
  animation: click 0.2s ease-out forwards;
}

.bonus-confirm::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bonus/confirm.webp');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ------------------------------------- */
.bonus-outer-con::before,
.bonus-outer-con::after {
  transform: scale(0) rotate(0deg);
  will-change: transform;
}

#popupContainer.open-bonus-popup .bonus-outer-con::before {
  animation: bonusPop 0.2s ease-out forwards,
              giftRightRotate 2s linear infinite 0.2s;
}

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

#popupContainer.open-bonus-popup .bonus-outer-con::after {
  animation: bonusPop 0.2s ease-out forwards,
              giftLeftRotate 2s linear infinite 0.2s;
}

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

.bonus-inner-con,
#closeWinPop::before, 
.win-animation,
.prize-con, 
.bonus-confirm::before {
  transform: scale(0);
  will-change: transform;
}

#popupContainer.open-bonus-popup .bonus-inner-con,
#popupContainer.open-bonus-popup #closeWinPop::before, 
#popupContainer.open-bonus-popup .prize-con, 
#popupContainer.open-bonus-popup .bonus-confirm::before {
  animation: bonusPop 0.2s ease-out forwards;
}

#popupContainer.open-bonus-popup .win-animation {
  animation: bonusPop1 0.2s ease-out forwards;
}

@keyframes bonusPop { 
  to { transform: scale(1); } 
}

@keyframes bonusPop1 { 
  to { transform: scale(1.3); } 
}

/* ------------------------------------- */
#ruleContainer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#popupContainer.open-rule-popup,
#popupContainer.open-rule-popup #ruleContainer{
  display: flex;
}

.rule-outer-con {
  position: relative;
  background-color: #f8f1d0;
  border: 3.5px solid #e0a321;
  border-radius: 45px;
  padding: 55px 30px 20px;
  width: 950px;
}

#closeRulePop {
  position: absolute;
  top: -17px;
  right: -1%;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: pointer;
  transition: transform .1s ease-in-out;
}

#closeRulePop:active{
  transform: scale(0.8);
}

#closeRulePop::after{
  transform: scale(1);
}

#closeRulePop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('../images/buttons/close.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}


img.game-rules-title {
  position: absolute;
  top: -43px;
  left: 0;
  width: 26%;
}

.award-grid {
  position: relative;
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  background-color: #974628;
  border: 3px solid #e0a321;
  border-radius: 25px;
  width: max-content;
  padding: 17px 13px;
  margin: 0px auto;
}

img.award-title {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
}

.tag{
  position: relative;
  background-color: #fffbe8;
  border-radius: 20px;
  height: auto;
  width: 110px;
  padding: 10px;
  margin: 0px 10px;
}

.tag::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid #e0a321;
  border-radius: 20px;
  transform: scale(0.92);
  pointer-events: none;
}

.tag::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -5px;
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
}

.tag:nth-child(2):before { background-image: url(../images/rules/tag1.webp); }
.tag:nth-child(3):before { background-image: url(../images/rules/tag2.webp); }
.tag:nth-child(4):before { background-image: url(../images/rules/tag3.webp); }
.tag:nth-child(5):before { background-image: url(../images/rules/tag4.webp); }
.tag:nth-child(6):before { background-image: url(../images/rules/tag5.webp); }
.tag:nth-child(7):before { background-image: url(../images/rules/tag6.webp); }

.bonus {
  width: 100%;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  color: #c70d0d;
  line-height: 1.2;
}

.card-type {
  border-radius: 20px;
  border: 2px solid #e0a321;
  background-color: #4c3025;
  color: white;
  font-size: 12px;
  height: 66px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 7px;
}

.rule-content-con {
  width: 100%;
  padding: 17px 5px;
  background: white;
  border-radius: 25px;
  margin-top: 15px;
  box-shadow: inset 0px 0px 3px 2px rgba(134, 104, 38, 0.24);
}

.content {
  width: 100%;
  height: 170px;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 14px;
  font-weight: 600;
  color: #5f3939;
  padding-left: 8px;
  line-height: 1.7;
}

.content::-webkit-scrollbar {
  width: 5px;
}

.content::-webkit-scrollbar-thumb {
  background: rgb(59 59 59 / 50%); 
  border-radius: 10px;
}

.content .highlight{
  color: #ff0000;
}

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

#popupContainer.open-record-popup {
  background: rgb(0 0 0 / 60%);
}

#recordContainer {
  position: relative;
  display: none;
  width: 332px;
  height: 300px;
  /* background: #e0a321; */
  border-radius: 25px;
  /* padding: 4px; */
}

img.record-title {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
}

.record-container {
  height: 100%;
  width: 100%;
  border-radius: 25px;
  background: #f8f1d0;
  overflow: hidden;
  padding-top: 20px;
  border: 4px solid #e0a321;
}

.record-table {
  padding: 15px;
}

.noRecord {
  text-align: center;
  color: #3c3535;
}

.table-head {
  /* display: flex; */
  width: 100%;
  /* justify-content: center; */
  align-items: center;
  padding: 5px;
  font-size: 16px;
  color: white;
  background: #a81717;
}

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

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

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

.record-row {
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #3c3535;
  padding: 3px;
  margin-bottom: 5px;
}

.record-row td {
  text-align: center;
}

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

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

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

#closeRecPop {
  position: absolute;
  top: -7%;
  right: -4%;
  width: 50px;
  height: 50px;
  z-index: 2;
  cursor: pointer;
}

#closeRecPop:active{
  transform: scale(0.8);
}

#closeRecPop::after{
  transform: scale(1);
}

#closeRecPop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('../images/buttons/close.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.wheels {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.wheel {
  height: 150px;
  width: 150px;
  position: absolute;
}

.wheel1 {
  top: 4%;
  left: -38%;
  transform: rotate(0deg) scale(0.6);
  animation: rotateWheel1 5s linear infinite;
}

.wheel2 {
  top: 45%;
  left: -29%;
  transform: rotate(0deg) scale(1);
  animation: rotateWheel2 5s linear infinite;
}

.wheel3 {
  top: 25%;
  right: -24%;
  transform: rotate(0deg) scale(1.1);
  animation: rotateWheel3 5s linear infinite;
}

@keyframes rotateWheel1 {
  from { transform: rotate(0deg) scale(0.6); }
  to { transform: rotate(360deg) scale(0.6); }
}

@keyframes rotateWheel2 {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes rotateWheel3 {
  from { transform: rotate(0deg) scale(1.1); }
  to { transform: rotate(360deg) scale(1.1); }
}

/* -------------------------------------------------- */
#popupContainer.open-sysmtempromt-popup, 
#popupContainer.open-sysmtempromt-popup #sysmtempromtContainer {
    display: flex;
}

#popupContainer.open-sysmtempromt-popup {
  background: rgb(0 0 0 / 60%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#sysmtempromtContainer{
  display: none;
  position: relative;
  width: 363px;
  height: 195px;
  background: #e0a321;
  border-radius: 25px;
  padding: 20px 25px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#sysmtempromtContainer::after {
    content: '';
    position: absolute;
    width: 98.5%;
    height: 96%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f7f1d0;
    border-radius: 25px;
    z-index: 1;
}

#sysmtempromtContainer p {
    z-index: 2;
    font-size: 32px;
    font-weight: bold;
    color: #3c3535;
    text-align: center;
}

img.system-title {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  z-index: 2;
}

#closesysmtempromtPop {
  position: absolute;
  top: -7%;
  right: -4%;
  width: 50px;
  height: 50px;
  z-index: 2;
  cursor: pointer;
}

#closesysmtempromtPop:active{
  transform: scale(0.8);
}

#closesysmtempromtPop::after{
  transform: scale(1);
}

#closesysmtempromtPop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('../images/buttons/close.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

@media screen and (max-height: 708px) and (min-height: 666px) {
  .main-game-container { transform: scale(1.05); }
}

@media screen and (max-height: 736px) and (min-height: 709px) {
  .main-game-container { transform: scale(1.1); }
}

@media screen and (max-height: 785px) and (min-height: 737px) {
  .main-game-container { transform: scale(1.12); }
}

@media screen and (max-height: 805px) and (min-height: 786px) and (min-width: 1241px) {
  .main-game-container { transform: scale(1.2); }
  #mainGame.playing .cards { transform: scale(0.9); }
}

@media screen and (max-height: 850px) and (min-height: 806px) and (min-width: 1241px) {
  .main-game-container { transform: scale(1.25); }
  #mainGame.playing .cards { transform: scale(0.9); }
}

@media screen and (max-height: 900px) and (min-height: 806px) and (min-width: 1400px) {
  #mainGame.playing .cards { transform: scale(1)!important; }
}

@media screen and (max-height: 900px) and (min-height: 851px) and (min-width: 1241px) {
  .main-game-container { transform: scale(1.3); }
  #mainGame.playing .cards { transform: scale(0.85); }
}

@media screen and (min-height: 901px) and (min-width: 1241px) {
  .main-game-container { transform: scale(1.4); }
  #mainGame.playing .cards { transform: scale(0.8); }
}

@media screen and (min-height: 901px) and (min-width: 1400px) {
  #mainGame.playing .cards { transform: scale(0.9); }
}

@media screen and (min-height: 901px) and (min-width: 1600px) {
  #mainGame.playing .cards { transform: scale(1); }
}

@media screen and (max-height: 605px) and (max-width: 1100px) {
    #mainGame.playing .cards {
      transform: scale(0.94);
      margin-top: 37px;
    }
}

@media screen and (max-height: 605px) and (max-width: 1050px) {
    #mainGame.playing .cards {
      transform: scale(0.9);
      margin-top: 38px;
    }
}

@media screen and (max-height: 505px) and (max-width: 950px) {
    #mainGame.playing .cards {
      transform: scale(0.86);
      margin-top: 6px;
    }
}

/* ------- */
@media screen and (min-width: 1312px) and (min-height: 666px) { #mainGame .character { right: -31%; } }
@media screen and (min-width: 1432px) and (min-height: 666px) { #mainGame .character { right: -45%; } }
@media screen and (min-width: 1652px) and (min-height: 666px) { #mainGame .character { right: -47%; } }
@media screen and (min-width: 1907px) and (min-height: 666px) { #mainGame .character { right: -57%; } }

/* ---- */
@media screen and (min-width: 1331px) and (min-height: 811px) { #mainGame .character { right: -21%; } }
@media screen and (min-width: 1441px) and (min-height: 811px) { #mainGame .character { right: -26%; } }
@media screen and (min-width: 1552px) and (min-height: 811px) { #mainGame .character { right: -31%; } }
@media screen and (min-width: 1662px) and (min-height: 811px) { #mainGame .character { right: -37%; } }
@media screen and (min-width: 1766px) and (min-height: 811px) { #mainGame .character { right: -39%; } }
@media screen and (min-width: 1907px) and (min-height: 811px) { #mainGame .character { right: -44%; } }

/* ---- */
@media screen and (min-width: 1281px) and (min-height: 950px) { #mainGame .character { right: -15%; } }
@media screen and (min-width: 1415px) and (min-height: 950px) { #mainGame .character { right: -19%; } }
@media screen and (min-width: 1587px) and (min-height: 950px) { #mainGame .character { right: -25%; } }
@media screen and (min-width: 1768px) and (min-height: 950px) { #mainGame .character { right: -31%; } }
@media screen and (min-width: 1912px) and (min-height: 950px) { #mainGame .character { right: -36%; } }
@media only screen and (min-width: 2500px) and (max-width: 2620px) {
  .center-animation {
    width: 100%;
    bottom: -23%;
  }
  .title-event-time {
    width: 60%;
    top: -180px;
  }
  .event-time p {
    font-size: 20px;
  }
  .drawCountsCon p {
    font-size: 25px;
  }
  #mainGame .show-cards {
    bottom: -10%;
  }
  #mainGame .character {
    right: -63%;
  }
}