/* ---- click button animation ----- */
 .confirmbtn, #homeBtn, #musicBtn{
  transition: transform .1s ease-in-out;
}

.confirmbtn:active,
#homeBtn:active,
#musicBtn:active{
  transform: scale(0.8);
}

.confirmbtn::after,
#homeBtn::after,
#musicBtn::after{
  transform: scale(1);
}

* {
  caret-color: transparent;
}
/* -------------------------------- */
.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;
}

.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;
}

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

 body {
  margin: 0;
 }

#happyClawMachine {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-position: bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --------------------------------------------------- */
.maincontainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 75px;
  background: url(../images/desktop/clawmachine_bg.png);
  background-position: bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --------------------------------------------------- */
.maintitle-con {
  position: relative;
  width: 63%;
  margin: 0px auto;
}

.maintitle-con img.title {
  width: 100%;
  height: auto;
}

.time-info {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  width: max-content;
  font-weight: 600;
  color: #fff;
}

.time-info span.colored {
  color: #f39307;
}

/* --volume---------- */
.menuBtn {
  display: flex;
  width: max-content;
  position: absolute;
  top: 19%;
  right: -9%;
  flex-direction: column;
}

.menuBtn p {
  cursor: pointer;
  position: relative;
}

.menuBtn p img.menuIco {
  padding: 0px;
  height: 55px;
  width: 55px;
  border: 3px solid #ffffff;
  border-radius: 10px;
}

.menuBtn p #homeBtn {
  background: #530b6f;
}

.menuBtn p #musicBtn {
  background: #87124e;
}

/* .menuBtn p #ruleBtn {
  background: #08582c;
}

.menuBtn p #recordBtn {
  background: #e31e89;
} */

.menuBtn p span {
  font-size: 32px;
  font-weight: 900;
  color: #5e177c;
  position: relative;
  margin-left: 5px;

}

p#backgroundMusic.musicMuted::after {
  position: absolute;
  content: '';
  top: 51%;
  left: 22%;
  width: 1.5px;
  height: 50%;
  color: #ffffff;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.7);
  pointer-events: none;
  background-color: #ffffff;
  border-radius: 5px;
}

/* .menuBtn div:first-child{
  margin-right: 15px;
} */

.menuBtn div:nth-child(2){
  margin-top: 15px;
}

/* --------------------------------------------------- */
.clawmachine {
  position: relative;
  top: -5px;
  width: 100%;
  height: 51%;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.clawmachine::before {
  content: '';
  position: absolute;
  bottom: 9px;
  left: 8px;
  width: 22%;
  height: 25%;
  background: url(../images/tong.png);
  background-position: bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.clawmachine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/mirror.png);
  background-position: bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

#machine {
  position: relative;
  bottom: 9px;
  right: 12px;
  height: 100%;
  width: 75%;
  pointer-events: auto;
}

img.prize {
  /* height: 100px;
  width: 100px; */
  width: 14%;
  position: absolute;
}

img.prize.p1, img.prize.p2, img.prize.p3, img.prize.p4, img.prize.p5, img.prize.p6,
img.prize.p7, img.prize.p8, img.prize.p9, img.prize.p10, img.prize.p11, img.prize.p12 {
  bottom: 0%;
}

img.prize.p13 {
  bottom: 15%;
}

img.prize.p14, img.prize.p16{
  bottom: 12%;
}

img.prize.p15, img.prize.p17{
  bottom: 18%;
}

img.prize.p18 {
  bottom: 7%;
}

img.prize.p13, img.prize.p14, img.prize.p15, img.prize.p16 {
  z-index: -2;
}

img.prize.p17 {
  z-index: -3;
}

img.prize.p18 {
  z-index: -4;
}

