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

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

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

* {
  caret-color: transparent;
}

#maincontainer.disabled .startBtn,
#maincontainer.disabled .recordBtn,
#maincontainer.disabled .ruleBtn,
#maincontainer.disabled #homeBtnCon,
#maincontainer.disabled #backgroundMusic { 
  pointer-events: none;
  cursor: pointer;
}
/* -------------------------------- */
.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;
 }

#gachaponMachine {
  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;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 97%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 25px;
  background: url(../images/desktop/gachaponmachine_bg.png);
  background-position: bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --------------------------------------------------- */
.maintitle-con {
  position: relative;
  width: 85%;
  top: -5%;
}

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

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

/* --------------------------------------------------- */
.drawCountsCon {
  position: absolute;
  bottom: -51%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #08192d;
  width:max-content;
  text-align: center;
  font-size: 28px;
  color: #ffd800;
  font-weight: 700;
  padding: 1px 30px;
  border: 4px solid #77b3e3;
  border-radius: 35px;
}

.drawCountsCon span {
 color: #ff7200;
}

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

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

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

.menuBtn p #homeBtn {
  background: #9426a1;
}

.menuBtn p #musicBtn {
  background: #881350;
}

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

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

.menuBtn p span {
  font-size: 27px;
  font-weight: 600;
  color: #681388;
  position: relative;
  margin-left: 5px;
}

p#backgroundMusic.musicMuted::after {
  position: absolute;
  content: '';
  top: 52%;
  left: 23%;
  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: 6px;
}

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

.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: 3;
  pointer-events: none;
}

img.prize {
  width: 11%;
  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: 7%;
  z-index: 2;
}

img.prize.p13, img.prize.p14, img.prize.p15, img.prize.p16, img.prize.p17, img.prize.p18,
img.prize.p19, img.prize.p20 {
  bottom: 22%;
  z-index: 1;
}

img.prize.p1 { right: 6%; transform: rotate(45deg); }
img.prize.p2 { left: 6%; transform: rotate(-45deg); }
img.prize.p3 { right: 21%; transform: rotate(-15deg); }
img.prize.p4 { left: 21%; transform: rotate(15deg); }
img.prize.p5 { right: 36%; transform: rotate(27deg); }
img.prize.p6 { left: 36%; transform: rotate(-27deg); }
img.prize.p7 { left: 13%; transform: rotate(-27deg); }
img.prize.p8 { right: 13%; transform: rotate(27deg); }
img.prize.p9 { left: 28%; transform: rotate(-50deg); }
img.prize.p10 { right: 28%; transform: rotate(50deg); }
img.prize.p11 { right: 49%; transform: rotate(17deg); }
img.prize.p12 { left: 49%; transform: rotate(-17deg); }
img.prize.p13 { left: 10%; transform: rotate(-17deg); }
img.prize.p14 { right: 10%; transform: rotate(0deg); }
img.prize.p15 { left: 19%; transform: rotate(10deg); }
img.prize.p16 { right: 19%; transform: rotate(-37deg); }
img.prize.p17 { left: 31%; transform: rotate(-37deg); }
img.prize.p18 { right: 31%; transform: rotate(-37deg); }
img.prize.p19 { left: 40%; transform: rotate(0deg); }
img.prize.p20 { right: 40%; transform: rotate(42deg); }

/* --------------------------------------------------------------- */
.machineBtns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: 39px;
  z-index: 3;
}

.machineBtns .arrow-con {
  width: 38%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/arrowGif.gif);
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.machineBtns .btns{
  height: 120px;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.machineBtns .startBtn{
  position: relative;
  background-image: url(../images/startBtn/button-rotate_bg.png);
  background-size: 125px 120px;
  background-repeat: no-repeat;
  background-position: center;
}

.machineBtns .startBtn img{
  height: auto;
  width: 50%;
  position: relative;
  top: -6px;
  left: 2px;
  transform: rotate(0deg);
}

.machineBtns .startBtn.point::before{
  content: '';
  position: absolute;
  bottom: -13px;
  right: -23px;
  height: 70px;
  width: 70px;
  background-image: url(../images/startBtn/point.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  animation: pointImg 1s ease-in-out infinite;
  pointer-events: none;
}

.clickHereBubble {
  position: absolute;
  top: -44px;
  right: -31px;
  height: 80px;
  width: 96px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  animation: pointImg 1s ease-in-out infinite 0.5s;
  pointer-events: none;
  display: none;
}

.machineBtns .startBtn.point .clickHereBubble{
  display: flex;
}

@keyframes pointImg {
  0% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.1);  
  }
  100% { 
    transform: scale(1);
  }
}


