/*==================================================
PANEL MISIONES
==================================================*/

#misiones_overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.25);

    /*backdrop-filter:blur(5px);*/

    opacity:0;
    visibility:hidden;

    transition:.28s;

    z-index:998;

}

#misiones_overlay.open{

    opacity:1;
    visibility:visible;

}

/*==================================================
PANEL
==================================================*/

#panel_misiones{
    position:fixed;
    left:20px;
    right:20px;
    bottom:0;
    height:72vh;

    background:url("../imgs/index/fondo_misiones.png") center center;
    background-size:cover;
    background-repeat:no-repeat;

    border-top:4px solid #c89a47;
    border-left:2px solid #8b6235;
    border-right:2px solid #8b6235;

    border-radius:28px 28px 0 0;

    box-shadow:0 -10px 35px rgba(0,0,0,.45);

    transform:translateY(105%);
    transition:transform .28s cubic-bezier(.25,1.15,.35,1);

    z-index:999;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
#panel_misiones.open{

    transform:translateY(0);

}

/*==================================================
HANDLE
==================================================*/

.misiones_handle{

    width:70px;
    height:6px;

    border-radius:10px;

    background:#a98b55;

    margin:12px auto 8px auto;

}

/*==================================================
HEADER
==================================================*/

.misiones_header{

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

    padding-bottom:15px;

    border-bottom:2px solid rgba(0,0,0,.08);

}

.misiones_title{

    font-family:'Fredoka',sans-serif;

    font-size:25px;

    font-weight:700;

    color:#4d2f09;

}

.misiones_timer{

    margin-top:5px;

    font-family:'Fredoka',sans-serif;

    font-size:14px;

    color:#fff;

}

/*==================================================
BOTON CERRAR
==================================================*/

.misiones_close{

    position:absolute;

    top:15px;
    right:15px;

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

}

.misiones_close:hover{

    background:rgba(255,255,255,.22);

    transform:scale(1.08);

}

.misiones_close:active{

    transform:scale(.95);

}

/*==================================================
LISTA
==================================================*/

.misiones_lista{

    flex:1;

    overflow-y:auto;

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.misiones_lista::-webkit-scrollbar{

    width:8px;

}

.misiones_lista::-webkit-scrollbar-thumb{

    background:#b88a41;

    border-radius:20px;

}

/*==================================================
TARJETA
==================================================*/

.mision_card{

    background:linear-gradient(
        180deg,
        #fff8e8 0%,
        #f2e4bf 100%
    );

    border-radius:20px;
    padding:18px;

    box-shadow:
        0 6px 14px rgba(0,0,0,.18),
        inset 0 2px 0 rgba(255,255,255,.5);

    display:flex;
    flex-direction:column;
    gap:12px;
}

/*==================================================
NOMBRE
==================================================*/

.mision_nombre{

    font-family:'Fredoka',sans-serif;

    font-size:20px;

    font-weight:bold;

    color:#4d2f09;

}

/*==================================================
DESCRIPCION
==================================================*/

.mision_descripcion{

    font-family:'Fredoka',sans-serif;

    font-size:14px;

    color:#6b6b6b;

}

/*==================================================
PROGRESO
==================================================*/

.mision_progreso_texto{

    font-family:'Fredoka',sans-serif;

    font-size:14px;

    color:#4d2f09;

    font-weight:bold;

}

.mision_barra{

    width:100%;

    height:14px;

    border-radius:20px;

    overflow:hidden;

    background:#d9d9d9;

}

.mision_fill{

    height:100%;

    width:0;

    border-radius:20px;

    background:

    linear-gradient(
        90deg,
        #43d854,
        #22b43a
    );

    transition:width .35s;

}

/*==================================================
RECOMPENSA
==================================================*/

.mision_footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mision_reward{

    display:flex;

    align-items:center;

    gap:8px;

    font-family:'Fredoka',sans-serif;

    font-weight:bold;

    color:#4d2f09;

}

.mision_reward img{

    width:26px;

}

/*==================================================
BOTONES
==================================================*/

.btn_reclamar{

    border:none;

    border-radius:12px;

    padding:10px 18px;

    background:

    linear-gradient(
        180deg,
        #5ddb57,
        #2b9d34
    );

    color:white;

    font-family:'Fredoka',sans-serif;

    font-weight:bold;

    cursor:pointer;

    transition:.15s;

}

.btn_reclamar:active{

    transform:scale(.95);

}

.btn_reclamada{

    border:none;

    border-radius:12px;

    padding:10px 18px;

    background:#9a9a9a;

    color:white;

    font-family:'Fredoka',sans-serif;

    font-weight:bold;

}

.btn_pendiente{

    border:none;

    border-radius:12px;

    padding:10px 18px;

    background:#c5c5c5;

    color:#666;

    font-family:'Fredoka',sans-serif;

    font-weight:bold;

}

/*==================================================
ANIMACION
==================================================*/

@keyframes misionesBounce{

    0%{

        transform:translateY(100%);

    }

    80%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

#panel_misiones.open{

    animation:misionesBounce .35s;

}

.mision_loading{

    text-align:center;

    padding:40px;

    font-family:'Fredoka',sans-serif;

    color:#5d4a28;

    font-size:18px;

}
.misiones-container{

    position:relative;

    display:inline-block;

}

#badge_misiones{

    display:none;

    position:fixed;

    top:82%;
    right:65px;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#ffd400;

    box-shadow:0 0 12px #ffd400;

    z-index:9999;

    animation:badgePulse 1s infinite;

}

@keyframes badgePulse{

    0%{

        transform:scale(1);
        opacity:1;

    }

    50%{

        transform:scale(1.35);
        opacity:.35;

    }

    100%{

        transform:scale(1);
        opacity:1;

    }

}

/*=========================
DIFICULTAD
=========================*/

.mision_dificultad{

    width:100%;

    text-align:center;

    padding:6px 0;

    margin-bottom:12px;

    border-radius:8px;

    font-size:12px;

    font-weight:bold;

    letter-spacing:1px;

    color:#fff;

    font-family:'Fredoka',sans-serif;

    text-shadow:0 1px 2px rgba(0,0,0,.6);

}
.dificultad_comun{

    background:#A5D6A7;

    color:#1B5E20;

}

.dificultad_poco_comun{

    background:#90CAF9;

    color:#0D47A1;

}

.dificultad_rara{

    background:#CE93D8;

    color:#4A148C;

}

.dificultad_epica{

    background:#FFCC80;

    color:#E65100;

}

.dificultad_legendaria{

    background:linear-gradient(
        90deg,
        #FFF3B0,
        #FFFDE7,
        #FFF3B0
    );

    color:#8A6D00;

    animation:legendariaGlow 2s linear infinite;

}
@keyframes legendariaGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.35);

    }

    100%{

        filter:brightness(1);

    }

}