img.prize.p1 { right: 0%; transform: rotate(45deg); }
img.prize.p2 { left: 0%; transform: rotate(-45deg); }
img.prize.p3 { right: 16%; transform: rotate(-15deg); }
img.prize.p4 { left: 16%; transform: rotate(15deg); }
img.prize.p5 { right: 34%; transform: rotate(27deg); }
img.prize.p6 { left: 34%; transform: rotate(-27deg); }
img.prize.p7 { left: 7%; transform: rotate(-27deg); }
img.prize.p8 { right: 7%; transform: rotate(27deg); }
img.prize.p9 { left: 25%; transform: rotate(-50deg); }
img.prize.p10 { right: 25%; transform: rotate(50deg); }
img.prize.p11 { right: 48%; transform: rotate(17deg); }
img.prize.p12 { left: 48%; transform: rotate(-17deg); }
img.prize.p13 { left: 18%; transform: rotate(-17deg); }
img.prize.p14 { left: 29%; transform: rotate(0deg); }
img.prize.p15 { left: 45%; transform: rotate(10deg); }
img.prize.p16 { right: 8%; transform: rotate(-37deg); }
img.prize.p17 { right: 19%; transform: rotate(-37deg); }
img.prize.p18 { right: 28%; transform: rotate(-37deg); }

/* ----- */
.claw-con {
  position: absolute;
  top: 5px;
  left: 7%;
  height: 22%;
  width: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: -3;
}

img.clawstick {
  position: relative;
  left: 1px;
  height: 100%;
  width: 13%;
}

.claw {
  position: relative;
  top: -17px;
}

.claw::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 50%;
  height: 50%;
  background: url(../images/claw_left.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  transform: rotate(8deg);
}

.claw::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -10%;
  width: 50%;
  height: 50%;
  background: url(../images/claw-right.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  transform: rotate(-8deg);
}

img.claw-img {
  width: 100%;
  height: auto;
}

/* ----- */
.grabbed-prize {
  position: absolute;
  bottom: -44%;
  left: 50%;
  width: 100px;
  height: 100px;
  z-index: -3;
}