.machineBtns .ruleBtn img,
.machineBtns .recordBtn img{
  height: 107px;
  width: 110px;
}

.machineBtns .ruleBtn,
.machineBtns .recordBtn{
  transition: transform .1s ease-in-out;
  transform: scale(1);
}

.machineBtns .recordBtn.open,
.machineBtns .ruleBtn.open { 
  transform: scale(0.8);
}

/* ---- start game animations---------------------- */
.machineBtns .startBtn.clicked img{
  animation: rotateStartBtn 0.3s linear;
}


@keyframes rotateStartBtn {
  0% { 
    transform: rotate(0deg); 
  }
  50% { 
    transform: rotate(145deg);  
  }
  100% { 
    transform: rotate(0deg);
  }
}

.clawmachine.play img.prize.p1 { animation: bounceBall1 1.25s linear }
.clawmachine.play img.prize.p2 { animation: bounceBall2 1.25s linear }
.clawmachine.play img.prize.p3 { animation: bounceBall3 1.25s linear }
.clawmachine.play img.prize.p4 { animation: bounceBall4 1.25s linear }
.clawmachine.play img.prize.p5 { animation: bounceBall5 1.25s linear }
.clawmachine.play img.prize.p6 { animation: bounceBall6 1.25s linear }
.clawmachine.play img.prize.p7 { animation: bounceBall7 1.25s linear }
.clawmachine.play img.prize.p8 { animation: bounceBall8 1.25s linear }
.clawmachine.play img.prize.p9 { animation: bounceBall9 1.25s linear }
.clawmachine.play img.prize.p10 { animation: bounceBall10 1.25s linear }
.clawmachine.play img.prize.p11 { animation: bounceBall11 1.25s linear }
.clawmachine.play img.prize.p12 { animation: bounceBall12 1.25s linear }
.clawmachine.play img.prize.p13 { animation: bounceBall13 1.25s linear }
.clawmachine.play img.prize.p14 { animation: bounceBall14 1.25s linear }
.clawmachine.play img.prize.p15 { animation: bounceBall15 1.25s linear }
.clawmachine.play img.prize.p16 { animation: bounceBall16 1.25s linear }
.clawmachine.play img.prize.p17 { animation: bounceBall17 1.25s linear }
.clawmachine.play img.prize.p18 { animation: bounceBall18 1.25s linear }
.clawmachine.play img.prize.p19 { animation: bounceBall19 1.25s linear }
.clawmachine.play img.prize.p20 { animation: bounceBall20 1.25s linear }


@keyframes bounceBall1 {
  0% { bottom: 7%; right: 6%; }
  20% { bottom: 50%; right: 3%; }
  40% { bottom: 62%; right: 14%; }
  60% { bottom: 7%; right: 25%; }
  80%{ bottom: 62%; right: 6%; }
  100% { bottom: 7%; right: 6%; }
}

@keyframes bounceBall2 {
  0% { bottom: 7%; left: 6%; }
  20% { bottom: 50%; left: 3%; }
  40% { bottom: 62%; left: 14%; }
  60% { bottom: 7%; left: 25%; }
  80%{ bottom: 62%; left: 6%; }
  100% { bottom: 7%; left: 6%; }
}

@keyframes bounceBall3 {
  0% { bottom: 7%; right: 21%; }
  20% { bottom: 62%; right: 35%; }
  40% { bottom: 7%; right: 45%; }
  60% { bottom: 62%; right: 57%; }
  80%{ bottom: 50%; right: 82%; }
  100% { bottom: 7%; right: 21%; }
}

