/* ================================== */
/* ===         RESPONSIVE         === */
/* ================================== */

/* Eu queria de verdade que o projeto todo fosse responsivo, mas depois de um bom tempo fazendo algumas gambiarras no desktop verion eu desanimei, e não acreditaria que as pessoas veriam pelo celular... Mas é possível!!! Só não me dediquei inteiramente a isso... Sinto muito. Mas em compensação o inventário está responsivo! */



@media screen and (max-width: 1500px){
    body {
        overflow-y: scroll;
    }
    
    #loadingScreen, .start {
        overflow: hidden;
    }
    
    .modal_reward {
        transform: scale(.9);
    }

    #inventory > img {
        filter: grayscale(60%) opacity(4%);
    }
    .hearts {
        width: 370px;
        gap: 0;
    }
    .hearts > svg {
        margin: 2px;
        height: 20px;
        width: 20px;
    }
    .header_info_title {
        overflow: hidden;
    }
    .header_info_title > h1 {
        overflow: hidden;
    }
    .contain_pri {
        height: 1100px;
        overflow: hidden;
    }
    .triforce_bottom {
        top: 1247px;
    }
    .content_pri {
        flex-direction: column;
    }
    .mission {
        height: 50%;
        width: 100%;
        margin-top: 30px;
    }
    .mission_contain {
        overflow: hidden;
    }
    .details {
        overflow: hidden;
    }
    .mission_details {
        background-color:#00000080;
        background-image: none;
        display: flex;
        justify-content: center;
        margin-bottom: 50px;
        margin-top: -60px;
    }
    .mission_details::before {
        border: 2px solid #ffffff40;
    }
    .action_buttons {
        top: 1265px;
    }
}



@media screen and (max-width: 1200px) {
    body {
        height: 1450px;
        position: relative;
    }

    .modal_response_overlay, .modal_reward_overlay, .modal_korok_overlay {
        height: 100%;
    }
    .modal_reward {
        transform: scale(.5);
    }
    .modal_response {
        transform: scale(.6);
    }
    .modal_korok_scale {
        transform: scale(.6);
    }

    .triforce_top {
        top: 260px;
    }
    .triforce_bottom {
        top: 1347px;
    }
    .contain_pri {
        transform: translateY(260px);

    }
    .header_info_pc {
        display: none;
    }
    .header_mobile {
        display: flex;
        justify-content: center;
        margin-top: 90px;
        transform: translateX(30px);
    }
    .rupees > img {
        width: 40px;
    }
    .rupees > h1 {
        font-size: 1.4em;
    }
    .mission_details {
        width: 95%;
    }
    .action_buttons {
        width: 360px;
        top: 1365px;
    }
}



@media screen and (max-width: 750px) {
    .modal_reward {
        transform: scale(.4);
    }
    .modal_response {
        transform: scale(.5);
    }
    .modal_korok_scale {
        transform: scale(.4);
    }

    .header_pc {
        width: calc(100% - 20px);
        margin: 15px;
        display: flex;
        justify-content: space-between;
    }
    .header_mobile {
        margin: 90px 0 0 -30px;
        width: 100%;
    }
    .header_info_title > h1 {
        font-size: 2.2em;
    }
    .triforce_top {
        left: 14px;
    }
    .triforce_bottom {
        left: 14px;
    }
    .contain_pri {
        width: calc(100% - 15px);
    }
    .mission_area {
        width: 600px;
    }
    .divisor_botton01 {
        display: block;
        margin-top: 15px;
    }
    .divisor_botton02 {
        display: none;
    }
}



@media screen and (max-width: 650px) {
    body {
        height: 1000px;
    }

    .modal_reward {
        transform: scale(.25);
    }
    .modal_response {
        transform: scale(.27);
    }
    .modal_korok_scale {
        transform: scale(.27);
    }

    .hearts {
        width: 220px;
    }
    .hearts > svg {
        margin: 1.2px;
        height: 12px;
        width: 12px;
    }


    header {
        height: 90px;
    }
    .header_mobile {
        margin: 70px 0 0 -40px;
    }
    .header_info_title > h1 {
        font-size: 1.5em;
    }
    .circle {
        gap: 4px;
        margin-top: -35px;
        height: 15px;
    }
    .circle_select {
        width: 5px;
        height: 5px;

    }
    .circle_not_select {
        width: 4px;
        height: 4px;
    }
    .header_info_icon {
        gap: 4px;
        margin-top: 15px;
    }
    .header_info_icon > svg {
        width: 22px;
    }
    .header_info_icon > h2 {
        font-size: 1em;
        width: 80px;
    }

    .rupees > img {
        width: 30px;
    }
    .rupees > h1 {
        font-size: 1em;
        letter-spacing: 2px;
        height: 30px;
    }


    .triforce_top {
        top: 190.5px;
    }
    .triforce_bottom {
        top: 897px;
    }
    .contain_pri {
        transform: translateY(190px);
        height: 720px;
    }
    .content_pri {
        justify-content: start;
    }
    .mission {
        margin-top: 15px;
    }
    .icon_area {
        width: 300px;
        gap: 15px;
        height: 91px;
    }
    .icon_area::before {
        left: 50px;
        height: 1px;
        width: 32px;
    }
    .icon_area::after {
        right: 40px;
        height: 1px;
        width: 150px;
    }
    .name_area {
        transform: translateX(calc(((-66px - 101.22px) / 2) + 15px));
        font-size: .6em;
    }
    .name_area > h3 {
        width: 130px;
    }
    .icon_area > svg {
        height: 30px;
        margin-top: 25px;
    }
    #r_joystick {
        bottom: 7px;
        width: 20px;
        height: 30px; 
        left: 85px;
    }
    #meuSvg {
        bottom: 17px;
        width: 10px; 
        height: 10px;
        left: 109px;
    }

    .mission_area {
        width: 320px;
    }
    .mission_contain::after {
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border: 1px solid #fcfee490;
    }
    .mission_content {
        width: 100%;
        justify-content: start;
        align-items: center;
        margin: 15px;
    }
    .mission_icon > svg {
        height: 25px;
    }
    .mission_text > h1 {
        font-size: 1em;
    }
    .mission_text > p {
        font-size: .6em;
        letter-spacing: .04em;
        margin-top: -14px;
    }
    .mission_select {
        margin-right: 6px;
        border-radius: 2px;
        height: 59px;
        width: 35px;
    }
    .selected {
        height: 9px;
        width: 9px;
        border-radius: 50%;
    }
    .selected > div{
        width: 6px;
        height: 6px;
    }
    .mission_details {
        margin-top: -140px;
        line-height: 1em;
        height: fit-content;
    }
    .details {
        padding: 20px;
    }
    .details > h1 {
        font-size: 1.1em;
        height: 23px;
        margin-top: 0;
    }
    .delegator {
        gap: 5px;
        font-size: .6em;
    }
    .delegator > img {
        width: 10px;
    }
    .local {
        font-size: .6em;
    }
    .text_details {
        font-size: .8em;
        margin-top: 10px;
    }
    .text_details > p {
        margin-top: 10px;
    }
    .button {
        margin-top: 15px;
    }
    .button_content {
        height: 40px;
    }
    .button_content > p {
        letter-spacing: .03em;
        font-size: .7em;
    }
    .divisor {
        width: 300px;
    }
    .action_buttons {
        width: 240px;
        height: 50px;
        top: 915px;
        right: 0;
        gap: 20px;
        font-size: .8em;
    }
    .action_buttons p {
        padding: 5px;
    }
    .b_button_icon > svg, .a_button_icon > svg {
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(1px);
        width: 15px;
        height: 16px;
    }
}