/**
 * Achievement Badges Styles
 * Styles for achievement badge illustrations
 */

/* Badge Container */
.achievement-badge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-md, var(--radius-md));
    transition: all 0.3s ease;
    position: relative;

.achievement-badge-container.unlocked {
    opacity: 1;

.achievement-badge-container.locked {
    opacity: 0.5;
    filter: grayscale(0.7);

.achievement-badge-container:hover {
    transform: translateY(-2px);

.achievement-badge-container.unlocked:hover {
    filter: drop-shadow(0 4px 12px var(--badge-color, var(--color-primary)));

/* Size Variants */
.achievement-badge-small {
    padding: var(--spacing-xs, 0.25rem);

.achievement-badge-medium {
    padding: var(--spacing-sm, 0.5rem);

.achievement-badge-large {
    padding: var(--spacing-md, 1rem);

/* Image Wrapper */
.achievement-badge-image-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

.achievement-badge-small .achievement-badge-image-wrapper {
    width: var(--spacing-3xl);
    height: var(--spacing-3xl);

.achievement-badge-medium .achievement-badge-image-wrapper {
    width: 128px;
    height: 128px;

.achievement-badge-large .achievement-badge-image-wrapper {
    width: 256px;
    height: 256px;

/* Badge Image */
.achievement-badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md, var(--radius-md));
    filter: drop-shadow(0 2px 8px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3));
    transition: all 0.3s ease;

.achievement-badge-container.unlocked .achievement-badge-image {
    filter: drop-shadow(0 2px 8px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3)) 
            drop-shadow(0 0 12px var(--badge-color, var(--color-primary)));

.achievement-badge-container:hover .achievement-badge-image {
    transform: scale(1.05);

/* Fallback Icon */
.achievement-badge-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 0, 212, 255), 0.1), rgba(0, 255, 136, 0.1));
    border: 2px solid var(--badge-color, var(--color-primary));
    border-radius: var(--radius-md, var(--radius-md));
    font-size: 2em;

.achievement-badge-small .achievement-badge-fallback {
    font-size: 1.5em;

.achievement-badge-large .achievement-badge-fallback {
    font-size: 3em;

.achievement-badge-icon {
    filter: drop-shadow(0 2px 4px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3));

/* Content */
.achievement-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    text-align: center;

/* Badge Name */
.achievement-badge-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-primary, var(--color-text-primary));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;

.achievement-badge-small .achievement-badge-name {
    font-size: var(--font-size-xs, 0.75rem);

.achievement-badge-large .achievement-badge-name {
    font-size: var(--font-size-base, 1rem);

/* Badge Description */
.achievement-badge-description {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, var(--color-text-secondary));
    margin: 0;
    line-height: 1.4;
    max-width: 200px;

.achievement-badge-small .achievement-badge-description {
    font-size: 0.65rem;
    max-width: 120px;

.achievement-badge-large .achievement-badge-description {
    font-size: var(--font-size-sm, 0.875rem);
    max-width: 304px;

/* Loading State */
.achievement-badge-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md, 1rem);
    min-height: 128px;

.achievement-badge-spinner {
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    border: 3px solid var(--color-border, #333);
    border-top-color: var(--badge-color, var(--color-primary));
    border-radius: var(--radius-full);
    animation: achievementBadgeSpin 1s linear infinite;

@keyframes achievementBadgeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

/* Badge Grid (for hall of fame) */
.achievement-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);

/* Badge List (for profile) */
.achievement-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem);

.achievement-badge-list .achievement-badge-container {
    flex: 0 0 auto;

/* Unlock Animation */
@keyframes achievementUnlock {
    0% {
        transform: scale(0);
        opacity: 0;

    50% {
        transform: scale(1.2);

    100% {
        transform: scale(1);
        opacity: 1;

.achievement-badge-container.unlocked.new {
    animation: achievementUnlock 0.6s ease-out;

/* Glow Effect for Unlocked Badges */
.achievement-badge-container.unlocked::before {
    content: '';
    position: absolute;
    top: -calc(var(--spacing-xs) / 2);
    left: -calc(var(--spacing-xs) / 2);
    right: -calc(var(--spacing-xs) / 2);
    bottom: -calc(var(--spacing-xs) / 2);
    border-radius: var(--radius-md, var(--radius-md));
    background: linear-gradient(45deg, 
        var(--badge-color, var(--color-primary)), 
        transparent, 
        var(--badge-color, var(--color-primary)));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;

.achievement-badge-container.unlocked:hover::before {
    opacity: 0.3;
    animation: achievementGlow 2s ease-in-out infinite;

@keyframes achievementGlow {
    0%, 100% {
        opacity: 0.3;

    50% {
        opacity: 0.6;

/* Responsive Design */
@media (max-width: 768px) {
    .achievement-badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--spacing-sm, 0.5rem);

    .achievement-badge-medium .achievement-badge-image-wrapper {
        width: 96px;
        height: 96px;

    .achievement-badge-large .achievement-badge-image-wrapper {
        width: 192px;
        height: 192px;

/* Integration with existing achievement system */
.achievement-badge {
    /* Override existing achievement badge styles if needed */
    background: transparent;
    border: none;
    padding: 0;

.achievement-badge.locked {
    opacity: 0.5;
    filter: grayscale(0.7);
}


}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}