.grabbed-prize.p1 {
  transform: translate(-50%, -0%) rotate(48deg);
  background: url(../images/prize/ball_1.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.grabbed-prize.p2 {
  transform: translate(-50%, -0%) rotate(-19deg);
  background: url(../images/prize/ball_2.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.grabbed-prize.p3 {
  transform: translate(-50%, -0%) rotate(25deg);
  background: url(../images/prize/ball_3.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.grabbed-prize.p4 {
  transform: translate(-50%, -0%) rotate(-33deg);
  background: url(../images/prize/ball_4.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.grabbed-prize.p5 {
  transform: translate(-50%, -0%) rotate(33deg);
  background: url(../images/prize/ball_5.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.grabbed-prize.p6 {
  transform: translate(-50%, -0%) rotate(10deg);
  background: url(../images/prize/ball_6.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* -- claw animation ---  */
.claw-con.play{
  animation: moveRightClaw 2s ease-in-out forwards, 
            downClaw 1s ease-in-out forwards 2.5s,
            upClaw 1s ease-in-out forwards 3.5s,
            moveLeftClaw 2s ease-in-out forwards 4.5s;
}

@keyframes moveRightClaw {
  0% { left: 7%; }
  100% { left: var(--end-left); }
}

@keyframes downClaw {
  0% { height: 22%; }
  100% { height: 52%; }
}

@keyframes upClaw {
  0% { height: 52%; }
  100% { height: 22%; }
}

@keyframes moveLeftClaw {
  0% { left: var(--end-left); }
  100% { left: 7%; }
}

.claw-con.play .claw::before {
  animation: grabbed-left1 1s ease-in-out forwards 2.5s,
              grabbed-left2 0.5s ease-in-out forwards 6.5s;
}

@keyframes grabbed-left1 {
  0% { transform: rotate(8deg); }
  50% { transform: rotate(28deg); }
  100% { transform: rotate(-13deg); }
}

@keyframes grabbed-left2 {
  0% { transform: rotate(-13deg); }
  100% { transform: rotate(8deg); }
}

.claw-con.play .claw::after {
  animation: grabbed-right1 1s ease-in-out forwards 2.5s,
              grabbed-right2 0.5s ease-in-out forwards 6.5s;
}

@keyframes grabbed-right1 {
  0% { transform: rotate(-8deg); }
  50% { transform: rotate(-28deg); }
  100% { transform: rotate(13deg); }
}

@keyframes grabbed-right2 {
  0% { transform: rotate(13deg); }
  100% { transform: rotate(-8deg); }
}

.claw-con.play .grabbed-prize {
  animation: dropPrize 0.5s ease-in-out forwards 6.7s;
}

@keyframes dropPrize {
  0% { bottom: -44%; }
  100% { bottom: -244%; }
}

/* --------------------------------------------------- */
.drawCountsCon {
  position: absolute;
  bottom: -31%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #230048;
  width:max-content;
  text-align: center;
  font-size: 28px;
  color: #fff;
  font-weight: 700;
  padding: 1px 30px;
  border: 2px solid #b9b1c2;
  border-radius: 35px;
}

.drawCountsCon span {
 color: #f5a907;
}

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

.button-con {
  margin-top: 37px;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 18%;
}

.btns {
  cursor: pointer;
  width: 30%;
  height: 100%;
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}

.recordBtn { background-image: url(../images/desktop/record.png); }
.startBtn { background-image: url(../images/desktop/start.png); }
.ruleBtn { background-image: url(../images/desktop/rule.png); }

.recordBtn.clicked { background-image: url(../images/desktop/record_click.png); }

.startBtn.clicked { background-image: url(../images/desktop/start_click.png); }

.ruleBtn.clicked { background-image: url(../images/desktop/rule_click.png); }
 
#maincontainer.disabled .startBtn,
#maincontainer.disabled .recordBtn,
#maincontainer.disabled .ruleBtn,
#maincontainer.disabled #homeBtnCon,
#maincontainer.disabled #backgroundMusic { 
  pointer-events: none;
  cursor: pointer;
}

.startBtn {
  position: relative;
}

.startBtn.point::after {
  content: '';
  position: absolute;
  bottom: 21%;
  right: -20%;
  height: 50%;
  width: 50%;
  background: url(../images/point.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: point 0.7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes point {
  0% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.2);  
  }
  100% { 
    transform: scale(1);
  }
}

/* --------------------------------------------------- */
.charactercontainer {
  position: absolute;
  bottom: 0%;
  left: -21%;
  height: 56%;
  width: 34%;
  z-index: 2;
}

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

img.characterEyes {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  animation: closingEye 2.5s linear infinite;
  visibility: hidden;
}

@keyframes closingEye {
  0% { 
    visibility: hidden; 
  }
  10% { 
    visibility: visible; 
  }
  15% { 
    visibility: hidden; 
  }
  50% { 
    visibility: hidden; 
  }
  60% { 
    visibility: hidden; 
  }
  100% { 
    visibility: hidden; 
  }
}

/* --------------------------------------------------- */
.nota {
  position: absolute;
  height: 160px;
  width: auto;
}

.nota-1 { top: 12%; left: 7%; } 
.nota-2 { top: 42%; right: 5%; } 
.nota-3 { bottom: 12%; right: 10%; }


.nota-1 {
  transform: rotate(0deg);
  animation: nota1 1.5s ease-in-out infinite;
}

@keyframes nota1 {
  0% { 
    transform: rotate(0deg);
  }
  25% { 
    transform: rotate(40deg);
  }
  50% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(0deg);
  }
}


.nota-2 {
  transform: rotate(40deg);
  animation: nota2 1.5s ease-in-out infinite;
}

@keyframes nota2 {
  0% { 
    transform: rotate(40deg);
  }
  30% { 
    transform: rotate(0deg);
  }
  70% { 
    transform: rotate(40deg);
  }
  100% { 
    transform: rotate(40deg);
  }
}

.nota-3 {
  transform: rotate(-12deg);
  animation: nota3 1.5s ease-in-out 2s infinite;
}

@keyframes nota3 {
  0% { 
    transform: rotate(-12deg);
  }
  30% { 
    transform: rotate(12deg);
  }
  70% { 
    transform: rotate(-12deg);
  }
  100% { 
    transform: rotate(-12deg);
  }
}
/* --------------------------------------------------- */
.popup-con {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(0 0 0 / 50%);
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
}

.popup-con.p1, .popup-con.p2, .popup-con.p3,
.popup-con.p4, .popup-con.p5, .popup-con.p6 {
  display: flex;
}

.prize-icon {
  position: absolute;
  height: 300px;
  width: 300px;
  top: 129%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  display: none;
}

.popup-con.p1 .prize-icon{
  background: url(../images/prize/ball_1.png);
  background-position: center;
  background-size: contain;
}

.popup-con.p2 .prize-icon{
  background: url(../images/prize/ball_2.png);
  background-position: center;
  background-size: contain;
}

.popup-con.p3 .prize-icon{
  background: url(../images/prize/ball_3.png);
  background-position: center;
  background-size: contain;
}

.popup-con.p4 .prize-icon{
  background: url(../images/prize/ball_4.png);
  background-position: center;
  background-size: contain;
}

.popup-con.p5 .prize-icon{
  background: url(../images/prize/ball_5.png);
  background-position: center;
  background-size: contain;
}

.popup-con.p6 .prize-icon{
  background: url(../images/prize/ball_6.png);
  background-position: center;
  background-size: contain;
}

img.white-star.star1, img.white-star.star2, img.white-star.star3 {
  position: absolute;
  height: 80px;
}

.popup-con.p1 .prize-icon, .popup-con.p2 .prize-icon, .popup-con.p3 .prize-icon,
.popup-con.p4 .prize-icon, .popup-con.p5 .prize-icon, .popup-con.p6 .prize-icon{
  display: flex;
  animation: prizeIcon-up 0.5s ease-in-out forwards,
              prizeIcon-scaleOut 0.3s ease-in-out forwards 1.8s;
}

img.white-star.star1 {
  right: -33%;
  bottom: 10%;
  opacity: 1;
  transform: rotate(0deg);
  animation: starRotate 2s linear infinite,
              fadeStar 0.2s ease-in-out forwards 0.6s;
}

img.white-star.star2 {
  left: -33%;
  bottom: 40%;
  transform: scale(0);
  animation: starScaleIn 0.2s ease-in-out forwards 0.8s,
              starRotate 2s linear infinite 1s,
              fadeStar 0.2s ease-in-out forwards 1.2s;
}

img.white-star.star3 {
  right: -23%;
  top: 0%;
  transform: scale(0);
  animation: starScaleIn 0.2s ease-in-out forwards 1.2s,
              starRotate 2s linear infinite 1.4s,
              fadeStar 0.2s ease-in-out forwards 1.6s;
}

@keyframes prizeIcon-up {
  0% { top: 129%; }
  100% { top: 50%; }
}

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


@keyframes starRotate {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

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

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

/*------*/
.pop-prize {
  position: relative;
  width: 45%;
  transform: scale(0);
  display: none;
}

.popup-con.p1 .pop-prize, .popup-con.p2 .pop-prize, .popup-con.p3 .pop-prize,
.popup-con.p4 .pop-prize, .popup-con.p5 .pop-prize, .popup-con.p6 .pop-prize {
  display: flex;
  animation: scaleUp 0.3s ease-in-out forwards 2.1s;
}

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

.pop-prize img.pop-prize-bg {
  width: 100%;
  height: 100%;
}

.pop-prize .popprizeimg {
  width: 24%;
}

.pop-prize .popprize-con p {
  color: #e52022;
  filter: drop-shadow(0px 4px 2px rgba(74, 12, 12, 0.5));
  text-align: center;
  width: 100%;
  font-size: calc(100% - -84px);
  font-weight: 700;
  line-height: 1;
}

.pop-prize .popprize-con {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 133px;
}

.pop-prize .popprize-con::before {
  content: '';
  position: absolute;
  top: -8%;
  right: 3%;
  height: 70px;
  width: 70px;
  background: url(../images/star1.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: starRotate 3s linear infinite ;
}

.pop-prize .popprize-con::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 7%;
  height: 55px;
  width: 55px;
  background: url(../images/star2.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: starRotate 3s linear infinite ;
}

.pop-prize .confirmbtn.disabled {
  pointer-events: none;
  filter: grayscale(0.7);
  cursor: auto;
}

.pop-prize .confirmbtn {
  margin-top: 16px;
  width: 36%;
  position: relative;
  left: 6px;
  cursor: pointer;
}

.pop-prize .confirmbtn img{
  width: 100%;
}

/* --------------------------------------------------------- */
span.closePopUp {
  position: absolute;
  top: -25%;
  right: -14%;
  height: 45px;
  width: 45px;
  border: 2px solid #fff;
  border-radius: 100%;
  overflow: hidden;
  cursor: pointer;
  transform: scale(1.5);
  z-index: 3;
}

span.closePopUp::after,
span.closePopUp::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 50%;
  width: 1px;
  background: #fff;
}

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

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

/* --- activity rules pop up --- */
#popupContainer.rulesPopup,
#popupContainer.rulesPopup .activityRulesPopCon {
  display: flex;
}

.activityRulesPopCon {
  display: none;
  position: relative;
  height: 69%;
  width: 50%;
  background: #ffffff;
  padding: 33px 10px;
  border: 5px solid #a815b0;
  border-radius: 15px;
}

.activityRulesPopCon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  border: solid 2px #ffba00;
  transform: scale(1.06);
  z-index: -1;
}

img.activityRulesLabel {
  position: absolute;
  top: -7%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 31%;
}

.activityRulesPopCon .content {
  color: #161616;
  /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); */
  font-size: 16px;
  font-weight: 500;
  height: 99%;
  overflow: auto;
  direction: rtl;
  padding: 0px 35px;
}

.activityRulesPopCon .bonusRuleTitle {
  color: #860e91;
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

#activityRulesPopUp .content span.red{
  color: #ff0000;
}


.activityRulesPopCon .content::-webkit-scrollbar {
  width: 7px;
}
 
.activityRulesPopCon .content::-webkit-scrollbar-thumb {
  background: #6c4242; 
  border-radius: 10px;
}

.activityRulesPopCon .content p{
  direction: ltr;
}

.activityRulesPopCon span.closePopUp {
  top: -14%;
}

#gameplayRules {
  background: #eccdf8;
  display: grid;
  grid-template-columns: repeat(6, 1fr);  
  grid-column-gap: 15px;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  direction: ltr;
}

#gameplayRules .gameplayRulesCard {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gameplayRulesCard img {
  height: auto;
  width: 100%;
}

.gameplayRulesCard span {
  color: #ff4800;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  text-shadow: 
  -1.5px -1.5px 0px #ffffff,
  -1px -1.5px 0px #ffffff,
  0px -1.5px 0px #ffffff,
  1px -1.5px 0px #ffffff,
  1.5px -1.5px 0px #ffffff,
  1.5px -1px 0px #ffffff,
  1.5px  0px 0px #ffffff,
  1.5px  1px 0px #ffffff,
  1.5px  1.5px 0px #ffffff,
  1px  1.5px 0px #ffffff,
  0px  1.5px 0px #ffffff,
  -1px  1.5px 0px #ffffff,
  -1.5px  1.5px 0px #ffffff,
  -1.5px  1px 0px #ffffff,
  -1.5px  0px 0px #ffffff,
  -1.5px -1px 0px #ffffff!important;
}

/* --------------------------------------------------------- */
#popupContainer.recordPopUp,
#popupContainer.recordPopUp .recordContainer-Overlay {
  display: flex;
}

.recordContainer-Overlay {
  display: none;
  position: relative;
  /* background: linear-gradient(180deg, #FFFFFF 0%, #B62923 100%); */
  background: #a815b0;
  width: 25%;
  height: 50%;
  border-radius: 35px;
  padding: 3px;
}

.recordContainer-Overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 35px;
  border: solid 2px #ffba00;
  transform: scale(1.06);
  z-index: -1;
}

#recordContainer-Inner {
  width: 100%;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  padding: 25px 30px 30px 30px;
  /* background: linear-gradient(180deg, #f5eded 0%, #feb0ab 100%); */
  background: #ffffff;
}

img.recordPop {
  width: 55%;
  position: absolute;
  top: -9%;
  left: 50%;
  transform: translate(-50%, 0%);
}

#recordPopUp span.closePopUp {
  top: -55px;
}

#recordPopUp thead, #recordPopUp tbody, 
#recordPopUp th, #recordPopUp td { 
  display: block; 
  text-align: center;
}

#recordPopUp tr{ 
  display: flex; 
}

