@font-face {
    font-family: 'Noto-Sans';
    src: url('./NOTOSANSTC-VF.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    -webkit-tap-highlight-color: transparent;
}

.mat-ripple-element {
    background-color: transparent !important;
}

.gameBtn:active, .m2LaneClickable:active {
  background-color: transparent !important;
  box-shadow: none !important;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: 'Noto-Sans', sans-serif;
}

/* section {
    position: relative;
} */

@keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0px);
    }
}
  
.floating {
    animation: float 3s ease-in-out infinite;
}

.delay-05 {
    animation-delay: 0.5s;
}

.delay-1 {
    animation-delay: 1s  !important;
}

.delay-2 {
    animation-delay: 2s !important;
}

.shaking{
    animation: shake 0.5s  !important;
    animation-iteration-count: 1;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.pulse {
    animation: pulse .3s;
}
  
@keyframes pulse {
    0% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.1);
    }
  
    100% {
      transform: scale(1);
    }
}

.opacity-07 {
    opacity: 0.7;
}
  
.container {
    max-width: 1500px;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

.cursor-pointer {
    cursor: pointer;
}

.hidden {
    display: none;
}

.absolute {
    position: absolute;
}

.bg {
    background-repeat: no-repeat;
    background-size: 100%;
}

.pos-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* height: 1920px; */
}

.timer {
    /* background: #193D5E; */
    background: conic-gradient(#ffffff 100%, rgba(255,255,255,0) 0%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 60px;
    color: white;
    /* border: 6px solid white; */
    line-height: 100px;
    top: 12%;
    left: 5%;
    position: absolute;
    /* display: flex; */
    justify-content: center;
    user-select: none;
}

.countdownCircle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #193D5E;
    color: #ffffff;
    /* background: conic-gradient(#05a894 0%, #ffffff 0%); */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 1s linear;
    margin: auto;
}
.countdownLabel {
    position: absolute;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    user-select: none;
}

#title > div {
    background-image: url(./images/bg.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

#logo {
    width: 44%;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#logo > div.bg {
    background-image: url(./images/introLogo.png);
    padding-bottom: calc(100% * 699/861);
}

#intro > div {
    background-image: url(./images/introBg.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

#mainInst {
    width: 50%;
    top: 15%;
    left: 8%;
}

#mainInst > div {
    background-image: url(./images/introText.png);
    padding-bottom: calc(100% * 562 / 1079);
}

#mascot {
    width: 25%;
    bottom: 10%;
    right: 11%;
}

#mascot > div {
    background-image: url(./images/introMascot.png);
    padding-bottom: calc(100% * 2564 / 2421);
}

#gameNext {width: 20%;bottom: 26%;left: 8%;}

#gameStart {
    width: 20%;
    bottom: 11%;
    left: 40%;
}

.gameBtn {
    cursor: pointer;
    transition: 500ms all ease;
}

.gameBtn:not(.crisisItem):not(.m3Btn){
    opacity: 0;
    visibility: hidden;
}

.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: 500ms all ease;
}

.gameBtn:not(.m3QNA):hover {
    transform: translateY(-4px);
    /* box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08); */
    transition: 200ms all ease;
}

.gameBtn:not(.m3QNA):active {
    opacity: .5;
}

#gameNext > div {
    background-image: url(./images/introNext.png);
    padding-bottom: calc(100% * 122 / 484);
}

#gameStart > div {
    background-image: url(./images/gameStart.png);
    padding-bottom: calc(100% * 122 / 484);
}

#mission1 > div {
    background-image: url(./images/m1Bg.png);
    padding-bottom: calc(100% * 1080 / 1920);
}


#m1Inst1 {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#m1Inst1 > div {
    background-image: url(./images/m1Inst1.png);
    padding-bottom: calc(100% * 642 / 1486);
}

div.m1Inst::before {
    content: "";
    background-image: url(./images/m1Title.png);
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: -18%;
    left: 25%;
}

#m1Start_1 {
    width: 20%;
    bottom: 19%;
    left: 39%;
}

#m1Start_1 > div {
    background-image: url(./images/m1Start.png);
    padding-bottom: calc(100% * 125 / 485);
}

#m1Person  {
    width: 24%;
    bottom: -40%;
    right: 10%;
}

#m1Person > div {
    background-image: url(./images/m1Person.png);
    padding-bottom: calc(100% * 906 / 388);
}

.crisisItem {
    z-index: 1;
    position: absolute;
    width: 9%;
    display: none;
    cursor: pointer;
}

