/* ============================================================
   EduJA — Achievements page styles
   Reuses .assess-content/.assess-header/.assess-grid/.assess-card/
   .completion-badge/.access-gate from style.css + assessment.css;
   this file only adds what's unique to the badge tiles themselves.
   ============================================================ */

.achv-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
}
.achv-summary-stat {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    padding: 12px 18px;
    text-align: center;
    min-width: 110px;
}
.achv-summary-stat .achv-summary-num { font-size: 1.4rem; font-weight: bold; color: #FDB827; display: block; }
.achv-summary-stat .achv-summary-label { font-size: 0.68rem; color: #ccc; text-transform: uppercase; letter-spacing: 0.03em; }

.achv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.achv-card {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    padding: 16px;
    color: #f5e7c8;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s;
}
.achv-card.achv-earned { border-color: #FDB827; background: rgba(253, 184, 39, 0.08); }
.achv-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.achv-card-icon { font-size: 1.8rem; line-height: 1; filter: grayscale(1) opacity(0.4); }
.achv-card.achv-earned .achv-card-icon, .achv-card.achv-tier-1 .achv-card-icon,
.achv-card.achv-tier-2 .achv-card-icon, .achv-card.achv-tier-3 .achv-card-icon,
.achv-card.achv-tier-4 .achv-card-icon, .achv-card.achv-tier-5 .achv-card-icon { filter: none; }
.achv-card-title { font-weight: bold; font-size: 0.92rem; }
.achv-card-tier-label { font-size: 0.68rem; color: #FDB827; font-weight: 600; }
.achv-card-desc { font-size: 0.76rem; color: #ccc; margin-bottom: 10px; line-height: 1.4; }
.achv-progress-track { background: rgba(255, 255, 255, 0.1); border-radius: 8px; height: 8px; overflow: hidden; margin-bottom: 6px; }
.achv-progress-fill { background: #FDB827; height: 100%; border-radius: 8px; }
.achv-card.achv-earned .achv-progress-fill { background: #00cc66; }
.achv-progress-note { font-size: 0.7rem; color: #999; }

@media (max-width: 480px) {
    .achv-summary-stat { min-width: 90px; padding: 10px 12px; }
}