table#recordInfo{
  width: 100%;
  height: 100%;
}

.recordInfo-head th{
  background: #721c94;
  color: #ffd800;
  text-align: center;
  padding: 5px 15px;
}

.recordInfo-head th:first-child, .recordInfo-body  td:first-child{ width: 60%!important; }
.recordInfo-head th:last-child, .recordInfo-body  td:last-child{ width: 40%!important; }

.recordInfo-head th:first-child, .recordInfo-body  td:first-child,
.recordInfo-head th:last-child, .recordInfo-body  td:last-child{ 
  word-break: break-all; 
}

.recordInfo-body  td:last-child{ text-align: center; }

.recordInfo-body {
  height: calc(100% - 35px);
  overflow: auto;
  margin-top: 5px;
}

.recordInfo-body::-webkit-scrollbar {
  width: 3px;
}
 
.recordInfo-body::-webkit-scrollbar-thumb {
  background: #c4c2c5; 
}

.recordInfo-body::-webkit-scrollbar-track {
  padding: 5px;
}

.recordInfo-body td {
  padding: 3px 15px;
  color: #1d1d1d;
  text-align: left;
  word-wrap: break-word;
}

.recordInfo-body tr:nth-child(even) {
  background-color: #f6e7fc;
}

h4.noRecordSpan {
  text-align: center;
  font-weight: 600;
}