.crisisItem::after {
    content: "";
    background-image: url(./images/crisisShadow.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
}


#crisis1 > div {
    background-image: url(./images/crisis1.png);
    padding-bottom: calc(100% * 332 / 311);
}
#crisis2 > div {
    background-image: url(./images/crisis2.png);
    padding-bottom: calc(100% * 271 / 317);
}
#crisis3 > div {
    background-image: url(./images/crisis3.png);
    padding-bottom: calc(100% * 305 / 249);
}
#crisis4 > div {
    background-image: url(./images/crisis4.png);
    padding-bottom: calc(100% * 290 / 237);
}
/* #crisis5 > div {
    background-image: url(./images/crisis5.png);
    padding-bottom: calc(100% * 293 / 227);
} */
#crisis5 > div {
    background-image: url(./images/crisis6.png);
    padding-bottom: calc(100% * 254 / 276);
}
#crisis6 > div {
    background-image: url(./images/crisis7.png);
    padding-bottom: calc(100% * 278 / 216);
}


.m1Result {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.m1Result >div {
    padding-bottom: calc(100% * 620 / 1500);
}

#m1Lose > div {
    background-image: url(./images/m1Lose.png);
}

#m1Win > div {
    background-image: url(./images/m1Win.png);
}

.m1Result::before {
    content: "";
    background-size: 100%;
    width: 13%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: -22%;
    left: 43%;
}

#m1Next {
    width: 25%;
    bottom: 22%;
    left: 37%;
}

#m1Next > div {
    background-image: url(./images/m1Next.png);
    padding-bottom: calc(100% * 125 / 652);
}

.bthCss {
    width: 16%;
    bottom: 22%;
    left: 42%;
}

.bthCss > div {
    background-image: url(./images/backToHome.png);
    padding-bottom: calc(100% * 123 / 362);
}

#m1Mascot {
    width: 20%;
    bottom: 5%;
    left: 7%;
    z-index: 1;
}

#m1Mascot > div {
    background-image: url(./images/m1Mascot.png);
    padding-bottom: calc(100% * 2011 / 1734);
}

.scoreBar {
    height: 26px;
    position: absolute;
    background-color: #dcfffc;
    width: 100%;
    z-index: 1;
}


#mission2 > div#m2a {
    background-image: url(./images/m2Bg1.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

#m2Inst {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#m2Inst > div {
    background-image: url(./images/m2Inst.png);
    padding-bottom: calc(100% * 600 / 1500);
}

div.m2Inst::before {
    content: "";
    background-image: url(./images/m2Title.png);
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: -14%;
    left: 25%;
}

#m2Start {
    width: 20%;
    bottom: 23%;
    left: 39%;
}

#m2Start > div {
    background-image: url(./images/m2Start.png);
    padding-bottom: calc(100% * 136 / 485);
}

#mission2 > div#m2b {
    background-image: url(./images/m2Bg2.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

/* #m2b svg {
    z-index: 1;
}

#m2b svg:hover {
    z-index: 0;
} */

#m2LaneClickableWrap {
    z-index: 4;
}

.m2LaneClickable {
    cursor: pointer;
    fill: transparent;
}

.m2Lane  {
    cursor: pointer;
    fill: transparent;
    transition: fill 0.3s ease;
}

.m2Lane.left.selected {
    fill: url(#hoverGradientLeft);
    stroke: white;
    stroke-width: 2;
}

.m2Lane.right.selected {
    fill: url(#hoverGradientRight);
    stroke: white;
    stroke-width: 2;
}

.current_hand {
    z-index: 2 !important;
}

.m2Hand {
    z-index: 2;
    width: 16%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: all 200ms;
}

.m2Hand:not(#m2Hand0).stamped::before {
    content: "";
    background: url(./images/m2Seal.png);
    width: 50px;
    height: 50px;
    position: absolute;
    background-size: contain;
    top: 29%;
    left: 3%;
}

#m2Sparkle {
    z-index: 2;
    bottom: 0;
    visibility: hidden;
}

#m2Sparkle.lane1 {
    left: 6%;
}

#m2Sparkle.lane2 {
    left: 31%;
}

#m2Sparkle.lane3 {
    left: 53%;
}

#m2Sparkle.lane4 {
    left: 75%;
}

#m2Sparkle > div {
    width: 300px;
    height: 400px;
}

.m2Deco {
    width: 100%;
}

