/* Navigation Rating Badges - Compact Design */

#navRatingBadges {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
}

.nav-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    transition: opacity 0.15s ease, transform 0.15s ease;
    cursor: help;
    white-space: nowrap;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.dark .nav-rating-badge {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.nav-rating-badge:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.nav-rating-badge-bullet {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.dark .nav-rating-badge-bullet {
    background: #78350f;
    color: #fcd34d;
    border-color: #92400e;
}

.nav-rating-badge-blitz {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.dark .nav-rating-badge-blitz {
    background: #1e3a8a;
    color: #93c5fd;
    border-color: #1e40af;
}

.nav-rating-badge-rapid {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.dark .nav-rating-badge-rapid {
    background: #14532d;
    color: #86efac;
    border-color: #166534;
}

.nav-rating-badge-classical {
    background: #fae8ff;
    color: #6b21a8;
    border-color: #f3e8ff;
}

.dark .nav-rating-badge-classical {
    background: #581c87;
    color: #d8b4fe;
    border-color: #6b21a8;
}

.nav-rating-icon {
    font-size: 0.625rem;
    line-height: 1;
}

.nav-rating-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
    letter-spacing: -0.025em;
    font-size: 0.625rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    #navRatingBadges {
        gap: 0.2rem;
    }

    .nav-rating-badge {
        padding: 0.1rem 0.25rem;
        font-size: 0.5625rem;
    }

    .nav-rating-icon {
        font-size: 0.5625rem;
    }

    .nav-rating-value {
        font-size: 0.5625rem;
    }
}

/* Hide rating badges on very small screens to save space */
@media (max-width: 640px) {
    #navRatingBadges {
        display: none;
    }
}