* {
  caret-color: transparent;
}

body {
    position: relative;
    margin: 0;
    cursor: auto;
}

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

/* //------------------------------------- */
#homeBtn.clicked .menu-icon,
#musicBtn.clicked .menu-icon,
#recordBtn.clicked,
#startBtn.clicked,
#ruleBtn.clicked,
#confirmBtn.clicked{
  animation: clickedBtn 0.2s linear forwards;
}

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

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

#whackMoleEvent {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(../images/desktop/game_bg.jpg);
    background-position: bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: none;
}

/* //------------------------------------- */
.g-snows {
  width: 100%;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.g-snows > li.snowdust {
  opacity: 0;
  position: absolute;
  top: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: 100% auto;
  animation: snow-drop linear infinite, glow 0.2s infinite;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.57);
}

@keyframes snow-drop {
  0% {
    transform: translateY(0);
    margin-left: 0;
  }
  10% {
    margin-left: 15px;
  }
  20% {
    margin-left: 20px;
  }
  25% {
    transform: translateY(250px);
  }
  30% {
    margin-left: 15px;
  }
  40% {
    margin-left: 0;
  }
  50% {
    transform: translateY(500px);
    margin-left: -15px;
  }
  60% {
    margin-left: -20px;
  }
  70% {
    margin-left: -15px;
  }
  75% {
    transform: translateY(750px);
  }
  80% {
    margin-left: 0;
  }
  100% {
    transform: translateY(1000px);
  }
}

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

.g-snows > li.snowflake {
    position: absolute;
    height: 70px;
    width: 70px;
    background-image: url(../images/falling-snow-flake.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: snowflake 8s linear forwards,
                rotateElement 5s linear infinite;
}

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

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

/* //------------------------------------- */
.cursor {
    width: 111px;
    height: 135px;
    background-image: url(../images/desktop/hammer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    pointer-events: none;
    /* transform: translate(-30%, -30%) rotate(0deg); */
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 3;
    transition: transform 0.2s ease-in-out;
    opacity: 0;
}

.cursor.smack {
    transform: translate(-50%, -50%) rotate(-51deg);
}

/* //------------------------------------- */
.main-container {
    height: 100%;
    width: 80%;
    position: relative;
    z-index: 1;
}

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

.top-section {
    position: relative;
    width: 49%;
    z-index: 3;
}

.top-section .main-title{
    width: 100%;
}

.schedule-bar {
    position: absolute;
    bottom: -1%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 21px;
    width: 65%;
    text-align: center;
    font-weight: 600;
    color: white;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 51%);
}

.draw-counts-container{
    position: relative;
    width: auto;
    height: auto;
    background-image: url(../images/draw_count_bg.png);
    background-position: center;
    background-size: 100% 100%;
    padding: 12px 50px;
    margin-top: 5px;
    font-size: 23px;
    font-weight: 600;
    color: white;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 51%);
}

.draw-counts-container span {
    color: #fee900;
}

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

.menu-btn {
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.menu-btn span{
    font-size: 18px;
    font-weight: 600;
    color: #48176c;
    position: relative;
    margin-left: 5px;
    text-align: center;
}

.menu-icon {
    height:50px;
    width: 50px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.menu-icon{
    background: linear-gradient(180deg, #d70a84 -23.14%, #51127f 100%);
    border: 2.5px solid #e6b304;
}

.menu-icon::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#homeBtn .menu-icon::after{
    background-image: url(../images/home.svg);
}

#musicBtn .menu-icon::after{
    background-image: url(../images/music_on.svg);
}

#musicBtn.music-muted .menu-icon::after {
  background-image: url(../images/music_off.svg);
}

#musicBtn {
    margin-top: 10px;
}