#m2Deco1 {
    padding-bottom: calc(100% * 243/243);
    background-image: url(./images/m2Deco1.png);
    left: -37%;
    top: -31%;
    animation: twinkle1 .3s infinite alternate;
    opacity: 1;
}

#m2Deco2 {
    padding-bottom: calc(100% * 243/243);
    background-image: url(./images/m2Deco1.png);
    top: -14%;
    left: 20%;
    animation: twinkle2 .3s infinite alternate;
    opacity: 1;
}

#m2Deco3 {
    padding-bottom: calc(100% * 243/243);
    background-image: url(./images/m2Deco1.png);
    top: 13%;
    left: -15%;
    animation: twinkle1 .3s infinite alternate;
}

.sparkle {
    visibility: visible !important;
}


@keyframes twinkle1 {
  0% { opacity: 0.3; transform: scale(0.95) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.05) rotate(10deg); }
}

@keyframes twinkle2 {
  0% { opacity: 1; transform: scale(1.05) rotate(10deg); }
  100% { opacity: 0.3; transform: scale(0.95) rotate(0deg); }
}


#m2Hand1 > div {
    background-image: url(./images/m2Hand1.png);
    padding-bottom: calc(100% * 484 / 397);
}

#m2Hand2 > div {
    background-image: url(./images/m2Hand2.png);
    padding-bottom: calc(100% * 483 / 397);
}

#m2Hand3 > div  {
    background-image: url(./images/m2Hand3.png);
    padding-bottom: calc(100% * 484 / 397);
}

#m2Hand0 {
    z-index: 1;
}

#m2Hand0 > div {
    background-image: url(./images/m2Hand0.png);
    padding-bottom: calc(100% * 483 / 397);
}

#m2Stamp {
    opacity: 0;
    visibility: hidden;
    transition: 200ms all ease;

    z-index: 2;
    width: 16%;
    bottom: 0;
    transform: translateX(-50%);
}
#m2Stamp > div {
    background-image: url(./images/m2Stamp.png);
    padding-bottom: calc(100% * 483 / 397);
}

#m2Stamp.lane1 {
    left: 4%;
    animation: stampLane1 .1s forwards;
}

div#m2Stamp.lane2 {
    left: 28%;
    animation: stampLane2 .1s forwards;
}

div#m2Stamp.lane3 {
    left: 51%;
    animation: stampLane3 .1s forwards;
}

div#m2Stamp.lane4 {
    left: 75%;
    animation: stampLane4 .1s forwards;
}

.m2Person {
    width: 4%;
    top: 0;
    position: absolute;
    display: none;
    z-index: 0;
}

.delay.lane1 {
    animation-delay: 0 !important;
}

.delay.lane2 {
    animation-delay: 1s!important;
}

.delay.lane3 {
    animation-delay: 2s!important;
}

.delay.lane4 {
    animation-delay: 3s!important;
}

.m2Person.active.lane1 {
    left: 41%;
    animation: moveAndGrowLane1 3s linear 0s forwards;
}

.m2Person.active.lane2 {
    left: 46%;
    animation: moveAndGrowLane2 3s linear 0s forwards;

}

.m2Person.active.lane3 {
    left: 50%;
    animation: moveAndGrowLane3 3s linear 0s forwards;
}

.m2Person.active.lane4 {
    left: 55%;
    animation: moveAndGrowLane4 3s linear 0s forwards;
}

#m2Person1 > div, #m2Person4 > div {
    background-image: url(./images/m2Person1.png);
    padding-bottom: calc(100% * 281 / 281);
}

#m2Person2 > div, #m2Person5 > div {
    background-image: url(./images/m2Person2.png);
    padding-bottom: calc(100% * 281 / 281);
}

#m2Person3 > div, #m2Person6 > div {
    background-image: url(./images/m2Person3.png);
    padding-bottom: calc(100% * 281 / 281);
}

.m2Hand.lane1 {
    left: 16%
}

.m2Hand.lane2 {
    left: 41%;
}

.m2Hand.lane3 {
    left: 63%;
}

.m2Hand.lane4 {
    left: 85%;
}

.m2Result {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.m2Result >div {
    padding-bottom: calc(100% * 620 / 1500);
}

#m2Lose > div {
    background-image: url(./images/m2Lose.png);
}

#m2Win > div {
    background-image: url(./images/m2Win.png);
}

.m2Result::before {
    content: "";
    background-size: 100%;
    width: 13%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: -22%;
    left: 43%;
}