/* --------------------------------------------------------- */
#popupContainer.notloginPopUp, #popupContainer.notloginPopUp #notloginPopUp,
#popupContainer.noMoreDrawPopUp, #popupContainer.noMoreDrawPopUp #noMoreDrawPopUp {
  display: flex;
}

.sysmtempromtPopUpCon {
  display: none;
  position: relative;
  background: #a815b0;
  width: 25%;
  height: auto;
  border-radius: 35px;
  padding: 3px;
}

.sysmtempromtPopUpCon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 35px;
  border: solid 2px #ffba00;
  transform: scale(1.06);
  z-index: -1;
}

#sysmtempromtCon-Inner{
  width: 100%;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  padding: 85px 70px;
  background: #ffffff;
}

.sysmtempromtPopUpCon span.closePopUp {
  top: -55px;
  right: -23%;
}

.sysmtempromt-txt {
  text-align: center;
  font-weight: 600;
  font-size: 26px;
}

.sysmtempromt-confirm {
  width: 35%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, 50%);
  z-index: 1;
}

.sysmtempromt-confirm img {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1779px) and (max-width: 1980px){
  .time-info, .drawCountsCon {
    font-size: 36px;
  }

  .grabbed-prize {
    width: 140px;
    height: 140px;
  }

  img.prize {
    width: 15%;
  }

  .button-con {
    margin-top: 56px;
  }

  .btns {
    height: 100%;
  }

  .menuBtn {
    right: -6%;
  }

  #recordContainer-Inner {
    padding: 35px 30px 30px 30px;
  }

  .pop-prize .popprize-con {
    margin-top: 187px;
  }

  .nota {
    height: 200px;
  }
}

