/* =============================================================================
   mission-beacon-hint.css - Course hint pill fixed above ship nav bar
   ============================================================================= */

.mission-beacon-hint {
    position: fixed;
    z-index: calc(var(--z-ship-nav) + 1);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(197, 160, 89, 0.35);
    background: rgb(10 14 20 / 85%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0s linear 0.18s;
}

.mission-beacon-hint--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: mission-beacon-hint-pulse 2s ease-in-out infinite;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

@keyframes mission-beacon-hint-pulse {
    0%,
    100% {
        border-color: rgb(197 160 89 / 35%);
        box-shadow:
            var(--shadow-sm),
            0 0 0 0 rgb(197 160 89 / 0%);
    }
    50% {
        border-color: rgb(197 160 89 / 70%);
        box-shadow:
            var(--shadow-sm),
            0 0 22px 5px rgb(197 160 89 / 45%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mission-beacon-hint--open {
        animation: none;
    }
}

.mission-beacon-hint__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: -2px;
}

.mission-beacon-hint__text {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.35;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .mission-beacon-hint__text {
        white-space: normal;
        max-width: min(16rem, calc(100vw - 4rem));
    }
}