#m2Next {
    width: 25%;
    bottom: 22%;
    left: 37%;
}

#m2Next > div {
    background-image: url(./images/m2Next.png);
    padding-bottom: calc(100% * 137 / 652);
}

#mission3 > div#m3a {
    background-image: url(./images/m3Bg1.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

#m3Inst {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#m3Inst > div {
    background-image: url(./images/m3Inst.png);
    padding-bottom: calc(100% * 642 / 1486);
}

div.m3Inst::before {
    content: "";
    background-image: url(./images/m3Title.png);
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: -20%;
    left: 25%;
}

#m3Start {
    width: 20%;
    bottom: 23%;
    left: 39%;
}

#m3Start > div {
    background-image: url(./images/m3Start.png);
    padding-bottom: calc(100% * 136 / 485);
}

#mission3 > div#m3b {
    background-image: url(./images/m3Bg2.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

#m3Deco1 {
    width: 9%;
    top: 12%;
    left: 30%;
    z-index: 1;
}

#m3Deco1 > div {
    background-image: url(./images/m3Deco1.png);
    padding-bottom: calc(100% * 132 / 155);
}

#m3Deco2 {
    width: 6%;
    top: 23%;
    right: 7%;
    z-index: 1;
}

#m3Deco2 > div {
    background-image: url(./images/m3Deco2.png);
    padding-bottom: calc(100% * 109 / 120);
}

#m3Deco3 {
    width: 11%;
    top: 55%;
    left: 22%;
    z-index: 1;
}

#m3Deco3 > div {
    background-image: url(./images/m3Deco3.png);
    padding-bottom: calc(100% * 109 / 120);
}

.m3Result {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.m3Result >div {
    padding-bottom: calc(100% * 620 / 1500);
}

#m3Lose > div {
    background-image: url(./images/m3Lose.png);
}

#m3Win > div {
    background-image: url(./images/m3Win.png);
}

#m3Passed > div {
    background-image: url(./images/m3Passed.png);
}

#m3Failed > div {
    background-image: url(./images/m3Failed.png);
}

.m3Result::before {
    content: "";
    background-size: 100%;
    width: 13%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: -22%;
    left: 43%;
}

#m3Next, #m3End, #m3Again {
    width: 25%;
    bottom: 22%;
    left: 37%;
}

#m3Next > div {
    background-image: url(./images/m3Next.png);
    padding-bottom: calc(100% * 137 / 652);
}

#m3End > div {
    background-image: url(./images/m3End.png);
    padding-bottom: calc(100% * 137 / 652);
}

#m3Again > div {
    background-image: url(./images/m3Again.png);
    padding-bottom: calc(100% * 137 / 652);
}

#m3Noted {
    width: 21%;
    bottom: 22%;
    left: 50%;
    z-index: 1;
}

#m3Noted > div {
    background-image: url(./images/m3Noted.png);
    padding-bottom: calc(100% * 128 / 485);
}
.m3Caller {
    width: 18%;
    top: 23%;
    left: 11%;
}

.m3Caller > div {
    padding-bottom: calc(100% * 491 / 422);
}

.m3Query {
    width: 40%;
    top: 30%;
    right: 19%;
}

.m3Q11 .m3Query {
    top: 28%;
}

.m3Query.answered {
    top: 19%;
    transition: 200ms all ease;
    width: 21%;
    right: 29%;
}

.m3Query > div {
    padding-bottom: calc(100% * 325 / 1000);
}

.m3Q1 > .m3Caller > div {
    background-image: url(./images/m3Caller1.png);
}

.m3Q1 > .m3Query > div {
    background-image: url(./images/m3Query1.png);
}

.m3Q2 > .m3Caller > div {
    background-image: url(./images/m3Caller2.png);
}

.m3Q2 > .m3Query > div {
    background-image: url(./images/m3Query2.png);
}

.m3Q2 > .m3Query > div {
    background-image: url(./images/m3Query2.png);
}

.m3Q3 > .m3Caller > div {
    background-image: url(./images/m3Caller3.png);
}

.m3Q3 > .m3Query > div {
    background-image: url(./images/m3Query3.png);
}

.m3Q4 > .m3Caller > div {
    background-image: url(./images/m3Caller4.png);
}

.m3Q4 > .m3Query > div {
    background-image: url(./images/m3Query4.png);
}

.m3Q5 > .m3Caller > div {
    background-image: url(./images/m3Caller5.png);
}

