.achievements-page {

width:90%;

margin:auto;

}



.achievements-header {

text-align:center;

margin-bottom:40px;

}



.server-name {

color:#e76000;

font-size:12px;

letter-spacing:5px;

text-transform: uppercase;

font-weight: bold;

}



.achievements-header h1 {

color:white;

font-size:34px;

letter-spacing:4px;

margin:15px 0;

font-weight: bold;

}



.achievements-header p {

color:#777;

font-size:12px;

}





.achievements-container {


display:grid;

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

gap:25px;


}






.achievement-card {


min-height:370px;


background:

linear-gradient(

180deg,

rgba(30,0,0,.40),

rgba(0,0,0,.95)

);



border:1px solid #6d5200;


border-radius:12px;


padding:25px;


text-align:center;


position:relative;


}




.completed-card {


border-color:#b88600;


}







.achievement-icon {


width:60px;

height:60px;


margin:auto;


border-radius:50%;


border:2px solid #e76000;


background:#120000;


display:flex;


align-items:center;


justify-content:center;


}



.achievement-icon i {


font-size:32px;

color:#e76000;


}








.achievement-title {


margin-top:25px;


font-size:14px;


font-weight:bold;


color:white;


line-height:18px;


}





.achievement-description {


margin-top:10px;


color:#777;


font-size:12px;


}







/* BLOQUE GANADOR */


.achievement-winner {


margin-top:20px;


}




.winner-avatar {


height:80px;


display:flex;


justify-content:center;


align-items:center;


}




/*
 WebEngine devuelve aquí la imagen
*/


.achievement-class-image {


width:70px !important;


height:70px !important;


border-radius:50%;


border:2px solid #8b0000;


}





.winner-name {


margin-top:10px;


font-size:16px;


font-weight:bold;


color:#d4af37;


}




.winner-status {


margin-top:5px;


font-size:12px;


color:#00cc66;


}



.online-dot {


display:inline-block;


width:8px;


height:8px;


border-radius:50%;


background:#00cc66;


}





.winner-date {


margin-top:8px;


font-size:11px;


color:#777;


}





.achievement-pending {


margin-top:25px;


color:#777;


font-size:12px;


font-style:italic;


}





.achievement-report {


display:inline-block;


margin-top:15px;


padding:7px 20px;


border:1px solid #700000;


border-radius:5px;


color:#aaa;


font-size:11px;


}







.achievement-reward {


margin-top:25px;


border:1px solid #806000;


border-radius:6px;


padding:9px;


color:#d4af37;


font-size:11px;


background:rgba(90,60,0,.15);


}





@media(max-width:900px){


.achievements-container{

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

}


}



@media(max-width:600px){


.achievements-container{

grid-template-columns:1fr;

}


}