/* ================================
   NAVIGATION (IN HEADER)
   ================================ */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    button {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(12, 20, 17, 0.8);
        border: 1px solid var(--dusk);
        border-radius: 6px;
        padding: 6px 10px;
        backdrop-filter: blur(8px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        transition: all 0.2s;
        color: var(--bud);

        &:hover {
            background: rgba(20, 30, 25, 0.9);
            border-color: var(--bloom);
        }

        &.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }

        > div {
            font-size: var(--base-font-size);
            line-height: 1.2;

            &#prevUnitLevel, &#nextUnitLevel {
                color: var(--frond);
                opacity: 0.8;
            }

            &#prevUnitType, &#nextUnitType {
                color: var(--bud);
                font-weight: bold;
            }
        }

        svg {
            color: var(--bloom);
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
    }
}