.m3Q5 > .m3Query > div {
    background-image: url(./images/m3Query5.png);
}

.m3Q6 > .m3Caller > div {
    background-image: url(./images/m3Caller6.png);
}

.m3Q6 > .m3Query > div {
    background-image: url(./images/m3Query6.png);
}

.m3Q7 > .m3Caller > div {
    background-image: url(./images/m3Caller7.png);
}

.m3Q7 > .m3Query > div {
    background-image: url(./images/m3Query7.png);
}

.m3Q8 > .m3Caller > div {
    background-image: url(./images/m3Caller8.png);
}

.m3Q8 > .m3Query > div {
    background-image: url(./images/m3Query8.png);
}

.m3Q9 > .m3Caller > div {
    background-image: url(./images/m3Caller9.png);
}

.m3Q9 > .m3Query > div {
    background-image: url(./images/m3Query9.png);
}


.m3Q10 >  .m3Caller > div {
    background-image: url(./images/m3Caller10.png);
}

.m3Q10 > .m3Query > div {
    background-image: url(./images/m3Query10.png);
}

.m3Q11 >  .m3Caller > div {
    background-image: url(./images/m3Caller11.png);
}

.m3Q11 > .m3Query > div {
    background-image: url(./images/m3Query11.png);
    padding-bottom: calc(100% * 323 / 999);
}

.m3Post.case1 {
    width: 50%;
    right: 15%;
    top: 29%;
}

.m3Post.case2 {
    width: 70%;
    right: 5%;
    top: 30%;
}

.m3Q9 .m3Post.case2 {
    top: 36%;
    width: 44%;
    right: 17%;
}

.m3Post.case3 {
    width: 55%;
    right: 12%;
    top: 30%;
}

.m3Post.case4 {
    width: 70%;
    right: 5%;
    top: 30%;
}

.m3Q9 .m3Post.case4 {
    top: 36%;
    width: 44%;
    right: 17%;
}



.m3Post.case1 > div{
    padding-bottom: calc(100% * 325/1130);
    background-image: url(./images/m3Case1.png);
}

.m3Q2 .m3Post.case2 > div{
    padding-bottom: calc(100% * 325/1130);
    background-image: url(./images/m3Q2C2.png);
}

.m3Q6 .m3Post.case2 > div{
    padding-bottom: calc(100% * 335/1130);
    background-image: url(./images/m3Q6C2.png);
}

.m3Q9 .m3Post.case2 > div{
    padding-bottom: calc(100% * 335/1130);
    background-image: url(./images/m3Q9C2.png);
}

.m3Post.case3 > div{
    padding-bottom: calc(100% * 325/1130);
    background-image: url(./images/m3Case3.png);
}

.m3Q2 .m3Post.case4 > div{
    padding-bottom: calc(100% * 325/1130);
    background-image: url(./images/m3Q2C4.png);
}

.m3Q6 .m3Post.case4 > div{
    padding-bottom: calc(100% * 325/1130);
    background-image: url(./images/m3Q6C4.png);
}

.m3Q9 .m3Post.case4 > div{
    padding-bottom: calc(100% * 335/1130);
    background-image: url(./images/m3Q9C4.png);
}

.m3Ans {
    width: 23%;
    bottom: 10%;
    z-index: 1;
    cursor: pointer;
}

.m3Btn.gameBtn {
    transition: 200ms all ease;
}

.m3Btn.gameBtn:active {
    transform: translateY(-10px);
    transition: 200ms all ease;
}

.m3Yes {
    left: 31%;
}

#m3Yes > div {
    padding-bottom: calc(100% *1919 / 2373);
    background-image: url(./images/m3YesHover.png);
    /* background-image: url(./images/m3Yes.png); */
}

#m3YesHover > div {
    padding-bottom: calc(100% * 471 / 538);
    background-image: url(./images/m3YesHover.png);
}

#m3YesCorrect > div {
    padding-bottom: calc(100% * 471 / 538);
    background-image: url(./images/m3YesWrong.png);
}

.m3No {
    right: 10%;
}

#m3No > div {
    padding-bottom: calc(100% * 1962 / 2375);
    /* background-image: url(./images/m3No.png); */
    background-image: url(./images/m3NoHover.png);
}

#m3NoHover > div {
    padding-bottom: calc(100% * 471 / 538);
    background-image: url(./images/m3NoHover.png);
}

#m3NoWrong > div {
    padding-bottom: calc(100% * 471 / 538);
    /* background-image: url(./images/m3NoWrong.png); */
}