@keyframes bounceBall4 {
  0% { bottom: 7%; left: 21%; }
  20% { bottom: 62%; left: 35%; }
  40% { bottom: 7%; left: 45%; }
  60% { bottom: 62%; left: 57%; }
  80%{ bottom: 50%; left: 82%; }
  100% { bottom: 7%; left: 21%; }
}

@keyframes bounceBall5 {
  0% { bottom: 7%; right: 36%; }
  20% { bottom: 62%; right: 53%; }
  40% { bottom: 7%; right: 63%; }
  60% { bottom: 62%; right: 78%; }
  80%{ bottom: 21%; right: 82%; }
  100% { bottom: 7%; right: 36%; }
}

@keyframes bounceBall6 {
  0% { bottom: 7%; left: 36%; }
  20% { bottom: 62%; left: 53%; }
  40% { bottom: 7%; left: 63%; }
  60% { bottom: 62%; left: 78%; }
  80%{ bottom: 21%; left: 82%; }
  100% { bottom: 7%; left: 36%; }
}

/* ---------------------------- */
@keyframes bounceBall7 {
  0% { bottom: 7%; left: 13%; }
  20% { bottom: 62%; left: 45%; }
  40% { bottom: 7%; left: 76%; }
  60% { bottom: 46%; left: 86%; }
  80%{ bottom: 62%; left: 71%; }
  100% { bottom: 7%; left: 13%; }
}

@keyframes bounceBall8 {
  0% { bottom: 7%; right: 13%; }
  20% { bottom: 62%; right: 45%; }
  40% { bottom: 7%; right: 76%; }
  60% { bottom: 46%; right: 86%; }
  80%{ bottom: 62%; right: 71%; }
  100% { bottom: 7%; right: 13%; }
}

@keyframes bounceBall9 {
  0% { bottom: 7%; left: 28%; }
  20% { bottom: 62%; left: 48%; }
  40% { bottom: 7%; left: 74%; }
  60% { bottom: 34%; left: 86%; }
  80%{ bottom: 62%; left: 58%; }
  100% { bottom: 7%; left: 28%; }
}

@keyframes bounceBall10 {
  0% { bottom: 7%; right: 28%; }
  20% { bottom: 62%; right: 48%; }
  40% { bottom: 7%; right: 74%; }
  60% { bottom: 34%; right: 86%; }
  80%{ bottom: 62%; right: 58%; }
  100% { bottom: 7%; right: 28%; }
}

@keyframes bounceBall11 {
  0% { bottom: 7%; right: 49%; }
  20% { bottom: 62%; right: 77%; }
  40% { bottom: 50%; right: 81%; }
  60% { bottom: 7%; right: 55%; }
  80%{ bottom: 62%; right: 49%; }
  100% { bottom: 7%; right: 49%; }
}

@keyframes bounceBall12 {
  0% { bottom: 7%; left: 49%; }
  20% { bottom: 62%; left: 77%; }
  40% { bottom: 50%; left: 81%; }
  60% { bottom: 7%; left: 55%; }
  80%{ bottom: 62%; left: 49%; }
  100% { bottom: 7%; left: 49%; }
}

@keyframes bounceBall13 {
  0% { bottom: 22%; left: 10%; }
  20% { bottom: 62%; left: 10%; }
  40% { bottom: 7%; left: 21%; }
  60% { bottom: 62%; left: 21%; }
  80%{ bottom: 7%; left: 10%; }
  100% { bottom: 22%; left: 10%; }
}

@keyframes bounceBall14 {
  0% { bottom: 22%; right: 10%; }
  20% { bottom: 62%; right: 10%; }
  40% { bottom: 7%; right: 21%; }
  60% { bottom: 62%; right: 21%; }
  80%{ bottom: 7%; right: 10%; }
  100% { bottom: 22%; right: 10%; }
}

@keyframes bounceBall15 {
  0% { bottom: 22%; left: 19%; }
  20% { bottom: 62%; left: 27%; }
  40% { bottom: 7%; left: 37%; }
  60% { bottom: 62%; left: 23%; }
  80%{ bottom: 7%; left: 23%; }
  100% { bottom: 22%; left: 19%; }
}

