/* MODAL COUNTDOWN */


.counter {
    font-size: 70px;
    text-align: center;
    font-weight: 700;
    color: #FF9D00;
}




.modal-content.countdown .content{
    padding: 50px;
   
    /* box-shadow: 0 0 10px rgba(255,157,0,1) */
}

.modal-content.countdown {
    /* box-shadow: 0 0 10px rgba(255,157,0,1); */
    animation: boxShadowPulse 1.1s infinite ease-in-out;
    -webkit-animation: boxShadowPulse 1.1s infinite ease-in-out;
    border-radius: 24px;
}

/* Keyframes for scaling up and down */

/* Apply the animations */
.scale-up {animation: scaleUp 0.5s forwards;}
.scale-down {animation: scaleDown 0.5s forwards;}


.gameplay h1.game_cat {
    font-family: "Nanotech LLC";
    text-align: left;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin: 25px auto 0 0;
}


.flex-row.gameplay_steps {
    justify-content: center;
    margin: 20px auto;
}

.gameplay_steps .game_step {
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 5px;
    border-radius: 2px;
}

.gameplay_steps .game_step.centered {
    margin: 0 10px;
}

.gameplay_steps .wrong {background-color: #E74A4A;}
.gameplay_steps .correct {background-color: #00BA01;}

.flex-row.quest_count {
    justify-content: space-between;
    align-items: center;
}

.quest_count p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.magic_question .quest_count p {
    font-size: 16px;
    color: #3EB3F8;
}

.time_counter_box {
    padding: 3px 5px;
    border-radius: 7px;
    background-color: #ffffff;
    width: 100%;
    max-width: 70px;
}

.time_counter_box.ending {
    background-color: #ff2c2c;
}

.time_counter.ending {
    color: #000000;
}

.quest_img {
    border: 5px solid rgba(0, 0, 0, 0.4);
    border-radius: 30px;
}

.magic_question .quest_img {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(43,192,249,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(43,192,249,1);
    box-shadow: 0px 0px 10px 0px rgba(43,192,249,1);
    border: none;
}


.time_counter {
    font-size: 14px;
    font-weight: 700;
}

/* .magic_question .time_counter {
    color: #e74a4a;
} */

.time_counter_box img {max-width: 16px;}
.time_counter_box .flex-row {justify-content: space-between;}

section.questions {
    margin: 20px auto 40px auto;
}

.quest_title {
    font-size: 24px;
    font-weight: 600;
    margin: 20px auto 10px auto;
}

.question_btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    width: 100%;
    min-height: 65px;
    align-items: center;
    padding: 10px 20px;
    border-radius: 16px;
    font-family: 'Montserrat';
    margin: 20px auto 0 auto;
    transition: 0.3s;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 96% 50%;
}

@supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */ 
    .question_btn:hover {
        border: 1px solid #FF9D00;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
        box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
    }

    .magic_question .question_btn:hover {
        border: 1px solid #00b3f8;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
        box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
    }
}



.question_btn.selected {
    border: 1px solid #FF9D00;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
    box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
}


.magic_question .question_btn.selected {
    border: 1px solid #00b3f8;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
    box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
}

.question_btn span {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: #ffffff;
    font-size: 12px;
    padding: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.question_btn p {
    font-size: 16px;
    font-weight: 600;
}

.question_btn.right_answer, 
.magic_question .question_btn.right_answer {
    background-color: #00ba01;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,186,1,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,186,1,1);
    box-shadow: 0px 0px 10px 0px rgba(0,186,1,1);
    border: 1px solid #00ba01;
    background-image: url('../images/game/correct_icon.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 96% 50%;
}

.question_btn.wrong_answer,
.magic_question .question_btn.wrong_answer {
    background-color: #e74a4a;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(231,74,74,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(231,74,74,1);
    box-shadow: 0px 0px 10px 0px rgba(231,74,74,1);
    border: 1px solid #e74a4a;
    background-image: url('../images/game/wront_icon.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 96% 50%;
}



section.answer_msg {margin-bottom: 40px;}
.answer_msg .flex-row {
    justify-content: space-between;
    align-items: center;
}

.answer_msg .answer_points img {max-width: 25px;}

.answer_msg p {margin-right: 10px;}
.answer_msg .answer_points {margin-left: 10px;}

.answer_points p {
    color: #FF9D00;
    font-weight: 700;
    text-align: right;
}

.answer_msg.right_answer .answer_txt span {
    color: #00BA01;
    font-weight: 700;
}

.answer_msg.wrong_answer .answer_txt span {
    color: #E74A4A;
    font-weight: 700;
}

.answer_msg .outline_fancy_btn {
    margin-top: 30px;
}

main.magic_question {
    background: 
    linear-gradient(to bottom, #0B2B53 0%, rgba(11, 43, 83, 0.7) 15%, rgba(11, 43, 83, 0) 50%),
    linear-gradient(158.52deg, #0C092A 12.82%, #2E0124 84.59%);
}

.quest_img_container {
    position: relative;
}

.mq_badge {
    justify-content: center;
    align-items: center;
    background-color: #00B3F8;
    max-width: 165px;
    height: 30px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(43, 192, 249, 1);
    -moz-box-shadow: 0px 2px 10px 0px rgba(43, 192, 249, 1);
    box-shadow: 0px 2px 10px 0px rgba(43, 192, 249, 1);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 5px;
}

.mq_badge .mq_book {
    max-width: 40px;
    margin-left: -10px;
    margin-top: -5px;
}

.mq_badge .mq_questionmark {
    max-width: 16px;
}

.mq_badge p {
    margin: 0 5px;
    font-size: 14px;
}

.magic_question .quest_title {
    margin: 30px auto 10px auto;
}

.magic_question .question_btn span {
    background-color: #00B3F8;
}


.double_points .mq_badge {
    max-width: 225px;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(247, 158, 24, 1);
    -moz-box-shadow: 0px 2px 10px 0px rgba(247, 158, 24, 1);
    box-shadow: 0px 2px 10px 0px rgba(247, 158, 24, 1);
    height: auto;
   
    background: radial-gradient(45.33% 46.43% at 41.69% 50%, #FF4001 0%, rgba(255, 64, 1, 0) 100%), radial-gradient(28.41% 117.96% at 7.72% 28.75%, #FFFDA6 0%, rgba(255, 255, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(37.39% 69.19% at 107.79% 0%, #FF7500 0%, rgba(255, 66, 0, 0) 100%), radial-gradient(54.38% 89.75% at 83.46% 89.75%, #FFF926 0%, rgba(255, 69, 0, 0.6) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FF4001;
    border: 0.5px solid #FFFED6;
    box-shadow: inset 0px 0px 6.24px #FEA000, inset 0px 0px 9.36px #FFFD54;

}

.double_points .quest_img {
    box-shadow: 0px 0px 10px 0px #F79E18;
    -webkit-box-shadow: 0px 0px 10px 0px #F79E18;
    -moz-box-shadow: 0px 0px 10px 0px #F79E18;
    border: none;
}

.double_points .mq_badge p {
    text-shadow: 1px 1px 2px #000000;
    -webkit-text-shadow: 1px 1px 2px #000000;
}

.double_points .mq_badge .mq_book {max-width: 50px;}

.double_points .question_btn span {
    background-color: #F79E18;
}

main.double_points {
    background: 
    linear-gradient(to bottom, rgba(247, 158, 24, .5) 0%, rgba(247, 158, 24, 0.3) 15%, rgba(247, 158, 24, 0) 50%), 
    linear-gradient(158.52deg, #0C092A 12.82%, #2E0124 84.59%);
}

.double_points .quest_title {
    margin: 30px auto 10px auto;
}

/* .double_points .question_btn:hover,
.double_points .question_btn:focus {
    border: 1px solid #F79E18;
    -webkit-box-shadow: 0px 0px 10px 0px #F79E18;
    -moz-box-shadow: 0px 0px 10px 0px #F79E18;
    box-shadow: 0px 0px 10px 0px #F79E18;
} */

/* Ellipse 396 */

.lanterns .time_counter_box,
.puzzle .time_counter_box {background-color: transparent;}

.lanterns .time_counter.ending,
.puzzle .time_counter.ending {color: #F54B4C;}

.puzzle.game .top_bar {justify-content: center;}


/* LANTERNS GAME */
main.lanterns {
    /* background: linear-gradient(180deg, #5f92bb 0%, #184b96 40%, #232176 100%); */
    background: linear-gradient(158.52deg, #0C092A 12.82%, #2E0124 84.59%);
    /* background-size: contain; */
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
}



main.lanterns.game {overflow: hidden;}


.bottom-image {
    position: fixed;
    bottom: -10vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0; 
    pointer-events: none; 
    width: 100%; 
    max-width: 80%;
}

.game .top_bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(15, 28, 85, 0.6);
    color: #ffffff;
    font-size: 16px;
    padding: 10px 35px;
    border-bottom-left-radius: 20px;        
    border-bottom-right-radius: 20px;
    position: relative;
}

.lanterns section {z-index: 2;}

.game .top_bar img {
    max-width: 25px;
    margin-right: 10px;
}

.game .top_bar .flex-row {align-items: center;}

.game .top_bar .time_counter_box.flex-row {justify-content: end;}


.game .top_bar .score_section.flex-row {justify-content: start;}

.game .top_bar .score {
    margin-left: 10px;
    font-weight: 700;
    font-size: 18px;
}

.box_lanterns {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -150px;
    transition: transform 1.5s linear;
    -webkit-transition: transform 1.5s linear;
    cursor: pointer;
    z-index: 1;
}

.move {
    transform: translateY(120vh);
    -webkit-transform: translateY(120vh);
}


/* PUZZLE GAME */

main.puzzle {
    /* background: linear-gradient(180deg, #5f92bb 0%, #184b96 40%, #232176 100%); */
    background: linear-gradient(158.52deg, #0C092A 12.82%, #2E0124 84.59%);
    background-size: cover;
    background-position: center;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.puzzle .top_bar .time_counter_box.flex-row {justify-content: center;}

.puzzle .game_box {
    background-color: rgba(15, 28, 85, 0.6);
    padding: 20px;
    border-radius: 20px;
    position: relative;
    margin-top: 30px;
}

.me {
  position: relative;
  display: inline-block;
  width: calc(33.33% - 0.8%);
  /* max-width: 33.33%;         */
  /* height: 100%; */
  aspect-ratio: 1/1;    
  background-size: 300% 300%; /* Scale sprite so each cell fills the element */
  background-repeat: no-repeat;
  margin-top: -1px;
  /* margin: 0.2px; */
  margin: -0.2% 0.4% 0.4% 0.4%;
  transition: 0.2s;
}
.full {
    width: 100%;
    height: 100%;
    background-size: 100%;
}


.me_0 { background-position: 0% 0%; }
.me_1 { background-position: 50% 0%; }
.me_2 { background-position: 100% 0%; }
.me_3 { background-position: 0% 50%; }
.me_4 { background-position: 50% 50%; }
.me_5 { background-position: 100% 50%; }
.me_6 { background-position: 0% 100%; }
.me_7 { background-position: 50% 100%; }
.me_8 { background-position: 100% 100%; }

.prevent_click {
    pointer-events: none;
}
.correct_puzzle {
    border-radius: 0px;
    box-shadow: 0 0 0 transparent, 0 0 0 transparent;
    animation: corect 0.5s ease;
    animation-delay: 0.2s;
}


@keyframes corect {
    0% {
        transform: scale(1);
        border-radius: 10px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   }
    50% {
        transform: scale(1.25);
        border-radius: 5px;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   }
    100% {
        transform: scale(1);
        border-radius: 0px;
        box-shadow: 0 0 0 transparent, 0 0 0 transparent;
   }
}
.pre_img {
    margin-top: 10px;
    width: 100%;
    /* position: absolute; */
    /* left: 100px; */
}
.pre_img li {
    /* display: inline-block; */
    list-style: none;
}
.pre_img li img {
    width: 100%;
    max-width: 120px;
    height: auto;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
}


/* LANTERNS MODALS */
/* .lantern_modal .modal-card {background: rgba(15, 28, 85, 0.7);} */

/* .lantern_modal .modal-overlay {
    backdrop-filter: blur(2px);
    background: rgba(26, 69, 145, 0.3);
} */

.lantern_modal .modal-card .middle_img {
    margin: 40px auto;
    max-width: 100px;
}

/* .lantern_modal .gift_points_box .header {background: #112967;} */

.lantern_modal .modal-card h1 span {color: #ffffff;}

.lantern_modal .modal-card p span {
    color: #FFB334;
    font-weight: 700;
}




@media only screen and (max-width: 500px) {

    .gameplay h1.game_cat {margin: 10px auto 0 0;}
    .flex-row.gameplay_steps {margin: 10px auto 20px auto;}
    .quest_title {margin: 15px auto 20px auto; font-size: 20px;}
    .question_btn {
        min-height: 50px;
        margin: 10px auto 0 auto;
    }
    section.questions {margin: 15px auto 40px auto;}



    .lanterns .top_bar {padding: 10px 15px;}
    .lanterns .top_bar img {margin-right: 7px;}
    .lanterns .top_bar .score {margin-left: 7px;}

     .lantern_modal .modal-card .middle_img {
        margin: 30px auto;
        max-width: 80px;
    }

    .lantern_modal .modal-card .content p {
        margin: 15px auto;
        font-size: 14px;
    }

}

@media only screen and (max-width: 400px) {
    .answer_msg .answer_txt span {
        display: block;
    }
}



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

@keyframes scaleDown {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}


@keyframes boxShadowPulse {
    0% {box-shadow: 0 0 10px rgba(255,157,0,1);}
    10% {box-shadow: 0 0 20px rgba(255,157,0,1);}
    20% {box-shadow: 0 0 30px rgba(255,157,0,1);}
    30% {box-shadow: 0 0 40px rgba(255,157,0,1);}
    40% {box-shadow: 0 0 50px rgba(255,157,0,1);}
    50% {box-shadow: 0 0 60px rgba(255,157,0,1);}
    60% {box-shadow: 0 0 50px rgba(255,157,0,1);}
    70% {box-shadow: 0 0 40px rgba(255,157,0,1);}
    80% {box-shadow: 0 0 30px rgba(255,157,0,1);}
    90% {box-shadow: 0 0 20px rgba(255,157,0,1);}
    100% {box-shadow: 0 0 10px rgba(255,157,0,1);}
}