#m3QBg {
    width: 58%;
    right: 11%;
    top: 15%;
}

#m3QBg > div {
    background-image: url(./images/m3QBg.png);
    padding-bottom: calc(100% * 643 / 1129);
}

#m3Phone {
    width: 7%;
    left: 16%;
    top: 29%;
    z-index: 1;
}

#m3Phone.ringing {
    animation: ringing 1.3s linear infinite;
}

#m3Phone > div {
    background-image: url(./images/m3Phone.png);
    padding-bottom: calc(100% * 146/145);
}


.m0Star::before {
    background-image: url(./images/mLevelUp0.png);
}

.m1Star::before {
    background-image: url(./images/mLevelUp1.png);
}

.m2Star::before {
    background-image: url(./images/mLevelUp2.png);
}

.m3Star::before, #m3Passed::before {
    background-image: url(./images/mLevelUp3.png);
}

#end > div {
    background-image: url(./images/endBg.png);
    padding-bottom: calc(100% * 1080 / 1920);
}

#endMsg {
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#endMsg >div {
    padding-bottom: calc(100% * 590 / 1486);
    background-image: url(./images/endMsg.png);
}

#endQr {
    width: 17%;
    top: 34%;
    left: 21%;
}

#endQr > div {
    padding-bottom: calc(100% * 377 / 377);
    background-image: url(./images/endQr.png);
}

#endDeco1 {
    width: 10%;
    top: 34%;
    right: 10%;
}

#endDeco1 > div {
    padding-bottom: calc(100% * 70 / 201);
    background-image: url(./images/endDeco1.png);
}

#endDeco2 {
    width: 13%;
    top: 58%;
    left: 7%;
}

#endDeco2 > div {
    padding-bottom: calc(100% * 79 / 240);
    background-image: url(./images/endDeco2.png);
}

/* @media (min-width: 1800px ) {
    .scoreBar {
        height: 30px;
        top: 3%;
    }
}

@media (min-width: 1920px ) {
    .scoreBar {
        height: 30px;
        top: 6%;
    }
} */

@keyframes moveAndGrowLane1 {
    to {
        top: 54%;
        width: 15%;
        left: 15%;
    }
}

@keyframes moveAndGrowLane2 {
    to {
        top: 54%;
        width: 15%;
        left: 34%;
    }
}

@keyframes moveAndGrowLane3 {
    to {
        top: 54%;
        width: 15%;
        left: 51%;
    }
}

@keyframes moveAndGrowLane4 {
    to {
        top: 54%;
        width: 15%;
        left: 70%;
    }
}

@keyframes slightMove {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px); /* Adjust distance as needed */
    }
    100% {
      transform: translateX(0);
    }
}
  
.mild-shake {
animation: slightMove 2s ease-in-out infinite;
}

@keyframes slightMoveReverse {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(0);
    }
}
  
.mild-shake-reverse {
    animation: slightMoveReverse 2s ease-in-out infinite;
}


.burst {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    position: absolute;
    border: 6px solid #1eff25;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    opacity: 0;
    animation: burst 1s linear;
}


.circle:nth-child(1) {
    animation-delay: 0s;
}

.circle:nth-child(2) {
    animation-delay: 0.3s;
}

.circle:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes burst {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(12);
        opacity: 0;
    }
}

#m1Burst {
    width: 200px;
    height: 200px;
    z-index: 1;
}

.off-container {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    background-color: #000;
    color: white;
    font-size: calc(var(--sch) * .1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.off-container-player {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
}

#scoreBox {
    right: 3%;
    top: 3%;
    padding: 16px;
    background-color: #eaeaea;
    border-radius: 8px;
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    font-size: 40px;
    color: #193D5E;
    z-index: 10;
}

#scoreBox > div {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
    width: 120px;
}

#scoreBox > img {
    flex: 1;
    height: auto;
}

#scoreText {
    margin: 0;
    flex: 1;
    text-align: center;
}

@keyframes stampLane1 {
    to {
        left: 9%;
    }
}

@keyframes stampLane2 {
    to {
        left: 34%;
    }
}

@keyframes stampLane3 {
    to {
        left: 56%;
    }
}

@keyframes stampLane4 {
    to {
        left: 78%;
    }
}

@keyframes ringing {
  0%, 35%, 65%, 100% { transform: rotate(0deg); }
  40%, 50%, 60% { transform: rotate(8deg); }
  45%, 55% { transform: rotate(-8deg); }
}