@keyframes bounceBall16 {
  0% { bottom: 22%; right: 19%; }
  20% { bottom: 62%; right: 27%; }
  40% { bottom: 7%; right: 37%; }
  60% { bottom: 62%; right: 23%; }
  80%{ bottom: 7%; right: 23%; }
  100% { bottom: 22%; right: 19%; }
}

@keyframes bounceBall17 {
  0% { bottom: 22%; left: 31%; }
  20% { bottom: 43%; left: 3%; }
  40% { bottom: 62%; left: 35%; }
  60% { bottom: 7%; left: 43%; }
  80%{ bottom: 62%; left: 37%; }
  100% { bottom: 22%; left: 31%; }
}

@keyframes bounceBall18 {
  0% { bottom: 22%; right: 31%; }
  20% { bottom: 43%; right: 3%; }
  40% { bottom: 62%; right: 35%; }
  60% { bottom: 7%; right: 43%; }
  80%{ bottom: 62%; right: 37%; }
  100% { bottom: 22%; right: 31%; }
}

@keyframes bounceBall19 {
  0% { bottom: 22%; left: 40%; }
  20% { bottom: 62%; left: 40%; }
  40% { bottom: 7%; left: 40%; }
  60% { bottom: 62%; left: 40%; }
  80%{ bottom: 7%; left: 40%; }
  100% { bottom: 22%; left: 40%; }
}

@keyframes bounceBall20 {
  0% { bottom: 22%; right: 40%; }
  20% { bottom: 62%; right: 40%; }
  40% { bottom: 7%; right: 40%; }
  60% { bottom: 62%; right: 40%; }
  80%{ bottom: 7%; right: 40%; }
  100% { bottom: 22%; right: 40%; }
}

/* 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, img.prize.p13, img.prize.p14, img.prize.p15, 
img.prize.p16, img.prize.p17, img.prize.p18{
  opacity: 0;
} */

.ballComeOutCon{
  position: relative;
  top: -100%;
  height: 80px;
  width: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.ballComeOutCon.ballDrop {
  animation: ballDrop 0.5s linear forwards;
}

@keyframes ballDrop {
  0% { top: -100%; }
  100% { top: 100%; }
}

.ballComeOutCon.ballDrop.p1{ background-image: url(../images/prize/ball_1.png); }
.ballComeOutCon.ballDrop.p2{ background-image: url(../images/prize/ball_2.png); }
.ballComeOutCon.ballDrop.p3{ background-image: url(../images/prize/ball_3.png); }
.ballComeOutCon.ballDrop.p4{ background-image: url(../images/prize/ball_4.png); }
.ballComeOutCon.ballDrop.p5{ background-image: url(../images/prize/ball_5.png); }
.ballComeOutCon.ballDrop.p6{ background-image: url(../images/prize/ball_6.png); }

/*------*/
.popup-con {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(0 0 0 / 70%);
  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;
}

.pop-prize {
  position: relative;
  width: auto;
  transform: scale(0);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 175px 175px 147px;
}

.pop-prize::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 10%);
  transform: scale(0.8);
  border-radius: 100%;
  z-index: 2;
  opacity: 1;
  animation: shadow1 0.9s ease-in-out 5;
}

@keyframes shadow1 {
  0% { opacity: 1; }
  50% {opacity: 0;}
  100% { opacity: 1; }
}

.pop-prize::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 10%);
  transform: scale(1);
  border-radius: 100%;
  z-index: 1;
  opacity: 1;
  animation: shadow2 0.9s ease-in-out 5;
  animation-delay: 0.3s;
}

@keyframes shadow2 {
  0% { opacity: 1; }
  50% {opacity: 0;}
  100% { opacity: 1; }
}

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

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

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

.pop-prize .popprizeimg {
  width: 200px;
  z-index: 4;
}

