{{ badge.unlocked ? badge.icon : '🔒' }}
{{ badge.name }}
.badge-grid {
background: $app-surface;
border-radius: 20rpx;
padding: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.badge-grid-inner {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.badge-cell {
width: calc(33.33% - 11rpx);
display: flex;
flex-direction: column;
align-items: center;
padding: 12rpx 0;
}
.badge-cell--locked { opacity: 0.5; }
.badge-icon-wrap {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: linear-gradient(135deg, $accent-gold, #FFA500);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
}
.badge-icon-wrap--locked { background: $uni-border-color-light; }
.badge-icon { font-size: 36rpx; }
.badge-name { font-size: 22rpx; color: $facade-text-strong; text-align: center; }