/* 1600 */
@media screen and (min-width: 1537px) and (max-width: 1600px){}

/* 1440 */
@media screen and (max-width: 1440px){
  .maincontainer {
    padding: 8px 71px;
  }

  .maintitle-con {
    width: 72%;
  }

  .time-info, .drawCountsCon {
    font-size: 30px;
  }

  .button-con {
    margin-top: 36px;
  }

  .recordContainer-Overlay {
    width: 27%;
  }

  img.prize {
    width: 16%;
  }
}

/* 1366 x 633*/
@media screen and (max-height: 665px){
  .maintitle-con {
    width: 70%!important;
  }

  .time-info, .drawCountsCon {
    font-size: 26px!important;
  }

  .clawmachine {
    top: -7px!important;
  }

  .button-con {
    margin-top: 33px!important;
  }

  .btns {
    height: 100%!important;
  }

  .grabbed-prize {
    width: 75px!important;
    height: 75px!important;
  }

  img.prize {
    width: 13%!important;
  }

}

@media screen and (max-height: 585px){

}

/* 1680 */
@media screen and (max-width: 1344px){
  .time-info, .drawCountsCon {
    font-size: 27px;
  }

  .menuBtn {
    right: -11%;
  }

  .maincontainer {
    padding: 8px 62px;
  }

  .maintitle-con {
    width: 69%;
  }

  .button-con {
    margin-top: 33px;
  }

  .grabbed-prize {
    width: 93px;
    height: 93px;
  }

  img.prize {
    width: 15%;
  }

  .recordContainer-Overlay {
    width: 30%;
  }

  .pop-prize .popprize-con p {
    font-size: calc(100% - -56px);
  }

  .pop-prize .confirmbtn {
    width: 30%;
  }

  .pop-prize .popprize-con::before {
    height: 60px;
    width: 60px;
  }

  .pop-prize .popprize-con::after {
    height: 45px;
    width: 45px;
  }
}