.pop-prize .popprize-con p {
  text-align: center;
  width: 100%;
  font-size: calc(100% - -63px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(0deg, #ae2cf1, #7776ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(2px 0 0px white)
    drop-shadow(2px 0 1px white)
    drop-shadow(0 0px 1px white)
    drop-shadow(0 3px 1px white)
    drop-shadow(-3px -1px 1px white)
    drop-shadow(1px -1px 1px white)
    drop-shadow(-1px 1px 0px white)
    drop-shadow(1px 1px 1px white)
}

.pop-prize .popprize-con {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 5;
}

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

.pop-prize .winConfirmBtn {
  margin-top: 11px;
  width: 40%;
  position: relative;
  cursor: pointer;
  transition: transform .1s ease-in-out;
  transform:  scale(1);
}

.pop-prize .winConfirmBtn.confirmed {
  transform: scale(0.8);
}

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

.popBG{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  z-index: 3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.popUpElements {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

.bubble1, .bubble2, .bubble3 {
  background-image: url(../images/bubble.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}

.bubble1 {
  bottom: 35%;
  right: 15%;
  height: 120px;
  width: 120px;
  opacity: 0;
  animation: bubble1 1.5s ease-in-out infinite;
}

@keyframes bubble1 {
  0% { 
    bottom: 35%;
    opacity: 0;
  }
  50% {
    bottom: 45%;
    opacity: 1;
  }
  100% { 
    bottom: 45%;
    opacity: 0;
  }
}


.bubble2 {
  bottom: 25%;
  left: 18%;
  height: 80px;
  width: 80px;
  opacity: 0;
  animation: bubble2 1.5s ease-in-out infinite 0.3s;
}

@keyframes bubble2 {
  0% { 
    bottom:25%;
    opacity: 0;
  }
  50% {
    bottom: 35%;
    opacity: 1;
  }
  100% { 
    bottom: 35%;
    opacity: 0;
  }
}

.bubble3 {
  bottom: 10%;
  right: 24%;
  height: 70px;
  width: 70px;
  opacity: 0;
  animation: bubble3 1.5s ease-in-out infinite 0.6s;
}

@keyframes bubble3 {
  0% { 
    bottom: 10%;
    opacity: 0;
  }
  50% {
    bottom: 20%;
    opacity: 1;
  }
  100% { 
    bottom: 20%;
    opacity: 0;
  }
}

.shiningStar1, .shiningStar2 {
  background-image: url(../images/star.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  height: 100px;
  width: 50px;
  animation: shiningStar 2.5s ease-in-out infinite;
}

.shiningStar1 {
  bottom: 34%;
  right: 27%;
}

.shiningStar2 {
  bottom: 23%;
  left: 26%;
  animation-delay: 0.5s;
}

@keyframes shiningStar {
  0% { transform:rotate(0deg) scale(0); }
  10% { transform:rotate(10deg) scale(1); }
  100% { transform:rotate(360deg) scale(0); }
}

.pop-prize span.closePopUp {
  top: 10%;
  right: 9%;
}

/* --------------------------------------------------------- */
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 #00ccff;
  border-radius: 15px;
}

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

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

.activityRulesPopCon .content {
  color: #000000;
  /* 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;
  width: 100%;
}

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

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


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

.activityRulesPopCon .content p{
  direction: ltr;
}

.activityRulesPopCon span.closePopUp {
  top: -6%;
  right: -13%;
}

#gameplayRules {
  background: #c5efff;
  display: grid;
  grid-template-columns: repeat(6, 1fr);  
  grid-column-gap: 15px;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  direction: ltr;
  border: 6px solid #e5f8ff;
  box-shadow: 0px 3px 3px 0 rgb(0 0 0 / 8%);
}

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

.gameplayRulesCard img {
  height: 70px;
  width: auto;
}

.gameplayRulesCard span {
  color: #ff2400;
  font-weight: 700;
  font-size: 24px;
  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;
  margin-top: 7px;
}

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

.recordContainer-Overlay {
  display: none;
  position: relative;
  /* background: linear-gradient(180deg, #FFFFFF 0%, #B62923 100%); */
  background: #00ccff;
  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 #ffa800;
  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: 50%;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

#recordPopUp thead, #recordPopUp tbody, 
#recordPopUp th, #recordPopUp td { 
  display: block; 
}

#recordPopUp tr{ 
  display: flex; 
}

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

.recordInfo-head th{
  background: #103994;
  color: #fff;
  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: #000;
  text-align: center;
  word-wrap: break-word;
}

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

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: #00ccff;
  width: 25%;
  height: auto;
  border-radius: 15px;
  padding: 3px;
}

.sysmtempromtPopUpCon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 95%;
  border-radius: 15px;
  border: solid 2px #ffa800;
  transform: translate(-50%, -50%) scale(1.1);
  z-index: -1;
}

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

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

.sysmtempromtPopUpCon span.closePopUp {
  top: -30px;
  right: -15%;
  height: 35px;
  width: 35px;
}

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

.sysmtempromtPopUpCon img.sysmtempromConfirm {
  position: absolute;
  bottom: -14%;
  left: 50%;
  transition: transform .1s ease-in-out;
  transform: translate(-50%, 0%) scale(1);
  width: 50%;
  cursor: pointer;
}

.sysmtempromtPopUpCon img.sysmtempromConfirm.confirmed {
  transform: translate(-50%, 0%) scale(0.8);
}

/* ----------------------------------------------------------------------------- */
#fallingIngots {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  pointer-events: none;
}

#fallingIngots img.fallingIngot {
  pointer-events: auto;
  position: absolute;
  height: 50px;
  width: auto;
  animation: ingot 5s linear forwards,
              ingotRotate 5s linear infinite;
}