/* --------------------------------------------------- */
.whack-a-mole-container {
    width: 100%;
    height: 273px;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.hole-con {
    width: 207px;
    height: 127px;
    position: relative;
    pointer-events: none;
}

.hole-con::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 138px;
    background-image: url(../images/game/hole-inlayer.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    pointer-events: none;
}

.hole-con::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 121px;
    background-image: url(../images/game/hole-outlayer.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    pointer-events: none;
}

.top-hole {
  position: relative;
  width: 83%;
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
}

.bottom-hole {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
  z-index: 2;
}

img.mole{
    position: absolute;
    bottom: 19%;
    left: 50%;
    height: 235px;
    width: 90%;
    z-index: 2;
    object-fit: contain;
    object-position: 50% 100%;
    pointer-events: none;
    transform: translate(-50%, 0%);
}

div.mole{
    position: absolute;
    bottom: 19%;
    left: 50%;
    height: 235px;
    width: 90%;
    z-index: 2;
    /* background-image: url(../images/game/rat.png); */
    background-size: contain;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: translate(-50%, 0%);
}

.mole-click-event {
  position: absolute;
  bottom: 31%;
  left: 50%;
  height: 150px;
  width: 61%;
  z-index: 2;
  pointer-events: auto;
  transform: translate(-50%, 0%);
}

.mole.hideRemaining{
    animation: hide-mole 0.5s ease-in forwards;
}

.mole-click-event.hideRemaining{
  display: none;
}

/* @keyframes hide-mole {
  from {object-position: 50% 100%}
  to {object-position: 50% 700%}
} */

@keyframes hide-mole {
  from {background-position: 50% 100%}
  to {background-position: 50% 700%}
}

img.mole-faint{
    position: absolute;
    bottom: 19%;
    left: 50%;
    height: 235px;
    width: 90%;
    z-index: 2;
    object-fit: contain;
    object-position: 50% 100%;
    pointer-events: auto;
    transform: translate(-50%, 0%);
}

div.mole-faint{
    position: absolute;
    bottom: 19%;
    left: 50%;
    height: 235px;
    width: 90%;
    z-index: 2;
    /* background-image: url(../images/game/fainted-mole.gif); */
    background-size: contain;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    pointer-events: auto;
    transform: translate(-50%, 0%);
}

.gift-light {
    position: absolute;
    bottom: 19%;
    left: 0;
    height: auto;
    width: 100%;
    object-fit: contain;
    object-position: 50% 100%;
    pointer-events: auto;
    z-index: 1;
    opacity: 0;
    animation: show-light 0.5s ease-in forwards;
}

.game-gift {
  position: absolute;
  bottom: 19%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 155px;
  width: 51%;
  object-fit: contain;
  object-position: 0 350%;
  pointer-events: auto;
  z-index: 2;
  animation: show-gift 1.5s ease-in-out forwards,
            float-gift 1s ease-in-out 2 1.5s;
  
}

@keyframes show-light {
  from {opacity: 0;}
  to {opacity: 1}
}

@keyframes show-gift {
  from { object-position: 0 350% }
  to { object-position: 0 0% }
}

@keyframes float-gift {
  0% { object-position: 0 0% }
  50% { object-position: 0 54% }
  100% { object-position: 0 0% }
}

/* //------------------------------------- */
.game-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 60px;
    background-image: url(../images/mole-intro.gif);
    background-position: center bottom;
    background-size: 33%;
    background-repeat: no-repeat;
    pointer-events: auto;
}

.game-btn{
  height: 66px;
  width: 246px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: auto;
}


#startBtn.game-btn{
  margin: 0px 25px;
}

.game-buttons.start-game {
    display: none;
}

/* --------------------------------------------------- */
.reminder-board{
  position: absolute;
  top: 38%;
  left: -8%;
  height: 187px;
  width: 160px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

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

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

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

.win-outside-con {
  position: relative;
  width: 423px;
  height: 423px;
}

.pop-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 0%;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  transform: scale(0);
}

.pop-bg::before, .pop-bg::after{
  content: '';
  position: absolute;
  bottom: -6%;
  height: 135px;
  width: 150px;
  background-image: url(../images/popup/gift.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.pop-bg::before{
  left: -1%;  
  background-image: url(../images/popup/gift.png);
  transform: scale(0);
}

.pop-bg::after{
  right: -1%;  
  background-image: url(../images/popup/gift.png);
  transform: rotateY(180deg) scale(0);
}

.santa-claus{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/popup/pop-santa.gif);
  background-position: 50% -37%;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 2;
  transform: scale(0);
}

.santa-claus::before, .santa-claus::after{
  content: '';
  position: absolute;
  background-image: url(../images/popup/snow-flake.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(0);
}

.santa-claus::before{
  top: 25%;
  left: -4%;
  width: 100px;
  height: 100px;
}

.santa-claus::after{
  top: 39%;
  right: -4%;
  width: 70px;
  height: 70px;
}

.prize {
  position: relative;
  height: auto;
  width: 100%;
  background-image: url(../images/popup/prize_bg.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 13px 30px 21px;
}

#prize {
  font-size: 5rem;
  font-weight: bolder;
  background: linear-gradient(to top, #f83600, #facc22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px white;
  text-align: center;
  line-height: 1.2; 
}

.win-bottom-part {
    position: relative;
    margin-top: -33px;
    display: flex;
    flex-direction: column;
    align-items: center;
        width: 15%;
}

.confirm-btn {
  height: 59px;
  width: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-top: 15px;
}


/* win pop up animation */
#popupContainer.open-win-popup .pop-bg{
  animation: popbg 0.5s ease-out forwards;
}

#popupContainer.open-win-popup .pop-bg::before{
  animation: popbg 0.5s ease-out forwards 0.2s;
}

#popupContainer.open-win-popup .pop-bg::after{
  animation: popbg1 0.5s ease-out forwards 0.2s;
}

#popupContainer.open-win-popup .santa-claus{
  animation: popbg 0.5s ease-out forwards 0.1s;
}

#popupContainer.open-win-popup .santa-claus::before, 
#popupContainer.open-win-popup .santa-claus::after{
  animation: popbg 0.5s ease-out forwards 0.3s,
            rotateElement 5s linear infinite 0.5s;
}