/* 1280 x 960*/
@media screen and (max-width: 1280px){
  .maintitle-con {
    width: 86%;
  }

  .time-info, .drawCountsCon {
    font-size: 32px;
  }

  .button-con {
    margin-top: 49px;
  }

  .activityRulesPopCon {
    width: 60%;
  }

  .recordContainer-Overlay {
    width: 33%;
  }
  .claw-con {
    width: 14%;
  }

  img.prize {
    width: 19%;
  }

  .grabbed-prize {
    width: 110px;
    height: 110px;
  }

  .nota {
    height: 127px;
  }

  .charactercontainer {
    height: 48%;
  }

}

/* 1152 */
@media screen and (max-width: 1152px){
  .time-info, .drawCountsCon {
    font-size: 28px;
  }

  .maincontainer {
    padding: 8px 54px;
  }

  .maintitle-con {
    width: 84%;
  }

  .clawmachine {
    top: -3px;
  }

  .button-con {
    margin-top: 37px;
  }

  .grabbed-prize {
    width: 100px;
    height: 100px;
  }

  .pop-prize .popprize-con {
    margin-top: 100px;
  }

  .nota {
    height: 124px;
  }

  .menuBtn {
    right: -13%;
  }

}

/* 1400 */
@media screen and (max-width: 1120px){}

/* 1280 x 1024*/
@media screen and (max-width: 1024px){
  .maintitle-con {
    width: 82% !important;
  }

  .maincontainer {
    padding: 8px 48px;
  }

  .button-con {
    margin-top: 29px !important;
  }

  .grabbed-prize {
    width: 84px !important;
    height: 84px !important;
  } 

  img.prize {
    width: 18% !important;
  }

  .pop-prize .popprize-con {
    margin-top: 90px;
  }

  .pop-prize .popprize-con p {
    font-size: calc(100% - -45px);
  }
}
@media only screen and (min-width: 2500px) and (max-width: 2620px) {
  /* 針對接近 2560x1440 的解析度套用的樣式 */
    .time-info, .drawCountsCon {
      font-size: 36px;
  }
}

.system-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.system-title img {
width: 100%;
}