@keyframes ingot {
  from {top: -15%;}
  to {top: 115%;}
}

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

@media screen and (min-height: 766px) and (max-height: 945px){
  .maintitle-con {
      width: 89%;
  }

  .time-info {
    bottom: -11%;
    font-size: 34px;
  }

  .clawmachine {
    margin-top: 27px;
    height: 48%;
  }

  .drawCountsCon {
    bottom: -49%;
    font-size: 34px;
  }

  .menuBtn {
    right: -12%;
    transform: scale(1.2);
  }

  .machineBtns {
    margin-top: 74px;
  }

  .machineBtns .btns {
    transform: scale(1.3);
  }

  .machineBtns .startBtn.point::before{
    height: 60px;
    width: 60px;
    right: 9px;
  }

  .clickHereBubble{
    right: 5px;
    height: 70px;
    width: 86px;
  }

  .ballComeOutCon {
    transform: scale(1.3);
  }

  .activityRulesPopCon {
    height: 50%;
    width: 40%;
  }

  img.recordPop {
    width: 43%;
  }

}

@media screen and (min-height: 766px)  and (max-height: 915px){
  .maincontainer {
      width: 54%;
  }

  .time-info {
    font-size: 40px;
  }

  .drawCountsCon {
    padding: 5px 33px;
    bottom: -51%;
    font-size: 31px;
  }

  .activityRulesPopCon {
    height: 60%;
    width: 50%;
  }

  .activityRulesPopCon .content {
    font-size: 18px;
  }

  .gameplayRulesCard img {
    height: 80px;
  }

  .gameplayRulesCard span {
    font-size: 28px;
  }

  .activityRulesPopCon .bonusRuleTitle {
    font-size: 31px;
  }

  img.activityRulesLabel {
    width: 30%;
  }

  .recordContainer-Overlay {
    width: 28%;
  }

  img.recordPop {
    width: 50%;
  }

  h4.noRecordSpan {
    font-size: 31px;
  }

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

  .recordInfo-head th {
    font-size: 21px;
  }

  .recordInfo-body td {
    font-size: 18px;
  }

  .sysmtempromtPopUpCon {
    transform: scale(1.2);
  }
}

@media screen and (max-width: 1440px){
  .maincontainer {
    width: 56%;
  }
}

@media screen and (max-width: 1400px){
  .maincontainer {
    width: 64%;
  }

  .machineBtns {
    margin-top: 80px;
  }

  #gachaponMachine {
    background-size: 111% 100%;
  }

  .recordContainer-Overlay {
    width: 35%;
  }

}

