/*
====================================================
 MU IMPERIO
 MU INVASION CENTER
 STYLE MU ONLINE
 COLOR PRINCIPAL #ed8942
====================================================
*/


:root {

    --mu-orange:#ed8942;

    --mu-dark:#080808;

    --mu-panel:#111;

    --mu-border:#333;

    --mu-text:#ddd;

    --mu-red:#c0392b;

    --mu-green:#00cc66;

}






/*
====================================================
 CONTENEDOR GENERAL
====================================================
*/


.mu-invasion-center {


    width:90%;

    margin:auto;

    color:var(--mu-text);


}









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


.mu-invasion-header {


    text-align:center;

    margin-bottom:40px;


}




.mu-server-title {


    color:var(--mu-orange);

    font-size:14px;

    letter-spacing:6px;

    text-shadow:

    0 0 10px rgba(237,137,66,.6);


}





.mu-invasion-header h1 {


    color:white;

    font-size:38px;

    letter-spacing:5px;


}





.mu-invasion-header p {


    color:#888;

    font-size:13px;

    letter-spacing:2px;


}










/*
====================================================
 EVENTO DESTACADO
====================================================
*/


.featured-invasion {


    display:flex;

    gap:30px;

    align-items:center;


    background:


    linear-gradient(

    135deg,

    rgba(237,137,66,.18),

    rgba(0,0,0,.95)

    );



    border:1px solid var(--mu-orange);

    border-radius:15px;

    padding:30px;

    margin-bottom:30px;


    box-shadow:

    0 0 25px rgba(237,137,66,.15);


}







.featured-image {


    width:220px;

    height:220px;

    overflow:hidden;

    border-radius:15px;

    border:3px solid var(--mu-orange);


}




.featured-image img {


    width:100%;

    height:100%;

    object-fit:cover;


}







.featured-info {


    flex:1;


}





.featured-label {


    color:var(--mu-orange);

    font-size:13px;

    letter-spacing:3px;


}





.featured-info h2 {


    color:white;

    font-size:30px;


}






.featured-category {


    color:#999;

    margin-bottom:20px;


}





.featured-time {


    color:#aaa;

}




.featured-time strong {


    display:block;

    color:var(--mu-orange);

    font-size:42px;


}




.global-countdown {


    margin-top:15px;

    display:inline-block;


    background:#000;

    border:1px solid var(--mu-orange);

    padding:15px 30px;

    border-radius:10px;


    color:white;

    font-size:30px;

    font-weight:bold;


}





.timezone {


    margin-top:15px;

    color:#aaa;


}










/*
====================================================
 ESTADISTICAS
====================================================
*/


.mu-statistics {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:35px;


}




.mu-statistics div {


    background:#101010;

    border:1px solid #333;

    border-radius:10px;

    padding:20px;

    text-align:center;


}




.mu-statistics strong {


    display:block;

    color:var(--mu-orange);

    font-size:28px;


}





.mu-statistics span {


    color:#888;

    font-size:11px;


}











/*
====================================================
 EVENTOS DEL DIA
====================================================
*/


.today-events {


    background:#0d0d0d;

    border:1px solid #333;

    padding:20px;

    border-radius:10px;

    margin-bottom:30px;


}





.today-events h2 {


    color:var(--mu-orange);


}





.today-event {


    display:inline-block;

    background:#181818;

    border:1px solid #444;

    padding:10px 15px;

    margin:5px;

    border-radius:5px;


}





.today-event span {


    color:var(--mu-orange);

    margin-right:8px;

    font-weight:bold;


}











/*
====================================================
 FILTROS
====================================================
*/


.mu-filters {


    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:30px;


}




.mu-filter {


    background:#151515;

    border:1px solid #444;

    color:#aaa;

    padding:10px 18px;

    border-radius:6px;

    cursor:pointer;


}





.mu-filter:hover,

.mu-filter.active {


    background:var(--mu-orange);

    color:#111;

    border-color:var(--mu-orange);

}





#muSearch {


    margin-left:auto;

    background:#111;

    border:1px solid #444;

    color:white;

    padding:10px;

    border-radius:6px;

}









/*
====================================================
 GRID TARJETAS
====================================================
*/


.mu-invasion-grid {


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;


}







/*
====================================================
 CARTA MU
====================================================
*/


.mu-card {


    background:


    linear-gradient(

    180deg,

    rgba(237,137,66,.08),

    #050505

    );



    border:1px solid #333;

    border-radius:15px;

    padding:25px;

    text-align:center;


    transition:.4s;


}




.mu-card:hover {


    transform:

    translateY(-8px);


    border-color:var(--mu-orange);


    box-shadow:

    0 0 25px rgba(237,137,66,.25);


}








.mu-card-image {


    width:170px;

    height:170px;

    margin:auto;

    overflow:hidden;

    border-radius:50%;

    border:3px solid var(--mu-orange);


}




.mu-card-image img {


    width:100%;

    height:100%;

    object-fit:cover;


    transition:.5s;


}



.mu-card:hover img {


    transform:scale(1.15);


}







.mu-card-title {


    color:white;

    font-size:20px;

    margin-top:20px;

    font-weight:bold;


}





.mu-card-category {


    color:var(--mu-orange);

    margin-top:5px;


}










/*
====================================================
 CONTADOR
====================================================
*/


.mu-card-countdown {


    margin-top:20px;

    padding:15px;

    background:#000;

    border:1px solid #333;

    border-radius:10px;


}





.mu-card-countdown span {


    display:block;

    color:#777;

    font-size:11px;


}





.mu-card-countdown strong {


    display:block;

    color:var(--mu-orange);

    font-size:30px;


}





.small-counter {


    color:white;

    font-size:18px;

    margin-top:8px;


}









/*
====================================================
 MAPAS Y DROPS
====================================================
*/


.mu-card-section {


    margin-top:20px;


}




.mu-card-section h3 {


    color:var(--mu-orange);

    font-size:13px;


}




.mu-card-section label {


    display:inline-block;

    background:#161616;

    border:1px solid #444;

    padding:6px 10px;

    margin:3px;

    border-radius:5px;

    font-size:12px;


}








.mu-card-footer {


    margin-top:20px;

    color:#aaa;

    border-top:1px solid #333;

    padding-top:15px;


}









/*
====================================================
 ALERTAS
====================================================
*/


.event-warning {


    animation:

    pulseWarning 2s infinite;


}



.event-danger {


    border-color:#ed8942!important;


    box-shadow:

    0 0 15px rgba(237,137,66,.5);


}




@keyframes pulseWarning {


0%{

box-shadow:0 0 5px var(--mu-orange);

}


50%{

box-shadow:0 0 25px var(--mu-orange);

}


100%{

box-shadow:0 0 5px var(--mu-orange);

}


}






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


@media(max-width:1100px){


.mu-invasion-grid {


grid-template-columns:repeat(2,1fr);


}



.mu-statistics {


grid-template-columns:repeat(2,1fr);


}



.featured-invasion {


flex-direction:column;


}


}





@media(max-width:600px){


.mu-invasion-grid {


grid-template-columns:1fr;


}



.mu-statistics {


grid-template-columns:1fr;


}



#muSearch {


width:100%;

margin-left:0;


}



}