/*
Game Palette Trophy System
CSS Final Version
*/


/* ==========================
   Trophy Card
========================== */


.gp-trophy-box {

    display: flex;
    align-items: center;
    gap: 18px;

    background: #ffffff;

    border-radius: 14px;

    padding: 16px;

    margin-bottom: 15px;

    box-shadow: 0 4px 15px rgba(0,0,0,.08);

    border: 1px solid rgba(0,0,0,.05);

    transition: all .3s ease;

}



.gp-trophy-box:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(0,0,0,.12);

}




/* ==========================
   Trophy Icon
========================== */


.gp-trophy-icon img {

    width: 60px;

    height: 60px;

    object-fit: contain;

}




/* ==========================
   Content
========================== */


.gp-trophy-content {

    flex: 1;

}



.gp-trophy-content h3 {

    margin: 8px 0 5px;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;

    color: #222;

}



.gp-trophy-content p {

    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.7;

}





/* ==========================
   Trophy Type Badge
========================== */


.gp-trophy-type {

    display: inline-block;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    text-transform: capitalize;

}




.gp-bronze {

    background: #b87333;

    color: #fff;

}



.gp-silver {

    background: #a7a7a7;

    color: #fff;

}



.gp-gold {

    background: #d4af37;

    color: #111;

}



.gp-platinum {

    background: #6c5ce7;

    color: #fff;

}





/* ==========================
   Hidden Trophy
========================== */


.gp-hidden-trophy {

    display: inline-block;

    margin-top: 10px;

    padding: 5px 12px;

    border-radius: 20px;

    background: #222;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

}





/* ==========================
   Difficulty / Time
========================== */


.gp-trophy-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;

}



.gp-trophy-meta span {

    background: #f3f3f3;

    color: #555;

    padding: 6px 12px;

    border-radius: 8px;

    font-size: 13px;

}





/* ==========================
   Summary Box
========================== */


.gp-summary-box {

    background: #ffffff;

    border-radius: 15px;

    padding: 22px;

    margin-bottom: 25px;

    box-shadow: 0 5px 18px rgba(0,0,0,.08);

    border: 1px solid rgba(0,0,0,.05);

}



.gp-summary-box h3 {

    margin: 0 0 20px;

    font-size: 22px;

    font-weight: 700;

}





/* Summary Grid */


.gp-summary-grid {

    display: grid;

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

    gap: 12px;

}




.gp-summary-item {

    background: #f7f7f7;

    border-radius: 12px;

    text-align: center;

    padding: 15px 8px;

    font-size: 13px;

    font-weight: 600;

}



.gp-summary-item strong {

    display: block;

    font-size: 26px;

    margin: 5px 0;

}





.gp-summary-total {

    margin-top: 18px;

    padding: 12px;

    background: #f3f3f3;

    border-radius: 10px;

    font-size: 15px;

}





/* ==========================
   Dark Mode Compatibility
========================== */


@media (prefers-color-scheme: dark) {


.gp-trophy-box,
.gp-summary-box {

    background:#1f1f1f;

}



.gp-trophy-content h3 {

    color:#fff;

}



.gp-trophy-content p {

    color:#bbb;

}



.gp-trophy-meta span,
.gp-summary-item,
.gp-summary-total {

    background:#2b2b2b;

    color:#ddd;

}


}






/* ==========================
   Mobile
========================== */


@media(max-width:768px){


.gp-trophy-box {

    padding:12px;

    gap:12px;

}



.gp-trophy-icon img {

    width:48px;

    height:48px;

}



.gp-trophy-content h3 {

    font-size:16px;

}



.gp-trophy-content p {

    font-size:13px;

}



.gp-summary-grid {

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

}


}





@media(max-width:420px){


.gp-trophy-box {

    align-items:flex-start;

}



.gp-trophy-meta {

    flex-direction:column;

}


}