@keyframes popbg {
  from {transform: scale(0);}
  to {transform: scale(1);}
}

@keyframes popbg1 {
  from {transform: rotateY(180deg) scale(0);}
  to {transform: rotateY(180deg) scale(1);}
}

/* --------------------------------------------------------- */
span.closePopUp {
  position: absolute;
  top: 0%;
  right: 0%;
  height: 35px;
  width: 35px;
  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);
}

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

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

#ruleX.closePopUp {
  top: -12%;
  right: -6%;
}

.rule-outside-con {
  height: auto;
  width: 687px;
  background: linear-gradient(to top, #f0f4c4, #ffffff);
  border-radius: 35px;
  border: 3px solid #ff002a;
  position: relative;
  padding: 55px 5px;
}

.rule-outside-con::after {
  content: '';
  position: absolute;
  bottom: -5%;
  right: -14%;
  height: 274px;
  width: 238px;
  background-image: url(../images/popup/rule-mole.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

img.rule-label {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rule-details {
  width: 100%;
  height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
  padding: 0px 36px;
}

.rule-details::-webkit-scrollbar {
  width: 5px;
}

.rule-details::-webkit-scrollbar-thumb {
  background: #c2c2c2; 
  border-radius: 10px;
}

.content {
  direction: ltr;
  font-size: 14px;
  font-weight: 400;
  color: #5f3939;
}

.content .highlight{
  color: #ff0000;
}

.middle-content{ margin: 15px 0px 25px; }

.middle-content, .bottom-content{
  padding-right: 95px;
}

/* --------------------------------------- */
#popupContainer.open-record-popup,
#popupContainer.open-record-popup #recordContainer{
  display: flex;
}

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

#recordContainer .hidden{
  display: none;
}

.record-outside-con {
  position: relative;
  height: 400px;
  width: 380px;
  background: linear-gradient(to top, #f0f2c4, #ffffff);
  border-radius: 35px;
  border: 4px solid #38630d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 35px 25px;
}

.record-outside-con::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 35px;
  border: 2px solid #ffae00;
  transform: scale(1.05);
  pointer-events: none;
}

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

.no-record {
    font-size: 23px;
    font-weight: 600;
    text-align: center;
}

.record-table {
  width: 100%;
}

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

.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%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #3c3535;
  padding: 3px;
  margin-bottom: 5px;
}

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

.record-row:nth-child(odd) {
  background: #ffffff;
}

volist#data {
    width: 100%;
}

#recordX.closePopUp {
  top: -16%;
  right: -12%;
}

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

#sysmtempromtContainer {
  display: none;
  position: relative;
  width: 350px;
  height: 200px;
  background: linear-gradient(to top, #f0f4c4, #ffffff);
  border: 3px solid #ff002a;
  border-radius: 35px;
  padding: 35px;
}

p#sysmtempromtTxt {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: bold;
  color: #5f3939;
}

#systemPromtX.closePopUp {
  top: -24%;
  right: -11%;
}

@media screen and (min-width: 1537px) and (max-width: 1920px){
  .schedule-bar {
    font-size: 25px;
  }

  .whack-a-mole-container {
    width: 96%;
    height: 273px;
    margin-top: 159px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
}

@media screen and (min-width: 1537px) and (max-width: 1681px){
  .schedule-bar {
    font-size: 22px;
  }
}

@media screen and (min-width: 1537px) and (max-width: 1600px){
  .whack-a-mole-container {
    margin-top: 93px;
  }
}

@media screen and  (max-width: 1440px){
  .schedule-bar, .draw-counts-container {
    font-size: 20px;
  }
}

@media screen and  (max-width: 1400px){
  .schedule-bar, .draw-counts-container {
    font-size: 19px;
  }
}

@media screen and (min-width: 1537px)  and  (min-height: 915px){
  .whack-a-mole-container {
    transform: scale(0.87);
  }

  .main-container {
    margin-top: 95px;
  }
}

@media screen and (min-width: 1537px)  and  (min-height: 825px){
  /* .schedule-bar, .draw-counts-container {
    font-size: 18px;
  } */

  .whack-a-mole-container {
    transform: scale(0.9);
  }

  .main-container {
    margin-top: 95px;
  }
}

@media screen and (min-width: 1537px)  and  (min-height: 729px){
  /* .schedule-bar, .draw-counts-container {
    font-size: 16px;
  } */

  .whack-a-mole-container {
    transform: scale(0.9);
  }

  .main-container {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1537px)  and  (min-height: 633px){
  .whack-a-mole-container {
    margin-top: 47px;
  }
}

@media screen and  (max-width: 1280px){
  .schedule-bar, .draw-counts-container {
    font-size: 18px;
  }

  .whack-a-mole-container {
    transform: scale(0.9);
  }
}

@media screen and (min-width: 1537px)  and  (min-height: 585px){
  .whack-a-mole-container {
    margin-top: 24px;
  }

  #ruleX.closePopUp {
    top: -8%;
  } 
}