@media screen and (max-width: 1366px){
  #gachaponMachine {
    background-size: 100% 100%;
  }

  .recordContainer-Overlay {
    width: 25%;
  }
}

@media screen and (max-height: 665px){
  .maincontainer {
    width: 50%;
  }

  .time-info {
    font-size: 23px;
  }

  .drawCountsCon {
    font-size: 24px;
  }

  .machineBtns {
    margin-top: 29px;
  }

  .machineBtns .ruleBtn img, .machineBtns .recordBtn img {
    height: 97px;
    width: 100px;
  }

  .machineBtns .btns {
    height: 110px;
  }

  .machineBtns .startBtn {
    background-size: 115px 110px;
  } 

  .menuBtn {
    transform: scale(0.9);
  }
}

@media screen and (max-width: 1280px){
  #gachaponMachine {
    background-size: 111% 100%;
  }

  .time-info {
    font-size: 28px;
  }

  .drawCountsCon {
    font-size: 26px;
  }

  .menuBtn {
    right: -15%;
    transform: scale(1.1);
  }

  .machineBtns .btns {
    transform: scale(1.2);
  }

  .clawmachine {
    height: 49%;
  }

  .activityRulesPopCon {
    width: 60%;
  }

  .recordContainer-Overlay {
    width: 38%;
  }

  img.recordPop {
    width: 45%;
  }
}

@media screen and (max-width: 1280px)  and (max-height: 665px){
  #gachaponMachine {
    background-size: 100% 100%;
  }

  .maintitle-con {
    width: 93%;
  }

  .time-info {
    font-size: 23px;
  }

  .drawCountsCon {
    font-size: 24px;
  }

  .machineBtns {
    margin-top: 49px;
  }

  .machineBtns .btns {
    transform: scale(1);
  }

  .menuBtn {
    right: -19%;
    transform: scale(1);
  }

  .recordContainer-Overlay {
    width: 30%;
  }
}

@media screen and (max-width: 1280px)  and (max-height: 663px){
  .maincontainer {
    width: 47%;
    padding: 8px 19px;
  }

  .machineBtns {
    margin-top: 40px;
  }
}

@media screen and (max-width: 1280px) and (max-height: 585px){
  .machineBtns {
      margin-top: 29px;
  }

  .maintitle-con {
    width: 86%;
  }
}

@media screen and (max-width: 1152px) {
  .time-info {
    font-size: 24px;
    bottom: -9%;
  }

  .machineBtns {
    margin-top: 54px;
  }

  .clawmachine {
    height: 56%;
  }

  .machineBtns .btns {
    transform: scale(1);
  }

  .recordContainer-Overlay {
    width: 33%;
  }
}

@media screen and (max-width: 1024px) {
  .maincontainer {
    width: 60%;
  }

  .maintitle-con {
    width: 82%;
  }

  .time-info {
    font-size: 20px;
  }

  .drawCountsCon {
    font-size: 19px;
  }

  .machineBtns {
    margin-top: 39px;
  }

  #gachaponMachine {
    background-size: 110% 100%;
  }

  .menuBtn {
    right: -19%;
    transform: scale(0.9);
  }

  .gameplayRulesCard img {
    height: 61px;
  }

  .gameplayRulesCard span {
    font-size: 18px;
  }
}
@media only screen and (min-width: 2500px) and (max-width: 2620px) {
  /* 針對接近 2560x1440 的解析度套用的樣式 */
  .time-info {
    bottom: -7%;
    font-size: 2.5rem;
  }
  .clawmachine {
     top: 3%;
    width: 96%;
    height: 49%;
  }
  .drawCountsCon {
    font-size: 2rem;
    bottom: -52%;
  }
  .machineBtns .btns {
        transform: scale(1.3);
    }
        .machineBtns {
        margin-top: 13%;
    }
    .machineBtns .startBtn {
      background-size: 60% auto;
  }
  .machineBtns .startBtn.point::before {
    right: 19px;
  }
    .clickHereBubble {
      right: 1px;
    }
    img.recordPop {
      top: -10%;
    }
}